/* Tipografías alojadas en el sitio (licencia OFL). El respaldo imita sus medidas: si tardan, el texto no salta. */
@font-face { font-family: "Sora"; src: url("assets/fonts/sora-latin.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora Respaldo"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 114.21%; ascent-override: 84.93%; descent-override: 25.39%; line-gap-override: 0%; }
@font-face { font-family: "Inter Respaldo"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 106.34%; ascent-override: 91.10%; descent-override: 22.68%; line-gap-override: 0%; }

:root {
  --night: #0b1f3a;
  --night-deep: #081830;
  --night-soft: #c9d5e3;
  --mint: #00e7b6;
  --ink-green: #007f6e;
  --amber: #ffb020;
  --amber-deep: #ffc555;
  --ice: #f4f7fa;
  --slate: #3f4f65;
  --error: #a32815;
  --whatsapp: #25d366;
  --line: rgb(11 31 58 / 16%);
  --line-night: rgb(255 255 255 / 18%);
  --line-field: rgb(11 31 58 / 58%);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --top: 72px;
  --pad: max(clamp(20px, 3.900vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --edge: max(var(--pad), calc((100% - 1360px) / 2 + var(--pad)));
  --section: clamp(56px, 7vw, 96px);
  --sora: "Sora", "Sora Respaldo", "Avenir Next", sans-serif;
  --inter: "Inter", "Inter Respaldo", "Helvetica Neue", sans-serif;
  color-scheme: only light;
  scrollbar-color: var(--slate) var(--ice);
}
@media (max-width: 62.4375em) { :root { --top: 62px; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block: var(--top) 96px; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html:has(.apply[open]) { overflow: hidden; }
body {
  margin: 0;
  background: #fff;
  color: var(--night);
  font: 400 1.0625rem/1.55 var(--inter);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
ol, ul { list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; touch-action: manipulation; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, summary, .cta { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
svg { display: block; }
img { display: block; max-width: 100%; }
main:focus { outline: none; }
::selection { background: var(--mint); color: var(--night); }
:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; border-radius: 4px; }
.top :focus-visible, .hero :focus-visible, .mortgage :focus-visible, .close :focus-visible, .foot :focus-visible, .dock :focus-visible { outline-color: var(--amber); }
.menu nav :focus-visible { outline-color: var(--night); }
[hidden] { display: none !important; }
.sprite { position: absolute; }
.keep { white-space: nowrap; }
.wrap { width: min(100%, 1360px); margin-inline: auto; padding-inline: var(--pad); }
article[id], .foot__fine { scroll-margin-top: 24px; }
.skip {
  position: fixed; z-index: 40; top: 12px; left: 12px; padding: 10px 16px; border-radius: 8px;
  background: var(--amber); color: var(--night); font-weight: 600;
  transform: translateY(-200%); transition: transform 160ms var(--ease);
}
.skip:focus { transform: none; }
.noscript { padding: 12px var(--pad); background: var(--amber); color: var(--night); font-weight: 500; text-align: center; }

/* Títulos */
.section-title { font: 600 min(clamp(1.750rem, 3vw, 2.500rem), 10vw)/1.150 var(--sora); letter-spacing: -0.025em; }

/* Cabecera */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: clamp(16px, 2.400vw, 36px); min-height: var(--top);
  padding-block: max(10px, env(safe-area-inset-top, 0px)) 10px; padding-inline: var(--edge);
  background: var(--night); color: #fff; border-bottom: 1px solid var(--line-night);
}
.logo { display: block; flex: none; margin-right: auto; }
.logo img { display: block; width: auto; height: 40px; }
.top__nav { display: flex; gap: clamp(14px, 2.200vw, 32px); font-weight: 500; font-size: 0.9375rem; }
.top__nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; }
.top__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); }
.top__nav a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .top__nav a:hover::after { transform: scaleX(1); } }
.top__nav a:active { opacity: 0.7; }
.top .cta--small { flex: none; gap: 0; min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }

.menu { display: none; position: relative; flex: none; }
.menu summary { display: grid; gap: 5px; place-content: center; width: 44px; height: 44px; border-radius: 8px; cursor: pointer; list-style: none; transition: background-color 120ms ease-out; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 22px; height: 2px; border-radius: 1px; background: #fff; transition: transform 200ms var(--ease), opacity 120ms ease-out; }
.menu summary:active, .menu[open] summary { background: rgb(255 255 255 / 12%); }
.menu[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu[open] summary span:nth-child(2) { opacity: 0; }
.menu[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu nav {
  position: absolute; top: calc(100% + 8px); right: 0; display: grid; width: 260px; max-height: calc(100dvh - var(--top) - 16px); padding: 8px;
  overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--night); box-shadow: 0 16px 32px -14px rgb(3 12 28 / 40%); transform-origin: top right;
}
.menu[open] nav { animation: menu-in 180ms var(--ease); }
.menu nav a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 6px; text-decoration: none; font-weight: 500; }
.menu nav a:active { background: var(--ice); }
@media (hover: hover) and (pointer: fine) { .menu nav a:hover { background: var(--ice); } }

/* Botón principal */
.cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 8px;
  /* Más luz arriba y un halo ámbar: el botón principal es lo más brillante de cada pantalla. */
  background: linear-gradient(180deg, #ffd65c, #ffbc2e); color: var(--night); text-decoration: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 10px 28px -12px rgb(255 196 46 / 80%);
  font: 600 1.0625rem/1.150 var(--sora); letter-spacing: -0.01em; white-space: nowrap;
  transition: filter 160ms ease-out, transform 160ms var(--ease), box-shadow 200ms ease-out;
}
.cta svg { width: 22px; height: 22px; flex: none; transition: transform 200ms var(--ease); }
.cta::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 55%), rgb(255 255 255 / 0%));
  transform: translateX(-120%) skewX(-16deg);
}
.cta:active { transform: scale(0.97); }
.cta--large { min-height: 68px; padding: 0 36px; font-size: clamp(1.1875rem, 1.600vw, 1.375rem); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%), 0 14px 32px -12px rgb(255 196 46 / 95%); }
  .cta:hover:active { transform: scale(0.97); }
  .cta:not(.apply__submit):hover svg { transform: translateX(4px); }
}

