/* ==========================================================================
   ClicScan — site.css
   Sistema de diseño base. Arquetipo Mago-Sabio: base oscura cálida (Tinta),
   un solo acento (naranja = "aquí actúa la IA"), datos siempre en Plex Mono.
   Motivo de marca: la línea de escaneo (línea naranja + punto).
   ========================================================================== */

/* --- Reset mínimo ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}

/* --- Base ------------------------------------------------------------------ */
body{
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  background:var(--niebla);
  color:var(--tinta);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Display / titulares — Bricolage 700, sentence case (nunca todo mayúsculas) */
.display,h1{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(2.5rem,6vw,5rem);
  line-height:1.05;
  letter-spacing:-.02em;
}
h2{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.75rem,3.5vw,2.5rem);
  line-height:1.2;
  letter-spacing:-.01em;
}
h3{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.25rem;
  line-height:1.25;
}

/* --- Layout ---------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--sp-3);
}

/* ==========================================================================
   Temas — cada sección declara sus variables; los componentes las heredan.
   ========================================================================== */
.theme-dark{
  background:var(--tinta);
  color:var(--niebla);
  --fg:var(--niebla);
  --muted:var(--gris-500);
  --acento:var(--naranja);      /* sobre oscuro el acento de texto sí es señal */
  --sup:var(--sup-oscura);
  --borde:var(--borde-oscuro);
  --grid-dot:var(--borde-oscuro);
}
.theme-light{
  background:var(--niebla);
  color:var(--tinta);
  --fg:var(--tinta);
  --muted:var(--gris-700);
  --acento:var(--naranja-prof); /* naranja señal PROHIBIDO como texto sobre claro */
  --sup:var(--tarjeta-clara);
  --borde:var(--gris-200);
  --grid-dot:var(--gris-200);
}
.theme-dark a{color:var(--naranja)}
.theme-light a{color:var(--naranja-prof)}

/* --- Enlace de acento ------------------------------------------------------ */
.link-acento{
  color:var(--acento);
  text-decoration:none;
  font-weight:500;
  border-bottom:1.5px solid transparent;
  transition:border-color .18s ease;
}
.link-acento:hover{border-bottom-color:currentColor}

/* ==========================================================================
   Botones — un solo botón naranja (.btn-primary) por pantalla.
   ========================================================================== */
.btn-primary,.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--f-body);
  font-weight:600;
  font-size:1rem;
  line-height:1;
  padding:.85rem 1.4rem;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease;
}
.btn-primary{
  background:var(--naranja);
  color:var(--tinta);          /* texto tinta sobre naranja señal */
}
.btn-primary:hover{background:#ff8a5b;transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{
  background:transparent;
  color:var(--fg);
  border-color:var(--borde);
}
.btn-ghost:hover{border-color:var(--acento);color:var(--acento)}

/* ==========================================================================
   Datos en mono — todo valor extraído va en IBM Plex Mono.
   ========================================================================== */
.mono{
  font-family:var(--f-mono);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* Etiqueta de sección — mono, mayúsculas, 12px, tracking +10% */
.section-label{
  display:inline-block;
  font-family:var(--f-mono);
  font-weight:500;
  font-size:12px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--acento);
}

/* ==========================================================================
   Chips
   ========================================================================== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--f-mono);
  font-weight:500;
  font-size:.75rem;
  line-height:1;
  padding:.4rem .65rem;
  border-radius:999px;
  background:var(--sup);
  border:1px solid var(--borde);
  color:var(--fg);
}

/* Chip de confianza: punto naranja + nivel de certeza de la extracción.
   Niveles (brandbook): ≥98% naranja-tinta · 90–98% neutro · <90% borde óxido. */
.chip-conf{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--f-mono);
  font-weight:500;
  font-size:.75rem;
  line-height:1;
  padding:.4rem .7rem;
  border-radius:999px;
  border:1px solid var(--borde);
  background:var(--sup);
  color:var(--fg);
}
.chip-conf::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--naranja);   /* el punto: aquí actuó la IA */
  flex:none;
}
/* ≥98% — alta confianza: naranja señal + texto tinta */
.chip-conf--alta{
  background:var(--naranja);
  border-color:var(--naranja);
  color:var(--tinta);
}
.chip-conf--alta::before{background:var(--tinta)}
/* 90–98% — media: neutro (usa sup/borde por defecto), punto naranja */
.chip-conf--media{ /* hereda base neutra */ }
/* <90% — revisión: borde óxido, punto óxido */
.chip-conf--baja{
  border-color:var(--oxido);
  color:var(--fg);
}
.chip-conf--baja::before{background:var(--oxido)}

/* ==========================================================================
   Línea de escaneo — el motivo de marca como separador.
   Línea de 2px naranja con un punto de 10px en el centro.
   ========================================================================== */
.scan-divider{
  position:relative;
  height:2px;
  border:0;
  margin:var(--sp-4) 0;
  background:var(--naranja);
}
.scan-divider::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--naranja);
  transform:translate(-50%,-50%);
}

/* Retícula punteada de 24px — textura de fondo de la plataforma. */
.dot-grid{
  background-image:radial-gradient(var(--grid-dot) 1px,transparent 1px);
  background-size:24px 24px;
}

/* ==========================================================================
   Tarjeta
   ========================================================================== */
.card{
  background:var(--sup);
  border:1px solid var(--borde);
  border-radius:var(--radius);
  padding:var(--sp-3);
}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted)}

/* Utilidades de texto atenuado */
.muted{color:var(--muted)}

/* ==========================================================================
   Encabezado fijo — superficie oscura con desenfoque.
   ========================================================================== */
:root{--header-h:4.5rem}
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  background:rgba(22,17,13,.72);      /* Tinta translúcida */
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde-oscuro);
  color:var(--niebla);
}
.site-header__bar{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  min-height:var(--header-h);
  padding-block:.75rem;
}
.site-header__logo{display:inline-flex;align-items:center;flex:none}
.site-header__logo img{height:48px;width:auto}
.site-header__spacer{flex:1}

.site-nav ul{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
}
.site-nav a{
  color:var(--niebla);
  text-decoration:none;
  font-weight:500;
  font-size:.95rem;
  padding:.4rem 0;
  border-bottom:1.5px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.site-nav a:hover{color:var(--naranja);border-bottom-color:var(--naranja)}

/* La regla `.site-nav a` de arriba (elemento+clase) gana por especificidad
   sobre `.btn-primary` (solo clase) y comprime el botón "Solicita una demo"
   a su padding de enlace de texto en escritorio. Se restituye el padding
   cómodo de botón solo en el layout de escritorio (fila); en móvil el CTA
   sigue el patrón de fila completa del menú desplegable, sin tocarlo. */
@media (min-width:821px){
  .site-nav a.btn-primary{
    padding:.85rem 1.4rem;
    border-bottom-color:transparent;
  }
  .site-nav a.btn-primary:hover{border-bottom-color:transparent}
}

/* Botón hamburguesa (oculto en escritorio) */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  background:transparent;
  border:1.5px solid var(--borde-oscuro);
  border-radius:var(--radius);
  cursor:pointer;
}
.nav-toggle svg{stroke:var(--niebla);stroke-width:2;width:22px;height:22px}

