/* ============================================================
   ESCALIO — style.css
   Versión 1.0 · Dark SaaS theme · Mobile-first
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');


/* ============================================================
   2. VARIABLES :ROOT
   ============================================================ */

:root {
  /* Fondos */
  --bg-base:          #0D0D0D;
  --bg-surface:       #141414;
  --bg-elevated:      #1C1C1C;
  --bg-border:        #2A2A2A;

  /* Acentos */
  --accent:           #FF6B35;
  --accent-glow:      rgba(255, 107, 53, 0.15);
  --accent-2:         #00D4FF;
  --accent-2-glow:    rgba(0, 212, 255, 0.12);

  /* Semánticos */
  --danger:           #FF3B5C;
  --success:          #00C48C;
  --warning:          #FFB800;

  /* Texto */
  --text-primary:     #F0F0F0;
  --text-secondary:   #888888;
  --text-muted:       #555555;

  /* Tipografía */
  --font-sans:        'Inter', sans-serif;
  --font-mono:        'JetBrains Mono', monospace;

  /* Geometría */
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        16px;
  --radius-xl:        24px;

  /* Transición base */
  --transition:       all 0.2s ease;

  /* Espaciado (grid de 4px) */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;
  --space-20:         80px;
  --space-24:         96px;

  /* Sombras */
  --shadow-card:      0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-elevated:  0 4px 24px rgba(0, 0, 0, 0.6);
  --shadow-accent:    0 0 32px rgba(255, 107, 53, 0.2);
  --shadow-accent2:   0 0 32px rgba(0, 212, 255, 0.15);

  /* Z-index */
  --z-base:           0;
  --z-card:           10;
  --z-sticky:         100;
  --z-overlay:        200;

  /* Contenedor */
  --container-xl:     1280px;
  --container-pad:    20px;
  --container-pad-md: 32px;

  /* WhatsApp */
  --color-whatsapp:   #25D366;
}


/* ============================================================
   3. RESET GLOBAL Y BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:       16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color:        var(--bg-base);
  color:                   var(--text-primary);
  font-family:             var(--font-sans);
  font-size:               16px;
  line-height:             1.6;
  overflow-x:              hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}

button {
  background:  transparent;
  border:      none;
  cursor:      pointer;
  font-family: inherit;
  font-size:   inherit;
  color:       inherit;
}

ul,
ol {
  list-style: none;
}

input,
textarea {
  font-family: inherit;
  font-size:   inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-weight:   700;
  line-height:   1.2;
  letter-spacing: -0.01em;
}


/* ============================================================
   4. CLASES UTILITARIAS
   ============================================================ */

/* --- Contenedor --- */

.container {
  width:     100%;
  max-width: var(--container-xl);
  margin:    0 auto;
  padding:   0 var(--container-pad);
}

/* --- Sección base --- */

.section {
  padding:   var(--space-20) 0;
  position:  relative;
  overflow:  hidden;
}

/* --- Encabezado de sección --- */

.section-header {
  text-align:    center;
  max-width:     640px;
  margin:        0 auto var(--space-12);
}

.section-header h2 {
  font-size:   28px;
  font-weight: 700;
  line-height: 1.2;
  margin-top:  var(--space-3);
}

.section-header p {
  font-size:   16px;
  color:       var(--text-secondary);
  margin-top:  var(--space-3);
  line-height: 1.6;
}

/* --- Badge --- */

.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1);
  padding:        4px 10px;
  border-radius:  var(--radius-sm);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge-accent {
  background: var(--accent-glow);
  color:      var(--accent);
  border:     1px solid rgba(255, 107, 53, 0.3);
}

.badge-accent2 {
  background: var(--accent-2-glow);
  color:      var(--accent-2);
  border:     1px solid rgba(0, 212, 255, 0.2);
}

.badge-success {
  background: rgba(0, 196, 140, 0.12);
  color:      var(--success);
  border:     1px solid rgba(0, 196, 140, 0.25);
}

.badge-danger {
  background: rgba(255, 59, 92, 0.12);
  color:      var(--danger);
  border:     1px solid rgba(255, 59, 92, 0.25);
}

.badge-neutral {
  background: var(--bg-elevated);
  color:      var(--text-secondary);
  border:     1px solid var(--bg-border);
}

/* --- Botón base --- */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         14px 24px;
  border-radius:   var(--radius-md);
  font-family:     var(--font-sans);
  font-weight:     600;
  font-size:       16px;
  line-height:     1;
  cursor:          pointer;
  border:          none;
  text-decoration: none;
  white-space:     nowrap;
  transition:      transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  position:        relative;
  overflow:        hidden;
  min-height:      44px;
}

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

/* --- .btn-primary --- */

.btn-primary {
  background: var(--accent);
  color:      #fff;
}

.btn-primary:hover {
  transform:  translateY(-2px);
  box-shadow: var(--shadow-accent);
}

/* --- .btn-outline --- */

.btn-outline {
  background: transparent;
  color:      var(--text-primary);
  border:     1px solid var(--bg-border);
}

.btn-outline:hover {
  border-color: var(--accent);
  color:        var(--accent);
}

/* --- Variantes adicionales de botón --- */

.btn-ghost {
  background: transparent;
  color:      var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--bg-elevated);
  color:      var(--text-primary);
}

.btn-whatsapp {
  background: var(--color-whatsapp);
  color:      #fff;
}

.btn-whatsapp:hover {
  transform:  translateY(-2px);
  box-shadow: 0 0 24px rgba(37, 211, 102, 0.3);
}

.btn-lg {
  padding:   16px 32px;
  font-size: 18px;
}

.btn-sm {
  padding:   8px 16px;
  font-size: 14px;
}

.btn-full {
  width:           100%;
  justify-content: center;
}

/* --- Grids --- */

.grid-2 {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-6);
}

.grid-3 {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-6);
}

.grid-auto {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   var(--space-6);
}

/* --- Card base --- */

