/* Cositas de Adviento · estilo «hecho a mano»
   Papel, tinta y trazos. Rojo acebo y verde abeto con mucha calma; dorado solo
   para la puerta dorada. Móvil primero. */

:root {
	--papel: #f8f4ec;
	--papel-2: #f0e9dc;
	--papel-3: #e8dfcf;
	--tinta: #24211d;
	--tinta-2: #4a443c;
	--tinta-suave: #7a7166;
	--rojo: #b5432f;
	--rojo-osc: #93331f;
	--verde: #3e5e48;
	--oro: #b8862b;
	--oro-claro: #f1dfae;
	--error: #a3271a;
	/* «Las Cositas de Sita»: la letra a mano de Patricia (títulos, números, notas).
	   Funnel Display, la fuente de su web, para los textos largos. */
	--serif: 'Las Cositas de Sita', 'Funnel Display', system-ui, sans-serif;
	--sans: 'Funnel Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mano: 'Las Cositas de Sita', 'Funnel Display', system-ui, sans-serif;
	/* bordes «a mano»: radios distintos en cada esquina */
	--a-mano-1: 255px 18px 225px 18px / 18px 225px 18px 255px;
	--a-mano-2: 18px 225px 18px 255px / 255px 18px 225px 18px;
	--a-mano-3: 225px 22px 255px 14px / 14px 255px 22px 225px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--tinta);
	background: var(--papel);
}

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--rojo); }

:focus-visible { outline: 2px dashed var(--rojo); outline-offset: 4px; border-radius: 8px; }

/* trazos SVG */
.trazo {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
	vertical-align: middle;
}
.trazo-fino { stroke-width: 1.2; }

.adv-saltar {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 100;
	padding: 8px 16px;
	background: var(--tinta);
	color: var(--papel);
	border-radius: var(--a-mano-1);
}
.adv-saltar:focus { top: 12px; }

.adv-nieve {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}
.adv-cabecera, .adv-main, .adv-pie { position: relative; z-index: 1; }

/* ---------- cabecera y pie ---------- */

.adv-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 18px 16px;
}
.adv-marca {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-family: var(--serif);
	font-size: 1.35rem;
	line-height: 1;
	color: var(--tinta);
}
.adv-marca { font-weight: 700; }
.adv-marca em { font-style: normal; font-weight: 300; color: var(--tinta-2); }
.adv-marca .trazo { width: 22px; height: 22px; color: var(--rojo); }
.adv-nav a {
	font-size: .95rem;
	text-decoration: none;
	padding: 6px 2px;
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
}
.adv-nav a:hover { color: var(--rojo); }

.adv-main {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 16px 56px;
}

.adv-pie {
	max-width: 1080px;
	margin: 0 auto;
	padding: 28px 16px 40px;
	text-align: center;
	font-size: .9rem;
	color: var(--tinta-suave);
}
.adv-pie .trazo { width: 40px; height: 30px; color: var(--verde); margin-bottom: 4px; }
.adv-pie p { margin: 2px 0; }

/* ---------- piezas comunes ---------- */

.adv-mano { font-family: var(--mano); font-weight: 500; }

.adv-antetitulo {
	margin: 0 0 4px;
	font-family: var(--mano);
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--rojo);
}
.adv-titulo {
	margin: 0 0 14px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2.7rem, 11.5vw, 5.4rem);
	line-height: 1;
}
.adv-titulo em { font-style: normal; font-weight: 700; position: relative; white-space: nowrap; }
.adv-titulo em .trazo {
	position: absolute;
	left: -2%;
	bottom: -.12em;
	width: 104%;
	height: .22em;
	color: var(--rojo);
	stroke-width: 2.2;
}
.adv-entradilla {
	margin: 0 auto 22px;
	max-width: 32em;
	font-size: 1.1rem;
	color: var(--tinta-2);
}
.adv-nota { font-size: .9rem; color: var(--tinta-suave); }

