/* ═══════════════════════════════════════════════════════════
   menu_lutisuc.css
   Menú moderno para Lutisuc — reemplaza SpryMenuBarHorizontal.css
   Sin imágenes, sin Spry JS, CSS puro con animaciones suaves
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Montserrat:wght@400;500;600;700&display=swap');

/* ── Tipografía global del sitio ── */
body {
  font-family: 'Montserrat', Arial, sans-serif !important;
}
p, td, th, li, h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', Arial, sans-serif !important;
}
/* Títulos de sección en catálogos y boletines */
.seccion-titulo h2,
.intro h2 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}
/* Etiquetas de galería */
.año-etiqueta,
.año-count,
.galeria-item .overlay {
  font-family: 'Montserrat', Arial, sans-serif !important;
}

:root {
  /* Barra principal */
  --menu-rojo:        #EC214B;
  --menu-rojo-hover:  #ddb2b2b6;
  --menu-texto:       #FFFFFF;

  /* Submenús generales */
  --sub-bg:           #EB5C69;
  --sub-hover:        #f78b7f;
  --sub-texto:        #FFFFFF;

  /* Submenús de Etnias — paleta oficial */
  --etnia-sierra:     #784593;   /* morado  — Pueblos de la Sierra */
  --etnia-desierto:   #EE4723;   /* rojo    — Pueblos del Desierto */
  --etnia-valle:      #0D8336;   /* verde   — Pueblos del Valle */
  --etnia-pima:       #2F3191;   /* azul marino */
  --etnia-kikapu:     #00AAAD;   /* turquesa */
  --etnia-guarijio:   #AA4A9B;   /* morado oscuro */
  --etnia-seri:       #E71F26;   /* rojo */
  --etnia-papago:     #F7C52B;   /* amarillo dorado */
  --etnia-cucapa:     #F06022;   /* naranja */
  --etnia-mayo:       #22B34B;   /* verde */
  --etnia-yaqui:      #1B76BB;   /* azul */

  --fuente: 'Montserrat', Arial, sans-serif;
  --radio:  3px;
  --sombra: 0 6px 24px rgba(0,0,0,0.18);
  --trans:  0.22s ease;
}

/* ─────────────────────────────────────────────
   RESET BASE
───────────────────────────────────────────── */
#MenuBar1,
#MenuBar1 * {
  margin: 0;
  padding: 0;
  /*gap: 4px;   /* ← agregar esta línea, ajusta el número a tu gusto */
  /*border-right: 1px solid transparent;*/
  list-style: none;
  box-sizing: border-box;

}

/* ─────────────────────────────────────────────
   BARRA HORIZONTAL PRINCIPAL
───────────────────────────────────────────── */
#MenuBar1 {
  display: flex;
  width: 960px;
  background: transparent;
  font-family: var(--fuente);
  position: relative;
  z-index: 900;
  gap: 2px;
}

/* ─────────────────────────────────────────────
   ÍTEMS DE PRIMER NIVEL
───────────────────────────────────────────── */
#MenuBar1 > li {
  position: relative;
  flex: 1;
}

#MenuBar1 > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--menu-rojo);
  gap: 5px;
  height: 200px;
  min-width: 140px;
  padding: 0 14px;
  color: var(--menu-texto);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-right: 4px solid transparent;
  transition: background var(--trans);
  cursor: pointer;
}

#MenuBar1 > li > a:hover,
#MenuBar1 > li:hover > a {
  background: var(--menu-rojo-hover);
}

/* Flecha ▾ en ítems con submenú */
#MenuBar1 > li > a[class*="Submenu1"]::after,
#MenuBar1 > li > a[class*="Submenu2"]::after,
#MenuBar1 > li > a[class*="Submenu4"]::after,
#MenuBar1 > li > a[class*="Submenu5"]::after,
#MenuBar1 > li > a[class*="Submenu6"]::after {
  content: ' ▾';
  font-size: 0.65rem;
  opacity: 0.75;
}

/* ─────────────────────────────────────────────
   TEXTOS DE PRIMER NIVEL (reemplaza imágenes)
───────────────────────────────────────────── */
a.MenuBarItemSubmenu1::before  { content: 'Nosotros'; }
a.MenuBarItemSubmenu2::before  { content: 'Etnias de Sonora'; }
a.MenuBarItemSubmenu3::before  { content: 'Artesanías'; }
a.MenuBarItemSubmenu4::before  { content: 'Trabajo'; }
a.MenuBarItemSubmenu5::before  { content: 'Acciones'; }
a.MenuBarItemSubmenu6::before  { content: 'Líneas Estratégicas'; }

