/* ======================================================
   Design System & Brand Variables – Smart Kids Christian Academy
   Paleta oficial derivada del logo "Atom Cubes"
   ====================================================== */
:root {
    /* ── Colores primarios de marca ── */
    --color-primary:    #00C2FF;  /* Azul Cian – Bloque 'A', esfera derecha */
    --color-secondary:  #475569;  /* Gris azulado (utilidad/neutro) */
    --color-accent:     #00C2FF;  /* Azul Cian (sinónimo de primary para acentos) */

    /* ── Paleta secundaria del logo ── */
    --color-brand-red:    #FF2424;  /* Rojo – Bloques 'S', esfera izquierda */
    --color-brand-green:  #00E600;  /* Verde – Bloque 'M', letras 'KIDS' */
    --color-brand-cyan:   #00C2FF;  /* Azul Cian – Bloque 'A', esfera derecha */
    --color-brand-pink:   #FF57B2;  /* Rosa / Magenta – Bloque 'R', esfera superior */
    --color-brand-yellow: #FFDD00;  /* Amarillo Central – Núcleo del átomo */
    --color-brand-black:  #000000;  /* Negro – Líneas y texto inferior del logo */

    /* ── Fondos claros ── */
    --background-dark: #FAFAFC;
}

/* ======================================================
   Custom transitions and interactive utilities
   ====================================================== */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.accordion-content.active {
    max-height: 500px; /* Suficiente para contener la documentación */
}

/* ======================================================
   Input focus micro-animations
   ====================================================== */
input, textarea, select {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus, textarea:focus, select:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 194, 255, 0.08);
}

/* ======================================================
   Custom Scrollbar
   ====================================================== */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #fafafc;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* ======================================================
   Logo Container – Optimised sizing for Header & Footer
   ====================================================== */
.brand-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.brand-logo:hover {
    transform: scale(1.06);
}

/* Footer logo is slightly smaller */
.brand-logo-footer {
    height: 36px;
    width: auto;
    object-fit: contain;
}

/* ======================================================
   Modular Card – Multi-color hover borders
   Inspirado en tarjetas tipo Colegio Alemán: cada tarjeta
   recibe un borde de color de la marca al hacer hover.
   ====================================================== */
.card-brand-hover {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 10px 30px rgba(148, 163, 184, 0.04);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-brand-hover:hover {
    transform: translateY(-4px);
}

/* Variantes por color de marca */
.card-brand-hover--red:hover {
    border-color: var(--color-brand-red) !important;
    box-shadow: 0 12px 30px rgba(255, 36, 36, 0.08);
}

.card-brand-hover--green:hover {
    border-color: var(--color-brand-green) !important;
    box-shadow: 0 12px 30px rgba(0, 230, 0, 0.08);
}

.card-brand-hover--pink:hover {
    border-color: var(--color-brand-pink) !important;
    box-shadow: 0 12px 30px rgba(255, 87, 178, 0.08);
}

.card-brand-hover--yellow:hover {
    border-color: var(--color-brand-yellow) !important;
    box-shadow: 0 12px 30px rgba(255, 221, 0, 0.08);
}

.card-brand-hover--cyan:hover {
    border-color: var(--color-brand-cyan) !important;
    box-shadow: 0 12px 30px rgba(0, 194, 255, 0.08);
}

/* ======================================================
   Oferta Card – Micro-interacciones estilo ans.edu.ni / dsm.edu.ni
   ====================================================== */
.oferta-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 10px 30px rgba(148, 163, 184, 0.04);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.35s ease,
                box-shadow 0.35s ease;
}

/* Shimmer gradient on hover */
.oferta-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.6s ease;
    pointer-events: none;
}

.oferta-card:hover::after {
    left: 120%;
}

.oferta-card:hover {
    transform: translateY(-6px);
}

/* Card icon bounce on hover */
.oferta-card__icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.oferta-card:hover .oferta-card__icon {
    transform: scale(1.08) rotate(-3deg);
}

/* Preescolar level cards — clean soft shadow on hover (no rigid borders) */
.oferta-card--level {
    border-left: none;
}

.card-brand-hover--red.oferta-card--level:hover {
    box-shadow: 0 8px 24px rgba(255, 36, 36, 0.10);
}
.card-brand-hover--green.oferta-card--level:hover {
    box-shadow: 0 8px 24px rgba(0, 230, 0, 0.10);
}
.card-brand-hover--yellow.oferta-card--level:hover {
    box-shadow: 0 8px 24px rgba(255, 221, 0, 0.10);
}
.card-brand-hover--cyan.oferta-card--level:hover {
    box-shadow: 0 8px 24px rgba(0, 194, 255, 0.10);
}

/* Taller cards — tag pill pulse on hover */
.oferta-card--taller:hover {
    background: rgba(255, 255, 255, 0.95);
}

/* Valor cards in colegio.html — subtle glow */
.valor-card {
    position: relative;
    overflow: hidden;
}

.valor-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.015) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.valor-card:hover::before {
    opacity: 1;
}

/* ======================================================
   WhatsApp CTA Button – Floating accent
   ====================================================== */
.whatsapp-btn {
    background: linear-gradient(135deg, #25D366, #128C7E);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn:active {
    transform: scale(0.97);
}

/* ======================================================
   Scroll-Driven Animations – Inspired by ans.edu.ni
   Uses IntersectionObserver via main.js to add .is-visible
   ====================================================== */

/* ── Keyframes ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Base state: hidden before scroll triggers ── */
.animate-on-scroll {
    opacity: 0;
    transition: none;
}

/* ── Revealed state ── */
.animate-on-scroll.is-visible {
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Animation variants ── */
.fade-in-up.is-visible {
    animation-name: fadeInUp;
    animation-duration: 0.7s;
}

.slide-in-right.is-visible {
    animation-name: slideInRight;
    animation-duration: 0.7s;
}

.fade-in.is-visible {
    animation-name: fadeIn;
    animation-duration: 0.6s;
}

.scale-in.is-visible {
    animation-name: scaleIn;
    animation-duration: 0.6s;
}

/* ── Stagger delays for card grids ── */
.stagger-delay-1 { animation-delay: 0.08s; }
.stagger-delay-2 { animation-delay: 0.16s; }
.stagger-delay-3 { animation-delay: 0.24s; }
.stagger-delay-4 { animation-delay: 0.32s; }
.stagger-delay-5 { animation-delay: 0.40s; }
.stagger-delay-6 { animation-delay: 0.48s; }
.stagger-delay-7 { animation-delay: 0.56s; }

/* ── Accessibility: Respect reduced motion preference ── */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .animate-on-scroll.is-visible {
        animation: none !important;
    }
}