/* ============================================
   GERENTES LÍDERES — escala tipográfica (embed ×1.088)
   Cuerpo, footer, formularios y hero (excepto h1)
   ============================================ */
#gl-page {
    --gl-text-scale: 1.088;
}

#gl-page section:not(.gl-hero) [class*="text-[10px]"],
#gl-page footer [class*="text-[10px]"],
#gl-page .gl-form-desktop [class*="text-[10px]"],
#gl-page .gl-hero :not(h1)[class*="text-[10px]"] {
    font-size: calc(10px * var(--gl-text-scale)) !important;
}

#gl-page section:not(.gl-hero) [class*="text-[11px]"],
#gl-page footer [class*="text-[11px]"],
#gl-page .gl-form-desktop [class*="text-[11px]"],
#gl-page .gl-hero :not(h1)[class*="text-[11px]"] {
    font-size: calc(11px * var(--gl-text-scale)) !important;
}

#gl-page section:not(.gl-hero) [class*="text-xs"],
#gl-page footer [class*="text-xs"],
#gl-page .gl-form-desktop [class*="text-xs"],
#gl-page .gl-hero :not(h1)[class*="text-xs"] {
    font-size: calc(0.75rem * var(--gl-text-scale)) !important;
    line-height: 1.5;
}

#gl-page section:not(.gl-hero) [class*="text-sm"],
#gl-page footer [class*="text-sm"],
#gl-page .gl-form-desktop [class*="text-sm"],
#gl-page .gl-hero :not(h1)[class*="text-sm"] {
    font-size: calc(0.875rem * var(--gl-text-scale)) !important;
    line-height: 1.55;
}

#gl-page section:not(.gl-hero) [class*="text-base"],
#gl-page footer [class*="text-base"],
#gl-page .gl-form-desktop [class*="text-base"],
#gl-page .gl-hero :not(h1)[class*="text-base"] {
    font-size: calc(1rem * var(--gl-text-scale)) !important;
    line-height: 1.5;
}

#gl-page section:not(.gl-hero) [class*="text-lg"],
#gl-page footer [class*="text-lg"],
#gl-page .gl-form-desktop [class*="text-lg"],
#gl-page .gl-hero :not(h1)[class*="text-lg"] {
    font-size: calc(1.125rem * var(--gl-text-scale)) !important;
    line-height: 1.4;
}

#gl-page section:not(.gl-hero) [class*="text-xl"],
#gl-page footer [class*="text-xl"],
#gl-page .gl-form-desktop [class*="text-xl"],
#gl-page .gl-hero :not(h1)[class*="text-xl"] {
    font-size: calc(1.25rem * var(--gl-text-scale)) !important;
    line-height: 1.35;
}

#gl-page section:not(.gl-hero) [class*="text-2xl"],
#gl-page footer [class*="text-2xl"],
#gl-page .gl-form-desktop [class*="text-2xl"],
#gl-page .gl-hero :not(h1)[class*="text-2xl"] {
    font-size: calc(1.5rem * var(--gl-text-scale)) !important;
    line-height: 1.3;
}

#gl-page section:not(.gl-hero) [class*="text-3xl"],
#gl-page footer [class*="text-3xl"],
#gl-page .gl-form-desktop [class*="text-3xl"],
#gl-page .gl-hero :not(h1)[class*="text-3xl"] {
    font-size: calc(1.875rem * var(--gl-text-scale)) !important;
    line-height: 1.25;
}

@media (min-width: 640px) {
    #gl-page section:not(.gl-hero) [class*="sm:text-sm"],
    #gl-page footer [class*="sm:text-sm"],
    #gl-page .gl-form-desktop [class*="sm:text-sm"],
    #gl-page .gl-hero :not(h1)[class*="sm:text-sm"] {
        font-size: calc(0.875rem * var(--gl-text-scale)) !important;
    }
    #gl-page section:not(.gl-hero) [class*="sm:text-lg"],
    #gl-page footer [class*="sm:text-lg"],
    #gl-page .gl-form-desktop [class*="sm:text-lg"],
    #gl-page .gl-hero :not(h1)[class*="sm:text-lg"] {
        font-size: calc(1.125rem * var(--gl-text-scale)) !important;
    }
    #gl-page section:not(.gl-hero) [class*="sm:text-xl"],
    #gl-page footer [class*="sm:text-xl"],
    #gl-page .gl-form-desktop [class*="sm:text-xl"],
    #gl-page .gl-hero :not(h1)[class*="sm:text-xl"] {
        font-size: calc(1.25rem * var(--gl-text-scale)) !important;
    }
}