.adv-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 26px;
	border: 1.5px solid var(--tinta);
	border-radius: var(--a-mano-1);
	background: var(--tinta);
	color: var(--papel);
	font: inherit;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
	box-shadow: 3px 3px 0 var(--papel-3);
}
.adv-boton:hover { color: var(--papel); background: #000; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--rojo); }
.adv-boton-grande { min-height: 54px; padding: 12px 32px; font-size: 1.08rem; }
.adv-boton-secundario { background: transparent; color: var(--tinta); }
.adv-boton-secundario:hover { background: var(--papel-2); color: var(--tinta); }
.adv-boton-oro { background: var(--oro-claro); color: var(--tinta); border-color: var(--oro); }
.adv-boton-oro:hover { background: #ecd48f; color: var(--tinta); box-shadow: 4px 4px 0 var(--oro); }
.adv-boton-peligro { background: var(--error); border-color: var(--error); }
.adv-boton-peligro:hover { background: #7e1d13; }
.adv-boton[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.adv-caja {
	position: relative;
	padding: 30px 22px;
	border: 1.5px solid var(--tinta);
	border-radius: var(--a-mano-2);
	background: var(--papel);
}
.adv-caja h1, .adv-caja h2 {
	margin: 0 0 12px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.9rem, 7vw, 2.5rem);
	line-height: 1.05;
}
.adv-caja-icono { display: block; width: 46px; height: 46px; margin: 0 0 6px; color: var(--rojo); }
.adv-caja-ok .adv-caja-icono { color: var(--verde); }

.adv-centro { max-width: 540px; margin: 28px auto; }
.adv-texto { max-width: 720px; }
.adv-texto h2 { font-size: 1.6rem; margin-top: 30px; }
.adv-texto .adv-caja { border-radius: var(--a-mano-3); }

/* ---------- portada ---------- */

.adv-hero {
	position: relative;
	padding: 34px 0 6px;
	text-align: center;
}
.adv-hero-dibujos { position: absolute; inset: 0; pointer-events: none; }
.adv-hero-dibujos .trazo { position: absolute; }
.adv-hero-dibujos .d1 { top: 2%; left: 4%; width: 34px; height: 34px; color: var(--oro); }
.adv-hero-dibujos .d2 { top: 10%; right: 6%; width: 30px; height: 30px; color: var(--tinta-suave); }
.adv-hero-dibujos .d3 { top: 38%; left: 1%; width: 22px; height: 22px; color: var(--rojo); }
.adv-hero-dibujos .d4 { top: 32%; right: 2%; width: 44px; height: 32px; color: var(--verde); }
.adv-hero-dibujos .d5 { top: 0; right: 30%; width: 26px; height: 26px; color: var(--tinta-suave); }
.adv-hero-dibujos .d6 { top: 56%; left: 8%; width: 20px; height: 20px; color: var(--tinta-suave); }
@media (max-width: 599px) {
	.adv-hero-dibujos .d3, .adv-hero-dibujos .d6 { display: none; }
	.adv-hero-dibujos .d4 { top: 44%; }
}
.flota { animation: adv-flota 6s ease-in-out infinite; }
.flota:nth-child(2n) { animation-duration: 7.5s; animation-delay: -2s; }
.flota:nth-child(3n) { animation-duration: 9s; animation-delay: -4s; }
@keyframes adv-flota { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(6deg); } }

.adv-cuenta { margin: 0 0 22px; }
.adv-cuenta-etiqueta { margin: 0; font-family: var(--mano); font-size: 1.2rem; color: var(--tinta-suave); }
.adv-cuenta-numeros { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.2; }
.adv-cuenta-numeros { font-weight: 300; }
.adv-cuenta-numeros span { font-weight: 700; color: var(--rojo); font-variant-numeric: tabular-nums; }

/* línea de suelo con dibujos, como un boceto */
.adv-escena {
	position: relative;
	max-width: 720px;
	height: 120px;
	margin: 34px auto 0;
	color: var(--tinta);
}
.adv-escena::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7c40-3 75 2 120 0s90-4 140-1 90 3 136-1' fill='none' stroke='%2324211d' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.adv-escena .trazo { position: absolute; bottom: 14px; }
.adv-escena .e-abeto { left: 8%; width: 54px; height: 72px; color: var(--verde); }
.adv-escena .e-abeto2 { left: 17%; width: 34px; height: 46px; color: var(--verde); }
.adv-escena .e-casita { left: 40%; width: 84px; height: 74px; }
.adv-escena .e-regalo { right: 24%; width: 40px; height: 40px; color: var(--rojo); }
.adv-escena .e-gato { right: 4%; width: 92px; height: 38px; bottom: 12px; }
.adv-escena .e-luna { right: 12%; top: 0; bottom: auto; width: 28px; height: 28px; color: var(--oro); }
@media (max-width: 599px) {
	.adv-escena { height: 96px; }
	.adv-escena .e-abeto2, .adv-escena .e-luna { display: none; }
	.adv-escena .e-casita { left: 34%; width: 66px; height: 58px; }
	.adv-escena .e-gato { width: 72px; height: 30px; }
}

.adv-pasos { max-width: 860px; margin: 52px auto 44px; }
.adv-pasos h2 {
	margin: 0 0 18px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 2rem;
	text-align: center;
}
.adv-pasos ol { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.adv-pasos li {
	counter-increment: paso;
	position: relative;
	padding: 4px 0 0 52px;
	color: var(--tinta-2);
}
.adv-pasos li::before {
	content: counter(paso) '.';
	position: absolute;
	left: 6px;
	top: -8px;
	font-family: var(--mano);
	font-size: 2rem;
	line-height: 1;
	color: var(--rojo);
}
.adv-pasos strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--tinta); }
.adv-dorada-teaser {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 30px auto 0;
	max-width: 30em;
	font-family: var(--serif);
	font-size: 1.25rem;
	line-height: 1.3;
	text-align: center;
}
.adv-dorada-teaser .trazo { flex: none; width: 34px; height: 34px; color: var(--oro); fill: var(--oro-claro); }
.adv-dorada-teaser { font-weight: 300; }
.adv-dorada-teaser strong { font-weight: 700; }

.adv-registro { max-width: 540px; margin: 0 auto; scroll-margin-top: 16px; }
.adv-registro:focus { outline: none; }
.adv-registro .adv-caja { box-shadow: 6px 6px 0 var(--papel-2); }
.adv-registro .adv-flecha {
	position: absolute;
	top: -34px;
	right: 10px;
	width: 56px;
	height: 36px;
	color: var(--rojo);
	transform: scaleX(-1) rotate(10deg);
}

/* ---------- formularios ---------- */

.adv-form { display: grid; gap: 20px; margin-top: 6px; }
.adv-campo { display: grid; gap: 2px; }
.adv-campo label { font-family: var(--mano); font-size: 1.15rem; line-height: 1.1; color: var(--tinta-2); }
.adv-campo input[type="text"],
.adv-campo input[type="email"],
.adv-campo select {
	width: 100%;
	min-height: 46px;
	padding: 8px 2px;
	border: 0;
	border-bottom: 1.5px solid var(--tinta);
	border-radius: 0;
	background: transparent;
	color: var(--tinta);
	font: inherit;
	font-size: 1.08rem;
}
.adv-campo select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2.5c2.8 2.6 5.3 5 8 7 2.6-2.2 5.2-4.6 8-7.2' fill='none' stroke='%2324211d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 4px center / 16px 10px no-repeat; padding-right: 26px; }
.adv-campo input:focus, .adv-campo select:focus { outline: none; border-bottom-color: var(--rojo); box-shadow: 0 1px 0 var(--rojo); }
.adv-campo [aria-invalid="true"] { border-bottom-color: var(--error); }
.adv-campo-casilla { grid-template-columns: 28px 1fr; align-items: start; column-gap: 8px; }
.adv-campo-casilla input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--tinta); }
.adv-campo-casilla label { font-family: var(--sans); font-size: .93rem; line-height: 1.5; color: var(--tinta-2); }
.adv-campo-casilla .adv-error { grid-column: 1 / -1; }
.adv-error { margin: 4px 0 0; color: var(--error); font-size: .93rem; }
.adv-error-general { padding: 10px 14px; border: 1px dashed var(--error); border-radius: var(--a-mano-1); }
.adv-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.adv-ya-apuntada { margin: 18px 0 0; text-align: center; }

