/* Estilo: cartel editorial en papel con una sola tinta roja (referencia: img/style-page-2.jpg).
   Títulos en Anton (grotesca condensada), texto en Inter. Dibujos propios de una sola línea. */
:root {
  --papel: #EEEBE5;
  --superficie: #F7F5F1;
  --tinta: #1F1A17;
  --sec: #4F4843;
  --linea: #D6CFC4;
  --campo: #857C72;
  --rojo: #A8141C;
  --rojo-osc: #7E0E14;
  --error: #A8141C;
  --display: Anton, "Arial Narrow", Impact, sans-serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .32' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .3 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--tinta); font: 16px/1.6 var(--sans);
  background-color: var(--papel); background-image: var(--fibra);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { max-width: 100%; display: block; }
a { color: var(--rojo); text-underline-offset: 3px; }
a:hover { color: var(--rojo-osc); }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: 1160px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 820px; }

/* ---------- Tipografía ---------- */
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .95; }
h2 { font-size: clamp(44px, 9vw, 96px); color: var(--rojo); margin-bottom: 20px; }
h3 { font-size: clamp(26px, 3.2vw, 34px); }
.num, .etiqueta { margin: 0; font: 600 13px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rojo); }
.num { border-top: 1.5px solid var(--rojo); padding-top: 14px; margin-bottom: 18px; }
.lead { color: var(--sec); max-width: 640px; margin: 0 0 40px; font-size: 17px; }
.muted { color: var(--sec); }

/* Rótulos verticales en los márgenes (solo pantallas anchas) */
.lateral { display: none; }
@media (min-width: 1320px) {
  .lateral {
    display: block; position: fixed; top: 50%; z-index: 5; margin: 0; pointer-events: none;
    writing-mode: vertical-rl; font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--rojo);
  }
  .lateral--izq { left: 22px; transform: translateY(-50%) rotate(180deg); }
  .lateral--der { right: 22px; transform: translateY(-50%); }
}

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(238, 235, 229, .95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--rojo); padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow .4s ease;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; transition: min-height .4s var(--ease); }
.brand { font: 400 26px/1 var(--display); letter-spacing: .02em; color: var(--rojo); text-decoration: none; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.menu a { display: block; padding: 12px 0; font: 600 12px/20px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); text-decoration: none; }
.menu a:hover { color: var(--rojo); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--rojo); cursor: pointer; align-items: center; justify-content: center; }
.site-header.scrolled { box-shadow: 0 6px 18px rgba(31, 26, 23, .06); }
.site-header.scrolled .nav { min-height: 52px; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0;
    background: var(--papel); border-bottom: 1.5px solid var(--rojo); padding: 4px 20px 12px;
    max-height: calc(100dvh - 60px); overflow-y: auto;
  }
  .menu.open { display: flex; animation: drop .35s var(--ease); }
  .menu a { padding: 14px 0; font-size: 13px; border-bottom: 1px solid var(--linea); }
  .menu li:last-child a { border-bottom: 0; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border: 1.5px solid var(--rojo); border-radius: 0; cursor: pointer; text-decoration: none;
  font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--rojo); color: #fff; }
.btn-primary:hover { background: var(--rojo-osc); border-color: var(--rojo-osc); color: #fff; }
.btn-primary[disabled] { opacity: .6; cursor: progress; }
.btn-ghost, .btn-small { background: transparent; color: var(--rojo); }
.btn-ghost:hover, .btn-small:hover { background: var(--rojo); color: #fff; }
.btn-lg { min-height: 54px; padding: 0 32px; }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 12px; }

/* ---------- Portada (cartel) ---------- */
.hero { padding-block: clamp(24px, 4vw, 48px) clamp(56px, 9vw, 104px); }
.hero-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0 0 clamp(14px, 3vw, 26px);
  font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rojo);
}
.hero h1 { font-size: clamp(62px, 15.5vw, 188px); line-height: .88; color: var(--rojo); }
.hero .etiqueta { margin-top: 14px; }
.brindis { display: block; width: 100%; max-width: 620px; height: auto; margin: clamp(16px, 4vw, 40px) auto; }
.brindis path { stroke: var(--rojo); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-info { display: grid; grid-template-columns: auto 1fr; gap: 8px 32px; align-items: end; }
@media (max-width: 640px) { .hero-info { grid-template-columns: 1fr; } }
.hero-date { margin: 0; font: 400 clamp(32px, 6vw, 54px)/1.02 var(--sans); letter-spacing: -.02em; text-transform: uppercase; color: var(--rojo); }
.hero-date strong { font-weight: 800; }
.hero-lugar { margin: 0; font: 600 12px/1.7 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rojo); }
.hero-text { margin: 24px 0 0; max-width: 540px; color: var(--sec); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 480px) { .actions .btn { width: 100%; } }
.countdown { display: flex; gap: clamp(28px, 6vw, 56px); margin-top: 40px; padding-top: 18px; border-top: 1.5px solid var(--rojo); max-width: 540px; }
.countdown div { display: flex; flex-direction: column; }
.countdown span { font: 400 clamp(44px, 8vw, 72px)/1 var(--display); color: var(--rojo); font-variant-numeric: tabular-nums; }
.countdown small { font: 600 11px/1.8 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sec); }
.musica { margin-top: 28px; }
.musica iframe { display: block; width: 100%; max-width: 420px; height: 152px; margin: 16px 0 0; border: 0; }

