/* //cambio: estilos por sección del template pilar SGR. CSS plano (NO scss, NO build) —
   se sirve directo via wp_enqueue_style, igual que grid.css. Se carga solo en page-pilar.php.
   Las clases coinciden con los partials de inc/pilar/*.php.
   Valores EXACTOS del Figma (frame SGR_Desktop) — extraídos de Fidaval_Mockup_Pilar_SGR.html.
   Fuentes: 'Cocogoose Pro' (300 Light / 400 Semilight / 800 Bold) y 'Manrope' — ya cargadas por app.css. */

/* ============================================================
   VARIABLES (colores exactos del Figma)
   //cambio: selector cambiado a :root — el tema no llama body_class() entonces
   .page-template-page-pilar nunca existe en el DOM. pilar.css solo carga en
   páginas pilar (is_page_template en functions.php), sin riesgo de colisión.
============================================================ */
:root {
    --primary:    #0520AA;
    --blue-card:  #0039A6;
    --blue-btntx: #013AA6;
    --teal:       #57B6B2;
    --teal-num:   #63CECA;
    --text-gray:  #454652;
    --card-bd:    rgba(197, 197, 212, 0.3);
    --shadow-m:   0px 12px 16px -4px rgba(0,0,0,.08), 0px 4px 6px -2px rgba(0,0,0,.03);
}

/* //cambio: container-pilar con padding-global del Figma (64px), no el de Bootstrap (15px) */
.container-pilar {
    padding-left: 64px;
    padding-right: 64px;
}
@media (max-width: 992px) {
    .container-pilar {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ============================================================
   1) HERO  (inc/pilar/hero.php)
   Foto de fondo (ACF imagen_hero) + overlay radial azul.
   Texto a la izquierda, máx 660px. H1 en Cocogoose Bold 56px.
============================================================ */
.pilar-hero {
/*     position: relative; */
    min-height: 670px;
    margin-top: 10vh;
    display: flex;
    align-items: center;
    color: #fff;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* //cambio: overlay sin color — imagen limpia por ahora */
/* .pilar-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
} */

.pilar-hero__content {
    position: relative;
/*     z-index: 2; */    width: 100%;
    padding-top: 60px;
    padding-bottom: 60px;
}

.pilar-hero__tagline {
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 24px;
    max-width: 596px;
}

.pilar-hero__titulo {
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 500;
    font-size: 58px;
    line-height: 1.2;
    margin: 0 0 24px;
    max-width: 660px;
    color: #fff;
}

h2.pilar-cta__titulo p strong {
    color: #57B6B2 !important;
    font-weight: 500 !important;
}

.pilar-hero__texto {
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 32px;
    max-width: 550px;
}

/* botón teal del hero (clase fija, sin colorpicker) */
.pilar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 8px 32px;
    border-radius: 100px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.25s ease;
}
.pilar-btn--primario {
    background-color: #57B6B2;
    color: #013AA6;
}
.pilar-btn--primario:hover {
    background-color: #4aa6a2;
    color: #013AA6;
}

/* responsive hero (<992px) */
@media (max-width: 992px) {
    .pilar-hero {
        position: relative;                 /* //cambio: 2026-07-14 contener el scrim (solo mobile) */
        min-height: 460px;
        /* //cambio: 2026-07-14 (v2) reencuadre mobile: enfoco hacia la persona (der.) — la foto es texto-izq +
           persona-der y no entra en vertical con cover. VALOR AJUSTABLE: si la persona queda cortada, mover a
           'center' o '30% center' según dónde esté el sujeto en la imagen real del hero. */
        background-position: 70% center;
    }
    /* //cambio: 2026-07-14 scrim SOLO mobile: activa el overlay (inerte en desktop) con un degradado más oscuro
       a la izquierda (texto) y más claro a la derecha (persona), para que el texto blanco se lea sobre la foto. */
    .pilar-hero__overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background-image: linear-gradient(90deg, rgba(1, 20, 80, 0.85) 0%, rgba(1, 20, 80, 0.55) 45%, rgba(1, 20, 80, 0.12) 100%);
    }
    .pilar-hero__content {
        position: relative;
        z-index: 2;                         /* //cambio: 2026-07-14 texto por encima del scrim */
    }
    .pilar-hero__titulo {
        font-size: 38px;
    }
}

/* ============================================================
   2) ¿QUÉ ES UNA SGR?  (inc/pilar/que_es.php)
============================================================ */
.pilar-section {
    padding: 80px 0;
}

.pilar-section__titulo {
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 1.2;
    color: var(--primary);
    text-align: center;
}

.pilar-section__intro {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.9;
    color: var(--primary);
    max-width: 1068px;
    margin: 24px auto 0;
    text-align: center;
}

.pilar-quees__cards {
    margin-top: 56px;
}

