/* ═══════════════════════════════════════════════════════════════════
   Piel 2026 para las páginas de producto (cobros.html, ventas.html y
   las guías): el mismo lenguaje que la portada nueva (17-oct, molde
   awam.lat). Se carga DESPUÉS de landing.css y portada.css; no cambia
   el HTML de las secciones, sólo cómo se ven.

   Lo que cambia: letra Host Grotesk, títulos grandes y finos, un solo
   fondo cálido de punta a punta, sin etiquetas con puntito arriba de
   los títulos, sin cuadrícula ni resplandores violeta, botones con
   esquina de 10 px. Lo que NO cambia: las tarjetas de los planes, que
   siguen con su letra (Plus Jakarta) y su forma — Seba, 17-oct:
   "prefiero como ya lo tenemos".
   ═══════════════════════════════════════════════════════════════════ */

@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 {
  --fondo: #fbfaf8;
  --fondo-2: #f3f2ee;
  --fondo-3: #ebe9e4;
  --borde: #e7e5e0;
  --borde-suave: #efede8;
  --tinta: #1c1b19;
  --tinta-2: #57564f;
  --tinta-3: #8b8a83;
  --acento-claro: #5b4ce6;
  --acento-glow: rgba(91, 76, 230, .22);
  --radio: 10px;
  --radio-grande: 20px;
  --ancho: 1240px;
  --letra: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --titulos: var(--letra);
  --numeros: var(--letra);
  --sombra-suave: 0 1px 2px rgba(28, 27, 25, .05), 0 12px 32px -18px rgba(28, 27, 25, .16);
}
body.lz { background: var(--fondo); font-size: 17px; }
.lz-contenedor { padding: 0 32px; }

/* ── Títulos: grandes, finos, apretados ──────────────────────────── */
.lz-cabeza h2, .lz-numeros-banda h2, .lz-cierre h2, .lz-varias h2 {
  font-weight: 420; line-height: 1.02; letter-spacing: -.045em; font-size: clamp(38px, 5vw, 64px); text-wrap: balance;
}
.lz-cabeza .lz-h2-chico, .lz-varias h2 { font-weight: 420; letter-spacing: -.04em; font-size: clamp(32px, 3.6vw, 46px); }
.lz-cabeza p { font-size: 18px; line-height: 1.5; max-width: 600px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.lz-tarjeta h3, .lz-seguridad h3, .lz-paso h3, .lz-rubro h3, .lz-ad-lado h3 { font-weight: 560; letter-spacing: -.02em; }
.lz-faq summary { font-weight: 450; letter-spacing: -.02em; }

.lzv-tienda-texto h2 { font-weight: 420; line-height: 1.02; letter-spacing: -.045em; font-size: clamp(36px, 4vw, 54px); text-wrap: balance; }

/* Ezra Facturas trae copia de inicio.css: su título de sección y la cinta
   de tipos de comprobante, con la misma piel. */
.in-h2 { font-weight: 420 !important; line-height: 1.02; letter-spacing: -.045em !important; text-wrap: balance; }
.in-h2 em { font-style: normal; color: var(--acento); }
.lz-bancos { background: transparent; border: 0; }
.lz-bancos p { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--tinta-3); }

/* Sin la etiqueta con puntito arriba de cada título. */
.lz-etiqueta { display: none; }

/* ── Botones ─────────────────────────────────────────────────────── */
.lz-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);
}
.lz-boton:hover { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .24), 0 1px 2px rgba(42, 30, 160, .25); }
.lz-boton-grande { padding: 16px 28px; font-size: 17px; min-width: 0; border-radius: 12px; }