/* Foto en blanco y negro entre la portada y el formulario */
.franja-foto { margin: 0; height: clamp(220px, 45vw, 520px); overflow: hidden; border-block: 1.5px solid var(--rojo); }
.franja-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: grayscale(1) contrast(1.05); }

/* ---------- Bandas ---------- */
.band { padding-block: clamp(64px, 10vw, 112px); }
.band-white { background: var(--superficie); }
.band-alt { background: transparent; }

/* ---------- Formulario ---------- */
.form { display: flex; flex-direction: column; gap: 28px; }
.grid-3, .grid-2 { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-size: 15px; font-weight: 600; padding: 0; }
.field legend { margin-bottom: 10px; }
.opt { font-weight: 400; color: var(--sec); }
.hint { margin: 0; font-size: 14px; color: var(--sec); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--campo); border-radius: 2px;
  background: #FFFDF9; color: var(--tinta); font: 16px/1.4 var(--sans); /* 16px evita el zoom en iPhone */
}
textarea { resize: vertical; }
input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--campo); border-radius: 2px; background: #FFFDF9; font-weight: 500;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.pill input:checked + span { background: var(--rojo); border-color: var(--rojo); color: #fff; font-weight: 600; }
.pill input:focus-visible + span { outline: 2px solid var(--rojo); outline-offset: 3px; }
.conditional { display: flex; flex-direction: column; gap: 28px; }
#bloque-si:not([hidden]) { padding-top: 28px; border-top: 1px solid var(--linea); }
[hidden] { display: none !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--error); font-weight: 600; margin: 0; }
#enviar { align-self: flex-start; }
@media (max-width: 480px) { #enviar { align-self: stretch; } }
.thanks { padding: 40px 24px; border: 1.5px solid var(--rojo); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.thanks h3 { font-size: 40px; color: var(--rojo); }
.thanks p { color: var(--sec); margin: 0 0 8px; }

/* ---------- Programa: la línea se vierte de la botella a la copa ---------- */
.vertido { max-width: 760px; margin: 24px auto 0; }
.vertido-botella, .vertido-copa { display: block; width: 160px; height: auto; margin: 0 auto; }
.timeline { --vertido: 1; position: relative; list-style: none; margin: 0; padding: 4px 0; }
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--rojo); transform-origin: top; transform: scaleY(var(--vertido));
}
.timeline li { position: relative; width: 50%; padding: 16px 28px; display: flex; flex-direction: column; gap: 2px; }
.timeline li:nth-child(odd) { text-align: right; align-items: flex-end; }
.timeline li:nth-child(even) { margin-left: 50%; }
.timeline li::after { content: ""; position: absolute; top: 34px; width: 18px; height: 2px; background: var(--rojo); }
.timeline li:nth-child(odd)::after { right: 0; }
.timeline li:nth-child(even)::after { left: 0; }
.timeline time { font: 400 clamp(34px, 5vw, 48px)/1 var(--display); color: var(--rojo); }
.timeline strong { font: 600 12px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.timeline span { color: var(--sec); font-size: 15px; }
/* Un dibujo por hora, al otro lado de la línea; se traza cuando aparece su hora */
.timeline .hito { position: absolute; top: 12px; width: clamp(56px, 9vw, 84px); height: auto; }
.timeline li:nth-child(odd) .hito { left: calc(100% + 28px); }
.timeline li:nth-child(even) .hito { right: calc(100% + 28px); }
@media (max-width: 480px) {
  .timeline li { padding: 14px 16px; }
  .timeline li::after { width: 10px; }
  .timeline li:nth-child(odd) .hito { left: calc(100% + 18px); }
  .timeline li:nth-child(even) .hito { right: calc(100% + 18px); }
}

/* ---------- Lugares y hoteles ---------- */
.grid-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.grid-hotels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 900px) { .grid-places, .grid-hotels { grid-template-columns: minmax(0, 1fr); } }
.place, .hotel { border-top: 1.5px solid var(--rojo); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.place p, .hotel p { margin: 0; }
.place .meta { font: 600 12px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rojo); }
.place-photo { margin: 0 0 8px; padding: 8px; background: var(--superficie); border: 1px solid var(--linea); }
.place-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.link { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; }
/* Cinta tipo kaiten con comida de lujo: se dibuja y luego los platos avanzan en bucle lento */
.dibujo--cinta { display: block; width: min(360px, 86vw); height: auto; margin: 0 0 32px auto; }
.cinta-platos { animation: cinta 16s linear 2.2s infinite; }

