/* ============================================================
   Materiales Centro — estilos compartidos
   Tokens, reset, header/nav, tick/tag, reveal-on-scroll, botones,
   y la banda oscura de cierre (presupuesto + footer + fab).
   Cada página conserva su propio <style> para lo que le es propio
   (hero, grillas de categoría, etc.) y puede sobrescribir cualquier
   regla de acá (p. ej. el header especial de Home).

   Este archivo se linkea con ?v=2 en cada página (cache-busting): un
   navegador puede cachear una versión vieja de este CSS mientras ya
   carga el HTML nuevo, y quedan mezclados (pasó una vez). Si se edita
   este archivo, subir ese número en TODAS las páginas que lo linkean.
   ============================================================ */

:root{
  --bg:#E7DAC5; --ink:#2A1F14; --soft:#7A6A54; --line:rgba(42,31,20,.16); --cardfill:rgba(42,31,20,.045);
  --deep:#1B1410; --deep-ink:#F3EBDE; --deep-soft:#C4B39C; --deep-line:rgba(243,235,222,.16);
  --naranja:#EB5C2E; --verde:#3FA873; --verde-brand:#006D3A; --focus:#3FA873;
  --grain:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC41NSIgbnVtT2N0YXZlcz0iMyIgc2VlZD0iMTEiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMC40MiAwIDAgMCAwICAwLjI1IDAgMCAwIDAgIDAuMTAgMCAwIDAgMCAgMCAwIDAgMC4yNCAwIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+");
}
*{box-sizing:border-box; margin:0; padding:0;}
/* overflow-x:clip (no overflow-x:hidden/auto) a propósito: hidden/auto en el
   html o el body rompe position:sticky de cualquier elemento de la página
   (por ejemplo la cinemática de la home) porque convierte a html/body en el
   contenedor de scroll en vez del viewport. clip recorta el desborde
   horizontal (lo que necesitábamos para el marquee de marcas) sin ese
   efecto secundario. */
html{-webkit-text-size-adjust:100%; overflow-x:clip;}
body{background-color:var(--bg); background-image:var(--grain); background-repeat:repeat; background-size:300px 300px; background-blend-mode:multiply; color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:clip;}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif; letter-spacing:-.01em; text-wrap:balance;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }

/* ---------- header (versión por defecto: sticky, siempre sólido) ---------- */
header{position:sticky; top:0; z-index:80; background-color:var(--bg); background-image:var(--grain); background-repeat:repeat; background-size:300px 300px; background-blend-mode:multiply; border-bottom:1px solid var(--line);}
/* El menú, el logo, "Catálogo" y el carrito van todos en la misma fila
   (pedido explícito: nada de una segunda fila para el nav). El <nav> toma
   el espacio disponible entre el logo y los botones de la derecha; si no
   entra en una sola línea pasa a menú hamburguesa (ver nav-force-burger
   en include.js, que mide el ancho real ya renderizado). */
/* Esta fila es más ancha que el resto del contenido (1180px) a propósito:
   con el logo, los 7 links, "Catálogo" y el carrito todos en una sola
   línea, 1180px no alcanza ni achicando la tipografía — así que le damos
   más aire solo a esta fila en pantallas grandes. */
.top-row{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 28px; max-width:1500px; margin:0 auto;}
.logo-mark{height:40px; flex-shrink:0;}
.logo-mark svg{height:100%; width:auto; display:block;}
.head-right{display:flex; align-items:center; gap:16px; flex-shrink:0;}

