/* ================================ 
   PALETA DE COLORES UPM
================================ */
:root {
  --verde-upm: #6FB341;
  --morado-upm: #2E2A77;
  --naranja-upm: #F7941D;
  --gris-oscuro: #333;
  --gris-claro: #f2f2f2;
  --blanco: #fff;
}

/* ================================
   RESET GENERAL Y TIPOGRAFÍA
================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--gris-claro);
  color: var(--gris-oscuro);
  line-height: 1.7;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  margin:0;
}

p {
  font-size: 1.1rem;
  margin-bottom: 15px;
}

h1 {
  font-size: 2.8rem;
  color: var(--morado-upm);
  text-align: center;
  margin-bottom: 25px;
}

h2 { font-size: 2rem; }
h3 { font-size: 1.4rem; }

h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================================ 
   HEADER / MENÚ (VERSIÓN LIMPIA)
================================ */
.menu {
  background: var(--morado-upm);
  padding: 10px 40px; /* Un poco más de espacio a los lados */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Logo */
.logo-container {
  display: flex;
  align-items: center;
}

.logo-upm {
  height: 75px; /* Hacemos el logo más grande para que destaque */
  transition: transform 0.3s ease;
}

.logo-upm:hover {
  transform: scale(1.05); /* Pequeño efecto al pasar el mouse */
}

/* Ocultamos el nombre larguísimo de la universidad */
.titulo-upm {
  display: none; 
}

/* ================================
   NAVEGACIÓN PRINCIPAL
================================ */
nav {
  display: flex;
  align-items: center;
}

.menu-principal {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.menu-principal li {
  position: relative;
}

.menu-principal a {
  color: var(--blanco);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.05rem;
  white-space: nowrap;
  transition: 0.3s;
  position: relative;
  padding-bottom: 5px;
}

.menu-principal a.activo {
  color: var(--naranja-upm);
}

.menu-principal a.activo::after {
  width: 100%;
}

.menu-principal a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: var(--naranja-upm);
  transition: width 0.3s ease;
}

.menu-principal a:hover::after {
  width: 100%;
}

.menu-principal a:hover {
  color: var(--naranja-upm);
  transform: translateY(-3px);
  text-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* ================================
   SUBMENÚ (DROPDOWN)
================================ */
.dropdown {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #3b3791;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-radius: 6px;
  z-index: 1000;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(15px) scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.dropdown li a {
  padding: 10px 20px;
  display: block;
}

.dropdown li a:hover {
  background: rgba(255,255,255,0.1);
}

.submenu:hover .dropdown {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (max-width:768px){
  .submenu:hover .dropdown{ display:none; }
}

/* ================================
   MENÚ HAMBURGUESA (MÓVIL)
================================ */
#menu-toggle { display: none; }

.menu-icon {
  display: none;
  font-size: 2.2rem;
  color: var(--blanco);
  cursor: pointer;
  transition: 0.3s;
}

.menu-icon:hover{ transform: scale(1.1); }

@media (max-width:768px){
  .menu-icon{ display:block; font-size:30px; cursor:pointer; color:white; }
  .nav-menu{
    position:fixed; top:0; right:-100%; width:85%; max-width:320px; height:100vh;
    background:#3b3685; transition:0.35s ease; padding-top:90px; z-index:1000;
    box-shadow:-10px 0 25px rgba(0,0,0,0.3);
  }
  #menu-toggle:checked + .menu-icon + .nav-menu{ right:0; }
  .cerrar-menu{ position:absolute; top:25px; right:25px; font-size:28px; color:white; cursor:pointer; }
  .menu-principal{ flex-direction:column; gap:0; }
  .menu-principal li{ border-bottom:1px solid rgba(255,255,255,0.15); }
  .menu-principal a{ display:block; padding:18px 25px; font-size:17px; text-align:left; }
  .dropdown{ position:static; display:none; background:rgba(255,255,255,0.15); backdrop-filter: blur(8px); }
  .submenu.active .dropdown{ display:block; }
  .dropdown li a{ padding-left:40px; font-size:15px; }
}

/* =========================================
   NUEVO HERO PRINCIPAL (PORTADA LANDING)
========================================= */
.hero-principal {
  position: relative;
  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--blanco);
  overflow: hidden;
}

.slider-fondo {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}

.slider-fondo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}

/* =================================
   CAPA OSCURA DEL BANNER
================================= */
.overlay-oscuro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2; /* asegura que esté encima de las imágenes */
}

.hero-contenido {
  position: relative; z-index: 2; max-width: 900px; padding: 0 20px;
}

.hero-contenido h1 {
  font-size: 3.5rem; color: var(--blanco); margin-bottom: 10px;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
  animation: none; /* Quitamos animación en portada */
}
.hero-contenido h1::after { display: none; }

.hero-slogan {
  font-size: 1.8rem; color: var(--naranja-upm); margin-bottom: 20px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8); font-weight: 600;
}