/* ---------- Autobuses ---------- */
.bus-list { border-top: 1.5px solid var(--rojo); }
.bus { display: grid; grid-template-columns: 140px minmax(0, 1fr) 100px; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.bus strong { font: 600 12px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rojo); }
.bus time { text-align: right; font: 400 30px/1 var(--display); color: var(--rojo); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .bus { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .bus span { grid-column: 1 / -1; grid-row: 2; color: var(--sec); }
}

/* Autobús de línea que llega rodando desde la izquierda una sola vez */
.bus-dibujo { margin: -8px 0 32px; }
.bus-dibujo svg { display: block; width: min(240px, 62vw); height: auto; }
.bus-dibujo .rueda { transform-box: fill-box; transform-origin: center; }
.bus-dibujo.in { animation: none; }
.bus-dibujo.in svg { animation: entra 2s var(--ease) backwards; }
.bus-dibujo.in .rueda { animation: girar 2s var(--ease) backwards; }
.bus-dibujo.in .trazo path { animation: none; stroke-dashoffset: 0; }

/* Alojamiento: perro salchicha que llega a su cojín, se le cae el gorro, cierra los ojos y ronca */
.perro { display: block; width: min(340px, 80vw); height: auto; margin: -8px 0 36px; overflow: visible; }
.perro .ojo-cerrado, .perro .zzz { opacity: 0; }
.perro .gorro { transform-box: fill-box; transform-origin: 100% 100%; }
.perro.in .perro-cuerpo { animation: llegar 1.8s var(--ease) backwards; }
.perro.in .gorro { animation: caer-gorro 1.1s ease-in-out 2s both; }
.perro.in .ojo-abierto { animation: apagar .35s ease 2.6s forwards; }
.perro.in .ojo-cerrado { animation: encender .35s ease 2.6s forwards; }
.perro.in .zzz { animation: zzz 3.6s ease-in-out calc(3s + var(--z) * .6s) infinite; }

/* ---------- Regalo ---------- */
.dibujo--regalo { display: block; width: min(180px, 50vw); height: auto; margin: 0 0 28px; }
.dibujo--regalo .lazo { transform-box: fill-box; transform-origin: 50% 100%; }
.dibujo--regalo .tapa { transform-box: fill-box; transform-origin: 50% 100%; }
.iban { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border: 1.5px solid var(--rojo); max-width: 100%; }
#iban-text { font: 500 17px/1.4 var(--sans); letter-spacing: .06em; word-break: break-all; font-variant-numeric: tabular-nums; }

/* ---------- Preguntas ---------- */
details { border-bottom: 1px solid var(--linea); }
details:first-of-type { border-top: 1.5px solid var(--rojo); margin-top: 8px; }
summary { cursor: pointer; font-weight: 600; padding: 18px 0; min-height: 44px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; content: "+" / ""; font: 400 26px/1 var(--sans); color: var(--rojo); transition: transform .45s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0; padding-bottom: 18px; color: var(--sec); }
details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
details[open]::details-content { block-size: auto; }

/* ---------- Pie ---------- */
.footer { background: var(--rojo); color: #fff; padding-block: 48px; }
.footer a { color: #fff; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.footer-names { font: 400 clamp(40px, 7vw, 72px)/.9 var(--display); text-transform: uppercase; }

/* ---------- Movimiento sobrio (se apaga con prefers-reduced-motion) ---------- */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
@keyframes trazo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes acercar-i { from { translate: -48px 0; } }
@keyframes acercar-d { from { translate: 48px 0; } }
/* Brindis en bucle de 5 s: se echan atrás, chocan y vuelven; el resto del ciclo, quietos */
@keyframes chocar-i { 0%, 18%, 100% { rotate: 0deg; } 5% { rotate: -3deg; } 10% { rotate: 4deg; } }
@keyframes chocar-d { 0%, 18%, 100% { rotate: 0deg; } 5% { rotate: 3deg; } 10% { rotate: -4deg; } }
@keyframes chispa-bucle { 0%, 100% { opacity: 1; } 3%, 9% { opacity: 0; } 12% { opacity: 1; } }
@keyframes entra { from { transform: translateX(-110vw); } }
@keyframes girar { from { rotate: -900deg; } }
@keyframes llegar { from { translate: 140px 0; } }
@keyframes caer-gorro { from { rotate: 0deg; } to { rotate: -10deg; } }
@keyframes apagar { to { opacity: 0; } }
@keyframes encender { to { opacity: 1; } }
@keyframes zzz { 0% { opacity: 0; translate: 0 6px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 8px -18px; } }
@keyframes cinta { to { transform: translateX(120px); } }
@keyframes chispa { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes atar { 0% { scale: .55; } 60% { scale: 1.08; } 100% { scale: 1; } }
@keyframes saltito { 0%, 100% { translate: 0 0; } 40% { translate: 0 -7px; } 70% { translate: 0 1px; } }

/* Portada: entrada escalonada y brindis (solo CSS) */
.hero > .wrap > * { animation: rise .9s var(--ease) calc(var(--i, 0) * 90ms + 100ms) both; }
.hero > .wrap > :nth-child(2) { --i: 1; }
.hero > .wrap > :nth-child(3) { --i: 2; }
.hero > .wrap > :nth-child(4) { --i: 3; }
.hero > .wrap > :nth-child(5) { --i: 4; }
.hero > .wrap > :nth-child(6) { --i: 5; }
.hero > .wrap > :nth-child(7) { --i: 6; }
.hero > .wrap > :nth-child(8) { --i: 7; }
.hero > .wrap > :nth-child(9) { --i: 8; }
.brindis path { stroke-dasharray: 1; animation: trazo 1.8s var(--ease) .5s backwards; }
.brindis .pez-i { transform-box: fill-box; transform-origin: 100% 50%; animation: acercar-i 1.6s var(--ease) .4s backwards, chocar-i 5s ease-in-out 2s infinite; }
.brindis .pez-d { transform-box: fill-box; transform-origin: 0% 50%; animation: acercar-d 1.6s var(--ease) .4s backwards, chocar-d 5s ease-in-out 2s infinite; }
.brindis .chispa { animation: trazo .5s ease 2.5s backwards, chispa-bucle 5s linear 2s infinite; }

/* Aparición al hacer scroll (motion.js añade .reveal y luego .in) */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; animation: rise .9s var(--ease) var(--d, 0ms) backwards; }

/* Dibujos de línea: el trazo se dibuja al aparecer (paths con pathLength="1") */
.trazo path { stroke: var(--rojo); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.reveal:not(.in) .trazo path, .reveal:not(.in).trazo path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.in .trazo path, .in.trazo path { stroke-dasharray: 1; animation: trazo 1.6s var(--ease) calc(var(--d, 0ms) + 200ms) backwards; }
/* Regalo: caja, después la cinta, el lazo se ata y la tapa da un saltito */
.dibujo--regalo.in .cinta { animation-duration: .9s; animation-delay: 1.3s; }
.dibujo--regalo.in .lazo path { animation-duration: 1s; animation-delay: 2s; }
.dibujo--regalo.in .lazo { animation: atar .7s var(--ease) 2.6s backwards; }
.dibujo--regalo.in .tapa { animation: saltito .6s ease-out 3.2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; }
  .perro .ojo-abierto { opacity: 0; }
  .perro .ojo-cerrado, .perro .zzz { opacity: 1; }
}