/* =========================================================
   Invitación · Caleb · Mi primer añito · Temática Selva
   Amor en una página
   ========================================================= */

:root {
  color-scheme: light;

  /* Selva */
  --selva-900: #142619;
  --selva-800: #1F3A2B;
  --selva-700: #2C4F3A;
  --selva-500: #4C7A55;
  --salvia-300: #B4C5A0;
  --salvia-100: #E6ECDB;

  /* Beige y café */
  --beige-50: #FBF7EE;
  --beige-100: #F4ECDC;
  --beige-200: #E6D8BD;
  --cafe-800: #4A3222;
  --cafe-600: #6E4C33;
  --caramelo: #B88A5A;
  --dorado: #C9A55C;

  --tinta: #2B2720;
  --tinta-suave: #5E574B;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radio: 22px;
  --sombra: 0 18px 40px -22px rgba(31, 58, 43, .45);
  --ancho: 520px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.portal-activo { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--beige-50);
  overflow-x: hidden;
}

[hidden] { display: none !important; }
.sin-corte { white-space: nowrap; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; cursor: pointer; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icono {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.icono--sm { width: 18px; height: 18px; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ---------- Tipografía común ---------- */
.sobretitulo {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--caramelo);
  margin-bottom: 10px;
}
.sobretitulo--claro { color: var(--salvia-300); }

.titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 9vw, 42px);
  line-height: 1.1;
  color: var(--selva-800);
  margin-bottom: 14px;
  font-variation-settings: "SOFT" 100;
  text-wrap: balance;
}
.titulo--claro { color: var(--beige-50); }
.titulo--sm { font-size: 30px; }

.bajada { color: var(--tinta-suave); }
.bajada--clara { color: rgba(251, 247, 238, .78); }

.firma {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--cafe-600);
  margin-top: 22px;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.boton:active { transform: scale(.97); }
.boton:focus-visible, .opcion input:focus-visible + span, .contador__btn:focus-visible,
.campo__entrada:focus-visible, .musica:focus-visible, .mes:focus-visible, .visor__btn:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 3px;
}

.boton--verde { background: var(--selva-700); color: var(--beige-50); box-shadow: var(--sombra); }
.boton--verde:hover { background: var(--selva-800); }
.boton--contorno { background: transparent; color: var(--selva-700); border-color: var(--selva-700); }
.boton--contorno:hover { background: var(--salvia-100); }
.boton--crema { background: var(--beige-100); color: var(--selva-800); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.boton--crema:hover { background: #fff; }
.boton--ancho { width: 100%; }

.botones { display: grid; gap: 10px; margin-top: 22px; }
.botones--dos { grid-template-columns: 1fr 1fr; }
.botones--dos .boton { padding-inline: 12px; white-space: nowrap; }

/* ---------- Portada de apertura ---------- */
.portal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 45%, var(--selva-700) 0%, var(--selva-800) 55%, var(--selva-900) 100%);
  transition: opacity .9s ease .5s, visibility 0s linear 1.4s;
}
.sin-js .portal { display: none; }

.portal__ramo {
  position: absolute;
  width: min(78vw, 420px);
  height: min(78vw, 420px);
  transition: transform 1.3s cubic-bezier(.7, 0, .3, 1);
}
.portal__ramo--si { top: -20px; left: -20px; }
.portal__ramo--sd { top: -20px; right: -20px; transform: scaleX(-1); }
.portal__ramo--ii { bottom: -20px; left: -20px; transform: scaleY(-1); }
.portal__ramo--id { bottom: -20px; right: -20px; transform: scale(-1, -1); }

.portal__contenido {
  position: relative;
  text-align: center;
  color: var(--beige-50);
  transition: opacity .5s ease, transform .5s ease;
}
.portal__nombre {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(72px, 24vw, 120px);
  line-height: .95;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--beige-50);
  text-shadow: 0 6px 30px rgba(0,0,0,.35);
}
.portal__sub {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--beige-200);
  margin: 8px 0 34px;
}
.portal__nota {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--salvia-300);
}
.portal__nota .icono { width: 16px; height: 16px; }

