:root{
  --bg0:#061022;
  --bg1:#0B1E3B;

  --gold:#D4AF37;
  --gold2:#F2C14E;

  --text: rgba(245,247,250,.92);
  --muted: rgba(245,247,250,.72);
  --muted2: rgba(245,247,250,.55);

  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.06);

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 28px rgba(0,0,0,.30);

  --r1: 14px;
  --r2: 22px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 900px at 20% 10%, rgba(242,193,78,.10), transparent 55%),
    radial-gradient(1000px 700px at 85% 15%, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  overflow-x:hidden;
  opacity:0;
  transition:opacity .5s ease;
}
body.loaded{opacity:1}

.wrap{
  width:min(var(--max), calc(100% - 32px));
  margin:auto;
}

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

.muted{color:var(--muted)}
.tiny{font-size:12px;color:var(--muted2);margin-top:10px}

h1,h2,h3{letter-spacing:-0.02em}
h2{
  font-size:clamp(22px,2.6vw,34px);
  margin:0 0 8px;
}
h3{
  margin:0 0 8px;
  font-size:18px;
}

/* ================= BACKGROUND ================= */
.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
.bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(600px 320px at 50% 0%, rgba(0,0,0,.9), transparent 70%);
  opacity:.35;
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, transparent 30%, rgba(0,0,0,.35) 80%);
}

/* ================= TOP BAR ================= */
.top{
  position:sticky;
  top:0;
  background:rgba(7,20,39,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--stroke2);
  z-index:50;
}

.top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 0;
}

/* HEADER TEXT MÁS GRANDE */
.brand{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:17px;
  color:var(--gold2);
  line-height:1.2;
}

/* Desktop nav */
.nav{
  display:none;
  align-items:center;
  gap:10px;
}
.nav a{
  padding:10px 12px;
  border-radius:999px;
  color:rgba(245,247,250,.85);
}
.nav a:hover{
  background:rgba(255,255,255,.06);
}
.nav .nav-cta{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#08152d;
  font-weight:900;
}

/* ================= HAMBURGER ================= */
.hamburger{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:0 12px;
  cursor:pointer;
}
.hamburger span{
  height:2px;
  width:100%;
  background:rgba(245,247,250,.9);
  border-radius:2px;
  transition:.22s ease;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ================= MOBILE MENU ================= */
.mobile-menu{
  display:none;
  flex-direction:column;
  gap:10px;
  padding:14px 0 18px;
  border-top:1px solid var(--stroke2);
}
.mobile-menu.show{display:flex}
.mobile-menu a{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  font-weight:800;
}
.mobile-menu .mobile-cta{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#0A1630;
}

/* ================= HERO ================= */
.hero{
  padding:72px 0 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* ✅ FOTO + DEGRADADO OSCURO DETRÁS DEL LOGO PRINCIPAL */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(6,16,34,.90), rgba(6,16,34,.62), rgba(6,16,34,.90)),
    url("assets/img/back1.jpg");
  background-size:cover;
  background-position:center;
  filter:saturate(.9) contrast(1.05);
  z-index:0;
}

/* el contenido del hero por encima del fondo */
.hero .wrap{
  position:relative;
  z-index:1;
}

.hero-centered{
  max-width:820px;
  margin:auto;
}

/* LOGO – +15% MÁS GRANDE */
.hero-logo{
  display:block;
  max-width:255px;
  width:100%;
  height:auto;
  margin:0 auto 28px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45));
}

h1{
  font-size:clamp(30px,4vw,52px);
  margin:0 0 14px;
  line-height:1.08;
}

.lead{
  max-width:62ch;
  margin:0 auto 22px;
  color:var(--muted);
  line-height:1.6;
}

/* Buttons */
.actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.btn{
  padding:12px 20px;
  border-radius:999px;
  font-weight:900;
  border:1px solid transparent;
  transition:.15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#0A1630;
}
.btn-soft{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}

/* ================= SECTIONS ================= */
.section{padding:64px 0}

