/* Base visual compartida — Institución Educativa Colegio Puerto Santander */
: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; }

/* Compatibilidad visual para las páginas internas heredadas. */
.page-title {
    position: relative;
    overflow: hidden;
    margin: 0 !important;
    padding: clamp(46px, 7vw, 82px) 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 88% 20%, rgba(245, 200, 75, .30), transparent 16%),
        linear-gradient(125deg, var(--primary-dark), var(--primary) 60%, #05a879) !important;
    box-shadow: none !important;
    text-align: center !important;
}

.page-title::before {
    content: "Portal institucional";
    display: inline-flex;
    margin-bottom: 15px;
    padding: 7px 14px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.13);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.page-title h1,
.page-title h2 {
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 960px;
    color: #fff !important;
    font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
    line-height: 1.08 !important;
    text-shadow: 0 4px 18px rgba(0,0,0,.2);
}

.page-title h1::after,
.page-title h2::after { display: none !important; }

.additional-text,
.page-content,
.content-section,
.main-content {
    width: min(1180px, calc(100% - 32px));
    margin: 34px auto !important;
    padding: clamp(22px, 4vw, 42px) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink) !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: var(--shadow);
}

.additional-text > .container,
.page-content > .container,
.content-section > .container,
.main-content > .container { width: 100%; padding-inline: 0; }

.additional-text h2,
.additional-text h3,
.page-content h2,
.content-section h2 {
    padding: 14px 18px !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
}

body > .container:not(.site-header-tresbocas .container):not(.site-footer .container),
body > .container-fluid:not(.site-header-tresbocas .container-fluid) {
    margin-top: 30px;
    margin-bottom: 30px;
}

iframe {
    display: block;
    width: 100% !important;
    max-width: 100%;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    background: #fff;
}

.table-responsive,
table { border-radius: 14px; overflow: hidden; }
.btn-primary, .btn-success, .btn-custom, .btn-gradient {
    border-color: var(--primary) !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !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; }
    .additional-text, .page-content, .content-section, .main-content {
        width: calc(100% - 24px);
        margin-block: 20px !important;
        padding: 18px !important;
        border-radius: 18px;
    }
    iframe { min-height: 420px; }
}