/* Simulador de financiación (Manuel, 4/09/2026). Mismos tokens de color que la burbuja
   de MiA (mia.css) para que la web se vea de una pieza. Mobile-first a propósito: las
   dos últimas cosas que se tocaron en mid.es en móvil se rompieron por diseñarlas
   primero para escritorio y luego "encoger" — aquí se hace al revés. */
/* Los colores van en :root y NO colgando de .fin-simulador porque el botón de
   «Solicitar financiación» de arriba vive FUERA del simulador (es su propio atajo, para
   poder ir por encima del título). Colgando del simulador, ese botón se quedaba sin
   valores: el degradado no se pintaba y el texto blanco quedaba sobre fondo blanco,
   invisible. Visto en la página real, no en el código (4/09/2026). */
:root {
  --fin-azul: #0d2ce2;
  --fin-violeta: #532af6;
  --fin-texto: #1a1d29;
  --fin-suave: #667085;
  --fin-borde: #e4e7ec;
  --fin-fondo-suave: #f4f6fc;
}
.fin-simulador,
.fin-cabecera {
  font-family: Poppins, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.fin-simulador {
  color: var(--fin-texto);
  /* PROBADO en movil, no solo razonado (a la primera no bastaba): esta pagina cuelga
     de una columna de Avada en flex-direction:column, y ahi el hijo NO se estira solo
     al ancho de la columna si su contenido pide mas sitio — la tabla del cuadro de
     amortizacion lleva white-space:nowrap y sin este width:100% explicito, arrastraba
     a todo el simulador a desbordarse 660px de ancho en un movil de 375, cortando la
     mitad derecha de los resultados sin barra de scroll que lo delatara. Con un ancho
     explicito ya no hace falta fiarse del "stretch" del flex de Avada. */
  width: 100%;
  max-width: 900px;
  /* 22px de aire arriba, entre el texto de introducción y el recuadro «1. Elige tu
     máster» (Manuel, 7/09/2026): el fusion-text de la intro ya deja 34px, total 56. La
     columna de Avada es flex, así que los dos márgenes NO se funden. OJO: va en el
     shorthand, un margin-top suelto antes de esta línea lo pisaba el «margin: 0 auto». */
  margin: 22px auto 0;
  box-sizing: border-box;
}
.fin-caja,
.fin-resultado,
.fin-tablas,
.fin-tabla-wrap { min-width: 0; }

.fin-ofertas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 28px;
}
@media (min-width: 720px) {
  .fin-ofertas { grid-template-columns: 1fr 1fr; }
}
.fin-oferta {
  border: 1px solid var(--fin-borde);
  border-radius: 16px;
  padding: 18px 20px;
  background: #fff;
}
.fin-oferta h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}
.fin-oferta .fin-oferta-tipo {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--fin-azul), var(--fin-violeta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.2;
}
.fin-oferta p {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--fin-suave);
  line-height: 1.5;
}

.fin-caja {
  border: 1px solid var(--fin-borde);
  border-radius: 18px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
}

.fin-campo { margin-bottom: 18px; }
.fin-campo label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.fin-campo select,
.fin-campo input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--fin-borde);
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  color: var(--fin-texto);
  background: #fff;
}
.fin-campo select:disabled,
.fin-campo input:disabled {
  background: var(--fin-fondo-suave);
  color: var(--fin-suave);
}
.fin-campo input[type="range"] {
  width: 100%;
  accent-color: var(--fin-violeta);
}
.fin-campo-valor {
  font-size: 13.5px;
  color: var(--fin-suave);
  margin-top: 4px;
}

.fin-chip-entidad {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--fin-azul), var(--fin-violeta));
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.fin-nota-entidad {
  display: block;
  font-size: 13px;
  color: var(--fin-suave);
  margin-top: 4px;
}

.fin-aviso-elige {
  background: var(--fin-fondo-suave);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--fin-suave);
  text-align: center;
}

.fin-resultado[hidden],
.fin-aviso-elige[hidden],
.fin-resultado-carencia[hidden],
.fin-fila-carencia-meses[hidden],
.fin-bloque-mensual[hidden] { display: none; }

.fin-resultado {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--fin-borde);
}
.fin-resultado-titulo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fin-suave);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0 0 12px;
}
.fin-resultado-principal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
}
.fin-r-cuota {
  font-size: 34px;
  font-weight: 700;
  color: var(--fin-azul);
  line-height: 1;
}
.fin-resultado-principal span.fin-por-mes {
  font-size: 15px;
  color: var(--fin-suave);
}

