/*
  Estilos de la landing de Finanzas Seguras.
  Móvil primero (GL-001 11.1): la base es el teléfono; cada @media añade.
  Solo se citan variables de tokens.css.
  Puntos de corte: 37.5em = web.corte.tableta (600 px); 60em = web.corte.escritorio (960 px).
*/

/* ---------- Letras alojadas en el sitio (GL-001 11.3) ----------
  @fontsource 5.1.0, subconjunto latino, licencia SIL OFL 1.1 (fuentes/licencias/).
  Solo los pesos que usa la web. */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/lora-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/lora-latin-700-italic.woff2") format("woff2");
}

@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fuentes/league-spartan-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/league-spartan-latin-700-normal.woff2") format("woff2");
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-marca-blanco);
  color: var(--color-marca-verde);
  font-family: var(--fuente-cuerpo-pantalla);
  font-weight: 500;
  font-size: var(--web-tipo-cuerpo);
  line-height: var(--web-interlineado-cuerpo);
}

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

h1,
h2,
h3 {
  font-family: var(--fuente-titular);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--web-tipo-h1);
  line-height: var(--web-interlineado-h1);
  max-width: var(--web-ancho-titular);
}

h2 {
  font-size: var(--web-tipo-h2);
  line-height: var(--web-interlineado-h2);
  max-width: var(--web-ancho-titular);
}

h3 {
  font-size: var(--web-tipo-h3);
  line-height: var(--web-interlineado-h3);
}

p {
  margin: 0;
  max-width: var(--web-ancho-texto);
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Foco visible (GL-001 11.7): verde sobre claro, cálido y dorado; dorado sobre verde */
:focus-visible {
  outline: var(--web-foco-grosor) solid var(--web-foco-color-claro);
  outline-offset: var(--web-foco-separacion);
}

.seccion--marca :focus-visible,
.pie :focus-visible {
  outline-color: var(--web-foco-color-marca);
}

/* Texto solo para lectores de pantalla */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Saltar al contenido ---------- */
.saltar {
  position: absolute;
  left: var(--espacio-2);
  top: var(--espacio-2);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--web-tactil-minimo);
  padding: var(--espacio-1) var(--espacio-2);
  background: var(--color-marca-verde);
  color: var(--color-marca-blanco);
  font-weight: 700;
  border-radius: var(--web-radio-boton);
  transform: translateY(-200%);
}

.saltar:focus,
.saltar:focus-visible {
  transform: none;
}

/* ---------- Contenedor y secciones ---------- */
.contenedor {
  width: 100%;
  max-width: calc(var(--web-ancho-contenedor) + 2 * var(--web-margen-movil));
  margin-inline: auto;
  padding-inline: var(--web-margen-movil);
}

.seccion {
  padding-block: var(--web-seccion-relleno-movil);
}

.seccion--claro {
  background: var(--color-marca-blanco);
  color: var(--color-marca-verde);
}

.seccion--calido {
  background: var(--color-apoyo-crema-folleto);
  color: var(--color-marca-verde);
}

.seccion--marca {
  background: var(--color-marca-verde);
  color: var(--color-marca-blanco);
}

.seccion--acento {
  background: var(--color-marca-dorado);
  color: var(--color-marca-verde);
}

.encabezado-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--web-espacio-titular-texto);
  margin-bottom: var(--espacio-5);
}

.encabezado-seccion .rotulo + h2,
.encabezado-seccion .rotulo + h1 {
  margin-top: calc(var(--web-espacio-rotulo-titular) - var(--web-espacio-titular-texto));
}

.rotulo {
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  font-size: var(--web-tipo-rotulo);
  line-height: var(--web-interlineado-rotulo);
  letter-spacing: var(--web-espaciado-rotulo);
  text-transform: uppercase;
  margin: 0;
}

/* Rótulo largo (título profesional): misma letra, sin mayúsculas sostenidas (GL-001 sec. 3) */
.rotulo--frase {
  text-transform: none;
  letter-spacing: normal;
}

.seccion--marca .rotulo,
.seccion--marca h2,
.seccion--marca h3 {
  color: var(--color-marca-dorado);
}

.lema {
  font-family: var(--fuente-lema);
  font-weight: 700;
  font-style: italic;
  font-size: var(--web-tipo-lema);
  line-height: var(--web-interlineado-lema);
  letter-spacing: var(--web-espaciado-lema);
  margin: 0;
  max-width: var(--web-ancho-texto);
}

.nota {
  font-size: var(--web-tipo-nota);
  line-height: var(--web-interlineado-nota);
}

.bloque-notas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin-top: var(--espacio-5);
}