.portal--abierto { opacity: 0; visibility: hidden; pointer-events: none; }
.portal--abierto .portal__contenido { opacity: 0; transform: scale(.96); }
.portal--abierto .portal__ramo--si { transform: translate(-90%, -90%) rotate(-20deg); }
.portal--abierto .portal__ramo--sd { transform: scaleX(-1) translate(-90%, -90%) rotate(-20deg); }
.portal--abierto .portal__ramo--ii { transform: scaleY(-1) translate(-90%, -90%) rotate(-20deg); }
.portal--abierto .portal__ramo--id { transform: scale(-1, -1) translate(-90%, -90%) rotate(-20deg); }

/* ---------- Botón de música ---------- */
.musica {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 50;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 0;
  display: grid; place-items: center;
  color: var(--beige-50);
  background: var(--selva-700);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.5);
}
.musica[aria-pressed="true"] .icono { animation: latido 1.6s ease-in-out infinite; }
.musica[aria-pressed="false"] { background: var(--cafe-600); }
.musica[aria-pressed="false"]::after {
  content: ""; position: absolute; width: 30px; height: 2px;
  background: currentColor; transform: rotate(-45deg); border-radius: 2px;
}
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 92px 24px 120px;
  text-align: center;
  color: var(--beige-50);
  background:
    radial-gradient(90% 55% at 50% 30%, rgba(108, 150, 98, .35), transparent 70%),
    linear-gradient(180deg, var(--selva-800), var(--selva-900));
}
.hero__contenido { position: relative; z-index: 2; max-width: var(--ancho); margin: 0 auto; }

.ramo {
  position: absolute;
  width: min(62vw, 340px);
  height: min(62vw, 340px);
  pointer-events: none;
  z-index: 1;
}
.ramo--si { top: -14px; left: -14px; transform-origin: 0 0; animation: mecer-i 7s ease-in-out infinite; }
.ramo--sd { top: -14px; right: -14px; transform-origin: 50% 0; animation: mecer-d 8s ease-in-out infinite; }
.ramo--ii { bottom: -14px; left: -14px; transform: scaleY(-1); opacity: .9; }
.ramo--id { bottom: -14px; right: -14px; transform: scale(-1, -1); opacity: .9; }

@keyframes mecer-i { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2.5deg); } }
@keyframes mecer-d { 0%, 100% { transform: scaleX(-1) rotate(0); } 50% { transform: scaleX(-1) rotate(2.5deg); } }

.hero__liana {
  position: absolute;
  top: -10px;
  width: 44px; height: 240px;
  z-index: 1;
  transform-origin: 50% 0;
  animation: columpio 6s ease-in-out infinite;
}
.hero__liana--1 { left: 30%; height: 180px; }
.hero__liana--2 { right: 26%; height: 230px; animation-delay: -2.5s; }
@keyframes columpio { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

.hero__marco {
  position: relative;
  width: 232px; height: 232px;
  margin: 18px auto 30px;
}
.hero__marco::before {
  content: "";
  position: absolute; inset: -12px;
  border-radius: 50%;
  border: 1.5px dashed rgba(201, 165, 92, .7);
}
.hero__foto {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--beige-100);
  background: var(--salvia-100);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.7);
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }

.hero__sello {
  position: absolute;
  right: -6px; bottom: 4px;
  width: 88px; height: 88px;
  border-radius: 50%;
  display: grid; place-content: center;
  background: linear-gradient(145deg, var(--caramelo), var(--cafe-600));
  border: 3px solid var(--beige-100);
  box-shadow: 0 12px 24px -10px rgba(0,0,0,.6);
  color: var(--beige-50);
  line-height: 1;
}
.hero__sello-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 46px;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.hero__sello-txt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  margin-top: -2px;
}

.hero__nombre {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(76px, 25vw, 120px);
  line-height: .9;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  text-shadow: 0 6px 30px rgba(0,0,0,.35);
}
.hero__apellidos {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--dorado);
}
.hero__lema {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--beige-200);
}

