/* =========================================================
   1) SLIDER / HERO: TIPOGRAFÍA + BOTÓN + TEXTO
   ========================================================= */

/* Fuente y centrado general del contenido del slider */
.slider-wrapper .theme-content{
  text-align: center !important;
  font-family: 'Poppins','Montserrat','Lato',sans-serif !important;
  overflow: visible !important;
  padding: 0 10px !important;
}

/* Botón del slider */
.slider-wrapper .theme-content a,
.slider-wrapper .theme-content button{
  background-color: #c62828 !important;
  color: #fff !important;
  font-family: 'Poppins','Montserrat','Lato',sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  text-transform: none !important;
  display: inline-block !important;
  margin: 10px auto 0 auto !important;
  transition: all 0.3s ease !important;
}

/* Hover botón */
.slider-wrapper .theme-content a:hover,
.slider-wrapper .theme-content button:hover{
  background-color: #a81f1f !important;
  transform: scale(1.03);
}

/* Texto del slider (frase) */
.slider-wrapper .theme-content p{
  font-family: 'Poppins','Montserrat','Lato',sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #fff !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  display: block !important;
  margin: 0 auto 2px auto !important;
  max-width: 95% !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.40) !important;
}

/* Ajuste vertical del bloque de contenido dentro del slider */
.slider-wrapper .theme-content{
  margin-top: 40px !important;
}


/* =========================================================
   2) SLIDER A PANTALLA COMPLETA EN MÓVILES (sin blanco)
   ========================================================= */
@media (max-width: 768px){

  .slider-wrapper .item,
  .slider-wrapper .theme-slider,
  .slider-wrapper .theme-table,
  .slider-wrapper .theme-table-cell{
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .slider-wrapper img{
    height: 100vh !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Quitar cualquier fondo/sombra “cuadro” detrás del texto */
  .slider-wrapper .theme-content{
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 65px !important; /* Ajusta si quieres subir/bajar */
  }

  /* Botón y texto un poco más pequeños en móvil */
  .slider-wrapper .theme-content a,
  .slider-wrapper .theme-content button{
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    min-width: 120px !important;
  }

  .slider-wrapper .theme-content p{
    font-size: 13px !important;
    margin-bottom: 1px !important;
  }
}


/* =========================================================
   3) MENÚ ESCRITORIO (moderno, visible)
   ========================================================= */
@media (min-width: 992px){

  .theme-menu,
  .theme-menu a,
  .menubar a,
  .menu-wrap a,
  .nav-link,
  .dropdown-item{
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.40) !important;
    transition: all 0.3s ease !important;
  }

  .theme-menu a:hover,
  .menubar a:hover,
  .menu-wrap a:hover,
  .nav-link:hover,
  .dropdown-item:hover{
    color: #f4b400 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.50) !important;
    transform: scale(1.05);
  }

  .theme-menu{
    background-color: rgba(0,0,0,0.35) !important;
    backdrop-filter: blur(5px);
    border-radius: 8px !important;
    padding: 6px 12px !important;
  }

  .theme-menu .dropdown-menu{
    background-color: rgba(0,0,0,0.85) !important;
    border: none !important;
    border-radius: 6px !important;
  }

  .theme-menu .dropdown-menu a{
    color: #ffffff !important;
    padding: 8px 14px !important;
  }

  .theme-menu .dropdown-menu a:hover{
    background-color: #c62828 !important;
    color: #fff !important;
  }
}


/* =========================================================
   4) MENÚ MÓVIL: “Menú” completo con sombra + funciona al click
   ========================================================= */
@media (max-width: 768px){

  /* Ocultar los 3 puntitos (botón redes/compartir) */
  .header-above-toggle{
    display: none !important;
  }

  /* Evitar recortes del tema (el típico 35x35 / overflow hidden) */
  .theme-mobile-menu,
  .theme-mobile-menu .menu-toggle-wrap,
  .theme-mobile-menu .mobile-menu-right,
  .theme-mobile-menu .hamburger,
  .theme-mobile-menu .hamburger.hamburger-menu{
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  /* Empuja el área del botón para que no lo corte la orilla */
  .theme-mobile-menu .menu-toggle-wrap{
    display: flex !important;
    justify-content: flex-end !important;
    padding-right: 14px !important;
  }

  /* ✅ ESTE ES EL BOTÓN REAL: no lo reemplazamos, solo lo estilizamos */
  button.toggle-lines.menu-toggle{
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 96px !important;   /* para que quepa “Menú” */
    height: 36px !important;

    padding: 0 14px !important;
    background: rgba(0,0,0,0.70) !important;
    border: none !important;
    border-radius: 999px !important;

    white-space: nowrap !important;
    overflow: visible !important;
    box-sizing: border-box !important;

    z-index: 9999 !important;
    pointer-events: auto !important;
  }

  /* Ocultamos las 3 rayitas (para dejar solo el texto) */
  button.toggle-lines.menu-toggle .top-bun,
  button.toggle-lines.menu-toggle .meat,
  button.toggle-lines.menu-toggle .bottom-bun{
    display: none !important;
  }

  /* Texto “Menú” CON sombra dentro del mismo botón (clickeable) */
  button.toggle-lines.menu-toggle::after{
    content: "Menú";
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.75) !important;
  }

  /* Hover (solo si el móvil lo soporta) */
  button.toggle-lines.menu-toggle:hover{
    background: rgba(0,0,0,0.85) !important;
    transform: scale(1.03);
    transition: 0.2s ease;
  }
}