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


  :root{
    --ivory:#FBF6EF;
    --cream:#F6ECE0;
    --rose:#DFB0B8;
    --rose-deep:#B5677A;
    --rose-soft:#F3DFE2;
    --sage:#97A87E;
    --sage-deep:#6F805A;
    --gold:#C7A465;
    --ink:#4B3B36;
    --ink-soft:#8A7A73;
    --white:#FFFFFF;

    --display:'Parisienne', cursive;
    --serif:'Cormorant Garamond', serif;
    --sans:'Jost', sans-serif;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  body{
    font-family:var(--sans);
    color:var(--ink);
    background:var(--ivory);
    line-height:1.6;
    overflow-x:hidden;
  }

  h1,h2,h3{font-family:var(--serif); font-weight:400; color:var(--rose-deep);}

  .script{font-family:var(--display); color:var(--rose-deep); line-height:1;}

  a{color:inherit;}

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

  /* ---------- Utilidades ---------- */
  .seccion{
    position:relative;
    padding:100px 24px;
    overflow:hidden;
  }
  .seccion-alt{background:var(--cream);}
  .contenedor{
    max-width:920px;
    margin:0 auto;
    position:relative;
    z-index:2;
    text-align:center;
  }
  .eyebrow{
    font-family:var(--sans);
    letter-spacing:0.35em;
    text-transform:uppercase;
    font-size:0.72rem;
    color:var(--sage-deep);
    margin-bottom:14px;
  }
  .titulo-seccion{
    font-size:clamp(2rem, 4vw, 2.8rem);
    margin-bottom:26px;
  }
  .divisor{
    width:120px;
    height:auto;
    margin:22px auto 34px;
    opacity:0.85;
  }
  .texto-cuerpo{
    font-family:var(--serif);
    font-size:1.18rem;
    color:var(--ink);
    max-width:640px;
    margin:0 auto;
  }

  /* ---------- Animaciones de scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.9s ease, transform 0.9s ease;
  }
  .reveal.visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- Flores decorativas (SVG reutilizable) ---------- */
  .flor-deco{
    position:absolute;
    pointer-events:none;
    z-index:1;
    opacity:0.9;
  }
  .flor-deco svg{width:100%; height:100%; display:block;}

  /* ============ HERO ============ */
  .hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    /*background:
      radial-gradient(ellipse at 50% 0%, rgba(223,176,184,0.28), transparent 60%),
      radial-gradient(ellipse at 15% 100%, rgba(151,168,126,0.22), transparent 55%),
      radial-gradient(ellipse at 90% 90%, rgba(199,164,101,0.18), transparent 50%),
      var(--ivory);*/
    padding:60px 24px;
	  background-image: linear-gradient(180deg, rgba(1,1,1,.7), rgba(0,0,0,0)), url("../img/olcayertem-couple-8161451_1920.jpg");
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-position: center;
  }
  .hero-contenido{position:relative; z-index:3;}
  .hero-wreath{
    width:min(78vw, 420px);
    margin:0 auto;
    position:relative;
    animation:flotar 7s ease-in-out infinite;
  }
  @keyframes flotar{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }
  .hero-wreath svg .trazo{
    stroke-dasharray:900;
    stroke-dashoffset:900;
    animation:dibujar 2.6s ease forwards 0.3s;
  }
  @keyframes dibujar{ to{stroke-dashoffset:0;} }

  .hero-eyebrow{
    font-size:0.75rem;
    letter-spacing:0.4em;
    text-transform:uppercase;
    color:var(--white);
    position:absolute;
    top:8%;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
  }
  .hero-nombres{
    position:absolute;
    top:38%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    font-size:clamp(2.6rem, 9vw, 4.6rem);
    line-height:1;
  }
  .hero-amp{
    font-family:var(--serif);
    font-style:italic;
    font-size:0.5em;
    color:var(--white);
    display:block;
    margin:6px 0;
  }
  .hero-fecha{
    position:absolute;
    bottom:10%;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    font-family:var(--sans);
    letter-spacing:0.25em;
    text-transform:uppercase;
    font-size:0.85rem;
    color:var(--white);
  }
  .hero-scroll{
    margin-top:36px;
    font-size:0.7rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--white);
    animation:pulso 2.4s ease-in-out infinite;
  }
  @keyframes pulso{ 0%,100%{opacity:0.4;} 50%{opacity:1;} }

  /* ============ BIENVENIDA ============ */
  .bienvenida .texto-cuerpo{font-style:italic;}
  .firma-novios{
    margin-top:28px;
    font-family:var(--display);
    font-size:1.8rem;
    color:var(--rose-deep);
  }

  /* ============ CUENTA REGRESIVA ============ */
  .contador-grid{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:22px;
    margin-top:20px;
  }
  .contador-item{
    background:var(--white);
    border:1px solid var(--rose-soft);
    border-radius:14px;
    padding:26px 22px;
    min-width:110px;
    box-shadow:0 10px 30px -18px rgba(75,59,54,0.35);
    transition:transform 0.4s ease, box-shadow 0.4s ease;
  }
  .contador-item:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 34px -18px rgba(181,103,122,0.45);
  }
  .contador-num{
    font-family:var(--serif);
    font-size:2.6rem;
    color:var(--rose-deep);
    display:block;
  }
  .contador-label{
    font-size:0.72rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  /* ============ EVENTO ============ */
  .evento-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:32px;
    margin-top:20px;
    text-align:left;
  }
  .evento-tarjeta{
    background:var(--white);
    border-radius:20px;
    padding:38px 32px;
    position:relative;
    box-shadow:0 20px 40px -28px rgba(75,59,54,0.4);
    border:1px solid var(--rose-soft);
  }
  .evento-icono{
    width:46px; height:46px;
    margin-bottom:16px;
    color:var(--sage-deep);
  }
  .evento-tarjeta h3{font-size:1.6rem; margin-bottom:6px;}
  .evento-tarjeta .subt{
    font-size:0.72rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--rose-deep);
    margin-bottom:18px;
    display:block;
  }
  .evento-dato{
    display:flex;
    gap:12px;
    margin-bottom:12px;
    font-family:var(--sans);
    font-size:0.95rem;
    color:var(--ink);
    align-items:flex-start;
  }
  .evento-dato svg{width:18px; height:18px; flex-shrink:0; margin-top:3px; color:var(--sage-deep);}
  .btn-mapa{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:14px;
    font-size:0.78rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--rose-deep);
    text-decoration:none;
    border-bottom:1px solid var(--rose-deep);
    padding-bottom:2px;
    transition:opacity 0.3s ease;
  }
  .btn-mapa:hover{opacity:0.6;}

  /* ============ GALERÍA ============ */
  .galeria-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:18px;
    margin-top:10px;
  }
  .galeria-item{
    aspect-ratio:3/4;
    border-radius:16px;
    overflow:hidden;
    position:relative;
    background:linear-gradient(160deg, var(--rose-soft), var(--cream));
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 16px 30px -22px rgba(75,59,54,0.4);
    transition:transform 0.5s ease;
  }
  .galeria-item:hover{transform:scale(1.03) rotate(-0.5deg);}
  .galeria-item img{width:100%; height:100%; object-fit:cover;}
  .galeria-placeholder{
    text-align:center;
    color:var(--rose-deep);
    padding:20px;
  }
  .galeria-placeholder svg{width:38px; height:38px; margin:0 auto 10px; opacity:0.7;}
  .galeria-placeholder span{
    display:block;
    font-size:0.72rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .galeria-item:nth-child(3n+2){margin-top:26px;}

@media (max-width:640px){
    .galeria-grid{
      grid-template-columns:repeat(2, 1fr);
      gap:10px;
    }
    .galeria-item{
      border-radius:10px;
    }
    .galeria-item:nth-child(3n+2){margin-top:0;}
    .galeria-item:nth-child(2n){margin-top:18px;}
    .galeria-placeholder svg{width:26px; height:26px; margin-bottom:6px;}
    .galeria-placeholder span{font-size:0.62rem;}
  }

  /* ============ INFO ADICIONAL ============ */
  .info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:30px;
    margin-top:10px;
    text-align:center;
  }
  .info-tarjeta{padding:14px;}
  .info-tarjeta svg{width:40px; height:40px; color:var(--rose-deep); margin:0 auto 16px;}
  .info-tarjeta h3{font-size:1.5rem; margin-bottom:10px;}
  .info-tarjeta p{font-family:var(--sans); font-size:0.95rem; color:var(--ink-soft);}

  /* ============ RSVP ============ */
  .rsvp-form{
    margin-top:36px;
    text-align:left;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    background:var(--white);
    padding:44px clamp(20px,5vw,52px);
    border-radius:22px;
    box-shadow:0 24px 50px -30px rgba(75,59,54,0.45);
    border:1px solid var(--rose-soft);
  }
  .campo{display:flex; flex-direction:column; gap:6px;}
  .campo.full{grid-column:1 / -1;}
  .campo label{
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--sage-deep);
  }
  .campo input,
  .campo select,
  .campo textarea{
    font-family:var(--sans);
    font-size:1rem;
    padding:12px 14px;
    border:1px solid #E4D6CE;
    border-radius:10px;
    background:var(--ivory);
    color:var(--ink);
    outline:none;
    transition:border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .campo input:focus,
  .campo select:focus,
  .campo textarea:focus{
    border-color:var(--rose-deep);
    box-shadow:0 0 0 3px rgba(181,103,122,0.15);
  }
  .campo textarea{resize:vertical; min-height:90px;}
  .btn-enviar{
    grid-column:1 / -1;
    justify-self:center;
    margin-top:10px;
    background:var(--rose-deep);
    color:var(--white);
    border:none;
    padding:15px 46px;
    border-radius:40px;
    font-family:var(--sans);
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-size:0.78rem;
    cursor:pointer;
    transition:background 0.35s ease, transform 0.35s ease;
  }
  .btn-enviar:hover{background:var(--sage-deep); transform:translateY(-2px);}
  .btn-enviar:disabled{opacity:0.6; cursor:wait;}
  .rsvp-msg{
    grid-column:1 / -1;
    text-align:center;
    font-family:var(--serif);
    font-size:1.1rem;
    min-height:1.4em;
  }
  .rsvp-msg.ok{color:var(--sage-deep);}
  .rsvp-msg.err{color:#B5453F;}

  @media (max-width:640px){
    .rsvp-form{grid-template-columns:1fr;}
  }

  /* ============ FOOTER ============ */
  .footer{
    text-align:center;
    padding:70px 24px 50px;
    background:var(--ink);
    color:var(--rose-soft);
  }
  .footer .script{color:var(--rose-soft); font-size:2.2rem;}
  .footer p{font-size:0.78rem; letter-spacing:0.1em; color:#C9B8B0; margin-top:10px;}

  /* ============ BOTÓN VOLVER ARRIBA ============ */
  #volver-arriba{
    position:fixed;
    right:24px;
    bottom:24px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--rose-deep);
    color:var(--white);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 12px 24px -10px rgba(75,59,54,0.5);
    opacity:0;
    visibility:hidden;
    transform:translateY(14px);
    transition:opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;
    z-index:50;
  }
  #volver-arriba.mostrar{opacity:1; visibility:visible; transform:translateY(0);}
  #volver-arriba:hover{background:var(--sage-deep);}
  #volver-arriba svg{width:20px; height:20px;}

  /* ============ REPRODUCTOR DE MÚSICA ============ */
  #reproductor{
    position:fixed;
    left:24px;
    bottom:24px;
    z-index:50;
    display:flex;
    align-items:center;
  }
  #musica-toggle{
    width:52px;
    height:52px;
    border-radius:50%;
    border:none;
    background:var(--white);
    color:var(--rose-deep);
    box-shadow:0 12px 24px -10px rgba(75,59,54,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform 0.3s ease, background 0.3s ease;
    position:relative;
  }
  #musica-toggle:hover{transform:scale(1.06);}
  #musica-toggle svg{width:20px; height:20px;}
  #musica-toggle.sonando{animation:girar 5s linear infinite;}
  @keyframes girar{ to{transform:rotate(360deg);} }

  ::selection{background:var(--rose); color:var(--white);}