:root {
	/* --bg: #223145; Fondo solicitado */
	--bg: #011229; /* Fondo solicitado */
	--card: #7b7b7b00; /* Panel ligeramente más oscuro que el fondo */
	--ink: #a48729; /* Dorado para texto */
	/*--muted: #b79b44;  Dorado más suave para textos secundarios */
	--muted: #fff3b1;
	--primary: #b2a978; /* Dorado para acentos/botones */
	--primary-ink: #a48729; /* Dorado claro para títulos */
	--ring: rgba(212, 175, 55, 0.35); /* Halo dorado */
	--sparkle-color: #ffc880;
	--sparkle-orange: #ffffff;
	--white-text: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	color: #ffffff;
	background:
		radial-gradient(1200px 600px at 100% -10%, rgba(212,175,55,0.10), transparent 40%),
		radial-gradient(900px 500px at -10% 0%, rgba(255,255,255,0.05), transparent 45%),
		var(--bg);
	line-height: 1.6;
	font-size: 18px;
}
@media (min-width: 800px) {
	body { font-size: 20px; }
}

/* Canvas de fondo animado */
#bg-canvas {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--bg);
}
@media (prefers-reduced-motion: reduce) {
	#bg-canvas { display: none; }
}

/* Eleva el contenido por encima del canvas */
header, main, footer {
	position: relative;
	z-index: 1;
}

.hero {
	display: grid;
	place-items: center;
	text-align: center;
	/* padding: 32px 16px; */
	padding-top: 32px;
}
.hero-inner { max-width: 960px; width: 100%; padding: 2rem; }
.overline {
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--primary);
	font-size: 15px;
	padding: 2rem;
}
.couple {
	font-family: 'Parisienne', cursive;
	font-weight: 400;
	font-size: clamp(80px, 9vw, 110px);
	/* font-size: clamp(50px, 9vw, 110px); */
	line-height: 1.05;
	margin: 8px 0 6px;
	padding: 2rem;
}
.couple span {
	color: var(--primary);
}
.date-place {
	color: var(--primary);
	font-size: 19px;
}

main {
	max-width: 920px;
	margin: 0 auto;
	padding: 0 16px 48px;
}

.card {
	background: var(--card); 
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 20px;
	padding: 24px;
	margin: 20px 0;
	box-shadow: 0 8px 30px rgb(165 146 82 / 49%);
}

h2, h3, label {
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-weight: 300;
	color: var(--muted);
	letter-spacing: .02em;
}

h2 { font-size: clamp(25px, 3.4vw, 40px); margin: 8px 0 12px; }
h3 { font-size: clamp(22px, 2.8vw, 28px); margin: 6px 0 14px; }

.muted { color: var(--primary); }
.small { font-size: 13px; }

.form .row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: end; /* alinea los dos primeros inputs por la base */
}
@media (min-width: 640px) {
	.form .row { grid-template-columns: 2fr 1fr; }
}
/* Forzar un campo a ocupar todo el renglón (ambas columnas) */
.form .row .span-all { grid-column: 1 / -1; }

.field { display: grid; gap: 8px; margin: 10px 0; }
.field input[type="text"],
.field select,
.field textarea {
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 16px;
	outline: none;
	background: #24344a;
	color: var(--ink);
	transition: border-color .2s, box-shadow .2s, transform .04s;
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px var(--ring);
}

.inline { display: flex; gap: 8px; align-items: center; }
.inline input { flex: 1; }

.btn {
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 10px 18px;
	font-weight: 600;
	cursor: pointer;
	transition: transform .05s ease, box-shadow .15s ease, background .2s;
}
.btn:active { transform: translateY(1px); }
.btn.primary {
	background: var(--muted);
	color: #ffffff; /* mejor contraste sobre dorado */
	box-shadow: 0 8px 18px rgba(197,160,89,0.32);
}
.btn.primary:hover { filter: brightness(1.02); }
.btn.secondary {
	background: transparent;
	color: var(--ink);
	border-color: rgba(255,255,255,.28);
}
.btn.secondary:hover { background: rgba(255,255,255,.06); }

.actions {
	margin-top: 12px;
	display: flex;
	justify-content: center; /* alinea el botón a la derecha */
}

.ok {
	color: #bfe9cb;
	background: rgba(33,93,47,.16);
	border: 1px solid rgba(33,93,47,.45);
	padding: 10px 12px;
	border-radius: 10px;
}
.error {
	color: #f5b5b5;
	background: rgba(122,26,26,.16);
	border: 1px solid rgba(245,200,200,.28);
	padding: 10px 12px;
	border-radius: 10px;
}

