/* ==================== VARIABLES DE COLOR ==================== */
:root{
--blanco:#FFFFFF;
--azul:#1A2755;
--verde:#036768;
--dorado:#CC9666;
--dorado_claro:#E4C9B1;
--gris-fondo:#f6f7fb;
--texto:#1a1a1a;
}
/* ===== FIN ===== */
/* ==================== RESET ==================== */
*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:'Inter',sans-serif;
background:var(--gris-fondo);
color:var(--texto);
line-height:1.6;
}
/* ===== FIN ===== */
/* ==================== PRESENTACION ==================== */
.hero{
min-height:40vh;
padding:clamp(20px,6vw,60px) clamp(20px,5vw,60px);
background:linear-gradient(135deg,var(--azul),var(--verde));
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:var(--blanco);
}

.hero-content{
max-width:900px;
width:100%;
}

.hero-logo{
display:block;
margin:0 auto 20px auto;
width:clamp(100px,16vw,200px);
height:auto;
object-fit:contain;
filter:drop-shadow(0 6px 18px rgba(0,0,0,0.25));
transition:transform .3s ease;
}

.hero-logo:hover{
transform:scale(1.05);
}

.hero h1{
font-size:clamp(30px,3.5vw,46px);
font-weight:800;
margin-bottom:10px;
line-height:1.2;
}

.posgrado_color{
color:var(--dorado_claro);
}

.hero p{
font-size:clamp(15px,1.6vw,19px);
opacity:.95;
}

.hero-buttons{
margin-top:24px;
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
}

.btn{
padding:clamp(12px,1vw,16px) clamp(22px,2vw,28px);
border-radius:12px;
text-decoration:none;
font-weight:600;
transition:.3s;
display:inline-block;
font-size:clamp(14px,1vw,16px);
}

.primary{
background:var(--dorado);
color:var(--azul);
}

.secondary{
background:var(--verde);
color:var(--blanco);
}

.outline{
border:2px solid var(--blanco);
color:var(--blanco);
}

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

@media (max-width:768px){
.hero{
min-height:35vh;
}

.hero-logo{
width:clamp(100px,32vw,160px);
}
}
.titulo_adaptable{
font-size: clamp(24px, 2.5vw, 36px);
}
/* ===== FIN ===== */
/* ========================= PROGRAMAS ========================= */
.programas{
padding: 40px 20px;
background:linear-gradient(180deg,#ffffff,#f7f9fc);
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

.programas-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
gap:45px;
max-width:1200px;
margin:auto;
}

.programa-bloque{
background:#ffffff;
padding:40px;
border-radius:18px;
border:1px solid rgba(0,0,0,0.05);
box-shadow:0 15px 40px rgba(0,0,0,0.06);
transition:0.3s;
position:relative;
overflow:hidden;
}

.programa-bloque:hover{
transform:translateY(-6px);
box-shadow:0 25px 60px rgba(0,0,0,0.08);
}

.programa-bloque::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,#1A2755,#036768,#CC9666);
}

.nivel{
font-size: clamp(24px, 3vw, 36px);
color:#1A2755;
margin-bottom:25px;
font-weight:700;
letter-spacing:0.5px;
}

.duracion{
font-size: clamp(16px, 2vw, 24px);
}

.subprograma{
margin-bottom:30px;
}

.subprograma h4{
font-size:16px;
color:#036768;
margin-bottom:18px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
}

.programas-botones{
display:flex;
flex-wrap:wrap;
gap:14px;
}

.programa-btn{
display:inline-block;
text-decoration:none;
padding:12px 18px;
border-radius:12px;
font-size:14px;
font-weight:600;
background:#ffffff;
color:#1A2755;
border:2px solid #e4e8f0;
transition:all .25s ease;
cursor:pointer;
}

.programa-btn:hover{
background:#1A2755;
color:#ffffff;
border-color:#1A2755;
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(26,39,85,0.25);
}

.programa-btn:active{
transform:scale(0.97);
}

.programa-bloque:last-child .programa-btn{
border:2px solid #036768;
color:#036768;
background:#ffffff;
}

.programa-bloque:last-child .programa-btn:hover{
background:#036768;
color:#ffffff;
box-shadow:0 8px 20px rgba(3,103,104,0.25);
}

.titulo-seccion{
text-align:center;
font-size:30px;
font-weight:700;
color:#1A2755;
margin-bottom:60px;
position:relative;
}

.titulo-seccion::after{
content:"";
display:block;
width:70px;
height:4px;
background:#CC9666;
margin:14px auto 0;
border-radius:3px;
}

