/* ============ TOKENS ============ */
:root {
  --accent: #529CC1;
  --accent-2: #72B2D5;
  --accent-dark: #36494E;
  --accent-soft: rgba(82, 156, 193, 0.14);
  --accent-glow: rgba(82, 156, 193, 0.28);
  --danger-muted: #B5564A;

  /* Radios de borde: escala de 3 niveles (progresión de 6px) que agrupa los
     ~11 valores sueltos que había antes (entre 6px y 40px, sin criterio).
     sm = controles interactivos: botones, inputs, skip-link.
     md = cards de contenido chicas, badges de ícono y paneles compactos:
       comp-card, mini-card, bubble, founder-icon, contact-card .ic,
       store-badge, faq-item, price-badge, legal-draft-notice, step-card,
       legal-toc.
     lg = paneles y cards grandes: founder-card, price-card, contact-card,
       comparison-box, crm-panel, calculator-box.
     Quedan afuera a propósito (no son parte de esta escala de "card"):
     círculos (50%: sliders, dots del CRM, whatsapp-float), el chasis del
     mockup de iPhone (40px/12px, tamaño fijo del dispositivo), badges tipo
     píldora (eyebrow, ya redondeados al máximo por su propia altura) y
     tags/barras muy chicos (2–6px: loader-bar, calc-slider, comp-tag,
     crm-event) donde 8px+ se vería desproporcionado. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Ritmo vertical entre secciones: escala de 3 niveles, múltiplos de 20px,
     asignados según densidad de contenido (no todas las secciones son
     iguales, pero antes usaban solo 2 valores sueltos -100px u 80px- sin
     ese criterio).
     sm = bloque único y compacto, poco para escanear: calculadora,
       app-nativa, faq.
     md = densidad media, el default: comparativa, calendario/CRM,
       cómo-funciona, contacto.
     lg = secciones con más contenido para recorrer: funciones
       (scrollytelling de 4 bloques), precios (grid de planes), equipo
       (grid de founders).
     El hero-stage queda afuera: no es un .band, tiene su propio ritmo
     (60px/90px) por diseño y no se toca acá. */
  --space-section-sm: 80px;
  --space-section-md: 100px;
  --space-section-lg: 120px;

  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Tema Oscuro (Taller / Noche) — Default */
  --bg: #040303;
  --surface: #0E1315;
  --surface-2: #182023;
  --text: #FFFFFF;
  --text-muted: #C0C9CA;
  --text-faint: #758386;
  --border: rgba(192, 201, 202, 0.12);
  --border-strong: rgba(82, 156, 193, 0.38);
  --card-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.45);

  /* Misma duración/easing que usa body para el fade día/noche */
  --theme-transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  --chrome-1: #36494E;
  --chrome-2: #C0C9CA;
  --chrome-3: #FFFFFF;
  --chrome-4: #529CC1;
  --chrome-5: #C0C9CA;
}

/* Tema Claro (Quirófano / Día) */
body.theme-light {
  --bg: #F4F7F8;
  --surface: #FFFFFF;
  --surface-2: #E5ECED;
  --text: #040303;
  --text-muted: #36494E;
  --text-faint: #697578;
  --border: rgba(54, 73, 78, 0.12);
  --border-strong: rgba(82, 156, 193, 0.45);
  --accent-glow: rgba(82, 156, 193, 0.18);
  --card-shadow: 0 14px 32px -12px rgba(4, 3, 3, 0.16);

  --chrome-1: #36494E;
  --chrome-2: #529CC1;
  --chrome-3: #040303;
  --chrome-4: #36494E;
  --chrome-5: #529CC1;
}

