/*
  venta.css — LA PÁGINA DE VENTA EN LA RAÍZ (02-11-2026).

  La referencia aprobada (docs/referencias/supernova-home-venta.html), regla por
  regla, con cada color, fuente, tamaño, espacio, radio y brillo tomado de los
  tokens `--sn-venta-*` (design/tokens.json → supernova-marca.css). Lo que la
  referencia escribía en línea va aquí en clases.

  Tres cambios pedidos que no cambian el aspecto:
    · los enlaces de la barra y del pie, y cada pregunta, miden 44 px de alto
      (el relleno de la pregunta pasa de <details> a su <summary>);
    · la etapa apagada usa `--sn-venta-inactivo`, que llega a 4.5:1 sobre el chat;
    · el bloque «Reparte con Supernova», la nota de quien ya tiene Supernova y la
      solicitud de la llave usan las piezas de la página y de la librería.
*/

.venta { scroll-behavior: smooth; background: var(--sn-venta-fondo); }
/* El tamaño y el alto de línea del navegador, como en la referencia, no los de la base del marco. */
.venta body { margin: 0; background: var(--sn-venta-fondo); color: var(--sn-venta-texto); font-family: var(--sn-fuente); font-size: var(--sn-venta-tamano-16); line-height: normal; overflow-x: hidden; }
.venta *, .venta *::before, .venta *::after { box-sizing: border-box; }
.venta a { color: var(--sn-venta-cian); }
.venta a:hover { color: var(--sn-venta-cian-claro); }
.contenedor { max-width: 1200px; margin: 0 auto; }
.marca-venta { font-family: var(--sn-venta-fuente-titulos); font-weight: 700; letter-spacing: .14em; color: var(--sn-venta-cian); }
.marca-venta--barra { font-size: var(--sn-venta-tamano-18); }
.etiqueta-venta { font-size: var(--sn-venta-tamano-13); letter-spacing: .12em; color: var(--sn-venta-cian); font-weight: 600; }
.h2 { margin: 0; font-family: var(--sn-venta-fuente-titulos); font-size: var(--sn-venta-tamano-42); line-height: 1.1; color: var(--sn-venta-titulo); }
.seccion-venta { padding: var(--sn-venta-espacio-96) var(--sn-venta-espacio-20); }
.seccion-venta--que-es { padding-top: var(--sn-venta-espacio-88); padding-bottom: var(--sn-venta-espacio-88); }
.seccion-alt { background: var(--sn-venta-fondo-2); border-top: 1px solid var(--sn-venta-borde-suave); border-bottom: 1px solid var(--sn-venta-borde-suave); }
.check { flex: none; margin-top: var(--sn-venta-espacio-2); color: var(--sn-venta-cian); }

/* Pilas: columnas con su separación */
.pila { display: flex; flex-direction: column; }
.pila-10 { gap: var(--sn-venta-espacio-10); }
.pila-12 { gap: var(--sn-venta-espacio-12); }
.pila-14 { gap: var(--sn-venta-espacio-14); }
.pila-16 { gap: var(--sn-venta-espacio-16); }
.pila-28 { gap: var(--sn-venta-espacio-28); }
.pila-36 { gap: var(--sn-venta-espacio-36); }
.pila-40 { gap: var(--sn-venta-espacio-40); }
.pila-44 { gap: var(--sn-venta-espacio-44); }
.ancho-640 { max-width: 640px; }
.ancho-700 { max-width: 700px; }
.ancho-860 { max-width: 860px; margin: 0 auto; }
.fila-pildoras { display: flex; flex-wrap: wrap; gap: var(--sn-venta-espacio-10); }
.ayuda-venta { margin: 0; max-width: 380px; font-size: var(--sn-venta-tamano-15); line-height: 1.6; color: var(--sn-venta-apagado); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--sn-venta-espacio-26); border-radius: var(--sn-venta-radio-12); text-decoration: none; font-weight: 700; font-size: var(--sn-venta-tamano-16); font-family: inherit; cursor: pointer; }
.venta .btn-ambar { background: var(--sn-venta-ambar); color: var(--sn-venta-ambar-texto); border: 0; }
.venta .btn-ambar:hover { color: var(--sn-venta-ambar-texto); filter: brightness(1.07); }
.venta .btn-cian { background: transparent; border: 1px solid var(--sn-venta-cian); color: var(--sn-venta-cian); font-weight: 600; }
.venta .btn-cian:hover { background: var(--sn-venta-cian-velo); }
.btn:disabled { cursor: not-allowed; opacity: .6; }
.pill { min-height: 44px; padding: 0 var(--sn-venta-espacio-18); border-radius: var(--sn-radio-pildora); font-family: inherit; font-size: var(--sn-venta-tamano-15); font-weight: 600; cursor: pointer; background: transparent; color: var(--sn-venta-texto); border: 1px solid var(--sn-venta-borde-boton); transition: all .2s ease; }
.pill.on { background: var(--sn-venta-cian); color: var(--sn-venta-sobre-cian); border-color: var(--sn-venta-cian); }
.tab { min-height: 44px; padding: 0 var(--sn-venta-espacio-20); border-radius: var(--sn-radio-pildora); border: none; font-family: inherit; font-size: var(--sn-venta-tamano-15); font-weight: 600; cursor: pointer; background: transparent; color: var(--sn-venta-suave); transition: all .2s ease; }
.tab.on { background: var(--sn-venta-cian); color: var(--sn-venta-sobre-cian); }

