/**
 * main.css — Estilos globales del theme RBL Web Cert (rediseño)
 *
 * Primer tramo: solo lo que renderizan header.php / footer.php / los
 * modales de Verificar y Privacidad. El resto (home, archive, single,
 * blog, contacto, about) se suma como CSS propio por plantilla a
 * medida que se construya cada sección — mismo patrón condicional que
 * rbl-web-gcc (ver functions.php).
 */

/* ─────────────────────────────────────────────────────────
   CONTENEDOR
   ───────────────────────────────────────────────────────── */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}


/* ─────────────────────────────────────────────────────────
   ENTRADA SUTIL AL HACER SCROLL — la clase .rbl-reveal la agrega
   theme.js (sección 17) por JS al arrancar, nunca vive en el HTML de
   origen — así, si el JS no carga, el contenido nunca queda invisible.
   ───────────────────────────────────────────────────────── */

.rbl-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.rbl-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .rbl-reveal { opacity: 1; transform: none; transition: none; }
}


/* ─────────────────────────────────────────────────────────
   PAGE-INTRO — hero "split" compartido por páginas secundarias
   (template-parts/page-intro.php). Usado hoy en Contáctenos y
   Quiénes Somos; vive en main.css porque es un componente
   compartido entre varias plantillas, no de una sola sección.
   ───────────────────────────────────────────────────────── */

/* Sin padding-top ni franja blanca: el fondo de color arranca
   inmediatamente después del header (pedido explícito: "pegado al
   header"). El padding-bottom es más chico que el alto de la imagen
   a propósito — así .page-intro__media sobresale hacia abajo, sobre
   el contenido que venga después.
   margin-bottom: usado en todas las páginas secundarias (Quiénes
   Somos, Contáctenos, catálogo y detalle de certificación) — el Home
   no pasa por acá, usa .home-hero, un componente aparte. */
/* Sin overflow:hidden acá a propósito — .page-intro__media necesita
   sobresalir hacia abajo del hero (margin-bottom negativo). El
   recorte horizontal del patrón decorativo vive en su propio wrapper,
   .page-intro__pattern-clip, que no afecta a la foto. */
.page-intro {
    position: relative;
    background: var(--color-primario);
    padding: 40px 0 0;
    margin-bottom: 80px;
}

/* Envoltorio SOLO para recortar el patrón — el overflow:hidden va
   acá, no en .page-intro, porque .page-intro__media necesita
   sobresalir hacia abajo del hero (margin-bottom negativo) y un
   overflow:hidden en el ancestro común le cortaría también esa parte
   de la foto. Este wrapper cubre el mismo alto que .page-intro
   (inset:0 contra su ancestro position:relative), sin tocar el resto
   del hero. */
.page-intro__pattern-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Isotipo decorativo (ya no es una franja repetida) — un solo
   isotipo tal cual, pegado a la izquierda del hero, de extremo a
   extremo arriba y abajo del contenedor. El ancho sigue al alto vía
   aspect-ratio 1/1 — sigue siendo cuadrado, solo que ahora ese
   cuadrado ocupa el alto completo del hero; el wrapper de arriba es
   quien recorta el sobrante en pantallas angostas. */
.page-intro__pattern {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    opacity: 0.15;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* position + z-index: sin esto, el patrón decorativo (absolute)
   pinta ARRIBA del contenido aunque esté antes en el DOM y tenga
   z-index:0 — un descendiente position:absolute siempre pinta por
   encima de uno estático, sin importar el orden en el HTML. */
.page-intro__row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding-bottom: 56px;
}

/* padding-left reserva un espacio REAL y fijo para el ícono del
   título (ver .page-intro__title-icon) — a diferencia de un position
   absolute "suelto" que puede salirse del contenedor y recortarse,
   este espacio es parte de la caja del panel: nunca se corta el
   ícono ni el texto, a cualquier ancho de pantalla. Tagline, título
   y descripción quedan igual de indentados, así que se mantienen
   alineados entre sí. */
.page-intro__panel { padding-top: 8px; padding-left: 92px; }

.page-intro__eyebrow {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-blanco);
    margin-bottom: 20px;
}

/* El ícono vive DENTRO del padding-left del panel (position:absolute
   relativo al título, left negativo = ancho del padding reservado) —
   nunca sale de la caja del panel, así que nunca se recorta.
   Tagline, título y descripción quedan igual de indentados por ese
   mismo padding-left, así que se mantienen alineados entre sí. */
.page-intro__title {
    position: relative;
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--color-blanco);
    margin: 0 0 24px;
}

/* isotipo-white.svg tal cual, sin ningún tipo de modificación (ni
   filtro, ni marco, ni caja) — solo tamaño y posición. */
.page-intro__title-icon {
    position: absolute;
    top: 0;
    left: -72px;
    display: flex;
    width: 56px;
    height: 56px;
}

.page-intro__title-icon img,
.page-intro__title-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-intro__panel p {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,0.92);
    margin: 0 0 20px;
}

.page-intro__panel p:last-child { margin-bottom: 0; }

