/* =========================================================================
   PRESTAMOSCLOUD — Portal de pagos
   Direccion de diseno: "tramite claro". La pagina se lee como un tramite
   guiado de tres pasos, no como un panel SaaS ni como un formulario suelto:
   papel calido, tinta casi negra, un solo azul de marca, filetes de 1px,
   cifras tabulares y una barra de pasos siempre visible que dice donde se
   esta y cuanto falta. Tema claro, a proposito: se esta pagando una licencia
   y quien paga necesita leer, no admirar.
   Todo local: ni CDN, ni fuentes remotas, ni iconos remotos.
   ========================================================================= */

/* ---------- Fuentes de marca, servidas desde este mismo repo ------------- */
/* Manrope para titulos, cifras y botones; Source Sans 3 para el texto
   corrido. Se sirven desde /assets/fonts, NO desde fonts.googleapis.com: esta
   pagina llega a tener el numero de tarjeta en el DOM y no debe pedirle nada
   a un tercero (y asi la CSP que falta podra ser estricta cuando se ponga). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+A720-A7FF;
}
@font-face {
  font-family: 'SourceSans3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'SourceSans3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+A720-A7FF;
}

/* ---------- Tokens ------------------------------------------------------- */
/* Se declaran primero en hex (funcionan en el WebView viejo de cualquier
   Android) y se re-declaran en oklch cuando el navegador lo soporta, para
   que los tonos sean perceptualmente uniformes donde se pueda. */
:root {
  /* papel calido */
  --papel:        #f5f4f0;
  --papel-hoja:   #ffffff;
  --papel-talon:  #faf9f6;
  --linea:        #e4e2dc;
  --linea-fuerte: #cfccc3;
  /* Borde de los componentes con los que se interactua (campos, zona del
     comprobante, barra del metodo). Va aparte de --linea-fuerte, que es un
     filete decorativo: WCAG 1.4.11 pide 3:1 contra el fondo para que un campo
     se lea COMO campo con sol encima o en una pantalla vieja. Medido:
     3,41:1 sobre la hoja blanca, 3,24:1 sobre --papel-talon y 3,10:1 sobre
     --papel. Los tres cuentan, no solo el blanco: hay controles apoyados en
     los otros dos papeles (la zona del comprobante y la caja de recurrencia),
     y midiendo solo contra la hoja esos se quedaban en 2,92:1. El #D9D7D0 de
     la referencia se queda en 1,44:1. */
  --linea-campo:  #8d8b84;

  /* tinta casi negra, con una punta de azul para que case con el acento */
  --tinta:        #161b22;
  --tinta-2:      #3f4652;
  /* Texto apagado: subtitulos, pie, franja de confianza. El #6B7280 de la
     referencia da 4,39:1 sobre el papel — se queda a un pelo del 4,5:1 de
     WCAG 1.4.3, y encima es el color de casi todo el texto secundario. Se
     oscurece a 4,52:1 sobre el papel y 4,98:1 sobre la hoja. */
  --tinta-3:      #69707e;

  /* acento unico: azul de marca PRESTAMOSCLOUD */
  --azul:         #2954d9;
  --azul-hover:   #1d3fa6;
  --azul-tenue:   #eaefff;
  --cian:         #00d0ff;

  /* semanticos */
  --verde:        #0f7a4d;
  --verde-tenue:  #e5f3ea;
  --ambar:        #8a5300;
  --ambar-tenue:  #fbf0dc;
  --rojo:         #b3261e;
  --rojo-tenue:   #fbeceb;

  /* tipografia */
  --display: 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --texto:   'SourceSans3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* ritmo vertical: base 24px (16px * 1.5) */
  --r1: 6px;
  --r2: 12px;
  --r3: 24px;
  --r4: 36px;
  --r5: 48px;
  --r6: 72px;

  --radio: 5px;
  /* La referencia usa tres radios, no uno: la caja (16), el control (10) y el
     filete (5). Con --radio para todo el conjunto quedaba plano. */
  --radio-caja: 16px;
  --radio-control: 10px;
  --salida: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */

  /* Borde lateral unico de la pagina: la cinta, la envoltura y el pie lo
     comparten para que todo caiga sobre la misma linea vertical en cualquier
     ancho. Se combina con env(safe-area-inset-*) donde hay muesca. */
  --borde: clamp(1rem, 4vw, 2.5rem);
  /* Alto minimo de un objetivo tactil (pulgar). */
  --dedo: 44px;
}

@supports (color: oklch(50% 0.1 250)) {
  :root {
    --papel:        oklch(96.7% 0.005 95);
    --papel-hoja:   oklch(100.0% 0.000 90);
    --papel-talon:  oklch(98.2% 0.004 91);
    --linea:        oklch(91.3% 0.008 91);
    --linea-fuerte: oklch(84.5% 0.013 92);
    --linea-campo:  oklch(63.6% 0.011 94);

    --tinta:        oklch(22.0% 0.016 257);
    --tinta-2:      oklch(39.2% 0.022 261);
    --tinta-3:      oklch(54.4% 0.023 264);

    --azul:         oklch(50.4% 0.209 265);
    --azul-hover:   oklch(41.4% 0.170 265);
    --azul-tenue:   oklch(95.3% 0.022 272);

    --verde:        oklch(48%   0.114 155);
    --verde-tenue:  oklch(95.5% 0.026 155);
    --ambar:        oklch(48%   0.108  65);
    --ambar-tenue:  oklch(95.5% 0.038  75);
    --rojo:         oklch(47%   0.176  28);
    --rojo-tenue:   oklch(95.5% 0.024  28);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* La pagina es de papel a proposito, tambien en un telefono puesto en modo
     oscuro: sin esto el navegador pinta los <input> y <select> con su tema
     oscuro sobre el fondo claro y el formulario queda ilegible. */
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.55;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
}

/* luz muy tenue detras de la hoja: no es decoracion, separa el papel del fondo */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(1100px 430px at 76% -14%, rgba(0,113,216,.055), transparent 62%);
  z-index: 0;
}

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

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--azul-hover); }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Los titulos de etapa reciben el foco por codigo para que el lector de pantalla
   anuncie el cambio de paso. No se llega a ellos con Tab, asi que el anillo
   visible solo distraeria. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.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;
}
/* El atributo [hidden] NO sobrevive a un `display` de autor: no es cuestion
   de especificidad, es origen de cascada. Cualquier componente que traiga su
   propio display (`.vuelta` es flex) se veria pese a estar marcado hidden.
   Se hace valer aqui, una vez, para todo el portal. */
[hidden] { display: none !important; }

.oculto { display: none !important; }

/* utilidades tipograficas */
.rotulo {
  font-family: var(--texto);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.cifra { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ---------- Cinta superior ---------------------------------------------- */
.cinta {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--linea);
  background: color-mix(in srgb, var(--papel-hoja) 78%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .cinta { background: var(--papel-hoja); }
}
.cinta__interior {
  max-width: 1180px;
  margin: 0 auto;
  padding-block: var(--r2);
  /* El documento declara viewport-fit=cover, asi que en un telefono con muesca
     el borde lateral tiene que respetar la zona segura o el sello de "conexion
     cifrada" queda debajo del redondeo de la pantalla en horizontal. */
  padding-left: max(var(--borde), env(safe-area-inset-left));
  padding-right: max(var(--borde), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r2) var(--r3);
  flex-wrap: wrap;
}
/* El logotipo es un enlace: en tactil necesita alto de dedo, no alto de imagen. */
.cinta__marca { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; }
.cinta__marca img { height: 22px; width: auto; display: block; }
.cinta__sello {
  display: flex; align-items: center; gap: 7px;
  font-size: .75rem; font-weight: 500; color: var(--tinta-2);
}
.cinta__sello svg { flex: none; }
.cinta__sello--abierto { color: var(--ambar); }
/* "Necesita ayuda?" de la referencia: la salida humana, visible desde el
   primer segundo y en todas las etapas, no solo cuando algo falla. */
.cinta__acciones { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.cinta__ayuda {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--dedo);
  font-size: .875rem; font-weight: 700;
  color: var(--azul); text-decoration: none;
}
.cinta__ayuda:hover { color: var(--azul-hover); }
.cinta__ayuda svg { flex: none; }

/* ---------- Estructura -------------------------------------------------- */
/* Una sola columna centrada de 560px, como la referencia: se va la portada a
   dos columnas y el ledger lateral. Todo lo que hay que hacer cae en una linea
   vertical, sin nada compitiendo a los lados. */
.envoltura {
  position: relative;
  z-index: 1;
  /* content-box a proposito: la referencia mide 560px de CONTENIDO y el relleno
     lateral va por fuera. Con border-box quedaban 480px utiles y la franja de
     confianza se partia en dos lineas. */
  box-sizing: content-box;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: clamp(1.75rem, 5vw, 48px);
  padding-bottom: var(--r5);
  padding-left: max(var(--borde), env(safe-area-inset-left));
  padding-right: max(var(--borde), env(safe-area-inset-right));
}
/* En movil manda el orden natural del HTML: portada -> wizard -> confianza.
   El cliente que llega bloqueado quiere el campo de busqueda, no un ledger.
   En escritorio la confianza sube a la columna izquierda, debajo del titular. */
.tablero {
  display: grid;
  /* minmax(0,1fr) y no la columna 'auto' implicita: sin esto la columna hereda
     el min-content del h1 y con el texto al 200% la pagina desborda a 320px.
     El bloque de escritorio ya se blindaba asi; a la columna unica se le
     habia olvidado. */
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--r4);
  column-gap: clamp(var(--r4), 5vw, var(--r6));
  align-items: start;
}
/* ---------- Portada (lado izquierdo) ------------------------------------ */
.portada__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 var(--r2);
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--papel-hoja);
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2);
}

