/* Finsera · sitio publico · estilo del deck: Arial, azul marino, lavanda, mucho blanco, iconos de linea */
:root {
  --navy: #002060;
  --acento: #3E6DB5;
  --lavanda: #F2F4F9;
  --texto: #1A1A1A;
  --gris: #5B6475;
  --gris-claro: #8A93A6;
  --blanco: #FFFFFF;
  --ancho: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--texto);
  background: var(--lavanda);
  line-height: 1.55;
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}
img, svg { max-width: 100%; }
a { color: var(--acento); }
a:hover { color: var(--navy); }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 22px; }

/* Encabezado */
.encabezado { background: var(--lavanda); position: sticky; top: 0; z-index: 10; }
.encabezado .contenedor { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.marca { font-weight: 700; letter-spacing: .28em; color: var(--navy); text-decoration: none; font-size: 15px; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--navy); text-decoration: none; font-size: 14px; }
.nav a:hover { color: var(--acento); }
.nav .solo-grande { display: none; }
.entrar { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.entrar svg { width: 17px; height: 17px; }

/* Botones */
.boton { display: inline-block; background: var(--navy); color: var(--blanco); text-decoration: none; font-weight: 700;
  padding: 14px 24px; border-radius: 999px; font-size: 16px; }
.boton:hover { background: var(--acento); color: var(--blanco); }
.boton-texto { color: var(--navy); font-weight: 700; text-decoration: none; padding: 14px 6px; display: inline-block; }
.boton-texto:hover { color: var(--acento); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 26px; }

/* Tipografia */
.ceja { text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--acento); font-weight: 700; margin: 0 0 14px; }
h1, h2, h3 { color: var(--navy); line-height: 1.18; margin: 0; }
h1 { font-size: clamp(32px, 7vw, 54px); letter-spacing: -.01em; }
h1 .acento, h2 .acento { color: var(--acento); }
h2 { font-size: clamp(26px, 4.6vw, 36px); margin-bottom: 14px; }
h3 { font-size: 18px; margin-bottom: 6px; }
.bajada { font-size: clamp(17px, 2.4vw, 20px); color: var(--gris); max-width: 640px; margin: 18px 0 0; }
.intro { color: var(--gris); max-width: 680px; margin: 0 0 40px; }
.chico { font-size: 13px; color: var(--gris-claro); }

/* Secciones */
section { padding: 72px 0; }
.blanca { background: var(--blanco); }
.portada { padding: 48px 0 64px; }
.portada .ruta { display: block; width: 100%; max-width: 620px; margin: 36px auto 0; }

/* Rejillas */
.rejilla { display: grid; gap: 34px 40px; grid-template-columns: 1fr; }
.icono { width: 34px; height: 34px; color: var(--navy); margin-bottom: 12px; }
.numero-paso { color: #C3CBDD; font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.rejilla p { margin: 0; color: var(--gris); }

/* Preguntas */
.preguntas { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px 40px; grid-template-columns: 1fr; }
.preguntas li { color: var(--navy); font-size: 19px; line-height: 1.4; }
.cierre { margin-top: 40px; color: var(--gris); max-width: 680px; }
.cierre strong { color: var(--navy); }

/* Metafora del mapa */
.mapa { margin-bottom: 64px; }
.subtitulo { color: var(--navy); font-size: 20px; margin: 0 0 26px; font-weight: 700; }

/* Datos de retiro */
.datos { display: grid; gap: 52px 48px; grid-template-columns: 1fr; }
.dato .cifra { font-size: clamp(38px, 6vw, 48px); font-weight: 700; color: var(--navy); line-height: 1; margin-bottom: 12px; }
.dato .cifra small { font-size: .45em; font-weight: 700; color: var(--acento); margin-left: 4px; }
.dato p { margin: 0 0 10px; color: var(--gris); }
.dato .para-ti { color: var(--texto); }
.dato .para-ti strong { color: var(--navy); }
.dato .fuente { font-size: 13px; color: var(--gris-claro); margin: 0; }

/* Servicios */
.servicios { display: grid; gap: 44px 40px; grid-template-columns: 1fr; }
.precio { font-size: 40px; font-weight: 700; color: var(--navy); line-height: 1; margin: 16px 0 4px; }
.precio-nota { font-size: 14px; color: var(--gris); margin: 0 0 16px; }
.lista { margin: 0; padding-left: 18px; color: var(--gris); }
.lista li { margin-bottom: 6px; }
.futuro { margin-top: 48px; color: var(--gris); }
.futuro strong { color: var(--navy); }
.sin-producto { margin-top: 16px; color: var(--gris); max-width: 720px; }

/* Quien esta detras */
.semblanza { max-width: 720px; }
.semblanza p { margin: 0 0 16px; }

/* Contacto */
.contacto-datos { display: grid; gap: 18px; margin-top: 8px; grid-template-columns: 1fr; }
.contacto-datos a { color: var(--navy); font-size: 20px; font-weight: 700; text-decoration: none; display: inline-flex; gap: 12px; align-items: center; }
.contacto-datos a:hover { color: var(--acento); }
.contacto-datos svg { width: 26px; height: 26px; flex: none; }

/* Pie */
.pie { padding: 40px 0 56px; color: var(--gris-claro); font-size: 13px; }
.pie p { margin: 0 0 8px; max-width: 760px; }
.pie a { color: var(--gris); }

/* Pagina /antonio */
.perfil h1 { font-size: clamp(30px, 6vw, 46px); }
.bloque { margin-bottom: 44px; max-width: 760px; }
.bloque h2 { font-size: 22px; margin-bottom: 14px; }
.bloque p { margin: 0 0 14px; }
.linea-tiempo { list-style: none; padding: 0; margin: 0; }
.linea-tiempo li { margin-bottom: 16px; }
.linea-tiempo .cuando { display: block; font-size: 13px; color: var(--gris-claro); }
.linea-tiempo strong { color: var(--navy); }
.linea-tiempo span.que { color: var(--gris); }

/* Pagina /entrar */
.pronto { min-height: 70vh; display: flex; align-items: center; }
.pronto .contenedor { width: 100%; }
.pronto .boceto { display: block; width: 100%; max-width: 520px; margin: 40px 0 0; }

@media (min-width: 720px) {
  .rejilla.cuatro { grid-template-columns: repeat(2, 1fr); }
  .rejilla.tres { grid-template-columns: repeat(3, 1fr); }
  .preguntas { grid-template-columns: repeat(2, 1fr); }
  .datos { grid-template-columns: repeat(2, 1fr); }
  .servicios { grid-template-columns: repeat(3, 1fr); }
  .contacto-datos { grid-template-columns: repeat(2, max-content); gap: 18px 56px; }
  section { padding: 96px 0; }
}
@media (min-width: 980px) {
  .nav .solo-grande { display: inline; }
  .rejilla.cuatro { grid-template-columns: repeat(4, 1fr); }
  .datos { grid-template-columns: repeat(3, 1fr); }
  .portada { padding: 72px 0 80px; }
}
@media print {
  .encabezado { position: static; }
  section { padding: 32px 0; }
}