.mobile-visual-hero{
  display:none;
}

@media (max-width:699px){
  html,
  body.home-page{
    background:#FB923C;
  }

  .home-page .page-noise{
    display:none;
  }

  .home-page .site-header{
    position:absolute;
    inset:0 0 auto;
    z-index:70;
    border:0;
    background:transparent;
    pointer-events:none;
  }

  .home-page .site-header::after,
  .home-page .site-header > .mega-menu,
  .home-page .site-header > .nav-dropdown{
    display:none!important;
  }

  .home-page .site-header > .nav-shell{
    display:flex!important;
    pointer-events:none;
    visibility:visible;
  }

  .home-page .site-header > .nav-shell::before{
    display:none!important;
    content:none!important;
  }

  .home-page .site-header > .nav-shell > .brand{
    display:none;
  }

  .home-page .site-header .mobile-header-actions,
  .home-page .site-header.mobile-controls-floating .mobile-header-actions,
  .home-page .site-header.menu-open .mobile-header-actions{
    pointer-events:auto;
  }

  .home-page .site-header.mobile-controls-floating .mobile-header-language{
    border-color:rgba(255,255,255,.92);
    background:rgba(255,249,244,.28);
    box-shadow:none;
  }

  .home-page .site-header.mobile-controls-floating .menu-toggle{
    background:rgba(255,255,255,.7)!important;
    box-shadow:none;
  }

  .home-page .st-mobile-menu.is-open{
    pointer-events:auto;
  }

  .home-page main[data-page="index"] > .hero{
    display:none;
  }

  /* -42vw y no -60vw: con -60 la captura subia tanto que su borde superior
     entraba 57px por encima del bloque de resenas del hero (las estrellas y
     el "Nuestros clientes aman trabajar con nosotros") y lo tapaba. Con -42
     sube todo lo que se puede sin llegar a tocarlas. El valor va en vw porque
     la posicion de las resenas dentro del hero tambien es proporcional al
     ancho (el hero es aspect-ratio 941/1672), asi que la separacion se
     mantiene en cualquier telefono. */
  .home-page main[data-page="index"] > .dashboard-showcase{
    margin-top:-42vw!important;
    padding-top:28px;
  }

  .mobile-visual-hero{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:941 / 1672;
    overflow:hidden;
    isolation:isolate;
    background:#FB923C;
    border:clamp(3px,.8vw,5px) solid rgba(255,255,255,.94);
    border-radius:clamp(15px,4.2vw,28px);
  }

  .mobile-visual-hero__background,
  .mobile-visual-hero__cable,
  .mobile-visual-hero__shapes,
  .mobile-visual-hero__person{
    position:absolute;
    display:block;
    user-select:none;
    pointer-events:none;
  }

  .mobile-visual-hero__background{
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .mobile-visual-hero__cable{
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:fill;
    transform:translateY(7.2%);
  }

  .mobile-visual-hero__shapes{
    z-index:4;
    top:41%;
    left:-30%;
    width:85%;
    height:auto;
  }

  .mobile-visual-hero__person{
    z-index:3;
    top:15.1%;
    left:10%;
    width:108%;
    max-width:none;
    height:auto;
  }

  /* Tipografia calcada del render de referencia (assets/hero-mobile-visual-no-logo.png,
     lienzo 941x1671): altura de mayuscula 102px, avance entre lineas 126px y las
     letras condensadas al 88% — de ahi el scaleX en vez de mas tracking. */
  .mobile-visual-hero__title{
    position:absolute;
    z-index:5;
    top:23.16%;
    left:4.44%;
    width:110%;
    margin:0;
    color:#fff;
    font-size:14.88vw;
    font-weight:760;
    line-height:.9;
    letter-spacing:-.045em;
    text-transform:uppercase;
    text-wrap:nowrap;
    transform:scaleX(.88);
    transform-origin:left top;
    pointer-events:none;
  }

  .mobile-visual-hero__title span{
    display:block;
  }

  .mobile-visual-hero__title span:nth-child(2){
    position:relative;
    width:max-content;
    margin:.055em 0 .06em -.025em;
    padding:.035em .105em .065em;
    border-radius:.12em;
    color:transparent;
    background:transparent;
    box-shadow:0 .055em .14em rgba(61,29,11,.18);
    overflow:hidden;
  }

  /* LA PALABRA CALADA DEL MEDIO.
     No es texto: el efecto es una caja blanca con las letras recortadas dejando
     ver la foto, y eso necesita mezclarse con lo que hay detras. Con texto real
     no se puede: el <p> del titular es position:absolute con z-index, y el
     <main> tambien, y cualquiera de los dos aisla el mix-blend-mode — el fondo
     no llega y las letras salen negras. Comprobado en el navegador.

     Asi que sigue siendo una mascara SVG, pero generada por
     tools/hero_word_svg.py con los CONTORNOS de la Inter real del sitio al peso
     760. Antes iba como <text font-family='Inter'>, y un SVG de fondo es un
     documento aislado que NO puede usar las fuentes web de la pagina: caia a
     Arial y encima se estiraba con textLength. Se notaba al lado de las otras
     dos lineas. Ahora son trazos: no depende de ninguna fuente y el lienzo tiene
     la proporcion exacta de la caja (6.314 frente a 6.315), asi que tampoco se
     deforma. */
  .mobile-visual-hero__title span:nth-child(2)::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:center / 100% 100% no-repeat url("/assets/hero-word-es.svg?v=hero-word-20260904-1");
    pointer-events:none;
  }

  /* La palabra del medio NO es texto: es una mascara SVG metida en el
     background, y el <span> va en color:transparent. Por eso i18n.js no podia
     traducirla — no hay ningun nodo de texto visible que cambiar, aunque el del
     HTML si se traduzca. En ingles se seguia viendo "SOLUCIONES".

     La linea del medio en ingles es DIGITAL ("We create / digital /
     solutions"), asi que hace falta la MISMA imagen con esa palabra.

     Se elige por el lang del documento, fiable aqui porque el idioma va en la
     URL (/en/...) y cambiarlo recarga la pagina entera. Solo se pisa
     background-image, para conservar el encuadre de la regla de arriba. */
  html[lang="en"] .mobile-visual-hero__title span:nth-child(2)::before{
    background-image:url("/assets/hero-word-en.svg?v=hero-word-20260904-1");
  }

  .mobile-visual-hero__scroll-ui{
    position:absolute;
    inset:0;
    z-index:6;
    color:#fff;
    pointer-events:none;
  }

  /* La linea arranca a 34px del circulo (lienzo 941) y muere 22px antes del texto. */
  .mobile-visual-hero__scroll-line{
    position:absolute;
    top:57.51%;
    right:17.32%;
    left:22.53%;
    height:1px;
    background:rgba(255,255,255,.92);
  }

  /* Centrada en su propia caja: con line-height:1 el centro optico de las
     mayusculas coincide con el centro de la linea, asi que translateY(-50%)
     la deja a la altura exacta de la referencia. */
  .mobile-visual-hero__scroll-label{
    position:absolute;
    top:57.75%;
    left:84.91%;
    font-size:clamp(11px,2.92vw,19px);
    line-height:1;
    /* Misma condensacion horizontal que el titulo: asi el ancho de "Desliza"
       (82px en el lienzo de 941) cae donde la referencia lo deja. */
    transform:translateY(-50%) scaleX(.9);
    transform-origin:left center;
  }

  .mobile-visual-hero__proof{
    position:absolute;
    z-index:6;
    top:67.1%;
    right:4%;
    left:4%;
    display:flex;
    align-items:center;
    gap:2.6%;
    color:#fff;
    pointer-events:none;
  }

  .mobile-visual-hero__proof img{
    display:block;
    width:46%;
    height:auto;
    flex:none;
  }

  .mobile-visual-hero__proof p{
    margin:0;
    font-size:clamp(11px,3vw,18px);
    font-weight:400;
    line-height:1.18;
    letter-spacing:-.015em;
  }

  /* Logo oficial flotante: conserva la transparencia original del PNG. */
  .mobile-visual-hero__brand{
    position:absolute;
    z-index:7;
    left:4.1%;
    top:3.25%;
    width:clamp(82px,23vw,100px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    filter:none;
    pointer-events:none;
  }

  .mobile-visual-hero__brand img{
    display:block;
    width:100%;
    height:auto;
  }

  .mobile-hero-hotspot{
    position:absolute;
    z-index:5;
    display:block;
    margin:0;
    padding:0;
    border:0;
    border-radius:999px;
    background:transparent;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-hero-hotspot:focus-visible{
    outline:3px solid rgba(255,255,255,.96);
    outline-offset:3px;
    box-shadow:0 0 0 6px rgba(251,146,60,.38);
  }

  .mobile-hero-hotspot--logo{
    left:5.2%;
    top:3.2%;
    width:28%;
    height:6.3%;
    border-radius:18px;
  }

  .mobile-hero-hotspot--scroll{
    left:4.57%;
    top:53.56%;
    width:14.5%;
    height:auto;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#ff7405;
    background:rgba(255,255,255,.96);
  }

  /* Flecha de la referencia: 20.5% de ancho y 32.2% de alto del circulo, trazo
     fino (2.9% del diametro) con puntas redondeadas. El SVG escala solo, asi
     que el grosor no engorda en pantallas grandes como pasaba con los bordes. */
  .mobile-hero-hotspot__arrow{
    display:block;
    width:20.5%;
    height:auto;
    overflow:visible;
  }

  /* Latido del indicador: la flecha baja y vuelve, que es justo el gesto que
     pide. Es un `transform` sobre un SVG de 12px dentro de un circulo de
     57px — una capa diminuta en el compositor, sin repintado. Se apaga si el
     sistema pide menos movimiento y en equipos de perfil bajo. */
  @media (prefers-reduced-motion:no-preference){
    :root:not(.fx-low) .mobile-hero-hotspot__arrow{
      animation:fx-scroll-hint 2.6s cubic-bezier(.4,0,.2,1) infinite;
    }
  }

  @keyframes fx-scroll-hint{
    0%,62%,100%{transform:translate3d(0,0,0)}
    76%        {transform:translate3d(0,14%,0)}
    88%        {transform:translate3d(0,0,0)}
  }
}