/* La imagen sobresale SOLO hacia abajo (margin-bottom negativo) —
   arriba queda al ras del panel de texto, no pega hacia arriba.
   z-index por encima del patrón decorativo (.page-intro__pattern),
   que va detrás. */
.page-intro__media {
    position: relative;
    z-index: 1;
    margin-bottom: -96px;
}

/* Cuadrada, y misma forma de esquinas asimétricas que los botones
   (calcada del isotipo de SIFE) — ver .header-cta-btn en main.css. */
/* Radio en % (no px fijo como los botones) — es un elemento mucho más
   grande, así que necesita cantidades más grandes para que la forma
   se note igual de marcada; en % escala solo con el tamaño real que
   termine ocupando en cada pantalla, siempre a la misma proporción
   que el path del isotipo real (~31% / ~14% de su lado). */
.page-intro__media img,
.page-intro__media-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 31% 14% 31% 14%;
    box-shadow: 0 24px 60px rgba(13,13,13,0.28);
}

.page-intro__media-placeholder {
    background: var(--color-texto);
}

/* media_html (ej. niveles-grid en single-certificacion.php) — no es
   una imagen cuadrada que sobresale, así que no hereda ese offset. */
.page-intro__media--custom { margin-bottom: 0; display: flex; align-items: center; }

@media (max-width: 900px) {
    .page-intro__row { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
    .page-intro__media { margin-bottom: 0; }
}

@media (max-width: 600px) {
    .page-intro { padding-top: 24px; }
    .page-intro__title { margin-bottom: 16px; }
    /* Reserva más chica en mobile (proporción, no seguridad — el
       padding-left del panel sigue garantizando que nunca se corte
       nada, a cualquier ancho). Cuadrado perfecto igual acá. */
    .page-intro__panel { padding-left: 64px; }
    .page-intro__title-icon {
        left: -48px;

        width: 40px;
        height: 40px;
    }
}


/* ─────────────────────────────────────────────────────────
   HEADER — barra plana de extremo a extremo del navegador, sin
   sombra ni forma de pastilla (a diferencia de rbl-web-gcc: acá no
   hay estado "flotante" que cambie al scrollear, es siempre la
   misma barra sólida). Solo un borde inferior sutil para separarla
   del contenido.
   ───────────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    background: var(--color-blanco);
    border-bottom: 1px solid var(--color-borde);
    transition: background 0.25s ease, border-color 0.25s ease;
}

/* Header invertido — SOLO al hacer scroll (JS agrega esta clase,
   theme.js sección 18), no es el estado original de la página. */
.site-header.is-scrolled {
    background: var(--color-primario);
    border-bottom-color: rgba(255,255,255,0.14);
}

/* Logo: dos archivos reales, se togglean por display — el archivo
   "blanco" tiene la S del isotipo como hueco transparente (se ve el
   azul del header a través), un filtro CSS sobre el de color
   aplanaba ese hueco y la S dejaba de notarse.
   Selector compuesto (.site-logo-link.site-logo-link--blanco) a
   propósito: la regla base .site-logo-link (más abajo en este mismo
   archivo) tiene la misma especificidad que un selector de una sola
   clase, y por cascada gana la que está más abajo — con el selector
   compuesto queda con más especificidad y no hay ambigüedad de orden. */
.site-logo-link.site-logo-link--blanco { display: none; }
.site-header.is-scrolled .site-logo-link--color { display: none; }
.site-header.is-scrolled .site-logo-link--blanco { display: flex; }

/* Misma sombra de relieve que en Home (ver body.home .site-logo-link--
   blanco más abajo), acá aplicada al resto de páginas — pero SOLO en
   el estado scrolleado (.is-scrolled), que es el único momento en que
   estas páginas también muestran el logo blanco sobre el azul sólido.
   En su estado inicial (header blanco, logo de color) no aplica. */
.site-header.is-scrolled .site-logo-link--blanco img,
.site-header.is-scrolled .site-logo-link--blanco svg {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}

.site-header.is-scrolled .lang-switch {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.3);
}

.site-header.is-scrolled .lang-switch__link { color: rgba(255,255,255,0.75); }
.site-header.is-scrolled .lang-switch__link:hover { color: var(--color-blanco); }

.site-header.is-scrolled .lang-switch__link.is-active {
    background: var(--color-blanco);
    color: var(--color-primario);
}

.site-header.is-scrolled .nav-toggle {
    background: var(--color-blanco);
    border-color: var(--color-blanco);
}

.site-header.is-scrolled .hamburger-bar { background: var(--color-primario); }

/* Header transparente — SOLO en Home, y SOLO antes de scrollear
   (:not(.is-scrolled)). El resto de páginas no tiene .home en el
   <body>, así que esta regla nunca las toca — siguen con el header
   blanco sólido de siempre. Al hacer scroll en Home, .is-scrolled se
   activa igual que en cualquier página (mismo JS) y gana el fondo
   azul sólido normal, sin nada especial acá.
   position:fixed (no sticky, a diferencia de la regla base) — así el
   header deja de reservar su propio espacio en el flujo del documento
   y .home-hero puede arrancar en el mismísimo tope de la pantalla,
   quedando detrás del header transparente en vez de debajo. */
