/* ------------------------------------------------------------
   CSS compartido del sitio público (landing + contacto).
   Extraído del <style> inline de index.html (15 jul 2026) para
   no duplicarlo entre páginas. Paleta de marca REAL — muestreada
   a pixel del logo definitivo de Iván (lumiva_logo_exports/). Oro
   (--lv-gold) es un acento MUY angosto, solo para ecos puntuales
   del detalle del punto de la "i" — nunca para chrome grande
   (botones, fondos), igual que --lv-doctor-N en el theme del
   portal: el color del dato, no el color del chrome.
   ------------------------------------------------------------ */
:root {
  --lv-accent: #241244;
  --lv-accent-hover: #170a2c;
  --lv-accent-subtle: #f1eefc;
  --lv-accent-contrast: #ffffff;
  --lv-gold: #ecbb5f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--lv-font-sans);
  color: var(--lv-text);
  background: var(--lv-bg);
  line-height: var(--lv-leading);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.lv-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.lv-section { padding: 88px 0; }
.lv-section--tight { padding: 64px 0; }
@media (max-width: 640px) {
  .lv-section { padding: 56px 0; }
  .lv-section--tight { padding: 40px 0; }
}

.lv-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--lv-text-sm); font-weight: 600;
  color: var(--lv-accent);
  background: var(--lv-accent-subtle);
  padding: 6px 14px;
  border-radius: var(--lv-radius-pill);
  margin-bottom: 20px;
}

h1 {
  font-size: 44px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.12; margin: 0 0 20px; color: var(--lv-text);
}
h2 {
  font-size: 30px; font-weight: 800; letter-spacing: -0.01em;
  margin: 0 0 12px; color: var(--lv-text);
}
h3 {
  font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--lv-text);
}
p { color: var(--lv-text-muted); margin: 0; }
.lv-lede {
  font-size: 18px; color: var(--lv-text-muted); max-width: 560px;
  margin: 0 0 32px;
}
@media (max-width: 640px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
}

.lv-btn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700;
  padding: 13px 24px; border-radius: var(--lv-radius);
  border: 0; cursor: pointer; transition: var(--lv-transition);
}
.lv-btn-cta--primary {
  background: var(--lv-accent); color: var(--lv-accent-contrast);
  box-shadow: var(--lv-shadow-md);
}
.lv-btn-cta--primary:hover { background: var(--lv-accent-hover); }
.lv-btn-cta--ghost {
  background: transparent; color: var(--lv-text);
  border: var(--lv-border-strong);
}
.lv-btn-cta--ghost:hover { background: var(--lv-surface-sunk); }
.lv-btn-cta--subtle {
  background: var(--lv-accent-subtle); color: var(--lv-accent);
  padding: 10px 18px;
}
.lv-btn-cta--subtle:hover { background: color-mix(in srgb, var(--lv-accent-subtle) 55%, var(--lv-accent) 14%); }
/* En el header los dos botones (demo + portal) deben verse del mismo
   tamaño — el CTA primario en otras secciones (hero, planes, footer)
   se queda con su padding normal, más grande, esto es solo para nav. */
header.lv-nav .lv-btn-cta--primary { padding: 10px 18px; }
.lv-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

header.lv-nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--lv-bg) 82%, transparent);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border-bottom: var(--lv-border);
}
.lv-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}
.lv-brand { display: flex; align-items: center; }
.lv-brand img { height: 64px; width: auto; }
.lv-nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; color: var(--lv-text-muted); }
.lv-nav-links a:hover { color: var(--lv-text); }

/* Menú hamburguesa — solo existe visualmente en móvil. En desktop
   el toggle nunca se muestra y el panel se queda display:none siempre. */
.lv-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 0; border-radius: var(--lv-radius);
  background: transparent; color: var(--lv-text);
  cursor: pointer;
}
.lv-nav-toggle:hover { background: var(--lv-surface-sunk); }

/* Ícono de Instagram en el header (24 jul 2026, junto al botón de
   Portal) — mismo tamaño/hover que .lv-nav-toggle a propósito (el
   mismo lenguaje visual de "botón de ícono" del sitio, no uno nuevo),
   pero SIEMPRE visible (nav-toggle solo existe en móvil). */
