:root{--qt-fondo:#ffffff;--qt-superficie:#f3f4f6;--qt-texto:#111827;--qt-acento:#1d4ed8;--qt-acento2:#b45309;--qt-sobre-acento:#ffffff;--qt-titulos:system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;--qt-cuerpo:system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;--qt-radio:.375rem;--qt-espacio:1.75rem;--qt-hueco:.75rem;--qt-alto-logo:40px;color-scheme:light}
/* qhatu · el tema (SDD §12.2, Q22). Los tokens llegan como variables --qt-*
   desde qhatu.toml; acá, cómo los usa cada base. Los bloques (Q21) leen las
   --qb-*, que se derivan de las --qt-*. */
body.qt{margin:0;background:var(--qt-fondo);color:var(--qt-texto);font:17px/1.6 var(--qt-cuerpo);-webkit-font-smoothing:antialiased}
body.qt,body.qt .qb-bloques{--qb-acento:var(--qt-acento);--qb-sobre-acento:var(--qt-sobre-acento);--qb-superficie:var(--qt-superficie);--qb-radio:var(--qt-radio);--qb-espacio:var(--qt-espacio);--qb-hueco:var(--qt-hueco);--qb-ancho:var(--qt-ancho,72rem)}
.qt h1,.qt h2,.qt h3{font-family:var(--qt-titulos);line-height:1.2;letter-spacing:-.01em}
/* :where() deja la especificidad en cero: un botón de un bloque (.qb-boton) pinta su
   propio texto sobre el acento; con «.qt a» ganaba el enlace y el texto quedaba del
   color de su fondo (visto en Chrome, Q22) */
:where(.qt) a{color:var(--qt-acento)}
:where(.qt) a:hover{text-decoration-thickness:2px}
.qt img{max-width:100%;height:auto}
.qt-saltar{position:absolute;left:-999px}.qt-saltar:focus{left:1rem;top:1rem;z-index:20;background:var(--qt-acento);color:var(--qt-sobre-acento);padding:.5rem 1rem}
/* cabecera */
.qt-cabecera{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:1rem max(1rem,calc((100% - var(--qt-ancho,72rem))/2 + 1rem));background:var(--qt-fondo);border-bottom:1px solid color-mix(in srgb,var(--qt-texto) 12%,transparent)}
.qt-marca{display:flex;align-items:center;gap:.6rem;font-family:var(--qt-titulos);font-weight:700;font-size:1.25rem;color:var(--qt-texto);text-decoration:none}
.qt-marca img{height:var(--qt-alto-logo);width:auto;display:block}
.qt-menu{display:flex;gap:1.2rem;flex-wrap:wrap;margin-left:auto}
.qt-menu a{color:var(--qt-texto);text-decoration:none;opacity:.85}
.qt-menu a:hover,.qt-menu a[aria-current]{opacity:1;color:var(--qt-acento)}
.qt-logo-center .qt-cabecera{flex-direction:column;gap:.6rem}
.qt-logo-center .qt-menu{margin-left:0}
.qt-cabecera-top-fixed .qt-cabecera{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--qt-fondo) 88%,transparent);backdrop-filter:blur(10px)}
@media (min-width:60rem){
  .qt-cabecera-side{display:grid;grid-template-columns:15rem 1fr}
  .qt-cabecera-side .qt-cabecera{flex-direction:column;align-items:flex-start;position:sticky;top:0;height:100vh;border-bottom:0;border-right:1px solid color-mix(in srgb,var(--qt-texto) 12%,transparent);padding:2rem 1.5rem}
  .qt-cabecera-side .qt-menu{flex-direction:column;margin-left:0}
}
/* contenido */
.qt-principal{min-height:60vh}
.qt-articulo{max-width:44rem;margin:var(--qt-espacio) auto;padding:0 1rem}
.qt-lista{max-width:52rem;margin:var(--qt-espacio) auto;padding:0 1rem;list-style:none}
.qt-lista li{padding:1rem 0;border-bottom:1px solid color-mix(in srgb,var(--qt-texto) 12%,transparent)}
.qt-lista p{margin:.3rem 0 0;opacity:.8}
.qt-pie{padding:2rem 1rem;text-align:center;font-size:.9em;opacity:.75;border-top:1px solid color-mix(in srgb,var(--qt-texto) 12%,transparent)}
/* editorial: medida angosta, títulos grandes con serifa, filetes finos */
.qt-base-editorial{--qt-ancho:60rem}
.qt-base-editorial .qt-marca{font-size:1.9rem;letter-spacing:.02em}
.qt-base-editorial h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.qt-base-editorial .qb-text .qb-prosa{max-width:40rem;font-size:1.1rem}
.qt-base-editorial .qb-quote blockquote{font-family:var(--qt-titulos);font-size:1.7em;border-left-width:2px}
/* service: aire, un hero que respira, botones redondos */
.qt-base-service .qb-hero .qb-titulo{font-size:clamp(2rem,4.5vw,3.2rem)}
.qt-base-service .qb-boton{border-radius:999px;padding:.85em 1.8em}
.qt-base-service .qb-cta--banner{background:color-mix(in srgb,var(--qt-acento) 10%,var(--qt-fondo))}
/* store: compacto, rejillas tupidas, precio y título en negrita */
.qt-base-store{font-size:16px}
.qt-base-store .qb-cards--grid .qb-tarjetas{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.qt-base-store .qb-tarjeta{border:1px solid color-mix(in srgb,var(--qt-texto) 10%,transparent);background:var(--qt-fondo)}
.qt-base-store .qb-tarjeta h3{font-size:1rem}
/* portfolio: la imagen manda; galerías y carruseles a todo el ancho */
.qt-base-portfolio .qb-gallery,.qt-base-portfolio .qb-carousel{max-width:none}
.qt-base-portfolio .qb-gallery--grid .qb-rejilla{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:.25rem}
.qt-base-portfolio .qb-gallery img{border-radius:0}
.qt-base-portfolio h1,.qt-base-portfolio h2{text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.qt-base-portfolio .qt-cabecera{border-bottom:0}
/* la tienda (Q24): el producto, el botón de comprar y el carrito */
body.qt .qt-producto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--qt-hueco);max-width:64rem;margin:var(--qt-espacio) auto;padding:0 1rem;align-items:start}
@media (max-width:44rem){body.qt .qt-producto{grid-template-columns:1fr}}
body.qt .qt-producto-foto{width:100%;height:auto;border-radius:var(--qt-radio)}
body.qt .qt-precio{font-size:1.3em;font-weight:700;color:var(--qt-acento)}
body.qt .qt-lista .qt-precio{font-size:1em}
body.qt .qt-lista img{display:block;width:100%;max-width:18rem;aspect-ratio:4/3;object-fit:cover;border-radius:var(--qt-radio);margin-bottom:.4rem}
body.qt .qt-comprar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:end}
body.qt .qt-comprar label,body.qt .qt-pedido label{display:flex;flex-direction:column;gap:.25rem;font-size:.9em}
body.qt .qt-comprar input[type=number]{width:5rem}
body.qt .qt-comprar select,body.qt .qt-comprar input,body.qt .qt-pedido input,body.qt .qt-pedido textarea{font:inherit;padding:.45em .6em;border:1px solid color-mix(in srgb,var(--qt-texto) 30%,transparent);border-radius:var(--qt-radio);background:var(--qt-fondo);color:var(--qt-texto)}
body.qt .qt-comprar button[disabled]{opacity:.55;cursor:not-allowed}
body.qt .qt-agregado{flex-basis:100%;margin:0}
body.qt .qt-carrito{margin-left:auto;font-weight:600}
body.qt .qt-carrito-tabla{width:100%;border-collapse:collapse;margin:1rem 0}
body.qt .qt-carrito-tabla th,body.qt .qt-carrito-tabla td{padding:.5rem;border-bottom:1px solid color-mix(in srgb,var(--qt-texto) 15%,transparent);text-align:left}
body.qt .qt-carrito-tabla input{width:4.5rem;font:inherit}
body.qt .qt-quitar{background:none;border:0;color:inherit;cursor:pointer;font-size:1.1em}
body.qt .qt-pedido{display:grid;gap:.8rem;max-width:32rem;position:relative}
body.qt .qt-nota{font-size:.85em;opacity:.8}
body.qt .qt-mal{color:#b3261e}
body.qt .qt-listo{font-size:1.2em;font-weight:700}
body.qt .qt-instrucciones{white-space:pre-line;background:var(--qt-superficie);padding:1rem;border-radius:var(--qt-radio)}
/* el botón de la tienda va con el acento aunque el sitio no tenga bloques
   (la clase qb-boton sólo trae estilo si se publica la hoja de los bloques) */
body.qt .qt-comprar button,body.qt .qt-pedido button[type=submit]{background:var(--qt-acento);color:var(--qt-sobre-acento);border:0;border-radius:var(--qt-radio);padding:.65em 1.3em;font:inherit;font-weight:600;cursor:pointer}
body.qt .qt-pagar{display:inline-block;background:var(--qt-acento);color:var(--qt-sobre-acento);border-radius:var(--qt-radio);padding:.7em 1.4em;font-weight:700;text-decoration:none}