/* Barra */
header.barra-venta { position: relative; z-index: 2; border-bottom: 1px solid var(--sn-venta-borde-suave); }
.barra-in { padding: var(--sn-venta-espacio-18) var(--sn-venta-espacio-20); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sn-venta-espacio-12); }
.barra-venta nav { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sn-venta-espacio-22); row-gap: 0; font-size: var(--sn-venta-tamano-15); }
.venta .barra-venta nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sn-venta-suave); text-decoration: none; }
.venta .barra-venta nav a:hover { color: var(--sn-venta-titulo); }
.venta .barra-venta nav a.ingresar { padding: 0 var(--sn-venta-espacio-18); border: 1px solid var(--sn-venta-borde-boton); border-radius: var(--sn-venta-radio-10); color: var(--sn-venta-titulo); font-weight: 600; }

/* Portada */
/* Las órbitas salen por la derecha: se recortan a lo ancho, nunca hacia arriba. */
.portada { position: relative; overflow-x: clip; padding: var(--sn-venta-espacio-72) var(--sn-venta-espacio-20) var(--sn-venta-espacio-96); }
.orbita-1 { position: absolute; right: -220px; top: -160px; width: 760px; height: 760px; border-radius: var(--sn-radio-circulo); border: 1px dashed var(--sn-venta-orbita-1); pointer-events: none; }
.orbita-2 { position: absolute; right: -60px; top: 0; width: 440px; height: 440px; border-radius: var(--sn-radio-circulo); border: 1px solid var(--sn-venta-orbita-2); pointer-events: none; }
.portada-in { position: relative; display: flex; flex-wrap: wrap; gap: var(--sn-venta-espacio-56); align-items: center; }
.portada-texto { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: var(--sn-venta-espacio-24); }
.chapita { align-self: flex-start; font-size: var(--sn-venta-tamano-13); letter-spacing: .12em; color: var(--sn-venta-cian); border: 1px solid var(--sn-venta-borde-cian); border-radius: var(--sn-radio-pildora); padding: var(--sn-venta-espacio-6) var(--sn-venta-espacio-14); font-weight: 600; }
.h1 { margin: 0; font-family: var(--sn-venta-fuente-titulos); font-size: var(--sn-venta-tamano-60); line-height: 1.04; font-weight: 700; color: var(--sn-venta-titulo); }
.h1 span { color: var(--sn-venta-cian); }
.bajada { margin: 0; font-size: var(--sn-venta-tamano-19); line-height: 1.6; color: var(--sn-venta-apagado); max-width: 560px; }
.botones { display: flex; flex-wrap: wrap; gap: var(--sn-venta-espacio-12); }
.nota { margin: 0; font-size: var(--sn-venta-tamano-14); color: var(--sn-venta-tenue); }
.portada-demo { flex: 1 1 420px; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--sn-venta-espacio-16); justify-content: center; }
.telefono { width: 300px; max-width: 100%; background: var(--sn-venta-chat); border: 1px solid var(--sn-venta-borde); border-radius: var(--sn-venta-radio-28); padding: var(--sn-venta-espacio-14); }
.tel-cabeza { display: flex; align-items: center; gap: var(--sn-venta-espacio-10); padding: var(--sn-venta-espacio-8) var(--sn-venta-espacio-8) var(--sn-venta-espacio-14); border-bottom: 1px solid var(--sn-venta-borde-suave); }
.tel-inicial { width: 34px; height: 34px; border-radius: var(--sn-radio-circulo); background: var(--sn-venta-avatar); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--sn-venta-sobre-avatar); font-size: var(--sn-venta-tamano-14); }
.tel-quien { display: flex; flex-direction: column; }
.tel-nombre { font-size: var(--sn-venta-tamano-14); font-weight: 600; color: var(--sn-venta-titulo); }
.tel-estado { font-size: var(--sn-venta-tamano-12); color: var(--sn-venta-en-linea); }
.tel-chat { height: 360px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sn-venta-espacio-8); padding-top: var(--sn-venta-espacio-12); overflow: hidden; }
.burbuja { max-width: 78%; padding: var(--sn-venta-espacio-9) var(--sn-venta-espacio-12); font-size: var(--sn-venta-tamano-13); line-height: 1.45; }
.burbuja.cliente { align-self: flex-end; background: var(--sn-venta-burbuja-cliente); color: var(--sn-venta-sobre-avatar); border-radius: var(--sn-venta-radio-14) var(--sn-venta-radio-14) var(--sn-venta-radio-4) var(--sn-venta-radio-14); }
.burbuja.bot { align-self: flex-start; background: var(--sn-venta-borde-suave); color: var(--sn-venta-texto); border-radius: var(--sn-venta-radio-14) var(--sn-venta-radio-14) var(--sn-venta-radio-14) var(--sn-venta-radio-4); }
.etapas { width: 220px; max-width: 100%; display: flex; flex-direction: column; gap: var(--sn-venta-espacio-10); justify-content: center; }
.etapas-titulo { font-size: var(--sn-venta-tamano-12); letter-spacing: .12em; color: var(--sn-venta-tenue); font-weight: 600; }
.etapa { display: flex; flex-direction: column; gap: var(--sn-venta-espacio-2); padding: var(--sn-venta-espacio-12) var(--sn-venta-espacio-14); border-radius: var(--sn-venta-radio-12); transition: all .3s ease; background: var(--sn-venta-chat); border: 1px solid var(--sn-venta-borde); color: var(--sn-venta-inactivo); }
.etapa.hecha { background: var(--sn-venta-tarjeta-activa); border-color: var(--sn-venta-cian); color: var(--sn-venta-titulo); }
.etapa small { font-size: var(--sn-venta-tamano-12); color: var(--sn-venta-tenue); }
.etapa b { font-size: var(--sn-venta-tamano-14); font-weight: 600; }

