/* ── Variables ──────────────────────────────────────────── */
:root {
    --color-white: var(--wp--preset--color--white);
    --color-text: var(--wp--preset--color--black);
    --color-main-blue: var(--wp--preset--color--main-blue);
    --color-white-02: var(--wp--preset--color--white-02);
    --color-white-03: var(--wp--preset--color--white-03);
    --color-white-04: var(--wp--preset--color--white-04);
    --color-muted: var(--wp--preset--color--text-secondary);
    --color-border: var(--wp--preset--color--grey-05);
    --color-subtle: var(--wp--preset--color--text-secondary);
    /* Antes #aaaaaa, gris propio sin equivalente en la paleta y con solo
       2.13:1 de contraste sobre fondo blanco/white-02 — muy por debajo del
       4.5:1 de WCAG AA (blockquote cite, figcaption, .related-read).
       Unificado con el resto de texto secundario del tema. */
    --font-serif: 'Space Grotesk', sans-serif, 'Times New Roman', serif;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --max-width: 1600px;
    --pad-h: 60px;
    --pad-element: 3rem;
    --pad-top-hero: 118px;

    --gap-category: 3rem;
}

/* Typo */
:root {
    --font-serif: "Space Grotesk", sans-serif;
    --font-sans: "Helvetica Neue", sans-serif;

    --font-size-medium: 1.125rem;
    /* 18px */
    --font-size-small: 1rem;
    /* 16px */
    --font-size-extra-small: 0.813rem;
    /* 13px */
    --font-size-form-tag: 0.813rem;
    /* 13px */
    --font-size-h1: var(--wp--preset--font-size-h1);
    --font-size-h2: var(--wp--preset--font-size-h2);
    --font-size-h3: var(--wp--preset--font-size-h3);
    --font-size-h4: var(--wp--preset--font-size-h4);
    --font-size-h5: var(--wp--preset--font-size-h5);
    --font-size-h6: var(--wp--preset--font-size-h6);

    --line-height-medium: 1.688rem;
    /* 27px */
    --line-height-small: 1.25rem;
    /* 20px */
    --line-height-extra-small: 1rem;
    /* 16px */
    --line-height-form-tag: 1rem;
    /* 16px */
    --line-height-h1: var(--wp--preset--line-height-h1);
    --line-height-h2: var(--wp--preset--line-height-h2);
    --line-height-h3: var(--wp--preset--line-height-h3);
    --line-height-h4: var(--wp--preset--line-height-h4);
    --line-height-h5: var(--wp--preset--line-height-h5);
    --line-height-h6: var(--wp--preset--line-height-h6);

    --font-weight-400: var(--wp--custom--weight-400);
    --font-weight-500: var(--wp--custom--weight-500);
    --font-weight-700: var(--wp--custom--weight-700);

    --margin-h1: 20px 0px;
}

/* HTML */
:root {
    aside {
        width: 100%;
        margin-inline-start: unset;
        border: unset;
    }

    section {
        margin: auto !important;
    }
}

/* Image */
:root {
    --min-height-image: 495px;
}


/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 920px) {
    :root {
        --pad-h: 20px;
        --pad-element: 2rem;
        --pad-top-hero: 50px;
        --gap-category: 1.5rem;

        --margin-h1: 10px 0px;

        --font-size-medium: 1rem;

        --min-height-image: 349px;
    }
}

/* ============================================================
   Magazine Style
   Base: .single-entry (for single post) + .index-arc (for index/archive)
   ============================================================ */

/* ── Base ───────────────────────────────────────────────── */
.single-entry,
.index-arc {
    background: var(--color-white-04);
    color: var(--color-text);
    font-family: var(--font-serif);
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-400);
    min-height: 100vh;
    padding-top: var(--pad-top-hero);
}

/* ── Pre-header: category ─────────────────────── */
.entry-pre-header,
.arc-category {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2.5rem;
    padding-bottom: 0;
}

/* Etiqueta de categoría del single (pastilla). El menú de categorías del
   blog (.arc-category-label) NO comparte este estilo: es una fila de enlaces
   blancos sobre la barra azul, con sus propias reglas más abajo. */
