/**
 * kaf-pages.css — Estilos específicos de página.
 *
 * Contiene estilos que aplican a secciones particulares
 * de cada vista. Solo se promueven a kaf-components.css
 * cuando se reutilizan en 3+ contextos.
 *
 * @package KAF/CSS
 */

/* ═══════════════════════════════════════════════════════════
   ABOUT US: PAGE BANNER (kaf-page-banner)
   Componente reutilizable: banner de cabecera con breadcrumbs
   ═══════════════════════════════════════════════════════════ */

.kaf-page-banner {
    position: relative;
    padding: 120px 50px;
    background-color: var(--kaf-blue-dark);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
}

/* Overlay azul sobre el fondo (idéntico al original) */
.kaf-page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(54, 97, 176, 0.82);
    z-index: 0;
}

.kaf-page-banner__inner {
    position: relative;
    z-index: 1;
    max-width: 1350px;
    margin: 0 auto;
}

.kaf-page-banner__title {
    font-family: var(--kaf-font-heading);
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    color: var(--kaf-white);
    margin: 0 0 20px;
}

/* ─── Breadcrumbs ──────────────────────────────────────────── */
.kaf-breadcrumb {
    display: inline-flex;
}

.kaf-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kaf-breadcrumb__item {
    font-family: var(--kaf-font-body);
    font-size: 14px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.8);
}

.kaf-breadcrumb__link {
    color: var(--kaf-white);
    text-decoration: none;
    transition: color var(--kaf-transition-fast);
}

.kaf-breadcrumb__link:hover {
    color: var(--kaf-yellow);
}

.kaf-breadcrumb__item--separator {
    color: rgba(255, 255, 255, 0.5);
}

.kaf-breadcrumb__item--current {
    color: var(--kaf-yellow);
    font-weight: 600;
}

/* ─── Extensión del banner: subtítulo descriptivo ──────────── */
.kaf-page-banner__subtitle {
    font-family: var(--kaf-font-body);
    font-size: 17px;
    color: rgba(255, 255, 255, 0.88);
    max-width: 680px;
    margin: 0 auto 20px;
    line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════
   INSTITUCIONAL: SISTEMA DE SECCIONES
   Fondos alternantes + tarjetas con acento de color
   ═══════════════════════════════════════════════════════════ */

.kaf-inst-section {
    padding: 80px 50px;
}

.kaf-inst-section--light {
    background-color: var(--kaf-white);
}

.kaf-inst-section--alt {
    background-color: #f4f7fc;         /* azul muy suave */
}

.kaf-inst-section--dark {
    background-color: var(--kaf-blue-dark);
    color: var(--kaf-white);
}

.kaf-inst-section--blue-dark-light {
    background-color: var(--kaf-blue-dark-light);  /* #4a7ec8 */
    color: var(--kaf-white);
}

/* Hereda todos los overrides de --dark para texto/checklist/badges */
.kaf-inst-section--blue-dark-light .kaf-inst-section-title,
.kaf-inst-section--dark             .kaf-inst-section-title {
    color: var(--kaf-white);
}

.kaf-inst-section--blue-dark-light .kaf-inst-icon-header {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--kaf-white);
}

