/* ==========================================================================
   mobile-perf.css — capa de rendimiento y UX para telefonos.
   Se carga LA ULTIMA. Todo va dentro de media queries moviles: el escritorio
   no recibe una sola declaracion de este archivo.

   No cambia el diseño: cambia COMO se pinta.
   ========================================================================== */


/* ==========================================================================
   1. TRANSICION ENTRE PAGINAS
   ==========================================================================
   El barrido diagonal de transitions.css anima `clip-path` (580ms) y
   `filter:blur()` (400ms). Ninguna de las dos las resuelve el compositor: el
   navegador tiene que volver a rasterizar la pagina COMPLETA en cada cuadro.
   En un iPhone 12 eso son ~35 rasterizados de pantalla entera seguidos, y es
   exactamente la sensacion de trabado.

   En movil se conserva el MOVIMIENTO HORIZONTAL y la direccion, pero con
   translate3d + opacity, que el compositor mueve sin repintar. La diagonal
   solo se aprecia en pantallas anchas, asi que en telefono no se pierde nada
   perceptible. En escritorio sigue el barrido diagonal original, intacto.
   ========================================================================== */

@media (max-width:820px), (max-height:560px){

  /* Los fotogramas (entrante desde un lado, saliente cediendo terreno) viven
     ahora en transitions.css, fuera de toda media query: los comparte el
     perfil de gama baja de escritorio, que necesita exactamente lo mismo.
     Aqui solo se eligen. */

  /* 300ms de entrada / 200ms de salida: dentro del rango que se percibe como
     inmediato, sin llegar a parecer un corte. */
  ::view-transition-new(page-main){
    animation:fx-shift-in-right .3s cubic-bezier(.22,.61,.36,1) both !important;
  }
  ::view-transition-old(page-main){
    animation:fx-shift-out-left .2s cubic-bezier(.4,0,1,1) both !important;
  }
  :root[data-vt-dir="back"] ::view-transition-new(page-main){
    animation-name:fx-shift-in-left !important;
  }
  :root[data-vt-dir="back"] ::view-transition-old(page-main){
    animation-name:fx-shift-out-right !important;
  }

  /* Mismo movimiento para el fallback (Safari sin View Transitions). */
  .vt-fallback main{
    animation:fx-shift-in-right .3s cubic-bezier(.22,.61,.36,1) both !important;
  }
  .vt-fallback[data-vt-dir="back"] main{
    animation-name:fx-shift-in-left !important;
  }
  .vt-fallback.vt-leaving main{
    animation:fx-shift-out-left .2s cubic-bezier(.4,0,1,1) both !important;
  }
  .vt-fallback[data-vt-dir="back"].vt-leaving main{
    animation-name:fx-shift-out-right !important;
  }
}


/* ==========================================================================
   2. MENU MOVIL — TIPOGRAFIA Y ZONAS TACTILES
   ==========================================================================
   Los enlaces grandes ya estaban bien (31-56px). El problema estaba en el
   texto de apoyo: 10px, 11px, 12px y 13px son ilegibles en un telefono.
   Se sube al minimo comodo sin tocar la escala de los enlaces principales,
   asi que la composicion del menu no cambia.
   ========================================================================== */

