/* ============================================================================
   AbyNova · fonts.css

   DOS familias, las dos con licencia SIL Open Font License, las dos
   autoalojadas en Cloudflare Pages. Nunca por CDN de Google: el sanitizador de
   Bitrix borra los <link>, así que no habría preconnect — y además, sirviendo
   nosotros el archivo, el visitante no le pega a Google ni una vez.

   · Archivo (Omnibus-Type, Buenos Aires) — cuerpo, UI y h3 para abajo.
     Es una fundición latinoamericana: los diacríticos del español y del
     portugués están dibujados de origen, no adaptados. Que la tipografía de una
     marca para PYME de Paraguay y Ecuador venga de la región es una historia
     que ningún competidor tiene.
   · Instrument Serif — SOLO h1 y h2.
     Viene en un peso único, y eso es una virtud: obliga a la restricción. Un
     serif a 400 en 64 px se lee más caro que cualquier grotesca a 700. Y es el
     diferenciador real en esta categoría: el 95% de los bots de WhatsApp son
     todo-sans, así que un titular con serif lee institucional y establecido en
     vez de startup — que es exactamente lo que un dueño de clínica de 50 años
     reconoce como serio.

   ⚠️ ANTES: este archivo tenía el @font-face ENTERO adentro de un comentario y
   la carpeta assets/fuentes/ no existía. Las 63 páginas se servían en Segoe UI.
   No era un problema de diseño: era un documento sin tipografiar.

   font-display: swap y NO optional.
   `optional` no reflowea, pero significa que en caché fría la fuente
   frecuentemente NO ENTRA NUNCA — o sea, vuelve el bug que estamos arreglando.
   El CLS de `swap` se paga con la familia de respaldo de métricas ajustadas de
   más abajo, no bajando la fuente de la marca.

   ⚠️ Verificar SIEMPRE en el .woff2 FINAL, no en la web de la fundición:
     · Español: á é í ó ú ü ñ ¿ ¡ — y las MAYÚSCULAS acentuadas Á É Í Ó Ú, que
       se caen en muchos subsets automáticos y aparecen en titulares.
     · Portugués: ã õ â ê ô à ç Ã Õ Ç.
   Por eso se sirven los dos subsets con su unicode-range: el navegador baja
   `latin` casi siempre y `latin-ext` solo si la página lo necesita.
   ============================================================================ */