.entry-category-label {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    column-gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--wp--preset--color--transparent--blue);
    border-radius: var(--wp--custom--radius--full);
    background: var(--wp--preset--color--transparent--blue);
    color: var(--wp--preset--color--main-blue);
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    margin: 18px 0px 0px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


/* ============================================================
   SINGLE POST — Magazine Style
   Fuentes: Space Grotesk (serif titles) + Inter (body)
   Prefijo: .entry y .post
   ============================================================ */

/* ── Shared container ───────────────────────────────────── */
.entry-author-bar,
.post-body-wrapper,
.arc-filter {
    /* El tope incluye el gutter (como .header-general + .inner-header-general):
       el contenido llega a 1600px y su borde coincide con el del header. */
    max-width: calc(var(--max-width) + 2 * var(--pad-h));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pad-h);
    padding-right: var(--pad-h);
}

/* ── Cabecera (categoría + título + compartir + imagen) ──────────
   Mismo lenguaje visual que blocks/texto-imagen: columna de texto
   (categoría, título, compartir en la posición del botón) a la
   izquierda y la imagen destacada a la derecha, 50/50 con 60px de
   hueco — mismas medidas que .inner-texto-image/.col-text/.col-image,
   reutilizando aquí las variables ya existentes (--max-width,
   --min-height-image) en vez de duplicar valores nuevos. */
.entry-header-layout {
    /* Mismo tope que el contenedor compartido (gutter incluido), alineado con
       el header en todos los anchos. */
    max-width: calc(var(--max-width) + 2 * var(--pad-h));
    margin: 0 auto;
    padding-left: var(--pad-h);
    padding-right: var(--pad-h);
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 60px;
}

.entry-header-layout.sin-media {
    display: block;
}

.entry-header-layout.sin-media .entry-header-text {
    width: 100%;
    max-width: none;
}

.entry-header-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 24px;
}

@media (max-width: 1440px) {
    .entry-header-text {
        max-width: 650px;
    }
}

@media (min-width: 1920px) {
    .entry-header-text {
        max-width: 650px;
    }
}

/* Categoría y compartir ya venían centradas (magazine style) — dentro de
   la columna de texto pasan a alinearse a la izquierda, igual que el
   eyebrow/botón de texto-imagen. */
.entry-header-text .entry-pre-header {
    justify-content: flex-start;
    padding-top: 0;
    /* El hueco de 18px sobre la etiqueta ya lo aporta .entry-category-label
       (margin: 18px 0 0), idéntico a .sr-tag en single-recurso. */
}

.entry-header-text .entry-share-bar {
    justify-content: flex-start;
    padding-bottom: 0;
}

/* ── Título ────────────────────────────────────────────── */
.entry-title-wrapper {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-bottom: 1rem;
    justify-self: center;
    text-align: center;
}

.entry-header-text .entry-title-wrapper {
    padding: 0;
    justify-self: flex-start;
    text-align: left;
}

.entry-header-text .title-h1 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    font-weight: var(--font-weight-500);
    /* Sin el margin 20px/10px de .title-h1: el ritmo vertical de la columna
       lo da el row-gap:24 de .entry-header-text, igual que .sr-title (margin:0). */
    margin: 0;
}

/* Extracto — misma posición y estilo que la descripción de texto-imagen
   (.texto-image-description), justo debajo del H1. */
.entry-excerpt {
    margin: 0;
    /* Space Grotesk (no Inter): mismo tipo que .sr-descripcion en single-recurso. */
    font-family: var(--font-serif);
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-400);
    color: var(--color-text);
}

.title-h1 {
    font-family: var(--font-serif);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-h1);
    color: var(--color-text);
    margin: var(--margin-h1);
}

/* ── Author bar ─────────────────────────────────────────── */
.entry-author-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
}

.entry-author-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.entry-author-avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.entry-author-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.entry-author-name {
    font-size: var(--font-size-form-tag);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text);
    line-height: 1.4;
}

.entry-author-role {
    font-size: var(--font-size-form-tag);
    font-weight: 400;
    color: var(--color-main-blue);
    line-height: 1.4;
}