/* ---------- Ledger de confianza ---------------------------------------- */
/* Franja de confianza de la referencia: tres apuntes cortos en una linea bajo
   la tarjeta, en lugar del ledger de dos columnas. El ledger decia lo mismo en
   cinco veces el espacio y encima competia con el formulario. */
.confianza { margin: 0; }
.confianza__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 28px;
}
.confianza__item {
  display: flex; align-items: center; gap: 7px;
  font-size: .78125rem; color: var(--tinta-3);
}
.confianza__item svg { flex: none; }
.confianza__item--abierto { color: var(--ambar); }
.confianza__bancos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.confianza__bancos img { height: 26px; width: 26px; border-radius: 7px; display: block; }
.confianza__bancos span { font-size: .8125rem; color: var(--tinta-2); }

.rnc { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* ---------- La hoja (wizard) ------------------------------------------- */
.hoja {
  position: relative;
  background: var(--papel-hoja);
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
/* El wizard NO es una caja: en la referencia el rail y el titulo van sobre el
   papel y lo unico con fondo blanco es la tarjeta del formulario. Las paginas
   simples (gracias / cancelado) si siguen siendo una hoja, de ahi el
   modificador en vez de tocar .hoja. */
.hoja--lienzo {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.hoja__cuerpo { padding: clamp(1.15rem, 4.5vw, var(--r4)); }
.hoja--lienzo .hoja__cuerpo { padding: 0; }
.hoja--lienzo .pasos { --sangria: 0px; }

/* La linea de tranquilidad que la referencia pone al pie de la tarjeta. */
.nota-tarjeta {
  margin: 0;
  text-align: center;
  font-size: .78125rem;
  color: var(--tinta-3);
}

/* El resumen y los metodos no tienen un contenedor propio al que colgarle la
   tarjeta -son una pila de piezas ya disenadas para ir sobre blanco-, asi que
   la superficie la lleva la etapa. El buscador si la tiene (su <form>), y la
   desambiguacion se queda sin ella a proposito: sus fichas ya son superficies
   y meterlas en una caja blanca seria una tarjeta dentro de otra. */
.hoja--lienzo .etapa[data-etapa="resumen"],
.hoja--lienzo .etapa[data-etapa="planes"],
.hoja--lienzo .etapa[data-etapa="metodos"],
.hoja--lienzo .recibo {
  background: var(--papel-hoja);
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  padding: clamp(1.15rem, 4.5vw, 28px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

/* La tarjeta blanca de la referencia: lo unico que lleva fondo en el wizard. */
.tarjeta {
  background: var(--papel-hoja);
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  padding: clamp(1.15rem, 4.5vw, 28px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
@media (max-width: 47.99rem) {
  .boton { min-height: 50px; }
  /* La cinta se partia en dos lineas (125px a 390, 192px a 320, contra los 60px
     de la referencia) porque el sello de conexion no cabe junto al logo y a la
     ayuda. Se retira el sello y no la ayuda: lo que dice el sello lo repite la
     franja de confianza que va bajo la tarjeta, mientras que la salida por
     WhatsApp no esta en ningun otro sitio de la pantalla. */
  .cinta__sello { display: none; }
  .cinta__interior { flex-wrap: nowrap; }
  .cinta__marca img { height: 20px; }
}

/* ---------- Rail de pasos ----------------------------------------------- */
/* Escritorio: tres circulos numerados unidos por una linea, con el rotulo
   debajo. Movil: el rail entero no cabe legible, asi que se cambia de forma
   (no se encoge): un rotulo "Paso N de 3 - Nombre" y una barra de avance.
   Es la misma lista <ol> en los dos casos; solo cambia como se dibuja. */
.pasos {
  list-style: none;
  margin: 0 0 var(--r3);
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
/* la linea que une los circulos: va detras y arranca/termina en el centro
   del primer y del ultimo circulo, no en el borde de la lista */
.pasos::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 48px;
  right: 48px;
  height: 2px;
  /* --linea (1,30:1) no se ve: es la pista de una barra de avance, o sea un
     componente de interfaz, y WCAG 1.4.11 le pide 3:1 igual que a un campo. */
  background: var(--linea-campo);
}
/* el tramo recorrido, del mismo grosor, encima */
.pasos::after {
  content: '';
  position: absolute;
  top: 13px;
  left: 48px;
  /* Dos tramos entre los tres centros: (ancho - 96) / 2 cada uno. */
  width: calc((100% - 96px) / 2 * var(--tramos, 0));
  height: 2px;
  background: var(--azul);
  transform-origin: left center;
  transition: width .55s var(--salida);
}
.paso {
  position: relative;
  z-index: 1;
  /* Bloques de 96px como la referencia, no tercios: con flex:1 los circulos
     caian a 93/280/467 del ancho de la columna y la referencia los pone a
     48/280/512, o sea el primero y el ultimo mas hacia los extremos. */
  flex: 0 0 96px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--texto);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-3);
}
.paso__num {
  flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--linea-campo);
  background: var(--papel-hoja);
  font-family: var(--display);
  font-size: .8125rem; font-weight: 700;
  color: var(--tinta-3);
  transition: background-color .3s var(--salida), color .3s var(--salida), border-color .3s var(--salida);
}
.paso__txt {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}
.paso[data-estado="activo"] { color: var(--tinta); font-weight: 700; }
.paso[data-estado="activo"] .paso__num {
  background: var(--azul); border-color: var(--azul); color: #fff;
}
.paso[data-estado="hecho"] { color: var(--tinta-2); }
.paso[data-estado="hecho"] .paso__num {
  background: var(--azul); border-color: var(--azul); color: #fff;
}

/* Movil: el rail cambia de forma. Los circulos y la linea desaparecen de la
   vista y en su lugar queda el rotulo del paso en curso sobre una barra de
   avance. Ningun rotulo sale del arbol de accesibilidad: los dos pasos que no
   estan en curso siguen leyendose, solo que ocultos a la vista. */
@media (max-width: 47.99rem) {
  /* .pasos cuelga de .hoja, no de .hoja__cuerpo, asi que no heredaba su
     sangria. En escritorio no se nota (los circulos van centrados en tercios)
     pero en movil el rotulo es texto alineado a la izquierda y quedaba a 1px
     del filete de la tarjeta, hasta 34px desalineado del titulo de abajo. */
  .pasos {
    /* La sangria solo hace falta cuando el rail va DENTRO de la hoja (paginas
       simples). En el wizard la pone ya .envoltura y aqui sobraria, que es lo
       que dejaba el rotulo 18px mas adentro que el titulo. */
    --sangria: clamp(1.15rem, 4.5vw, var(--r4));
    display: block;
    margin-bottom: var(--r3);
    padding: 0 var(--sangria) 13px;
  }
  .pasos::before,
  .pasos::after { top: auto; bottom: 0; height: 5px; border-radius: 3px; }
  .pasos::before { left: var(--sangria); right: var(--sangria); }
  .pasos::after  {
    left: var(--sangria);
    width: calc((100% - 2 * var(--sangria)) * var(--avance-movil, .3333));
  }

  /* En movil el paso en curso es una linea de texto completa, no un bloque
     de 96px: se devuelve el crecimiento que el rail de escritorio le quita. */
  .paso { flex: 1 1 auto; flex-direction: row; gap: 0; }
  .paso:not([data-estado="activo"]) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .paso[data-estado="activo"] {
    font-family: var(--texto);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--azul);
  }
  /* el numero pasa a ser texto corrido: "Paso 2 de 3 - Su monto" */
  .paso[data-estado="activo"] .paso__num {
    width: auto; height: auto; border: 0; background: none;
    border-radius: 0; display: inline; color: inherit;
    font-family: inherit; font-size: inherit; font-weight: inherit;
  }
  .paso[data-estado="activo"] .paso__num::before { content: 'Paso '; }
  .paso[data-estado="activo"] .paso__num::after  { content: ' de 3 \00B7\00A0'; }
  /* En movil el rotulo ya es texto corrido en su propia linea: el recorte con
     puntos suspensivos de escritorio solo estorba, y con el texto al 200%
     cortaba "Su cuenta" a 320px (WCAG 1.4.4). */
  .paso[data-estado="activo"] .paso__txt {
    text-align: left;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
}

/* ---------- Vuelta rapida ----------------------------------------------- */
/* Aparece sobre el buscador cuando este equipo ya busco una cuenta antes.
   Es una pista, no una puerta: el camino de teclear sigue debajo, intacto. */
.vuelta {
  margin: 0 0 var(--r3);
  padding: clamp(14px, 4vw, var(--r3));
  background: var(--azul-tenue);
  border: 1px solid color-mix(in oklab, var(--azul) 22%, transparent);
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
  gap: var(--r1);
}
@supports not (color: color-mix(in oklab, red 20%, transparent)) {
  .vuelta { border-color: #c3d0f5; }
}
.vuelta__hola {
  margin: 0;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--azul-hover);
}
.vuelta__cuenta {
  margin: 0;
  font-family: var(--display);
  font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.vuelta__guia {
  margin: 0;
  font-size: .875rem; line-height: 1.5;
  color: var(--tinta-2);
}
.vuelta__guia strong { color: var(--tinta); font-weight: 700; }
.vuelta__acciones {
  display: flex; flex-wrap: wrap; gap: var(--r2);
  margin-top: var(--r1);
}
.vuelta__acciones .boton { flex: 0 0 auto; }
@media (max-width: 30rem) {
  /* A 320px la caja llegaba a 391px de alto y empujaba el campo de busqueda
     279px por debajo del pliegue: exactamente lo que el bloque de movil de mas
     abajo se habia encargado de arreglar. Se compacta sin quitar nada -el
     atajo, la guia y la salida siguen ahi-, solo ocupando lo que les toca. */
  .vuelta__cuenta { font-size: 1rem; font-weight: 700; }
  .vuelta__guia { font-size: .8125rem; line-height: 1.4; }
  .vuelta__acciones { flex-direction: column; align-items: stretch; margin-top: 2px; }
  .vuelta__acciones .boton { width: 100%; justify-content: center; }
}

/* ---------- Etapas ------------------------------------------------------ */
.etapa { display: none; }
.etapa[data-visible="1"] { display: block; }
.etapa > * { animation: surgir .5s var(--salida) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes surgir {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* 30px / 800 como la referencia. El peso 800 es el que da el contraste
   tipografico de este diseno y solo se estaba usando en un sitio. */
.etapa__titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4375rem, 4.2vw, 1.875rem);
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0 0 8px;
}
.etapa__sub {
  margin: 0 0 26px;
  color: var(--tinta-2);
  font-size: .9375rem; line-height: 1.5;
  max-width: 52ch;
}

/* ---------- Campos ------------------------------------------------------ */
.campo { display: block; }
.campo__label {
  display: block;
  font-size: .84375rem; font-weight: 700; color: var(--tinta);
  margin-bottom: 8px;
}
.campo__ayuda { display: block; font-size: .75rem; color: var(--tinta-3); margin-top: 5px; }
.campo__opcional { font-weight: 400; color: var(--tinta-3); }

input[type="text"], input[type="tel"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: #fff;
  border: 1.5px solid var(--linea-campo);
  border-radius: var(--radio-control);
  padding: 13px 16px;
  min-height: 52px;
  transition: border-color .18s var(--salida), box-shadow .18s var(--salida);
}
input[type="text"], input[type="tel"] { text-overflow: ellipsis; }
input::placeholder { color: var(--tinta-3); opacity: 1; }
/* El halo de --azul-tenue sobre la hoja blanca da 1,15:1: no se ve. Lo unico
   que marcaba el foco era el borde de 1px cambiando de color, poquisimo en un
   movil a pleno sol, que es el escenario de este portal. Se tine el halo y se
   engorda el borde con un anillo interior: box-shadow y no border-width, que
   moveria el layout al enfocar. */
input[type="text"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 1px var(--azul),
              0 0 0 4px color-mix(in oklab, var(--azul) 32%, transparent);
}
@supports not (color: color-mix(in oklab, red 20%, transparent)) {
  input[type="text"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 1px var(--azul), 0 0 0 4px #b3c4f2;
  }
}
[aria-invalid="true"] { border-color: var(--rojo) !important; }
[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 1px var(--rojo), 0 0 0 4px var(--rojo-tenue) !important;
}

/* align-items:flex-end y no el "stretch" por defecto: si no, el boton crece
   hasta la altura de la etiqueta "Usuario o WhatsApp" y queda un bloque azul
   mas alto que el campo, desalineado con el. */
/* Apilados y no en una fila: es lo que hace la referencia y lee mas limpio.
   De paso desaparece el desajuste de altura entre campo y boton, que solo
   existia porque compartian linea. */
.buscador__linea { display: flex; flex-direction: column; gap: 16px; }
/* El campo y su ayuda son UNA pieza: van juntos y separados del boton por el
   gap de la columna. La ayuda no puede ir dentro del <label> (ver buscador.php). */
.campo-grupo { display: block; }
.buscador__linea .campo { min-width: 0; }
.buscador__linea .boton { width: 100%; margin-top: 0; }
.trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0;
}

/* ---------- Botones ----------------------------------------------------- */
.boton {
  --fondo: var(--azul);
  --fondo-hover: var(--azul-hover);
  --texto-boton: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  background: var(--fondo);
  color: var(--texto-boton);
  /* Manrope, como dice la cabecera de esta hoja ("titulos, cifras y botones")
     y como pide la referencia: el boton era el unico de los tres que se habia
     quedado con la fuente del texto corrido. */
  font-family: var(--display);
  font-size: .9375rem; font-weight: 700; letter-spacing: .005em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s var(--salida), transform .18s var(--salida), border-color .18s var(--salida);
}
.boton:hover { background: var(--fondo-hover); color: var(--texto-boton); }
.boton:active { transform: translateY(1px); }
.boton[disabled], .boton[aria-disabled="true"], .boton[aria-busy="true"] { cursor: not-allowed; opacity: .72; }

/* Salida de la vuelta rapida: misma caja y mismo alto que el boton primario
   para que la fila no baile, pero sin relleno. Va DESPUES de .boton porque
   comparten especificidad y gana la ultima. */
.boton--plano {
  --fondo: transparent;
  --fondo-hover: var(--papel-hoja);
  --texto-boton: var(--azul);
  background: transparent;
  color: var(--azul);
  /* 1,57:1 con el azul al 30% sobre el bloque azul tenue: por debajo del 3:1
     de WCAG 1.4.11. Se usa el token que el portal ya habia medido. */
  border: 1px solid var(--linea-campo);
}
@supports not (color: color-mix(in oklab, red 20%, transparent)) {
  .boton--plano { border-color: #8d8b84; }
}
.boton--plano:hover { background: var(--papel-hoja); color: var(--azul-hover); }
.boton[disabled]:active, .boton[aria-disabled="true"]:active { transform: none; }
/* Formulario cerrado (ya recibimos el comprobante / el link ya esta generado):
   el boton deja de parecer la accion principal de la pantalla. */
[data-cerrado="1"] .boton--bloque {
  --fondo: var(--papel-talon);
  --fondo-hover: var(--papel-talon);
  --texto-boton: var(--tinta-2);
  border-color: var(--linea-campo);
  opacity: 1;
}
.boton--bloque { width: 100%; }
.boton--fantasma {
  --fondo: transparent;
  --fondo-hover: var(--azul-tenue);
  --texto-boton: var(--azul);
  border-color: var(--linea-fuerte);
}
.boton--fantasma:hover { border-color: var(--azul); }
.boton--texto {
  --fondo: transparent;
  --fondo-hover: transparent;
  --texto-boton: var(--tinta-2);
  min-height: var(--dedo); padding: 10px 2px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--linea-fuerte);
  text-underline-offset: 3px;
}
.boton--texto:hover { --texto-boton: var(--azul); }
.boton--verde { --fondo: var(--verde); --fondo-hover: #0b6440; }

.giro {
  width: 15px; height: 15px; flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(1turn); } }

/* ---------- Copiar ------------------------------------------------------ */
/* El boton de copiar es el que mas se toca en el paso del deposito: el cliente
   esta en la app del banco, vuelve, copia la cuenta y regresa. A 36px se falla
   el toque con el pulgar, asi que se lleva al minimo de 44x44 en todos los
   anchos (no solo en movil: muchas laptops de estos clientes son tactiles). */
.copiar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--dedo); min-width: var(--dedo);
  padding: 8px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel-hoja);
  color: var(--tinta-2);
  font: inherit; font-size: .8125rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .18s var(--salida), color .18s var(--salida), background-color .18s var(--salida);
}
.copiar:hover { border-color: var(--azul); color: var(--azul); }
.copiar[data-hecho="1"] { border-color: var(--verde); color: var(--verde); background: var(--verde-tenue); }

/* ---------- Avisos ------------------------------------------------------ */
.aviso {
  display: flex; gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--linea);
  border-left-width: 3px;
  border-radius: var(--radio);
  background: var(--papel-talon);
  font-size: .9375rem;
  color: var(--tinta);
  line-height: 1.5;
}
.aviso svg { flex: none; margin-top: 2px; }
.aviso p { margin: 0; }
.aviso p + p { margin-top: var(--r1); }
.aviso--error   { border-color: var(--rojo);  background: var(--rojo-tenue);  color: var(--rojo); }
.aviso--ok      { border-color: var(--verde); background: var(--verde-tenue); color: var(--verde); }
.aviso--atencion{ border-color: var(--ambar); background: var(--ambar-tenue); color: var(--ambar); }
.aviso--info    { border-color: var(--azul);  background: var(--azul-tenue);  color: var(--tinta); }
.aviso--espera  { border-color: var(--azul);  background: var(--azul-tenue);  color: var(--tinta); }
/* "Ya recibimos su comprobante, lo estamos revisando" NO es un error del
   sistema: es informacion, y ademas buena. Sale en el mismo azul que el resto
   de la informacion del portal, con icono de recibido, no en caja roja con
   icono de error. La caja roja queda para lo que de verdad salio mal. */