.hero-descripcion {
  font-size: 1.2rem; margin-bottom: 35px; color: var(--blanco);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* =================================
HERO INTERNO (BANNER DE PÁGINAS)
================================= */

.hero-interno{
    position: relative;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-interno img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-interno .overlay-oscuro{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.45);
}

.hero-interno .hero-contenido{
    position:absolute;
    text-align:center;
    color:white;
    max-width:800px;
    padding:20px;
}

.hero-interno h1{
    font-size:42px;
    margin-bottom:10px;
}

.hero-interno p{
    font-size:18px;
}

/* =================================
   SLIDER DE IMÁGENES HERO INTERNO
================================= */

.slider-fondo{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.slider-fondo img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.slider-fondo img.active{
    opacity:1;
}


/* ================================
   BOTONES DEL HERO (LANDING)
================================ */
.hero-acciones {
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 25px;
}

.btn-primario {
  display: inline-block; padding: 14px 32px;
  background-color: var(--naranja-upm); color: var(--blanco) !important;
  text-decoration: none; font-weight: 600; font-size: 1.1rem;
  border-radius: 30px; border: 2px solid var(--naranja-upm);
  transition: all 0.3s ease; box-shadow: 0 6px 15px rgba(247, 148, 29, 0.3);
}

.btn-primario:hover {
  background-color: #d67a0f; border-color: #d67a0f; transform: translateY(-3px);
}

.btn-secundario {
  display: inline-block; padding: 14px 32px;
  background-color: transparent; color: var(--blanco) !important;
  text-decoration: none; font-weight: 600; font-size: 1.1rem;
  border-radius: 30px; border: 2px solid var(--blanco); transition: all 0.3s ease;
}

.btn-secundario:hover {
  background-color: var(--blanco); color: var(--morado-upm) !important;
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .hero-contenido h1 { font-size: 2.2rem; }
  .hero-slogan { font-size: 1.4rem; }
  .hero-acciones { flex-direction: column; }
  .hero-principal { height: 75vh; }
}

/* ==============================================
   ESTILOS DE LANDING PAGE: OFERTA EDUCATIVA
============================================== */
.oferta-landing {
  padding: 60px 20px; max-width: 1300px; margin: auto;
}

.landing-heading {
  text-align: center; max-width: 900px; margin: 0 auto 40px auto;
}

.landing-heading h2 {
  font-size: 2.5rem !important; color: var(--morado-upm) !important;
  border: none !important; padding: 0 !important; margin-bottom: 15px !important;
}

.alerta-tsu {
  background-color: #f9f9f9; border-left: 6px solid var(--naranja-upm);
  padding: 20px 30px; margin-top: 25px; border-radius: 8px; text-align: left;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.alerta-tsu p {
  font-size: 1.05rem !important; color: #444 !important; line-height: 1.6; margin-bottom: 10px;
}
.alerta-tsu p:last-child { margin-bottom: 0; }

.oferta-grid-landing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  padding-bottom: 40px;
}

.landing-card {
  background: var(--blanco); border-radius: 12px; text-decoration: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.06); border-bottom: 4px solid var(--verde-upm);
  transition: all 0.3s ease; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
}

/* ==============================================
   EFECTO HOVER TARJETAS
============================================== */
.landing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
  border-color: var(--naranja-upm);
}