/* Compensación por el encabezado fijo */
.page{padding-top:var(--header-h)}

/* ==========================================================================
   Pie de página — siempre superficie oscura.
   ========================================================================== */
.site-footer{
  padding-block:var(--sp-5) var(--sp-4);
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1.4fr repeat(4,1fr);
  gap:var(--sp-4) var(--sp-3);
  align-items:start;
}
.site-footer__brand img{height:30px;width:auto;margin-bottom:var(--sp-2)}
.site-footer__brand p{color:var(--gris-500);max-width:26ch;font-size:.9rem}
.site-footer__col h4{
  font-family:var(--f-mono);
  font-weight:500;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gris-500);
  margin-bottom:var(--sp-2);
}
.site-footer__col ul{display:flex;flex-direction:column;gap:.6rem}
.site-footer__col a{
  color:var(--niebla);
  text-decoration:none;
  font-size:.92rem;
  border-bottom:1.5px solid transparent;
}
.site-footer__col a:hover{color:var(--naranja);border-bottom-color:var(--naranja)}

.site-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2) var(--sp-3);
  margin-top:var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px solid var(--borde-oscuro);
  color:var(--gris-500);
  font-size:.85rem;
}
.site-footer__legal{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.site-footer__legal a{color:var(--gris-500);text-decoration:none}
.site-footer__legal a:hover{color:var(--niebla)}
#weglot-switcher{margin-left:auto}

/* ==========================================================================
   Secciones de muestra (esqueleto). Tareas posteriores las reemplazan.
   ========================================================================== */
.section{padding-block:var(--sp-6)}
.section--hero{padding-top:var(--sp-5)}
.hero__eyebrow{margin-bottom:var(--sp-2)}
.hero__lede{
  max-width:52ch;
  font-size:1.15rem;
  color:var(--muted);
  margin-top:var(--sp-3);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin-top:var(--sp-4);
}
.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:var(--sp-3);
}

.field-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  padding-block:.75rem;
  border-bottom:1px solid var(--borde);
}
.field-row:last-child{border-bottom:0}
.field-row__key{color:var(--muted);font-size:.85rem}
.field-row__val{display:flex;align-items:center;gap:.75rem}

.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.section__head{max-width:60ch}
.section__head h2{margin-top:var(--sp-2)}
.section__head p{margin-top:var(--sp-2);color:var(--muted)}

/* ==========================================================================
   Accesibilidad — foco visible en toda la interfaz.
   ========================================================================== */
:focus-visible{
  outline:2px solid var(--naranja);
  outline-offset:2px;
  border-radius:4px;
}
.skip-link{
  position:absolute;
  left:var(--sp-2);top:-100%;
  z-index:200;
  background:var(--naranja);
  color:var(--tinta);
  padding:.6rem 1rem;
  border-radius:var(--radius);
  font-weight:600;
  text-decoration:none;
  transition:top .18s ease;
}
.skip-link:focus{top:var(--sp-2)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:absolute;
    inset:var(--header-h) 0 auto 0;
    background:rgba(22,17,13,.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--borde-oscuro);
    max-height:0;
    overflow:hidden;
    transition:max-height .28s ease;
  }
  .site-header.is-open .site-nav{max-height:70vh}
  .site-nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:var(--sp-2) var(--sp-3) var(--sp-3);
  }
  .site-nav li{width:100%}
  .site-nav a{display:block;width:100%;padding:.85rem 0;border-bottom:1px solid var(--borde-oscuro)}
  .site-nav .site-nav__cta{margin-top:var(--sp-2)}
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .site-footer__brand{grid-column:1 / -1}
}

@media (max-width:520px){
  .container{padding-inline:var(--sp-2)}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn-primary,.hero__actions .btn-ghost{justify-content:center}
  .site-footer__grid{grid-template-columns:1fr}
  #weglot-switcher{margin-left:0}
}

/* ==========================================================================
   HOME (index.html) — secciones de la portada. Reutiliza tokens y la escala
   de espaciado; el único elemento audaz es la demo del hero.
   ========================================================================== */

/* Utilidad: alternativa de texto para lectores de pantalla ------------------ */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Los botones son enlaces (<a>): dentro de una sección con tema, la regla
   `.theme-* a` (color naranja) tiene más especificidad que `.btn-*` y teñía el
   texto. Se restituye el color correcto con especificidad de elemento+clase. */
a.btn-primary{color:var(--tinta)}
a.btn-ghost{color:var(--fg)}
a.btn-ghost:hover{color:var(--acento)}

/* --- 1 · Hero: copy + demo ------------------------------------------------- */
.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
  align-items:center;
}
.hero__copy{max-width:30ch}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--sp-5)}
  .hero__copy{max-width:none}
}

/* Panel de la demo: papel a escanear + salida de datos */
.hero-demo{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
  align-items:center;
  padding:var(--sp-3);
  background:var(--sup);
  border:1px solid var(--borde);
  border-radius:var(--radius);
  transition:opacity .5s ease;
}
.hero-demo.is-fading{opacity:.12}
@media (min-width:560px){
  .hero-demo{grid-template-columns:auto 1fr;gap:var(--sp-4)}
}

/* El papel crema con líneas grises simulando texto */
.hero-demo__paper{
  position:relative;
  width:100%;
  max-width:190px;
  margin-inline:auto;
  padding:1rem;
  background:var(--crema);
  border-radius:8px;
  box-shadow:0 12px 34px rgba(0,0,0,.4);
  overflow:hidden;
}
.hero-demo__doc-label{
  display:block;
  margin-bottom:.75rem;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gris-500);
}
.hero-demo__line{
  display:block;
  height:6px;
  margin-bottom:.5rem;
  border-radius:3px;
  background:var(--gris-200);
}
.hero-demo__line--head{height:9px;width:64%;margin-bottom:.9rem;background:var(--gris-500)}
.hero-demo__line--gap{margin-top:.9rem}

/* La línea de escaneo que barre el papel (motivo de marca, horizontal) */
.hero-demo__scan{
  position:absolute;
  left:0;right:0;top:0;
  height:2px;
  background:var(--naranja);
  box-shadow:0 0 14px 2px rgba(255,122,69,.55);
  will-change:transform;
}
.hero-demo__scan::after{
  content:"";
  position:absolute;
  left:0;right:0;top:2px;
  height:44px;
  background:linear-gradient(to bottom,rgba(255,122,69,.22),transparent);
}
/* En modo animado (JS) la línea y los campos arrancan ocultos.
   Sin JS o con movimiento reducido permanecen visibles (estado final). */
.hero-demo.is-anim .hero-demo__scan{opacity:0}

/* Salida de datos extraídos */
.hero-demo__out{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin:0;
  padding:0;
  list-style:none;
}
.hero-demo__field{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .65rem;
}
.hero-demo__val{
  font-size:.82rem;
  color:var(--fg);
  white-space:nowrap;
}
.hero-demo.is-anim .hero-demo__field{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease;
}
.hero-demo.is-anim .hero-demo__field.is-shown{opacity:1;transform:none}
.hero-demo.is-anim .hero-demo__field .chip-conf{opacity:0;transition:opacity .3s ease .45s}
.hero-demo.is-anim .hero-demo__field.is-shown .chip-conf{opacity:1}

