/* AJUSTE DEL TAMAÑO DEL CARRUSEL (Más pequeño y estético) */
.main-carousel {
    width: 95%; /* No ocupa el 100% para que respire un poco en los lados */
    max-width: 900px; /* Evita que en pantallas muy grandes se haga gigante */
    margin: 0 auto 30px auto; /* Centrado y con margen abajo */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.swiper-slide img {
    width: 100%;
    height: 350px !important; /* Altura mucho más corta y elegante */
    object-fit: cover; /* Mantiene la proporción de la foto */
    display: block;
}

/* Ajuste para celulares (aún más bajito) */
@media (max-width: 768px) {
    .main-carousel {
        width: 100%;
    }
    .swiper-slide img {
        height: 180px !important; 
    }
}

/* --- TUS FLECHAS Y TÍTULO SE QUEDAN IGUAL QUE ANTES --- */
#titulo-consejos {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #003366 !important;
    margin-top: 40px !important;
    margin-bottom: 25px !important;
    padding-left: 20px;
    border-left: 6px solid #003366;
    line-height: 1.1;
    letter-spacing: -1px;
}

.swiper-button-next, .swiper-button-prev {
    /* Tus estilos de flechas glass que ya tienes... */
}
 /* Flechas Modernas Estilo "Glass" */
.swiper-button-next,
.swiper-button-prev {
    background: rgba(255, 255, 255, 0.3) !important; /* Fondo translúcido */
    backdrop-filter: blur(8px); /* Efecto borroso detrás de la flecha */
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    color: #003366 !important; /* Tu azul institucional */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.4);
}

/* Hacerlas más pequeñas y elegantes (el icono) */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px !important;
    font-weight: bold;
}

/* Efecto al pasar el mouse */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #003366 !important; /* Se vuelve azul */
    color: #ffffff !important; /* La flecha se vuelve blanca */
    transform: scale(1.1);
}

/* Moverlas un poco hacia afuera para que no tapen tanto la foto */
.swiper-button-prev { left: 20px !important; }
.swiper-button-next { right: 20px !important; }

/* Ocultarlas en móviles para que no estorben (el usuario usa el dedo) */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
}/* ============================================================
   FIX TOTAL: RESPETA PC (2 COLUMNAS) + AJUSTA MÓVIL (1 COLUMNA)
   ============================================================ */

/* 1. RESET GLOBAL (Sin afectar anchos de PC) */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. REGLAS EXCLUSIVAS PARA MÓVIL (Menos de 1024px) */
@media (max-width: 1023px) {
    /* Eliminamos el margen de la sidebar que empuja todo */
    .wrap {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 60px !important;
    }

    /* Forzamos a que el layout sea una sola columna */
    .layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding-inline: 15px !important;
    }

    /* Sidebar de Agenda se va abajo del contenido en móvil */
    .sidebar {
        width: 100% !important;
        position: static !important;
        order: 2; /* Aparece después del contenido principal */
    }

    /* El contenido principal toma todo el ancho */
    .main-col {
        width: 100% !important;
        order: 1;
    }

    /* El carrusel se ajusta al ancho del celular */
    .main-carousel {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        border-radius: 0 !important;
    }

    .swiper-slide img {
        height: 200px !important;
    }

    /* Títulos ajustados */
    h1, .hero-main-title, #titulo-consejos {
        font-size: 1.5rem !important;
        padding-left: 10px !important;
    }
}

/* 3. REGLAS EXCLUSIVAS PARA PC (1024px en adelante) */
/* Aquí restauramos tu "Imagen 2" */
@media (min-width: 1024px) {
    .layout {
        display: grid !important;
        /* Contenido a la izquierda (1fr), Sidebar a la derecha (340px) */
        grid-template-columns: 1fr 360px !important; 
        gap: 30px !important;
        max-width: 1350px !important;
        margin: 0 auto !important;
        padding-inline: 20px !important;
    }

    /* El carrusel recupera su tamaño elegante de la Imagen 2 */
    .main-carousel {
        width: 100% !important;
        max-width: 900px !important; /* El tamaño que te gustaba */
        margin: 0 0 30px 0 !important; /* Alineado a la izquierda */
        border-radius: 12px !important;
    }

    .swiper-slide img {
        height: 350px !important;
    }

    /* Aseguramos que el wrap no tenga márgenes raros que rompan el centrado */
    .wrap {
        width: 100% !important;
        margin-left: 0 !important; 
    }
    
    /* La sidebar lateral del Revisor (si existe) */
    .sidebar-nav {
        display: flex !important;
    }
}

/* 4. ANTI-DESBORDE (Para todos) */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}