.lv-icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--lv-radius);
  color: var(--lv-text-muted);
  transition: var(--lv-transition);
}
.lv-icon-link:hover { background: var(--lv-surface-sunk); color: var(--lv-accent); }
.lv-nav-mobile {
  display: none;
  flex-direction: column;
  padding: 4px 0 20px;
  border-top: var(--lv-border);
}
.lv-nav-mobile a {
  padding: 13px 2px;
  font-size: 15px; font-weight: 600; color: var(--lv-text-muted);
  border-bottom: var(--lv-border);
}
.lv-nav-mobile a:last-of-type { border-bottom: 0; }
.lv-nav-mobile a:hover { color: var(--lv-text); }
.lv-nav-mobile .lv-btn-cta {
  margin-top: 14px; justify-content: center; border-bottom: 0;
}
.lv-nav-mobile.lv-nav-mobile--open { display: flex; }

@media (max-width: 720px) {
  .lv-nav-links { display: none; }
  /* El botón "Agenda una demo" se quita de la barra superior en móvil
     (quedaba pegado al borde derecho de la pantalla) — se muda adentro
     del menú hamburguesa, junto con los links que ya estaban ocultos. */
  .lv-cta-row { display: none; }
  .lv-nav-toggle { display: inline-flex; }
}

.lv-hero {
  position: relative; overflow: hidden;
  padding: 96px 0 72px;
}
.lv-hero-motif { position: absolute; pointer-events: none; }
@media (max-width: 720px) { .lv-hero-motif { opacity: 0.5; transform: scale(0.7); } }

/* Foto editorial — momento único de parallax, tono duotono Lumiva sobre
   una foto real de lobby. Un solo lugar en toda la página, deliberado.
   La foto exacta se elige al azar entre 3 (ver script al final del
   body de index.html) — --lv-parallax-img trae un fallback por si JS
   no corre. */
.lv-parallax {
  position: relative; height: 420px; overflow: hidden;
  background-image: var(--lv-parallax-img, url('images/aalo-lens-pt0nGH-NvoA-unsplash.jpg'));
  background-size: cover; background-position: var(--lv-parallax-pos, center 35%);
  background-attachment: fixed;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 720px) {
  .lv-parallax { background-attachment: scroll; height: 320px; }
}
.lv-parallax-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--lv-accent) 80%, transparent) 0%,
    color-mix(in srgb, var(--lv-accent) 48%, transparent) 55%,
    color-mix(in srgb, var(--lv-gold) 30%, transparent) 100%);
}
.lv-parallax-content { position: relative; text-align: center; padding: 0 24px; }
.lv-parallax-content p {
  color: #fff; font-size: 22px; font-weight: 700; max-width: 620px;
  margin: 0 auto; letter-spacing: -0.01em;
}
@media (max-width: 640px) { .lv-parallax-content p { font-size: 18px; } }

/* Variante "header" del parallax — más alta, texto alineado a la
   izquierda, para usarse como hero de una página entera (planes.html). */
.lv-parallax--hero { height: 480px; background-position: var(--lv-parallax-pos, center 40%); }
.lv-parallax--hero .lv-parallax-content { text-align: left; width: 100%; }
.lv-parallax--hero .lv-eyebrow { color: #fff; }
/* El pill de trial necesita distinguirse del resto de eyebrows del
   hero (que son blancos a propósito) — texto morado de marca, mismo
   color que el .lv-eyebrow default fuera del hero. Ver planes.html. */
.lv-parallax--hero .lv-eyebrow--trial { color: var(--lv-accent); }
.lv-parallax--hero h1 { color: #fff; }
.lv-parallax--hero .lv-lede { color: rgba(255,255,255,0.85); }
@media (max-width: 720px) { .lv-parallax--hero { height: 380px; } }

/* Franja de parallax chica, SOLO en móvil, justo arriba del hero (pedido
   de Iván, 11 ago 2026: en pantallas chicas el hero se ve "demasiado
   blanco" al abrir — esto es lo primero que se pinta, antes de que haya
   scroll). Mismo lenguaje visual que .lv-parallax (foto + overlay
   duotono, reusa .lv-parallax-overlay tal cual) pero angosta y con foto
   FIJA (no la selección al azar de --lv-parallax-img): esa la pone un
   <script> cerca del final del body, y como esta franja SÍ está arriba
   del fold, esperar a ese script causaría un flash visible al cargar —
   con la del parallax de media página no pasa porque para cuando el
   usuario hace scroll hasta ahí, el script ya corrió. Oculta por
   completo en desktop; ahí el hero ya respira bien con los motivos SVG,
   esto es solo para compensar en móvil. */
.lv-hero-parallax { display: none; }
@media (max-width: 720px) {
  .lv-hero-parallax { display: block; position: relative; height: 160px; overflow: hidden; }
}
/* Capa de la foto, más alta que el contenedor (40px de "sangrado" arriba
   y abajo) para que el <script> de abajo pueda desplazarla en scroll sin
   dejar huecos en blanco a la vista — el efecto parallax real. Distinta
   foto a propósito de la que usa .lv-parallax más abajo en la página
   (recepcion.jpg no está en el arreglo de fotos al azar de ese script). */
.lv-hero-parallax-img {
  position: absolute; top: -40px; left: 0; right: 0; bottom: -40px;
  background-image: url('images/recepcion.jpg');
  background-size: cover; background-position: center 40%;
  will-change: transform;
}

/* Scroll reveal — fade + rise sutil, una sola vez por sección */
.lv-reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms ease, transform 700ms ease; }
.lv-reveal--visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lv-reveal { opacity: 1; transform: none; transition: none; }
}