.card {
  background:    var(--bg-surface);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  position:      relative;
  overflow:      hidden;
  transition:    transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--shadow-card);
  border-color: rgba(255, 107, 53, 0.3);
}

.card-elevated {
  background:  var(--bg-elevated);
  box-shadow:  var(--shadow-card);
}

/* --- Texto gradiente --- */

.text-gradient {
  background:              linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
  color:                   transparent;
}

.text-white    { color: #F0F0F0; }
.text-accent   { color: #FF6B35; }
.text-accent-2 { color: #00D4FF; }

/* --- Tipografía utilitaria --- */

.text-mono {
  font-family: var(--font-mono);
  font-size:   14px;
}

.text-data {
  font-family: var(--font-mono);
  font-weight: 700;
}

.text-muted-label {
  font-size:   12px;
  color:       var(--text-secondary);
  font-weight: 500;
}

/* --- .animate-on-scroll --- */

.animate-on-scroll {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--delay, 0) * 100ms);
}

.animate-on-scroll.is-visible {
  opacity:   1;
  transform: translateY(0);
}

.animate-fade-in {
  opacity:   0;
  transform: none;
  transition: opacity 0.6s ease;
  transition-delay: calc(var(--delay, 0) * 100ms);
}

.animate-fade-in.is-visible {
  opacity: 1;
}

.animate-slide-right {
  opacity:   0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--delay, 0) * 100ms);
}

.animate-slide-right.is-visible {
  opacity:   1;
  transform: translateX(0);
}

.animate-slide-left {
  opacity:   0;
  transform: translateX(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--delay, 0) * 100ms);
}

.animate-slide-left.is-visible {
  opacity:   1;
  transform: translateX(0);
}

/* --- Divisor --- */

.divider {
  border:     none;
  border-top: 1px solid var(--bg-border);
  margin:     var(--space-8) 0;
}


/* ============================================================
   5. NAVBAR
   ============================================================ */

#navbar {
  position:          sticky;
  top:               0;
  z-index:           var(--z-sticky);
  height:            64px;
  display:           flex;
  align-items:       center;
  background:        rgba(13, 13, 13, 0.8);
  border-bottom:     1px solid var(--bg-border);
  transition:        background 0.3s ease, box-shadow 0.3s ease;
}

@supports (backdrop-filter: blur(1px)) {
  #navbar {
    background:        rgba(13, 13, 13, 0.75);
    backdrop-filter:   blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

#navbar.scrolled {
  background: rgba(13, 13, 13, 0.95);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}

.nav-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  width:           100%;
  max-width:       var(--container-xl);
  margin:          0 auto;
  padding:         0 var(--container-pad);
}

/* Brand */

.nav-brand {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-weight: 700;
  font-size:   20px;
  color:       var(--text-primary);
  text-decoration: none;
}

.nav-logo-mark {
  width:            32px;
  height:           32px;
  background:       var(--accent);
  border-radius:    var(--radius-sm);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-weight:      700;
  font-size:        14px;
  color:            #fff;
  flex-shrink:      0;
}

/* Nav links — ocultos en móvil */

.nav-links {
  display: none;
}

.nav-link {
  font-size:       14px;
  font-weight:     500;
  color:           var(--text-secondary);
  text-decoration: none;
  transition:      color 0.2s ease;
  padding:         4px 0;
}

.nav-link:hover {
  color: var(--text-primary);
}

/* Nav acciones */

.nav-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

/* Botón menú móvil */

.nav-mobile-toggle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-sm);
  color:           var(--text-primary);
  transition:      background 0.2s ease;
}

.nav-mobile-toggle:hover {
  background: var(--bg-elevated);
}

/* MENÚ MÓVIL — reescritura completa */

.nav-mobile-menu {
  display:          none;
  position:         fixed;
  top:              64px;
  left:             0;
  right:            0;
  bottom:           0;
  width:            100%;
  height:           calc(100vh - 64px);
  background-color: #0D0D0D;
  z-index:          9999;
  padding:          0;
  margin:           0;
  overflow-y:       auto;
  flex-direction:   column;
}

.nav-mobile-menu.is-open {
  display: flex !important;
}

.nav-mobile-link {
  display:       block;
  width:         100%;
  padding:       20px 24px;
  font-size:     18px;
  font-weight:   500;
  color:         #F0F0F0;
  border-bottom: 1px solid #2A2A2A;
  text-decoration: none;
  background:    transparent;
}

.nav-mobile-menu .btn-whatsapp {
  margin: 24px;
  width:  calc(100% - 48px);
}


/* ============================================================
   6. HERO
   ============================================================ */

/* --- Contador de pérdida en tiempo real (hero) --- */

.hero-loss-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            4px;
  margin:         8px 0 16px;
}

#hero-loss-counter {
  font-family:    var(--font-mono);
  font-size:      clamp(36px, 6vw, 72px);
  font-weight:    700;
  color:          var(--danger);
  line-height:    1;
  letter-spacing: -0.02em;
}

.hero-loss-label {
  font-size:   14px;
  color:       var(--text-secondary);
  font-weight: 400;
}

#hero {
  padding-top:    calc(var(--space-16) + 64px);
  padding-bottom: var(--space-20);
  position:       relative;
  overflow:       hidden;
}

/* Dot-grid background pattern (CSS puro) */

#hero::before {
  content:     '';
  position:    absolute;
  inset:       0;
  background-image:
    radial-gradient(circle, rgba(255, 107, 53, 0.08) 1px, transparent 1px);
  background-size:     28px 28px;
  background-position: center top;
  pointer-events: none;
  z-index:        0;
}

/* Gradiente radial que desvanece el dot-grid en los bordes */

#hero::after {
  content:  '';
  position: absolute;
  inset:    0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, transparent 40%, var(--bg-base) 80%);
  pointer-events: none;
  z-index:        1;
}

.hero-inner {
  position:      relative;
  z-index:       2;
  display:       flex;
  flex-direction: column;
  gap:           var(--space-12);
}

