/* ═══════════════════════════════════════════════════════════════════
   Ezra Financiera — la cara pública (landing, registro, pago, ingreso,
   ayuda y el panel maestro).

   Toda clase lleva el prefijo `ez-`. No es manía: en el panel de Mario
   van seis choques de nombres que sólo se vieron mirando la pantalla
   (ver ARQUITECTURA.md). Esta hoja no se carga en el panel, pero el día
   que alguien la sume ahí no tiene que romper nada.

   Colores: verde esmeralda. Facturitas es negro con violeta; copiamos su
   recorrido y su prolijidad, no su marca.

   Sin fuentes ni recursos externos: la CSP del sitio es 'self'.
   ═══════════════════════════════════════════════════════════════════ */

/* Va arriba de todo: el [hidden] del navegador pierde por especificidad
   contra cualquier regla de clase con `display` (lección del panel). */
[hidden] { display: none !important; }

:root {
  --ez-fondo: #f6faf8;
  --ez-superficie: #ffffff;
  --ez-superficie-2: #eef5f2;
  --ez-tinta: #0b1f1c;
  --ez-tinta-2: #3b524d;
  --ez-tinta-3: #56706a;
  --ez-borde: #d9e6e1;
  --ez-borde-fuerte: #b9cfc8;
  --ez-primario: #0f766e;
  --ez-primario-hover: #115e59;
  --ez-primario-texto: #ffffff;
  --ez-acento: #10b981;
  --ez-acento-suave: #d1fae5;
  --ez-enlace: #0f766e;
  --ez-peligro: #b42318;
  --ez-peligro-suave: #fde8e7;
  --ez-peligro-texto: #ffffff;
  --ez-aviso: #9a4a06;
  --ez-aviso-suave: #fef3e2;
  --ez-ok: #067647;
  --ez-ok-suave: #dcfae6;
  /* La banda oscura (hero, seguridad, cierre) es oscura en los dos modos:
     es la firma de la página, como el negro de Facturitas. */
  --ez-banda: #0b1f1c;
  --ez-banda-2: #12302b;
  --ez-banda-tinta: #e8f5f1;
  --ez-banda-tinta-2: #a8c7bf;
  --ez-sombra: 0 1px 2px rgb(11 31 28 / .06), 0 8px 24px rgb(11 31 28 / .07);
  --ez-sombra-alta: 0 2px 4px rgb(11 31 28 / .06), 0 24px 48px rgb(11 31 28 / .14);
  --ez-radio: 14px;
  --ez-radio-chico: 10px;
  --ez-foco: 0 0 0 3px var(--ez-fondo), 0 0 0 5px var(--ez-acento);
  --ez-letra: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ez-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ez-fondo: #081412;
    --ez-superficie: #0f1f1c;
    --ez-superficie-2: #142a26;
    --ez-tinta: #e7f3ef;
    --ez-tinta-2: #b0c8c1;
    --ez-tinta-3: #8fa9a2;
    --ez-borde: #213d37;
    --ez-borde-fuerte: #2f5249;
    /* Con fondo oscuro el botón es el acento claro y la letra oscura:
       blanco sobre #10b981 no llega a AA. */
    --ez-primario: #10b981;
    --ez-primario-hover: #34d399;
    --ez-primario-texto: #04201a;
    --ez-acento-suave: #0d3b31;
    --ez-enlace: #5eead4;
    --ez-peligro: #f97066;
    --ez-peligro-suave: #3b1614;
    /* #f97066 con letra blanca no llega a AA: en oscuro va letra oscura. */
    --ez-peligro-texto: #1f0604;
    --ez-aviso: #fdb022;
    --ez-aviso-suave: #36250a;
    --ez-ok: #47cd89;
    --ez-ok-suave: #0e3322;
    --ez-banda: #040d0b;
    --ez-banda-2: #0c211d;
    --ez-sombra: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35);
    --ez-sombra-alta: 0 2px 4px rgb(0 0 0 / .4), 0 24px 48px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--ez-letra);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ez-tinta);
  background: var(--ez-fondo);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ez-enlace); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.025em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Foco visible en TODO lo que se puede tocar con teclado. */
:focus-visible { outline: none; box-shadow: var(--ez-foco); border-radius: 8px; }

.ez-salto {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ez-primario); color: var(--ez-primario-texto);
  padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none;
}
.ez-salto:focus { top: 12px; }

