/* ==========================================================================
   responsive.css
   Reglas responsivas (mobile-first) con fixes del top-bar en móvil
   ========================================================================== */

/* ===========================
   <= 992px  (tablets & mobile)
   =========================== */
@media (max-width: 992px) {
  /* Grids principales */
  .ciclos-container { grid-template-columns: repeat(2, 1fr); }
  .testimonios-container { grid-template-columns: 1fr; gap: 2rem; }
  #pago .pago-container { grid-template-columns: 1fr; gap: 2rem; }

  /* Tipografías del hero */
  .carousel-caption h2 { font-size: clamp(1.5rem, 4vw, 2.4rem); }
  .carousel-caption p  { font-size: clamp(1rem, 2.5vw, 1.2rem); }

  /* ===== Menú hamburguesa / off-canvas ===== */
  .nav-toggle { display: inline-flex; }

  /* Panel off-canvas: por encima del backdrop */
  #site-nav{
    position: fixed;
    top: 0; right: 0;
    height: 100vh; width: min(320px, 85vw);
    background: #fff;
    box-shadow: -20px 0 40px rgba(0,0,0,.15);
    padding: 5rem 1.25rem 1.25rem;
    display: flex; flex-direction: column; gap: .75rem;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: var(--z-offcanvas); /* panel por encima del backdrop */
  }
  #site-nav a{
    display: block;
    padding: .75rem .25rem;
    font-size: 1.1rem;
    border-radius: 8px;
  }
  #site-nav a:hover,
  #site-nav a:focus-visible { background: var(--light-color); }

  /* Estado abierto (dos formas por si el atributo no aplicara) */
  #site-nav[data-state="open"],
  #site-nav.is-open { transform: translateX(0); }

  /* Backdrop: por debajo del panel */
  .nav-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: var(--z-nav-backdrop); /* debajo del panel */
  }
  .nav-backdrop[hidden]{ display: none; }

  /* Cuerpo sin scroll con menú abierto */
  body.menu-open { overflow: hidden; }
}

/* ===========================
   <= 576px (móviles chicos)
   =========================== */
@media (max-width: 576px) {
  /* Grids */
  .ciclos-container { grid-template-columns: 1fr; }

  /* ===== FIX TOP-BAR MÓVIL =====
     1) Ocultar placeholder izquierdo
     2) 2 columnas: [Servicios(100%)] [Iconos]
     3) Sin padding lateral para que el botón ocupe el 100% visual
  */
  .topbar-left{ display:none !important; }

  .top-bar .container{
    max-width: none !important; /* ocupa todo el ancho, ignora max-width del .container */
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    grid-template-columns: 1fr auto !important;  /* servicios toma todo; redes al costado */
    justify-items: stretch !important;
    align-items: center;
    gap: .5rem;
  }

  .portal-links{ display: none !important; }  /* ocultar segmentados */
  .portal-acc{ display: block !important; width: 100%; }
  .topbar-center{ grid-column: 1 !important; }

  .social-media{
    grid-column: 2 !important;
    justify-self: end !important;
    padding-right: .5rem;
  }

  /* Botón realmente al 100% y sin bordes laterales */
  .portal-acc-btn{
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  /* Iconos sociales algo más compactos (si usas .red-social en otra sección) */
  .red-social { width: 52px; height: 52px; }
  .red-social i { font-size: 20px; }

  /* Popover de WhatsApp más estrecho si lo usas */
  .wa-popover { right: 1rem; bottom: 5.5rem; max-width: 75vw; }
}

/* ===========================
   >= 992px (desktop)
   =========================== */
@media (min-width: 992px) {
  /* Contacto: mapa izquierda / formulario derecha */
  .contacto-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
  }
}

/* ===========================
   Extras de tu galería (si aplica)
   =========================== */
@media (max-width: 992px){
  .ing-grid{ column-count: 2; }
}
@media (max-width: 576px){
  .ing-grid{ column-count: 1; }
  .lb-prev{ left:8px; } .lb-next{ right:8px; }
  .lb-inner{ max-width:94vw; }
}

/* ===========================
   Accesibilidad (reduce motion)
   =========================== */
@media (prefers-reduced-motion: reduce){
  #site-nav { transition: none !important; }
  .hamburger, .hamburger::before, .hamburger::after { transition: none !important; }
}

/* Asegura header por encima del contenido en todos los breakpoints */
header { z-index: var(--z-header); }