@media (min-width: 768px) {
    #gl-page section:not(.gl-hero) [class*="md:text-base"],
    #gl-page footer [class*="md:text-base"],
    #gl-page .gl-form-desktop [class*="md:text-base"],
    #gl-page .gl-hero :not(h1)[class*="md:text-base"] {
        font-size: calc(1rem * var(--gl-text-scale)) !important;
    }
    #gl-page section:not(.gl-hero) [class*="md:text-lg"],
    #gl-page footer [class*="md:text-lg"],
    #gl-page .gl-form-desktop [class*="md:text-lg"],
    #gl-page .gl-hero :not(h1)[class*="md:text-lg"] {
        font-size: calc(1.125rem * var(--gl-text-scale)) !important;
    }
    #gl-page section:not(.gl-hero) [class*="md:text-xl"],
    #gl-page footer [class*="md:text-xl"],
    #gl-page .gl-form-desktop [class*="md:text-xl"],
    #gl-page .gl-hero :not(h1)[class*="md:text-xl"] {
        font-size: calc(1.25rem * var(--gl-text-scale)) !important;
    }
    #gl-page section:not(.gl-hero) [class*="md:text-2xl"],
    #gl-page footer [class*="md:text-2xl"],
    #gl-page .gl-form-desktop [class*="md:text-2xl"],
    #gl-page .gl-hero :not(h1)[class*="md:text-2xl"] {
        font-size: calc(1.5rem * var(--gl-text-scale)) !important;
    }
    #gl-page section:not(.gl-hero) [class*="md:text-3xl"],
    #gl-page footer [class*="md:text-3xl"],
    #gl-page .gl-form-desktop [class*="md:text-3xl"],
    #gl-page .gl-hero :not(h1)[class*="md:text-3xl"] {
        font-size: calc(1.875rem * var(--gl-text-scale)) !important;
    }
}

#gl-page section:not(.gl-hero) [data-lucide],
#gl-page footer [data-lucide],
#gl-page .gl-form-desktop [data-lucide],
#gl-page .gl-hero [data-lucide] {
    width: calc(1.25rem * var(--gl-text-scale));
    height: calc(1.25rem * var(--gl-text-scale));
}

#gl-page section:not(.gl-hero) [data-lucide].w-6,
#gl-page footer [data-lucide].w-6,
#gl-page .gl-form-desktop [data-lucide].w-6,
#gl-page .gl-hero [data-lucide].w-6 {
    width: calc(1.5rem * var(--gl-text-scale)) !important;
    height: calc(1.5rem * var(--gl-text-scale)) !important;
}

#gl-page section:not(.gl-hero) [data-lucide].w-5,
#gl-page footer [data-lucide].w-5,
#gl-page .gl-form-desktop [data-lucide].w-5,
#gl-page .gl-hero [data-lucide].w-5 {
    width: calc(1.25rem * var(--gl-text-scale)) !important;
    height: calc(1.25rem * var(--gl-text-scale)) !important;
}

#gl-page section:not(.gl-hero) [data-lucide].w-7,
#gl-page footer [data-lucide].w-7,
#gl-page .gl-form-desktop [data-lucide].w-7,
#gl-page .gl-hero [data-lucide].w-7 {
    width: calc(1.75rem * var(--gl-text-scale)) !important;
    height: calc(1.75rem * var(--gl-text-scale)) !important;
}

/* Título hero +40% sobre tamaños Tailwind del h1 */
#gl-page .gl-hero h1 {
    --gl-hero-title-scale: 1.4;
    font-size: calc(1rem * var(--gl-hero-title-scale)) !important;
    line-height: 1.25;
}
@media (min-width: 640px) {
    #gl-page .gl-hero h1 {
        font-size: calc(1.125rem * var(--gl-hero-title-scale)) !important;
    }
}
@media (min-width: 768px) {
    #gl-page .gl-hero h1 {
        font-size: calc(1.25rem * var(--gl-hero-title-scale)) !important;
    }
}
@media (min-width: 1280px) {
    #gl-page .gl-hero h1 {
        font-size: calc(1.5rem * var(--gl-hero-title-scale)) !important;
    }
}

/* ============================================
   OVERLAY DEL HERO SECTION
   ============================================ */
/* 
   Overlay: Rojo FUNDEPOS dominante
   Base: #930A20 (rojo FUNDEPOS) - identidad visual distintiva
*/
.hero-overlay {
    background: 
        /* Gradiente principal rojo FUNDEPOS */
        linear-gradient(135deg, 
            rgba(147, 10, 32, 0.88) 0%, 
            rgba(147, 10, 32, 0.82) 50%,
            rgba(147, 10, 32, 0.88) 100%
        );
}