.fin-resultado-carencia {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  margin-bottom: 18px;
  line-height: 1.6;
}
.fin-resultado-carencia strong { color: #c2410c; }

.fin-datos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
@media (min-width: 560px) {
  .fin-datos-grid { grid-template-columns: repeat(4, 1fr); }
}
.fin-dato { min-width: 0; }
.fin-dato-label {
  font-size: 12px;
  color: var(--fin-suave);
  margin-bottom: 3px;
}
.fin-dato-valor {
  font-size: 17px;
  font-weight: 600;
  word-break: break-word;
}

.fin-tablas { margin-top: 26px; }
.fin-tablas h4 {
  font-size: 14.5px;
  margin: 0 0 10px;
}
.fin-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.fin-tabla-anual,
.fin-tabla-mensual {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.fin-tabla-anual th,
.fin-tabla-mensual th {
  text-align: right;
  font-weight: 600;
  color: var(--fin-suave);
  padding: 8px 10px;
  border-bottom: 2px solid var(--fin-borde);
}
.fin-tabla-anual th:first-child,
.fin-tabla-mensual th:first-child { text-align: left; }
.fin-tabla-anual td,
.fin-tabla-mensual td {
  text-align: right;
  padding: 7px 10px;
  border-bottom: 1px solid var(--fin-borde);
}
.fin-tabla-anual td:first-child,
.fin-tabla-mensual td:first-child { text-align: left; color: var(--fin-suave); }

.fin-toggle-mensual {
  margin-top: 14px;
  background: none;
  border: 1px solid var(--fin-borde);
  border-radius: 999px;
  padding: 9px 16px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fin-azul);
  cursor: pointer;
}
.fin-toggle-mensual:hover { background: var(--fin-fondo-suave); }
.fin-bloque-mensual { margin-top: 14px; max-height: 380px; overflow-y: auto; }

.fin-aviso-legal {
  margin-top: 26px;
  padding: 16px 18px;
  background: var(--fin-fondo-suave);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fin-suave);
}
.fin-aviso-legal strong { color: var(--fin-texto); }

@media (max-width: 480px) {
  .fin-r-cuota { font-size: 28px; }
  .fin-caja { padding: 16px; }
}

/* ---------------------------------------------------------- lo añadido el 4/09/2026:
   el «?» de cada oferta, las condiciones dentro del simulador y los dos botones de
   «Solicitar financiación» (arriba a la derecha y debajo de la calculadora). */

.fin-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.fin-cabecera-texto {
  margin: 0;
  font-size: 14px;
  color: var(--fin-suave);
  flex: 1 1 220px;
}

.fin-cta {
  display: inline-block;
  background: linear-gradient(135deg, var(--fin-azul), var(--fin-violeta));
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 15px;
  line-height: 1.2;
  box-shadow: 0 8px 20px rgba(13, 44, 226, .28);
  transition: transform .16s ease, box-shadow .16s ease;
  text-align: center;
}
.fin-cta:hover,
.fin-cta:focus {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(13, 44, 226, .38);
}
/* En movil el boton de la cabecera va a lo ancho: un boton a media linea al lado de un
   texto se queda en un pellizco imposible de acertar con el dedo. */
@media (max-width: 560px) {
  .fin-cta--cabecera { width: 100%; }
}
.fin-cta--grande { padding: 15px 34px; font-size: 16.5px; }

.fin-oferta-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.fin-oferta-cab h3 { margin: 0 0 6px; }

/* El «?»: 30px de diametro, que es el minimo con el que se acierta con el dedo sin
   pelear, y con foco visible para quien va por teclado. */
.fin-oferta-ayuda {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--fin-borde);
  background: #fff;
  color: var(--fin-azul);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background .16s ease, color .16s ease;
}
.fin-oferta-ayuda:hover { background: var(--fin-fondo-suave); }
.fin-oferta-ayuda:focus-visible { outline: 2px solid var(--fin-violeta); outline-offset: 2px; }
.fin-oferta-ayuda--abierta {
  background: linear-gradient(135deg, var(--fin-azul), var(--fin-violeta));
  color: #fff;
  border-color: transparent;
}

/* Texto solo para lectores de pantalla (el boton se ve como «?», pero quien lo escucha
   necesita saber de que oferta habla). */
.fin-solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fin-oferta-detalle {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--fin-borde);
  font-size: 13.5px;
  line-height: 1.6;
}
.fin-oferta-detalle[hidden] { display: none; }
.fin-oferta-detalle ul {
  margin: 0;
  padding-left: 18px;
}
.fin-oferta-detalle li { margin-bottom: 6px; }