/* Primera pantalla */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; min-height: clamp(600px, calc(92svh - var(--top)), 880px); padding-top: 28px;
  background: var(--night); color: #fff;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.hero__copy { align-self: center; padding-top: 12px; }
.hero__title { font: 600 clamp(2.375rem, 4.700vw, 4.250rem)/1.120 var(--sora); letter-spacing: -0.035em; }
.hero__offer { margin-top: 20px; font: 500 clamp(1.1875rem, 1.800vw, 1.625rem)/1.300 var(--sora); letter-spacing: -0.015em; color: var(--night-soft); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(24px, 4vh, 40px); }
.hero__free { font-size: 0.9375rem; line-height: 1.35; color: var(--night-soft); }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: 0.9375rem; color: var(--night-soft); }
.hero__trust li { display: flex; align-items: center; gap: 6px; }
.hero__trust svg { width: 18px; height: 18px; flex: none; color: var(--mint); }
.hero__link { display: inline-block; margin-top: 8px; padding-block: 12px; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: #fff; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 1.500px; }
.hero__link svg { display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -4px; transition: transform 200ms var(--ease); }
.hero__link:active { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) { .hero__link:hover svg { transform: translateX(4px); } }
.hero__art { position: relative; align-self: end; display: flex; justify-content: center; }
.hero__person { width: auto; height: auto; max-height: min(calc(88svh - var(--top)), 800px); }
/* Un eCheq en curso: muestra el proceso digital junto a la persona. Es ilustración; los mismos datos están en el texto. */
.status {
  position: absolute; z-index: 1; left: 0; bottom: clamp(48px, 13%, 112px);
  width: min(16.75rem, 100%); padding: 14px 16px 4px; border-radius: 12px;
  background: #fff; color: var(--night);
  box-shadow: 0 24px 48px -16px rgb(3 12 28 / 60%), 0 2px 6px rgb(3 12 28 / 18%);
}
.status__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid var(--night); font: 600 0.9375rem/1.200 var(--sora); }
.status__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: #dff6ef; color: var(--night); font: 600 0.75rem/1 var(--inter); }
.status__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-green); }
.status__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; font-size: 0.875rem; font-weight: 500; }
.status__list li + li { border-top: 1px solid var(--line); }
.status__list small { font-size: 0.8125rem; font-weight: 400; color: var(--slate); }
.status__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-green); color: #fff; }
.status__ok svg { width: 14px; height: 14px; }

/* Fondo en movimiento: un degradado encima lo funde con el azul, mucho más liviano que una máscara. Sin video queda su primer cuadro, idéntico. */
.bg-video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; pointer-events: none; background: var(--night); }
.hero::after, .close::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--night) 30%, rgb(11 31 58 / 0%) 62%), linear-gradient(0deg, rgb(11 31 58 / 0%) 70%, var(--night));
}

/* Elegí cómo financiarte: claro es cheques, noche es propiedad, y el resto de la página sigue ese código */
.paths { padding-block: var(--section); }
.paths__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(24px, 3vw, 36px); }
/* En todas las pantallas el texto va arriba y el cheque o la casa debajo, enteros: al costado del texto se pisaban. */
.path { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); border-radius: 12px; text-decoration: none; transition: transform 160ms var(--ease); }
.path:active { transform: scale(0.985); }
/* El enlace "Ver…" cubre todo el panel con su ::after: se toca en cualquier parte y el lector de pantalla lee un enlace corto.
   .path__text no lleva position para que ese ::after se mida contra el panel; el z-index vale igual porque es un ítem flex. */
