/* ============================================================
   ARKANA — landing_page. Hoja de estilos única.
   Sin frameworks, sin CDN: el sistema entero vive en :root.
   El tema claro redefine SOLO tokens, nunca reglas de componente.

   REGLA DE ORO DE ESTA VERSIÓN — TIPOGRAFÍA:
   el cuerpo es de 17px y NADA baja de 15px. Si vas a agregar un
   font-size, que no sea menor a 0.9375rem. La versión vieja tenía el
   60% del texto por debajo de 16px y se leía como un documento
   técnico, no como una página que vende.

   Índice:
     1. Fuentes        6. Cabecera      11. Propósito     16. WhatsApp
     2. Tokens         7. Hero          12. FAQ           17. Movimiento
     3. Base           8. Panel hero    13. Contacto      18. Telaraña
     4. Tipografía     9. Servicios     14. Pie           19. Modal
     5. Botones       10. Plataforma    15. Formulario    20. Consentimiento
                                                          21. Legales

   La 21 la usa legales.html, que comparte esta misma hoja.
   ============================================================ */

/* ---------- 1. Fuentes (self-hosted, sin Google Fonts) ---------- */

@font-face {
    font-family: 'StackSansNotch';
    src: url('fonts/StackSansNotch-Light.woff2') format('woff2'),
        url('fonts/StackSansNotch-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StackSansNotch';
    src: url('fonts/StackSansNotch-Regular.woff2') format('woff2'),
        url('fonts/StackSansNotch-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StackSansNotch';
    src: url('fonts/StackSansNotch-SemiBold.woff2') format('woff2'),
        url('fonts/StackSansNotch-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StackSansNotch';
    src: url('fonts/StackSansNotch-Bold.woff2') format('woff2'),
        url('fonts/StackSansNotch-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ---------- 2. Tokens ---------- */

:root {
    color-scheme: dark;

    /* Sustrato — grafito índigo. Nunca #000. */
    --bg: #0E0E1A;
    --bg-2: #12121E;
    --surface: #16162A;
    --surface-2: #1E1E34;
    --rule: #2A2A44;
    --rule-soft: #20203A;

    /* Tinta */
    --text: #ECEDF8;
    /* 16.5:1 */
    --muted: #A6A6C8;
    /* 8.1:1 — más claro que antes: el cuerpo ya no se hunde */

    /* Acento */
    --accent: #7C3AED;
    --accent-deep: #6D28D9;
    --accent-lift: #A78BFA;
    /* 7.1:1 */
    --on-accent: #FFFFFF;
    /* 5.7:1 sobre --accent */
    --accent-wash: rgba(124, 58, 237, 0.10);
    /* Magenta del logo: sólo resplandores y degradados, nunca texto. */
    --accent-2: #E838D8;
    /* Brillo que sigue al cursor sobre las superficies inclinadas */
    --glare: rgba(255, 255, 255, 0.11);

    /* Estado — semánticos y sólo semánticos. */
    --ok: #4ACF9B;
    --warn: #E8B450;
    --crit: #FF7468;

    /* Tipografía */
    --font-display: 'StackSansNotch', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'StackSansNotch', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* Ritmo — mucho más aire que la versión anterior */
    --gap: 24px;
    --max: 1200px;
    --section-y: 76px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-theme='light'] {
    color-scheme: light;

    --bg: #F7F7FB;
    --bg-2: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F1F1F8;
    --rule: #E1E1EE;
    --rule-soft: #ECECF5;

    --text: #14142A;
    /* 16.9:1 */
    --muted: #4E4E70;
    /* 7.42:1 */

    --accent: #6D28D9;
    --accent-deep: #5B21B6;
    --accent-lift: #6D28D9;
    --on-accent: #FFFFFF;
    --accent-wash: rgba(109, 40, 217, 0.07);
    --accent-2: #C0219E;
    /* Sobre superficie blanca un brillo blanco no existe: acá tiñe */
    --glare: rgba(109, 40, 217, 0.10);

    --ok: #12734A;
    --warn: #7F5100;
    --crit: #AD261E;
}

@media (min-width: 900px) {
    :root {
        --section-y: 104px;
    }
}

/* ---------- 3. Base ---------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 400;
    /* 18px de base. Es el número que cambia toda la sensación de la página. */
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
}

/* De autor, para ganarle al [hidden] del agente de usuario: sin esto un
   <svg hidden> se sigue viendo. */
[hidden] {
    display: none !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

::selection {
    background: var(--accent);
    color: var(--on-accent);
}

:focus-visible {
    outline: 3px solid var(--accent-lift);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -70px;
    z-index: 200;
    background: var(--accent);
    color: var(--on-accent);
    padding: 12px 20px;
    font-size: 1rem;
    transition: top 0.2s var(--ease);
}

.skip-link:focus {
    top: 16px;
}

/* ---------- 4. Tipografía ----------
   Escala pareja: 72 / 48 / 24 / 18. El h3 ahora se distingue del cuerpo,
   que en la versión anterior estaban a 19 contra 15 y se confundían. */

.display-1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 300;
    text-wrap: balance;
}

.display-1 strong {
    font-weight: 700;
}

.display-2 {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3.2vw, 2.625rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 700;
    text-wrap: balance;
}

.display-3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 700;
}

.lead {
    font-size: clamp(1.1875rem, 1.5vw, 1.375rem);
    line-height: 1.55;
    color: var(--muted);
    max-width: 26ch;
    font-weight: 300;
}

.prose {
    color: var(--muted);
    max-width: 34ch;
    font-size: 1.125rem;
}

/* Rótulo de sección. Sigue en mayúscula porque es corto, pero a 15px y con
   la mitad del espaciado que antes: a 11px era ilegible. */
.eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-lift);
}

/* Piso tipográfico de la hoja: nada baja de acá. Se usa para notas legales. */
.note {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--muted);
}