.fin-condiciones-master {
  background: var(--fin-fondo-suave);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0 20px;
  font-size: 13.5px;
  line-height: 1.6;
}
.fin-condiciones-master:empty { display: none; }
.fin-condiciones-titulo {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--fin-suave);
  margin-bottom: 8px;
}
.fin-condiciones-master ul { margin: 0; padding-left: 18px; }
.fin-condiciones-master li { margin-bottom: 5px; }
.fin-condiciones-nota { margin: 8px 0 0; color: var(--fin-suave); font-style: italic; }

.fin-faq { margin-top: 10px; }
.fin-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--fin-azul);
}
.fin-faq p { margin: 8px 0 0; }

.fin-pie-cta {
  margin-top: 26px;
  padding: 22px;
  border: 1px solid var(--fin-borde);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.fin-pie-cta p {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--fin-suave);
}

/* ------------------------------------------- retoques del 4/09/2026 (Manuel, 2ª vuelta):
   el botón de solicitar solo arriba a la derecha, el selector de máster convertido en LA
   llamada a la acción de la página, y las tarjetas de condiciones movidas al final. */

.fin-cabecera { justify-content: flex-end; margin-bottom: 16px; }

/* El selector de máster es lo que tiene que hacer el visitante: se le da peso visual de
   botón (borde violeta grueso, fondo tintado y tipografía mayor) para que no se lea como
   un campo de formulario más. */
.fin-campo--cta {
  border: 2px solid var(--fin-violeta);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(13, 44, 226, .04), rgba(83, 42, 246, .07));
}
.fin-campo--cta label {
  font-size: 16px;
  font-weight: 700;
  color: var(--fin-azul);
  margin-bottom: 10px;
}
.fin-campo--cta select {
  border: 1px solid var(--fin-violeta);
  font-size: 16px;
  padding: 13px 12px;
  font-weight: 500;
}
.fin-campo--cta select:focus {
  outline: 2px solid var(--fin-violeta);
  outline-offset: 1px;
}

.fin-ofertas-titulo {
  margin: 32px 0 14px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}
.fin-ofertas { margin-bottom: 0; }
.fin-pie-cta[hidden] { display: none; }

/* ------------------------------------------- retoques del 4/09/2026 (3ª vuelta, Manuel):
   los dos botones para cambiar de entidad, los acordeones de condiciones y el bloque
   final que no aparece hasta que hay un máster elegido. */

.fin-bloque-final[hidden] { display: none; }

/* Los dos botones de entidad: se leen como pestañas, con el tipo de interés grande
   porque es lo que de verdad compara el alumno. */
.fin-entidades {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 620px) {
  .fin-entidades { grid-template-columns: 1fr 1fr; }
}
.fin-entidad {
  text-align: left;
  border: 2px solid var(--fin-borde);
  background: #fff;
  border-radius: 14px;
  padding: 13px 15px;
  font: inherit;
  color: var(--fin-texto);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.fin-entidad:hover { border-color: var(--fin-violeta); }
.fin-entidad:focus-visible { outline: 2px solid var(--fin-violeta); outline-offset: 2px; }
.fin-entidad-tipo {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fin-azul);
}
.fin-entidad-nombre {
  font-size: 12.5px;
  color: var(--fin-suave);
  line-height: 1.4;
}
.fin-entidad--activa {
  border-color: var(--fin-violeta);
  background: linear-gradient(135deg, rgba(13, 44, 226, .05), rgba(83, 42, 246, .09));
  box-shadow: 0 4px 14px rgba(83, 42, 246, .14);
}
.fin-entidad--activa .fin-entidad-nombre { color: var(--fin-texto); }

.fin-nota-entidad { margin-top: 8px; }

/* El aviso de que el máster cuesta más de lo que presta esa entidad. */
.fin-aviso-tope[hidden] { display: none; }
.fin-aviso-tope {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 9px 12px;
  color: #9a3412;
  margin-top: 8px;
}

/* Los dos acordeones de condiciones. */
.fin-acordeon {
  border: 1px solid var(--fin-borde);
  border-radius: 14px;
  background: #fff;
  margin-top: 12px;
  overflow: hidden;
}
.fin-acordeon > summary {
  cursor: pointer;
  padding: 15px 18px;
  font-weight: 600;
  font-size: 15px;
  color: var(--fin-azul);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fin-acordeon > summary::-webkit-details-marker { display: none; }
.fin-acordeon > summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  flex: none;
}
.fin-acordeon[open] > summary::after { content: '−'; }
.fin-acordeon > summary:hover { background: var(--fin-fondo-suave); }
.fin-acordeon-cuerpo {
  padding: 0 18px 18px;
  font-size: 13.5px;
  line-height: 1.65;
}
.fin-acordeon-cuerpo h5 {
  margin: 14px 0 8px;
  font-size: 14.5px;
  font-weight: 700;
}
.fin-acordeon-cuerpo h5:first-child { margin-top: 0; }
.fin-acordeon-cuerpo ul { margin: 0; padding-left: 18px; }
.fin-acordeon-cuerpo li { margin-bottom: 6px; }
.fin-acordeon-cuerpo p { margin: 8px 0 0; }