.lv-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 800px) { .lv-steps { grid-template-columns: 1fr; } }
.lv-step {
  background: var(--lv-surface); border: var(--lv-border);
  border-radius: var(--lv-radius-lg); padding: 26px;
  box-shadow: var(--lv-shadow-sm);
}
.lv-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--lv-accent-subtle); color: var(--lv-accent);
  font-weight: 800; font-size: 14px; margin-bottom: 14px;
}

.lv-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .lv-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lv-grid-4 { grid-template-columns: 1fr; } }
.lv-vertical {
  background: var(--lv-surface); border: var(--lv-border);
  border-radius: var(--lv-radius-lg); padding: 22px;
  text-align: center;
}
.lv-vertical-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--lv-accent-subtle); color: var(--lv-accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}

.lv-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 720px) { .lv-compare { grid-template-columns: 1fr; } }
.lv-compare-card {
  border-radius: var(--lv-radius-lg); padding: 28px;
  border: var(--lv-border);
}
.lv-compare-card--no { background: var(--lv-surface-sunk); }
.lv-compare-card--yes {
  background: var(--lv-surface);
  border: 1.5px solid var(--lv-accent);
  box-shadow: var(--lv-shadow-md);
}
.lv-compare-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; font-size: 14.5px; color: var(--lv-text);
  border-bottom: var(--lv-border);
}
.lv-compare-item:last-child { border-bottom: 0; }
.lv-compare-item svg { flex-shrink: 0; margin-top: 2px; }

.lv-feature-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px;
}
@media (max-width: 640px) { .lv-feature-list { grid-template-columns: 1fr; } }
.lv-feature-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
}
.lv-feature-item svg { flex-shrink: 0; margin-top: 3px; color: var(--lv-accent); }

.lv-plans-teaser {
  background: var(--lv-surface); border: var(--lv-border);
  border-radius: var(--lv-radius-lg); padding: 40px;
  text-align: center; box-shadow: var(--lv-shadow-sm);
}

.lv-final-cta {
  background: var(--lv-accent); border-radius: var(--lv-radius-lg);
  padding: 56px 40px; text-align: center; color: var(--lv-accent-contrast);
}
.lv-final-cta h2 { color: var(--lv-accent-contrast); }
.lv-final-cta p { color: color-mix(in srgb, var(--lv-accent-contrast) 82%, transparent); }
.lv-final-cta .lv-cta-row { justify-content: center; margin-top: 24px; }
.lv-final-cta .lv-btn-cta--primary {
  background: var(--lv-accent-contrast); color: var(--lv-accent);
}
.lv-final-cta .lv-btn-cta--primary:hover { background: color-mix(in srgb, var(--lv-accent-contrast) 90%, var(--lv-accent)); }
.lv-final-cta .lv-btn-cta--ghost {
  border-color: color-mix(in srgb, var(--lv-accent-contrast) 40%, transparent);
  color: var(--lv-accent-contrast);
}
.lv-final-cta .lv-btn-cta--ghost:hover { background: color-mix(in srgb, var(--lv-accent-contrast) 12%, transparent); }

