/* CSS del sitio, copiado desde tu documento actual */

:root {
      --lavender: #f6e7ff;
      --pink:     #ffe9e9;
      --mint:     #e4faf1;
      --sky:      #e8f4ff;
      --deep:     #c6b6ff;
      --text:     #43326d;
      --white-bg: #ffffffbe;
      --blue: #dae4ee;
    }

    * { box-sizing: border-box; scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: "Poppins", sans-serif;
      color: var(--text);
      overflow-x: hidden;
    }

    h1,h2,h3 { font-family: "Cinzel", serif; }

    /* ─────────── NAVBAR ─────────── */
    .navbar {
      position: fixed;
      top: 0; left: 0; width: 100%;
      display: flex; justify-content: center; gap: 2rem;
      padding: 0.8rem 1rem;
      background: var(--white-bg);
      backdrop-filter: blur(10px);
      z-index: 100;
      border-bottom: 1px solid var(--deep);
    }
    .navbar a {
      text-decoration: none; color: var(--text);
      font-weight: 500;
      transition: opacity .5s;
    }
    .navbar a:hover { opacity: .5; }

    /* ─────────── SECTIONS BASE ─────────── */
    section {
      position: relative;
      padding: 6rem 15rem;
      margin: 0 auto;
      opacity: 0; transform: translateY(40px);
      transition: opacity .8s ease-out, transform .8s ease-out;
    }
    section.in-view { opacity: 1; transform: none; }

    #lottie-container {
      border: 1px solid red;
    }

    /* ─────────── HERO ─────────── */
    .hero {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 2rem;
      min-height: 100vh;
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
    }

    .hero-content {
      flex: 1;
      padding-left: 38rem;
      color: var(--text);
    }

    .hero-content h1 {
      font-size: clamp(3rem, 6vw, 4rem);
      margin-bottom: 0.5rem;
    }

    .hero-content p {
      font-size: 1.25rem;
      margin-bottom: 2rem;
    }

    .countdown {
      display: flex;
      gap: 1.2rem;
    }
    .hero-bg {
      position: fixed; inset: 0; z-index: -2;
      background: var(--blue);
      background-size: 400% 400%;
    }

    .hero::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 30%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      background-image: url('img/siland.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      filter: opacity(10);
      z-index: -1;
      pointer-events: none;
    }

    .hero h1 { font-size: clamp(2.5rem,7vw,4rem); letter-spacing: 2px; }
    .hero p  { font-size: 1.25rem; margin-top: .75rem; }

    /* Countdown */
    .countdown { display: flex; gap: 1.2rem; margin-top: 2rem; }
    .count-item { text-align: center; background: var(--white-bg); padding: .8rem 1.2rem; border:2px solid var(--deep); border-radius: 1rem; backdrop-filter: blur(6px); min-width: 70px; }
    .count-item span { display:block; }
    .count-num { font-size: 1.4rem; font-weight: 600; }
    .count-label { font-size: .75rem; letter-spacing: .5px; }

    /* CTA Button */
    .btn-primary {
      display:inline-block; margin-top:2rem; font-size:1.05rem; color:var(--text);
      background: var(--white-bg); padding:.8rem 1.6rem; border-radius:1.2rem; border:2px solid var(--deep);
      text-decoration:none; font-weight:500; transition: background .3s;
    }
    .btn-primary:hover { background:#fff; }
    .btn-primary:hover span{ opacity: .5; transition: opacity .5s; }

    .bg-sky{background:var(--sky);} 
    .bg-lav{
      background:var(--white-bg);
      padding: 1rem 15rem;
    } 
    .bg-mint{background:var(--sky);} 
    .bg-pink{background:var(--sky);}   

    /* ─────────── HISTORIA ─────────── */
    .texto-dos-columnas {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      max-width: 1000px;
      margin: 0 auto;
      padding: 2rem 1rem;
      font-size: 1.1rem;
      line-height: 1.6;
    }

    .texto-dos-columnas > div {
      flex: 1 1 45%;
      min-width: 280px;
      text-align: justify;
    }

    @media (max-width: 768px) {
      .texto-dos-columnas {
        flex-direction: column;
        padding: 1.5rem 1rem;
      }

      .texto-dos-columnas > div {
        flex: 1 1 100%;
      }
    }
 
    /* ─────────── GALERÍA ─────────── */
    .swiper { display:grid; max-width: 1100px;margin-left:auto;margin-right:auto;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; margin-top:2rem; }
    .swiper img { width:100%; height:230px; object-fit:cover; border-radius:1rem; box-shadow:0 4px 10px rgba(0,0,0,.1); transition:transform .4s; }
    .swiper img:hover { transform:scale(1.05) rotate(.8deg); }

    /* Instagram */
    .insta-wrapper{ display:flex; max-width: 1100px;justify-content:center;margin-left:auto;margin-right:auto; margin-top:2rem; }
    .link{
      text-decoration: none;

    }

    /* Map */
    .map-responsive{position:relative; max-width: 700px;margin-left:auto;margin-right:auto;margin-top:5%;padding-bottom:40.25%;border-radius:1rem;box-shadow:0 4px 10px rgba(0,0,0,.1);}    
    .map-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}

    /* RSVP */
    .rsvp-form{display:grid;gap:1rem;margin-top:2rem;max-width:500px;margin-left:auto;margin-right:auto;text-align:left;}
    .rsvp-form input,.rsvp-form select,.rsvp-form textarea,.rsvp-form button{font-size:1rem;padding:.8rem 1rem;border:2px solid var(--deep);border-radius:.75rem;background:var(--white-bg);backdrop-filter:blur(6px);}    
    .rsvp-form button{cursor:pointer;background:var(--deep);color:#fff;border:none;transition:background .3s;}    
    .rsvp-form button:hover{background:#ad9cec;}

    .popup {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .popup.hidden {
      display: none;
    }

    .popup-content {
      background: white;
      padding: 2rem;
      border-radius: 1rem;
      text-align: center;
      max-width: 400px;
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
    }

    .popup-content button {
      margin-top: 1rem;
      background: var(--deep);
      color: white;
      border: none;
      padding: 0.6rem 1.2rem;
      border-radius: 0.5rem;
      cursor: pointer;
    }


    /* Footer */
    footer{ text-align:center; padding:3rem 1rem 2rem; font-size:.9rem; }