/* Finavanza Capital · estilos de la landing
   Se carga después de /marca/brand.css y usa solo sus variables --fv-*.
   Mobile first: la base es para móvil; el escritorio se añade con min-width. */

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--fv-blanco);
  color: var(--fv-azul);
  font-family: var(--fv-font-texto);
  font-size: var(--fv-t-texto);
  font-weight: 400;
  line-height: 1.6;
  text-align: left; /* nunca justificado (regla de marca) */
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--fv-font-titulo);
  line-height: 1.2;
}

p,
ul {
  margin: 0;
}

a {
  color: var(--fv-verde-texto);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--fv-azul);
  outline-offset: 3px;
  border-radius: var(--fv-radio-sm);
}

.contenedor {
  width: 100%;
  max-width: var(--fv-ancho-max);
  margin: 0 auto;
  padding: 0 var(--fv-e-6);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Línea de avance (único adorno de la marca) ---------- */

.linea-avance::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: var(--fv-e-4);
  background: var(--fv-verde);
  border-radius: var(--fv-radio-sm);
}

/* ---------- Botón principal ---------- */
/* Verde texto de la marca (5,3:1 con blanco); el verde del logo no llega al contraste mínimo con texto blanco. */

.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fv-e-3) var(--fv-e-6);
  border-radius: var(--fv-radio-md);
  background: var(--fv-verde-texto);
  color: var(--fv-blanco);
  font-family: var(--fv-font-texto);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s;
}

.boton:hover {
  background: color-mix(in srgb, var(--fv-verde-texto) 80%, #000);
}

/* ---------- Píldora flotante (aparece al subir; ver js/pildora.js) ---------- */

/* Solo lleva el logo: se ajusta a su tamaño y queda centrada */
.pildora {
  position: fixed;
  top: var(--fv-e-3);
  right: 0;
  left: 0;
  z-index: 10;
  width: fit-content;
  margin: 0 auto;
  padding: var(--fv-e-3) var(--fv-e-6);
  border: 1px solid var(--fv-gris-linea);
  border-radius: 999px;
  background: var(--fv-blanco);
  box-shadow: var(--fv-sombra-tarjeta);
  transform: translateY(calc(-100% - var(--fv-e-6)));
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.pildora--visible {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease;
}

.pildora__logo {
  width: auto;
  height: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .pildora,
  .pildora--visible {
    transition: none;
  }
}

/* ---------- Cabecera ---------- */

/* Logo sin lema en todos los tamaños. Móvil: centrado, 28 px de alto */
.cabecera {
  padding: var(--fv-e-4) 0 var(--fv-e-2);
}

.cabecera .contenedor {
  display: flex;
  justify-content: center;
}

.cabecera__logo {
  width: auto;
  height: 28px;
}

/* Páginas de estudio: logo con lema (mínimo de la marca: 180 px de ancho) */
.cabecera__logo--lema {
  width: 180px;
  height: auto;
}

/* ---------- Capa de confianza ---------- */
/* Móvil: centrada (excepción a la marca decidida por Finavanza). Escritorio: a la izquierda. */

.confianza {
  padding: var(--fv-e-3) 0 var(--fv-e-4);
  text-align: center;
}

.confianza__titular {
  font-size: 22px;
  font-weight: 700;
}

.confianza__titular.linea-avance::after {
  margin: var(--fv-e-3) auto 0;
}

.confianza__subtitulo {
  margin-top: var(--fv-e-3);
}

.confianza__persona {
  color: var(--fv-gris-texto);
  font-size: var(--fv-t-pequeno);
}

.confianza__persona strong {
  color: var(--fv-azul);
  font-weight: 600;
}

/* Sellos. Móvil: columna centrada; los iconos quedan alineados y todas las filas miden lo mismo */
.sellos {
  display: grid;
  grid-template-columns: fit-content(100%);
  grid-auto-rows: 1fr;
  justify-content: center;
  gap: var(--fv-e-2);
  margin-top: var(--fv-e-3);
  padding: 0;
  list-style: none;
  font-size: var(--fv-t-pequeno);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.sello {
  display: flex;
  align-items: center;
  gap: var(--fv-e-2);
}

.sello__icono {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--fv-verde);
}

/* Bloque que en móvil va debajo de las tarjetas (en escritorio está arriba) */
.confianza-extra {
  margin-top: var(--fv-e-8);
  text-align: center;
}

.confianza-extra .sellos {
  margin-top: var(--fv-e-4);
}

/* ---------- Las 3 opciones ---------- */

.opciones {
  padding: var(--fv-e-4) 0 var(--fv-e-12);
  background: var(--fv-gris-niebla);
}

.opciones__guia {
  margin-bottom: var(--fv-e-6); /* deja sitio a la etiqueta que sobresale de la primera tarjeta */
  font-size: var(--fv-t-grande);
  font-weight: 600;
  text-align: center;
}

.opciones__lista {
  display: grid;
  gap: var(--fv-e-4);
}

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--fv-e-4);
  border: 1px solid var(--fv-gris-linea);
  border-radius: var(--fv-radio-md);
  background: var(--fv-blanco);
  box-shadow: var(--fv-sombra-tarjeta);
  text-align: center;
  transition: border-color 0.15s;
}

