/* ==========================================================================
   Home — componentes nuevos (Iteracion 4)

   Igual que navigation.css: SOLO estructura y comportamiento. Todos los
   colores y tipografias se consumen desde las variables --fixpro-* para que
   el aspecto sea hoy identico al de la plantilla y adopte la identidad de
   PCBOX Leon en cuanto esas variables pasen a ser alias de los tokens --pcx-*.
   ========================================================================== */

/* ------------------------------------------------- Correccion de idioma */

/* Aqui habia una lista de selectores anulando text-transform: capitalize.
   La plantilla lo aplicaba a titulares, antetitulos, enlaces y botones: en
   ingles es una convencion tipografica, en castellano es una falta ("Tu
   Tienda De Informatica", "Pedir Presupuesto"). Ir tapandolo selector a
   selector significaba descubrir cada caso nuevo en pantalla, asi que las
   52 declaraciones se han borrado de su sitio -- style.css y los modulos.
   Si vuelve a aparecer un texto capitalizado, la causa esta alli, no aqui. */

/* -------------------------------------------------- Hero de doble entrada */

.pcx-hero__paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 620px;
    margin-top: 38px;
}

/* Ambas tarjetas comparten estilo exacto: la decision 50/50 se rompe si una
   parece primaria y la otra secundaria. */
.pcx-hero__path {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 10px;
    background-color: rgba(var(--fixpro-white-rgb), 0.08);
    border: 1px solid rgba(var(--fixpro-white-rgb), 0.18);
    transition: background-color 200ms linear, border-color 200ms linear, transform 200ms linear;
}

.pcx-hero__path:hover,
.pcx-hero__path:focus-visible {
    background-color: rgba(var(--fixpro-base-rgb), 0.16);
    border-color: var(--fixpro-base);
    transform: translateY(-2px);
}

.pcx-hero__path-icon {
    flex: 0 0 auto;
    font-size: 26px;
    line-height: 1;
    color: var(--fixpro-base);
}

.pcx-hero__path-body {
    flex: 1 1 auto;
    min-width: 0;
}

.pcx-hero__path-title {
    display: block;
    font-family: var(--fixpro-font-two);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--fixpro-white);
}

.pcx-hero__path-sub {
    display: block;
    margin-top: 3px;
    font-family: var(--fixpro-font);
    font-size: 13px;
    line-height: 1.35;
    color: rgba(var(--fixpro-white-rgb), 0.68);
}

.pcx-hero__path-arrow {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--fixpro-base);
    transition: transform 200ms linear;
}

.pcx-hero__path:hover .pcx-hero__path-arrow {
    transform: translateX(4px);
}

.pcx-hero__proof {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 0;
    font-family: var(--fixpro-font);
    font-size: 15px;
    line-height: 1.4;
    color: rgba(var(--fixpro-white-rgb), 0.75);
}

.pcx-hero__proof-score {
    padding: 4px 10px;
    border-radius: 999px;
    background-color: rgba(var(--fixpro-base-rgb), 0.18);
    font-weight: 700;
    color: var(--fixpro-white);
}

/* Aviso de confianza corto y opcional (panel admin, ver
   admin/lib.php:pcx_trust_badge_slots()). Pensado para fondos oscuros
   (hero, pie de pagina) -- si algun dia aparece sobre fondo claro
   necesitara su propia variante de color. */
.pcx-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: rgba(var(--fixpro-base-rgb), 0.18);
    font-weight: 600;
    color: var(--fixpro-white);
    line-height: 1.4;
}

.pcx-trust-badge__mark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

@media only screen and (max-width: 767px) {
    .pcx-hero__paths {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 30px;
    }
}

/* ------------------------------------------------ Banda de CTA final */

.pcx-cta {
    position: relative;
    padding: 96px 0;
    background-color: var(--fixpro-black);
    overflow: hidden;
    z-index: 1;
}

.pcx-cta__bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: .10;
    z-index: -1;
}

