/* =========================================================================== GAIA Studio — landing.css Portada: imagen + acceso. Escritorio: dos columnas (imagen fija a la izquierda, acceso a la derecha). Celular: una sola columna con la imagen como cabecera corta arriba y el formulario debajo — la imagen NO se lleva media pantalla, porque a quien entra a las 5:50 a. m. a reservar le estorba tener que hacer scroll. =========================================================================== */ .landing { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; /* El fondo del panel se pinta aquí abajo para que el arco recortado sobre la imagen deje ver este color y no el del . */ background: var(--bg); } /* ── Imagen ───────────────────────────────────────────────────────────────── */ .landing-media { position: relative; overflow: hidden; min-height: 34vh; background: var(--brand); display: flex; align-items: flex-end; } .landing-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } /* Velo: sin él, el texto blanco se pierde sobre una foto clara del estudio. */ .landing-media-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,18,.10) 0%, rgba(20,22,18,.62) 100%); } .landing-media.has-photo .landing-media-veil { background: linear-gradient(180deg, rgba(20,22,18,.22) 0%, rgba(20,22,18,.72) 100%); } .landing-media-copy { position: relative; padding: 1.5rem 1.25rem; color: #fff; max-width: 34rem; } .landing-eyebrow { color: rgba(255,255,255,.82); margin: 0 0 .35rem; display: inline-flex; align-items: center; gap: .5rem; } .landing-eyebrow-ic { opacity: .85; } .landing-claim { font-family: var(--font-display, var(--font)); font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 400; line-height: 1.25; margin: 0; text-wrap: balance; } /* ── Panel de acceso ──────────────────────────────────────────────────────── */ .landing-panel { position: relative; /* ancla del ornamento */ display: flex; flex-direction: column; background: var(--bg); padding: 1rem 1.25rem 1.5rem; overflow: hidden; /* la rama asoma, no empuja ni scrollea */ } /* Rama botánica de adorno, abajo a la derecha. Decorativa pura: sin puntero, detrás de todo y muy tenue, para que jamás compita con el formulario ni tape un campo. En celular no aparece: ahí cada píxel es del formulario. La capa que recorta se pega a los cuatro lados SIN medidas negativas, porque un absoluto con `bottom` negativo cuenta como desbordamiento y le sacaba barra de scroll al panel en pantallas bajas. La rama sí sale de la caja, pero la recorta esta capa, que no crece. */ .landing-ornament-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; display: none; } .landing-ornament { position: absolute; right: -3.5rem; bottom: -2.5rem; width: 16rem; height: auto; color: var(--accent); opacity: .16; } /* Todo el contenido del panel va por encima de la rama. */ .landing-panel > *:not(.landing-ornament-clip) { position: relative; z-index: 1; } /* La ramita que remata el saludo, como el sello de la marca sobre el título. */ .landing-form-mark { display: block; color: var(--accent); margin-bottom: .875rem; line-height: 0; } .landing-panel-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; } .landing-lang { font-weight: 700; letter-spacing: .08em; color: var(--muted); } .landing-form { width: 100%; max-width: 26rem; margin-inline: auto; flex: 1 0 auto; } .landing-title { margin-bottom: .25rem; } .landing-sub { margin-bottom: 1.5rem; } /* ── Botones de acción ────────────────────────────────────────────────────── */ /* Versalitas espaciadas: es el gesto que vuelve "elegante" a un botón sólido, y el mismo que ya usan las etiquetas .t-eyebrow del sistema. */ .landing-cta { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; text-transform: uppercase; letter-spacing: .1em; font-size: .8125rem; font-weight: 600; } /* La flecha se separa un poco al pasar el puntero: insinúa "hacia adentro". Se anima solo `transform`, que no obliga al navegador a recalcular la caja. */ .landing-cta-ic { transition: transform .2s ease; } .landing-cta:hover .landing-cta-ic { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .landing-cta-ic { transition: none; } .landing-cta:hover .landing-cta-ic { transform: none; } } .landing-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; width: 100%; max-width: 26rem; margin-inline: auto; } /* ── Escritorio: dos columnas ─────────────────────────────────────────────── */ @media (min-width: 900px) { .landing { grid-template-rows: none; grid-template-columns: 1.1fr 1fr; height: 100vh; height: 100dvh; } /* El arco. La imagen se redondea por su esquina superior derecha y deja ver el color del panel: es el mismo gesto de las ventanas de un estudio de pilates, y ablanda el corte recto entre foto y formulario sin costar ni un elemento extra. Con `clamp` el radio crece con la pantalla pero nunca se come la cara de la imagen en una laptop chica. */ .landing-media { min-height: 0; border-top-right-radius: clamp(3rem, 9vw, 9rem); } .landing-media-copy { padding: 3rem 3rem 3.5rem; } .landing-ornament-clip { display: block; } .landing-panel { justify-content: center; padding: 2rem 3rem; /* Si la pantalla es baja (laptop de 13"), el panel scrollea solo, sin que el formulario se corte ni empuje la imagen. */ overflow-y: auto; } .landing-panel-top { margin-bottom: 2.5rem; } .landing-form { flex: 0 0 auto; } .landing-panel-foot { margin-top: 2.5rem; } } @media (min-width: 1400px) { .landing-form, .landing-panel-foot { max-width: 28rem; } } /* En pantallas muy bajas y horizontales (celular acostado) la imagen se encoge para que el formulario siga siendo lo primero. */ @media (max-height: 560px) and (max-width: 899px) { .landing-media { min-height: 22vh; } .landing-claim { font-size: 1.15rem; } }