html {
    scroll-behavior: smooth;
}

::selection {
    background-color: #338534;
    color: #f7fff0;
}

/* ========================================
   TIPOGRAFÍA — edita tamaños aquí
   ======================================== */

:root {
    --font-family-base: "Lato", sans-serif;

    /* Hero */
    --text-display-size: 2.25rem;
    --text-display-size-md: 3rem;
    --text-display-weight: 700;
    --text-display-line-height: 1.2;

    --text-lead-size: 1.125rem;
    --text-lead-line-height: 1.6;

    /* Etiqueta de sección (ej. "Descripción del programa") */
    --text-eyebrow-size: 0.875rem;
    --text-eyebrow-weight: 600;
    --text-eyebrow-tracking: 0.24em;

    /* Título de sección (H2 principal) */
    --text-section-title-size: 1.875rem;
    --text-section-title-size-md: 2.25rem;
    --text-section-title-weight: 600;
    --text-section-title-line-height: 1.3;

    /* Título de sección pequeño (H2 intro/descripción) */
    --text-section-title-sm-size: 1.25rem;
    --text-section-title-sm-size-md: 1.5rem;
    --text-section-title-sm-weight: 700;

    /* Subtítulo (H3) */
    --text-subtitle-size: 1.25rem;
    --text-subtitle-weight: 600;

    /* Cuerpo de texto */
    --text-body-lg-size: 1.125rem;
    --text-body-md-size: 1rem;
    --text-body-sm-size: 0.875rem;
    --text-body-line-height: 1.6;
    --text-body-relaxed-line-height: 2;

    /* Tarjetas */
    --text-card-title-size: 1rem;
    --text-card-body-size: 0.8125rem;

    /* Etiquetas pequeñas (contacto, partner, etc.) */
    --text-label-size: 0.875rem;
    --text-label-xs-size: 0.75rem;
    --text-label-tracking: 0.24em;
    --text-label-tracking-wide: 0.32em;

    /* Botones */
    --text-btn-size: 0.875rem;
    --text-btn-weight: 700;
    --text-btn-tracking: 0.05em;

    /* Ítems de lista (beneficios) */
    --text-item-title-size: 1.125rem;
    --text-item-desc-size: 0.875rem;

    /* Meta / badges del hero */
    --text-meta-size: 0.875rem;
}

html,
body {
    font-family: var(--font-family-base);
}

button,
input,
select,
textarea,
optgroup {
    font-family: inherit;
}

.type-display {
    font-family: var(--font-family-base);
    font-size: var(--text-display-size);
    font-weight: var(--text-display-weight);
    line-height: var(--text-display-line-height);
}

.type-lead {
    font-family: var(--font-family-base);
    font-size: var(--text-lead-size);
    line-height: var(--text-lead-line-height);
}

.type-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-family-base);
    font-size: var(--text-eyebrow-size);
    font-weight: var(--text-eyebrow-weight);
    text-transform: uppercase;
    letter-spacing: var(--text-eyebrow-tracking);
}

.type-eyebrow--dot::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
}

.type-eyebrow--primary {
    color: #156b1d;
}

.type-eyebrow--secondary {
    color: #3c6185;
}

.type-eyebrow--light {
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: var(--text-label-tracking-wide);
}

.type-section-title {
    font-family: var(--font-family-base);
    font-size: var(--text-section-title-size);
    font-weight: var(--text-section-title-weight);
    line-height: var(--text-section-title-line-height);
}

.type-section-title--sm {
    font-size: var(--text-section-title-sm-size);
    font-weight: var(--text-section-title-sm-weight);
}

.type-section-title--primary {
    color: #156b1d;
}

.type-section-title--on-surface {
    color: #191c1d;
}

.type-section-title--blue {
    color: #0a3859;
}

.type-section-title--light {
    color: #ffffff;
}

.type-subtitle {
    font-family: var(--font-family-base);
    font-size: var(--text-subtitle-size);
    font-weight: var(--text-subtitle-weight);
}

.type-subtitle--blue {
    color: #0a3859;
}

.type-body-lg {
    font-family: var(--font-family-base);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-relaxed-line-height);
}