/* Cada sección declara su data-theme de forma estática en el HTML (no
   cambia en runtime): fijamos acá las variables de color POR SECCIÓN en vez
   de depender solo de body.theme-light (que el scroll togglea). Antes, el
   fondo de TODA la página (secciones + hero, todas heredando la misma
   variable --bg de body) crossfadeaba en simultáneo entre negro y blanco
   casi puros, y ese blend de color pasa inevitablemente por un gris medio
   parejo en toda la pantalla a la vez. Fijando el valor localmente por
   sección, cada una tiene su color final desde el primer render, sin
   animación ni gris intermedio; solo el header (que sí necesita reaccionar
   en vivo a qué sección tiene detrás) sigue atado a body.theme-light. */
[data-theme="dark"] {
  --bg: #040303;
  --surface: #0E1315;
  --surface-2: #182023;
  --text: #FFFFFF;
  --text-muted: #C0C9CA;
  --text-faint: #758386;
  --border: rgba(192, 201, 202, 0.12);
  --border-strong: rgba(82, 156, 193, 0.38);
  --accent-glow: rgba(82, 156, 193, 0.28);
  --card-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.45);

  --chrome-1: #36494E;
  --chrome-2: #C0C9CA;
  --chrome-3: #FFFFFF;
  --chrome-4: #529CC1;
  --chrome-5: #C0C9CA;
}

[data-theme="light"] {
  --bg: #F4F7F8;
  --surface: #FFFFFF;
  --surface-2: #E5ECED;
  --text: #040303;
  --text-muted: #36494E;
  --text-faint: #697578;
  --border: rgba(54, 73, 78, 0.12);
  --border-strong: rgba(82, 156, 193, 0.45);
  --accent-glow: rgba(82, 156, 193, 0.18);
  --card-shadow: 0 14px 32px -12px rgba(4, 3, 3, 0.16);

  --chrome-1: #36494E;
  --chrome-2: #529CC1;
  --chrome-3: #040303;
  --chrome-4: #36494E;
  --chrome-5: #529CC1;
}

[data-theme] {
  background-color: var(--bg);
  color: var(--text);
}

/* ============ RESET & BASE ============ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* El atributo [hidden] tiene la misma especificidad que una clase de autor
   (ej. .btn-primary { display: inline-block }), y al cargar después en el
   cascade la clase gana y el elemento queda visible pese al atributo. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ FADE DE TEMA: elementos que fijan su propio color/fondo/borde ============ */
/* background-color y border-color no son heredables, así que cada elemento que los
   define explícitamente (var(--surface), var(--border), etc.) necesita su propia
   transition para acompañar el fade de body en vez de cambiar de golpe. */
.hero-stage,
.eyebrow,
.hero-stage h1,
.hero-stage p,
.hero-subtext,
.iphone-screen,
.iphone-status,
.section-title p,
.comparison-box,
.comp-card ul,
.feature-text p,
.bubble .t,
.scr-cal .day,
.scr-budget .line,
.mini-card p,
.calculator-box,
.calculator-box > p,
.calc-input-group label,
.calc-slider,
.calc-note,
.crm-panel,
.crm-topbar,
.crm-topbar .dots span,
.crm-topbar .title,
.crm-week .head,
.crm-week .time,
.crm-week .cell,
.crm-event .svc,
.step-card p,
.founder-card p,
.store-badge i,
.store-badge .label,
.store-badge small,
.store-note,
.pricing-note,
.price-card > div > p.desc,
.price span,
.price-features li,
.faq-answer,
.contact-card p,
.waitlist-note,
.mobile-menu,
.mobile-menu a,
.menu-toggle,
footer,
.footer-legal,
.legal-updated,
.legal-draft-notice,
.legal-body p,
.legal-body ul,
.legal-body ol,
.legal-toc,
.legal-toc p {
  transition: var(--theme-transition);
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 10001;
  background: var(--accent);
  color: #040303;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 22px;
}

section {
  position: relative;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .calc-slider::-webkit-slider-thumb,
  .calc-slider::-moz-range-thumb {
    transition-duration: 0.01ms !important;
  }
}

