/*
 * psicoprotego.css
 * Origen: CSS adicional del Personalizador de Kadence (post custom_css, ID 456).
 * Copiado byte a byte el 2026-09-30 para moverlo a fichero versionado del tema hijo.
 * No se ha modificado, reordenado ni limpiado ninguna regla.
 */
/* ==========================================================================
   PSICÓLOGOS PROTEGO
   Hoja completa para Apariencia → Personalizar → CSS adicional
   Revisión: 10 de septiembre de 2026
   ==========================================================================
    ORGANIZACIÓN
   1. Variables
   2. Base común  ..................  .pp-page
   3. Página About  ................  .pp-about
   4. Página Pozuelo  ..............  .pp-pozuelo
   5. Responsive

   Cada página se acota con su propia clase, así que nada de esto sale de
   la página donde se usa.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {
    --pp-verde:   #2d4a3e;
    --pp-salvia:  #4a5d52;
    --pp-dorado:  #8b6914;
    --pp-dorado-claro: #c9a87c;
    --pp-crema:   #f5f0eb;
    --pp-crema-osc: #e8e3dc;
    --pp-gris:    #666666;
    --pp-borde:   #e3dcd2;   /* nueva: bordes de tarjetas y fichas */
}


/* ==========================================================================
   2. BASE COMÚN  ·  .pp-page
   Lo que comparten todas las páginas maquetadas.
   ========================================================================== */

.pp-page * {
    box-sizing: border-box;
}

.pp-page {
    font-family: var(--global-body-font-family, sans-serif);
    color: var(--global-palette4, #2d3748);
    line-height: 1.7;
}

/* ---------- Etiqueta y título de sección ---------- */

.pp-page .section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--pp-dorado);
    margin-bottom: 20px;
}

.pp-page .section-title {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 400;
    color: var(--pp-verde);
    margin-bottom: 30px;
    line-height: 1.2;
}

.pp-page .section-title span {
    color: var(--pp-dorado);
}

.pp-page .section-subtitle {
    font-size: 1.1rem;
    color: var(--pp-gris);
    max-width: 600px;
    margin: 0 auto;
}

/* ---------- Sección de intro ---------- */

.pp-page .intro-section {
    padding: 80px 50px 100px;
    background: linear-gradient(180deg, var(--pp-crema) 0%, #fff 100%);
}

.pp-page .intro-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.pp-page .intro-content p {
    font-size: 1.1rem;
    color: var(--pp-gris);
    line-height: 1.9;
    margin-bottom: 20px;
}

.pp-page .intro-content p:last-child {
    margin-bottom: 0;
}

/* ---------- CTA final ---------- */

.pp-page .cta-section {
    text-align: center;
    padding: 100px 50px;
    background: var(--pp-verde);
}

.pp-page .cta-section h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--pp-crema);
    margin-bottom: 20px;
    font-weight: 400;
}

.pp-page .cta-section p {
    color: var(--pp-dorado-claro);
    font-size: 1.1rem;
    margin-bottom: 35px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Botones ---------- */

.pp-page .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 35px;
    border-radius: 35px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border: none;
}

.pp-page .btn-primary {
    background: var(--pp-dorado);
    color: var(--pp-crema);
}

