/*
************************************************************
* Proyecto   : PlaneaTuPensión Digital
* Autor      : Carlos Eduardo Sánchez Guevara
* Programa   : Técnico en Programación de Software - SENA
* Archivo    : styles.css
* Objetivo   : Definir la apariencia visual de la landing page
*               (colores, tipografías, espaciados, tarjetas,
*               botones, formulario y comportamiento responsive)
*               para los elementos creados en index.html. Se
*               trabaja bajo el enfoque "Mobile First": primero se
*               escriben los estilos para celular y, mediante
*               @media queries, se van agregando los ajustes para
*               pantallas más grandes (tablet y escritorio).
*
* Fecha de creación   : 2026-05-15
* Fecha de modificación: 2026-06-30
************************************************************
*/

/* =======================================================
   PLANEATUPENSIÓN — HOJA DE ESTILOS
   Metodología de nombres: camelCase en español
   ======================================================= */

/* ---------------------------------------------------------------------
   VARIABLES CSS (también llamadas "custom properties" o "design
   tokens"). Aquí se centralizan los colores, fuentes y medidas que se
   repiten en todo el sitio: si mañana cambia un color de marca, basta
   con modificarlo aquí y se actualiza en todas las páginas.
   --------------------------------------------------------------------- */
:root {
  --colorPrimario: #002147;
  --colorAcento: #73C82F;
  --colorAcentoOscuro: #5da825;
  --colorSecundario: #FFD700;
  --colorApoyo: #69747C;
  --colorTexto: #333333;
  --colorBlanco: #ffffff;
  --colorFondoClaro: #f5f7f9;

  --fuenteTitulos: 'Montserrat', sans-serif;
  --fuenteTexto: 'Poppins', sans-serif;

  --radioBorde: 14px;
  --radioBordeChico: 8px;
  --sombraSuave: 0 6px 24px rgba(0, 33, 71, 0.10);
  --sombraTarjeta: 0 10px 30px rgba(0, 33, 71, 0.12);
  --transicionBase: all 0.25s ease;
  --anchoMaximo: 1180px;
}

/* ---------- RESET BÁSICO ----------
   Quita los márgenes y estilos por defecto que cada navegador trae
   de fábrica, para que el diseño se vea igual en Chrome, Firefox,
   Safari, etc. "box-sizing: border-box" hace que el padding y el
   borde se incluyan dentro del ancho/alto declarado de cada elemento,
   evitando que los tamaños "se descuadren". */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { list-style: none; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; }

body {
  font-family: var(--fuenteTexto);
  color: var(--colorTexto);
  line-height: 1.6;
  background-color: var(--colorBlanco);
}

/* Respeta a las personas que configuraron su sistema operativo para
   reducir animaciones (por mareo, migrañas, etc.): si esa opción está
   activada, quitamos prácticamente todas las transiciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Marca con un contorno amarillo el elemento que tiene el foco del
   teclado (al navegar con la tecla Tab), por accesibilidad. */
:focus-visible {
  outline: 3px solid var(--colorSecundario);
  outline-offset: 2px;
}

/* Contenedor genérico: centra el contenido y limita su ancho máximo
   para que el texto no se estire de borde a borde en pantallas
   gigantes. Se reutiliza dentro de casi todas las secciones. */
.contenedor {
  width: 100%;
  max-width: var(--anchoMaximo);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.contenedor--angosto { max-width: 760px; }

h1, h2, h3 {
  font-family: var(--fuenteTitulos);
  font-weight: 700;
  color: var(--colorPrimario);
  line-height: 1.25;
}

.tituloSeccion {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  text-align: center;
  margin-bottom: 2.5rem;
}
.tituloSeccion--alineadoIzquierda { text-align: left; margin-bottom: 1.25rem; }
.tituloSeccion--claro { color: var(--colorBlanco); }

.textoElevado {
  font-family: var(--fuenteTitulos);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colorSecundario);
  margin-bottom: 0.75rem;
}

