/**
 * Plantilla T-09 · single-portafolio (caso de exito).
 *
 * Clases raiz:
 *   .pf-single-portafolio
 *   .pf-single-portafolio__layout  __content  __section-title  __prose
 *   .pf-single-portafolio__resumen  __cuerpo  __galeria
 *   .pf-single-portafolio__contexto  __contexto-list  __contexto-row
 *   .pf-single-portafolio__reto  __construido  __cumplimiento
 *   .pf-single-portafolio__resultados  __resultados-list  __resultado  __cifra  __etiqueta
 *   .pf-single-portafolio__tecnico  __tecnico-details  __tecnico-summary  __tecnico-body
 *                                   __tecnico-subtitle
 *   .pf-single-portafolio__diagrama  __diagrama-image
 *   .pf-single-portafolio__diagrama--dibujo  __diagrama-svg  __diagrama-caption
 *                                            __diagrama-pasos
 *   .pf-single-portafolio__stack  __stack-list  __stack-item  __duracion  __duracion-label
 *   .pf-single-portafolio__cita  __cita-text  __cita-caption  __cita-autor  __cita-cargo
 *
 * El hero lo pinta common/hero y el lightbox common/gallery: sus estilos viven
 * en sus propias hojas.
 *
 * UNA COLUMNA (issue #115). La ficha lateral (`__ficha*`, rejilla de dos
 * columnas a 900px y `position: sticky`) se retiro con la direccion
 * «Expediente»: sus datos pasan al bloque de contexto y al de stack, en el
 * flujo de lectura. La prosa sigue acotada por `--pf-measure`; contexto,
 * resultados y diagrama van al ancho del contenedor.
 *
 * BLOQUE TECNICO PLEGADO (issue #140). La arquitectura y las herramientas —lo
 * unico de la ficha con marcas y siglas— viven dentro de un `<details>` cerrado
 * bajo «Para técnicos: cómo está hecho». El plegado es del navegador: no hay JS
 * en esta plantilla que lo abra ni que lo cierre.
 *
 * CANALON: lo da esta hoja a los hijos directos de `.pf-single-portafolio`,
 * incluidos los que pinta otro modulo (`common/related` es de `contenidos` y
 * `common/cta-box` de `shell`). Ver el bloque «Canalon» y el issue #78. El
 * idiom de `min()` esta erradicado del modulo (DEC-028): no se reintroduce.
 *
 * RITMO VERTICAL: el `gap` del contenedor es el UNICO espaciado entre hijos
 * directos. `.pf-related` traia su propio `margin-block` del mismo valor, que en
 * un flex no colapsa y doblaba la distancia (PEND-015); se anula desde aqui con
 * un selector de dos clases, sin tocar `common/related`.
 *
 * TOKENS: nombres canonicos de style.css, sin literal de respaldo (issue #60).
 * `--pf-single-portafolio-measure` es propio de la plantilla y se declara aqui
 * mismo, asi que se consume sin respaldo igual que los demas. Sin
 * `font-style: italic` (decision 10: no se sirve cursiva) ni `text-shadow`.
 */

.pf-single-portafolio {
    --pf-single-portafolio-measure: var(--pf-measure);

    display: flex;
    flex-direction: column;
    gap: var(--pf-space-xl);
    padding-block: var(--pf-space-lg);
}

/* Canalon ----------------------------------------------------------------- */

