/* ============================================================
   LIBRERÍA CASAMARX — Sistema de Diseño Principal
   Versión 2.0 · Identidad Visual Oficial (design-system-casamarx.md)
   Convención de clases: BEM abreviado — bloque, bloque__elemento, bloque--modificador
   Estados: is-active, is-disabled, is-loading, is-checked, is-closing
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   TOKENS DE DISEÑO
   ============================================================ */

:root {
  /* Paleta oficial CasaMarx */
  --rojo:        #6D0A0A;
  --rojo-claro:  #8B1111;
  --azul:        #08273B;
  --azul-claro:  #0D3652;
  --amarillo:    #CD790B;
  --verde:       #3F481B;
  --crema:       #F2F0EC;
  --hueso:       #E8E5DD;
  --gris-texto:  #3A3A3A;
  --gris-sutil:  #C8C8C8;
  --blanco:      #FFFFFF;
  --negro:       #0A0A0A;

  /* Modo oscuro (referencia body.dark) */
  --dark-bg:      #2B2B2B;
  --dark-surface: #5A5A5A;
  --dark-text:    #F2F0EC;
  --dark-accent:  #CD790B;

  /* Semántica (alert/toast/badge de estado) */
  --info-bg:    #e4ebf2; --info-rule:    var(--azul);     --info-text:    #08273B;
  --success-bg: #ecefdf; --success-rule: var(--verde);    --success-text: #2c3413;
  --warning-bg: #f7e7c7; --warning-rule: var(--amarillo);  --warning-text: #6e4006;
  --error-bg:   #f0d8d8; --error-rule:   var(--rojo);      --error-text:   #4a0606;

  /* Tipografías (fallback real: Barlow Condensed / Source Sans 3 / JetBrains Mono) */
  --font-display: "Aileron", "Barlow Condensed", system-ui, sans-serif;
  --font-body:    "Open Sauce One", "Source Sans 3", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Escala tipográfica */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-base:1rem;      /* 16px */
  --text-md:  1.125rem;  /* 18px */
  --text-lg:  1.375rem;  /* 22px */
  --text-xl:  1.75rem;   /* 28px */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 3rem;      /* 48px */
  --text-4xl: 4rem;      /* 64px */

  /* Espaciado (base 4px) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px;

  /* Layout */
  --maxw:       960px;  /* ancho de contenido editorial (texto, about, contacto) */
  --maxw-shop:  1280px; /* ancho de layouts de tienda/grids, adaptación práctica del sistema */
  --sidebar-w:  280px;
  --radius:     4px; /* único radio del sistema, se usa en todo */

  /* Z-index */
  --z-base: 1; --z-dropdown: 100; --z-modal: 1000; --z-tooltip: 1500;

  /* Elevación (niveles ad-hoc, no hay --shadow-* globales en el sistema, se definen aquí para reuso) */
  --shadow-l1: 0 1px 0 rgba(8,39,59,.04), 0 2px 4px rgba(8,39,59,.06);
  --shadow-l2: 0 2px 4px rgba(8,39,59,.05), 0 8px 16px rgba(8,39,59,.09);
  --shadow-l3: 0 4px 8px rgba(8,39,59,.06), 0 16px 32px rgba(8,39,59,.14);
  --shadow-modal:   0 4px 8px rgba(0,0,0,.10), 0 16px 40px rgba(0,0,0,.28);
  --shadow-tooltip: 0 8px 20px rgba(8,39,59,.12);

  --transition: all 0.2s ease;
  --transition-slow: all 0.4s ease;
}

/* ============================================================
   MODO CLARO (por defecto) / MODO OSCURO
   ============================================================ */

:root, [data-theme="light"] {
  --bg-primary:   var(--crema);
  --bg-secondary: var(--hueso);
  --bg-card:      var(--blanco);
  --bg-inverse:   var(--azul);

  --text-primary:   var(--azul);
  --text-secondary: var(--gris-texto);
  --text-muted:     #6b6b6b;
  --text-inverse:   var(--crema);

  --border-color:  var(--gris-sutil);
  --border-strong: var(--azul);

  --link-color: var(--rojo);
  --link-hover: var(--rojo-claro);

  --btn-primary-bg: var(--rojo); --btn-primary-text: var(--crema); --btn-primary-hover: var(--rojo-claro);
  --btn-secondary-text: var(--azul); --btn-secondary-border: var(--azul);

  --input-bg: var(--blanco); --input-border: var(--gris-sutil);
  --card-shadow: var(--shadow-l1);
  --header-shadow: var(--shadow-l1);
}

[data-theme="dark"] {
  --bg-primary:   var(--dark-bg);
  --bg-secondary: var(--dark-surface);
  --bg-card:      var(--dark-surface);
  --bg-inverse:   var(--crema);

  --text-primary:   var(--dark-text);
  --text-secondary: #C4C4C4;
  --text-muted:     #9A9A9A;
  --text-inverse:   var(--azul);

  --border-color:  #4A4A4A;
  --border-strong: var(--crema);

  --link-color: var(--dark-accent);
  --link-hover: #E8963C;

  --btn-primary-bg: var(--rojo); --btn-primary-text: var(--crema); --btn-primary-hover: #8B1111;
  --btn-secondary-text: var(--crema); --btn-secondary-border: var(--crema);

  --input-bg: var(--dark-surface); --input-border: #4A4A4A;
  --card-shadow: 0 4px 16px rgba(0,0,0,.4);
  --header-shadow: 0 2px 8px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:   var(--dark-bg);
    --bg-secondary: var(--dark-surface);
    --bg-card:      var(--dark-surface);
    --bg-inverse:   var(--crema);
    --text-primary:   var(--dark-text);
    --text-secondary: #C4C4C4;
    --text-muted:     #9A9A9A;
    --text-inverse:   var(--azul);
    --border-color:  #4A4A4A;
    --border-strong: var(--crema);
    --link-color: var(--dark-accent);
    --link-hover: #E8963C;
    --btn-primary-bg: var(--rojo); --btn-primary-text: var(--crema); --btn-primary-hover: #8B1111;
    --btn-secondary-text: var(--crema); --btn-secondary-border: var(--crema);
    --input-bg: var(--dark-surface); --input-border: #4A4A4A;
    --card-shadow: 0 4px 16px rgba(0,0,0,.4);
    --header-shadow: 0 2px 8px rgba(0,0,0,.4);
  }
}

/* ============================================================
   RESET Y BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-secondary);
  background-color: var(--bg-primary);
  transition: background-color .2s ease, color .2s ease;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link-color); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--link-hover); }
ul, ol { list-style: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }

/* Focus ring universal */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--amarillo);
  outline-offset: 2px;
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  text-transform: uppercase;
}

h1 { font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl)); }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); }
h3 { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p { font-size: var(--text-base); line-height: 1.75; color: var(--text-secondary); margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

.text-small { font-size: var(--text-sm); }
.text-xs    { font-size: var(--text-xs); }
.text-large { font-size: var(--text-md); }
.text-mono  { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amarillo);
}

.section-number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
  display: block;
}

blockquote {
  border-left: 4px solid var(--rojo);
  padding: var(--space-4) var(--space-8);
  margin: var(--space-8) 0;
  font-style: italic;
  font-size: var(--text-md);
  background: var(--bg-secondary);
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container { width: 100%; max-width: var(--maxw-shop); margin-inline: auto; padding-inline: var(--space-6); }
.container--narrow { max-width: var(--maxw); }

/* Texto editorial largo (Sobre nosotrxs, Privacidad, Términos): los h3
   heredan el estilo mayúsculas/condensado de los títulos de sección, que
   funciona para encabezados cortos pero resulta pesado en párrafos largos
   de lectura. Se suaviza solo dentro de .container--narrow. */
.container--narrow h3 {
  text-transform: none; font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3);
}
.container--narrow ul, .container--narrow ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); color: var(--text-secondary); line-height: 1.75; }
.container--narrow li { margin-bottom: var(--space-2); }
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }
.section { padding-block: var(--space-12); }
.section--alt { background-color: var(--bg-secondary); }
.section--dark { background-color: var(--azul); color: var(--crema); }
.section--dark h2, .section--dark h3, .section--dark .eyebrow { color: var(--crema); }
.section--dark p { color: rgba(242,240,236,0.8); }
.section-header { margin-bottom: var(--space-9); }
.section-header--centered { text-align: center; }
.section-title { margin-bottom: var(--space-3); }
.section-subtitle { font-size: var(--text-md); max-width: 600px; }
.section-header--centered .section-subtitle { margin-inline: auto; }

/* ============================================================
   BARRA SUPERIOR (eliminada)
   ============================================================ */

/* ============================================================
   NAVBAR / HEADER — .nv-bar
   ============================================================ */

.nv-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}
.nv-bar.is-active { box-shadow: var(--shadow-l2); }

.nv-bar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-4);
}

.nv-bar__logo { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.nv-bar__logo img { height: 72px; width: auto; }

/* Logo del header según modo claro/oscuro: se imprimen ambas variantes
   (color y blanco) y se muestra solo la que corresponde, igual que el
   ícono de sol/luna del botón de tema. Por defecto (tema claro) se ve
   la versión a color. */
.nv-bar__logo-img--dark { display: none; }
[data-theme="dark"] .nv-bar__logo-img--light { display: none; }
[data-theme="dark"] .nv-bar__logo-img--dark { display: block; }

.nv-bar__nav { display: flex; justify-content: center; }
.nv-bar__nav ul { display: flex; gap: var(--space-1); align-items: center; }
.nv-bar__nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  position: relative;
}
.nv-bar__nav a::after {
  content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; background-color: var(--rojo); transition: var(--transition);
}
.nv-bar__nav a:hover { color: var(--rojo); }
.nv-bar__nav a:hover::after, .nv-bar__nav .current-menu-item a::after { width: 70%; }
.nv-bar__nav .current-menu-item a { color: var(--rojo); }

.nv-bar__actions {
  display: flex; align-items: center; gap: var(--space-1);
  /* Fija esta columna al tercer track del grid del header (auto | 1fr | auto).
     Sin esto, cuando .nv-bar__nav se oculta en móvil (display:none, se saca
     del flujo del grid), las acciones se recolocaban automáticamente en el
     segundo track (el flexible), quedando pegadas al logo en vez de a la
     derecha. */
  grid-column: 3;
}

