/* =========================================================
   Invitación Ana & David — 17.04.2027 · Jerez de la Frontera
   Estilo: línea fina, blanco roto, rosa empolvado + salvia
   ========================================================= */

:root {
  --bg:       #fdfbf8;   /* mismo blanco roto que el fondo del logo */
  --paper:    #ffffff;
  --ink:      #3b2c2d;   /* tinta marrón de los títulos y dibujos */
  --ink-soft: #5e4f4f;
  --ink-mute: #9a958f;
  --pink:     #ddd0bd;   /* beige de los botones principales */
  --pink-dk:  #b9a68c;   /* beige tostado: hover, radios y foco */
  --sage:     #ddd0bd;
  --sage-dk:  #b9a68c;
  --cream-2:  #f3ece2;   /* crema del bloque de fotos */
  --line:     rgba(63, 61, 59, 0.18);
  --beige:    #e4d9ca;   /* bloque de color detrás de los emblemas */

  --sans:  "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Caveat", "Parisienne", cursive;   /* manuscrita */
  --hand: "Patrick Hand SC", "Patrick Hand", "Montserrat", sans-serif;   /* rotulador en mayúsculas */

  --gutter: clamp(22px, 6vw, 48px);
  --section: clamp(72px, 12vw, 128px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(16px, 0.6vw + 13px, 19px);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
strong { font-weight: 500; color: var(--ink); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(640px, 100%); margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.wrap.wide { width: min(900px, 100%); }
section { padding: var(--section) 0; position: relative; }

/* ---------- Tipografía ---------- */
.title {
  font-family: var(--script);
  font-weight: 500;
  font-size: clamp(40px, 10vw, 58px);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 28px;
}
.title-light { color: var(--ink); }
.text { margin: 0 0 1.2em; }
.label { font-family: var(--hand); font-size: 20px; letter-spacing: .06em; color: var(--ink-mute); margin: 48px 0 12px; }

.names {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 6.2vw, 46px);
  letter-spacing: .3em;
  margin: 0;
  color: var(--ink);
  white-space: nowrap;
  padding-left: .3em; /* compensa el tracking */
}
.names span { letter-spacing: 0; margin: 0 .3em; }

.divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px auto 0; width: min(320px, 80%); }
.divider i { flex: 1; height: 1px; background: var(--line); }
.divider svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.2; }