.pp-page .btn-primary:hover {
    background: var(--pp-dorado-claro);
    color: var(--pp-verde);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Secundario: nuevo. About solo lleva un botón; Pozuelo lleva dos. */
.pp-page .btn-secondary {
    background: transparent;
    color: var(--pp-crema);
    border: 2px solid var(--pp-dorado-claro);
}

.pp-page .btn-secondary:hover {
    background: var(--pp-dorado-claro);
    color: var(--pp-verde);
    transform: translateY(-2px);
}


/* ==========================================================================
   3. PÁGINA ABOUT  ·  .pp-about
   Solo lo propio de esa página. Sin cambios respecto a tu hoja.
   ========================================================================== */

/* ---------- Filosofía ---------- */

.pp-about .philosophy-section {
    padding: 100px 50px;
    background: #fff;
}

.pp-about .philosophy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.pp-about .philosophy-content p {
    font-size: 1.05rem;
    color: var(--pp-gris);
    line-height: 1.8;
    margin-bottom: 20px;
}

.pp-about .philosophy-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.pp-about .philosophy-feature {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 25px;
    background: var(--pp-crema);
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pp-about .philosophy-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.pp-about .philosophy-feature-icon {
    width: 50px;
    height: 50px;
    background: var(--pp-verde);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.pp-about .philosophy-feature-text h4 {
    font-size: 1.1rem;
    color: var(--pp-verde);
    margin-bottom: 5px;
    font-weight: 500;
}

.pp-about .philosophy-feature-text p {
    font-size: 0.9rem;
    color: var(--pp-gris);
    margin: 0;
    line-height: 1.5;
}

/* ---------- Equipo, cabecera ---------- */

.pp-about .team-header {
    padding: 100px 50px 40px;
    background: var(--pp-crema);
    text-align: center;
}

/* ---------- El espacio ---------- */

.pp-about .space-section {
    padding: 100px 50px;
    background: #fff;
}

.pp-about .space-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.pp-about .space-content p {
    font-size: 1.05rem;
    color: var(--pp-gris);
    line-height: 1.8;
    margin-bottom: 20px;
}

.pp-about .space-features {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.pp-about .space-feature {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-about .space-feature-icon {
    width: 40px;
    height: 40px;
    background: var(--pp-crema);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.pp-about .space-feature span {
    font-weight: 500;
    color: var(--pp-verde);
    font-size: 0.95rem;
}

.pp-about .space-image {
    position: relative;
}

.pp-about .space-image-placeholder {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, var(--pp-verde) 0%, var(--pp-salvia) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.pp-about .space-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
}

.pp-about .space-badge {
    position: absolute;
    bottom: -20px;
    right: 30px;
    background: #fff;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
}

.pp-about .space-badge-icon {
    width: 45px;
    height: 45px;
    background: var(--pp-verde);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
}

.pp-about .space-badge-text {
    font-weight: 600;
    color: var(--pp-verde);
    font-size: 0.95rem;
}

.pp-about .space-badge-text span {
    display: block;
    font-weight: 400;
    color: var(--pp-gris);
    font-size: 0.85rem;
}


/* ==========================================================================
   4. PÁGINA POZUELO  ·  .pp-pozuelo
   Solo lo que esta página tiene y las demás no.
   ========================================================================== */

/* ---------- Secciones ---------- */

.pp-pozuelo .datos-section,
.pp-pozuelo .transporte-section,
.pp-pozuelo .faq-section {
    padding: 90px 50px;
    background: var(--pp-crema);
}

.pp-pozuelo .content-section {
    padding: 90px 50px;
    background: #fff;
}

.pp-pozuelo .seccion-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.pp-pozuelo .seccion-inner p {
    font-size: 1.05rem;
    color: var(--pp-gris);
    line-height: 1.8;
    margin-bottom: 20px;
}

.pp-pozuelo .seccion-inner p:last-child {
    margin-bottom: 0;
}

.pp-pozuelo .seccion-inner a {
    color: var(--pp-verde);
    text-decoration: underline;
    text-decoration-color: var(--pp-dorado-claro);
    text-underline-offset: 3px;
}

.pp-pozuelo .seccion-inner a:hover {
    color: var(--pp-dorado);
    text-decoration-color: var(--pp-dorado);
}

/* ---------- Ficha de datos rápidos ---------- */

.pp-pozuelo .datos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.pp-pozuelo .dato {
    background: #fff;
    border: 1px solid var(--pp-borde);
    border-radius: 16px;
    padding: 25px;
}

.pp-pozuelo .dato dt {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--pp-gris);
    margin-bottom: 10px;
}

.pp-pozuelo .dato dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--pp-verde);
    line-height: 1.5;
}

/* ---------- Tarjetas: transporte y servicios ----------
   El número de columnas se declara en el HTML con cols-4 o cols-3, y no
   con auto-fit: así una rejilla de cuatro no se parte en 3+1 ni la quinta
   tarjeta de servicios se queda suelta. */

.pp-pozuelo .card-grid {
    display: grid;
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

.pp-pozuelo .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pp-pozuelo .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.pp-pozuelo .card-grid + .seccion-inner {
    margin-top: 35px;
}

.pp-pozuelo .card {
    background: #fff;
    border-radius: 16px;
    padding: 30px 25px;
    border-top: 5px solid var(--pp-verde);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pp-pozuelo .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.pp-pozuelo .card:nth-child(2) { border-top-color: var(--pp-salvia); }
.pp-pozuelo .card:nth-child(3) { border-top-color: var(--pp-dorado-claro); }
.pp-pozuelo .card:nth-child(4) { border-top-color: var(--pp-dorado); }

.pp-pozuelo .card h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--pp-verde);
    margin: 0 0 8px;
}

.pp-pozuelo .card h3 a {
    color: inherit;
    text-decoration: none;
}

.pp-pozuelo .card h3 a:hover {
    color: var(--pp-dorado);
}

.pp-pozuelo .card p {
    font-size: 0.9rem;
    color: var(--pp-gris);
    line-height: 1.6;
    margin: 0;
}

/* Sobre fondo blanco, la tarjeta va en crema */
.pp-pozuelo .content-section .card {
    background: var(--pp-crema);
}

/* ---------- Caja destacada ---------- */

.pp-pozuelo .nota-destacada {
    background: var(--pp-crema);
    border-left: 5px solid var(--pp-dorado);
    border-radius: 16px;
    padding: 30px 35px;
    max-width: 1000px;
    margin: 0 auto;
}

.pp-pozuelo .nota-destacada p {
    font-size: 1.05rem;
    color: var(--pp-gris);
    line-height: 1.8;
    margin-bottom: 20px;
}

.pp-pozuelo .nota-destacada p:last-child {
    margin-bottom: 0;
}

/* ---------- Imágenes ---------- */

.pp-pozuelo figure {
    max-width: 1000px;
    margin: 0 auto 40px;
}

.pp-pozuelo figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

.pp-pozuelo figcaption {
    font-size: 0.85rem;
    color: var(--pp-gris);
    margin-top: 12px;
    text-align: center;
}

/* ---------- FAQ plegable ---------- */

.pp-pozuelo .faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.pp-pozuelo .faq-item {
    background: #fff;
    border: 1px solid var(--pp-borde);
    border-radius: 12px;
    padding: 20px 25px;
    margin-bottom: 15px;
}

.pp-pozuelo .faq-item summary {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--pp-verde);
    cursor: pointer;
    list-style: none;
}

.pp-pozuelo .faq-item summary::-webkit-details-marker {
    display: none;
}

.pp-pozuelo .faq-item summary::after {
    content: "+";
    float: right;
    color: var(--pp-dorado);
    font-size: 1.3rem;
    line-height: 1;
}

.pp-pozuelo .faq-item[open] summary::after {
    content: "−";
}

.pp-pozuelo .faq-item[open] summary {
    margin-bottom: 12px;
}

.pp-pozuelo .faq-item p {
    font-size: 0.95rem;
    color: var(--pp-gris);
    line-height: 1.7;
    margin: 0;
}

/* ---------- Mapa ---------- */

.pp-pozuelo .mapa {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 20px;
    display: block;
    max-width: 1000px;
    margin: 0 auto;
}

/* ---------- Enlaces a las guías de zona, cuando existan ---------- */

.pp-pozuelo .zonas-links {
    font-size: 0.95rem;
    color: var(--pp-gris);
}

.pp-pozuelo .zonas-links a {
    white-space: nowrap;
}


/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {

    /* About */
    .pp-about .philosophy-grid,
    .pp-about .space-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .pp-about .philosophy-features {
        order: -1;
    }

    .pp-about .space-image {
        order: -1;
    }

    .pp-about .space-badge {
        right: 20px;
        bottom: -15px;
    }

    /* Pozuelo */
    .pp-pozuelo .card-grid.cols-4,
    .pp-pozuelo .card-grid.cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    /* Común */
    .pp-page .intro-section,
    .pp-page .cta-section {
        padding: 70px 30px;
    }

    /* About */
    .pp-about .philosophy-section,
    .pp-about .team-header,
    .pp-about .space-section {
        padding: 70px 30px;
    }

    .pp-about .philosophy-features {
        grid-template-columns: 1fr;
    }

    .pp-about .space-features {
        flex-direction: column;
        gap: 15px;
    }

    /* Pozuelo */
    .pp-pozuelo .datos-section,
    .pp-pozuelo .transporte-section,
    .pp-pozuelo .faq-section,
    .pp-pozuelo .content-section {
        padding: 70px 30px;
    }
}

@media (max-width: 600px) {

    /* Pozuelo */
    .pp-pozuelo .card-grid.cols-4,
    .pp-pozuelo .card-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    /* Común */
    .pp-page .intro-section,
    .pp-page .cta-section {
        padding: 50px 20px;
    }

    /* About */
    .pp-about .philosophy-section,
    .pp-about .space-section {
        padding: 50px 20px;
    }

    .pp-about .team-header {
        padding: 50px 20px 30px;
    }

    .pp-about .space-image-placeholder,
    .pp-about .space-image img {
        height: 280px;
    }

    .pp-about .space-badge {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 20px;
        justify-content: center;
    }

    /* Pozuelo */
    .pp-pozuelo .datos-section,
    .pp-pozuelo .transporte-section,
    .pp-pozuelo .faq-section,
    .pp-pozuelo .content-section {
        padding: 50px 20px;
    }

    .pp-pozuelo .mapa {
        height: 300px;
    }
}


/* ===== Escala de artículos (tipografía, fase 2) =====
 * El H1 del artículo está en el bloque "H1 global" (al final del fichero). */
.single-post .entry-content h2 {
  font-size: clamp(1.5625rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.2;
  margin: 1.8em 0 .55em;
}
.single-post .entry-content h3 {
  font-size: clamp(1.25rem, 1.1rem + .4vw, 1.375rem);
  line-height: 1.25;
  margin: 1.4em 0 .5em;
}
.single-post .entry-content p,
.single-post .entry-content li {
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  line-height: 1.65;
}
.single-post .entry-content p { margin: 0 0 1.1em; }
.single-post .entry-meta { font-size: .9375rem; color: var(--pp-salvia); }
.single-post .kadence-breadcrumbs,
.single-post .kadence-breadcrumbs a { font-size: .875rem; color: var(--pp-salvia); }

/* Migas en el móvil: solo "Inicio / Artículos" */
@media (max-width: 767px) {
  .single-post .kadence-breadcrumbs .kadence-bread-current,
  .single-post .kadence-breadcrumbs .bc-delimiter:has(+ .kadence-bread-current) { display: none; }
}

/* ===== Columna de lectura del artículo (fase 2, ajuste) =====
 * 40rem (640px de caja, con el padding de 32px por lado del propio
 * .entry-content-wrap en border-box, quedan 576px de contenido ≈ 68
 * caracteres/línea) en vez de em relativo al propio contenedor (16px), para
 * no depender de en qué fuente se resuelva. Centrado con margin-inline: auto.
 */
.single-post .entry-content-wrap {
  max-width: 40rem;
  margin-inline: auto;
}


/* ===== H1 global =====
 * Misma escala para el H1 de todas las plantillas de Kadence y el de Pozuelo,
 * la que estrenó el artículo en la fase 2 de tipografía. La home no se toca
 * (su H1 lo fija home.css).
 * Kadence (personalizador, kadence-global-inline-css) fija el H1 con `h1`
 * (0,0,1) para tamaño e interlineado, también dentro de sus @media, y el peso
 * con `.entry-hero h1` (0,1,1) y `.wp-site-blocks .post-title h1` (0,2,1).
 * Aquí se usa la misma especificidad o una mayor; donde empata, gana el orden,
 * porque psicoprotego.css carga después de kadence-global-inline-css.
 *   - .entry-hero h1: título en el hero (páginas, servicio, archivo de artículos)
 *   - h1.page-title: archivo de servicios y 404 (el h1 lleva la clase; con
 *     `.page-title` a secas también entraría el <header class="page-title"> de
 *     las páginas)
 *   - .wp-site-blocks .post-title h1: artículo
 *   - .profesional-title h1: ficha de profesional
 */
.entry-hero h1,
h1.page-title,
.wp-site-blocks .post-title h1,
.profesional-title h1,
.pp-pozuelo .intro-section h1 {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 2.875rem);
  line-height: 1.12;
  font-weight: 500;
}
/* Pozuelo: H1 del contenido. (0,2,1) gana a .pp-page .section-title (0,2,0)
 * y el margen superior anula el `.single-content h1 { margin-top: 1.5em }` de
 * Kadence (content.min.css). */
.pp-pozuelo .intro-section h1 {
  margin-top: 0;
}


/* ============================================================
   Infografías 3:4 (1080 x 1440) · decisión 69
   Se añade al final de assets/css/psicoprotego.css.
   Uso: bloque de imagen nativo con la clase adicional «pp-infografia».
   Solo afecta a las imágenes que llevan esa clase: las infografías
   antiguas no la tienen y se quedan como están.
   ============================================================ */

/* Escritorio y tableta: centrada y con ancho máximo.
   A 440 px la imagen mide 587 de alto: entera en una pantalla de portátil
   (1366 x 768) y con la letra a algo más de su tamaño de diseño (x1,22). */
.entry-content figure.wp-block-image.pp-infografia {
  max-width: 440px;
  margin: 2.5rem auto;
}
.entry-content figure.wp-block-image.pp-infografia img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  /* Borde suave: la lámina y la página son del mismo crema, y sin él no se lee como figura */
  border: 1px solid var(--pp-borde, #e3dcd2);
}

/* Varias láminas seguidas: menos aire entre ellas que con el texto */
.entry-content figure.wp-block-image.pp-infografia + figure.wp-block-image.pp-infografia {
  margin-top: -1rem;
}

/* Móvil: a sangre, de borde a borde de la pantalla.
   La imagen ya trae su propio margen de seguridad, así que no necesita el del texto,
   y a ancho completo la letra se ve a su tamaño de diseño o algo más (360 a 430 px). */
@media (max-width: 767px) {
  .entry-content figure.wp-block-image.pp-infografia {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .entry-content figure.wp-block-image.pp-infografia img {
    border-radius: 0;
    border-width: 1px 0;   /* a sangre: solo arriba y abajo */
  }
}


/* ==========================================================================
   ARTÍCULOS · apartados 3 a 6 de tema/articulos.css del repo del blog
   Frase destacada, preguntas frecuentes, referencias plegadas y aviso
   (decisión 73, 19-oct-2026). Acotado a .single-post y a clases pp-* que
   hoy solo llevan las entradas nuevas. El resto de la plantilla, con la
   migración (decisión 41).
   ========================================================================== */

/* ---------- 3. Frase destacada ----------
 * Un párrafo del propio texto, en la serif y más grande. Como mucho uno por
 * artículo. */
.single-post .entry-content p.pp-destacado {
  font-family: var(--global-heading-font-family, 'Source Serif 4', Georgia, serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  line-height: 1.3;
  color: var(--pp-verde);
  margin: 1.4em 0;
}


/* ---------- 4. Preguntas frecuentes ----------
 * Marcado que debe pintar el plugin (ver tema/README.md):
 *   section.pp-faq > h2 + details.pp-faq__item > summary + div.pp-faq__respuesta
 * El círculo de la derecha está vacío con la pregunta cerrada y relleno con
 * la pregunta abierta; el signo pasa de + a −. La pregunta va en la serif de
 * los títulos, a 500 (Kadence solo carga 400 y 500), para que se distinga de
 * la respuesta (decisión 73). */
.single-post .entry-content .pp-faq {
  margin: 2.5em 0 0;
}
.single-post .entry-content .pp-faq__item {
  border-bottom: 1px solid var(--pp-borde);
}
.single-post .entry-content .pp-faq__item:first-of-type {
  border-top: 1px solid var(--pp-borde);
}
.single-post .entry-content .pp-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  font-family: var(--global-heading-font-family, 'Source Serif 4', Georgia, serif);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--pp-verde);
}
.single-post .entry-content .pp-faq__item > summary::-webkit-details-marker {
  display: none;
}
.single-post .entry-content .pp-faq__item > summary::after {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--pp-verde);
  background:
    linear-gradient(var(--pp-verde), var(--pp-verde)) center / 12px 2px no-repeat,
    linear-gradient(var(--pp-verde), var(--pp-verde)) center / 2px 12px no-repeat;
}
.single-post .entry-content .pp-faq__item[open] > summary::after {
  background:
    linear-gradient(var(--pp-crema), var(--pp-crema)) center / 12px 2px no-repeat,
    var(--pp-verde);
}
.single-post .entry-content .pp-faq__item > summary:hover {
  color: var(--pp-salvia);
}
.single-post .entry-content .pp-faq__item > summary:focus-visible {
  outline: 2px solid var(--pp-dorado);
  outline-offset: 4px;
  border-radius: 4px;
}
.single-post .entry-content .pp-faq__respuesta {
  padding: 0 52px 22px 0;
}
.single-post .entry-content .pp-faq__respuesta p:last-child {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .single-post .entry-content .pp-faq__respuesta {
    padding-right: 0;
  }
}


/* ---------- 5. Referencias plegadas ----------
 * Bloque nativo «Detalles» con la clase pp-refs. Cerrado por defecto. */
.single-post .entry-content details.pp-refs {
  border-top: 1px solid var(--pp-borde);
  border-bottom: 1px solid var(--pp-borde);
  margin: 1.5em 0;
}
/* Justo después de las preguntas, sin raya doble: la de la última pregunta
 * hace de borde superior. */
.single-post .entry-content .pp-faq + details.pp-refs {
  border-top: 0;
  margin-top: 0;
}
.single-post .entry-content details.pp-refs > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pp-verde);
}
.single-post .entry-content details.pp-refs > summary::-webkit-details-marker {
  display: none;
}
.single-post .entry-content details.pp-refs > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-right: 2px solid var(--pp-verde);
  border-bottom: 2px solid var(--pp-verde);
  transform: translateY(-3px) rotate(45deg);
}
.single-post .entry-content details.pp-refs[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.single-post .entry-content details.pp-refs > summary:focus-visible {
  outline: 2px solid var(--pp-dorado);
  outline-offset: 4px;
  border-radius: 4px;
}
.single-post .entry-content details.pp-refs p {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--pp-salvia);
  padding-left: 1.6em;
  text-indent: -1.6em;
  margin: 0 0 .8em;
}
.single-post .entry-content details.pp-refs p:last-child {
  margin-bottom: 1.2em;
}