/* ------------------------------------------------------------------ Archivo */
@font-face {
  font-family: "Archivo";
  src: url("https://abynova.pages.dev/assets/fuentes/archivo-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("https://abynova.pages.dev/assets/fuentes/archivo-latinext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------- Instrument Serif */
@font-face {
  font-family: "Instrument Serif";
  src: url("https://abynova.pages.dev/assets/fuentes/instrument-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("https://abynova.pages.dev/assets/fuentes/instrument-latinext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   Respaldos con MÉTRICAS AJUSTADAS.

   Es lo que hace que `swap` cueste ~0 de CLS sin poder usar <link rel=preload>:
   mientras la fuente web viaja, el texto se pinta con la del sistema pero
   ocupando el MISMO alto de línea, así que cuando la real entra no se mueve
   nada. Los números NO están copiados de un blog: se midieron en este sitio
   comparando la altura de un párrafo real con cada familia forzada.
   ========================================================================= */
@font-face {
  font-family: "Archivo Respaldo";
  src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Serif Respaldo";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ============================================================================
   AbyNova · tokens.css
   Autoalojado en Cloudflare Pages, entra por CSSBLOCK_FILE. Nunca dentro de
   <style>: el sanitizador de Bitrix lo borra.

   POSICIONAMIENTO: "AbyNova no se configura. Se contrata."

   Dos superficies, no dos temas:
     · PAPEL  — la superficie por defecto. Ahí vive el 80% del contenido.
     · NOCHE  — solo las bandas donde aparece la escena 3D.
   No es una preferencia del usuario: son dos zonas de la misma página, y cada
   una lleva su propio juego de textos verificado contra WCAG.

   Todos los ratios de abajo están CALCULADOS con la fórmula WCAG 2.1
   (luminancia relativa, (L1+0.05)/(L2+0.05)), no estimados a ojo.
   ============================================================================ */

:root {
  color-scheme: light;

  /* ================================================== ESPACIADO · base 4px */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* El techo de 7rem era el delator más grande después de la fuente: los sitios
     de plantilla viven entre 64 y 96 px, los caros entre 120 y 180. Y el PISO
     importa más, porque el móvil es donde más barato se lee. */
  /* TRES pesos, no uno. Antes las 12 secciones tenían exactamente el mismo
     padding —129,6 px medidos, las doce, sin una excepción— y una página con un
     solo espacio "entre cosas" se lee como un metrónomo: el visitante no puede
     decir cuál sección importa más, porque el diseño no se lo dice. */
  --section-py: clamp(4.5rem, 9vw, 9.5rem);        /* 72 -> 152 · el defecto */
  --section-py-sm: clamp(3rem, 5.5vw, 5.5rem);     /* 48 -> 88  · apoyo */
  --section-py-lg: clamp(6.5rem, 13vw, 13.5rem);   /* 104 -> 216 · los momentos */
  --section-gap: clamp(2.5rem, 5.5vw, 4.5rem); /* encabezado -> contenido */
  --stack: var(--sp-4);

  /* ================================================== TIPOGRAFÍA */
  /* Las dos familias se cargan en fonts.css, autoalojadas. El respaldo NO es la
     pila del sistema pelada: es una familia con métricas ajustadas, que ocupa
     el mismo alto que la real y por eso el texto no salta cuando la web entra. */
  --font-sans: "Archivo", "Archivo Respaldo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* 26-ago-2026: el display deja de ser serif. Un titular en Instrument
     Serif sobre platino frio sigue leyendose como revista, que es
     exactamente lo que el dueno rechazo: "esta horrible". Archivo es una
     grotesca --lee tecnica, no editorial-- y ya esta cargada para el
     cuerpo, asi que ademas se van dos archivos de fuente.
     El peso tope es 600 porque es el rango que declara el @font-face; el
     titular compensa con tracking negativo, no con un peso que no existe. */
  --font-display: "Archivo", "Archivo Respaldo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-display: 600;

  --fs-100: .75rem;                                     /* 12 · legales */
  --fs-200: .8125rem;                                   /* 13 · chips */
  --fs-300: .875rem;                                    /* 14 · UI secundaria */
  --fs-400: clamp(1rem, .97rem + .15vw, 1.0625rem);     /* 16→17 · cuerpo */
  --fs-500: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem); /* 18→21 · bajada */
  --fs-600: clamp(1.25rem, 1.14rem + .55vw, 1.625rem);  /* 20→26 · h4 */
  --fs-700: clamp(1.5rem, 1.28rem + 1.05vw, 2.0625rem); /* 24→33 · h3 */
  /* ── el corte entre "texto" y "display" ─────────────────────────────
     Antes la escala era 17·20·24·28·40·52: pasos de 1,18 · 1,20 · 1,17 y un
     salto de solo 1,30 de h2 a h1. En móvil el titular del héroe era 4,6 px
     más grande que el de "Preguntas": eso no es jerarquía, es empate. */
  --fs-800: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);  /* 28->40 · h2 de apoyo. Era 26->36 y perdia contra el h3 */  /* 26→36 · h2 de apoyo */
  --fs-850: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);       /* 32→52 · h2 de los momentos */
  --fs-900: clamp(2.5rem, 1.55rem + 3.9vw, 4.25rem);    /* 40→68 · h1, uno por página */

  /* 🔑 1.06 era un bug esperando en ES y PT: las MAYÚSCULAS ACENTUADAS
     —Á É Í Ó Ú, Ã Õ— son más altas que la altura de mayúscula. A 1.06, un
     titular de dos líneas donde la segunda empieza con Á y la primera termina
     en g/j/p se choca. 1.08 es el piso. */
  --lh-tight: 1.08;  --lh-snug: 1.2;  --lh-ui: 1.4;
  --lh-body: 1.55;   --lh-loose: 1.65;

  --tracking-tight: -.02em;   /* solo de --fs-800 para arriba */
  --tracking-wide: .09em;     /* eyebrows en mayúsculas: .06 era muy apretado a 13 px */

  --fs-precio: clamp(2.75rem, 2rem + 3.2vw, 4rem);  /* 44→64 · el precio es el número grande */

  --measure-bajada: 52ch;     /* una bajada se lee de una pasada o no se lee: 71ch era un párrafo con tamaño de bajada */
  --measure: 62ch;            /* 66 es el número del libro de texto; el copy de marketing va en 60-62 */
  --measure-tight: 46ch;      /* bajada del héroe */

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;


  /* ==================================================================
     COLOR — reemplazado el 26-ago-2026 por el consejo de marca.
     La paleta anterior era laton sobre papel calido y el dueno la rechazo
     con la palabra "horrible", igual que rechazo el oro antes con la
     palabra "McDonald's". Dos metales calidos rechazados: estan fuera.

     El platino es la maquina. El violeta es la corriente que la recorre.
     El magenta es lo que sale del otro lado.

     PROHIBIDO agregar un color aca sin su contraste medido al lado.
     ================================================================== */

  color-scheme: light;

  /* ══════════════════════════════════════════ PRIMITIVOS · PLATINO
     Rampa fría medida: TODA entre hue 216,0° y 218,8°. Ni un gris cálido
     disfrazado. (El sistema anterior tenía el papel en hue 40,8°.) */
  --pl-000: #FFFFFF;   /* H —      · superficie elevada */
  --pl-025: #F6F8FB;   /* H 216,0° · croma LCh 1,7 — el papel */
  --pl-050: #EDF0F5;   /* H 217,5° · banda hundida */
  --pl-100: #DFE4EC;   /* H 216,9° · divisor suave */
  --pl-200: #C6CEDA;   /* H 216,0° · divisor por defecto */
  --pl-300: #9BA6B7;   /* H 216,4° · filete DECORATIVO — jamás porta información */
  --pl-400: #78849A;   /* H 218,8° · borde de control · 3,55:1 */
  --pl-500: #5A6678;   /* H 216,0° · texto terciario · 5,47:1 */
  --pl-700: #3A4353;   /* H 218,4° · texto secundario · 9,37:1 */
  --pl-900: #0F141C;   /* H 216,9° · texto principal · 17,36:1 */

  /* ══════════════════════════════════════════ PRIMITIVOS · NOCHE
     Grafito frío, hue 216°–220°. El índigo-ciruela anterior (#120E1E) existía
     para hacerle fondo complementario al oro. Sin oro, sobra. */
  --nc-950: #0A0D13;   /* H 220,0° · fondo de banda */
  --nc-900: #10141C;   /* H 220,0° */
  --nc-800: #171D27;   /* H 217,5° · tarjeta sobre noche */
  --nc-700: #262E3C;   /* H 218,2° · divisor */
  --nc-600: #3D4859;   /* H 216,4° */
  --nc-500: #55637A;   /* H 217,3° · borde de control · 3,20:1 */

  /* ══════════════════════════════════════════ PRIMITIVOS · SEÑAL (violeta)
     hue 251°–254°, croma LCh 93–108. El rubro entero vive en hue 200–220°.
     ΔE76 contra #FFC72C (McDonald's): 174–180. Contra #8C6A1E (latón): 131–144.
     El umbral de riesgo era 20. */
  --se-700: #4C1FD9;   /* H 254,5° · hover del relleno · blanco encima 8,38:1 */
  --se-600: #5B2FE8;   /* H 254,3° · LA SEÑAL · blanco encima 6,96:1 */
  --se-500: #6D4AFF;   /* H 251,6° · relleno SOLO sobre noche · 3,77:1 vs noche */
  --se-300: #9B84FF;   /* H 251,2° · texto/ícono sobre noche · 6,61:1 */
  --se-200: #C3B5FF;   /* H 251,4° · brillo y polvo sobre noche · 10,53:1 */
  --se-025: #ECEAFD;   /* H 246,3° · croma 9,8 — pastilla y burbuja del bot */

  /* ══════════════════════════════════════════ PRIMITIVOS · REMATE (magenta)
     El otro extremo del riel. Aparece en ~2% del área: el nodo final, el punto
     en vivo, el borde fresnel del 3D. ΔE76 vs latón: 77–79. */
  --rm-600: #C21D6E;   /* H 330,5° · sobre claro · 5,34:1 · puede portar texto */
  --rm-400: #F0468C;   /* H 335,3° · sobre noche  · 5,52:1 */

  /* ══════════════════════════════════════════ SEMÁNTICOS · PAPEL */
  --bg:            var(--pl-025);
  --bg-alt:        var(--pl-050);
  --surface:       var(--pl-000);

  --text:          var(--pl-900);   /* 17,36:1 sobre papel — AAA */
  --text-muted:    var(--pl-700);   /*  9,37:1 sobre papel — AAA */
  --text-subtle:   var(--pl-500);   /*  5,47:1 sobre papel — AA · PROHIBIDO en cuerpo */

  --border:        var(--pl-200);   /*  1,49:1 · hairline */
  --border-soft:   var(--pl-100);
  --border-strong: var(--pl-400);   /*  3,55:1 · AA UI (1.4.11) */

  /* El botón primario es la SEÑAL, no el metal y no la tinta.
     El oro falló por ÁREA, no por matiz: 675 pastillas amarillas al 100% de
     saturación y 80% de luminancia son un cartel. Un violeta a 41% de
     luminancia repetido 675 veces es una interfaz. La regla que reemplaza a la
     vieja: sobre superficie clara el PLATINO nunca rellena — el platino es
     filete, brillo de 1 px y texto sobre noche. El relleno es de la señal. */
  --accent:        var(--se-600);
  --accent-hover:  var(--se-700);   /* el hover SUBE el contraste: 6,96 -> 8,38:1 */
  --accent-text:   var(--se-600);   /*  6,54:1 sobre papel — AA */
  --accent-icon:   var(--se-600);
  --accent-soft:   var(--se-025);
  --on-accent:     #FFFFFF;         /*  6,96:1 sobre --accent — AA */

  /* El anillo de foco es GRAFITO y va con offset, no pegado.
     Medido: grafito directamente sobre el botón violeta da 2,65:1 y NO cumple
     1.4.11. Con outline-offset: 2px el anillo apoya contra el papel y da
     17,36:1. El offset no es estético: es el que hace que pase. */
  --focus:         var(--pl-900);   /* 17,36:1 sobre papel */
  --focus-noche:   #E8EDF5;         /* 16,54:1 sobre noche · 4,38:1 aun sobre --se-500 */
  --focus-anillo:  3px;
  --focus-offset:  2px;

  /* ══════════════════════════════════════════ SEMÁNTICOS · NOCHE */
  --noche:         var(--nc-950);
  --noche-1:       var(--nc-900);
  --noche-2:       var(--nc-800);
  --noche-divisor: var(--nc-700);
  --noche-borde:   var(--nc-500);   /*  3,20:1 sobre noche — AA UI */

  --noche-text:    #E8EDF5;         /* 16,54:1 — AAA */
  --noche-text-2:  #AEBACA;         /*  9,89:1 — AAA */
  --noche-text-3:  #8391A4;         /*  6,07:1 — AA  */
  --noche-accent:  var(--se-300);   /*  6,61:1 — AA  */
  --noche-remate:  var(--rm-400);   /*  5,52:1 — AA  */

  /* ══════════════════════════════════════════ PLATINO · los gradientes
     Un hex plano no puede ser metal. Regla: >=3 paradas y >=35 L* de rango
     dentro de 1 px de alto o del alto de una letra. Si no llega, es gris. */
  --platino-riel-claro: linear-gradient(90deg,
      rgba(120,132,154,0) 0%, #78849A 22%, #0F141C 50%,
      #78849A 78%, rgba(120,132,154,0) 100%);          /* rango 89,1 L* */
  --platino-riel-noche: linear-gradient(90deg,
      rgba(85,99,122,0) 0%, #55637A 22%, #E8EDF5 50%,
      #55637A 78%, rgba(85,99,122,0) 100%);            /* rango 87,9 L* */
  --platino-texto: linear-gradient(177deg,
      #FFFFFF 0%, #C6CEDA 38%, #8391A4 50%,
      #E8EDF5 62%, #FFFFFF 100%);                      /* rango 40,3 L*
      · parada más oscura #8391A4 = 6,07:1 sobre noche. SOLO sobre .noche
        y SOLO de --fs-800 para arriba. */
  --platino-canto:   inset 0 1px 0 rgba(255,255,255,.90); /* canto de tarjeta clara */
  --platino-canto-b: inset 0 1px 0 rgba(255,255,255,.28); /* canto sobre relleno violeta */

  /* La corriente que viaja por el riel: violeta que se vuelve magenta. */
  --riel-corriente: linear-gradient(90deg,
      var(--se-600) 0%, var(--se-500) 45%, var(--rm-600) 100%);
  --riel-corriente-noche: linear-gradient(90deg,
      var(--se-300) 0%, var(--se-200) 45%, var(--rm-400) 100%);

  /* ══════════════════════════════════════════ ESTADOS
     Sin ámbar en todo el sistema: --aviso: #7A4A00 estaba a ΔE76 = 14,4 del
     latón rechazado, es decir ERA el latón. Ningún estado se comunica solo por
     color: cada uno lleva ícono y palabra (6–8% de los varones tiene
     deficiencia al rojo-verde y el comprador es varón de 35 a 60). */
  --ok:          #0B7A55;   /* 5,02:1 · H 160,0° */
  --ok-soft:     #D9F2E7;
  --aviso:       #9A3412;   /* 6,87:1 · H  15,0° · ΔE76 vs latón 36,8 */
  --aviso-soft:  #FBE3D8;
  --error:       #C0203A;   /* 5,63:1 · H 350,2° */
  --error-soft:  #FBE0E5;
  --info:        var(--se-600);

  --ok-noche:    #3FD99B;   /* 10,75:1 */
  --aviso-noche: #FF9E6E;   /*  9,60:1 · ΔE76 vs #FFC72C 45,5 (el heredado daba 23,2) */
  --error-noche: #FF8DA1;   /*  8,87:1 */

  /* ══════════════════════════════════════════ ESCENA 3D
     El módulo los lee con getComputedStyle: cambiar la paleta no toca un shader.
     Una nova de verdad tiene el núcleo BLANCO. El error nunca fue el nombre:
     fue pintar la nova con el color del acento en vez de sacar el acento de la nova. */
  --gl-nucleo:   #FFFFFF;   /* el punto más brillante */
  --gl-medio:    #9B84FF;   /* la señal */
  --gl-borde:    #F0468C;   /* fresnel: define la silueta, no baña */
  --gl-profundo: #1A1633;   /* crestas frías, para que no caigan a negro */
  --gl-polvo:    #C3B5FF;
  --gl-fondo:    #07090E;

  /* ══════════════════════════════════════════ SOMBRA
     El hue 32 heredado era una sombra MARRÓN. Una sombra cálida bajo una paleta
     fría ensucia todos los grises: es exactamente por lo que las marcas
     "plateadas" salen grises y tristes. */
  --sombra: 220 28% 10%;
  --e1: 0 1px 2px hsl(var(--sombra)/.05);
  --e2: 0 1px 2px hsl(var(--sombra)/.06), 0 8px 24px hsl(var(--sombra)/.09);

  /* ══════════════════════════════════════════ ALIAS DEPRECADOS
     styles.css todavía nombra el latón en 25 lugares. Estos alias evitan tocar
     archivos que otros agentes están editando en paralelo. Se borran cuando
     styles.css se limpie; NO agregar usos nuevos. */
  --laton:         var(--se-600);
  --laton-linea:   var(--pl-300);   /* 2,31:1 · el heredado daba 2,34:1 — mismo peso */
  --laton-noche:   var(--se-300);
  --laton-relleno: var(--se-500);
  --sobre-laton:   #FFFFFF;         /* 5,15:1 sobre --se-500 — AA */
  --bronce:        var(--se-600);
  --bronce-icono:  var(--se-600);
  --arena:         var(--se-025);
  --noche-oro:     var(--se-300);
  --corona:        var(--rm-600);
  --indigo:        var(--se-700);
  --papel:         var(--pl-025);
  --papel-hundido: var(--pl-050);
  --papel-alto:    var(--pl-000);
  --divisor:       var(--pl-200);
  --tinta:         var(--pl-900);
  --tinta-2:       var(--pl-700);
  --tinta-3:       var(--pl-500);
  --borde-control: var(--pl-400);
  /* ================================================== RADIOS
     16 px sobre una tarjeta de 340 es la proporción exacta de la app de
     delivery: Rappi, las billeteras, la comida rápida, todas viven entre 12 y
     20. Lo premium en 2026 es BIMODAL — filoso (0-4 px) o píldora entera
     (999 px) en contraste contra contenedores filosos. Lo que no es premium es
     todo lo que está en el medio. Una píldora adentro de una caja de 4 px hace
     que las dos se lean como decisiones; todo a 16 px no se lee como nada. */
  --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px;
  --r-full: 999px;
  --r-card: var(--r-md);   /* 4 px · era 16 */
  --r-btn: var(--r-sm);    /* 3 px · era 12 */
  --r-input: var(--r-sm);
  --r-media: 6px;          /* fotos y video: apenas más que las cajas */

  /* ================================================== ELEVACIÓN
     Una tarjeta que no se mueve lleva CERO sombra y 1 px de borde. Cuatro
     niveles de elevación es un hábito de librería de componentes, y varias
     sombras suaves sobre un fondo cálido son tarjetas flotando sobre beige:
     la estética exacta de la app que estamos tratando de no parecer.
     La sombra aparece en hover, y solo si el elemento de verdad se levanta. */
  --sombra: 32 20% 14%;
  --e1: 0 1px 2px hsl(var(--sombra)/.04);
  --e2: 0 1px 2px hsl(var(--sombra)/.05), 0 8px 24px hsl(var(--sombra)/.07);
  /* --e3 y --e4 se retiraron: nada en una landing necesita cuatro niveles. */

  /* ================================================== MOVIMIENTO */
  --dur-1: 90ms; --dur-2: 160ms; --dur-3: 240ms; --dur-4: 380ms; --dur-5: 520ms;
  /* Con el primer punto de control en (.16, 1) la curva cubre el 90% de la
     distancia en el primer tercio del tiempo y después planea. Ese perfil
     —llega temprano, se asienta tarde— se lee como masa física. La curva
     anterior era casi lineal y se leía como interfaz. */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --ease-entrada: cubic-bezier(.22,1,.36,1);

  /* ================================================== LAYOUT
     1200 px es el ancho por defecto de Bootstrap y de Tailwind: lo tiene
     literalmente todo. Bajarlo no quita contenido, agrega margen lateral — y
     el margen lateral es la señal más barata de "esto lo decidió alguien". */
  --container: 68rem;          /* 1088 · era 75rem/1200 */
  --container-narrow: 44rem;   /* 704 · texto largo, FAQ, legal */
  --container-wide: 84rem;     /* 1344 · solo el héroe */
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --grid-gap: clamp(1.25rem, 2vw, 1.75rem);
  /* El padding interno de una tarjeta tiene que ser >= al hueco entre tarjetas.
     Al revés, las cajas se leen como fichas sueltas en un tablero. */
  --pad-card: clamp(1.5rem, 2.5vw, 2rem);

  --z-sticky: 100; --z-header: 200; --z-cta-movil: 300; --z-modal: 500;

  --tap-min: 44px;             /* nunca menos: se toca con el pulgar */
  --header-h: 56px;
  --cta-movil-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ==============================================================
     RADIOS Y FISICA DE LUZ — consejo de componentes, 26-ago-2026.
     Convivian ocho firmas de radio en una sola pagina, y siete de siete
     superficies tenian box-shadow:none: el sitio no se leia plano por el
     color sino porque nunca decidio de donde viene la luz.
     ============================================================== */

  /* CAPA DE ALIAS. El consejo de paleta nombro los tokens en ingles (--bg,
     --text, --accent) y el de componentes en espanol, porque trabajaron en
     paralelo y les pedi marcadores para que no se pisaran. Estas cinco lineas
     son la costura, y son el unico lugar donde vive la equivalencia: mover un
     color se hace arriba, en la paleta, y llega solo hasta aca.
     Sin esto los marcadores viajaban literales al navegador y --fondo valia
     "{FONDO}", que no es un color: el boton primario quedaba transparente. */
  --fondo:      var(--bg);
  --superficie: var(--surface);
  --texto:      var(--text);
  --acento:     var(--accent);
  --borde:      var(--border);

  --texto-2:      #000; /* respaldo */
  --texto-2:      color-mix(in oklab, var(--texto) 72%, var(--fondo));   /* >= 4.5:1 vs FONDO */
  --borde-fuerte: #000; /* respaldo */
  --borde-fuerte: color-mix(in oklab, var(--borde) 45%, var(--texto));   /* >= 3:1 vs SUPERFICIE */
  --sobre-texto:  var(--fondo);                                          /* etiqueta del primario */
  --acento-suave: color-mix(in oklab, var(--acento) 12%, var(--fondo));

  /* sombras derivadas de --texto -> heredan la temperatura de la paleta */
  --sombra-c: color-mix(in oklab, var(--texto) 100%, transparent);

/* ---- capa derivada. Doble declaracion: respaldo estatico primero. ---- */

--r-0: 0;        /* medios, tablas, bandas a sangre */
--r-1: 2px;      /* TODO control y TODA superficie: boton, tarjeta, input, plan, plano */
--r-full: 999px; /* SOLO chip, insignia y avatar */
--luz-alta:  inset 0 1px 0 color-mix(in oklab, #fff 55%, transparent); /* canto superior */
--luz-baja:  inset 0 -1px 0 color-mix(in oklab, var(--texto) 10%, transparent); /* canto inferior */

--e0: none;                                            /* al ras: solo borde de 1px */
--e1: 0 1px 1px color-mix(in oklab, var(--sombra-c) 5%, transparent),
      0 2px 6px color-mix(in oklab, var(--sombra-c) 4%, transparent);
--e2: 0 1px 1px color-mix(in oklab, var(--sombra-c) 6%, transparent),
      0 10px 28px color-mix(in oklab, var(--sombra-c) 10%, transparent);

}

@media (min-width: 48em) { :root { --header-h: 72px; } }

/* ============================================================================
   Nota sobre el modo oscuro: NO hay toggle de tema.
   La superficie por defecto es Papel a propósito (ver ESTADO_PROYECTO.md).
   El oscuro existe solo como banda .noche, y esas bandas llevan su propio juego
   de textos verificado — no dependen de ninguna media query. Así el sitio se ve
   igual en todos lados y no hay flash: el loader de Bitrix ejecuta el JS después
   del parseo, así que cualquier tema resuelto por JS parpadea.
   ========================================================================= */

/* ============================================================================
   REDISEÑO 2026-10 · BLANCO, GRAFITO Y UNA SEÑAL
   Pedido del dueño (05-oct): "muy moderno, blanco, elegante, robótico".
   Fuente: design/rediseno-2026-10/marca.md (35 contrastes calculados con la
   fórmula WCAG 2.1). Este bloque va AL FINAL a propósito: redefine los
   primitivos y los semánticos, y todo lo de arriba hereda sin tocarse.
   Sale el violeta y el magenta. Entra UN acento: naranja de máquina #FF5500,
   SOLO como relleno/gráfico (3,21:1). Para texto, #B54000 (5,68:1).
   El botón primario es grafito, no naranja: el oro se rechazó por ocupar
   superficie, no por el tono.
   ============================================================================ */
:root {
  /* primitivos · claro */
  --pl-000: #FFFFFF;  --pl-025: #FFFFFF;  --pl-050: #F5F6F8;
  --pl-100: #EEF0F3;  --pl-200: #E3E6EA;  --pl-300: #CDD2D9;
  --pl-400: #848C98;  /* borde de control · 3,39:1 */
  --pl-500: #5E6570;  /* terciario · 5,88:1 */
  --pl-700: #3D434C;  /* secundario · 9,97:1 */
  --pl-900: #0B0D10;  /* principal · 19,46:1 */
  /* primitivos · grafito */
  --nc-950: #0B0D10;  --nc-900: #0B0D10;  --nc-800: #15181D;
  --nc-700: #262A31;  --nc-600: #3A3F47;  --nc-500: #5F6672;
  /* la señal (los nombres se-/rm- se conservan para no reescribir styles.css) */
  --se-700: #E04A00;  --se-600: #FF5500;  --se-500: #FF5500;
  --se-300: #FF8A4C;  --se-200: #FFB98F;  --se-025: #FFEFE6;
  --rm-600: #FF7A33;  --rm-400: #FFB98F;

  --senal: #FF5500;  --senal-texto: #B54000;  --senal-suave: #FFEFE6;
  --led: #0B9A5E;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, Menlo, "Roboto Mono", monospace;

  /* semánticos */
  --bg: #FFFFFF;  --bg-alt: #F5F6F8;  --surface: #FFFFFF;
  --border: #E3E6EA;  --border-soft: #EEF0F3;  --border-strong: #848C98;
  --accent: #0B0D10;  --accent-hover: #2A2F37;  --on-accent: #FFFFFF;
  --accent-text: #B54000;  --accent-icon: #B54000;  --accent-soft: #FFEFE6;
  --focus: #0B0D10;  --focus-noche: #EEF0F3;
  --noche-borde: #5F6672;
  --noche-text: #EEF0F3;  --noche-text-2: #A8AFB9;  --noche-text-3: #848C98;
  --noche-accent: #FF8A4C;  --noche-remate: #FF8A4C;
  --info: #3D434C;
  --ok: #0A7A4E;  --ok-noche: #3DDC97;  --error: #C4203A;
  --aviso: #B54000;  --aviso-soft: #FFEFE6;

  /* legados que styles.css todavía nombra */
  --laton: #FF5500;  --laton-relleno: #FF5500;  --laton-noche: #FF8A4C;
  --laton-linea: #CDD2D9;  --sobre-laton: #0B0D10;
  --bronce: #B54000;  --bronce-icono: #B54000;
  --arena: #FFEFE6;  --noche-oro: #FF8A4C;  --corona: #B54000;  --indigo: #0B0D10;
  --gl-fondo: #0B0D10;
  --platino-riel-claro: linear-gradient(90deg, rgba(205,210,217,0) 0%, #CDD2D9 22%, #0B0D10 50%, #CDD2D9 78%, rgba(205,210,217,0) 100%);
  --riel-corriente: linear-gradient(90deg, #FF5500 0%, #FF7A33 100%);
  --riel-corriente-noche: linear-gradient(90deg, #FF8A4C 0%, #FFB98F 100%);

  --fw-display: 500;
}

/* ============================================================================
   05-OCT-2026 (tarde) · BLANCO Y NEGRO PURO
   El dueño: "muy profesional, elegante, negro con blanco". Se va el naranja:
   la señal pasa a ser la propia tinta (negro sobre blanco, blanco sobre negro).
   El único color que queda es el verde del LED "en línea", que es semántico y
   siempre va con la palabra al lado.
   ============================================================================ */
:root {
  --senal: #0B0D10;  --senal-texto: #0B0D10;  --senal-suave: #EEF0F3;
  --se-700: #000000; --se-600: #0B0D10; --se-500: #0B0D10;
  --se-300: #FFFFFF; --se-200: #FFFFFF; --se-025: #EEF0F3;
  --rm-600: #3D434C; --rm-400: #CDD2D9;
  --accent-text: #0B0D10;  --accent-icon: #0B0D10;  --accent-soft: #EEF0F3;
  --aviso: #3D434C;  --aviso-soft: #EEF0F3;
  --noche-accent: #FFFFFF;  --noche-remate: #FFFFFF;  --noche-oro: #FFFFFF;
  --laton: #0B0D10;  --laton-relleno: #FFFFFF;  --laton-noche: #FFFFFF;  --sobre-laton: #0B0D10;
  --bronce: #0B0D10;  --bronce-icono: #0B0D10;  --arena: #EEF0F3;  --corona: #0B0D10;
  --riel-corriente: linear-gradient(90deg, #0B0D10 0%, #5E6570 100%);
  --riel-corriente-noche: linear-gradient(90deg, #FFFFFF 0%, #8E959F 100%);
}
:root {
  /* blanco y negro también en los estados: el texto ya dice qué es cada uno */
  --ok: #0B0D10;  --ok-soft: #EEF0F3;  --ok-noche: #FFFFFF;
  --aviso-noche: #FFFFFF;  --error-noche: #FFFFFF;
}

/* ============================================================================
   AbyNova · styles.css
   Depende de tokens.css. Todo va scopeado bajo #abn porque en Bitrix el HTML
   entra dentro de la página del constructor y comparte documento con su tema.
   ============================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fw-regular) var(--fs-400)/var(--lh-body) var(--font-sans);
}
/* -webkit-font-smoothing: antialiased SALIÓ del body.
   Cambia de suavizado subpíxel a suavizado de grises, lo que ADELGAZA el texto
   sobre fondo claro y le baja el contraste percibido: sobre papel cálido con
   el cuerpo a 400 se veía débil. Se queda solo donde sí ayuda — texto claro
   sobre oscuro, que con subpíxel engorda de más. */
#abn .noche { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ============================================================================
   TODAS las reglas de base van dentro de :where(#abn), no de #abn.

   Por qué importa y no es un detalle: el HTML se publica dentro del constructor
   de Bitrix y comparte documento con su tema, así que hay que scopear con el id.
   Pero un id pesa (1,0,0) y le gana a cualquier clase, así que `#abn h2` pisaba
   a `.noche h2` — y el resultado fue tinta #17151F sobre fondo #120E1E:
   **1.03:1, un titular invisible**, que es justo lo que el dueño prohibió.

   `:where()` aporta CERO especificidad: el scope se conserva y las clases de
   sección vuelven a ganar. La salida es bajar la especificidad de la base, no
   subir la de todo lo demás.
   ========================================================================= */
:where(#abn) img, :where(#abn) video, :where(#abn) canvas {
  max-width: 100%; height: auto; display: block;
}
:where(#abn) svg { width: 1em; height: 1em; display: block; }

:where(#abn) :is(h1, h2, h3, h4) {
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}
/* El serif SOLO en h1 y h2. Si bajara hasta h4 dejaría de significar jerarquía
   y sería una decoración. Y va en 400: un serif a peso normal en 64 px se lee
   más caro que cualquier grotesca en 700. */
:where(#abn) :is(h1, h2) { font-family: var(--font-display); font-weight: 400; }
:where(#abn) :is(h3, h4) { font-family: var(--font-sans); font-weight: var(--fw-semibold); }
/* El interlineado y el tracking se calibran POR TAMAÑO, no una vez.
   Un serif a 52 px con 1.2 flota; a 26 px con 1.12 se choca. Y -.02em fijo
   daba proporcionalmente el mismo apretón a 34 px que a 52: el tracking óptico
   tiene que aflojarse cuando el tamaño baja, sobre todo en un serif con
   acentos. El piso de 1.08 en h1 no se toca: es lo que salva a las MAYÚSCULAS
   ACENTUADAS de chocarse. */
:where(#abn) h1 { font-size: var(--fs-900); line-height: var(--lh-tight);
                  letter-spacing: -.008em; }
:where(#abn) h2 { font-size: var(--fs-800); line-height: 1.16;
                  letter-spacing: -.004em; }
:where(#abn) h3 { font-size: var(--fs-700); line-height: 1.25; }
@media (min-width: 62em) {
  :where(#abn) h1 { letter-spacing: -.026em; }
  :where(#abn) h2 { letter-spacing: -.018em; }
}
:where(#abn) p  { margin: 0; max-width: var(--measure); text-wrap: pretty; }
:where(#abn) :is(ul, ol) { margin: 0; padding: 0; }

/* Enlaces de texto: bronce, nunca oro. El oro sobre papel da 1.73:1 y es
   ilegible — es el error número uno de las marcas amarillas.
   También va en :where(): si no, este color le ganaba al del botón dorado y
   dejaba texto bronce sobre oro, 4.47:1, por debajo de AA. */
:where(#abn) a { color: var(--accent-text); text-underline-offset: .18em; }

/* Un solo anillo de foco para toda la página. Se toca desde teclado. */
#abn :where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
#abn .noche :where(a, button, summary):focus-visible { outline-color: var(--focus-noche); }

.saltar {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--text);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); z-index: var(--z-modal);
}
.saltar:focus { left: var(--sp-4); top: var(--sp-4); }

/* ------------------------------------------------------------------ layout */
.container, .container-narrow, .container-wide {
  width: 100%; margin-inline: auto; padding-inline: var(--gutter);
}
.container        { max-width: var(--container); }
.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }

.sec { padding-block: var(--section-py); }
/* Los momentos respiran, el apoyo se aprieta. Sin esto el scroll era
   129,6 · 129,6 · 129,6 · … doce veces, que es un metrónomo y no una partitura. */
.sec--mayor { padding-block: var(--section-py-lg); }
.sec--ap    { padding-block: var(--section-py-sm); }
/* Un h2 de momento pesa 52 px; uno de apoyo, 36. Tres alturas de titular en la
   página —68 / 52 / 36— es lo que hace que se lea como si alguien la dirigiera. */
.sec--mayor h2 { font-size: var(--fs-850); line-height: 1.1; }
.sec--alt { background: var(--bg-alt); }
.sec__enc { margin-block-end: var(--section-gap); }
.sec__bajada {
  font-size: var(--fs-500); color: var(--text-muted);
  max-width: var(--measure-bajada); margin-block-start: var(--sp-4);
}
.sec--pagina { padding-block-start: calc(var(--section-py) * .6); }
.sec--pagina h2 { margin-block: var(--sp-10) var(--sp-4); font-size: var(--fs-700); }
.sec--pagina h3 { margin-block: var(--sp-6) var(--sp-3); font-size: var(--fs-600); }
.sec--pagina p, .sec--pagina li { color: var(--text-muted); margin-block-start: var(--sp-4); }
.sec--pagina ul, .sec--pagina ol { padding-inline-start: var(--sp-6); }
.sec--pagina li { list-style: initial; }
.sec--pagina ol li { list-style: decimal; }

.eyebrow {
  font-size: var(--fs-200); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 var(--sp-3);
}
.nota {
  margin-block-start: var(--sp-6); font-size: var(--fs-300);
  color: var(--text-muted); max-width: var(--measure);
}

/* ------------------------------------------------------------------ botones */
.btn {
  --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: var(--sp-3) var(--sp-6);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-btn);
  font: var(--fw-semibold) var(--fs-400)/1 var(--font-sans);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
/* hover solo donde hay puntero: en táctil el trabajo lo hace :active */
@media (hover: hover) { .btn:hover { --btn-bg: var(--accent-hover); box-shadow: var(--e2); } }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn--fantasma { --btn-bg: transparent; --btn-fg: var(--accent-text); --btn-bd: var(--border-strong); }
.btn--lg { min-height: 52px; padding-inline: var(--sp-8); font-size: var(--fs-500); }
.btn--block { width: 100%; }

/* ------------------------------------------------------------------ cabecera */
.cab {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  border-block-end: 1px solid var(--border);
}
.cab__in {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--header-h);
  /* wrap para que la nav pueda bajar a su propia fila en movil. Sin esto su
     flex-basis:100% no servia de nada: quedaba comprimida a 40 px --medido--
     y los cuatro items existian pero no se veia ninguno. */
  flex-wrap: wrap;
}
@media (min-width: 62em) { .cab__in { flex-wrap: nowrap; } }

/* En movil el CTA de la cabecera sobra: la barra fija de abajo
   ([data-cta-movil]) ya lo cubre, y en pantalla angosta se llevaba una fila
   entera para si solo --tres filas, 174 px, el 21% de la primera pantalla.
   Sacandolo quedan dos: marca+idiomas arriba, navegacion abajo. */
@media (max-width: 61.999em) {
  .cab__in > .btn { display: none; }
  .cab__nav { order: 3; }
  .cab__in { row-gap: var(--sp-2); padding-block: var(--sp-2); }
}
.cab__marca {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--fs-500); color: var(--text); text-decoration: none;
  margin-inline-end: auto;
}
/* El glifo de marca. Se dibuja con `background-image` y un data URI, NO con un
   <svg> en linea: el sanitizador de Bitrix borra los svg del HTML pero no toca
   el CSS externo. Esa leccion sigue valiendo y es la razon de todo lo que
   sigue.

   CONCEPTO "EL PUENTE" (02-sep-2026). La A y no la N: la marca es AbyNova y la
   inicial es la A. El travesano ES el puente --cruza la letra y sale por los
   dos lados, o sea algo que pasa de un lado al otro-- y es lo unico con color,
   asi que a 16 px el ojo lo encuentra primero.

   POR QUE ESTENCIL Y DE MASA. La A va cortada en tres piezas separadas, como
   un estencil de tinta: los cortes dejan pasar el papel y eso mantiene la letra
   legible cuando se achica, donde una A maciza se cierra en un triangulo negro.
   Y de MASA, no de contorno: medido a 24 px --el tamano real de un favicon--,
   la version de contorno se deshace en un hilo lavado. Es la misma razon por la
   que aca no puede ir un render 3D: a 25 px un render es una mancha gris.

   POR QUE LATON Y NO ORO NI VIOLETA. El laton #8E949C es el unico acento de la
   paleta papel-tinta. El glifo anterior traia una A gris #2E3542 con travesano
   violeta->magenta: colores que no existen en ningun otro lugar del sitio, o
   sea una marca prestada de otra identidad.
   ⚠️ El laton es SOLO relleno, JAMAS texto: 2.16:1 sobre papel. Para texto de
   acento esta el bronce #7A4200.

   🔑 EL BUG QUE ESTE BLOQUE ARREGLA: la variante de noche era una COPIA
   BYTE A BYTE de la de dia. La misma A gris #2E3542 sobre el fondo noche
   #17151F da 1.46:1 --el logo no se veia en la banda oscura ni en el pie, que
   es donde vive en la mitad del sitio--. Dos data URI que se ven parecidos no
   son dos data URI distintos: si se vuelven a tocar, comparalos.

   🔑 SIN degradado radial y sin brillo especular. El de antes era un
   `radial-gradient(circle at 42% 38%, ...)`: una esfera con brillo descentrado,
   y eso se lee como caramelo INDEPENDIENTEMENTE del color. Cuando la paleta
   paso de oro a laton, al glifo solo le cambio el tono a la yema: la forma
   seguia siendo la misma. La forma pesa mas que el color. */
.marca__glifo {
  width: 1.5em; height: 1.5em; flex: none;
  background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221234%22%20height%3D%221137%22%20viewBox%3D%22407%20456%201234%201137%22%3E%3Cpath%20transform%3D%22translate%280%2C0%29%22%20fill%3D%22%2317151F%22%20d%3D%22M%20959.212%20496.493%20L%201137.88%20496.129%20L%201247.29%20778.814%20C%201269.6%20837.47%201292.55%20900.775%201316.38%20958.589%20C%201276.7%20951.723%201236.95%20945.286%201197.13%20939.278%20C%201174%20935.71%201143.64%20930.609%201120.45%20928.74%20C%201095.35%20862.347%201069.54%20796.224%201043.01%20730.385%20C%201037.09%20714.234%201030.68%20696.678%201023.78%20681.056%20L%20962.439%20839.312%20C%20951.1%20868.676%20939.892%20899.318%20927.69%20928.231%20C%20863.006%20938.411%20797.942%20947.284%20733.317%20958.584%20C%20742.562%20931.496%20754.482%20901.832%20764.703%20874.961%20L%20824.33%20720.045%20C%20852.764%20647.164%20881.589%20568.485%20911.981%20496.857%20L%20959.212%20496.493%20z%22%2F%3E%3Cpath%20transform%3D%22translate%280%2C0%29%22%20fill%3D%22%2317151F%22%20d%3D%22M%20898.895%201023.58%20C%20899.457%201030.57%20764.531%201360.77%20750.097%201397%20L%20863.143%201397.22%20C%20863.715%201448.77%20863.096%201501.46%20863.024%201553.1%20L%20559.5%201553.06%20L%20446.718%201553.09%20L%20446.716%201397.59%20C%20483.546%201396.79%20525.186%201396.84%20561.962%201397.48%20C%20593.624%201319.66%20624.629%201241.56%20654.972%201163.21%20L%20719.217%201163.61%20L%20719.434%201051.48%20C%20735.526%201049.82%20757.96%201045.65%20774.355%201042.97%20C%20816.275%201036.1%20856.726%201029.08%20898.895%201023.58%20z%22%2F%3E%3Cpath%20transform%3D%22translate%280%2C0%29%22%20fill%3D%22%2317151F%22%20d%3D%22M%201151.97%201024.69%20C%201166.91%201025.26%201189.18%201029.19%201204.33%201031.2%20C%201245.69%201036.68%201288.14%201046.01%201329.25%201051.56%20L%201329.83%201163.34%20C%201351.53%201163.37%201373.23%201163.54%201394.93%201163.83%20C%201411.52%201202.72%201428.06%201246.19%201443.47%201285.69%20C%201458.34%201322.81%201472.83%201360.08%201486.94%201397.5%20L%201600.92%201397.6%20L%201600.96%201553.05%20L%201490.5%201553.05%20L%201184.65%201552.95%20C%201185.05%201501.09%201185.03%201449.22%201184.57%201397.35%20L%201298.01%201397.13%20C%201262.96%201306%201227.44%201215.04%201191.44%201124.28%20C%201178.67%201091.77%201163.76%201057.14%201151.97%201024.69%20z%22%2F%3E%3Cpath%20transform%3D%22translate%280%2C0%29%22%20fill%3D%22%238E949C%22%20d%3D%22M%20985.32%20930.428%20C%201023.46%20928.678%201074.59%20929.201%201111.54%20934.42%20C%201182.16%20946.137%201255.11%20954.635%201325.18%20968.747%20C%201379.62%20979.711%201411.5%20982.833%201465.99%20982.244%20L%201465.93%201049.12%20C%201447.56%201049.01%201429.2%201049.15%201410.84%201049.54%20L%201410.08%201153.89%20C%201385.97%201154.34%201361.86%201154.42%201337.75%201154.11%20C%201337.25%201118.32%201337.86%201081.26%201338.03%201045.38%20C%201333.16%201044.34%201328.19%201043.9%201323.3%201043.08%20C%201270.39%201034.33%201217.74%201024.05%201164.41%201017.91%20C%201131.9%201014.16%201097.52%201006.62%201064.94%201005.05%20C%201048.79%201005.01%201032.09%201005.38%201015.98%201004.94%20C%20973.902%201003.8%20932.919%201010.8%20891.21%201016.6%20C%20830.421%201025.05%20769.796%201034.63%20709.364%201045.34%20L%20709.773%201154.39%20L%20636.934%201154.1%20L%20636.613%201049.05%20L%20582.32%201049.15%20C%20583.02%201027.46%20582.559%201004.35%20582.483%20982.551%20C%20606.349%20982.827%20634.261%20983.602%20657.738%20980.237%20C%20691.343%20975.419%20724.964%20968.602%20758.444%20962.888%20C%20805.685%20954.625%20853.065%20947.18%20900.564%20940.556%20C%20929.928%20936.454%20955.635%20932.598%20985.32%20930.428%20z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
/* Solo la banda .noche invierte la letra a papel. El travesano de laton no
   cambia: es el mismo laton el que funciona en los dos fondos (#8E949C sobre
   tinta #17151F da 9.51:1; sobre papel es relleno junto a la tinta, no texto).

   🔑 EL PIE SALIO DE ESTE SELECTOR. Estaba escrito `.noche .marca__glifo,
   .pie .marca__glifo`, y `.pie` NO tiene fondo oscuro: es la misma hoja de
   papel que el resto de la pagina, separada por un borde. Con la variante de
   noche puesta ahi, el dia que el pie tuviera glifo saldria la A de papel
   #FCFAF6 sobre papel #FCFAF6 --invisible--, que es exactamente el bug que
   este cambio vino a arreglar, servido de nuevo dos lineas mas abajo.
   El selector no fallaba porque no habia glifo en el pie: era codigo muerto
   apuntando al lugar equivocado. Ahora el pie SI lleva glifo, y lleva el de
   dia, que es el que corresponde a su fondo. */
.noche .marca__glifo {
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221234%22%20height%3D%221137%22%20viewBox%3D%22407%20456%201234%201137%22%3E%3Cpath%20transform%3D%22translate%280%2C0%29%22%20fill%3D%22%23FCFAF6%22%20d%3D%22M%20959.212%20496.493%20L%201137.88%20496.129%20L%201247.29%20778.814%20C%201269.6%20837.47%201292.55%20900.775%201316.38%20958.589%20C%201276.7%20951.723%201236.95%20945.286%201197.13%20939.278%20C%201174%20935.71%201143.64%20930.609%201120.45%20928.74%20C%201095.35%20862.347%201069.54%20796.224%201043.01%20730.385%20C%201037.09%20714.234%201030.68%20696.678%201023.78%20681.056%20L%20962.439%20839.312%20C%20951.1%20868.676%20939.892%20899.318%20927.69%20928.231%20C%20863.006%20938.411%20797.942%20947.284%20733.317%20958.584%20C%20742.562%20931.496%20754.482%20901.832%20764.703%20874.961%20L%20824.33%20720.045%20C%20852.764%20647.164%20881.589%20568.485%20911.981%20496.857%20L%20959.212%20496.493%20z%22%2F%3E%3Cpath%20transform%3D%22translate%280%2C0%29%22%20fill%3D%22%23FCFAF6%22%20d%3D%22M%20898.895%201023.58%20C%20899.457%201030.57%20764.531%201360.77%20750.097%201397%20L%20863.143%201397.22%20C%20863.715%201448.77%20863.096%201501.46%20863.024%201553.1%20L%20559.5%201553.06%20L%20446.718%201553.09%20L%20446.716%201397.59%20C%20483.546%201396.79%20525.186%201396.84%20561.962%201397.48%20C%20593.624%201319.66%20624.629%201241.56%20654.972%201163.21%20L%20719.217%201163.61%20L%20719.434%201051.48%20C%20735.526%201049.82%20757.96%201045.65%20774.355%201042.97%20C%20816.275%201036.1%20856.726%201029.08%20898.895%201023.58%20z%22%2F%3E%3Cpath%20transform%3D%22translate%280%2C0%29%22%20fill%3D%22%23FCFAF6%22%20d%3D%22M%201151.97%201024.69%20C%201166.91%201025.26%201189.18%201029.19%201204.33%201031.2%20C%201245.69%201036.68%201288.14%201046.01%201329.25%201051.56%20L%201329.83%201163.34%20C%201351.53%201163.37%201373.23%201163.54%201394.93%201163.83%20C%201411.52%201202.72%201428.06%201246.19%201443.47%201285.69%20C%201458.34%201322.81%201472.83%201360.08%201486.94%201397.5%20L%201600.92%201397.6%20L%201600.96%201553.05%20L%201490.5%201553.05%20L%201184.65%201552.95%20C%201185.05%201501.09%201185.03%201449.22%201184.57%201397.35%20L%201298.01%201397.13%20C%201262.96%201306%201227.44%201215.04%201191.44%201124.28%20C%201178.67%201091.77%201163.76%201057.14%201151.97%201024.69%20z%22%2F%3E%3Cpath%20transform%3D%22translate%280%2C0%29%22%20fill%3D%22%238E949C%22%20d%3D%22M%20985.32%20930.428%20C%201023.46%20928.678%201074.59%20929.201%201111.54%20934.42%20C%201182.16%20946.137%201255.11%20954.635%201325.18%20968.747%20C%201379.62%20979.711%201411.5%20982.833%201465.99%20982.244%20L%201465.93%201049.12%20C%201447.56%201049.01%201429.2%201049.15%201410.84%201049.54%20L%201410.08%201153.89%20C%201385.97%201154.34%201361.86%201154.42%201337.75%201154.11%20C%201337.25%201118.32%201337.86%201081.26%201338.03%201045.38%20C%201333.16%201044.34%201328.19%201043.9%201323.3%201043.08%20C%201270.39%201034.33%201217.74%201024.05%201164.41%201017.91%20C%201131.9%201014.16%201097.52%201006.62%201064.94%201005.05%20C%201048.79%201005.01%201032.09%201005.38%201015.98%201004.94%20C%20973.902%201003.8%20932.919%201010.8%20891.21%201016.6%20C%20830.421%201025.05%20769.796%201034.63%20709.364%201045.34%20L%20709.773%201154.39%20L%20636.934%201154.1%20L%20636.613%201049.05%20L%20582.32%201049.15%20C%20583.02%201027.46%20582.559%201004.35%20582.483%20982.551%20C%20606.349%20982.827%20634.261%20983.602%20657.738%20980.237%20C%20691.343%20975.419%20724.964%20968.602%20758.444%20962.888%20C%20805.685%20954.625%20853.065%20947.18%20900.564%20940.556%20C%20929.928%20936.454%20955.635%20932.598%20985.32%20930.428%20z%22%2F%3E%3C%2Fsvg%3E");
}
/* MOVIL: la nav estaba en display:none y NO habia hamburguesa. El visitante
   que llegaba por WhatsApp --que es como llega la mayoria-- no tenia forma de
   ir a Precios, que estan a 15.000 px de scroll. Se convencia arriba y se iba
   sin poder preguntar cuanto sale.
   No lleva menu desplegable: cuatro items no justifican un componente con
   estado, JavaScript y trampa de foco, y ademas el sanitizador de Bitrix borra
   los on*= del HTML. Una fila que se desplaza sola si no entra es una regla de
   CSS y no se rompe nunca. */
.cab__nav {
  display: flex; gap: var(--sp-4);
  order: 3; flex-basis: 100%;
  margin-block-start: var(--sp-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Sangra hasta el borde para que el ultimo item no parezca cortado por el
     margen del contenedor, sino por la pantalla: eso es lo que le dice al
     pulgar que hay mas. */
  /* Sin margen negativo: restarle el gutter al hijo empujaba 70 px de scroll
     horizontal a TODA la pagina --medido--. La pista de que hay mas la da el
     propio corte del ultimo item contra el borde del contenedor. */
}
.cab__nav::-webkit-scrollbar { display: none; }
.cab__nav a { white-space: nowrap; padding-block: var(--sp-2); }
.cab__nav a { color: var(--text-muted); text-decoration: none; font-size: var(--fs-300); }
.cab__nav a[aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); }
.cab__idiomas { display: flex; gap: var(--sp-1); }
/* El selector de idioma se toca con el pulgar en un sitio que sirve tres
   idiomas: tiene que llegar al mínimo táctil. Con padding solo quedaba en
   29 px de alto. `min-height` + centrado lo lleva a 44 sin agrandar la
   tipografía ni romper la altura de la cabecera. */
.cab__idiomas a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); min-width: 2.25rem;
  padding-inline: var(--sp-2); border-radius: var(--r-xs);
  font-size: var(--fs-200); font-weight: var(--fw-semibold);
  color: var(--text-subtle); text-decoration: none;
}
.cab__idiomas a[aria-current="true"] { color: var(--text); background: var(--bg-alt); }
.cab__cta { display: none; }

@media (min-width: 48em) {
  .cab__nav {
    order: 0; flex-basis: auto; margin: 0; padding: 0;
    overflow: visible; gap: var(--sp-5);
  }
  .cab__cta { display: inline-flex; }
}

/* ------------------------------------------------------------------ héroe */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 6vw, 4rem); }
.hero__in { display: grid; gap: var(--sp-10); }
.hero__sub {
  font-size: var(--fs-500); color: var(--text-muted);
  max-width: var(--measure-tight); margin-block-start: var(--sp-5);
}
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-block-start: var(--sp-8);
}
.hechos {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-block-start: var(--sp-8); list-style: none;
  font-size: var(--fs-300); color: var(--text-muted);
}
.hechos li { display: flex; align-items: center; gap: var(--sp-2); }
.hechos li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* La escena: la marca como pieza de latón, fotografiada.
   Ya no hay canvas ni póster. El objeto trae su propio fondo índigo, así que la
   caja no necesita ni fondo ni recorte: el borde se disuelve con una máscara
   radial en vez de terminar en un rectángulo redondeado. Un cuadrado oscuro con
   esquinas de 24 px al lado del texto no era una escena, era un icono de app
   grande — y es la mitad del efecto "widget" que se quería sacar. */
.hero__escena {
  /* 5/4 y no cuadrado: el riel es horizontal y en un cuadrado sobra
     medio encuadre de fondo vacio arriba y abajo. */
  position: relative; aspect-ratio: 5 / 4; width: 100%;
  max-width: 30rem; margin-inline: auto;
}
/* 26-ago-2026: el medallon circular se va con la pieza de laton.
   El riel es HORIZONTAL: un recorte circular le corta las dos puntas, que es
   justo donde estan el violeta que entra y el magenta que sale --o sea, el
   argumento entero. El marco pasa a rectangular con esquinas suaves.
   El render trae su propio fondo frio, asi que no hace falta disco detras: se
   apoya directo sobre el papel con un canto de un pixel.
   Ni difuminado ni mascara: fundir un render en el papel con una mascara que
   muere en transparent deja un nubarron que se lee como un PNG mal recortado.
   Un borde limpio se lee como una decision. */
.hero__pieza {
  position: relative;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--platino-canto, #B8C0CC) 40%, transparent),
              var(--e2);
}

@media (min-width: 62em) {
  .hero__in { grid-template-columns: 6fr 5fr; align-items: center; }
  /* El OBJETO sangra hacia el borde; el TEXTO nunca sale de la rejilla. Esa es
     la asimetría deliberada que reemplaza a la caja simétrica — y el motivo por
     el que el h1 volvió a .container: si el titular arranca 128 px a la
     izquierda del logo, la página no tiene rejilla, tiene dos. */
  .hero__escena {
    max-width: none;
    margin-inline-end: calc((var(--container-wide) - var(--container)) / -2);
  }
}

/* ------------------------------------------------------------------ chat */
.chat { list-style: none; max-width: 34rem; display: grid; gap: var(--sp-3); }
.chat__turno { display: grid; gap: var(--sp-1); }
.chat__quien {
  font-size: var(--fs-100); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-subtle);
}
.chat__texto {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  font-size: var(--fs-400); max-width: none;
}
.chat__turno--cliente { justify-items: start; }
.chat__turno--cliente .chat__texto {
  background: var(--surface); border: 1px solid var(--border);
  border-end-start-radius: var(--r-xs);
}
.chat__turno--bot { justify-items: end; text-align: right; }
/* La burbuja del bot era un relleno de oro saturado, y es el área grande de
   amarillo más repetida del sitio después del botón. Arena con tinta: sigue
   distinguiéndose de la burbuja del cliente (papel con filete) y deja de
   gritar. */
.chat__turno--bot .chat__texto {
  background: var(--arena); color: var(--text);
  border: 1px solid var(--laton-linea);
  border-end-end-radius: var(--r-xs);
}

/* ------------------------------------------------------------------ pasos */
.pasos { list-style: none; display: grid; gap: var(--sp-8); counter-reset: p; }
.paso { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-5); }
.paso__n {
  grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
}
.paso h3 { align-self: center; }
.paso p { grid-column: 2; color: var(--text-muted); }
@media (min-width: 48em) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
  .paso { grid-template-columns: 1fr; }
  .paso__n { grid-row: auto; }
}

/* ------------------------------------------------------------------ chips */
.rubros { display: grid; gap: var(--sp-8); align-items: start; }
.rubros__foto { order: -1; }   /* en móvil la foto va ARRIBA de los chips */
.rubro-foto {
  width: 100%; max-width: 22rem; margin-inline: auto;
  aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--e2);
  /* Sin transición de opacidad: la imagen nueva se baja al tocar el chip, y
     un fundido sobre algo que todavía no llegó se ve como un parpadeo. */
}
@media (min-width: 56em) {
  .rubros { grid-template-columns: 1fr auto; gap: var(--sp-12); }
  .rubros__foto { order: 0; }
  .rubro-foto { max-width: 20rem; }
}

/* --------------------------------------------- páginas de rubro (Fase 2)
   El menú real de la plantilla. Va NUMERADO porque en el chat el cliente
   contesta con el número: la lista ordenada no es decoración, es lo que ve.
   El número usa --accent-text (bronce) y no --accent (oro): el oro sobre papel
   da 1.73:1 y es relleno, nunca texto. */
.menu-real {
  margin-block-start: var(--sp-4); padding: 0; list-style: none;
  counter-reset: opcion;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden;
}
.menu-real li {
  counter-increment: opcion; margin: 0;
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text); font-size: var(--fs-400);
}
.menu-real li + li { border-block-start: 1px solid var(--border); }
.menu-real li::before {
  content: counter(opcion); flex: none; min-width: 1.4em; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--accent-text);
}

/* Las cifras de la plantilla: mismo componente que .hechos, con el número
   grande, que es el dato que se recuerda. */
.hechos--cifras { font-size: var(--fs-400); gap: var(--sp-3) var(--sp-8); }
.hechos--cifras b {
  font-size: var(--fs-700); color: var(--text); margin-inline-end: .35em;
  font-variant-numeric: tabular-nums;
}

/* Los 13 enlaces. Es lo único que un rastreador puede seguir: los chips son
   <button> y sin JS no llevan a ningún lado. */
.rubro-indice { margin-block-start: var(--sp-12); }
.rubro-enlaces {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-block-start: var(--sp-4); padding: 0;
}
/* list-style va en el LI y no en la UL: la lista de prosa de .sec--pagina lo
   fija en el li, y ponerlo en la ul no lo pisa — salían viñetas sueltas. */
.rubro-enlaces li { margin: 0; list-style: none; }
/* Medido en 375 px: estos 13 enlaces daban 88x18 --la mitad del minimo
   tactil-- y son los UNICOS enlaces de texto que un pulgar tiene que acertar
   en toda la home. Se les da la altura con el area de toque, no con padding
   visible: un enlace de prosa con caja pintada alrededor se lee como boton, y
   estos no son botones, son un indice. El margen negativo cancela el alto
   extra para que la lista no se separe. */
.rubro-enlaces a {
  font-size: var(--fs-400);
  display: inline-flex; align-items: center;
  min-height: var(--tap-min); margin-block: calc((var(--tap-min) - 1.5em) / -2);
}

.cierre-ctas {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-block-start: var(--sp-10);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: var(--sp-2) var(--sp-4);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  font: var(--fw-medium) var(--fs-300)/1.2 var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
@media (hover: hover) { .chip:hover { border-color: var(--accent-icon); } }
.chip[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
  font-weight: var(--fw-semibold);
}
.chip__nota {
  font-size: var(--fs-100); color: var(--text-subtle);
  padding: 2px var(--sp-2); border-radius: var(--r-full); background: var(--bg-alt);
}
.chip[aria-pressed="true"] .chip__nota { color: var(--on-accent); background: rgba(255,255,255,.16); }

/* El contador que se niega a subir. Es la única cifra de toda la página y
   funciona precisamente porque no crece. */
.contador {
  display: inline-flex; align-items: baseline; gap: var(--sp-3);
  margin-block-start: var(--sp-8); padding: var(--sp-4) var(--sp-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.contador__et { font-size: var(--fs-300); color: var(--text-muted); }
.contador__n {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-800);
  font-weight: var(--fw-semibold); color: var(--accent-text); line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ tarjetas */
.tarjetas {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.tarj {
  padding: var(--pad-card); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
}
.tarj__ic {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-md); background: var(--aviso-soft); color: var(--accent-icon);
  font-size: 1.5rem; margin-block-end: var(--sp-4);
}
.tarj h3 { font-size: var(--fs-600); }
.tarj p { margin-block-start: var(--sp-3); color: var(--text-muted); font-size: var(--fs-300); }

/* ------------------------------------------------------------------ noche */
/* Banda oscura. Acá el texto claro no es estética: es lo único que lo hace
   visible. Bitrix fuerza h1..h6 a #111, que sobre este fondo da 1.00:1. */
.noche {
  background: var(--noche); color: var(--noche-text);
  background-image: radial-gradient(ellipse at 82% -10%, rgba(255,194,77,.13), transparent 55%);
}
.noche h2, .noche h3 { color: var(--noche-text); }
.noche .sec__bajada { color: var(--noche-text-2); }
.noche .eyebrow { color: var(--noche-oro); }
.pisos { list-style: none; display: grid; gap: var(--sp-6); }
.piso {
  padding: var(--pad-card); border: 1px solid var(--noche-divisor);
  border-radius: var(--r-card); background: var(--noche-1);
}
.piso h3 { font-size: var(--fs-600); color: var(--noche-oro); }
.piso p { margin-block-start: var(--sp-3); color: var(--noche-text-2); font-size: var(--fs-300); }
@media (min-width: 48em) { .pisos { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ secuencia */
/* Tres columnas y no cuatro: son CINCO planos, y con cuatro por fila el quinto
   queda huérfano al costado y se lee como un error de maquetado. Con tres da
   3 + 2, y como la última fila reparte el ancho entre dos, esos dos quedan más
   grandes — que además son el turno agendado y la seña cobrada, o sea el pago
   de toda la secuencia. */
.secuencia {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.plano { margin: 0; display: grid; gap: var(--sp-3); }
.plano__marco {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-md); background: var(--gl-fondo);
  border: 1px solid var(--noche-divisor);
}
.plano__video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* El número ancla el orden de lectura. Sin él, una grilla que reflowea en
   móvil deja la secuencia sin secuencia. */
.plano__n {
  position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2);
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  /* El ÚNICO relleno metálico que sobrevive, y sobrevive porque vive sobre el
     video oscuro: ahí el metal es luz, no pintura. 9.64:1. */
  background: var(--laton-relleno); color: var(--sobre-laton);
  font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-semibold);
}
.plano__pie {
  font-size: var(--fs-300); line-height: var(--lh-body);
  color: var(--noche-text-2); max-width: 34ch;
}

/* ------------------------------------------------------------------ tablas */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
.cmp caption {
  text-align: start; color: var(--text-subtle);
  font-size: var(--fs-200); padding-block-end: var(--sp-3);
}
.cmp th, .cmp td {
  text-align: start; padding: var(--sp-3) var(--sp-4);
  border-block-end: 1px solid var(--border); vertical-align: top;
}
.cmp thead th { font-weight: var(--fw-semibold); color: var(--text); white-space: nowrap; }
.cmp tbody th { font-weight: var(--fw-regular); color: var(--text-muted); }
.cmp__si { color: var(--ok); font-weight: var(--fw-semibold); }
.cmp__no { color: var(--text-muted); }

/* Reflow a tarjetas en móvil: una tabla de 3 columnas en 360 px es ilegible. */
@media (max-width: 47.99em) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp tr {
    display: block; padding: var(--sp-4); margin-block-end: var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  }
  .cmp tbody th { display: block; border: 0; padding: 0 0 var(--sp-3);
                  color: var(--text); font-weight: var(--fw-semibold); }
  .cmp td { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4);
            padding: var(--sp-2) 0; border-block-end: 0; }
  .cmp td::before {
    content: attr(data-label); color: var(--text-subtle); font-size: var(--fs-200);
  }
}

/* ------------------------------------------------------------------ planes */
.planes {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
/* El filete lo RESERVAN las dos y solo cambia de color. Antes solo la
   destacada sumaba 3 px de borde y --sp-2 de relleno, así que "Básico" quedaba
   10 px más abajo que "Pro" — y con él el precio, y cada viñeta. Dos tarjetas
   iguales con todas las filas corridas 10 px es de esos detalles que nadie
   nombra y todos sienten. */
.plan {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--pad-card); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
  border-block-start: 3px solid transparent;
  padding-block-start: calc(var(--pad-card) + var(--sp-2));
}
@media (hover: hover) {
  .plan { transition: border-color var(--dur-2) var(--ease-out),
                      box-shadow var(--dur-2) var(--ease-out); }
  .plan:hover { border-color: var(--borde-control); box-shadow: var(--e2); }
}
/* Borde de color + sombra grande es el patrón exacto de toda plantilla de
   precios. Un filete de latón arriba y nada más: sobre papel, ese es el gesto
   más caro de la página. */
.plan[data-destacado="true"] { border-block-start-color: var(--laton); }
.plan__nombre { font-size: var(--fs-600); }
.plan__prueba {
  align-self: start;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  background: var(--ok-soft); color: var(--ok);
  font-size: var(--fs-200); font-weight: var(--fw-semibold);
}
.plan__precio { display: flex; align-items: baseline; gap: var(--sp-2); }
/* El precio es lo que se decide en esta página, así que es el número grande.
   Antes medía 40 px —lo mismo que TODOS los h2— y heredaba --lh-body 1.55, o
   sea una caja de 62 px de alto para 40 px de glifo: de ahí el hueco raro
   entre la cifra y "al mes". */
.plan__cifra, .servicio__cifra {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-precio); line-height: 1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums lining-nums;
}
.plan__periodo { font-size: var(--fs-300); color: var(--text-subtle); }
.plan__para { font-size: var(--fs-300); color: var(--text-muted); }
.plan__incluye { list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-300);
                 color: var(--text-muted); margin-block: var(--sp-2) auto; }
.plan__incluye li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); }
.plan__incluye li::before { content: "·"; color: var(--accent-icon); font-weight: var(--fw-semibold); }
.plan .btn { margin-block-start: var(--sp-5); }

/* ------------------------------------------------------------------ servicio */
/* La puesta en marcha va visualmente SEPARADA de los planes, en una sola tarjeta
   ancha. Si se pareciera a un cuarto plan, el visitante lee US$400 al mes. */
.servicio-zona { margin-block-start: var(--sp-16); }
.servicio-zona__t { font-size: var(--fs-700); }
.servicio-zona__b {
  margin-block-start: var(--sp-3); color: var(--text-muted);
  font-size: var(--fs-500); max-width: var(--measure);
}
.servicio {
  margin-block-start: var(--sp-8);
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
  box-shadow: var(--e2);
  display: grid; gap: var(--sp-6);
}
/* La foto va ARRIBA en móvil y a la derecha en escritorio. En móvil primero
   porque es lo que explica el servicio de un vistazo; en escritorio al costado
   para no empujar el precio abajo del pliegue. */
.servicio__foto {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-md);
}
@media (min-width: 56em) {
  .servicio { grid-template-columns: 1fr 16rem; align-items: start; }
  .servicio__foto { grid-column: 2; grid-row: 1 / span 5; }
  .servicio__cab, .servicio__para, .servicio__et,
  .servicio__incluye, .servicio__cierre { grid-column: 1; }
  .servicio__incluye { grid-template-columns: 1fr; }
}
.servicio__cab {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-6);
  padding-block-end: var(--sp-5); border-block-end: 1px solid var(--border);
}
.servicio__nombre { font-size: var(--fs-600); margin-inline-end: auto; }
.servicio__precio { display: flex; align-items: baseline; gap: var(--sp-2); }
.servicio__cifra {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-800);
  font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
/* "pago único" es la palabra que evita el malentendido más caro de la página.
   Va con el peso de una etiqueta, no de una nota al pie. */
.servicio__periodo {
  font-size: var(--fs-200); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--accent-text);
  padding: var(--sp-1) var(--sp-3);
  background: var(--aviso-soft); border-radius: var(--r-full);
}
.servicio__para {
  margin-block-start: var(--sp-5); font-size: var(--fs-500); color: var(--text);
}
.servicio__et {
  margin-block-start: var(--sp-6); font-size: var(--fs-200);
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-subtle);
}
.servicio__incluye {
  list-style: none; display: grid; gap: var(--sp-3);
  margin-block-start: var(--sp-4);
}
.servicio__incluye li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  color: var(--text-muted); font-size: var(--fs-300);
}
.servicio__incluye li::before {
  content: ""; width: 8px; height: 8px; margin-block-start: .5em; border-radius: 2px;
  background: var(--accent); flex: none;
}
.servicio__cierre {
  margin-block-start: var(--sp-6); padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-300); color: var(--text-muted);
}
@media (min-width: 48em) {
  .servicio__incluye { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-8); }
}

