/* =============================================================
   TECNET — CABECERA Y PIE
   Marco del sitio: se carga en todas las páginas.
   ============================================================= */

.tt-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--tt-negro);
  border-bottom:1px solid var(--tt-linea);
}

/* ---------- BARRA DE ADMINISTRADOR ----------
   Con sesion iniciada WordPress fija arriba una barra negra de 32 px (46 px
   entre 601 y 782 px de ancho) y esta tapaba el logo en cuanto el encabezado
   se quedaba pegado con top:0. Bajo 601 px la barra deja de ser fija y se va
   con el scroll, asi que alli el top:0 original ya es correcto.
   El menu movil es position:fixed y arranca bajo el encabezado, asi que lleva
   el mismo desplazamiento; bajo 601 px se deja el de 46 px porque, con la
   pagina arriba, el encabezado empieza 46 px mas abajo y sin ellos el menu
   taparia la hamburguesa (ya desplazada queda una franja de 46 px, que solo
   ve quien edita). Los visitantes nunca ven esta barra. */
.admin-bar .tt-header{top:32px}
.admin-bar .tt-header-nav{top:calc(var(--header-h) + 34px + 32px)}
@media (max-width:782px){
  .admin-bar .tt-header{top:46px}
  .admin-bar .tt-header-nav{top:calc(var(--header-h) + 34px + 46px)}
}
@media (max-width:600px){
  .admin-bar .tt-header{top:0}
}

/* ---------- BARRA SUPERIOR ----------
   Ubicación, horario y teléfono. Es un negocio local: quien llega desde Google
   o Maps busca exactamente esto, y tenerlo arriba evita que se vaya a buscarlo. */
.tt-barra{background:var(--tt-carbon);border-bottom:1px solid var(--tt-linea)}
.tt-barra-inner{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:34px;
  font-size:var(--fs-micro);color:var(--tt-texto-2);
}
.tt-barra-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-barra-horario{display:none}
.tt-barra-tel{margin-left:auto;font-weight:700;color:var(--tt-azul-claro);white-space:nowrap}
.tt-barra-tel:hover{color:var(--tt-naranja)}

@media (min-width:768px){
  .tt-barra-horario{display:inline}
  .tt-barra-item + .tt-barra-item::before{content:"·";margin-right:var(--s-3);color:var(--tt-linea)}
}

/* ---------- FILA PRINCIPAL ---------- */
.tt-header-inner{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:var(--header-h);
}

/* flex:0 0 auto impide que el buscador aplaste el logo: sin esto el flex lo
   comprime a lo ancho y el lettering se vuelve ilegible. */
.tt-header-marca{flex:0 0 auto;margin-right:auto}

/* Blindaje contra desbordes. El encabezado es flex y un hijo con contenido
   ancho (un logo sin tope, un botón con texto largo) empuja a los demás fuera
   de la pantalla: pasó en producción con el logo heredado de Woodmart (350 px
   de ancho, scroll horizontal en móvil). min-width:0 deja que cada hijo flex
   se encoja por debajo de su contenido; el alto del logo lo fija base.css (52/62 px) y
   max-width:100% impide que el ancho lo desborde. .tt-header-inner NO va
   aqui: tambien es .tt-contenedor, y max-width:100% le quitaba el tope de
   1200 px, asi que logo y botones se iban a los bordes en pantallas anchas. */
.tt-header,
.tt-header-principal{max-width:100%}
.tt-header-inner > *{min-width:0}
.tt-header .tt-logo{max-width:100%}
.tt-header .tt-logo img{max-width:100%;object-fit:contain}

