:root {
  /* =========================
     BRAND · Identidad (AZUL)
     ========================= */
  --brand-50:  #EEF3FF;
  --brand-100: #DCE6FF;
  --brand-200: #B6C9FF;
  --brand-300: #8EABF2;
  --brand-400: #5F85D9;
  --brand-500: #3666C0; /* ✅ AZUL IDENTIDAD */
  --brand-600: #2F58A8; /* hover */
  --brand-700: #274A8F; /* active */
  --brand-800: #1E3B73;
  --brand-900: #162A52;

  /* ==================
     SEMANTIC BRAND
     ================== */
  --primary:        var(--brand-500);
  --primary-hover:  var(--brand-600);
  --primary-active: var(--brand-700);

  --primary-soft-bg:   rgba(54, 102, 192, 0.08);
  --primary-soft-text: var(--brand-700);
  --primary-contrast:  #FFFFFF;

  /* =========================
     NEUTROS · Descanso visual
     ========================= */
  --bg:          #F2F4F7; /* fondo app */
  --surface:     #FFFFFF; /* cards, tablas */
  --surface-2:   #F7F8FA; /* alterno */
  --border:      #E5E7EB;
  --border-soft: #EEF0F3;

  --text:        #1F2937; /* texto principal */
  --text-muted:  #6B7280;
  --text-soft:   #94A3B8;

  /* =========================
     LAYOUT · Estructura POS
     ========================= */
  --nav-bg:      var(--brand-500); /* sidebar */
  --nav-hover:   rgba(255, 255, 255, 0.12);
  --nav-active:  rgba(255, 255, 255, 0.18);
  --nav-text:    #F8FAFC;
  --nav-muted:   #DCE6FF;

  /* ==================
     ESTADOS (no azul)
     ================== */
  --success:     #2F7D5C;
  --warning:     #B08900;
  --danger:      #8B1E1E;
  --info:        var(--brand-500);

  /* ==================
     ACCESIBILIDAD
     ================== */
  --focus-ring: rgba(54, 102, 192, 0.4);

  /* ==================
     UI TOKENS
     ================== */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
}

.logo {
  height: 40px;
  width: auto;
  vertical-align: middle;
}

.logo-container {
  padding: var(--space-3) 0;
}

/* =========================
   Mobile-first fixes
   (pegar al final del archivo)
   ========================= */

/* 1) Tipografía fluida (mejor lectura en mobile + desktop) */
html {
  /* Antes: 24px fijo (muy grande en móvil)
     Ahora: fluido según viewport */
  font-size: clamp(16px, 1.2vw + 12px, 20px);
}

/* 2) Container: usa padding en lugar de margin fijo */
.container {
  max-width: 1100px;
  margin: var(--space-1) auto;
  padding: 0 var(--space-4);
}

.section {
  padding: 72px 0;
}

.section-xs {
  padding: 24px 0;
}

/* 4) Mejor “touch targets” en mobile */
.btn {
  min-height: 44px;
}

body {
  font-size: 0.875rem; /* 14px */
  line-height: 1.6;
  color: var(--text);
}

