/*
Theme Name: Lumen Caeli — Catálogo
Theme URI: https://lumencaeli.zentryxnet.lat
Author: David Almeida
Author URI: https://zentryxnet.lat
Description: Tema a medida para Lumen Caeli S.A.S., distribución mayorista de iluminación y material eléctrico. Diseñado como catálogo técnico: densidad de datos, retícula visible y color con función. La especificación manda sobre el ambiente.
Version: 3.2.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: caeli
Tags: e-commerce, wholesale, catalog, accessibility-ready
*/

/* ══════════════════════════════════════════════════════════════════
   LUMEN CAELI — CATÁLOGO
   ------------------------------------------------------------------
   Quien compra acá es un instalador o un comprador de obra. Escanea
   referencia, potencia, kelvin y existencia; no contempla un ambiente.
   Por eso el modelo no es una landing: es un catálogo técnico.

   Reglas del sistema:
   1. Fondo claro. El papel es el soporte natural de un catálogo.
   2. Filetes de 1px en lugar de sombras. Nada flota.
   3. Radios de 2px como máximo. Nada es blando.
   4. El color informa: existencia, temperatura, precio mayorista.
      Nunca decora. Ni un degradado decorativo, ni un resplandor.
   5. Todo número va en monoespaciado tabular y alinea en columna.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* — Soporte: papel, apenas frío. Nunca #fff puro — */
  --paper:       oklch(98.6% 0.003 250);
  --paper-2:     oklch(96.4% 0.005 252);
  --paper-3:     oklch(93.8% 0.007 252);

  /* — Tinta: negro tintado hacia el azul de la marca — */
  --ink:         oklch(21%   0.018 258);
  --ink-2:       oklch(46%   0.015 258);
  --ink-3:       oklch(52%   0.016 258);

  /* — Filetes. La retícula se ve, no se insinúa — */
  --rule:        oklch(89%   0.006 252);
  --rule-2:      oklch(80%   0.010 252);
  --rule-ink:    oklch(30%   0.018 258);

  /* — Azul de marca. Profundo y funcional, no neón — */
  --volt:        oklch(47%   0.190 264);
  --volt-ink:    oklch(34%   0.150 264);
  --volt-wash:   oklch(95.5% 0.028 264);

  /* — Ámbar. Reservado a la luz cálida y al dato pendiente — */
  --warm:        oklch(72%   0.140 62);
  --warm-wash:   oklch(96%   0.045 70);
  --warm-ink:    oklch(45%   0.110 55);

  /* — Semáforo de existencias — */
  --ok:          oklch(52%   0.130 152);
  --low:         oklch(64%   0.150 62);
  --out:         oklch(55%   0.180 25);

  /* — Tipografía. Una familia con eje de anchura + un mono de datos — */
  --f-ui:   "Archivo", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Escala fija: un catálogo denso necesita medidas predecibles */
  --t-3xs: .6875rem;
  --t-2xs: .75rem;
  --t-xs:  .8125rem;
  --t-sm:  .875rem;
  --t-base: 1rem;
  --t-md:  1.125rem;
  --t-lg:  1.375rem;
  --t-xl:  1.75rem;
  --t-2xl: 2.25rem;
  /* Solo el display de portada es fluido */
  --t-display: clamp(2.1rem, 1.15rem + 3.9vw, 4.25rem);

  /* Ritmo espacial en múltiplos de 4 */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --s9: clamp(3.5rem, 6vw, 6rem);

  --gutter: clamp(1rem, 3.5vw, 3rem);
  --maxw: 1420px;
  --radius: 2px;
  --ease: cubic-bezier(.2,.8,.3,1);
}

/* ── Reinicio acotado ─────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-ui); font-size:var(--t-base); line-height:1.55;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
  font-variation-settings:"wdth" 100;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--volt-ink); text-underline-offset:.18em; }
a:hover{ color:var(--ink); }

h1,h2,h3,h4{
  margin:0; line-height:1.08; letter-spacing:-.015em; font-weight:700;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }

/* El foco se ve. Un comprador que navega con teclado no se pierde. */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--volt); outline-offset:2px; border-radius:var(--radius);
}
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--s4); top:-4rem; z-index:200;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  font-size:var(--t-sm); font-weight:600; transition:top .2s;
}
.skip-link:focus{ top:var(--s3); color:var(--paper); }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ── Piezas tipográficas del sistema ──────────────────────────── */
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* Cabecera de bloque: condensada y en versalitas. Lenguaje de tabla. */
.kicker{
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
  font-variation-settings:"wdth" 88;
}
/* Los títulos usan el eje de anchura, no una segunda familia */
.display{
  font-size:var(--t-display); font-weight:800; letter-spacing:-.035em;
  font-variation-settings:"wdth" 112; line-height:.96;
}
.h-sec{
  font-size:var(--t-xl); font-weight:700; letter-spacing:-.025em;
  font-variation-settings:"wdth" 106;
}

/* Marcador de dato pendiente de confirmar */
.pend{
  background:var(--warm-wash); border-bottom:1.5px dashed var(--warm);
  padding:0 .25em; font-style:normal; white-space:nowrap;
}
/* Marcador de párrafo: el nowrap sirve para un NIT, no para un texto largo. */
.pend-bloque{
  display:block; white-space:normal; background:var(--warm-wash);
  border-left:3px solid var(--warm); border-bottom:0;
  padding:var(--s3) var(--s4); border-radius:0 var(--radius) var(--radius) 0;
  font-size:var(--t-sm); line-height:1.55; color:var(--warm-ink);
}

/* ══════════════════════════════════════════════════════════════════
   CABECERA — un mayorista busca, no pasea. El buscador manda.
   ══════════════════════════════════════════════════════════════════ */
.util{
  background:var(--ink); color:oklch(84% .012 258);
  font-size:var(--t-2xs); letter-spacing:.01em;
}
.util-in{
  max-width:var(--maxw); margin-inline:auto; padding:.4rem var(--gutter);
  display:flex; gap:var(--s5); align-items:center; flex-wrap:wrap;
}
.util a{ color:oklch(88% .012 258); text-decoration:none; }
.util a:hover{ color:#fff; text-decoration:underline; }
.util .sep{ margin-left:auto; }

.masthead{ border-bottom:1px solid var(--rule); background:var(--paper); position:sticky; top:0; z-index:60; }
.mast-in{
  max-width:var(--maxw); margin-inline:auto; padding:var(--s3) var(--gutter);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s5); align-items:center;
}
@media(max-width:860px){
  .mast-in{ grid-template-columns:auto auto; gap:var(--s3); }
  .mast-search{ grid-column:1/-1; order:3; }
}

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); }
.brand svg{ width:34px; height:34px; flex:none; }
.brand b{
  display:block; font-size:var(--t-md); font-weight:800; letter-spacing:.005em;
  text-transform:uppercase; line-height:1; font-variation-settings:"wdth" 96;
}
.brand span{
  display:block; font-size:.58rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--volt-ink); font-weight:700; margin-top:.18rem;
}