/* --- 3 · Pipeline: cinco pasos con la línea de escaneo horizontal ---------- */
.pipeline{margin-top:var(--sp-4)}
.pipeline__track{
  position:relative;
  height:2px;
  margin-bottom:var(--sp-4);
  background:var(--naranja);
  border-radius:2px;
}
.pipeline__dot{
  position:absolute;
  top:50%;left:0;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--naranja);
  box-shadow:0 0 12px 3px rgba(255,122,69,.5);
  transform:translate(-50%,-50%);
  animation:pipeline-run 6s ease-in-out infinite;
}
@keyframes pipeline-run{
  0%{left:0}
  50%{left:100%}
  100%{left:0}
}
.pipeline__steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-3);
  margin:0;
  padding:0;
  list-style:none;
}
.pipeline__step{display:flex;flex-direction:column;gap:.5rem}
.pipeline__num{
  font-size:.8rem;
  font-weight:500;
  color:var(--acento);
  letter-spacing:.06em;
}
.pipeline__step h3{margin-top:.15rem}
.pipeline__step p{color:var(--muted)}
.pipeline__ex{
  display:inline-block;
  align-self:flex-start;
  max-width:100%;
  padding:.4rem .6rem;
  border-radius:8px;
  background:var(--sup);
  border:1px solid var(--borde);
  font-size:.75rem;
  color:var(--fg);
  overflow-wrap:anywhere;
}
.pipeline__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.15rem}

/* --- 4 · IA: chips de modelos --------------------------------------------- */
.model-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:var(--sp-3);
  margin-bottom:var(--sp-4);
}

/* --- 5 · Verticales: sección con fondo tarjeta + tarjetas enlazables ------- */
.section--panel{background:var(--tarjeta-clara)}
.grid-cards--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* Modificador de grilla fija: 1 columna en móvil, 2 en tablet, 3 en escritorio
   (dos filas de tres). Usado por la sección de Seguridad de Home (6 tarjetas). */
.grid-cards--3{grid-template-columns:1fr}
@media (min-width:700px){.grid-cards--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid-cards--3{grid-template-columns:repeat(3,1fr)}}
a.card{
  text-decoration:none;
  color:inherit;
  transition:transform .16s ease,border-color .16s ease;
}
.vcard{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  background:var(--niebla);
}
.vcard:hover{transform:translateY(-2px);border-color:var(--acento)}
.vcard__go{
  margin-top:auto;
  align-self:flex-start;
  font-family:var(--f-mono);
  color:var(--acento);
}

