/* ==========================================================================
   CashLessTap — hoja de estilos principal
   Sistema de diseño propio, sin frameworks ni CDNs. Ver README.md para las
   decisiones detrás de cada bloque.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
/* Paleta de partida: misma familia que las apps de operador (#5B2EE0 +
   Poppins, ver DESIGN-HANDOFF). Se extiende con estados success/warning/
   danger tomados 1:1 del mismo sistema para que la marca se reconozca. */

:root {
  /* Marca */
  --brand: #5B2EE0;
  --brand-dark: #4A25B8;
  --brand-tint: #EFEAFD;
  --brand-line: #C9BCF6;
  --brand-ink-on-brand: #FFFFFF;

  /* Superficie y texto (claro) */
  --bg: #FAF9F6;
  --bg-raised: #FFFFFF;
  --bg-section: #EFEDE7;
  /* Franja alterna de <section> (decisión 2026-08-22): de los dos grises que
     alternaban las secciones de index.html (--bg y --bg-section), el más
     oscuro de los dos (--bg-section, EFEDE7 vs F6F4F0) pasa a blanco puro.
     Token separado a propósito de --bg-section, que sigue igual porque lo
     reutilizan footer/.toc/.callout y esos no son parte del par alterno. */
  --bg-stripe: #FFFFFF;
  --ink-primary: #1C1B18;
  --ink-secondary: #57534A;
  --ink-muted: #6E685E;
  --border-card: #E0DBD1;
  --border-control: #D8D3C8;
  --border-divider: #EFECE5;

  /* Estados (heredados del sistema de producto) */
  --success-green: #178A50;
  --success-text: #116B3E;
  --success-bg: #E9F5EE;
  --success-border: #BFE3CD;
  --warning-amber: #E8A013;
  --warning-text: #8A5B00;
  --warning-bg: #FDF3E3;
  --warning-border: #EBCB8F;
  --danger: #B02A27;
  --danger-bg: #FDECEA;
  --danger-border: #F3C6C3;

  /* Tipografía */
  --font-brand: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace;

  /* Geometría */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(28, 27, 24, 0.04), 0 8px 24px rgba(28, 27, 24, 0.06);
  --shadow-lifted: 0 12px 32px rgba(28, 27, 24, 0.12);
  --max-width: 1120px;

  --motion-fast: 140ms;
  --motion-base: 220ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  color-scheme: light;
}

/* ---- Tema oscuro --------------------------------------------------------
   Explícito con data-theme (toggle) y por prefers-color-scheme (sistema).
   El producto (apps) no tiene dark mode; el sitio corporativo sí, por
   accesibilidad y porque es lectura larga (términos/privacidad). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16151B;
    --bg-raised: #1E1D26;
    --bg-section: #201F28;
    /* Tema oscuro no cambia por la decisión 2026-08-22 (esa fue solo para
       tema claro): la franja alterna sigue usando el mismo gris oscuro que
       ya tenía --bg-section. */
    --bg-stripe: #201F28;
    --ink-primary: #F3F1EC;
    --ink-secondary: #C9C5BB;
    --ink-muted: #918C82;
    --border-card: #322F3B;
    --border-control: #3A3745;
    --border-divider: #2A2833;
    --brand: #9B7BEA;
    --brand-dark: #7C57D6;
    --brand-tint: #2A2140;
    --brand-line: #5B4A8A;
    --success-bg: #10281C;
    --success-border: #1E4430;
    --success-text: #4ED892;
    --warning-bg: #2E2410;
    --warning-border: #4D3D16;
    --warning-text: #F0C46B;
    --danger-bg: #2E1614;
    --danger-border: #4D2320;
    --danger: #F0716D;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.32);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #16151B;
  --bg-raised: #1E1D26;
  --bg-section: #201F28;
  --bg-stripe: #201F28;
  --ink-primary: #F3F1EC;
  --ink-secondary: #C9C5BB;
  --ink-muted: #918C82;
  --border-card: #322F3B;
  --border-control: #3A3745;
  --border-divider: #2A2833;
  --brand: #9B7BEA;
  --brand-dark: #7C57D6;
  --brand-tint: #2A2140;
  --brand-line: #5B4A8A;
  --success-bg: #10281C;
  --success-border: #1E4430;
  --success-text: #4ED892;
  --warning-bg: #2E2410;
  --warning-border: #4D3D16;
  --warning-text: #F0C46B;
  --danger-bg: #2E1614;
  --danger-border: #4D2320;
  --danger: #F0716D;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.32);
  color-scheme: dark;
}

