/* ── Base ── */
html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }
body { margin-bottom: 60px; }

/* ── Navbar estilo Squarespace ── */
.navbar-nav.me-auto { align-items: flex-end !important; }
.navbar-nav.ms-auto { align-items: center !important; }

.nav-link-sq {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.5rem 0.85rem !important;
    transition: color 0.15s;
    text-decoration: none;
}
.nav-link-sq:hover { color: #fff !important; }

/* Botón blanco con texto negro (estilo "Empezar") */
.btn-sq {
    display: inline-block;
    background: #fff;
    color: #111 !important;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.55rem 1.3rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.btn-sq:hover { background: #e0e0e0; color: #111 !important; }

/* Botón outline (Salir) */
.btn-sq-outline {
    background: transparent;
    color: rgba(255,255,255,0.75);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(255,255,255,0.4);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.btn-sq-outline:hover { border-color: #fff; color: #fff; }

/* ── Paleta ── */
:root {
    --color-principal: #2d6a2d;
    --color-secundario: #f5a623;
    --color-acento: #8B1C1C;
}

.bg-bachillerato { background-color: var(--color-principal) !important; }

/* ── Hero ── */
.hero-section {
    position: relative; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; background-color: #000;
}
.hero-video {
    position: absolute; top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover; opacity: 0.6;
}
.hero-content { position: relative; z-index: 2; text-align: center; color: white; padding: 2rem; }
.hero-content h1 { font-size: clamp(2rem, 6vw, 4rem); font-weight: 900; text-shadow: 2px 2px 8px rgba(0,0,0,.8); }
.hero-content p  { font-size: clamp(1rem, 2.5vw, 1.4rem); text-shadow: 1px 1px 4px rgba(0,0,0,.8); }

/* ── Botón mute video ── */
#btnMute {
    position: absolute;
    bottom: 28px;
    right: 28px;
    z-index: 10;
    background: rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.7);
    color: white;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .15s;
    backdrop-filter: blur(4px);
}
#btnMute:hover { background: rgba(0,0,0,0.75); transform: scale(1.1); }

/* ── Cards ── */
.card-hover { transition: transform .2s, box-shadow .2s; border: none; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }

/* ── Sidebar ── */
.sidebar { min-height: calc(100vh - 72px); background: #f8f9fa; border-right: 1px solid #dee2e6; padding: 1.5rem 0; }
.sidebar .nav-link { color: #333; padding: .6rem 1.5rem; transition: background .15s; border-radius: 0; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: var(--color-principal); color: white; }
.sidebar .nav-link i { width: 1.4rem; }

/* ── Calificaciones ── */
.table-calificaciones td { vertical-align: middle; }
.cal-reprobado { background-color: #fde8e8 !important; }
.cal-aprobado  { background-color: #e8f5e9 !important; }

/* ── Eventos ── */
.evento-card .card-img-top { height: 180px; object-fit: cover; }

/* ── Inscripción ── */
.form-inscripcion { max-width: 700px; margin: 0 auto; }

/* ── Donativos ── */
.donativo-hero {
    background: linear-gradient(135deg, var(--color-principal), #4caf50);
    color: white; padding: 4rem 2rem; text-align: center; border-radius: 1rem;
}

/* ── Documentos ── */
.doc-item { display: flex; align-items: center; gap: 1rem; padding: .75rem; border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: .75rem; }
.doc-item .doc-icon { font-size: 2rem; color: var(--color-principal); }
.doc-ok      { border-color: #198754; background: #f0fdf4; }
.doc-pending { border-color: #ffc107; background: #fffde7; }

/* ── Psicología ── */
.psico-entry { border-left: 4px solid var(--color-principal); padding: 1rem 1.25rem; margin-bottom: 1rem; background: #f8f9fa; border-radius: 0 8px 8px 0; }

@media (max-width: 768px) {
    .sidebar { min-height: auto; border-right: none; border-bottom: 1px solid #dee2e6; }
}

/* ── Blog — Diario del Corazón ── */
.blog-card-hover { transition: transform .25s, box-shadow .25s; }
.blog-card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.12) !important; }
.blog-card-hover:hover img { transform: scale(1.04); }
.blog-contenido p { margin-bottom: 1.2em; }