/* ========== 0. RESET BÁSICO (no invasivo) ================================ */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ overflow-x:hidden; }
body{
  margin:0;
  background:#13100e;
  color:#fff;
}


/* ========== 1. BLOQUE: #csw-promos ======================================= */
/* Vars, layout base y cards */
#csw-promos{
  --csw-primary:#1f49d8;
  --csw-card:#121318;
  --csw-border:#2a2b33;
  --csw-white:#fff;
  --csw-alert:#ff3b3b;
  scroll-margin-top:0;
}
#csw-promos.page-section{ padding-top:0!important; margin-top:0!important; }

#csw-promos .csw-card{
  background:var(--csw-card);
  border:1px solid var(--csw-border);
  border-radius:0!important;
  overflow:hidden;
  box-shadow:none!important;
}

/* Hero + contenido */
#csw-promos .csw-hero{
  position:relative; min-height:260px;
  background:center/cover no-repeat var(--bg, none);
}
#csw-promos .csw-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.9));
}
#csw-promos .csw-hero-content{
  position:relative; z-index:1; padding:1.75rem 1.25rem 1rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; text-transform:uppercase; text-align:center; color:var(--csw-white);
}
#csw-promos .csw-emoji{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(44px,5.5vw,60px); height:clamp(44px,5.5vw,60px);
  font-size:clamp(28px,3.6vw,40px); line-height:1; border-radius:50%;
  margin-bottom:.5rem; background:rgba(0,0,0,.35); box-shadow:0 6px 20px rgba(0,0,0,.45);
}
#csw-promos .csw-hero-title{ font-weight:800; letter-spacing:.6px; margin:.25rem 0 0; }
#csw-promos .csw-hero-sub{ font-size:.85rem; letter-spacing:1px; opacity:.9; }

/* Alertas, video y media ratio */
#csw-promos .csw-alert{
  background:var(--csw-alert); color:#1a1a1a;
  padding:1rem; margin:1rem 1rem 0; border-radius:0!important;
  font-weight:700; text-transform:uppercase; letter-spacing:.4px;
}
#csw-promos .csw-video{
  max-width:92%; margin:.25rem auto 0; background:#0d0f14;
  border-radius:0; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.45);
}
#csw-promos .ratio>video,
#csw-promos .ratio>img,
#csw-promos .ratio>iframe{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:0!important;
}

/* Botones */
#csw-promos .csw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  padding:.85rem 1.4rem; border-radius:.8rem; background:var(--csw-primary);
  color:#fff; text-decoration:none; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .15s ease, filter .15s ease;
}
#csw-promos .csw-btn:hover{ filter:brightness(1.07); color:#fff; transform:translateY(-1px); }
#csw-promos .csw-btn:active{ transform:translateY(0); }
#csw-promos .csw-btn-icon{
  display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:#fff;
}
#csw-promos .csw-btn-icon .bi{ font-size:.95rem; color:var(--csw-primary); line-height:1; }