@media (max-width:820px){

  /* Correo de contacto: era 11-13px. A 4vw medía 206px y no cabía en su
     columna del pie del menu (194px a 430px de ancho), asi que se comia el
     sello de la derecha. 3.4vw lo deja en ~188px y sigue por encima del
     minimo legible de 14px. */
  .st-mobile-menu .contact-mail{
    font-size:clamp(14px,3.4vw,15px) !important;
    line-height:1.35;
    min-width:0;
    max-width:100%;
  }

  /* Etiqueta "Una conversacion..." y similares. */
  .st-mobile-menu .contact-label{
    font-size:clamp(17px,4.6vw,20px) !important;
  }

  /* Numeracion 01..06 de los enlaces: era 12-13px. */
  .st-mobile-menu .menu-link .num{
    font-size:clamp(14px,3.6vw,15px) !important;
  }

  /* Sello de confianza: era 10px, ilegible. */
  .st-mobile-menu .verified-text{
    font-size:clamp(14px,3.6vw,15px) !important;
    line-height:1.25;
  }
  .st-mobile-menu .stars{
    font-size:clamp(13px,3.4vw,14px) !important;
  }

  /* Selector de idioma: 16px evita ademas el zoom de Safari si algun dia
     pasa a ser un <select>. */
  .st-mobile-menu .language{
    font-size:16px !important;
  }

  /* --- Zonas tactiles ---------------------------------------------------
     El icono conserva su tamaño visual; lo que crece es el area que recibe
     el dedo, con un pseudo-elemento centrado. 44px es la referencia de Apple
     y de las WCAG. */
  .st-mobile-menu .mini-link,
  .st-mobile-menu .social{
    position:relative;
  }
  .st-mobile-menu .mini-link::after,
  .st-mobile-menu .social::after{
    content:"";
    position:absolute;
    top:50%;left:50%;
    width:44px;height:44px;
    transform:translate(-50%,-50%);
  }

  .st-mobile-menu .close-button{
    min-width:44px;
    min-height:44px;
  }
}


/* ==========================================================================
   3. INPUTS — SAFARI iOS HACE ZOOM CON FUENTE < 16px
   ==========================================================================
   Al enfocar un campo de menos de 16px, Safari amplia la pagina y ya no
   vuelve: el usuario se queda con el sitio descuadrado. Solo se toca el
   tamaño en movil; en escritorio los campos siguen como estaban.
   ========================================================================== */

@media (max-width:820px){
  input,
  select,
  textarea{
    font-size:16px !important;
  }
}


/* ==========================================================================
   4. FEEDBACK TACTIL
   ==========================================================================
   Respuesta inmediata al tocar: el dedo tapa el boton, asi que el usuario
   necesita ver que algo pasó antes de soltar. Solo transform, 120ms.
   ========================================================================== */

@media (hover:none) and (pointer:coarse){

  .button,
  .qf-submit,
  .st-mobile-menu .menu-link,
  .st-mobile-menu .language,
  .st-mobile-menu .close-button,
  button[type="submit"]{
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s cubic-bezier(.22,.61,.36,1);
  }

  .button:active,
  .qf-submit:active,
  .st-mobile-menu .language:active,
  .st-mobile-menu .close-button:active,
  button[type="submit"]:active{
    transform:scale(.97);
  }

  /* Los enlaces del menu son texto grande: un 0.97 se nota demasiado. */
  .st-mobile-menu .menu-link:active{
    transform:scale(.985);
  }

  /* El :hover no existe con dedo; en iOS se queda "pegado" tras el toque.
     Se neutraliza el desplazamiento para que no quede un boton flotando. */
  .button:hover{
    transform:none;
  }
}


/* ==========================================================================
   5. SAFE AREAS
   ==========================================================================
   Con viewport-fit=cover (añadido en el <head>) el contenido pasa por debajo
   del notch y de la barra inferior. Sin estos rellenos, la Dynamic Island
   tapa la cabecera y la barra de gestos tapa los botones.
   ========================================================================== */

@media (max-width:820px){

  .site-header{
    padding-top:env(safe-area-inset-top,0px);
  }

  /* El modal de contacto ocupa la pantalla completa en movil. */
  .qf-panel{
    padding-top:max(82px,calc(env(safe-area-inset-top,0px) + 62px)) !important;
    padding-bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 16px)) !important;
    padding-left:max(22px,env(safe-area-inset-left,0px)) !important;
    padding-right:max(22px,env(safe-area-inset-right,0px)) !important;
  }
  .qf-close{
    top:max(18px,calc(env(safe-area-inset-top,0px) + 10px)) !important;
  }
  .qf-toast{
    bottom:max(26px,calc(env(safe-area-inset-bottom,0px) + 14px));
  }
}


/* ==========================================================================
   6. CONTENIDO FUERA DE PANTALLA
   ==========================================================================
   `content-visibility:auto` le dice al navegador que no calcule ni pinte una
   seccion hasta que se acerque al viewport. En una pagina de producto larga
   eso quita un monton de trabajo del primer render.

   `contain-intrinsic-size` reserva el alto estimado: sin el, la barra de
   scroll saltaria al entrar cada seccion (CLS). Va detras de @supports para
   no arriesgar nada en Safari antiguo.
   ========================================================================== */

