@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* ========== Altura de ventana móvil (100vh ≠ pantalla visible; ver js/viewport-height.js) ========== */
:root
{
    --pmc-vh-unit: 1vh;
    /* Fallback hasta que cargue el script; luego coincide con visualViewport */
    --pmc-100vh: 100vh;
    --pmc-100svh: 100vh;
    /* viewport-height.js sobrescribe con el borde inferior real del header (px) */
    --pmc-header-stack-bottom: 72px;
    /* Aire entre el nav y el título del slide (móvil); ajustable en inspector */
    --pmc-cover-text-gap: 0.65rem;
}

@supports (height: 100dvh)
{
    :root
    {
        --pmc-100vh: 100dvh;
    }
}

@supports (height: 100svh)
{
    :root
    {
        --pmc-100svh: 100svh;
    }
}

html
{
    height: 100%;
    min-height: 100%;
    min-height: -webkit-fill-available;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--pmc-header-stack-bottom, 72px) + 0.75rem);
}

/* Compensa anclas cuando hay cabecera fija/sticky */
:target
{
    scroll-margin-top: calc(var(--pmc-header-stack-bottom, 72px) + 0.75rem);
}

body,
html
{
    font-family: 'Nunito', sans-serif!important;
    overflow-x: clip;
}

body
{
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    min-height: calc(var(--pmc-vh-unit, 1vh) * 100);
}
em
{
    color: #8E2C3B!important;
}
/* Bootstrap: min-vh-100 usa 100vh antiguo */
.min-vh-100
{
    min-height: 100vh !important;
    min-height: 100dvh !important;
    min-height: calc(var(--pmc-vh-unit, 1vh) * 100) !important;
}

/* Utilidad tema: pantalla completa “real” en móvil */
.min-vh-pmc
{
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(var(--pmc-vh-unit, 1vh) * 100);
}
.text-shadow,
.text-shadow-2
{
    text-shadow: none !important;
}

/* Textos sobre imágenes: sin borde ni sombra negra */
.wp-block-cover .wp-block-cover__inner-container :is(h1, h2, h3, h4, h5, h6, p, a, span, li, .wp-block-heading, .wp-block-paragraph),
.cover-slider__text-flow .cover-slider__text-content,
.wp-image-slide-text-inner,
.wp-image-slide-text-inner *,
.pmc-hero__title,
.pmc-hero__lead,
.pmc-hero__eyebrow,
.texto-1-banner,
.texto-2-banner
{
    text-shadow: none !important;
    -webkit-text-stroke: 0 transparent !important;
}

/* ========= Utilidad animación suave para Gutenberg =========
 * Uso: añadir clase "pmc-fx-line-in" al bloque (heading, paragraph, etc.).
 * Opcional: definir "--pmc-fx-delay" desde estilos adicionales del bloque.
 */
.pmc-fx-line-in
{
    display: block;
    opacity: 0;
    transform: translateY(26px);
    filter: blur(12px);
    animation: pmc-fx-line-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--pmc-fx-delay, 0.3s);
    will-change: transform, opacity, filter;
}

/* Variante para revelar al entrar en viewport */
.pmc-fx-scroll-in
{
    display: block;
    opacity: 0;
    transform: translateY(26px);
    filter: blur(12px);
    will-change: transform, opacity, filter;
}

.pmc-fx-scroll-in.pmc-is-visible
{
    animation: pmc-fx-line-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--pmc-fx-delay, var(--pmc-anim-delay, 0s));
}

@keyframes pmc-fx-line-in
{
    0%
    {
        opacity: 0;
        transform: translateY(26px);
        filter: blur(12px);
    }
    100%
    {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .pmc-fx-line-in
    ,.pmc-fx-scroll-in
    {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }
}

/* ========= KPI / Estadísticas para Gutenberg =========
 * Uso típico en Columns:
 * - contenedor de cada item: pmc-kpi-card
 * - icono (ej. <i class="bi bi-award">): pmc-kpi-icon
 * - número: pmc-kpi-value pmc-countup
 * - etiqueta: pmc-kpi-label
 */
.pmc-kpi-card
{
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
}

.pmc-kpi-card:hover
{
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(111, 21, 38, 0.12);
    border-color: rgba(111, 21, 38, 0.25);
}

.pmc-kpi-icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    margin-bottom: 0.85rem;
    background: rgba(111, 21, 38, 0.1);
    color: #8E2C3B;
    font-size: 1.35rem;
    line-height: 1;
}