/* Responsivo promos */
@media (max-width:991.98px){ #csw-promos .csw-hero{ min-height:240px; } }
@media (max-width:575.98px){ #csw-promos .csw-hero{ min-height:220px; } }


/* ========== 2. SECCIÓN: AGENDA =========================================== */
/* Títulos y helpers */
.agenda-section .display-6{ letter-spacing:.02em; }

/* Filas sin gutters */
.row-tight{ --bs-gutter-x:0; --bs-gutter-y:0; }

/* Líneas verticales (overlay responsive) */
.vlines{ position:relative; }
.vlines::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background-repeat:no-repeat; background-size:100% 100%;
}
/* 4 columnas (xl) */
@media (min-width:1200px){
  .vlines::after{
    background-image:
      linear-gradient(to right,
        transparent calc(25% - .5px), rgba(255,255,255,.95) 0, transparent calc(25% + .5px),
        transparent calc(50% - .5px), rgba(255,255,255,.95) 0, transparent calc(50% + .5px),
        transparent calc(75% - .5px), rgba(255,255,255,.95) 0, transparent calc(75% + .5px)
      );
  }
}
/* 2 columnas (md–lg) */
@media (min-width:768px) and (max-width:1199.98px){
  .vlines::after{
    background-image:
      linear-gradient(to right,
        transparent calc(50% - .5px), rgba(255,255,255,.95) 0, transparent calc(50% + .5px)
      );
  }
}
/* 1 columna (xs–sm) */
@media (max-width:767.98px){ .vlines::after{ background-image:none; } }

/* Tarjetas de día */
.day-card{ border:0; background:#0b0c10; margin:0; }
.day-header{
  background:#ff1f2d; color:#fff; text-transform:uppercase;
  font-weight:800; letter-spacing:.03em; padding:.6rem 1rem; font-size:1.05rem;
}
.day-subheader{
  text-align:center; text-transform:uppercase; font-size:.75rem;
  letter-spacing:.12em; color:#cfcfcf; padding:.35rem 1rem .5rem; border-bottom:0;
}
.day-media{ position:relative; overflow:hidden; background:#000; border:0; }
.day-media video{ display:block; width:100%; height:auto; }

/* Overlay “HOY + DÍA” */
.overlay-title{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
  text-transform:uppercase; font-weight:900; text-align:center; gap:.35rem;
}
.overlay-title span:first-child{
  font-size:3.2rem; line-height:.9; letter-spacing:.05em;
  color:#fff; text-shadow:0 0 18px rgba(0,0,0,.55);
}
.overlay-title span:last-child{
  font-size:2.6rem; line-height:.9; letter-spacing:.04em;
  color:#fff; text-shadow:0 0 18px rgba(0,0,0,.55);
}
.overlay-title.alt span:last-child{ color:#ffddae; }

/* Aportaciones cuadradas */
.aportacion-img{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border: 0;
  background: #000;
}

/* Responsive overlay */
@media (max-width:575.98px){
  .overlay-title span:first-child{ font-size:2.4rem; }
  .overlay-title span:last-child{  font-size:1.9rem; }
}

/* Centrado integral en Agenda */
.agenda-section .display-6,
.agenda-section .text-center,
.agenda-section .day-header,
.agenda-section .day-subheader,
.agenda-section .overlay-title,
.agenda-section .overlay-title span { text-align: center; }
.agenda-section .overlay-title{
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.agenda-section .day-card{ text-align:center; }


/* ========== 3. SECCIÓN: ¿QUIÉNES SOMOS? ================================== */
/* Variables locales y base tipográfica */
:root{
  --cs-card: #0f141b;
  --cs-border: #131a22;
}
#quienes-somos{ background:#fff; color:#222; }
#quienes-somos .letter-space-2{ letter-spacing:.12em; }
#quienes-somos .text-secondary{ color:#6c757d !important; }
#quienes-somos .display-5{ line-height:1.1; }
#quienes-somos .lead{ color:#343a40; }

/* Botones */
#quienes-somos .btn{
  font-weight:600; border:0; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
#quienes-somos .btn-success{ background:#25d366; }
#quienes-somos .btn-primary{ background:#0d6efd; }
#quienes-somos .btn-warning{ background:#ffb703; color:#1b1b1b; }
#quienes-somos .btn:hover, #quienes-somos .btn:focus{ filter:brightness(1.05); }

/* Mosaico rectangular (16:9) */
#quienes-somos .mosaic-rect{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
#quienes-somos .mosaic-rect .tile{
  position:relative; overflow:hidden; border-radius:16px;
  background:#000; box-shadow:0 10px 30px rgba(0,0,0,.15);
  aspect-ratio: 16 / 9;
}
#quienes-somos .mosaic-rect .tile img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.02);
  transition:transform .45s ease, filter .45s ease;
  filter:contrast(1.02) saturate(1.05);
}
#quienes-somos .mosaic-rect .tile:hover img{ transform:scale(1.06); }

/* Beneficios (emojis) */
#quienes-somos .feature-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:110px;
  background:var(--cs-card); border:1px solid var(--cs-border); border-radius:16px;
  color:#e8eef5;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
#quienes-somos .feature-tile .fs-1{ line-height:1; text-shadow:0 0 14px rgba(0,224,224,.35); }
#quienes-somos .feature-tile .small{ color:#cdd6df; }
#quienes-somos .feature-tile:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 14px 30px rgba(0,0,0,.35);
}

/* Responsive QS */
@media (max-width: 575.98px){
  #quienes-somos .mosaic-rect{ gap:10px; }
  #quienes-somos .feature-tile{ border-radius:12px; }
  #quienes-somos .mosaic-rect .tile{ border-radius:12px; }
  #quienes-somos .btn{ padding:.85rem 1rem; }
}


/* ========== 4. SECCIÓN: CONTACTO / HORARIOS ============================== */
/* Background de banda y tipografías */
#horarios{ background:#19191c; }
#horarios .text-light-50{ color:rgba(255,255,255,.6); }
#horarios .display-5{ letter-spacing:.02em; }

/* Card base y variante */
#horarios .hs-card{
  background:#f2f4f5;
  border:0; border-radius:10px; overflow:hidden; height:100%;
  display:flex; flex-direction:column; box-shadow:0 14px 40px rgba(0,0,0,.35);
}
#horarios .hs-card.hs-accent{ background:#e84a3c; color:#fff; }

/* Encabezados */
#horarios .hs-head{
  position:relative; padding:22px 24px 8px; text-align:center;
}
#horarios .hs-card:not(.hs-accent) .hs-head{ color:#e84a3c; }
#horarios .hs-dia{
  margin:0 0 8px 0;
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem);
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
#horarios .hs-brand-title{ font-weight:800; font-size:1.1rem; color:#222; }
#horarios .hs-card.hs-accent .hs-brand-title{ color:#fff; }
#horarios .hs-brand-sub{
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; opacity:.75;
}

