/* ==========================================================================
LustCare — Landing de prelaunch
Sistema de diseño: dark premium, burdeos + dorado, acentos del logo
========================================================================== */
/* ---- Fuentes: fallback seguro a system stack, preparado para añadir
Google Fonts (Fraunces + Inter + JetBrains Mono) más adelante.
Para activarlas, añade en :
---- */
:root {
/* Color */
--bg: #0a0710;
--bg-soft: #120a16;
--surface: #170f1c;
--surface-border: rgba(243, 237, 230, 0.08);
--ink: #f3ede6;
--ink-dim: #c9bfc4;
--ink-faint: #8d818a;
--burgundy: #7a1530;
--burgundy-bright: #a8203f;
--gold: #c9a24b;
--gold-soft: #e3c785;
--cyan: #1fa9a4;
--lavender: #8b6fd9;
--magenta: #b23a73;
--blue: #3a6fd9;
--purple: #6f3ab2;
/* Type */
--font-display: 'Fraunces', Georgia, 'Iowan Old Style', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
/* Layout */
--max-width: 1180px;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 26px;
--space-section: clamp(64px, 9vw, 128px);
--shadow-card: 0 20px 60px -25px rgba(0, 0, 0, 0.6);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ---- Reset ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.no-scroll, html.no-scroll body { overflow: hidden; height: 100%; }
body, h1, h2, h3, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body {
background:
radial-gradient(ellipse 1200px 700px at 18% -10%, rgba(122, 21, 48, 0.22), transparent 60%),
radial-gradient(ellipse 900px 600px at 100% 10%, rgba(31, 169, 164, 0.10), transparent 55%),
var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
:focus-visible {
outline: 2px solid var(--gold-soft);
outline-offset: 3px;
border-radius: 4px;
}
/* ---- Typography ---- */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
h1 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
line-height: 1.08;
font-weight: 600;
}
.section-title {
font-size: clamp(1.8rem, 3.4vw, 2.5rem);
line-height: 1.15;
margin-bottom: 16px;
}
.eyebrow {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: 14px;
}
.section-lead {
color: var(--ink-dim);
font-size: 1.05rem;
max-width: 56ch;
margin-bottom: 8px;
}
.center { text-align: center; margin-left: auto; margin-right: auto; }
/* ---- Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, var(--gold-soft), var(--gold) 60%, #a87f2e);
color: #1a1208;
box-shadow: 0 10px 30px -10px rgba(201, 162, 75, 0.5);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(201, 162, 75, 0.65); }
.btn-ghost {
background: rgba(243, 237, 230, 0.04);
border: 1px solid rgba(243, 237, 230, 0.16);
color: var(--ink);
}
.btn-ghost:hover { background: rgba(243, 237, 230, 0.08); transform: translateY(-2px); }
.btn-small { padding: 10px 20px; font-size: 0.85rem; }
.btn-full { width: 100%; }
/* ---- Header ---- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(10, 7, 16, 0.78);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--surface-border);
}
.header-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
}
.brand-logo {
width: 38px;
height: 38px;
object-fit: contain;
}
.brand-word {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.brand-lust { color: var(--ink); }
.brand-care { color: var(--burgundy-bright); }
/* Override de contraste para footer: el burdeos del header funciona sobre fondo
muy oscuro, pero en el footer (fondo distinto y texto más pequeño) Lighthouse
marca contraste insuficiente. Subimos a un rosa-rojo más claro solo aquí,
manteniendo identidad de marca. */
.site-footer .brand-care { color: #f04f70; }
.main-nav {
display: flex;
gap: 24px;
}
.main-nav a {
font-size: 0.9rem;
color: var(--ink-dim);
transition: color 0.2s ease;
position: relative;
white-space: nowrap;
}
.main-nav a:hover { color: var(--ink); }
.header-actions {
display: flex;
align-items: center;
gap: 16px;
}
.nav-toggle-group {
display: none;
align-items: center;
gap: 8px;
}
.nav-toggle-label {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.04em;
color: var(--ink-faint);
white-space: nowrap;
max-width: 96px;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-toggle {
display: flex;
flex-direction: column;
gap: 5px;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
}
.nav-toggle span {
width: 20px;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
display: flex;
flex-direction: column;
gap: 2px;
position: absolute;
top: calc(100% + 10px);
right: 24px;
width: 320px;
max-width: calc(100vw - 48px);
max-height: calc(100vh - 76px - 24px);
overflow-y: auto;
padding: 10px;
border-radius: 22px;
border: 1px solid rgba(201, 162, 75, 0.22);
background: rgba(15, 10, 20, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
visibility: hidden;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.mobile-nav a {
padding: 13px 14px;
font-size: 0.95rem;
border-radius: 14px;
color: var(--ink-dim);
border-bottom: none;
transition: background 0.15s ease, color 0.15s ease;
}
.mobile-nav a:not(.btn):hover { background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.mobile-nav a:not(:last-child):not(.btn) { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mobile-nav .btn { margin-top: 8px; width: 100%; }
.mobile-nav[data-open="true"] {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
.mobile-nav { transition: opacity 0.01s linear, visibility 0.01s linear; }
.mobile-nav[data-open="true"] { transition: opacity 0.01s linear, visibility 0.01s linear; }
}
@media (max-width: 1020px) {
.main-nav { display: none; }
.header-actions .btn-small { display: none; }
.nav-toggle-group { display: flex; }
}
/* Móvil estrecho: el panel flotante ocupa casi todo el ancho disponible
pero sigue sin tocar los bordes ni empujar el contenido — sigue
siendo position:absolute, solo cambian sus dimensiones. */
@media (max-width: 480px) {
.mobile-nav {
width: calc(100vw - 32px);
right: 16px;
}
}
/* ---- Hero ---- */
.hero {
position: relative;
padding: clamp(56px, 9vw, 110px) 0 80px;
overflow: hidden;
}
.hero-glow {
position: absolute;
inset: -20% -10% auto -10%;
height: 600px;
background: radial-gradient(ellipse at 30% 30%, rgba(122, 21, 48, 0.35), transparent 60%),
radial-gradient(ellipse at 75% 50%, rgba(139, 111, 217, 0.18), transparent 55%);
filter: blur(10px);
pointer-events: none;
z-index: 0;
}
.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 56px;
align-items: center;
}
.hero-subtitle {
color: var(--ink-dim);
font-size: 1.12rem;
max-width: 52ch;
margin: 22px 0 32px;
}
.hero-ctas {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.hero-microcopy {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.04em;
color: var(--ink-faint);
}
/* ---- Hero visual: phone mockup ---- */
.hero-visual {
position: relative;
display: flex;
justify-content: center;
min-height: 480px;
}
.visual-orb {
position: absolute;
border-radius: 50%;
filter: blur(2px);
opacity: 0.55;
z-index: 0;
}
.orb-a { width: 90px; height: 90px; top: 6%; left: 4%; background: radial-gradient(circle at 35% 35%, var(--cyan), transparent 70%); animation: float-a 9s var(--ease) infinite; }
.orb-b { width: 60px; height: 60px; bottom: 10%; left: -2%; background: radial-gradient(circle at 35% 35%, var(--burgundy-bright), transparent 70%); animation: float-b 11s var(--ease) infinite; }
.orb-c { width: 70px; height: 70px; bottom: 4%; right: 2%; background: radial-gradient(circle at 35% 35%, var(--gold), transparent 70%); animation: float-c 10s var(--ease) infinite; }
@keyframes float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@keyframes float-c { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.phone-frame {
position: relative;
z-index: 1;
width: 280px;
border-radius: 40px;
background: linear-gradient(165deg, #1c1220, #0d0810);
border: 1px solid rgba(243, 237, 230, 0.1);
box-shadow: var(--shadow-card), 0 0 0 1px rgba(243, 237, 230, 0.04) inset;
padding: 14px 14px 26px;
animation: phone-drift 7s var(--ease) infinite;
}
@keyframes phone-drift {
0%, 100% { transform: translateY(0) rotate(-1deg); }
50% { transform: translateY(-10px) rotate(0.5deg); }
}
.phone-notch {
width: 70px;
height: 18px;
background: #0a0710;
border-radius: 0 0 14px 14px;
margin: 0 auto 12px;
}
/* ---- Hero: captura real dentro del marco de teléfono ---- */
.phone-frame--hero {
width: 260px;
padding: 14px 14px 20px;
overflow: hidden;
}
.hero-phone-screenshot {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
box-shadow: 0 0 0 1px rgba(243, 237, 230, 0.06) inset;
}
.phone-screen {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ---- Sections (general) ---- */
.section {
padding: var(--space-section) 0;
position: relative;
}
.section--alt {
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent);
border-top: 1px solid var(--surface-border);
border-bottom: 1px solid var(--surface-border);
}
/* ---- Qué es: feature grid ---- */
.feature-grid.feature-grid--what {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 48px;
}
@media (min-width: 760px) {
.feature-grid.feature-grid--what { grid-template-columns: repeat(3, 1fr); }
}
.what-card {
background: var(--surface);
border: 1px solid var(--surface-border);
border-radius: var(--radius-md);
padding: 26px 22px;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.what-card:hover { border-color: rgba(201, 162, 75, 0.3); transform: translateY(-3px); }
.what-card h3 {
font-size: 1.05rem;
margin-bottom: 8px;
}
.what-card p { color: var(--ink-dim); font-size: 0.92rem; }
/* ---- Qué es: scroll horizontal en móvil ----
En desktop el grid 2x3 / 3x2 funciona bien. En móvil, las 6 cards apiladas
en 1 columna alargan demasiado la sección. Replicamos aquí el patrón del
.preview-grid (scroll horizontal con snap) que ya funciona en "Primer
vistazo", manteniendo idéntica la presentación visual de cada card.
Solo activa por debajo de 760px; desktop intacto. */
@media (max-width: 760px) {
.feature-grid.feature-grid--what {
display: flex;
grid-template-columns: none;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 4px 4px 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(243, 237, 230, 0.18) transparent;
/* Pista visual de que hay más contenido a la derecha: deja ver el borde
de la siguiente card sin empujarla fuera del raíl. */
scroll-padding-left: 4px;
}
.feature-grid.feature-grid--what::-webkit-scrollbar { height: 6px; }
.feature-grid.feature-grid--what::-webkit-scrollbar-thumb {
background: rgba(243, 237, 230, 0.18);
border-radius: 999px;
}
.feature-grid.feature-grid--what .what-card {
flex: 0 0 78%;
max-width: 280px;
scroll-snap-align: start;
}
}
/* ---- Qué no es ---- */
.not-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 32px;
max-width: 760px;
margin: 40px auto 0;
}
.not-list li {
display: flex;
align-items: center;
gap: 12px;
font-size: 1rem;
color: var(--ink-dim);
}
.not-icon {
flex-shrink: 0;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(122, 21, 48, 0.18);
color: var(--burgundy-bright);
font-size: 0.8rem;
border: 1px solid rgba(122, 21, 48, 0.35);
}
@media (max-width: 640px) {
.not-list { grid-template-columns: 1fr; }
}
/* ---- Funciones grid ---- */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
margin-top: 48px;
}
.feature-card {
position: relative;
background: var(--surface);
border: 1px solid var(--surface-border);
border-radius: var(--radius-md);
padding: 26px;
transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feature-card:hover {
transform: translateY(-4px);
border-color: rgba(243, 237, 230, 0.18);
box-shadow: var(--shadow-card);
}
.feature-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-icon[data-tone="magenta"] { background: rgba(178, 58, 115, 0.16); color: #e2a2c4; }
.feature-icon[data-tone="purple"] { background: rgba(111, 58, 178, 0.16); color: #c5a8ec; }
.feature-icon[data-tone="cyan"] { background: rgba(31, 169, 164, 0.16); color: #6fd9d3; }
.feature-icon[data-tone="lavender"]{ background: rgba(139, 111, 217, 0.16); color: #c1b0f0; }
.feature-icon[data-tone="gold"] { background: rgba(201, 162, 75, 0.16); color: var(--gold-soft); }
.feature-icon[data-tone="red"] { background: rgba(122, 21, 48, 0.18); color: #e2738f; }
.feature-icon[data-tone="blue"] { background: rgba(58, 111, 217, 0.16); color: #9bb6ec; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.feature-card p { color: var(--ink-dim); font-size: 0.92rem; }
.feature-card--soon { border-style: dashed; border-color: rgba(139, 111, 217, 0.35); }
.badge-soon {
display: inline-block;
margin-top: 14px;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.06em;
padding: 4px 10px;
border-radius: 999px;
background: rgba(139, 111, 217, 0.16);
color: #c1b0f0;
border: 1px solid rgba(139, 111, 217, 0.35);
}
/* ---- Funciones: scroll horizontal en móvil ----
Mismo planteamiento que en "Qué es": 10 feature-cards apiladas en móvil
hacen la sección interminable. Convertimos a raíl horizontal con snap
solo bajo 760px. Importante: usamos selector :not(.feature-grid--what)
para que esta regla NO solape a la anterior (que ya tiene su propio
tratamiento para 6 cards más anchas). */
@media (max-width: 760px) {
.feature-grid:not(.feature-grid--what) {
display: flex;
grid-template-columns: none;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 4px 4px 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(243, 237, 230, 0.18) transparent;
scroll-padding-left: 4px;
}
.feature-grid:not(.feature-grid--what)::-webkit-scrollbar { height: 6px; }
.feature-grid:not(.feature-grid--what)::-webkit-scrollbar-thumb {
background: rgba(243, 237, 230, 0.18);
border-radius: 999px;
}
.feature-grid:not(.feature-grid--what) .feature-card {
flex: 0 0 78%;
max-width: 280px;
scroll-snap-align: start;
/* padding interno ligeramente reducido en móvil para que el contenido
respire mejor en el ancho fijo del raíl */
padding: 22px 20px;
}
}
/* ---- Un primer vistazo (galería de capturas) ---- */
.section--preview {
background: radial-gradient(ellipse 900px 500px at 20% 10%, rgba(31, 169, 164, 0.08), transparent 60%);
}
.preview-grid {
display: flex;
gap: 20px;
margin-top: 48px;
overflow-x: auto;
scroll-snap-type: x proximity;
padding: 4px 4px 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(243, 237, 230, 0.18) transparent;
}
.preview-grid::-webkit-scrollbar { height: 6px; }
.preview-grid::-webkit-scrollbar-thumb {
background: rgba(243, 237, 230, 0.18);
border-radius: 999px;
}
.preview-item {
flex: 0 0 auto;
width: 220px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.preview-phone {
position: relative;
width: 100%;
border-radius: 28px;
background: linear-gradient(165deg, #1c1220, #0d0810);
border: 1px solid rgba(243, 237, 230, 0.1);
box-shadow: var(--shadow-card);
padding: 8px 8px 14px;
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
cursor: pointer;
font: inherit;
display: block;
text-align: left;
}
.preview-item:hover .preview-phone {
transform: translateY(-6px);
box-shadow: 0 24px 60px -20px rgba(201, 162, 75, 0.25), var(--shadow-card);
}
.preview-phone:focus-visible {
outline: 2px solid var(--gold-soft);
outline-offset: 3px;
}
.preview-zoom-hint {
position: absolute;
top: 18px;
right: 18px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(10, 7, 16, 0.72);
border: 1px solid rgba(243, 237, 230, 0.18);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.85);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
.preview-zoom-hint svg { width: 15px; height: 15px; }
.preview-item:hover .preview-zoom-hint,
.preview-phone:focus-visible .preview-zoom-hint {
opacity: 1;
transform: scale(1);
}
.preview-notch {
width: 44px;
height: 11px;
background: #0a0710;
border-radius: 0 0 8px 8px;
margin: 0 auto 6px;
}
.preview-phone img {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
}
.preview-item figcaption {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-dim);
}
.preview-disclaimer {
margin-top: 28px;
font-size: 0.78rem;
color: var(--ink-faint);
}
@media (min-width: 860px) {
.preview-grid {
overflow-x: visible;
flex-wrap: wrap;
justify-content: center;
}
.preview-item { width: 200px; }
}
/* ---- Privacidad ---- */
.privacy-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 56px;
align-items: start;
}
.privacy-list {
display: flex;
flex-direction: column;
gap: 22px;
}
.privacy-list li {
display: flex;
gap: 16px;
align-items: flex-start;
}
.privacy-icon {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--surface-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.privacy-list h3 { font-size: 1rem; margin-bottom: 4px; }
.privacy-list p { color: var(--ink-dim); font-size: 0.92rem; }
@media (max-width: 860px) {
.privacy-grid { grid-template-columns: 1fr; }
}
/* ---- Roadmap ---- */
.roadmap {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.roadmap-item {
display: flex;
gap: 16px;
background: var(--surface);
border: 1px solid var(--surface-border);
border-radius: var(--radius-md);
padding: 22px;
}
.roadmap-index {
flex-shrink: 0;
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 600;
color: var(--gold-soft);
opacity: 0.85;
}
.roadmap-item h3 { font-size: 1rem; margin-bottom: 6px; }
.roadmap-item p { color: var(--ink-dim); font-size: 0.9rem; }
@media (max-width: 860px) {
.roadmap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.roadmap { grid-template-columns: 1fr; }
}
/* ---- Waitlist ---- */
.section--waitlist {
background: radial-gradient(ellipse 800px 500px at 80% 20%, rgba(122, 21, 48, 0.16), transparent 60%);
}
.waitlist-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 56px;
align-items: start;
}
.waitlist-form {
background: var(--surface);
border: 1px solid var(--surface-border);
border-radius: var(--radius-lg);
padding: 32px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: var(--shadow-card);
/* Anti-overflow: en una grid el item por defecto tiene min-width:auto, lo
que le permite ser más ancho que su columna si el contenido lo pide.
min-width:0 fuerza al form a respetar el ancho de la columna. */
min-width: 0;
}
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row label { font-size: 0.88rem; color: var(--ink-dim); }
.form-row .optional { color: var(--ink-faint); font-weight: 400; }
.form-row input[type="email"],
.form-row input[type="text"],
.form-row select {
background: var(--bg-soft);
border: 1px solid var(--surface-border);
border-radius: var(--radius-sm);
padding: 12px 14px;
color: var(--ink);
transition: border-color 0.2s ease;
/* Anti-overflow móvil: los inputs HTML tienen un ancho intrínseco mínimo
(atributo `size` por defecto = 20 caracteres) que en viewports estrechos
puede negarse a encoger por debajo de ~200-240px, empujando el form fuera
del contenedor y provocando scroll horizontal global. Forzamos width
fluido + min-width:0 (truco clásico para que un flex/grid item pueda
encoger por debajo de su contenido intrínseco). */
width: 100%;
min-width: 0;
max-width: 100%;
}
.form-row input:focus,
.form-row select:focus {
border-color: var(--gold);
}
.form-row input[aria-invalid="true"] { border-color: var(--burgundy-bright); }
.form-row--checkbox {
flex-direction: row;
align-items: flex-start;
gap: 10px;
}
.form-row--checkbox input {
margin-top: 3px;
width: 18px;
height: 18px;
accent-color: var(--gold);
flex-shrink: 0;
}
.form-row--checkbox label { font-size: 0.85rem; line-height: 1.5; }
/* Honeypot anti-spam: oculto de forma accesible (no display:none, que
algunos lectores de pantalla y bots simples ignoran igual). Fuera de
la pantalla visible y sin foco por teclado. */
.hp-field {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.form-row--turnstile {
display: flex;
justify-content: center;
min-height: 65px;
/* El widget Turnstile en modo "flexible" puede pedir un ancho mínimo
interno que en pantallas muy estrechas (320px) excede el padding del
form. Confinamos su contenedor para que no se desborde aunque el
iframe interno intente forzar más ancho del disponible. */
max-width: 100%;
overflow: hidden;
}
.form-row--turnstile .cf-turnstile { max-width: 100%; }
/* El widget de Turnstile inserta su propio iframe dentro de este div;
el min-height evita un salto de layout mientras carga. */
/* Móvil: reduce el padding interno del form para dar más respiro al
contenido. 32px x 2 = 64px de padding lateral perdidos eran demasiado
en viewports estrechos. */
@media (max-width: 560px) {
.waitlist-form { padding: 24px 20px; }
}
.field-error {
font-size: 0.8rem;
color: #e2738f;
min-height: 1em;
display: block;
}
.form-success {
text-align: center;
font-size: 0.92rem;
line-height: 1.6;
color: #6fd9d3;
background: rgba(31, 169, 164, 0.1);
border: 1px solid rgba(31, 169, 164, 0.3);
border-radius: var(--radius-sm);
padding: 14px 16px;
}
.form-success a {
color: #9fe8e3;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
}
.form-success a:hover { color: #c4f3ef; }
.form-error-banner {
text-align: center;
font-size: 0.92rem;
line-height: 1.6;
color: #f3a9bc;
background: rgba(122, 21, 48, 0.14);
border: 1px solid rgba(122, 21, 48, 0.4);
border-radius: var(--radius-sm);
padding: 14px 16px;
}
.form-error-banner a {
color: #ffc4d3;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
}
.form-error-banner a:hover { color: #ffdce5; }
.btn[disabled] {
opacity: 0.7;
cursor: not-allowed;
transform: none !important;
}
@media (max-width: 860px) {
.waitlist-grid { grid-template-columns: 1fr; }
}
/* ---- FAQ ---- */
.faq-list {
max-width: 760px;
margin: 48px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--surface);
border: 1px solid var(--surface-border);
border-radius: var(--radius-sm);
padding: 6px 22px;
}
.faq-item summary {
cursor: pointer;
list-style: none;
padding: 16px 0;
font-weight: 500;
position: relative;
padding-right: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
position: absolute;
right: 0;
top: 14px;
font-size: 1.3rem;
color: var(--gold-soft);
transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
color: var(--ink-dim);
font-size: 0.92rem;
padding-bottom: 18px;
}
/* ---- FAQ: contenedor de preguntas extra (colapsable) ----
Las primeras 3 FAQs son las estratégicas y siempre visibles. Las 7
siguientes viven dentro de #faqExtra y se ocultan por defecto.
No usamos display:none porque rompería la animación y, sobre todo, los
bots de SEO rastrean mejor el contenido visible en el DOM. En su lugar
colapsamos con max-height + opacity. */
.faq-extra {
display: flex;
flex-direction: column;
gap: 12px;
/* Estado colapsado: altura 0, sin interacción, fuera del flujo táctil */
max-height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transition: max-height 0.45s var(--ease), opacity 0.3s ease, margin-top 0.3s ease;
margin-top: 0;
}
.faq-extra.is-expanded {
/* Suficiente para 7 cards FAQ aunque alguna esté abierta. Es un techo,
no un alto fijo: el contenido real ocupa lo que necesite. Si en el
futuro se añaden más preguntas o cards más altas, basta con subir
este valor. */
max-height: 2400px;
opacity: 1;
pointer-events: auto;
margin-top: 12px;
}
.faq-toggle-wrap {
display: flex;
justify-content: center;
margin-top: 20px;
}
.faq-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.92rem;
}
.faq-toggle-icon {
display: inline-flex;
width: 18px;
height: 18px;
transition: transform 0.3s var(--ease);
}
.faq-toggle-icon svg { width: 100%; height: 100%; }
.faq-toggle[aria-expanded="true"] .faq-toggle-icon { transform: rotate(180deg); }
/* Respeto a prefers-reduced-motion: sin transición de altura/opacidad */
@media (prefers-reduced-motion: reduce) {
.faq-extra, .faq-toggle-icon { transition: none; }
}
/* ---- Footer ---- */
.site-footer {
border-top: 1px solid var(--surface-border);
padding: 56px 0 24px;
background: var(--bg-soft);
}
.footer-inner {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 32px;
margin-bottom: 40px;
}
.footer-brand p { color: var(--ink-faint); font-size: 0.88rem; margin-top: 10px; }
.footer-col h3 {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 12px;
}
.footer-col a {
display: block;
color: var(--ink-dim);
font-size: 0.9rem;
margin-bottom: 8px;
transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--gold-soft); }
.footer-age { color: var(--ink-dim); font-size: 0.9rem; }
.footer-bottom {
border-top: 1px solid var(--surface-border);
padding-top: 20px;
font-size: 0.82rem;
color: var(--ink-faint);
}
@media (max-width: 760px) {
.footer-inner { grid-template-columns: repeat(2, 1fr); }
}
/* ---- Reveal on scroll ---- */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ---- Responsive: hero & general ----
Tramo intermedio (980–1180px, == --max-width del contenedor): aquí
el header ya está en modo desktop completo (el menú hamburguesa solo
entra en max-width:1020px... pero en la práctica con 7 enlaces el
texto cabe holgado hasta bien por debajo de 1180px), así que NO
conviene pasar el hero a columna única todavía: el mockup pasaría a
ocupar toda la primera pantalla y el título quedaría empujado abajo.
En su lugar, se re-equilibran las dos columnas (proporción más
pareja, menos gap, mockup ligeramente más pequeño) para que no se
vean apretadas. La columna única sigue reservada para el rango
realmente estrecho (<=760px, ver bloque más abajo). */
@media (max-width: 1180px) and (min-width: 761px) {
.hero-inner { grid-template-columns: 1.1fr 0.9fr; gap: 36px; }
.hero-subtitle { font-size: 1.05rem; max-width: 46ch; }
.phone-frame { width: 230px; }
.hero-visual { min-height: 420px; }
}
@media (max-width: 760px) {
.hero-inner {
grid-template-columns: 1fr;
text-align: center;
}
.hero-subtitle { margin-left: auto; margin-right: auto; }
.hero-ctas { justify-content: center; }
.hero-visual { order: -1; min-height: 380px; margin-bottom: 8px; }
.phone-frame { width: 240px; }
}
@media (max-width: 600px) {
.header-inner { height: 68px; }
.brand-word { font-size: 1.1rem; }
h1 { font-size: 2.1rem; }
.section { padding: 56px 0; }
.roadmap-item { flex-direction: column; gap: 10px; }
}
/* ==========================================================================
NOSCRIPT BANNER
========================================================================== */
.noscript-banner {
background: var(--burgundy);
color: var(--ink);
text-align: center;
padding: 14px 20px;
font-size: 0.92rem;
line-height: 1.5;
}
/* ==========================================================================
AGE GATE — verificación de edad 18+
========================================================================== */
.age-gate {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.age-gate[hidden] { display: none; }
.age-gate-backdrop {
position: absolute;
inset: 0;
background: rgba(5, 3, 8, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.age-gate-card {
position: relative;
z-index: 1;
max-width: 440px;
width: 100%;
background: linear-gradient(165deg, #1c1220, #0d0810);
border: 1px solid rgba(201, 162, 75, 0.25);
border-radius: var(--radius-lg);
padding: 40px 32px;
text-align: center;
box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.7), 0 0 60px -20px rgba(122, 21, 48, 0.35);
animation: age-gate-in 0.5s var(--ease);
}
@keyframes age-gate-in {
from { opacity: 0; transform: translateY(14px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.age-gate-card { animation: none; }
}
.age-gate-icon {
width: 56px;
height: 56px;
margin: 0 auto 20px;
border-radius: 16px;
background: rgba(201, 162, 75, 0.12);
border: 1px solid rgba(201, 162, 75, 0.35);
color: var(--gold-soft);
display: flex;
align-items: center;
justify-content: center;
}
.age-gate-icon svg { width: 28px; height: 28px; }
.age-gate-card h2 {
font-size: 1.4rem;
line-height: 1.3;
margin-bottom: 10px;
}
.age-gate-card p {
color: var(--ink-dim);
font-size: 0.96rem;
margin-bottom: 28px;
}
.age-gate-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.age-gate-actions .btn { width: 100%; }
@media (min-width: 480px) {
.age-gate-actions { flex-direction: row; }
}
/* ==========================================================================
COOKIE BANNER
========================================================================== */
.cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 900;
padding: 16px;
display: flex;
justify-content: center;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-card {
max-width: 920px;
width: 100%;
background: linear-gradient(165deg, #1c1220, #0d0810);
border: 1px solid var(--surface-border);
border-radius: var(--radius-md);
padding: 22px 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
animation: cookie-in 0.4s var(--ease);
}
@keyframes cookie-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.cookie-banner-card { animation: none; }
}
.cookie-banner-text { flex: 1 1 320px; }
.cookie-banner-title {
font-weight: 600;
font-size: 0.98rem;
margin-bottom: 6px;
color: var(--ink);
}
.cookie-banner-text p:not(.cookie-banner-title) {
font-size: 0.86rem;
line-height: 1.55;
color: var(--ink-dim);
}
.cookie-banner-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.cookie-banner-config {
background: none;
border: none;
color: var(--ink-faint);
font-size: 0.84rem;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
padding: 8px 4px;
}
.cookie-banner-config:hover { color: var(--ink-dim); }
@media (max-width: 560px) {
.cookie-banner-card { flex-direction: column; align-items: stretch; }
.cookie-banner-actions { justify-content: stretch; }
.cookie-banner-actions .btn { flex: 1; }
}
/* ==========================================================================
PANEL DE PREFERENCIAS DE COOKIES (detallado)
========================================================================== */
.cookie-panel {
position: fixed;
inset: 0;
z-index: 1150;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.cookie-panel[hidden] { display: none; }
.cookie-panel-backdrop {
position: absolute;
inset: 0;
background: rgba(5, 3, 8, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.cookie-panel-card {
position: relative;
z-index: 1;
max-width: 520px;
width: 100%;
max-height: 88vh;
overflow-y: auto;
background: linear-gradient(165deg, #1c1220, #0d0810);
border: 1px solid rgba(243, 237, 230, 0.1);
border-radius: var(--radius-lg);
padding: 36px 30px 28px;
box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.7);
animation: age-gate-in 0.4s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
.cookie-panel-card { animation: none; }
}
.cookie-panel-close {
position: absolute;
top: 18px;
right: 18px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(243, 237, 230, 0.06);
border: 1px solid rgba(243, 237, 230, 0.16);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
}
.cookie-panel-close svg { width: 16px; height: 16px; }
.cookie-panel-close:hover { background: rgba(243, 237, 230, 0.14); }
.cookie-panel-close:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.cookie-panel-card h2 {
font-size: 1.25rem;
margin-bottom: 12px;
padding-right: 30px;
}
.cookie-panel-intro {
color: var(--ink-dim);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 24px;
}
.cookie-category {
border-top: 1px solid var(--surface-border);
padding: 18px 0;
}
.cookie-category:last-of-type { border-bottom: 1px solid var(--surface-border); }
.cookie-category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.cookie-category-head h3 {
font-size: 0.96rem;
font-weight: 600;
color: var(--ink);
}
.cookie-category-badge {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.05em;
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.cookie-category-badge--locked {
background: rgba(31, 169, 164, 0.14);
color: #6fd9d3;
border: 1px solid rgba(31, 169, 164, 0.3);
}
.cookie-category-badge--soon {
background: rgba(139, 111, 217, 0.14);
color: #c1b0f0;
border: 1px solid rgba(139, 111, 217, 0.3);
}
.cookie-category p {
font-size: 0.86rem;
line-height: 1.6;
color: var(--ink-dim);
}
.cookie-panel-actions {
display: flex;
gap: 12px;
margin-top: 26px;
}
.cookie-panel-actions .btn { flex: 1; }
.cookie-panel-footnote {
margin-top: 18px;
font-size: 0.78rem;
color: var(--ink-faint);
text-align: center;
}
@media (max-width: 480px) {
.cookie-panel-actions { flex-direction: column; }
}
/* ==========================================================================
FOOTER — badge 18+ premium
========================================================================== */
.age-badge {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 16px;
padding: 6px 16px 6px 6px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(122, 21, 48, 0.16), rgba(201, 162, 75, 0.1));
border: 1px solid rgba(201, 162, 75, 0.3);
box-shadow: 0 0 24px -8px rgba(201, 162, 75, 0.25);
color: var(--gold-soft);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.age-badge svg.age-badge-circle {
width: 30px;
height: 30px;
aspect-ratio: 1 / 1;
flex-shrink: 0;
display: block;
}
.age-badge-circle-text {
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
fill: #f0dba8;
letter-spacing: -0.03em;
}
@media (max-width: 480px) {
.age-badge {
white-space: normal;
border-radius: 18px;
}
}
/* ---- Redes sociales del footer ---- */
.footer-social {
display: flex;
gap: 14px;
margin-top: 16px;
}
a.social-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1px solid var(--surface-border);
color: var(--ink-dim);
margin-bottom: 0;
transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease), box-shadow 0.25s ease, background 0.25s ease;
}
.social-icon svg { width: 27px; height: 27px; transition: transform 0.25s var(--ease); }
.social-icon:hover,
.social-icon:focus-visible {
color: var(--gold-soft);
border-color: rgba(201, 162, 75, 0.55);
background: linear-gradient(160deg, rgba(122, 21, 48, 0.16), rgba(201, 162, 75, 0.08));
box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.18), 0 10px 26px -10px rgba(201, 162, 75, 0.45);
transform: translateY(-3px);
}
.social-icon:hover svg,
.social-icon:focus-visible svg { transform: scale(1.08); }
.social-icon:focus-visible {
outline: 2px solid var(--gold-soft);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.social-icon, .social-icon svg { transition: none; }
.social-icon:hover { transform: none; }
}
/* ---- Sello visual 18+ de la columna Aviso ---- */
.footer-col--notice { display: flex; flex-direction: column; }
.footer-notice-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.footer-notice-row .footer-age { flex: 1; margin: 0; }
.footer-age-mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 0;
width: 46px;
height: 46px;
border-radius: 10px;
border: 1px solid rgba(201, 162, 75, 0.35);
background: linear-gradient(160deg, rgba(122, 21, 48, 0.22), rgba(201, 162, 75, 0.08));
color: var(--burgundy-bright);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: -0.02em;
text-shadow: 0 1px 0 rgba(227, 199, 133, 0.25);
box-shadow: 0 0 18px -6px rgba(201, 162, 75, 0.3);
}
@media (max-width: 760px) {
.footer-notice-row {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.footer-age-mark { align-self: center; }
}
.footer-link-button {
display: block;
background: none;
border: none;
padding: 0;
margin-bottom: 8px;
color: var(--ink-dim);
font-size: 0.9rem;
font-family: inherit;
text-align: left;
cursor: pointer;
transition: color 0.2s ease;
}
.footer-link-button:hover { color: var(--gold-soft); }
/* ==========================================================================
LIGHTBOX — ampliar capturas
========================================================================== */
.lightbox {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(5, 3, 8, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lightbox-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 16px;
max-width: 100%;
animation: lightbox-in 0.22s ease-out;
}
@keyframes lightbox-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.lightbox-content { animation: none; }
}
.lightbox-figure {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
max-height: 90vh;
}
.lightbox-figure img {
max-width: min(420px, 80vw);
max-height: 78vh;
width: auto;
height: auto;
display: block;
border-radius: 24px;
border: 1px solid rgba(243, 237, 230, 0.12);
box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.8);
}
.lightbox-figure figcaption {
font-family: var(--font-mono);
font-size: 0.82rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-dim);
}
.lightbox-close {
position: absolute;
top: -44px;
right: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(243, 237, 230, 0.08);
border: 1px solid rgba(243, 237, 230, 0.18);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-close svg { width: 18px; height: 18px; }
.lightbox-close:hover { background: rgba(243, 237, 230, 0.16); transform: scale(1.05); }
.lightbox-close:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.lightbox-nav {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(243, 237, 230, 0.06);
border: 1px solid rgba(243, 237, 230, 0.16);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.lightbox-nav svg { width: 20px; height: 20px; }
.lightbox-nav:hover { background: rgba(201, 162, 75, 0.16); transform: scale(1.06); }
.lightbox-nav:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.lightbox-nav:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
@media (max-width: 680px) {
.lightbox-content { flex-direction: column; gap: 12px; }
.lightbox-close { top: -52px; right: 0; }
.lightbox-nav { width: 42px; height: 42px; }
.lightbox-figure img { max-width: 86vw; max-height: 60vh; }
.lightbox-nav--prev, .lightbox-nav--next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.lightbox-nav--prev { left: -4px; }
.lightbox-nav--next { right: -4px; }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
}