.main-nav{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:clamp(8px,1vw,14px);
  flex:1; min-width:0; padding:0 14px;
}
.main-nav a{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:-.005em; white-space:nowrap;
  color:var(--ink); padding-bottom:4px; border-bottom:1.5px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.main-nav a:hover{border-color:rgba(42,31,20,.4);}
.main-nav a.on{border-color:var(--naranja); color:var(--naranja); font-weight:700;}

/* Sin recuadro: antes tenía un borde cuadrado que no sumaba nada (mismo
   criterio que se usó para los demás botones del sitio). Las líneas más
   gruesas y en el verde de marca, para que tenga más presencia. */
.burger{display:none; width:40px; height:40px; border:none; background:none; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0;}
.burger span, .burger span::before, .burger span::after{content:''; display:block; width:19px; height:2.2px; background:var(--verde-brand); position:relative;}
.burger span::before{position:absolute; top:-7px;} .burger span::after{position:absolute; top:7px;}
.mobile-panel{display:none;}
.mobile-panel.open{display:flex; flex-direction:column; gap:2px; padding:6px 28px 18px; background:var(--bg); border-bottom:1px solid var(--line);}
.mobile-panel a{color:var(--ink); padding:13px 4px; font-size:14.5px; border-bottom:1px solid var(--line);}
.mobile-panel a.on{color:var(--naranja);}

/* ---------- diamond tick / tag ---------- */
.tick{display:inline-block; width:7px; height:7px; background:currentColor; transform:rotate(45deg); flex-shrink:0;}
.tag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); display:flex; align-items:center; gap:9px; margin-bottom:12px;}
.tag .tick{color:var(--naranja);}

/* ---------- reveal on scroll ---------- */
.reveal-el{opacity:1; transform:none;}
html.js-anim .reveal-el{opacity:0; transform:translateY(20px);}
html.js-anim .reveal-el.is-visible{opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease;}
html.js-anim .reveal-el.d1.is-visible{transition-delay:.12s;}

