/* ============================================================
 * KIBI STYLESHEET - ORGANIZACION PRINCIPAL
 * ============================================================
 * TABLA DE CONTENIDOS:
 * 1. VARIABLES Y CONFIGURACION GLOBAL (líneas 15-40)
 * 2. FUENTES PERSONALIZADAS (líneas 42-72)
 * 3. MODAL DE CONTACTO E INTL-TEL-INPUT (líneas 74-264)
 * 4. ANIMACIONES GLOBALES (líneas 266-575)
 * 5. COMPONENTES COMUNES (líneas 577-850)
 * 6. EFECTOS DE PARTICULAS Y DECORATIVOS (líneas 852-1055)
 * 7. SECCIONES ESPECIFICAS - SUBJECTS Y FEATURES (líneas 1057-1334)
 * ============================================================
 * NOTAS IMPORTANTES:
 * - Todas las animaciones están centralizadas en la sección 4
 * - Los componentes reutilizables están en la sección 5
 * - Efectos decorativos separados en la sección 6
 * - Variables CSS definidas en :root para consistencia global
 * - Responsive design con media queries integradas
 * ============================================================ */

/* ============================================================
 * 1. VARIABLES Y CONFIGURACION GLOBAL
 * ============================================================ */

:root {
    --kibi-primary: #22c55e;
    /* Verde educativo */
    --kibi-secondary: #f59e0b;
    /* Amarillo educativo */
    --kibi-accent: #f97316;
    /* Naranja educativo */
    --kibi-success: #10b981;
    /* Verde éxito */
    --kibi-warning: #eab308;
    /* Amarillo advertencia */
    --kibi-danger: #ef4444;
    /* Rojo */
    --kibi-info: #3b82f6;
    /* Azul información */
    --kibi-purple: #8b5cf6;
    /* Morado educativo */
    --kibi-pink: #ec4899;
    /* Rosa educativo */
    --kibi-dark: #1e3a8a;
    /* Azul oscuro educativo */
    --kibi-light: #f0f9ff;
    /* Azul muy claro */
    --kibi-gradient-start: #22c55e;
    /* Verde */
    --kibi-gradient-end: #f59e0b;
    /* Amarillo */
    --kibi-text-primary: #1f2937;
    --kibi-text-secondary: #374151;
    --kibi-bg-primary: #1e3a8a;
    /* Azul educativo */
    --kibi-bg-secondary: #2563eb;
    /* Azul medio */
    --kibi-bg-tertiary: #3b82f6;
    /* Azul claro */
}

/* ============================================================
 * 2. FUENTES PERSONALIZADAS
 * ============================================================ */

@font-face {
    font-family: 'Piala';
    src: url('/kibbi-fonts/Piala/Web-PS/Piala-Regular.woff2') format('woff2'),
        url('/kibbi-fonts/Piala/Web-TT/Piala-Regular.woff') format('woff'),
        url('/kibbi-fonts/Piala/OpenType-PS/Piala-Regular.otf') format('opentype'),
        url('/kibbi-fonts/Piala/OpenType-TT/Piala-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Piala';
    src: url('/kibbi-fonts/Piala/Web-PS/Piala-Italic.woff2') format('woff2'),
        url('/kibbi-fonts/Piala/Web-TT/Piala-Italic.woff') format('woff'),
        url('/kibbi-fonts/Piala/OpenType-PS/Piala-Italic.otf') format('opentype'),
        url('/kibbi-fonts/Piala/OpenType-TT/Piala-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Piala';
    src: url('/kibbi-fonts/Piala/Web-PS/Piala-Italic.woff2') format('woff2'),
        url('/kibbi-fonts/Piala/Web-TT/Piala-Italic.woff') format('woff'),
        url('/kibbi-fonts/Piala/OpenType-PS/Piala-Italic.otf') format('opentype'),
        url('/kibbi-fonts/Piala/OpenType-TT/Piala-Italic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Medium';
    src: url('/kibbi-fonts/Gotham Medium/Gotham Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
 * 3. MODAL DE CONTACTO Y INTL-TEL-INPUT
 * ============================================================ */

/* Ajustes base para intl-tel-input */
.iti {
    width: 100%;
    position: relative;
}

.iti__flag {
    box-shadow: none;
}

.iti--allow-dropdown input {
    padding-left: 58px;
}

.tel-input-custom {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.space-footer-span{ 
    letter-spacing: 0.02em;
}

.space-footer-letter {
    letter-spacing: 0.05em;
}

.font-piala {
    font-family: 'Piala', sans-serif;
}

.gotham-medium {
    font-family: 'Gotham Medium', sans-serif;
}

/* Z-index y posicionamiento del modal */
#contact-modal .iti__country-list {
    z-index: 10 !important;
    max-height: 200px;
    overflow-y: auto;
    position: absolute !important;
}

#contact-modal .sticky {
    z-index: 100 !important;
    background-color: white !important;
}

#contact-modal .bg-white {
    position: relative;
    z-index: 1;
}

#contact-modal .iti {
    position: relative;
    z-index: 1;
}

#contact-modal .iti--show-flags {
    z-index: 1;
}

/* Estilos de inputs y campos del modal */
#contact-modal input[type="text"],
#contact-modal input[type="email"],
#contact-modal input[type="tel"],
#contact-modal input[type="url"],
#contact-modal textarea,
#contact-modal select {
    border-color: #02AFC9 !important;
    border-width: 2px !important;
    color: #000000 !important;
}

#contact-modal input[type="text"]:focus,
#contact-modal input[type="email"]:focus,
#contact-modal input[type="tel"]:focus,
#contact-modal input[type="url"]:focus,
#contact-modal textarea:focus,
#contact-modal select:focus {
    border-color: #0087AD !important;
    box-shadow: 0 0 0 3px rgba(2, 175, 201, 0.12) !important;
}

#contact-modal input::placeholder,
#contact-modal textarea::placeholder {
    color: rgba(0, 0, 0, 0.45) !important;
}

#contact-modal input[type="checkbox"] {
    border-color: #02AFC9 !important;
    accent-color: #02AFC9 !important;
}

/* Fuentes del modal */
#contact-modal {
    font-family: 'Gotham', sans-serif !important;
}

#contact-modal h2,
#contact-modal h3 {
    font-family: 'Gotham', sans-serif !important;
    font-weight: bold !important;
}

#contact-modal label {
    font-family: 'Gotham', sans-serif !important;
    font-weight: bold !important;
}

#contact-modal input,
#contact-modal textarea,
#contact-modal select,
#contact-modal option {
    font-family: 'Gotham', sans-serif !important;
}

#contact-modal input::placeholder,
#contact-modal textarea::placeholder {
    font-family: 'Gotham', sans-serif !important;
}

#contact-modal button {
    font-family: 'Gotham', sans-serif !important;
    font-weight: bold !important;
}

#contact-modal .bg-green-50,
#contact-modal .bg-red-50,
#contact-modal .alert-message {
    font-family: 'Gotham', sans-serif !important;
}