/* Qué es */
.encabezado-venta { max-width: 760px; display: flex; flex-direction: column; gap: var(--sn-venta-espacio-14); }
.tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sn-venta-espacio-20); }
.idea { background: var(--sn-venta-tarjeta); border: 1px solid var(--sn-venta-borde); border-radius: var(--sn-venta-radio-18); padding: var(--sn-venta-espacio-28); display: flex; flex-direction: column; gap: var(--sn-venta-espacio-10); }
.idea .num { font-family: var(--sn-venta-fuente-titulos); font-size: var(--sn-venta-tamano-40); font-weight: 700; color: var(--sn-venta-cian); }
.idea h3 { margin: 0; font-size: var(--sn-venta-tamano-20); color: var(--sn-venta-titulo); }
.idea p { margin: 0; font-size: var(--sn-venta-tamano-15); line-height: 1.6; color: var(--sn-venta-apagado); }

/* Módulos */
.cabeza-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sn-venta-espacio-20); }
.modulos-cuerpo { display: flex; flex-wrap: wrap; gap: var(--sn-venta-espacio-24); }
.modulos-rejilla { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sn-venta-espacio-12); }
.mod { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sn-venta-espacio-6); min-height: 92px; padding: var(--sn-venta-espacio-16); border-radius: var(--sn-venta-radio-14); text-align: left; cursor: pointer; background: var(--sn-venta-tarjeta); border: 1px solid var(--sn-venta-borde); color: var(--sn-venta-texto); font-family: var(--sn-fuente); transition: transform .2s ease, border-color .2s ease; }
.mod:hover { transform: translateY(-4px); border-color: var(--sn-venta-cian); }
.mod.on { background: var(--sn-venta-tarjeta-activa); border-color: var(--sn-venta-cian); color: var(--sn-venta-titulo); }
.mod small { font-size: var(--sn-venta-tamano-12); color: var(--sn-venta-tenue); }
.mod b { font-size: var(--sn-venta-tamano-16); font-weight: 600; }
.mod-detalle { flex: 1 1 360px; min-width: 0; background: linear-gradient(160deg, var(--sn-venta-tarjeta-activa), var(--sn-venta-tarjeta) 60%); border: 1px solid var(--sn-venta-borde-cian); border-radius: var(--sn-venta-radio-20); padding: var(--sn-venta-espacio-32); display: flex; flex-direction: column; gap: var(--sn-venta-espacio-16); min-height: 300px; }
.mod-detalle h3 { margin: 0; font-family: var(--sn-venta-fuente-titulos); font-size: var(--sn-venta-tamano-30); color: var(--sn-venta-titulo); }
.mod-detalle p { margin: 0; font-size: var(--sn-venta-tamano-16); line-height: 1.65; color: var(--sn-venta-suave); }
.punto { display: flex; gap: var(--sn-venta-espacio-10); align-items: flex-start; font-size: var(--sn-venta-tamano-15); color: var(--sn-venta-texto); }
.mod-detalle .cambia { display: flex; flex-direction: column; gap: var(--sn-venta-espacio-16); animation: sn-entra .35s ease-out both; }