.ez-contenedor { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 20px; }
.ez-contenedor-angosto { max-width: 760px; }
.ez-solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Botones ─────────────────────────────────────────────────────── */
.ez-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border-radius: 12px; border: 1px solid transparent;
  font-weight: 650; font-size: 15.5px; text-decoration: none; cursor: pointer;
  background: var(--ez-primario); color: var(--ez-primario-texto);
  transition: background-color .15s, border-color .15s, transform .15s;
  white-space: nowrap;
}
.ez-boton:hover { background: var(--ez-primario-hover); text-decoration: none; }
.ez-boton:active { transform: translateY(1px); }
.ez-boton[disabled], .ez-boton[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.ez-boton svg { width: 18px; height: 18px; flex: none; }
.ez-boton-grande { min-height: 54px; padding: 0 30px; font-size: 17px; border-radius: 14px; }
.ez-boton-ancho { width: 100%; white-space: normal; text-align: center; }
.ez-boton-chico { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.ez-boton-fantasma {
  background: transparent; color: var(--ez-tinta); border-color: var(--ez-borde-fuerte);
}
.ez-boton-fantasma:hover { background: var(--ez-superficie-2); }
.ez-boton-peligro { background: var(--ez-peligro); color: var(--ez-peligro-texto); }
.ez-boton-peligro:hover { background: var(--ez-peligro); filter: brightness(.92); }
.ez-boton-wa { background: #128c4a; color: #fff; }
.ez-boton-wa:hover { background: #0e7a40; }
.ez-banda .ez-boton-fantasma { color: var(--ez-banda-tinta); border-color: rgb(255 255 255 / .22); }
.ez-banda .ez-boton-fantasma:hover { background: rgb(255 255 255 / .08); }

/* El botón "cargando": la ruedita reemplaza al ícono y el texto queda. */
.ez-boton.ez-cargando { pointer-events: none; opacity: .85; }
.ez-boton.ez-cargando::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ez-gira .7s linear infinite;
}
.ez-boton.ez-cargando svg { display: none; }
@keyframes ez-gira { to { transform: rotate(360deg); } }

/* ── Barra de arriba ─────────────────────────────────────────────── */
.ez-barra {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ez-fondo) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--ez-borde);
}
.ez-barra-oscura {
  background: color-mix(in srgb, var(--ez-banda) 88%, transparent);
  border-bottom-color: rgb(255 255 255 / .08);
  color: var(--ez-banda-tinta);
}
.ez-barra-fila { display: flex; align-items: center; gap: 20px; height: 68px; }
.ez-marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.02em;
}
.ez-marca svg { width: 32px; height: 32px; }
.ez-marca small { font-weight: 600; color: var(--ez-acento); font-size: 19px; }
.ez-barra-oscura .ez-marca small { color: #34d399; }
/* El botón fantasma de la barra oscura: con la tinta normal (oscura) no
   se leía "Ingresar" sobre el fondo casi negro. */
.ez-barra-oscura .ez-boton-fantasma { color: var(--ez-banda-tinta); border-color: rgb(255 255 255 / .24); }
.ez-barra-oscura .ez-boton-fantasma:hover { background: rgb(255 255 255 / .08); }
.ez-menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ez-menu a {
  color: inherit; opacity: .82; text-decoration: none; font-weight: 550; font-size: 15px;
  padding: 8px 12px; border-radius: 10px;
}
.ez-menu a:hover { opacity: 1; background: rgb(127 127 127 / .12); }
.ez-barra-acciones { display: flex; gap: 10px; align-items: center; }
.ez-menu-boton {
  display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgb(127 127 127 / .3); background: transparent; color: inherit; cursor: pointer;
  align-items: center; justify-content: center;
}
.ez-menu-boton svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .ez-menu-boton { display: inline-flex; }
  .ez-menu, .ez-barra-acciones { display: none; }
  .ez-barra.ez-abierta .ez-menu, .ez-barra.ez-abierta .ez-barra-acciones {
    display: flex; flex-direction: column; align-items: stretch;
  }
  .ez-barra.ez-abierta .ez-barra-fila { flex-wrap: wrap; height: auto; padding-block: 12px; }
  .ez-barra.ez-abierta .ez-menu { width: 100%; order: 3; margin: 8px 0 0; gap: 2px; }
  .ez-barra.ez-abierta .ez-barra-acciones { width: 100%; order: 4; padding-bottom: 8px; }
  .ez-barra.ez-abierta .ez-menu a { padding: 12px; font-size: 16px; }
}

/* ── Banda oscura y hero ─────────────────────────────────────────── */
.ez-banda {
  background: var(--ez-banda); color: var(--ez-banda-tinta);
  position: relative; overflow: hidden; isolation: isolate;
}
.ez-banda a:not(.ez-boton) { color: #5eead4; }
.ez-resplandor::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 900px; height: 700px; right: -220px; top: -160px;
  background: radial-gradient(closest-side, rgb(16 185 129 / .30), transparent 70%);
}
.ez-resplandor::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
}

