/* =========================================================
   JOSÉ & GEMA — INVITACIÓN DE BODA
   Paleta: marfil / crema / dorado antiguo, inspirada en el
   sello de cera y las ramas doradas de la invitación física.
   ========================================================= */

:root{
  /* Color */
  --ivory:        #F7F1E4;
  --paper:        #EFE4CE;
  --paper-deep:   #E4D5B4;
  --ink:          #322C22;
  --ink-soft:     #6B6151;
  --gold:         #A5813F;
  --gold-deep:    #7C5B2C;
  --gold-light:   #D9BD86;
  --line:         rgba(165,129,63,.35);
  --shadow:       rgba(76,58,24,.16);

  /* Type */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --script: "Alex Brush", cursive;
  --sans:   "Jost", sans-serif;

  /* Rhythm */
  --section-pad: clamp(4rem, 9vw, 8rem);
}

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

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

a{ color: inherit; text-decoration: none; }

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

::selection{ background: var(--gold-light); color: var(--ink); }

/* =========================================================
   SVG-based textures & ornaments (no external images needed)
   ========================================================= */

.hero__ornament{
  background-repeat: no-repeat;
  background-size: contain;
  position:absolute;
  width: 220px;
  height: 420px;
  opacity:.35;
  --branch-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 520'%3E%3Cg fill='none' stroke='%23A5813F' stroke-width='1.6' stroke-linecap='round' opacity='0.55'%3E%3Cpath d='M20 10 C 40 120, 10 220, 60 300 C 100 360, 70 440, 110 510'/%3E%3Cpath d='M30 60 C 60 55, 80 40, 95 15'/%3E%3Cpath d='M25 110 C 55 108, 78 95, 92 70'/%3E%3Cpath d='M45 170 C 75 165, 96 150, 108 122'/%3E%3Cpath d='M55 235 C 85 233, 104 218, 116 190'/%3E%3Cpath d='M75 300 C 105 300, 125 285, 138 258'/%3E%3Cpath d='M85 365 C 112 368, 132 355, 146 328'/%3E%3Cpath d='M100 430 C 126 434, 146 422, 160 396'/%3E%3Cellipse cx='95' cy='18' rx='9' ry='5' transform='rotate(30 95 18)'/%3E%3Cellipse cx='90' cy='68' rx='9' ry='5' transform='rotate(20 90 68)'/%3E%3Cellipse cx='106' cy='118' rx='9' ry='5' transform='rotate(20 106 118)'/%3E%3Cellipse cx='134' cy='255' rx='9' ry='5' transform='rotate(15 134 255)'/%3E%3Cellipse cx='144' cy='325' rx='9' ry='5' transform='rotate(15 144 325)'/%3E%3Cellipse cx='158' cy='393' rx='9' ry='5' transform='rotate(15 158 393)'/%3E%3C/g%3E%3C/svg%3E");
  background-image: var(--branch-svg);
}

/* =========================================================
   PANTALLA DEL SOBRE
   ========================================================= */

.envelope-screen{
  position: fixed;
  inset: 0;
  z-index: 100;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--ivory);
  transition: opacity 1.1s ease, visibility 1.1s ease;
}

.envelope-screen.is-leaving{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.envelope-screen__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,252,244,.9), transparent 60%),
    linear-gradient(180deg, var(--ivory), var(--paper) 120%);
}

.envelope{
  position:relative;
  width: min(100vw, 675px);
  height: min(100svh, 1200px);
  overflow: visible;
}

.envelope__body{
  position:relative;
  width:100%; height:100%;
  overflow:visible;
  filter: drop-shadow(0 30px 60px rgba(76,58,24,.2));
}

.envelope__leaf{
  position:absolute;
  inset-block:0;
  width:50%;
  background-image: url("sobre-realista.jpeg");
  background-repeat:no-repeat;
  background-size: 200% 100%;
  transition: transform 1.45s cubic-bezier(.76,0,.24,1);
  z-index:4;
}
.envelope__leaf--left{
  left:0;
  background-position:left center;
  transform-origin:left center;
}
.envelope__leaf--right{
  right:0;
  background-position:right center;
  transform-origin:right center;
}
.envelope.is-open .envelope__leaf--left{ transform:translateX(-100%); }
.envelope.is-open .envelope__leaf--right{ transform:translateX(100%); }

