/* Polímeros Tapatíos · sistema de diseño
   Paleta y tipografía tomadas del brandbook oficial. */

:root{
  --negro:#161615; --crema:#F8F7EE; --terracota:#D77358; --mostaza:#E6C387;
  --salvia:#83A480; --azul:#80B0BE; --rosa:#F5C2BD;

  /* Un solo crema en todo: pagina, tarjeta y fotografia. Antes la tarjeta
     era #FFFEF8 y la foto #F8F7EE, y eso dibujaba un cuadro claro alrededor
     de cada producto. Los bordes son los que separan, no el tono. */
  --fondo:#F8F7EE; --sup:#F8F7EE; --tinta:#161615; --tinta-2:#57554C;
  --tinta-3:#8B887C; --linea:#E0DCCB; --linea-fuerte:#161615;
  --critico:#B0232E; --mayor:#C88F31; --menor:#7D9C79;
  --terracota-txt:#B05E48;   /* terracota de marca al 82%: 4.58 de contraste sobre la tarjeta */

  --sans:'Darker Grotesque',system-ui,sans-serif;
  --txt:ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
/* Si una regla declara display, pisa el display:none que el navegador le da a
   [hidden] y el elemento reaparece. Esto lo cierra de una vez para todo el
   sitio: lo que esté marcado como oculto, se queda oculto. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--txt);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.env{max-width:1220px;margin:0 auto;padding:0 30px}
.mono{font-family:var(--mono)}

/* ---------- navegación ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--negro);color:#F2F0E4;
  border-bottom:1px solid rgba(242,240,228,.13)}
.nav .env{display:flex;align-items:center;gap:24px;height:62px}
.nav .iso{width:28px;height:28px;flex:0 0 auto;color:#F2F0E4}
.nav .iso svg{width:100%;height:100%;display:block}
.nav .wm{font-family:var(--sans);font-weight:900;font-size:15px;line-height:.9;
  text-transform:uppercase;margin-right:auto;text-decoration:none}
.nav .links{display:flex;gap:19px}
.nav .links a{color:#C6C2B4;text-decoration:none;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.nav .links a:hover,.nav .links a:focus-visible{color:#F2F0E4}
.idioma{display:flex;border:1px solid rgba(242,240,228,.28)}
.idioma a{color:#C6C2B4;text-decoration:none;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;padding:5px 9px}
.idioma a[aria-current="true"]{background:#F2F0E4;color:var(--negro)}
/* EN queda inerte hasta que exista la version en ingles: enlazarla a una
   pagina que no esta publicada daba 404 en las 118 paginas del sitio */
.idioma .pronto{font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:5px 9px;
  color:#6E6B60;cursor:default}
/* El buscador vive en la barra, asi que acompaña en todas las paginas. Las
   secciones se esconden antes que el, porque el buscador es la salida cuando
   ya no hay menu: escribes y llegas al catalogo filtrado. */
.busca-nav{display:flex;align-items:center;flex:0 0 auto;
  border:1px solid rgba(242,240,228,.28);height:30px}
.busca-nav input{width:150px;min-width:0;border:0;background:none;color:#F2F0E4;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:0 10px;
  height:100%;outline-offset:-2px}
.busca-nav input::placeholder{color:#8A8778;text-transform:uppercase;letter-spacing:.1em}
.busca-nav input:focus{width:210px}
.busca-nav input:focus-visible{outline:1px solid var(--mostaza)}
.busca-nav input::-webkit-search-cancel-button{display:none}
.busca-nav button{flex:none;border:0;border-left:1px solid rgba(242,240,228,.28);
  background:none;color:#C6C2B4;height:100%;width:32px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.busca-nav button:hover{color:var(--mostaza)}
.busca-nav svg{width:15px;height:15px;display:block}
/* 44 px de alto: es el mínimo que se toca con el pulgar sin fallar. Estaba en
   30 y es el único botón que abre la navegación en celular. */
.menu{display:none;align-items:center;gap:8px;border:1px solid rgba(242,240,228,.28);
  background:none;color:#C6C2B4;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;height:44px;padding:0 14px;cursor:pointer;flex:none}
.menu:hover{color:#F2F0E4;border-color:rgba(242,240,228,.5)}
.menu .rayas{width:13px;height:9px;border-top:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;position:relative}
.menu .rayas::after{content:'';position:absolute;left:0;right:0;top:2.7px;
  border-top:1.5px solid currentColor}
@media (max-width:1120px){
  .menu{display:flex}
  .nav .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    gap:0;background:var(--negro);padding:4px 0 10px;
    border-bottom:1px solid rgba(242,240,228,.13)}
  .nav .links.abierto{display:flex}
  .nav .links a{font-size:12px;padding:13px 18px;letter-spacing:.09em}
  .nav .links a:hover{background:rgba(242,240,228,.06);color:#F2F0E4}
}
/* En telefono queda solo la lupa: el campo no cabe junto al logotipo, el menu
   y el idioma. Al tocarla se abre sobre la barra y ocupa todo el ancho. */
@media (max-width:620px){
  .nav .env{gap:12px}
  .busca-nav input{width:0;padding:0;opacity:0}
  .busca-nav.abierta{position:absolute;left:16px;right:16px;top:16px;z-index:2;
    background:var(--negro);border-color:rgba(242,240,228,.5)}
  .busca-nav.abierta input{width:100%;padding:0 12px;opacity:1;font-size:16px}
}

/* ---------- migas ---------- */
.migas{padding:16px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-3)}
.migas a{text-decoration:none}
.migas a:hover{color:var(--tinta)}
.migas span{margin:0 7px}

/* ---------- encabezado de producto ---------- */
.prod-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:44px;
  padding:26px 0 54px;align-items:start}
@media (max-width:900px){.prod-cab{grid-template-columns:1fr;gap:26px}}
.prod-foto{background:var(--crema);border:1px solid var(--linea);padding:26px;
  display:flex;align-items:center;justify-content:center}
.prod-foto img{max-height:520px;width:auto;object-fit:contain}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terracota);margin:0 0 12px}
h1{font-family:var(--sans);font-weight:900;font-size:clamp(34px,4.6vw,58px);line-height:.94;
  letter-spacing:-.015em;margin:0 0 16px;text-transform:uppercase;text-wrap:balance}
.resumen{font-size:17px;color:var(--tinta-2);margin:0 0 24px;max-width:52ch}

.claves{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:0;
  border-top:1.5px solid var(--linea-fuerte);border-bottom:1px solid var(--linea);
  margin-bottom:26px}
.clave{padding:13px 15px 15px;border-left:1px solid var(--linea)}
.clave:first-child{border-left:0}
.clave .k{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);display:block;margin-bottom:4px}
.clave .v{font-family:var(--sans);font-weight:900;font-size:23px;line-height:1;
  font-variant-numeric:tabular-nums}

.acciones{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;text-decoration:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;padding:13px 22px;border:1px solid currentColor;
  background:none;color:var(--tinta);cursor:pointer}
.btn.solido{background:var(--negro);color:#F2F0E4;border-color:var(--negro)}
.btn.solido:hover{background:var(--terracota);border-color:var(--terracota)}
.btn:hover{border-color:var(--linea-fuerte)}

/* ---------- secciones ---------- */
.bloque{padding:44px 0;border-top:1px solid var(--linea)}
.rot{display:flex;align-items:baseline;gap:13px;margin-bottom:20px}
.rot .n{font-family:var(--mono);font-size:10.5px;color:var(--terracota);letter-spacing:.1em}
.rot h2{font-family:var(--sans);font-weight:900;font-size:26px;margin:0;line-height:1;
  text-transform:uppercase;letter-spacing:-.008em}
.rot .nota{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--tinta-3);
  letter-spacing:.06em}

.par{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media (max-width:860px){.par{grid-template-columns:1fr;gap:26px}}

/* ---------- tablas ---------- */
.tabla-caja{overflow-x:auto;border:1px solid var(--linea);background:var(--sup)}
table{border-collapse:collapse;width:100%;min-width:420px}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-3);text-align:left;padding:11px 15px;font-weight:400;
  border-bottom:1.5px solid var(--linea-fuerte);white-space:nowrap}