/* Iconos de línea */
.icon { width: 72px; height: 72px; margin: 0 auto 28px; display: block; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-light { stroke: var(--ink); }
.doodle { display: block; width: 104px; height: 84px; margin: 0 auto 18px; fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.doodle .soft { stroke-width: .8; opacity: .55; }
.doodle .dot { fill: var(--ink); stroke: none; }
.when-kind { font-family: var(--hand); font-size: 22px; letter-spacing: .06em; color: var(--ink); margin: 0 0 6px; }

/* ---------- Botones ---------- */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; min-width: min(300px, 100%);
  padding: 0 28px;
  border-radius: 10px;
  font: 400 20px/1 var(--hand);
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s, transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn-pink { background: var(--pink); color: var(--ink); }
.btn-pink:hover { background: var(--pink-dk); }
.btn-sage { background: var(--sage); color: var(--ink); }
.btn-sage:hover { background: var(--sage-dk); }
.btn-line { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }
.btn-outline-light { background: transparent; color: var(--ink); border-color: var(--pink-dk); }
.btn-outline-light:hover { background: var(--pink); }
.btn-sm { min-height: 42px; min-width: 0; font-size: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ---------- Bienvenida ---------- */
.welcome {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: var(--gutter);
  background: var(--bg);
  overflow-y: auto;
  transition: opacity .9s var(--ease), visibility .9s;
}
.welcome-inner { text-align: center; width: min(460px, 100%); }
.welcome-art { width: min(300px, 70vw); margin: 0 auto 8px; }
.welcome-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 40px; }
.welcome-actions .btn { width: 100%; }
.welcome.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome[hidden] { display: none; }
.welcome-kicker { font-family: var(--script); font-size: clamp(26px, 6vw, 34px); color: var(--ink-soft); margin: 0 0 14px; }

/* ---------- Sobre ilustrado ---------- */
.envelope-screen {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  padding: var(--gutter);
  background: var(--bg);
  animation: env-in .9s var(--ease) backwards;
  transition: opacity 1s var(--ease), visibility 1s;
}
.envelope-screen.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes env-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.envelope {
  --env-line: var(--ink);
  position: relative; display: block;
  width: min(340px, 84vw); aspect-ratio: 7 / 5;
  padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
  animation: env-float 3.2s ease-in-out infinite;
}
.envelope-screen.is-open .envelope { animation: none; }
@keyframes env-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }

.env-back {
  position: absolute; inset: 0; border-radius: 6px;
  background: #ece3d6; border: 1.2px solid var(--env-line);
}
.env-letter {
  position: absolute; left: 7%; right: 7%; top: 6%; height: 86%; z-index: 2;
  background: #fff; border: 1px solid rgba(63, 61, 59, .25); border-radius: 3px;
  display: grid; place-items: center; overflow: hidden;
  transition: transform 1s var(--ease) .55s;
}
.env-letter img { width: 72%; }
.env-front, .env-flap { position: absolute; left: 0; width: 100%; overflow: visible; }
.env-front { bottom: 0; height: 100%; z-index: 3; }
.env-flap { top: 0; height: 62%; z-index: 4; transform-origin: top center; transition: transform .7s var(--ease), z-index 0s linear .35s; }
.env-front path, .env-flap path { fill: none; stroke: var(--env-line); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.env-front path.fill { fill: #f4ede3; }
.env-flap path.fill { fill: #e6dbcb; }

.env-seal {
  position: absolute; left: 50%; top: 62%; z-index: 5;
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%; background: #fbf7f1; border: 1.2px solid var(--env-line);
  box-shadow: 0 0 0 4px #fbf7f1, 0 0 0 5.2px var(--env-line);
  display: grid; place-items: center; overflow: hidden;
  transition: opacity .35s ease, transform .35s ease;
}
.env-seal img { width: 88%; margin-top: 6%; }

.env-hint { font-family: var(--script); font-size: clamp(26px, 6vw, 32px); color: var(--ink-soft); margin: 0; transition: opacity .4s; }

/* Apertura */
.envelope-screen.is-open .env-seal { opacity: 0; transform: scale(.85); }
.envelope-screen.is-open .env-flap { transform: rotateX(180deg); z-index: 1; }
/* un solo movimiento: sale despacio del sobre, acelera y se va por arriba */
.envelope-screen.is-open .env-letter { transform: translateY(-120vh); transition: transform 2.3s cubic-bezier(.55, .05, .35, 1) .45s; will-change: transform; }
.envelope-screen.is-open .env-hint { opacity: 0; }

/* Transición: la tarjeta se va hacia arriba y todo funde con la invitación */
.envelope-screen { transition: opacity .9s ease, visibility .9s, background-color 1s ease; }
/* solo se funde el fondo: la tarjeta sigue nítida mientras sube */
.envelope-screen.is-reveal { background-color: rgba(253, 251, 248, 0); pointer-events: none; }
.env-back, .env-front, .env-flap { transition-property: transform, z-index, opacity; }
.envelope-screen.is-leaving .env-back,
.envelope-screen.is-leaving .env-front,
.envelope-screen.is-leaving .env-flap { opacity: 0; transition: opacity .6s ease; }

/* Botón flotante de música (pestaña lateral) */
.music-toggle {
  position: fixed; right: 0; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 50;
  width: 72px; height: 60px;
  border: 0; border-radius: 30px 0 0 30px;
  background: var(--pink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.music-toggle[hidden] { display: none; }
.music-toggle .bars { display: flex; align-items: center; gap: 4px; height: 22px; }
.music-toggle .bars i { width: 5px; height: 100%; background: var(--ink-soft); border-radius: 3px; animation: bar 1.1s ease-in-out infinite; }
.music-toggle .bars i:nth-child(2) { animation-delay: -.35s; }
.music-toggle .bars i:nth-child(3) { animation-delay: -.7s; }
.music-toggle.is-paused .bars i { animation: none; height: 45%; }
@keyframes bar { 0%, 100% { height: 40%; } 50% { height: 100%; } }

/* ---------- 1 y 9. Portada / cierre ---------- */
.cover {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--gutter);
}
.frame { width: min(560px, 90vw); display: flex; flex-direction: column; }
.logo-frame { margin: 0; width: 100%; padding: clamp(10px, 4vw, 28px); }
.end-line { margin: 0; padding: 0 0 22px; text-align: center; font-family: var(--script); font-size: clamp(30px, 6vw, 40px); color: var(--ink); }
.logo-img, .welcome-art { width: 100%; }
.logo-fallback {
  position: relative; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 8%;
}
.logo-fallback::before {
  content: ""; position: absolute; left: 12%; top: 5%; width: 76%; aspect-ratio: 1;
  border: 1px solid var(--ink); border-radius: 50%;
  border-right-color: transparent; transform: rotate(20deg);
}
.logo-date { position: absolute; left: 2%; top: 16%; font-family: var(--serif); letter-spacing: .5em; line-height: 1.6; text-align: left; color: var(--ink); }

.scroll-cue {
  position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center;
  color: var(--ink-soft); text-decoration: none;
  animation: cue-float 2.4s ease-in-out infinite;
}
.scroll-word { font-family: var(--script); font-size: 26px; line-height: 1; margin-bottom: 2px; }
.scroll-cue svg { width: 28px; height: 60px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scroll-cue .arrow-stem { stroke-dasharray: 72; stroke-dashoffset: 72; animation: cue-draw 2.4s ease-in-out infinite; }
.scroll-cue .arrow-head { stroke-dasharray: 32; stroke-dashoffset: 32; animation: cue-head 2.4s ease-in-out infinite; }
@keyframes cue-draw { 0% { stroke-dashoffset: 72; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cue-head { 0%, 40% { stroke-dashoffset: 32; } 60%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cue-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ---------- 2. Historia + cuenta atrás ---------- */
.story { background: var(--paper); }
.story-open { font-family: var(--script); font-size: clamp(34px, 8.5vw, 48px); line-height: 1.3; color: var(--ink); margin: 0 0 28px; }
.story .title { margin-top: 12px; }

.countdown { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 460px; margin: 0 auto; }
.cd-unit { display: flex; flex-direction: column; align-items: center; }
.cd-unit + .cd-unit { border-left: 1px solid var(--line); }
.cd-num { font-family: var(--hand); font-size: clamp(40px, 10vw, 58px); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cd-lbl { font-family: var(--hand); font-size: 16px; letter-spacing: .05em; color: var(--ink-mute); }

/* ---------- 3. Fecha, hora y lugar ---------- */
.place { font-size: clamp(20px, 3.6vw, 26px); color: var(--ink-soft); margin: 0 0 28px; }
.when-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0 auto 28px; max-width: 460px; }
.when-cell { display: flex; flex-direction: column; align-items: center; }
.when-big { font-family: var(--hand); font-size: clamp(40px, 10vw, 58px); line-height: 1.2; color: var(--ink); white-space: nowrap; }
.when-big small { font-size: .45em; }
.when-small { font-family: var(--hand); font-size: 20px; letter-spacing: .05em; color: var(--ink-mute); }
.when-sep { width: 1px; height: 110px; background: var(--line); margin: 0 clamp(16px, 5vw, 40px); }

/* ---------- 4. Niños ---------- */
.kids { background: var(--paper); }

/* ---------- 5. Compartir fotos ---------- */
.share { background: var(--cream-2); color: var(--ink-soft); }


/* ---------- 6. Galería B/N ---------- */
.gallery { padding-top: clamp(40px, 8vw, 80px); padding-bottom: clamp(40px, 8vw, 80px); }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gallery-grid figure { margin: 0; overflow: hidden; border-radius: 14px; background: var(--cream-2); aspect-ratio: 3 / 4; }
.gallery-grid figure:nth-child(4n+1),
.gallery-grid figure:nth-child(4n) { grid-column: span 2; aspect-ratio: 3 / 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.gallery-grid .ph { display: grid; place-items: center; height: 100%; color: var(--ink-mute); font-size: 13px; letter-spacing: .1em; }

/* ---------- 7. Regalos ---------- */
.gift { background: var(--paper); }
.iban {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 20px auto 0; padding: 24px 20px; max-width: 420px;
  border: 1px solid var(--line); border-radius: 10px;
}
.iban[hidden] { display: none; }
.iban-holder { font-family: var(--hand); font-size: 18px; letter-spacing: .05em; color: var(--ink-mute); }
.iban-num { font-size: clamp(16px, 3.6vw, 20px); font-weight: 500; color: var(--ink); letter-spacing: .04em; word-break: break-word; }

/* ---------- 8. Confirmación ---------- */
.rsvp-form { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; text-align: left; }
.choice { border: 0; padding: 0; margin: 0 0 14px; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 14px 16px; }
.choice label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink-soft); font-size: 15px; white-space: nowrap; }
.choice input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--ink-mute); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.choice input::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--pink-dk); transform: scale(0); transition: transform .2s var(--ease); }
.choice input:checked { border-color: var(--pink-dk); }
.choice input:checked::after { transform: scale(1); }
.choice input:focus-visible { outline: 2px solid var(--pink-dk); outline-offset: 3px; }

.field { display: block; }
.field[hidden] { display: none; }
.field input, .field textarea {
  display: block; width: 100%;
  font: 300 17px/1.6 var(--sans); color: var(--ink);
  background: var(--paper); border: 1.5px solid #d4d0cb; border-radius: 10px;
  padding: 16px 20px; resize: vertical;
  transition: border-color .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--pink-dk); }
.field.is-error input { border-color: #b3261e; }
.rsvp-form .btn-block { margin-top: 18px; }
.form-status { margin: 0; min-height: 1.5em; text-align: center; }
.form-status.is-error { color: #b3261e; }
.form-status.is-ok { color: var(--sage-dk); font-weight: 500; }

/* ---------- Escritorio ---------- */
@media (min-width: 900px) {
  .gallery-grid { gap: 14px; }
}

/* ---------- Aparición suave (contenido visible si falla el JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* ---------- Reparto de líneas: sin palabras sueltas ---------- */
p, .text { text-wrap: pretty; }
.title, .story-open, .when-kind { text-wrap: balance; }

/* ---------- Dudas: WhatsApp ---------- */
.contact { background: var(--cream-2); }

/* Regalos: lluvia de sobres */
.gift-option { margin-top: 34px; }
.doodle-sm { width: 76px; height: 62px; margin-bottom: 10px; }
.gift-option + .actions { margin-top: 14px; }