.tarjeta:hover,
.tarjeta:focus-within {
  border-color: var(--fv-verde-texto);
}

.tarjeta__icono {
  width: 24px;
  height: 24px;
  margin: 0 auto var(--fv-e-2);
  color: var(--fv-verde);
}

/* Etiqueta sobre el borde superior derecho: no añade altura a la tarjeta */
.tarjeta__etiqueta {
  position: absolute;
  top: 0;
  right: var(--fv-e-4);
  display: inline-flex;
  align-items: center;
  gap: var(--fv-e-1);
  padding: 2px var(--fv-e-2);
  border: 1px solid color-mix(in srgb, var(--fv-verde-texto) 30%, transparent);
  border-radius: 999px;
  background: var(--fv-verde-suave);
  color: var(--fv-verde-texto);
  font-size: var(--fv-t-legal);
  font-weight: 600;
  line-height: 1.4;
  transform: translateY(-50%);
}

.tarjeta__etiqueta svg {
  width: 12px;
  height: 12px;
}

.tarjeta__titulo {
  font-size: var(--fv-t-grande);
  font-weight: 600;
  line-height: 1.3;
}

.tarjeta__texto {
  margin-top: var(--fv-e-1);
  color: var(--fv-gris-texto);
  line-height: 1.5;
}

.tarjeta .boton {
  width: 100%;
  min-height: 52px;
  margin-top: var(--fv-e-3);
}

.tarjeta__nota {
  margin-top: var(--fv-e-2);
  color: var(--fv-gris-texto);
  font-size: var(--fv-t-pequeno);
  line-height: 1.4;
}

.opciones__mas {
  margin-top: var(--fv-e-6);
  font-size: var(--fv-t-pequeno);
  text-align: center;
}

.opciones__mas a {
  font-weight: 600;
}

/* ---------- Cabecera de páginas interiores ---------- */

.cabecera__enlace {
  display: block;
}

/* ---------- Página «Cómo trabajamos» ---------- */

.proceso {
  padding: var(--fv-e-6) 0 var(--fv-e-12);
}

.proceso__titulo {
  font-size: var(--fv-t-h2);
  font-weight: 700;
}

.etapas {
  margin: var(--fv-e-8) 0 0;
  padding: 0;
  list-style: none;
}

/* Móvil: número y línea a la izquierda; texto y tarjeta apilados a la derecha */
.etapa {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--fv-e-4);
}

/* Línea vertical que une los números (estructura de la línea de tiempo) */
.etapa::before {
  content: "";
  position: absolute;
  top: 48px;
  bottom: var(--fv-e-2);
  left: 19px;
  width: 2px;
  background: var(--fv-gris-linea);
}

.etapa:last-child::before {
  display: none;
}

.etapa__numero {
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--fv-verde);
  border-radius: 50%;
  background: var(--fv-blanco);
  color: var(--fv-verde-texto);
  font-family: var(--fv-font-titulo);
  font-size: var(--fv-t-pequeno);
  font-weight: 700;
}

.etapa__texto p + p {
  margin-top: var(--fv-e-3);
}

.etapa__titulo {
  font-size: var(--fv-t-h3);
  font-weight: 700;
  line-height: 1.3;
}