/* ---------- 6. Aviso de divulgación ---------- */
.single-post .entry-content p.pp-aviso {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--pp-salvia);
  margin: 0 0 1em;
}




/* ==========================================================================
   ARTÍCULOS · apartados 1-2 y 7-8 de tema/articulos.css del repo del blog
   Imagen destacada, título en el móvil, caja de autor y «Para seguir leyendo»
   (fase 4, bloque 3; aprobado por Emmanuel el 20-oct-2026)
   ========================================================================== */

/* ---------- 1. Imagen destacada ----------
 * En escritorio, esquinas redondeadas. En el móvil la imagen va a sangre,
 * de borde a borde, y ahí el redondeo no se aprecia: se deja recta. */
@media (min-width: 768px) {
  .single-post .article-post-thumbnail .post-thumbnail-inner {
    border-radius: 16px;
    overflow: hidden;
  }
  /* La caja del texto, que monta sobre la imagen, con el mismo lenguaje. */
  .single-post article.single-entry {
    border-radius: 12px;
  }
}


/* ---------- 2. Título en el móvil ----------
 * Más grande y más apretado que el H1 global (32 px). Mismo selector que el
 * bloque «H1 global», con .single-post delante para ganar en especificidad. */
@media (max-width: 767px) {
  .single-post .wp-site-blocks .post-title h1 {
    font-size: 2.5rem;
    line-height: 1.04;
    letter-spacing: -0.02em;
  }
}


