/* ==========================================================================
   Vendoo — hoja de estilo del sitio público.

   TODOS los colores salen del preset «vendoo» de la app
   (vendoo_app/lib/theme/app_themes.dart, kVendooThemeConfig), con sus ratios
   de contraste ya medidos en docs/auditoria_de_color_2026-08-13.md. Si acá
   aparece un color que no está en ese preset, es un error: extendé los tokens,
   no escribas hex sueltos en las reglas.

   El violeta de marca (#9B5DE5) NO se usa como color de interfaz: da 4,13:1
   sobre blanco y no pasa AA. Vive solo dentro del isotipo, que trae su propio
   fondo oscuro. Para interfaz: #6D28D9 en claro, #B57BFF en oscuro.
   ========================================================================== */

/* --- Tipografía autohospedada. Sin CDN, sin Google Fonts. ---------------- */
/* Subconjunto latino de los .ttf que empaqueta la app; ~9 KB cada peso.     */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Tokens: modo CLARO como base -------------------------------------- */
:root {
  --fondo:        #F4F5F9;
  --superficie:   #FFFFFF;
  --superficie-2: #FBFBFD;
  --tinta:        #16161A;   /* 18,04:1 sobre superficie */
  --tinta-suave:  #55555F;   /* 7,37:1  — AAA */
  --acento:       #6D28D9;   /* 7,10:1  sobre blanco — AAA */
  --sobre-acento: #FFFFFF;
  --borde:        #8E92A4;   /* 3,09:1  — cumple WCAG 1.4.11 */
  --borde-suave:  #E4E6EF;   /* divisorias decorativas, no informativas */
  --exito:        #0F5C33;
  --alerta:       #7A4A00;   /* marrón oscuro: ningún naranja saturado pasa 3:1 */
  --peligro:      #A81B12;

  --calido:       #B45309;   /* 5,06:1 sobre blanco — AA. El acento de los
                                momentos buenos: el objetivo cumplido, la
                                cifra que sube, el sol de la ilustración. NO
                                es `--alerta`: eso avisa, esto celebra. */
  --velo-calido:  rgba(180, 83, 9, .09);
  --marca-disco:  #8644D5;   /* el disco de la ultima «o» del logotipo:
                                5,52:1 sobre blanco — AA. Es el acento de
                                `logotipo_vendoo_claro.svg` de la app. */
  --play-fondo:   #0E0E10;
  --play-tinta:   #FFFFFF;
  --velo-acento:  rgba(109, 40, 217, .07);
  --velo-marca:   rgba(155, 93, 229, .16);
  --sombra:       0 1px 2px rgba(20, 20, 30, .05), 0 12px 32px rgba(20, 20, 30, .06);
  --cabecera:     rgba(244, 245, 249, .82);

  /* Geometría, la misma de la app */
  --r-tarjeta: 16px;
  --r-boton:   14px;
  --r-chip:    999px;
  --grosor:    1.3px;

  --ancho:     1120px;
  --ancho-texto: 68ch;

  color-scheme: light dark;
}

/* --- Modo OSCURO: por preferencia del sistema… -------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:        #0E0E10;
    --superficie:   #17171B;   /* pegado al fondo: la tarjeta la define el borde */
    --superficie-2: #1D1D22;
    --tinta:        #FFFFFF;
    --tinta-suave:  #A5A5B0;   /* 7,33:1 */
    --acento:       #B57BFF;   /* 6,16:1 sobre superficie */
    --sobre-acento: #000000;   /* acento claro ⇒ tinta oscura encima */
    --borde:        #646472;   /* 3,07:1 */
    --borde-suave:  #2A2A31;
    --exito:        #4ADE80;
    --alerta:       #FFB020;
    --peligro:      #FF8A8A;
    --calido:       #FBBF24;   /* 10,4:1 sobre la superficie oscura */
    --velo-calido:  rgba(251, 191, 36, .12);
    --marca-disco:  #9B5DE5;   /* sobre fondo oscuro, 4,84:1. El #8644D5 de
                                  la variante clara se apaga aca. */
    --play-fondo:   #FFFFFF;
    --play-tinta:   #0E0E10;
    --velo-acento:  rgba(181, 123, 255, .10);
    --velo-marca:   rgba(155, 93, 229, .22);
    --sombra:       0 1px 2px rgba(0, 0, 0, .40), 0 16px 40px rgba(0, 0, 0, .35);
    --cabecera:     rgba(14, 14, 16, .82);
  }
}
/* --- …y por elección explícita, que gana en los dos sentidos ------------ */
:root[data-tema="oscuro"] {
  --fondo:        #0E0E10;
  --superficie:   #17171B;
  --superficie-2: #1D1D22;
  --tinta:        #FFFFFF;
  --tinta-suave:  #A5A5B0;
  --acento:       #B57BFF;
  --sobre-acento: #000000;
  --borde:        #646472;
  --borde-suave:  #2A2A31;
  --exito:        #4ADE80;
  --alerta:       #FFB020;
  --peligro:      #FF8A8A;
  --calido:       #FBBF24;
  --velo-calido:  rgba(251, 191, 36, .12);
  --marca-disco:  #9B5DE5;
  --play-fondo:   #FFFFFF;
  --play-tinta:   #0E0E10;
  --velo-acento:  rgba(181, 123, 255, .10);
  --velo-marca:   rgba(155, 93, 229, .22);
  --sombra:       0 1px 2px rgba(0, 0, 0, .40), 0 16px 40px rgba(0, 0, 0, .35);
  --cabecera:     rgba(14, 14, 16, .82);
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.018em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.05rem, 1.4rem + 2.3vw, 3.2rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -.024em; }
h3 { font-size: 1.14rem; letter-spacing: -.012em; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; color: var(--tinta); }
small { font-size: .875rem; }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Foco visible SIEMPRE, y el mismo en todo el sitio. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--velo-marca); color: var(--tinta); }

/* --- Estructura --------------------------------------------------------- */
.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.seccion { padding-block: clamp(56px, 8vw, 104px); }
.seccion--fina { padding-block: clamp(40px, 5vw, 64px); }
.seccion + .seccion { border-top: 1px solid var(--borde-suave); }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--superficie); color: var(--tinta);
  padding: 12px 18px; border-radius: var(--r-boton);
  border: var(--grosor) solid var(--acento); font-weight: 600;
}
.saltar:focus { left: 16px; top: 12px; }