body.home .site-header { position: fixed; }

/* Azul al 50% (no transparente del todo) — garantiza contraste del
   header incluso si la imagen de fondo del hero es muy clara. */
body.home .site-header:not(.is-scrolled) {
    background: rgba(20, 56, 127, 0.5);
    border-bottom-color: transparent;
}

body.home .site-header:not(.is-scrolled) .site-logo-link--color { display: none; }
body.home .site-header:not(.is-scrolled) .site-logo-link--blanco { display: flex; }

/* Sombra negra de relieve — SOLO en Home, donde el logo blanco va
   sobre fondos variables (foto del hero al inicio, azul sólido al
   hacer scroll) y necesita despegarse más. drop-shadow (no
   box-shadow) sigue la silueta real del isotipo en vez de dibujar un
   rectángulo detrás. El logo blanco es el mismo en ambos estados de
   Home (inicio y scrolleado, ver reglas de arriba), así que una sola
   regla sin filtrar por .is-scrolled cubre los dos casos. */
body.home .site-logo-link--blanco img,
body.home .site-logo-link--blanco svg {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}

body.home .site-header:not(.is-scrolled) .lang-switch {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.3);
}

body.home .site-header:not(.is-scrolled) .lang-switch__link { color: rgba(255,255,255,0.75); }
body.home .site-header:not(.is-scrolled) .lang-switch__link:hover { color: var(--color-blanco); }

body.home .site-header:not(.is-scrolled) .lang-switch__link.is-active {
    background: var(--color-blanco);
    color: var(--color-primario);
}

body.home .site-header:not(.is-scrolled) .nav-toggle {
    background: var(--color-blanco);
    border-color: var(--color-blanco);
}

body.home .site-header:not(.is-scrolled) .hamburger-bar { background: var(--color-primario); }

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 72px;
    padding: 14px 32px;
    gap: 20px;
    box-sizing: border-box;
}

.site-branding { flex-shrink: 0; }

.site-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo-link:hover { text-decoration: none; opacity: 0.85; }
.site-logo-link img,
.site-logo-link svg {
    display: block;
    width: 168px;
    height: auto;
    max-width: 100%;
}

/* ─────────────────────────────────────────────────────────
   OVERLAY DE NAVEGACIÓN (#site-nav) — a CUALQUIER tamaño de
   pantalla, no solo mobile. El hamburguesa (.header-controls) es el
   único disparador de la navegación completa; la barra compacta del
   header nunca muestra el nav-list expandido. Panel alineado a la
   DERECHA (drawer, no modal centrado): 30% del ancho en desktop y
   tablet, 80% en mobile (ver media query más abajo) — nunca pantalla
   completa, sobre un fondo oscuro semitransparente clickeable.
   ───────────────────────────────────────────────────────── */

.site-nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: stretch;
    justify-content: flex-end;
    background: rgba(13, 13, 13, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.site-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.site-nav__panel {
    position: relative;
    width: 30%;
    padding: 28px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-primario);
    background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.06), transparent 60%);
}

.nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 320px;
    list-style: none;
}

.nav-item {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    opacity: 0;
    transform: translateY(16px);
}

.nav-item:last-child { border-bottom: none; }

.site-nav.open .nav-item {
    animation: rblNavItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.site-nav.open .nav-item:nth-child(1) { animation-delay: 0.10s; }
.site-nav.open .nav-item:nth-child(2) { animation-delay: 0.16s; }
.site-nav.open .nav-item:nth-child(3) { animation-delay: 0.22s; }
.site-nav.open .nav-item:nth-child(4) { animation-delay: 0.28s; }
.site-nav.open .nav-item:nth-child(5) { animation-delay: 0.34s; }

.nav-item a {
    display: block;
    padding: 18px 16px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--color-blanco);
    text-decoration: none;
    transition: color 0.15s;
}

.nav-item a:hover,
.nav-item.current a {
    background: transparent;
    color: var(--color-acento-lt);
    text-decoration: none;
}

@keyframes rblNavItemIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lang-switch {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    padding: 3px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.lang-switch__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 6px 11px;
    border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-texto-claro);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.lang-switch__link:hover {
    color: var(--color-texto);
    text-decoration: none;
}