/* Contenido texto del hero */

.hero-content {
  max-width:  600px;
}

.hero-eyebrow {
  margin-bottom: var(--space-4);
}

.hero-title {
  font-size:      56px;
  font-weight:    700;
  line-height:    1.1;
  letter-spacing: -0.02em;
  margin-bottom:  24px;
}

.hero-subtitle {
  font-size:    16px;
  color:        var(--text-secondary);
  line-height:  1.6;
  margin-bottom: var(--space-8);
  max-width:    480px;
}

.hero-ctas {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-3);
}

/* Stats del hero */

.hero-stats {
  display:    flex;
  gap:        var(--space-6);
  flex-wrap:  wrap;
  margin-top: 48px;
}

.hero-stat {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.hero-stat-value {
  font-family: var(--font-mono);
  font-size:   22px;
  font-weight: 700;
  color:       var(--text-primary);
}

.hero-stat-label {
  font-size: 12px;
  color:     var(--text-muted);
  /* --text-muted solo para etiquetas decorativas */
}

/* Widget de análisis (placeholder) */

.hero-widget {
  background:    var(--bg-surface);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-xl);
  padding:       var(--space-6);
  min-height:    320px;
  width:         100%;
}

.widget-input-row {
  display:   flex;
  gap:       var(--space-3);
  margin-bottom: var(--space-5);
}

.widget-url-input {
  flex:          1;
  background:    var(--bg-elevated);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding:       12px var(--space-4);
  color:         var(--text-primary);
  font-size:     14px;
  min-width:     0;
  transition:    border-color 0.2s ease;
}

.widget-url-input::placeholder {
  color: var(--text-muted);
}

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

/* Skeleton states del widget */

.widget-skeleton {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.skeleton-line {
  height:        10px;
  border-radius: var(--radius-sm);
  background:    var(--bg-elevated);
  position:      relative;
  overflow:      hidden;
}

.skeleton-line::after {
  content:   '';
  position:  absolute;
  inset:     0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

.skeleton-line.w-full  { width: 100%; }
.skeleton-line.w-3-4   { width: 75%; }
.skeleton-line.w-1-2   { width: 50%; }
.skeleton-line.w-1-3   { width: 33%; }

.skeleton-block {
  height:        64px;
  border-radius: var(--radius-md);
  background:    var(--bg-elevated);
  position:      relative;
  overflow:      hidden;
}

.skeleton-block::after {
  content:   '';
  position:  absolute;
  inset:     0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

.widget-note {
  margin-top:  var(--space-4);
  font-size:   12px;
  color:       var(--text-muted);
  text-align:  center;
  /* --text-muted: solo decorativo */
}

/* Shimmer animation */

@keyframes skeleton-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}


/* ============================================================
   7. DOLOR — 5 módulos de pérdida
   ============================================================ */

#dolor {
  background: var(--bg-surface);
}

#dolor .section-header h2 {
  color: var(--text-primary);
}

.dolor-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-5);
}

.dolor-card {
  background:    var(--bg-base);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-4);
  transition:    transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dolor-card:hover {
  transform:    translateY(-4px);
  box-shadow:   0 8px 32px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 59, 92, 0.35);
}

.dolor-card-header {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
}

.dolor-icon {
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-md);
  background:      rgba(255, 59, 92, 0.1);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--danger);
  flex-shrink:     0;
}

.dolor-icon svg {
  width:  20px;
  height: 20px;
}

.dolor-card-title {
  font-size:   16px;
  font-weight: 600;
  color:       var(--text-primary);
  line-height: 1.3;
}

.dolor-loss {
  font-family: var(--font-mono);
  font-size:   24px;
  font-weight: 700;
  color:       var(--danger);
}

.dolor-loss-label {
  font-size: 12px;
  color:     var(--text-secondary);
  margin-top: 2px;
}

.dolor-card-desc {
  font-size:  14px;
  color:      var(--text-secondary);
  line-height: 1.5;
}


/* ============================================================
   8. CONTADOR DE PÉRDIDA
   ============================================================ */

#contador {
  background: var(--bg-base);
  text-align: center;
  padding:    var(--space-20) 0;
  position:   relative;
  overflow:   hidden;
}

/* Glow radial de fondo */

#contador::before {
  content:  '';
  position: absolute;
  top:      50%;
  left:     50%;
  transform: translate(-50%, -50%);
  width:    600px;
  height:   400px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 107, 53, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.contador-label-top {
  font-size:      12px;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  margin-bottom:  var(--space-4);
}

.contador-display {
  font-family:    var(--font-mono);
  font-size:      48px;
  font-weight:    700;
  color:          var(--accent);
  line-height:    1;
  letter-spacing: -0.02em;
  animation:      pulse-glow 3s ease-in-out infinite;
  display:        inline-block;
}

.contador-currency {
  font-size: 28px;
  opacity:   0.7;
  margin-right: 4px;
}

.contador-description {
  margin-top:  var(--space-5);
  font-size:   16px;
  color:       var(--text-secondary);
  max-width:   480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.contador-sub {
  margin-top:     var(--space-3);
  font-size:      13px;
  color:          var(--text-muted);
  font-family:    var(--font-mono);
  /* --text-muted solo decorativo */
}

@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(255, 107, 53, 0.3); }
  50%       { text-shadow: 0 0 40px rgba(255, 107, 53, 0.6), 0 0 60px rgba(255, 107, 53, 0.2); }
}


/* ============================================================
   9. CÓMO FUNCIONA — 3 pasos
   ============================================================ */

#como-funciona {
  background: var(--bg-surface);
}

.steps-wrapper {
  position: relative;
}

.steps-grid {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
}

.step-card {
  background:    var(--bg-elevated);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-8) var(--space-6);
  position:      relative;
  overflow:      hidden;
  transition:    transform 0.2s ease, border-color 0.2s ease;
}

