/* ============================================================
   ANKLE STEEL MÉXICO · fichas de producto y preguntas frecuentes
   (26-sep-2026). Se carga después de site.css y antes de movil.css.
   ============================================================ */

/* ---------- migas ---------- */
.migas{padding-top:22px;font-size:13px;color:var(--gris);}
.migas a{color:var(--verde-osc);font-weight:600;}
.migas a:hover{text-decoration:underline;}
.migas .sep{margin:0 6px;color:var(--gris-cl);}

/* ---------- cabecera de la ficha ---------- */
.prod-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:26px;padding-bottom:44px;}
.prod-hero.solo-texto{grid-template-columns:1fr;}
.prod-hero.solo-texto .entrada{max-width:78ch;}
.prod-hero h1{font-size:clamp(30px,4.2vw,46px);margin-top:10px;}
.prod-hero.azul .eyebrow{color:var(--azul);}
.prod-hero.rojo .eyebrow{color:var(--rojo);}
.prod-hero figure img{border-radius:10px;box-shadow:var(--sombra-alta);width:100%;}
.prod-hero .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.cot-linea{margin-top:18px;font-size:15px;color:#3F4347;line-height:1.6;max-width:66ch;
  border-left:3px solid var(--verde);padding:4px 0 4px 14px;background:var(--verde-cl);}
.cot-linea a{color:var(--verde-osc);font-weight:700;}