.lang-switch__link.is-active {
    background: var(--color-primario);
    color: var(--color-blanco);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.lang-switch__link.is-active:hover {
    background: var(--color-primario);
    color: var(--color-blanco);
}

.lang-switch__link:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

/* Forma de marca: esquinas asimétricas calcadas del isotipo de SIFE
   (SVG del ícono — radio grande en superior-izq/inferior-der, chico
   en las otras 2). Mismo criterio en .header-verify-btn y
   .nav-toggle más abajo — es la firma visual de los botones. */
.header-cta-btn {
    display: inline-block;
    background: var(--color-acento);
    color: var(--color-blanco);
    padding: 10px 22px;
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s;
}

.header-cta-btn:hover {
    filter: brightness(1.08);
    color: var(--color-blanco);
    text-decoration: none;
}

/* Botón "Verificar Certificado" del header — outline verde, distinto
   al CTA sólido de Certificaciones para no competir con él. */
.header-verify-btn {
    display: inline-block;
    background: transparent;
    color: var(--color-primario);
    border: 1.5px solid var(--color-borde);
    padding: 8.5px 20px;
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.header-verify-btn:hover {
    background: var(--color-acento-lt);
    border-color: var(--color-acento);
    color: var(--color-acento);
}

/* Dentro del panel oscuro del overlay, el botón outline necesita
   sus propios colores (blanco sobre transparente) — el estilo base
   de arriba está pensado para el header claro. */
.site-nav .header-verify-btn {
    background: transparent;
    border-color: rgba(255,255,255,0.5);
    color: var(--color-blanco);
}

.site-nav .header-verify-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--color-blanco);
    color: var(--color-blanco);
}

/* Certificaciones + Verificar dentro del panel: mismo tamaño grande
   que los links del nav-list, con la misma animación escalonada. */
.site-nav .header-cta-btn,
.site-nav .header-verify-btn {
    font-size: 22px;
    font-weight: 600;
    padding: 14px 32px;
    opacity: 0;
    transform: translateY(16px);
}

.site-nav.open .header-cta-btn,
.site-nav.open .header-verify-btn {
    animation: rblNavItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.4s;
}

.site-nav.open .header-verify-btn {
    animation-delay: 0.45s;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    cursor: pointer;
    padding: 12px 14px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.nav-toggle:hover {
    background: var(--color-acento-lt);
    border-color: var(--color-acento);
}

/* Tamaño original 22x2px, +20% y después +40% más — acumulado, más
   notorio. */
.hamburger-bar {
    display: block;
    width: 36px;
    height: 3.5px;
    background: var(--color-texto);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* Controles de la barra compacta — SIEMPRE visibles (desktop y
   mobile): botón Certificaciones (se oculta en mobile más abajo),
   switcher de idioma, hamburguesa. En ese orden. */
.header-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    color: var(--color-blanco);
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    opacity: 0;
    transform: translateY(-8px) rotate(-45deg);
    transition: background 0.15s, opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
}

.nav-close svg { width: 18px; height: 18px; }
.nav-close:hover { background: rgba(255,255,255,0.18); }

.site-nav.open .nav-close {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

/* Zonas del panel: logo (arriba), links+CTA (medio), redes (abajo).
   Ancladas al panel (.site-nav__panel tiene position:relative), no
   al viewport completo — por eso viven bien dentro del 90% de ancho. */
.mobile-menu__top {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    color: var(--color-blanco);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.mobile-menu__top img,
.mobile-menu__top svg {
    width: 130px;
    max-width: 100%;
    height: auto;
}

.site-nav.open .mobile-menu__top {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu__middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.footer-redes.mobile-menu__bottom {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(255,255,255,0.14);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease 0.46s, transform 0.4s ease 0.46s;
}

.site-nav.open .mobile-menu__bottom {
    opacity: 1;
    transform: translateY(0);
}


/* ─────────────────────────────────────────────────────────
   FOOTER — 4 columnas, misma estructura que rbl-web-gcc,
   repintado en la paleta verde/teal nueva.
   ───────────────────────────────────────────────────────── */

.site-footer {
    padding: 0;
    font-size: 14px;
}

/* Prefooter: titular grande + CTA a la izquierda, WhatsApp/Correo a
   la derecha — sin logo (ya está en la 1ra columna del footer-grid,
   más abajo), arriba de las 4 columnas. Único bloque azul del
   footer — las 4 columnas de abajo van sobre fondo blanco. */
.footer-pre {
    background: var(--color-primario);
    color: rgba(255,255,255,0.75);
    padding: 56px 0 40px;
}

.footer-pre__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
}

.footer-pre__title {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--color-blanco);
    max-width: 480px;
    margin: 0;
}

.footer-pre__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.footer-pre__contact-item { display: flex; flex-direction: column; gap: 4px; }

.footer-pre__contact-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.55);
}

.footer-pre__contact-item a {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-sm);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-blanco);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.footer-pre__contact-item a:hover {
    background: var(--color-blanco);
    border-color: var(--color-blanco);
    color: var(--color-primario);
    text-decoration: none;
}

.footer-grid {
    background: var(--color-blanco);
    display: grid;
    grid-template-columns: 240px 1fr 1fr 240px;
    gap: 40px;
    padding-top: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--color-borde);
}

.footer-col-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Col 1: Marca */
.footer-logo-img,
.footer-col--brand img {
    max-width: 140px;
    height: auto;
    margin-bottom: 14px;
    display: block;
}

.footer-col--brand .rbl-logo-text {
    color: var(--color-texto);
    font-size: 18px;
    font-weight: 800;
    display: block;
    margin-bottom: 10px;
}

.footer-empresa-nombre {
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: 6px;
    font-size: 15px;
}