/* ------------------------------------------------------------------ confianza */
.verificable { list-style: none; display: grid; gap: var(--sp-3); }
.verificable li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  color: var(--text-muted);
}
.verificable li::before {
  content: ""; width: 8px; height: 8px; margin-block-start: .55em; border-radius: 2px;
  background: var(--ok); flex: none;
}

/* ------------------------------------------------------------------ faq */
.faq details { border-block-end: 1px solid var(--border); }
.faq summary {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--tap-min); padding-block: var(--sp-4);
  font-size: var(--fs-500); font-weight: var(--fw-semibold);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: var(--fs-600); color: var(--accent-icon); line-height: 1;
  transition: transform var(--dur-2) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-block-end: var(--sp-5); }
.faq details p { color: var(--text-muted); line-height: var(--lh-loose); }

/* ------------------------------------------------------------------ cierre */
.cierre {
  padding-block: var(--section-py); text-align: center;
  background: var(--bg-alt); border-block: 1px solid var(--border);
}
.cierre p {
  margin: var(--sp-4) auto var(--sp-8); color: var(--text-muted);
  font-size: var(--fs-500);
}

/* ------------------------------------------------------------------ pie */
.pie { padding-block: var(--sp-12) var(--sp-8); border-block-start: 1px solid var(--border); }
.pie__grid { display: grid; gap: var(--sp-8); }
.pie__marca {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-500);
}
.pie__frase { color: var(--text-muted); font-size: var(--fs-300); margin-block-start: var(--sp-2); }
/* Los enlaces del pie son una columna de textos cortos: sin altura mínima
   quedan en 22 px y en el celular se toca el de al lado. El `gap: 0` es a
   propósito — el espacio ahora lo pone el área táctil de cada uno, y sumarle
   gap encima estiraría el pie sin necesidad. */
