:root{
  --azul:#1E90FF;
  --azul-osc:#136fd0;
  --verde:#28A745;
  --verde-osc:#1f8a39;
  --blanco:#ffffff;
  --fondo:#f6f8fb;
  --texto:#132033;
  --muted:#5b677a;
  --borde:rgba(19,32,51,.12);
  --shadow:0 10px 25px rgba(19,32,51,.10);
  --radius:16px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--texto);
  background:var(--blanco);
  line-height:1.6;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
code{ background:rgba(30,144,255,.08); padding:.15rem .35rem; border-radius:8px; }

.container{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
}

/* Topbar */
.topbar{
  background:white;
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand__logo{
  width:auto;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  border:none;
}
.logo-top{
  height:78px;
  width:auto;
  display:block;
}

.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.brand__text span{ font-size:.92rem; opacity:.9; }

.topbar__links{
  display:flex;
  gap:10px;
  align-items:center;
}
.topbar__link{
  opacity:.95;
  padding:8px 10px;
  border-radius:10px;
}
.topbar__link:hover{ background:rgba(255,255,255,.12); }

.topbar__btn{
  background:var(--verde);
  color:var(--blanco);
  padding:8px 12px;
  border-radius:12px;
  font-weight:700;
}
.topbar__btn:hover{ background:var(--verde-osc); }

/* Header / Nav sticky */
.header{
  position: sticky;
  top:0;
  z-index:50;
  background:#2d86d6;
  height:55px;
  display:flex;
  align-items:center;
}
.header__inner{
  display:flex;
  justify-content:center;
  padding:10px 0;
}
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  padding:8px 0;
  width:100%;
display:flex;
justify-content:center;
gap:30px;
}
.nav__item{
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  color:white;
  position: relative;
}
.nav__item:hover{
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* Hero */
.hero{
  position:relative;
  min-height:64vh;
  display:grid;
  align-items:center;
  background-image: var(--hero-img);
  background-size:cover;
  background-position:center;
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(19,32,51,.75), rgba(19,32,51,.25));
}
.hero__content{
  position:relative;
  padding:58px 0;
  color:var(--blanco);
}
.hero__kicker{
  display:inline-block;
  background: rgba(40,167,69,.65);   /* menos opaco */
  padding:8px 16px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  color:white;
  box-shadow: 0 4px 14px rgba(0,0,0,.20);
}
.hero__title{
  margin:14px 0 6px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height:1.12;
}
.hero__subtitle{
  max-width: 58ch;
  font-size:1.05rem;
  opacity:.95;
}

.hero__cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:14px;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
}
.btn--primary{
  background:var(--verde);
  color:var(--blanco);
}
.btn--primary:hover{ background:var(--verde-osc); }
.btn--ghost{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.30);
  color:var(--blanco);
}
.btn--ghost:hover{ background:rgba(255,255,255,.16); }

.hero__badges{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.badge{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  padding:8px 10px;
  border-radius:999px;
  font-weight:700;
}

/* Sections */
.section{
  padding:56px 0;
}
.section--alt{
  background:var(--fondo);
  border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde);
}
.section__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.section__title{
  margin:0 0 8px;
  color:var(--azul-osc);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.section__lead{
  margin:0;
  color:var(--muted);
  max-width: 75ch;
}
.link{
  color:var(--azul-osc);
  font-weight:800;
}
.link:hover{ text-decoration:underline; }
.muted{ color:var(--muted); }

/* Split block */
.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:22px;
  align-items:center;
}
.split__media .media{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid var(--borde);
}
.pillrow{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pill{
  background:rgba(30,144,255,.08);
  border:1px solid rgba(30,144,255,.18);
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
  color:var(--azul-osc);
}

/* Cards */
.cards{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.card{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 6px 18px rgba(19,32,51,.06);
}
.card h3{ margin:0 0 6px; }
.card p{ margin:0; color:var(--muted); }

/* News grid */
.grid3{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.post{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--borde);
  background:var(--blanco);
  box-shadow: 0 6px 18px rgba(19,32,51,.06);
}
.post img{
  width:100%;
  height:190px;
  object-fit:cover;
}
.post__body{ padding:14px; }
.post__meta{ margin:0 0 6px; color:var(--muted); font-weight:700; font-size:.92rem; }
.post__title{ margin:0 0 6px; }
.post__text{ margin:0; color:var(--muted); }

/* Events */
.events{
  margin-top:18px;
  display:grid;
  gap:12px;
}
.event{
  display:grid;
  grid-template-columns: 80px 1fr;
  gap:14px;
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: 0 6px 18px rgba(19,32,51,.06);
}
.event__date{
  border-radius:14px;
  background:rgba(40,167,69,.10);
  border:1px solid rgba(40,167,69,.25);
  display:grid;
  place-items:center;
  padding:10px;
}
.event__day{
  font-weight:900;
  font-size:1.6rem;
  color:var(--verde-osc);
  line-height:1;
}
.event__mon{
  font-weight:900;
  letter-spacing:.5px;
  color:var(--verde-osc);
  font-size:.9rem;
}
.event__info h3{ margin:0 0 4px; }
.event__info p{ margin:0; color:var(--muted); }

/* Gallery */
.gallery{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:10px;
}
.gallery img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--borde);
  box-shadow: 0 6px 18px rgba(19,32,51,.06);
}

