/* ======================================================
   THEME VARIABLES
   ====================================================== */
:root {
    --mec-primary: #0d6efd; /* azul */
    --mec-primary-verde: #2e9e4f; /* verde */
    --mec-accent: #d4a73b; /* dorado */
    --radius: 1rem;
}

/* ======================================================
   GLOBAL UTILITIES
   ====================================================== */
.bg-gradient-primary {
    background: linear-gradient(135deg,var(--mec-primary),#0f6ea3);
}

.object-cover {
    object-fit: cover;
    display: block;
}

/* Skeleton loading */
.skeleton {
    position: relative;
    overflow: hidden;
}

    .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(0,0,0,.03),rgba(0,0,0,.08),rgba(0,0,0,.03));
        animation: shimmer 1.5s infinite;
    }

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ======================================================
   SANTORAL PANEL
   ====================================================== */
.santoral-panel {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
}

.santoral-bar {
    background: var(--mec-primary-verde);
    color: #fff;
    padding-block: .8rem;
}

    .santoral-bar .fecha {
        opacity: .9;
        font-weight: 600;
    }

.santoral-body {
    padding-top: 1rem;
    padding-bottom: 1.25rem;
}

.santoral-item img {
    object-fit: cover;
}

.santoral-item .santoral-title {
    margin-top: .5rem;
}

/* ======================================================
   VIDEOS PANEL
   ====================================================== */
.videos-panel {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
}

.videos-bar {
    background: var(--mec-primary, #0d6efd);
    color: #fff;
    padding-block: .8rem;
}

    .videos-bar .fecha {
        opacity: .9;
        font-weight: 600;
    }

.videos-body {
    padding-top: 1rem;
    padding-bottom: 1.25rem;
}

.video-card {
    border-color: rgba(0,0,0,.08) !important;
    background: #fff;
    transition: .15s;
}

    .video-card:hover {
        box-shadow: 0 10px 24px rgba(0,0,0,.08);
        transform: translateY(-1px);
    }

.video-thumb img {
    object-fit: cover;
    display: block;
}

/* ======================================================
   SEMILLEROS PANEL
   ====================================================== */
.semilleros-panel {
    background: #fff;
    border-radius: var(--radius,1rem);
    overflow: hidden;
}

.semilleros-bar {
    background: var(--mec-primary, #0d6efd);
    color: #fff;
    padding-block: .8rem;
}

.semilleros-body {
    padding-top: 1rem;
    padding-bottom: 1.25rem;
}

    .semilleros-body > .container,
    .semilleros-body > .container-xxl {
        padding: 0;
        margin: 0;
        max-width: 100%;
    }

/* ======================================================
   FIXES PARA ESPACIADO EN SANTORAL
   ====================================================== */

/* Resumen: aire bajo */
.santoral-desc {
    margin-bottom: .5rem;
}

/* Fecha: mostrar en su propia línea con margen inferior */
.santoral-item .text-muted.small {
    display: block;
    margin-bottom: .75rem;
}

/* Botón: empujado al fondo de la card */
.santoral-item a.btn {
    margin-top: auto;
}
/* Teléfonos como chips con logo de operador */
.tel-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .5rem;
}

.tel-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .95rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.06);
}

.tel-logo {
    width: 18px;
    height: 18px;
    display: inline-block;
}

/* Neutralizar utilidades que metían bordes/padding indebidos */
.section-franja,
.section-franja.mision,
.section-franja.espiritualidad,
.section-franja.semillero {
    border: none !important;
    padding-left: 0 !important;
}

/* También anulamos la variante con ::before si quedó por ahí */
.left-accent {
    position: static !important;
}

    .left-accent::before {
        content: none !important;
    }


/* Santoral – espaciar metadatos y botón */
.santoral-desc {
    margin-bottom: .5rem;
}

.santoral-item .text-muted.small {
    display: block;
    margin-bottom: .75rem;
}

.santoral-item a.btn {
    margin-top: auto;
}
/* botón siempre abajo */

/* Franja vertical para cards (no rompe el grid) */
.card-accent {
    border-left: 8px solid transparent;
    padding-left: 1rem; /* un poco de aire para que no se pegue el texto */
}

    /* Colores por sección (ajusta si quieres) */
    .card-accent.mision {
        border-left-color: #183892;
    }
    /* Azul logo MEC */
    .card-accent.espiritualidad {
        border-left-color: #198754;
    }
    /* Verde */
    .card-accent.vida {
        border-left-color: #dc3545;
    }
    /* Rojo */
    .card-accent.vision {
        border-left-color: #0aa2a9;
    }
    /* Turquesa */
    .card-accent.semillero {
        border-left-color: #0d6efd;
    }
/* Azul vivo */
    /* Variantes de color para semilleros */
    .card-accent.semillero-red {
        border-left-color: #dc3545;
    }
    /* Rojo */
    .card-accent.semillero-blue {
        border-left-color: #0d6efd;
    }
    /* Azul */
    .card-accent.semillero-green {
        border-left-color: #198754;
    }
    /* Verde */
    .card-accent.semillero-gold {
        border-left-color: #d4a73b;
    }
    /* Dorado */
    .card-accent.semillero-teal {
        border-left-color: #0aa2a9;
    }
/* Turquesa */
.card-line {
    position: relative;
}

.card-line-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    border-radius: var(--radius) 0 0 var(--radius);
}

.card.card-line {
    display: flex;
    flex-direction: column;
}

    .card.card-line .card-body {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
.home-top .col-12,
.home-top [class*="col-"] {
    display: flex;
}
/* columnas flex */
.home-top .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* cards llenan columna */
.object-cover {
    object-fit: cover;
    display: block;
}
/* asegurar imagen llena */


/* Tamaño normal en escritorio */
.logo-mec {
    max-width: 160px; /* o el valor que tengas ahora */
    height: auto;
}

/* Ajuste en pantallas pequeñas (ej: móviles) */
@media (max-width: 768px) {
    .logo-mec {
        max-width: 50%; /* aproximadamente 30% menos */
    }
}

@media (max-width: 480px) {
    .logo-mec {
        max-width: 40%; /* aún más pequeño en celulares muy pequeños */
    }
}