/* ============ CHROME TEXT ============ */
.chrome {
  background: linear-gradient(115deg, var(--chrome-1) 0%, var(--chrome-2) 22%, var(--chrome-3) 42%, var(--chrome-4) 60%, var(--chrome-5) 78%, var(--chrome-1) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chrome-sweep 7s ease-in-out infinite;
}

@keyframes chrome-sweep {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============ LOADER ============ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #040303;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 22px;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.7s ease;
}

#loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#loader.skip {
  transition: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-word {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  letter-spacing: 1px;
}

.loader-word .base {
  color: rgba(192, 201, 202, 0.12);
}

.loader-word .fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(115deg, #36494E, #FFFFFF 40%, #529CC1 60%, #C0C9CA);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: charge 2.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes charge {
  0% { width: 0%; }
  70% { width: 101%; }
  100% { width: 101%; }
}

.loader-bar {
  width: min(280px, 60vw);
  height: 2px;
  background: rgba(192, 201, 202, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.loader-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  animation: chargebar 2.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes chargebar {
  0% { width: 0%; }
  70% { width: 100%; }
  100% { width: 100%; }
}

.loader-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ============ HEADER ============ */
header {
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;

  /* El header ya NO sigue el theme-light de scroll: backdrop-filter sobre
     un elemento sticky no repinta de forma confiable en cada frame durante
     scroll con inercia (bug de compositing de Chromium), así que togear su
     color con body.theme-light lo dejaba "pegado" en el color viejo hasta
     que el scroll se frenaba, con saltos bruscos en vez de una transición.
     En vez de perseguir el compositing, el header pasa a tener una paleta
     fija (vidrio oscuro translúcido) que funciona igual de bien encima de
     cualquier sección, clara u oscura. Estas variables locales evitan que
     sus hijos (.logo, .nav-links, .menu-toggle, el texto "ARG" con
     .chrome) hereden --text/--chrome-* de body.theme-light. */
  --text: #F4F7F8;
  --text-muted: #C0C9CA;
  --border: rgba(192, 201, 202, 0.16);
  --chrome-1: #36494E;
  --chrome-2: #C0C9CA;
  --chrome-3: #FFFFFF;
  --chrome-4: #529CC1;
  --chrome-5: #C0C9CA;

  background: rgba(15, 17, 19, 0.62);
  color: var(--text);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.5px;
  white-space: nowrap;
  display: inline-block;
  transition: transform 0.2s ease;
}

.logo:hover {
  transform: scale(1.03);
}

.logo .arg {
  font-weight: 900;
}

.nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--text);
}

/* Botones */
.btn-primary {
  background: var(--accent);
  color: #040303;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  display: inline-block;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
}

.btn-primary:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(82, 156, 193, 0.35);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  border: 1px solid var(--border-strong);
  display: inline-block;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 6px;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 22px 24px;
  position: sticky;
  top: 62px;
  z-index: 99;
}

.mobile-menu a {
  padding: 10px 0;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}

.mobile-menu .btn-primary {
  margin-top: 12px;
  text-align: center;
}

.mobile-menu.open {
  display: flex;
}

@media(max-width: 900px) {
  .nav-links, .header-cta-desktop { display: none; }
  .menu-toggle { display: block; }
}

/* ============ HERO: TALLER (ESCENARIO LIMPIO) ============ */
.hero-stage {
  position: relative;
  width: 100%;
  padding: 60px 0 90px;
  background-color: var(--bg);
  text-align: center;
  overflow: hidden;
}

.stage-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  height: 280px;
  background:
    radial-gradient(ellipse 38% 30% at 50% 14%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 70% at 50% 10%, rgba(82, 156, 193, 0.22), transparent 75%);
  pointer-events: none;
  z-index: 1;
}

.hero-container {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  padding: 6px 18px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: inline-block;
  margin-bottom: 22px;
}

.hex-rig {
  width: min(780px, 94vw);
  margin: 0 auto 20px;
  display: block;
}

.hex-rig svg {
  width: 100%;
  height: auto;
  display: block;
}

.hex-lit {
  opacity: 0;
}

.hex-rig.ignite .hex-lit {
  animation: hex-ignite 0.5s ease-out forwards;
}

