/** * Plantilla T-08 · Servicio (templates/single-servicio/). * * Sirve /servicio/{slug}/. SOLO el layout de la ficha de ocho bloques. El hero, * el índice, los indicadores, el acordeón de FAQ, la tarjeta del caso, el rastro * de migas y la caja CTA traen cada uno su propio CSS desde common/, y esta * hoja no los reescribe por encima. * * Dirección «Expediente» (docs/DISENO-EXPEDIENTE.md): jerarquía por tamaño y * espacio, bordes de un píxel en lugar de sombras, sin color de acento fuera del * botón. Los titulares no declaran color: h1–h6 ya son `--pf-color-heading`. * * Vocabulario canónico de tokens (style.css §1), sin literales de respaldo. * * Clases raíz de la plantilla: * .pf-single-servicio contenedor * .pf-single-servicio__indicadores franja de cifras bajo el hero * .pf-single-servicio__layout rejilla lateral + contenido * .pf-single-servicio__aside columna izquierda fija: índice y, debajo, la caja CTA * .pf-single-servicio__content columna principal, a la derecha * .pf-single-servicio__section-title título de las secciones propias (--sub: glosario) * .pf-single-servicio__section-intro línea de entrada bajo un título * .pf-single-servicio__quien bloque 2, dos paneles con borde * .pf-single-servicio__quien-grid rejilla de los paneles (--1 / --2) * .pf-single-servicio__quien-panel cada panel (--si / --no) * .pf-single-servicio__quien-title h3 del panel * .pf-single-servicio__quien-body el wysiwyg del panel * .pf-single-servicio__bloque sección con lista de expediente (--entregables / --definiciones / --riesgos) * .pf-single-servicio__lista la lista, un `dl` * .pf-single-servicio__fila cada par dt/dd * .pf-single-servicio__fila-nombre dt * .pf-single-servicio__fila-texto dd * .pf-single-servicio__como bloque 4, envuelve `descripcion` y el glosario * .pf-single-servicio__descripcion campo `descripcion` * .pf-single-servicio__caso hueco de la tarjeta del caso * .pf-single-servicio__faq hueco del acordeón de preguntas * .pf-single-servicio__empty estado sin servicio * * @package pfuture * @module servicios */ .pf-single-servicio { padding-block: var(--pf-space-xl) var(--pf-space-3xl); } /* Canalón ----------------------------------------------------------------- */ /* * La misma regla que T-02 y T-14, 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 elección. * * ESTA PLANTILLA ESTABA EN LA TABLA DEL ISSUE COMO «1 borde: 64», o sea entre * las que sólo necesitaban que el valor coincidiese con el del resto del sitio. * Medido, el valor YA coincidía —24, 24, 24, 64, 144, los mismos que el #78 dejó * en T-09— y el defecto era otro, el segundo criterio de la DEC-029: el `

` * de su propio hero caía 24px a la DERECHA del único borde de contenido. * * ventana

del hero __layout * 400 48 24 * 768 48 24 * 1024 48 24 * 1280 88 64 * 1440 168 144 * * Es el caso que la DEC-029 describe en T-12, sólo que al revés: coherente por * dentro —un solo hijo no-hero— y desalineada con su propio hero. Un titular que * no está a plomo con el texto que lleva debajo, en las 22 fichas y en los cinco * anchos. * * La causa es la misma que en T-02 y T-14 y por eso el arreglo es el mismo: esta * hoja acotaba el contenedor, así que el `__inner` del hero aplicaba el * contenedor de marca por segunda vez sobre un ancho ya recortado. Quien se * mueve aquí es el hero, no la rejilla: `__layout` se queda en 64 porque * `max-width` menos canalón le deja exactamente el mismo ancho de contenido que * tenía, 1152px a 1280. * * Selector de dos clases (0,2,0) por coherencia con las otras dos hojas del * módulo, aunque aquí no compita con nadie: los hijos no-hero son la franja de * cifras y `__layout`, y la caja del CTA cuelga de `__aside`, no de la * plantilla, y es la variante `--sticky`, que no trae contenedor propio. * * Hero excluido: es `--split --has-image --tone-default` y no pinta fondo, * imagen de fondo ni borde —la ilustración es una columna de la rejilla de su * `__inner`, no una capa a sangre—, así que soltarlo al ancho de la ventana no * ensancha ningún fondo. */ .pf-single-servicio > :not(.pf-hero) { width: 100%; max-width: var(--pf-container); margin-inline: auto; padding-inline: var(--pf-gutter); } /* Franja de cifras bajo el hero. Solo la tiene 1 de 22 servicios; el bloque en sí lo pinta `common/indicadores` en su variante `destacado`. */ .pf-single-servicio__indicadores { margin-bottom: var(--pf-space-2xl); } /* 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; contenido en `minmax(0, 1fr)` a la derecha; dos columnas desde 64rem * (el corte de `cta-box`, ver abajo). La anchura de la columna es la de * `templates/legal-page/styles.css`, para que las plantillas con índice midan igual. Hasta esta tanda era `minmax(0, 1fr) 20rem` * con la caja a la derecha y el índice en flujo dentro del cuerpo (DEC-051, * derogada: ver DEC-076). * * Una sola columna por defecto; en ella el lateral se DISUELVE (`display: * contents`) para que sus dos hijos entren en la rejilla como items sueltos y * la caja pueda irse al final con `order`: índice arriba, contenido, caja al * final, 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 tiene que quedar POR DEBAJO del * contenido para que la barra se fije (cabecera de su script.js, #94)—. El * centinela lo inserta ese script justo antes de la caja, dentro del lateral, * así que recibe el mismo `order`; es la única regla de esta hoja sobre una * clase del componente, y es solo colocación. */ .pf-single-servicio__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pf-space-xl); align-items: start; } .pf-single-servicio__aside { display: contents; } .pf-single-servicio__aside > .pf-cta-box, .pf-single-servicio__aside > .pf-cta-box__sentinel { order: 1; } /* Los bloques se separan con espacio, no con bandas (regla de separadores de la dirección). */ .pf-single-servicio__content > * + * { margin-top: var(--pf-space-2xl); } .pf-single-servicio__section-title { margin: 0 0 var(--pf-space-md); font-size: var(--pf-text-2xl); line-height: var(--pf-leading-tight); } /* El glosario cuelga de «Cómo se hace»: un escalón por debajo. */ .pf-single-servicio__section-title--sub { margin-top: var(--pf-space-xl); font-size: var(--pf-text-xl); } .pf-single-servicio__section-intro { margin: 0 0 var(--pf-space-md); max-width: var(--pf-measure); color: var(--pf-color-text-soft); } /* Bloque 2: para quién es. Dos paneles con borde de 1px, sin sombra. ------ */ .pf-single-servicio__quien-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pf-space-md); } .pf-single-servicio__quien-panel { padding: var(--pf-space-md); border: var(--pf-rule); border-radius: var(--pf-radius-card); background: var(--pf-color-surface); } .pf-single-servicio__quien-title { margin: 0 0 var(--pf-space-sm); font-size: var(--pf-text-md); } .pf-single-servicio__quien-body { color: var(--pf-color-text-soft); line-height: var(--pf-leading-normal); } .pf-single-servicio__quien-body > :first-child { margin-top: 0; } .pf-single-servicio__quien-body > :last-child { margin-bottom: 0; } /* Cuerpo editorial. Las anclas de los encabezados las pone `toc_anchorize()` en PHP; el desplazamiento lo compensa `common/toc/styles.css` sobre `[id]`, así que aquí no se repite. */ .pf-single-servicio__descripcion { max-width: var(--pf-measure); line-height: var(--pf-leading-loose); } /* Lista de expediente: qué se entrega, el glosario y qué riesgos elimina. Una regla, tres bloques. Filas separadas por el filete único de la dirección. -- */ .pf-single-servicio__lista { margin: 0; border-top: var(--pf-rule); } .pf-single-servicio__fila { padding: var(--pf-space-md) 0; border-bottom: var(--pf-rule); } .pf-single-servicio__fila-nombre { margin: 0 0 var(--pf-space-2xs); font-weight: var(--pf-weight-bold); } .pf-single-servicio__fila-texto { margin: 0; max-width: var(--pf-measure); color: var(--pf-color-text-soft); } .pf-single-servicio__fila-texto > :first-child { margin-top: 0; } .pf-single-servicio__fila-texto > :last-child { margin-bottom: 0; } /* Las secciones a las que apunta el índice compensan la cabecera fija al saltar. */ .pf-single-servicio__indicadores, .pf-single-servicio__quien, .pf-single-servicio__bloque, .pf-single-servicio__como, .pf-single-servicio__caso, .pf-single-servicio__faq { scroll-margin-top: calc(var(--pf-header-height, 0px) + var(--pf-space-md)); } .pf-single-servicio__empty { color: var(--pf-color-text-muted); } /* Bloque 2 a dos columnas desde tablet. Un solo panel ocupa el ancho entero. */ @media (min-width: 48rem) { .pf-single-servicio__quien-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Escritorio: dos columnas desde 64rem, o sea 1024px, el corte de `common/cta-box`. * * NO es el 62rem de la página legal, y queda escrito por qué. La legal no lleva * caja; aquí la caja va en la columna y su cara la decide el componente a 1024px * (`@media (max-width: 1023px)` barra, `(min-width: 1024px)` caja lateral). Con * la rejilla a 62rem se abría la banda 993–1023 que ya midió el #102, con otra * ropa: medido el 18 sep 2026 a 1000px, con la página arriba del todo la caja * se fijaba como BARRA a todo el ancho —su centinela, dentro de la rejilla aún * fuera de pantalla, quedaba por debajo— y se soltaba al llegar a la columna. * Dos columnas con la barra de móvil, que es justo lo que el #102 cerró. A 64rem * la banda no existe: por debajo de 1024 la página va a una columna y la barra * es la de móvil; desde 1024 la caja está en la columna y no se fija sola. * T-07 (`templates/single/`) corta también a 64rem. La ANCHURA de la columna sí * es la de la legal, `minmax(14rem, 18rem)`, que es lo que hace que las * plantillas con índice midan igual. * * 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/`). Por eso el índice va con `sticky => false`: ya está * dentro de algo fijo, y su propio `max-height` con `overflow` solo metería un * segundo desplazamiento dentro del de la columna. */ @media (min-width: 64rem) { .pf-single-servicio__layout { grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: var(--pf-space-2xl); } .pf-single-servicio__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-single-servicio__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-single-servicio__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-single-servicio__aside > .pf-cta-box:not(.is-pinned) .pf-cta-box__inner { padding: var(--pf-space-md); } } /* -------------------------------------------------------------------------- Tanda 14/15 (issues #152 y #165): las clases nuevas que la plantilla estrenó sin regla. La revisión de la 14 las midió sin CSS: los estados caían ENCIMA del título en vez de a su lado, y los índices salían sin tratamiento. -------------------------------------------------------------------------- */ /* El estado junto al título del panel «Para quién es»: icono y palabra en la misma línea, navy los dos (PROPUESTA-VISUAL:164). */ .pf-single-servicio__quien-title { display: flex; align-items: center; gap: var(--pf-space-xs); } .pf-single-servicio__quien-estado { color: var(--pf-color-brand); } /* Índices 01, 02… de las listas de expediente: 13px, apagados, con tabulación numérica para que alineen (PROPUESTA-VISUAL:165). */ .pf-single-servicio__fila-indice { display: inline-block; min-inline-size: 2.2em; margin-inline-end: var(--pf-space-xs); color: var(--pf-color-text-muted); font-size: var(--pf-text-xs); font-weight: var(--pf-weight-regular); font-variant-numeric: tabular-nums; } /* El diagrama «cómo funciona», bajo el hero y a todo el ancho del contenedor. Es contenido: se ve en todos los anchos, no como el `figure` del hero. */ .pf-single-servicio__diagrama { margin-block: var(--pf-space-xl) var(--pf-space-2xl); }