/* ============================================================
   ESTILOS: index.html
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background-color: var(--color-fondo-principal);
  padding: var(--espaciado-2xl) 0;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
}

.hero__contenedor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--espaciado-xl);
}

/* Texto */
.hero__titulo {
  font-size: clamp(2rem, 5vw, var(--fs-3xl));
  color: var(--color-texto-titulo);
  margin-bottom: var(--espaciado-sm);
  line-height: 1.15;
}

.hero__subtitulo {
  font-size: var(--fs-md);
  color: var(--color-texto-cuerpo);
  margin-bottom: var(--espaciado-lg);
  max-width: 42ch;
}

/* Imagen */
.hero__imagen-wrapper {
  display: flex;
  justify-content: flex-end;
}

.hero__imagen {
  width: 100%;
  max-width: 560px;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-lg);
}

/* Responsive */
@media (max-width: 991px) {
  .hero {
    min-height: auto;
    padding: var(--espaciado-xl) 0;
  }

  .hero__contenedor {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__subtitulo {
    margin-inline: auto;
  }

  .hero__imagen-wrapper {
    justify-content: center;
    order: -1;
  }

  .hero__imagen {
    height: 320px;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .hero__imagen {
    height: 240px;
  }
}

/* ============================================================
   MISIÓN
   ============================================================ */
.mision {
  padding: var(--espaciado-2xl) 0;
}

.mision__contenedor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--espaciado-xl);
}

.mision__titulo {
  color: var(--color-texto-azul);
  font-size: clamp(1.75rem, 4vw, var(--fs-2xl));
  text-align: center;
  margin-bottom: var(--espaciado-lg);
}

.mision__descripcion {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-xl);
  line-height: 1.8;
  max-width: 44ch;
  margin-bottom: 0;
}

.mision__imagen-wrapper {
  display: flex;
  justify-content: flex-end;
}

.mision__imagen {
  width: 100%;
  max-width: 315px;
  height: 420px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-lg);
}

@media (max-width: 991px) {
  .mision__contenedor {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mision__descripcion {
    margin-inline: auto;
  }

  .mision__imagen-wrapper {
    justify-content: center;
  }

  .mision__imagen {
    max-width: 100%;
    height: 300px;
  }
}

@media (max-width: 480px) {
  .mision__imagen {
    height: 220px;
  }
}

/* ============================================================
   EXPERIENCIAS
   ============================================================ */
.experiencias {
  background-color: var(--color-fondo-principal);
  padding: var(--espaciado-2xl) 0;
}

/* Encabezado */
.experiencias__encabezado {
  margin-bottom: var(--espaciado-xl);
}

.experiencias__subtitulo {
  display: block;
  font-family: var(--fuente-cuerpo);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-btn-cta);
  margin-bottom: 0.5rem;
}

.experiencias__titulo {
  font-size: clamp(1.75rem, 4vw, var(--fs-2xl));
  color: var(--color-texto-titulo);
  margin-bottom: var(--espaciado-xs);
}

.experiencias__texto {
  font-size: var(--fs-md);
  color: var(--color-texto-cuerpo);
  margin-bottom: 0;
}

/* Grid de tarjetas */
.experiencias__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaciado-xl);
}

/* Tarjeta */
.tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 400px;
  background-color: #FFFFFF;
  border: 2px solid var(--color-seccion);
  border-radius: var(--radio-card);
  padding: var(--espaciado-md);
  box-shadow: var(--sombra-md);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-lg);
}

.tarjeta__titulo {
  font-size: var(--fs-lg);
  color: var(--color-texto-titulo);
  text-align: center;
  margin-bottom: var(--espaciado-sm);
}

/* Imagen */
.tarjeta__imagen-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: var(--espaciado-sm);
}

.tarjeta__imagen {
  width: 245px;
  height: 245px;
  object-fit: cover;
  border-radius: var(--radio-card);
}

/* Descripción */
.tarjeta__descripcion {
  font-size: var(--fs-sm);
  color: var(--color-texto-cuerpo);
  text-align: center;
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: var(--espaciado-sm);
}

/* Botón */
.tarjeta__btn {
  margin-top: auto;
  font-size: var(--fs-sm);
  padding: 0.6rem 1.5rem;
}

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

@media (max-width: 580px) {
  .experiencias__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FRASE + FOTO
   ============================================================ */
.frase {
  padding: var(--espaciado-2xl) 0;
}

.frase__contenedor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--espaciado-xl);
}

.frase__titulo {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-texto-azul);
  line-height: 1.2;
  margin-bottom: 0;
}

.frase__titulo-acento {
  display: block;
  font-style: italic;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.5rem;
}