/* ==============================================
   IMÁGENES DE LAS CARRERAS (TARJETAS)
============================================== */
.img-carrera-landing {
  width: 100%;
  height: 170px; /* Imagen un poco más alta */
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* efecto visual al pasar el mouse */
.landing-card:hover .img-carrera-landing {
  transform: scale(1.05);
}

/* ==============================================
   CONTENIDO DE LAS TARJETAS
============================================== */
.contenido-card-landing {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.contenido-card-landing h3 {
  color: var(--morado-upm);
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.tsu-landing {
  color: var(--naranja-upm); font-weight: 600; font-size: 0.85rem; margin-bottom: 0 !important;
}

/* ======================================
INFORMACIÓN GENERAL CARRERAS
====================================== */

.info-general-carrera{

padding:70px 20px;
background:#f7f7f7;

}

.titulo-seccion{

text-align:center;
font-size:2rem;
color:var(--verde-upm);
margin-bottom:50px;

}

.grid-info-carrera{

max-width:1100px;
margin:auto;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;

}

.card-info{

background:white;
padding:35px 25px;

border-radius:12px;

text-align:center;

box-shadow:0 6px 18px rgba(0,0,0,0.08);

transition:all .3s ease;

}

.card-info:hover{

transform:translateY(-8px);

box-shadow:0 12px 25px rgba(0,0,0,0.15);

}

.icono-info{

font-size:40px;
margin-bottom:15px;

}

.card-info h3{

color:var(--morado-upm);
margin-bottom:10px;

}

.card-info p{

font-size:15px;
color:#555;

}

/* ======================================
PERFIL DE EGRESO
====================================== */

.perfil-carrera{

padding:70px 20px;
max-width:1100px;
margin:auto;

}

.perfil-carrera h2{

text-align:left;
color:var(--verde-upm);
margin-bottom:20px;

}

.intro-perfil{

text-align:left;
max-width:900px;
margin:0;
margin-bottom:40px;
color:#555;

}

.grid-egreso{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;

}

.item-egreso{

display:flex;
align-items:flex-start;
gap:12px;

background:#f7f7f7;
padding:18px;
border-radius:10px;

transition:all .3s ease;

}

.item-egreso:hover{

transform:translateY(-4px);
box-shadow:0 8px 18px rgba(0,0,0,0.1);

}

.icono-egreso{

font-size:24px;

}

.item-egreso p{

margin:0;
font-size:15px;

}

/* ======================================
CAMPO LABORAL
====================================== */

.campo-laboral{

padding:70px 20px;
max-width:1200px;
margin:auto;

}

.campo-laboral h2{

color:var(--verde-upm);
margin-bottom:10px;

}

.intro-laboral{

max-width:800px;
margin-bottom:40px;
color:#555;

}

/* GRID */

.grid-laboral{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:25px;

}

/* TARJETAS */

.card-laboral{

background:#f7f7f7;
padding:25px;
border-radius:12px;
transition:all .3s ease;

}

.card-laboral:hover{

transform:translateY(-6px);
box-shadow:0 10px 20px rgba(0,0,0,0.1);

}

/* ICONO */

.icono-laboral{

font-size:28px;
display:block;
margin-bottom:10px;

}

.card-laboral h3{

margin-bottom:8px;
color:var(--morado-upm);

}

.card-laboral p{

margin:0;
font-size:14px;

}

/* ======================================
GALERÍA CARRUSEL DE PRÁCTICAS
====================================== */

.galeria-carrera{
max-width:1200px;
margin:60px auto;
padding:20px;
}

.galeria-carrera h2{
color:var(--morado-upm);
margin-bottom:10px;
}

.galeria-descripcion{
color:#555;
margin-bottom:25px;
max-width:700px;
}

.carrusel-galeria{
display:flex;
align-items:center;
position:relative;
}

.contenedor-imagenes{
display:flex;
overflow:hidden;
scroll-behavior:smooth;
gap:20px;
}

.contenedor-imagenes img{
width:300px;
height:200px;
object-fit:cover;
border-radius:10px;
flex-shrink:0;
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.flecha{
background:var(--morado-upm);
color:white;
border:none;
font-size:30px;
padding:10px 15px;
cursor:pointer;
border-radius:50%;
margin:0 10px;
transition:0.3s;
}

.flecha:hover{
background:var(--naranja-upm);
}


/* ======================================
VISOR DE IMÁGENES (LIGHTBOX)
====================================== */

.visor-imagen{
display:none;
position:fixed;
z-index:9999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
justify-content:center;
align-items:center;
}

.imagen-ampliada{
max-width:90%;
max-height:85%;
border-radius:10px;
}

.cerrar-visor{
position:absolute;
top:30px;
right:40px;
font-size:40px;
color:white;
cursor:pointer;
}


/* ==============================================
   ESTILOS DE LANDING PAGE: VIVE LA EXPERIENCIA
============================================== */
.experiencia-fondo-completo {
  background: var(--morado-upm); color: var(--blanco);
  padding: 80px 5%; width: 100%; box-sizing: border-box; margin: 40px 0;
}

.experiencia-flex {
  display: flex; align-items: center; justify-content: space-between;
  gap: 50px; max-width: 1300px; margin: 0 auto;
}

.experiencia-texto { flex: 1; max-width: 50%; }

.experiencia-texto h2 {
  color: var(--naranja-upm) !important; border: none !important;
  padding: 0 !important; font-size: 2.4rem !important; margin-bottom: 20px;
}

.experiencia-texto p {
  color: var(--blanco) !important; font-size: 1.1rem; line-height: 1.6;
}

.beneficios-lista { list-style: none; margin: 25px 0 0 0; padding: 0; }
.beneficios-lista li { font-size: 1.1rem; margin-bottom: 12px; color: var(--blanco); }

.experiencia-video { flex: 1; max-width: 50%; width: 100%; }

.video-wrapper {
  position: relative; padding-bottom: 56.25%; height: 0; border-radius: 15px;
  overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.4); border: 3px solid var(--naranja-upm);
}

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

@media (max-width: 900px) {
  .experiencia-flex { flex-direction: column; }
  .experiencia-texto, .experiencia-video { max-width: 100%; }
  .experiencia-texto { text-align: center; margin-bottom: 30px; }
  .landing-heading h2 { font-size: 2rem !important; }
}

/* ==============================================
   NOTICIAS Y CTA FINAL (LANDING)
============================================== */
.noticias-landing { padding: 60px 20px; max-width: 1300px; margin: auto; }

.noticia-card {
  background: var(--blanco); border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.noticia-info { padding: 20px; }
.noticia-fecha { color: var(--verde-upm); font-size: 0.85rem; font-weight: bold; text-transform: uppercase; }
.noticia-card h3 { margin: 10px 0; color: var(--morado-upm); }

.cta-final {
  background: linear-gradient(135deg, var(--verde-upm) 0%, #4a802f 100%);
  text-align: center; padding: 70px 20px; color: var(--blanco); margin-top: 40px;
}
.cta-contenido h2 { color: var(--blanco) !important; border: none !important; font-size: 2.8rem !important; }
.cta-contenido p { font-size: 1.2rem; max-width: 600px; margin: 0 auto 30px auto; color: var(--blanco) !important;}
.cta-btn-grande { font-size: 1.3rem; padding: 18px 40px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }

/* ================================
   BOTONES GLOBALES (PÁGINAS INTERNAS)
================================ */
.btn {
  display: inline-block; padding: 14px 28px; background: var(--verde-upm);
  color: var(--blanco); text-decoration: none; font-size: 1.05rem;
  font-weight: bold; border-radius: 30px; transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.btn:hover { background: var(--naranja-upm); transform: translateY(-3px); }

/* ================================
   SECCIONES GLOBALES INTERNAS
================================ */
section { padding: 35px 40px; max-width: 1300px; margin: auto; }

section h2 {
  color: var(--verde-upm); margin-bottom: 20px; border-left: 6px solid var(--naranja-upm);
  padding-left: 12px; font-size: 1.8rem;
}

section p { text-align: justify; margin-bottom: 20px; line-height: 1.75; font-size: 1.05rem; }

/* ==============================
   HISTORIA - LINEA DEL TIEMPO
================================ */
.historia h1 { color: var(--morado-upm); margin-bottom: 40px; }
.timeline { position: relative; padding-left: 40px; border-left: 4px solid var(--morado-upm); }
.timeline-item { margin-bottom: 40px; position: relative; background: #f8f8f8; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.timeline-item::before { content: ""; position: absolute; left: -12px; top: 25px; width: 18px; height: 18px; background: var(--naranja-upm); border-radius: 50%; border: 3px solid white; }
.fecha { display: inline-block; background: var(--morado-upm); color: white; padding: 5px 12px; font-size: 0.9rem; border-radius: 20px; margin-bottom: 10px; }
.timeline-item h3 { color: var(--verde-upm); margin-bottom: 10px; }
.timeline-item p { line-height: 1.6; margin-bottom: 10px; }

/* ===============================
   MISION, VISION Y VALORES
================================ */
.institucional h1 { color: var(--morado-upm); margin-bottom: 40px; }
.bloques-mv { display: flex; gap: 30px; flex-wrap: wrap; }
.card-mv { flex: 1; min-width: 280px; background: #f8f8f8; padding: 25px; border-left: 6px solid var(--verde-upm); border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.card-mv h2 { color: var(--morado-upm); margin-bottom: 15px; }
.separador { margin: 60px 0 40px; border: none; height: 3px; background: var(--morado-upm); }
.titulo-valores { color: var(--morado-upm); margin-bottom: 20px; }
.intro-valores { margin-bottom: 40px; line-height: 1.6; }
.grid-valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; }
.valor { background: #f8f8f8; padding: 20px; border-top: 5px solid var(--verde-upm); border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.valor h3 { color: var(--morado-upm); margin-bottom: 10px; }

/* ===============================
   ORGANIGRAMA Y DIRECTORIO
================================ */
.organigrama h1 { color: var(--morado-upm); margin-bottom: 40px; text-align: center; }
.imagen-organigrama { display: flex; justify-content: center; }
.imagen-organigrama img { max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.directorio h1 { color: var(--morado-upm); margin-bottom: 40px; }
.area-titulo { color: var(--morado-upm); margin: 50px 0 20px; border-left: 6px solid var(--verde-upm); padding-left: 10px; }
.grid-directorio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; }
.card-persona { background: #f8f8f8; padding: 20px; border-top: 5px solid var(--verde-upm); border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.card-persona h3 { color: var(--morado-upm); margin-bottom: 8px; }
.card-persona a { color: var(--verde-upm); text-decoration: none; }
.card-persona a:hover { text-decoration: underline; }
.ext { display: inline-block; margin-top: 10px; font-weight: bold; color: var(--morado-upm); }

/* ===============================
   OFERTA EDUCATIVA INTERNA
================================ */
.oferta h1 { color: var(--morado-upm); text-align: center; margin-bottom: 20px; }
.intro-oferta { text-align: center; max-width: 800px; margin: 0 auto 50px; line-height: 1.6; }
.grid-carreras { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.card-carrera { background: #fff; border-radius: 12px; overflow: hidden; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,0.08); transition: all 0.35s ease; }
.card-carrera:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,0.15), 0 0 12px rgba(111,179,65,0.6), 0 0 12px rgba(247,148,29,0.6); }
.card-carrera img { width: 100%; height: 200px; object-fit: cover; }
.card-carrera h3 { padding: 20px; color: var(--morado-upm); font-size: 18px; }
.tsu { color: var(--naranja-upm); font-weight: 600; font-size: 0.95rem; padding: 0 20px 20px 20px; margin-top: -10px; }
.texto-promo { max-width: 850px; margin: 20px auto 30px auto; line-height: 1.7; text-align: center; }

/* TITULO Y PORTADA DE LA CARRERA */
.titulo-carrera { text-align: center; padding: 50px 20px 20px 20px; }
.titulo-carrera h1 { font-size: 36px; color: var(--morado-upm); margin-bottom: 10px; font-weight: 700; line-height: 1.3; }
.subtitulo-tsu { font-size: 20px; color: var(--naranja-upm); font-weight: 600; margin-bottom: 30px; }
.portada-carrera { max-width: 1100px; margin: 0 auto 40px auto; }
.portada-carrera img { width: 100%; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.promo-carrera { max-width: 1100px; margin: 20px auto 30px auto; padding: 0 40px; line-height: 1.7; }
.contenido-carrera { max-width: 1300px; margin: 10px auto; padding: 5px 40px; line-height: 1.7; }
.contenido-carrera h2 { font-size: 28px; color: var(--morado-upm); margin-top: 50px; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 3px solid var(--verde-upm); }
.contenido-carrera h3 { font-size: 22px; color: var(--morado-upm); margin-top: 30px; margin-bottom: 10px; }
.contenido-carrera p { margin-bottom: 15px; font-size: 17px; }
.contenido-carrera ul { margin: 15px 0 25px 25px; }
.contenido-carrera li { margin-bottom: 8px; font-size: 16px; }

/* FAQ CARRERAS */
.faq-respuesta { display: none; padding: 10px 0; }
.faq-item.activo .faq-respuesta { display: block; }
.faq-pregunta { width: 100%; background: #f5f5f5; border: none; padding: 15px; text-align: left; font-size: 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-pregunta:hover { background: #eaeaea; }
.flecha { transition: transform 0.3s ease; }
.faq-item.activo .flecha { transform: rotate(180deg); }

/* ===============================
   MENSAJE DEL RECTOR
================================ */
.rector-imagen img { max-width: 380px; margin: 0 auto; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.rector-texto { margin-top: 30px; }
.firma-rector { text-align: center; margin-top: 35px; }

/* ===============================
   FORMULARIO DE PRE-REGISTRO
================================ */
.formulario-admision { max-width: 900px; margin: 50px auto; padding: 45px; background: #ffffff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.formulario-admision h1 { text-align: center; margin-bottom: 10px; color: var(--morado-upm); }
.formulario-admision p { text-align: center; max-width: 650px; margin: 0 auto 35px auto; line-height: 1.6; }
.form-registro { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-registro textarea, .form-registro select, .form-registro .campo-completo { grid-column: 1 / 3; }
.form-registro label { font-weight: 600; font-size: 15px; color: var(--morado-upm); margin-bottom: 5px; display: block; }
.form-registro input, .form-registro select, .form-registro textarea { width: 100%; padding: 12px 14px; border: 2px solid #ddd; border-radius: 8px; font-size: 15px; font-family: 'Open Sans', sans-serif; transition: all 0.25s ease; background: #fafafa; }
.form-registro input:focus, .form-registro select:focus, .form-registro textarea:focus { outline: none; border-color: var(--verde-upm); box-shadow: 0 0 0 3px rgba(111,179,65,0.15); background: #fff; }
.form-registro textarea { resize: vertical; min-height: 110px; }
.checkbox { grid-column: 1 / 3; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; margin-top: 10px; }
.checkbox input { margin-top: 4px; }
.form-registro button { grid-column: 1 / 3; margin-top: 15px; justify-self: center; }

@media (max-width:768px){
  .formulario-admision { padding: 30px; }
  .form-registro { grid-template-columns: 1fr; }
  .form-registro textarea, .form-registro select, .form-registro .campo-completo, .checkbox, .form-registro button { grid-column: 1 / 3; margin-top: 15px; justify-self: center; border: none; }
}

/* ===============================
   MICROSITIOS (LEVANTAMIENTO 3D)
================================ */
.seccion-micrositios { background-color: #F5F2E8; padding: 60px 10%; text-align: center; }
.titulo-seccion { font-family: 'Arial Black', sans-serif; font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 60px; display: inline-block; position: relative; background: linear-gradient(to right, #E87624 0%, #E87624 40%, #8E44AD 65%, #86B81B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 2px 10px 15px rgba(0, 0, 0, 0.1); animation: flotarMachin 4s ease-in-out infinite; border-bottom: none !important; }
.titulo-seccion::after { content: ''; position: absolute; bottom: -20px; left: 10%; width: 80%; height: 15px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 20"><path d="M0,15 C50,5 150,25 200,15" stroke="%2386B81B" stroke-width="4" fill="none" stroke-linecap="round"/></svg>'); background-size: 100% 100%; background-repeat: no-repeat; filter: drop-shadow(0 5px 3px rgba(0,0,0,0.1)); }
@keyframes flotarMachin { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 5px 5px rgba(0,0,0,0.05)); } 50% { transform: translateY(-10px); filter: drop-shadow(0 15px 10px rgba(0,0,0,0.15)); } }
.grid-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; max-width: 1100px; margin: 40px auto; padding: 20px; }
.logo-item { text-decoration: none; background: #ffffff; padding: 35px 25px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #F5F2E8; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05); position: relative; }
.logo-item:hover { transform: translateY(-15px); border-color: #86B81B; box-shadow: 0 15px 30px rgba(232, 118, 36, 0.2), 0 5px 15px rgba(142, 68, 173, 0.15), 0 20px 40px rgba(134, 184, 27, 0.1); }
.logo-item img { width: 100%; max-width: 180px; height: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: all 0.4s ease; }
.logo-item:hover img { filter: grayscale(0%); opacity: 1; transform: scale(1.08); }
@media (max-width: 768px) { .grid-logos { grid-template-columns: repeat(2, 1fr); } }

/* Elemento suelto del micrositio (En landing y otras) */
.micrositio-centro { display: flex; justify-content: center; margin-top: 25px; }
.box-blanco.shadow-machin { background: white; border: 2px solid #86B81B; padding: 25px; width: 280px; height: 140px; display: flex; justify-content: center; align-items: center; border-radius: 15px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.box-blanco.shadow-machin img { max-width: 100%; max-height: 100%; object-fit: contain; }
.texto-btn { display: block; text-align: center; color: #E87624; font-weight: bold; margin-top: 15px; letter-spacing: 1px; font-size: 14px; }
.btn-micrositio-img:hover .box-blanco { transform: translateY(-12px); border-color: #8E44AD; box-shadow: 0 15px 30px rgba(142, 68, 173, 0.2); }
.btn-micrositio-img:hover .texto-btn { color: #8E44AD; }

/* ===============================
   FOOTER
================================ */
footer {
  background: var(--naranja-upm); color: white; text-align: center;
  padding: 20px; font-family: 'Open Sans', sans-serif; font-size: 1rem;
  display: flex; flex-direction: column; align-items: center;
}
footer section { padding: 0; margin-bottom: 14px; }
footer h3 { font-family: 'Poppins', sans-serif; font-size: 1.25rem; margin-bottom: 6px; }
footer p { margin: 2px 0; line-height: 1.4; font-size: 0.95rem; }
footer a { color: var(--blanco); text-decoration: none; }

.redes-iconos { display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
.redes-iconos img { width: 30px; height: 30px; transition: 0.3s; }
.redes-iconos a:hover img { transform: scale(1.15); opacity: 0.85; }

/* ===============================
   WHATSAPP
================================ */
.whatsapp-float {
  position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px;
  background-color: #25D366; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
  z-index: 9999; transition: transform 0.3s ease;
}
.whatsapp-float img { width: 32px; height: 32px; }
.whatsapp-float:hover { transform: scale(1.1); }

/* ===============================
   UNIFICAR SUBTITULOS DEL SITIO
================================ */
section h2 {
  font-size: 32px !important; color: #69b34c !important; margin-top: 40px !important;
  margin-bottom: 15px !important; padding-left: 15px !important;
  border-left: 5px solid #f7941d !important; border-bottom: none !important; font-weight: bold !important;
}

/* =================================
   ANIMACIÓN PROFESIONAL PARA H1
================================= */
h1 {
  position: relative; display: block; width: fit-content;
  margin-left: auto; margin-right: auto;
  animation: tituloEntrada 1s ease forwards;
}
h1::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -10px; width: 0%; height: 4px; background: var(--naranja-upm);
  animation: lineaTitulo 1.2s ease forwards; animation-delay: 0.6s;
}
@keyframes tituloEntrada {
  0% { opacity: 0; transform: scale(0.8) translateY(20px); }
  60% { transform: scale(1.05) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes lineaTitulo {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* ==============================================
   AJUSTE DE IMÁGENES: QUÉ PASA EN LA UPM
============================================== */
/* ==============================================
   FORZAR TAMAÑO DE IMÁGENES (QUÉ PASA EN LA UPM)
============================================== */
.noticia-card img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
}

/* ==============================================
   AJUSTES EXCLUSIVOS PARA MÓVILES (SMARTPHONES)
============================================== */
@media (max-width: 768px) {
  
  /* 1. Achicamos el logo y acomodamos el menú */
  .logo-upm {
    height: 50px !important; /* Un tamaño mucho más prudente para celular */
  }
  .menu {
    padding: 10px 20px !important; /* Menos espacio a los lados de la barra morada */
  }

  /* 2. Reducimos los huecos blancos gigantes entre secciones */
  section {
    padding: 30px 15px !important; /* Reducimos drásticamente los márgenes laterales y verticales */
  }
  .landing-heading {
    margin-bottom: 25px !important; /* Pegamos más el título a las tarjetas */
  }

  /* 3. Ajustamos el tamaño de los títulos para que no abarquen toda la pantalla */
  section h2, .landing-heading h2 {
    font-size: 1.8rem !important;
    margin-top: 10px !important;
  }
  .hero-contenido h1 {
    font-size: 2.2rem !important; /* Título principal del Hero más compacto */
  }
  .hero-slogan {
    font-size: 1.2rem !important;
    margin-bottom: 15px !important;
  }

  /* 4. Acomodamos la cuadrícula de tarjetas */
  .oferta-grid-landing, .noticias-grid {
    gap: 15px !important; /* Menos espacio entre una tarjeta y otra */
  }
  /* ==============================================
   AJUSTE DE BOTONES PARA DEDOS (MÓVILES)
    ============================================== */
    @media (max-width: 768px) {
      .hero-acciones {
        flex-direction: column; /* Apila los botones verticalmente */
        width: 100%;
        gap: 15px !important;
        padding: 0 10px; /* Un poco de margen a los lados */
      }
    
      .btn-primario, 
      .btn-secundario {
        width: 100%; /* Ocupan todo el ancho disponible */
        text-align: center;
        padding: 16px 20px !important; /* Más altos para que sea fácil tocarlos */
        font-size: 1.15rem !important; /* Letra un poquito más grande */
      }
    }
    /* ==============================================
   MEJORAS AL MENÚ DESPLEGABLE (MÓVILES)
    ============================================== */
    @media (max-width: 768px) {
      
      /* Aseguramos que el menú tenga espacio al final para el botón de WhatsApp */
      .menu-links, .nav-links, ul { /* Asegúrate de que esta clase coincida con la de tu menú */
        padding-bottom: 100px !important; 
      }
    
      /* Hacemos los enlaces más grandes y fáciles de tocar */
      .menu a, .nav-links a {
        font-size: 1.2rem !important;
        padding: 15px 0 !important; /* Más espacio arriba y abajo de cada palabra */
        display: block; /* Para que toda la fila sea "clicable", no solo la letra */
      }
    
      /* Para asegurarnos de que el menú siempre esté encima de todo */
      nav, .menu-container {
        z-index: 9999 !important;
      }
    }
    
    /* ==============================================
       SECCIÓN DE VIDEO (DISEÑO PARA JÓVENES)
    ============================================== */
    .seccion-video {
      text-align: center;
      padding: 50px 15px;
      background: linear-gradient(to bottom, #ffffff, #f0f0f5); /* Un degradado muy sutil de fondo */
    }
    
    .seccion-video h2 {
      font-size: 2.2rem;
      color: var(--morado-upm); /* Asegúrate de que este color exista, o cámbialo por tu código de color morado */
      margin-bottom: 10px;
      font-weight: 800;
    }
    
    .seccion-video p {
      font-size: 1.1rem;
      color: #555;
      margin-bottom: 30px;
    }
    
    /* El truco para que el video siempre sea 16:9 y no se deforme */
    .video-wrapper {
      position: relative;
      padding-bottom: 56.25%; /* Proporción panorámica perfecta */
      height: 0;
      overflow: hidden;
      max-width: 800px; /* Para que no se vea gigantesco en pantallas de escritorio */
      margin: 0 auto; /* Lo centra perfectamente */
      
      /* El diseño "Premium" */
      border-radius: 20px; /* Esquinas modernas muy redondeadas */
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); /* Sombra profunda tipo Apple */
      border: 5px solid #ffffff; /* Un marco blanco limpio */
      transition: transform 0.3s ease; /* Preparando un efecto de hover */
    }
    
    /* Efecto sutil al pasar el mouse (solo para computadoras) */
    .video-wrapper:hover {
      transform: translateY(-5px);
    }
    
    /* Aseguramos que el video de YouTube llene todo nuestro cuadro bonito */
    .video-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 15px; /* Para que el video en sí no se salga de las esquinas redondeadas */
    }
    
    /* Ajustes para que el título no sea tan grande en el celular */
    @media (max-width: 768px) {
      .seccion-video h2 {
        font-size: 1.8rem;
      }
    }

    /* ==============================================
       DISEÑO DE DATOS CLAVE (PÁGINA CARRERAS)
    ============================================== */
    .datos-clave-carrera {
      padding: 40px 15px;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .grid-datos {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 30px;
      flex-wrap: wrap; /* Para que se adapte a celulares */
    }
    
    .dato-card {
      flex: 1;
      min-width: 250px;
      background: #ffffff;
      padding: 25px 20px;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.08);
      text-align: center;
      border-top: 4px solid var(--morado-upm);
      transition: transform 0.3s ease;
    }
    
    .dato-card:hover {
      transform: translateY(-5px);
    }
    
    .icono-dato {
      font-size: 2.5rem;
      display: block;
      margin-bottom: 10px;
    }
    
    .dato-card h3 {
      color: var(--morado-upm);
      font-size: 1.4rem;
      margin-bottom: 5px;
    }
    
    .dato-card p {
      color: #666;
      font-size: 0.95rem;
      margin: 0;
    }
    
    .promo-texto-nuevo p {
      font-size: 1.2rem;
      line-height: 1.8;
      color: #444;
      text-align: center;
      background: #f4f4f9;
      padding: 20px;
      border-radius: 10px;
    }

/* ==============================================
   DISEÑO MODERNO CONTENIDO CARRERA
============================================== */
    .contenido-carrera-moderno {
      padding: 50px 15px;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .perfil-ingreso-check {
      text-align: center;
      margin-bottom: 50px;
    }
    
    .perfil-ingreso-check h2 {
      color: var(--morado-upm);
      font-size: 2.2rem;
      font-weight: 800;
      margin-bottom: 10px;
    }
    
    .grid-checks {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin-top: 30px;
    }
    
    .check-item {
      background: #ffffff;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      font-weight: 600;
      color: #333;
      text-align: left;
      border-left: 5px solid var(--verde-upm);
    }
    
    /* FOTO DE ACCIÓN TI */
/* 1. Estilos para el contenedor de la foto */
.foto-accion-ti {
    /* Limitamos el ancho máximo del componente entero para que sea 'más chica' */
    /* Puedes ajustar este valor (ej. 500px, 60%, etc.) según prefieras */
    max-width: 600px;

    /* Centramos el contenedor horizontalmente en la página */
    margin-left: auto;
    margin-right: auto;

    /* Espaciado opcional arriba y abajo */
    margin-top: 20px;
    margin-bottom: 20px;

    /* Aseguramos que el texto del pie de foto esté centrado */
    text-align: center;
}

/* 2. Estilos para hacer la imagen responsiva dentro del contenedor */
.foto-accion-ti img {
    /* Regla de oro para responsividad: ocupa el ancho de su padre (max-width: 600px) */
    width: 100%;

    /* Asegura que no se estire más allá de su tamaño original si el contenedor fuera más grande */
    max-width: 100%;

    /* Mantiene la proporción de aspecto (no se deforma) */
    height: auto;

    /* Opcional: añade bordes redondeados o sombras para que se vea mejor */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: block; /* Elimina espacio en blanco inferior extraño */
    margin-bottom: 10px; /* Espacio con el pie de foto */
}

/* 3. Estilos para el pie de foto (opcional, para que combine) */
.pie-foto-moderno {
    display: block; /* Forzamos a que esté debajo de la imagen */
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}
    
    .pie-foto-moderno {
      display: block;
      text-align: right;
      color: #888;
      font-size: 0.9rem;
      margin-top: 10px;
      font-style: italic;
    }

    /* ==============================================
       DISEÑO CAMPO LABORAL (TARJETAS)
    ============================================== */
    .campo-laboral-moderno {
      margin-top: 60px;
      text-align: center;
    }
    
    .campo-laboral-moderno h2 {
      color: var(--morado-upm);
      font-size: 2.2rem;
      font-weight: 800;
      margin-bottom: 10px;
    }
    
    .campo-laboral-moderno > p {
      color: #555;
      font-size: 1.1rem;
      margin-bottom: 40px;
    }
    
    .grid-laboral {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 25px;
    }
    
    .card-laboral {
      background: #ffffff;
      border: 1px solid #eaeaea;
      padding: 30px 20px;
      border-radius: 20px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.03);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .card-laboral:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.1);
      border-color: var(--morado-upm); /* Cambia al color de tu universidad al pasar el mouse */
    }
    
    .icono-laboral {
      font-size: 3rem;
      margin-bottom: 15px;
    }
    
    .card-laboral h3 {
      color: #222;
      font-size: 1.3rem;
      margin-bottom: 15px;
    }
    
    .card-laboral p {
      color: #666;
      font-size: 0.95rem;
      line-height: 1.6;
      text-align: left;
    }

    /* ==============================================
       DISEÑO LLAMADO A LA ACCIÓN (CTA FINAL)
    ============================================== */
    .cta-carrera {
      /* Un fondo morado vibrante para captar la atención */
      background: linear-gradient(135deg, var(--morado-upm, #4A154B), #6E2270); 
      padding: 60px 20px;
      text-align: center;
      margin-top: 60px;
      color: #ffffff;
    }
    
    .cta-contenido {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .cta-contenido h2 {
      font-size: 2.5rem;
      margin-bottom: 15px;
      color: #ffffff;
      font-weight: 800;
    }
    
    .cta-contenido p {
      font-size: 1.2rem;
      margin-bottom: 35px;
      opacity: 0.95;
    }
    
    .botones-cta {
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    
    /* Botones con estilo de "App moderna" */
    .btn-gigante-primario,
    .btn-gigante-secundario {
      padding: 16px 35px;
      font-size: 1.15rem;
      font-weight: bold;
      border-radius: 50px; /* Bordes totalmente redondos */
      text-decoration: none;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    
    /* El botón de Inscribirse (Queremos que resalte muchísimo) */
    .btn-gigante-primario {
      background: #ffcc00; /* Un amarillo/dorado que contraste increíble con el morado */
      color: #111;
      box-shadow: 0 8px 20px rgba(255, 204, 0, 0.4);
    }
    
    .btn-gigante-primario:hover {
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 12px 25px rgba(255, 204, 0, 0.6);
    }
    
    /* El botón del Mapa Curricular (Más discreto) */
    .btn-gigante-secundario {
      background: transparent;
      color: #ffffff;
      border: 2px solid #ffffff;
    }
    
    .btn-gigante-secundario:hover {
      background: #ffffff;
      color: var(--morado-upm, #4A154B);
      transform: translateY(-5px);
    }
    
    /* Ajustes para que en el celular se vean apilados y gigantes */
    @media (max-width: 768px) {
      .botones-cta {
        flex-direction: column;
        gap: 15px;
      }
      
      .btn-gigante-primario,
      .btn-gigante-secundario {
        width: 100%; /* De lado a lado para los pulgares */
        padding: 18px 20px;
      }
      
      .cta-contenido h2 {
        font-size: 2rem;
      }
    }

}