.nv-bar__icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius);
  color: var(--text-primary); background: transparent; border: none; cursor: pointer;
  transition: var(--transition); font-size: 1.1rem; position: relative;
}
.nv-bar__icon-btn:hover { background: var(--bg-secondary); color: var(--rojo); }

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  border-radius: var(--radius); color: var(--crema);
}
.badge--rojo { background: var(--rojo); }
.badge--azul { background: var(--azul); }
.badge--verde { background: var(--verde); }
.badge--amarillo { background: var(--amarillo); color: var(--azul); }
.badge--dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-size: 0.65rem; line-height: 18px;
}

/* Menú inferior fijo (.mobile-tabbar), solo móvil: ver reglas dentro del
   @media (max-width: 782px) más abajo en este archivo. En escritorio
   permanece oculto (display: none) y no ocupa espacio. La clase
   ".nv-bar.is-hidden" (ocultamiento del header al hacer scroll) también
   se define ahí; .nv-bar ya tiene "transition: all .2s ease" (ver arriba
   en este archivo), que cubre el transform del ocultamiento sin más ajustes. */
.mobile-tabbar { display: none; }

/* ============================================================
   BUSCADOR — .srch
   ============================================================ */

.srch-overlay {
  position: fixed; inset: 0; background: rgba(8,39,59,0.94); z-index: var(--z-modal);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 100px;
  opacity: 0; visibility: hidden; transition: var(--transition);
}
.srch-overlay.is-active { opacity: 1; visibility: visible; }
.srch-overlay__inner { width: 100%; max-width: 720px; padding: var(--space-8); }
.srch__field { position: relative; }
.srch__input {
  width: 100%; background: transparent; border: none; border-bottom: 3px solid var(--crema);
  color: var(--crema); font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, var(--text-3xl));
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-4) 0; outline: none;
}
.srch__input::placeholder { color: rgba(242,240,236,0.4); }
.srch-overlay__close {
  position: absolute; top: var(--space-8); right: var(--space-8); background: none; border: none;
  color: var(--crema); font-size: 2rem; cursor: pointer; opacity: 0.7; transition: var(--transition);
}
.srch-overlay__close:hover { opacity: 1; }

/* ============================================================
   BOTONES — .btn
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.75rem 1.5rem; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; transition: var(--transition); white-space: nowrap; text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); }
.btn--primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--btn-primary-text); }
.btn--secondary { background: transparent; color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); }
.btn--secondary:hover { background: var(--btn-secondary-border); color: var(--bg-primary); }
.btn--outline { background: transparent; color: var(--text-primary); border-color: var(--border-color); }
.btn--outline:hover { border-color: var(--rojo); color: var(--rojo); }
.btn--ghost { background: transparent; color: var(--crema); border-color: var(--crema); }
.btn--ghost:hover { background: var(--crema); color: var(--azul); }
.btn--s { font-size: var(--text-xs); padding: 0.5rem 1rem; }
.btn--m { font-size: var(--text-sm); padding: 0.75rem 1.5rem; }
.btn--l { font-size: var(--text-base); padding: 1rem 2.25rem; }
.btn--full { width: 100%; }
.btn--icon { padding: 0.75rem; }
.btn[disabled], .btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ============================================================
   INPUTS — .inp
   ============================================================ */

.inp {
  width: 100%; background: var(--input-bg); border: 2px solid var(--input-border);
  border-radius: var(--radius); color: var(--text-primary); padding: 0.75rem var(--space-4);
  font-family: var(--font-body); transition: var(--transition);
}
.inp:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(109,10,10,.12); }
.inp--s { padding: 0.5rem var(--space-3); font-size: var(--text-sm); }
.inp--l { padding: 1rem var(--space-5); font-size: var(--text-md); }
.inp__label {
  display: block; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-primary); margin-bottom: var(--space-1);
}
.inp__hint { font-size: var(--text-xs); margin-top: var(--space-1); color: var(--text-muted); }
.inp__hint--err { color: var(--error-rule); }
.inp__hint--ok { color: var(--success-rule); }
.inp.is-disabled { opacity: 0.6; cursor: not-allowed; }
.form-group { margin-bottom: var(--space-6); }

/* ============================================================
   ALERT
   ============================================================ */

.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius); border-left: 4px solid transparent;
  font-size: var(--text-sm);
}
.alert--info    { background: var(--info-bg);    border-color: var(--info-rule);    color: var(--info-text); }
.alert--success { background: var(--success-bg); border-color: var(--success-rule); color: var(--success-text); }
.alert--warning { background: var(--warning-bg); border-color: var(--warning-rule); color: var(--warning-text); }
.alert--error   { background: var(--error-bg);   border-color: var(--error-rule);   color: var(--error-text); }

/* ============================================================
   TOGGLE — .tgl (usado en modo claro/oscuro)
   ============================================================ */

.tgl { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.tgl__track {
  width: 40px; height: 22px; border-radius: 20px; background: var(--border-color);
  position: relative; transition: var(--transition); flex-shrink: 0;
}
.tgl__knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blanco); transition: var(--transition); box-shadow: var(--shadow-l1);
}
.tgl.is-checked .tgl__track { background: var(--rojo); }
.tgl.is-checked .tgl__knob { transform: translateX(18px); }
.tgl--s .tgl__track { width: 32px; height: 18px; }
.tgl--s .tgl__knob { width: 14px; height: 14px; }

/* Botón toggle de tema en el header, versión ícono simple */
.theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); background: transparent; border: none; color: var(--text-primary); cursor: pointer; font-size: 1.1rem; transition: var(--transition); }
.theme-toggle-btn:hover { background: var(--bg-secondary); color: var(--rojo); }

/* ============================================================
   SISTEMA DE ÍCONOS SVG (.ico)
   ============================================================ */
.ico { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.ico--xs { width: 14px; height: 14px; }
.ico--s { width: 16px; height: 16px; }
.ico--m { width: 24px; height: 24px; }
.ico--l { width: 32px; height: 32px; }
.ico--xl { width: 64px; height: 64px; }

/* Toggle de tema: se muestra solo el ícono correspondiente al modo activo.
   Por defecto (tema claro) se muestra la luna (para pasar a oscuro). */
.theme-toggle-btn .js-icon-sun { display: none; }
.theme-toggle-btn .js-icon-moon { display: block; }
[data-theme="dark"] .theme-toggle-btn .js-icon-sun { display: block; }
[data-theme="dark"] .theme-toggle-btn .js-icon-moon { display: none; }

/* ============================================================
   CINTILLO DE MARCA (marquee)
   ============================================================ */

.brand-marquee {
  background: var(--azul); color: var(--crema); overflow: hidden; position: relative;
  border-top: 1px solid rgba(242,240,236,0.06); border-bottom: 1px solid rgba(242,240,236,0.06);
}
.brand-marquee__track {
  display: flex; gap: var(--space-12); align-items: center;
  padding: var(--space-4) 0; white-space: nowrap; width: max-content;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--text-lg); letter-spacing: 0.04em;
  animation: casamarx-marquee-scroll 32s linear infinite;
}
.brand-marquee__track span { display: inline-flex; align-items: center; gap: var(--space-12); }
.brand-marquee__dot { width: 8px; height: 8px; background: var(--amarillo); border-radius: 50%; display: inline-block; }
.brand-marquee:hover .brand-marquee__track { animation-play-state: paused; }
@keyframes casamarx-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee__track { animation: none; }
}

/* ============================================================
   HERO CON SLIDER
   ============================================================ */

.hero-slider { position: relative; min-height: 88vh; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  opacity: 0; visibility: hidden; z-index: 1; transition: opacity .6s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.hero-slide__visual { position: relative; background-color: var(--azul); overflow: hidden; }
.hero-slide__visual-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(109,10,10,0.25) 0%, transparent 60%), var(--azul);
}
.hero-slide__visual img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.45; mix-blend-mode: luminosity;
}
.hero-slide__accent { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--rojo) 0%, var(--amarillo) 100%); z-index: 1; }

.hero-slide__content {
  background-color: var(--bg-primary); padding: var(--space-12) var(--space-9);
  display: flex; flex-direction: column; justify-content: center; position: relative;
}
.hero-slide__content::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--rojo); }
.hero-slide__eyebrow { margin-bottom: var(--space-6); }
.hero-slide__title { font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl)); line-height: 0.95; margin-bottom: var(--space-6); }
.hero-slide__title strong { display: block; color: var(--rojo); }
.hero-slide__description { font-size: var(--text-md); max-width: 520px; margin-bottom: var(--space-8); }
.hero-slide__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero-slider__nav {
  position: absolute; bottom: var(--space-4); left: var(--space-9); display: flex; gap: var(--space-2); z-index: 3;
}
.hero-slider__dot {
  width: 28px; height: 3px; background: rgba(8,39,59,.25); border: none; cursor: pointer; transition: var(--transition); padding: 0;
}
.hero-slider__dot.is-active { background: var(--rojo); }

.hero-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color);
  background: var(--bg-card); color: var(--text-primary); cursor: pointer; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.hero-slider__arrow:hover { background: var(--rojo); color: var(--crema); border-color: var(--rojo); }
.hero-slider__arrow--prev { left: var(--space-4); }
.hero-slider__arrow--next { right: var(--space-4); }