/* ---------- link con flecha (cta genérico) ---------- */
.link-cta{font-family:'Inter',sans-serif; font-size:14px; font-weight:700; color:#fff; display:inline-flex; align-items:center; gap:6px; transition:gap .2s ease; width:fit-content;}
.link-cta:hover{gap:11px;}

/* ---------- botones (pill, como habíamos hablado) ---------- */
.btn{font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; padding:14px 24px; border-radius:30px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1.5px solid transparent; transition:opacity .15s ease, transform .15s ease, box-shadow .15s ease;}
.btn:hover{opacity:.92; transform:translateY(-2px);} .btn:active{transform:scale(.98);}
.btn-naranja{background:var(--naranja); color:#fff; box-shadow:0 10px 22px -10px rgba(235,92,46,.6);}
.btn-verde{background:var(--verde-brand); color:#fff; box-shadow:0 10px 22px -10px rgba(0,109,58,.5);}
.btn-outline{background:transparent; color:var(--ink); border-color:rgba(42,31,20,.35);}
.btn-outline:hover{border-color:var(--ink);}

/* ---------- ¿Qué necesitás? (consulta libre → carrito, categorías sin catálogo real) ---------- */
/* scroll-margin-top: el botón "¿Qué necesitás? →" del hero salta acá con
   un link #necesitas; sin este margen, el título queda tapado debajo del
   header fijo al llegar (mismo ajuste que .exit en la home). */
/* padding-top/bottom, no el shorthand de 3 valores: ese pone el
   izquierdo/derecho en 0 y pisa el padding lateral de .wrap, dejando el
   título pegado al borde de la pantalla en mobile (bug real, no es solo
   que "se vea apretado"). */
.necesitas{padding-top:30px; padding-bottom:60px; text-align:center; scroll-margin-top:90px;}
.necesitas-head{margin:0 auto 22px; max-width:56ch;}
.necesitas-head .tag{justify-content:center;}
.necesitas-head h2{font-size:clamp(26px,3.6vw,38px); margin:4px 0 10px;}
.necesitas-head .sub{font-size:14.5px; color:var(--soft); line-height:1.6;}
/* El cuadro de texto y los botones conviven en la misma línea (el texto
   a la izquierda, los botones apilados a la derecha) en vez de quedar el
   texto arriba y los botones debajo; en pantallas angostas vuelve a
   apilarse porque no entran uno al lado del otro. Todo el bloque
   (título, texto y formulario) centrado en la página. */
.necesitas-form{display:flex; align-items:stretch; gap:14px; max-width:820px; margin:0 auto; padding:26px; border:1px solid var(--line); background:var(--cardfill); text-align:left;}
.necesitas-textarea{flex:1; min-width:0; min-height:120px; resize:vertical; background:var(--bg); border:1px solid var(--line); padding:14px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); line-height:1.55;}
.necesitas-textarea::placeholder{color:var(--soft);}
.necesitas-textarea:focus{outline:none; border-color:var(--naranja);}
.necesitas-actions{display:flex; flex-direction:column; justify-content:center; gap:12px; flex-shrink:0; width:200px;}
.necesitas-actions .btn{justify-content:center; width:100%;}
@media(max-width:640px){
  .necesitas-form{flex-direction:column;}
  .necesitas-actions{flex-direction:row; flex-wrap:wrap; width:auto;}
  .necesitas-actions .btn{width:auto;}
}

/* ---------- presupuesto + footer + fab (compartido) — banda oscura cálida de cierre ---------- */
#presupuesto{--bg:var(--deep); --ink:var(--deep-ink); --soft:var(--deep-soft); --line:var(--deep-line); position:relative; overflow:hidden; background:var(--bg); padding:64px 0; border-top:1px solid var(--line); margin-top:30px;}
#presupuesto::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0, rgba(0,0,0,.3) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0, rgba(0,0,0,.3) 1px, transparent 1px, transparent 46px);
}
#presupuesto .row{position:relative; z-index:1; display:flex; gap:48px; flex-wrap:wrap; justify-content:space-between;}
#presupuesto .intro-col{max-width:34ch;}
#presupuesto h2{color:var(--ink); font-size:clamp(26px,4vw,38px); margin-bottom:12px;}
#presupuesto p.sub{color:var(--soft); font-size:14.5px; line-height:1.6;}
.contact-links{display:flex; flex-direction:column; gap:13px; margin-top:22px;}
.contact-links a{display:inline-flex; align-items:flex-start; gap:10px; color:var(--soft); font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.5; transition:color .15s ease;}
.contact-links a svg{flex-shrink:0; margin-top:1px;}
.contact-links a:hover{color:var(--ink);}
/* Mapa de ubicación (reemplaza el form genérico repetido en cada página:
   cada categoría ya tiene su propio "¿Qué necesitás?" y además está el
   botón flotante de WhatsApp, así que acá alcanza con mostrar dónde
   queda el showroom + corralón). */
.map-col{flex:1; min-width:280px; max-width:480px; min-height:300px; border-radius:8px; overflow:hidden; border:1px solid var(--deep-line);}
.map-col iframe{width:100%; height:100%; min-height:300px; border:0; display:block;}

footer{--bg:var(--deep); --soft:var(--deep-soft); position:relative; overflow:hidden; background:var(--bg); color:var(--soft); padding:26px 28px; border-top:1px solid rgba(243,235,222,.06);}
footer::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0, rgba(0,0,0,.3) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0, rgba(0,0,0,.3) 1px, transparent 1px, transparent 46px);
  -webkit-mask-image:radial-gradient(ellipse 75% 130% at 50% 50%, #000 0%, transparent 90%);
  mask-image:radial-gradient(ellipse 75% 130% at 50% 50%, #000 0%, transparent 90%);
}
footer .row{position:relative; z-index:1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; max-width:1180px; margin:0 auto; font-family:'IBM Plex Mono',monospace; font-size:10.5px;}

/* Un solo botón, directo al chat de WhatsApp: antes eran dos (uno que
   desplegaba el otro al tocarlo), simplificado a pedido de la clienta. */
.fab{
  position:fixed; bottom:20px; right:20px; z-index:70;
  display:flex; align-items:center; gap:9px;
  background:rgba(0,109,58,.92); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700;
  padding:14px 20px; border-radius:30px; text-decoration:none; line-height:1;
  box-shadow:0 14px 30px -12px rgba(42,31,20,.45);
  transition:background-color .15s ease, transform .15s ease;
}
.fab:hover{background:var(--verde-brand);}

/* ---------- carrito: contador en header + barra fija ---------- */
/* Antes era un botón con borde cuadrado ("no suma en nada" — feedback
   directo): ahora es texto igual que el resto del header, diferenciado
   por color (el mismo naranja de acento) en vez de una caja. */
.nav-cat-btn{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:13.5px; white-space:nowrap;
  color:var(--naranja); padding-bottom:4px; border-bottom:1.5px solid transparent;
  transition:border-color .15s ease;
}
.nav-cat-btn:hover{border-color:var(--naranja);}
.cart-pill{display:inline-flex; align-items:center; gap:7px; font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:14.5px; color:var(--ink); padding-bottom:4px; border-bottom:1.5px solid transparent;}
.cart-pill .n{display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; background:var(--naranja); color:#fff; font-size:11px; font-weight:700; border-radius:10px;}
/* Aparece como un pop-up al agregar algo (popCartBar en cart.js la muestra
   unos segundos y la esconde sola) en vez de quedar pegada en pantalla
   todo el tiempo que haya algo en el pedido — así no molesta la lectura
   del resto de la página. */
.cart-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:75;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--deep); color:var(--deep-ink); padding:14px 20px;
  border-top:1px solid var(--deep-line); box-shadow:0 -12px 30px -14px rgba(0,0,0,.4);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .3s ease, opacity .3s ease;
}
.cart-bar.visible{transform:translateY(0); opacity:1; pointer-events:auto;}
.cart-bar .cb-count{font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.04em;}
.cart-bar .cb-actions{display:flex; gap:10px; flex-wrap:wrap;}