/* ---- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-primary);
  font-family: var(--font-brand);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background var(--motion-base) var(--ease), color var(--motion-base) var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; }
p { margin: 0 0 1em; color: var(--ink-secondary); }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; color: var(--ink-secondary); }
li { margin-bottom: 0.4em; }
strong { color: var(--ink-primary); font-weight: 600; }

/* Foco visible en toda la navegación por teclado */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  z-index: 200;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ---- 3. Tipografía --------------------------------------------------------*/
.h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.01em; }
.h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.01em; }
.h3 { font-size: 1.25rem; font-weight: 700; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.lede { font-size: 1.15rem; color: var(--ink-secondary); max-width: 62ch; }
.text-muted { color: var(--ink-muted); }
.mono { font-family: var(--font-mono); }

/* ---- 4. Layout general -----------------------------------------------------*/
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border-divider);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-lockup svg { width: 30px; height: 30px; }
.brand-wordmark {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink-primary);
  white-space: nowrap;
}
.brand-wordmark span { color: var(--brand); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-secondary);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  background: var(--brand-tint);
  color: var(--brand);
}
.nav-actions { display: flex; align-items: center; gap: 8px; }

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-control);
  background: var(--bg-raised);
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--brand-line); color: var(--brand); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* Selector de idioma: dos enlaces reales (sin JS), cada uno apuntando a la
   version ES/EN de la MISMA pagina — nunca a la portada del otro idioma.
   Vive en .nav-actions a proposito: esa franja nunca se oculta por debajo de
   860px (a diferencia de .nav-links), asi que el selector queda accesible
   en cualquier ancho, con o sin JavaScript. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-pill);
  padding: 3px;
  background: var(--bg-raised);
  flex-shrink: 0;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink-secondary);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.lang-switch a:hover { color: var(--brand); }
.lang-switch a[aria-current="true"] {
  background: var(--brand-tint);
  color: var(--brand);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--border-control);
  background: var(--bg-raised);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Ahora es un <summary>, no un <button>: quita el marcador de
     divulgación nativo (triángulo) en los navegadores que lo dibujan
     incluso con otro `display`. */
  list-style: none;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle::marker { content: ""; }

/* Menú de navegación accesible SIN JavaScript por debajo de 860px
   (W6, decisión 2026-08-22): <nav>/.nav-links vive dentro de un
   <details class="nav-disclosure"> con <summary class="nav-toggle"> como
   disparador. La apertura/cierre la maneja el navegador de forma nativa
   (teclado incluido, con estado expandido/colapsado expuesto solo por el
   propio elemento) -- assets/js/main.js solo mejora la experiencia
   cerrando el menú al navegar a un ancla de la misma página, nunca es
   requisito para que el menú funcione. */
.nav-disclosure { position: relative; }
@media (min-width: 861px) {
  /* En escritorio el <details> no debe generar caja propia: su hijo
     <nav> debe comportarse como si fuera hijo directo de .nav (flex),
     exactamente en la misma posición que ocupaba antes de envolverlo. */
  .nav-disclosure { display: contents; }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  /* Reordena para que el botón de menú quede a la derecha, junto al
     selector de idioma y el de tema, como antes de envolver <nav> en
     <details> (el orden en el DOM cambió, el visual no). */
  .nav-disclosure { order: 3; }
  .nav-actions { order: 2; }
  .nav-links {
    position: fixed;
    inset: 64px 16px auto 16px;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-raised);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    padding: 8px;
    box-shadow: var(--shadow-lifted);
    /* Sin `display: none` aquí a propósito: cuando <details> está
       cerrado, el navegador ya deja de renderizar este contenido (no es
       CSS nuestro, es el comportamiento nativo del elemento). Cuando
       está abierto, esto es exactamente el panel que queremos ver. */
    display: flex;
  }
  .nav-links a { text-align: left; }
}

main { display: block; }