/* Buscador: es la acción primaria de toda la cabecera */
.mast-search{ position:relative; }
.mast-search input{
  width:100%; border:1.5px solid var(--rule-2); border-radius:var(--radius);
  background:var(--paper); padding:.62rem 2.6rem .62rem .78rem;
  font-size:var(--t-sm);
}
.mast-search input::placeholder{ color:var(--ink-3); }
.mast-search input:focus{ border-color:var(--volt); outline:none; box-shadow:0 0 0 3px var(--volt-wash); }
.mast-search button{
  position:absolute; right:3px; top:3px; bottom:3px; width:2.2rem;
  border:0; background:transparent; color:var(--ink-2); cursor:pointer;
  display:grid; place-items:center; border-radius:var(--radius);
}
.mast-search button:hover{ background:var(--paper-3); color:var(--ink); }

.mast-tools{ display:flex; align-items:center; gap:var(--s2); }
.tool{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  border:1px solid var(--rule-2); border-radius:var(--radius);
  padding:.5rem .75rem; font-size:var(--t-xs); font-weight:600; color:var(--ink);
  background:var(--paper); transition:border-color .15s, background-color .15s;
  white-space:nowrap;
}
.tool:hover{ border-color:var(--ink); background:var(--paper-2); color:var(--ink); }
.tool svg{ width:17px; height:17px; }
.tool-count{
  font-family:var(--f-mono); font-size:var(--t-3xs); background:var(--volt);
  color:#fff; border-radius:99px; padding:.05rem .32rem; font-variant-numeric:tabular-nums;
}
@media(max-width:640px){ .tool .lbl{ display:none; } .tool{ padding:.5rem .55rem; } }

/* Navegación por categoría: una barra de índice, no un menú decorativo */
.catnav{ border-bottom:1px solid var(--rule); background:var(--paper-2); }
.catnav-in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; gap:0; overflow-x:auto; scrollbar-width:thin;
}
.catnav a{
  padding:.6rem .9rem; font-size:var(--t-xs); font-weight:600; color:var(--ink-2);
  text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.catnav a:hover{ color:var(--ink); border-bottom-color:var(--rule-2); }
.catnav a[aria-current]{ color:var(--volt-ink); border-bottom-color:var(--volt); }

/* ══════════════════════════════════════════════════════════════════
   PORTADA — una declaración corta y tres datos duros. Sin ambiente.
   ══════════════════════════════════════════════════════════════════ */
.hero{ border-bottom:1px solid var(--rule); }
.hero-in{
  max-width:var(--maxw); margin-inline:auto; padding:var(--s8) var(--gutter) var(--s7);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--s7);
  align-items:end;
}
@media(max-width:960px){ .hero-in{ grid-template-columns:1fr; gap:var(--s6); } }
.hero .display{ margin-top:var(--s3); max-width:14ch; }
.hero-lead{
  margin-top:var(--s4); font-size:var(--t-md); color:var(--ink-2);
  max-width:46ch; line-height:1.5;
}
.hero-acts{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5); }

/* Ficha de datos: la retícula del catálogo aparece desde la portada */
.facts{ border:1px solid var(--rule-2); border-radius:var(--radius); background:var(--paper); }
.fact{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s4);
  padding:var(--s4); border-bottom:1px solid var(--rule); align-items:baseline;
}
.fact:last-child{ border-bottom:0; }
.fact dt{
  font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); width:5.5rem;
}
.fact dd{ margin:0; }
.fact b{ display:block; font-size:var(--t-md); font-weight:700; letter-spacing:-.015em; }
.fact small{ display:block; font-size:var(--t-xs); color:var(--ink-2); margin-top:.1rem; }

/* ── Botones: dos niveles, sin brillos ────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  border:1.5px solid var(--ink); background:var(--ink); color:var(--paper);
  border-radius:var(--radius); padding:.66rem 1.1rem;
  font-size:var(--t-sm); font-weight:700; text-decoration:none; cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s;
}
.btn:hover{ background:var(--volt); border-color:var(--volt); color:#fff; }
.btn-2{ background:transparent; color:var(--ink); border-color:var(--rule-2); }
.btn-2:hover{ background:var(--paper-2); border-color:var(--ink); color:var(--ink); }
.btn-sm{ padding:.42rem .7rem; font-size:var(--t-xs); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ══════════════════════════════════════════════════════════════════
   CATÁLOGO — el núcleo del tema.
   Filas, no tarjetas. Un comprador de obra compara veinte referencias
   de un vistazo; veinte tarjetas grandes lo obligan a veinte scrolls.
   ══════════════════════════════════════════════════════════════════ */
.shop{ padding-block:var(--s6) var(--s9); }
.shop-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s4);
}
.shop-count{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-3); }

/* Barra de filtros: fichas de texto, sin adornos */
.filters{
  display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center;
  padding-block:var(--s3); border-block:1px solid var(--rule);
}
.fgroup{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.fgroup > span{
  font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-right:.25rem;
}
.chip{
  border:1px solid var(--rule-2); background:transparent; cursor:pointer;
  border-radius:var(--radius); padding:.3rem .65rem; font-size:var(--t-xs);
  font-weight:600; color:var(--ink-2); transition:.15s; white-space:nowrap;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* — La rejilla del catálogo. Una sola definición de columnas para
     cabecera y filas: así nada se desalinea nunca. — */
.cat{ border:1px solid var(--rule-2); border-radius:var(--radius); overflow:hidden; }
.cat-cols{
  display:grid;
  grid-template-columns:
    3.5rem            /* miniatura */
    6.5rem            /* referencia */
    minmax(0,1fr)     /* producto */
    8.5rem            /* temperatura */
    6rem              /* existencia */
    8rem              /* precio */
    9rem;             /* acción */
  gap:var(--s3); align-items:center;
}

/* Miniatura: chica y cuadrada. En una tabla la foto orienta, no protagoniza. */
.row-foto{ width:3.5rem; }
.row-foto a{ display:block; }
/* Los renders del fabricante vienen sobre negro, porque su catalogo es
   oscuro. La celda se pinta del mismo negro para que la foto no quede
   flotando en un recuadro. Ademas es lo correcto: una luminaria se aprecia
   sobre fondo oscuro, no sobre blanco. */
.row-foto img{
  width:3.5rem; height:3.5rem; object-fit:contain; display:block;
  border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--void);
}
/* Casilla vacía: buena parte del catálogo todavía no tiene foto. Una columna de
   recuadros oscuros con el icono de "sin imagen" es lo que más ensucia la lista,
   así que el hueco se deja apenas insinuado y el ojo sigue derecho al producto. */
.row-foto-vacia{
  display:block; width:3.5rem; height:3.5rem;
  border:1px dashed var(--rule); border-radius:var(--radius);
  background:var(--paper-2);
}
.cat-h{
  background:var(--paper-2); border-bottom:1px solid var(--rule-2);
  padding:.55rem var(--s4);
}
.cat-h span{
  font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); font-weight:500;
}
.cat-h .r{ text-align:right; }

/* Filas con aire. En una lista de casi dos mil productos el interlineado importa
   más que cualquier adorno: se sube el alto de fila y el filete se vuelve apenas
   una guía, no una reja. */
.row{
  padding:var(--s4); border-bottom:1px solid var(--paper-3);
  background:var(--paper); transition:background-color .12s;
}
.row:last-child{ border-bottom:0; }
.row:hover{ background:var(--volt-wash); }