td{padding:11px 15px;border-bottom:1px solid var(--linea);font-size:15px}
tr:last-child td{border-bottom:0}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap}
td .cota{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border:1px solid var(--linea-fuerte);border-radius:50%;font-family:var(--mono);font-size:10px;
  margin-right:10px;vertical-align:middle}
td .tol{font-family:var(--mono);font-size:12px;color:var(--tinta-3);margin-left:7px}
.clase{display:inline-block;width:9px;height:9px;margin-right:9px}

.plano{background:var(--sup);border:1px solid var(--linea);padding:20px;
  display:flex;align-items:center;justify-content:center}
.plano img{max-height:430px;width:auto;object-fit:contain}

/* ---------- calculadora ---------- */
.calc{background:var(--sup);border:1px solid var(--linea);padding:22px 24px 24px}
.calc h3{font-family:var(--sans);font-weight:900;font-size:21px;margin:0 0 6px;
  text-transform:uppercase;line-height:1}
.calc p{margin:0 0 16px;color:var(--tinta-2);font-size:14.5px}
.calc label{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);display:block;margin-bottom:5px}
.calc input{font-family:var(--mono);font-size:17px;padding:9px 12px;
  border:1px solid var(--linea-fuerte);background:var(--fondo);color:var(--tinta);width:160px}
.res{display:flex;flex-wrap:wrap;gap:24px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--linea)}
.res div b{display:block;font-family:var(--sans);font-weight:900;font-size:27px;line-height:1;
  font-variant-numeric:tabular-nums}
.res div span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3)}

/* ---------- relacionados ---------- */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.rel a{background:var(--sup);border:1px solid var(--linea);text-decoration:none;display:block;
  transition:border-color .15s}
.rel a:hover{border-color:var(--linea-fuerte)}
.rel .im{background:var(--crema);aspect-ratio:1;display:flex;align-items:center;
  justify-content:center;padding:16px}
.rel .im img{max-height:100%;width:auto;object-fit:contain}
.rel .tx{padding:12px 14px 15px;border-top:1px solid var(--linea)}
.rel .tx b{display:block;font-family:var(--sans);font-weight:900;font-size:15px;line-height:1.1;
  text-transform:uppercase;margin-bottom:4px}
.rel .tx span{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--tinta-3)}

/* ---------- pie ---------- */
.pie{background:var(--negro);color:#8B8778;margin-top:56px;padding:44px 0 34px}
.pie a{color:#E7E4D6;text-decoration:none}
.pie a:hover{color:var(--mostaza)}
.pie-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;
  padding-bottom:30px;border-bottom:1px solid #2E2D28}
.pc{display:flex;flex-direction:column;gap:5px;min-width:0}
.pc.der{text-align:right}
.pc .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#78756A;margin-bottom:4px}
/* El pie viejo era ilegible: 10 px en gris sobre negro. Al agrandarlo se fue al
   otro extremo y competia con los titulos de la pagina. Aqui queda en el cuerpo
   de texto del sitio — se lee de corrido y no grita. */
.pc .gr{font-family:var(--txt);font-weight:600;font-size:16px;line-height:1.45;
  overflow-wrap:anywhere}
.pc .dir{font-family:var(--txt);font-size:13px;color:#8B8778;margin-top:2px}
.pie-bajo{display:flex;align-items:center;gap:18px;padding-top:24px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;line-height:1.85;color:#78756A}
.iso-pie{width:52px;height:auto;flex:none;opacity:.85}
@media (max-width:620px){
  .pie-cols{grid-template-columns:1fr;gap:26px}
  .pc.der{text-align:left}
  .pc .gr{font-size:16px}
  .pie-bajo{flex-direction:column;align-items:flex-start;gap:12px}
}

@media (max-width:620px){.env{padding:0 18px}.bloque{padding:32px 0}}

/* ---------- catálogo ---------- */
.cat-cab{padding:30px 0 26px}
.cat-cab h1{margin-bottom:14px}
.cat-cab .intro{font-size:17px;color:var(--tinta-2);max-width:58ch;margin:0}
.filtros{border-top:1.5px solid var(--linea-fuerte);border-bottom:1px solid var(--linea);
  padding:4px 0 14px;margin-bottom:22px}
.fila-f{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:9px 0 0}
.fila-f > b{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);font-weight:400;width:82px;flex:0 0 auto}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--linea);background:var(--sup);color:var(--tinta-2);padding:6px 12px;
  cursor:pointer;line-height:1.2}
.chip:hover{border-color:var(--linea-fuerte);color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--negro);color:#F2F0E4;border-color:var(--negro)}
.chip[aria-pressed="true"]{background:var(--linea-fuerte);color:var(--fondo)}
.cuenta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:16px;font-family:var(--mono);font-size:11px;color:var(--tinta-3);
  letter-spacing:.06em}
.cuenta button{background:none;border:0;color:var(--terracota);font:inherit;cursor:pointer;
  text-transform:uppercase;letter-spacing:.1em}
.malla{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px}
.tarjeta{background:var(--sup);border:1px solid var(--linea);text-decoration:none;display:block;
  transition:border-color .15s}
.tarjeta:hover{border-color:var(--linea-fuerte)}
.tarjeta .im{background:var(--crema);aspect-ratio:1;display:flex;align-items:center;
  justify-content:center;padding:18px}
.tarjeta .im img{max-height:100%;width:auto;object-fit:contain}
.tarjeta .tx{padding:13px 15px 16px;border-top:1px solid var(--linea)}
.tarjeta .tx b{display:block;font-family:var(--sans);font-weight:900;font-size:16px;
  line-height:1.06;text-transform:uppercase;margin-bottom:6px}
.tarjeta .tx .esp{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--tinta-3);line-height:1.65}
.tarjeta .tx .esp i{font-style:normal;color:var(--tinta-2)}
.vacio-f{padding:44px 0;text-align:center;color:var(--tinta-3);font-family:var(--mono);
  font-size:12px;letter-spacing:.08em}
.grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:13px;
  margin-bottom:34px}
.grupos a{background:var(--sup);border:1px solid var(--linea);padding:15px 17px 17px;
  text-decoration:none;display:block}
.grupos a:hover{border-color:var(--linea-fuerte)}
.grupos b{display:block;font-family:var(--sans);font-weight:900;font-size:18px;
  text-transform:uppercase;line-height:1.05;margin-bottom:4px}
.grupos span{font-family:var(--mono);font-size:10.5px;color:var(--tinta-3);letter-spacing:.06em}