#contact-modal .bg-green-50 h3,
#contact-modal .bg-red-50 h3,
#contact-modal .alert-message h3 {
    font-weight: bold !important;
}

#contact-modal p {
    font-family: 'Gotham', sans-serif !important;
}

#contact-form,
#contact-form * {
    font-family: 'Gotham', sans-serif !important;
}

#contact-modal .font-bold[style*="Inter"] {
    font-family: 'Inter', sans-serif !important;
}

/* Responsividad del modal */
@media (max-width: 639px) {
    #contact-modal {
        padding: 0.5rem;
    }

    #contact-modal .bg-white {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    #contact-modal .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
    }

    #contact-modal input[type="text"],
    #contact-modal input[type="email"],
    #contact-modal input[type="tel"],
    #contact-modal input[type="url"] {
        font-size: 16px;
        padding: 0.75rem;
    }

    #contact-modal input[type="checkbox"] {
        transform: scale(1.2);
        margin-top: 0.125rem;
    }

    #contact-modal button {
        min-height: 44px;
        touch-action: manipulation;
    }

    #contact-modal label {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

@media (max-width: 375px) {
    #contact-modal .bg-white {
        margin: 0.25rem;
        max-height: calc(100vh - 0.5rem);
    }

    #contact-modal .px-4 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media (max-width: 639px) and (orientation: landscape) {
    #contact-modal .max-h-\[95vh\] {
        max-height: 90vh;
    }

    #contact-modal .space-y-4 {
        gap: 0.75rem;
    }
}

/* Estilos específicos para página de contacto independiente */
.contact-page * {
    font-family: 'Piala', sans-serif !important;
}

.contact-page input[type="text"],
.contact-page input[type="email"],
.contact-page input[type="tel"],
.contact-page input[type="url"],
.contact-page textarea,
.contact-page select {
    border-color: #02AFC9 !important;
    border-width: 2px !important;
    color: #000000 !important;
}

.contact-page input[type="text"]:focus,
.contact-page input[type="email"]:focus,
.contact-page input[type="tel"]:focus,
.contact-page input[type="url"]:focus,
.contact-page textarea:focus,
.contact-page select:focus {
    border-color: #0087AD !important;
    box-shadow: 0 0 0 3px rgba(2, 175, 201, 0.1) !important;
}

.contact-page input::placeholder,
.contact-page textarea::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

.contact-page select,
.contact-page select option {
    color: #000000 !important;
}

.contact-page label {
    color: #000000 !important;
}

.contact-page .bg-gray-50 label span.text-gray-700 {
    color: #000000 !important;
}

.contact-page button[type="submit"],
.contact-page button[type="submit"] * {
    color: #ffffff !important;
}

.contact-page input[type="checkbox"] {
    border-color: #02AFC9 !important;
    accent-color: #02AFC9 !important;
}

@media (max-width: 639px) {

    .contact-page input[type="text"],
    .contact-page input[type="email"],
    .contact-page input[type="tel"],
    .contact-page input[type="url"] {
        font-size: 16px;
    }

    .contact-page button {
        min-height: 44px;
        touch-action: manipulation;
    }
}

/* ============================================================
 * 4. ANIMACIONES GLOBALES
 * ============================================================ */

/* Animaciones de flotación y brillo */
@keyframes kibiFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-18px) rotate(3deg);
    }
}

@keyframes kibiGlow {

    0%,
    100% {
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
    }

    50% {
        box-shadow: 0 50px 120px rgba(0, 0, 0, 0.32);
    }
}

@keyframes tileFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-14px) rotate(1deg);
    }
}

@keyframes tileGlow {

    0%,
    100% {
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.20);
    }

    50% {
        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.30);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 1;
    }
}

@keyframes floatHover {

    0%,
    100% {
        transform: translateX(-50%) translateY(0px) scale(1.1);
    }

    50% {
        transform: translateX(-50%) translateY(-10px) scale(1.1);
    }
}

@keyframes floatHero {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes floatReverse {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

/* Animaciones de pulso y brillo */
@keyframes clickablePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

@keyframes unified-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Animaciones de rebote y onda */
@keyframes gentleBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes rippleWave-educational {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(1, 139, 176, 0.8);
    }

    50% {
        transform: scale(1.005);
        box-shadow: 0 0 0 5px rgba(1, 139, 176, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(1, 139, 176, 0);
    }
}

@keyframes ping-educational {

    75%,
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Animaciones de desplazamiento */
@keyframes gradient-x {

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

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

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Animaciones de contacto */
@keyframes contactReveal {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
    }

    60% {
        opacity: 1;
        transform: translateY(-6px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fieldShimmer {
    0% {
        box-shadow: 0 0 0 0 rgba(1, 139, 176, 0.0);
    }

    50% {
        box-shadow: 0 10px 24px rgba(1, 139, 176, 0.18);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(1, 139, 176, 0.0);
    }
}

@keyframes contactFloat1 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
    }

    50% {
        transform: translateY(-20px) translateX(10px);
    }
}

@keyframes contactFloat2 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
    }

    50% {
        transform: translateY(-18px) translateX(-10px);
    }
}

/* Animaciones decorativas educativas */
@keyframes float1-educational {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-25px) translateX(15px) rotate(10deg);
    }

    66% {
        transform: translateY(-10px) translateX(-12px) rotate(-8deg);
    }
}

@keyframes float2-educational {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-30px) translateX(-18px) rotate(-12deg);
    }
}

@keyframes float3-educational {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) translateX(20px) rotate(8deg);
    }

    75% {
        transform: translateY(-25px) translateX(-10px) rotate(-10deg);
    }
}

@keyframes float4-educational {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-22px) translateX(-14px) rotate(-9deg);
    }

    66% {
        transform: translateY(-12px) translateX(16px) rotate(11deg);
    }
}

@keyframes decorativeGlow-educational {

    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) brightness(1);
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.7)) brightness(1.2);
    }
}

@keyframes decorativePulse-educational {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.85;
    }
}

@keyframes decorativeRotate-educational {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Animaciones decorativas contacto */
@keyframes float1-contact {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-25px) translateX(15px) rotate(10deg);
    }

    66% {
        transform: translateY(-10px) translateX(-12px) rotate(-8deg);
    }
}

@keyframes float2-contact {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-30px) translateX(-18px) rotate(-12deg);
    }
}

@keyframes float3-contact {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) translateX(20px) rotate(8deg);
    }

    75% {
        transform: translateY(-25px) translateX(-10px) rotate(-10deg);
    }
}

@keyframes float4-contact {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-22px) translateX(-14px) rotate(-9deg);
    }

    66% {
        transform: translateY(-12px) translateX(16px) rotate(11deg);
    }
}

@keyframes decorativeGlow-contact {

    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) brightness(1);
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.7)) brightness(1.2);
    }
}

@keyframes decorativePulse-contact {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.75;
    }
}