.row-ref{
  font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-2);
  letter-spacing:-.02em;
}
/* El nombre manda, pero sin gritar: caja normal (ver caeli_nombre_legible) y peso
   medio. En versales y en negrita, mil novecientas filas se leen como un muro. */
.row-name{ font-weight:500; font-size:var(--t-sm); line-height:1.4; }
.row-name a{ color:inherit; text-decoration:none; }
.row-name a:hover{ text-decoration:underline; }
.row-brand{
  font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.15rem;
}

/* Atributos técnicos como etiquetas legibles, no como prosa */
.specs{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem; }
.spec{
  font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.02em;
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:.06rem .35rem; color:var(--ink-2); background:var(--paper-2);
}

/* — Temperatura de color: el concepto de marca, hecho dato.
     Una escala mínima con la marca en su kelvin exacto. — */
.kelvin{ min-width:0; }
.k-scale{
  height:4px; border-radius:2px; position:relative;
  background:linear-gradient(90deg,#F0A64B 0%,#FFC98A 28%,#FFE6CF 52%,#EAEFFF 76%,#93A9FF 100%);
}
.k-tick{
  position:absolute; top:-3px; width:2px; height:10px; background:var(--ink);
  border-radius:1px; transform:translateX(-1px);
}
.k-val{
  font-family:var(--f-mono); font-size:var(--t-3xs); color:var(--ink-2);
  margin-top:.3rem; display:block; letter-spacing:.02em;
}
.k-none{ font-family:var(--f-mono); font-size:var(--t-3xs); color:var(--ink-3); }

/* — Existencia: número y estado. Un punto de color no dice cuántos. — */
.stock{ display:flex; align-items:baseline; gap:.35rem; }
.stock i{ width:7px; height:7px; border-radius:99px; flex:none; }
.stock b{ font-family:var(--f-mono); font-size:var(--t-sm); font-variant-numeric:tabular-nums; }
.stock small{ font-size:var(--t-3xs); color:var(--ink-3); display:block; }
.st-ok i{ background:var(--ok); }
.st-low i{ background:var(--low); }
.st-out i{ background:var(--out); }
.st-out b{ color:var(--out); }

/* — Precio: dos niveles cuando el cliente es mayorista. — */
/* El color del precio se fija a propósito: la hoja de estilos de WooCommerce lo pinta
   de un oliva (#958E09) que no pertenece a esta paleta y ensucia toda la columna.
   El precio es el dato que más se consulta: va en tinta, con todo el contraste. */
.price{ text-align:right; color:var(--ink); }
.price .now{
  font-family:var(--f-mono); font-size:var(--t-md); font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; display:block;
  color:var(--ink);
}
.price .was{
  font-family:var(--f-mono); font-size:var(--t-3xs); color:var(--ink-3);
  text-decoration:line-through; display:block;
}
.price .iva{ font-size:var(--t-3xs); color:var(--ink-3); display:block; }
.price-tier{
  display:inline-block; font-family:var(--f-mono); font-size:var(--t-3xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--volt-ink);
  border:1px solid var(--volt); border-radius:var(--radius);
  padding:.02rem .3rem; margin-bottom:.15rem;
}
.price-hidden{ font-size:var(--t-xs); color:var(--ink-2); text-align:right; line-height:1.35; }
.price-hidden a{ font-weight:600; }

/* — Acción: cantidad y agregar, en una sola línea — */
.row-act{ display:flex; gap:.35rem; align-items:center; justify-content:flex-end; }
.qty{
  width:3.4rem; border:1px solid var(--rule-2); border-radius:var(--radius);
  padding:.4rem .35rem; text-align:center; font-family:var(--f-mono);
  font-size:var(--t-xs); font-variant-numeric:tabular-nums; background:var(--paper);
}
.qty:focus{ border-color:var(--volt); outline:none; }

/* — Adaptación a pantalla angosta: la tabla se vuelve ficha, sin perder datos — */
@media(max-width:1080px){
  .cat-h{ display:none; }
  .cat-cols{ grid-template-columns:3.5rem 1fr 1fr; gap:var(--s3) var(--s4); }
  .row-foto{ grid-row:span 2; align-self:start; }
  .row-ref{ grid-column:2/-1; }
  .row{ padding:var(--s4); }
  .row > .row-main{ grid-column:2/-1; }
  .row-act{ grid-column:1/-1; justify-content:flex-start; }
  .price{ text-align:left; }
  .cat-cols > *[data-lbl]::before{
    content:attr(data-lbl); display:block;
    font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-3); margin-bottom:.2rem;
  }
}

/* ══════════════════════════════════════════════════════════════════
   PEDIDO RÁPIDO — así compra de verdad un mayorista: pega su lista
   de referencias y cantidades. Ningún competidor local lo ofrece.
   ══════════════════════════════════════════════════════════════════ */
.pad{
  border:1px solid var(--rule-2); border-radius:var(--radius);
  background:var(--paper-2); padding:var(--s5);
}
.pad h3{ font-size:var(--t-md); }
.pad p{ font-size:var(--t-sm); color:var(--ink-2); margin-top:.35rem; }
.pad textarea{
  width:100%; margin-top:var(--s3); min-height:8.5rem; resize:vertical;
  border:1px solid var(--rule-2); border-radius:var(--radius); background:var(--paper);
  padding:var(--s3); font-family:var(--f-mono); font-size:var(--t-xs); line-height:1.7;
}
.pad textarea:focus{ border-color:var(--volt); outline:none; }
.pad-foot{ display:flex; gap:var(--s3); align-items:center; margin-top:var(--s3); flex-wrap:wrap; }
.pad-help{ font-family:var(--f-mono); font-size:var(--t-3xs); color:var(--ink-3); }
.pad-out{ margin-top:var(--s3); font-size:var(--t-sm); }
.pad-out ul{ list-style:none; margin:0; padding:0; }
.pad-out li{
  display:flex; justify-content:space-between; gap:var(--s3);
  padding:.35rem 0; border-bottom:1px solid var(--rule);
  font-family:var(--f-mono); font-size:var(--t-xs);
}
.pad-out li:last-child{ border-bottom:0; }
.pad-out .bad{ color:var(--out); }

/* ══════════════════════════════════════════════════════════════════
   BLOQUES DE CONTENIDO
   ══════════════════════════════════════════════════════════════════ */
.band{ border-top:1px solid var(--rule); padding-block:var(--s8); }
.band-2{ background:var(--paper-2); }
.band-ink{ background:var(--ink); color:oklch(88% .012 258); border-top-color:var(--rule-ink); }
.band-ink h2,.band-ink h3{ color:#fff; }
.band-ink .kicker{ color:oklch(70% .07 264); }
.band-ink .rule{ border-color:var(--rule-ink); }

.lede{ max-width:62ch; }
.lede p{ margin-top:var(--s3); color:var(--ink-2); font-size:var(--t-md); line-height:1.5; }
.band-ink .lede p{ color:oklch(78% .014 258); }

/* Rejilla de módulos con filete, sin tarjetas flotantes */
.mods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-top:var(--s6); border-top:1px solid var(--rule); }
.band-ink .mods{ border-top-color:var(--rule-ink); }
.mod{ padding:var(--s5) var(--s5) var(--s5) 0; border-right:1px solid var(--rule); }
.band-ink .mod{ border-right-color:var(--rule-ink); }
.mod:last-child{ border-right:0; }
.mod-n{ font-family:var(--f-mono); font-size:var(--t-3xs); color:var(--volt-ink); letter-spacing:.1em; }
.band-ink .mod-n{ color:oklch(72% .12 264); }
.mod h3{ font-size:var(--t-md); margin-top:.4rem; }
.mod p{ font-size:var(--t-sm); color:var(--ink-2); margin-top:.4rem; }
.band-ink .mod p{ color:oklch(76% .014 258); }
@media(max-width:820px){
  .mod{ border-right:0; border-bottom:1px solid var(--rule); padding-right:0; }
  .band-ink .mod{ border-bottom-color:var(--rule-ink); }
  .mod:last-child{ border-bottom:0; }
}

