/* ─── Reset y base ────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0b1f3a;
  --navy-claro: #16335c;
  --wa-verde: #128c7e;
  --wa-verde-osc: #075e54;
  --wa-fondo: #e5ddd5;
  --wa-burbuja-in: #ffffff;
  --wa-burbuja-out: #d9fdd3;
  --texto: #111b21;
  --texto-suave: #667781;
  --radio: 14px;

  /* Ficha del auto: los mismos tonos de WhatsApp, para que la tarjeta y la
     ficha se lean como parte de la conversación y no como una web aparte. */
  --wa-boton: #027eb5;
  --wa-linea: #e9edef;
  --wa-gris: #f0f2f5;
  --wa-verde-vivo: #00a884;
}

html {
  height: 100%;
  /* La página nunca debe scrollear en horizontal: en un celular eso se ve
     como una web rota, y la mayoría de los prospectos la abren desde ahí.
     Va solo en html: en el root el overflow se propaga al viewport, que es
     lo que queremos. */
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(160deg, var(--navy) 0%, #071528 100%);
  color: var(--texto);
  max-width: 100%;
  /* min-height y NO height: el body tiene que poder crecer con el contenido.
     Con height:100% junto a overflow-x:hidden el body se convierte en su
     propio contenedor de scroll: la página deja de scrollear como una página
     normal y en el celular el panel de abajo queda inalcanzable. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ─── Banner de marca ─────────────────────────────────────── */
.marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.marca__logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.marca__logo:hover { opacity: 0.82; }

.marca__logo img {
  width: 34px;
  height: 34px;
  display: block;
  /* El isotipo es azul marino sobre un fondo azul marino: sin este halo
     el hexágono se pierde contra el fondo de la página. */
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.94);
  padding: 2px;
}

.marca__nombre {
  font-family: "Segoe UI Semibold", "Segoe UI", Inter, -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.32em;
  /* letter-spacing agrega el espacio también después de la última letra:
     esto lo compensa para que el bloque quede ópticamente centrado. */
  text-indent: 0.32em;
  color: #f2f6fb;
  line-height: 1;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

/* ─── Escena ──────────────────────────────────────────────── */
/* min-width: 0 en toda la cadena: por defecto un flex item no encoge por
   debajo del ancho mínimo de su contenido, y los chips de sugerencia
   (nowrap, sin shrink) imponían ~500px que empujaban la página entera. */
.escena {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  padding: 32px 20px 40px;
  flex-wrap: wrap;
}

/* ─── Marco del teléfono ──────────────────────────────────── */
.telefono {
  width: 100%;
  min-width: 0;
  /* min() en vez de max-width sola: garantiza que nunca supere el ancho
     disponible, sea cual sea el padding del contenedor. */
  max-width: min(400px, 100%);
  height: min(78vh, 720px);
  min-height: 520px;
  background: var(--wa-fondo);
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* La ficha del auto se abre encima del chat, dentro del teléfono. */
  position: relative;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45), 0 0 0 9px #0d1117,
    0 0 0 10px rgba(255, 255, 255, 0.06);
}

/* ─── Cabecera WhatsApp ───────────────────────────────────── */
.wa-header {
  background: var(--wa-verde-osc);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  flex-shrink: 0;
}

.wa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}