/* Cómo funciona */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sn-venta-espacio-16); }
.paso-venta { border-top: 2px solid var(--sn-venta-cian); padding-top: var(--sn-venta-espacio-20); display: flex; flex-direction: column; gap: var(--sn-venta-espacio-8); }
.paso-venta .n { font-family: var(--sn-venta-fuente-titulos); font-size: var(--sn-venta-tamano-15); color: var(--sn-venta-cian); font-weight: 600; }
.paso-venta.final { border-top-color: var(--sn-venta-ambar); }
.paso-venta.final .n { color: var(--sn-venta-ambar); }
.paso-venta h3 { margin: 0; font-size: var(--sn-venta-tamano-20); color: var(--sn-venta-titulo); }
.paso-venta p { margin: 0; font-size: var(--sn-venta-tamano-15); line-height: 1.6; color: var(--sn-venta-apagado); }

/* Cobertura */
.cob-in { display: flex; flex-wrap: wrap; gap: var(--sn-venta-espacio-48); align-items: center; }
.cob-texto { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--sn-venta-espacio-16); }
.cob-texto p { margin: 0; font-size: var(--sn-venta-tamano-17); line-height: 1.65; color: var(--sn-venta-apagado); }
.cob-mapa-caja { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.cob-mapa { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--sn-venta-espacio-8); width: 100%; max-width: 440px; }
.celda { display: block; aspect-ratio: 1; border-radius: var(--sn-venta-radio-8); background: var(--sn-venta-celda-off); transition: background .4s ease; }
.celda.sede { background: var(--sn-venta-ambar); }
.celda.on { background: var(--sn-venta-cian); }

/* Planes */
.selector { display: inline-flex; padding: var(--sn-venta-espacio-4); border: 1px solid var(--sn-venta-borde); border-radius: var(--sn-radio-pildora); background: var(--sn-venta-tarjeta); }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sn-venta-espacio-20); }
.plan { display: flex; flex-direction: column; gap: var(--sn-venta-espacio-18); padding: var(--sn-venta-espacio-30); border-radius: var(--sn-venta-radio-22); background: var(--sn-venta-tarjeta); border: 1px solid var(--sn-venta-borde); }
.plan.destacado { background: var(--sn-venta-tarjeta-activa); border: 2px solid var(--sn-venta-cian); }
.sello { align-self: flex-start; font-size: var(--sn-venta-tamano-12); font-weight: 700; letter-spacing: .08em; color: var(--sn-venta-ambar-texto); background: var(--sn-venta-ambar); border-radius: var(--sn-radio-pildora); padding: var(--sn-venta-espacio-5) var(--sn-venta-espacio-12); }
.plan h3 { margin: 0; font-family: var(--sn-venta-fuente-titulos); font-size: var(--sn-venta-tamano-28); color: var(--sn-venta-titulo); }
.precio { display: flex; align-items: baseline; gap: var(--sn-venta-espacio-6); }
.precio b { font-family: var(--sn-venta-fuente-titulos); font-size: var(--sn-venta-tamano-40); font-weight: 700; color: var(--sn-venta-titulo); }
.precio span { font-size: var(--sn-venta-tamano-14); color: var(--sn-venta-tenue); }
.lineas { display: flex; flex-direction: column; gap: var(--sn-venta-espacio-10); padding: var(--sn-venta-espacio-16) 0; border-top: 1px solid var(--sn-venta-borde); border-bottom: 1px solid var(--sn-venta-borde); }
.adicionales { display: flex; flex-direction: column; gap: var(--sn-venta-espacio-4); font-size: var(--sn-venta-tamano-14); color: var(--sn-venta-apagado); }
.plan .btn { min-height: 50px; }
.venta .plan .btn-cian { font-weight: 700; }
.proveedor { display: flex; flex-wrap: wrap; gap: var(--sn-venta-espacio-24); align-items: center; background: var(--sn-venta-tarjeta); border: 1px solid var(--sn-venta-borde); border-radius: var(--sn-venta-radio-20); padding: var(--sn-venta-espacio-36); }
.proveedor > div { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--sn-venta-espacio-12); }
.proveedor h3 { margin: 0; font-family: var(--sn-venta-fuente-titulos); font-size: var(--sn-venta-tamano-28); color: var(--sn-venta-titulo); }
.proveedor p { margin: 0; font-size: var(--sn-venta-tamano-16); line-height: 1.6; color: var(--sn-venta-apagado); }
.proveedor ol { margin: 0; padding-left: var(--sn-venta-espacio-20); font-size: var(--sn-venta-tamano-15); line-height: 1.6; color: var(--sn-venta-apagado); }
.proveedor > .extras { display: grid; flex: 1 1 100%; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sn-venta-espacio-20); }
.extras > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sn-venta-espacio-10); }
.extras b { font-size: var(--sn-venta-tamano-16); color: var(--sn-venta-titulo); }
.estado-venta { margin: 0; font-size: var(--sn-venta-tamano-15); line-height: 1.6; color: var(--sn-venta-suave); white-space: pre-line; }
.venta [hidden] { display: none !important; }

/* Preguntas */
.faq { display: flex; flex-direction: column; gap: var(--sn-venta-espacio-10); }
.faq details { background: var(--sn-venta-tarjeta); border: 1px solid var(--sn-venta-borde); border-radius: var(--sn-venta-radio-14); }
/* El alto mínimo es el de la referencia (18 + 28 + 18; abierta, 18 + 28 + 12), ahora en la pregunta, que es lo que se toca. */
.faq summary { cursor: pointer; list-style: none; font-size: var(--sn-venta-tamano-17); font-weight: 600; color: var(--sn-venta-titulo); min-height: 64px; padding: var(--sn-venta-espacio-18) var(--sn-venta-espacio-22); }
.faq details[open] summary { min-height: 58px; padding-bottom: var(--sn-venta-espacio-12); }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: 0; padding: 0 var(--sn-venta-espacio-22) var(--sn-venta-espacio-18); font-size: var(--sn-venta-tamano-15); line-height: 1.6; color: var(--sn-venta-apagado); }
.faq details p:not(:last-child) { padding-bottom: var(--sn-venta-espacio-10); }