/* ---------- Botones (GL-001 11.6) ---------- */
.botones {
  display: flex;
  flex-direction: column;
  gap: var(--web-espacio-entre-botones);
  margin-top: var(--espacio-5);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--web-boton-icono-separacion);
  min-height: var(--web-boton-alto-min);
  padding: var(--web-boton-relleno-vertical) var(--web-boton-relleno-lateral);
  border: var(--web-borde) solid transparent;
  border-radius: var(--web-radio-boton);
  font-family: var(--fuente-cuerpo-pantalla);
  font-weight: 700;
  font-size: var(--web-tipo-boton);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.boton__icono {
  width: var(--web-boton-icono);
  height: var(--web-boton-icono);
  flex: none;
}

/* boton.primario y boton.whatsapp sobre claro, cálido o dorado */
.boton--primario {
  background: var(--color-marca-verde);
  border-color: var(--color-marca-verde);
  color: var(--color-marca-blanco);
}

.boton--primario:hover {
  background: var(--color-marca-dorado);
  color: var(--color-marca-verde);
}

/* boton.secundario sobre claro, cálido o dorado */
.boton--secundario {
  background: transparent;
  border-color: var(--color-marca-verde);
  color: var(--color-marca-verde);
}

.boton--secundario:hover {
  background: var(--color-marca-verde);
  color: var(--color-marca-blanco);
}

/* boton.primario-sobre-verde */
.seccion--marca .boton--primario {
  background: var(--color-marca-dorado);
  border-color: var(--color-marca-dorado);
  color: var(--color-marca-verde);
}

.seccion--marca .boton--primario:hover {
  background: var(--color-marca-blanco);
  border-color: var(--color-marca-blanco);
  color: var(--color-marca-verde);
}

/* boton.secundario-sobre-verde */
.seccion--marca .boton--secundario {
  background: transparent;
  border-color: var(--color-marca-blanco);
  color: var(--color-marca-blanco);
}

.seccion--marca .boton--secundario:hover {
  background: var(--color-marca-blanco);
  color: var(--color-marca-verde);
}

/* Enlace de texto con objetivo táctil de 48 px */
.enlace-tactil {
  display: inline-flex;
  align-items: center;
  min-height: var(--web-tactil-minimo);
  font-weight: 700;
}

/* ---------- Cabecera ---------- */
.cabecera {
  background: var(--color-marca-blanco);
  color: var(--color-marca-verde);
  padding-block: var(--espacio-2);
}

.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-width: 0;
}

.marca__enlace {
  display: block;
  flex: none;
  border-radius: var(--web-radio-boton);
}

.marca__simbolo {
  width: var(--web-logo-alto-movil);
  height: var(--web-logo-alto-movil);
}

.marca__texto {
  display: flex;
  flex-direction: column;
}

.marca__nombre {
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: var(--web-tipo-h3);
  line-height: var(--web-interlineado-h3);
}

.marca__lema {
  font-family: var(--fuente-lema);
  font-weight: 700;
  font-style: italic;
  font-size: var(--web-tipo-nota);
  line-height: var(--web-interlineado-nota);
  letter-spacing: var(--web-espaciado-lema);
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

.cabecera__telefono {
  display: none;
}

.boton--compacto {
  width: auto;
}

/* ---------- Portada ---------- */
.portada__rejilla {
  display: grid;
  gap: var(--espacio-5);
}

.portada__texto {
  display: flex;
  flex-direction: column;
  gap: var(--web-espacio-titular-texto);
}

.portada__texto .botones {
  margin-top: var(--espacio-1);
}

.foto {
  border-radius: var(--web-radio-tarjeta);
  width: 100%;
}

.portada__foto {
  max-width: 480px;
}

/* ---------- Tarjetas (GL-001 11.8) ---------- */
.tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--web-espacio-entre-tarjetas);
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  background: var(--color-marca-blanco);
  color: var(--color-marca-verde);
  border: var(--web-borde) solid var(--color-marca-verde);
  border-radius: var(--web-radio-tarjeta);
  padding: var(--tarjeta-servicio-relleno-movil);
}

.tarjeta__circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tarjeta-servicio-circulo);
  height: var(--tarjeta-servicio-circulo);
  border-radius: 50%;
  background: var(--color-marca-dorado);
}

.tarjeta__icono {
  width: var(--tarjeta-servicio-icono);
  height: var(--tarjeta-servicio-icono);
}

/* ---------- Cómo trabajamos ---------- */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-5);
}

.paso {
  display: grid;
  grid-template-columns: var(--tarjeta-servicio-circulo) 1fr;
  column-gap: var(--espacio-3);
  row-gap: var(--espacio-1);
  align-items: start;
}

.paso__numero {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tarjeta-servicio-circulo);
  height: var(--tarjeta-servicio-circulo);
  border-radius: 50%;
  background: var(--color-marca-dorado);
  color: var(--color-marca-verde);
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  font-size: var(--web-tipo-h3);
  line-height: 1;
}

.paso h3 {
  align-self: center;
}

/* ---------- Quién soy ---------- */
.quien__rejilla {
  display: grid;
  gap: var(--espacio-5);
}

.quien__foto {
  max-width: 440px;
}