.path__text { z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.path h3 { font: 600 clamp(1.625rem, 2.400vw, 2rem)/1.150 var(--sora); letter-spacing: -0.025em; }
.path p { margin-top: 10px; }
.path__facts { margin-block: 16px 22px; border-top: 1px solid var(--line); font-weight: 500; }
.path__facts li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.path__go { display: block; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.500px; text-underline-offset: 0.2em; }
.path__go svg { display: inline-block; width: 20px; height: 20px; margin-left: 8px; vertical-align: -4px; transition: transform 200ms var(--ease); }
.path:active .path__go { opacity: 0.7; }
.path__go::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.path__go:focus-visible { outline: none; }
.path__go:focus-visible::after { outline: 3px solid var(--night); outline-offset: -4px; }
.path--home .path__go:focus-visible::after { outline-color: var(--amber); }
.path--cheques { background: var(--ice); box-shadow: inset 0 0 0 1px var(--line); }
.path--home { background: var(--night); color: #fff; }
/* El espacio de abajo mide lo mismo que la foto: el porcentaje del padding se toma del ancho del panel. */
.path--home { --alto-casa: 340px; padding-bottom: calc(min(100% * 581 / 1200, var(--alto-casa)) + 6px); }
/* El texto toma el alto que sobra: el cheque queda apoyado abajo, a la misma altura que la casa del panel vecino. */
.path--cheques .path__text { flex: 1; }
.path--home p, .path--home .path__facts { color: var(--night-soft); }
.path--home .path__facts, .path--home .path__facts li { border-color: var(--line-night); }
.path__art { align-self: center; width: min(100%, 300px); margin-top: 26px; padding: 14px 16px 16px; transform: rotate(-2deg); }
.path__art .cheque__line strong { font-size: 1.0625rem; }
.path__art .cheque__sign svg { width: 124px; height: 27px; }
.path__photo {
  /* La casa ocupa todo el ancho del borde de abajo con su proporción real, como la foto de una tarjeta. Solo en paneles
     muy anchos (una columna en tablet) se limita el alto y se recorta el cielo, nunca la casa. */
  position: absolute; left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 1200 / 581; max-height: var(--alto-casa);
  object-fit: cover; object-position: 50% 85%;
  -webkit-mask-image: linear-gradient(0deg, #000 70%, transparent);
  mask-image: linear-gradient(0deg, #000 70%, transparent);
  transform-origin: center bottom; transition: transform 250ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .path:hover .path__go svg { transform: translateX(4px); }
  .path:hover .path__photo { transform: scale(1.04); }
}

/* Cheque dibujado: una ilustración, no un documento */
.cheque {
  min-width: 0; overflow: hidden; padding: 18px 22px 20px; border: 1px solid var(--line); border-radius: 10px;
  background: repeating-linear-gradient(135deg, rgb(0 194 168 / 7%) 0 1px, transparent 1px 7px), #fbfcf8;
  color: var(--night); text-align: left; box-shadow: 0 28px 48px -28px rgb(3 12 28 / 55%);
}
.cheque small { display: block; font-size: 0.75rem; color: var(--slate); }
.cheque__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 2px solid var(--night); font: 600 0.9375rem/1.200 var(--sora); }
.cheque__head img { width: auto; height: 17px; }
.cheque__line, .cheque__sign { margin-top: 10px; }
.cheque__line strong { font: 600 1.250rem/1.250 var(--sora); letter-spacing: -0.02em; }
.cheque__sign svg { width: 150px; height: 33px; border-bottom: 1px solid var(--line); }
.cheque__sign path { fill: none; stroke: var(--night); stroke-width: 1.800; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.cheque__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; font-size: 0.75rem; font-weight: 500; color: var(--slate); }
.cheque__steps li { position: relative; padding-top: 12px; }
.cheque__steps li::before { content: ""; position: absolute; left: 0; right: 4px; top: 0; height: 4px; border-radius: 2px; background: var(--ink-green); transform-origin: left; }
.cheque__steps li:last-child { color: var(--ink-green); font-weight: 600; }

/* Con cheques */
.products { padding-block: var(--section); background: var(--ice); }
.facts { margin-top: clamp(24px, 3vw, 36px); padding: clamp(20px, 2.400vw, 30px); border-radius: 10px; background: var(--night); color: #fff; }
/* Las columnas se arman según lo que entra: con la letra del navegador agrandada, "$50.000.000" baja a otro renglón en vez de pisar al plazo. */
.facts__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5em), 1fr)); gap: 20px 12px; }
.facts__list dt { font-size: 0.875rem; color: var(--night-soft); }
.facts__list dd { margin-top: 4px; font: 600 clamp(1.125rem, 5.400vw, 1.500rem)/1.150 var(--sora); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.products__list { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(24px, 3vw, 40px); border-top: 2px solid var(--night); }
.product { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 0 32px; border-bottom: 1px solid var(--line); }
.product h3 { font: 600 clamp(1.375rem, 2vw, 1.750rem)/1.200 var(--sora); letter-spacing: -0.02em; }
.product p { max-width: 42ch; }
.product__data { color: var(--slate); font-weight: 500; margin-bottom: 14px; }
.product .cta { margin-top: auto; }

/* Cómo funciona */
.how { padding-block: var(--section); }
.how__head { display: grid; gap: 28px; align-items: end; }
.how .cheque { width: min(100%, 520px); }
.steps { counter-reset: step; margin-top: clamp(28px, 4vw, 48px); display: grid; border-top: 2px solid var(--night); }
.steps li { counter-increment: step; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: "Paso " counter(step); display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 500; color: var(--slate); }
.steps__time { display: block; margin-bottom: 8px; font: 600 clamp(1.375rem, 2.200vw, 1.875rem)/1.150 var(--sora); letter-spacing: -0.02em; color: var(--ink-green); }
.steps h3 { font: 600 1.375rem/1.200 var(--sora); letter-spacing: -0.02em; }
.steps p { margin-top: 6px; max-width: 36ch; }
.online { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 18px 20px; border-radius: 10px; background: var(--ice); }
.online__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--night); color: var(--mint); }
.online__icon svg { width: 22px; height: 22px; }
.online p { max-width: 72ch; }
.online strong { font-weight: 600; }
.how__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.how__foot p { font-size: 0.875rem; color: var(--slate); }

/* Requisitos */
.req { padding-block: var(--section); background: var(--ice); }
.req__grid { display: grid; gap: 24px; }
.req__lead { margin-top: 12px; max-width: 40ch; font-size: 1.125rem; color: var(--slate); }
.req__list { border-top: 2px solid var(--night); }
.req__list li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.req__list svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--ink-green); }
.req__cta { justify-self: start; }
.todo {
  display: inline-block; padding: 1px 9px; border: 1.500px dashed #9a6400; border-radius: 4px;
  background: #fff3d9; color: #5f3e00; font: 500 0.875rem/1.500 var(--inter); letter-spacing: 0;
}