.pie__enlaces { display: grid; gap: 0; }
.pie__enlaces a {
  display: flex; align-items: center; min-height: var(--tap-min);
  color: var(--text-muted); text-decoration: none; font-size: var(--fs-300);
}
.cab__marca { min-height: var(--tap-min); }
.pie__dato { font-size: var(--fs-300); color: var(--text-muted); margin-block-end: var(--sp-2); }
.pie__aviso { color: var(--text); font-weight: var(--fw-medium); }
.pie__legal {
  margin-block-start: var(--sp-10); padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-100); color: var(--text-subtle); max-width: none;
}
@media (min-width: 48em) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ------------------------------------------------------------------ CTA móvil */
.cta-barra {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-cta-movil);
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + var(--safe-b));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-block-start: 1px solid var(--border);
  transform: translateY(115%);
  transition: transform var(--dur-3) var(--ease-out);
}
.cta-barra[data-visible="true"] { transform: none; }
@media (min-width: 48em) { .cta-barra { display: none; } }
body[data-cta="1"] { padding-block-end: calc(var(--cta-movil-h) + var(--safe-b)); }

/* ============================================================ el recorrido
   Un riel de latón con dockets colgando. No tarjetas, no carrusel, no burbujas
   de chat: las burbujas ya viven una sección más arriba, y repetirlas convierte
   la página en una app de mensajería.
   Todo se dibuja con CSS y no con SVG, por la misma razón que .marca__glifo: en
   Bitrix los <svg> se extraen y los reinyecta el JS DESPUÉS de DOMContentLoaded.
   Si el riel fuera SVG, la sección sería una caja vacía hasta que corra el JS. */