/* Móvil: la imagen ocupa todo el slide como fondo, el texto se superpone con un scrim */
@media (max-width: 1024px) {
  .hero-slider { min-height: 78vh; }
  .hero-slide { display: block; }
  .hero-slide__visual { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-slide__content {
    position: relative; z-index: 1; height: 100%; width: 100%;
    background: linear-gradient(180deg, rgba(8,39,59,0.1) 0%, rgba(8,39,59,0.82) 55%, rgba(8,39,59,0.94) 100%);
    justify-content: flex-end;
    padding: var(--space-9) var(--space-6) var(--space-11);
  }
  .hero-slide__content::before { display: none; }
  .hero-slide__title, .hero-slide__title strong { color: var(--crema); }
  .hero-slide__description { color: rgba(242,240,236,0.85); }

  .hero-slider__arrow { top: var(--space-9); transform: none; width: 36px; height: 36px; }
  .hero-slider__nav { left: var(--space-6); }
}

/* ============================================================
   CATEGORÍAS
   ============================================================ */

.categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.category-card { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius); cursor: pointer; }
.category-card__bg { position: absolute; inset: 0; transition: var(--transition-slow); }
.category-card--marxismo .category-card__bg { background: linear-gradient(160deg, var(--rojo) 0%, #3D0606 100%); }
.category-card--politica .category-card__bg { background: linear-gradient(160deg, var(--azul) 0%, #041520 100%); }
.category-card--historia .category-card__bg { background: linear-gradient(160deg, var(--verde) 0%, #1E2409 100%); }
.category-card--cultura .category-card__bg { background: linear-gradient(160deg, #7A4B06 0%, var(--amarillo) 100%); }
.category-card__content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-6); background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%); }
.category-card__icon { font-size: 2.25rem; margin-bottom: var(--space-3); display: block; }
.category-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); text-transform: uppercase; color: var(--crema); margin-bottom: var(--space-1); }
.category-card__count { font-size: var(--text-xs); font-family: var(--font-mono); color: rgba(242,240,236,0.65); }
.category-card:hover .category-card__bg { transform: scale(1.05); }

/* ============================================================
   TARJETA DE PRODUCTO — .pc / .pc-grid
   ============================================================ */

.pc-grid, ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); padding: 0; margin: 0; list-style: none; float: none; }
.pc-grid--3col { grid-template-columns: repeat(3, 1fr); }

.pc {
  background: var(--bg-card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--card-shadow); transition: var(--transition); border: 1px solid var(--border-color);
  display: flex; flex-direction: column; position: relative;
  /* WooCommerce le da a cada <li class="product"> un ancho en % y float pensados
     para su propio layout (no-grid); dentro de nuestro .pc-grid ese % se calcula
     sobre la celda del grid (no sobre el contenedor), encogiendo la tarjeta a una
     fracción de una fracción. Se anula explícitamente aquí. */
  width: auto !important; margin: 0 !important; float: none !important;
}
.pc:hover { box-shadow: var(--shadow-l2); border-color: var(--rojo); transform: translateY(-4px); }
.pc--featured { grid-column: span 2; }

.pc__image-wrap { position: relative; aspect-ratio: 3/4; background: var(--bg-secondary); overflow: hidden; }
.pc__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-slow); }
.pc:hover .pc__image-wrap img { transform: scale(1.05); }

.pc__flag {
  position: absolute; top: var(--space-4); left: var(--space-4); padding: 3px 10px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.pc__flag--nuevo { background: var(--rojo); color: var(--crema); }
.pc__flag--recomendado { background: var(--amarillo); color: var(--azul); }
.pc__flag--agotado { background: var(--gris-sutil); color: var(--gris-texto); }

.pc__actions { position: absolute; bottom: var(--space-4); right: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); opacity: 0; transform: translateX(10px); transition: var(--transition); }
.pc:hover .pc__actions { opacity: 1; transform: translateX(0); }
.pc__quick-btn {
  width: 36px; height: 36px; border-radius: var(--radius); background: var(--azul); color: var(--crema);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm);
}
.pc__quick-btn:hover { background: var(--rojo); }

.pc__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pc__category { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amarillo); margin-bottom: var(--space-1); }
.pc__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; text-transform: uppercase; color: var(--text-primary); margin-bottom: var(--space-1); line-height: 1.25; }
.pc__author { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; margin-bottom: var(--space-2); flex: 1; }
.pc__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-color); }
.pc__price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--rojo); }
.pc__price del { font-size: var(--text-sm); font-weight: 400; color: var(--text-muted); display: block; line-height: 1; }

/* WooCommerce nativo, heredando el estilo .pc (la tarjeta real siempre trae
   ambas clases "product" y "pc" — wc_product_class añade "pc" al li). Estilamos
   los elementos que WooCommerce genera automáticamente (título, precio, botón)
   con selectores propios de .pc, sin pelear con las reglas de .pc__* de arriba. */
.pc .woocommerce-loop-product__title {
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
  text-transform: uppercase; color: var(--text-primary); margin: 0 0 var(--space-1);
}
.pc .price {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--rojo);
  margin: 0; flex: 1 1 auto; min-width: 0;
}
.pc .price del { font-size: var(--text-sm); font-weight: 400; color: var(--text-muted); opacity: .65; margin-right: var(--space-2); }
.pc .price ins { text-decoration: none; }
/* !important en todo este bloque: en la página de tienda (archivo de productos)
   WooCommerce carga su propia hoja de estilos por defecto además de la nuestra
   (en el home, que arma las tarjetas "a mano", esa hoja no se carga), y su
   selector .button gana el empate de especificidad frente al nuestro. Forzamos
   aquí para que el botón se vea igual en tienda y home. */
.pc .button,
.pc a.button,
.pc .add_to_cart_button,
.pc .added_to_cart {
  font-family: var(--font-display) !important; font-size: var(--text-xs) !important; font-weight: 600 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important; background: var(--rojo) !important; color: var(--crema) !important;
  border: 2px solid var(--rojo) !important; border-radius: var(--radius) !important; padding: 0.55rem 1rem !important;
  display: inline-block !important; margin: 0 !important; white-space: nowrap !important; flex-shrink: 0 !important;
}
.pc .button:hover,
.pc a.button:hover,
.pc .add_to_cart_button:hover,
.pc .added_to_cart:hover {
  background: var(--rojo-claro) !important; border-color: var(--rojo-claro) !important; color: var(--crema) !important;
}

/* ============================================================
   GALERÍA "SOBRE NOSOTRXS" (tour virtual) + LIGHTBOX
   ============================================================ */

.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
.gallery-item {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border-color); background: var(--bg-secondary); cursor: pointer;
  padding: 0; display: block; width: 100%;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-slow); display: block; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-2) var(--space-3);
  background: linear-gradient(to top, rgba(8,39,59,.85), transparent);
  color: var(--crema); font-size: var(--text-xs); text-align: left;
  opacity: 0; transition: var(--transition);
}
.gallery-item:hover .gallery-item__caption, .gallery-item:focus .gallery-item__caption { opacity: 1; }

.gallery-lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(8,39,59,.92); display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: var(--transition); padding: var(--space-6);
}
.gallery-lightbox.is-active { opacity: 1; visibility: visible; }
.gallery-lightbox__stage { max-width: 900px; max-height: 85vh; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.gallery-lightbox__img { max-width: 100%; max-height: 75vh; object-fit: contain; border-radius: var(--radius); }
.gallery-lightbox__caption { color: var(--crema); font-size: var(--text-sm); text-align: center; margin: 0; }
.gallery-lightbox__close {
  position: absolute; top: var(--space-6); right: var(--space-6); background: none; border: none;
  color: var(--crema); font-size: 2rem; line-height: 1; cursor: pointer;
}
.gallery-lightbox__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1);
  border: none; color: var(--crema); font-size: 2rem; width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.gallery-lightbox__arrow:hover { background: rgba(255,255,255,.2); }
.gallery-lightbox__arrow--prev { left: var(--space-6); }
.gallery-lightbox__arrow--next { right: var(--space-6); }

@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 782px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-lightbox__arrow { width: 40px; height: 40px; font-size: 1.5rem; }
}

/* ============================================================
   MODAL DE VISTA RÁPIDA (.modal) + WooCommerce single product
   ============================================================ */

.modal-overlay {
  position: fixed; inset: 0; background: rgba(8,39,59,.7); z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--space-6);
  opacity: 0; visibility: hidden; transition: var(--transition);
}
.modal-overlay.is-active { opacity: 1; visibility: visible; }
.modal { background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow-modal); width: 100%; max-height: 90vh; overflow-y: auto; transform: translateY(16px); transition: var(--transition); }
.modal-overlay.is-active .modal { transform: translateY(0); }
.modal--s { max-width: 360px; }
.modal--m { max-width: 460px; }
.modal--l { max-width: 580px; }
.modal--quickview { max-width: 760px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6); border-bottom: 1px solid var(--border-color); }
.modal__body { padding: var(--space-6); }
.modal__foot { padding: var(--space-6); border-top: 1px solid var(--border-color); display: flex; gap: var(--space-3); justify-content: flex-end; }
.modal__close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); line-height: 1; }
.modal__close:hover { color: var(--rojo); }

.qv-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-6); }
.qv-layout__image { border-radius: var(--radius); overflow: hidden; background: var(--bg-secondary); aspect-ratio: 3/4; }
.qv-layout__image img { width: 100%; height: 100%; object-fit: cover; }
.qv-layout__price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--rojo); margin: var(--space-3) 0; }
.qv-layout__price del { font-size: var(--text-md); font-weight: 400; color: var(--text-muted); opacity: .65; margin-right: var(--space-2); text-decoration: line-through; }
.qv-layout__price ins { text-decoration: none; }
.qv-layout__author { font-style: italic; color: var(--text-muted); margin-bottom: var(--space-3); }
.qv-loading { text-align: center; padding: var(--space-12) 0; color: var(--text-muted); }

/* ============================================================
   PÁGINA DE PRODUCTO INDIVIDUAL
   ============================================================ */

/* Bug corregido (v5.1.5): ".product-single" también lleva la clase
   ".container" en single-product.php, y "padding: var(--space-12) 0;"
   (shorthand) resetea los 4 lados a la vez — anulaba el padding-inline
   horizontal que ".container" ya aporta, pegando todo (imagen, texto,
   pestañas, relacionados) al borde de la pantalla, sobre todo notorio en
   móvil de una sola columna. Se cambió a padding-block para no tocar el
   horizontal. */
.product-single { padding-block: var(--space-12); }
.product-single__layout { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 64px; align-items: start; }
.product-single__gallery { position: sticky; top: 90px; max-width: 320px; }
.product-single__gallery img { border-radius: var(--radius); box-shadow: var(--shadow-l3); }

