/* =====================================================================
   EduLDN — Landing page del Liceo Divino Niño
   Moderna, colorida e infantil, pero elegante. Sin imágenes externas.
   ===================================================================== */

.landing { overflow-x: hidden; }
.landing section { padding: 4rem 0; }
@media (min-width: 992px) { .landing section { padding: 5.5rem 0; } }

/* ---- Navbar ---- */
.landing-nav {
    position: sticky; top: 0; z-index: 1030;
    background: color-mix(in srgb, var(--ldn-surface) 85%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ldn-outline-variant);
}
.landing-nav .navbar-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--ldn-primary-strong); }
.landing-nav .nav-link { font-weight: 500; color: var(--ldn-on-surface-variant); padding: .6rem .9rem; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.landing-nav .nav-link:hover, .landing-nav .nav-link:focus-visible { background: var(--ldn-surface-2); color: var(--ldn-on-surface); }

/* ---- Hero ---- */
.hero { position: relative; padding: 3.5rem 0 4rem; overflow: hidden;
    background: radial-gradient(1200px 600px at 80% -10%, var(--ldn-primary-container), transparent 60%),
                radial-gradient(800px 500px at -10% 100%, var(--ldn-secondary-container), transparent 60%),
                var(--ldn-background);
}
@media (min-width: 992px) { .hero { padding: 5rem 0 6rem; } }
.hero h1 { font-weight: 700; letter-spacing: -.02em; }
.hero .highlight { color: var(--ldn-primary-strong); position: relative; white-space: nowrap; }
.hero .highlight::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: .05em; height: .35em; z-index: -1;
    background: var(--ldn-secondary-container); border-radius: 4px; transform: rotate(-1deg);
}
.hero .lead { color: var(--ldn-on-surface-variant); font-size: 1.15rem; max-width: 560px; }
.hero-art { position: relative; min-height: 320px; }
@media (min-width: 992px) { .hero-art { min-height: 440px; } }