.footer-slogan {
    font-size: 12px;
    color: var(--color-texto-claro);
    font-style: italic;
    margin-bottom: 16px;
    line-height: 1.5;
}

.footer-redes {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.footer-red-link {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-sm);
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    color: var(--color-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.footer-red-link:hover {
    background: var(--color-primario);
    color: var(--color-blanco);
}

.footer-red-link svg { width: 14px; height: 14px; }

/* Col 2: Contacto */
.footer-contacto-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
}

.footer-contacto-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--color-primario);
    margin-top: 2px;
}

.footer-contacto-icon svg { width: 15px; height: 15px; }

.footer-contacto-item a {
    color: var(--color-texto);
    text-decoration: none;
}

.footer-contacto-item a:hover { color: var(--color-primario); }
.footer-contacto-item span { color: var(--color-texto); }

/* Col 3: Links */
.footer-nav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav-list a {
    color: var(--color-texto);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s;
    display: block;
}

.footer-nav-list a:hover { color: var(--color-primario); }

.footer-nav-cta {
    display: inline-block !important;
    background: var(--color-acento) !important;
    color: var(--color-blanco) !important;
    padding: 6px 16px;
    border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-sm);
    font-weight: 600;
    font-size: 13px !important;
    text-align: center;
    width: fit-content;
    margin-top: 6px;
}

/* Col 4: Verificador — overrides sobre el CSS del shortcode del plugin */
.footer-verificar-desc {
    font-size: 12px;
    color: var(--color-texto-claro);
    margin-bottom: 14px;
    line-height: 1.5;
}

.footer-col--verificar .rbl-verificador-wrap { max-width: 100%; margin: 0; }
.footer-col--verificar .rbl-verificador-form {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    padding: 16px;
    border-radius: var(--radius-md) var(--radius-brand-sm) var(--radius-md) var(--radius-brand-sm);
    gap: 10px;
}
.footer-col--verificar .rbl-form-group label { color: var(--color-texto); font-size: 12px; }
.footer-col--verificar input[type="text"] {
    background: var(--color-blanco);
    border-color: var(--color-borde);
    color: var(--color-texto);
    font-size: 13px;
}
.footer-col--verificar input[type="text"]::placeholder { color: var(--color-texto-claro); }
.footer-col--verificar .rbl-btn-verificar {
    background: var(--color-primario);
    font-size: 13px;
    padding: 10px 20px;
    border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-sm);
}
.footer-col--verificar .rbl-resultado-wrap { font-size: 12px; }

/* Bottom bar */
.footer-bottom {
    padding: 16px 0;
    background: var(--color-fondo);
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-copy {
    font-size: 12px;
    color: var(--color-texto-claro);
    text-align: center;
}

.footer-copy a {
    color: var(--color-texto);
    text-decoration: none;
}

.footer-copy a:hover { color: var(--color-primario); }


/* ─────────────────────────────────────────────────────────
   MODALES (Verificar Certificado / Política de Privacidad)
   ───────────────────────────────────────────────────────── */

.rbl-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 20px 40px;
    overflow-y: auto;
    background: rgba(15, 40, 30, 0.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

.rbl-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.rbl-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: var(--color-blanco);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.28);
    transform: translateY(-16px);
    transition: transform 0.2s ease;
}

.rbl-modal-overlay.is-open .rbl-modal {
    transform: translateY(0);
}

.rbl-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fondo);
    border: none;
    border-radius: 50%;
    color: var(--color-texto-claro);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.rbl-modal__close svg { width: 16px; height: 16px; }

.rbl-modal__close:hover {
    background: var(--color-acento-lt);
    color: var(--color-acento);
}

.rbl-modal__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-texto);
    margin: 0 0 8px;
    padding-right: 32px;
}

.rbl-modal__desc {
    font-size: 14px;
    color: var(--color-texto-claro);
    margin: 0;
    line-height: 1.6;
}

.rbl-modal__body { margin-top: 16px; }
.rbl-modal__body > *:first-child { margin-top: 0; }
.rbl-modal .rbl-verificador-wrap { margin: 0; }

@media ( max-width: 480px ) {
    .rbl-modal-overlay { padding: 60px 12px 24px; }
    .rbl-modal { padding: 28px 20px; }
}


/* ─────────────────────────────────────────────────────────
   FORMULARIOS (rbl-form-*) — compartido por los shortcodes del
   plugin: [rbl_form_contacto], [rbl_form_consulta], etc.
   ───────────────────────────────────────────────────────── */

.rbl-form-row.rbl-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rbl-form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.rbl-form-group label { font-size: 13px; font-weight: 700; color: var(--color-texto); }
.rbl-required { color: var(--color-acento); }

.rbl-form-group input,
.rbl-form-group select,
.rbl-form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-borde);
    background: var(--color-fondo);
    font-family: inherit;
    font-size: 14px;
    color: var(--color-texto);
    transition: border-color 0.15s;
}

.rbl-form-group input:focus,
.rbl-form-group select:focus,
.rbl-form-group textarea:focus { outline: none; border-color: var(--color-primario); }
.rbl-form-group textarea { resize: vertical; min-height: 110px; }

.rbl-btn-consulta {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    background: var(--color-acento);
    color: var(--color-blanco);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: filter 0.15s;
}

.rbl-btn-consulta:hover:not(:disabled) { filter: brightness(1.15); }
.rbl-btn-consulta:disabled { opacity: 0.6; cursor: default; }

.rbl-form-resultado {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.rbl-form-resultado.rbl-resultado-exito { background: #e9f7ef; color: #1e7e34; border: 1px solid #b7e2c5; }
.rbl-form-resultado.rbl-resultado-error { background: var(--color-acento-lt); color: #b3261e; border: 1px solid #f3c8c8; }

.rbl-privacidad-check { margin-bottom: 16px; }
.rbl-privacidad-check label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--color-texto-claro);
    line-height: 1.5;
    cursor: pointer;
}
.rbl-privacidad-check input[type="checkbox"] {
    width: auto;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--color-primario);
    cursor: pointer;
}
.rbl-privacidad-check a.rbl-open-privacidad {
    color: var(--color-primario);
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .rbl-form-row.rbl-two-cols { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────
   WYSIWYG (contenido de la Política de Privacidad en el modal)
   ───────────────────────────────────────────────────────── */

.wysiwyg p        { margin-bottom: 1em; color: var(--color-texto-claro); line-height: 1.7; }
.wysiwyg h2       { font-size: 1.3rem; margin: 1.5em 0 0.5em; color: var(--color-texto); }
.wysiwyg h3       { font-size: 1.1rem; margin: 1.3em 0 0.4em; color: var(--color-texto); }
.wysiwyg ul, .wysiwyg ol { padding-left: 1.5em; margin-bottom: 1em; }
.wysiwyg li       { margin-bottom: 0.3em; }
.wysiwyg strong   { font-weight: 700; }
.wysiwyg em       { font-style: italic; }
.wysiwyg a        { color: var(--color-acento); text-decoration: underline; }


/* ─────────────────────────────────────────────────────────
   CABECERA DE SECCIÓN (eyebrow + título + descripción) — compartida
   por Home y Quiénes Somos (trust-bar, diff, valores, misión/visión,
   testimonios, CTA final).
   ───────────────────────────────────────────────────────── */

.section-eyebrow {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    color: var(--color-texto);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.section-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-texto);
    margin: 0 0 16px;
}

.section-title span { color: var(--color-primario); }

.section-desc {
    font-size: 16px;
    color: var(--color-texto-claro);
    max-width: 620px;
    line-height: 1.7;
    margin: 0 0 40px;
}

.section-header { text-align: center; }
.section-header .section-desc { margin-left: auto; margin-right: auto; }


/* ─────────────────────────────────────────────────────────
   TRUST BAR — franja de credibilidad (conteo animado, ya lo maneja
   theme.js sección 9: .trust-bar__grid / .trust-bar__value).
   🌐 Compartido por Home y Quiénes Somos.
   ───────────────────────────────────────────────────────── */

.trust-bar { background: var(--color-fondo); padding: 88px 0; }
.trust-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust-bar__item { text-align: center; }
.trust-bar__value { display: block; font-size: 44px; font-weight: 800; color: var(--color-texto); line-height: 1; margin-bottom: 10px; }
.trust-bar__label { font-size: 13px; color: var(--color-texto-claro); line-height: 1.5; max-width: 190px; margin: 0 auto; }

@media (max-width: 1024px) { .trust-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }


/* ─────────────────────────────────────────────────────────
   GRID DE CARDS — compartido por Diferenciación ("Por qué elegir
   SIFE") y Valores. Misma forma que las cards de certificación del
   sitio: borde + esquina asimétrica del isotipo, número de fondo.
   ───────────────────────────────────────────────────────── */

.cards-section { padding: 64px 0; }
.cards-section--tinted { background: var(--color-fondo); }

.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.info-card {
    position: relative;
    overflow: hidden;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    padding: 32px 28px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(13,13,13,0.10);
    border-color: var(--color-primario);
}

.info-card__num {
    position: absolute;
    top: -10px;
    right: -2px;
    font-size: 72px;
    font-weight: 800;
    color: var(--color-primario);
    opacity: 0.06;
    line-height: 1;
    pointer-events: none;
}

.info-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-sm);
    background: var(--color-acento-lt);
    color: var(--color-primario);
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.info-card__icon svg { width: 22px; height: 22px; }

.info-card h3 {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-texto);
    margin: 0 0 10px;
}

.info-card p {
    position: relative;
    z-index: 1;
    font-size: 14px;
    color: var(--color-texto-claro);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 1024px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards-grid { grid-template-columns: 1fr; } }


/* ─────────────────────────────────────────────────────────
   MISIÓN / VISIÓN — solo en Quiénes Somos.
   ───────────────────────────────────────────────────────── */

.mv { padding: 64px 0; }
.mv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Misma proporción asimétrica que los botones (~2.18:1), pero
   escalada arriba — a los 24px/11px de --radius-lg/--radius-brand-sm
   la forma no se notaba en una card tan grande (mismo problema que
   ya se resolvió en .page-intro__media con radio en %). */