.entry-date-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.entry-published {
    font-size: var(--font-size-form-tag);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    line-height: 1.6;
}

.entry-reading-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    font-size: var(--font-size-form-tag);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text);
    line-height: 1.6;
}

.entry-reading-time::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--color-text);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Hero image ─────────────────────────────────────────── */
.post-hero {
    width: 50%;
    position: relative;
}

@media (min-width: 1441px) {
    .post-hero {
        max-width: 700px;
    }

    .post-hero img {
        height: 604px;
    }
}

.post-hero img {
    display: block;
    width: 100%;
    min-height: var(--min-height-image);
    object-fit: cover;
}

/* 1230px, no 920px: mismo punto en el que el menú cambia a hamburguesa, para
   que toda la familia de bloques/páginas de dos columnas pase a móvil a la
   vez que la navegación (ver blocks/texto-imagen). */
@media (max-width: 1230px) {
    .entry-header-layout {
        flex-direction: column-reverse;
        row-gap: 12px;
    }

    .entry-header-text,
    .post-hero {
        width: 100%;
        max-width: none;
    }

    .entry-header-text .title-h1 {
        font-size: var(--font-size-h3);
        line-height: var(--line-height-h3);
    }
}

/* ── Two-column body ──────────────────────────────────── */
.post-body-wrapper {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-template-rows: auto;
    gap: 0 2rem;
    align-items: start;
    margin: 2rem auto;
}

/* ── Left sidebar ───────────────────────────────────────── */
.entry-sidebar-left {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.sidebar-label {
    display: block;
    text-transform: uppercase;
    color: var(--wp--preset--color--main--blue);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-700);
    line-height: var(--wp--preset--line-height--small);
}

/* ── Share bar ─────────────────────────────────────────── */
.entry-share-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1rem;
    margin-bottom: 0;
}

/* Share icons — círculo de fondo claro con el icono en su color propio
   (LinkedIn en azul de marca, email en negro), mismo tamaño/lenguaje que los
   botones circulares ya usados en el tema (.servicios-cards-2-nav,
   .arc-pagination-nav): 44px, fondo white-02, sombra suave. */
.entry-share-icons {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.entry-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-main-blue);
    box-shadow: var(--shadow-sm);
    color: var(--color-white);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.entry-share-icon:hover {
    background-color: var(--wp--preset--color--hover--blue);
}

.entry-share-icons svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* Index tags */
.entry-tags-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.entry-tags-list li a {
    font-size: var(--font-size-form-tag);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
    text-decoration: none;
    transition: color 0.15s ease;
    line-height: 1.4;
}

.entry-tags-list li a:hover {
    color: var(--color-text);
}

/* ── Main article content ───────────────────────────────── */
.post-content,
.sidebar-right {
    /* Space Grotesk en todo el cuerpo del artículo (antes Inter vía --font-sans). */
    font-family: var(--font-serif);
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    color: var(--color-text);
    min-width: 0;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    padding: var(--pad-element);
    /* prevent grid blowout */
}

.post-content h2 {
    font-family: var(--font-serif);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: var(--font-weight-500);
    color: var(--color-text);
    margin: 2.5rem 0 0.9rem;

}

.post-content h3 {
    font-family: var(--font-serif);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    font-weight: var(--font-weight-500);
    color: var(--color-text);
    margin: 2rem 0 0.75rem;
}

.post-content h4 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
    font-weight: var(--font-weight-700);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 1.75rem 0 0.6rem;
}

.post-content p {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-400);
}

.post-content ul,
.post-content ol {
    display: flex;
    flex-direction: column;
    padding-inline-start: var(--font-size-medium);
    row-gap: 0.5em;
}

.post-content ul li,
.post-content ol li {
    padding-inline-start: var(--font-size-medium);
}

.post-content ul li::marker,
.post-content ol li::marker {
    color: var(--color-text);
    font-weight: var(--font-weight-700);
}

/* Blockquote */
.post-content blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem 1.25rem 2rem;
    border-left: 5px solid var(--color-main-blue);
    background: var(--color-white-03);
    font-style: italic;
    color: var(--color-text);
}