.pilar-card {
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: 16px;
    box-shadow: var(--shadow-m);
    padding: 61px 41px 41px;
    height: 100%;
}

.pilar-card__icono {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    display: block;
}

.pilar-card__titulo {
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: var(--primary);
    margin-bottom: 8px;
}

.pilar-card__texto {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
}

.pilar-quees__cierre {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.46;
    color: var(--primary);
    max-width: 924px;
    margin: 56px auto 0;
    text-align: center;
}

@media (max-width: 992px) {
    .pilar-section { padding: 56px 0; }
    .pilar-section__titulo { font-size: 32px; }
    .pilar-card { margin-bottom: 16px; }
    .pilar-quees__cards { row-gap: 20px; }
}

/* ============================================================
   3) ¿CÓMO FUNCIONA?  (inc/pilar/como_funciona.php)
   col-lg-7 imagen | col-lg-5 card azul con slider de pasos
============================================================ */
/* //cambio: dato_como — tagline debajo del título */
.pilar-como__dato {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #0520AA;
    text-align: center;
    margin: 12px auto 0;
    max-width: 800px;
}
.pilar-como__intro {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.46;
    color: var(--primary);
    max-width: 1122px;
    margin: 24px auto 56px;
    text-align: center;
}

.pilar-como__grid {
    align-items: center;
}

.pilar-como__imagen {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* card azul contenedora del slider */
.pilar-como__card {
    background: var(--blue-card);
    border: 1px solid var(--card-bd);
    box-shadow: var(--shadow-m);
    border-radius: 16px;
    padding: 84px 33px 33px;
    color: #fff;
    max-width: 492px;
    min-height: 560px;
    display: flex;
    flex-direction: column;
}

.pilar-como__swiper {
    overflow: hidden;
    flex: 1;
}

.pilar-como__numero {
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 400;
    font-size: 64px;
    line-height: 1;
    color: var(--teal-num);
    margin-bottom: 80px;
    display: block;
}

.pilar-como__paso-titulo {
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 24px;
}

.pilar-como__paso-texto {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

/* pie del slider: dots izq + flechas der */
.pilar-como__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    flex-shrink: 0;
}

.pilar-como__dots {
    display: flex;
    gap: 8px;
}

.pilar-como__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    transition: background .25s;
}

.pilar-como__dot.on {
    background: #fff;
}

.pilar-como__arrows {
    display: flex;
    gap: 16px;
}

.pilar-como__prev,
.pilar-como__next {
    width: 48px;
    height: 48px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s;
}

.pilar-como__prev {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}

.pilar-como__prev:hover {
    background: rgba(255, 255, 255, .15);
}

.pilar-como__next {
    border: 0;
    background: #fff;
    color: var(--blue-card);
}

.pilar-como__next:hover {
    filter: brightness(.95);
}

.pilar-como__cierre {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.46;
    color: var(--primary);
    max-width: 924px;
    margin: 56px auto 0;
    text-align: center;
}

@media (max-width: 992px) {
    .pilar-como__imagen { min-height: 280px; margin-bottom: 24px; }
    .pilar-como__card { max-width: none; min-height: auto; }
}

/* ============================================================
   4) BENEFICIOS  (inc/pilar/beneficios.php)
   Cabecera centrada + flex-wrap de 5 cards (283px) centradas
============================================================ */
.pilar-bene__head {
    text-align: center;
    margin-bottom: 48px;
}

.pilar-bene__subtitulo {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.46;
    color: var(--primary);
    margin-top: 24px;
}

.pilar-bene__subtitulo strong {
    font-weight: 600;
}

.pilar-bene__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
}

.pilar-bene__card {
    width: 283px;
    background: var(--card-bd);
    border: 1px solid var(--card-bd);
    border-radius: 16px;
    box-shadow: var(--shadow-m);
    padding: 41px 17px 21px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pilar-bene__card-titulo {
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: var(--primary);
    padding-left: 16px;
}

.pilar-bene__card-box {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    flex: 1;
    display: flex;
    align-items: center;
}

.pilar-bene__card-box p {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--blue-card);
}

@media (max-width: 992px) {
    .pilar-bene__card { width: 100%; }
}

/* //cambio: 2026-07-14 slider beneficios mobile (peek + dots). Reglas activas SOLO con Swiper
   inicializado (<=992px); si Swiper no cargara, la card cae al width:100% apilado de arriba. */