.txt-warn {
    color: var(--warn);
}

.is-ok {
    background: var(--ok);
}

.is-warn {
    background: var(--warn);
}

.is-crit {
    background: var(--crit);
}

/* ---------- 5. Estructura ---------- */

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gap);
}

.section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

.section+.section {
    border-top: 1px solid var(--rule);
}

/* Cabecera de sección: rótulo, título grande, una bajada corta. Y aire. */
.head {
    max-width: 40rem;
    margin-bottom: 48px;
}

.head--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.head .eyebrow {
    margin-bottom: 20px;
}

.head .display-2 {
    margin-bottom: 20px;
}

.head .prose {
    max-width: 46ch;
}

.head--center .prose {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- 6. Botones ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 28px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    background: none;
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
        color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn svg {
    flex: none;
    transition: transform 0.18s var(--ease);
}

/* Un solo CTA manda en cada pantalla. Éste. */
.btn--primary {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 10px 34px -12px rgba(124, 58, 237, 0.95);
}

.btn--primary:hover {
    background: var(--accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -12px rgba(124, 58, 237, 1);
}

.btn--primary:hover svg {
    transform: translateX(4px);
}

.btn--ghost {
    border-color: var(--rule);
    color: var(--text);
}

.btn--ghost:hover {
    border-color: var(--accent-lift);
    color: var(--accent-lift);
}

/* El verde sólo en el glifo: es lo que hace reconocible a WhatsApp al instante */
.btn--wa svg {
    fill: #25D366;
}

.btn--wa:hover {
    border-color: #25D366;
    color: var(--text);
}

.btn--block {
    width: 100%;
}

.btn--sm {
    padding: 13px 22px;
    font-size: 1rem;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Tercer nivel: link de texto. No compite con los dos botones. */
.link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-lift);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}

.link:hover {
    text-decoration-thickness: 2px;
}

/* ---------- 7. Cabecera ---------- */

.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 90;
    border-bottom: 1px solid transparent;
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.header.is-stuck {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--rule);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 80px;
}

/* El logo vive acá y sólo acá, chico. En el hero manda el mensaje. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand__mark {
    width: 34px;
    height: auto;
    flex: none;
    filter: drop-shadow(0 0 8px rgba(232, 56, 216, 0.45));
    transition: filter 0.3s var(--ease);
}

.brand:hover .brand__mark {
    filter: drop-shadow(0 0 14px rgba(232, 56, 216, 0.8));
}

.brand__name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.nav {
    display: none;
    align-items: center;
    gap: 34px;
}

.nav a,
.nav button {
    font-family: inherit;
    font-size: 1.0625rem;
    color: var(--muted);
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    padding: 6px 0;
    transition: color 0.18s var(--ease);
}

.nav a::after,
.nav button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent-lift);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s var(--ease);
}

.nav a:hover,
.nav button:hover {
    color: var(--text);
}

.nav a:hover::after,
.nav button:hover::after {
    transform: scaleX(1);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.icon-btn:hover {
    color: var(--text);
    border-color: var(--accent-lift);
}

.header__cta {
    display: none;
}

@media (min-width: 1040px) {
    .nav {
        display: flex;
    }

    .header__cta {
        display: inline-flex;
    }

    .nav-toggle {
        display: none;
    }
}

/* Menú móvil */
.mobile-nav {
    position: fixed;
    inset: 80px 0 auto 0;
    z-index: 89;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    padding: 12px var(--gap) 28px;
    display: none;
}

.mobile-nav.is-open {
    display: block;
}

.mobile-nav a:not(.btn),
.mobile-nav button:not(.btn) {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule-soft);
    font-family: inherit;
    cursor: pointer;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 600;
}

.mobile-nav .btn {
    margin-top: 22px;
}

/* ---------- 8. Hero ---------- */

.hero {
    position: relative;
    padding-top: 116px;
    padding-bottom: 72px;
    overflow: hidden;
}

/* Retícula técnica, muy tenue, difuminada hacia abajo. Es lo que hace que el
   primer golpe de vista se lea como un producto de seguridad y no como un
   fondo liso. Va detrás de todo el hero (z-index 0) y no intercepta clics. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.055) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 120% 85% at 50% 0%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 120% 85% at 50% 0%, #000 25%, transparent 78%);
}

[data-theme='light'] .hero::before {
    background-image:
        linear-gradient(rgba(109, 40, 217, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109, 40, 217, 0.07) 1px, transparent 1px);
}

@media (min-width: 1000px) {
    .hero {
        /* Una pantalla completa, ni más ni menos: el mensaje, los dos CTA y el
           tablero entran juntos sin scrollear, y la franja de marcos queda
           justo en el borde para invitar a seguir. `svh` y no `vh` porque en
           el navegador móvil el 100vh se va por debajo de la barra. */
        min-height: 100svh;
        display: flex;
        align-items: center;
        padding-top: 112px;
        padding-bottom: 48px;
    }

    .hero>.wrap {
        width: 100%;
    }
}

.hero__aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.aurora {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.38;
    will-change: transform;
}

.aurora--1 {
    top: -30%;
    right: -8%;
    width: min(680px, 82vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.55) 0%, transparent 66%);
    animation: drift-1 26s ease-in-out infinite;
}

.aurora--2 {
    top: 2%;
    right: 24%;
    width: min(440px, 62vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(232, 56, 216, 0.32) 0%, transparent 64%);
    animation: drift-2 34s ease-in-out infinite;
}

/* La tercera equilibra el peso: sin ella toda la luz quedaba a la derecha y
   la columna del texto flotaba sobre un fondo muerto. */