.etapa__subtitulo {
  margin: var(--fv-e-1) 0 var(--fv-e-3);
  color: var(--fv-gris-texto);
  font-weight: 600;
}

/* Móvil: la tarjeta ocupa todo el ancho y tapa la línea, que reaparece entre etapas */
.etapa__tarjeta {
  position: relative;
  grid-column: 1 / -1;
  margin-top: var(--fv-e-6);
  padding: var(--fv-e-6);
  border: 1px solid var(--fv-gris-linea);
  border-radius: var(--fv-radio-md);
  background: var(--fv-blanco);
  box-shadow: var(--fv-sombra-tarjeta);
}

.etapa:not(:last-child) .etapa__tarjeta {
  margin-bottom: var(--fv-e-12);
}

.etapa__etiqueta {
  color: var(--fv-verde-texto);
  font-size: var(--fv-t-pequeno);
  font-weight: 600;
}

.etapa__tarjeta-titulo {
  margin: var(--fv-e-1) 0 var(--fv-e-4);
  font-size: var(--fv-t-grande);
  font-weight: 600;
  line-height: 1.3;
}

.lista-check {
  display: grid;
  gap: var(--fv-e-2);
  padding: 0;
  list-style: none;
}

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--fv-e-3);
  line-height: 1.5;
}

/* Icono de check en verde (SVG como máscara para poder colorearlo con la variable de marca) */
.lista-check li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: var(--fv-verde);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.proceso__accion {
  margin-top: var(--fv-e-12);
}

/* ---------- Páginas de texto (legales, inmobiliarias, 404) ---------- */

.texto {
  padding: var(--fv-e-6) 0 var(--fv-e-12);
}

.texto__contenido {
  max-width: 720px;
}

.texto__titulo {
  font-size: var(--fv-t-h2);
  font-weight: 700;
}

.texto__fecha {
  margin-top: var(--fv-e-4);
  color: var(--fv-gris-texto);
  font-size: var(--fv-t-pequeno);
}

.texto__entradilla {
  margin-top: var(--fv-e-6);
  font-size: var(--fv-t-grande);
}

.texto h2 {
  margin: var(--fv-e-8) 0 var(--fv-e-3);
  font-size: var(--fv-t-h3);
  font-weight: 700;
  line-height: 1.3;
}

.texto h3 {
  margin: var(--fv-e-6) 0 var(--fv-e-2);
  font-size: var(--fv-t-grande);
  font-weight: 600;
  line-height: 1.3;
}

/* Al saltar desde el índice, que la píldora flotante no tape el título */
.texto h2,
.texto h3 {
  scroll-margin-top: 88px;
}

.texto p + p,
.texto p + ul,
.texto ul + p {
  margin-top: var(--fv-e-3);
}

.texto ul:not(.lista-check):not(.indice__lista) {
  padding-left: var(--fv-e-6);
}

/* Índice con enlaces a cada apartado (páginas legales) */
.indice {
  margin-top: var(--fv-e-6);
  padding: var(--fv-e-4) var(--fv-e-6);
  border: 1px solid var(--fv-gris-linea);
  border-radius: var(--fv-radio-md);
  background: var(--fv-gris-niebla);
}

.indice__titulo {
  margin-bottom: var(--fv-e-2);
  font-family: var(--fv-font-titulo);
  font-weight: 600;
}

.indice__lista {
  display: grid;
  gap: var(--fv-e-1);
  padding: 0;
  list-style: none;
  font-size: var(--fv-t-pequeno);
}

.texto ul:not(.lista-check):not(.indice__lista) li + li,
.texto li > ul {
  margin-top: var(--fv-e-1);
}

/* Tabla de las páginas legales. Móvil: cada fila se apila como un bloque */
.tabla-legal {
  width: 100%;
  margin-top: var(--fv-e-3);
  border-collapse: collapse;
  font-size: var(--fv-t-pequeno);
  line-height: 1.5;
}

.tabla-legal thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.tabla-legal tr {
  display: block;
  padding: var(--fv-e-3) 0;
  border-bottom: 1px solid var(--fv-gris-linea);
}

.tabla-legal td {
  display: block;
}