/* --- Cabecera ----------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: var(--cabecera);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--borde-suave);
}
.cabecera__fila { display: flex; align-items: center; gap: 16px; min-height: 68px; }

.marca { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinta); }
.marca:hover { text-decoration: none; }
.marca__palabra { height: 21px; width: auto; color: var(--tinta); display: block; }
.isotipo { width: 34px; height: 34px; border-radius: 10px; display: block; flex: none; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a {
  color: var(--tinta-suave); text-decoration: none;
  font-size: .91rem; font-weight: 500;
  padding: 9px 11px; border-radius: var(--r-boton);
  display: inline-flex; align-items: center; min-height: 40px;
}
.nav a:hover { color: var(--tinta); background: var(--velo-acento); }
.nav a[aria-current="page"] { color: var(--acento); font-weight: 600; background: var(--velo-acento); }

.tema {
  margin-left: 8px; flex: none;
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  background: transparent; color: var(--tinta-suave);
  border: var(--grosor) solid var(--borde); border-radius: var(--r-boton);
  cursor: pointer;
}
.tema:hover { color: var(--tinta); border-color: var(--acento); }
.tema svg { width: 18px; height: 18px; }
.tema .luna { display: none; }
:root[data-tema="oscuro"] .tema .luna { display: block; }
:root[data-tema="oscuro"] .tema .sol  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema .luna { display: block; }
  :root:not([data-tema="claro"]) .tema .sol  { display: none; }
}

/* En pantalla angosta la cabecera se parte en DOS renglones: la marca y el
   interruptor arriba, la navegación abajo a todo el ancho. Con los cuatro
   enlaces en la misma línea que la marca, la fila no entra en un teléfono de
   360 px y arrastra la página entera a un desplazamiento horizontal — que es
   el defecto más feo que puede tener un sitio en un móvil. */
/* El corte esta en 1000 px y no en 660: desde el 2-sep-2026 el menu lleva
   SEIS enlaces mas el boton de descarga, y en una sola fila no entran en una
   tableta angosta — arrastraban la pagina a un desplazamiento horizontal. */
@media (max-width: 1000px) {
  .cabecera__fila { flex-wrap: wrap; min-height: 0; padding-block: 10px; row-gap: 4px; }
  .marca { order: 1; }
  .boton--mini { order: 2; margin-left: auto; }
  .tema { order: 3; margin-left: 8px; }
  .nav {
    order: 4; flex-basis: 100%; margin-left: 0;
    justify-content: space-between; gap: 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 8px 7px; font-size: .86rem; white-space: nowrap; }
  .marca__palabra { height: 20px; }
}
@media (max-width: 420px) {
  .nav a { padding: 8px 5px; font-size: .78rem; }
  .boton--mini span { display: none; }
  .boton--mini { padding: 0 12px; }
}

/* --- Portada ------------------------------------------------------------ */
.portada { position: relative; overflow: hidden; padding-block: clamp(52px, 8vw, 96px) clamp(56px, 8vw, 96px); }
.portada::before {
  content: ''; position: absolute; inset: -40% -10% auto -10%; height: 720px; z-index: 0;
  background:
    radial-gradient(58% 62% at 76% 18%, var(--velo-marca), transparent 68%),
    radial-gradient(48% 54% at 12% 8%, var(--velo-acento), transparent 70%);
  pointer-events: none;
}
.portada > * { position: relative; z-index: 1; }
.portada__reja { display: grid; gap: clamp(36px, 5vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .portada__reja { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }

.portada h1 { margin-bottom: .34em; }
.portada h1 em { font-style: normal; color: var(--acento); }
.entrada {
  font-size: clamp(1.04rem, .98rem + .35vw, 1.2rem);
  color: var(--tinta-suave); max-width: 56ch; margin-bottom: 1.6em;
}

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-chip);
  border: var(--grosor) solid var(--borde);
  font-size: .8rem; font-weight: 500; color: var(--tinta-suave);
  background: var(--superficie);
}
.chip--acento { border-color: var(--acento); color: var(--acento); background: var(--velo-acento); }
.chip__punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }

.botones { display: flex; flex-wrap: wrap; gap: 12px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--r-boton); font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer; border: var(--grosor) solid transparent;
}
.boton:hover { text-decoration: none; }
.boton--lleno { background: var(--acento); color: var(--sobre-acento); }
.boton--lleno:hover { filter: brightness(1.08); }
.boton--hueco { border-color: var(--borde); color: var(--tinta); background: var(--superficie); }
.boton--hueco:hover { border-color: var(--acento); color: var(--acento); }
.boton svg { width: 17px; height: 17px; flex: none; }

/* --- Teléfono ilustrado ------------------------------------------------- */
.telefono { width: min(100%, 330px); margin-inline: auto; display: block; filter: drop-shadow(0 24px 48px rgba(20, 20, 30, .16)); }
:root[data-tema="oscuro"] .telefono { filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .55)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .telefono { filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .55)); }
}

/* --- Títulos de sección ------------------------------------------------- */
.rotulo {
  display: block; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 12px;
}
.encabezado { max-width: var(--ancho-texto); margin-bottom: clamp(30px, 4vw, 48px); }
.encabezado p { color: var(--tinta-suave); font-size: 1.03rem; margin-bottom: 0; }

/* --- Tarjetas ----------------------------------------------------------- */
/* La tarjeta la define el BORDE, no el relleno (DESIGN_SYSTEM §1 de la app). */
.reja { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }
.reja--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
/* ⚠️ `.reja` con CUATRO tarjetas: `auto-fit` daba tres columnas en el ancho
   de escritorio y dejaba la cuarta sola abajo (reportado el 2-sep-2026 en
   «Para quién es», a 1280 px). Con cuatro elementos los saltos son
   4 → 2 → 1: 2 × 2 en el medio y una sola fila en pantalla grande.
   Las rejas de 6 y de 12 tarjetas NO necesitan esto: con 1, 2 o 3 columnas
   el resto siempre da cero. */