/* ---------- destacados (productos reales del catálogo, en Terminaciones y Corralón) ---------- */
.destacados{padding-top:24px; padding-bottom:16px; border-top:1px solid var(--line); margin-top:30px;}
.destacados-head{margin-bottom:20px;}
.destacados-head h2{font-size:clamp(26px,3.6vw,38px); max-width:26ch;}
.destacados-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.dest-card{
  border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--bg);
  box-shadow:0 5px 18px -8px rgba(42,31,20,.25);
  display:flex; flex-direction:column;
  transition:box-shadow .25s ease, transform .25s ease;
}
.dest-card:hover{box-shadow:0 20px 38px -14px rgba(42,31,20,.35); transform:translateY(-4px);}
.dc-media{position:relative; aspect-ratio:4/3; overflow:hidden;}
.dc-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.dest-card:hover .dc-media img{transform:scale(1.05);}
.dc-body{padding:14px; display:flex; flex-direction:column; gap:6px; flex:1;}
.dc-tag{font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--naranja);}
.dc-body h3{font-size:13.5px; line-height:1.25; font-family:'Bricolage Grotesque',sans-serif; font-weight:600; color:var(--ink);}
.dc-price{font-size:12px; color:var(--soft); margin-bottom:4px;}
.dc-add{
  /* margin-top:auto para que quede siempre pegado abajo de la card, incluso
     cuando una tarjeta vecina tiene un título más largo (2 líneas) y la
     grilla estira todas las cards a esa misma altura. */
  margin:auto -14px -14px; padding:11px 14px; font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px;
  color:#fff; background:var(--verde-brand); text-align:center; border:none; cursor:pointer;
  transition:background-color .15s ease;
}
.dc-add:hover{background:var(--naranja);}
.dc-add.added{background:var(--verde);}
.link-more{color:var(--ink); opacity:.8; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; transition:gap .2s ease; width:fit-content;}
.link-more:hover{gap:11px; opacity:1;}
.destacados-more{margin-top:20px;}
/* Nunca baja a 1 columna: con 2 siempre, aunque sea un celular chico,
   se ve el doble de producto sin scrollear de más. */
@media(max-width:1000px){ .destacados-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:600px){ .destacados-grid{grid-template-columns:repeat(2,1fr); gap:10px;} }

/* ---------- líneas (grid de categorías con flip cards) — usado en todas las páginas de categoría ---------- */
.lineas{padding-top:24px; padding-bottom:16px;}
.lineas-head{margin-bottom:20px;}
.lineas-head h2{font-size:clamp(26px,3.6vw,38px); max-width:24ch;}
.lineas-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:16px;}

