/* Invitación Gilberto & Eliana — estilos */
  :root{
    --crema:#F8F4EA;
    --salvia:#8C9C7E;
    --blanco:#FFFFFF;
    --dorado:#C4A55C;
    --dorado-osc:#B0904A;
    --gris:#5E5C54;
    --gris-osc:#4A4842;
    --boton:#B4BFC7;
    --script:'Great Vibes',cursive;
    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'Montserrat',Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--crema) radial-gradient(ellipse 60% 40% at 8% 18%,rgba(214,196,160,.35),transparent 70%),radial-gradient(ellipse 50% 35% at 92% 42%,rgba(214,196,160,.30),transparent 70%),radial-gradient(ellipse 55% 40% at 10% 80%,rgba(200,208,180,.30),transparent 70%),radial-gradient(ellipse 45% 35% at 90% 92%,rgba(214,196,160,.30),transparent 70%);background-attachment:fixed;color:var(--gris);font-family:var(--serif);text-align:center;overflow-x:hidden}
  section{padding:56px 20px;max-width:1100px;margin:0 auto}
  .script{font-family:var(--script);color:var(--dorado);font-weight:400;line-height:1.1}
  .caps{font-family:var(--sans);letter-spacing:.42em;text-transform:uppercase;font-weight:400;color:var(--gris)}
  .caps-oro{font-family:var(--sans);letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--dorado)}
  .cursiva{font-style:italic;color:var(--gris-osc)}
  .flores{width:230px;height:auto;display:block;margin:0 auto}

  /* Portada */
  .hero{padding-top:0}
  .hero .flores-top{width:min(420px,92vw);margin:0 auto 10px}
  .monograma{width:210px;height:210px;margin:0 auto 50px}
  .nombres .script{font-size:clamp(64px,10vw,96px)}
  .nombres .amp{font-family:var(--script);color:var(--gris);font-size:34px;display:block;margin:2px 0}
  .lema{margin-top:48px;font-size:clamp(14px,1.9vw,20px)}
  .matrimonio{font-size:clamp(52px,8vw,74px);margin-top:14px}

  /* Fecha y lugares */
  .presente{font-size:clamp(14px,1.9vw,20px);line-height:1.8}
  .fecha{margin:44px auto 8px;display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
  .fecha .dia{font-family:var(--sans);font-weight:300;letter-spacing:.08em;font-size:clamp(22px,3vw,30px);text-transform:uppercase}
  .fecha .num{font-family:var(--sans);font-weight:300;color:var(--dorado);font-size:clamp(40px,5.5vw,54px)}
  .anio{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:32px}
  .anio span{font-family:var(--sans);font-weight:300;letter-spacing:.35em;font-size:20px}
  .anio::before,.anio::after{content:"";width:110px;height:1px;background:var(--salvia)}
  .lugares{display:grid;grid-template-columns:1fr 1fr;gap:40px 20px;margin-top:40px;align-items:start}
  .lugar .pin{width:110px;height:auto;margin:0 auto 22px}
  .lugar .tipo{font-size:20px;font-style:italic;margin-bottom:12px}
  .lugar .sitio{font-size:clamp(15px,2vw,22px);line-height:1.65;max-width:440px;margin:0 auto}
  .lugar .direccion{font-size:19px;font-style:italic;margin-top:10px;letter-spacing:.02em}
  .lugar .hora{font-size:20px;font-style:italic;margin:16px 0 0}
  .btn{display:inline-block;background:var(--boton);color:#fff;font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;padding:20px 40px;border-radius:40px;text-decoration:none;font-weight:500}
  .btn:hover{background:#a3aeb7}
  .btn:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}

  /* Vestuario */
  .vestuario h2{font-weight:400;font-size:clamp(28px,3.5vw,38px);letter-spacing:.06em;text-transform:uppercase;margin:44px 0 60px;color:var(--gris-osc)}
  .dress{display:flex;align-items:center;justify-content:center;gap:90px;flex-wrap:wrap;margin-bottom:20px}
  .dress .circulo{width:180px;height:180px;border-radius:50%;background:var(--crema);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--dorado),0 0 0 10px var(--crema),0 0 0 11px var(--dorado)}
  .dress .circulo img{width:auto;height:86%;object-fit:contain}
  .dress .circulo{overflow:hidden;width:230px;height:230px}
  .dress .texto{text-align:left}
  .dress .texto .cursiva{font-size:21px;display:block}
  .dress .texto .caps-oro{font-size:clamp(17px,2.2vw,24px);display:block;margin:6px 0 22px}
  

  /* Foto + versículo */
  .tarjeta{display:grid;grid-template-columns:1fr 1fr;background:transparent;max-width:1100px;margin:0 auto;text-align:left;align-items:center;gap:40px}
  .foto{position:relative;width:min(360px,80vw);aspect-ratio:1/1;margin:0 auto;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--dorado),0 0 0 10px var(--crema),0 0 0 11px var(--dorado)}
  .foto span{display:none;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85)}
  .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}
  .versiculo{background:#fff;border:1px solid rgba(196,165,92,.55);outline:1px solid rgba(196,165,92,.35);outline-offset:5px;padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
  .versiculo::before{content:"";width:80px;height:1px;background:var(--salvia);margin-bottom:34px}
  .versiculo p{font-style:italic;font-size:17px;line-height:1.7;letter-spacing:.02em;text-transform:uppercase;color:var(--gris)}

  /* Reservado */
  .reservado .nota{font-style:italic;font-size:19px;line-height:1.6;max-width:520px;margin:34px auto 0;color:var(--gris)}
  .reservado .script{font-size:clamp(60px,8vw,84px)}
  .reservado .cursiva{font-size:22px;letter-spacing:.06em;text-transform:uppercase;display:block}
  .reservado .uno{font-family:var(--script);color:var(--dorado);font-size:clamp(70px,9vw,90px);line-height:1;margin:14px 0}

  /* Adultos + sobres */
  .adultos{background:#fff;border:1px solid rgba(196,165,92,.55);outline:1px solid rgba(196,165,92,.35);outline-offset:5px;max-width:1100px;margin:0 auto;padding:44px 30px 60px;text-align:left}
  .adultos .icono{width:96px;height:96px;display:block;margin:0 auto 34px}
  .adultos::after{content:none}
  .adultos hr{border:0;width:80px;height:1px;background:var(--salvia);margin:0 0 22px}
  .adultos p{font-style:italic;font-size:17px;line-height:1.7;text-transform:uppercase;letter-spacing:.02em}
  .sobres .regalo{width:110px;height:auto;display:block;margin:40px auto 14px}
  .sobres .script{font-size:clamp(60px,8vw,84px)}
  .sobres p{font-size:20px;font-style:italic;max-width:560px;margin:18px auto 0;line-height:1.7}

  footer{padding:70px 20px 60px}
  footer .script{font-size:clamp(44px,6vw,60px)}
  footer .fin{font-family:var(--sans);font-size:11px;letter-spacing:.35em;text-transform:uppercase;margin-top:14px;color:var(--gris)}


  /* Fotos */
  .hero{position:relative;padding:0 0 60px}
  .hero-fondo{position:absolute;inset:0;height:66vh;min-height:440px;max-height:680px;background:url("../img/portada.jpg") center 35%/cover no-repeat;z-index:0}
  .hero-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(248,244,234,.35) 0%,rgba(248,244,234,.55) 55%,var(--crema) 100%)}
  .hero-contenido{position:relative;z-index:1;padding-top:calc(62vh - 200px);max-width:1100px;margin:0 auto}
  .monograma{border-radius:50%;box-shadow:0 10px 40px rgba(90,70,40,.14)}
  .divisor{width:120px;height:1px;background:var(--salvia);margin:0 auto 40px;position:relative}
  .divisor::before,.divisor::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--salvia)}
  .divisor::before{left:-4px}.divisor::after{right:-4px}
  @media (max-width:720px){
    .hero-fondo{height:52vh;min-height:360px}
    .hero-contenido{padding-top:calc(52vh - 170px)}
  }

  /* Animaciones al hacer scroll */
  .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
  .reveal.visto{opacity:1;transform:none}
  .reveal-zoom{opacity:0;transform:scale(.82);transition:opacity 1s ease,transform 1s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
  .reveal-zoom.visto{opacity:1;transform:none}
  .divisor{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
  .divisor.visto{transform:scaleX(1)}
  .hero-contenido>*{opacity:0;animation:subir 1.1s cubic-bezier(.22,.61,.36,1) forwards}
  .hero-contenido>:nth-child(1){animation-delay:.2s}
  .hero-contenido>:nth-child(2){animation-delay:.5s}
  .hero-contenido>:nth-child(3){animation-delay:.8s}
  .hero-contenido>:nth-child(4){animation-delay:1s}
  @keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @media (max-width:720px){
    section{padding:44px 18px}
    .lugares{grid-template-columns:1fr;gap:56px}
    .tarjeta{grid-template-columns:1fr}
    .foto{width:min(280px,78vw)}
    .versiculo{padding:34px 26px}
    .dress{gap:36px}
    .anio::before,.anio::after{width:60px}
    .caps{letter-spacing:.28em}
  }