/* =========================================================
   AJUSTES VISUALES SOLICITADOS - 07/08/2026 v2
   Archivo cargado al FINAL para evitar caché y sobrescrituras.
   ========================================================= */

/* 1) Encabezado: eliminar cualquier franja gris/residual alrededor de la franja verde. */
html,
body,
.encabezado,
.franja-contenedor,
.menu-envuelto {
  background-color: #fff !important;
}

.encabezado,
.franja-contenedor,
.franja-superior {
  border-top: 0 !important;
  box-shadow: none;
}

.franja-contenedor {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.franja-superior {
  margin-top: 0 !important;
  outline: 0 !important;
}

/* 5) Avión/flecha decorativa del hero: bajar en todos los dispositivos. */
.hero-indicador {
  top: 48px !important;
}

/* 6) Escritorio y tablet: separar el texto de la flecha en “Todos los servicios”. */
@media (min-width: 721px) {
  .boton-todos-servicios .texto-boton {
    position: relative !important;
    left: -13px !important;
    transform: none !important;
  }
}

/* TABLET */
@media (min-width: 721px) and (max-width: 1120px) {
  /* 2) Menú más arriba para dejar espacio útil a Servicios/Blogs desplegados. */
  .menu-zona {
    justify-content: flex-start !important;
    padding-top: 106px !important;
    padding-bottom: 30px !important;
  }

  .menu-lista {
    margin-top: 0 !important;
  }

  /* 3) Logo: mismo recorte limpio de móvil, con mayor zoom visual en tablet. */
  .logo {
    flex: 0 0 305px !important;
  }

  .logo picture {
    width: 305px !important;
    overflow: hidden !important;
  }

  .logo img {
    width: 300px !important;
    height: 88px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* 4a) Hero: subrayado completo bajo “Negocio”, sin quedarse a medio dibujar. */
  .hero h1 em::after {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    bottom: -8px !important;
    opacity: 1 !important;
    animation: none !important;
    transform: rotate(-2deg) scaleX(1) !important;
  }

  /* 4b) Equipo: retirar el subrayado antiguo y ponerlo exactamente bajo “tu empresa”. */
  .equipo-cabecera h2 em::after {
    content: none !important;
  }

  .equipo-cabecera .subrayado-tu-empresa {
    position: relative;
    display: inline-block;
  }

  .equipo-cabecera .subrayado-tu-empresa::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 3px;
    border-radius: 3px;
    background: var(--amarillo);
    transform: rotate(-1deg);
  }

  /* 4c) Problemas: quitar de “mejores decisiones” y subrayar “tu negocio”. */
  .problemas-cabecera strong::after {
    content: none !important;
  }

  .problemas-cabecera .subrayado-tu-negocio {
    position: relative;
    display: inline-block;
  }

  .problemas-cabecera .subrayado-tu-negocio::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 3px;
    border-radius: 3px;
    background: var(--amarillo);
    transform: rotate(-1deg);
  }

  /* Flecha decorativa algo más abajo en tablet. */
  .hero-indicador {
    top: 52px !important;
  }
}

/* MÓVIL */
@media (max-width: 720px) {
  /* 2) Menú ligeramente más arriba que antes, manteniendo espacio para submenús. */
  .menu-zona {
    justify-content: flex-start !important;
    padding-top: 92px !important;
    padding-bottom: 24px !important;
  }

  /* Mantener la configuración/escala móvil ya aprobada. */
  .logo {
    flex-basis: 220px !important;
  }

  .logo img {
    width: 218px !important;
    height: 80px !important;
  }

  /* 5) Bajar también el avión/flecha en móvil. */
  .hero-indicador {
    top: 112px !important;
  }
}

@media (max-width: 390px) {
  .logo {
    flex-basis: 196px !important;
  }
  .logo img {
    width: 196px !important;
    height: 72px !important;
  }
}