/*--------------------------------------------------------------
1. Reglas de visibilidad por breakpoint
--------------------------------------------------------------*/

/* Fuentes locales/externas usadas por el menú */
@font-face {
  font-family: "NeueHelveticaPro63ExtendedMedium";
  src: url('https://ohlab.net/wp-content/uploads/2025/09/font-1.woff') format('woff');
  font-display: swap;
}

/* Fuente para labels (Helvetica Neue regular) */
@font-face {
  font-family: "NeueHelveticaPro55Roman";
  src: url('https://ohlab.net/wp-content/uploads/2025/09/font.woff') format('woff');
  font-display: swap;
}


/* Ocultar header de escritorio en móvil/tablet */
@media (max-width: 1199px) {
  .site-header {
    display: none !important;
  }
}

/* Ocultar la barra móvil personalizada en escritorio */
@media (min-width: 1200px) {
  .mocm-topbar {
    display: none !important;
  }
}

/* Asegurar ocultar topbar también cuando el menú está abierto */
body.menu-abierto .mocm-topbar {
  display: none !important;
}


/*--------------------------------------------------------------
2. Botón hamburguesa
--------------------------------------------------------------*/

#mocm-toggle {
  display: block;
  position: fixed;
  top: 40px;
  right: 20px;
  z-index: 9999;
  font-size: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: black;
  
}

/* Ocultar el botón hamburguesa cuando el menú está abierto */
body.menu-abierto #mocm-toggle {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

body:not(.menu-abierto) #mocm-toggle {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s 0.8s; /* Aparece después de la animación del menú */
}


/*--------------------------------------------------------------
3. Offcanvas (menú desplegable)
--------------------------------------------------------------*/

#mocm-offcanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: #F5333F;
  color: black;
  transition: transform 1.2s cubic-bezier(.4,0,.2,1);
  z-index: 9999;
  padding: 0;
  /*opacity: 0;*/
  pointer-events: none;
  transform: translateY(-100%);
}

#mocm-offcanvas.open {
  /*opacity: 1;*/
  pointer-events: auto;
  transform: translateY(0);
}

/* Transición de contenido hacia abajo */
body.menu-abierto .elementor[data-elementor-type="wp-page"] {
  transition: transform 1s cubic-bezier(.4,0,.2,1);
  transform: translateY(100vh);
  will-change: transform;
}
body:not(.menu-abierto) .elementor[data-elementor-type="wp-page"] {
  transition: transform 1s cubic-bezier(.4,0,.2,1);
  transform: none;
}


/*--------------------------------------------------------------
4. Encabezado del offcanvas: logo + botón cerrar
--------------------------------------------------------------*/

.mocm-offcanvas-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  margin-bottom: 40px;
}

.mocm-logo-cerrar {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mocm-logo {
  display: flex;
  align-items: center;
  height: 56px;
}

.mocm-logo img {
  max-height: 48px;
  width: auto;
  display: block;
}

/* Botón cerrar */



/* Asegurar que el SVG ocupe el interior del botón y herede color */
#mocm-close svg {
  width: 50px;
  height: 50px;
  display: block;
  color: #000; /* para stroke=currentColor */
}

/* Alineación: colocar el SVG pegado a la derecha dentro del botón */
#mocm-close {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* empuja el SVG hacia la derecha */
  width: 50px;
  height: 50px;
  padding: 0px; /* pequeño espacio interior izquierdo para evitar que quede cortado */
  background: none;
  border: none;
}

#mocm-offcanvas:not(.open) #mocm-close {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

#mocm-offcanvas.open #mocm-close {
  opacity: 1;
  pointer-events: auto;
      background: none;
    border: none;
}


/*--------------------------------------------------------------
5. Menú de navegación
--------------------------------------------------------------*/

.mocm-menu {
  list-style: none!important;
  margin: 0 auto!important;
  padding: 0!important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mocm-menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mocm-menu li {
  margin-bottom: 20px;
}

.mocm-menu a {
  color: black;
  text-decoration: none;
  font-size: 34px;
  font-family: "NeueHelveticaPro63ExtendedMedium", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  
  transition: color 0.3s ease;
}

.mocm-menu a:hover,
.mocm-menu a:focus {
  color: #fff;
  transition: color 0.3s;
}


/*--------------------------------------------------------------
6. Switch de idiomas
--------------------------------------------------------------*/

.mocm-lang-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  margin-bottom: 0;
  font-family: "NeueHelveticaPro63ExtendedMedium", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Estructura switch */
.mocm-lang-switch .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.mocm-lang-switch .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mocm-lang-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  transition: .4s;
  border-radius: 34px;
}