.fin-oferta h4 { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; }

/* ------------------------------------------- retoques del 4/09/2026 (4ª vuelta, Manuel):
   el botón por encima del título y el texto de entrada más estrecho. */

/* El botón va ahora en la propia página, ANTES del título, con su atajo
   [financiacion_boton]: desde dentro del simulador no había forma de subirlo más,
   porque el simulador se pinta después del título y del texto. */
.fin-cabecera {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 6px;
}

/* El párrafo de entrada, más estrecho: a todo lo ancho de la columna llegaba casi a los
   bordes y las líneas quedaban descompensadas. */
/* Doble clase a propósito: Avada trae su propio `.fusion-text { max-width: none }` y su
   hoja carga DESPUÉS que esta, así que con un solo `.fin-intro` (misma especificidad)
   ganaba la suya y el ancho no se aplicaba. Comprobado en la página real. */
.fusion-text.fin-intro { max-width: 780px; margin-left: auto; margin-right: auto; }

/* ------------------------------------------- retoques del 5/09/2026 (Manuel): importe y
   carencia pasaban inadvertidos, la carencia necesita explicación, y el detalle de pagos
   pasa a ser un acordeón cerrado con el TIN/TAE dentro. */

/* Destacados, pero por debajo del selector de máster: ese sigue siendo LA llamada a la
   acción y no debe competir con estos dos. */
.fin-campo--destacado {
  border: 1px solid var(--fin-violeta);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--fin-fondo-suave);
}
.fin-campo--destacado > label { font-size: 15px; color: var(--fin-texto); }

