/**
 * responsive-curso-movil.css
 * Bloque adicional para móvil en plantilla_curso.php
 * Última modificación: 2026-03-11 10:00
 *
 * Las columnas izquierda y derecha están ocultas en móvil (d-none d-md-block).
 * Este archivo añade un bloque equivalente compacto, visible solo en móvil,
 * insertado dentro de la columna central.
 */

/* ================================================================
   BLOQUE MÓVIL — solo visible en < 768px
   ================================================================ */
.movil-lateral {
    display: none;
}
@media (max-width: 767px) {
    .movil-lateral {
        display: block;
        margin: 0 0 22px 0;
        font-family: "Montserrat", sans-serif;
    }

    /* --- PANEL VENTAJAS --- */
    .movil-ventajas {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 16px 18px;
        margin-bottom: 14px;
    }
    .movil-ventajas-titulo {
        font-size: 0.85rem;
        font-weight: 700;
        color: #1a365d;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid #e2e8f0;
    }
    .movil-ventajas ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .movil-ventajas ul li {
        font-size: 0.82rem;
        color: #374151;
        padding: 5px 0;
        display: flex;
        align-items: flex-start;
        gap: 7px;
        line-height: 1.4;
    }
    .movil-ventajas ul li::before {
        content: "✓";
        color: #38a169;
        font-weight: 700;
        font-size: 0.9rem;
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* --- BOTÓN CTA CONTACTO --- */
    .movil-cta {
        background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
        border-radius: 10px;
        padding: 18px 16px;
        text-align: center;
        margin-bottom: 14px;
    }
    .movil-cta a {
        display: block;
        width: 100%;
        padding: 14px 20px;
        background: #ffffff;
        text-decoration: none !important;
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        font-size: 1rem;
        border-radius: 6px;
        color: #1a365d !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transition: transform 0.2s ease;
    }
    .movil-cta a:hover {
        transform: translateY(-2px);
        text-decoration: none !important;
    }
    .movil-cta p {
        color: rgba(255,255,255,0.85);
        font-size: 0.75rem;
        margin: 10px 0 0;
    }

    /* --- ACORDEÓN CURSOS RELACIONADOS --- */
    .movil-relacionados {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 14px;
    }
    .movil-relacionados-toggle {
        width: 100%;
        background: #1a365d;
        color: #fff;
        border: none;
        padding: 13px 16px;
        text-align: left;
        font-family: "Montserrat", sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .movil-relacionados-toggle .icono {
        font-size: 1rem;
        transition: transform 0.25s ease;
    }
    .movil-relacionados-toggle.abierto .icono {
        transform: rotate(180deg);
    }
    .movil-relacionados-body {
        display: none;
        padding: 12px 16px;
        background: #fff;
    }
    .movil-relacionados-body.abierto {
        display: block;
    }
    .movil-relacionados-body a {
        display: block;
        padding: 7px 0;
        font-size: 0.82rem;
        color: #1a365d;
        text-decoration: none;
        border-bottom: 1px solid #f0f4f8;
    }
    .movil-relacionados-body a:last-child {
        border-bottom: none;
    }
    .movil-relacionados-body a:hover {
        color: #c05621;
    }

    /* --- DIPLOMA MUESTRA --- */
    .movil-diploma {
        margin-bottom: 14px;
    }
    .movil-diploma img {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 6px;
    }
}