section { padding: 88px 0; }
section.tight { padding: 56px 0; }
@media (max-width: 720px) {
  section { padding: 56px 0; }
  section.tight { padding: 40px 0; }
}

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- 5. Botones -----------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--bg-raised); color: var(--ink-primary); border-color: var(--border-control); }
.btn-secondary:hover { border-color: var(--brand-line); color: var(--brand); }
.btn-ghost { background: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--brand-tint); }
.btn-sm { height: 42px; padding: 0 20px; font-size: 0.9rem; }
.btn-block { width: 100%; }

/* ---- 6. Tarjetas y superficies --------------------------------------------*/
.card {
  background: var(--bg-raised);
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.card-flat {
  background: var(--bg-raised);
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 20px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
}
.pill-brand { background: var(--brand-tint); color: var(--brand); }
.pill-success { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
.pill-warning { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.grid {
  display: grid;
  gap: 20px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.como-funciona-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4, .como-funciona-grid { grid-template-columns: 1fr; }
}

/* ---- 7. Hero ---------------------------------------------------------------*/
.hero {
  padding: 92px 0 48px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--brand-tint) 0%, transparent 70%);
  z-index: -1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-meta {
  display: flex;
  gap: 24px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.hero-meta div { min-width: 120px; }
.hero-meta .num { font-size: 1.5rem; font-weight: 800; color: var(--ink-primary); }
.hero-meta .lbl { font-size: 0.82rem; color: var(--ink-muted); }

/* Visual del hero: fotografía real de un cobro con pulsera NFC en un evento.
   Sustituye al mockup de dos teléfonos dibujados en CSS (retirado el 22-08-2026
   por decisión del usuario) -- se quitó también todo su CSS, no se dejó
   huérfano: `.device-stack`, `.phone*` y `.wristband-illustration` ya no existen
   en ninguna página.

   La foto SANGRA hasta el borde derecho de la ventana con `margin-right:
   calc(50% - 50vw)`, que es lo que la saca del `.container`. Funciona sin
   provocar barra horizontal porque `.hero` tiene `overflow: hidden` -- si algún
   día se le quita, esto empieza a desbordar. */
.hero-visual {
  position: relative;
}

.hero-photo {
  margin: 0;
  position: relative;
  /* Solo las esquinas izquierdas: el lado derecho llega justo al borde de la
     ventana, y redondearlo ahí no se vería. */
  border-radius: 200px 0 0 200px;
  overflow: hidden;
  box-shadow: var(--shadow-lifted);

  /* SANGRADO HASTA EL BORDE DERECHO, calculado contra el contenedor real.
     El atajo habitual `calc(50% - 50vw)` NO sirve aquí: ese `50%` se resuelve
     contra la COLUMNA del grid, no contra el `.container` centrado, así que la
     foto se pasaba ~330 px de la ventana y se comía a la vendedora y la tablet
     -- justo el producto. Se calcula con los valores reales del contenedor:
     el margen que sobra a cada lado, más su padding.
     `max(0px, ...)` para que en ventanas más angostas que 1120 px no salga
     negativo e invierta el efecto. */
  margin-right: calc(-1 * (max(0px, (100vw - var(--max-width))) / 2 + 24px));
}

/* Resplandor de marca detrás del borde curvo, del lado por donde entra la foto.
   `z-index: -1` y no un pseudo-elemento dentro de `.hero-photo`, porque ahí
   quedaría recortado por el `overflow: hidden` y no se vería asomar. */
.hero-photo::before {
  content: "";
  position: absolute;
  left: -14%;
  bottom: -18%;
  width: 55%;
  height: 70%;
  background: radial-gradient(circle, var(--brand-tint) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  /* `cover` y no `contain`: la foto se recorta al alto disponible en vez de
     dejar franjas. El punto focal está en las manos y la pulsera, ligeramente a
     la izquierda del centro, así que se ancla ahí y no al centro geométrico. */
  object-fit: cover;
  /* La escena que vende el producto -- pulsera, mano y tablet -- está a la
     derecha del centro geométrico, así que se ancla ahí: con `50%` la vendedora
     se pierde por el borde. */
  object-position: 62% 50%;
  aspect-ratio: 4 / 3;
}

@media (max-width: 900px) {
  /* Con una sola columna la foto deja de sangrar: pasa a tarjeta normal, porque
     un borde derecho fuera de pantalla en móvil solo recorta contenido útil. */
  .hero-photo {
    margin-right: 0;
    border-radius: var(--radius-lg, 24px);
  }
  .hero-photo img { aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  .hero-photo { border-radius: 18px; }
  .hero-photo img { aspect-ratio: 3 / 2; }
}


/* ---- 8. Features / listas con icono ----------------------------------------*/
.feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { margin-bottom: 4px; font-size: 1.05rem; }
.feature p { margin: 0; font-size: 0.95rem; }

.step {
  display: flex;
  gap: 18px;
}
.step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink-primary);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.step:not(:last-child) {
  padding-bottom: 28px;
  border-left: 1.5px dashed var(--border-control);
  margin-left: 15px;
  padding-left: 33px;
}
.step:last-child { margin-left: 15px; padding-left: 33px; }

/* ---- 9. Tabla de precisión / comisión --------------------------------------*/
table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
table.spec th, table.spec td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-divider);
}
table.spec th { color: var(--ink-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
table.spec td { color: var(--ink-secondary); }
.table-scroll { overflow-x: auto; border: 1.5px solid var(--border-card); border-radius: var(--radius-md); }
.table-scroll table.spec { min-width: 480px; }
.table-scroll table.spec th:first-child, .table-scroll table.spec td:first-child { padding-left: 18px; }

/* ---- 10. CTA / banda final --------------------------------------------------*/
.cta-band {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 56px;
  color: #fff;
  text-align: center;
}
.cta-band .h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.86); }
.cta-band .btn-secondary { background: #fff; border-color: transparent; }
@media (max-width: 620px) {
  .cta-band { padding: 36px 24px; }
}

/* ---- 11. Formularios --------------------------------------------------------*/
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: var(--ink-primary);
}
.field .hint { font-size: 0.8rem; color: var(--ink-muted); margin-top: 6px; }
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--font-brand);
  font-size: 0.96rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-control);
  background: var(--bg-raised);
  color: var(--ink-primary);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.field textarea { resize: vertical; min-height: 120px; }