.reja--4 { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .reja--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .reja--4 { grid-template-columns: repeat(4, 1fr); } }
/* Tres columnas para rejas de 6: 6 divide exacto por 3, 2 y 1, así que
   ninguna fila queda con una sola tarjeta en ningún ancho. */
.reja--3 { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .reja--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .reja--3 { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  background: var(--superficie);
  border: var(--grosor) solid var(--borde-suave);
  border-radius: var(--r-tarjeta);
  padding: 24px;
}
.tarjeta--realce { border-color: var(--acento); background: linear-gradient(var(--velo-acento), var(--velo-acento)), var(--superficie); }
.tarjeta h3 { margin-bottom: .35em; }
.tarjeta p { color: var(--tinta-suave); font-size: .95rem; margin-bottom: 0; }
.tarjeta p + p { margin-top: .8em; }

.icono {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--velo-acento); color: var(--acento);
  border: var(--grosor) solid var(--borde-suave);
}
.icono svg { width: 21px; height: 21px; }

/* --- Los pasos de la visita --------------------------------------------- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: paso; }
.pasos li {
  counter-increment: paso;
  display: grid; grid-template-columns: 42px 1fr; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--borde-suave);
}
.pasos li:first-child { border-top: 0; }
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .84rem;
  color: var(--acento); padding-top: 2px;
}
.pasos b { display: block; font-weight: 600; }
.pasos span { color: var(--tinta-suave); font-size: .93rem; }

/* --- Nota / cita -------------------------------------------------------- */
.nota {
  border-left: 3px solid var(--acento);
  background: var(--velo-acento);
  border-radius: 0 var(--r-tarjeta) var(--r-tarjeta) 0;
  padding: 18px 22px;
  color: var(--tinta-suave); font-size: .95rem;
}
.nota strong { color: var(--tinta); }
.nota--aviso { border-left-color: var(--alerta); background: transparent; border: var(--grosor) solid var(--borde-suave); border-left: 3px solid var(--alerta); border-radius: 0 var(--r-tarjeta) var(--r-tarjeta) 0; }

blockquote.cita {
  margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--borde);
  color: var(--tinta-suave); font-size: 1.06rem;
}
blockquote.cita footer { margin-top: 10px; font-size: .86rem; color: var(--tinta-suave); }

/* --- Llamado final ------------------------------------------------------ */
.llamado {
  border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta);
  background: linear-gradient(var(--velo-acento), var(--velo-acento)), var(--superficie);
  padding: clamp(28px, 4vw, 44px);
  display: grid; gap: 22px; align-items: center;
}
@media (min-width: 760px) { .llamado { grid-template-columns: 1fr auto; } }
.llamado h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); margin-bottom: .3em; }
.llamado p { color: var(--tinta-suave); margin-bottom: 0; }

/* --- Documento legal ---------------------------------------------------- */
.doc { max-width: var(--ancho-texto); }
.doc h2 { font-size: 1.42rem; margin-top: 2.4em; scroll-margin-top: 88px; }
.doc h2:first-of-type { margin-top: 0; }
.doc h3 { margin-top: 1.9em; font-size: 1.03rem; }
.doc ul, .doc ol { padding-left: 1.25em; margin: 0 0 1.05em; }
.doc li { margin-bottom: .5em; }
.doc li::marker { color: var(--acento); }
.doc dl { margin: 0 0 1.05em; }
.doc dt { font-weight: 600; margin-top: 1em; }
.doc dd { margin: .2em 0 0; color: var(--tinta-suave); }

.ficha {
  border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta);
  background: var(--superficie); padding: 20px 24px; margin-bottom: 34px;
}
.ficha dl { display: grid; gap: 4px 18px; margin: 0; }
@media (min-width: 620px) { .ficha dl { grid-template-columns: max-content 1fr; } }
.ficha dt { font-weight: 600; font-size: .88rem; margin: 0; }
.ficha dd { margin: 0 0 8px; font-size: .95rem; }
@media (min-width: 620px) { .ficha dd { margin-bottom: 4px; } }

/* Marcador de dato que todavía falta. Se ve, a propósito.
   ⚠️ Desde el 2-sep-2026 NINGUNA página lo usa: los correos y la razón
   social se completaron y los documentos legales dejaron de ser borradores.
   La regla se conserva para el próximo dato que haya que dejar a la vista
   sin inventarlo — que es la política de este sitio.
   Va en `display: inline` y NO en `inline-block`, y no lleva `nowrap`: un
   marcador largo como el de la jurisdicción mide más de 500 px y, sin poder
   partirse, arrastraba la página entera a un desplazamiento horizontal en
   cualquier teléfono. `box-decoration-break: clone` hace que las dos mitades
   conserven su recuadro punteado cuando el texto se parte en dos líneas. */
.pendiente {
  display: inline;
  font-weight: 600; font-size: .88em;
  color: var(--alerta);
  background: transparent;
  border: var(--grosor) dashed var(--alerta);
  border-radius: 7px; padding: 1px 8px;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Índice del documento legal */
.indice { border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta); background: var(--superficie); padding: 18px 22px; margin-bottom: 34px; }
.indice p { font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 10px; }
.indice ol { columns: 2; column-gap: 28px; margin: 0; padding-left: 1.2em; font-size: .93rem; }
@media (max-width: 620px) { .indice ol { columns: 1; } }
.indice li { margin-bottom: .3em; }

/* --- Contacto ----------------------------------------------------------- */
.canal { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; }
.canal .icono { margin-bottom: 0; }
.canal h3 { margin-bottom: .25em; }
.canal p { color: var(--tinta-suave); font-size: .95rem; margin-bottom: .7em; }
.canal .dato { font-weight: 600; color: var(--tinta); word-break: break-word; }

/* --- Pie ---------------------------------------------------------------- */
.pie { border-top: 1px solid var(--borde-suave); background: var(--superficie-2); padding-block: 44px 34px; }
.pie__reja { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pie__reja { grid-template-columns: 1.5fr 1fr 1fr; } }
.pie h4 { font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 12px; font-weight: 600; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 8px; }
.pie a { color: var(--tinta-suave); text-decoration: none; font-size: .93rem; }
.pie a:hover { color: var(--acento); text-decoration: underline; }
.pie__nota { color: var(--tinta-suave); font-size: .9rem; max-width: 42ch; margin-top: 14px; }
.pie__base {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--borde-suave);
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  color: var(--tinta-suave); font-size: .85rem;
}
.pie__base p { margin: 0; }