/* ─────────────────────────────────────────────
   SUBMENÚS — NIVEL 2
───────────────────────────────────────────── */
#MenuBar1 ul {
  display: flex;              /* ← cambiar block por flex */
  flex-direction: column;     /* ← agregar esta línea */
  position: absolute;
  top: 100%;
  left: 0;
   margin-top: 1px; 
  min-width: 220px;
  background: #FFF6E4;
  box-shadow: var(--sombra);
  border-radius: 0 0 var(--radio) var(--radio);
  z-index: 1000;
  gap: 1px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--trans), transform var(--trans);
}

/* Mostrar al hacer hover */
#MenuBar1 li:hover > ul {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ─────────────────────────────────────────────
   SUBMENÚS — NIVEL 3 (aparece a la derecha)
───────────────────────────────────────────── */
#MenuBar1 ul ul {
  top: 0;
  left: 100%;
  margin-left: 2px;    /* ← agregar esta línea */
  border-radius: 0 var(--radio) var(--radio) 0;
}

/* Ajuste cuando el submenú se corta a la derecha */
#MenuBar1 > li:last-child ul,
#MenuBar1 > li:nth-last-child(2) ul {
  left: auto;
  right: 0;
}
#MenuBar1 > li:last-child ul ul,
#MenuBar1 > li:nth-last-child(2) ul ul {
  left: auto;
  right: 100%;
}

/* ─────────────────────────────────────────────
   ÍTEMS DE SUBMENÚ
───────────────────────────────────────────── */
#MenuBar1 ul li {
  position: relative;
  width: 100%;
}

#MenuBar1 ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  color: var(--sub-texto);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: background var(--trans), padding-left var(--trans);
  cursor: pointer;
  background: var(--sub-bg);
}

#MenuBar1 ul li a:hover {
  background: var(--sub-hover);
  padding-left: 18px;
}

/* Flecha ▶ en ítems con sub-submenú */
#MenuBar1 ul li a[class*="sierra"]::after,
#MenuBar1 ul li a[class*="desierto"]::after,
#MenuBar1 ul li a[class*="valle"]::after,
#MenuBar1 ul li a[class*="programas"]::after,
#MenuBar1 ul li a[class*="acc"]::after {
  content: ' ▶';
  font-size: 0.6rem;
  opacity: 0.7;
  margin-left: 8px;
}

/* ─────────────────────────────────────────────
   TEXTOS DE SUBMENÚS (reemplaza imágenes)
───────────────────────────────────────────── */

/* Nosotros */
a.MenuBarItemSubmenuquees::before       { content: '¿Quiénes Somos?'; }
a.MenuBarItemSubmenutray::before        { content: 'Trayectoria'; }
a.MenuBarItemSubmenutray1997::before    { content: 'Trayectoria 1997–2016'; }
a.MenuBarItemSubmenutrayvision::before  { content: 'Visión de Cambio'; }
a.MenuBarItemSubmenutray2017::before    { content: 'Trayectoria 2017–2020'; }
a.MenuBarItemSubmenuaviso::before       { content: 'Aviso de Privacidad'; }
a.MenuBarItemSubmenutranspa::before     { content: 'Transparencia'; }
a.MenuBarItemSubmenuconta::before       { content: 'Contacto'; }

/* Etnias */
a.MenuBarItemSubmenusierra::before      { content: 'Pueblos de la Sierra'; }
a.MenuBarItemSubmenudesierto::before    { content: 'Pueblos del Desierto'; }
a.MenuBarItemSubmenuvalle::before       { content: 'Pueblos del Valle'; }
a.MenuBarItemSubmenupima::before        { content: 'Pima'; }
a.MenuBarItemSubmenukikapu::before      { content: 'Kikapú'; }
a.MenuBarItemSubmenuguari::before       { content: 'Guarijío'; }
a.MenuBarItemSubmenuseri::before        { content: 'Seri'; }
a.MenuBarItemSubmenupap::before         { content: 'Pápago'; }
a.MenuBarItemSubmenucucapa::before      { content: 'Cucapá'; }
a.MenuBarItemSubmenumayo::before        { content: 'Mayo'; }
a.MenuBarItemSubmenuyaqui::before       { content: 'Yaqui'; }