footer {
  border-top: var(--lv-border); padding: 36px 0;
  font-size: 13px; color: var(--lv-text-faint);
}
footer .lv-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* -------------------- Página de planes -------------------- */
.lv-plan-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  align-items: stretch;
}
@media (max-width: 1000px) { .lv-plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lv-plan-grid { grid-template-columns: 1fr; } }

/* Escalera de precios v2 (28 jul 2026): 5 planes (se sumó Esencial) en
   vez de 4 — .lv-plan-grid--5 sobreescribe el ancho de columna, sin
   tocar la regla base (por si algún día vuelve a haber 4). Tablet: 3+2
   se ve más equilibrado que el 2+2+1 que daría la regla genérica de
   arriba.
   Corrección mismo día (feedback de Iván: "se ve un poquito raro todo
   tan narrow"): el .lv-wrap de esta sección se ensanchó a 1360px
   (inline en planes.html, no toca el .lv-wrap de 1080px del resto del
   sitio) para que las 5 tarjetas respiren en desktop. */
.lv-plan-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .lv-plan-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .lv-plan-grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lv-plan-grid--5 { grid-template-columns: 1fr; } }

.lv-plan-card {
  background: var(--lv-surface); border: var(--lv-border);
  border-radius: var(--lv-radius-lg); padding: 0 0 24px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--lv-shadow-sm);
}
.lv-plan-card--enterprise { background: var(--lv-surface-sunk); }
.lv-plan-body { padding: 18px 24px 0; display: flex; flex-direction: column; flex: 1; }

/* Header con foto difuminada por tarjeta (28 jul 2026, pedido de Iván:
   "se ve un poquito raro todo tan narrow... ponerles un header muy
   difuminado en el fondo"). Fotos ya recortadas/optimizadas a 480x200
   aparte (ver landing/images/plan-header-*.jpg, generadas de las mismas
   fotos que ya usa el rotador del hero de esta página — mismo criterio
   de "nada simulado" salvo ai-recepcion-mexicana, que aquí NO se usa a
   propósito, se deja solo para el hero). El blur + overlay morado de
   marca evitan que la foto compita con el texto; ícono y título de plan
   viven ENCIMA de la foto, uno junto al otro (segunda vuelta, mismo día:
   "el título ponlo sobre la foto, al lado del icono... difumínalo un
   poco más" — antes el ícono estaba solo arriba-izquierda y el título
   vivía abajo en la tarjeta blanca). */
.lv-plan-photo {
  position: relative; height: 100px; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.lv-plan-photo-img {
  position: absolute; inset: -14px; background-size: cover; background-position: center;
  /* Blur subido de 7px a 12px y brightness bajado de 0.9 a 0.68 — con el
     título ahora encima de la foto (antes solo el ícono), hacía falta
     más contraste para que el blanco se lea bien en cualquier foto. */
  filter: blur(12px) saturate(1.1) brightness(0.68);
}
.lv-plan-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--lv-accent) 80%, transparent) 0%,
    color-mix(in srgb, var(--lv-accent) 52%, transparent) 100%);
}
/* Insignia con icono por plan — identidad visual rápida (Esencial =
   chat, Básico = una sucursal, Plus = equipo, Pro = varias sucursales,
   Enterprise = a la medida) además del check genérico de la lista de
   abajo, que se queda igual para todos. Vidrio esmerilado para que se
   lea bien encima de cualquier foto. Ya no lleva margin propio — el
   layout flex de .lv-plan-photo lo centra verticalmente junto al
   título. */
.lv-plan-icon {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.92); color: var(--lv-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--lv-shadow-sm); flex-shrink: 0;
}
.lv-plan-photo-title {
  position: relative; z-index: 1; margin: 0; color: #fff;
  font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
/* Pedido de Iván (23 jul): aviso de "14 días gratis" DENTRO de cada
   tarjeta. Primera vuelta lo puso arriba del precio; segunda vuelta
   (misma sesión, con captura) lo movió abajo del botón "Empezar" — como
   nota de confianza al pie, no como parte del precio. Letras chicas,
   centrado bajo el botón. Solo en Básico/Plus/Pro (autoservicio);
   Enterprise no tiene trial de autoservicio, así que ninguna tarjeta
   suya lleva este renglón (ver planes.html). */
.lv-plan-trial {
  font-size: 11.5px; font-weight: 600; color: var(--lv-gold);
  text-align: center; margin: 10px 0 0; letter-spacing: 0.01em;
}
.lv-plan-price { margin: 10px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.lv-plan-price-num { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; color: var(--lv-text); }
.lv-plan-price-period { font-size: 13px; color: var(--lv-text-faint); }
.lv-plan-desc { font-size: 13.5px; margin: 6px 0 18px; }
.lv-plan-features {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-direction: column; gap: 10px; flex-grow: 1;
}
.lv-plan-features li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; color: var(--lv-text);
}
.lv-plan-features svg { flex-shrink: 0; margin-top: 2px; color: var(--lv-accent); }
/* Renglones de "esto no lo tiene" (28 jul 2026, pedido de Iván: marcar
   con tachita en vez de check lo que Esencial NO trae respecto a los
   demás planes — sobre todo voz, que antes sí se prestaba en trial y
   ahora nunca). Mismo layout que un feature normal, pero atenuado: no
   compite visualmente con lo que el plan sí incluye. */
.lv-plan-features li.lv-plan-feature--no { color: var(--lv-text-faint); }
.lv-plan-features li.lv-plan-feature--no svg { color: var(--lv-text-faint); }
.lv-plan-card .lv-btn-cta { justify-content: center; width: 100%; }

/* Conector "+" entre los 3 planes de autoservicio y el complemento de IA
   (rediseño 23 jul 2026, pedido de Iván: el "+" original — círculo chico
   con borde dorado — se veía "poco centrado, chico, en amarillo").
   Dos correcciones reales, no solo cosméticas:
   1) CENTRADO: antes el "+" vivía en un <div> aparte con
      justify-content:center sobre TODO el ancho de .lv-wrap, así que
      quedaba centrado respecto a las 4 tarjetas (incluyendo Enterprise) —
      pero conceptualmente conecta solo los 3 planes de autoservicio con
      el panel de IA de abajo, no a Enterprise (que tiene su propio "Trato
      directo"). Por eso se veía corrido a la izquierda del centro real
      de la página. Ahora vive en su propio grid de 4 columnas — MISMO
      grid-template-columns que .lv-plan-grid — y ocupa columnas 1-3
      (grid-column: 1 / span 3), centrado dentro de ESE tramo. Así queda
      alineado con el centro real de Básico+Plus+Pro, no con la tarjeta
      Enterprise.
   2) ESTILO: círculo más grande (52px vs 40px), relleno sólido en el
      morado real de marca (var(--lv-accent), no --lv-gold) con un halo
      sutil, en vez de solo borde delgado dorado — más "vistoso" y
      consistente con el resto del sitio, donde el dorado es un acento
      angosto (ver comentario en la sección de tokens) y el morado es la
      identidad principal.
   CORRECCIÓN (mismo día, feedback con captura anotada): el "+" debía ir
   centrado sobre las 4 tarjetas (incluyendo Enterprise), no solo sobre
   las 3 de autoservicio — el complemento de IA aplica a cualquier plan,
   Enterprise incluido. Se quita el grid de 4 columnas / grid-column:
   1-span-3 y se centra con flex sobre el ancho completo del wrap, igual
   en todos los breakpoints. */
.lv-plan-connector {
  display: flex; justify-content: center;
  margin-top: 10px;
  /* Por encima del panel de IA (ver .lv-addon-panel--montado abajo) —
     sin esto el panel, que viene DESPUÉS en el DOM, pintaría encima del
     círculo y le cortaría la mitad de abajo donde se monta. */
  position: relative; z-index: 3;
}
.lv-plan-connector-plus {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--lv-accent); color: #fff;
  font-size: 26px; font-weight: 700; line-height: 1;
  box-shadow: var(--lv-shadow-md), 0 0 0 7px color-mix(in srgb, var(--lv-accent) 10%, transparent);
}

