/* ============================================================
   ANKLE STEEL MÉXICO · ajustes para celular (24-sep-2026)
   Se carga DESPUÉS de site.css. Corrige textos y botones que
   se salían de la pantalla en teléfonos de 320–430 px.
   ============================================================ */

/* Palabras largas (correos, ligas) parten línea en vez de empujar el ancho */
h1,h2,h3,h4,p,li,dd,dt,td,th,label,summary,.btn{overflow-wrap:break-word;}

/* Los hijos de las rejillas pueden encogerse (antes el botón más largo
   dictaba el ancho de toda la columna) */
.hero .contenedor>*,.dos-col>*,.portal-caja>*,.catalogo-bloque>*,.cert>*,
.contacto>*,.pasos>li,.pasos li>div,.familias>*,.alianzas>*,.pilares>*,
.proy-destacados>*,.descargas>*,.descarga>div{min-width:0;}

/* Botón de contorno sobre el fondo azul del portal: texto blanco legible */
.portal .btn-linea{color:#fff;border-color:rgba(255,255,255,.4);}
.portal .btn-linea:hover{border-color:#fff;background:rgba(255,255,255,.06);}

/* Correo en verde oscuro sobre fondo azul: se aclara para que se lea */
.portal .entrada a{color:#7FD8A6 !important;}

/* Botón «Enviar requisición» dentro del menú móvil: texto blanco
   (el color gris de los enlaces del menú lo dejaba casi ilegible) */
.nav a.btn-verde,.nav a.btn-verde:hover{color:#fff;border-bottom:1.5px solid transparent;}

@media (max-width:640px){
  /* Red de seguridad: nada provoca desplazamiento lateral de la página */
  body{overflow-x:clip;}

  /* Títulos un poco más compactos */
  h1{font-size:clamp(28px,8.6vw,36px);letter-spacing:-.6px;}
  h2,h2[style]{font-size:clamp(23px,6.6vw,28px) !important;}
  .portal-caja h3{font-size:19px;}
  .entrada{font-size:16px;}

  /* Botones: pueden ocupar dos renglones y nunca rebasan su caja */
  .btn{white-space:normal;text-align:center;line-height:1.25;max-width:100%;padding:14px 18px;}
  .hero .acciones .btn,.portal-caja .cta .btn,.contacto .btn,.formulario .btn{width:100%;}

  /* Pasos del portal: uno debajo del otro (el HTML trae 3 columnas en línea) */
  .pasos[style]{grid-template-columns:1fr !important;gap:18px !important;}

  /* Cajas del portal con menos relleno lateral */
  .portal-caja{padding:22px 18px;gap:24px;}
  .portal-caja .liga{font-size:12.5px;}

  /* Etiquetas flotantes de la imagen principal: más chicas y dentro del borde */
  .hero-chip{padding:8px 12px;}
  .hero-chip b{font-size:17px;}
  .hero-chip span{font-size:9.5px;letter-spacing:1px;}
  .hero-chip.uno{left:8px;bottom:-14px;}
  .hero-chip.dos{right:8px;top:-12px;}

  /* Cifras de la banda oscura */
  .cifras .celda{padding:24px 18px;}
  .cifras b{font-size:28px;}

  /* Historial de proyectos: en celular cada renglón es una tarjeta
     (antes era una tabla de 5 columnas con desplazamiento lateral) */
  .tabla-envoltura{overflow-x:visible;}
  .tabla-proy,.tabla-proy tbody{display:block;}
  .tabla-proy thead{display:none;}
  .tabla-proy tbody tr{
    display:grid;grid-template-columns:1fr auto;column-gap:12px;
    border:1px solid var(--linea);border-radius:var(--radio);background:#fff;
    padding:14px 16px;margin-top:12px;
  }
  .tabla-proy tbody tr[hidden]{display:none;}
  .tabla-proy tbody tr:nth-child(even){background:#fff;}
  .tabla-proy td{display:block;border:0;padding:0;width:auto !important;}
  .tabla-proy .c-cli{grid-column:1;grid-row:1;font-size:14.5px;line-height:1.35;}
  .tabla-proy .c-anio{grid-column:2;grid-row:1;font-size:13px;}
  .tabla-proy .c-proy{grid-column:1 / -1;margin-top:4px;font-size:14px;}
  .tabla-proy .c-ubi{grid-column:1 / -1;font-size:13px;}
  .tabla-proy .c-mat{grid-column:1 / -1;margin-top:8px;padding-top:8px;border-top:1px solid var(--linea);font-size:13px;}
  .tabla-proy .c-mat:empty{display:none;}

  /* Catálogo: la barra de selección conserva su margen lateral */
  .barra-sel .fila{padding:11px 18px;gap:10px;}
  .barra-sel .der{margin-left:0;width:100%;}
  .barra-sel .der .enlace-sec{flex:1;}
}

@media (max-width:360px){
  .contenedor{padding:0 14px;}
  .eyebrow{letter-spacing:1.8px;}
  .clientes{grid-template-columns:1fr 1fr;}
  .clientes span{font-size:12px;padding:14px 8px;}
  .portal-caja h3{font-size:16.5px;}
  .barra-sel .fila{padding:11px 14px;}
}