/* =======================================================================
   Regalo de aniversario · estilo Soft UI Evolution, romántico y tierno
   Mobile-first. Paleta: rosa/crema/dorado + acento rosa amarilla.
   ======================================================================= */

:root {
  --rose-900: #831843;   /* texto principal (vino) */
  --rose-700: #be185d;
  --rose-600: #DB2777;   /* primario */
  --rose-400: #F472B6;   /* secundario */
  --rose-200: #fbcfe8;
  --cream:    #FDF2F8;   /* fondo */
  --cream-2:  #fff7fb;
  --gold:     #CA8A04;   /* dorado / CTA */
  --gold-soft:#eab308;
  --yellow:   #FACC15;   /* rosas amarillas */
  --yellow-2: #fde047;
  --leaf:     #4d7c4d;

  --ink:      var(--rose-900);
  --muted:    #9d5a7a;

  --shadow-sm: 0 2px 8px rgba(131, 24, 67, .08);
  --shadow-md: 0 10px 30px rgba(131, 24, 67, .14);
  --shadow-lg: 0 24px 60px rgba(131, 24, 67, .22);

  --radius: 22px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* z-index scale */
  --z-petals: 1;
  --z-home: 10;
  --z-screen: 30;
  --z-lightbox: 50;
}

* { box-sizing: border-box; }

/* El atributo [hidden] debe ocultar SIEMPRE, aunque la regla del elemento
   defina display (p. ej. .lightbox usa display:flex). Sin esto, la capa
   quedaría extendida e interceptaría los clics. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Cormorant Infant", Georgia, serif;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--cream-2), var(--cream)) fixed;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; }

/* ---------- Pétalos flotando ---------- */
.petals {
  position: fixed; inset: 0;
  z-index: var(--z-petals);
  pointer-events: none;
  overflow: hidden;
}
.petals span {
  position: absolute;
  top: -8vh;
  font-size: 1.1rem;
  color: var(--rose-400);
  opacity: .55;
  animation: fall linear infinite;
  will-change: transform;
}
@keyframes fall {
  0%   { transform: translateY(-10vh) translateX(0) rotate(0deg); }
  100% { transform: translateY(112vh) translateX(8vw) rotate(360deg); }
}

/* ====================================================================
   PANTALLA DE INICIO
   ==================================================================== */
.home {
  position: relative;
  z-index: var(--z-home);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 2.25rem);
  padding: calc(env(safe-area-inset-top) + 2rem) 1.25rem calc(env(safe-area-inset-bottom) + 1.5rem);
  text-align: center;
}

.home__header { animation: rise .9s var(--ease) both; }
.home__eyebrow {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.4rem, 6vw, 2.1rem);
  color: var(--rose-600);
  line-height: 1;
}
.home__title {
  margin: .2em 0 0;
  font-weight: 600;
  font-size: clamp(2.1rem, 9vw, 3.4rem);
  letter-spacing: .5px;
  color: var(--rose-900);
}

/* ---------- Contador ---------- */
.counter {
  width: 100%;
  max-width: 520px;
  animation: rise 1s var(--ease) .1s both;
}
.counter__lead {
  margin: 0 0 .6rem;
  font-style: italic;
  color: var(--muted);
  font-size: 1.05rem;
}
.counter__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
}
.counter__cell {
  background: linear-gradient(180deg, #ffffff, var(--cream-2));
  border: 1px solid var(--rose-200);
  border-radius: 16px;
  padding: .7rem .2rem;
  box-shadow: var(--shadow-sm);
}
.counter__num {
  display: block;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rose-600);
  font-variant-numeric: tabular-nums;
}
.counter__num.tick { animation: pop .4s var(--ease); }
.counter__label {
  display: block;
  margin-top: .25rem;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Tarjetas-botón ---------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
  max-width: 520px;
  animation: rise 1.05s var(--ease) .2s both;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.4rem 1rem;
  border: 1px solid var(--rose-200);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, var(--cream-2));
  color: var(--rose-700);
  box-shadow: var(--shadow-md);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  overflow: hidden;
}
.card::after { /* brillo dorado sutil al pasar */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(202,138,4,.10), transparent 60%);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.card:hover, .card:focus-visible {
  border-color: var(--gold-soft);
  color: var(--rose-600);
  box-shadow: var(--shadow-lg);
}
.card:hover::after, .card:focus-visible::after { opacity: 1; }
.card:active { box-shadow: var(--shadow-sm); }
.card__icon { color: var(--rose-600); }
.card__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--rose-900);
}
.card__sub {
  font-family: "Great Vibes", cursive;
  font-size: 1.25rem;
  color: var(--gold);
  line-height: 1;
}

.home__footnote {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}
.home__footnote span { color: var(--rose-600); font-style: normal; }

/* ====================================================================
   SECCIONES (overlay que "entra" desde el botón)
   ==================================================================== */
.screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-screen);
  background:
    radial-gradient(130% 90% at 50% -10%, var(--cream-2), var(--cream));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* animación de apertura: nace en el punto del botón pulsado */
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  opacity: 0;
  transform: scale(.18);
  transition: transform .5s var(--ease), opacity .35s ease;
}
.screen.is-open {
  opacity: 1;
  transform: scale(1);
}
.screen__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 4.5rem) 1.25rem calc(env(safe-area-inset-bottom) + 2.5rem);
}
.screen__inner--center {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.screen__title {
  text-align: center;
  font-weight: 600;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  color: var(--rose-900);
  margin: 0 0 1.4rem;
}

/* ---------- Botón volver ---------- */
.back {
  position: fixed;
  top: calc(env(safe-area-inset-top) + .9rem);
  left: .9rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 44px;
  padding: .5rem .95rem .5rem .6rem;
  border: 1px solid var(--rose-200);
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  color: var(--rose-700);
  font-size: 1.05rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), color .2s var(--ease);
}
.back:hover, .back:focus-visible { color: var(--rose-600); box-shadow: var(--shadow-md); }

