/* ==========================================================================
   Archivo: mto_tienda.css
   Fecha: 2026-02-02
   Template asociado: tienda.html
   Validación:
   - Mobile 360/414 OK, sin empujar hero
   - Desktop 1024/1366+ OK, centrado y limpio
   - Sin !important
   ========================================================================== */

:root{
  --mto_altura_nav: 64px;

  --mto_color_nav: #5af139;
  --mto_color_texto: #0b0b0b;

  --mto_menu_fondo: #ffffff;
  --mto_menu_borde: rgba(15, 15, 15, 0.12);
  --mto_menu_sombra: rgba(0, 0, 0, 0.18);

  --mto_menu_radio: 18px;
  --mto_menu_espacio: 10px;

  --mto_item_radio: 12px;
  --mto_item_hover: rgba(90, 241, 57, 0.14);

  --mto_ancho_maximo: 1320px;

  --mto_overlay: rgba(0,0,0,.28);
  --mto_blur: 2px;
}

/* =========================================================
   SKIP LINK
   ========================================================= */
.mto_saltar_contenido{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 8px 14px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  text-decoration: none;
}
.mto_saltar_contenido:focus-visible{
  left: 12px;
  top: 12px;
}

/* =========================================================
   NAV (base)
   ========================================================= */
.mto_nav{
  background: var(--mto_color_nav);
  color: var(--mto_color_texto);
  position: relative;
}