/* Media: pico superior y triángulo inferior */
#horarios .hs-media{
  position:relative; aspect-ratio: 16 / 10;
  background: center/cover no-repeat var(--img, #000);
  margin: 12px 12px 0; border-radius:4px; overflow:hidden; isolation:isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
#horarios .hs-media::before{
  content:""; position:absolute; inset:0 auto auto 0;
  width:100%; height:45%; background:#e84a3c; mix-blend-mode:multiply;
  clip-path: polygon(0 0, 100% 0, 50% 45%); opacity:.95; z-index:1;
}
#horarios .hs-media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:48%;
  background:#000; opacity:.75; clip-path: polygon(0 100%, 50% 40%, 100% 100%); z-index:1;
}
#horarios .hs-media-badge{
  position:absolute; inset:auto 0 8% 0; z-index:2; text-align:center; color:#fff;
  font-weight:900; font-size: clamp(1rem, .9rem + .6vw, 1.3rem); line-height:1.05; text-transform:capitalize;
}

/* Body + listas */
#horarios .hs-body{ padding:18px 22px 22px; color:#111; }
#horarios .hs-card.hs-accent .hs-body{ color:#fff; }
#horarios .hs-info{
  list-style:none; padding:0; margin:0 0 14px 0; font-weight:700; font-size:.95rem;
}
#horarios .hs-info li{ margin:.25rem 0; }

/* Botones */
#horarios .hs-btn{ font-weight:800; border:0; }
#horarios .hs-btn-alt{ font-weight:800; border:0; color:#111; }
#horarios .hs-btn-alt:hover{ color:#111; filter:brightness(0.95); }

/* Responsive Contacto */
@media (max-width: 575.98px){
  #horarios .row{ padding-left:.75rem; padding-right:.75rem; }
}


/* ========== 5. SECCIÓN: PORTFOLIO ======================================== */
/* Item base y hover */
#portfolio .portfolio-item{
  position:relative;display:flex;flex-direction:column;height:100%;
  border-radius:14px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 12px rgba(0,0,0,.25);transition:transform .18s, box-shadow .18s, filter .18s;
}
#portfolio .portfolio-item:hover{
  transform:translateY(-6px);box-shadow:0 14px 36px rgba(0,0,0,.35);filter:saturate(1.02);
}