.fecha-tira {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  max-width: 330px;
  margin: 30px auto 0;
}
.fecha-tira__lado {
  padding: 8px 0;
  border-top: 1px solid rgba(201, 165, 92, .6);
  border-bottom: 1px solid rgba(201, 165, 92, .6);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--beige-100);
}
.fecha-tira__dia {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 58px;
  line-height: 1;
  color: var(--beige-50);
}
.hero__hora { margin-top: 12px; color: var(--salvia-300); font-weight: 700; }

.hero__bajar {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  margin-top: 30px;
  border-radius: 50%;
  color: var(--beige-100);
  border: 1px solid rgba(251, 247, 238, .3);
  animation: rebote 2.4s ease-in-out infinite;
}
@keyframes rebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.onda {
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 60px;
  fill: var(--beige-50);
  z-index: 2;
}

.vacio {
  width: 100%; height: 100%;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  color: var(--selva-500);
  font-size: 13px; font-weight: 700;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), transparent 60%),
    var(--salvia-100);
}

/* ---------- Secciones ---------- */
.seccion {
  position: relative;
  padding: 76px 24px;
  text-align: center;
  overflow: hidden;
}
.seccion--salvia { background: var(--salvia-100); }
.seccion--selva {
  color: var(--beige-50);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(108, 150, 98, .3), transparent 70%),
    var(--selva-800);
}
.seccion--selva .ramo { width: min(42vw, 220px); height: min(42vw, 220px); opacity: .55; }
.seccion--selva:not(.seccion--rsvp) { padding-bottom: 130px; }

/* Cuenta regresiva */
#cuenta { padding-top: 56px; }
.cuenta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.cuenta__caja {
  display: grid;
  padding: 16px 4px 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--beige-200);
  box-shadow: var(--sombra);
}
.cuenta__num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1;
  color: var(--selva-800);
  font-variant-numeric: tabular-nums;
}
.cuenta__txt {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--caramelo);
}
.cuenta__fin {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--selva-800);
}

/* Mensaje */
.seccion--mensaje { padding-top: 24px; }
.mensaje__hoja { width: 46px; height: 54px; margin: 0 auto 14px; display: block; transform: rotate(180deg); }
.mensaje__texto {
  display: grid;
  gap: 14px;
  font-family: var(--serif);
  font-weight: 350;
  font-size: 19px;
  line-height: 1.65;
  color: var(--tinta);
}

/* Galería mes a mes */
.galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* si la última fila queda incompleta, va centrada */
  gap: 12px;
  margin-top: 28px;
}
.mes {
  flex: 0 0 calc((100% - 24px) / 3);
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 16px 16px;
  overflow: hidden;
  background: var(--beige-100);
  box-shadow: 0 12px 24px -16px rgba(31, 58, 43, .6);
  border: 3px solid #fff;
}
.mes img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mes:hover img { transform: scale(1.05); }
.mes__etiqueta {
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  color: var(--beige-50);
  background: rgba(74, 50, 34, .85);
}

/* Tarjetas */
.tarjeta {
  position: relative;
  margin-top: 26px;
  padding: 34px 22px 26px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--beige-200);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta--centrada { margin-top: 0; }
.tarjeta__icono {
  width: 56px; height: 56px;
  margin: -62px auto 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--beige-50);
  background: var(--selva-700);
  border: 4px solid var(--beige-50);
}
.tarjeta__titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.25;
  color: var(--selva-800);
  text-wrap: balance;
}
.tarjeta__dato {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  color: var(--tinta-suave);
  font-weight: 700;
}

.etiqueta-dorada {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: var(--cafe-800);
  background: linear-gradient(135deg, #EED9A6, var(--dorado));
}

.ruta__titulo {
  margin: 30px 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--caramelo);
}
.ruta {
  list-style: none;
  counter-reset: paso;
  margin: 0; padding: 0;
  text-align: left;
}
.ruta li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 18px 46px;
  color: var(--tinta-suave);
}
.ruta li strong { color: var(--tinta); }
.ruta li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: -1px;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
  color: var(--beige-50);
  background: var(--selva-500);
}
.ruta li::after {
  content: "";
  position: absolute;
  left: 14px; top: 32px; bottom: 2px;
  border-left: 2px dotted var(--salvia-300);
}
.ruta li:last-child { padding-bottom: 0; }
.ruta li:last-child::before { background: var(--dorado); color: var(--cafe-800); }
.ruta li:last-child::after { display: none; }