/* ---------- HAMBURGUESA ---------- */
.tt-header-hamburguesa{
  width:46px;height:46px;
  display:grid;place-items:center;
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
}
.tt-hamburguesa-icono,
.tt-hamburguesa-icono::before,
.tt-hamburguesa-icono::after{
  content:"";display:block;
  width:18px;height:2px;background:var(--tt-texto);border-radius:2px;
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.tt-hamburguesa-icono::before{transform:translateY(-6px)}
.tt-hamburguesa-icono::after{transform:translateY(4px)}
[aria-expanded="true"] .tt-hamburguesa-icono{background:transparent}
[aria-expanded="true"] .tt-hamburguesa-icono::before{transform:rotate(45deg)}
[aria-expanded="true"] .tt-hamburguesa-icono::after{transform:translateY(-2px) rotate(-45deg)}

/* ---------- MENÚ ---------- */
.tt-header-nav{
  position:fixed;left:0;right:0;bottom:0;
  top:calc(var(--header-h) + 34px);
  z-index:var(--z-menu);
  padding:var(--s-4);
  background:var(--tt-negro);
  overflow-y:auto;
}
.tt-menu{display:flex;flex-direction:column;gap:var(--s-1)}
.tt-menu a{
  display:block;padding:var(--s-3) var(--s-2);
  font-size:1.05rem;font-weight:600;
  border-bottom:1px solid var(--tt-linea);
}
.tt-menu a:hover,.tt-menu .current-menu-item > a{color:var(--tt-azul-claro)}
.tt-nav-buscador{margin-top:var(--s-4)}

/* ---------- SUBMENÚ ----------
   En móvil no hay desplegable: el submenú se ve siempre, indentado. Un
   desplegable dentro de un menú que ya es un desplegable esconde el enlace
   más rentable de la barra ("Arma tu PC a medida") tras dos toques. */
.tt-menu .sub-menu{list-style:none;margin:0;padding:0 0 0 var(--s-4)}
.tt-menu .sub-menu a{
  font-size:var(--fs-small);font-weight:500;color:var(--tt-texto-2);
  padding:var(--s-2) var(--s-2);border-bottom:0;
}
.tt-menu .sub-menu a:hover{color:var(--tt-azul-claro)}

/* ---------- BUSCADOR ---------- */
.tt-header-buscador{display:none}
.tt-buscador{display:flex;align-items:center;gap:var(--s-2);width:100%}
.tt-buscador-input{
  flex:1;min-width:0;min-height:44px;padding:var(--s-2) var(--s-3);
  background:var(--tt-superficie);color:var(--tt-texto);
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
  font-size:var(--fs-small);
}
.tt-buscador-input::placeholder{color:var(--tt-texto-2)}
.tt-buscador-input:focus{border-color:var(--tt-azul)}
.tt-buscador-btn{
  flex-shrink:0;
  width:44px;height:44px;display:grid;place-items:center;
  background:var(--tt-superficie);color:var(--tt-texto-2);
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
}
.tt-buscador-btn svg{width:18px;height:18px}
.tt-buscador-btn:hover{color:var(--tt-texto);border-color:var(--tt-azul)}

/* ---------- ACCIONES ---------- */
.tt-header-acciones{display:flex;align-items:center;gap:var(--s-2);flex-shrink:0}
.tt-header-cuenta{display:none}

.tt-header-carrito{
  position:relative;
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
  color:var(--tt-texto);
}
.tt-header-carrito svg{width:22px;height:22px}
.tt-header-carrito:hover{border-color:var(--tt-azul);color:var(--tt-azul-claro)}
.tt-header-carrito-num{
  position:absolute;top:-6px;right:-6px;
  min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;
  background:var(--tt-naranja);color:var(--tt-texto-inv);
  border-radius:var(--radio-pill);
  font-size:11px;font-weight:800;line-height:1;
}

/* El CTA de WhatsApp se ve SIEMPRE, también en móvil: es el canal por el que
   entra el negocio, y esconderlo tras la hamburguesa regala los contactos de
   quien no se molesta en abrirla. */
.tt-header-wa{min-height:46px;padding:0 var(--s-3);font-size:var(--fs-small);white-space:nowrap}

@media (min-width:1024px){
  .tt-header-hamburguesa{display:none}
  .tt-header-marca{margin-right:var(--s-4)}

  .tt-header-nav{
    position:static;padding:0;background:none;overflow:visible;
    display:block !important;            /* vence al atributo hidden en escritorio */
    margin-right:auto;
  }
  .tt-menu{flex-direction:row;gap:var(--s-3);align-items:center}
  .tt-menu a{padding:var(--s-2) 0;border-bottom:0;font-size:var(--fs-small);white-space:nowrap}

  /* En escritorio sí es desplegable, y se abre con :hover Y con :focus-within:
     sin lo segundo el submenú es inalcanzable con el teclado. */
  .tt-menu > li{position:relative}
  .tt-menu > li.menu-item-has-children > a::after{
    content:'';display:inline-block;margin-left:6px;
    border:4px solid transparent;border-top-color:currentColor;
    transform:translateY(2px);
  }
  .tt-menu .sub-menu{
    position:absolute;top:100%;left:calc(var(--s-3) * -1);
    min-width:220px;padding:var(--s-2);
    background:var(--tt-superficie);
    border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
    box-shadow:var(--sombra);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .15s var(--ease),transform .15s var(--ease);
  }
  .tt-menu > li:hover > .sub-menu,
  .tt-menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
  .tt-menu .sub-menu a{
    display:block;padding:var(--s-2) var(--s-3);
    border-radius:var(--radio-sm);white-space:nowrap;color:var(--tt-texto);
  }
  .tt-menu .sub-menu a:hover{background:var(--tt-superficie-2);color:var(--tt-azul-claro)}

  /* Entre 1024 y 1259 px no cabe el buscador en la barra de acciones sin
     empujar el botón de WhatsApp fuera de pantalla, así que se queda el del
     menú, en línea. Por debajo de 1024 el menú es desplegable y también lo
     lleva dentro. En ningún ancho se queda el sitio sin buscador. */
  .tt-nav-buscador{margin-top:0;width:200px;margin-left:var(--s-3)}
  .tt-header-nav{display:flex !important;align-items:center;gap:var(--s-3)}

  .tt-header-cuenta{display:inline-block;font-size:var(--fs-small);font-weight:600;white-space:nowrap}
  .tt-header-cuenta:hover{color:var(--tt-azul-claro)}
  .tt-header-wa{padding:0 var(--s-4)}
}

@media (min-width:1260px){
  .tt-header-buscador{display:block;width:200px}
  .tt-nav-buscador{display:none}
}

/* ---------- PIE ---------- */
.tt-footer{
  margin-top:var(--s-8);
  border-top:1px solid var(--tt-linea);
  background:var(--tt-carbon);
}
.tt-footer-inner{display:grid;gap:var(--s-6);padding-block:var(--s-7)}
.tt-footer-tagline{margin-top:var(--s-3);color:var(--tt-texto-2);font-size:var(--fs-small)}

.tt-footer-menu{display:flex;flex-direction:column;gap:var(--s-2)}
.tt-footer-menu a,.tt-footer-legal-menu a{color:var(--tt-texto-2);font-size:var(--fs-small)}
.tt-footer-menu a:hover,.tt-footer-legal-menu a:hover{color:var(--tt-texto)}

.tt-footer-contacto{
  display:flex;flex-direction:column;gap:var(--s-2);
  font-style:normal;color:var(--tt-texto-2);font-size:var(--fs-small);
}
.tt-footer-contacto a:hover{color:var(--tt-azul-claro)}

.tt-footer-legal{
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;align-items:center;
  padding-block:var(--s-4);
  border-top:1px solid var(--tt-linea);
  color:var(--tt-texto-2);font-size:var(--fs-micro);
}
.tt-footer-legal-menu{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);list-style:none;padding:0;margin:0}

/* Identidad del vendedor (Ley 1480, art. 50): ocupa su propia linea. */
.tt-footer-identidad,.tt-footer-sic{flex-basis:100%;margin:0}
.tt-footer-sic a{color:var(--tt-texto-2);text-decoration:underline;text-underline-offset:3px}
.tt-footer-sic a:hover{color:var(--tt-texto)}

@media (min-width:768px){
  .tt-footer-inner{grid-template-columns:2fr 1fr 1.2fr}
}