@keyframes decorativeRotate-contact {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes particle-float {
    0% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}


/* ============================================================
 * 5. COMPONENTES COMUNES Y UTILIDADES
 * ============================================================ */

/* Hero Cards */
.kibi-hero-card {
    animation: kibiFloat 5s ease-in-out infinite, kibiGlow 5s ease-in-out infinite;
    will-change: transform, box-shadow;
    transition: transform .4s ease;
}

.kibi-hero-card:hover {
    transform: translateY(-10px) scale(1.04);
}

.feature-hero-card {
    animation: tileFloat 5.5s ease-in-out infinite, tileGlow 5.5s ease-in-out infinite;
    will-change: transform, box-shadow;
    transition: all .35s ease;
    position: relative;
    cursor: pointer;
}

.feature-hero-card:hover {
    transform: translateY(-12px) scale(1.08);
    box-shadow: 0 25px 60px rgba(1, 139, 176, 0.5), 0 25px 60px rgba(250, 204, 21, 0.25);
}

/* Tarjeta educativa con múltiples animaciones */
.feature-hero-card-educational {
    animation: tileFloat 5.5s ease-in-out infinite,
        tileGlow 5.5s ease-in-out infinite,
        rippleWave-educational 3s ease-in-out infinite,
        gentleBounce 2s ease-in-out infinite;
}

.feature-hero-card-educational::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.3) 25%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.3) 75%,
            rgba(255, 255, 255, 0.1) 100%);
    background-size: 200% 200%;
    border-radius: 1rem;
    opacity: 0;
    z-index: -1;
    animation: shimmer 3s linear infinite;
    transition: opacity 0.3s ease;
}

.feature-hero-card-educational:hover::before {
    opacity: 1;
}

.feature-hero-card-educational a:hover img {
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.feature-hero-card-educational a:hover h5 {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
        0 0 30px rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* Ripple y ping effects */
.ripple-ring-educational {
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    background: rgba(1, 139, 176, 0.4);
    animation: ping-educational 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    z-index: 0;
}

.ripple-ring-educational:nth-child(2) {
    animation-delay: 0.5s;
    background: rgba(1, 139, 176, 0.3);
}

/* Utilidades de efectos */
.animate-gradient-x {
    background-size: 200% 200%;
    animation: gradient-x 3s ease infinite;
}

.animate-shimmer {
    animation: unified-shimmer 2s infinite;
}

/* Botones de neón */
.neon-button-primary,
.neon-button-secondary {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.neon-button-primary:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 20px 40px rgba(6, 182, 212, 0.4);
}

.neon-button-secondary:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.4);
}

/* Tarjetas de servicio */
.service-card-modern {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
    border: 1px solid rgba(148, 163, 184, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-modern:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 25px 50px rgba(6, 182, 212, 0.2);
}

.service-card-cyan {
    border-left: 4px solid var(--kibi-primary);
}

.service-card-blue {
    border-left: 4px solid var(--kibi-secondary);
}

.service-card-indigo {
    border-left: 4px solid var(--kibi-accent);
}

.service-card-purple {
    border-left: 4px solid #8b5cf6;
}

.service-card-red {
    border-left: 4px solid var(--kibi-danger);
}

.service-card-orange {
    border-left: 4px solid var(--kibi-warning);
}

/* Secciones unificadas */
.unified-section-primary {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    position: relative;
}

.unified-section-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(6, 182, 212, 0.05), transparent);
    pointer-events: none;
}

.unified-section-secondary {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9));
    position: relative;
}

.unified-section-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.05), transparent);
    pointer-events: none;
}

.unified-glow-effect {
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

/* Grid de servicios */
.services-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Carrusel de casos de éxito */
.success-story-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(148, 163, 184, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.success-story-card:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 20px 40px rgba(6, 182, 212, 0.15);
}

/* Controles del carrusel */
.carousel-controls button {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.carousel-controls button:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: var(--kibi-primary);
    transform: scale(1.1);
}

.carousel-indicators button {
    transition: all 0.3s ease;
}

.carousel-indicators button:hover {
    transform: scale(1.25);
}

/* Formularios de contacto */
.contact-card {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    will-change: transform, opacity, box-shadow;
    transition: transform .4s ease, box-shadow .4s ease, opacity .4s ease;
}

.contact-card.is-visible {
    animation: contactReveal .9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.contact-card :is(input, select, textarea) {
    transition: box-shadow .35s ease, transform .25s ease;
}

.contact-card :is(input:focus, select:focus, textarea:focus) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(1, 139, 176, 0.18);
    animation: fieldShimmer 1.6s ease both;
}

.contact-submit:hover {
    transform: translateY(-2px) scale(1.02);
}

/* ============================================================
 * 6. EFECTOS DE PARTICULAS Y DECORATIVOS
 * ============================================================ */

/* Contenedores de partículas */
.unified-particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.unified-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: linear-gradient(45deg, var(--kibi-primary), var(--kibi-secondary));
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.unified-particle:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.unified-particle:nth-child(2) {
    top: 40%;
    right: 30%;
    animation-delay: 2s;
}

.unified-particle:nth-child(3) {
    bottom: 30%;
    left: 40%;
    animation-delay: 4s;
}

.unified-particle:nth-child(4) {
    top: 60%;
    right: 20%;
    animation-delay: 1s;
}

.unified-particle:nth-child(5) {
    bottom: 20%;
    right: 50%;
    animation-delay: 3s;
}

.unified-particle:nth-child(6) {
    top: 30%;
    left: 60%;
    animation-delay: 5s;
}

.particles-container-unified {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.particle-unified {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--kibi-primary);
    border-radius: 50%;
    animation: particle-float 8s linear infinite;
}

.particle-unified-1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.particle-unified-2 {
    top: 20%;
    right: 20%;
    animation-delay: 2s;
}

.particle-unified-3 {
    bottom: 30%;
    left: 30%;
    animation-delay: 4s;
}

.particle-unified-4 {
    top: 60%;
    right: 40%;
    animation-delay: 6s;
}

.particle-unified-5 {
    bottom: 20%;
    right: 60%;
    animation-delay: 1s;
}

.particle-unified-6 {
    top: 40%;
    left: 70%;
    animation-delay: 3s;
}

/* Imágenes decorativas educativas */
.floating-decorative-image-educational {
    will-change: transform, filter, opacity;
    transition: transform 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.floating-decorative-image-educational img {
    animation: decorativeRotate-educational 20s linear infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.floating-decorative-image-educational:hover {
    transform: scale(1.15) !important;
    animation: decorativeGlow-educational 1s ease-in-out infinite, decorativePulse-educational 1s ease-in-out infinite !important;
}

.floating-decorative-image-educational:hover img {
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9));
}

.floating-decorative-image-educational:nth-of-type(1) img {
    animation-duration: 25s;
    animation-delay: 0s;
}

.floating-decorative-image-educational:nth-of-type(2) img {
    animation-duration: 30s;
    animation-delay: -5s;
}

.floating-decorative-image-educational:nth-of-type(3) img {
    animation-duration: 35s;
    animation-delay: -10s;
}

/* Imágenes decorativas contacto */
.floating-decorative-image-contact {
    will-change: transform, filter, opacity;
    transition: transform 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.floating-decorative-image-contact img {
    animation: decorativeRotate-contact 20s linear infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.floating-decorative-image-contact:hover {
    transform: scale(1.15) !important;
    animation: decorativeGlow-contact 1s ease-in-out infinite, decorativePulse-contact 1s ease-in-out infinite !important;
}

.floating-decorative-image-contact:hover img {
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9));
}

.floating-decorative-image-contact:nth-of-type(1) img {
    animation-duration: 25s;
    animation-delay: 0s;
}

.floating-decorative-image-contact:nth-of-type(2) img {
    animation-duration: 30s;
    animation-delay: -5s;
}

.floating-decorative-image-contact:nth-of-type(3) img {
    animation-duration: 35s;
    animation-delay: -10s;
}

.floating-decorative-image-contact:nth-of-type(4) img {
    animation-duration: 28s;
    animation-delay: -7s;
}

/* Elementos flotantes del contacto */
.contact-floating-mochila img {
    animation: contactFloat1 6s ease-in-out infinite;
}

.contact-floating-sombrero img {
    animation: contactFloat2 7s ease-in-out infinite;
}

@media (max-width: 1023px) {
    .contact-stars-container {
        display: none !important;
    }
}

/* ============================================================
 * SUBJECT CARDS - Tarjetas de materias educativas
 * ============================================================ */

.subject-card {
    transition: all 0.3s ease;
    overflow: visible;
    position: relative;
    height: 140px;
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 15px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
}

@media (max-width: 640px) {
    .subject-card {
        width: 180px;
        max-width: 180px;
        height: 120px;
    }
}

.subject-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(255, 255, 255, 0.3),
        0 0 60px rgba(255, 255, 255, 0.2),
        0 0 80px rgba(255, 255, 255, 0.1);
    filter: brightness(1.15);
}

