/* ==========================================================================
   Estilo B · «Pastilla moderna» — sitio y tienda OfficeTech (oct 2026)
   Capa que se carga DE ÚLTIMA sobre style.css, redesign.css, institucional-v8.css
   y tienda.css. Para volver al estilo anterior basta con no cargar este archivo.
   Paleta de marca intacta: negro, naranja #F5920C y blanco.
   El encabezado se mantiene negro como antes (decisión de Miguel, 31 oct).
   ========================================================================== */
:root{
  --b-tinta:#111111;
  --b-tinta-2:#3d3d3d;
  --b-gris:#6b6b6b;
  --b-fondo:#fafafa;
  --b-relleno:#f2f2f2;
  --b-linea:#e6e6e6;
  --b-naranja:#F5920C;
  --b-naranja-hover:#ffa525;
  --b-radio-tarjeta:22px;
  --b-letra:"Plus Jakarta Sans","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- Tipografía ---------- */
:root body{font-family:var(--b-letra)}
:root body :is(h1,h2,h3,h4){font-family:var(--b-letra)}
:root body:not(.pagina-dsigns) :is(h1,h2,h3,h4){font-weight:700}
:root body.web-v8:not(.pagina-dsigns) h1{letter-spacing:-.045em;font-weight:800}
:root body.web-v8:not(.pagina-dsigns) h2{letter-spacing:-.04em;font-weight:800}
:root body :is(input,select,textarea,button){font-family:inherit}

/* ---------- Encabezado: sigue negro; solo los botones van en píldora ---------- */
:root body .nav-derecha .btn,:root body .boton-menu,:root body .menu-principal a.btn{border-radius:999px}

/* ---------- Botones: píldora ---------- */
:root body :is(.btn,.nuevo-btn){border-radius:999px;font-weight:700;letter-spacing:-.005em;transition:background .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease}
:root body .btn:active{transform:scale(.98)}
:root body .btn-naranja{background:var(--b-naranja);border-color:var(--b-naranja);color:#1a1205}
:root body .btn-naranja:hover{background:var(--b-naranja-hover);border-color:var(--b-naranja-hover);color:#1a1205;transform:translateY(-1px);box-shadow:0 8px 20px rgba(245,146,12,.28)}
:root body .btn-oscuro{background:var(--b-tinta);border-color:var(--b-tinta);color:#fff}
:root body .btn-oscuro:hover{background:#000;color:#fff;transform:translateY(-1px)}
:root body :is(.btn-linea, .tda-lienzo .btn-linea){background:#fff;border-color:#e2e2e2;color:var(--b-tinta)}
:root body :is(.btn-linea, .tda-lienzo .btn-linea):hover{background:#f4f4f4;border-color:#d5d5d5;color:var(--b-tinta)}
:root body.tda-claro .tda-lienzo .btn-linea{background:#fff;border-color:#e2e2e2;color:var(--b-tinta)}
:root body.tda-claro .tda-lienzo .btn-linea:hover{background:#f4f4f4;border-color:#d5d5d5;color:var(--b-tinta)}
:root body .btn-google{border-radius:999px;border-color:#e2e2e2;box-shadow:0 1px 2px rgba(0,0,0,.06);font-family:inherit}

/* ---------- Campos: rellenos y redondeados ---------- */
:root body :is(.tda-formulario,.cta-caja,.tda-buscador,.contacto-grilla,form) :is(input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],input:not([type]),select,textarea){
  background:var(--b-relleno);border:1px solid transparent;border-radius:14px;color:var(--b-tinta)
}
:root body :is(.tda-formulario,.cta-caja,.tda-buscador,.contacto-grilla,form) :is(input,select,textarea):focus{
  outline:none;background:#fff;border-color:var(--b-tinta);box-shadow:0 0 0 3px rgba(17,17,17,.08)
}
:root body :is(input,select,textarea):disabled{opacity:.7}

/* ---------- Tienda: lienzo, tarjetas y chips ---------- */
:root body.tda-claro{background:var(--b-fondo)}
:root body.tda-claro .tda-lienzo{--fondo:#fafafa;--borde-suave:#ececec;--borde:#e2e2e2;--blanco:#111}
:root body .tda-encabezado{background:#fff}
:root body .tarjeta-producto{border-radius:var(--b-radio-tarjeta);border-color:#ededed;box-shadow:none}
:root body .tarjeta-producto:hover{transform:translateY(-3px);border-color:#e2e2e2;box-shadow:0 14px 34px rgba(17,17,17,.08)}
:root body .tarjeta-producto .foto{border-bottom:0;margin:8px 8px 0;border-radius:16px}
:root body .tarjeta-producto .marca{font-family:var(--b-letra);font-weight:700;color:#c46f00}
:root body .tarjeta-producto h3{font-weight:700}
:root body :is(.tda-resumen,.cta-caja,.pt-cat,.pt-pista,.tda-ficha .galeria .principal,.cta-menu){border-radius:var(--b-radio-tarjeta)}
:root body .pt-cat-foto{border-bottom:0}
:root body .tda-ficha .galeria .principal{box-shadow:none}
:root body :is(.insignia,.insignia.verde,.chip){border-radius:999px;font-family:var(--b-letra);font-weight:600}
:root body .tda-lateral h3{font-family:var(--b-letra);font-weight:700}
:root body .tda-lateral li a{border-radius:12px;padding-inline:10px;border-bottom:0}
:root body .tda-lateral li a:hover{background:var(--b-relleno);color:var(--b-tinta)}
:root body .tda-lateral li a.activo{background:var(--b-tinta);color:#fff}
:root body .grupo-filtro{border-radius:16px}
:root body .ficha-activa{border-radius:999px}
:root body .tda-aviso{border-radius:16px}
:root body .seg-fotos img{border-radius:14px}
@media (max-width:900px){
  :root body .tda-lateral li a{background:#fff;border:1px solid #e6e6e6;border-radius:999px;font-weight:600;color:var(--b-tinta)}
  :root body .tda-lateral li a.activo{background:var(--b-tinta);border-color:var(--b-tinta);color:#fff}
}
:root body :is(.pt-etiqueta-cat,.tda-lateral h3,.etiqueta,.eyebrow,.mono){font-family:var(--b-letra)}

/* ---------- Sitio institucional ---------- */
:root body.web-v8{--papel:#fafafa;--borde:#e6e6e6}
:root body :is(.v8-service-card,.v8-category){border-radius:var(--b-radio-tarjeta)}
:root body .v8-service-card{border-color:#ececec}
:root body .v8-service-card:first-child{background:#f1f1f1}
:root body .v8-category{background:#f1f1f1}
:root body .v8-category:hover{background:#ebebeb}
:root body .v8-intro-art img{border-radius:var(--b-radio-tarjeta)}
:root body .sat-pie{border-radius:18px}
:root body .cinema-pause{border-radius:999px}

/* Botones de la tienda (cuenta, favoritos, carrito) integrados al encabezado negro (31 oct 2026, opción B) */
:root body .nav-derecha :is(.boton-cuenta,.boton-deseos,.boton-carrito).btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff}
:root body .nav-derecha :is(.boton-cuenta,.boton-deseos,.boton-carrito).btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff}