/* ====== Variables y tipografías base ====== */
:root{
  --brand: #00B477;     /* verde agua */
  --text:  #374151;
  --shadow: 0 12px 36px rgba(0,0,0,.12);
  --side-width: 220px;  /* ancho lateral simétrico en nav */
}

html{
  scroll-behavior: smooth;
  /* Compensa el nav fijo en anclajes */
  scroll-padding-top: 90px;
}

body{
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
}
/*=========================================================================================================*/

/* ===== Modal Anuncio CREM ===== */
.annc-backdrop{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.35);
  display: none; opacity: 0; transition: opacity .25s ease;
}
.annc-backdrop.is-open{ display: block; }
.annc-backdrop.is-visible{ opacity: 1; }

.annc-modal{
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%,-40%) scale(.98);
  background: #fff; border-radius: 16px; box-shadow: var(--shadow, 0 18px 48px rgba(0,0,0,.18));
  width: min(92vw, 720px);
  max-width: 720px; overflow: hidden;
  transition: transform .25s ease;
}
.annc-backdrop.is-visible .annc-modal{ transform: translate(-50%,-50%) scale(1); }

.annc-close{
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--brand, #003366);
  background: #fff; color: var(--brand, #003366);
  font-size: 22px; line-height: 30px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.annc-close:hover{ background: var(--brand, #003366); color: #fff; }

.annc-img, .annc-link img{
  width: 100%; height: auto; display: block;
  border-radius: 12px; /* leve redondeo interno */
}

.annc-modal .annc-content{ padding: 0; }
.annc-footer{
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid #eee; background: #fff;
}
.annc-nomore{ font-size: .95rem; color: var(--text, #333); user-select: none; }
.annc-btn{
  background: #fff; color: var(--brand, #003366);
  border: 2px solid var(--brand, #003366); border-radius: 10px;
  padding: 8px 14px; font-weight: 600; cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.annc-btn:hover{ background: var(--brand, #003366); color: #fff; transform: translateY(-1px); }
.annc-btn:active{ transform: translateY(0); }

@media (max-width: 480px){
  .annc-modal{ width: 94vw; }
  .annc-close{ top: 8px; right: 8px; }
}

/* ====== NAV FIJO (Escritorio) ====== */
.main-nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1100;
  height: 100px;
  background: var(--brand);
}

.nav-inner {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-left, .nav-right {
  flex: 0 0 var(--side-width);
  display: flex;
  align-items: center;
}

.nav-right { justify-content: flex-end; }

.nav-center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.brand img {
  height: 80px;
  width: auto;
  display: block;
}

/* Links top-level */
.nav-center > a,
.nav-center > .nav-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.15rem;
  transition: color .25s ease;
}
.nav-center > a:hover,
.nav-center > .nav-link:hover,
.nav-center > .nav-link.show {
  color: #005f1d;
  text-decoration: none;
}

/* Dropdowns */
.dropdown-menu {
  --bs-dropdown-bg: var(--brand);
  background: var(--brand) !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 220px;
  padding: 8px 0;
}
.dropdown-item {
  background: transparent !important;
  color: #fff !important;
  padding: 10px 20px;
  white-space: nowrap;
  text-decoration: none !important;
  font-weight: 400 !important;
  font-size: 1rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: transparent !important;
  color: #005f1d !important;
  text-decoration: none !important;
}
/* Submenú interno y .menu-modal */
.dropdown-menu .dropdown-menu { padding: 4px 0; }
.dropdown-menu .dropdown-item,
.dropdown-menu a.menu-modal {
  display: block;
  font-size: 1rem;
  padding: 10px 20px;
  line-height: 1.3;
  text-decoration: none !important;
  font-weight: 400 !important;
  color: #fff !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu a.menu-modal:hover {
  color: #005f1d !important;
}

/* Redes */
.nav-social { display: flex; gap: 18px; }
.nav-social a { color: #fff; font-size: 1.5rem; transition: color .3s; }
.nav-social a:hover { color: #005f1d; }


/* ====== BOTÓN HAMBURGUESA (oculto en desktop) ====== */
.nav-toggle{
  display:none;
  width:40px; height:40px;
  border:2px solid #fff; border-radius:10px;
  background:transparent; cursor:pointer;
  align-items:center; justify-content:center;
  gap:4px; padding:6px;
}
.nav-toggle .bar{ display:block; width:20px; height:2px; background:#fff; }

/* ====== MODO MÓVIL: fila superior + menú plegable debajo ====== */


/* ====== HEADER FULL ====== */
.hero-header{
  height: 100vh; width: 100%;
  background-image: url('../img/img2.JPG');
  background-size: cover; background-position: center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; position:relative;
}
.hero-header::before{
  content:""; position:absolute; inset:0;
  background-color: rgba(148, 123, 15, 0.404); /* velado dorado */
  z-index:1;
}
.hero-text{ position:relative; z-index:2; }

.titulo-inicial{
  font-size: 75px;
  font-family: 'PT Sans', sans-serif; /* nombre correcto */
  color:#fff;
}
h4{
  font-family: 'PT Sans', sans-serif;
  color:#fff;
}


/* ====== Secciones y divisores ====== */
section{ padding: 20px; }

.section-divider-colored{
  border: none; height: 4px;
  background: linear-gradient(to right, red, yellow, lightgreen, darkgreen, blue);
  margin: 50px auto; width: 80%; border-radius: 2px;
}

.titulo-seccion{ color: var(--brand); }

/*============================QUIENES SOMOS ====================================================*/
#quienes .quienes {
  text-align: justify;
  margin: 0 auto;
  max-width: 80%;
  padding: 24px 28px;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* ====== SOCIAS ====== */
.socias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.socia-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.socia-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0,0,0,.16);
}
.socia-foto {
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid (var(--brand)); /* color institucional */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.socia-foto img { width: 100%; height: 100%; object-fit: cover; }
.socia-nombre { font-size: 1.2rem; font-weight: 700; color: var(--brand); margin: 10px 0 4px; }
.socia-rol { font-size: 1rem; font-weight: 500; color: var(--text); margin: 0; }

/* ====== GALERÍA (Swiper) ====== */
.galeria-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}
.galeria-wrap .mySwiper { flex: 1 1 auto; }

/* Flechas: SIN CAMBIOS */
.gal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: transparent;
  border: 2px solid var(--brand, #00B477);
  color: var(--brand, #00B477);
  font-size: 24px;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.gal-btn:hover { background: var(--brand, #00B477); color: #fff; transform: translateY(-2px); }

#galeria .swiper { width: 100%; padding: 20px 0; }

/* 🔧 Evita solapes y recorta el hover-scale dentro del slide */
#galeria .swiper-slide{
  display: flex;
  justify-content: center;
  overflow: hidden;      /* <- clave para que no se “salga” al hacer hover */
  box-sizing: border-box;
}

/* 🔧 La imagen se adapta al ancho del slide (no fijo) */
#galeria .swiper-slide img{
  width: 100%;           /* antes: 250px */
  height: auto;          /* fallback */
  aspect-ratio: 5 / 3;   /* similar a 250x150 */
  object-fit: cover;
  border-radius: 10px;
  transition: transform .3s;
  /* Opcional: si querés que nunca exceda el tamaño “clásico”:
     max-width: 250px;  (descomentar si te gusta ese límite visual) */
}

/* Hover más suave para no “invadir” vecinos */
@media (hover:hover) {
  #galeria .swiper-slide img:hover{ transform: scale(1.03); } /* antes: 1.05 */
}


/* ====== TEXTO HERO ====== */
.hero-text p{
  font-weight: 400; margin-top: 10px;
  text-shadow: 1px 1px 3px rgb(3,1,107);
}

/* ====== ÁREAS (Cards con pictograma) ====== */
#metodo .area-grid{
  /* UNA SOLA FILA: cada tarjeta ocupa la misma fracción del ancho */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1%;
  padding-top: 1%;
  align-items: stretch;
}
@media (max-width: 720px){
  #metodo .area-grid{
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 420px){
  #metodo .area-grid{ grid-template-columns: 1fr; }
}

.card-area{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
  min-height: 420px;
}
.card-area:hover{ transform: translateY(-6px); box-shadow: 0 18px 48px rgba(0,0,0,.16); }
.card-media{
  position:relative; height:160px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding: 0 10%;
}
.card-media img{ width:100%; height:100%; object-fit: contain; display:block; }
.card-title{
  margin: 12px 16px 0;
  font-size:1.2rem; font-weight:700; line-height:1.2;
  color: var(--brand); text-align:center;
}
.card-body{ padding:22px 20px 20px; color:var(--text); display:flex; flex-direction:column; height:100%; }
.card-list{ margin:0 0 18px 0; padding-left:1.1em; }
.card-list li{ margin-left: 10%; margin-right: 5%; }
.card-btn{
  align-self:center;
  background:#fff; color:var(--brand);
  border:2px solid var(--brand); border-radius:10px;
  padding:10px 18px; font-weight:600;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  margin-top: auto;
}
.card-btn:hover{ background:var(--brand); color:#fff; transform: translateY(-1px); }
.card-btn:active{ transform: translateY(0); }

/* ====== MODAL personalizado ====== */
.modal{
  display:none; position:fixed; z-index:1200; inset:0;
  background: rgba(0,0,0,0.6);
  justify-content:center; align-items:center;
}
.modal-content{
  background:#fff; border-radius:15px; padding:20px;
  width:90%; max-width:500px; position:relative;
}
.modal-header{ display:flex; align-items:center; gap:15px; }
.modal-header img{ width:50px; height:50px; object-fit:cover; border-radius:10px; }
.modal-header h2{ flex:1; text-align:center; }
#modalDesc{ white-space: pre-line; }
.close{
  position:absolute; right:15px; top:10px;
  font-size:1.5rem; cursor:pointer;
}

/* ====== Footer ====== */
footer{
  background:#003366; color:#fff; text-align:center; padding:10px;
}

/* ======= Lightbox ============*/
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(0,0,0,.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(1200px, 90vw);
  max-height: 70vh;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  transition: transform 0.5s ease;
}
.lightbox p {
  color: #fff;
  text-align: center;
  margin-top: 12px;
  font-size: 1rem;
}
.lb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}
.lb-close:hover { color: #ddd; }

/* ==== SECCIÓN CONTACTO ==== */
.contacto-section {
  background-color: #00B477;   /* verde agua */
  border-radius: 12px;
  padding: 5px 20px !important;
  padding-bottom: 55px !important;
}
.contacto-section h2 {
  font-weight: 600;
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: #fff;
  padding-right: 5%;
  padding-top: 1%;
}
.contacto-section h4 { font-size: 1.2rem; margin-bottom: 15px; }
.contacto-section p { margin: 4px 0; font-size: 0.95rem; line-height: 1.4; }
.contacto-section iframe {
  height: 220px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.contacto-section form input,
.contacto-section form textarea {
  border-radius: 6px;
  border: none;
  font-size: 0.9rem;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.contacto-section form input:focus,
.contacto-section form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.contacto-section form button {
  background: #fff;
  color: #00B477;
  border: 2px solid #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.3s ease;
}
.contacto-section form button:hover { background-color: #004915; }

/*==================================PARCHES=======================================================*/

/* ================= NAV: FIX DEFINITIVO ================= */

/* Toggles siempre blancos (texto y caret) */
.nav-center .dropdown > .nav-link,
.nav-center .dropdown > .nav-link:link,
.nav-center .dropdown > .nav-link:visited,
.nav-center .dropdown > .nav-link:focus,
.nav-center .dropdown > .nav-link.show {
  color:#fff !important;
  text-decoration:none !important;
  font-weight:500 !important;
}
.nav-center .dropdown > .nav-link.dropdown-toggle::after{ border-top-color:#fff !important; }
.nav-center .dropdown > .nav-link.dropdown-toggle:hover::after{ border-top-color:#005f1d !important; }

/* ======== Layout móvil y “mediano” (<= 992px) ======== */
@media (max-width: 992px){

  .main-nav{ height:auto !important; padding:8px 0 !important; }

  /* Fila superior: [hamburger] [logo] [redes] */
  .nav-inner{
    display:grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:0 10px !important;
  }

  /* anchos fijos fuera para que la grilla funcione */
  .nav-left, .nav-right{ flex: unset !important; width:auto !important; }

  .nav-toggle{
    grid-column:1; justify-self:start;
    display:inline-flex !important;
    width:38px; height:38px; border:2px solid #fff; border-radius:10px;
    background:transparent; align-items:center; justify-content:center; gap:4px; cursor:pointer;
  }
  .nav-toggle .bar{ display:block; width:20px; height:2px; background:#fff; }

  .nav-left{  grid-column:2; justify-self:center; }
  .brand img{ height:44px !important; width:auto; }

  .nav-right{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:10px; }
  .nav-social a{ font-size:22px !important; color:#fff !important; }

  /* Menú plegable debajo, en columna */
  .nav-center{
    grid-column:1 / -1 !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-height:0; overflow:hidden;
    background:var(--brand) !important;
    border-radius:12px;
    padding-top:6px;
    transition:max-height .35s ease;
    /* que no tape la fila superior al estar cerrado */
    z-index:1;
  }


  /* Top-level items: uno por línea */
  .nav-center > a,
  .nav-center > .nav-link,
  .nav-center > .dropdown > .nav-link{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    padding:14px 12px !important;
    font-size:1.1rem !important;
    color:#fff !important;
    text-decoration:none !important;
    border-top:1px solid rgba(255,255,255,.15);
  }
  .nav-center > a:first-child,
  .nav-center > .dropdown:first-child > .nav-link{ border-top:0 !important; }

  /* Dropdowns apilados (no lado a lado) */
  .nav-center > .dropdown{ width:100% !important; }

  /* Submenús integrados al flujo */
  .dropdown-menu{
    position:static !important;
    transform:none !important;
    box-shadow:none !important;
    border:0 !important;
    margin:0 !important;
    padding:6px 0 !important;
    text-align:center !important;
    background:var(--brand) !important;
    width:100% !important;
    z-index:auto !important;
  }
  .dropdown-menu a{
    display:block !important;
    padding:12px 16px !important;
    font-size:1rem !important;
    color:#fff !important;
    text-decoration:none !important;
  }
}


/* ==== Móvil/mediano: mostrar submenús cuando el JS agrega .is-open-acc ==== */
@media (max-width: 992px){
  .dropdown.is-open-acc > .dropdown-menu{ display:block !important; }
  .dropend.is-open-acc  > .dropdown-menu{ display:block !important; }
  .dropdown.is-open-acc > .dropdown-toggle::after{ transform: rotate(180deg); }
}

/* ==== Backdrop del panel móvil ==== */
.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1500;
  display: none;
}
.nav-backdrop.is-visible{ display: block; }

/* Altura y centrado del logo en la barra */
.navbar .brand img{
  height: 56px;        /* ajustá a tu gusto */
  object-fit: contain;
}

/* Icono hamburguesa visible (si usás bootstrap 5 sin iconos propios) */
.navbar-toggler-icon{
  background-image: none; /* quita el svg por defecto si no te gusta */
  width: 1.5rem; height: 1.5rem;
  position: relative;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content:""; position:absolute; left:0; right:0; height:2px; top:35%; background:#000;
}
.navbar-toggler-icon::after{ top:65%; }

/* Espaciados del contenedor principal en desktop */
@media (min-width: 992px){
  .navbar .nav-inner{ padding: 0 1rem; }
  .navbar .nav-social{ margin-left: 1rem; }
  .navbar-collapse{padding-left: 15%;}
}

/* Asegurar que el menú colapsado ocupa ancho completo en móvil */
@media (max-width: 991.98px){
  .navbar-collapse{
    padding: .5rem 0;
  }
  .navbar .brand{ order: 2; }        /* logo queda al centro */
  .navbar .nav-toggle{ order: 1; }   /* botón a la izquierda */
  .navbar .nav-social{ order: 3; }   /* redes quedan al final dentro del collapse (duplicadas como d-lg-none arriba) */
}
/* ==== Color de texto blanco en el navbar ==== */
.navbar,
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .dropdown-menu,
.navbar .dropdown-item {
  color: #fff !important;
}

/* Quitar fondo blanco del dropdown y usar fondo oscuro */
.navbar .dropdown-menu {
  background-color: rgba(0, 0, 0, 0.9);
  border: none;
}

/* Color al pasar el mouse */
.navbar .nav-link:hover,
.navbar .dropdown-item:hover {
  color: #0000007c !important; /* o el color de acento del logo CREM */
}

/* Enlace activo o foco */
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: #0000007c !important;
}
/* ====== Mega menú (desktop ≥ 992px) ====== */
@media (min-width: 992px){
  .navbar .dropdown-menu.mega{
    min-width: 900px;              /* ajusta el ancho a gusto */
    left: 50%;
    transform: translateX(-50%);   /* centrado respecto al nav */
    display: block;                /* necesario para layout interno */
    padding: 1rem 1.25rem;
  }

  /* distribuye el contenido vertical del mega a gusto (opcional) */
  .navbar .dropdown-menu.mega > li{
    margin-bottom: .25rem;
  }

  /* submenús que se abren a la derecha (dropend) */
  .navbar .dropend .dropdown-menu{
    margin-left: .5rem;
  }
}

/* ====== Comportamiento en móvil (<992px) ====== */
@media (max-width: 991.98px){
  /* que los menús queden en flujo dentro del panel colapsado */
  .navbar .dropdown-menu{
    position: static;
    float: none;
    inset: auto !important;  /* ignora posicionamiento absoluto */
    transform: none !important;
    box-shadow: none;
    border: 0;
    background: transparent; /* podés dejarlo oscuro si preferís */
    padding: 0;
  }

  /* espaciar items dentro de los subniveles */
  .navbar .dropdown-menu .dropdown-item{
    padding-left: 1rem;
  }

  /* que el mega no fuerce ancho fijo en móvil */
  .navbar .dropdown-menu.mega{
    min-width: 0;
    width: 100%;
    padding: 0;
  }
}
/* ===== Desktop (≥992px): mega centrado y submenús en cascada ===== */
@media (min-width: 992px){

  /* El mega se controla por Bootstrap (.show), NO forzar display aquí */
  .navbar .dropdown-menu.mega{
    /* Quita cualquier display:block previo */
    width: 10%;
    max-width: 10%;
    white-space: nowrap;
    display: none;                 /* Bootstrap lo mostrará con .show */
    position: absolute;
    top: 100%;
    left: 48%;
    transform: translateX(-50%);
    min-width: 350px;              /* ajusta a gusto */
    padding: .5rem .75rem;
    background: #0aa36c;           /* tu verde del nav o el color que uses */
    border: 0;
    border-radius: .5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
  }

/* Espaciado de los dos items del mega */
  .navbar .dropdown-menu.mega > li{
    margin: .25rem 0;
  }
  .navbar .dropdown-menu.mega > li > .dropdown-item{
    padding: .5rem 1rem;
  }

  /* Cuando Bootstrap abre, aplica .show -> mostrar */
  .navbar .dropdown-menu.show{ display: block; }

  /* Que el dropdown principal no recorte (evita overflow oculto) */
  .navbar .dropdown.mega-parent{ position: static; }

  /* Subniveles en cascada hacia la derecha */
  .navbar .dropend > .dropdown-menu{
    width: max-content;
    max-width: 70vw;
    white-space: normal;
    top: 0;
    left: 100%;
    margin-left: .25rem;
    border-radius: .5rem;
    margin-top: -20px;
    padding: .5rem .75rem;
    background: #0aa36c;           /* igual que el mega (o usa #fff si preferís) */
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
  }

 /* Cajita angosta, centrada bajo el botón "Convenios" */
.convenios-menu {
  min-width: 240px;
  max-width: 280px;
  left: 55% !important;          /* centra horizontalmente */
  transform: translateX(-50%);   /* corrige el centrado */
  right: auto !important;
  text-align: left;              /* items alineados a la izquierda */
}

/* Opcional: apariencia de solo lectura */
.convenios-menu .dropdown-item.disabled {
  opacity: 0.9;
  cursor: default;
}
}

/* ===== Móvil/Tablet (<992px): todo apilado dentro del collapse ===== */
@media (max-width: 991.98px){
  /* Menús en flujo, sin posicionamiento absoluto */
  .navbar .dropdown-menu{
    position: static !important;
    transform: none !important;
    float: none;
    inset: auto !important;
    box-shadow: none;
    border: 0;
    background: transparent;       /* o usa un fondo oscuro si te gusta */
    padding: 0;
  }
  /* Sangría suave para subniveles */
  .navbar .dropdown-menu .dropdown-item{ padding-left: 1rem; }
  /* El mega no fuerza ancho en móvil */
  .navbar .dropdown-menu.mega{ min-width: 0; width: 100%; padding: 0; }
}
/* Asegura un contexto para posicionar los íconos móviles */
.main-nav .nav-inner {
  position: relative; /* ancla para absolute children */
}

/* Íconos siempre visibles en móvil, esquina superior derecha */
.nav-social-mobile {
  position: absolute;
  top: 8px;        /* ajusta según alto de tu barra */
  right: 12px;     /* separacion del borde */
  gap: 12px;
  align-items: center;
  z-index: 1051;   /* por encima del contenido de la navbar */
}

.nav-social-mobile a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;           /* buen target táctil */
  height: 34px;
  text-decoration: none;
  /* Ajustá color según tu fondo de navbar */
  color: #fff;           
}

.nav-social-mobile a:active,
.nav-social-mobile a:hover {
  opacity: 0.8;
}

.nav-social-mobile i {
  font-size: 20px;
  line-height: 1;
}

/* ===== MOBILE: divisor final visible entre el último "Leer más" y CONTACTO ===== */
@media (max-width: 991.98px) {

  /* 1) Dejá aire debajo del último card (donde está el último "Leer más") */
  /* Si el último taller es #taller_expresion_plastica dentro de .area-grid: */
  #taller_expresion_plastica.card-area {
    margin-bottom: 16px !important;  /* espacio antes del hr */
  }

  /* 2) El divisor final va en el flujo, con márgenes propios y sin apilarse encima de nada */
  hr#divisor-final {
    display: block !important;
    position: static !important;   /* evita stacking raro */
    z-index: auto !important;
    clear: both;                   /* por si algún card usa floats en otro lado */
    margin: 120px auto 20px !important; /* arriba del hr, abajo antes de #contacto */
    width: 80%;
    height: 4px;
    border: 0;
    background: linear-gradient(to right, red, yellow, lightgreen, darkgreen, blue);
    border-radius: 2px;
    pointer-events: none;          /* jamás intercepta clics del botón */
  }

  /* 3) Contacto: respiración extra por si hiciste ajustes arriba */
  section#contacto,
  #contacto {
    margin-top: 24px !important;   /* asegura hueco después del hr */
  }
}

/* ====== MOBILE: logo fijo y menú como overlay debajo del header ====== */
@media (max-width: 991.98px) {
  :root { --nav-h: 64px; } /* altura del header en móvil */

  /* El header queda con altura fija y contexto para posicionar hijos */
  .main-nav .nav-inner {
    position: relative;
    min-height: var(--nav-h);
  }

  /* Logo SIEMPRE centrado en la barra, sin moverse */
  .main-nav .brand {
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 1060;
  }

  /* Botón hamburguesa y redes: por encima del fondo del header */
  .main-nav .nav-toggle { position: relative; z-index: 1061; }
  .nav-social-mobile {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1061;
  }

  /* --- Clave: el colapsable NO debe aumentar la altura del header --- */
  /* Lo convertimos en overlay fijo que aparece por debajo del header */
  #mainMenu.collapsing,
  #mainMenu.collapse.show {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-h);           /* justo debajo del header */
    z-index: 1050;
    background: var(--nav-bg, #00B477);  /* ajustá a tu color de navbar */
    padding: 12px 16px 24px;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    /* Si tu navbar es semitransparente, podés usar: backdrop-filter: blur(4px); */
  }

  /* En estado cerrado, que no “reserve” altura */
  #mainMenu.collapse { position: static; }

  /* Asegura 100% de ancho para el layout interno del colapsable */
  .main-nav .navbar-collapse { width: 100%; }
}

/* Si tu navbar no es sticky o fixed y querés que quede pegada arriba:
   .main-nav { position: sticky; top: 0; z-index: 1100; } */
/* ====== Parche mobile para dar respiro lateral real ====== */
@media (max-width: 992px){
  /* paddings al bloque que envuelve el título y el h4 */
  .hero-text{
    padding-inline: 16px;      /* respiro a ambos lados */
    box-sizing: border-box;
  }

  /* título */
  .hero-text .titulo-inicial{
    margin: 0 auto;
    max-width: 90vw;           /* garantiza ~5vw de respiro por lado */
    font-size: clamp(40px, 15vw, 72px);
    text-align: center;
    text-wrap: balance;
    hyphens: auto;
    overflow-wrap: anywhere;   /* por si alguna palabra larga empuja */
  }

  /* subtítulo */
  .hero-text h4{
    margin: 20px auto 0;
    max-width: 92vw;
    padding-inline: 8px;
    text-align: center;
  }
}