/* =========================================================
PLANTILLA "LACRE" — boda, carta de amor lacrada.
Hoja de estilo AUTOCONTENIDA (NO depende de base.css/temas.css).
Comparte el contrato de datos del motor (motor.js): mismas clases/IDs/
data-rol/data-modulo que el resto; cambia el copy y el envoltorio visual.
Dirección (deploy/_work/diseno-lacre.md): el invitado recibe un SOBRE de
papel perlado sellado en cera vino (portada .ti-portada--sobre), lo abre
con un toque y dentro encuentra papelería fina en terracota, crema y oro
viejo. El sistema de marcas nace del sello: mini-sellos de cera (divisor,
nodos del timeline, dots de galería), gotas de cera (dress code) y
filetes dorados hairline.
Paleta: papel crema perlado / cacao / terracota / vino / oro viejo.
Pinyon Script (display caligráfico) + Lora (texto/títulos).
Mobile-first 360px · AA verificado · sin dependencias.
========================================================= */
:root {
/* Papeles y tintas (AA verificado en la spec de diseño) */
--papel: #f7f1e8; /* fondo base, crema perlado */
--papel-2: #efe6d9; /* superficie alterna / arena */
--crema: #fdfaf4; /* highlight de papel, cards, texto sobre vino */
--cacao: #4a342c; /* tinta principal → 10.3:1 sobre --papel (AAA) */
--cacao-2: #6e5548; /* tinta secundaria → 6.1:1 (AA) */
--cacao-3: #83654f; /* metadatos → 4.75:1 (AA justo) */
--terracota: #a85535; /* 4.66:1 sobre --papel: títulos y texto ≥600 */
--terracota-prof: #8f4630; /* hover/activo; crema encima = 6.5:1 (AA) */
--terracota-hover:#7c3a27; /* pressed/hover profundo del botón WA 2 */
--terracota-lav: rgba(168, 85, 53, .12);
--vino: #6f2b38; /* 9.05:1 sobre --papel; --crema encima = 9.7:1 */
--vino-prof: #5a2130; /* pie, pressed */
--vino-claro: #8a4152; /* SOLO decorativo: blob del colofón sobre --vino-prof */
--oro: #c9a45c; /* metal claro: filetes, anillos, texto GRANDE sobre vino */
--oro-tinta: #8a6428; /* oro legible sobre papel: 4.76:1 (AA texto normal) */
--oro-filete: rgba(179, 135, 62, .38);
--crema-85: rgba(253, 250, 244, .85);
--error: #9c3535; /* estado de error del RSVP (AA sobre --crema) */
--sombra-calida: 0 18px 40px -18px rgba(111, 43, 56, .28);
--sombra-card: 0 6px 22px -10px rgba(74, 52, 44, .25);
/* Tipografías (las enlaza el render en ; aquí solo se declaran) */
--f-display: "Pinyon Script", "Segoe Script", cursive;
--f-texto: "Lora", Georgia, "Times New Roman", serif;
/* Escala de espaciado */
--esp-1:4px; --esp-2:8px; --esp-3:16px; --esp-4:24px;
--esp-5:40px; --esp-6:64px; --esp-7:96px; --esp-8:128px;
--radio: 6px;
--blob: 47% 53% 50% 50% / 52% 48% 55% 45%; /* forma orgánica de la cera */
--ls: .3em; /* tracking de versalitas (títulos) */
--ls-2: .18em; /* tracking medio (etiquetas) */
--transicion: .35s cubic-bezier(.22, 1, .36, 1);
--ancho: 640px;
/* --sec-*: fichas dinámicas + saludo (secciones.css, SPEC 0006) */
--sec-bg: var(--crema);
--sec-borde: var(--oro-filete);
--sec-radio: 6px;
--sec-titulo-font: var(--f-texto);
--sec-titulo-color: var(--terracota);
--sec-texto-color: var(--cacao-2);
--sec-acento: var(--vino);
--sec-acento-bg: var(--vino); /* saludo: crema sobre vino 9.7:1 */
--sec-acento-tinta: var(--crema);
--sec-acento-boton-bg: var(--crema);
--sec-acento-boton-tinta: var(--vino);
/* --portada-*: capa de apertura (secciones.css, SPEC 0008) */
--portada-bg: var(--papel);
--portada-tinta: var(--cacao);
--portada-acento: rgba(179, 135, 62, .55);
--portada-titulo-font: var(--f-display);
--portada-radio: 999px;
--portada-cta-bg: var(--vino);
--portada-cta-tinta: var(--crema);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
font-family: var(--f-texto);
font-size: 16px; line-height: 1.85;
color: var(--cacao-2);
background-color: var(--papel);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Lienzo: viñetas cálidas de terracota en las esquinas del papel, fijas */
body::before {
content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
background:
radial-gradient(58% 48% at 6% 2%, var(--terracota-lav), transparent 62%),
radial-gradient(52% 42% at 96% 12%, rgba(111, 43, 56, .08), transparent 60%),
radial-gradient(58% 48% at 94% 98%, var(--terracota-lav), transparent 62%),
radial-gradient(50% 42% at 4% 90%, rgba(179, 135, 62, .10), transparent 60%),
var(--papel);
}
/* Grano de papel perlado (textura fractal muy tenue) */
body::after {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
opacity: .45; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
iframe { border: 0; }
/* Los controles de formulario y botones NO heredan la fuente por defecto
(caerían en Arial del user-agent): se fuerza la del cuerpo. */
button, input, select, textarea { font-family: inherit; }
/* Foco visible universal; sobre superficies vino el outline pasa a --oro */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--oro-tinta);
outline-offset: 3px;
border-radius: var(--radio);
}
.pie a:focus-visible, .musica:focus-visible,
.lightbox button:focus-visible, .boton:focus-visible {
outline-color: var(--oro);
}
/* =========================================================
REVEAL POR SCROLL — la papelería se despliega
(transición afinada + escalonado ≤150ms en hijos directos)
========================================================= */
.fade-up {
opacity: 0; transform: translateY(22px);
transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.fade-up.is-visible { opacity: 1; transform: none; }
.fade-up > * {
opacity: 0; transform: translateY(12px);
transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.fade-up.is-visible > * { opacity: 1; transform: none; }
.fade-up.is-visible > *:nth-child(2) { transition-delay: .05s; }
.fade-up.is-visible > *:nth-child(3) { transition-delay: .1s; }
.fade-up.is-visible > *:nth-child(n+4) { transition-delay: .15s; }
/* =========================================================
HERO — "la carta abierta": marco de doble filete dorado
sobre papel; acepta foto CON velo crema (sin !important).
========================================================= */
.hero {
position: relative; isolation: isolate;
min-height: 100svh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: var(--esp-7) var(--esp-4);
background-color: var(--papel);
background-size: cover; background-position: center;
overflow: hidden;
}
/* Velo crema: legibilidad AA sobre foto; sobre papel es casi invisible */
.hero__overlay {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(rgba(247, 241, 232, .92), rgba(247, 241, 232, .72));
}
/* Marco de doble filete dorado, inset 14px */
.hero::before, .hero::after {
content: ""; position: absolute; z-index: 1; pointer-events: none;
border: 1px solid var(--oro-filete);
}
.hero::before { inset: 14px; }
.hero::after { inset: 20px; }
.hero__contenido {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center;
}
/* Sello de cera del hero: blob vino con monograma Pinyon dorado (texto
grande sobre vino = AA large). Con foto: recorte circular + anillo oro. */
.hero__sello {
display: grid; place-items: center;
width: 72px; height: 72px; margin: 0 auto var(--esp-4);
border-radius: var(--blob);
font-family: var(--f-display); font-weight: 400;
font-size: 1.5rem; color: var(--oro); letter-spacing: .02em;
background: radial-gradient(circle at 38% 32%, rgba(253, 250, 244, .18), transparent 55%), var(--vino);
box-shadow: inset 0 0 0 2px rgba(201, 164, 92, .5);
filter: drop-shadow(0 6px 10px rgba(74, 52, 44, .3));
}
.hero__sello:empty { display: none; }
.hero__sello:has(.hero__sello-foto) {
border-radius: 50%;
box-shadow: 0 0 0 2px var(--oro), var(--sombra-card);
background: var(--crema);
}
.hero__intro {
text-transform: uppercase; letter-spacing: var(--ls);
font-size: .78rem; font-weight: 500;
color: var(--cacao-2); margin-bottom: var(--esp-3);
}
.hero__nombres {
font-family: var(--f-display); font-weight: 400;
font-size: clamp(3rem, 14vw, 5.2rem); line-height: 1.12;
color: var(--vino);
}
.hero__nombres > span { display: block; }
.hero__amp {
font-family: var(--f-texto); font-style: italic; font-weight: 400;
font-size: .38em; color: var(--oro-tinta);
margin: .1em 0; line-height: 1;
}
.hero__fecha {
display: inline-flex; align-items: center; gap: var(--esp-3);
margin-top: var(--esp-5);
font-style: italic; font-size: 1.05rem;
color: var(--cacao-2);
}
.hero__fecha::before, .hero__fecha::after {
content: ""; width: 32px; height: 1px; background: var(--oro-filete);
}
.hero__scroll {
margin-top: var(--esp-6);
display: grid; place-items: center;
width: 48px; height: 48px; border-radius: 50%;
border: 1px solid var(--oro-filete);
color: var(--vino); text-decoration: none;
font-size: 1.4rem; line-height: 1;
transition: border-color var(--transicion), color var(--transicion);
}
.hero__scroll:hover { border-color: var(--vino); color: var(--terracota-prof); }
/* Chevron dibujado en CSS (el glifo ⌄ del partial se anula con font-size:0:
como "v" tipográfica se veía débil — hallazgo menor 3 del revisor UX). */
.hero__flecha {
display: inline-block; font-size: 0;
width: 12px; height: 12px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
animation: lacre-rebote 2.4s ease-in-out infinite;
}
/* El rebote CONSERVA el rotate del chevron (un translateY suelto lo pisaría) */
@keyframes lacre-rebote {
0%, 100% { transform: translateY(-2px) rotate(45deg); }
50% { transform: translateY(4px) rotate(45deg); }
}
/* Parallax de salida (solo transform, solo fase EXIT — jamás opacity ni
desde la carga: gotcha liga-heroes). El marco y el sello "se quedan atrás". */
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.hero::before, .hero::after, .hero__sello {
animation: lacre-hero-exit linear both;
animation-timeline: view();
animation-range: exit 0% exit 100%;
}
@keyframes lacre-hero-exit { to { transform: translateY(-42px); } }
}
}
/* =========================================================
ESTRUCTURA — la columna de papelería
========================================================= */
main { padding: var(--esp-6) var(--esp-4) var(--esp-6); }
.bienvenida, .contador, .historia, .evento, .itinerario,
.dress-code, .mesa-regalos, .hospedaje, .rsvp {
max-width: var(--ancho); margin: 0 auto var(--esp-8);
text-align: center;
}
/* La última sección no suma su margen al padding de main (evita ~250px
muertos antes del pie — hallazgo menor 7 del revisor UX). Solo
margin-bottom: el margin-inline:auto del centrado se conserva. */
main > :last-child { margin-bottom: 0; }
/* Divisor: MINI-SELLO de cera (blob vino + punto oro) flanqueado por
dos filetes hairline dorados de 64px. CSS puro. */
.divisor {
position: relative; display: block;
width: 200px; height: 30px;
margin: 0 auto var(--esp-5); font-size: 0;
background:
linear-gradient(var(--oro-filete), var(--oro-filete)) left center / 64px 1px no-repeat,
linear-gradient(var(--oro-filete), var(--oro-filete)) right center / 64px 1px no-repeat;
}
.divisor::before {
content: ""; position: absolute; top: 50%; left: 50%;
width: 30px; height: 30px;
transform: translate(-50%, -50%);
border-radius: var(--blob);
background:
radial-gradient(circle at 50% 46%, var(--oro) 0 3.5px, transparent 4.5px),
radial-gradient(circle at 36% 30%, rgba(253, 250, 244, .16), transparent 55%),
var(--vino);
box-shadow: 0 3px 8px rgba(74, 52, 44, .25);
}
/* Títulos de sección: versalitas Lora terracota */
.seccion__titulo, .bienvenida__titulo {
font-family: var(--f-texto); font-weight: 500;
text-transform: uppercase; letter-spacing: var(--ls);
font-size: clamp(1.05rem, 4.5vw, 1.3rem); line-height: 1.5;
color: var(--terracota);
margin-bottom: var(--esp-4);
}
/* Bienvenida: carta con letra capital Pinyon */
.bienvenida__texto {
max-width: 34ch; margin: 0 auto;
font-size: 1.05rem; line-height: 1.85; color: var(--cacao-2);
text-align: center;
}
.bienvenida__texto::first-letter {
font-family: var(--f-display);
font-size: 2.6em; line-height: .8;
color: var(--terracota);
float: left; margin: .08em .12em 0 0;
}
/* =========================================================
CUENTA REGRESIVA — 4 estampillas postales
========================================================= */
.contador__lista {
list-style: none;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.contador__item {
padding: var(--esp-3) var(--esp-1);
background: var(--crema);
border: 1px solid var(--oro-filete);
outline: 1px solid var(--oro-filete); outline-offset: -6px; /* doble borde de timbre */
border-radius: 3px;
box-shadow: var(--sombra-card);
}
.contador__num {
display: block; font-weight: 600;
font-size: clamp(1.6rem, 7vw, 2.4rem); line-height: 1.15;
color: var(--vino);
font-variant-numeric: tabular-nums lining-nums;
}
.contador__label {
display: block; margin-top: var(--esp-1);
color: var(--cacao-3); letter-spacing: var(--ls-2); font-size: .68rem;
text-transform: uppercase; font-weight: 500;
}
/* =========================================================
HISTORIA / TIMELINE — línea dorada con nodos de cera
========================================================= */
.historia__linea {
list-style: none; max-width: 520px; margin: 0 auto; text-align: left;
position: relative; padding-left: 28px;
}
.historia__linea::before {
content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px;
width: 1px; background: var(--oro-filete);
}
.historia__item { position: relative; padding: 0 0 var(--esp-6); }
.historia__item:last-child { padding-bottom: 0; }
.historia__item::before {
/* nodo: mini-sello de cera vino */
content: ""; position: absolute; left: -29px; top: 6px;
width: 14px; height: 14px;
border-radius: var(--blob);
background: var(--vino);
box-shadow: 0 0 0 4px var(--papel);
}
.historia__fecha {
text-transform: uppercase; letter-spacing: var(--ls-2);
font-size: .7rem; font-weight: 600;
color: var(--oro-tinta); margin-bottom: var(--esp-1);
}
.historia__titulo {
font-weight: 600; font-size: 1.3rem; line-height: 1.3;
color: var(--cacao); margin-bottom: var(--esp-2);
}
.historia__texto { color: var(--cacao-2); }
.historia__img {
width: 100%; margin-top: var(--esp-3);
aspect-ratio: 3/2; object-fit: cover;
padding: 8px; background: var(--crema);
border-radius: 3px;
box-shadow: var(--sombra-card);
transform: rotate(-1.5deg);
}
.historia__item:nth-child(even) .historia__img { transform: rotate(1.5deg); }
/* =========================================================
EVENTOS (ceremonia / recepción) — tarjetones con solapa
========================================================= */
.evento {
position: relative;
background: var(--crema);
border: 1px solid var(--oro-filete);
border-radius: var(--radio);
box-shadow: var(--sombra-calida);
padding: var(--esp-6) var(--esp-4) var(--esp-5);
overflow: hidden;
}
.evento::before {
/* solapa triangular arena asomando del borde superior */
content: ""; position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 132px; height: 26px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
background: var(--papel-2);
}
.evento__hora {
font-style: italic; font-size: 1.5rem; line-height: 1.4;
color: var(--terracota-prof); margin-bottom: var(--esp-1);
}
.evento__lugar {
font-weight: 600; font-size: clamp(1.2rem, 5vw, 1.5rem);
color: var(--cacao); line-height: 1.35;
}
.evento__direccion { color: var(--cacao-2); margin: var(--esp-2) 0 var(--esp-4); }
.evento__mapa {
border: 1px solid var(--oro-filete); border-radius: var(--radio);
overflow: hidden; background: var(--papel-2);
}
.evento__mapa iframe {
width: 100%; height: 280px; display: block;
filter: sepia(.12) saturate(.85);
}
/* Botón secundario de papelería: contorno vino */
.evento__boton, .hospedaje__link {
display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; margin-top: var(--esp-4);
padding: 10px var(--esp-5);
border: 1.5px solid var(--vino); border-radius: 999px;
color: var(--vino); text-decoration: none;
font-weight: 600; font-size: .95rem;
background: transparent;
transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}
.evento__boton:hover, .hospedaje__link:hover {
background: var(--vino); color: var(--crema); transform: translateY(-2px);
}
/* Sheen perlado al pasar el cursor por un tarjetón (solo puntero fino) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.evento::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 42%, rgba(253, 250, 244, .4) 50%, transparent 58%);
transform: translateX(-130%);
transition: transform .8s ease;
}
.evento:hover::after { transform: translateX(130%); }
}
/* =========================================================
ITINERARIO — horas con leader punteado dorado
========================================================= */
.itinerario__lista { list-style: none; max-width: 480px; margin: 0 auto; }
.itinerario__item {
display: flex; align-items: baseline; gap: 10px;
padding: var(--esp-3) 0;
border-bottom: 1px solid var(--papel-2);
text-align: left;
}
.itinerario__item:last-child { border-bottom: none; }
.itinerario__item::after {
/* leader punteado entre hora y actividad (flex item, orden intermedio) */
content: ""; flex: 1 1 auto; min-width: 16px;
border-bottom: 1px dotted var(--oro-filete);
transform: translateY(-4px);
}
.itinerario__hora {
order: -1; flex: 0 0 88px; white-space: nowrap; /* "10:00 p.m." en UNA línea (nota UX ⑥b) */
font-weight: 600; font-size: 1rem;
color: var(--terracota-prof);
font-variant-numeric: tabular-nums;
}
.itinerario__actividad { order: 1; color: var(--cacao-2); }
/* =========================================================
DRESS CODE — gotas de cera
========================================================= */
.dress-code__descripcion { max-width: 46ch; margin: 0 auto var(--esp-4); color: var(--cacao-2); }
.dress-code__colores { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; }
/* Gotas de cera con VOLUMEN: brillo superior (background-image convive con el
background-color inline del motor), sombra interior de curvatura, sombra
cálida presente, y anillo cacao-3 translúcido para que las gotas claras
(marfil) no desaparezcan sobre el papel. */
.dress-code__color {
width: 44px; height: 44px;
border-radius: var(--blob);
background-image: radial-gradient(circle at 34% 28%, rgba(253, 250, 244, .55), transparent 46%);
box-shadow:
inset 0 -5px 9px rgba(74, 52, 44, .24),
0 0 0 1px rgba(131, 101, 79, .55), /* --cacao-3 al 55% */
0 10px 18px -8px rgba(111, 43, 56, .45);
}
/* =========================================================
MESA DE REGALOS — membretes
========================================================= */
.mesa-regalos__mensaje { max-width: 46ch; margin: 0 auto var(--esp-4); color: var(--cacao-2); }
.mesa-regalos__lista { display: grid; gap: var(--esp-3); }
.mesa-regalos__link {
display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
min-height: 52px; padding: 12px var(--esp-4);
background: var(--crema);
border: 1px solid var(--oro-filete); border-radius: var(--radio);
color: var(--vino); font-weight: 600; text-decoration: none;
transition: transform var(--transicion), box-shadow var(--transicion);
}
.mesa-regalos__link::after {
content: "\2197"; /* ↗ */
color: var(--oro-tinta); font-weight: 400; font-size: 1.05rem;
}
.mesa-regalos__link:hover { transform: translateY(-2px); box-shadow: var(--sombra-card); }
/* =========================================================
HOSPEDAJE — tarjetas de cortesía
========================================================= */
.hospedaje__lista { list-style: none; display: grid; gap: var(--esp-4); grid-template-columns: 1fr; }
.hospedaje__item {
padding: var(--esp-4); text-align: center;
background: var(--crema);
border: 1px solid var(--oro-filete); border-radius: var(--radio);
}
.hospedaje__nombre { font-weight: 600; font-size: 1.2rem; color: var(--cacao); margin-bottom: var(--esp-1); }
.hospedaje__direccion { color: var(--cacao-2); margin-bottom: var(--esp-2); }
.hospedaje__tel {
display: inline-block; color: var(--vino); font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
.hospedaje__link { margin-top: var(--esp-3); min-height: 44px; padding: 8px var(--esp-4); font-size: .85rem; }
/* =========================================================
GALERÍA INMERSIVA — full-bleed, scroll-snap nativo
========================================================= */
.galeria {
width: 100vw; max-width: none;
margin: 0 auto var(--esp-8);
margin-inline: calc(50% - 50vw);
text-align: center;
}
.carrusel { position: relative; }
.carrusel__track {
display: flex; gap: 12px;
overflow-x: auto; scroll-snap-type: x mandatory;
scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-inline: 7vw; scroll-padding-inline: 7vw;
padding-block: 10px; /* aire para la sombra cálida */
}
.carrusel__track::-webkit-scrollbar { display: none; }
.carrusel__slide {
flex: 0 0 86vw; scroll-snap-align: center;
aspect-ratio: 4/5; max-height: 72svh;
padding: 6px; background: var(--crema);
border-radius: 4px;
box-shadow: var(--sombra-calida);
transform: scale(.985);
transition: transform var(--transicion);
}
.carrusel__slide:hover, .carrusel__slide:focus-within { transform: scale(1); }
.carrusel__slide img {
width: 100%; height: 100%; object-fit: cover; border-radius: 2px;
}
/* Flechas: solo con puntero fino y pantalla ancha (móvil: swipe nativo) */
.carrusel__nav {
display: none;
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 48px; height: 48px; border-radius: 50%;
border: 1px solid var(--oro-filete); background: var(--crema);
color: var(--vino); font-family: var(--f-texto); font-size: 1.4rem; cursor: pointer;
place-items: center;
transition: background var(--transicion), color var(--transicion);
}
.carrusel__nav:hover { background: var(--vino); color: var(--crema); }
.carrusel__nav--prev { left: 18px; } .carrusel__nav--next { right: 18px; }
/* Dots = gotas de cera (10px visual, área táctil 44px) + contador CSS puro */
.carrusel__dots {
display: flex; justify-content: center; align-items: center;
margin-top: var(--esp-2);
counter-reset: foto-total foto-actual;
}
.carrusel__dot {
position: relative; width: 44px; height: 44px;
background: none; border: 0; padding: 0; cursor: pointer;
counter-increment: foto-total foto-actual;
}
.carrusel__dot::before {
content: ""; position: absolute; top: 50%; left: 50%;
width: 10px; height: 10px;
transform: translate(-50%, -50%);
border-radius: var(--blob);
background: var(--papel-2);
box-shadow: 0 0 0 1px var(--cacao-3);
transition: background var(--transicion), box-shadow var(--transicion);
}
.carrusel__dot.is-active::before { background: var(--vino); box-shadow: 0 0 0 1px var(--vino); }
.carrusel__dot.is-active ~ .carrusel__dot { counter-increment: foto-total; }
.carrusel__dots::after {
content: counter(foto-actual) " / " counter(foto-total);
margin-left: var(--esp-2);
text-transform: uppercase; letter-spacing: var(--ls-2);
font-size: .72rem; color: var(--cacao-3);
}
/* Lightbox: visor cacao inmersivo */
.lightbox {
position: fixed; inset: 0; z-index: 50;
display: flex; align-items: center; justify-content: center;
background: rgba(74, 52, 44, .94);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
opacity: 0; visibility: hidden;
transition: opacity .35s ease, visibility .35s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
max-width: 100vw; max-height: 100svh; object-fit: contain;
transform: scale(.96);
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__cerrar {
position: absolute; top: 14px; right: 14px; z-index: 2;
width: 48px; height: 48px; border-radius: 50%;
border: 0; background: rgba(253, 250, 244, .14);
color: var(--crema); font-family: var(--f-texto); font-size: 1.8rem;
line-height: 1; cursor: pointer;
display: grid; place-items: center;
}
.lightbox__nav {
position: absolute; bottom: 24px; z-index: 2;
width: 48px; height: 48px; border-radius: 50%;
border: 1px solid rgba(253, 250, 244, .3); background: rgba(253, 250, 244, .14);
color: var(--crema); font-family: var(--f-texto); font-size: 1.6rem;
line-height: 1; cursor: pointer;
display: grid; place-items: center;
}
.lightbox__nav--prev { left: calc(50% - 60px); }
.lightbox__nav--next { right: calc(50% - 60px); }
/* Contador del visor: versalitas crema discreta sobre el cacao.
bottom:auto resetea el anclaje inferior del fallback compartido
(sin él la caja queda estirada top→bottom). */
.lightbox__contador {
position: absolute; top: 26px; bottom: auto; left: 50%; transform: translateX(-50%);
text-transform: uppercase; letter-spacing: var(--ls-2);
font-size: .78rem; color: var(--crema-85);
}
body:has(.lightbox.is-open) { overflow: hidden; }
/* =========================================================
RSVP — tarjetón de confirmación (mismo lenguaje que eventos)
========================================================= */
.rsvp {
position: relative;
background: var(--crema);
border: 1px solid var(--oro-filete);
border-radius: var(--radio);
box-shadow: var(--sombra-calida);
padding: var(--esp-5) var(--esp-4) var(--esp-5);
overflow: hidden;
}
.rsvp .divisor { margin-bottom: var(--esp-4); }
.rsvp__nota {
text-transform: uppercase; letter-spacing: var(--ls-2);
font-size: .78rem; color: var(--cacao-3);
margin-bottom: var(--esp-5);
}
.rsvp__form { max-width: 440px; margin: 0 auto; text-align: left; }
.rsvp__auto { margin: calc(-1 * var(--esp-2)) 0 var(--esp-4); font-style: italic; color: var(--terracota-prof); font-size: .95rem; }
.rsvp__bloqueado { margin-top: var(--esp-3); }
.campo { margin-bottom: var(--esp-5); border: none; }
.campo__label {
display: block; margin-bottom: var(--esp-2);
color: var(--oro-tinta); font-size: .7rem; font-weight: 600;
text-transform: uppercase; letter-spacing: var(--ls-2);
}
.campo__input {
width: 100%; padding: var(--esp-2) 2px;
font-family: var(--f-texto); font-size: 1.1rem; color: var(--cacao);
background: transparent; border: none;
border-bottom: 1px solid var(--cacao-3);
border-radius: 0;
transition: border-color var(--transicion);
}
textarea.campo__input {
border: 1px solid var(--cacao-3); border-radius: var(--radio);
padding: var(--esp-2) var(--esp-3); line-height: 1.6;
background: var(--papel);
}
.campo__input::placeholder { color: var(--cacao-3); opacity: .75; }
.campo__input:focus-visible { outline: none; border-color: var(--terracota-prof); }
.rsvp__opciones { display: flex; flex-direction: column; gap: var(--esp-3); }
.rsvp__radio {
display: flex; align-items: center; gap: var(--esp-2); cursor: pointer;
font-style: italic; font-size: 1.05rem; color: var(--cacao-2);
}
.rsvp__radio input { accent-color: var(--vino); width: 1.15em; height: 1.15em; }
.boton {
display: flex; align-items: center; justify-content: center;
width: 100%; min-height: 52px; margin-top: var(--esp-4);
padding: 14px var(--esp-4);
border: 0; border-radius: 999px;
background: var(--vino); color: var(--crema);
font-family: var(--f-texto); font-size: 1.02rem; font-weight: 600;
letter-spacing: .02em; cursor: pointer;
transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton:hover { background: var(--vino-prof); transform: translateY(-2px); box-shadow: var(--sombra-calida); }
.boton:active { transform: scale(.98); box-shadow: none; }
.boton:disabled { opacity: .55; cursor: default; transform: none; }
.rsvp__estado { margin-top: var(--esp-3); text-align: center; font-weight: 600; min-height: 1.4em; }
.rsvp__estado--ok { color: var(--vino); }
.rsvp__estado--error { color: var(--error); }
/* --- Confirmación "WhatsApp directo" (el motor la conmuta por config) ---
Markup real (motor.js initRsvpWhatsapp/repintarRsvpWa):
.rsvp-wa > p.rsvp-wa__intro + nav.rsvp-wa__botones > a.rsvp-wa__boton
y cada ancla YA trae span.rsvp-wa__ico (SVG de WhatsApp en currentColor)
+ span.rsvp-wa__label (con .rsvp-wa__nombre). El microcopy "por WhatsApp"
lo pinta SOLO esta hoja (::after; el motor no lo imprime). */
.rsvp-wa { max-width: 440px; margin: 0 auto; }
/* Intro del motor OCULTO en lacre (veredicto UX ⑥b): el h2 de la sección ya
dice "Confirma tu asistencia" — el intro triplicaba el mensaje. */
.rsvp-wa__intro { display: none; }
.rsvp-wa__botones { display: grid; gap: 12px; }
.rsvp-wa__boton {
display: grid; grid-template-columns: 28px auto;
grid-template-rows: auto auto; column-gap: 12px;
align-items: center; align-content: center; justify-content: center;
min-height: 56px; padding: 14px 22px;
border-radius: 999px; text-decoration: none;
background: var(--vino); color: var(--crema);
font-family: var(--f-texto); font-weight: 600; font-size: 1.05rem;
line-height: 1.3; text-align: left;
transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
/* Ícono del motor: círculo crema translúcido 28px; el SVG hereda currentColor
(crema del ancla) — CERO verde chillón (diseño §6) */
.rsvp-wa__ico {
grid-column: 1; grid-row: 1 / 3;
display: grid; place-items: center;
width: 28px; height: 28px; border-radius: 50%;
background: rgba(253, 250, 244, .18);
}
.rsvp-wa__ico svg { width: 15px; height: 15px; display: block; }
.rsvp-wa__label { grid-column: 2; grid-row: 1; }
.rsvp-wa__boton::after {
content: "por WhatsApp"; grid-column: 2; grid-row: 2;
text-transform: uppercase; letter-spacing: var(--ls-2);
font-size: .68rem; font-weight: 500;
color: var(--crema-85); /* AA sobre vino y sobre terracota-prof */
}
.rsvp-wa__boton:hover { background: var(--vino-prof); transform: translateY(-2px); box-shadow: var(--sombra-calida); }
.rsvp-wa__boton:active { transform: scale(.98); box-shadow: none; }
.rsvp-wa__boton:focus-visible { outline: 3px solid var(--oro-tinta); outline-offset: 3px; }
/* Segunda ancla: terracota profundo (crema encima 6.5:1 AA) */
.rsvp-wa__boton:nth-of-type(2) { background: var(--terracota-prof); }
.rsvp-wa__boton:nth-of-type(2):hover { background: var(--terracota-hover); }
/* =========================================================
SECCIÓN FAMILIA (dinámica, SPEC 0011) — el remitente de la carta
Markup real (motor.js renderFamilia): .ti-sec__cuerpo > div.ti-sec__grupo
(+ --destacado) > h3.ti-sec__grupo-etiqueta + ul.ti-sec__lista > li.
========================================================= */
/* Título de TODA sección dinámica alineado al sistema (versalitas Lora
terracota, como .seccion__titulo); pisa el clamp grande de secciones.css
a igual especificidad porque esta hoja carga después. */
.ti-sec__titulo {
text-transform: uppercase; letter-spacing: var(--ls);
font-weight: 500;
font-size: clamp(1.05rem, 4.5vw, 1.3rem); line-height: 1.5;
}
.ti-sec[data-modulo="familia"] .ti-sec__grupo { padding: 18px 0; }
.ti-sec[data-modulo="familia"] .ti-sec__grupo + .ti-sec__grupo {
/* separador: hairline dorado 96px con gota de cera al centro */
margin-top: 10px; padding-top: 30px;
background:
radial-gradient(circle, var(--vino) 0 4px, transparent 4.5px) top center / 9px 9px no-repeat,
linear-gradient(var(--oro-filete), var(--oro-filete)) top 4px center / 96px 1px no-repeat;
}
.ti-sec__grupo-etiqueta {
display: inline-flex; align-items: center; gap: 12px;
margin-bottom: var(--esp-2);
text-transform: uppercase; letter-spacing: var(--ls-2);
font-size: .78rem; font-weight: 500;
color: var(--oro-tinta);
}
.ti-sec__grupo-etiqueta::before, .ti-sec__grupo-etiqueta::after {
content: ""; width: 28px; height: 1px; background: var(--oro-filete);
}
/* Padres: :not(--destacado) para NO pisar a los hijos (sin el :not, esta
regla de 0,3,1 le ganaba al selector del destacado y los hijos salían
a 1.1rem — hallazgo M3 del revisor UX). */
.ti-sec[data-modulo="familia"] .ti-sec__grupo:not(.ti-sec__grupo--destacado) .ti-sec__lista li {
font-weight: 500; font-size: 1.1rem; line-height: 1.6;
color: var(--cacao); padding: 2px 0;
}
/* Hijos: la posdata protagonista, en Pinyon vino con mini-sello arriba.
Selectores anclados a [data-modulo="familia"] para ganar SIEMPRE a la
regla de padres, independiente del orden. */
.ti-sec[data-modulo="familia"] .ti-sec__grupo--destacado::before {
content: ""; display: block;
width: 22px; height: 22px; margin: 0 auto 10px;
border-radius: var(--blob);
background:
radial-gradient(circle at 50% 46%, var(--oro) 0 3px, transparent 3.5px),
var(--vino);
}
.ti-sec[data-modulo="familia"] .ti-sec__grupo--destacado .ti-sec__grupo-etiqueta::before,
.ti-sec[data-modulo="familia"] .ti-sec__grupo--destacado .ti-sec__grupo-etiqueta::after { content: none; }
.ti-sec[data-modulo="familia"] .ti-sec__grupo--destacado .ti-sec__lista {
display: flex; flex-wrap: wrap; justify-content: center;
column-gap: .55em; row-gap: 2px;
}
.ti-sec[data-modulo="familia"] .ti-sec__grupo--destacado .ti-sec__lista li {
font-family: var(--f-display); font-weight: 400;
font-size: clamp(1.7rem, 8vw, 2.3rem); line-height: 1.25;
color: var(--vino); padding: 0;
}
.ti-sec[data-modulo="familia"] .ti-sec__grupo--destacado .ti-sec__lista li + li::before {
content: "\00B7"; /* · */
font-family: var(--f-texto); color: var(--oro-tinta);
margin-right: .55em;
}
/* =========================================================
MÚSICA (botón flotante) — sello sonoro
El pulso .musica--invita es compartido (secciones.css): no se redefine.
========================================================= */
.musica {
position: fixed; bottom: var(--esp-4); right: var(--esp-4); z-index: 40;
width: 52px; height: 52px; border-radius: 50%;
border: 0; background: var(--vino);
color: var(--crema); cursor: pointer; display: grid; place-items: center;
font-size: 1.25rem;
box-shadow: 0 0 0 1px var(--oro-filete), var(--sombra-calida);
transition: background var(--transicion);
}
.musica:hover { background: var(--vino-prof); }
.musica[aria-pressed="true"] .musica__icono { animation: lacre-girar 4s linear infinite; }
@keyframes lacre-girar { to { transform: rotate(360deg); } }
/* =========================================================
PIE — banda vino a sangre, colofón lacrado
========================================================= */
.pie {
position: relative; text-align: center;
padding: var(--esp-7) var(--esp-4) calc(var(--esp-7) + 70px);
background: var(--vino-prof);
color: var(--crema);
overflow: hidden;
}
.pie::before {
/* grano sobre la banda vino */
content: ""; position: absolute; inset: 0; pointer-events: none;
opacity: .25;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}
.pie > * { position: relative; }
/* Mini-sello del colofón: blob VINO-CLARO (visible sobre la banda vino-prof
en cualquier viewport) + punto oro central + anillo dorado. Sin el fondo
claro y el punto, el blob se confundía con la banda y solo se veía el
anillo "hueco" — hallazgo menor 8 del revisor UX. */
.pie .divisor { background: none; }
.pie .divisor::before {
background:
radial-gradient(circle at 50% 46%, var(--oro) 0 3.5px, transparent 4.5px),
radial-gradient(circle at 38% 30%, rgba(253, 250, 244, .22), transparent 55%),
var(--vino-claro);
box-shadow: inset 0 0 0 2px var(--oro), 0 3px 8px rgba(0, 0, 0, .25);
}
.pie__nombres {
font-family: var(--f-display); font-weight: 400;
font-size: 2.2rem; line-height: 1.2; color: var(--crema);
}
.pie__fecha {
margin: var(--esp-3) 0 var(--esp-2);
text-transform: uppercase; letter-spacing: var(--ls-2);
font-size: .82rem; color: var(--oro); /* texto grande+tracking sobre vino: AA large */
}
.pie__credito { font-size: .8rem; color: var(--crema-85); }
/* =========================================================
BARRA DE PREVIEW (dev)
========================================================= */
.preview {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
background: rgba(74, 52, 44, .96); color: var(--crema);
padding: var(--esp-2) var(--esp-3);
display: flex; gap: var(--esp-3); flex-wrap: wrap; justify-content: center;
font-family: system-ui, sans-serif;
}
.preview__chip {
background: rgba(253, 250, 244, .12); color: var(--crema);
border: 1px solid transparent; padding: 4px 10px; border-radius: 999px;
font-size: .8rem; cursor: pointer;
}
.preview__chip.is-active { background: var(--oro); color: var(--cacao); }
/* =========================================================
PORTADA DE APERTURA (SPEC 0008) — variante SOBRE LACRADO
Sobrescribe el andamiaje de secciones.css por cascada (esta hoja
carga DESPUÉS): fondo papel + viñeta + grano, masthead, y el sobre
(.ti-portada--sobre) con su sello de cera que se despega al abrir.
========================================================= */
.ti-portada {
background:
radial-gradient(58% 46% at 8% 4%, var(--terracota-lav), transparent 62%),
radial-gradient(56% 46% at 94% 96%, var(--terracota-lav), transparent 62%),
var(--papel);
transition: opacity .5s ease .3s; /* paso 3: la capa revela al final */
}
.ti-portada::before {
/* grano de papel de la portada */
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
opacity: .4; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.ti-portada__lienzo { position: relative; z-index: 1; }
.ti-portada__masthead {
display: block;
text-transform: uppercase; letter-spacing: var(--ls);
font-size: .72rem; font-weight: 500;
color: var(--oro-tinta);
}
/* El motor crea el masthead VACÍO (decorativo, aria-hidden: "la plantilla
decide su copy vía CSS" — crearPortada). Copy del diseño §4: */
.ti-portada__masthead::before { content: "Una carta para ti"; }
.ti-portada__titulo {
font-family: var(--f-texto); font-weight: 500;
text-transform: uppercase; letter-spacing: var(--ls-2);
font-size: .95rem; color: var(--cacao-2);
}
.ti-portada__nombre {
font-family: var(--f-display); font-weight: 400;
font-size: clamp(2.6rem, 13vw, 4.4rem); line-height: 1.1;
color: var(--vino);
}
.ti-portada__cta {
min-height: 52px; padding: 14px 34px;
font-family: var(--f-texto); font-weight: 600; font-size: 1.02rem;
}
/* --- El sobre (variante .ti-portada--sobre; SPEC 0008 §4.1.b) ---
El markup lo crea motor.js (montarPortadaSobre): una capa .ti-portada__sobre
como PRIMER hijo del lienzo; dentro, el sello es DIRECTAMENTE
![]()
(PNG por invitación) o
(fallback con el monograma).
secciones.css ya pinta el asset (portada/sobre-beige.webp) y centra el sello
con transform: translate(-50%, -50%). Aquí SOLO se afina: tamaño/sombra
cálida del sobre, sello sobre la PUNTA de la solapa (top 58%, width 29%:
el asset 792×487 trae un embose circular horneado en la punta ≈58% de la
altura — el sello debe CUBRIRLO o se ve "doble sello") y los tiempos de
apertura del diseño §4 — misma especificidad que secciones.css
(0,2,0 / 0,3,0), esta hoja carga después y gana por cascada. */
.ti-portada--sobre .ti-portada__sobre {
width: min(78vw, 400px);
aspect-ratio: 792 / 487; /* proporción real del .webp */
filter: drop-shadow(0 22px 30px rgba(111, 43, 56, .22));
transition: transform .45s ease .2s, opacity .45s ease .2s;
}
/* Geometría común del sello (img o genérico): tapa el embose de la punta.
El centrado translate(-50%,-50%) lo da secciones.css — aquí NO se toca
transform ni se suma la propiedad `translate` (duplicaría el desplazamiento). */
.ti-portada--sobre .ti-portada__sello,
.ti-portada--sobre .ti-portada__sello-generico {
top: 58%;
width: 29%;
transition: transform .35s cubic-bezier(.34, 1.2, .5, 1), opacity .35s cubic-bezier(.34, 1.2, .5, 1);
}
/* Sello PNG subido: la imagen va LIMPIA (sin blob de fondo), solo sombra */
.ti-portada--sobre .ti-portada__sello {
height: auto;
filter: drop-shadow(0 6px 10px rgba(74, 52, 44, .35));
}
/* Fallback sin PNG: blob de cera vino, anillo dorado interior y monograma
Pinyon --oro (texto grande sobre vino = 4.33:1, AA large; diseño §4) */
.ti-portada--sobre .ti-portada__sello-generico {
height: auto;
aspect-ratio: 1;
border-radius: var(--blob);
background:
radial-gradient(circle at 36% 30%, rgba(253, 250, 244, .18), transparent 55%),
var(--vino);
box-shadow: inset 0 0 0 2px rgba(201, 164, 92, .55);
font-family: var(--f-display); font-weight: 400;
font-size: clamp(1.2rem, 6vw, 1.7rem); line-height: 1;
letter-spacing: .02em;
color: var(--oro);
filter: drop-shadow(0 6px 10px rgba(74, 52, 44, .35));
}
/* Micro-idle pre-apertura: el sello levita apenas (solo no-preference).
Los keyframes COMPONEN el centrado de secciones.css (translate -50%,-50%):
un translateY suelto lo pisaría y descolocaría el sello. */
@media (prefers-reduced-motion: no-preference) {
.ti-portada--sobre:not(.ti-portada--abriendo) .ti-portada__sello,
.ti-portada--sobre:not(.ti-portada--abriendo) .ti-portada__sello-generico {
animation: lacre-sello-idle 3.5s ease-in-out infinite alternate;
}
@keyframes lacre-sello-idle {
from { transform: translate(-50%, -50%); }
to { transform: translate(-50%, calc(-50% - 3px)); }
}
}
/* Apertura (≤900ms total, dentro del timeout de respaldo de 1.4s; solo
transform/opacity sobre capas propias, jamás el hero). Mismo estado
--abriendo de secciones.css, con el gesto del diseño §4:
1) el sello se despega 2) el sobre se suelta 3) la capa revela */
.ti-portada--abriendo.ti-portada--sobre .ti-portada__sello,
.ti-portada--abriendo.ti-portada--sobre .ti-portada__sello-generico {
transform: translate(-50%, calc(-50% - 16px)) rotate(-9deg) scale(1.07);
opacity: 0;
}
.ti-portada--abriendo.ti-portada--sobre .ti-portada__sobre {
transform: translateY(44px) rotate(1.5deg) scale(.96);
opacity: 0;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (min-width: 600px) {
/* El tope de 440px del contenedor dejaba columnas de ~208px y el label
envolvía (nota UX ⑥b): a lo ancho del tarjetón cada botón respira. */
.rsvp-wa { max-width: none; }
.rsvp-wa__botones { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
/* Historia: línea al centro, hitos alternados */
.historia__linea { max-width: 640px; padding-left: 0; }
.historia__linea::before { left: 50%; }
.historia__item { width: calc(50% - 36px); padding: 0 0 var(--esp-6); }
.historia__item:nth-child(odd) { margin-right: auto; text-align: right; }
.historia__item:nth-child(odd)::before { left: auto; right: -43px; }
.historia__item:nth-child(even) { margin-left: auto; text-align: left; }
.historia__item:nth-child(even)::before { left: -43px; }
.evento__mapa iframe { height: 340px; }
.hospedaje__lista { grid-template-columns: 1fr 1fr; }
.mesa-regalos__lista { max-width: 480px; margin: 0 auto; }
/* Familia: padres en columnas gemelas; hijos full-width debajo */
.ti-sec[data-modulo="familia"] .ti-sec__cuerpo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px 32px;
align-items: start;
}
.ti-sec[data-modulo="familia"] .ti-sec__grupo + .ti-sec__grupo {
margin-top: 0; padding-top: 18px; background: none;
}
.ti-sec[data-modulo="familia"] .ti-sec__grupo:not(.ti-sec__grupo--destacado):nth-child(even) {
border-left: 1px solid var(--oro-filete);
}
.ti-sec__grupo--destacado { grid-column: 1 / -1; padding-top: var(--esp-4); }
}
@media (min-width: 900px) {
/* Galería de escritorio: slides contenidos + máscara de desvanecido */
.carrusel__slide { flex-basis: min(520px, 44vw); }
.carrusel__track {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
@media (hover: hover) {
.carrusel__nav { display: grid; }
}
.lightbox__nav { bottom: auto; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
}
/* =========================================================
ACCESIBILIDAD — reduce motion
Apaga TODA animación/transición; el contenido queda visible y en
reposo. Las transiciones de la portada las restituye secciones.css
(regla !important de mayor especificidad) para que la revelación no
caiga al timeout de respaldo.
========================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.fade-up, .fade-up > * { opacity: 1; transform: none; transition-delay: 0s; }
.carrusel__track { scroll-behavior: auto; }
.carrusel__slide { transform: none; }
.lightbox__img, .lightbox.is-open .lightbox__img { transform: none; }
}