.recorrido__est { list-style: none; display: grid; gap: 0; }
.est {
  position: relative; padding: 0 0 var(--sp-10) var(--sp-10);
  border-inline-start: 1px solid var(--laton-linea);
}
.est:last-child { border-inline-start-color: transparent; padding-bottom: var(--sp-6); }
/* El nodo reusa el disco de .plano__n, que ya está verificado a 9.64:1. */
.est__n {
  position: absolute; inset-inline-start: -14px; inset-block-start: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--laton-relleno); color: var(--sobre-laton);
  font: var(--fw-semibold) var(--fs-200)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.est__area {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-200); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--noche-oro);
  margin-block-end: var(--sp-2);
}
.est__ic { width: 1.15em; height: 1.15em; color: var(--noche-oro); flex: none; }
/* La hora exacta —23:07, no "de noche"— es lo que separa un sistema de un
   afiche. Va en tabular para que las cinco se alineen entre estaciones. */
.est__hora {
  margin-inline-start: auto; color: var(--noche-text-3);
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.est h3 { color: var(--noche-text); font-size: var(--fs-600); }
.est__d { color: var(--noche-text-2); margin-block-start: var(--sp-3); max-width: var(--measure); }

/* El docket: el registro que deja cada área. Es texto con hora, no una tarjeta
   con sombra — por eso sobrevive impreso en blanco y negro. */
.dk {
  margin-block-start: var(--sp-5); padding: var(--sp-4);
  border: 1px solid var(--noche-divisor); border-radius: var(--r-card);
  background: var(--noche-1); max-width: 26rem;
}
.dk__t {
  font-size: var(--fs-100); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--noche-text-3);
  margin-block-end: var(--sp-3);
}
.dk__filas { list-style: none; display: grid; gap: var(--sp-2); }
.dk__filas li {
  display: flex; gap: var(--sp-4); align-items: baseline;
  font-size: var(--fs-300); color: var(--noche-text);
}
.dk__k { color: var(--noche-text-2); }
.dk__v { margin-inline-start: auto; text-align: right; font-variant-numeric: tabular-nums; }
/* Mostrar lo que el bot NO ofreció es la única forma de probar que cruzó la
   agenda. El estado no se comunica solo con la línea: la palabra "descartado"
   está escrita, porque entre el 6 y el 8 % de los varones no distingue bien
   rojo y verde y el comprador es mayoritariamente varón de 35 a 60. */