/* ============================================
   MOTIVO IDEPI (identidad visual)
   ============================================ */
/* Separador visual con círculos concéntricos sutiles */
.sust-separator {
    position: relative;
    height: 80px;
    overflow: hidden;
    background: linear-gradient(to bottom, transparent, rgba(249, 250, 251, 0.5), transparent);
}

.sust-separator::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        /* Círculos concéntricos - motivo IDEPI más visible */
        radial-gradient(circle at 50% 50%, rgba(1, 237, 243, 0.08) 0%, transparent 20%),
        radial-gradient(circle at 50% 50%, transparent 25%, rgba(218, 16, 123, 0.06) 26%, transparent 30%),
        radial-gradient(circle at 50% 50%, transparent 40%, rgba(1, 237, 243, 0.06) 41%, transparent 45%);
}

/* Halo circular para tarjeta "¿Cómo iniciar?" */
.circular-halo {
    position: relative;
}

.circular-halo::before {
    content: '';
    position: absolute;
    inset: -20px;
    z-index: -1;
    border-radius: 1.5rem;
    background: 
        radial-gradient(ellipse 120% 120% at 50% 50%, 
            rgba(1, 237, 243, 0.10) 0%, 
            rgba(218, 16, 123, 0.06) 40%, 
            transparent 70%
        );
    pointer-events: none;
}

/* ============================================
   CHIPS IDEPI - ESTANDARIZADOS
   ============================================ */
/* Chip temático IDEPI cian (marca académica sutil) */
.chip-sust {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    /* Texto en azul primario (legible) */
    color: #4A5E7F;
    /* Fondo estandarizado - más visible */
    background-color: rgba(1, 237, 243, 0.15);
    /* Borde estandarizado - más visible */
    border: 1px solid rgba(1, 237, 243, 0.35);
    border-radius: 9999px;
    transition: all 0.2s ease;
}

/* Punto indicador en cian IDEPI (acento) */
.chip-sust::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #01EDF3;
    border-radius: 50%;
    flex-shrink: 0;
}

.chip-sust:hover {
    background-color: rgba(1, 237, 243, 0.22);
    border-color: rgba(1, 237, 243, 0.45);
}

/* Highlight cian para texto (sutil pero presente) */
.highlight-sust {
    background: linear-gradient(120deg, rgba(1, 237, 243, 0.18) 0%, rgba(1, 237, 243, 0.12) 100%);
    padding: 0.1em 0.35em;
    border-radius: 0.25em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ============================================
   OPTIMIZACIONES BÁSICAS
   ============================================ */

/* Prevenir ajuste automático de tamaño de texto en iOS Safari
   Evita que Safari ajuste el tamaño de fuente automáticamente */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent; /* Elimina el highlight azul al tocar en móviles */
}

/* Prevenir scroll horizontal no deseado
   Oculta cualquier contenido que se desborde horizontalmente */
body {
    overflow-x: hidden;
}

/* Asegurar que el body tenga el ancho correcto
   Evita problemas de layout en diferentes navegadores */
html, body {
    width: 100%;
    max-width: 100%;
}

/* Forzar box-sizing en todos los elementos
   Hace que padding y border se incluyan en el ancho total del elemento
   Facilita el cálculo de dimensiones */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Asegurar que las imágenes no se desborden
   Las imágenes se ajustan al contenedor manteniendo su proporción */
img {
    max-width: 100%;
    height: auto;
}

/* Asegurar que los grids respeten el ancho
   Evita que los elementos dentro de un grid se desborden */
.grid > * {
    min-width: 0;
}

/* Textos que se ajusten automáticamente
   Permite que palabras largas se dividan si no caben en el contenedor */
h1, h2, h3, h4, h5, h6, p, span {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================
   ESTILOS MEJORADOS PARA FORMULARIOS
   ============================================ */

/* Efecto de focus mejorado en campos de formulario
   Eleva ligeramente el campo cuando tiene foco (feedback visual) */
.fp-lead-form input:focus,
.fp-lead-form select:focus {
    transform: translateY(-1px);
}

/* Animación suave en campos del formulario
   Transiciones suaves para todos los cambios de estado */
.fp-lead-form input,
.fp-lead-form select {
    transition: all 0.2s ease;
}

/* Estilo para el select con flecha personalizada
   Reemplaza la flecha nativa del navegador con un SVG personalizado
   Color de la flecha: primary (#0F1E3D) */
.fp-lead-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230F1E3D' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem; /* Espacio extra para la flecha personalizada */
}