@supports (content-visibility:auto){
  @media (max-width:820px){
    /* .gallery-wall y .trust-story SE QUEDAN FUERA a proposito: las dos son
       escenas pegajosas atadas al scroll (position:sticky + JS que mueve el
       carril). `content-visibility:auto` salta el pintado de la seccion
       mientras el navegador la considera lejana y ademas la mide con
       contain-intrinsic-size (700px) cuando en realidad pasa de 1900px: en un
       telefono real eso deja fotogramas en blanco justo al entrar en la
       escena. Es solo una pista de rendimiento, no cambia la maqueta. */
    .mdm-how,
    .mdm-band,
    .needs-showcase,
    .site-footer{
      content-visibility:auto;
      contain-intrinsic-size:auto 700px;
    }
  }
}


/* ==========================================================================
   7. SIN MOVIMIENTO
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  ::view-transition-new(page-main),
  ::view-transition-old(page-main),
  .vt-fallback main,
  .vt-fallback.vt-leaving main{
    animation:none !important;
  }
  .button:active,
  .qf-submit:active,
  .st-mobile-menu .menu-link:active{
    transform:none;
  }
}


/* ==========================================================================
   8. LEGIBILIDAD DEL TEXTO DE INTERFAZ
   ==========================================================================
   Auditado midiendo el font-size computado de todo el texto visible a 390px.
   El pie de pagina venia de una composicion de escritorio reducida: el sello
   estaba a 4.5px y los enlaces a 10-11.5px, ilegibles en un telefono.

   Solo se toca texto REAL de interfaz. El texto diminuto que vive dentro de
   las maquetas de pantalla (los "MDM conectado", "Credito · Activo" de los
   mockups de dispositivo) se deja como esta: ahi lo pequeño es el efecto
   buscado, y agrandarlo romperia la ilusion de pantalla.
   ========================================================================== */

@media (max-width:820px){

  /* --- Pie de pagina --- */
  .st-footer-award-top small{
    font-size:clamp(11px,2.9vw,12px) !important;
    letter-spacing:.08em;
  }
  .st-footer-bottom p,
  .st-footer-bottom a{
    font-size:clamp(14px,3.6vw,15px) !important;
  }
  .st-footer-email-hint,
  .st-footer-lead{
    font-size:clamp(15px,3.9vw,16px) !important;
    line-height:1.5;
  }
  .st-footer-email,
  .st-footer-underlined,
  .st-footer-col p,
  .st-footer-col a{
    font-size:clamp(15px,3.9vw,16px) !important;
  }
  .st-footer-cta{
    font-size:clamp(15px,3.9vw,16px) !important;
  }

  /* --- Tarjetas del ecosistema --- */
  .bento-card > p{
    font-size:clamp(14px,3.6vw,15px) !important;
    line-height:1.5;
  }

  /* --- CTA de la seccion de desarrollo --- */
  .sd-primary,
  .sd-secondary{
    font-size:clamp(15px,3.9vw,16px) !important;
  }

  /* --- Correo del modal de contacto --- */
  .qf-mail,
  .qf-mail a{
    font-size:clamp(14px,3.6vw,15px) !important;
  }

  /* --- Zonas tactiles del pie y de los CTA ---
     Con `min-height` + `line-height` el enlace crecia de verdad y desmontaba
     el ritmo de las columnas del pie. El area tactil se agranda con un
     pseudo-elemento superpuesto: el dedo tiene sus 44px y la caja del enlace
     no cambia ni un pixel, asi que la composicion queda intacta. */
  .st-footer-bottom a,
  .st-footer-col a,
  .st-footer-underlined{
    position:relative;
  }
  .st-footer-bottom a::after,
  .st-footer-col a::after,
  .st-footer-underlined::after{
    content:"";
    position:absolute;
    left:0;right:0;
    top:50%;
    height:44px;
    transform:translateY(-50%);
  }
  .sd-primary,
  .sd-secondary{
    min-height:44px;
  }
}