.mocm-lang-switch .slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: #F5333F;
  transition: .4s;
  border-radius: 50%;
}

.mocm-lang-switch .switch input:checked + .slider {
  background-color: #000;
}

.mocm-lang-switch .switch input:checked + .slider:before {
  background-color: #F5333F;
  transform: translateX(22px);
}
.lang-label {
  transition: opacity 0.3s ease;
  /* Helvetica Neue regular 400 a 16px (usar la fuente suministrada si está disponible) */
  font-family: "NeueHelveticaPro55Roman", "Helvetica Neue", "NeueHelveticaPro63ExtendedMedium", system-ui, -apple-system, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
}

.lang-label.inactive {
  opacity: 0.3;
}

/*--------------------------------------------------------------
7. Topbar móvil (logo + botón hamburguesa)
--------------------------------------------------------------*/

.mocm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 10;
  background: #fff;
  pointer-events: none; /* Solo los hijos serán clicables */
  padding-left:20px;
  margin-top: -2px;
  box-sizing: border-box;
  padding-top:6px;
  padding-bottom:6px;
}

.mocm-topbar .mocm-logo {
  pointer-events: auto;
}

.mocm-topbar #mocm-toggle {
 
  pointer-events: auto;
  position: static;
}

/* Color de fondo al hacer scroll (si aplica) */
@media (max-width: 1023px) {
  .mocm-topbar {
    background: white !important;
  }
}
@media (max-width: 1023px) {
  #mocm-offcanvas {
    height: 100vh; /* ocupar toda la pantalla */
    padding: 0 20px;
    box-sizing: border-box;
  }

  .mocm-offcanvas-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Header se mantiene arriba */
  .mocm-offcanvas-header {
    flex: 0 0 auto; /* tamaño fijo */
    margin-bottom: 20px;
  }

  /* Zona del menú + switch ocupa el resto y centra su contenido */
  /* .mocm-menu y .mocm-lang-switch están dentro de .mocm-menu-wrapper */

  /* Añadimos un contenedor flex para menú + switch */
  .mocm-menu-wrapper {
    flex: 1 1 auto; /* ocupa todo el espacio restante */
    display: flex;
    flex-direction: column;
    justify-content: center; /* centro vertical */
    align-items: center; /* centro horizontal */
    gap: 40px; /* separación entre menú y switch */
  }

  /* Ajustes para el menú */
  .mocm-menu {
    width: 100%;
    max-width: 320px;
    margin: 0;
    padding: 0;
    text-align: center;
  }
}
/* Reglas generales móviles (menos de 1024px) */
@media (max-width: 1023px) {
  /* Fondo blanco general que queremos sobreescribir */
  .mocm-topbar {
    background: white !important;
  }

  /* Para la página 74 y su traducción en WPML, fondo transparente */
  body.page-id-74 .mocm-topbar,
  body.page-id-741 .mocm-topbar {
    background: transparent !important;
  }

  /* Botón hamburguesa blanco */
  body.page-id-74 #mocm-toggle,
  body.page-id-741 #mocm-toggle {
    color: white !important;
  }

  /* Intento invertir logo negro a blanco */
  body.page-id-74 .mocm-logo img,
  body.page-id-741 .mocm-logo img {
    filter: brightness(0) invert(1) !important;
  }
}

/* Alternar color del logo según estado del menú: cerrado -> blanco; abierto -> negro */
/* body.menu-abierto se añade cuando el offcanvas está abierto */
/* Sólo en la página de contacto: cerrado -> blanco; abierto -> negro */
body.page-id-74.menu-abierto .mocm-logo img,
body.page-id-741.menu-abierto .mocm-logo img {
  filter: none !important; /* logo negro cuando el menú esté abierto */
}

body.page-id-74:not(.menu-abierto) .mocm-logo img,
body.page-id-741:not(.menu-abierto) .mocm-logo img {
  filter: brightness(0) invert(1) !important; /* logo blanco cuando el menú esté cerrado */
}