.kaf-inst-section--blue-dark-light .kaf-inst-checklist__item {
    border-left-color: var(--kaf-yellow);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.kaf-inst-section--blue-dark-light .kaf-inst-checklist__item:hover {
    background-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.kaf-inst-section--blue-dark-light .kaf-inst-checklist__content,
.kaf-inst-section--blue-dark-light .kaf-inst-checklist__content strong {
    color: rgba(255, 255, 255, 0.9);
}

.kaf-inst-section--blue-dark-light .kaf-inst-policy-lead {
    color: rgba(255, 255, 255, 0.85);
}


.kaf-inst-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ─── Encabezado de sección ────────────────────────────────── */
.kaf-inst-header {
    text-align: center;
    margin-bottom: 56px;
}

.kaf-inst-section-title {
    font-family: var(--kaf-font-heading);
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    color: var(--kaf-dark);
    margin: 0 0 28px;
}

.kaf-inst-section--dark .kaf-inst-section-title {
    color: var(--kaf-white);
}

/* ─── Grid Misión / Visión (2 columnas iguales) ────────────── */
.kaf-inst-mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* ─── Tarjeta institucional ────────────────────────────────── */
.kaf-inst-card {
    background-color: var(--kaf-white);
    border-radius: 8px;
    border-top: 4px solid var(--kaf-coral);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: box-shadow var(--kaf-transition-fast), transform var(--kaf-transition-fast);
}

.kaf-inst-card:hover {
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.kaf-inst-card--coral { border-top-color: var(--kaf-coral); }
.kaf-inst-card--green { border-top-color: var(--kaf-green); }
.kaf-inst-card--blue  { border-top-color: var(--kaf-blue-dark); }
.kaf-inst-card--yellow{ border-top-color: var(--kaf-yellow); }

/* ─── Ícono de tarjeta ─────────────────────────────────────── */
.kaf-inst-card__icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.kaf-inst-card__icon-wrap--coral  { background-color: rgba(255, 111, 97, 0.12);  color: var(--kaf-coral); }
.kaf-inst-card__icon-wrap--green  { background-color: rgba(38, 194, 129, 0.12); color: var(--kaf-green); }
.kaf-inst-card__icon-wrap--blue   { background-color: rgba(54, 97, 176, 0.12);  color: var(--kaf-blue-dark); }
.kaf-inst-card__icon-wrap--yellow { background-color: rgba(255, 193, 7, 0.12);  color: #c79a00; }

.kaf-inst-card__title {
    font-family: var(--kaf-font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--kaf-dark);
    margin: 0 0 12px;
}

.kaf-inst-card__text {
    font-size: 15px;
    line-height: 1.8;
    color: var(--kaf-gray);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   INSTITUCIONAL: ICONO DE ENCABEZADO DE SECCIÓN
   Círculo grande con color de acento — centrado sobre el título
   ═══════════════════════════════════════════════════════════ */

.kaf-inst-icon-header {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    background-color: rgba(54, 97, 176, 0.1);
    color: var(--kaf-blue-dark);
}

/* Variantes de color del icono de encabezado */
.kaf-inst-section--dark .kaf-inst-icon-header {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--kaf-white);
}

/* Variante coral — sobre fondo claro (PESV) */
.kaf-inst-icon-header--coral {
    background-color: rgba(255, 111, 97, 0.12);
    color: var(--kaf-coral);
}

/* Variante coral del badge — sobre fondo claro */
.kaf-inst-badge--coral {
    border-color: rgba(255, 111, 97, 0.5);
    color: var(--kaf-coral);
    background-color: rgba(255, 111, 97, 0.08);
}

/* Variante coral del borde lateral de items en checklist */
.kaf-inst-checklist--coral .kaf-inst-checklist__item {
    border-left-color: var(--kaf-coral);
}

/* ═══════════════════════════════════════════════════════════
   INSTITUCIONAL: CUERPO DE POLÍTICA
   Contenido de política: párrafo lead + checklist + botón
   ═══════════════════════════════════════════════════════════ */

.kaf-inst-policy-body {
    max-width: 860px;
    margin: 0 auto;
}

.kaf-inst-policy-lead {
    font-size: 17px;
    line-height: 1.85;
    color: var(--kaf-gray);
    margin-bottom: 36px;
    text-align: center;
}

/* ─── Checklist semántica KAF ──────────────────────────────── */
.kaf-inst-checklist {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kaf-inst-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background-color: var(--kaf-white);
    border-radius: 6px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--kaf-blue-dark);
    transition: box-shadow var(--kaf-transition-fast), transform var(--kaf-transition-fast);
}

.kaf-inst-checklist__item:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
    transform: translateX(3px);
}

.kaf-inst-checklist__icon {
    display: flex;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Variantes de color del icono check */
.kaf-inst-checklist__icon--blue   { color: var(--kaf-blue-dark); }
.kaf-inst-checklist__icon--yellow { color: var(--kaf-yellow); }
.kaf-inst-checklist__icon--coral  { color: var(--kaf-coral); }
.kaf-inst-checklist__icon--green  { color: var(--kaf-green); }

/* Variantes de borde lateral según política */
.kaf-inst-section--alt  .kaf-inst-checklist__item { border-left-color: var(--kaf-blue-dark); }
.kaf-inst-section--dark .kaf-inst-checklist__item {
    border-left-color: var(--kaf-yellow);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}
.kaf-inst-section--dark .kaf-inst-checklist__item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.kaf-inst-checklist__content {
    font-size: 15px;
    line-height: 1.75;
    color: var(--kaf-gray);
}

.kaf-inst-checklist__content strong {
    color: var(--kaf-dark);
    display: block;
    margin-bottom: 4px;
}

.kaf-inst-section--dark .kaf-inst-checklist__content,
.kaf-inst-section--dark .kaf-inst-checklist__content strong {
    color: rgba(255, 255, 255, 0.9);
}

/* ─── Botón de descarga ────────────────────────────────────── */
.kaf-inst-download-wrap {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.kaf-inst-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 6px;
    font-family: var(--kaf-font-body);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: background-color var(--kaf-transition-fast),
                transform var(--kaf-transition-fast),
                box-shadow var(--kaf-transition-fast);
}

.kaf-inst-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* Variante azul (Calidad) */
.kaf-inst-download-btn--blue {
    background-color: var(--kaf-blue-dark);
    color: var(--kaf-white);
}

.kaf-inst-download-btn--blue:hover {
    background-color: var(--kaf-blue-dark-light);
    color: var(--kaf-white);
}

/* Variante amarilla (SG-SST) */
.kaf-inst-download-btn--yellow {
    background-color: var(--kaf-yellow);
    color: var(--kaf-dark);
}

.kaf-inst-download-btn--yellow:hover {
    background-color: #e6ac00;
    color: var(--kaf-dark);
}

/* Variante coral (PESV) */
.kaf-inst-download-btn--coral {
    background-color: var(--kaf-coral);
    color: var(--kaf-white);
}

.kaf-inst-download-btn--coral:hover {
    background-color: #e8564a;
    color: var(--kaf-white);
}

/* Badge de formato del documento */
.kaf-inst-download-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 7px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.25);
    color: inherit;
    vertical-align: middle;
}

.kaf-inst-download-btn--yellow .kaf-inst-download-badge {
    background-color: rgba(0, 0, 0, 0.12);
}

/* ─── Badge de subtítulo de sección (SG-SST / PESV) ───────── */
.kaf-inst-badge {
    display: inline-block;
    font-family: var(--kaf-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════
   OUR TOOLS: SISTEMA DE HERRAMIENTAS EDUCATIVAS
   Secciones alternadas con imagen + texto — layout Bootstrap
   ═══════════════════════════════════════════════════════════ */

/* kaf-tool-section hereda padding de .kaf-section (via tokens) */
.kaf-tool-section--light {
    background-color: var(--kaf-white);
}

.kaf-tool-section--alt {
    background-color: #f4f7fc;
}

/* ─── Grid de 2 columnas nativo (texto IZQ / media DER) ────── */
.kaf-tool-grid {
    display: grid;
    grid-template-columns: 7fr 4fr;
    gap: 3rem;
    align-items: center;
}

.kaf-tool-grid__media {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ─── Badge de categoría de herramienta ────────────────────── */
.kaf-tool-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--kaf-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.kaf-tool-badge--blue {
    background-color: rgba(54, 97, 176, 0.1);
    color: var(--kaf-blue-dark);
}

.kaf-tool-badge--green {
    background-color: rgba(38, 194, 129, 0.12);
    color: #1a9e6a;
}

.kaf-tool-badge--coral {
    background-color: rgba(255, 111, 97, 0.1);
    color: var(--kaf-coral);
}

.kaf-tool-badge--yellow {
    background-color: rgba(255, 193, 7, 0.12);
    color: #b78a00;
}

/* ─── Área de texto de la herramienta ──────────────────────── */
.kaf-tool-content {
    padding: 8px 0;
}

.kaf-tool-title {
    font-family: var(--kaf-font-heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--kaf-dark);
    margin: 0 0 16px;
}

.kaf-tool-lead {
    font-size: 16px;
    line-height: 1.8;
    color: var(--kaf-gray);
    margin-bottom: 28px;
}

/* ─── Feature list con check SVG ───────────────────────────── */
.kaf-tool-features {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kaf-tool-features__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--kaf-gray);
    line-height: 1.5;
}

.kaf-tool-features__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--kaf-blue-dark);
}

.kaf-tool-features__icon--green  { color: var(--kaf-green); }
.kaf-tool-features__icon--coral  { color: var(--kaf-coral); }
.kaf-tool-features__icon--yellow { color: #b78a00; }

/* ─── Botón de acceso a plataforma ─────────────────────────── */
.kaf-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 28px;
    border-radius: 6px;
    font-family: var(--kaf-font-body);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: background-color var(--kaf-transition-fast),
                transform var(--kaf-transition-fast),
                box-shadow var(--kaf-transition-fast);
}

.kaf-tool-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}