/* Tercera vuelta de feedback, mismo día: "no está centrado... se ve
   lejos del apartado de AI... como si fueran dos cosas distintas...
   unifícalo más". El centrado de arriba ya estaba resuelto — lo que
   faltaba era la SEPARACIÓN física: entre el "+" y el panel de IA había
   ~130px de aire muerto (el padding-bottom de la sección de planes +
   el padding-top de la sección de IA) MÁS un cambio de fondo de blanco a
   gris de por medio — por eso leía como dos bloques sueltos, no como una
   sola pieza "planes + complemento".
   Arreglo real: el "+" ahora se MONTA físicamente sobre el borde
   superior del panel de IA (la mitad de abajo del círculo queda encima
   del panel, como un remache/costura) — no es solo "más cerca", es una
   sola figura conectada. Para lograrlo: 1) se quita el padding vertical
   que separaba ambas secciones en planes.html (ya no hace falta, el
   propio hueco entre tarjetas/panel y el círculo dan el respiro visual),
   y 2) el panel se jala hacia arriba con margin-top negativo hasta
   quedar bajo el círculo. */
.lv-addon-panel--montado { margin-top: -26px; }

.lv-addon-panel {
  background: var(--lv-surface); border: 1.5px solid var(--lv-accent);
  border-radius: var(--lv-radius-lg); padding: 36px;
  box-shadow: var(--lv-shadow-md);
  /* Rediseño (mismo día, feedback con captura): dos ajustes.
     1) TIPOGRAFÍA MENOS PROMINENTE — este panel es un complemento, no
     otro plan; su texto no debe competir visualmente con las 4 tarjetas
     de arriba. Se sobreescriben aquí (no en h2/.lv-lede globales, que sí
     se usan en el resto del sitio a su tamaño normal) los tamaños de
     título/lede/párrafo, todos más chicos que el default.
     2) DOS COLUMNAS — el texto se queda a la izquierda en una columna
     angosta; a la derecha entra el ilustración isométrica (.lv-addon-art,
     ver HTML) para llenar el espacio libre que antes quedaba vacío. En
     mobile se apila (ver media query abajo). */
  display: flex; align-items: center; gap: 36px;
}
@media (max-width: 640px) { .lv-addon-panel { padding: 26px 20px; } }
@media (max-width: 860px) { .lv-addon-panel { flex-direction: column; } }
.lv-addon-content { flex: 1.35; min-width: 0; }
.lv-addon-art { flex: 1; display: flex; justify-content: center; align-items: center; }
/* La ilustración (wa-ai-render.jpg, ver planes.html) ya trae fondo
   blanco liso — se funde solo con var(--lv-surface) del panel, no hace
   falta recortar ni enmascarar nada. */
.lv-addon-art img { width: 100%; max-width: 280px; height: auto; display: block; }
@media (max-width: 860px) { .lv-addon-art { order: -1; max-width: 220px; margin: 0 auto; } .lv-addon-art img { max-width: 220px; } }
.lv-addon-content h2 { font-size: 22px; }
.lv-addon-content .lv-lede { font-size: 14.5px; max-width: none; margin-bottom: 12px; line-height: 1.55; }
.lv-addon-content p:not(.lv-lede) { font-size: 13px; line-height: 1.55; }
.lv-addon-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--lv-accent-subtle); color: var(--lv-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}

/* -------------------- Página de contacto -------------------- */
.lv-contact-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: start;
}
@media (max-width: 800px) { .lv-contact-layout { grid-template-columns: 1fr; gap: 32px; } }

.lv-contact-form {
  background: var(--lv-surface); border: var(--lv-border);
  border-radius: var(--lv-radius-lg); padding: 32px;
  box-shadow: var(--lv-shadow-sm);
  display: flex; flex-direction: column; gap: 16px;
}
.lv-field { display: flex; flex-direction: column; gap: 6px; }
.lv-field label { font-size: 13.5px; font-weight: 600; color: var(--lv-text); }
.lv-field input, .lv-field textarea, .lv-field select {
  font: inherit; font-size: 14.5px; color: var(--lv-text);
  background: var(--lv-bg); border: var(--lv-border-strong);
  border-radius: var(--lv-radius); padding: 11px 13px;
  resize: vertical;
}
.lv-field input:focus, .lv-field textarea:focus, .lv-field select:focus {
  outline: 2px solid var(--lv-accent); outline-offset: 1px;
}
.lv-contact-form button {
  align-self: flex-start;
}
.lv-form-nota { font-size: 12.5px; color: var(--lv-text-faint); }

