/* ══════════════ PALETA DEL CLIENTE ══════════════ */
:root{
  --niebla:#EAF2F8;
  --hielo:#CBDDEA;
  --acero:#8FAAC5;
  --marea:#3D5A76;
  --abismo:#22324A;
  --fondo:#101B2B;      /* abismo profundizado para OLED */
  --fondo-2:#0A1220;
  --luz:#A9C9E4;        /* derivada de la rampa, para brillos */

  --txt-claro:#EAF2F8;
  --txt-claro-2:rgba(234,242,248,.66);
  --txt-claro-3:rgba(234,242,248,.42);
  --txt-osc:#1B2A3D;
  --txt-osc-2:#51667E;

  --borde-claro:rgba(234,242,248,.12);
  --borde-luz:rgba(234,242,248,.28);
  --borde-osc:rgba(34,50,74,.14);

  --vidrio:linear-gradient(160deg,rgba(234,242,248,.075),rgba(234,242,248,.025));
  --elev:0 1px 0 rgba(234,242,248,.06) inset,
         0 18px 40px -24px rgba(5,10,18,.9),
         0 2px 8px -4px rgba(5,10,18,.6);
  --elev-alta:0 1px 0 rgba(234,242,248,.12) inset,
         0 30px 60px -28px rgba(5,10,18,1),
         0 4px 14px -6px rgba(5,10,18,.7);
  --elev-clara:0 1px 2px rgba(34,50,74,.06),
         0 14px 34px -20px rgba(34,50,74,.35);

  
  --r:16px;
  --salida:cubic-bezier(.16,1,.3,1);
  --rapido:.2s; --medio:.42s; --entrada:.8s;

  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(74px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--txt-claro);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{margin:0;font-weight:400;line-height:1.03;letter-spacing:-.022em;
  font-family:"Instrument Serif",Georgia,serif}
p{margin:0}
a{color:inherit}
.env{width:min(1160px,100% - 2.5rem);margin-inline:auto}

/* ══════════════ GRANO + AURORA ══════════════ */
#grano{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E")}
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glob{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.g1{width:52vw;height:52vw;max-width:680px;max-height:680px;top:-18%;right:-10%;
  background:radial-gradient(circle,rgba(143,170,197,.42),transparent 68%);
  animation:flota1 26s ease-in-out infinite alternate}
.g2{width:44vw;height:44vw;max-width:560px;max-height:560px;bottom:-22%;left:-12%;
  background:radial-gradient(circle,rgba(61,90,118,.62),transparent 68%);
  animation:flota2 32s ease-in-out infinite alternate}
.g3{width:30vw;height:30vw;max-width:380px;max-height:380px;top:38%;left:44%;
  background:radial-gradient(circle,rgba(169,201,228,.2),transparent 66%);
  animation:flota1 38s ease-in-out infinite alternate-reverse}
@keyframes flota1{to{transform:translate3d(-7%,9%,0) scale(1.14)}}
@keyframes flota2{to{transform:translate3d(9%,-8%,0) scale(1.1)}}


/* ══════════════ FOTO DEL HERO ══════════════ */
.hero{min-height:clamp(580px,86svh,880px);display:flex;align-items:center}
.hero-foto{position:absolute;inset:-7%;z-index:0;
  background-image:var(--hero);background-size:cover;background-position:64% 48%;
  filter:blur(5px) saturate(.82) contrast(1.06) brightness(.92);
  transform:translate3d(0,0,0) scale(1.06);will-change:transform}
.hero-velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(97deg,rgba(16,27,43,.97) 0%,rgba(16,27,43,.94) 28%,rgba(16,27,43,.74) 54%,rgba(34,50,74,.5) 76%,rgba(61,90,118,.36) 100%),
  radial-gradient(85% 75% at 16% 52%,rgba(16,27,43,.62),transparent 72%),
  linear-gradient(180deg,rgba(16,27,43,.85) 0%,transparent 24%,transparent 58%,var(--fondo) 100%)}
.hero .aurora{z-index:2;mix-blend-mode:screen;opacity:.55}
.hero .foco{z-index:2}
@media(max-width:820px){
  .hero-foto{background-position:58% 46%;filter:blur(7px) saturate(.8) brightness(.82)}
  .hero-velo{background:
    linear-gradient(180deg,rgba(16,27,43,.93) 0%,rgba(16,27,43,.9) 46%,rgba(16,27,43,.82) 72%,var(--fondo) 100%),
    radial-gradient(90% 60% at 30% 40%,rgba(34,50,74,.55),transparent 70%)}
}


/* ══════════════ RETRATO Y CASOS ══════════════ */
.retrato-grid{display:grid;gap:2.4rem;align-items:center}
@media(min-width:920px){.retrato-grid{grid-template-columns:.82fr 1fr;gap:4rem}}
.retrato{margin:0;position:relative;border-radius:22px;overflow:hidden;
  border:1px solid rgba(34,50,74,.12);box-shadow:var(--elev-clara)}
.retrato img{display:block;width:100%;height:auto}
.retrato::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(34,50,74,.4))}
.retrato figcaption{position:absolute;left:1.2rem;right:1.2rem;bottom:1.1rem;z-index:2;
  color:var(--niebla);font-size:.84rem}
.bio h2{font-size:clamp(1.95rem,4.2vw,2.9rem);margin-top:.9rem}
.bio>p{color:var(--txt-osc-2);margin-top:1.2rem;max-width:48ch}
.hueco{font-style:normal;display:inline-block;padding:0 .4rem;border-radius:4px;
  background:rgba(143,170,197,.3);border-bottom:2px dashed rgba(61,90,118,.55);color:var(--marea)}
.datos-bio{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:2.2rem;padding-top:1.6rem;
  border-top:1px solid rgba(34,50,74,.14)}
.dato .n{font-family:"Instrument Serif",serif;font-size:2.3rem;line-height:1;color:var(--marea)}
.dato small{display:block;font-size:.77rem;color:var(--txt-osc-2);margin-top:.2rem}

.casos{display:grid;gap:1.2rem;position:relative;z-index:3}
@media(min-width:800px){.casos{grid-template-columns:repeat(3,1fr)}}
.caso{border-radius:var(--r);overflow:hidden;background:var(--vidrio);
  border:1px solid var(--borde-claro);box-shadow:var(--elev);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform var(--medio) var(--salida),border-color var(--medio) var(--salida),
             box-shadow var(--medio) var(--salida)}
.caso .marco{position:relative;overflow:hidden;aspect-ratio:3/2}
.caso img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--salida)}
.caso .marco::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 48%,rgba(10,18,32,.78))}
.caso .cuerpo{padding:1.25rem 1.35rem 1.45rem}
.caso h3{font-size:1.26rem}
.caso .res{margin-top:.55rem;font-size:.85rem;color:var(--txt-claro-2)}
.mini-p{display:inline-block;margin-top:.9rem;font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;background:var(--luz);color:var(--abismo);
  padding:.26rem .55rem;border-radius:5px}

/* ══════════════ BARRA DE PROGRESO ══════════════ */
#prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  background:linear-gradient(90deg,var(--acero),var(--luz),var(--niebla));
  transform:scaleX(0);transform-origin:left;will-change:transform}

/* ══════════════ BOTONES ══════════════ */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  justify-content:center;padding:.85rem 1.4rem;border-radius:999px;
  border:1px solid transparent;font-size:.93rem;font-weight:500;
  text-decoration:none;cursor:pointer;font-family:Inter,sans-serif;
  transition:transform var(--rapido) var(--salida),box-shadow var(--medio) var(--salida),
             background var(--rapido) var(--salida),border-color var(--rapido) var(--salida)}
.btn-p{background:linear-gradient(180deg,#FFFFFF,var(--niebla));color:var(--abismo);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 26px -12px rgba(169,201,228,.7)}
.btn-f{background:var(--vidrio);border-color:var(--borde-claro);color:var(--txt-claro);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-o{background:var(--abismo);color:var(--niebla)}
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:2px solid var(--luz);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-p:hover{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 16px 36px -14px rgba(169,201,228,.95)}
  .btn-f:hover{border-color:var(--borde-luz)}
}

/* ══════════════ HEADER ══════════════ */
.salto{position:absolute;left:-9999px}
.salto:focus{left:1rem;top:1rem;z-index:100;background:var(--niebla);color:var(--abismo);
  padding:.7rem 1rem;border-radius:8px}
/* z-index por encima del botón flotante (70) y por debajo de la barra de
   progreso (80). Sin `backdrop-filter`: con el tema claro el fondo es opaco,
   el desenfoque no se percibía y creaba un contexto de apilamiento que dejaba
   el submenú por debajo de las tarjetas de la página. */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:75;
  transition:background var(--medio) var(--salida),border-color var(--medio) var(--salida);
  border-bottom:1px solid transparent}
header.pegado{
  background:var(--abismo);
  border-bottom-color:var(--borde-claro)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:74px;
  position:relative;z-index:2}
.marca{display:flex;align-items:baseline;gap:.45rem;text-decoration:none;
  font-family:"Instrument Serif",serif;font-size:1.34rem}
.marca span{font-family:Inter,sans-serif;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--txt-claro-3);font-weight:600}
nav.menu{display:none;gap:2rem}
nav.menu a{text-decoration:none;font-size:.89rem;color:var(--txt-claro-2);
  position:relative;padding-block:.35rem;transition:color var(--rapido) var(--salida)}