/* --- 404 ---------------------------------------------------------------- */
.perdido { min-height: 58vh; display: grid; place-items: center; text-align: center; }
.perdido .cifra { font-size: clamp(4rem, 3rem + 8vw, 8rem); font-weight: 700; line-height: 1; color: var(--acento); letter-spacing: -.05em; margin: 0 0 .1em; }

/* --- Utilidades --------------------------------------------------------- */
.centrado { text-align: center; margin-inline: auto; }
.apagado { color: var(--tinta-suave); }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .boton, .nav a, .tema, .tarjeta, .pie a { transition: color .15s ease, background-color .15s ease, border-color .15s ease, filter .15s ease; }
}

@media print {
  .cabecera, .pie, .tema, .botones, .saltar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
  .doc { max-width: none; }
}

/* --- Ilustraciones vectoriales propias ---------------------------------- */
/* Los SVG del sitio están dibujados a mano y pintados con los MISMOS tokens
   que el resto de la página, con clases y no con `fill="var(--x)"`: las
   propiedades personalizadas no son fiables dentro de un atributo de
   presentación, y sí lo son dentro de una regla CSS. */
.ilu { font-family: 'Poppins', sans-serif; display: block; }
.ilu text { font-size: 12px; }
.i-marco     { fill: var(--superficie); stroke: var(--borde); }
.i-pantalla  { fill: var(--fondo); }
.i-tarjeta   { fill: var(--superficie); stroke: var(--borde-suave); }
.i-linea     { fill: var(--borde-suave); }
.i-tinta     { fill: var(--tinta); }
.i-suave     { fill: var(--tinta-suave); }
.i-acento    { fill: var(--acento); }
.i-sobre     { fill: var(--sobre-acento); }
.i-exito     { fill: var(--exito); }
.i-alerta    { fill: var(--alerta); }
.i-alerta-b  { fill: none; stroke: var(--alerta); }
.i-neg       { font-weight: 600; }
.i-chico     { font-size: 10px; }

/* --- La cadena de la cola ----------------------------------------------- */
/* Cuatro eslabones, 4 → 2 → 1. Y acá el orden importa además de la
   estética: son los pasos de la cola, y con 3 + 1 el cuarto parecía otra
   cosa en vez del final de la misma cadena. */
.cadena { display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: eslabon; }
@media (min-width: 620px)  { .cadena { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cadena { grid-template-columns: repeat(4, 1fr); } }
.cadena li { list-style: none; counter-increment: eslabon; position: relative; border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta); background: var(--superficie); padding: 20px; }
.cadena li::before {
  content: counter(eslabon); position: absolute; top: -13px; left: 18px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acento); color: var(--sobre-acento);
  font-size: .78rem; font-weight: 700;
}
.cadena b { display: block; margin: 6px 0 4px; }
.cadena span { color: var(--tinta-suave); font-size: .92rem; }
.i-check     { fill: none; stroke: var(--superficie); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Utilidades de espaciado --------------------------------------------
   Existen para que NINGUNA página necesite un atributo `style=`. Sin ellas,
   la política de seguridad de contenido del sitio tendría que abrir
   `style-src` a `unsafe-inline`, que es justo lo que no queremos. */
.mt-xs { margin-top: 10px; }
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 26px; }
.mt-lg { margin-top: 30px; }
.estrecho { max-width: 56ch; }
.botones--centro { justify-content: center; }
.titulo-pagina { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.titulo-doc { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }

/* ==========================================================================
   AGREGADO 2-sep-2026 — el sitio pasa de «página de una app interna» a
   página de producto: botón de Google Play, capturas reales, integraciones.
   Todo con los mismos tokens de arriba; acá abajo no hay ni un hex suelto
   salvo los cuatro colores del triángulo de Google Play, que son de Google
   y no se pueden re-teñir sin dejar de ser ese triángulo.
   ========================================================================== */

/* --- La marca es el LOGOTIPO (la palabra) ------------------------------- */
/* Regla del dueño, 2-sep-2026: en cabecera, portada, pie y OG la marca es la
   palabra «vendoo». El isotipo —el círculo— queda para el favicon, el
   apple-touch-icon y el manifiesto, o sea donde no cabe una palabra. */
.marca__palabra { height: 25px; }
@media (max-width: 660px) { .marca__palabra { height: 22px; } }
/* El disco de la última «o»: es el único sitio del sitio donde el violeta de
   marca se pinta, y cambia con el tema porque ningún violeta pasa AA sobre
   blanco Y sobre negro a la vez (está medido en la app). */
.marca__disco { fill: var(--marca-disco); }
.pie .marca__palabra { height: 27px; }

/* --- Botón de Google Play ----------------------------------------------- */
/* Dibujado acá, no descargado: el sitio no pide un solo byte a un tercero.
   Se puede reemplazar por el badge oficial de Google si Legal lo prefiere;
   está anotado en el README. */
.boton--play {
  background: var(--play-fondo); color: var(--play-tinta);
  border-color: var(--play-fondo);
  min-height: 56px; padding: 0 24px; gap: 13px;
}
.boton--play:hover { filter: brightness(.92); }
:root[data-tema="oscuro"] .boton--play:hover { filter: brightness(.9); }
.boton--play svg { width: 26px; height: 26px; }
.play__texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.08; }
.play__texto small { font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 500; }
.play__texto b { font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; color: inherit; }

/* Version compacta, para la cabecera. */
.boton--mini {
  min-height: 40px; padding: 0 15px; gap: 8px; flex: none;
  font-size: .88rem; font-weight: 600;
}
.boton--mini svg { width: 17px; height: 17px; }

/* --- Franja de datos duros ---------------------------------------------- */
/* ⚠️ CUATRO elementos, y por eso las columnas van EXPLÍCITAS y no con
   `auto-fit`: auto-fit elige el número que entre, y en una tableta elegía
   TRES — o sea 3 + 1, con el último dato solo en su fila. La regla del
   sitio es que ninguna fila quede con un solo elemento, así que para los
   grupos de cuatro los saltos son 4 → 2 → 1 y nunca 3. */