/* Galería de producto de WooCommerce (FlexSlider + PhotoSwipe): el JS
   propio de WooCommerce sí arma el carrusel (calcula anchos, activa la
   diapositiva actual), pero necesita que la hoja de estilos de
   WooCommerce le dé forma al contenedor y sobre todo a la franja de
   miniaturas; si esa hoja no carga (ej. por un plugin de caché/minify),
   las miniaturas se ven como una lista apilada sin estilo. Se define
   aquí de forma independiente para no depender de eso.

   Rediseño (v4.7.0): la imagen ya no ocupa media pantalla (columna de
   la galería con tope de 440px) y la franja de miniaturas se oculta,
   reemplazada por dos flechas ‹ › superpuestas sobre la imagen (igual
   que en la mayoría de tiendas en línea); las flechas simulan un clic
   sobre la miniatura correspondiente, que es como FlexSlider ya sabe
   cambiar de diapositiva, así que no hace falta reinicializar nada. */
.woocommerce-product-gallery { position: relative; }
/* WooCommerce mete por defecto el ícono de la lupa como el carácter
   emoji "🔍" en texto plano dentro de este enlace (no como imagen). Se
   oculta ese texto (font-size:0) y se dibuja en su lugar el ícono de
   Dashicons ya cargado en el sitio (mismo mecanismo que el botón
   sol/luna), para no dejar ningún emoji visible. */
.woocommerce-product-gallery__trigger {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg-card);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-l2);
  font-size: 0; line-height: 0;
}
.woocommerce-product-gallery__trigger img { box-shadow: none !important; width: 18px; height: 18px; }
.woocommerce-product-gallery__trigger::before {
  font-family: dashicons; content: "\f179"; font-size: 16px; line-height: 1; color: var(--text-primary);
}
/* Importante: NO forzar height/aspect-ratio aquí. FlexSlider calcula por
   JS la altura de .flex-viewport a partir de la altura natural de
   .woocommerce-product-gallery__wrapper; si esa altura se fuerza por CSS
   (aspect-ratio, height:100%) se crea una dependencia circular —el
   wrapper depende del viewport y el viewport depende del wrapper— que
   descuadra el cálculo de FlexSlider y hace que las diapositivas se vean
   encimadas/mal alineadas. La reducción de tamaño de la imagen se logra
   solo achicando el ancho de la columna (.product-single__gallery), no
   recortando su alto. */
.woocommerce-product-gallery .flex-viewport {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-l3);
}
.woocommerce-product-gallery__wrapper { margin: 0; padding: 0; list-style: none; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; border-radius: 0; box-shadow: none; }

/* Franja de miniaturas oculta a la vista; sigue existiendo en el DOM
   (FlexSlider la necesita para funcionar) pero fuera de pantalla. */
.woocommerce-product-gallery .flex-control-thumbs {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* Flechas propias de navegación, solo se muestran si hay más de 1 foto
   (la clase la agrega initProductGalleryArrows() en main.js). */
.product-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(8,39,59,.55); color: var(--crema);
  border: none; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 1.3rem;
  transition: var(--transition);
}
.woocommerce-product-gallery--has-arrows .product-gallery-arrow { display: flex; }
.product-gallery-arrow:hover { background: var(--rojo); }
.product-gallery-arrow--prev { left: var(--space-3); }
.product-gallery-arrow--next { right: var(--space-3); }

.product-single__category { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amarillo); margin-bottom: var(--space-3); }
.product-single__title { font-size: clamp(var(--text-xl), 2.6vw, var(--text-2xl)); margin-bottom: var(--space-3); line-height: 1.15; }
.product-single__author { font-style: italic; font-size: var(--text-md); color: var(--text-secondary); margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-color); }
.product-single__price { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--rojo); margin-bottom: var(--space-5); }
.product-single__price del { font-size: var(--text-lg); color: var(--text-muted); font-weight: 400; margin-right: var(--space-4); }
.product-single__description { margin-bottom: var(--space-6); }
.product-single__description:empty { margin-bottom: 0; }

.product-meta-table { width: 100%; margin-bottom: var(--space-7); font-family: var(--font-mono); border-top: 1px solid var(--border-color); }
.product-meta-table tr td { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-color); font-size: var(--text-sm); }
.product-meta-table tr td:first-child { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); width: 40%; font-size: var(--text-xs); }

.add-to-cart-section { display: flex; gap: var(--space-4); align-items: center; margin-top: 0; padding-top: var(--space-6); border-top: 1px solid var(--border-color); flex-wrap: wrap; }

/* Selector de cantidad de la PDP, sin estilo propio (WooCommerce imprime
   un <input type="number"> nativo, sin las clases .quantity-input/.quantity-btn
   que sí tiene el carrito) — se ve como un elemento suelto y feo. Se
   oculta en móvil (v5.1.5); el valor por defecto sigue siendo 1 y se
   sigue enviando igual al añadir al carrito, solo que sin el control
   visible. Escritorio no se toca. */
@media (max-width: 782px) {
  .add-to-cart-section .quantity { display: none; }
}

/* WooCommerce imprime su propio botón (.single_add_to_cart_button.button.alt)
   con su morado de marca por defecto (#7f54b9); nunca quedó cubierto por
   nuestro estilo de botones porque .btn--primary solo se aplica donde lo
   escribimos a mano — este botón lo pone WooCommerce, no nuestra plantilla.
   Se fuerza aquí para que coincida con el resto del sitio (v4.7.5). */
.add-to-cart-section .single_add_to_cart_button,
.add-to-cart-section .button {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-bg) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  padding: 0.85rem var(--space-6) !important;
  text-transform: none;
  box-shadow: none !important;
}
.add-to-cart-section .single_add_to_cart_button:hover,
.add-to-cart-section .button:hover {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-text) !important;
}
.quantity-input { display: flex; align-items: center; border: 2px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
.quantity-btn { background: var(--bg-secondary); border: none; padding: 0.75rem var(--space-4); cursor: pointer; color: var(--text-primary); font-size: var(--text-md); font-weight: 700; }
.quantity-btn:hover { background: var(--azul); color: var(--crema); }
.quantity-number { background: var(--input-bg); border: none; border-left: 2px solid var(--border-color); border-right: 2px solid var(--border-color); padding: 0.75rem var(--space-6); width: 64px; text-align: center; font-family: var(--font-display); font-weight: 700; }

/* ============================================================
   TABS — .tabs / .tab
   ============================================================ */

.product-tabs { margin-top: var(--space-12); }
.tabs { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: var(--space-8); gap: 0; }
.tab {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: var(--space-4) var(--space-6); background: none; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; color: var(--text-muted); transition: var(--transition);
}
.tab.is-active, .tab:hover { color: var(--rojo); border-bottom-color: var(--rojo); }
.tab-content { display: none; }
.tab-content.is-active { display: block; }

/* ============================================================
   TABLA — .tbl (carrito y afines)
   ============================================================ */

.woocommerce-cart .casamarx-woo-wrapper table.shop_table, .tbl {
  border: 1px solid var(--border-color) !important; border-radius: var(--radius) !important; overflow: hidden !important;
  border-collapse: collapse; width: 100%;
}
.woocommerce-cart .casamarx-woo-wrapper table.shop_table thead { background: var(--azul) !important; }
.woocommerce-cart .casamarx-woo-wrapper table.shop_table thead th {
  font-family: var(--font-display) !important; font-size: var(--text-xs) !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--crema) !important;
  padding: var(--space-4) var(--space-6) !important; border: none !important;
}
.woocommerce-cart .casamarx-woo-wrapper table.shop_table td { padding: var(--space-6) !important; border-top: 1px solid var(--border-color) !important; vertical-align: middle !important; font-family: var(--font-mono); font-size: var(--text-sm); }
.woocommerce-cart .casamarx-woo-wrapper .cart-collaterals .cart_totals { background: var(--bg-card) !important; border-radius: var(--radius) !important; padding: var(--space-8) !important; border: 1px solid var(--border-color) !important; }
.casamarx-woo-wrapper .proceed-to-checkout a, .woocommerce-cart .woocommerce-cart-form .actions .button {
  font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; border-radius: var(--radius) !important;
}
.casamarx-woo-wrapper .proceed-to-checkout a { background: var(--rojo) !important; color: var(--crema) !important; border-color: var(--rojo) !important; }

/* ============================================================
   CHECKOUT
   ============================================================ */

.woocommerce-checkout .casamarx-woo-wrapper { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: start; }

/* Resumen del pedido (bloque de WooCommerce): cada ítem imprime DOS
   precios a propósito —el "precio unitario" (.individual-prices, "$X
   c/u") y el "precio total de la línea" (.total-price)—; la hoja de
   estilos propia de WooCommerce Blocks normalmente oculta el unitario y
   solo lo muestra si la cantidad es mayor a 1, pero esa hoja no carga
   completa en este sitio (mismo patrón ya visto en el carrito vacío),
   así que quedaba visible siempre, incluso con cantidad 1 (donde ambos
   precios coinciden y se ve duplicado). v4.8.1 lo ocultaba siempre, lo
   cual rompía el caso correcto (cantidad > 1); v4.8.2 corrige esto: el
   ocultamiento condicional según la cantidad ahora lo hace JS
   (initCheckoutIndividualPrices() en main.js), no CSS.

   v4.8.3: además del precio duplicado, sin la hoja de WooCommerce Blocks
   TODO el layout del ítem (imagen | título+precios+descripción | total)
   pierde su distribución en fila y sus columnas quedan desalineadas
   (cada bloque cae en su propia línea, sin relación de columna con el
   de arriba). Se arma aquí el layout en flexbox a mano. */