nav.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--luz),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--medio) var(--salida)}
.acciones{display:flex;align-items:center;gap:.65rem}
.tel-top{display:none;font-size:.88rem;text-decoration:none;color:var(--txt-claro-2);
  font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  nav.menu a:hover{color:var(--txt-claro)}
  nav.menu a:hover::after{transform:scaleX(1)}
  .tel-top:hover{color:var(--txt-claro)}
}
@media(min-width:920px){nav.menu{display:flex}.tel-top{display:inline}}

/* ══════════════ HERO ══════════════ */
.hero{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(4rem,10vw,7.5rem) 0 clamp(4rem,8vw,6rem);
  background:
    linear-gradient(180deg,var(--fondo) 0%,#13203300 40%),
    linear-gradient(200deg,var(--abismo),var(--fondo) 55%,var(--fondo-2))}
.hero .foco{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .6s var(--salida);
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,35%),
    rgba(169,201,228,.14),transparent 62%)}
.hero.vivo .foco{opacity:1}
.hero .env{position:relative;z-index:3}
.h-linea{overflow:hidden;display:block}
.h-linea>span{display:block;will-change:transform,opacity}
.ojillo{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;font-weight:600;
  font-family:Inter,sans-serif;color:var(--txt-claro-3);
  display:inline-flex;align-items:center;gap:.6rem}
.punto{width:6px;height:6px;border-radius:50%;background:var(--luz);
  box-shadow:0 0 0 4px rgba(169,201,228,.16);flex:none}
h1.gigante{font-size:clamp(2.85rem,8vw,5.6rem);margin:1.1rem 0 0;max-width:14ch}
.brillo{background:linear-gradient(100deg,var(--niebla) 10%,var(--acero) 48%,var(--niebla) 86%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:barre 7s linear infinite}
@keyframes barre{to{background-position:-220% 0}}
.subraya{position:relative;display:inline-block}
.subraya::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:2px;
  background:linear-gradient(90deg,transparent,var(--luz),transparent);
  transform:scaleX(0);transform-origin:left;
  box-shadow:0 0 14px rgba(169,201,228,.85)}
.subraya.pinta::after{transform:scaleX(1);transition:transform .9s var(--salida) .6s}
.bajada{margin-top:1.7rem;max-width:50ch;font-size:clamp(1rem,1.6vw,1.13rem);color:var(--txt-claro-2)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.3rem}
.metas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:3rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;
  border-radius:999px;font-size:.8rem;color:var(--txt-claro-2);
  background:var(--vidrio);border:1px solid var(--borde-claro);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chip b{color:var(--txt-claro);font-weight:500}

/* ══════════════ SECCIONES ══════════════ */
section{position:relative;padding:clamp(4.5rem,9vw,7.5rem) 0}
.claro{background:var(--niebla);color:var(--txt-osc)}
.claro .ojillo{color:var(--txt-osc-2)}
.claro .punto{background:var(--marea);box-shadow:0 0 0 4px rgba(61,90,118,.14)}
.oscuro{background:linear-gradient(180deg,var(--fondo-2),var(--fondo));overflow:hidden;isolation:isolate}
.cabeza{max-width:36ch;margin-bottom:clamp(2.4rem,5vw,3.6rem);position:relative;z-index:3}
.cabeza h2{font-size:clamp(2.1rem,5vw,3.3rem);margin-top:.9rem}
.cabeza>p:last-child{margin-top:1.1rem;color:var(--txt-claro-2);max-width:48ch}
.claro .cabeza>p:last-child{color:var(--txt-osc-2)}
.it{font-style:italic}

/* dolores */
.dolores{display:grid;gap:1rem;position:relative;z-index:3}
@media(min-width:780px){.dolores{grid-template-columns:repeat(2,1fr)}}
.dolor{padding:1.8rem 1.7rem;border-radius:var(--r);
  background:var(--vidrio);border:1px solid var(--borde-claro);
  box-shadow:var(--elev);display:flex;flex-direction:column;gap:.8rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform var(--medio) var(--salida),border-color var(--medio) var(--salida),
             box-shadow var(--medio) var(--salida)}
.dolor q{font-family:"Instrument Serif",serif;font-style:italic;font-size:1.42rem;
  line-height:1.22;quotes:"«" "»";color:var(--txt-claro)}
.dolor small{color:var(--txt-claro-3);font-size:.82rem;display:flex;align-items:center;gap:.45rem}
.flecha{display:inline-block;transition:transform var(--medio) var(--salida)}
@media (hover:hover) and (pointer:fine){
  .dolor:hover{transform:translateY(-3px);border-color:var(--borde-luz);box-shadow:var(--elev-alta)}
  .dolor:hover .flecha{transform:translateX(5px)}
}

/* servicios */
.servicios{display:grid;gap:1.1rem}
@media(min-width:720px){.servicios{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.servicios{grid-template-columns:repeat(3,1fr)}}
.svc{position:relative;overflow:hidden;border-radius:var(--r);padding:1.8rem 1.6rem 1.6rem;
  background:linear-gradient(170deg,#FFFFFF,#F4F9FC);
  border:1px solid rgba(34,50,74,.1);box-shadow:var(--elev-clara);
  display:flex;flex-direction:column;gap:.75rem;
  transition:transform var(--medio) var(--salida),box-shadow var(--medio) var(--salida),
             border-color var(--medio) var(--salida)}
.svc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity var(--medio) var(--salida);
  background:radial-gradient(240px circle at var(--cx,50%) var(--cy,50%),
    rgba(143,170,197,.2),transparent 62%)}
.svc::after{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
.svc .num{font-family:"Instrument Serif",serif;font-size:2.3rem;line-height:1;
  color:var(--acero);font-variant-numeric:tabular-nums}
.svc h3{font-size:1.5rem;color:var(--txt-osc)}
.svc p{font-size:.93rem;color:var(--txt-osc-2)}
.svc .mas{margin-top:auto;padding-top:1.1rem;font-size:.84rem;font-weight:500;
  display:flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--marea)}
@media (hover:hover) and (pointer:fine){
  .svc:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(34,50,74,.06),0 26px 50px -24px rgba(34,50,74,.5);
    border-color:rgba(143,170,197,.6)}
  .svc:hover::before{opacity:1}
  .svc:hover .flecha{transform:translateX(5px)}
}
.svc.destacada{grid-column:1/-1;
  background:linear-gradient(150deg,var(--abismo),var(--fondo));
  border-color:transparent;box-shadow:var(--elev-alta)}
.svc.destacada h3{color:var(--txt-claro)}
.svc.destacada p{color:var(--txt-claro-2)}
.svc.destacada .num{color:var(--luz)}
.svc.destacada .mas{color:var(--luz)}
.svc.destacada::after{background:linear-gradient(90deg,transparent,rgba(169,201,228,.6),transparent)}

/* proceso */
.paso{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;padding:1.7rem 0;
  border-top:1px solid var(--borde-claro);align-items:start;position:relative;z-index:3}
.paso:last-child{border-bottom:1px solid var(--borde-claro)}
.bolita{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums;flex:none;
  background:var(--vidrio);border:1px solid var(--borde-claro);color:var(--luz);
  box-shadow:0 0 0 6px rgba(169,201,228,.05)}
.paso h3{font-size:1.36rem}
.paso p{color:var(--txt-claro-2);font-size:.94rem;margin-top:.35rem;max-width:58ch}

/* calculadora */
.calc{position:relative;border-radius:26px;overflow:hidden;
  background:linear-gradient(155deg,var(--abismo),var(--fondo) 55%,var(--fondo-2));
  border:1px solid var(--borde-claro);box-shadow:var(--elev-alta);
  padding:clamp(1.8rem,4vw,3.2rem)}