.aviso--recibido { border-color: var(--azul); background: var(--azul-tenue); color: var(--tinta); }
.aviso__estado { font-weight: 600; }
.aviso__accion { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.aviso__accion .boton { font-size: .875rem; }
@media (max-width: 30rem) {
  .aviso__accion .boton { width: 100%; }
}

.error-campo {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 9px;
  font-size: .875rem; font-weight: 500;
  color: var(--rojo);
}
.error-campo svg { flex: none; margin-top: 2px; }

/* barra de espera: solo transform, sin animar layout */
.barra-espera {
  position: relative;
  height: 3px; margin-top: 11px;
  background: color-mix(in srgb, var(--azul) 16%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .barra-espera { background: #cfe2f8; }
}
.barra-espera::after {
  content: '';
  position: absolute; inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--azul), transparent);
  animation: recorrer 1.5s ease-in-out infinite;
}
@keyframes recorrer {
  from { transform: translateX(-110%); }
  to   { transform: translateX(310%); }
}
.contador { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Desambiguacion --------------------------------------------- */
.cuentas { display: grid; gap: 10px; margin: 0 0 var(--r3); }
.cuenta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--r2);
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel-hoja);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .18s var(--salida), background-color .18s var(--salida), transform .18s var(--salida);
}
.cuenta:hover { border-left-color: var(--azul); background: #fff; transform: translateX(2px); }
.cuenta[disabled], .cuenta[aria-disabled="true"], .cuenta[aria-busy="true"] { cursor: not-allowed; opacity: .72; transform: none; }
.cuenta__nombre { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; word-break: break-word; }
.cuenta__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: .8125rem; color: var(--tinta-3); margin-top: 6px;
}
.cuenta__wa { white-space: nowrap; }
.cuenta__monto { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; white-space: nowrap; }

