:root{
      --azul-oscuro:#242c57;
      --dorado:#d9b36c;
      --beige:#e5e0cc;
      --texto:#1e2a3b;
      --blanco:#e5e0cc;
    }

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

    body{
      font-family:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--texto);
      background:#f7f5f0;
      line-height:1.6;
    }

    a{
      text-decoration:none;
      color:inherit;
    }

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

    /* HEADER */

    header{
      position:fixed;
      top:0;left:0;right:0;
      z-index:50;
      background:rgba(2,27,61,.95);
      backdrop-filter:blur(10px);
      box-shadow:0 8px 24px rgba(0,0,0,.25);
    }

    .nav-container{
      max-width:1200px;
      margin:0 auto;
      padding:0.75rem 1.5rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1.5rem;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:1rem;
    }
    .brand img{
        max-width: 200px;
    }
    .brand-logo{
      width:54px;
      height:54px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.3);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .brand-logo span{
      font-family:'Playfair Display',serif;
      font-size:2rem;
      font-weight:700;
      color:var(--dorado);
    }

    .brand-text{
      display:flex;
      flex-direction:column;
      color:var(--blanco);
    }

    .brand-text span:first-child{
      font-family:'Playfair Display',serif;
      font-size:1.15rem;
      letter-spacing:.08em;
    }

    .brand-text span:last-child{
      font-size:.75rem;
      text-transform:uppercase;
      opacity:.85;
      letter-spacing:.2em;
    }

    nav ul{
      list-style:none;
      display:flex;
      align-items:center;
      gap:1.5rem;
      font-size:.92rem;
    }

    nav a{
      color:rgba(255,255,255,.8);
      text-transform:uppercase;
      letter-spacing:.14em;
      font-weight:500;
      position:relative;
      padding-bottom:.25rem;
    }

    nav a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:0;
      width:0;
      height:2px;
      background:var(--dorado);
      transition:.25s ease;
    }

    nav a:hover{color:#fff;}
    nav a:hover::after{width:100%;}

    .nav-cta{
      padding:.6rem 1.2rem;
      border-radius:999px;
      background:var(--dorado);
      color:var(--azul-oscuro);
      font-size:.85rem;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:.12em;
      border:none;
      cursor:pointer;
      transition:.25s ease;
      text-decoration: none;
    }
    .nav-cta:hover{
      transform:translateY(-1px);
      box-shadow:0 10px 25px rgba(0,0,0,.25);
      text-decoration: none !important;
    }

    .nav-toggle{
      display:none;
      font-size:1.3rem;
      color:#fff;
      cursor:pointer;
    }

    /* HERO */

    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:6rem 1.5rem 4rem;
      position:relative;
      overflow:hidden;
      background:#00000050;
      color:#fff;
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:url("../img/h-qrsc.png") center/cover no-repeat;
      opacity:.85;
      transform:scale(1.03);
      filter:brightness(.78);
      z-index:-2;
    }

    .hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg,rgba(2,27,61,.92) 0%,rgba(2,27,61,.4) 40%,rgba(0,0,0,.3) 100%);
      mix-blend-mode:multiply;
      z-index:-1;
    }

    .hero-inner{
      max-width:1200px;
      margin:0 auto;
      display:grid;
      grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
      gap:2.5rem;
      align-items:center;
    }

    .hero-tag{
      font-size:.8rem;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:var(--dorado);
      margin-bottom:.8rem;
      display:inline-flex;
      align-items:center;
      gap:.5rem;
    }

    .hero-tag::before{
      content:"";
      width:32px;
      height:1px;
      background:var(--dorado);
    }

    .hero-title{
      font-family:'Playfair Display',serif;
      font-size:2.8rem;
      line-height:1.1;
      margin-bottom:1rem;
    }

    .hero-subtitle{
      font-size:1.05rem;
      max-width:540px;
      color:rgba(255,255,255,.88);
      margin-bottom:1.6rem;
    }

    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:1.5rem;
      margin-bottom:2.2rem;
      font-size:.9rem;
      color:rgba(255,255,255,.85);
    }

    .hero-meta span{
      display:flex;
      align-items:center;
      gap:.5rem;
    }

    .hero-meta i{font-size:1rem;color:var(--dorado);}

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:1rem;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      padding:.8rem 1.6rem;
      border-radius:999px;
      border:1px solid transparent;
      font-size:.9rem;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:.14em;
      cursor:pointer;
      transition:.28s ease;
    }

    .btn-primary{
      background:var(--dorado);
      color:var(--azul-oscuro);
      box-shadow:0 14px 34px rgba(0,0,0,.35);
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 40px rgba(0,0,0,.45);
    }

    .btn-outline{
      background:var(--azul-oscuro);
      border-color:rgba(255,255,255,.65);
      color:var(--blanco);
    }
    .btn-outline:hover{
      background:rgba(255,255,255,.65);
      border-color:var(--azul-oscuro);
      color:var(--azul-oscuro);
      transform:translateY(-2px);
    }

    .hero-card{
      background:rgba(2,27,61,.96);
      border-radius:22px;
      padding:1.8rem 1.6rem;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 16px 40px rgba(0,0,0,.55);
      backdrop-filter:blur(18px);
    }

    .hero-card h3{
      font-family:'Playfair Display',serif;
      font-size:1.4rem;
      margin-bottom:.8rem;
      color:var(--dorado);
    }

    .hero-card p{
      font-size:.92rem;
      color:rgba(255,255,255,.85);
      margin-bottom:1.2rem;
    }

    .hero-highlight{
      display:flex;
      flex-direction:column;
      gap:.75rem;
      margin-bottom:1.4rem;
      font-size:.9rem;
    }

    .hero-highlight span{
      display:flex;
      align-items:flex-start;
      gap:.6rem;
    }

    .hero-highlight i{
      font-size:.95rem;
      margin-top:.10rem;
      color:var(--dorado);
    }

    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      font-size:.8rem;
      padding:.45rem .9rem;
      border-radius:999px;
      background:rgba(3,46,96,.9);
      border:1px solid rgba(255,255,255,.1);
      color:rgba(255,255,255,.9);
    }

    /* SECCIONES GENERALES */

    section{
      padding:4.5rem 1.5rem;
    }

    .section-inner{
      max-width:1200px;
      margin:0 auto;
    }

    .section-title{
      font-family:'Playfair Display',serif;
      font-size:2.1rem;
      text-align:center;
      color:var(--azul-oscuro);
      margin-bottom:.75rem;
    }

    .section-subtitle{
      text-align:center;
      max-width:650px;
      margin:0 auto 3rem;
      font-size:.98rem;
    }

    /* SOBRE NOSOTROS */

    #nosotros{
        background:var(--azul-oscuro);
        color:var(--blanco);
    }
    #nosotros .section-title {
        color:var(--blanco);
    }
    
    .about-grid{
      display:grid;
      grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
      gap:2.5rem;
      align-items:center;
    }

    .about-text h3{
      font-family:'Playfair Display',serif;
      font-size:1.5rem;
      margin-bottom:1rem;
      color:var(--azul-oscuro);
    }

    .about-text p{
      margin-bottom:1rem;
      font-size:.97rem;
      text-align: justify;
    }

    .about-list{
      list-style:none;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:1rem;
      margin-top:1rem;
    }

    .about-list li{
      font-size:.9rem;
      display:flex;
      gap:.5rem;
      align-items:flex-start;
    }

    .about-list i{
      margin-top:.15rem;
      color:var(--dorado);
    }

    .about-photo{
      border-radius:22px;
      overflow:hidden;
      box-shadow:0 18px 40px rgba(0,0,0,.2);
      position:relative;
    }

    .about-photo::after{
      content:"Quinta Real Santa Cecilia";
      position:absolute;
      left:1.1rem;
      bottom:1.1rem;
      padding:.35rem .9rem;
      border-radius:999px;
      font-size:.75rem;
      text-transform:uppercase;
      letter-spacing:.16em;
      background:rgba(2,27,61,.92);
      color:var(--blanco);
    }

    /* EVENTOS */

    #eventos{
      background:var(--beige);
    }

    .event-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:1.8rem;
    }

    
    /* ==== EVENTOS 3–3–3 WOW ==== */

