/* =============================================================
   PÁGINA DE CATEGORÍA
   ============================================================= */

@layer componentes {

  .categoria-cabecera { padding-block: var(--e-5) var(--e-6); }

  .categoria-cabecera__rejilla {
    display: grid;
    gap: var(--e-6);
    align-items: center;
  }
  @media (width >= 58rem) {
    .categoria-cabecera__rejilla {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: var(--e-8);
    }
  }

  .categoria-cabecera__texto { display: flex; flex-direction: column; gap: var(--e-4); }

  .categoria-cabecera__titulo {
    font-size: var(--t-3xl);
    font-stretch: 116%;
    /* Sin esto, una palabra larga como "Medicamentos" se partía a la
       mitad ("Medicamen-tos"): la regla global de base.css pone
       overflow-wrap: break-word en todos los encabezados, útil para
       párrafos con URLs pero destructivo en un titular gigante. Aquí se
       revierte: la palabra completa baja de línea si no cabe, nunca se
       corta. text-wrap: balance reparte las líneas de forma pareja. */
    overflow-wrap: normal;
    word-break: keep-all;
    text-wrap: balance;
    /* Techo de tamaño en esta zona: el 3xl pleno (hasta 5.2rem) es lo que
       forzaba el corte en la columna angosta del encabezado. */
    font-size: clamp(2.4rem, 5vw, 3.6rem);
  }

  .categoria-cabecera__entrada {
    max-width: 50ch;
    font-size: var(--t-lg);
    color: var(--texto-suave);
    line-height: 1.55;
  }

  .categoria-cabecera__medio {
    position: relative;
    border-radius: var(--radio-xl);
    overflow: hidden;
    border: 1px solid var(--borde);
    box-shadow: var(--sombra-md);
  }
  /* El mismo filete de traza que llevan las tarjetas y el carrusel. */
  .categoria-cabecera__medio::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: var(--grad-señal);
    z-index: 2;
  }
  .categoria-cabecera__medio img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
}