/* ===== Fuente local Chaloops (bold) ===== */
@font-face{
  font-family:"Chaloops";
  src:url("../fonts/Chaloops-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ===== Tokens ===== */
:root{
  --nav-max: 1230px;

  /* Tipografía */
  --nav-font: "Chaloops", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nav-weight: 700;
  --nav-size: 22px;
  --nav-line: 1.1;

  /* Píldora */
  --pill-radius: 9999px;
  --pill-pad-y: 10px;
  --pill-pad-x: 18px;
  --gap: 28px;

  /* Colores */
  --c-header: #f4f4e0;   /* crema de la barra */
  --c-text:   #005290;
  --c-text-ac:#ffffff;
  --c-pill:   #eb0065;
  --c-outline:#2563EB;

  /* Ola */
  --wave-h: 65px;         /* altura de la ola (desktop base) */
}

/* ===== Navbar base ===== */
#navbar-main{
  position: relative;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 50;
}

/* Todo lo interno por encima de la ola/overlay */
#navbar-main .dlm-header,
#navbar-main .dlm-header__bar,
#navbar-main .container,
#navbar-main .navbar-collapse,
#navbar-main .region{
  background: transparent !important;
  position: relative;
  z-index: 3;
}

/* Aire inferior para que la ola no toque el texto */
#navbar-main .dlm-header__bar{
  max-width: var(--nav-max);
  margin: 0 auto;
  padding: 10px 16px clamp(12px, calc(var(--wave-h) * 0.5), 24px);
}

/* ===== Menú (desktop por defecto) ===== */
.dlm-nav__list{
  display:flex; align-items:center; gap:var(--gap);
  list-style:none; margin:0; padding:8px 0;
}
.dlm-nav__item{ position:relative; padding-bottom:10px; }
.dlm-nav__link{
  display:inline-block; text-decoration:none; color:var(--c-text);
  padding:var(--pill-pad-y) var(--pill-pad-x);
  border-radius:var(--pill-radius);
  font:var(--nav-weight) var(--nav-size)/var(--nav-line) var(--nav-font);
  transition:background .15s ease, color .15s ease;
  text-align:center;
}
.dlm-nav__title{
  display:block; font:inherit; max-width:210px; white-space:normal;
  line-height:1.05; text-wrap:balance; hyphens:auto;
}
.dlm-nav__link:hover,
.dlm-nav__link.is-active,
.dlm-nav__link[aria-current="page"]{
  background:var(--c-pill); color:var(--c-text-ac);
}

/* Submenús (desktop) */
.dlm-nav__sub{
  display:none; position:absolute; left:50%; transform:translateX(-50%);
  top: calc(100% - 2px); min-width:240px; padding:8px 0; z-index: 1000;
  background:#fff; border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.dlm-nav__item:hover  > .dlm-nav__sub,
.dlm-nav__item:focus-within > .dlm-nav__sub,
.dlm-nav__sub:hover{ display:block; }
.dlm-nav__sublink{ display:block; padding:10px 16px; white-space:nowrap; color:var(--c-text); text-decoration:none; }
.dlm-nav__sublink:hover{ background:#f6f6f6; }

/* Toggle móvil (oculto en desktop) */
.dlm-nav__expand{ display:none; background:transparent; border:0; padding:0; }
#navbar-main .dlm-nav__toggle{ display:none; }

/* Oculta la hamburguesa de Bootstrap y desactiva su collapse */
.navbar-toggler{ display:none !important; }
.navbar-collapse{ display:block !important; }

/* ===== MÓVIL ===== */
@media (max-width:1024px){
  /* botón hamburguesa visible en móvil */
  #navbar-main .dlm-nav__toggle{
    display:block !important;
    position:absolute; right:16px; top:10px;
    width:44px !important; height:36px !important;
    background:transparent; border:0; cursor:pointer;
  }
  /* barras y animación a “X” */
  .dlm-nav__toggle-bar{
    display:block; height:3px; margin:6px;
    background:var(--c-text); border-radius:2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .dlm-nav__toggle[aria-expanded="true"] .dlm-nav__toggle-bar:nth-child(1){
    transform: translateY(9px) rotate(45deg);
  }
  .dlm-nav__toggle[aria-expanded="true"] .dlm-nav__toggle-bar:nth-child(2){
    opacity: 0;
  }
  .dlm-nav__toggle[aria-expanded="true"] .dlm-nav__toggle-bar:nth-child(3){
    transform: translateY(-9px) rotate(-45deg);
  }

  /* panel del menú móvil (FONDO CREMA) */
  .dlm-nav__list{
    display:none; flex-direction:column; gap:12px; margin:0;

    position: absolute; left:0; right:0; top:100%;
    background: var(--c-header);            /* 👈 crema, como la barra */
    border-top: 1px solid #eadfd0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
    padding: 18px 16px 20px;

    z-index: 5; /* por encima de la ola */
  }
  .dlm-nav__list.is-open{ display:flex; }

  .dlm-nav__item{ width:100%; padding-bottom:0; }
  .dlm-nav__link{
    display:block; text-align:left;
    padding: 12px 8px;
    font-size: clamp(18px, 4vw, 22px);
  }
  .dlm-nav__title{ max-width:none; }

  /* 🚫 En móviles NO se abren submenús ni debe quedar espacio */
  .dlm-nav__expand{ display:none !important; }
  .dlm-nav__item > .dlm-nav__sub{
    display:none !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    height:0 !important; overflow:hidden !important;
  }
}

/* Accesibilidad */
.dlm-header a:focus-visible,
.dlm-nav__toggle:focus-visible{
  outline:3px solid var(--c-outline);
  outline-offset:2px;
  border-radius:12px;
}
@media (prefers-reduced-motion: reduce){ .dlm-nav__link{ transition:none; } }

/**********************************************Ola**********************************************************/
#navbar-main{ background: var(--c-header); }

/* Ola colgante */
header.header{
  position: relative;
  z-index: 10;
  overflow: visible;
  isolation: isolate;
}
#navbar-main{
  position: relative;
  z-index: 2;  /* nav > ola */
  background-color: #f4f4e0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#navbar-main .container,
#navbar-main .container-fluid,
#navbar-main .navbar,
#navbar-main .navbar-collapse,
#navbar-main .navbar-nav,
#navbar-main .region,
#navbar-main .block{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  position: relative;
  z-index: 3;
}

/* Ola (asegúrate que tenga z-index menor que el nav) */
.dlm-wave{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  height: 40px; /* móvil por defecto */
  margin-left: calc(-50vw + 50%);
  z-index: 1;        /* detrás del nav */
  pointer-events: none;
  background: url("/themes/custom/dlm_boostrap_sass/images/waves/header-wave-mobile.svg")
              center bottom / cover no-repeat;
}
@media (min-width: 768px){
  .dlm-wave{
    height: 50px;
    background-image: url("/themes/custom/dlm_boostrap_sass/images/waves/header-wave-tablet.svg");
  }
}
@media (min-width: 1200px){
  .dlm-wave{
    height: 28px;
    background-image: url("/themes/custom/dlm_boostrap_sass/images/waves/header-wave-desktop.svg");
  }
}

/* Submenús siempre al tope en desktop */
.dlm-nav__sub{
  position: absolute;
  z-index: 9999 !important;
}

#navbar-main .dlm-header__bar,
#navbar-main .navbar,
#navbar-main .container {
  padding-top: 0 !important;
  padding-bottom:0 !important;
  min-height: auto !important;
}