/* En telefono el monto en columna propia dejaba al nombre de la empresa unos
   85px: el nombre se partia en seis lineas y la tarjeta crecia a 255px de alto,
   justo el dato por el que la persona elige. Se apila: nombre a todo el ancho y
   el monto debajo, donde ademas se lee mas grande. */
@media (max-width: 30rem) {
  .cuenta { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .cuenta__monto { justify-self: start; font-size: 1.1875rem; }
}

.etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.etiqueta--pendiente { color: var(--ambar); background: var(--ambar-tenue); }
.etiqueta--aldia     { color: var(--verde); background: var(--verde-tenue); }
.etiqueta--plan      { color: var(--tinta-2); background: var(--papel-talon); border-color: var(--linea-fuerte); }
.etiqueta--baja      { color: var(--tinta-2); background: var(--papel-talon); border-color: var(--linea-campo); }
/* Numero de cuenta en la ficha de desambiguacion: es el dato que distingue dos
   empresas con el mismo nombre y el mismo WhatsApp enmascarado, asi que se
   pinta como una matricula, no como una etiqueta de estado mas. */
.cuenta__id {
  font-family: var(--display); font-weight: 700; font-size: .75rem;
  letter-spacing: .04em;
  color: var(--tinta-2);
  background: var(--papel-talon);
  border: 1px solid var(--linea-campo);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* Frases largas (el resultado de la lectura automatica del comprobante) NO
   caben en una pildora de border-radius:999px: a 390px una linea de 52
   caracteres se partia en cuatro y el texto se salia de la curva. Este es el
   mismo lenguaje visual -- filete de 1px y fondo tenue -- pero con esquinas de
   documento y padding pensado para varias lineas. */
.estado {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-left-width: 3px;
  border-radius: var(--radio);
  font-size: .8125rem; font-weight: 600; line-height: 1.4;
  max-width: 100%;
}
.estado--ok      { color: var(--verde); background: var(--verde-tenue); }
.estado--revisar { color: var(--ambar); background: var(--ambar-tenue); }

/* ---------- Resumen: el talon ------------------------------------------ */
.membrete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px var(--r2);
  padding-bottom: var(--r2);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--r3);
}
/* El nombre de empresa viene del cliente (a veces es su propio correo, sin
   espacios): sin min-width:0 el item flex no se encoge por debajo del
   contenido y desborda la pagina. */
.membrete > div { min-width: 0; }
.membrete__nombre {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 1.375rem);
  letter-spacing: -.015em; line-height: 1.2;
  margin: 0;
  word-break: break-word;
}
.membrete__periodo { font-size: .875rem; color: var(--tinta-2); }

.desglose { margin: 0 0 var(--r3); }
.desglose__titulo { margin: 0 0 10px; }
.renglon {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 0;
  font-size: .9375rem;
}
.renglon__concepto { color: var(--tinta-2); min-width: 0; overflow-wrap: anywhere; }
.renglon__puntos {
  flex: 1 1 auto;
  min-width: min(1.5rem, 6vw);
  border-bottom: 1px dotted var(--linea-fuerte);
  transform: translateY(-.28em);
}
.renglon__valor { color: var(--tinta); font-weight: 500; white-space: nowrap; }
.renglon--descuento .renglon__valor { color: var(--verde); }

/* talon perforado: el corte de un recibo real */
.talon {
  position: relative;
  margin: 0 calc(-1 * clamp(1.15rem, 4.5vw, var(--r4)));
  padding: var(--r3) clamp(1.15rem, 4.5vw, var(--r4));
  background: var(--papel-talon);
  border-top: 1px dashed var(--linea-fuerte);
  border-bottom: 1px solid var(--linea);
}
/* Mismo nombre de empresa que .membrete__nombre, pintado aqui en el talon
   de la pantalla de resultado: misma proteccion de desborde. */
[data-campo="res-empresa"] { word-break: break-word; }
.talon::before, .talon::after {
  content: '';
  position: absolute; top: -9px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--papel-hoja);
  border: 1px solid var(--linea);
  clip-path: inset(0 0 50% 0);
}
.talon::before { left: -9px; }
.talon::after  { right: -9px; }

.total {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--r2) var(--r3);
}
.total__etiqueta { margin-bottom: 4px; }
/* Es la cifra que la persona va a teclear en la banca en linea: no se puede
   recortar ni empujar la pagina a scroll horizontal. Tres protecciones:
   min-width:0 para que el item flex se encoja, flex-wrap para que el simbolo y
   la cifra se apilen antes de desbordar, y un tope en vw en el tamaño de letra
   -- las clamp() en rem crecen con la letra del navegador y a 150% (WCAG
   1.4.4) 2.3rem son 55px, mas anchos que un telefono de 320px. */
.total__dop {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
  min-width: 0; max-width: 100%;
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05;
  color: var(--tinta);
}
.total__dop .simbolo { font-size: min(clamp(1rem, 3vw, 1.25rem), 5vw); color: var(--tinta-2); letter-spacing: 0; }
.total__dop .monto   { font-size: min(clamp(2.3rem, 9vw, 3.35rem), 11vw); min-width: 0; overflow-wrap: anywhere; }
.total__usd {
  text-align: right;
  font-size: .875rem; color: var(--tinta-2); line-height: 1.4;
}
.total__usd b {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: min(clamp(1.15rem, 3.6vw, 1.5rem), 7vw);
  color: var(--tinta); letter-spacing: -.02em;
}
@media (max-width: 26rem) {
  .total { display: block; }
  .total__usd { text-align: left; margin-top: 10px; }
}
.total__dop--chico .monto { font-size: min(clamp(1.75rem, 6vw, 2.15rem), 9vw); }
.total__dop--chico .simbolo { font-size: min(1rem, 4.5vw); }