/* ---------- calendario ---------- */

.adv-cal-cabecera { text-align: center; padding: 18px 0 2px; }
.adv-cal-cabecera .adv-titulo { font-size: clamp(2.6rem, 11vw, 4.4rem); }

.adv-aviso-previa {
	margin: 6px 0 14px;
	padding: 10px 14px;
	border: 1.5px dashed var(--oro);
	border-radius: var(--a-mano-1);
	background: #fbf3dc;
	font-size: .95rem;
}
.adv-aviso-previa a { color: var(--rojo); }
.adv-bienvenida { margin: 6px 0 18px; padding: 18px 20px; }
.adv-bienvenida p { margin: 0; }

.adv-progreso { max-width: 420px; margin: 0 auto 30px; text-align: center; }
.adv-progreso-texto { margin: 0 0 6px; font-family: var(--mano); font-size: 1.3rem; line-height: 1.2; color: var(--tinta-2); }
.adv-progreso-texto strong { font-weight: 600; color: var(--rojo); }
.adv-progreso-barra {
	position: relative;
	height: 12px;
	border: 1.5px solid var(--tinta);
	border-radius: var(--a-mano-1);
	overflow: hidden;
}
.adv-progreso-barra span {
	display: block;
	height: 100%;
	background: repeating-linear-gradient(-45deg, var(--rojo) 0 3px, transparent 3px 7px);
	transition: width .7s ease;
}

.adv-puertas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 520px) { .adv-puertas { grid-template-columns: repeat(4, 1fr); gap: 22px 16px; } }
@media (min-width: 900px) { .adv-puertas { grid-template-columns: repeat(6, 1fr); gap: 26px 20px; } }

.adv-puerta-boton {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: center;
}
.adv-puerta-boton[aria-disabled="true"] { cursor: default; }

.adv-puerta-marco {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border: 1.5px solid var(--tinta);
	border-radius: var(--a-mano-1);
	background: var(--papel-2);
	perspective: 800px;
}
.adv-puerta:nth-child(3n+2) .adv-puerta-marco { border-radius: var(--a-mano-2); }
.adv-puerta:nth-child(3n) .adv-puerta-marco { border-radius: var(--a-mano-3); }

.adv-puerta-dentro {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--rojo);
}
.adv-puerta-dentro .trazo { width: 46%; height: 46%; }

.adv-puerta-hoja {
	position: absolute;
	inset: -1.5px;
	display: grid;
	place-items: center;
	border: 1.5px solid var(--tinta);
	border-radius: inherit;
	background: var(--papel);
	transform-origin: left center;
	transition: transform .8s cubic-bezier(.3, .7, .2, 1), background-color .3s ease;
	backface-visibility: hidden;
}
.adv-puerta-hoja::after { /* pomo */
	content: '';
	position: absolute;
	right: 12%;
	top: 50%;
	width: 7px;
	height: 7px;
	border: 1.5px solid var(--tinta);
	border-radius: 50%;
}
.adv-puerta-num {
	position: relative;
	font-family: var(--serif);
	font-size: clamp(2.2rem, 10vw, 3rem);
	line-height: 1;
}
.adv-puerta-num { font-weight: 300; }
.adv-puerta.es-abierta .adv-puerta-num { font-weight: 700; }
.adv-puerta-adorno {
	position: absolute;
	top: 9%;
	left: 12%;
	width: 18px;
	height: 18px;
	color: var(--tinta-suave);
}
.adv-puerta-circulo {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.9em;
	height: 1.55em;
	transform: translate(-50%, -50%) rotate(-6deg);
	color: var(--rojo);
	stroke-width: 2;
	font-size: clamp(2.2rem, 10vw, 3rem);
	stroke-dasharray: 320;
	stroke-dashoffset: 0;
	animation: adv-dibuja 1.4s ease-out .3s both;
}
@keyframes adv-dibuja { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }

.adv-puerta-pie {
	margin-top: 8px;
	min-height: 1.5em;
	font-family: var(--mano);
	font-size: 1.02rem;
	line-height: 1.2;
	color: var(--tinta-suave);
}