/* Fila centrada (mobile) */
.mto_nav__contenedor{
  min-height: var(--mto_altura_nav);
  width: min(var(--mto_ancho_maximo), 100%);
  margin-inline: auto;
  padding-inline: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mto_nav__marca{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.mto_nav__logo{
  display: block;
  width: 160px;
  height: auto;
}

/* =========================================================
   FIX: Visibilidad responsive (anti legacy)
   ========================================================= */
.mto_nav .mto_solo_escritorio{ display: none; }
.mto_nav .mto_solo_movil{ display: block; }

@media (min-width: 992px){
  .mto_nav .mto_solo_escritorio{ display: block; }
  .mto_nav .mto_solo_movil{ display: none; }
}

/* =========================================================
   Acceso público (mobile)
   ========================================================= */
.mto_nav__acceso{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mto_nav__enlace{
  color: rgba(11, 11, 11, .88);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 10px;
}
.mto_nav__enlace:focus-visible{
  outline: 2px solid #111;
  outline-offset: 2px;
}

.mto_nav__boton_cuenta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: #0b0b0b;
  color: #fff;
  text-decoration: none;
}

/* =========================================================
   Hamburguesa (MTO)
   ========================================================= */
.mto_nav__boton_menu{
  appearance: none;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.45);
  border-radius: 14px;
  width: 46px;
  height: 42px;

  display: inline-grid;
  place-items: center;

  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

.mto_nav__boton_menu:focus-visible{
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* Nuestro icono (3 líneas) */
.mto_nav__icono_menu{
  width: 22px;
  height: 14px;
  position: relative;
  display: block;
  background: rgba(11, 11, 11, .86);
  border-radius: 999px;
  height: 2px;
  transition: opacity 140ms ease;
}

.mto_nav__icono_menu::before,
.mto_nav__icono_menu::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(11, 11, 11, .86);
  transition: transform 160ms ease, top 160ms ease, bottom 160ms ease;
}

.mto_nav__icono_menu::before{ top: -6px; }
.mto_nav__icono_menu::after{ bottom: -6px; }

/* Animación a “X” cuando aria-expanded=true */
.mto_nav__boton_menu[aria-expanded="true"] .mto_nav__icono_menu{
  opacity: 0;
}
.mto_nav__boton_menu[aria-expanded="true"] .mto_nav__icono_menu::before{
  top: 0;
  transform: rotate(45deg);
}
.mto_nav__boton_menu[aria-expanded="true"] .mto_nav__icono_menu::after{
  bottom: 0;
  transform: rotate(-45deg);
}

/* =========================================================
   DEFENSA ANTI BOOTSTRAP (solo dentro del nav MTO)
   ========================================================= */
.mto_nav .navbar-toggler-icon{
  background-image: none;
  background: transparent;
  width: 22px;
  height: 14px;
  position: relative;
  display: block;
}

/* 3 líneas para el toggler legacy */
.mto_nav .navbar-toggler-icon::before,
.mto_nav .navbar-toggler-icon::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(11, 11, 11, .86);
}
.mto_nav .navbar-toggler-icon::before{ top: 1px; }
.mto_nav .navbar-toggler-icon::after{ bottom: 1px; }

/* línea del medio */
.mto_nav .navbar-toggler-icon{
  box-shadow: 0 6px 0 rgba(11, 11, 11, .86);
}

/* =========================================================
   Panel menú
   ========================================================= */
.mto_nav__panel{
  display: none;
}
.mto_nav__panel.show{
  display: block;
}

/* MOBILE overlay: NO empuja contenido */
@media (max-width: 991.98px){
  .mto_nav__panel{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    padding: 14px 0 18px;
    z-index: 300;

    background: transparent;
  }
}

/* =========================================================
   DESKTOP: TODO EN UNA SOLA LÍNEA (logo + links)
   ========================================================= */
@media (min-width: 992px){
  .mto_nav{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* Logo a la izquierda */
  .mto_nav__contenedor{
    width: auto;
    margin: 0;
    padding-left: 14px;
    padding-right: 10px;
    flex: 0 0 auto;
  }

  /* Links a la derecha (misma fila) */
  .mto_nav__panel{
    display: block;
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    padding-right: 14px;
    padding-left: 0;
    min-width: 0;
  }
}

/* Lista */
.mto_nav__lista{
  margin: 0;
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 0;

  width: min(var(--mto_ancho_maximo), 100%);
  margin-inline: auto;
}

@media (max-width: 991.98px){
  .mto_nav__lista{
    width: 100%;
    padding: 0;
  }
}

@media (min-width: 992px){
  .mto_nav__lista{
    width: auto;
    margin: 0;

    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 14px;

    min-height: var(--mto_altura_nav);
  }
}

.mto_nav__separador_vertical{
  width: 1px;
  height: 24px;
  display: inline-block;
  background: rgba(0,0,0,.16);
}

/* =========================================================
   Overlay transparente (fondo detrás del menú mobile)
   ========================================================= */
.mto_menu_principal_abierto::before{
  content: "";
  position: fixed;
  inset: 0;
  background: var(--mto_overlay);
  backdrop-filter: blur(var(--mto_blur));
  z-index: 250;
}
.mto_menu_principal_abierto::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 260;
  cursor: pointer;
}
.mto_menu_principal_abierto .mto_nav__panel{
  z-index: 300;
}

/* =========================================================
   Menú usuario (card)
   ========================================================= */
.mto_menu_usuario{
  display: none;
  list-style: none;
  margin: 10px 0 0;
  padding: var(--mto_menu_espacio);

  background: var(--mto_menu_fondo);
  border: 1px solid var(--mto_menu_borde);
  border-radius: var(--mto_menu_radio);
  box-shadow: 0 18px 50px var(--mto_menu_sombra);
  min-width: 280px;
}
.mto_menu_usuario.show{ display: block; }

.mto_menu_usuario__separador{
  border: 0;
  border-top: 1px solid rgba(0,0,0,.10);
  margin: 10px 6px;
  opacity: .35;
}

.mto_menu_usuario__item{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 12px;
  border-radius: var(--mto_item_radio);

  text-decoration: none;
  color: var(--mto_color_texto);
  line-height: 1.2;
}

.mto_menu_usuario__item:hover{
  background: var(--mto_item_hover);
}
.mto_menu_usuario__item:focus-visible{
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* Mobile: card centrada */
@media (max-width: 991.98px){
  .mto_menu_usuario--movil{
    display: block;
    min-width: auto;
    width: min(420px, calc(100% - 24px));
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0,0,0,.16);
  }
}

/* =========================================================
   DESKTOP – CONTENEDOR CENTRADO REAL (FIX FINAL)
   ========================================================= */
@media (min-width: 992px){
  .mto_nav{
    justify-content: center;
  }

  .mto_nav__contenedor,
  .mto_nav__panel{
    max-width: var(--mto_ancho_maximo);
  }

  .mto_nav__contenedor{
    margin-left: 0;
    margin-right: auto;
    padding-left: 14px;
  }

  .mto_nav__panel{
    margin-left: auto;
    margin-right: 0;
    padding-right: 14px;
  }

  .mto_nav__lista{
    justify-content: flex-end;
  }
}

.mto_nav__envoltorio{
  width: min(var(--mto_ancho_maximo), 100%);
  margin-inline: auto;
  padding-inline: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-height: var(--mto_altura_nav);
}

@media (min-width: 992px){
  .mto_nav__panel{
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .mto_nav__lista{
    width: auto;
    margin: 0;
    padding: 0;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
  }
}

/* =========================================================
   NAV PUBLICO – AJUSTE FINO MOBILE
   ========================================================= */
.mto_nav__acceso{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

@media (max-width: 480px){
  .mto_nav__envoltorio{
    min-height: 56px;
    padding-inline: 10px;
  }

  .mto_nav__logo{
    width: 120px;
    height: auto;
  }

  .mto_nav__acceso{
    gap: 6px;
  }

  .mto_nav__enlace{
    font-size: 13px;
    padding: 4px 6px;
    line-height: 1;
  }

  .mto_nav__boton_cuenta{
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 999px;
    line-height: 1;
  }
}

@media (max-width: 360px){
  .mto_nav__logo{
    width: 108px;
  }

  .mto_nav__enlace{
    font-size: 12px;
  }

  .mto_nav__boton_cuenta{
    font-size: 12px;
    padding: 5px 8px;
  }
}

/* =========================================================
   DESKTOP: Dropdown usuario como overlay
   ========================================================= */
@media (min-width: 992px){
  .mto_nav__item{
    position: relative;
  }

  .mto_menu_usuario{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;

    margin: 0;
    z-index: 400;

    min-width: 300px;
    max-width: 360px;
  }
}

/* =========================================================
   Overlay / blur para menú usuario
   ========================================================= */
.mto_menu_usuario_abierto::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
  z-index: 250;
}
.mto_menu_usuario_abierto::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 260;
  cursor: pointer;
}
.mto_menu_usuario_abierto .mto_menu_usuario{
  z-index: 400;
}



/* Solo links normales (no botón cuenta) */
.mto_nav a:not(.mto_nav__boton_cuenta):hover,
.mto_nav a:not(.mto_nav__boton_cuenta):active,
.mto_nav a:not(.mto_nav__boton_cuenta):focus{
  color: rgba(11, 11, 11, .88);
  text-decoration: none;
}

.mto_menu_usuario__item{
  color: rgba(11, 11, 11, .92);
  background: transparent;
}

.mto_menu_usuario__item:hover{
  background: rgba(90, 241, 57, .14);
  color: rgba(11, 11, 11, .92);
}

.mto_menu_usuario__item:active{
  background: rgba(90, 241, 57, .18);
  color: rgba(11, 11, 11, .92);
}

.mto_menu_usuario__item:focus{
  outline: none;
}

/* =========================================================
   Notificaciones: badge verde translúcido para SVG
   ========================================================= */
.mto_menu_usuario__item svg{
  flex: 0 0 auto;
}

.mto_menu_usuario__item[href*="notificaciones"] svg{
  width: 18px;
  height: 18px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(90, 241, 57, .35);
  color: rgba(11, 11, 11, .92);
}

.mto_menu_usuario__item[href*="notificaciones"] svg path{
  fill: currentColor;
}

/* =========================================================
   FIX: Overlay no debe tapar el header
   ========================================================= */
.mto_encabezado{
  position: sticky;
  top: 0;
  z-index: 600;
}

.mto_nav{
  position: relative;
  z-index: 610;
}

.mto_menu_usuario{
  z-index: 700;
}

.mto_menu_usuario_abierto::before{ z-index: 200; }
.mto_menu_usuario_abierto::after{ z-index: 210; }

/* =========================================================
   ICONO NOTIFICACIONES – versión moderna Tiendálo
   ========================================================= */
.mto_nav_notificacion svg{
  width: 18px;
  height: 18px;
  fill: var(--mto_color_marca);
  flex-shrink: 0;
}

.mto_nav_notificacion{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mto_color_marca) 18%, transparent);
}