/* ---------- BOTONES ----------
   Estilo compartido por el botón principal (enlaces tipo CTA) y el
   botón de envío del formulario: bordes muy redondeados (forma de
   "píldora"), sombra suave y un pequeño efecto de "elevación" al
   pasar el mouse (transform + box-shadow) gracias a la transición
   definida en --transicionBase. */
.botonPrincipal,
.botonEnviar {
  display: inline-block;
  font-family: var(--fuenteTitulos);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  color: var(--colorPrimario);
  background-color: var(--colorAcento);
  padding: 1rem 2rem;
  border-radius: 50px;
  box-shadow: var(--sombraSuave);
  transition: var(--transicionBase);
}
.botonPrincipal:hover,
.botonEnviar:hover {
  background-color: var(--colorAcentoOscuro);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 33, 71, 0.20);
}
.botonEnviar {
  width: 100%;
  border-radius: var(--radioBordeChico);
  margin-top: 0.5rem;
}

/* ---------- ENCABEZADO ----------
   "position: sticky" hace que el header se quede fijo en la parte
   superior cuando el usuario hace scroll hacia abajo, para que el
   menú y el botón de WhatsApp siempre estén a la mano. */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--colorBlanco);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}
.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.85rem;
  gap: 1rem;
}
.encabezado__logo { height: 42px; width: auto; }

/* Botón "hamburguesa" (las 3 líneas) que abre el menú en celular.
   Solo se ve en pantallas pequeñas; en escritorio se oculta más
   abajo, dentro del @media (min-width: 1140px). */