/* Efectos de iluminación específicos por color de fondo */
.subject-card.bg-indigo-600:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(99, 102, 241, 0.6),
        0 0 60px rgba(99, 102, 241, 0.4),
        0 0 80px rgba(99, 102, 241, 0.2);
}

.subject-card.bg-green-600:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(22, 163, 74, 0.6),
        0 0 60px rgba(22, 163, 74, 0.4),
        0 0 80px rgba(22, 163, 74, 0.2);
}

.subject-card.bg-red-600:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(220, 38, 38, 0.6),
        0 0 60px rgba(220, 38, 38, 0.4),
        0 0 80px rgba(220, 38, 38, 0.2);
}

.subject-card.bg-cyan-400:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(34, 211, 238, 0.6),
        0 0 60px rgba(34, 211, 238, 0.4),
        0 0 80px rgba(34, 211, 238, 0.2);
}

.subject-card.bg-yellow-400:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(250, 204, 21, 0.6),
        0 0 60px rgba(250, 204, 21, 0.4),
        0 0 80px rgba(250, 204, 21, 0.2);
}

/* Efecto de iluminación para colores personalizados usando selectores de atributo */
.subject-card[class*="bg-[#5B64E2]"]:hover,
.subject-card[style*="background-color: rgb(91, 100, 226)"]:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(91, 100, 226, 0.6),
        0 0 60px rgba(91, 100, 226, 0.4),
        0 0 80px rgba(91, 100, 226, 0.2);
}

.subject-card[class*="bg-[#FBBF24]"]:hover,
.subject-card[style*="background-color: rgb(251, 191, 36)"]:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(251, 191, 36, 0.6),
        0 0 60px rgba(251, 191, 36, 0.4),
        0 0 80px rgba(251, 191, 36, 0.2);
}

.subject-icon {
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 180px;
    height: 180px;
    animation: float 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.subject-icon img {
    width: 180px !important;
    height: 180px !important;
    object-fit: contain;
    transition: filter 0.3s ease;
}

@media (max-width: 640px) {
    .subject-icon {
        width: 100px;
        height: 100px;
        top: -50px;
    }

    .subject-icon img {
        width: 100px !important;
        height: 100px !important;
    }

    .subject-card h3 {
        font-size: 12px;
    }
}

.subject-card:hover .subject-icon img {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.4)) brightness(1.2);
}

@keyframes float {

    0%,
    100% {
        transform: translateX(-50%) translateY(0px);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

.subject-card:hover .subject-icon {
    animation: floatHover 3s ease-in-out infinite;
}

@keyframes floatHover {

    0%,
    100% {
        transform: translateX(-50%) translateY(0px) scale(1.1);
    }

    50% {
        transform: translateX(-50%) translateY(-10px) scale(1.1);
    }
}

/* Animación de flotamiento para iconos del hero */
.hero-icon-float img {
    animation: floatHero 4s ease-in-out infinite;
}

@keyframes floatHero {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }
}

.subject-card h3 {
    position: relative;
    z-index: 20;
    margin-top: auto;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
}

/* Estilos para el reproductor de video */
#kibi-video {
    background-color: #000;
    object-fit: contain;
}

/* ======================== FEATURES STYLES ======================== */

@font-face {
    font-family: 'Gotham Medium';
    src: url('/kibbi-fonts/Gotham Medium/Gotham Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@keyframes floatReverse {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

.float-animation {
    animation: float 4s ease-in-out infinite;
}

.float-reverse {
    animation: floatReverse 5s ease-in-out infinite;
}

/* Animación de desplazamiento infinito para logos */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.logo-scroll-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .logo-scroll-container {
        max-width: 1200px;
    }
}

.logo-scroll-wrapper {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: scroll 25s linear infinite;
}

.logo-scroll-wrapper:hover {
    animation-play-state: paused;
}

.logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: fit-content;
}

