:root{
--ink:#10143A; --ink-soft:#3A3F63; --muted:#6B6F8C;
--violet:#2034E6; --violet-2:#4254F5; --blue:#4F63FF;
--coral:#FF4F40; --coral-dk:#E63E30;
--bg:#FFFFFF; --bg-soft:#F4F5FD; --bg-lav:#E9ECFE;
--line:#E5E7F4; --good-bg:#EEF0FE; --good-line:#CCD3FB; --bad-bg:#F8F8FA; --bad-line:#ECEAF0;
--navy:#0C1030; --navy-2:#141A4A;
--radius:18px; --radius-sm:12px;
--shadow-sm:0 2px 10px rgba(16,20,58,.05); --shadow:0 18px 50px rgba(16,20,58,.10); --shadow-lg:0 30px 80px rgba(32,52,230,.22);
--maxw:1140px;
--h2:clamp(2.05rem,4.4vw,3.05rem);
--h2-sub:clamp(1.7rem,3vw,2.3rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
::selection{background:var(--violet);color:#fff}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);
background:#FAFAFE;line-height:1.6;-webkit-font-smoothing:antialiased}
/* Canvas de degradés fijo en una capa compuesta (no repinta al scrollear -> scroll fluido) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(1150px 800px at 86% -6%, rgba(255,110,140,.17), transparent 58%),
radial-gradient(1050px 920px at 110% 42%, rgba(84,110,255,.20), transparent 55%),
radial-gradient(920px 820px at -12% 14%, rgba(150,126,255,.16), transparent 58%),
radial-gradient(860px 720px at 12% 106%, rgba(255,136,116,.11), transparent 58%),
linear-gradient(180deg,#FAFAFE 0%,#F0F2FC 55%,#F3F2FB 100%)}
h1,h2,h3,h4{line-height:1.12;margin:0;letter-spacing:-.02em;font-weight:800}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);background:var(--bg-lav);padding:7px 14px;border-radius:100px;margin-bottom:18px}
section{padding:84px 0}
.section-head{max-width:800px;margin:0 auto 46px;text-align:center}
.section-head h2{font-size:var(--h2);letter-spacing:-.028em}
.section-head p{color:var(--muted);font-size:1.08rem;margin-top:16px}
/* Secciones oscuras: ritmo tipo Yael pero con las tintas de Caissa */
.on-dark .section-head h2{color:var(--ink)}
.on-dark .section-head p{color:var(--muted)}
.on-dark .eyebrow{background:var(--bg-lav);color:var(--violet)}
.btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;font-family:inherit;font-weight:700;font-size:1rem;padding:15px 26px;border-radius:100px;transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 24px rgba(255,79,64,.32)}
.btn-primary:hover{background:var(--coral-dk);transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,79,64,.42)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff;transform:translateY(-2px)}
.btn-ghost-d{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost-d:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--violet)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn svg{width:18px;height:18px}
/* Nav */
header.nav{position:sticky;top:0;z-index:60;background:rgba(251,251,254,.94);border-bottom:1px solid rgba(16,20,58,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo img{height:28px;width:auto;display:block}
footer .logo img{height:26px}
.logo-light img{filter:brightness(0) invert(1)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:.95rem;font-weight:600;color:var(--ink-soft)}
.nav-links a:hover{color:var(--violet)}
.nav-cta .btn{padding:9.5px 17.5px;font-size:.8rem}
.nav-cta .btn svg{width:15px;height:15px}
/* Objetivo tactil de 44x44 (antes 40x44: 24px de barra + 8 de padding).
touch-action:manipulation saca la espera de doble-tap-zoom, que en un celular
se siente como que el boton "no responde". :active da respuesta visible al toque. */
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
background:none;border:0;cursor:pointer;padding:8px;min-width:44px;min-height:44px;border-radius:10px;
touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* Las barras se separan con gap, no con margin: en flex/grid los margenes no colapsan y la
separacion se duplicaba (10px), el boton crecia a 54px y la X de .open dejaba de cruzarse. */
.burger:active{background:var(--bg-soft)}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:3px;margin:0;transition:transform .2s ease,opacity .2s ease}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-mobile{display:none;flex-direction:column;gap:4px;padding:14px 24px 22px;border-bottom:1px solid var(--line);background:#fff}
.nav-mobile a{padding:12px 0;font-weight:600;color:var(--ink-soft);border-bottom:1px solid var(--bg-soft)}
.nav-mobile .btn{margin-top:14px;justify-content:center}
/* --- Menú global: Servicios (desplegable) · Testimonios · Nosotros --- */
.nav-links{align-self:stretch}
.nav-drop{position:relative;align-self:stretch;display:flex;align-items:center}
.nav-drop-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;margin:0;cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:600;color:var(--ink-soft);line-height:1;transition:color .15s ease}
.nav-drop-btn:hover,.nav-drop.open>.nav-drop-btn{color:var(--violet)}
.nav-chev{width:13px;height:13px;flex:none;transition:transform .22s ease}
.nav-drop.open .nav-chev,.nav-macc.open .nav-chev{transform:rotate(180deg)}
/* El ::before es un puente invisible: el mouse baja del botón al panel sin que se cierre */
.nav-menu{position:absolute;top:calc(100% + 9px);left:-14px;min-width:186px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 20px 46px rgba(16,20,58,.14);opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.nav-drop.open>.nav-menu{opacity:1;visibility:visible;transform:none}
.nav-links .nav-menu a{display:block;padding:10px 14px;border-radius:10px;font-size:.93rem;font-weight:600;color:var(--ink-soft)}
.nav-links .nav-menu a:hover{background:var(--bg-soft);color:var(--violet)}
.nav-links .nav-menu a[aria-current="page"]{color:var(--ink);font-weight:700}
.nav-links > a[aria-current="page"]{color:var(--ink);font-weight:700}
/* Drawer mobile: Servicios se despliega en su lugar */
.nav-macc-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;background:none;border:0;border-bottom:1px solid var(--bg-soft);padding:13px 0;margin:0;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:600;color:var(--ink-soft);text-align:left}
.nav-macc-btn .nav-chev{width:15px;height:15px}
.nav-macc-panel{display:none;padding:2px 0 6px 14px;border-left:2px solid var(--bg-lav);margin:6px 0 4px}
.nav-macc.open .nav-macc-panel{display:block}
.nav-mobile .nav-macc-panel a{display:block;padding:11px 0;border-bottom:0;font-size:.97rem}
/* HERO (dark, 2 columns, photo card) */
.hero{position:relative;overflow:hidden;color:var(--ink);padding:64px 0 56px;
background:radial-gradient(760px 520px at 88% -4%, rgba(255,112,142,.16), transparent 58%),radial-gradient(720px 620px at 114% 72%, rgba(88,112,255,.18), transparent 55%),radial-gradient(680px 560px at -6% 18%, rgba(150,128,255,.13), transparent 55%)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;max-width:var(--maxw);margin:0 auto}
/* Eyebrow editorial: sin píldora, small caps — menos formas compitiendo en el fold */
/* Eyebrow emparejado con la nota "Sin contratos": misma tipografía, tamaño, peso y color */
.hero-left .eyebrow{background:none;padding:0;border-radius:0;text-transform:none;color:var(--muted);font-size:.92rem;font-weight:500;letter-spacing:0;margin-bottom:20px}
.hero-left h2{font-size:clamp(2.1rem,4.6vw,3.7rem);color:var(--ink);letter-spacing:-.035em;line-height:1.08}
/* "crecer" — flecha con un degradado que fluye de forma continua y sutil (percepción de crecimiento) */
.hero-left h2 .hl{color:var(--coral);position:relative;white-space:nowrap}
.grow{position:absolute;left:0;bottom:-.36em;width:122%;height:1.06em;overflow:visible;color:var(--coral);pointer-events:none}
.grow-base,.grow-head{opacity:.9}
.hero-left .sub{color:var(--ink-soft);font-size:clamp(1.05rem,1.4vw,1.22rem);margin-top:24px;max-width:540px;line-height:1.65}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* Sub: una sola tinta refinada, sin efectos + nota de reaseguro */
.hero-left .sub{max-width:530px;color:var(--ink-soft)}
.hero-left .sub-note{color:var(--muted);font-size:.92rem;font-weight:500;margin-top:14px}
/* Hero stage — Manuel rompe un marco inclinado, con acento coral para contraste */
.hero-stage{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:1/1.2}
.hero-stage .dots{position:absolute;z-index:1;right:-6px;bottom:72px;width:92px;height:92px;background-image:radial-gradient(rgba(32,52,230,.28) 2px,transparent 2px);background-size:16px 16px;opacity:.45}
.hero-card{position:absolute;z-index:2;left:0;right:0;bottom:3.5%;height:82%;border-radius:28px;background:linear-gradient(155deg,#6E82FF 0%,#3247E8 60%,#2033C4 100%);box-shadow:0 28px 60px rgba(32,52,230,.30)}
.hero-photo{position:absolute;z-index:3;left:50%;bottom:0;transform:translateX(-50%);height:104%;width:auto;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 6px 11px rgba(20,26,74,.10))}
.hero-caption{margin-top:26px;text-align:center;font-size:.94rem;color:rgba(255,255,255,.85);font-weight:600}
.hero-caption b{color:#fff;font-weight:800}
/* (chips flotantes removidos del hero) */
/* "Visto en" — logos de prensa bajo la foto de Manuel. Se recolorean a blanco con filter. */
.hero-press{margin-top:32px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px}
.hero-press .hp-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;line-height:1}
.hero-press img{width:auto;filter:brightness(0);opacity:.5}
.hp-img-infobae{height:17px}
.hp-img-rionegro{height:16px}
@media(max-width:640px){.hp-img-infobae{height:15px}.hp-img-rionegro{height:14px}}
/* Credentials / trust bar */
.creds{background:rgba(255,255,255,.72);border-top:1px solid rgba(16,20,58,.06);border-bottom:1px solid rgba(16,20,58,.06)}
.trust{display:flex;align-items:stretch;justify-content:center;padding:0;flex-wrap:wrap}
.trust .titem{display:flex;align-items:center;justify-content:center;gap:14px;padding:26px 42px;min-height:110px}
.trust .titem + .titem{border-left:1px solid var(--line)}
.trust-badges{height:48px;width:auto;max-width:100%;object-fit:contain;display:block}
@media(max-width:400px){.trust-badges{height:38px}}
.trust-stat{display:flex;align-items:center;gap:14px;text-align:left}
.trust-stat .ic{width:46px;height:46px;border-radius:50%;background:var(--bg-lav);display:grid;place-items:center;color:var(--violet);flex-shrink:0}
.trust-stat .ic svg{width:23px;height:23px}
.trust-stat .tnum{font-size:1.5rem;font-weight:800;color:var(--violet);letter-spacing:-.02em;line-height:1;white-space:nowrap}
.trust-stat .tlbl{font-size:.88rem;color:var(--muted);font-weight:600;line-height:1.35;max-width:215px;margin-top:5px}
/* Ratings de terceros: Google (estrellas doradas) y Clutch (estrellas rojas, su marca) */
.trust-rate{display:flex;align-items:center;gap:14px;text-align:left}
.trust-rate .rlogo{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center}
.trust-rate .rlogo svg{width:32px;height:32px}
.trust-rate .rlogo-clutch{width:auto}
.trust-rate .rlogo-clutch img{height:24px;width:auto}
.trust-rate .rrow{display:flex;align-items:center;gap:9px}
.trust-rate .rnum{font-size:1.4rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1}
.trust-rate .rlbl{font-size:.85rem;color:var(--muted);font-weight:600;margin-top:4px}
.trust-rate.clutch .rstars{color:#E8442F}
@media(max-width:860px){
.trust{flex-direction:column}
.trust .titem{padding:18px 24px;min-height:0}
.trust .titem + .titem{border-left:0;border-top:1px solid var(--line)}
.trust-stat .tlbl{max-width:none}
}
/* Marcas que confiaron — carrusel de logos blancos DENTRO del hero (navy continuo, sin cortes) */
.blbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:14px}
.hero-brands{margin-top:64px;overflow:hidden}
@media(max-width:640px){.hero-brands{margin-top:56px}}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mtrack{display:flex;width:max-content;animation:brands-scroll 60s linear infinite;will-change:transform}
.marquee:hover .mtrack{animation-play-state:paused}
/* Animaciones que corrian para siempre (marquees, blinks del panel AEGIS) se pausan fuera de
pantalla via la clase .offscreen que pone el observer del final del bloque JS. !important: el
arrastre del carrusel escribe `animation` inline y sin esto el pausado dejaba de aplicar. */
.hero-brands.offscreen .mtrack,.vidmarquee.offscreen .vidtrack,.vidmarquee:hover .vidtrack,
.pr-marquee.offscreen .pr-track,.pr-marquee:hover .pr-track,
.live.offscreen .pulse i,.live.offscreen .sl-stat i{animation-play-state:paused!important}
/* gap + padding-right idénticos: el final de un grupo queda a la misma distancia del inicio del siguiente → loop invisible */
.mgroup{display:flex;align-items:center;flex-shrink:0;gap:64px;padding-right:64px}
.mgroup img{height:42px;width:auto;filter:brightness(0);opacity:.4;transition:opacity .2s ease}
.mgroup img:hover{opacity:.7}
@keyframes brands-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:640px){.mgroup img{height:34px}.mgroup{gap:44px;padding-right:44px}}
@media (prefers-reduced-motion:reduce){
.mtrack{animation:none}
.marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
}
/* Pain — muro de dolores reales, lectura limpia (sin interacción) */
.pain{background:transparent}
.pain-wrap{max-width:var(--maxw);margin:0 auto}
.pain-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:center}
/* Tres textos, TRES ROLES distintos (no tres tamaños casi iguales):
titular 48,8px/800/--ink · bajada 17,9px/400/--ink-soft · entrada 13,1px/700/--ink-soft.
El salto 2 -> 3 lo dan TAMAÑO (1,37x) y PESO (400 -> 700), no el color: §3 pide jerarquia por
tamaño/peso/tono y prohibe usar acentos de color para fragmentar.
- Se probaron VERSALITAS reutilizando .pf3-tag y se descartaron: son 30 caracteres (los usos
reales de .pf3-tag son "CAISSA" y "DUEÑO DE NEGOCIO"), a 11,5px se pierde la silueta de
palabra, y en mobile quedaba a 41px de "DUEÑO DE NEGOCIO" con estilo casi identico: dos
etiquetas gemelas apiladas.
- Se saco la barra coral del ::before: le ponia el UNICO acento de color de la columna al
texto menos importante, y competia con las burbujas corales que estan al lado (§3).
- NO usar --muted aca: sobre el canvas de degrades da 4,29:1 en la zona periwinkle y NO pasa
AA (umbral 4,5 para texto chico). --ink-soft da 8,87:1 en el peor punto. */
.pain-head{margin-bottom:26px}
.pain-head h2{font-size:var(--h2);letter-spacing:-.028em;color:var(--ink)}
.pain-head p{color:var(--ink-soft);font-size:1.12rem;line-height:1.55;margin-top:12px;max-width:44ch}
.pain-lead{display:block;margin:0;font-size:1.12rem;line-height:1.55;font-weight:700;color:var(--ink-soft)}
/* Dolores — chat estilo WhatsApp (globos con cola, colores de la marca): el dueño escribe/borra rotando las 6 frases y Caissa responde */
.pf3-chat{background:var(--bg-soft);border:1px solid var(--line);border-radius:22px;padding:22px 20px;box-shadow:var(--shadow-sm)}
.pf3-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;list-style:none}
.pf3-sr blockquote{margin:0}
.pf3-owner-side{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.pf3-owner{position:relative;box-sizing:border-box;max-width:88%;background:#fff;border-radius:4px 16px 16px 16px;box-shadow:0 1px 2px rgba(16,20,58,.10);padding:12px 16px}
.pf3-owner::before{content:"";position:absolute;z-index:0;top:0;left:-7px;width:18px;height:18px;background:#fff;border-top-right-radius:16px}
.pf3-owner::after{content:"";position:absolute;z-index:1;top:0;left:-18px;width:18px;height:18px;background:var(--bg-soft);border-top-right-radius:11px}
.pf3-stack{display:grid}
.pf3-ghost,.pf3-live{grid-area:1/1;font-size:1.04rem;font-weight:500;line-height:1.5;color:var(--ink);margin:0}
.pf3-ghost{visibility:hidden;display:block}
.pf3-ghost::after{content:"";display:inline-block;width:5px}
.pf3-live{align-self:start;transition:opacity .26s ease}
.pf3-caret{display:inline-block;width:2px;height:1.05em;background:var(--coral);margin-left:3px;vertical-align:-.15em;border-radius:1px;animation:pf3-blink 1s steps(1,end) infinite;transition:opacity .3s ease}
.pf3-caret.pf3-off{opacity:0;animation:none}
@keyframes pf3-blink{50%{opacity:0}}
.pf3-dots{display:none;align-items:center;gap:5px;height:1.35em;vertical-align:middle}
.pf3-dots.on{display:inline-flex}
.pf3-dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.45;animation:pf3-typing 1s infinite ease-in-out}
.pf3-dots i:nth-child(2){animation-delay:.16s}
.pf3-dots i:nth-child(3){animation-delay:.32s}
@keyframes pf3-typing{0%,70%,100%{transform:translateY(0);opacity:.35}35%{transform:translateY(-5px);opacity:1}}
.pf3-caissa{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:18px}
.pf3-tag{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pf3-bub{position:relative;background:var(--coral);color:#fff;font-weight:700;font-size:1rem;line-height:1.4;padding:11px 17px;border-radius:16px;box-shadow:0 1px 2px rgba(230,62,48,.20);margin:0;max-width:88%}
.pf3-bub:first-of-type{border-radius:16px 4px 16px 16px}
.pf3-bub:first-of-type::before{content:"";position:absolute;z-index:0;top:0;right:-7px;width:18px;height:18px;background:var(--coral);border-top-left-radius:16px}
.pf3-bub:first-of-type::after{content:"";position:absolute;z-index:1;top:0;right:-18px;width:18px;height:18px;background:var(--bg-soft);border-top-left-radius:11px}
/* mobile: la entrada se agrupa con el chat que introduce (14px), no con la bajada (24px) */
@media(max-width:820px){.pain-grid{grid-template-columns:1fr;gap:14px}.pain-head{margin-bottom:24px}.pain-head p,.pain-lead{font-size:1.05rem;max-width:none}}
@media(max-width:560px){.pf3-chat{padding:18px 15px}.pf3-owner,.pf3-bub{max-width:92%}.pf3-ghost,.pf3-live{font-size:1rem}.pf3-bub{font-size:.96rem}.pf3-caissa{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.pf3-caret{display:none}.pf3-dots i{animation:none}}
/* Método PCO — embudo visual de 3 etapas */
/* ============ MÉTODO PCO (m4): línea de proceso ============ */
/* Fondo solido: subio a continuacion de #dolor, que es transparente (muestra el canvas
de degrades). Sin esto quedaban dos degrades pegados, que §3 prohibe. */
.method{padding:64px 0 72px;background:var(--bg)}
.method .section-head{max-width:860px;margin:0 auto 32px}
.m4-lane{position:relative;padding-top:62px}
/* La linea termina EXACTO donde arranca el nodo coral de "Venta": 102px = 36 del nodo
+ 12 del gap + 54 que mide la palabra "Venta" (Jakarta 800 / 1.2rem). Con el viejo
right:30px las rayitas cruzaban el circulo y se solapaban con el texto en PC.
Si cambia esa palabra, recalcular este numero. */
.m4-line{position:absolute;left:18px;right:102px;top:79px;height:2px;display:flex}
.m4-seg-solid{width:calc((100% - 174px)/3);background:var(--ink-soft);border-radius:2px}
.m4-seg-dash{flex:1;background:repeating-linear-gradient(90deg,#AEB4D6 0 7px,transparent 7px 15px)}
.m4-track{list-style:none;margin:0;padding:0 150px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px}
.m4-node{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--ink-soft);font-weight:800;font-size:.95rem;color:var(--ink);transition:border-color .2s ease,color .2s ease}
.m4-body{margin-top:13px;transition:transform .22s ease}
.m4-stage:hover .m4-body{transform:translateY(-3px)}
.m4-stage:hover .m4-node{border-color:var(--ink);color:var(--ink)}
.m4-verb{font-size:1.42rem;letter-spacing:-.02em}
.m4-svc{display:block;margin-top:5px;font-size:.83rem;font-weight:700;letter-spacing:.01em;color:var(--violet)}
.m4-chip{display:inline-block;margin-top:8px;font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--violet);background:var(--bg-lav);padding:4px 11px;border-radius:100px}
.m4-desc{margin-top:9px;font-size:.95rem;line-height:1.55;color:var(--ink-soft);max-width:300px}
.m4-cut{position:absolute;top:0;left:calc((100% - 222px)/3 + 32px);display:flex;gap:9px;align-items:flex-start}
.m4-cut-arrow{width:22px;height:52px;flex:none;margin-top:22px}
.m4-cut-txt{transform:rotate(-1.6deg)}
.m4-cut-main{font-family:'Caveat',cursive;font-weight:700;font-size:1.52rem;line-height:1;color:var(--coral-dk)}
.m4-cut-sub{font-family:'Caveat',cursive;font-weight:700;font-size:1.1rem;line-height:1.25;color:var(--ink-soft);margin-top:3px}
/* Cierre de la línea: mismo disco que los nodos 1-2-3, en coral. Sin píldora ni sombra:
no tiene que leerse como un botón. */
.m4-sale{position:absolute;right:0;top:62px;display:flex;align-items:center;gap:12px}
.m4-sale-node{flex:none;width:36px;height:36px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 5px rgba(255,79,64,.13)}
.m4-sale-node svg{width:17px;height:17px}
.m4-sale-txt{font-weight:800;font-size:1.2rem;letter-spacing:-.01em;line-height:1;color:var(--coral-dk)}
.m4-end{margin-top:36px}
.m4-facts{display:grid;grid-template-columns:1fr 1fr;max-width:820px;margin:0 auto}
.m4-facts p{padding:2px 26px;font-size:.94rem;line-height:1.55;color:var(--ink-soft);text-align:center}
.m4-facts p + p{border-left:1px solid var(--line)}
.m4-ai{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--violet);background:var(--bg-lav);padding:2px 10px;border-radius:100px;margin-right:7px;vertical-align:1px}
.m4-facts a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;transition:color .15s ease}
.m4-facts a:hover{color:var(--violet)}
.m4-punch{margin:26px auto 0;max-width:880px;text-align:center;font-weight:800;font-size:1.28rem;line-height:1.5;letter-spacing:-.015em;color:var(--ink)}
/* Entrada coreografiada: se dispara UNA sola vez con el .reveal existente (io.unobserve). Sin JS propio. */
@media (prefers-reduced-motion:no-preference){
.js .m4-flow.in .m4-seg-solid{animation:m4draw .45s ease-out .1s backwards}
.js .m4-flow.in .m4-seg-dash{animation:m4draw .75s ease-out .55s backwards}
.js .m4-flow.in .m4-s1 .m4-node{animation:m4in .45s ease .12s backwards}
.js .m4-flow.in .m4-s1 .m4-body{animation:m4in .45s ease .24s backwards}
.js .m4-flow.in .m4-cut{animation:m4in .5s ease .66s backwards}
.js .m4-flow.in .m4-s2 .m4-node{animation:m4in .45s ease .74s backwards}
.js .m4-flow.in .m4-s2 .m4-body{animation:m4in .45s ease .86s backwards}
.js .m4-flow.in .m4-s3 .m4-node{animation:m4in .45s ease 1s backwards}
.js .m4-flow.in .m4-s3 .m4-body{animation:m4in .45s ease 1.12s backwards}
.js .m4-flow.in .m4-sale{animation:m4pop .45s cubic-bezier(.34,1.56,.64,1) 1.28s backwards}
}
@keyframes m4in{from{opacity:0;transform:translateY(10px)}}
@keyframes m4pop{from{opacity:0;transform:scale(.8)}}
@keyframes m4draw{from{clip-path:inset(-3px 100% -3px 0)}to{clip-path:inset(-3px 0 -3px 0)}}
/* ---- Mobile: la línea se vuelve vertical (línea a la izquierda, etapas a la derecha) ---- */
@media (max-width:760px){
.method{padding:64px 0 70px}
.m4-lane{padding-top:0}
.m4-line{display:none}
.m4-track{display:block;padding:0}
.m4-stage{position:relative;padding-left:56px;padding-bottom:34px}
.m4-stage:hover .m4-body{transform:none}
.m4-node{position:absolute;left:0;top:0}
.m4-body{margin-top:2px}
.m4-desc{max-width:none}
.m4-stage::before{content:"";position:absolute;left:17px;top:36px;bottom:-2px;width:2px;background:repeating-linear-gradient(180deg,#AEB4D6 0 6px,transparent 6px 13px)}
.m4-s1 .m4-body{position:relative}
.m4-s1 .m4-body::after{content:"";position:absolute;left:-39px;top:0;bottom:-6px;width:2px;border-radius:2px;background:var(--ink-soft)}
.m4-cut{position:relative;margin:20px 0 0;left:auto;top:auto;gap:7px}
.m4-s3{padding-bottom:22px}
.m4-s3::before{bottom:-12px}
.m4-cut-arrow{width:18px;height:40px;margin-top:8px}
.m4-cut-main{font-size:1.42rem;line-height:1.05}
/* El nodo se alinea con los nodos 1-2-3 (36px + 18px de gap = los 54px de padding-left) */
.m4-sale{position:static;display:flex;align-items:center;gap:20px;margin:0;padding-left:0}
.m4-end{margin-top:36px}
.m4-facts{grid-template-columns:1fr}
.m4-facts p{padding:0;text-align:left}
.m4-facts p + p{border-left:0;border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.m4-punch{text-align:left;font-size:1.18rem;margin-top:30px}
}
@media (min-width:761px) and (max-width:900px){
.m4-cut-main{font-size:1.38rem}
.m4-cut-sub{font-size:1.02rem}
}
/* Comparison — "qué nos hace diferentes": fila header azul + filas zebra, Caissa destacada */
/* Fondo al degrade (transparente), no --bg-soft: la barra de credenciales se movio arriba
de esta seccion, asi que ya no separa la tabla de #casos (que tambien es --bg-soft). */
.compare-sec{background:transparent;padding:110px 0}
.compare-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.compare{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff;border:1px solid var(--line)}
.compare-foot{text-align:center;margin-top:38px}
.compare-headrow{display:grid;grid-template-columns:.82fr 1.3fr 1.3fr;background:var(--ink)}
.compare-headrow > div{padding:20px 26px;font-weight:800;display:flex;align-items:center}
.ch-before{color:rgba(255,255,255,.5);font-size:1.2rem;font-weight:700}
.ch-after{color:#fff;font-size:1.36rem;font-weight:800}
.crow{display:grid;grid-template-columns:.82fr 1.3fr 1.3fr;border-top:1px solid var(--line)}
.crow:nth-child(even){background:#fff}
.crow:nth-child(odd){background:#EAF0FF}
.crow > div{padding:16px 26px;font-size:1rem;display:flex;align-items:flex-start;gap:10px}
.c-label{font-weight:700;color:var(--ink);align-items:center}
.c-before{color:#565A78}
.c-after{color:var(--ink);font-weight:800}
.c-before .ci,.c-after .ci{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.c-before .ci{color:#E5484D}
.c-after .ci{color:#12B26A}
/* Audit — franja suave con tinte lavanda-azul (feature moment en clave clara) */
.audit{background:radial-gradient(720px 420px at 100% 0%, rgba(255,79,64,.10), transparent 55%),radial-gradient(720px 520px at 0% 100%, rgba(79,99,255,.14), transparent 55%),linear-gradient(180deg,#F3F4FE,#EBEEFF);padding:110px 0;color:var(--ink);border-top:1px solid rgba(16,20,58,.05);border-bottom:1px solid rgba(16,20,58,.05)}
/* La captura de la consultoria manda en esta seccion: la columna visual pesa mas que la de
texto y el gap se achica, para que la tabla se lea sin irse a todo el ancho (rechazado). */
.audit-panel{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.audit-text .eyebrow{background:var(--bg-lav);color:var(--violet)}
.audit-text h2{font-size:var(--h2-sub);margin-bottom:16px;color:var(--ink)}
.audit-text .intro{color:var(--ink-soft);font-size:1.08rem;margin-bottom:24px}
.discover-label{font-weight:700;margin-bottom:14px}
.discover{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.discover li{display:flex;gap:11px;font-size:.98rem;color:var(--ink-soft)}
.discover li svg{width:20px;height:20px;color:var(--violet);flex-shrink:0;margin-top:2px}
.how-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.how-card h4{font-size:1rem;margin-bottom:8px;color:var(--ink)}
.how-card p{color:var(--muted);font-size:.94rem}
.not-pitch{font-size:.95rem;color:var(--ink-soft);border-left:3px solid var(--violet);padding:4px 0 4px 16px;margin-bottom:22px}
.audit .btn-light{background:var(--violet);color:#fff;box-shadow:0 10px 24px rgba(32,52,230,.28)}
.audit .btn-light:hover{background:var(--violet-2)}
.audit-visual .screenmock{background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.screenmock .bar{display:flex;gap:7px;padding:13px 16px;background:#EFF0F8;border-bottom:1px solid var(--line);align-items:center}
.screenmock .bar span{width:11px;height:11px;border-radius:50%;background:#CFD2E4}
.screenmock .bar .url{margin-left:10px;height:18px;flex:1;background:#fff;border-radius:6px;border:1px solid var(--line)}
.screenmock .scr{position:relative;padding:22px;background:linear-gradient(180deg,#fff,#FAFBFF)}
.screenmock .chart{display:flex;align-items:flex-end;gap:10px;height:170px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.screenmock .chart i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--blue),var(--violet));opacity:.85}
.screenmock .rows{margin-top:16px;display:flex;flex-direction:column;gap:9px}
/* Filas de cuenta con lenguaje real de interfaz */
.mrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 13px;border-radius:9px;font-size:.8rem;font-weight:600;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-soft)}
.mrow b{font-weight:800;color:var(--ink);white-space:nowrap}
.mrow.ok b{color:#0E9F6E}
.mrow.bad{background:#FFF1EF;border:1.5px dashed var(--coral);color:#CF3222}
.mrow.bad b{color:var(--coral-dk);position:relative;padding:2px 8px}
.mrow.bad b svg.circ{position:absolute;inset:-6px -4px;width:calc(100% + 8px);height:calc(100% + 12px);overflow:visible}
.screenmock .nota{position:absolute;right:16px;bottom:9px;font-family:'Caveat',cursive;font-size:1.45rem;color:var(--coral);transform:rotate(-4deg);font-weight:700;z-index:3}
.screenmock .flecha{position:absolute;right:178px;bottom:12px;width:54px;height:44px;z-index:3;color:var(--coral)}
.screenmock .play{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;background:var(--coral);display:grid;place-items:center;box-shadow:0 10px 22px rgba(255,79,64,.45);z-index:3}
.screenmock .play svg{width:18px;height:18px;color:#fff;margin-left:2px}
.screenmock .rec{position:absolute;left:16px;top:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(16,20,58,.85);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.06em;padding:5px 11px;border-radius:100px}
.screenmock .rec i{width:8px;height:8px;border-radius:50%;background:var(--coral);display:block;animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@media(max-width:480px){.screenmock .nota{font-size:1.15rem;right:12px}.screenmock .flecha{right:135px;width:40px;height:36px}}
/* Captura real de una consultoria, dentro de la columna del panel. */
.audit-shot{margin:0}
.shot-frame{position:relative;background:#fff;border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden;line-height:0}
.shot-frame img{display:block;width:100%;height:auto}
.shot-badge{position:absolute;left:12px;top:12px;z-index:2;line-height:1.2;display:inline-block;
background:rgba(16,20,58,.86);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.04em;
padding:6px 12px;border-radius:100px}
.audit-shot figcaption{margin-top:16px;font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
@media(max-width:560px){.shot-badge{font-size:.64rem;padding:5px 10px;left:9px;top:9px}}
.audit-by{display:flex;align-items:center;gap:12px;margin-top:16px;justify-content:center}
.audit-by .av{width:40px;height:40px;border-radius:50%;overflow:hidden;background:#fff;flex-shrink:0}
.audit-by .av img{width:100%;height:100%;object-fit:cover;object-position:top center}
.audit-by span{font-size:.9rem;color:var(--muted);font-weight:600}
/* Fit */
.fit{background:var(--bg-soft)}
.fit-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto}
.fit-card{background:#fff;border-radius:var(--radius);padding:32px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.fit-card.yes{border-top:4px solid var(--violet)}
.fit-card.no{border-top:4px solid #C9C7D6}
.fit-card h3{font-size:1.2rem;margin-bottom:20px}
.fit-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.fit-card li{display:flex;gap:12px;font-size:.96rem;color:var(--ink-soft);line-height:1.45}
.fit-card li svg{width:21px;height:21px;flex-shrink:0;margin-top:2px}
.fit-card.yes li svg{color:var(--violet)}
.fit-card.no li svg{color:#B6B4C6}
.fit-note{display:block;font-style:italic;font-weight:400;color:var(--muted);font-size:.9rem;line-height:1.45;margin-top:5px}
.why-picky{max-width:780px;margin:34px auto 0;text-align:left;background:#FFF6DB;border:1px solid #F0DFA8;border-radius:var(--radius);padding:24px 28px;font-size:1.02rem;color:#4A431F;display:flex;gap:16px;align-items:flex-start}
.why-picky b{color:var(--ink)}
.why-picky .wp-shield{width:46px;height:46px;border-radius:50%;background:#FFEDB8;display:grid;place-items:center;color:#0E9F6E;flex-shrink:0}
.why-picky .wp-shield svg{width:24px;height:24px}
/* Casos con cliente que firma — resultado + industria + cita + persona (foto) + logo */
.rescards{display:grid;gap:16px;max-width:var(--maxw);margin:0 auto}
.rescards.feature{grid-template-columns:1fr 1fr}
.rescards.trio{grid-template-columns:repeat(3,1fr)}
.rescard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.rescard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rescard .rc-tag{align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--violet);border:1.5px solid var(--good-line);border-radius:100px;padding:5px 13px;margin-bottom:18px}
.rescard .rc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.rescard .rc-head .rc-tag{margin-bottom:0}
.rc-biz{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:100px;line-height:1;border:1.5px solid}
.rc-biz.b2c{color:var(--violet);border-color:#CBD3FA;background:#EEF1FE}
.rc-biz.b2b{color:#CF3222;border-color:#F6C9C1;background:#FFF0ED}
.rescard h3{font-size:1.32rem;letter-spacing:-.02em;color:var(--ink);line-height:1.2;margin-bottom:10px}
.rescards.trio .rescard h3{font-size:1.18rem}
.rescard .rc-body{color:var(--ink-soft);font-size:.96rem;line-height:1.6;margin-bottom:12px}
.rescard .rc-body b{color:var(--ink);font-weight:700}
.rescard .rc-metric{font-size:1.05rem;font-weight:800;color:var(--coral);letter-spacing:-.01em;margin-bottom:14px}
.rescard .rc-quote{font-style:italic;color:var(--ink-soft);font-weight:400;font-size:.98rem;line-height:1.55;padding-top:14px;border-top:1px solid var(--line);margin-bottom:14px}
.rescard .rc-quote b{color:var(--ink);font-weight:700}
.rescard .rc-who{margin-top:auto;display:flex;align-items:center;gap:13px;padding-top:14px;border-top:1px solid var(--line)}
.rescard .rc-av{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--violet),var(--blue));display:grid;place-items:center;color:#fff;font-weight:800;font-size:.98rem}
.rescard .rc-av img{width:100%;height:100%;object-fit:cover;transform:scale(1.3);transform-origin:center 22%}
.rescard .rc-av img.av-espacio{transform:scale(1.85);transform-origin:40% 5%}
.rescard .rc-id{flex:1;min-width:0}
.rescard .rc-id b{display:block;color:var(--ink);font-size:.94rem;line-height:1.25}
.rescard .rc-id span{color:var(--muted);font-size:.84rem}
.rescard .rc-logo{flex-shrink:0;margin-left:8px}
.rescard .rc-logo img{height:26px;width:auto;max-width:112px;object-fit:contain;filter:brightness(0);opacity:.5}
@media(max-width:900px){.rescards.feature,.rescards.trio{grid-template-columns:1fr}}
/* How it works — proceso continuo con línea conectora */
.how{background:var(--bg)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1000px;margin:0 auto 58px;position:relative}
.steps::before{content:"";position:absolute;top:36px;left:16%;right:16%;height:2px;background:repeating-linear-gradient(90deg,var(--good-line) 0 10px,transparent 10px 20px)}
.step{text-align:center;position:relative;padding:0 8px}
.step .num{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--blue));color:#fff;display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 10px 22px rgba(32,52,230,.30);position:relative;z-index:1;border:5px solid #fff}
.step .num svg{width:28px;height:28px}
.step .plabel{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);background:var(--bg-lav);padding:4px 12px;border-radius:100px;margin-bottom:10px}
.step h3{font-size:1.14rem;margin-bottom:10px}
.step p{color:var(--muted);font-size:.94rem}
@media(max-width:960px){.steps::before{display:none}}
.expect{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:0 auto 40px;padding-top:46px;border-top:1px solid var(--line)}
.expect .card{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
/* Eran H4 y colgaban del H3 del tercer paso, que no es su padre logico.
Son etiquetas de tarjeta, no encabezados: pasan a texto (SEO). */
.expect .card h4,.expect .card .expect-lbl{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);margin-bottom:10px;font-weight:800}
.expect .card p{color:var(--ink-soft);font-size:.95rem}
.how-cta{text-align:center}
/* Team */
/* Fondo blanco: para que la banda blanca del equipo no quede flotando sobre el degradé */
.team{background:#fff;padding-bottom:0}
/* Banda de equipo: foto grupal full-width al cierre de la sección */
.team-band{margin:72px 0 0;font-size:0;background:transparent}
/* height:auto es obligatorio: el atributo height="273" del HTML es un hint de presentacion
que NO es auto, asi que con width:100% la banda se renderizaba 375x273 en el celular
(1564px de ancho aplastados a 375: 4x de distorsion horizontal). */
.team-band img{width:100%;max-width:1564px;height:auto;margin:0 auto;display:block}
.team-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center;max-width:var(--maxw);margin:0 auto}
.photo-frame{aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#4F63FF 0%,#2034E6 55%,#1426B8 100%);box-shadow:var(--shadow-lg);position:relative;display:flex;align-items:flex-end;justify-content:center}
.photo-frame::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:86%;height:18%;background:radial-gradient(ellipse at center,rgba(0,0,0,.22),transparent 70%)}
.photo-frame img{width:100%;height:99%;object-fit:contain;object-position:bottom center;position:relative;z-index:1;filter:drop-shadow(0 14px 24px rgba(0,0,0,.22))}
.team-photo{position:relative}
/* Placa "Visto en": prensa real bajo la foto de Manuel (logos recoloreados a gris) */
.founder-press{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.founder-press .fp-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;line-height:1}
.founder-press img{width:auto;filter:brightness(0);opacity:.55}
.founder-press .fp-infobae{height:17px}
.founder-press .fp-rionegro{height:16px}
/* Bajados de H2 a texto por SEO (menos H2 en el outline), pero se ven igual:
heredan el peso 800 y el interlineado de los titulos via .team-claim/.answer-claim. */
.team-text h2,.team-text p.team-claim{font-size:var(--h2-sub);margin-bottom:20px}
.team-text p.team-claim,.answer-text p.answer-claim{font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.team-text p{color:var(--ink-soft);font-size:1.05rem;margin-bottom:16px}
.team-text .lead{color:var(--ink);font-weight:600}
.team-text .closing{font-weight:700;color:var(--ink);font-size:1.12rem}
.sign{font-family:'Caveat',cursive;font-weight:700;font-size:2.2rem;color:var(--violet);line-height:1;margin:14px 0 2px}
.sign-role{font-size:.86rem;color:var(--muted);font-weight:600}
.rcard{transition:transform .15s ease,box-shadow .15s ease}
.rcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
:where(a,button,summary):focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
.final :focus-visible{outline-color:#fff}
/* We answer — sección en clave clara pegada a la banda del equipo */
.answer{background:transparent;color:var(--ink);padding:110px 0}
.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;max-width:var(--maxw);margin:0 auto}
.answer-text h2,.answer-text p.answer-claim{font-size:var(--h2-sub);margin-bottom:16px;color:var(--ink)}
.answer-text p{color:var(--ink-soft);font-size:1.02rem;margin-bottom:14px}
.answer-text .hl-line{font-weight:700;color:var(--ink)}
.answer .eyebrow{background:var(--bg-lav);color:var(--violet)}
.answer .commit{background:#fff;border-color:var(--line);box-shadow:var(--shadow-sm)}
.answer .commit .crow2 .ic{background:var(--bg-lav);color:var(--violet)}
.answer .commit .crow2 b{color:var(--ink)}
.answer .commit .crow2 span{color:var(--muted)}
.commit{background:var(--bg-soft);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:18px}
.commit .crow2{display:flex;gap:15px;align-items:flex-start}
.commit .crow2 .ic{width:42px;height:42px;border-radius:12px;background:var(--bg-lav);display:grid;place-items:center;color:var(--violet);flex-shrink:0}
.commit .crow2 .ic svg{width:21px;height:21px}
.commit .crow2 b{display:block;color:var(--ink);font-size:1rem}
.commit .crow2 span{color:var(--muted);font-size:.93rem;line-height:1.45}
.commit .wsp{margin-top:6px;display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--violet);font-size:.96rem}
.commit .wsp svg{width:19px;height:19px}
/* Reviews (citas reales) */
.revs{columns:3;column-gap:18px;max-width:1000px;margin:0 auto}
.rcard{break-inside:avoid;margin-bottom:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}
.rstars{color:#F5B301;font-size:.92rem;letter-spacing:2px}
.rq{font-size:.98rem;color:var(--ink);font-weight:600;line-height:1.55;flex:1}
.rwho{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--line)}
.rav{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--blue));color:#fff;display:grid;place-items:center;font-weight:800;font-size:.88rem;flex-shrink:0;overflow:hidden}
.rav img{width:100%;height:100%;object-fit:cover;transform:scale(1.3);transform-origin:center 20%}
.rn{font-size:.88rem;line-height:1.3}
.rn b{display:block;color:var(--ink)}
.rn span{color:var(--muted)}
@media(max-width:960px){.revs{columns:2}}
@media(max-width:640px){.revs{columns:1}}
/* ===== Prueba social consolidada: casos + video + reseñas en una sola sección ===== */
.proof{background:var(--bg-soft);padding:64px 0}
.proof .section-head{margin-bottom:26px;max-width:none}
.proof .section-head h2{font-size:var(--h2-sub)}
.proof-block{max-width:var(--maxw);margin:0 auto}
.proof-block + .proof-block{margin-top:16px}
.proof-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
/* Carrusel de testimonios en video (posters; los embeds reales se cablean después) */
.rev3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--maxw);margin:0 auto}
.rev3 .rcard{margin:0}
@media(max-width:820px){.rev3{grid-template-columns:1fr}}
/* Reseña destacada (clienta referente: Paula Luzzi) */
.feat-review{max-width:var(--maxw);margin:0 auto 16px;background:linear-gradient(135deg,#fff 0%,#F6F7FF 100%);border:1px solid var(--good-line);border-radius:22px;box-shadow:var(--shadow);padding:26px 34px;display:grid;grid-template-columns:270px 1fr;gap:32px;align-items:center}
.fr-left{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.fr-av{width:112px;height:112px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--violet),var(--blue));box-shadow:0 14px 30px rgba(32,52,230,.26);flex-shrink:0}
.fr-av img{width:100%;height:100%;object-fit:cover;transform:scale(1.5);transform-origin:50% 7%}
.fr-id b{display:block;color:var(--ink);font-size:1.18rem;letter-spacing:-.01em;line-height:1.15}
.fr-id .fr-ceo{display:block;color:var(--ink-soft);font-size:.96rem;font-weight:700;margin-top:3px}
.fr-id .fr-role{display:block;color:var(--muted);font-size:.88rem;margin-top:6px;line-height:1.4;max-width:230px}
.fr-quote{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ink-soft);font-weight:400;letter-spacing:0}
.fr-quote b{color:var(--ink);font-weight:700}
.fr-quote::before{content:"“";color:var(--good-line);font-family:Georgia,serif;font-size:1.85rem;line-height:0;vertical-align:-.32em;margin-right:4px}
@media(max-width:760px){
.feat-review{grid-template-columns:1fr;gap:24px;padding:28px 26px}
.fr-left{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 18px}
.fr-av{width:76px;height:76px}
.fr-id{flex:1;min-width:150px}
.fr-id .fr-role{max-width:none}
}
.vidwrap{max-width:var(--maxw);margin:24px auto 0}
/* Carrusel que se desliza solo (marquee, der -> izq), sin barra horizontal */
.vidmarquee{overflow:hidden;padding:4px 0 6px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.vidtrack{display:flex;width:max-content;animation:vid-scroll 46s linear infinite;will-change:transform}
.vidgroup{display:flex;flex-shrink:0;gap:16px;padding-right:16px}
@keyframes vid-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.vidtrack{animation:none}.vidmarquee{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}.vidmarquee::-webkit-scrollbar{display:none}}
.vidcard{flex:0 0 auto;width:288px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(16,20,58,.12);transition:transform .15s ease,box-shadow .15s ease}
.vidcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.vc-poster{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(150deg,#1B2470,#0C1030)}
.vc-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vc-poster::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(9,12,40,.42) 0%,rgba(9,12,40,.06) 36%,rgba(9,12,40,0) 58%)}
.vc-metric{position:absolute;top:11px;left:11px;font-size:.8rem;font-weight:800;color:#fff;background:rgba(255,79,64,.96);padding:4px 11px;border-radius:100px;letter-spacing:-.01em;z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.28)}
.vc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--coral);display:grid;place-items:center;box-shadow:0 12px 26px rgba(255,79,64,.5);transition:transform .15s ease;z-index:2}
.vidcard:hover .vc-play{transform:translate(-50%,-50%) scale(1.08)}
.vc-play svg{width:20px;height:20px;color:#fff;margin-left:3px}
.vc-foot{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 13px;background:linear-gradient(0deg,rgba(10,13,42,.94),transparent);display:flex;align-items:flex-end;justify-content:space-between;gap:8px;z-index:2}
.vc-name{font-size:.88rem;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.01em}
.vc-name span{display:block;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.62);letter-spacing:0}
.vc-logo{height:19px;width:auto;max-width:78px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9;flex-shrink:0}
.vidcap{max-width:var(--maxw);margin:4px auto 0;font-size:.88rem;color:var(--muted)}
.vidcap a{color:var(--violet);font-weight:700}
.vidcap a:hover{text-decoration:underline}
@media(max-width:560px){.vidcard{width:212px}}
.vidcard{cursor:pointer}
/* Lightbox de video */
.ytlb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.ytlb.open{display:flex}
.ytlb-backdrop{position:absolute;inset:0;background:rgba(8,10,30,.84);backdrop-filter:blur(4px)}
.ytlb-box{position:relative;width:min(920px,100%);z-index:1}
.ytlb-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.ytlb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytlb-close{position:absolute;top:-48px;right:0;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s ease}
.ytlb-close:hover{background:rgba(255,255,255,.3)}
.ytlb-close svg{width:19px;height:19px}
@media(max-width:520px){.ytlb{padding:14px}.ytlb-close{top:-44px}}
/* Sello de "like" — endoso del cliente, motivo reutilizado en toda la home */
/* Sello "Me gusta": solo el icono, más grande y apenas inclinado a la izquierda (sin texto) */
.proof-seal{display:inline-flex;align-items:center;color:var(--coral);flex-shrink:0}
.proof-seal svg{width:26px;height:26px;flex-shrink:0;transform:rotate(-8deg)}
/* Cápsula de prueba contextual — testimonio sobrio junto al claim que respalda */
.proofcap{position:relative;max-width:540px;margin-top:28px;padding:18px 20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm)}
.proofcap-q{font-style:italic;font-weight:600;color:var(--ink);font-size:1rem;line-height:1.5;margin:0 0 14px}
.proofcap-foot{display:flex;align-items:center;gap:11px}
.proofcap-av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--violet),var(--blue))}
.proofcap-av img{width:100%;height:100%;object-fit:cover;transform:scale(1.32);transform-origin:center 20%}
.proofcap-id{min-width:0}
.proofcap-id b{display:block;color:var(--ink);font-size:.88rem;line-height:1.2}
.proofcap-id span{color:var(--muted);font-size:.8rem}
.proofcap-foot .proof-seal{margin-left:auto}
/* Más reseñas — 3 testimonios compactos, 3 en línea (las otras 2 se distribuyen como prueba contextual) */
.rev2{background:#fff;padding:64px 0}
.rev2 .section-head{margin-bottom:26px}
.rev2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--maxw);margin:0 auto}
.r2card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.r2card .proof-seal{position:absolute;top:16px;right:16px}
.r2-metric{font-size:.95rem;font-weight:800;color:var(--coral);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-bottom:8px;padding-right:38px}
.r2-quote{font-style:italic;font-size:.98rem;color:var(--ink-soft);font-weight:400;line-height:1.5;margin:0 0 14px;padding-right:38px}
.r2-quote b{color:var(--ink);font-weight:700}
.r2-who{margin-top:auto;display:flex;align-items:center;gap:11px;padding-top:12px;border-top:1px solid var(--line)}
.r2-av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--violet),var(--blue))}
.r2-av img{width:100%;height:100%;object-fit:cover;transform:scale(1.32);transform-origin:center 20%}
.r2-id{flex:1;min-width:0}
.r2-id b{display:block;color:var(--ink);font-size:.9rem;line-height:1.25}
.r2-id span{color:var(--muted);font-size:.8rem}
.r2-logo{flex-shrink:0}
.r2-logo img{height:20px;width:auto;max-width:84px;object-fit:contain;filter:brightness(0);opacity:.5}
@media(max-width:820px){.rev2-grid{grid-template-columns:1fr;max-width:520px}.proofcap{max-width:none}}
/* LIVE — AEGIS analizando campañas en tiempo real. Sección clara, panel-screenshot oscuro. */
.live{background:var(--bg-soft);color:var(--ink);padding:110px 0}
.live-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;max-width:var(--maxw);margin:0 auto}
.live-visual{min-width:0} /* contencion §16.3: sin esto un nowrap inflaria la pista fr */
.live .eyebrow{background:var(--bg-lav);color:var(--violet)}
.live h2{font-size:var(--h2-sub);color:var(--ink);margin-bottom:16px}
.live .intro{color:var(--ink-soft);font-size:1.06rem;margin-bottom:24px}
.live-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.live-list li{display:flex;gap:13px;align-items:flex-start}
.live-list li .ic{width:30px;height:30px;border-radius:9px;background:var(--bg-lav);display:grid;place-items:center;flex-shrink:0}
.live-list li .ic svg{width:16px;height:16px;color:var(--violet)}
.live-list li b{color:var(--ink);font-weight:700}
.live-list li span{color:var(--ink-soft);font-size:.95rem}
.panel{background:#0F1546;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 30px 64px rgba(16,20,58,.28);overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;background:#141B54;border-bottom:1px solid rgba(255,255,255,.1)}
.pulse{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:800;letter-spacing:.08em;color:#fff}
.pulse i{width:9px;height:9px;border-radius:50%;background:var(--coral);animation:blink 1.4s infinite;box-shadow:0 0 10px rgba(255,79,64,.8)}
.pclock{font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.06em}
.pchart{position:relative;padding:16px 16px 4px}
.pchart svg{width:100%;height:168px;display:block;cursor:crosshair}
.ptip{position:absolute;pointer-events:none;background:#fff;color:var(--ink);font-size:.72rem;font-weight:700;padding:7px 10px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.35);opacity:0;transition:opacity .15s ease;white-space:nowrap;z-index:4}
.ptip small{display:block;font-weight:600;color:var(--muted)}
.pfeed{padding:8px 16px 4px;display:flex;flex-direction:column;gap:7px;min-height:174px;justify-content:flex-start}
.frow{display:flex;align-items:center;gap:9px;font-size:.75rem;font-weight:600;color:rgba(255,255,255,.85);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:7px 11px;animation:feedin .4s ease}
.frow .ft{color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;flex-shrink:0}
.frow .fi{flex-shrink:0;width:14px;height:14px;color:#2BD98F}
.frow.cut{border-color:rgba(255,79,64,.35)}
.frow.cut .fi{color:#FF8A7E}
@keyframes feedin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pkpis{display:flex;border-top:1px solid rgba(255,255,255,.1);margin-top:10px}
.pk{flex:1;padding:14px 10px;text-align:center}
.pk + .pk{border-left:1px solid rgba(255,255,255,.08)}
.pk b{display:block;font-size:1.25rem;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pk span{font-size:.68rem;color:rgba(255,255,255,.55);font-weight:600;line-height:1.3;display:block;margin-top:3px}
.pcap{text-align:center;color:var(--muted);font-size:.76rem;margin-top:12px}
/* SPEEDLINE — velocidad vigilada: mención compacta, tarjeta clara */
.speedline{margin-top:26px;display:flex;align-items:center;gap:28px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 22px;box-shadow:var(--shadow-sm)}
.sl-stat{display:flex;align-items:center;gap:10px;flex-shrink:0}
.sl-stat i{width:8px;height:8px;border-radius:50%;background:#12B26A;animation:blink 1.6s infinite;box-shadow:0 0 8px rgba(18,178,106,.5)}
.sl-stat b{font-size:1.3rem;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:800}
.sl-stat .sl-lbl{font-size:.72rem;color:var(--muted);font-weight:600;line-height:1.3;max-width:96px}
.sl-txt{flex:1;font-size:.88rem;color:var(--ink-soft);line-height:1.5;margin:0}
.sl-spark{position:relative;width:220px;flex-shrink:0}
.sl-spark svg{width:100%;height:54px;display:block;cursor:crosshair}
.stip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:.72rem;font-weight:700;padding:6px 10px;border-radius:7px;box-shadow:0 8px 20px rgba(16,20,58,.25);opacity:0;transition:opacity .12s ease;white-space:nowrap;z-index:3}
@media(max-width:820px){.speedline{flex-wrap:wrap;gap:14px}.sl-txt{flex-basis:100%;order:3}.sl-spark{width:100%}}
/* FAQ */
.faq{background:var(--bg)}
/* FAQ en acordeon. La lista va en UNA columna a proposito: con `columns:2`
abrir un item reflowea la otra columna y el contenido salta. Cerrada ocupa
una fila por pregunta, que es mucho menos alto que la version abierta. */
.faqo-grid{display:flex;flex-direction:column;gap:10px;max-width:820px;margin:0 auto}
.faqo{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden}
.faqo > summary{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;
cursor:pointer;list-style:none;padding:16px 20px;touch-action:manipulation}
.faqo > summary::-webkit-details-marker{display:none}
.faqo > summary::marker{content:""}
.faqo > summary:hover{background:var(--bg-soft)}
.faqo > summary h3{font-size:1rem;line-height:1.4;margin:0;color:var(--ink);font-weight:700}
.faqo-chev{width:19px;height:19px;flex-shrink:0;margin-top:2px;color:var(--muted);transition:transform .2s ease}
.faqo[open] > summary .faqo-chev{transform:rotate(180deg)}
.faqo[open] > summary{background:var(--bg-soft)}
.faqo-body{padding:2px 20px 18px}
.faqo-body p{color:var(--ink-soft);font-size:.94rem;line-height:1.65;margin:0}
.faqo-body p + p{margin-top:10px}
.faqo-body b{color:var(--ink);font-weight:700}
@media(prefers-reduced-motion:reduce){.faqo-chev{transition:none}}
/* FAQ de la home: mismo molde .faqo de las landings pero COMPACTO (Manuel: "bien chicas
pero que esten"). Abierta y sin acordeones (§4). Fondo solido: corta el degrade entre el
Metodo (grad) y el CTA final (grad + placa coral).
OJO §16.4: esto va en la RAIZ de la hoja. Metido dentro del bloque DENSIDAD-MOBILE solo
aplicaba por debajo de 560px y en desktop las tarjetas salian sin tipografia propia. */
/* Prensa: cinco capsulas chicas, no una seccion enorme. Fondo soft para alternar
entre la FAQ (blanca) y el CTA final (degrade). */
.prensa{background:var(--bg-soft)}
/* Carrusel infinito (marquee der -> izq), mismo patron que el de videos.
En PC entran EXACTAMENTE 4 tarjetas: 4x261 + 3x16 de gap = 1092, que es el ancho UTIL del
wrap (--maxw 1140 menos sus 24px de padding a cada lado; el max-width de .pr-wrap no manda).
Si tocas el ancho de .pr-card o el gap de .pr-group, recalcula las dos cosas juntas.
Sin JS no hay clon del grupo, asi que no hay loop: queda como carrusel de scroll manual. */
.pr-wrap{max-width:var(--maxw);margin:0 auto}
.pr-marquee{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:4px 0 6px;touch-action:pan-y}
.pr-marquee::-webkit-scrollbar{display:none}
.pr-marquee.loop{overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.pr-track{display:flex;width:max-content}
.pr-marquee.loop .pr-track{animation:pr-scroll 44s linear infinite;will-change:transform}
.pr-group{display:flex;flex-shrink:0;gap:16px;padding-right:16px}
@keyframes pr-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.pr-marquee.loop{overflow-x:auto;cursor:auto;-webkit-mask-image:none;mask-image:none}.pr-marquee.loop .pr-track{animation:none}}
.pr-card{flex:0 0 auto;width:261px;display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px 14px;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease}
.pr-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:9px;margin-bottom:4px;background:var(--bg-soft)}
.pr-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
/* Nombre del medio. Cuando hay logo va la imagen EN SU COLOR ORIGINAL (sin el filter
brightness(0) que usa el resto del sitio para los logos blancos de clientes): la
autoridad de Infobae se lee en su naranja, no en gris. Los medios sin archivo de logo
caen al texto, que conserva el estilo de siempre. Alto fijo para que las tarjetas
alineen igual tengan logo o texto. */
.pr-medio{display:flex;align-items:center;min-height:18px;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--violet)}
.pr-logo{height:17px;width:auto;display:block}
.pr-tit{font-size:.92rem;line-height:1.45;color:var(--ink);font-weight:600}
.pr-ir{margin-top:auto;padding-top:6px;color:var(--muted);font-size:1rem}
.pr-card:hover .pr-ir{color:var(--violet)}
@media(max-width:560px){.pr-card{width:252px;padding:12px 14px 13px}.pr-group{gap:12px;padding-right:12px}}
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
details.qa{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 24px}
details.qa summary{list-style:none;cursor:pointer;font-weight:700;font-size:1.05rem;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary .ico{width:26px;height:26px;border-radius:50%;background:var(--bg-lav);display:grid;place-items:center;flex-shrink:0;transition:.2s;color:var(--violet)}
details.qa[open] summary .ico{transform:rotate(45deg);background:var(--violet);color:#fff}
details.qa summary:hover{color:var(--violet)}
details.qa summary:hover .ico{background:var(--violet);color:#fff}
details.qa .a{color:var(--ink-soft);font-size:.99rem;padding:0 0 22px;line-height:1.65}
/* Final CTA — único momento coral full-bleed: el crescendo de la página */
/* CTA final: panel coral redondeado dentro del wrap, 2 columnas (copy + bloque personal de Manuel) */
.final{padding:64px 0;background:transparent}
.final-panel{position:relative;max-width:var(--maxw);margin:0 auto;background:linear-gradient(150deg,#FF6252 0%,var(--coral) 45%,var(--coral-dk) 100%);border-radius:28px;padding:60px 68px;display:grid;grid-template-columns:1.4fr .6fr;gap:52px;align-items:center;color:#fff;box-shadow:0 26px 60px rgba(230,62,48,.26);overflow:hidden}
.final .btn-light{color:var(--coral-dk)}
.final-panel h2{font-size:var(--h2);letter-spacing:-.028em;margin:0 0 16px}
.final-panel p.body{color:rgba(255,255,255,.92);font-size:1.06rem;max-width:560px;margin:0 0 28px}
.final-panel .btn-light{font-size:1.02rem;padding:15px 30px}
.final-reassure{margin-top:18px;color:rgba(255,255,255,.85);font-size:.9rem;font-weight:400}
.final-side{display:flex;flex-direction:column;align-items:center;text-align:center}
.fs-photo{width:164px;height:164px;border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.35);box-shadow:0 18px 40px rgba(0,0,0,.18);margin-bottom:16px;background:#fff}
.fs-photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.fs-line{font-size:1.02rem;font-weight:700;line-height:1.35}
.fs-name{font-family:'Caveat',cursive;font-size:2rem;line-height:1;margin-top:10px}
.fs-role{font-size:.84rem;color:rgba(255,255,255,.8);margin-top:5px}
@media(max-width:900px){
.final-panel{grid-template-columns:1fr;gap:36px;padding:48px 30px;text-align:center}
.final-panel p.body{margin:0 auto 28px}
.fs-photo{width:132px;height:132px}
}
/* Footer — versión clara idéntica a caissa.digital (badges + columnas + legal) */
footer{--muted:#656983;background:#EDEEF3;color:var(--ink-soft);padding:52px 0 28px}
.foot-top{display:grid;grid-template-columns:auto 1fr;gap:30px 46px;align-items:center;padding-bottom:30px}
.foot-logo img{height:34px;width:auto;display:block}
.foot-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;background:#fff;border-radius:16px;padding:15px 24px;box-shadow:var(--shadow-sm)}
.foot-badges img{width:auto;display:block}
.foot-badges a{display:inline-flex;align-items:center;transition:opacity .15s ease}
.foot-badges a:hover{opacity:.7}
.foot-links{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px 40px;border-top:1px solid var(--line);padding-top:30px}
.foot-col{flex:1 1 0;min-width:170px}
/* La página actual se marca por peso, no por color (una sola tinta, §3 de CLAUDE.md). */
.foot-col a[aria-current="page"]{color:var(--ink);font-weight:700}
/* Los titulos de columna pasaron de h2 a h3 (SEO: sacarlos del outline de la home). */
.foot-col h2,.foot-col h3{color:var(--ink);font-size:1rem;font-weight:800;margin-bottom:15px}
.foot-col a{display:flex;align-items:center;gap:9px;color:var(--ink-soft);font-size:.92rem;font-weight:500;margin-bottom:11px;transition:color .15s ease}
.foot-col a:hover{color:var(--violet)}
.foot-col a .chev{width:15px;height:15px;color:var(--coral);flex-shrink:0}
.foot-social{display:flex;gap:11px;margin-bottom:16px}
.foot-social a{width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-soft);margin:0}
.foot-social a:hover{color:var(--violet);border-color:var(--violet)}
.foot-social svg{width:17px;height:17px}
.foot-loc svg{width:16px;height:16px;color:var(--coral);flex-shrink:0}
/* Enlaces destacados: ultima fila del mapa del sitio, para SEO/GEO. Va al final a proposito
(mas chica y en mayusculas el rotulo), asi refuerza sin competir con la navegacion real. */
.foot-feat{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;border-top:1px solid var(--line);padding-top:22px}
.foot-feat h3{color:var(--ink);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0}
.foot-feat a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:.9rem;font-weight:500;transition:color .15s ease}
.foot-feat a:hover{color:var(--violet)}
.foot-feat a .chev{width:14px;height:14px;color:var(--coral);flex-shrink:0}
.foot-bottom{display:grid;grid-template-columns:1fr auto;gap:20px 44px;align-items:start;padding-top:26px;border-top:1px solid rgba(16,20,58,.1)}
.foot-legal p{font-size:.9rem;line-height:1.6;color:var(--muted);margin:0 0 10px}
.foot-legal a{color:var(--violet);font-weight:600;text-decoration:underline}
.foot-legal .foot-desc{max-width:760px}
.foot-legal .foot-desc b{color:var(--ink);font-weight:700}
.foot-copy{text-align:right}
.foot-copy span{display:block;color:var(--muted);font-size:.86rem;font-weight:700}
.foot-copy a{display:inline-block;color:var(--coral);font-size:.86rem;margin-top:5px}
.foot-copy a:hover{text-decoration:underline}
@media(max-width:960px){
.foot-top{grid-template-columns:1fr;gap:24px;justify-items:center;text-align:center}
.foot-links{gap:26px 34px;justify-content:center;width:100%;padding-top:26px}
.foot-col{flex:0 1 auto;min-width:0}
.foot-col a{justify-content:center}
.foot-feat{justify-content:center;text-align:center;padding-top:20px}
.foot-social{justify-content:center}
.foot-bottom{grid-template-columns:1fr;text-align:center}
.foot-copy{text-align:center}
.foot-legal .foot-desc{margin-left:auto;margin-right:auto}
}
/* Reveal */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (max-width:960px){
.hero-grid{grid-template-columns:1fr;gap:48px}
.hero-stage{max-width:330px}
.team-grid,.audit-panel,.answer-grid,.live-grid{grid-template-columns:1fr;gap:36px}
.team-photo{max-width:420px;margin:0 auto}
.steps{grid-template-columns:1fr;gap:30px;max-width:520px}
.expect{grid-template-columns:1fr;max-width:520px;padding-top:34px}
}
@media (max-width:820px){
section{padding:60px 0}
.compare-sec,.audit,.results,.answer,.live{padding:72px 0}
.services{padding:60px 0}
.nav-links,.nav-cta .btn{display:none}
.burger{display:flex}
.nav-mobile.open{display:flex}
.fit-cols{grid-template-columns:1fr}
.cases{grid-template-columns:1fr}
.compare-wrap{padding:0 18px}
.compare-headrow{display:none}
.compare{border:0;box-shadow:none;background:transparent;display:flex;flex-direction:column;gap:16px}
.crow{grid-template-columns:1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:#fff}
.crow:nth-child(odd),.crow:nth-child(even){background:#fff}
.crow > div{border-left:0 !important;padding:14px 18px;display:block}
.c-label{background:var(--ink);color:#fff;font-size:1.08rem;font-weight:800}
.c-before::before{content:"La mayoría de las agencias";display:block;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:6px}
.c-after::before{content:"";display:block;width:76px;height:16px;background:url(../img/logo-caissa.webp) no-repeat left center/contain;margin-bottom:8px}
.c-after{border-top:1px solid var(--line)}
.c-before .ci,.c-after .ci{display:inline-block;vertical-align:-4px;margin-right:7px;margin-top:0}
}
/* Barra sticky mobile: el CTA donde vive el pulgar */
.sticky-cta{display:none}
@media (max-width:820px){
.sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.98);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px}
.sticky-cta .btn{flex:1;justify-content:center;padding:13px 18px;font-size:.95rem}
body{padding-bottom:calc(5.25rem + env(safe-area-inset-bottom))}
/* La barra de /agencia-marketing-neuquen/ es la unica con dos botones (Llamar +
Reserva tu consultoria) y por eso puede partirse en dos filas y medir mas alto.
Se le reserva mas espacio con :has(); si el navegador no lo soporta, cae al valor
de arriba, que es el que necesitan las otras 18. No se usa un breakpoint de ancho
a proposito: el ancho al que se parte depende del tamano de letra del usuario. */
body:has(.sticky-cta .btn + .btn){padding-bottom:calc(6.25rem + env(safe-area-inset-bottom))}
html{scroll-padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
}
@media (max-width:560px){
.foot-badges{gap:12px 16px;padding:14px 16px}
.final{padding:48px 0}
.final-panel{padding:40px 22px;border-radius:22px}
}
/* Los
del claim se MANTIENEN en mobile a propósito: ocultarlos pegaba las palabras
("crecertu negocio conGoogle Ads") porque no hay espacio alrededor del
. Con los saltos
puestos el rag queda controlado en tres renglones y entra hasta en 320px. */
@media (max-width:820px){
/* Hero mobile: menos aire y una foto que no se coma media pantalla (§ATF) */
.hero{padding:40px 0 44px}
.hero-grid{gap:34px}
.hero-left .eyebrow{margin-bottom:14px}
.hero-left .sub{margin-top:18px}
.hero-cta{margin-top:26px}
.hero-stage{max-width:286px}
.hero-press{margin-top:24px}
}
@media (max-width:560px){
.hero-stage{max-width:248px}
.hero-stage .dots{width:66px;height:66px;bottom:56px;right:-2px;background-size:13px 13px}
.hero-card{border-radius:22px}
}
@media (max-width:820px){
section{padding:52px 0}
.compare-sec,.audit,.results,.answer,.live,.services{padding:58px 0}
.proof,.rev2{padding:56px 0}
.method{padding:56px 0 60px}
.section-head{margin-bottom:30px}
.team-grid,.audit-panel,.answer-grid,.live-grid{gap:30px}
.steps{gap:26px}
}
@media (max-width:560px){
/* Ritmo de seccion */
section{padding:44px 0}
.compare-sec,.audit,.results,.answer,.live,.services{padding:48px 0}
.proof,.rev2{padding:46px 0}
.method{padding:46px 0 50px}
.final{padding:40px 0}
.rel{padding:40px 0}
.section-head{margin-bottom:24px}
.wrap{padding:0 20px}
/* Tarjetas de la home: menos marco, mismo contenido */
.rescard{padding:20px 20px}
.rescards{gap:12px}
.feat-review{padding:22px 20px;gap:16px}
.fit-card{padding:22px 20px}
.fit-cols{gap:14px}
.why-picky{padding:20px 22px}
.expect .card{padding:20px 22px}
.commit{padding:20px 22px}
.rcard{padding:20px 22px}
.r2card{padding:20px 22px}
.pf3-chat{padding:22px 20px}
.final-panel{padding:32px 20px}
.screenmock .scr{padding:16px}
/* Tarjetas compartidas por las landings */
.svc-card,.ind,.tst,.pcard,.cons,.faqo,.wedo-c,.pp-b,.cta-ga{padding:20px 20px}
.price-note{padding:18px 20px}
/* Titulares un escalon mas chicos: a 375px un H2 de 32,8px se come tres renglones.
Valores planos, no clamp: con vw el titulo crecia justo por debajo del breakpoint. */
:root{--h2:1.86rem;--h2-sub:1.62rem}
.rescard h3{font-size:1.22rem}
.m4-verb{font-size:1.3rem}
/* Tabla comparativa apilada: 6 filas x 237px eran 1.448px de alto para 74 palabras.
Se afina el aire de cada celda y la barra de titulo; el contenido no cambia. */
.compare{gap:11px}
.crow > div{padding:11px 16px}
.c-label{font-size:1rem;padding-top:10px;padding-bottom:10px}
.c-before::before,.c-after::before{margin-bottom:3px}
/* Enlaces del footer: 24px de alto no es un objetivo tactil. Con el padding quedan en 44. */
.foot-col a{padding:10px 0;margin-bottom:0}
.foot-legal a,.foot-copy a{display:inline-block;padding:4px 0}
}
/* =====================================================================
BLINDAJE (lo agrega el generador, no viene del HTML original)
Los badges del footer y estos logos se dimensionaban SOLO con el
atributo height del HTML. Cualquier hoja que declare img{height:auto}
lo anula y los manda al tamano natural: los badges pasan de 80px de
alto a 1727px. El tema ya saca el CSS de bloques de WordPress, que es
quien traia esa regla, pero declararlo aca cuesta 400 bytes y deja de
depender de eso. Tambien evita salto de layout (CLS) mientras cargan.
===================================================================== */
.foot-badges img{width:auto;height:38px;display:block}
.foot-badges img[src*="badge-premier"],
.foot-badges img[src*="badge-gptw"],
.foot-badges img[src*="badge-ecommerce"]{height:50px}
/* El panel del desplegable, un poco mas cerca del nav (venia con 9px de aire).
El ::before es un puente invisible que cubre ese hueco: sin el, al bajar el
mouse del boton al panel se dispara mouseleave y el menu se cierra en la cara
del usuario. Los dos numeros TIENEN que ser iguales. */
.nav-menu{top:calc(100% + 4px)}
.nav-menu::before{top:-4px;height:4px}
/* Los titulos de columna del footer dejaron de ser headings: son rotulos, no
estructura del documento (auditoria SEO del blog). Como no heredan el
font-weight:800 ni el line-height de h1,h2,h3,h4, van explicitos. Se ven igual
que con .foot-col h2 / .foot-col h3, que es lo que declara base.css. */
.foot-col .foot-col-t{color:var(--ink);font-size:1rem;font-weight:800;line-height:1.12;margin:0 0 15px}
/* Rotulo de "Enlaces destacados", la ultima fila del footer. Va en
y no en
por el mismo motivo que los titulos de columna: es una etiqueta, no una seccion
del documento. Copia lo que base.css le da a .foot-feat h3. */
.foot-feat .foot-feat-t{color:var(--ink);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0}
/* =============================================================================
OVERRIDE · home
============================================================================= */
/* La barra sticky no aparece hasta los primeros 100px de scroll.
-------------------------------------------------------------------------
Pedido de Gaston. El repo la dejo SIEMPRE visible (Manuel pidio eso) y su
visibilidad quedo como puro CSS, sin JavaScript. Acá se le agrega un umbral,
pero SOLO en la home: es la unica pagina donde la barra tapaba el CTA del
hero, o sea el "doble call to action" del ATF.
Como funciona: base.js le pone la clase .show al body pasados los 100px. La
clase caissa-sticky-scroll la pone inc/parts.php, y es la que hace que este
bloque aplique: sin ella la barra se comporta como en el resto del sitio.
Se anima con transform y no con display, que no es animable. El 110% la saca
completa incluso con el safe-area de los iPhone con notch.
Sin JavaScript la barra se ve de entrada, que es el comportamiento del repo:
vale mas tener el CTA que esconderlo esperando un scroll que nadie va a medir. */
@media (max-width:820px){
body.caissa-sticky-scroll .sticky-cta{
transform:translateY(110%);
transition:transform .24s cubic-bezier(.4,0,.2,1);
will-change:transform
}
body.caissa-sticky-scroll.sticky-visible .sticky-cta{transform:none}
html:not(.js) body.caissa-sticky-scroll .sticky-cta{transform:none}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
body.caissa-sticky-scroll .sticky-cta{transition:none}
}