/* futura: cerrada, más tenue */
.adv-puerta.es-futura .adv-puerta-hoja { background: var(--papel); color: var(--tinta-suave); border-style: dashed; border-color: var(--tinta-suave); }
.adv-puerta.es-futura .adv-puerta-marco { border-color: var(--tinta-suave); }
.adv-puerta.es-futura .adv-puerta-hoja::after { border-color: var(--tinta-suave); }
.adv-puerta-candado { position: absolute; bottom: 9%; right: 10%; width: 18px; height: 18px; color: var(--tinta-suave); }
.adv-puerta.es-pronto .adv-puerta-hoja { color: var(--tinta-suave); }

/* disponible */
.adv-puerta.es-abierta .adv-puerta-boton:hover .adv-puerta-hoja { transform: rotateY(-20deg); }
.adv-puerta.es-hoy .adv-puerta-pie { color: var(--rojo); }

/* ya vista: entreabierta */
.adv-puerta.es-vista .adv-puerta-hoja { transform: rotateY(-64deg); }
.adv-puerta.es-vista .adv-puerta-boton:hover .adv-puerta-hoja { transform: rotateY(-72deg); }
.adv-puerta.es-vista .adv-puerta-pie { color: var(--verde); }

/* abriéndose */
.adv-puerta.abriendo .adv-puerta-hoja { transform: rotateY(-108deg); }

/* dorada (solo cuando ya se ha abierto) */
.adv-puerta.es-dorada .adv-puerta-marco,
.adv-puerta.es-dorada .adv-puerta-hoja { border-color: var(--oro); }
.adv-puerta.es-dorada .adv-puerta-hoja {
	background: radial-gradient(circle at 50% 45%, #fdf6e1 0 40%, var(--oro-claro) 100%);
	color: #6f4f12;
}
.adv-puerta.es-dorada .adv-puerta-hoja::after { border-color: var(--oro); }
.adv-puerta.es-dorada .adv-puerta-adorno { color: var(--oro); fill: var(--oro-claro); width: 22px; height: 22px; animation: adv-gira 8s linear infinite; }
.adv-puerta.es-dorada .adv-puerta-dentro { color: var(--oro); }
.adv-puerta.es-dorada .adv-puerta-dentro .trazo { fill: var(--oro-claro); }
.adv-puerta.es-dorada .adv-puerta-pie { color: var(--oro); }
@keyframes adv-gira { to { transform: rotate(360deg); } }

.adv-cal-pie { margin-top: 44px; text-align: center; }
.adv-enlace-boton {
	padding: 6px;
	border: 0;
	background: none;
	color: var(--tinta-suave);
	font: inherit;
	font-size: .85rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.adv-enlace-boton:hover { color: var(--error); }

/* ---------- ventana del regalo ---------- */

.adv-dialogo {
	width: min(540px, calc(100% - 24px));
	max-height: calc(100% - 24px);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--tinta);
	overflow: visible;
}
.adv-dialogo::backdrop { background: rgba(36, 33, 29, .45); }
.adv-dialogo[open] { animation: adv-aparece .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes adv-aparece { from { opacity: 0; transform: translateY(14px) rotate(-1deg); } to { opacity: 1; transform: none; } }

.adv-dialogo-caja {
	position: relative;
	max-height: calc(100vh - 24px);
	overflow: auto;
	padding: 30px 22px 24px;
	border: 1.5px solid var(--tinta);
	border-radius: var(--a-mano-2);
	background: var(--papel);
	box-shadow: 6px 6px 0 rgba(36, 33, 29, .9);
}
.adv-dialogo-cerrar {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--tinta);
	font-family: var(--mano);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}
.adv-dialogo-cerrar:hover { color: var(--rojo); }
.adv-dialogo-contenido:focus { outline: none; }

.adv-regalo-dia { margin: 0; font-family: var(--mano); font-size: 1.3rem; line-height: 1.1; color: var(--rojo); }
.adv-regalo-titulo {
	margin: 2px 40px 14px 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 7vw, 2.3rem);
	line-height: 1.05;
}
.adv-regalo-descripcion { color: var(--tinta-2); }
.adv-regalo-descripcion p { margin: 0 0 12px; }
.adv-regalo-descripcion ul { margin: 0 0 12px; padding-left: 1.2em; }
.adv-regalo-descripcion li { margin-bottom: 4px; }
.adv-regalo-truco {
	margin: 20px 0;
	padding: 14px 18px 12px;
	border: 1.5px solid var(--tinta);
	border-radius: var(--a-mano-3);
	background-color: #fffdf6;
	background-image: repeating-linear-gradient(transparent 0 27px, rgba(36, 33, 29, .1) 27px 28px);
	transform: rotate(-.6deg);
}
.adv-regalo-truco h3 { margin: 0 0 2px; font-family: var(--mano); font-weight: 700; font-size: 1.25rem; line-height: 1.1; color: var(--rojo); }
.adv-regalo-truco p { margin: 0; line-height: 28px; }
.adv-regalo-postal { margin: 16px 0; padding: 8px; border: 1.5px solid var(--tinta); border-radius: var(--a-mano-1); background: #fff; transform: rotate(.8deg); }
.adv-regalo-postal img { display: block; width: 100%; border-radius: 4px; }
.adv-regalo-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.adv-regalo-botones .adv-boton { flex: 1 1 auto; }
.adv-regalo-aviso { margin: 14px 0 0; font-size: .85rem; color: var(--tinta-suave); }
.adv-regalo-borrador { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px dashed var(--rojo); border-radius: 999px; font-family: var(--sans); font-size: .75rem; vertical-align: middle; }

.adv-dorada-caja {
	position: relative;
	margin: 20px 0 6px;
	padding: 18px 18px 16px;
	border: 1.5px solid var(--oro);
	border-radius: var(--a-mano-1);
	background: #fcf5e0;
}
.adv-dorada-caja h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.adv-dorada-caja p { margin: 0 0 10px; color: var(--tinta-2); }
.adv-dorada-plazas { font-family: var(--mano); font-size: 1.2rem; color: #7a5717 !important; }
.adv-dorada-estado { margin: 10px 0 0; font-weight: 500; color: var(--tinta) !important; }

.adv-cargando { margin: 24px 0; text-align: center; font-family: var(--mano); font-size: 1.2rem; color: var(--tinta-suave); }

/* ---------- pantallas grandes ---------- */

@media (min-width: 700px) {
	.adv-caja { padding: 38px 36px; }
	.adv-dialogo-caja { padding: 36px 34px 30px; }
	.adv-pasos ol { grid-template-columns: repeat(3, 1fr); gap: 28px; }
	.adv-hero { padding-top: 56px; }
}

/* ---------- sin animaciones si la persona lo pide ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.adv-nieve { display: none; }
}

@media (forced-colors: active) {
	.adv-puerta-hoja, .adv-puerta-marco { border: 2px solid CanvasText; }
}

/* ---------- botón de música ---------- */

.adv-musica {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 48px;
	min-height: 48px;
	padding: 6px 14px 6px 12px;
	border: 1.5px solid var(--tinta);
	border-radius: var(--a-mano-1);
	background: var(--papel);
	color: var(--tinta-suave);
	font-family: var(--mano);
	font-size: 1.05rem;
	cursor: pointer;
	box-shadow: 3px 3px 0 var(--papel-3);
	transition: color .2s ease, transform .2s ease;
}
.adv-musica .trazo { width: 24px; height: 24px; }
.adv-musica:hover { color: var(--tinta); transform: translate(-1px, -1px); }
.adv-musica[aria-pressed="true"] { color: var(--rojo); }
.adv-musica[aria-pressed="true"] .trazo { animation: adv-baila 2.6s ease-in-out infinite; }
.adv-musica[aria-pressed="false"] .trazo { opacity: .75; }
.adv-musica[aria-pressed="false"]::after { /* tachado a mano cuando está en silencio */
	content: '';
	position: absolute;
	left: 10px;
	top: 50%;
	width: 28px;
	height: 1.5px;
	background: var(--tinta-suave);
	transform: rotate(-35deg);
	border-radius: 2px;
}
@keyframes adv-baila { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg) translateY(-2px); } }
@media (max-width: 599px) {
	.adv-musica-texto { display: none; }
	.adv-musica { padding: 6px 12px; }
}