.event-section{
  background:linear-gradient(180deg, #f7f3e3 0%, #fdfaf4 100%);
}

.event-row{
  margin-bottom:2.5rem;
  border-radius:26px;
  padding:2.4rem 2rem;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:2rem;
  align-items:stretch;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
}

.event-row--light{
  background:#ffffff;
  border:1px solid rgba(2,27,61,.06);
}

.event-row--dark{
  background:var(--azul-oscuro);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 50px rgba(0,0,0,.45);
}

.event-card{
  text-align:center;
  padding:0 1rem;
  position:relative;
  overflow:hidden;
}

.event-card::after{
  content:"";
  position:absolute;
  inset:auto 40% -34px 40%;
  height:34px;
  background:radial-gradient(circle at 50% 0, rgba(0,0,0,.07), transparent 70%);
  opacity:0;
  transition:.3s ease;
  pointer-events:none;
}

.event-card:hover::after{
  opacity:1;
}

.event-icon{
  width:78px;
  height:78px;
  margin:0 auto 1rem;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.1rem;
  color:var(--azul-oscuro);
  background:radial-gradient(circle at 30% 30%, #fdf7e5 0, #f1e3c6 40%, #f7f3e3 100%);
  box-shadow:0 12px 26px rgba(0,0,0,.12);
  transform:translateY(0);
  transition:.3s ease;
}

.event-card:hover .event-icon{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.event-title{
  font-size:1.15rem;
  font-weight:600;
  color:var(--azul-oscuro);
  margin-bottom:.4rem;
}

.event-text{
  font-size:.9rem;
  color:#4b5567;
}

/* Variantes oscuras (fila azul) */
.event-card--dark .event-title{
  color:#ffffff;
}
.event-card--dark .event-text{
  color:rgba(255,255,255,.82);
}
.event-icon--dark{
  color:var(--azul-oscuro);
  background:radial-gradient(circle at 30% 30%, #ffffff 0, #f5e5c7 40%, #f0d59f 100%);
}
.event-row--dark .event-icon{
  box-shadow:0 18px 38px rgba(0,0,0,.6);
}
.event-gallery-cta{
  text-align: center;
  align-items:center;
  justify-content:center;
}
/* RESPONSIVE */
@media (max-width:960px){
  .event-row{
    grid-template-columns:repeat(2, minmax(0,1fr));
    padding:2rem 1.6rem;
  }
}

@media (max-width:640px){
  .event-row{
    grid-template-columns:1fr;
    padding:1.8rem 1.2rem;
  }
}


    /* FOOTER */

    footer{
  background:var(--azul-oscuro);
  color:var(--blanco);
  padding:3rem 1.5rem 2rem;
}

.footer-inner{
  max-width:1200px;
  margin:0 auto;
}

/* GRID PRINCIPAL DEL FOOTER */
.footer-grid{
  display:grid;
  grid-template-columns:1.1fr 1.1fr 1.1fr;
  gap:2.5rem;
  align-items:flex-start;
  margin-bottom:2rem;
}

.footer-col h4{
  margin-bottom:.75rem;
  font-size:.95rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dorado);
}

.footer-col p{
  font-size:.9rem;
  line-height:1.5;
  margin-bottom:.75rem;
  color:var(--blanco);
}

.footer-col--brand p{
  max-width:320px;
}

/* LISTAS */
.footer-list{
  list-style:none;
  padding:0;
  margin:0;
  font-size:.88rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
  color:var(--blanco);
}

.footer-list--bullets{
  list-style:disc;
  margin-left:1.2rem;
}

.footer-list li i{
  margin-right:.4rem;
}

/* REDES SOCIALES */
.footer-social{
  margin-top:1rem;
  display:flex;
  gap:.7rem;
}

.footer-social a{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  transition:.25s ease;
}

.footer-social a:hover{
  background:rgba(255,255,255,.12);
}

/* LÍNEA INFERIOR */
.footer-bottom{
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.78rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

.footer-link{
  color:var(--dorado);
  text-decoration:none;
}

.footer-link:hover{
  text-decoration:underline;
}

/* RESPONSIVE FOOTER */
@media (max-width:960px){
  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:720px){
  .footer-grid{
    grid-template-columns:1fr;
  }
  footer{
    padding:2.5rem 1.2rem 1.8rem;
  }
}


    /* WHATSAPP FLOTANTE */

    .whatsapp-float{
      position:fixed;
      right:1.4rem;
      bottom:1.4rem;
      z-index:40;
    }

    .whatsapp-float a{
      width:56px;height:56px;
      border-radius:999px;
      background:#25d366;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:1.6rem;
      box-shadow:0 14px 32px rgba(0,0,0,.4);
      transition:.22s ease;
    }

    .whatsapp-float a:hover{
      transform:translateY(-3px) scale(1.03);
      box-shadow:0 18px 40px rgba(0,0,0,.55);
    }

    /* RESPONSIVE */

    @media (max-width:960px){
      .hero-inner{
        grid-template-columns:1fr;
      }
      .hero-card{
        max-width:420px;
        margin:0 auto;
      }
      .about-grid{
        grid-template-columns:1fr;
      }
    }

    @media (max-width:780px){
      .nav-container{
        justify-content:space-between;
      }
      nav{
        position:fixed;
        inset:56px 0 auto 0;
        background:rgba(2,27,61,.98);
        transform:translateY(-120%);
        transition:.25s ease;
      }
      nav.open{
        transform:translateY(0);
      }
      nav ul{
        flex-direction:column;
        align-items:flex-start;
        padding:1rem 1.4rem 1.2rem;
      }
      .nav-cta{
        width:100%;
        justify-content:center;
        margin-top:.25rem;
      }
      .nav-toggle{
        display:block;
      }
    }

    @media (max-width:620px){
      .hero{
        padding-top:5.5rem;
      }
      .hero-title{
        font-size:2.1rem;
      }
      section{
        padding:3.5rem 1.2rem;
      }
    }
/* ===== PAQUETES ===== */

.packages-section{
  background:var(--azul-oscuro);
  color:var(--blanco);
}
.packages-section .section-title{
  color:var(--blanco);
}
.packages-layout{
  margin-top:2rem;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr);
  gap:2.8rem;
  align-items:flex-start;
}

/* LISTA LATERAL (3 x 2) */
.packages-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem 2.2rem;
}

.package-item{
  display:flex;
  align-items:center;
  gap:.8rem;
  background:transparent;
  border:none;
  padding:.35rem .35rem;
  cursor:pointer;
  text-align:left;
  font:inherit;
  outline:none;
  transition:.2s ease;
}

.package-item:hover{
  transform:translateY(-1px);
}

.package-check{
  width:18px;
  height:18px;
  border-radius:4px;
  border:2px solid rgba(2,27,61,.6);
  position:relative;
  flex-shrink:0;
  background:#f7f3e3;
}

.package-item.is-active .package-check{
  border-color:var(--dorado);
  background:#fdf5dd;
}

.package-check::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:2px;
  background:var(--dorado);
  opacity:0;
  transform:scale(.4);
  transition:.2s ease;
}

.package-item.is-active .package-check::after{
  opacity:1;
  transform:scale(1);
}

.package-name{
  font-weight:700;
  color:var(--blanco);
  font-size:1.02rem;
}

/* PANEL DE DETALLE */

.packages-detail{
  background:#fff;
  border-radius:22px;
  padding:2rem 2.2rem;
  box-shadow:0 18px 40px rgba(0,0,0,.16);
  border:1px solid rgba(2,27,61,.08);
}

.package-detail{
  display:none;
}

.package-detail.is-active{
  display:block;
  animation:fadeUp .35s ease;
}

.package-detail h3{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  color:var(--azul-oscuro);
  margin-bottom:.4rem;
}

.package-tagline{
  font-size:.95rem;
  color:#6b7280;
  margin-bottom:1rem;
}

.package-detail ul{
  padding-left:1.1rem;
  font-size:.9rem;
  color:#374151;
}

.package-detail li{
  margin-bottom:.3rem;
}

/* ANIMACIÓN */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* RESPONSIVE */
@media (max-width:960px){
  .packages-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .packages-detail{
    padding:1.6rem 1.4rem;
  }
  .packages-list{
    grid-template-columns:1fr;
  }
}

/* ===== CONTACTO / MAPA ===== */

.contact-section{
  background:var(--blanco);
}

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr);
  gap:2.5rem;
  align-items:stretch;
}