.tabla-legal td + td {
  margin-top: var(--fv-e-1);
  color: var(--fv-gris-texto);
}

.tabla-legal td::before {
  content: attr(data-titulo) ": ";
  font-weight: 600;
  color: var(--fv-azul);
}

@media (min-width: 768px) {
  .tabla-legal thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .tabla-legal tr {
    display: table-row;
    padding: 0;
  }

  .tabla-legal th,
  .tabla-legal td {
    display: table-cell;
    padding: var(--fv-e-3);
    border-bottom: 1px solid var(--fv-gris-linea);
    text-align: left;
    vertical-align: top;
  }

  .tabla-legal th {
    background: var(--fv-gris-niebla);
    font-weight: 600;
  }

  .tabla-legal td + td {
    margin-top: 0;
  }

  .tabla-legal td::before {
    content: none;
  }
}

/* Marcador visible de texto pendiente (fácil de encontrar buscando «[PENDIENTE»)*/
.pendiente {
  color: var(--fv-gris-texto);
  font-style: italic;
}

/* Bloque de contacto (inmobiliarias) */
.contacto-bloque {
  margin-top: var(--fv-e-8);
  padding: var(--fv-e-6);
  border: 1px solid var(--fv-gris-linea);
  border-radius: var(--fv-radio-md);
  background: var(--fv-gris-niebla);
}

.contacto-bloque h2 {
  margin-top: 0;
}

.contacto-bloque .boton {
  min-height: 52px;
  margin-top: var(--fv-e-4);
}

.contacto-bloque__email {
  margin-top: var(--fv-e-3);
  font-weight: 600;
}

/* ---------- Formularios de estudio (/estudio/...) ---------- */
/* Marca: bloque en gris niebla, campos blancos con borde --fv-borde-campo, etiqueta encima, errores en --fv-error */

.estudio {
  min-height: 70vh;
  padding: var(--fv-e-6) 0 var(--fv-e-12);
  background: var(--fv-gris-niebla);
}

.estudio__panel {
  max-width: 560px;
  margin: 0 auto;
}

.paso__barra {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--fv-gris-linea);
}

.paso__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--fv-verde);
  transition: width 0.3s ease;
}

.paso__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--fv-e-2) 0 var(--fv-e-6);
}

.paso__atras {
  padding: var(--fv-e-2) 0;
  border: 0;
  background: none;
  color: var(--fv-azul);
  font: inherit;
  font-size: var(--fv-t-pequeno);
  font-weight: 600;
  cursor: pointer;
}

.paso__atras:hover {
  text-decoration: underline;
}

.paso__contador {
  color: var(--fv-gris-texto);
  font-size: var(--fv-t-pequeno);
}

.paso__pregunta {
  font-size: var(--fv-t-h3);
  font-weight: 700;
  line-height: 1.3;
}

.paso__pregunta:focus,
.paso__titulo-grande:focus {
  outline: none;
}

.paso__titulo-grande {
  font-size: var(--fv-t-h2);
  font-weight: 700;
}

.paso__ayuda {
  margin-top: var(--fv-e-2);
  color: var(--fv-gris-texto);
}

.paso__lista {
  margin-top: var(--fv-e-6);
}

.paso__texto {
  margin-top: var(--fv-e-4);
  font-size: var(--fv-t-grande);
}

.paso__boton {
  width: 100%;
  min-height: 52px;
  margin-top: var(--fv-e-6);
  border: 0;
  font-size: var(--fv-t-texto);
  cursor: pointer;
}

.paso__nota {
  margin-top: var(--fv-e-3);
  color: var(--fv-gris-texto);
  font-size: var(--fv-t-pequeno);
}

.paso__enlace {
  margin-top: var(--fv-e-6);
  font-weight: 600;
}

/* Botones de opción: grandes, avanzan solos al tocarlos */
.opciones-lista {
  display: grid;
  gap: var(--fv-e-3);
  margin-top: var(--fv-e-6);
}