@media(max-width:768px){

.programas{
padding:70px 20px;
}

.programas-grid{
grid-template-columns:1fr;
gap:30px;
}

.programa-bloque{
padding:30px;
}

.programa-btn{
width:100%;
text-align:center;
}
.duracion{
display: block;
}

}
/* ===== FIN ===== */
/* ========================= INF GENERAL ========================= */
.accesos{
padding: clamp(20px,3vw,40px) 20px;
background: linear-gradient(180deg,#f8fafc,#ffffff);
text-align:center;
}

.accesos h2{
font-size: clamp(28px,3vw,36px);
color: var(--azul);
margin-bottom: 45px;
position: relative;
}

.accesos h2::after{
content:"";
display:block;
width:70px;
height:4px;
background: var(--dorado);
margin:12px auto 0;
border-radius:3px;
}

.grid{
display:grid;
grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
gap:25px;
max-width:900px;
margin:auto;
}

.card-btn{
display:flex;
align-items:center;
justify-content:center;
padding:28px 25px;
border-radius:16px;
text-align:center;
font-weight:600;
font-size:16px;
text-decoration:none;
color: var(--blanco);
background: var(--azul);
border:1px solid rgba(0,0,0,0.05);
box-shadow:0 12px 30px rgba(0,0,0,0.06);
transition: all .28s ease;
position: relative;
overflow: hidden;
}

.card-btn::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background: linear-gradient(90deg,var(--azul),var(--verde),var(--dorado));
}

.card-btn:hover{
transform: translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,0.12);
background: var(--blanco);
color: var(--azul);
border:1px solid var(--azul);
}

.card-btn:hover::before{
height:100%;
opacity:.08;
}

@media (max-width:768px){

.grid{
gap:18px;
}

.card-btn{
padding:22px;
font-size:15px;
}

}
/* ===== FIN ===== */
/* ==================== CRONOGRAMA Y VACANTES ==================== */