/* Marcas sobre la escala de temperatura */
.brands{ margin-top:var(--s6); }
.brands .k-scale{ height:5px; }
.bgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); margin-top:var(--s4); }
@media(max-width:760px){ .bgrid{ grid-template-columns:1fr; } }
.bcard{ border-top:2px solid var(--ink); padding-top:var(--s3); }
.bcard.w{ border-top-color:var(--warm); }
.bcard.c{ border-top-color:var(--volt); }
.bcard b{ font-size:var(--t-lg); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-variation-settings:"wdth" 100; }
.bcard .u{ font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); display:block; margin:.2rem 0 .5rem; }
.bcard p{ font-size:var(--t-sm); color:var(--ink-2); }

/* Aviso: sin panel de colores, solo un filete lateral fuerte */
.note{
  border-left:3px solid var(--volt); padding:var(--s3) var(--s4);
  background:var(--paper-2); font-size:var(--t-sm); line-height:1.55;
}
.note.warn{ border-left-color:var(--warm); background:var(--warm-wash); }
.note b{ display:block; margin-bottom:.15rem; }

/* Tabla de datos genérica (comparativas, especificaciones) */
.tbl{ width:100%; border-collapse:collapse; margin-top:var(--s4); font-size:var(--t-sm); }
.tbl th{
  text-align:left; font-family:var(--f-mono); font-size:var(--t-3xs);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-weight:500; padding:.4rem .75rem .4rem 0; border-bottom:1.5px solid var(--ink);
}
.tbl td{ padding:.6rem .75rem .6rem 0; border-bottom:1px solid var(--rule); vertical-align:top; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl .n{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; }

/* ══════════════════════════════════════════════════════════════════
   PIE — denso y útil, como el reverso de un catálogo impreso
   ══════════════════════════════════════════════════════════════════ */
.site-foot{ background:var(--ink); color:oklch(78% .012 258); padding-block:var(--s7) var(--s5); }
.foot-grid{
  display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--s5);
  padding-bottom:var(--s5); border-bottom:1px solid var(--rule-ink);
}
@media(max-width:1080px){ .foot-grid{ grid-template-columns:repeat(3,1fr); } .foot-brand{ grid-column:1/-1; } }
@media(max-width:720px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-brand p{ font-size:var(--t-sm); max-width:36ch; margin-top:var(--s3); color:oklch(72% .012 258); }
.foot-tag{ font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:oklch(72% .12 264); }
.site-foot h4{
  font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.12em;
  text-transform:uppercase; color:oklch(62% .014 258); margin-bottom:var(--s3); font-weight:500;
}
.site-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; font-size:var(--t-sm); }
.site-foot a{ color:oklch(80% .012 258); text-decoration:none; }
.site-foot a:hover{ color:#fff; text-decoration:underline; }
.foot-legal{
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between;
  padding-top:var(--s4); font-size:var(--t-3xs); color:oklch(58% .014 258);
}

/* Botón flotante de WhatsApp, discreto */
.wa{
  position:fixed; right:var(--s5); bottom:var(--s5); z-index:80;
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--ink); color:var(--paper); text-decoration:none;
  border-radius:var(--radius); padding:.65rem .95rem;
  font-size:var(--t-xs); font-weight:700; border:1.5px solid var(--ink);
}
.wa:hover{ background:var(--volt); border-color:var(--volt); color:#fff; }
.wa svg{ width:17px; height:17px; }
@media(max-width:600px){ .wa .lbl{ display:none; } .wa{ padding:.7rem; } }

/* Respeta a quien pidió menos movimiento */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* Impresión: un catálogo tiene que poder imprimirse */
@media print{
  .util,.masthead,.catnav,.wa,.filters,.row-act,.pad{ display:none!important; }
  body{ background:#fff; }
  .cat{ border-color:#999; }
  .row{ break-inside:avoid; }
}

/* ══════════════════════════════════════════════════════════════════
   QUIÉNES SOMOS E INFORMACIÓN LEGAL
   Un contratista que va a abrir crédito verifica antes de comprar.
   Poner el NIT y las responsabilidades DIAN a la vista no es relleno:
   es lo que le permite confirmar que puede facturarle en regla.
   ══════════════════════════════════════════════════════════════════ */
.somos{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--s7); align-items:start; }
@media(max-width:900px){ .somos{ grid-template-columns:1fr; gap:var(--s6); } }
.somos p{ color:var(--ink-2); margin-top:var(--s3); max-width:60ch; }
.somos p:first-of-type{ font-size:var(--t-md); color:var(--ink); }

/* Cifras verificables. Nada de "+5000 clientes felices". */
.cifras{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--rule); }
.cifra{ padding:var(--s4) var(--s4) var(--s4) 0; border-bottom:1px solid var(--rule); border-right:1px solid var(--rule); }
.cifra:nth-child(2n){ border-right:0; padding-right:0; }
.cifra b{
  display:block; font-family:var(--f-mono); font-size:var(--t-xl); font-weight:600;
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
}
.cifra span{ display:block; font-size:var(--t-xs); color:var(--ink-2); margin-top:.4rem; line-height:1.4; }

/* Ficha legal: lenguaje de tabla, coherente con el catálogo */
.legal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:var(--s6); margin-top:var(--s5); }
.legal h3{
  font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
  padding-bottom:.5rem; border-bottom:1.5px solid var(--ink); margin-bottom:var(--s3);
}
.legal dl{ margin:0; display:grid; gap:.55rem; }
.legal .li{ display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:var(--s3); align-items:baseline; }
.legal dt{ font-family:var(--f-mono); font-size:var(--t-2xs); color:var(--volt-ink); font-weight:500; }
.legal dd{ margin:0; font-size:var(--t-sm); line-height:1.45; }
.legal .dato{ font-size:var(--t-sm); }
.legal .dato b{ display:block; font-family:var(--f-mono); font-size:var(--t-md); font-weight:600; letter-spacing:-.02em; }
.legal .dato span{ display:block; color:var(--ink-2); margin-top:.15rem; }
.legal .dato + .dato{ margin-top:var(--s3); }
.legal-nota{
  grid-column:1/-1; font-size:var(--t-xs); color:var(--ink-2);
  border-left:3px solid var(--rule-2); padding-left:var(--s3); line-height:1.55; max-width:70ch;
}

/* ══════════════════════════════════════════════════════════════════
   LÁMINAS
   Las imágenes entran como las láminas de un catálogo impreso: a sangre,
   con un pie que dice algo. Nunca como fondo decorativo con texto encima,
   que es donde se pierde la legibilidad y se nota el relleno.
   ══════════════════════════════════════════════════════════════════ */