/* Hipotecarios */
.mortgage { padding-block: var(--section); background: var(--night); color: #fff; }
.mortgage__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.mortgage__lead { max-width: 58ch; margin-top: 20px; font-size: 1.125rem; color: var(--night-soft); }
/* Lo que hace del hipotecario el mejor préstamo: filas finas, etiqueta chica y valor grande, como la franja de datos de cheques */
.mortgage__facts { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; max-width: 34rem; margin-block: 26px 30px; border-bottom: 1px solid var(--line-night); }
.mortgage__facts > div { padding: 14px 0 16px; border-top: 1px solid var(--line-night); }
.mortgage__facts dt { font-size: 0.875rem; color: var(--night-soft); }
.mortgage__facts dd { margin-top: 4px; font: 600 clamp(1.250rem, 1.900vw, 1.625rem)/1.150 var(--sora); letter-spacing: -0.02em; }
@media (min-width: 37.5em) { .mortgage__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mortgage__free { margin-top: 14px; font-size: 0.9375rem; color: var(--night-soft); }
/* Celular con la charla por WhatsApp: muestra cómo se pide un hipotecario, en lugar de una foto. */
.chat { justify-self: center; align-self: center; width: min(100%, 380px); margin: 0; overflow: hidden; border-radius: 28px; background: var(--ice); color: var(--night); box-shadow: 0 0 0 8px rgb(255 255 255 / 6%), 0 30px 60px -30px rgb(0 0 0 / 60%); }
.chat__bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.chat__bar img { width: 34px; height: auto; }
.chat__bar p { display: grid; line-height: 1.25; }
.chat__bar strong { font: 600 1rem/1.25 var(--sora); }
.chat__bar small { font-size: 0.8125rem; color: var(--slate); }
.chat__list { display: grid; gap: 10px; padding: 18px 16px 22px; }
.chat__msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 0.9375rem; line-height: 1.4; box-shadow: 0 1px 1px rgb(11 31 58 / 8%); }
.chat__msg--in { justify-self: start; background: #fff; border-bottom-left-radius: 4px; }
.chat__msg--out { justify-self: end; background: #d6f7eb; border-bottom-right-radius: 4px; }
.mortgage__how { padding-top: 8px; }
.mortgage__how h3 { font: 600 1.25rem/1.250 var(--sora); letter-spacing: -0.015em; }
.mortgage__steps { counter-reset: paso; display: grid; gap: 14px; margin-top: 18px; }
/* Cada paso es una tarjeta: se distingue del fondo azul y se lee como un recorrido. */
.mortgage__steps li { counter-increment: paso; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 22px 24px; border: 1px solid var(--line-night); border-radius: 12px; background: rgb(255 255 255 / 6%); }
.mortgage__steps li::before { content: "Paso " counter(paso); display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px; background: rgb(0 231 182 / 14%); font-size: 0.8125rem; font-weight: 600; color: var(--mint); }
.mortgage__steps h4 { font: 600 1.25rem/1.250 var(--sora); letter-spacing: -0.015em; }
.mortgage__steps p { margin-top: 6px; max-width: 40ch; color: var(--night-soft); }
.mortgage__note { margin-top: 18px; font-size: 0.9375rem; color: var(--night-soft); }

/* Para quién */
.who { padding-block: var(--section); background: var(--ice); }
.who__figure { margin-top: clamp(24px, 3vw, 40px); }
.who__photo { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 40%; border-radius: 8px; background: #dfe5ec; }
.who__list { display: grid; margin-top: clamp(24px, 3vw, 40px); }
.who__list li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.who__list h3 { font: 600 1.375rem/1.200 var(--sora); letter-spacing: -0.02em; }
.who__list p { margin-block: 6px 10px; }
.more { display: flex; align-items: center; min-height: 36px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.500px; }
.more:active { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) { .more:hover { color: var(--ink-green); } }

/* Quiénes somos */
.about { padding-block: var(--section); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
/* Las dos fotos van debajo del texto, de a dos en pantallas medianas y grandes. */
.about__oficinas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
.about__oficinas img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: #dfe5ec; }
@media (min-width: 37.5em) { .about__oficinas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.about__text { margin-top: 20px; max-width: 58ch; font-size: 1.125rem; }
.about__text + .about__text { margin-top: 14px; }
.values { margin-top: 28px; border-top: 2px solid var(--night); }
.values li { padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 500; }

/* Preguntas frecuentes */
.faq { padding-block: var(--section); background: var(--ice); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.faq__group + .faq__group { margin-top: 36px; }
.faq__group h3 { padding-bottom: 12px; border-bottom: 2px solid var(--night); font: 600 1.125rem/1.300 var(--sora); letter-spacing: -0.015em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  min-height: 60px; padding: 14px 0; cursor: pointer; list-style: none;
  font: 500 clamp(1.0625rem, 1.400vw, 1.1875rem)/1.300 var(--sora); letter-spacing: -0.01em;
  transition: color 120ms ease-out;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%230B1F3A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 200ms var(--ease);
}
.faq summary:active { color: var(--slate); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; max-width: 65ch; }
.faq a:active { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--ink-green); }
  .faq a:hover { color: var(--ink-green); }
}
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 220ms var(--ease), content-visibility 220ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Cierre */
.close { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(64px, 8vw, 112px); background: var(--night); color: #fff; }
.close__title { max-width: 18ch; margin-bottom: 28px; font: 600 min(clamp(2rem, 4vw, 3.250rem), 11vw)/1.120 var(--sora); letter-spacing: -0.03em; }
.close__free { position: relative; z-index: 1; margin-top: 14px; font-size: 0.9375rem; color: var(--night-soft); }
.close__data { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; max-width: 760px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-night); }
.close__data dt { font-size: 0.875rem; color: var(--night-soft); }
.close__data dd { margin-top: 2px; font-weight: 600; }

/* Pie */
.foot { padding-block: 48px calc(96px + env(safe-area-inset-bottom, 0px)); background: var(--night-deep); color: var(--night-soft); font-size: 0.9375rem; }
.foot__top { display: grid; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line-night); }
.foot__nav { display: grid; gap: 32px; }
.foot__brand img { width: auto; height: 34px; }
.foot__brand p { max-width: 30ch; margin-top: 14px; line-height: 1.6; }
.foot__col { display: grid; gap: 2px; justify-items: start; align-content: start; }
.foot__col h2 { margin-bottom: 8px; font: 600 0.9375rem/1.300 var(--sora); color: #fff; }
.foot__col a { display: inline-flex; align-items: center; min-height: 34px; text-decoration: none; }
.foot__col a:active { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) { .foot__col a:hover { color: #fff; text-decoration: underline; } }
.foot__fine { padding-block: 28px; border-bottom: 1px solid var(--line-night); font-size: 0.875rem; line-height: 1.6; }
.foot__fine h2 { margin-bottom: 8px; font: 600 1rem/1.300 var(--sora); color: #fff; }
.foot__fine p { max-width: 90ch; margin-bottom: 10px; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 24px; font-size: 0.875rem; }
.foot__legal { font-size: 0.75rem; }
.foot__base ul { display: flex; flex-wrap: wrap; gap: 8px; }

/* WhatsApp flotante */
.wa-float {
  position: fixed; z-index: 20; right: var(--pad); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; padding: 0; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #4bec8c, var(--whatsapp)); color: var(--night); text-decoration: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 0 0 4px rgb(37 211 102 / 22%), 0 10px 26px -8px rgb(37 211 102 / 75%);
  transition: filter 160ms ease-out, transform 160ms var(--ease), translate 280ms var(--ease);
}
.wa-float:active { transform: scale(0.94); }
.wa-float svg { width: 32px; height: 32px; flex: none; }
.wa-float__label { display: none; }
.wa-float:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { filter: brightness(1.06); } }

/* Barra fija del celular: comparte la fila con WhatsApp para no tapar el contenido */
.dock {
  position: fixed; z-index: 19; left: 0; right: 0; bottom: 0; display: none;
  padding: 10px calc(var(--pad) + 72px) calc(10px + env(safe-area-inset-bottom, 0px)) var(--pad);
  background: var(--night); border-top: 1px solid var(--line-night);
  transform: translateY(110%); transition: transform 280ms var(--ease);
}
.dock .cta { width: 100%; padding-inline: 12px; }
.dock.is-on { transform: none; }

/* Solicitud */
.apply {
  width: min(calc(100vw - 32px), 560px); max-width: none; max-height: min(calc(100dvh - 32px), 880px); padding: 0; overflow: hidden;
  border: 0; border-radius: 12px; background: #fff; color: var(--night);
  box-shadow: 0 30px 70px -20px rgb(3 12 28 / 70%);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), overlay 220ms allow-discrete, display 220ms allow-discrete;
}
.apply[open] { display: flex; flex-direction: column; }
.apply:not([open]) { opacity: 0; transform: scale(0.98); transition-duration: 130ms; }
.apply::backdrop { background: rgb(7 18 36 / 74%); transition: opacity 220ms ease-out, overlay 220ms allow-discrete, display 220ms allow-discrete; }
.apply:not([open])::backdrop { opacity: 0; transition-duration: 130ms; }
@starting-style {
  .apply[open] { opacity: 0; transform: translateY(8px) scale(0.97); }
  .apply[open]::backdrop { opacity: 0; }
}
.apply__top { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 10px 10px 0 clamp(20px, 4vw, 36px); }
.apply__bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ink-green); transform: scaleX(0.5); transform-origin: left; transition: transform 320ms var(--ease); }
.apply[data-stage="form"] .apply__bar, .apply[data-stage="done"] .apply__bar { transform: scaleX(1); }
.apply[data-stage="none"] .apply__bar { transform: scaleX(0); }
.apply__count { font-size: 0.8125rem; font-weight: 500; color: var(--slate); }
.apply__close {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--night);
  transition: background-color 120ms ease-out, transform 160ms var(--ease);
}
.apply__close:active { background: var(--ice); transform: scale(0.94); }
.apply__close svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .apply__close:hover { background: var(--ice); } }
.apply__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px clamp(20px, 4vw, 36px) calc(clamp(20px, 3.600vw, 32px) + env(safe-area-inset-bottom, 0px)); }
.apply__step { animation: step-in 200ms var(--ease); }
.apply__step:focus { outline: none; }
.apply h2 { font: 600 clamp(1.500rem, 2.600vw, 1.875rem)/1.150 var(--sora); letter-spacing: -0.025em; }
.apply__lead { margin-top: 8px; color: var(--slate); }
.apply__pasos { margin: 12px 0 0; padding-left: 1.25em; color: var(--slate); list-style: decimal; }
.apply__pasos li + li { margin-top: 6px; }
.apply__choices { display: grid; gap: 10px; margin-top: 22px; }
.apply__choices button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 10px 18px;
  border: 1px solid var(--line-field); border-radius: 8px; background: #fff;
  text-align: left; font: 500 1.0625rem/1.250 var(--inter);
  transition: border-color 140ms ease-out, background-color 140ms ease-out, transform 160ms var(--ease);
}
.apply__choices button:active { border-color: var(--night); background: var(--ice); transform: scale(0.985); }
.apply__choices svg { width: 20px; height: 20px; flex: none; color: var(--slate); transition: transform 200ms var(--ease), color 140ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .apply__choices button:hover { border-color: var(--night); background: var(--ice); }
  .apply__choices button:hover svg { transform: translateX(3px); color: var(--night); }
}
.apply__chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 14px; padding: 8px 12px; border-radius: 6px; background: var(--ice); font-size: 0.9375rem; }
.apply__chosen span { color: var(--slate); }
.apply__change { margin-left: auto; min-height: 32px; padding: 0 4px; border: 0; background: none; font-weight: 600; text-decoration: underline; }
.apply__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field { display: block; margin-top: 12px; }
.field span { display: block; margin-bottom: 4px; font-size: 0.875rem; font-weight: 500; color: var(--slate); }
.field input, .field textarea {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--line-field); border-radius: 6px; background: #fff; font-size: 1rem; caret-color: var(--night);
  transition: border-color 120ms ease-out;
}
.field input:-webkit-autofill { -webkit-text-fill-color: var(--night); box-shadow: inset 0 0 0 60px var(--ice); }
.field textarea { resize: vertical; field-sizing: content; max-height: 180px; }
@media (hover: hover) and (pointer: fine) { .field input:hover, .field textarea:hover { border-color: var(--night); } }
.field input:focus, .field textarea:focus { border-color: var(--night); outline: 2px solid var(--night); outline-offset: 0; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field [aria-invalid="true"]:focus { outline-color: var(--error); }
[aria-invalid="true"] { animation: nudge 220ms ease-out; }
.check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 0.9375rem; line-height: 1.4; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--night); cursor: pointer; }
.check input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.apply__error { margin-top: 8px; color: var(--error); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.apply__note { margin-top: 12px; padding: 10px 12px; border-radius: 6px; background: var(--ice); font-size: 0.9375rem; line-height: 1.4; }
/* Los avisos quedan siempre en la página, vacíos, para que el lector de pantalla los anuncie al llenarse. */
.apply__error:empty, .apply__note:empty { margin: 0; padding: 0; background: none; }
.apply__submit { width: 100%; margin-top: 18px; padding-inline: 16px; white-space: normal; text-align: center; }
.apply__safe { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-top: 14px; font-size: 0.875rem; font-weight: 500; line-height: 1.4; text-align: left; }
.apply__safe svg { width: 18px; height: 18px; flex: none; color: var(--ink-green); }
.apply__privacy { margin-top: 6px; font-size: 0.8125rem; line-height: 1.4; color: var(--slate); text-align: center; }
.apply__change:active, .apply__back:active { opacity: 0.6; }
.apply__back { display: block; min-height: 44px; margin: 8px auto 0; padding: 0 12px; border: 0; background: none; font-weight: 600; text-decoration: underline; }
.apply__step--done { text-align: center; }
.apply__ok { width: 56px; height: 56px; margin: 0 auto 14px; fill: none; stroke: var(--ink-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.apply__ok circle, .apply__ok path { stroke-dasharray: 1; animation: draw 520ms var(--ease-move) backwards; }
.apply__ok path { animation-delay: 240ms; }

/* Título de la portada: cada palabra sube desde su máscara y la frase clave se subraya. Las palabras ya vienen
   separadas en el HTML; el lector de pantalla lee la frase entera, que está en el aria-label del título. */
.word { display: inline-block; overflow: hidden; overflow: clip; overflow-clip-margin: 0.02em; padding-bottom: 0.18em; margin-bottom: -0.18em; vertical-align: bottom; }
.word > span { display: inline-block; }
.mark { position: relative; white-space: nowrap; }
/* En pantallas angostas, con más espacio entre letras (herramientas de lectura), los grupos que no se cortan se
   salían de la pantalla: ahí se dejan cortar. */
@media (max-width: 37.4375em) { .hero__title .keep, .section-title .mark, .close__title .mark { white-space: normal; } }
.mark::after { content: ""; position: absolute; left: 0; right: 0.04em; bottom: 0.01em; height: 0.06em; border-radius: 1px; background: var(--amber); transform-origin: left; }

@keyframes word-up { from { transform: translateY(115%); } }
@keyframes underline { from { transform: scaleX(0); } }
@keyframes cta-shine { to { transform: translateX(320%) skewX(-16deg); } }
@keyframes wa-in { from { opacity: 0; transform: translateY(12px) scale(0.9); } }
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise, 12px)); } }
@keyframes fade { from { opacity: 0; } }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes menu-in { from { opacity: 0; transform: scale(0.97) translateY(-4px); } }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes tick { from { opacity: 0; transform: scale(0.6); } }