.mto_icono_notificacion svg{
  fill: var(--color-verde-tiendaló);
  stroke: var(--color-verde-tiendaló);
}

.mto_nav__boton_cuenta{
  color: #5af139;
  text-decoration: none;
}

.mto_nav__boton_cuenta:hover,
.mto_nav__boton_cuenta:focus,
.mto_nav__boton_cuenta:active,
.mto_nav__boton_cuenta:visited{
  color: #5af139;
  text-decoration: none;
}

@media (max-width: 991.98px) and (orientation: landscape){

  /* 1) El contenedor padre (panel) NO debe cortar el contenido */
  .mto_nav__panel.show{
    /* deja visible el nav y usa el alto restante */
    max-height: calc(100dvh - var(--mto_altura_nav, 64px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* un poco menos de aire en landscape */
    padding: 8px 0 10px;
  }

  /* 2) Card del menú usuario: más compacto */
  .mto_menu_usuario--movil{
    width: min(380px, calc(100% - 20px));
    padding: 8px;
    border-radius: 14px;
  }

  .mto_menu_usuario__item{
    padding: 10px 10px;
    font-size: 14px;
    line-height: 1.15;
  }

  .mto_menu_usuario__separador{
    margin: 8px 6px;
  }
}

/* Fallback extra para Safari/iOS cuando dvh se porta raro */
@supports (height: 100svh){
  @media (max-width: 991.98px) and (orientation: landscape){
    .mto_nav__panel.show{
      max-height: calc(100svh - var(--mto_altura_nav, 64px));
    }
  }
}

.mto_overlay_captura{
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 260;
}

.mto_menu_principal_abierto::before,
.mto_menu_principal_abierto::after,
.mto_menu_usuario_abierto::before,
.mto_menu_usuario_abierto::after{
  pointer-events: none;
}

/* Overlay REAL (captura) — debe quedar arriba del fondo, abajo del menú */
.mto_overlay_captura{
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: auto;

  /* importante: arriba de 260 (pseudo), abajo del panel (300) */
  z-index: 295;
}