/* ---------- letra de Sita: interletraje -5 % y tamaños para leer bien ----------
   La letra manuscrita viene muy suelta; con -0,05em se lee como escrita de
   un tirón. Al apretarla, los textos pequeños suben de tamaño. */

.adv-marca, .adv-mano, .adv-antetitulo, .adv-titulo, .adv-caja h1, .adv-caja h2,
.adv-cuenta-etiqueta, .adv-cuenta-numeros, .adv-pasos h2, .adv-pasos li::before,
.adv-pasos strong, .adv-dorada-teaser, .adv-campo label, .adv-progreso-texto,
.adv-puerta-num, .adv-puerta-pie, .adv-dialogo-cerrar, .adv-regalo-dia,
.adv-regalo-titulo, .adv-regalo-truco h3, .adv-dorada-caja h3, .adv-dorada-plazas,
.adv-cargando, .adv-musica {
	letter-spacing: -.05em;
}

.adv-marca { font-size: 1.5rem; }
.adv-antetitulo { font-size: 1.6rem; }
.adv-titulo { line-height: .95; }
.adv-cuenta-etiqueta { font-size: 1.45rem; }
.adv-cuenta-numeros { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.adv-caja h1, .adv-caja h2 { font-size: clamp(2.1rem, 8vw, 2.8rem); }
.adv-pasos h2 { font-size: 2.5rem; }
.adv-pasos strong { font-size: 1.65rem; }
.adv-pasos li::before { font-size: 2.4rem; }
.adv-dorada-teaser { font-size: 1.55rem; }
.adv-campo label { font-size: 1.4rem; }
.adv-campo-casilla label { font-size: .95rem; letter-spacing: 0; }
.adv-progreso-texto { font-size: 1.6rem; }
.adv-puerta-pie { font-size: 1.25rem; }
.adv-regalo-dia { font-size: 1.55rem; }
.adv-regalo-titulo { font-size: clamp(2.1rem, 8vw, 2.7rem); line-height: 1; }
.adv-regalo-truco h3 { font-size: 1.55rem; }
.adv-dorada-caja h3 { font-size: 1.8rem; }
.adv-dorada-plazas { font-size: 1.45rem; }
.adv-cargando { font-size: 1.45rem; }
.adv-musica { font-size: 1.25rem; }
.adv-nota { font-size: .95rem; }
.adv-puerta-num { font-weight: 400; font-size: clamp(2.5rem, 11vw, 3.2rem); }
.adv-puerta.es-abierta .adv-puerta-num { font-weight: 700; }

/* ---------- más aire: lo que te espera + registro ---------- */

.adv-registro { max-width: 1100px; display: grid; gap: 34px; }
.adv-registro-form { position: relative; width: 100%; max-width: 540px; margin: 0 auto; }
.adv-registro-titulo {
	margin: 0 0 18px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2.4rem, 9vw, 3.6rem);
	line-height: 1;
	letter-spacing: -.05em;
}
.adv-lista-regalos { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; color: var(--tinta-2); font-size: 1.08rem; }
.adv-lista-regalos li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; }
.adv-lista-regalos .trazo { width: 30px; height: 30px; color: var(--rojo); }
.adv-lista-regalos li:nth-child(2) .trazo { color: var(--verde); }
.adv-lista-regalos li:nth-child(4) .trazo { color: var(--oro); }
.adv-registro-intro { max-width: 540px; margin: 0 auto; width: 100%; }