/*
 * El canalon lo da la plantilla a sus hijos directos, no cada componente
 * (issue #78). `.pf-single-portafolio` es un flex en columna sin acotar, asi
 * que antes cada hijo se acotaba solo y cada uno lo hacia distinto: medido en
 * navegador, el contenido empezaba en 24px (hero y panel del CTA), en 12px
 * (__layout) o en 0px (`related`, pegado al borde de la ventana por debajo de
 * 1240px). Tres columnas de texto desalineadas en la misma pagina.
 *
 * Se adopta el idiom de `.pf-container`, que es la utilidad global de
 * style.css seccion 5 y la que ya usan el hero y T-08: acotar al contenedor de
 * marca, centrar y meter el canalon por relleno. Con el, el borde izquierdo
 * del contenido es UNO solo en cada ancho, el mismo del <h1> del hero.
 *
 * Va sobre el hijo directo y no sobre cada componente a proposito: vale para
 * `related`, para `cta-box` y para lo que se anada manana, y no toca ni la
 * firma ni la hoja de dos componentes que son de `contenidos` y de `shell` y
 * que consumen ademas T-07, T-08 y T-10.
 *
 * El selector lleva dos clases (0,2,0) para ganar a `.pf-related` y a
 * `.pf-cta-box--section` (0,1,0) sin depender del orden de carga: los
 * componentes encolan su hoja al pintarse, o sea DESPUES de esta.
 *
 * El hero se excluye porque va a sangre a proposito: su fondo ocupa el ancho
 * de la ventana y el canalon lo pone dentro `.pf-hero__inner`.
 */
.pf-single-portafolio > :not(.pf-hero) {
    width: 100%;
    max-width: var(--pf-container);
    margin-inline: auto;
    padding-inline: var(--pf-gutter);
}

/* Ritmo vertical: cierra PEND-015. Dos clases (0,2,0) para ganar a
   `.pf-related` (0,1,0), que encola su hoja despues de esta. */
.pf-single-portafolio > .pf-related {
    margin-block: 0;
}

/* Layout ------------------------------------------------------------------ */

/*
 * Sin `width` ni `margin-inline` propios: los pone la regla de canalon de
 * arriba, que es la misma para los cuatro bloques. Una sola columna: el
 * `<aside>` lateral se retiro en el #115.
 */
.pf-single-portafolio__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.pf-single-portafolio__content {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-xl);
    min-width: 0;
}

/*
 * Sin `font-size` propio a proposito. Lo tenia en --pf-text-xl, que es el
 * tamano de un h3, mientras que los h2 que trae el contenido editorial usan el
 * global --pf-text-2xl: el encabezado de rango superior se veia mas pequeno que
 * los que cuelgan de el. Aqui solo se ajusta el margen.
 */
.pf-single-portafolio__section-title {
    margin: 0 0 var(--pf-space-sm);
}

/* Prosa ------------------------------------------------------------------- */

.pf-single-portafolio__prose {
    max-width: var(--pf-single-portafolio-measure);
    font-size: var(--pf-text-prose);
    line-height: var(--pf-leading-loose);
}

/*
 * El resumen es la entradilla de la ficha: se pinta sin cabecera propia, porque
 * es lo primero que se lee tras el titulo del hero, y un h2 «Resumen» sobre el
 * primer parrafo no aporta estructura, solo ruido. Tipografia mayor para que se
 * distinga del cuerpo.
 *
 * 6 de los 20 resumenes llegan envueltos en contenedores de Elementor, residuo
 * del editor anterior. Ese marcado trae sus propios margenes cuando el CSS de
 * Elementor todavia esta cargado; aqui se neutraliza el envoltorio para que el
 * espaciado lo mande esta hoja y no cambie al retirar Elementor en la fase 4.
 */
.pf-single-portafolio__resumen {
    font-size: var(--pf-text-lg);
    color: var(--pf-color-text-soft);
}

.pf-single-portafolio__resumen > div,
.pf-single-portafolio__resumen div[class*="elementor-"] {
    display: contents;
}

.pf-single-portafolio__prose > * + * {
    margin-top: var(--pf-space-xs);
}

.pf-single-portafolio__prose img {
    max-width: 100%;
    height: auto;
}

/* Bloque 1 · Contexto ----------------------------------------------------- */

/*
 * `dt` sin mayusculas: la regla de versalitas de «Expediente» las reserva a
 * eyebrow, categoria de entrada y titulos de columna del pie.
 */
