/* =====================================================================
INVITACIÓN — ESTILOS Y ANIMACIONES
(No hace falta editar este archivo para cambiar colores o textos:
usa css/palette.css y js/config.js.)
===================================================================== */
/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x:hidden DEBE ir aquí (en html), no solo en body: el elemento que
hace scroll de la página es , así que si queda en "visible" el
overflow horizontal de body no frena nada y la página se desplaza de lado
(p. ej. al abrir una pieza de la galería que asoma por el borde). */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
min-height: 100vh;
font-family: var(--font-serif);
color: var(--color-ink);
/* --- Fondo con degradado (comentado para probar la imagen) ---
background:
radial-gradient(120% 90% at 50% 12%, var(--color-bg-soft) 0%, var(--color-bg) 42%, var(--color-bg-deep) 100%);
background-attachment: fixed;
------------------------------------------------------------- */
/* --- Fondo con imagen (prueba) ---
La foto va en la capa body::after (difuminada) para que no se vea
pixelada al ampliarse en pantallas grandes. Aquí solo un color de respaldo. */
background-color: #9ba1ab;
/* clip (no "hidden"): recorta el desborde horizontal IGUAL que hidden, pero
NO convierte a en contenedor de scroll. Con "hidden", se
volvía scroll-container y rompía el position:sticky del collage (la galería
no se anclaba). El recorte horizontal de verdad lo hace (arriba),
así que aunque un navegador viejo ignore "clip", no se desplaza de lado. */
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Bloquea el scroll mientras el sobre está cerrado. */
body.is-sealed { overflow: hidden; height: 100vh; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
/* Grano / textura sobre el fondo (solo el fondo; el contenido va por encima).
Sube o baja --grain-opacity para más o menos grano.
NOTA: el modo "overlay" luce bien sobre el degradado plano, pero sobre una
FOTO recarga el contraste y se ve raro. Por eso está en 0 mientras usamos
la imagen de flores. Si vuelves al degradado, súbelo (p. ej. .38). */
body {
--grain-opacity: 0;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: var(--grain-opacity);
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 150px 150px;
z-index: 0;
}
/* Foto de fondo en una capa fija y LIGERAMENTE difuminada.
El blur disimula el reescalado/compresión del JPEG en pantallas grandes
(se ve nítida-suave, no pixelada). El `inset` negativo evita bordes por el
blur. Para nitidez total: usa una imagen de mayor resolución y pon blur(0). */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
/* Foto en alta resolución -> nítida, sin blur. Un velo tenue ayuda a que
el sobre y la tarjeta resalten. Si la quieres con enfoque suave, añade
filter: blur(2px). */
background:
linear-gradient(rgba(30,28,42,.04), rgba(30,28,42,.12)),
url("../assets/fondo.jpg") center center / cover no-repeat;
}
/* =====================================================================
PARTÍCULAS AMBIENTALES (hojas que flotan)
===================================================================== */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.leaf {
position: absolute;
top: -8vh;
width: 26px;
color: var(--color-accent);
opacity: 0;
animation: leaf-fall linear infinite;
will-change: transform, opacity;
}
@keyframes leaf-fall {
0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
10% { opacity: .5; }
90% { opacity: .5; }
100% { transform: translateY(112vh) translateX(40px) rotate(320deg); opacity: 0; }
}
/* =====================================================================
ESCENA DEL SOBRE (estado cerrado)
===================================================================== */
.envelope-stage {
position: fixed;
inset: 0;
z-index: 40;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
padding: 24px;
perspective: 1600px;
transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), visibility .9s;
}
.envelope-stage.is-gone {
opacity: 0;
transform: scale(1.12);
visibility: hidden;
pointer-events: none;
}
/* --- Sobre (fotos reales) --- */
.envelope {
position: relative;
width: min(92vw, 400px);
aspect-ratio: 840 / 990; /* proporción de las imágenes del sobre */
filter: drop-shadow(0 26px 38px rgba(22, 26, 44, .42));
animation: env-enter 1.1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes env-enter {
from { opacity: 0; transform: translateY(26px) scale(.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (min-width: 480px) { .envelope { width: 390px; } }
/* Las dos fotos del sobre, superpuestas y alineadas: la abierta va debajo,
la cerrada encima y se desvanece al tocar el sello (efecto de apertura). */
.env-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
-webkit-user-drag: none;
user-select: none;
pointer-events: none;
}
/* Cerrado: solo se ve la foto "cerrada". La "abierta" (que es más alta por
la solapa) va oculta hasta abrir; si no, su solapa asoma por arriba. */
.env-open { z-index: 1; opacity: 0; transition: opacity .8s ease; }
.env-closed { z-index: 5; opacity: 1; transition: opacity .8s ease; }
.envelope.is-open .env-open { opacity: 1; }
.envelope.is-open .env-closed { opacity: 0; }
/* La carta que asoma y sube al abrir el sobre */
.env-letter {
position: absolute;
left: 15%;
width: 70%;
top: 40%;
height: 45%;
z-index: 2;
background: linear-gradient(180deg, #fffdf7 0%, var(--color-paper) 100%);
border-radius: 4px;
box-shadow: 0 12px 22px rgba(25, 28, 45, .30);
opacity: 0;
transform: translateY(10%) scale(.96);
transition: transform 1s cubic-bezier(.2,.75,.2,1), opacity .7s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.env-letter-inner { text-align: center; color: var(--color-ink); }
.env-letter-inner .mini-mono {
font-family: var(--font-script);
font-size: 30px;
color: var(--color-terracotta);
line-height: 1;
}
.env-letter-inner .mini-text {
font-family: var(--font-serif);
font-size: 11px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--color-ink-soft);
margin-top: 7px;
}
.envelope.is-open .env-letter {
opacity: 1;
transform: translateY(-56%) scale(1.06);
}
/* =====================================================================
SELLO DE CERA
===================================================================== */
.seal {
position: absolute;
top: 70%; left: 50%; /* sobre la punta de la solapa cerrada */
transform: translate(-50%, -50%);
width: 25%; height: auto; aspect-ratio: 1; /* proporcional al sobre */
z-index: 8;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
animation: seal-breathe 3.4s ease-in-out infinite;
transition: transform .28s ease;
outline-offset: 8px;
}
.seal:focus-visible { outline: 2px dashed var(--color-paper); border-radius: 50%; }
.seal:hover { transform: translate(-50%, -50%) scale(1.05); }
.seal:active { transform: translate(-50%, -50%) scale(.94); }
.seal svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 7px rgba(48,8,6,.5)); }
/* Piezas del sello de cera (todo el color viene de la paleta) */
.seal .wax-hi { stop-color: var(--color-seal-light); }
.seal .wax-mid { stop-color: var(--color-seal); }
.seal .wax-lo { stop-color: var(--color-seal-deep); }
.seal .wax-gloss { fill: #ffffff; opacity: .18; }
.seal .rim-inner { stroke: var(--color-seal-deep); opacity: .4; stroke-width: 1.1; }
/* Texto grabado: copia oscura (fondo del surco) + copia clara desplazada (brillo) */
.seal text { font-family: var(--font-serif); font-weight: 600; }
.seal .eng-dark { fill: var(--color-seal-deep); }
.seal .eng-light { fill: var(--color-seal-emboss); opacity: .55; }
.seal .ring { font-size: 8.6px; letter-spacing: 1.3px; }
.seal .mono { font-size: 28px; letter-spacing: .5px; }
.seal .seal-date { font-size: 6.2px; letter-spacing: 1.1px; }
@keyframes seal-breathe {
0%, 100% { filter: none; }
50% { filter: brightness(1.05); }
}
/* Ruptura del sello: sube, gira y se desvanece */
.seal.is-breaking {
animation: seal-break .7s cubic-bezier(.3,.1,.2,1) forwards;
pointer-events: none;
}
@keyframes seal-break {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
30% { transform: translate(-50%, -50%) scale(.9); opacity: 1; }
100% { transform: translate(-50%, -62%) scale(1.35) rotate(9deg); opacity: 0; }
}
/* Destello al romperse el sello */
.seal-glow {
position: absolute;
top: 70%; left: 50%;
width: 30%; height: auto; aspect-ratio: 1;
transform: translate(-50%, -50%) scale(.5);
border-radius: 50%;
z-index: 7;
pointer-events: none;
opacity: 0;
background: radial-gradient(circle, rgba(255,240,225,.85) 0%, rgba(214,140,90,.35) 45%, rgba(214,140,90,0) 70%);
}
.envelope.is-open .seal-glow { animation: seal-glow .8s ease-out forwards; }
@keyframes seal-glow {
0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
35% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}
/* Indicación "Toca el sello para abrir" */
.open-hint {
font-family: var(--font-serif);
color: var(--color-paper);
letter-spacing: .34em;
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
opacity: .9;
animation: hint-pulse 2.6s ease-in-out infinite;
text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.envelope-stage.is-gone .open-hint { opacity: 0; }
@keyframes hint-pulse { 0%,100% { opacity: .55; } 50% { opacity: .95; } }
/* =====================================================================
LA INVITACIÓN (contenido revelado)
===================================================================== */
.invitation {
position: relative;
z-index: 2;
max-width: var(--letter-max);
margin: 0 auto;
padding: 6vh 20px 40px;
opacity: 0;
transition: opacity 1s ease .15s;
}
.invitation.is-visible { opacity: 1; }
/* Tarjeta de papel hecho a mano (textura de fibra + borde "deckle" rasgado).
El papel vive en ::before, DETRÁS del contenido, así el filtro que rasga los
bordes no deforma el texto (el texto queda nítido encima). */
.paper {
position: relative;
isolation: isolate; /* contiene el z-index del papel */
background: transparent;
padding: clamp(30px, 5vw, 52px) clamp(16px, 3.6vw, 38px);
}
.paper::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: 3px;
/* Textura REAL del papel (extraída de PAPEL 1) en mosaico SIN COSTURAS y
SIN degradado: color y textura uniformes de arriba a abajo, igual que la
imagen. background-size controla el tamaño de la textura. */
background-color: #e2dfd9;
background-image: url("../assets/papel-textura.jpg");
background-repeat: repeat;
background-size: 360px;
/* url(#deckle): rasga los bordes · drop-shadow: sombra con esa misma forma */
filter: url(#deckle) drop-shadow(0 24px 38px rgba(26, 24, 42, .40));
}
/* iOS/iPadOS (Safari WebKit) NO renderiza feDisplacementMap(SourceGraphic):
la capa filtrada sale transparente y la textura del papel se vuelve INVISIBLE.
Como la textura vive aquí, en iPad/iPhone quitamos solo el filtro #deckle (los
bordes quedan rectos) y conservamos textura + sombra. `-webkit-touch-callout`
solo existe en WebKit móvil, así que esto NO afecta a Safari de escritorio ni
a otros navegadores, e igual atrapa al iPad aunque se anuncie como escritorio. */
@supports (-webkit-touch-callout: none) {
.paper::before {
filter: drop-shadow(0 24px 38px rgba(26, 24, 42, .40));
}
}
/* Secciones */
.section { text-align: center; }
.section + .section { border-top: none; }
/* Animación de aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* --- Encabezados y tipografía --- */
.eyebrow {
font-size: clamp(11px, 2.6vw, 13px);
letter-spacing: .38em;
text-transform: uppercase;
color: var(--color-ink-soft);
font-weight: 500;
}
.mono {
font-family: var(--font-script);
color: var(--color-terracotta);
line-height: 1;
}
/* Hero */
.hero .mono-badge {
font-family: var(--font-script);
font-size: clamp(40px, 12vw, 62px);
color: var(--color-terracotta);
line-height: 1;
margin-bottom: 10px;
}
.hero .we-marry {
font-size: clamp(13px, 3.2vw, 15px);
letter-spacing: .42em;
text-transform: uppercase;
color: var(--color-ink-soft);
margin-bottom: 22px;
}
.names {
font-family: var(--font-script);
font-size: clamp(52px, 17vw, 96px);
color: var(--color-ink);
line-height: .98;
margin: 4px 0;
}
.names .amp {
display: block;
font-size: clamp(30px, 9vw, 52px);
color: var(--color-terracotta);
margin: -2px 0;
}
.full-names {
margin-top: 18px;
font-size: clamp(13px, 3.4vw, 16px);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--color-ink-soft);
line-height: 1.9;
}
/* Divisor con hoja */
.divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 26px auto;
color: var(--color-accent);
max-width: 320px;
}
.divider::before, .divider::after {
content: "";
height: var(--hairline);
flex: 1;
background: linear-gradient(90deg, transparent, var(--color-accent));
}
.divider::after { background: linear-gradient(90deg, var(--color-accent), transparent); }
.divider svg { width: 26px; height: 26px; flex: none; }
/* Cuenta regresiva */
.countdown { display: flex; justify-content: center; gap: clamp(10px, 4vw, 30px); flex-wrap: wrap; margin-top: 6px; }
/* Aire entre la cuenta regresiva y las fotos ("recuerdos") de abajo */
.countdown-section { margin-bottom: clamp(28px, 7vw, 56px); }
.cd-box { min-width: 62px; }
.cd-num {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(38px, 11vw, 58px);
color: var(--color-ink);
line-height: 1;
}
.cd-label {
font-size: 14px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--color-ink-soft);
margin-top: 6px;
}
/* Detalles (fecha / hora) */
.detail-grid { display: grid; gap: 22px; margin-top: 8px; }
@media (min-width: 520px) { .detail-grid { grid-template-columns: 1fr 1fr; } }
.detail h3 {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(27px, 6.8vw, 37px);
color: var(--color-ink);
margin: 6px 0 2px;
}
.detail .label {
font-size: 15px; letter-spacing: .3em; text-transform: uppercase;
color: var(--color-terracotta); font-weight: 600;
}
.detail p { color: var(--color-ink-soft); font-size: clamp(18px, 4.4vw, 22px); }
/* Ubicación */
.venue-name {
font-family: var(--font-serif);
font-size: clamp(32px, 8.6vw, 47px);
font-weight: 500;
color: var(--color-ink);
margin: 4px 0 4px;
}
.venue-ref { color: var(--color-ink-soft); font-size: 18px; letter-spacing: .08em; }
/* Botones */
.btn {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 18px;
padding: 13px 26px;
font-family: var(--font-serif);
font-size: clamp(17px, 2.6vw, 21px);
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-paper);
background: var(--color-accent-deep);
border: none;
border-radius: 40px;
text-decoration: none;
cursor: pointer;
transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
box-shadow: 0 8px 18px rgba(50, 60, 40, .28);
}
.btn:hover { transform: translateY(-2px); background: var(--color-accent); box-shadow: 0 12px 24px rgba(50,60,40,.34); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; }
/* =====================================================================
FORMULARIO RSVP
===================================================================== */
.rsvp-form { max-width: 420px; margin: 10px auto 0; text-align: left; }
.field { margin-bottom: 18px; }
.field label {
display: block;
font-size: clamp(14px, 2.9vw, 18px); letter-spacing: .24em; text-transform: uppercase;
color: var(--color-ink-soft); margin-bottom: 8px; font-weight: 600;
}
.field input[type="text"] {
width: 100%;
padding: 13px 16px;
font-family: var(--font-serif);
font-size: clamp(19px, 2.8vw, 22px);
color: var(--color-ink);
background: rgba(255,255,255,.6);
border: 1.5px solid var(--color-envelope-line);
border-radius: var(--radius);
transition: border-color .2s ease, box-shadow .2s ease;
}
.field input[type="text"]:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(125, 139, 106, .2);
}
/* Opciones sí / no */
.choices { display: grid; gap: 12px; }
@media (min-width: 420px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 15px 14px;
text-align: center;
border: 1.5px solid var(--color-envelope-line);
border-radius: var(--radius);
color: var(--color-ink);
font-size: clamp(17px, 2.6vw, 20px);
transition: all .2s ease;
cursor: pointer;
background: rgba(255,255,255,.4);
}
.choice input:hover + span { border-color: var(--color-accent); }
.choice input:checked + span {
border-color: var(--color-accent-deep);
background: var(--color-accent-deep);
color: var(--color-paper);
box-shadow: 0 6px 14px rgba(50,60,40,.24);
}
.choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(125,139,106,.35); }
.form-error {
color: var(--color-terracotta);
font-size: 17px;
margin-top: 10px;
min-height: 18px;
}
.rsvp-form .btn { width: 100%; justify-content: center; margin-top: 8px; }
/* Mensaje de agradecimiento */
.rsvp-thanks { display: none; text-align: center; }
.rsvp-thanks.show { display: block; animation: thanks-in .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes thanks-in { from { opacity: 0; transform: translateY(14px) scale(.96);} to { opacity: 1; transform: none; } }
.rsvp-thanks .tick {
width: 66px; height: 66px; margin: 0 auto 16px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--color-accent-deep);
color: var(--color-paper);
}
.rsvp-thanks .tick svg { width: 30px; height: 30px; }
.rsvp-thanks h3 { font-family: var(--font-script); font-size: clamp(34px,9vw,48px); color: var(--color-terracotta); font-weight: 400; }
.rsvp-thanks p { color: var(--color-ink-soft); margin-top: 6px; font-size: 19px; }
/* Pie */
.footer { text-align: center; padding-top: 12px; }
.footer .foot-mono { font-family: var(--font-script); font-size: 56px; color: var(--color-terracotta); line-height: 1; }
.footer .foot-text { margin-top: 4px; font-size: 15px; letter-spacing: .34em; text-transform: uppercase; color: var(--color-ink-soft); }
/* =====================================================================
BOTÓN DE MÚSICA
===================================================================== */
.music-toggle {
position: fixed;
right: 18px; bottom: 18px;
z-index: 50;
width: 52px; height: 52px;
border-radius: 50%;
border: none;
background: var(--color-accent-deep);
color: var(--color-paper);
cursor: pointer;
box-shadow: 0 8px 20px rgba(40,50,30,.4);
display: grid; place-items: center;
transition: transform .2s ease, background .2s ease;
}
.music-toggle:hover { transform: scale(1.08); background: var(--color-accent); }
.music-toggle svg { width: 22px; height: 22px; }
.music-toggle .icon-pause { display: none; }
.music-toggle.playing .icon-play { display: none; }
.music-toggle.playing .icon-pause { display: block; }
.music-toggle.playing { animation: music-spin 6s linear infinite; }
@keyframes music-spin { to { transform: rotate(360deg); } }
.music-toggle[hidden] { display: none; }
/* =====================================================================
ACCESIBILIDAD — reduce el movimiento
===================================================================== */
@media (prefers-reduced-motion: reduce) {
.leaf { display: none; }
.seal { animation: none; }
.seal.is-breaking { animation: seal-break-reduced .3s ease forwards; }
@keyframes seal-break-reduced { to { opacity: 0; } }
.envelope, .env-flap, .env-letter, .envelope-stage,
.invitation, .reveal, .music-toggle.playing, .seal:hover {
transition-duration: .3s !important;
animation-duration: .3s !important;
}
.music-toggle.playing { animation: none; }
.reveal { transform: none; }
}
/* Pantallas muy pequeñas */
@media (max-width: 360px) {
.envelope { width: min(94vw, 340px); }
}
/* =====================================================================
REDISEÑO DEL CONTENIDO · fuentes Faith / Abhaya / Stindle / Pallace
Tipografía y maquetación limpia. La decoración (flores, washi, fotos,
sellos, paneles) se añade en un siguiente paso.
===================================================================== */
.invitation, .paper { font-family: var(--font-abhaya); }
.paper .section { color: var(--color-ink); }
/* --- Hero --- */
.hero .mono-badge {
font-family: var(--font-faith);
font-size: clamp(30px, 8vw, 44px);
color: var(--color-terracotta);
margin-bottom: 4px;
}
.hero .names {
font-family: var(--font-pallace);
text-transform: uppercase;
letter-spacing: .04em;
font-size: clamp(34px, 10vw, 66px);
line-height: 1.02;
color: var(--color-ink);
margin: 6px 0;
}
.hero .names .amp {
display: inline;
font-size: .78em;
color: var(--color-terracotta);
margin: 0 .1em;
}
.hero .we-marry {
font-family: var(--font-faith);
text-transform: none;
letter-spacing: 0;
font-size: clamp(28px, 7.5vw, 60px);
color: var(--color-terracotta);
margin: 2px 0 16px;
}
.intro {
font-family: var(--font-abhaya);
/* En escritorio el tope antiguo (18px / 46ch) dejaba el texto diminuto y
con muchísimo margen a los lados dentro de una carta de 1040px. */
font-size: clamp(19px, 4.5vw, 30px);
line-height: 1.7;
max-width: 60ch;
/* Margen inferior = 16px del we-marry de arriba, para que el panel quede
centrado entre "¡Nos casamos!" y la etiqueta "fecha". */
margin: 0 auto 40px;
color: var(--color-ink);
/* El texto va relativo para pintar el papel azul en un ::before que queda
POR DEBAJO de las flores del hero (papel z-index:-2 < flores z-index:-1),
así las flores se ven por encima del fondo y el texto por encima de todo. */
position: relative;
padding: clamp(24px, 5vw, 44px) clamp(22px, 5vw, 40px);
border-radius: 14px;
}
.intro::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: url("../assets/deco/papel-azul-fondo.png") center / 100% 100% no-repeat;
border-radius: inherit;
pointer-events: none;
}
/* --- Etiquetas manuscritas ("fecha", "lugar", "Ceremonia"…) --- */
.script-label {
font-family: var(--font-faith);
font-size: clamp(30px, 8vw, 46px);
color: var(--color-terracotta);
line-height: 1;
margin-bottom: 18px;
}
/* --- Display (Stindle Serif) --- */
.display-lg {
font-family: var(--font-stindle);
text-transform: uppercase;
letter-spacing: .02em;
font-size: clamp(28px, 8vw, 46px);
line-height: 1.05;
color: var(--color-ink);
}
.display-md {
font-family: var(--font-stindle);
text-transform: uppercase;
font-size: clamp(30px, 8.5vw, 42px);
color: var(--color-ink);
/* La hora ("5:00 PM") debe ir SIEMPRE en una línea; sin esto, en móvil los
items flex se encogen y parten el "PM" a un renglón nuevo. */
white-space: nowrap;
}
.display-banner {
font-family: var(--font-stindle);
text-transform: uppercase;
letter-spacing: .06em;
font-size: clamp(26px, 8vw, 44px);
color: var(--color-ink);
margin-bottom: 10px;
}
/* --- Cuenta regresiva --- */
.mini-label {
font-family: var(--font-abhaya);
text-transform: uppercase;
letter-spacing: .3em;
font-size: clamp(14px, 3.6vw, 17px);
color: var(--color-ink-soft);
margin-bottom: 8px;
}
.cd-num { font-family: var(--font-stindle); font-weight: 400; color: var(--color-ink); }
.cd-label { font-family: var(--font-abhaya); text-transform: uppercase; letter-spacing: .1em; }
/* --- Ceremonia / Recepción --- */
/* Ceremonia y Recepción SIEMPRE lado a lado (como en la referencia).
Con gap 10vw + min-width 120px no cabían en móvil y se partían en dos filas.
space-evenly reparte el aire de la tira ancha en escritorio; el `gap` sigue
siendo el mínimo, así en pantallas chicas no se juntan. */
.cr-grid { display: flex; justify-content: space-evenly; gap: clamp(10px, 4vw, 70px); flex-wrap: nowrap; margin-bottom: 4px; }
.cr-item { min-width: 96px; }
/* --- Notas / enlaces pequeños --- */
.mini-note {
font-family: var(--font-abhaya);
text-transform: uppercase;
letter-spacing: .12em;
font-size: clamp(15px, 3.2vw, 18px);
margin-top: 12px;
color: var(--color-ink-soft);
}
.mini-note a { text-decoration: underline; }
.notes {
font-family: var(--font-abhaya);
font-size: clamp(16px, 3.9vw, 22px);
line-height: 1.25;
color: var(--color-ink-soft);
margin-top: 14px;
}
/* Dress code: notas "*Evitar..." y "Será en jardín..." en azul marino */
.js-dc-evitar, .js-dc-nota { color: var(--c-navy); }
/* --- RSVP --- */
.rsvp-title {
font-family: var(--font-abhaya);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
font-size: clamp(22px, 6vw, 30px);
color: var(--color-ink);
margin-bottom: 18px;
}
.rsvp-form label, .field label { font-family: var(--font-abhaya); }
.choice span { font-family: var(--font-abhaya); text-transform: uppercase; letter-spacing: .05em; }
/* --- Mesa de regalos --- */
.gift-text {
font-family: var(--font-abhaya);
/* Igual que .intro: el tope de 16px / 44ch se quedaba muy chico y
estrecho dentro del panel verde de 920px. */
font-size: clamp(17px, 4.2vw, 26px);
max-width: 58ch;
margin: 0 auto 14px;
color: var(--color-ink);
}
.gift-store {
font-family: var(--font-abhaya);
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
font-size: clamp(22px, 6vw, 30px);
color: var(--color-ink);
}
.gift-event {
font-family: var(--font-abhaya);
text-transform: uppercase;
letter-spacing: .08em;
font-size: clamp(16px, 3.4vw, 21px);
color: var(--color-ink-soft);
margin-top: 2px;
}
/* --- Botones --- */
.btn { font-family: var(--font-abhaya); text-transform: uppercase; }
.btn.ghost { background: transparent; color: var(--color-accent-deep); border: 1.5px solid var(--color-accent-deep); box-shadow: none; }
.btn.ghost:hover { background: var(--color-accent-deep); color: var(--color-paper); }
/* --- Pie --- */
.footer .foot-names {
font-family: var(--font-pallace);
text-transform: uppercase;
letter-spacing: .04em;
font-size: clamp(37px, 9vw, 72px);
line-height: 1.05;
color: var(--color-ink);
}
.footer .foot-date {
font-family: var(--font-stindle);
text-transform: uppercase;
letter-spacing: .1em;
font-size: clamp(32px, 8.5vw, 68px);
color: var(--color-terracotta);
margin-top: 2px;
}
.footer .script-label { margin-top: 8px; }
/* =====================================================================
DECORACIÓN · imágenes del scrapbook (flores, washi, sellos, paneles)
Las decorativas no bloquean clics y van DETRÁS del texto (z-index:-1).
Todo es ajustable: tamaños con clamp(), posiciones con top/left/rotate.
===================================================================== */
.paper .section { position: relative; z-index: 0; }
.deco { position: absolute; z-index: -1; pointer-events: none; user-select: none; height: auto; }
/* --- Hero: monograma (copa) + flores --- */
.hero-mono { display: block; width: clamp(64px, 15vw, 157px); height: auto; margin: 0 auto 8px; padding-bottom: 19px; }
.flor-hero-tl { width: clamp(56px, 15vw, 96px); top: -10px; left: -6px; transform: rotate(-8deg); }
.flor-hero-tr { width: clamp(46px, 12vw, 78px); top: 4px; right: -4px; transform: rotate(10deg); }
.flor-hero-bl { width: clamp(38px, 10vw, 62px); bottom: -4px; left: 2px; transform: rotate(6deg); }
/* --- Nota de calendario bajo la fecha --- */
.deco-calendar {
display: block; width: clamp(180px, 56vw, 250px); height: auto;
margin: 16px auto 0; transform: rotate(-2deg);
filter: drop-shadow(0 8px 14px rgba(40,30,20,.22));
}
/* --- Sello de la capilla (lugar) --- */
.deco-capilla { width: clamp(92px, 26vw, 146px); top: -30px; right: 4%; transform: rotate(4deg); }
/* --- Washi tras Ceremonia / Recepción --- */
/* La tira mide ~63% de la tarjeta en la referencia (no se ajusta al texto):
`min(100%, 660px)` la deja ancha en escritorio y a todo lo ancho en móvil. */
.cr-wrap {
position: relative; display: inline-block;
padding: 20px clamp(12px, 4vw, 30px); margin-bottom: 6px;
width: min(100%, 660px);
background: url("../assets/deco/washi-cr.png") center / 100% 100% no-repeat;
}
/* --- Icono de ubicación dentro del botón "Cómo llegar" --- */
.btn-ico { width: 14px; height: auto; margin-right: 6px; vertical-align: -2px; display: inline-block; }
/* --- Dress code: banner de rayas ---
En la referencia ocupa ~77% de la tarjeta, bastante más ancho que el texto. */
.banner-washi {
display: inline-block; padding: 12px 34px; color: #fff8ee;
width: min(100%, 810px);
background: url("../assets/deco/washi-dresscode.png") center / 100% 100% no-repeat;
}
/* --- Fila de colores sugeridos (6 flores) --- */
.color-row {
display: flex; justify-content: center; align-items: flex-end;
gap: clamp(2px, 1.4vw, 8px); flex-wrap: nowrap;
margin: 12px auto 18px; max-width: 440px;
}
.color-row img { width: clamp(40px, 13vw, 64px); height: auto; }
/* En escritorio agrandamos las flores de color; subimos también el max-width
del contenedor para que quepan sin encoger (flex-shrink las reduciría). */
@media (min-width: 769px) {
.color-row { max-width: 640px; }
.color-row img { width: 130px; }
}
/* --- Galería de fotos (polaroids) --- */
.gallery {
display: flex; justify-content: center; align-items: flex-start;
gap: clamp(10px, 4vw, 26px); flex-wrap: wrap; margin-bottom: 18px;
}
.gallery .polaroid { width: clamp(130px, 38vw, 200px); height: auto; filter: drop-shadow(0 12px 18px rgba(30,28,45,.3)); }
.gallery .polaroid:nth-child(1) { transform: rotate(-3deg); }
.gallery .polaroid:nth-child(2) { transform: rotate(2deg); margin-top: 18px; }
/* --- Panel del RSVP (marco verde + monograma) ---
Antes todo iba en una sola imagen estirada con background-size:100% 100%,
que deformaba el monograma en móvil (la caja es mucho más alta que la imagen
original). Ahora se separan las dos cosas:
· el MARCO va como border-image (9-slice) -> las esquinas no se deforman y
solo se estira el borde verde plano, con grosor uniforme a cualquier alto;
· el MONOGRAMA (mono-rsvp.png) va aparte en ::before, con su proporción
intacta (aspect-ratio fijo). */
#rsvp {
--frame: clamp(12px, 3.4vw, 20px);
position: relative;
border: var(--frame) solid transparent;
border-image: url("../assets/deco/panel-rsvp-frame.png") 16 fill / 1 / 0 stretch;
padding: clamp(30px, 7vw, 58px) clamp(16px, 5vw, 38px);
}
/* Escudito "MS": centrado arriba, asomando ~25% por encima del marco, como el
original. Ancho relativo al panel; aspect-ratio para que nunca se estire. */
#rsvp::before {
content: "";
position: absolute;
left: 50%;
top: calc(-1 * var(--frame)); /* sube al borde exterior del marco */
width: clamp(32px, 9%, 56px);
aspect-ratio: 79 / 96;
transform: translate(-50%, -25%);
background: url("../assets/deco/mono-rsvp.png") center / contain no-repeat;
z-index: 3;
pointer-events: none;
}
/* --- Panel del pie (bloque azul) --- */
.footer {
background: url("../assets/deco/panel-footer.png") center / cover no-repeat;
padding: clamp(38px, 8vw, 58px) 20px;
border-radius: 6px;
overflow: hidden;
}
.footer .foot-names { color: #2c2f54; }
.footer .foot-date { color: #3b406a; }
.footer .script-label { color: #4a4f7c; }
/* =====================================================================
AJUSTES SEGÚN LA REFERENCIA · fuentes, colores y tamaños
(Bloque final: sobrescribe lo anterior para acercarse a INVI.png.)
===================================================================== */
/* Nombres de los novios: Stindle Serif (NO Pallace), rosa apagado, grandes */
.hero .names, .footer .foot-names { font-family: var(--font-stindle); letter-spacing: .015em; }
.hero .names {
color: var(--c-rose-name);
font-size: clamp(32px, 9.5vw, 60px);
line-height: 1.0;
}
.hero .names .amp { font-size: .92em; color: var(--c-rose-name); margin: 0 .08em; }
/* Rosa/magenta: etiquetas manuscritas, fecha, cuenta regresiva, RSVP */
.hero .we-marry,
.script-label,
.display-lg,
.mini-label,
.cd-num,
.cd-label,
.rsvp-title { color: var(--c-rose); }
/* Periwinkle: intro, HACIENDA (lugar), enlaces */
.intro { color: var(--c-navy); }
.display-lg.blue { color: var(--c-blue); }
/* Naranja: horarios (Ceremonia / Recepción) */
.display-md { color: var(--c-orange); }
/* Naranja también en las etiquetas "Ceremonia" y "Recepción" (no en "lugar") */
.cr-item .script-label { color: var(--c-orange); }
/* Olivo: Mesa de Regalos y Liverpool */
.display-banner { color: var(--c-olive); }
.gift-store { color: var(--c-olive); }
/* Dress code: crema sobre el banner de rayas (va DESPUÉS para ganar) */
.banner-washi { color: #fff8ee; }
/* Botones periwinkle (como en la referencia) */
.btn { background: var(--c-blue); color: #fff8ee; box-shadow: 0 8px 18px rgba(70, 80, 150, .28); }
.btn:hover { background: #4d5aa0; }
.btn.ghost { background: transparent; color: var(--c-blue); border: 1.5px solid var(--c-blue); }
.btn.ghost:hover { background: var(--c-blue); color: #fff8ee; }
.mini-note a { color: var(--c-blue); }
/* Tamaños un poco mayores para acercarse a la referencia */
.display-lg { font-size: clamp(30px, 8.6vw, 50px); }
.display-banner { font-size: clamp(37px, 10vw, 68px); }
/* Pie (sobre el panel azul) */
.footer .foot-names { color: var(--c-navy); }
.footer .foot-date { color: #6a74a8; }
.footer .script-label { color: #6a74a8; }
/* --- Carta (PRIMER PAPEL) que asoma al abrir el sobre --- */
.env-letter {
left: 22%; width: 56%; top: 34%; height: auto;
background: none; box-shadow: none; padding: 0; border-radius: 0;
display: block;
}
.env-letter-img {
width: 100%; height: auto; display: block;
filter: drop-shadow(0 14px 24px rgba(25, 28, 45, .32));
}
.envelope.is-open .env-letter { transform: translateY(-42%) scale(1.05); }
/* =====================================================================
AJUSTES 2 · galería (collage), mesa de regalos, RSVP, fotos, posiciones
===================================================================== */
/* =====================================================================
GALERÍA · collage por capas con animación de SCROLL
---------------------------------------------------------------------
El collage arranca ARMADO (idéntico a la referencia "collage full"):
14 piezas apiladas dentro de un lienzo con la proporción 561x806.
Cada pieza se coloca por su CENTRO en % del lienzo (--cx, --cy), con su
ancho en % (--w) y su giro de reposo (--r0). Al hacer scroll, main.js
escribe un progreso 0..1 en --P (en #galeria) y un progreso individual
--p en cada pieza que se abre; las piezas de arriba vuelan hacia afuera
(--dx, --dy, --dr) en secuencia y descubren las del fondo (collage-1 y
Pedida). Sin JS el collage se ve igual, pero armado y quieto.
PARA AJUSTAR una pieza: cambia sus % en el bloque .l-* de más abajo.
· --cx/--cy : centro (en % del lienzo). (posición)
· --w : ancho (en % del ancho del lienzo). (tamaño)
· --r0 : giro de reposo (grados, + = horario).
· --dx/--dy : cuánto vuela al abrirse (en % de SU tamaño).
· --dr : giro extra al abrirse.
===================================================================== */
.galeria {
--P: 0; /* progreso global 0..1 (lo escribe main.js) */
--collage-runway: 90vh; /* cuánto scroll dura la "apertura" anclada */
/* Aire arriba/abajo del bloque anclado para que NO se pegue (ni monte) con
Dress Code (arriba) ni RSVP (abajo). */
}
/* .collage-pin da el ALTO extra: mientras se recorre, el collage queda anclado
(sticky) y el scroll "sobrante" es el que abre las piezas. Al terminar ese
recorrido, se suelta y el scroll sigue normal.
Alto total = una ventana (lo que se ancla) + el recorrido de apertura. */
.collage-pin {
position: relative;
height: calc(100vh + var(--collage-runway, 90vh));
}
/* La pieza que se ANCLA: ocupa la ventana y centra el collage. Mientras está
pegada arriba, el collage se ve quieto y centrado aunque sigas bajando. */
.collage-sticky {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(8px, 2vh, 18px);
}
/* Lienzo del collage. Se limita por el ancho de la columna, por la ALTURA de
la ventana (para que quepa entero al anclarse) y por un tope duro. Más grande
que antes: aprovecha casi toda la altura de la ventana. */
.collage-stage {
position: relative;
width: min(100%, calc(86vh * 561 / 806), 620px);
aspect-ratio: 561 / 806;
margin: 0 auto;
}
/* Cada pieza. La posición (left/top al CENTRO) + translate(-50%,-50%) deja el
centro exactamente en (--cx,--cy). Encima se compone el desplazamiento de
apertura (--dx,--dy escalados por --p) y el giro (--r0 + --dr*--p). */
.c-layer {
position: absolute;
left: var(--cx); top: var(--cy);
width: var(--w);
transform-origin: 50% 50%;
transform:
translate(-50%, -50%)
translate(calc(var(--dx, 0%) * var(--p, 0)), calc(var(--dy, 0%) * var(--p, 0)))
rotate(calc(var(--r0, 0deg) + var(--dr, 0deg) * var(--p, 0)))
scale(var(--s, 1));
filter: drop-shadow(0 1px 11px rgba(30, 28, 45, .30));
}
.c-layer.is-open { will-change: transform; }
.c-layer img {
display: block; width: 100%; height: auto;
-webkit-user-drag: none; user-select: none;
}
/* Piezas del FONDO: no vuelan. Se ven a tamaño y opacidad PLENOS desde el
inicio (como en la referencia: la Pedida oscura asoma por abajo, con el
sello-jalapeño encima); las de arriba se apartan y las descubren del todo. */
.c-layer.is-under { opacity: 1; }
/* Posición (armado) + vector de apertura de cada pieza.
El orden de apilado (fondo -> encima) es el orden del DOM en index.html.
Pedida es grande y va casi al fondo (solo la tapan collage-foto, poema,
ceboia y el sello-jalapeño, que queda ENCIMA de ella). */
.l-pedida { --cx: 62%; --cy: 76%; --w: 62%; --r0: -1deg; }
.l-collage1 { --cx: 28%; --cy: 59%; --w: 40%; --r0: -2deg; }
.l-fondo { --cx: 58%; --cy: 34%; --w: 60%; --r0: -3deg; --dx: 8%; --dy: -100%; --dr: -8deg; }
.l-salmo { --cx: 27%; --cy: 39%; --w: 31%; --r0: -4deg; --dx: -20%; --dy: -120%; --dr: -12deg; }
.l-mariana { --cx: 20%; --cy: 85%; --w: 24%; --r0: 3deg; --dx: 5%; --dy: 25%; --dr: -14deg; }
.l-ceboia { --cx: 82%; --cy: 55%; --w: 23%; --r0: 6deg; --dx: 12%; --dy: -100%; --dr: 18deg; }
.l-arbol { --cx: 31%; --cy: 85%; --w: 17%; --r0: 0deg; --dx: -120%; --dy: 72%; --dr: -18deg; }
.l-foto { --cx: 50%; --cy: 53%; --w: 43%; --r0: 1deg; --dx: -30%; --dy: -80%; --dr: -6deg; }
.l-ms { --cx: 33%; --cy: 47%; --w: 20%; --r0: -3deg; --dx: -70%; --dy: -370%; --dr: -24deg; }
.l-barca { --cx: 78%; --cy: 18%; --w: 22%; --r0: 6deg; --dx: -20%; --dy: -10%; --dr: 28deg; }
.l-onepiece { --cx: 85%; --cy: 28%; --w: 15%; --r0: 2deg; --dx: -140%; --dy: 60%; --dr: 24deg; }
.l-motomami { --cx: 29%; --cy: 70%; --w: 11%; --r0: 0deg; --dx: -150%; --dy: 115%; --dr: -28deg; }
.l-jalapeno { --cx: 84%; --cy: 83%; --w: 20%; --r0: -20deg; --dx: -100%; --dy: 128%; --dr: 30deg; }
.l-poema { --cx: 65%; --cy: 71%; --w: 30%; --r0: 1deg; --dx: 80%; --dy: 120%; --dr: 12deg; }
/* Pista "Desliza para descubrir": se desvanece a medida que el collage se abre. */
.collage-hint {
margin: clamp(14px, 3vh, 26px) auto 0;
text-align: center;
font-family: var(--font-abhaya, serif);
letter-spacing: .14em;
text-transform: uppercase;
font-size: clamp(11px, 2.6vw, 13px);
color: var(--c-blue, #6a6f86);
opacity: calc(1 - 1.9 * var(--P, 0));
pointer-events: none;
}
/* En pantallas anchas dejamos algo más de lienzo. */
@media (min-width: 900px) {
.collage-stage { width: min(100%, calc(90vh * 561 / 806), 680px); }
}
/* Accesibilidad: si el sistema pide menos movimiento, NO anclamos ni animamos:
el collage se muestra ARMADO y quieto, en flujo normal (main.js tampoco
engancha el scroll). Misma desactivación con la clase .collage-static, que
main.js pone como respaldo. */
@media (prefers-reduced-motion: reduce) {
.collage-pin { height: auto; }
.collage-sticky { position: static; height: auto; padding: clamp(20px, 5vh, 60px) 0; }
.collage-hint { display: none; }
}
.galeria.collage-static .collage-pin { height: auto; }
.galeria.collage-static .collage-sticky { position: static; height: auto; padding: clamp(20px, 5vh, 60px) 0; }
.galeria.collage-static .collage-hint { display: none; }
.galeria.collage-static .c-layer.is-under { --s: 1; opacity: 1; }
/* =====================================================================
GALERÍA · MÓVIL vs ESCRITORIO
---------------------------------------------------------------------
En MÓVIL se muestra el collage por capas vertical (arriba, .collage-stage).
En ESCRITORIO ese collage se veía pequeño, así que mostramos el COLLAGE POR
CAPAS horizontal (.desktop-collage, 2041x1380, llena mejor el ancho). Ambos
van dentro del mismo anclaje (.collage-pin/.collage-sticky) y los mueve el
mismo scroll: solo cambia cuál se ve y cómo se anima (el móvil vuela las
piezas; el escritorio desvanece las capas de arriba). Corte en 769px.
===================================================================== */
.only-desktop { display: none; } /* por defecto (móvil): oculto */
@media (min-width: 769px) {
.collage-stage.only-mobile { display: none; } /* escritorio: collage móvil oculto */
.desktop-collage.only-desktop { display: block; } /* escritorio: collage por capas visible */
}
/* El collage de escritorio: 3 capas del mismo lienzo (2041x1380) apiladas en el
mismo hueco. Bastante grande para que no se vea pequeño; el tope por altura
(86vh) evita que se salga de la ventana cuando queda anclado. */
.desktop-collage {
position: relative;
width: min(100%, calc(86vh * 2041 / 1380), 880px);
aspect-ratio: 2041 / 1380; /* fija la altura -> el apilado es estable */
margin: 0 auto;
}
/* Las 3 capas ocupan EXACTAMENTE el mismo rectángulo (inset:0), así quedan
perfectamente registradas una sobre otra. El orden del DOM (3 -> 2 -> 1) da el
apilado: LAYER 3 abajo, LAYER 1 arriba. */
.dcol-layer {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: contain;
-webkit-user-drag: none; user-select: none;
}
/* La capa de más abajo (LAYER 3) lleva la sombra que apoya todo el collage sobre
el papel; las de encima son superposiciones que solo se desvanecen. */
.dcol-3 { filter: drop-shadow(0 14px 22px rgba(30, 28, 45, .25)); }
/* Capas superiores (LAYER 2 y LAYER 1): se DESVANECEN con el scroll. main.js
escribe --p (0->1) en cada una, escalonado, y la opacidad baja de 1 a 0.
LAYER 3 no lleva .is-fade -> siempre visible. */
.dcol-layer.is-fade { opacity: calc(1 - var(--p, 0)); will-change: opacity; }
/* --- RSVP: campos crema con borde dorado y texto rosa (como la referencia) --- */
#rsvp .field label { color: var(--c-rose); }
#rsvp .field input[type="text"] { background: rgba(255,255,255,.55); border-color: var(--color-gold); color: var(--c-rose); }
#rsvp .field input[type="text"]::placeholder { color: rgba(192,78,129,.55); }
#rsvp .choice span { background: rgba(255,255,255,.42); border-color: var(--color-gold); color: var(--c-rose); }
#rsvp .choice input:checked + span { background: var(--c-rose); border-color: var(--c-rose); color: #fff8ee; }
#rsvp .choice input:hover + span { border-color: var(--c-rose); }
/* --- Mesa de regalos: solo COLORES del texto.
El panel (papel verde + perritos + washi + flor) se arma al final,
en el bloque "MESA DE REGALOS · capas sueltas". --- */
.mesa-title { color: #A3233B } /* azul periwinkle */
.regalos .gift-text { color: #fbf7ec; } /* texto claro sobre verde */
.liverpool-strip .gift-store,
.liverpool-strip .gift-event { color: #A3233B }
/* --- Fotos sueltas (polaroids) a los lados --- */
.foto-cd { width: clamp(88px, 24vw, 140px); top: -6px; right: -5%; transform: rotate(4deg); }
/* FOTO 2 — como en la referencia (INVI): polaroid GRANDE y CENTRADA, en flujo y
por DELANTE del texto, con la FLOR AZUL asomando en la esquina superior
derecha. Antes era un .deco pequeño (~23%) detrás del texto.
El .foto2-wrap fija el tamaño a ~60%: como el PNG trae ~14% de margen
transparente alrededor, la parte VISIBLE del polaroid queda en ~48% del
ancho, igual que en el original. Sube/baja el 60% para escalar todo (foto +
flor juntas). */
.foto2-wrap {
position: relative;
width: clamp(250px, 60%, 580px);
/* Margen inferior algo mayor: deja sitio para que la flor roja asome por la
esquina inferior izquierda sin pisar la sección de abajo (Dress Code). */
margin: 44px auto 52px;
}
.foto-cll {
display: block;
width: 100%;
height: auto;
/* El PNG viene torcido ~-4°. La referencia lo endereza a ~-1.4° (apenas
perceptible), así que le sumamos +2.7° para dejarlo en ese ángulo sutil. */
transform: rotate(2.7deg);
pointer-events: none;
user-select: none;
}
/* Flores en las esquinas del polaroid (como en la referencia): AZUL arriba-
derecha y ROJA abajo-izquierda. Van como hermanas (por delante del polaroid) y
no heredan su giro. Ajusta width y top/right/bottom/left para reubicarlas. */
.foto2-flor {
position: absolute;
pointer-events: none;
user-select: none;
filter: drop-shadow(0 4px 6px rgba(30, 28, 45, .25));
}
.foto2-flor--blue { top: 1%; right: -8%; width: 34%; transform: rotate(12deg); }
/* Roja: baja hasta la esquina inferior IZQUIERDA del polaroid (que por el
margen transparente del PNG + el giro queda en ~4% desde abajo/izq). El
bottom negativo la deja montada sobre la esquina, asomando abajo-izq. */
.foto2-flor--red { bottom: -6%; left: -14%; width: 38%; transform: rotate(-6deg); }
/* --- Reposición de flores/sellos (aprox. a la referencia) --- */
.flor-hero-tl { top: 45%; left: -4%; width: clamp(130px, 34vw, 150px); transform: rotate(-8deg); }
.flor-hero-tr { top: 50%; right: -4%; width: clamp(100px, 28vw, 190px); transform: rotate(10deg); }
.flor-hero-bl { bottom: -110px; left: 2px; width: clamp(78px, 22vw, 150px); transform: rotate(6deg); }
/* La sección "lugar" se pinta por ENCIMA de las vecinas: así el sello grande
queda sobre la tira washi de Ceremonia/Recepción (como en la referencia) y
las fotos de "recuerdos" dejan de taparle la palabra HUAXTLA. */
/* OJO: el sello NO debe subir por encima de la sección de abajo. En escritorio
la parte que se cruza con la tira de Ceremonia/Recepción es transparente, pero
en móvil la tira ocupa casi todo el ancho y el sello taparía "Ceremonia" y
"5:00 PM". Dejándolo detrás, en móvil se mete bajo la tira y todo se lee. */
/* En la referencia "HACIENDA DE HUAXTLA" va sobre una tira de washi. Sin ella
el nombre cae directamente encima de la foto de "recuerdos" y no se lee. */
.lugar .display-lg {
display: block;
padding: 10px clamp(12px, 3vw, 28px);
background: url("../assets/deco/washi-cr.png") center / 100% 100% no-repeat;
}
/* Sello de la capilla (sello azul + sello redondo + flor naranja, todo en la
misma imagen). En la referencia mide 427px sobre una tarjeta de 1200 =
35.6% del ancho, y cuelga por la izquierda al lado de Ceremonia/Recepción.
Estaba puesto a 146px (15%), casi 2.4 veces más chico de lo que debe. */
.deco-capilla {
/* MÓVIL: el sello queda ENTRE "Hacienda de Huaxtla" (.js-lugar, arriba) y la
tira de Ceremonia/Recepción (.cr-wrap, en la sección de abajo). Como esas dos
van pegadas, abrimos un hueco con `.lugar{margin-bottom}` (más abajo, en el
bloque móvil) y el sello cae centrado dentro de ese hueco. */
top: 70%;
left: 50%; right: auto;
width: clamp(88px, 60%, 190px);
transform: translate(-50%, 6px) rotate(-4deg);
}
@media (min-width: 769px) {
/* La sección "lugar" se pinta por ENCIMA de sus vecinas: así el sello puede
quedar SOBRE la tira de Ceremonia/Recepción (que va en la sección de abajo)
y las fotos de "recuerdos" dejan de taparle "HUAXTLA". (Especificidad alta
para ganarle a `.paper .section{z-index:0}`.) */
.paper .section.lugar { z-index: 3; }
.deco-capilla {
/* ESCRITORIO: el sello baja y queda SOBRE la tira .cr-wrap. */
top: 92%;
left: 3%; right: auto;
width: clamp(180px, 24%, 320px);
transform: rotate(-4deg);
}
}
/* =====================================================================
AJUSTES 3 · feedback específico + referencia
===================================================================== */
/* Nombres MUY grandes y en dos líneas: "MARIANA Y" arriba, "SEBASTIAN" abajo.
El segundo nombre (js-novio-nombre) en display:block cae a su propia línea;
el amp (Y) se queda con el primer nombre. line-height apretado para juntar
las dos líneas. */
.hero .names {
font-size: clamp(48px, 9vw, 120px);
line-height: .95;
overflow-wrap: break-word;
/*
trae font-weight:bold del navegador, pero Stindle solo tiene peso
normal -> el navegador finge la negrita (faux-bold) y engrosa los trazos.
Con 400 usamos la Stindle real, igual de fina que .display-lg. */
font-weight: 400;
}
.hero .names .js-novio-nombre { display: block; }
.hero .names .amp { font-size: .9em; }
/* Tamaño de reserva conservador (sin cortar) antes de que el JS mida y ajuste
los nombres al ancho real del papel; con JS este valor se sobrescribe. */
@media (max-width: 768px) {
.hero .names { font-size: clamp(28px, 9vw, 96px); }
/* En móvil el hero es más alto y las flores de arriba (base: 45%/50%)
quedaban demasiado abajo. Las subimos manteniendo su desfase. */
/* La flor amarilla (arriba-izq) se veía demasiado grande en móvil: la
achicamos respecto al tamaño de escritorio (clamp(130px,34vw,150px)). */
.flor-hero-tl { top: 30%; width: clamp(78px, 22vw, 112px); }
.flor-hero-tr { top: 35%; }
/* En móvil "Huaxtla" (.js-lugar) y la tira de Ceremonia/Recepción (.cr-wrap)
van pegadas: abrimos un hueco entre las dos secciones para que el sello de
la capilla quede claramente EN MEDIO (y no tapado por la tira). El hueco
sigue al tamaño del sello (misma clamp que su width, x1.28 ~ su alto + aire),
así queda centrado con la misma holgura en cualquier móvil. */
.lugar { margin-bottom: calc(clamp(88px, 35%, 130px) * 1.28); }
/* Horas de Ceremonia/Recepción más pequeñas en móvil (base: clamp(30px,8.5vw,42px)). */
.display-md { font-size: clamp(22px, 6.4vw, 28px); }
/* El collage (vertical) es más chico que la ventana; centrado en los 100vh del
sticky dejaba un hueco enorme ARRIBA (entre Dress Code y el collage). Bajamos
la altura del área anclada para subirlo y recortar ese hueco, dejando aire
para que las piezas "vuelen" al abrirse. (El recorrido lo mide main.js con la
ventana real, así que la animación no cambia.) */
.collage-sticky { height: 80vh; }
/* Botones "Ver mesa": van dos por fila en columnas estrechas, así que los
hacemos compactos para que "Ver mesa" quepa en UNA línea (con nowrap) sin
desbordar su columna. Menos alto también. */
.regalos .btn { padding: 9px 15px; font-size: clamp(13px, 3.6vw, 16px); letter-spacing: .08em; }
}
.display-lg { font-size: clamp(17px, 4vw, 48px); overflow-wrap: break-word; }
/* Sobre (cerrado y abierto) más grande en escritorio */
@media (min-width: 480px) { .envelope { width: 440px; } }
/* Cómo llegar: pin ARRIBA del botón; botón claro con texto azul.
`display: flex` (de bloque, NO inline-flex): así el botón cae DEBAJO de
Ceremonia/Recepción. Siendo inline-flex, en escritorio cabían los dos en
la misma línea y el botón se ponía al lado, no abajo como en la referencia. */
.como-wrap {
display: flex; flex-direction: column; align-items: center; gap: 6px;
width: fit-content; margin: 16px auto 0;
}
.pin-above { width: 47px; height: auto; display: block; }
.btn-como { background: #cdd2ee; color: var(--c-blue); box-shadow: 0 6px 14px rgba(70,80,150,.2); margin-top:0}
.btn-como:hover { background: #bcc3e6; color: var(--c-blue); }
/* Tablero Pinterest: naranja con letras rojas */
.btn-pinterest { background: var(--c-orange); color: #c8302a; }
.btn-pinterest:hover { background: #cf6630; color: #b02018; }
/* (El espaciado de .galeria ahora lo maneja su propio bloque, arriba, con el
padding que necesita el collage animado para "respirar" al abrirse.) */
/* Recuerdos: calendario (izq) + fotos GOOD TIMES (der, más grandes);
la parte de abajo de las fotos queda detrás de la sección "lugar". */
.recuerdos-row { display: flex; align-items: flex-start; justify-content: center; gap: clamp(6px, 1.6vw, 16px); flex-wrap: wrap; }
.rec-cal { width: clamp(210px, 44%, 450px); height: auto; transform: rotate(-2deg); filter: drop-shadow(0 8px 14px rgba(40,30,20,.22)); }
/* Las fotos son grandes y su parte de abajo se mete detrás de la sección "lugar" */
.rec-fotos { width: clamp(230px, 44%, 440px); height: auto; margin-bottom: -260px; filter: drop-shadow(0 12px 18px rgba(30,28,45,.28)); }
/* En móvil las fotos ocupan casi todo el ancho, así que el margen negativo de
-260px hacía que la sección "lugar" se montara ENCIMA de los recuerdos. Lo
anulamos para que "lugar" caiga limpio DEBAJO de las fotos. Va después de la
regla base (misma especificidad) para que gane por orden de origen. */
@media (max-width: 768px) {
.rec-fotos { margin-bottom: 12px; margin-left: 15px;}
}
/* Pie: "acompáñanos a celebrar" en blanco */
.footer .script-label { color: #ffffff; }
/* =====================================================================
MESA DE REGALOS · capas sueltas (antes era UNA sola imagen plana)
---------------------------------------------------------------------
Piezas (todas en assets/deco/):
papel-verde.png -> fondo del panel
perros-clips.png -> los 3 perritos, colgados del borde de arriba
washi-liverpool.png -> tira de papel para "Liverpool"
boton-flor.png -> flor que abrocha esta sección con la de arriba
ANTES: la sección tenía `aspect-ratio` fijo y el texto iba en posición
absoluta con `top: %`. Al cambiar el ancho, el texto se salía del panel
(o sobraba verde). AHORA cada capa es un elemento en flujo normal: el
panel crece con el texto y se ve igual en cualquier pantalla.
Las medidas van en % del ANCHO del panel (los márgenes en % se calculan
siempre sobre el ancho), así la composición conserva sus proporciones.
===================================================================== */
.regalos {
padding: 0;
/* Hueco con la sección de arriba: la flor sube un 15.5% del ancho del
panel, así que con un 10% de hueco siempre queda montada sobre la
sección anterior (las une) sin llegar a tapar el botón del RSVP. */
margin-top: clamp(24px, 10%, 92px);
overflow: visible;
}
/* Panel = papel verde. Va con `cover` (NO `100% 100%`) para que la textura
no se deforme cuando el panel queda más alto o más angosto que la foto. */
.regalos-panel {
position: relative;
/* flow-root: sin esto el margen negativo de los perritos se "colapsaría"
hacia fuera y subiría el panel entero en vez de colgarlos del borde. */
display: flow-root;
/* Deja medir en "cqw" (1% del ancho del panel) -> el título se ajusta al
panel y no a la ventana, así nunca parte "Mesa de Regalos" en dos. */
container-type: inline-size;
max-width: 920px;
margin: 0 auto;
padding: 0 0 clamp(30px, 7.5%, 68px);
background: url("../assets/deco/papel-rosa.png") center / cover no-repeat;
}
/* Flor: sobresale por arriba del panel para unirlo con la sección anterior.
Sube un % de SU PROPIO alto (translate), así el salto escala con ella. */
.regalos-flor {
position: absolute;
top: 0; left: 50%;
z-index: 0; /* detrás de los perritos */
width: 19%;
height: auto;
transform: translate(-50%, -74%);
filter: drop-shadow(0 6px 10px rgba(30, 34, 18, .30));
pointer-events: none;
user-select: none;
}
/* Perritos: los clips se enganchan en el borde de arriba del papel.
El margen negativo es % del ancho del panel -> escala con él. */
.regalos-perros {
position: relative;
z-index: 1;
display: block;
width: 70%;
height: auto;
margin: -4.2% auto 0;
filter: drop-shadow(0 10px 16px rgba(28, 34, 18, .32));
}
.regalos .mesa-title {
margin: clamp(12px, 3.4%, 32px) 0 0;
padding: 0 6%;
/* "Mesa de Regalos" mide ~12.8x su font-size; con 6.6cqw cabe siempre en
una línea dentro del 88% útil del panel. Si el navegador no entiende
cqw, se queda con el tamaño de .display-banner (nada se rompe). */
font-size: clamp(17px, 6.6cqw, 56px);
}
/* width % (no padding) para que el tope de 58ch de .gift-text mida TEXTO
y no se lo coma el relleno: en móvil manda el 84%, en escritorio el 58ch. */
.regalos .gift-text { width: 84%; margin: 0 auto; }
/* Tira de Liverpool: más ancha que el panel, asomando por los dos lados.
Con `border-image` los extremos rasgados se mantienen nítidos y solo se
estira el centro (con `100% 100%` se aplastaría toda la textura). */
.regalos .liverpool-strip {
position: relative;
z-index: 1;
display: block;
width: 111.2%;
margin: clamp(16px, 4.4%, 42px) 0 0 -5.6%;
padding: 6px 4%;
background: none;
border: 18px solid transparent;
border-image: url("../assets/deco/washi-liverpool.png") 20 fill / 18px stretch;
filter: drop-shadow(0 6px 10px rgba(28, 34, 18, .26));
}
/* Tiendas lado a lado dentro de la MISMA tira (Liverpool | Amazon | …). */
.regalos .gift-stores-row {
display: flex;
align-items: flex-start;
justify-content: center;
gap: clamp(14px, 5%, 44px);
}
.regalos .gift-store-col { flex: 1 1 0; min-width: 0; text-align: center; }
/* Fila de botones: uno por tienda, alineado bajo su columna. */
.regalos .gift-btns-row {
display: flex;
justify-content: center;
gap: clamp(14px, 5%, 44px);
}
.regalos .gift-btn-cell { flex: 1 1 0; display: flex; justify-content: center; }
/* Botón "Ver mesa": montado sobre el borde de abajo de la tira. `nowrap` para
que "Ver mesa" NO se parta en dos renglones (crecía de alto en móvil). */
.regalos .btn { position: relative; z-index: 2; margin-top: -14px; white-space: nowrap; background: #CD5C5C; color: #A3233B; box-shadow: 0 6px 14px rgba(70,80,150,.2); }
/* Depósito directo: bloque bajo la tira de tiendas, dentro del panel. */
.regalos .gift-bank {
width: 84%;
margin: clamp(22px, 5.5%, 20px) auto 0;
text-align: center;
font-family: var(--font-abhaya);
}
.regalos .gift-bank-label {
margin: 0 0 6px;
color: #fbf7ec;
text-transform: uppercase;
letter-spacing: .14em;
font-size: clamp(14px, 3.4vw, 19px);
opacity: .8;
}
.regalos .gift-bank-name {
margin: 0;
color: #fbf7ec;
font-weight: 800;
font-size: clamp(20px, 5.2vw, 28px);
}
.regalos .gift-bank-bank {
margin: 3px 0 0;
color: #fbf7ec;
text-transform: uppercase;
letter-spacing: .1em;
font-size: clamp(17px, 4.3vw, 23px);
}
.regalos .gift-bank-clabe {
margin: 4px 0 0;
color: #fbf7ec;
letter-spacing: .04em;
font-size: clamp(17px, 4.3vw, 23px);
/* Número y botón en una fila centrada; envuelve en móvil si no cabe. */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 10px;
}
.regalos .clabe-line { white-space: nowrap; }
/* Botón "Copiar" junto a la CLABE. */
.regalos .clabe-copy {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px;
border: 0;
border-radius: 999px;
background: #CD5C5C;
color: #fbf7ec;
font-family: var(--font-abhaya);
font-size: clamp(13px, 3.2vw, 16px);
letter-spacing: .04em;
line-height: 1;
cursor: pointer;
transition: background .15s ease, transform .08s ease;
}
.regalos .clabe-copy:hover { background: #8c1d31; }
.regalos .clabe-copy:active { transform: translateY(1px); }
.regalos .clabe-copy.is-copied { background: #3f7d4f; }
.regalos .clabe-copy-ico { flex: 0 0 auto; }
/* =====================================================================
ÚLTIMA FOTO · scrapbook de cierre entre la Mesa de Regalos y el pie.
El PNG ya trae su propio papel y su sombra, así que solo la centramos
y le damos aire arriba/abajo; el ancho escala con la ventana.
===================================================================== */
.ultima {
padding: 0;
overflow: visible;
}
.ultima-foto {
display: block;
width: clamp(260px, 100%, 480px);
height: auto;
margin: 0 auto;
}
/* =====================================================================
PIE · nombres en UNA sola línea + copas flanqueando "¡Acompáñanos…"
---------------------------------------------------------------------
· Los nombres se miden en "cqw" (1% del ancho del panel del pie), igual
que el título de la Mesa de Regalos, para que NUNCA se partan en dos:
el tamaño se ajusta al ancho disponible en vez de al de la ventana.
· Mismo color que la fecha (foot-date).
· copa-izq / copa-der flanquean "¡Acompáñanos a celebrar!" (brindis).
===================================================================== */
.footer { container-type: inline-size; }
/* Escritorio: en UN solo renglón. El tamaño escala con el ancho del panel
("MARIANA Y SEBASTIAN" mide ~14.7x su font-size; 6.5cqw llena ~96%). */
.footer .foot-names {
white-space: nowrap;
font-size: clamp(12px, 6.5cqw, 72px);
/*
trae font-weight:bold del navegador, pero Stindle solo tiene peso
normal -> el navegador finge la negrita y engrosa los trazos. Con 400
usamos la Stindle real (igual que .hero .names). */
font-weight: 400;
}
/* Móvil: apilados en dos renglones -> "MARIANA Y" arriba y "SEBASTIAN"
abajo. Al medir el renglón más ancho ("SEBASTIAN" ~7.3x su tamaño), 13cqw
deja las letras GRANDES en vez de diminutas como al forzar una sola línea.
El nowrap heredado mantiene "MARIANA Y" entero. */
@media (max-width: 768px) {
.footer .foot-names { font-size: clamp(22px, 13cqw, 46px); line-height: 1.03; }
.footer .foot-names .fn-part { display: block; }
}
/* Nombres del mismo color que la fecha del pie. */
.footer .foot-names,
.footer .foot-date { color: #6a74a8; }
/* Copas a los lados de la etiqueta; el flex maneja el espaciado. */
.foot-celebrar {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(6px, 2vw, 16px);
margin-top: 10px;
}
.foot-celebrar .script-label { margin: 0; }
.foot-copa {
flex: none;
width: clamp(34px, 9.5vw, 60px);
height: auto;
user-select: none;
pointer-events: none;
}