/* =========================================================================
   OncoCare by Care Solutions — responsive.css
   Ajustes para tablets y móviles. Diseño "mobile-first" complementario.
   Breakpoints: 1024px (tablet/landscape), 768px (tablet), 560px (móvil),
   430 / 375 / 320px (móviles pequeños).
   ========================================================================= */

/* ---------- HASTA 1024px (tablets y laptops pequeñas) ---------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .hero__imagen { aspect-ratio: 16/10; max-height: 380px; }
  .acompanamiento__grid { grid-template-columns: 1fr; gap: 28px; }
  .acompanamiento__imagen { max-height: 360px; aspect-ratio: 16/10; }
  .detalle-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cta-institucional { grid-template-columns: 1fr; text-align: center; }
  .cta-institucional__botones { justify-content: center; }
  .cta-institucional p { margin: 0 auto; }

  /* Layout de productos: filtros pasan a panel desplegable */
  .layout-productos { grid-template-columns: 1fr; }
  .panel-filtros {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 90vw);
    z-index: 900; border-radius: 0; overflow-y: auto; transform: translateX(-100%);
    transition: transform var(--transicion); box-shadow: var(--sombra-lg);
  }
  .panel-filtros.abierto { transform: translateX(0); }
  .btn-filtros-movil { display: inline-flex; }
}

/* ---------- HASTA 900px (oculta navegación de escritorio) ---------- */
@media (max-width: 900px) {
  .nav-principal { display: none; }       /* el megamenú/nav de escritorio se oculta */
  .menu-toggle { display: inline-flex; }   /* aparece la hamburguesa */
  .encabezado__acciones .icono-btn--solo-escritorio { display: none; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- HASTA 768px (tablets verticales) ---------- */
@media (max-width: 768px) {
  .seccion { padding: 48px 0; }

  /* Barra superior: sólo teléfono, WhatsApp y horario */
  .barra-superior__texto { display: none; }
  .solo-movil { display: inline-flex; }
  .barra-superior .contenedor { justify-content: center; }
  .barra-superior__datos { gap: 14px; justify-content: center; }

  /* El buscador del encabezado baja a una segunda fila */
  .encabezado__fila { flex-wrap: wrap; min-height: auto; padding: 12px 0; gap: 12px; }
  .marca { order: 1; }
  .encabezado__acciones { order: 2; margin-left: auto; }
  .buscador { order: 3; flex-basis: 100%; max-width: none; }

  .grid--2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }

  /* Nuevos productos: carrusel horizontal accesible en móvil */
  .carrusel--movil {
    grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; padding-bottom: 12px; -webkit-overflow-scrolling: touch;
  }
  .carrusel--movil > * { scroll-snap-align: start; }

  .cta-institucional { padding: 32px 22px; }
  .form-caja { padding: 22px; }
}

/* ---------- HASTA 560px (móviles) ---------- */
@media (max-width: 560px) {
  .grid--4, .grid--3 { grid-template-columns: 1fr; }
  .grid-productos { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .form-grid-2 { grid-template-columns: 1fr; }

  .marca__nombre { font-size: 1.3rem; }
  .marca__logo { height: 32px; }

  .hero { text-align: left; }
  .hero__botones .btn { flex: 1; justify-content: center; }

  .whatsapp-flotante { padding: 14px; }
  .whatsapp-flotante__texto { display: none; }   /* sólo el icono en móvil para no tapar contenido */
  .volver-arriba { bottom: 84px; right: 18px; }

  .barra-resultados { flex-direction: column; align-items: stretch; }

  /* Tarjetas de producto más compactas */
  .producto-card__cuerpo { padding: 12px; }
  .producto-card__nombre { font-size: .95rem; }
}

/* ---------- HASTA 400px (móviles pequeños: 375 / 320) ---------- */
@media (max-width: 400px) {
  .contenedor { padding: 0 14px; }
  .grid-productos { grid-template-columns: 1fr; }
  .barra-superior__datos { font-size: .78rem; gap: 10px; }
  h1 { font-size: 1.7rem; }
}

/* ---------- IMPRESIÓN ---------- */
@media print {
  .barra-superior, .nav-principal, .whatsapp-flotante, .volver-arriba,
  .menu-toggle, .encabezado__acciones, .footer { display: none !important; }
  body { color: #000; }
}

/* ----------------------------------------------------------------------
   Utilidades de visibilidad responsive
   - .oculto-movil   : se oculta en pantallas <= 768px
   - .oculto-tablet  : se oculta en pantallas <= 900px (cuando aparece el menú móvil)
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .oculto-tablet { display: none !important; }
}
@media (max-width: 768px) {
  .oculto-movil { display: none !important; }
}