.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.card{
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke2);
  border-radius:var(--r2);
  padding:18px;
}
.icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(242,193,78,.12);
  margin-bottom:12px;
}
.icon-svg{
  width: 24px;
  height: 24px;
  stroke: rgba(245,247,250,.92);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* toque “gold” sutil */
.card:hover .icon-svg{
  stroke: rgba(242,193,78,.95);
}

/* ================= CONTACT ================= */
.cta{padding:70px 0}

.cta-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

.line{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--stroke2);
}
.line:last-child{border-bottom:none}

.form{
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke2);
  border-radius:var(--r2);
  padding:18px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
.field span{
  font-size:13px;
  color:var(--muted);
  font-weight:800;
}
input,select,textarea{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(10,18,40,.55);
  color:var(--text);
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(242,193,78,.4);
  box-shadow:0 0 0 4px rgba(242,193,78,.12);
}

.w100{width:100%}

/* ================= FOOTER ================= */
.foot{
  padding:18px 0;
  border-top:1px solid var(--stroke2);
}
.foot-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

/* ================= RESPONSIVE ================= */
@media (min-width:760px){
  .cards{grid-template-columns:1fr 1fr 1fr}
  .cta-grid{grid-template-columns:1fr 1fr}
}

@media (min-width:900px){
  .brand{font-size:19px}
  .nav{display:flex}
  .hamburger{display:none}
  .mobile-menu{display:none!important}
  .hero-logo{max-width:300px}
}

/* ================= EAGLES LOGO ================= */
.eagles-logo-wrap{
  display:flex;
  justify-content:center;
  margin:8px auto 22px;
}
.eagles-logo{
  display:block;
  max-width:255px; /* igual que .hero-logo */
  width:100%;
  height:auto;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45));
}
@media (min-width:900px){
  .eagles-logo{
    max-width:300px; /* igual que .hero-logo en desktop */
  }
}

/* ================= ORDENAR TEXTO / EAGLES LAYOUT ================= */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.section-head h2{margin:0 0 6px}
.section-head p{
  margin:0;
  line-height:1.55;
  max-width:60ch;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(245,247,250,.88);
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke);
  white-space:nowrap;
}

@media (max-width:760px){
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Paneles */
.split{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:12px;
}

.panel{
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke2);
  border-radius:var(--r2);
  padding:18px;
}

.panel h3{margin:0 0 10px}
.panel p{margin:0 0 12px; line-height:1.6}

.panel-glow{
  box-shadow: var(--shadow2);
  border-color: rgba(242,193,78,.18);
}

@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr; gap:16px;}
}

/* Bullets */
.list{
  margin:10px 0 14px;
  padding-left:20px;
  color:var(--muted);
}
.list li{margin:8px 0; line-height:1.55}

/* Mini grid */
.mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.mini{
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke2);
  border-radius:16px;
  padding:12px;
}
.mini-top{
  display:block;
  font-size:12px;
  color:var(--muted2);
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.mini-big{
  display:block;
  font-size:18px;
  font-weight:900;
}

/* Botón */
.panel .btn{margin-top:6px}

/* ================= BUSINESSKIDS LOGO ================= */
.business-logo-wrap{
  display:flex;
  justify-content:center;
  margin:8px auto 22px;
}

.business-logo{
  display:block;
  max-width:200px; /* más pequeño que hero y eagles */
  width:100%;
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45));
}

/* ================= FIX EAGLES (FUNCIONA EN MÓVIL Y DESKTOP) ================= */
/* Centra "Programa deportivo" y separa de "Eagles" sin afectar otros pills */
#eagles .pill-center{
  text-align:center;
  margin-bottom:12px;
}
#eagles .pill-center .pill{
  display:inline-flex;
  margin:0 auto;
}

/* Si en Logros/Actividades pones un <a class="btn btn-primary w100"> dentro de .mini-grid,
   esto lo hace ocupar todo el ancho */
#eagles .mini-grid .btn.w100{
  width:100%;
  text-align:center;
}