.calc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 92% -5%,rgba(143,170,197,.3),transparent 66%)}
.calc::after{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(169,201,228,.7),transparent)}
.calc-grid{position:relative;display:grid;gap:2.4rem}
@media(min-width:900px){.calc-grid{grid-template-columns:1fr 1.05fr;gap:3.4rem;align-items:center}}
.calc h2{font-size:clamp(1.9rem,3.8vw,2.7rem);margin-top:.8rem}
.campos{display:grid;gap:1rem;margin-top:1.8rem}
.campo label{display:block;font-size:.79rem;color:var(--txt-claro-3);margin-bottom:.4rem}
.caja{display:flex;align-items:center;gap:.55rem;border-radius:12px;padding:.75rem .95rem;
  background:rgba(10,18,32,.55);border:1px solid var(--borde-claro);
  transition:border-color var(--rapido) var(--salida),box-shadow var(--rapido) var(--salida)}
.caja:focus-within{border-color:var(--luz);box-shadow:0 0 0 4px rgba(169,201,228,.12)}
.caja i{font-style:normal;color:var(--txt-claro-3);font-size:.92rem}
.caja input{flex:1;min-width:0;width:100%;background:none;border:0;color:var(--txt-claro);
  font:inherit;font-size:1rem;font-variant-numeric:tabular-nums}
.caja input:focus{outline:none}
.panel{border-radius:20px;padding:1.8rem;position:relative;overflow:hidden;
  background:var(--vidrio);border:1px solid var(--borde-claro);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(234,242,248,.08) inset}
.cifra{font-family:"Instrument Serif",serif;font-size:clamp(2.7rem,6.4vw,3.9rem);line-height:1;
  font-variant-numeric:tabular-nums;margin-top:.5rem;
  background:linear-gradient(120deg,var(--niebla),var(--acero));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fila{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.75rem 0;border-top:1px solid var(--borde-claro);font-size:.89rem;color:var(--txt-claro-2)}
.fila b{font-weight:500;color:var(--txt-claro);font-variant-numeric:tabular-nums;font-size:1.06rem}
.microtexto{font-size:.75rem;color:var(--txt-claro-3);margin-top:1.1rem;line-height:1.5}

/* pendientes */
.pendiente{border:1.5px dashed rgba(143,170,197,.5);border-radius:var(--r);
  padding:2.1rem 1.5rem;text-align:center;background:rgba(143,170,197,.07);position:relative;z-index:3}
.claro .pendiente{background:rgba(61,90,118,.05);border-color:rgba(61,90,118,.3)}
.etiqueta-p{display:inline-block;font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;background:var(--luz);color:var(--abismo);padding:.3rem .65rem;
  border-radius:5px;margin-bottom:.9rem}
.pendiente p{color:var(--txt-claro-2);font-size:.9rem;max-width:48ch;margin-inline:auto}
.claro .pendiente p{color:var(--txt-osc-2)}
.rejilla-p{display:grid;gap:1rem}
@media(min-width:780px){.rejilla-p{grid-template-columns:repeat(3,1fr)}}

/* recursos */
.notas{display:grid;gap:1.1rem}
@media(min-width:780px){.notas{grid-template-columns:repeat(2,1fr)}}
.nota-card{border-radius:var(--r);padding:1.8rem 1.6rem;text-decoration:none;
  display:flex;flex-direction:column;gap:.65rem;position:relative;overflow:hidden;
  background:linear-gradient(170deg,#FFFFFF,#F2F8FC);
  border:1px solid rgba(34,50,74,.1);box-shadow:var(--elev-clara);
  transition:transform var(--medio) var(--salida),box-shadow var(--medio) var(--salida)}
.nota-card h3{font-size:1.36rem;color:var(--txt-osc)}
.nota-card p:last-child{font-size:.9rem;color:var(--txt-osc-2)}
@media (hover:hover) and (pointer:fine){
  .nota-card:hover{transform:translateY(-4px);
    box-shadow:0 2px 4px rgba(34,50,74,.06),0 26px 50px -24px rgba(34,50,74,.5)}
}

/* contacto */
.cont-grid{display:grid;gap:2.6rem;position:relative;z-index:3}
@media(min-width:960px){.cont-grid{grid-template-columns:1fr 1.1fr;gap:4rem}}
.datos dl{margin:2rem 0 0;display:grid;gap:1.3rem}
.datos dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-claro-3);margin-bottom:.25rem}
.datos dd{margin:0;font-size:1.04rem}
.datos a{text-decoration:none;border-bottom:1px solid var(--borde-claro);padding-bottom:1px;
  transition:border-color var(--rapido) var(--salida)}
.ficha{border-radius:22px;padding:clamp(1.5rem,3vw,2.2rem);
  background:var(--vidrio);border:1px solid var(--borde-claro);box-shadow:var(--elev);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
form{display:grid;gap:1rem}
.f-fila{display:grid;gap:1rem}
@media(min-width:560px){.f-fila{grid-template-columns:1fr 1fr}}
.f-campo label{display:block;font-size:.79rem;color:var(--txt-claro-3);margin-bottom:.4rem}
.f-campo input,.f-campo select,.f-campo textarea{width:100%;padding:.8rem .95rem;
  border-radius:12px;font:inherit;font-size:.95rem;color:var(--txt-claro);
  background:rgba(10,18,32,.5);border:1px solid var(--borde-claro);
  transition:border-color var(--rapido) var(--salida),box-shadow var(--rapido) var(--salida)}
.f-campo textarea{resize:vertical;min-height:112px}
.f-campo :focus{outline:none;border-color:var(--luz);box-shadow:0 0 0 4px rgba(169,201,228,.12)}
.privacidad{font-size:.77rem;color:var(--txt-claro-3)}
.privacidad a{color:var(--txt-claro-2)}

/* footer */
footer{background:var(--fondo-2);color:var(--txt-claro-2);
  padding:clamp(3.2rem,6vw,4.8rem) 0 2rem;font-size:.9rem;
  border-top:1px solid var(--borde-claro);position:relative;overflow:hidden}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(169,201,228,.45),transparent)}
.pie-grid{display:grid;gap:2.4rem;position:relative}
@media(min-width:780px){.pie-grid{grid-template-columns:1.5fr 1fr 1fr}}
footer h4{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-claro-3);margin:0 0 1rem;font-weight:600;font-family:Inter,sans-serif}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
footer a{text-decoration:none;transition:color var(--rapido) var(--salida)}
.pie-marca{font-family:"Instrument Serif",serif;font-size:1.6rem;color:var(--txt-claro)}
.pie-bajo{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--borde-claro);
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;
  font-size:.79rem;color:var(--txt-claro-3);position:relative}
.credito a{border-bottom:1px solid var(--borde-luz)}
@media (hover:hover) and (pointer:fine){
  footer a:hover{color:var(--txt-claro)}
  .datos a:hover{border-color:var(--luz)}
}

/* flotante */
.flotante{position:fixed;right:1rem;z-index:70;
  bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.f-op{display:flex;align-items:center;gap:.6rem;text-decoration:none;
  padding:.62rem 1.05rem .62rem .85rem;border-radius:999px;font-size:.87rem;font-weight:500;
  white-space:nowrap;color:var(--txt-claro);
  background:rgba(16,27,43,.82);border:1px solid var(--borde-claro);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--elev);
  opacity:0;transform:translateY(10px) scale(.93);pointer-events:none;
  transition:opacity var(--medio) var(--salida),transform var(--medio) var(--salida)}
.flotante.abierto .f-op{opacity:1;transform:none;pointer-events:auto}
.flotante.abierto .f-op:nth-child(1){transition-delay:.07s}
.flotante.abierto .f-op:nth-child(2){transition-delay:.03s}
.f-toggle{width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  cursor:pointer;background:linear-gradient(180deg,#FFFFFF,var(--hielo));color:var(--abismo);
  display:grid;place-items:center;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 14px 30px -12px rgba(5,10,18,.9);
  transition:transform var(--medio) var(--salida)}
.f-toggle svg{transition:transform var(--medio) var(--salida)}
.flotante.abierto .f-toggle svg{transform:rotate(135deg)}
.f-toggle:active{transform:scale(.93)}

/* revelado */
.rev{opacity:0;transform:translateY(22px);
  transition:opacity var(--entrada) var(--salida),transform var(--entrada) var(--salida);
  transition-delay:calc(var(--i,0) * 75ms)}
.rev.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .rev{opacity:1;transform:none}
  .h-linea>span{transform:none!important;opacity:1!important}
  .subraya::after{transform:scaleX(1)}
  #grano{display:none}
}
/* ══════ PÁGINA DE SERVICIO ══════ */
.sub-hero{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(3rem,7vw,5rem) 0 clamp(3rem,6vw,4.5rem);min-height:clamp(420px,58svh,600px);
  display:flex;align-items:flex-end}
.sub-foto{position:absolute;inset:-7%;z-index:0;background-size:cover;background-position:52% 55%;
  filter:blur(4px) saturate(.82) brightness(.85);transform:scale(1.06);will-change:transform}