.quien__texto {
  display: flex;
  flex-direction: column;
  gap: var(--web-espacio-titular-texto);
}

.quien__texto .rotulo + h2 {
  margin-top: calc(var(--web-espacio-rotulo-titular) - var(--web-espacio-titular-texto));
}

.cita {
  margin: 0;
  padding-left: var(--espacio-3);
  border-left: var(--web-foco-grosor) solid var(--color-marca-verde);
  max-width: var(--web-ancho-texto);
}

.cita p {
  font-family: var(--fuente-lema);
  font-style: italic;
  font-weight: 700;
}

.pilares {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1);
}

.pilares li {
  border: var(--web-borde) solid var(--color-marca-verde);
  border-radius: var(--web-radio-boton);
  padding: var(--espacio-1) var(--espacio-2);
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  font-size: var(--web-tipo-nota);
  line-height: var(--web-interlineado-nota);
}

.sello {
  margin: 0;
  padding-left: var(--espacio-3);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  max-width: var(--web-ancho-texto);
}

/* ---------- Llamada final ---------- */
.final {
  text-align: center;
}

.final .contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--web-espacio-titular-texto);
}

.final .lema,
.final p {
  margin-inline: auto;
}

.final .botones {
  margin-top: var(--espacio-1);
  width: 100%;
}

/* ---------- Pie (GL-001 11.9) ---------- */
.pie {
  background: var(--color-marca-verde);
  color: var(--color-marca-blanco);
  padding-block: var(--web-seccion-relleno-movil);
  font-size: var(--web-tipo-nota);
  line-height: var(--web-interlineado-nota);
}

.pie__rejilla {
  display: grid;
  gap: var(--espacio-5);
}

.pie__columna {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

.pie__marca {
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: var(--web-tipo-h3);
  line-height: var(--web-interlineado-h3);
  color: var(--color-marca-dorado);
  margin: 0;
}

.pie__lema {
  color: var(--color-marca-dorado);
  font-size: var(--web-tipo-cuerpo);
}

.pie__titulo {
  font-family: var(--fuente-rotulo);
  font-weight: 700;
  font-size: var(--web-tipo-rotulo);
  letter-spacing: var(--web-espaciado-rotulo);
  text-transform: uppercase;
  color: var(--color-marca-dorado);
  margin: 0;
}

.pie a {
  color: var(--color-marca-blanco);
}

.pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

/* ---------- Páginas simples (privacidad y 404) ---------- */
.pagina-simple {
  display: flex;
  flex-direction: column;
  gap: var(--web-espacio-titular-texto);
}

.pagina-simple h2 {
  font-size: var(--web-tipo-h3);
  line-height: var(--web-interlineado-h3);
  margin-top: var(--espacio-3);
}

.pagina-simple ul {
  margin: 0;
  padding-left: var(--espacio-3);
  max-width: var(--web-ancho-texto);
}

/* ---------- web.corte.tableta: 600 px ---------- */
@media (min-width: 37.5em) {
  .contenedor {
    max-width: calc(var(--web-ancho-contenedor) + 2 * var(--web-margen-tableta));
    padding-inline: var(--web-margen-tableta);
  }

  .botones {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .boton {
    width: auto;
  }

  .final .botones {
    justify-content: center;
  }

  .cabecera__telefono {
    display: inline-flex;
  }

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

  .tarjeta {
    padding: var(--tarjeta-servicio-relleno-tableta);
  }
}

/* ---------- web.corte.escritorio: 960 px ---------- */
@media (min-width: 60em) {
  .contenedor {
    max-width: calc(var(--web-ancho-contenedor) + 2 * var(--web-margen-escritorio));
    padding-inline: var(--web-margen-escritorio);
  }

  .seccion,
  .pie {
    padding-block: var(--web-seccion-relleno-escritorio);
  }

  /* La cabecera fija no tapa lo que recibe foco ni el destino de un enlace (WCAG 2.4.11) */
  html {
    scroll-padding-top: calc(var(--web-logo-alto-escritorio) + 3 * var(--espacio-2) + var(--web-borde));
  }

  .cabecera {
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: var(--web-borde) solid var(--color-apoyo-crema-folleto);
  }

  .marca__simbolo {
    width: var(--web-logo-alto-escritorio);
    height: var(--web-logo-alto-escritorio);
  }

  .portada__rejilla {
    grid-template-columns: 7fr 5fr;
    align-items: center;
  }

  .portada__foto {
    max-width: none;
  }

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

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

  .paso__numero {
    grid-row: auto;
  }

  .quien__rejilla {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }

  .quien__foto {
    max-width: none;
  }

  .pie__rejilla {
    grid-template-columns: 1fr 1fr 1.4fr;
  }
}

/* Sin movimiento: la página no anima nada; esto lo garantiza si se añade algo */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Modo de alto contraste de Windows: los botones conservan su borde */
@media (forced-colors: active) {
  .boton {
    border-color: ButtonText;
  }
}