/* ---------- sector ---------- */
.sec-hero{background:var(--negro);color:#F2F0E4;overflow:hidden}
.sec-hero .env{display:grid;grid-template-columns:1.06fr .94fr;gap:34px;align-items:center;
  padding:44px 30px 46px;min-height:340px}
.sec-hero h1{color:#F2F0E4;margin-bottom:14px}
.sec-hero .eyebrow{color:var(--mostaza)}
.sec-hero p{color:#C6C2B4;font-size:17px;max-width:48ch;margin:0 0 22px}
.sec-hero .im{display:flex;align-items:center;justify-content:center}
.sec-hero .im img{max-height:290px;width:auto;object-fit:contain;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.55))}
.sec-hero .datos{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(242,240,228,.2)}
.sec-hero .datos div{padding:12px 20px 4px;border-left:1px solid rgba(242,240,228,.2)}
.sec-hero .datos div:first-child{border-left:0;padding-left:0}
.sec-hero .datos b{display:block;font-family:var(--sans);font-weight:900;font-size:24px;line-height:1}
.sec-hero .datos span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:#9C9789}
@media (max-width:860px){.sec-hero .env{grid-template-columns:1fr;padding:32px 20px 34px}
  .sec-hero .im img{max-height:200px}}
.exige{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:0;
  border-top:1.5px solid var(--linea-fuerte);border-bottom:1px solid var(--linea);margin-bottom:32px}
.exige div{padding:16px 20px 20px;border-left:1px solid var(--linea)}
.exige div:first-child{border-left:0;padding-left:0}
.exige b{display:block;font-family:var(--sans);font-weight:900;font-size:17px;
  text-transform:uppercase;line-height:1.05;margin-bottom:6px}
.exige span{font-size:14px;color:var(--tinta-2);line-height:1.5}
.sec-video{position:relative;overflow:hidden;aspect-ratio:912/348;background:#000;margin-bottom:34px}
.sec-video video{width:100%;height:100%;object-fit:cover;display:block}
.sec-video .velo{position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(22,22,21,.88) 0%,rgba(22,22,21,.6) 48%,rgba(22,22,21,.15) 100%)}
.sec-video .txt{position:absolute;left:0;bottom:0;padding:26px 30px;color:#F2F0E4}
.sec-video .txt h1{color:#F2F0E4;margin:0}
.sec-video .txt .eyebrow{color:var(--mostaza);margin-bottom:9px}
.rejilla-sec{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px}
.rejilla-sec a{background:var(--sup);border:1px solid var(--linea);text-decoration:none;display:block}
.rejilla-sec a:hover{border-color:var(--linea-fuerte)}
.rejilla-sec .im{background:var(--crema);aspect-ratio:4/3;display:flex;align-items:center;
  justify-content:center;padding:20px}
.rejilla-sec .im img{max-height:100%;width:auto;object-fit:contain}
.rejilla-sec .tx{padding:16px 18px 20px;border-top:1px solid var(--linea)}
.rejilla-sec .tx b{display:block;font-family:var(--sans);font-weight:900;font-size:20px;
  text-transform:uppercase;line-height:1.04;margin-bottom:6px}
.rejilla-sec .tx p{margin:0 0 10px;font-size:14px;color:var(--tinta-2);line-height:1.5}
.rejilla-sec .tx .esp{font-family:var(--mono);font-size:10.5px;color:var(--tinta-3);
  letter-spacing:.05em;border-top:1px solid var(--linea);padding-top:9px;display:block}

/* ---------- canasta y contacto ---------- */
.aviso{background:var(--sup);border:1px solid var(--linea-fuerte);padding:12px 16px;margin-top:14px;
  font-size:14.5px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.aviso a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.btn.ok{background:var(--menor);border-color:var(--menor);color:var(--negro)}
.can-tot{display:flex;flex-wrap:wrap;gap:0;border-top:1.5px solid var(--linea-fuerte);
  border-bottom:1px solid var(--linea);margin:22px 0 26px}
.can-tot div{padding:15px 22px 17px;border-left:1px solid var(--linea);flex:1 1 auto}
.can-tot div:first-child{border-left:0;padding-left:0}
.can-tot b{display:block;font-family:var(--sans);font-weight:900;font-size:30px;line-height:1;
  font-variant-numeric:tabular-nums}
.can-tot span{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-3)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
  background:var(--sup);border:1px solid var(--linea);padding:24px 26px 26px}
.form label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:6px}
.form input,.form textarea{width:100%;font-family:var(--txt);font-size:15px;padding:10px 12px;
  border:1px solid var(--linea-fuerte);background:var(--fondo);color:var(--tinta)}
.form .ancho{grid-column:1/-1}
.form textarea{min-height:78px;resize:vertical}
.can-vacia{padding:34px 0;color:var(--tinta-3);font-family:var(--mono);font-size:12px;
  letter-spacing:.07em}
td.qta input{width:96px;font-family:var(--mono);font-size:14px;padding:6px 8px;
  border:1px solid var(--linea);background:var(--fondo);color:var(--tinta)}
td.quita button{background:none;border:0;color:var(--tinta-3);font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:0}
td.quita button:hover{color:var(--critico)}
.vias{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:0;
  border-top:1.5px solid var(--linea-fuerte);border-bottom:1px solid var(--linea);margin-bottom:30px}
.via{padding:16px 22px 20px;border-left:1px solid var(--linea)}
.via:first-child{border-left:0;padding-left:0}
.via .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracota);display:block;margin-bottom:7px}
.via .v{font-family:var(--sans);font-weight:900;font-size:21px;line-height:1.1}
.via .v a{text-decoration:none}
.via small{display:block;color:var(--tinta-3);font-size:13px;margin-top:5px;font-family:var(--txt)}
.por-confirmar{border-left:3px solid var(--mayor);background:var(--sup);padding:11px 16px;
  font-size:13.5px;color:var(--tinta-2);margin-top:16px}

/* ---------- inicio ---------- */
.hero{position:relative;background:var(--negro);color:#F2F0E4;overflow:hidden;
  min-height:min(78vh,660px);display:flex;align-items:flex-end}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .velo{position:absolute;inset:0;background:linear-gradient(105deg,
  rgba(22,22,21,.93) 0%,rgba(22,22,21,.74) 44%,rgba(22,22,21,.28) 100%)}