/* Miniatura vertical 3:4 (sin recorte) */
#portfolio .portfolio-item img{
  width:100%; aspect-ratio: 3 / 4; height:auto; object-fit: contain; object-position: center;
  display:block; background:#000;
}

/* Overlay/link y badge */
#portfolio .portfolio-link{position:relative;display:block;}
#portfolio .portfolio-link::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%);
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
#portfolio .portfolio-link:hover::before{opacity:1;}
#portfolio .portfolio-link::after{content:none !important;}
#portfolio .pf-badge{
  position:absolute;top:.75rem;left:.75rem;z-index:2;
  backdrop-filter:blur(6px);background:rgba(17,17,17,.7);color:#fff;font-weight:700;font-size:.75rem;
  padding:.35rem .6rem;border-radius:.5rem;
}

/* Caption y textos sección */
#portfolio .portfolio-caption{
  padding:16px 18px;background:#fff;margin:0;border-top:1px solid rgba(0,0,0,.06);
}
#portfolio .portfolio-caption-heading{
  font-weight:800;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
#portfolio .portfolio-caption-subheading{
  line-height:1.5;color:#444 !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#portfolio, #portfolio p, #portfolio h1, #portfolio h2, #portfolio h3, #portfolio h4,
#portfolio .modal-body, #portfolio .item-intro, #portfolio .list-inline, #portfolio .list-inline li{color:#000;}
#portfolio .text-muted{color:#000 !important;}
#portfolio a{color:#000;text-decoration:none;}
#portfolio a:hover, #portfolio a:focus{text-decoration:underline;}
#portfolio-title{color:#fff !important;} /* solo el h2 blanco */

/* Accesibilidad y modal */
#portfolio .portfolio-link:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:10px;}
#portfolio .portfolio-modal .modal-content{
  background:#000;color:#fff;border:none;border-radius:16px;
}
#portfolio .portfolio-modal .modal-body,
#portfolio .portfolio-modal .modal-body p,
#portfolio .portfolio-modal .modal-body li,
#portfolio .portfolio-modal .modal-body .text-muted{color:#d0d0d0 !important;}
#portfolio .portfolio-modal .modal-body h1,
#portfolio .portfolio-modal .modal-body h2,
#portfolio .portfolio-modal .modal-body h3{color:#fff;}
#portfolio .portfolio-modal .modal-body a{color:#fff;text-decoration:underline;}
#portfolio .portfolio-modal .modal-body a:hover{text-decoration:none;}
#portfolio .portfolio-modal .btn-close{filter:invert(1);opacity:1;}
.modal-backdrop.show{background:#000;opacity:.84;}

/* Imagen modal */
#portfolio .portfolio-modal .modal-body img{
  display:block;width:100%;height:auto;max-height:80vh;
  object-fit:contain;background:#000;border-radius:12px;
}

/* Motion prefs (portfolio) */
@media (prefers-reduced-motion: reduce){
  #portfolio *{transition:none !important;}
}


/* ========== 6. COMPONENTE: TOP BAR ======================================= */
/* Variables del componente */
:root{
  --tb-bg-dark: #0f0f10;
  --tb-text:    #ffffff;
  --tb-muted:   rgba(255,255,255,.75);
  --tb-border:  rgba(255,255,255,.08);
  --tb-hover:   rgba(255,255,255,.12);
  --tb-focus:   #ffffff;
  --tb-gap-x:   1rem;
  --tb-gap-y:   .5rem;
}

/* Base y layout */
.top-bar{
  background: var(--tb-bg-dark);
  color: var(--tb-text);
  padding: .8rem 0;
  border-bottom: 1px solid var(--tb-border);
  position: relative;
  z-index: 1030;
}
.top-bar .container{
  gap: var(--tb-gap-x) var(--tb-gap-y);
  min-height: 56px;
}