/* ====================================================================
   CARTA — sobre que se abre
   ==================================================================== */
.envelope {
  position: relative;
  margin: 1rem auto 0;
  max-width: 560px;
}
.envelope__flap-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: 3rem 1rem;
  border: 1px dashed var(--rose-400);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, var(--cream-2));
  box-shadow: var(--shadow-md);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), opacity .4s ease;
}
.envelope__flap-btn:hover { box-shadow: var(--shadow-lg); }
.envelope__seal {
  font-size: 2.6rem;
  color: var(--rose-600);
  filter: drop-shadow(0 4px 8px rgba(219,39,119,.35));
  animation: heartbeat 1.6s ease-in-out infinite;
}
.envelope__hint {
  font-family: "Great Vibes", cursive;
  font-size: 1.5rem;
  color: var(--gold);
}
.envelope.is-open .envelope__flap-btn {
  opacity: 0;
  transform: scale(.96);
  pointer-events: none;
  height: 0; padding: 0; margin: 0; border: 0; overflow: hidden;
}

.letter {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(14px);
  transition: max-height .7s var(--ease), opacity .6s ease .15s, transform .6s var(--ease) .15s;
  background:
    repeating-linear-gradient(180deg, transparent, transparent 37px, rgba(219,39,119,.08) 38px),
    linear-gradient(180deg, #fffafc, #fff);
  border: 1px solid var(--rose-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.envelope.is-open .letter {
  max-height: 2000px;
  opacity: 1;
  transform: translateY(0);
  padding: clamp(1.5rem, 5vw, 2.6rem);
}
.letter__title {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 2.9rem);
  color: var(--rose-600);
  margin: 0 0 .6rem;
}
.letter__body p {
  margin: 0 0 1rem;
  font-size: 1.18rem;
  line-height: 1.75;
  max-width: 60ch;
}
.letter__sign {
  margin: 1.6rem 0 0;
  text-align: right;
  font-family: "Great Vibes", cursive;
  font-size: 1.8rem;
  color: var(--gold);
}

/* ====================================================================
   GALERÍA
   ==================================================================== */
.gallery {
  position: relative;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.gallery__viewport {
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: #fff;
}
.gallery__track {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  transition: transform .45s var(--ease);
  touch-action: pan-y;
}
.gallery__slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
}
.gallery__slide button {
  border: 0;
  padding: 0;
  background: var(--rose-200);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery__caption {
  padding: .8rem 1rem;
  text-align: center;
  font-style: italic;
  color: var(--muted);
  background: var(--cream-2);
}
.gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  color: var(--rose-600);
  background: linear-gradient(135deg, var(--rose-200), var(--cream-2));
  font-family: "Great Vibes", cursive;
  font-size: 1.6rem;
  text-align: center;
  padding: 1rem;
}
.gallery__nav {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--rose-200);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: var(--rose-600);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), color .2s;
}
.gallery__nav:hover { box-shadow: var(--shadow-md); color: var(--rose-700); }
.gallery__counter {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.gallery__counter #gallery-current { color: var(--rose-600); font-weight: 600; }
.gallery__sep { color: var(--rose-200); margin: 0 .15em; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(74,12,40,.82);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox__figure {
  margin: 0;
  max-width: min(92vw, 720px);
  max-height: 86svh;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: 76svh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.lightbox__figure figcaption {
  color: #fff;
  text-align: center;
  font-style: italic;
}
.lightbox__close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 1rem);
  right: 1rem;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: #fff;
  transition: background .2s;
}
.lightbox__close:hover { background: rgba(255,255,255,.28); }

/* ====================================================================
   REGALOS — texto + imagen
   ==================================================================== */
.gift {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  animation: rise .7s var(--ease) both;
}
.gift__img {
  display: block;
  width: 100%;
  max-width: 360px;
  max-height: 60svh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  margin: 1.6rem auto 0;
}
.gift__text p {
  margin: 0 0 1rem;
  font-size: 1.18rem;
  line-height: 1.75;
}
.gift__text p:last-child { margin-bottom: 0; }

/* Cuadrícula de fotos (monumentos) */
.gift__grid-title {
  margin: 2rem 0 1rem;
  text-align: center;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  color: var(--gold);
}
.gift__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
}
.gift__cell {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--rose-200);
  box-shadow: var(--shadow-sm);
}
.gift__cell img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gift__cell figcaption {
  padding: .55rem .6rem;
  text-align: center;
  font-size: .98rem;
  line-height: 1.3;
  color: var(--rose-700);
}
@media (min-width: 600px) {
  .gift__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ====================================================================
   ANIMACIONES
   ==================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop  { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.16); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .counter__grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 960px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  body { font-size: 19px; }
}

/* ====================================================================
   ACCESIBILIDAD: respeta prefers-reduced-motion
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .petals { display: none; }
  .screen { transform: none; }
}

/* Foco visible coherente */
:focus-visible {
  outline: 3px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 6px;
}