.hero .env{position:relative;padding:64px 30px 46px;width:100%}
.hero .eyebrow{color:var(--mostaza);margin-bottom:16px}
.hero h1{color:#F2F0E4;font-size:clamp(38px,6vw,80px);margin-bottom:20px;max-width:19ch}
.hero p.sub{color:#C6C2B4;font-size:17.5px;max-width:46ch;margin:0 0 28px}
.hero .acciones .btn{color:#F2F0E4}
.hero .acciones .btn.solido{background:#F2F0E4;color:var(--negro);border-color:#F2F0E4}
.hero .acciones .btn.solido:hover{background:var(--mostaza);border-color:var(--mostaza)}

/* buscador por especificacion */
.buscador{background:var(--sup);border:1px solid var(--linea-fuerte);padding:22px 24px 24px;
  margin:-42px auto 0;position:relative;z-index:5;max-width:1160px}
.buscador h2{font-size:21px;margin:0 0 4px}
.buscador .pie-b{font-family:var(--mono);font-size:11px;color:var(--tinta-3);margin:0 0 16px;
  letter-spacing:.04em}
.b-fila{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.b-fila > div{flex:1 1 150px}
.b-fila label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:5px}
.b-fila select,.b-fila input{width:100%;font-family:var(--mono);font-size:14px;padding:9px 10px;
  border:1px solid var(--linea-fuerte);background:var(--fondo);color:var(--tinta)}
.b-res{margin-top:18px;border-top:1px solid var(--linea);padding-top:14px}
.b-res .cta{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--tinta-3);
  margin-bottom:12px;display:block}
.b-res .cta b{color:var(--tinta);font-weight:400}
.b-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:10px}
.b-lista a{border:1px solid var(--linea);background:var(--fondo);text-decoration:none;
  padding:10px 12px 12px;display:block}
.b-lista a:hover{border-color:var(--linea-fuerte)}
.b-lista b{display:block;font-family:var(--sans);font-weight:900;font-size:14px;line-height:1.08;
  text-transform:uppercase;margin-bottom:4px}
.b-lista span{font-family:var(--mono);font-size:10px;color:var(--tinta-3);letter-spacing:.04em}
.banda-v{position:relative;overflow:hidden;aspect-ratio:912/348;background:#000}
.banda-v video{width:100%;height:100%;object-fit:cover;display:block}
.banda-v .velo{position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(22,22,21,.9) 0%,rgba(22,22,21,.62) 48%,rgba(22,22,21,.16) 100%)}
.banda-v .txt{position:absolute;left:0;bottom:0;padding:28px 32px;color:#F2F0E4;max-width:34ch}
.banda-v .txt .eyebrow{color:var(--mostaza);margin-bottom:8px}
.banda-v .txt h2{color:#F2F0E4;font-size:clamp(24px,3.4vw,40px);line-height:1;margin:0 0 10px}
.banda-v .txt p{color:#C6C2B4;font-size:15px;margin:0 0 14px}
.banda-v .sello{position:absolute;right:26px;top:22px;width:min(14%,92px);
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.banda-v .txt .btn{color:#F2F0E4;padding:10px 18px}
@media (max-width:700px){.banda-v{aspect-ratio:auto;min-height:250px}
  .banda-v .txt{padding:20px}.buscador{margin-top:0}}

/* encabezado de documento controlado */
.ap-cab .k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:4px}
.ap-cab .v{display:block;font-family:var(--sans);font-weight:900;font-size:19px;line-height:1}

/* ---------- documento legal ---------- */
.legal{max-width:74ch;padding:34px 0 20px}
.legal h2{font-family:var(--sans);font-weight:900;font-size:21px;text-transform:uppercase;
  margin:34px 0 10px;line-height:1.05;letter-spacing:-.005em}
.legal h2:first-of-type{margin-top:22px}
.legal h3{font-family:var(--sans);font-weight:900;font-size:16px;text-transform:uppercase;
  margin:22px 0 6px}
.legal p{margin:0 0 13px;color:var(--tinta-2)}
.legal ul{margin:0 0 15px;padding-left:20px;color:var(--tinta-2)}
.legal li{margin-bottom:6px}
.legal strong{color:var(--tinta);font-weight:600}
.dato{display:inline;background:var(--hueco-f,#FAF3E0);border-bottom:1.5px dashed var(--mayor);
  color:var(--tinta);font-family:var(--mono);font-size:.86em;padding:1px 5px}
/* sin nowrap: en teléfono un hueco largo no cabe en un renglón y sacaba la página */
.dato{overflow-wrap:anywhere}
.legal .fecha{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--tinta-3);
  border-top:1px solid var(--linea);padding-top:14px;margin-top:30px}
.faltan-legal{background:var(--sup);border:1px solid var(--linea-fuerte);padding:22px 24px 24px;
  margin:26px 0 6px}
.faltan-legal h3{font-family:var(--sans);font-weight:900;font-size:19px;text-transform:uppercase;
  margin:0 0 6px}
.faltan-legal p{margin:0 0 14px;color:var(--tinta-2);font-size:15px}
.faltan-legal ol{margin:0;padding-left:20px;color:var(--tinta-2);font-size:14.5px;line-height:1.75}

/* ---------- línea de tiempo ---------- */
.nota-ej{background:var(--sup);border-left:3px solid var(--mayor);padding:14px 18px;
  margin:0 0 30px;font-size:14.5px;color:var(--tinta-2)}
.nota-ej b{color:var(--tinta)}
.linea{border-top:1.5px solid var(--linea-fuerte);margin-top:6px}
/* La frase con la que la empresa cierra su propia presentacion de historia.
   Va al pie de la linea de tiempo porque resume lo que la linea cuenta: no un
   salto, sino capacidades que se fueron sumando. Es cita, no copy nuestro. */
.lema{margin:26px 0 0;padding-left:20px;border-left:3px solid var(--acento,#D77358);
  font-family:var(--sans);font-weight:700;font-size:20px;line-height:1.45;
  color:var(--tinta);max-width:100%}
@media (max-width:620px){.lema{font-size:17px;padding-left:16px}}
.hito{display:grid;grid-template-columns:104px 1fr;gap:24px;padding:22px 0;
  border-bottom:1px solid var(--linea);align-items:start}
.hito .ano{font-family:var(--sans);font-weight:900;font-size:34px;line-height:.9;
  font-variant-numeric:tabular-nums;color:var(--tinta)}
.hito.pend .ano{color:var(--tinta-3)}
.hito h3{font-family:var(--sans);font-weight:900;font-size:21px;text-transform:uppercase;
  margin:0 0 6px;line-height:1.05}
.hito p{margin:0;color:var(--tinta-2);max-width:62ch}
@media (max-width:620px){.hito{grid-template-columns:1fr;gap:6px}.hito .ano{font-size:27px}}
.equipo{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
@media (max-width:860px){.equipo{grid-template-columns:1fr;gap:24px}}
.equipo .foto{position:relative;overflow:hidden;aspect-ratio:912/348;background:#000}
.equipo .foto video{width:100%;height:100%;object-fit:cover;display:block}

/* familia de producto sobre luz de marca: sin rectángulo, el envase vive en la página */
.sec-hero .im.familia{position:relative;padding:0}
.sec-hero .im.familia::before{content:'';position:absolute;inset:-12% -6% -18% -6%;
  background:radial-gradient(ellipse at 56% 62%,
    rgba(var(--luz),.50) 0%, rgba(var(--luz),.20) 42%, rgba(var(--luz),0) 72%);
  pointer-events:none}
.sec-hero .im.familia img{position:relative;max-height:300px;width:auto;object-fit:contain;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.55))}
@media (max-width:860px){.sec-hero .im.familia img{max-height:215px}}

/* rejilla de industrias: seis tarjetas en dos filas de tres, sin huérfanas */
.malla-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.malla-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.malla-3{grid-template-columns:1fr}}

/* ---------- acceso permanente: cotizar y WhatsApp ---------- */
.flota{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;
  gap:9px;align-items:flex-end}
.flota a{display:flex;align-items:center;gap:9px;text-decoration:none;padding:11px 16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--linea-fuerte);background:var(--negro);color:#F2F0E4;
  box-shadow:0 3px 16px rgba(0,0,0,.28);white-space:nowrap}
.flota a:hover{background:var(--terracota);border-color:var(--terracota)}
.flota a.wa{background:#25D366;color:#0b2c17;border-color:#1faa53}
.flota a.wa:hover{background:#1faa53;color:#fff}
.flota a svg{width:15px;height:15px;flex:0 0 auto}
.flota .n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;background:#F2F0E4;color:var(--negro);font-size:10px}
.flota a.cot[data-vacia="1"] .n{display:none}
/* En teléfono dos botones con texto tapan media pantalla. WhatsApp se reduce a
   su icono y la cotización conserva la palabra y el contador, que es el que
   necesita explicarse. */
@media (max-width:620px){
  .flota{right:12px;bottom:12px;flex-direction:row;align-items:center;gap:8px}
  .flota a{padding:11px 12px;font-size:9px;letter-spacing:.08em;box-shadow:0 2px 10px rgba(0,0,0,.3)}
  .flota a.wa span.t{display:none}
  .flota a.wa{padding:11px}
  .flota a svg{width:17px;height:17px}
}

/* portada de industria con la fotografía que ya usa la publicidad */
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img .velo{background:linear-gradient(100deg,
  rgba(22,22,21,.93) 0%,rgba(22,22,21,.76) 40%,rgba(22,22,21,.30) 100%)}
.datos-h{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(242,240,228,.22);
  margin-top:26px;max-width:520px}
.datos-h div{padding:13px 22px 4px;border-left:1px solid rgba(242,240,228,.22)}
.datos-h div:first-child{border-left:0;padding-left:0}
.datos-h b{display:block;font-family:var(--sans);font-weight:900;font-size:27px;line-height:1;
  color:#F2F0E4}
.datos-h span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:#9C9789}

/* ---------- preguntas frecuentes ---------- */
.faqs{border-top:1.5px solid var(--linea-fuerte);max-width:80ch}
.faq{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-family:var(--sans);font-weight:900;font-size:20px;line-height:1.15;text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:15px;font-family:var(--mono);
  font-size:20px;color:var(--terracota);font-weight:400}
.faq[open] summary::after{content:'–'}
.faq summary:hover{color:var(--terracota)}
.faq > div{padding:0 34px 20px 0;color:var(--tinta-2);font-size:15.5px;max-width:68ch}

/* ---------- rejilla de industrias del inicio ---------- */
.rejilla-ind{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
@media (max-width:900px){.rejilla-ind{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rejilla-ind{grid-template-columns:1fr}}
.ind{text-decoration:none;color:inherit;display:block}
.ind .im{aspect-ratio:3/4;overflow:hidden;background:var(--crema)}
.ind .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ind:hover .im img{transform:scale(1.035)}
.ind .tx{padding:14px 0 0}
.ind .tx b{display:block;font-family:var(--sans);font-weight:900;font-size:22px;line-height:1.05;
  text-transform:uppercase;margin-bottom:5px}
.ind:hover .tx b{color:var(--terracota)}
.ind .tx p{margin:0 0 10px;font-size:14.5px;color:var(--tinta-2);line-height:1.5}
.ind .tx .esp{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--tinta-3);border-top:1px solid var(--linea);padding-top:9px}

/* interruptor de tema */

/* ---------- la ruta de un desarrollo ---------- */
.ruta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1.5px solid var(--linea-fuerte);counter-reset:paso}
.ruta li{position:relative;padding:30px 26px 34px 0;border-left:1px solid var(--linea)}
.ruta li:first-child{padding-left:0;border-left:0}
.ruta li:not(:first-child){padding-left:26px}
.ruta li::before{content:'';position:absolute;left:0;top:-5px;width:9px;height:9px;
  background:var(--terracota)}
.ruta li:first-child::before{left:0}
.ruta .np{display:block;font-family:var(--sans);font-weight:900;font-size:66px;line-height:.8;
  letter-spacing:-.04em;color:var(--linea);margin-bottom:14px;font-variant-numeric:tabular-nums}
.ruta li:hover .np{color:var(--terracota)}
.ruta h3{font-family:var(--sans);font-weight:900;font-size:21px;text-transform:uppercase;
  margin:0 0 8px;line-height:1.05}
.ruta p{margin:0;font-size:14.5px;color:var(--tinta-2);line-height:1.55}
@media (max-width:900px){.ruta{grid-template-columns:repeat(2,1fr)}
  .ruta li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:560px){.ruta{grid-template-columns:1fr}
  .ruta li{padding-left:0!important;border-left:0}}

/* consideración de empaque, tomada del F-PR-08 */
.nota-emp{margin:18px 0 0;padding:13px 17px;background:var(--sup);border-left:3px solid var(--azul);
  font-size:14.5px;color:var(--tinta-2);max-width:74ch}
.nota-emp b{color:var(--tinta)}

/* ---------- todos los botones se encienden al pasar el cursor ----------
   El sólido usa terracota, el de contorno mostaza. Dos colores de la paleta,
   distinguibles entre sí, y ambos con texto negro encima para que se lean. */
.btn{transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.btn:hover,.btn:focus-visible{background:var(--mostaza);color:var(--negro);
  border-color:var(--mostaza);outline:none}
.btn.solido:hover,.btn.solido:focus-visible{background:var(--terracota);color:var(--negro);
  border-color:var(--terracota)}
.btn.ok:hover{background:var(--menor);border-color:var(--menor);color:var(--negro)}

/* sobre las bandas y portadas oscuras el contorno es claro; al encenderse
   se invierte igual que en el resto del sitio */
.hero .acciones .btn:hover,.hero .acciones .btn:focus-visible,
.banda-v .txt .btn:hover,.banda-v .txt .btn:focus-visible,
.sec-hero .btn:hover,.sec-hero .btn:focus-visible{background:var(--mostaza);
  color:var(--negro);border-color:var(--mostaza)}
.hero .acciones .btn.solido:hover,.hero .acciones .btn.solido:focus-visible{
  background:var(--terracota);color:var(--negro);border-color:var(--terracota)}

/* los desplegables y los filtros siguen la misma lógica */
.chip{transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.chip:hover{background:var(--mostaza);color:var(--negro);border-color:var(--mostaza)}
.chip[aria-pressed="true"]:hover{background:var(--terracota);color:var(--negro);
  border-color:var(--terracota)}
.faq summary{transition:color .16s ease}
.faq summary:hover{color:var(--terracota)}
.faq summary:hover::after{color:var(--terracota)}
.faq summary:focus-visible{outline:2px solid var(--terracota);outline-offset:3px}

/* ---------- una sola escala de titular ----------
   Las ocho portadas de sección comparten tamaño. Las páginas de industria y las
   de categoría lo igualan con un tope de ancho para que no invadan la columna
   de al lado. La ficha de producto se queda más chica a propósito: ahí el
   titular es el nombre de una pieza, no una declaración. */
.sec-hero h1{font-size:clamp(38px,5vw,68px);max-width:15ch}
.cat-cab h1{font-size:clamp(38px,5.4vw,72px);max-width:17ch}
.hero .sello{position:absolute;right:34px;top:96px;width:min(11%,104px);z-index:2;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.5))}
@media (max-width:700px){.hero .sello{width:72px;right:20px;top:78px}}

/* Un hijo de rejilla no encoge por debajo de su contenido si no se le indica.
   La tabla de cotas tiene ancho mínimo y sin esto inflaba la columna entera,
   arrastrando el texto de al lado fuera de la pantalla en teléfono. */
.par > *,.prod-cab > *,.equipo > *,.malla > *,.rejilla-ind > *{min-width:0}

/* ---------- video corporativo dentro de Nosotros ----------
   No es fondo: es contenido que el visitante decide ver, con audio y controles.
   Por eso no se precarga — son 35 MB que nadie debería pagar sin pedirlos. */
.corp{position:relative;background:var(--negro);overflow:hidden}
.corp video{width:100%;height:auto;display:block;aspect-ratio:912/393;object-fit:cover;
  background:var(--negro)}
.corp .capa .eyebrow{color:var(--mostaza);margin-bottom:10px}
.corp .capa h3{font-family:var(--sans);font-weight:900;color:#F2F0E4;margin:0 0 8px;
  font-size:clamp(26px,3.6vw,44px);line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.corp .capa p{color:#C6C2B4;margin:0;font-size:15px;max-width:44ch}
.corp .capa{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:34px 36px;background:linear-gradient(180deg,rgba(22,22,21,.15) 0%,rgba(22,22,21,.55) 55%,
  rgba(22,22,21,.88) 100%);transition:opacity .5s ease,visibility .5s ease}
.corp.corriendo .capa{opacity:0;visibility:hidden}
.corp .capa .eyebrow{color:var(--mostaza);margin-bottom:10px}
.corp .capa h3{font-family:var(--sans);font-weight:900;color:#F2F0E4;margin:0 0 8px;
  font-size:clamp(26px,3.6vw,44px);line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.corp .capa p{color:#C6C2B4;margin:0;font-size:15px;max-width:44ch}
.corp .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;padding:0}
.corp.corriendo .play{display:none}
.corp .play span{width:78px;height:78px;border-radius:50%;background:rgba(248,247,238,.94);
  display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}
.corp .play:hover span{background:var(--mostaza);transform:scale(1.06)}
.corp .play svg{width:26px;height:26px;margin-left:4px;color:var(--negro)}
.corp .dur{position:absolute;right:16px;top:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;color:#C6C2B4;background:rgba(22,22,21,.6);padding:5px 9px}
.corp.corriendo .dur{display:none}
@media (max-width:620px){.corp .capa{padding:20px}.corp .play span{width:60px;height:60px}}

/* ---------- mosaico de planta ----------
   La sección pasó de explicarse a mostrarse: cada foto lleva un pie corto y el
   texto largo vive plegado, que Google sí lee aunque no se vea. */
.mosaico{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-bottom:16px}
.mos{position:relative;overflow:hidden;background:var(--crema);margin:0}
.mos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.mos:hover img{transform:scale(1.04)}
.mos figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;color:#F2F0E4;
  background:linear-gradient(180deg,rgba(22,22,21,0) 0%,rgba(22,22,21,.82) 62%);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;line-height:1.5}
.mos.alto{grid-row:span 2}
.m6{grid-column:span 6} .m4{grid-column:span 4} .m3{grid-column:span 3}
.m8{grid-column:span 8} .m12{grid-column:span 12}
.mos.r43{aspect-ratio:4/3} .mos.r32{aspect-ratio:3/2} .mos.r34{aspect-ratio:3/4}
.mos.r169{aspect-ratio:16/9}
/* Sin proporcion propia: se estira a la altura que marque la foto grande de su
   fila. Para eso su imagen va absoluta — si quedara en flujo, seria ella la que
   impondria la altura de la fila y las dos fotos volverian a quedar disparejas. */
.mos.lleno{aspect-ratio:auto;align-self:stretch}
.mos.lleno img{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:900px){.mos.lleno{aspect-ratio:3/4}}
@media (max-width:900px){.m6,.m4,.m3,.m8{grid-column:span 6}}
@media (max-width:560px){.m6,.m4,.m3,.m8,.m12{grid-column:span 12}}

/* cifras de capacidad, grandes y sin párrafo */
.capac{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:0;
  border-top:1.5px solid var(--linea-fuerte);border-bottom:1px solid var(--linea);margin:34px 0 30px}
.capac div{padding:20px 22px 22px;border-left:1px solid var(--linea)}
.capac div:first-child{border-left:0;padding-left:0}
.capac b{display:block;font-family:var(--sans);font-weight:900;font-size:clamp(34px,4.4vw,52px);
  line-height:1;font-variant-numeric:tabular-nums;margin-bottom:6px}
.capac span{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-3);display:block;line-height:1.5}

/* el texto largo, plegado: se ve limpio y Google lo lee igual */
.masinfo{border-top:1px solid var(--linea);margin-top:8px}
.masinfo summary{cursor:pointer;list-style:none;padding:15px 30px 15px 0;position:relative;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-3);transition:color .16s}
.masinfo summary::-webkit-details-marker{display:none}
.masinfo summary::after{content:'+';position:absolute;right:6px;top:11px;font-size:19px;
  color:var(--tinta-3);font-family:var(--mono)}
.masinfo[open] summary::after{content:'–'}
.masinfo summary:hover,.masinfo summary:hover::after{color:var(--terracota)}
.masinfo .cont{padding:0 0 20px;max-width:70ch;color:var(--tinta-2);font-size:15px}
.masinfo .cont p{margin:0 0 12px}
.masinfo .cont p:last-child{margin-bottom:0}

/* pie corto debajo de una tabla o de un bloque de datos */
.nota-tabla{margin:14px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  line-height:1.75;color:var(--tinta-3);max-width:64ch}
.nota-tabla b{color:var(--tinta-2)}

/* ---------- visor 3D del envase ----------
   El modelo es la silueta real girada sobre su eje; el visor solo lo encuadra
   y deja arrastrarlo. Si el navegador no puede con WebGL, .sin3d deja en su
   lugar el texto de respaldo y la pagina sigue teniendo sentido. */
.par3d{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
.par3d > *{min-width:0}
.visor{position:relative;background:var(--sup);border:1px solid var(--linea);
  padding:18px 18px 16px}
.visor canvas{display:block;width:100%;height:430px;touch-action:none;cursor:grab}
.visor canvas:active{cursor:grabbing}
.visor .pie3d{margin:6px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-3);text-align:center}
.visor .respaldo{display:none;margin:0;color:var(--tinta-2);font-size:14px;line-height:1.55}
.visor.sin3d canvas,.visor.sin3d .pie3d,.visor.sin3d .piezas{display:none}
.visor.sin3d .respaldo{display:block}
.piezas{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linea)}
.pieza{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--linea);background:none;color:var(--tinta-2);padding:6px 10px;
  cursor:pointer;line-height:1.2}
.pieza:hover{border-color:var(--linea-fuerte);color:var(--tinta)}
.pieza[aria-pressed="true"]{background:var(--linea-fuerte);color:var(--fondo);
  border-color:var(--linea-fuerte)}
.dice3d p{color:var(--tinta-2);max-width:52ch}
.dice3d .intro{color:var(--tinta)}
@media (max-width:820px){
  .par3d{grid-template-columns:1fr;gap:26px}
  .visor canvas{height:340px}
}

/* ---------- lista desplegable del buscador ----------
   Cuelga de la barra, sobre el contenido. Cada renglon es un enlace de verdad,
   asi que se puede abrir en pestaña nueva y el teclado lo recorre. */
.busca-nav{position:relative}
.sugiere{position:absolute;top:calc(100% + 6px);right:-1px;width:392px;max-width:88vw;
  max-height:min(58vh,470px);overflow-y:auto;background:var(--sup);
  border:1px solid var(--linea-fuerte);box-shadow:0 18px 44px rgba(22,22,21,.22);z-index:70}
.sug{display:grid;grid-template-columns:1fr auto;gap:0 12px;align-items:baseline;
  padding:11px 15px;border-bottom:1px solid var(--linea);text-decoration:none;color:var(--tinta)}
.sug:last-child{border-bottom:0}
.sug .nom{font-family:var(--sans);font-weight:800;font-size:17px;line-height:1.15;
  text-transform:uppercase;letter-spacing:.005em;grid-column:1}
.sug .tipo{grid-column:2;grid-row:1;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--terracota);white-space:nowrap}
.sug .det{grid-column:1/-1;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--tinta-3);margin-top:3px}
.sug:hover,.sug[aria-selected="true"]{background:var(--negro);color:#F2F0E4}
.sug:hover .det,.sug[aria-selected="true"] .det{color:#A9A597}
.sug:hover .tipo,.sug[aria-selected="true"] .tipo{color:var(--mostaza)}
.sugiere .nada{margin:0;padding:16px 15px;font-size:13.5px;line-height:1.5;color:var(--tinta-2)}
@media (max-width:620px){
  .sugiere{right:0;left:0;width:auto;max-width:none}
  .busca-nav:not(.abierta) .sugiere{display:none}
}

/* cierre de la ficha de producto: a donde ir por el detalle que ya no se
   muestra aqui, porque vive completo en calidad y en el PDF */
@media (max-width:700px){
  .migas a{display:inline-block;min-height:34px;line-height:34px}
  /* el pie: teléfono, correo y los dos enlaces legales. Eran anchos pero de
     23 px de alto; en celular es donde más se tocan. */
  .pie-cols .gr{display:block;min-height:42px;line-height:42px}
}
.pie-ficha{margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--linea);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;line-height:1.9;
  color:var(--tinta-3);max-width:74ch}
.pie-ficha a{color:var(--tinta-2)}
.pie-ficha a:hover{color:var(--terracota)}
/* En celular esta línea llevaba la descarga de la ficha técnica —la acción más
   importante de la plana— a 10.5 px de texto y 12 px de alto tocable. Se midió
   con el sitio ya publicado. Aquí crece y los dos enlaces pasan a ser bloques
   con área táctil de verdad. */
@media (max-width:700px){
  .pie-ficha{font-size:12.5px;line-height:1.6;letter-spacing:.02em}
  .pie-ficha a{display:inline-block;min-height:44px;line-height:44px;
    padding:0 2px;font-weight:600;color:var(--terracota)}
}

/* ---------- resumen de la industria ----------
   Va debajo de los productos, no encima: nadie deberia leer tres bloques antes
   de ver un envase. Rejilla de renglones finos, sin caja ni fondo, para que
   acompañe y no compita con las fotografias de arriba. */
.ficha-ind{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0;margin-top:30px;border-top:1px solid var(--linea-fuerte)}
.ficha-ind > div{padding:15px 20px 17px;border-left:1px solid var(--linea);
  border-bottom:1px solid var(--linea);min-width:0}
.ficha-ind > div:first-child{border-left:0;padding-left:0}
.ficha-ind .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:7px}
.ficha-ind .v{display:block;font-family:var(--txt);font-size:14.5px;line-height:1.45;
  color:var(--tinta);overflow-wrap:anywhere}
@media (max-width:620px){
  .ficha-ind > div{border-left:0;padding-left:0;padding-right:0}
}

/* ---------- el titulo responde donde SI se puede picar ----------
   En un titulo de seccion el resaltado al pasar el cursor mentiria: promete un
   clic que no existe, y en pantalla tactil no se ve nunca. En cambio la tarjeta
   de producto, la de familia y la de relacionados si son enlaces, y hasta ahora
   solo movian el borde: el nombre se quedaba quieto. Ahi va el color. */
.tarjeta .tx b,.grupos b,.rel .tx b{transition:color .15s}
.tarjeta:hover .tx b,.tarjeta:focus-visible .tx b,
.grupos a:hover b,.grupos a:focus-visible b,
.rel a:hover .tx b,.rel a:focus-visible .tx b{color:var(--terracota-txt)}
.tarjeta:hover,.grupos a:hover,.rel a:hover{border-color:var(--terracota-txt)}

/* ---------- colores del producto ----------
   Círculos, no muestras: el color del envase depende de la resina, del espesor
   y de la luz, y un cuadro plano en pantalla no lo reproduce. La bolita dice
   "existe en este color"; aprobar un tono necesita muestra física, y eso lo
   dice la nota de abajo en vez de dejarlo a que el cliente lo suponga. */
.colores{list-style:none;display:flex;flex-wrap:wrap;gap:14px 26px;margin:0 0 14px;padding:0}
.colores li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--tinta-2)}
.colores i{width:20px;height:20px;border-radius:50%;display:block;flex:none;
  box-shadow:inset 0 0 0 .5px rgba(22,22,21,.28)}
.nota-color{font-size:13px;line-height:1.55;color:var(--tinta-3);max-width:62ch;margin:0}
.nota-color b{color:var(--tinta-2)}

/* ---------- propósito: misión, visión y valores ----------
   Los valores llegaron como cinco palomas de colores. Aquí van con el mismo
   filete de color que usa el resto del sitio para marcar una lista de la casa:
   la paloma no agrega nada que la palabra no diga, y cinco seguidas se leen
   como lista de verificación en vez de como principios. */
.mv{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;margin:30px 0 28px;
  padding-top:26px;border-top:1px solid var(--linea)}
.mv .k{display:block;font-family:var(--sans);font-weight:900;font-size:20px;
  letter-spacing:-.01em;margin-bottom:10px;text-transform:none}
.mv p{margin:0;color:var(--tinta-2);line-height:1.6;max-width:46ch}
.vals{border-top:1px solid var(--linea);padding-top:22px}
.vals .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:16px}
.vals ul{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
  margin:0;padding:0}
.vals li{font-family:var(--sans);font-weight:900;font-size:16px;line-height:1.15;
  letter-spacing:-.01em}
.vals .bar{display:block;width:100%;height:4px;margin-bottom:11px}
@media (max-width:860px){
  .mv{grid-template-columns:1fr;gap:26px}
  .vals ul{grid-template-columns:repeat(2,1fr)}
}

/* La política de calidad va con filete: es cita textual de un documento
   controlado del sistema ISO 22000, no redacción nuestra. */
.politica{margin-top:26px;padding-left:18px;border-left:3px solid var(--azul);max-width:74ch}
.politica .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:9px}
.politica p{margin:0;color:var(--tinta-2);line-height:1.62;font-size:14.5px}

/* cuatro puntos de una idea, sin viñetas: cada uno es un renglón de la norma
   traducido a lo que significa en piso */
.cuatro{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:26px;
  padding-top:24px;border-top:1px solid var(--linea)}
.cuatro .k{display:block;font-family:var(--sans);font-weight:900;font-size:15px;
  letter-spacing:-.01em;margin-bottom:8px}
.cuatro p{margin:0;font-size:13.5px;line-height:1.55;color:var(--tinta-2)}
/* el segundo párrafo dice para qué le sirve al que compra, no qué es. Va con
   filete para que se lea como la consecuencia y no como más descripción. */
.cuatro .por{margin-top:9px;padding-top:9px;border-top:1px solid var(--linea);
  color:var(--tinta-3);font-size:12.5px}
@media (max-width:860px){.cuatro{grid-template-columns:repeat(2,1fr);gap:22px}}

/* La cabecera de familia abre con la MISMA foto que su divisor en el catálogo
   PDF, y el título va ENCIMA, como en el catálogo. Así la foto se ve completa
   en vez de quedar reducida a una franja, y quien vio el catálogo reconoce la
   sección al entrar al sitio.

   Tinta negra en las ocho: se midió el rincón donde cae el texto sobre cada
   foto y el contraste va de 11:1 a 16:1, muy por encima del mínimo. El velo
   claro de la izquierda no es para contraste sino para separar la letra del
   producto cuando alguno queda justo detrás. */
.cat-cab.con-foto{padding:0;margin-bottom:30px}
/* la caja envuelve foto + título: sin ella el rótulo absoluto se posiciona
   contra toda la cabecera y se encima con el párrafo de abajo */
.cat-cab .tapa-caja{position:relative;line-height:0}
.cat-cab .tapa{display:block;width:100%;height:clamp(240px,32vw,420px);
  object-fit:cover}
.cat-cab.con-foto .tapa-caja::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(248,247,238,.80) 0%,
    rgba(248,247,238,.46) 34%,rgba(248,247,238,0) 62%)}
