@charset "utf-8";
/* CSS Document */

/* ============================================================
     0. TOKENS — paleta, tipografía, ritmo
     ============================================================ */
  :root{
    --ivory:      #FBF9F5;
    --ivory-soft: #F4F0E9;
    --ink:        #211F1C;
    --ink-soft:   #55524B;
    --stone:      #CDC4B6;
    --olive:      #67704F;
    --olive-dark: #4B5339;
    --blush:      #E7DCCE;
    --gold:       #A08A5B;

    --font-display: "Fraunces", serif;
    --font-body: "Work Sans", sans-serif;
    --font-mono: "Space Mono", monospace;

    --section-pad: clamp(80px, 11vw, 160px);
    --container: 1180px;
    --edge: clamp(24px, 6vw, 80px);

    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }

  body{
    margin:0;
    background:var(--ivory);
    color:var(--ink);
    font-family:var(--font-body);
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; }
  ul{ margin:0; padding:0; list-style:none; }

  .container{ max-width:var(--container); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); }
  .section{ padding-top:var(--section-pad); padding-bottom:var(--section-pad); position:relative; }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--olive-dark);
    display:inline-flex;
    align-items:center;
    gap:12px;
  }
  .eyebrow::before{
    content:"";
    width:26px; height:1px;
    background:var(--gold);
    display:inline-block;
  }

  .heading-xl{
    font-family:var(--font-display);
    font-weight:400;
    font-style:italic;
    font-size:clamp(2rem, 4.4vw, 3.4rem);
    line-height:1.15;
    color:var(--ink);
    letter-spacing:-0.01em;
  }

  .center{ text-align:center; }

  /* reveal-on-scroll */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  .reveal-delay-1{ transition-delay:.12s; }
  .reveal-delay-2{ transition-delay:.24s; }
  .reveal-delay-3{ transition-delay:.36s; }

  hr.hairline{
    border:none; height:1px; background:var(--stone);
    width:100%; margin:0;
  }

  /* ============================================================
     1. BARRA DE PROGRESO DE SCROLL — detalle discreto
     ============================================================ */
  .scroll-progress{
    position:fixed; top:0; left:0; height:2px; width:100%;
    background:transparent; z-index:60;
  }
  .scroll-progress__bar{
    height:100%; width:0%;
    background:var(--gold);
    transition:width .08s linear;
  }

  /* ============================================================
     2. REPRODUCTOR DE MÚSICA — fijo, discreto
     ============================================================ */
  .music-player{
    position:fixed;
    top:20px; left:20px;
    z-index:55;
    display:flex; align-items:center; gap:10px;
    background:rgba(251,249,245,.88);
    backdrop-filter:blur(6px);
    border:1px solid var(--stone);
    border-radius:40px;
    padding:8px 16px 8px 8px;
    box-shadow:0 6px 18px rgba(33,31,28,.06);
  }
  .music-player__btn{
    width:34px; height:34px; border-radius:50%;
    border:1px solid var(--olive);
    background:var(--ivory);
    display:flex; align-items:center; justify-content:center;
    color:var(--olive-dark);
    transition:background .25s var(--ease), transform .25s var(--ease);
    flex-shrink:0;
  }
  .music-player__btn:hover{ background:var(--blush); transform:scale(1.05); }
  .music-player__btn svg{ width:14px; height:14px; }
  .music-player__label{
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .music-player__bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
  .music-player__bars span{
    width:2px; background:var(--olive); display:block;
    animation:eq 900ms ease-in-out infinite;
    animation-play-state:paused;
  }
  .music-player.is-playing .music-player__bars span{ animation-play-state:running; }
  .music-player__bars span:nth-child(1){ height:40%; animation-delay:0ms; }
  .music-player__bars span:nth-child(2){ height:100%; animation-delay:150ms; }
  .music-player__bars span:nth-child(3){ height:65%; animation-delay:300ms; }
  @keyframes eq{ 0%,100%{ transform:scaleY(.4);} 50%{ transform:scaleY(1);} }

  @media (max-width:640px){
    .music-player{ top:auto; bottom:20px; left:20px; }
    .music-player__label{ display:none; }
  }

  /* ============================================================
     3. BOTÓN VOLVER ARRIBA
     ============================================================ */
  .to-top{
    position:fixed; right:20px; bottom:20px; z-index:55;
    width:46px; height:46px; border-radius:50%;
    background:var(--ink); color:var(--ivory);
    border:none;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transform:translateY(10px);
    transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease);
    box-shadow:0 8px 22px rgba(33,31,28,.22);
  }
  .to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .to-top:hover{ background:var(--olive-dark); }
  .to-top svg{ width:16px; height:16px; }

  /* ============================================================
     4. HERO — la fotografía como protagonista
     ============================================================ */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:var(--ink);
  }
  .hero__img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 30%;
    transform:scale(1.06);
    animation:heroZoom 12s var(--ease) forwards;
    filter:saturate(0.92) contrast(1.02);
  }
  @keyframes heroZoom{ to{ transform:scale(1); } }
  .hero__scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(20,19,16,.15) 0%, rgba(20,19,16,.10) 40%, rgba(20,19,16,.75) 100%);
  }
  .hero__content{
    position:relative; z-index:2;
    width:100%;
    padding:0 var(--edge) clamp(48px,8vw,96px);
    text-align:center;
    color:var(--ivory);
  }
  .hero__eyebrow{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.34em;
    text-transform:uppercase;
    opacity:0;
    animation:fadeUp 1s var(--ease) .3s forwards;
  }
  .hero__names{
    margin:18px 0 10px;
    font-family:var(--font-display);
    font-weight:300;
    line-height:.98;
    letter-spacing:.01em;
    text-transform:uppercase;
    font-size:clamp(3rem, 11.5vw, 8.2rem);
    opacity:0;
    animation:fadeUp 1.1s var(--ease) .5s forwards;
  }
  .hero__names em{
    display:block;
    font-style:italic;
    font-weight:400;
    text-transform:none;
    font-size:.42em;
    color:var(--gold);
    margin:2px 0;
  }
  .hero__meta{
    opacity:0;
    animation:fadeUp 1s var(--ease) .8s forwards;
  }
  .hero__date{
    font-family:var(--font-mono);
    font-size:clamp(13px,1.6vw,16px);
    letter-spacing:.3em;
  }
  .hero__place{
    margin-top:8px;
    font-size:13px;
    letter-spacing:.08em;
    color:rgba(251,249,245,.78);
  }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

  .hero__scrollcue{
    position:absolute; left:50%; bottom:22px; z-index:2;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color:var(--ivory); opacity:0;
    animation:fadeUp 1s var(--ease) 1.3s forwards;
  }
  .hero__scrollcue span{
    font-family:var(--font-mono); font-size:9px; letter-spacing:.28em; text-transform:uppercase; opacity:.8;
  }
  .hero__scrollcue .line{
    width:1px; height:34px; background:rgba(251,249,245,.55);
    overflow:hidden; position:relative;
  }
  .hero__scrollcue .line::after{
    content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
    background:var(--ivory);
    animation:cueDrop 1.8s ease-in-out infinite;
  }
  @keyframes cueDrop{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@media screen and (max-width: 1024px) {
  .hero__scrollcue {
    display: none !important;
  }
}

  /* ============================================================
     5. MONOGRAMA — elemento firma, círculo trazado a mano
     ============================================================ */
  .monogram{
    width:96px; height:96px; margin:0 auto;
    display:block;
  }
  .monogram circle{
    fill:none; stroke:var(--gold); stroke-width:1;
    stroke-dasharray:302; stroke-dashoffset:302;
    transition:stroke-dashoffset 1.6s var(--ease);
  }
  .monogram.is-visible circle{ stroke-dashoffset:0; }
  .monogram text{
    font-family:var(--font-display); font-style:italic; font-weight:400;
    fill:var(--ink); font-size:26px;
  }

  /* ============================================================
     6. BIENVENIDA
     ============================================================ */
  .welcome{ text-align:center; }
  .welcome .container{ max-width:760px; }
  .welcome__eyebrow{ margin-bottom:22px; display:flex; justify-content:center; }
  .welcome__text{
    margin-top:26px;
    font-size:clamp(15px,1.4vw,17px);
    color:var(--ink-soft);
    max-width:560px; margin-left:auto; margin-right:auto;
    font-weight:300;
  }

  /* ============================================================
     7. CUENTA REGRESIVA
     ============================================================ */
  .countdown{
    background:var(--olive);
    color:var(--ivory);
    padding-top:calc(var(--section-pad) * .8);
    padding-bottom:calc(var(--section-pad) * .8);
  }
  .countdown .eyebrow{ color:var(--blush); }
  .countdown .eyebrow::before{ background:var(--ivory); }
  .countdown__title{
    color:var(--ivory);
    margin-top:18px;
  }
  .countdown__grid{
    margin-top:56px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:clamp(16px,3vw,40px);
  }
  .countdown__unit{ text-align:center; }
  .countdown__num{
    font-family:var(--font-display);
    font-weight:300;
    font-size:clamp(2.6rem,7vw,5rem);
    line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .countdown__label{
    margin-top:10px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--blush);
  }
  .countdown__divider{
    width:1px; height:100%; background:rgba(251,249,245,.25);
    display:none;
  }
  @media (max-width:560px){
    .countdown__grid{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  }

  /* ============================================================
     8. EVENTO — ceremonia y recepción
     ============================================================ */
  .event__head{ text-align:center; margin-bottom:64px; }
  .event__head .eyebrow{ justify-content:center; }
  .event__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(24px,4vw,48px);
  }
  .event-card{
    border:1px solid var(--stone);
    padding:clamp(32px,4vw,48px) clamp(24px,3.5vw,40px);
    background:var(--ivory-soft);
    position:relative;
  }
  .event-card__icon{
    width:38px; height:38px;
    color:var(--olive-dark);
    margin-bottom:24px;
  }
  .event-card__tag{
    font-family:var(--font-mono);
    font-size:10px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--gold);
    margin-bottom:10px; display:block;
  }
  .event-card__title{
    font-family:var(--font-display); font-style:italic; font-weight:400;
    font-size:clamp(1.5rem,2.4vw,2rem);
    margin:0 0 18px;
  }
  .event-card__row{
    display:flex; gap:14px; padding:12px 0;
    border-top:1px solid var(--stone);
    font-size:14px;
  }
  .event-card__row:first-of-type{ border-top:1px solid var(--stone); margin-top:6px; }
  .event-card__row b{
    font-weight:500; min-width:80px; display:inline-block;
    color:var(--ink-soft); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  }
  .event-card__btn{
    margin-top:26px;
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    padding:13px 22px;
    border:1px solid var(--ink);
    transition:background .3s var(--ease), color .3s var(--ease);
  }
  .event-card__btn:hover{ background:var(--ink); color:var(--ivory); }
  .event-card__btn svg{ width:13px; height:13px; }

  @media (max-width:760px){
    .event__grid{ grid-template-columns:1fr; }
  }

  /* ============================================================
     9. GALERÍA — mosaico asimétrico
     ============================================================ */
  .gallery__head{ text-align:center; margin-bottom:56px; }
  .gallery__head .eyebrow{ justify-content:center; }
  .gallery__grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:120px;
    gap:12px;
  }
  .gallery__item{
    overflow:hidden; position:relative; cursor:pointer;
    background:var(--stone);
  }
  .gallery__item img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .7s var(--ease), filter .5s var(--ease);
  }
  .gallery__item:hover img{ transform:scale(1.06); }
  .gallery__item:nth-child(1){ grid-column:span 3; grid-row:span 3; }
  .gallery__item:nth-child(2){ grid-column:span 3; grid-row:span 2; }
  .gallery__item:nth-child(3){ grid-column:span 3; grid-row:span 3; }
  .gallery__item:nth-child(4){ grid-column:span 2; grid-row:span 2; }
  .gallery__item:nth-child(5){ grid-column:span 2; grid-row:span 2; }
  .gallery__item:nth-child(6){ grid-column:span 2; grid-row:span 2; }

  @media (max-width:760px){
    .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
    .gallery__item:nth-child(n){ grid-column:span 1; grid-row:span 2; }
  }

  .lightbox{
    position:fixed; inset:0; z-index:80;
    background:rgba(20,19,16,.94);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .35s var(--ease);
    padding:40px;
  }
  .lightbox.is-open{ opacity:1; pointer-events:auto; }
  .lightbox img{ max-width:min(900px,90vw); max-height:86vh; object-fit:contain; }
  .lightbox__close{
    position:absolute; top:24px; right:24px;
    width:42px; height:42px; border-radius:50%;
    background:transparent; border:1px solid rgba(251,249,245,.4);
    color:var(--ivory); display:flex; align-items:center; justify-content:center;
  }
  .lightbox__close svg{ width:15px; height:15px; }

  /* ============================================================
     10. INFORMACIÓN ADICIONAL
     ============================================================ */
  .info{ background:var(--blush); }
  .info__head{ text-align:center; margin-bottom:56px; }
  .info__head .eyebrow{ justify-content:center; }
  .info__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(24px,4vw,48px);
  }
  .info-card{ text-align:center; padding:0 12px; }
  .info-card__icon{
    width:32px; height:32px; margin:0 auto 22px;
    color:var(--olive-dark);
  }
  .info-card__title{
    font-family:var(--font-display); font-style:italic; font-weight:400;
    font-size:1.4rem; margin:0 0 14px;
  }
  .info-card__text{ font-size:14px; color:var(--ink-soft); max-width:340px; margin:0 auto; }

  @media (max-width:640px){ .info__grid{ grid-template-columns:1fr; row-gap:48px; } }

  /* ============================================================
     11. FORÁNEOS — sección desmontable
     ============================================================ */
  .traveler__head{ text-align:center; margin-bottom:56px; }
  .traveler__head .eyebrow{ justify-content:center; }
  .traveler__grid{
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px);
  }
  .traveler__col-title{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--olive-dark); margin-bottom:22px; display:block;
  }
  .place-card{
    display:flex; justify-content:space-between; align-items:baseline;
    gap:12px; padding:16px 0; border-top:1px solid var(--stone);
  }
  .traveler__col .place-card:last-child{ border-bottom:1px solid var(--stone); }
  .place-card__name{ font-weight:500; font-size:15px; }
  .place-card__meta{ font-size:12px; color:var(--ink-soft); font-family:var(--font-mono); text-align:right; white-space:nowrap; }

  @media (max-width:700px){ .traveler__grid{ grid-template-columns:1fr; row-gap:44px; } }

  /* ============================================================
     12. RSVP
     ============================================================ */
  .rsvp{ background:var(--ink); color:var(--ivory); }
  .rsvp .eyebrow{ color:var(--stone); }
  .rsvp .eyebrow::before{ background:var(--gold); }
  .rsvp__head{ text-align:center; margin-bottom:20px; }
  .rsvp__head .eyebrow{ justify-content:center; }
  .rsvp__title{ color:var(--ivory); margin-top:18px; }
  .rsvp__sub{
    text-align:center; color:rgba(251,249,245,.65); font-size:13px;
    margin-top:14px; letter-spacing:.03em;
  }
  .rsvp__form{
    max-width:640px; margin:56px auto 0;
    display:grid; grid-template-columns:1fr 1fr; gap:28px 24px;
  }
  .field{ display:flex; flex-direction:column; gap:8px; }
  .field--full{ grid-column:1 / -1; }
  .field label{
    font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(251,249,245,.6);
  }
  .field input, .field select, .field textarea{
    background:transparent;
    border:none; border-bottom:1px solid rgba(251,249,245,.35);
    color:var(--ivory);
    font-family:var(--font-body); font-size:15px;
    padding:8px 2px;
    transition:border-color .3s var(--ease);
  }
  .field select option{ color:var(--ink); }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(251,249,245,.3); }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-bottom-color:var(--gold);
  }
  .field textarea{ resize:vertical; min-height:80px; }

  .rsvp__submit{
    grid-column:1 / -1;
    margin-top:12px;
    justify-self:center;
    padding:16px 44px;
    background:var(--ivory); color:var(--ink);
    border:none;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    transition:background .3s var(--ease), transform .2s var(--ease);
  }
  .rsvp__submit:hover{ background:var(--gold); }
  .rsvp__submit:disabled{ opacity:.55; cursor:progress; }
  .rsvp__submit:active{ transform:scale(.98); }

  .rsvp__status{
    grid-column:1 / -1; text-align:center;
    font-size:13px; letter-spacing:.02em;
    min-height:18px;
  }
  .rsvp__status[data-state="ok"]{ color:#B9CBA0; }
  .rsvp__status[data-state="err"]{ color:#E3A6A0; }

  @media (max-width:600px){ .rsvp__form{ grid-template-columns:1fr; } }

  /* ============================================================
     13. FOOTER
     ============================================================ */
  .footer{ text-align:center; padding:calc(var(--section-pad) * .6) var(--edge); }
  .footer__names{
    font-family:var(--font-display); font-style:italic; font-size:1.6rem; margin:22px 0 6px;
  }
  .footer__note{ font-size:12px; color:var(--ink-soft); letter-spacing:.04em; }