.checkbox-field { display: flex; gap: 10px; align-items: flex-start; }
.checkbox-field input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.checkbox-field label { font-weight: 400; font-size: 0.88rem; color: var(--ink-secondary); }

.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.ok { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
.form-status.warn { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }

/* ---- 12. Callouts / avisos ---------------------------------------------------*/
.callout {
  border-radius: var(--radius-md);
  padding: 18px 20px;
  border: 1.5px solid var(--border-card);
  background: var(--bg-section);
  display: flex;
  gap: 14px;
}
.callout svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand); margin-top: 2px; }
.callout.warn { background: var(--warning-bg); border-color: var(--warning-border); }
.callout.warn svg { color: var(--warning-text); }
.callout p:last-child { margin-bottom: 0; }

.placeholder {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px dashed var(--warning-border);
  border-radius: 6px;
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-weight: 600;
  white-space: normal;
}

/* ---- 13. Documentos legales ----------------------------------------------*/
.legal {
  max-width: 760px;
  margin: 0 auto;
}
.legal h2 { margin-top: 2.2em; font-size: 1.3rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.05rem; margin-top: 1.6em; }
.legal ol, .legal ul { color: var(--ink-secondary); }
.legal .updated { color: var(--ink-muted); font-size: 0.88rem; margin-bottom: 2em; }
.toc {
  background: var(--bg-section);
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 2.4em;
}
.toc p { margin-bottom: 8px; font-weight: 700; color: var(--ink-primary); }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 24px; }
@media (max-width: 620px) { .toc ol { columns: 1; } }
.toc a { text-decoration: none; color: var(--brand); font-size: 0.92rem; }
.toc a:hover { text-decoration: underline; }

/* ---- 14. Recuperación de saldo --------------------------------------------*/
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-divider);
  color: var(--ink-secondary);
}
.checklist li:last-child { border-bottom: none; }
.checklist svg { width: 20px; height: 20px; color: var(--brand); flex-shrink: 0; margin-top: 1px; }