.envelope__body::after{
  content:"";
  position:absolute; inset:0 50%;
  width:1px;
  background:rgba(94,64,23,.2);
  z-index:5;
  transition:opacity .25s ease;
}
.envelope.is-open .envelope__body::after{ opacity:0; }

.envelope__eyebrow{
  margin: 0 0 .5rem;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--ink-soft);
}
.envelope__names{
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
}
.envelope__names .amp{ font-family: var(--script); font-size: 1.15em; color: var(--gold-deep); padding: 0 .1em; }
.envelope__date{
  margin: .5rem 0 0;
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--gold-deep);
}

.seal{
  position:absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: min(30vw, 210px); height: min(30vw, 210px);
  border-radius:50%;
  border: none;
  background:transparent;
  z-index: 6;
  transition: transform .35s ease, opacity .5s ease, box-shadow .35s ease;
}
.seal::before{
  content:"";
  position:absolute;
  inset:4%;
  border:1px solid rgba(255,255,255,.62);
  border-radius:50%;
  box-shadow:0 0 0 7px rgba(91,61,20,.12), 0 0 14px rgba(255,248,215,.5);
  opacity:.7;
  animation: seal-pulse 2.2s ease-in-out infinite;
}
.seal::after{
  content:"✦  ✧";
  position:absolute;
  inset:-11%;
  color:#fff6c7;
  font-family:var(--serif);
  font-size:clamp(1.05rem, 3.2vw, 1.45rem);
  font-weight:600;
  line-height:1;
  text-align:center;
  opacity:1;
  text-shadow:0 0 9px rgba(255,244,187,.95), 0 0 16px rgba(255,244,187,.65);
  transform-origin:center;
  animation: seal-sparkle-orbit 9s linear infinite;
}
@keyframes seal-pulse{
  0%,100%{ transform:scale(.94); opacity:.42; }
  50%{ transform:scale(1.04); opacity:.9; }
}
@keyframes seal-sparkle-orbit{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
.seal:hover{ transform: translate(-50%, -50%) scale(1.04); }
.seal:active{ transform: translate(-50%, -50%) scale(.96); }

.seal.is-breaking{
  animation: seal-break .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes seal-break{
  0%{ transform: translate(-50%,-50%) scale(1); opacity:1; }
  40%{ transform: translate(-50%,-50%) scale(1.15) rotate(-4deg); }
  100%{ transform: translate(-50%,-50%) scale(0.2) rotate(8deg); opacity:0; }
}

/* opened states, driven by JS toggling classes on #envelope */
.envelope.is-open .envelope__flap{
  transform: rotateX(-172deg);
}
.envelope.is-open .envelope__card{
  transform: translate(-50%, -132%);
}

.sparkles{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:6;
}
.sparkle{
  position:absolute;
  width:5px; height:5px;
  border-radius:50%;
  background: radial-gradient(circle, #fff, var(--gold-light) 60%, transparent 70%);
  opacity:0;
  animation: sparkle-pop 1.1s ease-out forwards;
}
@keyframes sparkle-pop{
  0%{ opacity:0; transform: scale(.3) translateY(0); }
  25%{ opacity:1; }
  100%{ opacity:0; transform: scale(1.1) translateY(-38px); }
}

.light-burst{
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  z-index:20;
  pointer-events:none;
}
.light-burst.is-active{
  animation: light-burst 1.6s ease-out .7s forwards;
}
@keyframes light-burst{
  0%{ opacity:0; }
  10%{ opacity:1; }
  100%{ opacity:1; }
}

@media (max-width: 640px){
  .envelope{ width:100vw; height:100svh; }
}

/* =========================================================
   SITIO PRINCIPAL
   ========================================================= */

.site{
  opacity:0;
  animation: site-in 1.1s ease forwards;
}
@keyframes site-in{ to{ opacity:1; } }

.nav{
  position: sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem clamp(1.2rem, 4vw, 3rem);
  background: rgba(247,241,228,.86);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav__names{
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--gold-deep);
}
.nav__cta{
  font-size: .78rem;
  letter-spacing: .05em;
  padding: .6rem 1.15rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-deep);
  transition: background .35s ease, color .35s ease;
  white-space: nowrap;
}
.nav__cta:hover{ background: var(--gold); color: var(--ivory); }

/* HERO */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 6rem 1.5rem 4rem;
  overflow:hidden;
}
.hero__ornament--left{ top:-6%; left:-6%; }
.hero__ornament--right{ bottom:-8%; right:-6%; transform: scaleX(-1) rotate(6deg); }

.hero__eyebrow{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}
.hero__names{
  margin:0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 11vw, 6.2rem);
  line-height: .98;
  display:flex; align-items:center; gap: .3em; flex-wrap:wrap; justify-content:center;
}
.hero__names .amp{
  font-family: var(--script);
  font-size: .62em;
  color: var(--gold);
}
.hero__tagline{
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--gold-deep);
  margin: 1.1rem 0 2.6rem;
}