h1 {
  font-size: 1.75rem; /* 28px */
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

h2 {
  font-size: 1.375rem; /* 22px */
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

h3 {
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

p {
  font-size: 0.875rem; /* 14px */
  line-height: 1.6;
  color: var(--text);
}


span {
  font-size: 0.875rem;
  color: var(--text);
}

.small,
small {
  font-size: 0.75rem; /* 12px */
  line-height: 1.4;
  color: var(--text-muted);
}

.text-muted {
  color: var(--text-muted);
}

.text-soft {
  color: var(--text-soft);
}

.text-danger {
  color: var(--danger);
}

.text-success {
  color: var(--success);
}

.bg-app {
  background-color: var(--bg);
}

.bg-surface {
  background-color: var(--surface);
}

.bg-surface-2 {
  background-color: var(--surface-2);
}

.bg-primary-soft {
  background-color: var(--primary-soft-bg);
  color: var(--primary-soft-text);
}

.bg-surface-dark {
  background-color: var(--brand-900);
  color: var(--nav-text);
}

.bg-surface-dark h1,
.bg-surface-dark h2,
.bg-surface-dark h3,
.bg-surface-dark h4 {
  color: var(--nav-text);
}

.bg-surface-dark p,
.bg-surface-dark span,
.bg-surface-dark li {
  color: var(--nav-muted);
}

/* Small en contexto oscuro */
.bg-surface-dark small,
.bg-surface-dark .small {
  color: var(--nav-muted);
}

.section {
  padding: 90px 0;
}

.section-xs {
 padding: 30px 0;
}

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

.text-right {
  text-align: right;
}

.mb-1 {
  margin-bottom: 10px;
}

/* List */
.list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);

  padding: 0;
  margin: 0;
  list-style: none;
}

/* Item */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);

  background-color: var(--surface);
  color: var(--text);
}

/* Hover sutil */
.list-item.is-hoverable:hover {
  background-color: var(--surface-2);
}

/* Item activo / seleccionado */
.list-item.is-active {
  background-color: var(--primary-soft-bg);
}

a {
  text-decoration: none;
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);

  font-size: 0.875rem;
  font-weight: 500;

  background-color: var(--primary);
  color: var(--primary-contrast);

  border: none;
  cursor: pointer;

  box-shadow: var(--shadow-sm);
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Hover */
.btn:hover:not(:disabled) {
  background-color: var(--primary-hover);
}

/* Active */
.btn:active:not(:disabled) {
  background-color: var(--primary-active);
}

/* Focus (accesibilidad) */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Disabled */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* =========================
   Button Secondary
   Uso: <button class="btn btn-secondary">...</button>
   ========================= */

.btn-secondary {
  background-color: var(--surface);
  color: var(--primary);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--surface-2);
  border-color: var(--brand-200);
}

.btn-secondary:active:not(:disabled) {
  background-color: var(--primary-soft-bg);
  border-color: var(--brand-300);
}

.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* =========================
   Card · Light / Sutil
   ========================= */

.card {
  background-color: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);

  padding: var(--space-4);
  box-shadow: none;
}

/* Título */
.card-title {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  color: var(--text);
}

/* Cuerpo */
.card-body {
  color: var(--text-muted);
}

.card-body p {
  margin: 0;
}

/* =========================
   Card · Dark context support
   ========================= */

.bg-surface-dark .card {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Título en oscuro */
.bg-surface-dark .card-title {
  color: var(--nav-text);
}

/* Texto */
.bg-surface-dark .card-body {
  color: var(--nav-muted);
}

/* =========================
   Accordion · Flat & Minimal
   Uso:
   <details class="accordion">
     <summary class="accordion-header">Título</summary>
     <div class="accordion-body">Contenido</div>
   </details>
   ========================= */

.accordion {
  background-color: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);

  padding: 0;
  overflow: hidden;
}

/* Header */
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--space-3) var(--space-4);
  cursor: pointer;

  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);

  list-style: none;
}

/* Quitar marcador nativo */
.accordion-header::-webkit-details-marker {
  display: none;
}

/* Indicador */
.accordion-header::after {
  content: "+";
  font-size: 1rem;
  color: var(--text-soft);
  transition: transform 0.15s ease;
}

/* Abierto */
.accordion[open] .accordion-header::after {
  content: "–";
}

/* Hover muy sutil */
.accordion-header:hover {
  background-color: var(--surface-2);
}

/* Body */
.accordion-body {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-soft);

  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Focus accesible */
.accordion-header:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

/* =========================
   Dark context support
   ========================= */