/* Error en línea debajo del campo */
.field-error {
	color: #f5b5b5;
	margin-top: 6px;
	font-size: 13px;
	display: block;
}

.code-box {
	background: #ffffff;
	border: 1px dashed rgba(197,160,89,.6);
	border-radius: 14px;
	padding: 14px;
	margin-bottom: 10px;
}
.code-box .help { margin: 4px 0 0; }

.footer {
	text-align: center;
	color: var(--muted);
	padding: 28px 16px 64px;
	font-size: 14px;
}

/* Enter transitions */
body { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
body.loaded { opacity: 1; transform: none; }

/* ============== Mejoras de estilo ============== */
/* Ornamentación sutil para separar secciones */
.ornament {
	height: 32px;
	display: grid;
	place-items: center;
	margin: 8px auto 24px;
	position: relative;
	width: min(220px, 60%);
}
.ornament::before,
.ornament::after {
	content: '';
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(197,160,89,.8), transparent);
	position: absolute;
	left: 0;
	right: 0;
}
.ornament::after {
	height: 2px;
	filter: blur(.5px);
	opacity: .35;
}
.ornament span.dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--primary);
	box-shadow:
		0 0 0 3px rgba(197,160,89,.14),
		0 0 0 6px rgba(197,160,89,.08);
}

/* Hero con leve realce */
.hero {
	position: relative;
	overflow: hidden;
}
.hero::after {
	content: '';
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 70%;
	background: radial-gradient(50% 40% at 50% 0%, rgba(197,160,89,.10), transparent 60%);
	pointer-events: none;
}

/* Cards con acento superior */
.card {
	position: relative;
}
.card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 16px;
	right: 16px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, transparent, var(--primary), transparent);
	opacity: .35;
}

/* Controles refinados */
.field input[type="text"],
.field select,
.field textarea {
	background: #fff;
	box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
}
.field select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
		linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%),
		linear-gradient(to right, transparent, transparent);
	background-position:
		calc(100% - 18px) calc(50% - 2px),
		calc(100% - 12px) calc(50% - 2px),
		100% 0;
	background-size: 6px 6px, 6px 6px, 2.2em 100%;
	background-repeat: no-repeat;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
	box-shadow:
		0 0 0 4px var(--ring),
		0 1px 0 rgba(0,0,0,.02) inset;
}

/* Botones mejorados */
.btn.primary {
	box-shadow:
		0 10px 22px rgba(197,160,89,0.32),
		0 2px 6px rgba(0,0,0,.06);
}
.btn.primary:hover {
	filter: brightness(1.03);
	box-shadow:
		0 14px 28px rgba(197,160,89,0.36),
		0 3px 8px rgba(0,0,0,.07);
}
.btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--ring);
}

/* Espaciado en la sección de RSVP */
.rsvp .form { margin-top: 8px; }

/* Detalles del evento */
.details .venue {
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	font-size: clamp(20px, 2.6vw, 24px);
	color: var(--muted);
	margin: 6px 0 2px;
}
.details .address {
	color: var(--white-text);
	margin: 2px 0 6px;
}
.details .datetime time {
	font-weight: 600;
	color: var(--white-text);
}

/* Intro con foto a un lado */
.intro .intro-grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 16px;
}
@media (min-width: 800px) {
	.intro .intro-grid { grid-template-columns: 2fr 1fr; }
}
.intro .photo-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.10);
	box-shadow: 0 10px 26px rgba(0,0,0,.22);
	background: #0b1522;
}
.intro .photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Lista de invitados dirigida */
.invitees-list {
	margin: 0;
	padding-left: 18px;
	color: var(--muted);
}
.invitees-list li {
	margin: 2px 0;
}

/* Utilidad: ocultar en móvil */
@media (max-width: 640px) {
	.hide-mobile { display: none !important; }
}

/* FAQ y Dress Code */
.dresscode p { margin: 4px 0 0; font-weight: 600; color: var(--white-text); }
.faq .faq-list details {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 12px;
	padding: 10px 12px;
	margin: 8px 0;
}
.faq .faq-list summary {
	cursor: pointer;
	font-weight: 600;
	outline: none;
}
.faq .faq-list p { margin: 8px 0 0; color: var(--muted); }
/* Mapa incrustado */
.details .map {
	margin-top: 10px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.10);
	box-shadow: 0 6px 22px rgba(0,0,0,.22);
	aspect-ratio: 16 / 9;
	background: #0b1522;
}
.details .map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.details .map-cta {
	margin-top: 8px;
	text-align: right;
}

