/* ==========================================================
   MENÚ PRINCIPAL – DataTur5Beta (Limpio + 3 niveles)
   Desktop: barra limpia + dropdown (hover)
   Móvil: acordeón (1º, 2º y 3º nivel con .open)
   ========================================================== */

:root{
  --dt-text:#000;
  --dt-accent:#9b2247;
  --dt-hover:rgba(131,11,62,.10);
  --dt-line:rgba(0,0,0,.10);
  --dt-shadow:0 10px 30px rgba(22,26,29,.12);
  --dt-radius:14px;
  --dt-font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* tamaños */
  --dt-fs-desktop: 18px; /* <- desktop “normal” */
  --dt-fs-mobile:  13px; /* <- móvil “chico” */
}

html,body{ font-family:var(--dt-font); }

/* =========================
   Header / barra
   ========================= */
header.menu-bar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  padding:10px 20px;
  background:#fff;
  position:relative;
  width:100%;
  z-index:1000;
  border-bottom:1px solid rgba(0,0,0,.12);
  overflow:visible;
}

header.menu-bar .logo{ flex:0 0 auto; }
header.menu-bar .logo img{ display:block; max-height:44px; }

/* =========================
   Menú principal (nivel 1)
   ========================= */
header.menu-bar > ul#mainMenu{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:0;
  padding:0;
  overflow:visible;
}

header.menu-bar > ul#mainMenu > li{ position:relative; }

/* Link base (TODOS niveles) */
header.menu-bar a{
  color:var(--dt-text);
  text-decoration:none;
  display:block;
  font-size:var(--dt-fs-desktop);
  padding:12px 14px;
  border-radius:12px;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}

/* Hover/focus (desktop y general) */
header.menu-bar li:hover > a,
header.menu-bar a:focus-visible{
  background:var(--dt-hover);
  color:var(--dt-accent);
  box-shadow:0 6px 18px rgba(96,7,48,.12);
  outline:none;
}

/* Activo */
header.menu-bar a.is-active{
  background:rgba(96,7,48,.14);
  color:#600730;
  box-shadow:0 6px 18px rgba(96,7,48,.14);
  font-weight:700;
}

/* Flecha para items con submenú (la clase la pone tu JS: toggle-submenu) */
header.menu-bar a.toggle-submenu{
  position:relative;
  padding-right:40px;
}
header.menu-bar a.toggle-submenu::after{
  content:"▾";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:#555;
  transition:transform .18s ease, color .18s ease;
}

/* En móvil (acordeón): cuando está abierto, gira flecha */
@media (max-width:768px){
  header.menu-bar li.open > a.toggle-submenu::after{
    transform:translateY(-50%) rotate(180deg);
    color:var(--dt-accent);
  }
}

/* =========================
   Submenús (desktop dropdown)
   ========================= */
header.menu-bar ul.submenu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  padding:10px;
  border:1px solid var(--dt-line);
  border-radius:var(--dt-radius);
  box-shadow:0 10px 30px rgba(22,26,29,.10);
  z-index:1200;
  min-width:320px;

  opacity:0;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease;
}

header.menu-bar ul.submenu li{ position:relative; }

/* 3er nivel desktop (a la derecha) */
header.menu-bar ul.submenu ul.submenu{
  top:0;
  left:100%;
  margin-left:10px;
  white-space:nowrap;
}

/* links dentro de dropdown */
header.menu-bar ul.submenu a{
  font-size:16px;
  padding:10px 12px;
  border-radius:12px;
}

/* Desktop: hover abre */
header.menu-bar li:hover > ul.submenu{
  display:block;
  opacity:1;
  transform:translateY(0);
}

/* =========================
   Hamburguesa
   ========================= */
.menu-toggle{
  display:none;
  margin-left:auto;
  font-size:2rem;
  cursor:pointer;
  color:var(--dt-text);
  padding:10px;
  z-index:2000;
}

/* =========================
   MÓVIL: acordeón real (1º,2º,3º)
   ========================= */
@media (max-width:768px){

  .menu-toggle{ display:block; }
  header.menu-bar .logo img{ max-height:40px; }

  /* Panel del menú */
  header.menu-bar > ul#mainMenu{
    display:none;               /* cerrado */
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;

    position:absolute;
    top:60px;
    left:0;
    right:0;
    width:100%;

    background:#fff;
    border-radius:var(--dt-radius);
    box-shadow:var(--dt-shadow);
    padding:8px;
    z-index:1999;

    max-height:calc(100vh - 120px);
    overflow:auto;
  }
  header.menu-bar > ul#mainMenu.show{ display:flex; }

  /* Letra chica en todos los niveles */
  header.menu-bar a{
    font-size:var(--dt-fs-mobile);
    padding:12px 14px;
    border-radius:12px;
    box-shadow:none;
  }

  /* 1er nivel como cards */
  header.menu-bar > ul#mainMenu > li{
    border:1px solid var(--dt-line);
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    margin:6px 0;
  }

  header.menu-bar > ul#mainMenu > li.open{
    border-color:rgba(131,11,62,.25);
    box-shadow:0 10px 26px rgba(96,7,48,.10);
  }

  /* En móvil: submenús en flujo (no absolute) */
  header.menu-bar ul.submenu{
    position:static !important;
    top:auto; left:auto; right:auto;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    box-shadow:none !important;
    border:0 !important;
    min-width:unset !important;
    white-space:normal !important;

    display:none; /* cerrado por defecto */
    padding:0;
    margin:0;
  }

  /* Quita hover-open en móvil */
  header.menu-bar li:hover > ul.submenu{ display:none; }

  /* Acordeón: se abre con .open (UL directo) */
  header.menu-bar li.open > ul.submenu{ display:block !important; }

  /* 2º nivel: panel suave */
  header.menu-bar > ul#mainMenu > li.open > ul.submenu{
    background:rgba(0,0,0,.02);
    border-top:1px solid var(--dt-line);
    border-radius:12px;
    margin:8px 10px 10px;
    padding:8px 10px;
  }

  /* 3er nivel: panel anidado con borde lateral */
  header.menu-bar ul.submenu li.open > ul.submenu{
    background:rgba(0,0,0,.03);
    border-left:3px solid rgba(131,11,62,.25);
    border-radius:12px;
    margin:8px 10px 10px;
    padding:8px 10px;
  }

  /* Indentación + mismo tamaño */
  header.menu-bar ul.submenu a{
    font-size:var(--dt-fs-mobile);
    padding:10px 12px;
    padding-left:18px;
  }
  header.menu-bar ul.submenu ul.submenu a{
    font-size:var(--dt-fs-mobile);
    padding-left:30px;
  }

  /* Separadores suaves en 2º nivel */
  header.menu-bar > ul#mainMenu > li.open > ul.submenu > li + li{
    border-top:1px dashed rgba(0,0,0,.08);
  }
}

/* =========================
   Desktop angosto: invierte últimos 2 dropdowns para no cortar
   ========================= */
@media (max-width:1200px){
  header.menu-bar > ul#mainMenu > li:nth-last-child(-n+2) > ul.submenu{
    left:auto;
    right:0;
  }
  header.menu-bar > ul#mainMenu > li:nth-last-child(-n+2) ul.submenu ul.submenu{
    left:auto;
    right:100%;
    margin-left:0;
    margin-right:10px;
  }
}