/**
 * home.css — Home de SIFE (front-page.php)
 * Cargado solo en la portada. El resto de las secciones del Home
 * (diferenciación, trust-bar, testimonios) son componentes
 * compartidos — ver main.css.
 */

/* ─────────────────────────────────────────────────────────
   HERO — imagen de fondo + overlay azul + título + descripción +
   2 botones, tal cual los campos de Opciones del Sitio → Home → Hero
   (template-parts/home-hero.php). Sin tabs, sin imagen aparte, sin
   contador — eso era una versión anterior que ya no se usa.
   ───────────────────────────────────────────────────────── */

.home-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--color-primario);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.home-hero--sin-imagen {
    background-image: linear-gradient(135deg, var(--color-primario), var(--color-primario-lt));
}

/* Overlay azul sobre la foto — mismo color de marca, para que el
   título/descripción en blanco siempre tengan contraste sin importar
   qué tan clara u oscura sea la imagen subida. */
.home-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,56,127,0.86), rgba(20,56,127,0.8));
    z-index: 0;
}

/* Sin padding-left/right acá: el shorthand de 3 valores los pisaba a 0
   (el valor del medio es left+right), tapando el padding horizontal
   que ya da .container — solo se fija top/bottom acá. */
.home-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    padding-top: 140px;
    padding-bottom: 96px;
}

.home-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--color-blanco);
    margin: 0 0 24px;
}

.home-hero__desc {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,0.88);
    max-width: 560px;
    margin: 0 0 32px;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* .header-verify-btn tal cual la usa el header (outline), pero acá el
   fondo es azul en vez de blanco — se sobreescribe a blanco/borde
   claro para que se lea, mismo criterio que .cta-final .header-cta-btn. */
.home-hero .header-verify-btn {
    background: transparent;
    color: var(--color-blanco);
    border-color: rgba(255,255,255,0.55);
}

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

@media (max-width: 900px) {
    .home-hero__inner { padding-top: 120px; padding-bottom: 72px; }
}

@media (max-width: 600px) {
    .home-hero { min-height: 86vh; }
    .home-hero__inner { padding-top: 100px; padding-bottom: 56px; }
}


/* ─────────────────────────────────────────────────────────
   FRANJA OSCURA DE CERTIFICACIONES — filas con foto + paginación
   AJAX, leídas en vivo del CPT certificacion (5 por página, ver
   template-parts/section-services.php + inc/ajax-certs.php).
   ───────────────────────────────────────────────────────── */

.home-services { background: var(--color-primario); padding: 64px 0; }

.home-services__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin: 0 auto 44px;
    max-width: 640px;
}

.home-services__eyebrow {
    border-color: rgba(255,255,255,0.25);
    color: var(--color-blanco);
    margin-bottom: 0;
}

.home-services__title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--color-blanco);
    margin: 0;
}

.home-services__subtitle {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--color-texto);
    margin: 0;
}

/* La lista de filas/sellos/paginación (.home-services__list,
   __row, __pagination...) es un componente COMPARTIDO — vive en
   main.css porque también lo usa archive-certificacion.php (catálogo
   completo). Acá solo quedan los overrides de color para cuando ese
   componente cae DENTRO de esta franja azul (Home) — en el catálogo,
   sobre fondo claro, usa los colores default de main.css. */
.home-services .home-services__page-btn {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.75);
}

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

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

.home-services .home-services__empty { color: rgba(255,255,255,0.65); }


/* ─────────────────────────────────────────────────────────
   BLOG — últimos 3 posts + botón "Ver todas" (template-parts/
   section-blog.php). Usa .blog-card tal cual (blog.css, encolado acá
   también — ver functions.php) para que un cambio en el diseño de la
   card del archive se refleje automáticamente acá también.
   ───────────────────────────────────────────────────────── */

.home-blog { padding: 64px 0; }

.home-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
}

.home-blog__actions { text-align: center; margin-top: 40px; }

@media (max-width: 900px) {
    .home-blog__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .home-blog__grid { grid-template-columns: 1fr; }
}