/* ============ Verité Poligrafía — prototipo de rediseño ============ */
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url(assets/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url(assets/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url(assets/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url(assets/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:800;font-display:swap;src:url(assets/fonts/poppins-800.woff2) format("woff2")}

:root{
  --navy-950:#060927;--navy-900:#0a0f35;--navy-800:#111850;--navy-700:#1b2064;
  --blue:#1a4096;--blue-soft:#2f5bc0;
  --gold:#fccb00;--gold-2:#e8b400;--gold-soft:#fff3c2;
  --ink:#0d1030;--muted:#5a6183;--paper:#f4f6fb;--white:#fff;--line:#e3e7f2;
  --wa:#25d366;--wa-dark:#1da851;
  --r:20px;--r-sm:12px;
  --shadow:0 18px 50px -18px rgba(13,16,48,.35);
  --shadow-sm:0 8px 24px -12px rgba(13,16,48,.25);
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--white);line-height:1.6;font-size:16px;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-fill{fill:currentColor;stroke:none}
section{scroll-margin-top:84px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Progreso de scroll ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;background:transparent}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#fff3a8)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:.95rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s;position:relative;overflow:hidden;white-space:nowrap}
.btn .ic{font-size:1.15em}
.btn-gold{background:var(--gold);color:var(--navy-950);box-shadow:0 10px 30px -10px rgba(252,203,0,.7)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 34px -10px rgba(252,203,0,.85);background:#ffd51f}
.btn-wa{background:var(--wa);color:var(--navy-950);box-shadow:0 10px 30px -10px rgba(37,211,102,.7)}
.btn-wa:hover{transform:translateY(-3px);background:var(--wa-dark)}
.btn-line{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.btn-line:hover{background:#fff;color:var(--navy-900);transform:translateY(-3px)}
.btn-dark{background:var(--navy-800);color:#fff}
.btn-dark:hover{background:var(--blue);transform:translateY(-3px)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover::after{transform:translateX(120%)}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;padding:18px 0;transition:background .4s,padding .4s,box-shadow .4s,backdrop-filter .4s}
.hdr.stuck{background:rgba(8,12,42,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:10px 0;box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
/* Causa real del menú móvil incompleto tras hacer scroll: #nav es descendiente de .hdr y
   usa position:fixed;inset:0 para cubrir toda la pantalla al abrirse. Un backdrop-filter
   distinto de "none" convierte a su elemento en el contenedor de referencia de sus
   descendientes fixed (especificación CSS) — así que en vez de taparse contra el viewport,
   #nav quedaba encerrado dentro de la caja de .hdr (solo ~130px de alto), y el resto del
   menú se recortaba por el overflow-y:auto de abajo, dejando ver la página real detrás.
   Esto solo ocurre con .stuck (scrollY > 40), por eso funcionaba bien arriba del todo.
   Se desactiva el backdrop-filter mientras el menú está abierto para que #nav vuelva a
   posicionarse correctamente contra el viewport completo. */
body.menu-open .hdr.stuck{backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:54px;width:auto;transition:height .4s}
.hdr.stuck .brand img{height:44px}
.nav{display:flex;gap:6px;align-items:center}
.nav a.lnk{color:rgba(255,255,255,.82);font-size:.88rem;font-weight:500;padding:9px 14px;border-radius:999px;position:relative;transition:color .3s}
.nav a.lnk::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a.lnk:hover,.nav a.lnk.on{color:#fff}
.nav a.lnk:hover::after,.nav a.lnk.on::after{transform:scaleX(1)}
.hdr-cta{display:flex;align-items:center;gap:10px}
.hdr .btn{padding:11px 20px;font-size:.85rem}
.burger{display:none;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.1);place-items:center;color:#fff}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),background .3s;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-7px}.burger span::after{top:7px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(7px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;background:radial-gradient(1200px 600px at 78% 18%,rgba(47,91,192,.5),transparent 60%),radial-gradient(800px 500px at 8% 90%,rgba(252,203,0,.10),transparent 60%),linear-gradient(180deg,var(--navy-900),var(--navy-950));color:#fff;padding:150px 0 190px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%);animation:gridMove 18s linear infinite;z-index:-1}
@keyframes gridMove{to{background-position:56px 56px,56px 56px}}
.orb{position:absolute;border-radius:50%;border:2px solid rgba(252,203,0,.25);z-index:-1;will-change:transform}
.orb.a{width:520px;height:520px;right:-140px;top:-120px;border-color:rgba(252,203,0,.35);border-width:3px}
.orb.b{width:260px;height:260px;left:-90px;bottom:70px;border-color:rgba(255,255,255,.12)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.seg{display:inline-flex;padding:5px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);margin-bottom:26px;position:relative}
.seg button{position:relative;z-index:1;padding:9px 22px;border-radius:999px;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.75);transition:color .3s}
.seg button.on{color:var(--navy-950)}
.seg .pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:var(--gold);border-radius:999px;transition:transform .5s var(--ease)}
.seg[data-mode="fam"] .pill{transform:translateX(100%)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor}
.hero h1{font-size:clamp(2.1rem,4.3vw,3.5rem);line-height:1.06;font-weight:700;letter-spacing:-.02em;margin:18px 0 22px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.lead{font-size:1.1rem;color:rgba(255,255,255,.78);max-width:540px}
.swap{transition:opacity .35s,transform .45s var(--ease)}
.swap.out{opacity:0;transform:translateY(14px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:.8rem;color:rgba(255,255,255,.85)}
.chip .ic{color:var(--gold)}
.scope{position:relative;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);transform:perspective(1000px) rotateY(-6deg) rotateX(2deg);transition:transform .6s var(--ease)}
.scope:hover{transform:perspective(1000px) rotateY(0) rotateX(0)}
.scope-top{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:rgba(255,255,255,.7);margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase}
.rec{display:inline-flex;align-items:center;gap:8px}
.rec i{width:9px;height:9px;border-radius:50%;background:#ff4d4d;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.scope canvas{width:100%;height:270px;display:block;border-radius:14px;background:rgba(4,7,30,.65)}
.scope-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.scope-foot div{background:rgba(255,255,255,.06);border-radius:12px;padding:10px 12px;font-size:.72rem;color:rgba(255,255,255,.65)}
.scope-foot b{display:block;font-size:1.05rem;color:#fff;font-weight:600}
.float{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:#fff;color:var(--ink);box-shadow:var(--shadow);font-size:.8rem;line-height:1.25;animation:floaty 5s ease-in-out infinite}
.float b{display:block;font-size:.95rem}
.float .bub{width:38px;height:38px;border-radius:12px;background:var(--gold);display:grid;place-items:center;color:var(--navy-950);font-size:1.1rem}
.float.f1{left:36px;bottom:-78px}
.float.f2{right:-12px;top:-22px;animation-delay:-2.4s}
@keyframes floaty{50%{transform:translateY(-12px)}}

/* Barra de solicitud (estilo reserva) */
.book{position:relative;z-index:5;margin-top:-84px}
.book form{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:22px;display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:14px;align-items:end}
.book h2{grid-column:1/-1;font-size:1rem;font-weight:600;display:flex;align-items:center;gap:10px;color:var(--navy-800)}
.book h2 .ic{color:var(--gold-2);font-size:1.3rem}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fld input,.fld select,.fld textarea{padding:14px 16px;border-radius:14px;border:1.5px solid rgba(13,16,48,.48);background:var(--paper);outline:0;transition:border-color .3s,box-shadow .3s,background .3s;width:100%}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:rgba(13,16,48,.62)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(26,64,150,.12)}
.fld textarea{resize:vertical;min-height:110px}
.fld-error{color:#b3261e;font-size:.82rem;font-weight:600}
.fld input[aria-invalid="true"]{border-color:#b3261e}

/* ---------- Marquesina ---------- */
.mq-wrap{overflow:hidden;padding:34px 0 26px;margin-top:40px}
.marquee{background:var(--gold);color:var(--navy-950);overflow:hidden;transform:rotate(-1.2deg) scale(1.03);box-shadow:0 12px 30px -16px rgba(0,0,0,.4)}
.mq-track{display:flex;width:max-content;animation:mq 34s linear infinite}
.mq-track span{display:inline-flex;align-items:center;gap:26px;padding:16px 26px 16px 0;font-weight:700;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.mq-track .ic{font-size:1.3rem}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Secciones genéricas ---------- */
.sec{padding:clamp(70px,9vw,120px) 0;position:relative}
.sec.paper{background:var(--paper)}
.sec.dark{background:linear-gradient(180deg,var(--navy-900),var(--navy-950));color:#fff;overflow:hidden}
.head{max-width:680px;margin-bottom:clamp(36px,5vw,64px)}
.head.center{margin-inline:auto;text-align:center}
.head.center .eyebrow{justify-content:center}
.eyebrow.dk{color:var(--blue)}
.eyebrow.dk::before{background:var(--gold-2)}
.h2{font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.12;font-weight:700;letter-spacing:-.015em;margin:14px 0 16px}
.h2 em{font-style:normal;color:var(--blue);position:relative}
.dark .h2 em{color:var(--gold)}
.sub{color:var(--muted);font-size:1.05rem}
.dark .sub{color:rgba(255,255,255,.72)}

/* Estadísticas */
.stats{padding:64px 0 10px;background:var(--white)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{padding:26px 24px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s}
.stat:hover{transform:translateY(-8px);box-shadow:var(--shadow);background:#fff}
.stat::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--gold);transition:width .6s var(--ease)}
.stat:hover::before{width:100%}
.stat .num{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;line-height:1;color:var(--navy-800);letter-spacing:-.02em}
.stat .num small{font-size:.5em;font-weight:700;color:var(--blue);margin-left:4px}
.stat p{margin-top:10px;color:var(--muted);font-size:.9rem;line-height:1.4}
.stat .stars{color:var(--gold-2);display:flex;gap:2px;margin-top:8px;font-size:1rem}

/* Nosotros */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,80px);align-items:center}
.vis{position:relative;aspect-ratio:1/1.02;border-radius:30px;background:linear-gradient(150deg,var(--navy-700),var(--navy-950));overflow:hidden;box-shadow:var(--shadow);isolation:isolate}
.vis .ringbig{position:absolute;inset:11%;border-radius:50%;border:16px solid transparent;border-top-color:var(--gold);border-right-color:#f2d86a;border-bottom-color:rgba(252,203,0,.15);animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vis svg.beat{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);width:84%;overflow:visible}
.vis svg.beat path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900}
.vis.in svg.beat path{animation:draw 3.2s var(--ease) .3s forwards, glow 3s 3.5s infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes glow{50%{filter:drop-shadow(0 0 12px rgba(252,203,0,.9))}}
.vis .ph{position:absolute;left:18px;right:18px;bottom:18px;border:1.5px dashed rgba(255,255,255,.4);border-radius:14px;padding:12px 14px;font-size:.78rem;color:rgba(255,255,255,.8);background:rgba(6,9,39,.55);backdrop-filter:blur(6px);display:flex;gap:10px;align-items:center}
.vis .ph .ic{color:var(--gold);font-size:1.2rem}
.badge11{position:absolute;right:0;top:26px;background:var(--gold);color:var(--navy-950);padding:16px 20px;border-radius:18px 0 0 18px;font-weight:800;line-height:1.05;text-align:center;box-shadow:var(--shadow);z-index:2}
.badge11 b{display:block;font-size:2rem}
.badge11 span{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.about p{color:var(--muted)}
.about p+p{margin-top:14px}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}
.mv div{padding:20px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line);transition:transform .4s var(--ease),border-color .3s}
.mv div:hover{transform:translateY(-5px);border-color:var(--gold)}
.mv h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.mv p{font-size:.92rem}
.vals{display:flex;flex-wrap:wrap;gap:10px}
.vals span{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--navy-800);color:#fff;font-size:.82rem;font-weight:500;transition:background .3s,color .3s,transform .3s var(--ease)}
.vals span:hover{background:var(--gold);color:var(--navy-950);transform:translateY(-3px)}
.vals .ic{color:var(--gold);font-size:1rem;transition:color .3s}
.vals span:hover .ic{color:var(--navy-950)}

/* Servicios */
/* Subtítulo de categoría: siempre centrado, sin línea lateral — decisión editorial, no depende de cuántas tarjetas tenga el grupo. */
.grp{text-align:center;margin:0 0 22px}
.grp h3{font-size:1.4rem;font-weight:600;color:var(--navy-800)}
.grp:not(:first-of-type){margin-top:52px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Distribución de la GRILLA según la cantidad real de tarjetas (independiente del subtítulo, ver cards_class en build.py):
   exactamente 2 se centran como par; una última fila de exactamente 2 (p. ej. 5 = 3+2) se centra sin estirarlas
   ni afectar el ancho de las filas completas anteriores. */
@media(min-width:1021px){
  .cards--pair{grid-template-columns:repeat(2,calc((100% - 44px)/3));justify-content:center}
  .cards--tailpair{grid-template-columns:repeat(6,1fr)}
  .cards--tailpair>*{grid-column:span 2}
  .cards--tailpair>*:nth-last-child(2){grid-column:2/4}
  .cards--tailpair>*:last-child{grid-column:4/6}
}
.card{position:relative;background:#fff;border-radius:var(--r);padding:30px 28px 26px;border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;transform-style:preserve-3d;will-change:transform}
.card::before{content:"";position:absolute;inset:auto -40% -60% auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(252,203,0,.28),transparent 65%);transition:transform .6s var(--ease)}
.card:hover{box-shadow:var(--shadow);border-color:rgba(252,203,0,.7)}
.card:hover::before{transform:translate(-30px,-30px) scale(1.4)}
.card .ico{width:60px;height:60px;border-radius:18px;background:var(--navy-800);color:var(--gold);display:grid;place-items:center;font-size:1.7rem;transition:transform .5s var(--ease),background .4s,color .4s}
.card:hover .ico{transform:rotate(-8deg) scale(1.08);background:var(--gold);color:var(--navy-950)}
.card h4{font-size:1.15rem;line-height:1.25;font-weight:600}
.card p{color:var(--muted);font-size:.93rem;flex:1}
.card .more{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;color:var(--blue);position:relative;z-index:1;margin-top:4px}
.card .more .ic{transition:transform .35s var(--ease)}
.card:hover .more .ic{transform:translateX(6px)}
.card .tag{position:absolute;top:22px;right:22px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--gold-soft);color:#7a5c00;padding:5px 10px;border-radius:999px}

/* Por qué + proceso */
.dark .orb.c{width:480px;height:480px;left:-160px;top:-140px;border-color:rgba(252,203,0,.14)}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why article{padding:32px 28px;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);transition:transform .5s var(--ease),border-color .4s,background .4s}
.why article:hover{transform:translateY(-8px);border-color:rgba(252,203,0,.6);background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05))}
.why .ic{font-size:2rem;color:var(--gold);margin-bottom:16px}
.why h3{font-size:1.15rem;margin-bottom:8px}
.why p{color:rgba(255,255,255,.72);font-size:.93rem}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(60px,8vw,100px)}
.steps::before,.steps::after{content:"";position:absolute;top:34px;left:12.5%;right:12.5%;height:3px;border-radius:3px}
.steps::before{background:rgba(255,255,255,.14)}
.steps::after{background:linear-gradient(90deg,var(--gold),#fff3a8);transform:scaleX(0);transform-origin:left;transition:transform 2.4s .3s var(--ease)}
.steps.in::after{transform:scaleX(1)}
.step{position:relative;text-align:center;padding:0 8px}
.step .dot{width:68px;height:68px;margin:0 auto 20px;border-radius:50%;background:var(--navy-800);border:3px solid rgba(255,255,255,.2);display:grid;place-items:center;font-weight:800;font-size:1.3rem;color:#fff;position:relative;z-index:1;transition:background .5s,color .5s,border-color .5s,transform .5s var(--ease)}
.steps.in .step .dot{background:var(--gold);color:var(--navy-950);border-color:var(--gold);transform:scale(1)}
.steps .step:nth-child(1) .dot{transition-delay:.3s}.steps .step:nth-child(2) .dot{transition-delay:.9s}.steps .step:nth-child(3) .dot{transition-delay:1.5s}.steps .step:nth-child(4) .dot{transition-delay:2.1s}
.step h4{font-size:1.05rem;margin-bottom:6px}
.step p{font-size:.88rem;color:rgba(255,255,255,.7)}

/* Familias */
.fam{display:grid;grid-template-columns:1.05fr .95fr;border-radius:32px;overflow:hidden;background:linear-gradient(140deg,var(--navy-700),var(--navy-950));color:#fff;box-shadow:var(--shadow)}
.fam .txt{padding:clamp(32px,5vw,64px)}
.fam .txt p{color:rgba(255,255,255,.76);margin:14px 0 24px}
.fam ul{list-style:none;display:grid;gap:12px;margin-bottom:30px}
.fam li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:rgba(255,255,255,.9)}
.fam li .ic{color:var(--gold);margin-top:5px;font-size:1.1rem}
.fam .art{position:relative;min-height:340px;background:radial-gradient(circle at 50% 50%,rgba(252,203,0,.22),transparent 60%);display:grid;place-items:center;overflow:hidden}
.fam .art .house{width:min(260px,70%);color:var(--gold);filter:drop-shadow(0 0 30px rgba(252,203,0,.35));animation:floaty 6s ease-in-out infinite}
.fam .art .house *{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fam .art .ring{position:absolute;border-radius:50%;border:2px solid rgba(252,203,0,.25);animation:pulse 4s ease-out infinite}
.fam .art .ring:nth-child(2){animation-delay:1.3s}.fam .art .ring:nth-child(3){animation-delay:2.6s}
.fam .art .ring{width:200px;height:200px}
@keyframes pulse{from{transform:scale(.6);opacity:.9}to{transform:scale(2.2);opacity:0}}

/* Testimonios */
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:16px;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tcard:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.tcard .q{font-size:3.4rem;line-height:.6;color:var(--gold-2);font-weight:800;height:26px}
.tcard blockquote{color:var(--muted);font-size:.98rem;flex:1}
.tcard.pend blockquote{font-style:italic;color:#8c92ad}
.tcard footer{display:flex;align-items:center;gap:12px;font-size:.85rem}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--paper);border:1.5px dashed #b9c0d8;display:grid;place-items:center;color:#8c92ad}
.tcard footer b{display:block;font-size:.9rem}
.tcard footer span{color:var(--muted);font-size:.78rem}
.tcard.google{background:linear-gradient(160deg,var(--navy-700),var(--navy-950));color:#fff;border-color:transparent;justify-content:center}
.tcard.google .big{font-size:4.2rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.tcard.google .stars{display:flex;gap:4px;color:var(--gold);font-size:1.3rem}
.tcard.google p{color:rgba(255,255,255,.75);font-size:.9rem}
.tnote{margin-top:22px;text-align:center;color:var(--muted);font-size:.85rem}

/* FAQ */
.faq-wrap{max-width:860px;margin-inline:auto}
.tabs{display:inline-grid;grid-template-columns:1fr 1fr;max-width:100%;padding:5px;border-radius:999px;background:var(--paper);border:1px solid var(--line);margin:0 auto 32px;position:relative}
.tabs-c{text-align:center}
.tabs button{position:relative;z-index:1;white-space:nowrap;padding:10px 22px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--muted);transition:color .3s}
.tabs button.on{color:var(--navy-950)}
.tabs .pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:var(--gold);border-radius:999px;transition:transform .5s var(--ease)}
.tabs[data-mode="fam"] .pill{transform:translateX(100%)}
.faq-list{display:none;gap:12px}
.faq-list.on{display:grid;animation:fadeUp .6s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.qa{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.qa.open{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.qa>button{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 24px;font-weight:600;font-size:1rem}
.qa>button .ic{transition:transform .45s var(--ease),color .3s;color:var(--blue);font-size:1.2rem}
.qa.open>button .ic{transform:rotate(180deg);color:var(--gold-2)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{padding:0 24px 22px;color:var(--muted);font-size:.95rem}
.qa .ans p.pend{font-style:italic;color:#8c92ad}
.pendtag{display:inline-block;font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--gold-soft);color:#7a5c00;padding:3px 9px;border-radius:999px;margin-right:8px}

/* Contacto */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);align-items:start}
.info{display:grid;gap:14px;margin:28px 0}
.info>a,.info>div{display:flex;gap:16px;align-items:center;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:transform .35s var(--ease),border-color .3s,background .3s}
.info>a:hover{transform:translateX(8px);border-color:var(--gold);background:rgba(255,255,255,.1)}
.info .ic{font-size:1.4rem;color:var(--gold)}
.info small{display:block;color:rgba(255,255,255,.6);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.info span{font-size:.95rem}
.map{border-radius:20px;overflow:hidden;height:220px;border:1px solid rgba(255,255,255,.14);background:var(--navy-800);position:relative}
.map::before{content:"Barrio Crespo · Calle 70 #1D-124 · Cartagena";position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:rgba(255,255,255,.55);font-size:.85rem}
.map iframe{position:relative;width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}
.form{background:#fff;color:var(--ink);border-radius:26px;padding:clamp(24px,4vw,40px);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form h3{grid-column:1/-1;font-size:1.4rem}
.form .full{grid-column:1/-1}
.form .note{grid-column:1/-1;font-size:.78rem;color:var(--muted)}

/* Footer */
.ftr{background:var(--navy-950);color:rgba(255,255,255,.7);padding:64px 0 28px;font-size:.9rem}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.ftr img{height:58px;margin-bottom:16px}
.ftr h5{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.ftr ul{list-style:none;display:grid;gap:10px}
.ftr a:hover{color:var(--gold)}
.soc{display:flex;gap:10px;margin-top:18px}
.soc a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;font-size:1.2rem;transition:background .3s,color .3s,transform .35s var(--ease)}
.soc a:hover{background:var(--gold);color:var(--navy-950);transform:translateY(-4px)}
.copy{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem}

/* Botón flotante WhatsApp */
.wa-float{position:fixed;right:20px;bottom:22px;z-index:90;display:flex;align-items:center;gap:0;height:60px;border-radius:999px;background:var(--wa);color:var(--navy-950);box-shadow:0 14px 34px -8px rgba(37,211,102,.7);overflow:hidden;transition:transform .4s var(--ease)}
.wa-float:hover{transform:translateY(-4px)}
.wa-float .ic{width:60px;height:60px;padding:15px}
.wa-float span{max-width:0;overflow:hidden;white-space:nowrap;font-weight:600;font-size:.9rem;transition:max-width .5s var(--ease),padding .5s var(--ease)}
.wa-float:hover span{max-width:200px;padding-right:22px}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--wa);animation:waPulse 2.4s ease-out infinite;pointer-events:none}
@keyframes waPulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.5);opacity:0}}
.totop{position:fixed;right:28px;bottom:96px;z-index:89;width:46px;height:46px;border-radius:50%;background:var(--navy-800);color:var(--gold);display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .35s,transform .35s var(--ease);box-shadow:var(--shadow-sm)}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop .ic{transform:rotate(180deg)}

/* Modal servicio */
dialog{border:0;border-radius:26px;padding:0;width:min(640px,calc(100% - 28px));max-height:calc(100% - 40px);margin:auto;box-shadow:0 50px 100px -30px rgba(0,0,0,.7);overflow:auto;background:#fff;color:var(--ink)}
dialog::backdrop{background:rgba(6,9,39,.72);backdrop-filter:blur(6px)}
dialog[open]{animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
.dlg-h{padding:30px 32px 22px;background:linear-gradient(140deg,var(--navy-700),var(--navy-950));color:#fff;position:relative}
.dlg-h .ic-big{width:54px;height:54px;border-radius:16px;background:var(--gold);color:var(--navy-950);display:grid;place-items:center;font-size:1.6rem;margin-bottom:14px}
.dlg-h h3{font-size:1.4rem;line-height:1.2}
.dlg-h p{color:rgba(255,255,255,.75);font-size:.92rem;margin-top:8px}
.dlg-x{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem;display:grid;place-items:center;transition:background .3s,transform .4s var(--ease)}
.dlg-x:hover{background:var(--gold);color:var(--navy-950);transform:rotate(90deg)}
.dlg-b{padding:26px 32px 32px}
.dlg-b h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.dlg-b ul{list-style:none;display:grid;gap:10px;margin-bottom:26px}
.dlg-b li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:var(--muted)}
.dlg-b li .ic{color:var(--gold-2);margin-top:5px}

/* ---------- Reveal ---------- */
.js [data-r]{opacity:0;transform:translateY(24px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:min(var(--d,0s),.18s)}
.js [data-r="left"]{transform:translateX(-32px)}
.js [data-r="right"]{transform:translateX(32px)}
.js [data-r="zoom"]{transform:scale(.96)}
.js [data-r].in{opacity:1;transform:none}
.js .h2 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.js .h2 .w>span{display:inline-block;transform:translateY(105%);transition:transform .55s var(--ease);transition-delay:min(calc(var(--i)*.025s),.18s)}
.js .h2.in .w>span{transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:64px}
  .scope{transform:none;max-width:560px;margin-inline:auto}
  .float.f1{left:-8px}.float.f2{right:-4px}
  .book form{grid-template-columns:1fr 1fr}
  .book .btn{grid-column:1/-1}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .about,.contact,.fam{grid-template-columns:1fr}
  .fam .txt{min-width:0}
  .fam-cta .btn{max-width:100%;white-space:normal}
  .vis{max-width:480px;margin-inline:auto;width:100%}
  .cards,.why{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .steps::before,.steps::after{display:none}
  .ftr-grid{grid-template-columns:1fr 1fr}
  /* La regla de #nav (menú móvil) y .burger viven en un único bloque @media(max-width:1200px)
     más abajo — éste es ≤1020px, un subconjunto de ese rango, así que repetirlas aquí sería
     una segunda copia que mantener sincronizada. */
  .hdr-cta .btn span.t{display:none}
}
@media(max-width:640px){
  .wrap{width:min(var(--wrap),100% - 32px)}
  .hero{padding:118px 0 150px}
  .book{margin-top:-64px}
  .book form{grid-template-columns:1fr;padding:18px}
  .cards,.why,.mv,.form,.ftr-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .stats-grid{gap:12px}
  .stat{padding:20px 16px}
  .scope canvas{height:210px}
  .scope-foot{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .scope-foot div{padding:8px}
  .float{display:none}
  .orb.a{display:none}
  .brand img{height:44px}
  .hdr .btn{padding:10px 16px}
  .badge11{right:-6px}
  .wa-float{right:14px;bottom:16px}
  .totop{display:none}
  .copy{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-r],.js .h2 .w>span{opacity:1;transform:none}
}

/* =====================================================================
   Multi-página: Quiénes somos y Nuestros servicios (25-sep-2026)
   ===================================================================== */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 6px #fff}
.btn:focus-visible,.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px;box-shadow:0 0 0 6px #fff}
.skip{position:absolute;left:12px;top:-70px;z-index:300;background:var(--gold);color:var(--navy-950);padding:10px 18px;border-radius:10px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
/* Evita que los elementos que entran deslizándose (translateX) ensanchen la página en celular.
   Se usa "clip" y no "hidden" para no romper los elementos fijos al hacer scroll (sticky). */
main,.ftr{overflow-x:clip}
.svc,#familias{scroll-margin-top:136px}

/* Cabecera de página interior */
.hero-sm{padding:150px 0 96px}
.hero-sm h1{max-width:860px}
.hero-sm .lead{max-width:720px}
.hero-sm .hero-cta{margin-top:30px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:24px}
.crumb a{color:rgba(255,255,255,.85);transition:color .3s}
.crumb a:hover{color:var(--gold)}
.crumb [aria-current]{color:var(--gold)}

/* Subnavegación fija de servicios */
.subnav{position:sticky;top:63px;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.subnav ul{display:flex;gap:8px;list-style:none;overflow-x:auto;padding:12px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:inline-flex;align-items:center;white-space:nowrap;padding:9px 16px;border-radius:999px;font-size:.85rem;font-weight:500;color:var(--muted);border:1px solid var(--line);background:#fff;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.subnav a:hover{border-color:var(--gold);color:var(--navy-800);transform:translateY(-2px)}
.subnav a.on{background:var(--navy-800);border-color:var(--navy-800);color:#fff}

/* Bloques de servicio */
.svc{background:#fff}
.svc.paper{background:var(--paper)}
.svc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:start}
.svc.rev .svc-info{order:2}
.svc.rev .topics{order:1}
.svc-num{display:block;font-size:clamp(3.2rem,7vw,5.6rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:2px rgba(26,64,150,.22)}
.svc-group{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#7a5c00;background:var(--gold-soft);padding:6px 12px;border-radius:999px;margin:12px 0 20px}
.svc-ico{width:64px;height:64px;border-radius:20px;background:var(--navy-800);color:var(--gold);display:grid;place-items:center;font-size:1.9rem;margin-bottom:20px;transition:transform .5s var(--ease),background .4s,color .4s}
.svc-info:hover .svc-ico{transform:rotate(-8deg) scale(1.08);background:var(--gold);color:var(--navy-950)}
.svc-info p{color:var(--muted);font-size:1.02rem}
.chipset{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 28px}
.chipset span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--navy-800);color:#fff;font-size:.8rem}
.chipset .ic{color:var(--gold)}
.topics{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.5vw,40px)}
.svc.paper .topics{background:#fff;box-shadow:var(--shadow-sm)}
.topics::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(252,203,0,.28),transparent 65%);pointer-events:none}
.topics h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:18px;position:relative}
.topics ul{list-style:none;display:grid;gap:14px;position:relative}
.topics li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:.97rem}
.topics li .ic{color:var(--gold-2);margin-top:5px;font-size:1.1rem}
.topics.no li .ic{color:#c0455a}
.topic-note{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);color:var(--muted);font-size:.88rem;position:relative}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:20px;border-top:1px dashed var(--line);position:relative}
.tags b{flex:0 0 100%;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tags span{padding:6px 12px;border-radius:8px;background:var(--paper);border:1px solid var(--line);font-size:.8rem;font-weight:500;color:var(--navy-800)}
.js .topics li{opacity:0;transform:translateX(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .topics.in li{opacity:1;transform:none}
.js .topics.in li:nth-child(1){transition-delay:.2s}.js .topics.in li:nth-child(2){transition-delay:.3s}.js .topics.in li:nth-child(3){transition-delay:.4s}
.js .topics.in li:nth-child(4){transition-delay:.5s}.js .topics.in li:nth-child(5){transition-delay:.6s}.js .topics.in li:nth-child(6){transition-delay:.7s}

/* Hogares y familias */
.fam-sec{background:#fff}
.famgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:clamp(24px,3.5vw,40px);border-radius:var(--r);background:linear-gradient(140deg,var(--navy-700),var(--navy-950));color:#fff;box-shadow:var(--shadow)}
.rule{display:flex;gap:16px}
.rule .ic{font-size:1.9rem;color:var(--gold);flex:none;margin-top:4px}
.rule b{display:block;margin-bottom:6px}
.rule p{font-size:.9rem;color:rgba(255,255,255,.76)}
.center-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:44px}
.fam-cta{display:flex;flex-wrap:wrap;gap:12px}

/* Quiénes somos */
.about .checks{list-style:none;display:grid;gap:14px;margin:22px 0}
.checks li{display:flex;gap:12px;color:var(--muted)}
.checks .ic{color:var(--gold-2);margin-top:5px;font-size:1.1rem}
.pquote{margin-top:26px;padding:22px 26px;border-left:4px solid var(--gold);background:var(--paper);border-radius:0 var(--r-sm) var(--r-sm) 0}
.pquote p{font-size:1.12rem;font-weight:600;color:var(--navy-800);line-height:1.45}
.pquote small{display:block;margin-top:8px;color:var(--muted);font-size:.9rem}
.stats-alt{padding:0 0 clamp(70px,9vw,110px)}
.mvbig{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mvbig article{padding:clamp(28px,4vw,46px);border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14)}
.mvbig .ico{width:64px;height:64px;border-radius:20px;background:var(--gold);color:var(--navy-950);display:grid;place-items:center;font-size:1.9rem;margin-bottom:22px}
.mvbig h3{font-size:1.5rem;margin-bottom:14px}
.mvbig p{color:rgba(255,255,255,.78);font-size:.98rem}
.mvbig p+p{margin-top:14px}
.valgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.val{padding:26px 28px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);display:flex;gap:18px;align-items:center}
.val:hover{box-shadow:var(--shadow);background:#fff;border-color:var(--gold)}
.val .ic{font-size:2rem;color:var(--blue);flex:none}
.val b{font-size:1.1rem}
.cover{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:center}
.cities{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.cities span{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:500;font-size:.9rem;transition:transform .35s var(--ease),border-color .3s}
.cities span:hover{border-color:var(--gold);transform:translateY(-3px)}
.cities .ic{color:var(--gold-2)}
.cities .main{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.cities .main .ic{color:var(--gold)}
.office{padding:clamp(26px,4vw,40px);border-radius:var(--r);background:linear-gradient(150deg,var(--navy-700),var(--navy-950));color:#fff;box-shadow:var(--shadow)}
.office h3{font-size:1.35rem;margin:12px 0 20px}
.office ul{list-style:none;display:grid;gap:16px;margin-bottom:26px}
.office li{display:flex;gap:14px;align-items:flex-start;color:rgba(255,255,255,.85);font-size:.95rem}
.office li .ic{color:var(--gold);font-size:1.3rem;flex:none;margin-top:3px}
.office a:not(.btn):hover{color:var(--gold)}
.bignum{font-size:clamp(2.4rem,4vw,3.2rem);font-weight:800;line-height:1;color:var(--gold);margin-bottom:12px;letter-spacing:-.02em}

/* Llamado final */
.cta-band{position:relative;padding:clamp(60px,8vw,100px) 0;background:linear-gradient(140deg,var(--navy-700),var(--navy-950));color:#fff;text-align:center;overflow:hidden;isolation:isolate}
.cta-band .orb.a{width:420px;height:420px;right:-120px;top:-140px}
.cta-band .h2 em{color:var(--gold)}
.cta-band .sub{color:rgba(255,255,255,.78);max-width:640px;margin-inline:auto}
.cta-band .row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}

/* Testimonios reales */
.tcard svg.q{width:34px;height:34px;font-size:1rem;color:var(--gold-2);fill:currentColor;stroke:none;transform:rotate(180deg)}
.about{align-items:start}
.about .vis{position:sticky;top:110px}
.tcard figcaption{display:flex;align-items:center;gap:12px;font-size:.85rem}
.tcard figcaption b{display:block;font-size:.92rem;line-height:1.3}
.avatar.ini{background:var(--navy-800);border:0;color:var(--gold);font-weight:700;font-size:.7rem;letter-spacing:.02em;flex:none}
.tcard blockquote{line-height:1.65}

/* Ventana de detalle: acciones */
.dlg-act{display:flex;flex-wrap:wrap;gap:12px}

/* ---- Responsive de las páginas nuevas ---- */
@media(max-width:1020px){
  .svc-grid,.mvbig,.cover{grid-template-columns:1fr}
  .svc.rev .svc-info{order:0}
  .svc.rev .topics{order:0}
  .famgrid,.rules{grid-template-columns:1fr 1fr}
  .famgrid .topics:last-child,.rules .rule:last-child{grid-column:1/-1}
  .about .vis{position:static}
  .hero-sm .orb.a{opacity:.45}
  .valgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .hero-sm{padding:118px 0 70px}
  .famgrid,.rules,.valgrid{grid-template-columns:1fr}
  .rules .rule:last-child{grid-column:auto}
  .svc-num{font-size:3.4rem}
  .center-cta .btn,.cta-band .row .btn,.hero-sm .hero-cta .btn{width:100%}
  .val{padding:20px}
  .office li{font-size:.92rem}
}

/* ---- Página de contacto y resumen de contacto en la home ---- */
.quick{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.quick a.chip{transition:border-color .3s,transform .3s var(--ease)}
.quick a.chip:hover{border-color:var(--gold);transform:translateY(-3px)}
.cpage{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.cinfo{display:grid;gap:16px}
.ccard{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);color:var(--ink);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--gold)}
.ccard .ci{width:50px;height:50px;border-radius:15px;background:var(--navy-800);color:var(--gold);display:grid;place-items:center;font-size:1.4rem;flex:none}
.ccard.wa .ci{background:var(--wa);color:#fff}
.ccard small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ccard b{display:block;font-size:1.05rem;word-break:break-word}
/* Segundo teléfono de contacto dentro de la misma tarjeta (VERITÉ confirmó dos números generales). */
.ccard-tel2{margin-top:12px}
.ccard > div > span{color:var(--muted);font-size:.92rem;display:block}
.cact{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.cact a{padding:7px 16px;border-radius:999px;background:var(--navy-800);color:#fff;font-size:.82rem;font-weight:600;transition:background .3s,color .3s}
.cact a:hover{background:var(--gold);color:var(--navy-950)}
.ccard.wa .cact a:first-child{background:var(--wa)}
.ccard.wa .cact a:first-child:hover{background:var(--wa-dark);color:var(--navy-950)}
.hrs{list-style:none;display:grid;gap:8px;margin-top:10px}
.hrs li{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:8px 12px;border-radius:10px;font-size:.9rem;color:var(--muted)}
.hrs li b{color:var(--ink);font-weight:600}
.hrs li.today{background:var(--gold-soft)}
.hrs li.today span{color:#7a5c00;font-weight:600}
.nowbadge{display:inline-flex!important;align-items:center;gap:8px;font-size:.8rem!important;font-weight:600;padding:5px 12px;border-radius:999px;margin-bottom:4px}
.nowbadge[hidden]{display:none!important}
.nowbadge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.nowbadge.yes{background:#e3f8ea;color:#137a3b!important}
.nowbadge.no{background:#fdeaea;color:#a12b2b!important}
.cform{border:1px solid var(--line);box-shadow:var(--shadow)}
.form .fh{grid-column:1/-1;font-size:1.5rem;line-height:1.2}
.form .fsub{grid-column:1/-1;color:var(--muted);font-size:.95rem;margin-top:-6px}
.req{color:#c0455a}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.84rem;color:var(--muted);cursor:pointer}
.consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--blue);flex:none}
.map-lg{height:clamp(300px,42vw,440px);border-color:var(--line);box-shadow:var(--shadow-sm)}
@media(max-width:1020px){
  .cpage{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ccard{padding:18px;gap:14px}
  .hrs li{flex-direction:column;gap:2px}
  .quick .chip{width:100%;justify-content:center}
}

.ccard b.mail{overflow-wrap:anywhere}
@media(max-width:640px){.ccard b.mail{font-size:clamp(.68rem,3.05vw,1rem)}.ccard .ci{width:42px;height:42px;font-size:1.2rem;border-radius:12px}}

/* ---- Página legal: política de protección de datos ---- */
.legal-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;font-size:.85rem;color:rgba(255,255,255,.8)}
.legal-meta span{padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.tbc{background:#fff0a6;color:#5b4700;padding:1px 6px;border-radius:5px;font-weight:600;font-size:.92em}
.legal{background:#fff}
.legal-grid{display:grid;grid-template-columns:280px 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding:22px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.toc summary{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blue);cursor:default;list-style:none;margin-bottom:12px}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;counter-reset:t;display:grid;gap:2px}
.toc li{counter-increment:t}
.toc a{display:flex;gap:10px;padding:8px 10px;border-radius:10px;font-size:.88rem;color:var(--muted);transition:background .25s,color .25s}
.toc a::before{content:counter(t);flex:none;width:22px;font-weight:700;color:var(--gold-2)}
.toc a:hover{background:#fff;color:var(--navy-800)}
.toc a.on{background:var(--navy-800);color:#fff}
.toc a.on::before{color:var(--gold)}
.doc{max-width:820px;counter-reset:sec}
.doc section{scroll-margin-top:110px;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.doc h2{font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.25;margin-bottom:16px;display:flex;gap:14px;align-items:baseline}
.doc h2::before{counter-increment:sec;content:counter(sec);flex:none;min-width:38px;height:38px;border-radius:12px;background:var(--navy-800);color:var(--gold);display:grid;place-items:center;font-size:.95rem;font-weight:700;transform:translateY(-2px)}
.doc p{color:var(--muted);margin-bottom:14px}
.doc a:not(.btn){color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.doc b{color:var(--ink)}
.draftnote{display:flex;gap:14px;padding:18px 20px;border-radius:var(--r-sm);background:#fff8dc;border:1px solid #f0d878;margin-bottom:36px}
.draftnote .ic{font-size:1.4rem;color:#8a6a00;flex:none;margin-top:3px}
.draftnote p{margin:0;color:#5b4700;font-size:.92rem}
.idcard{display:grid;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.idcard div{display:grid;grid-template-columns:200px 1fr;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line)}
.idcard div:last-child{border-bottom:0}
.idcard div:nth-child(odd){background:var(--paper)}
.idcard dt{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.idcard dd{color:var(--ink);font-weight:500}
.defs{display:grid;gap:10px}
.defs div{padding:14px 18px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line)}
.defs dt{font-weight:700;color:var(--navy-800);margin-bottom:2px}
.defs dd{color:var(--muted);font-size:.95rem}
.doc .checks{margin:6px 0 14px}
.alpha{list-style:none;counter-reset:a;display:grid;gap:10px;margin:6px 0 14px}
.alpha li{counter-increment:a;display:block;position:relative;padding-left:40px;color:var(--muted)}
.alpha li::before{content:counter(a,lower-alpha) ")";position:absolute;left:0;top:0;width:26px;font-weight:700;color:var(--blue)}
.rights{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rights div{display:flex;gap:14px;padding:18px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line)}
.rights span{flex:none;width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--navy-950);display:grid;place-items:center;font-weight:800}
.rights p{margin:0;font-size:.94rem}
.deadlines{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 18px}
.deadlines article{padding:24px;border-radius:var(--r);background:linear-gradient(150deg,var(--navy-700),var(--navy-950));color:#fff}
.deadlines h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.deadlines .big{font-size:2.6rem;font-weight:800;line-height:1.1;color:#fff;margin:8px 0}
.deadlines .big small{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.7)}
.deadlines p{color:rgba(255,255,255,.78);font-size:.9rem;margin-bottom:0}
.deadlines b{color:#fff}
.legal-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;padding:26px 30px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.legal-cta h3{font-size:1.2rem}
.legal-cta p{margin:4px 0 0}
@media(max-width:1020px){
  .legal-grid{grid-template-columns:1fr}
  .toc{position:static;max-height:none}
  .toc summary{cursor:pointer;margin-bottom:0}
  .toc details[open] summary{margin-bottom:12px}
  .toc ol{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .toc ol{grid-template-columns:1fr}
  .idcard div{grid-template-columns:1fr;gap:2px}
  .rights,.deadlines{grid-template-columns:1fr}
  .legal-cta .btn{width:100%}
  .doc h2::before{min-width:34px;height:34px}
}
@media print{.hdr,.wa-float,.totop,.toc,.cta-band,.progress,.draftnote{display:none!important}.hero-sm{padding:20px 0;background:none;color:#000}.hero-sm h1,.hero-sm .lead{color:#000}.doc{max-width:none}}

/* =====================================================================
   Ronda de diseño 26-sep-2026: barra de solicitud, cinta, testimonios,
   tarjetas de servicios, misión/visión e índice de la política
   ===================================================================== */
.optl{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);opacity:.85}
.btn-line-dk{border:1.5px solid var(--navy-800);color:var(--navy-800)}
.btn-line-dk:hover{background:var(--navy-800);color:#fff;transform:translateY(-3px)}

/* ---- Barra «Solicite su estudio»: pieza principal de conversión ---- */
.book{--ov:96px;position:relative;z-index:5;margin-top:calc(var(--ov) * -1);padding-bottom:76px}
.book::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg,transparent 0,var(--navy-950) calc(var(--ov) - 10px));z-index:-1}
.book .bookcard{display:block;position:relative;overflow:hidden;padding:clamp(24px,3.4vw,38px);border-radius:28px;background:#fff;border:1px solid rgba(252,203,0,.55);
  box-shadow:0 0 0 7px rgba(252,203,0,.10),0 40px 80px -30px rgba(0,0,0,.85),0 0 90px -18px rgba(252,203,0,.40)}
.bookcard::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--gold),#fff1a8,var(--gold));background-size:200% 100%}
.bookcard::after{content:"";position:absolute;top:0;left:-40%;width:30%;height:100%;background:linear-gradient(105deg,transparent,rgba(252,203,0,.22),transparent);transform:skewX(-18deg);pointer-events:none;opacity:0}
.js .bookcard.in::after{animation:shine 1.8s .5s 1 ease-out}
.js .bookcard.in::before{animation:goldmove 3s .3s 1 ease-out}
@keyframes shine{0%{left:-40%;opacity:1}100%{left:120%;opacity:1}}
@keyframes goldmove{from{background-position:100% 0}to{background-position:0 0}}
.bk-head{margin-bottom:22px;max-width:640px}
.bk-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#e3f8ea;color:#137a3b;font-size:.78rem;font-weight:700;letter-spacing:.04em}
.bk-tag .ic{font-size:1rem;color:var(--wa-dark)}
.book .bk-head h2{display:block;grid-column:auto;font-size:clamp(1.55rem,3.2vw,2.3rem);line-height:1.12;font-weight:700;color:var(--navy-950);letter-spacing:-.015em;margin:12px 0 8px}
.bk-head h2 em{font-style:normal;background:linear-gradient(transparent 62%,var(--gold) 62%);padding:0 4px;color:var(--navy-950)}
.bk-head p{color:var(--muted);font-size:1rem;margin:0}
.bk-fields{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;align-items:end}
.bk-consent{grid-column:1/-1;margin-top:2px}
.bk-fields .btn{grid-column:1/-1;justify-self:center;margin-top:4px}
.bk-toggle{display:none}
@media(max-width:1020px){.bk-fields{grid-template-columns:1fr 1fr}.bk-fields .btn{justify-self:stretch}}
@media(max-width:640px){
  .book{--ov:72px;padding-bottom:56px}
  .bk-fields{grid-template-columns:1fr}
  .bk-opt{display:none}
  .bookcard.expanded .bk-opt{display:flex}
  .bk-toggle{display:block;width:100%;margin-top:12px;padding:10px;border-radius:12px;color:var(--blue);font-weight:600;font-size:.9rem;background:var(--paper)}
}

/* ---- Cinta plana, debajo de las cifras ---- */
.mq-wrap.flat{padding:0;margin:clamp(44px,6vw,72px) 0 0;overflow:hidden}
.mq-wrap.flat .marquee{transform:none;box-shadow:none}
.mq-wrap.flat .mq-track{animation-duration:60s}
.mq-wrap.flat .mq-track span{padding:13px 26px 13px 0;font-size:.85rem}

/* ---- Testimonios ---- */
.testi{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--paper),#eef1f9)}
.testi::before,.testi::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.testi::before{width:420px;height:420px;left:-120px;top:-100px;background:rgba(252,203,0,.30)}
.testi::after{width:460px;height:460px;right:-140px;bottom:-120px;background:rgba(47,91,192,.22)}
.testi .wrap{position:relative;z-index:1}
/* ---- Carrusel: 3 tarjetas visibles en escritorio, 2 en tablet, 1 en móvil ----
   Desplazamiento horizontal nativo con scroll-snap (sin librerías): el navegador ya da
   gestos táctiles y scroll por teclado de fábrica; las flechas solo llaman a scrollBy()
   para avanzar exactamente una tarjeta. align-items:stretch iguala las alturas y permite
   que todas crezcan al expandir una cita. Funciona igual para 3, 4 o cualquier cantidad de
   testimonios que lleguen a publicarse en WordPress, sin tocar esta regla. */
.tests-wrap{position:relative;display:flex;align-items:center;gap:14px;margin-top:0}
/* overflow-x:auto sin un overflow-y explícito hace que el navegador calcule overflow-y
   como "auto" también (regla de CSS2.1: si un eje recorta, el otro deja de ser "visible"
   aunque no se declare) — así que esta misma caja recortaba por arriba el círculo amarillo
   de comillas (.qbadge, que sobresale con top:-24px) contra su propio padding-top, antes
   de 4px. La solución no es overflow:visible (eso rompería el recorte horizontal que
   necesita el carrusel): se reserva suficiente padding-top para que el círculo (24px de
   sobresalido + 7.2px del aro de sombra + margen para el giro en :hover) quepa completo
   dentro de esta misma caja recortada; el padding-bottom también crece para que la sombra
   de :hover no se corte de forma abrupta. El margin-top que tenía .tests-wrap se resta aquí
   para que la distancia entre el título y las tarjetas no cambie. */
.tests{display:flex;align-items:stretch;gap:26px;flex:1;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:2px;padding:48px 2px 24px;scrollbar-width:none}
.tests::-webkit-scrollbar{display:none}
.tests>*{scroll-snap-align:start;flex:0 0 calc((100% - 2*26px)/3);min-width:0}
.tests-arrow{flex:none;width:48px;height:48px;border-radius:50%;background:#fff;border:1.5px solid rgba(13,16,48,.18);color:var(--navy-900);display:grid;place-items:center;box-shadow:0 10px 24px -14px rgba(13,16,48,.4);transition:border-color .3s,opacity .3s,transform .3s var(--ease)}
.tests-arrow .ic{width:20px;height:20px}
.tests-arrow.prev .ic{transform:rotate(180deg)}
.tests-arrow:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}
.tests-arrow:disabled{opacity:.35;cursor:default}
@media(prefers-reduced-motion:reduce){.tests{scroll-behavior:auto}}
.tcard.tq{position:relative;text-align:center;align-items:center;gap:20px;padding:58px 30px 32px;background:#fff;border:1px solid rgba(232,180,0,.4);border-radius:26px;box-shadow:0 22px 50px -26px rgba(13,16,48,.4);overflow:visible;margin:0}
.tcard.tq::before{content:"";position:absolute;inset:0 0 auto 0;height:120px;border-radius:26px 26px 0 0;background:radial-gradient(120% 100% at 50% 0,rgba(252,203,0,.20),transparent 70%);pointer-events:none}
.qbadge{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:52.8px;height:52.8px;border-radius:50%;background:linear-gradient(145deg,#ffd633,#e8b400);color:var(--navy-950);display:grid;place-items:center;box-shadow:0 11.2px 22.4px -6.4px rgba(232,180,0,.75),0 0 0 7.2px #eef1f9;transition:transform .5s var(--ease)}
.qbadge .ic{width:22.4px;height:22.4px;font-size:1rem;fill:currentColor;stroke:none}
.tcard.tq:hover{transform:translateY(-10px);border-color:var(--gold);box-shadow:0 34px 64px -26px rgba(13,16,48,.45),0 0 0 4px rgba(252,203,0,.2),0 0 60px -12px rgba(252,203,0,.45)}
.tcard.tq:hover .qbadge{transform:translateX(-50%) scale(1.1) rotate(-8deg)}
.tcard.tq blockquote{position:relative;color:var(--ink);font-size:1.02rem;line-height:1.75;flex:1;text-align:center}
/* Recorte compacto de citas largas (p. ej. Anava): 5 líneas visibles + «Ver más». El botón
   solo se muestra vía JS cuando el texto realmente excede el recorte (app.js), así que un
   testimonio corto nunca lo necesita y nunca queda vacío. `flex:none` evita que `flex:1`
   lo estire para igualar la altura de otras tarjetas. */
.tcard.tq:not(.expanded) blockquote{flex:none;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.tmore{flex:none;align-self:center;border:0;background:none;padding:2px 4px;margin-top:-6px;font:inherit;font-size:.85rem;font-weight:700;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tmore:hover,.tmore:focus-visible{color:var(--navy-950)}
.tcard.tq figcaption{flex-direction:column;gap:12px;text-align:center;margin-top:auto}
.tline{width:46px;height:3px;border-radius:3px;background:var(--gold)}
.tcard.tq figcaption b{font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;color:var(--navy-800)}
.tcard.rate{align-items:center;justify-content:center;text-align:center;gap:10px;padding:34px 28px;background:linear-gradient(155deg,var(--navy-700),var(--navy-950));color:#fff;border:1px solid rgba(252,203,0,.4);border-radius:26px;box-shadow:0 22px 50px -26px rgba(13,16,48,.6)}
.tcard.rate:hover{transform:translateY(-10px);box-shadow:0 34px 64px -26px rgba(13,16,48,.6),0 0 0 4px rgba(252,203,0,.2)}
.tcard.rate .gl{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.tcard.rate .big{font-size:4.4rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.tcard.rate .stars{display:flex;gap:4px;color:var(--gold);font-size:1.3rem}
.tcard.rate p{color:rgba(255,255,255,.78);font-size:.9rem;margin-bottom:8px}
@media(max-width:1020px){
  .tests>*{flex:0 0 calc((100% - 26px)/2)}
}
@media(max-width:640px){
  .tests-wrap{gap:6px}
  .tests>*{flex:0 0 100%}
  .tests-arrow{width:40px;height:40px}
  .tcard.tq{padding:56px 22px 28px}
}

/* ---- Tarjetas de la página de servicios ---- */
.svc-num{background:linear-gradient(135deg,var(--navy-800),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0;display:inline-block;position:relative}
.svc-num::after{content:"";display:block;width:52px;height:6px;border-radius:6px;background:var(--gold);margin-top:8px}
.topics,.svc.paper .topics{background:#fff;border:1.5px solid rgba(232,180,0,.55);border-radius:24px;box-shadow:0 18px 44px -22px rgba(13,16,48,.38);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.topics::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--gold),#ffe27a,var(--gold));transform:scaleX(.22);transform-origin:left;transition:transform .6s var(--ease)}
.topics:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 30px 60px -24px rgba(13,16,48,.42),0 0 0 4px rgba(252,203,0,.22),0 0 54px -10px rgba(252,203,0,.5)}
.topics:hover::before{transform:scaleX(1)}
.topics li .ic{transition:transform .35s var(--ease)}
.topics:hover li .ic{transform:scale(1.2)}
.topics h3{display:flex;align-items:center;gap:10px}
.topics h3::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--gold)}
.famgrid .topics:hover{transform:translateY(-8px)}
.rules{background:none;box-shadow:none;padding:0;border-radius:0;gap:20px}
.rule{padding:28px 26px;border-radius:22px;background:linear-gradient(150deg,var(--navy-700),var(--navy-950));color:#fff;border:1.5px solid rgba(252,203,0,.35);box-shadow:0 18px 40px -22px rgba(6,9,39,.7);transition:transform .45s var(--ease),border-color .3s,box-shadow .45s var(--ease)}
.rule:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 0 0 4px rgba(252,203,0,.18),0 30px 60px -24px rgba(6,9,39,.8),0 0 50px -12px rgba(252,203,0,.4)}
.rule .ic{transition:transform .4s var(--ease)}
.rule:hover .ic{transform:rotate(-8deg) scale(1.15)}

/* ---- Misión y visión: centradas y con movimiento ---- */
.mvbig article{position:relative;overflow:hidden;text-align:center;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease),background .4s}
.mvbig article::before{content:"";position:absolute;left:50%;top:-60px;width:320px;height:200px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(252,203,0,.28),transparent);opacity:0;transition:opacity .5s}
.mvbig .ico{margin:0 auto 22px;position:relative;transition:transform .5s var(--ease),box-shadow .5s}
.mvbig h3,.mvbig p{position:relative}
.mvbig article:hover{transform:translateY(-12px);border-color:var(--gold);background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));box-shadow:0 0 0 4px rgba(252,203,0,.14),0 34px 70px -28px rgba(0,0,0,.8)}
.mvbig article:hover::before{opacity:1}
.mvbig article:hover .ico{transform:scale(1.14) rotate(-8deg);box-shadow:0 0 0 10px rgba(252,203,0,.18),0 0 34px rgba(252,203,0,.55)}

/* ---- Política de datos: índice completo, sin scroll ---- */
.legal-grid{grid-template-columns:270px 1fr}
.toc{max-height:none;overflow:visible;padding:clamp(14px,2.2vh,22px)}
.toc a{padding:clamp(3px,.8vh,8px) 10px;font-size:.86rem;line-height:1.25}
.toc summary{margin-bottom:clamp(6px,1.4vh,12px)}
@media(max-width:1020px){.legal-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bookcard::after,.bookcard::before{animation:none!important}}

/* =====================================================================
   Ronda 27-sep-2026: páginas por servicio, menú hasta 1200 px, zonas táctiles,
   encabezados sin saltos, pantalla de carga corta y aviso de privacidad
   ===================================================================== */
/* Menú hamburguesa hasta 1200 px (antes se partía en dos líneas entre 1021 y 1200) */
/* ---- Menú móvil: desplegable compacto, anclado debajo del encabezado ----
   Decisión del cliente: ya no es una superposición de pantalla completa. El "top" y el
   "max-height" los calcula app.js/positionNav() contra la posición real de .hdr en cada
   apertura (ver setMenu()), así que siempre queda justo debajo sin importar su alto. Solo
   ocupa el espacio que necesitan las opciones (con scroll propio si no cupieran todas). */
@media(max-width:1200px){
  .nav{position:fixed;left:0;right:0;background:var(--navy-950);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;padding:10px 10px 16px;margin:0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s,transform .22s,visibility .22s;overflow-y:auto;overscroll-behavior:contain;border-radius:0 0 22px 22px;box-shadow:0 26px 54px -22px rgba(6,9,39,.6);z-index:95}
  .menu-open .nav{opacity:1;visibility:visible;transform:none}
  .nav a.lnk{font-size:1.05rem;width:100%;text-align:left;padding:13px 16px;border-radius:14px}
  .nav a.lnk::after{display:none}
  .nav a.lnk:hover,.nav a.lnk:focus-visible,.nav a.lnk.on{background:rgba(255,255,255,.08)}
  .burger{display:grid}
}
@media(max-width:1200px) and (prefers-reduced-motion:reduce){.nav{transition:opacity .01ms,visibility .01ms}}

/* Encabezados: h3 con el mismo aspecto que tenían los h4/h5 */
.card h3{font-size:1.15rem;line-height:1.25;font-weight:600}
a.card{color:inherit}
.step h3{font-size:1.05rem;margin-bottom:6px}
.ftr h3{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.grp h2{font-size:1.15rem;font-weight:600;color:var(--navy-800)}

/* Página de servicio */
.svc-info .checks{list-style:none;display:grid;gap:14px;margin:0 0 24px}
.svc-info .h2{margin-top:6px}
.svc-note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--gold-soft);color:#5b4700!important;font-size:.9rem!important;margin:0 0 26px!important}
.svc-note .ic{flex:none;margin-top:4px;color:#8a6a00}
.crumb a[href$="nuestros-servicios.html"]{color:rgba(255,255,255,.85)}

/* Aviso de privacidad */
.privnote{padding:14px 16px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:.8rem;line-height:1.6;color:var(--muted)}
.privnote b{display:block;margin-bottom:6px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-800)}
.privnote a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.privnote.big{font-size:.95rem;padding:20px 22px}
.bk-priv{margin:14px 0 0;font-size:.78rem;color:var(--muted)}
.bk-priv a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

/* Zonas táctiles de 44 px en celular y tablet */
@media(max-width:1020px){
  .hdr .btn{min-height:44px}
  .crumb a{display:inline-flex;align-items:center;min-height:44px}
  .card .more{min-height:44px}
  .ftr ul{gap:0}
  .ftr li a{display:inline-flex;align-items:center;min-height:44px}
  .copy a{display:inline-flex;align-items:center;min-height:44px}
  .cact a{min-height:44px;display:inline-flex;align-items:center}
  .toc a{min-height:44px;align-items:center}
  .subnav a{min-height:44px}
  .seg button,.tabs button{min-height:44px}
  .bk-toggle{min-height:44px}
  .soc a{width:44px;height:44px}
  .dlg-x{width:44px;height:44px}
  .quick .chip{min-height:44px}
}

.nb{white-space:nowrap}
.card{border:1.5px solid rgba(232,180,0,.5);box-shadow:0 14px 36px -22px rgba(13,16,48,.35)}
.card:hover{border-color:var(--gold);box-shadow:0 30px 60px -24px rgba(13,16,48,.42),0 0 0 4px rgba(252,203,0,.22),0 0 54px -10px rgba(252,203,0,.5)}
@media(max-width:1020px){
  .office li a:not(.btn),.idcard a{display:inline-flex;align-items:center;min-height:44px}
  .toc summary{display:flex;align-items:center;min-height:44px}
  .consent a{padding:8px 0}
}

/* =====================================================================
   Ronda 28-sep-2026: submenú de servicios y selector del hero
   ===================================================================== */
/* Selector Empresas / Hogares y familias: dos columnas iguales, sin cortar el texto */
.seg{display:inline-grid;grid-template-columns:1fr 1fr;max-width:100%}
.seg button{white-space:nowrap;padding:9px 24px}
@media(max-width:430px){.seg button{padding:9px 14px;font-size:.8rem}}

/* Submenú «Servicios» (escritorio: al pasar el mouse o con el teclado) */
.has-mega{display:flex;align-items:center}
.nav a.lnk .chev{width:12px;height:12px;margin-left:5px;vertical-align:-1px;transition:transform .3s var(--ease)}
.has-mega:hover .chev,.has-mega.open .chev{transform:rotate(180deg)}
.mega{position:absolute;top:100%;left:50%;width:min(940px,94vw);transform:translate(-50%,8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .35s var(--ease),visibility .25s;padding-top:6px;z-index:5}
.mega-in{display:grid;grid-template-columns:1.1fr 1.1fr .9fr;gap:8px 28px;padding:24px 26px 22px;border-radius:20px;background:var(--navy-900);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega-h{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 10px 12px}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega li a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;color:#fff;transition:background .25s}
.mega li a:hover,.mega li a:focus-visible,.mega li a.on{background:rgba(255,255,255,.08)}
.mega li .ic{flex:none;width:20px;height:20px;margin-top:2px;color:var(--gold)}
.mega li b{display:block;font-size:.92rem;font-weight:600}
.mega li small{display:block;font-size:.76rem;line-height:1.4;color:rgba(255,255,255,.62);margin-top:2px}
.mega-all{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0 12px;font-size:.85rem;font-weight:600;color:var(--gold)}
.mega-all .ic{width:16px;height:16px}

/* Celular y tablet: el submenú «Servicios» se abre dentro del panel desplegable, como una
   opción más de la lista (su scroll propio ya lo da la regla base de #nav). */
@media(max-width:1200px){
  .has-mega{flex-direction:column}
  .mega{position:static;width:100%;transform:none;padding:0;opacity:1;visibility:visible;display:none}
  .has-mega.open .mega{display:block;transform:none}
  .has-mega:hover .mega,.has-mega:focus-within .mega{display:none;transform:none}
  .has-mega.open .mega,.has-mega.open:hover .mega,.has-mega.open:focus-within .mega{display:block}
  .mega-in{grid-template-columns:1fr;gap:4px;padding:8px 14px 14px;background:transparent;border:0;box-shadow:none;max-width:420px;margin:0 auto}
  .mega-h{margin-top:10px}
  .mega li small{display:none}
  .mega li a{min-height:44px;align-items:center}
  .mega-all{min-height:44px}
}
.has-mega > a.lnk{display:inline-flex;align-items:center}

/* Aviso de envío del formulario (WordPress) */
.fnotice{grid-column:1/-1;padding:14px 16px;border-radius:12px;font-size:.92rem;line-height:1.5;margin:0 0 6px}
.fnotice.ok{background:#e7f8ee;color:#12643a;border:1px solid #b6e6c9}
.fnotice.err{background:#fdecea;color:#8a1f17;border:1px solid #f3b9b3}

/* =====================================================================
   Fase 4.1 (home): navegación por necesidad, enlaces en respuestas y contraste de WhatsApp
   ===================================================================== */
.card.need .ntag{align-self:flex-start;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:rgba(26,64,150,.08);padding:4px 10px;border-radius:999px;margin-top:-2px}
.card.need h3{font-size:1.22rem}
.need-more{margin-top:50px;text-align:center}
.need-more p{max-width:640px;margin:0 auto;color:var(--muted);font-size:1rem}
.need-more p b{color:var(--navy-800);font-weight:600}
.need-more .center-cta{margin-top:20px}
.qa .ans{visibility:hidden;transition:grid-template-rows .5s var(--ease),visibility 0s .5s}
.qa.open .ans{visibility:visible;transition-delay:0s}
.qa .ans a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;font-weight:500}
/* La columna del hero se puede encoger: el panel decorativo ya no fuerza un ancho mayor que la pantalla */
.hero-grid>*{min-width:0}
@media(max-width:430px){.scope-foot{gap:8px}.scope-foot div{padding:10px 8px;font-size:.7rem}.scope-foot b{font-size:.78rem}}
@media(max-width:360px){.scope-foot b{font-size:.64rem;letter-spacing:-.01em}.scope-foot div{padding:8px 6px;font-size:.62rem}}

/* Firma de EIA Softworks en el pie (crédito secundario, discreto) */
/* Fotografías reales: proporciones reservadas para evitar saltos al cargar. */
.vis.photo-team{aspect-ratio:1200/675}
.vis.photo-manager{aspect-ratio:auto;margin:0}
.photo-team img,.photo-manager img,.contact-photo img,.location-photo img{display:block;width:100%;height:auto}
.photo-team img{height:100%;object-fit:cover;object-position:50% 10%}
.photo-manager figcaption{padding:16px 22px;color:#fff;display:grid;gap:3px}
.photo-manager figcaption span{font-size:.85rem;color:rgba(255,255,255,.8)}
.contact-photo,.location-photo{margin:0;overflow:hidden;border-radius:var(--r);background:var(--navy-950);box-shadow:var(--shadow)}
.contact-photo{margin-bottom:24px}
.location-photo{margin:30px auto 0;max-width:854px}

.copy-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.credit{color:rgba(255,255,255,.5);font-size:.76rem}
.credit a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:2px}
.credit a:hover{text-decoration-color:currentColor}
@media(max-width:520px){.copy-links{flex-direction:column;align-items:flex-start;gap:8px}}

/* Escape cierra el submenú sin perder el foco del enlace. */
.has-mega.dismissed .mega{opacity:0;visibility:hidden;pointer-events:none;transition:none}

/* Refinamiento conservador: misma composición desktop de Contacto, lectura lineal en móvil. */
.cpage{grid-template-rows:max-content 1fr;row-gap:40px}
.cpage > .contact-photo{grid-column:1;grid-row:1;margin:0}
.cpage > .cform{grid-column:2;grid-row:1 / span 2}
.cpage > .cinfo{grid-column:1;grid-row:2}
@media(max-width:1020px){
  .cpage{grid-template-rows:auto;row-gap:28px}
  .cpage > .contact-photo,.cpage > .cform,.cpage > .cinfo{grid-column:auto;grid-row:auto}
}
@media(max-width:640px){
  body[data-nav=""] main > .sec,body[data-nav="servicios"] main > .sec{padding-block:56px}
  .vis.photo-team{aspect-ratio:4/3}
  .photo-team img{height:100%;object-fit:cover;object-position:50% 50%}
}
/* Una sola entrada del panel de temas: evita sumar revelado del panel y de cada fila. */
.js .svc-grid > .topics li{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-delay:0s!important;animation-delay:0s!important}
  .js .topics li{opacity:1;transform:none}
}

/* Imágenes editoriales: complemento visual, sin representar personas reales de VERITÉ. */
.hero--editorial .wrap{position:relative;z-index:1}
.hero--editorial h1{max-width:720px}
.hero--editorial .lead{max-width:600px}
.hero-editorial{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-editorial img{width:100%;height:100%;object-fit:cover;object-position:right 35%}
.hero-editorial::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy-900) 0%,rgba(10,15,53,.98) 34%,rgba(10,15,53,.88) 46%,rgba(10,15,53,.35) 63%,transparent 80%),linear-gradient(180deg,rgba(10,15,53,.9),transparent 180px),linear-gradient(0deg,rgba(6,9,39,.75),transparent 35%)}
.hero--rutina .hero-editorial img{object-position:right 38%}
.hero--visita .hero-editorial img{object-position:right 30%}
/* Heroes gráficos (Investigativa, Reputacional): mismo sistema de texto/zona segura, sin fotografía. */
.hero-graphic{position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;align-items:center;justify-content:flex-end;padding-right:6%}
.hero-graphic svg{width:min(600px,42%);height:auto;opacity:.92}
/* Reputacional tiene el h1 más largo de los 5 heroes: se recorta el ancho del gráfico para no competir con el texto. */
.hero--reputacional .hero-graphic{padding-right:8%}
.hero--reputacional .hero-graphic svg{width:min(480px,34%)}
/* Investigativa: su h1 es el segundo más largo de los 5; sin tope propio, el ancho por defecto (860px)
   deja que el texto se meta bajo el gráfico en escritorio. Se acota solo el bloque de texto (mismo
   criterio que los heroes fotográficos), sin tocar el gráfico ni el tamaño de fuente. Solo aplica
   ≥1021px porque es donde `.hero-graphic` es visible; en tablet/móvil no hay colisión que evitar. */
@media(min-width:1021px){
  .hero--investigativa h1{max-width:600px}
}
/* `.wa-float` puede coincidir con el CTA principal de un hero en pantallas móviles bajas con
   mucho texto (p. ej. Consulta reputacional); la altura de ese solape depende del alto real del
   viewport, no solo del ancho, así que no hay un valor fijo en CSS que lo resuelva para cualquier
   pantalla. Como ese CTA ya abre WhatsApp (mismo mecanismo `data-wa`), app.js mide la colisión
   real en cada carga/resize (sin listener de scroll) y le cede el paso a la burbuja con esta
   clase mientras se solapen de verdad — sin tocar el float, el copy ni la tipografía de ningún
   hero. No depende de `.hero--reputacional`: protege cualquier página donde esto pueda ocurrir. */
.wa-float.wa-float--yield{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
@media(max-width:1020px){
  .hero--editorial h1{max-width:860px}
  .hero--editorial .lead{max-width:720px}
  .hero--hogares,.hero--preempleo,.hero--rutina,.hero--visita{padding-bottom:32px}
  .hero--hogares .hero-editorial,.hero--preempleo .hero-editorial,.hero--rutina .hero-editorial,.hero--visita .hero-editorial{position:relative;inset:auto;display:block;width:min(620px,100% - 40px);aspect-ratio:16/9;margin:24px auto 0;border-radius:var(--r);overflow:hidden}
  .hero--hogares .hero-editorial img,.hero--preempleo .hero-editorial img,.hero--rutina .hero-editorial img{object-position:50% 15%}
  .hero--visita .hero-editorial img{object-position:50% 10%}
  .hero--hogares .hero-editorial::after,.hero--preempleo .hero-editorial::after,.hero--rutina .hero-editorial::after,.hero--visita .hero-editorial::after{background:linear-gradient(0deg,rgba(6,9,39,.35),transparent 30%)}
  .hero--contacto .hero-editorial{display:none}
  .hero-graphic{display:none}
}

/* ---- Encuesta de satisfacción (demostración) ---- */
.encuesta{min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
/* Franja azul oscuro corporativa (igual tono que el footer, var(--navy-950)): el logotipo
   tiene letras blancas y se perdía sobre el fondo claro de la encuesta (.encuesta usa
   var(--paper)). El cuerpo de la encuesta conserva su fondo claro sin cambios. */
.enc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px max(20px,calc((100% - 560px) / 2));background:var(--navy-950)}
.enc-back{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.85);padding:8px 4px;border-radius:var(--r-sm)}
.enc-back:hover,.enc-back:focus-visible{color:var(--gold);text-decoration:underline}
.enc-card{width:min(560px,100% - 40px);margin:0 auto;padding:8px 0 64px;flex:1}
.enc-demo{display:inline-block;background:var(--gold-soft);color:#7a5c00;font-size:.78rem;font-weight:600;padding:6px 14px;border-radius:999px;margin-bottom:18px}
.encuesta h1{font-size:clamp(1.6rem,5vw,2.2rem);font-weight:700;color:var(--navy-900);margin-bottom:10px;line-height:1.2}
.enc-sub{color:var(--muted);font-size:1rem;margin-bottom:22px;line-height:1.6}
.enc-q{border:0;margin:0 0 34px;padding:0}
.enc-q legend{font-size:1.02rem;font-weight:600;color:var(--navy-900);margin-bottom:16px;padding:0;white-space:normal;width:100%}
.enc-faces{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.face{position:relative;display:block;cursor:pointer}
.face-input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.face-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:88px;padding:14px 4px;border-radius:var(--r-sm);border:2px solid var(--line);background:#fff;text-align:center;transition:border-color .2s,background .2s}
.face-emoji{font-size:1.9rem;line-height:1}
.face-text{font-size:.68rem;font-weight:600;color:var(--muted);line-height:1.2}
.face-input:hover~.face-body{border-color:var(--gold-2)}
.face-input:checked~.face-body{border-color:var(--gold-2);background:var(--gold-soft)}
.face-input:checked~.face-body .face-text{color:#7a5c00}
.face-input:focus-visible~.face-body{outline:3px solid var(--blue);outline-offset:2px}
.enc-error{color:#b3261e;font-size:.85rem;font-weight:600;margin-top:10px}
.enc-submit{width:100%;margin-top:4px;font-size:1rem;padding:16px 26px}
.enc-demo-note{color:var(--muted);font-size:.85rem;margin-top:10px}
.enc-more{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.enc-more h2{font-size:1.2rem;font-weight:700;color:var(--navy-900);margin-bottom:14px}
.enc-links{display:flex;flex-wrap:wrap;gap:10px}
.enc-links a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--navy-800);color:var(--navy-800);font-size:.9rem;font-weight:600;transition:background .3s,color .3s}
.enc-links a .ic{flex:none}
.enc-links a:hover,.enc-links a:focus-visible{background:var(--navy-800);color:#fff}
/* Pantalla de agradecimiento: todo centrado (decisión del cliente). Solo esta pantalla —
   .enc-card también la usan las preguntas, que no cambian. */
#encuestaGracias{text-align:center}
#encuestaGracias .enc-more{text-align:center}
#encuestaGracias .enc-links{justify-content:center}
@media(max-width:480px){
  .enc-faces{gap:5px}
  .face-emoji{font-size:1.5rem}
  .face-text{font-size:.6rem}
  .face-body{padding:10px 2px;min-height:76px}
}