.cat-cab .rotulo-fam{position:absolute;left:clamp(20px,4vw,52px);
  bottom:clamp(20px,3.4vw,44px);z-index:2;max-width:66%}
.cat-cab.con-foto .rotulo-fam .eyebrow{color:#6B6656}
.cat-cab.con-foto .rotulo-fam h1{margin:6px 0 0;color:var(--tinta)}
.cat-cab.con-foto .intro{margin-top:22px}
/* Portada de familia igual al divisor del catalogo: foto a sangre en su
   proporcion, sin degradado; numero + filete + nombre arriba, tinta medida. */
.cat-cab.portada-fam .tapa{height:auto;aspect-ratio:21/10}
.cat-cab.portada-fam .tapa-caja::after{display:none}
.cat-cab.portada-fam .rotulo-fam{bottom:auto;top:clamp(18px,3vw,40px);max-width:72%}
.cat-cab.portada-fam .rotulo-fam h1{margin:4px 0 0;color:inherit;
  text-shadow:0 1px 2px rgba(248,247,238,.3)}
.cat-cab.portada-fam .num{font-family:var(--mono);font-size:clamp(12px,1.3vw,15px);
  letter-spacing:.14em;font-weight:500;line-height:1}
.cat-cab.portada-fam .filete{display:block;width:42px;height:3px;border-radius:2px;margin:9px 0 11px}
/* EN CELULAR EL TITULO BAJA DE LA FOTO.
   A 390 px la banda se recorta mucho mas estrecha y los envases ocupan todo el
   cuadro, asi que el titulo caia encima del producto y el epigrafe se perdia.
   Se vio en la captura a 390, no en el escritorio. Debajo se lee siempre, y la
   fotografia se ve entera, que era el punto de ponerla. */
@media (max-width:700px){
  .cat-cab .tapa{height:190px}
  .cat-cab.portada-fam .tapa{height:auto;aspect-ratio:16/10}
  .cat-cab.con-foto .tapa-caja::after{display:none}
  .cat-cab .rotulo-fam{position:static;max-width:none;margin-top:18px}
  .cat-cab.con-foto .rotulo-fam h1{margin-top:4px}
  .cat-cab.con-foto .intro{margin-top:14px}
}

/* Los cinco centros de distribución. Números y plazas, sin adorno: es un dato
   de cobertura y se lee de un vistazo o no sirve. */
/* Seis columnas, no cinco: al entrar Torreon como sexto centro la reja de
   cinco dejaba a Ciudad de Mexico sola en un segundo renglon, con cuatro
   huecos al lado. Con seis caben todos en una linea. */
/* El mapa de presencia. El SVG sale de mapa_cedis.py con el contorno real de
   Mexico y las plazas en sus coordenadas verdaderas, asi que las distancias
   entre centros son ciertas y no decorativas. Va inline y no como <img> para
   que herede la tipografia de la pagina en los rotulos. */
/* Dentro del desplegable el mapa no lleva el margen de arriba: ya lo separa
   el propio renglon del resumen. */
/* La unidad propia, en la seccion de cobertura. Va como banda ancha y baja
   —proporcion de camion, no de retrato— para que se lea como prueba y no
   compita con el mapa que viene despues.
   OJO con el nombre: .flota ya existe y son los botones flotantes, que llevan
   position:fixed. Esta figura se llamo asi al principio y se iba a la esquina
   de la pantalla en vez de quedarse en su seccion. */
/* La fotografia que acompaña a "Quienes somos". Se alinea con la primera
   linea del parrafo, no con el alto del bloque: si crece con el, el texto
   queda flotando en medio de una columna vacia. */
.retrato{margin:0;overflow:hidden}
.retrato img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
@media (max-width:860px){.retrato{margin-top:8px}}
.unidad{margin:26px 0 0;overflow:hidden}
.unidad video{width:100%;height:auto;aspect-ratio:1600/612;display:block;object-fit:cover}
.unidad figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3);margin-top:10px}
.mapa-pais{margin:30px 0 0}
.masinfo .mapa-pais{margin:4px 0 26px}
/* La linea de tiempo dentro del desplegable: el primer hito no repite el
   filete de arriba, que ya lo pone el renglon del resumen. */