.aurora--3 {
    bottom: -34%;
    left: -12%;
    width: min(560px, 76vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.34) 0%, transparent 66%);
    animation: drift-1 30s ease-in-out infinite reverse;
}

[data-theme='light'] .aurora {
    opacity: 0.26;
}

@keyframes drift-1 {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-6%, 7%, 0) scale(1.12);
    }
}

@keyframes drift-2 {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1.06);
    }

    50% {
        transform: translate3d(9%, -5%, 0) scale(0.92);
    }
}

/* Entrada orquestada: una sola secuencia al cargar */
[data-seq] {
    opacity: 0;
    transform: translateY(16px);
    animation: seq-in 0.8s var(--ease) forwards;
    animation-delay: var(--d, 0s);
}

@keyframes seq-in {
    to {
        opacity: 1;
        transform: none;
    }
}

.pulse {
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: none;
    /* Queda a la altura de la primera línea, no centrado entre las dos */
    align-self: flex-start;
    margin-top: 0.5em;
    border-radius: 50%;
    background: var(--ok);
    margin-right: 10px;
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(74, 207, 155, 0.5);
        opacity: 1;
    }

    50% {
        box-shadow: 0 0 0 7px rgba(74, 207, 155, 0);
        opacity: 0.6;
    }
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 64px;
}

@media (min-width: 1000px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 72px;
        align-items: center;
    }
}

/* Cápsula, no texto suelto: el primer elemento de la página tiene que
   leerse como una etiqueta de producto. El punto verde va adentro. */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
    padding: 8px 18px 8px 16px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    backdrop-filter: blur(8px);
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 1rem;
    line-height: 1.3;
}

/* Adentro de la cápsula el punto va centrado con el texto, no colgado de la
   primera línea como en el resto de la página. */
.hero__eyebrow .pulse {
    align-self: center;
    margin-top: 0;
}

/* Un punto por debajo de .display-1: el título convive con el tablero en la
   misma pantalla, y a 64 px se comía cinco renglones de la columna izquierda. */
.hero h1 {
    margin-bottom: 28px;
    font-size: clamp(2.375rem, 4.2vw, 3.5rem);
}

/* La segunda oración baja de línea: son dos promesas, no una frase larga.
   Y es la que lleva el peso, así que va en 700 (regla de .display-1). */
.hero h1 strong {
    display: block;
    color: var(--text);
}

/* A 26ch la bajada se partía en tres renglones y rompía el ritmo entre el
   título y los botones. `balance` evita que la última línea quede con una
   palabra sola colgando. */
.hero .lead {
    max-width: 40ch;
    text-wrap: balance;
}

/* Los CTA: uno domina, el segundo acompaña, el tercero es un link. */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}

@media (max-width: 560px) {
    .hero__actions .btn {
        width: 100%;
    }
}

/* La microcopia que saca el miedo a hacer clic. Va pegada al botón. */
.cta-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 11px;
    margin-top: 18px;
    font-size: 1rem;
    color: var(--muted);
}

.cta-note b {
    font-weight: 600;
    color: var(--text);
}

.cta-note i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.6;
}

.hero__legal {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
    max-width: 46ch;
}

/* Franja de marcos: prueba de seriedad sin scrollear */
.frames {
    position: relative;
    z-index: 1;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
}

@media (min-width: 1000px) {
    .frames {
        display: flex;
        align-items: center;
        gap: 32px;
        margin-top: 52px;
    }

    .frames__label {
        margin-bottom: 0;
        white-space: nowrap;
    }
}

.frames__label {
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 20px;
}

.frames__row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.frame {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid var(--rule);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--text);
    transition: border-color 0.18s var(--ease);
}

.frame:hover {
    border-color: var(--accent-lift);
}

.frame i {
    width: 8px;
    height: 8px;
    flex: none;
    background: var(--accent-lift);
}

/* ---------- 9. Panel de postura (maqueta del hero) ----------
   Se le sacaron las cinco etiquetas de 9px del radar: la forma ya comunica
   "matriz de madurez" y la leyenda de abajo, ahora legible, la explica. */

/* Contenedor de la inclinación. No se transforma nunca: sostiene la animación
   de entrada y es el que mide la posición del cursor, así la geometría no se
   mueve debajo del puntero mientras el tablero gira. Las variables se setean
   acá y las hereda .panel. */
.panel-3d {
    --rx: 0deg;
    --ry: 0deg;
}

@media (min-width: 1000px) {

    /* En reposo queda apenas girado, como una foto de producto. En pantallas
       chicas no: ahí el tablero se lee de frente. */
    .panel-3d {
        --ry: -4deg;
    }
}

.panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--surface);

    /* La sombra se corre con el giro: es lo que termina de convencer de que
       hay un objeto y no una imagen rotada. Los desplazamientos los escribe
       app-v5.js; sin JS quedan estos, que son la posición de reposo. */
    box-shadow: var(--sx, 0px) var(--sy, 30px) 80px -34px rgba(124, 58, 237, 0.6);

    /* La perspectiva va acá adentro y no en el padre a propósito: en el padre,
       las tarjetas o bloques hermanos compartirían un único punto de fuga y
       los de los costados saldrían deformados. */
    transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}

/* Mientras el cursor está encima, giro y sombra van pegados al puntero: con la
   transición larga de arriba se siente elástico y mareado. */
.panel-3d.is-tilt .panel {
    transition: box-shadow 0.12s linear, transform 0.12s linear;
}

/* Brillo que sigue al cursor. Es lo que vende la superficie: sin él el giro
   parece una imagen rotada y no un objeto con volumen. */
.panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
            var(--glare), transparent 68%);
    transition: opacity 0.35s var(--ease);
}

.panel-3d.is-tilt .panel::after {
    opacity: 1;
}