/* FIX real: dar ancho completo al bloque del título en Eagles para poder centrar */
#eagles .section-head > div{
  width:100%;
}

/* ===== FIX DEFINITIVO: centrar pill en móvil SOLO en Eagles ===== */
@media (max-width:760px){
  #eagles .section-head{
    align-items:center;
  }

  #eagles .pill-center{
    width:100%;
    display:flex;
    justify-content:center;
  }
}

/* ================= BUSINESSKIDS LOGO (DESKTOP) ================= */
@media (min-width:900px){
  .business-logo{
    max-width:240px;
  }
}

/* ===== EAGLES: botón Galería grande y centrado ===== */
#eagles .mini-grid{
  display:flex;
  justify-content:center;
}

#eagles .mini-grid .btn{
  font-size:16px;
  padding:16px 28px;
  border-radius:999px;
  min-width:240px;
  justify-content:center;
  text-align:center;
}

/* ===== BUSINESSKIDS: pill arriba y centrado, título a la izquierda (REPARADO) ===== */
#business .section-head{
  flex-direction:column;
  align-items:flex-start;
}

#business .section-head > div{
  width:100%;
}

#business .section-head > .pill{
  order:-1;
  align-self:center;
  margin:0 0 12px 0;
}
/* ===== CONTACT: separar botones Email / WhatsApp ===== */
#contact .form .btn{
  margin-top: 12px;
}

/* opcional: un poco más de aire en móvil */
@media (max-width:760px){
  #contact .form .btn{
    margin-top: 14px;
  }
}
/* ===== MAPA BRUTAL (card + glass) ===== */
.map-card{
  /* 👇 esto garantiza espacio a ambos lados SIEMPRE (móvil incluido) */
  width: min(520px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-width: 900px;

  /* 👇 más arriba y con un poquito de espacio antes del footer */
  margin: 10px auto 14px;

  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
  isolation:isolate;
}

/* mantiene proporción bonita (no “cuadrado feo”) */
.map-embed{
  width:100%;
  height:220px;
  border:0;
  display:block;
  filter:saturate(.95) contrast(1.05);
  transform:scale(1.02); /* cubre bordes/lineitas */
}

/* overlay arriba para que se vea pro */
.map-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(242,193,78,.10), transparent 55%),
    linear-gradient(180deg, rgba(6,16,34,.10), rgba(6,16,34,.55));
  pointer-events:none;
}

.map-cta{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,18,40,.55);
  backdrop-filter: blur(10px);
}

/* móvil: un poco menos alto + ajusta el botón */
@media (max-width:760px){
  .map-embed{ height:210px; }
  .map-cta{ left:12px; bottom:12px; }
}
/* ===== BusinessKids con foto de fondo ===== */
#business.business-bg{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin: 18px auto;
  max-width: 1120px; /* igual al wrap visual */
}

/* Fondo con imagen */
#business.business-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("assets/img/businessFoto1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.03); /* evita lineitas en bordes */
  filter: saturate(.95) contrast(1.05);
  z-index: 0;
}

/* Overlay para legibilidad (oscuro + glass) */
#business.business-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(255,215,80,.18), transparent 55%),
    linear-gradient(180deg, rgba(8,16,32,.80), rgba(8,16,32,.60));
  z-index: 1;
}

/* Contenido por encima del fondo */
#business .business-inner{
  position: relative;
  z-index: 2;
  padding: 26px 18px;
}

/* Ajuste: cards se ven “glass” encima del fondo */
#business.business-bg .card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Texto más legible en foto */
#business.business-bg .muted{
  color: rgba(255,255,255,.78);
}
#business.business-bg h2,
#business.business-bg h3{
  color: rgba(255,255,255,.95);
}

/* En móvil: más padding */
@media (max-width: 640px){
  #business .business-inner{ padding: 22px 14px; }
  #business.business-bg{ border-radius: 18px; }
}
/* ===== FIX iPhone: mejor encuadre de la foto ===== */
@media (max-width: 768px){
  #business.business-bg::before{
    background-position: center top; /* sube el encuadre */
    transform: scale(1.15);          /* zoom out visual */
  }
}