/* Entrada de la primera pantalla, solo con CSS: empieza con el primer pintado y no depende de cuándo llega el JavaScript,
   así nada de lo que ya se vio vuelve a esconderse para animarse. El título manda; lo demás llega cada vez más rápido
   y con menos recorrido, y la foto solo aparece: no compite con el título. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title .word > span { animation: word-up 620ms var(--ease) backwards; }
  .hero__title .word--2 > span { animation-delay: 45ms; }
  .hero__title .word--3 > span { animation-delay: 81ms; }
  .hero__title .word--4 > span { animation-delay: 114ms; }
  .hero__title .word--5 > span { animation-delay: 146ms; }
  .hero__title .word--6 > span { animation-delay: 177ms; }
  .hero__title .mark::after { animation: underline 620ms var(--ease) 560ms backwards; }
  .hero__offer, .hero__actions, .hero__trust, .hero__link { animation: rise 520ms var(--ease) backwards; }
  .hero__offer { animation-delay: 160ms; }
  .hero__actions { --rise: 10px; animation-delay: 240ms; }
  .hero__trust { --rise: 6px; animation-delay: 300ms; animation-duration: 480ms; }
  .hero__link { --rise: 6px; animation-delay: 340ms; animation-duration: 480ms; }
  .hero__person { animation: fade 600ms var(--ease) backwards; }
  .hero .cta::after { animation: cta-shine 900ms var(--ease) 760ms backwards; }
  .wa-float { animation: wa-in 360ms var(--ease) 900ms backwards; }
}
/* La tarjeta del eCheq tilda sus pasos. En escritorio está en la primera pantalla y entra con el resto. */
@media (prefers-reduced-motion: no-preference) and (min-width: 62.5em) {
  .status { animation: rise 520ms var(--ease) 560ms backwards; }
  .status__ok { animation: tick 320ms var(--ease) 880ms backwards; }
  .status li:nth-child(2) .status__ok { animation-delay: 1000ms; }
  .status li:nth-child(3) .status__ok { animation-delay: 1100ms; }
}
/* En el celular queda más abajo: main.js la deja en espera si todavía no se ve y la hace entrar cuando aparece. */
.status--espera { opacity: 0; }
.status--entra { animation: rise 520ms var(--ease) backwards; }
.status--entra .status__ok { animation: tick 320ms var(--ease) 320ms backwards; }
.status--entra li:nth-child(2) .status__ok { animation-delay: 440ms; }
.status--entra li:nth-child(3) .status__ok { animation-delay: 540ms; }