/* ---------- 7. Caja de autor ----------
 * Tarjeta blanca redondeada debajo del artículo. La pinta la plantilla
 * template-parts/content/entry_author.php del tema hijo. */
.single-post .pp-autor {
  max-width: 40rem;
  margin: 2.5rem auto 0;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.single-post .pp-autor__foto {
  flex: none;
}
.single-post .pp-autor__foto img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.single-post .pp-autor__texto {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--pp-salvia);
}
.single-post .pp-autor__escrito {
  font-size: .875rem;
}
.single-post .pp-autor__nombre {
  display: block;
  font-family: var(--global-heading-font-family, 'Source Serif 4', Georgia, serif);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--pp-verde);
  margin: 2px 0 4px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--pp-dorado-claro);
}
.single-post .pp-autor__nombre:hover {
  color: var(--pp-dorado);
  text-decoration-color: var(--pp-dorado);
}
.single-post .pp-autor__texto p {
  margin: 0;
}
.single-post .pp-autor a {
  color: var(--pp-verde);
  text-underline-offset: .18em;
}
@media (max-width: 767px) {
  .single-post .pp-autor {
    margin: 2rem 1.25rem 0;
    padding: 22px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .single-post .pp-autor__foto img {
    width: 64px;
    height: 64px;
  }
  .single-post .pp-autor__nombre {
    font-size: 1.3125rem;
  }
}


/* ---------- 8. Para seguir leyendo ----------
 * Lista de tres artículos con miniatura. La pinta la plantilla
 * template-parts/content/entry_related.php del tema hijo. */
.single-post .pp-relacionados {
  max-width: 40rem;
  margin: 2.5rem auto 4rem;
  box-sizing: border-box;
  padding: 0 2rem;
}
.single-post .pp-relacionados__titulo {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 1rem;
}
.single-post .pp-relacionados__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.single-post .pp-relacionados__enlace {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: center;
  text-decoration: none;
}
.single-post .pp-relacionados__enlace img,
.single-post .pp-relacionados__vacia {
  display: block;
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--pp-crema-osc);
}
.single-post .pp-relacionados__nombre {
  font-family: var(--global-heading-font-family, 'Source Serif 4', Georgia, serif);
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--pp-verde);
}
.single-post .pp-relacionados__enlace:hover .pp-relacionados__nombre {
  color: var(--pp-dorado);
}
@media (max-width: 767px) {
  .single-post .pp-relacionados {
    padding: 0 1.25rem;
  }
  .single-post .pp-relacionados__enlace {
    grid-template-columns: 96px 1fr;
    gap: 14px;
  }
  .single-post .pp-relacionados__enlace img,
  .single-post .pp-relacionados__vacia {
    width: 96px;
    height: 66px;
    border-radius: 6px;
  }
  .single-post .pp-relacionados__nombre {
    font-size: 1.125rem;
  }
}