.wc-block-components-order-summary-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--border-color);
}
.wc-block-components-order-summary-item__image {
  position: relative; flex: 0 0 auto; width: 48px; height: 48px;
}
.wc-block-components-order-summary-item__image img {
  width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius); display: block;
}
.wc-block-components-order-summary-item__quantity {
  position: absolute; top: -8px; right: -8px; z-index: 1;
  width: 20px; height: 20px; border-radius: 50%; background: var(--azul); color: var(--crema);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.wc-block-components-order-summary-item__description {
  flex: 1 1 auto; min-width: 0;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  display: block; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700;
  color: var(--text-primary); line-height: 1.3; margin: 0 0 var(--space-1);
}
.wc-block-cart-item__prices { margin-bottom: var(--space-1); }
.wc-block-components-product-metadata__description {
  font-size: var(--text-xs); color: var(--text-muted); font-style: italic; line-height: 1.5;
}
.wc-block-components-product-metadata__description p { margin: 0; }
.wc-block-components-order-summary-item__total-price {
  flex: 0 0 auto; text-align: right;
}

/* La regla ".wc-block-components-product-price" (más arriba en este
   archivo) trae !important pensado para las tarjetas del carrito vacío
   (rojo, tamaño grande, borde superior); WooCommerce reutiliza esa misma
   clase en el precio unitario Y en el total de línea del resumen del
   pedido, heredando ese estilo "de tarjeta" que no corresponde aquí. Se
   sobrescribe con un selector más específico (mismo nivel de
   especificidad + !important, pero con 2 clases en vez de 1, así que
   gana sin importar el orden en la hoja). */
.wc-block-components-order-summary-item .wc-block-components-product-price {
  font-family: var(--font-display) !important; margin: 0 !important; padding-top: 0 !important;
  border-top: none !important; font-size: var(--text-sm) !important; font-weight: 600 !important;
  color: var(--text-secondary) !important;
}
.wc-block-components-order-summary-item__total-price .wc-block-components-product-price {
  font-weight: 700 !important; color: var(--rojo) !important;
}

/* ============================================================
   PÁGINA "PEDIDO RECIBIDO" (thank you page)
   Es la misma página para cualquier método de pago (WooCommerce
   redirige aquí siempre); usa el template genérico page.php, así que ya
   trae el cintillo de marca y el ancho de .container--narrow. El
   contenido interno (mensaje, resumen, tabla, direcciones) es HTML
   nativo de WooCommerce (v4.9.0). Rediseño a "ticket" único + botón de
   descarga/impresión en v5.1.7: ver casamarx_open_order_print_area() /
   casamarx_close_order_print_area() en inc/woocommerce.php para el
   contenedor .order-print-area (delimita lo que sí se imprime) y el
   botón .order-print-btn.
   ============================================================ */

.order-actions { margin-bottom: var(--space-6); }
.order-print-btn { display: inline-flex; align-items: center; gap: var(--space-2); }

/* El cintillo azul de arriba (casamarx_page_header(), ver page.php) ya
   dice "Gracias. Tu pedido ha sido recibido." (filtro
   woocommerce_endpoint_order-received_title en functions.php, v5.1.8), así
   que este párrafo nativo de WooCommerce con el mismo mensaje, repetido
   debajo del botón de descarga, se oculta para no decirlo dos veces. */
.woocommerce-order .woocommerce-thankyou-order-received { display: none; }
.woocommerce-order p.woocommerce-notice {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  color: var(--text-primary); margin-bottom: var(--space-6);
}

/* "Detalles del pedido" (heading nativo de WooCommerce, imprime justo
   antes de la tabla de productos) se reubica por JS (main.js,
   initOrderTicket()) justo encima del resumen, para que quede:
   título → resumen (número/fecha/email/total/método) → tabla, todo
   como un solo ticket. Sin ese reordenamiento no hay forma de moverlo
   con CSS puro porque ambos son elementos sueltos, no anidados. */
.woocommerce-order h2, .woocommerce-order h3 {
  font-size: var(--text-xl); margin-bottom: var(--space-4);
}

/* "Ticket" único: el resumen (número/fecha/email/total/método de pago) y
   la tabla de productos son elementos HTML separados que imprime
   WooCommerce (no hay forma de anidarlos en un mismo <div> sin
   sobreescribir plantillas del núcleo), así que se unen visualmente con
   CSS — el resumen es la mitad de arriba de la tarjeta (esquinas
   redondeadas solo arriba, sin borde inferior) y la tabla es la mitad de
   abajo (esquinas redondeadas solo abajo, sin borde superior), ambos con
   el mismo fondo y borde, sin espacio entre ellos. */
.woocommerce-order-overview {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  list-style: none; margin: 0; padding: var(--space-6);
  background: var(--bg-card); border: 1px solid var(--border-color); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.woocommerce-order-overview li {
  font-size: var(--text-sm); color: var(--text-primary);
}
.woocommerce-order-overview li strong {
  display: block; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-1);
}
/* !important: la propia hoja de estilos de WooCommerce trae un fondo
   distinto para ".shop_table" (una de las clases que ya trae esta tabla)
   con más peso que nuestra regla de una sola clase, dejándola transparente
   pese a lo de arriba — mismo patrón ya visto varias veces en el proyecto
   con botones/precios de WooCommerce (v5.1.8). */
.woocommerce-order-overview ~ table.woocommerce-table.woocommerce-table {
  width: 100% !important; border-collapse: collapse; margin: 0 0 var(--space-8); font-size: var(--text-sm);
  background: var(--bg-card) !important; background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important; border-top: none !important;
  border-radius: 0 0 var(--radius) var(--radius); overflow: hidden;
}
/* WooCommerce marca esta tabla responsive ("shop_table_responsive") y trae
   su propio fondo por fila/celda para el modo tarjeta en pantallas
   angostas (tr/td, no solo la tabla), que también gana por especificidad
   igual/mayor a la de arriba — se cubre cada nivel explícitamente. */
table.woocommerce-table.woocommerce-table tbody tr,
table.woocommerce-table.woocommerce-table tfoot tr {
  background: var(--bg-card) !important; background-color: var(--bg-card) !important;
}
table.woocommerce-table th, table.woocommerce-table td {
  padding: var(--space-3) var(--space-4) !important; border-bottom: 1px solid var(--border-color) !important;
  text-align: left; color: var(--text-primary);
  background: var(--bg-card) !important; background-color: var(--bg-card) !important;
}
table.woocommerce-table thead th {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted) !important; border-bottom: 2px solid var(--border-color) !important;
}
table.woocommerce-table tfoot th, table.woocommerce-table tfoot td {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em;
}
table.woocommerce-table tfoot th { color: var(--text-muted); text-transform: uppercase; font-size: var(--text-xs); }
table.woocommerce-table .woocommerce-Price-amount { color: var(--rojo); font-weight: 700; }

/* Direcciones de facturación/envío: en vez de 2 columnas lado a lado, una
   debajo de otra a lo ancho completo de la página (a petición del
   usuario, también en escritorio).
   El 2 columnas real NO lo pone .woocommerce-customer-details (ese es solo
   un contenedor sin layout propio): lo pone el hijo que imprime WooCommerce
   por su cuenta, ".woocommerce-columns.woocommerce-columns--2" (alias
   ".col2-set"), con float + width al 47% definidos en su propia hoja de
   estilos, con más peso que nuestra regla anterior sobre el wrapper — por
   eso no tenía efecto pese a existir. Se anula ese float/width con
   !important y se fuerza cada columna a bloque, a lo ancho completo,
   apiladas con separación vertical (v5.2.0). */
.woocommerce-customer-details { margin-top: var(--space-8); }
.woocommerce-customer-details .woocommerce-columns,
.woocommerce-customer-details .col2-set {
  display: block !important; width: 100% !important; float: none !important;
}
.woocommerce-customer-details .woocommerce-column,
.woocommerce-customer-details .col-1,
.woocommerce-customer-details .col-2 {
  display: block !important; width: 100% !important; float: none !important;
  margin: 0 0 var(--space-8) !important;
}
.woocommerce-customer-details .woocommerce-column:last-child,
.woocommerce-customer-details .col-2:last-child {
  margin-bottom: 0 !important;
}
.woocommerce-column__title {
  font-size: var(--text-base); margin-bottom: var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--rojo);
}
.woocommerce-customer-details address {
  font-style: normal; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
  padding: var(--space-5); font-size: var(--text-sm); line-height: 1.7; color: var(--text-secondary);
}
.woocommerce-customer-details address a { color: var(--rojo); text-decoration: none; }
.woocommerce-customer-details address a:hover { text-decoration: underline; }

/* Impresión: solo se imprime lo que está dentro de .order-print-area
   (mensaje de gracias, ticket, direcciones). Header, menú inferior,
   botón de descarga y todo lo demás del sitio se oculta. */
/* Ticket descargable/imprimible más compacto (v5.2.2): el diseño de
   pantalla (tarjetas grandes, espaciado generoso, texto amplio) genera un
   PDF/impresión de varias páginas para un pedido de pocos productos. Solo
   dentro de .order-print-area, en @media print, se reduce toda la escala
   de espaciado (custom properties --space-*, de las que dependen casi
   todos los paddings/márgenes/gaps del ticket) y el tamaño/interlineado
   de texto, para que cada elemento ocupe menos alto sin tocar el diseño
   normal en pantalla. */