/* El cheque se firma y después avanzan los pasos */
.anim .cheque--live:not(.is-in) .cheque__sign path { stroke-dashoffset: 1; }
.anim .chat--live:not(.is-in) .chat__msg { opacity: 0; transform: translateY(8px); }
.anim .chat--live.is-in .chat__msg { transition: opacity 320ms ease-out 100ms, transform 320ms var(--ease) 100ms; }
.anim .chat--live.is-in .chat__msg:nth-child(2) { transition-delay: 700ms; }
.anim .chat--live.is-in .chat__msg:nth-child(3) { transition-delay: 1300ms; }
.anim .chat--live.is-in .chat__msg:nth-child(4) { transition-delay: 1900ms; }
.anim .cheque--live.is-in .cheque__sign path { transition: stroke-dashoffset 900ms var(--ease-move); }
.anim .cheque--live:not(.is-in) .cheque__steps li::before { transform: scaleX(0); }
.anim .cheque--live.is-in .cheque__steps li::before { transition: transform 520ms var(--ease) 700ms; }
.anim .cheque--live.is-in .cheque__steps li:nth-child(2)::before { transition-delay: 1000ms; }
.anim .cheque--live.is-in .cheque__steps li:nth-child(3)::before { transition-delay: 1300ms; }
.anim .cheque--live.is-in .cheque__steps li:nth-child(4)::before { transition-delay: 1600ms; }
.anim .cheque--live:not(.is-in) .cheque__steps li:last-child { color: var(--slate); }
.anim .cheque--live.is-in .cheque__steps li:last-child { transition: color 240ms ease-out 2000ms; }

