/* =========================================================
   LoQuiero — Header (Fladient) — CSS (SCOPED + SAFE)
   Ubicación: /assets/css/header/header.css
   ========================================================= */

.loq-header-safe-wrap{
  position:relative;
  isolation:isolate;
  z-index:50;
  overflow-x: clip;
}
@supports not (overflow: clip){
  .loq-header-safe-wrap{ overflow-x:hidden; }
}

/* El header NO debe generar scroll horizontal */
.loq-header-safe-wrap .loq-header-bleed{
  position:relative;
  width:100%;
  overflow:visible;
}

/* Nada de hacks globales en body */
.site-content, main, #content{ position:relative; z-index:1; }

.loq-header{ font-family:inherit; }

/* Desktop grid */
@media (min-width:768px){
  .loq-header .topbar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
  }
}

/* Iconos */
.loq-header .loq-header-icon{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit !important;
  transition:background-color .12s ease-out, transform .08s ease-out;
}
.loq-header .loq-header-icon:hover{
  background:rgba(15,23,42,.06) !important;
  transform:translateY(-1px);
}

/* CTA */
.loq-header .loq-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 16px;
  border-radius:var(--loq-radius-pill);
  background:#0b1220;
  color:var(--loq-text-invert);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  letter-spacing:.01em;
  white-space:nowrap;
  position:relative;
  padding-right:22px; /* espacio para online dot */
}
@media (max-width:767.98px){
  .loq-header .loq-cta{
    height:38px;
    padding:0 12px;
    padding-right:20px;
    font-size:12.5px;
  }
}
.loq-header .loq-cta:hover{ filter:brightness(1.06); }

/* Online dot */
.loq-header .loq-cta::after{
  content:"";
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(0,179,122,.95);
  box-shadow: 0 0 0 3px rgba(0,179,122,.16);
}
@media (max-width:767.98px){
  .loq-header .loq-cta::after{
    right:8px;
    width:7px;
    height:7px;
    box-shadow: 0 0 0 3px rgba(0,179,122,.14);
  }
}

/* Menú desktop */
.loq-header .loq-mainmenu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
}
.loq-header .loq-mainmenu>li{ position:relative; }
.loq-header .loq-mainmenu>li>a{
  color:inherit !important;
  font-weight:600 !important;
  text-decoration:none;
  display:block;
  padding:0 6px;
  line-height:48px;
  border-radius:10px;
  opacity:.9;
  transition:background-color .16s ease-out, opacity .16s ease-out;
}
.loq-header .loq-mainmenu>li>a:hover,
.loq-header .loq-mainmenu>li>a:focus-visible{
  background:rgba(15,23,42,.06);
  opacity:1;
}
.loq-header .loq-mainmenu>li+li::before{
  content:"";
  position:absolute;
  left:-13px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:16px;
  background:rgba(15,23,42,.10);
}

/* Submenú desktop */
.loq-header .loq-mainmenu>li.menu-item-has-children>.sub-menu{
  display:block !important;
  position:absolute;
  left:0;
  top:100%;
  margin-top:10px;
  background:var(--loq-surface);
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:8px;
  box-shadow:0 18px 40px rgba(15,23,42,.12);
  min-width:220px;
  z-index:10000;
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity .16s ease-out, transform .16s ease-out, visibility .16s ease-out;
}
.loq-header .loq-mainmenu>li.menu-item-has-children.is-open>.sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.loq-header .loq-mainmenu .sub-menu>li>a{
  display:block;
  padding:9px 12px;
  color:#0b1220 !important;
  font-weight:600 !important;
  text-decoration:none;
  border-radius:10px;
  transition:background-color .12s ease-out;
}
.loq-header .loq-mainmenu .sub-menu>li>a:hover{ background:rgba(15,23,42,.06); }

/* Cart */
.loq-header .loq-cartbag{ border-radius:999px; }
.loq-header .loq-cartbag:hover{ background:rgba(15,23,42,.06); }
.loq-header .loq-header-cart__badge{
  display:inline-grid;
  place-items:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1;
  background:var(--loq-danger);
  color:#fff;
  position:absolute;
  top:-4px;
  right:-4px;
  box-shadow:0 0 0 2px #f6f7fb;
}

