:root {
--paper: #F0ECE8;
--ink: #591212;
--ink-2: #83504F;
--ink-3: #A98684;
--ink-4: #D3C3C1;
--ink-5: #E6DCD9;
--line: rgba(89, 18, 18, .22);
--nav-h: 56px;
--gutter: 16px;
--tracking: .34em;
/* Textura real del papel del save the date: mosaico de 1000×620 a media medida,
así el grano tiene el mismo tamaño físico en 1x y es nítido en 2x o más. */
--papel: url("assets/papel.webp");
--papel-size: 500px 310px;
}
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-padding-top: var(--nav-h);
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
background: var(--paper) var(--papel) 0 0 / var(--papel-size) repeat;
color: var(--ink);
font-family: "Montserrat", system-ui, sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
[hidden] { display: none; }
/* Rótulos: mayúsculas muy espaciadas, como el save the date */
.caps {
text-transform: uppercase;
letter-spacing: var(--tracking);
font-weight: 400;
font-size: .75rem;
line-height: 1.6;
}
/* Imágenes con fondo blanco: se funden con el papel */
.blend { mix-blend-mode: multiply; }
/* ---------- Sobre ---------- */
/* Toda la pantalla es el sobre. Las piezas son polígonos sobre la misma textura de papel;
se distinguen por un multiplicado leve de tinta (--tinte) y por el relieve: cada solapa
deja una sombra mínima sobre lo que tapa, como el papel real. Sin líneas dibujadas.
Geometría de docs/referencia/cierre.html: la solapa superior baja hasta --punta y la
inferior sube hasta el 42%; el punto donde se juntan queda escondido bajo la superior
y no se ve un cruce en X. El lacre va en el centro exacto, encima de la punta. */
.sobre {
position: fixed;
inset: 0;
z-index: 20;
overflow: hidden;
background: var(--paper);
--sello: min(32vw, 16svh);
--punta: 58%;
--sello-y: 54%;
--sombra: rgba(74, 52, 46, .2);
--txt: max(9px, min(2.6vw, 1.4svh));
}
/* Escena del sobre: nunca más angosta que 1,25 veces su alto, para que las solapas
tengan los ángulos de un sobre real. En el celular (pantalla alta) queda más ancha
que la pantalla, centrada, y los costados se salen; en el computador ocupa el ancho. */
.sobre__escena {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: max(100%, 125svh);
margin-left: calc(max(100%, 125svh) / -2);
perspective: 1400px;
perspective-origin: 50% 50%;
}
.sobre__pieza {
position: absolute;
inset: 0;
--tinte: rgba(89, 18, 18, 0);
background-color: var(--paper);
background-image: linear-gradient(var(--tinte), var(--tinte)), var(--papel);
background-size: auto, var(--papel-size);
}
/* Cuerpo estático: fondo interior, carta, solapas y pliegues en una sola capa */
.sobre__cuerpo { position: absolute; inset: 0; transform: translateZ(0); }
.sobre__fondo { --tinte: rgba(89, 18, 18, .09); }
.sobre__carta {
inset: 3.5svh 5% 0;
border-radius: 2px 2px 0 0;
background-position: 0 0, -137px -61px;
padding-top: 5.5svh;
text-align: center;
}
.sobre__carta h1 { margin: 0; }
.sobre__nombres {
width: min(62vw, 55svh);
height: auto;
margin: 0 auto;
}
.sobre__solapa--izq { --tinte: rgba(89, 18, 18, .04); clip-path: polygon(0 0, 50% 51%, 0 100%); background-position: 0 0, -211px -97px; }
.sobre__solapa--der { --tinte: rgba(89, 18, 18, .04); clip-path: polygon(100% 0, 100% 100%, 50% 51%); background-position: 0 0, -43px -188px; }
.sobre__solapa--inf { --tinte: rgba(89, 18, 18, .065); clip-path: polygon(0 100%, 50% 42%, 100% 100%); background-position: 0 0, -305px -22px; }
/* Relieve: la sombra que deja el borde de una solapa sobre lo que tiene debajo.
Es la misma forma de la solapa, desenfocada y corrida hacia afuera. */
.sobre__relieve {
position: absolute;
inset: 0;
filter: blur(max(2px, .45svh));
}
.sobre__relieve div {
position: absolute;
inset: 0;
background: var(--sombra);
}
.sobre__relieve--lados div { transform: translateY(max(2px, .3svh)); }
.sobre__relieve--lados div:first-child { clip-path: polygon(0 0, 50% 51%, 0 100%); }
.sobre__relieve--lados div:last-child { clip-path: polygon(100% 0, 100% 100%, 50% 51%); }
.sobre__relieve--inf div {
clip-path: polygon(0 100%, 50% 42%, 100% 100%);
transform: translateY(max(-3px, -.35svh));
}
/* Sombra que proyecta la solapa superior al cerrar: triángulo desenfocado, solo cambia su opacidad */
.sobre__sombra {
position: absolute;
inset: 0 0 calc(100% - var(--punta));
opacity: 0;
filter: blur(max(6px, 1.4svh));
transform: translateZ(0);
}
.sobre__sombra div {
position: absolute;
inset: 0;
clip-path: polygon(0 0, 100% 0, 50% 100%);
background: var(--sombra);
transform: translateY(max(3px, .6svh));
}
/* Solapa superior: bisagra en el borde de arriba, dos caras */
.sobre__tapa {
position: absolute;
inset: 0 0 calc(100% - var(--punta));
transform-origin: 50% 0;
transform-style: preserve-3d;
transform: rotateX(178deg);
}
.sobre__cara {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.sobre__cara--fuera {
--tinte: rgba(89, 18, 18, .05);
clip-path: polygon(0 0, 100% 0, 50% 100%);
background-position: 0 0, -88px -140px;
}
/* Árboles del Prado impresos en la solapa: cuelgan desde el borde de arriba y la forma
del triángulo los recorta. En pantallas angostas se recortan los lados, no el alto.
El dibujo es tinta sobre blanco: multiply lo funde con el papel de la propia solapa. */
.sobre__arboles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
aspect-ratio: 2880 / 638;
min-height: 18svh;
max-height: 34svh;
object-fit: cover;
object-position: 50% 0;
mix-blend-mode: multiply;
}
/* Luz: la cara exterior está en sombra cuando la solapa va de canto y se ilumina al bajar */
.sobre__luz {
position: absolute;
inset: 0;
background: var(--sombra);
opacity: 0;
}
.sobre__cara--dentro {
--tinte: rgba(89, 18, 18, .08);
clip-path: polygon(0 100%, 100% 100%, 50% 0);
transform: rotateX(180deg);
}
/* ---------- Sello de cera ---------- */
/* Foto real del sello de cera con el SG (docs/cera/recortar.py la recorta).
Se estampa: baja hacia el papel, se comprime un instante, rebota apenas y se forma
su sombra de contacto. Va un poco girado, como un sello puesto a mano.
Queda un poco por debajo del centro (--sello-y). */
.sobre__sello {
position: absolute;
left: 0;
right: 0;
top: calc(var(--sello-y) - var(--sello) * .62);
width: var(--sello);
height: calc(var(--sello) * 1.2323);
margin: 0 auto;
}
.sello__cuerpo {
position: absolute;
inset: 0;
transform: rotate(-4deg);
}
.sello__sombra {
position: absolute;
inset: 7% 9% 3%;
border-radius: 50%;
background: rgba(60, 22, 20, .42);
filter: blur(max(3px, .8svh));
transform: translateY(4%);
opacity: 0;
}
.sello__cera {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
}
/* Trazo: el texto se escribe de izquierda a derecha con borde suave (como la fecha del
video). El recorte avanza y el texto se queda quieto. El borde suave cae en el
espacio extra de la derecha (--pluma), así al final el texto queda entero. */
.trazo {
--pluma: 1.2em;
display: inline-block;
vertical-align: top;
overflow: hidden;
padding: .2em var(--pluma) .2em 0;
margin: -.2em calc(var(--pluma) * -1) -.2em 0;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--pluma)), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - var(--pluma)), transparent);
transform: translateX(-100%);
}
.trazo__contra {
display: block;
transform: translateX(calc(100% + var(--pluma)));
}
.sobre__lugar,
.sobre__pie {
position: absolute;
left: 0;
right: 0;
margin: 0;
text-align: center;
}
.sobre__lugar {
bottom: calc(100% - var(--sello-y) + var(--sello) * .62 + 3svh);
font-size: var(--txt);
}
.sobre__pie { bottom: max(7svh, 40px); }
.sobre__fecha {
margin: 0 0 4.5svh;
font-size: calc(var(--txt) * 1.6);
letter-spacing: .3em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* Frase en Calgary, exportada de Canva como imagen (docs/frase/extraer.py).
Su ancho se mide contra el de los nombres, min(62vw, 55svh). En móvil el triángulo
abierto es angosto: va en dos líneas (frase-movil.webp) para poder ser más grande. */
.sobre__carta-frase { display: block; margin-top: 2.2svh; }
.sobre__carta-frase img {
width: calc(min(62vw, 55svh) * .85);
height: auto;
margin: 0 auto;
}
@media (min-width: 700px) {
.sobre__carta-frase img { width: calc(min(62vw, 55svh) * 1.05); }
}
/* Estado final, sin animación (visitas repetidas o movimiento reducido) */
.sobre--cerrado .sobre__tapa { transform: none; }
.sobre--cerrado .sobre__sombra,
.sobre--cerrado .sello__sombra,
.sobre--cerrado .sello__cera { opacity: 1; }
.sobre--cerrado .trazo,
.sobre--cerrado .trazo__contra { transform: none; }
/* ---------- Contador ---------- */
.contador__fila {
display: flex;
justify-content: center;
}
.contador__bloque {
width: min(calc((100vw - 2 * var(--gutter)) / 4), 18svh);
contain: layout style;
}
.contador__bloque + .contador__bloque { border-left: 1px solid var(--line); }
.contador__num {
display: block;
font-size: min(9vw, 7.5svh);
font-weight: 300;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.contador__label {
display: block;
margin-top: 1svh;
font-size: calc(var(--txt) * .88);
color: var(--ink-2);
}
.contador__hoy {
margin: 0;
font-size: min(9vw, 7.5svh);
font-weight: 300;
line-height: 1.1;
}
/* Mientras el sobre está en pantalla la web de abajo no se desplaza ni anima */
.sobre-activo { overflow: hidden; }
.sobre-activo .hero__casa { animation-play-state: paused; }
/* ---------- Navegación ---------- */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 10;
height: var(--nav-h);
padding: 0 var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--paper) var(--papel) 0 0 / var(--papel-size) repeat;
border-bottom: 1px solid var(--line);
}
.nav a { text-decoration: none; }
.nav__brand { font-size: .7rem; }
.nav__toggle {
appearance: none;
background: none;
border: 0;
min-height: 44px;
padding: 8px 0;
color: var(--ink);
font: inherit;
font-size: .7rem;
cursor: pointer;
}
.nav__links {
display: none;
position: absolute;
top: var(--nav-h);
left: 0;
right: 0;
margin: 0;
padding: 8px var(--gutter) 20px;
list-style: none;
background: var(--paper) var(--papel) 0 0 / var(--papel-size) repeat;
border-bottom: 1px solid var(--line);
}
.nav.is-open .nav__links { display: block; }
.nav__links a {
display: block;
padding: 12px 0;
font-size: .72rem;
border-bottom: 1px solid var(--line);
}
.nav__links li:last-child a { border-bottom: 0; }
.nav__links a:hover, .nav__links a:focus-visible { color: var(--ink-2); }
.nav__rsvp { font-weight: 500; }
@media (min-width: 960px) {
.nav { padding: 0 32px; }
.nav__toggle { display: none; }
.nav__links {
display: flex;
position: static;
gap: 26px;
padding: 0;
background: none;
border: 0;
}
.nav__links a { padding: 0; border: 0; font-size: .66rem; }
}
/* ---------- Portada ---------- */
.hero {
padding-top: calc(var(--nav-h) + 48px);
text-align: center;
}
.hero__text { padding: 0 var(--gutter); }
.hero__kicker { margin: 0 0 22px; color: var(--ink-2); }
.hero h1 { margin: 0; }
.hero__names {
width: min(86vw, 560px);
height: auto;
margin: 0 auto 18px;
}
.hero__place { margin: 0 0 6px; font-size: .7rem; }
.hero__date {
margin: 0;
font-size: 1.15rem;
letter-spacing: .3em;
font-weight: 300;
font-variant-numeric: tabular-nums;
}
/* El grabado: a sangre, se revela en diagonal y se desvanece hacia el papel.
Máscara y blend van en el mismo elemento para que el multiply siga funcionando.
Si llega la casa en SVG, reemplaza el ![]()
por el