/* --- 6 · Banda de cifras --------------------------------------------------- */
.stat-band__list{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
}
@media (min-width:760px){
  .stat-band__list{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
}
.stat-band__item{
  position:relative;
  padding-top:var(--sp-3);
  font-size:clamp(1.1rem,2.2vw,1.5rem);
  line-height:1.25;
  color:var(--fg);
  border-top:2px solid var(--naranja);
}

/* --- 7 · Partners teaser --------------------------------------------------- */
.partners-teaser p{color:var(--muted)}
.partners-teaser>p:last-child{margin-top:var(--sp-3)}

/* --- 8 · CTA final --------------------------------------------------------- */
.cta-final{text-align:center}
.cta-final__title{margin-bottom:var(--sp-4)}
.cta-final .hero__actions{justify-content:center;margin-top:0}

/* ==========================================================================
   PRODUCTO (producto.html) — cómo funciona. Reutiliza tokens y patrones de
   Home (.card, .chip-conf, .hero-demo__paper, .field-row, .pipeline__chips);
   añade solo lo específico de esta página.
   ========================================================================== */

/* --- Hero claro: solo copy, sin demo --------------------------------------- */
.hero__copy--wide{max-width:56ch}

/* --- Letra chica de transparencia (Entradas, Seguridad) -------------------- */
.spec-line{
  margin-top:.6rem;
  padding-top:.6rem;
  border-top:1px solid var(--borde);
  font-size:.82rem;
  color:var(--muted);
}
.spec-line code{overflow-wrap:anywhere}
.spec-line--standalone{
  margin-top:var(--sp-3);
  padding-top:0;
  border-top:0;
  text-align:center;
}

/* --- 2 · Pipeline cognitivo: mockup documento → campos --------------------- */
.doc-flow{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
  align-items:center;
  margin-top:var(--sp-4);
  margin-bottom:var(--sp-5);
}
.doc-flow__paper{margin-inline:auto}
.doc-flow__arrow{
  display:none;
  font-family:var(--f-mono);
  font-size:1.5rem;
  color:var(--acento);
  text-align:center;
}
.doc-flow__fields{display:flex;flex-direction:column}
@media (min-width:760px){
  .doc-flow{grid-template-columns:auto auto 1fr;gap:var(--sp-4)}
  .doc-flow__arrow{display:block}
}

/* --- 3 · Precisión auditable: escala de confianza --------------------------- */
.conf-scale{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  margin-top:var(--sp-4);
}
.conf-scale__item{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
}
.conf-scale__label{color:var(--muted)}

/* --- 5 · Entrega: conectores, formatos y pie ------------------------------- */
/* V2.3: la grilla de 6 conectores ahora usa grid-cards--3 (3×2 en escritorio,
   2×3 en tablet, 1 col en móvil) para forzar 2 filas de 3; se retiró
   grid-cards--connectors (auto-fit) porque generaba 4+2 en vez de 3+3. */
.connector-card{display:flex;flex-direction:column;gap:.5rem}
.connector-card__icon{
  width:26px;height:26px;
  stroke:var(--acento);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-bottom:.25rem;
}
.delivery-formats{margin-top:var(--sp-4)}
.delivery-formats p{color:var(--muted);margin-bottom:.6rem}
.entrega-footer{
  margin-top:var(--sp-4);
  padding:var(--sp-3);
  border-radius:var(--radius);
  border:1px solid var(--borde);
}
.entrega-footer p{margin:0;color:var(--muted)}

/* ==========================================================================
   SOLUCIONES (soluciones.html) — verticales por industria. Reutiliza tokens
   y patrones existentes (.chip, .section-label, .card); añade solo la nav
   secundaria sticky y el bloque de cada vertical.
   ========================================================================== */

/* --- Nav secundaria sticky: pills de ancla, siempre superficie clara ------- */
.subnav{
  position:sticky;
  top:var(--header-h);
  z-index:90;
  background:rgba(250,246,236,.92);   /* Crema translúcido: chrome propio, no depende del tema debajo */
  border-bottom:1px solid var(--gris-200);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.subnav__inner{
  display:flex;
  gap:.6rem;
  padding-block:.85rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.subnav a{
  flex:none;
  display:inline-flex;
  align-items:center;
  font-family:var(--f-mono);
  font-weight:500;
  font-size:.85rem;
  padding:.5rem 1rem;
  border-radius:999px;
  border:1px solid var(--gris-200);
  background:var(--tarjeta-clara);
  color:var(--tinta);
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .16s ease,color .16s ease;
}
.subnav a:hover,.subnav a:focus-visible{border-color:var(--naranja-prof);color:var(--naranja-prof)}

/* Afinidad de anclaje: compensa encabezado fijo + nav sticky al saltar a una vertical */
.vertical-section{scroll-margin-top:calc(var(--header-h) + 4.75rem)}

/* --- Bloque de cada vertical: dolor → qué lee ClicScan → resultado -------- */
.vertical__top{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:var(--sp-2);
}
.vertical__icon{
  width:28px;height:28px;
  color:var(--acento);
  flex:none;
}
.vertical__top h2{margin:0}

.vertical__pain{max-width:56ch;color:var(--muted);margin-top:var(--sp-2)}

.vertical__reads{margin-top:var(--sp-4)}
.vertical__reads-label{
  font-family:var(--f-mono);
  font-size:.75rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:.6rem;
}
.vertical__chips{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.vertical__extra{font-size:.85rem;color:var(--muted)}

.vertical__result{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  max-width:56ch;
  margin-top:var(--sp-4);
}
.vertical__result::before{
  content:"";
  width:2px;
  align-self:stretch;
  border-radius:1px;
  background:var(--naranja);
  flex:none;
}
.vertical__result strong{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.05rem;
  line-height:1.4;
  color:var(--fg);
}

/* Overflow affordance: desvanecido a la derecha cuando las pills no caben. */
@media (max-width:820px){
  .subnav::after{
    content:"";
    position:absolute;
    top:0;right:0;bottom:0;
    width:2rem;
    background:linear-gradient(to left,rgba(250,246,236,.95),transparent);
    pointer-events:none;
  }
}

/* ==========================================================================
   PARTNERS (partners.html) — programa de canal. Reutiliza tokens y patrones
   existentes (.section__head, .chip-conf, .dot-grid); añade solo el diagrama
   del modelo de negocio y el mockup del portal de contadores.
   ========================================================================== */

/* --- 2 · El modelo: base + excedente → dos tipos de clic ------------------- */
.model-diagram{margin-top:var(--sp-4)}
.model-diagram__base{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
}
.model-diagram__piece{
  flex:1;
  background:var(--sup);
  border:1px solid var(--borde);
  border-radius:var(--radius);
  padding:var(--sp-3);
}
.model-diagram__tag{
  display:block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--acento);
  margin-bottom:.4rem;
}
.model-diagram__piece p{
  margin:0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.05rem;
  color:var(--fg);
}
.model-diagram__connector{flex:none;color:var(--acento)}
.model-diagram__connector--h{width:48px;height:20px}
.model-diagram__connector--branch{
  display:block;
  width:100%;
  max-width:260px;
  height:56px;
  margin-inline:auto;
  color:var(--borde);
}
.model-diagram__split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-3);
}
.model-diagram__click{
  background:var(--sup);
  border:1px solid var(--borde);
  border-radius:var(--radius);
  padding:var(--sp-3);
}
.model-diagram__click h3{margin-bottom:.35rem}
.model-diagram__click p{color:var(--muted)}
.model-diagram__dot{
  display:inline-block;
  width:10px;height:10px;
  border-radius:50%;
  margin-bottom:.6rem;
}
/* Básico = escala de gris, Avanzado = acento — el mismo par B/N y color de
   toda la vida, ahora aplicado al clic digital. */
.model-diagram__dot--basico{background:var(--gris-500)}
.model-diagram__dot--avanzado{background:var(--naranja)}
.model-diagram__analogy{
  margin-top:var(--sp-3);
  text-align:center;
  font-style:italic;
  color:var(--muted);
}
@media (max-width:700px){
  .model-diagram__base{flex-direction:column}
  .model-diagram__connector--h{transform:rotate(90deg)}
  .model-diagram__split{grid-template-columns:1fr}
}

/* --- 3 · Tu portal: mockup de tabla de contadores -------------------------- */
.portal-mock{
  margin-top:var(--sp-4);
  background:var(--sup);
  border:1px solid var(--borde);
  border-radius:var(--radius);
  overflow:hidden;
}
.portal-mock__bar{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.65rem var(--sp-3);
  border-bottom:1px solid var(--borde);
}
.portal-mock__dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--gris-500);
  opacity:.6;
}
.portal-mock__bar-label{
  margin-left:auto;
  font-size:.7rem;
  color:var(--gris-500);
  letter-spacing:.04em;
}
.portal-mock__scroll{overflow-x:auto}
.portal-mock__table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.portal-mock__table th,.portal-mock__table td{
  padding:.75rem var(--sp-3);
  text-align:left;
  white-space:nowrap;
  border-bottom:1px solid var(--borde);
}
.portal-mock__table thead th{
  font-family:var(--f-mono);
  font-size:.7rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.portal-mock__table tbody th{font-weight:500;color:var(--fg)}
.portal-mock__table tbody tr:last-child th,
.portal-mock__table tbody tr:last-child td{border-bottom:0}
/* Fila de alerta: tinte sutil de óxido, mismo tono que chip-conf--baja */
.portal-mock__alert th,.portal-mock__alert td{background:rgba(140,59,27,.12)}

/* ==========================================================================
   FORMULARIOS (demo.html, contacto.html) — campos de formulario, estados de
   envío y layout de las dos páginas de conversión. Reutiliza tokens y --sup/
   --borde/--fg heredados del tema de la sección (aquí siempre .theme-light),
   más la barra izquierda de acento ya vista en .vertical__result y el tinte
   de alerta ya visto en .portal-mock__alert para los estados de éxito/error.
   ========================================================================== */

/* --- V2.3: ritmo vertical (formulario más arriba) --------------------------
   .section y .section--hero son globales (todas las páginas), así que el
   recorte de padding va en modificadores propios de contacto.html y
   demo.html, aplicados junto a esas clases solo en el hero y en la sección
   del formulario de esas dos páginas. */
.section--hero-form{padding-bottom:var(--sp-2)}
.section--form-page{padding-top:var(--sp-3)}

/* --- Envoltura + layout de página ------------------------------------------ */
.form-shell{max-width:640px}
.form-panel{
  /* V2.3: sp-4 → sp-2. .form-panel es exclusivo de contacto.html/demo.html
     (no se usa en ninguna otra página), así que se ajusta aquí directo en
     vez de con un modificador: menos separación del hero, formulario más
     arriba en ambas páginas. */
  margin-top:var(--sp-2);
  padding:var(--sp-4);
  background:var(--sup);
  border:1px solid var(--borde);
  border-radius:var(--radius);
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  align-items:start;
}
@media (min-width:860px){
  .contact-grid{grid-template-columns:1.3fr 1fr}
}
.contact-cards{display:flex;flex-direction:column;gap:var(--sp-3)}
.contact-card p{color:var(--muted);margin-top:.35rem}
.contact-card .vcard__go{margin-top:var(--sp-2);display:inline-block}
.contact-card address{
  margin-top:.35rem;
  font-style:normal;
  color:var(--muted);
  line-height:1.5;
}
.contact-card address strong{
  display:block;
  font-weight:600;
  color:var(--fg);
}

/* --- Estructura del formulario ---------------------------------------------- */
.form-body{display:flex;flex-direction:column;gap:var(--sp-3)}
.form-row{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
@media (min-width:560px){
  .form-row{grid-template-columns:1fr 1fr}
}
.form-field{display:flex;flex-direction:column;gap:.5rem}
.form-label{font-weight:600;font-size:.92rem;color:var(--fg)}
.form-label .form-optional{font-weight:400;font-size:.82rem;color:var(--muted)}
/* El requerido no depende solo del color: el asterisco es un carácter propio
   y va acompañado de texto equivalente para lectores de pantalla (.sr-only
   en el markup de cada label). */
.form-required{color:var(--oxido);margin-left:.15rem}

/* --- Controles: inputs, selects, textarea ----------------------------------- */
.form-input{
  display:block;
  width:100%;
  padding:.75rem .9rem;
  background:var(--niebla);
  border:1.5px solid var(--borde);
  border-radius:calc(var(--radius) - 4px);
  font-size:1rem;
  line-height:1.4;
  color:var(--fg);
  transition:border-color .16s ease;
}
.form-input::placeholder{color:var(--muted)}
.form-input:hover{border-color:var(--gris-500)}
.form-input:focus-visible{border-color:var(--acento)}
textarea.form-input{resize:vertical;min-height:6.5rem}
select.form-input{cursor:pointer}

/* --- Fieldset / radios ------------------------------------------------------- */
.form-fieldset{border:0;margin:0;padding:0}
.form-fieldset .form-label{display:block;margin-bottom:.75rem}
.form-radio-group{display:flex;flex-direction:column;gap:.6rem}
@media (min-width:560px){
  .form-radio-group{flex-direction:row;flex-wrap:wrap}
}
.form-radio{
  display:flex;
  align-items:center;
  gap:.65rem;
  flex:1;
  padding:.75rem 1rem;
  border:1.5px solid var(--borde);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color .16s ease;
}
.form-radio input{accent-color:var(--acento);width:1.05em;height:1.05em;flex:none}
.form-radio:has(input:checked){border-color:var(--acento)}

/* --- Envío ------------------------------------------------------------------- */
.form-submit-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  margin-top:var(--sp-2);
}
.form-microcopy{font-size:.85rem;color:var(--muted)}

/* --- Estado de envío (región aria-live) -------------------------------------- */
.form-status{margin:0}
.form-status--success{
  margin-top:var(--sp-3);
  padding:var(--sp-3);
  border-left:3px solid var(--acento);
  border-radius:var(--radius);
  background:var(--niebla);
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.1rem;
  color:var(--fg);
}
.form-status--error{
  margin-top:var(--sp-2);
  padding:.85rem 1rem;
  border-left:3px solid var(--oxido);
  border-radius:var(--radius);
  background:rgba(140,59,27,.12);
  font-size:.92rem;
  color:var(--fg);
}
.form-status--info{
  margin-top:var(--sp-2);
  padding:.85rem 1rem;
  border-left:3px solid var(--borde);
  border-radius:var(--radius);
  background:var(--niebla);
  font-size:.92rem;
  color:var(--fg);
}
.form-body[hidden]{display:none}
.form-noscript{
  margin-top:var(--sp-2);
  padding:.85rem 1rem;
  border-left:3px solid var(--borde);
  border-radius:var(--radius);
  background:var(--niebla);
  font-size:.92rem;
  color:var(--fg);
}

@media (max-width:520px){
  .form-panel{padding:var(--sp-3)}
  /* los valores mono de la demo no deben ensanchar la página en móviles angostos */
  .hero-demo__val{white-space:normal;overflow-wrap:anywhere}
}

/* ==========================================================================
   LEGAL (privacidad.html, terminos.html) — columna sobria de prosa, reutiliza
   .section-label, .card y --sup/--borde/--fg heredados de .theme-light.
   ========================================================================== */
.legal-page{max-width:720px}
.legal-page__updated{
  margin-top:var(--sp-2);
  color:var(--muted);
  font-size:.92rem;
}
.legal-page h2{
  margin-top:var(--sp-5);
  margin-bottom:var(--sp-2);
  font-size:1.3rem;
}
.legal-page section:first-of-type h2{margin-top:0}
.legal-page p{margin-top:var(--sp-2)}
.legal-page p:first-child{margin-top:0}
.legal-page ul{margin-top:var(--sp-2)}
.legal-page ul li{
  position:relative;
  padding-left:1.1rem;
  margin-top:.5rem;
}
.legal-page ul li::before{
  content:"";
  position:absolute;
  left:0;top:.65em;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--acento);
}
.legal-page__notice{
  margin-top:var(--sp-5);
  color:var(--muted);
  font-size:.9rem;
}