.wa-titulo { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.wa-titulo strong { font-size: 15.5px; font-weight: 600; }
.wa-titulo span { font-size: 12px; opacity: 0.85; }

.wa-iconos { display: flex; gap: 18px; flex-shrink: 0; }
.wa-iconos svg { width: 19px; height: 19px; fill: #fff; opacity: 0.9; }

/* Cerrar el chat: solo tiene sentido en celular, donde el chat es un panel
   que tapa la pantalla. En escritorio no se muestra. */
.wa-cerrar {
  display: none;
  width: 34px;
  height: 34px;
  margin-right: -6px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  place-items: center;
  flex-shrink: 0;
}

.wa-cerrar svg { width: 22px; height: 22px; fill: #fff; }
.wa-cerrar:active { background: rgba(255, 255, 255, 0.16); }

/* ─── Chat ────────────────────────────────────────────────── */
.wa-chat {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: var(--wa-fondo);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at 70% 65%, rgba(0,0,0,0.035) 0 2px, transparent 2.1px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,0.4) 0 1.5px, transparent 1.6px);
  background-size: 90px 90px, 130px 130px, 70px 70px;
}

/* El chat es un flex column: sin esto los hijos con alto fijo (las fichas)
   se comprimen en vez de desbordar y generar scroll. */
.wa-chat > * { flex-shrink: 0; }

.wa-aviso {
  align-self: center;
  background: #fdf4c9;
  color: #6b5c1f;
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

/* ─── Burbujas ────────────────────────────────────────────── */
.burbuja {
  max-width: 82%;
  padding: 7px 10px 6px;
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.42;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.13);
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: aparecer 0.22s ease-out;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.burbuja--bot { align-self: flex-start; background: var(--wa-burbuja-in); border-top-left-radius: 2px; }
.burbuja--yo { align-self: flex-end; background: var(--wa-burbuja-out); border-top-right-radius: 2px; }

.burbuja b { font-weight: 650; }

.burbuja__hora {
  display: block;
  text-align: right;
  font-size: 10.5px;
  color: var(--texto-suave);
  margin-top: 2px;
  user-select: none;
}

.burbuja--yo .burbuja__hora::after {
  content: " ✓✓";
  color: #53bdeb;
  letter-spacing: -2px;
}

/* ─── Tarjeta de auto (mensaje con foto y botón) ──────────── */
/* Copia la pinta de un mensaje de WhatsApp con imagen y botón de enlace:
   es lo mismo que recibe el cliente por el canal real. */
.wa-ficha {
  align-self: flex-start;
  width: min(82%, 300px);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.13);
  animation: aparecer 0.28s ease-out;
}

.wa-ficha__foto {
  position: relative;
  height: 168px;
  background: #d5d5d5;
  cursor: pointer;
}

.wa-ficha__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wa-ficha__cuerpo { padding: 8px 10px 9px; }

.wa-ficha__ref {
  font-size: 10.5px;
  color: var(--texto-suave);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wa-ficha__precio {
  font-size: 16px;
  font-weight: 700;
  color: var(--wa-verde-osc);
  margin: 1px 0 3px;
}

.wa-ficha__titulo { font-size: 13.5px; font-weight: 600; line-height: 1.3; }

.wa-ficha__meta {
  font-size: 12.5px;
  color: var(--texto-suave);
  margin-top: 3px;
  line-height: 1.35;
}

.wa-ficha__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-top: 1px solid var(--wa-linea);
  background: #fff;
  color: var(--wa-boton);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.wa-ficha__boton svg { width: 17px; height: 17px; fill: currentColor; }
.wa-ficha__boton:hover { background: #f7f8fa; }

.etiqueta {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(17, 27, 33, 0.72);
  color: #fff;
}

.etiqueta--0km { background: var(--wa-verde-osc); letter-spacing: 0.08em; }

.wa-ficha__boton:focus-visible,
.accion:focus-visible,
.hoja__volver:focus-visible,
.galeria__flecha:focus-visible {
  outline: 2px solid var(--wa-verde);
  outline-offset: 2px;
}

/* ─── Ficha completa (simula el navegador de WhatsApp) ──────── */
.hoja {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--texto);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.hoja[hidden] { display: none; }
.hoja--abierta { transform: none; }

.hoja__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 6px;
  background: #fff;
  border-bottom: 1px solid var(--wa-linea);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.hoja__volver {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.hoja__volver svg { width: 22px; height: 22px; fill: #54656f; }
.hoja__volver:hover { background: var(--wa-gris); }

.hoja__textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }

.hoja__titulo {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hoja__url {
  font-size: 12px;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hoja__contenido {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hoja__acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--wa-linea);
  background: #fff;
  flex-shrink: 0;
}

.accion {
  border-radius: 999px;
  padding: 10px 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.accion[hidden] { display: none; }
/* Un auto que no se financia no muestra "Simular cuotas": el otro botón
   ocupa la fila entera. */
.accion[data-accion="cuotas"][hidden] + .accion--sec { grid-column: 1 / -1; }

.accion--sec {
  background: #fff;
  color: var(--wa-verde-osc);
  border: 1px solid #d1d7db;
}

.accion--sec:hover:not(:disabled) { border-color: var(--wa-verde); background: #f5fbf9; }

.accion--pri {
  grid-column: 1 / -1;
  background: var(--wa-verde);
  color: #fff;
  border: 1px solid var(--wa-verde);
  font-size: 15px;
  padding: 12px 10px;
}

.accion--pri:hover:not(:disabled) { background: var(--wa-verde-osc); }
.accion:disabled { opacity: 0.45; cursor: not-allowed; }

/* ─── Contenido de la ficha (chat y página pública) ────────── */
.galeria {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #d5d5d5;
}

.galeria__pista {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}

.galeria__pista::-webkit-scrollbar { display: none; }

.galeria__pista img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
}

.galeria__contador {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(17, 27, 33, 0.65);
  color: #fff;
  display: none;
}

.galeria__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  display: none;
  place-items: center;
  cursor: pointer;
}

.galeria__flecha svg { width: 22px; height: 22px; fill: #3b4a54; }
.galeria__flecha:disabled { opacity: 0; pointer-events: none; }
.galeria__flecha--izq { left: 8px; }
.galeria__flecha--der { right: 8px; }

.galeria--varias .galeria__contador { display: block; }
.galeria--varias .galeria__flecha { display: grid; }

.ficha-detalle__cuerpo { padding: 14px 16px 8px; }

.ficha-detalle__titulo {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.ficha-detalle__version {
  font-size: 14px;
  color: var(--texto-suave);
  margin-top: 2px;
}

.ficha-detalle__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.dato {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: #3b4a54;
  background: var(--wa-gris);
  border-radius: 7px;
  padding: 4px 9px;
  line-height: 1.2;
}

.dato svg { width: 14px; height: 14px; fill: #667781; flex-shrink: 0; }

.ficha-detalle__precio {
  font-size: 24px;
  font-weight: 700;
  color: var(--wa-verde-osc);
  margin-top: 12px;
}

.ficha-detalle__pago {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pill {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #d1d7db;
  color: #3b4a54;
}

.pill--ok { color: #00795f; border-color: rgba(0, 128, 105, 0.35); background: #effaf6; }
.pill--alerta { color: #c5221f; border-color: rgba(217, 48, 37, 0.35); background: #fdf1f0; }

.ficha-detalle__seccion {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--wa-linea);
}

.ficha-detalle__seccion h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wa-verde-osc);
  margin-bottom: 10px;
}

.ficha-detalle__desc { font-size: 14.5px; line-height: 1.5; color: #3b4a54; }

.specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--wa-linea);
  border: 1px solid var(--wa-linea);
  border-radius: 8px;
  overflow: hidden;
}

.specs__fila { background: #fff; padding: 8px 11px; min-width: 0; }
/* Con una cantidad impar de datos (un 0km no tiene "dueños") el último
   ocupa la fila entera en vez de dejar un hueco gris. */
.specs__fila:last-child:nth-child(odd) { grid-column: 1 / -1; }
.specs dt { font-size: 11.5px; color: var(--texto-suave); }
.specs dd { font-size: 14px; font-weight: 500; margin-top: 1px; overflow-wrap: anywhere; }

.equipamiento { list-style: none; display: flex; flex-direction: column; gap: 7px; }

.equipamiento li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.4;
  color: #3b4a54;
}

.equipamiento svg { width: 17px; height: 17px; fill: var(--wa-verde-vivo); flex-shrink: 0; margin-top: 1px; }

.ficha-detalle__extra { display: flex; flex-direction: column; gap: 12px; }

.extra { display: flex; gap: 10px; align-items: flex-start; }
.extra svg { width: 20px; height: 20px; fill: var(--wa-verde); flex-shrink: 0; margin-top: 1px; }
.extra strong { display: block; font-size: 14px; font-weight: 600; }
.extra span { display: block; font-size: 13px; color: var(--texto-suave); margin-top: 1px; }

.ficha-detalle__ref {
  font-size: 12px;
  color: #8696a0;
  margin: 16px 0 8px;
}

/* ─── Página pública de ficha (/ficha/NA-101) ─────────────── */
/* Es la que se abre en el navegador de WhatsApp: blanca y simple, como
   cualquier link que se toca desde el chat. */
body.pagina-ficha {
  background: #fff;
  color: var(--texto);
}

.pf-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-left));
  background: var(--wa-verde-osc);
  color: #fff;
}

.pf-marca { font-size: 15px; font-weight: 600; }
.pf-ref { font-size: 12px; opacity: 0.8; letter-spacing: 0.04em; }

.pf-contenido {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  flex: 1;
}

.pf-estado { padding: 48px 16px; text-align: center; color: var(--texto-suave); font-size: 15px; }
.pf-estado--error { color: #c5221f; }

.pf-acciones {
  position: sticky;
  bottom: 0;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0));
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.pf-acciones[hidden] { display: none; }

.pf-whatsapp {
  display: block;
  text-align: center;
  text-decoration: none;
}

.pf-pie {
  text-align: center;
  font-size: 12px;
  color: #8696a0;
  padding: 18px 16px 26px;
}

.pf-pie a { color: var(--texto-suave); }

@media (min-width: 600px) {
  .pagina-ficha .galeria { margin-top: 18px; border-radius: 10px; overflow: hidden; }
  .pagina-ficha .ficha-detalle__cuerpo { padding-inline: 4px; }
}

/* ─── Indicador de escritura ──────────────────────────────── */
.escribiendo {
  align-self: flex-start;
  background: var(--wa-burbuja-in);
  border-radius: 8px;
  border-top-left-radius: 2px;
  padding: 12px 14px;
  display: flex;
  gap: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.13);
}

.escribiendo span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa5ab;
  animation: latir 1.3s infinite ease-in-out;
}

.escribiendo span:nth-child(2) { animation-delay: 0.18s; }
.escribiendo span:nth-child(3) { animation-delay: 0.36s; }

@keyframes latir {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ─── Chips de sugerencia ─────────────────────────────────── */
.wa-chips {
  display: flex;
  min-width: 0;
  gap: 7px;
  padding: 9px 10px;
  overflow-x: auto;
  background: #f0f2f5;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  scrollbar-width: none;
  /* Los chips no entran en el ancho del teléfono en ningún tamaño de
     pantalla. Sin este degradado el último aparece cortado al medio y se
     lee como un error de maquetación en vez de "hay más si deslizás".
     La máscara se aplica a la caja, no al contenido, así que no se mueve
     al scrollear. */
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.wa-chips::-webkit-scrollbar { display: none; }
.wa-chips:empty { display: none; }

.chip {
  flex-shrink: 0;
  border: 1px solid var(--wa-verde);
  background: #fff;
  color: var(--wa-verde-osc);
  font-size: 12.5px;
  font-weight: 550;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.14s ease, color 0.14s ease;
}

.chip:hover { background: var(--wa-verde); color: #fff; }

/* ─── Barra de entrada ────────────────────────────────────── */
.wa-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f0f2f5;
  flex-shrink: 0;
}

.wa-input { flex: 1; background: #fff; border-radius: 22px; padding: 9px 15px; }

.wa-input input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  font-family: inherit;
  color: var(--texto);
  background: transparent;
}

.wa-barra button {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: none;
  background: var(--wa-verde);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.14s ease, opacity 0.14s ease;
}

.wa-barra button:hover:not(:disabled) { transform: scale(1.06); }
.wa-barra button:disabled { opacity: 0.45; cursor: not-allowed; }
.wa-barra button svg { width: 21px; height: 21px; fill: #fff; }

/* ─── Intro y lanzador (solo celular) ─────────────────────── */
/* Ocultos por defecto: en escritorio el chat ya está a la vista, así que
   ni la portada ni la burbuja tienen razón de existir. */
.intro { display: none; }

.intro h1 {
  font-size: 25px;
  line-height: 1.25;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.intro p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: #a9bdd6;
}

.intro__cta {
  margin-top: 20px;
  border: none;
  background: var(--wa-verde);
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 650;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
}

.intro__cta:active { transform: scale(0.98); }

.lanzador {
  display: none;
  position: fixed;
  right: 16px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background: #25d366;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
}

.lanzador svg { width: 30px; height: 30px; fill: #fff; }

/* Anillo que late para que la burbuja se note sin tener que taparle nada
   al contenido. Se dibuja detrás, así que no agranda el área táctil. */
.lanzador__globo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  opacity: 0.55;
  z-index: -1;
  animation: latido 2.4s ease-out infinite;
}

@keyframes latido {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

.lanzador__globo {
  position: relative;
  display: grid;
  place-items: center;
}

/* Punto de "mensaje sin leer": el gesto de tocarlo es automático. */
.lanzador__punto {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ff4d4f;
  border: 2px solid #25d366;
}

.lanzador__etiqueta {
  display: none;
  position: fixed;
  right: 84px;
  bottom: max(34px, calc(env(safe-area-inset-bottom) + 16px));
  z-index: 59;
  background: #fff;
  color: var(--texto);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  white-space: nowrap;
  animation: aparecer 0.3s ease-out;
  transition: opacity 0.4s ease;
}

/* La etiqueta se retira sola: cumple su función en los primeros segundos y
   si se queda tapa el texto de la lista, que ahora llega hasta abajo. */
.lanzador__etiqueta--oculta { opacity: 0; pointer-events: none; }

/* ─── Panel lateral ───────────────────────────────────────── */
.notas { max-width: min(340px, 100%); color: #c8d6e8; }

.notas h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7d95b3;
  margin-bottom: 16px;
  font-weight: 650;
}

.notas ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }

.notas li {
  font-size: 14.5px;
  line-height: 1.55;
  padding-left: 20px;
  position: relative;
}

.notas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25d366;
}

.notas li strong { color: #fff; font-weight: 650; }

/* La última viñeta es una aclaración, no un argumento de venta. El punto
   ámbar la separa de las otras cuatro sin sacarla de la lista.
   Lleva `li` en el selector porque si no las reglas de arriba
   (.notas li::before, .notas li strong) le ganan por especificidad. */
.notas li.notas__aviso { color: #93a9c4; }
.notas li.notas__aviso strong { color: #e5c26a; }
.notas li.notas__aviso::before { background: #e5c26a; }

.notas__pie {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  line-height: 1.6;
  color: #8fa5c0;
}

.notas__pie a { color: #4fd1a5; text-decoration: none; }
.notas__pie a:hover { text-decoration: underline; }

/* ─── Responsive ──────────────────────────────────────────── */
/* Sobre dvh: es el alto real de la ventana con la barra del navegador ya
   descontada. Con vh el navegador reporta el alto SIN esa barra, así que
   en un celular la barra de escribir queda tapada justo cuando el
   visitante la va a usar. */

/* Tablet y notebooks chicas: el panel de texto baja debajo del teléfono. */
@media (max-width: 900px) {
  .escena { padding: 18px 14px 28px; gap: 28px; }
  .notas { max-width: 460px; order: 2; }
  .telefono {
    height: min(74dvh, 640px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), 0 0 0 7px #0d1117;
  }
}

/* Celulares: el chat deja de estar incrustado en la página y pasa a ser un
   panel que se desliza desde abajo, abierto desde una burbuja flotante —el
   patrón que cualquiera reconoce de un widget de atención.
   Dos ventajas sobre tener el chat siempre a la vista: la pantalla chica se
   dedica a una sola cosa por vez, y con el chat cerrado el visitante lee
   primero qué es esto antes de decidir probarlo. */
@media (max-width: 560px) {
  .marca {
    gap: 10px;
    /* env(): el iPhone en horizontal mete el notch dentro de la página
       porque el viewport va en modo cover. */
    padding: 11px max(14px, env(safe-area-inset-right)) 11px
      max(14px, env(safe-area-inset-left));
  }
  .marca__logo img { width: 30px; height: 30px; }
  .marca__nombre { font-size: 15px; letter-spacing: 0.28em; text-indent: 0.28em; }

  .escena {
    /* El padding de abajo deja respirar el contenido por encima de la
       burbuja, que va fija y si no taparía los links del pie. */
    padding: 30px max(18px, env(safe-area-inset-right)) 104px
      max(18px, env(safe-area-inset-left));
    gap: 26px;
    align-items: stretch;
    align-content: start;
  }

  .intro { display: block; }
  .lanzador { display: flex; }

  .wa-cerrar { display: grid; }
  /* Los iconos de cámara y teléfono son decorativos: en el ancho de un
     celular el espacio lo necesita el botón de cerrar. */
  .wa-iconos { display: none; }

  .telefono {
    position: fixed;
    inset: 0;
    z-index: 70;
    width: 100%;
    max-width: 100%;
    /* --alto-visible lo escribe app.js con el alto real de la ventana
       (visualViewport), que es el unico valor que descuenta el teclado en
       todos los navegadores. dvh queda de respaldo si no hay JS. */
    height: var(--alto-visible, 100dvh);
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    /* visibility, no display: display:none no se puede animar, y además
       visibility:hidden saca el panel del orden de tabulación mientras
       está cerrado. */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0.28s;
  }

  .telefono--abierto { transform: none; visibility: visible; }

  .wa-chat { padding: 12px 10px 8px; }

  /* Estaba en display:none. Se perdían los cuatro argumentos de venta y el
     único link a axynt.dev del cuerpo, justo en el dispositivo desde el
     que se abre la mayoría de los links que mandamos. */
  .notas {
    display: block;
    max-width: 100%;
  }
  .notas ul { gap: 12px; }
  .notas li { font-size: 14px; }
}

/* Con el panel abierto la página de atrás no debe scrollear: si lo hace, al
   soltar el dedo dentro del chat se mueve el fondo y se siente roto. Va en
   html porque es el elemento que scrollea. */
html.chat-abierto { overflow: hidden; }

/* Quien pidió menos animación no quiere un anillo latiendo en la esquina
   ni un panel deslizándose. */
@media (prefers-reduced-motion: reduce) {
  .lanzador__globo::before { animation: none; }
  .telefono { transition: none; }
  .burbuja, .wa-ficha, .lanzador__etiqueta { animation: none; }
  .hoja { transition: none; }
}

/* Ventana muy baja (celular acostado, ventana achicada): el alto mínimo del
   teléfono lo empujaba fuera de la pantalla.
   El min-width excluye el modo panel: ahí el chat ocupa la pantalla entera
   a propósito y no hay que descontarle nada. */
@media (max-height: 560px) and (min-width: 561px) {
  .telefono { min-height: 0; height: calc(100dvh - 84px); }
  .escena { padding-top: 8px; }
}

/* Safari viejo (< 15.4) no conoce dvh. Sin esto la regla entera se
   descarta y el teléfono se queda sin alto. */
@supports not (height: 100dvh) {
  @media (max-width: 900px) { .telefono { height: min(74vh, 640px); } }
  @media (max-width: 560px) { .telefono { height: var(--alto-visible, 100vh); } }
  @media (max-height: 560px) and (min-width: 561px) {
    .telefono { height: calc(100vh - 84px); }
  }
}