:root {
  --crema: #ffdd9a;
  --amarillo: #ffa902;
  --amarillo80: #ffba35;
  --amarillo60: #ffcb67;
  --amarillo40: #ffdd9a;
  --amarillo20: #ffeecc;
  --navy: #041764;
  --azul80: #333e6c;
  --azul60: #666e91;
  --azul40: #999fb5;
  --azul20: #cccfda;
  --fucsia: #9857df;
  --verde: #027e59;
  --morado: #7f00a9;
  --naranja: #ff7723;
}

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

body {
  font-family: "Alexandria", sans-serif;
  padding-top: 80px;
  /* Ajusta este número según cuánto mida tu header de alto */
}

html {
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 120px;
  /* Debe ser igual al padding-top que le diste al body */
}

.titulo-seccion {
  display: flex;
  text-transform: uppercase;
}

/* Creación de la rayita amarilla con un pseudoelemento */
.titulo-seccion::before {
  content: "";               /* Obligatorio para que el pseudoelemento exista */
  display: inline-block;
  width: 6px;                /* Grosor de la rayita */
  height: 32px;              /* Alto de la rayita (ajústalo al tamaño de tu letra) */
  background-color: #ffb703; /* El color amarillo (cambia el HEX si usas otro exacto) */
  margin-right: 15px;        /* Espacio entre la rayita y el texto */
  border-radius: 2px;        /* Opcional: suaviza un poquito las esquinas de la barra */
}
  

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                HEADER
 --------------------------------------------------------------------------
 -----------------------------------------------------------------------*/

header {
  background-color: var(--navy);
  padding: 20px 0;
  font-family: sans-serif;
  position: fixed;
  /* Esto hace que se quede pegado */
  top: 0;
  /* Lo fija en la parte superior */
  left: 0;
  /* Asegura que empiece desde la izquierda */
  width: 100%;
  /* Que ocupe todo el ancho */
  z-index: 1000;
  /* Para que siempre esté por encima de las imágenes y secciones */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* Una sombra sutil para darle profundidad */
}

.container-header {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  /* separa el logo del nav*/
  align-items: center;
  padding: 0 5%;
}

.logo img {
  margin-top: 10px;
  height: 70px;
  /* Se ajusto según el tamaño del logo */
}

/* Navegación y lista */
nav {
  display: flex;
  align-items: center;
  margin-top: -10px;
  gap: 30px;
  /* espacio entre la lista de el boton */
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  /* Espacio entre cada enlace */
  margin: 0;
  padding: 0;
}

nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.3s;
}

/* Efecto de la linea amarilla debajo de "Inicio" */
nav ul li a:hover {
  color: var(--amarillo);
}

nav ul li a.active {
  border-bottom: 5px solid var(--amarillo);
  padding-bottom: 9px;
  border-radius: 1px;
}