/* Mejora visual para campos requeridos vacíos
   Muestra un borde rojo cuando un campo requerido está vacío y tiene foco */
.fp-lead-form input:required:invalid:not(:placeholder-shown),
.fp-lead-form select:required:invalid {
    border-color: #ef4444; /* Rojo de Tailwind (red-500) */
}

/* Efecto activo en botón de envío
   Restaura la posición original al hacer click (feedback táctil) */
.fp-lead-form button[type="submit"]:active {
    transform: translateY(0);
}

/* ============================================
   ANIMACIONES
   ============================================ */

/* Animación de rotación lenta para el ícono de reloj en el badge de urgencia
   Gira 360 grados de forma continua durante 3 segundos */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite; /* 3 segundos, movimiento constante, infinito */
}

/* Ocultar scrollbar pero mantener funcionalidad
   Permite hacer scroll sin mostrar la barra de desplazamiento
   Útil para el carrusel horizontal */
.scrollbar-hide {
    -ms-overflow-style: none; /* Internet Explorer y Edge */
    scrollbar-width: none; /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari y Opera */
}

/* ============================================
   MEJORAS DE ACCESIBILIDAD
   ============================================ */

/* Mejor contraste para campos de formulario
   Color de texto oscuro para mejor legibilidad (gray-800 de Tailwind) */
input[type="text"],
input[type="email"],
input[type="tel"],
select {
    color: #1f2937;
}

/* Estilo para campos deshabilitados
   Fondo gris claro y cursor "no permitido" para indicar que no se puede editar */
input:read-only {
    background-color: #f9fafb; /* gray-50 de Tailwind */
    cursor: not-allowed;
}

/* ============================================
   PRESENCIA ADICIONAL IDEPI
   ============================================ */

/* Glow sutil en íconos cian (text-sust) */
.text-sust {
    filter: drop-shadow(0 0 2px rgba(1, 237, 243, 0.3));
}

/* Glow sutil en íconos magenta (text-sust-dark) */
.text-sust-dark {
    filter: drop-shadow(0 0 2px rgba(218, 16, 123, 0.3));
}

/* Border con acento cian para elementos hover */
.border-sust\/20:hover,
.border-sust\/30:hover {
    border-color: rgba(1, 237, 243, 0.4) !important;
    box-shadow: 0 0 8px rgba(1, 237, 243, 0.15);
}

/* Border con acento magenta para elementos hover */
.border-sust-dark\/20:hover,
.border-sust-dark\/30:hover {
    border-color: rgba(218, 16, 123, 0.4) !important;
    box-shadow: 0 0 8px rgba(218, 16, 123, 0.15);
}

/* Insignia microcredencial — marco premium + protagonismo */
.microcred-wrap {
    position: relative;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.microcred-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        0 0 0 1.5px rgba(212, 175, 55, 0.55),
        0 0 18px 5px rgba(212, 175, 55, 0.25);
    animation: microcred-pulse 2.8s ease-in-out infinite;
    pointer-events: none;
}

.microcred-wrap::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: rgba(212, 175, 55, 0.80);
    border-right-color: rgba(212, 175, 55, 0.28);
    animation: microcred-orbit 5s linear infinite;
    pointer-events: none;
}

@keyframes microcred-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1.5px rgba(212, 175, 55, 0.55),
            0 0 18px 5px rgba(212, 175, 55, 0.25);
    }
    50% {
        box-shadow:
            0 0 0 2.5px rgba(212, 175, 55, 0.80),
            0 0 32px 10px rgba(212, 175, 55, 0.38);
    }
}

@keyframes microcred-orbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.microcred-badge {
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 22%, #ffffff 0%, #faf6ee 42%, #e8e0d0 78%, #d4cbb8 100%);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.32),
        0 0 28px rgba(212, 175, 55, 0.22),
        0 0 1px rgba(212, 175, 55, 0.85),
        inset 0 2px 5px rgba(255, 255, 255, 0.95),
        inset 0 -10px 18px rgba(120, 90, 30, 0.14);
}

.microcred-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from 210deg,
        #b8942a 0deg,
        #f0e6b8 55deg,
        #d4af37 120deg,
        #fff8e7 180deg,
        #c9a227 240deg,
        #f5ecd0 300deg,
        #b8942a 360deg
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.microcred-badge::after {
    content: "";
    position: absolute;
    top: 6%;
    left: 14%;
    right: 14%;
    height: 38%;
    border-radius: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.15) 55%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 3;
}

.microcred-badge__art {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 0.32rem;
    box-sizing: border-box;
    filter: drop-shadow(0 2px 4px rgba(15, 36, 65, 0.18));
}