@media print {
  @page { margin: 1cm; }

  body * { visibility: hidden; }
  .order-print-area, .order-print-area * { visibility: visible; }
  .order-print-area {
    position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0;
    font-size: 11px;
    --space-1: 2px;  --space-2: 4px;  --space-3: 6px;  --space-4: 8px;
    --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px;
    --space-9: 16px; --space-10: 16px; --space-11: 16px; --space-12: 16px;
  }
  .order-print-area h2, .order-print-area h3 { font-size: 15px; margin-bottom: var(--space-3); }
  .order-print-area p,
  .order-print-area .woocommerce-order-overview li,
  .order-print-area table.woocommerce-table,
  .order-print-area .woocommerce-customer-details address {
    font-size: 11px; line-height: 1.35;
  }
  .order-print-area address { padding: var(--space-3) !important; }
  .order-print-area table.woocommerce-table th,
  .order-print-area table.woocommerce-table td { padding: var(--space-2) var(--space-3) !important; }
  /* El ícono de descarga y cualquier ícono decorativo dentro del área
     imprimible no aportan nada al comprobante y solo suman alto. */
  .order-print-area svg { display: none !important; }

  .nv-bar, .mobile-tabbar, .shop-filter-fab, .site-footer, .order-actions,
  .srch-overlay, .breadcrumb-nav { display: none !important; }
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .casamarx-woo-wrapper form .form-row { margin-bottom: var(--space-4) !important; }
.casamarx-woo-wrapper form .form-row label { font-family: var(--font-display) !important; font-size: var(--text-xs) !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--text-primary) !important; margin-bottom: var(--space-1) !important; }
.casamarx-woo-wrapper form .form-row input, .casamarx-woo-wrapper form .form-row textarea, .casamarx-woo-wrapper form .form-row select {
  background: var(--input-bg) !important; border: 2px solid var(--input-border) !important; border-radius: var(--radius) !important;
  color: var(--text-primary) !important; padding: 0.75rem var(--space-4) !important; width: 100% !important;
}
.casamarx-woo-wrapper form .form-row input:focus, .casamarx-woo-wrapper form .form-row textarea:focus { outline: none !important; border-color: var(--rojo) !important; box-shadow: 0 0 0 3px rgba(109,10,10,.12) !important; }
#place_order {
  font-family: var(--font-display) !important; font-size: var(--text-base) !important; font-weight: 600 !important; letter-spacing: 0.1em !important;
  text-transform: uppercase !important; background: var(--rojo) !important; color: var(--crema) !important; border: none !important;
  border-radius: var(--radius) !important; padding: 1rem 2rem !important; width: 100% !important; cursor: pointer !important;
}
#place_order:hover { background: var(--rojo-claro) !important; }

/* ============================================================
   MI CUENTA
   ============================================================ */

.woocommerce-account .casamarx-woo-wrapper { display: grid; grid-template-columns: var(--sidebar-w) 1fr; gap: var(--space-9); align-items: start; }
.woocommerce-account .woocommerce-MyAccount-navigation { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border-color); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block; padding: var(--space-4) var(--space-6); font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--rojo); color: var(--crema); }
.woocommerce-account .woocommerce-MyAccount-content { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: var(--space-8); }
.woocommerce-account fieldset { border: 1px solid var(--border-color); border-radius: var(--radius); padding: var(--space-6); margin-top: var(--space-6); }
.woocommerce-account fieldset legend { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 var(--space-2); }
.woocommerce-MyAccount-content table.shop_table { border: 1px solid var(--border-color); border-radius: var(--radius); }

/* ============================================================
   PRODUCTOS DEL BLOQUE "CARRITO" (Gutenberg / WooCommerce Blocks)
   La página de Carrito usa el bloque nativo de WooCommerce, que en su
   estado "carrito vacío" muestra un bloque de productos (p. ej. "Nuevas
   incorporaciones") con SU PROPIO marcado (.wc-block-*), totalmente
   aparte de nuestra plantilla .pc — por eso nunca heredaba el estilo de
   marca. Se re-viste aquí para que se vea igual que el resto de tarjetas
   del sitio. Cubre tanto el bloque de cuadrícula clásico (.wc-block-grid__*)
   como el bloque "Product Collection" más reciente (.wc-block-components-*),
   ya que WooCommerce ha usado ambos según la versión. */
/* Selectores repetidos con .wc-block-grid como ancestro (mayor especificidad):
   la hoja de estilos que trae WooCommerce Blocks por defecto define el ancho
   de cada tarjeta en porcentaje (ej. width:23%) con selectores igual de
   específicos, y a veces con !important, para armar su propio grid tipo
   flexbox por columnas; eso encogía cada tarjeta a una fracción de una
   fracción dentro de nuestro grid (mismo problema que tuvieron las tarjetas
   .pc en la tienda, ver v3.6.2 en el changelog). Iguala la especificidad y
   fuerza el ancho real en todos los casos. */
.wc-block-grid__products,
.wc-block-grid.has-4-columns .wc-block-grid__products,
.wc-block-product-template {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: var(--space-6) !important;
  list-style: none !important; padding: 0 !important; margin: var(--space-6) 0 0 !important;
}
.wc-block-grid__product,
.wc-block-grid.has-4-columns .wc-block-grid__product,
.wc-block-product {
  background: var(--bg-card) !important; border-radius: var(--radius) !important;
  border: 1px solid var(--border-color) !important; box-shadow: var(--card-shadow) !important;
  overflow: hidden !important; padding: 0 !important; transition: var(--transition) !important;
  display: flex !important; flex-direction: column !important;
  width: auto !important; max-width: none !important; min-width: 0 !important;
  flex: none !important; margin: 0 !important; float: none !important;
}
.wc-block-grid__product:hover, .wc-block-product:hover {
  box-shadow: var(--shadow-l2) !important; border-color: var(--rojo) !important; transform: translateY(-4px) !important;
}
.wc-block-grid__product-link { text-decoration: none !important; display: block !important; }
.wc-block-grid__product-image, .wc-block-components-product-image {
  aspect-ratio: 3/4 !important; background: var(--bg-secondary) !important; margin: 0 !important; overflow: hidden !important;
}
.wc-block-grid__product-image img, .wc-block-components-product-image img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; transition: var(--transition-slow) !important;
}
.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.05) !important; }
.wc-block-grid__product-title, .wc-block-components-product-title,
.wc-block-components-product-title a {
  font-family: var(--font-display) !important; font-size: var(--text-base) !important; font-weight: 700 !important;
  text-transform: uppercase !important; color: var(--text-primary) !important; margin: var(--space-4) var(--space-4) 0 !important;
  line-height: 1.25 !important; text-decoration: none !important;
}
.wc-block-grid__product-price, .wc-block-components-product-price {
  font-family: var(--font-display) !important; font-size: var(--text-lg) !important; font-weight: 700 !important;
  color: var(--rojo) !important; margin: var(--space-2) var(--space-4) 0 !important;
  padding-top: var(--space-3) !important; border-top: 1px solid var(--border-color) !important;
}
.wc-block-grid__product-add-to-cart, .wc-block-components-product-button {
  margin: var(--space-3) var(--space-4) var(--space-4) !important; margin-top: auto !important;
}
.wc-block-grid__product-add-to-cart .add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-product-button .add_to_cart_button,
.wc-block-components-product-button .wp-block-button__link,
.wc-block-components-product-button__button {
  font-family: var(--font-display) !important; font-size: var(--text-xs) !important; font-weight: 600 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important; background: var(--rojo) !important; color: var(--crema) !important;
  border: 2px solid var(--rojo) !important; border-radius: var(--radius) !important; padding: 0.55rem 1rem !important;
  width: auto !important; display: inline-block !important; white-space: nowrap !important;
}
.wc-block-grid__product-add-to-cart .add_to_cart_button:hover,
.wc-block-components-product-button .add_to_cart_button:hover,
.wc-block-components-product-button__button:hover {
  background: var(--rojo-claro) !important; border-color: var(--rojo-claro) !important;
}

@media (max-width: 1024px) {
  .wc-block-grid__products, .wc-block-grid.has-4-columns .wc-block-grid__products, .wc-block-product-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .wc-block-grid__products, .wc-block-grid.has-4-columns .wc-block-grid__products, .wc-block-product-template { grid-template-columns: 1fr !important; }
}

/* ============================================================
   BANNER DE CITA
   ============================================================ */

.quote-banner { background: var(--rojo); padding: var(--space-12) 0; position: relative; overflow: hidden; }
.quote-banner blockquote { background: none; border: 0; padding: 0; margin: 0; font-style: normal; }
.quote-banner::before {
  content: '"'; position: absolute; top: -40px; left: var(--space-8); font-family: var(--font-display);
  font-size: 22rem; font-weight: 900; color: rgba(255,255,255,0.05); line-height: 1; pointer-events: none;
}
.quote-banner__text { font-family: var(--font-display); font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl)); font-weight: 700; text-transform: uppercase; color: var(--crema); line-height: 1.15; max-width: 900px; position: relative; z-index: 1; }
.quote-banner__author { margin-top: var(--space-8); font-style: italic; color: rgba(242,240,236,0.7); font-size: var(--text-md); position: relative; z-index: 1; }

/* ============================================================
   FEATURES
   ============================================================ */

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.feature-item { padding: var(--space-8); border-radius: var(--radius); border: 1px solid var(--border-color); background: var(--bg-card); transition: var(--transition); position: relative; overflow: hidden; }
.feature-item::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: var(--rojo); transition: var(--transition-slow); }
.feature-item:hover::before { height: 100%; }
.feature-item:hover { border-color: var(--rojo); transform: translateY(-4px); }
.feature-item__number { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-3); display: block; }
.feature-item__icon { font-size: 2.25rem; margin-bottom: var(--space-4); display: block; }
.feature-item__title { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; text-transform: uppercase; color: var(--text-primary); margin-bottom: var(--space-3); }
.feature-item__text { font-size: var(--text-sm); line-height: 1.7; }

/* ============================================================
   TIENDA (PLP)
   ============================================================ */

.shop-layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; gap: var(--space-12); align-items: start; }
.shop-sidebar { position: sticky; top: 90px; }
.shop-main .pc-grid, .shop-main ul.products { grid-template-columns: repeat(3, 1fr) !important; }

.sidebar-widget {
  margin-bottom: var(--space-8); padding: var(--space-6);
  background: var(--bg-card); border-radius: var(--radius);
  border: 1px solid var(--border-color); box-shadow: var(--shadow-l1);
}
.sidebar-widget__title {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-primary);
  margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 2px solid var(--rojo);
}
.sidebar-widget ul { display: flex; flex-direction: column; gap: 2px; }
.sidebar-widget ul li { border-bottom: 1px solid var(--border-color); }
.sidebar-widget ul li:last-child { border-bottom: none; }
.sidebar-widget ul li a {
  font-size: var(--text-sm); color: var(--text-secondary);
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease, padding-left .2s ease;
}
.sidebar-widget ul li a:hover { color: var(--rojo); border-left-color: var(--rojo); padding-left: var(--space-4); }
.sidebar-widget ul li a .count { background: var(--bg-secondary); padding: 2px 8px; border-radius: 20px; font-size: var(--text-xs); font-family: var(--font-mono); color: var(--text-muted); }

.price-filter-range {
  width: 100%; accent-color: var(--rojo); height: 4px; cursor: pointer;
}
.price-filter-values {
  display: flex; justify-content: space-between; font-size: var(--text-xs);
  font-family: var(--font-mono); color: var(--text-muted); margin-top: var(--space-3);
}