/* Botón CTA (call to Action) */
.cta-button {
  background-color: var(--amarillo);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.cta-button:hover {
  background-color: var(--crema);
  color: var(--navy);
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                HERO
 --------------------------------------------------------------------------
 ------------------------------------------------------------------------*/

.hero {
  background-color: var(--navy);
  padding: 30px 0;
  color: white;
  min-height: 50vh;
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.container-hero {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  /*separe el contenido del formulario*/
  align-items: center;
  padding: 0 5%;
  position: relative;
  min-height: 600px;
}

/* ----------------------------------------
    Contenido izquierdo del hero (título, texto, botones)
-------------------------------------------*/
.hero-content {
  flex: 0 0 40%;
  position: relative;
  z-index: 2;
}

.hero-content h1 {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-content h1 span {
  color: var(--amarillo);
}

.hero-content p {
  font-size: 1.3rem;
  margin-right: 2rem;
  line-height: 1.5;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
  z-index: 2;
}

.secondary-button {
  background: transparent;
  border: 1px solid white;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.secondary-button:hover {
  background-color: white;
  color: var(--navy);
}

.secondary-button img {
  width: 25px;
}

.secondary-button:hover img {
  filter: invert(1);
}

.imagen-hero img {
  display: block;
  height: auto;
  width: 100%;
  max-width: 800px;
  opacity: 0.9;
}

.imagen-hero {
  position: absolute;
  bottom: -450px;
  right: 120px;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Alinea la imagen a la base si lo deseas */
  pointer-events: none;
}

/* ----------------------------------------
    Lado derecho: formulario
-------------------------------------------*/
.hero-form-card {
  background: white;
  color: #333;
  padding: 20px;
  border-radius: 20px;
  width: 450px;
  max-width: 100%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.hero-form-card h2 {
  color: var(--navy);
  margin-bottom: 10px;
  font-size: 1.5rem;
  text-align: center;
}

.hero-form-card p {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 25px;
}

/*Estilos de los inputs*/
input,
select {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
  /*Evita que el input se salga del borde*/
}

.btn-submit {
  width: 100%;
  background-color: var(--amarillo);
  color: white;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.proteccion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  font-size: 0.75rem;
  color: #888;
}

.btn-submit:hover {
  background-color: var(--crema);
  color: var(--navy);
}

.proteccion p {
  text-align: left;
}

.proteccion img {
  width: 20px;
  filter: invert(1);
}

.input-group {
  position: relative;
  margin-top: 15px;
  /*espacio extra para que la etiqueta no choque*/
  margin-bottom: 15px;
}

.input-group label {
  position: absolute;
  top: -10px;
  /*Mueve la etiqueta hacia arriba para que quede sobre el borde */
  left: 12px;
  /*alineacion horizontal*/
  background-color: white;
  /* MUY IMPORTANTE: tapa el borde del select*/
  padding: 0 5px;
  font-size: 0.85rem;
  color: #333;
  font-weight: 500;
  z-index: 1;
  /*Asegura que este por encima del borde*/
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                VENTAJAS
 --------------------------------------------------------------------------
 ------------------------------------------------------------------------*/

.ventajas {
  padding: 50px 0;
  background-color: #cccfda;
}

.container-ventajas {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0 20px;
}

.ventaja-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.ventaja-item img {
  width: 120px;
  height: 120px;
  background-color: #ffffff;
  border-radius: 50%;
  object-fit: scale-down;
  padding: 25px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.ventaja-item:hover img {
  transform: translateY(-5px);
}

.ventaja-item h3 {
  font-size: 1.5rem;
  color: #051120;
  font-weight: 600;
  margin: 0;
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                Propuesta de Valor
 --------------------------------------------------------------------------
 -----------------------------------------------------------------------*/
.propuesta-valor {
  padding: 50px 50px;
  background-color: #fcfcfc;
  margin-bottom: 50px;
}

.container-propuesta {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
}

.propuesta-texto {
  margin-top: 120px;
}

.propuesta-texto h2 {
  color: var(--navy);
  font-size: 2.3rem;
  margin-bottom: 10px;
  text-align: center;
}

.propuesta-texto h3 {
  font-size: 1.7rem;
  color: var(--azul80);
  margin-bottom: 20px;
  margin-left:20px;
  line-height: 1.2;
}

.propuesta-texto p {
  color: #555;
  font-size: 1.2rem;
  margin-left: 20px;
}

.propuesta-imagen img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                Nuestros pilares
 --------------------------------------------------------------------------
 ------------------------------------------------------------------------*/

/*sección principal*/
.nuestros-pilares {
  background-color: #ffffff;
  padding: 40px 0;
  text-align: center;
}

.container-pilares {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

.container-pilares h2 {
  font-size: 2.3rem;
  margin-top: 50px;
  padding: 0 20px;
  color: var(--navy);
}

.container-pilares p {
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 40px;
}

/*grid para las 3 columnas*/
.pilares-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /*crea 3 columnas iguales*/
  gap: 40px;
  /*espacio entre tarjetas*/
}

/*estilo de cada tarjeta (pilar)*/
.pilar {
  background-color: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  /*sombra suave*/
  display: flex;
  /*alinear imagen al texto en fila*/
  align-items: flex-start;
  /*alinea elementos al topo superior*/
  gap: 20px;
  text-align: left;
  transform: transform 0.3s ease;
}

.pilar:hover {
  transform: transLateY(-10px);
  /*Efecto de levante al pasar el mouse*/
}

/*Iconos*/
.pilar img {
  width: 80px;
  height: auto;
  flex-shrink: 0;
  /*evita que la img se deforme o encoja*/
}

/*texto dentro de la tarjeta*/
.pilar h3 {
  color: var(--azul80);
  font-size: 1.8rem;
  margin-bottom: 8px;
  margin-top: 0;
}

.pilar p {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                Quienes somos
 --------------------------------------------------------------------------
 ------------------------------------------------------------------------*/

.quienes-somos-section {
  padding: 50px 30px;
  background-color: #cccfda;
}

.container-quienes-somos {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  /*la imagen ocupará menos que el texto*/
  gap: 30px;
  align-items: center;
  padding: 0 20px;
}

/* Estilo de la img*/
.img-personas {
  grid-column: 1;
  grid-row: 2;
}

.img-personas img {
  width: 100%;
  max-width: 450px; 
  border-radius: 15px;
  display: block;
}

.contenido-derecho,
.bloques-texto,
.info-quienes-somos {
  display: contents;
}

/*contenedor de la derecha*/
.bloques-texto {
  margin: 0;
}

.parrafo-somos {
  grid-column: 2;
  grid-row: 2;

}

/*titulos en morado*/
.info-quienes-somos h3,
.proposito h3 {
  color: var(--navy);
  font-size: 2.3rem;
  margin-bottom: 15px;
  text-align: left;
}

.info-quienes-somos p,
.proposito p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  text-align: left;
}

.container-quienes-somos
.titulo-seccion {
  grid-column: span 2;
  margin-top: 0;
  margin-bottom: 20px;
}

.container-quienes-somos h3 {
  margin-top: 50px;
  font-size: 2.6rem;
  color: var(--navy)
}

.container-quienes-somos p {
  margin-bottom: 20px;

}

/*alineación del icono de propósito*/

.proposito {
  display: flex;
  align-items: flex-start;
  /*se alinea el icono con la parte superior del h3*/
  gap: 15px;
  /*Espacio exacto entre icono y texto*/
}

.titulo-con-icono {
  flex-shrink: 0;
  /*evita que la imagen se encoja*/
  padding-top: 5px;
}

.titulo-con-icono img {
  width: 70px;
  height: auto;
}

/*boton largo y morado*/
.cta-button-largo {
  background-color: var(--morado);
  color: white;
  border: none;
  padding: 18px 25px;
  border-radius: 10px;
  width: 100%;
  /*ocupa el ancho del contenedor*/
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 1rem;
}

.cta-button-largo img {
  width: 25px;
}

.cta-button-largo:hover {
  background-color: #311b92;
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                Nuestras especialidades
 --------------------------------------------------------------------------
 ------------------------------------------------------------------------*/

/* Contenedor Maestro */
.especialidades-layout-principal {
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* La imagen es un poco más ancha que la lista */
  gap: 30px;
  align-items: center;
  max-width: 100%;
  margin: 20px 200px;
  padding: 20px;
}

/* Columna de la Imagen */
.columna-imagen {
  width: 100%;
}

.columna-imagen img {
  width: 90%;
  height: auto;
  border-radius: 20px;
  display: block;
  object-fit: cover;
}

.nuestras-especialidades {
  padding: 20px auto;
  background-color: white;
  text-align: center;
}

.container-especialidades h2 {
  font-size: 2.5rem;
  color: var(--navy);
  margin-bottom: 35px;
  margin-left: 50px;
}

/*grid de 3 columnas*/
.especialidades-grid {
  display: flex;
  flex-direction: column;
  /* Forzamos a que se apilen verticalmente */
  gap: 20px;
}

/*estilo base de las tarjetas*/
.investigacion-card,
.incubacion-card,
.experiencia-card {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.investigacion-card:hover,
.incubacion-card:hover,
.experiencia-card:hover {
  transform: translateY(-5px);
}

.investigacion-card .card-header .circulo-icon {
  background-color: var(--azul80);
}

.incubacion-card .card-header .circulo-icon1 {
  background-color: var(--morado);
}

.experiencia-card .card-header .circulo-icon {
  background-color: var(--verde);
}

/*Iconos circulares superiores*/
.card-header .circulo-icon,
.card-header .circulo-icon1 {
  width: 80px;
  /* Tamaño base del círculo */
  height: 80px;
  /* Debe ser igual al ancho */
  flex-shrink: 0;
  /* Evita que se deforme si hay mucho texto al lado */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  margin-top: 30px;
  /* Quitamos el margin-bottom porque ahora están alineados horizontalmente */
}

.circulo-icon img,
.circulo-icon1 img {
  width: 45%;
  /* Tamaño relativo al círculo */
  height: auto;
}

.card-header .card-info h3 {
  font-size: 30px;
  margin-bottom: 15px;
  line-height: 1.2;
}

.especialidades-grid p {
  font-size: 15px;
  color: #555;
  margin-bottom: 20px;
  min-height: 60px;
  /*Mantiene la alineación si el texto varia*/
}

.card-header {
  display: flex;
  align-items: center;
  /* Alinea icono y texto al centro */
  gap: 15px;
  margin-bottom: 15px;
}

/*bloque de texto al lado del icono*/
.card-info {
  text-align: left;
}

.card-info h3 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.card-info p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #444;
}

/*Colores personalizados*/

/*1. investigación azul*/
.investigacion-card {
  background-color: #f0f7ff;
  border-color: #d0e4ff;
}

.investigacion-card h3 {
  color: var(--azul80);
}

.investigacion-card .btn-investigacion {
  background-color: var(--azul80);
  color: white;
}

/*2. incubación morado*/
.incubacion-card {
  background-color: #f8f4ff;
  border-color: #e8dbff;
}

.incubacion-card h3 {
  color: var(--morado);
}

.incubacion-card .btn-startups {
  background-color: var(--morado);
  color: white;
}

/*3. experiencia verde*/
.experiencia-card {
  background-color: #f2faf6;
  border-color: #d1eadf;
}

.experiencia-card h3 {
  color: var(--verde);
}

.experiencia-card .btn-experiencia {
  background-color: var(--verde);
  color: white;
}

/*botones dentro de las tarjetas*/
.btn-investigacion,
.btn-startups,
.btn-experiencia {
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.3s;
}

.btn-investigacion:hover,
.btn-startups:hover,
.btn-experiencia:hover {
  opacity: 0.8;
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                Metodología
 --------------------------------------------------------------------------
 ------------------------------------------------------------------------*/

.metodologia {
  background-color: var(--navy);
  padding: 20px 50px;
  text-align: center;
  color: white;
}

.metodologia h2 {
  margin-bottom: 20px;
  font-size: 2.3rem;
  margin-top: 50px;
}

/*Contenedor de los pasis*/
.pasos-container {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 100%;
  margin: 0 auto;
  padding: 30px 40px;
  position: relative;
}

/*La linea punteada de fondo*/
.pasos-container::before {
  content: "";
  position: absolute;
  top: 75px;
  /*Alineada al centro de los circulos blancos*/
  left: 220px;
  right: 220px;
  height: 8px;
  /* Este es el grosor de los puntos*/
  /*Degradado radial para crear círculos perfectos */
  background-image: radial-gradient(circle,
      rgba(255, 255, 255, 0.4) 35%,
      transparent 25%);
  /*Ajusta el primero valor (40px) para separar más o menos los puntos*/
  background-size: 10px 95%;
  background-repeat: repeat-x;
  z-index: 1;
}

.pasos-container::after {
  content: "";
  position: absolute;
  /*Ajustamos para que encierre desde elos números hasta los textos*/
  top: 78px;
  /*Empieza a la mitad de los circulos*/
  bottom: 20px;
  /* LLEga hasta un poco después del texto*/
  left: 20px;
  /*Margen izquierdo*/
  right: 20px;
  /*Margen derecho*/
  border: 1px solid rgba(255, 255, 255, 0.1);
  /*Linea muy tenue*/
  border-radius: 20px;
  /*Esquinas redondeadas*/
}

/*cada item de la lista*/
.paso-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  /*Para estar por encima de la linea punteada*/
}

/*contenedor del circulo e icono*/
.icono-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  overflow: visible;
}

.icono-azul2 {
  background-color: #153fb7;
}

.icono-morado2 {
  background-color: #7f00a9;
}

.icono-celeste2 {
  background-color: #00a3cc;
}

.icono-naranja2 {
  background-color: #ff7723;
}

.icono-wrap img {
  width: 65px;
  height: auto;
  filter: brightness(0) invert(1);
  /*Convierte la imagen en blanco*/
}

/*Colores especificos para cada número*/
.paso-item:nth-child(1) .numero {
  background-color: #153fb7;
}

.paso-item:nth-child(2) .numero {
  background-color: var(--morado);
}

.paso-item:nth-child(3) .numero {
  background-color: #00a3cc;
}

.paso-item:nth-child(4) .numero {
  background-color: var(--naranja);
}

.paso-item:nth-child(5) .numero {
  background-color: var(--verde);
}

/*textos*/
.paso-item h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  margin-top: 30px;
  font-weight: 700;
  text-align: center;
  /*para que el titulo rompa en dos líneas*/
}

.paso-item p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #cbd5e0;
  max-width: 300px;
  padding: 0 10px;
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                Impacto
 --------------------------------------------------------------------------
 ------------------------------------------------------------------------*/

.impacto {
  background-color: #f8f9fa;
  padding: 0 200px;
}

.container-impacto {
  padding: 30px 4%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.container-impacto h2 {
  font-size: 2.3rem;
  color: var(--navy);
  margin-bottom: 30px;
  font-weight: 800;
}

/*grid de 4 columnas con separadores*/
.impacto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  /*Quitamos gap para usasr border como sepradores*/
}

.impacto-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px;
  background-color: white;
  border-radius: 15px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.impacto-item:hover {
  transform: translateY(-5px);
}

/*Quitamos borde del último elemento*/
.impacto-item:last-child {
  border-right: none;
}

/*envoltorio del icono con fondo suave*/
.icono-bg {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.icono-bg img {
  width: 35px;
  height: auto;
}

/*textos*/
.impacto-texto {
  text-align: left;
}

.impacto-texto h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  margin-top: 0px;
  font-weight: 800;
}

.impacto-texto p {
  font-size: 1rem;
  color: #555;
  margin: 0;
  line-height: 1.4;
}

/*COLORES PERSONALIZADOS DE CADA COLUMNA*/

/*azul*/
.item-azul .icono-bg {
  background-color: #eef4ff;
}

.item-azul h3 {
  color: var(--azul80);
}

/*morado*/
.item-morado .icono-bg {
  background-color: #f5f0ff;
}

.item-morado h3 {
  color: var(--morado);
}

/*verde*/
.item-verde .icono-bg {
  background-color: #effaf3;
}

.item-verde h3 {
  color: var(--verde);
}

/*naranja*/
.item-naranja .icono-bg {
  background-color: #fff4eb;
}

.item-naranja h3 {
  color: var(--naranja);
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                Testimonios
 --------------------------------------------------------------------------
 ------------------------------------------------------------------------*/

.testimonios {
  padding: 50px 50px;
  background-color: #cccfda;
  text-align: center;
}

.testimonios h2 {
  color: var(--navy);
  margin-bottom: 30px;
  font-size: 2rem;

}

.testimonios-carousel-container {
  max-width: 600px;
  /* Ancho máximo de la tarjeta que se va a mostrar en pantalla */
  margin: 0 auto;
  overflow: hidden;
  /* Oculta las tarjetas que quedan fuera */
}

.testimonios-grid {
  display: flex;
  transition: transform 0.5s ease-in-out;
  /* Controla la suavidad del pase */
  width: 100%;
}

.testimonios-grid::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari y Edge */
}

/*buebuja de texto blanca*/
.testimonio-card {
  background-color: white;
  padding: 25px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  text-align: left;
  /* NUEVO PARA EL CARRUSEEL */
  flex: 0 0 100%;
  /* Obliga a cada tarjeta a ocupar exactamente el 100% del contenedor visual */
  box-sizing: border-box;
}

/*columna del perfil*/
.testimonio-perfil {
  flex-shrink: 0;
  /*impide que se achique la foto*/
  width: 100px;
  /*ancho fijo para la columna del avatar*/
}

.avatar {
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* border suavemente redondeados*/
  margin-bottom: 15px;
}

.autor-info {
  display: flex;
  flex-direction: column;
}

.nombre {
  font-weight: 700;
  font-size: 0.9rem;
  color: #051120;
  margin-bottom: 4px;
}

.cargo {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.2;
}

/*columna de texto */
.testimonio-texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comillas {
  width: 20px;
  /*comillas pequeñas*/
  opacity: 0.4;
}

.testimonio-texto p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #444;
  margin: 0;
  font-style: italic;
}

.carousel-wrapper {
  position: relative;
  max-width: 720px;
  /* Un poco más ancho que el contenedor de la tarjeta para dar espacio a las flechas */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

/* Estilo base para los botones de las flechas */
.nav-btn {
  background-color: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.2rem;
  color: #051120;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
  flex-shrink: 0;
}

.nav-btn:hover {
  background-color: #051120;
  color: white;
  transform: scale(1.1);
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                Preguntas frecuentes
 --------------------------------------------------------------------------
 ------------------------------------------------------------------------*/

.preguntas-frecuentes {
  padding: 50px 50px;
  background-color: white;
  color: var(--navy);
}

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

.container-faq details{
  margin: 15px 200px;
}

.container-faq h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}

.faq-item {
  background-color: white;
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid #2a3644;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* El títuo de la pregunta */

summary {
  padding: 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* flecha personalizada */
summary::after {
  content: "▼";
  font-size: 0.8rem;
  color: #00d1b2;
  transition: transform 0.3s ease;
}

/*cuando el acordeon esta abierto*/
details[open] summary::after {
  transform: rotate(180deg);
}

details[open] {
  border-color: #00d1b2;
}

/*El contenido de la respuesta*/
.faq-content {
  padding: 20px;
  color: #000000;
  line-height: 1.6;
  border-top: 1px solid #2a3644;
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                banner
 --------------------------------------------------------------------------
 ------------------------------------------------------------------------*/

.banner {
  background: linear-gradient(90deg, #000e47 0%, #1c3b9e 100%);
  /*morado vibrante*/
  padding: 60px 0;
  overflow: hidden;
  /*Para que la imagen no genere scroll lateral*/
  position: relative;
  color: white;
}

/*textura de puntos*/
.banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  /*ocupamos el lado izquierdo*/
  height: 45%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1.5px,
      transparent 1.5px);
  background-size: 18px 18px;
  /*Máscara que desvanece de izquierda a derecha*/
  -webkit-mask-image: radial-gradient(circle at top left,
      black 10%,
      transparent 50%);
  mask-image: radial-gradient(circle at top left, black 10%, transparent 50%);

  pointer-events: none;
  z-index: 1;
}

.banner-container {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 300px;
  gap: 40px;
}

.banner-content {
  flex: 1;
}

/*bloque de texto*/
.banner-info {
  flex: 1;
  max-width: auto;
  text-align: left;
}

.banner-info h2 {
  font-size: 2.1rem;
  line-height: 1.2;
  margin-bottom: 15px;
  font-weight: 700;
}

.banner-info p {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 30px;
}

/*bloque de img*/
.banner-image {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: left;
}

.banner-image img {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 20px;
}

.banner-form-wrapper {
  flex: 0 0 400px;
  /* Ancho fijo para el formulario */
}

/*columna derecha(formulario)*/
.formulario-card {
  flex: 1.5;
  background: white;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  width: 650px;
}

.formulario-card h3 {
  margin-bottom: 20px;
  text-align: center;
  color: #051120;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*dos columnas*/
  gap: 20px;
  margin-bottom: 25px;
}

.formulario-card input,
.formulario-card select {
  width: 100%;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
  font-size: 0.9rem;
  outline: none;
}

.formulario-card input:focus,
.formulario-card select:focus {
  border-color: var(--verde);
}

/*botón ancho completo */
.cta-button {
  width: 100%;
  background-color: var(--amarillo);
  color: white;
  border: none;
  padding: 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.cta-button:hover {
  background-color: var(--crema);
}

/*------------------------------------------------------------------------
 -------------------------------------------------------------------------
                Footer
 --------------------------------------------------------------------------
 ------------------------------------------------------------------------*/

.footer-inicio {
  background: var(--navy);
  color: white;
  padding: 40px 100px 5px 100px;
  font-size: 0.85rem;
}

.container-footer {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  /*control de espacios*/
  align-items: flex-start;
  gap: 0 20px;
}

/*columna logo*/
/*se le da un ancho fijo o un flex-basis para que empuje a las demás hacia el centro*/
.logo-footer {
  flex: 0 0 35%;
  /*ocupa el 35% del ancho*/
  text-align: left;
}

.logo-footer img {
  max-width: 400px;
  width: 100%;
  margin-bottom: 10px;
}

/*Estilo columnas de enlace se reparten al espacio central*/
.footer-col {
  flex: 0 0 12%;
  /*ancho controlado para no disperción*/
  text-align: left;
  margin-left: 80px;
}

.footer-col h3 {
  font-size: 1rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.logo-footer p {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-left: 20px;
  margin-right: 60px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  color: #cbd5e0;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col ul li a:hover {
  color: #00d1b2;
}

/*columna contacto*/
.contacto-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cbd5e0;
}

.contacto-lista img {
  width: 18px;
}

/*copyright abajo*/
.footer-bottom {
  max-width: 100%;
  margin: 30px auto 0px auto;
  padding-top: 10px;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.9rem;
  opacity: 0.7;
}

/*----------------- WhatsApp -------------*/
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  /* Distancia desde abajo */
  right: 20px;
  /* Distancia desde la derecha */
  background-color: #1cb654;
  /* Verde oficial de WhatsApp */
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  /* Bordes muy redondeados para estilo cápsula */
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  /* Para que siempre esté por encima de todo */
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

.whatsapp-float:hover {
  background-color: #128c7e;
  /* Verde un poco más oscuro al pasar el mouse */
  transform: scale(1.05);
  /* Crece un poquito */
}

.whatsapp-float img {
  width: 25px;
  height: 25px;
}

/* --- Responsive --- */
@media (max-width: 600px) {

  /* En celulares muy pequeños, a veces es mejor dejar solo el icono */
  .whatsapp-float span {
    display: none;
  }

  .whatsapp-float {
    padding: 15px;
    border-radius: 50%;
    /* Se vuelve un círculo perfecto */
  }
}

/* ESTILOS DEL MODAL */
/* El fondo oscuro */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  /* Oscurece el fondo */
  display: none;
  /* Escondido por defecto */
  justify-content: center;
  align-items: center;
  z-index: 10000;
  /* Por encima de todo, incluso del header */
  backdrop-filter: blur(5px);
  /* Efecto de desenfoque premium */
}

/* El contenedor del formulario */
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 20px;
  position: relative;
  max-width: 680px;
  width: 90%;
  animation: aparecer 0.3s ease-out;
}

.modal-content p {
  margin-bottom: 20px;
}

@keyframes aparecer {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Botón de cerrar (X) */
.close-modal {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #333;
}

/*-------------MediaQuery--------------*/

/* =============================================
   Menú hamburguesa (oculto en desktop)
   ============================================= */

.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  background-color: white;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Animación del hamburguesa a X */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* =============================================
   PANTALLA PEQUEÑA — max-width: 1480px
   ============================================= */

@media (max-width: 1480px) {
  .imagen-hero img {
    display: block;
    height: auto;
    width: 100%;
    max-width: 600px;
    opacity: 0.9;
  }

  .imagen-hero {
    position: absolute;
    bottom: -250px;
    right: 10%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Alinea la imagen a la base si lo deseas */
    pointer-events: none;
  }

  .propuesta-texto {
    margin-top: 40px;
  }

  .nuestras-especialidades {
    padding: 20px auto;
    background-color: white;
    text-align: center;
  }

  .especialidades-layout-principal {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* La imagen es un poco más ancha que la lista */
    gap: 30px;
    align-items: center;
    max-width: 100%;
    margin: 20px 40px;
    padding: 20px;
  }

  /*estilo base de las tarjetas*/
  .investigacion-card,
  .incubacion-card,
  .experiencia-card {
    border-radius: 10px;
  }

  .card-header .card-info h3 {
    font-size: 25px;
    margin-bottom: 15px;
    line-height: 1.2;
  }

  .especialidades-grid p {
    font-size: 12px;
    color: #555;
    margin-bottom: 20px;
    min-height: 60px;
    /*Mantiene la alineación si el texto varia*/
  }

  .card-header {
    display: flex;
    align-items: center;
    /* Alinea icono y texto al centro */
    gap: 15px;
    margin-bottom: 15px;
  }

  /*bloque de texto al lado del icono*/
  .card-info {
    text-align: left;
  }

  /*botones dentro de las tarjetas*/
  .cta-button {
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.3s;
  }

  .cta-button:hover {
    opacity: 0.8;
  }

  .banner-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 100px;
    gap: 40px;
  }
}

/* =============================================
   PANTALLA PEQUEÑA — max-width: 1366px
   ============================================= */

@media (max-width: 1366px) {
  .imagen-hero img {
    display: block;
    height: auto;
    width: 100%;
    max-width: 600px;
    opacity: 0.9;
  }

  .imagen-hero {
    position: absolute;
    bottom: -220px;
    right: 10%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Alinea la imagen a la base si lo deseas */
    pointer-events: none;
  }

  .nuestras-especialidades {
    padding: 20px auto;
    background-color: white;
    text-align: center;
  }

  .especialidades-layout-principal {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* La imagen es un poco más ancha que la lista */
    gap: 30px;
    align-items: center;
    max-width: 100%;
    margin: 20px 40px;
    padding: 20px;
  }

  /*estilo base de las tarjetas*/
  .investigacion-card,
  .incubacion-card,
  .experiencia-card {
    border-radius: 10px;
  }

  .card-header .card-info h3 {
    font-size: 25px;
    margin-bottom: 15px;
    line-height: 1.2;
  }


  .especialidades-grid p {
    font-size: 12px;
    color: #555;
    margin-bottom: 20px;
    min-height: 60px;
    /*Mantiene la alineación si el texto varia*/
  }

  .card-header {
    display: flex;
    align-items: center;
    /* Alinea icono y texto al centro */
    gap: 15px;
    margin-bottom: 15px;
  }

  /*bloque de texto al lado del icono*/
  .card-info {
    text-align: left;
  }

  /*botones dentro de las tarjetas*/
  .cta-button {
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.3s;
  }

  .cta-button:hover {
    opacity: 0.8;
  }

  .banner-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 50px;
    gap: 40px;
  }



}

/* =============================================
   TABLET — max-width: 1024px
   ============================================= */

@media (max-width: 1024px) {

  /* --- HEADER --- */
  .container-hero {
    min-height: auto;
    padding: 40px 5%;
  }

  .imagen-hero {
    width: 40%;
    bottom: 5%;
    left: 40%;
  }

  nav ul {
    gap: 12px;
  }

  nav ul li a {
    font-size: 13px;
  }

  /* --- HERO --- */
  .container-hero {
    flex-direction: column;
    gap: 30px;
    padding: 0 5%;
  }

  .hero-content {
    flex: none;
    max-width: 100%;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 2.4rem;
  }

  .hero-content p {
    margin-right: 0;
    font-size: 1.1rem;
  }

  .hero-buttons {
    justify-content: center;
    margin-top: 30px;
  }

  .hero-form-card {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  /* --- PILARES --- */
  .pilares-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pilar:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }

  /* --- QUIÉNES SOMOS --- */
  .quienes-somos-section {
    padding: 40px 5%;
  }

  .container-quienes-somos {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .img-personas img {
    max-width: 500px;
    margin: 0 auto;
  }

  /* --- ESPECIALIDADES --- */
  .nuestras-especialidades {
    padding: 20px 5%;
  }

  /* --- METODOLOGÍA --- */
  .metodologia {
    padding: 20px 5%;
  }

  .pasos-container {
    padding: 30px 10px;
  }

  .pasos-container::before {
    left: 100px;
    right: 100px;
  }

  .paso-item p {
    max-width: 160px;
    font-size: 0.8rem;
  }

  .paso-item h3 {
    font-size: 1rem;
  }

  /* --- IMPACTO --- */
  .container-impacto {
    padding: 50px 5%;
  }

  .impacto-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .impacto-item:nth-child(2) {
    border-right: none;
  }

  .impacto-item:nth-child(3),
  .impacto-item:nth-child(4) {
    border-top: 1px solid #eee;
  }

  .impacto-item:last-child {
    border-right: none;
  }

  /* --- TESTIMONIOS --- */
  .testimonios {
    padding: 50px 5%;
  }

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

  .testimonios-grid .testimonio-card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }

  /* --- BANNER --- */
  .banner-container {
    padding: 20px 5%;
    flex-wrap: wrap;
    gap: 20px;
  }

  .banner-info {
    max-width: 100%;
    flex: 1 1 100%;
    text-align: center;
  }

  .banner-actions {
    flex: 1 1 100%;
    justify-content: center;
  }

  .banner-image {
    display: none;
  }

  /* --- CONTACTO --- */
  .contacto {
    padding: 50px 5%;
  }

  /* --- FOOTER --- */
  .footer-inicio {
    padding: 40px 5% 5px 5%;
  }

  .logo-footer {
    flex: 0 0 25%;
  }

  .footer-col {
    flex: 0 0 18%;
  }
}

/* =============================================
   TABLET PEQUEÑA / MÓVIL GRANDE — max-width: 768px
   ============================================= */

@media (max-width: 768px) {

  /* --- HEADER + MENÚ HAMBURGUESA --- */
  .menu-toggle {
    display: flex;
  }

  nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--navy);
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 30px 30px;
    gap: 0;
    transition: right 0.4s ease;
    z-index: 1000;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
  }

  nav.active {
    right: 0;
  }

  nav ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  nav ul li {
    width: 100%;
  }

  nav ul li a {
    display: block;
    padding: 15px 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  nav ul li a.active {
    border-bottom: 1px solid var(--verde);
    padding-bottom: 15px;
  }

  nav .cta-button {
    margin-top: 25px;
    width: 100%;
    text-align: center;
  }

  /* --- HERO --- */
  .hero {
    padding: 30px 0;
  }

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

  .hero-buttons .cta-button,
  .hero-buttons .secondary-button {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    text-align: center;
  }

  .container-hero {
    flex-direction: column;
    /* Cambia la dirección a vertical: texto arriba, formulario abajo */
    gap: 30px;
    padding: 30px 20px;
  }

  .hero-content {
    flex: 0 0 100%;
    text-align: center;
    /* Centramos el texto para que se vea mejor en móvil */
  }

  .hero-content h1 {
    font-size: 2rem;
    /* Achicamos un poco el título en celulares */
  }

  .hero-content p {
    margin-right: 0;
    /* Quitamos el margen derecho excesivo */
    font-size: 1.1rem;
  }

  .hero-buttons {
    justify-content: center;
    /* Centra el botón de WhatsApp */
  }

  /* Aquí acomodamos la imagen para que quede de fondo decorativo real en el móvil */
  .imagen-hero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    /* Ocupará buena parte del fondo */
    opacity: 0.2;
    /* Le bajamos la opacidad para que no compita con el texto ni el formulario */
    bottom: auto;
    right: auto;
  }

  .hero-form-card {
    width: 100%;
    /* El formulario toma todo el ancho disponible del celular */
  }

  /* --- PILARES --- */
  .pilares-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pilar:last-child {
    max-width: 100%;
  }

  .container-pilares h2 {
    font-size: 2rem;
  }

  /* --- QUIÉNES SOMOS --- */
  .bloques-texto {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .proposito {
    flex-wrap: wrap;
  }

  .titulo-con-icono img {
    width: 30px;
  }

  .cta-button-largo {
    font-size: 0.85rem;
    padding: 15px 20px;
  }

  /* --- ESPECIALIDADES --- */
  .especialidades-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .container-especialidades h2 {
    font-size: 1.8rem;
  }

  .especialidades-grid p {
    min-height: auto;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-info h3 {
    font-size: 1.15rem;
  }

  /* --- METODOLOGÍA --- */
  .pasos-container {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 30px 20px;
  }

  .pasos-container::before {
    display: none;
  }

  .pasos-container::after {
    display: none;
  }

  .paso-item {
    width: 100%;
    max-width: 350px;
  }

  .paso-item h3 {
    max-width: 100%;
  }

  .paso-item p {
    max-width: 100%;
    text-align: center;
  }

  .numero {
    left: -40px;
    top: 25px;
  }

  /* --- IMPACTO --- */
  .impacto-grid {
    grid-template-columns: 1fr;
  }

  .impacto-item {
    border-right: none !important;
    border-bottom: 1px solid #eee;
    border-top: none !important;
  }

  .impacto-item:last-child {
    border-bottom: none;
  }

  .container-impacto h2 {
    font-size: 1.7rem;
  }

  /* --- TESTIMONIOS --- */
  .testimonios-grid {
    grid-template-columns: 1fr;
  }

  .testimonios-grid .testimonio-card:last-child {
    max-width: 100%;
  }

  .testimonio-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .testimonio-perfil {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .avatar {
    width: 70px;
    margin-bottom: 0;
  }

  .testimonio-texto {
    align-items: center;
  }

  .testimonios h2 {
    font-size: 1.7rem;
  }

  /* --- BANNER --- */
  .banner {
    padding: 40px 0;
  }

  .banner-info h2 {
    font-size: 1.5rem;
  }

  .banner-actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .btn-agenda,
  .btn-wts {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* --- CONTACTO --- */
  .container-contacto {
    flex-direction: column;
    gap: 30px;
  }

  .formulario-card {
    padding: 20px;
    width: 340px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  /* --- FOOTER --- */
  .container-footer {
    flex-wrap: wrap;
    gap: 30px 20px;
  }

  .logo-footer {
    flex: 0 0 100%;
    text-align: center;
  }

  .logo-footer img {
    width: 160px;
  }

  .footer-col {
    flex: 0 0 calc(33% - 20px);
  }
}

/* =============================================
   CELULAR — max-width: 480px
   ============================================= */

@media (max-width: 480px) {

  /* --- HEADER --- */
  header {
    padding: 15px 0;
  }

  .logo img {
    height: 38px;
  }

  /* --- HERO --- */
  .container-hero {
    display: flex;
    flex-direction: column;
    /* Apila todo en vertical */
  }

  .hero-content {
    display: flex;
    flex-direction: column;
  }

  .imagen-hero {
    position: relative;
    /* Vuelve al flujo normal en móvil */
    transform: none;
    left: 0;
    top: 0;
    margin-bottom: 20px;
    opacity: 100%;
  }

  .container-hero {
    padding: 0 4%;
  }

  .hero-content h1 {
    font-size: 1.6rem;
  }

  .hero-content p {
    font-size: 0.9rem;
  }

  .hero-buttons {
    margin-top: 20px;
  }

  .hero-form-card {
    padding: 15px;
  }

  .hero-form-card h2 {
    font-size: 1.2rem;
  }

  .hero-form-card p {
    font-size: 0.8rem;
    margin-bottom: 15px;
  }

  .container-ventajas {
    grid-template-columns: 1fr;
    /* Una sola columna en celulares pequeños */
  }

  .propuesta-valor {
    padding: 10px;
    margin-top: 0 !important;
  }

  .propuesta-valor img {
    width: 300px;
  }

  .container-propuesta {
    grid-template-columns: 1fr;
    /* Una sola columna */
    width: 100%;
    gap: 30px;
  }

  .propuesta-texto {
    max-width: 100% !important;
    text-align: left;
    width: 100%;
  }

  .titulo-seccion {
    display: flex;
    text-transform: uppercase;
  }

  .propuesta-texto h2 {
    text-align: left;
    font-size: 1.5rem;
  }



  .propuesta-texto h3 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-left: 25px;
    margin-right: 25px;
  }

  .propuesta-texto p {
    font-size: 1rem;
    padding: 0;
    margin-left: 25px;
    margin-right: 25px;
  }

  .propuesta-imagen img {
    margin-left: 25px;
    margin-right: 25px;
  }

  /* --- PILARES --- */
  .nuestros-pilares {
    padding: 30px 0;
  }

  .container-pilares {
    padding: 0 4%;
  }

  .container-pilares h2 {
    font-size: 1.5rem;
    padding: 0;
    margin-bottom: 20px;
  }

  .pilar {
    padding: 20px;
    gap: 15px;
  }

  .pilar h3 {
    font-size: 1.4rem;
  }

  .pilar img {
    width: 40px;
  }

  /* --- QUIÉNES SOMOS --- */
  .quienes-somos-section {
    padding: 30px 4%;
  }

  .container-quienes-somos h3 {
    font-size: 1.5rem;
  }

  .info-quienes-somos p,
  .proposito p {
    font-size: 0.85rem;
  }

  .cta-button-largo {
    font-size: 0.78rem;
    padding: 14px 15px;
    gap: 10px;
  }

  .cta-button-largo img {
    width: 18px;
  }

  /* --- ESPECIALIDADES --- */

  .nuestras-especialidades {
    /* El !important es para ganar al padding de 100px */
    width: 100%;
    box-sizing: border-box;
  }

  .especialidades-layout-principal {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .container-especialidades .titulo-seccion {
    text-align: left;
    font-size: 1.5rem;
    margin-left: 0 !important;

  }

  .columna-imagen {
    width: 100%;
  }

  .columna-imagen img {
    width: 85%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    border-radius: 15px;
  }

  .especialidades-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  

  .card-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .investigacion-card,
  .incubacion-card,
  .experiencia-card {
    width: 100% !important;
    /* Forzamos a que no use px fijos */
    max-width: 100%;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    /* Fundamental para que el padding no sume ancho */
    text-align: center;
    /* Opcional: centra el texto para que se vea mejor en móvil */
  }

  .main-icon {
    width: 45px !important;
    height: 45px !important;
  }

  .card-header .circulo-icon,
  .card-header .circulo-icon1 {
    width: 80px;
    height: 80px;
  }

  .card-info h3 {
    font-size: 1.2rem;
    margin-top: 10px;
  }

  .card-info p {
    font-size: 0.8rem;
  }

  .lista-check li {
    font-size: 0.82rem;
  }

  .cta-button {
    width: 100%;
    box-sizing: border-box;
  }

  /* --- METODOLOGÍA --- */
  .metodologia {
    padding: 30px 4%;
  }

  .metodologia h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

  .icono-wrap {
    width: 70px;
    height: 70px;
    margin-bottom: 5px;
    margin-top: 10px;
  }

  .icono-wrap img {
    width: 35px;
  }

  .paso-item h3 {
    font-size: 0.95rem;
  }

  .paso-item p {
    font-size: 0.8rem;
  }

  /* --- IMPACTO --- */

  .impacto {
    padding: 40px 15px !important;
    /* El !important es para ganar al padding de 100px */
    width: 100%;
    box-sizing: border-box;
  }

  .container-impacto {
    padding: 0 20px;
  }

  .container-impacto h2 {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }

  .impacto-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .impacto-item {
    padding: 20px;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .icono-bg {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
  }

  .icono-bg img {
    width: 35px;
  }

  .impacto-texto {
    text-align: center;
  }

  .impacto-texto h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
  }

  .impacto-texto p {
    font-size: 0.85rem;
    padding: 0 5px;
  }

  /* --- TESTIMONIOS --- */
  .testimonios {
    padding: 30px 4%;
  }

  .testimonios h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: left;
  }

  .testimonio-card {
    padding: 20px;
  }

  .testimonio-perfil {
    gap: 10px;
  }

  .avatar {
    width: 55px;
  }

  .nombre {
    font-size: 0.8rem;
  }

  .cargo {
    font-size: 0.7rem;
  }

  .testimonio-texto p {
    font-size: 0.82rem;
  }

  /* --- BANNER --- */
  .banner {
    padding: 30px 0;
  }

  .banner-container {
    padding: 15px 4%;
  }

  .banner-info h2 {
    font-size: 1.5rem;
    text-align: left;
  }

  .banner-info p {
    font-size: 0.85rem;
    text-align: left;
    margin-left: 20px;
  }

  .btn-agenda,
  .btn-wts {
    padding: 10px 15px;
    font-size: 0.82rem;
  }

  .banner .banner-image img {
    width: 20%;
  }

  /* --- preguntas --- */

  .preguntas-frecuentes {
    padding: 40px 15px !important;
    /* El !important es para ganar al padding de 100px */
    width: 100%;
    box-sizing: border-box;
  }
  .container-faq h2{
    text-align: left;
    font-size: 1.5rem;
  }

  .container-faq p {
    margin-bottom: 20px;
  }

  .container-faq details{
  margin: 15px 0;
}

  /* --- CONTACTO --- */
  .contacto {
    padding: 30px 4%;
  }

  .datos-contacto h2 {
    font-size: 1.5rem;
  }

  .subtitulo {
    font-size: 0.85rem;
  }

  .formulario-card {
    padding: 10px;
    width: 330px;
    margin-left: 33px;
  }

  .formulario-card input,
  .formulario-card select {
    padding: 12px;
    font-size: 0.85rem;
  }

  .btm-enviar {
    padding: 14px;
    font-size: 0.9rem;
  }

  /* --- FOOTER --- */
  .footer-inicio {
    padding: 30px 4% 5px 4%;
  }

  .footer-col {
    flex: 0 0 55%;
    text-align: center;
  }

  .footer-col h3 {
    margin-bottom: 10px;
  }

  .footer-col ul li {
    margin-bottom: 8px;
  }

  .contacto-lista li {
    justify-content: center;
  }

  .footer-bottom p {
    font-size: 0.75rem;
  }

  .logo-footer p {
    margin: auto;
  }
}

@media (max-width: 768px) {
  .container-ventajas {
    /* En tablet/celular se ponen 2 y 2, o 1 y 1 */
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }
}