.hex-rig.ignite .hex-lit-1 { animation-delay: 0ms; }
.hex-rig.ignite .hex-lit-2 { animation-delay: 500ms; }
.hex-rig.ignite .hex-lit-3 { animation-delay: 1000ms; }
.hex-rig.ignite .hex-lit-4 { animation-delay: 1500ms; }
.hex-rig.ignite .hex-lit-5 { animation-delay: 2000ms; }
.hex-rig.ignite .hex-lit-6 { animation-delay: 2500ms; }
.hex-rig.ignite .hex-lit-7 { animation-delay: 3000ms; }
.hex-rig.ignite .hex-lit-8 { animation-delay: 3500ms; }
.hex-rig.ignite .hex-lit-9 { animation-delay: 4000ms; }

@keyframes hex-ignite {
  0% { opacity: 0; }
  8% { opacity: 1; }
  14% { opacity: 0.15; }
  22% { opacity: 1; }
  30% { opacity: 0.3; }
  40% { opacity: 1; }
  100% { opacity: 1; }
}

.hero-stage h1 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -1.2px;
  max-width: 860px;
  margin: 0 auto 20px;
  color: var(--text);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}

.hero-stage p {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 32px;
  font-weight: 400;
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hero-subtext {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-faint);
  letter-spacing: 0.3px;
  margin-top: 22px;
}

/* ============ IPHONE COMPONENT ============ */
.iphone {
  width: min(254px, 82vw);
  border-radius: 40px;
  background: #080B0C;
  border: 6px solid #182023;
  box-shadow: 0 35px 70px -20px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(192, 201, 202, 0.1);
  overflow: hidden;
  position: relative;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

[data-theme="light"] .iphone {
  box-shadow: 0 35px 70px -20px rgba(4, 3, 3, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.iphone.fall {
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.iphone::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 20px;
  background: #080B0C;
  border-radius: 12px;
  z-index: 5;
}

.iphone-screen {
  background: var(--surface);
  min-height: 430px;
  padding: 34px 14px 16px;
  font-family: var(--font-body);
}

.iphone-status {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-faint);
  padding: 0 6px 10px;
}

/* ============ SCROLL REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.fall {
  opacity: 0;
  transform: translateY(-80px) rotate(-5deg);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.fall.in {
  opacity: 1;
  transform: translateY(0) rotate(-2deg);
}

/* ============ SECTION BASE ============ */
.band {
  padding: var(--space-section-md) 0;
  z-index: 0;
}

.band.tight {
  padding: var(--space-section-sm) 0;
}

.band.loose {
  padding: var(--space-section-lg) 0;
}

.section-title {
  text-align: center;
  margin: 0 0 46px;
}

.section-title h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.section-title p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-top: 10px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ COMPARATIVA ============ */
.comparison-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

@media(max-width: 768px) {
  .comparison-box { grid-template-columns: 1fr; padding: 20px; }
}

.comp-card {
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: transform 0.2s ease, var(--theme-transition);
}

.comp-card:hover {
  transform: translateY(-2px);
}

.comp-card.before {
  border-color: rgba(181, 86, 74, 0.35);
}

.comp-card.after {
  border-color: var(--border-strong);
}

.comp-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.before .comp-tag {
  background: rgba(181, 86, 74, 0.15);
  color: var(--danger-muted);
}

.after .comp-tag {
  background: var(--accent-soft);
  color: var(--accent);
}

.comp-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 14px;
  font-weight: 700;
}

.comp-card ul {
  list-style: none;
  color: var(--text-muted);
  font-size: 0.94rem;
}

.comp-card li {
  margin-bottom: 10px;
  padding-left: 22px;
  position: relative;
}

.before li::before {
  content: "×";
  position: absolute;
  left: 0;
  color: var(--danger-muted);
  font-weight: 700;
}

.after li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ============ FUNCIONES (SCROLLYTELLING) ============ */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px 0;
}

.feature-row.reverse .feature-text { order: 2; }
.feature-row.reverse .feature-visual { order: 1; }

