/* ==================== COLORES ==================== */
:root{

--azul:#1C2E4A;
--rojo:#3A3A3A;
--dorado:#2b4c7e;
--blanco:#FFFFFF;
--gris-fondo:#F7F8FA;
--texto:#1A1A1A;

--font-general: clamp(13.5px, 1vw, 14px);
--espaciado-texto: 20px;
}

/* ==================== RESET ==================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

p, ul, li, th, td, b {
  font-size: var(--font-general);
}

body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background:var(--gris-fondo);
color:var(--texto);

}

h2{
font-size:clamp(18px, 1.8vw, 22px);

}

h3{
  font-size: clamp(15px, 1.4vw, 18px);
}

h4 {
  font-size: clamp(13px, 1.2vw, 16px);
}

h5 {
  font-size: clamp(12px, 1vw, 14px);
}
/* ==================== PRESENTACION ==================== */
.hero{
    background:linear-gradient(135deg, var(--azul), #163a5c);
    color:var(--blanco);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:25px 20px;
}

/* CONTENEDOR FLEX (CLAVE) */
.hero-content{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px; /* espacio entre logo y texto */
    flex-wrap:wrap; /* permite bajar en móvil */
    text-align:center;
}

/*LOGO MÁS PROPORCIONAL */
.logo{
    width:90px;
    height:auto;
}

/*TITULO MÁS EQUILIBRADO */
.hero h1{
    font-size:42px;
    letter-spacing:1.5px;
    margin:0;
}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){
    .hero-content{
        flex-direction:column;
        gap:10px;
    }

    .logo{
        width:70px;
    }

    .hero h1{
        font-size:30px;
    }
}

/*FIN DE PRESENTACION*/

/*INGRESANTESSSSSSSSS*/

/* ================= MATRICULA INGRESANTES ================= */