.opcion {
  min-height: 56px;
  padding: var(--fv-e-3) var(--fv-e-4);
  border: 1px solid var(--fv-borde-campo);
  border-radius: var(--fv-radio-md);
  background: var(--fv-blanco);
  color: var(--fv-azul);
  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.opcion:hover {
  border-color: var(--fv-verde-texto);
}

.opcion--elegida {
  border-color: var(--fv-verde-texto);
  box-shadow: inset 0 0 0 1px var(--fv-verde-texto);
  background: var(--fv-verde-suave);
}

/* Campo que despliega la opción «Otra cantidad» */
.paso__otra {
  margin-top: var(--fv-e-6);
}

/* Campos */
.paso__form .campo + .campo {
  margin-top: var(--fv-e-4);
}

.paso__form > .paso__pregunta + .campo {
  margin-top: var(--fv-e-6);
}

.paso__form > .paso__pregunta + .campo__caja,
.paso__form > .paso__ayuda + .campo__caja {
  margin-top: var(--fv-e-4);
}

.campo__etiqueta {
  display: block;
  margin-bottom: var(--fv-e-2);
  font-weight: 600;
}

.campo__caja {
  display: flex;
  align-items: center;
  border: 1px solid var(--fv-borde-campo);
  border-radius: var(--fv-radio-md);
  background: var(--fv-blanco);
}

.campo__caja:focus-within {
  border-color: var(--fv-azul);
  box-shadow: 0 0 0 1px var(--fv-azul);
}

.campo__caja--error,
.campo__caja--error:focus-within {
  border-color: var(--fv-error);
}

.campo__caja--error:focus-within {
  box-shadow: 0 0 0 1px var(--fv-error);
}

/* Selector de prefijo del teléfono, dentro de la misma caja que el número */
.campo__caja--telefono {
  gap: 0;
}

.campo__prefijo {
  flex: none;
  width: auto;
  min-width: 76px;
  max-width: 96px;
  padding: 14px 2px 14px var(--fv-e-3);
  border: 0;
  border-right: 1px solid var(--fv-borde-campo);
  background: transparent;
  color: var(--fv-azul);
  font-family: var(--fv-font-texto);
  font-size: var(--fv-t-texto); /* 16 px: evita el zoom automático en iPhone */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campo__prefijo:focus {
  outline: none;
}

.campo__entrada {
  flex: 1;
  min-width: 0;
  padding: 14px var(--fv-e-4);
  border: 0;
  background: transparent;
  color: var(--fv-azul);
  font-family: var(--fv-font-texto);
  font-size: var(--fv-t-grande); /* ≥ 16 px: evita el zoom automático en iPhone */
}

.campo__entrada:focus {
  outline: none;
}

.campo__sufijo {
  padding-right: var(--fv-e-4);
  color: var(--fv-gris-texto);
  font-weight: 600;
}

.campo__error {
  margin-top: var(--fv-e-2);
  color: var(--fv-error);
  font-size: var(--fv-t-pequeno);
  font-weight: 600;
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--fv-e-3);
  margin-top: var(--fv-e-6);
  font-size: var(--fv-t-pequeno);
  line-height: 1.5;
}

.casilla input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--fv-verde-texto);
}

/* ---------- Pie de página ---------- */

.pie {
  padding: var(--fv-e-12) 0 var(--fv-e-6);
  background: var(--fv-azul);
  color: var(--fv-blanco);
  font-size: var(--fv-t-pequeno);
}

.pie a {
  color: var(--fv-blanco);
  text-decoration: none;
}

.pie a:hover {
  text-decoration: underline;
}

.pie a:focus-visible {
  outline-color: var(--fv-verde-claro);
}

.pie__columnas {
  display: grid;
  gap: var(--fv-e-8);
}

.pie__logo {
  width: 160px;
  height: auto;
  margin-bottom: var(--fv-e-4);
}

.pie__titulo {
  margin-bottom: var(--fv-e-3);
  font-size: var(--fv-t-texto);
  font-weight: 600;
}

.pie__lista {
  display: grid;
  gap: var(--fv-e-2);
  padding: 0;
  list-style: none;
}

.pie__legal {
  display: grid;
  gap: var(--fv-e-2);
  margin-top: var(--fv-e-8);
  padding-top: var(--fv-e-6);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fv-t-legal);
}

/* ---------- Escritorio ---------- */