.type-body-md {
    font-family: var(--font-family-base);
    font-size: var(--text-body-md-size);
    line-height: var(--text-body-line-height);
}

.type-body-sm {
    font-family: var(--font-family-base);
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-line-height);
}

.type-body--muted {
    color: #40493d;
}

.type-body--light {
    color: rgba(255, 255, 255, 0.85);
}

.type-card-title {
    font-family: var(--font-family-base);
    font-size: var(--text-card-title-size);
    font-weight: 600;
}

.type-card-title--light {
    color: #ffffff;
}

.type-card-body {
    font-family: var(--font-family-base);
    font-size: var(--text-card-body-size);
    line-height: 1.625;
}

.type-card-title--primary {
    color: #156b1d;
}

.type-card-body--primary {
    color: #2d8450;
}

.type-card-body--light {
    color: rgba(255, 255, 255, 0.85);
}

.type-label {
    font-family: var(--font-family-base);
    font-size: var(--text-label-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--text-label-tracking);
}

.type-label--xs {
    font-size: var(--text-label-xs-size);
}

.type-label--secondary {
    color: #3c6185;
}

.type-label--wide {
    letter-spacing: var(--text-label-tracking-wide);
}

.type-item-title {
    font-family: var(--font-family-base);
    font-size: var(--text-item-title-size);
    font-weight: 600;
    color: #191c1d;
}

.type-item-desc {
    font-family: var(--font-family-base);
    font-size: var(--text-item-desc-size);
}

.type-link {
    font-family: var(--font-family-base);
    font-size: var(--text-item-title-size);
    font-weight: 600;
    color: #191c1d;
}

.type-link:hover {
    color: #156b1d;
}

.type-btn {
    font-family: var(--font-family-base);
    font-size: var(--text-btn-size);
    font-weight: var(--text-btn-weight);
    letter-spacing: var(--text-btn-tracking);
}

.type-meta {
    font-family: var(--font-family-base);
    font-size: var(--text-meta-size);
}

.type-highlight {
    color: #156b1d;
}

@media (min-width: 768px) {
    .type-display {
        font-size: var(--text-display-size-md);
    }

    .type-section-title {
        font-size: var(--text-section-title-size-md);
    }

    .type-section-title--sm {
        font-size: var(--text-section-title-sm-size-md);
    }
}

/* ========================================
   COMPONENTES
   ======================================== */

.gradient-overlay {
    background: linear-gradient(
        135deg,
        rgba(10, 56, 89, 0.9) 0%,
        rgba(67, 148, 65, 0.85) 100%
    );
}

.card-hover {
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.pattern-grid {
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 30px 30px;
}

.requisitos-glass-section {
    background: linear-gradient(180deg, #145a28 0%, #2d8450 45%, #439441 100%);
}

.requisitos-carousel {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 3rem;
}

.requisitos-carousel__viewport {
    overflow: hidden;
}

.requisitos-carousel__track {
    display: flex;
    gap: 1rem;
    transition: transform 0.5s ease;
    will-change: transform;
}

.requisitos-carousel__slide {
    flex-shrink: 0;
}

.requisitos-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: #ffffff;
    color: #156b1d;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.requisitos-carousel__btn--prev {
    left: 0;
}

.requisitos-carousel__btn--next {
    right: 0;
}

.requisitos-carousel__btn:hover {
    background: #f3f4f5;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.requisitos-carousel__btn:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.requisitos-carousel__btn .material-symbols-outlined {
    font-size: 1.5rem;
}

.glass-card {
    background: #ffffff;
    border: 1px solid rgba(21, 107, 29, 0.12);
    border-radius: 0.875rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

.glass-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: #156b1d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.875rem;
    color: #ffffff;
}

.glass-card-icon .material-symbols-outlined {
    font-size: 1.375rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

button {
    font-family: var(--font-family-base);
    font-size: var(--text-btn-size);
    font-weight: var(--text-btn-weight);
    letter-spacing: var(--text-btn-tracking);
}

button:focus {
    outline: 2px solid #156b1d;
    outline-offset: 2px;
}