/* Botón "Filtrar por:" + panel deslizable (solo móvil): oculto por
   completo en escritorio/tablet, donde el mismo formulario de filtros se
   muestra directo dentro del sidebar (.sidebar-widget), sin botón ni
   panel. Ver reglas del panel dentro del @media (max-width: 782px). */
.shop-filter-trigger, .shop-filter-overlay, .shop-filter-panel { display: none; }

/* Botón flotante de filtros (.shop-filter-fab): oculto por completo en
   escritorio. En móvil vive dentro del @media más abajo, invisible por
   defecto y revelado solo cuando <body> tiene "header-is-hidden" (el
   header se ocultó por scroll hacia abajo, ver initHeaderScroll). */
.shop-filter-fab { display: none; }

/* Formulario de filtros (buscar, autor, categoría, precio): mismas reglas
   en escritorio (dentro del sidebar) y en móvil (dentro del panel
   deslizable, ver @media más abajo). Es el mismo <form>, generado por
   casamarx_shop_filter_form() en inc/woocommerce.php, en dos contenedores
   distintos. */
.shop-filter-form { display: flex; flex-direction: column; gap: var(--space-5); }
.shop-filter-field {
  display: flex; flex-direction: column; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-primary);
}
.shop-filter-field input[type="text"], .shop-filter-field select {
  font-family: inherit; font-weight: 400; text-transform: none; letter-spacing: normal;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--input-border); border-radius: var(--radius);
  background: var(--input-bg); color: var(--text-primary); font-size: var(--text-sm);
}

/* Slider de precio de doble manija: dos <input type="range"> superpuestos
   (main.js los mantiene sincronizados con los campos numéricos). */
.price-range { position: relative; height: 24px; margin-top: var(--space-2); }
.price-range__track {
  position: absolute; left: 0; right: 0; top: 50%; height: 4px;
  background: var(--border-color); border-radius: 2px; transform: translateY(-50%);
}
.price-range__track-fill {
  position: absolute; top: 50%; height: 4px; left: 0%; right: 0%;
  background: var(--rojo); border-radius: 2px; transform: translateY(-50%);
}
.price-range__input {
  position: absolute; left: 0; top: 50%; width: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
  transform: translateY(-50%);
}
.price-range__input::-webkit-slider-runnable-track { background: transparent; }
.price-range__input::-moz-range-track { background: transparent; }
.price-range__input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--rojo); cursor: pointer; border: 2px solid var(--bg-primary); box-shadow: 0 0 0 1px var(--rojo);
}
.price-range__input::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--rojo); cursor: pointer; border: 2px solid var(--bg-primary); box-shadow: 0 0 0 1px var(--rojo);
}

.price-range__fields { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.price-range__fields label {
  display: flex; flex-direction: column; gap: 4px; flex: 1;
  font-size: var(--text-xs); font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text-muted);
}
.price-range__number {
  padding: var(--space-2); border: 1px solid var(--input-border); border-radius: var(--radius);
  background: var(--input-bg); color: var(--text-primary); font-size: var(--text-sm); width: 100%;
}

.shop-filter-form__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }

.shop-toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border-color); margin-bottom: var(--space-8); box-shadow: var(--shadow-l1); }
.shop-results-count { font-size: var(--text-sm); color: var(--text-muted); font-family: var(--font-mono); }
.shop-sort select { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); color: var(--text-primary); padding: var(--space-2) var(--space-4); cursor: pointer; }

.casamarx-woo-wrapper nav.woocommerce-pagination ul { display: flex; gap: var(--space-1); justify-content: center; padding: var(--space-8) 0 !important; }
.casamarx-woo-wrapper nav.woocommerce-pagination ul li { border: none !important; }
.casamarx-woo-wrapper nav.woocommerce-pagination ul li a, .casamarx-woo-wrapper nav.woocommerce-pagination ul li span {
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: var(--text-sm) !important; padding: 0.5rem 1rem !important;
  border-radius: var(--radius) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; background: var(--bg-card) !important;
}
.casamarx-woo-wrapper nav.woocommerce-pagination ul li .current, .casamarx-woo-wrapper nav.woocommerce-pagination ul li a:hover { background: var(--rojo) !important; color: var(--crema) !important; border-color: var(--rojo) !important; }

/* ============================================================
   PÁGINA ACERCA DE
   ============================================================ */

.about-hero { background: var(--azul); padding: var(--space-12) 0; position: relative; overflow: hidden; }
.about-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(109,10,10,0.3) 0%, transparent 60%); }
.about-hero .container { position: relative; z-index: 1; }
.about-hero h1 { color: var(--crema); }
.about-hero p { color: rgba(242,240,236,0.8); font-size: var(--text-md); max-width: 720px; }
.about-content { padding: var(--space-12) 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.about-image { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-l3); }
.about-image img { width: 100%; height: 500px; object-fit: cover; }
.about-organizations { padding: var(--space-12) 0; background: var(--bg-secondary); }
.org-logos { display: flex; gap: var(--space-9); align-items: center; justify-content: center; flex-wrap: wrap; margin-top: var(--space-8); }
.org-logo img { height: 56px; width: auto; filter: grayscale(30%); opacity: 0.75; transition: var(--transition); }
.org-logo:hover img { filter: grayscale(0%); opacity: 1; }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
.value-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.value-item__icon { flex-shrink: 0; width: 44px; height: 44px; background: var(--rojo); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: var(--text-md); color: var(--crema); }

/* ============================================================
   PÁGINA DE CONTACTO
   ============================================================ */

.contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-12); padding-block: var(--space-12); align-items: start; }
.contact-info__item { display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-6); background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border-color); margin-bottom: var(--space-4); }
.contact-info__item:hover { border-color: var(--rojo); }
.contact-info__icon { width: 44px; height: 44px; background: var(--rojo); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: var(--text-md); color: var(--crema); flex-shrink: 0; }
.contact-info__label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.contact-info__value { font-size: var(--text-sm); color: var(--text-primary); font-weight: 500; }
.contact-form { background: var(--bg-card); padding: var(--space-8); border-radius: var(--radius); border: 1px solid var(--border-color); }

/* ============================================================
   ENCUÉNTRANOS (home)
   ============================================================ */

.location-header { display: grid; grid-template-columns: 1fr; gap: var(--space-9); align-items: end; }
.location-title strong { color: var(--rojo) !important; font-style: normal; }
.location-grid { display: grid; grid-template-columns: 1fr 1.4fr; grid-template-rows: auto auto; gap: var(--space-9); align-items: stretch; }
.location-info { display: flex; flex-direction: column; }
.location-info__title { margin-bottom: var(--space-2); }
.location-info__addr { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0.01em; color: var(--text-primary); line-height: 1.2; margin-bottom: var(--space-2); }
.location-info__ref { color: var(--text-muted); }
/* .location-kv es ahora hermano de .location-info y .location-map (no está
   anidado dentro de .location-info), para poder reordenarlo antes que el
   mapa en móvil sin tocar el escritorio. En escritorio cae automáticamente
   en la fila 2 de la columna 1 (debajo de "Casa abierta"), y el mapa se
   extiende para cubrir ambas filas de la columna 2, igual que se veía antes. */
.location-map { grid-row: span 2; }
.location-kv { margin-top: var(--space-6); border-top: 1px solid var(--border-color); }
.location-kv-row { display: grid; grid-template-columns: 130px 1fr; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-color); align-items: center; }
.location-kv-row__k { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); }
.location-kv-row__v { font-size: var(--text-base); color: var(--text-secondary); }
.location-kv-row__v a { color: var(--rojo); text-decoration: underline; text-underline-offset: 4px; }
.location-map { min-height: 460px; border: 1px solid var(--border-color); background: var(--bg-secondary); overflow: hidden; position: relative; }
.location-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   BREADCRUMB
   ============================================================ */

/* Migas de pan eliminadas del sitio (v3.6.0): .breadcrumb-bar / .breadcrumb-nav
   ya no se imprimen en ninguna plantilla, se retira su CSS. */

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer { background: var(--azul); color: var(--crema); }
.footer-top { padding: var(--space-12) 0; }
.footer-top .container { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--space-9); }
.site-footer .footer-brand__logo { height: 66px !important; width: auto !important; margin-bottom: var(--space-4); }
.footer-brand__text { font-size: var(--text-sm); color: rgba(242,240,236,0.7); margin-bottom: var(--space-4); }
.footer-brand__meta { font-size: var(--text-sm); color: rgba(242,240,236,0.65); margin: var(--space-1) 0; }
.footer-brand__meta a { color: var(--amarillo); }
.footer-column__title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242,240,236,0.55); margin-bottom: var(--space-6); }

/* Enlaces de proyectos, estilo casamarx.com: fila con divisor + etiqueta de dominio */
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(242,240,236,0.08);
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: var(--text-md);
  color: rgba(242,240,236,0.85);
  transition: color .2s ease, padding .25s ease;
}
.footer-links a:hover { color: var(--amarillo); padding-left: var(--space-1); }
.footer-links a .domain {
  font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: 0.04em; color: rgba(242,240,236,0.4); text-transform: lowercase;
}

/* Logos de agrupaciones, estilo casamarx.com: insignias circulares.
   Blancas por defecto (filtro), revelan su color real al hacer hover. */
