.noticias-header h1 {
    /* ...tamaños y estilos previos... */
    transition: color 0.35s cubic-bezier(.4,0,.2,1), text-shadow 0.35s cubic-bezier(.4,0,.2,1);
    animation: ultimasNoticiasFlash 8s linear infinite;
}

@keyframes ultimasNoticiasFlash {
    0%, 80%, 100% {
        color: #800000;
        text-shadow: none;
    }
    85%, 88% {
        color: #e6b800;
        text-shadow: 0 2px 18px #e6b80099, 0 0 2px #fff;
    }
    90% {
        color: #800000;
        text-shadow: none;
    }
}
.noticias-header h1 {
    font-size: clamp(2.2em, 7vw, 3.1em) !important;
    letter-spacing: 0.5px;
    font-weight: 900;
    line-height: 1.08;
}
/* --- Sticky Navigation --- */
.main-menu.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1000;
    box-shadow: 0 2px 12px #80000022;
    animation: stickyFadeIn 0.3s;
}
@keyframes stickyFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
header {
    position: relative;
    z-index: 100;
}
.senor-carrusel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 1.5em 0 1.5em 0;
}
.carrusel-flecha {
    background: #800000;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px #80000022;
}
.carrusel-flecha:hover {
    background: #a00000;
    transform: scale(1.12);
}
.carrusel-imagenes {
    width: 520px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 4px 18px #80000011;
    background: #f8f8f8;
}
.carrusel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0; top: 0;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
    z-index: 1;
}
.carrusel-img.active {
    opacity: 1;
    z-index: 2;
}
.carrusel-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.carrusel-modal-img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 16px;
    box-shadow: 0 8px 32px #0008;
    background: #fff;
}
.carrusel-cerrar {
    position: absolute;
    top: 32px;
    right: 48px;
    font-size: 2.5em;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
    font-weight: bold;
    text-shadow: 0 2px 8px #000a;
    transition: color 0.2s;
}
.carrusel-cerrar:hover {
    color: #ffdddd;
}
@media (max-width: 600px) {
    .carrusel-imagenes {
        width: 98vw;
        height: 54vw;
        min-height: 180px;
        max-width: 98vw;
    }
    .senor-carrusel {
        gap: 8px;
    }
    .carrusel-flecha {
        width: 32px;
        height: 32px;
        font-size: 1.1em;
    }
}
.footer-privacidad {
    margin-top: 8px;
    text-align: right;
}
.footer-privacidad a {
    color: #800000;
    text-decoration: underline;
    font-size: 0.98em;
    transition: color 0.2s;
}
.footer-privacidad a:hover {
    /* Efecto breaking news TV para 'Últimas Noticias' */
    /* Efecto breaking news TV con barrido amarillo animado */
    .noticias-header h1 {
        font-size: clamp(2.2em, 7vw, 3.1em) !important;
        letter-spacing: 0.5px;
        font-weight: 900;
        line-height: 1.08;
        position: relative;
        z-index: 1;
        color: #800000;
        background: none;
        padding: 0.08em 0.3em;
        border-radius: 0.18em;
        box-decoration-break: clone;
        transition: color 0.7s cubic-bezier(.4,0,.2,1), background 0.7s cubic-bezier(.4,0,.2,1), text-shadow 0.7s cubic-bezier(.4,0,.2,1);
        background-image: linear-gradient(90deg, #ffe066 0%, #e6b800 100%);
        background-size: 0% 100%;
        background-repeat: no-repeat;
        background-position: left;
            animation: ultimasNoticiasBarrido 15s cubic-bezier(.4,0,.2,1) infinite;
        box-shadow: none;
    }

    @keyframes ultimasNoticiasBarrido {
        0%, 80% {
            color: #800000;
            text-shadow: none;
            background-size: 0% 100%;
            background-position: left;
        }
        83% {
            color: #2d1c00;
            text-shadow: 0 2px 12px #fffbe6, 0 0 2px #e6b800;
            background-size: 100% 100%;
            background-position: left;
        }
        87% {
            color: #2d1c00;
            text-shadow: 0 2px 12px #fffbe6, 0 0 2px #e6b800;
            background-size: 100% 100%;
            background-position: right;
        }
        91% {
            color: #800000;
            text-shadow: none;
            background-size: 0% 100%;
            background-position: right;
        }
        100% {
            color: #800000;
            text-shadow: none;
            background-size: 0% 100%;
            background-position: left;
        }
    }

    @keyframes ultimasNoticiasBreaking {
        0%, 80%, 100% {
            background: none;
            color: #800000;
            text-shadow: none;
            box-shadow: none;
        }
        83%, 87% {
            background: linear-gradient(90deg, #ffe066 0%, #e6b800 100%);
            color: #2d1c00;
            text-shadow: 0 2px 12px #fffbe6, 0 0 2px #e6b800;
            box-shadow: 0 2px 18px #e6b80055;
        }
        89% {
            background: none;
            color: #800000;
            text-shadow: none;
            box-shadow: none;
        }
    }
    display: flex;
    gap: 18px;
    margin-top: 10px;
    justify-content: flex-end;
}
.icono-red-social {
    width: 32px;
    height: 32px;
    display: inline-block;
    filter: grayscale(0.2) brightness(0.8);
    transition: filter 0.2s, transform 0.2s;
    vertical-align: middle;
}
.icono-red-social:hover {
    filter: none;
    transform: scale(1.13) rotate(-6deg);
}
@media (max-width: 700px) {
    .footer-redes {
        justify-content: center;
    }
}
footer {
    width: 100vw;
    background: #fff;
    color: #800000;
    margin: 0;
    padding: 0;
    font-family: inherit;
    box-shadow: 0 -2px 16px #80000011;
}
.footer-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 18px 24px;
    gap: 32px;
}
/* Colocar los escudos en una misma fila */
.footer-escudo {
    display: flex;
    align-items: center;
    gap: 24px; /* más separación entre escudos */
}
.footer-escudo img {
            width: 150px; /* un poco más grandes en escritorio */
            height: auto;
            border-radius: 0;
            box-shadow: none;
            background: none;
}

/* Escudo de la Hermandad en blanco y negro en todos los footers */
.footer-escudo img[src*="escudoPrendi1.png"] {
    filter: grayscale(100%);
    transition: filter 0.2s ease;
}
.footer-escudo img[src*="escudoPrendi1.png"]:hover {
    filter: grayscale(85%);
}
.footer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.footer-nombre {
    font-size: 1.08em;
    font-weight: 700;
    text-align: right;
    color: #800000;
    line-height: 1.4;
}
.footer-direccion {
    font-size: 1em;
    color: #444;
    text-align: right;
}
.footer-copyright {
    width: 100vw;
    background: #4a0a0a;
    color: #fff;
    text-align: center;
    font-size: 1em;
    padding: 12px 0 10px 0;
    letter-spacing: 0.5px;
    margin-top: 0;
}
@media (max-width: 700px) {
    .footer-main {
        flex-direction: column;
        align-items: center;
        gap: 18px;
        padding: 24px 8px 12px 8px;
    }
    .footer-info {
        align-items: center;
        text-align: center;
    }
    .footer-nombre, .footer-direccion {
        text-align: center;
    }
    .footer-escudo { justify-content: center; gap: 14px; }
    .footer-escudo img { width: 70px; }
}
.horarios-iglesia-section {
    width: 100vw;
    background: #800000;
    color: #fff;
    padding: 48px 0 48px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}
.horarios-iglesia-section { position:relative; overflow:hidden; background: linear-gradient(135deg,#7d0000 0%, #680000 55%, #730000 100%); }
.horarios-iglesia-section::before,
.horarios-iglesia-section::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; }
/* Líneas finas irregulares horizontales (capa base) */
.horarios-iglesia-section::before {
    background:
        linear-gradient(90deg,
            rgba(50,0,0,0.38) 0 1px, transparent 15px 50px,
            transparent 50px 75px, rgba(55,0,0,0.30) 75px 76px, transparent 76px 150px,
            transparent 150px 172px, rgba(48,0,0,0.34) 172px 173px, transparent 173px 240px,
            transparent 240px 265px, rgba(62,0,0,0.30) 265px 266px, transparent 266px 360px,
            transparent 360px 385px, rgba(58,0,0,0.32) 385px 386px, transparent 386px 470px,
            transparent 470px 495px, rgba(70,0,0,0.32) 495px 496px, transparent 496px 620px
        ),
        linear-gradient(90deg,
            rgba(78,0,0,0.26) 0 1px, transparent 15px 90px,
            transparent 90px 118px, rgba(85,0,0,0.24) 118px 119px, transparent 119px 180px,
            transparent 180px 205px, rgba(90,0,0,0.26) 205px 206px, transparent 206px 300px,
            transparent 300px 325px, rgba(75,0,0,0.25) 325px 326px, transparent 326px 420px,
            transparent 420px 445px, rgba(95,0,0,0.24) 445px 446px, transparent 446px 540px,
            transparent 540px 565px, rgba(88,0,0,0.26) 565px 566px, transparent 566px 700px
        );
    background-size: 620px 100%, 700px 100%;
    background-repeat:repeat;
    animation: horariosLinesMove 36s linear infinite;
    opacity:.42; mix-blend-mode:overlay; filter:contrast(1.05) saturate(.95);
}
/* Flashes esporádicos */
.horarios-iglesia-section::after {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 260px),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), rgba(0,0,0,0.55));
    background-size:520px 100%, 100% 100%;
    background-repeat:repeat, no-repeat;
    animation: horariosPulse 20s linear infinite, horariosFlash 16s linear infinite;
    opacity:0;
    mix-blend-mode:overlay;
}
@keyframes horariosLinesMove {
    0% { background-position:0 0, 0 0; }
    100% { background-position:-620px 0, 700px 0; }
}
@keyframes horariosPulse {
    0%,60%,100% { opacity:0; }
    61%,62% { opacity:.24; }
    66% { opacity:.10; }
    71% { opacity:0; }
    78% { opacity:.18; }
    80% { opacity:0; }
    88% { opacity:.15; }
    90% { opacity:0; }
}
@keyframes horariosFlash {
    0%, 40% { filter:brightness(1) saturate(.95); }
    46% { filter:brightness(1.08) saturate(1); }
    52% { filter:brightness(.96) saturate(.92); }
    58%,100% { filter:brightness(1) saturate(.95); }
}
@media (prefers-reduced-motion: reduce) {
    .horarios-iglesia-section::before { animation:none; background-position:0 0,0 0 !important; }
    .horarios-iglesia-section::after { animation:none; opacity:.12; }
}
.horarios-iglesia-content, .horarios-iglesia-texto, .horarios-iglesia-foto { position:relative; z-index:2; }
.horarios-iglesia-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 48px;
    max-width: 1100px;
    width: 100%;
    padding: 0 24px;
}
.horarios-iglesia-texto {
    flex: 2;
    min-width: 260px;
}
.horarios-iglesia-texto h2 {
    font-size: 2em;
    font-weight: 800;
    margin-bottom: 0.7em;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px #0002;
}
.horarios-iglesia-texto p {
    font-size: 1.15em;
    margin-bottom: 1.1em;
    color: #fff;
    line-height: 1.6;
}
.horarios-iglesia-foto {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.horarios-img-reflejo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.horarios-img-reflejo img {
    max-width: 400px;
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 8px 32px #0005;
    object-fit: cover;
    transform: rotate(-5deg);
    position: relative;
    z-index: 1;
    background: #fff;
}
.horarios-img-reflejo::after {
    content: "";
    display: block;
    position: absolute;
    left: 10%;
    right: 10%;
    top: 100%;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, #0003 0%, #fff0 100%);
    filter: blur(6px);
    opacity: 0.45;
    z-index: 0;
}

@media (max-width: 900px) {
    .horarios-iglesia-content {
        flex-direction: column;
        gap: 24px;
    }
    .horarios-iglesia-foto img {
        max-width: 90vw;
    }
}
.buscador-noticias-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 1.1em 0 1.5em 0;
}
#buscador-noticias {
    width: 100%;
    max-width: 420px;
    padding: 0.7em 1.1em;
    border-radius: 8px;
    border: 1.5px solid #80000044;
    font-size: 1.08em;
    box-shadow: 0 2px 10px #80000011;
    outline: none;
    transition: border 0.2s, box-shadow 0.2s;
}
#buscador-noticias:focus {
    border: 1.5px solid #800000;
    box-shadow: 0 4px 18px #80000022;
}
.noticias-flecha {
    text-align: center;
    margin: 0 0 0.1em 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    min-height: 38px;
}
.noticias-flecha svg {
    filter: drop-shadow(0 2px 6px #80000022);
    transition: transform 0.25s cubic-bezier(.4,2,.6,1);
}
.noticias-flecha svg:hover {
    transform: scale(1.13) translateY(2px);
    filter: drop-shadow(0 6px 16px #80000033);
}
.noticias-subtitulo {
    text-align: center;
    color: #800000;
    font-size: 1.35em;
    font-weight: 600;
    margin-top: 0.3em;
    margin-bottom: 0.1em;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 #fff8f8cc;
    width: 100%;
    display: block;
}
/* BOTONERA ACCESO RÁPIDO */
.acceso-rapido-section {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    padding: 32px 0 24px 0;
    margin: 0;
    position: relative;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* ===================== PANEL ADMIN ===================== */
/* ===================== LIGHTBOX GALERÍAS PATRIMONIO ===================== */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9998;padding:2rem 1rem}
.lightbox-overlay[aria-hidden="false"]{display:flex}
.lightbox-dialog{max-width:1000px;width:100%;max-height:90vh;display:flex;flex-direction:column;gap:.75rem;outline:none}
.lightbox-media-wrapper{position:relative;background:#111;border-radius:18px;padding:1rem;box-shadow:0 8px 40px #000c;display:flex;align-items:center;justify-content:center}
.lightbox-media-wrapper img{max-width:100%;max-height:70vh;width:auto;height:auto;border-radius:12px;object-fit:contain;box-shadow:0 4px 24px #0008}
.lightbox-caption{color:#eee;font-size:.8rem;line-height:1.35;font-weight:400;background:rgba(255,255,255,.06);padding:.6rem .8rem;border-radius:10px;backdrop-filter:blur(4px)}
.lightbox-close{position:absolute;top:8px;right:12px;background:transparent;border:none;color:#fff;font-size:2rem;cursor:pointer;line-height:1;font-weight:600;text-shadow:0 2px 8px #0009;transition:transform .2s,color .2s}
.lightbox-close:hover{color:#ffd7d7;transform:scale(1.1)}
.lightbox-counter{position:absolute;bottom:8px;right:12px;color:#fff;font-size:.65rem;letter-spacing:.5px;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:20px;font-weight:600}
.lightbox-nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);border:none;color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.35rem;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);transition:background .2s,transform .2s}
.lightbox-nav-btn:hover{background:rgba(0,0,0,.65);transform:translateY(-50%) scale(1.08)}
.lightbox-prev{left:16px}
.lightbox-next{right:16px}
@media (max-width:760px){
    .lightbox-media-wrapper{padding:.6rem}
    .lightbox-nav-btn{width:40px;height:40px;font-size:1.1rem}
    .lightbox-close{font-size:1.8rem}
    .lightbox-caption{font-size:.72rem}
}
.admin-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    background: linear-gradient(135deg,#faf7f7 0%, #f3eded 100%);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.admin-layout.prelogin {
    grid-template-columns: 1fr; /* oculta sidebar visualmente */
}
.admin-toggle-menu {
    position: fixed;
    top: 12px; left: 12px;
    z-index: 1200;
    background:#800000;
    color:#fff;
    border:none;
    padding:10px 14px;
    border-radius:10px;
    font-size:1.1em;
    cursor:pointer;
    box-shadow:0 4px 14px #80000033;
    transition:background .2s, transform .2s;
}
.admin-toggle-menu:hover { background:#a00000; transform:translateY(-2px); }

.admin-sidebar {
    display:flex;
    flex-direction:column;
    padding:28px 22px 24px 22px;
    background:radial-gradient(circle at 30% 20%, #7c0000, #4a0000 70%);
    color:#eee;
    gap:28px;
    position:relative;
    box-shadow: 4px 0 18px -6px #50000055;
    overflow-y:auto;
}
.admin-brand { display:flex; flex-direction:column; gap:10px; }
.admin-brand-logo { width:68px; height:auto; filter:grayscale(100%) brightness(1.2) contrast(1.05); mix-blend-mode:screen; }
.admin-brand-title { font-size:1em; line-height:1.3; margin:0; font-weight:600; letter-spacing:.5px; color:#fff; }

.admin-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.admin-nav-btn {
    width:100%;
    text-align:left;
    background:linear-gradient(135deg,#ffffff18,#ffffff05);
    color:#f4eaea;
    border:1px solid #ffffff22;
    padding:10px 14px 11px 14px;
    border-radius:10px;
    cursor:pointer;
    font-size:0.82rem;
    font-weight:500;
    letter-spacing:.5px;
    backdrop-filter:blur(4px);
    transition: border .25s, background .25s, transform .2s;
    position:relative;
    overflow:hidden;
}
.admin-nav-btn::before {
    content:""; position:absolute; inset:0; background:linear-gradient(145deg,#ffffff15,#ffffff03); opacity:0; transition:opacity .25s; }
.admin-nav-btn:hover::before { opacity:1; }
.admin-nav-btn:hover { border-color:#ffffff55; }
.admin-nav-btn.active {
    background:linear-gradient(135deg,#ffffff30,#ffffff10);
    border-color:#ffffff77;
    color:#fff;
    box-shadow:0 4px 14px -4px #00000066, 0 0 0 1px #ffffff55 inset;
}


.admin-meta { display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.admin-meta .stat-badges { display:flex; flex-wrap:wrap; gap:8px; }
.admin-stat-badge {
    background:#ffffff20;
    border:1px solid #ffffff25;
    padding:6px 10px 6px 10px;
    border-radius:8px;
    font-size:0.6rem;
    letter-spacing:.5px;
    color:#f6f2f2;
    backdrop-filter:blur(3px);
    display:flex; flex-direction:column; gap:2px;
    min-width:74px;
    position:relative;
}
.admin-stat-badge strong { font-size:0.85rem; color:#fff; font-weight:600; }
.admin-logout-btn {
    margin-top:16px;
    background:#ffb347;
    color:#4a0000;
    border:none;
    padding:10px 16px;
    border-radius:10px;
    font-weight:600;
    font-size:0.78rem;
    cursor:pointer;
    box-shadow:0 4px 12px -3px #00000055;
    transition:background .25s, transform .2s;
}
.admin-logout-btn:hover { background:#ffc36a; transform:translateY(-2px); }

/* Columnas / tarjetas */
.admin-columns { display:grid; gap:30px; padding:36px 38px 60px 38px; align-content:start; }
@media (max-width: 1100px) { .admin-columns { grid-template-columns: 1fr; padding:28px 22px 48px 22px; } .admin-layout { grid-template-columns: 220px 1fr; } }
@media (max-width: 780px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { position:fixed; top:0; left:0; bottom:0; transform:translateX(-100%); width:240px; z-index:1300; transition:transform .3s ease; }
    .admin-sidebar.visible { transform:translateX(0); }
    .admin-columns { padding:86px 18px 48px 18px; }
}
.admin-col { display:flex; flex-direction:column; gap:26px; }
.admin-card { background:#fff; border:1px solid #80000022; padding:20px 22px 22px 22px; border-radius:16px; box-shadow:0 4px 22px -6px #80000033; display:flex; flex-direction:column; gap:16px; position:relative; }
.admin-card h3, .admin-card h4 { margin:0 0 2px 0; font-weight:600; letter-spacing:.5px; color:#5a0a0a; }
.admin-card button { background:#800000; color:#fff; border:none; padding:8px 14px; border-radius:10px; cursor:pointer; font-size:0.75rem; font-weight:600; letter-spacing:.5px; transition:background .2s, transform .2s; }
.admin-card button:hover { background:#a00000; transform:translateY(-2px); }
.admin-card input, .admin-card textarea, .admin-card select { font:inherit; font-size:0.78rem; padding:8px 10px; border-radius:10px; border:1px solid #80000044; background:#fff; outline:none; transition:border .2s, box-shadow .2s; }
.admin-card input:focus, .admin-card textarea:focus, .admin-card select:focus { border-color:#800000; box-shadow:0 0 0 3px #80000022; }
.admin-card textarea { min-height:120px; resize:vertical; }
.admin-news-list .noticia { background:#fff; border:1px solid #80000022; padding:14px 16px 16px 16px; border-radius:14px; display:flex; flex-direction:column; gap:6px; position:relative; box-shadow:0 2px 12px -3px #80000022; }
.admin-news-thumb { width:100%; max-height:200px; object-fit:cover; border-radius:10px; box-shadow:0 4px 12px #80000022; }
.admin-news-actions { display:flex; gap:10px; margin-top:4px; }
.admin-news-actions button { flex:1; }

/* Formularios */
.admin-forms-filtros { display:flex; flex-wrap:wrap; gap:16px; font-size:0.75rem; }
.admin-forms-filtros label { display:flex; flex-direction:column; gap:4px; font-weight:500; }
.admin-forms-msg { font-size:0.65rem; margin-top:4px; }

/* Listado usuarios scroll */
#usuarios-lista::-webkit-scrollbar { width:8px; }
#usuarios-lista::-webkit-scrollbar-track { background:#f1e9e9; border-radius:6px; }
#usuarios-lista::-webkit-scrollbar-thumb { background:#b36f6f; border-radius:6px; }
#usuarios-lista::-webkit-scrollbar-thumb:hover { background:#944c4c; }

/* Scroll reutilizable admin */
.admin-scroll {
    display:flex;
    flex-direction:column;
    gap:6px;
    overflow:auto;
    border:1px solid #80000022;
    padding:6px;
    border-radius:10px;
    background:#faf9f9;
    scrollbar-width:thin;
    scrollbar-color:#b36f6f #f1e9e9;
}
.users-scroll { max-height:240px; }
.forms-scroll { max-height:460px; }
/* Nuevo: scroll para listado de noticias admin */
.news-scroll { max-height:520px; }
@media (max-width: 1100px) {
    .news-scroll { max-height:360px; }
}
@media (max-width: 700px) {
    .news-scroll { max-height:300px; }
}

.admin-scroll::-webkit-scrollbar { width:10px; }
.admin-scroll::-webkit-scrollbar-track { background:#f1e9e9; border-radius:10px; }
.admin-scroll::-webkit-scrollbar-thumb { background:#b36f6f; border-radius:10px; border:2px solid #f1e9e9; }
.admin-scroll::-webkit-scrollbar-thumb:hover { background:#944c4c; }

/* Stats badges reuso desde JS (clases) */
.admin-meta .admin-stat-badge.warning { background:#ffb34733; border-color:#ffb34777; color:#fff; }
.admin-meta .admin-stat-badge.ok { background:#4caf5033; border-color:#4caf5077; }
.admin-meta .admin-stat-badge.progress { background:#1976d233; border-color:#1976d277; }

/* Animaciones suaves */
.admin-card, .admin-nav-btn, .admin-stat-badge { animation: adminFade .4s ease; }
@keyframes adminFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* Ajustes tipográficos pequeños */
.admin-card small, .admin-card .hint { font-size:0.65rem; color:#555; }

/* =================== FIN PANEL ADMIN =================== */
.acceso-rapido-botones {
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
/* BOTONES ACCESO RÁPIDO COLOR CORPORATIVO */
.btn-acceso-rapido {
    display: inline-block;
    min-width: 220px;
    padding: 22px 38px;
    border-radius: 14px;
    background: #800000;
    color: #fff;
    border: 2px solid #80000022;
    font-size: 1.22em;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 18px #80000011;
    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 #fff8f8cc;
    text-decoration: none;
    text-align: center;
    margin: 0 0 0 0;
}
.btn-acceso-rapido:hover {
    background: #a00000;
    color: #fff8f8;
    transform: scale(1.06);
    box-shadow: 0 8px 32px #80000022;
}
@media (max-width: 900px) {
    .acceso-rapido-botones {
        flex-direction: column;
        gap: 18px;
    }
    .btn-acceso-rapido {
        min-width: 160px;
        width: 90vw;
        font-size: 1.08em;
        padding: 16px 0;
    }
}
.btn-historia {
    display: inline-block;
    margin-top: 28px;
    padding: 14px 38px;
    border-radius: 12px;
    background: linear-gradient(90deg, #fff8f8 60%, #ffe0e0 100%);
    color: #800000;
    border: none;
    font-size: 1.18em;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 18px #80000022;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 #fff8f8cc;
    text-decoration: none;
}
.btn-historia:hover {
    background: linear-gradient(90deg, #ffe0e0 60%, #fff8f8 100%);
    color: #a00000;
    transform: scale(1.06);
}
/* --- SECCIÓN DESCUBRE HISTORIA --- */
.descubre-historia-section {
    background: #800000;
    width: 100vw;
    margin: 0;
    padding: 48px 0 44px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    box-shadow: 0 8px 32px #80000022;
    z-index: 1;
}
.descubre-historia-section::before,
.descubre-historia-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
/* Capa de líneas diagonales animadas */
.descubre-historia-section::before {
    background:
        repeating-linear-gradient(135deg,
            rgba(60,0,0,0.28) 0px,
            rgba(60,0,0,0.28) 34px,
            rgba(110,0,0,0.10) 34px,
            rgba(110,0,0,0.10) 68px
        );
    mix-blend-mode: overlay;
    animation: historiaStripes 18s linear infinite;
    opacity: 0.45;
    filter: saturate(0.9) contrast(1.05);
}
/* Sutil viñeteado para profundidad */
.descubre-historia-section::after {
    background: radial-gradient(circle at 50% 50%, rgba(128,0,0,0) 0%, rgba(60,0,0,0.5) 100%);
    opacity: 0.55;
}
@keyframes historiaStripes {
    0% { background-position: 0 0; }
    100% { background-position: 800px 800px; }
}
/* Modo alto rendimiento: si la GPU no puede con ello, degradar (opcional) */
@media (prefers-reduced-motion: reduce) {
    .descubre-historia-section::before { animation: none; background-position: 0 0 !important; }
}
.descubre-historia-content { position: relative; z-index: 2; }

/* === Overrides avanzados fondo 'Descubre la historia' (líneas finas horizontales irregulares) === */
/* Se añaden al final para sustituir el patrón diagonal anterior */
.descubre-historia-section { background: linear-gradient(135deg,#7d0000 0%, #6a0000 60%, #730000 100%); }
.descubre-historia-section::before {
        /* Dos capas de líneas ultra finas con separaciones irregulares dentro de un “tile” ancho */
        background:
            linear-gradient(90deg,
                rgba(50,0,0,0.40) 0 1px, transparent 10px 40px,
                transparent 40px 60px, rgba(55,0,0,0.32) 60px 61px, transparent 61px 130px,
                transparent 130px 155px, rgba(45,0,0,0.38) 155px 156px, transparent 156px 210px,
                transparent 210px 230px, rgba(65,0,0,0.30) 230px 231px, transparent 231px 330px,
                transparent 330px 350px, rgba(60,0,0,0.34) 350px 351px, transparent 351px 460px,
                transparent 460px 485px, rgba(70,0,0,0.34) 485px 486px, transparent 486px 600px
            ),
            linear-gradient(90deg,
                rgba(80,0,0,0.28) 0 1px, transparent 10px 70px,
                transparent 70px 95px, rgba(85,0,0,0.26) 95px 96px, transparent 96px 140px,
                transparent 140px 165px, rgba(90,0,0,0.30) 165px 166px, transparent 166px 260px,
                transparent 260px 280px, rgba(75,0,0,0.30) 280px 281px, transparent 281px 390px,
                transparent 390px 410px, rgba(95,0,0,0.28) 410px 411px, transparent 411px 520px,
                transparent 520px 545px, rgba(88,0,0,0.30) 545px 546px, transparent 546px 680px
            );
        background-size: 600px 100%, 800px 100%;
        background-repeat: repeat;
        animation: historiaLinesMove 32s linear infinite;
        opacity:.43;
        mix-blend-mode: overlay;
        clip-path: inset(0 0 0 0 round 0); /* limpio */
        filter: contrast(1.05) saturate(0.95);
}
.descubre-historia-section::after {
        /* Líneas esporádicas pulsantes: se muestran pocas veces (pulse) */
        background:
            linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 240px),
            radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), rgba(0,0,0,0.55));
        background-size: 480px 100%, 100% 100%;
        background-repeat: repeat, no-repeat;
        animation: historiaPulse 18s linear infinite, historiaLinesFlash 14s linear infinite;
        mix-blend-mode: overlay;
        opacity:0; /* gestionado por las animaciones */
}
@keyframes historiaLinesMove {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: -600px 0, 800px 0; }
}
/* Apariciones irregulares (frame hold con porcentajes no uniformes) */
@keyframes historiaPulse {
    0%, 68%, 100% { opacity:0; }
    69%, 70% { opacity:.28; }
    74% { opacity:.12; }
    79% { opacity:0; }
    85% { opacity:.22; }
    87% { opacity:0; }
    93% { opacity:.18; }
    95% { opacity:0; }
}
/* Pequeña variación extra para que no sea perfectamente repetible */
@keyframes historiaLinesFlash {
    0%, 45% { filter: brightness(1) saturate(0.95); }
    50% { filter: brightness(1.08) saturate(1); }
    55% { filter: brightness(0.95) saturate(0.92); }
    60%, 100% { filter: brightness(1) saturate(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    .descubre-historia-section::before { animation: none; background-position:0 0,0 0 !important; }
    .descubre-historia-section::after { animation: none; opacity:0.15; }
}
.descubre-historia-content {
    text-align: center;
    color: #fff;
    max-width: 700px;
    padding: 0 18px;
}
.descubre-historia-content h2 {
    font-size: 2.3em;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: -1px;
    text-shadow: 0 2px 12px #40000088;
}
.descubre-historia-content p {
    font-size: 1.25em;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.2px;
    opacity: 0.93;
}
.noticia-blog-article {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 8px 32px #80000022;
    max-width: 900px;
    width: 100%;
    margin: 40px auto 0 auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 420px;
    overflow: hidden;
    position: relative;
}
.noticia-blog-img {
    width: 45%;
    min-width: 260px;
    max-width: 400px;
    height: auto;
    object-fit: cover;
    border-radius: 22px 0 0 22px;
    box-shadow: 0 2px 12px #80000022;
    display: block;
}
.noticia-blog-content {
    padding: 38px 38px 32px 38px;
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: #fff;
    min-width: 0;
}
.noticia-blog-title {
    color: #800000;
    font-size: 2.1em;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.1;
}
.noticia-blog-date {
    color: #888;
    margin-bottom: 18px;
    display: block;
    font-size: 1.1em;
}
.noticia-blog-texto {
    color: #333;
    font-size: 1.18em;
    margin-bottom: 0;
    line-height: 1.7;
    padding-bottom: 18px;
    width: 100%;
    word-break: break-word;
}
.noticia-blog-volver {
    margin-top: 18px;
    padding: 12px 32px;
    border-radius: 10px;
    background: #800000;
    color: #fff;
    border: none;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 12px #80000022;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.noticia-blog-volver:hover {
    background: #a00000;
    color: #fff8f8;
    transform: scale(1.04);
}
@media (max-width: 900px) {
    .noticia-blog-article {
        flex-direction: column;
        max-width: 98vw;
    }
    .noticia-blog-img {
        width: 100%;
        max-width: 100vw;
        border-radius: 22px 22px 0 0;
        min-width: 0;
    }
    .noticia-blog-content {
        width: 100%;
        padding: 28px 18px 24px 18px;
    }
}
.noticia-blog-individual {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 0 40px 0;
    background: linear-gradient(120deg, #fff8f8 60%, #f9f3f3 100%);
    min-height: 500px;
    animation: fadeInNewsModern 0.7s cubic-bezier(.4,0,.2,1) forwards;
}
.noticia-blog-article {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 8px 32px #80000022;
    max-width: 700px;
    width: 100%;
    margin: 40px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 32px 0;
}
.noticia-blog-img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 2px 12px #80000022;
}
.noticia-blog-content {
    padding: 32px 32px 0 32px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.noticia-blog-title {
    color: #800000;
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 10px;
}
.noticia-blog-date {
    color: #888;
    margin-bottom: 18px;
    display: block;
    font-size: 1.1em;
}
.noticia-blog-texto {
    color: #333;
    font-size: 1.18em;
    margin-bottom: 0;
    line-height: 1.7;
    padding-bottom: 18px;
    width: 100%;
    word-break: break-word;
}
.noticia-blog-volver {
    margin-top: 18px;
    padding: 12px 32px;
    border-radius: 10px;
    background: #800000;
    color: #fff;
    border: none;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 12px #80000022;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.noticia-blog-volver:hover {
    background: #a00000;
    color: #fff8f8;
    transform: scale(1.04);
}
/* --- NOTICIAS MODERNAS --- */
.noticias-modernas {
    background: linear-gradient(120deg, #fff8f8 60%, #f9f3f3 100%);
    border-radius: 0;
    box-shadow: 0 8px 32px #80000011;
    padding: 40px 0 32px 0;
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
}
.noticias-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    margin: 0 !important;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    box-shadow: none;
}
.noticias-header {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
    padding: 0 32px 18px 32px;
    flex-wrap: wrap;
}
.noticias-header h1 {
    font-size: 3em;
    color: #800000;
    font-weight: 800;
    margin: 0 auto 0 auto;
    text-align: center;
    width: 100%;
    display: block;
}
#buscador-noticias {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px solid #80000033;
    font-size: 1.1em;
    min-width: 220px;
    background: #fff;
    transition: border 0.2s;
}
#buscador-noticias:focus {
    border: 1.5px solid #800000;
    outline: none;
}
#admin-news-btn {
    background: #fff8f8;
    color: #800000;
    border: 2px solid #80000022;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 2em;
    font-weight: bold;
    box-shadow: 0 2px 12px #80000011;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    z-index: 2;
}
#admin-news-btn:hover {
    background: #800000;
    color: #fff;
    border: 2px solid #a00000;
    opacity: 1;
    transform: scale(1.08);
}
/* Grid horizontal de noticias: 4 grandes y espaciadas */
#news-horizontal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    padding: 0 3vw;
    margin-bottom: 40px;
    margin-top: 18px;
    width: 100vw;
    min-height: 380px;
    box-sizing: border-box;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    justify-items: stretch;
    align-items: stretch;
}
/* Tarjeta de noticia grande y espaciosa */
.news-card {
    min-width: 0;
    max-width: 100%;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 32px #80000018;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s, transform 0.3s, background 0.3s;
    animation: fadeInNewsModern 0.7s cubic-bezier(.4,0,.2,1) forwards;
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    min-height: 380px;
    position: relative;
}
.news-card:hover {
    box-shadow: 0 16px 48px #80000033;
    transform: translateY(-10px) scale(1.035);
    background: #fff0f0;
}
.news-card img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 2px 12px #80000022;
}
.news-card-content {
    padding: 32px 24px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.news-card h3 {
    color: #800000;
    font-size: 1.45em;
    margin-bottom: 12px;
    font-weight: 800;
}
.news-card small {
    color: #fff;
    background: rgba(128, 0, 0, 0.62);
    margin-bottom: 12px;
    display: inline-block;
    width: fit-content;
    font-size: 1.08em;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(128,0,0,0.15);
}
.news-card p {
    color: #333;
    font-size: 1.13em;
    margin-bottom: 0;
    flex: 1;
}
@media (max-width: 1200px) {
    #news-horizontal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}
@media (max-width: 700px) {
    #news-horizontal-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 8px;
    }
    .news-card-content {
        padding: 18px 10px 14px 10px;
    }
}
.news-modern-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
}
@media (max-width: 700px) {
    #news-masonry-grid {
        grid-template-columns: 1fr;
        padding: 0 8px;
    }
    .noticias-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0 8px 18px 8px;
    }
}
/* BOTONES ADMIN NOTICIAS */
.admin-news-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.admin-news-actions .btn-editar, .admin-news-actions .btn-borrar {
    padding: 6px 16px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 1em;
    transition: background 0.2s, color 0.2s;
}
.admin-news-actions .btn-editar {
    background: #f7e7e7;
    color: #800000;
    border: 1px solid #80000033;
}
.admin-news-actions .btn-editar:hover {
    background: #ffe0e0;
    color: #a00000;
}
.admin-news-actions .btn-borrar {
    background: #fff0f0;
    color: #a00000;
    border: 1px solid #a0000033;
}
.admin-news-actions .btn-borrar:hover {
    background: #ffcccc;
    color: #fff;
    border: 1px solid #a00000;
}
/* PAGINACIÓN Y ESTILO MODERNO DE NOTICIAS */
.news-paginacion-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 32px;
    position: relative;
}
.news-arrow {
    background: #fff;
    border: 2px solid #800000;
    color: #800000;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 2em;
    font-weight: bold;
    box-shadow: 0 2px 12px #80000022;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.news-arrow:hover {
    background: #800000;
    color: #fff;
    border: 2px solid #a00000;
    transform: scale(1.08);
}
#news-paginacion-indicadores {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
#news-paginacion-indicadores .indicador {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}
#news-paginacion-indicadores .indicador.activo {
    background: #800000;
    transform: scale(1.2);
}
#news-grid {
    transition: box-shadow 0.3s, transform 0.3s;
    box-shadow: 0 8px 32px rgba(128,0,0,0.10);
    border-radius: 18px;
    background: #fff;
    animation: fadeInNews 0.5s cubic-bezier(.4,0,.2,1);
}
@keyframes fadeInNews {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Animación de aparición moderna */
#noticia-destacada, .noticia-secundaria {
    transition: box-shadow 0.35s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1), background 0.3s;
    box-shadow: 0 4px 24px rgba(128,0,0,0.13);
    border-radius: 14px;
    background: #fff8f8;
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    animation: fadeInNewsModern 0.7s cubic-bezier(.4,0,.2,1) forwards;
}
.noticia-secundaria {
    box-shadow: 0 2px 12px #80000011;
    border-radius: 10px;
    background: #f9f3f3;
}
#noticia-destacada:hover, .noticia-secundaria:hover {
    box-shadow: 0 12px 36px #80000044;
    transform: translateY(-8px) scale(1.025);
    background: #fff0f0;
}
@keyframes fadeInNewsModern {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    60% { opacity: 1; transform: translateY(-8px) scale(1.01); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* GRID DE NOTICIAS EN PORTADA */
#news-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
    min-height: 420px;
}
#noticia-destacada {
    grid-row: 1 / span 2;
    grid-column: 1 / 2;
    background: #fff8f8;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(128,0,0,0.10);
    padding: 32px 28px 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 420px;
    border-left: 8px solid #800000;
    position: relative;
    overflow: hidden;
}
#noticia-destacada img {
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 18px;
    box-shadow: 0 2px 12px #80000022;
}
#noticia-destacada h3 {
    color: #800000;
    font-size: 2em;
    margin-bottom: 10px;
    font-weight: 800;
}
#noticia-destacada small {
    color: #888;
    margin-bottom: 10px;
    display: block;
}
#noticia-destacada p {
    color: #333;
    font-size: 1.15em;
    margin-bottom: 0;
}
#noticias-secundarias {
    grid-row: 1 / span 2;
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
}
.noticia-secundaria {
    background: #f9f3f3;
    border-radius: 10px;
    box-shadow: 0 2px 12px #80000011;
    padding: 18px 16px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 180px;
    border-left: 5px solid #800000;
    overflow: hidden;
}
.noticia-secundaria img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 1px 6px #80000022;
}
.noticia-secundaria h4 {
    color: #800000;
    font-size: 1.15em;
    margin-bottom: 6px;
    font-weight: 700;
}
.noticia-secundaria small {
    color: #888;
    margin-bottom: 6px;
    display: block;
}
.noticia-secundaria p {
    color: #333;
    font-size: 1em;
    margin-bottom: 0;
}
@media (max-width: 900px) {
    #news-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    #noticia-destacada, .noticia-secundaria {
        min-height: unset;
        padding: 18px 10px 12px 10px;
    }
    #noticias-secundarias {
        flex-direction: row;
        gap: 12px;
    }
    .noticia-secundaria {
        flex: 1;
    }
}
/* PANEL ADMIN */
.admin-panel {
    min-height: 100vh;
    background: linear-gradient(120deg, #fff8f8 60%, #f8f8ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.admin-panel-content {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 8px 40px rgba(128,0,0,0.13);
    padding: 48px 38px 38px 38px;
    min-width: 340px;
    max-width: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #80000022;
    position: relative;
}
.admin-panel-content h2 {
    color: #800000;
    font-size: 2em;
    font-weight: 800;
    margin-bottom: 18px;
    letter-spacing: 1px;
    text-align: center;
}
.admin-panel-content h3 {
    color: #a00000;
    font-size: 1.2em;
    font-weight: 700;
    margin: 18px 0 10px 0;
    text-align: left;
    width: 100%;
}
#admin-login-form label {
    font-weight: 600;
    color: #800000;
    margin-top: 10px;
}
#admin-login-form input {
    margin-bottom: 10px;
}
#admin-login-form button {
    width: 100%;
    font-size: 1.1em;
    padding: 10px 0;
    margin-top: 6px;
}
#admin-news-form label {
    font-weight: 600;
    color: #800000;
    margin-top: 10px;
}
#admin-news-form input, #admin-news-form textarea {
    margin-bottom: 10px;
}
#admin-news-form button {
    width: 100%;
    font-size: 1.1em;
    padding: 10px 0;
    margin-top: 6px;
}
#admin-news-success, #admin-news-error {
    margin-top: 8px;
    text-align: center;
    font-weight: 600;
}
#admin-logout {
    margin-top: 18px;
    width: 100%;
    background: #800000;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: 700;
    padding: 12px 0;
    box-shadow: 0 2px 8px rgba(128,0,0,0.08);
    cursor: pointer;
    transition: background 0.2s;
}
#admin-logout:hover {
    background: #a00000;
}
.admin-panel-content .noticia {
    border-left: 5px solid #800000;
    background: #f9f3f3;
    margin-bottom: 18px;
    padding: 12px 18px 8px 14px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(128,0,0,0.04);
}
.admin-panel-content .noticia h4 {
    margin: 0 0 6px 0;
    color: #800000;
}
.admin-panel-content .noticia small {
    color: #888;
}
/* ZONA PRIVADA */
.zona-privada {
    min-height: 100vh;
    background: linear-gradient(120deg, #f8f8ff 60%, #ffe5e5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.zona-privada-content {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 8px 40px rgba(128,0,0,0.13);
    padding: 48px 38px 38px 38px;
    min-width: 340px;
    max-width: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: modalIn 0.5s cubic-bezier(.4,0,.2,1);
    border: 2px solid #80000022;
    position: relative;
}
.zona-privada-content h2 {
    color: #800000;
    font-size: 2em;
    font-weight: 800;
    margin-bottom: 18px;
    letter-spacing: 1px;
    text-align: center;
}
#privado-nombre {
    color: #a00000;
    font-size: 1.15em;
    font-weight: 600;
    margin-bottom: 18px;
    text-align: center;
}
.zona-privada-content h4 {
    color: #444;
    font-size: 1.1em;
    margin: 10px 0 6px 0;
    font-weight: 600;
    text-align: left;
    width: 100%;
}
#privado-cuotas-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    width: 100%;
}
#privado-cuotas-list li {
    background: #f8f8ff;
    border-radius: 6px;
    margin-bottom: 6px;
    padding: 8px 14px;
    color: #800000;
    font-weight: 500;
    font-size: 1em;
    box-shadow: 0 1px 4px rgba(128,0,0,0.04);
    border-left: 4px solid #80000033;
}
.zona-privada-content hr {
    width: 100%;
    border: none;
    border-top: 1px solid #eee;
    margin: 18px 0 10px 0;
}
#privado-papeleta-sitio {
    width: 94%;
    margin-bottom: 10px;
    background: #f9f3f3;
    border-radius: 22px;
    padding: 14px 12px 10px 12px;
    box-shadow: 0 1px 6px rgba(128,0,0,0.04);
}
#privado-papeleta-sitio h4 {
    color: #800000;
    font-size: 1em;
    margin-bottom: 6px;
}
#privado-papeleta-form label {
    font-weight: 600;
    color: #800000;
    margin-top: 10px;
}
#privado-papeleta-form input {
    margin-bottom: 10px;
}
#privado-papeleta-form button {
    width: 100%;
    font-size: 1.1em;
    padding: 10px 0;
    margin-top: 6px;
}
#privado-papeleta-msg {
    margin-top: 8px;
    text-align: center;
    font-weight: 600;
}
#privado-cerrar {
    margin-top: 18px;
    width: 100%;
    background: #800000;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: 700;
    padding: 12px 0;
    box-shadow: 0 2px 8px rgba(128,0,0,0.08);
    cursor: pointer;
    transition: background 0.2s;
}
#privado-cerrar:hover {
    background: #a00000;
}
/* MODAL GENERAL */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: background 0.3s;
}
.modal-content {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    padding: 40px 32px 32px 32px;
    min-width: 320px;
    max-width: 95vw;
    width: 100%;
    max-width: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: modalIn 0.3s cubic-bezier(.4,0,.2,1);
}