.lv-contact-info { display: flex; flex-direction: column; gap: 22px; }
.lv-contact-info-item { display: flex; gap: 12px; align-items: flex-start; }
.lv-contact-info-item svg { flex-shrink: 0; color: var(--lv-accent); margin-top: 2px; }
.lv-contact-info-item a:hover { text-decoration: underline; }

.lv-form-estado {
  border-radius: var(--lv-radius); padding: 12px 14px; font-size: 14px;
  display: none;
}
.lv-form-estado--ok { background: color-mix(in srgb, #1f9d55 15%, transparent); color: #1f9d55; }
.lv-form-estado--error { background: color-mix(in srgb, var(--lv-danger-fg, #c0392b) 15%, transparent); color: var(--lv-danger-fg, #c0392b); }
.lv-form-estado--visible { display: block; }

/* Prosa larga (Aviso de Privacidad, Acerca de) — ancho angosto para que
   se lea cómodo, mismo criterio tipográfico que el resto del sitio pero
   sin las tarjetas/columnas de las páginas de producto. */
.lv-legal { max-width: 720px; }
.lv-legal h2 { font-size: 21px; margin: 40px 0 12px; }
.lv-legal h2:first-child { margin-top: 0; }
.lv-legal h3 { font-size: 15px; margin: 20px 0 8px; }
.lv-legal p { margin: 0 0 14px; line-height: 1.65; }
.lv-legal ul { margin: 0 0 14px; padding-left: 20px; color: var(--lv-text-muted); line-height: 1.65; }
.lv-legal li { margin-bottom: 6px; }
.lv-legal a { color: var(--lv-accent); font-weight: 600; }
.lv-legal a:hover { text-decoration: underline; }
.lv-legal-fecha { font-size: 13px; color: var(--lv-text-faint); margin: -8px 0 32px; }
.lv-legal-nota {
  background: var(--lv-surface-sunk); border-radius: var(--lv-radius);
  padding: 14px 16px; font-size: 13px; color: var(--lv-text-muted);
  margin: 8px 0 28px; line-height: 1.55;
}

/* Sello "Diseñado en Juárez" — Acerca de. Medallón circular centrado,
   con sombra (mismo --lv-shadow-lg que las tarjetas elevadas del
   sitio) — pedido explícito de Iván tras ver el badge tipo píldora:
   más "sello/timbre", centrado, minimalista. */
.lv-sello-juarez-wrap { display: flex; justify-content: center; margin: 8px 0 32px; }
.lv-sello-juarez {
  /* Morado REAL de marca, hardcodeado a propósito (NO var(--lv-accent)):
     este sello habla de Lumiva la empresa, no de ningún negocio cliente
     — en el portal --lv-accent cambia por clínica, aquí siempre debe
     verse el morado real sin importar qué UI lo esté mostrando. Mismos
     valores exactos que AdminShell.jsx del portal. */
  position: relative; width: 168px; height: 168px; border-radius: 50%;
  background: #f1eefc; color: #241244;
  box-shadow: var(--lv-shadow-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 18px; box-sizing: border-box;
}
.lv-sello-juarez::before {
  content: ''; position: absolute; inset: 11px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, #241244 45%, transparent);
}
.lv-sello-juarez-texto { width: 100%; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.03em; line-height: 1.35; }
.lv-sello-juarez-nota { width: 100%; text-align: center; font-size: 11.5px; font-weight: 500; font-style: italic; opacity: 0.8; }

/* -------------------- Botones flotantes "pruébala ahora" (3 sep 2026) --------------------
   Campaña de Meta Ads (21-31 ago): 981 landing page views a $0.04 c/u, 32,956 personas
   alcanzadas — tráfico barato y abundante, CERO solicitudes de demo (el único evento Lead
   fue nuestra propia prueba). 97% del tráfico vino de Instagram, casi todo móvil.
   Diagnóstico: no es diseño ni copy — todas las salidas piden mucho compromiso (formulario,
   registro, otra página) y Lumiva se vende ESCUCHÁNDOLA: el momento que convence en cada demo
   en vivo es cuando el prospecto oye a la IA contestar y agendar de verdad. La landing lo
   describe con palabras en vez de dejar que el visitante lo experimente, aunque el activo más
   persuasivo del producto ya está funcionando en producción (número de demo, Bella Vita Spa).
   Hipótesis a probar: si puede marcarle a la IA desde su celular en 5 segundos y oírla agendar,
   sube mucho la probabilidad de que después sí llene el formulario.
   NÚMERO DE LA DEMO — (915) 615-2062 / Bella Vita Spa — nunca el WhatsApp Business de
   producción de Lumiva, por la regla de siempre de proteger la calidad del WABA. */
.lv-float-demo {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  /* pointer-events:none en el wrap y auto en los hijos — así el hueco
     vacío entre la etiqueta y los botones no bloquea clics al contenido
     de abajo en pantallas chicas. */
  pointer-events: none;
}
.lv-float-demo > * { pointer-events: auto; }
.lv-float-demo-label {
  max-width: 220px; text-align: right;
  background: var(--lv-surface); color: var(--lv-text);
  border: var(--lv-border); border-radius: var(--lv-radius);
  box-shadow: var(--lv-shadow-md);
  padding: 8px 12px; font-size: 12.5px; line-height: 1.4;
}
/* Etiqueta de "es una demo" (item 4 del spec) — crítico que el visitante
   entienda que del otro lado hay una clínica de PRUEBA, no ventas de
   Lumiva ni un negocio real. Siempre visible, no solo al hover: es
   información, no un tooltip decorativo. */
.lv-float-demo-label strong { color: var(--lv-accent); }
.lv-float-demo-btns { display: flex; flex-direction: column; gap: 10px; }
.lv-float-btn {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* --lv-shadow-lg (difusa, pensada para tarjetas sobre fondo) se queda
     corta para un botón flotando sobre el contenido de la página — se le
     suma una sombra extra, más cerrada y solo hacia abajo, para que se
     note que el botón "flota" (pedido de Iván, 4 sep 2026). */
  box-shadow: var(--lv-shadow-lg), 0 6px 10px rgba(22, 22, 21, 0.22);
  color: #fff; cursor: pointer; border: none; font: inherit;
  transition: transform 0.15s ease;
}
.lv-float-btn:hover { transform: scale(1.06); }
.lv-float-btn--whatsapp {
  /* Verde oficial de WhatsApp, EXCEPCIÓN a propósito al morado/dorado de
     marca — mismo criterio que ya se usa en contenido: la gente reconoce
     el ícono/color de WhatsApp de inmediato; disfrazarlo de morado
     confundiría más de lo que unifica. */
  background: #25D366;
}
.lv-float-btn--phone { background: var(--lv-accent); }
/* Escritorio (item 2 del spec): "tel:" no hace nada útil en la mayoría de
   los navegadores de escritorio — en vez de un botón muerto, se cambia
   por el número LEGIBLE para que lo copien/marquen desde su celular. Dos
   nodos en el DOM (uno con href="tel:", otro con el número en texto),
   toggled por media query — mismo breakpoint que ya usa el menú móvil
   del nav (720px), para no inventar un criterio nuevo de "qué es móvil". */
.lv-float-btn--phone-desktop {
  width: auto; height: 54px; border-radius: 27px; padding: 0 18px;
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; white-space: nowrap;
}
@media (max-width: 720px) { .lv-float-btn--phone-desktop { display: none; } }
@media (min-width: 721px) { .lv-float-btn--phone-mobile { display: none; } }
@media (max-width: 480px) {
  .lv-float-demo { right: 14px; bottom: 14px; }
  .lv-float-demo-label { max-width: 168px; font-size: 11.5px; padding: 7px 10px; }
  .lv-float-btn { width: 48px; height: 48px; }
}

/* Línea del hero (item 5 del spec) — además de los flotantes, visible
   ARRIBA sin necesidad de scroll, para quien pasa rápido por el hero.
   Mismo patrón mobile/desktop del teléfono que los botones flotantes. */
.lv-hero-demo-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 18px; font-size: 14px; color: var(--lv-text-muted);
}
.lv-hero-demo-line svg { flex-shrink: 0; color: var(--lv-accent); }
.lv-hero-demo-line a { color: var(--lv-accent); font-weight: 700; }
.lv-hero-demo-line a:hover { text-decoration: underline; }
.lv-hero-demo-line .lv-hero-demo-tel-desktop { font-weight: 700; color: var(--lv-accent); }
@media (max-width: 720px) { .lv-hero-demo-line .lv-hero-demo-tel-desktop { display: none; } }
@media (min-width: 721px) { .lv-hero-demo-line .lv-hero-demo-tel-mobile { display: none; } }