.pcx-cta__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.pcx-cta__eyebrow {
    margin: 0 0 12px;
    font-family: var(--fixpro-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fixpro-base);
}

.pcx-cta__title {
    margin: 0 0 14px;
    font-family: var(--fixpro-font-two);
    font-size: 38px;
    line-height: 1.18;
    font-weight: 700;
    color: var(--fixpro-white);
}

.pcx-cta__text {
    margin: 0 0 30px;
    font-family: var(--fixpro-font);
    font-size: 17px;
    line-height: 1.6;
    color: rgba(var(--fixpro-white-rgb), 0.72);
}

.pcx-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 26px;
}

.pcx-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: var(--fixpro-font-two);
    font-size: 17px;
    font-weight: 600;
    color: var(--fixpro-white);
}

.pcx-cta__phone span[class^="icon-"] {
    color: var(--fixpro-base);
}

.pcx-cta__phone:hover {
    color: var(--fixpro-base);
}

@media only screen and (max-width: 767px) {
    .pcx-cta {
        padding: 64px 0;
    }

    .pcx-cta__title {
        font-size: 27px;
    }

    .pcx-cta__actions {
        flex-direction: column;
        gap: 14px;
    }

    .pcx-cta__actions .thm-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------------------------- Rotulo de dato pendiente */

/* Marca visualmente los placeholders {{...}} para que ningun dato sin validar
   pueda publicarse por descuido. Se retira cuando el cliente confirme los datos. */
.pcx-ph {
    padding: 0 4px;
    border-radius: 3px;
    background-color: rgba(255, 193, 27, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 193, 27, 0.55);
    font-style: normal;
}

/* ------------------------------------------------------------------ Foco */

.pcx-hero__path:focus-visible {
    outline: 2px solid var(--fixpro-base);
    outline-offset: 3px;
}

/* Contador pendiente de dato: ocupa el hueco del odometro sin fingir una cifra. */
.pcx-counter-ph {
    display: inline-block;
    font-family: var(--fixpro-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

/*--------------------------------------------------------------
# Páginas de servicio (pcx-pagina-*)
--------------------------------------------------------------*/
/* Bloques de una landing de servicio. Reutilizan .section-title y .pcx-cta
   de la Home; lo que se añade aquí es solo lo que esas no cubren. El fondo
   de cada sección lo decide la alternancia de tono (ver §2.2.2 de
   docs/OPERATIVA-TECNICA.md), por eso no se declara ninguno. */
.pcx-pagina {
   position: relative;
   display: block;
   padding: 100px 0;
}

.pcx-pagina__intro-texto {
   max-width: 780px;
   margin: 0 auto;
   text-align: center;
   font-size: 18px;
   line-height: 32px;
}

.pcx-pagina__tarjeta {
   height: 100%;
   background-color: var(--fixpro-white);
   box-shadow: 0px 10px 39.2px 0.8px rgba(0, 0, 0, 0.1);
   border-radius: var(--fixpro-bdr-radius);
   border-top: 5px solid var(--fixpro-base);
   padding: 30px 30px 34px;
}

.pcx-pagina__tarjeta-titulo {
   font-size: 22px;
   font-weight: 700;
   line-height: 32px;
   margin-bottom: 12px;
}

.pcx-pagina__tarjeta-texto {
   margin: 0;
}

/* Las tarjetas van en .row (columnas de Bootstrap): con altura automática
   los bordes de abajo salen escalonados según el largo del texto. */
.pcx-pagina--fila-igual,
.pcx-pagina-tarjetas .row {
   display: flex;
   flex-wrap: wrap;
}

/* Con cuatro tarjetas la fila se parte en pantallas medianas, y sin esto
   la segunda tanda se pega a la primera. */
.pcx-pagina-tarjetas .row>[class*="col-"] {
   margin-bottom: 30px;
}

/* Tarjeta cuyo título es el enlace. No hay un "ver más" aparte a propósito:
   si la página de destino se apaga desde el panel, el enlace desaparece y
   queda el título, que sigue siendo cierto -- prestamos el servicio aunque
   no enseñemos su página. Un botón suelto se quedaría sin sentido. */
.pcx-pagina__tarjeta-titulo a {
   color: inherit;
   transition: color 300ms ease;
}

.pcx-pagina__tarjeta-titulo a::after {
   content: "\f105";
   font-family: "Font Awesome 5 Pro";
   font-weight: 400;
   font-size: 16px;
   margin-left: 8px;
   color: var(--fixpro-base);
}

.pcx-pagina__tarjeta:hover .pcx-pagina__tarjeta-titulo a,
.pcx-pagina__tarjeta-titulo a:hover {
   color: var(--fixpro-base);
}

.pcx-pagina__acciones {
   text-align: center;
   margin: 34px 0 0;
}

/* Si el botón que había dentro llevaba a una página apagada, se lo lleva la
   poda de enlaces y queda el hueco. Sin esto se ve como un margen suelto.
   Por eso el botón va pegado a la etiqueta en el HTML, sin salto de línea:
   :empty no perdona ni un espacio. */
.pcx-pagina__acciones:empty {
   display: none;
}

/* El fondo oscuro SE DECLARA aqui, y tiene que seguir coincidiendo con lo
   que dice pcx_tonos_seccion() ('oscuro'). Sin esta linea la seccion salia
   transparente -- es decir, blanca -- con el texto en blanco encima: la
   tabla de tonos describe lo que pinta el CSS, no lo impone. */
.pcx-pagina-pasos {
   background-color: var(--fixpro-black);
   color: var(--fixpro-white);
}

.pcx-pagina-pasos .section-title__title {
   color: var(--fixpro-white);
}

.pcx-pagina__pasos {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 30px;
   margin: 0;
}

.pcx-pagina__paso-num {
   font-family: var(--fixpro-font-two);
   font-size: 34px;
   font-weight: 700;
   line-height: 1;
   color: var(--fixpro-base);
   margin-bottom: 14px;
}

/* Misma rejilla, pero sin numerar: cuatro cosas que se sostienen a la vez,
   no cuatro pasos de un proceso. Numerarlas diría que van en orden y no es
   verdad. El filete verde hace de ancla en lugar del número -- es el mismo
   remate que llevan las tarjetas por arriba. */
.pcx-pagina__paso--suelto {
   border-top: 3px solid var(--fixpro-base);
   padding-top: 20px;
}

.pcx-pagina__paso-titulo {
   font-size: 20px;
   font-weight: 700;
   line-height: 30px;
   color: var(--fixpro-white);
   margin-bottom: 10px;
}

.pcx-pagina__paso-texto {
   margin: 0;
   color: rgba(var(--fixpro-white-rgb), 0.75);
}

@media only screen and (max-width: 991px) {
   .pcx-pagina {
      padding: 70px 0;
   }

   .pcx-pagina__pasos {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media only screen and (max-width: 575px) {
   .pcx-pagina__pasos {
      grid-template-columns: 1fr;
   }
}

/* Precio destacado de una landing de servicio. */
.pcx-pagina__precio {
   margin: 18px auto 0;
   text-align: center;
   font-family: var(--fixpro-font-two);
   font-size: 26px;
   font-weight: 700;
   color: var(--fixpro-base);
}

/* Lista de puntos con marca de verificacion. En dos columnas desde tablet:
   con ocho puntos, una sola columna deja la seccion muy larga y obliga a
   desplazarse para ver que incluye el servicio. */
.pcx-pagina__puntos {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px 40px;
   max-width: 900px;
   margin: 0 auto;
}

.pcx-pagina__puntos li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
}

.pcx-pagina__puntos li span[class^="icon-"] {
   color: var(--fixpro-base);
   font-size: 15px;
   line-height: 28px;
   flex: 0 0 auto;
}

.pcx-pagina__puntos li p {
   margin: 0;
}

/* Dentro de la seccion oscura el texto va en blanco: hereda el color de
   .pcx-pagina-pasos, pero el <p> de la plantilla trae el suyo propio. */
.pcx-pagina-pasos .pcx-pagina__puntos li p {
   color: rgba(var(--fixpro-white-rgb), 0.85);
}

@media only screen and (max-width: 767px) {
   .pcx-pagina__puntos {
      grid-template-columns: 1fr;
   }
}

/*--------------------------------------------------------------
# Catálogo de equipos (página de gaming)
--------------------------------------------------------------*/
.pcx-pagina-catalogo .row {
   display: flex;
   flex-wrap: wrap;
}

.pcx-producto {
   margin-bottom: 30px;
}

.pcx-producto__tarjeta {
   display: flex;
   flex-direction: column;
   height: 100%;
   background-color: var(--fixpro-white);
   box-shadow: 0px 10px 39.2px 0.8px rgba(0, 0, 0, 0.1);
   border-radius: var(--fixpro-bdr-radius);
   overflow: hidden;
}

/* Caja de proporcion fija: todas las tarjetas reservan el mismo alto de
   imagen, tengan foto o no, y la foto se recorta para llenarla en vez de
   estirar la tarjeta. Antes era height:auto y la tarjeta crecia con la
   imagen -- de ahi que la de la foto desbordara y se comiera el texto de
   la de al lado. */
.pcx-producto__foto {
   position: relative;
   width: 100%;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   background-color: var(--fixpro-primary);
}

.pcx-producto__foto img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.pcx-producto__cuerpo {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   padding: 24px 24px 28px;
}

.pcx-producto__codigo {
   margin: 0 0 6px;
   font-size: 13px;
   letter-spacing: 0.04em;
   color: var(--fixpro-gray);
}

.pcx-producto__nombre {
   font-size: 17px;
   font-weight: 700;
   line-height: 26px;
   margin-bottom: 14px;
}

.pcx-producto__precios {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 10px;
}

.pcx-producto__precio {
   margin: 0;
   font-family: var(--fixpro-font-two);
   font-size: 26px;
   font-weight: 700;
   color: var(--fixpro-base);
}

/* Precio caducado: mismo hueco, sin cifra. Se pinta en gris y algo mas
   pequeno para que no se lea como una oferta. */
.pcx-producto__precio--consultar {
   font-size: 20px;
   color: var(--fixpro-gray);
}

.pcx-producto__pvpr {
   margin: 0;
   font-size: 15px;
   color: var(--fixpro-gray);
   text-decoration: line-through;
}

.pcx-producto__cupon {
   display: inline-block;
   align-self: flex-start;
   margin: 12px 0 0;
   padding: 5px 11px;
   border-radius: 999px;
   background-color: rgba(var(--fixpro-base-rgb), 0.12);
   font-size: 13px;
   font-weight: 600;
   color: var(--fixpro-base);
}

/* Los componentes van plegados: ocho lineas por equipo y cuatro equipos
   dejan la pagina ilegible. <details> nativo, sin JS. */
.pcx-producto__componentes {
   margin: 18px 0 0;
   border-top: 1px solid rgba(var(--fixpro-black-rgb), 0.10);
   padding-top: 14px;
}

.pcx-producto__componentes summary {
   cursor: pointer;
   font-weight: 600;
   color: var(--fixpro-black);
   list-style: none;
}

.pcx-producto__componentes summary::after {
   content: " +";
   color: var(--fixpro-base);
}

.pcx-producto__componentes[open] summary::after {
   content: " −";
}

.pcx-producto__componentes summary::-webkit-details-marker {
   display: none;
}

.pcx-producto__componentes ul {
   margin: 12px 0 0;
   padding: 0;
}

.pcx-producto__componentes li {
   position: relative;
   padding-left: 16px;
   margin-bottom: 6px;
   font-size: 15px;
   line-height: 24px;
}

.pcx-producto__componentes li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 10px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background-color: var(--fixpro-base);
}

/* El boton se pega abajo para que todas las tarjetas lo tengan a la misma
   altura aunque el nombre ocupe una linea mas. */
.pcx-producto__cta {
   margin-top: auto;
   align-self: flex-start;
}

.pcx-producto__aviso {
   max-width: 780px;
   margin: 10px auto 0;
   text-align: center;
   font-size: 14px;
   line-height: 22px;
   color: var(--fixpro-gray);
}

/*--------------------------------------------------------------
# Preguntas frecuentes y NAP
--------------------------------------------------------------*/
.pcx-faq {
   max-width: 820px;
   margin: 0 auto;
}

.pcx-faq__item {
   border-bottom: 1px solid rgba(var(--fixpro-black-rgb), 0.10);
   padding: 18px 0;
}

.pcx-faq__item summary {
   cursor: pointer;
   list-style: none;
   font-family: var(--fixpro-font-two);
   font-size: 18px;
   font-weight: 600;
   line-height: 28px;
   padding-right: 28px;
   position: relative;
}

.pcx-faq__item summary::-webkit-details-marker {
   display: none;
}

.pcx-faq__item summary::after {
   content: "+";
   position: absolute;
   right: 0;
   top: 0;
   font-size: 22px;
   line-height: 28px;
   color: var(--fixpro-base);
}

.pcx-faq__item[open] summary::after {
   content: "−";
}

.pcx-faq__item p {
   margin: 12px 0 0;
   padding-right: 28px;
}

/* NAP: nombre, direccion y telefono en el cuerpo de la pagina. Va en una
   caja discreta -- es informacion de referencia, no una llamada a la
   accion; el boton de presupuesto ya esta en el cierre. */
.pcx-nap {
   max-width: 820px;
   margin: 0 auto;
   padding: 26px 30px;
   border: 1px solid rgba(var(--fixpro-black-rgb), 0.10);
   border-radius: var(--fixpro-bdr-radius);
   text-align: center;
}

.pcx-nap__nombre {
   margin: 0 0 10px;
   font-family: var(--fixpro-font-two);
   font-size: 20px;
   font-weight: 700;
}

.pcx-nap__datos {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px 26px;
   margin: 0;
}

.pcx-nap__datos li {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.pcx-nap__datos span[class^="icon-"] {
   color: var(--fixpro-base);
}

/* Bloques de texto en dos columnas (marcas, plazos, garantia, pago,
   accesorios, por que en Leon). Seis parrafos seguidos a una columna se
   leen como un muro; en dos, cada uno se ve como lo que es. */
.pcx-pagina__info {
   margin-bottom: 34px;
}

.pcx-pagina__info-titulo {
   font-size: 22px;
   font-weight: 700;
   line-height: 32px;
   margin-bottom: 10px;
}

.pcx-pagina__info p {
   margin: 0;
}

.pcx-pagina-comofunciona {
   background-color: var(--fixpro-black);
   color: var(--fixpro-white);
}

.pcx-pagina-comofunciona .section-title__title {
   color: var(--fixpro-white);
}

.pcx-pagina__nota {
   max-width: 780px;
   margin: 34px auto 0;
   text-align: center;
   font-size: 15px;
   color: rgba(var(--fixpro-white-rgb), 0.70);
}

/*--------------------------------------------------------------
# Blog: articulos
--------------------------------------------------------------*/

/* Tarjeta de articulo. Reutiliza .blog-one__single de la plantilla (que ya
   trae fondo, sombra y radio) y solo anade lo que la plantilla resolvia con
   piezas que ya no existen: la fecha en una pastilla sobre la foto y el
   bloque de autor/comentarios. Aqui la fecha es una linea de texto normal,
   porque el cliente la escribe libre ("Noviembre 2026") y no cabe en la
   pastilla de dos lineas del original. */
.pcx-articulo-card {
    margin-bottom: 30px;
}

.pcx-articulo-card .blog-one__single {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Caja de proporcion fija: sin esto, dos fotos de distinta altura descuadran
   la fila entera. Mismo criterio que las tarjetas del catalogo. */
.pcx-articulo-card .blog-one__img {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.pcx-articulo-card .blog-one__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pcx-articulo-card .blog-one__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.pcx-articulo-card__fecha {
    font-size: 14px;
    line-height: 1;
    margin-bottom: 10px;
    color: var(--fixpro-base);
}

.pcx-articulo-card__resumen {
    margin-bottom: 20px;
}

/* El "leer" se pega abajo para que todas las tarjetas lo tengan a la misma
   altura, aunque una entradilla ocupe dos lineas y otra cuatro. */
.pcx-articulo-card .blog-one__read-more {
    margin-top: auto;
}

/* Boton "ver todos", centrado bajo la fila. */
.pcx-articulos__mas {
    text-align: center;
    margin-top: 20px;
}

/*--------------------------------------------------------------
# Blog: pagina de un articulo
--------------------------------------------------------------*/

/* Columna de lectura estrecha a proposito: un parrafo a todo el ancho del
   contenedor pasa de los 120 caracteres por linea y se lee mal. */
.pcx-articulo__inner {
    max-width: 760px;
    margin: 0 auto;
}

.pcx-articulo__fecha {
    font-size: 14px;
    line-height: 1;
    margin-bottom: 20px;
    color: var(--fixpro-base);
}

.pcx-articulo__foto {
    margin-bottom: 30px;
    border-radius: var(--fixpro-bdr-radius);
    overflow: hidden;
}

.pcx-articulo__foto img {
    width: 100%;
    height: auto;
    display: block;
}

/* La entradilla es la misma frase que sale en la tarjeta: se distingue del
   cuerpo para que no parezca un parrafo repetido. */
.pcx-articulo__entradilla {
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 24px;
    color: var(--fixpro-black);
}

.pcx-articulo__parrafo {
    margin-bottom: 18px;
}

.pcx-articulo__volver {
    margin-top: 30px;
}

.pcx-articulo__volver a {
    color: var(--fixpro-base);
    transition: color 300ms linear;
}

.pcx-articulo__volver a:hover {
    color: var(--fixpro-black);
}

/*--------------------------------------------------------------
# Blog: entradilla del indice
--------------------------------------------------------------*/

/* La frase que abre blog.html era un parrafo suelto de 18 px en gris, entre
   la cabecera oscura y la rejilla de tarjetas: no se leia como la entrada de
   la pagina, se leia como un pie de foto perdido. Se compone como una
   entradilla de verdad -- medida corta, escala de titular y un acento que la
   ancla -- siguiendo DESIGN-SYSTEM.md 5.3: medida de linea 60-75 caracteres
   y ningun tamano fuera de la escala (aqui, el token h3: 20 -> 24 px). */
.pcx-blog__intro {
    /* 780 px es la misma medida que ya usa .pcx-pagina__intro-texto. En "ch"
       no vale: la unidad se resuelve con el tamano de fuente de ESTE
       elemento (16 px), no con los 24 px del parrafo de dentro, y la linea
       se quedaba en 47 caracteres cuando la regla pide 60-75. */
    max-width: 780px;
    margin: 0 auto 64px;
    text-align: center;
}

/* El acento verde: la misma idea que el borde del antetitulo del resto del
   sitio, pero suelto y centrado, porque aqui no hay antetitulo al que
   subrayar -- el titular de la pagina ya esta en la cabecera oscura. */
.pcx-blog__intro-marca {
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 auto 28px;
    border-radius: 2px;
    background-color: var(--fixpro-base);
}

.pcx-blog__intro-texto {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.5;
    color: var(--fixpro-black);
    /* Reparte las lineas en vez de llenar la primera y dejar una palabra
       suelta abajo. El navegador que no lo entienda lo ignora y se queda
       con el corte normal: no hay nada que degradar. */
    text-wrap: balance;
}

/* La rejilla arrancaba pegada al texto porque .blog-one ya trae 120 px
   arriba y la entradilla se comia el hueco de abajo. */
.pcx-pagina.blog-one {
    padding-top: 80px;
}