.contact-info{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.contact-subtitle{
  text-align:left;
  margin:0 0 1.5rem 0;
}

.contact-details{
  font-size:.9rem;
  color:#4b5563;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  margin-bottom:1.8rem;
}

.contact-details i{
  margin-right:.5rem;
  color:var(--azul-oscuro);
}

.contact-cta{
  margin-top:auto;
}

.contact-cta .btn{
  margin-top:.5rem;
}

/* MAPA */
.contact-map-inner{
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  border:1px solid rgba(2,27,61,.08);
  background:#000;
  min-height:280px;
}

.contact-map-inner iframe{
  width:100%;
  height:100%;
  min-height:280px;
  border:0;
}

/* RESPONSIVE */
@media (max-width:960px){
  .contact-grid{
    grid-template-columns:1fr;
  }
  .contact-subtitle{
    text-align:left;
  }
}


/* ===== PÁGINA NOSOTROS ===== */

.page-main{
  padding-top:4.5rem; /* deja espacio bajo el header fijo */
}

.page-hero{
  background:linear-gradient(120deg, rgba(2,27,61,0.97), rgba(2,27,61,0.8)),
              url("../img/IMG-qrsc.jpg") center/cover no-repeat;
  color:#fff;
  padding:4.5rem 1.5rem 3.5rem;
}

.page-hero-inner{
  max-width:1100px;
  margin:0 auto;
}

.page-hero-tag{
  font-size:.8rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dorado);
  margin-bottom:.7rem;
}

