/* ============================================================ VITA · Landing Eixample — V3 "BOLD / DESEO" (CRO + editorial) Hereda TODO el sistema de la v1 (landing.css): tokens de color, Fraunces + Bellota Text, botones, countdown, lead-modal, faq, footer. V3 = CAPA DE DESEO encima del esqueleto de conversión ya validado en v2: · hero cinematográfico full-bleed con el formulario como "tarjeta de acceso" · arco de marca como ARQUITECTURA de la página (no marco de foto) · línea dorada que se dibuja, count-up de datos, sello "edición Fundadora" · motion con gusto (reveals por máscara, parallax sutil, halo del CTA final) Guardarrailes CRO intactos: oferta+form arriba, CTA sticky móvil, countdown, claridad en 3s, mobile-first. Reveals parten SIEMPRE de estado visible (fallback seguro sin JS / reduced-motion). Solo transform + opacity. NO redefine paleta ni fuentes: reutiliza var(--green), var(--sand), etc. ============================================================ */ @import url("landing.css"); /* ---- ajustes globales cold-first (heredados de v2) -------------- */ :root { --urgency-h: 44px; --nav-h: 62px; --sticky-h: 68px; } /* Cabecera fija cohesionada = barra de urgencia (--urgency-h) + nav (--nav-h). El contenido despeja AMBAS para que el hero no quede pisado por la nav. La prueba social ya NO vive aquí: se movió a una banda entre hero y deseo. */ body.cold { padding-top: calc(var(--urgency-h) + var(--nav-h)); } @media (max-width: 860px) { body.cold { padding-bottom: var(--sticky-h); } } /* NOTA: se retiró content-visibility:auto + contain-intrinsic-size de .cv-auto. Reservaba una altura fija (700px) por sección aunque su contenido real fuera menor → huecos gigantes arriba/abajo y saltos/desalineación con el scroll cuando el contenido entraba. Ahora cada sección ocupa su ALTURA REAL. La clase .cv-auto se mantiene en el HTML pero ya no reserva alturas inventadas. */ /* ============================================================ REVEAL PRIMITIVES — estado FINAL visible por defecto (fallback seguro). El JS añade la clase .motion-on al solo si hay JS + no reduced-motion, y ENTONCES pone el estado de partida animado. Sin JS o con reduced-motion, todo queda visible y estático. Regla dura de accesibilidad. ============================================================ */ /* landing.css base deja .r-up/.r-fade con will-change permanente (herencia v1/v2). En v3 lo neutralizamos: GSAP activa will-change SOLO durante la animación y lo limpia al terminar (clearProps). Sin capas de composición colgando → mejor rendimiento (gsap-performance). No tocamos landing.css (es CSS de producción compartido con v1/v2). */ .r-up, .r-fade, .r-left, .r-scale { will-change: auto; opacity: 1; transform: none; } /* Reveals SIN dependencia de scroll ni de que GSAP dispare a tiempo. El contenido está SIEMPRE presente y en su sitio desde el primer render; el único efecto es un fade+lift sutil que corre una sola vez al cargar (transform layout-neutral → no mueve el layout ni crea huecos). Antes, el estado de partida oculto (opacity:0) dependía de html.motion-on + ScrollTrigger, que disparaba a destiempo y dejaba secciones vacías/desalineadas. */ html.motion-on .r-up, html.motion-on .r-fade, html.motion-on .r-left, html.motion-on .r-scale { animation: rReveal .6s var(--eo, ease-out) both; } html.motion-on .r-up { animation-name: rRevealUp; } html.motion-on .r-left { animation-name: rRevealLeft; } html.motion-on .r-scale { animation-name: rRevealScale; } @keyframes rReveal { from { opacity: 0; } to { opacity: 1; } } @keyframes rRevealUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes rRevealLeft { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } @keyframes rRevealScale{ from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } /* estado revelado (compat) */ .is-in { opacity: 1 !important; transform: none !important; } /* SALVAGUARDA DURA: con reduced-motion, ningún elemento queda oculto ni desplazado aunque motion-on llegara a añadirse por una carrera. Cinturón y tirantes: garantiza que el contenido siempre es visible y sin will-change. */ @media (prefers-reduced-motion: reduce) { html.motion-on .r-up, html.motion-on .r-fade, html.motion-on .r-left, html.motion-on .r-scale { opacity: 1 !important; transform: none !important; will-change: auto !important; } html.motion-on .mask-line > span { animation: none !important; transform: none !important; } html.motion-on .hb-arcline path { stroke-dashoffset: 0 !important; } } /* máscara de línea de titular (reveal editorial por líneas). El reveal es CSS-autónomo (keyframe con delay escalonado) para que el titular SIEMPRE se muestre aunque GSAP no cargue. GSAP, si está, toma el control antes de que el keyframe corra (marca .gsap-hero → sin animación CSS). Sin motion-on (reduced-motion / sin JS) el span queda visible y estático. */ .mask-line { display: block; overflow: hidden; } html.motion-on .mask-line > span { display: block; transform: translateY(105%); animation: maskRise .85s var(--eo) forwards; } html.motion-on .hb-leadin .mask-line:nth-of-type(1) > span { animation-delay: .12s; } html.motion-on .hb-leadin .mask-line:nth-of-type(2) > span { animation-delay: .19s; } html.motion-on .hb-h .mask-line:nth-of-type(1) > span { animation-delay: .28s; } html.motion-on .hb-h .mask-line:nth-of-type(2) > span { animation-delay: .36s; } @keyframes maskRise { to { transform: translateY(0); } } /* ============================================================ 0 · BARRA DE URGENCIA (sticky-top) */ .ub { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--urgency-h); display: flex; align-items: center; justify-content: center; gap: .9rem; padding: 0 clamp(.8rem, 4vw, 2rem); background: var(--green-deep); color: var(--cream); font-size: clamp(.68rem, 2.4vw, .8rem); letter-spacing: .04em; border-bottom: 1px solid rgba(244, 232, 190, .12); overflow: hidden; } /* sheen dorado que barre la barra UNA sola vez al cargar (premium, no parpadea) */ .ub::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, transparent 20%, rgba(229, 183, 137, .22) 50%, transparent 80%); transform: translateX(-120%); animation: ubSheen 1.2s var(--eo) .5s 1 both; pointer-events: none; } @keyframes ubSheen { to { transform: translateX(120%); } } .ub > * { position: relative; z-index: 1; } .ub-txt { font-weight: 700; } .ub-txt em { font-style: normal; color: var(--sand); } .ub-count { font-family: var(--serif); font-variant-numeric: tabular-nums; color: var(--sand); letter-spacing: .06em; white-space: nowrap; } /* separador = punto dorado de 3px (detalle, no ruido) */ .ub-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--sand); opacity: .7; flex: 0 0 auto; } .ub-close { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); z-index: 2; background: none; border: 0; color: var(--cream); opacity: .5; font-size: 1.3rem; line-height: 1; padding: .2rem .5rem; } .ub-close:hover { opacity: 1; } .ub-close:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; opacity: 1; } /* dos versiones del texto de la barra: la larga (desktop) y la corta (móvil). Se alternan por media query, sin duplicar lógica en JS. */ .ub-short { display: none; } @media (max-width: 480px) { /* barra en 1 sola línea, 2 elementos: [texto corto] ······ [countdown] + X derecha. Se ocultan los separadores; se reserva hueco derecho para que el countdown no toque la X. (El texto "Cierra el 15 jul" se eliminó del HTML: redundante con el countdown, que ya implica el cierre.) */ .ub { gap: .5rem; justify-content: space-between; padding: 0 3.1rem 0 .9rem; font-size: clamp(.66rem, 3vw, .76rem); } .ub-sep { display: none; } .ub-full { display: none; } .ub-short { display: inline; } .ub-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; } .ub-count { flex: 0 0 auto; } /* hit-area táctil de la X ≥40px de alto real (la barra mide 44px) */ .ub-close { padding: .55rem .6rem; font-size: 1.35rem; } } @media (prefers-reduced-motion: reduce) { .ub::before { animation: none; display: none; } } /* La nav queda PEGADA justo debajo de la barra de urgencia, formando con ella un único bloque de cabecera fijo. Fondo crema sólido desde el primer frame (ya no es transparente sobre el hero → deja de "pisar"/solaparse con el hero). */ .nav { top: var(--urgency-h); height: var(--nav-h); padding-block: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--line); } .nav.scrolled { top: var(--urgency-h); padding-block: 0; box-shadow: 0 8px 30px -22px rgba(14, 53, 40, .5); } /* si el usuario cierra la barra de urgencia, la nav sube al top (lo fuerza el JS poniendo --urgency-h:0), sin recalcular nada más. */ /* ============================================================ 1 · HERO BOLD — full-bleed cinematográfico + tarjeta de acceso ============================================================ */ .hb { position: relative; isolation: isolate; z-index: 1; min-height: clamp(620px, 92svh, 900px); display: flex; align-items: center; /* padding vertical equilibrado (ya no hay arco de banda que despejar por abajo) */ padding: clamp(6rem, 12vh, 9rem) 0 clamp(4rem, 8vw, 6rem); overflow: hidden; color: var(--cream); } /* capa de fondo full-bleed (la foto es el LCP) */ .hb-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .hb-bg picture, .hb-bg img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } /* object-fit:cover en TODA img del slide (directa o dentro de ) para que nunca se pinte a su tamaño intrínseco → sin flash "cuadrado" al cargar/cambiar. */ .hb-bg img { object-fit: cover; object-position: 50% 42%; will-change: transform; } /* overlay de marca: verde profundo envolviendo la escena (look estudio de lujo). Va SOBRE las slides (z-index 2) para que el degradado tiña siempre la foto activa. */ .hb-bg::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(14, 53, 40, .32) 0%, rgba(14, 53, 40, .55) 55%, rgba(14, 53, 40, .82) 100%), radial-gradient(120% 90% at 78% 12%, rgba(229, 183, 137, .16), transparent 55%); } /* DESKTOP (≥861px) — overlay más oscuro para que el H1/subtítulo crema pasen AA/AAA incluso sobre las zonas claras de la foto (paredes, luz de estudio). Sobre la base verde-deep plana (~30%, mata highlights) montamos el gradiente de marca reforzado. El radial dorado se conserva como acento superior-derecho, sin restar contraste al copy (que vive en la mitad izquierda-inferior). NO afecta al móvil (≤860px, intacto). */ @media (min-width: 861px) { .hb-bg::after { background: linear-gradient(180deg, rgba(14, 53, 40, .55) 0%, rgba(14, 53, 40, .68) 55%, rgba(14, 53, 40, .90) 100%), linear-gradient(0deg, rgba(14, 53, 40, .30), rgba(14, 53, 40, .30)), radial-gradient(120% 90% at 78% 12%, rgba(229, 183, 137, .14), transparent 55%); } } /* ---- CARRUSEL DEL HERO (cross-fade dentro de la banda full-bleed) -------- Patrón heredado del carrusel sólido de v2 (.hc-*), adaptado al hero bold. Las 4 slides se apilan en absoluto y hacen cross-fade con opacity; el fondo full-bleed (.hb-bg) no cambia de tamaño → sin saltos de layout (CLS ~0). Fallback sin JS / reduced-motion: solo la 1ª slide visible, estática. */ .hb-carousel { touch-action: pan-y; } .hb-track { position: absolute; inset: 0; z-index: 0; } .hb-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s var(--eo); } .hb-slide.is-active { opacity: 1; } /* fallback: si el carrusel no llega a inicializarse (sin JS), la 1ª slide queda visible */ .hb-carousel:not(.is-ready) .hb-slide:first-child { opacity: 1; } /* las imágenes ya heredan position:absolute;inset:0;object-fit:cover de .hb-bg img */ /* puntos / indicadores discretos, anclados abajo-centro de la banda */ .hb-dots { position: absolute; z-index: 3; left: 50%; bottom: clamp(.9rem, 2.2vw, 1.4rem); transform: translateX(-50%); display: flex; gap: .45rem; padding: .35rem .6rem; border-radius: 999px; background: rgba(14, 53, 40, .3); backdrop-filter: blur(4px); } /* sin slides (JS no inicializó) no mostramos el contenedor de dots vacío */ .hb-carousel:not(.is-ready) .hb-dots { display: none; } .hb-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(244, 232, 190, .5); cursor: pointer; transition: background .25s, transform .25s; } .hb-dot:hover { background: rgba(244, 232, 190, .85); } .hb-dot.is-active { background: var(--sand); transform: scale(1.3); } .hb-dot:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .hb-slide { transition: none; } } /* cuarto de arco dorado que se dibuja en la esquina sup. derecha (firma editorial) */ .hb-arcline { position: absolute; top: 0; right: 0; width: clamp(200px, 34vw, 460px); height: clamp(200px, 34vw, 460px); z-index: -1; pointer-events: none; opacity: .85; } .hb-arcline path { fill: none; stroke: var(--sand); stroke-width: 1; vector-effect: non-scaling-stroke; } html.motion-on .hb-arcline path { stroke-dasharray: 620; stroke-dashoffset: 620; } .hb-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; width: 100%; } /* --- columna de copy sobre la foto --- */ .hb-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--sans); font-size: clamp(.6rem, 2.2vw, .68rem); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--sand); margin-bottom: 1.3rem; } .hb-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 0 rgba(229, 183, 137, .5); animation: pulse 2.6s infinite; } /* lead-in emocional (gancho subordinado, ENCIMA del H1). No es el titular: tamaño h3/eyebrow-grande, peso ligero, crema al 90%. Introduce y cede el protagonismo al H1 de la oferta. */ .hb-leadin { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.15rem, 2.5vw, 1.6rem); line-height: 1.18; letter-spacing: -.01em; color: rgba(244, 232, 190, .9); text-shadow: 0 2px 22px rgba(14, 53, 40, .4); margin: 0 0 .55rem; } .hb-leadin .hb-leadin-line { display: block; } .hb-h { font-family: var(--serif); font-weight: 400; font-size: clamp(2.7rem, 7.6vw, 5.1rem); line-height: 1.02; letter-spacing: -.028em; color: var(--cream); text-shadow: 0 2px 30px rgba(14, 53, 40, .35); } .hb-h .hb-line2 { display: block; } .hb-h .hb-line2 + .hb-line2 { margin-top: .12em; } .hb-h em { font-style: italic; color: var(--sand); } .hb-h b { font-weight: 600; color: var(--sand); } .hb-sub { font-size: clamp(1rem, 2.6vw, 1.14rem); line-height: 1.55; color: rgba(244, 232, 190, .92); max-width: 46ch; margin: 1.3rem 0 1.5rem; } .hb-sub strong { color: var(--cream); font-weight: 700; } /* chips sobre foto (overlay garantiza contraste) */ .hb-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .hb-chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(20, 47, 36, .5); backdrop-filter: blur(8px); border: 1px solid rgba(229, 183, 137, .38); border-radius: 999px; padding: .42rem .9rem; font-size: clamp(.68rem, 2.2vw, .76rem); font-weight: 700; color: var(--cream); } .hb-chip b { font-family: var(--serif); font-weight: 400; color: var(--sand); } .hb-chip svg { width: 14px; height: 14px; color: var(--sand); } /* --- FORMULARIO como "tarjeta de acceso" premium --- */ .hb-card { position: relative; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border: 1px solid rgba(229, 183, 137, .4); border-radius: 22px; padding: clamp(1.4rem, 3vw, 2rem); box-shadow: 0 40px 90px -50px rgba(14, 53, 40, .7); } /* DESKTOP (≥861px) — la card se alinea arriba del grid (el hero usa align-items:center, que la centraba y la dejaba baja) y respira un poco bajo el header. Así el formulario sube y queda a la vista sin scroll. NO afecta al móvil (≤860px, intacto). */ @media (min-width: 861px) { .hb-card { align-self: start; margin-top: clamp(1rem, 2.5vw, 2rem); } } .hb-card-eye { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-2); margin-bottom: 1rem; } .hb-card-eye .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sand-2); animation: pulse 2.6s infinite; } .hb-form { display: flex; flex-direction: column; gap: .6rem; } .hb-form .lead-field { display: flex; flex-direction: column; gap: 4px; position: relative; } .hb-form input[type="email"], .hb-form input[type="text"], .hb-form input[type="tel"] { width: 100%; min-height: 52px; border: 1.5px solid #d8cfba; border-radius: 12px; padding: 0 15px; font-size: 1rem; background: var(--paper); color: var(--green); font-family: inherit; transition: border-color .18s, box-shadow .18s; } .hb-form input::placeholder { color: #a39a86; } .hb-form input:focus { outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(45, 74, 62, .15); } .hb-form input[aria-invalid="true"] { border-color: #c0563f; box-shadow: 0 0 0 3px rgba(192, 86, 63, .12); } /* flash verde de refuerzo positivo al validar OK (micro-dopamina) */ .hb-form input.valid-flash { border-color: var(--green-glow); box-shadow: 0 0 0 3px rgba(62, 158, 116, .22); } .hb-err { display: none; font-size: .76rem; color: #c0563f; margin-top: 2px; } .hb-err.show { display: block; } /* consentimiento compacto */ .hb-consent { display: flex; gap: 9px; align-items: flex-start; font-size: .74rem; line-height: 1.4; color: var(--ink-soft); cursor: pointer; } .hb-consent input { margin-top: 2px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--green-mid); } .hb-consent a { color: var(--green-mid); text-decoration: underline; } .hb-consent.shake { animation: leadShake .45s; } /* indicador de progreso implícito (3 segmentos dorados sobre el botón) */ .hb-progress { display: flex; gap: 5px; margin: 2px 0 0; } .hb-progress span { height: 2px; flex: 1; border-radius: 2px; background: rgba(181, 127, 69, .18); overflow: hidden; } .hb-progress span::after { content: ""; display: block; height: 100%; width: 100%; background: var(--sand-2); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--eo); } .hb-progress span.done::after { transform: scaleX(1); } /* botón primario dorado ancho completo */ .hb-submit { position: relative; min-height: 56px; border: 0; border-radius: 999px; background: var(--sand); color: var(--green-deep); font-family: var(--sans); font-size: .95rem; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: background .18s, transform .12s, box-shadow .3s; box-shadow: 0 18px 40px -20px rgba(181, 127, 69, .8); overflow: hidden; } .hb-submit:hover { background: #d8ab73; transform: translateY(-2px); } .hb-submit:active { transform: translateY(0); } .hb-submit.loading { opacity: .8; pointer-events: none; } .hb-submit.loading span { visibility: hidden; } .hb-submit.loading::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2.5px solid rgba(31, 58, 46, .35); border-top-color: var(--green-deep); border-radius: 50%; animation: leadSpin .7s linear infinite; left: 50%; top: 50%; margin: -10px 0 0 -10px; } /* estado "éxito" antes del redirect (cierre emocional del gesto) */ .hb-submit.done { background: var(--green-mid); color: var(--cream); } .hb-submit.done span { visibility: visible; } .hb-micro { font-size: .76rem; color: var(--ink-soft); text-align: center; margin: 0; } .hb-formerr { font-size: .8rem; color: #c0563f; text-align: center; margin: 0; } @media (max-width: 860px) { /* ============================================================ HERO MÓVIL — FULL-BLEED (rediseño, pedido de Jorge). La foto (carrusel) ocupa TODO el hero a pantalla completa (~100svh). Encima, un overlay verde de marca (#124734) lo bastante oscuro para que el texto BLANCO/CREMA se lea SIEMPRE (más oscuro en la zona inferior donde caen los textos y la card del formulario). Se ELIMINA el antiguo fade foto→crema y la banda reducida. Contraste medido AA/AAA (ver verificación). ============================================================ */ .hb { /* foto full-bleed = el hero es la propia foto; el contenido se apila abajo. padding-top reducido (pedido de Jorge: había demasiado aire arriba, el eyebrow/H1 quedaban bajos). Deja espacio para no pegarse al header. */ padding: clamp(3.2rem, 9vh, 5rem) 0 clamp(2rem, 6vw, 3.2rem); align-items: flex-end; /* copy + card gravitan hacia la zona más oscura */ min-height: 100svh; background: var(--green-deep); /* base bajo la foto mientras carga (sin flash crema) */ } .hb-grid { grid-template-columns: 1fr; gap: 1.1rem; } /* foto a pantalla completa (cubre TODO el hero, no una banda) */ .hb-bg { inset: 0; height: auto; } .hb-bg img { object-position: 50% 40%; } /* OVERLAY VERDE DE MARCA — oscurece la foto para el texto blanco. Gradiente vertical: ~56% arriba → ~92% abajo (donde vive el copy y la card), sobre una base plana de verde-deep al 48% que garantiza contraste incluso en las zonas claras de la foto. Subido un escalón (pedido de Jorge: más deseo y foco en el texto, que la foto no distraiga). El texto crema va AAA de sobra, así que oscurecer más es seguro. Medido: H1/sub/chips pasan AA/AAA (ver report). */ .hb-bg::after { background: linear-gradient(180deg, rgba(14, 53, 40, .70) 0%, rgba(14, 53, 40, .66) 30%, rgba(14, 53, 40, .86) 70%, rgba(14, 53, 40, .96) 100%), linear-gradient(0deg, rgba(14, 53, 40, .48), rgba(14, 53, 40, .48)); } .hb-copy { padding-top: 0; } /* --- lead-in emocional en móvil: pequeño y subordinado, crema legible sobre la foto oscurecida. Claramente por debajo del H1 de la oferta. --- */ .hb-copy .hb-leadin { font-size: clamp(.95rem, 4vw, 1.15rem); line-height: 1.22; color: rgba(244, 232, 190, .92); text-shadow: 0 2px 16px rgba(14, 53, 40, .55); margin: 0 0 .4rem; } /* --- H1 (oferta): titular dominante, crema sobre foto oscura. Escala pensada para que quepa a 360-390px sin desbordar. --- */ .hb-copy .hb-h { font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.06; letter-spacing: -.022em; color: var(--cream); text-shadow: 0 2px 22px rgba(14, 53, 40, .55); } .hb-h b { color: var(--sand); font-weight: 600; } .hb-h em { color: var(--sand); } .hb-h .hb-line2 + .hb-line2 { margin-top: .1em; } /* eyebrow en CREMA sobre foto (el dorado no llega a AA en texto tan pequeño; la crema pasa AA/AAA holgado). El dot sigue dorado para el acento de marca. */ .hb-eyebrow { color: var(--cream); margin-bottom: 1rem; text-shadow: 0 1px 12px rgba(14, 53, 40, .6); } .hb-eyebrow .dot { background: var(--sand); } /* --- subtítulo en crema legible sobre la foto oscurecida --- */ .hb-sub { color: var(--cream); font-size: clamp(.92rem, 3.6vw, 1rem); line-height: 1.5; max-width: 42ch; margin: .9rem 0 1rem; text-shadow: 0 2px 18px rgba(14, 53, 40, .5); } .hb-sub strong { color: #fff; font-weight: 700; } /* --- chips: glass verde translúcido sobre foto (vuelve el look del desktop) --- */ .hb-chips { margin: 0 0 .2rem; gap: .4rem; } .hb-chip { background: rgba(14, 53, 40, .55); border: 1px solid rgba(229, 183, 137, .45); color: var(--cream); backdrop-filter: blur(8px); padding: .4rem .85rem; font-size: clamp(.7rem, 2.6vw, .76rem); } .hb-chip b { color: var(--sand); } .hb-chip svg { color: var(--sand); } /* CARD del formulario SOBRE la foto (zona inferior oscura): card sólida clara para máxima legibilidad de inputs/labels, con borde dorado y sombra que la despega del fondo. Full-bleed → la card manda su propia legibilidad. */ .hb-card { background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); border: 1px solid rgba(229, 183, 137, .5); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); padding: clamp(1.1rem, 4vw, 1.4rem); } .hb-form { gap: .55rem; } .hb-submit { min-height: 54px; } /* --- dots del carrusel OCULTOS en móvil (pedido de Jorge): sobre la foto full-bleed manchan el texto y no aportan. El carrusel sigue rotando solo + swipe, sin dots. En desktop los dots se conservan (regla base fuera de este @media). --- */ .hb-dots { display: none; } } @media (max-width: 520px) { .hb-form input[type="email"], .hb-form input[type="text"], .hb-form input[type="tel"] { min-height: 50px; } } /* móvil pequeño: 3er chip ("Plazas limitadas") es redundante con la barra de urgencia y la card → se oculta para ahorrar altura y que el form suba antes. */ @media (max-width: 430px) { .hb-chip:nth-child(3) { display: none; } } /* con reduced-motion la foto no respira (parallax off vía JS) y sin pulse */ @media (prefers-reduced-motion: reduce) { .hb-eyebrow .dot, .hb-card-eye .dot { animation: none; } } /* ============================================================ 1b · BANDA DE PRUEBA SOCIAL — banda GRANDE con presencia, entre el hero y la sección de deseo. Verde profundo de marca + números en Fraunces dorados (count-up al entrar en viewport). Reemplaza a la antigua tira fina de arriba. ============================================================ */ .proof-band { position: relative; background: radial-gradient(120% 120% at 80% 0%, rgba(229, 183, 137, .12), transparent 55%), var(--green-deep); color: var(--cream); padding: clamp(2.6rem, 6vw, 4.4rem) 0; overflow: hidden; } /* filete dorado superior que separa la banda del hero con clase editorial */ .proof-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(229, 183, 137, .55), transparent); } .proof-band-in { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: clamp(1rem, 3vw, 2.6rem); } .proof-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; } .proof-num { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -.02em; color: var(--sand); font-variant-numeric: tabular-nums; } .proof-lab { font-family: var(--sans); font-size: clamp(.7rem, 1.6vw, .82rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 232, 190, .78); max-width: 16ch; } /* separador vertical dorado entre estadísticas */ .proof-line { width: 1px; height: clamp(48px, 8vw, 74px); background: linear-gradient(180deg, transparent, rgba(229, 183, 137, .45), transparent); justify-self: center; } /* Tablet: 2×2, el separador vertical se oculta y separan filas/columnas. */ @media (max-width: 860px) { .proof-band-in { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 3rem) clamp(1.5rem, 6vw, 3rem); } .proof-line { display: none; } } /* Móvil pequeño: 2 columnas compactas, sin que los números se aplasten. */ @media (max-width: 420px) { .proof-band { padding: 2.4rem 0; } .proof-band-in { gap: 2rem 1.2rem; } .proof-num { font-size: clamp(2.2rem, 12vw, 3rem); } } /* ============================================================ 2b · BLOQUE DE DESEO / TRANSFORMACIÓN (nuevo en v3) ============================================================ */ .desire { padding: clamp(4.5rem, 10vw, 8rem) 0; background: var(--bg); } .desire-head { max-width: 780px; margin: 0 auto clamp(2.6rem, 5vw, 4rem); text-align: center; } .desire-head .eyebrow { justify-content: center; margin-bottom: 1.2rem; } .desire-head h2 { font-size: clamp(2rem, 5.4vw, 3.6rem); color: var(--green); line-height: 1.06; letter-spacing: -.02em; } .desire-head h2 em { font-style: italic; color: var(--sand-2); } .desire-intro { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 2.4vw, 1.5rem); line-height: 1.4; color: var(--green-mid); max-width: 40ch; margin: 1.4rem auto 0; } .desire-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.6vw, 1.8rem); max-width: 960px; margin: 0 auto; } .desire-card { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.6rem, 3vw, 2.2rem); overflow: hidden; } .desire-card::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--sand), transparent); opacity: .8; } .desire-card .di { width: 46px; height: 46px; border: 1px solid var(--sand-2); border-radius: 50%; display: grid; place-items: center; color: var(--sand-2); margin-bottom: 1.1rem; } .desire-card .di svg { width: 22px; height: 22px; } .desire-card h3 { font-family: var(--serif); font-weight: 300; font-size: 1.35rem; color: var(--green); margin-bottom: .5rem; line-height: 1.15; } .desire-card p { font-size: .96rem; line-height: 1.6; color: var(--ink-soft); } @media (max-width: 700px) { .desire-grid { grid-template-columns: 1fr; gap: 1rem; } } /* ============================================================ 4 · QUÉ ES (3 hechos escaneables) */ .wi { padding: clamp(4rem, 9vw, 7rem) 0; } .wi-head { max-width: 720px; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); text-align: center; } .wi-head h2 { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--green); line-height: 1.05; margin-top: 1rem; } .wi-head h2 em { font-style: italic; color: var(--sand-2); } .wi-head p { color: var(--ink-soft); max-width: 52ch; margin: 1.1rem auto 0; font-size: 1.02rem; line-height: 1.6; } .wi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); } .wi-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.6rem, 3vw, 2.2rem); text-align: center; } .wi-ico { width: 54px; height: 54px; border: 1px solid var(--sand-2); border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.2rem; color: var(--sand-2); } .wi-ico svg { width: 24px; height: 24px; } .wi-card h3 { font-family: var(--serif); font-weight: 300; font-size: 1.35rem; color: var(--green); margin-bottom: .6rem; line-height: 1.15; } .wi-card p { font-size: .95rem; line-height: 1.6; color: var(--ink-soft); } @media (max-width: 720px) { .wi-grid { grid-template-columns: 1fr; gap: 1rem; } .wi-card { display: flex; align-items: center; text-align: left; gap: 1.1rem; padding: 1.2rem 1.4rem; } .wi-ico { margin: 0; flex: 0 0 auto; width: 48px; height: 48px; } .wi-card h3 { margin-bottom: .2rem; font-size: 1.2rem; } } /* ============================================================ 6 · MICRO-STORYTELLING */ .gar { padding: clamp(4rem, 9vw, 7rem) 0; text-align: center; } .gar h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 5vw, 3.4rem); color: var(--green); line-height: 1.1; max-width: 24ch; margin: 0 auto 1.4rem; } .gar h2 em { font-style: italic; color: var(--sand-2); } .gar p { max-width: 54ch; margin: 0 auto; font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); } /* ============================================================ 7 · UBICACIÓN */ .ubi2 { padding: clamp(4rem, 9vw, 7rem) 0; } .ubi2-head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); } .ubi2-head .eyebrow { justify-content: center; margin-bottom: 1rem; } .ubi2-head h2 { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--green); line-height: 1.05; } .ubi2-head h2 em { font-style: italic; color: var(--sand-2); } .ubi2-card { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); max-width: 1000px; margin: 0 auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 24px; padding: clamp(1.6rem, 4vw, 2.6rem); align-items: center; } .ubi2-row { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); } .ubi2-row:last-child { border-bottom: 0; } .ubi2-row .k { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: #9B6029; font-weight: 700; } .ubi2-row .v { font-family: var(--serif); font-size: 1.15rem; color: var(--green); line-height: 1.3; } .ubi2-mapwrap .mapa { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--line); } .ubi2-mapwrap iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(1.05); } @media (max-width: 780px) { .ubi2-card { grid-template-columns: 1fr; } } /* ============================================================ 8 · FAQ */ .faq { padding: clamp(4rem, 9vw, 7rem) 0; } .faq-head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); } .faq-head .eyebrow { justify-content: center; } .faq-head h2 { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--green); } .faq-head h2 em { font-style: italic; color: var(--sand-2); } .faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: .8rem; } .faq-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .3s; } .faq-item.open { border-color: color-mix(in srgb, var(--sand-2) 45%, transparent); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: 0; padding: 1.2rem 1.4rem; text-align: left; font-family: var(--serif); font-size: 1.15rem; color: var(--green); line-height: 1.25; } .faq-ico { width: 20px; height: 20px; flex: 0 0 auto; color: var(--sand-2); transition: transform .3s var(--eo); } .faq-item.open .faq-ico { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--eo); } .faq-a p { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.65; } /* ============================================================ 9 · CTA FINAL — clímax cinematográfico */ .final { position: relative; min-height: 82svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; color: var(--cream); } .final-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .final-bg img { width: 100%; height: 100%; object-fit: cover; } /* Ken Burns muy lento (solo desktop, solo sin reduced-motion — lo activa el JS) */ html.motion-on .final-bg.kenburns img { animation: kenBurns 20s var(--eo) infinite alternate; } @keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.06); } } .final-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 53, 40, .72), rgba(14, 53, 40, .9)); } .final-in { position: relative; z-index: 2; max-width: 760px; padding: 0 var(--gutter); } .final-in .eyebrow { justify-content: center; color: var(--sand); margin-bottom: 1.6rem; } .final h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.02; margin-bottom: 1.4rem; } .final h2 em { font-style: italic; color: var(--sand); } .final p { font-size: 1.15rem; line-height: 1.6; opacity: .92; max-width: 46ch; margin: 0 auto 2.4rem; } /* CTA final: sin halo pulsante en loop (evita el "acoso" tipo oferta de gimnasio). La única animación de urgencia recurrente es el micro-pop del sticky al aparecer. */ .final .btn-sand { position: relative; } /* ============================================================ CTA STICKY-BOTTOM (móvil) */ .sticky { position: fixed; inset: auto 0 0 0; z-index: 55; display: none; align-items: center; justify-content: space-between; gap: 1rem; height: var(--sticky-h); padding: 0 1rem; background: var(--green-deep); color: var(--cream); box-shadow: 0 -14px 40px -22px rgba(14, 53, 40, .8); transform: translateY(110%); transition: transform .35s var(--eo); } .sticky.show { transform: translateY(0); } /* un solo micro-pulse de escala del botón al aparecer (capta el ojo sin acosar) */ .sticky.show .sticky-btn { animation: stickyPop .5s var(--eo) 1; } @keyframes stickyPop { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } } .sticky-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; } .sticky-txt .k { font-size: .82rem; font-weight: 700; color: var(--sand); } .sticky-txt .s { font-size: .68rem; color: rgba(244, 232, 190, .78); font-variant-numeric: tabular-nums; } .sticky-btn { flex: 0 0 auto; background: var(--sand); color: var(--green-deep); border: 0; border-radius: 999px; padding: .8rem 1.5rem; font-family: var(--sans); font-weight: 700; font-size: .82rem; letter-spacing: .02em; } .sticky-btn:active { transform: translateY(1px); } @media (max-width: 860px) { .sticky { display: flex; } } @media (prefers-reduced-motion: reduce) { .sticky.show .sticky-btn { animation: none; } } /* ============================================================ MODAL DE REFUERZO (reutiliza .lead-modal de v1) */ .lead-guarantee { display: flex; align-items: flex-start; gap: .6rem; font-size: .8rem; line-height: 1.4; color: #6a6149; background: #ece4d3; border-radius: 10px; padding: .7rem .8rem; } .lead-guarantee svg { width: 18px; height: 18px; flex: 0 0 auto; color: #2d4a3e; } .lead-count { text-align: center; font-size: .78rem; color: #7a6f57; } .lead-count b { font-family: var(--serif); color: #1f3a2e; font-variant-numeric: tabular-nums; } /* escudo del trust del modal alineado con el texto */ .lead-trust svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: .3rem; color: var(--green-mid); } /* ============================================================ RITMO / ESPACIADO MÓVIL — scroll denso, sin huecos muertos (solo ≤860/430px). Recorta los clamp inferiores de las secciones densas un escalón; el desktop (con sus clamp mayores) queda intacto porque estas reglas cuelgan del media. ============================================================ */ @media (max-width: 860px) { /* CTA final: 82svh es un bloque de foto sobredimensionado antes del footer en móvil → se reduce para que no quede un vacío gigante. */ .final { min-height: 62svh; } } @media (max-width: 430px) { .desire, .wi, .gar, .ubi2, .faq { padding: clamp(3rem, 9vw, 4.5rem) 0; } .desire-grid, .wi-grid { gap: .9rem; } } /* ============================================================ ESTADO PREVENTA CERRADA */ body.presale-closed .ub-count, body.presale-closed .sticky-txt .s { opacity: .6; }