.ez-hero { padding-block: 72px 88px; }
.ez-hero-grilla {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center;
}
.ez-etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: rgb(16 185 129 / .12); color: #6ee7b7;
  border: 1px solid rgb(16 185 129 / .28);
  font-size: 13.5px; font-weight: 600;
}
.ez-etiqueta i {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 4px rgb(52 211 153 / .2);
}
.ez-hero h1 {
  margin-top: 22px;
  font-size: clamp(2.5rem, 5.6vw, 4.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02;
}
.ez-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #34d399, #5eead4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ez-hero-bajada { margin-top: 22px; font-size: 18.5px; color: var(--ez-banda-tinta-2); max-width: 34em; }
.ez-hero-acciones { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.ez-hero-nota {
  margin-top: 20px; display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 14px; color: var(--ez-banda-tinta-2);
}
.ez-hero-nota span { display: inline-flex; align-items: center; gap: 6px; }
.ez-hero-nota svg { width: 16px; height: 16px; color: #34d399; }

@media (max-width: 900px) {
  .ez-hero { padding-block: 44px 56px; }
  .ez-hero-grilla { grid-template-columns: 1fr; gap: 44px; }
}

/* ── El teléfono (hecho en CSS, sin imágenes) ────────────────────── */
.ez-telefono {
  width: 318px; max-width: 100%; margin-inline: auto;
  border-radius: 46px; padding: 11px;
  background: linear-gradient(160deg, #26332f, #0c1311);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 80px rgb(0 0 0 / .45), 0 0 120px rgb(16 185 129 / .18);
}
.ez-tel-pantalla {
  border-radius: 36px; overflow: hidden; background: #efe7de; color: #111b21;
  height: 600px; display: flex; flex-direction: column; position: relative;
}
.ez-tel-estado {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 26px 6px; font-size: 13px; font-weight: 650; background: #f0f2f5;
}
.ez-tel-estado b { width: 90px; height: 24px; border-radius: 20px; background: #0c1311; }
.ez-tel-estado span:last-child { letter-spacing: 2px; font-size: 11px; }
.ez-tel-cabeza {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px;
  background: #f0f2f5; border-bottom: 1px solid #dfe3e6;
}
.ez-tel-cabeza svg.ez-tel-atras { width: 20px; height: 20px; color: #0a7cff; }
.ez-tel-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: #0f766e; color: #fff; font-weight: 700; font-size: 14px;
}
.ez-tel-titulo { line-height: 1.2; min-width: 0; }
.ez-tel-titulo strong { display: block; font-size: 14.5px; }
.ez-tel-titulo small { font-size: 12px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ez-tel-chat {
  flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  background-color: #efe7de;
  background-image: radial-gradient(rgb(0 0 0 / .045) 1px, transparent 1px);
  background-size: 14px 14px;
}
.ez-tel-dia {
  align-self: center; font-size: 11.5px; background: #fff; color: #54656f;
  padding: 3px 10px; border-radius: 8px; box-shadow: 0 1px .5px rgb(0 0 0 / .1);
}
.ez-msg {
  max-width: 82%; padding: 6px 8px 5px; border-radius: 9px; font-size: 13.5px; line-height: 1.35;
  background: #fff; box-shadow: 0 1px .5px rgb(0 0 0 / .13); position: relative;
}
.ez-msg-propio { align-self: flex-end; background: #d9fdd3; }
.ez-msg-quien { display: block; font-size: 12px; font-weight: 650; color: #c2410c; margin-bottom: 2px; }
.ez-msg-quien.ez-msg-bot { color: #0f766e; }
.ez-msg-hora { display: block; text-align: right; font-size: 10.5px; color: #667781; margin-top: 2px; }
.ez-msg-foto { padding: 4px; }
.ez-msg-foto .ez-msg-hora { padding-right: 4px; }

/* El comprobante dibujado: una transferencia genérica, sin marca de banco. */
.ez-comprobante {
  width: 196px; border-radius: 7px; background: #fbfdfc; overflow: hidden; border: 1px solid #e3ebe8;
  font-size: 10.5px; color: #33423f;
}
.ez-comp-cabeza { background: #1e3a5f; color: #fff; padding: 8px 10px; display: flex; align-items: center; gap: 7px; }
.ez-comp-cabeza i { width: 18px; height: 18px; border-radius: 5px; background: rgb(255 255 255 / .9); }
.ez-comp-cabeza b { font-size: 11px; }
.ez-comp-cuerpo { padding: 9px 10px 10px; display: grid; gap: 5px; }
.ez-comp-ok { display: flex; align-items: center; gap: 5px; color: #067647; font-weight: 700; font-size: 11px; }
.ez-comp-ok svg { width: 13px; height: 13px; }
.ez-comp-monto { font-size: 19px; font-weight: 800; color: #0b1f1c; letter-spacing: -0.02em; }
.ez-comp-fila { display: flex; justify-content: space-between; gap: 6px; }
.ez-comp-fila span:first-child { color: #7a8a86; }
.ez-comp-fila span:last-child { font-weight: 600; text-align: right; }

.ez-reaccion {
  position: absolute; left: 10px; bottom: -13px;
  background: #fff; border-radius: 12px; padding: 1px 6px; font-size: 13px;
  box-shadow: 0 1px 3px rgb(0 0 0 / .2); border: 1px solid #eef1f2;
}
.ez-msg-con-reaccion { margin-bottom: 14px; }
.ez-tel-escribir {
  display: flex; gap: 8px; align-items: center; padding: 8px 10px 14px; background: #f0f2f5;
}
.ez-tel-escribir span {
  flex: 1; background: #fff; border-radius: 20px; padding: 8px 14px; font-size: 13px; color: #8696a0;
}
.ez-tel-escribir b {
  width: 36px; height: 36px; border-radius: 50%; background: #0f766e; display: grid; place-items: center;
}
.ez-tel-escribir b svg { width: 18px; height: 18px; color: #fff; }

/* La secuencia: entra la foto, aparece el ✅ y contesta el bot. Con
   movimiento reducido se muestra todo quieto. */
.ez-anima-1, .ez-anima-2, .ez-anima-3, .ez-anima-4 { opacity: 0; animation: ez-entra .5s ease-out forwards; }
.ez-anima-1 { animation-delay: .4s; }
.ez-anima-2 { animation-delay: 1.4s; }
.ez-anima-3 { animation-delay: 2.3s; animation-name: ez-salta; }
.ez-anima-4 { animation-delay: 3.1s; }
@keyframes ez-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ez-salta { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ez-anima-1, .ez-anima-2, .ez-anima-3, .ez-anima-4 { opacity: 1; animation: none; }
}

@media (max-width: 420px) {
  .ez-telefono { width: 290px; }
  .ez-tel-pantalla { height: 560px; }
}

/* ── Secciones ───────────────────────────────────────────────────── */
.ez-seccion { padding-block: 96px; }
.ez-seccion-alt { background: var(--ez-superficie); border-block: 1px solid var(--ez-borde); }
.ez-seccion-cabeza { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.ez-sobretitulo {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ez-primario); margin-bottom: 14px;
}
.ez-banda .ez-sobretitulo { color: #34d399; }
.ez-seccion-cabeza h2, .ez-titulo-2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 800; letter-spacing: -0.035em;
}
.ez-seccion-cabeza p { margin-top: 16px; font-size: 18px; color: var(--ez-tinta-2); }
.ez-banda .ez-seccion-cabeza p { color: var(--ez-banda-tinta-2); }
@media (max-width: 700px) {
  .ez-seccion { padding-block: 64px; }
  .ez-seccion-cabeza { margin-bottom: 36px; }
}

/* Cómo funciona: tres pasos */
.ez-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: ez-paso; }
.ez-paso {
  background: var(--ez-superficie); border: 1px solid var(--ez-borde); border-radius: var(--ez-radio);
  padding: 28px; position: relative;
}
.ez-paso-num {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ez-acento-suave); color: var(--ez-primario); font-weight: 800; font-size: 17px;
}
.ez-paso h3 { margin-top: 20px; font-size: 21px; font-weight: 750; }
.ez-paso p { margin-top: 8px; color: var(--ez-tinta-2); }
@media (max-width: 860px) { .ez-pasos { grid-template-columns: 1fr; } }

/* Beneficios: grilla tipo "bento" */
.ez-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.ez-tarjeta {
  background: var(--ez-fondo); border: 1px solid var(--ez-borde); border-radius: var(--ez-radio);
  padding: 28px; grid-column: span 2; display: flex; flex-direction: column; gap: 10px;
}
.ez-seccion:not(.ez-seccion-alt) .ez-tarjeta { background: var(--ez-superficie); }
.ez-tarjeta-ancha { grid-column: span 3; }
.ez-tarjeta-icono {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--ez-primario); color: var(--ez-primario-texto); margin-bottom: 8px;
}
.ez-tarjeta-icono svg { width: 24px; height: 24px; }
.ez-tarjeta h3 { font-size: 19px; font-weight: 750; }
.ez-tarjeta p { color: var(--ez-tinta-2); font-size: 15.5px; }
@media (max-width: 960px) {
  .ez-bento { grid-template-columns: repeat(2, 1fr); }
  .ez-tarjeta, .ez-tarjeta-ancha { grid-column: span 1; }
}
@media (max-width: 620px) { .ez-bento { grid-template-columns: 1fr; } }

/* Números */
.ez-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgb(255 255 255 / .1);
  border-radius: var(--ez-radio); overflow: hidden; border: 1px solid rgb(255 255 255 / .1); }
.ez-numero { background: var(--ez-banda); padding: 34px 26px; }
.ez-numero strong {
  display: block; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.04em; color: #fff;
}
.ez-numero strong small { font-size: .5em; font-weight: 700; color: #34d399; margin-left: 4px; }
.ez-numero span { display: block; margin-top: 6px; color: var(--ez-banda-tinta-2); font-size: 15px; }
@media (max-width: 860px) { .ez-numeros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ez-numeros { grid-template-columns: 1fr; } }

/* Planes */
.ez-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.ez-plan {
  background: var(--ez-superficie); border: 1px solid var(--ez-borde); border-radius: 18px;
  padding: 30px; display: flex; flex-direction: column; position: relative;
}
.ez-plan-destacado { border: 2px solid var(--ez-primario); box-shadow: var(--ez-sombra-alta); }
.ez-plan-cinta {
  position: absolute; top: -13px; left: 30px;
  background: var(--ez-primario); color: var(--ez-primario-texto);
  font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.ez-plan h3 { font-size: 20px; font-weight: 750; }
.ez-plan-para { margin-top: 6px; color: var(--ez-tinta-3); font-size: 15px; min-height: 2.9em; }
.ez-plan-precio { margin-top: 20px; display: flex; align-items: baseline; gap: 6px; }
.ez-plan-precio strong { font-size: 46px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.ez-plan-precio span { color: var(--ez-tinta-3); font-weight: 600; }
.ez-plan-tope {
  margin-top: 10px; font-size: 14.5px; font-weight: 650; color: var(--ez-primario);
  background: var(--ez-acento-suave); padding: 6px 10px; border-radius: 8px; align-self: flex-start;
}
.ez-plan ul { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 11px; flex: 1; }
.ez-plan li { display: flex; gap: 10px; font-size: 15.5px; color: var(--ez-tinta-2); }
.ez-plan li svg { width: 19px; height: 19px; flex: none; color: var(--ez-acento); margin-top: 2px; }
.ez-planes-nota {
  margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.ez-planes-nota div {
  border: 1px dashed var(--ez-borde-fuerte); border-radius: var(--ez-radio-chico); padding: 16px 18px;
  font-size: 15px; color: var(--ez-tinta-2);
}
.ez-planes-nota strong { color: var(--ez-tinta); display: block; margin-bottom: 2px; }
@media (max-width: 960px) {
  .ez-planes, .ez-planes-nota { grid-template-columns: 1fr; }
  .ez-plan-para { min-height: 0; }
}

/* Seguridad */
.ez-seguridad { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.ez-seguridad h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.035em; }
.ez-seguridad > div > p { margin-top: 18px; color: var(--ez-banda-tinta-2); font-size: 17.5px; }
.ez-lista-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ez-lista-seg div {
  border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .03);
  border-radius: var(--ez-radio); padding: 20px;
}
.ez-lista-seg svg { width: 22px; height: 22px; color: #34d399; }
.ez-lista-seg h3 { margin-top: 12px; font-size: 16.5px; font-weight: 700; color: #fff; }
.ez-lista-seg p { margin-top: 6px; font-size: 14.5px; color: var(--ez-banda-tinta-2); }
@media (max-width: 900px) {
  .ez-seguridad { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) { .ez-lista-seg { grid-template-columns: 1fr; } }

/* Preguntas frecuentes */
.ez-faq { display: grid; gap: 12px; }
.ez-faq details {
  background: var(--ez-superficie); border: 1px solid var(--ez-borde); border-radius: var(--ez-radio);
}
.ez-faq summary {
  list-style: none; cursor: pointer; padding: 20px 22px; font-weight: 650; font-size: 17px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: var(--ez-radio);
}
.ez-faq summary::-webkit-details-marker { display: none; }
.ez-faq summary svg { width: 20px; height: 20px; flex: none; transition: transform .2s; color: var(--ez-tinta-3); }
.ez-faq details[open] summary svg { transform: rotate(45deg); }
.ez-faq details > div { padding: 0 22px 22px; color: var(--ez-tinta-2); display: grid; gap: 10px; }

/* Cierre y pie */
.ez-cierre { text-align: center; padding-block: 96px; }
.ez-cierre h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -0.04em; }
.ez-cierre p { margin: 16px auto 32px; color: var(--ez-banda-tinta-2); font-size: 18px; max-width: 34em; }
.ez-cierre .ez-hero-acciones { justify-content: center; margin-top: 0; }
.ez-pie { border-top: 1px solid var(--ez-borde); padding-block: 48px 36px; font-size: 14.5px; color: var(--ez-tinta-3); }
.ez-pie-grilla { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.ez-pie h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ez-tinta); margin-bottom: 12px; }
.ez-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ez-pie a { color: var(--ez-tinta-2); text-decoration: none; }
.ez-pie a:hover { color: var(--ez-enlace); text-decoration: underline; }
.ez-pie .ez-marca { color: var(--ez-tinta); }
.ez-pie-texto { margin-top: 12px; max-width: 26em; }
.ez-pie-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--ez-borde); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { .ez-pie-grilla { grid-template-columns: 1fr 1fr; } .ez-pie-grilla > :first-child { grid-column: 1 / -1; } }

/* ── Páginas de trámite (registro, pago, ingreso) ────────────────── */
.ez-tramite { min-height: 100vh; display: flex; flex-direction: column; }
.ez-tramite main { flex: 1; padding-block: 48px 72px; min-width: 0; }
/* min-width: 0 porque el body es flex en columna: sin esto el main se
   estira hasta el ancho mínimo de su contenido (la tabla del maestro,
   720px) y a 390px aparece el scroll horizontal de toda la página. */
.ez-tramite-grilla { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
@media (max-width: 960px) { .ez-tramite-grilla { grid-template-columns: minmax(0, 1fr); } }
.ez-tramite-cabeza h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; }
.ez-tramite-cabeza p { margin-top: 10px; color: var(--ez-tinta-2); font-size: 17px; }
.ez-caja {
  background: var(--ez-superficie); border: 1px solid var(--ez-borde); border-radius: 18px;
  padding: 32px; box-shadow: var(--ez-sombra);
}
.ez-caja + .ez-caja { margin-top: 20px; }
.ez-caja h2 { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
.ez-caja-sub { margin-top: 4px; color: var(--ez-tinta-3); font-size: 15px; }
@media (max-width: 520px) { .ez-caja { padding: 22px 18px; border-radius: 16px; } }

.ez-lateral { position: sticky; top: 92px; display: grid; gap: 16px; }
.ez-lateral-caja { border: 1px solid var(--ez-borde); border-radius: 16px; padding: 24px; background: var(--ez-superficie-2); }
.ez-lateral-caja h2 { font-size: 16px; font-weight: 750; }
.ez-linea-tiempo { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 18px; }
.ez-linea-tiempo li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.ez-linea-tiempo b {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13.5px;
  background: var(--ez-superficie); border: 1px solid var(--ez-borde-fuerte); color: var(--ez-tinta-2);
}
.ez-linea-tiempo li.ez-hecho b { background: var(--ez-primario); border-color: var(--ez-primario); color: var(--ez-primario-texto); }
.ez-linea-tiempo li.ez-ahora b { border: 2px solid var(--ez-primario); color: var(--ez-primario); }
.ez-linea-tiempo strong { display: block; font-size: 15px; }
.ez-linea-tiempo span { font-size: 14px; color: var(--ez-tinta-3); }
@media (max-width: 960px) { .ez-lateral { position: static; } }

/* ── Formularios ─────────────────────────────────────────────────── */
.ez-form { display: grid; gap: 20px; margin-top: 26px; }
.ez-form-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .ez-form-dos { grid-template-columns: 1fr; } }
.ez-campo { display: grid; gap: 7px; min-width: 0; }
.ez-campo > label, .ez-rotulo { font-weight: 620; font-size: 14.5px; }
.ez-campo > label small, .ez-rotulo small { font-weight: 500; color: var(--ez-tinta-3); }
.ez-entrada {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 11px;
  border: 1px solid var(--ez-borde-fuerte); background: var(--ez-superficie); color: var(--ez-tinta);
  font-size: 16px; /* 16px: menos que eso y el iPhone hace zoom al enfocar */
  transition: border-color .15s, box-shadow .15s;
}
.ez-entrada::placeholder { color: var(--ez-tinta-3); opacity: .8; }
.ez-entrada:hover { border-color: var(--ez-tinta-3); }
.ez-entrada:focus { outline: none; border-color: var(--ez-primario); box-shadow: 0 0 0 4px rgb(16 185 129 / .18); }
.ez-entrada[aria-invalid="true"] { border-color: var(--ez-peligro); }
.ez-entrada[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgb(180 35 24 / .15); }
.ez-ayuda-campo { font-size: 13.5px; color: var(--ez-tinta-3); }
.ez-error-campo {
  font-size: 13.5px; color: var(--ez-peligro); font-weight: 550; display: flex; gap: 6px; align-items: flex-start;
}
.ez-error-campo:empty { display: none; }

/* El campo del código con la dirección delante */
.ez-prefijado {
  display: flex; align-items: stretch; border: 1px solid var(--ez-borde-fuerte); border-radius: 11px;
  background: var(--ez-superficie); overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.ez-prefijado:focus-within { border-color: var(--ez-primario); box-shadow: 0 0 0 4px rgb(16 185 129 / .18); }
.ez-prefijado.ez-mal { border-color: var(--ez-peligro); }
.ez-prefijado span {
  display: flex; align-items: center; padding: 0 4px 0 14px; color: var(--ez-tinta-3); font-size: 15px;
  white-space: nowrap; background: var(--ez-superficie-2); border-right: 1px solid var(--ez-borde);
  padding-right: 10px;
}
.ez-prefijado input { border: 0; min-height: 46px; flex: 1; min-width: 0; padding: 10px 12px; background: transparent; font-size: 16px; font-family: var(--ez-mono); }
.ez-prefijado input:focus { outline: none; }
.ez-prefijado output { display: flex; align-items: center; padding-right: 12px; }
.ez-prefijado output svg { width: 20px; height: 20px; }
.ez-prefijado .ez-icono-libre { color: var(--ez-ok); }
.ez-prefijado .ez-icono-ocupado { color: var(--ez-peligro); }
.ez-slug-estado { font-size: 13.5px; font-weight: 600; min-height: 1.4em; display: flex; gap: 6px; align-items: center; }
.ez-slug-estado.ez-libre { color: var(--ez-ok); }
.ez-slug-estado.ez-ocupado { color: var(--ez-peligro); }
.ez-slug-estado.ez-mirando { color: var(--ez-tinta-3); }
.ez-slug-estado svg { width: 16px; height: 16px; }
@media (max-width: 420px) { .ez-prefijado span { font-size: 13px; padding-left: 10px; } }

.ez-con-ojo { position: relative; }
.ez-con-ojo .ez-entrada { padding-right: 52px; }
.ez-ver-clave {
  position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ez-tinta-3); cursor: pointer; display: grid; place-items: center;
}
.ez-ver-clave:hover { background: var(--ez-superficie-2); color: var(--ez-tinta); }
.ez-ver-clave svg { width: 20px; height: 20px; }

.ez-fuerza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ez-fuerza i { height: 5px; border-radius: 3px; background: var(--ez-borde); transition: background-color .2s; }
.ez-fuerza[data-nivel="1"] i:nth-child(-n+1) { background: var(--ez-peligro); }
.ez-fuerza[data-nivel="2"] i:nth-child(-n+2) { background: #f79009; }
.ez-fuerza[data-nivel="3"] i:nth-child(-n+3) { background: var(--ez-acento); }
.ez-fuerza[data-nivel="4"] i { background: var(--ez-primario); }
.ez-fuerza-texto { font-size: 13.5px; color: var(--ez-tinta-3); }

/* Aviso de arriba del formulario (error general o éxito) */
.ez-aviso {
  border-radius: 12px; padding: 14px 16px; font-size: 15px; display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid transparent;
}
.ez-aviso svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.ez-aviso-error { background: var(--ez-peligro-suave); color: var(--ez-peligro); border-color: color-mix(in srgb, var(--ez-peligro) 25%, transparent); }
.ez-aviso-ok { background: var(--ez-ok-suave); color: var(--ez-ok); border-color: color-mix(in srgb, var(--ez-ok) 25%, transparent); }
.ez-aviso-info { background: var(--ez-superficie-2); color: var(--ez-tinta-2); border-color: var(--ez-borde); }
.ez-aviso-alerta { background: var(--ez-aviso-suave); color: var(--ez-aviso); border-color: color-mix(in srgb, var(--ez-aviso) 25%, transparent); }
.ez-aviso a { color: inherit; font-weight: 650; }

.ez-letra-chica { font-size: 13.5px; color: var(--ez-tinta-3); }
.ez-centro { text-align: center; }
.ez-separador {
  display: flex; align-items: center; gap: 14px; color: var(--ez-tinta-3); font-size: 13.5px; margin-block: 26px;
}
.ez-separador::before, .ez-separador::after { content: ""; flex: 1; height: 1px; background: var(--ez-borde); }

/* ── Pantalla de pago ────────────────────────────────────────────── */
.ez-estado-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px;
  font-size: 13.5px; font-weight: 650;
}
.ez-estado-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ez-estado-pendiente_pago { background: var(--ez-aviso-suave); color: var(--ez-aviso); }
.ez-estado-activa { background: var(--ez-ok-suave); color: var(--ez-ok); }
.ez-estado-suspendida { background: var(--ez-peligro-suave); color: var(--ez-peligro); }
.ez-estado-baja { background: var(--ez-superficie-2); color: var(--ez-tinta-3); }
.ez-importe { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ez-importe strong { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.ez-importe span { color: var(--ez-tinta-3); font-size: 15px; }
.ez-datos-banco { margin-top: 24px; border: 1px solid var(--ez-borde); border-radius: 14px; overflow: hidden; }
.ez-dato-banco {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ez-superficie);
}
.ez-dato-banco + .ez-dato-banco { border-top: 1px solid var(--ez-borde); }
.ez-dato-banco div { flex: 1; min-width: 0; }
.ez-dato-banco small { display: block; font-size: 12.5px; color: var(--ez-tinta-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ez-dato-banco code { font-family: var(--ez-mono); font-size: 16px; font-weight: 600; word-break: break-all; }
.ez-dato-banco span.ez-valor { font-size: 16px; font-weight: 600; }
.ez-copiar { flex: none; }
.ez-copiar.ez-copiado { background: var(--ez-ok-suave); color: var(--ez-ok); border-color: transparent; }

.ez-soltar {
  margin-top: 18px; border: 2px dashed var(--ez-borde-fuerte); border-radius: 16px; padding: 30px 20px;
  text-align: center; background: var(--ez-superficie-2); cursor: pointer; transition: border-color .15s, background-color .15s;
  display: grid; justify-items: center; gap: 8px;
}
.ez-soltar:hover, .ez-soltar.ez-encima { border-color: var(--ez-primario); background: var(--ez-acento-suave); }
.ez-soltar:focus-within { box-shadow: var(--ez-foco); }
.ez-soltar svg { width: 34px; height: 34px; color: var(--ez-primario); }
.ez-soltar strong { font-size: 16px; }
.ez-soltar span { font-size: 14px; color: var(--ez-tinta-3); }
.ez-archivo-elegido {
  margin-top: 14px; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--ez-borde); border-radius: 12px; background: var(--ez-superficie);
}
.ez-archivo-elegido svg { width: 22px; height: 22px; color: var(--ez-primario); flex: none; }
.ez-archivo-elegido div { flex: 1; min-width: 0; }
.ez-archivo-elegido strong { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-archivo-elegido span { font-size: 13px; color: var(--ez-tinta-3); }
.ez-refresco { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ez-tinta-3); margin-top: 18px; }
.ez-refresco i { width: 8px; height: 8px; border-radius: 50%; background: var(--ez-acento); animation: ez-late 1.6s ease-in-out infinite; }
@keyframes ez-late { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ez-refresco i { animation: none; } }

.ez-listo { text-align: center; padding: 16px 0 4px; display: grid; justify-items: center; gap: 12px; }
.ez-listo-icono {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ez-ok-suave); color: var(--ez-ok);
}
.ez-listo-icono svg { width: 34px; height: 34px; }
.ez-listo h2 { font-size: 26px; }
.ez-listo p { color: var(--ez-tinta-2); max-width: 30em; }

/* ── Centro de ayuda ─────────────────────────────────────────────── */
.ez-ayuda-hero { padding-block: 56px 64px; }
.ez-ayuda-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.035em; }
.ez-ayuda-hero p { margin-top: 10px; color: var(--ez-banda-tinta-2); font-size: 17.5px; }
.ez-buscador { margin-top: 26px; position: relative; max-width: 640px; }
.ez-buscador svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #6b8a82; pointer-events: none; }
.ez-buscador input {
  width: 100%; min-height: 56px; border-radius: 14px; border: 1px solid rgb(255 255 255 / .14);
  background: rgb(255 255 255 / .96); color: #0b1f1c; padding: 0 18px 0 48px; font-size: 16.5px;
}
.ez-buscador input:focus { outline: none; box-shadow: 0 0 0 4px rgb(16 185 129 / .45); }
.ez-colecciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: -32px; position: relative; }
.ez-coleccion {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 16px;
  background: var(--ez-superficie); border: 1px solid var(--ez-borde); box-shadow: var(--ez-sombra);
  text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.ez-coleccion:hover { border-color: var(--ez-primario); transform: translateY(-2px); text-decoration: none; }
.ez-coleccion .ez-tarjeta-icono { margin: 0; flex: none; }
.ez-coleccion h2 { font-size: 17px; font-weight: 720; }
.ez-coleccion p { margin-top: 4px; font-size: 14.5px; color: var(--ez-tinta-2); }
.ez-coleccion small { display: block; margin-top: 8px; font-size: 13px; color: var(--ez-tinta-3); }
@media (max-width: 760px) { .ez-colecciones { grid-template-columns: 1fr; } }

.ez-ayuda-cuerpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; padding-block: 56px 80px; }
.ez-indice { position: sticky; top: 92px; align-self: start; }
.ez-indice h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ez-tinta-3); margin-bottom: 10px; }
.ez-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: ez-ind; }
.ez-indice a {
  display: flex; gap: 10px; padding: 8px 10px; border-radius: 9px; text-decoration: none;
  color: var(--ez-tinta-2); font-size: 14.5px; font-weight: 550;
}
.ez-indice a::before { counter-increment: ez-ind; content: counter(ez-ind); color: var(--ez-tinta-3); font-variant-numeric: tabular-nums; min-width: 1.2em; }
.ez-indice a:hover { background: var(--ez-superficie-2); color: var(--ez-tinta); }
.ez-indice a.ez-activo { background: var(--ez-acento-suave); color: var(--ez-primario); }
@media (max-width: 900px) {
  .ez-ayuda-cuerpo { grid-template-columns: 1fr; gap: 24px; }
  .ez-indice { position: static; }
}
.ez-articulo {
  background: var(--ez-superficie); border: 1px solid var(--ez-borde); border-radius: 18px; padding: 36px;
  scroll-margin-top: 92px;
}
.ez-articulo + .ez-articulo { margin-top: 20px; }
.ez-articulo-meta { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ez-tinta-3); font-weight: 600; }
.ez-articulo-meta b {
  background: var(--ez-acento-suave); color: var(--ez-primario); padding: 2px 10px; border-radius: 999px;
}
.ez-articulo h2 { margin-top: 12px; font-size: 26px; font-weight: 780; }
.ez-articulo > p.ez-resumen { margin-top: 8px; color: var(--ez-tinta-2); font-size: 17px; }
.ez-articulo h3 { margin-top: 26px; font-size: 17px; font-weight: 720; }
.ez-articulo p, .ez-articulo li { color: var(--ez-tinta-2); }
.ez-articulo p + p { margin-top: 10px; }
.ez-articulo ol, .ez-articulo ul { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.ez-articulo .ez-aviso { margin-top: 18px; }
.ez-articulo kbd, .ez-articulo code {
  font-family: var(--ez-mono); font-size: .9em; background: var(--ez-superficie-2);
  border: 1px solid var(--ez-borde); padding: 1px 6px; border-radius: 6px; color: var(--ez-tinta);
}
.ez-articulo-pie {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ez-borde);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14.5px;
}
@media (max-width: 520px) { .ez-articulo { padding: 24px 18px; } }
.ez-sin-resultados { padding: 28px; text-align: center; color: var(--ez-tinta-3); }

/* ── Panel maestro ───────────────────────────────────────────────── */
.ez-maestro main { padding-block: 32px 64px; }
.ez-maestro-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ez-maestro-cabeza h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.ez-pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--ez-borde); margin-top: 24px; overflow-x: auto; }
.ez-pestana {
  border: 0; background: transparent; cursor: pointer; padding: 12px 16px; font-weight: 620; font-size: 15px;
  color: var(--ez-tinta-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  display: inline-flex; gap: 8px; align-items: center; border-radius: 8px 8px 0 0;
}
.ez-pestana:hover { color: var(--ez-tinta); }
.ez-pestana[aria-selected="true"] { color: var(--ez-primario); border-bottom-color: var(--ez-primario); }
.ez-contador {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 12.5px;
  display: inline-grid; place-items: center; background: var(--ez-superficie-2); color: var(--ez-tinta-2);
}
.ez-pestana[aria-selected="true"] .ez-contador { background: var(--ez-acento-suave); color: var(--ez-primario); }
.ez-resumen-maestro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.ez-resumen-maestro div { background: var(--ez-superficie); border: 1px solid var(--ez-borde); border-radius: 14px; padding: 16px 18px; }
.ez-resumen-maestro small { font-size: 13px; color: var(--ez-tinta-3); font-weight: 600; }
.ez-resumen-maestro strong { display: block; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; margin-top: 2px; }
@media (max-width: 760px) { .ez-resumen-maestro { grid-template-columns: repeat(2, 1fr); } }
.ez-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; align-items: center; }
.ez-filtros .ez-entrada { min-height: 42px; max-width: 320px; }
.ez-filtros select.ez-entrada { max-width: 200px; }
.ez-tabla-caja { margin-top: 16px; background: var(--ez-superficie); border: 1px solid var(--ez-borde); border-radius: 14px; overflow-x: auto; }
.ez-tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 720px; }
.ez-tabla th {
  text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ez-tinta-3);
  font-weight: 650; padding: 12px 16px; background: var(--ez-superficie-2); border-bottom: 1px solid var(--ez-borde);
}
.ez-tabla td { padding: 14px 16px; border-bottom: 1px solid var(--ez-borde); vertical-align: middle; }
.ez-tabla tr:last-child td { border-bottom: 0; }
.ez-tabla td strong { display: block; }
.ez-tabla td small { color: var(--ez-tinta-3); font-size: 13px; }
.ez-tabla td code { font-family: var(--ez-mono); font-size: 13.5px; }
.ez-tabla .ez-num { text-align: right; font-variant-numeric: tabular-nums; }
.ez-acciones-fila { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ez-tabla-vacia { padding: 40px 16px; text-align: center; color: var(--ez-tinta-3); }

.ez-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
  background: var(--ez-tinta); color: var(--ez-fondo); padding: 12px 18px; border-radius: 12px;
  font-weight: 600; font-size: 15px; box-shadow: var(--ez-sombra-alta); max-width: calc(100% - 32px);
}
.ez-toast.ez-toast-error { background: var(--ez-peligro); color: var(--ez-peligro-texto); }

/* Cartel de demo: que nadie confunda la simulación con el sistema. */
.ez-cartel-demo {
  background: #fef3c7; color: #78350f; text-align: center; font-size: 13.5px; font-weight: 600; padding: 7px 16px;
  border-bottom: 1px solid #fcd34d;
}

/* ── Utilidades chicas de las pantallas de trámite ───────────────── */
.ez-mt-12 { margin-top: 12px; }
.ez-mt-18 { margin-top: 18px; }
.ez-mt-24 { margin-top: 24px; }
.ez-titulo-caja { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; margin-top: 10px; }
.ez-titulo-caja:focus { outline: none; }
.ez-acciones-caja { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.ez-caja h2 .ez-num-paso {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; margin-right: 6px;
  background: var(--ez-acento-suave); color: var(--ez-primario); font-size: 14px; vertical-align: 2px;
}
.ez-lateral-caja code { font-family: var(--ez-mono); font-size: 14px; word-break: break-all; color: var(--ez-tinta); }
.ez-listo code { font-family: var(--ez-mono); }
.ez-contenedor-chico { max-width: 520px; }
.ez-contenedor-chico .ez-tramite-cabeza { margin-bottom: 4px; }
.ez-plegable { margin-top: 16px; padding-block: 18px; }
.ez-plegable summary {
  cursor: pointer; font-weight: 650; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.ez-plegable summary::-webkit-details-marker { display: none; }
.ez-plegable summary::after { content: "+"; font-size: 22px; color: var(--ez-tinta-3); line-height: 1; }
.ez-plegable[open] summary::after { content: "−"; }
.ez-plegable .ez-form { margin-top: 18px; }
.ez-marca-pago { color: var(--ez-aviso); font-weight: 600; }
/* Los rótulos para lector de pantalla van en position:absolute; sin un
   ancestro posicionado quedaban colgados del documento en su lugar dentro
   de la tabla (720px) y a 390px empujaban el scroll horizontal. */
.ez-tabla-caja { position: relative; }
/* El maestro no tiene menú: sin esto los botones quedaban pegados a la marca. */
.ez-maestro .ez-barra-acciones { margin-left: auto; align-items: center; }
.ez-maestro .ez-tabla td:nth-child(4) small { white-space: nowrap; }
.ez-marca-pago { display: block; margin-top: 4px; }
.ez-importe.ez-importe-largo strong { font-size: 28px; letter-spacing: -0.02em; }