.page-hero h1{
  font-size:2.4rem;
  margin-bottom:.8rem;
  color:var(--blanco);
}

.page-hero p{
  max-width:640px;
  font-size:.98rem;
  color:var(--blanco);
  text-align: justify;
}

/* SECCIONES GENERALES DE PÁGINA */

.page-section{
  padding:3.5rem 1.5rem;
  background:var(--blanco);
  text-align: justify;
}

.page-section-alt{
  background:var(--azul-oscuro);
}

.page-title{
  font-family:'Playfair Display',serif;
  font-size:1.9rem;
  color:var(--azul-oscuro);
  margin-bottom:1rem;
}

.page-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr);
  gap:2.5rem;
  align-items:flex-start;
}

.page-aside-card{
  background:#ffffff;
  border-radius:20px;
  padding:1.6rem 1.5rem;
  box-shadow:0 14px 32px rgba(0,0,0,.08);
  border:1px solid rgba(2,27,61,.06);
  font-size:.9rem;
}

.page-aside-card h3{
  font-family:'Playfair Display',serif;
  font-size:1.3rem;
  margin-bottom:.6rem;
  color:var(--azul-oscuro);
}

.page-aside-card ul{
  list-style:disc;
  margin-left:1.2rem;
}

/* TARJETAS MISIÓN / VISIÓN / COMPROMISO */