/* NO poner acá capas con translateZ (barra, anillo, radar). Se probó: con
   `preserve-3d`, un hijo adelantado se agranda y se sale de la tarjeta —la
   barra del título quedaba colgando por fuera del borde izquierdo—, y para
   que no pase hay que compensar con un scale por capa. En una maqueta de
   producto eso se lee como un error de maquetado, no como profundidad. El
   volumen lo dan la inclinación, el brillo y la sombra. */

/* Filete de 2 px arriba: separa la maqueta del fondo y le da el borde de
   "pantalla encendida" sin agregar un solo kilobyte de imagen. */
.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
    background: linear-gradient(90deg, var(--accent-lift), var(--accent-2), var(--accent-lift));
}

/* Sin translateY: el movimiento ahora lo pone la inclinación, y un transform
   en :hover pisaría el rotate entero. Sólo cambia el color de la sombra; el
   desplazamiento sigue saliendo de --sx/--sy. */
.panel-3d:hover .panel {
    box-shadow: var(--sx, 0px) var(--sy, 30px) 96px -30px rgba(232, 56, 216, 0.6);
}

.panel__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-2);
}

.panel__title {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

/* Toda maqueta lleva este sello: lo que se ve son datos inventados */
.tag-sample {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--accent-lift);
    border: 1px solid var(--accent-lift);
    padding: 4px 10px;
    white-space: nowrap;
}

.panel__score {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rule);
}

.ring {
    position: relative;
    width: 96px;
    height: 96px;
    flex: none;
}

.ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

/* Los colores del degradado salen del CSS: stop-color es propiedad, no atributo */
.ring-stop-a {
    stop-color: var(--accent-lift);
}

.ring-stop-b {
    stop-color: var(--accent-2);
}

.ring__track {
    fill: none;
    stroke: var(--rule);
    stroke-width: 9;
}

.ring__value {
    fill: none;
    stroke: url(#ring-grad);
    stroke-width: 9;
    stroke-linecap: round;
    /* 2πr con r=52 */
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    filter: drop-shadow(0 0 7px rgba(232, 56, 216, 0.55));
    transition: stroke-dashoffset 1.5s var(--ease);
}

.ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ring__num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.ring__label i {
    font-style: normal;
    font-size: 0.9375rem;
    color: var(--muted);
    margin-top: 6px;
}

.score__side {
    min-width: 0;
    flex: 1;
}

.score__title {
    font-size: 1rem;
    color: var(--muted);
    margin-bottom: 2px;
}

.score__sub {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Los dos indicadores que el producto muestra al lado del score. Con
   `tabular-nums` el número no baila mientras cuenta hasta su valor. */
.mini {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--rule-soft);
}

.mini li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9375rem;
    color: var(--muted);
    padding: 1px 0;
}

.mini b {
    font-size: 1.0625rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.txt-crit {
    color: var(--crit);
}

.panel__radar {
    padding: 10px 20px 12px;
    border-bottom: 1px solid var(--rule);
}

/* Radar a la izquierda, leyenda y áreas flojas a la derecha. Apilado, el
   bloque medía lo mismo con un radar la mitad de chico. */
.areas {
    display: grid;
    grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

@media (max-width: 420px) {
    .areas {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 14px;
    }
}

.radar {
    display: block;
    width: 100%;
    height: auto;
}

.radar__grid polygon,
.radar__grid path {
    fill: none;
    stroke: var(--rule);
    stroke-width: 1;
}


.radar__area {
    fill: var(--accent);
    fill-opacity: 0.26;
    stroke: var(--accent-lift);
    stroke-width: 2.5;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 9px rgba(124, 58, 237, 0.6));
}

.radar__dots circle {
    stroke: var(--surface);
    stroke-width: 2;
}

.is-ok-f {
    fill: var(--ok);
}

.is-warn-f {
    fill: var(--warn);
}

.is-crit-f {
    fill: var(--crit);
}

/* En columna: al costado del radar hay ancho para el texto, no para tres
   chips en fila. */
.radar__legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.radar__legend span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9375rem;
    color: var(--muted);
}

.radar__legend i {
    width: 10px;
    height: 10px;
    flex: none;
}

/* "Empezá por acá" — las tres áreas más flojas, con su puntaje. Reemplaza a
   las etiquetas de los ejes: dice más, y a 15px se lee. */
.weak {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--rule-soft);
}

.weak__k {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

/* Acá el separador ya lo pone .weak: si .mini trae el suyo quedan dos rayas
   pegadas. */
.weak .mini {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Punto de estado adentro de una fila de .mini */
.mini i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
}

.mini li>span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.panel__plan {
    padding: 18px 20px;
}

.plan__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.plan__count {
    font-size: 0.9375rem;
    color: var(--muted);
    white-space: nowrap;
}

/* El nivel del plan: en el producto es una insignia y acá también */
.plan__lvl {
    flex: none;
    padding: 4px 10px;
    border: 1px solid var(--rule);
    background: var(--bg-2);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--accent-lift);
    white-space: nowrap;
}

.plan__meter {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 0.9375rem;
    color: var(--muted);
}

.plan__bar {
    height: 6px;
    background: var(--rule);
    margin-bottom: 8px;
    overflow: hidden;
}

.plan__bar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width 1.4s var(--ease);
}

/* El margen negativo compensa el padding: el texto sigue alineado con el
   resto del bloque y la fila resaltada puede pintarse de borde a borde. */