.pf-single-portafolio__contexto-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--pf-space-md);
    margin: 0;
    padding-block: var(--pf-space-md);
    border-top: var(--pf-rule);
    border-bottom: var(--pf-rule);
}

.pf-single-portafolio__contexto-row dt {
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

.pf-single-portafolio__contexto-row dd {
    margin: var(--pf-space-3xs) 0 0;
    color: var(--pf-color-text);
}

/* Bloque tecnico plegado --------------------------------------------------- */

/*
 * `<details>` nativo: quien abre y cierra es el navegador, no un script, asi
 * que funciona con teclado y sin JavaScript y el estado lo anuncia el propio
 * elemento. Aqui solo se le quita el triangulo del sistema —que en cada
 * navegador es de un tamaño y de un color distintos— y se dibuja uno propio con
 * los tokens del tema.
 *
 * El marcador por defecto se retira por partida doble a proposito: Safari
 * antiguo solo entiende `::-webkit-details-marker` y el resto `list-style`.
 */
.pf-single-portafolio__tecnico-details {
    border: var(--pf-rule);
    border-radius: var(--pf-radius-card);
}

.pf-single-portafolio__tecnico-summary {
    display: flex;
    gap: var(--pf-space-xs);
    align-items: center;
    padding: var(--pf-space-sm) var(--pf-space-md);
    cursor: pointer;
    list-style: none;
}

.pf-single-portafolio__tecnico-summary::-webkit-details-marker {
    display: none;
}

/* El h2 dentro del summary: conserva el rango en el esquema de la pagina, pero
   no puede romper la linea del marcador, asi que va en linea. */
.pf-single-portafolio__tecnico-summary .pf-single-portafolio__section-title {
    margin: 0;
    font-size: var(--pf-text-lg);
}

/* Marcador propio. `aria-hidden` no hace falta: es contenido generado, que los
   lectores de pantalla no anuncian, y el estado ya lo dice el <details>. */
.pf-single-portafolio__tecnico-summary::after {
    flex: none;
    order: -1;
    width: 0;
    height: 0;
    content: "";
    border-top: 0.32em solid transparent;
    border-bottom: 0.32em solid transparent;
    border-left: 0.45em solid currentColor;
    transition: transform var(--pf-transition);
}

.pf-single-portafolio__tecnico-details[open] .pf-single-portafolio__tecnico-summary::after {
    transform: rotate(90deg);
}

.pf-single-portafolio__tecnico-summary:focus-visible {
    outline: 2px solid var(--pf-color-focus);
    outline-offset: 2px;
}

/* El relleno va en una sola declaracion: antes venia un `padding` abreviado con
   el lado superior a 0 y un `padding-top` detras que lo pisaba, que es lo mismo
   escrito dos veces y una invitacion a que el proximo cambio toque solo una de
   las dos (deuda de la revision de la tanda 13). */
.pf-single-portafolio__tecnico-body {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-md);
    padding: var(--pf-space-md);
    border-top: var(--pf-rule);
}

.pf-single-portafolio__tecnico-subtitle {
    margin: 0 0 var(--pf-space-2xs);
}

@media (prefers-reduced-motion: reduce) {
    .pf-single-portafolio__tecnico-summary::after {
        transition: none;
    }
}

/* Dibujo de arquitectura, dentro del bloque plegado ------------------------ */

.pf-single-portafolio__diagrama {
    margin: 0 0 var(--pf-space-md);
}

/*
 * El dibujo del tema (issue #154) va acotado: a ancho completo, un esquema de
 * cuatro cajas se estira y las lineas quedan finisimas al lado del texto. El
 * `figcaption` lo nombra y la lista numerada lo describe, asi que los tres van
 * juntos y con el mismo ancho.
 */
.pf-single-portafolio__diagrama--dibujo {
    max-width: 34rem;
}

.pf-single-portafolio__diagrama-svg {
    display: block;
    width: 100%;
    height: auto;
}