.sub-velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(100deg,rgba(16,27,43,.97),rgba(16,27,43,.9) 34%,rgba(16,27,43,.66) 62%,rgba(61,90,118,.4)),
  linear-gradient(180deg,rgba(16,27,43,.9) 0%,transparent 30%,transparent 55%,var(--fondo) 100%)}
.sub-hero .env{position:relative;z-index:3}
.migas{font-size:.78rem;color:var(--txt-claro-3);display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.migas a{text-decoration:none}
.migas a:hover{color:var(--txt-claro)}
h1.titulo{font-size:clamp(2.3rem,5.6vw,4rem);margin:1rem 0 0;max-width:17ch}

/* menú desplegable */
.tiene-sub{position:relative}
.disparador{background:none;border:0;font:inherit;font-size:.89rem;color:var(--txt-claro-2);
  cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem 0;
  font-family:Inter,sans-serif;transition:color var(--rapido) var(--salida)}
.disparador svg{transition:transform var(--medio) var(--salida)}
.tiene-sub.abierto .disparador{color:var(--txt-claro)}
.tiene-sub.abierto .disparador svg{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 14px);left:-1rem;min-width:280px;padding:.5rem;z-index:5;
  border-radius:16px;background:#101B2B;border:1px solid var(--borde-claro);
  box-shadow:var(--elev-alta);display:grid;gap:2px;
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
  transition:opacity var(--medio) var(--salida),transform var(--medio) var(--salida)}
.tiene-sub.abierto .submenu{opacity:1;transform:none;pointer-events:auto}
.submenu a{padding:.62rem .8rem;border-radius:10px;text-decoration:none;font-size:.88rem;
  color:var(--txt-claro-2);transition:background var(--rapido) var(--salida),color var(--rapido) var(--salida)}
.submenu a:hover,.submenu a:focus-visible{background:rgba(234,242,248,.08);color:var(--txt-claro)}

/* dos columnas para quién sí / no */
.quien{display:grid;gap:1.2rem}
@media(min-width:820px){.quien{grid-template-columns:1fr 1fr}}
.tarjeta{border-radius:var(--r);padding:1.7rem 1.6rem;background:var(--vidrio);
  border:1px solid var(--borde-claro);box-shadow:var(--elev)}
.tarjeta.no{background:rgba(10,18,32,.4)}
.tarjeta h3{font-size:1.35rem;margin-bottom:1rem}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.lista li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;font-size:.94rem;
  color:var(--txt-claro-2);align-items:start}
.ico{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:.15rem;
  background:rgba(169,201,228,.16);color:var(--luz);font-size:.7rem;font-weight:700}
.tarjeta.no .ico{background:rgba(143,170,197,.12);color:var(--acero)}

/* entregables */
.entregables{display:grid;gap:1px;background:rgba(34,50,74,.12);
  border:1px solid rgba(34,50,74,.12);border-radius:var(--r);overflow:hidden}