.masinfo .linea{padding-bottom:8px}
.masinfo .linea .hito:first-child{border-top:0;padding-top:6px}
.masinfo .mapa-pais figcaption{max-width:64ch;line-height:1.6}
.mapa-pais svg{width:100%;height:auto;display:block}
.mapa-pais figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3);margin-top:10px}
.cedis{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  margin:26px 0 0;padding:0;background:var(--linea);border:1px solid var(--linea)}
.cedis li{background:var(--sup);padding:20px 18px}
.cedis b{display:block;font-family:var(--sans);font-weight:900;font-size:19px;
  letter-spacing:-.015em;line-height:1.1}
.cedis span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3);margin-top:7px}
@media (max-width:900px){.cedis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.cedis{grid-template-columns:1fr}}

/* ---------- calculadora: cantidades de un toque ----------
   El campo era <input type="number" step="1000">: escribir 50 000 ahí obligaba
   a teclear todo de nuevo cada vez. Ahora hay cuatro cantidades de un clic, que
   es como se pide de verdad, y el campo formatea con separador de millar. */
.calc .campo{position:relative}
.calc .rapidos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.calc .rapidos button{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 14px;min-height:38px;border:1px solid var(--linea);background:var(--sup);
  color:var(--tinta-2);cursor:pointer;transition:border-color .15s,color .15s}