.task {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-bottom: 1px solid var(--rule-soft);
    transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.task:last-child {
    border-bottom: 0;
}

/* La fila que el producto marca cuando la estás por resolver. Acá va rotando
   sola —lo hace app-v5.js— para que el tablero respire. */
.task.is-focus {
    background: var(--surface-2);
    box-shadow: inset 2px 0 0 var(--accent-lift);
}

.task.is-focus .task__box {
    border-color: var(--accent-lift);
}

.task__box {
    width: 16px;
    height: 16px;
    flex: none;
    border: 2px solid var(--muted);
    border-radius: 50%;
    transition: border-color 0.4s var(--ease);
}

.task__name {
    flex: 1;
    font-size: 1rem;
    line-height: 1.4;
}

.task__pts {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-lift);
    white-space: nowrap;
}

/* ---------- 10. Servicios ----------
   Se conserva el enfoque y la estructura de la versión anterior: banda
   oscura a sangre, cuatro tarjetas, un color por servicio, chips en vez
   de bullets. Lo único que cambia es el tamaño de todo. */

.band {
    --bg: #13131F;
    --bg-2: #17172A;
    --surface: #1B1B2E;
    --surface-2: #212138;
    --rule: #32324F;
    --rule-soft: #26263E;
    --text: #F4F4FE;
    --muted: #B4B4D6;
    --accent-lift: #A78BFA;

    position: relative;
    color: var(--text);
    overflow: hidden;
    border-top: 0 !important;

    /* Sin corte duro: la banda entra y sale con un degradado de 120 px, así
       el salto de fondo claro a fondo oscuro deja de ser un tajo. */
    background: linear-gradient(180deg,
            transparent 0,
            var(--bg) 120px,
            var(--bg) calc(100% - 120px),
            transparent 100%);
}

/* En tema claro el salto de #F7F7FB a un fondo casi negro era de 18:1 y se
   leía como un tajo. Subiendo la banda un escalón queda en 14,7:1 —un 20%
   menos— y sigue siendo el corte oscuro que la sección necesita. Los seis
   colores de texto de adentro siguen por encima de 5,7:1. */
[data-theme='light'] .band {
    --bg: #212138;
    --bg-2: #262640;
    --surface: #2A2A46;
    --surface-2: #30304F;
    --rule: #3E3E60;
    --rule-soft: #34345A;
}

.band::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.05) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
}

.band::after {
    content: '';
    position: absolute;
    top: -24%;
    left: 50%;
    width: min(1200px, 125vw);
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.22) 0%, transparent 62%);
    filter: blur(30px);
}

.band>.wrap {
    position: relative;
    z-index: 1;
}

/* Una palabra con degradado por página. Más, y deja de ser un acento. */
.grad {
    background: linear-gradient(120deg, var(--accent-lift), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.svcs {
    display: grid;
    gap: 22px;
}

@media (min-width: 900px) {
    .svcs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* El acento viaja en --svc: ícono, rótulo, número y borde encendido. */
.svc {
    --svc: var(--accent-lift);
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;
    position: relative;
    overflow: hidden;
    padding: 30px 28px 26px;
    border: 1px solid var(--rule);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
    /* El levantado sigue siendo una variable y no un transform aparte: los dos
       en la misma propiedad, o el hover borra la inclinación. */
    transform: perspective(900px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
    transition: border-color 0.3s var(--ease), transform 0.5s var(--ease);
}

.svc.is-tilt {
    transition: border-color 0.3s var(--ease), transform 0.12s linear;
}

.svc:hover {
    border-color: color-mix(in srgb, var(--svc) 60%, transparent);
    --lift: -4px;
}

/* Entrada de la tarjeta: se mueve la misma variable que usa el hover, así
   nunca hay dos reglas peleándose por `transform`. Ver `.reveal--fade`. */
.js .svc.reveal {
    --lift: 18px;
}

.js .svc.reveal.is-in {
    --lift: 0px;
}

.js .svc.reveal.is-in:hover {
    --lift: -4px;
}

/* El diferencial no puede pesar lo mismo que el resto: va encendido de fábrica. */
.svc--star {
    border-color: color-mix(in srgb, var(--svc) 45%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--svc) 9%, transparent), rgba(255, 255, 255, 0.012));
}

.svc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--svc), transparent);
    opacity: 0;
    transition: opacity 0.35s var(--ease);
}

.svc--star::before,
.svc:hover::before {
    opacity: 1;
}

.svc::after {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: var(--svc);
    opacity: 0.08;
    filter: blur(40px);
    transition: opacity 0.35s var(--ease);
    pointer-events: none;
}

.svc:hover::after {
    opacity: 0.22;
}

/* Número fantasma: peso gráfico sin una sola palabra más */
.svc__n {
    position: absolute;
    top: 10px;
    right: 24px;
    font-family: var(--font-display);
    font-size: 4.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--svc);
    opacity: 0.14;
    pointer-events: none;
    user-select: none;
}

.svc__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border: 1px solid color-mix(in srgb, var(--svc) 38%, transparent);
    background: color-mix(in srgb, var(--svc) 13%, transparent);
    color: var(--svc);
    transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.svc:hover .svc__icon {
    transform: scale(1.08);
    background: color-mix(in srgb, var(--svc) 24%, transparent);
}

.svc__kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--svc);
    margin-bottom: 12px;
}

.svc__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.svc__desc {
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 34ch;
}

/* Chips en vez de bullets: se escanean, no se leen */
.svc__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}

.svc__chips span {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    color: var(--muted);
    padding: 7px 12px;
    border: 1px solid var(--rule);
    background: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
}

/* Las dos leyes que de verdad importan al cliente argentino */
.laws {
    display: grid;
    gap: 18px;
    margin-top: 40px;
}

