/* ============================================================ undefined · REDISEÑO DEL LANDING (front-page) — reemplaza visualmente la landing anterior. Solo se carga en la home (is_front_page(), ver functions.php) para no afectar otras páginas del sitio que siguen con el theme.css original. ============================================================ */ :root{ --red:#CE1B22; --ink:#E8ECF1; --muted:#8A97A6; --lime:#DCE775; /* Escala de espaciado — MOBILE-FIRST: estos son los valores base (móvil). Los breakpoints de abajo los escalan hacia arriba para tablet/desktop/large-desktop. Usar var(--space-*) en vez de valores sueltos mantiene el ritmo consistente en todo el sitio. */ --space-side: 1rem; /* padding lateral de secciones */ --space-side-tight: .75rem;/* padding lateral de tarjetas/paneles internos */ --space-gap: .875rem; /* gap por defecto en flex/grid de contenido de tarjeta */ --space-gap-lg: 1.5rem; /* gap entre tarjetas/columnas de un grid */ /* Safe areas — notch / Dynamic Island / home indicator (iOS) y gesture bar (Android). Requiere (ya está en el ). El fallback 0px es obligatorio: env() sin fallback es inválido en navegadores viejos. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* ============================================================================ BREAKPOINTS ESTÁNDAR DEL PROYECTO (mobile-first: min-width, escalan hacia arriba) Mobile : 0 – 640px → valores base de :root (arriba) Tablet : 641px – 900px Desktop : 901px – 1200px Large Desktop : 1201px+ El padding vertical de cada sección (.op-section, .wk-content, .fin-section, .ck-section...) se deja hardcoded a propósito: cada una tiene un ritmo distinto ya afinado a mano contra su contenido — no se fuerza un único valor genérico ahí. Los overrides de layout (grid-template-columns, tamaños de imagen, etc.) siguen usando max-width por sección para no romper ese ajuste fino; estas reglas de :root son el único lugar donde se DEFINE la escala de espaciado lateral/gap. */ @media(min-width:641px){ :root{ --space-side: 1.5rem; --space-side-tight: 1.1rem; --space-gap: 1.1rem; --space-gap-lg: 1.75rem; } } @media(min-width:901px){ :root{ --space-side: 1.75rem; --space-side-tight: 1.35rem; --space-gap: 1.25rem; --space-gap-lg: 2rem; } } @media(min-width:1201px){ :root{ --space-side: 2rem; --space-side-tight: 1.5rem; --space-gap: 1.4rem; --space-gap-lg: 2.25rem; } } *{box-sizing:border-box;margin:0;padding:0;} html{-webkit-text-size-adjust:100%;} body{background:#000;color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;} /* NAVBAR */ /* alto total = 64px de barra + notch/Dynamic Island; el padding-top empuja el contenido hacia abajo del notch, y como .nav-inner usa height:100% (border-box) sigue midiendo 64px exactos → el logo permanece centrado en la franja visible de siempre. */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(64px + var(--safe-top));padding-top:var(--safe-top); padding-left:var(--safe-left);padding-right:var(--safe-right); background:rgba(8,11,16,0);backdrop-filter:blur(0px);transition:background .25s,backdrop-filter .25s;} .nav.solid{background:rgba(8,11,16,.85);backdrop-filter:blur(14px);} .nav-inner{position:relative;height:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;padding:0 28px;} .nav-wm{position:absolute;left:50%;top:50%;height:26px;transform:translate(-50%,-50%);opacity:0;will-change:opacity,filter,transform;} .nav-underline{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);transform:scaleX(0);box-shadow:0 0 14px rgba(206,27,34,.8);} /* ESCENA ÚNICA + STACK DE REVELADO .pin-stack superpone DOS paneles sticky en la MISMA celda de grid (grid-area 1/1): ambos llegan a top:0 en el mismo punto de scroll y permanecen fijos el mismo tiempo. El panel de arriba (calc, z-index más alto) se desvanece/achica sobre el panel de abajo (briefing, z-index más bajo), que ya está ahí, quieto — así se revela DETRÁS, nunca sube desde abajo. */ .pin-stack{display:grid;} .scope{grid-area:1/1;position:relative;height:520vh;} /* height:100vh + 100dvh (fallback → real): 100dvh se ajusta cuando la barra de direcciones de Safari/Chrome móvil aparece/desaparece, así el panel nunca queda cortado ni con espacio muerto debajo. Navegadores sin soporte dvh usan 100vh. */ .stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;z-index:2;will-change:opacity,transform;} /* reduced-motion: sin overlap sticky (el briefing quedaría atrapado detrás para siempre) — todo vuelve a flujo normal, lineal, sin animación. */ @media(prefers-reduced-motion:reduce){ .pin-stack{display:block;} .scope{height:100vh;height:100dvh;} .stage{position:relative;} .vsl-section{position:relative!important;height:auto!important;min-height:100vh;min-height:100dvh;} } /* --- capas de fondo --- */ .layer{position:absolute;inset:0;will-change:opacity;} .l-atmos{z-index:0;background: radial-gradient(120% 80% at 50% -10%,rgba(206,27,34,.13),transparent 55%), radial-gradient(90% 70% at 50% 120%,rgba(20,26,34,.9),transparent 60%), linear-gradient(180deg,#080B10,#06090E 60%,#04060A);} .l-puerto{z-index:1;background:url('../img/puerto.jpeg') center/cover;opacity:0;filter:brightness(.34) contrast(1.06);} .l-oficina{z-index:4;background:url('../img/oficina.jpeg') center/cover;opacity:0;filter:brightness(.55) contrast(1.05);} .l-scrim{z-index:2;opacity:0;background:linear-gradient(180deg,rgba(6,9,14,.6),rgba(6,9,14,.45) 45%,rgba(6,9,14,.8));} /* fondo OPACO y fijo de la calculadora (cubre puerto y oficina) */ .l-redaura{z-index:3;opacity:0;background: radial-gradient(58% 54% at 50% 46%,rgba(206,27,34,.40),rgba(140,14,18,.12) 46%,transparent 72%), radial-gradient(130% 95% at 50% 120%,rgba(120,10,14,.35),transparent 60%),#060305;} .l-scan{z-index:5;pointer-events:none;opacity:.28;background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.25) 3px);} .l-vig{z-index:5;pointer-events:none;box-shadow:inset 0 0 220px 40px rgba(0,0,0,.7);} .bg-grid{z-index:0;opacity:.4;background-image:linear-gradient(rgba(140,151,166,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,151,166,.06) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(80% 60% at 50% 42%,#000,transparent 80%);} /* --- HERO foreground --- */ /* justify-content:safe center (no solo "center"): en flex-direction:column el eje principal es vertical, así que esto controla el centrado VERTICAL. El problema real reportado: en ventanas cortas o angostas (mobile Y desktop redimensionado), el contenido del hero (logo+ticker+titular+subtítulo+ calificación+CTA) puede ser más alto que el viewport. Con "center" a secas, al desbordar recorta PAREJO arriba y abajo (lo de arriba, el wordmark del logo, es lo que más se nota cortado). "safe center" es la keyword nativa de CSS Box Alignment L3 para esto: centra SI CABE, y si no cabe, cae a alineación desde el inicio (arriba) para no recortar contenido — sin necesidad de adivinar breakpoints por ancho O alto. Fallback en navegadores viejos que no reconocen "safe": el valor completo se ignora y actúa como el inicial (flex-start), que es exactamente el comportamiento de respaldo que queremos — nunca degrada al problema original. */ /* ============================================================================ RAÍZ DEL PROBLEMA DE MÁRGENES DEL HERO El margen sobre el logo NO era un margen: era el espacio SOBRANTE del centrado. Al encoger la ventana el sobrante baja a 0 y después a negativo, y como .stage recorta (overflow:hidden), el logo se pega al borde y acaba cortándose. Dos correcciones: 1) padding-block: reserva un margen REAL que el centrado no puede comerse, con suelo en las safe-area (notch / barra de gestos). 2) centrado con márgenes automáticos en vez de `justify-content:center`. Cuando no hay espacio libre los auto valen 0 y el contenido arranca en el borde del padding — nunca desborda hacia ARRIBA. `safe center` hace lo mismo, pero no existe en Safari < 15.4: ahí caía a `center` y recortaba por los dos lados, que es exactamente el corte reportado. ========================================================================== */ .fg{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;pointer-events:none; box-sizing:border-box; padding-top:max(clamp(8px,2.6vh,32px),env(safe-area-inset-top)); padding-bottom:max(clamp(8px,2.6vh,32px),env(safe-area-inset-bottom));} .fg>.estandarte-holder{margin-top:auto;} .fg>.hero-copy{margin-bottom:auto;} .glow{position:absolute;z-index:1;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(206,27,34,.55),rgba(206,27,34,0) 60%);filter:blur(30px);opacity:.35;will-change:transform,opacity;} .estandarte-holder{position:relative;z-index:2;will-change:transform,opacity;transform-origin:50% 11.5%;} .estandarte-inner{animation:float 6s ease-in-out infinite;} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .estandarte{display:block;width:min(460px,68vw);height:auto;filter:drop-shadow(0 24px 60px rgba(206,27,34,.28));clip-path:inset(0 0 var(--clip,0%) 0);will-change:filter;} .speedlines{position:absolute;left:0;right:0;top:-25%;height:150%;z-index:1;pointer-events:none;opacity:0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 13px,rgba(224,236,255,.09) 13px 14px,rgba(255,255,255,0) 14px 38px);mask-image:radial-gradient(58% 80% at 50% 45%,#000,transparent 74%);will-change:opacity,transform;} /* width:100% para que NO se ajuste al hijo más ancho: como flex item de .fg se encogía al ancho de la tarjeta (92vw) y le sumaba sus 20px de padding, quedando 8px más ancha que la pantalla y colgando 4px por cada lado. No recortaba nada (eran padding), pero sería un desbordamiento real si el padre dejara de recortar. */ .hero-copy{position:relative;z-index:2;width:100%;text-align:center;margin-top:30px;padding:0 20px;will-change:transform,opacity;} .hero-bridge{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.8;margin-bottom:10px;} .ticker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--lime);margin-bottom:16px; max-width:100%;white-space:normal;overflow-wrap:break-word;} /* Una sola línea a cualquier ancho: el tamaño se ata al viewport (vw) en lugar de a un max-width en ch, y nowrap impide el salto. Así el titular ocupa una franja en vez de tres y el CTA sube ~2 líneas. El mínimo del clamp está calculado para que la frase completa quepa aún en 320px de ancho. */ .headline{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(18px,5.5vw,54px);line-height:1.04;max-width:none;white-space:nowrap;margin:0 auto;} .headline .r{color:var(--red);} .sub{color:var(--muted);font-size:15px;margin-top:16px;max-width:44ch;margin-inline:auto;line-height:1.55;} .hero-qualify{color:var(--muted);font-size:13px;margin-top:10px;max-width:40ch;margin-inline:auto;line-height:1.5;opacity:.85;} .hero-trust{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;} .hero-trust-photo{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.25);} .hero-trust-line{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;} .hero-cta-wrap{margin-top:26px;pointer-events:auto;} .hero-cta{display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:#0D1117;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:15px 26px;border-radius:4px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 10px 30px rgba(220,231,117,.18);} .hero-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(220,231,117,.28);} .hero-cta-support{color:var(--muted);font-size:12px;margin-top:10px;opacity:.85;} .hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:9;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;will-change:opacity;} .hint .bar{width:1px;height:34px;background:linear-gradient(var(--muted),transparent);animation:drop 1.8s ease-in-out infinite;} @keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* --- INFO (sobre el puerto estático) --- */ .info-fg{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;} .info-inner{width:min(1040px,92vw);} .info-head{margin-bottom:26px;will-change:opacity,transform;} .info-kick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin-bottom:12px;} .info-title{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(30px,4.6vw,52px);line-height:.96;color:#fff;max-width:18ch;} .info-lead{color:#C7CFD9;font-size:15.5px;line-height:1.6;max-width:56ch;margin-top:14px;} .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#1A202C;border:1px solid #1A202C;} .info-card{position:relative;overflow:hidden;background:rgba(7,10,15,.9);backdrop-filter:blur(4px);padding:24px 26px 24px 28px;opacity:0;will-change:opacity,transform,clip-path;} .info-card .edge{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;box-shadow:0 0 12px rgba(206,27,34,.7);} .info-card .swipe{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(206,27,34,.28) 50%,transparent 65%);transform:translateX(-130%);} .info-card .cc{position:relative;} .info-card .num{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;font-size:46px;line-height:.9;color:#fff;will-change:transform;margin-bottom:8px;} .info-card .kick{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin-bottom:10px;} .info-card .kick.brand{color:var(--red);} .info-card .chead{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;font-size:23px;line-height:1.02;letter-spacing:.01em;color:#fff;margin:0 0 10px;} .info-card .txt{color:var(--muted);font-size:13.5px;line-height:1.55;} /* --- CALC (más grande) --- */ /* Mismo criterio que .fg: el margen superior no puede depender de que el JS alcance a recalcular la escala. Con padding + márgenes automáticos, aunque el script falle, tarde o el navegador esté limitando los frames, el panel arranca en el borde del padding y NUNCA invade la parte de arriba — que es donde vive el badge PREVIEW · IMPORT-A-MATIC. El ajuste por JS sigue afinando el tamaño; esto es sólo el suelo que garantiza que no se corte. */ /* pointer-events:none es OBLIGATORIO aquí. Esta capa cubre toda la escena con z-index:7 —por encima del 6 donde vive el CTA del hero— y arranca en opacity:0. Pero opacity:0 NO desactiva los clics: la capa invisible se tragaba todos los clics del slide 1 y el botón no llegaba a recibir ninguno. .calc-panel lleva su propio pointer-events:auto, así que el panel de la calculadora sigue siendo interactivo cuando se muestra. */ .calc-fg{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;opacity:0; pointer-events:none; box-sizing:border-box; padding-top:max(clamp(8px,2.6vh,32px),env(safe-area-inset-top)); padding-bottom:max(clamp(8px,2.6vh,32px),env(safe-area-inset-bottom));} .calc-fg>.calc-frame{margin-block:auto;} /* El panel sólo recibe ratón cuando la escena está visible (el JS pone .calc-viva). Lo único que necesita es el pointerenter/leave que pausa la rotación de vehículos; a cambio, mientras está invisible no le roba ni un clic al CTA del hero. */ .calc-fg.calc-viva .calc-panel{pointer-events:auto;} .calc-panel{position:relative;width:min(600px,94vw);background:rgba(11,15,21,.94);backdrop-filter:blur(10px);border:1px solid #232A34;border-top:3px solid var(--red);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(206,27,34,.08);transition:transform .5s cubic-bezier(.2,.85,.25,1),box-shadow .5s;transform:scale(.94);} .calc-panel.popped{transform:scale(1);box-shadow:0 44px 120px rgba(0,0,0,.72),0 0 70px rgba(206,27,34,.32),0 0 0 1px rgba(206,27,34,.25);} .calc-panel.recalc{animation:recalcpulse .55s ease-out;} @keyframes recalcpulse{0%{box-shadow:0 44px 120px rgba(0,0,0,.72),0 0 110px rgba(206,27,34,.6),0 0 0 1px rgba(206,27,34,.6)}100%{box-shadow:0 44px 120px rgba(0,0,0,.72),0 0 70px rgba(206,27,34,.32),0 0 0 1px rgba(206,27,34,.25)}} .calc-badge{position:relative;overflow:hidden;padding:12px 20px;border-bottom:1px solid #1A202C;display:flex;align-items:center;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#C7CFD9;background:linear-gradient(90deg,rgba(206,27,34,.16),rgba(206,27,34,.04));} .calc-badge::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,transparent,rgba(220,231,117,.35),transparent);animation:scan 3.2s linear infinite;} @keyframes scan{0%{left:-40%}100%{left:120%}} .calc-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);margin-right:8px;} .calc-body{padding:24px 22px 26px;} .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:14px;} /* min-width:0 rompe el mínimo implícito de los hijos de grid (auto = ancho del contenido sin recortar); sin esto, un valor largo como "SR5 4x4" puede forzar la columna más allá de su 1fr y desbordar el panel en mobile. */ .calc-field{min-width:0;} .calc-field label{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;} .calc-field .sel{height:42px;border:1px solid #262E39;background:#080B10;border-radius:3px;display:flex;align-items:center;padding:0 13px;font-size:13.5px;color:#D6DEE8;justify-content:space-between;} .calc-field .sel span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} .calc-field .sel .chev{flex-shrink:0;color:#5F6B7A;} .calc-result{margin-top:18px;border-top:1px dashed #262E39;padding-top:18px;opacity:.3;transition:opacity .4s;} .calc-result.on{opacity:1;} .calc-total{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:52px;line-height:.9;color:#fff;} .calc-total .cur{color:var(--muted);font-size:22px;font-style:normal;font-weight:700;margin-right:6px;} .calc-dop{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);margin-top:4px;} .calc-compare{margin:14px 0 6px;border:1px solid #1A222C;border-radius:4px;overflow:hidden;} .calc-compare .cmp{display:flex;justify-content:space-between;align-items:center;padding:9px 13px;} .calc-compare .cmp+.cmp{border-top:1px solid #141A22;} .calc-compare .cmp-l{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);} .calc-compare .cmp-v{font-family:'JetBrains Mono',monospace;font-size:14px;color:#D6DEE8;font-weight:500;} .calc-compare .cmp-v.pos{color:var(--lime);font-weight:700;} .calc-bar{display:flex;height:11px;border-radius:2px;overflow:hidden;margin:16px 0 8px;background:#080B10;} .calc-bar span{display:block;height:100%;} .calc-bd{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;} .calc-viab{margin-top:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid rgba(220,231,117,.4);background:rgba(220,231,117,.08);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);} /* --- sección calc rediseñada: 2 columnas + narrativa --- */ /* --calc-fit lo calcula hero-redesign.js: es el factor de escala necesario para que la escena quepa completa en el alto del stage. Vale 1 cuando ya cabe (el caso normal en escritorio), y baja sólo lo justo en viewports cortos — así la escena nunca se recorta por arriba ni por abajo en ningún dispositivo. */ .calc-frame{position:relative;width:calc(min(1120px,94vw) * var(--calc-wide,1));padding:34px; transform:scale(var(--calc-fit,1));transform-origin:center center;} .calc-frame::before,.calc-frame::after{content:"";position:absolute;width:26px;height:26px;border:1px solid rgba(206,27,34,.5);} .calc-frame::before{top:0;left:0;border-right:0;border-bottom:0;} .calc-frame::after{bottom:0;right:0;border-left:0;border-top:0;} .calc-wrap{display:grid;grid-template-columns:.9fr 1.05fr;gap:44px;align-items:center;} .iam-logo{margin-bottom:22px;} .iam-mark{display:block;font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;font-size:clamp(30px,3.4vw,44px);line-height:.88;letter-spacing:.005em;color:#fff;text-transform:uppercase;} .iam-ul{display:block;width:66px;height:5px;background:var(--red);margin:9px 0 7px;} .iam-by{font-size:13.5px;color:#C7CFD9;} .iam-by b{color:#fff;font-weight:600;} .calc-kick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--lime);margin-bottom:13px;} .calc-h{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(26px,3vw,40px);line-height:.98;letter-spacing:.01em;color:#fff;margin-bottom:15px;max-width:16ch;} /* max-width 64ch (antes 44ch): en una sola columna el intro dispone de ~780px y el párrafo usaba 383 — se veía como una columna estrecha con mucho margen muerto. 64ch es el tope de medida legible recomendada (60–75 caracteres); en dos columnas el contenedor sigue mandando, así que el valor sólo actúa donde sobra ancho. El COLOR se interpola con --morph: mientras el panel se forma, el texto va sobre la ilustración iluminada y necesita ir en blanco; cuando el panel está completo la escena ya está atenuada y vuelve al gris de siempre. */ .calc-p{ color:#C7CFD9; /* respaldo para navegadores sin calc() por canal */ color:rgb(calc(255 - var(--morph,1) * 56) calc(255 - var(--morph,1) * 48) calc(255 - var(--morph,1) * 38)); font-size:14.5px;line-height:1.62;max-width:64ch; } .calc-tag{margin-top:20px;display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid rgba(220,231,117,.35);background:rgba(220,231,117,.06);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);} .calc-tag .dotp{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);} .pv-note{padding:11px 20px;border-top:1px solid #1A202C;background:rgba(6,9,14,.6);font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6B7A8A;display:flex;align-items:center;gap:8px;} .pv-disclaimer{padding:8px 20px 12px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.04em;color:#4A5563;background:rgba(6,9,14,.6);line-height:1.5;} .pv-note .lk{color:var(--red);} /* ============ WORKSHOP (oficina de fondo fijo) ============ */ .wk{position:relative;background:#050608;} .wk-bgwrap{position:sticky;top:0;height:100vh;height:100dvh;margin-bottom:-100vh;margin-bottom:-100dvh;overflow:hidden;z-index:0;} .wk-bg{position:absolute;inset:0;background:url('../img/oficina.jpeg') center/cover;filter:brightness(.34) contrast(1.06);} .wk-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,10,.9),rgba(4,6,10,.72) 42%,rgba(4,6,10,.96));} .wk-grid-bg{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(140,151,166,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(140,151,166,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(90% 70% at 50% 40%,#000,transparent 85%);} .wk-content{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:132px 28px 150px;} .wk-head{max-width:780px;margin-bottom:54px;} .wk-kick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin-bottom:14px;} .wk-title{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(30px,4.4vw,54px);line-height:.96;letter-spacing:.01em;color:#fff;margin-bottom:16px;} .wk-lead{color:#C7CFD9;font-size:16px;line-height:1.62;max-width:60ch;} .wk-lead b{color:#fff;} .wk-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;} .wk-day{border:1px solid #1A222C;background:rgba(7,10,15,.74);backdrop-filter:blur(6px);padding:28px 26px;position:relative;} .wk-day::before{content:"";position:absolute;top:-1px;left:-1px;width:34px;height:3px;background:var(--red);} .wk-day-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin-bottom:10px;} .wk-day-title{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:25px;line-height:1;color:#fff;margin-bottom:6px;} .wk-mods{list-style:none;margin-top:14px;} .wk-mod{display:flex;gap:14px;padding:17px 0;border-top:1px solid #141C24;} .wk-mod-num{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--red);flex-shrink:0;padding-top:2px;} .wk-mod h4{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:0 0 6px;} .wk-mod p{color:var(--muted);font-size:13px;line-height:1.55;margin:0;} .wk-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);} .wk-reveal.in{opacity:1;transform:none;} .wk-mod.wk-reveal:nth-child(2){transition-delay:.08s;} .wk-mod.wk-reveal:nth-child(3){transition-delay:.16s;} .wk-mod.wk-reveal:nth-child(4){transition-delay:.24s;} @media(prefers-reduced-motion:reduce){.wk-reveal{opacity:1;transform:none;}} /* Reveal de la calculadora del hero en mobile (ver wireCalcReveal en workshop.js) */ .undef-js-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);} .undef-js-reveal.is-in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){.undef-js-reveal{opacity:1;transform:none;}} /* ============ OPERACIONES (editable desde wp-admin) ============ */ .op-section{position:relative;background:#050709;padding:130px 28px 110px;border-top:1px solid #1A222C;overflow:hidden;} .op-section::before{content:"";position:absolute;inset:0;z-index:0; background:radial-gradient(50% 45% at 50% 8%,rgba(206,27,34,.16),transparent 65%);} /* atmósfera "patio de subasta": trama diagonal de asfalto, muy tenue, que diferencia esta sección del negro plano de las vecinas */ .op-section::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:repeating-linear-gradient(-38deg, rgba(232,236,241,.016) 0 2px, transparent 2px 14px); mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent); -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);} .op-section .bg-grid{position:absolute;inset:0;z-index:0;opacity:.35; background-image:linear-gradient(rgba(140,151,166,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,151,166,.06) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 80%);} .op-inner{position:relative;z-index:1;max-width:1160px;margin:0 auto;} .op-head{max-width:680px;margin:0 auto 54px;text-align:center;} .op-kick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--lime);margin-bottom:14px;} .op-title{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(28px,4vw,46px);line-height:.98;color:#fff;margin-bottom:14px;} .op-lead{color:var(--muted);font-size:15px;line-height:1.6;} .op-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} /* flex column + gap: el ritmo vertical entre bloques (costo/venta, margen, peek, botón) lo da UN SOLO valor (--space-gap-lg, ya escalado mobile→desktop en :root) — nada de márgenes sueltos repetidos por breakpoint. En pantallas angostas los bloques se siguen apilando igual (flex-direction:column ya es vertical en todos los tamaños), solo cambia el gap. */ .op-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#0C0F15,#090B10); border:1px solid #1A222C;padding:0; display:flex;flex-direction:column;gap:var(--space-gap-lg); opacity:0;transform:translateY(34px) scale(.97); transition:opacity .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;} .op-card.in{opacity:1;transform:none;} .op-card:hover{border-color:rgba(220,231,117,.35);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(220,231,117,.12);} .op-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--red);z-index:2;} .op-card.flip::before{background:var(--lime);} .op-card-top{padding:22px 22px 0;} .op-tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:11px;display:inline-block;} .op-card.flip .op-tag{color:var(--lime);} .op-vehicle{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:29px;text-transform:uppercase;color:#fff;line-height:1;} .op-vin{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);margin-top:6px;letter-spacing:.03em;} /* costo → venta, mini comparación */ .op-flow{display:flex;align-items:center;gap:9px;margin:0 22px;font-family:'JetBrains Mono',monospace;} .op-flow-pt{flex:1;} .op-flow-lab{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;} .op-flow-val{font-size:14px;color:#C7CFD9;font-weight:600;} .op-flow-arrow{color:var(--red);font-size:15px;flex-shrink:0;transform:translateY(6px);} .op-flow-pt.sale .op-flow-val{color:#fff;} /* MARGEN — el verdadero protagonista de la tarjeta: grande, con glow pulsante */ .op-margin-hero{position:relative;margin:0 16px;padding:26px 18px;text-align:center;overflow:hidden; background:radial-gradient(80% 120% at 50% 0%,rgba(220,231,117,.18),transparent 70%),rgba(220,231,117,.05); border:1px solid rgba(220,231,117,.32);} .op-margin-hero::before{content:"";position:absolute;left:50%;top:50%;width:260px;height:260px; transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(closest-side,rgba(220,231,117,.16),transparent 72%); animation:opMarginPulse 3.4s ease-in-out infinite;pointer-events:none;} @keyframes opMarginPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.92);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08);}} .op-margin-label{position:relative;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin-bottom:8px;} .op-margin-val{position:relative;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:56px;line-height:.9;color:#fff; text-shadow:0 0 40px rgba(220,231,117,.65);letter-spacing:-.01em;} .op-margin-badge{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 14px; background:var(--lime);color:#0D1117;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.06em;} @media(prefers-reduced-motion:reduce){.op-margin-hero::before{animation:none;opacity:.7;}} /* ===== FOTO PRINCIPAL del vehículo: protagonista visual, no una miniatura que hay que adivinar. Se ve completa de entrada; el overlay solo invita a ver el resto. ===== */ .op-hero-photo{all:unset;display:block;box-sizing:border-box;width:calc(100% - 44px);margin:0 22px; position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden;cursor:pointer; border:1px solid #1A222C;} .op-hero-photo img{width:100%;height:100%;object-fit:cover;display:block; filter:saturate(1.05) contrast(1.02);transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s ease;} .op-card:hover .op-hero-photo img{transform:scale(1.06);filter:saturate(1.15) contrast(1.05) brightness(1.03);} .op-hero-photo-scrim{position:absolute;inset:0; background:linear-gradient(180deg,transparent 45%,rgba(6,8,11,.55) 78%,rgba(6,8,11,.92) 100%); transition:opacity .3s ease;} .op-hero-photo-meta{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:center;justify-content:space-between; font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;} .op-hero-photo-count{color:#C7CFD9;} .op-hero-photo-cue{display:flex;align-items:center;gap:6px;color:var(--lime);font-weight:700; transition:transform .25s ease;} .op-card:hover .op-hero-photo-cue{transform:translateX(3px);} .op-hero-photo-glass{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px; border-radius:50%;background:rgba(9,11,15,.7);border:1px solid rgba(220,231,117,.5);font-size:11px; box-shadow:0 0 0 0 rgba(220,231,117,.4);animation:opGlassPulse 2.6s ease-in-out infinite;} @keyframes opGlassPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,231,117,.4);}50%{box-shadow:0 0 0 6px rgba(220,231,117,0);}} @media(prefers-reduced-motion:reduce){.op-hero-photo-glass{animation:none;}.op-card:hover .op-hero-photo img{transform:none;}} .op-docs-btn{width:calc(100% - 44px);margin:0 22px 22px;background:transparent;border:1px solid #262E39;color:#C7CFD9; font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:11px;cursor:pointer; transition:border-color .2s,color .2s,background .2s;} .op-docs-btn:hover{border-color:var(--red);color:#fff;background:rgba(206,27,34,.08);} .op-cta-wrap{text-align:center;margin-top:52px;} .op-cta{display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:#0D1117;font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:14px;letter-spacing:.03em;padding:16px 30px;text-decoration:none;} .op-cta-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px;} /* --- lightbox in-page (NO abre pestaña nueva) --- */ .lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .28s ease;} .lb.open{opacity:1;pointer-events:auto;} .lb-backdrop{position:absolute;inset:0;background:rgba(4,6,9,.92);backdrop-filter:blur(6px);} .lb-panel{position:relative;z-index:1;width:min(880px,92vw);max-height:88vh;max-height:88dvh;background:#0B0E13;border:1px solid #232A34;border-top:3px solid var(--red);display:flex;flex-direction:column; transform:scale(.96);transition:transform .28s cubic-bezier(.2,.8,.2,1); padding-bottom:var(--safe-bottom);} .lb.open .lb-panel{transform:scale(1);} .lb-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #1A222C;} .lb-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;font-size:19px;color:#fff;} .lb-close{background:none;border:1px solid #262E39;color:#C7CFD9;width:32px;height:32px;cursor:pointer;font-size:15px;line-height:1;transition:border-color .2s,color .2s;} .lb-close:hover{border-color:var(--red);color:#fff;} .lb-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background:#000;min-height:280px;overflow:hidden;} .lb-stage img{max-width:100%;max-height:64vh;max-height:64dvh;object-fit:contain;display:block;} .lb-nav{position:absolute;top:0;bottom:0;width:64px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#fff;font-size:22px;cursor:pointer;opacity:.55;transition:opacity .2s,background .2s;} .lb-nav:hover{opacity:1;background:rgba(0,0,0,.28);} .lb-prev{left:0;} .lb-next{right:0;} .lb-count{position:absolute;bottom:12px;right:14px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:rgba(255,255,255,.75);background:rgba(0,0,0,.4);padding:4px 9px;} .lb-thumbs{display:flex;gap:8px;padding:14px 20px;overflow-x:auto;border-top:1px solid #1A222C;} .lb-thumbs img{width:60px;height:44px;object-fit:cover;cursor:pointer;opacity:.5;border:1px solid transparent;transition:opacity .2s,border-color .2s;flex-shrink:0;} .lb-thumbs img.active{opacity:1;border-color:var(--red);} .lb-docs{padding:14px 20px;border-top:1px solid #1A222C;display:flex;flex-wrap:wrap;gap:10px;} .lb-docs a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--lime);border:1px solid rgba(220,231,117,.3);padding:8px 13px;text-decoration:none;} .lb-docs a:hover{background:rgba(220,231,117,.08);} /* ============ BRIEFING · monitor VSL ============ */ /* Panel inferior del stack: sticky en la MISMA celda que .scope (grid-area 1/1), z-index más bajo. Llega a top:0 al mismo tiempo que la calc y se queda quieta ahí — nunca sube desde abajo. Se ve a medida que .stage (arriba, z-index 2) se desvanece/achica sobre ella. */ /* Dos correcciones que van juntas: 1) La nav es position:fixed de 64px y la sección la ignoraba: centraba su contenido en el viewport COMPLETO, así que por debajo de ~768px de alto el título se metía debajo de la nav. 2) align-items:center + overflow:hidden = el desbordamiento se reparte arriba y abajo, y el borde superior recorta. Con align-items:flex-start y margin:auto en .vsl-inner el bloque se centra cuando sobra sitio y se apoya arriba cuando falta (los márgenes auto valen 0 con espacio negativo), que es el mismo "centrado seguro" del hero y del slide 3. */ .vsl-section{grid-area:1/1;align-self:start;position:sticky;top:0;height:100vh;height:100dvh;z-index:1; --vsl-nav:64px; overflow:hidden;display:flex;align-items:flex-start;justify-content:center; padding:calc(var(--vsl-nav) + var(--space-side-tight)) var(--space-side-tight) calc(var(--space-side-tight) + var(--safe-bottom)); background:radial-gradient(58% 44% at 50% 40%,rgba(206,27,34,.20),transparent 62%), linear-gradient(180deg,#0A0708 0%,#050506 22%,#04060A 55%,#04060A 100%);} .vsl-section::before{content:"";position:absolute;inset:0;z-index:0; background:radial-gradient(46% 40% at 50% 100%,rgba(206,27,34,.10),transparent 65%);} .vsl-inner{position:relative;z-index:1;max-width:760px;width:100%;margin:auto;max-height:100%;overflow:hidden;} .vsl-head{max-width:640px;margin:0 auto 26px;text-align:center;} .vsl-kick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin-bottom:12px;} .vsl-title{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(24px,3.6vw,42px);line-height:.98;color:#fff;margin-bottom:10px;} .vsl-lead{color:var(--muted);font-size:14px;line-height:1.55;} .vsl-meta{display:flex;align-items:center;gap:22px;padding:13px 20px;background:#0B0E13;border:1px solid #1A222C;border-bottom:none;flex-wrap:wrap;} .vsl-meta-item{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;} .vsl-meta-label{color:var(--muted);text-transform:uppercase;} .vsl-meta-val{color:#D6DEE8;font-weight:600;} .vsl-meta-status{margin-left:auto;color:var(--lime);text-transform:uppercase;} .vsl-status-dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:vslblink 1.4s ease-in-out infinite;} @keyframes vslblink{0%,100%{opacity:1}50%{opacity:.25}} .vsl-screen{position:relative;aspect-ratio:16/9;background:#000;border:1px solid #1A222C;overflow:hidden;} /* Miniatura del propio video mientras el reproductor no ha cargado: evita el rectángulo negro y hace que el hueco ya comunique algo. Desaparece sola. */ .vsl-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1; transition:opacity .45s ease;} .vsl-poster.fuera{opacity:0;pointer-events:none;} .vsl-screen iframe{position:relative;z-index:2;} .vsl-screen video,.vsl-screen iframe{width:100%;height:100%;display:block;border:0;} .vsl-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; background:radial-gradient(60% 60% at 50% 50%,rgba(206,27,34,.08),transparent 70%),#050608;} .vsl-noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay; background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 2px);animation:vslnoise 8s linear infinite;} @keyframes vslnoise{0%{transform:translateY(0)}100%{transform:translateY(-200px)}} .vsl-crosshair{font-family:'JetBrains Mono',monospace;font-size:34px;color:var(--red);opacity:.7;animation:vslpulse 2.4s ease-in-out infinite;} @keyframes vslpulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.9;transform:scale(1.12)}} .vsl-placeholder-code{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#C7CFD9;} .vsl-placeholder-sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);} .vsl-scanline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(206,27,34,.6),transparent); animation:vslscan 3.6s linear infinite;} @keyframes vslscan{0%{top:-2%}100%{top:102%}} .vsl-strip{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:13px 20px;background:#0B0E13;border:1px solid #1A222C;border-top:none; font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);} @media(prefers-reduced-motion:reduce){.vsl-status-dot,.vsl-crosshair,.vsl-noise,.vsl-scanline{animation:none;}} /* Compactación por ALTURA de ventana. El monitor no se encogía nunca: .vsl-screen es 16/9 sobre los 760px de .vsl-inner, o sea 428px fijos, y con la cabecera el bloque medía 647px pasara lo que pasara. Sumando la nav (64) y el padding, dejaba de caber por debajo de ~748px de alto. Como el alto de la pantalla sale del ancho, la forma limpia de compactar es estrechar .vsl-inner: el 16/9 se reduce solo. Cada banda está calculada para caber en su propio límite inferior. */ @media(max-height:820px){ .vsl-inner{max-width:640px;} .vsl-head{margin-bottom:18px;} } @media(max-height:730px){ .vsl-inner{max-width:560px;} .vsl-head{margin-bottom:14px;} .vsl-title{font-size:clamp(20px,2.6vw,30px);} .vsl-lead{font-size:13px;line-height:1.45;} } @media(max-height:640px){ .vsl-inner{max-width:470px;} .vsl-head{margin-bottom:10px;} .vsl-meta,.vsl-strip{padding:9px 14px;gap:14px;} } /* Móvil en horizontal. Estrechar aquí era contraproducente: la barra de meta y el pie del monitor tienen flex-wrap, así que a 340px se partían en 2-3 filas (67px y 81px en vez de 44 y 43) y el monitor se cortaba igual. Con 390px de alto lo que sostiene la sección es el título y la pantalla; el cromo del monitor se retira y así la pantalla puede ser MÁS ancha, no menos. */ @media(max-height:520px) and (orientation:landscape){ .vsl-section{--vsl-nav:56px;padding-top:calc(var(--vsl-nav) + 8px);padding-bottom:calc(12px + var(--safe-bottom));} .vsl-inner{max-width:min(500px,58vw);} .vsl-lead,.vsl-meta,.vsl-strip{display:none;} .vsl-head{margin-bottom:8px;} } /* ============ 90 DÍAS · Import-A-Matic (MacBook + iPhone) ============ */ .fin-section{position:relative;background:#050506;padding:140px 28px 150px;overflow:hidden;} .fin-bg{position:absolute;inset:0;z-index:0; background: radial-gradient(55% 60% at 50% 40%,rgba(206,27,34,.20),transparent 68%), radial-gradient(80% 60% at 50% 100%,rgba(0,0,0,.6),transparent 60%), linear-gradient(180deg,#07090C,#050506 55%,#030304);} .fin-grid{position:absolute;inset:0;z-index:0;opacity:.3; background-image:linear-gradient(rgba(140,151,166,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,151,166,.06) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(75% 65% at 50% 42%,#000,transparent 82%);} .fin-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;text-align:center;} .fin-logo{margin-bottom:24px;opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s;} .fin-logo.in{opacity:1;transform:none;} .fin-mark{display:block;font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;font-size:clamp(30px,4vw,46px);line-height:.88;letter-spacing:.005em;color:#fff;text-transform:uppercase;} .fin-ul{display:block;width:70px;height:5px;background:var(--red);margin:10px auto 8px;} .fin-by{font-size:13.5px;color:#C7CFD9;} .fin-by b{color:#fff;font-weight:600;} .fin-kick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--lime);margin-bottom:16px; opacity:0;transform:translateY(20px);transition:opacity .7s .05s,transform .7s .05s;} .fin-kick.in{opacity:1;transform:none;} .fin-title{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(32px,5.4vw,68px);line-height:.94;color:#fff;max-width:16ch;margin:0 auto 18px; opacity:0;transform:translateY(24px);transition:opacity .75s .1s,transform .75s .1s;} .fin-title.in{opacity:1;transform:none;} .fin-title .num{color:var(--lime);} .fin-lead{color:#C7CFD9;font-size:16px;line-height:1.62;max-width:52ch;margin:0 auto 40px; opacity:0;transform:translateY(20px);transition:opacity .7s .16s,transform .7s .16s;} .fin-lead.in{opacity:1;transform:none;} .fin-lead b{color:#fff;} /* --- mockups (silueta real del panel, generada en CSS) --- */ .fin-devices{position:relative;max-width:920px;margin:0 auto;height:440px; opacity:0;transform:translateY(40px);transition:opacity .9s .22s,transform .9s .22s;} .fin-devices.in{opacity:1;transform:none;} .dev-mac{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(680px,84vw);} .dev-mac-screen{position:relative;aspect-ratio:16/10;background:#0A0D12;border:8px solid #1B1E24;border-bottom:none;border-radius:10px 10px 0 0; box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;} .dev-mac-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:90px;height:8px;background:#1B1E24;border-radius:0 0 8px 8px;z-index:3;} .dev-mac-base{width:112%;margin-left:-6%;height:16px;background:linear-gradient(180deg,#2A2E36,#15171B);border-radius:0 0 8px 8px;position:relative;} .dev-mac-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:120px;height:5px;background:#3A3E46;border-radius:0 0 6px 6px;} .dev-phone{position:absolute;right:2%;bottom:-10px;width:min(190px,30vw);z-index:4;} .dev-phone-body{aspect-ratio:9/19.5;background:#0A0D12;border:7px solid #1B1E24;border-radius:32px;box-shadow:0 24px 60px rgba(0,0,0,.65);overflow:hidden;position:relative;} .dev-phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:46%;height:18px;background:#1B1E24;border-radius:10px;z-index:3;} /* mini-panel ANIMADO — clon fiel del sistema real (mismo layout: header, 01/VEHÍCULO, 04/RESULTADO) */ .mini-calc{position:absolute;inset:0;background:#06090E;padding:6% 7%;display:flex;flex-direction:column;font-size:9.5px;overflow:hidden;} .dev-phone .mini-calc{font-size:8px;padding:5% 6%;} .mini-top{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:.8em;border-bottom:1px solid #1A222C;margin-bottom:.9em;} .mini-brand{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;color:var(--red);font-size:1.35em;letter-spacing:.01em;text-transform:uppercase;} .mini-meta{font-family:'JetBrains Mono',monospace;font-size:.72em;letter-spacing:.1em;text-transform:uppercase;color:#5F6B7A;} .mini-tasa{font-family:'JetBrains Mono',monospace;font-size:.72em;letter-spacing:.08em;color:#5F6B7A;text-transform:uppercase;margin-bottom:.9em;} .mini-tasa b{color:#C7CFD9;font-weight:600;} .mini-kicker{font-family:'JetBrains Mono',monospace;font-size:.7em;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:.4em;} .mini-head{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;color:#fff;font-size:1.55em;line-height:.96;text-transform:uppercase;margin-bottom:.9em;} .mini-secnum{display:flex;align-items:baseline;gap:.4em;font-family:'JetBrains Mono',monospace;font-size:.72em;letter-spacing:.08em;text-transform:uppercase; color:#C7CFD9;border-bottom:1px solid #1A222C;padding-bottom:.5em;margin-bottom:.7em;} .mini-secnum b{color:var(--red);} .mini-secnum.res b{color:var(--lime);} .mini-rows{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin-bottom:1em;} .dev-phone .mini-rows{grid-template-columns:1fr 1fr;gap:.4em;} .mini-field{background:#0B0E13;border:1px solid #20262F;border-radius:2px;padding:.45em .6em;overflow:hidden;} .mini-field .lab{display:block;font-family:'JetBrains Mono',monospace;font-size:.62em;letter-spacing:.1em;text-transform:uppercase;color:#5F6B7A;margin-bottom:.25em;} .mini-field .val{display:block;font-size:.95em;color:#D6DEE8;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;} .mini-field .val.in{opacity:1;transform:none;} .mini-status{font-family:'JetBrains Mono',monospace;font-size:.72em;letter-spacing:.06em;color:var(--lime);margin-bottom:.8em; height:1.2em;overflow:hidden;white-space:nowrap;} .mini-status .txt{display:inline-block;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;} .mini-status .txt.in{opacity:1;transform:none;} .mini-result{margin-top:auto;background:rgba(220,231,117,.045);border:1px solid rgba(220,231,117,.22);border-left:3px solid var(--lime);padding:.7em .8em;} .mini-viab-kick{font-family:'JetBrains Mono',monospace;font-size:.65em;letter-spacing:.14em;text-transform:uppercase;color:#5F6B7A;margin-bottom:.35em;} .mini-viab-big{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;color:var(--lime);font-size:1.6em;line-height:1; opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;} .mini-viab-big.in{opacity:1;transform:none;} .mini-divider{height:1px;background:#1A222C;margin:.6em 0;} .mini-metrics{display:grid;grid-template-columns:1fr 1fr;gap:.5em .8em;} .dev-phone .mini-metrics{grid-template-columns:1fr 1fr;} .mini-metrics .lab{display:block;font-family:'JetBrains Mono',monospace;font-size:.6em;letter-spacing:.08em;text-transform:uppercase;color:#5F6B7A;margin-bottom:.15em;} .mini-metrics .val{display:block;font-family:'JetBrains Mono',monospace;font-size:.85em;font-weight:700;color:#fff; opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;} .mini-metrics .val.in{opacity:1;transform:none;} .mini-metrics .val.pos{color:var(--lime);} .fin-cta{display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:#0D1117;font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:15px;letter-spacing:.03em;padding:18px 34px;text-decoration:none;margin-top:44px; opacity:0;transform:translateY(20px);transition:opacity .7s .3s,transform .7s .3s;} .fin-cta.in{opacity:1;transform:none;} .fin-meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:14px; opacity:0;transition:opacity .7s .36s;} .fin-meta.in{opacity:1;} @media(prefers-reduced-motion:reduce){.fin-logo,.fin-kick,.fin-title,.fin-lead,.fin-devices,.fin-cta,.fin-meta{opacity:1!important;transform:none!important;}} /* ============ CHECKOUT · inscripción final ============ */ .ck-section{position:relative;background:#04060A;padding:120px 28px calc(140px + var(--safe-bottom));overflow:hidden;} .ck-section::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(56% 54% at 50% 38%,rgba(206,27,34,.18),transparent 70%);} .ck-section .bg-grid{position:absolute;inset:0;z-index:0;opacity:.28; background-image:linear-gradient(rgba(140,151,166,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,151,166,.06) 1px,transparent 1px); background-size:56px 56px;mask-image:radial-gradient(65% 60% at 50% 35%,#000,transparent 80%);} .ck-inner{position:relative;z-index:1;max-width:580px;margin:0 auto;text-align:center;} .ck-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--lime);margin-bottom:18px; opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s;} .ck-eyebrow.in{opacity:1;transform:none;} /* momento decisivo: titular grande antes de la caja */ .ck-decisive{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase; font-size:clamp(32px,5vw,52px);line-height:.96;color:#fff;margin-bottom:40px; opacity:0;transform:translateY(18px);transition:opacity .6s .05s,transform .6s .05s;} .ck-decisive.in{opacity:1;transform:none;} .ck-decisive .r{color:var(--red);} .ck-box{position:relative;background:#0B0E13;border:1px solid #232A34;border-top:3px solid var(--red);padding:34px 32px 30px; box-shadow:0 40px 100px rgba(0,0,0,.5); opacity:0;transform:translateY(24px);transition:opacity .7s .08s,transform .7s .08s;} .ck-box.in{opacity:1;transform:none;} .ck-box::before,.ck-box::after{content:"";position:absolute;width:22px;height:22px;border:1px solid rgba(206,27,34,.5);} .ck-box::before{top:-1px;left:-1px;border-right:0;border-bottom:0;} .ck-box::after{bottom:-1px;right:-1px;border-left:0;border-top:0;} /* escasez: cupos reservados — honesto, sin countdown falso */ /* oculta por defecto: solo se muestra si hay ≥30 cupos reales reservados (ver JS, CUPOS_UMBRAL_VISIBLE) */ .ck-cupos{display:none;margin-bottom:26px;opacity:0;transition:opacity .5s;} .ck-cupos.show{display:block;opacity:1;} .ck-cupos-row{display:flex;justify-content:space-between;align-items:baseline; font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8A97A6;margin-bottom:8px;} .ck-cupos-row b{color:#fff;font-size:14px;font-weight:700;} /* barra de cupos: se anima con transform:scaleX (GPU) en vez de width (evita reflow) */ .ck-cupos-bar{height:6px;background:#161A22;border-radius:3px;overflow:hidden;} .ck-cupos-bar i{display:block;height:100%;width:100%;border-radius:3px;transform:scaleX(0);transform-origin:left;will-change:transform; background:linear-gradient(90deg,var(--red),#FF5A5A);transition:transform 1.4s cubic-bezier(.16,1,.3,1);} /* CTA — el momento decisivo: glow que respira + brillo al hover + pulso al click */ .ck-cta-wrap{position:relative;} /* pointer-events:none es obligatorio: es un resplandor puramente decorativo, pero al ser position:absolute con z-index:0 pinta POR ENCIMA de cualquier descendiente sin posicionar (orden de pintado de la spec CSS2.1, Apéndice E). El botón de transferencia (.ck-wa) nunca tuvo z-index propio —a diferencia de .ck-cta, que sí lo tiene— así que quedaba debajo de este resplandor y el clic no le llegaba nunca. */ .ck-cta-wrap::before{content:"";position:absolute;inset:-10px;z-index:0;border-radius:2px;pointer-events:none; background:radial-gradient(60% 100% at 50% 50%,rgba(220,231,117,.45),transparent 72%); filter:blur(14px);opacity:0;animation:ckbreathe 2.6s ease-in-out infinite;} .ck-box.in .ck-cta-wrap::before{opacity:1;} @keyframes ckbreathe{0%,100%{opacity:.35;transform:scale(.97);}50%{opacity:.75;transform:scale(1.02);}} .ck-cta{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden; background:var(--lime);color:#0D1117;font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:16.5px;letter-spacing:.02em; text-transform:uppercase;padding:21px;text-decoration:none; transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;} .ck-cta:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 18px 40px rgba(220,231,117,.32);} .ck-cta:active{transform:translateY(-1px) scale(.99);} .ck-cta-arrow{display:inline-block;transition:transform .25s cubic-bezier(.34,1.56,.64,1);} .ck-cta:hover .ck-cta-arrow{transform:translateX(5px);} /* shine: se desplaza con transform:translateX (GPU) en vez de left (evita reflow) */ .ck-cta-shine{position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg) translateX(0);will-change:transform;transition:transform .65s ease;} .ck-cta:hover .ck-cta-shine{transform:skewX(-18deg) translateX(475%);} .ck-ripple{position:absolute;border-radius:50%;background:rgba(13,17,23,.35);transform:scale(0); animation:ckripple .6s ease-out forwards;pointer-events:none;} @keyframes ckripple{to{transform:scale(1);opacity:0;}} .ck-reassure{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:18px 0 0;padding:0;} .ck-reassure li{position:relative;padding-left:16px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em; text-transform:uppercase;color:#8A97A6;} .ck-reassure li::before{content:"✓";position:absolute;left:0;color:var(--lime);font-weight:700;} /* .ck-or queda sin usar (ver nota en checkout.php) — se deja definida por si se reintroduce un separador entre secciones. */ .ck-or{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5F6B7A;margin:26px 0 18px; display:flex;align-items:center;gap:14px;} .ck-or::before,.ck-or::after{content:"";flex:1;height:1px;background:#232A34;} .ck-wa{display:block;border:1px solid #262E39;color:#C7CFD9;font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:14px; padding:17px;text-decoration:none;transition:border-color .2s,background .2s,color .2s;} .ck-wa:hover{border-color:var(--red);background:rgba(206,27,34,.06);color:#fff;} /* Elección de método de pago: "Inscribirme" deja de comprometer un método por su cuenta. Antes abría el modal ya fijado a data-fc-dest="paypal", así que quien quería transferencia dependía de notar un enlace secundario pequeño más abajo — en móvil se perdía fácil. Ahora aparecen las dos rutas con el mismo peso visual: la lima (PayPal) sigue siendo la opción con más jerarquía porque es la más rápida de completar, pero ambas son igual de grandes y clicables. */ .ck-pay-choice{display:none;flex-direction:column;gap:12px;margin-top:2px;} .ck-cta-wrap[data-pay-open] #undef-checkout-cta{display:none;} .ck-cta-wrap[data-pay-open] .ck-pay-choice{display:flex;animation:ckPayIn .4s cubic-bezier(.2,.8,.2,1);} @keyframes ckPayIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} .ck-pay-choice .ck-cta,.ck-pay-choice .ck-pay-alt{flex:1;text-align:center;} .ck-pay-alt{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;} @media(min-width:520px){.ck-pay-choice{flex-direction:row;}} @media(prefers-reduced-motion:reduce){.ck-cta-wrap[data-pay-open] .ck-pay-choice{animation:none;}} .ck-fine{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:#5F6B7A;text-transform:uppercase;margin-top:24px;line-height:1.7;} @media(prefers-reduced-motion:reduce){ .ck-eyebrow,.ck-decisive,.ck-box{opacity:1!important;transform:none!important;} .ck-cta-wrap::before{animation:none;opacity:.5;} .ck-cta-shine{display:none;} } /* ============ STICKY CTA · siempre visible tras el hero ============ */ /* padding-bottom incluye la safe-area: en iPhones con home-indicator (sin botón físico) el botón nunca queda pegado/tapado por la barra de gestos. */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70; background:rgba(8,11,16,.88);backdrop-filter:blur(14px);border-top:1px solid rgba(220,231,117,.18); padding:12px 20px calc(12px + var(--safe-bottom)); padding-left:calc(20px + var(--safe-left));padding-right:calc(20px + var(--safe-right)); display:flex;align-items:center;justify-content:center;gap:18px; transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1);text-decoration:none;} .sticky-cta.show{transform:translateY(0);} .sticky-cta-label{font-family:'IBM Plex Sans',sans-serif;font-size:13.5px;font-weight:600;color:#E2E8F0;} .sticky-cta-label b{color:var(--lime);} .sticky-cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:#0D1117; font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase; padding:11px 20px;white-space:nowrap;} .sndbtn{position:fixed;bottom:20px;right:20px;z-index:60;width:44px;height:44px;border-radius:50%;border:1px solid rgba(140,151,166,.4);background:rgba(8,11,16,.7);backdrop-filter:blur(8px);color:var(--ink);font-size:17px;cursor:pointer;transition:transform .15s,border-color .15s;} .sndbtn:hover{transform:scale(1.08);border-color:var(--red);} /* ========================================================================== SECCIONES FUERA DE PANTALLA El JS marca con .fuera las secciones que están lejos del viewport. Dos costes desaparecen mientras lo están: 1) will-change reserva una capa en GPU de forma PERMANENTE (ancho×alto×4 bytes) aunque el elemento no se esté animando. Había 43 elementos con will-change activos a la vez, unos 62 MB de capas compuestas — memoria que en un móvil antiguo compite con la que necesitan las imágenes y los vídeos. 2) 25 animaciones infinitas (barridos, ruido, pulsos) seguían pintando fuera de pantalla, despertando al compositor en cada frame para nada. La marca es .fuera y no .en-vista a propósito: si el JS falla, no se aplica nada y el comportamiento es exactamente el de antes, en vez de quedarse todo congelado. */ .fc-fuera,.fc-fuera *{will-change:auto!important;} .fc-fuera *,.fc-fuera *::before,.fc-fuera *::after{animation-play-state:paused!important;} /* Red de seguridad: aunque el JS ya excluye las secciones con overlays fijos, si alguna vez el modal se mueve a otra sección esta regla evita que vuelva a abrirse invisible. Un overlay a pantalla completa nunca debe congelarse por la posición de la sección que lo contiene. */ .fc-fuera .undef-modal, .fc-fuera .undef-modal *, .fc-fuera .undef-modal *::before, .fc-fuera .undef-modal *::after, .fc-fuera .lb, .fc-fuera .lb *{animation-play-state:running!important;} .sndbtn.off{opacity:.5;} /* El navegador bloqueó el sonido del scroll (exige un clic/toque previo). El botón late suave para que quien lo quiera lo tenga a un toque, sin interrumpir a quien no. */ .sndbtn.needs-tap{border-color:var(--red);animation:sndPulso 2.6s ease-out infinite;} @keyframes sndPulso{0%{box-shadow:0 0 0 0 rgba(206,27,34,.45);}70%{box-shadow:0 0 0 12px rgba(206,27,34,0);}100%{box-shadow:0 0 0 0 rgba(206,27,34,0);}} @media(prefers-reduced-motion:reduce){.sndbtn.needs-tap{animation:none;}} @media(prefers-reduced-motion:reduce){.estandarte-inner,.hint .bar,.calc-badge::after{animation:none;}} /* ============================================================================ MEDIA QUERIES — de aquí en adelante, de mayor a menor ancho (TABLET → MOBILE → MOBILE PEQUEÑO). Los `prefers-reduced-motion` puntuales quedaron junto a cada componente a propósito: apagar UNA animación solo tiene sentido viendo cuál es. ============================================================================ */ /* ---- TABLET (≤900px): overrides de layout consolidados aquí (antes estaban sueltos junto a cada componente); cada regla sigue afectando solo a SU sección. ---- */ @media(max-width:900px){ .calc-wrap{grid-template-columns:1fr;gap:26px;} .calc-intro{text-align:center;} .iam-ul{margin-inline:auto;} .calc-h{margin-inline:auto;} .calc-p{margin-inline:auto;} .op-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto;} } @media(max-width:840px){.wk-grid{grid-template-columns:1fr;}} @media(max-width:760px){.fin-devices{height:340px;}} @media(max-width:680px){.info-grid{grid-template-columns:1fr;}} @media(max-width:560px){ .sticky-cta-label{display:none;} /* env(safe-area-inset-bottom) cubre el notch/home-indicator, pero NO la barra flotante compacta de Safari en iOS — sin buffer extra, el botón queda tapado o pegado al borde real de la pantalla. */ .sticky-cta{padding:10px 16px calc(26px + var(--safe-bottom));} /* el botón de sonido flotante vive en el mismo rincón — se sube por encima de la barra fija para que nunca se solapen. */ .sndbtn{bottom:calc(88px + var(--safe-bottom));} } /* ---- MOBILE (≤640px): márgenes alineados a 20px, cero overflow horizontal, mismo contenido que desktop pero respirando bien. ---- */ @media(max-width:640px){ /* Grid base: mismo margen lateral (20px) en TODAS las secciones */ .nav-inner{padding:0 20px;} .info-inner,.op-inner,.vsl-inner,.wk-content,.fin-inner,.ck-inner{padding-left:20px;padding-right:20px;} .wk-content{padding-top:96px;padding-bottom:100px;} .op-section{padding:88px 20px 80px;} .vsl-section{padding-left:16px;padding-right:16px;} /* el vertical lo fija la regla base: reserva la nav */ .fin-section{padding:96px 20px 100px;} .ck-section{padding:80px 20px calc(100px + var(--safe-bottom));} /* Estandarte del hero: evita que el ancho fijo empuje scroll lateral. (El anti-recorte vertical universal vive en la regla base de .fg — "safe center" — así que acá solo queda el padding-top de respiro en mobile.) */ /* el padding vertical de .fg ya contempla la safe-area en todos los tamaños */ .estandarte{width:min(300px,64vw);} .hero-copy{margin-top:18px;} .glow{width:420px;height:420px;} /* Calculadora: columna única, padding reducido, corners más chicos. width:94vw (antes) daba ~11px de margen lateral en los anchos de celular más comunes (375-430px) — bastante menos que los 20px que usa el resto de secciones en este mismo breakpoint (nav-inner, op-section, fin-section, ck-section...). calc(100% - 40px) iguala ese margen. */ .calc-frame{width:calc((100% - 40px) * var(--calc-wide,1));padding:18px 14px;} .calc-frame::before,.calc-frame::after{width:14px;height:14px;} .calc-panel{width:100%;} .calc-badge{padding:10px 14px;} .calc-body{padding:16px 14px 18px;} /* clamp en vez de un solo salto a los 380px: sin esto, el total se queda en 52px (tamaño desktop) en TODO el rango 381-640px, que es donde cae la mayoría de celulares reales (iPhone 12/13/14 = 390, Pixel = 412-428, etc.) — se veía desproporcionado para el ancho real del panel. */ .calc-total{font-size:clamp(30px,10vw,44px);} .calc-grid{gap:8px;} .calc-field .sel{padding:0 10px;font-size:12.5px;} /* --- Compactación de la escena de la calculadora en móvil --- El intro + el panel sumaban ~1190px dentro de un stage de 844px, así que la escena se recortaba por arriba (el párrafo) y por abajo (el borde del panel). Esto recupera ~200px; el resto lo absorbe el ajuste automático de escala (--calc-fit, ver hero-redesign.js) para que nunca quede cortada. */ .calc-wrap{gap:16px;} .iam-logo{margin-bottom:10px;} .iam-mark{font-size:15px;} .calc-kick{font-size:10px;margin-bottom:8px;} .calc-h{font-size:clamp(21px,6.2vw,28px);margin-bottom:10px;max-width:20ch;} .calc-p{font-size:13px;line-height:1.5;max-width:none;} .calc-tag{margin-top:12px;padding:7px 12px;font-size:10px;} .calc-field .sel{height:42px;} .calc-field label{margin-bottom:4px;} .calc-result{margin-top:14px;padding-top:14px;} .calc-compare{margin-top:10px;} .calc-compare .cmp{padding:8px 10px;} .pv-note{padding:10px 14px;} .pv-disclaimer{padding:8px 14px 12px;line-height:1.35;} /* Info cards (puerto) */ .info-card{padding:20px 20px 20px 22px;} .info-title{max-width:14ch;} /* Workshop */ .wk-day{padding:22px 20px;} .wk-head{max-width:100%;} /* Operaciones — el ritmo vertical ya lo da el gap de .op-card (--space-gap-lg); acá solo se ajusta el inset lateral para pantallas angostas. */ .op-card-top{padding:20px 18px 0;} .op-flow{margin:0 18px;} .op-margin-hero{margin:0 14px;padding:20px 14px;} .op-margin-val{font-size:44px;} .op-hero-photo{width:calc(100% - 36px);margin:0 18px;} .op-docs-btn{width:calc(100% - 36px);margin:0 18px 18px;} /* Briefing */ .vsl-head{max-width:100%;} /* 90 días: mockups más compactos, sin desbordar */ .fin-devices{height:280px;max-width:100%;} .dev-mac{width:min(420px,86vw);} .dev-phone{width:min(120px,26vw);right:0;} .fin-title{font-size:clamp(28px,8vw,40px);} .fin-lead{padding:0 4px;} /* Checkout */ .ck-box{padding:26px 20px 22px;} .ck-cta{padding:17px;font-size:14.5px;} .ck-wa{padding:15px;font-size:13px;} /* Lightbox */ .lb-panel{width:96vw;} .lb-nav{width:44px;} /* Sticky CTA: botón centrado, texto compacto */ .sticky-cta-btn{font-size:11.5px;padding:10px 16px;} } /* ---- MOBILE PEQUEÑO (≤380px): tipografía y elementos grandes achicados un poco más para que nada se desborde en pantallas angostas (iPhone SE y similares). ---- */ @media(max-width:380px){ /* .headline ya no se achica aquí: va en una sola línea atada a vw desde su regla base — reimponer un mínimo de 26px la desbordaría en pantallas de 320–380px. */ .info-title,.wk-title,.op-title,.vsl-title{font-size:clamp(24px,7vw,34px);} .fin-devices{height:250px;} .dev-phone{width:min(104px,24vw);} .op-margin-val{font-size:38px;} .hero-cta{padding:13px 20px;font-size:12px;} .hero-trust-line{font-size:10px;} } /* ============================================================================ BRIEFING STANDALONE — cuando el usuario mueve el briefing fuera de su posición (justo tras el hero), deja de ser panel sticky del pin-stack y fluye como sección normal. ============================================================================ */ .vsl-section.vsl-standalone{grid-area:auto;position:relative;top:auto;height:auto;min-height:100vh;min-height:100dvh;z-index:auto;} /* ============================================================================ ATMÓSFERAS POR SECCIÓN — cada parada del landing tiene su propia luz. El problema que esto resuelve: todas las secciones compartían el mismo negro plano y al hacer scroll no se distinguía dónde terminaba una y empezaba la otra. Cada atmósfera usa una metáfora del mundo del negocio: · autoridad → EL GARAJE (lamas de puerta de garaje + luz cálida lateral) · oferta → EL SHOWROOM (conos de luz cenital + piso en perspectiva) · operaciones→ EL PATIO DE SUBASTA (ya tenía su rojo; se suma asfalto) · checkout → LUZ DE FRENO (resplandor rojo desde abajo: el momento de decidir) Se define vía --fcb-bg-base y overrides de .fcb-grid::before, así el color que el usuario elija en /admin (--fcb-bg) SIEMPRE gana sobre la atmósfera. ============================================================================ */ /* AUTORIDAD — el garaje: lamas horizontales + luz cálida desde la izquierda (donde va la foto) */ [data-fcb-id="autoridad"]{ --fcb-bg-base: radial-gradient(46% 70% at 14% 52%, rgba(206,27,34,.11), transparent 72%), radial-gradient(60% 50% at 85% 100%, rgba(220,231,117,.045), transparent 70%), linear-gradient(180deg,#07080C,#0C0A0D 45%,#060709); } [data-fcb-id="autoridad"].fcb-grid::before{ background-image: repeating-linear-gradient(180deg, rgba(232,236,241,.022) 0 1px, transparent 1px 72px), linear-gradient(115deg, transparent 30%, rgba(232,236,241,.015) 42%, transparent 55%); background-size:auto,auto;opacity:1; mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);} /* OFERTA — el showroom: tinte lima ambiental + conos de luz cenital que respiran */ [data-fcb-id="oferta"]{ --fcb-bg-base: radial-gradient(55% 38% at 50% 0%, rgba(220,231,117,.08), transparent 72%), linear-gradient(180deg,#060809,#090B08 55%,#050708); } [data-fcb-id="oferta"].fcb-grid::before{ background-image: conic-gradient(from 168deg at 22% -8%, transparent 0 44%, rgba(220,231,117,.05) 49%, transparent 55%), conic-gradient(from 192deg at 78% -8%, transparent 0 45%, rgba(220,231,117,.04) 50%, transparent 56%); background-size:auto,auto;opacity:1;mask-image:none;-webkit-mask-image:none; animation:fcShowroomBreath 7s ease-in-out infinite;} @keyframes fcShowroomBreath{0%,100%{opacity:.65;}50%{opacity:1;}} /* piso del showroom: plano en perspectiva real que se pierde hacia el fondo */ [data-fcb-id="oferta"]::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-2%;height:46%; z-index:0;pointer-events:none;transform:perspective(620px) rotateX(58deg);transform-origin:bottom center; background-image: linear-gradient(rgba(220,231,117,.05) 1.5px,transparent 1.5px), linear-gradient(90deg,rgba(220,231,117,.05) 1.5px,transparent 1.5px); background-size:56px 56px; mask-image:linear-gradient(180deg,transparent,#000 45%,rgba(0,0,0,.5)); -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%,rgba(0,0,0,.5));} /* CHECKOUT — luz de freno: el rojo sube desde abajo (además del halo central que ya tenía) */ .ck-section::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;z-index:0;pointer-events:none; background: radial-gradient(60% 90% at 50% 108%, rgba(206,27,34,.22), transparent 70%), linear-gradient(0deg, rgba(206,27,34,.07), transparent 60%); animation:fcBrakeLight 4.5s ease-in-out infinite;} @keyframes fcBrakeLight{0%,100%{opacity:.75;}50%{opacity:1;}} @media(prefers-reduced-motion:reduce){ [data-fcb-id="oferta"].fcb-grid::before,.ck-section::after{animation:none;} } /* ============================================================================ BLOQUES GENÉRICOS (fcb) — MOTOR DE ESTILOS v2 Secciones creadas desde el panel /admin. Todo es configurable vía CSS custom properties que el renderer emite SOLO cuando hay valor definido; la cadena de herencia es: valor local → estilo global (fc-theme-vars, sufijo -g) → default del diseño. Breakpoints: móvil ≤640 · tablet ≤900. ============================================================================ */ .fcb{position:relative;overflow:hidden; background:var(--fcb-bg,var(--fcb-bg-base,#050709));color:var(--fcb-text,var(--ink)); margin-top:var(--fcb-mt,0);margin-bottom:var(--fcb-mb,0); /* padding: lado custom → preset (--fcb-pad-y por clase) */ padding:var(--fcb-pt,var(--fcb-pad-y,120px)) var(--fcb-pr,28px) var(--fcb-pb,var(--fcb-pad-y,120px)) var(--fcb-pl,28px);} .fcb-pad-sm{--fcb-pad-y:48px;} .fcb-pad-md{--fcb-pad-y:80px;} .fcb-pad-lg{--fcb-pad-y:120px;} .fcb-pad-xl{--fcb-pad-y:160px;} .fcb-border-top{border-top:1px solid #1A222C;} .fcb-grid::before{content:"";position:absolute;inset:0;z-index:0;opacity:.35;pointer-events:none; background-image:linear-gradient(rgba(140,151,166,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,151,166,.06) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 80%);} /* Fondo imagen/gradiente + overlay */ .fcb-bgimg{background-image:var(--fcb-bgimg);background-size:cover;background-position:center;} .fcb-has-overlay::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:var(--fcb-overlay,#000);opacity:var(--fcb-overlay-op,.6);} /* Contenedor */ .fcb-inner{position:relative;z-index:1;max-width:1160px;margin:0 auto;} .fcb-w-full .fcb-inner{max-width:none;} .fcb-w-wide .fcb-inner{max-width:1400px;} .fcb-w-narrow .fcb-inner{max-width:820px;} .fcb-w-custom .fcb-inner{max-width:var(--fcb-max,1160px);} .fcb-inner-narrow{max-width:820px!important;} .fcb-inner-full{max-width:none!important;} .fcb-has-minh{min-height:var(--fcb-minh);display:flex;flex-direction:column;justify-content:var(--fcb-alignv,flex-start);} .fcb-align-center{text-align:center;} .fcb-align-left{text-align:left;} .fcb-align-right{text-align:right;} /* Capas */ .fcb-layer-back{z-index:0;} .fcb-layer-front{z-index:5;} .fcb-layer-overlap{z-index:10;} /* Cabecera + tipografía (escala responsive: --fcb-tscale se resuelve por breakpoint) */ .fcb{--fcb-tscale:1;} .fcb-head{max-width:680px;margin-bottom:44px;} .fcb-head-center{margin-left:auto;margin-right:auto;text-align:center;} .fcb-kick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;margin-bottom:14px;} .fcb-accent-red .fcb-kick{color:var(--fcb-kick-color,var(--red));} .fcb-accent-lime .fcb-kick{color:var(--fcb-kick-color,var(--lime));} .fcb-accent-none .fcb-kick{color:var(--fcb-kick-color,var(--muted));} .fcb-title{font-family:'Barlow Condensed',sans-serif;font-style:italic; font-weight:var(--fcb-title-weight,900); text-transform:var(--fcb-title-tt,uppercase); font-size:calc(var(--fcb-title-size,clamp(28px,4vw,46px)) * var(--fcb-title-scale,1) * var(--fcb-tscale,1)); line-height:var(--fcb-title-lh,.98);letter-spacing:var(--fcb-title-ls,.01em); color:var(--fcb-title-color,#fff);margin:0 0 14px;} .fcb-lead{color:var(--fcb-text,var(--muted)); font-size:calc(var(--fcb-text-size,var(--fcb-body-size,15px)) * var(--fcb-tscale,1)); line-height:var(--fcb-text-lh,1.6);margin:0;max-width:var(--fcb-text-max,none);} .fcb-align-center .fcb-lead,.fcb-head-center .fcb-lead{margin-inline:auto;} .fcb-body{font-size:calc(var(--fcb-text-size,var(--fcb-body-size,15px)) * var(--fcb-tscale,1)); line-height:var(--fcb-text-lh,1.7);color:var(--fcb-text,#C7CFD9);max-width:var(--fcb-text-max,64ch);} .fcb-align-center .fcb-body{margin-inline:auto;} .fcb-body p{margin:0 0 1em;} .fcb-hint,.fcb-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:14px;} /* Autoridad (instructor): galería de fotos como FONDO de toda la sección (no una caja lateral) — tono claro, casi sin oscurecer — con el texto en un panel de vidrio esmerilado flotando encima. La legibilidad del texto NUNCA depende de oscurecer las fotos: el panel trae su propio contraste (fondo translúcido + blur), así las fotos pueden verse a pleno color. */ [data-fcb-id="autoridad"]{min-height:560px;display:flex;align-items:center;overflow:hidden;} /* ============================================================================ QUIÉN TE ENSEÑA · «expediente» Tres columnas: fotos · testimonio · fotos. El texto queda CENTRADO en el eje de la sección y las fotos se quedan todo el ancho que la lectura no necesita (una medida legible son ~540px; el resto sobraba). La sección se ensancha respecto al resto del sitio a propósito: es lo que permite que las fotos pasen de 148px a ~340px sin robarle sitio al texto. ========================================================================== */ /* Flexbox y no Grid a propósito: con las pistas de grid los envoltorios no llegaban a llenar su columna (las fotos colapsaban a 2px) por el dimensionado por contenido de la pista central. Con flex:1 1 0 el reparto es explícito y predecible en cualquier navegador. La clase es .fcb-auth-lay y NO .fcb-authority: el helper de secciones pinta
, o sea que la propia sección ya se llama .fcb-authority. Al compartir nombre, este display:flex caía sobre la sección y el contenedor real quedaba encogido a su contenido (791px de 1388), que es por lo que las fotos salían diminutas. */ .fcb-auth-lay{ position:relative;z-index:1; /* la sección [data-fcb-id="autoridad"] es display:flex (min-height + centrado vertical), así que este contenedor es un ítem flex: sin flex-basis explícito se encogía a su contenido — 800px de los 1864 disponibles — y por eso las fotos salían diminutas por mucho que se repartiera el espacio de dentro. */ flex:1 1 auto;width:100%; max-width:min(1240px,94vw); margin-inline:auto; display:flex;flex-direction:column; gap:clamp(18px,2.2vw,30px); } .fcb-authority-nophoto{max-width:720px;} /* El testimonio va primero en el DOM (es el contenido) y en medio a la vista: fotos · testimonio · fotos. Así queda SIEMPRE centrado en el eje, nunca a un lado. */ .fcb-side-a{order:1;} .fcb-authority-copy{order:2;} .fcb-side-b{order:3;} .fcb-authority-copy{ position:relative;z-index:2;width:100%;max-width:820px;margin-inline:auto; text-align:center;padding:clamp(16px,1.8vw,26px) clamp(12px,1.4vw,20px); } /* halo suave: separa el texto de las fotos sin encerrarlo en una caja */ .fcb-authority-copy::before{ content:"";position:absolute;inset:-14% -10%;z-index:-1; background:radial-gradient(60% 58% at 50% 50%,rgba(6,9,14,.88),rgba(6,9,14,.6) 58%,transparent 80%); } /* cada grupo es una fila de fotos */ .fcb-authority-side{display:flex;flex-direction:row;gap:clamp(8px,1.2vw,16px);min-width:0;} .fcb-authority-side>.fcb-authority-shot{flex:1 1 0;min-width:0;} /* En escritorio: dos fotos a cada lado y el testimonio en el centro. El testimonio lleva una base fija (la medida legible) y los lados se reparten TODO lo que sobra con flex:1 1 0 — por eso las fotos pasan de 186px a más de 400px sin quitarle sitio a la lectura. */ @media(min-width:1100px){ .fcb-auth-lay{ flex-direction:row;align-items:center; max-width:min(1520px,95vw); column-gap:clamp(18px,2.2vw,38px); } .fcb-side-a{order:1;} .fcb-authority-copy{order:2;} .fcb-side-b{order:3;} .fcb-side-a,.fcb-side-b{flex:1 1 0;min-width:0;} .fcb-authority-side{flex-direction:column;gap:clamp(12px,1.4vw,20px);} /* base fija = la medida de lectura; el resto es para las fotos */ .fcb-authority-copy{flex:0 0 clamp(420px,36%,560px);max-width:none;} /* flex:0 0 auto anula la base de la regla de fila: en dirección columna el flex-basis:0 fija la ALTURA a cero y aspect-ratio ya no puede resolverla (las fotos salían de 152×2). Con width:100% el ancho lo da la columna y el alto lo deduce la proporción. */ .fcb-authority-side>.fcb-authority-shot{flex:0 0 auto;width:100%;aspect-ratio:1/1;} /* desnivel: la columna derecha entra desfasada, no en espejo plano */ .fcb-side-b{margin-top:clamp(26px,3.4vw,56px);} } .fcb-authority-shot{ position:relative;margin:0;overflow:hidden;border-radius:4px; background:#0A0D12;border:1px solid rgba(255,255,255,.09); /* --par (scroll) × el multiplicador propio de cada foto: velocidades distintas = profundidad. Sin transición: va pegado al scroll, no rebotando detrás. */ transform:translate3d(0,calc(var(--par,0) * var(--drift,1) * 26px),0); will-change:transform; transition:opacity .5s ease,filter .5s ease; } /* velocidades de parallax distintas por posición: es la diferencia entre ellas lo que crea profundidad — con todas iguales se movería como una lámina */ .fcb-authority-shot{aspect-ratio:4/5;} .fcb-side-a .fcb-authority-shot:nth-child(1){--drift:-1;} .fcb-side-a .fcb-authority-shot:nth-child(2){--drift:.72;} .fcb-side-b .fcb-authority-shot:nth-child(1){--drift:.88;} .fcb-side-b .fcb-authority-shot:nth-child(2){--drift:-.66;} .fcb-authority-shot img{width:100%;height:100%;object-fit:cover;display:block; filter:saturate(1.05) contrast(1.02);} .fcb-shot-n{ position:absolute;left:0;bottom:0;z-index:2;padding:5px 9px;border-radius:0 4px 0 0; background:rgba(6,9,14,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em; color:rgba(232,236,241,.8); } /* filo lima que recorre el borde superior al pasar el ratón */ .fcb-authority-shot::after{ content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2; background:var(--lime);transform:scaleX(0);transform-origin:left; transition:transform .45s cubic-bezier(.2,.8,.2,1); } .fcb-authority-shot:hover::after{transform:scaleX(1);} /* foco: al mirar una, las demás se apagan */ .fcb-auth-lay:has(.fcb-authority-shot:hover) .fcb-authority-shot:not(:hover){ opacity:.42;filter:saturate(.55); } /* Entrada escalonada. La opacidad va en la figura y el zoom en la imagen: el transform de la figura lo ocupa el parallax, y transicionarlo lo volvería elástico en vez de ir pegado al scroll. */ @media(prefers-reduced-motion:no-preference){ .fcb-anim .fcb-authority-shot{opacity:0;} .fcb-anim .fcb-authority-shot img{transform:scale(1.08);} .fcb-anim.in .fcb-authority-shot{opacity:1;transition:opacity .8s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * .12s);} .fcb-anim.in .fcb-authority-shot img{transform:scale(1);transition:transform 1.2s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * .12s);} } .fcb-authority-copy .fcb-title{max-width:none;} /* Todo el texto sube a --ink. Con el panel más transparente, --muted caía a 2.2:1 sobre las zonas claras de las fotos (de hecho ya estaba en 3.9:1 ANTES de este cambio, por debajo del mínimo). La jerarquía la sostienen el tamaño, la cursiva y el punto rojo, no un gris más apagado. */ .fcb-authority-copy .fcb-title, .fcb-authority-bio, .fcb-authority-points li, .fcb-authority-tiktok{text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.6);} .fcb-authority-bio{color:var(--ink);font-size:15px;line-height:1.65;margin:0 auto 20px;max-width:46ch;} /* puntos de confianza: revelado tipo terminal (wipe de izquierda a derecha) */ .fcb-authority-points{list-style:none;margin:0 auto 20px;padding:0;display:inline-flex;flex-direction:column;gap:11px;text-align:left;} .fcb-authority-points li{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.03em;color:var(--ink); padding-left:20px;position:relative;transition:color .25s ease,padding-left .25s ease; clip-path:inset(0 100% 0 0);} .fcb-anim.in .fcb-authority-points li{animation:fcbWipe .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:inherit;} .fcb-authority-points li:nth-child(1){animation-delay:calc(var(--fcb-delay,0s) + .1s);} .fcb-authority-points li:nth-child(2){animation-delay:calc(var(--fcb-delay,0s) + .28s);} .fcb-authority-points li:nth-child(3){animation-delay:calc(var(--fcb-delay,0s) + .46s);} .fcb-authority-points li:nth-child(4){animation-delay:calc(var(--fcb-delay,0s) + .64s);} .fcb-authority-points li:nth-child(5){animation-delay:calc(var(--fcb-delay,0s) + .82s);} .fcb-authority-points li:nth-child(6){animation-delay:calc(var(--fcb-delay,0s) + 1s);} @keyframes fcbWipe{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}} .fcb-authority-points li::before{content:"◆";position:absolute;left:0;color:var(--lime);font-size:9px;top:3px;transition:transform .25s ease,color .25s ease;} .fcb-authority-points li:hover{color:#fff;padding-left:25px;} .fcb-authority-points li:hover::before{transform:scale(1.5) rotate(90deg);color:var(--red);} @media(prefers-reduced-motion:reduce){.fcb-authority-points li{clip-path:none!important;animation:none!important;}} .fcb-authority-tiktok{font-size:12.5px;color:var(--ink);opacity:.9;font-style:italic;margin:0;position:relative;padding-left:16px;} .fcb-authority-tiktok::before{content:"";position:absolute;left:0;top:.35em;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(206,27,34,.5);animation:fcbPulse 2.4s ease-out infinite;} @keyframes fcbPulse{0%{box-shadow:0 0 0 0 rgba(206,27,34,.45);}70%{box-shadow:0 0 0 8px rgba(206,27,34,0);}100%{box-shadow:0 0 0 0 rgba(206,27,34,0);}} @media(prefers-reduced-motion:reduce){.fcb-authority-tiktok::before{animation:none;}} @media(max-width:760px){ [data-fcb-id="autoridad"]{min-height:0;} /* (el apilado vive ahora en su propia consulta a 1099px) */ } /* ============================================================================ TU PROPIA MARCA — cabecera + beneficios, y un MURO de reels 9:16 a todo lo ancho que corre en cinta infinita (fc_cms_render_dealer). Aprovecha todo el espacio horizontal: la cinta se duplica y anima -50% para un loop sin costura; al pasar el cursor la cinta se pausa y el reel bajo el mouse se agranda. Copy de BRANDING (nunca "dealer" — implicación legal). Atmósfera: haces de luz. ============================================================================ */ [data-fcb-id="dealer"]{ --fcb-bg-base: radial-gradient(50% 60% at 82% 24%, rgba(220,231,117,.07), transparent 70%), radial-gradient(46% 60% at 12% 82%, rgba(206,27,34,.09), transparent 72%), linear-gradient(180deg,#06080B,#080A0D 55%,#050709); } .fcb-dealer-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; mask-image:radial-gradient(90% 85% at 50% 40%,#000,transparent 95%);-webkit-mask-image:radial-gradient(90% 85% at 50% 40%,#000,transparent 95%);} .fcb-dealer-beam{position:absolute;top:-30%;left:-20%;width:55%;height:160%; background:linear-gradient(90deg,transparent,rgba(220,231,117,.06),transparent); transform:skewX(-16deg);animation:fcDealerBeam 9s ease-in-out infinite;} .fcb-dealer-beam.b2{left:auto;right:-20%;background:linear-gradient(90deg,transparent,rgba(206,27,34,.06),transparent);animation-delay:-4.5s;animation-duration:11s;} @keyframes fcDealerBeam{0%,100%{transform:skewX(-16deg) translateX(-30%);opacity:.5;}50%{transform:skewX(-16deg) translateX(40%);opacity:1;}} /* Cabecera + beneficios */ .fcb-dealer-head-wrap{position:relative;z-index:1;text-align:center;} .fcb-dealer-handle{display:inline-flex;align-items:center;gap:7px;margin-bottom:18px; font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:#fff; background:rgba(9,11,15,.82);border:1px solid rgba(220,231,117,.4);border-radius:100px;padding:6px 14px; backdrop-filter:blur(6px);box-shadow:0 8px 26px rgba(0,0,0,.5);} .fcb-dealer-live{width:7px;height:7px;border-radius:50%;background:var(--red); box-shadow:0 0 0 0 rgba(206,27,34,.6);animation:fcDealerLive 1.8s ease-out infinite;} @keyframes fcDealerLive{0%{box-shadow:0 0 0 0 rgba(206,27,34,.55);}70%{box-shadow:0 0 0 7px rgba(206,27,34,0);}100%{box-shadow:0 0 0 0 rgba(206,27,34,0);}} .fcb-dealer-head-wrap .fcb-head{margin-left:auto;margin-right:auto;} .fcb-dealer-points{list-style:none;margin:34px auto 0;padding:0;max-width:940px; display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:left;} .fcb-dealer-points li{display:flex;gap:12px;align-items:flex-start;} .fcb-dealer-pt-mark{flex-shrink:0;width:11px;height:11px;margin-top:5px;position:relative;transform:rotate(45deg);border:1.5px solid var(--lime);} .fcb-dealer-pt-mark::after{content:"";position:absolute;inset:2px;background:var(--lime);opacity:.35;} .fcb-dealer-points b{display:block;font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:14.5px;color:#fff;margin-bottom:3px;} .fcb-dealer-points span{display:block;font-size:13px;line-height:1.5;color:var(--muted);} /* MURO / cinta a todo lo ancho */ .fcb-dealer-wall{position:relative;z-index:1;margin-top:52px; /* rompe el padding lateral de la sección para llegar de borde a borde */ margin-inline:calc(var(--fcb-pl,28px) * -1) calc(var(--fcb-pr,28px) * -1); overflow:hidden;padding-block:8px;} .fcb-dealer-track{display:flex;gap:20px;width:max-content;padding-inline:10px; animation:fcDealerMarquee 42s linear infinite;will-change:transform;} .fcb-dealer-wall:hover .fcb-dealer-track{animation-play-state:paused;} /* -100%/reps en vez de -50% fijo: el PHP repite la cinta más veces cuando hay pocos videos reales (para que nunca se sienta rala), y el % de traslado se ajusta para que el loop siga siendo perfecto sin costura en cualquier caso. */ @keyframes fcDealerMarquee{from{transform:translateX(0);}to{transform:translateX(calc(-100% / var(--fcb-reel-reps, 2)));}} .fcb-dealer-wall-fade{position:absolute;top:0;bottom:0;width:12%;max-width:180px;z-index:2;pointer-events:none;} .fcb-dealer-wall-fade.l{left:0;background:linear-gradient(90deg,#050709,transparent);} .fcb-dealer-wall-fade.r{right:0;background:linear-gradient(270deg,#050709,transparent);} /* Vitrina de video — deliberadamente NO es un "marco de teléfono estilo reel": el mensaje de esta sección es confianza/seriedad, no contenido casual de redes, así que el marco es una tarjeta premium (borde fino, esquina limpia, sombra marcada) en vez de un bisel con notch. Más grande que antes (192→252px) para que el video sea protagonista, no un detalle de fondo. */ .fcb-reel{flex-shrink:0;width:252px;transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s ease;} .fcb-dealer-track:hover .fcb-reel{filter:brightness(.6) saturate(.85);} .fcb-reel:hover{transform:translateY(-10px) scale(1.05);filter:brightness(1.08) saturate(1.05)!important;z-index:3;} .fcb-reel-phone{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden; background:#0A0D12;border:1px solid rgba(220,231,117,.22); box-shadow:0 26px 60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.5);} .fcb-reel:hover .fcb-reel-phone{border-color:rgba(220,231,117,.55);} .fcb-reel-media{width:100%;height:100%;object-fit:cover;display:block;} .fcb-reel-empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; background:repeating-linear-gradient(45deg,#0C0F15 0 10px,#0A0D12 10px 20px); color:#4A5563;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;text-align:center;line-height:1.5;} .fcb-reel-empty-icon{width:36px;height:36px;border-radius:50%;border:1px solid rgba(220,231,117,.3); display:flex;align-items:center;justify-content:center;color:var(--lime);font-size:13px;padding-left:2px;} .fcb-reel-scan{position:absolute;left:0;right:0;top:-40%;height:40%;z-index:2;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(220,231,117,.09) 50%,transparent);animation:fcbScan 4.2s cubic-bezier(.4,0,.2,1) infinite;} .fcb-reel:nth-child(2n) .fcb-reel-scan{animation-delay:-1.6s;} .fcb-reel:nth-child(3n) .fcb-reel-scan{animation-delay:-3s;} /* degradado inferior + etiqueta: se lee como "vitrina verificada", no como un sticker de red social */ .fcb-reel-phone::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;z-index:2;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(5,7,9,.85));} .fcb-reel-cap{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:5px; font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;} .fcb-reel-cap::before{content:"✓";color:var(--lime);font-weight:700;} .fcb-dealer-note{text-align:center;margin:30px 0 0;font-family:'JetBrains Mono',monospace; font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} @media(max-width:640px){ .fcb-dealer-points{grid-template-columns:1fr;gap:16px;max-width:360px;} .fcb-reel{width:196px;} .fcb-dealer-track{gap:14px;animation-duration:32s;} } @media(prefers-reduced-motion:reduce){ .fcb-dealer-beam,.fcb-dealer-live,.fcb-reel-scan{animation:none;} .fcb-dealer-beam{opacity:.6;} .fcb-dealer-track{animation:none;transform:none;flex-wrap:wrap;justify-content:center;width:auto;} .fcb-dealer-wall{margin-inline:0;} .fcb-dealer-wall-fade{display:none;} } /* Grillas (columnas y gap configurables por breakpoint) */ .fcb-cols{display:grid;grid-template-columns:repeat(var(--fcb-cols-desktop,3),1fr);gap:var(--fcb-gap,22px);align-items:stretch;} .fcb-noequal .fcb-cols{align-items:start;} /* Tarjetas */ .fcb-card{background:linear-gradient(180deg,#0C0F15,#090B10); border:1px solid var(--fcb-card-border,var(--fcb-card-border-g,#1A222C)); border-radius:var(--fcb-card-radius,var(--fcb-card-radius-g,0)); box-shadow:var(--fcb-card-shadow,none); padding:24px 22px;display:flex;flex-direction:column;gap:12px;position:relative; transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;} .fcb-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--red); border-radius:var(--fcb-card-radius,var(--fcb-card-radius-g,0)) var(--fcb-card-radius,var(--fcb-card-radius-g,0)) 0 0;} .fcb-accent-lime .fcb-card::before{background:var(--lime);} .fcb-accent-none .fcb-card::before{display:none;} .fcb-chov-lift .fcb-card:hover,.fcb-chov-lift .fcb-counter:hover,.fcb-chov-lift .fcb-testimonial:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.5);} .fcb-chov-glow .fcb-card:hover,.fcb-chov-glow .fcb-counter:hover,.fcb-chov-glow .fcb-testimonial:hover{border-color:rgba(220,231,117,.4);box-shadow:0 0 0 1px rgba(220,231,117,.15),0 20px 60px rgba(0,0,0,.45);} .fcb-card-icon{font-size:28px;line-height:1;color:var(--red);transition:color .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1);display:inline-block;} .fcb-card:hover .fcb-card-icon{color:var(--lime);transform:scale(1.18) rotate(-4deg);} /* ============================================================================ OFERTA · PILA DE TARJETAS DIRIGIDA POR SCROLL La cabecera pasa en flujo normal; después el bloque se ancla y cada imagen nueva sube desde abajo cubriendo a la anterior, mientras la lista de la derecha marca cuál está activa. El alto del contenedor crece con la cantidad de tarjetas (--fcb-stack-n): con un alto fijo, más items = menos scroll por transición y el efecto se atropella. --fcb-stack-step es el scroll que se lleva cada tarjeta. ========================================================================== */ [data-fcb-id="oferta"]{position:relative;} /* .fcb lleva overflow:hidden, y eso convierte la sección en el scrollport de position:sticky: el anclaje deja de funcionar y el bloque se queda quieto en vez de recorrer las tarjetas. Pero cambiarlo a `visible` deja escapar 78px de ancho. `clip` recorta igual que `hidden` SIN crear contenedor de scroll, que es justamente lo que necesita sticky. Fallback a hidden en navegadores sin soporte: ahí se pierde el anclaje, no la maquetación. */ .fcb-cards{overflow:hidden;} @supports(overflow:clip){ .fcb-cards{overflow:clip;} } .fcb-stack{ position:relative; --fcb-stack-step:50vh; height:calc(100dvh + var(--fcb-stack-n,1) * var(--fcb-stack-step)); } .fcb-stack-pin{ position:sticky;top:0; height:100dvh; display:flex;align-items:center; overflow:hidden; } .fcb-stack-grid{ width:100%; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; } /* --- columna de imágenes --- */ /* aspect-ratio 1/1 + posición absoluta de las tarjetas: reserva el hueco una sola vez, así apilarlas no provoca saltos de layout (CLS) */ .fcb-stack-media{ position:relative; aspect-ratio:1/1; width:100%; max-width:min(460px,42vh); margin-inline:auto; border-radius:14px; overflow:hidden; } .fcb-stack-card{ position:absolute;inset:0;margin:0; border-radius:14px;overflow:hidden; background:#0A0D12; border:1px solid rgba(220,231,117,.16); /* --enter lo escribe el JS (0 = fuera abajo, 1 = cubriendo) */ transform:translate3d(0,calc((1 - var(--enter,1)) * 108%),0); box-shadow:0 -18px 40px rgba(0,0,0,.55); will-change:transform; } .fcb-stack-card img{width:100%;height:100%;object-fit:cover;display:block;} .fcb-stack-ph{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:'Barlow Condensed',sans-serif;font-size:64px;font-weight:900; color:rgba(220,231,117,.25); } /* rótulo de la tarjeta: mismo texto que el título activo, para que se lea sin tener que mirar la lista */ /* --- columna de títulos --- */ .fcb-stack-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;} /* --on (0→1) lo escribe el scroll en cada frame. SIN transition a propósito: una transición por tiempo corre en su propio reloj y se despega del dedo — es lo que hacía que el movimiento se sintiera a saltos en vez de continuo. */ .fcb-stack-item{ padding:10px 0; border-top:1px solid rgba(255,255,255,.07); opacity:calc(.3 + .7 * var(--on,0)); } .fcb-stack-item:first-child{border-top:0;} .fcb-stack-t{ font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900; text-transform:uppercase;letter-spacing:.01em; font-size:clamp(19px,2.2vw,29px);line-height:1.1;margin:0; /* el color también se interpola con el scroll: de --muted (138,151,166) a blanco */ color:rgb(calc(138 + var(--on,0) * 117) calc(151 + var(--on,0) * 104) calc(166 + var(--on,0) * 89)); } /* 0fr→1fr abre a alto automático sin fijarlo a mano (el texto se edita desde el panel y su alto cambia) */ /* calc() NO admite unidades fr en grid-template-rows (el navegador descarta la regla entera), así que el valor lo escribe el JS como '0.42fr' — literal, que sí interpola. Aquí sólo queda el estado cerrado por defecto. */ .fcb-stack-body{ display:grid; grid-template-rows:0fr; opacity:var(--on,0); } .fcb-stack-body>*{overflow:hidden;min-height:0;} .fcb-stack-p{margin:6px 0 0;color:var(--lime);font-size:14.5px;line-height:1.6;max-width:46ch;} @media(max-width:900px){ .fcb-stack{--fcb-stack-step:46vh;} .fcb-stack-grid{grid-template-columns:1fr;gap:18px;justify-items:center;} .fcb-stack-media{max-width:min(320px,34vh);} .fcb-stack-list{width:100%;max-width:520px;} /* En móvil los 8 títulos completos no caben junto a la imagen (los nuestros son frases largas, no dos palabras). Se muestra sólo el activo, que además hereda el rótulo de la tarjeta — el recorrido lo marca la barra de abajo. */ .fcb-stack-item{ padding:0;border-top:0; display:grid; grid-template-rows:0fr; opacity:var(--on,0); } .fcb-stack-item>*{overflow:hidden;min-height:0;} /* el título va DEBAJO de la imagen, no encima: grande, en blanco y con peso */ .fcb-stack-t{font-size:clamp(21px,6vw,28px);text-align:center;} .fcb-stack-p{text-align:center;margin-inline:auto;font-size:14px;margin-top:10px;} } /* Barra de recorrido: un segmento por tarjeta. Es la única pista de "cuántas faltan" cuando la lista está colapsada en móvil. */ .fcb-stack-rail{ display:flex;gap:4px;margin-top:18px;grid-column:1/-1; max-width:520px;width:100%;margin-inline:auto; } .fcb-stack-rail span{ flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.14); transition:background .4s ease; } .fcb-stack-rail span.on{background:var(--lime);} /* Sin JS o con reduced-motion: todo apilado en flujo normal, legible y sin anclajes. Nunca se depende del script para poder leer la sección. */ @media(prefers-reduced-motion:reduce){ .fcb-stack{height:auto;} .fcb-stack-pin{position:static;height:auto;overflow:visible;} .fcb-stack-grid{grid-template-columns:1fr;} .fcb-stack-media{position:static;aspect-ratio:auto;max-width:420px;} .fcb-stack-card{position:static;transform:none;margin-bottom:14px;} .fcb-stack-card img{aspect-ratio:1/1;} .fcb-stack-item{opacity:1;grid-template-rows:1fr;} .fcb-stack-body{grid-template-rows:1fr;opacity:1;} .fcb-stack-t{color:#fff;} .fcb-stack-rail{display:none;} } /* ícono → rin de rueda: cubo central + rayos girando (idle) que aceleran al hover, como revolucionar motor */ [data-fcb-id="oferta"] .fcb-card-icon{position:relative;width:54px;height:54px;display:flex;align-items:center;justify-content:center; font-size:20px;border-radius:50%;background:radial-gradient(circle,#14181f,#0A0D12 70%); border:3px solid #232B36;box-shadow:inset 0 0 0 2px #0A0D12,0 0 0 4px rgba(6,9,14,.6);z-index:1;} [data-fcb-id="oferta"] .fcb-card-icon::before{content:"";position:absolute;inset:-3px;border-radius:50%;z-index:-1; background:repeating-conic-gradient(from 0deg,rgba(230,236,244,.85) 0deg 4deg,transparent 4deg 45deg), conic-gradient(from 0deg,var(--red),var(--lime),var(--red)); animation:ofaSpin 6s linear infinite; -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 8px) calc(100% - 3px),transparent calc(100% - 2px)); mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 8px) calc(100% - 3px),transparent calc(100% - 2px));} @keyframes ofaSpin{to{transform:rotate(360deg);}} [data-fcb-id="oferta"] .fcb-card:hover .fcb-card-icon{transform:scale(1.12);box-shadow:inset 0 0 0 2px #0A0D12,0 0 24px rgba(220,231,117,.35),0 0 0 4px rgba(6,9,14,.6);} [data-fcb-id="oferta"] .fcb-card:hover .fcb-card-icon::before{animation-duration:.7s;} @media(prefers-reduced-motion:reduce){ [data-fcb-id="oferta"] .fcb-card{opacity:1!important;filter:none!important;transform:none!important;} [data-fcb-id="oferta"] .fcb-card::after,[data-fcb-id="oferta"] .fcb-card-icon::before{animation:none!important;} } .fcb-card-img img{width:100%;height:150px;object-fit:cover;display:block;border-radius:calc(var(--fcb-card-radius,var(--fcb-card-radius-g,0)) * .6);} .fcb-card-title{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:calc(21px * var(--fcb-tscale,1));line-height:1;color:var(--fcb-title-color,#fff);margin:0;} .fcb-card-text{color:var(--fcb-text,var(--muted));font-size:calc(13.5px * var(--fcb-tscale,1));line-height:1.55;margin:0;} .fcb-card-cta{margin-top:auto;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);text-decoration:none;} .fcb-card-cta:hover{text-decoration:underline;} /* Galería / imagen */ .fcb-gallery-item{margin:0;} .fcb-gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--fcb-card-border,var(--fcb-card-border-g,#1A222C));border-radius:var(--fcb-card-radius,var(--fcb-card-radius-g,0));} .fcb-gallery-item figcaption,.fcb-figure figcaption{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--muted);margin-top:7px;text-transform:uppercase;} .fcb-figure{margin:0;} .fcb-figure img{width:100%;display:block;border:1px solid var(--fcb-card-border,var(--fcb-card-border-g,#1A222C));border-radius:var(--fcb-card-radius,var(--fcb-card-radius-g,0));} /* ============ FAQ — "expediente" con fondo atmosférico ============ Fondo: grilla técnica + resplandor rojo, igual que operaciones/checkout. Cada pregunta es un expediente numerado (contador CSS, sin JS/PHP extra), con apertura animada por CSS puro (grid-template-rows) manteniendo
/ nativo — accesible por teclado sin JS. */ .fcb-faq-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;} .fcb-faq-grid{position:absolute;inset:-1px;opacity:.4; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 85%); -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 85%);} .fcb-faq-glow{position:absolute;left:50%;top:-10%;width:900px;height:600px;transform:translateX(-50%); background:radial-gradient(closest-side,rgba(206,27,34,.16),transparent 70%);} .fcb-faq .fcb-inner{position:relative;z-index:1;} .fcb-faq{counter-reset:fcbfaq;} .fcb-faq-item{position:relative;counter-increment:fcbfaq; border:1px solid var(--fcb-card-border,var(--fcb-card-border-g,#1A222C)); background:linear-gradient(155deg,rgba(12,15,21,.92),rgba(7,9,14,.92)); margin-bottom:10px;border-radius:var(--fcb-card-radius,var(--fcb-card-radius-g,0)); border-left:2px solid #1A222C; transition:border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);} .fcb-faq-item:hover{border-left-color:var(--red);} .fcb-faq-item[open]{border-left-color:var(--lime);box-shadow:0 16px 40px rgba(0,0,0,.35);} .fcb-faq-item summary{display:flex;align-items:center;gap:16px;cursor:pointer; padding:17px 20px;list-style:none;} .fcb-faq-item summary::-webkit-details-marker{display:none;} .fcb-faq-item summary::before{ content:counter(fcbfaq,decimal-leading-zero); font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em; color:var(--red);flex-shrink:0;opacity:.75;transition:color .3s ease;} .fcb-faq-item[open] summary::before{color:var(--lime);} .fcb-faq-q{flex:1;font-family:'IBM Plex Sans',sans-serif;font-weight:600; font-size:calc(14.5px * var(--fcb-tscale,1));color:#fff;} .fcb-faq-chev{position:relative;width:16px;height:16px;flex-shrink:0;} .fcb-faq-chev::before,.fcb-faq-chev::after{content:"";position:absolute;background:var(--red); transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease;} .fcb-faq-chev::before{left:0;top:50%;width:100%;height:1.5px;transform:translateY(-50%);} .fcb-faq-chev::after{top:0;left:50%;width:1.5px;height:100%;transform:translateX(-50%);} .fcb-faq-item[open] .fcb-faq-chev::before,.fcb-faq-item[open] .fcb-faq-chev::after{background:var(--lime);} .fcb-faq-item[open] .fcb-faq-chev::after{transform:translateX(-50%) rotate(90deg) scaleY(0);} /* alto animado con CSS puro (sin JS): la fila del grid pasa de 0fr a 1fr */ .fcb-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1);} .fcb-faq-item[open] .fcb-faq-a{grid-template-rows:1fr;} .fcb-faq-a-inner{overflow:hidden;min-height:0;} .fcb-faq-a-inner>*:first-child{margin-top:0;} .fcb-faq-a-inner{padding:0 20px 18px 46px;color:var(--muted);font-size:13.5px;line-height:1.6;} /* entrada: ligera rotación 3D alternada + fade, más notoria que el fade-up genérico */ .fcb-faq.fcb-anim-fade-up, [class*="fcb-anim-"] .fcb-faq{perspective:1000px;} .fcb-anim .fcb-faq .fcb-faq-item{transform:rotateX(-14deg) translateY(18px);transform-origin:top center;} .fcb-anim.in .fcb-faq .fcb-faq-item{transform:none;} @media(prefers-reduced-motion:reduce){ .fcb-anim .fcb-faq .fcb-faq-item,.fcb-anim.in .fcb-faq .fcb-faq-item{transform:none!important;} } /* CTA banner + BOTONES (fcbtn: primario/secundario globales o custom) */ .fcb-ctabox-horizontal{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;} .fcb-ctabox-horizontal .fcb-head{margin-bottom:10px;} .fcb-ctabox-horizontal .fcb-ctabox-copy{flex:1;min-width:260px;} .fcb-cta-wrap{margin-top:26px;} .fcb-ctabox-horizontal .fcb-cta-wrap{margin-top:0;} .fcb-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:inherit;} .fcb-align-center .fcb-btns{justify-content:center;} .fcbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em;text-transform:uppercase; padding:var(--fcbtn-py,17px) var(--fcbtn-px,32px);text-decoration:none;cursor:pointer; border-radius:var(--fcbtn-radius,0);box-shadow:var(--fcbtn-shadow,none); border:var(--fcbtn-bw,0) solid var(--fcbtn-border,transparent); transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .2s,border-color .2s;} .fcbtn-primary{background:var(--fcbtn-bg,var(--fcbtn-primary-bg,var(--lime)));color:var(--fcbtn-color,var(--fcbtn-primary-color,#0D1117));border-radius:var(--fcbtn-radius,var(--fcbtn-primary-radius,0));} .fcbtn-secondary{background:var(--fcbtn-bg,var(--fcbtn-secondary-bg,transparent));color:var(--fcbtn-color,var(--fcbtn-secondary-color,#C7CFD9)); border:var(--fcbtn-bw,1px) solid var(--fcbtn-border,var(--fcbtn-secondary-border,#262E39));} .fcbtn-custom{background:var(--fcbtn-bg,var(--lime));color:var(--fcbtn-color,#0D1117);} .fcbtn-full{width:100%;} .fcbtn-icon{font-size:1.05em;line-height:1;} .fcbtn-hover-lift:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(220,231,117,.24);} .fcbtn-hover-shine{position:relative;overflow:hidden;} .fcbtn-hover-shine::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg) translateX(0);transition:transform .6s ease;} .fcbtn-hover-shine:hover::after{transform:skewX(-18deg) translateX(460%);} /* compat con el viejo .fcb-cta */ .fcb-cta{display:inline-flex;align-items:center;gap:10px;background:var(--fcbtn-primary-bg,var(--lime));color:var(--fcbtn-primary-color,#0D1117); font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em;text-transform:uppercase; padding:17px 32px;text-decoration:none;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;} .fcb-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(220,231,117,.28);color:var(--fcbtn-primary-color,#0D1117);} /* Contadores / testimonios / comparativa */ .fcb-counter{text-align:center;padding:22px 14px;border:1px solid var(--fcb-card-border,var(--fcb-card-border-g,#1A222C));background:rgba(7,10,15,.6);border-radius:var(--fcb-card-radius,var(--fcb-card-radius-g,0));transition:transform .3s,border-color .3s,box-shadow .3s;} .fcb-counter-value{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;font-size:calc(44px * var(--fcb-tscale,1));line-height:.95;color:var(--fcb-title-color,#fff);text-shadow:0 0 26px rgba(220,231,117,.35);} .fcb-counter-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-top:8px;} .fcb-counter-detail{color:var(--muted);font-size:12px;margin-top:6px;} .fcb-testimonial{margin:0;border:1px solid var(--fcb-card-border,var(--fcb-card-border-g,#1A222C));background:linear-gradient(180deg,#0C0F15,#090B10);padding:22px;display:flex;flex-direction:column;gap:14px;border-radius:var(--fcb-card-radius,var(--fcb-card-radius-g,0));transition:transform .3s,border-color .3s,box-shadow .3s;} .fcb-quote{color:#C7CFD9;font-size:calc(14px * var(--fcb-tscale,1));line-height:1.6;margin:0;font-style:italic;} .fcb-quote::before{content:"“";color:var(--red);font-size:22px;line-height:0;margin-right:2px;} .fcb-quote-by{display:flex;align-items:center;gap:10px;margin-top:auto;} .fcb-quote-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;} .fcb-quote-by b{color:#fff;font-size:13px;display:block;} .fcb-quote-by small{color:var(--muted);font-size:11px;display:block;} .fcb-comp-head,.fcb-comp-row{display:grid;grid-template-columns:1fr 1fr;gap:1px;} .fcb-comp-head span{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:19px; padding:14px 18px;background:#0C0F15;border:1px solid var(--fcb-card-border,var(--fcb-card-border-g,#1A222C));color:var(--muted);} .fcb-comp-head span.pos{color:var(--lime);} .fcb-comp-row span{padding:13px 18px;background:rgba(7,10,15,.7);border:1px solid #141C24;color:var(--muted);font-size:13.5px;line-height:1.5;} .fcb-comp-row span.pos{color:#E2E8F0;} /* ---- Animaciones de entrada (todas las variantes, curva configurable) ---- */ @media(prefers-reduced-motion:no-preference){ .fcb-anim .fcb-item,.fcb-anim .fcb-head,.fcb-anim .fcb-body,.fcb-anim .fcb-cta-wrap,.fcb-anim .fcb-figure{ opacity:0;transition:opacity var(--fcb-dur,.65s) var(--fcb-ease,cubic-bezier(.2,.8,.2,1)), transform var(--fcb-dur,.65s) var(--fcb-ease,cubic-bezier(.2,.8,.2,1)), filter var(--fcb-dur,.65s) var(--fcb-ease,cubic-bezier(.2,.8,.2,1)); transition-delay:var(--fcb-delay,0s);} .fcb-anim-fade-up .fcb-item,.fcb-anim-fade-up .fcb-head,.fcb-anim-fade-up .fcb-body,.fcb-anim-fade-up .fcb-cta-wrap,.fcb-anim-fade-up .fcb-figure, .fcb-anim-slide-up .fcb-item,.fcb-anim-slide-up .fcb-head,.fcb-anim-slide-up .fcb-body,.fcb-anim-slide-up .fcb-cta-wrap,.fcb-anim-slide-up .fcb-figure{transform:translateY(30px);} .fcb-anim-slide-down .fcb-item,.fcb-anim-slide-down .fcb-head,.fcb-anim-slide-down .fcb-body,.fcb-anim-slide-down .fcb-cta-wrap,.fcb-anim-slide-down .fcb-figure{transform:translateY(-30px);} .fcb-anim-slide-left .fcb-item,.fcb-anim-slide-left .fcb-head,.fcb-anim-slide-left .fcb-body,.fcb-anim-slide-left .fcb-cta-wrap,.fcb-anim-slide-left .fcb-figure{transform:translateX(40px);} .fcb-anim-slide-right .fcb-item,.fcb-anim-slide-right .fcb-head,.fcb-anim-slide-right .fcb-body,.fcb-anim-slide-right .fcb-cta-wrap,.fcb-anim-slide-right .fcb-figure{transform:translateX(-40px);} .fcb-anim-zoom .fcb-item,.fcb-anim-zoom .fcb-head,.fcb-anim-zoom .fcb-body,.fcb-anim-zoom .fcb-cta-wrap,.fcb-anim-zoom .fcb-figure, .fcb-anim-scale-in .fcb-item,.fcb-anim-scale-in .fcb-head,.fcb-anim-scale-in .fcb-body,.fcb-anim-scale-in .fcb-cta-wrap,.fcb-anim-scale-in .fcb-figure{transform:scale(.92);} .fcb-anim-blur-in .fcb-item,.fcb-anim-blur-in .fcb-head,.fcb-anim-blur-in .fcb-body,.fcb-anim-blur-in .fcb-cta-wrap,.fcb-anim-blur-in .fcb-figure{filter:blur(10px);transform:scale(1.02);} .fcb-anim.in .fcb-item,.fcb-anim.in .fcb-head,.fcb-anim.in .fcb-body,.fcb-anim.in .fcb-cta-wrap,.fcb-anim.in .fcb-figure{opacity:1;transform:none;filter:none;} .fcb-anim.in .fcb-item:nth-child(2){transition-delay:calc(var(--fcb-delay,0s) + var(--fcb-stagger,.08s));} .fcb-anim.in .fcb-item:nth-child(3){transition-delay:calc(var(--fcb-delay,0s) + var(--fcb-stagger,.08s)*2);} .fcb-anim.in .fcb-item:nth-child(4){transition-delay:calc(var(--fcb-delay,0s) + var(--fcb-stagger,.08s)*3);} .fcb-anim.in .fcb-item:nth-child(5){transition-delay:calc(var(--fcb-delay,0s) + var(--fcb-stagger,.08s)*4);} .fcb-anim.in .fcb-item:nth-child(6){transition-delay:calc(var(--fcb-delay,0s) + var(--fcb-stagger,.08s)*5);} .fcb-anim.in .fcb-item:nth-child(7){transition-delay:calc(var(--fcb-delay,0s) + var(--fcb-stagger,.08s)*6);} .fcb-anim.in .fcb-item:nth-child(8){transition-delay:calc(var(--fcb-delay,0s) + var(--fcb-stagger,.08s)*7);} } @media(prefers-reduced-motion:reduce){ .fcb-anim .fcb-item,.fcb-anim .fcb-head,.fcb-anim .fcb-body,.fcb-anim .fcb-cta-wrap,.fcb-anim .fcb-figure{opacity:1!important;transform:none!important;filter:none!important;} } /* ---- Responsive del motor (tablet ≤900 · móvil ≤640, herencia m←t←desktop) ---- */ @media(max-width:900px){ .fcb{--fcb-tscale:var(--fcb-tscale-t,1); padding:var(--fcb-pt-t,var(--fcb-pt,var(--fcb-pad-y,120px))) var(--fcb-pr-t,var(--fcb-pr,28px)) var(--fcb-pb-t,var(--fcb-pb,var(--fcb-pad-y,120px))) var(--fcb-pl-t,var(--fcb-pl,28px));} .fcb-cols{grid-template-columns:repeat(var(--fcb-cols-tablet,2),1fr);} .fcb-hide-tablet{display:none!important;} } @media(min-width:901px){ .fcb-hide-desktop{display:none!important;} } @media(max-width:640px){ .fcb{--fcb-tscale:var(--fcb-tscale-m,var(--fcb-tscale-t,1)); padding:var(--fcb-pt-m,var(--fcb-pt-t,var(--fcb-pt,var(--fcb-pad-y,96px)))) var(--fcb-pr-m,var(--fcb-pr-t,var(--fcb-pr,20px))) var(--fcb-pb-m,var(--fcb-pb-t,var(--fcb-pb,var(--fcb-pad-y,96px)))) var(--fcb-pl-m,var(--fcb-pl-t,var(--fcb-pl,20px)));} .fcb-cols{grid-template-columns:repeat(var(--fcb-cols-mobile,1),1fr);} .fcb-hide-mobile{display:none!important;} .fcb-malign-left{text-align:left;} .fcb-malign-center{text-align:center;} .fcb-malign-right{text-align:right;} .fcb-stack-reverse .fcb-cols,.fcb-stack-reverse.fcb-ctabox-horizontal{display:flex;flex-direction:column-reverse;} .fcb-anim-nomobile .fcb-item,.fcb-anim-nomobile .fcb-head,.fcb-anim-nomobile .fcb-body,.fcb-anim-nomobile .fcb-cta-wrap,.fcb-anim-nomobile .fcb-figure{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;} .fcbtn{width:100%;} .fcb-ctabox-horizontal{flex-direction:column;align-items:stretch;} } /* Espaciador */ .fcb-spacer{width:100%;} .fcb-off{transform:translate(var(--fcb-ox,0px),var(--fcb-oy,0px));} /* ---- Price badge (oferta con precio real tachado) ---- */ .fc-price-badge{ display:flex;align-items:center;gap:.6em;justify-content:center; flex-wrap:wrap;margin:0 0 14px; } .fc-price-tag{ font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:#1a1a1a;background:#DCE775; padding:4px 10px;border-radius:999px;font-weight:700; } .fc-price-was{ font-family:'JetBrains Mono',monospace;font-size:15px;color:rgba(255,255,255,.45); text-decoration:line-through;text-decoration-color:#CE1B22;text-decoration-thickness:2px; } .fc-price-now{ font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800; font-size:22px;color:#DCE775;letter-spacing:.01em; } .fc-price-badge-compact{ gap:.4em;margin:0 8px 0 0; } .fc-price-badge-compact .fc-price-tag{display:none;} .fc-price-badge-compact .fc-price-was{font-size:12px;} .fc-price-badge-compact .fc-price-now{font-size:15px;} @media(max-width:640px){ .fc-price-badge{gap:.45em;margin-bottom:10px;} .fc-price-tag{font-size:10px;padding:3px 8px;} .fc-price-was{font-size:13px;} .fc-price-now{font-size:19px;} } /* ============================================================================ TARJETA DE FIRMA DEL HERO — imagen del operador + subtítulo Capas superpuestas en la MISMA tarjeta (no columnas): la imagen ocupa toda la caja, y encima van el destello del cristal, el barrido de luz, el velo oscuro y por último el texto. La coreografía es de una sola pasada al cargar: imagen entra → destello en los lentes → barrido de luz (derecha→izquierda) → la imagen se atenúa al fondo → el texto aparece DELANTE. El alto va acotado (no aspect-ratio libre) a propósito: la tarjeta reemplaza dos párrafos, así que si crece de más empuja el CTA fuera del viewport. ========================================================================== */ /* .hero-copy es un flex item de .fg (column + align-items:center), así que su ancho lo dicta el titular — un width:% aquí quedaría atado a esa medida. Se mide contra el viewport y se centra con left/translateX para poder ser MÁS ancha que el titular sin desbordar hacia un solo lado. */ .hero-card-wrapper{ position:relative; left:50%; transform:translateX(-50%); width:min(880px,92vw); margin:8px 0 0; pointer-events:none; } /* El alto es fijo y deliberadamente corto: esta tarjeta sustituye a dos párrafos, así que su huella vertical debe ser equivalente — si crece, empuja el CTA y el badge de precio fuera del viewport en pantallas de portátil. */ .hero-card{ position:relative; height:104px; border-radius:14px; overflow:hidden; border:1px solid rgba(220,231,117,.28); background:rgba(220,231,117,.06); box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 0 0 1px rgba(220,231,117,.05); opacity:0; animation:hcCard .7s cubic-bezier(.22,.8,.3,1) .05s forwards; } @keyframes hcCard{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}} /* --- capa 1: la imagen --- */ .hero-card-image{ position:absolute;inset:0;z-index:1; width:100%;height:100%; object-fit:cover;object-position:50% 40%; opacity:0; animation:hcImg .8s ease-out .25s forwards; } @keyframes hcImg{from{opacity:0;transform:scale(1.06);}to{opacity:1;transform:scale(1);}} /* --- capa 2: los cristales se encienden (glasses glint de anime) --- No es un resplandor difuso: el cristal se rellena de blanco PLANO y opaco y se queda encendido, como cuando el personaje se ajusta los lentes. La máscara es un PNG con el mismo lienzo que la foto y el mismo object-fit/object-position, así que calza sola en cada breakpoint sin porcentajes que recalcular. El encendido va sincronizado con el paso del barrido por la zona de los lentes. */ .hero-card-lentes{ position:absolute;inset:0;z-index:2; width:100%;height:100%; object-fit:cover;object-position:50% 40%; opacity:0; filter:drop-shadow(0 0 10px rgba(214,240,255,.85)) drop-shadow(0 0 26px rgba(150,200,255,.45)); animation:hcLentes .9s steps(1,end) 1.3s forwards; } /* steps() en el arranque = chispazo seco, sin rampa suave (look de celda); luego se mantiene encendido con fill forwards. */ @keyframes hcLentes{ 0%{opacity:0;} 8%{opacity:1;} 16%{opacity:.55;} 24%{opacity:1;} 100%{opacity:1;} } /* --- capa 3: barrido de luz, DERECHA → IZQUIERDA --- */ .hero-card-sweep{ position:absolute;z-index:3;top:0;bottom:0; left:0;width:100%; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,rgba(220,231,117,.28) 56%,transparent 66%); transform:translateX(120%); animation:hcSweep 1.05s cubic-bezier(.4,0,.2,1) 1s; } @keyframes hcSweep{from{transform:translateX(120%);}to{transform:translateX(-120%);}} /* --- capa 4: velo que manda la imagen al fondo (queda fijo: forwards) --- */ .hero-card-dim{ position:absolute;inset:0;z-index:4; /* Velo translúcido tipo panel holográfico: la foto SIGUE VIÉNDOSE detrás del texto, sólo baja de intensidad. Se refuerza hacia el centro para sostener la legibilidad justo donde cae el párrafo. */ background:radial-gradient(62% 130% at 50% 50%,rgba(6,9,14,.74),rgba(6,9,14,.60) 70%,rgba(6,9,14,.52)), linear-gradient(0deg,rgba(220,231,117,.05),rgba(220,231,117,.05)); opacity:0; animation:hcDim .7s ease-out 1.95s forwards; } @keyframes hcDim{from{opacity:0;}to{opacity:1;}} /* --- capa 5: el texto, DELANTE de la imagen --- */ .hero-card-content{ position:absolute;inset:0;z-index:5; display:flex;align-items:center;justify-content:center; padding:20px 34px; } /* Tipografía idéntica a la del antiguo

: mismo tamaño, interlineado, ancho de medida y color. Lo único añadido es la sombra, necesaria para sostener la legibilidad sobre la foto (no es un cambio de tipografía). */ .hero-card-text{ margin:0; /* --ink en vez de --muted: sobre la foto, el gris apagado del párrafo original caía a 2.3:1 de contraste en las zonas claras (cara, camisa). Con --ink el peor caso queda en 5.7:1 — legible en toda la superficie sin salirse de la paleta. */ color:var(--ink); font-size:15px;line-height:1.55; /* La medida sube de 44ch a 68ch: la tarjeta es mucho más ancha que la columna original, y con 44ch el párrafo del landing caía a 3 líneas y rozaba el borde. El umbral real para bajar a 2 líneas está en 62ch — 68ch deja holgura por si el texto se edita desde el panel. */ max-width:68ch; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.75); opacity:0; animation:hcText .7s ease-out 2.25s forwards; } @keyframes hcText{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} /* --- responsive: la tarjeta se estrecha y baja de alto, nunca desborda --- */ @media(max-width:900px){ .hero-card-wrapper{width:min(680px,92vw);margin-top:10px;} .hero-card{height:118px;} .hero-card-content{padding:14px 22px;} .hero-card-text{font-size:14px;} } /* Móvil: la caja se estrecha mucho, así que el mismo texto ocupa más líneas — el alto sube para acomodarlas sin recortar. */ @media(max-width:640px){ .hero-card-wrapper{width:calc(100vw - 32px);margin-top:10px;} .hero-card{height:146px;border-radius:12px;} .hero-card-content{padding:12px 14px;} .hero-card-text{font-size:12.5px;line-height:1.5;} } /* --- reduced-motion: sin coreografía, estado final directo --- */ @media(prefers-reduced-motion:reduce){ .hero-card,.hero-card-image,.hero-card-dim,.hero-card-text,.hero-card-lentes{animation:none;opacity:1;transform:none;} .hero-card-sweep{display:none;} } /* ============================================================================ ESCENA DE LA CALCULADORA EN VIEWPORTS CORTOS El recorte de esta escena depende del ALTO disponible, no del ancho: un móvil apaisado o una ventana de escritorio baja fallan igual que un iPhone SE. Por eso la consulta es por max-height y no por max-width — así también cubre el caso de escritorio con la ventana reducida, que ninguna media query de ancho atraparía. Cuanto más recorta esto, menos tiene que escalar --calc-fit (ver hero-redesign.js) y más legible queda la escena. ========================================================================== */ @media(max-height:760px){ .calc-wrap{gap:12px;} .iam-logo{margin-bottom:6px;} .calc-kick{margin-bottom:6px;} .calc-h{margin-bottom:8px;} .calc-p{line-height:1.45;} .calc-tag{margin-top:8px;} .calc-badge{padding:8px 14px;} .calc-body{padding:12px 14px 14px;} .calc-field .sel{height:38px;} .calc-field label{margin-bottom:3px;} .calc-grid{gap:8px;} .calc-result{margin-top:10px;padding-top:10px;} .calc-compare{margin-top:8px;} .calc-compare .cmp{padding:7px 10px;} .calc-bar{margin-top:10px;} .pv-note{padding:8px 14px;} .pv-disclaimer{padding:6px 14px 10px;line-height:1.3;} } /* Móvil apaisado: @media(max-width:900px) apila la escena en una columna, lo que en 390px de alto la vuelve imposible de encajar (1002px de contenido). Con el ancho que sobra en apaisado, volver a dos columnas baja la altura a la del panel solo —el intro cabe al lado— y la escena entra sin recortarse. */ @media(max-height:520px) and (orientation:landscape){ .calc-wrap{grid-template-columns:.95fr 1.05fr;gap:18px;align-items:center;} .calc-intro{text-align:left;} .calc-h{margin-inline:0;max-width:16ch;} .calc-p{margin-inline:0;max-width:40ch;} } /* ============================================================================ SLIDE 3 · TRANSFORMACIÓN HOLOGRAMA → PANEL (scroll-driven) La escena ilustrada entra primero con el título y el texto; después, al seguir bajando, el holograma de la ilustración se convierte en el panel real de Import-A-Matic. La coreografía la marca hero-redesign.js dentro de la MISMA ventana de scroll que ya tenía el slide — no se alarga la sección. Continuidad espacial: el panel nace en el hueco del holograma y crece hasta su tamaño legible, con la ilustración atenuándose detrás (nunca desaparece). Sólo se animan opacity/transform/filter: nada que provoque reflow. ========================================================================== */ /* Las coordenadas del holograma viven en hero-redesign.js (HOLO_BOX) y son % de la IMAGEN, no del contenedor: como la ilustración se recorta con object-fit:cover, los dos sistemas no coinciden. El JS resuelve la geometría del recorte y coloca el halo en píxeles — mismo problema y misma solución que la máscara de los cristales. */ .calc-scene{ position:absolute;inset:0;z-index:0; overflow:hidden;pointer-events:none; opacity:var(--scene-in,0); will-change:opacity; } .calc-scene.no-holo{display:none;} .calc-holo-img{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;object-position:50% 45%; /* se apaga a medida que el panel toma el relevo, pero conserva presencia: el mínimo de brillo (.34) es lo que la mantiene como escena, no como fondo muerto */ filter:brightness(calc(1 - var(--morph,0) * .55)) saturate(calc(1 - var(--morph,0) * .3)); transform:scale(calc(1 + var(--morph,0) * .06)); will-change:filter,transform; } /* velo que crece con el morph para que el panel gane contraste sobre la escena */ .calc-scene::after{ content:"";position:absolute;inset:0; background:radial-gradient(70% 90% at 50% 50%,rgba(6,9,14,.42),rgba(6,9,14,.66) 70%,rgba(6,9,14,.82)); opacity:var(--morph,0); } /* --- marcador invisible del holograma --- Ya no se pinta: su única función es que el JS mida dónde está el holograma dentro de la ilustración para que el panel nazca ahí. Dibujarlo era un error — quedaba un rectángulo suelto que no coincidía con nada, porque la ilustración YA trae su propio borde. El halo real va en el borde del panel (ver más abajo). */ .calc-holo-halo{ position:absolute;z-index:1; /* left/top/width/height los fija el JS en px (ver placeHalo) */ visibility:hidden; pointer-events:none; } /* --- el panel emerge del holograma --- La traslación/escala iniciales las calcula el JS midiendo la caja del halo contra la del panel, así que el panel arranca encajado en el hueco del holograma. Clave del efecto: durante la transformación el panel es TRANSLÚCIDO y sólo se vuelve opaco al final. Si fuese opaco desde el principio, taparía el holograma justo en el pico del halo y se leería como un rectángulo creciendo encima, no como una transformación. --morph lo publica el JS en .calc-fg. */ .calc-col{ will-change:opacity,transform; } /* --- HALO NEÓN ROJO EN EL BORDE DEL PANEL QUE NACE --- drop-shadow sigue la silueta real del elemento, así que el resplandor abraza el borde del panel mientras crece: siempre alineado, sin coordenadas que cuadrar. Va en el mismo rojo de la marca (--red) que el resto del sitio. */ .calc-fg .calc-col{ filter: drop-shadow(0 0 calc(var(--halo,0) * 12px) rgba(206,27,34,calc(var(--halo,0) * .95))) drop-shadow(0 0 calc(var(--halo,0) * 38px) rgba(206,27,34,calc(var(--halo,0) * .6))) drop-shadow(0 0 calc(var(--halo,0) * 90px) rgba(206,27,34,calc(var(--halo,0) * .3))); } /* filo encendido justo sobre el borde del panel */ .calc-fg .calc-panel::after{ content:"";position:absolute;inset:-1px;z-index:2; border:1px solid rgba(255,90,96,.95); box-shadow:inset 0 0 22px rgba(206,27,34,.45); opacity:var(--halo,0); pointer-events:none; } /* barrido de energía que recorre el panel mientras el halo está encendido */ .calc-fg .calc-panel::before{ content:"";position:absolute;left:0;right:0;height:26%;z-index:2; top:calc(var(--halo-sweep,0) * 126% - 26%); background:linear-gradient(180deg,transparent,rgba(255,120,125,.42),transparent); opacity:var(--halo,0); pointer-events:none; } /* El desenfoque del panel: radio FIJO, se cruza por opacidad. Antes era backdrop-filter:blur(calc(var(--morph) * 10px)) — el radio cambiaba en cada frame del scroll, y eso invalida la caché del desenfoque: la GPU tiene que recapturar y volver a difuminar todo lo que hay detrás con un kernel distinto, sesenta veces por segundo. Es lo más caro que se puede animar, y estaba exactamente en la transición del slide 3, que es donde se notaba el tirón. Con radio constante el kernel no cambia y sólo se compone opacidad, que el compositor resuelve sin repintar. El resultado en pantalla es el mismo. */ .calc-fg .calc-panel{ overflow:hidden; /* contiene el barrido del ::before (no afecta al box-shadow exterior) */ background:rgba(11,15,21,calc(.10 + var(--morph,1) * .84)); backdrop-filter:none; -webkit-backdrop-filter:none; /* el borde superior rojo y el resplandor del panel también se revelan al final */ border-top-color:rgba(206,27,34,var(--morph,1)); } .calc-fg .calc-panel > .calc-blur{ position:absolute;inset:0;z-index:0;pointer-events:none; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:var(--morph,1); } /* .calc-body no está posicionado, así que en el orden de pintado quedaría DEBAJO de .calc-blur (que sí lo está) y el desenfoque se comería el texto del propio panel. Se sube todo el contenido real por encima de la capa. */ .calc-fg .calc-panel > *:not(.calc-blur){position:relative;z-index:1;} /* el contenido interno aparece en la segunda mitad del morph: antes se solaparía con el texto del holograma y ambos serían ilegibles */ .calc-fg .calc-body, .calc-fg .calc-badge, .calc-fg .pv-note, .calc-fg .pv-disclaimer{ opacity:clamp(0,calc((var(--morph,1) - .45) / .4),1); } /* --- el intro (logo, kicker, título, texto) entra ANTES que el panel --- */ .calc-intro{ position:relative; opacity:var(--intro-in,1); transform:translateY(calc((1 - var(--intro-in,1)) * 18px)); will-change:opacity,transform; } /* Legibilidad sobre la ilustración SIN velo de fondo. La escena tiene zonas casi blancas bajo el texto (reflejos del holograma, la mesa iluminada) donde el contraste caía a 1.5:1. En vez de un rectángulo oscuro detrás —que corta la imagen— la sombra va ceñida a las letras: varias capas de radio corto y alfa alto oscurecen sólo el contorno inmediato de cada glifo, de modo que el fondo contra el que se lee la letra ya no es el píxel claro de la foto. Se atenúa con --morph porque al final la escena ya está oscurecida y no hace falta. */ .calc-intro .calc-h, .calc-intro .calc-kick, .calc-intro .calc-p, .calc-intro .iam-logo{ --sh:calc(1 - var(--morph,1) * .55); /* Radios cortos y opacos primero (hacen de contorno, suben el contraste justo en el borde del glifo) y radios largos después (funden el texto con la escena). Medido sobre la zona más clara de la ilustración: sin sombra 1.6:1, con esto 7.4:1. */ text-shadow: 0 0 1px rgba(0,0,0,var(--sh)), 0 0 2px rgba(0,0,0,var(--sh)), 0 1px 4px rgba(0,0,0,calc(.95 * var(--sh))), 0 2px 10px rgba(0,0,0,calc(.8 * var(--sh))), 0 4px 26px rgba(0,0,0,calc(.6 * var(--sh))); } /* Reduced-motion: sin transformación ni halo — la escena queda atenuada de fondo y el panel visible desde el principio. */ @media(prefers-reduced-motion:reduce){ .calc-scene{opacity:.5;} .calc-holo-img{filter:brightness(.45) saturate(.7);transform:none;} .calc-scene::after{opacity:1;} .calc-holo-halo{display:none;} .calc-col{opacity:1!important;transform:none!important;} .calc-intro{opacity:1;transform:none;} } /* ============================================================================ HERO EN ALTURAS CORTAS (≤620px) El hero es una escena ANCLADA y recortada (.stage tiene overflow:hidden), así que lo que no cabe no se alcanza ni haciendo scroll: a 320×568 el CTA quedaba permanentemente fuera de pantalla, y a 360×640 se perdía la línea de apoyo. Medido: hacían falta ~138px. Aquí se recuperan comprimiendo el ritmo vertical. La consulta es por ALTO y no por ancho a propósito — una ventana de escritorio baja tiene exactamente el mismo problema y ninguna media query de ancho la atraparía. ========================================================================== */ /* Nivel suave: el logo es el 41% del alto del hero (309px de 746). Reducirlo aquí evita que la banda 730-820px se quede sin margen antes de que entre el nivel duro. */ @media(max-height:820px){ .estandarte{width:min(340px,52vw);} .hero-copy{margin-top:20px;} .hero-trust{margin-top:14px;} .hero-cta-wrap{margin-top:18px;} } @media(max-height:730px){ .estandarte{width:min(210px,46vw);} /* -48px aprox */ .ticker{font-size:9.5px;letter-spacing:.18em;margin-bottom:8px;} .hero-card{height:104px;} /* -42px */ .hero-card-wrapper{margin-top:6px;} .hero-card-content{padding:12px 18px;} .hero-card-text{font-size:12.5px;line-height:1.45;} .hero-trust{margin-top:10px;} .hero-cta-wrap{margin-top:12px;} .hero-cta{padding:12px 18px;font-size:11.5px;} .hero-cta-support{margin-top:6px;font-size:10px;} /* la pista de scroll estorba cuando el espacio es justo y el CTA ya lo dice todo */ .hint{display:none;} } /* Escalón intermedio (≤560px de alto, cualquier orientación). Sin esto había un hueco: la banda de 730 no compacta lo suficiente y la apaisada no arranca hasta 460, así que entre ~470 y ~530px de alto la tarjeta del hero se salía por abajo hasta 60px. Cubre la ventana de escritorio achicada, donde la consulta por orientación no sirve porque sigue siendo apaisada de proporción pero ancha. */ @media(max-height:560px){ .estandarte{width:min(150px,30vw);} .ticker{font-size:9px;letter-spacing:.16em;margin-bottom:6px;} .hero-copy{margin-top:12px;} .hero-card{height:88px;} .hero-card-content{padding:10px 16px;} .hero-card-text{font-size:12px;line-height:1.4;} .hero-trust{margin-top:6px;} .hero-cta-wrap{margin-top:8px;} .hero-cta{padding:11px 17px;font-size:11px;} .hero-cta-support{margin-top:4px;font-size:9.5px;} } /* Ventana muy baja (≤460px de alto): con 390px de pantalla el bloque anterior aún dejaba el CTA 106px fuera. Aquí el logo pasa a ser una firma pequeña y se sacrifica la letra chica —recuperable girando el teléfono— antes que dejar el botón inalcanzable, que es lo único que no admite concesión. Sin candado de orientación a propósito: lo llevaba, y por eso una ventana de 390×390 (más alta que ancha, o sea "vertical") se quedaba fuera y la tarjeta se salía 37px. Lo que importa aquí es el alto disponible, no la proporción; ningún teléfono vertical mide menos de 460px de alto, así que no hay caso legítimo que esta regla pueda estropear. */ @media(max-height:460px){ .estandarte{width:min(120px,14vw);} .ticker{font-size:8.5px;letter-spacing:.14em;margin-bottom:5px;} .hero-card{height:78px;} .hero-card-wrapper{margin-top:3px;} .hero-card-content{padding:8px 16px;} .hero-card-text{font-size:11.5px;line-height:1.4;} .hero-trust{margin-top:4px;} .hero-trust-line{font-size:9px;} .hero-cta-wrap{margin-top:4px;} .hero-cta{padding:10px 16px;font-size:11px;} .hero-cta-support{display:none;} } /* ============================================================================ ANCLAJE DE LA NAVEGACIÓN INTERNA La barra superior es fija (64px + safe-area), así que sin esto un enlace a #workshop deja el título escondido detrás de ella. scroll-margin-top reserva ese hueco al saltar, sin tocar el layout normal. ========================================================================== */ [data-fcb-id],[id]{scroll-margin-top:calc(72px + var(--safe-top,0px));} @media(prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }