/* Ezra Ventas (ventas.html): lo propio de su landing. El resto sale de
   landing.css, igual que Ezra Cobros. */
.lzv-acciones { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lzv-link { color: var(--acento); font-weight: 700; text-decoration: none; }
.lzv-link:hover { text-decoration: underline; }

/* El video vertical, dentro de un teléfono. */
.lzv-video-caja { position: relative; display: grid; place-items: center; min-height: 560px; }
.lzv-tel { position: relative; width: 290px; aspect-ratio: 9 / 16; border-radius: 38px; padding: 10px; background: #16132d;
  box-shadow: 0 30px 60px -20px rgba(22,19,45,.45), 0 0 0 1px rgba(255,255,255,.06) inset; }
.lzv-video { width: 100%; height: 100%; object-fit: cover; border-radius: 29px; background: #1f1b4d; display: block; }
@media (max-width: 900px) { .lzv-video-caja { min-height: 0; padding: 12px 0; } .lzv-tel { width: 250px; } }

/* La tienda: texto y las cuatro plantillas dibujadas. */
.lzv-tienda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .lzv-tienda { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.lzv-tienda-texto h2 { font-family: var(--titulos); margin: 12px 0 14px; font-size: clamp(30px, 4vw, 48px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--tinta); }
.lzv-tienda-texto p { color: var(--tinta-2); line-height: 1.55; font-size: 17px; }
.lzv-rasgos { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.lzv-rasgos li { padding-left: 26px; position: relative; font-weight: 600; }
.lzv-rasgos li::before { content: '✓'; position: absolute; left: 0; color: var(--acento); font-weight: 800; }

/* Los planes (27-sep): cuatro tarjetas. */
.lzv-planes-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lzv-planes-cuatro .lz-plan { padding: 28px 22px; }
.lzv-planes-cuatro .lz-precio strong { font-size: 44px; }
/* Los planes como los de Ezra Facturas (Seba, 1-oct: "hacelo como Ezra
   Facturas así se entiende"): cada tarjeta se explica sola, lo clave en
   negrita, y la tabla completa plegada abajo. */
.lzv-planes-cuatro .lz-plan { padding: 28px 22px; gap: 12px; scroll-margin-top: 90px; }
.lzv-planes-cuatro .lz-plan h3 { font-size: 22px; }
.lzv-planes-cuatro .lz-plan-para { font-size: 14px; min-height: 42px; }
.lzv-planes-cuatro .lz-precio strong { font-size: 44px; }
.lzv-planes-cuatro .lz-lista-tilde { gap: 10px; padding-top: 18px; }
.lzv-planes-cuatro .lz-lista-tilde li { font-size: 14.5px; color: var(--tinta-2); }
.lzv-planes-cuatro .lz-lista-tilde li b { color: var(--tinta); font-weight: 700; }
.lzv-planes-cuatro .lz-lista-tilde li::before { width: 19px; height: 19px; }
.lz-comparar-caja { margin-top: 28px; background: #fff; border: 1px solid var(--borde); border-radius: 18px; overflow: hidden; }
.lz-comparar-caja > summary { cursor: pointer; list-style: none; padding: 15px 20px; text-align: center; font-weight: 700; color: var(--acento); font-size: 15px; }
.lz-comparar-caja > summary::-webkit-details-marker { display: none; }
.lz-comparar-caja > summary::after { content: " ↓"; }
.lz-comparar-caja[open] > summary { border-bottom: 1px solid var(--borde); }
.lz-comparar-caja[open] > summary::after { content: " ↑"; }
.lz-comparar-caja > summary:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; border-radius: 18px; }
.lz-comparar-caja > h3 { font-size: 18px; margin: 0; padding: 18px 20px 4px; }
.lz-comparar-caja > p { margin: 0; padding: 0 20px 12px; color: var(--tinta-2); font-size: 14px; }
.lz-comparar-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lz-comparar { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.lz-comparar th, .lz-comparar td { padding: 9px 14px; border-top: 1px solid #eceef2; text-align: center; vertical-align: top; }
.lz-comparar th:first-child, .lz-comparar td:first-child { text-align: left; width: 40%; }
.lz-comparar thead th { background: #faf9ff; font-size: 14px; color: var(--tinta); border-top: 0; }
.lz-comparar thead th small { display: block; font-weight: 500; color: var(--tinta-2); font-size: 12px; }
.lz-comparar tr.lz-cat td { background: #f7f5ff; font-weight: 700; color: var(--acento); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.lz-comparar td small { display: block; color: var(--tinta-2); font-size: 12px; margin-top: 2px; }
.lz-si { color: var(--acento); font-weight: 800; }
.lz-no { color: #b7b4cc; }
.lzv-corto { display: none; }
/* En el celular entran las cuatro columnas sin deslizar (deslizando no se
   sabía de qué plan era cada tilde). */
@media (max-width: 640px) {
  .lz-comparar { min-width: 0; table-layout: fixed; font-size: 13px; }
  .lz-comparar th, .lz-comparar td { padding: 8px 3px; hyphens: manual; overflow-wrap: anywhere; }
  .lz-comparar th:first-child, .lz-comparar td:first-child { width: 36%; padding-left: 12px; }
  .lz-comparar thead th { font-size: 11.5px; line-height: 1.25; }
  .lz-comparar thead th small, .lz-comparar td small { font-size: 11px; }
  .lz-comparar td span { font-size: 12px; }
  .lzv-largo { display: none; }
  .lzv-corto { display: inline; }
  /* Sin deslizar de costado, los nombres de los planes quedan pegados debajo
     del encabezado del sitio mientras se baja por la tabla. */
  .lz-comparar-caja, .lz-comparar-scroll { overflow: visible; }
  .lz-comparar thead th { position: sticky; top: 68px; z-index: 2; box-shadow: 0 1px 0 #eceef2; }
}
.lzv-notas-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .lzv-notas-tres { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1180px) { .lzv-planes-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin: 0 auto; } }
@media (max-width: 640px) {
  .lzv-planes-cuatro { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
  }

/* La tienda: capturas reales en tres celulares (29-sep: "eso está muy básico"). */
.lzv-disenos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.lzv-disenos span { padding: 5px 11px; border-radius: 99px; background: var(--fondo-3); font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.lzv-telefonos { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 520px; justify-self: center; width: 100%; max-width: 560px; }
.lzv-cel { margin: 0; position: relative; width: 210px; flex: none; text-align: center; }
.lzv-cel img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 2; object-fit: cover; object-position: top; border-radius: 30px; border: 9px solid #15131f; background: #15131f; box-shadow: 0 30px 60px -30px rgba(22, 19, 45, .55), 0 10px 24px -14px rgba(22, 19, 45, .35); }
.lzv-cel figcaption { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.lzv-cel-centro { width: 240px; z-index: 2; margin: 0 -38px; }
.lzv-cel-izq { transform: rotate(-6deg) translateY(18px); z-index: 1; }
.lzv-cel-der { transform: rotate(6deg) translateY(18px); z-index: 1; }
@media (max-width: 760px) {
  /* Los de los costados van inclinados: sin esto asomaban 2 px y la página se corría de costado. */
  .lzv-telefonos { min-height: 0; margin-top: 12px; overflow-x: clip; padding: 8px 0 24px; }
  .lzv-cel { width: 132px; }
  .lzv-cel-centro { width: 158px; margin: 0 -26px; }
  .lzv-cel img { border-width: 6px; border-radius: 22px; }
  .lzv-cel figcaption { font-size: 12px; }
}