/* ---------- escritorio: usar el ancho ---------- */

@media (min-width: 900px) {
	.adv-cabecera, .adv-main, .adv-pie { max-width: 1240px; }
	.adv-cabecera { padding: 28px 40px; }
	.adv-main { padding: 0 40px 90px; }

	.adv-hero { padding: 90px 0 20px; }
	.adv-hero .adv-antetitulo { font-size: 1.9rem; margin-bottom: 10px; }
	.adv-titulo { font-size: clamp(5rem, 8.5vw, 8rem); margin-bottom: 26px; }
	.adv-hero .adv-entradilla { font-size: 1.32rem; max-width: 36em; margin-bottom: 40px; }
	.adv-cuenta { margin-bottom: 40px; }
	.adv-cuenta-etiqueta { font-size: 1.7rem; }
	.adv-cuenta-numeros { font-size: 3rem; }
	.adv-hero .adv-boton-grande { min-height: 62px; padding: 14px 42px; font-size: 1.2rem; }

	.adv-hero-dibujos .d1 { top: 8%; left: 6%; width: 46px; height: 46px; }
	.adv-hero-dibujos .d2 { top: 14%; right: 9%; width: 42px; height: 42px; }
	.adv-hero-dibujos .d3 { top: 44%; left: 3%; width: 30px; height: 30px; }
	.adv-hero-dibujos .d4 { top: 36%; right: 4%; width: 62px; height: 44px; }
	.adv-hero-dibujos .d5 { top: 4%; right: 28%; width: 32px; height: 32px; }
	.adv-hero-dibujos .d6 { top: 62%; left: 12%; width: 26px; height: 26px; }

	.adv-escena { max-width: 1060px; height: 170px; margin-top: 80px; }
	.adv-escena .e-abeto { width: 78px; height: 104px; }
	.adv-escena .e-abeto2 { width: 48px; height: 64px; left: 16%; }
	.adv-escena .e-casita { width: 118px; height: 104px; left: 41%; }
	.adv-escena .e-regalo { width: 56px; height: 56px; }
	.adv-escena .e-gato { width: 128px; height: 54px; }
	.adv-escena .e-luna { width: 38px; height: 38px; }

	.adv-pasos { max-width: 1120px; margin: 130px auto 120px; }
	.adv-pasos h2 { font-size: 3.2rem; margin-bottom: 54px; }
	.adv-pasos ol { gap: 64px; }
	.adv-pasos li { padding-left: 64px; font-size: 1.12rem; }
	.adv-pasos li::before { font-size: 3rem; top: -12px; }
	.adv-pasos strong { font-size: 2rem; margin-bottom: 6px; }
	.adv-dorada-teaser { margin-top: 80px; font-size: 1.9rem; max-width: 34em; }
	.adv-dorada-teaser .trazo { width: 46px; height: 46px; }

	.adv-registro { grid-template-columns: 1fr minmax(0, 520px); gap: 90px; align-items: center; margin-bottom: 40px; }
	.adv-registro-intro, .adv-registro-form { margin: 0; max-width: none; }
	.adv-registro-titulo { font-size: 4.6rem; margin-bottom: 30px; }
	.adv-lista-regalos { gap: 22px; font-size: 1.2rem; }
	.adv-lista-regalos li { grid-template-columns: 44px 1fr; gap: 16px; }
	.adv-lista-regalos .trazo { width: 40px; height: 40px; }

	.adv-centro { margin: 70px auto; }
	.adv-pie { padding: 50px 40px 60px; }

	/* calendario */
	.adv-cal-cabecera { padding: 50px 0 10px; }
	.adv-cal-cabecera .adv-titulo { font-size: clamp(4rem, 7vw, 6rem); }
	.adv-cal-cabecera .adv-entradilla { font-size: 1.2rem; }
	.adv-progreso { margin-bottom: 56px; }
	.adv-puertas { gap: 40px 30px; }
	.adv-puerta-num { font-size: 3.6rem; }
}
.adv-pasos .adv-dorada-teaser strong { display: inline; font-size: inherit; margin: 0; }
.adv-cuenta-seg { display: inline-block; min-width: 1.15em; text-align: center; }

/* ---------- puerta dorada: apertura con efecto ---------- */