.kaf-tool-btn--blue {
    background-color: var(--kaf-blue-dark);
    color: var(--kaf-white);
}

.kaf-tool-btn--blue:hover {
    background-color: var(--kaf-blue-dark-light);
    color: var(--kaf-white);
}

.kaf-tool-btn--green {
    background-color: var(--kaf-green);
    color: var(--kaf-white);
}

.kaf-tool-btn--green:hover {
    background-color: #1fad72;
    color: var(--kaf-white);
}

.kaf-tool-btn--coral {
    background-color: var(--kaf-coral);
    color: var(--kaf-white);
}

.kaf-tool-btn--coral:hover {
    background-color: #e8564a;
    color: var(--kaf-white);
}

.kaf-tool-btn--yellow {
    background-color: var(--kaf-yellow);
    color: var(--kaf-dark);
}

.kaf-tool-btn--yellow:hover {
    background-color: #e6ac00;
    color: var(--kaf-dark);
}

.kaf-tool-btn--orange {
    background-color: var(--kaf-orange);
    color: var(--kaf-white);
}

.kaf-tool-btn--orange:hover {
    background-color: var(--kaf-orange-hover);
    color: var(--kaf-white);
}

.kaf-tool-btn--purple {
    background-color: var(--kaf-purple);
    color: var(--kaf-white);
}

.kaf-tool-btn--purple:hover {
    background-color: var(--kaf-purple-hover);
    color: var(--kaf-white);
}

/* Variantes badge orange / purple */
.kaf-tool-badge--orange {
    background-color: rgba(247, 128, 26, 0.1);
    color: var(--kaf-orange);
}

.kaf-tool-badge--purple {
    background-color: rgba(123, 94, 167, 0.1);
    color: var(--kaf-purple);
}

/* Variantes feature-icon orange / purple */
.kaf-tool-features__icon--orange { color: var(--kaf-orange); }
.kaf-tool-features__icon--purple { color: var(--kaf-purple); }

/* ─── Imagen de la herramienta ──────────────────────────────── */
.kaf-tool-img-wrap {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: box-shadow var(--kaf-transition-fast), transform var(--kaf-transition-fast);
    line-height: 0;
}

.kaf-tool-img-wrap:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

.kaf-tool-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.kaf-tool-img-wrap:hover .kaf-tool-img {
    transform: scale(1.03);
}

/* ─── Wrapper del botón (debajo de la imagen, col derecha) ─── */
.kaf-tool-cta-wrap {
    padding-top: 16px;
}

/* Botón a ancho completo de la columna de imagen */
.kaf-tool-btn--full {
    width: 100%;
    justify-content: center;
}

/* ─── Responsive: 1 columna en tablets/móviles (≤900px) ────── */
@media screen and (max-width: 900px) {
    .kaf-tool-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .kaf-tool-grid__media {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT: TESTIMONIOS (kaf-testimonials)
   Grid nativo 3 columnas — blockquote semántico — avatar circular
   Fondo: azul oscuro institucional — texto blanco
   ═══════════════════════════════════════════════════════════ */

.kaf-testimonials {
    background-color: var(--kaf-white);
    color: var(--kaf-dark);
}

.kaf-testimonials__header {
    text-align: center;
    margin-bottom: 48px;
}

.kaf-testimonials__title {
    font-family: var(--kaf-font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--kaf-blue-dark);
    margin: 0 0 16px;
    line-height: 1.2;
}

.kaf-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* ─── Tarjeta de testimonio ─────────────────────────────── */
.kaf-testimonial-card {
    background-color: var(--kaf-white);
    border: 1px solid #e8edf5;
    border-radius: 12px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    box-shadow: 0 2px 16px rgba(54, 97, 176, 0.06);
    transition: box-shadow var(--kaf-transition-fast),
                transform var(--kaf-transition-fast);
}

.kaf-testimonial-card:hover {
    box-shadow: 0 8px 32px rgba(54, 97, 176, 0.13);
    transform: translateY(-4px);
}

/* Avatar circular */
.kaf-testimonial-card__avatar-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--kaf-blue-dark);
    flex-shrink: 0;
}

.kaf-testimonial-card__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* blockquote: sin márgenes por defecto del navegador */
.kaf-testimonial-card__quote {
    margin: 0;
    flex: 1;
}

.kaf-testimonial-card__quote p {
    font-family: var(--kaf-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--kaf-gray);
    font-style: italic;
    margin: 0;
}

/* footer: nombre + rol */
.kaf-testimonial-card__author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kaf-testimonial-card__name {
    font-family: var(--kaf-font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--kaf-blue-dark);
    font-style: normal;
    text-transform: uppercase;
}

.kaf-testimonial-card__role {
    font-size: 12px;
    color: var(--kaf-gray);
    letter-spacing: 0.3px;
}