/* Cierre */
.seccion-cierre { padding: 0 var(--sn-venta-espacio-20) var(--sn-venta-espacio-96); }
.cierre { border-radius: var(--sn-venta-radio-28); padding: var(--sn-venta-espacio-64) var(--sn-venta-espacio-32); background: radial-gradient(circle at 20% 0%, var(--sn-venta-cierre-luz) 0%, var(--sn-venta-tarjeta) 55%); border: 1px solid var(--sn-venta-borde-cian); display: flex; flex-direction: column; align-items: center; gap: var(--sn-venta-espacio-20); text-align: center; }
.cierre h2 { max-width: 760px; font-size: var(--sn-venta-tamano-44); }
.cierre p { margin: 0; font-size: var(--sn-venta-tamano-17); color: var(--sn-venta-suave); max-width: 560px; }
.cierre .botones { justify-content: center; }
.cierre .btn { padding: 0 var(--sn-venta-espacio-28); }

/* Pie */
footer.pie-venta { border-top: 1px solid var(--sn-venta-borde-suave); }
/* Los enlaces miden 44 px: el relleno baja de 28 a 16 para que el pie mida lo mismo que en la referencia. */
.pie-in { padding: var(--sn-venta-espacio-16) var(--sn-venta-espacio-20); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sn-venta-espacio-16); font-size: var(--sn-venta-tamano-14); color: var(--sn-venta-tenue); }
.pie-venta nav { display: flex; flex-wrap: wrap; column-gap: var(--sn-venta-espacio-20); row-gap: 0; }
.venta .pie-venta nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sn-venta-apagado); text-decoration: none; }

/* La solicitud de la llave: el flotante de la librería */
.solicitud-venta form { display: grid; gap: var(--sn-espacio-12); }
.solicitud-venta .sn-flotante__cuerpo { gap: var(--sn-espacio-12); }
.solicitud-venta ul { margin: 0; padding-left: var(--sn-espacio-18); display: grid; gap: var(--sn-espacio-4); font-size: var(--sn-tamano-secundario); }
.solicitud-venta p { margin: 0; color: var(--sn-texto-secundario); font-size: var(--sn-tamano-secundario); line-height: 1.5; }
.solicitud-venta .acepto { display: flex; gap: var(--sn-espacio-10); align-items: flex-start; color: var(--sn-texto-secundario); font-size: var(--sn-tamano-secundario); line-height: 1.5; }

/* Animaciones */
@keyframes sn-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sn-pulso { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes sn-orbita { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sn-brillo { 0%, 100% { box-shadow: var(--sn-venta-sombra-brillo-reposo); } 50% { box-shadow: var(--sn-venta-sombra-brillo); } }
.burbuja { animation: sn-entra .45s ease-out both; }
.celda.on { animation: sn-pulso 3.2s ease-in-out infinite; }
.orbita-1 { animation: sn-orbita 40s linear infinite; }
.etapa.hecha { animation: sn-brillo 1.6s ease-in-out infinite; }

/* Aparición al desplazarse */
.revela { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.revela.visible { opacity: 1; transform: none; }

/* Celular */
@media (max-width: 640px) {
  .h1 { font-size: var(--sn-venta-tamano-40); }
  .h2 { font-size: var(--sn-venta-tamano-32); }
  .cierre h2 { font-size: var(--sn-venta-tamano-32); }
  .portada { padding: var(--sn-venta-espacio-48) var(--sn-venta-espacio-16) var(--sn-venta-espacio-72); }
  .seccion-venta { padding: var(--sn-venta-espacio-72) var(--sn-venta-espacio-16); }
  /* En la referencia el 88 de «Qué es» iba en línea y le ganaba al celular. */
  .seccion-venta--que-es { padding-top: var(--sn-venta-espacio-88); padding-bottom: var(--sn-venta-espacio-88); }
  .barra-venta nav { column-gap: var(--sn-venta-espacio-14); }
}
@media (prefers-reduced-motion: reduce) {
  .venta { scroll-behavior: auto; }
  .burbuja, .celda.on, .orbita-1, .etapa.hecha, .mod-detalle .cambia { animation: none; }
  .revela { opacity: 1; transform: none; transition: none; }
}