@media(max-width: 820px) {
  .feature-row, .feature-row.reverse {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 0;
  }
  .feature-row.reverse .feature-text, .feature-row.reverse .feature-visual {
    order: initial;
  }
}

.feature-index {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 1px;
  margin-bottom: 12px;
  display: block;
  font-weight: 600;
}

.feature-text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 14px;
  font-weight: 700;
}

.feature-text p {
  color: var(--text-muted);
  font-size: 1.02rem;
  max-width: 440px;
}

.feature-visual {
  display: flex;
  justify-content: center;
  transition: transform 0.25s ease;
}

.feature-visual:hover {
  transform: scale(1.025);
}

.feature-visual:hover .iphone {
  box-shadow: 0 40px 85px -18px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(192, 201, 202, 0.1);
}

[data-theme="light"] .feature-visual:hover .iphone {
  box-shadow: 0 40px 85px -18px rgba(4, 3, 3, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Pantallas internas iPhone */
.scr-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: 0.76rem;
  max-width: 85%;
}

.bubble.me {
  align-self: flex-end;
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
}

.bubble .t {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-faint);
  margin-top: 4px;
}

.scr-cal {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.scr-cal .day {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-faint);
  text-align: center;
  padding-bottom: 4px;
}

.scr-cal .slot {
  background: var(--surface-2);
  border-radius: 5px;
  height: 20px;
  margin-bottom: 4px;
}

.scr-cal .slot.on {
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
}

.scr-budget .line {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.scr-budget .total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  padding-top: 12px;
  font-size: 0.88rem;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.mini-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, var(--theme-transition);
}

.mini-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--card-shadow);
}

.mini-card i {
  color: var(--accent);
  font-size: 1.2rem;
  margin-bottom: 10px;
  display: block;
  transition: transform 0.25s ease, color 0.2s ease;
}

.mini-card:hover i {
  transform: scale(1.15);
  color: var(--accent-2);
}

.mini-card h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.mini-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ============ CALCULADORA ============ */
.calculator-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px 30px;
  text-align: center;
}

.calculator-box h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.3rem);
  margin-bottom: 10px;
  font-weight: 700;
}

.calculator-box > p {
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
}

.calc-controls {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin: 34px 0;
  flex-wrap: wrap;
}

.calc-input-group {
  text-align: left;
}

.calc-input-group label {
  display: block;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-family: var(--font-mono);
}

.calc-slider {
  width: 240px;
  height: 6px;
  border-radius: 3px;
  accent-color: var(--accent);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-2);
  outline: none;
}

.calc-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px rgba(82, 156, 193, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.calc-slider:hover::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(82, 156, 193, 0.6);
}

.calc-slider:active::-webkit-slider-thumb {
  transform: scale(1.25);
}

.calc-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
}

.calc-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px rgba(82, 156, 193, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.calc-slider:hover::-moz-range-thumb {
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(82, 156, 193, 0.6);
}

.calc-slider:active::-moz-range-thumb {
  transform: scale(1.25);
}

.calc-result-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -1px;
}

.calc-note {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: 12px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ CALENDARIO CRM ============ */
.crm-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.crm-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}

.crm-topbar .dots {
  display: flex;
  gap: 6px;
}

.crm-topbar .dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}

.crm-topbar .title {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
}

.crm-week {
  display: grid;
  grid-template-columns: 70px repeat(5, 1fr);
}

.crm-week .head {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  text-align: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}

.crm-week .time {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-faint);
  padding: 14px 8px;
  border-top: 1px solid var(--border);
}

.crm-week .cell {
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  min-height: 58px;
  position: relative;
  padding: 6px;
}

.crm-event {
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease, var(--theme-transition);
}

.crm-event:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.35);
  border-color: var(--accent);
}

.crm-event.b2 {
  background: rgba(192, 201, 202, 0.12);
  border-color: rgba(192, 201, 202, 0.35);
  border-left-color: var(--text-muted);
}