.matricula-box{
    max-width:1200px;
    margin:40px auto;
    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

/* HEADER */
.matricula-header{
    margin-bottom:20px; /* REDUCE separación superior */
}

.matricula-header h2{
    font-size:26px;
    color:var(--azul);
    margin-bottom:3px; /* MENOS ESPACIO */
}

.matricula-header p{
    font-size:14px;
    color:#555;
    margin:0;
}

/* ================= CONTENIDO ================= */

.matricula-contenido{
    display:grid;
    grid-template-columns:2fr 1fr; /* dejamos como al inicio */
    gap:30px;
}

/* ================= PASOS ================= */

.matricula-pasos{
    position:relative;

    /* CONTROL PRINCIPAL DE ALTURA */
    padding-top:2px;
    padding-bottom:2px;

    /* SI QUIERES MÁS COMPACTO: reduce padding */
}

/* PASO */
.paso{
    display:flex;
    align-items:center;
    gap:12px; /* MENOS SEPARACIÓN */
    
    /* CONTROL DIRECTO DE ALTURA ENTRE PASOS */
    margin-bottom:10px; /* AJUSTA AQUÍ (antes 15px) */
}

/* ICONO */
.paso-icono{
    width:40px;   /* ligeramente más compacto */
    height:40px;
    border-radius:50%;
    background:var(--azul-activo);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:16px;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* TEXTO */
.paso-texto h3{
    font-size:15px; /* ligeramente más compacto */
    margin:0;
    line-height:1.3; /* CONTROL DE ALTURA DEL TEXTO */
}

/* LÍNEA */
.paso-linea{
    height:20px; /* REDUCE ALTURA DE CONEXIÓN */
    width:3px;
    background:linear-gradient(var(--azul-activo), transparent);
    margin-left:19px;
}

/* ALERTA */
.matricula-alerta{
    margin-top:15px; /* MENOS ESPACIO */
    padding:12px 15px;
    border-radius:10px;
    background:rgba(255,193,7,0.12);
    border-left:5px solid #ffc107;
    font-size:13px;
    line-height:1.4;
}

/* ================= ACCIONES ================= */

.matricula-acciones{
    display:flex;
    flex-direction:column;
    gap:12px; /* MÁS COMPACTO */
    justify-content:center;
}

/* MENSAJE ROJO */
.matricula-info{
    background:#ffe5e5;
    color:#b30000;
    padding:10px 12px;
    border-radius:10px;
    font-size:12.5px;
    line-height:1.3;
    border-left:4px solid #ff4d4d;
}

/* BOTONES */
.btn-matricula{
    background:var(--azul);
    color:white;
    padding:12px; /* MENOS ALTURA */
    border-radius:12px;
    text-align:center;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn-matricula:hover{
    background:var(--azul-activo);
    transform:translateY(-2px);
}

.btn-descuento{
    background:var(--verde);
    color:white;
    padding:12px; /* MENOS ALTURA */
    border-radius:12px;
    text-align:center;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn-descuento:hover{
    background:var(--verde-activo);
    transform:translateY(-2px);
}

/* ================= RESPONSIVE ================= */

@media (max-width:768px){

.matricula-contenido{
    grid-template-columns:1fr;
}

.paso{
    align-items:flex-start;
}

}

/*FIN INGRESANTESSSSSSSSS*/

/*  ROWWWWWWWWWWWWWWWWW*/




/* ================== CONTENEDOR ================== */
.contenedor{
    display:grid;
    grid-template-columns: 1.2fr 0.9fr 1fr;
    gap:28px;
    padding:35px 20px;
    max-width:1200px;
    margin:auto;
}

/* ==================== COLUMNAS ==================== */
.columna{
    background:#ffffff;
    padding:22px 20px;
    border-radius:14px;
    box-shadow:0 8px 22px rgba(0,0,0,0.05);
    transition:.25s ease;
    border:1px solid #eef2f6;
}

.columna:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(0,0,0,0.08);
}

/* TITULOS */
.columna h2{
    font-size:17px;
    font-weight:700;
    color:var(--azul);
    margin-bottom:16px;
    padding-bottom:8px;

    /* limpio, sin amarillo */
    border-bottom:2px solid var(--azul);
}

/* ==================== TABLAS ==================== */

table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:18px;
    border-radius:10px;
    overflow:hidden;
}

/* ENCABEZADO */
th{
    text-align:left;
    font-size:12.8px;
    font-weight:600;
    color:#fff;
    background:var(--azul);
    padding:11px 10px;
}

/* FILAS */
td{
    padding:10px 9px;
    font-size:13.2px;
    border-bottom:1px solid #eef2f6;
}

/* HOVER */
tr:hover td{
    background:#f6f9fc;
}

/* TABLA DESTACADA */
.tabla-pequena th{
    background:var(--verde-activo);
}

/* NOTA */
.nota{
    font-size:12.3px;
    color:#666;
    margin-top:-6px;
}

/* ================== BOTONES INFO ================== */

.botones{
    display:flex;
    flex-direction:column;
}

.grupo-botones{
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* ================= BOTONES PRINCIPALES ================= */

.btn{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    border-radius:10px;
    background:#f4f7fb;
    color:var(--azul);
    text-decoration:none;
    font-size:13.5px;
    font-weight:600;
    border:1px solid #e2e8f0;
    transition:all .2s ease;
    position:relative;
}

/* detalle elegante SIN amarillo */
.btn::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:100%;
    background:var(--azul-activo);
    border-radius:10px 0 0 10px;
}

/* HOVER */
.btn:hover{
    background:var(--azul);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(13,43,69,0.2);
}

/* CLICK */
.btn:active{
    transform:scale(0.97);
}

/* ================== BLOQUES DERECHA ================== */

.bloque{
    margin-bottom:22px;
}

/* ================= BOTONES PLATAFORMA ================= */

.btn-secundario{
    display:block;
    text-align:center;
    padding:11px;
    border-radius:9px;
    background:#eef3f8;
    color:var(--azul);
    text-decoration:none;
    font-size:13px;
    margin-bottom:8px;
    border:1px solid #dce5ef;
    transition:.2s ease;
}

.btn-secundario:hover{
    background:var(--azul);
    color:#fff;
    border-color:var(--azul);
}

/* ================= BOTONES DOCUMENTOS ================= */

.btn-documento{
    display:block;
    padding:10px;
    border-radius:9px;
    background:#f9fbfd;
    border:1px solid #e4ebf3;
    color:#2c3e50;
    text-decoration:none;
    font-size:12.8px;
    margin-bottom:7px;
    transition:.2s ease;
}

/* hover limpio institucional */
.btn-documento:hover{
    background:#eef4fb;
    border-color:var(--azul);
    color:var(--azul);
}

/* ================= RESPONSIVE ================= */

@media (max-width:992px){
    .contenedor{
        grid-template-columns:1fr;
        gap:20px;
    }
}









/* AQUI TERMINA ROWWWW*/

/* ================= CONTACTO INSTITUCIONAL ================= */

.contacto-institucional{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:14px;
padding:20px;
box-shadow:0 8px 22px rgba(0,0,0,0.05);
}

/* TEXTO INTRO */
.contacto-intro{
font-size:13.5px;
color:#4b5563;
margin-bottom:14px;
}

/* CONTENEDOR TIPO TABLA MODERNA */
.contacto-tabla{
display:flex;
flex-direction:column;
border-radius:10px;
overflow:hidden;
border:1px solid #e5e7eb;
}

/* FILAS */
.contacto-fila{
display:grid;
grid-template-columns:2fr 1fr 1.2fr 1.8fr;
gap:10px;
padding:12px 14px;
font-size:13px;
border-top:1px solid #edf1f5;
background:#ffffff;
}

/* CABECERA */
.contacto-head{
background:#1C2E4A;
color:#ffffff;
font-weight:600;
border-top:none;
font-size:12px;
text-transform:uppercase;
letter-spacing:0.5px;
}


/* PROGRAMAS */
.programas{
font-size:12.5px;
line-height:1.4;
color:#374151;
}

/* SEPARADOR (ÁREA MATRÍCULA) */
.contacto-separador{
background:#f4f6f9;
padding:10px 14px;
font-size:12px;
font-weight:700;
color:#b77900;
text-transform:uppercase;
letter-spacing:0.5px;
border-top:1px solid #e5e7eb;
}

/* HORARIO */
.contacto-fila span{
font-size:11.5px;
color:#6b7280;
}

/* CORREOS */
.contacto-fila div:last-child{
color:#1C2E4A;
font-weight:600;
word-break:break-word;
}


/* ================= RESPONSIVE ================= */

/* TABLET */
@media (max-width:900px){
.contacto-fila{
grid-template-columns:1fr 1fr;
}

.contacto-head{
display:none;
}

.contacto-fila div{
font-size:13px;
}
}

/* MOBILE */
@media (max-width:600px){
.contacto-fila{
grid-template-columns:1fr;
}

.contacto-fila{
gap:4px;
}

.contacto-fila div{
position:relative;
padding-left:0;
}

}






/* ==================== BLOQUES LATERALES ==================== */
.bloque{
margin-bottom:25px;
}

.bloque h4{
margin-top:15px;
margin-bottom:8px;
color:var(--azul);
}

/* ==================== BOTONES PLATAFORMAS ==================== */
.btn-secundario{
display:block;
background:#d4a94f; /* dorado suave elegante */
color:#ffffff; /* texto oscuro para equilibrio */
padding:12px 14px;
margin-bottom:10px;
border-radius:8px;
text-align:center;
cursor:pointer;
font-size:clamp(13.5px, 1.25vw, 14px);
text-decoration:none;
transition:all 0.2s ease;
}

/* hover sobrio */
.btn-secundario:hover{
background: var(--azul); /* un poco más profundo */
}

/* ==================== DOCUMENTOS ==================== */

.btn-documento{
display:block;
background:#ffffff;
padding:12px 14px;
border-radius:8px;
margin-bottom:10px;
text-decoration:none;
color:var(--texto);
font-size:clamp(13.5px, 1.25vw, 14px);
font-weight:500;

border:1px solid #e6ecf2;
border-left:4px solid var(--dorado);

box-shadow:0 2px 6px rgba(0,0,0,0.04);
transition:all 0.2s ease;
}

/* hover elegante */
.btn-documento:hover{
background:#d4a94f;
color:#ffffff;
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,0.08);

border-left:4px solid var(--azul);
}

/* clic */
.btn-documento:active{
transform:scale(0.98);
box-shadow:0 3px 8px rgba(0,0,0,0.12);
}




/* ==================== SECCIONES DESTINO ==================== */
.seccion{
max-width:1200px;
margin:60px auto;
background:var(--blanco);
padding:50px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

.seccion h2{
color:var(--azul);
border-left:6px solid var(--dorado);
padding-left:15px;
}

/* RESPONSIVE */

@media (max-width:1024px){

.tabla-grid-2{
grid-template-columns:1fr;
}

.tabla-grid-3{
grid-template-columns:1fr;
}

}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1100px){

.contenedor{
grid-template-columns:1fr;
}

.grupo-botones{
grid-template-columns:1fr 1fr;
}

}

@media (max-width:600px){

.grupo-botones{
grid-template-columns:1fr;
}

}

/* ==================== REQUISITOS ==================== */

.intro{
margin-top:20px;
margin-bottom:35px;
line-height:1.7;
color:#2f3f56;
background:#f4f7fb;
padding:16px 18px;
border-radius:8px;
border-left:4px solid var(--azul);
}


.requisito-bloque{
background:#ffffff;
border:1px solid #e6ecf2;
padding:22px 26px;
margin-bottom:32px;
border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,0.05);
position:relative;
}

