/* ============================================================================
   sobre-financrece — estilos de la vista "Sobre Financrece".

   Esta página se exportó de WordPress SIN renderizar por Elementor: su
   contenido quedó como HTML plano y su hoja de página (post-194.css) nunca se
   generó. Es la única de las nueve en ese estado, y por eso se veía descuadrada
   tanto en local como en producción.

   En vez de imitar el marcado de Elementor —cuyos ajustes por elemento viven
   justamente en el archivo que falta— esta hoja maqueta la vista por su cuenta,
   con los mismos tokens del kit del sitio (post-7.css): sus colores, sus
   tipografías (Roboto y Roboto Slab, ya autoalojadas) y su ancho de contenedor.

   Todo va bajo el prefijo `fin-` para no chocar con el tema ni con Elementor.
   ========================================================================== */

.fin-page {
  --fin-marca: #4aa6ec;      /* celeste de marca, enlaces y acentos */
  --fin-marino: #1b2d97;     /* azul marino: botones y títulos */
  --fin-turquesa: #67dfde;
  --fin-tinta: #161c2d;      /* texto principal */
  --fin-gris: #5f5f5f;       /* texto secundario */
  --fin-borde: #e6ecf5;
  --fin-fondo-alt: #f9fbfd;
  --fin-radio: 14px;
  --fin-sombra: 0 10px 30px rgba(27, 45, 151, .08);

  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--fin-tinta);
  line-height: 1.65;
}

/* ── Estructura ─────────────────────────────────────────────────────────── */

.fin-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.fin-container--estrecho { max-width: 820px; }