/* Vestimenta */
.vestimenta__estilo {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 4px 0 10px;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 800;
  color: var(--beige-50);
  border: 1px solid rgba(251, 247, 238, .3);
}
.muestras {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 28px 0 0; padding: 0;
  list-style: none;
}
.muestras li {
  display: grid; justify-items: center; gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--beige-100);
}
.muestra {
  width: 68px; height: 68px;
  border-radius: 50%;
  border: 3px solid rgba(251, 247, 238, .85);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.7);
}
.muestra--verde { background: linear-gradient(145deg, #6E9A62, #36603F); }
.muestra--beige { background: linear-gradient(145deg, #F4ECDC, #D9C6A2); }
.muestra--cafe  { background: linear-gradient(145deg, #9A6E48, #5A3E2B); }

/* Confirmación */
.rsvp {
  display: grid;
  gap: 18px;
  margin-top: 26px;
  padding: 24px 20px;
  text-align: left;
  border-radius: var(--radio);
  background: rgba(251, 247, 238, .07);
  border: 1px solid rgba(251, 247, 238, .16);
}
.campo { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo__etiqueta { font-size: 14px; font-weight: 700; color: var(--beige-100); padding: 0; }
.campo__entrada {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  font: inherit;
  font-size: 16px;
  color: var(--tinta);
  background: var(--beige-50);
  resize: vertical;
}
.campo__entrada::placeholder { color: #A39A89; }
.campo__entrada[aria-invalid="true"] { border-color: #E9A07A; }

.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; }
.opcion span {
  display: grid; place-items: center;
  min-height: 48px;
  padding: 8px;
  border-radius: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--beige-100);
  border: 1.5px solid rgba(251, 247, 238, .3);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.opcion input:checked + span { background: var(--beige-100); color: var(--selva-800); border-color: var(--beige-100); }

.contador { display: flex; align-items: center; gap: 14px; }
.contador__btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 247, 238, .4);
  background: transparent;
  color: var(--beige-50);
  font-size: 22px; font-weight: 700;
  line-height: 1;
}
.contador__valor {
  min-width: 36px;
  text-align: center;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--beige-50);
}
.rsvp__error {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cafe-800);
  background: #F6D9C4;
}

/* Cierre */
.cierre {
  padding: 64px 24px calc(84px + env(safe-area-inset-bottom));
  text-align: center;
}
.cierre__hojas { width: 120px; height: 60px; margin: 0 auto 8px; display: block; }
.cierre__frase {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 32px;
  color: var(--selva-800);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.cierre .firma { margin-top: 8px; }
.credito { margin-top: 40px; font-size: 12px; color: #A39A89; }

/* Visor de fotos */
.visor {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: rgba(20, 38, 25, .96);
  color: var(--beige-50);
}
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: rgba(20, 38, 25, .96); }
.visor__figura { margin: 0; padding: 70px 16px; display: grid; justify-items: center; gap: 14px; }
.visor__img { max-width: min(92vw, 560px); max-height: 72vh; border-radius: 18px; object-fit: contain; }
.visor__pie { font-family: var(--serif); font-size: 22px; }
.visor__btn {
  position: fixed;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  display: grid; place-items: center;
  color: var(--beige-50);
  background: rgba(20, 38, 25, .7);
  border: 1px solid rgba(251, 247, 238, .25);
  z-index: 1;
}
.visor__cerrar { top: calc(16px + env(safe-area-inset-top)); right: 16px; }
.visor__ant { left: 10px; top: 50%; transform: translateY(-50%); }
.visor__sig { right: 10px; top: 50%; transform: translateY(-50%); }

/* Aparecer al hacer scroll (solo con JS) */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.js .revelar.visible { opacity: 1; transform: none; }

/* Pantallas grandes: la invitación queda como una tarjeta centrada */
@media (min-width: 720px) {
  .seccion { padding: 96px 32px; }
  .hero { padding-top: 110px; }
}

@media (max-width: 360px) {
  .botones--dos { grid-template-columns: 1fr; }
  .muestras { gap: 14px; }
  .muestra { width: 58px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}