/* Responsive testimonios: 2 col en tablet, 1 col en móvil */
@media screen and (max-width: 900px) {
    .kaf-testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 640px) {
    .kaf-testimonials__grid {
        grid-template-columns: 1fr;
    }

    .kaf-testimonials__title {
        font-size: 28px;
    }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT: FORMULARIO + INFO (kaf-contact)
   Grid nativo 2 columnas — Form IZQ / Info DER
   Fondo: --kaf-green institucional — texto blanco
   ═══════════════════════════════════════════════════════════ */

.kaf-contact {
    background-color: var(--kaf-green);
}

.kaf-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* ─── Título de columna (blanco sobre verde) ────────────── */
.kaf-contact__col-title {
    font-family: var(--kaf-font-heading);
    font-size: 32px;
    font-weight: 700;
    color: var(--kaf-white);
    margin: 0 0 12px;
    line-height: 1.1;
}

/* Labels del formulario — blancos sobre verde ───────────── */
.kaf-contact .kaf-form__label {
    color: rgba(255, 255, 255, 0.9);
}

/* Inputs/Textarea: fondo blanco para máxima legibilidad ─── */
.kaf-contact .kaf-form__input,
.kaf-contact .kaf-form__textarea {
    background-color: var(--kaf-white);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--kaf-dark);
}

.kaf-contact .kaf-form__input:focus,
.kaf-contact .kaf-form__textarea:focus {
    border-color: var(--kaf-yellow);
    box-shadow: 0 0 0 3px rgba(255, 210, 99, 0.25);
}

/* ─── Botón de envío — azul oscuro sobre verde ──────────── */
.kaf-contact__submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 30px;
    background-color: var(--kaf-blue-dark);
    color: var(--kaf-white);
    border: none;
    border-radius: 6px;
    font-family: var(--kaf-font-body);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background-color var(--kaf-transition-fast),
                transform var(--kaf-transition-fast),
                box-shadow var(--kaf-transition-fast);
}

.kaf-contact__submit-btn:hover {
    background-color: var(--kaf-blue-dark-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(54, 97, 176, 0.4);
}

/* ─── Items de información — sobre fondo verde ──────────── */
.kaf-contact__info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}

.kaf-contact__info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Íconos: círculo blanco semitransparente — ícono blanco */
.kaf-contact__info-icon--blue,
.kaf-contact__info-icon--green,
.kaf-contact__info-icon--coral,
.kaf-contact__info-icon--yellow {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--kaf-white);
}

.kaf-contact__info-label {
    font-family: var(--kaf-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 6px;
}

.kaf-contact__info-text {
    font-size: 15px;
    color: var(--kaf-white);
    line-height: 1.6;
    margin: 0;
}

.kaf-contact__info-link {
    color: var(--kaf-yellow);
    font-weight: 600;
    transition: color var(--kaf-transition-fast);
}

.kaf-contact__info-link:hover {
    color: var(--kaf-white);
}

/* ─── Mapa ──────────────────────────────────────────────── */
.kaf-contact__map-wrap {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin-top: 8px;
}

/* Separador HR visible sobre fondo verde */
.kaf-contact hr {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Responsive contacto: 1 col en tablet/móvil */
@media screen and (max-width: 900px) {
    .kaf-contact__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT: CTA WHATSAPP (kaf-whatsapp-cta)
   Sección de llamada a la acción — abre el modal
   Fondo azul oscuro — botón verde WhatsApp
   ═══════════════════════════════════════════════════════════ */

.kaf-whatsapp-cta {
    background-color: var(--kaf-blue-dark);
}

.kaf-whatsapp-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.kaf-whatsapp-cta__text {
    flex: 1;
    min-width: 220px;
}

.kaf-whatsapp-cta__title {
    font-family: var(--kaf-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--kaf-white);
    margin: 0 0 8px;
    line-height: 1.2;
}

.kaf-whatsapp-cta__lead {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.6;
}

/* Botón verde WhatsApp */
.kaf-whatsapp-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background-color: #25d366;
    color: var(--kaf-white);
    border: none;
    border-radius: 50px;
    font-family: var(--kaf-font-body);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color var(--kaf-transition-fast),
                transform var(--kaf-transition-fast),
                box-shadow var(--kaf-transition-fast);
}

.kaf-whatsapp-cta__btn:hover {
    background-color: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}

/* ─── Modificador: fondo verde institucional ────────────── */
.kaf-whatsapp-cta--green {
    background-color: var(--kaf-green);
}

.kaf-whatsapp-cta--green .kaf-whatsapp-cta__title {
    color: var(--kaf-white);
}

.kaf-whatsapp-cta--green .kaf-whatsapp-cta__lead {
    color: rgba(255, 255, 255, 0.85);
}

/* ─── Modificador: botón blanco sobre fondo verde ───────── */
.kaf-whatsapp-cta__btn--white {
    background-color: var(--kaf-white);
    color: #25d366;
}

.kaf-whatsapp-cta__btn--white:hover {
    background-color: var(--kaf-white);
    color: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 640px) {
    .kaf-whatsapp-cta__inner {
        flex-direction: column;
        text-align: center;
    }

    .kaf-whatsapp-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════
   MODAL OVERLAY — Fondo oscuro semitransparente
   Invisible por defecto. Visible con .kaf-modal-overlay--active
   ═══════════════════════════════════════════════════════════ */

.kaf-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.kaf-modal-overlay--active {
    opacity: 1;
    visibility: visible;
}

/* Bloquear scroll del body mientras el modal está abierto */
body.kaf-modal-open {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   MODAL KAF (kaf-modal)
   Dialog centrado con animación scale + fade
   Controlado 100% por clases CSS — Cero Bootstrap/jQuery
   ═══════════════════════════════════════════════════════════ */

.kaf-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: min(520px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--kaf-white);
    border-radius: 16px;
    border: none;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease,
                visibility 0.25s ease,
                transform 0.25s ease;
}

.kaf-modal--active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* ─── Cabecera del modal ────────────────────────────────── */
.kaf-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background-color: #25d366;
    border-radius: 16px 16px 0 0;
    position: relative;
}

.kaf-modal__header-icon {
    color: var(--kaf-white);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.kaf-modal__title {
    font-family: var(--kaf-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--kaf-white);
    margin: 0;
    flex: 1;
    line-height: 1.2;
}

/* Botón X de cierre */
.kaf-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--kaf-white);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--kaf-transition-fast),
                transform var(--kaf-transition-fast);
}