.cronograma,
.vacantes{
padding: clamp(30px,4vw,60px) 20px;
background: linear-gradient(180deg,#f5f7fb,#eef2f9);
}

.tabla-cronograma{
max-width:1000px;
margin:auto;
overflow-x:auto;
background:white;
border-radius:18px;
box-shadow:0 18px 45px rgba(0,0,0,0.08);
border:1px solid rgba(0,0,0,0.04);
}

.tabla-cronograma table{
width:100%;
border-collapse:collapse;
font-size:clamp(13px,1.1vw,15px);
}

.tabla-cronograma thead{
background:linear-gradient(135deg,var(--azul),#123a8c);
color:white;
}

.tabla-cronograma th{
padding:18px 20px;
text-align:left;
font-weight:600;
letter-spacing:.3px;
}

.tabla-cronograma th:nth-child(2),
.tabla-cronograma th:nth-child(3),
.tabla-cronograma td:nth-child(2),
.tabla-cronograma td:nth-child(3){
text-align:center;
}

.tabla-cronograma td{
padding:16px 20px;
border-bottom:1px solid #edf0f5;
transition:.25s;
}

.tabla-cronograma tbody tr:hover{
background:#fdfdf8;
}

.destacado{
font-weight:700;
color:var(--azul);
}

.separador td{
font-weight:700;
letter-spacing:.5px;
text-transform:uppercase;
border-bottom:none;
padding:14px 20px;
}

.separador_{
background:linear-gradient(90deg,#e8f0ff,#f4f7ff);
color:var(--azul);

}


@media (max-width:768px){

.tabla-cronograma table{
font-size:12px;
}

.tabla-cronograma th,
.tabla-cronograma td{
padding:12px 14px;
}

}
/* ===== FIN ===== */
/* ========================= DOCUMENTO========================= */
.documentos{
padding: clamp(30px,5vw,70px) 20px;
background:#f8fafc;
text-align:center;
}
.documentos h2{
font-size: clamp(28px,3vw,36px);
color: var(--azul);
margin-bottom:45px;
}

.docs-container{
max-width:900px;
margin:auto;
}

.docs-tabs{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
margin-bottom:35px;
}

.tab-btn{
padding:15px 28px;
border-radius:14px;
border:2px solid var(--azul);
background:white;
color:var(--azul);
font-weight:600;
cursor:pointer;
transition:.25s;
position:relative;
}
.tab-btn::after{
content:"";
position:absolute;
inset:0;
border-radius:14px;
opacity:0;
transition:.25s;
}

.tab-btn.active[data-tab="maestria"]{
background:linear-gradient(135deg,var(--azul),var(--verde));
color:white;
border:none;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.tab-btn.active[data-tab="doctorado"]{
background:linear-gradient(135deg,var(--verde),#0b8c8d);
color:white;
border:none;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.tab-btn:hover{
transform:translateY(-2px);
border-color:var(--verde);
color:var(--verde);
}

.tab-content{
display:none;
background:white;
padding:38px;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
text-align:left;
transition:.3s;
}

.tab-content.active{
display:block;
}

#maestria{
border-top:5px solid var(--azul);
}

#doctorado{
border-top:5px solid var(--verde);
}

.tab-content ol{
padding-left:20px;
}

.tab-content li{
padding:12px 0;
border-bottom:1px solid #eee;
font-size:14px; /* aquí reduces el tamaño */
}

.tab-content i{
display:block;
margin-top:18px;
padding:14px 16px;
background:#f4f7fb;
border-left:4px solid var(--dorado);
border-radius:8px;
font-style:italic;
color:#555;
font-size:12px;
}

@media (max-width:768px){

.docs-tabs{
flex-direction:column;
}

.tab-btn{
width:100%;
}

.tab-content{
padding:28px;
}

}

/* ==================== TUTORIALES ==================== */

.tutoriales{
padding: clamp(40px,5vw,80px) 20px;
background:#f5f7fb;
}

.tutoriales-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
max-width:1100px;
margin:auto;
}

.tutorial-card{
background:white;
padding:20px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;
}

.tutorial-card:hover{
transform:translateY(-5px);
box-shadow:0 14px 35px rgba(0,0,0,0.12);
}

.tutorial-card h3{
font-size:clamp(16px,1.4vw,20px);
margin-bottom:15px;
color:#0a2a66;
}

.video-container{
position:relative;
width:100%;
padding-bottom:56.25%;
height:0;
overflow:hidden;
border-radius:10px;
}

.video-container iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}

@media(max-width:768px){

.tutorial-card{
padding:16px;
}

}

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

.contact-section{
padding:60px 20px;
background:linear-gradient(135deg,var(--azul),var(--verde));
text-align:center;
color:var(--blanco);
}

.contact-container{
max-width:1000px;
margin:auto;
}

.contact-title{
font-size:clamp(28px,3vw,38px);
margin-bottom:10px;
font-weight:700;
color:var(--blanco);
letter-spacing:.5px;
}

.contact-subtitle{
opacity:.9;
margin-bottom:45px;
font-size:15px;
}
.contact-box{
background:var(--blanco);
color:var(--texto);
padding:50px 40px;
border-radius:18px;
box-shadow:0 20px 50px rgba(0,0,0,0.15);
border-top:6px solid var(--dorado);
}

.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:20px;
margin-top:10px;
}

.contact-btn{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:10px;
padding:16px 20px;
border-radius:12px;
font-weight:600;
text-decoration:none;
transition:.25s;
border:1px solid rgba(0,0,0,0.05);
background:#f8fafc;
word-break:break-word;
overflow-wrap:anywhere;
}

.contact-whatsapp{
background:#25D366;
color:white;
}

.contact-whatsapp:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
.contact-phone{
background:var(--azul);
color:white;
}

.contact-phone:hover{
background:var(--verde);
transform:translateY(-4px);
}

.contact-email{
background:#f4f6ff;
color:var(--azul);
font-size:12px;
}

.contact-email:hover{
background:var(--azul);
color:white;
transform:translateY(-4px);
}

.contact-hours{
margin-top:40px;
padding-top:20px;
border-top:1px solid #e5e7eb;
font-size:14px;
color:#444;
line-height:1.7;
}

@media (max-width:768px){

.contact-section{
padding:70px 18px;
}

.contact-box{
padding:35px 22px;
}

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

.contact-btn{
font-size:14px;
padding:14px 16px;
}

}

@media (max-width:480px){

.contact-title{
font-size:26px;
}

.contact-subtitle{
font-size:14px;
}

}

/* ========================= AQUI TERMINA CONTACTO ========================= */

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

@media (max-width:1024px){

.hero{
min-height:40vh;
padding:50px 20px;
}

section{
padding:50px 25px;
}

}

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

@media (max-width:768px){

.hero{
min-height:60vh;
padding:60px 20px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.btn{
width:100%;
max-width:280px;
text-align:center;
}

table{
font-size:13px;
}

th,td{
padding:12px;
}

.contact-box{
padding:25px;
}

}

/* =========================
MOVIL PEQUEÑO
========================= */

@media (max-width:480px){

.hero h1{
line-height:1.2;
}

section{
padding:60px 18px;
}

.card{
padding:22px;
}

.card-btn{
padding:18px;
}

}