.tasa { margin: 10px 0 0; font-size: .8125rem; color: var(--tinta-3); }

.resumen__pie { margin-top: var(--r3); display: grid; gap: var(--r2); }

/* ---------- Metodos ----------------------------------------------------- */
.metodos { display: grid; gap: 12px; margin: 0 0 var(--r3); }
.metodo {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-hoja);
  overflow: hidden;
  transition: border-color .2s var(--salida);
}
.metodo[data-abierto="1"] { border-color: var(--azul); }
.metodo__cabeza {
  font-weight: 400;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--r2);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.metodo__barra { align-self: stretch; background: var(--linea-campo); transition: background-color .2s var(--salida); }
.metodo[data-abierto="1"] .metodo__barra { background: var(--azul); }
.metodo__cabeza:hover .metodo__barra { background: var(--azul); }
.metodo__texto { padding: 15px 0; min-width: 0; }
.metodo__nombre {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -.01em; line-height: 1.25;
}
.metodo__desc { display: block; font-weight: 400; font-size: .875rem; color: var(--tinta-2); margin-top: 3px; line-height: 1.45; }
.metodo__extra { display: flex; align-items: center; gap: 8px; padding-right: 15px; }
.metodo__extra img { height: 24px; width: 24px; border-radius: 6px; display: block; }
.metodo__extra .cifra { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.metodo__chevron { transition: transform .3s var(--salida); color: var(--tinta-3); }
.metodo[data-abierto="1"] .metodo__chevron { transform: rotate(90deg); color: var(--azul); }
@media (max-width: 30rem) {
  .metodo__extra { display: none; }
  .metodo__cabeza { grid-template-columns: 4px minmax(0, 1fr) auto; }
  .metodo__chevron { margin-right: 13px; }
}

/* despliegue por grid-template-rows: no se anima height */
.metodo__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--salida);
}
.metodo[data-abierto="1"] .metodo__panel { grid-template-rows: 1fr; }
/* Oculto de verdad mientras esta cerrado: si no, su contenido sigue siendo
   enfocable con Tab y lo lee el lector de pantalla. */
.metodo__panel > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear .38s;
}
.metodo[data-abierto="1"] .metodo__panel > div {
  visibility: visible;
  transition-delay: 0s;
}
.metodo__panel-int {
  padding: var(--r1) 15px var(--r3) 19px;
  border-top: 1px dashed var(--linea);
  margin-top: 2px;
}

/* ---------- Cuentas de deposito ---------------------------------------- */
.beneficiario {
  display: grid; gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-talon);
  margin-bottom: var(--r3);
}
.beneficiario__nombre { display: block; font-weight: 600; }
.beneficiario__rnc { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .875rem; color: var(--tinta-2); }

.banco-lista { display: grid; gap: 0; margin: 0 0 var(--r3); border-top: 1px solid var(--linea); }
.banco {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea);
}
/* Los tres logos son marcas de tipo icono, con el fondo a sangre: se pintan como
   fichas redondeadas y no como imagenes sueltas. El filete va POR DENTRO
   (box-shadow inset) para que no sume tamano a la retícula y para que el borde
   del logo claro no se funda con el papel blanco de la tarjeta. */
.banco__logo {
  width: 36px; height: 36px;
  border-radius: var(--radio-control);
  display: block;
  object-fit: cover;
  background: var(--papel-talon);
  box-shadow: inset 0 0 0 1px rgba(22, 27, 34, .10);
}
/* Los de la fila del metodo, mas pequenos y ligeramente solapados: se leen como
   "estos bancos", no como tres botones. */
.metodo__banco {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: block;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(22, 27, 34, .10);
}
.metodo__banco + .metodo__banco { margin-left: -6px; }
.banco__nombre { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.banco__num {
  font-size: 1rem; letter-spacing: .03em; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.banco__moneda { font-size: .75rem; color: var(--tinta-3); }
@media (max-width: 30rem) {
  .banco { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: 'logo datos' '. accion'; }
  .banco img { grid-area: logo; }
  .banco__datos { grid-area: datos; }
  .banco .copiar { grid-area: accion; justify-self: start; margin-top: 6px; }
}

/* ---------- Zona del comprobante --------------------------------------- */
.suelta {
  position: relative;
  display: grid; place-items: center;
  gap: 7px;
  padding: var(--r3) var(--r2);
  border: 1px dashed var(--linea-campo);
  border-radius: var(--radio);
  background: var(--papel-talon);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s var(--salida), background-color .18s var(--salida);
}
.suelta:hover, .suelta[data-encima="1"] { border-color: var(--azul); background: var(--azul-tenue); }
/* El <input type="file"> es transparente (opacity:0) para poder pintar la zona
   de arrastre a mano: sin esto su anillo de foco tambien seria invisible y
   quien navega con el teclado no sabria donde esta (WCAG 2.4.7). El foco se
   pinta sobre la zona, que es lo que la persona ve. */
.suelta:focus-within {
  border-style: solid;
  border-color: var(--azul);
  background: var(--azul-tenue);
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}
.suelta input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.suelta input[type="file"]:focus-visible { outline: none; }
.suelta__titulo { display: block; font-weight: 600; font-size: .9375rem; }
.suelta__sub { display: block; font-size: .8125rem; color: var(--tinta-3); }
.suelta svg { color: var(--tinta-3); }

.previa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 11px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-hoja);
}
.previa__img {
  width: 76px; height: 76px;
  /* Un comprobante de banco es una tira larga y estrecha: con object-fit:cover
     la vista previa mostraba un recorte del centro (~4% de la imagen) y el
     cliente no podia comprobar que subio la foto correcta. */
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--linea);
  display: block;
  background: var(--papel-talon);
}
.previa__ficha {
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: 4px;
  border: 1px solid var(--linea);
  background: var(--papel-talon);
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  color: var(--tinta-3);
}
.previa__nombre { display: block; font-size: .875rem; font-weight: 600; word-break: break-word; }
.previa__peso { display: block; font-size: .8125rem; color: var(--tinta-3); }