@media (min-width: 700px) {
    .laws {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.law {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border: 1px solid var(--rule);
    background: var(--surface);
}

.law i {
    width: 12px;
    height: 12px;
    flex: none;
    margin-top: 9px;
}

.law__country {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.law__norm {
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.5;
}

/* ---------- 11. Plataforma ---------- */

.product {
    display: grid;
    gap: 28px;
}

@media (min-width: 1000px) {
    .product {
        grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
        gap: 36px;
        align-items: start;
    }
}

.modlist {
    border: 1px solid var(--rule);
    border-bottom: 0;
}

.mod {
    display: block;
    width: 100%;
    text-align: left;
    padding: 20px 24px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 600;
    transition: background-color 0.18s var(--ease), border-left-color 0.18s var(--ease);
}

.mod:hover {
    background: var(--surface);
}

.mod.is-active {
    background: var(--surface);
    border-left-color: var(--accent);
}

.viewer {
    border: 1px solid var(--rule);
    background: var(--surface);
    overflow: hidden;
}

.viewer__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg-2);
}

.viewer__stage video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.viewer__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-top: 1px solid var(--rule);
}

.viewer__caption {
    font-size: 1.0625rem;
    color: var(--muted);
}

/* ---------- 12. Propósito (misión, visión y valores comprimidos) ----------
   Antes esto ocupaba 641 px. Acá es una tira: una frase de propósito y tres
   valores en línea. No es protagonista de la página. */

.purpose {
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width: 900px) {
    .purpose {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 64px;
    }
}

.purpose__line {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -0.02em;
    padding-left: 26px;
    border-left: 3px solid var(--accent);
    text-wrap: balance;
}

.purpose__line strong {
    font-weight: 700;
}

.values {
    display: grid;
    gap: 26px;
}

@media (min-width: 560px) {
    .values {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.value h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.value p {
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.value__mark {
    display: block;
    width: 30px;
    height: 3px;
    background: var(--accent);
    margin-bottom: 16px;
}

/* ---------- 13. FAQ ---------- */

.faq {
    max-width: 52rem;
    border-top: 1px solid var(--rule);
}

.faq__item {
    border-bottom: 1px solid var(--rule);
}

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    transition: color 0.18s var(--ease);
}

.faq__q:hover {
    color: var(--accent-lift);
}

.faq__sign {
    position: relative;
    width: 20px;
    height: 20px;
    flex: none;
}

.faq__sign::before,
.faq__sign::after {
    content: '';
    position: absolute;
    background: var(--accent-lift);
    transition: transform 0.22s var(--ease);
}

.faq__sign::before {
    top: 9px;
    left: 0;
    width: 20px;
    height: 2px;
}

.faq__sign::after {
    left: 9px;
    top: 0;
    width: 2px;
    height: 20px;
}

.faq__q[aria-expanded='true'] .faq__sign::after {
    transform: scaleY(0);
}

.faq__a {
    display: none;
    padding: 0 0 26px;
    color: var(--muted);
    max-width: 60ch;
    font-size: 1.0625rem;
}

.faq__a.is-open {
    display: block;
}

/* ---------- 14. Contacto y formulario ---------- */

.ways {
    display: grid;
    gap: 20px;
    margin-bottom: 48px;
}

@media (min-width: 820px) {
    .ways {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.way {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    border: 1px solid var(--rule);
    background: var(--surface);
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.way:hover {
    border-color: var(--accent-lift);
    transform: translateY(-3px);
}

/* La opción principal se ve principal */
.way--main {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-wash), transparent);
}

.way__k {
    font-size: 1rem;
    color: var(--muted);
    margin-bottom: 12px;
}

.way h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.way p {
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.way__go {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--accent-lift);
}

.way--wa .way__go {
    color: #25D366;
}

[data-theme='light'] .way--wa .way__go {
    color: #10693A;
}

.contact {
    display: grid;
    gap: 44px;
}

@media (min-width: 1000px) {
    .contact {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
        gap: 64px;
        align-items: start;
    }
}

.form {
    display: grid;
    gap: 24px;
}

@media (min-width: 700px) {
    .form__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

.form__group {
    display: grid;
    gap: 10px;
}

/* Etiquetas en oración y a 17px. Antes iban en mayúscula a 11px, que es
   justo donde peor se lee y donde más importa entender. */
.form__group label {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
}

.form__group label .opt {
    font-weight: 400;
    color: var(--muted);
}

/* Fila de la etiqueta cuando el campo lleva contador de caracteres */
.form__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.counter {
    flex: none;
    font-size: 0.9375rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    transition: color 0.18s var(--ease);
}

/* Avisa antes de chocar contra el tope, no cuando ya chocó */
.counter.is-near {
    color: var(--warn);
}

.counter.is-full {
    color: var(--crit);
    font-weight: 600;
}

.input {
    width: 100%;
    padding: 15px 17px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-size: 1.0625rem;
    transition: border-color 0.18s var(--ease);
}

.input::placeholder {
    color: var(--muted);
    opacity: 0.75;
}

.input:hover {
    border-color: var(--muted);
}

.input:focus {
    border-color: var(--accent-lift);
    outline: none;
    box-shadow: 0 0 0 4px var(--accent-wash);
}

/* El campo que falla se marca solo. Antes el único aviso era el cartel de
   abajo del formulario, y con el formulario largo quedaba fuera de pantalla:
   la persona leía "revisá el correo" sin saber cuál de los cinco campos era.
   `aria-invalid` lo pone app-v5.js y es lo mismo que anuncia el lector. */
.input[aria-invalid='true'] {
    border-color: var(--crit);
    background: color-mix(in srgb, var(--crit) 6%, var(--bg-2));
}

.input[aria-invalid='true']:focus {
    border-color: var(--crit);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--crit) 18%, transparent);
}

textarea.input {
    resize: vertical;
    min-height: 130px;
    line-height: 1.6;
}

select.input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 46px;
}

/* Trampa antispam — nunca visible, nunca tabulable */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__status {
    display: none;
    padding: 16px 18px;
    border: 1px solid var(--rule);
    border-left-width: 3px;
    font-size: 1.0625rem;
    line-height: 1.55;
}

.form__status.is-visible {
    display: block;
}

.form__status.is-ok {
    border-left-color: var(--ok);
    background: var(--surface);
}

.form__status.is-error {
    border-left-color: var(--crit);
    background: var(--surface);
}

/* ---------- 15. Pie ---------- */

.footer {
    border-top: 1px solid var(--rule);
    padding: 48px 0;
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
}

.footer__legal {
    color: var(--muted);
    font-size: 1rem;
    max-width: 44ch;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
}

.footer__links a {
    color: var(--muted);
    font-size: 1rem;
    transition: color 0.18s var(--ease);
}

.footer__links a:hover {
    color: var(--accent-lift);
}

/* ---------- 16. WhatsApp flotante y barra móvil ---------- */

/* Burbuja de escritorio. Aparece recién cuando la persona pasó el hero
   (`.is-in`, lo pone app-v5.js) y se esconde sobre la sección de contacto,
   donde WhatsApp ya está en pantalla y la burbuja sólo tapaba el formulario. */
.wa {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 80;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 15px 22px;
    border: 1px solid color-mix(in srgb, #25D366 45%, var(--rule));
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: 700;
    box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.9),
        0 0 0 1px color-mix(in srgb, #25D366 12%, transparent);
    transition: border-color 0.2s var(--ease), transform 0.28s var(--ease),
        opacity 0.28s var(--ease), box-shadow 0.2s var(--ease);
}

/* Estado de reposo: fuera de la vista pero sin sacarla del árbol, así la
   transición tiene de dónde salir. Sin JS nunca se agrega `.is-in`, por eso
   el estado escondido vive bajo `.js`. */
.js .wa {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    pointer-events: none;
}

.js .wa.is-in {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.wa:hover {
    border-color: #25D366;
    transform: translateY(-3px);
    box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.95),
        0 0 0 4px rgba(37, 211, 102, 0.16);
}

.js .wa.is-in:hover {
    transform: translateY(-3px);
}

.wa__icon {
    width: 24px;
    height: 24px;
    flex: none;
    fill: #25D366;
}

/* El punto verde que respira: dice "hay alguien del otro lado" sin texto. */
.wa::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #25D366;
    border: 2px solid var(--bg);
    animation: pulse-wa 2.6s ease-in-out infinite;
}

@keyframes pulse-wa {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(37, 211, 102, 0);
    }
}

