/* Cabecera dronblogs — extraida del diseno de la portada nueva.
   Convive con Astra: todo va prefijado .db-* y nada toca selectores del tema. */

:root { --db-nav-h: 70px; }

/* la barra tapa el contenido: se le hace hueco al documento */
body.db-con-barra #page { padding-top: var(--db-nav-h); }
body.db-con-barra { scroll-padding-top: calc(var(--db-nav-h) + 12px); }

.db-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  transition: border-color 280ms ease; border-bottom: 1px solid transparent; }
.db-nav::before { content: ""; position: absolute; inset: 0; opacity: 0;
  background: rgba(12,12,12,0.58); transition: opacity 280ms ease; }
/* fuera de la portada la barra nace ya con cristal: debajo hay contenido claro
   y sin fondo el texto se leeria a traves */
.db-nav--vidrio::before { opacity: 1;
  -webkit-backdrop-filter: blur(18px) saturate(1.12); backdrop-filter: blur(18px) saturate(1.12); }
.db-nav--vidrio { border-bottom-color: rgba(255,255,255,0.09); }
/* respaldo para navegadores sin backdrop-filter: negro solido en vez de translucido */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .db-nav--vidrio::before { background: rgba(12,12,12,0.94); }
}

.db-nav-in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto;
  padding: 17px clamp(18px, 4vw, 46px) 15px;
  display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); }

.db-marca { flex: 0 0 auto; display: block; line-height: 0;
  opacity: 0; transform: translateY(-7px); pointer-events: none;
  transition: opacity 340ms ease, transform 420ms cubic-bezier(0.16,0.84,0.3,1); }
.db-marca img { display: block; width: clamp(112px, 11vw, 136px); height: auto; opacity: 0.94; }
.db-marca:hover img { opacity: 1; }
.db-nav--vidrio .db-marca { opacity: 1; transform: none; pointer-events: auto; }
.db-nav.db-abierto .db-marca { opacity: 0; transform: translateY(-7px); pointer-events: none; }

.db-menu { margin-left: auto; }
.db-lista { display: flex; align-items: center; gap: clamp(4px, 1.1vw, 16px);
  margin: 0; padding: 0; list-style: none; }
.db-lista li { margin: 0; list-style: none; }        /* Astra pone margenes a los li */
.db-grupo { position: relative; padding: 12px 0; }
.db-cab { display: block; padding: 7px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.015em; color: #C4C5CD; text-decoration: none; white-space: nowrap;
  transition: color 180ms ease, background 180ms ease; }
.db-cab:hover, .db-cab:focus { color: #FFFFFF; text-decoration: none; }
.db-grupo:hover .db-cab, .db-grupo:focus-within .db-cab { color: #FFFFFF; background: rgba(255,255,255,0.07); }

.db-sub { position: absolute; top: 100%; left: 0; min-width: 262px; padding: 8px; display: grid; gap: 1px;
  border-radius: 13px; background: rgba(18,18,18,0.74); border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 26px 64px rgba(0,0,0,0.58);
  opacity: 0; visibility: hidden; transform: translateY(-7px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.16,0.84,0.3,1), visibility 240ms; }
.db-grupo:hover .db-sub, .db-grupo:focus-within .db-sub { opacity: 1; visibility: visible; transform: none; }
.db-sub a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.35;
  color: #B4B5BD; text-decoration: none; transition: color 160ms ease, background 160ms ease; }
.db-sub a:hover, .db-sub a:focus { color: #FFFFFF; background: rgba(255,255,255,0.08); text-decoration: none; }
/* el ultimo grupo abre su panel hacia dentro para no salirse por la derecha */
.db-grupo:last-child .db-sub { left: auto; right: 0; }

.db-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto;
  width: 42px; height: 38px; padding: 0 9px; border: 1px solid rgba(255,255,255,0.14); border-radius: 9px;
  background: rgba(255,255,255,0.05); cursor: pointer; }
.db-burger span { display: block; height: 1.5px; background: #E6E8EC; border-radius: 2px;
  transition: transform 260ms cubic-bezier(0.16,0.84,0.3,1), opacity 180ms ease; }
.db-nav.db-abierto .db-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.db-nav.db-abierto .db-burger span:nth-child(2) { opacity: 0; }
.db-nav.db-abierto .db-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .db-burger { display: flex; }
  .db-marca, .db-burger { position: relative; z-index: 2; }
  .db-menu { position: fixed; inset: 0; margin: 0; padding: 68px clamp(20px, 6vw, 44px) 44px; overflow-y: auto;
    background: rgba(10,10,10,0.88);
    -webkit-backdrop-filter: blur(26px) saturate(1.1); backdrop-filter: blur(26px) saturate(1.1);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 260ms ease, transform 300ms cubic-bezier(0.16,0.84,0.3,1), visibility 300ms; }
  .db-nav.db-abierto .db-menu { opacity: 1; visibility: visible; transform: none; }
  .db-lista { flex-direction: column; align-items: stretch; gap: 0; }
  .db-grupo { padding: 0; border-top: 1px solid rgba(255,255,255,0.08); }
  .db-grupo:first-child { border-top: none; }
  .db-cab { padding: 17px 2px 11px; border-radius: 0; font-family: 'Libre Bodoni', Georgia, serif;
    font-style: italic; font-weight: 600; text-transform: uppercase; font-size: 1.04rem;
    letter-spacing: 0.005em; color: #E6E8EC; white-space: normal; }
  .db-grupo:hover .db-cab, .db-grupo:focus-within .db-cab { background: none; }
  .db-sub { position: static; min-width: 0; padding: 0 0 15px; gap: 0; border: none; box-shadow: none;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    opacity: 1; visibility: visible; transform: none; transition: none; }
  .db-grupo:last-child .db-sub { right: auto; }
  .db-sub a { padding: 8px 2px; font-size: 13px; color: #9C9C9C; }
  .db-sub a:hover { background: none; }
  .db-grupo--suelto .db-cab { padding-bottom: 17px; }
}

/* la barra de admin de WP empuja el documento: solo lo ve quien tiene sesion */
body.admin-bar .db-nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .db-nav { top: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar .db-nav { top: 0; } }

@media (prefers-reduced-motion: reduce) {
  .db-nav, .db-nav::before, .db-marca, .db-sub, .db-burger span { transition-duration: 1ms; }
}