.step-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(255, 107, 53, 0.3);
}

/* Número fantasma de fondo */

.step-card::before {
  content:        attr(data-step);
  position:       absolute;
  top:            -10px;
  right:          16px;
  font-family:    var(--font-mono);
  font-size:      80px;
  font-weight:    700;
  color:          var(--text-primary);
  opacity:        0.04;
  line-height:    1;
  pointer-events: none;
  user-select:    none;
}

.step-number {
  width:           36px;
  height:          36px;
  background:      var(--accent-glow);
  border:          1px solid rgba(255, 107, 53, 0.3);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-mono);
  font-size:       14px;
  font-weight:     700;
  color:           var(--accent);
  margin-bottom:   var(--space-4);
}

.step-icon {
  width:           48px;
  height:          48px;
  background:      var(--bg-base);
  border:          1px solid var(--bg-border);
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--accent);
  margin-bottom:   var(--space-4);
}

.step-icon svg {
  width:  24px;
  height: 24px;
}

.step-title {
  font-size:     18px;
  font-weight:   700;
  margin-bottom: var(--space-2);
}

.step-desc {
  font-size:  14px;
  color:      var(--text-secondary);
  line-height: 1.6;
}


/* ============================================================
   10. AUTOMATIZACIONES — Nodos tipo n8n
   ============================================================ */

#automatizaciones {
  background: var(--bg-base);
}

/* Flow diagram */

.flow-diagram {
  background:    var(--bg-surface);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-xl);
  padding:       var(--space-6);
  margin-bottom: var(--space-12);
  overflow-x:    auto;
}

.flow-nodes {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  min-width:      280px;
}

.flow-node {
  background:    var(--bg-elevated);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  transition:    border-color 0.2s ease, background 0.2s ease;
  width:         100%;
}

.flow-node.active {
  border-color: var(--accent);
  background:   var(--accent-glow);
}

.flow-node.accent2 {
  border-color: var(--accent-2);
  background:   var(--accent-2-glow);
}

.flow-node-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--text-muted);
  flex-shrink:   0;
}

.flow-node.active  .flow-node-dot { background: var(--accent); }
.flow-node.accent2 .flow-node-dot { background: var(--accent-2); }

.flow-node-label {
  font-size:   13px;
  font-weight: 500;
  color:       var(--text-secondary);
  flex:        1;
}

.flow-node.active  .flow-node-label { color: var(--accent); }
.flow-node.accent2 .flow-node-label { color: var(--accent-2); }

.flow-connector {
  display:         flex;
  justify-content: flex-start;
  padding-left:    20px;
  color:           var(--text-muted);
  font-size:       18px;
  line-height:     1;
}

/* Grid de casos de uso */

.use-cases-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4);
}

.use-case-card {
  background:    var(--bg-surface);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  transition:    transform 0.2s ease, border-color 0.2s ease;
}

.use-case-card:hover {
  transform:    translateY(-3px);
  border-color: rgba(0, 212, 255, 0.3);
}

.use-case-icon {
  width:           40px;
  height:          40px;
  background:      var(--accent-2-glow);
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--accent-2);
  margin-bottom:   var(--space-3);
}

.use-case-icon svg {
  width:  20px;
  height: 20px;
}

.use-case-title {
  font-size:     14px;
  font-weight:   600;
  margin-bottom: var(--space-1);
}

.use-case-desc {
  font-size:  13px;
  color:      var(--text-secondary);
  line-height: 1.5;
}


/* ============================================================
   11. PREVIEW REPORTE — Mockup PDF
   ============================================================ */

#preview-reporte {
  background: var(--bg-surface);
}

.reporte-wrapper {
  display:         flex;
  justify-content: center;
}

.reporte-frame {
  width:         100%;
  max-width:     640px;
  background:    var(--bg-elevated);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    0 20px 60px rgba(0, 0, 0, 0.6), var(--shadow-accent);
}

/* Barra de título del "navegador" */

.reporte-chrome {
  background:    var(--bg-base);
  border-bottom: 1px solid var(--bg-border);
  padding:       12px var(--space-4);
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
}

.reporte-chrome-dots {
  display: flex;
  gap:     6px;
}

.reporte-chrome-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
}

