/* ===== Header Live Developer - Mobile First ===== */

/* Estructura básica */
.ld-header{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--ld-border); }
.ld-header__inner{ padding:10px 0; }
.ld-header__logo img{ height:36px; width:auto; }

/* Menú desktop oculto por defecto (mobile first) */
.ld-nav{ display:none; }

/* Burger visible en mobile */
.ld-burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--ld-border); border-radius:10px; background:#fff;
}
.ld-burger__bar{ width:20px; height:2px; background:#0f172a; margin:2px 0; display:block; }

/* CTA */
.ld-header__cta{ padding:.6rem 1rem; }

/* Overlay y Drawer */
.ld-drawer__overlay{
  position:fixed; inset:0; background: rgba(6, 24, 38, .45);
  opacity:0; pointer-events:none; transition: opacity .28s ease;
  z-index: 9997;
}
.ld-drawer{
  position: fixed; inset:0 0 0 auto; /* derecha */
  width: min(86vw, 420px); height:100vh;
  transform: translateX(100%);
  transition: transform .28s ease;
  background:#fff; box-shadow: -24px 0 60px rgba(0,0,0,.16);
  padding:18px 18px 28px; z-index: 9998;
  display:flex; flex-direction:column;
}
.ld-drawer__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.ld-drawer__brand img{ height:35px; width:auto; }
.ld-drawer__close{ width:40px; height:40px; display:inline-grid; place-items:center; border-radius:10px; background:#f5f7f9; border:1px solid var(--ld-border); }
.ld-drawer__scroll{ overflow:auto; padding:10px 2px 14px; -webkit-overflow-scrolling: touch; }
.ld-drawer__nav .menu-item{ border-bottom:1px solid rgba(0,0,0,.05); }
.ld-drawer__nav .menu-item a{ display:block; padding:14px 4px; font-size:1.05rem; font-weight:600; color:#1f2937; }
.ld-drawer__nav .menu-item a:hover{ color: var(--ld-primary); }
.ld-divider{ height:1px; background:rgba(0,0,0,.06); margin:8px 0 12px; }
.ld-drawer__footer{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(0,0,0,.06); }
.ld-drawer__cta{ margin-bottom:10px; }
.ld-social{ display:flex; gap:.5rem; }
.ld-social a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; background:#eaf7fc; color: var(--ld-primary); }
.ld-meta{ font-size:.9rem; color:var(--ld-muted); }

/* Estados abiertos */
body.menu-open .ld-drawer{ transform: translateX(0); }
body.menu-open .ld-drawer__overlay{ opacity:1; pointer-events:auto; }
body.menu-open{ overflow:hidden; }

/* Header shrink on scroll */
body.header-shrink .ld-header{ box-shadow: 0 8px 24px rgba(0,0,0,.08); }
body.header-shrink .ld-header__inner{ padding:6px 0; }
body.header-shrink .ld-header__logo img{ height:32px; }

/* Admin bar fix */
body.ld--adminbar .ld-drawer{ top:32px; height: calc(100vh - 32px); }
@media (max-width:782px){
  body.ld--adminbar .ld-drawer{ top:46px; height: calc(100vh - 46px); }
}

/* ====== Desktop enhancements ====== */
@media (min-width:1025px){
  .ld-header__inner{ padding:12px 0; }
  .ld-header__logo img{ height:44px; }
  .ld-nav{ display:flex; flex:1 1 auto; justify-content:center; }
  .ld-nav ul, .ld-nav li{ list-style:none; margin:0; padding:0; }
  .ld-nav > .menu{ display:flex; align-items:center; gap:28px; }
  .ld-nav .menu > li > a{ display:block; padding:.6rem .2rem; font-weight:700; letter-spacing:.2px; color:#1f2937; }
  .ld-nav .menu > li > a:hover{ text-decoration: underline; text-underline-offset: 6px; }
  .ld-nav .menu > li.current-menu-item > a,
  .ld-nav .menu > li > a[aria-current="page"]{ color: var(--ld-primary); text-decoration: underline; text-underline-offset: 6px; }

  /* Ocultar burger en desktop */
  .ld-burger{ display:none; }
}

/* ===== Mobile polish (≤ 480px) ===== */
@media (max-width: 480px){
  .ld-header__inner{ padding:8px 0; gap:10px; }
  .ld-header__logo img{ height:28px; }

  /* CTA compacto y en una sola línea */
  .ld-header__right{ gap:8px; }
  .ld-header__cta{
    font-size:.86rem; 
    padding:.45rem .75rem;
    border-radius:999px;
    white-space:nowrap;         /* evita salto de línea */
    max-width:46vw;             /* no invade el burger */
    box-shadow: var(--ld-shadow);
  }

  /* Burger más legible y “tappable” */
  .ld-burger{
    width:40px; height:40px;
    border-radius:10px;
    border:1px solid var(--ld-border);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    background:#fff;
  }
  .ld-burger__bar{ 
    width:22px; height:2.6px; 
    background:#0f172a; 
    margin:3px 0; 
  }
}

/* Muy chico (≤ 360px): ocultamos CTA del header y lo dejas en el drawer */
@media (max-width: 360px){
  .ld-header__cta{ display:none; }
}

/* ==== Burger refinado (tres líneas gris oscuro) ==== */
:root{ --ld-burger-color:#334155; } /* slate-700 */

.ld-burger{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);   /* sutil */
  border-radius:10px;
  box-shadow:none;
  padding:0;
}

.ld-burger__bar{
  width:22px; height:2px;             /* líneas delgadas */
  background:var(--ld-burger-color);
  border-radius:2px;
  margin:3px 0;
}

/* Hover/active sutiles */
.ld-burger:hover{ background:#f8fafc; }
.ld-burger:active{ transform: translateY(1px); }

/* Opcional: animación a "X" cuando el menú está abierto */
.menu-open .ld-burger__bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.menu-open .ld-burger__bar:nth-child(2){ opacity:0; }
.menu-open .ld-burger__bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }
.menu-open .ld-burger{ background:#fff; }
.ld-burger__svg{ display:block; }

/* ===== Desktop: muestra menú y oculta burger ===== */
@media (min-width: 1025px){
  body .ld-nav{ display:flex !important; flex:1 1 auto; justify-content:center; }
  body .ld-nav ul, body .ld-nav li{ list-style:none; margin:0; padding:0; }
  body .ld-nav > .menu{ display:flex; align-items:center; gap:28px; }

  body .ld-burger{ display:none !important; }
  body .ld-header__cta{ display:inline-flex; }
}
/* ===== CTA: fijar color y quitar subrayado en todos los estados ===== */
.ld-header__cta,
.ld-header__cta:link,
.ld-header__cta:visited{
  color:#fff !important;
  text-decoration:none !important;
}

.ld-header__cta:hover,
.ld-header__cta:focus,
.ld-header__cta:active{
  color:#fff !important;
  background: var(--ld-primary-600);
  text-decoration:none !important;
  outline: none;
}

/* Si el tema fuerza estilos a hijos dentro del botón, hereda del padre */
.ld-header__cta *{
  color:inherit !important;
  text-decoration:inherit !important;
}

/* Por si acaso: burger oculto en desktop con máxima prioridad */
@media (min-width:1025px){
  .ld-burger{ display:none !important; }
}