/* Paleta de JULBANY: negro y dorado (2026-08-11).
   Cuerpo en blanco; el negro estructura (cabecera, franja, pie) y el dorado
   marca la accion (comprar, precio, estrellas).
   OJO: este es el sitio bueno para tocarla. public/assets/css/tienda.css se
   GENERA desde aqui, asi que lo que se escriba alli se pierde en la siguiente
   regeneracion. */
:root{
  --tx:#0A0A0A;      /* texto principal, casi negro */
  --mut:#6B6560;     /* texto secundario, 5,7:1 sobre blanco */
  --bd:#E7E1D2;      /* bordes: gris con un punto de dorado */
  --bg:#FFFFFF;      /* fondo de la pagina */
  --sof:#FAF8F2;     /* fondos suaves, blanco roto calido */
  --tira:#000000;    /* franja superior */
  --tira2:#D4A413;   /* su degradado, dorado oscuro */
  --cab:#0A0A0A;     /* cabecera */
  --acc:#EFB810;     /* DORADO de accion: boton de comprar */
  --acc2:#D4A413;    /* dorado oscuro del degradado */
  --acctx:#000000;   /* texto SOBRE el dorado: negro. En blanco no se leeria */
  --ok:#8A6A00;      /* precio: dorado oscuro, 5:1 sobre blanco */
  --oro:#EFB810;     /* estrellas: dorado vivo, son formas y no texto */
  --pie:#0A0A0A;     /* pie: mismo negro que la cabecera */
  --piebd:#2A2416;   /* sus bordes */
  --pietx:#F5EFE0;   /* su texto: blanco calido */
}
*{box-sizing:border-box}
/* LA LETRA: Poppins. Es la que usan las tiendas grandes de contra entrega del
   Peru, que la sacan de la libreria de Shopify: el cliente la tiene vista de
   mil formularios. Se sirve desde ESTE dominio y no desde Google, para no
   abrir una conexion mas antes de pintar; son 23 KB los tres grosores, una vez
   para toda la navegacion. Con 'swap' el texto se ve DESDE EL PRIMER INSTANTE
   con la letra del telefono y cambia sola al cargar: nunca hay pantalla en
   blanco. La letra de la MARCA no se toca: esa es suya. */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format('woff2')}
body{margin:0;font:16px/1.6 Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}
/* 'height:auto' es imprescindible junto a max-width. Las imagenes declaran su
   width/height reales para que el navegador reserve el hueco y la pagina no de
   saltos; pero si luego el ancho se encoge por max-width y el alto sigue fijo,
   la imagen sale ESTIRADA. Con height:auto el alto acompaña al ancho.
   Las que necesitan un alto concreto (logos, miniaturas) lo declaran en su
   propia regla y ganan por especificidad. */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