.bg-surface-dark .accordion {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.bg-surface-dark .accordion-header {
  color: var(--nav-text);
}

.bg-surface-dark .accordion-header::after {
  color: var(--nav-muted);
}

.bg-surface-dark .accordion-body {
  color: var(--nav-muted);
  border-top-color: rgba(255, 255, 255, 0.08);
}

.bg-surface-dark .accordion-header:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* =========================
   Pricing Card · Lius Café
   ========================= */

.card-pricing {
  max-width: 420px;
  margin: 0 auto;
  position: relative;
}

.card-pricing .pricing-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);

  font-size: 0.75rem;
  font-weight: 500;

  padding: 4px 10px;
  border-radius: var(--radius-sm);

  background-color: var(--primary-soft-bg);
  color: var(--primary-soft-text);

  white-space: nowrap;
}

.card-pricing .card-title {
  margin-bottom: var(--space-2);
}

.card-pricing .card-subtitle {
  margin-bottom: var(--space-3);
}

.card-pricing .price {
  font-size: 1.5rem;
  font-weight: 600;

  color: var(--success);
  background-color: rgba(47, 125, 92, 0.08); /* verde muy soft */

  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);

  margin-bottom: var(--space-4);
}


/* Lista de features */
.card-pricing .features {
  margin-bottom: var(--space-4);
}

/* Separador sutil entre software y hardware */
.card-pricing .features-group {
  margin-bottom: var(--space-3);
}

.card-pricing .features-title {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  margin-bottom: var(--space-1);
}

/* Botón full width */
.card-pricing .btn {
  width: 100%;
}

/* Nota inferior */
.card-pricing .card-note {
  margin-top: var(--space-2);
  text-align: center;
}

/* 5) Evita que elementos largos (badge, textos) rompan layout */
.card-pricing .pricing-badge {
  max-width: calc(100% - (var(--space-3) * 2));
  overflow: hidden;
  text-overflow: ellipsis;
}

.container-img {
  border: 10px solid #3667c0;
  border-radius: 12px;
  align-self: center;
}

.hero-video-wrapper {
  position: relative;
}

.hero-video {
  display: block;
  width: 100%;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  border: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.hero-video-overlay:hover {
  background: rgba(0, 0, 0, 0.55);
}

.container {
  margin: 10px;
}

/* =========================
   Responsive · Mobile
   ========================= */
@media screen and (max-width: 767px) {

  .logo {
    height: 32px;
    width: auto;
    vertical-align: middle;
  }

  .logo-container {
    padding: var(--space-2) 0;
  }

  /* Container más compacto */
  .container {
    padding: 0 var(--space-3);
  }

  /* Secciones más cortas */
  .section {
    padding: 44px 0;
  }

  .section-xs {
    padding: 18px 0;
  }

  /* Títulos: bajamos un poco para que no “rompan” */
  h1 {
    font-size: 1.375rem; /* ~22px aprox con base fluida */
    line-height: 1.2;
  }

  h2 {
    font-size: 1.125rem; /* ~18px */
    line-height: 1.25;
  }

  h3 {
    font-size: 1rem; /* ~16px */
    line-height: 1.3;
  }

  /* Cards: menos padding para que quepan mejor */
  .card {
    padding: var(--space-3);
  }

  /* Lists: evita que se vean “pesadas” en móvil */
  .list-item {
    padding: var(--space-2) var(--space-3);
  }

  /* Pricing card: ocupa todo el ancho disponible */
  .card-pricing {
    max-width: 100%;
  }

  /* Badge: que no sea una “tira” gigante */
  .card-pricing .pricing-badge {
    top: var(--space-2);
    right: var(--space-2);
    font-size: 0.75rem;
    padding: 4px 8px;
  }

  /* Precio: un poco más compacto */
  .card-pricing .price {
    font-size: 1.375rem;
    padding: var(--space-1) var(--space-2);
  }

  /* Botones: full width en mobile (mejor UX) */
  .btn {
    width: 100%;
  }

  .container {
    margin: 0;
  }
}