/* Contacto */
.top-bar .contact{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem .75rem;
  font-size: 1.0625rem; line-height: 1.4;
}
.top-bar .contact i{ font-size: 1.1em; opacity: .9; }
.top-bar .contact a{
  color: var(--tb-text); text-decoration: none; white-space: nowrap;
}
.top-bar .contact a:hover,
.top-bar .contact a:focus-visible{
  text-decoration: underline; text-underline-offset: 2px;
}


/* ===========================
   Top Bar
=========================== */
.top-bar .vr{opacity:.35;border-color:var(--tb-border);}
.top-bar .mx-2{color:var(--tb-muted);}
.top-bar .social{display:flex;align-items:center;gap:.4rem;}
.top-bar .social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:.5rem;outline:0;
  color:var(--tb-text);transition:background-color .15s ease,transform .15s ease;
}
.top-bar .social-link:hover{background:var(--tb-hover);transform:translateY(-1px);}
.top-bar .social-link:focus-visible{outline:3px solid var(--tb-focus);outline-offset:2px;}
.top-bar .social-link i{font-size:1.05rem;}
@media (min-width:768px){
  .top-bar{padding:.95rem 0;}
  .top-bar .contact{font-size:1.125rem;}
  .top-bar .social-link{width:2.5rem;height:2.5rem;}
  .top-bar .social-link i{font-size:1.1rem;}
}
@media (max-width:575.98px){
  .top-bar .container{flex-wrap:wrap;}
  .top-bar .contact{width:100%;}
  .top-bar .social{width:100%;justify-content:flex-start;}
  .top-bar .vr{display:none!important;}
}
@media (prefers-reduced-motion:reduce){.top-bar *{transition:none!important;}}
@media (forced-colors:active){
  .top-bar,.top-bar a,.top-bar .social-link{forced-color-adjust:none;}
  .top-bar{background:CanvasText;color:Canvas;}
  .top-bar .social-link{outline:1px solid Canvas;}
}
.top-bar.bg-light{background:#fff;color:#111;border-bottom:1px solid rgba(0,0,0,.06);}
.top-bar.bg-light .contact a,.top-bar.bg-light .social-link{color:#111;}
.top-bar.bg-light .social-link:hover{background:rgba(0,0,0,.06);}
.top-bar.bg-light .mx-2{color:rgba(0,0,0,.55);}

/* ===========================
   Utilitarios
=========================== */
.aportacion-img{display:block;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;}
.row-tight{--bs-gutter-x:1rem;--bs-gutter-y:1rem;}
html,body{overflow-x:hidden;} /* antiscroll lateral */

/* ===========================
   Navbar (base)
=========================== */
:root{
  --nav-bg:#191f23;
  --nav-text:#e7e7e7;
  --nav-accent:#f2c335;
  --nav-accent-weak:rgba(242,195,53,.25);
  --nav-shadow:0 6px 18px rgba(0,0,0,.25);
}

.nav-elevated{background:var(--nav-bg);box-shadow:var(--nav-shadow);border-bottom:1px solid rgba(255,255,255,.06);}
#mainNav .container{padding-top:.35rem;padding-bottom:.35rem;}
#mainNav .navbar-brand img{max-height:none;} /* anula límites del tema */

/* Menú principal */
.main-menu .nav-link{
  color:var(--nav-text);letter-spacing:.06em;font-weight:600;
  padding:.75rem .25rem;position:relative;
}
.main-menu .nav-link:hover,.main-menu .nav-link:focus{color:var(--nav-accent);}
.main-menu .nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:.2rem;height:2px;width:0;margin:0 auto;background:var(--nav-accent);transition:width .25s ease;
}
.main-menu .nav-link:hover::after,.main-menu .nav-link:focus::after{width:60%;}

/* Botones de redes */
.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--nav-accent-weak);
  color:var(--nav-text);text-decoration:none;transition:all .2s ease;
}
.btn-icon i{font-size:1rem;line-height:1;}
.btn-icon:hover,.btn-icon:focus{
  background:var(--nav-accent);color:#111;border-color:transparent;
  transform:translateY(-1px);box-shadow:0 4px 10px rgba(242,195,53,.25);
}
.btn-icon:focus-visible,.main-menu .nav-link:focus-visible{outline:2px solid var(--nav-accent);outline-offset:2px;}

