:root{
      --ink:#071524;
      --ink-2:#0d2236;
      --muted:#647487;
      --line:#dbe4eb;
      --paper:#f6f9fb;
      --white:#ffffff;
      --accent:#5ce1b9;
      --accent-2:#8df0d2;
      --warning:#f4b942;
      --shadow:0 24px 60px rgba(7,21,36,.12);
      --radius:22px;
      --max:1180px;
    }
    *{box-sizing:border-box}
    /* scroll-padding-top: el header ahora es `position:fixed` (para poder
       quedar transparente sobre el hero), asi que ya no reserva su propio
       hueco en el flujo -- sin esto, saltar a un ancla (#funcionalidades,
       #faq...) dejaria los primeros ~74px de esa seccion tapados debajo
       del header. */
    /* red de seguridad: si algun elemento suelto fuerza mas ancho del
       disponible (ya nos ha pasado con la flecha del carrusel y con la
       tabla del mockup de ERP), esto evita que arrastre a TODA la pagina
       a poder hacer scroll horizontal -- mejor recortar ese elemento que
       dejar que toda la landing se desplace en movil. */
    html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:hidden}
    body{
      margin:0;
      color:var(--ink);
      background:var(--white);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      line-height:1.55;
      -webkit-font-smoothing:antialiased;
    }
    a{color:inherit;text-decoration:none}
    button,input,textarea,select{font:inherit}
    .container{width:min(var(--max),calc(100% - 40px));margin:auto}
    .eyebrow{
      display:inline-flex;align-items:center;gap:.55rem;
      font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
      color:#1a6f59;
    }
    .eyebrow:before{content:"";width:28px;height:2px;background:var(--accent);border-radius:2px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
      min-height:48px;padding:0 20px;border-radius:999px;border:1px solid transparent;
      font-weight:800;cursor:pointer;transition:.2s ease;white-space:nowrap;
    }
    .btn-primary{background:var(--accent);color:var(--ink)}
    .btn-primary:hover{transform:translateY(-2px);background:var(--accent-2)}
    .btn-dark{background:var(--ink);color:var(--white)}
    .btn-dark:hover{transform:translateY(-2px);background:var(--ink-2)}
    .btn-ghost{border-color:rgba(255,255,255,.25);color:var(--white)}
    .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
    /* mismo aspecto que el .pill de mas abajo (fondo/borde/color), para el
       boton "Solicitar demo" del header */
    .btn-pill{background:rgba(92,225,185,.12);border-color:rgba(92,225,185,.28);color:var(--accent-2)}
    .btn-pill:hover{border-color:var(--accent);background:rgba(92,225,185,.2)}

    /* boton "Solicitar demo" flotante: existe en todo el rango "compacto"
       de la cabecera (<=1180px, el mismo ancho en el que aparece la
       hamburguesa -- ver header .btn-pill mas abajo, se oculta ahi por
       igual), y solo se hace visible una vez el hero ha desaparecido de
       la pantalla (clase .visible, ver el IntersectionObserver en el JS).
       Mismo aspecto sutil que el header cuando esta en scroll, no la
       barra solida de antes. */
    .cta-flotante{display:none}
    @media(max-width:1180px){
      .cta-flotante{
        display:flex;justify-content:center;
        position:fixed;left:0;right:0;bottom:18px;z-index:45;
        opacity:0;transform:translateY(10px);pointer-events:none;
        transition:opacity .25s ease,transform .25s ease;
      }
      .cta-flotante.visible{opacity:1;transform:translateY(0);pointer-events:auto}
      .cta-flotante .btn{
        background:rgba(5,14,23,.72);backdrop-filter:blur(14px);
        border-color:rgba(92,225,185,.35);color:var(--accent-2);
        box-shadow:0 10px 28px rgba(0,0,0,.28);
      }
    }
    @media(prefers-reduced-motion:reduce){
      .cta-flotante{transition:none}
    }
    .pill{
      display:inline-flex;align-items:center;gap:.5rem;
      background:rgba(92,225,185,.12);border:1px solid rgba(92,225,185,.28);
      color:var(--accent-2);padding:8px 12px;border-radius:999px;font-size:.8rem;font-weight:800;
    }
    /* Header transparente sobre el hero (fondo oscuro, letras blancas) --
       al hacer scroll fuera de su posicion inicial pasa a fondo negro
       translucido con blur (clase .header-scrolled, ver el script al final
       del body). Si se vuelve arriba, la clase se quita y vuelve a ser
       transparente del todo -- no es una animacion de una sola vez. */
    header{
      position:fixed;top:0;left:0;right:0;z-index:50;
      background:transparent;backdrop-filter:none;
      border-bottom:1px solid transparent;
      transition:background .25s ease,backdrop-filter .25s ease,border-color .25s ease;
    }
    header.header-scrolled{
      background:rgba(5,14,23,.65);backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(255,255,255,.1);
    }
    .nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:14px}
    /* Botones del header mas compactos que los del resto de la pagina --
       con "Iniciar sesion" + "Solicitar demo" a la vez, el tamano normal
       del .btn no cabe junto a los 5 enlaces dentro del contenedor
       (que nunca supera 1180px, ni con la pantalla mas ancha). */
    .nav > .btn{min-height:40px;padding:0 14px;font-size:.85rem}
    .brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.04em;font-size:1.15rem;color:#fff}
    .brand-logo{height:34px;width:auto;display:block}
    nav{display:flex;align-items:center;gap:16px;font-size:.82rem;font-weight:700;color:#fff;white-space:nowrap}
    nav a:hover{color:var(--accent)}
    .menu-btn{display:none;background:none;border:0;font-size:1.5rem;color:#fff;cursor:pointer}

    /* Panel del menu movil: oculto por defecto, colgando justo debajo de la
       cabecera (misma altura fija de 74px). El boton .menu-btn solo se ve
       por debajo de 1180px (ver breakpoints al final); sin este panel el
       boton no tenia ningun sitio al que abrir. */
    .menu-movil{
      display:none;position:fixed;left:0;right:0;top:74px;z-index:49;
      background:rgba(5,14,23,.97);backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(255,255,255,.1);
      max-height:calc(100vh - 74px);overflow-y:auto;
    }
    .menu-movil.abierto{display:block}
    .menu-movil nav{display:flex;flex-direction:column;gap:0;width:min(var(--max),calc(100% - 40px));margin:auto;padding:8px 0 18px}
    .menu-movil nav a{
      padding:15px 4px;font-size:1rem;font-weight:700;color:#fff;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .menu-movil nav a:hover{color:var(--accent)}

    .hero{
      position:relative;overflow:hidden;
      /* Llena siempre la pantalla inicial (efecto "foto a pantalla completa"),
         sin depender de cuanto contenido/alto tenga la tarjeta de dentro --
         antes, al quitar la tarjeta grande, el hero se quedaba mas corto y la
         imagen ya no cubria el alto completo. */
      /* un poco mas de 100vh: el redondeo de subpixel del navegador a veces
         deja una linea de 1-2px del fondo de la pagina (blanco) asomando
         justo en el borde inferior -- con esto el hero (y su imagen de
         fondo, que usa cover) siempre se pasa un poco, sin hueco visible. */
      min-height:calc(100vh + 2px);display:flex;align-items:center;
      background:
        radial-gradient(circle at 75% 25%,rgba(92,225,185,.18),transparent 26rem),
        linear-gradient(135deg,#06121f,#0b2236 65%,#0d2c3c);
      color:var(--white);
      padding:110px 0 68px;
    }
    .hero:after{
      content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
      background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
      background-size:44px 44px;
      mask-image:linear-gradient(to bottom,black,transparent 80%);
    }
    /* al quitar el grid de 2 columnas, el bloque de texto se quedo sin un
       limite de ancho propio y crecia hasta pisar el camion de la foto --
       se lo devuelve aqui, igual que tenia antes con la columna del 54%. */
    .hero-grid{position:relative;z-index:2}
    .hero-grid > div:first-child{max-width:640px}

    /* las 3 cajas de la cuenta atras, en una sola caja con blur (no una por
       cada una), en la esquina inferior derecha del hero */
    .countdown-disperso{
      position:absolute;right:32px;bottom:32px;z-index:5;
      display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end;
      background:rgba(5,14,23,.55);backdrop-filter:blur(6px);
      border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 26px rgba(0,0,0,.3);
      border-radius:16px;padding:18px 22px;
    }
    .countdown-disperso .countbox{
      min-width:80px;background:none;border:none;box-shadow:none;border-radius:0;
      padding:0 2px 10px;border-bottom:2px solid var(--accent);
    }
    .countdown-disperso .countbox span{color:#fff}
    .hero h1{
      font-size:clamp(2.7rem,6vw,5.4rem);line-height:.96;letter-spacing:-.065em;margin:18px 0 24px;max-width:800px;
    }
    .hero h1 em{font-style:normal;color:var(--accent)}
    .hero-lead{font-size:1.16rem;color:#c8d6e0;max-width:700px;margin:0 0 30px}
    /* version resumida del hero-lead, solo para movil (ver breakpoint mas
       abajo) -- el parrafo largo entero de golpe agobia en pantallas
       pequeñas. */
    .hero-lead-corta{display:none}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}

    .doc{margin-top:18px;background:white;color:var(--ink);border-radius:18px;padding:20px 22px;min-height:320px}

    /* cabecera del documento: solo el titulo, sin caja -- las cajas van debajo, en rejilla */
    .doc-titulo-doc{font-size:.9rem;font-weight:800;color:#1f3864;line-height:1.3;border-bottom:1px solid var(--line);padding-bottom:12px}

    /* rejilla de cajas, cada una con su titulo -- idea del documento, no el detalle */
    .cajas-doc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
    .caja-doc{border:1.5px solid var(--line);border-radius:8px;padding:9px 11px}
    .caja-doc .cd-titulo{font-size:.62rem;font-weight:800;color:#1f3864;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
    .caja-doc .cd-valor{font-size:.8rem;font-weight:700}

    /* total peso -- fila destacada, igual que .peso-tabla del PDF real */
    .peso-total{margin-top:10px;display:flex;justify-content:space-between;align-items:center;background:#d9d9d9;border:1px solid #c7c7c7;border-radius:6px;padding:7px 12px}
    .peso-total span{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#3d4a44}
    .peso-total b{font-size:.86rem}

    .doc-footer{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.72rem;color:#667788;display:flex;align-items:center;gap:12px}
    .countdown{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .countbox{padding:12px;background:rgba(255,255,255,.07);border-radius:14px;text-align:center}
    .countbox b{font-size:1.35rem;color:var(--accent);display:block}
    .countbox span{font-size:.67rem;color:#9db0bd;text-transform:uppercase;letter-spacing:.08em}

    .trustbar{border-bottom:1px solid var(--line);background:#fbfcfd}
    .trustbar .container{display:grid;grid-template-columns:repeat(4,1fr);padding:22px 0}
    .trustitem{padding:0 24px;border-right:1px solid var(--line)}
    .trustitem:first-child{padding-left:0}.trustitem:last-child{border-right:0}
    .trustitem b{display:block;font-size:.85rem}.trustitem span{font-size:.74rem;color:var(--muted)}

    section{padding:76px 0}
    .section-head{max-width:760px;margin-bottom:34px}
    .section-head h2{font-size:clamp(2rem,4vw,3.7rem);line-height:1.04;letter-spacing:-.05em;margin:14px 0 16px}
    .section-head p{font-size:1.04rem;color:var(--muted);margin:0}
    .problem{background:var(--paper)}
    .problem-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:stretch}
    /* mismo motivo que en .axertia-experience-top: sin esto, un item de
       grid no se encoge mas alla del ancho minimo de su contenido aunque
       su columna sea "fr", y eso puede arrastrar a toda la pagina a ser
       mas ancha que la pantalla en movil. */
    .problem-grid > *{min-width:0}
    .integration-grid > *{min-width:0}
    .faq-grid > *{min-width:0}
    .deadline{
      background:var(--ink);color:white;border-radius:var(--radius);padding:34px;position:relative;top:auto;
      display:flex;flex-direction:column;justify-content:space-between;min-height:100%;
      box-shadow:0 18px 48px rgba(7,21,36,.14);
    }
    .deadline .date{font-size:clamp(3rem,7vw,5.6rem);line-height:.88;letter-spacing:-.07em;color:var(--accent);font-weight:950;margin:18px 0}
    .deadline p{color:#b9cad5;margin:0}
    .deadline-points{display:grid;gap:10px;margin-top:24px}
    .deadline-point{
      display:flex;gap:10px;align-items:flex-start;
      padding:12px 14px;border-radius:14px;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
      color:#d5e1e8;font-size:.84rem
    }
    .deadline-point .mini-check{
      width:22px;height:22px;border-radius:50%;
      display:grid;place-items:center;
      background:rgba(92,225,185,.16);color:var(--accent);font-weight:900;flex:0 0 auto
    }

    /* carrusel del deadline: alterna entre el plazo legal y el documento.
       Las dos slides se apilan en la MISMA celda de grid (grid-area:1/1)
       en vez de display:none -- asi el contenedor siempre mide lo que
       necesita la mas alta de las dos, y la tarjeta (y la fila entera del
       grid, por el align-items:stretch de .problem-grid) no cambia de
       altura cada vez que se pulsa la flecha. visibility (no opacity)
       para que la slide oculta no reciba clics ni foco. */
    .deadline-carrusel{display:grid}
    .deadline-slide{grid-area:1/1;visibility:hidden}
    .deadline-slide.activa{visibility:visible}
    .deadline-nav{display:flex;align-items:center;gap:10px;margin-top:18px}
    .carrusel-flecha{
      position:absolute;top:38px;right:-24px;
      width:52px;height:52px;border-radius:50%;border:none;background:var(--accent);
      color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;
      display:flex;align-items:center;justify-content:center;padding-bottom:2px;
      box-shadow:0 10px 24px rgba(7,21,36,.3);z-index:3;
    }
    .carrusel-flecha:hover{background:var(--accent-2)}
    /* .container reduce su margen lateral a 20px en cuanto el viewport baja
       de 1220px (var(--max) + 40px, ver .container mas arriba) -- por
       debajo de eso el -24px de la flecha ya no cabe dentro de ese margen y
       se saldria de la pantalla (overflow horizontal). */
    @media(max-width:1220px){
      .carrusel-flecha{right:-16px}
    }
    .carrusel-puntos{display:flex;gap:6px}
    .carrusel-puntos .punto{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}
    .carrusel-puntos .punto.activo{background:var(--accent)}

    .requirements{
      display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
    }
    .req{
      background:white;border:1px solid var(--line);border-radius:18px;padding:20px;
      display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
      min-height:142px; box-shadow:0 10px 24px rgba(7,21,36,.04);
    }
    .req-check{
      width:40px;height:40px;border-radius:50%;
      background:#e9fff8;border:1px solid #cfe7df;color:#17634f;
      display:grid;place-items:center;font-weight:950;font-size:1rem;flex:0 0 auto;
    }
    .req h3{font-size:1rem;line-height:1.22;margin:0 0 7px}
    .req p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.55}

    .workflow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px}
    .step{position:relative;padding:22px 18px;border:1px solid var(--line);border-radius:18px;background:white}
    .step-icon{width:42px;height:42px;border-radius:13px;background:var(--ink);color:var(--accent);display:grid;place-items:center;margin-bottom:24px;font-weight:900}
    .step h3{font-size:.95rem;margin:0 0 7px}.step p{font-size:.78rem;color:var(--muted);margin:0}

    .features{background:var(--ink);color:white}
    .features .section-head p{color:#aebfca}
    .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .feature{
      min-height:230px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045);
      border-radius:20px;padding:24px;transition:.2s ease;
    }
    .feature:hover{transform:translateY(-3px);border-color:rgba(92,225,185,.5)}
    .feature .tag{font-size:.67rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:900}
    .feature h3{font-size:1.15rem;margin:14px 0 8px}.feature p{font-size:.86rem;color:#aebfca;margin:0}
    .feature .ico{font-size:1.55rem}

    .integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
    .erp-panel{
      border:1px solid var(--line);border-radius:26px;padding:22px;background:linear-gradient(180deg,#fff,#f6f9fb);box-shadow:var(--shadow)
    }
    .erp-window{border:1px solid var(--line);border-radius:17px;overflow:hidden;background:white}
    .erp-toolbar{height:44px;background:#eef3f6;display:flex;align-items:center;gap:7px;padding:0 14px}
    .circle{width:9px;height:9px;border-radius:50%;background:#c3ced6}
    .erp-body{display:grid;grid-template-columns:150px 1fr;min-height:320px}
    .sidebar{background:#091b2a;color:#bdd0db;padding:18px 12px;font-size:.72rem}
    .sidebar div{padding:9px 10px;border-radius:8px;margin-bottom:3px}.sidebar .active{background:rgba(92,225,185,.15);color:var(--accent)}
    .table{padding:18px}
    .table h4{margin:0 0 18px;font-size:.92rem}
    .table-row{display:grid;grid-template-columns:1.3fr .8fr .8fr;gap:8px;padding:11px 6px;border-bottom:1px solid #eef2f4;font-size:.7rem}
    /* codigos como "HR-2026-0182" no tienen ningun espacio donde partir la
       linea -- sin min-width:0 su ancho de texto completo se propaga hacia
       arriba (.table-row > .table > .erp-body > ... > toda la pagina) y
       fuerza scroll horizontal en movil. Se trunca con "..." en vez de
       ensanchar la fila. */
    .table-row > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .table-row .status{width:auto;max-width:100%}
    .status{display:inline-flex;width:max-content;background:#eafff8;color:#206751;padding:3px 7px;border-radius:999px;font-weight:800}
    .bullets{display:grid;gap:13px;margin-top:26px}
    .bullet{display:flex;gap:12px;align-items:flex-start}.check{flex:0 0 auto;width:25px;height:25px;border-radius:50%;background:#e9fff8;color:#17634f;display:grid;place-items:center;font-weight:900}
    .bullet p{margin:0;color:var(--muted);font-size:.9rem}.bullet b{color:var(--ink)}

    .audience{background:#effaf6}
    .audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .persona{background:white;border-radius:20px;padding:26px;border:1px solid #d9eee7}
    .persona h3{font-size:1.2rem;margin:12px 0 8px}.persona p{color:var(--muted);font-size:.88rem}
    .persona ul{padding-left:18px;color:#526475;font-size:.82rem}

    .seo-cluster{display:grid;grid-template-columns:1fr 1fr;gap:30px}
    .seo-card{border:1px solid var(--line);border-radius:22px;padding:26px}
    .seo-card h3{margin-top:0}
    .keywords{display:flex;flex-wrap:wrap;gap:8px}
    .keyword{padding:7px 10px;border-radius:999px;background:var(--paper);font-size:.76rem;font-weight:800;color:#44586a}

    .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px}
    .faq-list{border-top:1px solid var(--line)}
    details{border-bottom:1px solid var(--line);padding:19px 0}
    summary{cursor:pointer;font-weight:850;list-style:none;display:flex;justify-content:space-between;gap:20px}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+";font-size:1.2rem}
    details[open] summary:after{content:"–"}
    details p{color:var(--muted);font-size:.9rem;max-width:760px}

    .cta{
      position:relative;overflow:hidden;padding:100px 0;
    }
    /* foto de fondo (muelle de carga de noche) con degradado oscuro para
       que el texto de la izquierda se lea bien -- ocupa la seccion ENTERA
       (no solo la tarjeta), por eso vive en .cta y no en .cta-box. */
    .cta-fondo{
      position:absolute;inset:0;z-index:0;
      background-image:
        linear-gradient(100deg,rgba(4,10,18,.92) 0%,rgba(4,10,18,.72) 42%,rgba(4,10,18,.32) 68%,rgba(4,10,18,.18) 100%),
        url('/landing/formulario.webp');
      background-size:cover;background-position:center;
    }
    .cta-box{
      color:white;
      display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:center;
      position:relative;
    }
    .cta-pitch{position:relative;z-index:2;padding:60px 56px;min-width:0}
    .cta-pitch h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.06;letter-spacing:-.05em;margin:18px 0 14px;max-width:15ch}
    .cta-pitch p{color:#b7c8d3;margin:0;max-width:38ch}

    /* tarjeta de cristal (glassmorfismo) sobre la foto */
    .cta-glass-wrap{position:relative;z-index:2;padding:40px 48px;min-width:0}
    .cta-glass{
      background:rgba(255,255,255,.09);
      -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
      border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:30px;
      box-shadow:0 25px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);
    }

    /* interruptor Demo/Alta */
    .interruptor{display:flex;gap:8px;margin-bottom:20px}
    .interruptor button{
      flex:1;min-height:42px;border-radius:999px;cursor:pointer;
      border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);
      color:#c8d6e0;font:inherit;font-weight:800;font-size:.84rem;
      transition:background .2s ease,color .2s ease,border-color .2s ease;
    }
    .interruptor button.activo{background:var(--accent);color:var(--ink);border-color:transparent}

    /* los dos formularios (demo/alta) se apilan en el mismo hueco -- solo
       se ve el que tiene .activo */
    .panel-cta{display:none;position:relative;z-index:2}
    .panel-cta.activo{display:grid;gap:10px}
    .panel-cta h3{margin:0 0 2px;font-size:1.15rem;letter-spacing:-.01em}
    .cta-form-sub{margin:0 0 4px;color:#c8d6e0;font-size:.82rem;line-height:1.5}
    .fila-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .field{display:flex;flex-direction:column;gap:5px}
    .field label{font-size:.68rem;font-weight:700;letter-spacing:.03em;color:#a9bdc9}
    .field label .requerido{color:var(--accent);font-weight:800}
    input,select,textarea{
      width:100%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
      color:white;border-radius:11px;padding:11px 13px;outline:none;
      transition:border-color .15s ease,background .15s ease;
    }
    input::placeholder,textarea::placeholder{color:#c3d3dc;opacity:.65}
    input:focus,select:focus,textarea:focus{border-color:var(--accent);background:rgba(255,255,255,.13)}
    select{color:#dce6ec}
    /* el desplegable nativo del <select> lo pinta el navegador/SO, no nuestro
       CSS -- suele salir sobre fondo blanco pese al tema oscuro del campo, y
       sin esto el texto salia gris clarito casi ilegible sobre ese blanco. */
    select option{color:var(--ink);background:#fff}
    /* resize:none a proposito: .cta-fondo es background-size:cover sobre
       toda la seccion -- si el textarea crece, crece #contacto entero, y
       "cover" recalcula el recorte/zoom de la foto de fondo en cada
       cambio de alto. Sin resize no hay como disparar ese "zoom". */
    textarea{min-height:60px;resize:none}
    /* honeypot antispam (igual que pide el backend): oculto para personas,
       visible para bots que rellenan todos los <input> -- fuera del orden
       de tabulado, sin display:none (algunos bots lo detectan igual). */
    .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
    .form-note{font-size:.67rem;color:#8ea2af}
    /* error de un campo concreto (viene del 422 del backend, detail[].msg,
       ya en español) -- se inserta por JS justo debajo del input. */
    .field-error{margin:2px 0 0;font-size:.72rem;color:#ff9b9b;font-weight:600}
    .field.con-error input,.field.con-error select,.field.con-error textarea{
      border-color:#ff9b9b;background:rgba(255,120,120,.08);
    }
    /* mensaje general del formulario: fallo de red, envio correcto, o
       cualquier error del 422 que no venga atado a un campo concreto. */
    .form-status{font-size:.78rem;font-weight:700;margin-top:4px;display:none}
    .form-status.visible{display:block}
    .form-status.exito{color:var(--accent-2)}
    .form-status.error{color:#ff9b9b}

    footer{background:#050e17;color:#9fb0bc;padding:64px 0 28px}
    .footer-top{display:flex;gap:56px;flex-wrap:wrap;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08)}
    .footer-brand{flex:0 0 240px}
    .footer-brand img{height:76px;width:auto;display:block;filter:brightness(0) invert(1)}
    .footer-brand p{margin:20px 0 0;font-size:.82rem;color:#7c8fa0;line-height:1.55}
    .footer-audiencia{flex:1 1 300px;max-width:400px;padding-top:6px}
    .footer-microcopy{font-size:.82rem;color:#7c8fa0;line-height:1.55;margin:0}
    .footer-audiencia .hero-proof{margin-top:16px;font-size:.74rem}
    .footer-cols{display:flex;gap:52px;flex-wrap:wrap;margin-left:auto}
    .footer-col{display:flex;flex-direction:column;gap:11px}
    .footer-col-titulo{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#54677a;margin-bottom:3px}
    .footer-col a{font-size:.86rem;color:#c3d1db;font-weight:600}
    .footer-col a:hover{color:var(--accent)}
    .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px}
    .footer-bottom small{font-size:.74rem;color:#647688}
    .footer-top-link{font-size:.78rem;font-weight:700;color:#c3d1db}
    .footer-top-link:hover{color:var(--accent)}
    .legal-note{
      margin-top:22px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px;
      font-size:.66rem;color:#718491;max-width:900px;
    }
    @media(max-width:760px){
      .footer-top{flex-direction:column;gap:28px}
      /* flex:0 0 240px / 1 1 300px son medidas de ANCHO pensadas para la
         fila de escritorio -- al pasar .footer-top a columna, ese mismo
         valor de flex-basis pasa a fijar la ALTURA (el eje principal
         cambia con flex-direction), dejando un hueco enorme debajo del
         contenido real de cada bloque. Se resetea a auto. */
      .footer-brand,.footer-audiencia{flex:0 0 auto;max-width:none}
      .footer-cols{gap:28px}
      /* el separador "|" entre frases del proof-line queda huerfano y
         suelto en su propia linea cuando el texto se envuelve en movil. */
      .footer-audiencia .proof-divider{display:none}
    }


    .by-axertia{
      display:inline-flex;align-items:center;gap:9px;margin-left:4px;padding-left:13px;
      border-left:1px solid rgba(255,255,255,.3);font-size:.72rem;font-weight:800;letter-spacing:.02em;color:rgba(255,255,255,.75);
    }
    .axertia-word{font-weight:950;letter-spacing:-.045em;color:#fff;font-size:.88rem}
    .hero-proof{
      display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 0;
      color:#b7c8d3;font-size:.78rem;font-weight:700;
    }
    .hero-proof b{color:white}
    .proof-divider{width:1px;height:18px;background:rgba(255,255,255,.2)}
    .axertia-section{background:#ffffff}
    .axertia-lockup{
      display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:start;
      border:1px solid var(--line);border-radius:28px;padding:44px;
      background:linear-gradient(135deg,#f7fafb,#ffffff 55%,#eefbf7);
      box-shadow:none;
    }
    .axertia-copy{padding-top:4px}
    .axertia-copy h2{max-width:690px}
    .axertia-copy p{max-width:720px}
    .axertia-visual{align-self:start}
    .axertia-visual .axertia-seal{min-height:0}
    .axertia-visual .axertia-seal img{aspect-ratio:818/645;object-fit:cover}
    
    .axertia-seal{
      min-height:360px;border-radius:23px;overflow:hidden;
      background:#071524;border:1px solid var(--line);
      box-shadow:0 22px 60px rgba(7,21,36,.12);
      display:block;padding:0;
    }
    .axertia-seal img{
      display:block;width:100%;height:100%;object-fit:cover;
    }
    .endorsed{
      display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;
      background:#effaf6;border:1px solid #d9eee7;color:#254d41;font-size:.79rem;font-weight:800;
      margin-top:22px;width:max-content;max-width:100%;
    }
    .endorsed .mini-logo{font-weight:950;letter-spacing:-.04em;color:#10283b}
    .client-context{
      margin-top:22px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem
    }
    .why-flow{
      margin-top:42px;padding:34px 28px 28px;border-radius:24px;
      background:var(--ink);color:white;position:relative;overflow:hidden;
      box-shadow:0 22px 60px rgba(7,21,36,.13)
    }
    .why-flow:before{
      content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
      background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
      background-size:34px 34px
    }
    .why-flow-head{position:relative;z-index:2;margin-bottom:28px}
    .why-flow-head .eyebrow{color:var(--accent)}
    .why-flow-head h3{
      margin:12px 0 0;font-size:clamp(1.45rem,3vw,2.15rem);
      letter-spacing:-.04em;line-height:1.08
    }
    .why-flow-track{
      position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:0
    }
    .why-flow-track:before{
      content:"";position:absolute;left:7%;right:7%;top:25px;height:2px;
      background:linear-gradient(90deg,var(--accent),rgba(92,225,185,.28));
      z-index:0
    }
    .why-node{
      position:relative;z-index:1;padding:0 18px;text-align:left
    }
    .why-node:first-child{padding-left:0}
    .why-node:last-child{padding-right:0}
    .why-node-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
    .why-node-num{
      flex:0 0 52px;width:52px;height:52px;border-radius:50%;
      display:grid;place-items:center;background:var(--accent);color:var(--ink);
      font-weight:950;font-size:1rem;box-shadow:0 0 0 7px rgba(92,225,185,.09)
    }
    .why-node-arrow{
      margin-left:auto;color:var(--accent);font-size:1.25rem;font-weight:900
    }
    .why-node:last-child .why-node-arrow{display:none}
    .why-node b{display:block;font-size:1rem;margin-bottom:8px}
    .why-node p{margin:0;color:#afc1cc;font-size:.82rem;line-height:1.55}


    .axertia-section{background:#ffffff}
    .axertia-experience{
      border:none;
      border-radius:30px;
      padding:44px;
      background:#ffffff;
      box-shadow:none;
    }
    .axertia-experience-top{
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:48px;
      align-items:start;
    }
    /* por defecto un item de grid no se encoge por debajo del ancho minimo
       de su contenido (min-width:auto), aunque su columna sea "fr" -- eso
       es lo que estaba arrastrando a TODA la pagina a ser mas ancha que la
       pantalla en movil (la tarjeta de Axertia y su columna de texto no se
       "hacian mas finas" porque el grid nunca dejaba que su fr se encogiera
       de verdad). Con min-width:0 el fr manda y el contenido de dentro, que
       ya es responsive, se ajusta al ancho real disponible. */
    .axertia-experience-visual,
    .axertia-experience-copy{
      min-width:0;
    }
    .axertia-experience-visual{
      align-self:start;
    }
    .axertia-experience-visual .axertia-seal{
      min-height:0;
      border-radius:24px;
      overflow:hidden;
      background:#071524;
      border:1px solid rgba(7,21,36,.12);
      box-shadow:0 18px 46px rgba(7,21,36,.12);
    }
    .axertia-experience-visual .axertia-seal img{
      display:block;
      width:100%;
      aspect-ratio:818/645;
      object-fit:cover;
    }
    .axertia-experience-copy{
      padding-top:4px;
    }
    .axertia-experience-copy h2{
      font-size:clamp(2.1rem,4vw,3.7rem);
      line-height:1.02;
      letter-spacing:-.055em;
      margin:14px 0 18px;
      max-width:760px;
    }
    .axertia-experience-copy > p{
      color:var(--muted);
      font-size:1rem;
      margin:0;
      max-width:780px;
    }

    .axertia-method{
      margin-top:38px;
      padding:34px 28px 30px;
      border-radius:24px;
      background:var(--ink);
      color:white;
      position:relative;
      overflow:hidden;
    }
    .axertia-method:before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.14;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
      background-size:34px 34px;
    }
    .axertia-method-head{
      position:relative;
      z-index:2;
      margin-bottom:28px;
    }
    .axertia-method-head .eyebrow{color:var(--accent)}
    .axertia-method-head h3{
      margin:12px 0 0;
      font-size:clamp(1.55rem,3vw,2.25rem);
      letter-spacing:-.045em;
      line-height:1.08;
    }
    .axertia-method-track{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:0;
    }
    .axertia-method-track:before{
      content:"";
      position:absolute;
      left:7%;
      right:7%;
      top:27px;
      height:2px;
      background:linear-gradient(90deg,var(--accent),rgba(92,225,185,.3));
      z-index:0;
    }
    .axertia-method-node{
      position:relative;
      z-index:1;
      padding:0 18px;
    }
    .axertia-method-node:first-child{padding-left:0}
    .axertia-method-node:last-child{padding-right:0}
    .axertia-method-top{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:18px;
    }
    .axertia-method-num{
      flex:0 0 54px;
      width:54px;
      height:54px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--accent);
      color:var(--ink);
      font-weight:950;
      font-size:1rem;
      box-shadow:0 0 0 8px rgba(92,225,185,.09);
    }
    .axertia-method-arrow{
      margin-left:auto;
      flex:0 0 auto;
      width:12px;
      height:12px;
      border-top:3px solid currentColor;
      border-right:3px solid currentColor;
      color:var(--accent);
      transform:rotate(45deg);
    }
    .axertia-method-node:last-child .axertia-method-arrow{display:none}
    .axertia-method-node b{
      display:block;
      font-size:1rem;
      margin-bottom:8px;
    }
    .axertia-method-node p{
      margin:0;
      color:#afc1cc;
      font-size:.82rem;
      line-height:1.55;
    }
    .axertia-experience-footer{
      margin-top:28px;
      padding-top:22px;
      border-top:1px solid var(--line);
      color:var(--muted);
      font-size:.84rem;
      line-height:1.55;
    }
    .axertia-experience-footer a{
      color:#17634f;
      font-weight:850;
    }

    @media(max-width:940px){
      .axertia-experience-top{grid-template-columns:1fr;gap:30px}
      .axertia-experience-visual{order:1}
      .axertia-experience-copy{order:2}
      .axertia-method-track{grid-template-columns:1fr 1fr;gap:28px 18px}
      .axertia-method-track:before{display:none}
      .axertia-method-node{padding:0}
      .axertia-method-arrow{display:none}
    }
    @media(max-width:640px){
      .axertia-experience{padding:24px}
      .axertia-method{padding:26px 20px}
      .axertia-method-track{grid-template-columns:1fr;gap:24px}
      .axertia-method-node{
        display:grid;
        grid-template-columns:54px 1fr;
        column-gap:14px;
        align-items:start;
      }
      .axertia-method-top{grid-column:1;margin:0}
      .axertia-method-node b,.axertia-method-node p{grid-column:2}
      .axertia-method-node b{margin-top:4px;margin-bottom:6px}
    }


    /* Axertia experience: integrated workflow, image as the main visual focus */
    .axertia-method{
      margin-top:34px;
      padding:30px 0 0;
      border-radius:0;
      background:transparent;
      color:var(--ink);
      position:relative;
      overflow:visible;
      border-top:1px solid var(--line);
      box-shadow:none;
    }
    .axertia-method:before{display:none}
    .axertia-method-head{
      position:relative;
      z-index:2;
      margin-bottom:28px;
    }
    .axertia-method-head .eyebrow{color:#17634f}
    .axertia-method-head h3{
      color:var(--ink);
      margin:12px 0 0;
    }
    .axertia-method-track:before{
      background:var(--line);
      height:1px;
    }
    .axertia-method-num{
      background:#f4faf8;
      color:#17634f;
      border:1px solid #cfe7df;
      box-shadow:none;
    }
    .axertia-method-arrow{
      color:#5b8577;
      opacity:1;
    }
    .axertia-method-node b{
      color:var(--ink);
    }
    .axertia-method-node p{
      color:var(--muted);
    }
    .axertia-experience-footer{
      color:var(--muted);
    }


    /* Axertia image: fill the whole visual column without empty gaps */
    .axertia-experience-top{
      align-items:stretch;
    }
    .axertia-experience-visual{
      align-self:stretch;
      display:flex;
    }
    .axertia-experience-visual .axertia-seal{
      width:100%;
      height:100%;
      display:flex;
    }
    .axertia-experience-visual .axertia-seal img{
      width:100%;
      height:100%;
      min-height:100%;
      aspect-ratio:auto;
      object-fit:cover;
      object-position:center center;
    }


    /* Axertia visual block redesign */
    .axertia-experience-visual{
      align-self:stretch;
      display:flex;
    }
    .axertia-experience-visual .axertia-seal{
      width:100%;
      height:100%;
      min-height:100%;
      display:block;
      padding:0;
      overflow:hidden;
      border-radius:24px;
      background:
        radial-gradient(circle at 18% 18%,rgba(92,225,185,.08),transparent 28%),
        linear-gradient(135deg,#061422,#082136 62%,#092538);
      border:1px solid rgba(255,255,255,.04);
      box-shadow:0 20px 48px rgba(7,21,36,.18);
    }
    .axertia-art{
      position:relative;
      min-height:100%;
      height:100%;
      padding:42px 38px 30px;
      color:#fff;
      overflow:hidden;
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:20px;
      align-items:start;
    }
    .axertia-art:before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.10;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
      background-size:28px 28px;
    }
    .axertia-art-copy,
    .axertia-art-badge-wrap{
      position:relative;
      z-index:2;
    }
    .axertia-art-brand{
      font-size:clamp(2rem,4vw,3.3rem);
      font-weight:950;
      line-height:.95;
      letter-spacing:-.06em;
      margin-bottom:18px;
    }
    .axertia-art-line{
      width:68px;
      height:4px;
      border-radius:999px;
      background:var(--accent);
      margin-bottom:28px;
    }
    .axertia-art-title{
      display:grid;
      gap:6px;
      font-size:clamp(1.35rem,2.2vw,2.3rem);
      line-height:1.02;
      font-weight:900;
      letter-spacing:-.05em;
      margin-bottom:34px;
      max-width:320px;
    }
    .axertia-art-title .accent{
      color:var(--accent);
    }
    .axertia-art-note{
      display:grid;
      grid-template-columns:56px 1fr;
      gap:16px;
      align-items:start;
      max-width:370px;
    }
    .axertia-art-note p{
      margin:0;
      color:#d0dde5;
      font-size:1rem;
      line-height:1.45;
    }
    .axertia-art-icon{
      width:56px;
      height:56px;
      border-radius:50%;
      border:2px solid rgba(92,225,185,.8);
      position:relative;
      margin-top:2px;
    }
    .axertia-art-icon span{
      position:absolute;
      display:block;
      background:rgba(92,225,185,.9);
      border-radius:2px;
    }
    .axertia-art-icon span:nth-child(1){
      width:12px;height:22px;left:16px;bottom:14px;
    }
    .axertia-art-icon span:nth-child(2){
      width:8px;height:14px;left:30px;bottom:14px;
    }
    .axertia-art-icon span:nth-child(3){
      width:22px;height:3px;left:12px;bottom:12px;
    }

    .axertia-art-badge-wrap{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      padding-top:78px;
    }
    .axertia-art-badge{
      width:195px;
      height:195px;
      border-radius:50%;
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      border:4px solid rgba(92,225,185,.9);
      box-shadow:
        0 0 0 9px rgba(92,225,185,.08),
        0 0 0 1px rgba(255,255,255,.05) inset;
      background:radial-gradient(circle at 50% 35%,rgba(92,225,185,.08),rgba(5,18,31,.22) 70%);
    }
    .axertia-art-badge:before{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius:50%;
      border:1px dotted rgba(92,225,185,.35);
    }
    .axertia-art-badge-icon{
      font-size:1.75rem;
      line-height:1;
      color:var(--accent);
      margin-bottom:8px;
    }
    .axertia-art-badge-year{
      font-size:3.55rem;
      line-height:.92;
      letter-spacing:-.07em;
      font-weight:950;
      color:var(--accent);
    }
    .axertia-art-badge-label{
      font-size:1.05rem;
      letter-spacing:.08em;
      color:#e6eef3;
      margin-top:4px;
    }
    .axertia-art-connector{
      width:2px;
      height:152px;
      background:linear-gradient(180deg,rgba(92,225,185,.85),rgba(92,225,185,.35));
    }
    .axertia-art-node{
      width:24px;
      height:24px;
      border-radius:50%;
      border:3px solid rgba(92,225,185,.9);
      box-shadow:0 0 0 6px rgba(92,225,185,.08);
      background:#082136;
      margin-top:-2px;
    }

    .axertia-art-wave{
      position:absolute;
      left:-3%;
      right:-3%;
      bottom:-55px;
      height:150px;
      opacity:.9;
      background:
        radial-gradient(circle at 20% 35%,rgba(92,225,185,.18) 0 1px,transparent 1.5px),
        radial-gradient(circle at 60% 65%,rgba(92,225,185,.16) 0 1px,transparent 1.5px),
        radial-gradient(circle at 80% 40%,rgba(92,225,185,.18) 0 1px,transparent 1.5px);
      background-size:14px 14px, 16px 16px, 14px 14px;
      clip-path:ellipse(72% 46% at 50% 50%);
      transform:rotate(-2deg);
      filter:drop-shadow(0 -8px 20px rgba(92,225,185,.12));
    }
    .axertia-art-wave:before,
    .axertia-art-wave:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      border-top:2px solid rgba(92,225,185,.4);
      border-radius:50%;
    }
    .axertia-art-wave:before{
      top:45px;
      height:88px;
      transform:rotate(-2.5deg);
    }
    .axertia-art-wave:after{
      top:58px;
      height:78px;
      opacity:.55;
      transform:rotate(1deg);
    }

    @media(max-width:1180px){
      .axertia-art{
        grid-template-columns:1fr;
        gap:26px;
      }
      .axertia-art-badge-wrap{
        padding-top:0;
        align-items:flex-start;
      }
      .axertia-art-connector,
      .axertia-art-node{
        display:none;
      }
    }
    @media(max-width:640px){
      .axertia-art{
        padding:28px 22px 24px;
      }
      .axertia-art-title{
        max-width:none;
      }
      .axertia-art-note{
        grid-template-columns:48px 1fr;
        gap:12px;
      }
      .axertia-art-icon{
        width:48px;
        height:48px;
      }
      .axertia-art-badge{
        width:160px;
        height:160px;
      }
      .axertia-art-badge-year{
        font-size:2.9rem;
      }
      .axertia-art-wave{
        height:110px;
        bottom:-40px;
      }
    }


    /* Ajuste final: fondos unificados a blanco */
    body{background:#ffffff}
    .hero{
      background:#ffffff;
      color:var(--ink);
      padding:92px 0 78px;
    }
    .hero:after{display:none}
    .hero h1{color:var(--ink)}
    .hero h1 em{color:#17634f}
    .hero-lead{color:var(--muted)}
    .hero-proof{color:var(--muted)}
    .hero-proof b{color:var(--ink)}
    .proof-divider{background:var(--line)}

    .btn-ghost{
      border-color:var(--line);
      color:var(--ink);
      background:#ffffff;
    }
    .btn-ghost:hover{
      border-color:#b8d9ce;
      color:#17634f;
      background:#f8fcfa;
    }

    .problem,
    .features,
    .audience,
    .axertia-section,
    .cta{
      background:#ffffff;
      color:var(--ink);
    }

    .features .section-head p{color:var(--muted)}
    .features-grid .feature{
      background:#ffffff;
      border:1px solid var(--line);
      box-shadow:0 10px 24px rgba(7,21,36,.04);
    }
    .features-grid .feature .tag{color:#17634f}
    .features-grid .feature p{color:var(--muted)}
    .features-grid .feature:hover{
      transform:translateY(-3px);
      border-color:#cfe7df;
    }

    .audience{background:#ffffff}
    .persona{border:1px solid var(--line)}

    .cta{background:#ffffff}


    /* Restaurar fondo oscuro del encabezado principal */
    .hero{
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 75% 25%,rgba(92,225,185,.14),transparent 26rem),
        linear-gradient(90deg,rgba(4,10,18,.97) 0%,rgba(4,10,18,.9) 24%,rgba(4,10,18,.55) 40%,rgba(4,10,18,.12) 58%,rgba(4,10,18,.05) 100%),
        url('/landing/truck-hero.webp');
      background-size:auto,auto,cover;
      background-position:center,center,78% center;
      background-repeat:no-repeat;
      color:var(--white);
    }
    .hero:after{
      display:block;
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.18;
      background-image:
        linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
      background-size:44px 44px;
      mask-image:linear-gradient(to bottom,black,transparent 80%);
    }
    .hero h1{color:var(--white)}
    .hero h1 em{color:var(--accent)}
    .hero-lead{color:#c8d6e0}
    .hero-proof{color:#b7c8d3}
    .hero-proof b{color:var(--white)}
    .proof-divider{background:rgba(255,255,255,.2)}
    .hero .btn-ghost{
      border-color:rgba(255,255,255,.25);
      color:var(--white);
      background:transparent;
    }
    .hero .btn-ghost:hover{
      border-color:var(--accent);
      color:var(--accent);
      background:transparent;
    }


    /* Separación sutil entre secciones */
    section{
      position:relative;
      border-top:1px solid rgba(7,21,36,.05);
    }
    section:first-of-type{
      border-top:0;
    }

    /* Microvariaciones casi imperceptibles */
    .audience{
      background:#fcfdfd;
    }
    .problem{
      background:#fbfcfc;
    }
    .features{
      background:#fcfdfd;
    }
    .axertia-section{
      background:#ffffff;
    }
    .cta{
      background:#fcfcfd;
      border-top:1px solid rgba(7,21,36,.06);
    }

    /* Ajuste fino para que el hero no herede la línea */
    .hero{
      border-top:0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }


    .axertia-experience-heading{
      margin-bottom:20px;
    }


    .integration-section-head{
      margin-bottom:26px;
    }


    /* Con "Iniciar sesión" + "Solicitar demo" ya no cabe el menú completo
       hasta el ancho del contenedor (1180px) -- si no, los enlaces y los
       botones se ponen a dos líneas y la cabecera se descuadra. */
    @media(max-width:1180px){
      nav{display:none}.menu-btn{display:block}
      /* en todo este rango "Solicitar demo" pasa a ser el boton flotante
         (.cta-flotante), e "Iniciar sesion" se mueve dentro del propio
         menu de la hamburguesa (.menu-movil) -- dejarlo solo en el header
         quedaba raro, un boton suelto sin nada al lado. */
      header .btn-pill,header .btn-dark{display:none}
    }

    @media(max-width:940px){
      .hero{background-position:center,center,66% center;flex-direction:column;align-items:stretch}
      /* "descomponemos" el bloque de texto para que sus hijos (h1, parrafo,
         botones) pasen a ser items directos del flex de .hero, al mismo
         nivel que .countdown-disperso -- solo asi se puede reordenar todo
         junto: los botones bajan justo encima de la cuenta atras, y el
         margin-top:auto de los botones abre un hueco en medio del hero
         (para que se vea mas camion de fondo) en vez de quedar pegados
         debajo del parrafo. */
      .hero-grid,
      .hero-grid > div:first-child{display:contents}
      .hero h1{order:1;position:relative;z-index:2}
      .hero-lead{order:2;position:relative;z-index:2}
      .hero-actions{order:3;margin-top:auto;position:relative;z-index:2;justify-content:center}
      .problem-grid,.integration-grid,.faq-grid,.cta-box,.axertia-lockup{grid-template-columns:1fr}
      .cta-pitch{padding:44px 40px 8px}
      .cta-glass-wrap{padding:24px 40px 40px}
      .countdown-disperso{position:static;justify-content:center;margin-top:28px;order:4}
      .trustbar .container{grid-template-columns:1fr 1fr;gap:16px}
      .trustitem{border:0;padding:0}
      .workflow{grid-template-columns:1fr 1fr}
      .features-grid,.audience-grid{grid-template-columns:1fr 1fr}
      .deadline{position:relative;top:0}
      .requirements{grid-template-columns:1fr 1fr}
      .why-flow-track{grid-template-columns:1fr 1fr;gap:28px 16px}
      .why-flow-track:before{display:none}
      .why-node{padding:0}
      .why-node-arrow{display:none}
    }
    @media(max-width:640px){
      .container{width:min(var(--max),calc(100% - 26px))}
      /* con el contenedor mas estrecho (13px de margen a cada lado), el
         -24px de .carrusel-flecha se saldria de la pantalla (overflow
         horizontal); se acerca al borde de la tarjeta para que quepa. */
      .carrusel-flecha{width:44px;height:44px;right:-10px;font-size:1.3rem}
      /* poco padding abajo para que la tarjeta de la cuenta atras quede
         pegada al pie del hero, no flotando con un hueco debajo. */
      .hero{padding:62px 0 18px}
      .hero h1{font-size:3rem}
      /* parrafo largo del hero, agobia de golpe en movil -- se cambia por
         la version resumida (.hero-lead-corta, ver mas arriba). */
      .hero-lead-larga{display:none}
      .hero-lead-corta{
        display:block;
        font-size:1.65rem;line-height:1.45;letter-spacing:-.02em;
        max-width:270px;margin-bottom:0;
      }
      section{padding:54px 0}
      .features-grid,.audience-grid,.seo-cluster,.workflow{grid-template-columns:1fr}
      .requirements{grid-template-columns:1fr}
      .trustbar .container{grid-template-columns:1fr 1fr}
      .doc-row{grid-template-columns:1fr}
      .erp-body{grid-template-columns:100px 1fr}
      .cta{padding:56px 0}
      .cta-pitch{padding:32px 22px 6px}
      .cta-glass-wrap{padding:16px 22px 32px}
      .cta-glass{padding:22px}
      .fila-2{grid-template-columns:1fr}
      .axertia-lockup{padding:24px;gap:28px}
      .axertia-copy{order:1}
      .axertia-visual{order:2}
      .why-flow{padding:26px 20px}
      .why-flow-track{grid-template-columns:1fr;gap:24px}
      .why-node{display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-items:start}
      .why-node-top{grid-column:1;margin:0}
      .why-node b,.why-node p{grid-column:2}
      .why-node b{margin-top:3px;margin-bottom:6px}
    }