.crm-event.b2:hover {
  border-color: var(--text-muted);
}

.crm-event .svc {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-faint);
  margin-top: 2px;
}

@media(max-width: 700px) {
  .crm-week { grid-template-columns: 40px repeat(5, 1fr); }
  .crm-event { font-size: 0.58rem; }
}

/* ============ PASOS ============ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 30px;
  border-radius: var(--radius-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease, var(--theme-transition);
}

.step-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--card-shadow);
}

.step-num {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
  opacity: 0.75;
  margin-bottom: 10px;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.step-card:hover .step-num {
  color: var(--accent-2);
  opacity: 1;
}

.step-card h3 {
  font-family: var(--font-display);
  margin-bottom: 8px;
  font-size: 1.15rem;
}

.step-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ============ EQUIPO ============ */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.founder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, var(--theme-transition);
}

.founder-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--card-shadow);
}

.founder-icon {
  width: 48px;
  height: 48px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.25rem;
  margin-bottom: 18px;
  transition: transform 0.25s ease;
}

.founder-card:hover .founder-icon {
  transform: scale(1.1) rotate(-4deg);
}

.founder-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.founder-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  font-weight: 600;
}

.founder-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ============ STORE BADGES ============ */
.store-badges {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.store-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  user-select: none;
  transition: var(--theme-transition);
}

.store-badge:hover {
  border-color: var(--border-strong);
}

.store-badge i {
  font-size: 1.8rem;
  color: var(--text-faint);
}

.store-badge .label {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-muted);
}

.store-badge small {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
}

.store-note {
  text-align: center;
  color: var(--text-muted);
  margin-top: 24px;
  font-size: 0.95rem;
}

.store-note a {
  color: var(--accent);
  font-weight: 600;
}

.store-note a:hover {
  text-decoration: underline;
}

/* ============ PRICING ============ */
.pricing-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.96rem;
  max-width: 560px;
  margin: -10px auto 30px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 20px;
  align-items: stretch;
}

.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, var(--theme-transition);
}

.price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow);
}

/* Resaltado del Plan Taller Pro con 1 Mes Gratis */
.price-card.featured {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 12px 36px -10px var(--accent-glow);
  transform: scale(1.02);
}

.price-card.featured:hover {
  transform: scale(1.02) translateY(-3px);
  box-shadow: 0 18px 44px -12px var(--accent-glow);
}

@media(max-width: 900px) {
  .price-card.featured { transform: none; }
  .price-card.featured:hover { transform: translateY(-3px); }
}

.price-badge {
  position: absolute;
  top: -13px;
  right: 26px;
  background: var(--accent);
  color: #040303;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  padding: 5px 14px;
  border-radius: var(--radius-md);
  font-weight: 800;
  letter-spacing: 0.5px;
  animation: pulse-ring 1.8s ease-in-out 4;
}

.price-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.price-card > div > p.desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-top: 6px;
}

.price {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  margin: 18px 0 4px;
}

.price span {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 400;
  font-family: var(--font-body);
}

.price-features {
  list-style: none;
  margin: 20px 0;
}

.price-features li {
  margin-bottom: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  font-size: 0.9rem;
  align-items: flex-start;
}

.price-features li i {
  color: var(--accent);
  margin-top: 3px;
  flex-shrink: 0;
  font-size: 0.85rem;
}

/* ============ FAQ ============ */
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  padding: 20px 22px;
  transition: var(--theme-transition);
}

.faq-item:hover {
  border-color: var(--border-strong);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1rem;
  gap: 14px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  color: var(--text-muted);
  margin-top: 12px;
  font-size: 0.94rem;
  line-height: 1.7;
}