.hero__facts{
  display:flex; align-items:center; gap: clamp(1rem,3vw,2.4rem);
  flex-wrap:wrap; justify-content:center;
}
.fact{ display:flex; flex-direction:column; gap:.2rem; }
.fact__value{ font-family: var(--serif); font-size: 1.15rem; }
.fact__label{ font-size: .72rem; letter-spacing:.12em; color: var(--ink-soft); }
.fact__divider{ width:1px; height: 30px; background: var(--line); }

.hero__scroll{
  position:absolute; bottom: 2.2rem; left:50%; transform: translateX(-50%);
}
.hero__scroll span{
  display:block; width:1px; height: 42px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scroll-hint 2.2s ease-in-out infinite;
}
@keyframes scroll-hint{
  0%,100%{ transform: scaleY(.6); opacity:.4; }
  50%{ transform: scaleY(1); opacity: 1; }
}

/* SECTION SHELL */
.section{ padding: var(--section-pad) 1.5rem; position:relative; }
.section__inner{ max-width: 920px; margin:0 auto; text-align:center; }
.section__inner--narrow{ max-width: 620px; }

.eyebrow{
  font-size: .74rem; letter-spacing:.16em; color: var(--gold-deep); margin:0 0 .6rem;
}
.script-accent{
  font-family: var(--script);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--gold);
  margin: 0 0 .8rem;
}
.section-title{
  font-family: var(--serif); font-weight:400;
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 0 0 .4rem;
}
.section-sub{ color: var(--ink-soft); margin: 0 0 2.6rem; font-size: .95rem; letter-spacing:.03em; }
.lead{
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  line-height:1.5;
  color: var(--ink);
}

.section--welcome{ background: var(--paper); }