/* ---------- bloques ---------- */
.prod .bloque{padding-top:34px;padding-bottom:10px;}
.prod .bloque h2,.familia-bloque h2{font-size:clamp(22px,2.6vw,28px);margin-top:0;}
.prod .dos{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.lista-sub{margin-top:16px;list-style:none;display:grid;gap:8px;}
.lista-sub li{position:relative;padding-left:20px;font-size:15.5px;color:#3F4347;}
.lista-sub li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--verde);}
.normas{margin-top:16px;list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.normas li{font-size:13px;font-weight:600;border:1px solid var(--linea);border-radius:999px;padding:6px 12px;background:#fff;}
.normas.azul li{border-color:#C9D6E3;color:var(--azul-osc);}
.normas.rojo li{border-color:#EACBC7;color:#8E2A20;}
.nota-cert{margin-top:14px;font-size:14px;color:var(--gris);}
.nota-cert a{color:var(--verde-osc);font-weight:700;}

.tabla-env{margin-top:16px;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;}
.espec{width:100%;border-collapse:collapse;font-size:14.5px;}
.espec th{width:30%;text-align:left;vertical-align:top;background:var(--fondo-alt);font-size:12px;
  letter-spacing:1.2px;text-transform:uppercase;color:#4A4E52;padding:12px 16px;border-bottom:1px solid var(--linea);}
.espec td{padding:12px 16px;border-bottom:1px solid var(--linea);color:#2B2E31;}
.espec tr:last-child th,.espec tr:last-child td{border-bottom:0;}

.marcas{margin-top:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.marca-f{border:1px solid var(--linea);border-radius:var(--radio);padding:16px 18px;background:#fff;}
.marca-f b{font-size:16px;}
.marca-f p{margin-top:6px;font-size:14px;color:#5B6064;line-height:1.55;}

.proy-lista{margin-top:16px;list-style:none;display:grid;gap:10px;}
.proy-lista li{display:grid;grid-template-columns:86px 1fr;gap:14px;border:1px solid var(--linea);
  border-radius:var(--radio);padding:14px 16px;background:#fff;font-size:14.5px;}
.proy-lista .p-anio{font-size:12px;font-weight:700;letter-spacing:1.2px;color:var(--verde);padding-top:2px;}
.proy-lista p{margin-top:4px;font-size:13.5px;color:#5B6064;line-height:1.5;}

.otras{margin-top:14px;list-style:none;display:flex;flex-wrap:wrap;gap:10px;}
.otras a{display:inline-block;font-size:14px;font-weight:600;border:1px solid var(--linea);border-radius:var(--radio);
  padding:9px 14px;background:#fff;}
.otras a:hover{border-color:var(--verde);color:var(--verde-osc);}

/* ---------- caja «Cómo cotizar» ---------- */
.cotizar{padding:40px 0 70px;}
.cotizar-caja{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;background:var(--grafito);color:#fff;
  border-radius:10px;padding:34px 36px;}
.cotizar-caja .eyebrow{color:#5FD695;}
.cotizar-caja h2{font-size:clamp(22px,2.6vw,28px);color:#fff;margin-top:8px;}
.cotizar-caja h3{font-size:16px;color:#fff;}
.pasos-cot{margin-top:18px;padding-left:20px;display:grid;gap:12px;font-size:15px;color:#C9CDD1;line-height:1.55;}
.pasos-cot b{color:#fff;}
.pasos-cot a,.compromiso b{color:#7FD8A6;}
.compromiso{margin-top:18px;font-size:14.5px;color:#C9CDD1;border-left:3px solid rgba(127,216,166,.6);padding-left:14px;line-height:1.6;}
.cot-datos ul{margin-top:12px;padding-left:18px;display:grid;gap:7px;font-size:14.5px;color:#C9CDD1;line-height:1.5;}
.cot-botones{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.cotizar-caja .btn-linea{color:#fff;border-color:rgba(255,255,255,.35);}
.cotizar-caja .btn-linea:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.cot-nota{margin-top:14px;font-size:12.5px;color:#9AA0A5;line-height:1.5;}

/* ---------- índice de productos ---------- */
.indice-fam{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:8px;}
.indice-fam a{font-size:13.5px;font-weight:600;border:1px solid var(--linea);border-radius:999px;padding:7px 14px;background:#fff;}
.indice-fam a:hover{border-color:var(--verde);color:var(--verde-osc);}
.familia-bloque{padding-top:44px;scroll-margin-top:calc(var(--header) + 12px);}
.familia-bloque .eyebrow.azul{color:var(--azul);}
.familia-bloque .eyebrow.rojo{color:var(--rojo);}
.rejilla-l{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px;}
.tarjeta-l{position:relative;display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;background:#fff;transition:box-shadow .15s ease, transform .15s ease;min-width:0;}
.tarjeta-l:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px);}
.tarjeta-l img{aspect-ratio:550/386;object-fit:cover;background:#F0F2F3;}
.tarjeta-l .chip{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;letter-spacing:1px;color:#fff;
  background:var(--verde);border-radius:4px;padding:3px 7px;}
.tarjeta-l .chip.azul{background:var(--azul);}
.tarjeta-l .chip.rojo{background:var(--rojo);}
.tarjeta-l b{display:block;padding:16px 18px 0;font-size:17px;line-height:1.3;}
.tarjeta-l .d{display:block;padding:8px 18px 0;font-size:13.5px;color:#5B6064;line-height:1.5;flex:1;}
.tarjeta-l .n{display:block;padding:14px 18px 16px;font-size:13px;font-weight:700;color:var(--verde-osc);}
.tarjeta-l.azul .n{color:var(--azul);}
.rejilla-l.una{grid-template-columns:1fr;max-width:860px;}
.rejilla-l.una .tarjeta-l{display:grid;grid-template-columns:300px 1fr;grid-template-rows:auto 1fr auto;}
.rejilla-l.una .tarjeta-l img{grid-row:1 / 4;height:100%;}
.rejilla-l.una .tarjeta-l b{padding-top:20px;}
.tarjeta-l.rojo .n{color:var(--rojo);}

/* ---------- portada: enlace a fichas y preguntas frecuentes ---------- */
.ver-fichas{margin-top:26px;font-size:15px;color:var(--gris);}
.ver-fichas a{color:var(--verde-osc);font-weight:700;}
.faq-sec{border-top:1px solid var(--linea);}
.faq{margin-top:30px;display:grid;gap:12px;max-width:900px;}
.faq details{border:1px solid var(--linea);border-radius:var(--radio);background:#fff;padding:0 20px;}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:16.5px;padding:18px 28px 18px 0;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:22px;font-weight:400;color:var(--verde);}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 0 18px;font-size:15px;color:#4A4E52;line-height:1.65;}
.faq a{color:var(--verde-osc);font-weight:700;}

/* ---------- catálogo: enlace a las fichas ---------- */
.cat-fichas{margin-top:14px;font-size:14.5px;color:var(--gris);}
.cat-fichas a{color:var(--verde-osc);font-weight:700;}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .prod-hero{grid-template-columns:1fr;gap:28px;}
  .prod-hero figure{order:-1;max-width:560px;}
  .rejilla-l{grid-template-columns:repeat(2,1fr);}
  .cotizar-caja{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:640px){
  .prod .dos,.marcas,.rejilla-l{grid-template-columns:1fr;}
  .rejilla-l.una .tarjeta-l{display:flex;}
  .prod .dos{gap:30px;}
  .prod-hero>*,.prod .dos>*,.cotizar-caja>*{min-width:0;}
  .prod-hero .acciones .btn,.cot-botones .btn{width:100%;}
  .espec th{width:38%;padding:10px 12px;font-size:11px;letter-spacing:.8px;}
  .espec td{padding:10px 12px;font-size:14px;}
  .proy-lista li{grid-template-columns:1fr;gap:4px;}
  .cotizar-caja{padding:24px 18px;}
  .faq details{padding:0 16px;}
  .faq summary{font-size:15.5px;}
}