/* ==========================================================================
   Movimiento reducido — desactiva transiciones y animaciones.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   V2 — SISTEMA GRÁFICO
   Capa de componentes reutilizables para la iteración v2 (luz primero, más
   grafismo). Todo se construye sobre los tokens y el motivo de marca (la
   línea de escaneo naranja) ya definidos arriba. Adición pura: no altera
   ninguna regla v1. Las tareas de página posteriores consumen estas clases.
   Contrato: .hero-split · .flow-diagram · .logo-row · .icon-card · .faq ·
   .theme-light--alt · .section--dark-strategic.
   ========================================================================== */

/* --- Ritmo de luz ---------------------------------------------------------
   Escala de blancos cálidos para alternar el fondo de secciones claras.
   .theme-light      → fondo Niebla,  tarjetas Tarjeta clara.
   .theme-light--alt → fondo Tarjeta clara, tarjetas Blanco (un escalón más
   luminoso, para que las tarjetas sigan despegando del fondo).
   Es un tema COMPLETO y autónomo (mismo contrato de tokens que .theme-light):
   se aplica solo, sin necesidad de combinarlo con .theme-light. */
.theme-light--alt{
  background:var(--tarjeta-clara);
  color:var(--tinta);
  --fg:var(--tinta);
  --muted:var(--gris-700);
  --acento:var(--naranja-prof); /* naranja señal PROHIBIDO como texto sobre claro */
  --sup:var(--blanco);          /* tarjetas un escalón más luminosas que el fondo */
  --borde:var(--gris-200);
  --grid-dot:var(--gris-200);
}
.theme-light--alt a{color:var(--naranja-prof)}

/* Alias semántico: banda oscura usada de forma estratégica dentro de un
   recorrido claro (contraste puntual, "aquí actúa la IA"). Se aplica JUNTO a
   .theme-dark, del que hereda todo el tratamiento; esta clase solo declara la
   intención y habilita acentos de posición. No fuerza ningún estilo propio. */
.section--dark-strategic{position:relative}

/* ==========================================================================
   .hero-split — hero claro a dos columnas (copy izq · media der).
   Colapsa a una columna en móvil. La media puede ser cualquier cosa; la
   variante --panel la convierte en una tarjeta oscura embebida (p. ej. una
   demo animada) redeclarando el tema en local, así funciona dentro de un
   hero claro sin ensuciar el resto.
   ========================================================================== */
.hero-split{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
  align-items:center;
}
@media (min-width:900px){
  .hero-split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
}
.hero-split__copy{max-width:46ch}
.hero-split__copy .hero__lede{max-width:44ch}
.hero-split__media{min-width:0}

