/*.geo-divider {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    line-height: 0;
}*/

.geo-shape {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Degradado profesional */
    background-size: 200% 200%;
    /* Forma geométrica elegante */
    clip-path: polygon(0 55%, 100% 35%, 100% 100%, 0% 100%);
    /* Animación suave de fondo */
    animation: gradientMove 8s ease-in-out infinite;
}

.geo-divider .geo-shape {
    background: linear-gradient( 135deg, #00c6ff 0%, #0072ff 50%, #004aad 100% );
}
.geo-divider.alt .geo-shape {
    background: linear-gradient( 135deg, #FFD95A 0%, #FFC300 45%, #FFB000 75%, #D98E00 100% );
}
.geo-divider.green .geo-shape {
    background: linear-gradient( 135deg, #66BB6A 0%, #2E8B57 45%, #1B5E20 100% );
}
    /* Brillo elegante */
    .geo-shape::after {
        content: "";
        position: absolute;
        top: 0;
        left: -40%;
        width: 25%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,0.5), transparent );
        transform: skewX(-25deg);
        animation: shineMove 6s ease-in-out infinite;
    }

/* Movimiento del degradado */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Movimiento del brillo */
@keyframes shineMove {
    0% {
        left: -30%;
    }

    100% {
        left: 130%;
    }
}

.geo-divider.alt .geo-shape {
    clip-path: polygon(0 35%, 100% 55%, 100% 100%, 0% 100%);
}

.snp-circle .geo-divider {
    height: 100px;
}
.programas-section {
    background: #ffffff;
}

.snp-circle {
    background: #f4f7fb;
}



/*Asegúrate que la sección sea display: block o flex con dirección columna*/
.programas-section,
.snp-circle {
    display: flex;
    flex-direction: column; /* apila verticalmente */
    position: relative; /* importante para los dividers absolutos si los hay */
}

/*Ajusta el divisor para que ocupe toda la fila*/
.geo-divider {
    position: relative; /* no absolute */
    width: 100%;
    height: 120px; /* ajusta según tu diseño */
    overflow: hidden;
    margin-top: auto; /* empuja al final de la sección */
}

/*Mantén el contenido dentro de la sección con ancho completo*/
.programas-section .container,
.snp-circle .container {
    width: 100%;
    flex: 1; /* crece según contenido */
}

/*Si quieres que todo el contenido + divisor ocupe 100% del alto de la sección*/
.programas-section.full-height,
.snp-circle.full-height {
    min-height: calc(100dvh - var(--nav-height));
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* contenido arriba, divisor abajo */
}


/* ANIMACION CINTILLO GUATEMALTECO */
.gt-flag-divider {
    width: 100%;
    height: 80px;
    position: relative;
    overflow: hidden;
}

    /* Colores bandera */
    .gt-flag-divider::before {
        content: "";
        position: absolute;
        inset: -20%; /* importante para que la deformación no corte bordes */

        background: linear-gradient( 90deg, #4997d0 0%, #4997d0 33.33%, #ffffff 33.33%, #ffffff 66.66%, #4997d0 66.66%, #4997d0 100% );
        animation: waveFlag 6s ease-in-out infinite;
    }

/* Ondulación suave */
@keyframes waveFlag {
    0% {
        transform: translateX(0) skewY(0deg);
    }

    25% {
        transform: translateX(-1%) skewY(1deg);
    }

    50% {
        transform: translateX(0%) skewY(-1deg);
    }

    75% {
        transform: translateX(1%) skewY(1deg);
    }

    100% {
        transform: translateX(0) skewY(0deg);
    }
}

.gt-flag-divider::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(0,0,0,0.08), transparent 30%, transparent 70%, rgba(0,0,0,0.08) );
    animation: shadowWave 6s ease-in-out infinite;
}

@keyframes shadowWave {
    0%,100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(2%);
    }
}

/*CENTRAR ESCUDO*/
.gt-flag-emblem {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; /* puedes ajustar */
    height: 60px; /* puedes ajustar */

    background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/15/Coat_of_arms_of_Guatemala.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@keyframes emblemWave {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    50% {
        transform: translate(-50%, -50%) rotate(0.5deg);
    }
}

.gt-flag-emblem {
    animation: emblemWave 6s ease-in-out infinite;
}