/* El «?» de la carencia, hermano del de las ofertas pero dentro de una etiqueta. */
.fin-ayuda {
  width: 22px;
  height: 22px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid var(--fin-borde);
  background: #fff;
  color: var(--fin-azul);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.fin-ayuda:hover { background: #fff; border-color: var(--fin-violeta); }
.fin-ayuda:focus-visible { outline: 2px solid var(--fin-violeta); outline-offset: 2px; }
.fin-ayuda--abierta {
  background: linear-gradient(135deg, var(--fin-azul), var(--fin-violeta));
  color: #fff;
  border-color: transparent;
}

.fin-explica[hidden] { display: none; }
.fin-explica {
  background: #fff;
  border: 1px solid var(--fin-borde);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 400;
}
.fin-explica p { margin: 0 0 8px; }
.fin-explica p:last-child { margin-bottom: 0; }

/* El acordeón del detalle de pagos: mismo aspecto que los de condiciones. */
.fin-acordeon--detalle { margin-top: 22px; }
.fin-datos-grid--tipos {
  grid-template-columns: 1fr 1fr;
  max-width: 320px;
  margin-bottom: 18px;
}
.fin-acordeon-cuerpo h4 {
  font-size: 14.5px;
  margin: 18px 0 10px;
}
.fin-acordeon-cuerpo h4:first-of-type { margin-top: 0; }

/* El TIN de las tarjetas de abajo iba a 28px con degradado y pesaba más que el de los
   botones de elegir entidad, que es el que de verdad hay que mirar. Abajo es informativo:
   mismo tamaño que arriba (22px) y en gris oscuro (Manuel, 5/09/2026). */
.fin-oferta .fin-oferta-tipo {
  font-size: 22px;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #475467;
}

/* La «i» del coste medio: va dentro de una etiqueta de dato (más pequeña que la del
   campo de carencia), pero a 17px no se leía — a tamaño real parecía un círculo vacío.
   Comprobado ampliando la captura (Manuel, 5/09/2026). */
.fin-ayuda--mini {
  width: 19px;
  height: 19px;
  font-size: 12.5px;
  margin-left: 5px;
}
.fin-datos-grid--tipos { max-width: 480px; grid-template-columns: repeat(3, 1fr); }

/* Las cuatro etiquetas del resultado caben en una línea, así que las cifras ya se alinean
   solas. (Hubo aquí un min-height para compensar que «Coste medio de financiación» partía
   en dos líneas; al acortarse a «Coste medio» dejó de hacer falta y solo abría hueco.) */
/* La etiqueta que lleva el botón «i» es 2px más alta que las de solo texto y su cifra
   quedaba descolgada. Con flex y un alto mínimo igual al del botón, las cuatro etiquetas
   miden lo mismo y los cuatro números caen a la misma altura. */
.fin-resultado > .fin-datos-grid .fin-dato-label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  line-height: 1.35;
}
.fin-resultado > .fin-datos-grid .fin-ayuda--mini { margin-left: 0; }

/* Las cifras del resultado se alinean por ABAJO, no por el alto de su etiqueta: así dan
   igual las etiquetas de una o de dos líneas (pasó al añadir «Intereses sobre el total»,
   que parte en dos y descolgaba su cifra 13px). Con esto vale cualquier texto futuro sin
   volver a tocar nada. */
.fin-resultado > .fin-datos-grid .fin-dato {
  display: flex;
  flex-direction: column;
}
.fin-resultado > .fin-datos-grid .fin-dato-valor { margin-top: auto; }
.fin-resultado > .fin-datos-grid .fin-dato-label { min-height: 0; align-items: flex-start; }

/* La cuota, en verde: es el dato que el alumno busca y da la sensación de «esto es
   asumible» (Manuel, 5/09/2026). Verde esmeralda #059669: contraste 3,77:1 sobre blanco,
   suficiente para texto grande en negrita (AA pide 3:1 a partir de 18,66px en negrita, y
   aquí son 34px / 28px en móvil). Comprobado el contraste, no elegido a ojo. */
.fin-r-cuota { color: #059669; }

/* OJO, esto se probó y se corrigió: el menú de mid.es NO empuja al contenido, va
   SUPERPUESTO encima (llega hasta y=69-77px según el ancho), y el `padding-top` que Avada
   le pone a #main es justo su hueco. Al recortarlo a 24px el botón se metió DEBAJO del
   menú en escritorio y en móvil. Así que se deja el hueco justo (78px, medido en 375,
   480, 768, 1024, 1280 y 1600px) y el aire se gana de otra manera: en escritorio el
   bloque del botón se «recoge» con un margen negativo igual a su alto, de modo que el
   título sube a su misma altura (el botón va a la derecha y el título centrado: no se
   tocan). En móvil no, que ahí el botón ocupa todo el ancho y se solaparían. */
body #main { padding-top: 78px; }
.fin-cabecera { margin-bottom: 0; }
/* 1050px y no 900: medido en la página, a 900px el título centrado y el botón quedan a
   -2px (se tocan). A partir de 1024 ya sobran 42px y a 1280, 145px. */
@media (min-width: 1050px) {
  .fin-cabecera { margin-bottom: -42px; }
}

/* Las cifras de debajo de la cuota, en gris oscuro: la única en negro/verde debe ser la
   cuota, que es la que manda (Manuel, 5/09/2026). Se le da a las cuatro y no solo a las
   tres de importe: dejar «Duración total» en negro al lado de las otras cantaba. */
.fin-resultado > .fin-datos-grid .fin-dato-valor { color: #475467; }

/* ------------------------------------------- móvil (Manuel, 5/09/2026): el botón de
   arriba estorba encima del título en pantallas estrechas. Por debajo de 1050px (que es
   justo donde deja de caber al lado del título) se esconde el de arriba y sale uno dentro
   del simulador, debajo del selector; ese desaparece al elegir máster, porque entonces ya
   aparece el del final del todo. */
.fin-cta-movil { display: none; margin: 0 0 18px; }
.fin-cta-movil[hidden] { display: none !important; }
.fin-cta-movil .fin-cta { display: block; width: 100%; box-sizing: border-box; }
@media (max-width: 1049px) {
  .fin-cabecera { display: none; }
  .fin-cta-movil { display: block; }
}

/* Quitado el 10% de los lados en móvil, el párrafo de entrada quedaba pegado al borde de
   la pantalla y se leía mal. La caja del simulador sí va a sangre (se ve bien), pero al
   texto se le deja el mínimo respiro. */
@media (max-width: 640px) {
  .fusion-text.fin-intro { padding-left: 8px; padding-right: 8px; }
}

/* Móvil (Manuel, 5/09/2026): el botón, despegado del recuadro del selector. El aire
   lateral lo da entero el contenedor de la página (2,5%), igual para TODOS los bloques,
   incluidos los tres del final: llegaron a llevar un margen extra para quedar al 5%, pero
   se quitó a petición de Manuel. */
@media (max-width: 640px) {
  .fin-cta-movil { margin: 42px 0 8px; }
}