/* ── Un solo fondo, sin cuadrícula ni resplandores ───────────────── */
.lz-seccion-gris { background: transparent; border: 0; }
.lz-bento::before, .lz-hero::before, .lz-resplandor { display: none; }
.lz-tarjeta {
  background: #fff; background-image: none; border-color: var(--borde); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(28, 27, 25, .04);
}
.lz-tarjeta:hover { border-color: var(--borde-2, #dad7d0); box-shadow: 0 1px 2px rgba(28, 27, 25, .04), 0 18px 40px -28px rgba(28, 27, 25, .3); }
.lz-numeros-banda { background: transparent; border-top: 0; }
.lz-numeros strong { font-weight: 420; letter-spacing: -.045em; font-size: 56px; }
.lz-cierre { background: var(--fondo-2); }
.lz-cierre h2 { max-width: 800px; margin: 0 auto; }

/* ── Las tarjetas de los planes quedan como estaban ──────────────── */
.lz-planes, .lz-planes-notas, .lz-planes-tabla, #planes details, .lz-pestanas {
  --letra: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --titulos: var(--letra);
  --numeros: var(--letra);
  font-family: var(--letra);
}

/* ── Pie ─────────────────────────────────────────────────────────── */
.lz-pie { background: var(--fondo); border-top: 1px solid var(--borde); font-size: 14.5px; }
.lz-pie-grilla a:not(.lz-marca) { color: var(--tinta-2); font-size: 14.5px; }
.lz-pie h4 { font-size: 14px; font-weight: 600; }

/* ── Tu panel de verdad (cobros.html #panel) ─────────────────────── */
.pv-escena {
  position: relative; margin-top: 8px; border-radius: 28px; overflow: hidden; height: 640px;
  background: var(--fondo-3) center / cover no-repeat;
}
.pv-escena::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251, 250, 248, .1), rgba(28, 27, 25, .12)); }
.pv-compu {
  position: absolute; top: 64px; left: 7%; right: 7%; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(28, 27, 25, .08), 0 40px 80px -30px rgba(0, 0, 0, .5);
}
.pv-compu-barra { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #f3f2ee; border-bottom: 1px solid #e7e5e0; }
.pv-compu-barra i { width: 10px; height: 10px; border-radius: 50%; background: #dad7d0; }
.pv-compu-barra span { margin: 0 auto; padding: 3px 16px; border-radius: 6px; background: #fff; font-size: 12px; color: #8b8a83; }
.pv-compu img { width: 100%; height: auto; display: block; }
.pv-cel {
  position: absolute; right: 4%; bottom: -70px; width: 230px; border-radius: 36px; padding: 8px; background: #121212;
  box-shadow: inset 0 0 0 1.5px #3a3a3c, 0 30px 60px -24px rgba(0, 0, 0, .55);
}
.pv-cel img { border-radius: 29px; width: 100%; height: auto; display: block; }
.pv-notas { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pv-notas h3 { font-size: 19px; font-weight: 560; letter-spacing: -.02em; }
.pv-notas p { margin-top: 6px; color: var(--tinta-2); font-size: 15.5px; line-height: 1.5; }

/* ── Celular ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.lz { font-size: 16px; }
  .lz-contenedor { padding: 0 16px; }
  .lz-seccion { padding: 88px 0; }
  .lz-cabeza { margin-bottom: 40px; }
  .lz-numeros strong { font-size: 44px; }
  .pv-escena { height: 520px; border-radius: 20px; }
  .pv-compu { top: 28px; left: 16px; right: -120px; }
  .pv-cel { right: 16px; width: 170px; bottom: -40px; border-radius: 28px; }
  .pv-cel img { border-radius: 22px; }
  .pv-notas { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ── Las guías (notas.css) ───────────────────────────────────────── */
.nt-cabeza::before { display: none; }
.nt-cabeza h1 { font-weight: 420; letter-spacing: -.045em; line-height: 1.02; }
.nt-cuerpo h2, .nt-otras h2 { font-weight: 480; letter-spacing: -.035em; }
.nt-producto { background: #f3f2ee; color: var(--tinta); border: 1px solid var(--borde); }
.nt-cuerpo .nt-producto h2, .nt-cuerpo .nt-producto strong { color: var(--tinta); }
.nt-cuerpo .nt-producto p, .nt-cuerpo .nt-producto li { color: var(--tinta-2); }
.nt-cuerpo .nt-producto li::marker { color: var(--acento); }