/* Contact */
.contact{
  margin-top:18px;
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:14px;
}
.contact__box{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 6px 18px rgba(19,32,51,.06);
}
.form{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 6px 18px rgba(19,32,51,.06);
}
label{
  display:block;
  font-weight:800;
  margin: 0 0 10px;
}
input, textarea{
  width:100%;
  margin-top:6px;
  border:1px solid var(--borde);
  border-radius:12px;
  padding:12px;
  font: inherit;
}
input:focus, textarea:focus{
  outline:2px solid rgba(30,144,255,.25);
  border-color: rgba(30,144,255,.45);
}
.form__hint{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.92rem;
}

/* Footer */
.footer{
  background: #0f1726;
  color: var(--blanco);
  padding:26px 0;
}
.footer__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer__links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .grid3{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(3, 1fr); }
  .contact{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .nav__item{ padding:8px 10px; }
}
.btn--mini{
  padding:10px 12px;
  border-radius:12px;
  font-weight:900;
  background:rgba(30,144,255,.10);
  border:1px solid rgba(30,144,255,.20);
  color:#136fd0;
}

.btn--mini:hover{
  background:rgba(30,144,255,.16);
}

/* Animación suave en tarjetas */
.post, .card, .event, .contact__box, .form{
  transition: transform .15s ease, box-shadow .15s ease;
}
.post:hover, .card:hover, .event:hover, .contact__box:hover, .form:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* ===== NAV: activo bien visible en barra azul ===== */
.nav__item.activo{
  color:#fff !important;
}

.nav__item::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:3px;
  border-radius:999px;
  background:#ffffff; /* línea blanca visible */
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .18s ease;
}
.nav__item.activo::after{
  transform: scaleX(1);
}

section[id]{
  scroll-margin-top:110px;
}
/* ===== FIX TOPBAR: tamaño compacto sí o sí ===== */
.topbar{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  padding:0 !important;
}

.topbar__inner{
  height:84px !important;          /* altura fija */
  max-height:84px !important;
  padding:10px 20px !important;    /* aire normal */
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  overflow:hidden !important;      /* nada se sale */
}

/* Logo superior: tamaño controlado */
.logo-top{
  height:60px !important;
  width:auto !important;
  max-height:60px !important;
  display:block !important;
}

/* Si tienes el logo dentro de .brand__logo img también lo capamos */
.brand__logo img{
  height:60px !important;
  width:auto !important;
  max-height:60px !important;
  transform:none !important;
}
.pagehead{
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
  padding: 28px 0;
}

.pagehead h1{
  margin: 0 0 6px;
  color: var(--azul-osc);
}

.pagehead p{
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}
/* ===== Submenú lateral (tipo oficial) ===== */
.docs{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:18px;
  align-items:start;
}

.docs__nav{
  position: sticky;
  top: 120px;              /* para que no lo tape el menú superior */
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 6px 18px rgba(19,32,51,.06);
}

.docs__title{
  margin:0 0 10px;
  font-weight: 900;
  color: var(--azul-osc);
}

.docs__link{
  display:block;
  padding:10px 10px;
  border-radius: 12px;
  font-weight: 800;
  color: var(--texto);
}

.docs__link:hover{
  background: rgba(30,144,255,.08);
  color: var(--azul-osc);
}

.docs__link.is-active{
  background: rgba(40,167,69,.12);
  border: 1px solid rgba(40,167,69,.25);
  color: var(--verde-osc);
}

.docs__back{
  display:inline-block;
  margin-top:10px;
  font-weight: 800;
  color: var(--azul-osc);
}

.docs__back:hover{
  text-decoration: underline;
}

.docs__content{
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 6px 18px rgba(19,32,51,.06);
}

@media (max-width: 900px){
  .docs{ grid-template-columns: 1fr; }
  .docs__nav{ position: relative; top: 0; }
}
.calendarBox{
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(19,32,51,.06);
}

.calendarBox iframe{
  width: 100%;
  height: 700px;
  border: 0;
  display: block;
}
/* ===== FIX Eventos (alineación/anchos) ===== */
#eventsList{
  width:100%;
  margin-top:18px;
  display:grid;
  gap:12px;
}

#eventsList .event{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  display:grid;
  grid-template-columns: 80px 1fr;
  gap:14px;
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: 0 6px 18px rgba(19,32,51,.06);
}

#eventsList .event__date{
  border-radius:14px;
  background:rgba(40,167,69,.10);
  border:1px solid rgba(40,167,69,.25);
  display:grid;
  place-items:center;
  padding:10px;
}