/* ---- aviso superior ---- */
.tira{background:linear-gradient(270deg,var(--tira) 0%,var(--tira2) 100%);color:#fff;text-align:center;font-size:.82rem;padding:9px 12px;font-weight:700;letter-spacing:.01em}
/* ---- cabecera ----
   Misma estructura que la referencia: menu a la IZQUIERDA, logo CENTRADO con el
   telefono debajo, e iconos a la derecha. Las tres zonas son columnas iguales,
   que es lo que mantiene el logo centrado de verdad aunque el menu crezca. */
.cab{position:sticky;top:0;background:var(--cab);z-index:40}
/* Con el cajon abierto la cabecera sube: dentro va el menu, y tiene que quedar
   por encima del velo y de cualquier barra fija de la pagina. */
body.menu-abierto .cab{z-index:1000}
.cabin{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:70px}
.izq{display:flex;align-items:center;gap:14px}
/* Extras que SOLO existen dentro del cajon del movil. Se ocultan con !important
   para que ningun estilo suelto los devuelva a la cabecera de escritorio. */
.solomovil2{display:none !important}
@media(max-width:760px){.solomovil2{display:block !important}}
.navmail{padding:13px 0}
.izq .solomovil{display:none;color:#fff}
.izq .solomovil svg{width:21px;height:21px}
.nav{display:flex;gap:22px;font-size:.94rem}
.nav a{text-decoration:none;color:#fff;font-weight:500}
.nav a:hover{opacity:.75}
/* Distribucion del logo original: carrito a la izquierda ocupando TODO el alto,
   y a su derecha el nombre arriba y el telefono debajo. */
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;line-height:1}
.mcol{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
/* El carrito es el recorte del logo: sus estelas y el cursor amarillo no se
   reproducen fieles en CSS. Alto suficiente para abarcar las dos lineas. */
.carroimg{height:44px;width:auto;display:block;flex:none}
/* El nombre, en texto: nitido a cualquier tamano y con los colores del logo. */
/* inline-block y NO inline-flex: en flex cada trozo es una caja independiente y
   "TECNO" y "VA" se separaban. Asi fluyen como una sola palabra. */
.marca .n{font-weight:900;font-size:1.78rem;letter-spacing:-.035em;color:#fff;display:inline-block;white-space:nowrap}
/* margen negativo: la "O" y la "V" dejan un hueco optico por su propia forma
   redonda-diagonal, y solo se cierra tirando de la letra hacia dentro. */
.marca .n .va{color:#EFB810;margin-left:-.05em}
.marca .n .mas{color:#FECB07;font-size:1.62em;line-height:0;vertical-align:-.06em;margin-left:.01em}
/* Telefono: forma verde en SVG, sin circulo ni glifo del sistema. */
.marca .tel{display:inline-flex;align-items:center;gap:7px;font-size:1.06rem;font-weight:700;color:#fff;letter-spacing:.01em}
.marca .tel .wa{width:18px;height:18px;color:#25D366;flex:none;display:block}
@media(max-width:760px){
  .marca{gap:8px}
  .carroimg{height:36px}
  .marca .n{font-size:1.34rem}
  .marca .tel{font-size:.82rem;gap:5px}
}
@media(max-width:380px){
  .carroimg{height:28px}
  .marca .n{font-size:1.12rem}
  .marca .tel{font-size:.72rem}
}
/* Logotipo: "TECNOVA" con un "+" GRANDE por detras y algo inclinado, al estilo
   de PlayStation Plus. Todo en CSS, sin imagen: una tienda que presume de
   rapida no puede gastar una peticion mas en su propio logo. El "+" va detras
   (z-index 0) y asoma por la derecha; el texto pasa por encima. */
.marca .n{position:relative;display:inline-flex;align-items:center;gap:.22em;font-weight:900;font-size:1.5rem;letter-spacing:-.035em;padding-right:.5em}
/* El nombre, como en el logotipo: serif de alto contraste, vertical (no
   italica), en dorado y con las letras MUY separadas. Va despues de la regla
   anterior a proposito, para pisarle familia, peso y espaciado sin tener que
   tocarla: si algun dia se vuelve al estilo de antes, se borra este bloque.
   La pila pide primero Cinzel y Playfair por si algun dia se enlazan, y cae
   en Georgia, que ya esta en casi todos los equipos: asi la portada no se
   descarga ninguna fuente. */
.marca .n{font-family:"Cinzel","Playfair Display",Georgia,"Times New Roman",serif;
       font-weight:600;letter-spacing:.14em;color:#fff;text-transform:uppercase}
/* La segunda mitad, en dorado. Hereda familia y espaciado del padre: solo
   cambia el color, asi no hay dos sitios donde tocar la tipografia. */
.marca .n .va{color:#EFB810;margin-left:0}
/* El espaciado abre un hueco a la DERECHA de la ultima letra que descuadra el
   bloque; se compensa aqui. */
.marca .n{padding-right:calc(.5em - .14em)}
@media(max-width:640px){.marca .n{letter-spacing:.10em}}
@media(max-width:380px){.marca .n{letter-spacing:.06em}}
/* El texto va DELANTE del signo y con una sombra oscura: sin ella, la parte de
   la letra que cae sobre el verde pierde contraste y se lee peor. */
.marca .n .tx{position:relative;z-index:1;text-shadow:0 1px 3px rgba(33,37,41,.85)}
/* "VA" ardiendo: degradado recortado sobre el texto. El resplandor va con
   filter y no con text-shadow, porque con el color en transparent la sombra de
   texto no se dibuja. */
/* "VA" en celeste degradando a azul. El resplandor va con filter y no con
   text-shadow: con el color en transparent (que es lo que deja ver el degradado
   a traves de las letras) la sombra de texto no se dibuja. */
.cabic{display:flex;gap:18px;justify-content:flex-end;align-items:center}
.cabic a{color:#fff;text-decoration:none;line-height:1;display:inline-flex;align-items:center}
.cabic a:hover{opacity:.75}
.cabic svg{width:21px;height:21px}
.menubtn{display:none;background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:#fff;padding:0}
@media(max-width:760px){
  .cabin{grid-template-columns:auto 1fr auto;min-height:62px}
  .menubtn{display:block}
  /* En movil la marca es lo unico que identifica la tienda (el menu esta
     plegado), asi que se le da algo mas de cuerpo en vez de encogerla. */
  .marca .n{font-size:1.34rem}
  .marca .tel{font-size:.7rem}
  /* CAJON LATERAL, como el de Shopify: panel fijo de 300 px que entra desde la
     izquierda en .6s y ocupa todo el alto. Antes era un desplegable pegado bajo
     la cabecera, que se queda corto cuando el menu lleva muchas entradas. */
  .nav{
    display:none;flex-direction:column;gap:0;overflow-y:auto;overflow-x:hidden;
    position:fixed;top:0;bottom:0;left:0;width:300px;max-width:82%;
    background:#212529;color:#fff;padding:18px 20px 26px;z-index:1000;
    box-shadow:0 0 40px rgba(0,0,0,.45);
  }
  /* transform:none al abrir, NO translate3d(0,0,0). Un transform activo mantiene
     el panel en una capa compuesta aparte, y el texto se rasteriza ahi: por eso
     se veia borroso una vez abierto. Al quitar el transform, el navegador lo
     devuelve al flujo normal y las letras vuelven a verse nitidas. */
  .nav.abierto{display:flex}
  .nav a{padding:15px 2px;border-bottom:1px solid #444;color:#fff;display:block;text-decoration:none;font-size:1rem}
  .nav a:active{background:#2b3036}
  .nav a:last-child{border-bottom:0}
  /* Fondo oscuro detras del cajon: sin el, se puede tocar la pagina por debajo
     y el menu abierto parece pegado encima de nada. */
  .navbg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:30}
  .navbg.abierto{display:block}
  .navcerrar{
    align-self:flex-end;background:none;border:0;color:#fff;font-size:1.7rem;
    line-height:1;cursor:pointer;padding:0 0 10px;
  }
  /* En movil la lupa se pasa a la izquierda y en la derecha solo queda la
     bolsa, igual que hace la referencia. */
  .izq .solomovil{display:inline-flex}
  .cabic .solopc{display:none}
  /* Extras del menu plegado: en movil la referencia mete tambien las paginas de
     ayuda y el contacto directo, que en escritorio viven en el pie. */
  .navx{color:#9CA3AF!important;font-size:.86rem}
  .navtit{color:#6B7280;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;padding:14px 0 4px;border:0!important}
}
/* ---- pie ---- */
/* Oscuro, como el de la referencia: .site-footer usa #212529 con bordes #32373b
   y texto #fafafa. Estaba en gris claro y desentonaba con la cabecera negra. */
.pie{background:var(--pie);border-top:1px solid var(--piebd);margin-top:56px;padding:38px 0 22px;font-size:.88rem;color:var(--pietx)}
.piecols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
@media(max-width:760px){.piecols{grid-template-columns:1fr;gap:26px}}
.pie h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:#9CA3AF;margin:0 0 12px}
/* La marca del pie: mismos colores que el logotipo, en pequeño. Sin mayusculas
   forzadas ni espaciado, que le quitarian la forma del logo. */
.pie h4.piemarca{font-size:1.24rem;font-weight:900;letter-spacing:-.035em;text-transform:none;color:#fff;margin:0 0 10px}
.pie h4.piemarca .va{color:#EFB810;margin-left:-.05em}
.pie h4.piemarca .mas{color:#FECB07;font-size:1.5em;line-height:0;vertical-align:-.06em;margin-left:.02em}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin:0 0 8px}
.pie a{color:var(--pietx);text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie p{color:#C3C7CB;margin:0 0 10px}
.pieabout{font-size:.85rem;line-height:1.55}
.piedato{font-size:.8rem;margin:0 0 6px;line-height:1.5}
.piedato b{color:#fff;font-weight:600}
/* redes: iconos en botones cuadrados de 40px, que es el minimo que se acierta
   con el dedo sin apuntar. El color de marca aparece solo al pasar por encima;
   en reposo van del color del pie para no competir con los productos. */
.piredes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.piredestit{font-size:.8rem;color:#fff;font-weight:600;margin-right:2px}
.piered{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  border:1px solid var(--piebd,#2A2416);color:#BDB6A6;text-decoration:none;
  transition:background .18s,color .18s,border-color .18s,transform .18s}
.piered:hover{color:#fff;transform:translateY(-2px)}
.piered[aria-label="Facebook"]:hover{background:#1877F2;border-color:#1877F2}
.piered[aria-label="Instagram"]:hover{background:linear-gradient(45deg,#F58529,#DD2A7B 50%,#8134AF);border-color:#DD2A7B}
.piered[aria-label="TikTok"]:hover{background:#000;border-color:#69C9D0}
.piered:focus-visible{outline:2px solid var(--oro,#F59E0B);outline-offset:2px}
/* suscripcion */
.news{border-top:1px solid var(--piebd);margin-top:28px;padding-top:22px;max-width:620px}
.news h4{color:var(--pietx);font-size:1rem;text-transform:none;letter-spacing:0;margin:0 0 5px}
.news p{margin:0 0 13px;font-size:.85rem}
.newsf{display:flex;gap:9px;flex-wrap:wrap}
.newsf input{flex:1 1 190px;min-width:0;padding:11px 13px;border:1px solid var(--piebd);border-radius:8px;background:#1a1d21;color:var(--pietx);font-size:.9rem}
.newsf input::placeholder{color:#8A9096}
.newsf button{padding:11px 20px;border:0;border-radius:8px;background:linear-gradient(180deg,var(--acc) 0%,var(--acc2) 97%);color:var(--acctx);font-weight:800;cursor:pointer;font-size:.9rem}
@media(max-width:600px){.newsf input,.newsf button{flex:1 1 100%}}
.legal{border-top:1px solid var(--piebd);margin-top:26px;padding-top:16px;color:#9CA3AF;font-size:.78rem;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.pie .pielibro{font-weight:700}
/* En su propia linea y a bloque: pegado al RUC se partia a la mitad en movil. */
.legal .sunat{display:inline-block;margin-top:6px;color:#4ADE80;text-decoration:none;font-weight:700;border:1px solid rgba(74,222,128,.45);border-radius:8px;padding:6px 12px;font-size:.78rem}
.legal>span:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.legal .sunat:hover{text-decoration:underline}
/* El logo de SUNAT es a color y el pie es oscuro: va sobre una pastilla blanca
   para que se lea. En FILA con el texto —no encima— porque suelto se partia en
   dos lineas dentro del recuadro. */
.legal .sunat{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.legal .sunat img{height:17px;width:auto;background:#fff;border-radius:3px;padding:2px 4px;flex:none}
/* ---- paginas simples ---- */
.pag{max-width:760px;margin:0 auto;padding:38px 16px 0}
.pag h1{font-size:1.9rem;line-height:1.2;margin:0 0 8px;letter-spacing:-.02em}
.pag h2{font-size:1.12rem;margin:30px 0 8px}
.pag p{color:#374151;margin:0 0 14px}
.pagwa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;text-decoration:none;font-weight:700;padding:13px 22px;border-radius:10px;margin-top:8px}