.frase__imagen-wrapper {
  display: flex;
  justify-content: flex-end;
}

.frase__imagen {
  width: 100%;
  max-width: 520px;
  height: 420px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-lg);
}

@media (max-width: 991px) {
  .frase__contenedor {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .frase__imagen-wrapper {
    justify-content: center;
    order: -1;
  }

  .frase__imagen {
    max-width: 100%;
    height: 300px;
  }
}

@media (max-width: 480px) {
  .frase__imagen {
    height: 220px;
  }
}

/* ============================================================
   COMENTARIOS
   ============================================================ */
.comentarios {
  background-color: var(--color-fondo-principal);
  padding: var(--espaciado-2xl) 0;
}

/* Carrusel */
.comentarios__carrusel {
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
}

/* Pista: oculta el overflow y muestra solo 1 tarjeta */
.comentarios__pista {
  flex: 1;
  overflow: hidden;
}

/* Tarjeta de comentario */
.comentario {
  background-color: rgba(31, 60, 136, 0.12);
  border-radius: var(--radio-card);
  padding: var(--espaciado-xl) var(--espaciado-lg);
  box-shadow: var(--sombra-md);
  text-align: center;
  display: none;
}

.comentario.comentario--activo {
  display: block;
}

/* Texto del comentario: tipografía de título */
.comentario__texto {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.25rem, 3vw, var(--fs-xl));
  font-weight: 600;
  color: var(--color-texto-titulo);
  line-height: 1.4;
  margin-bottom: var(--espaciado-sm);
  quotes: none;
}

.comentario__autor {
  font-family: var(--fuente-cuerpo);
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--color-texto-cuerpo);
}

/* Botones de navegación */
.comentarios__btn {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radio-circulo);
  background-color: var(--color-seccion);
  color: #FFFFFF;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transicion), transform var(--transicion);
}

.comentarios__btn:hover {
  background-color: var(--color-btn-cta);
  transform: scale(1.08);
}

/* Indicadores */
.comentarios__indicadores {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--espaciado-md);
}

.comentarios__punto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radio-circulo);
  background-color: rgba(31, 60, 136, 0.25);
  transition: background-color var(--transicion);
}

.comentarios__punto--activo {
  background-color: var(--color-seccion);
}

/* ============================================================
   FAQ — PREGUNTAS FRECUENTES
   ============================================================ */
.faq {
  background-color: var(--color-fondo-principal);
  padding: var(--espaciado-2xl) 0;
}

.faq__contenedor {
  max-width: 760px;
  text-align: center;
}

.faq__titulo {
  font-size: clamp(1.75rem, 4vw, var(--fs-2xl));
  color: var(--color-texto-titulo);
  margin-bottom: var(--espaciado-xl);
}

/* Acordeón — sobreescribe Bootstrap */
.faq__acordeon {
  text-align: left;
  margin-bottom: var(--espaciado-xl);
}

.faq__item {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-seccion);
}

.faq__item:first-child {
  border-top: 2px solid var(--color-seccion);
}

.faq__pregunta {
  background: transparent !important;
  color: var(--color-texto-titulo) !important;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: var(--fs-base);
  padding: var(--espaciado-sm) 0;
  box-shadow: none !important;
}

.faq__pregunta::after {
  filter: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231F3C88'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.faq__respuesta {
  font-family: var(--fuente-cuerpo);
  font-size: var(--fs-base);
  color: var(--color-texto-cuerpo);
  padding: var(--espaciado-sm) 0 var(--espaciado-md);
  line-height: 1.7;
}

/* Bloque chatbot */
.faq__chatbot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaciado-sm);
  margin-top: var(--espaciado-xl);
}

.faq__chatbot-titulo {
  font-size: clamp(1.5rem, 3.5vw, var(--fs-xl));
  color: var(--color-texto-titulo);
  margin-bottom: 0;
}

.faq__chatbot-subtitulo {
  font-size: var(--fs-md);
  color: var(--color-texto-cuerpo);
  margin-bottom: 0;
}

.faq__chatbot-icono {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.faq__chatbot-btn {
  margin-top: var(--espaciado-xs);
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final {
  padding: var(--espaciado-2xl) 0;
}

.cta-final__contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--espaciado-lg);
}

.cta-final__titulo {
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  font-weight: 700;
  color: var(--color-texto-azul);
  line-height: 1.15;
  margin-bottom: 0;
}

.cta-final__btn {
  font-size: clamp(1.25rem, 3.5vw, 2.5rem);
  padding: 0.75rem 2.5rem;
  border-radius: var(--radio-btn);
}

@media (max-width: 480px) {
  .cta-final__btn {
    font-size: 1.125rem;
    padding: 0.65rem 1.75rem;
  }
}