/* ═══════════════════════════════════════════════════════════════════
   Piel 2026 de las páginas de cuenta (registro, ingresar, olvidé la
   clave, confirmar, nueva clave, pago, ayuda): el mismo lenguaje que la
   portada de botezra.com (17-oct). Se carga DESPUÉS de ezra.css y
   tema.css; no cambia el HTML ni lo que hace cada formulario.

   La vitrina de la izquierda deja el violeta oscuro con cuadrícula y los
   íconos en cuadradito: fondo crema, título grande y fino, beneficios
   como renglones.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Host Grotesk";
  src: url("../fuentes/host-grotesk.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ez-fondo: #fbfaf8;
  --ez-tinta: #1c1b19;
  --ez-borde: #e7e5e0;
  --ez-borde-fuerte: #dad7d0;
  --ez-radio: 20px;
  --ez-radio-chico: 10px;
  --ez-titulos: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ez-letra: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ez-sombra: 0 1px 2px rgba(28, 27, 25, .05), 0 12px 32px -18px rgba(28, 27, 25, .16);
  --ez-sombra-alta: 0 1px 2px rgba(28, 27, 25, .05), 0 24px 48px -24px rgba(28, 27, 25, .24);
}
body { background: var(--ez-fondo); -webkit-font-smoothing: antialiased; }
body.ez-dividido { background: var(--ez-fondo); }

/* ── La vitrina: crema, sin cuadrícula ni resplandores ───────────── */
.ez-vitrina { background: #f3f2ee; color: var(--ez-tinta); border-right: 1px solid var(--ez-borde); }
.ez-vitrina::before { display: none; }
.ez-vitrina .ez-marca { color: var(--ez-tinta); }
.ez-vitrina .ez-marca small { color: #57564f; font-weight: 420; }
.ez-vitrina .ez-marca:focus-visible { box-shadow: 0 0 0 3px #5b4ce6; }
.ez-vitrina-sobre { display: none; }
.ez-vitrina-titulo {
  margin-top: 0; color: var(--ez-tinta); font-weight: 420; letter-spacing: -.045em; line-height: 1.02;
  font-size: clamp(34px, 3.6vw, 52px);
}
.ez-vitrina-bajada { color: #57564f; font-size: 17px; }
.ez-beneficios { gap: 0; margin-top: 30px; border-top: 1px solid var(--ez-borde-fuerte); }
.ez-beneficios li { display: block; padding: 14px 0; border-bottom: 1px solid var(--ez-borde-fuerte); }
.ez-beneficio-icono { display: none; }
.ez-beneficios b { color: var(--ez-tinta); font-weight: 560; letter-spacing: -.01em; }
.ez-beneficios li > div > span { color: #57564f; }
.ez-vitrina-pie, .ez-vitrina-pie a { color: #8b8a83; }
.ez-maqueta-cobro, .ez-maqueta-burbuja { box-shadow: 0 1px 2px rgba(28, 27, 25, .05), 0 18px 36px -22px rgba(28, 27, 25, .3); }

/* ── Títulos y tarjeta del formulario ────────────────────────────── */
h1, h2, .ez-tarjeta-cabeza h1, .ez-tarjeta-cabeza h2 { letter-spacing: -.035em; }
.ez-tarjeta-cabeza h1, .ez-tarjeta-cabeza h2, .ez-titulo-caja h1 { font-weight: 480; }
.ez-tarjeta { border-color: var(--ez-borde); border-radius: 20px; box-shadow: var(--ez-sombra); }

/* ── Botones: esquina de 10 px y el brillo de arriba ─────────────── */
.ez-boton {
  border-radius: 10px; font-weight: 550; letter-spacing: -.005em;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .24), 0 1px 2px rgba(42, 30, 160, .25);
}
.ez-boton-fantasma, .ez-boton-texto { box-shadow: none; }
.ez-entrada, .ez-campo input, .ez-campo select, .ez-campo textarea { border-radius: 10px; }

/* ── Lo oscuro pasa a crema: la barra, la franja de Ayuda ─────────── */
:root {
  --ez-banda: #f3f2ee;
  --ez-banda-tinta: #1c1b19;
  --ez-banda-tinta-2: #57564f;
}
.ez-dividido-cuerpo { background: var(--ez-fondo); }
.ez-barra, .ez-barra-oscura { border-bottom-color: var(--ez-borde); }
.ez-barra .ez-menu a:hover { color: var(--ez-tinta); background: rgba(28, 27, 25, .05); }
.ez-barra .ez-boton-fantasma { color: var(--ez-tinta); border-color: var(--ez-borde-fuerte); }
.ez-barra .ez-boton-fantasma:hover { background: rgba(28, 27, 25, .05); }
.ez-barra .ez-menu-boton { border-color: var(--ez-borde-fuerte); }
.ez-banda { border-bottom: 1px solid var(--ez-borde); }
.ez-banda::before, .ez-banda::after, .ez-resplandor, .ez-resplandor::before { background-image: none !important; background: none; }
.ez-banda h1 { font-weight: 420; letter-spacing: -.045em; line-height: 1.02; }
.ez-banda a:not(.ez-boton) { color: #5b4ce6; }
.ez-etiqueta { background: transparent; color: #57564f; border-color: var(--ez-borde-fuerte); }
.ez-etiqueta i { display: none; }

/* Las tarjetas de Ayuda: el ícono sin cuadradito de color. */
.ez-tarjeta-icono { background: none !important; color: var(--ez-tinta) !important; box-shadow: none !important; width: auto; height: auto; }
.ez-indice h2, .ez-pie h4 { text-transform: none; letter-spacing: 0; }

/* ── El costado: el panel de verdad sobre la foto de un local (18-oct) ──
   Seba: "algo de azul en el costado no se entiende qué es" — la tarjetita
   dibujada con barras ("Cierre de hoy"). En su lugar, las capturas reales
   del panel (compu y celular), como "Así se ve tu día" de cobros.html. */
.ez-maqueta { display: none !important; }
.ez-vitrina { gap: 22px; }
.ez-vitrina-centro { max-width: none; justify-content: flex-start; padding-top: clamp(4px, 3vh, 40px); min-height: 0; }
.ez-vitrina-titulo, .ez-vitrina-bajada, .ez-beneficios { max-width: 520px; }
.ez-beneficios { margin-top: 22px; }
.ez-beneficios li { padding: 11px 0; }
.ez-escena {
  position: relative; flex: 1 1 auto; min-height: 250px; margin: 26px 0 0; border-radius: 22px; overflow: hidden;
  background: #d9d5cc url(../fotos/fondo-vitrina.webp) center / cover no-repeat;
}
.ez-escena::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 27, 25, .04), rgba(28, 27, 25, .22)); }
.ez-escena-compu {
  position: absolute; top: 26px; left: 6%; width: 122%; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(28, 27, 25, .08), 0 30px 60px -24px rgba(0, 0, 0, .5);
}
.ez-escena-barra { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; background: #f3f2ee; border-bottom: 1px solid #e7e5e0; }
.ez-escena-barra i { width: 8px; height: 8px; border-radius: 50%; background: #dad7d0; }
.ez-escena-barra span { margin-left: 12px; padding: 2px 12px; border-radius: 5px; background: #fff; font-size: 11px; color: #8b8a83; white-space: nowrap; }
.ez-escena-compu img { display: block; width: 100%; height: auto; }
.ez-escena-cel {
  position: absolute; right: 5%; top: 64px; width: 30%; max-width: 200px; padding: 6px; border-radius: 30px; background: #121212;
  box-shadow: inset 0 0 0 1.5px #3a3a3c, 0 26px 50px -18px rgba(0, 0, 0, .6);
}
.ez-escena-cel img { display: block; width: 100%; height: auto; border-radius: 24px; }
/* Pantallas bajas: primero se van los renglones, la escena queda. */
@media (max-height: 800px) { .ez-beneficios { display: none; } }
/* Celular y tablet: la franja de arriba queda como estaba, sin escena. */
@media (max-width: 960px) { .ez-escena { display: none; } }