/* ===========================
   Logo (con especificidad + !important)
=========================== */
#mainNav .navbar-brand .brand-logo{
  display:block;
  width:auto !important;
  height:44px !important;          /* móvil por defecto */
  max-height:none !important;
}

/* Tablet */
@media (min-width:576px){
  #mainNav .navbar-brand .brand-logo{
    height:72px !important;        /* ajusta 68–80px si prefieres */
  }
}

/* Desktop/Laptop (crecimiento fluido) */
@media (min-width:992px){
  #mainNav .navbar-brand .brand-logo{
    height:clamp(100px, 9vw, 140px) !important;
  }
  #mainNav .container{padding-top:.5rem; padding-bottom:.5rem;}
}


/**************************************************/

/* ===========================
   Top Bar
=========================== */
.top-bar .vr{opacity:.35;border-color:var(--tb-border);}
.top-bar .mx-2{color:var(--tb-muted);}
.top-bar .social{display:flex;align-items:center;gap:.4rem;}
.top-bar .social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:.5rem;outline:0;
  color:var(--tb-text);transition:background-color .15s ease,transform .15s ease;
}
.top-bar .social-link:hover{background:var(--tb-hover);transform:translateY(-1px);}
.top-bar .social-link:focus-visible{outline:3px solid var(--tb-focus);outline-offset:2px;}
.top-bar .social-link i{font-size:1.05rem;}
@media (min-width:768px){
  .top-bar{padding:.95rem 0;}
  .top-bar .contact{font-size:1.125rem;}
  .top-bar .social-link{width:2.5rem;height:2.5rem;}
  .top-bar .social-link i{font-size:1.1rem;}
}
@media (max-width:575.98px){
  .top-bar .container{flex-wrap:wrap;}
  .top-bar .contact{width:100%;}
  .top-bar .social{width:100%;justify-content:flex-start;}
  .top-bar .vr{display:none!important;}
}
@media (prefers-reduced-motion:reduce){.top-bar *{transition:none!important;}}
@media (forced-colors:active){
  .top-bar,.top-bar a,.top-bar .social-link{forced-color-adjust:none;}
  .top-bar{background:CanvasText;color:Canvas;}
  .top-bar .social-link{outline:1px solid Canvas;}
}
.top-bar.bg-light{background:#fff;color:#111;border-bottom:1px solid rgba(0,0,0,.06);}
.top-bar.bg-light .contact a,.top-bar.bg-light .social-link{color:#111;}
.top-bar.bg-light .social-link:hover{background:rgba(0,0,0,.06);}
.top-bar.bg-light .mx-2{color:rgba(0,0,0,.55);}

/* ===========================
   Utilitarios
=========================== */
.aportacion-img{display:block;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;}
.row-tight{--bs-gutter-x:1rem;--bs-gutter-y:1rem;}
html,body{overflow-x:hidden;} /* Anti scroll lateral */

/* ===========================
   Navbar (base)
=========================== */
:root{
  --nav-bg:#191f23;
  --nav-text:#e7e7e7;
  --nav-accent:#f2c335;
  --nav-accent-weak:rgba(242,195,53,.25);
  --nav-shadow:0 6px 18px rgba(0,0,0,.25);
}
.nav-elevated{background:var(--nav-bg);box-shadow:var(--nav-shadow);border-bottom:1px solid rgba(255,255,255,.06);}
#mainNav .container{padding-top:.35rem;padding-bottom:.35rem;}
#mainNav .navbar-brand img{max-height:none;} /* anula límites del tema */

.main-menu .nav-link{
  color:var(--nav-text);letter-spacing:.06em;font-weight:600;
  padding:.75rem .25rem;position:relative;
}
.main-menu .nav-link:hover,.main-menu .nav-link:focus{color:var(--nav-accent);}
.main-menu .nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:.2rem;height:2px;width:0;margin:0 auto;background:var(--nav-accent);transition:width .25s ease;
}
.main-menu .nav-link:hover::after,.main-menu .nav-link:focus::after{width:60%;}

/* Botones de redes */
.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--nav-accent-weak);
  color:var(--nav-text);text-decoration:none;transition:all .2s ease;
}
.btn-icon i{font-size:1rem;line-height:1;}
.btn-icon:hover,.btn-icon:focus{
  background:var(--nav-accent);color:#111;border-color:transparent;
  transform:translateY(-1px);box-shadow:0 4px 10px rgba(242,195,53,.25);
}
.btn-icon:focus-visible,.main-menu .nav-link:focus-visible{outline:2px solid var(--nav-accent);outline-offset:2px;}