.botonMenuMovil {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.botonMenuMovil span {
  width: 24px;
  height: 2px;
  background-color: var(--colorPrimario);
  border-radius: 2px;
  transition: var(--transicionBase);
}

/* Menú de navegación en celular: es un panel que entra deslizándose
   desde la derecha (transform: translateX) al agregarle la clase
   "listaNavegacion--abierta" mediante script.js. En escritorio este
   comportamiento se desactiva (ver @media min-width: 1140px). */
.listaNavegacion {
  position: fixed;
  inset: 0 0 0 30%;
  background-color: var(--colorPrimario);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.listaNavegacion.listaNavegacion--abierta { transform: translateX(0); }
.listaNavegacion li a {
  display: inline-block;
  padding: 0.5rem 0.1rem;
  color: var(--colorBlanco);
  font-family: var(--fuenteTitulos);
  font-weight: 600;
  font-size: 1.05rem;
}
.navegacionPrincipal__cta {
  background-color: var(--colorAcento);
  color: var(--colorPrimario) !important;
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  display: inline-block;
}

.encabezado__whatsapp {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 50px;
  font-family: var(--fuenteTitulos);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--colorPrimario);
  white-space: nowrap;
  transition: var(--transicionBase);
}
.encabezado__whatsapp:hover { background-color: var(--colorFondoClaro); }
.encabezado__whatsapp img { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- HERO ----------
   Primer bloque visible de la página: fondo con degradado azul
   (los colores de marca) y texto en blanco para que contraste. */
.seccionHero {
  background: linear-gradient(160deg, var(--colorPrimario) 0%, #013267 100%);
  padding-block: 3rem 4rem;
  overflow: hidden;
}
.seccionHero__interior {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.seccionHero__contenido { color: var(--colorBlanco); }
.seccionHero__titulo {
  color: var(--colorBlanco);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  margin-bottom: 1rem;
}
.seccionHero__subtitulo {
  font-size: 1.05rem;
  color: #d7e2ef;
  max-width: 56ch;
  margin-bottom: 1.75rem;
}

/* "Tira de confianza": 4 cifras en cuadrícula (CSS Grid). En celular
   se muestran 2 columnas x 2 filas; en escritorio, las 4 en una
   sola fila (ver @media min-width: 980px más abajo). */
.tiraConfianza {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.tiraConfianza__cifra {
  font-family: var(--fuenteTitulos);
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--colorSecundario);
}
.tiraConfianza__etiqueta {
  font-size: 0.8rem;
  color: #c5d2e1;
  margin-left: 0;
}

/* ---------- TARJETA DE FORMULARIO ----------
   Caja blanca flotante (con sombra) que contiene el formulario de
   captación de leads, para que resalte sobre el fondo azul del hero. */
.tarjetaFormulario {
  background-color: var(--colorBlanco);
  border-radius: var(--radioBorde);
  box-shadow: var(--sombraTarjeta);
  padding: 1.75rem;
  scroll-margin-top: 90px;
}
.tarjetaFormulario__titulo {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.tarjetaFormulario__texto {
  font-size: 0.9rem;
  color: var(--colorApoyo);
  margin-bottom: 1.25rem;
}

/* Formulario en una sola columna SIEMPRE (celular, tablet y
   escritorio): se eligió este diseño a propósito para que ningún
   campo (especialmente los <select> con textos largos) se vea
   apretado o se salga de la tarjeta. */
.formularioLeads {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.formularioLeads__campo { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
.formularioLeads__campo label {
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--fuenteTitulos);
  color: var(--colorPrimario);
}
.formularioLeads__campo input,
.formularioLeads__campo select,
.formularioLeads__campo textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d7dde2;
  border-radius: var(--radioBordeChico);
  background-color: var(--colorFondoClaro);
  transition: var(--transicionBase);
  font-size: 0.95rem;
}
.formularioLeads__campo input:focus,
.formularioLeads__campo select:focus,
.formularioLeads__campo textarea:focus {
  border-color: var(--colorAcento);
  background-color: var(--colorBlanco);
}
/* Grupo de opciones "Preferencia de contacto": se apilan una debajo de otra
   (display: flex en columna) para que SIEMPRE queden alineadas a la
   izquierda, sin depender de cómo el navegador reparta el espacio en una
   fila con ajuste de línea (flex-wrap). */
.formularioLeads__radios {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  border: none;
  padding: 0;
}
.formularioLeads__radios legend {
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--fuenteTitulos);
  color: var(--colorPrimario);
  margin-bottom: 0.2rem;
  padding: 0;
}
.formularioLeads__radios label,
.formularioLeads__checkbox label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--colorTexto);
  text-align: left;
}
/* El input (círculo/cuadro) nunca se encoge, así el texto largo no lo deforma */
.formularioLeads__radios input,
.formularioLeads__checkbox input {
  flex-shrink: 0;
}
.formularioLeads__checkbox { font-size: 0.8rem; }
.formularioLeads__mensajeEstado {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--colorAcentoOscuro);
  min-height: 1.2em;
}

/* ---------- SECCIÓN PROBLEMA ----------
   Bloque de texto centrado, sin fondo de color, conectando con la
   situación del visitante. */
.seccionProblema { padding-block: 4rem; }
.seccionProblema__interior { max-width: 820px; margin-inline: auto; text-align: center; }
.seccionProblema__parrafo { margin-bottom: 1.25rem; font-size: 1.05rem; }

/* ---------- SECCIÓN NOSOTROS ----------
   En celular la foto y el texto se apilan uno debajo del otro
   (flex-direction: column); en tablet/escritorio se ponen lado a
   lado (ver @media min-width: 720px). */
.seccionNosotros { background-color: var(--colorFondoClaro); padding-block: 4rem; }
.seccionNosotros__interior {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}
.seccionNosotros__imagen img {
  border-radius: var(--radioBorde);
  box-shadow: var(--sombraTarjeta);
}
.seccionNosotros__texto p { margin-bottom: 1rem; }

/* ---------- SERVICIOS ----------
   Cuadrícula de tarjetas con efecto de "elevación" al pasar el
   mouse (translateY + box-shadow), igual que los botones. */
.seccionServicios { padding-block: 4rem; }
.seccionServicios__intro {
  max-width: 700px;
  margin: 0 auto 2.5rem;
  text-align: center;
  color: var(--colorApoyo);
}
.cuadriculaServicios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.tarjetaServicio {
  background-color: var(--colorBlanco);
  border: 1px solid #ecedf0;
  border-radius: var(--radioBorde);
  box-shadow: var(--sombraSuave);
  padding: 1.75rem;
  transition: var(--transicionBase);
}
.tarjetaServicio:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombraTarjeta);
}
.tarjetaServicio__icono {
  width: 38px;
  height: 38px;
  margin-bottom: 1rem;
  filter: invert(72%) sepia(60%) saturate(700%) hue-rotate(2deg) brightness(105%);
}
.tarjetaServicio h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.tarjetaServicio p { font-size: 0.92rem; color: var(--colorApoyo); }
.seccionServicios__nota {
  margin-top: 2.5rem;
  text-align: center;
  color: var(--colorApoyo);
  font-size: 0.92rem;
}