/* Variante: tarjeta oscura embebida. Redeclara las variables de tema en
   local para que chips, datos y acento se lean sobre fondo oscuro. */
.hero-split__media--panel{
  padding:var(--sp-4);
  background:var(--sup-oscura);
  border:1px solid var(--borde-oscuro);
  border-radius:var(--radius);
  color:var(--niebla);
  --fg:var(--niebla);
  --muted:var(--gris-500);
  --acento:var(--naranja);     /* dentro del panel oscuro el acento sí es señal */
  --sup:var(--tinta);
  --borde:var(--borde-oscuro);
}
.hero-split__media--panel a{color:var(--naranja)}

/* ==========================================================================
   .flow-diagram — grafismo insignia de la v2.
   Documento (papeles crema apilados) → línea de escaneo → círculo IA central
   (símbolo ClicScan + anillo naranja que barre, chips de motores alrededor)
   → abanico de destinos (icono + etiqueta). Horizontal en escritorio, se
   apila en vertical en móvil.

   Accesibilidad: las partes visuales son decorativas; el consumidor marca el
   contenedor o sus piezas con aria-hidden y ofrece un resumen en .sr-only.
   El anillo se anima con @keyframes; el bloque global de movimiento reducido
   (arriba, con !important) lo detiene sin más trabajo.
   ========================================================================== */
.flow-diagram{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  padding-block:var(--sp-4);
}

/* Origen: papeles crema apilados con un par de líneas de "texto" gris. */
.flow-diagram__source{
  position:relative;
  flex:none;
  width:96px;
  height:120px;
}
.flow-diagram__doc{
  position:absolute;
  inset:0;
  background:var(--crema);
  border:1px solid var(--gris-200);
  border-radius:8px;
  box-shadow:0 6px 20px rgba(22,17,13,.10);
}
.flow-diagram__doc:nth-child(1){transform:translate(10px,-8px) rotate(4deg);opacity:.6}
.flow-diagram__doc:nth-child(2){transform:translate(5px,-3px) rotate(2deg);opacity:.8}
.flow-diagram__doc:nth-child(3){
  transform:none;
  padding:12px 11px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
/* Líneas de texto simuladas sobre el papel superior (::before/::after +
   los propios hijos no aplican; se dibujan con gradientes repetidos). */
.flow-diagram__doc:nth-child(3){
  background:
    linear-gradient(var(--gris-500),var(--gris-500)) 11px 20px/46px 5px no-repeat,
    linear-gradient(var(--gris-200),var(--gris-200)) 11px 34px/62px 4px no-repeat,
    linear-gradient(var(--gris-200),var(--gris-200)) 11px 46px/62px 4px no-repeat,
    linear-gradient(var(--gris-200),var(--gris-200)) 11px 58px/40px 4px no-repeat,
    var(--crema);
}
/* La línea de escaneo del propio papel (motivo de marca). */
.flow-diagram__source::after{
  content:"";
  position:absolute;
  left:-2px;right:-2px;
  top:56%;
  height:2px;
  background:var(--naranja);
  box-shadow:0 0 10px 1px rgba(255,122,69,.5);
  z-index:2;
}

/* Enlaces de escaneo entre nodos: línea naranja + punto de marca. */
.flow-diagram__link{
  position:relative;
  flex:1 1 auto;
  min-width:34px;
  max-width:80px;
  height:2px;
  background:var(--naranja);
  align-self:center;
}
.flow-diagram__link::after{        /* punta/flecha hacia el siguiente nodo */
  content:"";
  position:absolute;
  right:-1px;top:50%;
  width:7px;height:7px;
  border-top:2px solid var(--naranja);
  border-right:2px solid var(--naranja);
  transform:translateY(-50%) rotate(45deg);
}

/* Núcleo IA: símbolo ClicScan + anillo que barre + motores alrededor. */
.flow-diagram__core{
  position:relative;
  flex:none;
  width:140px;height:140px;
  display:grid;
  place-items:center;
}
.flow-diagram__node{
  width:96px;height:96px;
  display:grid;
  place-items:center;
  background:var(--blanco);
  border:1px solid var(--gris-200);
  border-radius:50%;
  box-shadow:0 8px 26px rgba(22,17,13,.12);
}
.flow-diagram__symbol{width:50px;height:auto}
/* Anillo base tenue + arco naranja que gira (el "escaneo" de la IA). */
.flow-diagram__ring{
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:2px solid rgba(255,122,69,.18);
}
.flow-diagram__ring::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,var(--naranja) 84%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:flow-ring-spin 9s linear infinite;
}
@keyframes flow-ring-spin{to{transform:rotate(360deg)}}

/* Chips de motores orbitando (posición estática en las cuatro esquinas). */
.flow-diagram__engines{
  position:absolute;
  inset:0;
  margin:0;padding:0;
  list-style:none;
}
.flow-diagram__engine{
  position:absolute;
  width:30px;height:30px;
  display:grid;
  place-items:center;
  background:var(--blanco);
  border:1px solid var(--gris-200);
  border-radius:50%;
  box-shadow:0 3px 10px rgba(22,17,13,.10);
}
.flow-diagram__engine img{width:17px;height:17px}
.flow-diagram__engine:nth-child(1){top:-2px;left:8px}
.flow-diagram__engine:nth-child(2){top:-2px;right:8px}
.flow-diagram__engine:nth-child(3){bottom:-2px;left:8px}
.flow-diagram__engine:nth-child(4){bottom:-2px;right:8px}

/* Abanico de destinos: <ul> parametrizable de icono + etiqueta. */
.flow-diagram__dests{
  flex:none;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin:0;padding:0;
  list-style:none;
}
.flow-diagram__dest{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .8rem;
  background:var(--sup);
  border:1px solid var(--borde);
  border-radius:999px;
  font-size:.85rem;
  color:var(--fg);
  white-space:nowrap;
}
.flow-diagram__dest img{width:20px;height:20px;flex:none}

/* Abanico de origen: mismo patrón que el abanico de destinos, en espejo del
   lado izquierdo del flow-diagram (las cuatro puertas de entrada: MFP,
   escáner, correo, carga web). Genérico: cualquier <li> con icono+etiqueta. */
.flow-diagram__srcs{
  flex:none;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin:0;padding:0;
  list-style:none;
}
.flow-diagram__src{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .8rem;
  background:var(--sup);
  border:1px solid var(--borde);
  border-radius:999px;
  font-size:.85rem;
  color:var(--fg);
  white-space:nowrap;
}
.flow-diagram__src svg{
  width:20px;height:20px;flex:none;
  fill:none;
  stroke:var(--acento);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Móvil: el flujo se apila en vertical y los enlaces giran a línea vertical. */
@media (max-width:720px){
  .flow-diagram{flex-direction:column}
  .flow-diagram__link{
    width:2px;height:34px;min-width:0;max-width:none;flex:none;
  }
  .flow-diagram__link::after{
    right:50%;top:auto;bottom:-1px;
    transform:translateX(50%) rotate(135deg);
  }
  .flow-diagram__dests,.flow-diagram__srcs{width:100%;max-width:280px}
  .flow-diagram__dest,.flow-diagram__src{justify-content:flex-start}
}

/* ==========================================================================
   .logo-row — fila de logos de motores/conectores (SVG monocromo ~28px) con
   pie de foto en letra chica. Los SVG llevan gris de marca fijo (#5A544E).
   ========================================================================== */
.logo-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--sp-4);
}
.logo-row img{height:44px;width:auto;flex:none}
.logo-row__caption{
  flex-basis:100%;
  font-family:var(--f-mono);
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--muted);
  text-align:center;
}
@media (max-width:520px){
  .logo-row{gap:var(--sp-3)}
  .logo-row img{height:34px}
}
.section--slim .home-fineprint{text-align:center}