.reporte-chrome-dot:nth-child(1) { background: #FF5F57; }
.reporte-chrome-dot:nth-child(2) { background: #FEBC2E; }
.reporte-chrome-dot:nth-child(3) { background: #28C840; }

.reporte-chrome-title {
  font-size:   12px;
  color:       var(--text-muted);
  font-family: var(--font-mono);
  /* decorativo */
}

/* Contenido del mockup */

.reporte-content {
  padding: var(--space-6);
}

.reporte-header-mock {
  display:       flex;
  align-items:   center;
  gap:           var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--bg-border);
}

.reporte-logo-mock {
  width:         40px;
  height:        40px;
  background:    var(--accent);
  border-radius: var(--radius-sm);
  flex-shrink:   0;
}

.reporte-meta {
  flex: 1;
}

.reporte-meta-title {
  background:    var(--bg-border);
  height:        14px;
  width:         60%;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}

.reporte-meta-sub {
  background:    var(--bg-border);
  height:        10px;
  width:         40%;
  border-radius: var(--radius-sm);
  opacity:       0.6;
}

/* Barras de puntuación */

.reporte-scores {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  margin-bottom:  var(--space-6);
}

.score-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.score-label {
  width:       120px;
  font-size:   12px;
  color:       var(--text-secondary);
  flex-shrink: 0;
}

.score-bar-track {
  flex:          1;
  height:        8px;
  background:    var(--bg-border);
  border-radius: 4px;
  overflow:      hidden;
}

.score-bar-fill {
  height:        100%;
  border-radius: 4px;
  background:    var(--success);
}

.score-bar-fill.warn { background: var(--warning); }
.score-bar-fill.bad  { background: var(--danger); }

.score-value {
  font-family: var(--font-mono);
  font-size:   12px;
  font-weight: 700;
  width:       30px;
  text-align:  right;
  color:       var(--text-primary);
}

/* Bloque de pérdida estimada */

.reporte-loss-block {
  background:    var(--bg-base);
  border:        1px solid rgba(255, 59, 92, 0.25);
  border-radius: var(--radius-md);
  padding:       var(--space-4);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}

.reporte-loss-label {
  font-size:   13px;
  color:       var(--text-secondary);
}

.reporte-loss-value {
  font-family: var(--font-mono);
  font-size:   20px;
  font-weight: 700;
  color:       var(--danger);
}


/* ============================================================
   12. SERVICIOS — 3 planes de precio
   ============================================================ */

#servicios {
  background: var(--bg-base);
}

.pricing-grid {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
}

.pricing-card {
  background:    var(--bg-surface);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-xl);
  padding:       var(--space-8);
  position:      relative;
  overflow:      visible;
  transition:    transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pricing-card:hover {
  transform:    translateY(-4px);
}

.pricing-card.featured {
  border-color:  var(--accent);
  box-shadow:    var(--shadow-accent);
  background:    var(--bg-elevated);
  padding-top:   48px;
}

.pricing-featured-badge {
  position:         absolute;
  top:              -1px;
  left:             50%;
  transform:        translateX(-50%);
  white-space:      nowrap;
  background:       var(--accent);
  color:            #fff;
  font-size:        11px;
  font-weight:      700;
  padding:          6px 20px;
  border-radius:    0 0 var(--radius-md) var(--radius-md);
  letter-spacing:   0.08em;
  text-transform:   uppercase;
}

.pricing-plan-name {
  font-size:     20px;
  font-weight:   700;
  margin-bottom: var(--space-2);
}

.pricing-plan-desc {
  font-size:     14px;
  color:         var(--text-secondary);
  margin-bottom: var(--space-6);
  line-height:   1.5;
}

/* Precio */

.pricing-price-row {
  display:      flex;
  align-items:  baseline;
  gap:          var(--space-2);
  margin-bottom: var(--space-1);
}

.pricing-anchor {
  font-size:       18px;
  font-family:     var(--font-mono);
  color:           var(--text-muted);
  text-decoration: line-through;
  /* --text-muted solo aquí por efecto tachado — decorativo */
}

.pricing-price {
  font-family: var(--font-mono);
  font-size:   32px;
  font-weight: 700;
  color:       var(--text-primary);
  line-height: 1;
}

.pricing-price-period {
  font-size: 14px;
  color:     var(--text-secondary);
}

.pricing-divider {
  border:     none;
  border-top: 1px solid var(--bg-border);
  margin:     var(--space-6) 0;
}

/* Lista de features */

.pricing-features {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  margin-bottom:  var(--space-8);
}

.pricing-feature {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  font-size:   14px;
  color:       var(--text-secondary);
  line-height: 1.4;
}

.pricing-feature-icon {
  color:       var(--success);
  flex-shrink: 0;
  margin-top:  1px;
}

.pricing-feature-icon svg {
  width:  16px;
  height: 16px;
}

/* Tiempo de entrega */

.pricing-delivery {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  font-size:     12px;
  color:         var(--text-muted);
  margin-bottom: var(--space-6);
  /* decorativo */
}

.pricing-delivery svg {
  width:  14px;
  height: 14px;
  color:  var(--accent-2);
}


/* ============================================================
   13. TESTIMONIOS
   ============================================================ */

#testimonios {
  background: var(--bg-surface);
}

.testimonios-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-6);
}

.testimonio-card {
  background:    var(--bg-elevated);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-xl);
  padding:       var(--space-8);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-5);
  transition:    transform 0.2s ease, border-color 0.2s ease;
}

.testimonio-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(0, 196, 140, 0.25);
}

/* Estrellas */

.testimonio-stars {
  display: flex;
  gap:     2px;
  color:   var(--warning);
}

.testimonio-stars svg {
  width:  16px;
  height: 16px;
}

/* Quote */

.testimonio-quote {
  font-size:   16px;
  line-height: 1.6;
  color:       var(--text-primary);
  flex:        1;
}

/* Resultado destacado */

.testimonio-result {
  background:    rgba(0, 196, 140, 0.08);
  border:        1px solid rgba(0, 196, 140, 0.2);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
}

.testimonio-result-value {
  font-family: var(--font-mono);
  font-size:   18px;
  font-weight: 700;
  color:       var(--success);
}

.testimonio-result-label {
  font-size: 13px;
  color:     var(--text-secondary);
  line-height: 1.3;
}

/* Autor */

.testimonio-author {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.testimonio-avatar {
  width:         44px;
  height:        44px;
  border-radius: 50%;
  background:    var(--bg-border);
  border:        2px solid var(--bg-border);
  overflow:      hidden;
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     16px;
  color:         var(--text-secondary);
}

.testimonio-name {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
}

.testimonio-store {
  font-size: 12px;
  color:     var(--text-secondary);
  margin-top: 2px;
}


/* ============================================================
   14. FAQ — Accordion
   ============================================================ */

#faq {
  background: var(--bg-base);
}

.faq-list {
  max-width: 720px;
  margin:    0 auto;
  display:   flex;
  flex-direction: column;
  gap:       var(--space-3);
}

.faq-item {
  background:    var(--bg-surface);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  transition:    border-color 0.2s ease;
}

.faq-item.is-open {
  border-color: rgba(255, 107, 53, 0.3);
}

.faq-trigger {
  display:         flex;
  width:           100%;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--space-5) var(--space-6);
  background:      transparent;
  cursor:          pointer;
  font-weight:     600;
  font-size:       15px;
  text-align:      left;
  color:           var(--text-primary);
  gap:             var(--space-4);
  min-height:      44px;
  transition:      background 0.2s ease;
}

.faq-trigger:hover {
  background: var(--bg-elevated);
}