.datos {
  display: grid; gap: 1px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: 1fr;
  border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta);
  background: var(--borde-suave); overflow: hidden;
}
@media (min-width: 420px)  { .datos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .datos { grid-template-columns: repeat(4, 1fr); } }
.datos li { background: var(--superficie); padding: 20px 22px; }
.datos b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--acento); line-height: 1.15; }
.datos span { color: var(--tinta-suave); font-size: .9rem; }

/* --- Flujo en pasos («Cómo funciona») ----------------------------------- */
/* Cuatro pasos: mismos saltos que la franja de datos, 4 → 2 → 1. */
.flujo { display: grid; gap: 16px; grid-template-columns: 1fr; counter-reset: hito; margin: 0; padding: 0; list-style: none; }
@media (min-width: 620px)  { .flujo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .flujo { grid-template-columns: repeat(4, 1fr); } }
.flujo li {
  counter-increment: hito; position: relative;
  border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta);
  background: var(--superficie); padding: 24px 22px 22px;
}
.flujo li::after {
  content: counter(hito, decimal-leading-zero);
  position: absolute; top: 18px; right: 20px;
  font-size: .8rem; font-weight: 700; color: var(--acento);
  font-variant-numeric: tabular-nums; opacity: .75;
}
.flujo h3 { margin-bottom: .3em; padding-right: 30px; }
.flujo p { color: var(--tinta-suave); font-size: .94rem; margin: 0; }

/* --- Capturas reales de la aplicación ----------------------------------- */
/* Las imágenes son 1080×2400 (retrato). El marco lo pone el sitio: así una
   captura sin marco del teléfono no se ve como un recorte suelto. */
.capturas {
  display: grid; gap: 22px; margin: 0; padding: 0; list-style: none;
  /* 280 px de minimo y no 210: con seis capturas, 210 daba cuatro columnas
     arriba y dos abajo — una fila coja. Con 280 quedan 3 + 3. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.captura { text-align: center; }
.captura__marco {
  border: var(--grosor) solid var(--borde);
  background: var(--superficie);
  border-radius: 26px; padding: 8px;
  box-shadow: var(--sombra);
  margin-bottom: 12px;
}
.captura__marco img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1080 / 2400; object-fit: cover;
  border-radius: 19px; background: var(--fondo);
}
.captura h3 { font-size: 1rem; margin-bottom: .2em; }
.captura p { color: var(--tinta-suave); font-size: .88rem; margin: 0; }

/* --- Rótulo de estado («Cotización», «Recalculado…») -------------------- */
/* La reja `.integra` de tres tarjetas se retiró el 2-sep-2026: el muro de ERP
   dice con sus etiquetas qué es nativo y qué es a medida, y el trío dice qué
   sube y qué baja. Lo único que no decía nadie más quedó como nota. El
   `.sello` sí sigue vivo: lo usan los dos papeles que se comparan. */
.sello {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin-bottom: 14px; padding: 4px 11px; border-radius: var(--r-chip);
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border: var(--grosor) solid var(--borde);  color: var(--tinta-suave);
}
/* `.sello--hoy` se retiró con las tarjetas de integración: lo que marcaba
   —qué está en producción hoy— lo dice ahora la ficha de Odoo en el muro. */

/* --- Portada: la fila de apoyo bajo los botones ------------------------- */
.apoyo { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--tinta-suave); font-size: .88rem; }
.apoyo svg { width: 17px; height: 17px; flex: none; color: var(--exito); }

/* --- Teléfono ilustrado: movimiento sutil ------------------------------- */
/* Sólo tres cosas se mueven, y todas dicen algo: el aviso de «sin señal»
   late, la barra del paso avanza una vez, y la cola de envíos aparece
   después. Con `prefers-reduced-motion: reduce` la regla global de arriba
   las apaga y el dibujo queda en su estado final, que es el legible. */
@media (prefers-reduced-motion: no-preference) {
  .i-late   { animation: latir 2.6s ease-in-out infinite; }
  .i-avanza { transform-box: fill-box; transform-origin: left center; animation: avanzar 1.6s .3s ease-out both; }
  .i-tarde  { animation: aparecer .7s 1.5s ease-out both; }
  .i-flota  { animation: flotar 5.5s ease-in-out infinite; }
  .i-flota--b { animation: flotar 6.5s .8s ease-in-out infinite; }
}
@keyframes latir   { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes avanzar { from { transform: scaleX(.06); } to { transform: scaleX(1); } }
@keyframes aparecer{ from { opacity: 0; } to { opacity: 1; } }
@keyframes flotar  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* --- Ilustración: piezas nuevas ----------------------------------------- */
.i-velo      { fill: var(--velo-acento); }
.i-exito-b   { fill: none; stroke: var(--exito); }
.i-borde     { fill: none; stroke: var(--borde); }
.i-sombra    { filter: drop-shadow(0 10px 22px rgba(20, 20, 30, .14)); }
:root[data-tema="oscuro"] .i-sombra { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .i-sombra { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5)); }
}

/* --- Pie: la columna de la descarga ------------------------------------- */
.pie .boton--play { min-height: 50px; padding: 0 18px; }
.pie .play__texto b { font-size: 1.05rem; }

/* --- Utilidades --------------------------------------------------------- */
.mt-xl { margin-top: 38px; }
.ancho-medio { max-width: 62ch; }

/* ==========================================================================
   PORTADA 2 — 2-sep-2026. «Menos texto, más infografías, ponle corazón.»

   La regla de composición: UNA idea por sección, un titular corto, una frase
   de apoyo y un dibujo que cuente el resto. Si algo se puede mostrar, no se
   escribe.

   ⚠️ TODO SE VE EN REPOSO. Las reglas que esconden algo cuelgan de
   `[data-anim]`, que pone el <head> y que se retira solo si `sitio.js` no
   llegó. Sin JavaScript no hay ni un `opacity: 0` en pie.
   ========================================================================== */

/* --- Aparecer al entrar en pantalla ------------------------------------- */
[data-anim] .revelar { opacity: 0; transform: translateY(18px); }
[data-anim] .revelar.visible {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .8, .3, 1);
}
/* El escalonado va por clase y NO por `style="--i:2"`: un atributo style
   obligaría a abrir `style-src` a 'unsafe-inline' y tirar abajo la CSP. */
