/* =========================================================
   CORRECCIÓN: fuente fantasma en las tarjetas de protocolos
   (sección "Portafolio de Sueroterapia IV" / .ac-card)
   .ac-card__title y .ac-card__vline span apuntaban a
   'Cormorant Garamond', que nunca se importó en <head> —
   caían en una serif genérica del sistema. Se corrige a la
   serif real de marca (Merriweather, ya cargada).
   No es un cambio de diseño: es la misma fuente que ya se
   usa en el resto del sitio para títulos.
   ========================================================= */
/* =========================================================
   CORRECCIÓN: apilado de marca (logo header + footer)
   .brand__text apilaba "Vital Med" y el eslogan con grid de
   una sola columna. Se cambia a flex-column, visualmente
   idéntico pero más robusto en más motores de renderizado.
   ========================================================= */
.brand__text {
  display: flex;
  flex-direction: column;
}

.ac-card__title,
.ac-card__vline span {
  font-family: 'Merriweather', serif;
}

/* Refuerzo: las pestañas de categoría (Wellness IV, Piel & Estética...)
   deben ir en fila en escritorio. Se refuerza explícitamente porque en
   algunos motores de render se veían apiladas a pesar de que las reglas
   base ya son flex-row. */
@media (min-width: 821px) {
  .tab-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .tab-btn { width: auto !important; }
}

/* El video/foto del hero se veía como una toma de producto plana,
   sin ninguna relación de color con la marca. Se añade un degradado
   sutil en la base (ancla visualmente la imagen) y un pequeño ajuste
   de color para que se sienta compuesta, no solo pegada. */
.hero-video { position: relative; }
.hero-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(185deg, rgba(13, 61, 82, 0.12) 0%, transparent 22%, transparent 62%, rgba(7, 45, 61, 0.38) 100%);
  pointer-events: none;
}
.hero-video__media { filter: saturate(1.08) contrast(1.03); }

/* El h1 del hero quedaba a 14ch de ancho máximo, lo que a su tamaño
   de fuente real (~3rem+) partía el titular en 4 líneas muy angostas.
   Se amplía para que respire en 2 líneas con quiebres más naturales. */
.hero__copy h1 { max-width: 22ch; }
@media (max-width: 640px) {
  .hero__copy h1 { max-width: 19ch; }
}


/* =========================================================
   DISEÑO ESPECIAL: solo los 2 títulos de Portafolio y
   Complementos — el resto de la tipografía del sitio no
   se toca. Con permiso explícito para "jugar con el diseño"
   de estos dos únicamente.
   ========================================================= */
#tratamientos .section-heading h2 {
  font-size: clamp(2.1rem, 3.4vw, 3.4rem);
}
#tratamientos .section-heading h2 .th-glow {
  background: linear-gradient(90deg, #7de3f4, #ffffff 60%, #7de3f4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(125, 227, 244, 0.45));
}

#complementos .ct-title {
  font-size: clamp(2.1rem, 1.7rem + 1.9vw, 3.1rem);
}
#complementos .ct-title em {
  font-style: normal;
  color: inherit;
}