/* Zona privada de hermanos */
#hermano-area {
    background: #f8f8ff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(128,0,0,0.10);
    padding: 28px 18px 18px 18px;
    margin-top: 18px;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: modalIn 0.4s cubic-bezier(.4,0,.2,1);
}
#hermano-area h3 {
    color: #800000;
    font-size: 1.3em;
    margin-bottom: 10px;
    font-weight: 700;
    text-align: center;
}
#hermano-area h4 {
    color: #444;
    font-size: 1.1em;
    margin: 10px 0 6px 0;
    font-weight: 600;
}
#hermano-area ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    width: 100%;
}
#hermano-area ul li {
    background: #fff;
    border-radius: 6px;
    margin-bottom: 6px;
    padding: 7px 12px;
    color: #800000;
    font-weight: 500;
    font-size: 1em;
    box-shadow: 0 1px 4px rgba(128,0,0,0.04);
}
#hermano-area hr {
    width: 100%;
    border: none;
    border-top: 1px solid #eee;
    margin: 16px 0 10px 0;
}
#hermano-area button {
    margin-top: 12px;
    width: 100%;
}
#hermano-area #papeleta-sitio {
    width: 100%;
    margin-bottom: 10px;
}
#hermano-area #papeleta-sitio h4 {
    color: #800000;
    font-size: 1em;
    margin-bottom: 6px;
}