/* En teléfono el CTA no puede desaparecer al pasar el hero: barra fija
   abajo con las dos vías. Reemplaza a la burbuja, no se suma a ella. */
.cta-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 85;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 95%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--rule);
}

.cta-bar .btn {
    padding: 16px 18px;
    font-size: 1.0625rem;
}

@media (min-width: 900px) {
    .cta-bar {
        display: none;
    }

    .wa {
        display: inline-flex;
    }
}

/* Que la barra no tape el final de la página */
@media (max-width: 899px) {
    body {
        padding-bottom: 96px;
    }
}

/* ---------- 17. Movimiento ---------- */

/* Se esconde bajo `.js` a propósito: la clase la pone el script del <head>.
   Sin JS —bloqueado, con error, un crawler que no lo ejecuta— el contenido
   se ve igual. Esconder por CSS y revelar por JS es cómo una landing
   termina en blanco el día que el script falla. */
.js .reveal {
    opacity: 0;
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-in {
    opacity: 1;
}

/* El desplazamiento va aparte y NO alcanza a `.reveal--fade`. Ese modificador
   es para los elementos cuyo `transform` ya está tomado por otra cosa —hoy,
   las tarjetas que se inclinan con el cursor—: una regla `.js .reveal.is-in`
   le gana en especificidad a `.svc` y les borraba la inclinación entera al
   terminar de aparecer. Esos entran moviendo su propia variable. */
.js .reveal:not(.reveal--fade) {
    transform: translateY(18px);
}

.js .reveal.is-in:not(.reveal--fade) {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }

    [data-seq] {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .aurora {
        animation: none;
    }

    .plan__bar i,
    .ring__value {
        transition: none;
    }
}

/* ---------- 18. Telaraña de fondo ----------
   Canvas fijo detrás de todo: puntos metalizados unidos por hilos finos.
   Es deliberadamente tenue —se nota moviendo la cabeza, no mirando fijo—
   y se apaga sola con prefers-reduced-motion y cuando la pestaña no está
   a la vista, así no gasta batería de fondo. */

#web-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Se desvanece hacia abajo: arriba acompaña al hero, abajo no compite
       con el formulario. */
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
}

/* El contenido va por encima del canvas. Sin esto, la telaraña se dibuja
   sobre el texto en vez de detrás.

   OJO — acá sólo van elementos que están en el flujo normal. Poner
   `position: relative` sobre .header, .mobile-nav, .wa, .cta-bar o .modal
   pisaba el `position: fixed` que ya traen más arriba (esta regla viene
   después y gana): la cabecera dejaba de ser fija y la burbuja de WhatsApp
   caía suelta al final del documento en vez de quedar abajo a la derecha.
   Todos ellos ya declaran su propio z-index, así que no necesitan nada acá. */
main,
.footer {
    position: relative;
    z-index: 1;
}

/* ---------- 19. Modal de Nosotros ----------
   Vive en el encabezado, no en el scroll: el ADN de la empresa no tiene
   por qué frenar a alguien que vino a resolver un problema. El contenido
   igual está en el HTML, así que Google lo lee. */

.modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--gap);
}

.modal.is-open {
    display: flex;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 14, 0.72);
    backdrop-filter: blur(6px);
}

