/* Portada vertical, con papel cálido y una apertura de pantalla completa. */
body { --tartan: repeating-linear-gradient(90deg, transparent 0 26px, #fce1ae91 26px 29px, transparent 29px 34px, #153e32b3 34px 55px, transparent 55px 63px), repeating-linear-gradient(0deg, #a7232b 0 26px, #e5c797 26px 29px, #a7232b 29px 34px, #214838 34px 55px, #a7232b 55px 63px); }
.topbar { background: var(--paper); }
.hero {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  background: radial-gradient(ellipse at 50% 45%, var(--card), transparent 70%), var(--paper);
  border-bottom: 10px solid transparent;
  border-image: var(--tartan) 1;
}
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr); min-height: calc(100svh - 65px); gap: 0; padding: 76px 0 48px; place-items: center; text-align: center; }
.hero-copy { width: min(100%, 570px); margin: auto; }
.hero .kicker { color: var(--accent); }
.hero h1 { color: var(--accent); font-size: clamp(3rem, 8vw, 6.2rem); letter-spacing: -.035em; }
.hero .lead { color: var(--ink); margin: 18px auto 0; font-size: clamp(.96rem, 2vw, 1.15rem); }
.hero .date { margin-top: 14px; letter-spacing: .16em; }
.hero .actions { justify-content: center; margin-top: 18px; }
.hero .btn:not(.secondary) { background: var(--accent); color: #fff; }
.hero .btn { border-radius: 999px; }
.hero-rule { display: flex; gap: 12px; align-items: center; justify-content: center; color: var(--accent); width: min(90%, 300px); margin: 18px auto 0; }
.hero-rule::before,.hero-rule::after { content: ''; flex: 1; height: 1px; background: var(--accent); opacity: .45; }
.hero .countdown { border: 0; padding: 0; margin: 9px auto 0; max-width: 310px; gap: 0; }
.hero .countdown strong { color: var(--accent); }
.hero .countdown div+div { border-left: 1px solid var(--line); }
.hero .countdown span { font-size: .61rem; }
.count-caption { color: var(--accent); text-transform: uppercase; letter-spacing: .22em; font-size: .62rem; margin-top: 23px; }
.hero-art { grid-row: auto; position: absolute; inset: auto 10px 12px auto; z-index: -1; width: clamp(95px, 16vw, 240px); max-width: none; border: 0; border-radius: 0!important; box-shadow: none; }
.hero-art img,.poster .hero-art img { aspect-ratio: 5/6; object-fit: contain; }
.hero-decoration { position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(80%, 510px); z-index: -1; }
.hero-decoration img { height: clamp(68px, 12vh, 125px); object-fit: contain; object-position: top; }
body[data-model="nochebuena"] .hero h1 { font-family: 'Great Vibes', Georgia, cursive; font-weight: 400; letter-spacing: 0; font-size: clamp(3.7rem, 9.2vw, 7.1rem); line-height: 1.1; }
body[data-model="amigo-invisible"] .hero { background: var(--stage); background-image: url('candy-pattern.svg'); --stage: #45634c; }
body[data-model="amigo-invisible"] .hero-copy { background: var(--card); padding: clamp(22px, 5vw, 46px); border-radius: 29px; box-shadow: 0 16px 45px #17291c4d; }
body[data-model="amigo-invisible"] .hero-grid { padding-top: 48px; }
body[data-model="amigo-invisible"] .hero h1 { font-family: 'Playfair Display',Georgia,serif; font-weight: 800; font-style: italic; }
body[data-model="papa-noel"] .hero h1 { font-family: 'Nunito',system-ui,sans-serif; font-weight: 900; }
body[data-model="papa-noel"] .hero-art { position: static; grid-row: 1; width: clamp(112px, 20vw, 210px); z-index: 0; margin-bottom: -12px; }
body[data-model="papa-noel"] .hero-grid { padding-top: 20px; gap: 12px; align-content: center; }
body[data-model="papa-noel"] .hero-decoration { display: none; }
body[data-model="noche-nevada"] .hero { background: var(--stage); color: var(--stage-ink); }
body[data-model="noche-nevada"] .hero :is(.lead,.date) { color: var(--stage-ink); }
body[data-model="noche-nevada"] .hero :is(h1,.kicker,.hero-rule,.count-caption,.countdown strong) { color: var(--spark); }
body[data-model="noche-nevada"] .hero .btn:not(.secondary) { background: var(--spark); color: var(--spark-ink); }
body[data-model="navidad-dorada"] .hero { border-image: linear-gradient(90deg,#876235,#efcd86,#876235) 1; }
body[data-model="navidad-tropical"] .hero { background: radial-gradient(ellipse at 50% 44%, #fff7df, transparent 70%), #f0c78d; }
.event-grid { grid-template-columns: minmax(0, 640px); gap: 22px; justify-content: center; }
.event-copy { text-align: center; }
.event-card,.panel { width: 100%; }
.event-grid .panel { text-align: left; }
.section .kicker { color: var(--accent); }
.agenda .kicker { color: var(--spark); }

.intro[open] {
  display: grid;
  place-items: center;
  inset: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  overflow: auto;
  border-radius: 0;
  isolation: isolate;
  padding: 20px 16px;
  background: var(--stage);
  color: var(--stage-ink);
  transition: opacity .3s;
}
body:has(.intro[open]) { overflow: hidden; }
.intro-stage { width: min(100%, 480px); text-align: center; position: relative; z-index: 2; transition: opacity .25s, transform .4s; }
.intro img { width: min(55vw, 200px); border-radius: 0; object-fit: contain; margin: 0 auto 12px; aspect-ratio: 1; }
.intro .intro-open { border-radius: 999px; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.intro .intro-skip { display: block; margin: 12px auto 0; background: transparent; border: none; color: inherit; padding: 5px; text-decoration: underline; font-size: .8rem; }
.intro.is-opening { opacity: 0; }
.intro.is-opening .intro-stage { transform: scale(.98); }
.intro-gift[open] { background: var(--tartan); }
.intro-bow { display: block; margin: 0 auto 12px; padding: 0; border: 0; background: transparent; border-radius: 8px; }
.intro .intro-bow img { margin: 0; }
.intro-bow:focus-visible { outline-color: #fff5e7; }
.gift-wrap { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.gift-wrap::before,.gift-wrap::after { content: ''; position: absolute; background: linear-gradient(90deg,#a77c36,#f9dfa1,#b48332); }
.gift-wrap::before { top: 0; bottom: 0; width: 42px; left: calc(50% - 21px); }
.gift-wrap::after { top: 44%; height: 42px; left: 0; right: 0; background: linear-gradient(#a77c36,#f9dfa1,#b48332); }
.intro-gift .intro-note,.intro-switch .intro-note { background: #fff5e7; color: #7f2e32; padding: 20px 15px; border-radius: 8px; box-shadow: 0 12px 40px #25221466; }
.intro-gift .intro-note { rotate: -2deg; border: 1px solid #c29b63; outline: 3px solid #fff5e7; }
.intro-gift .intro-note h2 { font-family: 'Great Vibes',Georgia,cursive; font-size: clamp(2.8rem, 9vw, 4rem); }
.intro-gift .intro-note .kicker,.intro-switch .intro-note .kicker,.intro-letter .kicker { color: #754738; }
.intro-gift .intro-open,.intro-switch .intro-open,.intro-letter .intro-open { background: #9f3038; color: #fff; }
.intro-switch[open] { background: #292d29 url('candy-pattern.svg'); background-blend-mode: luminosity; }
.intro-switch .intro-note { border-radius: 28px; }
.intro-switch .intro-stage { width: min(100%, 345px); }
.switch-track { display: block; border: 0; margin: 18px auto 2px; width: 112px; text-align: right; padding: 10px 15px; border-radius: 30px; position: relative; background: #ddd5c9; color: #4e4841; font-weight: 700; }
.switch-track::before { content: ''; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px #0003; position: absolute; top: 7px; left: 7px; transition: translate .25s; }
.intro-switch.is-opening { opacity: 1; background: #45634c url('candy-pattern.svg'); }
.intro-switch.is-opening .switch-track { text-align: left; background: #356648; color: #fff; }
.intro-switch.is-opening .switch-track::before { translate: 66px 0; }
.intro-letter[open] { background: radial-gradient(ellipse at center,#fff9e9,#f0e1c7); color: #832d34; }
.intro-letter .intro-stage { display: grid; justify-items: center; gap: 10px; }
.intro-letter .intro-note { grid-row: 1; }
.intro-letter img { width: min(67vw, 255px); margin-block: 18px; }
.intro-letter.is-opening img { transform: translateY(-24px) rotate(4deg); transition: transform .35s; }
@media(max-width:700px) {
  .hero-grid { min-height: calc(100svh - 56px); padding: 85px 0 48px; }
  .hero-art { width: 76px; right: 6px; bottom: 4px; }
  .hero .actions { gap: 8px; }
  .hero .btn { padding-inline: 13px; }
  body[data-model="papa-noel"] .hero-art { width: 128px; }
  body[data-model="amigo-invisible"] .hero-art { display: none; }
}