.linea-box{
  flex:1 1 230px; max-width:250px; perspective:1200px; position:relative;
  border-radius:8px; box-shadow:0 6px 20px -9px rgba(42,31,20,.32);
  transition:box-shadow .3s ease, transform .3s ease;
}
.linea-box:hover{box-shadow:0 24px 44px -16px rgba(42,31,20,.45); transform:translateY(-5px);}
.linea-box::before{content:''; display:block; padding-bottom:133.333%;}
.linea-box-inner{position:absolute; inset:0; transition:transform .65s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; -webkit-transform-style:preserve-3d;}
.linea-box.flipped .linea-box-inner,
.linea-box:hover .linea-box-inner{transform:rotateY(180deg);}
.linea-face{position:absolute; inset:0; border-radius:8px; backface-visibility:hidden; -webkit-backface-visibility:hidden; -webkit-transform:rotateY(0deg); overflow:hidden; pointer-events:auto;}
.linea-box.flipped .linea-front,
.linea-box:hover .linea-front{pointer-events:none;}
.linea-back{pointer-events:none;}
.linea-box.flipped .linea-back,
.linea-box:hover .linea-back{pointer-events:auto;}

.linea-front img, .linea-back img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.lb-scrim{position:absolute; inset:0; background:linear-gradient(to top, rgba(4,4,3,.88), transparent 55%); pointer-events:none; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.lb-front-in{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; color:#fff; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.lb-tag{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--naranja); margin-bottom:8px; display:block;}
.linea-front h3{font-size:clamp(14px,1.4vw,17px); line-height:1.18; color:#fff;}

.linea-back{transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
.lb-back-in{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; color:#fff; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.linea-back h3{font-size:clamp(14px,1.4vw,17px); line-height:1.2; margin-bottom:6px; color:#fff;}
.lb-brands{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.78); margin-bottom:10px; display:block;}
.linea-back .go{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:#fff; display:inline-flex; align-items:center; gap:6px; transition:gap .2s ease;}
.linea-back .go:hover{gap:11px;}

.lineas-more{font-size:13px; color:var(--soft); margin-top:20px; max-width:56ch; line-height:1.6;}

/* En mobile, 2 por fila siempre (nunca 1): las cards achicadas de 230px
   mínimo ya no entran de a dos por debajo de ~620px, dejando una sola
   columna — eso es lo que hace scrollear de más. Se fuerza el 50% y se
   ajusta el texto interno (más chico, menos padding) para que siga
   siendo legible en el espacio reducido. El link "Ver productos →" de
   atrás suma un poco de padding para que sea más fácil de tocar. */
@media(max-width:620px){
  .lineas-grid{gap:10px;}
  .linea-box{flex:0 1 calc(50% - 5px); max-width:calc(50% - 5px);}
  .lb-front-in, .lb-back-in{padding:12px;}
  .lb-tag{font-size:9px; margin-bottom:5px;}
  .linea-front h3, .linea-back h3{font-size:clamp(12px,3.4vw,14px);}
  .lb-brands{font-size:8px; margin-bottom:6px;}
  .linea-back .go{font-size:8px; padding:5px 0;}
}

/* Ahora que el nav comparte fila con el logo, "Catálogo" y el carrito,
   necesita bastante más ancho que antes para entrar sin partirse — medido
   con Playwright, entra recién a partir de ~1150px con la tipografía de
   respaldo (sin la fuente real no se puede medir más preciso acá), así que
   el corte fijo queda en 1250px con margen. Por debajo, menú hamburguesa
   directamente. El chequeo en JS (include.js) corrige para arriba si la
   fuente real necesita más lugar del que este número asume. */
@media(max-width:1250px){
  .main-nav{display:none;}
  .nav-cat-btn{display:none;}
  .burger{display:flex;}
}

/* Red de seguridad: si el <nav> medido en JS no entra en una sola línea con
   la tipografía real ya cargada, forzamos el menú hamburguesa aunque el
   ancho de pantalla esté por encima de los 850px de arriba. Ver include.js. */
html.nav-force-burger .main-nav{display:none;}
html.nav-force-burger .nav-cat-btn{display:none;}
html.nav-force-burger .burger{display:flex;}

@media(max-width:760px){
  #presupuesto .row{flex-direction:column;}
  .cart-bar{padding:12px 16px; flex-wrap:wrap;}
}

/* ====== TEMPORAL: venta online oculta ======
   Mientras esto esté activo, el catálogo, el carrito ("Mi pedido") y los
   destacados quedan ocultos; solo sigue el pedido de presupuesto por
   WhatsApp. Para reactivar todo, borrar este bloque entero. */
.vo-temp-hidden{display:none !important;}