.status-timeline { display: flex; flex-direction: column; gap: 0; }
.status-step { display: flex; gap: 16px; }
.status-step .dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem; flex-shrink: 0;
}
.status-step:not(:last-child) {
  border-left: 1.5px dashed var(--border-control);
  margin-left: 13px;
  padding: 0 0 26px 27px;
}
.status-step:last-child { margin-left: 13px; padding-left: 27px; }
.status-step h3 { margin-bottom: 3px; font-size: 1rem; }
.status-step p { font-size: 0.92rem; margin-bottom: 0; }

/* ---- 15. Footer -------------------------------------------------------------*/
footer.site-footer {
  border-top: 1px solid var(--border-divider);
  padding: 56px 0 32px;
  background: var(--bg-section);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
/* .footer-heading es un <p>, no un <h4>: son etiquetas de un grupo de
   enlaces de navegación, no encabezados de contenido -- tenerlas como <h4>
   generaba un salto de nivel (el último encabezado real de la página antes
   del <footer> es casi siempre <h2>/<h3>) detectado en la auditoría de
   accesibilidad (docs/a11y-auditoria.md). Mismo tratamiento visual. */
.footer-col .footer-heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { text-decoration: none; color: var(--ink-secondary); font-size: 0.92rem; }
.footer-col a:hover { color: var(--brand); }
.footer-legal-entity { color: var(--ink-secondary); font-size: 0.88rem; line-height: 1.6; }
.footer-bottom {
  border-top: 1px solid var(--border-divider);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

/* ---- 16. Ilustraciones ------------------------------------------------------
   Todo hecho a mano en SVG/CSS, sin imágenes rasterizadas ni CDN — ver
   README para qué explica cada pieza y por qué es (o no es) interactiva. */

/* Revelado genérico al hacer scroll: usado por los diagramas decorativos.
   prefers-reduced-motion ya está cubierto por la regla global de la
   sección 2 (fuerza duraciones a ~0), así que aquí solo se define la
   transición normal. */
.reveal-onscroll {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}
.reveal-onscroll.is-visible {
  opacity: 1;
  transform: none;
}

/* -- Flujo del asistente: recarga → compra → saldo restante ---------------
   Diagrama decorativo junto al listado de pasos de "Cómo funciona"; el
   texto accesible ya está en los <h3>/<p> de al lado, así que este bloque
   completo es aria-hidden. */
.flow-diagram {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 40px;
  padding: 0 8px;
}
.flow-line {
  position: absolute;
  top: 27px;
  left: 40px;
  right: 40px;
  width: calc(100% - 80px);
  height: 4px;
  overflow: visible;
}
.flow-line path {
  fill: none;
  stroke: var(--brand-line);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 4 8;
}
.flow-line .flow-line-fill {
  stroke: var(--brand);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.1s var(--ease) 200ms;
}
.reveal-onscroll.is-visible .flow-line-fill { stroke-dashoffset: 0; }
.flow-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  text-align: center;
}
.flow-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1.5px solid var(--brand-line);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-icon svg { width: 26px; height: 26px; }
.flow-node span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-secondary);
}
@media (max-width: 620px) {
  .flow-diagram { padding: 0; }
}

/* -- Offline-first: la venta sobrevive sin señal ---------------------------
   Diagrama de dos estaciones (dispositivo → servidor) con un punto que
   recorre el trayecto mientras la etiqueta pasa de "Pendiente" a
   "Sincronizada". Es el diferenciador principal del producto y el más
   abstracto de explicar solo con texto, así que es la pieza con más
   justificación para animarse en bucle mientras está a la vista. */
