* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Segoe UI’, Roboto, system-ui, sans-serif;
}

body {
background: linear-gradient(135deg, #e8edf5 0%, #c8d6e5 100%);
padding: 2rem 1.5rem;
min-height: 100vh;
}

.container {
max-width: 1300px;
margin: 0 auto;
}

/* Encabezado principal */
.main-header {
background: linear-gradient(145deg, #0b2549, #1a3f6a);
border-radius: 2.5rem 2.5rem 2rem 2rem;
padding: 2.5rem 3rem;
margin-bottom: 2.5rem;
box-shadow: 0 20px 40px -8px rgba(0, 20, 40, 0.4);
color: white;
position: relative;
overflow: hidden;
}

.main-header::before {
content: »;
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
border-radius: 50%;
}

.main-header .top-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
position: relative;
z-index: 1;
}

.main-header h1 {
font-size: 2.5rem;
font-weight: 700;
letter-spacing: -0.5px;
}

.main-header h1 i {
margin-right: 0.8rem;
color: #ffd700;
}

.date-badge {
background: rgba(255, 215, 0, 0.15);
border: 1px solid rgba(255, 215, 0, 0.3);
padding: 0.8rem 2rem;
border-radius: 3rem;
font-size: 1.1rem;
font-weight: 500;
backdrop-filter: blur(4px);
display: flex;
align-items: center;
gap: 0.8rem;
}

.date-badge i {
color: #ffd700;
}

.date-badge span {
color: #ffd700;
font-weight: 700;
}

.mode-tags {
display: flex;
gap: 1rem;
margin-top: 1rem;
position: relative;
z-index: 1;
flex-wrap: wrap;
}

.mode-tag {
background: rgba(255,255,255,0.1);
padding: 0.5rem 1.8rem;
border-radius: 3rem;
font-weight: 500;
font-size: 0.95rem;
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
gap: 0.5rem;
}

.mode-tag i {
color: #ffd700;
}

/* Grid general */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2.5rem;
}

.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-bottom: 2.5rem;
}

.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.8rem;
margin-bottom: 2.5rem;
}

/* Tarjetas */
.card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 2rem;
padding: 1.8rem 2rem;
box-shadow: 0 10px 30px -6px rgba(0, 20, 40, 0.12);
border: 1px solid rgba(255, 255, 255, 0.6);
transition: all 0.3s ease;
}

.card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -10px rgba(0, 20, 40, 0.2);
background: rgba(255, 255, 255, 0.95);
}

.card-header {
display: flex;
align-items: center;
gap: 0.8rem;
border-bottom: 2px solid rgba(11, 37, 73, 0.08);
padding-bottom: 0.8rem;
margin-bottom: 1.2rem;
}

.card-header i {
font-size: 1.8rem;
color: #1a3f6a;
background: rgba(26, 63, 106, 0.08);
padding: 0.4rem;
border-radius: 1rem;
width: 2.8rem;
text-align: center;
}

.card-header h3 {
font-size: 1.2rem;
font-weight: 600;
color: #0b2549;
}

.card-content {
display: flex;
flex-direction: column;
gap: 0.8rem;
}

.card-content a {
color: #1a3f6a;
text-decoration: none;
font-weight: 500;
padding: 0.4rem 0.8rem;
border-radius: 0.8rem;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.6rem;
}

.card-content a i {
width: 1.4rem;
color: #2a5a8a;
font-size: 0.9rem;
}

.card-content a:hover {
background: rgba(26, 63, 106, 0.06);
color: #00337a;
padding-left: 1.2rem;
}

.link-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.3rem 1rem;
}

/* Contacto directivo */
.directivo {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 0.8rem 0;
border-bottom: 1px solid rgba(0,0,0,0.04);
}

.directivo:last-child {
border-bottom: none;
}

.directivo .nombre {
font-weight: 700;
font-size: 1.1rem;
color: #0b2549;
display: flex;
align-items: center;
gap: 0.5rem;
}

.directivo .nombre i {
color: #1a3f6a;
font-size: 1rem;
}

.directivo .cargo {
font-size: 0.9rem;
color: #2a4a7a;
font-weight: 500;
margin-left: 1.8rem;
}

.directivo .email {
font-size: 0.9rem;
color: #1a3f6a;
margin-left: 1.8rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.directivo .email a {
color: #1a3f6a;
text-decoration: none;
font-weight: 500;
}

.directivo .email a:hover {
text-decoration: underline;
color: #00337a;
}

.directivo .email i {
font-size: 0.8rem;
opacity: 0.7;
}

/* Badge para modalidad */
.badge-modalidad {
display: inline-block;
background: #0b2549;
color: white;
font-size: 0.7rem;
padding: 0.15rem 0.8rem;
border-radius: 2rem;
font-weight: 600;
letter-spacing: 0.3px;
margin-left: 0.5rem;
}

.badge-modalidad.distancia {
background: #1a5a3a;
}

/* Estilos para sección de Tutores */
.tutor-item {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.6rem 0;
}

.tutor-item .nombre {
font-weight: 600;
color: #0b2549;
}

.tutor-item .email a {
color: #1a3f6a;
text-decoration: none;
font-size: 0.9rem;
}

.tutor-item .email a:hover {
text-decoration: underline;
}

.tutor-item .modalidad {
font-size: 0.8rem;
color: #2a5a8a;
font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 900px) {
.grid-2 {
grid-template-columns: 1fr;
}
.grid-3 {
grid-template-columns: 1fr 1fr;
}
.main-header {
padding: 1.8rem;
}
.main-header h1 {
font-size: 1.8rem;
}
.date-badge {
font-size: 0.9rem;
padding: 0.5rem 1.2rem;
}
}

@media (max-width: 650px) {
.grid-3 {
grid-template-columns: 1fr;
}
.grid-4 {
grid-template-columns: 1fr;
}
.main-header .top-row {
flex-direction: column;
align-items: flex-start;
}
.main-header h1 {
font-size: 1.5rem;
}
.link-grid {
grid-template-columns: 1fr;
}
.card {
padding: 1.2rem 1.2rem;
}
}

/* Animación de entrada */
.card {
animation: fadeUp 0.6s ease forwards;
opacity: 0;
}

.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; }
.card:nth-child(4) { animation-delay: 0.2s; }
.card:nth-child(5) { animation-delay: 0.25s; }
.card:nth-child(6) { animation-delay: 0.3s; }

@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}