/* iPhone pequeños (SE / mini) */
@media (max-width: 430px){
  #business.business-bg::before{
    background-position: center 15%;
    transform: scale(1.22);
  }
}
/* Desktop */
#business.business-bg::before{
  background-image: url("assets/img/businessFoto1.png");
}

/* Mobile: imagen alternativa */
@media (max-width: 768px){
  #business.business-bg::before{
    background-image: url("assets/img/businessFoto-mobile.png");
    background-position: center top;
  }
}
/* ===== BusinessKids: encuadre a la derecha en mobile ===== */
@media (max-width: 768px){
  #business.business-bg::before{
    background-position: right center !important;
    transform: scale(1.15) !important;
  }
}

/* iPhone pequeños */
@media (max-width: 430px){
  #business.business-bg::before{
    background-position: 85% center !important;
    transform: scale(1.2) !important;
  }
}
/* ===== Apple-like scroll reveal (zoom + blur + fade) ===== */
.card.reveal{
  opacity: 0;
 transform: translateY(18px) scale(.96);
filter: blur(6px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.8,.2,1),
    filter .7s ease;
  will-change: opacity, transform, filter;
}

/* Cuando ya está visible */
.card.reveal.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Accesibilidad: si el usuario no quiere animaciones */
@media (prefers-reduced-motion: reduce){
  .card.reveal{
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ================= GALLERY PAGE ================= */
.gallery-hero{
  padding: 46px 0 10px;
}

.gallery-hero-inner{
  position:relative;
  overflow:hidden;
  padding: 18px;
}

/* Fondo sutil + glass */
.gallery-hero-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(242,193,78,.14), transparent 55%),
    linear-gradient(180deg, rgba(6,16,34,.55), rgba(6,16,34,.25));
  pointer-events:none;
}
.gallery-hero-inner > *{
  position:relative;
  z-index:1;
}

.gallery-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.gallery-badge{
  width: 56px;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
  opacity: .98;
}

.gallery-title{
  margin: 6px 0 8px;
  font-size: clamp(26px, 3.5vw, 44px);
  line-height: 1.08;
}

.gallery-sub{
  margin: 0 0 14px;
  line-height: 1.6;
  max-width: 70ch;
}

.gallery-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Grid */
.gallery-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.gallery-item{
  padding:0;
  border-radius: var(--r2);
  cursor:pointer;
  text-align:left;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke2);
  overflow:hidden;
  position:relative;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.gallery-item:hover{
  transform: translateY(-2px);
  border-color: rgba(242,193,78,.22);
  background: rgba(255,255,255,.06);
}

.gallery-item img{
  width:100%;
  height: 240px;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
  filter: saturate(.95) contrast(1.05);
}

/* Responsive columns */
@media (min-width: 680px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .gallery-item img{ height: 260px; }
}
@media (min-width: 980px){
  .gallery-grid{ grid-template-columns: 1fr 1fr 1fr; }
  .gallery-item img{ height: 240px; }
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 200;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lightbox.show{ display:flex; }

.lightbox-img{
  max-width: min(1100px, 96vw);
  max-height: 82vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  background: rgba(255,255,255,.03);
}

.lightbox-close{
  position: fixed;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,18,40,.55);
  color: rgba(245,247,250,.92);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 210;
}
.lightbox-close:hover{
  transform: translateY(-1px);
}
/* ================= GALLERY (FILTER + GRID + LIGHTBOX) ================= */
.gallery-hero{ padding: 46px 0 10px; }

.gallery-hero-inner{
  position:relative;
  overflow:hidden;
  padding: 18px;
}
.gallery-hero-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(242,193,78,.14), transparent 55%),
    linear-gradient(180deg, rgba(6,16,34,.55), rgba(6,16,34,.25));
  pointer-events:none;
}
.gallery-hero-inner > *{ position:relative; z-index:1; }