.formulario { display: grid; gap: var(--r3); }
.formulario__par { display: grid; gap: var(--r3); }
@media (min-width: 34rem) {
  .formulario__par { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tarjeta / Stripe ------------------------------------------- */
/* Recurrencia: casilla de documento, no de panel SaaS. La casilla nativa se
   deja en su sitio (opacity:0) porque es la que recibe el foco, el teclado y
   el envio del formulario; encima se pinta .recurrencia__caja, que es solo
   tinta. Las dos ocupan la misma celda de la reticula (1/1), asi que no hay
   coordenadas a mano que se descuadren si cambia el relleno de la caja. */
.recurrencia {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin-top: var(--r2);
  /* Toda la caja es el objetivo tactil: con 20px de cuadrito el pulgar falla.
     Con este relleno el alto pasa de var(--dedo) incluso en una sola linea. */
  padding: 13px 15px;
  border: 1px solid var(--linea-campo);
  border-radius: var(--radio);
  background: var(--papel-talon);
  cursor: pointer;
  transition: border-color .18s var(--salida), background-color .18s var(--salida);
}
.recurrencia:hover { border-color: var(--azul); }

.recurrencia__check {
  grid-area: 1 / 1;
  align-self: start; justify-self: start;
  width: 20px; height: 20px; margin: 0;
  opacity: 0;
  cursor: pointer;
}
.recurrencia__caja {
  grid-area: 1 / 1;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  /* 1px: sube el cuadro hasta la mayuscula del titulo, no hasta su interlinea. */
  margin-top: 1px;
  border: 1px solid var(--linea-campo);
  border-radius: 4px;
  background: #fff;
  color: #fff;
  pointer-events: none;
  transition: background-color .18s var(--salida), border-color .18s var(--salida);
}
.recurrencia__caja svg {
  opacity: 0;
  transform: scale(.55);
  transition: opacity .16s var(--salida), transform .16s var(--salida);
}
.recurrencia__check:checked + .recurrencia__caja {
  background: var(--azul);
  border-color: var(--azul);
}
.recurrencia__check:checked + .recurrencia__caja svg { opacity: 1; transform: none; }
/* La casilla real es invisible, asi que su anillo de foco se pinta sobre el
   cuadro dibujado, que es lo que la persona ve (WCAG 2.4.7). */
.recurrencia__check:focus-visible + .recurrencia__caja {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

.recurrencia__cuerpo { grid-area: 1 / 2; display: grid; gap: 3px; }
.recurrencia__titulo {
  font-size: .9375rem; font-weight: 600; color: var(--tinta);
  line-height: 1.35;
}
.recurrencia__sub { font-size: .8125rem; color: var(--tinta-3); line-height: 1.5; }

/* Marcada, la caja entera se tine del azul de marca: es la unica forma de ver
   desde lejos que el cobro quedo automatico. Detras de @supports porque en un
   WebView viejo sin :has() todo el bloque se descartaria, y con el se iria
   tambien el estado del cuadrito, que si funciona ahi. */
@supports selector(:has(*)) {
  .recurrencia:has(.recurrencia__check:checked) {
    border-color: var(--azul);
    background: var(--azul-tenue);
  }
}

/* Alto contraste de Windows: los fondos se reemplazan por la paleta del
   sistema y "marcada" y "sin marcar" quedarian iguales. Se fija el fondo del
   cuadro y el tick se dibuja en el color de texto del sistema, que es lo que
   distingue los dos estados. */
@media (forced-colors: active) {
  .recurrencia__caja {
    forced-color-adjust: none;
    background: Canvas;
    border-color: CanvasText;
    color: CanvasText;
  }
  .recurrencia__check:checked + .recurrencia__caja { background: Canvas; border-color: CanvasText; }
}

.enlace-pago {
  display: grid; gap: 10px;
  padding: 14px;
  border: 1px solid var(--azul);
  border-radius: var(--radio);
  background: var(--azul-tenue);
}
.enlace-pago__dominio { font-weight: 700; color: var(--tinta); }
.enlace-pago__url {
  font-size: .8125rem;
  color: var(--tinta-3);
  word-break: break-all;
  background: var(--papel-hoja);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 9px 11px;
  max-height: 5.4em;
  overflow: auto;
}
.enlace-pago__acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.enlace-pago__acciones .boton { flex: 1 1 12rem; }
/* Sobre el azul tenue del recuadro, el azul de marca da 4,33:1 -- por debajo
   del 4,5:1 de WCAG 1.4.3 para texto normal. El azul oscuro da 6,33:1. */
.enlace-pago .boton--fantasma { --texto-boton: var(--azul-hover); border-color: var(--azul-hover); }

.nota-stripe {
  margin: var(--r2) 0 0;
  font-size: .8125rem; color: var(--tinta-3); line-height: 1.5;
}

/* ---------- Modal: tarjeta del cobro automatico -------------------------
   El mismo formulario del panel interno, traido al papel del portal: sin
   Bootstrap y sin sombras de panel SaaS -- una hoja mas, con su filete de 1px,
   encima de un fondo atenuado. La tarjeta de la vista previa SI lleva
   degradado: es el unico objeto de la pagina que representa una cosa fisica.
   ------------------------------------------------------------------------ */
.modal-tarjeta {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--r2);
  /* Con el teclado del telefono abierto, la caja tiene que poder subir: por eso
     el scroll vive aqui y no dentro de la caja. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Con el modal abierto, el fondo no se arrastra: en un telefono, un dedo que
   quiere bajar por el formulario acababa moviendo la pagina de detras. */
body.modal-abierto { overflow: hidden; }

.modal-tarjeta__fondo {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  padding: 0;
  background: rgba(16, 32, 58, .55);
  cursor: pointer;
  /* Sin blur: en un Android de entrada el backdrop-filter tira los fps del
     teclado al escribir el numero de la tarjeta. */
  animation: modal-fondo .18s var(--salida) both;
}
@keyframes modal-fondo { from { opacity: 0; } to { opacity: 1; } }

.modal-tarjeta__caja {
  position: relative;
  width: 100%;
  max-width: 27rem;
  background: var(--papel-hoja);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  box-shadow: 0 18px 40px -12px rgba(16, 32, 58, .35);
  animation: modal-caja .22s var(--salida) both;
}
@keyframes modal-caja {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.modal-tarjeta__cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r2);
  padding: 13px 15px;
  border-bottom: 1px solid var(--linea);
}
.modal-tarjeta__titulo {
  display: flex; align-items: center; gap: 9px;
  margin: 0;
  font-family: var(--display);
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--tinta);
}
.modal-tarjeta__titulo svg { color: var(--azul); flex: none; }
.modal-tarjeta__cerrar {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: var(--dedo); height: var(--dedo);
  margin: -10px -10px -10px 0;      /* 44px de objetivo sin engordar la cabecera */
  border: 0; border-radius: var(--radio);
  background: transparent;
  color: var(--tinta-3);
  cursor: pointer;
  transition: color .18s var(--salida), background-color .18s var(--salida);
}
.modal-tarjeta__cerrar:hover { color: var(--tinta); background: var(--papel-talon); }

.modal-tarjeta__cuerpo { padding: var(--r3) 15px var(--r2); }
.modal-tarjeta__sub {
  margin: 0 0 var(--r3);
  font-size: .875rem; line-height: 1.5; color: var(--tinta-2);
}
.modal-tarjeta__sub strong { color: var(--tinta); }

.modal-tarjeta__fila { display: flex; gap: 10px; margin-top: var(--r2); }
.modal-tarjeta__fila .campo { flex: 1 1 0; min-width: 0; }

.modal-tarjeta__sellos {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: var(--r3) 0 0; padding: 0;
  list-style: none;
}
.modal-tarjeta__sellos li {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 500; color: var(--tinta-3);
}
.modal-tarjeta__sellos svg { color: var(--verde); flex: none; }

/* ---------- Vista previa de la tarjeta ---------------------------------- */
.tarjeta-previa {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 15px;
  margin-bottom: var(--r3);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--tinta) 0%, #0b3f77 55%, var(--azul) 100%);
  color: #fff;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.tarjeta-previa__chip {
  width: 34px; height: 25px;
  border-radius: 4px;
  background: linear-gradient(160deg, #f4d98a, #d9b45f 55%, #b98f2e);
}
.tarjeta-previa__marca {
  position: absolute; top: 15px; right: 15px;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.tarjeta-previa__numero {
  margin: 0;
  font-size: 1.125rem; letter-spacing: .09em;
  overflow-wrap: anywhere;
}
.tarjeta-previa__pie {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--r2);
  font-size: .8125rem;
}
.tarjeta-previa__nombre {
  text-transform: uppercase; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 62%;
}
.tarjeta-previa__vence { display: grid; justify-items: end; }
.tarjeta-previa__rotulo {
  font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
@media (max-width: 22.5rem) {
  .tarjeta-previa__numero { font-size: 1rem; letter-spacing: .05em; }
  .modal-tarjeta__fila { flex-wrap: wrap; }
}

/* ---------- Resultado --------------------------------------------------- */
.recibo { display: grid; gap: var(--r3); }
.recibo__sello { display: flex; align-items: center; gap: 13px; }
.recibo__marca {
  flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--verde-tenue);
  border: 1px solid var(--verde);
  color: var(--verde);
}
.recibo__marca svg path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: trazar .55s var(--salida) .12s forwards;
}
@keyframes trazar { to { stroke-dashoffset: 0; } }
/* Variante para la pantalla de cuenta dada de baja (tarea t10a, Requisito 2):
   mismo circulo, tono ambar en vez de verde -- no es un "listo, todo bien",
   es un aviso que requiere hablar con la asesora. */
.recibo__marca--atencion {
  background: var(--ambar-tenue);
  border-color: var(--ambar);
  color: var(--ambar);
}
.recibo__titulo {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.3rem, 4vw, 1.6rem); letter-spacing: -.02em; line-height: 1.15;
  margin: 0;
}
.recibo__sub { margin: 3px 0 0; font-size: .9375rem; color: var(--tinta-2); }