/* ============ CONTACTO ============ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 44px;
}

.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, var(--theme-transition);
}

.contact-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--card-shadow);
}

.contact-card .ic {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 18px;
  transition: transform 0.25s ease;
}

.contact-card:hover .ic {
  transform: scale(1.1) rotate(-4deg);
}

.contact-card.support .ic {
  animation: pulse-ring 2.4s ease-in-out infinite;
}

@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82, 156, 193, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(82, 156, 193, 0); }
}

.contact-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.contact-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.contact-card a.mail {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
}

.contact-card a.mail:hover {
  text-decoration: underline;
}

.waitlist-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.waitlist-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.88rem;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.waitlist-form input:focus {
  border-color: var(--accent);
  outline: none;
}

.waitlist-form input::placeholder {
  color: var(--text-faint);
}

.waitlist-form button {
  padding: 10px 16px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.waitlist-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  margin-top: 8px;
}

/* ============ FOOTER ============ */
footer {
  border-top: 1px solid var(--border);
  padding: 44px 0;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.88rem;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-legal {
  color: var(--text-faint);
  font-size: 0.82rem;
}

/* Botón flotante WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 26px;
  right: 26px;
  background: #25d366;
  color: #fff;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: whatsapp-pulse 2s ease-in-out 3;
}

.whatsapp-float:hover {
  transform: scale(1.08);
}

@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0); }
}

/* ============ PÁGINAS LEGALES ============ */
.legal-hero { padding: 52px 0 20px; }
.legal-hero .eyebrow { margin-bottom: 18px; }
.legal-hero h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 10px; }
.legal-updated { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; }
.legal-draft-notice { background: var(--accent-soft); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 16px 20px; margin: 22px 0 8px; font-size: 0.9rem; color: var(--text); display: flex; gap: 12px; align-items: flex-start; }
.legal-draft-notice i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.legal-body { max-width: 760px; margin: 0 auto; padding: 30px 0 70px; }
.legal-body h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin: 38px 0 12px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; margin: 22px 0 8px; }
.legal-body p { color: var(--text-muted); margin-bottom: 14px; font-size: 0.96rem; }
.legal-body ul, .legal-body ol { color: var(--text-muted); margin: 0 0 14px 22px; font-size: 0.96rem; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: var(--accent); font-weight: 600; }
.legal-body a:hover { text-decoration: underline; }
.legal-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 26px; margin-bottom: 10px; }
.legal-toc p { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); margin-bottom: 10px; }
.legal-toc ol { margin: 0 0 0 20px; }
.legal-toc a { color: var(--text-muted); }
.legal-toc a:hover { color: var(--accent); }

/* ============ TRUST BADGES ============ */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  letter-spacing: 0.2px;
  transition: var(--theme-transition);
}

.trust-badge i {
  color: var(--accent);
  font-size: 0.85rem;
}

.footer-trust-badges {
  justify-content: flex-start;
  margin: 4px 0 20px;
}

@media(max-width: 600px) {
  .footer-trust-badges { justify-content: center; }
}

/* ============ HERO: LINK A DEMO ============ */
.hero-demo-link {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  color: var(--accent-2);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
}

.hero-demo-link:hover {
  text-decoration: underline;
}

/* ============ FEATURE: BOTÓN DE DEMO INLINE ============ */
.feature-demo-btn {
  margin-top: 20px;
}