/* Celular y tablet. Los cortes van en em: con la letra del navegador en 16 px equivalen a 320, 600, 800, 1000, 1120 y 1240 px,
   y si la persona la agranda, la página pasa antes al diseño compacto en vez de desbordarse. */
/* "préstamo" se esconde de la vista en la cabecera angosta, pero sigue siendo parte del nombre del botón. */
@media (max-width: 69.9375em) { .cta__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 62.4375em) {
  .top { padding-block: max(8px, env(safe-area-inset-top, 0px)) 8px; gap: 8px; }
  .logo img { height: 28px; }
  .top__nav { display: none; }
  .menu { display: block; }
  .top .cta--small { padding: 0 14px; font-size: 0.875rem; }
  .hero { min-height: 0; padding-top: 24px; }
  /* En una sola columna la foto termina en el borde de la sección: se funde con el azul en vez de cortarse en seco. */
  .hero__person { max-height: 400px; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  /* Una sola columna: el movimiento no pasa por detrás del texto */
  .hero::after { background: linear-gradient(0deg, rgb(11 31 58 / 0%) 18%, var(--night) 46%); }
  .close .bg-video { opacity: 0.22; }
  .more { min-height: 44px; }
  .dock { display: block; }
  .dock-on .wa-float { translate: 0 8px; }
}
@media (max-width: 37.4375em) {
  .cheque__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .hero__title { font-size: min(10.5vw, 2.375rem); }
  main .cta { width: 100%; padding-inline: 16px; white-space: normal; text-align: center; }
  .hero__free { width: 100%; text-align: center; }
  .hero__free br { display: none; }
  .cta--large { font-size: clamp(1.0625rem, 5vw, 1.1875rem); }

  /* En el celular, la solicitud sube desde abajo como una hoja */
  .apply { width: 100%; max-height: min(92dvh, calc(100dvh - 24px)); margin: auto 0 0; border-radius: 16px 16px 0 0; transition-timing-function: var(--ease-sheet); transition-duration: 320ms; }
  .apply:not([open]) { opacity: 1; transform: translateY(100%); transition-duration: 200ms; }
  @starting-style { .apply[open] { opacity: 1; transform: translateY(100%); } }
}

/* Celular angosto (320 px): el logo se achica para que entren el botón y el menú con su margen */
@media (max-width: 20.9375em) { .logo img { height: 24px; } }

/* Celular plegado: la barra no da para todo. La solicitud sigue en el botón grande y en la barra inferior */
@media (max-width: 19.9375em) {
  .top .cta--small { display: none; }
  .section-title { font-size: min(1.5rem, 10vw); }
  .path h3 { font-size: 1.375rem; }
}

/* Escritorio */
@media (min-width: 50em) {
  .facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts__list dd { font-size: clamp(1.250rem, 2vw, 1.750rem); }
  .facts__list > div + div { padding-left: 24px; border-left: 1px solid var(--line-night); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 0; }
  .steps li { border-top: 2px solid var(--night); border-bottom: 0; }
  .who__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .who__list li { border-top: 2px solid var(--night); border-bottom: 0; }
  .foot__top { grid-template-columns: 1.300fr 3fr; gap: 40px; }
  .foot__nav { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .close__data { grid-template-columns: repeat(3, auto); justify-content: start; gap: 32px; }
}
@media (min-width: 62.5em) {
  /* El fondo liso llega hasta donde termina el texto, medido desde el margen de la columna y no desde el borde de la
     pantalla: así el texto chico nunca queda encima de la cinta del video, en ninguna pantalla ancha. */
  .hero::after { background: linear-gradient(90deg, var(--night) calc(var(--edge) + 640px), rgb(11 31 58 / 0%) calc(var(--edge) + 940px)), linear-gradient(0deg, rgb(11 31 58 / 0%) 70%, var(--night)); }
  .close::after { background: linear-gradient(90deg, var(--night) calc(var(--edge) + 780px), rgb(11 31 58 / 0%) calc(var(--edge) + 1080px)), linear-gradient(0deg, rgb(11 31 58 / 0%) 70%, var(--night)); }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(24px, 3vw, 48px); align-self: stretch; }
  .hero__copy { padding-block: 0 48px; }
  .products__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; border-top: 0; }
  .product { border-top: 2px solid var(--night); border-bottom: 0; padding-bottom: 0; }
  .how__head { grid-template-columns: 1fr 1fr; gap: 48px; }
  .how .cheque { justify-self: end; }
  /* Requisitos: el título y el botón a la izquierda, la lista a la derecha */
  .req__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-areas: "head list" "cta list"; grid-template-rows: auto 1fr; column-gap: 72px; row-gap: 0; }
  .req__head { grid-area: head; }
  .req__list { grid-area: list; }
  .req__cta { grid-area: cta; align-self: start; margin-top: 28px; }
  .mortgage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 72px; }
  .mortgage__how { grid-column: 1 / -1; padding-top: 0; }
  .mortgage__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .about__grid { gap: 72px; }
  /* Las fotos toman el alto exacto del texto, sin dejar un hueco abajo. */
  .faq__grid { grid-template-columns: 1fr 1.800fr; gap: 72px; }
  .faq__grid > h2 { position: sticky; top: calc(var(--top) + 32px); align-self: start; }
  .wa-float { right: 28px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); width: auto; height: 58px; gap: 10px; padding: 0 22px 0 14px; font: 600 0.9375rem/1 var(--sora); }
  .wa-float__label { display: inline; }
}
@media (min-width: 77.5em) {
  .paths__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .path h3, .path__go { white-space: nowrap; }
  .path p { max-width: 46ch; }
}
@media (hover: none), (pointer: coarse) {
  .foot__col a, .apply__change { min-height: 44px; }
}