.plate{ margin:0; border-top:1px solid var(--rule); }
.plate img{
  width:100%; aspect-ratio:3/1; max-height:min(38vh, 380px);
  object-fit:cover; display:block;
}
.plate figcaption{
  max-width:var(--maxw); margin-inline:auto; padding:var(--s3) var(--gutter) var(--s4);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s4); align-items:baseline;
}
.plate .n{
  font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--volt-ink);
}
.plate .t{ font-size:var(--t-sm); color:var(--ink-2); max-width:64ch; line-height:1.5; }
.plate .t b{ color:var(--ink); }
@media(max-width:640px){
  .plate img{ aspect-ratio:2/1; max-height:200px; }
  .plate figcaption{ grid-template-columns:1fr; gap:var(--s2); }
}

/* Imagen dentro de una sección, al lado del texto */
.con-foto{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--s6); align-items:center; }
@media(max-width:900px){ .con-foto{ grid-template-columns:1fr; gap:var(--s5); } }
.con-foto img{
  width:100%; max-width:32rem; aspect-ratio:3/2; object-fit:cover;
  border:1px solid var(--rule); border-radius:var(--radius);
}
.band-ink .con-foto img{ border-color:var(--rule-ink); }
.foto-pie{
  font-family:var(--f-mono); font-size:var(--t-3xs); color:var(--ink-3);
  margin-top:.5rem; letter-spacing:.02em;
}
.band-ink .foto-pie{ color:oklch(62% .014 258); }

/* ══════════════════════════════════════════════════════════════════
   PÁGINAS Y PROSA
   ══════════════════════════════════════════════════════════════════ */
.pagina{ padding-block:var(--s6) var(--s8); }
.pagina-cab{ padding-bottom:var(--s4); border-bottom:1px solid var(--rule); margin-bottom:var(--s5); }
.prosa{ max-width:70ch; }
.ancho{ max-width:none; }
.pagina-ancha .pagina-cab{ margin-bottom:var(--s4); }
.prosa > * + *{ margin-top:var(--s4); }
.prosa h2{ font-size:var(--t-lg); margin-top:var(--s6); }
.prosa h3{ font-size:var(--t-md); }
.prosa ul,.prosa ol{ padding-left:1.3rem; }
.prosa li + li{ margin-top:.35rem; }
.prosa a{ text-decoration:underline; }

/* ══════════════════════════════════════════════════════════════════
   WOOCOMMERCE — ficha, carrito y cuenta
   Se estiliza el marcado propio de WooCommerce en vez de sobrescribir
   sus plantillas: menos que mantener cuando actualicen el plugin.
   ══════════════════════════════════════════════════════════════════ */

/* Migas */
.crumbs{ font-size:var(--t-xs); color:var(--ink-3); padding-block:var(--s3); }
.crumbs a{ color:var(--ink-2); text-decoration:none; }
.crumbs a:hover{ color:var(--volt-ink); text-decoration:underline; }
.crumbs .sep{ margin-inline:.4rem; color:var(--rule-2); }

/* ── Ficha de producto ─────────────────────────────────────────── */
.woocommerce div.product{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7); align-items:start; padding-block:var(--s5) var(--s7); }
@media(max-width:900px){ .woocommerce div.product{ grid-template-columns:1fr; gap:var(--s5); } }
.woocommerce div.product > .woocommerce-product-gallery{ margin:0; }

/* — El área de la foto es CUADRADA y la imagen va centrada dentro. —
   Las fotos del catálogo vienen con proporciones muy dispares: hay renders cuadrados
   y hay panorámicas (una guirnalda de bombillas mide 596x173). Sin un marco fijo, la
   panorámica queda como una franja delgada arrimada a la esquina y la ficha se ve rota.
   Con marco cuadrado + object-fit:contain, cada producto ocupa el mismo espacio y la
   imagen queda centrada, sin deformarse ni recortarse. */
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image{
  display:flex; align-items:center; justify-content:center;
}
.woocommerce div.product .woocommerce-product-gallery__image{
  aspect-ratio:1/1; width:100%;
  border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--paper); padding:var(--s4); box-sizing:border-box;
  overflow:hidden;
}
.woocommerce div.product .woocommerce-product-gallery img{
  width:auto; max-width:100%; max-height:100%; height:auto;
  object-fit:contain; border:0; border-radius:0;
}
.woocommerce div.product .summary{ margin:0; }
.woocommerce div.product .product_title{
  font-size:var(--t-xl); font-weight:700; letter-spacing:-.025em;
  font-variation-settings:"wdth" 104; margin:0 0 var(--s3);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--f-mono); font-size:var(--t-xl); font-weight:600;
  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums;
  margin:0 0 var(--s3); display:block;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--ink-2); font-size:var(--t-base); max-width:52ch; margin-bottom:var(--s4);
}
.woocommerce div.product .stock{
  display:inline-flex; align-items:center; gap:.4rem; font-size:var(--t-sm);
  font-weight:600; margin-bottom:var(--s4);
}
.woocommerce div.product .stock.in-stock::before{ content:""; width:7px; height:7px; border-radius:99px; background:var(--ok); }
.woocommerce div.product .stock.out-of-stock{ color:var(--out); }

/* Formulario de compra: la acción principal, sin el morado de fábrica */
.woocommerce div.product form.cart{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  padding:var(--s4); border:1px solid var(--rule-2); border-radius:var(--radius);
  background:var(--paper-2); margin-bottom:var(--s4);
}
.woocommerce div.product form.cart .quantity input.qty{
  width:4.5rem; padding:.62rem .4rem; text-align:center;
  border:1px solid var(--rule-2); border-radius:var(--radius);
  font-family:var(--f-mono); font-variant-numeric:tabular-nums; background:var(--paper);
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background:var(--ink); color:var(--paper); border:1.5px solid var(--ink);
  border-radius:var(--radius); padding:.7rem 1.15rem;
  font-family:var(--f-ui); font-size:var(--t-sm); font-weight:700;
  letter-spacing:0; text-transform:none; line-height:1.2;
  transition:background-color .15s, border-color .15s, color .15s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover{
  background:var(--volt); border-color:var(--volt); color:#fff;
}
.woocommerce a.button.wc-backward{ background:transparent; color:var(--ink); border-color:var(--rule-2); }
.woocommerce a.button.wc-backward:hover{ background:var(--paper-2); border-color:var(--ink); color:var(--ink); }

/* Ficha técnica del producto */
.woocommerce div.product .product_meta{
  font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-2);
  display:grid; gap:.4rem; padding-top:var(--s4); border-top:1px solid var(--rule);
}
.woocommerce div.product .product_meta > span{ display:grid; grid-template-columns:7rem 1fr; gap:var(--s3); }
.woocommerce div.product .product_meta .sku_wrapper .sku{ color:var(--ink); }

/* Pestañas: filetes, no solapas de carpeta */
.woocommerce div.product .woocommerce-tabs{ grid-column:1/-1; margin-top:var(--s6); }
.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding:0; margin:0 0 var(--s4); display:flex; gap:var(--s4);
  border-bottom:1px solid var(--rule);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent; border:0; border-radius:0; margin:0; padding:0;
  border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  padding:.55rem 0; font-size:var(--t-sm); font-weight:600; color:var(--ink-3);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom-color:var(--volt); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--volt-ink); }