.lectura { border-top: 1px solid var(--linea); }
.lectura__fila {
  display: grid;
  grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
  gap: var(--r2);
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
  font-size: .9375rem;
}
.lectura__fila dt { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.lectura__fila dd { margin: 0; }

.acciones-final { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.acciones-final .boton { flex: 0 1 auto; }

/* ---------- Pie --------------------------------------------------------- */
.pie {
  position: relative; z-index: 1;
  border-top: 1px solid var(--linea);
  background: var(--papel-hoja);
}
.pie__interior {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: var(--r3);
  /* En iPhone el indicador de inicio se come la ultima franja de la pantalla. */
  padding-bottom: max(var(--r3), env(safe-area-inset-bottom));
  padding-left: max(var(--borde), env(safe-area-inset-left));
  padding-right: max(var(--borde), env(safe-area-inset-right));
  display: flex; flex-wrap: wrap; gap: var(--r2) var(--r3);
  align-items: center; justify-content: space-between;
  font-size: .8125rem; color: var(--tinta-3);
}
.pie p { margin: 0; max-width: 62ch; }
/* "Entrar a PRESTAMOSCLOUD" es el unico enlace del pie y en movil es el que se
   toca despues de pagar: se le da alto de dedo sin sacarlo de la linea de texto. */
.pie__interior a {
  display: inline-flex; align-items: center;
  min-height: var(--dedo);
}

/* ---------- Paginas simples (gracias / cancelado) ---------------------- */
.simple { max-width: 40rem; margin: 0 auto; }
.simple .hoja__cuerpo { padding: clamp(1.5rem, 5vw, var(--r5)); }

/* =========================================================================
   Afinados por ancho
   El diseno base ya fluye de 320 a 1440. Aqui van solo los dos tramos que
   quedaban sin resolver: el telefono pequeno y la franja intermedia entre el
   telefono y el escritorio de dos columnas.
   ========================================================================= */

/* ---------- Franja intermedia: tableta y telefono en horizontal ---------
   Entre ~700px y 991px la pagina sigue en una sola columna pero la hoja se
   estiraba hasta 828px: renglones del talon de un palmo de largo y el par
   "titular / referencia" en dos columnas enormes. Se le pone la misma medida
   que tendra la columna principal en escritorio (~40rem), centrada, para que
   el salto a dos columnas en 62rem no cambie el ancho de lectura. */
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .tablero { max-width: 40rem; margin-inline: auto; width: 100%; }
}

/* ---------- Telefono: llegar antes al campo de busqueda -----------------
   Medido en 320x568 (el iPhone SE y casi cualquier Android de entrada): el
   campo de busqueda arrancaba en y=668px, cien pixeles por debajo del pliegue,
   detras de una portada escrita para convencer a alguien que duda si pagar.
   Quien llega aqui ya decidio pagar y trae la foto del comprobante hecha: la
   portada se queda en el titular, la linea que de verdad importa ("su acceso
   se desbloquea en cuanto registramos el pago") y el sello de portal oficial.
   La frase de venta se guarda para pantallas donde no cuesta nada. */
@media (max-width: 30rem) {
  .envoltura { padding-top: 10px; padding-bottom: var(--r4); }
  .tablero { row-gap: var(--r2); }

  .portada__eyebrow { margin-bottom: 8px; padding: 3px 9px 3px 7px; }
  .portada h1 {
    font-size: clamp(1.45rem, 7.4vw, 1.7rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin-bottom: 8px;
  }
  .portada__lead { font-size: .875rem; line-height: 1.45; }
  .portada__lead-extra { display: none; }

  .hoja__cuerpo { padding-top: var(--r2); }
  .etapa__titulo { font-size: 1.4375rem; }
  .etapa__sub { margin-bottom: var(--r2); font-size: .875rem; }

  /* El boton verde del final y el de "pagar" se tocan con el pulgar: a todo
     el ancho, sin obligar a apuntar. */
  .acciones-final { display: grid; gap: var(--r2); }
  .acciones-final .boton { width: 100%; }
}

/* ---------- Telefono muy estrecho (320px) -------------------------------
   A 320 el interior util son 259px. Se recortan solo los gastos de borde para
   que ni el rail de pasos ni el talon perforado aprieten las cifras. */
@media (max-width: 22.5rem) {
  .metodo__panel-int { padding-left: 12px; padding-right: 12px; }
  .previa { gap: 10px; padding: 9px; }
  .previa__img, .previa__ficha { width: 60px; height: 60px; }
  .enlace-pago__acciones .boton { flex: 1 1 100%; }
}

/* ---------- Telefono en horizontal --------------------------------------
   Medido en 740x360: el campo quedaba en y=493, a 133px por debajo del
   pliegue. Con 360px de alto no hay sitio para una portada de venta: se deja
   el titular y la linea de la promesa, y la hoja arranca de inmediato. */
@media (orientation: landscape) and (max-height: 30rem) {
  .envoltura { padding-top: var(--r1); padding-bottom: var(--r3); }
  .portada h1 { font-size: clamp(1.3rem, 3.4vw, 1.6rem); margin-bottom: var(--r1); line-height: 1.1; }
  .portada__lead { font-size: .875rem; line-height: 1.45; }
  .portada__lead-extra { display: none; }
  .cinta__interior { padding-block: var(--r1); }
  .tablero { row-gap: var(--r2); }
  .portada__eyebrow { margin-bottom: var(--r1); }
  .hoja__cuerpo { padding-top: var(--r2); }
  .etapa__titulo { font-size: 1.4375rem; }
  .etapa__sub { margin-bottom: var(--r2); font-size: .875rem; }
  .pasos { font-size: .6875rem; }
  .paso { padding-block: 8px; }
}

/* Con el telefono acostado sobra ancho y falta alto: la portada se pone al
   lado, no encima, y el buscador queda arriba del todo. Es la misma reticula
   de dos columnas del escritorio, adelantada a este caso. */
@media (orientation: landscape) and (max-height: 30rem) and (min-width: 34rem) {
  .tablero {
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    grid-template-areas:
      'portada   principal'
      'confianza principal';
    column-gap: var(--r3);
    align-content: start;
  }
  .tablero__portada   { grid-area: portada; }
  .tablero__principal { grid-area: principal; }
  .tablero__confianza { grid-area: confianza; }
}

/* ---------- Conversion de demos: plan y meses --------------------------
   Etapa exclusiva de las empresas en PLAN DEMO. Sigue la direccion del
   portal ("tramite claro"): los planes se leen como un TARIFARIO -- filas
   con filete de 1px, cifras tabulares, el mensual efectivo a la derecha --
   y no como una cuadricula de tarjetas. Los meses se eligen con UNA regla;
   las marcas de descuento cuelgan exactamente sobre su mes. La escena 3D es
   decorativa: sin WebGL quedan doce barras en CSS. */
.demo-planes { border: 0; margin: 0 0 var(--r4); padding: 0; min-width: 0; }
.demo-planes__titulo { margin: 0 0 10px; padding: 0; }
.demo-planes__lista {
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-control);
  background: var(--papel-hoja);
  overflow: hidden;
}
.demo-plan {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  grid-template-areas: 'marca nombre usuarios precio';
  align-items: center;
  column-gap: 14px;
  min-height: 54px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color .2s var(--salida);
}
.demo-plan + .demo-plan { border-top: 1px solid var(--linea); }
.demo-plan:hover { background: var(--papel-talon); }
.demo-plan[data-elegido] { background: var(--azul-tenue); }
/* Filete azul a la izquierda de la fila elegida: es un recorte del propio
   tarifario, no un borde de tarjeta. */
.demo-plan[data-elegido]::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--azul);
}
.demo-plan__radio { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.demo-plan__marca {
  grid-area: marca;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--linea-campo);
  background: var(--papel-hoja);
  transition: border-color .2s, box-shadow .2s;
}
.demo-plan[data-elegido] .demo-plan__marca {
  border-color: var(--azul);
  box-shadow: inset 0 0 0 4px var(--papel-hoja), inset 0 0 0 10px var(--azul);
}
.demo-plan__radio:focus-visible ~ .demo-plan__marca { outline: 3px solid var(--azul); outline-offset: 2px; }
.demo-plan__nombre {
  grid-area: nombre;
  font-family: var(--display); font-weight: 800; font-size: .875rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinta);
  white-space: nowrap;   /* un nombre de plan nunca se parte a media palabra */
}
.demo-plan[data-elegido] .demo-plan__nombre { color: var(--azul-hover); }
/* Sobre el azul tenue, --tinta-3 se queda en 4,44:1: el texto secundario de
   la fila elegida sube a --tinta-2 para seguir por encima de 4,5:1. */
.demo-plan[data-elegido] .demo-plan__usuarios,
.demo-plan[data-elegido] .demo-plan__antes,
.demo-plan[data-elegido] .demo-plan__precio small { color: var(--tinta-2); }
.demo-plan__usuarios { grid-area: usuarios; font-size: .875rem; color: var(--tinta-3); white-space: nowrap; }
.demo-plan__precio {
  grid-area: precio;
  display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  min-width: 9.5rem;
  font-family: var(--display); color: var(--tinta); white-space: nowrap;
}
.demo-plan__precio b { font-weight: 700; font-size: 1.0625rem; }
.demo-plan__precio small { font-size: .75rem; font-weight: 500; color: var(--tinta-3); margin-left: -3px; }
.demo-plan__antes { font-size: .8125rem; font-weight: 500; color: var(--tinta-3); }
.demo-plan--elegido .demo-plan__marca { animation: demo-pop .4s var(--salida); }

.demo-meses { margin: 0 0 var(--r3); }
.demo-meses__titulo { display: block; margin: 0 0 10px; }