[data-anim] .revelar--b.visible { transition-delay: .09s; }
[data-anim] .revelar--c.visible { transition-delay: .18s; }
[data-anim] .revelar--d.visible { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) {
  [data-anim] .revelar { opacity: 1; transform: none; }
}

/* --- Aire: las secciones respiran más ----------------------------------- */
.seccion { padding-block: clamp(64px, 9vw, 128px); }
.seccion--velo { background: var(--superficie-2); }
.seccion--velo + .seccion--velo { border-top: 0; }
.encabezado--centro { margin-inline: auto; text-align: center; }
.encabezado--centro p { margin-inline: auto; }

/* --- Portada: la escena de la calle ------------------------------------- */
.escena { width: min(100%, 520px); margin-inline: auto; display: block; overflow: visible; }
.portada__reja { align-items: center; }
@media (min-width: 900px) { .portada__reja { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } }
.portada h1 { max-width: 17ch; }
.entrada { max-width: 46ch; }

/* Colores de la ilustración. Salen de los tokens; los dos propios son el
   tono de piel y el ladrillo del local, que no existen en la paleta de
   interfaz y no se usan para texto en ningún lado. */
.e-piel   { fill: #C68A63; }
.e-local  { fill: var(--superficie-2); }
.e-toldo  { fill: var(--acento); }
.e-toldo2 { fill: var(--sobre-acento); }
.e-sol    { fill: var(--calido); }
.e-ropa   { fill: var(--acento); }
.e-ropa2  { fill: var(--marca-disco); }
.e-piso   { fill: var(--borde-suave); }
.e-linea  { fill: none; stroke: var(--borde); stroke-width: 2.4; stroke-linecap: round; }
.e-tinta  { fill: var(--tinta); }
.e-suave  { fill: var(--tinta-suave); }

/* --- Mosaico de capacidades (12 fichas con su ícono) -------------------- */
.mosaico {
  display: grid; gap: 14px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px)  { .mosaico { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .mosaico { grid-template-columns: repeat(4, 1fr); } }
.mosaico li {
  background: var(--superficie);
  border: var(--grosor) solid var(--borde-suave);
  border-radius: var(--r-tarjeta);
  padding: 20px 16px; text-align: center;
}
.mosaico .icono { margin: 0 auto 12px; }
.mosaico h3 { font-size: .98rem; margin-bottom: .2em; }
.mosaico p { color: var(--tinta-suave); font-size: .84rem; margin: 0; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .mosaico li { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .mosaico li:hover { transform: translateY(-3px); border-color: var(--acento); box-shadow: var(--sombra); }
}
.mosaico li:focus-within { border-color: var(--acento); }

/* --- Los tres latidos del «corazón» ------------------------------------- */
.latidos {
  display: grid; gap: 18px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .latidos { grid-template-columns: repeat(3, 1fr); } }
.latidos li { display: flex; align-items: center; gap: 14px; justify-content: center; }
.latidos b { font-weight: 600; font-size: 1.05rem; display: block; }
.latidos span { color: var(--tinta-suave); font-size: .9rem; }
.latidos svg { width: 32px; height: 32px; flex: none; color: var(--calido); }

/* --- La visita: línea de tiempo con su riel ----------------------------- */
.pasos { position: relative; }
.pasos li { position: relative; grid-template-columns: 46px 1fr; }
/* El riel: una línea que se llena de arriba abajo cuando la sección entra. */
.riel { position: relative; }
.riel::before {
  content: ''; position: absolute; left: 15px; top: 26px; bottom: 26px;
  width: 2px; background: var(--borde-suave);
}
.riel::after {
  content: ''; position: absolute; left: 15px; top: 26px; bottom: 26px;
  width: 2px; background: var(--acento); transform-origin: top center;
}
[data-anim] .riel::after { transform: scaleY(0); }
[data-anim] .riel.visible::after { animation: llenar 2.6s .2s ease-out forwards; }
@keyframes llenar { to { transform: scaleY(1); } }
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  position: relative; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--superficie); border: var(--grosor) solid var(--borde-suave);
  color: var(--acento); font-size: .74rem; font-weight: 700; padding: 0;
}
[data-anim] .riel.visible li::before { animation: encender .5s both; }
[data-anim] .riel.visible li:nth-child(1)::before { animation-delay: .25s; }
[data-anim] .riel.visible li:nth-child(2)::before { animation-delay: .55s; }
[data-anim] .riel.visible li:nth-child(3)::before { animation-delay: .85s; }
[data-anim] .riel.visible li:nth-child(4)::before { animation-delay: 1.15s; }
[data-anim] .riel.visible li:nth-child(5)::before { animation-delay: 1.45s; }
[data-anim] .riel.visible li:nth-child(6)::before { animation-delay: 1.75s; }
[data-anim] .riel.visible li:nth-child(7)::before { animation-delay: 2.05s; }
[data-anim] .riel.visible li:nth-child(8)::before { animation-delay: 2.35s; }
@keyframes encender {
  from { border-color: var(--borde-suave); transform: scale(1); }
  55%  { border-color: var(--acento); transform: scale(1.16); }
  to   { border-color: var(--acento); transform: scale(1); }
}

/* --- Infografías: piezas comunes ---------------------------------------- */
/* ⚠️ Las infografías LLEVAN TOPE DE ANCHO. Un <svg> con `width: 100%` y un
   viewBox de 460 se estira a los 1.120 px de la envoltura y escala su texto
   con él: el «3 en cola» de 11 px terminaba dibujado a 28 px, como un cartel.
   El tope las deja a una escala cercana a 1 y centradas. */
.info { width: 100%; max-width: 620px; height: auto; display: block; margin-inline: auto; font-family: 'Poppins', sans-serif; }
.info--ancha { max-width: 780px; }
.info text { font-size: 13px; }
.info .chico { font-size: 11px; }
.info .neg { font-weight: 600; }

/* La cola que se vacía. El bucle es lento a propósito: tiene que leerse
   como una explicación, no como un GIF. */
[data-anim] .visible .sobre-1 { animation: volar 5.4s .2s ease-in-out infinite; }
[data-anim] .visible .sobre-2 { animation: volar 5.4s 1.0s ease-in-out infinite; }
[data-anim] .visible .sobre-3 { animation: volar 5.4s 1.8s ease-in-out infinite; }
@keyframes volar {
  0%       { transform: translateX(0); opacity: 1; }
  8%       { transform: translateX(0); opacity: 1; }
  40%, 100%{ transform: translateX(196px); opacity: 0; }
}
[data-anim] .visible .senal-vuelve { animation: latir 2.4s ease-in-out infinite; }
[data-anim] .visible .tilde-servidor { animation: aparecer .5s 2.2s both; }

/* El mapa de la ruta: el trazo se dibuja y las paradas se marcan. */
.ruta-traza { fill: none; stroke: var(--acento); stroke-width: 3; stroke-linecap: round;
              stroke-dasharray: 620; }
[data-anim] .ruta-traza { stroke-dashoffset: 620; }
[data-anim] .visible .ruta-traza { animation: trazar 2.4s .2s ease-out forwards; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
[data-anim] .visible .parada { animation: brotar .45s both; }
[data-anim] .visible .parada-1 { animation-delay: .5s; }
[data-anim] .visible .parada-2 { animation-delay: .95s; }
[data-anim] .visible .parada-3 { animation-delay: 1.4s; }
[data-anim] .visible .parada-4 { animation-delay: 1.85s; }
@keyframes brotar { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.parada { transform-box: fill-box; transform-origin: center; }

/* El diagrama de integración: el dato va y vuelve. */
[data-anim] .visible .flecha-ida   { animation: correr 3.2s ease-in-out infinite; }
[data-anim] .visible .flecha-vuelta{ animation: correr 3.2s 1.6s ease-in-out infinite; }
@keyframes correr { 0% { opacity: .15; } 40% { opacity: 1; } 100% { opacity: .15; } }

/* Las capas de seguridad. */
[data-anim] .visible .capa { animation: brotar .5s both; }
[data-anim] .visible .capa-1 { animation-delay: .1s; }
[data-anim] .visible .capa-2 { animation-delay: .3s; }
[data-anim] .visible .capa-3 { animation-delay: .5s; }
.capa { transform-box: fill-box; transform-origin: center; }

/* --- Las dos tarjetas que se comparan ----------------------------------- */
.comparar { display: grid; gap: 16px; align-items: stretch; grid-template-columns: 1fr; }
@media (min-width: 780px) { .comparar { grid-template-columns: 1fr auto 1fr; } }
.comparar .flecha {
  display: grid; place-items: center; color: var(--acento);
  padding: 6px 0;
}
.comparar .flecha svg { width: 30px; height: 30px; }
@media (max-width: 779px) { .comparar .flecha svg { transform: rotate(90deg); } }
.papel {
  border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta);
  background: var(--superficie); padding: 22px 24px;
}
.papel--firme { border-color: var(--acento); background: linear-gradient(var(--velo-acento), var(--velo-acento)), var(--superficie); }
.papel h3 { margin-bottom: .5em; }
.papel dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 16px; margin: 0; font-size: .93rem; }
.papel dt { color: var(--tinta-suave); }
.papel dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.papel .total { border-top: 1px solid var(--borde-suave); padding-top: 9px; margin-top: 3px; }
.papel .sello {
  margin: 14px 0 0; border: 0; padding: 0; background: none;
  color: var(--tinta-suave); font-size: .82rem; text-transform: none; letter-spacing: 0;
  font-weight: 500; display: block;
}

/* --- Cifras grandes ----------------------------------------------------- */
.datos b { font-variant-numeric: tabular-nums; }
.datos li:nth-child(2) b { color: var(--calido); }

/* --- Cita con más presencia -------------------------------------------- */
.cita--grande { font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem); border-left-width: 4px; }
.e-brazo    { fill: none; stroke: #C68A63; stroke-width: 13; stroke-linecap: round; }
.e-pantalon { fill: var(--tinta-suave); }
.e-sombra   { fill: rgba(20, 20, 30, .10); }
:root[data-tema="oscuro"] .e-sombra { fill: rgba(0, 0, 0, .35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .e-sombra { fill: rgba(0, 0, 0, .35); }
}
/* El teléfono de la portada: los pasos se completan en bucle lento. */
[data-anim] .paso-tilde { opacity: 0; }
[data-anim] .paso-tilde { animation: ciclo 9s infinite; }
[data-anim] .paso-tilde--2 { animation-delay: 2.1s; }
[data-anim] .paso-tilde--3 { animation-delay: 4.2s; }
@keyframes ciclo {
  0%, 4%   { opacity: 0; transform: scale(.5); }
  10%, 72% { opacity: 1; transform: scale(1); }
  80%, 100%{ opacity: 0; transform: scale(1); }
}
.paso-tilde { transform-box: fill-box; transform-origin: center; }
[data-anim] .barra-paso { transform-box: fill-box; transform-origin: left center;
                          animation: avance 9s infinite; }
@keyframes avance {
  0%, 4%   { transform: scaleX(.12); }
  30%      { transform: scaleX(.42); }
  56%      { transform: scaleX(.72); }
  76%, 90% { transform: scaleX(1); }
  100%     { transform: scaleX(.12); }
}
/* Lista corta de la sección de seguridad: viñetas que no gritan. */
.lista-cortita { list-style: none; margin: 18px 0 0; padding: 0; }
.lista-cortita li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  color: var(--tinta-suave); font-size: .95rem;
}
.lista-cortita li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--velo-acento); border: 2px solid var(--acento);
}
/* Micro-interacción de las capturas: el marco se levanta al pasar por encima
   o al llegar con el tabulador. Es el mismo gesto que el mosaico. */