.dk__filas li[data-tachado] { color: var(--noche-text-3); text-decoration: line-through; }
.dk__filas li[data-aviso] .dk__v { color: var(--aviso-noche); }

.est__bif {
  margin-block-start: var(--sp-4); padding-inline-start: var(--sp-4);
  border-inline-start: 1px dashed var(--laton-linea);
  font-size: var(--fs-300); color: var(--noche-text-2); max-width: 26rem;
}

.recorrido__coda { margin-block-start: var(--sp-8); }
.recorrido__coda p { color: var(--noche-text-2); max-width: var(--measure); }
.tics {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  margin-block-start: var(--sp-4); padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--noche-divisor);
  font-size: var(--fs-200); color: var(--noche-oro);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.recorrido__cierre { color: var(--noche-text-3); margin-block-start: var(--sp-10); }

@media (min-width: 48em) {
  .est { padding-inline-start: var(--sp-12); }
}
/* En escritorio el docket se va a la derecha del texto. Sin esto queda media
   pantalla vacía y el recorrido se lee como una columna angosta perdida en la
   banda. El docket es el REGISTRO que deja el área: enfrentado al párrafo, se
   lee como el sistema respondiendo a lo que el texto acaba de contar. */
@media (min-width: 64em) {
  .est {
    display: grid; grid-template-columns: 1fr 24rem;
    column-gap: var(--sp-12); align-items: start;
  }
  .est__area, .est h3, .est__d { grid-column: 1; }
  .est .dk { grid-column: 2; grid-row: 1 / span 4; margin-block-start: 0; max-width: none; }
  .est__bif { grid-column: 1; }
}

/* --------------------------------------------------- la animación del riel
   SOLO se aplica con data-anim="1", que lo pone el JS. Sin JS, la sección se
   ve entera y quieta. Los tiempos son los del guion: riel 0, nodo 260,
   título 340, párrafo 440, docket 560, valores 740. Ese hueco de 180 ms entre
   la etiqueta y el valor es lo que hace que se lea como el sistema
   respondiendo y no como una caja que aparece. */
@media (prefers-reduced-motion: no-preference) {
  [data-anim="1"] .est { border-inline-start-color: transparent; }
  [data-anim="1"] .est::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: -1px;
    width: 1px; background: var(--laton-linea);
    transform: scaleY(0); transform-origin: top;
    transition: transform 380ms var(--ease-out);
  }
  [data-anim="1"] .est:last-child::before { display: none; }
  [data-anim="1"] .est > * { opacity: 0; transform: translateY(8px); }
  [data-anim="1"] .est__n { opacity: 0; transform: scale(.5); }

  [data-anim="1"] .est[data-visto]::before { transform: scaleY(1); }
  [data-anim="1"] .est[data-visto] > *,
  [data-anim="1"] .est[data-visto] .est__n {
    opacity: 1; transform: none;
    transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
  }
  [data-anim="1"] .est[data-visto] .est__n  { transition-duration: 240ms; transition-delay: 260ms; }
  [data-anim="1"] .est[data-visto] .est__area { transition-delay: 340ms; }
  [data-anim="1"] .est[data-visto] h3         { transition-delay: 340ms; }
  [data-anim="1"] .est[data-visto] .est__d    { transition-delay: 440ms; }
  [data-anim="1"] .est[data-visto] .dk        { transition-delay: 560ms; }
  [data-anim="1"] .est[data-visto] .est__bif  { transition-delay: 740ms; }
  [data-anim="1"] .dk__filas li { opacity: 0; transition: opacity 240ms var(--ease-out) 740ms; }
  [data-anim="1"] .est[data-visto] .dk__filas li { opacity: 1; }
}

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

/* ============================================================================
   MOVIMIENTO — lo que faltaba
   De 12 secciones se movía una. Estas tres cosas son las que el visitante
   necesita ver moverse para entender el argumento.
   ⚠️ Regla que NO se rompe: ninguna opacidad arranca en 0 en contenido
   crítico. Todo lo de acá sale de 1, baja, y vuelve a 1: si el JS no llega,
   el texto está visible.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* --- La reescritura del chat ------------------------------------------
     Hoy el textContent se reemplaza de golpe y el ojo no lo registra: es
     literalmente el argumento del producto y pasa sin que se note. Baja a .35,
     se reescribe, y vuelve. El retardo de 90 ms en el segundo turno hace que
     se lea como el sistema respondiendo y no como dos cajas parpadeando. */
  .chat__texto {
    transition: opacity var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out);
  }
  .chat[data-cambiando="1"] .chat__turno:nth-child(1) .chat__texto,
  .chat[data-cambiando="1"] .chat__turno:nth-child(2) .chat__texto {
    opacity: .35; transform: translateY(-2px);
  }
  .chat[data-cambiando="1"] .chat__turno:nth-child(2) .chat__texto {
    transition-delay: 90ms;
  }

  /* --- El contador que se niega a subir ---------------------------------
     Es la mejor idea de la página y hoy es una caja quieta en la esquina. La
     broma solo funciona si se ve que ALGO pasó y el número igual no se movió.
     Por eso se anima el marco y JAMÁS la cifra. */
  .contador { position: relative; overflow: hidden; }
  .contador::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
    background: var(--laton); transform: scaleX(0); transform-origin: left;
    transition: transform 520ms var(--ease-out);
  }
  .contador[data-pulso="1"]::after { transform: scaleX(1); }

  /* --- La cabecera ------------------------------------------------------
     Llevaba el velo y el filete SIEMPRE, también en scroll 0, donde no hay
     nada detrás que velar. Un filete permanente en la primera pantalla es
     firma de plantilla. Solo se animan color de fondo y de borde: ninguna
     propiedad de layout. */
  .cab {
    background: transparent; backdrop-filter: none;
    border-block-end-color: transparent;
    transition: background var(--dur-3) var(--ease-out),
                border-color var(--dur-3) var(--ease-out);
  }
  .cab[data-pegado="1"] {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(1.3) blur(10px);
    border-block-end-color: var(--border);
  }
}

/* ============================================================================
   EL CIRCUITO — las fotos de las estaciones y la mitad DÍA
   El arco de latón entra por el borde izquierdo y sale por el derecho en las
   ocho fotos. Eso —y no las fotos— es lo que las vuelve un circuito. En la
   columna de noche el riel vertical hace de conector y el arco de cada foto le
   rima; en la fila de día los tres arcos SÍ se encadenan de izquierda a
   derecha, que es donde el circuito se lee literal.
   ========================================================================= */
.est__foto {
  /* Sin aspect-ratio: el arte se generó en 21:9 PARA este hueco, así que la
     proporción natural del archivo es la correcta y no hay nada que recortar.
     En móvil se ve entera; en escritorio se recorta al 47% central, que es
     donde entran el arco y el objeto a la vez. */
  display: block; width: 100%; height: auto; object-fit: cover;
  border-radius: var(--r-media); margin-block-end: var(--sp-5);
  /* Sin borde duro contra el fondo: la foto y la sección comparten el mismo
     índigo, y un filete ahí solo delataría el recorte. */
  box-shadow: 0 1px 0 color-mix(in srgb, var(--laton-noche) 12%, transparent) inset;
}

/* La estación YA tenía su grilla de escritorio: texto a la izquierda y ficha a
   la derecha, enfrentada al párrafo para que se lea como el sistema
   respondiendo a lo que el texto acaba de contar. Mi primer intento le puso la
   foto en esa segunda columna y empujó la ficha a la fila 1 de la primera: el
   orden de lectura quedó al revés —la ficha antes que el título que la
   explica— y el área, el h3 y la descripción cayeron debajo de la foto.
   La causa fue no haber leído la regla que ya existía antes de escribir otra.
   La foto va como BANDA sobre las dos columnas. Es mejor de todos modos: el
   arco de latón cruza el ancho entero de la estación, que es exactamente lo
   que lo vuelve un circuito y no una ilustración. */
@media (min-width: 64em) {
  .est__foto {
    grid-column: 1 / -1; grid-row: 1;
    /* Medido: a 21/9 la banda daba 411 px y se comía el 62% de la estación
       —cinco así y el texto, que es la sustancia, queda de pie de foto. A
       190 px la foto ocupa el 43% y el texto vuelve a mandar.
       El arte es 21:9 y a lo ancho de la estación daría 408 px de alto: el
       62% otra vez. Recortado al 47% central entran el arco —que cruza arriba—
       y el objeto —que se apoya abajo—, que es lo que NO entraba cuando el
       arte era cuadrado y había que quedarse con el 20%.
       Ese fue el camino largo: primero recorté al 57% suponiendo dónde estaba
       el arco, después "medí" y me dio 64% porque mi métrica encontró el
       brillo del objeto y no el arco, y con las dos se perdía algo. La salida
       no era encontrar el recorte bueno: era hacer el arte del tamaño del
       hueco. */
    height: clamp(150px, 19vw, 200px);
    margin-block-end: var(--sp-6);
  }
  /* La ficha empieza en la fila 2 porque la fila 1 ahora es la banda. Sin
     esto vuelve a montarse encima de la foto. */
  .est .dk { grid-row: 2 / span 4; }
}

/* --- la mitad DÍA ---------------------------------------------------------
   Las cinco estaciones de arriba cuentan el TRABAJO. La ganancia no estaba
   contada en ninguna parte y era literalmente lo pedido. Se cuenta sin un solo
   porcentaje inventado: no hay un cliente pago del que sacarlo. */
.ganancia {
  margin-block-start: var(--section-py-sm);
  padding-block-start: var(--section-py-sm);
  border-block-start: 1px solid var(--laton-linea);
}
.ganancia__enc { margin-block-end: var(--sp-8); }
.ganancia__t { color: var(--noche-text); font-size: var(--fs-800); line-height: 1.15; }
.ganancia__enc .sec__bajada { color: var(--noche-text-2); }

.ganancia__cuadros {
  list-style: none; display: grid; gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  /* Tres columnas y no dos: con dos, el tercer cuadro cae solo en la fila de
     abajo y el encadenado de los arcos —que es el argumento— se corta. */
  .ganancia__cuadros { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}
.gan { position: relative; }
.gan__foto {
  /* Generada en 4:3 para esta grilla de tres columnas: proporción natural,
     cero recorte. */
  display: block; width: 100%; height: auto;
  border-radius: var(--r-media); margin-block-end: var(--sp-4);
}
.gan__hora {
  font-size: var(--fs-300); letter-spacing: .06em; text-transform: uppercase;
  color: var(--noche-oro); font-variant-numeric: tabular-nums;
  margin-block-end: var(--sp-2);
}
.gan h3 { color: var(--noche-text); font-size: var(--fs-500); line-height: 1.25; }
.gan__d { color: var(--noche-text-2); margin-block-start: var(--sp-2); font-size: var(--fs-400); }

.ganancia__cierre {
  margin-block-start: var(--sp-8); color: var(--noche-text);
  font-size: var(--fs-600); line-height: 1.4; max-width: 46ch;
  border-inline-start: 2px solid var(--laton-noche);
  padding-inline-start: var(--sp-5);
}

/* La entrada de los tres cuadros de día, encadenada de izquierda a derecha para
   que el ojo siga el arco. Sale de 1: si el JS no llega, están visibles. */
@media (prefers-reduced-motion: no-preference) {
  /* data-visto lo pone el observador sobre CADA .gan, igual que sobre cada
     .est. Escribirlo como `[data-visto] .gan` —un ancestro marcado— dejaba los
     tres cuadros en opacidad 0 para siempre, porque el observador nunca mira
     el contenedor. Contenido invisible, y en silencio. */
  [data-anim="1"] .gan { opacity: 0; transform: translateY(10px); }
  [data-anim="1"] .gan[data-visto] {
    opacity: 1; transform: none;
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  }
  [data-anim="1"] .gan[data-visto]:nth-child(2) { transition-delay: 120ms; }
  [data-anim="1"] .gan[data-visto]:nth-child(3) { transition-delay: 240ms; }
}


/* ============================================================================
   ACABADO — los cinco del informe del 22-ago, cada uno medido antes de existir
   ========================================================================= */

/* 1. Veintisiete enlaces de la cabecera y el pie no reaccionaban al mouse: de
      267 reglas había TRES :hover. El enlace de nav además declaraba
      `transition: all` hacia un estado que nunca llegaba a existir.
      @media (hover: hover) para que un dedo no herede un estado de mouse. */
@media (hover: hover) {
  #abn .cab__nav a,
  #abn .pie__enlaces a { transition: color var(--dur-2) var(--ease-out); }
  #abn .cab__nav a:hover,
  #abn .pie__enlaces a:hover {
    color: var(--text); text-decoration: underline;
    text-underline-offset: .18em; text-decoration-thickness: 1px;
  }
}

/* 2. La jerarquía estaba invertida: el h2 medía 36 px en serif regular y el h3
      33 px en sans semibold. Ratio 1,09 —empate— y la sans bold gana
      ópticamente, así que el subtítulo pesaba más que el título que lo manda. */
#abn h3 { letter-spacing: -.01em; }

/* 3. El legal del pie medía 147 caracteres por línea: el único bloque de la
      página sin medida, y con `max-width: none` puesto a mano. Arriba de 85 el
      ojo pierde el renglón al volver. */
#abn .pie__legal { max-width: 70ch; }

/* 4. Un margen que se fugaba: la bajada lleva margin-top 16 px y colapsaba a
      través de .sec__enc y .container, así que #plantillas respiraba 95,2 px
      arriba mientras sus tres hermanas con la MISMA clase respiraban 79,2. Un
      desajuste de 16 px entre secciones que deberían ser idénticas. */