/* Search */
.loq-header .loq-search-frame{
  position:relative;
  border-radius:999px;
  padding:1px;
  background:#0b1220;
  box-shadow:0 10px 30px rgba(15,23,42,.10);
}
.loq-header .loq-search-frame--desktop{ height:48px; }
.loq-header .loq-search-frame--mobile{ height:44px; }
.loq-header .loq-search-inner{
  display:flex;
  align-items:stretch;
  height:100%;
  border-radius:999px;
  background:#fff;
  overflow:hidden;
}
.loq-header .loq-search-input{
  flex:1;
  min-width:0;
  border:0;
  outline:none;
  padding:0 1rem;
  font-size:15px;
  background:transparent;
  color:#0b1220;
}
.loq-header .loq-search-input::placeholder{ color:rgba(15,23,42,.55); }
.loq-header .loq-search-button{
  width:48px;
  display:grid;
  place-items:center;
  border:none;
  background:#0b1220;
  color:#fff;
  cursor:pointer;
}
.loq-header .loq-search-icon{ width:18px; height:18px; stroke:#fff; }

@media (max-width:768px){
  .loq-header{ box-shadow:0 10px 25px rgba(15,23,42,.08); }
}

/* OFFCANVAS */
.loq-oc-head{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:
    radial-gradient(900px 320px at 10% -40%, rgba(92,140,255,.26), transparent 55%),
    radial-gradient(900px 360px at 90% 0%, rgba(70,243,255,.16), transparent 55%),
    #0b1220;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.loq-oc-brand{ display:flex; align-items:center; gap:10px; }
.loq-oc-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(135deg,#6E57FF 0%, #00B5FF 100%);
  box-shadow:0 0 0 3px rgba(110,87,255,.18);
}
.loq-oc-title{ font-weight:900; letter-spacing:.01em; font-size:16px; }

.loq-oc-close{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  transition: transform .12s ease, background-color .12s ease;
}
.loq-oc-close:hover{ background:rgba(255,255,255,.12); transform: translateY(-1px); }

.loq-oc-quick{
  padding:14px 14px 6px;
  display:grid;
  gap:10px;
}
.loq-oc-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}
.loq-oc-pill:hover{ background: rgba(255,255,255,.10); }
.loq-oc-pill__icon{ width:20px; text-align:center; opacity:.95; }
.loq-oc-pill__badge{
  margin-left:auto;
  min-width:18px;
  height:18px;
  padding:0 6px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background:var(--loq-danger);
  color:#fff;
}

.loq-oc-sep{
  margin:10px 16px;
  height:1px;
  background: rgba(255,255,255,.10);
}

.loq-oc-menu{
  list-style:none;
  margin:0;
  padding: 4px 10px 10px;
}
.loq-oc-menu > li{ margin: 0; }
.loq-oc-menu > li > a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  margin: 0 6px;
  border-radius:14px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  background: transparent;
  transition: background-color .12s ease, transform .10s ease;
}
.loq-oc-menu > li > a:hover{
  background: rgba(255,255,255,.08);
  transform: translateX(1px);
}
.loq-oc-menu > li.current-menu-item > a{
  background: rgba(110,87,255,.16);
  border:1px solid rgba(110,87,255,.28);
}

.loq-oc-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  width:100%;
  border-radius:999px;
  background: #ffffff;
  color:#0b1220;
  font-weight:900;
  text-decoration:none;
  box-shadow: 0 14px 30px rgba(0,0,0,.30);
}
.loq-oc-cta:hover{ filter:brightness(1.02); }

.loq-oc-foot{
  border-top:1px solid rgba(255,255,255,.08);
  background:#0b1220;
}

/* =========================================================
   LOGO — tamaño MOBILE (override seguro)
   ========================================================= */
@media (max-width: 767.98px){

  /* Caja del logo */
  .loq-header .site-logo > div{
    height: 30px !important;   /* 👈 AJUSTÁ ACÁ */
  }

  /* Imagen del logo */
  .loq-header .site-logo img,
  .loq-header .site-logo .custom-logo{
    height: 100% !important;
    width: auto !important;
    object-fit: contain;
  }
}