.mv__card {
    background: var(--color-primario);
    border-radius: 48px 22px 48px 22px;
    padding: 40px;
}
.mv__label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 14px;
}
.mv__text { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.92); margin: 0; }

@media (max-width: 768px) { .mv__grid { grid-template-columns: 1fr; } }


/* ─────────────────────────────────────────────────────────
   TESTIMONIOS — uno a la vez, flechas prev/next (theme.js sección
   15, #testimonios). 🌐 Compartido por Home y About. Sin avatar/foto:
   el símbolo de comillas es el único elemento visual, en la forma
   del isotipo (no círculo).
   ───────────────────────────────────────────────────────── */

.testimonials { background: var(--color-fondo); padding: 64px 0; }
.testimonials__slider { position: relative; max-width: 860px; margin: 0 auto; }
.testimonials__viewport { position: relative; min-height: 220px; }

.testimonial-single {
    display: none;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 32px;
}
.testimonial-single.is-active { display: grid; animation: rblFadeIn 0.3s ease; }

.testimonial-single__quote {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 31% 14% 31% 14%;
    background: var(--color-primario);
    color: var(--color-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    font-weight: 800;
    line-height: 0.6;
}

.testimonial-single__text { font-style: italic; font-size: 18px; font-weight: 500; color: var(--color-texto); line-height: 1.7; margin: 0 0 20px; }
.testimonial-single__name { font-size: 15px; font-weight: 800; color: var(--color-texto); }
.testimonial-single__role { font-size: 13px; color: var(--color-texto-claro); margin-top: 2px; }

.testimonials__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: var(--radius-md) var(--radius-brand-sm) var(--radius-md) var(--radius-brand-sm);
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer; font-size: 20px; color: var(--color-primario);
    z-index: 2; display: flex; align-items: center; justify-content: center;
}
.testimonials__arrow--prev { left: -60px; }
.testimonials__arrow--next { right: -60px; }
.testimonials__arrow:hover { background: var(--color-primario); color: var(--color-blanco); }

@media (max-width: 900px) {
    .testimonials__arrow--prev { left: 0; }
    .testimonials__arrow--next { right: 0; }
    .testimonial-single { padding: 0 56px; }
}

@media (max-width: 640px) {
    .testimonial-single { grid-template-columns: 1fr; text-align: center; padding: 0 44px; }
    .testimonial-single__quote { width: 60px; height: 60px; font-size: 50px; margin: 0 auto; }
    .testimonials__arrow { width: 34px; height: 34px; font-size: 16px; }
}


/* ─────────────────────────────────────────────────────────
   CTA FINAL — franja de cierre (About us, y reusable donde haga
   falta). Fondo oscuro, botón CTA claro.
   ───────────────────────────────────────────────────────── */

.cta-final {
    background: var(--color-texto);
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    padding: 56px 40px;
    text-align: center;
    margin: 0 auto 64px;
    max-width: calc(var(--container-max) - (var(--container-pad) * 2));
}

.cta-final__title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--color-blanco); margin: 0 0 12px; }
.cta-final__desc { font-size: 15px; color: rgba(255,255,255,0.7); max-width: 520px; margin: 0 auto 28px; line-height: 1.7; }

/* El botón (.header-cta-btn) es negro (--color-acento) — sobre el
   fondo oscuro de esta franja se pierde sin un borde que lo separe.
   Se acota a este contexto (no toca el botón del header, que va
   sobre fondo claro y ahí sí se distingue solo). */
.cta-final .header-cta-btn {
    border: 1px solid var(--color-blanco);
    padding: 9px 21px;
}

/* full_bg (Home): la franja completa también va negra, de extremo a
   extremo — la card interna queda "adentro" en vez de flotar sobre
   el fondo claro de la página, así se ve como un bloque entero. */
.cta-final-wrap--dark { background: var(--color-texto); padding: 64px 0; }
.cta-final-wrap--dark .cta-final { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────
   LISTA DE CERTIFICACIONES (filas + sellos + paginación) — COMPARTIDO
   por template-parts/section-services.php (Home, 5/página, AJAX) y
   archive-certificacion.php (catálogo completo, 8/página, filtro +
   paginación en el cliente). Colores pensados para fondo claro —
   home.css agrega overrides puntuales para cuando cae sobre la franja
   azul del Home.
   ───────────────────────────────────────────────────────── */

.home-services__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 40px; }

.home-services__item { list-style: none; }

.home-services__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 96px;
    background: var(--color-acento-lt);
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    padding: 12px 88px 12px 28px;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.home-services__row:hover { transform: translateX(8px); text-decoration: none; }

/* El sello va en su forma natural (el SVG ya trae su propio diseño de
   insignia) — sin marco ni recorte extra, en línea junto al título.
   Una certificación puede tener varios niveles (Foundation/Specialist/
   Auditor...) — se muestra un sello por nivel, uno al lado del otro,
   con el nombre del nivel como etiqueta AFUERA del sello (adentro, a
   este tamaño, no se notaba). */