/* ============ MODALES ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(4, 3, 3, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 34px 30px;
  position: relative;
  color: var(--text);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.open .modal-panel {
  transform: translateY(0) scale(1);
}

.demo-panel {
  max-width: 480px;
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.modal-panel h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  padding-right: 28px;
  margin-bottom: 6px;
}

.modal-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 22px;
}

.modal-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.modal-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background-color 0.2s ease;
}

.modal-step-dot.active {
  background: var(--accent);
}

.modal-step label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 14px 0 6px;
}

.modal-step label:first-child {
  margin-top: 0;
}

.opt-tag {
  color: var(--text-faint);
  font-weight: 400;
}

.modal-step input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.92rem;
  font-family: var(--font-body);
}

.modal-step input:focus {
  border-color: var(--accent);
  outline: none;
}

.modal-step input::placeholder {
  color: var(--text-faint);
}

.modal-step > .btn-primary {
  width: 100%;
  text-align: center;
  margin-top: 22px;
}

.modal-step-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.modal-step-actions .btn-primary,
.modal-step-actions .btn-secondary {
  flex: 1;
  text-align: center;
}

.modal-error {
  color: var(--danger-muted);
  font-size: 0.85rem;
  margin-top: 12px;
}

/* ============ DEMO INTERACTIVA ============ */
.demo-vehicle-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.demo-vehicle-btn {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.demo-vehicle-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.demo-iphone {
  margin: 18px auto 0;
}

.demo-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.demo-photo-slot {
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.demo-photo-slot.filled {
  background: var(--accent-soft);
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

#demoSignBtn {
  width: 100%;
  margin-top: 18px;
}

.demo-done {
  padding-top: 6px;
}

.demo-done i {
  font-size: 2.4rem;
  color: var(--accent);
  margin-bottom: 10px;
  display: inline-block;
  opacity: 0;
}

.demo-done.show i {
  animation: demo-check-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes demo-check-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.demo-done h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.demo-done p {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 18px;
}

.demo-done .btn-primary,
.demo-done .btn-secondary {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

/* ============ AUTH (LOGIN / PANEL) ============ */
.auth-section {
  min-height: calc(100vh - 260px);
  display: flex;
  align-items: center;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  padding: 34px 30px;
  color: var(--text);
  transition: var(--theme-transition);
}

.auth-card h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.auth-card .modal-subtitle {
  margin-bottom: 22px;
}

.auth-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 14px 0 6px;
}

.auth-form label:first-child {
  margin-top: 0;
}

.auth-form input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.92rem;
  font-family: var(--font-body);
}

.auth-form input:focus {
  border-color: var(--accent);
  outline: none;
}

.auth-form input::placeholder {
  color: var(--text-faint);
}

.auth-form > .btn-primary {
  width: 100%;
  text-align: center;
  margin-top: 22px;
}

.auth-error {
  color: var(--danger-muted);
  font-size: 0.85rem;
  margin-top: 12px;
}

.auth-success {
  color: var(--accent);
  font-size: 0.85rem;
  margin-top: 12px;
}

.auth-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 18px;
  text-align: center;
}

.auth-note a {
  color: var(--accent);
  font-weight: 600;
}

.panel-loading {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.panel-email {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 600;
}

/* ============ PANEL (FASE 2) ============ */
/* --panel-accent queda separada de --accent a propósito: los elementos nuevos
   del panel (pestañas, KPIs) no deben depender del acento global del resto
   del sitio, aunque hoy compartan el mismo valor. */
body.page-panel {
  --panel-accent: #529CC1;
}

.panel-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: 30px;
  color: var(--text);
}

.panel-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.panel-header h1 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.panel-tab {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.panel-tab:hover {
  color: var(--text);
}

.panel-tab.active {
  background: var(--panel-accent);
  border-color: var(--panel-accent);
  color: #FFFFFF;
}

.panel-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.panel-kpi {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.panel-kpi .label {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: 8px;
}

.panel-kpi .value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--panel-accent);
}

.panel-alert {
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.panel-alert i {
  color: var(--danger-muted);
  margin-top: 2px;
}

.panel-alert-link {
  display: block;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  color: var(--panel-accent);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font-body);
}

.panel-alert-link:hover {
  text-decoration: underline;
}

.panel-section-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 26px 0 12px;
}

.panel-section-title:first-child {
  margin-top: 0;
}

.panel-table-wrap {
  overflow-x: auto;
}

.panel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.panel-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.panel-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}

.panel-table td.num {
  font-family: var(--font-mono);
  color: var(--text);
  text-align: right;
}

.panel-empty {
  color: var(--text-faint);
  font-size: 0.88rem;
  padding: 16px 0;
}

.panel-costos-list {
  list-style: none;
}

.panel-costos-list li {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.panel-costos-list li:last-child {
  border-bottom: none;
}

.panel-costos-list .monto {
  font-family: var(--font-mono);
  color: var(--text);
}