.faq-item.is-open .faq-trigger {
  background:    var(--bg-elevated);
  border-bottom: 1px solid var(--bg-border);
}

.faq-icon {
  flex-shrink: 0;
  color:       var(--text-secondary);
  transition:  transform 0.2s ease;
}

.faq-icon svg {
  width:  18px;
  height: 18px;
}

.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
}

.faq-body {
  display: none;
}

.faq-item.is-open .faq-body {
  display: block;
}

.faq-body-inner {
  padding:    var(--space-5) var(--space-6);
  font-size:  14px;
  color:      var(--text-secondary);
  line-height: 1.7;
  opacity:    0;
  transform:  translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.faq-body-inner.is-animated {
  opacity:   1;
  transform: translateY(0);
}


/* ============================================================
   15. CTA FINAL
   ============================================================ */

#cta-final {
  background: var(--bg-surface);
  text-align: center;
  padding:    var(--space-24) 0;
  position:   relative;
  overflow:   hidden;
}

#cta-final::before {
  content:  '';
  position: absolute;
  top:      50%;
  left:     50%;
  transform: translate(-50%, -50%);
  width:    700px;
  height:   500px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 107, 53, 0.08) 0%,
    transparent 65%
  );
  pointer-events: none;
}

.cta-inner {
  position:  relative;
  z-index:   1;
  max-width: 580px;
  margin:    0 auto;
}

.cta-title {
  font-size:      32px;
  font-weight:    700;
  line-height:    1.2;
  letter-spacing: -0.02em;
  margin-bottom:  var(--space-4);
}

.cta-subtitle {
  font-size:     16px;
  color:         var(--text-secondary);
  margin-bottom: var(--space-8);
  line-height:   1.6;
}

.cta-actions {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-4);
}

.cta-phone {
  font-family: var(--font-mono);
  font-size:   16px;
  color:       var(--accent-2);
  letter-spacing: 0.05em;
}

/* Urgencia */

.cta-urgency {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2);
  margin-top:    var(--space-6);
  padding:       6px 14px;
  background:    rgba(255, 59, 92, 0.1);
  border:        1px solid rgba(255, 59, 92, 0.25);
  border-radius: var(--radius-sm);
  font-size:     13px;
  color:         var(--danger);
  font-weight:   500;
}

.urgency-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--danger);
  animation:     blink 1.4s ease-in-out infinite;
  flex-shrink:   0;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}


/* ============================================================
   16. FOOTER
   ============================================================ */

#footer {
  background:  var(--bg-base);
  border-top:  1px solid var(--bg-border);
  padding:     var(--space-12) 0 var(--space-8);
}

.footer-top {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-8);
  margin-bottom:  var(--space-8);
}

.footer-brand {
  max-width: 280px;
}

.footer-brand-name {
  font-size:     20px;
  font-weight:   700;
  margin-bottom: var(--space-3);
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
}

.footer-tagline {
  font-size:   14px;
  color:       var(--text-secondary);
  line-height: 1.6;
}

.footer-col-title {
  font-size:     12px;
  font-weight:   600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:         var(--text-muted);
  margin-bottom: var(--space-4);
  /* --text-muted solo para encabezados decorativos */
}

.footer-links {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.footer-link {
  font-size:   14px;
  color:       var(--text-secondary);
  transition:  color 0.2s ease;
}

.footer-link:hover {
  color: var(--text-primary);
}

.footer-social {
  display: flex;
  gap:     var(--space-3);
}

.footer-social-link {
  width:           40px;
  height:          40px;
  background:      var(--bg-elevated);
  border:          1px solid var(--bg-border);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-secondary);
  transition:      color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.footer-social-link:hover {
  color:        var(--accent);
  border-color: rgba(255, 107, 53, 0.3);
  background:   var(--accent-glow);
}

.footer-social-link svg {
  width:  18px;
  height: 18px;
}

/* Bottom bar */

.footer-bottom {
  display:      flex;
  flex-wrap:    wrap;
  gap:          var(--space-3);
  align-items:  center;
  justify-content: space-between;
  padding-top:  var(--space-6);
  border-top:   1px solid var(--bg-border);
}

.footer-copy {
  font-size: 13px;
  color:     var(--text-muted);
  /* decorativo */
}

.footer-legal {
  display: flex;
  gap:     var(--space-4);
}

.footer-legal-link {
  font-size:  13px;
  color:      var(--text-muted);
  transition: color 0.2s ease;
  /* decorativo */
}

.footer-legal-link:hover {
  color: var(--text-secondary);
}


/* ============================================================
   17. MEDIA QUERIES — @media (max-width: 768px)
   ============================================================ */

/*
  NOTA: Este proyecto es mobile-first. Los estilos base ya
  están optimizados para 375px. Esta sección aplica correcciones
  específicas para pantallas ≤ 768px que requieren ajustes
  distintos a los del base.
*/

@media (max-width: 768px) {

  /* --- Contenedor --- */
  .container {
    padding: 0 var(--container-pad);
  }

  /* --- Sección --- */
  .section {
    padding: var(--space-16) 0;
  }

  /* --- Navbar móvil: logo + hamburguesa + CTA --- */
  .nav-mobile-toggle {
    display: flex;
  }

  #nav-mobile-menu {
    display:    none;
    position:   fixed;
    top:        64px;
    left:       0;
    right:      0;
    z-index:    999;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--bg-border);
    flex-direction: column;
    padding:    16px 20px 24px;
    gap:        4px;
  }

  #nav-mobile-menu.is-open {
    display: flex;
  }

  #navbar {
    display:         flex !important;
    justify-content: space-between !important;
    align-items:     center !important;
    padding:         0 20px !important;
  }

  #navbar .btn-sm {
    display:     flex !important;
    font-size:   13px !important;
    padding:     10px 16px !important;
  }

  /* --- Hero --- */
  #hero {
    padding-top:    calc(var(--space-12) + 64px);
    padding-bottom: var(--space-16);
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .hero-ctas {
    flex-direction: column;
  }

  .hero-ctas .btn {
    width:           100%;
    justify-content: center;
  }

  .hero-stats {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   0;
    border:                1px solid var(--bg-border);
    border-radius:         var(--radius-md);
    overflow:              hidden;
    margin-top:            32px;
  }

  .hero-stat {
    padding:       16px 8px;
    text-align:    center;
    border-right:  1px solid var(--bg-border);
  }

  .hero-stat:last-child {
    border-right: none;
  }

  .hero-stat-value {
    font-size:   22px;
    font-weight: 700;
    color:       var(--text-primary);
    display:     block;
  }

  .hero-stat-label {
    font-size:   10px;
    color:       var(--text-secondary);
    display:     block;
    margin-top:  2px;
    line-height: 1.3;
  }

  /* --- Dolor --- */
  .dolor-grid {
    grid-template-columns: 1fr;
  }

  .dolor-loss {
    font-size: 20px;
  }

  /* --- Contador --- */
  .contador-display {
    font-size: 40px;
  }

  .contador-currency {
    font-size: 22px;
  }

  /* --- Cómo funciona --- */
  .steps-grid {
    flex-direction: column;
  }

  .step-card::before {
    font-size: 60px;
  }

  /* --- Automatizaciones --- */
  .use-cases-grid {
    grid-template-columns: 1fr;
  }

  /* --- Preview reporte --- */
  .reporte-frame {
    max-width: 100%;
  }

  .score-label {
    width: 90px;
    font-size: 11px;
  }

  /* --- Servicios --- */
  .pricing-grid {
    flex-direction: column;
  }

  .pricing-card.featured {
    transform: none;
    order: -1; /* Destacado primero en móvil */
  }

  .pricing-price {
    font-size: 28px;
  }

  /* --- Testimonios --- */
  .testimonios-grid {
    grid-template-columns: 1fr;
  }

  /* --- FAQ --- */
  .faq-trigger {
    font-size: 14px;
    padding:   var(--space-4) var(--space-5);
  }

  /* --- CTA Final --- */
  #cta-final {
    padding: var(--space-16) 0;
  }

  .cta-title {
    font-size: 26px;
  }

  .cta-actions .btn {
    width:           100%;
    justify-content: center;
  }

  /* --- Footer --- */
  .footer-bottom {
    flex-direction: column;
    text-align:     center;
  }

  .footer-legal {
    justify-content: center;
  }

  /* --- Sección header en móvil --- */
  .section-header h2 {
    font-size: 24px;
  }

  /* --- Flow diagram en móvil --- */
  .flow-nodes {
    flex-direction: column;
  }
}


