/* ===== styles.css ===== */
/* =========================================================================
   OncoCare by Care Solutions — styles.css
   Hoja de estilos principal: variables de marca, tipografía, layout base,
   barra superior, encabezado, hero, secciones y footer.
   --------------------------------------------------------------------------
   Los componentes reutilizables (tarjetas, botones, badges, formularios,
   acordeones) están en components.css
   Los ajustes para móvil/tablet están en responsive.css
   ========================================================================= */
:root {
  --color-verde: #5DB52F;
  --color-azul: #1A4EA3;
  --color-azul-oscuro: #123A78;
  --color-verde-oscuro: #438E20;
  --color-verde-claro: #EAF6E4;
  --color-azul-claro: #EAF1FA;
  --color-fondo: #FFFFFF;
  --color-fondo-secundario: #F7F9FC;
  --color-texto: #243142;
  --color-texto-secundario: #475569;
  --color-borde: #E2E8F0;
  --color-alerta-suave: #FFF8E5;
  --color-disponible: #198754;
  --font-titulos: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-texto: "Inter", "Segoe UI", system-ui, sans-serif;
  --radio-sm: 8px;
  --radio: 14px;
  --radio-lg: 22px;
  --sombra-sm: 0 1px 3px rgba(18, 58, 120, .06), 0 1px 2px rgba(18, 58, 120, .04);
  --sombra: 0 6px 20px rgba(18, 58, 120, .08);
  --sombra-lg: 0 18px 40px rgba(18, 58, 120, .14);
  --max-ancho: 1240px;
  --header-altura: 76px;
  --transicion: .25s cubic-bezier(.4, 0, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-texto);
  font-size: 16px;            
  line-height: 1.6;
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-titulos);
  color: var(--color-texto);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 1rem; }