@media (prefers-reduced-motion: no-preference) {
  .captura__marco { transition: transform .2s ease, border-color .2s ease; }
  .captura:hover .captura__marco { transform: translateY(-4px); border-color: var(--acento); }
}

/* ⚠️ El mosaico y el teléfono de 320 px. Una pista `1fr` no baja del
   min-content de lo que lleva adentro, y «Multiempresa» —una palabra de doce
   letras a .98 rem— medía 113 px: con dos columnas y el relleno de la ficha,
   la reja se estiraba a 304 px dentro de una ventana de 320 y arrastraba la
   página entera a un desplazamiento horizontal. Se arregla por los tres
   lados: la ficha puede encogerse (`min-width: 0`), la palabra puede partirse
   si no queda otra, y en pantalla angosta la ficha aprieta un poco su
   tipografía y su relleno. Medido: 320 px sin desborde. */
.mosaico li { min-width: 0; }
.mosaico h3, .mosaico p { overflow-wrap: break-word; }
@media (max-width: 420px) {
  .mosaico { gap: 10px; }
  .mosaico li { padding: 18px 10px; }
  .mosaico h3 { font-size: .88rem; }
  .mosaico p { font-size: .78rem; }
  .mosaico .icono { width: 38px; height: 38px; margin-bottom: 10px; }
}