/* ============================================================
   MEDIA QUERIES DESKTOP
   ============================================================ */

@media (min-width: 1280px) {

  /* --- Contenedor --- */
  .container {
    padding: 0 var(--container-pad-md);
  }

  /* --- Section header --- */
  .section-header h2 {
    font-size: 40px;
  }

  .section-header p {
    font-size: 18px;
  }

  /* --- Navbar --- */
  .nav-links {
    display:     flex;
    align-items: center;
    gap:         var(--space-8);
  }

  .nav-mobile-toggle {
    display: none;
  }

  /* --- Hero --- */
  .hero-inner {
    flex-direction: row;
    align-items:    center;
    gap:            var(--space-12);
  }

  .hero-content {
    flex: 55;
  }

  .hero-widget {
    flex:       45;
    min-height: 420px;
    flex-shrink: 0;
  }

  .hero-subtitle {
    font-size: 20px;
  }

  .hero-stat-value {
    font-size: 28px;
  }

  /* --- Dolor --- */
  .dolor-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- Steps --- */
  .steps-grid {
    flex-direction: row;
    gap:            var(--space-6);
  }

  .step-card {
    flex: 1;
  }

  /* --- Automatizaciones --- */
  .flow-nodes {
    flex-direction: row;
    align-items:    center;
  }

  .flow-node {
    flex:      1;
    min-width: 140px;
  }

  .flow-connector {
    flex-direction: row;
    padding:        0;
    align-items:    center;
    justify-content: center;
    writing-mode:   horizontal-tb;
    font-size:      20px;
  }

  .use-cases-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- Preview reporte con perspectiva --- */
  .reporte-frame {
    transform: perspective(1000px) rotateX(3deg);
    transform-origin: center top;
  }

  /* --- Servicios --- */
  .pricing-grid {
    flex-direction: row;
    align-items:    flex-start;
  }

  .pricing-card {
    flex: 1;
  }

  .pricing-card.featured {
    transform: scale(1.02);
  }

  /* --- Testimonios --- */
  .testimonios-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- Contador --- */
  .contador-display {
    font-size: 80px;
  }

  .contador-currency {
    font-size: 48px;
  }

  /* --- CTA title --- */
  .cta-title {
    font-size: 42px;
  }

  /* --- Footer --- */
  .footer-top {
    flex-direction: row;
    gap:            var(--space-12);
  }

  .footer-brand {
    flex: 2;
  }

  .footer-col {
    flex: 1;
  }
}


/* ============================================================
   UTILIDADES DE DELAY — para animate-on-scroll
   ============================================================ */

.delay-1 { --delay: 1; }
.delay-2 { --delay: 2; }
.delay-3 { --delay: 3; }
.delay-4 { --delay: 4; }
.delay-5 { --delay: 5; }


/* ============================================================
   SCORE BAR WIDTHS — usadas en #preview-reporte mockup
   ============================================================ */

.sw-22 { width: 22%; }
.sw-28 { width: 28%; }
.sw-38 { width: 38%; }
.sw-45 { width: 45%; }
.sw-55 { width: 55%; }
.sw-72 { width: 72%; }
.sw-85 { width: 85%; }


/* ============================================================
   PREFERS-REDUCED-MOTION — siempre al final
   ============================================================ */

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

  .animate-on-scroll,
  .animate-fade-in,
  .animate-slide-right,
  .animate-slide-left {
    opacity:   1;
    transform: none;
  }

  .skeleton-line::after,
  .skeleton-block::after {
    animation: none;
  }
}


