/* ===========================================================================
   VRF 2026 - Blog (índice y artículos)
   Piel que integra el blog en el diseño conceptual del sitio. La estructura (grid, columnas,
   sticky) sigue en el <style> de _BlogLayout.cshtml; aquí solo se redefine el aspecto:
     - Tipografía Poppins (antes Arial).
     - Paleta del sitio: azul #02447B, verde #5ABD76, texto #878787 / #626262 (antes verdes azulados).
     - Cabeceras tipo "hero" de las páginas interiores: fotografía con velo azul y título en mayúsculas.
     - Tarjetas blancas de radio 21px con la sombra del sitio.
     - Botones en píldora (radio 45px), verdes o con contorno, en mayúsculas.
   =========================================================================== */

.blog-shell {
    --vrf-blue: var(--e-global-color-primary, #02447B);
    --vrf-green: var(--e-global-color-accent, #5ABD76);
    --vrf-text: var(--e-global-color-text, #878787);
    --vrf-text-strong: #626262;
    --vrf-soft: #F4F8FB;
    --vrf-card-shadow: 0 4px 12px rgba(0, 0, 0, .22);
    background: #fff;
    color: var(--vrf-text);
    font-family: "Poppins", sans-serif;
}
.blog-shell h1, .blog-shell h2, .blog-shell h3, .blog-shell p, .blog-shell a, .blog-shell li,
.blog-shell input, .blog-shell small, .blog-shell strong, .blog-shell span { font-family: "Poppins", sans-serif; }
.blog-container { max-width: 1240px; padding: 0 30px; }

/* ---------------------------------------------------------------- cabecera del índice (hero) */
.blog-index { background: #fff; }
.blog-index-header,
.blog-hero {
    position: relative;
    z-index: 0;
    padding: 96px 0 84px;
    border: 0;
    color: #fff;
    text-align: center;
    background: var(--vrf-blue) url("wp/wp-content/uploads/2026/07/istockphoto-1346704654-640_adpp_is-11-1.jpg") center / cover no-repeat;
}
.blog-index-header:before,
.blog-hero:before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(2, 68, 123, .62); }
.blog-hero:after { display: none; }
.blog-index-eyebrow,
.blog-eyebrow {
    display: block;
    margin: 0 0 12px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--vrf-green);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.blog-index-header h1,
.blog-hero h1 {
    max-width: 980px;
    margin: 0 auto;
    color: #fff;
    font-size: 58px;
    font-weight: 700;
    line-height: 1.12;
    text-transform: uppercase;
}
.blog-index-intro,
.blog-hero__intro { max-width: 760px; margin: 18px auto 32px; color: #fff; font-size: 20px; font-weight: 500; line-height: 1.5; }
.blog-hero__intro { margin-bottom: 0; }

.blog-search-wrap { max-width: 470px; }
.blog-search {
    height: 52px;
    padding: 0 22px 0 52px;
    border: 0;
    border-radius: 45px;
    color: var(--vrf-text-strong);
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.blog-search:focus { border: 0; box-shadow: 0 0 0 3px rgba(90, 189, 118, .55), 0 4px 12px rgba(0, 0, 0, .25); }
.blog-search-icon { left: 20px; stroke: var(--vrf-blue); }

/* En escritorio la cabecera del sitio reserva 56px bajo el menú para el botón "CALL US TODAY" que
   cuelga. Sobre una cabecera con foto ese hueco se veía como una franja blanca. La foto sube hasta
   el menú (igual que los heros de What We Finance o Who We Are) y se compensa el relleno para que el
   título no quede debajo del botón. */
@media (min-width: 1025px) {
    .blog-shell > .blog-index > .blog-index-header:first-child,
    .blog-shell > .blog-hero:first-child,
    .blog-shell > :first-child > .blog-hero:first-child {
        margin-top: -56px;
        padding-top: 128px;
    }
    /* Artículos: empiezan con las migas de pan sobre blanco. El hueco no se ve como franja, pero
       sumado al relleno propio dejaba ~80px vacíos. Se recorta sin invadir la zona del botón,
       que queda a la derecha. */
    .blog-shell > .blog-container:first-child { margin-top: -30px; }
}

/* ---------------------------------------------------------------- rejilla de artículos */
.blog-index-content,
.blog-main { padding: 72px 0 96px; }
.blog-index-section-title,
.blog-section-heading {
    margin: 0 0 36px;
    color: var(--vrf-blue);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}
.blog-grid { gap: 34px 30px; }
/* La última fila incompleta se centra (CSS grid no puede): flex + ancho de
   tarjeta calculado con --gc-cols por breakpoint (3 / 2 a 900px / 1 a 600px). */
.blog-grid { --gc-cols: 3; --gc-gap: 30px; display: flex; flex-wrap: wrap; justify-content: center; }
.blog-grid > .blog-grid-card { flex: 0 0 calc((100% - (var(--gc-cols) - 1) * var(--gc-gap)) / var(--gc-cols)); min-width: 0; }
@media (max-width: 900px) { .blog-grid { --gc-cols: 2; } }
@media (max-width: 600px) { .blog-grid { --gc-cols: 1; } }
.blog-grid-card,
.blog-card,
.blog-topic {
    border: 0;
    border-radius: 21px;
    background: #fff;
    box-shadow: var(--vrf-card-shadow);
}
.blog-grid-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, .26); }
.blog-grid-card__image { height: 215px; background: var(--vrf-soft); }
.blog-grid-card__body { padding: 26px 28px 28px; }
.blog-grid-card__category,
.blog-tag {
    margin-bottom: 10px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--vrf-green);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.blog-grid-card h2,
.blog-card h2 { margin: 0 0 12px; font-size: 21px; font-weight: 700; line-height: 1.3; }
.blog-grid-card h2 a,
.blog-card h2,
.blog-topic h3 { color: var(--vrf-blue); text-decoration: none; }
.blog-grid-card h2 a:hover,
.blog-grid-card h2 a:focus { color: var(--vrf-green); text-decoration: none; }
.blog-grid-card h2 span { color: var(--vrf-green); }
.blog-grid-card__body > p,
.blog-card p,
.blog-topic p { color: var(--vrf-text); font-size: 15px; line-height: 1.65; }
.blog-grid-card__meta { padding-top: 16px; border-top: 1px solid rgba(2, 68, 123, .1); color: var(--vrf-text); }
.blog-author-mark { background: var(--vrf-blue); font-weight: 600; }
.blog-grid-card__meta strong { color: var(--vrf-blue); font-weight: 600; }
/* Autor y fecha juntos: heredaban un interlineado de ~28px para textos de 12-13px */
.blog-grid-card__meta { align-items: center; }
.blog-grid-card__meta strong,
.blog-grid-card__meta small { line-height: 1.35; }
.blog-grid-card__meta strong { margin-bottom: 2px; }
/* Toda la tarjeta lleva a la nota: el enlace del título se extiende sobre la tarjeta */
.blog-grid-card { position: relative; cursor: pointer; }
.blog-grid-card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.blog-grid-card:hover h2 a { color: var(--vrf-green); }
.blog-grid-card h2 a:focus-visible { outline: none; }
.blog-grid-card:has(h2 a:focus-visible) { outline: 3px solid var(--vrf-green); outline-offset: 3px; }
.blog-grid-card__meta small,
.blog-meta,
.article-meta { color: var(--vrf-text); }
.blog-no-results { border: 1px dashed rgba(2, 68, 123, .3); border-radius: 21px; color: var(--vrf-text); }

.blog-link,
.blog-back { color: var(--vrf-blue); font-weight: 600; text-decoration: none; }
.blog-link:hover, .blog-link:focus,
.blog-back:hover, .blog-back:focus { color: var(--vrf-green); text-decoration: none; }

/* ---------------------------------------------------------------- banda de llamada a la acción */
.blog-index-cta,
.article-inline-cta,
.article-cta {
    border: 0;
    border-radius: 21px;
    color: #fff;
    background: var(--vrf-blue);
    box-shadow: var(--vrf-card-shadow);
}
.blog-index-cta { margin-top: 64px; padding: 34px 40px; }
.blog-index-cta span { color: var(--vrf-green); font-size: 14px; font-weight: 600; letter-spacing: 2px; }
.blog-index-cta strong { font-size: 24px; font-weight: 700; text-transform: uppercase; }
.article-inline-cta { padding: 32px 34px; background: var(--vrf-blue); }
.article-inline-cta h2, .article-cta h2 { color: #fff; font-weight: 700; text-transform: uppercase; }
/* .article-body h2 (más abajo) lo pintaba azul sobre el fondo azul: se veía un hueco vacío */
.article-body .article-inline-cta h2 { color: #fff; margin-top: 0; }
.article-inline-cta p, .article-cta p { color: #fff; opacity: .92; }

/* botones en píldora, como en el resto del sitio */
.blog-button,
.article-button-secondary {
    display: inline-block;
    padding: 12px 34px;
    border-radius: 45px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.blog-button { border: 3px solid var(--vrf-green); color: #fff !important; background: var(--vrf-green); }
.blog-button:hover, .blog-button:focus { border-color: #fff; color: var(--vrf-blue) !important; background: #fff; }
.blog-shell .article-body .blog-button:hover,
.blog-shell .article-header .blog-button:hover { border-color: var(--vrf-blue); color: #fff !important; background: var(--vrf-blue); }
.article-button-secondary { border: 3px solid var(--vrf-blue); color: var(--vrf-blue); background: #fff; }
.article-button-secondary:hover, .article-button-secondary:focus { color: #fff; background: var(--vrf-blue); }

/* ---------------------------------------------------------------- artículo */
.blog-breadcrumbs { padding: 22px 0 0; color: var(--vrf-text); font-size: 14px; }
.blog-breadcrumbs a { display: inline-block; padding: 4px 0; color: var(--vrf-blue); font-weight: 500; text-decoration: none; }   /* zona táctil de 24px+ */
.blog-breadcrumbs a:hover, .blog-breadcrumbs a:focus { color: var(--vrf-green); text-decoration: none; }
.blog-breadcrumbs span { color: rgba(2, 68, 123, .35); }

.article-header { padding: 34px 0 40px; }
.article-header h1 {
    max-width: 980px;
    color: var(--vrf-blue);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.16;
    text-transform: uppercase;
}
/* Títulos en dos partes: cada una empieza en su propia línea. Más ancho para que la pregunta
   quepa entera en la primera línea en escritorio. */
.article-header h1:has(.article-title-line) { max-width: 1080px; font-size: clamp(28px, 3.85vw, 44px); }
.article-header h1 .article-title-line { display: block; text-wrap: balance; }
.article-header h1 .article-title-line + .article-title-line { margin-top: .4em; }
.article-header h1 .article-title-keep { white-space: nowrap; }
.article-deck { max-width: 800px; color: var(--vrf-text); font-size: 20px; line-height: 1.55; }
.article-hero { border-radius: 21px; box-shadow: var(--vrf-card-shadow); }

.article-layout { gap: 48px; padding: 56px 0 96px; }
.article-body {
    padding: 44px 48px;
    border: 0;
    border-radius: 21px;
    background: #fff;
    box-shadow: var(--vrf-card-shadow);
    color: var(--vrf-text-strong);
    font-size: 17px;
    line-height: 1.8;
}
.article-body h2 { margin: 40px 0 14px; color: var(--vrf-blue); font-size: 26px; font-weight: 700; line-height: 1.3; text-transform: uppercase; }
.article-body h3 { color: var(--vrf-green); font-size: 20px; font-weight: 600; }
.article-body a { color: var(--vrf-blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(90, 189, 118, .7); text-underline-offset: 3px; }
.article-body a:hover { color: var(--vrf-green); }
.article-body li::marker { color: var(--vrf-green); font-weight: 700; }
.article-note { border-left: 5px solid var(--vrf-green); border-radius: 0 14px 14px 0; background: var(--vrf-soft); color: var(--vrf-text-strong); }
.article-note strong { color: var(--vrf-blue); }
.article-disclaimer { border-top: 1px solid rgba(2, 68, 123, .12); color: var(--vrf-text); }

/* La barra lateral es sticky (en _BlogLayout). El sitio pone overflow-x: hidden en html y body, que
   anula position: sticky; en las páginas del blog se cambia por clip, que recorta igual el desborde
   lateral sin crear contenedor de scroll. top: 204px del menú fijo de escritorio + 24px de aire. */
html:has(.blog-shell), body:has(.blog-shell) { overflow-x: clip; }
.article-sidebar {
    top: 228px;
    /* Mantener la tarjeta completa en el flujo: el límite inferior del artículo desplaza
       la barra sticky al terminar, sin recortar el CTA ni crear un segundo scroll. */
}
.article-body h2[id] { scroll-margin-top: 228px; }   /* al usar el índice, el título no queda bajo el menú */
/* 901-1024px (tablet horizontal): el menú del sitio no es fijo, así que la barra se pega arriba. */
@media (max-width: 1024px) {
    .article-sidebar { top: 24px; }
    .article-body h2[id] { scroll-margin-top: 24px; }
}
.article-toc {
    padding: 28px;
    border: 0;
    border-radius: 21px;
    background: var(--vrf-soft);
    box-shadow: none;
}
.article-toc h2 { color: var(--vrf-blue); font-size: 17px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.article-toc li { color: var(--vrf-green); }
.article-toc a { color: var(--vrf-text-strong); text-decoration: none; }
.article-toc a:hover, .article-toc a:focus { color: var(--vrf-blue); text-decoration: none; }
.article-cta { padding: 28px; }
.article-cta h2 { font-size: 19px; }

/* ------------------------------------------- imagen pendiente (placeholder) */
/* Ocupa el lugar de la foto hasta que se genere con el prompt que muestra.
   Al tener la foto: se sustituye el <figure> por el <img class="article-hero"> habitual. */
.article-hero--placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-height: 360px;
    margin: 0;
    padding: 40px 48px;
    border: 2px dashed rgba(2, 68, 123, .28);
    background: var(--vrf-soft);
    box-shadow: none;
    color: var(--vrf-text-strong);
}
.article-hero__label {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--vrf-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.article-hero__file { margin: 0; color: var(--vrf-blue); font-family: Consolas, monospace; font-size: 14px; }
.article-hero__prompt { max-width: 900px; margin: 0; font-size: 15px; line-height: 1.65; }
.article-hero__prompt strong { color: var(--vrf-blue); }
.blog-grid-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-bottom: 2px dashed rgba(2, 68, 123, .28);
    color: var(--vrf-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------ tabla de datos */
/* El artículo es un elemento de la cuadrícula: sin min-width: 0 la tabla (min-width 520px) lo estira
   y en móvil la página se corta. Así se queda en el ancho de la pantalla y la tabla se desliza. */
.article-body { min-width: 0; }
.article-table-wrap { margin: 0 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 16px; }
.article-table th, .article-table td { padding: 12px 14px; border-bottom: 1px solid rgba(2, 68, 123, .12); text-align: right; }
.article-table th:first-child, .article-table td:first-child { text-align: left; }
.article-table thead th { background: var(--vrf-blue); color: #fff; font-weight: 700; }
.article-table thead th:first-child { border-radius: 10px 0 0 0; }
.article-table thead th:last-child { border-radius: 0 10px 0 0; }
.article-table tbody tr:nth-child(even) { background: var(--vrf-soft); }
.article-table-note { color: var(--vrf-text); font-size: 14px; }

/* -------------------------------------------------------------- checklist */
.article-checklist { padding-left: 0; list-style: none; }
/* Marca de verificación estática dentro de un círculo: se lee como lista, no como casilla
   que el lector pueda marcar (el "☐" del documento parecía un checkbox). */
.article-checklist li { position: relative; padding-left: 36px; }
.article-checklist li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(90, 189, 118, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ABD76' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ------------------------------------------- cierre del artículo ("Ready to ...?") */
/* Caja gris para que la llamada final destaque del resto del texto. */
.article-closing {
    margin: 44px 0 8px;
    padding: 32px 36px;
    border-radius: 21px;
    background: #eff2f4;
}
.article-body .article-closing h2 { margin-top: 0; }
.article-closing p:last-child { margin-bottom: 0; }

/* ------------------------------------------- preguntas frecuentes (acordeón) */
/* Mismo acordeón que la página /faq (vrf-faq.css): <details>/<summary> nativos, sin JavaScript. */
.article-body .faq-item {
    margin: 0 0 14px;
    border-radius: 21px;
    background: #fff;
    box-shadow: var(--vrf-card-shadow);
}
.article-body .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 26px;
    cursor: pointer;
    list-style: none;
}
.article-body .faq-item summary::-webkit-details-marker { display: none; }
.article-body .faq-item summary:focus-visible { outline: 3px solid var(--vrf-green); outline-offset: 3px; border-radius: 21px; }
.article-body .faq-item summary h3 { margin: 0; color: var(--vrf-blue); font-size: 18px; font-weight: 600; line-height: 1.45; }
.article-body .faq-item summary:hover h3 { color: var(--vrf-green); }
.article-body .faq-item__icon {
    position: relative;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--vrf-soft);
}
.article-body .faq-item__icon:before,
.article-body .faq-item__icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    background: var(--vrf-green);
    transition: transform .2s ease;
}
.article-body .faq-item__icon:after { transform: rotate(90deg); }
.article-body .faq-item[open] .faq-item__icon:after { transform: rotate(0deg); }
.article-body .faq-item__answer { padding: 0 26px 22px; font-size: 16px; line-height: 1.75; }
.article-body .faq-item__answer p { margin: 0; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .blog-index-header h1, .blog-hero h1 { font-size: 44px; }
    .article-header h1 { font-size: 36px; }
    .blog-index-section-title, .blog-section-heading { font-size: 30px; }
}
@media (max-width: 767px) {
    .blog-container { padding: 0 16px; }
    .blog-index-header, .blog-hero { padding: 64px 0 56px; }
    .blog-index-header h1, .blog-hero h1 { font-size: 32px; }
    .blog-index-intro, .blog-hero__intro { font-size: 17px; }
    .blog-index-content, .blog-main { padding: 48px 0 64px; }
    .blog-index-section-title, .blog-section-heading { font-size: 26px; margin-bottom: 26px; }
    .article-header h1 { font-size: 28px; }
    .article-deck { font-size: 17px; }
    .article-body { padding: 28px 22px; font-size: 16px; }
    .article-body h2 { font-size: 22px; }
    .article-closing { padding: 24px 20px; }
    .article-body .faq-item summary { padding: 18px 20px; }
    .article-body .faq-item summary h3 { font-size: 16px; }
    .article-body .faq-item__answer { padding: 0 20px 20px; font-size: 15px; }
    .article-hero--placeholder { min-height: 260px; padding: 26px 22px; }
    .blog-index-cta { padding: 28px 24px; text-align: left; }
    .blog-index-cta strong { font-size: 20px; }
    .blog-button, .article-button-secondary { width: 100%; text-align: center; }
    .article-sidebar { top: auto; }
}