/*
Theme Name: Maff Health
Theme URI: https://maffhealth.com
Author: LogiBrand SAS
Description: Tema propio de Maff Health. Sistema de diseño "Arco 360": Montserrat + Roboto, navy del catálogo y espectro de color del isotipo. Incluye plantillas por línea de producto (Ossyn, Fixapro, Alveos, Airpro).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Propietaria
Text Domain: maffhealth
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --papel:#FFFFFF; --nube:#F2F7FC; --borde:#DCE6F0;
  --tinta:#14264F; --tinta-70:#4A5C7E; --tinta-45:#8A98AE;
  --violeta:#5A2378; --violeta-claro:#9A63BA; --violeta-tenue:#EBDDF3;
  --azul:#1183C4; --verde:#3FB294; --naranja:#E8871F;
  --activo:var(--violeta);
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem;
  --t-lg:1.375rem; --t-xl:1.75rem; --t-2xl:2.25rem; --t-3xl:clamp(2rem,4vw,3.15rem);
  --marco:clamp(1.25rem,4vw,4.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

body{margin:0;background:var(--papel);color:var(--tinta);
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--t-base);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Montserrat",sans-serif;font-weight:700;line-height:1.14;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0 0 1em;max-width:64ch}
a{color:inherit}
strong{font-weight:500}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}

.env{max-width:1300px;margin-inline:auto;padding-inline:var(--marco)}
.env--angosto{max-width:940px}
.seccion{padding-block:clamp(3.25rem,6.5vw,5.75rem);position:relative;scroll-margin-top:140px}
.heroe-linea,.banda{scroll-margin-top:140px}
.seccion--corta{padding-block:clamp(2.5rem,5vw,4rem)}
.seccion--tinta{background:var(--tinta);color:#fff}
.seccion--nube{background:var(--nube)}
.encabezado-seccion{display:grid;gap:.75rem;margin-bottom:clamp(1.75rem,3.5vw,2.9rem);
  border-top:3px solid var(--activo);padding-top:1.05rem}
.encabezado-seccion h2{font-size:var(--t-2xl)}
.encabezado-seccion p{color:var(--tinta-70);font-size:var(--t-md);margin:0;max-width:70ch}
.seccion--tinta .encabezado-seccion p{color:#AEBDD4}
.logo-linea{height:40px;width:auto;display:block;margin-bottom:.3rem}
.seccion--tinta .logo-linea{filter:brightness(0) invert(1)}
.nota{font-size:var(--t-xs);color:var(--tinta-70);max-width:78ch;line-height:1.6}
.seccion--tinta .nota{color:#8FA2BE}
.saltar{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;padding:.75rem 1.25rem;z-index:200}
.saltar:focus{left:0}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   2. BARRA
   ============================================================ */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--borde)}