.post-content blockquote p {
    margin-bottom: 0.5rem;
}

.post-content blockquote cite,
.post-content blockquote footer {
    display: block;
    font-style: normal;
    font-size: var(--font-size-form-tag);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-subtle);
    margin-top: 0.75rem;
}

/* Images inside content */
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.75rem 0;
}

.post-content figure {
    margin: 2rem 0;
}

.post-content figure img {
    margin: 0;
}

.post-content figcaption {
    font-size: var(--font-size-extra-small);
    color: var(--color-subtle);
    margin-top: 0.5rem;
    line-height: 1.5;
}

.post-content bloquenote {
    border-left: 4px solid var(--color-main-blue);
    font-style: italic;
    margin: 1.5rem 0;
    background: var(--color-white-04);
    padding: 1rem;
}

.post-content table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    border: none;
    border-radius: var(--standard-border-radius);
    background-color: var(--color-white);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.post-content table th {
    color: var(--color-white);
    background: var(--color-main-blue);
    text-align: left;
    font-weight: var(--font-weight-500);
    padding: 20px 24px;
    overflow-wrap: break-word;
}

.post-content table tr:nth-child(even) {
    background: var(--color-white-04);

}

.post-content table tr {
    transition: background 0.15s ease;
}


.post-content table td {
    padding: 20px 24px;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--color-text);
    font-weight: var(--font-weight-400);
    vertical-align: middle;
    border: none;
    overflow-wrap: break-word;
}

.post-content table td:first-child {
    width: 70%;
}

@media (max-width: 600px) {

    .post-content table th,
    .post-content table td {
        padding: 14px 16px;
    }
}

/* .post-content table td:last-child {
    text-align: center;
    font-weight: var(--font-weight-700);
    color: var(--color-main-blue);
    font-size: var(--font-size-extra-small);
    white-space: nowrap;
    min-width: 160px;
} */

/* WordPress gallery */
.post-content .wp-block-gallery,
.post-content .gallery {
    margin: 2rem 0;
}

/* Links */
.post-content a {
    color: var(--color-main-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post-content a:hover {
    color: var(--color-text);
}

/* ── Right sidebar ──────────────────────────────────────── */
.sidebar-right {
    position: sticky;
    top: 120px;
    border-radius: var(--standard-border-radius);
}

.entry-related {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Sin imagen — solo título + "Leer más" por artículo relacionado. */
.related-card {
    display: flex;
    flex-direction: column;
}

.related-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.related-title {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--font-size-small);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    text-decoration: none;
}

.related-title:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.related-read {
    display: block;
    font-size: var(--font-size-extra-small);
    font-weight: var(--font-weight-700);
    text-transform: uppercase;
    color: var(--color-main-blue);
    line-height: var(--line-height-extra-small);
    text-decoration: none;
}

.related-read:hover {
    color: var(--color-text);
}


/* ── Banner CTA — mismo estilo que blocks/cta-franja, variante azul
   (--cta-color: main-blue): tarjeta redondeada con margen alrededor,
   contenido centrado, botón sólido blanco. Ver blocks/cta-franja/styles.css. */
.entry-banner-wrapper {
    box-sizing: border-box;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 40px var(--pad-h);
    background-color: var(--color-main-blue);
}

.entry-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    padding: 72px 40px;
    border-radius: 32px;
    background-color: var(--color-main-blue);
}

.entry-banner-title {
    margin: 0;
    width: auto;
    color: var(--color-white);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-700);
}

.entry-banner-text {
    margin: 0;
    width: auto;
    color: var(--color-white);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-400);
    line-height: 1.6;
}

/* Geometría/tipografía desde "Botón unificado" (base.css). Aquí solo:
   la variante clara (blanco sobre la franja azul) y el margen propio. */
.entry-banner-cta {
    margin-top: 8px;
    background-color: var(--color-white);
    color: var(--color-main-blue);
}

.entry-banner-cta:hover {
    box-shadow: var(--shadow-on-dark);
}