.footer-orgs { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }
.footer-orgs a {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: rgba(242,240,236,0.04);
  border: 1px solid rgba(242,240,236,0.14);
  border-radius: 50%;
  overflow: hidden;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.footer-orgs a picture {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.footer-orgs a img {
  display: block;
  width: auto; height: auto;
  max-width: 55%; max-height: 55%;
  object-fit: contain;
  /* Filtro de respaldo: solo se usa si alguna agrupación futura no tiene un
     archivo blanco real (ver bloque de abajo, que es lo que usan las 5
     agrupaciones actuales). */
  filter: brightness(0) invert(1);
  transition: filter .25s ease, transform .25s ease;
}
.footer-orgs a:hover { background: rgba(242,240,236,0.08); transform: translateY(-3px); border-color: var(--amarillo); }
.footer-orgs a:hover img { filter: none; transform: scale(1.05); }

/* Las 5 agrupaciones usan archivos blanco/color (o blanco/negro) reales, no
   este filtro: se imprimen dos <picture>, cada uno envuelto en su propio
   "slot", y se intercambian al pasar el cursor. Importante: se oculta el
   <span> completo (no solo el <img>), porque un
   <picture> oculto por dentro pero visible por fuera seguía ocupando la
   mitad del espacio del flex y encogía al logo activo. */
.footer-orgs a.footer-orgs__link--swap img { filter: none; }
.footer-orgs a .org-logo-slot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.footer-orgs a .org-logo-slot--hover { display: none; }
.footer-orgs a:hover .org-logo-slot--default { display: none; }
.footer-orgs a:hover .org-logo-slot--hover { display: flex; }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6) 0; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom--legal { padding-top: 0; padding-bottom: var(--space-4); }
.footer-bottom__copy {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(242,240,236,0.5);
}
.footer-bottom__tagline {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(242,240,236,0.5);
}
.footer-bottom__links { display: flex; gap: var(--space-6); }
.footer-bottom__links a { font-size: var(--text-xs); color: rgba(242,240,236,0.5); }
.footer-bottom__links a:hover { color: var(--crema); }
.footer-red-bar { height: 4px; background: linear-gradient(90deg, var(--rojo) 0%, var(--amarillo) 100%); }

/* ============================================================
   UTILIDADES
   ============================================================ */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.page-header { background: var(--azul); padding: var(--space-9) 0; margin-bottom: var(--space-10); }
.page-header .eyebrow { margin-bottom: var(--space-3); display: block; }
.page-header h1 { color: var(--crema); margin-bottom: var(--space-2); }
.page-header p { color: rgba(242,240,236,0.8); max-width: 640px; }

.text-center { text-align: center; }
.mt-2xl { margin-top: var(--space-9); }
.empty-state { text-align: center; padding: var(--space-9) 0; }
.empty-state__icon { font-size: 3.5rem; }
.spin { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border-color); border-top-color: var(--rojo); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.is-loading { position: relative; pointer-events: none; opacity: 0.7; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .categories-grid, .pc-grid, ul.products,
  .shop-main .pc-grid, .shop-main ul.products { grid-template-columns: repeat(2, 1fr) !important; }
  .features-grid, .values-grid { grid-template-columns: 1fr; }
  .about-grid, .contact-layout, .product-single__layout, .qv-layout { grid-template-columns: 1fr; }
  /* La galería de producto (imagen) queda "sticky" (position:sticky) solo
     tiene sentido en el layout de 2 columnas de escritorio, donde el texto
     se desplaza al lado mientras la imagen queda fija. Aquí, donde
     .product-single__layout ya pasó a 1 columna, se desactiva: si no, la
     imagen se queda pegada arriba mientras el texto avanza debajo y
     termina tapando categoría/título/precio (v5.1.6). */
  .product-single__gallery { position: static; max-width: none; width: 100%; }
  .shop-layout, .woocommerce-account .casamarx-woo-wrapper { grid-template-columns: 1fr; }
  .footer-top .container { grid-template-columns: 1fr 1fr; }
  .location-header, .location-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  /* En 1 columna, el orden natural (info → mapa → referencias) ya es el
     pedido; se cancela el "grid-row: span 2" de escritorio para que el
     mapa no intente ocupar dos filas dentro de una sola columna. */
  .location-map { grid-row: auto; }
}

@media (max-width: 782px) {
  .nv-bar__nav, .nv-bar__actions .srch-toggle-desktop { display: none; }

  /* Header: se repliega hacia arriba al hacer scroll hacia abajo, y
     reaparece al hacer scroll hacia arriba (clase alternada por main.js,
     initHeaderScroll). Solo aplica en móvil; en escritorio el header
     siempre queda visible. */
  .nv-bar.is-hidden { transform: translateY(-100%); }

  /* Menú inferior fijo: reemplaza al menú hamburguesa. 3 accesos con el
     mismo peso visual, siempre visible (no se oculta con el scroll, a
     diferencia del header de arriba). */
  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dropdown);
    background: var(--bg-card); border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-tabbar__item {
    flex: 1 1 0; text-align: center; padding: var(--space-3) var(--space-2);
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary);
    border-top: 2px solid transparent;
  }
  .mobile-tabbar__item.is-active { color: var(--rojo); border-top-color: var(--rojo); }

  /* Deja aire abajo en toda la página para que el menú inferior fijo no
     tape el contenido final (footer, botones, etc.). Alto aproximado del
     menú: ~52px + su padding vertical. */
  body { padding-bottom: 60px; }

  .categories-grid, .pc-grid, ul.products { grid-template-columns: 1fr 1fr !important; gap: var(--space-4) !important; }
  /* Tienda (PLP): dos columnas en móvil, igual que "Destacados" del home
     (antes una sola). Tablet (768–1024px) y escritorio no se tocan. */
  .shop-main .pc-grid, .shop-main ul.products { grid-template-columns: repeat(2, 1fr) !important; }

  /* Tienda (PLP), filtros: el sidebar de escritorio se oculta por completo
     y se reemplaza por el botón "Filtrar por:" + panel deslizable desde
     la izquierda. Ver markup en inc/woocommerce.php
     (casamarx_mobile_shop_filters) y lógica en main.js (initShopFilters). */
  .shop-sidebar { display: none; }

  .shop-filter-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    width: 100%; margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
    color: var(--rojo); cursor: pointer;
  }
  .shop-filter-trigger .ico { color: var(--text-primary); }

  /* Botón flotante circular: aparece en la esquina inferior derecha
     cuando el header se oculta al hacer scroll hacia abajo (clase
     "header-is-hidden" en <body>, alternada por initHeaderScroll). Se
     apoya sobre el menú inferior fijo, sin taparlo. */
  .shop-filter-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: var(--space-4); bottom: 76px;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--rojo); color: var(--crema); border: none; cursor: pointer;
    box-shadow: var(--shadow-l2);
    z-index: var(--z-dropdown);
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    pointer-events: none;
  }
  body.header-is-hidden .shop-filter-fab {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
  }

  .shop-filter-overlay {
    display: block; position: fixed; inset: 0; background: rgba(8,39,59,.55);
    z-index: var(--z-modal, 1000); opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .shop-filter-overlay.is-active { opacity: 1; visibility: visible; }

  .shop-filter-panel {
    display: flex; flex-direction: column; justify-content: flex-end;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(340px, 86vw);
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    padding: var(--space-6);
    overflow-y: auto;
    z-index: calc(var(--z-modal, 1000) + 1);
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -8px 0 24px rgba(0,0,0,.15);
  }
  .shop-filter-panel.is-active { transform: translateX(0); }

  .shop-filter-panel__head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6);
  }
  .shop-filter-panel__head h3 {
    font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-primary); margin: 0;
  }
  .shop-filter-panel__close {
    background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-primary);
  }
  .shop-filter-panel__close:hover { color: var(--rojo); }

  /* Bloquea el scroll de fondo mientras el panel de filtros está abierto. */
  body.shop-filter-open { overflow: hidden; }

  .footer-top .container { grid-template-columns: 1fr; }
  .woocommerce-checkout .casamarx-woo-wrapper { grid-template-columns: 1fr; }
  .location-kv-row { grid-template-columns: 1fr; gap: var(--space-1); }

  /* "Destacados" (home): dos columnas en móvil (antes una sola). El
     escritorio no se toca (sigue con las reglas generales de .pc-grid). */
  #featured-products { grid-template-columns: repeat(2, 1fr) !important; }

  /* "Últimas incorporaciones" (home): en vez de cuadrícula de 2 columnas,
     una sola fila con scroll horizontal — se ve un libro completo a la vez
     y se desliza para ver los otros 3. Solo en móvil; el escritorio no se
     toca. */
  .new-arrivals-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-bottom: var(--space-2);
    margin-inline: calc(var(--space-6) * -1);
    padding-inline: var(--space-6);
  }
  .new-arrivals-grid .pc {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }

  /* Tarjeta de producto (.pc), proporción fija en móvil: todas las tarjetas
     quedan alineadas sin importar cuántos caracteres tenga el título o el
     autor. Aplica a cualquier sección que use .pc en móvil (Destacados,
     Últimas incorporaciones, Tienda, Relacionados). Escritorio no se toca. */

  /* Tarjeta más compacta en móvil: imagen menos alta, padding del cuerpo
     reducido, y menos aire alrededor de la línea divisoria del footer. */
  .pc__image-wrap { aspect-ratio: 4/5; }
  .pc__body { padding: var(--space-4); }
  .pc__footer { margin-top: var(--space-2); padding-top: var(--space-3); }

  .pc__category {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pc__title {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; min-height: calc(1.25em * 3);
  }
  .pc__author {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; flex: none; line-height: 1.4; min-height: 1.4em;
  }
  /* Precio: se reserva un alto mínimo de una línea aunque el producto no
     tenga precio (el div .pc__price / content-product.php ahora siempre se
     imprime, con "&nbsp;" como respaldo cuando no hay precio real, para que
     el div no colapse a 0 y todas las tarjetas midan lo mismo hasta aquí). */
  .pc__footer .pc__price,
  .pc__footer .price {
    text-align: left; display: block; line-height: 1.2;
    min-height: calc(var(--text-lg) * 1.2);
  }
  /* reinicia el layout de fila (escritorio) a columna: precio arriba a la
     izquierda, botón abajo centrado, en vez de repartidos en una fila que
     se rompe de forma distinta según el largo del precio. */
  .pc__footer {
    flex-direction: column; align-items: stretch; gap: var(--space-3);
  }
  /* Botón centrado con margen automático en vez de solo align-self: más
     confiable porque no depende de que el botón siga siendo tratado como
     ítem flex "puro" pese a los !important de otras reglas (.pc .button). */
  .pc__footer .button,
  .pc__footer a.button,
  .pc__footer .add_to_cart_button,
  .pc__footer .added_to_cart {
    align-self: center !important;
    display: block !important;
    width: fit-content !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}