/**
 * Plantilla T-02 · Nuestros servicios (templates/services-page/).
 *
 * Sirve /nuestros-servicios/. SOLO el layout de la página: el hero es de
 * `common/hero`, la caja final de `common/cta-box`, el rastro de migas de
 * `common/breadcrumbs` y las tarjetas traen su propio CSS.
 *
 * Dirección «Expediente» (docs/DISENO-EXPEDIENTE.md): rejillas cerradas en tres
 * columnas (decisión 1 del dueño, 12 sep 2026), píldoras con borde de 1px y
 * fondo `surface` en vez de fondo alterno, sin foco propio —hereda el anillo
 * global de style.css—, titulares sin color declarado.
 *
 * Vocabulario canónico de tokens (style.css §1), sin literales de respaldo.
 *
 * Clases raíz de la plantilla:
 *   .pf-services-page                     contenedor
 *   .pf-services-page__categorias         los grupos, uno por pilar
 *   .pf-services-page__categoria          grupo = `section` con `h2`; acordeón en móvil
 *   .pf-services-page__categoria-heading  el `h2`, envuelve al disparador
 *   .pf-services-page__categoria-trigger  botón, lleva aria-expanded
 *   .pf-services-page__categoria-name     nombre del pilar
 *   .pf-services-page__categoria-panel    panel, role="region"
 *   .pf-services-page__categoria-grid     rejilla de tarjetas, 3 / 2 / 1 columnas
 *   .pf-services-page__categoria-link     «Ver todo sobre …», la puerta al pilar
 *   .pf-services-page__empty              estado sin servicios
 *
 * EL PANEL LLEGA ABIERTO DEL SERVIDOR (DEC-018). El plegado en móvil lo aplica
 * script.js con el atributo `hidden`; este CSS nunca lo oculta por su cuenta.
 *
 * LOS CORTES VAN EN `rem` A MANO. Un breakpoint no admite `var()` (DEC-050):
 * `64rem` y `48rem` son los mismos números en T-14.
 *
 * @package pfuture
 * @module servicios
 */

.pf-services-page {
    padding-block: var(--pf-space-xl) var(--pf-space-3xl);
}

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

/*
 * El canalón lo da la plantilla a sus hijos directos, no cada bloque
 * (issue #90). Es el mismo defecto que el #78 cerró en T-09 y el #84 en T-11, y
 * se adopta su misma regla: la DEC-027 de `portafolio`.
 *
 * Medido en navegador antes de tocar, tema claro forzado en cliente. Borde
 * izquierdo del contenido, con el criterio de la DEC-029 —el panel del CTA se
 * mide por su `__inner`, no por su relleno—:
 *
 *   ventana   <h1> del hero   __destacados / __categorias   panel del CTA
 *   400       48              24                            48
 *   768       48              24                            48
 *   1024      48              24                            48
 *   1280      88              64                            88
 *   1440      168             144                           168
 *
 * O sea DOS bordes en los cinco anchos, y el desalineado no es el que se ve a
 * simple vista: los bloques ya estaban en el valor canónico —24, 24, 24, 64,
 * 144, los mismos que el #78 dejó en T-09— y quienes se metían 24px de más eran
 * el hero y la caja del CTA.
 *
 * La causa: esta plantilla se acotaba a sí misma —`max-width` de contenedor,
 * `margin: 0 auto` y el canalón por relleno—, así que el hero y el CTA, que
 * traen su propio contenedor de marca dentro, lo aplicaban por segunda vez
 * sobre un ancho ya recortado. Un canalón doble, no un canalón distinto.
 *
 * Se retira la contención del contenedor y se pone sobre el hijo directo con el
 * idiom de `.pf-container` —la utilidad global de style.css sección 5—, que mete
 * el canalón ENTERO en cada lado.
 *
 * Va sobre el hijo directo y no sobre cada bloque a propósito: vale para
 * `cta-box`, que es de `shell` y lo consumen otras ocho plantillas, y para lo
 * que se añada mañana.
 *
 * El selector lleva dos clases (0,2,0) para ganar a `.pf-cta-box--section`
 * (0,1,0) sin depender del orden de carga: los componentes encolan su hoja al
 * pintarse, o sea DESPUÉS de ésta.
 *
 * El hero se excluye porque va a sangre a propósito y pone el canalón dentro de
 * su `__inner`. Medido antes de sacarlo del contenedor, que es lo que lo hace
 * seguro: en esta plantilla el hero es `--tone-default` y no pinta NADA —fondo
 * `rgba(0,0,0,0)`, sin imagen, sin capa de fondo y sin borde—, así que soltarlo
 * al ancho de la ventana no ensancha ningún fondo, sólo deja que su `__inner` se
 * centre contra la ventana y caiga en el mismo borde que los bloques.
 */