@media (max-width: 920px) {
    .entry-banner-title {
        font-size: var(--font-size-h4);
    }
}

@media (max-width: 768px) {
    .entry-banner {
        padding: 48px 24px;
    }
}

/* ── Responsive ─────────────────────────────────────────── */
/* Colapso a una columna en 1230px (no 960px): entre 1230 y 960 el artículo
   compartía fila con la sidebar de 400px y quedaba en 400-680px, demasiado
   estrecho para leer. Desde 1230px el artículo se ve a una columna, como en
   móvil. (Convive con el otro @media 1230px de más arriba; este, al ir
   después, gana los empates.) */
@media (max-width: 1230px) {

    .post-body-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "sidebar-right"
            "sidebar-left";
        gap: 2.5rem 0;
        margin-top: 2rem;
        margin-bottom: 0rem;
    }

    .entry-banner-wrapper {
        margin-top: 0rem;
    }

    .entry-sidebar-left {
        grid-area: sidebar-left;
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
        gap: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--color-border);
    }

    .sidebar-right {
        grid-area: sidebar-right;
        position: static;
    }

    .post-content {
        grid-area: content;
    }

    .sidebar-right .entry-next-series {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }


    .entry-next-series .next-series-card a>img,
    .entry-next-series .next-series-card>a img {
        height: 100px;
        width: 140px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .entry-related {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

}

@media (max-width: 600px) {
    :root {
        --pad-h: 1.25rem;
    }

    .entry-author-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .entry-date-meta {
        text-align: left;
    }

    .entry-reading-time {
        justify-content: flex-start;
    }

    .entry-title {
        font-size: var(--font-size-h1);
    }

}

/* ============================================================
   INDEX — misma estructura y estilos que page-recursos.php
   (.pr-* en assets/css/page-recursos.css / pr-shared.css), pero con
   nombres de clase propios de esta plantilla (.arc-*) en vez de
   compartir las clases .pr-* — mismas reglas, duplicadas a propósito.
   Fuentes: Space Grotesk (titulares) + Inter (texto)
   ============================================================ */

.arc-page {
    background: var(--wp--preset--color--white);
}

/* ── Hero (= .pr-hero) ────────────────────────────────────── */
.arc-hero {
    background: linear-gradient(180deg, #ffffff, #ffffff1f), url(/wp-content/themes/opensalud-design/assets/img/principal.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Mismo criterio que .pr-hero en page-recursos.css: hueco superior de
       118px para despejar el menú fijo, laterales y base con los tokens
       de sección. */
    padding: 118px var(--wp--custom--section--x) var(--wp--custom--section--y-compact);
    text-align: center;
    /* Misma altura y justificación que el componente central tipo 1
       (blocks/central/styles.css → .block-central.central-type_1). */
    display: flex;
    align-items: center;
    min-height: 586px;
}

.arc-hero-wrapper {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arc-badge {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--wp--preset--color--transparent--blue);
    border-radius: var(--wp--custom--radius--full);
    background-color: var(--wp--preset--color--transparent--blue);
    color: var(--wp--preset--color--main-blue);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    margin: 18px 0px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.arc-hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    margin: 0;
    font-size: var(--wp--preset--font-size-h2);
    line-height: var(--wp--preset--line-height-h2);
    font-weight: var(--wp--custom--weight-500);
    color: var(--wp--preset--color--black);
    text-wrap: balance;
}

.arc-hero-intro {
    margin: 1em 0;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: var(--wp--custom--weight-400);
    line-height: var(--wp--preset--line-height--medium);
    color: var(--wp--preset--color--black);
    text-wrap: balance;
}

/* ── Bloque de tarjetas (= .pr-cards-section) ────────────────── */
.arc-cards-section {
    padding: var(--wp--custom--section--y) var(--wp--custom--section--x) var(--wp--custom--section--y-compact);
    background-color: var(--wp--preset--color--white-04);
}

.arc-cards-wrapper {
    max-width: var(--wp--custom--layout--content-size);
    margin: 0 auto;
}

.arc-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 64px;
}

/* Mismo estilo/estructura que la tarjeta secundaria de
   blocks/destacados-articulos (.destacado-secundario-2), duplicado aquí
   con nombre propio — sin imagen (a diferencia de la tarjeta destacada
   principal de ese bloque, esta variante nunca la lleva). */
.arc-card {
    position: relative;
    height: 100%;
    border-radius: var(--wp--custom--radius--xl);
    background-color: var(--wp--preset--color--white);
    overflow: hidden;
}

.arc-card a {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

/* Círculo que crece desde la esquina inferior derecha al pasar el ratón,
   invirtiendo la tarjeta a azul marca — mismo mecanismo que
   .card-fill-secundario-2 (clip-path, no transform/scale, para que el
   radio de cobertura no dependa de la proporción de la tarjeta). */
.arc-card-fill {
    position: absolute;
    inset: 0;
    background-color: var(--wp--preset--color--white);
    clip-path: circle(116px at 100% 100%);
    transition: clip-path 0.45s ease, background-color 0.45s ease;
    z-index: 0;
    pointer-events: none;
    margin: -16px;
}

/* Solo en dispositivos con puntero real: en táctil el :hover se queda "pegado"
   tras el tap y la animación del círculo (.arc-card-fill) se congela a media
   expansión — una mancha azul en mitad de la tarjeta. */
@media (hover: hover) {
    .arc-card:hover .arc-card-fill {
        clip-path: circle(2000px at 100% 100%);
        background-color: var(--wp--preset--color--main-blue);
    }
}

.arc-card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 24px;
}

/* Foto circular en la esquina superior derecha — mismo tamaño/posición que
   .servicio-card-media en blocks/servicios-cards (align-self:flex-end
   dentro de una columna la empuja a la derecha, siendo el primer hijo queda
   arriba). Solo se imprime si el artículo tiene imagen destacada. */
.arc-card-media {
    position: relative;
    z-index: 1;
    align-self: flex-end;
    width: 120px;
    height: 120px;
    margin-bottom: 12px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;

}

.arc-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.arc-card-tag {
    position: relative;
    z-index: 1;
    color: var(--wp--preset--color--main-blue);
    font-weight: var(--wp--custom--weight-700);
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--preset--line-height--small);
    margin-bottom: 18px;
    text-transform: uppercase;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--wp--preset--color--transparent--blue);
    border-radius: var(--wp--custom--radius--full);
    background-color: var(--wp--preset--color--transparent--blue);
    letter-spacing: 0.02em;
    text-decoration: none;
}