#abn .sec__enc > :first-child { margin-block-start: 0; }

/* 5. El selector de idioma medía 36×44 px: el único fallo táctil de 66
      elementos. La altura ya usaba --tap-min y el ancho se había quedado en
      2.25rem. */
#abn .cab__idiomas a { min-width: var(--tap-min); }


/* ==========================================================================
   SISTEMA DE COMPONENTES — consejo del 26-ago-2026

   El hallazgo que lo dispara: `.btn-primario` esta escrito 181 veces en el
   HTML de las 63 paginas y NO EXISTIA una sola regla que lo declarara.
   Los CTA heredaban el .btn generico, asi que el boton principal y el
   secundario pesaban casi lo mismo. Alguien renombro la clase en el HTML y
   nunca en el CSS.

   LA TRAZA es el elemento que dice automatizacion: un filete de 1 px que
   corre, dobla 90 grados y termina en una pastilla — el vocabulario de un
   editor de nodos. Tres gradientes sobre un pseudo-elemento, cero SVG, asi
   que pasa entero por el sanitizador de Bitrix.
   ========================================================================== */

/* ============================================================================
   BOTON — base compartida
   ========================================================================= */
.btn{
  position: relative;                 /* ancla de la traza */
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);         /* 44px. Medido: 0 de 59 controles bajan de 44. */
  padding-inline: var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-1);          /* 2px */
  font: var(--fw-semibold) var(--fs-400)/1 var(--font-sans);
  letter-spacing: .005em;             /* a 600/17px Archivo cierra apenas; +.005em lo abre */
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-2) var(--ease-out),   /* 160ms */
    border-color     var(--dur-2) var(--ease-out),
    box-shadow       var(--dur-2) var(--ease-out),
    transform        var(--dur-1) var(--ease-out);   /*  90ms */
}
@media (prefers-reduced-motion: reduce){ .btn{ transition-duration: .01ms } }

/* ============================================================================
   PRIMARIO — "el lingote mecanizado"
   Relleno var(--text) + tres tratamientos de superficie que suman UNA capa de
   pintado: un gradiente vertical y dos filetes interiores. Sin imagenes, sin
   SVG (Bitrix lo borra), sin pseudo-elemento extra.
   ========================================================================= */