/* DETAIL GRID */
.detail-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-bottom: 2.4rem;
}
.detail-card{
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding: 1.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:linear-gradient(145deg, #fffdf7, var(--ivory));
  box-shadow:0 10px 24px -22px rgba(76,58,24,.9);
  transition: border-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.detail-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:var(--gold);
}
.detail-card:nth-child(1)::before{ background:#b58b45; }
.detail-card:nth-child(2)::before{ background:#c49a59; }
.detail-card:nth-child(3)::before{ background:#9c7134; }
.detail-card:nth-child(1){ background:linear-gradient(145deg, #fffdf7, #f8f0df); }
.detail-card:nth-child(2){ background:linear-gradient(145deg, #fffdf8, #f5ead4); }
.detail-card:nth-child(3){ background:linear-gradient(145deg, #fffdf6, #f3e8d0); }
.detail-grid .detail-card,
.contact-grid .contact-card{
  opacity:1;
  transform:none;
}
.detail-grid.is-visible .detail-card,
.contact-grid.is-visible .contact-card{
  animation: card-arrive .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.detail-grid.is-visible .detail-card:nth-child(1),
.contact-grid.is-visible .contact-card:nth-child(1){ animation-delay:.08s; }
.detail-grid.is-visible .detail-card:nth-child(2),
.contact-grid.is-visible .contact-card:nth-child(2){ animation-delay:.2s; }
.detail-grid.is-visible .detail-card:nth-child(3){ animation-delay:.32s; }
@keyframes card-arrive{
  0%{ opacity:0; transform:translateY(45px) scale(.92) rotateX(7deg); box-shadow:0 0 0 rgba(165,129,63,0); }
  65%{ opacity:1; transform:translateY(-6px) scale(1.01) rotateX(0); box-shadow:0 18px 30px -20px rgba(165,129,63,.85); }
  100%{ opacity:1; transform:translateY(0) scale(1); box-shadow:0 0 0 rgba(165,129,63,0); }
}
.detail-card:hover{
  border-color:var(--gold);
  transform:translateY(-5px);
  box-shadow:0 14px 28px -22px rgba(124,91,44,.8);
}
.detail-card__icon{ color: var(--gold); }
.detail-card__title{ font-size:.72rem; letter-spacing:.14em; color: var(--ink-soft); }
.detail-card__text{ font-family: var(--serif); font-size: 1.1rem; }

.map-button{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .85rem 1.8rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: .85rem; letter-spacing:.04em;
  color: var(--gold-deep);
  transition: background .35s ease, color .35s ease;
}
.map-button:hover{ background: var(--gold); color: var(--ivory); }

/* GIFT */
.section--gift{ background: var(--paper); }
.iban{
  margin-top: 2rem;
  background: var(--ivory);
  border: 1px dashed var(--gold);
  border-radius: 8px;
  padding: 1.2rem 1.6rem;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  width: min(100%, 420px);
  transition: transform .25s ease, background .25s ease;
}
.iban:hover{ transform: translateY(-2px); background:#fffdf7; }
.iban__number{
  font-family: var(--serif); font-size: 1.15rem; letter-spacing:.04em;
}
.iban__hint{ font-size:.7rem; letter-spacing:.12em; color: var(--ink-soft); }
.iban.is-copied .iban__hint::after{ content: " · ¡Copiado!"; color: var(--gold-deep); }

/* CONTACT */
.contact-grid{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  max-width: 420px; margin: 0 auto 2.4rem;
}
.contact-card{
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.3rem 1rem;
  display:flex; flex-direction:column; gap:.3rem;
  transition: border-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.contact-card:hover{ border-color: var(--gold); transform: translateY(-5px); box-shadow:0 14px 28px -22px rgba(124,91,44,.8); }
.contact-card__name{ font-family: var(--serif); font-size: 1.1rem; }
.contact-card__phone{ font-size: .85rem; color: var(--ink-soft); }

.cta-button{
  display:inline-block;
  padding: 1rem 2.4rem;
  background: var(--gold-deep);
  color: var(--ivory);
  border-radius: 999px;
  font-size: .9rem; letter-spacing:.06em;
  transition: background .3s ease, transform .3s ease;
}
.cta-button:hover{ background: var(--gold); transform: translateY(-2px); }

/* FOOTER */
.footer{
  text-align:center;
  padding: 3.4rem 1.5rem 2.6rem;
  border-top: 1px solid var(--line);
}
.footer__names{
  font-family: var(--serif); font-size: 1.3rem; margin:0 0 .4rem;
}
.footer__names .amp{ font-family: var(--script); color: var(--gold); padding: 0 .1em; }
.footer__phrase{
  font-family: var(--serif); font-style: italic; color: var(--ink-soft);
  margin:0; font-size: .95rem;
}

/* MUSIC TOGGLE */
.music-toggle{
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  width: 42px; height:42px; border-radius:50%;
  background: var(--ivory);
  border: 1px solid var(--line);
  color: var(--gold-deep);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px -8px var(--shadow);
  transition: transform .25s ease, color .25s ease;
}
.music-toggle[aria-pressed="true"]{ color: var(--gold); }
.music-toggle:hover{ transform: scale(1.07); }

/* =========================================================
   SCROLL REVEAL (Intersection Observer hooks)
   ========================================================= */
.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* stagger children inside hero + facts a touch */
.hero__names.is-visible{ transition-delay: .1s; }
.hero__tagline.is-visible{ transition-delay: .2s; }
.hero__facts.is-visible{ transition-delay: .3s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 640px){
  .detail-grid{ grid-template-columns: 1fr; }
  .hero__facts{ flex-direction:column; gap: 1.4rem; }
  .fact__divider{ width: 40px; height:1px; }
  .nav__cta{ padding: .55rem .9rem; font-size:.72rem; }
}

@media (min-width: 641px) and (max-width: 900px){
  .hero__ornament{ width: 160px; height: 320px; }
}

/* =========================================================
   ACCESIBILIDAD: prefers-reduced-motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .detail-grid .detail-card,
  .contact-grid .contact-card{
    opacity:1;
    transform:none;
    animation:none;
  }
}

/* visible keyboard focus */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* =========================================================
   DIRECCION VISUAL MODERNA DE LA INVITACION
   ========================================================= */
:root{
  --ivory:#f8f7f2;
  --paper:#e9ebe3;
  --paper-deep:#daddd2;
  --ink:#252922;
  --ink-soft:#687066;
  --gold:#aa8140;
  --gold-deep:#80602f;
  --gold-light:#d7c18e;
  --line:rgba(37,41,34,.16);
  --shadow:rgba(37,41,34,.16);
  --olive:#66725f;
  --rust:#b66e50;
}

body{
  background:var(--ivory);
  color:var(--ink);
}

.site{
  background:
    linear-gradient(90deg, rgba(102,114,95,.035) 1px, transparent 1px),
    var(--ivory);
  background-size:48px 48px;
}

.nav{
  padding:1.15rem clamp(1.4rem,5vw,5rem);
  background:rgba(248,247,242,.82);
  border-bottom:1px solid rgba(37,41,34,.1);
  backdrop-filter:blur(14px);
}
.nav__names{
  color:var(--ink);
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.22em;
}
.nav__cta{
  padding:.7rem 1.1rem;
  border:1px solid var(--ink);
  border-radius:3px;
  color:var(--ink);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.nav__cta:hover{ background:var(--ink); color:var(--ivory); }

.hero{
  min-height:calc(100svh - 66px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(270px,.72fr);
  align-content:center;
  align-items:center;
  column-gap:clamp(2rem,7vw,8rem);
  text-align:left;
  padding:clamp(5rem,10vw,9rem) clamp(1.4rem,8vw,8rem);
}
.hero::before{
  content:"";
  grid-column:2;
  grid-row:1 / span 5;
  width:100%;
  min-height:clamp(360px,68vh,720px);
  background:url("sobre-realista.jpeg") center/cover no-repeat;
  border-radius:90px 8px 8px 8px;
  box-shadow:18px 20px 0 rgba(182,110,80,.12);
  transform:rotate(2deg);
}
.hero__ornament{ opacity:.14; }
.hero__ornament--left{ left:-12%; }
.hero__ornament--right{ right:-12%; }
.hero__eyebrow,
.hero__names,
.hero__tagline,
.hero__facts{ grid-column:1; justify-self:start; }
.hero__eyebrow{
  margin:0 0 1.5rem;
  color:var(--olive);
  font-family:var(--sans);
  font-size:.7rem;
  font-style:normal;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.hero__names{
  gap:0 .18em;
  font-size:clamp(4rem,9vw,8.5rem);
  line-height:.82;
  letter-spacing:-.03em;
}
.hero__names .amp{ color:var(--rust); }
.hero__tagline{
  margin:2rem 0 3.2rem;
  color:var(--ink-soft);
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.8vw,2rem);
}
.hero__facts{
  gap:clamp(1.2rem,3vw,2.8rem);
  justify-content:flex-start;
}
.fact__value{ color:var(--ink); font-size:1.2rem; }
.fact__label{ color:var(--ink-soft); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; }
.fact__divider{ background:var(--rust); opacity:.7; }
.hero__scroll{ grid-column:1 / -1; }

.section{
  padding:clamp(5rem,10vw,9rem) clamp(1.4rem,8vw,8rem);
}
.section__inner{ max-width:1080px; }
.section__inner--narrow{ max-width:680px; }
.section--welcome{
  background:var(--ink);
  color:var(--ivory);
  text-align:left;
}
.section--welcome .section__inner{ margin-left:0; }
.section--welcome .lead{ color:var(--ivory); max-width:560px; }
.script-accent{ color:var(--gold-light); }
.eyebrow{ color:var(--olive); font-weight:500; text-transform:uppercase; }
.section-title{ font-size:clamp(2.7rem,5vw,5rem); letter-spacing:-.025em; }
.section-sub{ color:var(--ink-soft); }
.section--details{ background:var(--ivory); }
.detail-grid{
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
  margin:3.5rem 0 2.8rem;
  background:transparent;
  border:0;
}
.section--details .detail-grid{
  grid-template-columns:repeat(2, minmax(0, 260px));
  justify-content:center;
}
.detail-card{
  min-height:220px;
  justify-content:space-between;
  align-items:flex-start;
  padding:1.6rem;
  border:1px solid rgba(37,41,34,.2);
  border-radius:4px;
  background:#e4e6de !important;
  box-shadow:0 12px 24px -22px rgba(37,41,34,.9);
  text-align:left;
}
.detail-card::before{ height:5px; }
.detail-card:nth-child(2)::before{ background:var(--rust); }
.detail-card:nth-child(3)::before{ background:var(--olive); }
.detail-card__icon{ color:var(--ink); }
.detail-card__title{ color:var(--ink-soft); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; }
.detail-card__text{ max-width:190px; font-size:1.3rem; line-height:1.05; }
.detail-card:hover{ background:#dce0d5 !important; box-shadow:inset 0 -5px 0 var(--gold), 0 14px 24px -20px rgba(37,41,34,.75); transform:translateY(-3px); }
.map-button{
  padding:1rem 1.3rem;
  border:1px solid var(--ink);
  border-radius:3px;
  color:var(--ink);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.map-button:hover{ background:var(--ink); color:var(--ivory); }

.section--gift{
  background:var(--paper);
  text-align:left;
}
.section--gift .section__inner{ margin-left:0; }
.section--gift .lead{ max-width:540px; }
.iban{
  align-items:flex-start;
  margin-top:2.5rem;
  border:1px solid var(--ink);
  border-radius:3px;
  background:transparent;
  padding:1rem 1.2rem;
  text-align:left;
}
.iban:hover{ background:var(--ivory); transform:translateY(-3px); }
.iban__number{ font-size:1.25rem; }
.iban__hint{ color:var(--olive); text-transform:uppercase; }

.section--contact{ background:var(--ivory); }
.contact-grid{ gap:1px; max-width:480px; margin:2.8rem 0 2.4rem; background:var(--line); }
.contact-card{
  border:0;
  border-radius:0;
  padding:1.5rem;
  background:var(--paper);
}
.contact-card:hover{ border:0; background:#fff; transform:none; box-shadow:inset 0 -4px 0 var(--rust); }
.contact-card__name{ font-size:1.4rem; }
.contact-card__phone{ color:var(--ink-soft); }
.cta-button{
  padding:1.1rem 1.5rem;
  border-radius:3px;
  background:var(--rust);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cta-button:hover{ background:var(--ink); transform:translateY(-3px); }
.footer{
  padding:4rem clamp(1.4rem,8vw,8rem) 3rem;
  background:var(--ink);
  border:0;
  color:var(--ivory);
  text-align:left;
}
.footer__names{ font-size:2rem; }
.footer__phrase{ color:var(--paper-deep); }
.music-toggle{ background:var(--ivory); border-color:var(--ink); color:var(--ink); }

/* Barras persistentes de navegacion y contacto */
.site{
  padding-top:74px;
  padding-bottom:78px;
}
.nav{
  position:fixed;
  inset:0 0 auto;
  z-index:80;
  min-height:74px;
  padding:1rem clamp(1.4rem,5vw,5rem);
  background:rgba(37,41,34,.98);
  border-bottom-color:rgba(248,247,242,.12);
}
.nav__names{
  display:flex;
  flex-direction:column;
  gap:.12rem;
  letter-spacing:.04em;
}
.nav__names strong{
  color:var(--ivory);
  font-family:var(--serif);
  font-size:clamp(1.45rem,3vw,2rem);
  font-weight:400;
  letter-spacing:0;
  line-height:.9;
}
.nav__names strong .amp{
  color:var(--gold-light);
  font-family:var(--script);
  font-size:1.05em;
  padding:0 .08em;
}
.nav .nav__cta{
  border-color:var(--ivory);
  color:var(--ivory);
}
.nav .nav__cta:hover{ background:var(--ivory); color:var(--ink); }
.nav__phones{
  display:flex;
  align-items:center;
  gap:clamp(.8rem,2vw,1.8rem);
}
.nav__phones a{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.1rem;
  color:var(--ivory);
  font-family:var(--serif);
  font-size:1rem;
  line-height:1;
  transition:color .25s ease;
}
.nav__phones a:hover{ color:var(--gold-light); }
.nav__phones span{
  color:var(--paper-deep);
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.08em;
}
.nav__names small{
  color:var(--ink-soft);
  font-family:var(--serif);
  font-size:.78rem;
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
}
.bottom-bar{
  position:fixed;
  inset:auto 0 0;
  z-index:75;
  min-height:62px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:1.5rem;
  padding:.8rem clamp(1.4rem,5vw,5rem);
  background:rgba(37,41,34,.97);
  color:var(--ivory);
  box-shadow:0 -12px 30px rgba(37,41,34,.12);
}
.bottom-bar__contacts{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:clamp(1.3rem,5vw,4rem);
}
.bottom-bar__contacts a{
  display:flex;
  flex-direction:column;
  gap:.12rem;
  color:var(--ivory);
  font-family:var(--serif);
  font-size:1.12rem;
  line-height:1;
  transition:color .25s ease;
}
.bottom-bar__contacts a:hover{ color:var(--gold-light); }
.bottom-bar__contacts span,
.bottom-bar__account span{
  color:var(--gold-light);
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.bottom-bar__account{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.2rem;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ivory);
  text-align:right;
}
.bottom-bar__account strong{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.06em;
  white-space:nowrap;
}
.bottom-bar__account:hover strong{ color:var(--gold-light); }
.bottom-bar__account.is-copied strong::after{ content:"  · Copiado"; color:var(--gold-light); }
.bottom-bar__confirm{
  justify-self:center;
  padding:.72rem 1.2rem;
  border:1px solid var(--gold-light);
  border-radius:3px;
  color:var(--ivory);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background .25s ease, color .25s ease;
}
.bottom-bar__confirm:hover{ background:var(--gold-light); color:var(--ink); }
.music-toggle{ bottom:5.6rem; }
.speaker-icon--off{ display:none; }
.music-toggle[aria-pressed="true"] .speaker-icon--on{ display:block; }
.music-toggle[aria-pressed="true"] .speaker-icon--off{ display:none; }
.music-toggle[aria-pressed="false"] .speaker-icon--on{ display:none; }
.music-toggle[aria-pressed="false"] .speaker-icon--off{ display:block; }

/* Cuenta atras y ritmo entre secciones */
.site > section{ position:relative; }
.site > section + section{
  margin-top:clamp(2rem,5vw,4rem);
}
.site > section + section::before{
  content:"";
  position:absolute;
  top:-4px;
  left:clamp(1.4rem,8vw,8rem);
  right:clamp(1.4rem,8vw,8rem);
  height:8px;
  border-radius:0;
  background:
    radial-gradient(circle, var(--gold) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
    linear-gradient(90deg, transparent, var(--rust) 42%, var(--gold) 58%, transparent) center / 100% 2px no-repeat;
  box-shadow:none;
  opacity:.75;
}
.countdown-section{
  overflow:hidden;
  padding:clamp(5rem,9vw,8rem) clamp(1.4rem,8vw,8rem);
  background:var(--paper);
}
.countdown-section::after{
  display:none;
}
.countdown-section__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1080px;
  margin:0 auto;
  text-align:center;
}
.countdown-section__inner > .eyebrow,
.countdown-section__inner > .countdown-title{ text-align:center; }
.countdown-title{
  margin:0 0 3.4rem;
  font-family:var(--serif);
  font-size:clamp(3rem,6vw,5.6rem);
  font-weight:400;
  letter-spacing:-.035em;
  line-height:.9;
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4, minmax(100px, 1fr));
  max-width:800px;
  margin-inline:auto;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.countdown__unit{
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.9rem;
  padding:1rem clamp(.8rem,2vw,1.5rem);
  border-right:1px solid var(--line);
}
.countdown__unit:last-child{ border-right:0; }
.countdown__unit strong{
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(3rem,6vw,5.2rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.04em;
}
.countdown__unit span{
  margin-top:.1rem;
  color:var(--olive);
  font-size:.65rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.lead{ font-size:clamp(1.45rem,3vw,2rem); }
.section-title{ font-size:clamp(3rem,6vw,5.2rem); }
.detail-card__text{ font-size:clamp(1.35rem,2.2vw,1.7rem); }
.section--gift .script-accent{
  font-size:clamp(2.5rem,5vw,3.8rem);
  font-weight:700;
  line-height:1;
}
.section--gift .lead{ margin-bottom:3.6rem; }
.section--gift .iban{ margin-top:0; }
.section--welcome .section__inner,
.section--gift .section__inner{
  width:100%;
  margin-inline:auto;
  text-align:center;
}
.section--welcome .lead,
.section--gift .lead{
  margin-inline:auto;
  text-align:center;
}

/* Cada bloque aparece desde abajo cuando entra en el viewport. */
.site > section{ scroll-margin-top:5rem; }
.section .reveal,
.countdown-section .reveal{
  transform:translateY(52px) scale(.98);
  filter:blur(4px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), filter 1s ease;
}
.section .reveal.is-visible,
.countdown-section .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.section__inner > .reveal:nth-child(2){ transition-delay:.08s; }
.section__inner > .reveal:nth-child(3){ transition-delay:.16s; }
.section__inner > .reveal:nth-child(4){ transition-delay:.24s; }
.countdown__unit:nth-child(1){ transition-delay:.08s; }
.countdown__unit:nth-child(2){ transition-delay:.18s; }
.countdown__unit:nth-child(3){ transition-delay:.28s; }
.countdown__unit:nth-child(4){ transition-delay:.38s; }

@media (max-width: 700px){
  .site{ padding-top:68px; padding-bottom:66px; }
  .nav{ min-height:68px; padding:.8rem 1rem; }
  .nav__names strong{ font-size:1.35rem; }
  .nav__names small{ font-size:.68rem; }
  .nav__phones{ gap:.55rem; }
  .nav__phones a{ font-size:.78rem; }
  .nav__phones span{ font-size:.48rem; }
  .bottom-bar{
    min-height:58px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:.6rem;
    padding:.55rem .75rem;
  }
  .bottom-bar__contacts{ gap:.65rem; }
  .bottom-bar__contacts a{ font-size:.72rem; }
  .bottom-bar__contacts span{ font-size:.44rem; }
  .bottom-bar__account{ align-items:flex-start; min-width:0; text-align:left; }
  .bottom-bar__account strong{
    max-width:38vw;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.5rem;
  }
  .music-toggle{ bottom:4.4rem; right:.8rem; }
  .hero{
    display:flex;
    min-height:calc(100svh - 66px);
    align-items:flex-start;
    padding-top:5rem;
  }
  .hero::before{
    position:absolute;
    right:0;
    bottom:0;
    width:48%;
    min-height:55%;
    opacity:.2;
    border-radius:70px 0 0 0;
  }
  .hero__eyebrow,.hero__names,.hero__tagline,.hero__facts{ z-index:1; }
  .hero__names{ font-size:clamp(3.6rem,18vw,6rem); }
  .hero__facts{ align-items:flex-start; flex-direction:column; gap:1.1rem; }
  .fact__divider{ width:34px; height:1px; }
  .section--details .detail-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-width:460px;
    margin-inline:auto;
    gap:.7rem;
  }
  .detail-card{
    min-height:116px;
    padding:1rem .7rem;
    gap:.35rem;
  }
  .detail-card__icon svg{ width:21px; height:21px; }
  .detail-card__title{ font-size:.58rem; }
  .detail-card__text{
    max-width:100%;
    font-size:1rem;
    line-height:1.1;
  }
  .countdown{ grid-template-columns:repeat(2,1fr); }
  .countdown__unit:nth-child(2){ border-right:0; }
  .countdown__unit:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .countdown__unit{ min-height:125px; }
  .contact-grid{ grid-template-columns:1fr; }
  .section--welcome,.section--gift,.section--contact{ text-align:left; }
  .site > section + section{ margin-top:2rem; }
}

@media (prefers-reduced-motion: reduce){
  .section .reveal,
  .countdown-section .reveal{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .section__inner > .reveal:nth-child(n),
  .countdown__unit:nth-child(n){ transition-delay:0; }
}

/* Centrado general del contenido, manteniendo el hero editorial */
.site > section:not(.hero){ text-align:center; }
.site > section:not(.hero) .section__inner{ margin-inline:auto; text-align:center; }
.site > section:not(.hero) .iban{
  margin-inline:auto;
  align-items:center;
  text-align:center;
}
.site > section:not(.hero) .contact-grid{ margin-inline:auto; }