@keyframes modalIn {
    from { transform: translateY(-40px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal .close {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 2em;
    color: #800000;
    cursor: pointer;
    font-weight: bold;
    background: none;
    border: none;
    z-index: 10;
    transition: color 0.2s;
}
.modal .close:hover {
    color: #a00000;
}
.modal h2 {
    margin-top: 0;
    color: #800000;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.5em;
    text-align: center;
}
.modal form label {
    font-weight: 600;
    color: #800000;
    margin-top: 10px;
}
.modal form input, .modal form button {
    margin-bottom: 14px;
}
.modal form button {
    width: 100%;
    font-size: 1.1em;
    padding: 10px 0;
}
.modal #login-error {
    margin-bottom: 10px;
    text-align: center;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
html, body {
    overflow-x: hidden;
}
.carrusel-hero {
    transition: opacity 1s cubic-bezier(.4,0,.2,1);
    opacity: 1;
}
.carrusel-hero.fade {
    opacity: 0;
}

/* HERO PORTADA */
.inicio-hero {
    background: #fafaff;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto 0 auto;
    box-shadow: none;
}
.hero-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    margin: 48px auto 0 auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 24px rgba(128,0,0,0.08);
    padding: 0 0 0 0;
    overflow: hidden;
}
.hero-texto {
    flex: 1;
    padding: 56px 40px 56px 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.hero-escudo {
    display: block;
    margin: 0 0 32px 0;
    max-width: 120px;
    width: 100%;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(128,0,0,0.10);
    border: 2px solid #800000;
    background: #fff;
}
.hero-texto h2 {
    color: #888;
    font-size: 1.1em;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    font-weight: 400;
    text-transform: uppercase;
}
.hero-subtitulo {
    margin-top: 6px;
    font-weight: 800;
    letter-spacing: 6px;
    color: #800000;
    background: linear-gradient(90deg, #800000, #a00000);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    align-self: left;
    text-align: left;
}
.hero-subtitulo::before,
.hero-subtitulo::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: #a00000;
    vertical-align: middle;
    margin: 0 10px;
    opacity: 0.6;
}
@media (max-width: 900px) {
    .hero-subtitulo { letter-spacing: 4px; font-weight: 800; }
}
@media (max-width: 600px) {
    .hero-subtitulo { letter-spacing: 3px; }
}
.hero-texto h1 {
    color: #800000;
    font-size: 2.6em;
    margin: 0 0 0 0;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
}
.hero-imagen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    min-height: 340px;
    min-width: 0;
}
.hero-imagen img {
    max-width: 420px;
    width: 100%;
    border-radius: 0 18px 18px 0;
    box-shadow: 0 2px 16px rgba(128,0,0,0.10);
    object-fit: cover;
}
@media (max-width: 900px) {
    .hero-content { flex-direction: column; padding: 0; }
    .hero-texto { padding: 36px 18px 18px 18px; align-items: center; text-align: center; }
    .hero-imagen img { border-radius: 0 0 18px 18px; }
}
.menu-right > li:last-child:hover > a {
    background: none !important;
    color: #800000 !important;
    cursor: pointer;
}
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    background: #f8f8f8;
    color: #222;
}
header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
        width: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
}
.area-hermanos {
    background: #800000;
    color: #fff;
    text-align: right;
    padding: 10px 32px;
    font-size: 1.1em;
    letter-spacing: 1px;
}
.area-hermanos a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}
.area-hermanos a:hover {
    color: #ffd700;
}
/* Icono de inicio junto a Área de Hermanos */
.area-hermanos { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.area-hermanos .home-link { display: inline-flex; align-items: center; justify-content: center; color: #fff; opacity: 0.95; transition: opacity .2s; }
.area-hermanos .home-link:hover { opacity: 1; }
.main-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
    background: #fff;
        width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 0;
}
.menu-left, .menu-right {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    gap: 80px;
}
.menu-left {
    flex: 1;
    justify-content: flex-end;
}
.menu-right {
    flex: 1;
    justify-content: flex-start;
}
.menu-left > li, .menu-right > li {
    position: relative;
    margin: 0 18px;
    font-size: 0.97em;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #800000;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    height: 56px;
}
.menu-left > li > a, .menu-right > li > a {
    color: #800000;
    text-decoration: none;
    padding: 8px 0;
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.menu-left > li:hover > a, .menu-right > li:hover > a {
    background: #e6d6d6;
    color: #a00000;
}
/* Eliminar puntos de lista en submenús */
.menu-left > li > ul, .menu-right > li > ul {
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    background: linear-gradient(135deg,#ffffff 0%,#fff8f8 55%,#ffecec 100%);
    border: 1px solid #e5d4d4;
    box-shadow: 0 8px 28px rgba(128,0,0,0.18), 0 2px 4px rgba(128,0,0,0.10);
    padding: 10px 0 12px 0;
    min-width: 240px;
    z-index: 1001;
    border-radius: 14px;
    overflow: hidden;
    transform: translateY(10px) scale(.94);
    transform-origin: top left;
    transition: opacity .24s ease, transform .32s cubic-bezier(.55,.1,.3,1);
}
/* Submenú visible al hover */
.menu-left > li:hover > ul, .menu-right > li:hover > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
/* Flecha decorativa (caret) */
.menu-left > li:hover > ul::before, .menu-right > li:hover > ul::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 18px;
    width: 16px; height: 16px;
    background: linear-gradient(135deg,#ffffff 0%,#fff8f8 55%,#ffecec 100%);
    border-left: 1px solid #e5d4d4;
    border-top: 1px solid #e5d4d4;
    transform: rotate(45deg);
    box-shadow: -2px -2px 4px rgba(128,0,0,0.04);
    z-index: -1;
}
.menu-left > li > ul > li, .menu-right > li > ul > li {
    padding: 11px 26px 11px 38px;
    position: relative;
    transition: background .22s, color .22s, padding .25s;
    font-weight: 500;
    color: #800000;
    border-left: 3px solid transparent;
    opacity: 0;
    transform: translateY(-6px);
    animation: desktopSubFade .38s cubic-bezier(.55,.1,.3,1) forwards;
}
.menu-left > li:hover > ul > li, .menu-right > li:hover > ul > li { animation: desktopSubFade .38s cubic-bezier(.55,.1,.3,1) forwards; }
.menu-left > li:hover > ul > li:nth-child(1), .menu-right > li:hover > ul > li:nth-child(1) { animation-delay:.02s; }
.menu-left > li:hover > ul > li:nth-child(2), .menu-right > li:hover > ul > li:nth-child(2) { animation-delay:.06s; }
.menu-left > li:hover > ul > li:nth-child(3), .menu-right > li:hover > ul > li:nth-child(3) { animation-delay:.10s; }
.menu-left > li:hover > ul > li:nth-child(4), .menu-right > li:hover > ul > li:nth-child(4) { animation-delay:.14s; }
@keyframes desktopSubFade { 0% { opacity:0; transform:translateY(-8px);} 60% { opacity:1; transform:translateY(2px);} 100% { opacity:1; transform:translateY(0);} }
.menu-left > li > ul > li a, .menu-right > li > ul > li a {
    color: #800000;
    text-decoration: none;
    display: block;
    transition: color 0.18s;
}
.menu-left > li > ul > li::before, .menu-right > li > ul > li::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 8px; height: 8px;
    background: radial-gradient(circle at 30% 30%, #b30000,#800000);
    border-radius: 50%;
    transform: translateY(-50%) scale(.4);
    opacity: 0;
    transition: transform .4s cubic-bezier(.55,.1,.3,1), opacity .25s;
}
.menu-left > li > ul > li:hover, .menu-right > li > ul > li:hover {
    background: #f9ecec;
    color: #a00000;
    padding-left: 44px;
    border-left: 3px solid #800000;
}
.menu-left > li > ul > li:hover::before, .menu-right > li > ul > li:hover::before { transform: translateY(-50%) scale(1); opacity:1; }
.menu-left > li > ul > li a, .menu-right > li > ul > li a { color: inherit; text-decoration:none; display:block; }
.escudo-center {
    flex: 0 0 auto;
    margin: 0 36px;
    align-items: flex-end;
    justify-content: center;
    min-width: 120px;
    position: relative;
    z-index: 10;
    height: 100px;
}
.escudo-center img {
    width: 140px;
    height: auto;
    max-width: none;
    position: relative;
    top: 18px;
    left: 0;
    transform: none;
    z-index: 20;
    background: none;
    border: none;
    box-shadow: none;
    pointer-events: none;
}
.escudo-center img {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(128,0,0,0.10);
    border: 2px solid #800000;
    padding: 6px;
}

/* --- MENÚ HAMBURGUESA (MÓVIL) --- */
.hamburger {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-right: 8px;
}
.hamburger span {
    display: block;
    width: 28px;
    height: 3px;
    margin: 5px 0;
    background: #800000;
    transition: transform .2s ease, opacity .2s ease;
}
.hamburger:focus-visible {
    outline: 3px solid #a00000;
    outline-offset: 4px;
    border-radius: 6px;
}
.main-menu.menu-open .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.main-menu.menu-open .hamburger span:nth-child(2) { opacity: 0; }
.main-menu.menu-open .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menu-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
/* Marca móvil (escudo + título) centrada en la barra superior del menú */
.mobile-brand {
    display: none;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #800000;
    font-weight: 800;
    font-size: 1.02em;
}
.mobile-brand img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #800000;
    box-shadow: 0 1px 4px #80000022;
}
/* En escritorio usar Grid para mantener el escudo siempre centrado */
@media (min-width: 901px) {
    .menu-panel {
        position: static;
        transform: none;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 0 24px;
        padding: 0;
        overflow: visible;
        box-shadow: none;
        border-radius: 0;
    }
        .escudo-center {
        margin: 0;
            justify-self: center;
        height: 100px;
            grid-column: 2;
    }
    .escudo-center img {
        position: static;
        top: 0;
        left: 0;
        transform: none;
    }
        .menu-left { justify-content: flex-end; grid-column: 1; width: auto; }
        .menu-right { justify-content: flex-start; grid-column: 3; width: auto; }
}

    /* Mostrar elementos solo en móvil */
    .solo-movil { display: none; }
    @media (max-width: 900px) {
        .solo-movil { display: list-item; }
    }
@media (max-width: 900px) {
    .hamburger { display: inline-block; }
    .main-menu { padding: 10px 14px; position: relative; z-index: 1100; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
    .mobile-brand { display: inline-flex; justify-self: center; }
    /* Overlay de fondo cuando el menú está abierto */
    .main-menu::after {
        content: "";
        position: fixed;
        inset: 0 0 0 0;
        background: rgba(0,0,0,0.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
        z-index: 900;
    }
    .main-menu.menu-open::after { opacity: 1; pointer-events: auto; }
    .menu-panel {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 78vw;
        max-width: 420px;
        padding: 80px 18px 34px 18px;
        background: #ffffff;
        transform: translateX(-105%);
        transition: transform .42s cubic-bezier(.7,0,.3,1);
        display: flex;
        flex-direction: column;
        gap: 18px;
        overflow-y: auto;
        z-index: 1000;
        box-shadow: 0 0 0 rgba(0,0,0,0), 0 6px 18px rgba(0,0,0,0.12);
        border-right: 3px solid #800000;
    }
    .main-menu.menu-open .menu-panel { transform: translateX(0); box-shadow: 0 0 0 rgba(0,0,0,0), 0 10px 34px rgba(0,0,0,0.25); }
    .main-menu.menu-open .hamburger span { background: #a00000; }
    .main-menu.menu-open .hamburger span:nth-child(1),
    .main-menu.menu-open .hamburger span:nth-child(3) { transition-delay: .05s; }
    body.no-scroll { overflow: hidden; }
    .menu-left, .menu-right { flex-direction: column; gap: 12px; }
    .menu-left > li, .menu-right > li {
        height: auto;
        background: #ffffff;
        border: 1px solid #e5d4d4;
        border-radius: 14px;
        padding: 15px 16px 15px 18px;
        box-shadow: 0 2px 8px #8000000f;
        position: relative;
        transition: background .25s, box-shadow .25s, transform .25s;
    }
    .menu-left > li:active, .menu-right > li:active { transform: scale(.97); }
    .menu-left > li:has(> ul), .menu-right > li:has(> ul) { background: linear-gradient(180deg,#fff,#fff8f8); }
    .menu-left > li + li, .menu-right > li + li { margin-top: 2px; }
    .escudo-center { order: -1; height: auto; margin: 0 auto 8px auto; }
    .escudo-center img { position: static; width: 110px; padding: 4px; }
    /* Submenú inline debajo de cada item (restaurado) */
    #mobile-submenu-zone { display:none !important; }
    .menu-left > li > ul, .menu-right > li > ul {
        position: static;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        margin: 8px 0 0 0;
        background:
            linear-gradient(135deg,#ffffff 0%,#fff7f7 50%,#ffecec 100%),
            radial-gradient(circle at 30% 15%,#ffffff88,#ffffff00 60%);
        border: 1px solid #e7cdcd;
        border-radius: 16px;
        box-shadow: 0 6px 18px #8000001f, 0 2px 4px #80000014 inset;
        transition: max-height .46s cubic-bezier(.6,.1,.3,1), opacity .25s ease-out, box-shadow .3s;
    }
    .menu-left > li.submenu-open > ul, .menu-right > li.submenu-open > ul { max-height: 560px; opacity: 1; box-shadow: 0 6px 20px #8000002a, 0 2px 4px #8000001c inset; }
    .menu-left > li > ul > li, .menu-right > li > ul > li {
        background: rgba(255,255,255,0.65);
        position: relative;
        padding: 12px 20px 12px 40px;
        animation: none;
        opacity: 0;
        transform: translateY(-6px);
        transition: background .30s, color .25s, padding .28s;
        font-size: .95em;
        backdrop-filter: blur(4px);
        letter-spacing: .3px;
    }
    .menu-left > li > ul > li:not(:last-child), .menu-right > li > ul > li:not(:last-child) { border-bottom: 1px solid #e9d6d6; }
    .menu-left > li > ul > li::before, .menu-right > li > ul > li::before { content:""; position:absolute; left:16px; top:50%; width:8px; height:8px; background: radial-gradient(circle at 30% 30%, #b30000, #800000); border-radius:50%; transform:translateY(-50%) scale(.4); opacity:0; transition: transform .35s cubic-bezier(.55,.1,.3,1), opacity .25s; }
    .menu-left > li.submenu-open > ul > li, .menu-right > li.submenu-open > ul > li { animation: submenuFadeInMobile .32s cubic-bezier(.55,.1,.3,1) forwards; }
    .menu-left > li.submenu-open > ul > li:nth-child(1), .menu-right > li.submenu-open > ul > li:nth-child(1) { animation-delay:.02s; }
    .menu-left > li.submenu-open > ul > li:nth-child(2), .menu-right > li.submenu-open > ul > li:nth-child(2) { animation-delay:.05s; }
    .menu-left > li.submenu-open > ul > li:nth-child(3), .menu-right > li.submenu-open > ul > li:nth-child(3) { animation-delay:.08s; }
    .menu-left > li.submenu-open > ul > li:nth-child(4), .menu-right > li.submenu-open > ul > li:nth-child(4) { animation-delay:.11s; }
    .menu-left > li > ul > li:hover, .menu-right > li > ul > li:hover { background: rgba(255,255,255,0.95); padding-left:44px; }
    .menu-left > li > ul > li:hover::before, .menu-right > li > ul > li:hover::before { transform:translateY(-50%) scale(1); opacity:1; }
    .menu-left > li.submenu-open > ul > li, .menu-right > li.submenu-open > ul > li { animation: submenuFadeInMobile .32s cubic-bezier(.55,.1,.3,1) forwards; }
    .menu-left > li.submenu-open > ul > li:nth-child(1), .menu-right > li.submenu-open > ul > li:nth-child(1) { animation-delay:.03s; }
    .menu-left > li.submenu-open > ul > li:nth-child(2), .menu-right > li.submenu-open > ul > li:nth-child(2) { animation-delay:.06s; }
    .menu-left > li.submenu-open > ul > li:nth-child(3), .menu-right > li.submenu-open > ul > li:nth-child(3) { animation-delay:.09s; }
    .menu-left > li.submenu-open > ul > li:nth-child(4), .menu-right > li.submenu-open > ul > li:nth-child(4) { animation-delay:.12s; }
    @keyframes submenuFadeInMobile { 0% { opacity:0; transform: translateY(-6px);} 60% { opacity:1; transform: translateY(2px);} 100% { opacity:1; transform: translateY(0);} }
    .menu-left > li.submenu-open, .menu-right > li.submenu-open { background: linear-gradient(180deg,#ffffff,#fff5f5); }
    .menu-left > li.submenu-open::before, .menu-right > li.submenu-open::before { content:""; position:absolute; left:0; top:10px; height: calc(100% - 20px); width:5px; background:linear-gradient(#800000,#b30000); border-radius:3px; animation: barraGrow .38s cubic-bezier(.55,.1,.3,1); }
    @keyframes barraGrow { from { transform: scaleY(0); transform-origin: top; } to { transform: scaleY(1); transform-origin: top; } }
    .has-submenu { padding-right:42px; }
    .has-submenu::after { content:""; position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(45deg); width:11px; height:11px; border-right:3px solid #800000; border-bottom:3px solid #800000; opacity:.9; transition: transform .26s cubic-bezier(.6,.1,.3,1), opacity .22s; pointer-events:none; }
    .submenu-open.has-submenu::after { transform:translateY(-50%) rotate(225deg); }
}
#noticias {
    max-width: 900px;
    margin: 48px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(128,0,0,0.10);
    padding: 40px 32px 32px 32px;
}
#noticias h2 {
    margin-top: 0;
    color: #800000;
    letter-spacing: 1px;
}
#news-list {
    margin-top: 28px;
}
.noticia {
    border-left: 5px solid #800000;
    background: #f9f3f3;
    margin-bottom: 24px;
    padding: 18px 24px 10px 18px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(128,0,0,0.04);
}
.noticia h4 {
    margin: 0 0 6px 0;
    color: #800000;
}
.noticia small {
    color: #888;
}
button, input[type="submit"] {
    background: #800000;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 1em;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}
button:hover, input[type="submit"]:hover {
    background: #a00000;
}
input, textarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 7px;
    font-size: 1em;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}
textarea {
    min-height: 70px;
    resize: vertical;
}
.inicio-hero {
    background: #fafaff;
    min-height: 60vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-shadow: none;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    z-index: 1;
}
.hero-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
    min-height: 650px;
    height: 650px;
}
/* El carrusel ocupa más espacio que el texto */
.hero-imagen {
    flex: 1.7;
    min-height: 650px;
    height: 650px;
    max-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 70vw;
    box-sizing: border-box;
    background: #f8f8f8;
    overflow: hidden;
}
.hero-texto {
    flex: 1;
    min-height: 650px;
    height: 650px;
    max-height: 650px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    max-width: 40vw;
    box-sizing: border-box;
    background: #fff;
    padding: 0 60px;
}
.hero-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    display: block;
    max-width: none;
    max-height: none;
}

/* Ajuste solo para señor1.jpg en el carrusel */
#carrusel-hero-img[src*="señor1.jpg"] {
    object-position: center 95%;
}
/* Ajuste para virgencapilla.jpg: desplazar encuadre hacia la derecha y un poco hacia abajo */
#carrusel-hero-img[src*="virgencapilla.jpg"] {
    object-position: 85% 15%; /* X=85% (derecha), Y=15% muestra más cuerpo y menos cabeza */
}

.hero-texto {
    background: #fff;
    padding: 0 60px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    max-width: 50vw;
    box-sizing: border-box;
}
.hero-texto h2 {
    color: #888;
    font-size: 1.1em;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    font-weight: 400;
    text-transform: uppercase;
}
.hero-texto h1 {
    color: #800000;
    font-size: 2.6em;
    margin: 0 0 0 0;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 1px;
}
@media (max-width: 900px) {
    .main-menu, .inicio-hero, .hero-content { width: 100vw !important; min-width: 0; }
    .hero-content { flex-direction: column; }
    .hero-texto, .hero-imagen { max-width: 100vw; }
    .hero-texto { padding: 36px 18px 18px 18px; align-items: center; text-align: center; }
    .hero-imagen img { border-radius: 0; }
}
#junta-de-gobierno {
    padding: 48px 24px 44px 24px;
    margin: 32px auto 32px auto;
    max-width: 900px;
    background: linear-gradient(120deg, #fff8f8 60%, #f9f3f3 100%);
    border-radius: 18px;
    box-shadow: 0 8px 32px #80000022;
    line-height: 1.7;
    color: #333;
    animation: fadeIn 0.5s ease-out forwards;
    position: relative;
    border: 1.5px solid #e6d6d6;
    overflow: hidden;
}

#junta-de-gobierno h2 {
    color: #800000;
    text-align: center;
    margin-bottom: 18px;
    font-weight: 900;
    line-height: 1.2;
    font-size: 2.3em;
    letter-spacing: -1px;
    background: linear-gradient(90deg, #fff8f8 60%, #ffe0e0 100%);
    border-radius: 12px 12px 0 0;
    padding: 18px 0 12px 0;
    box-shadow: 0 2px 12px #80000011;
    border-bottom: 2.5px solid #e6d6d6;
    position: relative;
}
#junta-de-gobierno h2::before {
    content: none;
}
#junta-de-gobierno h3 {
    color: #a00000;
    text-align: left;
    margin-top: 38px;
    margin-bottom: 18px;
    font-weight: 800;
    font-size: 1.35em;
    border-left: 5px solid #80000044;
    padding-left: 16px;
    letter-spacing: 0.2px;
    background: #fff8f8;
    border-radius: 8px;
    box-shadow: 0 1px 6px #80000011;
    display: flex;
    align-items: center;
    gap: 8px;
}
#junta-de-gobierno h3::before {
    content: '\1F464';
    font-size: 1.1em;
    margin-right: 6px;
    color: #800000;
    opacity: 0.7;
}

#junta-de-gobierno ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 30px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#junta-de-gobierno ul li {
    background: linear-gradient(90deg, #fff 80%, #ffe0e0 100%);
    padding: 15px 22px 15px 22px;
    margin-bottom: 0;
    border-left: 6px solid #800000;
    border-radius: 8px;
    box-shadow: 0 2px 8px #80000011;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: 1.13em;
    color: #5a2a2a;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    min-height: 48px;
}
#junta-de-gobierno ul li:hover {
    transform: translateX(7px) scale(1.03);
    box-shadow: 0 6px 16px #80000022;
    background: linear-gradient(90deg, #ffe0e0 60%, #fff8f8 100%);
}
#junta-de-gobierno ul li strong {
    color: #800000;
    font-weight: 700;
    margin-right: 7px;
    font-size: 1.08em;
    letter-spacing: 0.2px;
}
#junta-de-gobierno ul li::before {
    content: '\2022';
    color: #a00000;
    font-size: 1.5em;
    margin-right: 12px;
    opacity: 0.5;
    vertical-align: middle;
}
#junta-de-gobierno .decor-divider {
    width: 100%;
    height: 2.5px;
    background: linear-gradient(90deg, #800000 0%, #fff8f8 100%);
    border-radius: 2px;
    margin: 32px 0 24px 0;
    opacity: 0.18;
    box-shadow: 0 1px 6px #80000011;
}

/* --- ACCESIBILIDAD Y RESPONSIVE GLOBAL --- */
html {
    scroll-behavior: smooth;
}

body {
    font-size: 16px;
    line-height: 1.6;
    background: #fafaff;
    color: #222;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

main, header, footer, nav, section, article, aside {
    width: 100%;
    box-sizing: border-box;
}

/* Mejoras de contraste para accesibilidad */
a, button, input, textarea {
    outline-color: #800000;
    outline-width: 2px;
}

/* --- MEDIA QUERIES RESPONSIVE GLOBALES --- */
@media (max-width: 600px) {
    body {
        font-size: 15px;
    }
    header, footer, main, section, nav {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .main-menu ul, .main-menu {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .main-menu ul.menu-left, .main-menu ul.menu-right {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5em !important;
    }
    .escudo-center {
        display: none !important;
    }
    .hero-content {
        flex-direction: column !important;
        min-height: 500px !important; /* más alto en móviles */
        height: auto !important;
    }
    .hero-imagen, .hero-texto {
        min-height: 300px !important; /* cada bloque más alto para dar presencia */
        height: auto !important;
        max-width: 100vw !important;
    }
    .acceso-rapido-botones {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .btn-acceso-rapido {
        min-width: 120px !important;
        width: 98vw !important;
        font-size: 1em !important;
        padding: 12px 0 !important;
    }
    .footer-main {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 18px 4px 8px 4px !important;
    }
    .footer-info {
        align-items: center !important;
        text-align: center !important;
    }
    .footer-nombre, .footer-direccion {
        text-align: center !important;
    }
    .footer-escudo img {
        width: 50px !important;
    }
    .noticias-header h1 {
        font-size: 2em !important;
    }
    .noticia-blog-title {
        font-size: 1.3em !important;
    }
    .noticia-blog-content {
        padding: 12px 6px 0 6px !important;
    }
    .noticia-blog-img {
        max-height: 180px !important;
    }
}

@media (max-width: 400px) {
    .btn-acceso-rapido {
        font-size: 0.95em !important;
        padding: 8px 0 !important;
    }
    .footer-nombre {
        font-size: 0.95em !important;
    }
}

/* --- MODO COMPACTO EN MÓVIL: reducir tamaños globalmente --- */
/* Objetivo: que "todo se vea más pequeño" en pantallas pequeñas sin romper layout */
@media (max-width: 768px) {
    html { font-size: 15px; }
}

/* Noticias portada: modo compacto en escritorio */
@media (min-width: 901px) {
    /* Grid más denso y tarjetas más bajas */
    #news-horizontal-grid {
        gap: 24px;
        margin-bottom: 24px;
        min-height: 300px;
    }
    .news-card {
        min-height: 300px;
        border-radius: 14px;
    }
    .news-card img {
        max-height: 200px;
        border-radius: 14px 14px 0 0;
    }
    .news-card-content {
        padding: 16px 14px 12px 14px;
    }
    .news-card h3 {
        font-size: 1.25em;
        margin-bottom: 8px;
    }
    .news-card small {
        font-size: 0.95em;
        margin-bottom: 6px;
    }
    .news-card p {
        font-size: 1.02em;
    }
    .noticias-header h1 {
        font-size: 2.2em;
    }
}
@media (max-width: 600px) {
    /* Reducimos el tamaño base y ajustamos tipografías y espaciados comunes */
    html { font-size: 14px; }
    body { letter-spacing: 0; }

    /* Encabezados y texto general */
    h1 { font-size: clamp(1.6rem, 6vw, 2rem) !important; }
    h2 { font-size: clamp(1.3rem, 5.2vw, 1.6rem) !important; }
    h3 { font-size: clamp(1.1rem, 4.8vw, 1.3rem) !important; }
    h4 { font-size: clamp(1rem, 4.2vw, 1.15rem) !important; }
    p, li { font-size: 0.95rem; }

    /* Menú y navegación */
    .area-hermanos { font-size: 0.95em; padding: 8px 16px; }
    .menu-left > li, .menu-right > li { font-size: 0.95em; }
    .menu-left > li > ul > li, .menu-right > li > ul > li { font-size: 0.95em; }

    /* Hero, botones y llamadas a la acción */
    .hero-texto h1 { font-size: clamp(1.6rem, 7vw, 2rem) !important; }
    .hero-texto h2 { font-size: 0.95rem !important; letter-spacing: 1.5px; }
    .btn-acceso-rapido { font-size: 0.98em; padding: 12px 0; }
    .btn-historia { font-size: 1.05em; padding: 12px 28px; }

    /* Noticias: títulos, fechas y textos más compactos */
    .noticias-header h1 { font-size: 1.8em !important; }
    /* Override: hacer 'Últimas Noticias' más grande */
    .noticias-header h1 {
        font-size: 2.6em !important;
        letter-spacing: 0.5px;
        font-weight: 900;
    }
    .news-card h3 { font-size: 1.2em; }
    .news-card small { font-size: 0.95em; }
    .news-card p { font-size: 1em; }
    #buscador-noticias { font-size: 1em; padding: 8px 12px; }
    .news-arrow { width: 42px; height: 42px; font-size: 1.6em; }

    /* Sección horarios */
    .horarios-iglesia-texto h2 { font-size: 1.6em; }
    .horarios-iglesia-texto p { font-size: 1.02em; }

    /* Footer más pequeño */
    .footer-nombre { font-size: 1em; }
    .footer-direccion { font-size: 0.95em; }
    .icono-red-social { width: 28px; height: 28px; }
}
@media (max-width: 400px) {
    html { font-size: 13px; }
    .news-arrow { width: 38px; height: 38px; font-size: 1.4em; }
    .btn-acceso-rapido { font-size: 0.95em; padding: 10px 0; }
}

/* --- Desktop only: aumentar tamaño del carrusel de inicio --- */
@media (min-width: 1024px) {
    .hero-content { min-height: 565px; height: 565px; }
    .hero-imagen { min-height: 720px; height: 720px; max-height: 720px; }
    .hero-texto  { min-height: 720px; height: 720px; max-height: 720px; justify-content: flex-start; padding-top: 178px; padding-bottom: 0; }
}
@media (min-width: 1440px) {
    .hero-content { min-height: 670px; height: 670px; }
    .hero-imagen { min-height: 780px; height: 780px; max-height: 780px; }
    .hero-texto  { min-height: 650px; height: 650px; max-height: 650px; }
}
@media (min-width: 901px) {
    .escudo-center { transition: height .25s ease, margin .25s ease; }
    .escudo-center img { transition: width .25s ease, top .25s ease, padding .25s ease; }
    .main-menu.sticky .escudo-center { height: 70px; }
    .main-menu.sticky .escudo-center img { width: 90px; top: 0; padding: 4px; }
}

/* Utilidad accesible oculta visualmente */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ================== PANEL ADMIN NUEVO ================== */
.admin-layout {
    display: block; /* el sidebar fijo sale del flujo */
    min-height: 100vh;
    background: #f5f5f7;
    color: #222;
    font-family: system-ui, Arial, sans-serif;
    overflow-x: hidden; /* evita barra horizontal si algo sobresale */
}
/* Estado antes de login: ocultar sidebar y centrar login */
.admin-layout.prelogin .admin-sidebar { display: none; }
.admin-layout.prelogin .admin-main { margin-left:0; width:100%; display:flex; justify-content:center; align-items:flex-start; padding-top:120px; }
.admin-layout.prelogin #admin-login-wrapper { width:100%; max-width:420px; }
.admin-layout.prelogin #admin-toggle-menu { display:none !important; }
.admin-sidebar {
    background: linear-gradient(180deg,#4a0a0a,#2d0404 70%);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 22px 18px 18px 18px;
    gap: 26px;
    box-shadow: 4px 0 14px -4px #80000055;
    position: fixed; /* fijo siempre */
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
}
/* espacio para el sidebar fijo */
.admin-main { margin-left: 250px; width: calc(100% - 250px); box-sizing: border-box; }
.admin-brand { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.admin-brand-logo { width: 70px; height:auto; filter: drop-shadow(0 4px 10px #0006); }
.admin-brand-title { font-size:1.05rem; margin:0; letter-spacing:0.5px; font-weight:600; }
.admin-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.admin-nav-btn { width:100%; text-align:left; background:#ffffff10; color:#fff; border:1px solid #ffffff22; padding:10px 14px; border-radius:10px; font-size:0.9rem; cursor:pointer; backdrop-filter: blur(4px); transition:background .25s,border .25s,transform .25s; }
.admin-nav-btn:hover { background:#ffffff22; border-color:#ffffff55; transform:translateX(4px); }
.admin-nav-btn.active { background:#fff; color:#4a0a0a; font-weight:600; box-shadow:0 4px 14px #00000033; }
.admin-logout-btn { background:#b40000; border:none; color:#fff; padding:10px 16px; border-radius:10px; cursor:pointer; font-weight:600; letter-spacing:0.5px; box-shadow:0 4px 14px #0005; transition:background .25s,transform .25s; margin-top:12px; }
.admin-logout-btn:hover { background:#d20000; transform:translateY(-2px); }
.admin-main {  display:flex; flex-direction:column; gap:34px; }
.admin-login-wrapper { max-width: 420px; }
.admin-columns { display:grid; grid-template-columns: 1fr 430px; gap:34px; align-items:start; transition: grid-template-columns .35s ease; }
.admin-columns.single { grid-template-columns: 1fr; }
.admin-col { display:flex; flex-direction:column; gap:28px; }
.admin-card { background:#fff; border:1px solid #80000022; border-radius:16px; padding:22px 22px 26px 22px; box-shadow:0 4px 18px #80000018; display:flex; flex-direction:column; gap:0px; position:relative; }
.admin-card h3 { margin:0 0 4px 0; font-size:1.05rem; color:#4a0a0a; letter-spacing:0.5px; }
.admin-card form { display:flex; flex-direction:column; gap:0px; }
.admin-card input[type="text"],
.admin-card input[type="password"],
.admin-card input[type="file"],
.admin-card select,
.admin-card textarea { width:100%; padding:5px 5px; border:1.5px solid #80000033; border-radius:10px; font-size:0.9rem; outline:none; background:#fff; transition:border .25s, box-shadow .25s; font-family:inherit; }
.admin-card textarea { min-height:120px; resize:vertical; }
.admin-card input:focus,
.admin-card select:focus,
.admin-card textarea:focus { border-color:#800000; box-shadow:0 0 0 3px #80000022; }
.admin-card button[type="submit"],
#btn-recargar-formularios,
.admin-card button[data-accion="borrar"],
.admin-news-actions button { background:#4a0a0a; color:#fff; border:none; padding:10px 16px; border-radius:10px; font-size:0.85rem; cursor:pointer; letter-spacing:0.5px; font-weight:600; box-shadow:0 4px 14px #80000033; transition:background .25s, transform .25s; }
.admin-card button[type="submit"]:hover,
#btn-recargar-formularios:hover,
.admin-card button[data-accion="borrar"]:hover,
.admin-news-actions button:hover { background:#6d1010; transform:translateY(-2px); }
.admin-success { color:#1b7d38; font-size:0.8rem; }
.admin-error { color:#b00020; font-size:0.8rem; }
.admin-news-list { display:flex; flex-direction:column; gap:20px; }
.admin-news-list .noticia { background:#fff; border:1px solid #80000022; border-radius:14px; padding:16px 18px 18px 18px; box-shadow:0 2px 10px #80000011; display:flex; flex-direction:column; gap:8px; position:relative; }
.admin-news-list .noticia h4 { margin:0; font-size:1rem; letter-spacing:0.5px; color:#4a0a0a; }
.admin-news-actions { display:flex; gap:10px; flex-wrap:wrap; }
.admin-news-thumb { width:140px; max-width:100%; border-radius:10px; margin:0 0 6px 0; object-fit:cover; aspect-ratio:4/3; box-shadow:0 2px 10px #80000022; float:left; margin-right:14px; }
@media (max-width:600px){ .admin-news-thumb { width:110px; margin-right:10px; } }
.admin-forms-filtros { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; font-size:0.8rem; }
.admin-forms-filtros label { display:flex; flex-direction:column; gap:6px; font-weight:600; color:#4a0a0a; }
.admin-forms-filtros select { min-width:150px; }
.admin-forms-msg { flex:1; font-size:0.75rem; color:#555; }
.admin-forms-list { display:flex; flex-direction:column; gap:16px; }
.admin-forms-list > div { border:1px solid #80000022 !important; }
.admin-meta { font-size:0.65rem; line-height:1.3; opacity:0.8; }

/* Estados de tarjetas de formularios (badge) ya inline, pero podríamos reforzar */

/* Responsive ajustes */
@media (max-width: 1250px) {
    .admin-columns { grid-template-columns: 1fr 400px; }
}
@media (max-width: 1100px) {
    .admin-sidebar { width: 220px; }
    .admin-main { margin-left: 220px; width: calc(100% - 220px); }
    .admin-columns { grid-template-columns: 1fr; }
    .admin-col-forms { order: 2; }
}
@media (max-width: 780px) {
    /* En móvil convertimos de nuevo a panel lateral deslizable */
    .admin-sidebar { transform: translateX(-100%); width:240px; transition:transform .35s; }
    .admin-sidebar.visible { transform: translateX(0); }
    .admin-main { margin-left:0; width:100%; padding:80px 20px 70px 20px; }
    .admin-toggle-menu { position:fixed; top:14px; left:14px; z-index:10000; background:#4a0a0a; color:#fff; border:none; padding:10px 14px; border-radius:10px; box-shadow:0 4px 14px #0006; cursor:pointer; }
}

/* ===== Secretaría (Gestión de Usuarios) ===== */
.secretaria-wrapper { padding: 18px 20px 22px; background: linear-gradient(120deg,#ffffff,#faf9f9); border: 1px solid #80000022; box-shadow: 0 4px 10px -3px rgba(0,0,0,0.06); }
.secretaria-header { margin-bottom: 14px; }
.secretaria-title { margin:0; font-size: 1.15em; display:flex; align-items:center; gap:10px; letter-spacing: .5px; }
.secretaria-title .sub-pill { background:#800000; color:#fff; font-size:.55em; padding:4px 8px; border-radius:20px; font-weight:500; letter-spacing:1px; text-transform:uppercase; box-shadow:0 2px 4px -1px rgba(0,0,0,.25); }
.secretaria-desc { margin:4px 0 2px; font-size:.70em; color:#555; }
.secretaria-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:start; }
.secretaria-panel { background:#fff; border:1px solid #80000015; border-radius:14px; padding:14px 16px 16px; position:relative; display:flex; flex-direction:column; gap:12px; box-shadow:0 3px 8px -2px rgba(0,0,0,.05); }
.secretaria-panel h4 { margin:0; font-size:.85em; letter-spacing:.5px; font-weight:600; color:#800000; display:flex; align-items:center; gap:6px; }
.secretaria-panel h4::before { content:""; width:6px; height:6px; border-radius:50%; background:#800000; box-shadow:0 0 0 4px #80000022; }

/* Formularios dentro de Secretaría */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; align-items:end; }
.form-grid label { font-size:.63em; font-weight:600; text-transform:uppercase; letter-spacing:.5px; display:flex; flex-direction:column; gap:4px; }
.form-grid input { padding:6px 8px; border:1px solid #80000044; border-radius:6px; font-size:.7em; background:#fff; }
.form-grid input:focus { outline:2px solid #80000066; outline-offset:0; }
.fg-actions { grid-column:1/-1; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.form-msg { font-size:.7em; letter-spacing:.3px; color:#555; }

/* Buscar / gestionar */
.buscar-form { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.buscar-form label { display:flex; flex-direction:column; font-size:.63em; font-weight:600; text-transform:uppercase; gap:4px; }
.buscar-form input { padding:6px 8px; border:1px solid #80000044; border-radius:6px; font-size:.7em; }
.buscar-form input:focus { outline:2px solid #80000066; }

/* Panel detalle usuario */
.usuario-detalle { display:flex; flex-direction:column; gap:10px; background:linear-gradient(130deg,#fff,#fef6f6); border:1px solid #80000022; padding:12px 14px; border-radius:12px; box-shadow:0 2px 6px -2px rgba(0,0,0,.06); }
.usuario-info { font-size:1em; line-height:1.5; display:flex; flex-direction:column; gap:2px; }
.usuario-info .dni { font-weight:600; letter-spacing:.5px; font-size:1em; color:#800000; }
.usuario-info .nombre { font-size:1em; font-weight:600; }
.usuario-info .estado-pass { display:inline-flex; align-items:center; gap:4px; font-size:0.9em; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px 3px 6px; background:#800000; color:#fff; font-size:.55em; border-radius:40px; font-weight:500; letter-spacing:.5px; line-height:1; position:relative; }
.badge::after { content:""; position:absolute; inset:0; border-radius:40px; border:1px solid #fff3; pointer-events:none; }
.badge-legacy { background:#d97706; }
.badge-hash { background:#065f46; }
.badge-empty { background:#6b7280; }

/* Cuotas */
.cuotas-header { display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
.cuotas-header h5 { margin:0; font-size:1em; letter-spacing:.5px; font-weight:600; color:#333; }
.cuotas-lista { display:flex; flex-direction:column; gap:6px; }
.cuota-item { display:grid; grid-template-columns:80px 1fr auto; gap:8px; align-items:center; background:#fff; border:1px solid #8000001f; padding:6px 8px; border-radius:8px; box-shadow:0 1px 3px -1px rgba(0,0,0,.08); font-size:.62em; }
.cuota-item input[type="text"], .cuota-item input[type="number"] { padding:4px 6px; border:1px solid #80000033; border-radius:5px; font-size:1em; }
.cuota-item select { padding:4px 6px; border:1px solid #80000033; border-radius:5px; font-size:1em; background:#fff; }
.cuota-item button { font-size:1em; }
.cuota-item.removed { opacity:.45; text-decoration:line-through; }
.cuotas-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* Listado */
.listado-header { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.listado-header h4 { margin:0; font-size:.8em; letter-spacing:.5px; font-weight:600; color:#800000; }
.listado-tools { display:flex; gap:8px; flex:1; align-items:center; flex-wrap:wrap; }
.input-filter { flex:1; min-width:130px; padding:6px 8px; border:1px solid #80000033; border-radius:6px; font-size:.65em; background:#fff; }
.input-filter:focus { outline:2px solid #80000066; }
.contador-pill { background:#800000; color:#fff; padding:4px 9px; font-size:.55em; border-radius:30px; display:inline-flex; align-items:center; justify-content:center; font-weight:500; letter-spacing:.5px; box-shadow:0 2px 4px -2px rgba(0,0,0,.3); }

/* Botones reutilizables */
.btn-primary, .btn-secondary, .btn-chip { cursor:pointer; border:none; font-weight:600; letter-spacing:.5px; font-size:.6em; padding:8px 14px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; position:relative; }
.btn-primary { background:#800000; color:#fff; box-shadow:0 3px 8px -2px rgba(128,0,0,.5); }
.btn-primary:hover { background:#9a0f0f; }
.btn-secondary { background:#f2e5e5; color:#800000; border:1px solid #80000055; }
.btn-secondary:hover { background:#eadbdb; }
.btn-chip { background:#fff; color:#800000; border:1px dashed #80000066; font-size:.55em; padding:6px 10px; }
.btn-chip:hover { background:#fff5f5; }
.btn-secondary.small { padding:6px 10px; font-size:.55em; }

/* Responsive refinements */
@media (max-width:900px){
    .secretaria-grid { grid-template-columns:1fr; }
}
@media (max-width:520px){
    .form-grid { grid-template-columns:1fr 1fr; }
    .buscar-form { flex-direction:column; align-items:stretch; }
    .buscar-form button { align-self:flex-start; }
}

/* Filas listado usuarios */
.usuario-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:0.9em; padding:6px 8px; background:#fff; border:1px solid #80000022; border-radius:8px; box-shadow:0 1px 3px -1px rgba(0,0,0,.08); animation: adminFade .35s ease; }
.usuario-row .usuario-data { display:flex; flex-direction:column; gap:2px; max-width:70%; }
.usuario-row .dni { font-weight:600; color:#800000; letter-spacing:.5px; font-size:0.9em; }
.usuario-row .nombre { color:#333; font-size:0.9em; font-weight:500; }
.usuario-row .usuario-actions { display:flex; gap:6px; align-items:center; }
.usuario-row button { padding:4px 8px; font-size:0.9em; }

/* === Overrides solicitados: ancho completo para secciones admin === */
/* Convertimos el grid de admin-columns a una sola columna y hacemos que las tarjetas clave ocupen 100% */
.admin-columns { grid-template-columns: 1fr !important; }
.admin-col, .admin-col-news, .admin-col-agenda { width:100%; }
#admin-news-crear, 
#admin-news-list-wrapper,
#admin-agenda-crear,
#admin-agenda-list { width:100%; max-width:100%; }
/* Asegura que los contenedores internos de listas usan todo el ancho */
#admin-news-list, #agenda-listado { width:100%; }
/* Espaciado horizontal más amplio si se desea que “toque” casi los bordes */
.admin-main { padding-left: 0; padding-right: 0; }
/* Opcional: eliminar margen lateral dejado por sidebar en pantallas grandes si se busca ancho completo visual */
@media (min-width: 781px) {
    .admin-main { margin-left: 250px; width: calc(100% - 250px); }
}
/* En móvil ya es 100% */

/* === Override: reducir distancia vertical del submenú en escritorio === */
@media (min-width: 901px) {
    .menu-left > li > ul, .menu-right > li > ul {
        top: 100%; /* pegado completamente al elemento padre */
        transform: translateY(2px) scale(.985); /* transición más corta y casi sin reducción */
        padding-top: 6px; /* un poco menos para compactar */
        /* Efecto: estado inicial contraído usando clip-path y blur leve */
        opacity: 0;
        clip-path: inset(0 0 12% 0 round 14px);
        filter: drop-shadow(0 4px 8px rgba(128,0,0,0.10)) brightness(1) saturate(1);
        transition: opacity .28s ease, transform .32s cubic-bezier(.55,.1,.3,1), clip-path .40s cubic-bezier(.55,.1,.3,1);
    }
    /* Al hacer hover quitamos casi todo el desplazamiento para respuesta más inmediata */
    .menu-left > li:hover > ul, .menu-right > li:hover > ul {
        transform: translateY(0) scale(1);
        opacity:1;
        clip-path: inset(0 0 0 0 round 14px);
    }
    /* Ajuste de la flecha para alinearla más cerca */
    .menu-left > li:hover > ul::before, .menu-right > li:hover > ul::before {
        top: -7px; /* sube un poco para seguir tocando el borde */
    }
    /* Animación escalonada de los ítems dentro del submenú (solo escritorio) */
    .menu-left > li > ul > li, .menu-right > li > ul > li {
        opacity:0; transform:translateY(-4px); animation: submenuItemDesktop .42s cubic-bezier(.55,.1,.3,1) forwards; animation-play-state: paused;
    }
    .menu-left > li:hover > ul > li, .menu-right > li:hover > ul > li { animation-play-state: running; }
    .menu-left > li:hover > ul > li:nth-child(1), .menu-right > li:hover > ul > li:nth-child(1) { animation-delay:.04s; }
    .menu-left > li:hover > ul > li:nth-child(2), .menu-right > li:hover > ul > li:nth-child(2) { animation-delay:.08s; }
    .menu-left > li:hover > ul > li:nth-child(3), .menu-right > li:hover > ul > li:nth-child(3) { animation-delay:.12s; }
    .menu-left > li:hover > ul > li:nth-child(4), .menu-right > li:hover > ul > li:nth-child(4) { animation-delay:.16s; }
    .menu-left > li:hover > ul > li:nth-child(5), .menu-right > li:hover > ul > li:nth-child(5) { animation-delay:.20s; }
    .menu-left > li:hover > ul > li:nth-child(6), .menu-right > li:hover > ul > li:nth-child(6) { animation-delay:.24s; }
    @keyframes submenuItemDesktop { 0% { opacity:0; transform:translateY(-6px); } 60% { opacity:1; transform:translateY(2px); } 100% { opacity:1; transform:translateY(0); } }
}