.details .rides {
	margin-top: 10px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* Grid responsive para CTAs del mapa/traslados */
.details .cta-grid {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}
.details .cta-grid .btn {
	width: 100%;
	text-align: center;
}
@media (min-width: 420px) {
	.details .cta-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 800px) {
	.details .cta-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Countdown */
.countdown-timer {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: clamp(18px, 3vw, 24px);
	color: var(--primary);
}

/* Overlay de acceso (frase) */
.pass-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: grid;
	place-items: center;
	background: rgba(0,0,0,.45);
	backdrop-filter: blur(2px);
}
.pass-overlay .pass-card {
	background: var(--card);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 16px;
	padding: 20px;
	width: min(420px, 92vw);
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ================== Intro: Sobre animado ================== */
.intro-envelope {
	position: fixed;
	inset: 0;
	z-index: 20;
	background: #ffffff; /* fondo blanco detrás del sobre */
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: opacity .6s ease, visibility .6s ease;
}
.intro-envelope[hidden] { display: none !important; }
.intro-envelope.is-hidden {
	opacity: 0;
	visibility: hidden;
	cursor: default;
	pointer-events: none;
}
/* Oculta contenido mientras el sobre está activo */
body.intro-open header,
body.intro-open main,
body.intro-open footer {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .35s ease;
}

/* Nuevo sobre basado en el demo */
.intro-envelope .wrapper {
	--w: min(420px, 86vw);
	--h: calc(var(--w) * 0.66);
	width: var(--w);
	height: var(--h);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 0;
	/* Sombra sutil para dar profundidad al sobre */
	/* filter: drop-shadow(0 10px 22px rgba(49, 46, 46, 0.788)); */
	/* filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.788)); */
	filter: drop-shadow(0 1px 10px rgba(153, 146, 113, 9));
}
/* Ajuste específico para pantallas ~375x667 (iPhone 6/7/8) */
@media (max-width: 375px) and (max-height: 667px) {

	.intro-envelope .wrapper {
		--h: calc(var(--w) * 0.60);
		margin-bottom: -5rem !important;
	}
	.intro-envelope .wrapper .frame-top {
		top: calc(var(--h) * -2) !important;
	}
	.intro-envelope .wrapper .frame-bottom {
		bottom: calc(var(--h) * -1.60) !important;
	}
	/* Ajuste del sello para que quede centrado sobre la carta en este viewport */
	.intro-envelope .seal {
		top: 20.52rem !important;
	}
	/* Hacer que la tarjeta (letter) salga más arriba al abrir */
	.intro-envelope.open .wrapper.opened .letter {
		transform: translateY(calc(var(--h) * -0.42)) !important;
	}
	/* Opcional: un poco más alta para que luzca mejor al salir */
	.intro-envelope .letter { height: 82%; }

}
.intro-envelope .wrapper::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: calc(var(--h) * -0.02);
	transform: translateX(-50%);
	width: 78%;
	height: 14px;
	background: radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,0) 70%);
	filter: blur(4px);
	opacity: .5;
	pointer-events: none;
	z-index: 1;
}
/* Marco superior con el mismo ancho del sobre */
.intro-envelope .wrapper .frame-top {
	position: absolute;
	top: calc(var(--h) * -1.80); /* ligeramente por encima del borde */
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: auto;
	pointer-events: none;
	z-index: 5;
}
/* Marco inferior (mismo ancho y centrado) */
.intro-envelope .wrapper .frame-bottom {
	position: absolute;
	bottom: calc(var(--h) * -1.75); /* ligeramente por debajo del borde */
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: auto;
	pointer-events: none;
	z-index: 5;
}
.intro-envelope .lid {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	border-right: calc(var(--w) / 2) solid transparent;
	border-bottom: calc(var(--h) / 2) solid transparent;
	border-left: calc(var(--w) / 2) solid transparent;
	transform-origin: top;
	transition: transform .25s linear;
	border-radius: 8px;
}
.intro-envelope .lid.one {
	/* border-top: calc(var(--h) / 2) solid #bd9157;  */
	border-top: calc(var(--h) / 2) solid #c9b8a1;
	transform: rotateX(0deg);
	z-index: 3;
	transition-delay: .75s;
}
.intro-envelope .lid.two {
	border-top: calc(var(--h) / 2) solid rgb(167 153 133); /* color frontal interno sobre*/
	transform: rotateX(90deg);
	z-index: 1;
	transition-delay: .5s;
}
.intro-envelope .envelope {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	border-top: calc(var(--h) / 2) solid transparent;
	border-right: calc(var(--w) / 2) solid #dde1e6;
    border-bottom: calc(var(--h) / 2) solid #d9dbdd;
    border-left: calc(var(--w) / 2) solid #cecfd0;
	z-index: 3;
	border-radius: 8px;
}
.intro-envelope .letter {
	position: absolute;
	top: auto;
	bottom: 0;
	width: 80%;
	height: 80%;
	background-color: #ffffff; /* carta blanca */
	color: #222222;
	border-radius: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 12px;
	transition: transform .5s ease;
}
.intro-envelope .env-decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.intro-envelope .env-decor .dec {
	position: absolute;
	display: block;
	user-select: none;
	pointer-events: none;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
/* Esquinas */
.intro-envelope .env-decor .corner.tl { top: 0; left: 0; width: 24%; height: auto; }
.intro-envelope .env-decor .corner.tr { top: 0; right: 0; width: 24%; height: auto; }
.intro-envelope .env-decor .corner.bl { bottom: 0; left: 0; width: 24%; height: auto; }
.intro-envelope .env-decor .corner.br { bottom: 0; right: 0; width: 24%; height: auto; }
/* Marcos superior e inferior */
@media (max-width: 640px) {
	.intro-envelope .env-decor .corner.tl,
	.intro-envelope .env-decor .corner.tr,
	.intro-envelope .env-decor .corner.bl,
	.intro-envelope .env-decor .corner.br {
		width: 35%;
	}
}
.intro-envelope .env-decor .frame.top { top: 4%; left: 0; right: 0; width: 100%; height: auto; }
.intro-envelope .env-decor .frame.bottom { bottom: 4%; left: 0; right: 0; width: 100%; height: auto; transform: scaleY(-1); }
/* Sello centrado encima de la carta */
.intro-envelope .seal {
	position: absolute;
	top: calc(var(--h) * -1.45);
	left: 50%;
	transform: translateX(-50%);
	width: 84px;
	height: auto;
	opacity: .95;
	z-index: 4;
	pointer-events: none;
}
.env__names {
	font-family: 'Parisienne', cursive;
	font-weight: 400;
	font-size: clamp(34px, 6vw, 44px);
	color: #7a6220;
}
.env__names span { color: #a48729; }
.env__hint {
	color: #7a6220;
	font-size: 14px;
	margin-top: 6px;
	opacity: .8;
}
.intro-envelope.open .wrapper.opened .lid.one { transform: rotateX(90deg); transition-delay: 0s; }
.intro-envelope.open .wrapper.opened .lid.two { transform: rotateX(180deg); transition-delay: .25s; }
.intro-envelope.open .wrapper.opened .letter { transform: translateY(calc(var(--h) * -0.30)); transition-delay: .5s; }
@media (max-width: 640px) {
	.intro-envelope.open .wrapper.opened .letter { transform: translateY(calc(var(--h) * -0.36)); }
}

/* Indicador de interacción (instrucción) */
.intro-envelope .intro-hint {
	position: absolute;
	bottom: 8vh;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #ffffff;
	font-weight: 600;
	background: rgb(201 184 161);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 999px;
	padding: 8px 14px;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	animation: hint-fade 1.2s ease-in-out infinite alternate;
}
.intro-envelope.open .intro-hint { opacity: 0; transform: translate(-50%, 8px); transition: opacity .3s, transform .3s; }
@keyframes hint-fade {
	from { opacity: .75; }
	to { opacity: 1; }
}
.intro-envelope .tap-icon {
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px rgba(230,200,115,.25);
}
.intro-envelope .tap-icon::before,
.intro-envelope .tap-icon::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(230,200,115,.35);
	animation: ripple 1.4s ease-out infinite;
}
.intro-envelope .tap-icon::after { animation-delay: .7s; }
@keyframes ripple {
	from { transform: scale(0.6); opacity: .8; }
	to { transform: scale(1.4); opacity: 0; }
}


/* Fuente fija para los nombres (encabezado y carta) */
.couple,
.env__names {
	font-family: 'Parisienne', cursive !important;
	font-weight: 400;
}