/**
 * Plantilla T-14 · Categoría de servicio
 * (templates/taxonomy-categoria-de-servicio/).
 *
 * Sirve /categoria-de-servicio/{slug}/, la página del pilar. SOLO el layout de
 * los bloques: la cabecera es de `common/hero`, la caja final de
 * `common/cta-box`, el rastro de migas de `common/breadcrumbs` y las tarjetas
 * de servicio y de caso traen cada una su CSS desde common/.
 *
 * Dirección «Expediente» (docs/DISENO-EXPEDIENTE.md): rejillas cerradas en tres
 * columnas (decisión 1 del dueño, 12 sep 2026; la `minmax(16rem, 1fr)` anterior
 * daba 4 columnas a 1440 y 3 a 1280, medido en #111), píldora del recuento con
 * borde de 1px y fondo `surface`, titulares sin color declarado.
 *
 * Vocabulario canónico de tokens (style.css §1), sin literales de respaldo.
 *
 * Clases raíz de la plantilla:
 *   .pf-tax-categoria                   contenedor
 *   .pf-tax-categoria__layout           rejilla lateral + contenido (--sin-toc: una columna)
 *   .pf-tax-categoria__aside            columna izquierda fija: índice y, debajo, la caja CTA
 *   .pf-tax-categoria__content          columna principal: cuerpo, anexo y bloques
 *   .pf-tax-categoria__cuerpo           envoltorio del cuerpo y el anexo
 *   .pf-tax-categoria__descripcion      el cuerpo del pilar, con sus <h2>
 *   .pf-tax-categoria__anexo            «Si tu cliente o la ley te piden más», en recuadro
 *   .pf-tax-categoria__block            cada uno de los dos bloques
 *   .pf-tax-categoria__block--servicios
 *   .pf-tax-categoria__block--portafolio
 *   .pf-tax-categoria__block-title      rótulo del bloque
 *   .pf-tax-categoria__block-count      cuántos elementos trae, contados de lo servido
 *   .pf-tax-categoria__grid/__item      rejilla de tarjetas, 3 / 2 / 1 columnas
 *   .pf-tax-categoria__fallback-link    enlace mientras falte una tarjeta
 *   .pf-tax-categoria__empty            estado sin término
 *
 * LOS CORTES VAN EN `rem` A MANO. Un breakpoint no admite `var()` (DEC-050):
 * `64rem` y `48rem` son los mismos números que en T-02.
 *
 * @package pfuture
 * @module servicios
 */

.pf-tax-categoria {
    padding-block: var(--pf-space-xl) var(--pf-space-3xl);
}

/* Canalón ----------------------------------------------------------------- */

/*
 * La misma regla que T-02 y que la DEC-027 de `portafolio` (issue #90). Ver el
 * bloque «Canalón» de `templates/services-page/styles.css` para el porqué de
 * cada una de las tres elecciones; aquí sólo la medida, que es idéntica.
 *
 * Medido en navegador antes de tocar, sobre /categoria-de-servicio/aws/, tema
 * claro forzado en cliente. Borde izquierdo del contenido:
 *
 *   ventana   <h1> del hero   __block (los tres)   panel del CTA
 *   400       48              24                   48
 *   768       48              24                   48
 *   1024      48              24                   48
 *   1280      88              64                   88
 *   1440      168             144                  168
 *
 * Dos bordes en los cinco anchos, con los bloques ya en el valor canónico y el
 * hero y el CTA metidos 24px de más por aplicar su contenedor de marca dentro de
 * un ancho que esta hoja ya había recortado.
 *
 * Selector de dos clases (0,2,0) para ganar a `.pf-cta-box--section` (0,1,0),
 * que encola su hoja al pintarse. Hero excluido: aquí es `--compact
 * --tone-default` y no pinta fondo, imagen ni borde, así que sacarlo del
 * contenedor sólo mueve su canalón, no ensancha nada.
 */
.pf-tax-categoria > :not(.pf-hero) {
    width: 100%;
    max-width: var(--pf-container);
    margin-inline: auto;
    padding-inline: var(--pf-gutter);
}

/* Rejilla lateral + contenido -------------------------------------------------
 *
 * LA MAQUETACIÓN DE LA PÁGINA LEGAL (tanda 20, #206, decisión del dueño): columna
 * izquierda de `minmax(14rem, 18rem)` con el índice y, debajo, la caja de
 * contacto; a la derecha, en `minmax(0, 1fr)`, el cuerpo del pilar, el anexo y
 * los dos bloques de tarjetas; dos columnas desde 64rem (el corte de `cta-box`,
 * ver abajo). La anchura de la columna es la de `templates/legal-page/styles.css`
 * y de T-08, para que las plantillas con índice midan igual. Es `__layout` quien recibe ahora la geometría de contenedor
 * de la regla de arriba; `__cuerpo` ya no es hijo directo y solo separa.
 *
 * Una columna por defecto; en ella el lateral se DISUELVE (`display: contents`)
 * y la caja se va al final con `order` —índice, contenido, caja—, que es el
 * orden que pide el dueño en móvil y el que la cara de barra de `common/cta-box`
 * necesita: su centinela, que el script inserta justo antes de la caja, tiene
 * que quedar POR DEBAJO del contenido para que la barra se fije (#94). Es la
 * única regla de esta hoja sobre una clase del componente, y es solo colocación.
 * Todo el bloque es el mismo que en `templates/single-servicio/styles.css`. */