.calc .rapidos button:hover{border-color:var(--tinta-3);color:var(--tinta)}
.calc .rapidos button.on{border-color:var(--terracota);color:var(--terracota);
  box-shadow:inset 0 0 0 1px var(--terracota)}

/* ---------- ISO en breve ----------
   El bloque largo que explicaba la norma se redujo a esta franja, junto al
   sello. El cliente pidió menos texto en calidad; se conservó la única frase
   que le sirve a quien compra, que es la de la auditoría. */
.iso-breve{display:flex;gap:30px;align-items:center;padding:26px 0;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.iso-breve img{width:104px;height:auto;flex:none}
.iso-breve .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:9px}
.iso-breve p{margin:0;font-size:15.5px;line-height:1.6;color:var(--tinta-2);max-width:62ch}
.iso-breve b{color:var(--tinta)}
@media (max-width:640px){
  .iso-breve{flex-direction:column;align-items:flex-start;gap:18px}
  .iso-breve img{width:84px}
}

/* ---------- historia: diez momentos con desplegable ----------
   El cliente pidio historia breve. Lo que se lee de corrido son diez
   renglones; la maquinaria y las fechas exactas viven dentro del detalle,
   y solo aparecen si el visitante las pide. */
.hitos{border-top:1px solid var(--linea);display:block;width:100%}
/* display y width explicitos en los tres: sin ellos el <details> se encoge a
   su contenido dentro de la hoja del sitio y la reticula colapsa a 300 px. */