@media(min-width:760px){.entregables{grid-template-columns:1fr 1fr}}
.ent{background:linear-gradient(170deg,#FFFFFF,#F4F9FC);padding:1.6rem 1.5rem;
  transition:background var(--medio) var(--salida)}
.ent .n{font-family:"Instrument Serif",serif;font-size:1.6rem;color:var(--acero);
  font-variant-numeric:tabular-nums;line-height:1}
.ent h3{font-size:1.18rem;margin:.5rem 0 .4rem;color:var(--txt-osc)}
.ent p{font-size:.9rem;color:var(--txt-osc-2)}
@media (hover:hover) and (pointer:fine){.ent:hover{background:#FFFFFF}}

/* faq */
.faq{display:grid;gap:.6rem;position:relative;z-index:3}
.faq-item{border:1px solid var(--borde-claro);border-radius:14px;overflow:hidden;
  background:var(--vidrio);transition:border-color var(--medio) var(--salida)}
.faq-item.abierta{border-color:var(--borde-luz)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left;
  color:var(--txt-claro);padding:1.1rem 1.3rem;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;font-size:1rem;font-family:Inter,sans-serif}
.faq-q svg{flex:none;transition:transform var(--medio) var(--salida);color:var(--luz)}
.faq-item.abierta .faq-q svg{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--medio) var(--salida)}
.faq-item.abierta .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 1.3rem 1.2rem;color:var(--txt-claro-2);font-size:.93rem;max-width:64ch}

/* otros servicios */
.otros{display:grid;gap:1rem}
@media(min-width:760px){.otros{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.otros{grid-template-columns:repeat(4,1fr)}}
.otro{border-radius:14px;padding:1.3rem 1.3rem 1.2rem;text-decoration:none;
  background:var(--vidrio);border:1px solid var(--borde-claro);
  display:flex;flex-direction:column;gap:.4rem;
  transition:transform var(--medio) var(--salida),border-color var(--medio) var(--salida)}
.otro h3{font-size:1.1rem}
.otro span{font-size:.8rem;color:var(--txt-claro-3)}
@media (hover:hover) and (pointer:fine){
  .otro:hover{transform:translateY(-3px);border-color:var(--borde-luz)}}

/* caso relacionado */
.caso-rel{display:grid;gap:2rem;align-items:center;border-radius:22px;overflow:hidden;
  background:var(--vidrio);border:1px solid var(--borde-claro);box-shadow:var(--elev)}
@media(min-width:840px){.caso-rel{grid-template-columns:1fr 1fr}}
.caso-rel img{display:block;width:100%;height:100%;object-fit:cover;min-height:260px}
.caso-rel .txt{padding:clamp(1.5rem,3vw,2.4rem)}
.linea-t{display:grid;gap:0;position:relative;z-index:3}
.hito{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding:1.5rem 0;
  border-top:1px solid var(--borde-claro);align-items:start}
.hito:last-child{border-bottom:1px solid var(--borde-claro)}
.anio-h{font-family:"Instrument Serif",serif;font-size:1.5rem;color:var(--luz);
  font-variant-numeric:tabular-nums;min-width:5.5rem}
.hito h3{font-size:1.24rem}.hito p{color:var(--txt-claro-2);font-size:.93rem;margin-top:.3rem;max-width:58ch}
.arts{display:grid;gap:1.1rem}
@media(min-width:800px){.arts{grid-template-columns:repeat(2,1fr)}}
.art{border-radius:var(--r);padding:1.8rem 1.7rem;text-decoration:none;display:flex;
  flex-direction:column;gap:.6rem;background:linear-gradient(170deg,#FFFFFF,#F2F8FC);
  border:1px solid rgba(34,50,74,.1);box-shadow:var(--elev-clara);
  transition:transform var(--medio) var(--salida),box-shadow var(--medio) var(--salida)}
.art h3{font-size:1.4rem;color:var(--txt-osc)}
.art .ex{font-size:.92rem;color:var(--txt-osc-2)}
.art time{font-size:.76rem;color:var(--acero);letter-spacing:.06em}
@media (hover:hover) and (pointer:fine){.art:hover{transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(34,50,74,.06),0 26px 50px -24px rgba(34,50,74,.5)}}
.legal{max-width:70ch;position:relative;z-index:3}
.legal h2{font-size:1.5rem;margin:2.4rem 0 .8rem}
.legal p{color:var(--txt-claro-2);margin-top:.9rem;font-size:.96rem}
.legal ul{color:var(--txt-claro-2);font-size:.96rem;padding-left:1.1rem;margin-top:.8rem}
.legal li{margin-bottom:.45rem}
.centro{min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:5rem 0;position:relative;overflow:hidden;isolation:isolate}
.centro .env{position:relative;z-index:3;max-width:56ch}
.sello{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1.6rem;
  background:var(--vidrio);border:1px solid var(--borde-luz);color:var(--luz);
  box-shadow:0 0 0 10px rgba(169,201,228,.06)}
.mapa{border-radius:var(--r);overflow:hidden;border:1px solid var(--borde-claro);
  background:rgba(10,18,32,.5);aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:1.5rem}
/* ══════════════ CAMBIO DE IDIOMA ══════════════ */
.idioma{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:var(--vidrio);border:1px solid var(--borde-claro);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);flex:none}
.idioma a,.idioma span{display:block;padding:.34rem .6rem;border-radius:999px;line-height:1;
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transition:color var(--rapido) var(--salida),background var(--rapido) var(--salida)}
.idioma .activo{background:var(--niebla);color:var(--abismo)}
.idioma a{color:var(--txt-claro-3)}
.idioma a:focus-visible{outline:2px solid var(--luz);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .idioma a:hover{color:var(--txt-claro);background:rgba(234,242,248,.1)}
}
@media(max-width:520px){
  .idioma{padding:2px}
  .idioma a,.idioma span{padding:.3rem .45rem;font-size:.66rem}
}

/* ════════════════════════════════════════════════════════════
   TEMA DE MARCA — Guía Consultores (esquema invertido)
   Base clara. Los bloques de énfasis son marino.
   Regla de oro: cada bloque declara fondo Y color de texto.
   ════════════════════════════════════════════════════════════ */

:root{
  --azul:#0036D8;          /* azul del logotipo: acentos y llamados */
  --azul-900:#00249B;
  --marino:#0B1E42;        /* bloques de énfasis */
  --marino-700:#102A5C;
  --marino-900:#071530;
  --verde:#00BF63;
  --verde-osc:#00703A;     /* el verde de marca no pasa contraste en texto chico */
  --naranja:#ED4C03;
  --gris:#F3F3F3;
  --blanco:#FFFFFF;
  --carbon:#323232;
  --carbon-2:#5E5E5E;

  /* Codec Pro es comercial (Zetafonts) y requiere licencia de webfont.
     Al recibir el archivo: .woff2 en /assets/fonts/, declarar @font-face
     y dejar "Codec Pro" al frente de esta pila. */
  --fuente:"Codec Pro","Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fondo:var(--marino);
  --fondo-2:var(--marino-900);
  --abismo:var(--marino);
  --tinta:var(--marino);
  --niebla:var(--blanco);
  --hielo:var(--gris);
  --acero:#7D8CA8;
  --marea:var(--azul);
  --luz:var(--verde);

  --txt-claro:#FFFFFF;
  --txt-claro-2:rgba(255,255,255,.82);
  --txt-claro-3:rgba(255,255,255,.62);
  --txt-osc:var(--carbon);
  --txt-osc-2:var(--carbon-2);

  --borde-claro:rgba(255,255,255,.2);
  --borde-luz:rgba(255,255,255,.42);
  --borde-osc:rgba(50,50,50,.14);
  --vidrio:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  --elev-clara:0 1px 2px rgba(11,30,66,.06),0 14px 32px -20px rgba(11,30,66,.26);
  --r:16px;
  color-scheme:light;
}

/* ── Base ── */
body{background:var(--blanco);color:var(--carbon);font-family:var(--fuente);font-weight:400}
h1,h2,h3,h4,.pie-marca,.cifra,.svc .num,.ent .n,.anio-h,.dolor q,.titulo,.gigante{
  font-family:var(--fuente);font-weight:800;letter-spacing:-.045em;font-style:normal}
.dolor q,.it,.serif-it{font-style:normal;font-weight:700}
.ojillo{font-weight:700;letter-spacing:.12em}
.bajada{font-weight:300}
#grano{display:none}

/* ════════ BLOQUES CLAROS ════════
   encabezados, dolores, proceso, calculadora, casos y contacto */
.hero,.sub-hero,.centro,#numeros,#contacto{background:var(--blanco);color:var(--carbon)}
section.oscuro{background:var(--gris);color:var(--carbon)}
.hero h1,.sub-hero h1,.centro h1,.oscuro h2,.oscuro h3,#numeros>.env>.cabeza h2,
#contacto h2,.hero h2,.sub-hero h2{color:var(--carbon)}
.hero p,.sub-hero p,.centro p,.oscuro p,#contacto .datos p,.migas,.migas span{color:var(--carbon-2)}
.hero .ojillo,.sub-hero .ojillo,.centro .ojillo,.oscuro .ojillo,#contacto .ojillo{color:var(--azul)}
.punto{background:var(--verde);box-shadow:0 0 0 4px rgba(0,191,99,.2)}
.migas a{color:var(--azul)}
.hero .chip,.sub-hero .chip{background:var(--blanco);border-color:rgba(11,30,66,.16);
  color:var(--carbon-2);box-shadow:var(--elev-clara)}
.hero .chip b,.sub-hero .chip b{color:var(--carbon);font-weight:700}
.brillo{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--azul);animation:none}
.subraya::after{background:var(--verde);height:7px;bottom:0;border-radius:4px;box-shadow:none}

/* tarjetas dentro de bloques claros */
.oscuro .dolor,.oscuro .tarjeta,.oscuro .faq-item,.oscuro .caso{
  background:var(--blanco);border-color:rgba(11,30,66,.12);box-shadow:var(--elev-clara);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.oscuro .dolor q,.oscuro .tarjeta h3,.oscuro .paso h3,.oscuro .hito h3,.oscuro .faq-q{color:var(--carbon)}
.oscuro .dolor small,.oscuro .paso p,.oscuro .hito p,.oscuro .faq-a p,.oscuro .tarjeta .lista li{color:var(--carbon-2)}
.oscuro .paso,.oscuro .hito{border-top-color:rgba(11,30,66,.14)}
.oscuro .paso:last-child,.oscuro .hito:last-child{border-bottom-color:rgba(11,30,66,.14)}
.oscuro .bolita{background:var(--blanco);border-color:rgba(11,30,66,.16);color:var(--azul);
  box-shadow:0 0 0 6px rgba(0,54,216,.06)}
.oscuro .ico{background:rgba(0,54,216,.1);color:var(--azul)}
.oscuro .tarjeta.no{background:var(--gris)}
.oscuro .tarjeta.no .ico{background:rgba(50,50,50,.1);color:var(--carbon-2)}
.oscuro .faq-item.abierta{border-color:var(--azul)}
.oscuro .faq-q svg{color:var(--azul)}
.oscuro .aurora,.hero .aurora,.sub-hero .aurora{opacity:.16}

/* calculadora: panel marino sobre sección clara, se queda oscuro */
.calc{background:linear-gradient(155deg,var(--marino-700),var(--marino-900));
  border-color:transparent;color:#FFFFFF;box-shadow:0 30px 60px -30px rgba(11,30,66,.6)}
.calc::before{background:radial-gradient(60% 70% at 95% -5%,rgba(0,54,216,.5),transparent 68%)}
.calc::after{display:none}
.calc h2,.calc .ojillo,.panel .ojillo{color:#FFFFFF}
.calc .ojillo,.panel .ojillo{color:var(--txt-claro-3)}
.calc p{color:var(--txt-claro-2)}
.cifra{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--verde)}
.panel{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.caja{background:rgba(0,0,0,.26);border-color:rgba(255,255,255,.22)}
.campo label{color:var(--txt-claro-3)}
.calc .btn-p{background:var(--verde);color:#FFFFFF}

/* contacto: sección clara con ficha blanca */
#contacto .datos dt{color:var(--carbon-2)}
#contacto .datos dd,#contacto .datos a{color:var(--carbon)}
#contacto .datos a{border-bottom-color:rgba(11,30,66,.2)}
.ficha{background:var(--blanco);border-color:rgba(11,30,66,.12);box-shadow:var(--elev-clara);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.ficha .f-campo label{color:var(--carbon-2)}
.ficha .f-campo input,.ficha .f-campo select,.ficha .f-campo textarea{
  background:var(--gris);border-color:rgba(11,30,66,.16);color:var(--carbon)}
.ficha .privacidad{color:var(--carbon-2)}
.ficha .privacidad a{color:var(--azul)}
.f-campo :focus,.caja:focus-within{border-color:var(--azul);box-shadow:0 0 0 4px rgba(0,54,216,.14)}

/* ════════ BLOQUES MARINO ════════
   servicios, entregables, giros y otros servicios */
section{background:var(--marino);color:#FFFFFF}
section.claro{background:var(--marino-700);color:#FFFFFF}
section:not(.oscuro):not(.hero):not(.sub-hero):not(.centro) .cabeza h2,
section.claro h2,section.claro h3{color:#FFFFFF}
section.claro p,section.claro .cabeza>p:last-child{color:var(--txt-claro-2)}
section.claro .ojillo{color:var(--txt-claro-3)}

.svc,.ent,.art,.otro,.nota-card{background:var(--vidrio);border-color:rgba(255,255,255,.18);
  box-shadow:none;color:#FFFFFF;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.svc::after,.ent::after{display:none}
.svc h3,.ent h3,.art h3,.otro h3{color:#FFFFFF}
.svc p,.ent p,.art .ex,.otro span{color:var(--txt-claro-2)}
.svc .num,.ent .n{color:var(--verde);opacity:1}
.svc .mas{color:var(--verde)}
.svc::before{background:radial-gradient(240px circle at var(--cx,50%) var(--cy,50%),rgba(255,255,255,.1),transparent 62%)}
.svc:hover,.otro:hover,.art:hover{border-color:var(--verde)}
.svc.destacada{background:var(--blanco);border-color:transparent;box-shadow:var(--elev-clara)}
.svc.destacada h3{color:var(--carbon)}
.svc.destacada p{color:var(--carbon-2)}
.svc.destacada .num,.svc.destacada .mas{color:var(--azul)}
.entregables{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.18)}
.ent:hover{background:rgba(255,255,255,.14)}
section.claro .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:var(--txt-claro-2)}
section.claro .chip b{color:#FFFFFF}

/* ── Cabecera clara ── */
header{background:var(--blanco);border-bottom:1px solid rgba(11,30,66,.1)}
header.pegado{background:var(--blanco);border-bottom-color:rgba(11,30,66,.14);
  box-shadow:0 10px 30px -24px rgba(11,30,66,.5)}
.marca img{display:block;height:38px;width:auto}
@media(max-width:520px){.marca img{height:30px}}
nav.menu a,.disparador,.tel-top{color:var(--carbon-2)}
nav.menu a::after{background:linear-gradient(90deg,var(--azul),transparent)}
.submenu{background:var(--blanco);border-color:rgba(11,30,66,.12);
  box-shadow:0 24px 50px -24px rgba(11,30,66,.45)}
.submenu a{color:var(--carbon-2)}
.submenu a:hover,.submenu a:focus-visible{background:var(--gris);color:var(--carbon)}
.idioma{background:var(--gris);border-color:rgba(11,30,66,.12)}
.idioma .activo{background:var(--azul);color:#FFFFFF}
.idioma a{color:var(--carbon-2)}
@media (hover:hover) and (pointer:fine){
  nav.menu a:hover,.disparador:hover,.tel-top:hover{color:var(--carbon)}
  .idioma a:hover{color:var(--carbon);background:rgba(11,30,66,.07)}
}

/* ── Botones ── */
.btn{font-weight:700;letter-spacing:-.01em;border-radius:10px}
.btn-p{background:var(--azul);color:#FFFFFF;box-shadow:0 10px 26px -16px rgba(0,54,216,.85)}
.btn-f{background:transparent;border-color:rgba(11,30,66,.26);color:var(--carbon)}
.btn-o{background:var(--marino);color:#FFFFFF}
section.claro .btn-p,section:not(.oscuro):not(.hero):not(.sub-hero):not(.centro):not(#contacto):not(#numeros) .btn-p{
  background:var(--blanco);color:var(--marino);box-shadow:0 10px 24px -16px rgba(0,0,0,.6)}
section.claro .btn-f{border-color:rgba(255,255,255,.42);color:#FFFFFF}
@media (hover:hover) and (pointer:fine){
  .btn-p:hover{box-shadow:0 16px 34px -16px rgba(0,54,216,.95)}
}

/* ── Fotografía de encabezado: velo claro ── */
.con-foto{position:relative;overflow:hidden;isolation:isolate}
.foto-fondo{position:absolute;inset:-7%;z-index:0;background-size:cover;background-position:center;
  transform:scale(1.06);will-change:transform;filter:saturate(.92) brightness(1.02)}
/* El velo es lo único que hace legible el texto sobre la fotografía: el auditor
   de contraste no evalúa imágenes. Cualquier cambio aquí se mide con el guion
   que compara el color del texto contra el píxel más oscuro que le queda detrás. */
.velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(95deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.87) 34%,rgba(255,255,255,.54) 60%,rgba(243,243,243,.18) 100%),
  linear-gradient(180deg,rgba(255,255,255,.84) 0%,transparent 26%,transparent 60%,rgba(255,255,255,.9) 100%)}
/* En una columna el texto ocupa todo el ancho, así que el lado transparente del
   degradado horizontal le quedaría justo detrás: ahí el velo se vuelve parejo. */
@media(max-width:860px){
  .velo{background:
    linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.8) 45%,rgba(255,255,255,.9) 100%)}
}
.con-foto .env,.con-foto .env-ilustrado{position:relative;z-index:3}
/* Sobre fotografía el gris secundario no alcanza: la bajada usa el carbón principal. */
.con-foto .bajada{color:var(--carbon)}
.con-foto .aurora{z-index:2;opacity:.12}
.con-foto .ilustra-hero{display:none}
@media(max-width:820px){
  .foto-fondo{background-position:62% 50%}
  .velo{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.9))}
}

/* ── Halos ── */
.glob{filter:blur(90px)}
.g1{background:radial-gradient(circle,rgba(0,54,216,.45),transparent 68%)}
.g2{background:radial-gradient(circle,rgba(0,191,99,.3),transparent 68%)}
.g3{background:radial-gradient(circle,rgba(0,54,216,.26),transparent 66%)}
section.claro .aurora{opacity:.45;mix-blend-mode:screen}

/* ── Ilustraciones ── */
.ilustra{display:block;width:100%;height:auto;max-width:420px;margin-inline:auto}
.env-ilustrado{display:grid;gap:2rem;align-items:center}
@media(min-width:980px){.env-ilustrado{grid-template-columns:1fr .55fr;gap:3.5rem}}
@media(max-width:979px){.ilustra-hero{display:none}}


/* ── Verde: solo texto grande en negrita (#00BF63 da 2.1:1 sobre blanco) ── */
.destaque{color:var(--verde-osc);font-weight:800}
section.claro .destaque,.calc .destaque{color:var(--verde)}

/* ── Avisos de pendiente ── */
.etiqueta-p,.mini-p{background:var(--naranja);color:#FFFFFF}
.hueco{background:rgba(237,76,3,.14);border-bottom-color:var(--naranja);color:#A83302}
section.claro .hueco,.calc .hueco{color:#FFD9C4;background:rgba(237,76,3,.3)}
.pendiente{border-color:rgba(237,76,3,.5);background:rgba(237,76,3,.07)}
.pendiente p{color:var(--carbon-2)}
section.claro .pendiente p{color:var(--txt-claro-2)}

/* ── Retrato y legales ── */
.retrato{border-color:rgba(11,30,66,.12)}
.bio h2{color:#FFFFFF}
.legal h2{color:#FFFFFF}
.legal p,.legal ul{color:var(--txt-claro-2)}
.oscuro .legal h2{color:var(--carbon)}
.oscuro .legal p,.oscuro .legal ul{color:var(--carbon-2)}
.sello{color:var(--azul);border-color:rgba(0,54,216,.4);background:var(--gris)}

/* ── Pie ── */
footer{background:var(--marino-900);color:rgba(255,255,255,.75);border-top:0}
footer::before{background:linear-gradient(90deg,transparent,var(--azul),var(--verde),transparent)}
footer h4{color:rgba(255,255,255,.55)}

#prog{background:linear-gradient(90deg,var(--azul),var(--verde))}

/* ── Botón flotante ── */
.f-op{background:rgba(255,255,255,.96);border-color:rgba(11,30,66,.14);color:var(--carbon);
  box-shadow:var(--elev-clara)}
.f-toggle{background:var(--azul);color:#FFFFFF;border-color:transparent;
  box-shadow:0 14px 30px -14px rgba(0,54,216,.9)}

/* ── Correcciones de contraste heredadas del esquema anterior ── */
.tiene-sub.abierto .disparador{color:var(--carbon)}
.migas a:hover{color:var(--carbon)}
.hero .datos a,.sub-hero .datos a,#contacto .datos a{color:var(--carbon)}
.centro .ojillo{color:var(--azul)}
.centro h1,.centro p{color:var(--carbon)}
.centro .btn-f{border-color:rgba(11,30,66,.26);color:var(--carbon)}
#numeros,#contacto{background:var(--gris)}
#contacto .aurora,#numeros .aurora{opacity:.14}
.caso-rel{background:var(--blanco);border-color:rgba(11,30,66,.12);box-shadow:var(--elev-clara)}
.caso-rel h2{color:var(--carbon)}
.caso-rel .txt p{color:var(--carbon-2)}
.oscuro .caso .cuerpo h3{color:var(--carbon)}
.oscuro .caso .res{color:var(--carbon-2)}

/* ════════ MENÚ MÓVIL ════════ */
.hamburguesa{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  padding:11px 9px;flex:none;border-radius:10px}
.hamburguesa span{display:block;height:2px;border-radius:2px;background:var(--carbon);
  transition:transform var(--medio) var(--salida),opacity var(--rapido) var(--salida)}
.hamburguesa span+span{margin-top:5px}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hamburguesa:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

.menu-movil{position:fixed;left:0;right:0;z-index:55;
  top:calc(74px + env(safe-area-inset-top,0px));
  height:calc(100dvh - 74px - env(safe-area-inset-top,0px));
  background:var(--blanco);overflow-y:auto;overscroll-behavior:contain;
  padding:1.6rem 0 calc(2rem + env(safe-area-inset-bottom,0px));
  opacity:0;transform:translateY(-10px);pointer-events:none;visibility:hidden;
  transition:opacity var(--medio) var(--salida),transform var(--medio) var(--salida),visibility 0s linear var(--medio)}
.menu-movil.abierto{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
body.menu-abierto{overflow:hidden}
.mm-titulo{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--azul);margin:1.8rem 0 .3rem}
.mm-titulo:first-child{margin-top:0}
.mm-lista{list-style:none;margin:0;padding:0}
.mm-lista li+li{border-top:1px solid rgba(11,30,66,.1)}
.mm-lista a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 0;text-decoration:none;color:var(--carbon);font-size:1.1rem;font-weight:600;
  letter-spacing:-.02em}
.mm-lista a::after{content:"→";color:var(--azul);opacity:.5;font-weight:400}
.mm-lista a:active{color:var(--azul)}
.mm-pie{display:grid;gap:.7rem;margin-top:2rem;padding-top:1.6rem;
  border-top:1px solid rgba(11,30,66,.12)}
.mm-pie .btn{width:100%}
.mm-pie .idioma{justify-self:start;margin-top:.4rem}

@media(max-width:919px){
  .hamburguesa{display:block}
  .cta-cab{display:none}
  .acciones{gap:.35rem}
}
@media(min-width:920px){
  .menu-movil{display:none}
}

/* ── Ilustraciones de marca del cliente ── */
/* Las ilustraciones son transparentes: nunca llevan caja de fondo */
.ilustra{display:block;width:100%;height:auto;max-width:380px;margin-inline:auto}
.ilustra img{display:block;width:100%;height:auto}

/* ── Ilustración montada sobre el cambio de color ──
   Cuelga del borde inferior de una sección clara y baja sobre la oscura que sigue.
   La sección anfitriona deja de recortar y se pinta por encima de la siguiente.
   El contorno blanco de sticker viene troquelado en la propia imagen, no de CSS:
   es lo que mantiene legible la parte de la figura que cae sobre el azul marino. */
.con-division{position:relative;z-index:2;overflow:visible;
  padding-bottom:clamp(5.5rem,10vw,9rem)}

.ilus-div{position:absolute;bottom:0;width:var(--w);max-width:30vw;
  transform:translateY(18%);pointer-events:none;z-index:3}
.ilus-der{right:max(1.25rem,calc((100% - min(1160px,100% - 2.5rem)) / 2))}
.ilus-izq{left:max(1.25rem,calc((100% - min(1160px,100% - 2.5rem)) / 2))}

/* el sticker se despega apenas de la superficie */
.ilustra-div{max-width:none;margin:0}
.ilustra-div img{filter:drop-shadow(0 3px 7px rgba(11,30,66,.22))}

/* ── Ilustración grande al lado del título ── */
.cab-ilus{display:grid;gap:1.8rem;align-items:center;
  margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.cab-ilus>.cabeza{margin-bottom:0;max-width:none}
.cab-ilus>.cabeza>p:last-child{max-width:44ch}
.ci-fig{width:var(--w);max-width:min(100%,62vw);justify-self:center}
.ilustra-grande{max-width:none;margin:0}
.ilustra-grande img{filter:drop-shadow(0 4px 10px rgba(11,30,66,.18))}
@media(min-width:900px){
  .cab-ilus{grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,5vw,4rem)}
  .ci-fig{justify-self:end}
}
@media(max-width:899px){.ci-fig{width:min(var(--w),64vw)}}

/* ── Sticker suelto, anclado a una tarjeta o a un panel ── */
.ilus-suelta{position:absolute;width:var(--w);max-width:30vw;
  pointer-events:none;z-index:4}

/* La figura se apoya en el borde superior de la tarjeta «¿No sabes cuál necesitas?»,
   en el hueco que deja la última fila de servicios. Con una sola columna ese hueco
   no existe y la figura taparía la tarjeta de arriba: se oculta. */
.svc-ayuda{grid-column:1/-1;position:relative}
.ilus-ayuda{right:clamp(1rem,7vw,5rem);bottom:calc(100% - 2.2rem);display:none}
@media(min-width:720px){.ilus-ayuda{display:block}}

/* La figura se apoya en el borde izquierdo del panel de la banda de cierre.
   Debajo de 1180 px el panel ocupa todo el ancho y ya no hay sitio: se oculta. */
.banda-cierre{position:relative;overflow:visible}
.banda-cierre .env{position:relative}
.ilus-banda{left:-2.5rem;bottom:-1.2rem;display:none}
@media(min-width:1180px){.ilus-banda{display:block}}
.ilus-suelta.rev{opacity:0;transform:translateY(16px)}
.ilus-suelta.rev.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ilus-suelta.rev{opacity:1;transform:none}}

/* En pantallas angostas las tarjetas llegan casi al borde: la figura se encoge y
   cruza más, para quedar debajo del contenido y no encima. */
@media(max-width:860px){
  .con-division{padding-bottom:7rem}
  .ilus-div{width:min(112px,30vw);transform:translateY(40%)}
  .ilus-der{right:.7rem}
  .ilus-izq{left:.7rem}
}
/* Entra con el mismo observador que el resto (.rev → .visible), pero conserva
   siempre su desplazamiento: sin él deja de montarse sobre la división. */
.ilus-div.rev{opacity:0;transform:translateY(26%)}
.ilus-div.rev.visible{opacity:1;transform:translateY(18%)}
@media(max-width:860px){
  .ilus-div.rev{transform:translateY(48%)}
  .ilus-div.rev.visible{transform:translateY(40%)}
}
@media(prefers-reduced-motion:reduce){
  .ilus-div.rev{opacity:1;transform:translateY(18%)}
  @media(max-width:860px){.ilus-div.rev{transform:translateY(40%)}}
}

/* ════════ LOGOTIPOS DE CLIENTE ════════ */
.logo-cliente{display:block;width:100%;max-width:220px}
.logo-cliente img{display:block;width:100%;height:auto;object-fit:contain}

/* franja del inicio */
.franja-logos{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  position:relative;z-index:3}
.fl-item{display:grid;place-items:center;padding:1.1rem 1.6rem;border-radius:16px;
  background:var(--blanco);border:1px solid rgba(11,30,66,.1);text-decoration:none;
  box-shadow:var(--elev-clara);flex:1 1 220px;max-width:300px;
  transition:transform var(--medio) var(--salida),border-color var(--medio) var(--salida)}
@media (hover:hover) and (pointer:fine){
  .fl-item:hover{transform:translateY(-3px);border-color:var(--azul)}
}

/* fichas de caso */
.fichas{display:grid;gap:1.2rem}
@media(min-width:820px){.fichas{grid-template-columns:repeat(2,1fr)}}
.ficha-caso{background:var(--blanco);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r);padding:1.7rem 1.6rem 1.5rem;display:flex;flex-direction:column;gap:1.2rem;
  box-shadow:0 20px 44px -28px rgba(11,30,66,.5)}
.fc-cab{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding-bottom:1.1rem;border-bottom:1px solid rgba(11,30,66,.12)}
.fc-cab .logo-cliente{max-width:150px;flex:none}
.fc-cab h3{font-size:1.3rem;color:var(--carbon);margin:0}
.fc-sector{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--azul);margin:0 0 .2rem}
.fc-datos{margin:0;display:grid;gap:.9rem}
.fc-datos dt{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--carbon-2);margin-bottom:.2rem}
.fc-datos dd{margin:0;font-size:.95rem;color:var(--carbon)}
@media(max-width:519px){
  .fc-cab{gap:.9rem}
  .fc-cab .logo-cliente{max-width:120px}
}

/* ════════════════════════════════════════════════════════════
   CORRECCIONES DE CONTRASTE
   Resultado de auditar el contraste real calculado en el
   navegador, página por página. No tocar sin volver a auditar.
   ════════════════════════════════════════════════════════════ */

/* 1. La bajada de cada cabeza heredaba blanco por especificidad.
      Que el color lo decida siempre la sección, no el componente. */
.cabeza>p:last-child{color:inherit;opacity:.78}
.oscuro .cabeza>p:last-child,.hero .cabeza>p:last-child,
.sub-hero .cabeza>p:last-child,#numeros .cabeza>p:last-child,
#contacto .cabeza>p:last-child{color:var(--carbon);opacity:.72}
section.claro .cabeza>p:last-child,.calc .cabeza>p:last-child{color:#FFFFFF;opacity:.82}

/* 2. Fichas de caso: tarjeta blanca dentro de una sección marino.
      La especificidad tiene que superar a `section.claro h3`. */
.fichas .ficha-caso{color:var(--carbon)}
.fichas .ficha-caso h3,.fichas .ficha-caso dd{color:var(--carbon)}
.fichas .ficha-caso dt{color:var(--carbon-2)}
.fichas .ficha-caso .fc-sector{color:var(--azul)}

/* 3. Cifras de Nosotros sobre marino: el azul de marca no contrasta ahí */
section.claro .dato .n,.calc .dato .n{color:var(--verde)}
section.claro .dato small,.calc .dato small{color:var(--txt-claro-2)}

/* 4. Años de la trayectoria sobre gris claro */
.oscuro .anio-h,#numeros .anio-h{color:var(--azul)}

/* 5. Botón verde: el blanco encima da 2.4:1. Texto oscuro lo lleva a 7:1 */
.btn-p,.calc .btn-p,#contacto .btn-p{color:#FFFFFF}
.calc .btn-p,#contacto .btn-p,.banda .btn-p{background:var(--verde-osc)}

/* 6. Etiqueta de pendiente: naranja más oscuro para que el blanco pase */
.etiqueta-p,.mini-p{background:#C03D02}

/* 7. Entradillas: el color lo pone la sección, no el elemento */
.entradilla{margin-top:1.1rem;color:inherit;opacity:.78}
section.claro .entradilla,.calc .entradilla{color:#FFFFFF;opacity:.84}
.fecha-art{font-size:.8rem;color:inherit;opacity:.6}

/* 8. Botón de contorno sobre bloques marino (banda de cierre, calculadora) */
.calc .btn-f,section.claro .btn-f,.oscuro .calc .btn-f{
  border-color:rgba(255,255,255,.45);color:#FFFFFF;background:transparent}
@media (hover:hover) and (pointer:fine){
  .calc .btn-f:hover,section.claro .btn-f:hover{border-color:#FFFFFF;background:rgba(255,255,255,.1)}
}

/* Enlace de la ficha al servicio que resolvió el caso */
.fichas .fc-servicio{margin:0}
.fichas .fc-servicio a{display:inline-flex;align-items:center;gap:.4rem;
  font-size:.86rem;font-weight:600;text-decoration:none;color:var(--azul)}
@media (hover:hover) and (pointer:fine){
  .fichas .fc-servicio a:hover .flecha{transform:translateX(4px)}
}
/* tres fichas: que la rejilla respire */
@media(min-width:1040px){.fichas{grid-template-columns:repeat(3,1fr)}}

/* 9. Chips sobre fondo claro (la sección de giros pasó a gris) */
.oscuro .chip,#numeros .chip{background:var(--blanco);border-color:rgba(11,30,66,.14);
  color:var(--carbon-2);box-shadow:var(--elev-clara)}
.oscuro .chip b,#numeros .chip b{color:var(--carbon)}

/* 10. El enlace de servicio de la ficha vive en tarjeta blanca */
.fichas .ficha-caso .fc-servicio{color:var(--carbon)}

/* ════════════════════════════════════════════════════════════
   SERVICIO DESTACADO Y CATÁLOGO DE FORMACIÓN
   Capacitación encabeza la lista y se distingue del resto:
   tarjeta ancha, acento verde y las cuatro familias a la vista.
   ════════════════════════════════════════════════════════════ */

.svc.estrella{border-color:rgba(0,112,58,.35);box-shadow:0 2px 4px rgba(34,50,74,.06),0 20px 44px -26px rgba(0,112,58,.55)}
@media(min-width:720px){.svc.estrella{grid-column:span 2}}
.svc.estrella::after{background:linear-gradient(90deg,transparent,var(--verde),transparent)}
.svc.estrella .num{color:var(--verde-osc)}
.svc.estrella .mas{color:var(--verde-osc);font-weight:600}

.insignia{position:absolute;top:1.5rem;right:1.4rem;
  background:var(--verde-osc);color:#FFFFFF;border-radius:999px;
  padding:.3rem .75rem;font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.3}

/* las cuatro familias, listadas dentro de la tarjeta destacada */
.estrella-fam{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.4rem}
@media(min-width:560px){.estrella-fam{grid-template-columns:1fr 1fr;gap:.4rem 1.4rem}}
.estrella-fam a{font-size:.88rem;color:var(--txt-osc-2);text-decoration:none;
  display:inline-flex;align-items:center;gap:.45rem;
  transition:color var(--medio) var(--salida)}
.estrella-fam a::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--verde-osc);flex:none}
@media (hover:hover) and (pointer:fine){.estrella-fam a:hover{color:var(--verde-osc)}}

/* ── Familias del catálogo ── */
.familias{display:grid;gap:1.1rem;position:relative;z-index:3}
@media(min-width:760px){.familias{grid-template-columns:1fr 1fr}}
.fam{border-radius:var(--r);padding:1.7rem 1.6rem 1.5rem;
  background:linear-gradient(170deg,#FFFFFF,#F4F9FC);
  border:1px solid rgba(34,50,74,.1);box-shadow:var(--elev-clara);
  display:flex;flex-direction:column;gap:.6rem;
  transition:transform var(--medio) var(--salida),box-shadow var(--medio) var(--salida)}
.fam-corto{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--verde-osc)}
.fam h3{font-size:1.32rem;line-height:1.22}
.fam h3 a{color:inherit;text-decoration:none}
.fam-lista{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.35rem}
.fam-lista li{font-size:.88rem;padding-left:1rem;position:relative}
.fam-lista li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--verde-osc)}
.fam .mas{margin-top:auto;padding-top:1.2rem;font-size:.84rem;font-weight:600;
  display:flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--verde-osc)}
@media (hover:hover) and (pointer:fine){
  .fam:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(34,50,74,.06),0 26px 50px -24px rgba(34,50,74,.5)}
  .fam:hover .flecha{transform:translateX(5px)}}

/* ── Temario de cada familia ── */
.programas{display:grid;gap:1px;background:rgba(34,50,74,.12);
  border:1px solid rgba(34,50,74,.12);border-radius:var(--r);overflow:hidden;
  position:relative;z-index:3}
@media(min-width:800px){.programas{grid-template-columns:1fr 1fr}}
.prog{background:linear-gradient(170deg,#FFFFFF,#F4F9FC);padding:1.6rem 1.5rem;
  transition:background var(--medio) var(--salida)}
.prog h3{font-size:1.14rem;margin-bottom:.4rem}
.prog p{font-size:.9rem}
@media (hover:hover) and (pointer:fine){.prog:hover{background:#FFFFFF}}

/* enlace de capacitación en el menú */
.nav-destacado{position:relative}
.nav-destacado::after{content:"";position:absolute;left:0;right:0;bottom:-.35rem;
  height:2px;border-radius:2px;background:var(--verde-osc);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--medio) var(--salida)}
@media (hover:hover) and (pointer:fine){.nav-destacado:hover::after{transform:scaleX(1)}}

/* familias bajo capacitación en el menú móvil */
.mm-sub{list-style:none;margin:.35rem 0 .6rem;padding:0 0 0 1rem;
  display:grid;gap:.3rem;border-left:2px solid rgba(0,112,58,.3)}
.mm-sub a{font-size:.9rem;color:var(--carbon-2)}

/* ── Correcciones de contraste del bloque anterior ──
   Igual que con las fichas de caso: el color lo decide la sección, no el componente.
   La tarjeta destacada vive sobre marino, así que ahí va el verde claro;
   las tarjetas de temario son blancas sobre marino y necesitan ganarle a
   `section.claro h3`, que si no las deja en blanco sobre blanco. */
section.claro .svc.estrella .num,
section.claro .svc.estrella .mas{color:var(--verde)}
section.claro .svc.estrella{border-color:rgba(0,191,99,.45)}
section.claro .estrella-fam a{color:var(--txt-claro-2)}
section.claro .estrella-fam a::before{background:var(--verde)}
@media (hover:hover) and (pointer:fine){
  section.claro .estrella-fam a:hover{color:var(--verde)}}

.programas .prog h3{color:var(--carbon)}
.programas .prog p{color:var(--carbon-2)}

.familias .fam h3,.familias .fam h3 a{color:var(--carbon)}
.familias .fam-lista li{color:var(--carbon-2)}

/* beneficios clave (hoy solo en expansión) */
.beneficios{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;position:relative;z-index:3}
.ben{background:rgba(0,191,99,.16);border:1px solid rgba(0,191,99,.4);
  border-radius:999px;padding:.6rem 1.1rem;font-size:.88rem;font-weight:500}
section.claro .ben{color:#FFFFFF}
.oscuro .ben{background:rgba(0,112,58,.1);border-color:rgba(0,112,58,.3);color:var(--carbon)}

/* Las tarjetas de «otras familias» viven sobre gris, no sobre marino como en
   las páginas de servicio. La regla del tema las dejaba en blanco sobre claro. */
.oscuro .otro{background:#FFFFFF;border-color:rgba(34,50,74,.12);box-shadow:var(--elev-clara)}
.oscuro .otro h3{color:var(--carbon)}
.oscuro .otro p,.oscuro .otro span{color:var(--carbon-2)}
.oscuro .otro .flecha{color:var(--verde-osc)}
@media (hover:hover) and (pointer:fine){
  .oscuro .otro:hover{border-color:rgba(0,112,58,.45)}}