.logo-icon-wrapper {
    width: 5rem;
    height: 5rem;
    min-width: 5rem;
    min-height: 5rem;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo-item img {
    max-width: 3.5rem;
    max-height: 3.5rem;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .logo-icon-wrapper {
        width: 7rem;
        height: 7rem;
        min-width: 7rem;
        min-height: 7rem;
        padding: 0.75rem;
    }

    .logo-item img {
        max-width: 5rem;
        max-height: 5rem;
    }
}

/* ============================================================
 * MERGE: contenido proveniente de `public/css/home.css`
 * Nota: se han eliminado de esta inserción los bloques duplicados
 *       de `@font-face` y los `@keyframes` que ya existían en
 *       `style.css` para evitar definiciones repetidas.
 * ============================================================ */

/* Preferencia de fuente global (Piala ya definida en otro lugar)
   Consolidado: fuente global y separación superior por header fijo */
body {
    font-family: 'Piala', 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Piala', 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Títulos principales con fuente outline para mayor impacto */
.hero-title,
.section-title {
    font-family: 'Piala Outline', 'Piala', sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* Textos especiales con cursiva */
.accent-text,
.highlight-text {
    font-family: 'Piala', sans-serif;
    font-style: italic;
    letter-spacing: 0.05em;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Animaciones suaves */
* {
    transition: all 0.3s ease;
}

/* Efectos hover mejorados */
.hover-lift:hover {
    transform: translateY(-2px);
}

/* Gradientes modernos */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Sombras modernas */
.shadow-modern {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Botones modernos */
.btn-modern {
    position: relative;
    overflow: hidden;
}

.btn-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-modern:hover::before {
    left: 100%;
}

/* Animaciones de scroll */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Delay para animaciones escalonadas */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

/* Animación para lluvia de emojis */
@keyframes fall {
    to {
        transform: translateY(calc(100vh + 100px)) rotate(360deg);
        opacity: 0;
    }
}

/* ============================================
   ESTILOS DE COMPONENTES DE LA PÁGINA DE INICIO
   (hero, video, VR, administrativas, pricing)
   ============================================ */

/* ===== Estilos del Hero Section ===== */
@keyframes heroFloat1 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
    }

    50% {
        transform: translateY(-25px) translateX(12px);
    }
}

@keyframes heroFloat2 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
    }

    50% {
        transform: translateY(-22px) translateX(-12px);
    }
}

.hero-floating-pincel img {
    animation: heroFloat1 6s ease-in-out infinite;
}

.hero-floating-sombrero img {
    animation: heroFloat2 7s ease-in-out infinite;
}

/* Estilos para móvil - tamaño uniforme de los iconos */
@media (max-width: 767px) {

    .hero-floating-pincel,
    .hero-floating-sombrero {
        width: 180px !important;
        height: 180px !important;
        opacity: 0.9 !important;
        visibility: visible !important;
        display: block !important;
    }

    .hero-floating-pincel {
        top: 15% !important;
        left: 10px !important;
        transform: rotate(8deg) !important;
    }

    .hero-floating-sombrero {
        top: 60% !important;
        bottom: auto !important;
        right: 10px !important;
        transform: rotate(-8deg) !important;
    }

    /* Desactivar animación de scroll en móvil */
    .hero-floating-pincel,
    .hero-floating-sombrero {
        transform-origin: center center;
    }

    /* Asegurar que el contenedor padre permita ver los iconos completos */
    .hero-section {
        padding-bottom: 2rem;
    }

    /* Asegurar que las imágenes sean visibles */
    .hero-floating-pincel img,
    .hero-floating-sombrero img {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
}

/* Estilos para tablet - reducir espacio */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-section {
        min-height: 50vh !important;
    }

    .hero-section .max-w-7xl {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .hero-section .space-y-6 {
        gap: 0.75rem !important;
    }
}

/* ===== Estilos de KIBI VR Experience Section ===== */
.video-container {
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.video-container::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 2rem;
    padding: 2px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.1) 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.1) 75%,
            rgba(255, 255, 255, 0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.video-container:hover::before {
    opacity: 1;
}

.video-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: -1;
}

.video-container:hover::after {
    opacity: 1;
}

.video-wrapper {
    position: relative;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.98) 50%,
            rgba(0, 0, 0, 0.95) 100%);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 0 80px rgba(255, 255, 255, 0.05);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.video-container:hover .video-wrapper {
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(255, 255, 255, 0.2) inset,
        0 0 120px rgba(255, 255, 255, 0.1);
    transform: translateY(-8px) scale(1.02);
}

.video-decorative-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
    transition: all 0.5s ease;
}

.video-decorative-corner.top-left {
    top: -15px;
    left: -15px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 1rem;
}

.video-decorative-corner.top-right {
    top: -15px;
    right: -15px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 1rem;
}

.video-decorative-corner.bottom-left {
    bottom: -15px;
    left: -15px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 1rem;
}

.video-decorative-corner.bottom-right {
    bottom: -15px;
    right: -15px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 1rem;
}

.video-container:hover .video-decorative-corner {
    width: 80px;
    height: 80px;
    border-color: rgba(255, 255, 255, 0.6);
}

.video-overlay-label {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 9999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 10;
    animation: videoPulse 2s ease-in-out infinite;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-overlay-label.hidden {
    opacity: 0;
    visibility: hidden;
}

@keyframes videoPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    }
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.video-wrapper:hover .video-play-icon {
    opacity: 0.8;
}

video {
    transition: all 0.5s ease;
}

.video-wrapper:hover video {
    filter: brightness(1.1) contrast(1.05);
}

/* Efecto de brillo animado */
.video-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: videoShine 3s infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes videoShine {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Animaciones para imágenes decorativas VR */
@keyframes float1-vr {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-25px) translateX(15px) rotate(10deg);
    }

    66% {
        transform: translateY(-10px) translateX(-12px) rotate(-8deg);
    }
}

@keyframes float2-vr {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-30px) translateX(-18px) rotate(-12deg);
    }
}

@keyframes float3-vr {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) translateX(20px) rotate(8deg);
    }

    75% {
        transform: translateY(-25px) translateX(-10px) rotate(-10deg);
    }
}

@keyframes float4-vr {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-22px) translateX(-14px) rotate(-9deg);
    }

    66% {
        transform: translateY(-12px) translateX(16px) rotate(11deg);
    }
}

@keyframes decorativeGlow-vr {

    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)) brightness(1);
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6)) brightness(1.2);
    }
}

@keyframes decorativePulse-vr {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.75;
    }
}

@keyframes decorativeRotate-vr {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.floating-decorative-image {
    will-change: transform, filter, opacity;
    transition: transform 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.floating-decorative-image img {
    animation: decorativeRotate-vr 20s linear infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
}

.floating-decorative-image:hover {
    transform: scale(1.15) !important;
    animation: decorativeGlow-vr 1s ease-in-out infinite, decorativePulse-vr 1s ease-in-out infinite !important;
}

.floating-decorative-image:hover img {
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.8));
}

.floating-decorative-image:nth-child(1) img {
    animation-duration: 25s;
    animation-delay: 0s;
}

.floating-decorative-image:nth-child(2) img {
    animation-duration: 30s;
    animation-delay: -5s;
}

.floating-decorative-image:nth-child(3) img {
    animation-duration: 35s;
    animation-delay: -10s;
}

.floating-decorative-image:nth-child(4) img {
    animation-duration: 28s;
    animation-delay: -7s;
}

/* ===== Estilos de Administrative Features Section ===== */
@keyframes tileFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-14px) rotate(1deg);
    }
}

@keyframes tileGlow {

    0%,
    100% {
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.20);
    }

    50% {
        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.30);
    }
}

/* Animación de pulso para indicar que es clicable */
@keyframes clickablePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Animación de brillo que se mueve */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

/* Efecto de brillo en el borde */
.feature-hero-card-administrative::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.3) 25%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.3) 75%,
            rgba(255, 255, 255, 0.1) 100%);
    background-size: 200% 200%;
    border-radius: 1rem;
    opacity: 0;
    z-index: -1;
    animation: shimmer 3s linear infinite;
    transition: opacity 0.3s ease;
}