.fin-section { padding: 72px 0; }
.fin-section--alt { background: var(--fin-fondo-alt); }
.fin-section--marino {
  background: linear-gradient(135deg, var(--fin-marino) 0%, #16247a 100%);
  color: #fff;
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */

.fin-page h1,
.fin-page h2,
.fin-page h3,
.fin-page h4 {
  font-family: "Roboto Slab", Roboto, serif;
  color: var(--fin-tinta);
  line-height: 1.25;
  margin: 0 0 16px;
}

.fin-titulo {
  font-size: 2.1rem;
  text-align: center;
  margin-bottom: 12px;
}

.fin-acento { color: var(--fin-marca); }

.fin-antetitulo {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--fin-marca);
  text-align: center;
  margin: 0 0 10px;
}

.fin-entradilla {
  text-align: center;
  color: var(--fin-gris);
  max-width: 720px;
  margin: 0 auto 44px;
}

.fin-page p { margin: 0 0 16px; }

/* ── Botón ──────────────────────────────────────────────────────────────── */

.fin-boton {
  display: inline-block;
  background: var(--fin-marino);
  color: #fff;
  padding: 14px 30px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.fin-boton:hover,
.fin-boton:focus {
  background: var(--fin-marca);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--fin-sombra);
}

.fin-boton--claro { background: #fff; color: var(--fin-marino); }
.fin-boton--claro:hover { background: var(--fin-turquesa); color: var(--fin-marino); }

/* ── Portada de la vista ────────────────────────────────────────────────── */

.fin-hero {
  background: linear-gradient(135deg, var(--fin-marino) 0%, #16247a 55%, #1f3bb3 100%);
  color: #fff;
  padding: 84px 0 78px;
  text-align: center;
}

.fin-hero h1 { color: #fff; font-size: 2.6rem; }
.fin-hero .fin-antetitulo { color: var(--fin-turquesa); }

.fin-hero__entradilla {
  max-width: 720px;
  margin: 0 auto 28px;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, .92);
}

/* ── Rejillas ───────────────────────────────────────────────────────────── */

.fin-grid { display: grid; gap: 24px; }
.fin-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fin-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fin-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.fin-card {
  background: #fff;
  border: 1px solid var(--fin-borde);
  border-radius: var(--fin-radio);
  padding: 30px;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}

.fin-card:hover { transform: translateY(-4px); box-shadow: var(--fin-sombra); }
.fin-card h3 { font-size: 1.22rem; }
.fin-card p { color: var(--fin-gris); margin-bottom: 0; }

/* Icono redondo de las tarjetas de servicio */
.fin-card__icono {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 166, 236, .12);
  color: var(--fin-marca);
  font-size: 1.35rem;
  margin-bottom: 18px;
}

/* ── Servicios: la tarjeta destacada de la sección ──────────────────────── */

.fin-servicios .fin-card { display: flex; flex-direction: column; }

.fin-servicios__nota {
  margin-top: 36px;
  text-align: center;
  color: var(--fin-gris);
  font-size: .95rem;
}

/* ── Misión y visión ────────────────────────────────────────────────────── */

.fin-card--destacada { border-top: 4px solid var(--fin-marca); }
.fin-card--destacada:nth-child(2) { border-top-color: var(--fin-turquesa); }
.fin-card__pie { margin-top: 20px; }

.fin-enlace {
  color: var(--fin-marca);
  font-weight: 600;
  text-decoration: none;
}

.fin-enlace:hover { text-decoration: underline; }

/* ── Pasos numerados (requisitos) ───────────────────────────────────────── */

.fin-paso { position: relative; padding-left: 66px; }

.fin-paso__num {
  position: absolute;
  left: 0;
  top: 2px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fin-marino);
  color: #fff;
  font-family: "Roboto Slab", serif;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fin-paso h3 { margin-bottom: 8px; font-size: 1.1rem; }
.fin-paso ul { margin: 0; padding-left: 18px; color: var(--fin-gris); }
.fin-paso p { color: var(--fin-gris); margin-bottom: 0; }

/* ── Cobertura ──────────────────────────────────────────────────────────── */

.fin-cobertura { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.fin-cobertura img { width: 100%; height: auto; border-radius: var(--fin-radio); }

.fin-ciudades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
}

.fin-ciudades li {
  padding-left: 22px;
  position: relative;
  color: var(--fin-gris);
}

.fin-ciudades li::before {
  content: "\f3c5";              /* map-marker-alt */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--fin-marca);
  font-size: .85rem;
}

/* ── Testimonios ────────────────────────────────────────────────────────── */

.fin-testimonio { text-align: center; }

.fin-testimonio img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  display: block;
}

.fin-testimonio blockquote {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  color: var(--fin-gris);
  font-style: italic;
}

.fin-testimonio cite {
  font-style: normal;
  font-weight: 600;
  color: var(--fin-tinta);
}

.fin-vigilancia { text-align: center; margin-top: 40px; }
.fin-vigilancia img { max-width: 240px; height: auto; }

/* ── Oficinas ───────────────────────────────────────────────────────────── */

.fin-mapa {
  border: 0;
  width: 100%;
  height: 380px;
  border-radius: var(--fin-radio);
  margin-top: 24px;
}

/* ── Redes ──────────────────────────────────────────────────────────────── */

.fin-redes {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  gap: 14px;
  justify-content: center;
}

.fin-redes a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}

.fin-redes a:hover { background: var(--fin-turquesa); color: var(--fin-marino); transform: translateY(-2px); }

/* ── Responsive: mismos cortes que el resto del sitio ───────────────────── */

@media (max-width: 1024px) {
  .fin-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .fin-hero h1 { font-size: 2.2rem; }
  .fin-cobertura { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .fin-section { padding: 52px 0; }
  .fin-hero { padding: 62px 0 56px; }
  .fin-hero h1 { font-size: 1.85rem; }
  .fin-titulo { font-size: 1.6rem; }
  .fin-grid--2,
  .fin-grid--3,
  .fin-grid--4 { grid-template-columns: 1fr; }
  .fin-ciudades { grid-template-columns: repeat(2, 1fr); }
  .fin-card { padding: 24px; }
}