.sync-diagram {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto 48px;
  padding: 28px 20px;
  background: var(--bg-raised);
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-lg);
}
.sync-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 128px;
  text-align: center;
}
.sync-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sync-icon svg { width: 26px; height: 26px; }
.sync-node > span:not(.sync-tag) { font-size: 0.85rem; font-weight: 700; color: var(--ink-primary); }
.sync-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
}
.sync-tag.pending { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }
.sync-tag.synced { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); opacity: 0; }
.reveal-onscroll.is-visible .sync-tag.pending { animation: syncPendingBlink 3.2s var(--ease) infinite; }
.reveal-onscroll.is-visible .sync-tag.synced { animation: syncSyncedBlink 3.2s var(--ease) infinite; }
@keyframes syncPendingBlink {
  0%, 55% { opacity: 1; }
  70%, 100% { opacity: 0.35; }
}
@keyframes syncSyncedBlink {
  0%, 60% { opacity: 0; }
  75%, 100% { opacity: 1; }
}
.sync-path { flex: 1; min-width: 60px; height: 30px; overflow: visible; }
.sync-path path {
  fill: none;
  stroke: var(--border-control);
  stroke-width: 2;
  stroke-dasharray: 3 6;
}
.sync-dot { fill: var(--brand); }
.reveal-onscroll.is-visible .sync-dot {
  offset-path: path('M10 20 H190');
  animation: syncTravel 3.2s var(--ease) infinite;
}
@keyframes syncTravel {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  55% { offset-distance: 100%; opacity: 1; }
  62%, 100% { offset-distance: 100%; opacity: 0; }
}
@media (max-width: 620px) {
  .sync-diagram { flex-direction: column; padding: 24px 16px; }
  .sync-path { width: 30px; height: 60px; transform: rotate(90deg); }
  .sync-node { width: auto; }
}

/* -- Maqueta del panel del organizador --------------------------------------
   Representación estilizada de "ventas en tiempo real" — nunca una
   captura real ni cifras que parezcan datos verdaderos de un evento: las
   barras son proporciones arbitrarias y las etiquetas son genéricas. */
.panel-mock-figure { margin: 0 0 40px; }
.panel-mock {
  /* Colores fijos a propósito (no tokens de tema): esto imita la
     pantalla siempre-oscura del panel de producto real, así que debe
     verse igual en el sitio claro y en el oscuro, nunca invertirse con
     --ink-primary (que sí cambia de claro a oscuro). */
  background: #17151F;
  border-radius: var(--radius-lg);
  padding: 20px 22px 16px;
  box-shadow: var(--shadow-lifted);
}
.panel-mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #F3F1EC;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.panel-mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ED892;
  animation: panelLive 1.8s var(--ease) infinite;
}
@keyframes panelLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(78, 216, 146, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(78, 216, 146, 0); }
}
.panel-mock-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.panel-mock-stats > div {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.panel-mock-stats .lbl {
  display: block;
  font-size: 0.68rem;
  color: rgba(243,241,236,0.6);
  margin-bottom: 4px;
}
.panel-mock-stats .val {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: #F3F1EC;
  letter-spacing: 0.04em;
}
.panel-mock-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 90px;
  padding: 0 2px;
}
.panel-mock-chart .bar {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, #9B7BEA 0%, #5B2EE0 100%);
  border-radius: 5px 5px 0 0;
  animation: panelBar 3.6s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes panelBar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.92); }
}
.panel-mock-chart .bar { transform-origin: bottom; }
.panel-mock-legend {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
}
.panel-mock-legend span {
  flex: 1;
  text-align: center;
  font-size: 0.62rem;
  color: rgba(243,241,236,0.55);
}
.panel-mock-figure figcaption {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--ink-muted);
  text-align: center;
}
@media (max-width: 480px) {
  .panel-mock-stats { grid-template-columns: 1fr 1fr; }
  .panel-mock-stats > div:last-child { grid-column: span 2; }
}

/* -- Portal Cliente (futuro): tag + documento + OTP ------------------------
   Vista previa del flujo que tendrá el portal cuando exista, junto al
   botón deshabilitado en recuperacion-saldo.html. */
.portal-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0;
}
.portal-flow-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.portal-flow-icon svg { width: 22px; height: 22px; }
.portal-flow-arrow {
  color: var(--ink-muted);
  flex-shrink: 0;
}
.portal-flow-arrow svg { width: 16px; height: 16px; }

/* Botón deshabilitado de verdad (no un enlace roto ni una promesa vacía):
   atributo `disabled` nativo, fuera del tabulado, con el motivo explicado
   en el texto de ayuda contiguo (#portal-cliente-hint). */
.btn:disabled, .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn:disabled:hover, .btn[disabled]:hover {
  background: var(--bg-raised);
  border-color: var(--border-control);
  color: var(--ink-primary);
}

/* ---- 17. Utilidades ---------------------------------------------------------*/
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.flex-center { display: flex; align-items: center; }
[hidden] { display: none !important; }