/* ==========================================================
   R & Y — estilos compartidos (invitación + días de la boda)
   Extraído tal cual del <style> de index.html. Las rutas
   relativas apuntan a ../fonts y ../images.
   ========================================================== */

  /* ==========================================================
   CLASES RESPONSIVE
   Breakpoints:
   xs: <576px
   sm: >=576px
   md: >=768px
   lg: >=992px
   xl: >=1200px
   xxl: >=1400px
  ========================================================== */

  /* Mostrar siempre */
  .show {
      display: block !important;
  }

  /* Ocultar siempre */
  .hide {
      display: none !important;
  }

  /* ======================================
    SOLO MÓVIL (<768px)
  ====================================== */

  .mobile-only {
      display: none !important;
  }

  @media (max-width: 767.98px) {
      .mobile-only {
          display: block !important;
      }
  }

  /* ======================================
    SOLO TABLET (768px - 991px)
  ====================================== */

  .tablet-only {
      display: none !important;
  }

  @media (min-width:768px) and (max-width:991.98px) {
      .tablet-only {
          display:block !important;
      }
  }

  /* ======================================
    SOLO ESCRITORIO (>=992px)
  ====================================== */

  .desktop-only {
      display:none !important;
  }

  @media (min-width:992px) {
      .desktop-only {
          display:block !important;
      }
      .hero-names{
        margin: 0 0 400px !important;
      }
  }

  /* ======================================
    OCULTAR EN MÓVIL
  ====================================== */

  .hide-mobile {
      display:block !important;
  }

  @media (max-width:767.98px) {
      .hide-mobile {
          display:none !important;
      }
  }

  /* ======================================
    OCULTAR EN TABLET
  ====================================== */

  .hide-tablet {
      display:block !important;
  }

  @media (min-width:768px) and (max-width:991.98px) {
      .hide-tablet {
          display:none !important;
      }
  }

  /* ======================================
    OCULTAR EN ESCRITORIO
  ====================================== */

  .hide-desktop {
      display:block !important;
  }

  @media (min-width:992px) {
      .hide-desktop {
          display:none !important;
      }
  }
  /* Tipografías: Google Fonts auto-hospedadas como archivos sueltos en /fonts */
  @font-face{
    font-family:'Playfair Display';
    font-style:normal;
    font-weight:400 700;
    font-display:swap;
    src:url('../fonts/PlayfairDisplay-VF.woff2') format('woff2');
  }
  @font-face{
    font-family:'Alex Brush';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('../fonts/AlexBrush-Regular.woff2') format('woff2');
  }
  @font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('../fonts/Poppins-Regular.woff2') format('woff2');
  }
  @font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url('../fonts/Poppins-Medium.woff2') format('woff2');
  }
  @font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url('../fonts/Poppins-SemiBold.woff2') format('woff2');
  }
  @font-face{
    font-family:'Cormorant';
    font-style:normal;
    font-weight:400 600;
    font-display:swap;
    src:url('../fonts/Cormorant-VF.woff2') format('woff2');
  }
  @font-face{
    font-family:'Cormorant';
    font-style:italic;
    font-weight:400;
    font-display:swap;
    src:url('../fonts/Cormorant-Italic.woff2') format('woff2');
  }

  /* Paleta única e intencional: blanco, dorado y champagne — con un acento café.
     La invitación no cambia con el modo oscuro del visor: es una pieza de
     papelería, no una interfaz, y su identidad visual es fija. */
  :root, :root[data-theme="dark"], :root[data-theme="light"]{
    --ivory:#FFFFFF;
    --ivory-deep:#F6E7C4;
    --ink:#2B241D;
    --ink-soft:#5B5142;
    --gold:#AD8542;
    --gold-deep:#8A6530;
    --gold-pale:#EEDFB0;
    --champagne-deep:#E3C989;
    --line:rgba(138,101,48,0.35);
    --card-bg:#FDF8EA;
    --shadow:0 20px 50px -25px rgba(43,36,29,0.35);
    --focus:#8A6530;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  body{
    margin:0;
    background:var(--ivory);
    color:var(--ink);
    font-family:'Cormorant',Georgia,'Times New Roman',serif;
    font-size:19px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* Clase que aplica la animación */
  .bouncy {
    animation: bounce 2s ease-out 3;
  }

  /* Definición del movimiento de rebote */
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-30px);
    }
    60% {
      transform: translateY(-15px);
    }
  }
  .display{
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
    font-weight:400;
    letter-spacing:0.01em;
    text-wrap:balance;
  }
  .script{
    font-family:'Alex Brush','Brush Script MT',cursive;
    font-weight:400;
  }
  .label{
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:0.72rem;
    color:var(--ink-soft);
  }
  .nums{ font-variant-numeric:tabular-nums; }

  a{ color:inherit; }
  button{ font:inherit; }

  :focus-visible{
    outline:2px solid var(--focus);
    outline-offset:3px;
  }

  .wrap{
    max-width:640px;
    margin:0 auto;
    padding:0 28px;
  }

  section{
    padding:56px 0;
    position:relative;
  }

  .band{
    background:var(--ivory-deep);
    box-shadow:0 0 0 100vmax var(--ivory-deep);
    clip-path:inset(0 -100vmax);
  }

  .icon-divider{
    text-align:center;
    padding:14px 0;
  }
  .icon-divider svg{
    width:150px;
    height:auto;
    color:var(--gold-deep);
    opacity:0.9;
  }

  /* ---------- Frases ---------- */
  .phrases{ text-align:center; }
  .quote-block{
    max-width:520px;
    margin:0 auto 40px;
  }
  .quote-block:last-child{ margin-bottom:0; }
  .quote{
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
    font-style:italic;
    font-size:clamp(1.4rem,4vw,1.9rem);
    line-height:1.4;
    color:var(--ink);
    margin:0 0 10px;
    text-wrap:balance;
  }
  .quote-caption{
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    font-size:0.72rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold-deep);
    margin:0;
  }

  /* ---------- Avión ---------- */
  .plane-divider{
    position:relative;
    height:70px;
    overflow:hidden;
  }
  .plane-divider svg{
    position:absolute;
    top:50%;
    left:-10%;
    width:52px;
    height:auto;
    color:var(--gold-deep);
    opacity:0.85;
    animation:fly 7s linear infinite;
  }
  @keyframes fly{
    0%{ left:-10%; transform:translateY(-50%) rotate(90deg); }
    50%{ transform:translateY(-62%) rotate(100deg); }
    100%{ left:110%; transform:translateY(-50%) rotate(80deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .plane-divider svg{ animation:none; left:calc(50% - 26px); }
  }

  /* ---------- Ramo animado ---------- */
  .bouquet-sway{
    display:inline-block;
    transform-origin:50% 92%;
    animation:sway 4.5s ease-in-out infinite;
  }
  @keyframes sway{
    0%, 100%{ transform:rotate(-4deg); }
    50%{ transform:rotate(4deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .bouquet-sway{ animation:none; }
  }

  .rule{
    width:100%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);
  }

  .frame{
    border:1px solid var(--line);
    border-radius:26px;
    overflow:hidden;
  }
  .frame-inner{
    border:0;
  }

  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity 0.9s ease, transform 0.9s ease;
  }
  .reveal.in{
    opacity:1;
    transform:translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  /* ---------- Hero ---------- */
  .hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    text-align:center;
    padding:64px 28px 72px;
    /* La ruta vive acá: un url() relativo pasado por variable desde el HTML
       se resolvería contra css/ y no contra la raíz. */
    background-image:url('../images/hero-desktop.jpg');
    background-size:cover;
    background-position:center 50%;
    position:relative;
  }

  @media (max-width:1024px){
    .hero{ 
      background-image:url('../images/hero-tablet.jpg'); 
      justify-content: center;
    }
  }
  @media (max-width:600px){
    .hero{ background-image:url('../images/hero-mobile.jpg'); }
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(20,16,12,0.1) 0%, rgba(20,16,12,0.5) 46%, rgba(20,16,12,0.95) 100%);
    pointer-events:none;
  }
  .hero > *{ position:relative; z-index:1; text-shadow:0 2px 10px rgba(0,0,0,0.45); }
  .hero-eyebrow{
    margin-bottom:18px;
    color:var(--gold-pale);
    font-family:'Alex Brush','Brush Script MT',cursive;
    font-weight:500;
    -webkit-text-stroke:0.5px var(--gold-pale);
    font-size:clamp(3rem,13vw,5.4rem);
    letter-spacing:0.01em;
    text-transform:none;
    line-height:1;
  }
  .hero-monogram{
    font-size:clamp(3.2rem,11vw,6rem);
    line-height:1;
    margin:0 0 20px;
    color:var(--ivory);
  }
  .hero-monogram .amp{
    font-family:'Alex Brush','Brush Script MT',cursive;
    color:var(--gold-pale);
    padding:0 0.15em;
    display:inline-block;
    font-size:0.85em;
  }
  .hero-names{
    font-size:clamp(1.15rem,2.4vw,1.15rem);
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--gold-pale);
    margin:0 0 120px;
  }
  .hero-date{
    font-size:clamp(1.6rem,4vw,2.1rem);
    letter-spacing:0.1em;
    margin:0 0 6px;
    color:var(--ivory);
  }
  .hero-place{
    font-size:1rem;
    color:var(--gold-pale);
    margin:0 0 48px;
  }
  .countdown{
    display:flex;
    gap:28px;
    margin-bottom:48px;
  }
  .countdown div{ text-align:center; }
  .countdown .n{
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
    font-size:1.8rem;
    display:block;
    color:var(--ivory);
  }
  .countdown .label{ color:var(--gold-pale); }
  .scrollcue{
    font-size:0.75rem;
    letter-spacing:0.2em;
    color:var(--gold-pale);
    text-transform:uppercase;
  }

  /* ---------- Intro ---------- */
  .intro{ text-align:center; }
  .intro p{
    font-size:1.4rem;
    font-style:italic;
    line-height:1.75;
    max-width:520px;
    margin:0 auto;
  }
  /* ---------- Section heads ---------- */
  .section-head{
    text-align:center;
    margin-bottom:56px;
  }
  .section-head .label{ margin-bottom:14px; }
  .section-head h2{
    font-size:clamp(1.8rem,4vw,2.4rem);
    margin:0;
  }
  .mini-monogram{
    font-size:clamp(1.6rem,4.5vw,2.1rem);
    color:var(--gold-deep);
  }
  .mini-monogram .amp{
    font-family:'Alex Brush','Brush Script MT',cursive;
    padding:0 0.1em;
  }

  /* ---------- Details cards ---------- */
  .cards{
    display:grid;
    gap:24px;
    grid-template-columns:1fr;
  }
  @media (min-width:560px){
    .cards.two{ grid-template-columns:1fr 1fr; }
    #civil{
      width:calc((100% - 24px) / 2);
      margin-left:auto;
      margin-right:auto;
    }
  }
  .card{
    background:var(--card-bg);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:36px 28px;
    text-align:center;
  }
  .card .label{ margin-bottom:12px; }
  .card h3{
    font-size:1.5rem;
    margin:0 0 10px;
  }
  .card p{ margin:0; color:var(--ink-soft); }

  .map-frame{
    margin-top:32px;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
  }
  .map-frame iframe{
    display:block;
    width:100%;
    height:280px;
    border:0;
    filter:sepia(0.15) saturate(0.9);
  }
  .venue-actions{
    text-align:center;
    margin-top:28px;
  }

  .btn{
    display:inline-block;
    padding:14px 34px;
    border:1px solid var(--gold-deep);
    border-radius:999px;
    color:var(--ink);
    text-decoration:none;
    background:transparent;
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-size:0.78rem;
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    cursor:pointer;
    transition:background 0.35s ease, color 0.35s ease;
  }
  .btn:hover{ background:var(--gold-deep); color:var(--ivory-deep); }
  .btn.solid{
    background:var(--gold-deep);
    color:var(--ivory-deep);
  }
  .btn.solid:hover{ background:var(--gold); }

  /* ---------- Schedule ---------- */
  .timeline{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .tl-item{
    display:grid;
    grid-template-columns:90px 24px 1fr;
    align-items:start;
    gap:0;
    padding:22px 0;
  }
  .tl-time{
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
    font-size:1.15rem;
    text-align:right;
    padding-right:18px;
  }
  .tl-dot-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    height:100%;
  }
  .tl-dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--gold);
    margin-top:8px;
    flex-shrink:0;
  }
  .tl-line{
    width:1px;
    flex:1;
    background:var(--line);
    margin-top:6px;
  }
  .tl-body h3{
    margin:0 0 4px;
    font-size:1.3rem;
    padding-left:18px;
  }
  .tl-body p{
    margin:0;
    padding-left:18px;
    color:var(--ink-soft);
    font-size:0.98rem;
  }

  .dresscode-note, .adults-note{
    text-align:center;
    color:var(--ink-soft);
    font-size:1rem;
    margin-top:18px;
  }

  /* ---------- Video ---------- */
  .video-frame{
    position:relative;
    width:100%;
    padding-top:56.25%;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .video-frame iframe,
  .video-frame video{
    position:absolute; inset:0; width:100%; height:100%; border:0;
    background:#000;
    object-fit:contain;
  }

  /* ---------- Gallery ---------- */
  .carousel{
    position:relative;
    border-radius:22px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    aspect-ratio:4/5;
  }
  .carousel-track{
    display:flex;
    height:100%;
    transition:transform 0.85s cubic-bezier(.65,0,.35,1);
  }
  .carousel-track img{
    flex:0 0 100%;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .carousel-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.5);
    background:rgba(43,36,29,0.35);
    color:var(--ivory);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    backdrop-filter:blur(2px);
  }
  .carousel-arrow.prev{ left:14px; }
  .carousel-arrow.next{ right:14px; }
  .carousel-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:16px;
  }
  .carousel-dots button{
    width:7px; height:7px;
    padding:0;
    border-radius:50%;
    border:0;
    background:var(--line);
    cursor:pointer;
  }
  .carousel-dots button.active{ background:var(--gold-deep); }
  .ph{
    aspect-ratio:4/5;
    border:1px solid var(--line);
    border-radius:18px;
    background:
      radial-gradient(circle at 50% 50%, var(--gold-pale) 0%, transparent 65%),
      var(--ivory-deep);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold-deep);
    font-family:'Alex Brush','Brush Script MT',cursive;
    font-size:1.6rem;
    text-align:center;
    padding:12px;
  }
  .ph span{
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    display:block;
    font-size:0.62rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    margin-top:8px;
    color:var(--ink-soft);
  }
  .ph-img{
    aspect-ratio:4/5;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .ph-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .featured-photo img{
    width:100%;
    height:auto;
    display:block;
  }
  .photo-caption{ position:relative; }
  .photo-caption::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(20,16,12,0.55) 0%, transparent 40%);
    pointer-events:none;
  }
  .photo-caption-text{
    position:absolute;
    left:0; right:0; top:0;
    padding:24px 20px 0;
    text-align:center;
    color:var(--ivory);
    text-shadow:0 2px 8px rgba(0,0,0,0.5);
  }
  .photo-caption-text .script-line{
    font-family:'Alex Brush','Brush Script MT',cursive;
    font-size:clamp(1.8rem,6vw,2.6rem);
    display:block;
    margin-bottom:4px;
  }
  .photo-caption-text .date-line{
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
    font-size:1rem;
    letter-spacing:0.1em;
    color:var(--gold-pale);
  }

  /* ---------- Gifts ---------- */
  .gift-intro{
    text-align:center;
    color:var(--ink-soft);
    max-width:480px;
    margin:0 auto 48px;
    font-size:1.1rem;
  }
  .gift-card{
    background:var(--card-bg);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:32px 28px;
  }
  .gift-card h3{
    margin:0 0 4px;
    font-size:1.3rem;
    text-align:center;
  }
  .gift-card .currency{
    text-align:center;
    color:var(--gold-deep);
    margin-bottom:22px;
  }
  .gift-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-top:1px solid var(--line);
  }
  .gift-row:last-of-type{ border-bottom:1px solid var(--line); }
  .gift-row .k{
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    font-family:'Poppins',Helvetica,Arial,sans-serif;
  }
  .gift-row .v{
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    font-size:0.95rem;
    text-align:right;
  }
  .copy-btn{
    background:none;
    border:1px solid var(--line);
    border-radius:999px;
    padding:5px 12px;
    font-size:0.68rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    cursor:pointer;
    white-space:nowrap;
    font-family:'Poppins',Helvetica,Arial,sans-serif;
  }
  .copy-btn:hover{ border-color:var(--gold-deep); color:var(--ink); }
  .copy-btn[data-copied="true"]{ color:var(--gold-deep); border-color:var(--gold-deep); }
  .gift-amount{
    text-align:center;
    margin-top:28px;
    color:var(--ink-soft);
    font-style:italic;
    font-size:1.05rem;
  }
  .confidential{
    text-align:center;
    margin-top:16px;
    font-size:0.72rem;
    letter-spacing:0.08em;
    color:var(--ink-soft);
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    text-transform:uppercase;
  }

  /* ---------- RSVP ---------- */
  .rsvp-form{
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .field label{
    display:block;
    margin-bottom:8px;
  }
  .field input[type="text"],
  .field textarea{
    width:100%;
    background:var(--card-bg);
    border:0;
    border-bottom:1px solid var(--line);
    padding:10px 4px;
    color:var(--ink);
    font-family:inherit;
    font-size:1.05rem;
  }
  .field textarea{ resize:vertical; min-height:70px; }
  .radio-group{
    display:flex;
    gap:24px;
  }
  .radio-group label{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:1.05rem;
  }
  .rsvp-note{
    text-align:center;
    color:var(--ink-soft);
    font-size:0.92rem;
    margin-bottom:8px;
  }
  .rsvp-submit{ text-align:center; margin-top:8px; }
  .rsvp-status{
    text-align:center;
    margin-top:16px;
    font-size:0.92rem;
    color:var(--gold-deep);
    min-height:1.2em;
  }

  footer{
    text-align:center;
    padding:80px 28px 60px;
  }
  .bouquet-icon{
    width:52px;
    height:auto;
    color:var(--gold-deep);
    margin:0 auto 18px;
    display:block;
    opacity:0.85;
  }
  footer .amp{
    font-family:'Alex Brush','Brush Script MT',cursive;
    color:var(--gold-deep);
    font-size:1.4rem;
    display:block;
    margin-bottom:10px;
  }
  footer .names{
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
    font-size:1.3rem;
    margin-bottom:6px;
  }
  footer .date{
    color:var(--ink-soft);
    font-size:0.9rem;
    letter-spacing:0.08em;
  }

  /* ---------- Sobre de apertura ---------- */
  html.locked, html.locked body{ overflow:hidden; height:100%; }

  #envelope{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--ivory);
  }
  #envelope .paper{
    position:relative;
    width:min(340px,78vw);
    height:min(460px,62vh);
    transition:transform 1s cubic-bezier(.65,0,.35,1), opacity 0.8s ease 0.5s;
  }
  #envelope .body{
    position:absolute;
    inset:0;
    background:var(--gold-pale);
    border:1px solid var(--line);
    border-radius:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    padding:0 0 46px;
    overflow:hidden;
  }
  #envelope .body::before{
    content:"";
    position:absolute;
    left:50%; top:-2px;
    transform:translateX(-50%);
    width:0; height:0;
    border-left:170px solid transparent;
    border-right:170px solid transparent;
    border-top:150px solid var(--champagne-deep);
  }
  #envelope .names{
    font-family:'Alex Brush','Brush Script MT',cursive;
    color:var(--ink);
    font-size:2.1rem;
    line-height:1.15;
    text-align:center;
    margin-top:auto;
    padding-top:10px;
  }
  #envelope .sub{
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    color:var(--gold-deep);
    font-size:0.72rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    margin-top:10px;
  }
  #envelope .flap{
    position:absolute;
    left:50%; top:0;
    transform-origin:top center;
    transform:translateX(-50%) rotateX(0deg);
    width:0; height:0;
    border-left:170px solid transparent;
    border-right:170px solid transparent;
    border-top:150px solid var(--champagne-deep);
    filter:drop-shadow(0 6px 10px rgba(43,36,29,0.18));
    transition:transform 0.9s cubic-bezier(.6,-0.28,.4,1.28), opacity 0.4s ease 0.7s;
    z-index:2;
  }
  #envelope .seal{
    position:absolute;
    left:50%; top:104px;
    transform:translate(-50%,-50%);
    width:58px; height:58px;
    border-radius:47% 53% 51% 49%/53% 47% 53% 47%;
    background:
      radial-gradient(circle at 30% 24%, rgba(255,255,255,0.55), transparent 40%),
      radial-gradient(circle at 70% 78%, rgba(43,36,29,0.22), transparent 55%),
      radial-gradient(circle at 50% 50%, var(--gold) 0%, var(--gold-deep) 82%);
    box-shadow:
      0 4px 10px rgba(43,36,29,0.35),
      inset 0 1px 2px rgba(255,255,255,0.45),
      inset 0 -3px 5px rgba(43,36,29,0.3);
    border:1px solid rgba(255,255,255,0.25);
    display:flex; align-items:center; justify-content:center;
    z-index:3;
    transition:opacity 0.35s ease, transform 0.5s ease;
  }
  #envelope .seal .mono{
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
    font-size:1.05rem;
    letter-spacing:0.01em;
    color:var(--ivory);
    text-shadow:0 1px 1px rgba(43,36,29,0.3);
  }
  #envelope .seal .mono .mini-amp{
    font-family:'Alex Brush','Brush Script MT',cursive;
    font-size:0.8em;
    margin:0 1px;
    display:inline-block;
  }
  #envelope .tap{
    position:absolute;
    bottom:-46px;
    left:0; right:0;
    text-align:center;
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    font-size:0.7rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--ink-soft);
    opacity:0.85;
  }

  #envelope.open .flap{ transform:translateX(-50%) rotateX(180deg); opacity:0; }
  #envelope.open .seal{ opacity:0; transform:translate(-50%,-50%) scale(0.6); }
  #envelope.open .paper{ transform:translateY(-18px) scale(0.94); opacity:0; }
  #envelope.hidden{ display:none; }

  @media (prefers-reduced-motion: reduce){
    #envelope .paper, #envelope .flap, #envelope .seal{ transition:none; }
  }

  /* ---------- Ornamento botánico ---------- */
  .sprig{
    width:64px;
    height:auto;
    color:var(--gold-deep);
    margin:0 auto 24px;
    display:block;
    opacity:0.85;
  }

  /* ---------- Mini calendario ---------- */
  .mini-cal{
    width:100%;
    max-width:260px;
    margin:28px auto 0;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    background:var(--card-bg);
  }
  .mini-cal-head{
    background:var(--gold-deep);
    color:var(--ivory);
    text-align:center;
    padding:10px 0;
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    font-size:0.72rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
  }
  .mini-cal-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:2px;
    padding:14px;
  }
  .mini-cal-grid span{
    text-align:center;
    font-size:0.78rem;
    color:var(--ink-soft);
    padding:5px 0;
    font-family:'Poppins',Helvetica,Arial,sans-serif;
  }
  .mini-cal-grid span.dow{
    text-transform:uppercase;
    font-size:0.6rem;
    letter-spacing:0.05em;
    color:var(--gold-deep);
    font-weight:600;
  }
  .mini-cal-grid span.day-active{
    background:var(--gold-deep);
    color:var(--ivory);
    border-radius:50%;
    font-weight:600;
  }
  .mini-cal-grid span.empty{ visibility:hidden; }

  /* #octubre: two-week layout (Mon-first), scoped so it doesn't affect other .mini-cal instances */
  #octubre .mini-cal-dow-row{ padding-bottom:0; }
  #octubre .mini-cal-week{ padding-top:8px; padding-bottom:8px; }
  #octubre .mini-cal-week + .mini-cal-week{
    position:relative;
    margin-top:6px;
    padding-top:16px;
  }
  #octubre .mini-cal-week + .mini-cal-week::before{
    content:"";
    position:absolute;
    top:0; left:14px; right:14px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);
  }

  /* ---------- Música ---------- */
  .song{
    padding:0 28px;
    margin:8px auto 0;
    max-width:640px;
  }
  .song-card{
    display:flex;
    align-items:center;
    gap:16px;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    background:var(--card-bg);
    padding:18px 22px;
    text-decoration:none;
    color:var(--ink);
  }
  .song-card svg{
    width:26px; height:26px;
    color:var(--gold-deep);
    flex-shrink:0;
  }
  .song-card span:not(.song-play){
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
  }
  .song-card strong{ font-size:1.05rem; font-weight:400; font-family:'Playfair Display',Georgia,'Times New Roman',serif; }
  .song-card em{ font-style:italic; color:var(--ink-soft); font-size:0.9rem; }
  .song-play{
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    font-size:0.7rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gold-deep);
    white-space:nowrap;
    border:0;
    background:none;
    padding:0;
    cursor:pointer;
  }

  /* ==========================================================
     Días de la boda (dias.html) — extensiones
     Solo combinan variables y patrones existentes (.btn, .frame,
     .ph, .timeline, .card, .gift-row, .copy-btn). Ningún nombre
     choca con clases de index.html.
     ========================================================== */

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

  /* ---------- Encabezado ---------- */
  .dias-head{ text-align:center; padding-top:28px; }
  .dias-photo{ margin-bottom:36px; }
  .dias-photo:empty{ display:none; }
  .dias-head h1{
    font-size:clamp(2.2rem,8vw,3.2rem);
    line-height:1.15;
    margin:6px 0 10px;
  }
  .dias-head .subtitle{
    font-size:1.3rem;
    font-style:italic;
    color:var(--ink-soft);
    margin:0 auto;
    max-width:420px;
  }
  .chip-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:28px;
  }
  /* .btn compacto — mismo trazo y tipografía, toque ≥44px */
  .btn.chip{
    min-height:44px;
    padding:12px 20px;
    letter-spacing:0.12em;
    display:inline-flex;
    align-items:center;
  }
  [id]{ scroll-margin-top:16px; }

  /* ---------- Card con imagen arriba (tratamiento de .frame) ---------- */
  .card.has-media{
    padding:0;
    overflow:hidden;
  }
  .card-media{
    aspect-ratio:5/3;
    border-bottom:1px solid var(--line);
    background:var(--ivory-deep);
  }
  .card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .card-media .ph{
    aspect-ratio:auto;
    height:100%;
    border:0;
    border-radius:0;
    flex-direction:column;
  }
  .card-body{ padding:28px 22px 32px; }
  .card .when{
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    font-size:0.85rem;
    letter-spacing:0.06em;
    color:var(--ink-soft);
    margin-bottom:14px;
  }
  .card .place{ margin:0 0 14px; }
  .card .place strong{
    display:block;
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
    font-weight:400;
    font-size:1.2rem;
    color:var(--ink);
  }
  .card .card-body p + p{ margin-top:10px; }
  .card p strong{ color:var(--ink); font-weight:600; }
  .card .venue-actions{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:24px;
  }
  .card .venue-actions .btn{ min-height:44px; }

  /* Destacado */
  .note{
    background:var(--gold-pale);
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px 16px;
    margin:16px 0 0;
    color:var(--ink);
  }
  .card p.note{ color:var(--ink); }
  .punctual{
    display:inline-block;
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    font-weight:600;
    font-size:0.5em;
    letter-spacing:0.2em;
    text-transform:uppercase;
    vertical-align:middle;
    color:var(--ivory);
    background:var(--gold-deep);
    border-radius:999px;
    padding:0.45em 1em;
    margin-left:0.4em;
  }

  /* ---------- Timeline de cards (variante de .timeline) ---------- */
  .timeline.steps{ list-style:none; margin:0; padding:0; }
  .timeline.steps .tl-item{
    grid-template-columns:20px 1fr;
    padding:0 0 24px;
  }
  .timeline.steps .tl-item:last-child{ padding-bottom:0; }
  .timeline.steps .tl-dot{ margin-top:30px; width:11px; height:11px; }
  .timeline.steps .tl-body{ padding-left:12px; min-width:0; }
  @media (min-width:768px){
    .timeline.steps .tl-item{ grid-template-columns:28px 1fr; }
    .timeline.steps .tl-body{ padding-left:20px; }
    .card-body{ padding:32px 32px 36px; }
  }

  /* ---------- Card destacada ---------- */
  .card.featured .card-media{ aspect-ratio:800/477; }
  .card.featured .card-body{ padding:36px 24px 40px; }
  .card.featured h3{ font-size:clamp(2rem,7vw,2.6rem); margin-bottom:4px; }
  .card.featured .until{ font-size:1.15rem; margin-bottom:18px; }
  .card.featured .place strong{ font-size:1.45rem; }

  /* ---------- Dress code ---------- */
  .dress-card{ margin-top:24px; }
  .dress-card h3{ margin-bottom:4px; }
  .tips{
    list-style:none;
    margin:22px 0 0;
    padding:0;
    text-align:left;
    border-top:1px solid var(--line);
  }
  .tips li{
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    color:var(--ink-soft);
    line-height:1.45;
  }
  .tips svg{
    width:44px;
    height:auto;
    flex-shrink:0;
    color:var(--gold-deep);
  }
  .tips-title{ margin:26px 0 0; }
  .tips-title + .tips{ margin-top:12px; }

  /* ---------- Tabs de regalos (estilo .copy-btn) ---------- */
  .tabs{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-bottom:24px;
  }
  .tab{
    min-height:44px;
    padding:10px 16px;
    background:var(--ivory);
    border:1px solid var(--line);
    border-radius:999px;
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    cursor:pointer;
    transition:background 0.35s ease, color 0.35s ease;
  }
  .tab:hover{ border-color:var(--gold-deep); color:var(--ink); }
  .tab[aria-selected="true"]{
    background:var(--gold-deep);
    border-color:var(--gold-deep);
    color:var(--ivory);
  }
  /* Mensaje de la luna de miel arriba de la foto; .gift-intro queda debajo */
  .gift-dream:has(+ .gift-photo){ margin-bottom:28px; }
  .gift-photo{ margin:0 auto 20px; }
  .gift-photo .frame{ box-shadow:var(--shadow); border-radius:16px; }
  .gift-photo img{ width:100%; height:auto; display:block; }
  /* Crédito de licencia: bien chico, sin competir con el contenido */
  .photo-credit{
    margin-top:6px;
    text-align:right;
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    font-size:0.6rem;
    letter-spacing:0.04em;
    color:var(--ink-soft);
    opacity:0.8;
  }
  .photo-credit a{ text-decoration:none; }
  .gift-dream{
    text-align:center;
    max-width:480px;
    margin:0 auto 40px;
    font-size:1.1rem;
  }
  .gift-card .gift-row.copyable{ flex-wrap:wrap; row-gap:4px; }
  .gift-row.copyable .k{ flex-basis:100%; }
  .gift-row.copyable .v{
    flex:1;
    min-width:0;
    text-align:left;
    overflow-wrap:anywhere;
    color:var(--ink);
  }
  .gift-card .copy-btn{
    min-height:44px;
    min-width:88px;
    padding:8px 14px;
  }
  .gift-card .copy-all{
    text-align:center;
    padding-top:24px;
    border-top:1px solid var(--line);
  }
  .gift-card .copy-all .btn{ min-height:44px; padding:14px 22px; letter-spacing:0.1em; }
  .btn[data-copied="true"]{ background:var(--gold-deep); color:var(--ivory-deep); }

  footer .quote{ margin-bottom:18px; }