/* =========================================================
   LoQuiero — Header: mismo fondo que Footer (Glass + Tech)
   Pegalo al FINAL de /assets/css/header/header.css
   ========================================================= */

/* 1) Base glass en el header wrapper (igual footer) */
.loq-header-safe-wrap{
  /* tokens (copiados del footer, solo para header) */
  --loq-hd-bg: rgba(28,28,30,0.44);
  --loq-hd-border: rgba(255,255,255,.10);

  --loq-hd-cyan:   #46E9FF;
  --loq-hd-blue:   #4B74FF;
  --loq-hd-indigo: #5D3CE6;

  --loq-hd-accent-gradient: linear-gradient(
    90deg,
    rgba(70,233,255,1) 0%,
    rgba(75,116,255,1) 35%,
    rgba(93,60,230,1) 72%,
    rgba(70,233,255,1) 100%
  );
}

/* 2) Aplicar el “glass dark” al contenedor real del header
   - IMPORTANT: usamos .loq-header (tu wrapper del header)
*/
.loq-header-safe-wrap .loq-header{
  position:relative;
  z-index:1;

  background: var(--loq-hd-bg);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);

  border-bottom: 1px solid var(--loq-hd-border);
}


/* 3) Hairline superior (igual footer) */
.loq-header-safe-wrap .loq-header::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: var(--loq-hd-accent-gradient);
  opacity:.34;
  pointer-events:none;
  z-index:0;
}

/* 4) Overlay lights (igual footer) */
.loq-header-safe-wrap .loq-header::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.22;
  background:
    radial-gradient(1100px 420px at 12% -12%, rgba(70,233,255,.40), transparent 60%),
    radial-gradient(900px 380px at 92% 0%, rgba(93,60,230,.28), transparent 58%),
    radial-gradient(900px 520px at 50% 120%, rgba(75,116,255,.20), transparent 62%);
}

/* 5) Tech shapes (igual footer::after, pero en header lo ponemos como pseudo extra)
   Para no chocar con ::after (luces), lo hacemos con un child overlay opcional.
*/
.loq-header-safe-wrap .loq-header .loq-header__tech{
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:0;

  opacity:.38;
  mix-blend-mode: screen;
  filter: blur(0.2px) saturate(1.08);

  background:
    /* luces principales */
    radial-gradient(900px 420px at 10% 0%, rgba(70,233,255,.35), transparent 62%),
    radial-gradient(860px 420px at 92% 5%, rgba(93,60,230,.32), transparent 60%),
    radial-gradient(980px 520px at 50% 120%, rgba(75,116,255,.22), transparent 62%),

    /* “hex / dots” tech */
    radial-gradient(circle at 20px 20px, rgba(255,255,255,.10) 1px, transparent 1.6px),
    radial-gradient(circle at 44px 44px, rgba(70,233,255,.10) 1px, transparent 1.8px),
    radial-gradient(circle at 68px 12px, rgba(93,60,230,.10) 1px, transparent 1.8px),

    /* grid sutil */
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px),

    /* circuit lines */
    linear-gradient(135deg, transparent 0 46%, rgba(70,233,255,.11) 47%, transparent 50%),
    linear-gradient(45deg,  transparent 0 48%, rgba(93,60,230,.10) 49%, transparent 52%);

  background-size:
    auto,
    auto,
    auto,

    96px 96px,
    96px 96px,
    96px 96px,

    56px 56px,
    56px 56px,

    420px 420px,
    520px 520px;

  background-position:
    0% 0%,
    100% 0%,
    50% 120%,

    0 0,
    18px 12px,
    36px 6px,

    0 0,
    0 0,

    20% 10%,
    70% 20%;

  background-repeat:
    no-repeat, no-repeat, no-repeat,
    repeat, repeat, repeat,
    repeat, repeat,
    repeat, repeat;

  /* mascara: fuerte arriba, se disuelve abajo (en header queda más prolijo) */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.55) 70%, rgba(0,0,0,0));
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.55) 70%, rgba(0,0,0,0));
}

/* 6) Asegurar que el contenido del header quede arriba de overlays */
.loq-header-safe-wrap .loq-header > *{
  position:relative;
  z-index:1;
}