.page-cards-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.8rem;
}

.page-card{
  background:#ffffff;
  border-radius:18px;
  padding:1.6rem 1.4rem;
  box-shadow:0 12px 26px rgba(0,0,0,.07);
  border:1px solid rgba(2,27,61,.05);
  font-size:.9rem;
}

.page-card h3{
  font-family:'Playfair Display',serif;
  font-size:1.25rem;
  margin-bottom:.6rem;
  color:var(--azul-oscuro);
}

/* TARJETAS INSTALACIONES */

.page-cards-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.8rem;
}

.page-list{
  list-style:disc;
  margin-left:1.2rem;
  font-size:.9rem;
}

@media (max-width:960px){
  .page-grid{
    grid-template-columns:1fr;
  }
  .page-cards-3{
    grid-template-columns:1fr;
  }
  .page-hero{
    padding-top:4rem;
  }
}

@media (max-width:640px){
  .page-section{
    padding:3rem 1.2rem;
  }
  .page-cards-2{
    grid-template-columns:1fr;
  }
}
/* ===== GALERÍA ===== */

.page-hero--small{
  padding:3.5rem 1.5rem 2.5rem;
  background:linear-gradient(120deg, rgba(2,27,61,0.95), rgba(2,27,61,0.8));
  color:#fff;
}