.adv-puerta.dorada-anim { position: relative; z-index: 5; }
.adv-puerta.dorada-anim .adv-puerta-marco {
	animation: adv-tiembla .5s ease-in-out 2, adv-resplandor 1.6s ease-out forwards;
}
@keyframes adv-tiembla {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(-2.5deg) scale(1.02); }
	40% { transform: rotate(2.5deg) scale(1.03); }
	60% { transform: rotate(-1.5deg) scale(1.03); }
	80% { transform: rotate(1.5deg) scale(1.02); }
}
@keyframes adv-resplandor {
	0% { box-shadow: 0 0 0 0 rgba(241, 200, 90, 0); }
	45% { box-shadow: 0 0 46px 14px rgba(241, 200, 90, .75); }
	100% { box-shadow: 0 0 22px 4px rgba(241, 200, 90, .35); }
}
.adv-puerta.dorada-anim.abriendo .adv-puerta-hoja {
	transform: rotateY(-118deg);
	transition: transform .7s cubic-bezier(.2, 1.4, .4, 1);
}
.adv-rayos {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 380%;
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
	background: repeating-conic-gradient(from 0deg, rgba(241, 200, 90, .6) 0 5deg, transparent 5deg 15deg);
	-webkit-mask: radial-gradient(circle, #000 0 16%, transparent 60%);
	mask: radial-gradient(circle, #000 0 16%, transparent 60%);
	animation: adv-rayos 1.9s ease-out forwards;
}
@keyframes adv-rayos {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05) rotate(50deg); }
}
.adv-destello-dorado {
	position: fixed;
	inset: 0;
	z-index: 40;
	pointer-events: none;
	animation: adv-destello 1.5s ease-out forwards;
}
@keyframes adv-destello { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.adv-confeti { position: fixed; z-index: 45; pointer-events: none; width: 0; height: 0; }
.adv-confeti .trazo { position: absolute; left: 0; top: 0; }

/* ventana del regalo dorada */
.adv-dialogo.es-dorada .adv-dialogo-caja {
	border-color: var(--oro);
	background: radial-gradient(120% 70% at 50% 0%, #fdf3d3 0%, var(--papel) 60%);
	box-shadow: 6px 6px 0 var(--oro), 0 0 70px rgba(241, 200, 90, .45);
	overflow: hidden auto;
}
.adv-dialogo.es-dorada .adv-dialogo-caja::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
	transform: translateX(-120%);
	animation: adv-barrido 1.6s ease-out .35s forwards;
}
@keyframes adv-barrido { to { transform: translateX(120%); } }
.adv-dialogo.es-dorada .adv-regalo-dia { color: var(--oro); }
.adv-dialogo-estrella { position: absolute; color: var(--oro); fill: var(--oro-claro); pointer-events: none; }
.adv-dialogo-estrella.e1 { top: 14px; right: 58px; width: 26px; height: 26px; animation: adv-gira 7s linear infinite; }
.adv-dialogo-estrella.e2 { bottom: 16px; right: 18px; width: 18px; height: 18px; animation: adv-gira 9s linear infinite reverse; }
.adv-dialogo-estrella.e3 { top: 46%; left: 8px; width: 14px; height: 14px; color: var(--rojo); fill: none; }

/* la puerta se abre del todo aunque el ratón siga encima */
.adv-puerta.abriendo .adv-puerta-boton .adv-puerta-hoja,
.adv-puerta.abriendo .adv-puerta-boton:hover .adv-puerta-hoja { transform: rotateY(-108deg); }
.adv-puerta.dorada-anim.abriendo .adv-puerta-boton .adv-puerta-hoja,
.adv-puerta.dorada-anim.abriendo .adv-puerta-boton:hover .adv-puerta-hoja {
	transform: rotateY(-120deg);
	transition: transform .75s cubic-bezier(.2, 1.5, .4, 1);
}

/* más WOW: pop de la puerta, rayos más intensos y anillo de luz */
.adv-puerta.dorada-anim .adv-puerta-marco {
	animation: adv-tiembla .45s ease-in-out 2, adv-resplandor 2s ease-out forwards, adv-pop .5s cubic-bezier(.3, 1.8, .5, 1) .65s;
}
@keyframes adv-pop { 0% { scale: 1; } 40% { scale: 1.12; } 100% { scale: 1; } }
.adv-rayos {
	width: 520%;
	background: repeating-conic-gradient(from 0deg, rgba(240, 190, 70, .75) 0 4deg, transparent 4deg 12deg);
	animation-duration: 2.2s;
}
.adv-anillo {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60%;
	aspect-ratio: 1;
	border: 3px solid rgba(230, 172, 30, .9);
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
	animation: adv-anillo 1.1s ease-out forwards;
}
@keyframes adv-anillo {
	0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(5); border-width: 1px; }
}
.adv-dialogo.es-dorada[open] { animation: adv-aparece-dorada .7s cubic-bezier(.25, 1.6, .5, 1); }
@keyframes adv-aparece-dorada {
	0% { opacity: 0; transform: scale(.7) rotate(-3deg); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: none; }
}
/* respuesta inmediata al pulsar mientras pregunta al servidor */
.adv-puerta.pulsada .adv-puerta-marco { transform: scale(.97); transition: transform .12s ease; }

/* ---------- apertura de puertas: rápida y sin que la hoja desaparezca ----------
   La hoja nunca pasa de 90°: más allá se vería por detrás y se esfumaría. */
.adv-puerta-hoja { transition: transform .55s cubic-bezier(.25, .8, .3, 1), background-color .3s ease; }
.adv-puerta.asomando .adv-puerta-boton .adv-puerta-hoja,
.adv-puerta.asomando .adv-puerta-boton:hover .adv-puerta-hoja { transform: rotateY(-28deg); transition-duration: .25s; }
.adv-puerta.abriendo .adv-puerta-boton .adv-puerta-hoja,
.adv-puerta.abriendo .adv-puerta-boton:hover .adv-puerta-hoja { transform: rotateY(-82deg); }
.adv-puerta.dorada-anim.abriendo .adv-puerta-boton .adv-puerta-hoja,
.adv-puerta.dorada-anim.abriendo .adv-puerta-boton:hover .adv-puerta-hoja {
	transform: rotateY(-84deg);
	transition: transform .6s cubic-bezier(.3, 1.25, .5, 1);
}