/* ==========================================================================
   .icon-card — .card con icono superior en contenedor de 48px (fondo crema
   suave, icono de trazo 2px en --acento) + h3 + p. Sustituye a las tarjetas
   sin icono. El icono es un SVG de trazo que aporta el consumidor.
   ========================================================================== */
.icon-card__icon{
  display:grid;
  place-items:center;
  width:48px;height:48px;
  margin-bottom:var(--sp-2);
  background:var(--crema);
  border-radius:calc(var(--radius) - 2px);
}
.icon-card__icon svg{
  width:24px;height:24px;
  fill:none;
  stroke:var(--acento);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-card h3{margin-bottom:.4rem}

/* ==========================================================================
   .faq — details/summary nativo estilizado (borde, chevron CSS, apertura
   suave). Operable con teclado por defecto (details/summary); foco visible
   heredado de :focus-visible. Movimiento reducido detiene la animación.
   ========================================================================== */
.faq{
  border:1px solid var(--borde);
  border-radius:var(--radius);
  background:var(--sup);
  overflow:hidden;
}
.faq+.faq{margin-top:.6rem}
.faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  padding:1rem var(--sp-3);
  cursor:pointer;
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.05rem;
  line-height:1.3;
  color:var(--fg);
  list-style:none;
}
.faq__q::-webkit-details-marker{display:none}   /* oculta el triángulo nativo */
.faq__q::after{                                  /* chevron CSS */
  content:"";
  flex:none;
  width:.55rem;height:.55rem;
  margin-left:.5rem;
  border-right:2px solid var(--acento);
  border-bottom:2px solid var(--acento);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.faq[open] .faq__q::after{transform:rotate(-135deg)}
.faq__a{
  padding:0 var(--sp-3) 1rem;
  color:var(--muted);
}
.faq__a>*:first-child{margin-top:0}
.faq[open] .faq__a{animation:faq-reveal .22s ease}
@keyframes faq-reveal{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}

/* ==========================================================================
   HOME V2 — recomposición de la portada (luz primero + densidad).
   Reutiliza los componentes v2 (.hero-split, .flow-diagram, .logo-row,
   .icon-card) y los tokens/escala de espaciado. Solo se añade aquí el
   pegamento de composición de esta página: banda esbelta, letra chica de
   marcas, chips con logo, iconos del abanico de destinos, callout, split de
   teaser, mockup de precisión, bloque de seguridad y la tarjeta de cierre.
   Adición pura: no altera reglas anteriores.
   ========================================================================== */

/* Banda esbelta — la tira de motores bajo el hero respira menos. */
.section--slim{padding-block:var(--sp-4)}

/* Letra chica de titularidad de marcas de terceros (una vez por página). */
.home-fineprint{margin-top:var(--sp-2);font-size:.72rem;color:var(--muted)}

/* Chips de motor con logo real (sección de orquestación). */
.logo-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--sp-3);margin-bottom:var(--sp-4)}
.logo-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .8rem;
  border-radius:999px;
  background:var(--sup);
  border:1px solid var(--borde);
  font-family:var(--f-mono);
  font-weight:500;
  font-size:.8rem;
  color:var(--fg);
}
.logo-chip img{width:18px;height:18px;flex:none}

