/* ==========================================================
   ALET V7.37 — HERO MÓVIL MÁS AMPLIO + BORDES DIFUMINADOS
   + nombre de empresa junto al logo en responsive
   ========================================================== */

.brand-name-v737{
  display:none;
}

@media (max-width:900px){

  /* Marca del header: logo + nombre de la empresa */
  body > header.site-header .brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:auto !important;
    max-width:calc(100vw - 86px) !important;
    overflow:visible !important;
  }

  body > header.site-header .brand img{
    flex:0 0 auto !important;
  }

  body > header.site-header .brand-name-v737{
    display:block !important;
    color:#0a2a53 !important;
    font-size:15px !important;
    line-height:1.1 !important;
    font-weight:800 !important;
    letter-spacing:.2px !important;
    white-space:nowrap !important;
  }

  /* HERO: la foto se hace visualmente más grande que antes */
  #inicio.hero-v65 .hero-v736-mobile-image{
    width:108vw !important;
    max-width:560px !important;
    margin:0 0 2px 50% !important;
    transform:translateX(-50%) !important;
    overflow:visible !important;
    position:relative !important;

    /* difuminado lateral real */
    -webkit-mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.18) 3%,
      #000 10%,
      #000 90%,
      rgba(0,0,0,.18) 97%,
      transparent 100%
    ) !important;
    mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.18) 3%,
      #000 10%,
      #000 90%,
      rgba(0,0,0,.18) 97%,
      transparent 100%
    ) !important;
  }

  #inicio.hero-v65 .hero-v736-mobile-image img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    object-position:center top !important;
  }

  /* Apoyo adicional para navegadores donde mask se vea muy tenue:
     fundimos los dos bordes con el mismo fondo del hero */
  #inicio.hero-v65 .hero-v736-mobile-image::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:
      linear-gradient(
        90deg,
        #f7f9fc 0%,
        rgba(247,249,252,.76) 3.5%,
        rgba(247,249,252,0) 11%,
        rgba(247,249,252,0) 89%,
        rgba(247,249,252,.76) 96.5%,
        #f7f9fc 100%
      ) !important;
  }

  /* conserva el difuminado inferior ya existente */
  #inicio.hero-v65 .hero-v736-mobile-image::after{
    z-index:3 !important;
  }
}

@media (max-width:560px){
  body > header.site-header .brand{
    gap:8px !important;
  }

  body > header.site-header .brand-name-v737{
    font-size:14px !important;
  }

  #inicio.hero-v65 .hero-v736-mobile-image{
    width:112vw !important;
    max-width:none !important;
  }
}

@media (max-width:390px){
  body > header.site-header .brand-name-v737{
    font-size:13px !important;
  }

  #inicio.hero-v65 .hero-v736-mobile-image{
    width:116vw !important;
  }
}