/* ---------- títulos en mayúsculas de la letra de Sita ---------- */
.adv-marca span, .adv-titulo, .adv-caja h1, .adv-caja h2, .adv-pasos h2,
.adv-registro-titulo, .adv-regalo-titulo, .adv-dorada-caja h3 {
	text-transform: uppercase;
	letter-spacing: -.03em;
}
.adv-marca { font-size: 1.3rem; }
.adv-titulo { font-size: clamp(2.3rem, 10vw, 4.4rem); line-height: 1; }
.adv-cal-cabecera .adv-titulo { font-size: clamp(2.3rem, 10vw, 3.8rem); }
.adv-caja h1, .adv-caja h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.05; }
.adv-pasos h2 { font-size: 2.1rem; }
.adv-registro-titulo { font-size: clamp(2.1rem, 8vw, 3rem); line-height: 1.05; }
.adv-regalo-titulo { font-size: clamp(1.7rem, 6.5vw, 2.2rem); line-height: 1.05; }
.adv-dorada-caja h3 { font-size: 1.5rem; }
@media (min-width: 900px) {
	.adv-titulo { font-size: clamp(4.4rem, 7vw, 6.6rem); }
	.adv-cal-cabecera .adv-titulo { font-size: clamp(3.6rem, 6vw, 5rem); }
	.adv-pasos h2 { font-size: 2.8rem; }
	.adv-registro-titulo { font-size: 3.9rem; }
}

/* ---------- ventana del regalo más ancha, con imagen ---------- */

.adv-dialogo { width: min(920px, calc(100% - 24px)); }
.adv-dialogo-cerrar { z-index: 3; }

.adv-regalo-visual {
	position: relative;
	margin: 0 0 22px;
	aspect-ratio: 16 / 10;
	border: 1.5px solid var(--tinta);
	border-radius: var(--a-mano-3);
	background: var(--papel-2);
	overflow: hidden;
	transform: rotate(-1deg);
	box-shadow: 4px 4px 0 var(--papel-3);
}
.adv-regalo-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }

.adv-regalo-visual.es-ilustracion {
	display: grid;
	place-items: center;
	background-color: var(--papel-2);
	background-image: radial-gradient(rgba(36, 33, 29, .1) 1px, transparent 1.4px);
	background-size: 16px 16px;
}
.adv-regalo-visual .visual-principal { width: 42%; height: 42%; max-width: 190px; max-height: 190px; stroke-width: 1.3; color: var(--rojo); }
.adv-regalo-visual[data-tipo="enlace"] .visual-principal { color: var(--verde); }
.adv-regalo-visual[data-tipo="video"] .visual-principal { color: var(--tinta); }
.adv-regalo-visual[data-tipo="herramienta"] .visual-principal { color: var(--oro); }
.adv-regalo-visual[data-tipo="dorada"] { background-color: #fbf0cf; background-image: radial-gradient(rgba(184, 134, 43, .22) 1px, transparent 1.4px); border-color: var(--oro); }
.adv-regalo-visual[data-tipo="dorada"] .visual-principal { color: var(--oro); fill: var(--oro-claro); }
.adv-regalo-visual .visual-adorno { position: absolute; color: var(--tinta-suave); stroke-width: 1.2; }
.adv-regalo-visual .a1 { top: 12%; left: 10%; width: 26px; height: 26px; }
.adv-regalo-visual .a2 { top: 16%; right: 12%; width: 22px; height: 22px; }
.adv-regalo-visual .a3 { bottom: 14%; left: 16%; width: 18px; height: 18px; color: var(--oro); }
.adv-regalo-visual .a4 { bottom: 12%; right: 14%; width: 30px; height: 30px; color: var(--rojo); }
.adv-regalo-visual .visual-dia {
	position: absolute;
	top: 8px;
	right: 14px;
	font-family: var(--mano);
	font-size: 1.6rem;
	letter-spacing: -.05em;
	color: var(--tinta-suave);
}
.adv-regalo-visual .visual-dia::before { content: 'nº '; font-size: .8em; }

@media (min-width: 760px) {
	.adv-dialogo-caja { padding: 34px 36px 30px; }
	.adv-dialogo-contenido:has(> .adv-regalo-visual) {
		display: grid;
		grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
		gap: 38px;
		align-items: start;
	}
	.adv-regalo-visual {
		position: sticky;
		top: 0;
		margin: 6px 0 0;
		aspect-ratio: 4 / 5;
	}
	.adv-regalo-texto .adv-regalo-titulo { margin-right: 30px; }
}
.adv-regalo-visual .visual-dia { right: auto; left: 14px; }
.adv-regalo-visual .a1 { top: auto; bottom: 34%; left: 7%; }
@media (max-width: 759px) {
	.adv-regalo-visual { margin-top: 30px; }
}

/* ---------- frases que se escriben solas ---------- */
.adv-frases { min-height: 1.5em; }
.adv-frase { display: inline-block; transition: opacity .35s ease, transform .35s ease; }
.adv-frase.escribiendo { animation: adv-escribe 1.1s cubic-bezier(.4, .1, .3, 1) both; }
.adv-frase.se-va { opacity: 0; transform: translateY(-8px) rotate(-1deg); }
@keyframes adv-escribe {
	from { clip-path: inset(-10% 100% -20% 0); }
	to { clip-path: inset(-10% 0 -20% 0); }
}