.woocommerce div.product .woocommerce-tabs .panel{ max-width:70ch; }
.woocommerce div.product .woocommerce-tabs .panel h2{ font-size:var(--t-md); margin-bottom:var(--s3); }

/* Relacionados: reutilizan la tabla del catálogo */
.woocommerce .related,
.woocommerce .upsells{ grid-column:1/-1; margin-top:var(--s7); }
.woocommerce .related > h2,
.woocommerce .upsells > h2{ font-size:var(--t-lg); margin-bottom:var(--s4); }
.woocommerce .related ul.products,
.woocommerce .upsells ul.products,
.woocommerce ul.products{
  margin:0; padding:0; list-style:none;
  border:1px solid var(--rule-2); border-radius:var(--radius); overflow:hidden;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ display:none; }
/* WooCommerce impone su propia rejilla con .columns-N sobre los hijos de
   ul.products. Como cada hijo es una fila de tabla, hay que desarmarla o
   las filas se estiran y se parten en dos columnas. */
.woocommerce ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6{
  display:block; margin:0; padding:0; list-style:none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:auto!important; float:none!important; margin:0!important;
  padding:var(--s3) var(--s4); clear:none; text-align:left;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{ content:none; }
.woocommerce ul.products li.product a img{ margin:0; box-shadow:none; }

/* La etiqueta de oferta solo cuando hay una oferta de verdad */
.woocommerce span.onsale{
  position:static; display:inline-block; min-height:0; min-width:0; margin:0 0 .4rem;
  padding:.08rem .45rem; border-radius:var(--radius); line-height:1.5;
  background:var(--warm); color:oklch(30% .08 55);
  font-family:var(--f-mono); font-size:var(--t-3xs); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
}

/* ── Carrito ───────────────────────────────────────────────────── */
.woocommerce table.shop_table{
  border:1px solid var(--rule-2); border-radius:var(--radius); border-collapse:collapse;
  margin-bottom:var(--s5); width:100%;
}
.woocommerce table.shop_table th{
  background:var(--paper-2); border-bottom:1px solid var(--rule-2);
  font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); font-weight:500;
  padding:.6rem var(--s3); text-align:left;
}
.woocommerce table.shop_table td{
  border-top:1px solid var(--rule); padding:var(--s3); vertical-align:middle;
  font-size:var(--t-sm);
}
.woocommerce table.shop_table img{ width:56px; border:1px solid var(--rule); border-radius:var(--radius); }
.woocommerce table.shop_table .product-name a{ font-weight:600; color:var(--ink); text-decoration:none; }
.woocommerce table.shop_table .product-name a:hover{ text-decoration:underline; }
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal,
.woocommerce table.shop_table .amount{
  font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.woocommerce table.shop_table td.product-remove a.remove{
  color:var(--ink-3); font-size:1.1rem; font-weight:400; width:1.6rem; height:1.6rem;
  line-height:1.5; border-radius:var(--radius);
}
.woocommerce table.shop_table td.product-remove a.remove:hover{ background:var(--out); color:#fff; }
.woocommerce .quantity input.qty{
  width:4rem; padding:.5rem .35rem; text-align:center;
  border:1px solid var(--rule-2); border-radius:var(--radius);
  font-family:var(--f-mono); font-variant-numeric:tabular-nums; background:var(--paper);
}
.woocommerce .cart-collaterals{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,22rem); gap:var(--s6); }
@media(max-width:820px){ .woocommerce .cart-collaterals{ grid-template-columns:1fr; } }
.woocommerce .cart_totals{ grid-column:2; border:1px solid var(--rule-2); border-radius:var(--radius); padding:var(--s4); background:var(--paper-2); }
@media(max-width:820px){ .woocommerce .cart_totals{ grid-column:1; } }
.woocommerce .cart_totals h2{ font-size:var(--t-md); margin-bottom:var(--s3); }
.woocommerce .cart_totals table.shop_table{ border:0; margin:0; }
.woocommerce .cart_totals table.shop_table th{ background:transparent; text-transform:none; letter-spacing:0; font-family:var(--f-ui); font-size:var(--t-sm); color:var(--ink-2); }
.woocommerce .cart_totals .order-total .amount{ font-size:var(--t-md); font-weight:600; }
.woocommerce .wc-proceed-to-checkout .button{ width:100%; justify-content:center; text-align:center; display:block; }
.woocommerce .coupon{ display:flex; gap:.4rem; }
.woocommerce .coupon input[type=text]{
  border:1px solid var(--rule-2); border-radius:var(--radius); padding:.6rem .7rem;
  font-size:var(--t-sm); background:var(--paper);
}
.woocommerce .cart-empty{ font-size:var(--t-md); }

/* ── Mi cuenta ─────────────────────────────────────────────────── */
/* La rejilla de dos columnas solo cuando de verdad hay menú lateral.
   En la pantalla de acceso no existe, y aplicarla igual empuja el título
   a la segunda columna y deja el formulario descolgado. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:var(--s4) var(--s6); padding-block:var(--s4) var(--s6);
  align-items:start;
}
/* No confiar en el orden de los hijos: WooCommerce mete un contenedor de
   avisos que ocupa la primera celda y desplaza todo. Ocultarlo con :empty
   no sirve porque suele traer espacios en blanco dentro.
   Cada hijo suelto ocupa el ancho completo; el menú y el contenido reclaman
   su columna de forma explícita. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > *{ grid-column:1/-1; }
.woocommerce-account .woocommerce-MyAccount-navigation{ grid-column:1; }
.woocommerce-account .woocommerce-MyAccount-content{ grid-column:2; }
@media(max-width:820px){
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){ grid-template-columns:1fr; gap:var(--s4); }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{ grid-column:1/-1; }
}

/* Acceso y registro: columnas fluidas, sin los float de fábrica */
.woocommerce-account .u-columns{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:var(--s6); margin:0;
}
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after{ content:none; }
.woocommerce-account .u-column1,
.woocommerce-account .u-column2{ width:auto!important; float:none!important; margin:0; }
.woocommerce-account .woocommerce > h2,
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2{ font-size:var(--t-md); margin-bottom:var(--s3); }
.woocommerce-account form.login,
.woocommerce-account form.register,
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields{ max-width:none; }
/* Nombre y apellidos en una linea: son campos cortos */
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-address-fields .form-row-first,
.woocommerce-address-fields .form-row-last{ display:inline-grid; width:calc(50% - .4rem); vertical-align:top; }
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-address-fields .form-row-first{ margin-right:.6rem; }
.woocommerce form .form-row span.description,
.woocommerce form .form-row em{
  font-size:var(--t-xs); color:var(--ink-3); font-style:normal; line-height:1.45;
}
.woocommerce-EditAccountForm fieldset{
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--s4); margin-top:var(--s4);
}
.woocommerce-EditAccountForm legend{ font-size:var(--t-sm); font-weight:700; padding-inline:.4rem; }
.woocommerce-account .woocommerce-MyAccount-navigation{ width:auto; float:none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--rule); }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; padding:.7rem 0; font-size:var(--t-sm); font-weight:600;
  color:var(--ink-2); text-decoration:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ color:var(--ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ color:var(--volt-ink); }