#eventsList .event__day{
  font-weight:900;
  font-size:1.6rem;
  color:var(--verde-osc);
  line-height:1;
}

#eventsList .event__mon{
  font-weight:900;
  letter-spacing:.5px;
  color:var(--verde-osc);
  font-size:.9rem;
}

#eventsList .event__info h3{ margin:0 0 4px; }
#eventsList .event__info p{ margin:0; color:var(--muted); }
@media (max-width: 520px){
  #postImg{ height:320px !important; }
}
.hero { position: relative; }

.hero__slider{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.hero__slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity 900ms ease;
}

.hero__slide.active{
  opacity:1;
}

/* Asegura que overlay y contenido queden por encima del slider */
.hero__overlay{ position: relative; z-index: 1; }
.hero__content{ position: relative; z-index: 2; }
.social-links{
  display:inline-flex;
  gap:14px;
  align-items:center;
  margin-right:14px;
}

.social-links a{
  display:inline-flex;
  opacity:.85;
  transition:.2s;
}

.social-links a:hover{
  transform:scale(1.15);
  opacity:1;
}

.social-links svg{
  fill: currentColor;
  width: 30px;
  height: 30px;
}
.topbar__links{
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-links a{
  color: inherit; /* hereda el color del texto de la topbar */
}

.btn--socio-grande{
  display:inline-block;
  background: var(--verde);
  color:white;
  font-weight:900;
  padding:14px 22px;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:.2s;
}

.btn--socio-grande:hover{
  background: var(--verde-osc);
  transform: translateY(-2px);
}
@media (max-width: 520px){
  .nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
  }
  .nav__item{
    white-space: nowrap;
    flex: 0 0 auto;
  }
}
@media (max-width: 520px){
  .hero{
    min-height: 56vh;
  }
  .hero__content{
    padding: 44px 0;
  }
}
/* Lightbox galería con navegación */
.lightbox{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.92);
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

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

.lightbox__img{
  max-width:min(1100px, 92vw);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 14px;
}

.lightbox__btn{
  position:absolute;
  border:0;
  background: rgba(255,255,255,.12);
  color:#fff;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 26px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.15s;
}

.lightbox__btn:hover{ background: rgba(255,255,255,.20); transform: scale(1.05); }

.lightbox__close{ top:16px; right:16px; font-size:20px; }
.lightbox__prev{ left:16px; top:50%; transform: translateY(-50%); }
.lightbox__next{ right:16px; top:50%; transform: translateY(-50%); }

@media (max-width: 520px){
  .lightbox__prev{ left:10px; }
  .lightbox__next{ right:10px; }
  .lightbox__img{ max-height: 82vh; }
}
/* Lightbox galería con navegación */
.lightbox{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.92);
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:18px;
}

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

.lightbox__img{
  max-width:min(1100px, 92vw);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 14px;
}

.lightbox__btn{
  position:absolute;
  border:0;
  background: rgba(255,255,255,.12);
  color:#fff;
  width:44px;
  height:44px;
  border-radius:999px;
  font-size:26px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.15s;
}

.lightbox__btn:hover{ background: rgba(255,255,255,.20); transform: scale(1.05); }

.lightbox__close{ top:16px; right:16px; font-size:20px; }
.lightbox__prev{ left:16px; top:50%; transform: translateY(-50%); }
.lightbox__next{ right:16px; top:50%; transform: translateY(-50%); }

@media (max-width: 520px){
  .lightbox__prev{ left:10px; }
  .lightbox__next{ right:10px; }
  .lightbox__img{ max-height: 82vh; }
}
/* ===== TOPBAR móvil: logo correcto y sin deformarse ===== */
@media (max-width: 520px){
  .topbar__inner{
    height: auto !important;
    max-height: none !important;
    padding: 10px 12px !important;
    overflow: visible !important;
  }

  .brand__logo img,
  .logo-top{
    height: 48px !important;
    width: auto !important;
    max-height: 48px !important;
    object-fit: contain;
  }
}
@media (max-width: 520px){
  .topbar__links{
    gap: 10px;
  }

  .topbar__btn{
    padding: 8px 10px;
    border-radius: 12px;
    font-size: .95rem;
  }

  .topbar__link{
    display: none; /* Oculta "Contacto" en móvil para no saturar arriba */
  }

  .social-links svg{
    width: 26px;
    height: 26px;
  }
}
/* ===== TOP BAR PERFECTA EN MÓVIL ===== */
@media (max-width: 520px){

  .topbar__inner{
    padding: 8px 12px !important;
    height:auto !important;
  }

  .brand__logo img{
    height:50px !important;
    width:auto !important;
    max-height:50px !important;
    object-fit:contain;
  }

  .social-links{
    gap:12px;
    margin-right:8px;
  }

  .social-links svg{
    width:26px;
    height:26px;
  }

  .topbar__btn{
    padding:8px 12px;
    font-size:.9rem;
  }
}