.requisito-bloque::before{
content:"";
position:absolute;
left:0;
top:0;
width:4px;
height:100%;
background:linear-gradient(180deg,var(--dorado),var(--azul));
border-radius:10px 0 0 10px;
}

.requisito-bloque h3{
color:var(--azul);
margin-bottom:12px;
font-weight:700;
}

.requisito-bloque p{
line-height:1.7;
margin-bottom:12px;
color:#444;
}


.tipo-pago{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-bottom:35px;
}


.tarjeta-pago{
background:#f9fbff;
padding:22px;
border-radius:10px;
border:1px solid #e6ecf2;
box-shadow:0 6px 16px rgba(0,0,0,0.05);
transition:0.25s;
position:relative;
}

.tarjeta-pago::top{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,var(--dorado),var(--azul));
border-radius:10px 10px 0 0;
}

.tarjeta-pago:hover{
transform:translateY(-5px);
box-shadow:0 12px 26px rgba(0,0,0,0.08);
}

.tarjeta-pago h4{
color:var(--azul);
margin-bottom:10px;
font-weight:700;
}

.tarjeta-pago h5{
margin-top:15px;
margin-bottom:10px;
color:#2f3f56;
font-weight:600;
}

.tarjeta-pago ul{
padding-left:18px;
}

.tarjeta-pago li{
margin-bottom:7px;
line-height:1.5;
color:#444;
}