.feature-hero-card-administrative:hover::before {
    opacity: 1;
}

/* Animación de rebote sutil */
@keyframes gentleBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Efectos de onda para la tarjeta administrativa */
@keyframes rippleWave-administrative {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.8);
    }

    50% {
        transform: scale(1.005);
        box-shadow: 0 0 0 5px rgba(250, 204, 21, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
    }
}

.feature-hero-card-administrative {
    animation: tileFloat 5.5s ease-in-out infinite,
        tileGlow 5.5s ease-in-out infinite,
        rippleWave-administrative 3s ease-in-out infinite,
        gentleBounce 2s ease-in-out infinite;
}

/* Efecto de brillo en la imagen al hacer hover */
.feature-hero-card-administrative a:hover img {
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Efecto de brillo en el texto al hacer hover */
.feature-hero-card-administrative a:hover h5 {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
        0 0 30px rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
    transition: all 0.3s ease;
}

@keyframes ping-administrative {

    75%,
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.ripple-ring-administrative {
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    background: rgba(250, 204, 21, 0.4);
    animation: ping-administrative 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    z-index: 0;
}

.ripple-ring-administrative:nth-child(2) {
    animation-delay: 0.5s;
    background: rgba(250, 204, 21, 0.3);
}

/* Animaciones para imágenes decorativas administrativas */
@keyframes float1-administrative {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-25px) translateX(15px) rotate(10deg);
    }

    66% {
        transform: translateY(-10px) translateX(-12px) rotate(-8deg);
    }
}

@keyframes float2-administrative {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-30px) translateX(-18px) rotate(-12deg);
    }
}

@keyframes float3-administrative {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) translateX(20px) rotate(8deg);
    }

    75% {
        transform: translateY(-25px) translateX(-10px) rotate(-10deg);
    }
}

@keyframes float4-administrative {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-22px) translateX(-14px) rotate(-9deg);
    }

    66% {
        transform: translateY(-12px) translateX(16px) rotate(11deg);
    }
}

@keyframes decorativeGlow-administrative {

    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) brightness(1);
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.7)) brightness(1.2);
    }
}

@keyframes decorativePulse-administrative {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.85;
    }
}