/* ---------- TESTIMONIOS ----------
   Fondo azul oscuro (color primario) para diferenciar visualmente
   esta sección de las demás, que tienen fondo claro. */
.seccionTestimonios {
  background-color: var(--colorPrimario);
  padding-block: 4rem;
}
.seccionTestimonios__intro {
  text-align: center;
  color: #c5d2e1;
  margin-bottom: 2.5rem;
}
.cuadriculaTestimonios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.tarjetaTestimonio {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radioBorde);
  padding: 1.75rem;
}
.tarjetaTestimonio p {
  color: var(--colorBlanco);
  font-style: italic;
  margin-bottom: 1rem;
}
.tarjetaTestimonio footer {
  color: var(--colorSecundario);
  font-family: var(--fuenteTitulos);
  font-size: 0.85rem;
  font-weight: 600;
}
.seccionTestimonios__nota {
  text-align: center;
  color: #c5d2e1;
  font-size: 0.85rem;
  margin-top: 2.5rem;
}
.seccionTestimonios__nota a { color: var(--colorSecundario); text-decoration: underline; }

/* ---------- FAQ / ACORDEÓN ----------
   "max-height: 0" oculta la respuesta y "overflow: hidden" evita
   que se vea su contenido; al hacer clic, script.js calcula la
   altura real del texto (scrollHeight) y la asigna, generando el
   efecto de apertura/cierre con una transición suave. El símbolo
   "+" / "×" del icono se dibuja con dos líneas (::before y ::after)
   que rotan con CSS cuando la pregunta está abierta. */
.seccionPreguntas { padding-block: 4rem; }
.listaAcordeon { display: flex; flex-direction: column; gap: 0.85rem; }
.itemAcordeon {
  border: 1px solid #e6e8eb;
  border-radius: var(--radioBordeChico);
  overflow: hidden;
}
.itemAcordeon__pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-family: var(--fuenteTitulos);
  font-weight: 600;
  color: var(--colorPrimario);
  text-align: left;
  background-color: var(--colorBlanco);
  transition: var(--transicionBase);
}
.itemAcordeon__pregunta:hover { background-color: var(--colorFondoClaro); }
.itemAcordeon__icono {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
}
.itemAcordeon__icono::before,
.itemAcordeon__icono::after {
  content: '';
  position: absolute;
  background-color: var(--colorAcento);
  transition: var(--transicionBase);
}
.itemAcordeon__icono::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.itemAcordeon__icono::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); }
.itemAcordeon__pregunta[aria-expanded="true"] .itemAcordeon__icono::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.itemAcordeon__respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: var(--colorFondoClaro);
}
.itemAcordeon__respuesta p {
  padding: 0 1.25rem 1.1rem;
  color: var(--colorApoyo);
  font-size: 0.92rem;
}

/* ---------- CIERRE DEL EMBUDO ----------
   Repite el mismo fondo degradado del hero para "cerrar el círculo"
   visualmente antes del pie de página. */