.tarjeta-pago ul ul{
margin-top:6px;
padding-left:16px;
}


.requisito-bloque a{
text-decoration:none;
font-weight:600;
border-radius:6px;
padding:4px 8px;
transition:0.2s;
}


.requisito-bloque a[href$=".pdf"]{
background:#eef4ff;
color:var(--azul);
border:1px solid #dbe6ff;
}

.requisito-bloque a[href$=".pdf"]:hover{
background:var(--azul);
color:#fff;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}


.requisito-bloque a[href^="mailto"]{
background:#fff7e6;
color:#b77900;
border:1px solid #ffe0a3;
}

.requisito-bloque a[href^="mailto"]:hover{
background:#b77900;
color:#fff;
}


.requisito-bloque:last-child{
background:#fffaf3;
border:1px solid #ffe0a3;
}

.requisito-bloque:last-child h3{
color:#b77900;
}

.pdf{
display:inline-block;
margin-left:6px;
padding:3px 8px;
font-size:12px;
font-weight:600;
color:#b91c1c;
background:#fee2e2;
border:1px solid #fecaca;
border-radius:6px;
letter-spacing:0.2px;
}

/* ================= FIN DE REQUISITOS================= */
/* ==================== PROCEDIMIENTOS ==================== */

/* 🔒 AISLAMIENTO TOTAL DEL COMPONENTE */
#procedimientos .procedimientos-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
    margin-top:30px;
}

/* 🔒 IMPORTANTE: ahora .paso SOLO aplica dentro de procedimientos */
#procedimientos .paso{
    display:block; /* FIX CLAVE: elimina el flex que rompió todo */
    background:linear-gradient(145deg,#ffffff,#f3f6fb);
    padding:25px;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(0,0,0,0.05);
    position:relative;
    transition:0.3s;
    border-top:4px solid var(--azul);
}

#procedimientos .paso:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

/* NÚMERO */
#procedimientos .numero{
    position:absolute;
    top:-18px;
    left:20px;
    background:var(--azul);
    color:white;
    font-weight:bold;
    padding:8px 14px;
    border-radius:6px;
    font-size:clamp(13.5px, 1.25vw, 14px);
    letter-spacing:1px;
}

/* TÍTULO */
#procedimientos .paso h3{
    margin-top:15px; /* pequeño ajuste visual */
    margin-bottom:10px;
    color:var(--azul);
}

/* LISTA */
#procedimientos .paso ul{
    margin-top:10px;
    padding-left:18px;
}

#procedimientos .paso li{
    margin-bottom:6px;
}

/* NOTA */
#procedimientos .nota-procedimiento{
    margin-top:12px;
    padding:10px;
    background:#eef3fa;
    border-left:4px solid var(--dorado);
    font-size:clamp(13.5px, 1.25vw, 14px);
    border-radius:6px;
}

/* ALERTA */
#procedimientos .alerta{
    margin-top:12px;
    background:#fff4e5;
    border-left:4px solid #e67e22;
    padding:12px;
    border-radius:6px;
    font-size:clamp(13.5px, 1.25vw, 14px);
}

/* PASO DESTACADO */
#procedimientos .advertencia{
    border-top:4px solid #e67e22;
}
/* ================= FIN DE PROCEDIMIENTO ================= */
/* ================= CUADRO DE PAGOS ================= */

.programa{
margin-bottom:50px;
}

