.ui-search__mobile-button[data-v-92533521],
.ui-search .ui-search__mobile-button[data-v-92533521] {
    display: none !important;
}





/* --- CSS COMPLETO Y RÍGIDO PARA OCULTAR EL HEADER --- */

/* ESTADO OCULTO POR DEFECTO: Oculta el header SIN RESERVAR ESPACIO y lo prepara para ser fijo */
.header.with-shadow {
  display: none !important; /* ¡FORZA A OCULTARSE Y NO RESERVAR ESPACIO! */
  position: fixed !important; /* ¡FORZA A ESTAR FIJO! */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important; /* Un valor alto para asegurar que esté en la cima */
  height: 86px !important; /* ¡TU ALTURA FIJA MEDIDA! */
  background-color: white !important; /* ¡IMPORTANTE PARA VER EL CONTENIDO DEL HEADER CUANDO APARECE! */
  /* Añade aquí CUALQUIER otro estilo esencial de tu header si no se hereda */
}

/* ESTADO VISIBLE: Muestra el header */
.header.with-shadow.visible {
  display: flex !important; /* O el display que use tu header (flex, block, etc.) */
}

/* --- AJUSTE DEL CONTENIDO PRINCIPAL --- */
/* ¡NECESITO QUE ME DIGAS TU SELECTOR DE CONTENIDO PRINCIPAL! */
/* Por ahora, usaré un placeholder común. Reemplaza '.main-content' con el tuyo. */

/* OPCIÓN 1: Si el contenido principal es hijo directo del body y está DESPUÉS del header */
/* (Esto es común en SPAs como las que usan Vue/React donde el header está fuera del root renderizado */
/* y el .main-content es la ruta principal. Si el header está DENTRO del root renderizado, */
/* entonces este selector podría no ser válido. Necesito ver tu estructura HTML general.) */
body > .main-content {
  padding-top: 86px !important; /* ¡Igual a la altura del header! */
}

/* OPCIÓN 2: Si el contenido principal está envuelto por algo específico */
/* Si .main-content no aplica, prueba buscar algo como: */
/*
#app > div:nth-child(2) { // Si el contenido está envuelto en el segundo div hijo directo del #app
  padding-top: 86px !important;
}
*/

/*
   SI NINGUNA DE ESTAS OPCIONES FUNCIONA DE INMEDIATO, DEBO SABER:
   1. ¿Cuál es el selector CSS del primer elemento de contenido DESPUÉS del header (o el que está directamente debajo)?
   2. ¿Tu página está envuelta en algún ID o clase principal que es el "root" de la aplicación? (ej: <div id="app"> ... </div>)
*/

/* --- FIN DEL CSS --- */

/* --- CSS COMPLETO Y CORREGIDO PARA OCULTAR EL BLOQUE DE SERVICIOS --- */

/* Selecciona el contenedor principal del listado de servicios que se muestra cuando no hay nada */
.dl__wrapper {
  display: none !important; /* ¡Oculta COMPLETAMENTE el div contenedor y su contenido! */
}

/* --- FIN DEL CSS --- */

/* --- CSS PARA CENTRAR LA HERO SECTION --- */

/* 1. Transformamos el contenedor RECIÉN EXTERIOR (.)hero en un contenedor Flexbox */
.hero {
  display: flex !important; /* Habilita Flexbox */
  justify-content: center !important; /* Centra horizontalmente */
  align-items: center !important; /* Centra verticalmente */

  /* OPCIONAL: Asegúrate de que tenga suficiente altura para que el centrado vertical sea visible */
  /* Si la altura ya está dada por el SVG o por estilos del contenedor padre, esto puede no ser necesario. */
  /* Si no, puedes establecer una altura mínima. Por ejemplo: */
  min-height: 80vh; /* Usa 80% de la altura de la viewport */

  /* ¡Si tu SVG de fondo (.hero__background) ocupa todo el espacio, */
  /* asegúrate de que el contenido no quede detrás de él! */
  /* Si es así, puede que necesites ajustar el z-index o el 'position' de los elementos. */
  /* Pero la idea es centrar el contenido DENTRO de este espacio definido por .hero */
}

/* 2. El contenedor del contenido (.hero__content-wrapper) ya tiene la clase 'center'. */
/* Si esa clase 'center' ya hace algo, bueno. Pero si no, o si quieres asegurar, */
/* podríamos necesitar añadir estilos a .hero__content-wrapper si el centrado NO funcionase.*/
/* En muchos casos, con el padre ya centrado, este hijo se centrará. */

/* Si el `center` en `hero__content-wrapper` no funciona, inspecciona qué hace */
/* y ajusta o complementa aquí. Por ejemplo, si `center` usa `margin: auto` */
/* y necesita un `width`, podría ser necesario: */
/*
.hero__content-wrapper {
  width: 100%; // O un valor fijo si quieres que el contenido no ocupe todo el ancho
  text-align: center; // Si el contenido interno (h1, p) también debe centrarse
}
*/

/* --- FIN DEL CSS --- */