.woocommerce-account .woocommerce-MyAccount-content{ width:auto; float:none; }

/* Formularios: uno solo para acceso, registro y direcciones */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce-EditAccountForm,
.woocommerce-address-fields{
  border:1px solid var(--rule-2); border-radius:var(--radius);
  padding:var(--s5); background:var(--paper-2); max-width:34rem;
}
.woocommerce form .form-row{ display:grid; gap:.3rem; margin-bottom:var(--s3); padding:0; }
.woocommerce form .form-row label{ font-size:var(--t-xs); font-weight:600; color:var(--ink-2); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  border:1px solid var(--rule-2); border-radius:var(--radius); background:var(--paper);
  padding:.62rem .75rem; font-size:var(--t-sm); width:100%; height:auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{ border-color:var(--volt); outline:none; box-shadow:0 0 0 3px var(--volt-wash); }
.woocommerce-form-login__rememberme{ font-size:var(--t-sm); }
.woocommerce-LostPassword{ font-size:var(--t-sm); margin-top:var(--s2); }

/* Avisos: filete lateral, sin cajas de colores estridentes */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice{
  border:1px solid var(--rule-2); border-top:0; border-right:0; border-bottom:0;
  border-left:3px solid var(--volt); background:var(--paper-2);
  padding:var(--s3) var(--s4); margin:0 0 var(--s4); list-style:none;
  font-size:var(--t-sm); border-radius:0 var(--radius) var(--radius) 0;
  display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; justify-content:space-between;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{ display:none; }
.woocommerce-error{ border-left-color:var(--out); }
.woocommerce-message{ border-left-color:var(--ok); }
.woocommerce-notices-wrapper:empty{ display:none; }

/* Finalizar compra: la pagina completa vive en assets/css/pago.css, que se
   encola solo ahi. Partirlo entre dos archivos hacia que un ajuste de la
   reticula pelear con el otro y quedara sin efecto. */

/* ── Pie: contacto, horario y redes ───────────────────────────── */
.foot-nota{
  display:block; font-family:var(--f-mono); font-size:var(--t-3xs);
  color:oklch(58% .014 258); letter-spacing:.06em; text-transform:uppercase;
}
.foot-horario li{
  display:flex; justify-content:space-between; gap:var(--s3); align-items:baseline;
}
.foot-horario b{ font-family:var(--f-mono); font-size:var(--t-xs); white-space:nowrap; }
.foot-redes a{ display:inline-flex; align-items:center; gap:.45rem; }
.foot-redes svg{ flex:none; opacity:.75; }
.foot-redes a:hover svg{ opacity:1; }

/* Horario en la barra superior: dato util antes de que pregunten */
.util-horario{ display:inline-flex; align-items:center; gap:.35rem; }
.util-horario svg{ width:13px; height:13px; opacity:.7; }
@media(max-width:720px){ .util-horario{ display:none; } }

/* ══════════════════════════════════════════════════════════════════
   CAELI · WooCommerce — Cuenta y Carrito  (rediseño 2026)
   Scope real: div.wrap  >  div.woocommerce  (páginas cuenta/carrito via page.php).
   Reusa los tokens del tema. Filete 1px, radio 2px, mono para datos, sin sombras.
   Reversible: borrar todo lo que está debajo de esta marca.
   ══════════════════════════════════════════════════════════════════ */

/* — Botones — */
.wrap .woocommerce a.button,
.wrap .woocommerce button.button,
.wrap .woocommerce input.button,
.wrap .woocommerce button[type="submit"],
.wrap .woocommerce .button.alt,
.wrap .woocommerce .checkout-button{
  background:var(--volt); color:var(--paper);
  font-family:var(--f-ui); font-weight:700; font-size:var(--t-sm); letter-spacing:.02em;
  border:0; border-radius:var(--radius); padding:12px 20px; line-height:1.2;
  text-transform:none; text-shadow:none; box-shadow:none; transition:background .15s; cursor:pointer;
}
.wrap .woocommerce a.button:hover,
.wrap .woocommerce button.button:hover,
.wrap .woocommerce input.button:hover,
.wrap .woocommerce button[type="submit"]:hover,
.wrap .woocommerce .button.alt:hover,
.wrap .woocommerce .checkout-button:hover{ background:var(--volt-ink); color:var(--paper); }
.wrap .woocommerce .button.wc-backward{ background:transparent; color:var(--volt-ink); border:1px solid var(--rule-2); }
.wrap .woocommerce .button.wc-backward:hover{ border-color:var(--volt); background:var(--volt-wash); }

/* — Campos de formulario — */
.wrap .woocommerce form .form-row{ margin:0 0 16px; padding:0; }
.wrap .woocommerce form .form-row label,
.wrap .woocommerce label{
  font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 6px; display:block; font-weight:500;
}
.wrap .woocommerce input.input-text,
.wrap .woocommerce input[type="text"],
.wrap .woocommerce input[type="email"],
.wrap .woocommerce input[type="tel"],
.wrap .woocommerce input[type="password"],
.wrap .woocommerce input[type="number"],
.wrap .woocommerce textarea,
.wrap .woocommerce select,
.wrap .woocommerce .select2-container .select2-selection{
  font-family:var(--f-mono); font-size:var(--t-sm); color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule-2); border-radius:var(--radius);
  padding:11px 12px; box-shadow:none; outline:none; width:100%; transition:border-color .15s,background .15s;
}
.wrap .woocommerce input.input-text:focus,
.wrap .woocommerce input[type="text"]:focus,
.wrap .woocommerce input[type="email"]:focus,
.wrap .woocommerce input[type="password"]:focus,
.wrap .woocommerce textarea:focus,
.wrap .woocommerce select:focus{ border-color:var(--volt); background:var(--paper); }

/* — Login / Registro — */
.woocommerce-account .wrap .woocommerce > .u-columns,
.woocommerce-account .wrap .woocommerce > .u-columns.col2-set{
  display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; margin:8px 0 0;
}
.woocommerce-account .wrap .woocommerce > .u-columns .col-1,
.woocommerce-account .wrap .woocommerce > .u-columns .col-2{
  width:auto; float:none; margin:0; padding:clamp(1.3rem,3vw,2.2rem);
}
.woocommerce-account .wrap .woocommerce > .u-columns .col-2{ border-left:1px solid var(--rule); }
/* Login solo (sin registro): tarjeta acotada */
.woocommerce-account .wrap .woocommerce > form.woocommerce-form-login{
  border:1px solid var(--rule); border-top:2px solid var(--rule-ink); border-radius:var(--radius);
  padding:clamp(1.3rem,3vw,2rem); max-width:460px; margin:8px 0 0; background:var(--paper);
}
.woocommerce-account .wrap .woocommerce h2{ font-family:var(--f-ui); font-weight:700; font-size:var(--t-lg); margin:0 0 18px; }
.wrap .woocommerce .woocommerce-form-login__rememberme{
  font-family:var(--f-ui); font-size:var(--t-sm); color:var(--ink-2); text-transform:none; letter-spacing:0;
  display:inline-flex; align-items:center; gap:7px;
}
.wrap .woocommerce .woocommerce-form-login__rememberme input{ width:16px; height:16px; accent-color:var(--volt); }
.wrap .woocommerce .lost_password{ font-family:var(--f-mono); font-size:var(--t-2xs); }
@media(max-width:760px){
  .woocommerce-account .wrap .woocommerce > .u-columns,
  .woocommerce-account .wrap .woocommerce > .u-columns.col2-set{ grid-template-columns:1fr; }
  .woocommerce-account .wrap .woocommerce > .u-columns .col-2{ border-left:0; border-top:1px solid var(--rule); }
}

/* — Interior de Mi cuenta — */
.woocommerce-account .wrap .woocommerce .woocommerce-MyAccount-navigation{ width:26%; }
.woocommerce-account .wrap .woocommerce .woocommerce-MyAccount-content{ width:70%; font-size:var(--t-sm); }
@media(max-width:820px){
  .woocommerce-account .wrap .woocommerce .woocommerce-MyAccount-navigation,
  .woocommerce-account .wrap .woocommerce .woocommerce-MyAccount-content{ width:100%; float:none; }
}
.wrap .woocommerce .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
.wrap .woocommerce .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--rule); margin:0; }
.wrap .woocommerce .woocommerce-MyAccount-navigation li:last-child{ border-bottom:0; }
.wrap .woocommerce .woocommerce-MyAccount-navigation li a{
  display:block; padding:12px 15px; color:var(--ink-2); font-family:var(--f-mono);
  font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition:background .12s,color .12s;
}
.wrap .woocommerce .woocommerce-MyAccount-navigation li a:hover{ background:var(--paper-2); color:var(--ink); }
.wrap .woocommerce .woocommerce-MyAccount-navigation li.is-active a{ background:var(--volt-wash); color:var(--volt-ink); box-shadow:inset 2px 0 0 var(--volt); }
.wrap .woocommerce .woocommerce-MyAccount-content a:not(.button){ color:var(--volt-ink); }