.seccionCierre {
  background: linear-gradient(160deg, var(--colorPrimario) 0%, #013267 100%);
  padding-block: 4rem;
  text-align: center;
}
.seccionCierre__interior { max-width: 640px; margin-inline: auto; }
.seccionCierre p { color: #d7e2ef; margin-block: 1rem 1.75rem; }

/* ---------- PIE DE PÁGINA ----------
   Tres columnas de información (marca, contacto, navegación) que en
   celular se apilan en una sola columna (grid-template-columns: 1fr)
   y en tablet/escritorio se reparten en 3 (ver media queries). */
.piePagina { background-color: #00132b; color: #aebdcc; padding-top: 3.5rem; }
.piePagina__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.piePagina__marca img { height: 40px; margin-bottom: 1rem; }
.piePagina__marca p { font-size: 0.88rem; max-width: 36ch; }
.piePagina h2 {
  color: var(--colorBlanco);
  font-size: 1rem;
  margin-bottom: 1rem;
}
.piePagina__contacto p {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.piePagina__contacto img { width: 18px; height: 18px; }
.piePagina__contacto a:hover,
.piePagina__enlaces a:hover { color: var(--colorAcento); }
.piePagina__enlaces ul { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; }
.piePagina__derechos {
  text-align: center;
  padding: 1.25rem;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- BOTÓN IR ARRIBA ----------
   Está siempre en el DOM pero permanece invisible (opacity: 0 +
   visibility: hidden) hasta que script.js le agrega la clase
   "botonIrArriba--visible" al detectar que el usuario hizo scroll. */
.botonIrArriba {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--colorAcento);
  color: var(--colorPrimario);
  box-shadow: var(--sombraTarjeta);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: var(--transicionBase);
}
.botonIrArriba.botonIrArriba--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.botonIrArriba:hover {
  background-color: var(--colorAcentoOscuro);
  transform: translateY(-3px);
}
.botonIrArriba svg { width: 22px; height: 22px; }

@media (min-width: 720px) {
  .botonIrArriba { right: 2rem; bottom: 2rem; width: 52px; height: 52px; }
}

/* =======================================================
   MEDIA QUERIES — MOBILE FIRST
   Todo el CSS de arriba está pensado primero para celular.
   Estos dos bloques @media van AGREGANDO o SOBRESCRIBIENDO
   estilos solo cuando la pantalla es lo bastante ancha, en
   lugar de partir de un diseño de escritorio y "achicarlo".
   ======================================================= */

/* Tablet en adelante (a partir de 720px de ancho):
   la sección "Nosotros" pasa de columna a fila, los servicios y
   testimonios muestran 2 columnas en vez de 1, y el pie de página
   reparte su contenido en 3 columnas. */
@media (min-width: 720px) {
  .seccionNosotros__interior { flex-direction: row; align-items: flex-start; }
  .seccionNosotros__imagen { flex: 0 0 38%; }
  .seccionNosotros__texto { flex: 1; }

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

  .piePagina__interior { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* Escritorio (a partir de 1140px de ancho):
   se oculta el botón "hamburguesa" y el menú deja de ser un panel
   deslizante para mostrarse como una fila horizontal normal; además
   aparece el acceso directo de WhatsApp y el hero pasa a dos
   columnas (texto a la izquierda, formulario a la derecha). */
@media (min-width: 1140px) {
  .botonMenuMovil { display: none; }
  .listaNavegacion {
    position: static;
    flex-direction: row;
    align-items: center;
    background-color: transparent;
    padding: 0;
    transform: none;
    gap: 1.5rem;
  }
  .listaNavegacion li a { color: var(--colorPrimario); font-size: 0.92rem; }
  .navegacionPrincipal__cta { color: var(--colorPrimario) !important; }

  .encabezado__whatsapp { display: flex; }

  .seccionHero__interior {
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
  }
  .seccionHero__contenido { flex: 1.1; }
  .tarjetaFormulario { flex: 1; max-width: 520px; }

  .tiraConfianza { grid-template-columns: repeat(4, 1fr); }

  .cuadriculaServicios { grid-template-columns: repeat(4, 1fr); }
  .cuadriculaTestimonios { grid-template-columns: repeat(3, 1fr); }
}