/* Reducir movimiento: nada se desplaza ni crece. Lo que ayuda a entender un cambio
   (la solicitud y sus pasos, la barra del celular y el menú) queda como un fundido corto. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .apply, .apply::backdrop, .dock { transition-duration: 160ms !important; }
  .apply, .apply:not([open]) { transform: none; }
  .apply:not([open]) { opacity: 0; }
  @starting-style { .apply[open] { opacity: 0; transform: none; } }
  .dock, .dock.is-on { transform: none; }
  .dock { opacity: 0; visibility: hidden; transition-property: opacity, visibility; }
  .dock.is-on { opacity: 1; visibility: visible; }
  .menu[open] nav, .apply__step { animation: fade 160ms ease-out !important; }
}
/* Más contraste, si la persona lo pidió en su sistema: líneas y bordes más marcados */
@media (prefers-contrast: more) {
  :root { --line: rgb(11 31 58 / 42%); --line-night: rgb(255 255 255 / 42%); --line-field: var(--night); }
}
@media (forced-colors: active) {
  .cta, .wa-float, .apply { border: 1px solid ButtonText; }
  .mark::after, .top__nav a::after, .cheque__steps li::before, .apply__bar { background: Highlight; forced-color-adjust: none; }
  .status, .online { border: 1px solid CanvasText; }
  .menu summary span { background: ButtonText; forced-color-adjust: none; }
  .faq summary::after { content: "+"; width: auto; height: auto; background: none; font: 600 1.5rem/1 var(--sora); }
}

/* Impresión: se imprime el contenido, sin controles, sombras ni estados de animación. Los velos que funden el video
   con el azul también se van: si la persona imprime con fondos, taparían los títulos, que en papel van en negro. */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; }
  .skip, .top__nav, .menu, .top .cta, .dock, .wa-float, .bg-video, .apply, .noscript, .hero__art, .hero__link, main .cta, .path__art, .foot__brand img, .foot__nav, .hero::after, .close::after { display: none !important; }
  .top { position: static; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hero, .facts, .mortgage, .close, .foot, .path--home { background: none !important; color: #000 !important; }
  .hero__offer, .hero__trust, .hero__free, .close__free, .mortgage__lead, .mortgage__facts dt, .mortgage__free, .mortgage__steps li::before, .mortgage__steps p, .mortgage__note, .close__data dt, .foot__col h2, .foot__fine h2, .facts__list dt, .path--home p, .path--home .path__facts { color: #000 !important; }
  .anim .cheque--live .cheque__steps li::before { transform: none !important; }
  .anim .cheque--live .cheque__sign path { stroke-dashoffset: 0 !important; }
  .hero { min-height: 0; }
  /* Las fotos de hipotecarios ocupan menos papel: la principal más chica y los tres pasos en una fila. */
  .mortgage__chat { display: none; }
  .mortgage__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  section, footer { padding-block: 20px !important; }
  h2, h3, h4 { break-after: avoid; }
  li, tr, details, figure, .path { break-inside: avoid; }
}