.hito{border-bottom:1px solid var(--linea);display:block;width:100%}
.hito>summary{list-style:none;cursor:pointer;display:block;width:100%;
  padding:17px 34px 17px 0;position:relative}
.hito>summary::-webkit-details-marker{display:none}
.hito>summary::marker{content:''}
.hito .h-fila{display:grid;grid-template-columns:118px 1fr 1.35fr;gap:22px;
  align-items:baseline}
.hito>summary::after{content:'';position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--tinta-3);border-bottom:2px solid var(--tinta-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.hito[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.hito .h-anio{font-weight:700;font-size:15px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--tinta)}
.hito .h-tit{font-weight:600;font-size:15px;color:var(--tinta)}
.hito .h-res{font-size:14.5px;color:var(--tinta-2)}
.hito>p{margin:0;padding:0 34px 22px 140px;font-size:14.5px;line-height:1.62;
  color:var(--tinta-2);max-width:78ch}
.hito:hover>summary .h-tit{color:var(--terracota-txt)}
@media (max-width:760px){
  .hito .h-fila{grid-template-columns:82px 1fr;row-gap:5px}
  .hito>summary{padding-right:30px}
  .hito .h-res{grid-column:1/-1}
  .hito>p{padding-left:0}
}


/* ===================================================== pantallas chicas ===
   Auditoria del 28 de septiembre de 2026, medida con Chrome emulando siete
   aparatos, de iPhone SE a iPad horizontal, sobre once paginas. No habia
   desbordamiento horizontal, pero si tres cosas que se sienten al usar el
   sitio con el pulgar:

   1. La tabla de medidas mide 420 px y la pantalla del telefono 390. Vivia
      en una caja con desplazamiento lateral, asi que se podia deslizar, pero
      nada lo avisaba y la columna de tolerancia quedaba cortada de entrada.
      Aqui la tabla deja de ser tabla: cada renglon es una linea con el
      nombre a la izquierda y la medida a la derecha.
   2. Las areas para el dedo se quedaban entre 26 y 32 px. El minimo de Apple
      es 44 y el de Google 48.
   3. Las etiquetas en monoespaciada bajaban hasta 9 px. */

/* el boton de reproducir, para el video que ya no arranca solo */
.con-play{position:relative}
.con-play::after{content:'';position:absolute;right:18px;bottom:18px;width:54px;height:54px;
  border-radius:50%;background:rgba(15,15,14,.62);z-index:6;pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F2F0E4'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:54% 50%;background-size:22px}

@media (max-width:620px){
  /* 1 · la tabla de medidas se lee como lista */
  .tabla-caja{overflow-x:visible}
  .tabla-caja table{min-width:0;display:block;width:100%}
  .tabla-caja thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla-caja tbody{display:block}
  .tabla-caja tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;
    padding:12px 14px;border-bottom:1px solid var(--linea)}
  .tabla-caja tr:last-child{border-bottom:0}
  .tabla-caja td{display:block;border:0;padding:0;font-size:15px}
  .tabla-caja td:first-child{flex:1 1 55%}
  .tabla-caja td.num{flex:0 0 auto;margin-left:auto;text-align:right;white-space:nowrap}

  /* 2 · area para el dedo de 44 px */
  .nav .env{gap:14px}
  .nav .links a{min-height:44px;display:flex;align-items:center}
  .idioma a{min-height:44px;display:flex;align-items:center;padding:0 13px}
  .busca-nav button{min-width:44px;min-height:44px}
  .pie a,.pie-bajo a,.legal a{min-height:44px;display:inline-flex;align-items:center}
  .flota a{min-width:48px;min-height:48px}

  /* 3 · nada de letra por debajo de 12 px */
  .nav .links a,.idioma a,.idioma .pronto,.migas,.eyebrow,.chip,.btn,.nota,
  .cedis span,.grupos span,.ind .tx .esp,.form label,.calc label,.b-fila label,
  .b-lista span,.can-tot span,.capac span,.datos-h span,.ficha-ind .k,.fila-f > b,
  .clave .k,.ap-cab .k,.mapa-pais figcaption,.nota-tabla,.iso-breve .k,.flota a,
  .aviso a,.legal .fecha,.buscador .pie-b,.b-res .cta,.corp .dur,th{font-size:12px}
  .btn{padding-top:13px;padding-bottom:13px}
}

/* el area para el dedo tambien vale en tableta: la barra, el buscador, el
   cambio de idioma y los enlaces del pie se quedaban entre 23 y 32 px */
@media (max-width:1024px){
  .nav .wm{min-height:44px;display:inline-flex;flex-direction:column;justify-content:center}
  .nav .links a,.idioma a{min-height:44px;display:inline-flex;align-items:center}
  .idioma a{padding:0 13px}
  .busca-nav button{min-width:44px;min-height:44px}
  .busca-nav input{height:44px}
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .migas a{min-height:40px;display:inline-flex;align-items:center}
  .pc a.gr,.pie a,.pie-bajo a{min-height:40px;display:inline-flex;align-items:center}
  .datos-h .v a,.rapidos button{min-height:44px;display:inline-flex;align-items:center}
  .rapidos button{justify-content:center}
}

/* y el resto de las etiquetas que se quedaban por debajo de 12 px en el
   telefono. Los numeros de seccion y las cotas del plano se dejan como
   estan: son elementos graficos, no texto de lectura */
@media (max-width:620px){
  figcaption,.tarjeta .tx .esp,.tarjeta .tx .esp i,summary,p.mono,.rapidos button,
  .masinfo summary,.ficha-pie,.leyenda{font-size:12px}
}

/* en tableta el mismo piso de 12 px para lo que de verdad se lee */
@media (max-width:1024px){
  .migas,.eyebrow,.nota,.cedis span,figcaption,.form label,.chip,.grupos span,
  .ind .tx .esp,.mapa-pais figcaption,.nav .links a,.idioma a{font-size:12px}
}

/* La barra superior pedia 399 px de ancho minimo: el logotipo, el buscador y
   el cambio de idioma no cabian juntos en un telefono de 320 o 390, asi que
   el navegador achicaba toda la pagina. En telefono el selector de idioma se
   guarda —hoy solo anuncia que el ingles viene en camino— y el buscador se
   estrecha. Medido el 28 de septiembre de 2026. */
@media (max-width:620px){
  .nav .env{gap:10px}
  .nav .idioma{display:none}
  /* el buscador cede espacio en lugar de empujar la barra: con el boton a 44
     px y el campo fijo en 104, la barra pedia 397 px y en un iPhone de 390 se
     salia por 7 px */
  .busca-nav{flex:0 1 auto;min-width:0}
  .busca-nav input{flex:1 1 60px;width:auto;min-width:0}
  .busca-nav input:focus{width:auto}
}
@media (max-width:360px){
  .busca-nav{display:none}
}