@media (min-width: 993px) {
    /* fija el ancho del card en desktop por sobre .swiper-slide{width:100%} del bundle Swiper */
    .pilar-bene__grid > .pilar-bene__card { width: 283px; }
}
.pilar-bene__dots { display: none; }
.pilar-bene__dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--primary);
    opacity: .35;
    border-radius: 50%;
    transition: opacity .25s;
}
.pilar-bene__dots .swiper-pagination-bullet-active { opacity: 1; }
@media (max-width: 992px) {
    /* //cambio: 2026-07-14 (fix) el gate es la clase propia .is-slider que agrega el JS al iniciar Swiper,
       NO la clase interna de Swiper (v6.8.4 agrega swiper-container-initialized, no swiper-initialized) ->
       por eso antes las cards quedaban apiladas en una sola columna. Layout horizontal explícito para no
       depender del CSS base de Swiper. */
    .pilar-bene__swiper.is-slider { overflow: hidden; }
    .pilar-bene__swiper.is-slider .pilar-bene__grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;      /* evita que las cards al 82% envuelvan durante el slider */
        gap: 0;                 /* el espaciado lo pone spaceBetween de Swiper */
        justify-content: flex-start;
    }
    .pilar-bene__swiper.is-slider .pilar-bene__card {
        width: 82%;             /* deja asomar la card siguiente (peek) */
        flex-shrink: 0;         /* que no se compriman en el track flex */
    }
    .pilar-bene__swiper.is-slider ~ .pilar-bene__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 24px;
    }
}

/* ============================================================
   5) REQUISITOS  (inc/pilar/requisitos.php)
   Cabecera centrada + acordeón pill (border-radius 24px)
============================================================ */
.pilar-req__head {
    text-align: center;
    margin-bottom: 56px;
}

.pilar-req__tagline {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 24px;
}

.pilar-req__intro {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.46;
    color: var(--primary);
    max-width: 916px;
    margin: 24px auto 0;
}

.pilar-req__acc {
    max-width: 1121px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pilar-acc__item {
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow-m);
    overflow: hidden;
}

.pilar-acc__head {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    cursor: pointer;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
}

.pilar-acc__check {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pilar-acc__titulo {
    flex: 1;
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: var(--blue-card);
}

.pilar-acc__chev {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    color: var(--blue-card);
    transition: transform .3s ease;
    display: flex;
}

.pilar-acc__item.is-open .pilar-acc__chev {
    transform: rotate(180deg);
}

.pilar-acc__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.pilar-acc__item.is-open .pilar-acc__body {
    max-height: 800px;
}

.pilar-acc__lista {
    list-style: disc;
    padding: 0 24px 24px 63px;
}

.pilar-acc__lista li {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-gray);
}

.pilar-req__cierre {
    max-width: 1180px;
    margin: 48px auto 0;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--primary);
}

/* icono ACF por ítem (si existe); si no, muestra el check teal */
.pilar-acc__icono {
/*     flex: 0 0 24px;
    width: 24px;
    height: 24px;
    object-fit: contain; */
  width: 24px;
  height: 24px;
  background-color: rgb(87, 182, 178);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
  margin-right: 16px;
}

/* ============================================================
   6) CTA BANNER  (inc/pilar/cta.php)
   Card azul #0039A6, border-radius 24px, col-lg-7 texto | col-lg-5 imagen
============================================================ */
.pilar-cta__card {
    background: var(--blue-card);
    border-radius: 24px;
    padding: 60px;
    overflow: hidden;
}

.pilar-cta__card .row {
    align-items: center;
    margin: 0;
}

/* SVG marca Fidaval — absolutamente posicionado sobre la foto (borde izq de la imagen, centrado vertical) */
.pilar-cta__icono {
    position: absolute;
    left: 127px;
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

.pilar-cta__titulo {
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 24px;
}

/* //cambio: "FIDaval" en teal*/
.pilar-cta__titulo .accent {
    color: #57b6b2 !important;
    font-weight: 400;
}

.pilar-cta__texto {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 32px;
    max-width: 589px;
}

.pilar-cta__texto p { margin: 0; }

.pilar-btn--cta {
    background-color: var(--teal);
    color: var(--blue-btntx);
}

.pilar-btn--cta:hover {
    background-color: #4aa6a2;
    color: var(--blue-btntx);
}

.pilar-cta__imagen-wrap {
    padding-left: 32px;
    position: relative;
}

.pilar-cta__imagen {
    width: 100%;
    height: auto;
    border-radius: 24px;
    display: block;
    aspect-ratio: 600 / 400;
    object-fit: cover;
}

.pilar-section__intro h2 strong {
    color: #57B6B2 !important;
    font-weight: 500 !important;
}

@media (max-width: 992px) {
    .pilar-cta__card { padding: 36px; }
    .pilar-cta__titulo { font-size: 28px; }
    .pilar-cta__imagen-wrap { margin-top: 24px; padding-left: 15px; }
    /* //cambio: 2026-07-14 achicar ícono Fidaval en mobile (72px -> 48px), misma posición (left/top intactos) */
    .pilar-cta__icono { width: 48px; }
}