.gallery-section{
  background:#f7f5f0;
}

.gallery-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:2rem;
}

.gallery-filter{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  border-radius:999px;
  border:1px solid rgba(2,27,61,.18);
  padding:.45rem 1rem;
  background:#fff;
  cursor:pointer;
  font-weight:500;
  color:#1f2933;
  transition:.2s ease;
}

.gallery-filter.is-active{
  background:var(--azul-oscuro);
  color:#fff;
  border-color:var(--azul-oscuro);
}

.gallery-filter:hover:not(.is-active){
  background:#f3ebd5;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}

.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#000;
  cursor:pointer;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.5s ease;
  transform:scale(1.03);
}

.gallery-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 60%);
  opacity:0;
  transition:.35s ease;
}

.gallery-item:hover img{
  transform:scale(1.08);
  opacity:.9;
}

.gallery-item:hover::after{
  opacity:1;
}

.gallery-item-extra{
  display:none; 
}

.gallery-more{
  text-align:center;
  margin-top:2rem;
}

/* RESPONSIVE */
@media (max-width:1024px){
  .gallery-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

@media (max-width:768px){
  .gallery-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:520px){
  .gallery-grid{
    grid-template-columns:1fr;
  }
}

.jorxel-popup{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.jorxel-popup.open{
  display:flex;
}

.jorxel-popup-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

.jorxel-popup-content{
  position:relative;
  z-index:1;
  max-width:420px;
  width:90%;
  background:#0a2d47;
  border-radius:20px;
  padding:1rem 1rem 1.2rem;
  box-shadow:0 24px 50px rgba(0,0,0,.8);
  border:1px solid rgba(229,224,204,.5);
  text-align:center;
}

.jorxel-popup-close{
  position:absolute;
  top:6px;
  right:10px;
  font-size:1.4rem;
  cursor:pointer;
  color:#e5e0cc;
}

.popup-button{
  display:inline-block;
  margin-top:.4rem;
  text-decoration:none;
  color:#0a2d47;
  background-color:#e5e0cc;
  border-radius:40px;
  padding:6px 22px;
  font-size:.9rem;
  font-weight:600;
}

/* Cuadro del mensaje */
#whatsapp-message-box {
    position: fixed;
    bottom: 75px;
    right: 20px;
    width: 260px;
    background-color: #ebe6e1;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    padding: 12px;
    z-index: 10000;
    display: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

#whatsapp-message {
    width: 100%;
    min-height: 85px;
    border-radius: 8px;
    border: 1px solid #d4d4d4;
    padding: 8px;
    font-size: .9rem;
    resize: vertical;
}

#send-whatsapp {
    margin-top: 8px;
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 8px;
    background-color: #25d366;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}

#send-whatsapp:hover {
    background-color: #1ebe5d;
}
.gallery-lightbox{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.gallery-lightbox.open{
    display: flex;
}

.gallery-lightbox-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
}

.gallery-lightbox-inner{
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.8);
    background: #020617;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox-inner img{
    max-width: 100%;
    max-height: 90vh;
    display: block;
}

.gallery-lightbox-close{
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: rgba(15,23,42,.85);
    color: #f9fafb;
    font-size: 1.4rem;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}