.arc-card-title {
    position: relative;
    z-index: 1;
    color: var(--wp--preset--color--black);
    font-size: var(--wp--preset--font-size-h5);
    line-height: var(--wp--preset--line-height-h5);
    font-weight: var(--wp--custom--weight-500);
    margin: 0 0 18px;
    transition: color 0.35s ease;
}

.arc-cards-empty {
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--wp--preset--color--text-secondary);
    margin-bottom: 40px;
}

/* Fila inferior: texto a la izquierda, flecha a la derecha — el enlace
   sigue siendo la tarjeta entera (ver .arc-card a), así que este texto es
   solo visual, no un enlace propio. */
.arc-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.arc-card-cta-text {
    color: var(--wp--preset--color--main-blue);
    font-weight: var(--wp--custom--weight-700);
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--preset--line-height--small);
    text-transform: uppercase;
    transition: color 0.35s ease;
}

.arc-card-arrow {
    display: flex;
    color: var(--wp--preset--color--main-blue);
    transition: color 0.35s ease;
}

@media (hover: hover) {

    .arc-card:hover .arc-card-title,
    .arc-card:hover .arc-card-cta-text,
    .arc-card:hover .arc-card-arrow {
        color: var(--wp--preset--color--white);
    }

    .arc-card:hover .arc-card-tag {
        border-color: var(--wp--preset--color--white-02);
        background-color: var(--wp--preset--color--white-02);
    }
}

