/* =========================================================
   INTERIOR.CSS — Estilos compartidos para páginas interiores
   (filosofia.php, equipo.php, y futuras páginas)
   ========================================================= */

/* ---- Navbar fijo con fondo oscuro (sin scroll trigger) ---- */
.navbar-solid {
    background: rgba(11, 30, 80, 0.97);
    backdrop-filter: blur(14px);
    padding: 16px 0;
    box-shadow: 0 2px 20px rgba(11,30,80,.25);
}
.navbar-solid .logo-icon { color: var(--gold-light); }
.navbar-solid .logo-text strong { color: var(--white); }
.navbar-solid .logo-text span { color: rgba(255,255,255,.45); }
.navbar-solid .nav-links a {
    color: rgba(255,255,255,.7);
    font-size: .83rem;
}
.navbar-solid .nav-links a:hover { color: var(--white); }
.navbar-solid .nav-links a::after { background: var(--blue-pale); }
.navbar-solid .hamburger span { background: var(--white); }

/* Link activo */
.nav-active {
    color: var(--white) !important;
}
.nav-active::after {
    width: 100% !important;
    background: var(--gold) !important;
}
@media (max-width: 1024px) {
    .nav-active { color: var(--gold-light) !important; }
    .nav-active::after { display: none !important; }
}

/* ---- Animación retícula diagonal ---- */
@keyframes grid-drift {
    from { background-position: 0 0; }
    to   { background-position: 64px 64px; }
}

/* ---- PAGE HERO ---- */
.page-hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(140deg, var(--blue-dark) 0%, var(--blue-france) 55%, var(--blue-mid) 100%);
    overflow: hidden;
    padding-top: 80px; /* espacio para navbar fija */
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: -64px; /* margen para que el scroll no muestre bordes vacíos */
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 75%, transparent 100%);
    animation: grid-drift 22s linear infinite;
    pointer-events: none;
    will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
    .page-hero::before { animation: none; }
}
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 75% at 85% 25%, rgba(197,213,239,.08) 0%, transparent 60%);
    pointer-events: none;
}
.page-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 40px;
    padding-bottom: 56px;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: .75rem;
    letter-spacing: .04em;
}
.breadcrumb a {
    color: rgba(255,255,255,.5);
    transition: color .2s ease;
}
.breadcrumb a:hover { color: rgba(255,255,255,.85); }
.breadcrumb .fa-chevron-right {
    font-size: .55rem;
    color: rgba(255,255,255,.35);
}
.breadcrumb span:last-child {
    color: rgba(255,255,255,.75);
}

/* ---- Títulos del hero ---- */
.page-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 16px;
}
.page-hero-desc {
    font-size: 1rem;
    color: rgba(255,255,255,.62);
    max-width: 540px;
    line-height: 1.75;
}

/* ---- Responsive navbar interior ---- */
@media (max-width: 1024px) {
    /* Eliminar backdrop-filter en mobile: crea un containing block
       que impide que los hijos fixed cubran toda la pantalla */
    .navbar-solid {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgb(11, 30, 80);
    }
}

@media (max-width: 768px) {
    .page-hero { min-height: 260px; padding-top: 70px; }
    .page-hero-content { padding-bottom: 40px; }
}