.gallery-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.gallery-count{
  font-weight:900;
  color: rgba(245,247,250,.78);
  letter-spacing:.02em;
}

.gallery-title{
  margin: 6px 0 8px;
  font-size: clamp(26px, 3.5vw, 44px);
  line-height: 1.08;
}
.gallery-sub{
  margin: 0 0 14px;
  line-height: 1.6;
  max-width: 70ch;
}

.gallery-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Filters */
/* ===== Filters (FIX alineación móvil) ===== */
.gallery-filters{
  display: flex;
  flex-wrap: wrap;

  /* 👇 CLAVE: centra el bloque completo */
  justify-content: center;
  align-items: center;

  gap: 8px;                 /* espacio consistente entre botones */
  margin: 14px auto 18px;   /* aire arriba/abajo + centrado */
  max-width: 520px;         /* evita que se estiren demasiado */
}

/* Botones de filtro */
.filter-btn{
  padding: 9px 14px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;      /* evita cortes raros */
  border-radius: 999px;
}

/* Extra fino solo en móvil */
@media (max-width: 760px){
  .gallery-filters{
    gap: 10px;
    margin: 16px auto 20px;
  }

  .filter-btn{
    font-size: 13px;
    padding: 10px 14px;
  }
}


/* Grid */
.gallery-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.gallery-item{
  padding:0;
  border-radius: var(--r2);
  cursor:pointer;
  text-align:left;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke2);
  overflow:hidden;
  position:relative;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.gallery-item:hover{
  transform: translateY(-2px);
  border-color: rgba(242,193,78,.22);
  background: rgba(255,255,255,.06);
}
.gallery-item img{
  width:100%;
  height: 240px;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
  filter: saturate(.95) contrast(1.05);
}

/* Tag */
.gallery-item .tag{
  position:absolute;
  left:12px;
  bottom:12px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(245,247,250,.92);
  background: rgba(10,18,40,.62);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hidden for filter */
.gallery-item.is-hidden{
  display:none !important;
}

/* Responsive columns */
@media (min-width: 680px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .gallery-item img{ height: 260px; }
}
@media (min-width: 980px){
  .gallery-grid{ grid-template-columns: 1fr 1fr 1fr; }
  .gallery-item img{ height: 240px; }
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 200;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lightbox.show{ display:flex; }

.lightbox-img{
  max-width: min(1100px, 96vw);
  max-height: 82vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  background: rgba(255,255,255,.03);
}

.lightbox-close{
  position: fixed;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,18,40,.55);
  color: rgba(245,247,250,.92);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 210;
}
.lightbox-close:hover{ transform: translateY(-1px); }


/* ===== Gallery: alineación + aire en móvil ===== */
.gallery-hero .wrap{
  /* más espacio lateral SOLO en galería */
  width: min(var(--max), calc(100% - 44px));
}

.gallery-hero-inner{
  /* centra el card y evita que se pegue a los bordes */
  max-width: 860px;
  margin: 0 auto;
}

/* ordena el header del card (pill + contador) */
.gallery-hero-top{
  align-items: center;
}

/* filtros: más alineados y con wrap bonito */
.gallery-filters{
  justify-content: flex-start;  /* alineado, no “flotando” */
  gap: 8px;
}

/* botones de filtro más consistentes */
.filter-btn{
  font-size: 13px;
  padding: 9px 12px;
  line-height: 1;
}

/* botones principales: en móvil, uno debajo del otro y full width */
@media (max-width: 760px){
  .gallery-hero .wrap{
    width: min(var(--max), calc(100% - 40px));
  }

  .gallery-hero-inner{
    padding: 18px 16px; /* menos “apretado” */
  }

  .gallery-actions{
    gap: 10px;
  }

  .gallery-actions .btn{
    width: 100%;
    text-align: center;
  }
}
/* ===== FIX iOS Safari: botones de filtro NO blancos ===== */
.filter-btn{
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,.05) !important;
  color: rgba(245,247,250,.86) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

/* Activo (también forzado) */
.filter-btn.is-active{
  background: linear-gradient(135deg,var(--gold),var(--gold2)) !important;
  color: #0A1630 !important;
  border-color: transparent !important;
}
:root{ color-scheme: dark; }
/* ===== FIX Dirección: segunda línea alineada a la derecha ===== */
.line .value{
  text-align: right;
  line-height: 1.5;
}
/* ===== Gallery hero con la MISMA foto que el index ===== */
.gallery-hero{
  position: relative;
  overflow: hidden;
}

.gallery-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(6,16,34,.85), rgba(6,16,34,.65), rgba(6,16,34,.9)),
    url("assets/img/back1.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(.9) contrast(1.05);
  z-index: 0;
}