/* Iconos inline (trazo) en el abanico de destinos del flow-diagram. */
.flow-diagram__dest svg{
  width:20px;height:20px;flex:none;
  fill:none;
  stroke:var(--acento);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Párrafo de cierre centrado bajo el diagrama. */
.flow-caption{max-width:58ch;margin:var(--sp-2) auto 0;text-align:center;color:var(--muted)}

/* Callout con barra de acento — el escalamiento inteligente de la IA. */
.callout{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
  max-width:64ch;
  margin-top:var(--sp-4);
}
.callout::before{
  content:"";
  width:3px;
  align-self:stretch;
  border-radius:2px;
  background:var(--naranja);   /* naranja señal como grafismo, nunca como texto */
  flex:none;
}
.callout p{margin:0;color:var(--fg);font-size:1.05rem;line-height:1.5}

/* Split genérico de 2 columnas para teasers claros (copy · visual). */
.split-2{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  align-items:center;
  margin-top:var(--sp-4);
}
@media (min-width:900px){
  .split-2{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
}
.split-2__body h2{margin-top:var(--sp-2)}
.split-2__body>p{margin-top:var(--sp-2);color:var(--muted)}
.split-2__body .link-acento{display:inline-block}

/* Mockup de precisión (reutiliza .field-row + .chip-conf del tema). */
.precision-mock .field-row:first-of-type{padding-top:0}
.precision-mock .field-row:last-of-type{padding-bottom:0}
.precision-mock .field-row__key{font-size:.8rem}

/* Teaser de seguridad: caja con borde + tres hechos con check. */
.security-teaser{
  margin-top:var(--sp-4);
  padding:var(--sp-4);
  border:1px solid var(--borde);
  border-radius:var(--radius);
  background:var(--sup);
}
.security-list{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
@media (min-width:760px){.security-list{grid-template-columns:repeat(3,1fr)}}
.security-list li{display:flex;gap:.65rem;align-items:flex-start}
.security-list svg{
  width:22px;height:22px;flex:none;margin-top:.1rem;
  fill:none;
  stroke:var(--acento);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.security-list p{margin:0;color:var(--muted);font-size:.95rem}
.security-list strong{
  display:block;
  margin-bottom:.15rem;
  font-family:var(--f-display);
  font-weight:600;
  font-size:1rem;
  color:var(--fg);
}
.security-teaser__more{margin-top:var(--sp-3)}

/* CTA final: tarjeta destacada con tinte naranja suave (ya no banda oscura).
   El tinte es grafismo de fondo; el texto va en tinta, nunca en naranja. */
.cta-card{
  margin-top:var(--sp-4);
  text-align:center;
  padding:var(--sp-5) var(--sp-3);
  border:1px solid var(--borde);
  border-radius:var(--radius);
  background:
    radial-gradient(120% 120% at 50% -10%,rgba(255,122,69,.10),transparent 60%),
    var(--sup);
}
.cta-card h2{margin-bottom:var(--sp-2)}
.cta-card p{max-width:48ch;margin:0 auto var(--sp-4);color:var(--muted)}
.cta-card .hero__actions{justify-content:center;margin-top:0}

/* ==========================================================================
   PRODUCTO V2 (producto.html) — re-tematizado a luz + flow-diagram + FAQ.
   Reutiliza los componentes v2 (.hero-split, .flow-diagram, .icon-card,
   .faq) y los patrones de Home (.home-fineprint, .cta-card). Solo se añade
   aquí el pegamento propio de esta página: chips de ejemplo de tipos de
   documento, logos reales dentro de .icon-card y el listado de FAQ.
   ========================================================================== */

/* Chips de ejemplo bajo "Tipos de documento". */
.doc-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--sp-3)}

/* Logo real (img) dentro del contenedor de icono de .icon-card, mismo
   tamaño que el SVG de trazo hermano. */
.icon-card__icon img{width:24px;height:24px;flex:none}

/* Listado de FAQ: separa el primer <details> del encabezado de sección. */
.faq-list{margin-top:var(--sp-4)}

/* Ciclo de vida del documento en Seguridad y control — una línea de resumen
   bajo la cuadrícula de hechos, sobre fondo oscuro. */
.callout-lifecycle{
  max-width:64ch;
  margin-top:var(--sp-4);
  color:var(--muted);
  font-size:.95rem;
}

/* ==========================================================================
   VERTICAL PAGE (V2) — plantilla compartida por las páginas verticales
   (finanzas.html, legal.html y las que sigan en V2-5). Se escribe UNA vez y
   se reutiliza SIN CAMBIOS: cada página varía solo el contenido.

   Casi toda la plantilla se arma con componentes ya existentes; el único
   componente nuevo es .vp-timeline. Contrato de composición por sección:
     1 · Hero split .... section.section--hero.theme-light.dot-grid
                         > .container > .hero-split
                           > .hero-split__copy  (eyebrow · h1 · lede · CTAs)
                           > .hero-split__media > .hero-demo (estática, luz,
                             SIN data-hero-demo) + <p class="sr-only">
     2 · El problema ... section.theme-light--alt > .section__head con 2 <p>
     3 · Un día ........ section.theme-light > .section__head + .vp-timeline
                         (ol > li.vp-timeline__step) + .vp-timeline__coda   ← NUEVO
     4 · El recorrido .. section.theme-light--alt > .flow-diagram
                         (destinos parametrizables) + .sr-only + .flow-caption
     5 · Qué extrae .... section.theme-light > .doc-flow + .field-row +
                         .chip-conf  (opcional: .callout con un resumen de ejemplo)
     6 · Beneficios .... section.theme-light--alt > .grid-cards.grid-cards--4
                         > .card.icon-card ×4
     7 · FAQ ........... section.theme-light > .faq-list > details.faq ×3
                         (espejo EXACTO del JSON-LD FAQPage en <head>)
     8 · CTA ........... section.theme-light--alt > .cta-card
   Alternancia estricta de tema claro; cero secciones oscuras en el cuerpo.
   Adición pura: no altera ninguna regla anterior.
   ========================================================================== */

/* .vp-timeline — "Un día con ClicScan": narración cronológica de una mañana.
   Escenario ILUSTRATIVO (roles genéricos; nunca testimonio ni cliente real).
   Cada paso: una hora en mono + cuerpo + (opcional) un .chip mono como dato
   mecánico. Grid [hora | espina+cuerpo]; la espina es una hairline con un
   punto naranja por paso (motivo de escaneo de marca). Se apila sin cambios
   en móvil: la columna de hora es estrecha. */
.vp-timeline{
  list-style:none;
  margin:var(--sp-4) 0 0;
  padding:0;
}
.vp-timeline__step{
  display:grid;
  grid-template-columns:3.75rem 1fr;
  gap:var(--sp-3);
}
.vp-timeline__time{
  padding-top:.1rem;
  text-align:right;
  font-size:.9rem;
  color:var(--acento);   /* naranja-prof: acento de texto permitido sobre claro */
}
.vp-timeline__body{
  position:relative;
  padding:0 0 var(--sp-4) var(--sp-4);
  border-left:2px solid var(--borde);
}
.vp-timeline__step:last-child .vp-timeline__body{
  border-left-color:transparent;
  padding-bottom:0;
}
.vp-timeline__body::before{        /* punto de escaneo sobre la espina */
  content:"";
  position:absolute;
  left:-7px;top:.3rem;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--naranja);
  box-shadow:0 0 10px 1px rgba(255,122,69,.45);
}
.vp-timeline__body h3{margin-bottom:.35rem}
.vp-timeline__body p{color:var(--muted)}
.vp-timeline__body .chip{margin-top:.7rem}
/* Cierre: el contraste "antes" en una nota separada por una hairline. */
.vp-timeline__coda{
  margin-top:var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px solid var(--borde);
  color:var(--muted);
  font-size:.95rem;
}

/* ==========================================================================
   SOLUCIONES HUB (V2-6) — hero-split con mosaico de las 4 verticales +
   tarjetas grandes por vertical. Reutiliza .hero-split, .icon-card__icon,
   .chip, .card, .link-acento; añade solo el mosaico y la tarjeta grande.
   ========================================================================== */

/* Media del hero: mosaico 2×2 con el icono de cada vertical (decorativo,
   resumen real en .sr-only aparte). */
.hub-mosaic{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-2);
}
.hub-mosaic__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  padding:var(--sp-3);
  text-align:center;
  background:var(--sup);
  border:1px solid var(--borde);
  border-radius:var(--radius);
}
.hub-mosaic__item .icon-card__icon{margin-bottom:0}
.hub-mosaic__item span{font-size:.82rem;color:var(--muted)}

/* Tarjeta grande de vertical: icono + h2 + dolor + chips de ejemplo +
   beneficios + enlace. Extiende .card con más aire. */
.grid-cards--2{grid-template-columns:1fr}
@media (min-width:700px){.grid-cards--2{grid-template-columns:repeat(2,1fr)}}
.solution-card{padding:var(--sp-4);scroll-margin-top:calc(var(--header-h) + var(--sp-3))}
.solution-card__pain{color:var(--muted);margin-top:.2rem}
.solution-card__chips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:var(--sp-3);
}
.solution-card__benefits{
  list-style:none;
  margin:var(--sp-3) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.solution-card__benefits li{
  position:relative;
  padding-left:1.3rem;
  font-size:.92rem;
  color:var(--fg);
}
.solution-card__benefits li::before{
  content:"";
  position:absolute;
  left:0;top:.4rem;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--acento);
}
.solution-card__go{margin-top:var(--sp-3);display:inline-block}

/* ==========================================================================
   PARTNERS (V2-6) — re-tematizado a luz. El modelo gana iconos de trazo por
   pieza; el portal se muestra también en miniatura dentro del panel oscuro
   del hero (.hero-split__media--panel), reutilizando .portal-mock.
   ========================================================================== */
.model-diagram__icon{
  display:grid;
  place-items:center;
  width:36px;height:36px;
  margin-bottom:.6rem;
  background:var(--crema);
  border-radius:calc(var(--radius) - 4px);
}
.model-diagram__icon svg{
  width:20px;height:20px;
  fill:none;
  stroke:var(--acento);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Portal en miniatura embebido en el panel oscuro del hero: mismo componente
   .portal-mock, tipografía y relleno reducidos, menos filas. */
.portal-mock--mini{font-size:.82rem}
.portal-mock--mini .portal-mock__table th,
.portal-mock--mini .portal-mock__table td{padding:.55rem .9rem}