.kaf-modal__close:hover {
    background-color: rgba(255, 255, 255, 0.35);
    transform: rotate(90deg);
}

/* ─── Cuerpo del modal ──────────────────────────────────── */
.kaf-modal__body {
    padding: 28px 28px 32px;
}

.kaf-modal__intro {
    font-size: 14px;
    color: var(--kaf-gray);
    margin: 0 0 20px;
    line-height: 1.6;
}

/* El formulario interno usa las mismas clases .kaf-form */
.kaf-modal__form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Botón submit verde WhatsApp */
.kaf-modal__submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 24px;
    background-color: #25d366;
    color: var(--kaf-white);
    border: none;
    border-radius: 8px;
    font-family: var(--kaf-font-body);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background-color var(--kaf-transition-fast),
                transform var(--kaf-transition-fast),
                box-shadow var(--kaf-transition-fast);
}

.kaf-modal__submit-btn:hover {
    background-color: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

/* ═══════════════════════════════════════════════════════════
   HABEAS DATA CHECK — Checkbox de autorización de datos
   Ley 1581 de 2012 · Formulario de contacto principal
   ═══════════════════════════════════════════════════════════ */

.kaf-habeas-check {
    margin-bottom: 20px;
}

.kaf-habeas-check__inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Checkbox nativo estilizado */
.kaf-habeas-check__input {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--kaf-blue-dark);
    border-radius: 3px;
}

.kaf-habeas-check__label {
    font-family: var(--kaf-font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    cursor: pointer;
    margin: 0;
    flex: 1;
}

/* El botón que abre el modal habeas data — styled como link */
.kaf-habeas-check__link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: var(--kaf-yellow);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    line-height: inherit;
    transition: color var(--kaf-transition-fast);
}

.kaf-habeas-check__link:hover {
    color: var(--kaf-white);
}

/* ═══════════════════════════════════════════════════════════
   ABOUT US: NUESTRA ESENCIA (fusion-builder-row-3 original)
   Feature list a 2 columnas: texto + imágenes
   ═══════════════════════════════════════════════════════════ */


.kaf-esencia {
    padding: 80px 50px;
    background-color: var(--kaf-white);
}

.kaf-esencia__inner {
    max-width: 1350px;
    margin: 0 auto;
}

.kaf-esencia__header {
    text-align: center;
    margin-bottom: 60px;
}

.kaf-esencia__title {
    font-family: var(--kaf-font-heading);
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
    color: var(--kaf-dark);
    margin: 0 0 31px;
}

.kaf-esencia__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: start;
}

/* ─── Feature item ─────────────────────────────────────────── */
.kaf-esencia__feature {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.kaf-esencia__feature-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--kaf-blue-dark);
    color: var(--kaf-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kaf-esencia__feature-title {
    font-family: var(--kaf-font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--kaf-dark);
    margin: 0 0 10px;
    text-transform: uppercase;
}

.kaf-esencia__feature-content p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--kaf-gray);
    margin: 0;
}



/* ═══════════════════════════════════════════════════════════
   ABOUT US: PROGRAMAS (Chunk 3)
   Fondo gris claro — layout 25% imagen + 75% texto por programa
   ═══════════════════════════════════════════════════════════ */

.kaf-programas {
    background-color: #f7f7f7;
}

.kaf-programas__inner {
    max-width: 1350px;
    margin: 0 auto;
}

.kaf-programas__header {
    text-align: center;
    margin-bottom: 60px;
}

.kaf-programas__title {
    font-family: var(--kaf-font-heading);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--kaf-dark);
    margin: 0 0 31px;
}

/* ─── Programa individual ──────────────────────────────────── */
.kaf-programa {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
}

.kaf-programa__figure {
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--kaf-gray-light);
    flex-shrink: 0;
}

.kaf-programa__img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.kaf-programa__figure:hover .kaf-programa__img {
    transform: scale(1.04);
}

.kaf-programa__subtitle {
    font-family: var(--kaf-font-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--kaf-dark);
    margin: 0 0 14px;
    text-transform: uppercase;
}

.kaf-programa__content p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--kaf-gray);
    margin-bottom: 16px;
}

.kaf-programa__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kaf-programa__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--kaf-gray);
    font-weight: 600;
}

.kaf-programa__meta-icon {
    color: var(--kaf-coral);
    display: flex;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   ABOUT US: AULA VIRTUAL — CTA (Chunk 4)
   Fondo parallax con overlay oscuro — icono + título + botón
   ═══════════════════════════════════════════════════════════ */

.kaf-aula-virtual {
    position: relative;
    padding: 120px 50px;
    background-color: var(--kaf-dark);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
}

.kaf-aula-virtual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.62);
    z-index: 0;
}

.kaf-aula-virtual__inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.kaf-aula-virtual__icon {
    color: var(--kaf-yellow);
    margin-bottom: 20px;
}

.kaf-aula-virtual__title {
    font-family: var(--kaf-font-heading);
    font-size: 48px;
    font-weight: 700;
    color: var(--kaf-white);
    margin: 0 0 16px;
    line-height: 1.1;
}

.kaf-aula-virtual__text {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 36px;
}

/* ─── Override para botón blanco en contexto oscuro ────────── */
.kaf-aula-virtual .kaf-btn--white {
    background-color: var(--kaf-white);
    color: var(--kaf-dark);
    font-size: 16px;
    padding: 14px 40px;
    font-weight: 700;
    transition: background-color var(--kaf-transition-fast), transform var(--kaf-transition-fast);
}