.gallery-hero .wrap{
  position: relative;
  z-index: 1;
}

/* ===== Gallery con el mismo HERO del index ===== */
.hero.hero-gallery::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(6,16,34,.90), rgba(6,16,34,.62), rgba(6,16,34,.90)),
    url("assets/img/back1.jpg");
  background-size:cover;
  background-position:center;
  filter:saturate(.9) contrast(1.05);
  z-index:0;
}

/* Asegura que el contenido quede por encima */
.hero.hero-gallery .wrap{
  position:relative;
  z-index:1;
}

/* Un poquito más compacta que el index */
.hero.hero-gallery{
  padding: 64px 0 32px;
}
/* ===== Acreditaciones logos ===== */
.accred-card{
  text-align:center;
}

.accred-logo{
  max-width:140px;
  width:100%;
  height:auto;
  margin:0 auto 16px;
  display:block;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.35));
  transition: transform .25s ease, filter .25s ease;
}

.accred-card:hover .accred-logo{
  transform: scale(1.05);
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.5));
}

/* placeholder sin emoji */
.icon-placeholder{
  width:44px;
  height:44px;
  border-radius:14px;
  background: rgba(242,193,78,.10);
  margin-bottom:12px;
}
.accred-text{
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}
.pay-card{ text-align:center; }

.qr-link{
  display:inline-block;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.qr-img{
  display:block;
  width:min(320px, 86vw);
  height:auto;
  transition: transform .2s ease;
}

.qr-link:hover .qr-img{ transform: scale(1.02); }

/* En desktop, que el QR ocupe la 2da columna como si fuera “otra card” */
@media (min-width:760px){
  .cta-grid .pay-card{ grid-column: 2; }
}
/* Botón secundario (glass elegante) */
.nav .nav-soft{
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(245,247,250,.90);
  font-weight:900;
  white-space:nowrap;
}

.nav .nav-soft:hover{
  background:rgba(255,255,255,.09);
}
/* ===== NAV DESKTOP: todo en 1 línea + más compacto ===== */
@media (min-width: 900px){
  .top-row{
    flex-wrap: nowrap;
    gap: 14px;
  }

  /* deja que el nav use el espacio y empuje a la derecha */
  .brand{ flex: 0 0 auto; }
  .nav{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    flex-wrap: nowrap;   /* CLAVE: no se rompe */
    gap: 8px;            /* menos separación */
    min-width: 0;
  }

  /* links más compactos y SIN salto */
  .nav a{
    white-space: nowrap; /* CLAVE */
    font-size: 14px;
    padding: 8px 10px;
  }

  /* botón “glass” igual de fino */
  .nav .nav-soft{
    white-space: nowrap;
    font-size: 14px;
    padding: 8px 12px;
  }

  /* CTA amarillo: NO se parte */
  .nav .nav-cta{
    white-space: nowrap;
    padding: 10px 14px;
  }
}

/* ===== Redes sociales footer ===== */
.socials{
  display:flex;
  gap:14px;
  align-items:center;
}

.social-icon{
  width:24px;
  height:24px;
  color:rgba(245,247,250,.85);
  transition:.25s ease;
}

.socials a:hover .social-icon{
  color: var(--gold2);
  transform: translateY(-2px);
}
.social-icon-solid{
  width:24px;
  height:24px;
  fill:rgba(245,247,250,.85);
  transition:.25s ease;
}

.socials a:hover .social-icon-solid{
  fill: var(--gold2);
  transform: translateY(-2px);
}
/* ===== CONTACT FIX DESKTOP ===== */
@media (min-width: 900px){

  .cta-grid{
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 520px);
    align-items: start;
    gap: 28px;
  }

  .cta-copy{
    max-width: 560px;
  }

  .cta-grid > :nth-child(2){
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

}
/* ===== CONTACT: centrar bloque en desktop/tablet ===== */
@media (min-width:760px){
  #contact .cta-grid{
    /* dos columnas con ancho controlado */
    grid-template-columns: minmax(320px, 520px) minmax(360px, 520px) !important;

    /* centra el grid dentro del wrap */
    justify-content: center !important;

    gap: 28px !important;
    align-items: start !important;
  }

  /* tu columna izquierda (texto) */
  #contact .cta-copy{
    max-width: 520px;
  }

  /* tu columna derecha (form + QR) = segundo hijo del grid */
  #contact .cta-grid > :nth-child(2){
    max-width: 520px;
  }
}
/* ===== CONTACT FIX FINAL ===== */
@media (min-width: 980px){

  #contact .cta-grid{
    grid-template-columns: 1fr 1.1fr 0.9fr;
    gap: 24px;
    align-items: start;
  }

}
/* ===== CONTACT: en desktop/tablet, todo apilado (sin espacio vacío) ===== */
@media (min-width: 760px){
  /* fuerza 1 columna */
  #contact .cta-grid{
    grid-template-columns: 1fr !important;
    gap: 18px;
    align-items: start;
  }

  /* fuerza que cada bloque ocupe TODO el ancho del grid */
  #contact .cta-copy,
  #contact .form,
  #contact .pay-card{
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }
}
/* ===== CONTACT VISUAL FIX (EMPAREJADO REAL) ===== */

