.videos-page{background:#f5f5f5;min-height:100vh;padding-top:90px}@media(max-width:1280px){.videos-page{padding-top:0}}.videos-page__filters-wrapper{background:#0a4952;padding:1rem 2rem;position:sticky;top:0;z-index:100}.videos-page__filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 auto;max-width:1400px}.videos-page__filter-btn{background:#ffffff26;border:1px solid hsla(0,0%,100%,.3);border-radius:50px;color:#ffffffe6;cursor:pointer;font-size:.85rem;font-weight:600;padding:.5rem 1.25rem;text-transform:capitalize;transition:all .3s}.videos-page__filter-btn:hover{background:#ffffff40;border-color:#ffffff80}.videos-page__filter-btn--active{background:#e9b02d;border-color:#e9b02d;color:#1a1a1a}.videos-page__filter-btn--active:hover{background:#f0c14b;border-color:#f0c14b}.videos-page__content{margin:0 auto;max-width:1400px;padding:2rem}.videos-page__loading{align-items:center;display:flex;flex-direction:column;gap:1rem;justify-content:center;padding:4rem}.spinner{animation:spin-51287479 1s linear infinite;border:4px solid rgba(41,20,120,.1);border-radius:50%;border-top-color:#0a4952;height:50px;width:50px}@keyframes spin-51287479{to{transform:rotate(1turn)}}.videos-page__loading p{color:#666;font-size:1rem}.videos-grid{display:grid;gap:2rem;grid-template-columns:repeat(3,1fr)}.pagination{flex-wrap:wrap;gap:.5rem;margin-top:3rem}.pagination,.pagination__btn{align-items:center;display:flex;justify-content:center}.pagination__btn{background:#fff;border:2px solid #e0e0e0;border-radius:10px;color:#333;cursor:pointer;font-size:.95rem;font-weight:600;height:44px;min-width:44px;padding:0 .75rem;transition:all .3s}.pagination__btn:hover:not(:disabled){border-color:#0a4952;color:#0a4952}.pagination__btn--active{background:#0a4952;border-color:#0a4952;color:#fff}.pagination__btn--active:hover{background:#3d1fa8;border-color:#3d1fa8;color:#fff}.pagination__btn--arrow{background:#f5f5f5}.pagination__btn--arrow:hover:not(:disabled){background:#0a4952;border-color:#0a4952;color:#fff}.pagination__btn:disabled{cursor:not-allowed;opacity:.4}.pagination__dots{color:#999;font-weight:600;padding:0 .5rem}.pagination__info{background:#f5f5f5;border-radius:8px;color:#666;font-size:.85rem;font-weight:600;margin-left:1rem;padding:.5rem 1rem}.video-card{background:#fff;border-radius:20px;box-shadow:0 4px 20px #00000014;cursor:pointer;overflow:hidden;transition:all .4s ease}.video-card:hover{box-shadow:0 15px 40px #00000026;transform:translateY(-8px)}.video-card__image{background:#111;height:220px;overflow:hidden;position:relative}.video-card__image img{height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s ease;width:100%}.video-card__image video{height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s ease;width:100%;display:block;background:#111}.video-card:hover .video-card__image img,.video-card:hover .video-card__image video{transform:scale(1.08)}.video-card__preview{height:100%;-o-object-fit:cover;object-fit:cover;pointer-events:none;transition:transform .5s ease;width:100%}.video-card:hover .video-card__preview{transform:scale(1.08)}.video-card__placeholder{align-items:center;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#ffffff4d;display:flex;height:100%;justify-content:center;width:100%}.video-card__placeholder svg{height:60px;width:60px}.video-card__categoria{background:#2e7d32;border-radius:4px;color:#fff;font-size:.75rem;font-weight:700;left:1rem;letter-spacing:.05em;padding:.4rem 1rem;position:absolute;text-transform:uppercase;top:1rem}.video-card__play-icon{left:50%;opacity:.85;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s}.video-card__play-icon svg{height:52px;width:52px}.video-card:hover .video-card__play-icon{opacity:1;transform:translate(-50%,-50%) scale(1.1)}.video-card__content{padding:1.5rem}.video-card__fecha{color:#999;display:block;font-size:.8rem;margin-bottom:.5rem}.video-card__titulo{color:#1a1a1a;font-size:1.1rem;font-weight:700;line-height:1.4;margin:0 0 .75rem}.video-card__descripcion{color:#666;font-size:.9rem;line-height:1.6;margin:0 0 1rem}.video-card__link{align-items:center;color:#0a4952;display:inline-flex;font-size:.9rem;font-weight:700;gap:.5rem;transition:color .3s}.video-card:hover .video-card__link{color:#0d5963}.videos-page__empty{align-items:center;color:#999;display:flex;flex-direction:column;justify-content:center;padding:4rem;text-align:center}.videos-page__empty svg{height:80px;margin-bottom:1rem;opacity:.5;width:80px}.videos-page__empty p{font-size:1.1rem;margin:0}.modal-overlay{align-items:center;background:#000c;display:flex;inset:0;justify-content:center;padding:2rem;position:fixed;z-index:10000}.modal{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:95vw;overflow:hidden;position:relative}.modal__close{align-items:center;background:#00000080;border:none;border-radius:50%;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:1rem;top:1rem;transition:background .3s;width:40px;z-index:10}.modal__close:hover{background:#000000b3}.modal__close svg{color:#fff;height:20px;width:20px}.modal__layout{display:grid;grid-template-columns:auto 1fr}.modal__left{align-items:center;background:#000;display:flex;justify-content:center;max-height:85vh;min-width:60vw}.modal__video{display:block;height:100%;max-height:85vh;width:100%}.modal__right{display:flex;flex-direction:column;max-height:85vh;max-width:500px;min-width:420px;overflow-y:auto}.modal__header{background:#0a4952;color:#fff;padding:1.5rem}.modal__category{background:#fff3;border-radius:20px;color:#fff;display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:1px;margin-bottom:.75rem;padding:.3rem .85rem;text-transform:uppercase}.modal__header h1,.modal__header h2{color:#fff;font-size:1.35rem;font-weight:700;line-height:1.3;margin:0}.modal__body{flex:1;overflow-y:auto;padding:1.5rem}.modal__body,.modal__info{display:flex;flex-direction:column}.modal__info{gap:1rem;margin-bottom:1.5rem}.modal__info-item{align-items:flex-start;display:flex;gap:.75rem}.modal__info-item svg{color:#0a4952;flex-shrink:0;height:20px;margin-top:2px;width:20px}.modal__info-item div{display:flex;flex-direction:column;gap:.15rem}.modal__info-item strong{color:#999;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase}.modal__info-item span{color:#333;font-size:.95rem;font-weight:500}.modal__description{flex:1;margin-bottom:1.5rem}.modal__description h3{color:#1a1a1a;font-size:1rem;font-weight:700;margin:0 0 .75rem}.modal__description p{color:#666;font-size:.9rem;line-height:1.7;margin:0;white-space:pre-line}.modal-enter-active,.modal-leave-active{transition:opacity .3s}.modal-enter-active .modal,.modal-leave-active .modal{transition:transform .3s}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal,.modal-leave-to .modal{transform:scale(.9)}@media(max-width:1024px){.videos-grid{grid-template-columns:repeat(2,1fr)}.modal__right{max-width:450px;min-width:380px}}@media(max-width:768px){.videos-page__filters-wrapper{padding:.75rem 1rem}.videos-page__filter-btn{font-size:.8rem;padding:.4rem 1rem}.videos-page__content{padding:1.5rem}.videos-grid{gap:1.5rem;grid-template-columns:1fr}.pagination{gap:.35rem;margin-top:2rem}.pagination__btn{font-size:.85rem;height:38px;min-width:38px}.pagination__info{margin-left:0;margin-top:1rem;text-align:center;width:100%}.modal-overlay{padding:.75rem}.modal{border-radius:20px 20px 0 0;max-height:90vh}.modal__layout{grid-template-columns:1fr;max-height:90vh}.modal__left{max-height:40vh;min-height:250px}.modal__video{max-height:40vh;max-width:100%}.modal__right{max-height:50vh;max-width:none;min-width:auto}.modal__close{background:#000000b3;height:36px;right:.75rem;top:.75rem;width:36px}.modal__close svg{height:18px;width:18px}.modal__header{padding:1.25rem}.modal__category{font-size:.65rem;padding:.25rem .75rem}.modal__header h1,.modal__header h2{font-size:1.15rem}.modal__body{padding:1.25rem}}

/* ──────────────────────────────────────────────────────────────────────────
   Ficha de un video: página propia, no ventana emergente.

   El sitio anterior abría los videos en un modal y por eso el estilo repartía
   el contenido en dos columnas, con el título en una franja lateral. Acá cada
   video tiene su dirección, así que se lee como una página: el video arriba a
   ancho completo y el texto debajo, en una medida cómoda de lectura.
   ────────────────────────────────────────────────────────────────────────── */
.video-ficha {
    background: #fff;
    border-radius: 20px;
    margin: 0 auto;
    max-width: 1000px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgb(0 0 0 / .08);
}

.video-ficha__media {
    aspect-ratio: 16 / 9;
    background: #111;
    width: 100%;
}

.video-ficha__video {
    display: block;
    height: 100%;
    width: 100%;
}

.video-ficha__cabecera {
    padding: 2rem 2rem 0;
}

.video-ficha__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
}

.video-ficha__categoria {
    border-radius: 999px;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .35rem .9rem;
    text-transform: uppercase;
}

.video-ficha__fecha {
    align-items: center;
    color: #4a5b5f;
    display: inline-flex;
    font-size: .95rem;
    gap: .5rem;
}

.video-ficha__fecha svg {
    height: 1.05rem;
    width: 1.05rem;
}

/* El título es el de una página: grande, pero no tanto como para partirse en
   diez líneas cuando el municipio escribe titulares largos en mayúsculas. */
.video-ficha__titulo {
    color: #0a4952;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.video-ficha__texto {
    color: #33454a;
    font-size: 1.05rem;
    line-height: 1.7;
    padding: 1.5rem 2rem 2.5rem;
}

.video-ficha__texto p {
    margin: 0 0 1.1rem;
}

.video-ficha__texto p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .video-ficha {
        border-radius: 14px;
    }

    .video-ficha__cabecera {
        padding: 1.25rem 1.25rem 0;
    }

    .video-ficha__titulo {
        font-size: 1.3rem;
    }

    .video-ficha__texto {
        font-size: 1rem;
        padding: 1rem 1.25rem 1.75rem;
    }
}