/* Base visual compartida — Institución Educativa Filo El Gringo */
:root {
    --primary: #068460;
    --primary-dark: #045f45;
    --primary-light: #e6f4f0;
    --accent: #f5c84b;
    --ink: #17352c;
    --canvas: #f4f9f7;
    --line: #d6e9e3;
    --radius: 22px;
    --shadow: 0 14px 34px rgba(6, 132, 96, .12);
}

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    background: linear-gradient(180deg, #eaf5f1 0, #f9fcfb 340px, var(--canvas) 100%) !important;
    color: var(--ink);
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    line-height: 1.6;
}

::selection { background: #bfe3d7; color: #034c37; }

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.02em;
}

a { color: var(--primary); text-underline-offset: .18em; }
a:hover { color: var(--primary-dark); }

:focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 3px; }
.container { width: min(1180px, calc(100% - 32px)); }

/* Portadas de páginas y títulos de menú centrados. */
.hero-wrap {
    min-height: 255px;
    display: grid;
    align-items: center;
    padding: 64px 0 118px !important;
    background: radial-gradient(circle at 88% 22%, rgba(245,200,75,.30) 0 5%, transparent 5.2%), radial-gradient(circle at 78% 28%, rgba(255,255,255,.12) 0 14%, transparent 14.2%), linear-gradient(125deg, #045f45, #068460 58%, #05a879) !important;
    text-align: center;
    isolation: isolate;
}

.hero-wrap::after { content: ''; position: absolute; width: 340px; height: 340px; right: -135px; bottom: -210px; border: 34px solid rgba(255,255,255,.10); border-radius: 50%; }
.hero-wrap .container { text-align: center; }
.hero-wrap h1, .hero-wrap h2, .hero-wrap h3, .hero-wrap p { color: #fff !important; }
.hero-wrap h1 { max-width: 900px; margin-inline: auto; font-size: clamp(2.1rem, 4.3vw, 3.8rem) !important; text-shadow: 0 3px 16px rgba(5, 20, 55, .25); }

.hero-label, .hero-wrap .hero-label {
    display: inline-flex !important; width: fit-content; margin: 0 auto 14px !important; padding: 7px 14px !important;
    border: 1px solid rgba(255,255,255,.36) !important; border-radius: 999px !important; background: rgba(255,255,255,.13) !important;
    color: #fff !important; font-size: .76rem !important; font-weight: 700 !important; letter-spacing: .1em; box-shadow: none !important;
}

.floating-card, .content-card, .info-card, .card {
    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 24px 60px rgba(6,132,96,.15) !important;
}

.floating-card { margin-top: -72px !important; padding: clamp(24px, 4vw, 48px) !important; }
.section-header, .card-title-custom { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.section-header i, .card-title-custom i, .quick-icon { color: var(--primary) !important; background: var(--primary-light) !important; }
.iframe-container, .iframe-box { border: 1px solid var(--line) !important; border-radius: 16px !important; background: #fbfefd !important; }

input, select, textarea { border-color: var(--line) !important; border-radius: 12px !important; }
input:focus, select:focus, textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 .24rem rgba(6,132,96,.16) !important; }

/* Títulos claros sobre fondos institucionales. */
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6,
.site-footer p, .site-footer li, .site-footer span, .site-footer a, .site-footer .footer-title, .site-footer .footer-update,
.institution-card-header h1, .institution-card-header h2, .institution-card-header h3, .institution-card-header i {
    color: #fff !important;
}

.site-footer .footer-info i { color: var(--accent) !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 767.98px) {
    .container { width: min(100% - 24px, 1180px); }
    .hero-wrap { min-height: 220px; padding: 52px 0 88px !important; }
    .floating-card { margin-top: -48px !important; }
}