.pf-services-page > :not(.pf-hero) {
    width: 100%;
    max-width: var(--pf-container);
    margin-inline: auto;
    padding-inline: var(--pf-gutter);
}

/* Los grupos: un pilar por sección, separados por el filete único. ---------- */

.pf-services-page__categorias {
    margin-bottom: var(--pf-space-2xl);
}

.pf-services-page__categoria {
    border-top: var(--pf-rule);
    padding: var(--pf-space-xl) 0;
}

.pf-services-page__categoria-heading {
    margin: 0;
    font-size: inherit;
}

.pf-services-page__categoria-trigger {
    display: flex;
    align-items: center;
    gap: var(--pf-space-sm);
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--pf-text-2xl);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-tight);
    text-align: left;
    /* En escritorio el grupo no se pliega: el botón deja de ser interactivo. */
    cursor: default;
}

.pf-services-page__categoria-icon {
    display: none;
    margin-left: auto;
}

.pf-services-page__categoria-description {
    margin: var(--pf-space-sm) 0 0;
    max-width: var(--pf-measure);
    color: var(--pf-color-text-soft);
}

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

.pf-services-page__categoria-link {
    margin: var(--pf-space-md) 0 0;
    font-weight: var(--pf-weight-medium);
}

.pf-services-page__categoria-panel[hidden] {
    display: none;
}

.pf-services-page__empty {
    color: var(--pf-color-text-muted);
}

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

/* Escritorio: tres columnas, cerradas (decisión 1). */
@media (min-width: 64rem) {
    .pf-services-page__categoria-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Móvil: cada categoría se pliega. */
@media (max-width: 48rem) {
    .pf-services-page__categoria-trigger {
        cursor: pointer;
    }

    .pf-services-page__categoria-icon {
        display: block;
        position: relative;
        width: 0.75rem;
        height: 0.75rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--pf-transition);
    }

    .pf-services-page__categoria-trigger[aria-expanded="true"] .pf-services-page__categoria-icon {
        transform: rotate(-135deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-services-page__categoria-icon {
        transition: none;
    }
}

/* El dibujo de la puerta, a 32px, delante de su nombre. */
.pf-services-page__categoria-icono {
    flex: 0 0 auto;
}

/* Cabecera del panel: la línea y, en la puerta sin fichas, su ilustración.
   En móvil se apila; a partir de 900 px son DOS COLUMNAS con el párrafo a la
   izquierda y el dibujo a la derecha, a 240 px (PROPUESTA-VISUAL:159). La
   revisión de la 14 midió el dibujo DEBAJO del párrafo con 300 px de hueco:
   era una sola columna. */
.pf-services-page__categoria-cabecera {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-lg);
}

.pf-services-page__categoria-cabecera .pf-services-page__categoria-description {
    flex: 1 1 auto;
}

.pf-services-page__categoria-ilustracion {
    flex: 0 0 auto;
    inline-size: 240px;
    max-inline-size: 100%;
}

@media (min-width: 900px) {
    .pf-services-page__categoria-cabecera--con-ilustracion {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

/* El diagrama del hosting, bajo la cabecera de su puerta. */
.pf-services-page__categoria-diagrama {
    margin-block-start: var(--pf-space-lg);
}