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

  :root{
    --ivory:#F6F1E8;
    --paper:#FFFDF8;
    --ink:#2A2420;
    --ink-soft:#5B5148;
    --rose:#C6A79C;
    --rose-deep:#AD8579;
    --gold:#A6864F;
    --line: rgba(42,36,32,0.16);
    --line-soft: rgba(42,36,32,0.08);
    --maxw: 1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ivory);
    color:var(--ink);
    font-family:'EB Garamond', serif;
    font-size:18px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  h1,h2,h3{
    font-family:'Playfair Display', serif;
    font-weight:500;
    letter-spacing:0.01em;
    margin:0;
    color:var(--ink);
  }

  .eyebrow{
    font-family:'Jost', sans-serif;
    font-size:12px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    display:inline-block;
  }

  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 clamp(20px,5vw,64px);
  }

  a{color:inherit;}
  img{display:block; width:100%; height:100%; object-fit:cover;}

  /* ---------- Spine (signature element) ---------- */
  .spine{
    position:fixed;
    left:0; top:0; bottom:0;
    width:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:40;
    pointer-events:none;
    mix-blend-mode:difference;
  }
  .spine span{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-family:'Jost', sans-serif;
    font-size:11px;
    letter-spacing:0.35em;
    text-transform:uppercase;
    color:#fff;
    white-space:nowrap;
  }
  @media (max-width:760px){ .spine{display:none;} }

  /* ---------- Reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  .reveal-stagger.is-visible > *{
    animation:staggerUp 0.8s cubic-bezier(.16,1,.3,1) both;
  }
  .reveal-stagger.is-visible > *:nth-child(1){animation-delay:0.05s;}
  .reveal-stagger.is-visible > *:nth-child(2){animation-delay:0.15s;}
  .reveal-stagger.is-visible > *:nth-child(3){animation-delay:0.25s;}
  .reveal-stagger.is-visible > *:nth-child(4){animation-delay:0.35s;}
  .reveal-stagger.is-visible > *:nth-child(5){animation-delay:0.45s;}
  .reveal-stagger.is-visible > *:nth-child(6){animation-delay:0.55s;}
  @keyframes staggerUp{
    from{ opacity:0; transform:translateY(22px) scale(0.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }

  /* ---------- Masthead entrance ---------- */
  @keyframes fadeUpIn{
    from{ opacity:0; transform:translateY(26px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .masthead-top{ animation:fadeUpIn 1s cubic-bezier(.16,1,.3,1) 0.1s both; }
  .masthead-center .eyebrow{ animation:fadeUpIn 1s cubic-bezier(.16,1,.3,1) 0.35s both; }
  .masthead-names{ animation:fadeUpIn 1.2s cubic-bezier(.16,1,.3,1) 0.55s both; }
  .masthead-sub{ animation:fadeUpIn 1s cubic-bezier(.16,1,.3,1) 0.85s both; }
  .masthead-bottom{ animation:fadeUpIn 1s cubic-bezier(.16,1,.3,1) 1.05s both; }

  @keyframes floatHint{
    0%, 100%{ transform:translateY(0); opacity:0.7; }
    50%{ transform:translateY(6px); opacity:1; }
  }

  /* ---------- Masthead / Header ---------- */
  .masthead{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:clamp(28px,5vw,56px) clamp(20px,6vw,72px);
    position:relative;
    background:
      linear-gradient(180deg, rgba(246,241,232,0.15) 0%, rgba(42,36,32,0.55) 78%),
      url('https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?auto=format&fit=crop&w=1800&q=80') center 30%/cover no-repeat;
    background-attachment:fixed;
  }
  @media (max-width:820px){
    .masthead{ background-attachment:scroll; }
  }
  .masthead-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    font-family:'Jost', sans-serif;
    font-size:12px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:#F6F1E8;
  }
  .masthead-top .num{opacity:0.85;}
  .masthead-center{
    text-align:center;
    padding:60px 0 20px;
  }
  .masthead-center .eyebrow{color:#E7D9C8; margin-bottom:22px;}
  .masthead-names{
    font-size:clamp(52px, 11vw, 128px);
    color:#FBF8F2;
    line-height:0.98;
    letter-spacing:0.01em;
  }
  .masthead-names em{
    font-style:italic;
    font-weight:400;
    color:var(--rose);
  }
  .masthead-sub{
    margin-top:26px;
    font-family:'Jost', sans-serif;
    font-size:13px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:#F0E7DA;
  }
  .masthead-bottom{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    font-family:'Jost', sans-serif;
    color:#F6F1E8;
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
  }
  .masthead-date{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-size:clamp(18px,2.4vw,26px);
    letter-spacing:0.02em;
    text-transform:none;
    color:#FBF8F2;
  }
  .scroll-hint{
    writing-mode:vertical-rl;
    display:inline-block;
    animation:floatHint 2.6s ease-in-out infinite;
  }

  /* ---------- Section shell ---------- */
  section{
    padding:clamp(90px,12vw,150px) 0;
    border-bottom:1px solid var(--line-soft);
  }
  .folio{
    display:flex;
    align-items:baseline;
    gap:18px;
    margin-bottom:clamp(40px,6vw,64px);
  }
  .folio .no{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-size:15px;
    color:var(--gold);
  }
  .folio .rule{
    flex:1;
    height:1px;
    background:var(--line);
  }
  .folio .label{
    font-family:'Jost', sans-serif;
    font-size:12px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  /* ---------- Bienvenida ---------- */
  .welcome-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:clamp(30px,6vw,80px);
    align-items:center;
  }
  .welcome-grid figure{
    aspect-ratio:4/5;
    overflow:hidden;
  }
  .welcome-text h2{
    font-size:clamp(30px,3.6vw,44px);
    font-style:italic;
    margin-bottom:26px;
  }
  .drop p:first-of-type::first-letter{
    font-family:'Playfair Display', serif;
    font-size:74px;
    float:left;
    line-height:0.8;
    padding:6px 10px 0 0;
    color:var(--rose-deep);
    font-weight:500;
  }
  .signature-line{
    margin-top:32px;
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-size:22px;
    color:var(--ink-soft);
  }
  @media (max-width:820px){
    .welcome-grid{grid-template-columns:1fr;}
    .welcome-grid figure{order:-1;}
  }

  /* ---------- Contador (relationship counter) ---------- */
  .counter-section{
    background:var(--ink);
    color:var(--ivory);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .counter-section .folio .rule{background:rgba(255,255,255,0.18);}
  .counter-section .folio .label{color:#D8CBBB;}
  .counter-section .folio .no{color:var(--rose);}
  .counter-intro{
    max-width:640px;
    font-size:19px;
    color:#E4D9CB;
    margin-bottom:56px;
  }
  .counter-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  .counter-item{
    text-align:center;
    padding:28px 10px;
    border-left:1px solid rgba(255,255,255,0.14);
  }
  .counter-item:first-child{border-left:none;}
  .counter-num{
    font-family:'Playfair Display', serif;
    font-size:clamp(38px,5vw,60px);
    color:var(--rose);
    font-variant-numeric:tabular-nums;
  }
  .counter-label{
    margin-top:10px;
    font-family:'Jost', sans-serif;
    font-size:11px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:#C9BCAC;
  }
  @media (max-width:640px){
    .counter-grid{grid-template-columns:repeat(2,1fr);}
    .counter-item:nth-child(3){border-left:none;}
  }

  /* ---------- Evento ---------- */
  .event-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .event-card{
    background:var(--paper);
    padding:clamp(30px,4vw,48px);
  }
  .event-card .eyebrow{margin-bottom:16px;}
  .event-card h3{
    font-size:clamp(24px,2.6vw,30px);
    font-style:italic;
    margin-bottom:18px;
  }
  .event-detail{
    display:flex;
    gap:14px;
    padding:12px 0;
    border-top:1px solid var(--line-soft);
  }
  .event-detail:first-of-type{border-top:none;}
  .event-detail .k{
    font-family:'Jost', sans-serif;
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
    width:96px;
    flex-shrink:0;
    padding-top:3px;
  }
  .event-detail .v{color:var(--ink-soft);}
  .event-map-link{
    display:inline-block;
    margin-top:20px;
    font-family:'Jost', sans-serif;
    font-size:12px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--ink);
    border-bottom:1px solid var(--gold);
    padding-bottom:3px;
  }
  @media (max-width:760px){ .event-grid{grid-template-columns:1fr;} }

  /* ---------- Cuenta regresiva ---------- */
  .countdown-wrap{
    text-align:center;
  }
  .countdown-lead{
    max-width:560px;
    margin:0 auto 50px;
    text-align:center;
    color:var(--ink-soft);
    font-size:19px;
  }
  .countdown{
    display:flex;
    justify-content:center;
    gap:clamp(14px,4vw,40px);
    flex-wrap:wrap;
  }
  .countdown .unit{
    min-width:110px;
  }
  .countdown .val{
    font-family:'Playfair Display', serif;
    font-size:clamp(42px,7vw,74px);
    color:var(--rose-deep);
    font-variant-numeric:tabular-nums;
    line-height:1;
    display:inline-block;
  }
  .countdown .val.tick{
    animation:tickPulse 0.5s cubic-bezier(.16,1,.3,1);
  }
  @keyframes tickPulse{
    0%{ transform:translateY(-8px); opacity:0.4; }
    100%{ transform:translateY(0); opacity:1; }
  }
  .countdown .lab{
    margin-top:10px;
    font-family:'Jost', sans-serif;
    font-size:11px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .countdown .sep{
    align-self:flex-start;
    font-family:'Playfair Display', serif;
    font-size:clamp(30px,5vw,50px);
    color:var(--line);
    padding-top:2px;
  }

 /* ---------- Galería ---------- */
  .gallery{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:160px;
    gap:10px;
  }
  .gallery figure{ overflow:hidden; }
  .gallery figure img{ transition:transform 1.4s cubic-bezier(.16,1,.3,1); }
  .gallery figure:hover img{ transform:scale(1.06); }
  .g1{grid-column:span 3; grid-row:span 3;}
  .g2{grid-column:span 3; grid-row:span 2;}
  .g3{grid-column:span 3; grid-row:span 2;}
  .g4{grid-column:span 2; grid-row:span 2;}
  .g5{grid-column:span 2; grid-row:span 2;}
  .g6{grid-column:span 2; grid-row:span 2;}
  .gallery figure{ cursor:pointer; }
 
  @media (max-width:820px){
    .gallery{
      grid-template-columns:repeat(2,1fr);
      grid-auto-rows:100px;
      grid-auto-flow:row;
      gap:6px;
    }
    /* Foto hero, igual que en escritorio (g1 es la imagen principal) */
    .g1{grid-column:span 2; grid-row:span 3;}
    /* Fila de dos fotos medianas */
    .g2{grid-column:span 1; grid-row:span 2;}
    .g3{grid-column:span 1; grid-row:span 2;}
    /* Fila de dos fotos medianas */
    .g4{grid-column:span 1; grid-row:span 2;}
    .g5{grid-column:span 1; grid-row:span 2;}
    /* Foto de cierre a todo lo ancho */
    .g6{grid-column:span 2; grid-row:span 2;}
  }
  @media (max-width:480px){
    .gallery{ grid-auto-rows:80px; gap:4px; }
  }
  /* ---------- Lightbox ---------- */
  .lightbox{
    position:fixed;
    inset:0;
    background:rgba(20,17,14,0.95);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:100;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.35s ease;
  }
  .lightbox.is-open{
    opacity:1;
    visibility:visible;
  }
  .lightbox img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .lightbox-close{
    position:absolute;
    top:18px;
    right:18px;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(246,241,232,0.4);
    background:transparent;
    color:var(--ivory);
    font-family:'Jost', sans-serif;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .lightbox-close:hover{ background:rgba(246,241,232,0.12); }

  /* ---------- Back to top ---------- */
  .to-top{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:60;
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--ink);
    color:var(--ivory);
    border:1px solid var(--ink);
    font-family:'Playfair Display', serif;
    font-size:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(42,36,32,0.28);
    transition:background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    text-decoration:none;
  }
  .to-top:hover{
    background:var(--rose-deep);
    border-color:var(--rose-deep);
    transform:translateY(-3px);
  }

  /* ---------- Music player ---------- */
  .music-player{
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:60;
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:30px;
    padding:6px 18px 6px 6px;
    box-shadow:0 10px 30px rgba(42,36,32,0.18);
    transition:transform 0.3s ease;
  }
  .music-toggle{
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--ink);
    color:var(--ivory);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background 0.3s ease, transform 0.3s ease;
  }
  .music-toggle:hover{ background:var(--rose-deep); transform:scale(1.05); }
  .music-toggle.is-playing svg{ animation:none; }
  .music-label{
    font-family:'Jost', sans-serif;
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  @media (max-width:600px){
    .music-player{ left:12px; bottom:12px; padding:5px 14px 5px 5px; }
    .to-top{ right:12px; bottom:12px; }
  }
  @media (max-width:360px){
    .music-label{ display:none; }
  }
  .to-top svg{ width:18px; height:18px; }

  /* ---------- Info adicional ---------- */
  .info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:clamp(30px,6vw,80px);
  }
  .info-block .eyebrow{margin-bottom:14px;}
  .info-block h3{
    font-size:clamp(24px,2.6vw,28px);
    font-style:italic;
    margin-bottom:16px;
  }
  .info-block p{color:var(--ink-soft);}
  .dress-swatches{
    display:flex;
    gap:12px;
    margin-top:20px;
  }
  .swatch{
    width:44px; height:44px;
    border-radius:50%;
    border:1px solid var(--line);
  }
  @media (max-width:760px){ .info-grid{grid-template-columns:1fr;} }

  /* ---------- RSVP ---------- */
  .rsvp-section{
    background:var(--paper);
    border-bottom:none;
  }
  .rsvp-inner{
    max-width:680px;
    margin:0 auto;
  }
  .rsvp-lead{
    text-align:center;
    color:var(--ink-soft);
    font-size:19px;
    max-width:520px;
    margin:0 auto 50px;
  }
  form{ display:flex; flex-direction:column; gap:26px; }
  .field{ display:flex; flex-direction:column; gap:8px; }
  .field label{
    font-family:'Jost', sans-serif;
    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .field input[type="text"],
  .field input[type="tel"],
  .field input[type="email"],
  .field input[type="number"],
  .field select,
  .field textarea{
    font-family:'EB Garamond', serif;
    font-size:18px;
    color:var(--ink);
    background:transparent;
    border:none;
    border-bottom:1px solid var(--line);
    padding:10px 2px;
    outline:none;
    transition:border-color 0.3s ease;
  }
  .field textarea{ resize:vertical; min-height:90px; font-family:'EB Garamond', serif;}
  .field input:focus,
  .field select:focus,
  .field textarea:focus{
    border-bottom-color:var(--gold);
  }
  .radio-row{ display:flex; gap:28px; }
  .radio-row label{
    display:flex; align-items:center; gap:8px;
    font-family:'Jost', sans-serif;
    font-size:13px;
    letter-spacing:0.05em;
    text-transform:none;
    color:var(--ink);
    cursor:pointer;
  }
  .radio-row input{ accent-color:var(--gold); width:16px; height:16px; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
  @media (max-width:600px){ .row2{grid-template-columns:1fr;} }

  .submit-btn{
    margin-top:12px;
    align-self:center;
    font-family:'Jost', sans-serif;
    font-size:12px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    background:var(--ink);
    color:var(--ivory);
    border:1px solid var(--ink);
    padding:16px 46px;
    cursor:pointer;
    transition:background 0.35s ease, color 0.35s ease;
  }
  .submit-btn:hover{ background:transparent; color:var(--ink); }
  .submit-btn:disabled{ opacity:0.5; cursor:progress; }

  .form-note{
    text-align:center;
    font-family:'Jost', sans-serif;
    font-size:11px;
    letter-spacing:0.08em;
    color:var(--ink-soft);
    opacity:0.75;
    margin-top:6px;
  }
  .form-status{
    text-align:center;
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-size:19px;
    min-height:26px;
    color:var(--rose-deep);
  }

  /* ---------- Footer ---------- */
  footer{
    padding:46px 0 46px;
    text-align:center;
  }
  footer .eyebrow{ display:block; margin-bottom:14px; }
  footer .names{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-size:24px;
  }

.footer-social{
    display:flex;justify-content:center;gap:5px;margin-bottom:5px;flex-wrap:wrap;
  }
  .footer-social a{
    width:44px;height:44px;
    border:1px solid rgba(255,255,255,0.2);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition:border-color 0.25s ease, background 0.25s ease;
  }
  .footer-social a:hover{border-color:none;background:var(--gold);}
  .footer-social svg{width:18px;height:18px;}
  .footer-credit{font-size:0.78rem;line-height:1.9;color:var(--ink);}
  .footer-credit a{color:var(--gold);}
  .footer-credit a:hover{text-decoration:underline;}