.pmc-kpi-value
{
    margin: 0 0 0.35rem;
    font-weight: 800;
    font-size: clamp(1.9rem, 3.1vw, 2.55rem);
    line-height: 1.05;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.pmc-kpi-label
{
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.45;
    color: #4b5563;
    font-weight: 600;
}

/* ========= Velo blanco a la izquierda (reutilizable en Gutenberg) =========
 * Uso:
 * - Añadir clase "pmc-bg-left-white" al bloque con fondo (Cover, Group, etc.)
 * - Opcional: ajustar variables en estilos del bloque
 *   --pmc-left-white-main-opacity (0..1)
 *   --pmc-left-white-soft-opacity (0..1)
 *   --pmc-left-white-mist-opacity (0..1)
 *   --pmc-left-white-main-size (%)
 *   --pmc-left-white-soft-size (%)
 */
.pmc-bg-left-white
{
    position: relative;
    isolation: isolate;
    /* Mismo look del slider home */
    --pmc-left-white-main-opacity: 0.7;
    --pmc-left-white-soft-opacity: 0.6;
    --pmc-left-white-mist-opacity: 0.2;
    --pmc-left-white-main-size: 70%;
    --pmc-left-white-soft-size: 100%;
}

.pmc-bg-left-white::before
{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 16% 48%,
            rgba(255, 255, 255, var(--pmc-left-white-main-opacity)) 0%,
            rgba(255, 255, 255, 0) var(--pmc-left-white-main-size)
        ),
        radial-gradient(
            circle at 2% 50%,
            rgba(255, 255, 255, var(--pmc-left-white-soft-opacity)) 0%,
            rgba(255, 255, 255, 0) var(--pmc-left-white-soft-size)
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, var(--pmc-left-white-mist-opacity)) 0%,
            rgba(255, 255, 255, 0) 62%
        );
    pointer-events: none;
    z-index: 2;
}

/* En Cover de Gutenberg, asegurar orden de capas */
.wp-block-cover.pmc-bg-left-white .wp-block-cover__image-background
{
    z-index: 0;
}

.wp-block-cover.pmc-bg-left-white .wp-block-cover__background
{
    z-index: 1;
}

/* Mantener contenido por encima del overlay */
.pmc-bg-left-white > .wp-block-cover__inner-container,
.pmc-bg-left-white > .wp-block-group__inner-container,
.pmc-bg-left-white > .container,
.pmc-bg-left-white > .container-fluid,
.pmc-bg-left-white > .wp-bootstrap-blocks-container
{
    position: relative;
    z-index: 3;
}
/*
 * Gutenberg/Cover: min-height:100vh va en style="" (alta especificidad).
 * Sin !important no puede sustituirse; en móvil 100vh incluye zona bajo la barra de Chrome.
 */

/*
 * Cover slider (móvil): padding-top = header medido (JS) + gap; max() respeta notch.
 */
h2,h3
{
    font-family:'Nunito', sans-serif!important;
}
p
{
    font-family:'Open Sans', sans-serif!important;
    font-weight: 400!important;
    font-size: 1.1rem;
}

@media (max-width: 782px)
{
    .cover-slider .cover-slider__text-flow
    {
        padding-top: max(
            calc(var(--pmc-header-stack-bottom) + var(--pmc-cover-text-gap)),
            calc(env(safe-area-inset-top, 0px) + 2.5rem)
        );
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }
}
/* ========== fin viewport móvil ========== */
#wrapper-topbar
{
    position: relative !important;
    z-index: 1000 !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.custom-logo-link img 
{
    max-width: 200px;
}
#topbar-content a
{
    text-decoration: none;
    color: #FFF;
}
/* Fuentes del slider (excluir banner principal de portada) */
.slider h2:not(.texto-1-banner),
.carousel h2,
.rev_slider h2,
.swiper-slide h2,
.slide h2,
.wp-image-slide-text-inner h2
{
    font-family: 'Great Vibes', cursive!important;
    font-weight: 400!important;
}
.logos-inicio figure
{
    max-width: 200px;
}

@media (max-width: 768px)
{
    .logos-inicio
    {
        flex-wrap: wrap;
    }
    h2.destacados-title,
    .destacados-title h2,
    .wp-block-heading.destacados-title h2,
    h2.wp-block-heading.destacados-title
    {
        font-size: 1.75rem !important;
        padding-bottom: 1rem !important;
    }
    
    h2.destacados-title::after,
    .destacados-title h2::after,
    .wp-block-heading.destacados-title h2::after,
    h2.wp-block-heading.destacados-title::after
    {
        width: 60px !important;
        height: 3px !important;
    }
}