/* ==========================================================================
   El muro de ERP (2-sep-2026)

   ⚠️ NO HAY UN SOLO LOGO DIBUJADO ACÁ, y es a propósito: los logotipos de
   SAP, Oracle, Microsoft y compañía son marcas registradas de terceros. No se
   dibujan de memoria —saldría un logo falso, que es peor que ninguno— y no se
   descargan —sería un recurso externo y además casi todas exigen aceptar su
   guía de marca—. Cada ficha es la **marca escrita**, que es un uso nominativo
   legítimo, monocroma en reposo y con el color de la marca sólo al pasar por
   encima.

   Cuando el dueño consiga los SVG oficiales, la ficha se cambia a mano: está
   explicado en `assets/img/erp/README.md`, y el estilo de `.con-logo` ya está
   escrito acá abajo esperando.
   ========================================================================== */
.erps {
  display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px)  { .erps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .erps { grid-template-columns: repeat(4, 1fr); } }
/* Doce fichas: 2, 3 y 4 columnas dividen exacto y nunca dejan una sola
   abajo. Si agregás o sacás una, revisá esa cuenta. */

.erp {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-align: center;
  background: var(--superficie);
  border: var(--grosor) solid var(--borde-suave);
  border-radius: var(--r-tarjeta);
  padding: 20px 12px 16px;
  color: var(--tinta-suave);
}
.erp__marca {
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em;
  color: var(--tinta); overflow-wrap: break-word;
}
.erp__linea { font-size: .78rem; color: var(--tinta-suave); }
.erp__sello {
  margin-top: 9px; font-size: .64rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-suave);
  border: 1px solid var(--borde-suave); border-radius: var(--r-chip);
  padding: 3px 9px;
}
.erp--nativo { border-color: var(--acento); background: linear-gradient(var(--velo-acento), var(--velo-acento)), var(--superficie); }
.erp--nativo .erp__sello { color: var(--acento); border-color: var(--acento); }

/* El color de la marca sólo al pasar por encima o al llegar con el tabulador.
   `--erp-c` la define cada ficha; las que no la traen usan el acento del
   sitio, que es lo honesto cuando no confirmamos el color con su guía. */
@media (prefers-reduced-motion: no-preference) {
  .erp { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
}
.erp:hover, .erp:focus-within {
  border-color: var(--erp-c, var(--acento));
  transform: translateY(-3px); box-shadow: var(--sombra);
}
.erp:hover .erp__marca, .erp:focus-within .erp__marca { color: var(--erp-c, var(--acento)); }
:root[data-tema="oscuro"] .erp:hover, :root[data-tema="oscuro"] .erp:focus-within { border-color: var(--erp-c-osc, var(--acento)); }
:root[data-tema="oscuro"] .erp:hover .erp__marca, :root[data-tema="oscuro"] .erp:focus-within .erp__marca { color: var(--erp-c-osc, var(--acento)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .erp:hover, :root:not([data-tema="claro"]) .erp:focus-within { border-color: var(--erp-c-osc, var(--acento)); }
  :root:not([data-tema="claro"]) .erp:hover .erp__marca, :root:not([data-tema="claro"]) .erp:focus-within .erp__marca { color: var(--erp-c-osc, var(--acento)); }
}

/* Los colores de marca, sólo para ese tinte. Son aproximaciones tomadas de
   material público y NO sustituyen a la guía de cada marca; las que no están
   acá no se inventaron. Cada una lleva su variante clara para fondo oscuro,
   porque un morado o un rojo oscuro sobre negro no se lee. */
.erp--odoo      { --erp-c: #714B67; --erp-c-osc: #C79CB9; }
.erp--sap       { --erp-c: #0A6ED1; --erp-c-osc: #6EB6F5; }
.erp--oracle    { --erp-c: #C74634; --erp-c-osc: #F09287; }
.erp--microsoft { --erp-c: #0067B8; --erp-c-osc: #6BB6F0; }
.erp--intuit    { --erp-c: #1B7D12; --erp-c-osc: #6FD35F; }
.erp--sage      { --erp-c: #0B7A3B; --erp-c-osc: #4FE07A; }
.erp--zoho      { --erp-c: #B7202A; --erp-c-osc: #FF8E90; }
.erp--sf        { --erp-c: #0176D3; --erp-c-osc: #6BC5F0; }

/* Cuando exista el SVG oficial: se agrega `con-logo` a la ficha y se cambia
   el <span class="erp__marca"> por el <img class="erp__logo">. Nada más. */
.erp__logo { display: block; height: 26px; width: auto; max-width: 100%; margin: 2px auto 0; }
.erp.con-logo .erp__marca { display: none; }
/* Los logos ajenos vienen con sus colores; en oscuro se los aclara un punto
   para que un logotipo negro no desaparezca contra el fondo. */
:root[data-tema="oscuro"] .erp.con-logo .erp__logo { filter: brightness(0) invert(1) opacity(.86); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .erp.con-logo .erp__logo { filter: brightness(0) invert(1) opacity(.86); }
}

.marca-ajena { font-size: .82rem; color: var(--tinta-suave); max-width: 74ch; }

/* --- Trío de refuerzo: sube / baja / la verdad --------------------------- */
.trio { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio li {
  border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta);
  background: var(--superficie); padding: 20px 22px;
}
.trio b { display: flex; align-items: center; gap: 9px; font-weight: 600; margin-bottom: 6px; }
.trio svg { width: 19px; height: 19px; flex: none; color: var(--acento); }
.trio span { color: var(--tinta-suave); font-size: .93rem; }