.btn-primario{
  color: var(--sobre-texto);
  background-color: var(--texto);
  /* El 45% superior, 7% mas claro. Es lo unico que separa "pastilla de color"
     de "pieza de metal". Un gradiente, no dos: dos ya se lee como skeuomorfo. */
  background-image: linear-gradient(180deg,
      color-mix(in oklab, #fff 7%, transparent) 0%,
      color-mix(in oklab, #fff 0%, transparent) 45%);
  box-shadow:
      inset 0 1px 0 color-mix(in oklab, #fff 16%, transparent),   /* luz especular arriba */
      inset 0 -1px 0 color-mix(in oklab, #000 24%, transparent),  /* canto inferior en sombra */
      var(--e1);
}

/* -- HOVER. Tres senales a la vez, porque una sola no alcanza. ------------
   Medido en el sitio viejo: el hover cambiaba el relleno #17151F -> #2A2340,
   que es 1.21:1 entre si — 2,5 veces POR DEBAJO del 3:1 en que dos superficies
   se distinguen. Era un hover invisible. La cura no es aclarar mas (sobre casi
   negro no hay margen), es mover tres cosas:
     1. el TONO, no la luminancia: se sangra var(--accent) adentro del relleno.
        Un corrimiento de matiz se percibe muy por debajo del umbral de 3:1.
     2. la elevacion --e1 -> --e2.
     3. el objeto se levanta 1px y la traza se enciende (ver 2.5).            */
@media (hover: hover){
  .btn-primario:hover{
    background-color: color-mix(in oklab, var(--texto) 86%, var(--acento));
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, #fff 22%, transparent),
      inset 0 -1px 0 color-mix(in oklab, #000 24%, transparent),
      var(--e2);
    transform: translateY(-1px);
  }
}

/* -- ACTIVE. Se hunde POR DEBAJO del reposo y pierde toda la elevacion.
      Sin esto el click no tiene fondo y el boton se siente de papel.        */
.btn-primario:active{
  transform: translateY(1px);
  background-image: none;                       /* se apaga el especular: esta hundido */
  background-color: color-mix(in oklab, var(--texto) 92%, #000);
  box-shadow: inset 0 1px 2px color-mix(in oklab, #000 35%, transparent);
  transition-duration: var(--dur-1);            /* 90ms: el hundido es instantaneo */
}

/* -- FOCUS-VISIBLE. El anillo de DOS capas. ------------------------------
   Medido en el sitio viejo: anillo indigo #4B3FA8 contra el relleno #17151F
   del propio boton = 2.21:1. NO llega a 3:1. Se leia como una sola mancha.
   Cura: el hueco entre el boton y el anillo se RELLENA con var(--bg) via un
   box-shadow de 2px de expansion. Asi el anillo nunca toca el relleno del
   boton y el contraste queda garantizado por construccion:
       anillo var(--accent) vs hueco var(--bg)   >= 3:1  (lo garantiza la paleta)
       hueco  var(--bg)  vs relleno var(--text) >= 7:1  (lo garantiza la paleta)
   Funciona igual sobre papel, sobre tarjeta y sobre banda noche, porque el
   hueco siempre tiene un color CONOCIDO en vez de "lo que haya atras".
   Se usa `outline` (no solo box-shadow) para que sobreviva al modo de alto
   contraste de Windows, donde los box-shadow se descartan.                 */
.btn:focus-visible{
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--fondo);   /* rellena el hueco de 2px */
  transition: none;                      /* 0ms: un foco animado se atrasa al tabular rapido */
}
.noche .btn:focus-visible{ box-shadow: 0 0 0 2px var(--noche); }

/* -- DISABLED. Sin metal: pierde gradiente, especular y elevacion.
      Se mantiene >= 3:1 aunque WCAG exima a los controles inactivos:
      en este proyecto ya hubo un incidente de titulares a 1.03:1.          */
.btn[disabled], .btn[aria-disabled="true"]{
  background-image: none; box-shadow: none; transform: none;
  background-color: color-mix(in oklab, var(--texto) 20%, var(--fondo));
  color: color-mix(in oklab, var(--texto) 62%, var(--fondo));  /* verificar >= 3:1 */
  border-color: transparent;
  cursor: not-allowed; pointer-events: none;
}

/* SECUNDARIO — la ausencia de metal es lo que lo hace secundario. */
.btn--linea, .btn--fantasma{          /* --fantasma: 43 usos ya en el HTML, queda como alias */
  color: var(--texto);
  background: transparent;
  border-color: var(--borde-fuerte);
  box-shadow: none;                   /* sin especular: no es una pieza, es un contorno */
}
@media (hover: hover){
  .btn--linea:hover, .btn--fantasma:hover{
    background-color: color-mix(in oklab, var(--texto) 6%, var(--fondo));
    border-color: var(--texto);
    transform: translateY(-1px);
  }
}
.btn--linea:active, .btn--fantasma:active{
  transform: translateY(1px);
  background-color: color-mix(in oklab, var(--texto) 11%, var(--fondo));
}

/* TERCIARIO — sin caja. Es el riel de la traza puesto bajo una etiqueta. */
.btn--texto{
  color: var(--acento);
  background: none; border-color: transparent; box-shadow: none;
  padding-inline: var(--sp-1); min-height: var(--tap-min);
}
.btn--texto::after{                    /* el riel: 1px, del ancho de la etiqueta */
  content:""; position:absolute; inset-inline: var(--sp-1); inset-block-end: 25%;
  block-size: 1px; background: currentColor;
  transform: scaleX(.28); transform-origin: left;      /* en reposo, un tramo corto */
  transition: transform var(--dur-3) var(--ease-out);  /* 240ms */
}
@media (hover: hover){ .btn--texto:hover::after{ transform: scaleX(1); } }

/* ============================================================================
   LA TRAZA — el elemento repetible que dice "automatizacion"
   Tres gradientes sobre UN pseudo-elemento. Cero SVG (Bitrix lo borraria),
   cero canvas, cero imagenes. Una sola capa de pintado por instancia.
   ========================================================================= */
:where(.traza){ position: relative; }

.traza::before{
  content:"";
  position: absolute; inset-block-start: -1px; inset-inline-start: -1px;
  inline-size: 28px; block-size: 28px;
  pointer-events: none;
  background:
    /* 1 · la pastilla: cuadrado de 5px en el codo */
    linear-gradient(var(--acento) 0 0)        0   0   / 5px 5px              no-repeat,
    /* 2 · tramo horizontal */
    linear-gradient(var(--borde-fuerte) 0 0)  5px 2px / calc(100% - 5px) 1px no-repeat,
    /* 3 · tramo vertical */
    linear-gradient(var(--borde-fuerte) 0 0)  2px 5px / 1px calc(100% - 5px) no-repeat;
}

/* Tres tamanos por CLASE, no por custom property en linea: el atributo style
   es lo primero que se discute con el sanitizador de Bitrix. Una clase no. */
.traza--xs::before{ inline-size: 14px; block-size: 14px; }   /* botones */
.traza--md::before{ inline-size: 28px; block-size: 28px; }   /* tarjetas, planes */
.traza--riel::before{                                        /* encabezado de seccion */
  inline-size: 100%; block-size: 5px;
  background:
    linear-gradient(var(--acento) 0 0)        0   0   / 5px 5px              no-repeat,
    linear-gradient(var(--borde-fuerte) 0 0)  5px 2px / calc(100% - 5px) 1px no-repeat;
}

/* La luz que RECORRE la traza. Solo en hover, solo con puntero, una pasada.
   Es decoracion pura: puede salir de opacidad 0 sin violar la regla dura,
   porque si nunca aparece no se pierde una sola palabra de contenido.
   Solo anima transform y opacity -> vive en el compositor, no repinta nada. */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .traza::after{
    content:""; position:absolute;
    inset-block-start:-1px; inset-inline-start:-1px;
    inline-size: 28px; block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--acento), transparent);
    opacity: 0; transform: translateX(-100%);
    pointer-events: none;
  }
  .traza--xs::after{ inline-size: 14px; }
  .traza--riel::after{ inline-size: 100%; }
  .traza:hover::after, .traza:focus-within::after{
    opacity: 1; transform: translateX(100%);
    transition: transform var(--dur-5) var(--ease-out),  /* 520ms */
                opacity   var(--dur-2) linear;           /* 160ms */
  }
}

@media (prefers-reduced-motion: no-preference){
  /* La compuerta [data-anim="1"] la pone el JS. Si el JS no llega, esta regla
     no existe y el elemento queda en su posicion final, opaco y legible. */
  [data-anim="1"] .entra{ transform: translateY(10px); }
  [data-anim="1"] .entra[data-visto]{
    transform: none;
    transition: transform 420ms var(--ease-entrada);
  }
  [data-anim="1"] .entra:nth-child(2)[data-visto]{ transition-delay:  60ms; }
  [data-anim="1"] .entra:nth-child(3)[data-visto]{ transition-delay: 120ms; }
  [data-anim="1"] .entra:nth-child(4)[data-visto]{ transition-delay: 180ms; }
  [data-anim="1"] .entra:nth-child(n+5)[data-visto]{ transition-delay: 240ms; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* CORREGIDO — reemplaza la linea de hover de 2.3 */
@media (hover: hover){
  .btn-primario:hover{
    background-color: color-mix(in oklab, var(--texto) 45%, var(--acento));
    /* dE76 = 56.2 contra el reposo: 3,6x el hover viejo (15.5).
       Etiqueta var(--bg) encima = 10.9:1, AAA. */
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, #fff 22%, transparent),
      inset 0 -1px 0 color-mix(in oklab, #000 24%, transparent),
      var(--e2);
    transform: translateY(-1px);
  }
}

/* CORREGIDO — reemplaza el bloque .traza de 2.5 */
:where(.traza){
  position: relative;
  --traza-linea: var(--borde-fuerte);          /* sobre superficie clara */
  --traza-pad:   var(--acento);
}
/* sobre relleno oscuro el filete se invierte: es una traza GRABADA en el metal */
.btn-primario.traza, .noche .traza{
  --traza-linea: color-mix(in oklab, #fff 42%, transparent);
  --traza-pad:   color-mix(in oklab, var(--acento) 55%, #fff);
}
/* un control inactivo no participa del flujo: pierde la traza */
.btn[disabled].traza, .btn[aria-disabled="true"].traza{
  --traza-linea: transparent; --traza-pad: transparent;
}
.traza::before{
  content:""; position:absolute; inset-block-start:-1px; inset-inline-start:-1px;
  inline-size: 28px; block-size: 28px; pointer-events:none;
  background:
    linear-gradient(var(--traza-pad)   0 0) 0   0   / 5px 5px              no-repeat,
    linear-gradient(var(--traza-linea) 0 0) 5px 2px / calc(100% - 5px) 1px no-repeat,
    linear-gradient(var(--traza-linea) 0 0) 2px 5px / 1px calc(100% - 5px) no-repeat;
}
.btn.traza::before{ inline-size: 18px; block-size: 18px; }  /* 14px quedaba corto: no se leia el codo */


/* Los titulares pasan a la grotesca: peso 600 y tracking negativo, que es
   como una sans consigue autoridad de display sin un peso que la fuente no
   tiene. El serif salio del sistema entero. */
:where(#abn) h1, :where(#abn) h2, :where(#abn) h3,
:where(#abn) .hero h1, :where(#abn) .plan__cifra {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
}
:where(#abn) h1 { letter-spacing: -.032em; }
:where(#abn) h2 { letter-spacing: -.024em; }
:where(#abn) h3 { letter-spacing: -.012em; }


/* ============================================================================
   LA CORRIENTE — la unica cosa del sitio que se mueve sola

   El recorrido en la piel del comprador lo dijo sin vueltas: no habia UN solo
   @keyframes en las 63 paginas. Nada se movia si el visitante no lo tocaba, y
   por eso la estetica no transmitia automatizacion por mas platino que tuviera.
   Un sitio quieto que promete que algo trabaja solo se contradice a si mismo.

   La corriente recorre el filete de cada encabezado: entra por la izquierda en
   violeta y sale por la derecha en magenta, igual que en el riel del heroe y en
   el logo. Es la misma idea en tres escalas.

   TRES REGLAS QUE NO SE ROMPEN:
   1. Arranca cuando la seccion ENTRA en pantalla y corre UNA vez. Un bucle
      infinito en doce secciones es un tic que cansa y gasta bateria en un
      telefono, que es desde donde llega la mayoria.
   2. Solo transform y opacity. Nada que dispare relayout.
   3. Se apaga entera con prefers-reduced-motion, y el filete queda igual de
      visible: lo que se mueve es una luz ENCIMA del filete, no el filete.
   ========================================================================= */
@keyframes abn-corriente {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.riel { position: relative; padding-block-start: var(--sp-6); }
.riel::before {
  /* inline-size auto explicito: la version anterior llevaba tambien la clase
     .traza, cuyo ::before mide 28x28 para dibujar una esquina, y ese ancho le
     ganaba al inset-inline:0. El riel salia de 28 px en vez de entero. Ahora
     es una clase propia y no hereda nada. */
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
  inline-size: auto; block-size: 1px; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, var(--pl-300) 12%, var(--pl-200) 50%, var(--pl-300) 88%, transparent 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .riel::after {
    content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0;
    inline-size: 34%; block-size: 3px; pointer-events: none;
    background: linear-gradient(90deg,
      transparent 0%, var(--se-600) 38%, var(--rm-600) 62%, transparent 100%);
    filter: blur(.4px);
    transform: translateX(-100%);
  }
  /* data-visto lo pone el mismo observador que revela las estaciones. Sin el,
     el ::after se queda quieto fuera de cuadro y no se ve nada raro. */
  .riel[data-visto]::after {
    animation: abn-corriente 1450ms var(--ease-out) 180ms 1 both;
  }
  .noche .riel::before {
    background: linear-gradient(90deg,
      transparent 0%, var(--nc-500) 12%, var(--pl-500) 50%, var(--nc-500) 88%, transparent 100%);
  }
  .noche .riel::after {
    background: linear-gradient(90deg,
      transparent 0%, var(--se-300) 38%, var(--rm-400) 62%, transparent 100%);
  }
}


/* ============================================================================
   REDISEÑO 2026-10 · BLANCO, GRAFITO Y UNA SEÑAL
   Spec: design/rediseno-2026-10/ux.md y marca.md. El acento naranja es
   RELLENO/GRÁFICO (LED, riel, punto de estado): jamás texto sobre blanco.
   ========================================================================= */

/* -- etiqueta mono: la voz de la máquina. Nunca en párrafos. */
.et-mono {
  font-family: var(--font-mono); font-size: var(--fs-100); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; line-height: var(--lh-ui);
  color: var(--text-subtle); font-variant-numeric: tabular-nums;
}
.noche .et-mono { color: var(--noche-text-3); }

/* -- héroe: blanco con retícula técnica que se apaga hacia los bordes */
.hero { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3rem, 7vw, 6rem); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 30%, transparent 75%);
}
.hero__canales { margin-block-end: var(--sp-5); color: var(--text-muted); }
.hero__canales::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: .7em;
  background: var(--senal); vertical-align: .05em;
}
:where(#abn) .hero h1, .hero h1 { font-weight: 500; letter-spacing: -.035em; max-width: 14ch; }
.hero__sub { max-width: 46ch; }
.hechos { gap: var(--sp-2); }
.hechos li {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
  border: 1px solid var(--border); padding: .45em .7em; border-radius: var(--r-xs);
  background: var(--surface);
}
.hechos li::before { width: 6px; height: 6px; background: var(--senal); border-radius: 0; }

@media (min-width: 62em) {
  .hero__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-16); }
}

/* -- la línea: consola de la máquina */
.linea {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--e2);
  padding: var(--sp-4); display: grid; gap: var(--sp-4); min-width: 0; margin: 0;
}
@media (min-width: 48em) { .linea { padding: var(--sp-6); } }
.linea__cab {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-block-end: var(--sp-3); border-block-end: 1px solid var(--border);
}
.linea__plantilla { margin-inline-start: auto; }
.led {
  width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--led);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--led) 22%, transparent);
}
.linea__msg { display: grid; gap: var(--sp-1); justify-items: start; }
.linea__burbuja {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 2px 12px 12px 12px; padding: .55em .9em;
  font-size: var(--fs-400); color: var(--text);
}
.linea__mods { list-style: none; position: relative; isolation: isolate; display: grid; gap: var(--sp-2); padding: 0; margin: 0; }
.linea__mods::before {
  content: ""; position: absolute; z-index: -1; width: 2px;
  inset-block: var(--sp-4); inset-inline-start: calc(var(--sp-4) + .75rem - 1px);
  background:
    linear-gradient(transparent, var(--senal), transparent) no-repeat 0 -40% / 100% 25%,
    linear-gradient(var(--border), var(--border));
}
.mod {
  display: grid; align-items: center; column-gap: var(--sp-3); row-gap: 2px;
  grid-template-columns: 1.5rem 1.25rem minmax(0, 1fr) auto;
  grid-template-areas: "n ic t est" "n ic d est";
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-out);
}
.mod__n { grid-area: n; color: var(--text-subtle); }
.mod .ic { grid-area: ic; color: var(--text); }
.mod__t { grid-area: t; font-weight: var(--fw-semibold); font-size: var(--fs-400); color: var(--text); line-height: 1.25; margin: 0; }
.mod__d { grid-area: d; font-size: var(--fs-300); color: var(--text-muted); line-height: 1.4; margin: 0; }
.mod .estado { grid-area: est; justify-self: end; }
@media (hover: hover) { .mod:hover { border-color: var(--border-strong); } }

.estado {
  display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
  font: 500 var(--fs-100)/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase;
  padding: .45em .6em; border-radius: var(--r-xs);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.estado[data-estado="ok"] { color: var(--text); }
.estado[data-estado="ok"]::before { background: var(--senal); }
.estado[data-estado="aviso"] { background: var(--senal-suave); border-color: transparent; color: var(--senal-texto); }
.estado[data-estado="humano"] { border-style: dashed; border-color: var(--border-strong); color: var(--text); }
.estado[data-estado="humano"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.linea__bif {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  margin: 0 0 0 calc(var(--sp-4) + .75rem); padding-inline-start: var(--sp-4);
  border-inline-start: 1px dashed var(--border-strong);
  font-size: var(--fs-300); color: var(--text-muted);
}
.linea__bif > span:nth-child(2) { flex: 1 1 14rem; min-width: 0; }
.linea__bif strong { color: var(--text); font-weight: var(--fw-semibold); }
.linea__pie { padding-block-start: var(--sp-3); border-block-start: 1px solid var(--border); }

/* íconos por máscara: el SVG vive aquí, nunca en el HTML (Bitrix lo borra) */
.ic {
  width: 1.25rem; height: 1.25rem; display: inline-block; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ic--chat { --ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.2A8.4 8.4 0 0 1 4 11.5a8.5 8.5 0 0 1 17 0Z%27/%3E%3C/svg%3E"); }
.ic--ficha { --ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z M14 3v5h5 M9 13h6M9 17h4%27/%3E%3C/svg%3E"); }
.ic--calendario { --ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z%27/%3E%3C/svg%3E"); }
.ic--comprobante { --ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 12h6M9 16h4M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z M14 2v6h6%27/%3E%3C/svg%3E"); }
.ic--persona { --ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z M4 21a8 8 0 0 1 16 0%27/%3E%3C/svg%3E"); }
.ic--crm { --ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3Z M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6 M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3%27/%3E%3C/svg%3E"); }

@media (max-width: 47.99em) {
  .linea__plantilla { display: none; }
  .mod { grid-template-columns: 1.5rem 1.25rem minmax(0, 1fr);
         grid-template-areas: "n ic t" "n ic d" "n ic est"; }
  .mod .estado { justify-self: start; margin-block-start: var(--sp-1); }
}

/* -- banda robótica: el brazo, con anotaciones de máquina */
.banda-robot { padding-block: var(--section-py-sm) var(--section-py); background: var(--surface); }
.banda-robot__in { display: grid; gap: var(--sp-10); align-items: center; }
.banda-robot__fig { position: relative; margin: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: #E9E9EA; }
.banda-robot__fig img { display: block; width: 100%; height: auto; }
.banda-robot__e {
  position: absolute; background: color-mix(in oklab, var(--surface) 88%, transparent);
  border: 1px solid var(--border); padding: .4em .6em; border-radius: var(--r-xs); color: var(--text);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.banda-robot__e::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: .55em;
  background: var(--senal); border-radius: 50%; vertical-align: .08em;
}
.banda-robot__e--1 { left: 4%; top: 7%; }
.banda-robot__e--2 { left: 20%; bottom: 10%; }
.banda-robot__e--3 { right: 4%; top: 7%; }
.banda-robot__texto { display: grid; gap: var(--sp-4); max-width: 34rem; }
.banda-robot__texto h2 { font-size: var(--fs-850); line-height: var(--lh-tight); margin: 0; }
.banda-robot__texto p { margin: 0; }
.banda-robot__texto > p:last-child { font-size: var(--fs-500); color: var(--text-muted); }
@media (min-width: 62em) {
  .banda-robot__in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-16); }
}
@media (max-width: 30em) { .banda-robot__e--2 { display: none; } }

/* -- animación: el estado por defecto es el final y visible */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rd-on { from { opacity: .35; border-color: var(--border-soft); } }
  @keyframes rd-riel { from { background-position: 0 -40%, 0 0; } to { background-position: 0 140%, 0 0; } }
  @keyframes rd-led { 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--led) 0%, transparent); } }
  .linea__msg { animation: rd-on .38s var(--ease-out) .2s backwards; }
  .mod { animation: rd-on .38s var(--ease-out) backwards; }
  .mod:nth-child(1) { animation-delay: .5s; }
  .mod:nth-child(2) { animation-delay: .85s; }
  .mod:nth-child(3) { animation-delay: 1.2s; }
  .mod:nth-child(4) { animation-delay: 1.55s; }
  .mod:nth-child(5) { animation-delay: 1.9s; }
  .linea__bif { animation: rd-on .38s var(--ease-out) 2.25s backwards; }
  .linea__mods::before { animation: rd-riel 2.4s var(--ease-in-out) 2.4s 3; }
  .led { animation: rd-led 2.4s ease-in-out 3; }
}
@media (min-width: 62em) {
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: var(--sp-12); }
}
@media (min-width: 48em) {
  .mod { grid-template-areas: "n ic t est" "n ic d d"; }
}

/* -- el resto de la página al lenguaje nuevo (05-oct-2026) ---------------- */
/* Las bandas oscuras son grafito liso: el halo cálido era del oro. */
.noche { background-image: none; }
/* La burbuja del bot es la voz de la máquina: grafito y texto blanco (19,46:1). */
.chat__turno--bot .chat__texto { background: var(--text); color: #FFFFFF; border-color: var(--text); }
/* Las fotos heredadas son cálidas (madera, latón, luz dorada). En monocromo se
   leen como foto de producto y no pelean con el blanco. Atajo: regenerarlas en
   blanco y grafito cuando haya presupuesto de créditos. */
.rubro-foto, .servicio__foto, .gan__foto { filter: grayscale(1) contrast(1.04); }
/* El recorrido medía 4.168 px. Sin las fotos de banda y sin la mitad "día"
   queda el circuito: áreas, horas y el docket, que es lo que explica. */
#recorrido .est__foto, #recorrido .ganancia { display: none; }
/* En móvil las tres etiquetas no entran sobre la foto: queda una sola. */
@media (max-width: 47.99em) {
  .banda-robot__e--1, .banda-robot__e--2 { display: none; }
  .banda-robot__e { font-size: 11px; }
}

/* ============================================================================
   05-OCT-2026 (tarde) · HÉROE Y CIERRE EN NEGRO + PROFUNDIDAD 3D
   Se redefinen los semánticos DENTRO del bloque: botones, chips y textos
   heredan sin una regla nueva cada uno. Contrastes sobre #0B0D10:
   #F5F6F8 18,4:1 · #B4BAC3 10,4:1 · #8E959F 6,6:1 (sobre #16191E 6,0:1).
   ========================================================================= */
.hero, .cierre {
  --bg: #0B0D10; --bg-alt: #16191E; --surface: #111316;
  --text: #F5F6F8; --text-muted: #B4BAC3; --text-subtle: #8E959F;
  --border: #262A31; --border-soft: #181B20; --border-strong: #6B727D;
  --fondo: #0B0D10; --texto: #FFFFFF; --acento: #FFFFFF; --sobre-texto: #0B0D10;
  --borde-fuerte: #8E959F; --accent-text: #FFFFFF; --on-accent: #0B0D10;
  --senal: #FFFFFF; --senal-texto: #FFFFFF; --senal-suave: #262A31;
  --e2: 0 1px 0 rgb(255 255 255 / .04) inset, 0 40px 80px -20px rgb(0 0 0 / .8);
  background: #0B0D10; color: var(--text);
}
.hero h1, .cierre h2 { color: #FFFFFF; }
.cierre { border-color: #0B0D10; }
.hero::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 72% 45%, #000 20%, transparent 72%);
          mask-image: radial-gradient(ellipse 60% 75% at 72% 45%, #000 20%, transparent 72%);
}
.hero .mod { background: #16191E; }
.hero .linea__burbuja { background: #1C1F25; border-color: #2E333B; }
.hero .estado { background: #16191E; }
.hero .estado[data-estado="aviso"] { background: #262A31; color: #FFFFFF; }
/* un halo blanco muy tenue detrás del panel: lo separa del negro sin color */
.hero__in { position: relative; }

/* -- 3D: el panel flota en perspectiva y se endereza al acercarse el puntero.
   Solo transform (CLS 0). Sin JS: si no hay hover (táctil), queda plano. */
@media (min-width: 62em) {
  .hero__in { perspective: 1800px; }
  .linea {
    transform: rotateY(-11deg) rotateX(5deg) translateZ(0);
    transform-origin: 30% 50%; transform-style: preserve-3d;
    transition: transform .9s var(--ease-out);
    box-shadow: 0 1px 0 rgb(255 255 255 / .05) inset,
                -30px 50px 90px -30px rgb(0 0 0 / .9),
                0 0 0 1px #1E2228;
  }
  .linea__mods, .linea__msg, .linea__bif { transform: translateZ(28px); }
  .mod .estado { transform: translateZ(14px); }
}
@media (min-width: 62em) and (hover: hover) {
  .hero__in:hover .linea { transform: rotateY(-3deg) rotateX(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .linea { transition: none; }
}


/* ===== BLINDAJE anti-tema Bitrix (NO QUITAR) =====
   El tema de Bitrix fuerza h1..h6 a #111 y le pone fondo gris al <header>.

   Por qué la tinta de marca es #17151F y no un color lejano: es VECINA de #111.
   Si en alguna sección clara el override fallara, la caída es de 17.31:1 a
   18.11:1 — imperceptible. Una tinta de marca lejos de #111 convertiría cada
   fallo de especificidad en un defecto visible.

   El peligro real está en las bandas oscuras: #111 sobre Noche #120E1E da
   1.00:1. Eso no es "feo", es un titular que literalmente no se ve. Por eso las
   bandas .noche llevan su propia reafirmación, y por eso ningún H1 de página
   vive dentro de una banda oscura. */
.landing-block #abn { color: var(--text); background: transparent; }
.landing-block #abn h1, .landing-block #abn h2, .landing-block #abn h3,
.landing-block #abn h4, .landing-block #abn h5 { color: var(--text) !important; }

/* Bandas Noche: acá el override NO es cosmético, es lo único que hace visible
   el texto. Se verifica en el navegador antes de publicar, siempre. */
.landing-block #abn .noche,
.landing-block #abn .noche p,
.landing-block #abn .noche li { color: var(--noche-text) !important; }
.landing-block #abn .noche h1, .landing-block #abn .noche h2,
.landing-block #abn .noche h3, .landing-block #abn .noche h4,
.landing-block #abn .noche h5 { color: var(--noche-text) !important; }
.landing-block #abn .noche .destacado { color: var(--noche-oro) !important; }

.landing-block #abn header { background: transparent !important; }
.landing-block #abn .btn-primario { color: var(--on-accent) !important; }