/* — Tablas (pedidos, direcciones, carrito) — */
.wrap .woocommerce table.shop_table,
.wrap .woocommerce table.woocommerce-orders-table,
.wrap .woocommerce table.woocommerce-table,
.wrap .woocommerce table.cart{
  border:1px solid var(--rule); border-radius:var(--radius); border-collapse:separate; border-spacing:0; overflow:hidden; width:100%;
}
.wrap .woocommerce table.shop_table thead th,
.wrap .woocommerce table.woocommerce-orders-table thead th,
.wrap .woocommerce table.cart thead th{
  background:var(--paper-3); border-bottom:1px solid var(--rule-2); color:var(--ink-3);
  font-family:var(--f-mono); font-size:var(--t-3xs); letter-spacing:.1em; text-transform:uppercase; padding:12px 14px; text-align:left; font-weight:500;
}
.wrap .woocommerce table.shop_table td,
.wrap .woocommerce table.woocommerce-orders-table td,
.wrap .woocommerce table.cart td{ border-top:1px solid var(--rule); padding:14px; vertical-align:middle; }
.wrap .woocommerce .woocommerce-Price-amount,
.wrap .woocommerce td.product-price,
.wrap .woocommerce td.product-subtotal{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.wrap .woocommerce td.product-name a{ color:var(--ink); font-weight:500; }
.wrap .woocommerce td.product-name a:hover{ color:var(--volt-ink); }

/* — Carrito: cantidad, totales, quitar — */
.wrap .woocommerce .quantity input.qty{
  width:64px; text-align:center; font-family:var(--f-mono); font-size:var(--t-sm);
  background:var(--paper); border:1px solid var(--rule-2); border-radius:var(--radius); padding:9px 6px;
}
.wrap .woocommerce .cart-collaterals .cart_totals{ float:right; width:360px; max-width:100%; }
.wrap .woocommerce .cart_totals h2{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px; }
.wrap .woocommerce .cart_totals table{ border:1px solid var(--rule); border-top:2px solid var(--rule-ink); border-radius:var(--radius); }
.wrap .woocommerce .cart_totals table th{ font-family:var(--f-ui); font-weight:500; color:var(--ink-2); font-size:var(--t-sm); }
.wrap .woocommerce .cart_totals .order-total .woocommerce-Price-amount{ font-size:var(--t-lg); }
.wrap .woocommerce .wc-proceed-to-checkout a.checkout-button{ display:block; text-align:center; font-size:var(--t-md); padding:15px; }
.wrap .woocommerce td.actions .coupon input.input-text{ width:180px; display:inline-block; }
.wrap .woocommerce a.remove{ color:var(--out)!important; border:1px solid var(--rule); border-radius:2px; width:22px; height:22px; line-height:20px; font-size:16px; font-weight:400; }
.wrap .woocommerce a.remove:hover{ background:var(--out); color:var(--paper)!important; }

/* — Avisos — */
.wrap .woocommerce .woocommerce-message,
.wrap .woocommerce .woocommerce-info,
.wrap .woocommerce .woocommerce-error,
.woocommerce-account .wrap .woocommerce-message,
.woocommerce-account .wrap .woocommerce-info{
  border-radius:var(--radius); border:1px solid var(--rule); border-left-width:2px; box-shadow:none;
  background:var(--paper-2); color:var(--ink); font-size:var(--t-sm); padding:14px 16px; line-height:1.5;
}
.wrap .woocommerce .woocommerce-message{ border-left-color:var(--ok); }
.wrap .woocommerce .woocommerce-info{ border-left-color:var(--volt); background:var(--volt-wash); }
.wrap .woocommerce .woocommerce-error{ border-left-color:var(--out); }
.wrap .woocommerce .woocommerce-message::before,
.wrap .woocommerce .woocommerce-info::before,
.wrap .woocommerce .woocommerce-error::before{ display:none; }
/* ═══ fin rediseño WooCommerce Caeli ═══ */

/* Nav de categorías — dos comportamientos, porque el ancho manda.
   En escritorio sobra sitio: se envuelven y se ven todas las líneas de un golpe.
   En celular NO. Trece categorías envueltas son siete filas que empujan la
   portada entera fuera de la pantalla: el titular quedaba bajo el pliegue y
   había que hacer scroll para saber qué vende la tienda. Ahí vuelve a ser la
   tira deslizable del diseño original, con un degradado en el borde que avisa
   que la lista sigue (sin barra de scroll a la vista, que ensucia). */
@media (min-width: 900px){
  .catnav-in{ flex-wrap:wrap; row-gap:0; }
}
/* La cinta negra de arriba se va en celular. Ocupaba dos renglones para decir
   tres cosas que el móvil ya tiene en otro lado: el WhatsApp está en el botón
   flotante, el envío a todo el país en el bloque de datos de la portada, y el
   horario ya venía oculto a este ancho. Lo único exclusivo era la frase de
   posicionamiento, que se repite en el antetítulo del hero dos dedos más abajo. */
@media (max-width: 899.98px){
  .util{ display:none; }
}

@media (max-width: 899.98px){
  .catnav{ position:relative; }
  .catnav-in{
    flex-wrap:nowrap;
    scrollbar-width:none; -ms-overflow-style:none;
    scroll-padding-inline:var(--gutter);
  }
  .catnav-in::-webkit-scrollbar{ display:none; }
  .catnav::after{
    content:""; position:absolute; inset-block:0; right:0; width:2.75rem;
    pointer-events:none;
    background:linear-gradient(to right, transparent, var(--paper-2) 70%);
  }
}