/* Trabajo */
a.MenuBarItemSubmenuprogramas::before   { content: 'Programas'; }
a.MenuBarItemSubmenuacc::before         { content: 'Acciones'; }
a.MenuBarItemSubmenuboletines::before   { content: 'Boletines'; }
a.MenuBarItemSubmenumusica::before      { content: 'Música'; }
a.MenuBarItemSubmenuvideos::before      { content: 'Videos'; }
a.MenuBarItemSubmenudescargas::before   { content: 'Publicaciones'; }
a.MenuBarItemSubmenuenlaces::before     { content: 'Centro de Documentación'; }

/* Programas */
a.MenuBarItemSubmenubi::before          { content: 'Bordando una Identidad'; }
a.MenuBarItemSubmenufa::before          { content: 'Foro Artesanal'; }
a.MenuBarItemSubmenuer::before          { content: 'Encuentro de Raíces'; }
a.MenuBarItemSubmenuaj::before          { content: 'Aprender Jugando'; }
a.MenuBarItemSubmenuea::before          { content: 'Emprendimiento Artesanal'; }
a.MenuBarItemSubmenuvinculacionestrategica::before { content: 'Vinculación Estratégica'; }

/* Acciones */
a.MenuBarItemSubmenuresigni::before     { content: 'Resignificación'; }
a.MenuBarItemSubmenupreserva::before    { content: 'Preservación'; }
a.MenuBarItemSubmenudifusion::before    { content: 'Difusión'; }

/* Líneas Estratégicas */
a.MenuBarItemSubmenudccic::before       { content: 'Desarrollo con Identidad Cultural'; }
a.MenuBarItemSubmenudfca::before        { content: 'Fortalecimiento Artesanal'; }
a.MenuBarItemSubmenudifvin::before      { content: 'Difusión y Vinculación'; }

/* ─────────────────────────────────────────────
   COLORES ESPECIALES — ETNIAS
   (se aplican solo a los ítems de submenú de etnias)
───────────────────────────────────────────── */
a.MenuBarItemSubmenusierra   { background: var(--etnia-sierra) !important; }
a.MenuBarItemSubmenudesierto { background: var(--etnia-desierto) !important; }
a.MenuBarItemSubmenuvalle    { background: var(--etnia-valle) !important; }

a.MenuBarItemSubmenupima     { background: var(--etnia-pima) !important; }
a.MenuBarItemSubmenukikapu   { background: var(--etnia-kikapu) !important; }
a.MenuBarItemSubmenuguari    { background: var(--etnia-guarijio) !important; }
a.MenuBarItemSubmenuseri     { background: var(--etnia-seri) !important; }
a.MenuBarItemSubmenupap      { background: var(--etnia-papago) !important; }
a.MenuBarItemSubmenucucapa   { background: var(--etnia-cucapa) !important; }
a.MenuBarItemSubmenumayo     { background: var(--etnia-mayo) !important; }
a.MenuBarItemSubmenuyaqui    { background: var(--etnia-yaqui) !important; }

a.MenuBarItemSubmenusierra:hover,
a.MenuBarItemSubmenudesierto:hover,
a.MenuBarItemSubmenuvalle:hover,
a.MenuBarItemSubmenupima:hover,
a.MenuBarItemSubmenukikapu:hover,
a.MenuBarItemSubmenuguari:hover,
a.MenuBarItemSubmenuseri:hover,
a.MenuBarItemSubmenupap:hover,
a.MenuBarItemSubmenucucapa:hover,
a.MenuBarItemSubmenumayo:hover,
a.MenuBarItemSubmenuyaqui:hover {
  filter: brightness(0.85);
  padding-left: 18px;
}

/* ─────────────────────────────────────────────
   OCULTAR las imágenes originales del Spry
   (el texto viene de ::before, no hace falta la imagen)
───────────────────────────────────────────── */
#MenuBar1 a {
  background-image: none !important;
  background-color: transparent;
  height: 36px !important;
  width: auto !important;
}

.pleca-lutisuc {
  
  display: block;
  margin: 20px 3px 0 3px;

 /*margin-top: 20px !important;*/
  /*display: block !important;*/
}