.kaf-aula-virtual .kaf-btn--white:hover {
    background-color: var(--kaf-yellow);
    color: var(--kaf-dark);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   ABOUT US: ALIANZAS (Chunk 5)
   Fondo blanco — flex-wrap centrado — logos con object-fit contain
   ═══════════════════════════════════════════════════════════ */

.kaf-alianzas {
    background-color: var(--kaf-white);
}

.kaf-alianzas__inner {
    max-width: 1350px;
    margin: 0 auto;
}

.kaf-alianzas__header {
    text-align: center;
    margin-bottom: 50px;
}

.kaf-alianzas__title {
    font-family: var(--kaf-font-heading);
    font-size: 42px;
    font-weight: 700;
    color: var(--kaf-dark);
    margin: 0 0 31px;
}

.kaf-alianzas__carousel {
    padding: 0 60px 50px;   /* espacio lateral para las flechas */
}

/* Indicadores — color corporativo azul */
.kaf-alianzas__carousel .carousel-indicators [data-bs-target] {
    background-color: var(--kaf-blue-dark);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    opacity: 0.35;
    transition: opacity var(--kaf-transition-fast);
}

.kaf-alianzas__carousel .carousel-indicators .active {
    opacity: 1;
}

/* Fila de 3 logos por slide */
.kaf-alianzas__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 20px 0;
}

.kaf-alianzas__item {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 4px;
    transition: opacity var(--kaf-transition-fast), transform var(--kaf-transition-fast);
}

.kaf-alianzas__item:hover {
    opacity: 0.8;
    transform: translateY(-3px);
}

.kaf-alianzas__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Flechas de navegación — color azul institucional sobre blanco */
.kaf-alianzas__control {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--kaf-blue-dark) !important;
    opacity: 1 !important;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: background-color var(--kaf-transition-fast), transform var(--kaf-transition-fast);
}

.kaf-alianzas__control:hover {
    background-color: var(--kaf-blue) !important;
    transform: translateY(-50%) scale(1.08);
}

.kaf-alianzas__control .carousel-control-prev-icon,
.kaf-alianzas__control .carousel-control-next-icon {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1); /* fuerza blanco */
}

/* ═══════════════════════════════════════════════════════════
   ABOUT US: FAMILIA GRINBEHY (Chunk 6)
   Fondo --kaf-green (#26c281) — título y separador blancos
   ═══════════════════════════════════════════════════════════ */

.kaf-familia {
    background-color: var(--kaf-green);
    padding: 60px 50px 0;
}

.kaf-familia__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.kaf-familia__header {
    text-align: center;
    margin-bottom: 30px;
}

.kaf-familia__title {
    font-family: var(--kaf-font-heading);
    font-size: 48px;
    font-weight: 700;
    color: var(--kaf-white);
    line-height: 1;
    margin: 0 0 15px;
}

/* Separador blanco dashed sobre fondo verde */
.kaf-familia .kaf-separator--white {
    border-color: rgba(255, 255, 255, 0.7);
}

/* ─── Video wrapper ────────────────────────────────────────── */
.kaf-familia__video-wrapper {
    width: 100%;
}

.kaf-familia__video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   ABOUT US: SVG NUBES — Transición al Footer (Chunk 7)
   Colocado directamente debajo de .kaf-familia
   fill inline = --kaf-blue-dark (#3661b0)
   ═══════════════════════════════════════════════════════════ */

.kaf-clouds-bottom {
    display: block;
    line-height: 0;             /* elimina espacio vertical bajo el SVG */
    overflow: hidden;
    background-color: var(--kaf-green); /* fondo de la sección anterior */
    margin-top: -1px;           /* sella el gap entre sección y SVG */
}

.kaf-clouds-bottom svg {
    display: block;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   HOME: HERO (row-2 original)
   ═══════════════════════════════════════════════════════════ */


.kaf-hero {
    position: relative;
    min-height: 500px;
    padding: 200px 50px;
    background-image: url("../img/gallery/kids_conner_4.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.kaf-hero__overlay {
    position: absolute;
    inset: 0;
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════
   HOME: INTRODUCCIÓN (row-3 original)
   Grid 2/5 imagen + 3/5 texto
   ═══════════════════════════════════════════════════════════ */

.kaf-intro {
    padding: 85px 50px 55px;
}

.kaf-intro__grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 48px;
    align-items: flex-start;
    max-width: 1350px;
    margin: 0 auto;
}

.kaf-intro__image-col {
    text-align: center;
}

.kaf-intro__image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.kaf-intro__text-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.kaf-intro__title {
    font-family: var(--kaf-font-heading);
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
    color: var(--kaf-dark);
    margin: 0 0 31px;
}

.kaf-intro__text-col p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--kaf-gray);
}

/* ═══════════════════════════════════════════════════════════
   HOME: SERVICIOS / ESPECIALIZACIÓN (row-4 original)
   Fondo: bg_section_1.jpg — Grid icono + texto
   ═══════════════════════════════════════════════════════════ */

.kaf-services {
    padding: 100px 50px 50px;
    background-color: var(--kaf-green);
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
}

.kaf-services__inner {
    max-width: 1350px;
    margin: 0 auto;
}

.kaf-services__title {
    font-family: var(--kaf-font-heading);
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
    color: var(--kaf-white);
    text-align: center;
    margin: 0 0 31px;
}

.kaf-services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 40px;
}

.kaf-services__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 50px;
}

.kaf-services__icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.kaf-services__icon img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.kaf-services__content {
    color: var(--kaf-white);
}

.kaf-services__subtitle {
    font-family: var(--kaf-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--kaf-white);
    margin: 0 0 31px;
}