/* ===========================
   Logo (especificidad + !important)
=========================== */
#mainNav .navbar-brand .brand-logo{
  display:block;
  width:auto !important;
  height:44px !important;         /* móvil por defecto */
  max-height:none !important;
}
/* Tablet */
@media (min-width:576px){
  #mainNav .navbar-brand .brand-logo{height:72px !important;}
}
/* Desktop/Laptop (fluido) */
@media (min-width:992px){
  #mainNav .navbar-brand .brand-logo{height:clamp(80px, 9vw, 100px) !important;}
  #mainNav .container{padding-top:.5rem; padding-bottom:.5rem;}
}

/* ===========================
   Móvil (≤575.98px): 1 fila (logo | redes | menú)
=========================== */
@media (max-width:575.98px){
  /* Grid: logo | redes (flexible) | menú */
  #mainNav .container{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:.5rem;
  }
  .navbar-brand{min-width:0;}
  #mainNav .navbar-brand .brand-logo{height:40px !important;}

  .navbar-toggler{
    justify-self:end;
    margin:0;
    min-width:auto;
  }

  /* Redes: 1 fila, centradas. En móviles comunes permitimos swipe si no caben */
  .navbar-social{
    min-width:0; max-width:100%;
    display:flex !important; flex-wrap:nowrap !important;
    justify-content:center !important; align-items:center;
    gap:.35rem;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .navbar-social::-webkit-scrollbar{display:none;}
  .navbar-social .btn-icon{width:30px;height:30px;line-height:30px;}

  /* Menú colapsado a todo ancho debajo */
  #navbarResponsive{grid-column:1 / -1; width:100%;}
  .navbar-collapse{
    text-align:center; background:var(--nav-bg);
    border-top:1px solid rgba(255,255,255,.08);
    padding:.25rem 0;
  }
  .navbar-nav{align-items:center !important; margin:.25rem 0;}
  .navbar-nav .nav-link{width:100%; padding:.6rem 0;}
}

/* ===== XS crítico (≤375px): sin desbordes, sin “MENÚ” cortado ===== */
@media (max-width:375px){
  /* Mantén el grid y evita que el centro empuje al botón */
  #mainNav .container{
    grid-template-columns:auto minmax(0,1fr) max-content;
    gap:.35rem;
  }

  /* En XS quitamos el scroll de redes y reducimos la cantidad de iconos visibles */
  .navbar-social{
    overflow:visible; padding-right:0;
    gap:.32rem;
  }
  #mainNav .navbar-brand .brand-logo{height:38px !important;}
  .navbar-social .btn-icon{width:28px;height:28px;line-height:28px;}

  /* Oculta el ÚLTIMO icono (p.ej. Instagram) para dejar aire al botón */
  .navbar-social a:nth-last-child(1){display:none !important;}
}

/* ===== XS extremo (≤340px): aún más compacto, oculta 2 últimos ===== */
@media (max-width:340px){
  #mainNav .navbar-brand .brand-logo{height:36px !important;}
  .navbar-social{gap:.26rem;}
  .navbar-social .btn-icon{width:26px;height:26px;line-height:26px;}
  .navbar-social a:nth-last-child(-n+2){display:none !important;}
}

html, body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}