.nav__fila{display:flex;align-items:center;gap:1.6rem;min-height:74px}
.marca{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.marca img{height:32px;width:auto;display:block}
.nav__menu{display:flex;gap:1.4rem;margin-left:auto;list-style:none;padding:0;margin-block:0;
  font-family:"Montserrat",sans-serif;font-size:var(--t-sm);font-weight:600}
.nav__menu a{text-decoration:none;padding-block:.4rem;border-bottom:2px solid transparent;transition:border-color .18s;display:block}
.nav__menu a:hover,.nav__menu a:focus-visible,.nav__menu .current-menu-item>a{border-bottom-color:var(--activo)}
.nav__cta-corto{display:none}
.nav__hamburguesa{display:none;background:none;border:1px solid var(--borde);border-radius:3px;
  width:42px;height:42px;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__hamburguesa span{display:block;width:18px;height:2px;background:var(--tinta);transition:transform .22s,opacity .22s}
.nav__hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   3. BOTONES
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.82rem 1.5rem;
  font-family:"Montserrat",sans-serif;font-size:var(--t-sm);font-weight:600;
  text-decoration:none;border:2px solid var(--tinta);background:var(--tinta);color:#fff;
  cursor:pointer;border-radius:3px;transition:background .18s,border-color .18s,color .18s}
.btn:hover,.btn:focus-visible{background:var(--activo);border-color:var(--activo);color:#fff}
.btn--linea{background:transparent;color:var(--tinta)}
.btn--linea:hover,.btn--linea:focus-visible{background:var(--tinta);color:#fff}
.btn--claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--claro:hover,.btn--claro:focus-visible{background:#fff;color:var(--tinta);border-color:#fff}
.btn[disabled]{opacity:.6;cursor:progress}

/* ============================================================
   4. HÉROE HOME + ARCO
   ============================================================ */
.heroe{padding-top:clamp(2.5rem,4.5vw,4rem);padding-bottom:clamp(2.75rem,5vw,4.25rem);overflow:hidden}
.heroe__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.heroe h1{font-size:var(--t-3xl);max-width:16ch;margin-bottom:1.25rem}
.heroe__entrada{font-size:var(--t-md);color:var(--tinta-70);max-width:52ch;margin-bottom:1.9rem}
.heroe__acciones{display:flex;flex-wrap:wrap;gap:.8rem}
.arco{position:relative;width:100%;max-width:430px;margin-inline:auto;aspect-ratio:1}
.arco svg{width:100%;height:100%;overflow:visible;display:block}
.arco__pista{fill:none;stroke:var(--borde);stroke-width:1.5}
.arco__seg{fill:none;stroke-width:17;stroke-linecap:butt;cursor:pointer;transition:stroke-width .25s cubic-bezier(.4,0,.2,1),opacity .25s}
.arco[data-listo="si"] .arco__seg{opacity:.35}
.arco[data-listo="si"] .arco__seg.es-activo{opacity:1;stroke-width:26}
.arco__etq{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:.2rem .4rem;
  font-family:"Montserrat",sans-serif;font-size:var(--t-sm);font-weight:700;
  color:var(--tinta-45);cursor:pointer;white-space:nowrap;opacity:0;transition:color .25s;text-decoration:none}
.arco[data-listo="si"] .arco__etq{opacity:1;transition:color .25s,opacity .5s ease .1s}
.arco__etq.es-activo{color:var(--tinta)}
.arco__centro{position:absolute;inset:17%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.4rem}
.arco__iso{width:34px;opacity:.9}
.arco__logo{height:34px;width:auto;object-fit:contain}
.arco__pie{font-size:var(--t-sm);color:var(--tinta-70);line-height:1.35;max-width:21ch}
.arco__enlace{font-family:"Montserrat",sans-serif;font-size:var(--t-sm);font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}

/* ============================================================
   5. HÉROE DE LÍNEA
   ============================================================ */
.heroe-linea{background:var(--tinta);color:#fff;overflow:hidden}
.heroe-linea__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(2.75rem,5vw,4.5rem)}
.heroe-linea__logo{height:54px;width:auto;margin-bottom:1.2rem;filter:brightness(0) invert(1)}
.heroe-linea h1{font-size:var(--t-3xl);max-width:17ch;margin-bottom:1.1rem}
.heroe-linea p{color:#AEBDD4;font-size:var(--t-md);max-width:52ch}
.heroe-linea__claim{font-family:"Montserrat",sans-serif;font-weight:600;color:#5FCBB0!important;margin-bottom:.9rem;font-size:var(--t-md)}
.heroe-linea__acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.heroe-linea__foto{border:1px solid rgba(255,255,255,.2);background:#fff;padding:1.5rem;display:flex;align-items:center;justify-content:center}
.heroe-linea__foto img{max-height:330px;width:auto;display:block}
.migas{font-size:var(--t-xs);color:#8FA2BE;padding-top:1.25rem}
.migas a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}

/* índice lateral de la página de línea */
.indice{border-block:1px solid var(--borde);background:var(--nube);position:sticky;top:74px;z-index:60}
.indice ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:.85rem 0;overflow-x:auto;
  font-family:"Montserrat",sans-serif;font-size:var(--t-sm);font-weight:600;scrollbar-width:thin}
.indice a{text-decoration:none;white-space:nowrap;padding-block:.25rem;border-bottom:2px solid transparent;transition:border-color .18s,color .18s;color:var(--tinta-70)}
.indice a:hover,.indice a.es-activo{border-bottom-color:var(--violeta);color:var(--tinta)}

/* ============================================================
   6. FRANJA DE CONFIANZA
   ============================================================ */
.franja{border-block:1px solid var(--borde);padding-block:1.7rem;background:var(--nube)}
.franja__lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:1.4rem 2.25rem;list-style:none;margin:0;padding:0}
.franja__lista li{display:grid;gap:.2rem}
.franja__dato{font-family:"Montserrat",sans-serif;font-size:var(--t-sm);font-weight:700}
.franja__glosa{font-size:var(--t-xs);color:var(--tinta-70);line-height:1.45}

/* ============================================================
   7. MAPA ANATÓMICO INTERACTIVO
   ============================================================ */
.mapa-columna{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.espina{position:relative;width:100%;max-width:230px;margin-inline:auto}
.espina>img{width:100%;display:block;filter:saturate(.92)}
.hot{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);
  border-radius:50%;border:2px solid var(--violeta);background:rgba(255,255,255,.94);
  cursor:pointer;padding:0;font-family:"Montserrat",sans-serif;font-size:var(--t-xs);font-weight:700;
  color:var(--violeta);transition:transform .2s,background .2s,color .2s;z-index:3}
.hot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--violeta);opacity:0;animation:latido 2.8s ease-out infinite}
.hot:nth-of-type(2)::after{animation-delay:.7s}
.hot:nth-of-type(3)::after{animation-delay:1.4s}
.hot:nth-of-type(4)::after{animation-delay:2.1s}
@keyframes latido{0%{transform:scale(.72);opacity:.55}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.hot:hover,.hot:focus-visible,.hot.es-activo{background:var(--violeta);color:#fff;transform:translate(-50%,-50%) scale(1.18)}
.hot.es-activo::after{animation:none;opacity:0}
.espina__guia{position:absolute;height:1px;background:var(--violeta);opacity:.35;z-index:2;transition:top .3s ease,left .3s ease}

.pop-col{display:grid;gap:1px;align-content:start}
.pop{border:1px solid var(--borde);border-left:4px solid var(--violeta);background:#fff;
  padding:1.4rem 1.5rem 1.5rem;display:grid;gap:.55rem;box-shadow:0 10px 28px -18px rgba(20,38,79,.5)}
.pop[data-anim="si"]{animation:aparece .3s cubic-bezier(.2,.7,.3,1)}
.pop__cabeza{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.pop__logo{height:30px;width:auto}
.pop__seg{font-family:"Montserrat",sans-serif;font-size:var(--t-xs);font-weight:700;color:#fff;background:var(--violeta);padding:.2rem .6rem;border-radius:2px}
.pop__cuerpo{display:grid;grid-template-columns:132px minmax(0,1fr);gap:1.1rem;align-items:center}
.pop__foto{background:var(--nube);border:1px solid var(--borde);padding:.35rem}
.pop__foto img{width:100%;display:block;aspect-ratio:4/3;object-fit:contain}
.pop__tit{font-family:"Montserrat",sans-serif;font-weight:700;font-size:var(--t-md);margin-bottom:.2rem}
.pop__txt{font-size:var(--t-sm);color:var(--tinta-70);margin:0}
.pop__pie{font-size:var(--t-sm);margin:0;display:flex;gap:1.1rem;flex-wrap:wrap}
.pop__pie a{font-family:"Montserrat",sans-serif;font-weight:600;font-size:var(--t-sm);text-decoration:none;border-bottom:2px solid var(--violeta);padding-bottom:1px}
.fichas-chip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--borde);border:1px solid var(--borde);border-top:0}
.chip{background:#fff;border:0;padding:1rem .85rem;cursor:pointer;display:grid;gap:.45rem;justify-items:start;font:inherit;text-align:left;transition:background .2s}
.chip:hover,.chip:focus-visible{background:var(--nube)}
.chip[aria-pressed="true"]{background:var(--nube);box-shadow:inset 0 3px 0 var(--violeta)}
.chip img{height:21px;width:auto}
.chip span{font-size:var(--t-xs);color:var(--tinta-70);line-height:1.35}

/* ============================================================
   8. ANATOMÍA DEL TORNILLO (sobre fotografía real)
   ============================================================ */
.tornillo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.tornillo__tabs{display:flex;gap:1px;background:var(--borde);border:1px solid var(--borde);border-bottom:0;margin-bottom:0}
.tornillo__tab{background:#fff;border:0;padding:.85rem 1.1rem;cursor:pointer;display:grid;gap:.2rem;
  justify-items:start;font:inherit;text-align:left;transition:background .2s;flex:1}
.tornillo__tab img{height:20px;width:auto}
.tornillo__tab span{font-size:var(--t-xs);color:var(--tinta-70);line-height:1.3}
.tornillo__tab:hover{background:var(--nube)}
.tornillo__tab[aria-selected="true"]{background:var(--nube);box-shadow:inset 0 3px 0 var(--violeta)}
.tornillo__lienzo{background:var(--nube);border:1px solid var(--borde);
  padding:clamp(1.75rem,4vw,3rem) clamp(1rem,3vw,2rem)}
.tornillo__marco{position:relative;display:block}
.tornillo__marco[hidden]{display:none}
.tornillo__foto{width:100%;height:auto;display:block;
  filter:drop-shadow(0 8px 18px rgba(20,38,79,.18))}
.tornillo__detalle{border:1px solid var(--borde);border-left:4px solid var(--violeta);background:#fff;
  padding:1.4rem 1.5rem;min-height:190px}
.tornillo__detalle[data-anim="si"]{animation:aparece .3s ease}
.tornillo__detalle h3{font-size:var(--t-md);margin-bottom:.45rem}
.tornillo__detalle p{font-size:var(--t-sm);color:var(--tinta-70);margin:0}
.tornillo__dato{font-family:"Montserrat",sans-serif;font-size:var(--t-xs);font-weight:700;color:var(--violeta);display:block;margin-bottom:.3rem}
.tornillo__pistas{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.tornillo__pistas[hidden]{display:none}
.tornillo__pistas button{font-family:"Montserrat",sans-serif;font-size:var(--t-xs);font-weight:600;
  border:1px solid var(--borde);background:#fff;color:var(--tinta-70);padding:.4rem .7rem;border-radius:20px;cursor:pointer;transition:all .18s}
.tornillo__pistas button[aria-pressed="true"]{background:var(--violeta);border-color:var(--violeta);color:#fff}

/* ============================================================
   8b. CATÁLOGO CERRADO
   ============================================================ */
.catalogo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,3rem);
  border:1px solid var(--borde);background:#fff}
.catalogo__resumen{padding:clamp(1.5rem,3vw,2.25rem)}
.catalogo__cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-bottom:1.5rem}
.catalogo__cifra{font-family:"Montserrat",sans-serif;font-weight:800;font-size:1.6rem;line-height:1;color:var(--violeta);display:block}
.catalogo__etq{font-size:var(--t-xs);color:var(--tinta-70);line-height:1.4;display:block;margin-top:.3rem}
.catalogo__lista{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.5rem;font-size:var(--t-sm);color:var(--tinta-70)}
.catalogo__lista li{padding-left:1.1rem;position:relative}
.catalogo__lista li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--violeta);border-radius:50%}
.catalogo__muestra{background:var(--nube);border-left:1px solid var(--borde);padding:clamp(1.5rem,3vw,2.25rem);position:relative;overflow:hidden}
.catalogo__muestra table{width:100%;border-collapse:collapse;font-size:var(--t-xs)}
.catalogo__muestra th,.catalogo__muestra td{padding:.42rem .5rem;text-align:left;border-bottom:1px solid var(--borde)}
.catalogo__muestra thead th{font-family:"Montserrat",sans-serif;font-weight:700;border-bottom:2px solid var(--tinta-45)}
.catalogo__velo{position:absolute;left:0;right:0;bottom:0;height:58%;
  background:linear-gradient(to bottom,rgba(242,247,252,0),var(--nube) 72%);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(1.25rem,3vw,2rem)}

/* ============================================================
   9. COMPARADOR DE SISTEMAS
   ============================================================ */
.comparador{overflow-x:auto;border:1px solid var(--borde)}
.comparador table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:760px;background:#fff}
.comparador th,.comparador td{padding:.9rem 1rem;border-bottom:1px solid var(--borde);vertical-align:top;text-align:left}
.comparador thead th{background:var(--nube);border-bottom:2px solid var(--tinta);position:sticky;top:0}
.comparador thead img{height:24px;width:auto;display:block;margin-bottom:.35rem}
.comparador tbody th{font-family:"Montserrat",sans-serif;font-size:var(--t-xs);font-weight:700;
  color:var(--tinta-70);width:170px;background:var(--nube)}
.comparador td{color:var(--tinta-70)}
.comparador td strong{color:var(--tinta)}

/* ============================================================
   10. PASOS
   ============================================================ */
.pasos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.pasos__lista{list-style:none;margin:0;padding:0;display:grid}
.pasos__btn{width:100%;text-align:left;background:none;border:0;padding:.85rem .25rem .85rem 0;
  font:inherit;font-size:var(--t-md);color:var(--tinta);cursor:pointer;display:flex;align-items:center;gap:.9rem;
  transition:padding-left .2s;border-top:1px solid var(--borde)}
.pasos__lista li:first-child .pasos__btn{border-top:0}
.pasos__btn:hover{padding-left:.5rem}
.pasos__n{width:29px;height:29px;flex-shrink:0;border-radius:50%;border:2px solid var(--tinta-45);
  display:flex;align-items:center;justify-content:center;font-family:"Montserrat",sans-serif;
  font-size:var(--t-xs);font-weight:700;color:var(--tinta-45);transition:all .22s}
.pasos__btn[aria-selected="true"]{font-weight:500}
.pasos__btn[aria-selected="true"] .pasos__n{background:var(--violeta);border-color:var(--violeta);color:#fff}
.pasos__visor{border:1px solid var(--borde);background:#fff;padding:1.6rem;display:grid;gap:1rem}
.pasos__img{background:var(--nube);display:flex;align-items:center;justify-content:center;min-height:230px;padding:1.1rem;border:1px solid var(--borde)}
.pasos__img img{max-height:210px;width:auto;display:block}
.pasos__img[data-anim="si"] img{animation:aparece .35s ease}
.pasos__tit{font-family:"Montserrat",sans-serif;font-weight:700;font-size:var(--t-lg)}
.pasos__txt{font-size:var(--t-sm);color:var(--tinta-70);margin:0}
.pasos__barra{height:4px;background:var(--borde);position:relative;overflow:hidden}
.pasos__barra span{position:absolute;inset:0 auto 0 0;background:var(--violeta);transition:width .4s ease}

/* ============================================================
   11. TIPOS DE FRACTURA / CASOS CLÍNICOS
   ============================================================ */
.fracturas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--borde);border:1px solid var(--borde)}
.fractura{background:#fff;padding:1.4rem 1.3rem;display:grid;gap:.5rem;justify-items:start}
.fractura svg{width:76px;height:auto;display:block}
.fractura h4{font-size:var(--t-base)}
.fractura p{font-size:var(--t-sm);color:var(--tinta-70);margin:0}
.fractura__pct{font-family:"Montserrat",sans-serif;font-weight:800;font-size:1.5rem;color:var(--violeta);line-height:1}

.casos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.2)}
.caso{background:var(--tinta);padding:1.7rem 1.6rem;display:grid;gap:.55rem;align-content:start}
.caso__meta{font-size:var(--t-xs);color:#8FA2BE}
.caso__tipo{font-family:"Montserrat",sans-serif;font-size:var(--t-md);font-weight:700;color:#fff}
.caso__cifra{font-family:"Montserrat",sans-serif;font-weight:800;font-size:2.6rem;line-height:1;color:#5FCBB0}
.caso__glosa{font-size:var(--t-sm);color:#AEBDD4;margin:0}
.caso__medidor{height:6px;background:rgba(255,255,255,.15);margin-top:.3rem;position:relative;overflow:hidden}
.caso__medidor span{position:absolute;inset:0 auto 0 0;background:#5FCBB0;width:0;transition:width 1s cubic-bezier(.3,.8,.3,1)}

/* ============================================================
   12. MEDIDAS / BARRAS
   ============================================================ */
.medidas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem)}
.medida__titulo{font-family:"Montserrat",sans-serif;font-size:var(--t-sm);font-weight:600;color:#AEBDD4;margin-bottom:.9rem}
.medida__fila{display:grid;grid-template-columns:105px minmax(0,1fr);align-items:center;gap:.8rem;margin-bottom:.5rem}
.medida__quien{font-size:var(--t-xs);color:#AEBDD4}
.medida__pista{background:rgba(255,255,255,.1);height:30px;position:relative}
.medida__valor{height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:.65rem;
  font-family:"Montserrat",sans-serif;font-size:var(--t-xs);font-weight:700;width:0;transition:width .9s cubic-bezier(.3,.8,.3,1)}
.medida__valor--maff{background:#5FCBB0;color:#08322A}
.medida__valor--ref{background:rgba(255,255,255,.26);color:#fff}
.medida__nota{font-size:var(--t-xs);color:#8FA2BE;margin:.6rem 0 0}

/* ============================================================
   13. TABLAS
   ============================================================ */
.tabla{width:100%;border-collapse:collapse;font-size:var(--t-sm);text-align:left}
.tabla caption{text-align:left;font-size:var(--t-xs);color:var(--tinta-70);padding-bottom:.75rem}
.tabla th,.tabla td{padding:.65rem .9rem;border-bottom:1px solid var(--borde)}
.tabla thead th{font-family:"Montserrat",sans-serif;font-size:var(--t-xs);font-weight:700;border-bottom:2px solid var(--tinta);white-space:nowrap}
.tabla tbody tr:nth-child(even){background:var(--nube)}
.tabla td:first-child{font-weight:500;font-variant-numeric:tabular-nums}
.tabla-caja{border:1px solid var(--borde);max-height:430px;overflow:auto}
.tabla-caja thead th{position:sticky;top:0;background:#fff;z-index:2}
.filtro{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.filtro input,.filtro select{font:inherit;font-size:var(--t-sm);padding:.55rem .7rem;border:1px solid var(--borde);border-radius:3px;background:#fff;color:var(--tinta)}
.filtro__cuenta{font-size:var(--t-xs);color:var(--tinta-70)}

/* ============================================================
   14. REJILLAS DE PRODUCTO
   ============================================================ */
.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--borde);border:1px solid var(--borde)}
.rejilla--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rejilla--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.prod{background:#fff;padding:1.4rem 1.35rem 1.5rem;display:grid;gap:.45rem;text-decoration:none;align-content:start;transition:background .2s}
a.prod:hover,a.prod:focus-visible{background:var(--nube)}
.prod__img{margin:-1.4rem -1.35rem .8rem;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--borde);background:#fff;aspect-ratio:5/4;padding:1rem;overflow:hidden}
.prod__img img{max-width:100%;max-height:100%;width:auto;display:block;object-fit:contain}
.prod__logo{height:26px;width:auto;margin-bottom:.15rem}
.prod__ref{font-family:"Montserrat",sans-serif;font-size:var(--t-xs);font-weight:600;color:var(--activo)}
.prod__nombre{font-family:"Montserrat",sans-serif;font-size:var(--t-md);font-weight:700}
.prod__uso{font-size:var(--t-sm);color:var(--tinta-70);line-height:1.5}
.lista-marcas{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center;margin-top:1.5rem}
.lista-marcas img{height:26px;width:auto;opacity:.8}

/* ============================================================
   15. PRESENCIA
   ============================================================ */
.mapa{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--borde);border:1px solid var(--borde)}
.pais{background:#fff;padding:1.25rem 1.2rem;display:grid;gap:.2rem}
.pais--directa{background:var(--tinta);color:#fff}
.pais__nombre{font-family:"Montserrat",sans-serif;font-size:var(--t-md);font-weight:700}
.pais__via{font-size:var(--t-sm);color:var(--tinta-70)}
.pais--directa .pais__via{color:#AEBDD4}
.pais--abierto{background:var(--naranja);color:#231200}
.pais--abierto .pais__via{color:#4A2C00}

/* ============================================================
   16. BANDA / EDUCACIÓN
   ============================================================ */
.banda{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.banda__foto{background-size:cover;background-position:center;min-height:320px}
.banda__texto{background:var(--tinta);color:#fff;padding:clamp(2rem,4vw,3.5rem)}
.banda__texto p{color:#AEBDD4}
.banda__texto h2{font-size:var(--t-2xl);margin-bottom:.9rem}
.educa{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;background:var(--borde);border:1px solid var(--borde)}
.educa__item{background:#fff;padding:1.8rem 1.6rem}
.educa__item h3{font-size:var(--t-lg);margin-bottom:.6rem}
.educa__item p{font-size:var(--t-sm);color:var(--tinta-70)}

/* ============================================================
   17. FAQ
   ============================================================ */
.faq{border-top:1px solid var(--borde)}
.faq__item{border-bottom:1px solid var(--borde)}
.faq__q{width:100%;background:none;border:0;padding:1.3rem 2.5rem 1.3rem 0;font-family:"Montserrat",sans-serif;
  font-size:var(--t-md);font-weight:600;color:var(--tinta);text-align:left;cursor:pointer;position:relative}
.faq__q::after{content:"";position:absolute;right:.4rem;top:50%;width:12px;height:12px;margin-top:-8px;
  border-right:2px solid var(--tinta-45);border-bottom:2px solid var(--tinta-45);transform:rotate(45deg);transition:transform .25s}
.faq__q[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:-3px}
.faq__r{display:none;padding:0 3rem 1.5rem 0}
.faq__r[data-abierto="si"]{display:block;animation:aparece .28s ease}
.faq__r p{color:var(--tinta-70)}

/* ============================================================
   18. CONTACTO
   ============================================================ */
.contacto__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4rem)}
.equipo{display:grid;gap:1px;background:var(--borde);border:1px solid var(--borde)}
.equipo__item{background:#fff;padding:1.05rem 1.15rem;display:grid;gap:.15rem}
.equipo__nombre{font-family:"Montserrat",sans-serif;font-weight:700;font-size:var(--t-base)}
.equipo__rol{font-size:var(--t-sm);color:var(--tinta-70)}
.equipo__mail{font-size:var(--t-sm);word-break:break-all}
.campo{display:grid;gap:.35rem;margin-bottom:1rem}
.campo label{font-family:"Montserrat",sans-serif;font-size:var(--t-sm);font-weight:600}
.campo input,.campo select,.campo textarea{font:inherit;font-size:var(--t-base);padding:.78rem .85rem;
  border:1px solid var(--borde);border-radius:3px;background:#fff;color:var(--tinta);width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--azul);outline-offset:-2px}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.miel{position:absolute;left:-9999px}
.aviso-form{margin-top:1rem;padding:.85rem 1rem;border-radius:3px;font-size:var(--t-sm);display:none}
.aviso-form[data-estado="ok"]{display:block;background:#E7F6F1;border:1px solid #3FB294;color:#0B4A3C}
.aviso-form[data-estado="error"]{display:block;background:#FDEDE7;border:1px solid #E8871F;color:#7A3B00}

/* ============================================================
   19. PIE
   ============================================================ */
.pie{background:var(--tinta);color:#AEBDD4;padding-block:clamp(2.5rem,5vw,3.75rem) 2rem;font-size:var(--t-sm)}
.pie a{color:#DCE6F0;text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2rem;padding-bottom:2.25rem}
.pie h4{color:#fff;font-size:var(--t-xs);margin-bottom:.85rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pie__marcas{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;border-top:1px solid rgba(255,255,255,.15);padding-block:1.5rem;margin-bottom:.5rem}
.pie__marcas img{height:24px;width:auto;filter:brightness(0) invert(1);opacity:.75;transition:opacity .2s}
.pie__marcas a:hover img{opacity:1}
.pie__legal{border-top:1px solid rgba(255,255,255,.15);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;font-size:var(--t-xs)}
.pie__aviso{border-left:3px solid var(--naranja);padding:.2rem 0 .2rem 1.1rem;margin-bottom:2.25rem;font-size:var(--t-xs);line-height:1.6;max-width:82ch}

/* ============================================================
   19b. WHATSAPP FLOTANTE
   ============================================================ */
.wa{position:fixed;right:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem);z-index:120;
  display:inline-flex;align-items:center;gap:.6rem;
  background:#1EA855;color:#fff;text-decoration:none;
  padding:.72rem .95rem;border-radius:999px;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.45);
  font-family:"Montserrat",sans-serif;font-size:var(--t-sm);font-weight:600;
  transition:background .2s,transform .2s,box-shadow .2s}
.wa:hover,.wa:focus-visible{background:#17914a;transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.wa svg{width:26px;height:26px;fill:#fff;flex-shrink:0}
.wa__texto{white-space:nowrap;max-width:14rem;overflow:hidden}
@media (max-width:760px){
  .wa{padding:.72rem;gap:0}
  .wa__texto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media print{.wa{display:none}}

/* ============================================================
   20. CONTENIDO WP GENÉRICO
   ============================================================ */
.entrada{padding-block:clamp(2.5rem,5vw,4rem)}
.entrada h1{font-size:var(--t-2xl);margin-bottom:1.25rem}
.entrada h2{font-size:var(--t-xl);margin:2rem 0 .8rem}
.entrada h3{font-size:var(--t-lg);margin:1.5rem 0 .6rem}
.entrada ul,.entrada ol{max-width:64ch;color:var(--tinta-70)}
.entrada img{margin-block:1.5rem}
.entrada blockquote{border-left:3px solid var(--violeta);padding-left:1.2rem;margin-left:0;color:var(--tinta-70)}

/* ============================================================
   21. RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .heroe__grid,.heroe-linea__grid,.contacto__grid,.medidas,.mapa-columna,.pasos,.banda,.tornillo{grid-template-columns:minmax(0,1fr)}
  .heroe h1,.heroe-linea h1{max-width:20ch}
  .arco{max-width:350px;margin-top:.5rem}
  .espina{max-width:180px}
  .rejilla,.rejilla--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mapa{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalogo{grid-template-columns:minmax(0,1fr)}
  .catalogo__muestra{border-left:0;border-top:1px solid var(--borde)}
  .pie__grid{grid-template-columns:1fr 1fr}
  .indice{top:0}
  .nav__fila{gap:.7rem}
  .nav__hamburguesa{display:flex}
  .nav__cta{margin-left:auto;padding:.78rem 1rem}
  .nav__cta-largo{display:none}
  .nav__cta-corto{display:inline}
  .nav__menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--borde);flex-direction:column;gap:0;padding:.5rem var(--marco) 1.25rem;font-size:var(--t-md)}
  .nav__menu[data-abierto="si"]{display:flex;animation:aparece .22s ease}
  .nav__menu li{border-top:1px solid var(--borde)}
  .nav__menu a{display:block;padding:.9rem 0;border-bottom:0}
}
@media (max-width:620px){
  .dupla{grid-template-columns:1fr}
  .pie__grid{grid-template-columns:1fr}
  .rejilla,.rejilla--4,.rejilla--2,.fracturas,.casos{grid-template-columns:minmax(0,1fr)}
  .fichas-chip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pop__cuerpo{grid-template-columns:minmax(0,1fr)}
  .medida__fila{grid-template-columns:80px minmax(0,1fr)}
  .tornillo__marco .hot{width:23px;height:23px;font-size:.65rem}
  .tornillo__marco .hot::after{inset:-5px}
  .tornillo__tabs{flex-direction:column}
  .tabla th,.tabla td{padding:.55rem .45rem}
}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}