.demo-escena {
  position: relative;
  aspect-ratio: 12 / 5;
  margin: 0 0 var(--r2);
  border-radius: var(--radio-control);
  background: linear-gradient(180deg, var(--papel-hoja) 0%, var(--papel-talon) 100%);
  border: 1px solid var(--linea);
  overflow: hidden;
}
@supports not (aspect-ratio: 1) { .demo-escena { height: 13rem; } }
.demo-escena__lienzo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.demo-escena--3d .demo-escena__plano { display: none; }
.demo-escena__dato {
  position: absolute; left: 18px; top: 14px; margin: 0;
  display: flex; align-items: baseline; gap: 6px;
  pointer-events: none;
}
.demo-meses__num {
  display: inline-block;
  font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(2.25rem, 7vw, 3rem); letter-spacing: -.02em; color: var(--tinta);
}
.demo-escena__unidad { font-size: 1rem; color: var(--tinta-2); }
.demo-sello {
  position: absolute; right: 14px; top: 16px;
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: .8125rem;
  background: var(--papel-hoja); color: var(--tinta-2);
  border: 1px dashed var(--linea-campo);
  transition: background-color .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.demo-sello--activo { background: var(--verde-tenue); color: var(--verde); border: 1px solid var(--verde); }
.demo-sello--salto { animation: demo-sello .6s var(--salida); }
.demo-escena--brillo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 70% at 70% 40%, rgba(15, 122, 77, .16), transparent 70%);
  animation: demo-brillo .9s ease-out both;
}

/* Respaldo sin WebGL: doce barras con la misma escalera y la silueta. */
.demo-escena__plano {
  position: absolute; inset: 32% 6% 10%;
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 5px;
  --color-plan: var(--azul);
}
.demo-escena__plano[data-plan="13"] { --color-plan: #0f9d6b; }
.demo-escena__plano[data-plan="2"]  { --color-plan: #b4733f; }
.demo-escena__plano[data-plan="3"]  { --color-plan: #8f9aa8; }
.demo-escena__plano[data-plan="1"]  { --color-plan: #d4a72c; }
.demo-escena__plano span {
  display: block; height: calc(30% + var(--n) * 6%);
  border-radius: 4px 4px 2px 2px;
  background: var(--linea);
  opacity: .55;
  transform-origin: bottom;
  transition: background-color .4s, opacity .4s;
  transition-delay: calc(var(--n) * 25ms);
}
.demo-escena__plano span[data-on] { background: var(--color-plan); opacity: 1; }

/* Una sola regla. Las marcas se colocan con la misma geometria que el
   pulgar (26px): centro del pulgar = 13px + pos * (ancho - 26px). */
.demo-regla { position: relative; --pulgar: 26px; }
.demo-rango {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: var(--dedo); margin: 0; background: transparent; cursor: pointer;
  --lleno: 0%;
}
.demo-rango::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--azul) 0 var(--lleno), var(--linea) var(--lleno) 100%);
}
.demo-rango::-moz-range-track { height: 8px; border-radius: 999px; background: var(--linea); }
.demo-rango::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--azul); }
.demo-rango::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  width: var(--pulgar); height: var(--pulgar); margin-top: -9px; border-radius: 50%;
  background: var(--papel-hoja); border: 3px solid var(--azul);
  box-shadow: 0 2px 8px rgba(22, 27, 34, .2);
  transition: transform .15s var(--salida);
}
.demo-rango::-moz-range-thumb {
  /* Mismo diametro que en WebKit: las marcas se colocan con --pulgar. */
  box-sizing: border-box;
  width: var(--pulgar); height: var(--pulgar); border-radius: 50%;
  background: var(--papel-hoja); border: 3px solid var(--azul);
}
.demo-rango:active::-webkit-slider-thumb { transform: scale(1.12); }
.demo-rango:focus-visible { outline: none; }
.demo-rango:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--azul-tenue), 0 0 0 6px var(--azul); }
.demo-rango:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--azul-tenue), 0 0 0 6px var(--azul); }

.demo-marcas { list-style: none; margin: 0; padding: 0; position: relative; height: 48px; }
.demo-marca__sitio {
  position: absolute; top: 0;
  left: calc(var(--pulgar) / 2 + var(--pos) * (100% - var(--pulgar)));
  transform: translateX(-50%);
}
.demo-marca__sitio[data-borde="fin"] { transform: translateX(calc(-100% + var(--pulgar) / 2)); }
.demo-marca {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  min-height: var(--dedo); padding: 10px 6px 2px;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: .8125rem; color: var(--tinta-2);
}
.demo-marca__sitio[data-borde="fin"] .demo-marca { align-items: flex-end; }
/* La muesca que une la marca con su mes en la regla. */
.demo-marca::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 7px;
  margin-left: -1px; border-radius: 1px; background: var(--linea-campo);
}
.demo-marca__sitio[data-borde="fin"] .demo-marca::before { left: auto; right: calc(var(--pulgar) / 2 - 1px); margin: 0; }
.demo-marca b { font-family: var(--display); font-weight: 700; color: var(--tinta-2); white-space: nowrap; }
.demo-marca span { color: var(--tinta-3); font-weight: 600; }
.demo-marca[data-alcanzada]::before { background: var(--verde); }
.demo-marca[data-alcanzada] span { color: var(--verde); }
.demo-marca[aria-pressed="true"] b { color: var(--tinta); }
.demo-marca:hover b { color: var(--azul); }
.demo-marca:focus-visible { outline: 3px solid var(--azul); outline-offset: 0; border-radius: 6px; }

.demo-total { margin-bottom: var(--r3); }
.demo-total__desglose { margin: 0 0 var(--r2); }
.demo-total__lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.demo-total__lado .total__usd { margin: 0; }
.demo-ahorro {
  margin: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--verde-tenue); color: var(--verde); font-weight: 600; font-size: .875rem;
}

@media (max-width: 40rem) {
  .demo-plan {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    grid-template-areas: 'marca nombre precio' 'marca usuarios precio';
    row-gap: 0; padding: 9px 14px;
  }
  .demo-plan__usuarios { font-size: .8125rem; }
  /* El precio normal tachado arriba y el efectivo con su "/mes" en una sola
     linea: dos renglones por plan, no tres. */
  .demo-plan__precio {
    min-width: 0; display: grid; grid-template-columns: auto auto;
    justify-content: end; align-items: baseline; column-gap: 4px;
  }
  .demo-plan__antes { grid-column: 1 / -1; justify-self: end; line-height: 1.2; }
  .demo-plan__precio small { margin-left: 0; }
  .demo-escena { aspect-ratio: 12 / 7; }
  .demo-total__lado { flex-direction: row; flex-wrap: wrap-reverse; align-items: flex-end;
    justify-content: space-between; width: 100%; }
  .demo-total__lado .total__usd { text-align: left; }
  .demo-plan__usuarios, .demo-marca { font-size: .875rem; }
}
/* Telefonos de 320-360px: el sello no cabe junto al numero; baja debajo. */
@media (max-width: 26rem) {
  .demo-sello { top: 62px; right: auto; left: 18px; }
  .demo-escena { aspect-ratio: 12 / 8; }
  /* Nombre y usuarios arriba; precio debajo, en una sola linea. */
  .demo-plan {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    grid-template-areas: 'marca nombre usuarios' 'marca precio precio';
    row-gap: 2px;
  }
  .demo-plan__nombre { letter-spacing: .03em; }
  .demo-plan__precio {
    display: flex; justify-content: flex-start; align-items: baseline; gap: 6px;
  }
  .demo-plan__antes { order: 3; }
  .demo-plan__precio small { margin-left: -3px; }
  .solo-ancho { display: none; }
}

@keyframes demo-pop {
  0% { transform: scale(.85); } 100% { transform: scale(1); }
}
@keyframes demo-salto {
  0% { transform: translateY(6px); opacity: .35; } 100% { transform: none; opacity: 1; }
}
@keyframes demo-sello {
  0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); }
}
@keyframes demo-brillo { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Preferencias del usuario ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .etapa > * { animation: none; }
}
@media (prefers-contrast: more) {
  :root {
    --linea: #9c9483; --linea-fuerte: #6f6858; --linea-campo: #5b5445;
    --tinta-2: #23324c; --tinta-3: #3c485c;
  }
}
@media print {
  body::before, .pasos, .metodos, .pie, .cinta__sello { display: none; }
  .hoja { box-shadow: none; border-color: #999; }
}

/* ---------- Visitante fuera de Republica Dominicana (R2) -----------------
   Cuando el ledger "Con quien esta tratando" no se pinta (su HTML ni se
   genera), la reticula de escritorio se queda con una fila vacia y su
   row-gap. Se le quita la fila para que la portada y la hoja queden
   alineadas exactamente igual que antes. */
@media (min-width: 62rem) {
  .tablero--sin-confianza {
    grid-template-areas: 'portada principal';
  }
}