.home-services__row-media {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.home-services__row-sello {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.home-services__row-sello-icon { width: 56px; height: 56px; display: block; }
.home-services__row-sello-icon svg { width: 100%; height: 100%; display: block; }

.home-services__row-sello-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-texto-claro);
    white-space: nowrap;
}

.home-services__row-media-fallback {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--nivel-color, var(--color-primario));
}

.home-services__row-title { flex: 1; font-size: 19px; font-weight: 800; color: var(--color-texto); line-height: 1.3; }

.home-services__row-arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md) var(--radius-brand-sm) var(--radius-md) var(--radius-brand-sm);
    background: var(--color-primario);
    color: var(--color-blanco);
    flex-shrink: 0;
}

.home-services__row-arrow svg { width: 18px; height: 18px; }

.home-services__empty { color: var(--color-texto-claro); font-size: 14px; text-align: center; padding: 40px 0; }

/* Paginación */
.home-services__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.home-services__page-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--color-borde);
    background: transparent;
    color: var(--color-texto-claro);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.home-services__page-btn:hover:not(.is-active):not(:disabled) {
    border-color: var(--color-primario);
    color: var(--color-primario);
}

.home-services__page-btn.is-active {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-blanco);
}

.home-services__page-btn:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 640px) {
    /* Card apilada: sellos arriba, título abajo centrado, botón al
       final — así entran los 3-4 sellos sin superponerse al texto
       (en fila, el botón absoluto quedaba encima del título). */
    .home-services__list { gap: 24px; }

    .home-services__row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: 0;
        padding: 24px 20px;
        gap: 14px;
    }

    .home-services__row-media { justify-content: center; flex-wrap: wrap; }
    .home-services__row-sello-icon { width: 48px; height: 48px; }
    .home-services__row-sello-label { font-size: 9px; }
    .home-services__row-title { font-size: 16px; text-align: center; }

    .home-services__row-arrow {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        width: 40px;
        height: 40px;
    }
    .home-services__row-arrow svg { width: 16px; height: 16px; }
}


/* ─────────────────────────────────────────────────────────
   NIVEL-CARD / SELLO DE CERTIFICACIÓN — template-parts/nivel-card.php
   Mismo mecanismo que rbl-web-gcc (el sello SVG lo arma el plugin,
   rbl_get_sello_svg() en certificacion_sello.php — genérico, sin
   nada de marca en el código). Acá solo cambia la forma del card:
   radius asimétrico del isotipo en vez del radius parejo de GCC.
   ───────────────────────────────────────────────────────── */

.niveles-grid { display: grid; gap: 20px; }

.niveles-count-3 { grid-template-columns: repeat(3, 1fr); }
.niveles-count-2 { grid-template-columns: repeat(2, 1fr); }
.niveles-count-1 { grid-template-columns: 1fr; max-width: 320px; }

.nivel-card {
    background: var(--color-blanco);
    border: 2px solid var(--color-borde);
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    padding: 24px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    /* Color del sello — viene del nivel (CPT Nivel → Color del Sello)
       vía la variable inline --nivel-color. Escala a cualquier
       cantidad de niveles sin tocar este CSS. */
    border-top: 4px solid var(--nivel-color, var(--color-primario));
}

.nivel-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--color-card-shadow);
}

/* Sello SVG dinámico — círculo coloreado por nivel + nombre de la
   credencial dentro. Reemplaza al badge de texto .nivel-card__tipo
   cuando hay un sello subido en Opciones → Identidad Visual. */
.nivel-card__sello { width: 130px; margin: 0 auto; }
.nivel-card__sello svg { width: 100%; height: auto; display: block; }

.nivel-card__tipo {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-primario);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 640px) {
    .niveles-count-3,
    .niveles-count-2 { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────── */

@media ( max-width: 1024px ) {

    .header-inner { min-height: 64px; padding: 12px 20px; }

    .site-logo-link img,
    .site-logo-link svg {
        width: 148px;
    }

    /* En mobile la barra compacta vuelve a ser SOLO logo + switcher +
       hamburguesa — sin el botón Certificaciones (pedido explícito:
       "en celular tal cual está ahora"). */
    .header-controls__cta { display: none; }

    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-col--brand { grid-column: 1 / -1; text-align: left; }
    .footer-redes { justify-content: flex-start; }
    .footer-bottom-inner { justify-content: flex-start; }
    .footer-copy { text-align: left; }
}

@media ( max-width: 768px ) {
    .footer-grid { grid-template-columns: 1fr; }

    /* Mobile: el panel del menú pasa de 30% a 80% del ancho — sigue
       siendo un drawer alineado a la derecha, no pantalla completa. */
    .site-nav__panel { width: 80%; }

    .footer-pre { padding: 40px 0 32px; }
    .footer-pre__row { grid-template-columns: 1fr; gap: 28px; }
    .footer-pre__contact { gap: 20px; }
}

/* Bloquea el scroll del body mientras el menú fullscreen o un modal
   está abierto */
body.nav-open { overflow: hidden; }