.shape { position: absolute; border-radius: 50%; will-change: transform; }
.shape-1 { width: 220px; height: 220px; background: #1496D2; top: 10%; left: 12%; border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; animation: float 7s ease-in-out infinite; }
.shape-2 { width: 150px; height: 150px; background: #F47B20; top: 45%; left: 55%; border-radius: 60% 40% 45% 55% / 50% 60% 40% 50%; animation: float 8s ease-in-out infinite 1s; }
.shape-3 { width: 96px; height: 96px; background: #FFD166; top: 8%; left: 62%; animation: float 6s ease-in-out infinite .5s; }
.shape-4 { width: 70px; height: 70px; background: #2E9E6B; top: 70%; left: 20%; border-radius: 30%; transform: rotate(15deg); animation: spin 14s linear infinite; }
.shape-5 { width: 46px; height: 46px; background: #9B5DE5; top: 25%; left: 42%; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: float 5s ease-in-out infinite 1.5s; }
.shape-6 { width: 30px; height: 30px; background: #F47B20; top: 80%; left: 75%; animation: float 6.5s ease-in-out infinite 2s; }

.hero-card {
    position: absolute; background: var(--ldn-surface); border-radius: var(--ldn-radius-lg);
    box-shadow: var(--ldn-shadow-3); padding: .9rem 1.1rem; display: flex; align-items: center; gap: .75rem;
    font-weight: 500; font-size: .9rem; border: 1px solid var(--ldn-outline-variant);
}
.hero-card .material-symbols-rounded { color: var(--ldn-primary-strong); }
.hero-card-1 { top: 62%; left: 2%; animation: float 7s ease-in-out infinite .3s; }
.hero-card-2 { top: 12%; right: 0; animation: float 7.5s ease-in-out infinite 1.2s; }
.hero-card-3 { bottom: 0; right: 10%; animation: float 6.8s ease-in-out infinite .8s; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes spin { to { transform: rotate(375deg); } }

/* ---- Secciones ---- */
.section-label { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ldn-secondary-strong); background: var(--ldn-secondary-container); padding: .35em .9em; border-radius: 999px; margin-bottom: .75rem; }
.section-title { font-weight: 700; letter-spacing: -.01em; margin-bottom: 1rem; }
.section-alt { background: var(--ldn-surface); }

/* Niveles (bento) */
.nivel-card {
    border-radius: var(--ldn-radius-xl); padding: 1.5rem; height: 100%;
    background: var(--ldn-surface); border: 1px solid var(--ldn-outline-variant); box-shadow: var(--ldn-shadow-1);
    transition: transform .2s ease, box-shadow .2s ease; position: relative; overflow: hidden;
}
.nivel-card:hover { transform: translateY(-4px); box-shadow: var(--ldn-shadow-3); }
.nivel-card .emoji { font-size: 2.5rem; line-height: 1; margin-bottom: .75rem; display: block; }
.nivel-card h3 { font-size: 1.15rem; font-weight: 700; }
.nivel-card p { color: var(--ldn-on-surface-variant); font-size: .925rem; margin: 0; }
.nivel-card .edad { position: absolute; top: 1rem; right: 1rem; font-size: .72rem; font-weight: 700; padding: .3em .7em; border-radius: 999px; background: var(--ldn-primary-container); color: var(--ldn-on-primary-container); }
.nivel-card.orange { background: linear-gradient(160deg, var(--ldn-secondary-container), var(--ldn-surface)); }
.nivel-card.blue { background: linear-gradient(160deg, var(--ldn-primary-container), var(--ldn-surface)); }
.nivel-card.green { background: linear-gradient(160deg, var(--ldn-tertiary-container), var(--ldn-surface)); }

/* Valores */
.valor-chip {
    display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 999px;
    background: var(--ldn-surface); border: 1px solid var(--ldn-outline-variant); font-weight: 600; box-shadow: var(--ldn-shadow-1);
}
.valor-chip .material-symbols-rounded { color: var(--ldn-secondary-strong); }

/* Inteligencias */
.intel-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border-radius: var(--ldn-radius-lg); background: var(--ldn-surface); border: 1px solid var(--ldn-outline-variant); height: 100%; }
.intel-card .icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--ldn-primary-container); color: var(--ldn-on-primary-container); }
.intel-card:nth-child(even) .icon { background: var(--ldn-secondary-container); color: var(--ldn-on-secondary-container); }
.intel-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.intel-card p { font-size: .875rem; color: var(--ldn-on-surface-variant); margin: 0; }

/* Contacto */
.contact-card { border-radius: var(--ldn-radius-xl); padding: 2rem; background: var(--ldn-surface); border: 1px solid var(--ldn-outline-variant); box-shadow: var(--ldn-shadow-2); }
.contact-item { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.1rem; }
.contact-item .material-symbols-rounded { color: var(--ldn-primary-strong); }
.contact-item a { color: inherit; text-decoration: none; }
.contact-item a:hover { color: var(--ldn-primary-strong); text-decoration: underline; }
.map-wrap { border-radius: var(--ldn-radius-xl); overflow: hidden; border: 1px solid var(--ldn-outline-variant); min-height: 280px; background: var(--ldn-surface-2); }
.map-wrap iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* CTA */
.cta-band { border-radius: var(--ldn-radius-xl); padding: 2.5rem 1.5rem; color: #fff; text-align: center; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #1496D2, #0F78A8 55%, #F47B20 140%); }
.cta-band h2 { font-weight: 700; }
.cta-band .btn-light { color: var(--ldn-on-primary-container); font-weight: 600; }

/* Footer */
.landing-footer { padding: 2.5rem 0 1.5rem; background: var(--ldn-surface); border-top: 1px solid var(--ldn-outline-variant); font-size: .9rem; color: var(--ldn-on-surface-variant); }
.landing-footer a { color: inherit; }
.social-link { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ldn-surface-2); color: var(--ldn-on-surface-variant); text-decoration: none; font-size: 1.2rem; }
.social-link:hover { background: var(--ldn-primary-container); color: var(--ldn-on-primary-container); }

/* Reveal al hacer scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .shape, .hero-card { animation: none !important; } }