a { color: var(--color-azul); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--color-azul-oscuro); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible {
  outline: 3px solid var(--color-azul);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-azul);
  color: #fff;
  padding: 12px 20px;
  z-index: 9999;
  border-radius: 0 0 var(--radio-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.contenedor {
  width: 100%;
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 0 20px;
}
.seccion { padding: 64px 0; }
.seccion--gris { background: var(--color-fondo-secundario); }
.seccion-encabezado { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.seccion-encabezado p { color: var(--color-texto-secundario); font-size: 1.05rem; }
.titulo-linea { display: inline-block; position: relative; }
.titulo-linea::after {
  content: ""; display: block; width: 64px; height: 4px; margin: 14px auto 0;
  background: linear-gradient(90deg, var(--color-verde), var(--color-azul));
  border-radius: 4px;
}
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid-productos { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.marca-onco { color: var(--color-azul); }
.marca-care { color: var(--color-verde); }
.barra-superior {
  background: var(--color-azul-oscuro);
  color: #dbe7f7;
  font-size: .85rem;
}
.barra-superior a { color: #fff; }
.barra-superior .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 40px; flex-wrap: wrap;
}
.barra-superior__texto { display: flex; align-items: center; gap: 8px; }
.barra-superior__datos { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.barra-superior__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.barra-superior__item svg { width: 15px; height: 15px; flex-shrink: 0; }
.solo-movil { display: none; }
.encabezado {
  position: sticky; top: 0; z-index: 600;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-borde);
  transition: box-shadow var(--transicion);
}
.encabezado.con-sombra { box-shadow: var(--sombra-sm); }
.encabezado__fila {
  display: flex; align-items: center; gap: 22px;
  min-height: var(--header-altura);
}
.marca {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0; text-decoration: none;
}
.marca__logo { height: 46px; width: auto; }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nombre { font-family: var(--font-titulos); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
.marca__firma { font-size: .72rem; color: var(--color-texto-secundario); font-weight: 500; margin-top: 2px; }
.buscador { position: relative; flex: 1; max-width: 560px; }
.buscador__input {
  width: 100%; height: 48px;
  padding: 0 48px 0 46px;
  border: 1.5px solid var(--color-borde);
  border-radius: 999px;
  font-family: var(--font-texto); font-size: .95rem;
  background: var(--color-fondo-secundario);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.buscador__input:focus {
  outline: none; border-color: var(--color-azul);
  background: #fff; box-shadow: 0 0 0 4px var(--color-azul-claro);
}
.buscador__icono {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--color-texto-secundario); pointer-events: none;
}
.buscador__limpiar {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--color-texto-secundario); display: none; border-radius: 50%;
}
.buscador__limpiar.visible { display: inline-flex; }
.buscador__resultados {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--color-borde);
  border-radius: var(--radio); box-shadow: var(--sombra-lg);
  max-height: 70vh; overflow-y: auto; z-index: 700; display: none;
}
.buscador__resultados.visible { display: block; }
.resultado-item {
  display: flex; gap: 12px; padding: 12px 16px; align-items: center;
  border-bottom: 1px solid var(--color-borde); cursor: pointer;
  transition: background var(--transicion); text-decoration: none; color: inherit;
}
.resultado-item:last-child { border-bottom: none; }
.resultado-item:hover, .resultado-item.activo { background: var(--color-azul-claro); }
.resultado-item__img {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radio-sm);
  object-fit: contain; background: var(--color-fondo-secundario); border: 1px solid var(--color-borde);
}
/* Las tres líneas del resultado (nombre, datos, disponibilidad) eran <span>
   en flujo en línea: se pegaban entre sí ("ENDOXANCiclofosfamida", "50
   grageas● Disponible"). Ahora es una columna con separación explícita. */
.resultado-item__info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.resultado-item__nombre { display: block; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.resultado-item__meta {
  display: block; font-size: .8rem; line-height: 1.4;
  color: var(--color-texto-secundario);
}
.resultado-item__info .disponibilidad { margin-top: 2px; font-size: .78rem; }
.buscador__vacio { padding: 20px 16px; text-align: center; }
.buscador__vacio p { color: var(--color-texto-secundario); margin-bottom: 12px; }
.encabezado__acciones { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icono-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--color-borde); background: #fff; color: var(--color-azul);
  cursor: pointer; transition: var(--transicion);
}
.icono-btn:hover { border-color: var(--color-azul); background: var(--color-azul-claro); }
.icono-btn svg { width: 22px; height: 22px; }
.menu-toggle { display: none; }
.nav-principal { border-top: 1px solid var(--color-borde); background: #fff; }
.nav-lista { display: flex; align-items: center; gap: 4px; }
.nav-lista > li { position: relative; }
.nav-enlace {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 16px; font-weight: 600; font-size: .95rem;
  color: var(--color-texto); border-radius: var(--radio-sm);
  transition: var(--transicion);
}
.nav-enlace:hover, .nav-enlace[aria-expanded="true"] { color: var(--color-azul); background: var(--color-azul-claro); }
.nav-enlace--activo { color: var(--color-azul); }
.nav-enlace--activo::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px;
  height: 3px; background: var(--color-verde); border-radius: 3px;
}
.nav-enlace .chevron { width: 16px; height: 16px; transition: transform var(--transicion); }
.nav-enlace[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.megamenu {
  position: absolute; top: calc(100% + 1px); left: 0;
  width: min(880px, 92vw);
  background: #fff; border: 1px solid var(--color-borde);
  border-radius: var(--radio); box-shadow: var(--sombra-lg);
  padding: 24px; z-index: 650;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: var(--transicion);
}
.megamenu.abierto { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 24px; }
.megamenu__col h4 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-azul); margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.megamenu__col h4 svg { width: 18px; height: 18px; }
.megamenu__col a {
  display: block; padding: 6px 8px; font-size: .88rem; color: var(--color-texto-secundario);
  border-radius: var(--radio-sm); transition: var(--transicion);
}
.megamenu__col a:hover { background: var(--color-verde-claro); color: var(--color-verde-oscuro); }
.megamenu__pie {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-borde);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.overlay {
  position: fixed; inset: 0; background: rgba(18, 58, 120, .45);
  opacity: 0; visibility: hidden; transition: var(--transicion); z-index: 800;
}
.overlay.visible { opacity: 1; visibility: visible; }
.menu-movil {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
  background: #fff; z-index: 900; transform: translateX(100%);
  transition: transform var(--transicion); overflow-y: auto;
  box-shadow: var(--sombra-lg); display: flex; flex-direction: column;
}
.menu-movil.abierto { transform: translateX(0); }
.menu-movil__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--color-borde);
}
.menu-movil__cabecera img { height: 40px; }
.menu-movil__cerrar {
  background: none; border: none; cursor: pointer; padding: 8px;
  color: var(--color-texto); border-radius: 50%;
}
.menu-movil__cerrar svg { width: 26px; height: 26px; }
.menu-movil__nav { padding: 8px 0; }
.menu-movil__nav a, .acordeon-movil__btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 22px; font-size: 1rem; font-weight: 600;
  color: var(--color-texto); background: none; border: none; cursor: pointer;
  text-align: left; font-family: var(--font-texto);
}
.menu-movil__nav a:hover, .acordeon-movil__btn:hover { background: var(--color-fondo-secundario); }
.acordeon-movil__btn svg { width: 18px; height: 18px; transition: transform var(--transicion); }
.acordeon-movil__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.acordeon-movil__panel { display: none; background: var(--color-fondo-secundario); padding: 4px 0 8px; }
.acordeon-movil__panel.abierto { display: block; }
.acordeon-movil__panel a { padding: 10px 34px; font-weight: 500; font-size: .92rem; color: var(--color-texto-secundario); }
.menu-movil__pie { margin-top: auto; padding: 20px; border-top: 1px solid var(--color-borde); }
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--color-azul-claro) 0%, var(--color-verde-claro) 100%);
}
.hero__grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
  padding: 64px 0;
}
.hero__contenido { animation: fadeInUp .6s ease both; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--color-azul); font-weight: 600; font-size: .85rem;
  padding: 7px 16px; border-radius: 999px; box-shadow: var(--sombra-sm); margin-bottom: 20px;
}
.hero__badge svg { width: 16px; height: 16px; color: var(--color-verde); }
.hero h1 { margin-bottom: 18px; }
.hero h1 .destacado { color: var(--color-azul); }
.hero__texto { font-size: 1.1rem; color: var(--color-texto-secundario); max-width: 540px; margin-bottom: 28px; }
.hero__botones { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.hero__apoyo {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .92rem; color: var(--color-texto-secundario); max-width: 480px;
}
.hero__apoyo svg { width: 20px; height: 20px; color: var(--color-verde); flex-shrink: 0; margin-top: 2px; }
.hero__imagen {
  position: relative; border-radius: var(--radio-lg); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--sombra-lg);
  animation: fadeIn .8s ease both;
}
.hero__imagen img { width: 100%; height: 100%; object-fit: cover; }
.hero__imagen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(18,58,120,.18), transparent 60%);
}
.tira-confianza {
  background: #fff; border-top: 1px solid var(--color-borde); border-bottom: 1px solid var(--color-borde);
}
.tira-confianza .contenedor {
  display: flex; justify-content: space-around; gap: 20px; flex-wrap: wrap;
  padding: 20px 0; text-align: center;
}
.tira-confianza__item { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; }
.tira-confianza__item svg { width: 24px; height: 24px; color: var(--color-verde); }
.acompanamiento__grid {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center;
}
.acompanamiento__imagen {
  border-radius: var(--radio-lg); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--sombra);
}
.acompanamiento__imagen img { width: 100%; height: 100%; object-fit: cover; }
.acompanamiento h2 { margin-bottom: 16px; }
.acompanamiento p { color: var(--color-texto-secundario); font-size: 1.05rem; margin-bottom: 24px; }
.acompanamiento__botones { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-institucional {
  background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-azul-oscuro) 100%);
  color: #fff; border-radius: var(--radio-lg); padding: 48px;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
}
.cta-institucional h2 { color: #fff; }
.cta-institucional p { color: #cfe0f6; margin-bottom: 0; max-width: 560px; }
.cta-institucional__botones { display: flex; gap: 14px; flex-wrap: wrap; }
.footer { background: #0f2747; color: #b9c7dc; padding: 56px 0 0; font-size: .92rem; }
.footer a { color: #cdd9ec; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.footer__col h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.footer__col li { margin-bottom: 10px; }
/* reemplazado abajo */
.footer__logo { background: #fff; padding: 8px 12px; border-radius: var(--radio-sm); display: inline-block; margin-bottom: 16px; max-width: 100%; }
.footer__logo img { height: 40px; width: auto; max-width: 100%; display: block; }
.footer__desc { max-width: 300px; margin-bottom: 18px; }
.footer__redes { display: flex; gap: 10px; }
.footer__redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08);
  transition: var(--transicion);
}
.footer__redes a:hover { background: var(--color-verde); }
.footer__redes svg { width: 20px; height: 20px; }
.footer__contacto-item { display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start; }
.footer__contacto-item svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--color-verde); }
.footer__legal {
  margin-top: 40px; border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 0; text-align: center; font-size: .85rem; color: #8da3c2;
}
.footer__legal strong { color: #fff; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.pagina-hero {
  background: linear-gradient(135deg, var(--color-azul-claro), var(--color-verde-claro));
  padding: 40px 0;
}
.pagina-hero h1 { margin-bottom: 6px; }
.pagina-hero p { color: var(--color-texto-secundario); margin: 0; max-width: 680px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; color: var(--color-texto-secundario); margin-bottom: 12px; }
.breadcrumbs a { color: var(--color-texto-secundario); }
.breadcrumbs a:hover { color: var(--color-azul); }
.breadcrumbs span[aria-current] { color: var(--color-texto); font-weight: 600; }
.breadcrumbs svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .5; vertical-align: middle; }
.contenido-legal { max-width: 820px; margin: 0 auto; }
.contenido-legal h2 { margin-top: 36px; }
.contenido-legal h3 { margin-top: 24px; }
.contenido-legal ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.contenido-legal li { margin-bottom: 8px; }
/* ===== components.css ===== */
/* =========================================================================
   OncoCare by Care Solutions — components.css
   Componentes reutilizables: botones, badges, tarjetas, formularios,
   filtros, acordeones, bloques de alerta, placeholders, paginación,
   botón flotante de WhatsApp y botón "volver arriba".
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px; font-family: var(--font-texto);
  font-weight: 600; font-size: .95rem; cursor: pointer; border: 2px solid transparent;
  transition: var(--transicion); text-decoration: none; line-height: 1; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn--azul { background: var(--color-azul); color: #fff; }
.btn--azul:hover { background: var(--color-azul-oscuro); color: #fff; box-shadow: var(--sombra); }
.btn--verde { background: var(--color-verde); color: #fff; }
.btn--verde:hover { background: var(--color-verde-oscuro); color: #fff; box-shadow: var(--sombra); }
.btn--whatsapp { background: #25D366; color: #fff; }
.btn--whatsapp:hover { background: #1da851; color: #fff; box-shadow: var(--sombra); }
.btn--contorno { background: #fff; color: var(--color-azul); border-color: var(--color-azul); }
.btn--contorno:hover { background: var(--color-azul-claro); color: var(--color-azul-oscuro); }
.btn--claro { background: #fff; color: var(--color-azul); }
.btn--claro:hover { background: var(--color-azul-claro); }
.btn--bloque { width: 100%; }
.btn--sm { padding: 9px 16px; font-size: .85rem; }
.btn--lg { padding: 15px 30px; font-size: 1.05rem; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  line-height: 1.4; white-space: nowrap;
}
.badge svg { width: 13px; height: 13px; }
.badge--nuevo { background: var(--color-verde); color: #fff; }
.badge--destacado { background: var(--color-azul-claro); color: var(--color-azul); }
.badge--frio { background: #E0F2FE; color: #0369A1; }
.badge--receta { background: var(--color-fondo-secundario); color: var(--color-texto-secundario); }
.disponibilidad { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; }
.disponibilidad::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.disponibilidad--disponible { color: var(--color-disponible); }
.disponibilidad--disponible::before { background: var(--color-disponible); }
.disponibilidad--limitada { color: #B45309; }
.disponibilidad--limitada::before { background: #D97706; }
.disponibilidad--pedido { color: var(--color-azul); }
.disponibilidad--pedido::before { background: var(--color-azul); }
.disponibilidad--consultar { color: var(--color-texto-secundario); }
.disponibilidad--consultar::before { background: var(--color-texto-secundario); }
.disponibilidad--proximamente { color: #7C3AED; }
.disponibilidad--proximamente::before { background: #7C3AED; }
.placeholder-img {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--color-fondo-secundario);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(100,116,139,.04) 12px, rgba(100,116,139,.04) 24px);
  color: var(--color-texto-secundario); border: 1px dashed var(--color-borde);
  width: 100%; height: 100%; padding: 12px; text-align: center;
}
.placeholder-img svg { width: 38px; height: 38px; opacity: .5; }
.placeholder-img span { font-size: .7rem; word-break: break-all; opacity: .8; }
.beneficio {
  background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio);
  padding: 28px 24px; transition: var(--transicion);
}
.beneficio:hover { transform: translateY(-5px); box-shadow: var(--sombra); border-color: transparent; }
.beneficio__icono {
  width: 56px; height: 56px; border-radius: var(--radio); display: flex;
  align-items: center; justify-content: center; margin-bottom: 16px;
  background: var(--color-verde-claro); color: var(--color-verde-oscuro);
}
.beneficio:nth-child(even) .beneficio__icono { background: var(--color-azul-claro); color: var(--color-azul); }
.beneficio__icono svg { width: 28px; height: 28px; }
.beneficio h3 { font-size: 1.15rem; margin-bottom: 8px; }
.beneficio p { color: var(--color-texto-secundario); font-size: .92rem; margin: 0; }
.producto-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--color-borde); border-radius: var(--radio); overflow: hidden;
  transition: var(--transicion); position: relative;
}
.producto-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); border-color: transparent; }
.producto-card__media {
  /* Fondo BLANCO, no gris: las fotos de producto vienen sobre blanco, y un
     marco gris detrás de una imagen blanca dibuja un "recuadro dentro del
     recuadro". Con el marco blanco solo se ve el medicamento. */
  position: relative; aspect-ratio: 4/3; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.producto-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.producto-card__etiquetas {
  position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2;
}
.producto-card__frio {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; background: #E0F2FE; color: #0369A1;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-sm);
}
.producto-card__frio svg { width: 18px; height: 18px; }
.producto-card__cuerpo { padding: 16px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.producto-card__categoria { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-azul); font-weight: 600; }
.producto-card__nombre { font-family: var(--font-titulos); font-weight: 600; font-size: 1.02rem; color: var(--color-texto); margin: 2px 0; }
.producto-card__activo { font-size: .85rem; color: var(--color-texto); font-weight: 500; }
.producto-card__meta { font-size: .82rem; color: var(--color-texto-secundario); }
.producto-card__lab { font-size: .78rem; color: var(--color-texto-secundario); margin-top: 2px; }
.producto-card__disp { margin: 10px 0; }
.producto-card__acciones { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.categoria-card {
  position: relative; border-radius: var(--radio); overflow: hidden;
  background: #fff; border: 1px solid var(--color-borde); transition: var(--transicion);
  display: flex; flex-direction: column;
}
.categoria-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); border-color: transparent; }
.categoria-card__media { aspect-ratio: 16/10; background: var(--color-azul-claro); position: relative; }
.categoria-card__media img { width: 100%; height: 100%; object-fit: cover; }
.categoria-card__icono {
  position: absolute; bottom: -24px; left: 20px; width: 52px; height: 52px;
  border-radius: var(--radio-sm); background: #fff; box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: center; color: var(--color-azul); z-index: 2;
}
.categoria-card__icono svg { width: 28px; height: 28px; }
.categoria-card__cuerpo { padding: 32px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.categoria-card__cuerpo h3 { font-size: 1.1rem; margin-bottom: 6px; }
.categoria-card__cuerpo p { font-size: .88rem; color: var(--color-texto-secundario); margin-bottom: 16px; flex: 1; }
.categoria-bloque { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 24px; margin-bottom: 20px; }
.categoria-bloque__cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.categoria-bloque__icono { width: 48px; height: 48px; border-radius: var(--radio-sm); background: var(--color-verde-claro); color: var(--color-verde-oscuro); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.categoria-bloque__icono svg { width: 26px; height: 26px; }
.categoria-bloque__subs { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; padding: 7px 14px; background: var(--color-fondo-secundario);
  border: 1px solid var(--color-borde); border-radius: 999px; font-size: .85rem;
  color: var(--color-texto); transition: var(--transicion);
}
.chip:hover { background: var(--color-azul-claro); border-color: var(--color-azul); color: var(--color-azul); }
.carrusel { display: grid; gap: 24px; }
.carrusel-controles { display: none; }
.formulario { display: grid; gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--full { grid-column: 1 / -1; }
.campo label { font-weight: 600; font-size: .9rem; }
.campo label .req { color: #DC2626; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-sm); font-family: var(--font-texto); font-size: .95rem;
  background: #fff; color: var(--color-texto); transition: var(--transicion);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--color-azul); box-shadow: 0 0 0 4px var(--color-azul-claro);
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
  border-color: #DC2626; box-shadow: 0 0 0 4px #FEE2E2;
}
.campo__error { color: #DC2626; font-size: .8rem; display: none; }
.campo__error.visible { display: block; }
.campo__ayuda { font-size: .78rem; color: var(--color-texto-secundario); }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; }
.checkbox input { width: auto; margin-top: 3px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-exito {
  display: none; align-items: center; gap: 12px; padding: 18px 20px;
  background: var(--color-verde-claro); border: 1px solid var(--color-verde);
  border-radius: var(--radio); color: var(--color-verde-oscuro); font-weight: 500;
}
.form-exito.visible { display: flex; }
.form-exito svg { width: 26px; height: 26px; flex-shrink: 0; }
.form-caja { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); padding: 32px; box-shadow: var(--sombra-sm); }
.alerta {
  display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--radio);
  background: var(--color-alerta-suave); border: 1px solid #F3E2B3; color: #6B5618;
  font-size: .9rem; line-height: 1.55;
}
.alerta svg { width: 22px; height: 22px; flex-shrink: 0; color: #B7860B; margin-top: 1px; }
.alerta strong { color: #5a4612; }
.alerta--info { background: var(--color-azul-claro); border-color: #C5D8F0; color: var(--color-azul-oscuro); }
.alerta--info svg { color: var(--color-azul); }
.layout-productos { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.panel-filtros {
  background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio);
  padding: 20px; position: sticky; top: calc(var(--header-altura) + 16px);
}
.panel-filtros__titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-filtros__titulo h3 { margin: 0; font-size: 1.05rem; }
.filtro-grupo { border-top: 1px solid var(--color-borde); padding: 14px 0; }
.filtro-grupo:first-of-type { border-top: none; }
.filtro-grupo > button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; font-family: var(--font-titulos);
  font-weight: 600; font-size: .92rem; color: var(--color-texto); padding: 4px 0;
}
.filtro-grupo > button svg { width: 16px; height: 16px; transition: transform var(--transicion); }
.filtro-grupo > button[aria-expanded="false"] svg { transform: rotate(-90deg); }
.filtro-opciones { padding-top: 12px; display: flex; flex-direction: column; gap: 9px; max-height: 220px; overflow-y: auto; }
.filtro-opciones.oculto { display: none; }
.filtro-check { display: flex; align-items: center; gap: 9px; font-size: .88rem; cursor: pointer; }
.filtro-check input { width: 16px; height: 16px; accent-color: var(--color-azul); }
.barra-resultados {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.barra-resultados__contador { font-size: .92rem; color: var(--color-texto-secundario); }
.barra-resultados__contador strong { color: var(--color-texto); }
.barra-resultados__ordenar { display: flex; align-items: center; gap: 10px; }
.barra-resultados__ordenar select { padding: 9px 14px; border: 1.5px solid var(--color-borde); border-radius: var(--radio-sm); font-family: var(--font-texto); }
.btn-filtros-movil { display: none; }
.filtros-activos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filtro-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px;
  background: var(--color-azul-claro); color: var(--color-azul); border-radius: 999px;
  font-size: .82rem; font-weight: 500;
}
.filtro-tag button { background: none; border: none; cursor: pointer; color: inherit; display: inline-flex; padding: 2px; border-radius: 50%; }
.filtro-tag button svg { width: 14px; height: 14px; }
.estado-vacio { text-align: center; padding: 56px 20px; }
.estado-vacio__icono { width: 72px; height: 72px; margin: 0 auto 18px; color: var(--color-texto-secundario); opacity: .5; }
.estado-vacio__icono svg { width: 100%; height: 100%; }
.estado-vacio h3 { margin-bottom: 8px; }
.estado-vacio p { color: var(--color-texto-secundario); margin-bottom: 22px; }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.paginacion button {
  min-width: 42px; height: 42px; padding: 0 12px; border: 1.5px solid var(--color-borde);
  background: #fff; border-radius: var(--radio-sm); cursor: pointer; font-family: var(--font-texto);
  font-weight: 600; color: var(--color-texto); transition: var(--transicion);
}
.paginacion button:hover:not(:disabled) { border-color: var(--color-azul); color: var(--color-azul); }
.paginacion button.activo { background: var(--color-azul); color: #fff; border-color: var(--color-azul); }
.paginacion button:disabled { opacity: .4; cursor: not-allowed; }
.detalle-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: start; }
.detalle-galeria__principal {
  aspect-ratio: 1/1; background: #fff; border: 1px solid var(--color-borde);
  border-radius: var(--radio); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.detalle-galeria__principal img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.detalle-galeria__miniaturas { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.detalle-galeria__miniaturas button {
  width: 72px; height: 72px; border: 1.5px solid var(--color-borde); border-radius: var(--radio-sm);
  background: #fff; cursor: pointer; overflow: hidden; padding: 4px;
}
.detalle-galeria__miniaturas button.activa { border-color: var(--color-azul); }
.detalle-galeria__miniaturas img { width: 100%; height: 100%; object-fit: contain; }
.detalle-info h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 8px; }
.detalle-info__etiquetas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.detalle-info__disp { margin-bottom: 18px; }
.ficha { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 22px; }
.ficha th, .ficha td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--color-borde); font-size: .92rem; vertical-align: top; }
.ficha th { color: var(--color-texto-secundario); font-weight: 500; width: 42%; }
.ficha td { font-weight: 600; overflow-wrap: anywhere; }
.detalle-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.detalle-descripcion { margin: 24px 0; }
.detalle-descripcion h3 { font-size: 1.1rem; margin-bottom: 8px; }
.detalle-descripcion p { color: var(--color-texto-secundario); }
.testimonio {
  background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio);
  padding: 28px 24px; position: relative;
}
.testimonio__comillas { font-family: Georgia, serif; font-size: 3.5rem; line-height: 1; color: var(--color-verde-claro); position: absolute; top: 14px; right: 20px; }
.testimonio p { font-style: italic; color: var(--color-texto); margin-bottom: 18px; position: relative; z-index: 1; }
.testimonio__autor { display: flex; align-items: center; gap: 12px; }
.testimonio__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-azul-claro); color: var(--color-azul); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.testimonio__nombre { font-weight: 600; font-size: .92rem; }
.testimonio__rol { font-size: .8rem; color: var(--color-texto-secundario); }
.acordeon { max-width: 820px; margin: 0 auto; }
.acordeon__item { border: 1px solid var(--color-borde); border-radius: var(--radio); margin-bottom: 12px; overflow: hidden; background: #fff; }
.acordeon__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 18px 22px; background: none; border: none; cursor: pointer;
  font-family: var(--font-titulos); font-weight: 600; font-size: 1.02rem; color: var(--color-texto);
  text-align: left; transition: var(--transicion);
}
.acordeon__btn:hover { background: var(--color-fondo-secundario); }
.acordeon__btn svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-azul); transition: transform var(--transicion); }
.acordeon__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.acordeon__panel { max-height: 0; overflow: hidden; transition: max-height var(--transicion); }
.acordeon__panel-inner { padding: 0 22px 20px; color: var(--color-texto-secundario); }
.bloque-categoria__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.bloque-categoria__cabecera h2 { margin: 0; }
.bloque-categoria__cabecera p { color: var(--color-texto-secundario); margin: 4px 0 0; font-size: .95rem; }
.whatsapp-flotante {
  position: fixed; bottom: 24px; right: 24px; z-index: 500;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff; padding: 14px 20px 14px 16px;
  border-radius: 999px; box-shadow: 0 8px 24px rgba(37,211,102,.45);
  font-weight: 600; text-decoration: none; transition: var(--transicion);
}
.whatsapp-flotante:hover { background: #1da851; color: #fff; transform: translateY(-2px); }
.whatsapp-flotante svg { width: 28px; height: 28px; }
.whatsapp-flotante__texto { font-size: .92rem; }
.volver-arriba {
  position: fixed; bottom: 96px; right: 28px; z-index: 490;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-azul); color: #fff; box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transicion);
}
.volver-arriba.visible { opacity: 1; visibility: visible; transform: none; }
.volver-arriba svg { width: 22px; height: 22px; }
.mapa-embed { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--color-borde); aspect-ratio: 16/10; }
.mapa-embed iframe { width: 100%; height: 100%; border: 0; }
.contacto-tarjeta { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 24px; }
.contacto-tarjeta__item { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.contacto-tarjeta__item svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-verde); margin-top: 2px; }
.contacto-tarjeta__item strong { display: block; font-size: .92rem; }
.contacto-tarjeta__item span { color: var(--color-texto-secundario); font-size: .9rem; }
.skeleton { background: linear-gradient(90deg, #f0f3f8 25%, #e6ebf2 37%, #f0f3f8 63%); background-size: 400% 100%; animation: cargando 1.4s ease infinite; border-radius: var(--radio); }
@keyframes cargando { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* ===== responsive.css ===== */
/* =========================================================================
   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).
   ========================================================================= */
@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-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; }
}
@media (max-width: 900px) {
  .nav-principal { display: none; }       
  .menu-toggle { display: inline-flex; }   
  .encabezado__acciones .icono-btn--solo-escritorio { display: none; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .seccion { padding: 48px 0; }
  .barra-superior__texto { display: none; }
  .solo-movil { display: inline-flex; }
  .barra-superior .contenedor { justify-content: center; }
  .barra-superior__datos { gap: 14px; justify-content: center; }
  .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; }
  .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; }
}
@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; }   
  .volver-arriba { bottom: 84px; right: 18px; }
  .barra-resultados { flex-direction: column; align-items: stretch; }
  .producto-card__cuerpo { padding: 12px; }
  .producto-card__nombre { font-size: .95rem; }
}
@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; }
}
@media print {
  .barra-superior, .nav-principal, .whatsapp-flotante, .volver-arriba,
  .menu-toggle, .encabezado__acciones, .footer { display: none !important; }
  body { color: #000; }
}
@media (max-width: 900px) {
  .oculto-tablet { display: none !important; }
}
@media (max-width: 768px) {
  .oculto-movil { display: none !important; }
}
/* ===== movil.css ===== */
/* =========================================================================
   OncoCare — movil.css
   -------------------------------------------------------------------------
   CAPA EXCLUSIVA PARA MÓVIL.
   Regla de oro de este archivo: TODO va dentro de una media query.
   Nada aquí se aplica en escritorio, así que el diseño de computadora
   queda exactamente igual que antes.
   Se carga DESPUÉS de responsive.css, por lo que sus reglas mandan.
   Índice:
   1. Encabezado y buscador siempre a la mano
   2. Resultados del buscador y estado "no encontrado"
   3. Accesos rápidos (chips de lo más buscado)
   4. Hero compacto
   5. Tarjetas de producto en formato lista
   6. Barra de acción fija en la ficha de producto
   7. Formulario de solicitud abreviado
   8. Áreas táctiles y detalles finos
   ========================================================================= */
/* =========================================================================
   1. ENCABEZADO Y BUSCADOR SIEMPRE A LA MANO   (hasta 900 px)
   ========================================================================= */
@media (max-width: 900px) {
  .encabezado__fila {
    padding: 10px 0 !important;
    gap: 10px !important;
    row-gap: 10px;
  }
  .marca__logo { height: 34px; width: auto; transition: height .2s ease; }
  .buscador {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }
  .buscador__input {
    height: 50px;
    font-size: 16px;
    padding: 0 46px 0 44px;
    border-width: 2px;
    background: #fff;
  }
  .buscador__input::placeholder { font-size: 15px; }
  .encabezado--compacto .marca__logo { height: 26px; }
  .encabezado--compacto .encabezado__fila { padding: 6px 0 !important; }
  .barra-superior { padding: 6px 0; font-size: .8rem; }
}
/* =========================================================================
   2. RESULTADOS DEL BUSCADOR Y ESTADO "NO ENCONTRADO"
   ========================================================================= */
@media (max-width: 900px) {
  .buscador__resultados {
    max-height: calc(100vh - 190px);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 30, 60, .22);
  }
  .resultado-item { padding: 12px 14px; gap: 12px; align-items: center; }
  .resultado-item__img { width: 52px; height: 52px; flex: 0 0 52px; }
  .resultado-item__nombre { font-size: 1rem; }
  .resultado-item__meta { font-size: .82rem; line-height: 1.35; }
}
.buscador__vacio { padding: 18px 16px 16px; text-align: left; }
.buscador__vacio-titulo {
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 6px;
  color: var(--color-texto);
}
.buscador__vacio-texto {
  font-size: .88rem;
  color: var(--color-texto-secundario);
  margin: 0 0 14px;
  line-height: 1.45;
}
.buscador__vacio-texto strong { color: var(--color-texto); }
.buscador__vacio .btn--whatsapp { justify-content: center; }
.buscador__vacio-alt {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: .84rem;
  color: var(--color-texto-secundario);
  text-decoration: underline;
}
/* =========================================================================
   3. ACCESOS RÁPIDOS — chips de lo más buscado (solo móvil, solo inicio)
   ========================================================================= */