/* ============================================================
   CAMBIO 5 · Botón CTA contador — más prominente
   ============================================================ */

#contador .btn {
  padding:    20px 48px;
  font-size:  18px;
  margin-top: 32px;
}


/* ============================================================
   CAMBIO 9 · Urgency banner
   ============================================================ */

.urgency-banner {
  background:    rgba(255, 107, 53, 0.08);
  border:        1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding:       20px 28px;
  margin:        0 auto 48px;
  max-width:     820px;
  display:       flex;
  align-items:   center;
  gap:           16px;
  flex-wrap:     wrap;
}

.urgency-icon {
  font-size:   28px;
  flex-shrink: 0;
}

.urgency-text {
  flex:      1;
  min-width: 200px;
}

.urgency-text strong {
  display:       block;
  font-size:     16px;
  color:         var(--text-primary);
  margin-bottom: 4px;
}

.urgency-text span {
  font-size: 13px;
  color:     var(--text-secondary);
}

.btn-urgency {
  background:      var(--accent);
  color:           #fff;
  padding:         12px 20px;
  border-radius:   var(--radius-md);
  font-size:       14px;
  font-weight:     600;
  text-decoration: none;
  white-space:     nowrap;
  flex-shrink:     0;
  transition:      opacity 0.2s ease;
}

.btn-urgency:hover {
  opacity: 0.88;
}

@media (max-width: 768px) {
  .urgency-banner {
    flex-direction: column;
    text-align:     center;
  }
  .btn-urgency {
    width:      100%;
    text-align: center;
  }
}


/* ============================================================
   CAMBIO 10 · Sección Quiénes somos
   ============================================================ */

#quienes-somos {
  padding: 100px 40px;
}

#quienes-somos .section-subtitle {
  font-size:     18px;
  color:         var(--text-secondary);
  max-width:     640px;
  margin-bottom: 48px;
  line-height:   1.6;
}

.who-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
}

.who-card {
  background:    var(--bg-surface);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding:       28px;
  transition:    var(--transition);
}

.who-card:hover {
  border-color: var(--accent);
}

.who-card [data-lucide] {
  width:         32px;
  height:        32px;
  color:         var(--accent);
  margin-bottom: 16px;
}

.who-card h3 {
  font-size:     17px;
  font-weight:   600;
  margin-bottom: 8px;
}

.who-card p {
  font-size:   14px;
  color:       var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .who-grid {
    grid-template-columns: 1fr;
  }
  #quienes-somos {
    padding: 60px 20px;
  }
}


/* ============================================================
   CAMBIO 6 · Urgency final + banner wrap
   ============================================================ */

.urgency-banner-wrap {
  padding: 24px 0;
}

.urgency-final {
  max-width:  520px;
  margin:     0 auto 32px;
  text-align: center;
}

.urgency-final-text {
  font-size:   16px;
  color:       var(--text-secondary);
  line-height: 1.6;
}

.urgency-final-text strong {
  color:       var(--danger);
  font-weight: 600;
}


/* ============================================================
   CAMBIO 7 · Como funciona — centrar
   ============================================================ */

#como-funciona .section-header {
  text-align: center;
}

.steps-grid {
  max-width:     1000px;
  margin:        0 auto;
  justify-items: center;
}


/* ============================================================
   CAMBIO 8 · Quiénes somos — who-stats
   ============================================================ */

.who-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
  margin-bottom:         48px;
  padding:               32px;
  background:            var(--bg-surface);
  border:                1px solid var(--bg-border);
  border-radius:         var(--radius-lg);
}

.who-stat {
  text-align: center;
}

.who-number {
  display:     block;
  font-size:   36px;
  font-weight: 700;
  color:       var(--accent);
  font-family: var(--font-mono);
}

.who-label {
  font-size: 13px;
  color:     var(--text-secondary);
}

@media (max-width: 768px) {
  .who-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* ============================================================
   CAMBIO 9 · Navbar móvil — ocultar botón CTA
   ============================================================ */

@media (max-width: 768px) {
  .nav-cta,
  nav .btn-primary,
  #navbar .btn-primary {
    display: none !important;
  }
}


/* ============================================================
   CAMBIO 10 · Hero móvil — centrar
   ============================================================ */

@media (max-width: 768px) {
  #hero {
    text-align: center;
    padding:    40px 20px;
  }

  #hero h1,
  .hero-title {
    font-size:  38px;
    text-align: center;
  }

  #hero .hero-eyebrow {
    display:         flex;
    justify-content: center;
    margin-bottom:   24px;
  }

  .hero-loss-wrap {
    align-items: center;
  }

  #hero p {
    text-align: center;
    margin:     0 auto;
  }

  .hero-ctas {
    flex-direction: column;
    align-items:    center;
    gap:            12px;
  }

  .hero-ctas .btn {
    width:           100%;
    max-width:       340px;
    text-align:      center;
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
    text-align:      center;
  }
}


/* ============================================================
   Contador en CTA final
   ============================================================ */

.cta-counter {
  text-align:    center;
  margin-bottom: 40px;
}

.cta-counter-label {
  font-size:     16px;
  font-weight:   400;
  font-family:   var(--font-sans);
  color:         var(--text-secondary);
  line-height:   1.6;
  margin-bottom: 12px;
}

.cta-counter-number {
  display:         flex;
  align-items:     baseline;
  justify-content: center;
  gap:             4px;
}

.cta-dollar {
  font-size:      48px;
  font-weight:    700;
  color:          var(--accent);
  font-family:    var(--font-mono);
  line-height:    1;
  vertical-align: baseline;
  margin-right:   4px;
}

#loss-counter {
  font-size:   72px;
  font-weight: 700;
  color:       var(--accent);
  font-family: var(--font-mono);
  line-height: 1;
}