@keyframes decorativeRotate-administrative {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.floating-decorative-image-administrative {
    will-change: transform, filter, opacity;
    transition: transform 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.floating-decorative-image-administrative img {
    animation: decorativeRotate-administrative 20s linear infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.floating-decorative-image-administrative:hover {
    transform: scale(1.15) !important;
    animation: decorativeGlow-administrative 1s ease-in-out infinite, decorativePulse-administrative 1s ease-in-out infinite !important;
}

.floating-decorative-image-administrative:hover img {
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9));
}

/* Diferentes velocidades de rotación para cada imagen */
.floating-decorative-image-administrative:nth-of-type(1) img {
    animation-duration: 25s;
    animation-delay: 0s;
}

.floating-decorative-image-administrative:nth-of-type(2) img {
    animation-duration: 30s;
    animation-delay: -5s;
}

.floating-decorative-image-administrative:nth-of-type(3) img {
    animation-duration: 35s;
    animation-delay: -10s;
}

.floating-decorative-image-administrative:nth-of-type(4) img {
    animation-duration: 28s;
    animation-delay: -7s;
}

/* Ocultar estrellas decorativas en móvil */
@media (max-width: 1023px) {
    .administrative-stars-container {
        display: none !important;
    }
}

/* ===== Estilos de Pricing Plans Section ===== */
.plan-card {
    position: relative;
    backdrop-filter: blur(20px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    animation: slideInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plan-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent, rgba(255, 255, 255, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.plan-card:hover::after {
    opacity: 1;
}

.plan-card:nth-child(2) {
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

/* Plan Professional - Estilo glassmorphism elegante */
.professional-card-wrapper {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(249, 250, 251, 0.98) 100%);
    border: 2px solid rgba(1, 139, 176, 0.15);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset,
        0 0 40px rgba(1, 139, 176, 0.1);
}

.professional-card-wrapper:hover {
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset,
        0 0 60px rgba(1, 139, 176, 0.2),
        0 0 100px rgba(2, 175, 201, 0.1);
    transform: translateY(-12px);
}

.professional-header {
    background: linear-gradient(135deg,
            #018BB0 0%,
            #02AFC9 25%,
            #00B8D4 50%,
            #02AFC9 75%,
            #018BB0 100%);
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
    position: relative;
    overflow: hidden;
}

.professional-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes gradientShift {

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

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

.professional-badge {
    background: linear-gradient(135deg, #02AFC9, #018BB0, #02AFC9);
    background-size: 200% 200%;
    box-shadow:
        0 8px 24px rgba(1, 139, 176, 0.4),
        0 0 20px rgba(2, 175, 201, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: badgeShimmer 3s ease infinite;
    position: relative;
    overflow: hidden;
}

.professional-badge::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: badgeShine 2s infinite;
}

@keyframes badgeShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

@keyframes badgeShimmer {

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

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

/* Plan Ultimate - Estilo ultra premium */
.ultimate-card-wrapper {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.98) 50%,
            rgba(250, 250, 255, 1) 100%);
    border: 3px solid transparent;
    background-clip: padding-box;
    position: relative;
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset,
        0 0 50px rgba(244, 195, 54, 0.2);
}

.ultimate-card-wrapper:hover {
    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset,
        0 0 80px rgba(244, 195, 54, 0.3),
        0 0 120px rgba(1, 139, 176, 0.15);
    transform: translateY(-15px) scale(1.02);
}

.ultimate-card-wrapper::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 2rem;
    padding: 3px;
    background: linear-gradient(135deg,
            #F4C336 0%,
            #F8D866 25%,
            #018BB0 50%,
            #02AFC9 75%,
            #F4C336 100%);
    background-size: 400% 400%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderRotate 8s linear infinite;
    z-index: -1;
}

@keyframes borderRotate {
    0% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }

    50% {
        background-position: 100% 50%;
        filter: hue-rotate(180deg);
    }

    100% {
        background-position: 0% 50%;
        filter: hue-rotate(360deg);
    }
}

.ultimate-header {
    background: linear-gradient(135deg,
            #018BB0 0%,
            #02AFC9 20%,
            #6D9F3E 40%,
            #F4C336 60%,
            #6D9F3E 80%,
            #02AFC9 100%);
    background-size: 400% 400%;
    animation: ultimateGradient 15s ease infinite;
    position: relative;
    overflow: hidden;
}

.ultimate-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: sweep 3s infinite;
}

@keyframes sweep {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes ultimateGradient {

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

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

.ultimate-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 50px 50px, 100px 100px;
    animation: sparkleMove 25s linear infinite;
}

@keyframes sparkleMove {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(50px, 50px) rotate(360deg);
    }
}

.ultimate-badge {
    background: linear-gradient(135deg,
            #F4C336 0%,
            #F8D866 25%,
            #FFD700 50%,
            #F8D866 75%,
            #F4C336 100%);
    background-size: 300% 300%;
    color: #1a1a1a;
    box-shadow:
        0 12px 40px rgba(244, 195, 54, 0.5),
        0 0 30px rgba(244, 195, 54, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    animation: badgePulse 2.5s ease-in-out infinite, badgeGradient 4s ease infinite;
    position: relative;
    overflow: hidden;
}

.ultimate-badge::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    animation: badgeShine 2s infinite;
}

@keyframes badgeGradient {

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

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

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 12px 40px rgba(244, 195, 54, 0.5),
            0 0 30px rgba(244, 195, 54, 0.3);
    }

    50% {
        transform: scale(1.08);
        box-shadow:
            0 18px 60px rgba(244, 195, 54, 0.7),
            0 0 50px rgba(244, 195, 54, 0.5);
    }
}

/* Efectos de hover mejorados */
.plan-card:hover {
    transform: translateY(-12px);
}

.feature-item {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 1rem;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

.feature-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, transparent, currentColor, transparent);
    transform: scaleY(0);
    transition: transform 0.4s ease;
}

.feature-item:hover::before {
    transform: scaleY(1);
}

.feature-item:hover {
    background: rgba(1, 139, 176, 0.08);
    transform: translateX(8px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.plan-icon {
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.3));
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

.plan-card:hover .plan-icon {
    transform: scale(1.15) rotate(10deg) translateY(-5px);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

.plan-button {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.plan-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.8s, height 0.8s;
}

.plan-button:hover::before {
    width: 400px;
    height: 400px;
}

.plan-button:hover {
    transform: translateY(-3px);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ultimate-button {
    background: linear-gradient(135deg,
            #059669 0%,
            #10b981 50%,
            #059669 100%);
    background-size: 200% 200%;
    box-shadow:
        0 12px 40px rgba(5, 150, 105, 0.4),
        0 0 30px rgba(5, 150, 105, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    animation: buttonGradient 3s ease infinite;
    color: white;
}

@keyframes buttonGradient {

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

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

.ultimate-button:hover {
    background: linear-gradient(135deg,
            #10b981 0%,
            #059669 50%,
            #10b981 100%);
    box-shadow:
        0 18px 60px rgba(5, 150, 105, 0.6),
        0 0 50px rgba(5, 150, 105, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-4px) scale(1.02);
}

/* Estilos para Atropos - Tarjetas más anchas */
.my-atropos-professional,
.my-atropos-ultimate {
    width: 100%;
    min-width: 24rem;
    max-width: 28rem;
    flex: 1 1 0;
}

@media (max-width: 1024px) {

    .my-atropos-professional,
    .my-atropos-ultimate {
        min-width: 100%;
        max-width: 100%;
    }
}

/* Asegurar que ambas tarjetas tengan exactamente el mismo ancho */
.my-atropos-professional .atropos-inner,
.my-atropos-ultimate .atropos-inner {
    width: 100%;
}

/* Asegurar que ambas tarjetas tengan exactamente el mismo tamaño */
.professional-card-wrapper,
.ultimate-card-wrapper {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.professional-header,
.ultimate-header {
    flex-shrink: 0;
}

.atropos-inner>div:last-child {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Animación de entrada mejorada */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Efectos de glassmorphism adicionales */
    .feature-icon-wrapper {
        position: relative;
        transition: all 0.4s ease;
    }

    .feature-icon-wrapper::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: linear-gradient(135deg, currentColor, transparent);
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: -1;
    }

    .feature-item:hover .feature-icon-wrapper::after {
        opacity: 0.3;
    }

    .feature-item:hover .feature-icon-wrapper {
        transform: scale(1.15) rotate(5deg);
    }

    /* Responsive */
    @media (max-width: 768px) {

        .my-atropos-professional,
        .my-atropos-ultimate {
            max-width: 100%;
        }

        .ultimate-header::before,
        .ultimate-header::after {
            display: none;
        }
    }

    /* ===== Pricing columns: force equal heights for Atropos cards ===== */
    @media (min-width: 1024px) {
        .pricing-col {
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        .pricing-col>.atropos {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
        }

        .pricing-col .atropos-inner {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
        }

        /* Ensure the CTA button stays visually aligned below the card */
        .pricing-col>.plan-button,
        .pricing-col>.atropos+.plan-button {
            margin-top: 1rem;
        }
    }

    /* Animaciones para imágenes decorativas de planes */
    @keyframes float1-pricing {

        0%,
        100% {
            transform: translateY(0px) translateX(0px) rotate(0deg);
        }

        33% {
            transform: translateY(-25px) translateX(15px) rotate(10deg);
        }

        66% {
            transform: translateY(-10px) translateX(-12px) rotate(-8deg);
        }
    }

    @keyframes float2-pricing {

        0%,
        100% {
            transform: translateY(0px) translateX(0px) rotate(0deg);
        }

        50% {
            transform: translateY(-30px) translateX(-18px) rotate(-12deg);
        }
    }

    @keyframes float3-pricing {

        0%,
        100% {
            transform: translateY(0px) translateX(0px) rotate(0deg);
        }

        25% {
            transform: translateY(-20px) translateX(20px) rotate(8deg);
        }

        75% {
            transform: translateY(-25px) translateX(-10px) rotate(-10deg);
        }
    }

    @keyframes float4-pricing {

        0%,
        100% {
            transform: translateY(0px) translateX(0px) rotate(0deg);
        }

        33% {
            transform: translateY(-22px) translateX(-14px) rotate(-9deg);
        }

        66% {
            transform: translateY(-12px) translateX(16px) rotate(11deg);
        }
    }

    @keyframes float5-pricing {

        0%,
        100% {
            transform: translateY(0px) translateX(0px) rotate(0deg);
        }

        40% {
            transform: translateY(-24px) translateX(18px) rotate(12deg);
        }

        80% {
            transform: translateY(-14px) translateX(-15px) rotate(-9deg);
        }
    }

    @keyframes decorativeGlow-pricing {

        0%,
        100% {
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) brightness(1);
        }

        50% {
            filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.7)) brightness(1.2);
        }
    }

    @keyframes decorativePulse-pricing {

        0%,
        100% {
            opacity: 0.5;
        }

        50% {
            opacity: 0.75;
        }
    }

    @keyframes decorativeRotate-pricing {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .floating-decorative-image-pricing {
        will-change: transform, filter, opacity;
        transition: transform 0.3s ease;
        pointer-events: none;
        z-index: 1;
    }

    .floating-decorative-image-pricing img {
        animation: decorativeRotate-pricing 20s linear infinite;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }

    .floating-decorative-image-pricing:hover {
        transform: scale(1.15) !important;
        animation: decorativeGlow-pricing 1s ease-in-out infinite, decorativePulse-pricing 1s ease-in-out infinite !important;
    }

    .floating-decorative-image-pricing:hover img {
        filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9));
    }

    .floating-decorative-image-pricing:nth-of-type(1) img {
        animation-duration: 25s;
        animation-delay: 0s;
    }

    .floating-decorative-image-pricing:nth-of-type(2) img {
        animation-duration: 30s;
        animation-delay: -5s;
    }

    .floating-decorative-image-pricing:nth-of-type(3) img {
        animation-duration: 35s;
        animation-delay: -10s;
    }

    .floating-decorative-image-pricing:nth-of-type(4) img {
        animation-duration: 28s;
        animation-delay: -7s;
    }

    .floating-decorative-image-pricing:nth-of-type(5) img {
        animation-duration: 32s;
        animation-delay: -12s;
    }

    /* ===== Estilos del Loader ===== */
    /* Full Screen Slider Styles */
    .fullscreen-slider {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    .slide-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .slide-image.active {
        opacity: 1;
    }

    /* Animaciones de slide */
    .slide-right {
        transform: translateX(100%);
        animation: slideInRightLoader 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .slide-left {
        transform: translateX(-100%);
        animation: slideInLeftLoader 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .slide-up {
        transform: translateY(-100%);
        animation: slideInUpLoader 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .slide-down {
        transform: translateY(100%);
        animation: slideInDownLoader 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    /* Keyframes para las animaciones del loader */
    @keyframes slideInRightLoader {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideInLeftLoader {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideInUpLoader {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slideInDownLoader {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Indicador de carga automática */
    .auto-loading-indicator {
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 15px;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 15px 25px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: 500;
        z-index: 10;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .loading-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top: 2px solid white;
        border-radius: 50%;
        animation: spinLoader 1s linear infinite;
    }

    @keyframes spinLoader {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* Animación de entrada para el loader */
    #kibi-loader {
        animation: loaderFadeIn 0.5s ease-out;
    }

    @keyframes loaderFadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Responsive para loader */
    @media (max-width: 768px) {

        /* Ocultar completamente el loader en móvil */
        #kibi-loader {
            display: none !important;
        }

        .navigation-indicators {
            right: 15px;
            gap: 10px;
        }

        .nav-dot {
            width: 10px;
            height: 10px;
        }

        .keyboard-hint {
            bottom: 20px;
            font-size: 12px;
            padding: 8px 16px;
        }
    }

    /* Ocultar scrollbars del loader */
    .fullscreen-slider::-webkit-scrollbar {
        display: none;
    }

    .fullscreen-slider {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* ===== Estilos del Modern Header ===== */
    /* Transición suave para el header */
    /* ===== Estilos del Modern Header ===== */
    /* Header consolidado: transición, backdrop y posicionamiento fijo */
    #main-header {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    /* Sombra cuando el header está visible */
    #main-header:not(.header-hidden) {
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    }

    /* Sombra más pronunciada cuando se hace scroll */
    #main-header.scrolled {
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    }

    /* Transición suave para el menú móvil */
    #mobile-menu {
        transition: all 0.3s ease-in-out;
    }

    /* Mejorar la visibilidad del botón hamburguesa */
    button[onclick="toggleMobileMenu()"] {
        transition: all 0.2s ease-in-out;
    }

    button[onclick="toggleMobileMenu()"]:hover {
        transform: scale(1.1);
    }

    /* Estilos para el menú tipo WhatsApp en tablets */
    @media (min-width: 768px) and (max-width: 1023px) {
        .tablet-menu-tab {
            position: relative;
            font-size: 0.875rem;
            padding: 0.75rem 1rem;
            cursor: pointer;
        }

        .tablet-menu-tab:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-bottom-color: #4ade80 !important;
        }

        .tablet-menu-tab.active {
            border-bottom-color: #4ade80 !important;
            border-bottom-width: 3px !important;
            background-color: rgba(255, 255, 255, 0.08);
            font-weight: 600;
        }

        /* Ocultar scrollbar pero mantener funcionalidad de scroll */
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Asegurar que el menú tablet esté fijo */
        .tablet-menu-tab {
            flex-shrink: 0;
        }

        /* Efecto de transición suave */
        .tablet-menu-tab {
            transition: all 0.2s ease-in-out;
        }
    }

    /* ===== Estilos del WhatsApp Float ===== */
    @keyframes whatsappPulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
        }

        50% {
            transform: scale(1.05);
            box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
        }
    }

    @keyframes whatsappFloat {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    .whatsapp-animated {
        animation: whatsappPulse 2s ease-in-out infinite, whatsappFloat 3s ease-in-out infinite;
    }
    /* ===== Animaciones contact success ===== */

    @keyframes checkmark {
        0% {
            stroke-dasharray: 0, 100;
            opacity: 0;
            transform: scale(0.8);
        }

        50% {
            transform: scale(1.1);
        }

        100% {
            stroke-dasharray: 100, 0;
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translateY(30px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes blob {

        0%,
        100% {
            transform: translate(0, 0) scale(1);
        }

        33% {
            transform: translate(30px, -50px) scale(1.1);
        }

        66% {
            transform: translate(-20px, 20px) scale(0.9);
        }
    }

    @keyframes ping-slow {

        0%,
        100% {
            transform: scale(1);
            opacity: 0.7;
        }

        50% {
            transform: scale(1.5);
            opacity: 0;
        }
    }

    @keyframes ping-slower {

        0%,
        100% {
            transform: scale(1);
            opacity: 0.5;
        }

        50% {
            transform: scale(1.8);
            opacity: 0;
        }
    }

    @keyframes ping-slowest {

        0%,
        100% {
            transform: scale(1);
            opacity: 0.3;
        }

        50% {
            transform: scale(2);
            opacity: 0;
        }
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0px) translateX(0px);
            opacity: 0.6;
        }

        33% {
            transform: translateY(-20px) translateX(10px);
            opacity: 0.8;
        }

        66% {
            transform: translateY(10px) translateX(-10px);
            opacity: 0.4;
        }
    }

    .animate-checkmark {
        animation: checkmark 1s ease-out forwards;
    }

    .animate-fadeInUp {
        animation: fadeInUp 0.8s ease-out forwards;
        opacity: 0;
    }

    .animate-blob {
        animation: blob 20s infinite;
    }

    .animate-ping-slow {
        animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    .animate-ping-slower {
        animation: ping-slower 4s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    .animate-ping-slowest {
        animation: ping-slowest 5s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    .animate-float {
        animation: float 6s ease-in-out infinite;
    }

    .animation-delay-200 {
        animation-delay: 200ms;
    }

    .animation-delay-400 {
        animation-delay: 400ms;
    }

    .animation-delay-600 {
        animation-delay: 600ms;
    }

    .animation-delay-800 {
        animation-delay: 800ms;
    }

    .animation-delay-1000 {
        animation-delay: 1000ms;
    }

    .animation-delay-1200 {
        animation-delay: 1200ms;
    }

    .animation-delay-2000 {
        animation-delay: 2s;
    }

    .animation-delay-4000 {
        animation-delay: 4s;
    }