.modal__box {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: calc(100dvh - 2 * var(--gap));
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--rule);
    animation: modal-in 0.3s var(--ease);
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-2);
    position: sticky;
    top: 0;
}

.modal__body {
    padding: 34px 30px 32px;
}

.modal__body .purpose__line {
    margin-bottom: 32px;
}

/* Misión y visión, una al lado de la otra */
.mv {
    display: grid;
    gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 620px) {
    .mv {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mv h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.mv p {
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* ---------- Aviso de mensaje enviado ----------
   Reusa .modal —fondo, foco atrapado, Escape— y sólo cambia la caja: acá
   no hay cabecera ni scroll, son cuatro líneas y una salida. */

.sent__box {
    max-width: 480px;
    padding: 40px 34px 34px;
    text-align: center;
    border-top: 3px solid var(--ok);
}

.sent__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
    border-radius: 50%;
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 16%, transparent);
}

.sent__text {
    margin: 14px 0 28px;
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* El enlace de WhatsApp del caso "incidente en curso" entra por acá. */
.sent__text .link {
    font-size: inherit;
}

/* ---------- 20. Consentimiento del formulario ----------
   La casilla es un control real, no un adorno: tiene que verse, tiene que
   poder tocarse con el pulgar y tiene que marcarse en rojo si falta. */

.form__check {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.form__check input {
    width: 21px;
    height: 21px;
    flex: none;
    /* A la altura de la primera línea del texto, no centrada entre las dos */
    margin: 3px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.form__check label {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--muted);
    cursor: pointer;
}

.form__check .link {
    font-size: inherit;
}

/* El aria-invalid lo pone app-v5.js. Un borde no se ve sobre una casilla
   nativa, así que acá el aviso es un anillo. */
.form__check input[aria-invalid='true'] {
    outline: 3px solid var(--crit);
    outline-offset: 3px;
}

/* ---------- Verificación anti-bot ----------
   Un bloque aparte y no un botón suelto: hay que leerse como un paso del
   formulario, no como una segunda acción que compite con "Enviar". */

.verify {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding: 18px;
    border: 1px solid var(--rule);
    background: var(--surface);
}

.verify__btn {
    padding: 13px 22px;
    font-size: 1rem;
}

/* El tilde vive dentro del escudo y aparece recién cuando llegó el token:
   el estado se ve sin leer, que es de lo que se trata. */
.verify__tick {
    opacity: 0;
    transition: opacity 0.18s var(--ease);
}

.verify__btn.is-busy {
    opacity: 0.6;
    cursor: progress;
}

/* Verificado. El botón sigue enfocable —lo deshabilita el JS por lógica,
   no por atributo— así que también hay que apagarle el hover. */
.verify__btn.is-done,
.verify__btn.is-done:hover {
    border-color: var(--ok);
    color: var(--ok);
    cursor: default;
}

.verify__btn.is-done .verify__tick {
    opacity: 1;
}

.verify__note {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--muted);
}

/* ---------- 21. Documento legal (legales.html) ---------- */

/* La cabecera es fija: sin este aire el título arranca abajo de ella. */
.legal {
    padding-top: calc(var(--section-y) + 44px);
}

.legal .head {
    margin-bottom: 20px;
}

.legal__meta {
    font-size: 0.9375rem;
    color: var(--muted);
    margin-bottom: 30px;
}

/* Índice: el documento es largo y casi nadie lo lee entero */
.legal__toc {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 34px;
    margin-bottom: 56px;
    border-bottom: 1px solid var(--rule);
}

.legal__toc a {
    padding: 10px 16px;
    border: 1px solid var(--rule);
    background: var(--surface);
    font-size: 1rem;
    color: var(--muted);
    transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.legal__toc a:hover {
    border-color: var(--accent-lift);
    color: var(--text);
}

/* 72ch: un texto legal se lee de corrido y a más ancho se pierde el renglón */
.legal__doc {
    max-width: 72ch;
    margin-bottom: 68px;
    /* Que el ancla no quede tapada por la cabecera fija */
    scroll-margin-top: 110px;
}

.legal__doc>h2 {
    margin-bottom: 26px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--accent);
}

.legal__doc h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 34px 0 10px;
}

.legal__doc p {
    color: var(--muted);
    margin-bottom: 14px;
}

.legal__doc strong {
    color: var(--text);
    font-weight: 600;
}

/* El resumen en una línea de cada documento: lo que lee quien no va a leer
   el resto. Por eso va con el color del cuerpo y no con el apagado. */
.legal__lead {
    padding: 18px 20px;
    border-left: 3px solid var(--accent);
    background: var(--surface);
    font-size: 1.0625rem;
    margin-bottom: 24px;
}

.legal__doc .legal__lead {
    color: var(--text);
}

.legal__list {
    display: grid;
    gap: 9px;
    margin-bottom: 18px;
}

.legal__list li {
    position: relative;
    padding-left: 22px;
    color: var(--muted);
}

.legal__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 7px;
    height: 7px;
    background: var(--accent-lift);
}

/* Las leyendas que la ley obliga a reproducir textuales van en su propia
   caja: no son nuestras palabras y no conviene que se confundan. */
.legal__note {
    padding: 20px 22px;
    border: 1px solid var(--rule);
    background: var(--surface);
    margin: 22px 0;
}

.legal__note p:last-child {
    margin-bottom: 0;
}

.legal__table {
    overflow-x: auto;
    margin-bottom: 18px;
}

.legal__table table {
    width: 100%;
    min-width: 540px;
    border-collapse: collapse;
}

.legal__table th,
.legal__table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
}

.legal__table th {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}

.legal__table td {
    color: var(--muted);
    vertical-align: top;
}

.legal__doc code {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    color: var(--accent-lift);
}

/* Fila legal del pie, en las dos páginas */
.footer__law {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}