/* === Alinear logo + hamburguesa en el mismo riel ======================= */
#navbar-main{
  display: flex;                 /* el navbar es un riel */
  align-items: center;           /* centra verticalmente */
  gap: 12px;
}

/* El bloque del logo va a la izquierda y empuja el resto */
#navbar-main > .content {
  display: flex;
  align-items: center;
  margin-right: auto;            /* empuja el resto (menu) a la derecha */
}

/* El contenedor del menú ocupa el espacio restante */
#navbar-main .collapse.navbar-collapse{
  flex: 1 1 auto;
}

/* Asegura que la barra interna del menú sea un riel */
.dlm-header__bar{
  display: flex;
  align-items: center;
  position: relative; /* referencia para el panel móvil absoluto */
}

/* Escala del logo en el header (evita que sea muy alto en móvil) */
#navbar-main .logo-bogota{
  max-height: 50px;
  height: auto;
  width: auto;
  display: block;
}

/* === Móvil: hamburguesa dentro del riel, no absoluta =================== */
@media (max-width:1024px){
  /* Botón hamburguesa clásico */
  .dlm-nav__toggle {
    display: flex;
    flex-direction: column;       /* 👈 apila las barras una debajo de otra */
    justify-content: center;
    align-items: center;
    gap: 5px;                     /* espacio entre líneas */
    width: 44px;
    height: 36px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .dlm-nav__toggle-bar {
    display: block;
    width: 26px;                  /* 👈 ancho mayor (líneas horizontales) */
    height: 3px;                  /* 👈 grosor */
    background: var(--c-text);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }

  /* Animación al abrir */
  .dlm-nav__toggle[aria-expanded="true"] .dlm-nav__toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .dlm-nav__toggle[aria-expanded="true"] .dlm-nav__toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .dlm-nav__toggle[aria-expanded="true"] .dlm-nav__toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}


/* ===== Quitar bullets de todas las listas del menú ===== */
.dlm-nav__list,
.dlm-nav__sub,
#navbar-main ul {
  list-style: none !important;   /* elimina las viñetas */
  margin: 0 !important;          /* elimina márgenes por defecto */
  padding: 0 !important;         /* elimina padding por defecto */
}

/* Evita sangrías adicionales en items del menú */
.dlm-nav__item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}



/**************************************Videos de lenguaje de señas **************************************************/

/* ==== Tooltip de video de Lengua de Señas ==== */
.dlm-signvideo {
  position: absolute;
  top: calc(100% + 12px);         /* debajo del item */
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(.98);
  width: 220px;
  height: 140px;
  background: #fff;
  border: 2px solid #eb0065;      /* fucsia de tu paleta */
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;           /* no interfiere con el hover */
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;                  /* sobre la ola y todo */
}
.dlm-signvideo::after{            /* flechita opcional */
  content:"";
  position:absolute;
  top:-7px; left:50%; transform:translateX(-50%);
  border:7px solid transparent;
  border-bottom-color:#eb0065;
}

.dlm-signvideo.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.dlm-signvideo video {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* muestra todo el video sin recortarlo */
  background: #fff;      /* fondo blanco */
}

/* Solo mostrar en dispositivos con hover (desktop/laptop) */
@media (hover: none) {
  .dlm-signvideo { display: none !important; }
}



/****************************Desactivar Miga de pan *********************************/
.breadcrumb {
  display: none !important;
}