/* mismo ancho visual para todo el bloque */
#contact .cta-grid{
  max-width: 760px;
  margin: 0 auto;
  gap: 22px;
}

/* convertir el bloque izquierdo en glass */
#contact .cta-copy{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke2);
  border-radius: var(--r2);
  padding: 22px;
  backdrop-filter: blur(10px);
}

/* que form y QR tengan el mismo ancho visual */
#contact .form,
#contact .pay-card{
  max-width: 760px;
  margin: 0 auto;
}

/* que todos tengan mismo radio */
#contact .cta-copy,
#contact .form,
#contact .pay-card{
  border-radius: var(--r2);
}

/* alinear mejor texto de dirección */
#contact .line .value{
  text-align: right;
}

/* mejorar separación visual */
#contact .pay-card{
  margin-top: 4px;
}
/* ===== CONTACT: MISMO ANCHO PARA TODOS LOS GLASS ===== */
#contact .cta-copy,
#contact form.form,
#contact .pay-card{
  width: min(760px, calc(100% - 32px)) !important; /* mismo ancho real */
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* por si alguna regla vieja limita el form/QR */
#contact .form,
#contact .pay-card{
  justify-self: stretch !important;
}

/* opcional: que el QR no “ensanche” raro visualmente */
#contact .qr-link{ display: inline-block; }
#contact .qr-img{ width: min(320px, 100%); height: auto; }

/* ===== FIX: QR centrado dentro del card ===== */
#contact .pay-card{
  text-align: center; /* por si se perdió */
}
#contact .qr-link{
  display: block !important;
  width: fit-content;
  margin: 0 auto !important;   /* centra el bloque */
}
#contact .qr-img{
  display: block;              /* evita huecos inline */
  width: min(320px, 86vw);
  height: auto;
}

/* ===== FIX: MAPA grande (quita el límite de 520px) ===== */
.map-card{
  width: min(760px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
  max-width: 760px !important;
  margin: 18px auto 18px !important;
}

@media (min-width: 760px){
  .map-embed{ height: 280px; } /* más grande en desktop/tablet */
}