/* Paginación (anterior/siguiente) — mismo lenguaje visual que las flechas
   circulares de los carruseles del tema (.servicios-cards-2-nav): botón
   blanco redondo con icono azul marca y sombra suave. Página siguiente
   pegada al margen derecho vía margin-left:auto — así queda a la derecha
   tanto si aparecen las dos flechas como si solo hay una (p. ej. en la
   última página, donde solo existe "anterior", a la izquierda). */
.arc-pagination {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.arc-pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--main-blue);
    box-shadow: var(--shadow-md);
    transition: background-color 0.2s ease;
}

.arc-pagination-nav:hover {
    background-color: var(--wp--preset--color--white-02);
}

.arc-pagination-prev {
    transform: scaleX(-1);
}

.arc-pagination-next {
    margin-left: auto;
}

@media (max-width: 1200px) {
    .arc-cards-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* 920px: mismo breakpoint que single / single-recurso / contacto para el
   padding de sección (la rejilla mantiene sus puntos propios: 1200 / 768). */
@media (max-width: 920px) {
    .arc-hero {
        padding: var(--wp--custom--section--y-compact-mobile) var(--wp--custom--section--x-mobile);
        /* Igual que .block-central.central-type_1 en móvil: se libera la altura fija. */
        min-height: auto;
    }

    .arc-hero h1 {
        font-size: var(--wp--preset--font-size-h2);
    }

    .arc-cards-section {
        padding: var(--wp--custom--section--y-mobile) var(--wp--custom--section--x-mobile);
    }
}

@media (max-width: 768px) {
    .arc-hero {
        background: linear-gradient(177deg, #ffffff0d, #ffffffc7), url(/wp-content/themes/opensalud-design/assets/img/principal.webp);
        background-size: cover;
        background-position: center;
    }

    .arc-badge,
    .arc-card-tag,
    .entry-category-label {
        text-wrap: balance;
    }

    .arc-hero h1 {
        font-size: var(--wp--preset--font-size-h4);
    }

    .arc-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 48px;
    }

    .arc-card-body {
        padding: 20px;
    }
}

.arc-category {
    padding-bottom: 2.5rem;
    background: var(--color-main-blue);
    position: relative;
}

.arc-category-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-700);
    text-transform: uppercase;
}

.arc-category-text {
    display: block;
}

.arc-category-arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    cursor: pointer;
    padding-bottom: 3px;
    background-color: var(--color-white);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("../img/arrow-acordeon-down.svg");
    mask-image: url("../img/arrow-acordeon-down.svg");
}

.arc-category-toggle.open .arc-category-arrow {
    transform: rotate(180deg);
}

.arc-category-menu {
    display: flex;
    gap: var(--gap-category);
}

.arc-category-label {
    text-decoration: none;
    color: var(--color-white);
    /* Área de toque >= 44x44px (WCAG 2.5.8): se amplía con padding
       en vez de tamaño de fuente para no alterar la jerarquía visual. */
    display: inline-flex;
    align-items: center;
    padding: 12px 10px;
    font-family: var(--font-serif);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    /* Reserva el grosor del subrayado en reposo para que el texto no salte
       1px al aparecer en hover/activo. */
    border-bottom: 1px solid transparent;
    /* Mismo micro-desplazamiento que los ítems del menú principal
       (.menu-main .menu-item: translateX(3px) al hover), aquí en vertical. */
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.arc-category-label:hover,
.arc-category-label.is-active {
    color: var(--color-white);
    transform: translateY(-3px);
    transition-duration: 0.5s;
    border-bottom-color: var(--color-white);
}

@media (max-width: 920px) {
    .arc-category {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 0;
        padding-bottom: 0;
    }

    .arc-category-toggle {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }

    .arc-category-menu {
        width: 100%;
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .arc-category.open .arc-category-menu {
        max-height: 500px;
    }

    .arc-category-label {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        text-align: center;
    }

    /* En el acordeón (lista apilada a ancho completo) el estado se comunica
       invirtiendo el color, no con el desplazamiento vertical del desktop. */
    .arc-category-label:hover,
    .arc-category-label.is-active {
        transform: none;
        border-bottom-color: rgba(255, 255, 255, 0.2);
        background-color: var(--color-white);
        color: var(--color-main-blue);
    }
}