.pf-single-portafolio__diagrama-caption {
    margin-top: var(--pf-space-2xs);
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

/* Numerales que emparejan con los digitos del dibujo. La lista no lleva el
   `list-style` del navegador: el numero se pinta con `counter` para poder darle
   el peso y el color de la tinta, como los indices de expediente del resto del
   sitio. */
.pf-single-portafolio__diagrama-pasos {
    margin: var(--pf-space-sm) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: pf-diagrama;
}

.pf-single-portafolio__diagrama-pasos > li {
    position: relative;
    padding-left: var(--pf-space-md);
    font-size: var(--pf-text-sm);
    line-height: var(--pf-leading-normal);
    counter-increment: pf-diagrama;
}

.pf-single-portafolio__diagrama-pasos > li + li {
    margin-top: var(--pf-space-2xs);
}

.pf-single-portafolio__diagrama-pasos > li::before {
    position: absolute;
    left: 0;
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-heading);
    content: counter(pf-diagrama);
}

.pf-single-portafolio__diagrama-image {
    display: block;
    max-width: 100%;
    height: auto;
    border: var(--pf-rule);
    border-radius: var(--pf-radius-card);
}

/* Bloque 6 · Resultados --------------------------------------------------- */

/* Misma forma que la franja de prueba de la portada: cifra grande, etiqueta
   atenuada y un filete a la izquierda. Una columna en movil, tres desde 768. */
.pf-single-portafolio__resultados-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pf-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .pf-single-portafolio__resultados-list {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
}

.pf-single-portafolio__resultado {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-3xs);
    padding-left: var(--pf-space-sm);
    border-left: var(--pf-rule);
}

.pf-single-portafolio__cifra {
    font-size: var(--pf-text-2xl);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-tight);
    color: var(--pf-color-heading);
    overflow-wrap: anywhere;
}

.pf-single-portafolio__etiqueta {
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

/* Con que se hizo y cuanto tardo, dentro del bloque plegado ---------------- */

/* Pildoras segun la regla de uso: 13px, peso 400, borde 1px, fondo surface,
   sin mayusculas. Sin enlace: los archivos de herramienta se redirigen en la
   tanda 12. */
.pf-single-portafolio__stack-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-single-portafolio__stack-item {
    padding: var(--pf-space-3xs) var(--pf-space-xs);
    font-size: var(--pf-text-xs);
    font-weight: var(--pf-weight-regular);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-text);
    background: var(--pf-color-surface);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-pill);
}

.pf-single-portafolio__duracion {
    margin: var(--pf-space-sm) 0 0;
    color: var(--pf-color-text);
}

.pf-single-portafolio__duracion-label {
    color: var(--pf-color-text-muted);
}

/* Bloque 8 · Cita del cliente --------------------------------------------- */

/* Sin `font-style: italic`: los modulos no simulan cursiva (decision 10). El
   filete navy de la izquierda es lo que la distingue de la prosa. */
.pf-single-portafolio__cita {
    max-width: var(--pf-single-portafolio-measure);
    margin: 0;
    padding-left: var(--pf-space-md);
    border-left: 2px solid var(--pf-color-brand);
}

.pf-single-portafolio__cita-text {
    margin: 0;
    font-size: var(--pf-text-lg);
    line-height: var(--pf-leading-normal);
    color: var(--pf-color-text);
}

.pf-single-portafolio__cita-text > p {
    margin: 0;
}

.pf-single-portafolio__cita-text > p::before {
    content: "«";
}

.pf-single-portafolio__cita-text > p::after {
    content: "»";
}

.pf-single-portafolio__cita-caption {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-2xs);
    margin-top: var(--pf-space-xs);
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

.pf-single-portafolio__cita-autor {
    color: var(--pf-color-text);
}

/* El separador solo cuando hay autor delante: un cargo suelto no lo lleva. */
.pf-single-portafolio__cita-autor + .pf-single-portafolio__cita-cargo::before {
    content: "·";
    margin-right: var(--pf-space-2xs);
}