.accesos-rapidos { display: none; }
@media (max-width: 900px) {
  .accesos-rapidos {
    display: block;
    padding: 14px 0 4px;
    background: var(--color-fondo-secundario);
    border-bottom: 1px solid var(--color-borde);
  }
  .accesos-rapidos__titulo {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--color-texto-secundario);
    margin: 0 0 10px;
  }
  .accesos-rapidos__fila {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .accesos-rapidos__fila::-webkit-scrollbar { display: none; }
  .chip-acceso {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid var(--color-borde);
    color: var(--color-texto);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .chip-acceso:active { background: var(--color-azul-claro); border-color: var(--color-azul); }
  .chip-acceso--todos { border-style: dashed; color: var(--color-azul); font-weight: 600; }
}
/* =========================================================================
   4. HERO COMPACTO
   El hero de escritorio es una portada. En móvil es un obstáculo entre
   la persona y el buscador, así que se reduce a lo esencial.
   ========================================================================= */
@media (max-width: 768px) {
  .hero__grid { padding: 24px 0 28px !important; gap: 20px !important; }
  .hero h1 { font-size: 1.55rem; line-height: 1.22; }
  .hero__texto { font-size: .95rem; line-height: 1.5; }
  .hero__badge { font-size: .76rem; padding: 6px 12px; }
  .hero__imagen { aspect-ratio: 16/8 !important; max-height: 170px !important; }
  .hero__botones { flex-direction: column; gap: 10px; }
  .hero__botones .btn { width: 100%; justify-content: center; min-height: 50px; }
  .hero__apoyo { font-size: .84rem; }
  .seccion { padding: 36px 0 !important; }
}
/* =========================================================================
   5. TARJETAS DE PRODUCTO EN FORMATO LISTA
   Dos tarjetas altas por pantalla obligan a un scroll enorme.
   En formato lista caben 5 o 6 y se comparan de un vistazo.
   ========================================================================= */
@media (max-width: 600px) {
  .grid-productos { grid-template-columns: 1fr !important; gap: 10px !important; }
  .producto-card {
    flex-direction: row;
    align-items: stretch;
    border-radius: 14px;
  }
  .producto-card:hover { transform: none; }
  .producto-card__media {
    flex: 0 0 104px;
    width: 104px;
    aspect-ratio: auto !important;
    border-right: 1px solid var(--color-borde);
  }
  .producto-card__media img { padding: 8px; }
  .producto-card__etiquetas { top: 6px; left: 6px; transform: scale(.82); transform-origin: top left; }
  .producto-card__frio { width: 24px; height: 24px; top: 6px; right: 6px; }
  .producto-card__frio svg { width: 14px; height: 14px; }
  .producto-card__cuerpo {
    padding: 11px 13px !important;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .producto-card__categoria { font-size: .68rem; }
  .producto-card__nombre { font-size: 1rem !important; margin: 0; line-height: 1.25; }
  .producto-card__activo { font-size: .84rem; }
  .producto-card__meta { font-size: .78rem; }
  .producto-card__lab { display: none; }          
  .producto-card__disp { align-self: flex-start; margin: 4px 0 0; }
  .producto-card__acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 9px;
  }
  .producto-card__acciones .btn { min-height: 40px; font-size: .82rem; padding: 8px 6px; }
  .carrusel--movil { grid-auto-columns: 88% !important; }
  .carrusel--movil .producto-card__media { flex-basis: 96px; width: 96px; }
}
/* =========================================================================
   6. BARRA DE ACCIÓN FIJA EN LA FICHA DE PRODUCTO
   El pulgar vive en la parte baja de la pantalla. Ahí va el botón que
   cierra la venta, con el nombre del medicamento adentro.
   ========================================================================= */
.barra-accion-movil { display: none; }
@media (max-width: 900px) {
  .barra-accion-movil {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 620;
    align-items: center;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-borde);
    box-shadow: 0 -6px 22px rgba(15, 30, 60, .10);
  }
  .barra-accion-movil__info { flex: 1; min-width: 0; }
  .barra-accion-movil__nombre {
    display: block;
    font-weight: 600;
    font-size: .88rem;
    color: var(--color-texto);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .barra-accion-movil__meta {
    display: block;
    font-size: .74rem;
    color: var(--color-texto-secundario);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .barra-accion-movil .btn {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 10px 18px;
    font-size: .9rem;
  }
  body.con-barra-accion { padding-bottom: 78px; }
  body.con-barra-accion .whatsapp-flotante { display: none; }
  body.con-barra-accion .volver-arriba { bottom: 92px; }
}
/* =========================================================================
   7. FORMULARIO DE SOLICITUD ABREVIADO
   13 campos en un teléfono son un muro. Se muestran los 4 imprescindibles
   y el resto queda detrás de un botón, para quien quiera dar más detalle.
   ========================================================================= */
@media (max-width: 768px) {
  form:not(.form--ampliado) .campo--opcional { display: none; }
  .btn-mas-datos {
    width: 100%;
    margin-top: 14px;
    min-height: 46px;
    background: none;
    border: 1.5px dashed var(--color-borde);
    border-radius: 10px;
    color: var(--color-azul);
    font-family: var(--font-texto);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
  }
  .form--ampliado .btn-mas-datos { display: none; }
  .form-caja { padding: 18px 16px !important; }
  .campo input, .campo select, .campo textarea { font-size: 16px !important; min-height: 46px; }
  .campo textarea { min-height: 90px; }
  .checkbox { font-size: .86rem; line-height: 1.45; }
  .checkbox input { min-width: 22px; min-height: 22px; }
}
/* =========================================================================
   8. ÁREAS TÁCTILES Y DETALLES FINOS
   ========================================================================= */
@media (max-width: 900px) {
  .icono-btn, .menu-toggle { min-width: 44px; min-height: 44px; }
  .menu-movil__nav a { padding: 15px 22px; font-size: 1rem; }
  .acordeon__btn { min-height: 52px; padding: 14px 16px; }
  .footer__col ul a { display: inline-block; padding: 6px 0; }
  .barra-superior__item { min-height: 34px; display: inline-flex; align-items: center; }
  .whatsapp-flotante {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    padding: 12px 18px 12px 14px;
  }
  .whatsapp-flotante__texto { display: inline; font-size: .88rem; }
  .volver-arriba { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: 18px; }
  html, body { overflow-x: hidden; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 1.42rem; }
  .whatsapp-flotante__texto { display: none; }   
  .producto-card__media { flex: 0 0 92px !important; width: 92px !important; }
}


/* ===== Logotipo oficial de WhatsApp (imagen, no SVG) ===== */
.ico-wa { width: 1.15em; height: 1.15em; flex-shrink: 0; object-fit: contain; vertical-align: middle; }
.barra-superior__item .ico-wa { width: 15px; height: 15px; }
.icono-btn .ico-wa { width: 22px; height: 22px; }
.whatsapp-flotante .ico-wa { width: 28px; height: 28px; }
.btn .ico-wa { width: 20px; height: 20px; }
.btn--sm .ico-wa { width: 17px; height: 17px; }


/* =========================================================================
   Móvil: la ficha técnica pasa de tabla de 2 columnas a bloques apilados.
   En pantallas estrechas, dos columnas obligan a cortar el texto.
   ========================================================================= */
@media (max-width: 640px) {
  .ficha, .ficha tbody, .ficha tr, .ficha th, .ficha td { display: block; width: 100%; }
  .ficha tr { border-bottom: 1px solid var(--color-borde); padding: 10px 0; }
  .ficha th, .ficha td { border-bottom: 0; padding: 0; }
  .ficha th {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--color-texto-secundario); margin-bottom: 3px;
  }
  .ficha td { font-size: .98rem; line-height: 1.45; }

  /* que la barra fija inferior no tape el final del contenido */
  body { padding-bottom: 84px; }
  .ir-arriba, .whatsapp-flotante { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}


/* =========================================================================
   MÓVIL — 80 % del tráfico llega desde teléfono.
   Causa del desbordamiento: .btn tiene white-space:nowrap y las etiquetas
   largas empujaban el ancho de toda la página.
   ========================================================================= */
@media (max-width: 640px) {
  /* los botones envuelven en vez de ensanchar la página */
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .detalle-acciones { flex-direction: column; }
  .detalle-acciones .btn { width: 100%; }

  /* ficha técnica apilada: etiqueta arriba, valor abajo */
  .ficha, .ficha tbody, .ficha tr, .ficha th, .ficha td { display: block; width: 100%; }
  .ficha tr { border-bottom: 1px solid var(--color-borde); padding: 10px 0; }
  .ficha th, .ficha td { border-bottom: 0; padding: 0; }
  .ficha th {
    font-size: .76rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--color-texto-secundario); margin-bottom: 3px; font-weight: 600;
  }
  .ficha td { font-size: .98rem; line-height: 1.45; overflow-wrap: anywhere; }

  /* nada puede sobresalir del ancho de la pantalla */
  html, body { overflow-x: hidden; max-width: 100%; }
  .detalle-info, .detalle-grid, .contenedor { min-width: 0; }
  img, table, pre { max-width: 100%; }

  /* la barra fija inferior no debe tapar el final del contenido */
  body { padding-bottom: 88px; }
}

/* =========================================================================
   Tarjetas "Medicamentos más consultados" (portada)
   Usan las fotos reales del catálogo: no dependen de imágenes externas.
   ========================================================================= */
.card-top {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--color-borde); border-radius: var(--radio);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: var(--transicion);
}
.card-top:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); border-color: transparent; }
.card-top__media {
  aspect-ratio: 16/10; background: #fff; display: flex;
  align-items: center; justify-content: center; padding: 14px;
  border-bottom: 1px solid var(--color-borde);
}
.card-top__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.card-top__cuerpo { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.card-top__cuerpo h3 { font-size: 1.05rem; margin: 0; line-height: 1.25; }
.card-top__activo { font-size: .88rem; color: var(--color-texto-secundario); margin: 0; }
.card-top__disp { font-size: .82rem; color: var(--color-texto-secundario); margin: 6px 0 0; }
.card-top__disp.es-disponible { color: var(--color-verde-oscuro, #15803D); font-weight: 600; }
.card-top__disp.es-disponible::before { content: "\25CF"; margin-right: 6px; font-size: .7em; }

.sello {
  display: inline-block; align-self: flex-start; margin-bottom: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  letter-spacing: .01em;
}
.sello--original { background: var(--color-azul-claro, #E8F0FE); color: var(--color-azul, #1A4EA3); }
.sello--equiv    { background: var(--color-verde-claro, #E7F6EC); color: var(--color-verde-oscuro, #15803D); }

@media (max-width: 640px) {
  .card-top__media { aspect-ratio: 4/3; padding: 10px; }
  .card-top__cuerpo { padding: 14px 15px 16px; }
  .card-top__cuerpo h3 { font-size: 1rem; }
}


/* Pie de página en móvil: el logo no debe ocupar todo el ancho. */
@media (max-width: 640px) {
  .footer__logo { padding: 7px 11px; }
  .footer__logo img { height: 32px; width: auto; }
}

/* =========================================================================
   CORRECCIONES MÓVIL — carrusel y tarjetas de portada
   ========================================================================= */

/* El contenedor lleva .grid-productos (columnas explícitas) y .carrusel--movil
   (flujo por columnas). Al convivir, las tarjetas se estiraban a la altura de
   la más alta y dejaban un hueco enorme. Se anulan las columnas explícitas. */
@media (max-width: 900px) {
  .carrusel--movil {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    align-items: start;            /* cada tarjeta con su propia altura */
  }
  .carrusel--movil > .producto-card { height: auto; align-self: start; }
  .carrusel--movil .producto-card__media { align-self: stretch; }
}

/* Tarjetas "Medicamentos más consultados": en móvil, dos por fila.
   A una columna, el área de imagen ocupaba media pantalla. */
@media (max-width: 640px) {
  [data-mas-consultados] { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .card-top__media { aspect-ratio: 1/1; padding: 9px; }
  .card-top__cuerpo { padding: 11px 12px 14px; gap: 3px; }
  .card-top__cuerpo h3 { font-size: .93rem; }
  .card-top__activo { font-size: .77rem; }
  .card-top__disp { font-size: .74rem; margin-top: 4px; }
  .sello { font-size: .64rem; padding: 3px 8px; margin-bottom: 4px; }
}
@media (max-width: 380px) {
  [data-mas-consultados] { grid-template-columns: 1fr !important; }
  .card-top__media { aspect-ratio: 4/3; }
}