@media (min-width: 768px) {
  .cabecera {
    padding-top: var(--fv-e-8);
  }

  .cabecera .contenedor {
    justify-content: flex-start;
  }

  /* Escritorio: a la izquierda, 32 px de alto */
  .cabecera__logo {
    height: 32px;
  }

  .cabecera__logo--lema {
    width: 200px;
    height: auto;
  }

  .pildora__logo {
    height: 26px;
  }

  .confianza {
    padding: var(--fv-e-6) 0 var(--fv-e-8);
    text-align: left;
  }

  .confianza__titular {
    max-width: 22ch;
    font-size: 32px;
  }

  .confianza__titular.linea-avance::after {
    margin: var(--fv-e-4) 0 0;
  }

  .confianza__subtitulo {
    margin-top: var(--fv-e-4);
    font-size: var(--fv-t-grande);
  }

  .confianza__persona {
    margin-top: var(--fv-e-2);
  }

  /* Escritorio: los tres sellos en una sola fila */
  .sellos {
    grid-template-columns: repeat(3, auto);
    grid-auto-rows: auto;
    justify-content: start;
    gap: var(--fv-e-8);
    margin-top: var(--fv-e-6);
  }

  .sello {
    gap: var(--fv-e-3);
  }

  .sello__icono {
    width: 22px;
    height: 22px;
  }

  .opciones {
    padding: var(--fv-e-12) 0 var(--fv-e-16);
  }

  .opciones__guia {
    margin-bottom: var(--fv-e-8);
    text-align: left;
  }

  .opciones__lista {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fv-e-6);
  }

  /* Subgrid: icono, título, texto, botón y nota alineados por filas en las 3 tarjetas */
  .tarjeta {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
    padding: var(--fv-e-6);
    text-align: left;
  }

  .tarjeta__icono {
    margin-left: 0;
  }

  .tarjeta__titulo {
    font-size: var(--fv-t-h3);
  }

  .tarjeta__texto {
    margin-top: var(--fv-e-2);
  }

  .tarjeta .boton {
    margin-top: var(--fv-e-4);
  }

  .opciones__mas {
    margin-top: var(--fv-e-8);
    text-align: left;
  }

  /* «Cómo trabajamos»: número | texto | tarjeta */
  .proceso {
    padding: var(--fv-e-8) 0 var(--fv-e-16);
  }

  .proceso__titulo {
    font-size: var(--fv-t-h1);
  }

  .etapas {
    margin-top: var(--fv-e-12);
  }

  .etapa {
    grid-template-columns: 48px 1fr 1fr;
    column-gap: var(--fv-e-8);
  }

  .etapa::before {
    top: 56px;
    left: 23px;
  }

  .etapa__numero {
    width: 48px;
    height: 48px;
    font-size: var(--fv-t-texto);
  }

  .etapa__titulo {
    font-size: var(--fv-t-h2);
  }

  .etapa__tarjeta {
    grid-row: 1;
    grid-column: 3;
    margin-top: 0;
  }

  .etapa:not(:last-child) .etapa__tarjeta {
    margin-bottom: var(--fv-e-16);
  }

  .proceso__accion {
    margin-top: var(--fv-e-16);
  }

  .proceso__accion {
    text-align: center;
  }

  /* Páginas de texto */
  .texto {
    padding: var(--fv-e-12) 0 var(--fv-e-16);
  }

  .texto__titulo {
    font-size: var(--fv-t-h1);
  }

  .contacto-bloque .boton {
    display: inline-flex;
  }

  /* Formularios: misma columna estrecha, con más aire */
  .estudio {
    padding: var(--fv-e-12) 0 var(--fv-e-16);
  }

  .paso__pregunta {
    font-size: var(--fv-t-h2);
  }

  .proceso__accion .boton {
    display: inline-flex;
  }

  .pie {
    padding-top: var(--fv-e-16);
  }

  .pie__columnas {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--fv-e-12);
  }
}

/* ---------- Visibilidad por tamaño ---------- */
/* Al final del archivo para que ganen a los display de los componentes.
   display:none también lo oculta a los lectores de pantalla (el contenido duplicado no se lee dos veces). */

@media (max-width: 767.98px) {
  .solo-escritorio {
    display: none;
  }
}

@media (min-width: 768px) {
  .solo-movil {
    display: none;
  }
}