.kaf-services__content p {
    color: var(--kaf-white);
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════
   HOME: PARALLAX SEPARATOR (row-5 original)
   ═══════════════════════════════════════════════════════════ */

.kaf-parallax-sep {
    min-height: 340px;
    padding: 170px 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/* ═══════════════════════════════════════════════════════════
   HOME: EQUIPO DOCENTE (row-6 original)
   Grid 3 columnas: foto centrada + nombre + cargo + bio + social
   ═══════════════════════════════════════════════════════════ */

.kaf-team {
    padding: 100px 50px 70px;
}

.kaf-team__inner {
    max-width: 1350px;
    margin: 0 auto;
}

.kaf-team__title {
    font-family: var(--kaf-font-heading);
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
    color: var(--kaf-dark);
    text-align: center;
    margin: 0 0 31px;
}

.kaf-team__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.kaf-team__card {
    text-align: center;
}

.kaf-team__figure {
    margin: 0 0 20px;
    overflow: hidden;
    border-radius: 4px;
}

.kaf-team__photo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.kaf-team__card:hover .kaf-team__photo {
    transform: scale(1.03);
}

.kaf-team__info {
    text-align: center;
}

.kaf-team__name {
    font-family: var(--kaf-font-body);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.5;
    color: var(--kaf-dark);
    margin: 0 0 4px;
}

.kaf-team__role {
    display: block;
    font-family: var(--kaf-font-body);
    font-size: 14px;
    color: var(--kaf-coral);
    margin-bottom: 16px;
}

.kaf-team__bio {
    font-size: 16px;
    line-height: 1.8;
    color: var(--kaf-gray);
    margin: 0 0 20px;
}

/* Iconos de redes sociales */
.kaf-team__social {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.kaf-team__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    color: var(--kaf-white);
    font-size: 16px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.kaf-team__social-link:hover {
    opacity: 0.85;
}

.kaf-team__social-link--facebook {
    background-color: #3b5998;
}

.kaf-team__social-link--instagram {
    background-color: #d10050;
}

.kaf-team__social-link--email {
    background-color: #1e88e5;
}

/* Iconos SVG inline */
.kaf-team__social-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ═══════════════════════════════════════════════════════════
   HOME: CONTADORES ANIMADOS (row-7 original)
   Fondo: pencil_bkgd.jpg — Grid 4 columnas
   ═══════════════════════════════════════════════════════════ */

.kaf-counters {
    position: relative;
    padding: 100px 50px 0;
    background-color: var(--kaf-green);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.kaf-counters__inner {
    max-width: 1350px;
    margin: 0 auto;
}

.kaf-counters__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.kaf-counters__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kaf-counters__number {
    font-family: var(--kaf-font-heading);
    font-size: 85px;
    font-weight: 700;
    line-height: 1;
    color: var(--kaf-white);
}

.kaf-counters__label {
    font-family: var(--kaf-font-body);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--kaf-white);
    margin-top: 8px;
}

/* Separador SVG: Nubes (clouds candy) */
.kaf-clouds {
    position: relative;
    margin-top: 40px;
    margin-left: -50px;
    margin-right: -50px;
    line-height: 0;
}

.kaf-clouds__svg {
    display: block;
    width: 100%;
    height: 100px;
}

/* ═══════════════════════════════════════════════════════════
   HOME: RINCÓN DE LOS NIÑOS — GALERÍA (row-12 original)
   Grid 3×3 con hover lift
   ═══════════════════════════════════════════════════════════ */

.kaf-gallery {
    padding: 100px 50px;
}

.kaf-gallery__inner {
    max-width: 1350px;
    margin: 0 auto;
}

.kaf-gallery__title {
    font-family: var(--kaf-font-heading);
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
    color: var(--kaf-dark);
    text-align: center;
    margin: 0 0 31px;
}

.kaf-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.kaf-gallery__item {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
}

.kaf-gallery__photo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    transition: transform 0.35s ease, filter 0.35s ease;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.kaf-gallery__item:hover .kaf-gallery__photo {
    transform: scale(1.05);
    filter: brightness(1.05);
}

/* ═══════════════════════════════════════════════════════════
   HOME: BOTÓN INSTAGRAM (row-10 original)
   Full-width CTA hacia Instagram
   ═══════════════════════════════════════════════════════════ */

.kaf-instagram-cta {
    background-color: var(--kaf-green);
}

.kaf-instagram-cta__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 20px;
    font-family: var(--kaf-font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--kaf-white);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.kaf-instagram-cta__link:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.kaf-instagram-cta__link svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   HOME: SEMANA GRINBEHYSTA (row-11 original)
   Fondo: family-bbq-bkgd.jpg — Texto centrado
   ═══════════════════════════════════════════════════════════ */

.kaf-semana {
    padding: 100px 50px;
    background-color: var(--kaf-dark);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.kaf-semana__inner {
    max-width: 1350px;
    margin: 0 auto;
    text-align: center;
}

.kaf-semana__title {
    font-family: var(--kaf-font-heading);
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
    color: var(--kaf-white);
    margin: 0 0 31px;
}

/* Separador dashed amarillo (variante para fondos oscuros) */
.kaf-separator--yellow-dashed {
    border-top: 2px dashed var(--kaf-yellow);
}

.kaf-semana__text {
    max-width: 76%;
    margin: 0 auto;
}

.kaf-semana__text p {
    font-family: var(--kaf-font-body);
    font-size: 18px;
    line-height: 1.7;
    color: var(--kaf-white);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   HOME: COUNTDOWN KAF (Semana Grinbehysta)
   3 bloques: Days · Hrs · Min — sin segundos
   ═══════════════════════════════════════════════════════════ */

.kaf-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.kaf-countdown__block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 100px;
}

.kaf-countdown__number {
    font-family: var(--kaf-font-heading);
    font-size: 90px;
    font-weight: 700;
    line-height: 1;
    color: var(--kaf-white);
    letter-spacing: 2px;
}

.kaf-countdown__label {
    font-family: var(--kaf-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.kaf-countdown__separator {
    font-family: var(--kaf-font-heading);
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.4);
    /* Subir levemente para alinear visualmente con los números */
    margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════════
   HOME: CTA REGISTRO (row-13 original)
   Fondo verde — Título + Botón
   ═══════════════════════════════════════════════════════════ */

.kaf-cta-register {
    position: relative;
    padding: 55px 50px 0;
    background-color: var(--kaf-green);
}

.kaf-cta-register__inner {
    max-width: 1350px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 30px;
}

.kaf-cta-register__title {
    font-family: var(--kaf-font-heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--kaf-white);
    margin: 0;
}

/* Botón rounded blanco */
.kaf-btn--rounded {
    border-radius: 25px;
}

.kaf-btn--white {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--kaf-font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--kaf-dark);
    background-color: var(--kaf-white);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.kaf-btn--white:hover {
    background-color: var(--kaf-yellow);
    transform: translateY(-2px);
}

/* Nubes azules (variante para CTA) */
.kaf-clouds--blue {
    margin-left: -50px;
    margin-right: -50px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media screen and (max-width: 1024px) {
    /* ─── ABOUT US responsive ────────────────────────────── */
    .kaf-page-banner {
        padding: 80px 30px;
    }

    .kaf-page-banner__title {
        font-size: 45px;
    }

    .kaf-inst-section {
        padding: 60px 30px;
    }

    .kaf-inst-mv-grid {
        grid-template-columns: 1fr;
    }

    .kaf-inst-card {
        padding: 28px 24px;
    }

    .kaf-esencia {
        padding: 60px 30px;
    }

    .kaf-esencia__body {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* ─── HOME ───────────────────────────────────────────── */
    .kaf-familia {
        padding: 50px 30px 0;
    }

    .kaf-familia__title {
        font-size: 38px;
    }

    /* ─── HOME ───────────────────────────────────────────── */
    .kaf-hero {
        padding: 150px 30px;
        min-height: 350px;
    }

    .kaf-intro {
        padding: 60px 30px 40px;
    }

    .kaf-intro__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .kaf-intro__image {
        max-width: 300px;
    }

    .kaf-intro__title {
        font-size: 36px;
    }

    .kaf-services {
        padding: 60px 30px 30px;
    }

    .kaf-services__grid {
        grid-template-columns: 1fr;
    }

    .kaf-services__title {
        font-size: 36px;
    }

    .kaf-services__icon img {
        width: 80px;
        height: 80px;
    }

    .kaf-parallax-sep {
        padding: 100px 0;
        min-height: 200px;
    }

    .kaf-team {
        padding: 60px 30px 50px;
    }

    .kaf-team__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .kaf-team__title {
        font-size: 36px;
    }

    .kaf-counters {
        padding: 60px 30px 0;
    }

    .kaf-counters__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .kaf-counters__number {
        font-size: 65px;
    }

    .kaf-clouds {
        margin-left: -30px;
        margin-right: -30px;
    }

    .kaf-gallery {
        padding: 60px 30px;
    }

    .kaf-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .kaf-gallery__title {
        font-size: 36px;
    }

    .kaf-semana {
        padding: 60px 30px;
    }

    .kaf-semana__title {
        font-size: 36px;
    }

    .kaf-semana__text {
        max-width: 100%;
    }

    .kaf-countdown__number {
        font-size: 65px;
    }

    .kaf-countdown__separator {
        font-size: 55px;
    }

    .kaf-countdown__block {
        min-width: 80px;
    }

    .kaf-cta-register {
        padding: 40px 30px 0;
    }

    .kaf-cta-register__inner {
        flex-direction: column;
        text-align: center;
    }

    .kaf-cta-register__title {
        font-size: 32px;
    }

    .kaf-clouds--blue {
        margin-left: -30px;
        margin-right: -30px;
    }
}

@media screen and (max-width: 640px) {
    /* ─── ABOUT US responsive ────────────────────────────── */
    .kaf-page-banner {
        padding: 60px 20px;
    }

    .kaf-page-banner__title {
        font-size: 36px;
    }

    .kaf-inst-section {
        padding: 40px 20px;
    }

    .kaf-inst-section-title {
        font-size: 32px;
    }

    .kaf-inst-card {
        padding: 24px 20px;
    }

    .kaf-esencia {
        padding: 40px 20px;
    }

    .kaf-esencia__title {
        font-size: 32px;
    }

    /* ─── HOME ───────────────────────────────────────────── */
    .kaf-familia {
        padding: 40px 20px 0;
    }

    .kaf-familia__title {
        font-size: 32px;
    }

    /* ─── HOME ───────────────────────────────────────────── */
    .kaf-hero {
        padding: 120px 20px;
        min-height: 280px;
    }

    .kaf-intro {
        padding: 40px 20px 30px;
    }

    .kaf-intro__image {
        max-width: 250px;
    }

    .kaf-intro__title {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .kaf-services {
        padding: 40px 20px 20px;
    }

    .kaf-services__title {
        font-size: 28px;
    }

    .kaf-services__item {
        grid-template-columns: 60px 1fr;
    }

    .kaf-services__icon img {
        width: 60px;
        height: 60px;
    }

    .kaf-parallax-sep {
        padding: 80px 0;
        min-height: 160px;
    }

    .kaf-team {
        padding: 40px 20px 30px;
    }

    .kaf-team__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .kaf-team__title {
        font-size: 28px;
    }

    .kaf-team__photo {
        max-width: 300px;
        margin: 0 auto;
    }

    .kaf-counters {
        padding: 40px 20px 0;
    }

    .kaf-counters__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .kaf-counters__number {
        font-size: 50px;
    }

    .kaf-counters__label {
        font-size: 14px;
    }

    .kaf-clouds {
        margin-left: -20px;
        margin-right: -20px;
    }

    .kaf-clouds__svg {
        height: 60px;
    }

    .kaf-gallery {
        padding: 40px 20px;
    }

    .kaf-gallery__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .kaf-gallery__title {
        font-size: 28px;
    }

    .kaf-instagram-cta__link {
        font-size: 15px;
        padding: 16px 15px;
    }

    .kaf-semana {
        padding: 40px 20px;
    }

    .kaf-semana__title {
        font-size: 28px;
    }

    .kaf-semana__text p {
        font-size: 16px;
    }

    .kaf-countdown {
        gap: 6px;
    }

    .kaf-countdown__number {
        font-size: 50px;
    }

    .kaf-countdown__separator {
        font-size: 42px;
        margin-bottom: 18px;
    }

    .kaf-countdown__block {
        min-width: 70px;
    }

    .kaf-cta-register {
        padding: 30px 20px 0;
    }

    .kaf-cta-register__title {
        font-size: 26px;
    }

    .kaf-clouds--blue {
        margin-left: -20px;
        margin-right: -20px;
    }
}