.pf-tax-categoria__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pf-space-xl);
    align-items: start;
    margin-top: var(--pf-space-xl);
}

.pf-tax-categoria__aside {
    display: contents;
}

.pf-tax-categoria__aside > .pf-cta-box,
.pf-tax-categoria__aside > .pf-cta-box__sentinel {
    order: 1;
}

/* El contenido es un item de rejilla: sin `min-width: 0` no bajaría de su
   min-content y las rejillas de tarjetas podrían empujarlo fuera de la pista. */
.pf-tax-categoria__content {
    min-width: 0;
}

.pf-tax-categoria__block + .pf-tax-categoria__block {
    margin-top: var(--pf-space-3xl);
}

.pf-tax-categoria__block-title {
    display: flex;
    align-items: baseline;
    gap: var(--pf-space-sm);
    margin: 0 0 var(--pf-space-lg);
    padding-bottom: var(--pf-space-sm);
    border-bottom: var(--pf-rule);
    font-size: var(--pf-text-2xl);
    line-height: var(--pf-leading-tight);
}

/* El número sale del recuento de lo que se pinta, no de `$term->count`, que
   suma los tipos de contenido porque la taxonomía es compartida. Píldora con
   borde, 13px, peso normal: fondo `surface` para que se lea también en oscuro. */
.pf-tax-categoria__block-count {
    padding: 0.1em 0.6em;
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-pill);
    background: var(--pf-color-surface);
    color: var(--pf-color-text-muted);
    font-size: var(--pf-text-xs);
    font-weight: var(--pf-weight-regular);
    line-height: var(--pf-leading-normal);
}

/* Rejilla de tarjetas: una columna, y 2 / 3 en los cortes de abajo. */
.pf-tax-categoria__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pf-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* El cuerpo del pilar: la descripción del término con sus secciones y el anexo.
   Va entre el hero y los bloques de tarjetas.

   EL ENVOLTORIO ES QUIEN RECIBE LA GEOMETRÍA DE CONTENEDOR (#174). Hasta esta
   tanda la descripción y el anexo eran hijos directos de `.pf-tax-categoria`, y
   el selector de arriba —`> :not(.pf-hero)`, 0,2,0— ganaba a su `max-width`
   (0,1,0): medido a 1280 el 16 sep, cuerpo y anexo salían a 1120 px con 152 y
   148 caracteres por línea, y el `padding` del anexo lo pisaba el canalón. Ahora
   el contenedor lo recibe `__cuerpo` y la medida se aplica dentro, alineada a la
   izquierda con el resto de la página (nada centrado).

   Desde la tanda 20 `__cuerpo` va dentro de `__content`, que es quien está en
   la rejilla: el margen superior lo pone `__layout`, y aquí queda solo la
   separación con los bloques de tarjetas. */
.pf-tax-categoria__cuerpo {
    margin-block: 0 var(--pf-space-3xl);
}

/* Medida de lectura con el token canónico, el mismo que usa el cuerpo de una
   entrada: una línea de 66 caracteres se lee, una de 110 no. */
.pf-tax-categoria__descripcion {
    max-width: var(--pf-measure);
    margin-block: 0 var(--pf-space-3xl);
}

.pf-tax-categoria__descripcion > :first-child {
    margin-top: 0;
}

.pf-tax-categoria__descripcion > :last-child {
    margin-bottom: 0;
}

/* Regla entre secciones: cada `h2` del cuerpo, salvo el primero, abre con un
   filete de 1px encima (la «regla entre h2» del #152). */
.pf-tax-categoria__descripcion h2 {
    margin: var(--pf-space-xl) 0 var(--pf-space-sm);
    padding-block-start: var(--pf-space-lg);
    border-block-start: 1px solid var(--pf-color-border);
}

.pf-tax-categoria__descripcion > h2:first-child {
    padding-block-start: 0;
    border-block-start: 0;
}

/* «Si tu cliente o la ley te piden más» es un anexo, y tiene que parecerlo:
   recuadro con borde de 1px, radio de tarjeta y fondo alterno, sin sombra
   (dirección «Expediente»). Misma medida de lectura que el cuerpo: el recuadro
   mide 66ch MÁS su relleno, para que el texto de dentro caiga en la misma
   columna que el de fuera (#174). */
.pf-tax-categoria__anexo {
    max-width: calc(var(--pf-measure) + var(--pf-space-lg) * 2);
    margin-block: 0;
    padding: var(--pf-space-lg);
    background: var(--pf-color-bg-alt);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-card);
}