.titulo-programa{
margin:25px 0 20px;
color:#fff;
background:linear-gradient(135deg,#1e2a38,#2f3f56);
padding:12px 18px;
border-radius:8px;
font-weight:700;
letter-spacing:0.5px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.promo-card{
background:#fff;
border-radius:12px;
padding:25px;
margin-bottom:30px;
box-shadow:0 6px 20px rgba(0,0,0,0.06);
border:1px solid #e9edf3;
position:relative;
overflow:hidden;
}

.promo-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:linear-gradient(90deg,var(--dorado),#1e2a38);
}


.promo-titulo{
margin-bottom:20px;
font-weight:700;
color:#1e2a38;
background:#fff7e6;
padding:10px 16px;
border-left:6px solid #f59e0b;
border-radius:6px;
display:inline-block;
box-shadow:0 4px 12px rgba(0,0,0,0.06);
}

.tabla-pagos table{
width:100%;
border-collapse:collapse;
margin-bottom:25px;
}

.tabla-pagos th{
background:linear-gradient(135deg,#1e2a38,#2e3f54);
color:#fff;
padding:12px;
text-align:left;
font-weight:600;
}

.tabla-pagos td{
padding:12px;
border-bottom:1px solid #eee;
}

.tabla-pagos tr:hover{
background:#f7f9fc;
}

.niveles{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:22px;
}

.nivel-card{
background:#f8fafc;
padding:20px;
border-radius:10px;
border:1px solid #e6ecf2;
transition:0.3s;
position:relative;
}

.nivel-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 22px rgba(0,0,0,0.08);
}

.nivel-card h5{
margin-bottom:10px;
font-weight:700;
color:#1e2a38;
}

.nivel-card h6{
color:#777;
font-weight:500;
margin-bottom:10px;
}

.nivel-card ul{
padding-left:0;
list-style:none;
}

.nivel-card li{
margin-bottom:7px;
line-height:1.4;
}

.total_global{
background:#fff7e6;
border:1px solid #ffe0a3;
padding:10px;
border-radius:6px;
font-weight:700;
color:#b77900;
list-style:none;
}

.armadas{
margin-left:18px;
color:#2f3f56;
font-weight:600;
position:relative;
}

.armadas::before{
content:"↳";
position:absolute;
left:-15px;
color:var(--dorado);
}

.descuento{
margin-top:10px;
padding:10px 12px;
border-radius:6px;
background:#ffffff;
border:1px solid #dbe6f3;
border-left:4px solid var(--dorado);
color:#1e2a38;
font-weight:600;
}

.descuento strong{
color:#0f172a;
}

.badge{
display:inline-block;
background:#ab8b2b;
color:#fff;
padding:2px 8px;
border-radius:4px;
font-size:12px;
margin-left:5px;
}

/*******************ASIGNATURAS PROGRAMADAS*********************************/
.programa{
margin-bottom:55px;
}

.titulo-programa{
margin:35px 0 25px;
color:#fff;
background:linear-gradient(135deg,#1e2a38,#2f3f56);
padding:14px 20px;
border-radius:10px;
font-weight:700;
letter-spacing:0.6px;
box-shadow:0 6px 18px rgba(0,0,0,0.12);
}


/* TARJETA DE MENCION */

.mencion{
margin-bottom:35px;
background:#fff;
padding:25px;
border-radius:12px;
border:1px solid #e6ecf2;
box-shadow:0 6px 18px rgba(0,0,0,0.06);
position:relative;
}



.titulo-mencion{
font-weight:700;
color:#1e2a38;
margin-bottom:20px;
padding:10px 16px;
display:inline-block;
background:#f1f5fb;
border-left:6px solid;
border-image:linear-gradient(180deg,#f59e0b,#3b82f6) 1;
border-radius:6px;
}


/* GRID */

.tabla-grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
}

.tabla-grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}


/* TARJETA TABLA */

.tabla-card{
background:#f9fbfd;
border-radius:10px;
padding:18px;
border:1px solid #e6ecf2;
transition:0.3s;
position:relative;
}

.tabla-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 22px rgba(0,0,0,0.08);
}


/* CICLO / PROMOCIÓN DESTACADO */

.tabla-card h5{
margin-bottom:12px;
font-weight:700;
color:#1e2a38;
background:linear-gradient(135deg,#eef2f7,#f8fafc);
padding:8px 12px;
border-radius:6px;
border-left:4px solid var(--dorado);
display:inline-block;
}


/* TABLAS */

.tabla-card table{
width:100%;
border-collapse:collapse;
}

.tabla-card td{
padding:9px 6px;
border-bottom:1px solid #eef2f6;
vertical-align:middle;
}

.tabla-card tr:hover{
background:#f1f5fb;
}


/* CRÉDITOS DESTACADOS */

.tabla-card td:last-child{
text-align:right;
font-weight:700;
color:#b77900;
background:#fff7e6;
padding:4px 8px;
border-radius:6px;
display:inline-block;
min-width:45px;
text-align:center;
}


/* RESPONSIVE */

@media (max-width:1024px){

.tabla-grid-2{
grid-template-columns:1fr;
}

.tabla-grid-3{
grid-template-columns:1fr;
}

}

@media (max-width:768px){

.mencion{
padding:20px;
}

.titulo-mencion{
font-size:14px;
}

.tabla-card h5{
font-size:14px;
}

.tabla-card td{
font-size:13px;
}

}

/*HORAROI*/

/* ================= HORARIO ================= */

/* ================= TARJETA ================= */
.horario-card{
    background:#fff;
    padding:28px;
    border-radius:12px;
    border:1px solid #e5eaf0;
    margin-bottom:25px;
    transition:.25s;
}

.horario-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* ================= TITULO CARD ================= */
.horario-card h3{
    font-size:18px;
    font-weight:700;
    margin-bottom:12px;
    color:var(--texto);
}

/* ================= SUBTITULO ================= */
.horario-subtitulo{
    display:inline-block;
    background:#1e2a38;
    color:#fff;
    padding:5px 12px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    margin-bottom:15px;
}

/* ================= TURNOS ================= */
.horario-turno{
    font-size:14px;
    font-weight:600;
    margin:18px 0 8px;
    color:var(--texto);
}

/* ================= TABLA ================= */
.tabla-horario{
    overflow-x:auto;
}

.tabla-horario table{
    width:100%;
    border-collapse:collapse;
    border:1px solid #e6eaf0;
    border-radius:8px;
    overflow:hidden;
}

/* HEAD */
.tabla-horario th{
    background:#1e2a38;
    color:#fff;
    padding:11px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.4px;
    font-weight:600;
}

/* CELDAS */
.tabla-horario td{
    padding:12px;
    font-size:13px;
    color:var(--gris-texto);
    border-bottom:1px solid #edf1f5;
    vertical-align:top;
}

/* PRIMERA COLUMNA (HORAS) */
.tabla-horario td:first-child{
    font-weight:600;
    color:var(--texto);
    background:#f4f7fb;
}

/* FILAS */
.tabla-horario tr:nth-child(even){
    background:#fafbfd;
}

.tabla-horario tr:hover{
    background:#eef3f8;
}

/* ================= BLOQUES AULA ================= */
.tabla-horario td[colspan="4"]{
    text-align:center;
    font-weight:600;
    font-size:13px;
}

/* INGRESANTES */
.ingresantes td[colspan="4"]{
    background:#e8f1fb;
    color:var(--azul-activo);
}

/* REGULARES */
.regulares td[colspan="4"]{
    background:#e7f5ef;
    color:var(--verde-activo);
}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){

    .tabla-horario table,
    .tabla-horario thead,
    .tabla-horario tbody,
    .tabla-horario th,
    .tabla-horario td,
    .tabla-horario tr{
        display:block;
        width:100%;
    }

    .tabla-horario thead{
        display:none;
    }

    .tabla-horario tr{
        border:1px solid #e5eaf0;
        border-radius:10px;
        padding:12px;
        margin-bottom:12px;
    }

    .tabla-horario td{
        border:none;
        padding:6px 0;
        font-size:13px;
    }

    .tabla-horario td:first-child{
        background:#fff3e0;
        color:#b77900;
        padding:6px 10px;
        border-radius:6px;
        display:inline-block;
        margin-bottom:6px;
    }
}
/* ================= FIN HORARIO ================= */



/* ================= BENEFICIOS ================= */
/* ================= CONTENEDOR GENERAL ================= */
.beneficios-bloques{
display:flex;
flex-direction:column;
gap:32px;
padding:10px;
}


/* ================= GRUPOS ================= */
.beneficio-grupo{
background:#ffffff;
border-radius:16px;
padding:22px;
border:1px solid #e5e7eb;
box-shadow:0 8px 22px rgba(0,0,0,0.05);
}


/* ================= TITULO ================= */
.beneficio-titulo{
font-size:20px;
font-weight:800;
margin-bottom:18px;
color:#1e293b;
}


/* ================= GRID RESPONSIVE ================= */
.beneficios-grid{
display:grid;
grid-template-columns:1fr;
gap:16px;
}

/* TABLET */
@media (min-width:768px){
.beneficios-grid{
grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
}

/* DESKTOP */
@media (min-width:1200px){
.beneficios-grid{
grid-template-columns:repeat(3,1fr);
}
}


/* ================= TARJETAS ================= */
.beneficio-item{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:14px;
padding:18px;
transition:all 0.25s ease;
display:flex;
flex-direction:column;
gap:10px;
height:100%;
position:relative;
overflow:hidden;
}


/* ================= BARRA IZQUIERDA ================= */
.beneficio-item::before{
content:"";
position:absolute;
top:0;
left:0;
width:6px;
height:100%;
border-top-left-radius:14px;
border-bottom-left-radius:14px;
}

/* COLORES POR GRUPO */
.beneficio-grupo:nth-child(1) .beneficio-item::before{
background:linear-gradient(180deg,#d4a94f,#b77900);
}

.beneficio-grupo:nth-child(2) .beneficio-item::before{
background:linear-gradient(180deg,#2b4c7e,#1C2E4A);
}

.beneficio-grupo:nth-child(3) .beneficio-item::before{
background:linear-gradient(180deg,#38a169,#2f855a);
}


/* ================= HOVER ================= */
.beneficio-item:hover{
transform:translateY(-5px);
box-shadow:0 12px 24px rgba(0,0,0,0.08);
}


/* ================= TITULO CONVENIO ================= */
.beneficio-item h4{
font-size:15px;
font-weight:700;
color:#1C2E4A;
margin-bottom:6px;
}


/* ================= TEXTO ================= */
.beneficio-item p{
font-size:13.5px;
color:#4b5563;
margin:0;
}


/* ================= SUBTITULOS (MEJORADOS) ================= */
.beneficio-item p strong{
display:inline-block;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.6px;
font-weight:700;

color:#1C2E4A;
background:#f1f5fb;
padding:4px 8px;
border-radius:6px;
border-left:4px solid var(--dorado);

margin-bottom:6px;
}


/* ================= BLOQUES DE CONTENIDO ================= */
.beneficio-item p + ul{
background:#f8fafc;
border:1px solid #e5e7eb;
border-radius:10px;
padding:12px 14px;
margin-bottom:12px;
}


/* ================= LISTAS ================= */
.beneficio-item ul{
list-style:none;
padding-left:0;
margin-top:6px;
}

.beneficio-item li{
font-size:13px;
color:#374151;
margin-bottom:6px;
position:relative;
padding-left:16px;
line-height:1.5;
}

.beneficio-item li::before{
content:"";
position:absolute;
left:0;
top:7px;
width:6px;
height:6px;
background:var(--dorado);
border-radius:2px;
}


/* ================= SUBLISTAS ================= */
.beneficio-item li ul{
margin-top:6px;
margin-left:10px;
padding-left:10px;
border-left:2px solid #e5e7eb;
}

.beneficio-item li ul li{
font-size:12.5px;
color:#6b7280;
}


/* ================= REGISTRO DESTACADO ================= */
.registro{
background:linear-gradient(135deg,#eef4ff,#f8fbff);
border:1px solid #dbe6ff;
border-left:5px solid var(--azul);
padding:12px 14px;
border-radius:10px;
font-size:13px;
color:#1e293b;
margin-top:6px;
box-shadow:0 4px 12px rgba(0,0,0,0.04);
position:relative;

}

.registro:hover{
background:linear-gradient(135deg,#e6efff,#f3f7ff);
}



/* ================= PLAZO ================= */
.plazo{
margin-top:auto;
align-self:flex-start;
padding:5px 10px;
border-radius:6px;
background:#fef3c7;
color:#92400e;
font-weight:600;
font-size:11.5px;
}


/* ================= BLOQUE 50% ================= */
.beneficio-grupo:nth-child(3) .beneficio-item{
border-color:#bbf7d0;
}


/* ================= NOTAS IMPORTANTES ================= */
.nota-beneficios{
margin-top:60px;
background:linear-gradient(135deg,#fffaf3,#fff4e6);
padding:26px 28px;
border-radius:14px;
border:1px solid #ffe0b2;
position:relative;
box-shadow:0 10px 28px rgba(0,0,0,0.06);
}

/* ICONO */
.nota-beneficios::before{
content:"!";
position:absolute;
top:-16px;
left:22px;
background:#d4a94f;
color:#fff;
font-weight:800;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:16px;
box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

/* TITULO */
.nota-beneficios h3{
margin-bottom:14px;
color:#b77900;
font-weight:800;
}

/* LISTA */
.nota-beneficios ul{
list-style:none;
padding-left:0;
margin-top:10px;
}

.nota-beneficios li{
font-size:13.5px;
color:#5a4632;
margin-bottom:10px;
padding-left:18px;
position:relative;
line-height:1.5;
}

.nota-beneficios li::before{
content:"";
position:absolute;
left:0;
top:8px;
width:7px;
height:7px;
background:#d4a94f;
border-radius:2px;
}


/* ================= CORREO ================= */
.correo{
margin-top:18px;
padding:10px 12px;
background:#ffffff;
border-radius:8px;
border:1px solid #f1e2c6;
font-size:13.5px;
color:#6b4f1d;
display:inline-block;
box-shadow:0 4px 10px rgba(0,0,0,0.04);
}

.correo span{
color:var(--azul);
font-weight:600;
}











































/*CSSSSSSSSSSSSSSSSSSSSSSSS DE HORARIOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/

/* ================= VARIABLES ================= */
:root{
    --azul:#0d2b45;
    --azul-activo:#174a7a;

    --verde:#0d4a3a;
    --verde-activo:#1b7a5a;

    --gris:#f5f7fa;
    --texto:#2c3e50;
}

/* ================= CONTENEDOR ================= */
#horario, #asignaturas{
    max-width:1200px;
    margin:40px auto;
    padding:30px 20px;
    font-family:"Segoe UI", Arial, sans-serif;
    color:var(--texto);
    background:linear-gradient(to bottom, #f8fafc, #ffffff);
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

/* ================= TITULO ================= */
#horario h2, #asignaturas h2{
    text-align:center;
    margin-bottom:35px;
    font-weight:800;
    font-size:38px;
    letter-spacing:1px;
    color:var(--azul);
    position:relative;
}

#horario h2::after,
#asignaturas h2::after{
    content:"";
    display:block;
    width:80px;
    height:4px;
    background:linear-gradient(90deg, var(--azul), var(--verde));
    margin:12px auto 0;
    border-radius:5px;
}

/* ================= BOTONES ================= */
.filtros-principales{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-bottom:25px;
}

.filtros-principales button{
    padding:14px 28px;
    border:none;
    border-radius:30px;
    cursor:pointer;
    font-weight:600;
    transition:all .3s ease;
    opacity:0.5;
    transform:scale(0.95);
}

/* COLORES */
.btn-ingresantes, .btn-derecho{ background:var(--azul); color:white; }
.btn-regulares, .btn-ciencia_politica{ background:var(--verde); color:white; }

.filtros-principales button.activo{
    opacity:1;
    transform:scale(1.08);
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

/* ================= PROGRAMAS ================= */
.programas{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-bottom:30px;
}

.programas button{
    padding:10px 18px;
    border-radius:25px;
    border:1px solid #dcdfe4;
    background:#fff;
    opacity:0.6;
    transition:.25s;
}

.programas button:hover{
    transform:translateY(-3px);
    opacity:1;
}

/* COLORES SEGÚN TIPO */
.programas.ingresantes button:hover,
.programas.derecho button:hover{
    background:var(--azul-activo);
    color:white;
}

.programas.regulares button:hover,
.programas.ciencia_politica button:hover{
    background:var(--verde-activo);
    color:white;
}

.programas button.activo{
    opacity:1;
    color:white;
    transform:scale(1.05);
}

.programas.ingresantes button.activo,
.programas.derecho button.activo{
    background:var(--azul-activo);
}

.programas.regulares button.activo,
.programas.ciencia_politica button.activo{
    background:var(--verde-activo);
}

/* ================= CONTENIDO ================= */
.contenido-horario{
    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    animation:fadeIn .4s ease;
}

/* BORDE LATERAL */
.contenido-horario.ingresantes,
.contenido-horario.derecho{
    border-left:6px solid var(--azul-activo);
}

.contenido-horario.regulares,
.contenido-horario.ciencia_politica{
    border-left:6px solid var(--verde-activo);
}

/* ================= TARJETAS ================= */
.horario-card{
    padding:28px;
    border-radius:16px;
    border:1px solid #e6eaf0;
    margin-bottom:25px;
    background:#fff;
    transition:.3s;
}

.horario-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(0,0,0,0.08);
}

.horario-card h3{
    font-size:22px;
    font-weight:700;
}

/* COLOR TÍTULO SEGÚN TIPO */
.ingresantes .horario-card h3,
.derecho .horario-card h3{
    border-left:4px solid var(--azul-activo);
    padding-left:10px;
}

.regulares .horario-card h3,
.ciencia_politica .horario-card h3{
    border-left:4px solid var(--verde-activo);
    padding-left:10px;
}

/* ================= TABLAS ================= */

/* 🔥 BASE GENERAL */
.tabla-horario table,
.mencion table{
    width:100%;
    border-collapse:collapse;
}

/* 🔥 AQUÍ RECUPERAMOS IDENTIDAD VISUAL DEL HORARIO */
#horario .tabla-horario th{
    color:white;
}

/* COLOR DINÁMICO SEGÚN BOTÓN */
#horario .ingresantes .tabla-horario th{
    background:var(--azul-activo);
}

#horario .regulares .tabla-horario th{
    background:var(--verde-activo);
}

/* FILAS */
.tabla-horario td,
.mencion td{
    padding:12px;
    border-bottom:1px solid #edf1f5;
}

#horario .tabla-horario tr:hover{
    background:#f1f6fb;
}

/* BLOQUES ESPECIALES */
#horario .ingresantes td[colspan]{
    background:rgba(23,74,122,0.08);
    color:var(--azul-activo);
}

#horario .regulares td[colspan]{
    background:rgba(27,122,90,0.08);
    color:var(--verde-activo);
}

/* ================= ASIGNATURAS (MEJOR VISUAL) ================= */
.tabla-card{
    background:#fff;
    border:1px solid #e5eaf0;
    border-radius:12px;
    padding:15px;
    margin-bottom:15px;
}

.tabla-grid-2{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
    gap:15px;
}

.tabla-grid-3{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:15px;
}

/* ================= ANIMACIÓN ================= */
@keyframes fadeIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){

.tabla-horario table,
.mencion table,
.tabla-horario tr,
.mencion tr,
.tabla-horario td,
.mencion td{
    display:block;
    width:100%;
}

/* 🔥 SOLO HORARIO USA ESTE MODO */
#horario .tabla-horario thead{
    position:absolute;
    left:-9999px;
}

#horario .tabla-horario tr{
    margin-bottom:15px;
    border:1px solid #ddd;
    padding:12px;
    border-radius:10px;
}

#horario .tabla-horario td{
    padding:10px 10px 10px 45%;
    position:relative;
}

#horario .tabla-horario td::before{
    content:attr(data-label);
    position:absolute;
    left:10px;
    top:10px;
    font-weight:700;
    font-size:12px;
}

}