.pf-tax-categoria__anexo > :first-child {
    margin-top: 0;
}

.pf-tax-categoria__anexo > :last-child {
    margin-bottom: 0;
}

.pf-tax-categoria__anexo h2 {
    margin: 0 0 var(--pf-space-sm);
    font-size: var(--pf-text-lg);
}

.pf-tax-categoria__descripcion p {
    margin: 0 0 var(--pf-space-md);
}

.pf-tax-categoria__fallback-link {
    font-weight: var(--pf-weight-medium);
}

.pf-tax-categoria__empty {
    color: var(--pf-color-text-muted);
}

/* La caja de conversión como sección de cierre —solo en la puerta sin índice—
   es `common/cta-box`: aquí solo se la separa del último bloque, porque el
   margen entre hermanos no la alcanza. La `sticky` de la columna no lleva este
   margen: su separación del índice la da el `gap` del lateral. */
.pf-tax-categoria .pf-cta-box--section {
    margin-top: var(--pf-space-3xl);
}

/* Tablet: dos columnas. */
@media (min-width: 48rem) {
    .pf-tax-categoria__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Escritorio: dos columnas desde 64rem, o sea 1024px, el corte de `common/cta-box`
 * y no el 62rem de la página legal: la legal no lleva caja y aquí va en la
 * columna. Medido el 18 sep 2026 a 1000px con la rejilla a 62rem: con la página
 * arriba del todo la caja se fijaba como barra a todo el ancho y se soltaba al
 * llegar a la columna, la banda mixta que el #102 cerró en T-08. A 64rem no hay
 * banda. El porqué entero está en `templates/single-servicio/styles.css`; aquí
 * el mismo número. La ANCHURA de la columna sí es la de la legal.
 *
 * La columna se fija ENTERA, con el desplazamiento que publica la cabecera fija
 * (`--pf-header-height`, el mismo que usan `toc` y `cta-box`) y con techo de
 * alto: si índice más caja no caben en la ventana, la columna se desplaza por
 * dentro en vez de dejar la caja fuera de alcance hasta el pie (misma defensa que
 * `templates/single/`). El índice va con `sticky => false` por eso mismo. */
@media (min-width: 64rem) {
    .pf-tax-categoria__layout {
        grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
        gap: var(--pf-space-2xl);
    }

    .pf-tax-categoria__layout--sin-toc {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-tax-categoria__aside {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: calc(var(--pf-header-height, 0px) + var(--pf-space-md));
        max-height: calc(100vh - var(--pf-header-height, 0px) - var(--pf-space-md) * 2);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* La separación índice-caja va como margen de la caja y NO como `gap` del
       lateral: el centinela que `common/cta-box/script.js` inserta antes de la
       caja es un hijo más del flex y con `gap` cobraba el suyo (medido: 64px
       entre índice y caja en vez de 32). */
    .pf-tax-categoria__aside > .pf-cta-box {
        margin-top: var(--pf-space-lg);
        flex-shrink: 0;
    }

    /* Si índice más caja no caben en la ventana, cede el ÍNDICE —se desplaza por
       dentro— y la caja se queda a la vista: es la llamada a la acción de la
       página. `min-height: 0` es lo que deja a un item flex bajar de su
       min-content. Mismo reparto que hizo `contenidos` en T-07 (#207). */
    .pf-tax-categoria__aside > .pf-toc {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Por debajo de 1024 la caja `sticky` que NO está fijada se pinta sin relleno:
   `common/cta-box` solo da `padding` a `__inner` en la cara lateral de
   escritorio y en la barra fijada, y el estado «suelta al final de la página»
   se queda con el título pegado al borde. Es del componente (#209, de `shell`,
   abierto por `contenidos` el 18 sep 2026); mientras llega, la misma regla
   puente que T-07, acotada a la caja suelta para no pisar la barra. */
@media (max-width: 1023px) {
    .pf-tax-categoria__aside > .pf-cta-box:not(.is-pinned) .pf-cta-box__inner {
        padding: var(--pf-space-md);
    }
}

/* Escritorio: tres columnas de tarjetas, cerradas (decisión 1 del dueño), SOLO
   a todo el ancho, o sea en la puerta sin índice. Con la columna del índice a la
   izquierda la pista del contenido mide unos 736px a 1280 y a 1440 (el contenedor
   es fijo, 1120): tres tarjetas serían de 229px, con el título de la ficha más
   larga a cuatro líneas; dos, de 356px. Ver DEC-077. */
@media (min-width: 64rem) {
    .pf-tax-categoria__layout--sin-toc .pf-tax-categoria__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}