/* site.css — bundle generado por css_bundle() (inc/helpers.php). NO EDITAR: edita las fuentes en assets/css/ y se regenera solo. */

/* ===== tokens.css ===== */
/* ============================================================
   ALOE TATTOO — DESIGN TOKENS
   Fuente única de verdad del sistema. NO inventar colores.
   ============================================================ */

:root {
  /* === BRAND COLORS — Rose magenta (sustituye al coral original #F35627) === */
  --color-coral-50:  #FFF1F2;
  --color-coral-100: #FFE4E6;
  --color-coral-200: #FECDD3;
  --color-coral-300: #FDA4AF;
  --color-coral-400: #FB7185;
  --color-coral-500: #E11D48;  /* PRIMARIO CTAs comerciales */
  --color-coral-600: #BE123C;
  --color-coral-700: #9F1239;
  --color-coral-800: #881337;

  /* Sólo conservamos aloe-700 como verde de marca.
     El resto de tokens aloe se redirigen para mantener compatibilidad sin
     cambiar 100+ usos en CSS:
       — Los claros (50/100) → grises neutros (fondos suaves)
       — Los demás (200-900) → aloe-700 (único verde activo) */
  --color-aloe-50:   #F1F3F5;
  --color-aloe-100:  #E5E7EB;
  --color-aloe-200:  #244A29;
  --color-aloe-300:  #244A29;
  --color-aloe-400:  #244A29;
  --color-aloe-500:  #244A29;
  --color-aloe-600:  #244A29;
  --color-aloe-700:  #244A29;
  --color-aloe-800:  #244A29;
  --color-aloe-900:  #244A29;

  /* === SEMANTIC COLORS === */
  --color-mustard-500: #D4A656;  /* Descuentos B2C */
  --color-amber-500:   #C49544;  /* Urgencia / stock bajo */
  --color-ocher-500:   #F5A623;  /* Estrellas reviews — naranja-dorado vivo */
  --color-rust-500:    #A03828;  /* Errores / destructive */

  /* === ACCENT BRAND COLORS (extended palette) === */
  --color-honey-500:   #FFBD3F;  /* Dorado cálido — badges premium / natural / destacados */
  --color-teal-900:    #005153;  /* Petroleum profundo — alternativa para CTAs autoridad / footer / bloques pro */
  --color-rose-500:    #E11D48;  /* Rose magenta — segundo accent de marca, eyebrows / badges destacados */
  --color-rose-600:    #BE123C;  /* Rose hover */
  --color-electric-500: #2563EB; /* Electric blue — badge bestseller / accents vivos */
  --color-electric-600: #1D4ED8; /* Electric blue hover */

  /* === NEUTRAL SCALE (INK) === */
  --color-paper:    #FFFFFF;
  --color-bone:     #F9FAFB;  /* fondo secundario gris muy claro */
  --color-ink-50:   #F3F4F6;
  --color-ink-100:  #E5E7EB;
  --color-ink-200:  #D1D5DB;
  --color-ink-300:  #9CA3AF;
  --color-ink-400:  #6B7280;
  --color-ink-500:  #4B5563;
  --color-ink-600:  #374151;
  --color-ink-700:  #1F2937;
  --color-ink-800:  #111827;  /* CTAs secundarios autoridad */
  --color-ink-900:  #030712;

  --color-stone-bg: #F1F3F5;  /* fondo de card / media — gris suave */

  /* === SEMANTIC ALIASES === */
  --color-cta-primary:        var(--color-coral-500);
  --color-cta-primary-hover:  var(--color-coral-600);
  --color-cta-primary-active: var(--color-coral-700);
  --color-cta-secondary:      var(--color-ink-800);
  --color-brand-accent:       var(--color-aloe-500);
  --color-success:            var(--color-aloe-500);
  --color-savings-b2b:        var(--color-aloe-500);
  --color-discount:           var(--color-mustard-500);
  --color-urgency:            var(--color-amber-500);
  --color-rating:             var(--color-ocher-500);
  --color-error:              var(--color-rust-500);
  --color-destructive:        var(--color-rust-500);

  --color-bg-primary:    var(--color-paper);
  --color-bg-secondary:  var(--color-bone);
  --color-bg-stone:      var(--color-stone-bg);
  --color-bg-inverse:    var(--color-ink-800);

  --color-text-primary:   var(--color-ink-900);
  --color-text-secondary: var(--color-ink-700);
  --color-text-muted:     var(--color-ink-500);
  --color-text-inverse:   var(--color-paper);

  --color-border-subtle:  var(--color-ink-100);
  --color-border-default: var(--color-ink-200);
  --color-border-strong:  var(--color-ink-400);

  /* === TYPOGRAPHY === */
  --font-display: 'Inter Tight', 'Inter Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --fs-display: 56px;
  --fs-h1:      40px;
  --fs-h2:      32px;
  --fs-h3:      26px;
  --fs-h4:      20px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-meta:    13px;
  --fs-eyebrow: 12px;
  --fs-legal:   12px;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* === SPACING (4px scale) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === RADII === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* === SHADOWS === */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.10);
  --shadow-cta:  0 2px 8px rgba(225, 29, 72, 0.25);
  --shadow-sticky: 0 -2px 12px rgba(0,0,0,0.08);

  /* === TRANSITIONS === */
  --transition-fast:   150ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-slow:   400ms ease-out;

  /* === Z-INDEX === */
  --z-base:    0;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;

  /* === LAYOUT === */
  --container-max: 1280px;
  --container-pad: var(--space-5);
  --header-h:      86px;
  --header-h-scrolled: 70px;
}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-8);
  }
}


/* ===== reset.css ===== */
/* ============================================================
   ALOE TATTOO — RESET
   Modern CSS reset (basado en Josh Comeau + ajustes)
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-ink-900);
  color: var(--color-paper);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  z-index: var(--z-toast);
  font-weight: 600;
  transition: top var(--transition-normal);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== base.css ===== */
/* ============================================================
   ALOE TATTOO — BASE TYPOGRAPHY
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  font-feature-settings: "tnum" on, "lnum" on;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
}

h5,
h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: var(--lh-snug);
}

p {
  line-height: var(--lh-relaxed);
}

strong {
  font-weight: 600;
}

a {
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-aloe-600);
}

/* === UTILIDADES TIPOGRÁFICAS === */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.meta {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--color-text-muted);
}

.legal {
  font-size: var(--fs-legal);
  color: var(--color-text-muted);
}

.body-sm {
  font-size: var(--fs-body-sm);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-aloe {
  color: var(--color-aloe-600);
}

.text-coral {
  color: var(--color-coral-500);
}

/* === PRECIOS — cifras tabulares para alineación vertical === */
.price {
  font-family: var(--font-body);
  font-feature-settings: "tnum" on, "lnum" on;
  font-weight: 700;
}

.price--current {
  font-size: 18px;
  color: var(--color-text-primary);
}

.price--big {
  font-size: 32px;
  font-weight: 700;
  font-family: var(--font-display);
}

.price--prev {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-left: var(--space-2);
}

.price--unit {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* === ESTRELLAS === */
.stars {
  color: var(--color-rating);
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-flex;
  gap: 1px;
  white-space: nowrap;
}

/* === SELECCIÓN === */
::selection {
  background: #B4D6FE;
  color: inherit;
}

/* === SCROLL CONTAINER === */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* === SECCIONES === */
.section {
  padding-block: 60px;
}

@media (min-width: 1024px) {
  .section {
    padding-block: 100px;
  }
}

@media (min-width: 1280px) {
  .section {
    padding-block: 100px;
  }
}

/* Sección que sigue a la barra de valor: reducimos el padding-top
   para que no haya un hueco enorme entre las dos */
.value-strip + .section {
  padding-top: 68px;
}
@media (min-width: 1024px) {
  .value-strip + .section { padding-top: 84px; }
}
@media (min-width: 1280px) {
  .value-strip + .section { padding-top: 100px; }
}

.section--sm {
  padding-block: var(--space-12);
}
@media (min-width: 1024px) {
  .section--sm {
    padding-block: var(--space-16);
  }
}

/* Escala modular de espaciado (mobile → desktop):
   línea → eyebrow → H2 → subtitle → siguiente bloque
   Mobile:  16 → 20 → 32 → 56 px
   Desktop: 20 → 24 → 40 → 72 px
   Cada salto crece ~1.4-1.7× en progresión suave, sin abruptos */
.section__head {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section__head .eyebrow {
  color: var(--color-aloe-600);
  font-size: 11.5px;
  letter-spacing: 2.4px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section__head h2 {
  font-size: 40px;
  margin: 0 0 24px;
  letter-spacing: -0.028em;
  line-height: 1.02;
  max-width: 22ch;
  font-weight: 700;
}

.section__head p {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0;
}

/* Defaults (≥ 768 px): mostrar versión larga (.lead--desktop), ocultar la
   corta (.lead--mobile). Solo aplica a los párrafos de section__head que
   tengan los dos spans explícitos; el resto de párrafos no se ve afectado.
   IMPORTANTE: los defaults van ANTES del @media móvil para que la cascada
   los pueda sobrescribir (misma especificidad → gana el último). */
.section__head p .lead--desktop { display: inline; }
.section__head p .lead--mobile { display: none; }

/* Mismo patrón para el TÍTULO del section__head — usado en testimonios
   para tener una versión más corta del h2 en móvil. */
.section__head h2 .title--desktop { display: inline; }
.section__head h2 .title--mobile { display: none; }

/* En móvil bajamos los h2 de section__head a 28 px y soltamos el
   max-width:22ch (que a 40 px troceaba el titular en 3-4 líneas a 393 px).
   text-wrap:balance reparte mejor los cortes naturales para que el
   resultado quede "todo seguido" en 2 líneas equilibradas.
   Los <br> intencionales del HTML (p.ej. "Tres momentos,<br>un resultado…")
   siguen funcionando — esta regla solo afecta a la tipografía y al wrap
   natural, no al <br> que añade el contenido.
   También bajamos el body copy (.section__head p) y conmutamos al
   .lead--mobile (versión corta) en lugar del .lead--desktop largo. */
@media (max-width: 767.98px) {
  .section__head h2 {
    font-size: 28px;
    max-width: 100%;
    line-height: 1.15;
    text-wrap: balance;
  }
  .section__head p {
    font-size: 14.5px;
    line-height: 1.55;
  }
  .section__head p .lead--desktop { display: none; }
  .section__head p .lead--mobile { display: inline; }

  /* Conmuta el h2 al título corto en móvil donde se haya definido el swap */
  .section__head h2 .title--desktop { display: none; }
  .section__head h2 .title--mobile { display: inline; }
}

@media (min-width: 1024px) {
  .section__head { margin-bottom: 64px; }
  .section__head .eyebrow { margin-bottom: 18px; }
  .section__head h2 {
    font-size: 52px;
    margin-bottom: 28px;
  }
  .section__head p { font-size: 17px; }
}

@media (min-width: 1280px) {
  .section__head { margin-bottom: 72px; }
  .section__head h2 { font-size: 60px; }
}

/* Variante editorial-statement: dos líneas masivas, una sólida + una outline */
.section__head--statement h2 {
  text-transform: uppercase;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.95;
  max-width: 16ch;
}
.statement-line { display: block; }
.statement-line--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-ink-900);
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.section__head--statement p strong {
  color: var(--color-aloe-700);
  font-weight: 700;
}

@media (min-width: 1024px) {
  .section__head--statement h2 { font-size: 60px; }
  .statement-line--outline { -webkit-text-stroke: 2px var(--color-ink-900); }
}
@media (min-width: 1280px) {
  .section__head--statement h2 { font-size: 72px; }
  .statement-line--outline { -webkit-text-stroke: 2.5px var(--color-ink-900); }
}

/* === HELPERS === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.md-hide { display: none; }
@media (max-width: 767.98px) {
  .md-hide { display: inline-flex; }
  .md-only { display: none; }
}
@media (min-width: 768px) {
  .sm-only { display: none; }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--fs-h1); }
}

/* Móvil: reducir tamaños grandes */
@media (max-width: 767.98px) {
  .display { font-size: 36px; }
  h1 { font-size: 30px; }
  h2 { font-size: 26px; }
  h3 { font-size: 22px; }
  .price--big { font-size: 28px; }
}


/* ===== components.css ===== */
/* ============================================================
   ALOE TATTOO — COMPONENTS
   Buttons, badges, inputs, cards, trust pills, reviews, etc.
   ============================================================ */

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-normal),
              color var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal),
              transform var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled) {
  transform: translateY(0.5px);
}

.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn__icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* Sizes */
.btn--sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: 13px;
  border-radius: var(--radius-md);
}
.btn--sm .btn__icon { width: 14px; height: 14px; }

.btn--md {
  height: 44px;
  padding: 0 var(--space-5);
  font-size: 15px;
}

.btn--lg {
  height: 52px;
  padding: 0 var(--space-8);
  font-size: 16px;
}

.btn--full {
  width: 100%;
}

/* Variants */
.btn--primary {
  background: var(--color-cta-primary);
  color: var(--color-paper);
  border-color: var(--color-cta-primary);
}
.btn--primary:hover:not(:disabled) {
  background: var(--color-cta-primary-hover);
  border-color: var(--color-cta-primary-hover);
  color: var(--color-paper); /* override a:hover global */
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover:not(:disabled) .btn__icon {
  transform: translateX(4px);
}
.btn__icon {
  transition: transform var(--transition-fast);
}
.btn--primary:active:not(:disabled) {
  background: var(--color-cta-primary-active);
  border-color: var(--color-cta-primary-active);
  color: var(--color-paper);
  box-shadow: none;
}

.btn--secondary {
  background: var(--color-cta-secondary);
  color: var(--color-paper);
  border-color: var(--color-cta-secondary);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--color-ink-700);
  border-color: var(--color-ink-700);
}

/*
   .btn--save → CTAs de gestión (Guardar, Confirmar, Solicitar acceso, Actualizar)
   No usar para CTAs comerciales (Añadir, Comprar) — eso es .btn--primary (coral).
*/
.btn--save {
  background: var(--color-aloe-500);
  color: var(--color-paper);
  border-color: var(--color-aloe-500);
}
.btn--save:hover:not(:disabled) {
  background: var(--color-aloe-600);
  border-color: var(--color-aloe-600);
  box-shadow: 0 2px 8px rgba(63, 122, 69, 0.25);
}
.btn--save:active:not(:disabled) {
  background: var(--color-aloe-700);
  border-color: var(--color-aloe-700);
  box-shadow: none;
}

.btn--outline {
  background: var(--color-paper);
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
  font-weight: 500;
}
.btn--outline:hover:not(:disabled) {
  border-color: var(--color-ink-400);
  color: var(--color-text-primary);
}
.btn--outline.is-active,
.btn--outline[aria-pressed="true"] {
  background: var(--color-cta-primary);
  color: var(--color-paper);
  border-color: var(--color-cta-primary);
}

.btn--ghost {
  background: transparent;
  color: var(--color-aloe-600);
  border-color: transparent;
  padding: 0 var(--space-2);
}
.btn--ghost:hover:not(:disabled) {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-aloe-700);
}

.btn--destructive {
  background: var(--color-destructive);
  color: var(--color-paper);
  border-color: var(--color-destructive);
}
.btn--destructive:hover:not(:disabled) {
  background: #8a3022;
  border-color: #8a3022;
}

.btn--destructive-outline {
  background: transparent;
  color: var(--color-destructive);
  border-color: var(--color-destructive);
}
.btn--destructive-outline:hover:not(:disabled) {
  background: var(--color-destructive);
  color: var(--color-paper);
}

/* Icon-only */
.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.btn--icon:hover {
  background: var(--color-ink-50);
  color: var(--color-text-primary);
}
.btn--icon:focus-visible {
  outline: 2px solid var(--color-aloe-500);
  outline-offset: 2px;
}
/* Estado logado del icono usuario — círculo gris claro neutro con un
   "online indicator" verde de marca en la esquina inferior-derecha. */
.site-header__user.is-logged {
  background: var(--color-ink-50, #F3F4F6);
  color: var(--color-text-primary);
  border-radius: 50%;
}
.site-header__user.is-logged:hover {
  background: var(--color-ink-100, #E5E7EB);
  color: var(--color-text-primary);
}
.site-header__user.is-logged::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-honey-500, #FFBD3F);
  border: 1.5px solid var(--color-paper);
}

.btn--icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}
.btn--icon.btn--sm {
  width: 32px;
  height: 32px;
}
.btn--icon.btn--sm svg { width: 16px; height: 16px; }

/* With price chip */
.btn--with-price {
  justify-content: space-between;
  padding-inline: var(--space-5) var(--space-4);
}
.btn--with-price .btn__price {
  font-weight: 700;
  padding-left: var(--space-4);
  border-left: 1px solid rgba(255,255,255,0.25);
  margin-left: var(--space-2);
}

/* Mantén icono + label juntos como un solo grupo cuando el botón usa
   space-between (.btn--with-price). Sin esto el SVG y el texto se
   tratan como flex items independientes y se rompe la maqueta. */
.btn__lhs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Loading */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--color-paper);
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}

.badge--bestseller {
  background: var(--color-electric-500);
  color: var(--color-paper);
}

.badge--new {
  background: var(--color-aloe-500);
  color: var(--color-paper);
}

.badge--pro {
  background: var(--color-ink-800);
  color: var(--color-paper);
}

.badge--discount {
  background: var(--color-honey-500);
  color: var(--color-ink-900);
  font-weight: 700;
}

.badge--natural {
  background: var(--color-honey-500);
  color: var(--color-ink-900);
}

/* Badge promocional — honey gold con icono sparkles, para descuentos / ofertas */
.badge--promo {
  background: var(--color-honey-500);
  color: var(--color-ink-900);
}
.product-card__media .badge--promo::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23030712' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275z'/></svg>");
}
.product-card__media .badge--natural {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}

.badge--low-stock {
  background: var(--color-amber-500);
  color: var(--color-paper);
}

.badge--out-of-stock {
  background: var(--color-ink-400);
  color: var(--color-paper);
}

.badge--verified {
  background: var(--color-aloe-50);
  color: var(--color-aloe-700);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
}
.badge--verified svg { width: 12px; height: 12px; }

/* No mostramos badges sobre la imagen ni en tienda ni en el grid de
   bestsellers del home — los pills (NUEVO/MÁS VENDIDO/etc.) añaden ruido
   visual y los productos ya destacan por sí mismos. Siguen apareciendo
   en PDP "Combina con" y en carrito "Completa tu pedido", donde sí
   cumplen su función de social proof. */
.product-grid--shop .product-card .badge,
#bestsellers .product-card .badge {
  display: none;
}

/* Excepción: cards del home con override de badge desde index.php
   (homeBadges) sí muestran su sello. */
#bestsellers .product-card[data-sku="AT-APV-30G"] .badge {
  display: inline-flex;
}

/* Bestsellers del home: títulos comisariados a una sola línea (la
   capacidad ya aparece en la pill de arriba). Reservamos el alto de
   1 sola línea, así la descripción sube y queda alineada al título
   en las 6 cards del grid. */
#bestsellers .product-card__name {
  -webkit-line-clamp: 1;
  min-height: calc(22px * 1.2);
}

/* ============================================================
   FIELDS / INPUTS
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.field__label--optional::after {
  content: " (opcional)";
  color: var(--color-text-muted);
  font-weight: 400;
}

.field__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.field__input,
.field__textarea,
.field__select {
  width: 100%;
  padding: 14px 16px;
  font-size: var(--fs-body);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-paper);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}

.field__input::placeholder,
.field__textarea::placeholder {
  /* Placeholders muy suaves para que no compitan visualmente con un
     valor real escrito por el usuario. */
  color: var(--color-text-muted);
  opacity: 0.5;
}

.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  outline: none;
  border-color: var(--color-aloe-500);
  box-shadow: 0 0 0 3px rgba(63, 122, 69, 0.12);
}

.field__input:disabled,
.field__textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Iconos en input */
.field__input-wrapper:has(.field__icon-left) .field__input {
  padding-left: 44px;
}
.field__input-wrapper:has(.field__icon-right) .field__input {
  padding-right: 44px;
}

.field__icon-left,
.field__icon-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px !important;
  height: 18px !important;
  color: var(--color-ink-400);
  stroke-width: 1.5;
  pointer-events: none;
  transition: color var(--transition-normal);
}

.field__icon-left { left: 14px; }
.field__icon-right { right: 14px; }

.field__input-wrapper:focus-within .field__icon-left,
.field__input-wrapper:focus-within .field__icon-right {
  color: var(--color-aloe-500);
}

/* Estados */
.field--error .field__input,
.field--error .field__textarea {
  border-color: var(--color-error);
  padding-right: 44px;
}
.field--error .field__input:focus,
.field--error .field__textarea:focus {
  box-shadow: 0 0 0 3px rgba(160, 56, 40, 0.15);
}

/* Icono de alerta automático en estado error (no requiere markup extra) */
.field--error .field__input-wrapper::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A03828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Si el wrapper ya lleva un icono manual a la derecha, no lo duplicamos */
.field--error .field__input-wrapper:has(.field__icon-right)::after { display: none; }

.field__helper {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}

.field__error {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  color: var(--color-error);
}
.field__error svg { width: 14px; height: 14px; }

/* Textarea */
.field__textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}

/* Select */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

/* Checkbox */
.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkbox__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 4px;
  background: var(--color-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  margin-top: 2px;
  position: relative;
}
.checkbox__box::after {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.checkbox__input:checked + .checkbox__box {
  background: var(--color-aloe-500);
  border-color: var(--color-aloe-500);
}
.checkbox__input:checked + .checkbox__box::after {
  opacity: 1;
  transform: scale(1);
}
.checkbox__input:focus-visible + .checkbox__box {
  outline: 2px solid var(--color-aloe-500);
  outline-offset: 2px;
}

.checkbox__label {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}
.checkbox__helper {
  display: block;
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Radio */
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}
.radio__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio__circle {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-paper);
  position: relative;
  transition: all var(--transition-normal);
}
.radio__circle::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-aloe-500);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.radio__input:checked + .radio__circle {
  border-color: var(--color-aloe-500);
}
.radio__input:checked + .radio__circle::after {
  opacity: 1;
  transform: scale(1);
}

/* Qty stepper */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper);
  height: 44px;
}
.qty__btn {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  transition: background var(--transition-fast);
}
.qty__btn:hover { background: var(--color-ink-50); }
.qty__btn:disabled { color: var(--color-ink-300); cursor: not-allowed; }
.qty__value {
  width: 44px;
  text-align: center;
  font-weight: 600;
  font-feature-settings: "tnum" on;
  border: none;
  background: transparent;
  -moz-appearance: textfield;
}
.qty__value::-webkit-inner-spin-button,
.qty__value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-aloe-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-normal),
              border-color var(--transition-normal),
              transform var(--transition-normal);
  position: relative;
}

.product-card:hover {
  box-shadow: 0 16px 40px rgba(15, 32, 18, 0.10);
  border-color: var(--color-aloe-200);
}

/* Media base = Spotlight: foco radial centrado con luz tipo joyería.
   Sin halos, sin patrones, solo gradient suave centrado. */
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 42%,
    #FFFFFF 0%,
    #FDFDFE 60%,
    #F6F7F9 100%);
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay invisible que cubre toda la zona de imagen y enlaza a la PDP.
   Va por debajo del badge, favorito y quickview (que tienen z-index mayor),
   pero por encima de la imagen (que es pointer-events:none). */
.product-card__media-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-decoration: none;
}

/* Badge dentro de la card: sistema unificado pill + icono + sombra sutil */
.product-card__media .badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px 8px 11px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

/* Icono inline al inicio de cada badge (SVG inline por variante) */
.product-card__media .badge::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* Bestseller — estrella rellena blanca */
.product-card__media .badge--bestseller::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='%23ffffff' stroke='none'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26'/></svg>");
}

/* Nuevo — sparkles outline blanco */
.product-card__media .badge--new::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275z'/></svg>");
}

/* Descuento — % outline negro sobre amarillo */
.product-card__media .badge--discount::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23030712' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='5' x2='5' y2='19'/><circle cx='6.5' cy='6.5' r='2.5'/><circle cx='17.5' cy='17.5' r='2.5'/></svg>");
}

/* 100% Natural — hoja outline negra */
.product-card__media .badge--natural::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23030712' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2.96a1 1 0 0 1 1.6.7A9 9 0 0 1 12 21'/><path d='M2 21c0-3 1.85-5.36 5.08-6'/></svg>");
}

/* Pro — galardón outline blanco sobre fondo negro */
.product-card__media .badge--pro::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><polyline points='15.477 12.89 17 22 12 19 7 22 8.523 12.89'/></svg>");
}

.product-card__favorite {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  background: transparent;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-text-secondary);
}
.product-card__favorite:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-coral-500);
}
.product-card__favorite svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
  transition: fill var(--transition-normal);
}
.product-card__favorite.is-active {
  color: #DC2626;
}
.product-card__favorite.is-active svg,
.product-card__favorite.is-active svg path {
  fill: currentColor;
}

.product-card__image {
  /* Dos multiplicadores que se componen:
     - --scale-mod : por card (lo usa .product-card--expositor para reducir
                     un pelín los expositores).
     - --scale-page: por página (lo usa .page-tienda-micro para que TODAS
                     las imágenes de Aloe Micro entren mejor en la card).
     La escala final = base * scale-mod * scale-page. */
  --scale-mod: 1;
  --scale-page: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(calc(1.55 * var(--scale-mod) * var(--scale-page)));
  transform-origin: center;
  transition: transform var(--transition-slow), opacity 150ms ease;
  filter: drop-shadow(0 32px 38px rgba(15, 32, 18, 0.14));
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.product-card:hover .product-card__image {
  transform: scale(calc(1.65 * var(--scale-mod) * var(--scale-page)));
}
/* Cambio de capacidad en cards de familia: efecto UNIFICADO — funde a
   0, el cambio de foto y de escala se aplica oculto (transform sin
   transición mientras dura el swap) y funde de vuelta. Sin esto cada
   familia transicionaba distinto: zoom animado vs cambio seco de foto. */
.product-card__image.is-swapping {
  opacity: 0;
  transition: transform 0s, opacity 120ms ease;
}

/* Bestsellers · cards 2 y 3 con producto vertical alto: bajamos escala
   para que las botellas no desborden el media area. Componible con
   --scale-mod (image_scale_card en BD) para overrides por SKU. */
#bestsellers > .product-card:nth-child(2) .product-card__image,
#bestsellers > .product-card:nth-child(3) .product-card__image {
  transform: scale(calc(1.20 * var(--scale-mod) * var(--scale-page)));
}
#bestsellers > .product-card:nth-child(2):hover .product-card__image,
#bestsellers > .product-card:nth-child(3):hover .product-card__image {
  transform: scale(calc(1.28 * var(--scale-mod) * var(--scale-page)));
}

/* Modificadores de escala por producto (campo image_scale en BD).
   - small: botellas/sprays altos que desbordarían la media area
   - tiny:  packs anchos (kit de colaboración) que ocuparían demasiado
   La escala se aplica sobre el transform: scale(1.55) base. */
.product-card__image--scale-small {
  transform: scale(calc(1.20 * var(--scale-mod) * var(--scale-page)));
}
.product-card:hover .product-card__image--scale-small {
  transform: scale(calc(1.28 * var(--scale-mod) * var(--scale-page)));
}

.product-card__image--scale-tiny {
  transform: scale(calc(0.78 * var(--scale-mod) * var(--scale-page)));
}
.product-card:hover .product-card__image--scale-tiny {
  transform: scale(calc(0.84 * var(--scale-mod) * var(--scale-page)));
}

/* Cards de expositor — un pelín más pequeñas en tienda. Composable con
   image_scale (small/tiny) gracias a --scale-mod. */
.product-card--expositor .product-card__image {
  --scale-mod: 0.92;
}

/* Aloe Micro: las imágenes vienen con más "caja" alrededor y desbordan el
   card a la escala estándar. Los expositores entran bien con 0.78 × 0.92
   (factor expositor) ≈ 0.72; las unidades sueltas desbordan incluso a 0.78,
   así que las bajamos un escalón más. Se aplica en cualquier sitio donde
   aparezca un producto Aloe Micro (tienda-micro, PDP "Combina con", carrito
   "Completa tu pedido", lista guardada, etc.). */
.page-tienda-micro .product-card__image,
.product-card--brand-aloe-micro .product-card__image {
  --scale-page: 0.78;
}
.page-tienda-micro .product-card:not(.product-card--expositor) .product-card__image,
.product-card--brand-aloe-micro:not(.product-card--expositor) .product-card__image {
  --scale-page: 0.65;
}

/* Quickview "VER DETALLES" — siempre negro, sombreado en capas, flecha animada */
.product-card__quickview {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  background: var(--color-ink-900);
  color: var(--color-paper);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 32px rgba(0, 0, 0, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.20);
  opacity: 0;
  transition: opacity 350ms cubic-bezier(0.2, 0, 0, 1),
              transform 350ms cubic-bezier(0.2, 0, 0, 1);
  z-index: 4;
  white-space: nowrap;
}
.product-card__quickview svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
  transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);
}
/* Solo al pasar por la IMAGEN (no por título/chips/CTA): el overlay
   "Ver detalles" sobre la foto mientras se interactúa con el panel de
   compra de abajo quedaba raro. */
.product-card__media:hover .product-card__quickview {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Hover directo: el botón no cambia (texto blanco fijo), sólo la flecha se desplaza */
.product-card__quickview:hover {
  color: var(--color-paper);
}
.product-card__quickview:hover svg {
  transform: translate(3px, -3px);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6) var(--space-6);
}

.product-card__body .eyebrow {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Chip premium para destacar la capacidad — pill con borde aloe sutil
   y fondo crema. Se usa en el body de las cards en lugar de un eyebrow
   plano para que la capacidad del producto destaque a primer vistazo. */
.product-card__capacity {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F8F2 100%);
  border: 1.5px solid var(--color-aloe-300, #B8D4A8);
  color: var(--color-aloe-800, #2A4A1E);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(45, 80, 30, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.product-card__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  /* Estandariza el alto del nombre a 2 líneas exactas: los títulos cortos
     reservan espacio para igualar la altura, los largos truncan con … */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(22px * 1.2 * 2); /* 2 líneas */
}

/* Versiones full/short del nombre — en desktop se ve la versión "full"
   (displayName/full_name comercial); en móvil se ve la "short" (name de BD,
   p.ej. "Red Out"). La conmutación final está en la @media móvil al final
   del archivo. */
.product-card__name-full { display: inline; }
.product-card__name-short { display: none; }

/* Versiones full/mobile de la descripción — por defecto (≥420 px) se ve
   la descripción larga de BD; en móvil estrecho (<420 px) se conmuta al
   copy directo definido por la página (p.ej. $homeMobileDescriptions en
   index.php). Si no hay copy mobile, ambos contienen el mismo texto. */
.product-card__description-full { display: inline; }
.product-card__description-mobile { display: none; }

/* Título y descripción son enlaces a la PDP — heredan estilo del padre,
   sin subrayado, con hover sutil. */
.product-card__name a,
.product-card__description a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.product-card__name a:hover,
.product-card__description a:hover {
  color: var(--color-aloe-700);
}

/* Formato/peso del producto — posición fija debajo del nombre, mismo lugar para todos */
.product-card__format {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: -2px;
}

.product-card__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  min-height: calc(1.5em * 2);
}

.product-card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}
.product-card__rating strong {
  color: var(--color-text-primary);
  font-weight: 700;
  font-feature-settings: "tnum" on;
}
.product-card__rating > span:not(.stars) {
  color: var(--color-text-muted);
}

.product-card__urgency {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-coral-700);
}

.product-card__separator { display: none; }

.product-card__pricing {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--color-bone) 0%, var(--color-paper) 100%);
  border: 1px solid var(--color-aloe-100);
  border-radius: var(--radius-md);
}
.product-card__pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.product-card__pricing-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Mini rating — vive en el row del precio (a la derecha) */
.product-card__mini-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.product-card__mini-rating-star {
  color: var(--color-rating);
  font-size: 15px;
  line-height: 1;
}
.product-card__mini-rating strong {
  color: var(--color-text-primary);
  font-weight: 700;
  font-feature-settings: "tnum" on;
}

/* Pills de claims — atributos clave debajo de la descripción
   Texto corto + tamaño compacto = SIEMPRE en una sola línea */
.product-card__claims {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 2px;
  overflow: hidden;
}
.product-card__claims li {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: var(--color-bone);
  color: var(--color-text-secondary);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-subtle);
  white-space: nowrap;
  flex-shrink: 0;
}
.product-card__claims li::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233F7A45' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: -1px;
}
.product-card__price-now {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-feature-settings: "tnum" on, "lnum" on;
  letter-spacing: -0.018em;
  line-height: 1;
}
.product-card__price-prev {
  font-size: 14px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-weight: 500;
  font-feature-settings: "tnum" on, "lnum" on;
}
.product-card__shipping {
  font-size: 12.5px;
  color: var(--color-aloe-700);
  font-weight: 600;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.product-card__shipping::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23244A29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18H9'/><path d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>") no-repeat center;
  flex-shrink: 0;
}

.product-card__body .btn--primary {
  margin-top: var(--space-3);
  border-radius: var(--radius-md);
  height: 48px;
  padding-inline: var(--space-6);
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.22);
}
.product-card__body .btn--primary .btn__icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.75;
}
.product-card__body .btn--primary:hover {
  box-shadow: 0 10px 24px rgba(225, 29, 72, 0.32);
}

/* Estado AGOTADO */
.product-card.is-out-of-stock .product-card__image {
  opacity: 0.5;
  filter: grayscale(0.4);
}
.product-card.is-out-of-stock .product-card__name {
  color: var(--color-text-muted);
}
.product-card.is-out-of-stock .product-card__pricing,
.product-card.is-out-of-stock .product-card__separator {
  display: none;
}
.product-card.is-out-of-stock .product-card__body .btn {
  border-radius: var(--radius-pill);
  height: 48px;
  margin-top: var(--space-3);
}

/* ============================================================
   VARIANTES DE MEDIA — pruebas de elevación visual del producto
   ============================================================ */

/* Variante A · STUDIO — Apple-style. Fondo blanco puro, sombra natural,
   separador sutil entre media y body */
.product-card--studio .product-card__media {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border-subtle);
}
.product-card--studio .product-card__media::before { display: none; }
.product-card--studio .product-card__media::after { display: none; }
.product-card--studio .product-card__image {
  filter:
    drop-shadow(0 28px 32px rgba(0, 0, 0, 0.10))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.05));
}

/* Variante B · FRAME — Editorial con marco interior y gradient vertical */
.product-card--frame .product-card__media {
  background:
    linear-gradient(180deg,
      var(--color-aloe-50) 0%,
      var(--color-paper) 45%,
      var(--color-bone) 100%);
}
.product-card--frame .product-card__media::before { display: none; }
.product-card--frame .product-card__media::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--color-aloe-200);
  border-radius: var(--radius-md);
  background: none;
  pointer-events: none;
  z-index: 1;
}
.product-card--frame .product-card__image {
  filter: drop-shadow(0 22px 28px rgba(15, 32, 18, 0.14));
}

/* Variante C · SPOTLIGHT — Foco radial centrado, luz tipo joyería
   Tonos más claros, casi etéreo */
.product-card--spotlight .product-card__media {
  background: radial-gradient(circle at 50% 42%,
    var(--color-paper) 0%,
    var(--color-bone) 50%,
    var(--color-stone-bg) 100%);
}
.product-card--spotlight .product-card__media::before { display: none; }
.product-card--spotlight .product-card__media::after { display: none; }
.product-card--spotlight .product-card__image {
  filter: drop-shadow(0 32px 38px rgba(15, 32, 18, 0.14));
}

/* Stagger animation al cargar las cards */
@keyframes card-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.product-grid .product-card {
  animation: card-fadeUp 600ms ease-out backwards;
}
.product-grid .product-card:nth-child(1) { animation-delay: 50ms; }
.product-grid .product-card:nth-child(2) { animation-delay: 130ms; }
.product-grid .product-card:nth-child(3) { animation-delay: 210ms; }
.product-grid .product-card:nth-child(4) { animation-delay: 290ms; }
.product-grid .product-card:nth-child(5) { animation-delay: 370ms; }
.product-grid .product-card:nth-child(6) { animation-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  .product-grid .product-card { animation: none; }
}

/* Grid de más vendidos del home: sin píldoras de claims — la card va
   directa a descripción + rating + precio (los claims viven en la PDP). */
#bestsellers .product-card__claims {
  display: none;
}

/* ============================================================
   PRODUCT CARD — VARIANTE BUY (grid de bestsellers del home)
   Panel de compra directo, mismo diseño para todas las cards.
   Colores funcionales intactos: coral CTA, ocre estrellas.
   ============================================================ */
/* Cuerpo del panel de compra — nombre+formato, prueba social,
   beneficios en checks, CTA con precio integrado y microcopy de
   confianza. Sin párrafo descriptivo: todo escaneable. */
.product-card__body--hero {
  gap: var(--space-3);
  flex: 1; /* ocupa el alto sobrante para poder anclar la compra al pie */
  padding-top: var(--space-6); /* menos techo que el body base: el chip ya da aire */
}
/* Ritmo vertical por grupos: nombre+rating juntos (misma unidad de
   lectura), aire antes del descriptor, y el descriptor sin la reserva
   de altura del listado. */
.product-card__body--hero .product-card__rating { margin-top: -10px; }
.product-card__body--hero .product-card__description {
  margin-top: var(--space-1);
  line-height: 1.55;
  min-height: 0;
}
.product-card--buy { display: flex; flex-direction: column; }
.product-card--buy .product-card__media { flex-shrink: 0; }
/* Fila de título: nombre a la izquierda, formato como mini-chip a la
   derecha — el dato de formato se lee como atributo, no como parte
   del nombre. */
.product-card__hero-titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.product-card__hero-titlerow .product-card__name {
  min-width: 0;
  min-height: 0; /* sin la reserva de 2 líneas del nombre base */
  font-size: 21px;
  /* el nombre nunca se trunca: si no cabe junto al chip, parte de línea */
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.product-card__hero-titlerow .product-card__name a {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: inline;
  -webkit-line-clamp: unset;
}
.product-card__hero-format {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill, 999px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.product-card__hero-benefits {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0 var(--space-3);
  border-top: 1px dashed var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-card__hero-benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-primary);
}
.product-card__hero-benefits svg {
  width: 15px;
  height: 15px;
  color: var(--color-aloe-500);
  stroke-width: 2.5;
  flex-shrink: 0;
}
/* CTA con el precio dentro: decisión y coste en un solo vistazo */
.product-card__hero-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  margin-top: auto; /* ancla compra+confianza al pie de la card */
  padding: 15px var(--space-5);
  background: var(--color-coral-500, #F35627);
  color: var(--color-paper);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  transition: transform 0.18s ease, box-shadow 0.22s ease;
}
/* Chips de tamaño de la card de familia — mismo lenguaje que el
   selector de capacidad de la PDP, en versión compacta de card. El
   chip activo decide qué variante añade el botón Comprar. */
.product-card__family-caps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
/* Micro-etiqueta inline antes de los chips ("Elige:") — tono muted,
   misma escala que los chips; en tuteo como el resto de la web. */
.product-card__family-lead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Guiño de interactividad: pill sobre la imagen que anuncia la
   elección de capacidad — mismo lenguaje que el sello de la PDP
   (pill blanca flotante con sombra). Clase propia porque los .badge
   están ocultos en el grid de tienda. */
.product-card__family-flag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  background: var(--color-paper);
  color: var(--color-text-primary);
  border-radius: var(--radius-pill, 999px);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
  pointer-events: none; /* no roba el clic de la imagen */
}
.product-card__family-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 5px 11px;
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  /* Guiño nº2: sombra sutil = pulsable, en la gramática del diseño
     (lo plano informa, lo elevado se pulsa — como los botones). */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.product-card__family-cap:hover {
  border-color: var(--color-aloe-500);
  background: rgba(36, 74, 41, 0.04);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.product-card__family-cap.is-active {
  background: var(--color-aloe-500);
  border-color: var(--color-aloe-500);
  color: var(--color-paper);
  cursor: default;
  box-shadow: 0 2px 6px rgba(36, 74, 41, 0.20);
}

/* Hover del CTA: elevación sutil con halo coral y guiño del icono.
   Elegante, sin estridencias. */
.product-card__hero-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(243, 86, 39, 0.35);
}
.product-card__hero-buy:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(243, 86, 39, 0.30);
}
@media (prefers-reduced-motion: no-preference) {
  .product-card__hero-buy:hover .product-card__hero-buy-label svg {
    transform: translateY(-1.5px) rotate(-8deg);
  }
}
.product-card__hero-buy-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.product-card__hero-buy-label svg {
  width: 17px;
  height: 17px;
  transition: transform 0.2s ease;
}
.product-card__hero-buy-price {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  font-feature-settings: "tnum" on, "lnum" on;
  letter-spacing: -0.01em;
  padding-left: var(--space-3);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
/* Barra de oferta del pack: tachado → −% → "Ahorras X€" sobre banda
   mostaza suave (color de descuentos del sistema), envío a la derecha.
   Justo encima del CTA: ancla la percepción de oferta a la compra. */
.product-card__hero-savingrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
}
.product-card__hero-save-note {
  font-size: 12px;
  color: var(--color-text-muted);
}
.product-card__hero-save-amount {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: rgba(26, 26, 26, 0.06);
  border-radius: var(--radius-pill, 999px);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  white-space: nowrap;
}
/* Cierre del pack, patrón ecommerce: CTA a todo el ancho y debajo la
   línea de valor centrada (por separado + ahorro en pill). */
.product-card__hero-buyrow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: auto;
}
/* Línea de valor sobre el CTA: solo texto, centrada y directa —
   "Precio por separado: 32,98€ · Ahorras 8,27€ con el pack". */
.product-card__hero-buyrow .product-card__hero-savingrow {
  margin-top: 0;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2);
}
.product-card__hero-save-top {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.product-card__hero-save-note {
  font-size: 13px;
  color: var(--color-text-muted);
}
.product-card__hero-save-dot { color: var(--color-text-muted); }
.product-card__hero-buyrow .product-card__hero-save-amount {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.product-card__hero-buyrow .product-card__hero-buy {
  width: 100%;
  margin-top: 0;
}
.product-card--horizontal .product-card__hero-buy { margin-top: 0; }
/* En la card horizontal el alto lo marca la foto: la cabecera queda
   compacta (flujo normal) y es la lista de los 3 productos la que
   absorbe el sobrante, repartiéndolo entre sus filas. */
.product-card--horizontal .product-card__body--hero { justify-content: flex-start; }
.product-card--horizontal .product-card__body--hero .product-card__kit-list {
  flex: 1;
  /* La caja de los 3 productos es una sección propia: cortes de 28px
     (gap 12 del body + 16 de margen) frente al ritmo de 12px del resto. */
  margin-block: var(--space-4);
  /* Tres filas idénticas: cada li ocupa exactamente 1/3 de la caja,
     con su contenido centrado en vertical y separadores entre filas.
     Sin gaps ni paddings desiguales heredados. */
  gap: 0;
  padding: 0 var(--space-5);
}
.product-card--horizontal .product-card__body--hero .product-card__kit-list li {
  flex: 1;
  align-items: center;
  padding: 15px 0;
  margin: 0;
}
/* Compactación vertical: la foto deja de imponer todo el alto (tope de
   600px, misma columna y proporción vía object-fit) y el card entero
   baja sin tocar el estilo de las filas. */
@media (min-width: 900px) {
  /* El tope de altura va en la IMAGEN, no en la caja: el fondo radial
     de la media estira siempre hasta el borde inferior de la card. */
  .product-card--horizontal .product-card__media .product-card__image {
    max-height: 600px;
    object-fit: contain;
  }
}
/* Diseño elevado de las filas (mismo copy): números como chips
   circulares blancos con anilla verde, unidos por una línea de
   recorrido vertical — el ritual de 3 pasos se lee como camino. */
.product-card--horizontal .product-card__body--hero .product-card__kit-list { position: relative; }
.product-card--horizontal .product-card__body--hero .product-card__kit-list::before {
  content: '';
  position: absolute;
  left: calc(var(--space-5) + 18px);
  top: 48px;
  bottom: 48px;
  border-left: 1px dashed rgba(36, 74, 41, 0.28);
}
.product-card--horizontal .product-card__body--hero .product-card__kit-list li {
  position: relative;
  z-index: 1;
}
.product-card--horizontal .product-card__body--hero .product-card__kit-num {
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-aloe-500);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(36, 74, 41, 0.22);
}
/* Formato como mini-píldora, consistente con los chips de la card */
.product-card--horizontal .product-card__body--hero .product-card__kit-size {
  padding: 2px 8px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-paper);
  font-size: 10px;
  font-weight: 600;
}
.product-card--horizontal .product-card__hero-savingrow { margin-top: 0; }
/* Chip de formato centrado verticalmente con el titular */
.product-card--horizontal .product-card__hero-titlerow { align-items: center; }

/* Panel de compra compacto en el grid móvil de 2 columnas: tipografías
   contenidas, CTA en una línea ("Añadir · precio") y nombres que parten
   por palabra, nunca por letra. */
@media (max-width: 767.98px) {
  .product-card__body--hero { gap: var(--space-2); }
  .product-card__hero-titlerow .product-card__name,
  .product-card__hero-titlerow .product-card__name a {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  .product-card__hero-format { padding: 2px 8px; font-size: 10.5px; }
  .product-card__hero-benefits { padding-top: var(--space-2); }
  .product-card__hero-benefits li {
    font-size: 12.5px;
    align-items: flex-start;
  }
  .product-card__hero-benefits svg { margin-top: 2px; }
  .product-card__hero-buy { padding: 11px 12px; gap: var(--space-2); }
  .product-card__hero-buy-label { font-size: 13px; }
  .product-card__hero-buy-label svg { display: none; }
  .product-card__hero-buy-label-long { display: none; }
  .product-card__hero-buy-price { font-size: 15px; padding-left: var(--space-2); }
}

/* ============================================================
   PRODUCT GRID — VARIANTE SHOP (página de tienda)
   Con rating (prueba social también en el listado), máximo
   2 claims y descripción de 3 líneas
   ============================================================ */
.product-grid--shop .product-card__claims li:nth-child(n+3) {
  display: none;
}
/* Descripción a 3 líneas reservadas (card de 4 columnas, más estrecha
   que la del home): los copys de 70-89 caracteres entran completos y
   las filas quedan alineadas. */
.product-grid--shop .product-card--buy .product-card__description {
  -webkit-line-clamp: 3;
  line-height: 1.6; /* interlineado elevado, lectura premium */
  min-height: calc(1.6em * 3);
  max-height: calc(1.6em * 3);
  font-size: 14px;
  /* Separador discontinuo bajo las opiniones, como en el index */
  border-top: 1px dashed var(--color-border-subtle);
  padding-top: var(--space-4);
  margin-bottom: var(--space-2); /* aire mínimo garantizado antes del CTA */
  box-sizing: content-box; /* el padding no roba altura a las 3 líneas */
}
.product-grid--shop .product-card__body--hero { gap: var(--space-4); }
/* Opiniones un punto más discretas */
.product-grid--shop .product-card--buy .product-card__rating {
  font-size: 12.5px;
}
.product-grid--shop .product-card--buy .product-card__rating strong { font-size: 12.5px; }
/* Variante del panel para el grid de 4 columnas de tienda: el chip de
   formato pasa ENCIMA del título (a 4 columnas no encaja a su derecha),
   el título conserva la fuente original de la card (22px display, con
   reserva de 2 líneas para alinear filas) y no hay checks de beneficios. */
.product-grid--shop .product-card__hero-titlerow {
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 8px;
}
.product-grid--shop .product-card--buy .product-card__name {
  font-size: 24px;
  min-height: 0; /* sin reserva: las opiniones se pegan al título */
  /* Una línea SIEMPRE: los nombres largos tienen display corto en
     SHOP_DISPLAY_NAMES; la elipsis es solo red de seguridad. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.product-grid--shop .product-card--buy .product-card__name a {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Opiniones pegadas al título: capacidad + título + rating leen como
   un solo clúster proporcionado. (Antes había dos reglas en conflicto,
   -10px pisada por -6px; consolidadas aquí.) */
.product-grid--shop .product-card--buy .product-card__rating { margin-top: -15px; }
.product-grid--shop .product-card__hero-format { font-size: 10.5px; padding: 2px 8px; }
/* Chips de familia al MISMO tamaño que el chip de formato del resto de
   cards del grid (el trato interactivo lo dan la sombra y el activo). */
.product-grid--shop .product-card__family-cap {
  font-size: 10.5px;
  padding: 2px 8px;
  min-width: 0;
  border-width: 1px;
  line-height: 1.5; /* misma altura total (~21px) que el chip de formato */
}
.product-grid--shop .product-card__hero-buy { padding: 13px var(--space-4); }
.product-grid--shop .product-card__hero-buy-label { font-size: 14px; }
.product-grid--shop .product-card__hero-buy-label-long { display: none; }
.product-grid--shop .product-card__hero-buy-price { font-size: 18px; padding-left: var(--space-2); }
/* Móvil (grid de 2 columnas): fuera la descripción — con los checks
   basta — y CTA compacto para que el precio nunca roce el borde. */
@media (max-width: 767.98px) {
  .product-grid--shop .product-card--buy .product-card__description { display: none; }
  .product-grid--shop .product-card__hero-titlerow { min-height: 0; }
  .product-grid--shop .product-card__hero-buy { padding: 11px 12px; }
  .product-grid--shop .product-card__hero-buy-label { font-size: 13px; }
  .product-grid--shop .product-card__hero-buy-price { font-size: 15px; padding-left: var(--space-2); }
}
.product-grid--shop .product-card__description {
  -webkit-line-clamp: 3;
  min-height: calc(1.5em * 3);
  max-height: calc(1.5em * 3); /* tope duro: descripciones largas (kit) se cortan a 3 líneas */
  overflow: hidden;
}

/* ============================================================
   PRODUCT CARD — VARIANTE FEATURED (editorial dark)
   Tema verde aloe oscuro con producto destacado.
   ============================================================ */
.product-card--featured {
  background: var(--color-aloe-900);
  border-color: var(--color-aloe-800);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.product-card--featured:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  border-color: var(--color-aloe-700);
}

.product-card--featured .product-card__media {
  background:
    radial-gradient(circle at 30% 25%, var(--color-aloe-700) 0%, var(--color-aloe-900) 55%, #050908 100%);
  position: relative;
}

/* Sutil patrón de textura sobre el media */
.product-card--featured .product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events: none;
  z-index: 1;
}

.product-card--featured .product-card__image {
  filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.55));
  position: relative;
  z-index: 2;
}

.product-card--featured .product-card__body {
  background: var(--color-aloe-900);
}

.product-card--featured .product-card__body .eyebrow {
  color: var(--color-aloe-300);
}

.product-card--featured .product-card__name {
  color: var(--color-paper);
}

.product-card--featured .product-card__format {
  color: var(--color-aloe-300);
}

.product-card--featured .product-card__description {
  color: var(--color-aloe-100);
}

.product-card--featured .product-card__rating {
  color: var(--color-aloe-200);
}

.product-card--featured .product-card__separator {
  background: rgba(255, 255, 255, 0.12);
}

.product-card--featured .product-card__price-now {
  color: var(--color-paper);
}

.product-card--featured .product-card__price-prev {
  color: var(--color-aloe-300);
}

.product-card--featured .product-card__shipping {
  color: var(--color-aloe-300);
}

/* Favorito y quickview adaptados al fondo oscuro */
.product-card--featured .product-card__favorite {
  color: var(--color-aloe-200);
}
.product-card--featured .product-card__favorite:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-coral-400);
}

.product-card--featured .product-card__quickview {
  background: var(--color-paper);
  color: var(--color-ink-900);
  z-index: 3;
}
.product-card--featured .product-card__quickview:hover {
  color: var(--color-aloe-700);
}

/* Badges sobre fondo oscuro */
.product-card--featured .badge--natural {
  background: transparent;
  color: var(--color-paper);
  border-color: rgba(255, 255, 255, 0.45);
}
.product-card--featured .badge--pro {
  background: transparent;
  color: var(--color-aloe-200);
  border-color: var(--color-aloe-300);
}
.product-card--featured .badge--bestseller {
  background: var(--color-paper);
  color: var(--color-aloe-900);
}
.product-card--featured .badge--new {
  background: var(--color-aloe-300);
  color: var(--color-aloe-900);
}

/* ============================================================
   TRUST PILLS
   ============================================================ */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.trust-pill svg {
  width: 15px;
  height: 15px;
  color: var(--color-aloe-500);
  stroke-width: 1.75;
  flex-shrink: 0;
}

.trust-pill strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .trust-strip {
    gap: var(--space-2);
  }
  .trust-pill {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ============================================================
   PROMO STRIP
   ============================================================ */
.promo-strip {
  background: #000;
  color: var(--color-paper);
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: 0;
  position: relative;
  overflow: hidden;
}

.promo-strip__content { gap: var(--space-3); }

.promo-strip__lead {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  line-height: 1;
}

.promo-strip__sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

.promo-strip__msg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.94);
}

.promo-strip__discount {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-rose-500);
  line-height: 1;
  margin-right: 2px;
}

.promo-strip__code {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  margin-left: 4px;
  border-radius: 4px;
  background: var(--color-rose-500);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  line-height: 1;
}
.promo-strip__content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  position: absolute;
  inset: 0;
  justify-content: center;
  transition: opacity var(--transition-slow);
  padding: 0 var(--space-4);
  text-align: center;
}
.promo-strip__content.is-active { opacity: 1; }
.promo-strip__content svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.75;
}
@media (max-width: 767.98px) {
  .promo-strip { height: 52px; font-size: 13px; }
  .promo-strip__lead,
  .promo-strip__sep { display: none; }
  .promo-strip__msg { font-size: 13px; gap: 6px; }
  .promo-strip__discount { font-size: 14px; }
  .promo-strip__code { font-size: 11px; padding: 3px 9px; letter-spacing: 1.2px; }
}

/* ============================================================
   STICKY ADD TO CART (móvil)
   ============================================================ */
/* Barra sticky de compra (solo móvil/tablet ≤1023). Rediseño
   2026-09-07: miniatura mayor, nombre corto + pill de capacidad,
   y safe-area inferior — el home indicator del iPhone la "cortaba". */
.sticky-cart {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-paper);
  padding: 12px var(--space-4);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  align-items: center;
  gap: var(--space-4);
  box-shadow: var(--shadow-sticky);
  z-index: var(--z-sticky);
  transform: translateY(100%);
  transition: transform 250ms ease-out;
  border-top: 1px solid var(--color-border-subtle);
}
.sticky-cart.is-visible {
  transform: translateY(0);
}
.sticky-cart__thumb {
  width: 66px;
  height: 66px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--color-bg-secondary);
  padding: 6px;
  flex-shrink: 0;
}
.sticky-cart__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}
.sticky-cart__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.sticky-cart__cap {
  font-size: 10px;
  padding: 1px 8px;
}
.sticky-cart__price s {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 12px;
  margin-left: 4px;
}
/* Botón con el precio dentro, como el CTA de las cards */
.sticky-cart__buy {
  min-height: 50px;
  padding-inline: 16px;
  gap: 8px;
}
.sticky-cart__buy-price {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  font-feature-settings: "tnum" on;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
@media (max-width: 1023.98px) {
  .sticky-cart { display: flex; }
  body.has-sticky-cart {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   TOAST
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}
/* MÓVIL/TABLET (2026-09-07): el toast de "añadido" es pieza de
   conversión — banda a ancho completo PEGADA abajo (con margen de
   seguridad + safe-area). En la PDP, si la barra sticky de compra está
   desplegada (body.sticky-cart-shown, espejo de main.js), el toast
   sube y se coloca POR ENCIMA de ella. */
@media (max-width: 1023.98px) {
  .toast-container {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  body.sticky-cart-shown .toast-container {
    bottom: calc(104px + env(safe-area-inset-bottom));
  }
  /* .toast-container .toast: más específico que la regla base .toast
     (que va después en el archivo y con max-width 360 dejaba el toast
     corto por la derecha). */
  .toast-container .toast {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 14px 16px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 32, 18, 0.18);
    animation: toast-in-up 250ms ease-out;
  }
}

/* Chevron "ir al carrito" del toast (el toast entero es un enlace) */
.toast__go {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

@keyframes toast-in-up {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 360px;
  pointer-events: auto;
  animation: toast-in 250ms ease-out;
}
.toast.is-leaving {
  animation: toast-out 200ms ease-in forwards;
}
/* Variante clickable: el toast es un <a> que lleva a carrito.php. Tiene
   que rehabilitar pointer-events (el contenedor los tiene desactivados),
   quitar subrayado heredado y dar feedback hover. */
.toast--clickable {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}
.toast--clickable:hover {
  transform: translateY(-2px);
  border-color: var(--color-aloe-500);
  box-shadow: 0 12px 28px rgba(15, 32, 18, 0.18);
}
.toast__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-aloe-100);
  color: var(--color-aloe-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toast__icon svg { width: 18px; height: 18px; }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.toast__msg { font-size: 13px; color: var(--color-text-secondary); }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateX(20px); opacity: 0; }
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews__summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .reviews__summary {
    grid-template-columns: 280px 1fr;
    gap: var(--space-12);
    align-items: center;
  }
}
.reviews__avg {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.reviews__avg-number {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
}
.reviews__avg .stars { font-size: 18px; }

.reviews__distribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.reviews__bar {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  gap: var(--space-3);
  align-items: center;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.reviews__bar-track {
  height: 6px;
  background: var(--color-ink-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.reviews__bar-fill {
  height: 100%;
  background: var(--color-rating);
  border-radius: var(--radius-pill);
}

.reviews__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-6);
}
.reviews__sort {
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--color-paper);
  cursor: pointer;
}

.review {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.review__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--color-aloe-700);
  font-size: 18px;
}
.review__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.review__header strong { font-size: 15px; color: var(--color-text-primary); }
.review__content {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.review__photos {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.review__photos img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
}
.review__tags {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-aloe-50);
  color: var(--color-aloe-700);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-pill);
}
.review__helpful {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ============================================================
   CATEGORY CARD
   ============================================================ */
.category-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.category-card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-stone-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-6);
}
.category-card__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--transition-slow);
}
.category-card:hover .category-card__media img {
  transform: scale(1.05);
}
.category-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.category-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.category-card__count {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}
.category-card__arrow {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-paper);
  border-radius: 50%;
  color: var(--color-aloe-600);
  transition: transform var(--transition-normal);
}
.category-card:hover .category-card__arrow {
  transform: translateX(4px);
  background: var(--color-aloe-500);
  color: var(--color-paper);
}

/* ============================================================
   STOCK INDICATOR
   ============================================================ */
.stock-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}
.stock-indicator::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-aloe-500);
  box-shadow: 0 0 0 4px rgba(63,122,69,0.15);
}
.stock-indicator.is-low::before {
  background: var(--color-amber-500);
  box-shadow: 0 0 0 4px rgba(196,149,68,0.15);
}
.stock-indicator.is-out::before {
  background: var(--color-ink-400);
  box-shadow: none;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  padding-block: var(--space-4);
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.breadcrumb a:hover { color: var(--color-aloe-600); }
.breadcrumb svg { width: 12px; height: 12px; }
.breadcrumb__current {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--space-6);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__btn {
  padding: var(--space-3) 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  background: transparent;
}
.tabs__btn:hover { color: var(--color-text-primary); }
.tabs__btn.is-active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-aloe-500);
  font-weight: 600;
}

.tabs__panel {
  display: none;
  padding-block: var(--space-4);
}
.tabs__panel.is-active { display: block; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-12);
}
.pagination__btn {
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.pagination__btn:hover:not(:disabled) {
  border-color: var(--color-ink-400);
  color: var(--color-text-primary);
}
.pagination__btn.is-active {
  background: var(--color-ink-800);
  color: var(--color-paper);
  border-color: var(--color-ink-800);
}
.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   DRAWER (mobile menu)
   ============================================================ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 20, 16, 0.45);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.drawer-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 320px;
  max-width: 90vw;
  background: var(--color-paper);
  z-index: var(--z-modal);
  transform: translateX(-100%);
  transition: transform var(--transition-normal);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open {
  transform: translateX(0);
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.drawer__nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0;
}
.drawer__nav a {
  padding: var(--space-4) var(--space-5);
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border-subtle);
}
.drawer__nav a.drawer__nav--pro {
  color: var(--color-aloe-600);
  font-weight: 600;
}

/* ============================================================
   REORDER BANNER — feedback de "Volver a comprar"
   Aparece arriba del listado del carrito cuando el cliente
   acaba de procesar una recompra. 3 variantes según el resultado:
   success (verde), partial (ámbar), error (rojo).
   ============================================================ */
.reorder-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0 var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-paper);
  font-size: 14px;
  line-height: 1.5;
  transition: opacity .2s ease, transform .2s ease;
}
.reorder-banner.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}
.reorder-banner__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.reorder-banner__body {
  min-width: 0;
}
.reorder-banner__title {
  margin: 0;
  font-weight: 600;
  color: var(--color-text-primary);
}
.reorder-banner__details {
  margin-top: var(--space-2);
}
.reorder-banner__details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.reorder-banner__details summary::-webkit-details-marker { display: none; }
.reorder-banner__details summary::after {
  content: "›";
  font-size: 18px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .15s ease;
}
.reorder-banner__details[open] summary::after { transform: rotate(-90deg); }
.reorder-banner__rejected {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.reorder-banner__rejected li {
  padding-left: 14px;
  position: relative;
}
.reorder-banner__rejected li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-text-muted);
}
.reorder-banner__sku {
  color: var(--color-text-muted);
  font-size: 12px;
  font-family: var(--font-display);
}
.reorder-banner__close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.reorder-banner__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary);
}
.reorder-banner__close svg { width: 16px; height: 16px; }

/* Variantes por nivel */
.reorder-banner--success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.30);
}
.reorder-banner--success .reorder-banner__icon { color: #15803d; }
.reorder-banner--partial {
  background: rgba(232, 169, 41, 0.10);
  border-color: rgba(232, 169, 41, 0.40);
}
.reorder-banner--partial .reorder-banner__icon { color: #8a5b00; }
.reorder-banner--error {
  background: rgba(220, 90, 80, 0.08);
  border-color: rgba(220, 90, 80, 0.30);
}
.reorder-banner--error .reorder-banner__icon { color: var(--color-coral-700, #b94236); }

/* ============================================================
   REVIEWS DRAWER (PDP) — panel lateral DERECHO
   Reusa el mismo .drawer-overlay del menú móvil (un solo overlay
   global) y el mismo lenguaje de transición. Diferencias clave:
   entra desde la derecha (translateX positivo), ancho mayor
   (420 px) para que las reseñas respiren, y scroll vertical
   propio para listas largas.
   ============================================================ */
.reviews-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 460px;
  max-width: 100vw;
  background: var(--color-paper);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  /* IMPORTANTE: display: block (no flex). En flex-direction:column con
     overflow-y:auto el navegador calcula el cross-axis con min-content
     del contenido y los textos largos rompen el layout. Como block
     simple, el width queda fijado a 460px y el overflow-y funciona
     sin patologías. */
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  box-shadow: -16px 0 48px rgba(14, 20, 16, 0.15);
}
.reviews-drawer.is-open {
  transform: translateX(0);
}
.reviews-drawer * {
  box-sizing: border-box;
}

/* Header del drawer: eyebrow + nombre del producto + botón cerrar */
.reviews-drawer__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border-subtle);
}
.reviews-drawer__eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-rose-500);
  margin-bottom: 4px;
}
.reviews-drawer__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}

/* Bloque de resumen (rating grande + barra de distribución) */
.reviews-drawer__summary {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  background: linear-gradient(180deg, rgba(36, 74, 41, 0.04), transparent);
}
/* Tarjeta clara de la valoración: nota grande + /5, estrellas y total
   verificado. Elevación en clave luminosa: blanco sobre el wash verde
   del summary, hairline y sombra difusa muy suave — sin tonos oscuros. */
.reviews-drawer__score {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 6px 24px rgba(36, 74, 41, 0.07);
}
.reviews-drawer__score-num {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding-right: var(--space-5);
  border-right: 1px solid var(--color-border-subtle);
}
.reviews-drawer__score strong {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.reviews-drawer__score-max {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.reviews-drawer__score-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.reviews-drawer__total {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.reviews-drawer__total svg {
  width: 15px;
  height: 15px;
  color: var(--color-aloe-500);
  flex-shrink: 0;
}
/* Móvil: espaciados más compactos para que el total quepa en una línea
   junto al sello, sin partir "Basado en N opiniones". */
@media (max-width: 479.98px) {
  .reviews-drawer__score {
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .reviews-drawer__score-num { padding-right: var(--space-4); }
  .reviews-drawer__score strong { font-size: 38px; }
  .reviews-drawer__total { font-size: 12.5px; }
}
.stars--lg svg {
  width: 18px;
  height: 18px;
}

/* Listado de reseñas */
.reviews-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.review {
  display: block;
  width: 100%;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
}
.review:last-child {
  border-bottom: 0;
}
/* Head con grid: avatar 40px + meta flexible + verified auto.
   minmax(0, 1fr) garantiza que la columna del meta puede shrink
   por debajo de su contenido (evita que el contenido fuerce el
   ancho mínimo del item). */
.review__head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.review__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-aloe-600, #244a29);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.review__author {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review__sub {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-aloe-700, #1f3f24);
  background: rgba(36, 74, 41, 0.08);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.review__verified svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}
.review__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.review__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.review__body {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
  /* word-break/overflow-wrap defensivo para palabras larguísimas
     (URLs, hashtags) sin que rompan el layout. */
  overflow-wrap: break-word;
  word-break: normal;
}


/* ============================================================
   PRODUCT CARD — VARIANTE HORIZONTAL (pack/kit)
   Misma estructura que la card vertical: media + body con todos
   los elementos. Solo cambia la dirección del flex y proporciones.
   ============================================================ */
.product-card--horizontal {
  flex-direction: column;
  max-width: none;
}
@media (min-width: 900px) {
  .product-card--horizontal {
    flex-direction: row;
    align-items: stretch;
  }
}

.product-card--horizontal .product-card__media {
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .product-card--horizontal .product-card__media {
    width: 48%;
    aspect-ratio: auto;
    align-self: stretch;
  }
}
@media (min-width: 1280px) {
  .product-card--horizontal .product-card__media {
    width: 50%;
  }
}

/* En horizontal, fondo radial perfectamente centrado y producto centrado en él */
.product-card--horizontal .product-card__media {
  background: radial-gradient(circle at 50% 50%,
    #FFFFFF 0%,
    #FDFDFE 60%,
    #F6F7F9 100%);
}
.product-card--horizontal .product-card__image {
  transform: scale(0.80);
  transform-origin: center center;
}
.product-card--horizontal:hover .product-card__image {
  transform: scale(0.84);
}

/* Card del kit armónica con el grid de bestsellers: mismos espaciados
   de cuerpo (24 de padding, 12 de gap). La imagen conserva su columna
   original (48/50%). */
.product-card--horizontal .product-card__body.product-card__body--hero {
  gap: var(--space-3);
  /* Techo más generoso para que el titular no nazca pegado al borde */
  padding: var(--space-8) var(--space-6) var(--space-6);
}

.product-card--horizontal .product-card__body {
  flex: 1;
  min-width: 0;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-6);
}
@media (min-width: 900px) {
  .product-card--horizontal .product-card__body {
    padding: var(--space-10) var(--space-10);
  }
}
@media (min-width: 1280px) {
  .product-card--horizontal .product-card__body {
    padding: var(--space-12) var(--space-12);
  }
}

.product-card--horizontal .product-card__name {
  font-size: 28px;
}
@media (min-width: 1024px) {
  .product-card--horizontal .product-card__name {
    font-size: 34px;
  }
}

.product-card--horizontal .product-card__description {
  -webkit-line-clamp: unset;
  font-size: 15px;
  min-height: 0;
  max-width: 56ch;
}

/* En horizontal, los claims pueden envolverse a 2 líneas si hace falta */
.product-card--horizontal .product-card__claims {
  flex-wrap: wrap;
}

/* === KIT LIST: 3 productos contenidos en el pack ===
   Lista numerada con estilo coherente con las pills del "Por qué Aloe" */
.product-card__kit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  margin: 0;
  background: var(--color-bone);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.product-card__kit-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.product-card__kit-list li + li {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}
.product-card__kit-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  background: rgba(36, 74, 41, 0.10);
  color: var(--color-aloe-700);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(36, 74, 41, 0.18);
  margin-top: 1px;
}
.product-card__kit-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.product-card__kit-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.product-card__kit-size {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.product-card__kit-text > span {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
/* Defaults para el swap mobile/desktop de las descripciones de los botes
   del pack (la conmutación real está en @media (max-width: 767.98px)). */
.product-card__kit-text .kit-desc--desktop { display: inline; }
.product-card__kit-text .kit-desc--mobile { display: none; }

/* Etiqueta "Ahorras X €" dentro del bloque pricing */
.product-card__price-save {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--color-coral-500);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* ============================================================
   MOBILE — PRODUCT CARD VERTICAL 2x (≤ 767.98px)
   Layout vertical en 2 columnas (imagen arriba, body abajo) con los
   mismos estilos refinados que la versión horizontal: pill mini,
   nombre grande, descripción corta de PDP, sin estrellas, precio sin
   contorno. La variante horizontal queda guardada en
   memory/reference_mobile_card_horizontal_backup.md por si se vuelve a
   ella. No afecta a desktop ni a la card horizontal de packs.
   ============================================================ */
@media (max-width: 767.98px) {
  /* Body con ritmo vertical premium: padding generoso y gap pequeño base
     (la mayoría de elementos están separados, los pares que comparten
     jerarquía van con margins propios). */
  .product-card__body {
    padding: 16px 14px 18px;
    gap: 0;
  }

  /* Pill capacidad — eyebrow minúsculo, casi pegado al nombre */
  .product-card__capacity {
    font-size: 9px;
    padding: 2px 7px;
    letter-spacing: 0.5px;
    border-width: 1px;
    margin-bottom: 6px;
  }

  /* Nombre: protagonista. Bajamos un punto vs horizontal (16 px) para
     que quepa cómodo en la columna estrecha (~170 px) sin perder peso.
     Sobrescribe la regla #bestsellers que lo forzaba a 1 línea en desktop */
  .product-card__name,
  #bestsellers .product-card__name {
    font-size: 16px;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    min-height: 0;
    margin: 0 0 8px;
  }

  /* En móvil mostramos el nombre corto ($p['name'] en BD, p.ej. "Red Out")
     y ocultamos el largo. En desktop se hace al revés (regla por defecto
     fuera de esta @media). */
  .product-card__name-full { display: none; }
  .product-card__name-short { display: inline; }

  /* Descripción corta de la PDP, máximo 3 líneas con clamp para
     homogeneizar la altura de las cards en móvil. Si el copy original
     es más largo, se trunca con elipsis. line-height generoso (1.5)
     para look premium y respiración entre líneas. */
  .product-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0 0 14px;
    min-height: 0;
  }

  /* Elementos no esenciales — fuera en mobile */
  .product-card__claims,
  .product-card__shipping,
  .product-card__quickview { display: none; }

  /* Estrellas/rating fuera en móvil (la confianza social vive en la PDP) */
  .product-card__rating { display: none; }

  /* Pricing simplificado: sin contorno (border + gradiente) que envolvía
     el precio, queda limpio sobre el fondo blanco de la card */
  .product-card__pricing {
    gap: 2px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
  }
  .product-card__pricing-row { align-items: baseline; gap: 6px; }
  .product-card__pricing-main {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
  }
  .product-card__price-now {
    font-size: 20px;
    line-height: 1.1;
  }
  .product-card__price-prev {
    font-size: 11px;
  }

  /* Botón "Añadir al carrito" full-width — separación clara del precio
     para que la zona de CTA respire (aire premium). */
  .product-card__body .btn--primary {
    margin-top: 14px;
    height: 40px;
    min-height: 40px;
    padding-inline: 10px;
    font-size: 12px;
    gap: 6px;
    border-radius: var(--radius-md);
  }
  .product-card__body .btn--primary .btn__icon {
    width: 15px;
    height: 15px;
  }

  /* Favorito un punto más pequeño */
  .product-card__favorite {
    width: 32px;
    height: 32px;
    top: 6px;
    right: 6px;
  }
  .product-card__favorite svg {
    width: 16px;
    height: 16px;
  }

  /* Badge un punto más pequeño */
  .product-card__media .badge {
    top: 6px;
    left: 6px;
    padding: 5px 9px 5px 7px;
    font-size: 10px;
  }

  /* Pack card móvil: ocultamos el badge "EDICIÓN LIMITADA" — la
     palabra "PACK" en la pill de capacidad y el chip "AHORRAS X €"
     ya transmiten exclusividad sin saturar la zona de la imagen. */
  .product-card--horizontal .product-card__media .badge {
    display: none;
  }

  /* === PACK CARD (.product-card--horizontal) — mismo lenguaje móvil ===
     Sobrescribimos el override desktop para que en móvil el pack
     respire igual que las cards del bestsellers: título a tamaño card,
     descripción legible y kit-list compacta con aire premium.
     Ritmo vertical: header (pill+título+desc) en bloque apretado →
     kit-list aireada → zona CTA (precio + botón) con su propio aire. */
  .product-card--horizontal .product-card__body {
    padding: 18px 14px 20px;
    gap: 0;
  }
  /* Pill capacidad: mantiene el margen propio (override de la pill base) */
  .product-card--horizontal .product-card__capacity {
    margin-bottom: 8px;
  }
  /* Título: el override desktop subía a 28 px — lo bajamos a 20 px
     en móvil para mantener jerarquía sin robar protagonismo al pack
     (la imagen y la kit-list ya cuentan la historia del producto). */
  .product-card--horizontal .product-card__name {
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 8px;
  }
  .product-card--horizontal .product-card__description {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    max-width: 100%;
    /* Separación clara antes de la kit-list — marca el cierre del header
       y la apertura del bloque "qué hay dentro" */
    margin: 0 0 20px;
  }
  /* Kit list compacta + aire entre items para sensación editorial.
     Reducimos tipografías y badge numérico, aumentamos el gap interno
     y subimos la opacidad del separador para que respire. */
  .product-card--horizontal .product-card__kit-list {
    padding: 16px 14px;
    gap: 14px;
    /* Separación antes del bloque de precio/CTA — pieza de respiro
       importante para sensación premium */
    margin: 0 0 22px;
  }
  .product-card--horizontal .product-card__kit-list li {
    gap: 12px;
  }
  .product-card--horizontal .product-card__kit-list li + li {
    padding-top: 14px;
  }
  .product-card--horizontal .product-card__kit-num {
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
    letter-spacing: 0.3px;
  }
  .product-card--horizontal .product-card__kit-text {
    gap: 4px;
  }
  .product-card--horizontal .product-card__kit-text strong {
    font-size: 12.5px;
    gap: 6px;
  }
  .product-card--horizontal .product-card__kit-size {
    font-size: 10px;
    letter-spacing: 0.2px;
  }
  .product-card--horizontal .product-card__kit-text > span {
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-muted);
  }
  /* Swap mobile/desktop de las descripciones de los botes del pack:
     en móvil mostramos la frase corta inyectada en index.php, en
     desktop sigue la descripción larga de BD. */
  .product-card--horizontal .product-card__kit-text .kit-desc--desktop { display: none; }
  .product-card--horizontal .product-card__kit-text .kit-desc--mobile { display: inline; }
  /* Precio sin contorno + chip "Ahorras" un punto más pequeño */
  .product-card--horizontal .product-card__price-save {
    font-size: 10px;
    padding: 4px 8px;
  }
  /* Botón "Añadir pack al carrito" — un punto más alto que las cards
     de producto (CTA principal del bloque destacado). Aire extra antes
     para que la zona de "valor + CTA" respire (sensación premium). */
  .product-card--horizontal .product-card__body .btn--primary {
    margin-top: 18px;
    height: 46px;
    min-height: 46px;
    padding-inline: 14px;
    font-size: 13px;
    gap: 8px;
    border-radius: var(--radius-md);
  }
  .product-card--horizontal .product-card__body .btn--primary .btn__icon {
    width: 16px;
    height: 16px;
  }
}

/* ============================================================
   MOBILE ESTRECHO — DESCRIPCIÓN PROPIA (< 420 px)
   En las pantallas más estrechas (móviles típicos 360-414 px) se muestra
   el copy mobile definido por la página (más corto y directo), sin clamp
   ni elipsis. A partir de 420 px se mantiene la descripción larga de BD
   con clamp a 3 líneas (que sí puede usar elipsis si el copy es muy largo).
   ============================================================ */
@media (max-width: 419.98px) {
  .product-card__description-full { display: none; }
  .product-card__description-mobile { display: inline; }

  /* El copy mobile ya está calibrado para entrar en 3 líneas, así que
     quitamos el clamp y la elipsis del contenedor para que se vea íntegro. */
  .product-card__description {
    display: block;
    -webkit-line-clamp: none;
    -webkit-box-orient: initial;
    overflow: visible;
  }
}

/* ============================================================
   Pill de estado de pedido — compartida por cuenta.php,
   pedido-confirmado.php, seguimiento.php y el panel /admin
   (movida desde layouts.css el 2026-07-15: el admin no carga
   layouts.css y necesita los mismos colores de estado).
   ============================================================ */
.order-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  /* Fallback neutro: si llega un estado desconocido, queda gris suave
     en vez de mezclarse con cualquier color anterior. Los modificadores
     `.order-status--*` (declarados a continuación) sobrescriben. */
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-secondary);
  border: 1px solid transparent;
}

/* Entregado — verde "success" puro */
.order-status--ok {
  background: rgba(34, 197, 94, 0.14);
  color:      #15803d;
  border-color: rgba(34, 197, 94, 0.40);
}
/* En tránsito — azul (in motion) */
.order-status--info {
  background: rgba(70, 130, 180, 0.14);
  color:      #1d5489;
  border-color: rgba(70, 130, 180, 0.35);
}
/* Procesando / pendiente de pago — ámbar (esperando acción) */
.order-status--warn {
  background: rgba(232, 169, 41, 0.20);
  color:      #7a4f00;
  border-color: rgba(232, 169, 41, 0.45);
}
/* Cancelado / reembolsado — rojo coral (final) */
.order-status--err {
  background: rgba(220, 90, 80, 0.14);
  color:      var(--color-coral-700, #b94236);
  border-color: rgba(220, 90, 80, 0.35);
}

/* Punto coloreado junto al estado */
.order-card__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Animación solo en estados "en movimiento" */
.order-status--info .order-card__status-dot,
.order-status--warn .order-card__status-dot {
  animation: order-pulse 1.6s ease-in-out infinite;
}
@keyframes order-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* Variantes nuevas para el modelo de estados 2026-07-15 */
/* Almacén — violeta (en manos del equipo, trabajándose) */
.order-status--prep {
  background: rgba(124, 92, 191, 0.14);
  color:      #5b3fa8;
  border-color: rgba(124, 92, 191, 0.35);
}
/* Devolución — naranja (RMA en curso, requiere atención) */
.order-status--rma {
  background: rgba(234, 124, 42, 0.14);
  color:      #b35309;
  border-color: rgba(234, 124, 42, 0.40);
}
.order-status--prep .order-card__status-dot,
.order-status--rma  .order-card__status-dot {
  animation: order-pulse 1.6s ease-in-out infinite;
}

/* ============================================================
   TIENDA MÓVIL/TABLET (2026-09-06) — SOLO ≤1023px.
   El escritorio está aprobado: nada de aquí puede afectarle.
   ============================================================ */

/* Tablet y móvil grande: CTA compacto — el precio ya no invade el
   padding derecho del botón (quedaba a ras del borde). */
@media (max-width: 1023.98px) {
  .product-grid--shop .product-card__hero-buy { padding: 12px; gap: 8px; }
  .product-grid--shop .product-card__hero-buy-label { font-size: 13px; }
  .product-grid--shop .product-card__hero-buy-price { font-size: 16px; padding-left: 10px; }
}

/* Móvil (≤479px): chips de tamaño de familia en UNA línea — fuera la
   micro-etiqueta "Elige:" (con ella saltaban a 2 filas y los títulos
   de cards vecinas quedaban desalineados). */
@media (max-width: 479.98px) {
  .product-grid--shop .product-card__family-lead { display: none; }
}

/* Móvil: áreas táctiles con más dedo (sin cambiar el tamaño visual
   del icono — solo crece la zona pulsable del corazón). */
@media (max-width: 767.98px) {
  .product-card__favorite { width: 40px; height: 40px; }

  /* TODOS los pills de capacidad al MISMO tamaño pequeño: los chips de
     familia (2 tamaños) igualan al chip de formato de las cards sin
     variantes — antes se veían más grandes y desentonaban. */
  .product-grid--shop .product-card__family-cap {
    font-size: 10.5px;
    padding: 2px 8px;
    min-width: 0;
  }

  /* Sin estrellas en el grid móvil (decisión 2026-09-06): en su lugar
     la DESCRIPCIÓN a 3 LÍNEAS UNIFORMES — reserva y tope de 3 líneas
     para que todas las cards midan igual; los copys que no caben
     tienen su versión móvil en BD (products.description_mobile). */
  .product-grid--shop .product-card--buy .product-card__rating { display: none; }
  .product-grid--shop .product-card--buy .product-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.5;
    min-height: calc(1.5em * 3);
    max-height: calc(1.5em * 3);
    color: var(--color-text-secondary);
    margin: 0;
    /* resetea la variante desktop del grid (separador discontinuo y
       padding superior) */
    border-top: 0;
    padding-top: 0;
    box-sizing: border-box;
  }
}

/* ============================================================
   TIENDA MÓVIL — LOOK EDITORIAL MOBILE-FIRST (2026-09-06)
   Grid a sangre (las fotos aprovechan el 100% del ancho), cards sin
   marco y tipografía más fina y contenida. SOLO ≤767px.
   ============================================================ */
@media (max-width: 767.98px) {
  /* Grid a sangre completa: fuera el padding lateral del container.
     Columnas casi pegadas (2px) — las fotos leen como un mosaico —
     y aire generoso entre filas. */
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop {
    margin-inline: calc(-1 * var(--container-pad));
    gap: 30px 2px;
  }

  /* Cards sin chrome: ni borde, ni radio, ni sombra — la foto manda. */
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card:hover {
    transform: none;
    box-shadow: none;
  }
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__media { border-radius: 0; }

  /* El texto recupera el margen de página (mismo eje que el resto del
     contenido) y respira menos apretado. */
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__body--hero {
    padding: 12px var(--container-pad) 0;
    gap: 8px;
  }

  /* Título editorial, y PEGADO a la descripción (título y descripción
     leen como una sola unidad; el aire va antes del precio). */
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__name,
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__name a {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__name { margin: 0; }
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__hero-titlerow { gap: 11px; }
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__body--hero { gap: 4px; }
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card--buy .product-card__description { margin-top: 2px; }

  /* Sin la línea punteada entre título y descripción: en el look
     limpio sin marcos sobra cualquier división interna. */
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__separator { display: none; }

  /* Home: los checks de beneficios de la card sobran en el grid
     editorial (título + descripción + CTA bastan) */
  .page-inicio .product-grid--shop .product-card__hero-benefits { display: none; }

  /* Título al 17px del sistema (la regla vieja con #bestsellers pesa
     más por el id — se iguala con el mismo id) */
  #bestsellers.product-grid--shop .product-card__name,
  #bestsellers.product-grid--shop .product-card__name a {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  /* El "margin: 0 0 8px" de la variante móvil pre-editorial (id, gana
     por especificidad al margin:0 del scope :is) separaba título y
     descripción 8px más que en tienda — mismo ritmo que tienda.php. */
  #bestsellers.product-grid--shop .product-card__name { margin: 0; }

  /* Copy móvil (description_mobile de BD) en TODO móvil, no solo <420:
     los iPhone grandes (430 px) veían el copy largo recortado con "…". */
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__description-full { display: none; }
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__description-mobile { display: inline; }

  /* CTA como en escritorio: UN botón coral a todo el ancho con
     "Comprar | precio" en una sola línea — fuentes ajustadas para que
     el precio nunca toque el borde en cards de ~140px. */
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__hero-buy {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-top: auto;             /* CTA anclado al pie: filas alineadas */
    padding: 12px 11px;
  }
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__hero-buy-price {
    font-size: 14.5px;
    padding-left: 8px;
  }
  :is(.page-tienda, .page-tienda-micro, .cart-suggest, .page-inicio, .page-cuenta, .page-buscar) .product-grid--shop .product-card__hero-buy-label {
    font-size: 12.5px;
  }
}


/* ===== layouts.css ===== */
/* ============================================================
   ALOE TATTOO — LAYOUTS
   Header, footer, grids, hero, page-specific layouts
   ============================================================ */

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border-subtle);
  z-index: var(--z-sticky);
  transition: height var(--transition-normal),
              box-shadow var(--transition-normal);
  height: var(--header-h);
}

.site-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.site-header.is-scrolled {
  height: var(--header-h-scrolled);
  box-shadow: var(--shadow-sm);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-text-primary);
}
.site-header__logo-img {
  display: block;
  height: 40px;
  width: auto;
  transition: height var(--transition-normal);
  /* Rendering crisp para SVG con detalle fino (tagline) */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.site-header.is-scrolled .site-header__logo-img {
  height: 36px;
}
@media (max-width: 640px) {
  .site-header__logo-img { height: 34px; }
}
/* Legacy text-based brand (mantenido por compatibilidad) */
.site-header__brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-aloe-700);
}
.site-header__tagline {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  text-transform: lowercase;
  margin-top: 2px;
}

.site-header__nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
  justify-content: center;
}
@media (min-width: 1024px) {
  .site-header__nav { display: flex; }
}
.site-header__nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  position: relative;
  padding: 4px 0;
  transition: color var(--transition-fast);
}
.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: var(--color-aloe-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-normal);
}
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] { color: var(--color-text-primary); }
.site-header__nav a:hover::after,
.site-header__nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header__nav-pro {
  color: var(--color-aloe-600) !important;
  font-weight: 600 !important;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-header__cart {
  position: relative;
}
.site-header__cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-coral-500);
  color: var(--color-paper);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-feature-settings: "tnum" on;
  pointer-events: none;
}

.site-header__hamburger {
  display: inline-flex;
}
@media (min-width: 1024px) {
  .site-header__hamburger { display: none; }
}

@media (max-width: 1023.98px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    position: relative;
  }
  .site-header__nav { display: none; }
  /* Logo centrado en el espacio libre entre la hamburguesa y los
     iconos (2026-09-08, tras quitar la lupa dejaba de cuadrar).
     Centrado al viewport no cabe: el logo pisaría los iconos <400px. */
  .site-header__logo { justify-self: center; }
  .site-header__actions { justify-self: end; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #000;
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--space-24);
}

.site-footer h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-paper);
  margin-bottom: var(--space-4);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
  font-size: 14px;
}
.site-footer a:hover {
  color: var(--color-paper);
}

.site-footer__top {
  background: var(--color-aloe-700);
}
.newsletter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-12) var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
}
.newsletter h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-paper);
  margin-bottom: var(--space-1);
}
.newsletter p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-body-sm);
}
.newsletter__form {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.newsletter__form input {
  flex: 1;
  min-width: 240px;
  height: 48px;
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  background: var(--color-paper);
  color: var(--color-text-primary);
}
.newsletter__form input:focus {
  outline: 2px solid var(--color-aloe-300);
  outline-offset: 2px;
}
.newsletter__form .btn {
  height: 48px;
}
@media (min-width: 768px) {
  .newsletter {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

/* TIER 1 — Claim de cierre con actitud + CTA a tienda (horizontal siempre) */
.site-footer__claim {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-12) var(--container-pad);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-10);
  text-align: left;
}
@media (min-width: 900px) {
  .site-footer__claim {
    flex-wrap: nowrap;
    padding: var(--space-16) var(--container-pad);
    gap: var(--space-12);
  }
}

.site-footer__claim-text { flex: 1 1 auto; min-width: 0; }
.site-footer__claim-text h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-paper);
  margin: 0 0 var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-footer__claim-text h3 em {
  font-style: italic;
  font-weight: 800;
  color: var(--color-aloe-300, #a3d9a5);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}
.site-footer__claim-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  max-width: 36ch;
}

/* CTA pill — blanco sobre negro, hover invierte sutil */
.site-footer a.site-footer__claim-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 18px 28px 18px 36px;
  background: var(--color-paper);
  color: var(--color-ink-900, #000);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.site-footer a.site-footer__claim-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  color: var(--color-ink-900, #000);
  background: var(--color-paper);
}
.site-footer__claim-cta i,
.site-footer__claim-cta svg {
  width: 36px;
  height: 36px;
  padding: 8px;
  background: var(--color-ink-900, #000);
  color: var(--color-paper);
  border-radius: 50%;
  flex-shrink: 0;
}

/* TIER 2 — Fila principal: logo · tagline · 2 cols enlaces */
.site-footer__main {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-20) var(--container-pad) var(--space-12);
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .site-footer__main {
    /* LOGO toma el espacio sobrante (1fr) → empuja TATUAJE/PMU/PAGO juntos
       contra el borde derecho con un gap-column reducido entre ellos. */
    grid-template-columns: 1fr auto auto auto;
    gap: var(--space-12) 90px;
  }
  .site-footer__main-col { min-width: 140px; }
}
/* En móvil: TATUAJE y PMU lado a lado (2 cols) para aprovechar el ancho.
   La marca (brand) y la columna PAGO mantienen full-width arriba/abajo.
   Todo el contenido del footer queda CENTRADO horizontalmente para que
   el bloque se sienta unitario en pantalla estrecha. */
@media (max-width: 767.98px) {
  .site-footer__main {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-9, 36px) var(--space-6);
    justify-items: center;
    /* Sistema de ritmo del footer móvil: TODOS los bloques separados
       por la misma unidad de aire (32 px) tanto arriba/abajo del logo
       como antes de los hairlines. Esto crea cadencia editorial uniforme:
       footer-top ⇢ logo ⇢ hairline ⇢ cols ⇢ hairline ⇢ legals ⇢ footer-bottom.
    */
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .site-footer__main-brand,
  .site-footer__main-col--pago {
    grid-column: 1 / -1;
  }

  /* TATUAJE / PMU: h4 y enlaces centrados, sin padding heredado de la lista.
     Tipografías más compactas que el desktop para que las listas no
     dominen visualmente en pantalla estrecha. */
  .site-footer__main-col {
    text-align: center;
  }
  .site-footer__main-col ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
    gap: 6px;
  }
  .site-footer__main-col h4 {
    font-size: 11px;
    letter-spacing: 1.2px;
    margin-bottom: var(--space-3);
  }
  .site-footer__main-col a {
    font-size: 12px;
    line-height: 1.25;
  }

  /* Brand: centrado limpio + separador hairline inferior FULL-WIDTH.
     El padding superior viene del footer (space-8 = 32 px), y aquí
     ponemos el padding inferior con LA MISMA unidad para que el logo
     quede ópticamente centrado.
     La línea separadora se pinta con un pseudo-elemento `::after`
     anclado fuera del container-pad (left/right negativos) para que
     coincida en ancho con el border-top del bloque legal — ambos
     hairlines llegan a 100% del footer. */
  .site-footer__main-brand {
    position: relative;
    text-align: center;
    align-items: center;
    width: 100%;
    max-width: none;
    padding-top: 0;
    padding-bottom: var(--space-8);
    margin-bottom: 0;
    border-bottom: 0;
  }
  .site-footer__main-brand::after {
    content: '';
    position: absolute;
    left: calc(var(--container-pad) * -1);
    right: calc(var(--container-pad) * -1);
    bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }
  .site-footer__brand-img {
    height: 42px;
    margin: 0 auto;
  }

  /* AEMPS box: oculto en móvil — la info de "Producto registrado AEMPS"
     no es relevante a primera vista a 393 px; aligera el footer. */
  .site-footer__aemps {
    display: none;
  }

  /* Pago 100% Seguro: anulamos el justify-self:end del desktop y centramos.
     El grid de métodos ya tiene cada item con justify-content:center. */
  .site-footer__main-col--pago {
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
    max-width: 360px;
    width: 100%;
    text-align: center;
  }
}

.site-footer__main-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
  max-width: 360px;
}
@media (min-width: 900px) {
  .site-footer__main-brand { align-items: flex-start; }
}
.site-footer__brand-img {
  display: block;
  height: 46px;
  width: auto;
}
@media (min-width: 900px) {
  .site-footer__brand-img { height: 51px; }
}

/* Badge AEMPS · trust seal debajo del logo */
.site-footer__aemps {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.site-footer__aemps:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.35);
}
/* En móvil ocultamos la badge AEMPS — la info no aporta a primera vista
   en 393 px y aligera el footer. Va aquí (después de la regla base) por
   orden de cascada; el override existe también dentro del @media móvil
   del footer pero perdía contra la base por venir antes en el archivo. */
@media (max-width: 767.98px) {
  .site-footer__aemps { display: none; }
}
.site-footer__aemps-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.site-footer__aemps-icon img {
  width: 32px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1); /* monocromo blanco */
}
.site-footer__aemps-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}
.site-footer__aemps-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.site-footer__aemps-mark {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-paper);
}
.site-footer__aemps-sub {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
}

.site-footer__main-tagline {
  max-width: 36ch;
  text-align: center;
  position: relative;
}
@media (min-width: 900px) {
  .site-footer__main-tagline {
    text-align: left;
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-aloe-300, #a3d9a5);
  }
}
.site-footer__main-tagline-lead {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-paper);
}
.site-footer__main-tagline-lead em {
  font-style: italic;
  font-weight: 700;
  color: var(--color-aloe-300, #a3d9a5);
}
.site-footer__main-tagline-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}
.site-footer__main-tagline-sub strong {
  font-weight: 700;
  font-style: normal;
  color: rgba(255, 255, 255, 0.9);
}

.site-footer__main-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__main-col a {
  line-height: 1.3;
  display: inline-block;
}
/* En móvil compactamos la lista (gap mínimo) — se hace aquí, después
   de la regla base, para que la cascada deje ganar al override en mobile.
   Una versión del mismo gap también está dentro del @media móvil del
   footer (línea ~365) pero el orden de cascada hacía que la base la
   sobrescribiera; este override va al final de la cadena. */
@media (max-width: 767.98px) {
  .site-footer__main-col ul {
    gap: 2px;
  }
  .site-footer__main-col a {
    line-height: 1.15;
    padding: 2px 0;
  }
}

/* SOCIAL */
.site-footer__social {
  display: flex;
  gap: var(--space-2);
}
.site-footer__social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all var(--transition-fast);
}
.site-footer__social a:hover {
  background: var(--color-paper);
  color: var(--color-ink-800);
  border-color: var(--color-paper);
}
.site-footer__social svg { width: 18px; height: 18px; }

/* Columna PAGO dentro del grid principal del footer (alineada a la derecha) */
.site-footer__main-col--pago {
  min-width: 320px;
  max-width: 360px;
  justify-self: end;
  margin-left: auto;
}
.site-footer__main-col--pago h4 { margin-bottom: var(--space-3); }

/* Grid de métodos · 2 cols × 3 rows con borde tipo "card" */
.site-footer__secure-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 8px;
  padding: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.site-footer__secure-methods li {
  width: auto;
  min-width: 0;
}
.site-footer__secure-methods span { width: 100%; }
.site-footer__secure-methods li { list-style: none; }
.site-footer__secure-methods li { min-width: 0; }
.site-footer__secure-methods span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: 100%;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.site-footer__secure-methods span:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-paper);
}
.site-footer__secure-methods em {
  font-style: normal;
  white-space: nowrap;
}
.site-footer__secure-methods svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

/* Footer slim del checkout — solo la línea legal sobre fondo negro. */
.site-footer--checkout {
  margin-top: var(--space-12);
}
.site-footer--checkout .site-footer__legal {
  border-top: none;
}

/* TIER 3 — Copyright + legales fine print inline */
.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-5) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .site-footer__legal {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.site-footer__legal p {
  margin: 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.2px;
}
.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}
.site-footer__legal li { list-style: none; }
.site-footer__legal a {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
}
.site-footer__legal a:hover { color: var(--color-paper); }

/* En móvil: legal y links legales más compactos y centrados.
   Invertimos el orden con flex-direction:column-reverse para que el
   "© Aloe Tattoo · Todos los derechos reservados" quede ABAJO DEL TODO,
   debajo de los enlaces Términos/Privacidad/Cookies/Aviso legal.
   Padding-top de la sección legal usa la MISMA unidad (32 px) que
   el padding-bottom del brand y el padding-bottom del footer__main,
   manteniendo el ritmo "32 px antes y después de cada hairline". */
@media (max-width: 767.98px) {
  .site-footer__legal {
    flex-direction: column-reverse;
    padding: var(--space-8) var(--container-pad) var(--space-6);
    gap: var(--space-3);
  }
  .site-footer__legal p {
    font-size: 10.5px;
    letter-spacing: 0.1px;
  }
  .site-footer__legal ul {
    gap: 14px;
  }
  .site-footer__legal a {
    font-size: 10.5px;
  }
}

/* ============================================================
   HERO — fondo editorial full-bleed (producto en la imagen)
   ============================================================ */
.hero {
  position: relative;
  /* Atmósfera gris-azulada matcheada al cristal de la foto. La foto vive
     en el <img> y se funde con este fondo vía mask-image (no en CSS bg
     porque CSS no permite maskear capas individuales de background). */
  background-color: #cdd5dd;
  background-image: linear-gradient(180deg,
    #e2e8ee 0%,
    #cfd7df 55%,
    #b3bdc7 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-block: var(--space-12);
  min-height: clamp(560px, 46vw, 760px);
  display: flex;
  align-items: center;
}
.hero .container { width: 100%; position: relative; z-index: 2; }

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

/* En móvil: composición editorial — titular + CTA + pills sobre la
   imagen del bote como fondo. Velo diagonal (más opaco a la izquierda,
   transparente a la derecha) para que el texto se lea perfecto y el
   bote luzca en el lado derecho. El subtítulo se oculta en móvil. */
@media (max-width: 767.98px) {
  .hero {
    background-image:
      linear-gradient(108deg,
        rgba(238, 242, 247, 0.97) 0%,
        rgba(238, 242, 247, 0.88) 38%,
        rgba(238, 242, 247, 0.55) 62%,
        rgba(238, 242, 247, 0.20) 85%,
        rgba(238, 242, 247, 0.06) 100%),
      url("../img/header/Header_Eraser.png");
    background-position: center, 80% center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    min-height: 600px;
  }
  .hero__subtitle {
    display: none;
  }
  /* Pills más "chip-style" en móvil: fondo blanco translúcido y borde
     suave para que destaquen sobre la imagen de fondo */
  .hero__benefits span {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 32, 18, 0.08);
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    box-shadow: 0 1px 2px rgba(15, 32, 18, 0.04);
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 620px;
}

.hero__eyebrow {
  color: var(--color-aloe-600);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 13px;
}

.hero__title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 9vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--color-ink-900);
  margin: var(--space-1) 0 var(--space-2);
  text-wrap: balance;
}

.hero__title-word {
  display: block;
  /* Optical kerning + smoother edges para tamaños XL */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.hero__title-word--accent {
  background: linear-gradient(95deg, #1a3479 0%, #2563eb 45%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  letter-spacing: -0.05em;
}

.hero__subtitle {
  font-size: 19px;
  font-weight: 600;
  color: var(--color-ink-800);
  line-height: 1.5;
  max-width: 52ch;
}
.hero__subtitle strong {
  font-weight: 800;
  color: var(--color-ink-900);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-800);
  margin-top: var(--space-1);
}
.hero__benefits span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero__benefits svg {
  width: 16px;
  height: 16px;
  color: var(--color-aloe-500);
  stroke-width: 3;
}

/* La foto del producto vive en <img class="hero__media"> con mask-image
   que funde su borde izquierdo en transparente — así el cristal texturizado
   de la foto se desvanece sin frontera dura sobre el degradado de fondo.
   En móvil la ocultamos: usamos el background-image (Sliders4) más adecuado
   al formato vertical. */
/* hero__visual ocupa exactamente la altura del hero y su ancho se
   autoajusta a la proporción natural de la imagen (1911×1083 ≈ 1.76:1).
   Así el bote escala con el ALTO del hero, no con el ancho del viewport. */
.hero__visual {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  z-index: 1;
  pointer-events: none;
}
.hero__media {
  display: block;
  height: 100%;
  width: auto;
  /* Fade: borde izq de la imagen se funde con el gradiente del hero.
     Los stops son % del ancho natural de la imagen (≈1.76×alto). */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 28%,
    rgba(0, 0, 0, 0.55) 44%,
    rgba(0, 0, 0, 0.88) 58%,
    #000 72%);
          mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 28%,
    rgba(0, 0, 0, 0.55) 44%,
    rgba(0, 0, 0, 0.88) 58%,
    #000 72%);
}

@media (min-width: 768px) {
  .hero__visual { display: block; }
}

/* Stagger entrance */
.hero__content > * {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fadeUp 600ms ease-out forwards;
}
.hero__content > *:nth-child(1) { animation-delay: 100ms; }
.hero__content > *:nth-child(2) { animation-delay: 200ms; }
.hero__content > *:nth-child(3) { animation-delay: 300ms; }
.hero__content > *:nth-child(4) { animation-delay: 400ms; }
.hero__content > *:nth-child(5) { animation-delay: 500ms; }
.hero__content > *:nth-child(6) { animation-delay: 600ms; }

@keyframes hero-fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-16);
    min-height: 760px;
  }
  .hero__inner {
    grid-template-columns: minmax(0, 660px);
  }
}

@media (min-width: 1280px) {
  .hero { min-height: 780px; }
}

@media (min-width: 1600px) {
  .hero { min-height: 800px; }
}

@media (min-width: 1920px) {
  .hero { min-height: 800px; }
}

/* ============================================================
   GRIDS
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.product-grid--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .product-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
/* Móvil: gap más ajustado en el grid de 2 cols. El número de columnas
   queda en el valor base (.product-grid--3 → 2 cols hasta 768 px). */
@media (max-width: 767.98px) {
  .product-grid,
  .product-grid--3 {
    gap: 12px;
  }
}

.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

/* ============================================================
   CATEGORY MOSAIC — 1 card grande + 2 stacked, estilo editorial
   ============================================================ */
.category-mosaic {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .category-mosaic {
    grid-template-columns: 11fr 9fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-5);
  }
  .category-mosaic-card--featured {
    grid-row: 1 / span 2;
  }
}

.category-mosaic-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  background: var(--cat-bg, var(--color-bone));
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-ink-900);
  isolation: isolate;
  min-height: 320px;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.category-mosaic-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.category-mosaic-card--featured {
  min-height: 540px;
}

.category-mosaic-card__watermark { display: none; }

/* Imagen pegada al lado derecho de la card. Las imágenes están pre-cropeadas
   a su aspect ratio exacto (1:1 o 3:4) así que basta con object-fit: cover. */
.category-mosaic-card__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 60%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  transition: transform var(--transition-slow);
}
.category-mosaic-card--featured .category-mosaic-card__image {
  width: 100%;
}
.category-mosaic-card--featured:hover .category-mosaic-card__image {
  transform: none;
}

/* Variante full-bg: imagen ocupa toda la card (cuando ya tiene zona vacía
   reservada para el texto en su composición). No necesita --cat-bg. */
.category-mosaic-card--full-bg .category-mosaic-card__image {
  width: 100%;
  object-position: right center;
}
.category-mosaic-card--full-bg .category-mosaic-card__content {
  max-width: 60%;
}
.category-mosaic-card:hover .category-mosaic-card__image {
  transform: scale(1.04);
}

/* Contenido a la izquierda — texto + CTA */
.category-mosaic-card__content {
  position: relative;
  z-index: 3;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 65%;
}
@media (min-width: 1024px) {
  .category-mosaic-card__content {
    padding: var(--space-10);
    max-width: 60%;
  }
  .category-mosaic-card--featured .category-mosaic-card__content {
    max-width: 50%;
  }
}

.category-mosaic-card__phase {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-coral-500);
  margin-bottom: var(--space-2);
}

.category-mosaic-card__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--color-ink-900);
  margin: 0;
}
@media (min-width: 1024px) {
  .category-mosaic-card__title { font-size: 38px; }
  .category-mosaic-card--featured .category-mosaic-card__title { font-size: 56px; }
}

.category-mosaic-card__count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px 7px 7px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 32, 18, 0.08);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: rgba(15, 32, 18, 0.7);
  line-height: 1;
  margin: var(--space-3) 0 0 0;
  font-feature-settings: "tnum" on, "lnum" on;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(15, 32, 18, 0.05);
}
.category-mosaic-card__count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  margin-right: 3px;
  background: linear-gradient(180deg, #1F2937 0%, var(--color-ink-900) 100%);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.18);
}
.category-mosaic-card__count-sep {
  color: rgba(15, 32, 18, 0.55);
  font-weight: 700;
  font-size: 14px;
  margin-inline: 1px;
}
.category-mosaic-card__count-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-coral-500);
  letter-spacing: -0.01em;
}

.category-mosaic-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-4);
  padding: 10px 18px;
  background: var(--color-ink-900);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.category-mosaic-card__cta i,
.category-mosaic-card__cta svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
.category-mosaic-card:hover .category-mosaic-card__cta {
  background: var(--color-coral-500);
}

/* Swap del título de la card "Durante" (FASE 02): el copy original
   en desktop es "Productos durante la sesión" (aprobado por cliente);
   en móvil queremos "Durante el tatuaje" para mantener el paralelismo
   con las otras dos cards ("Prepara el tatuaje" / "Cuida el tatuaje").
   Defaults muestran el desktop, la @media móvil de abajo invierte. */
.category-mosaic-card__title .title--desktop { display: inline; }
.category-mosaic-card__title .title--mobile  { display: none; }

/* ============================================================
   MOBILE — CATEGORY MOSAIC (≤ 767.98px)
   - Las 3 cards a la misma altura (la featured "Durante" perdía sentido
     visual con el doble de alto cuando todas apilan en 1 columna).
   - Orden visual Fase 01 → 02 → 03 (DOM: featured Durante, Antes, Después)
     vía CSS order. El DOM se mantiene para SEO y accesibilidad.
   - Tipografía y CTA un punto más compactos para que el texto no se
     desborde sobre la imagen de fondo en 393 px.
   - Title de FASE 02 conmuta a la versión corta ("Durante el tatuaje").
   ============================================================ */
@media (max-width: 767.98px) {
  .category-mosaic-card__title .title--desktop { display: none; }
  .category-mosaic-card__title .title--mobile  { display: inline; }
  .category-mosaic-card,
  .category-mosaic-card--featured {
    min-height: 280px;
  }

  /* Reordenar visualmente: 1=Antes, 2=Durante, 3=Después */
  .category-mosaic .category-mosaic-card:nth-child(1) { order: 2; } /* Durante */
  .category-mosaic .category-mosaic-card:nth-child(2) { order: 1; } /* Antes */
  .category-mosaic .category-mosaic-card:nth-child(3) { order: 3; } /* Después */

  /* Contenido más compacto */
  .category-mosaic-card__content {
    padding: var(--space-6);
    max-width: 62%;
    gap: 4px;
  }
  .category-mosaic-card--full-bg .category-mosaic-card__content {
    max-width: 62%;
  }
  .category-mosaic-card__title {
    font-size: 26px;
    line-height: 1.0;
  }
  .category-mosaic-card__count {
    font-size: 11px;
    padding: 6px 11px 6px 6px;
    margin-top: 6px;
  }
  .category-mosaic-card__count-badge {
    min-width: 24px;
    height: 22px;
    font-size: 11px;
  }
  .category-mosaic-card__cta {
    margin-top: var(--space-3);
    padding: 9px 14px;
    font-size: 10.5px;
    letter-spacing: 1.2px;
  }
  .category-mosaic-card__cta i,
  .category-mosaic-card__cta svg {
    width: 12px;
    height: 12px;
  }
}

/* ============================================================
   SHOP LAYOUT (sidebar + grid)
   ============================================================ */
.shop {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block: var(--space-8);
}
@media (min-width: 1024px) {
  .shop {
    grid-template-columns: 240px 1fr;
    gap: var(--space-10);
  }
}

.shop__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (max-width: 1023.98px) {
  .shop__sidebar {
    display: none;
  }
  .shop__sidebar.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--color-paper);
    z-index: var(--z-modal);
    overflow-y: auto;
    padding: var(--space-5);
  }
}

.filter-group {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-5);
}
.filter-group__title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.filter-group__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shop__main { min-width: 0; }

.shop__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.shop__count { font-size: 13px; color: var(--color-text-muted); }
.shop__sort {
  padding: 8px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--color-paper);
}

.shop__filter-toggle {
  display: inline-flex;
}
@media (min-width: 1024px) {
  .shop__filter-toggle { display: none; }
}

/* ============================================================
   SHOP-BAR — barra sticky con tabs + pills (estilo retail)
   Se ancla bajo el site-header al hacer scroll
   ============================================================ */
.shop-head {
  margin-block: var(--space-4) var(--space-6);
}
.shop-head h1 {
  font-size: 36px;
  letter-spacing: -0.022em;
  margin-bottom: 6px;
}
@media (min-width: 1024px) {
  .shop-head h1 { font-size: 44px; }
}

.shop-bar {
  position: sticky;
  top: var(--header-h-scrolled);
  z-index: calc(var(--z-sticky) - 10);
  background: var(--color-paper);
  border-block: 1px solid var(--color-border-subtle);
  margin-bottom: 0;
}

/* Fila única: tabs de categorías + selector de orden */
.shop-bar__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.shop-bar__tabs {
  list-style: none;
  display: flex;
  gap: var(--space-6);
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.shop-bar__tabs::-webkit-scrollbar { display: none; }
.shop-bar__tabs li { flex-shrink: 0; }

/* Fila secundaria: chips de tipo de producto. Multi-select. Scroll horizontal
   en mobile. Clica para alternar; varios pueden estar activos a la vez (OR). */
.shop-bar__types {
  display: flex;
  gap: 6px;
  /* 14/14: pills centrados entre las dos líneas de la banda (antes
     12/16 los dejaba 4px pegados a la de arriba) — 2026-09-08. */
  padding: 14px 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--color-border-subtle);
}
.shop-bar__types::-webkit-scrollbar { display: none; }

.shop-type-chip {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.shop-type-chip__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.shop-type-chip__label {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}
.shop-type-chip:hover .shop-type-chip__label {
  border-color: var(--color-aloe-500);
  color: var(--color-text-primary);
}
.shop-type-chip__input:checked + .shop-type-chip__label {
  background: var(--color-aloe-500);
  border-color: var(--color-aloe-500);
  color: var(--color-paper);
}
.shop-type-chip__input:focus-visible + .shop-type-chip__label {
  outline: 2px solid var(--color-aloe-500);
  outline-offset: 2px;
}

.shop-bar__tab {
  position: relative;
  background: transparent;
  border: 0;
  padding: 24px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.shop-bar__tab:hover {
  color: var(--color-text-primary);
}
.shop-bar__tab.is-active {
  color: var(--color-text-primary);
  font-weight: 700;
}
.shop-bar__tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-ink-900);
}

.shop-bar__sort {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  padding: 12px 38px 12px 16px;
  border: 1px solid var(--color-ink-900);
  border-radius: var(--radius-pill);
  outline: none;
  font-size: 13.5px;
  font-weight: 600;
  background-color: var(--color-paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23030712' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}
.shop-bar__sort:hover {
  background-color: var(--color-bone);
}
.shop-bar__sort:focus,
.shop-bar__sort:focus-visible,
.shop-bar__sort:active {
  outline: none;
  box-shadow: none;
  border-color: var(--color-ink-900);
}

/* ============================================================
   SHOP FILTERS DRAWER — panel lateral con todos los filtros
   Se abre al hacer click en "Filtrar y ordenar"
   ============================================================ */
.shop-filters-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: var(--color-paper);
  z-index: var(--z-modal);
  padding: var(--space-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  box-shadow: -8px 0 32px rgba(15, 32, 18, 0.08);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
}
.shop-filters-drawer:not([hidden]) {
  transform: translateX(0);
}
.shop-filters-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.shop-filters-drawer__head h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.shop-filters-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 32, 18, 0.45);
  z-index: calc(var(--z-modal) - 1);
  cursor: pointer;
}

/* ============================================================
   PDP LAYOUT
   ============================================================ */
.pdp {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  /* Padding-top reducido: el breadcrumb ya aporta su propio padding-bottom
     (var(--space-4)) y sumarle var(--space-6) creaba un hueco grande
     entre la miga de pan y la card del producto. */
  padding-block: 4px var(--space-12);
}

/* Breadcrumb en la PDP: 4px de margen superior extra para separar
   ligeramente la miga de pan del header sticky. Solo aplica aquí. */
.breadcrumb--pdp {
  margin-top: 4px;
}
@media (min-width: 1024px) {
  .pdp {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-12);
  }
}

.pdp__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .pdp__gallery {
    grid-template-columns: 80px 1fr;
  }
}
.pdp__gallery-thumbs {
  display: flex;
  gap: var(--space-2);
  order: 2;
}
@media (min-width: 768px) {
  .pdp__gallery-thumbs {
    flex-direction: column;
    order: 1;
  }
}
.pdp__gallery-thumbs button {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  flex-shrink: 0;
}
.pdp__gallery-thumbs button:hover { border-color: var(--color-ink-400); }
.pdp__gallery-thumbs button.is-active { border-color: var(--color-aloe-500); border-width: 2px; }
.pdp__gallery-thumbs img { max-width: 100%; max-height: 100%; object-fit: contain; }

.pdp__gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
  order: 1;
  overflow: hidden;
}
@media (min-width: 768px) {
  .pdp__gallery-main { order: 2; }
}
.pdp__gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Escala fina por SKU (image_scale_pdp) vía CSS var — producto.php la
   inyecta como --pdp-scale; en móvil se capa con min() para no recortar. */
.pdp__gallery-main img {
  transform: scale(var(--pdp-scale, 1));
  transform-origin: center;
}

/* La maqueta original tenía .pdp__gallery (wrapper con thumbs + main) y
   .pdp__gallery-main usaba order:2 dentro de ese wrapper. Como ahora la
   PDP en producto.php usa .pdp__gallery-main directo bajo .pdp (sin
   thumbs), forzamos order:0 para que vuelva a estar a la izquierda. */
@media (min-width: 768px) {
  .pdp > .pdp__gallery-main { order: 0; }
}

/* Selector de variantes de capacidad — pills clickables que llevan a la
   PDP de la otra capacidad del mismo producto. Solo se renderiza cuando
   el SKU tiene >1 hermano (mismo nombre, mismo tier unit/expositor). */
.pdp__variants {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.pdp__variants-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pdp__variants-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pdp__variant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 9px 16px;
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}
a.pdp__variant:hover {
  border-color: var(--color-aloe-500);
  background: rgba(36, 74, 41, 0.04);
}
.pdp__variant--active {
  background: var(--color-aloe-500);
  border-color: var(--color-aloe-500);
  color: var(--color-paper);
  cursor: default;
  box-shadow: 0 2px 6px rgba(36, 74, 41, 0.20);
}

/* ============================================================
   PDP — TABS DE INFORMACIÓN (Descripción, Modo de uso, Envío)
   ============================================================ */
.pdp-tab-content {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.pdp-tab-content p strong { color: var(--color-text-primary); }

.pdp-section__title {
  margin: var(--space-4) 0 var(--space-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* Lista de "Principales beneficios" / "Contenido del pack" — bullets con
   check verde aloe a la izquierda, título en bold y cuerpo descriptivo. */
.pdp-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pdp-benefits__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.pdp-benefits__item:last-child { border-bottom: 0; }

/* Capitaliza automáticamente la primera letra del cuerpo del beneficio:
   los textos del cliente vienen en minúscula (escritos como continuación
   del título tras dos puntos), pero al renderizarse en línea separada
   queremos que arranquen con mayúscula sin tocar la BD. */
.pdp-benefits__text span::first-letter {
  text-transform: uppercase;
}
.pdp-benefits__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  color: var(--color-aloe-500);
}
.pdp-benefits__check svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
.pdp-benefits__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.pdp-benefits__text strong { color: var(--color-text-primary); }
.pdp-benefits__text span { color: var(--color-text-secondary); }

/* En desktop (columna de ~536px) cada cuerpo de beneficio va en UNA
   sola línea: los textos se redactan para caber y, como red de
   seguridad, se trunca con elipsis. En pantallas menores la columna
   encoge demasiado y se permite el salto de línea normal. */
@media (min-width: 1280px) {
  .pdp-benefits__text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Pasos del Modo de uso — lista numerada con énfasis en la acción. */
.pdp-usage-steps {
  list-style: decimal;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
.pdp-usage-steps li strong {
  color: var(--color-text-primary);
  margin-right: 4px;
}

/* === Tab Descripción: layout 2 columnas (texto + imagen lateral) ===
   Se activa solo cuando producto.php detecta una foto en
   assets/img/descripcion/{slug}.jpg y emite la clase .pdp-tab-cols.
   La imagen del cliente ya trae composición circular sobre fondo
   blanco — no la metemos en una caja con bordes ni fondo: queda más
   editorial. Imagen y texto se centran verticalmente para que el
   bloque respire bien sea cual sea la longitud del texto. */
.pdp-tab-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .pdp-tab-cols {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-10);
  }
}
.pdp-tab-cols__text { min-width: 0; }

/* Header del bloque (eyebrow + h2) — clon exacto de .cart-suggest__head
   para que el gap entre eyebrow y título sea idéntico (var(--space-2)
   limpio, sin que el gap de .pdp-tab-content se sume). */
.pdp-tab-cols__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  align-items: flex-start;
  margin: 0;
}

/* Título del bloque de descripción — mismo lenguaje tipográfico que
   el h2 de "Productos que combinan con tu rutina" (.cart-suggest__head)
   para que las dos secciones de la PDP rimen visualmente. */
.pdp-tab-cols__title {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}

/* Eyebrow encima del título — clon exacto del "COMPLETA TU PEDIDO"
   del cart-suggest (color rose-500, weight 700, tracking 0.16em).
   Sin margin: el gap del .pdp-tab-cols__head provee la separación. */
.pdp-tab-cols__eyebrow {
  margin: 0;
  color: var(--color-rose-500);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Imagen "libre" — sin contenedor con fondo ni border-radius. Va con
   un halo radial verde aloe muy sutil que la integra con el brand
   (la composición original tiene fondo blanco, sin halo se ve aislada).
   La imagen mantiene proporción nativa para no romper su composición
   circular. */
.pdp-tab-cols__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-4);
}
.pdp-tab-cols__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(36, 74, 41, 0.06) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
}
.pdp-tab-cols__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-width: 420px;
  display: block;
}

/* === Compactación vertical del bloque de tabs en la PDP ============
   La section--sm del PDP traía padding-block muy generoso (space-12 /
   space-16) y la cart-suggest siguiente sumaba otro margin-top space-16
   + padding-block. Resultado: ~250px de hueco visual en ciertos tabs.
   Reducimos a aprox. 1/3 sin tocar otras secciones del proyecto. */
.section--sm[data-tabs] {
  padding-block: var(--space-6);
}
@media (min-width: 1024px) {
  .section--sm[data-tabs] {
    padding-block: var(--space-8);
  }
}
.section--sm[data-tabs] + .cart-suggest {
  margin-top: var(--space-6);
}

/* === Tab Cómo utilizarlo: párrafo introductorio antes de los pasos
   Alineado a la izquierda (no centrado) para mantener el ritmo de
   lectura típico de descripción → instrucciones. Sin max-width: cabe
   en una sola línea aprovechando el ancho del contenedor de los tabs. */
.pdp-usage-intro {
  margin: 0 0 var(--space-6);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  text-align: left;
}

/* === Tab Descripción: lead paragraph editorial =====================
   El primer párrafo se renderiza en mayor tamaño y color primario para
   crear jerarquía visual y "agarrar" al lector. El resto sigue el ritmo
   normal de pdp-tab-content p. */
.pdp-tab-content__lead {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--color-text-primary) !important;
  font-weight: 500;
  margin-bottom: var(--space-4) !important;
}
@media (min-width: 768px) {
  .pdp-tab-content__lead { font-size: 19px !important; }
}

/* === Tab Beneficios: lista con icono semántico =====================
   Cada beneficio es una fila con icono Lucide en círculo verde, título
   en bold y cuerpo en color secundario, separadas por línea fina. */
.pdp-benefits .pdp-benefits__check {
  background: rgba(36, 74, 41, 0.10);
  width: 44px;
  height: 44px;
}
.pdp-benefits .pdp-benefits__check svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

/* Modificador: 2 columnas en desktop. column-gap separa visualmente
   las dos columnas, así cada border-bottom termina al final de su
   item dejando dos líneas independientes (una por columna).
   Importante: definimos column-gap y row-gap por separado, NO usamos
   `gap: 0` shorthand porque sobrescribiría el column-gap. */
@media (min-width: 768px) {
  .pdp-benefits--cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
    row-gap: 0;
  }
  .pdp-benefits--cols .pdp-benefits__item:nth-last-child(1),
  .pdp-benefits--cols .pdp-benefits__item:nth-last-child(2) {
    border-bottom: 0;
  }
}

/* === Tab Contenido (packs): grid 3x1 con foto del producto ==========
   Solo se renderiza para SKUs con is_pack=1 y pack_contents poblado.
   Cada item es una columna: foto del producto en la parte superior,
   título (label + capacidad) y descripción debajo. Las imágenes vienen
   sobre fondo blanco con un sutil halo radial verde aloe (mismo lenguaje
   visual que .pdp-tab-cols__media para mantener cohesión). */
.pdp-pack-contents__intro {
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.6;
  /* sin max-width: el intro ocupa todo el ancho del tab para que no
     se corte la frase a media línea. */
  margin: 0 0 var(--space-4);
}
@media (min-width: 768px) {
  .pdp-pack-contents__intro {
    font-size: 17px;
    margin-bottom: var(--space-4);
  }
}
.pdp-pack-contents {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .pdp-pack-contents {
    grid-template-columns: repeat(3, 1fr);
    gap: 0; /* el aire entre columnas lo aporta el padding del propio item */
  }
}
.pdp-pack-contents__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Sin gap: el espaciado vertical lo controlan los márgenes propios
     de cada bloque (capacity / title / body) para tenerlos pegados
     a la imagen sin huecos genéricos. */
  gap: 0;
}
/* Línea vertical divisoria entre columnas (solo desktop, no después
   del último item). Misma lógica visual que el separador horizontal
   del tab Beneficios pero rotado 90°. */
@media (min-width: 768px) {
  .pdp-pack-contents__item {
    padding: 0 var(--space-6);
  }
  .pdp-pack-contents__item + .pdp-pack-contents__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: var(--color-border, rgba(0, 0, 0, 0.08));
  }
}
.pdp-pack-contents__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}
.pdp-pack-contents__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(36, 74, 41, 0.10), transparent 65%);
  pointer-events: none;
}
.pdp-pack-contents__media img {
  position: relative;
  max-width: 95%;
  max-height: 95%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.pdp-pack-contents__media svg {
  width: 96px;
  height: 96px;
  color: var(--color-text-muted);
  stroke-width: 1.5;
}
/* La capacidad reusa la pill .product-card__capacity (mismo lenguaje
   visual que las cards de tienda y el visor PDP). Forzamos `align-self`
   a center porque la pill base trae `align-self: flex-start` para las
   cards y aquí queremos centrarla respecto al título y descripción.
   Margen superior negativo grande (~32 px) para que la pill se monte
   sobre la base de la imagen como un "label". El position+z-index
   garantiza que quede por encima del media (que tiene overflow:hidden
   y crea su propio stacking context). */
.pdp-pack-contents__capacity {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-top: -32px;
  margin-bottom: var(--space-3);
}
.pdp-pack-contents__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
}
.pdp-pack-contents__body {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 32ch;
}

/* === Tab Cómo utilizarlo: timeline horizontal ======================
   En desktop, los 4 pasos se reparten en columnas conectadas por una
   línea horizontal continua que pasa detrás de los círculos numerados.
   En móvil, vertical con conector vertical. */
.pdp-usage-timeline {
  list-style: none;
  padding: 0;
  /* Aire arriba y abajo para que el timeline (01–04) respire entre la
     intro y la caja de aviso. */
  margin: var(--space-16) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  position: relative;
}
@media (min-width: 768px) {
  .pdp-usage-timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  /* Línea conectora horizontal: arranca al centro del primer número
     y termina al centro del último. 22px = mitad del círculo.
     La línea es verde aloe diluido para no robar protagonismo a los
     círculos numerados. */
  .pdp-usage-timeline::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: rgba(36, 74, 41, 0.18);
    z-index: 0;
  }

  /* Variante 3 columnas: para productos con >4 pasos (ej. stencil
     eraser con 6). 3x2 evita filas con celdas vacías. La línea
     horizontal del contenedor se desactiva (cruzaría dos filas) y
     en su lugar se pinta una mini-línea entre cada par de círculos
     usando ::before en cada step (excepto el primero de cada fila). */
  .pdp-usage-timeline--cols-3 {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-8);
  }
  .pdp-usage-timeline--cols-3::before {
    display: none;
  }
  .pdp-usage-timeline--cols-3 .pdp-usage-timeline__step::before {
    content: '';
    position: absolute;
    top: 22px;
    left: -50%;
    right: 50%;
    height: 2px;
    background: rgba(36, 74, 41, 0.18);
    z-index: 0;
  }
  /* Items 1 y 4 (primeros de cada fila): sin línea a la izquierda */
  .pdp-usage-timeline--cols-3 .pdp-usage-timeline__step:nth-child(3n+1)::before {
    display: none;
  }
}

.pdp-usage-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .pdp-usage-timeline__step { align-items: center; text-align: center; }
}

.pdp-usage-timeline__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-aloe-500);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 4px var(--color-bg);
}

.pdp-usage-timeline__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 28ch;
}
.pdp-usage-timeline__text strong {
  display: block;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

/* Aviso de seguridad al final del tab "Cómo utilizarlo".
   Caja sutil con icono de alerta. No grita, solo destaca. */
.pdp-usage-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-aloe-500);
  background: rgba(36, 74, 41, 0.06);
  border-radius: 0 8px 8px 0;
}
.pdp-usage-warning__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-aloe-500);
  margin-top: 2px;
}
.pdp-usage-warning p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* Variante crítica: alerta destacada en rosa rose-500 (mismo que el
   eyebrow de marca) con texto en negrita. Reservada para avisos
   imprescindibles que NO deben pasarse por alto, ej. "no apto para
   diluir tintas". Se renderiza ANTES del usage_warning normal. */
.pdp-usage-warning--critical {
  border-left-color: var(--color-rose-500);
  background: rgba(225, 29, 72, 0.06);
}
.pdp-usage-warning--critical .pdp-usage-warning__icon {
  color: var(--color-rose-500);
}
.pdp-usage-warning--critical p {
  color: var(--color-text-primary);
}

/* Sello flotante sobre la imagen del producto (top-left).
   Mismo lenguaje visual que los badges de las cards (.product-card__media
   .badge) — pill blanca con sombra sutil, icono + texto en mayúsculas. */
.pdp__gallery-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px 8px 11px;
  background: var(--color-paper);
  color: var(--color-aloe-700, var(--color-aloe-500));
  border-radius: var(--radius-pill, 999px);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
.pdp__gallery-badge svg {
  width: 14px;
  height: 14px;
  color: var(--color-aloe-500);
  stroke-width: 2.2;
}

.pdp__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pdp__name {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .pdp__name { font-size: 44px; } }
.pdp__short { color: var(--color-text-secondary); font-size: 16px; }

/* Capacidad como chip premium en la PDP — coherente con la card de tienda.
   Se posiciona arriba del nombre del producto, mismo lenguaje visual. */
.pdp__capacity {
  align-self: flex-start;
  margin-bottom: var(--space-2);
}

/* Descripción rápida bajo el rating: reservamos 2 líneas mínimo para que
   todos los productos tengan la misma altura de bloque, aunque la
   descripción concreta sea corta. */
.pdp__description {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.5;
  min-height: calc(1.5em * 2);
}
.pdp__rating-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.pdp__rating-row a {
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: underline;
}

.pdp__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-top: var(--space-5);
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}
.pdp__price-row .legal {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.pdp__cart-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
  align-items: stretch;
}

/* Qty stepper en la PDP: igualamos altura al btn--lg (52px) y ampliamos
   ancho para compensar visualmente con el botón de añadir, que es 1fr.
   Sin esto el qty queda enano al lado del botón gigante. */
.pdp__cart-row .qty {
  height: 52px;
}
.pdp__cart-row .qty__btn {
  width: 48px;
  font-size: 18px;
}
.pdp__cart-row .qty__btn svg {
  width: 16px;
  height: 16px;
}
.pdp__cart-row .qty__value {
  width: 56px;
  font-size: 17px;
}
@media (max-width: 767.98px) {
  .pdp__cart-row {
    grid-template-columns: 1fr;
  }
  .pdp__cart-row .qty { justify-self: start; }
}

.pdp__trust { margin-top: var(--space-4); }
.pdp__trust .trust-strip { justify-content: flex-start; }

.pdp__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-size: 14px;
}
.pdp__features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}
.pdp__features svg {
  width: 16px;
  height: 16px;
  color: var(--color-aloe-500);
  flex-shrink: 0;
}

/* Beneficios del buy box en grid 2×2 — tiles con el icono del beneficio
   en chip blanco sobre fondo suave. Sustituye a .pdp__features cuando el
   producto tiene key_benefits (rediseño PDP 2026-08-11). */
.pdp__benefits-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
}
.pdp__benefits-grid li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  min-width: 0; /* permite que el <strong> pueda encogerse dentro del grid */
}
.pdp__benefits-grid-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--color-paper);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.pdp__benefits-grid-ico svg {
  width: 17px;
  height: 17px;
  color: var(--color-aloe-500);
  stroke-width: 1.75;
}
.pdp__benefits-grid strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
  /* Cada beneficio SIEMPRE en una sola línea: los títulos se redactan
     a ≤24 caracteres y, como red de seguridad, se trunca con elipsis
     en lugar de saltar a una segunda línea. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 479.98px) {
  .pdp__benefits-grid { grid-template-columns: 1fr; }
}

/* Claims de formulación como píldoras bajo el título del tab
   Descripción (Sin perfume · Vegano · Orgánico…). */
.pdp-tab-claims {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
}
.pdp-tab-claims li {
  padding: 6px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill, 999px);
  color: var(--color-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

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

/* Hero del carrito: título + barra de progreso envío gratis */
.cart-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .cart-hero {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
  }
}
.cart-hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cart-hero__title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.cart-hero__count {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}
.cart-hero__shipping {
  flex: 1;
  max-width: 480px;
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* El display:flex de arriba ganaba en specificity al [hidden]{display:none}
   por defecto del navegador, así que el bloque se quedaba visible al vaciar
   el carrito. Override explícito del atributo. */
.cart-hero__shipping[hidden] { display: none; }

/* Pre-render del estado del carrito vía clase en <html> (set por inline
   script en carrito.php que lee localStorage de forma síncrona). Evita
   FOUC sin tener que ocultar las sugerencias. JS posterior puede seguir
   sobreescribiendo via style.display si el carrito cambia en runtime. */
.cart-state-empty #cart-full { display: none; }
.cart-state-full  #cart-empty { display: none; }
.cart-hero__shipping-text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--color-text-primary);
}
.cart-hero__shipping-text svg {
  width: 18px;
  height: 18px;
  color: var(--color-aloe-600);
  flex-shrink: 0;
}
.cart-hero__shipping-bar {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ECEFF2 0%, #F4F6F8 100%);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(15, 32, 18, 0.06);
}
.cart-hero__shipping-bar span {
  display: block;
  height: 100%;
  position: relative;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #2F5C36 0%,
    #4A7E50 35%,
    #6BA56F 60%,
    #4A7E50 85%,
    #2F5C36 100%);
  background-size: 200% 100%;
  animation: shipping-bar-shift 4s linear infinite;
  transition: width 700ms cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}
/* Brillo translúcido que recorre la barra de izquierda a derecha. */
.cart-hero__shipping-bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%);
  transform: translateX(-100%);
  animation: shipping-bar-shimmer 2.4s ease-in-out infinite;
}
@keyframes shipping-bar-shift {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
@keyframes shipping-bar-shimmer {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(220%); }
}
/* Celebración cuando llegas a 35€: gradient más vivo + halo pulsante. */
.cart-hero__shipping.is-complete .cart-hero__shipping-bar span {
  background: linear-gradient(90deg,
    #2F5C36 0%,
    #6BA56F 50%,
    #C9A24E 100%);
  animation: shipping-bar-shift 4s linear infinite,
             shipping-bar-pulse 1.6s ease-in-out infinite;
}
@keyframes shipping-bar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107, 165, 111, 0.0); }
  50%      { box-shadow: 0 0 14px 3px rgba(107, 165, 111, 0.55); }
}

/* Layout dos columnas: lista + resumen */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block: 0 var(--space-12);
}
@media (min-width: 1024px) {
  .cart-layout {
    grid-template-columns: 1fr 400px;
    gap: var(--space-8);
    align-items: start;
  }
}

.cart-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cart-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cart-item:hover {
  border-color: var(--color-border-default);
  box-shadow: 0 6px 20px rgba(15, 32, 18, 0.04);
}
@media (min-width: 768px) {
  .cart-item {
    grid-template-columns: 112px 1fr;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
  }
}
.cart-item__media {
  width: 88px;
  height: 88px;
  background: var(--color-bone);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
@media (min-width: 768px) {
  .cart-item__media { width: 112px; height: 112px; }
}
.cart-item__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cart-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.cart-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.cart-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-item__name {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}
.cart-item__format {
  font-size: 13px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.cart-item__price {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-primary);
  font-feature-settings: "tnum" on;
  white-space: nowrap;
  flex-shrink: 0;
}
.cart-item__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}
.cart-item__remove {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.cart-item__remove:hover {
  color: var(--color-rust-500);
  background: var(--color-bone);
}
.cart-item__remove svg { width: 14px; height: 14px; }

/* Resumen del pedido */
.cart-summary {
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: calc(var(--header-h-scrolled) + var(--space-4));
  box-shadow: 0 4px 24px rgba(15, 32, 18, 0.04);
}
.cart-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  gap: var(--space-3);
}
.cart-summary__head h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.cart-summary__pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bone);
  border: 1px solid var(--color-border-subtle);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.cart-summary__rows {
  display: flex;
  flex-direction: column;
  background: var(--color-bone);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-3);
  font-size: 14px;
  color: var(--color-text-secondary);
  gap: var(--space-3);
  border-bottom: 1px dashed var(--color-border-subtle);
}
.cart-summary__row:last-child { border-bottom: 0; }
.cart-summary__row strong {
  font-family: 'Inter Tight', sans-serif;
  color: var(--color-text-primary);
  font-weight: 700;
  font-size: 16px;
  font-feature-settings: "tnum" on;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
/* GRATIS pill cuando el envío es gratis */
.cart-summary__row strong.is-free {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-aloe-50);
  color: var(--color-aloe-700);
  padding: 5px 11px 5px 9px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cart-summary__row strong.is-free::before {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--color-aloe-600);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}

/* Total con tratamiento elevado: fondo bone, mayor presencia */
.cart-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block: var(--space-2) 0;
  margin-inline: calc(var(--space-6) * -1);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bone);
  border-block: 1px solid var(--color-border-subtle);
  font-feature-settings: "tnum" on;
}
.cart-summary__total-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cart-summary__total-label span {
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.cart-summary__total-label small {
  font-size: 11.5px;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
.cart-summary__total-amount {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.cart-summary__keep {
  text-decoration: none;
}

.cart-summary__trust {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cart-summary__trust li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.cart-summary__trust svg {
  width: 16px;
  height: 16px;
  color: var(--color-aloe-600);
  flex-shrink: 0;
}
.cart-summary__trust strong { color: var(--color-text-primary); font-weight: 600; }

/* Estado vacío */
.cart-empty {
  text-align: center;
  padding: var(--space-16) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.cart-empty__icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-bone);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.cart-empty__icon svg { width: 40px; height: 40px; }

/* Sección "Completa tu pedido" */
.cart-suggest {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-12);
}
.cart-suggest__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  text-align: left;
  align-items: flex-start;
}
.cart-suggest__head .eyebrow {
  color: var(--color-aloe-600);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
}
.cart-suggest__head h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ============================================================
   CART SUMMARY · cupón genérico (justo antes del total)
   ============================================================ */
.cart-summary__coupon {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.cart-summary__coupon .btn {
  flex-shrink: 0;
  height: 44px;
  font-weight: 600;
}
.cart-summary__coupon .field__input {
  font-size: 13.5px;
  height: 44px;
  background: var(--color-paper);
}
.cart-summary__coupon .field__input-wrapper:focus-within {
  border-radius: var(--radius-md);
}
.cart-summary__coupon .field__icon-left {
  color: var(--color-text-muted);
}

/* ============================================================
   AUTH MODAL — login / recuperar contraseña / signup
   ============================================================ */
.auth-link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-aloe-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.auth-link:hover { color: var(--color-aloe-600); }

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.auth-modal[hidden] { display: none; }
.auth-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.auth-modal.is-open .auth-modal__overlay { opacity: 1; }

.auth-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: 0 30px 80px rgba(10, 20, 12, 0.32),
              0 4px 16px rgba(10, 20, 12, 0.18);
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
.auth-modal.is-open .auth-modal__panel { transform: translateY(0) scale(1); opacity: 1; }

/* Variante "página" del panel de auth (login.php). Reusa el mismo
   contenido (.auth-modal__view, __head, __form, etc.) pero sin la
   animación de apertura modal y con un sombreado más suave. */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) 0;
  min-height: calc(100vh - 360px);
}
.auth-page__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: 0 12px 40px rgba(10, 20, 12, 0.10),
              0 2px 8px rgba(10, 20, 12, 0.06);
  border: 1px solid var(--color-border-subtle);
}
.auth-feedback {
  margin: var(--space-2) 0 calc(-1 * var(--space-2));
}

/* === cuenta.php — área privada con secciones editables === */
.cuenta-panel { max-width: 720px; }

.cuenta-hello {
  text-align: left;
  margin-bottom: var(--space-8);
}
.cuenta-hello h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.cuenta-hello p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* Cada bloque del perfil va separado por un divider sutil. El primero
   no lleva línea superior para que pegue con el saludo. */
.cuenta-section__title {
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.cuenta-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cuenta-form .auth-feedback { margin: 0; }
.cuenta-form__actions {
  display: flex;
  justify-content: flex-end;
}

.cuenta-empty {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}
.cuenta-empty i { width: 28px; height: 28px; opacity: 0.6; }
.cuenta-empty p { margin: var(--space-1) 0; }
.cuenta-empty p:first-of-type { margin-top: var(--space-2); color: var(--color-text-secondary); }

.cuenta-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
@media (max-width: 540px) {
  .cuenta-actions { grid-template-columns: 1fr; }
}

/* === cuenta.php — paneles, status pills, mini cards === */

/* (Los modificadores .order-status--ok/info/warn/err se declaran
   DESPUÉS de .order-card__status para ganar la cascada. Ver más abajo.) */

/* Wishlist — mini cards más compactas que las del catálogo */
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.wishlist-card {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}
.wishlist-card:hover { box-shadow: var(--shadow-sm); }
.wishlist-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-secondary);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wishlist-card__media img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.wishlist-card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wishlist-card__brand {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  font-weight: 600;
}
/* Pill de capacidad — reusa .product-card__capacity (mismo lenguaje
   visual que las cards de tienda y el buscador). Aquí la encogemos un
   poco para no robar foco al título. */
.wishlist-card__capacity {
  align-self: flex-start;
  padding: 3px 9px;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-width: 1px;
  margin-bottom: 2px;
}
.wishlist-card__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wishlist-card__name a { color: inherit; text-decoration: none; }
.wishlist-card__name a:hover { color: var(--color-aloe-700); }
/* Descripción corta bajo el título — la misma `description` que se
   muestra en las cards de tienda. Sin truncar: que se vea entera
   aunque ocupe varias líneas. Color secundario para no competir
   con el título. */
.wishlist-card__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin: 4px 0 2px;
}
.wishlist-card__price {
  font-weight: 700;
  font-feature-settings: "tnum" on;
  margin-top: 2px;
}
.wishlist-card__actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.wishlist-card__actions .btn--primary { flex: 1; }

/* === Order cards (cuenta.php — Resumen y Mis pedidos) === */
.order-card-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.order-card {
  position: relative;
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.order-card:hover {
  border-color: var(--color-aloe-300, #B8D4A8);
  box-shadow: 0 8px 24px rgba(15, 32, 18, 0.06),
              0 2px 6px rgba(15, 32, 18, 0.04);
  transform: translateY(-1px);
}

.order-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.order-card__id {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  font-feature-settings: "tnum" on;
  line-height: 1.2;
  /* El ID ahora es un <a> al detalle del pedido — quitamos los estilos
     por defecto del enlace para que se siga viendo idéntico al antiguo
     <div>: block para que la fecha caiga debajo (no a la derecha del
     ID), sin underline, color heredado, hover sutil. width:fit-content
     para que el área clickable y el underline solo cubran el texto. */
  display: block;
  width: fit-content;
  text-decoration: none;
  margin-bottom: 4px;
  transition: color var(--transition-fast);
}
.order-card__id:hover,
.order-card__id:focus-visible {
  color: var(--color-aloe-700, #1f3f24);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}
.order-card__date {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.order-card__date svg { width: 14px; height: 14px; opacity: 0.8; }

/* .order-card__status + variantes .order-status--* + dot animado:
   MOVIDOS a components.css (2026-07-15) — los usa también el panel
   admin, que no carga layouts.css. */

.order-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Thumbs apilados — círculos con foto del producto, ligeramente
   superpuestos como avatares de Slack/GitHub. */
.order-card__thumbs {
  display: flex;
  align-items: center;
  /* Es un <a> al detalle del pedido — quitamos los estilos por defecto
     del enlace para que se vea idéntico al antiguo <div>, con un
     micro-lift del thumb principal en hover/focus que invita al click. */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.order-card__thumbs:hover .order-card__thumb:first-child,
.order-card__thumbs:focus-visible .order-card__thumb:first-child {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 32, 18, 0.14);
}
.order-card__thumbs:focus-visible {
  outline: 2px solid var(--color-aloe-600, #244a29);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}
.order-card__thumb,
.order-card__thumb-more {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--color-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -16px;
  box-shadow: 0 4px 12px rgba(15, 32, 18, 0.08);
}
.order-card__thumb:first-child,
.order-card__thumb-more:first-child { margin-left: 0; }
.order-card__thumb {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F8F2 100%);
  padding: 12px;
  overflow: hidden;
}
.order-card__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: scale(1.30);
  transform-origin: center;
}
.order-card__thumb-more {
  background: var(--color-aloe-100, #DCEACE);
  color: var(--color-aloe-800, #2A4A1E);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.order-card__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  /* Es un <a> al detalle del pedido — sin underline ni color de link;
     hover sutil sobre el importe (color → aloe-700) que invita al click. */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.order-card__total:hover .order-card__amount,
.order-card__total:focus-visible .order-card__amount {
  color: var(--color-aloe-700, #1f3f24);
}
.order-card__total:focus-visible {
  outline: 2px solid var(--color-aloe-600, #244a29);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}
.order-card__total-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}
.order-card__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--color-ink-900, #1a1a1a);
  font-feature-settings: "tnum" on;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.order-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Variante compacta — usada en "Resumen → Últimos pedidos". El cuerpo
   queda igual pero sin el footer de acciones; en su lugar, toda la
   card es clickable (overlay link) hacia los detalles. */
.order-card--compact .order-card__body {
  border-bottom: 0;
  padding-bottom: 0;
}
.order-card--compact .order-card__detail-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.order-card--compact .order-card__thumb,
.order-card--compact .order-card__thumb-more {
  width: 80px;
  height: 80px;
}
.order-card--compact .order-card__thumb { padding: 10px; }

@media (max-width: 540px) {
  .order-card__body { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .order-card__total { align-items: flex-start; text-align: left; }
}

/* Read-only info en "Mis datos > Cuenta" */
.cuenta-readonly {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}
@media (max-width: 540px) {
  .cuenta-readonly { grid-template-columns: 1fr; }
}
.cuenta-readonly__label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 2px;
}
.cuenta-readonly__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.auth-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.auth-modal__close:hover {
  background: var(--color-bone);
  color: var(--color-text-primary);
}
.auth-modal__close svg { width: 18px; height: 18px; }

.auth-modal__back {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  z-index: 2;
}
.auth-modal__back:hover {
  background: var(--color-bone);
  color: var(--color-text-primary);
}
.auth-modal__back svg { width: 14px; height: 14px; }

.auth-modal__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-aloe-50);
  color: var(--color-aloe-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}
.auth-modal__icon svg { width: 28px; height: 28px; }

.auth-modal__head {
  text-align: center;
  margin-bottom: var(--space-8);
}
.auth-modal__head h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  line-height: 1.15;
}
.auth-modal__head p {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 38ch;
  margin-inline: auto;
}

.auth-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth-modal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: -6px; /* tira ligeramente hacia arriba contra el form-gap */
  margin-bottom: var(--space-1);
}
/* En esta fila el checkbox convive con un link en la misma línea, así que
   forzamos centrado vertical (.checkbox global usa flex-start, pensado para
   labels multilínea con helper-text). */
.auth-modal__row .checkbox {
  align-items: center;
  gap: var(--space-2);
}
.auth-modal__remember .checkbox__label {
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-secondary);
}
.auth-modal__row .auth-modal__link {
  line-height: 1;
}
.auth-modal__link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-aloe-700);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.auth-modal__link:hover { color: var(--color-aloe-600); text-decoration: underline; }

.field__input-wrapper:has(.auth-modal__eye) .field__input { padding-right: 44px; }
.auth-modal__eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  z-index: 2;
}
.auth-modal__eye:hover { background: var(--color-bone); color: var(--color-text-primary); }
.auth-modal__eye svg { width: 16px; height: 16px; }

.auth-modal__divider {
  position: relative;
  text-align: center;
  margin: var(--space-8) 0 var(--space-5);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.auth-modal__divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border-subtle);
}
.auth-modal__divider span {
  position: relative;
  padding: 0 var(--space-3);
  background: var(--color-paper);
}

.auth-modal__social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.auth-modal__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
}
.auth-modal__social-btn svg { flex-shrink: 0; }

.auth-modal__footer {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
  margin: var(--space-8) 0 0;
}

@media (max-width: 480px) {
  .auth-modal__panel { padding: var(--space-8) var(--space-6); }
  .auth-modal__brand { margin-bottom: var(--space-6); }
  .auth-modal__brand img { height: 32px; }
  .auth-modal__head { margin-bottom: var(--space-6); }
  .auth-modal__head h2 { font-size: 24px; }
  .auth-modal__social { grid-template-columns: 1fr; }
  .auth-modal__divider { margin: var(--space-6) 0 var(--space-4); }
  .auth-modal__footer { margin-top: var(--space-6); }
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block: var(--space-6) var(--space-12);
}
@media (min-width: 1024px) {
  .checkout {
    grid-template-columns: 1fr 400px;
    gap: var(--space-10);
    align-items: start;
  }
}
.checkout__steps {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.checkout__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.checkout__step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-ink-100);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.checkout__step.is-active { color: var(--color-text-primary); }
.checkout__step.is-active .checkout__step-num {
  background: var(--color-aloe-500);
  color: var(--color-paper);
}
.checkout__sep {
  width: 24px;
  height: 1px;
  background: var(--color-border-default);
}

.checkout__section {
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.checkout__section h3 {
  font-size: 18px;
  font-family: var(--font-display);
  margin-bottom: var(--space-4);
}
.checkout__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .checkout__grid {
    grid-template-columns: 1fr 1fr;
  }
  .checkout__grid--full { grid-column: 1 / -1; }
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.payment-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.payment-option:hover { border-color: var(--color-ink-400); }
.payment-option:has(input:checked) {
  border-color: var(--color-aloe-500);
  background: var(--color-aloe-50);
}
/* Variante INFORMATIVA (método de envío único, 2026-09-14): no hay
   nada que elegir, así que fuera el affordance de clic — cursor
   normal, sin reacción al hover y fondo papel para que se lea como
   una card de información, no como una opción. */
.payment-option--static,
.payment-option--static:hover {
  cursor: default;
  border-color: var(--color-border-default);
  background: var(--color-paper);
}
.payment-option__icon {
  font-size: 20px;
}

/* ============================================================
   PRO LANDING
   ============================================================ */
.pro-hero {
  background: linear-gradient(135deg, var(--color-aloe-700) 0%, var(--color-aloe-900) 100%);
  color: var(--color-paper);
  padding-block: var(--space-20);
  position: relative;
  overflow: hidden;
}
.pro-hero::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
}
.pro-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
}
@media (min-width: 1024px) {
  .pro-hero__inner { grid-template-columns: 1.2fr 1fr; }
}
.pro-hero h1 {
  color: var(--color-paper);
  font-size: 44px;
  margin-bottom: var(--space-4);
}
@media (min-width: 1024px) { .pro-hero h1 { font-size: 56px; } }
.pro-hero p {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  max-width: 50ch;
}
.pro-hero .badge--pro { background: var(--color-paper); margin-bottom: var(--space-4); }

.pro-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}
@media (min-width: 768px) {
  .pro-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pro-features { grid-template-columns: repeat(4, 1fr); }
}
.pro-feature {
  padding: var(--space-6);
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}
.pro-feature__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-aloe-50);
  color: var(--color-aloe-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.pro-feature h4 { margin-bottom: var(--space-2); }
.pro-feature p { font-size: 14px; color: var(--color-text-secondary); }

.pro-table {
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-8);
}
.pro-table table {
  width: 100%;
  border-collapse: collapse;
}
.pro-table th,
.pro-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.pro-table th {
  background: var(--color-bg-secondary);
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pro-table td.price-public { font-weight: 500; color: var(--color-text-muted); text-decoration: line-through; }
.pro-table td.price-pro {
  font-weight: 700;
  color: var(--color-aloe-700);
  font-feature-settings: "tnum" on;
}
.pro-table td.savings {
  color: var(--color-aloe-600);
  font-weight: 600;
  font-size: 13px;
}

/* ============================================================
   ACCOUNT (cuenta-pro)
   ============================================================ */
.account {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-block: var(--space-8);
}
@media (min-width: 1024px) {
  .account { grid-template-columns: 240px 1fr; gap: var(--space-10); }
}
.account__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  height: fit-content;
}
.account__sidebar a {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: all var(--transition-fast);
}
.account__sidebar a:hover { background: var(--color-paper); color: var(--color-text-primary); }
.account__sidebar a.is-active {
  background: var(--color-paper);
  color: var(--color-aloe-700);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.account__sidebar svg { width: 16px; height: 16px; }

.account__welcome {
  margin-bottom: var(--space-6);
}
.account__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
@media (min-width: 640px) {
  .account__stats { grid-template-columns: repeat(3, 1fr); }
}
.stat-card {
  position: relative;
  padding: var(--space-5);
  /* Mismo spotlight radial que .product-card__media — luz suave en el
     centro que da sensación de "destaque" al valor numérico. */
  background: radial-gradient(circle at 50% 42%,
              #FFFFFF 0%,
              #FDFDFE 60%,
              #F6F7F9 100%);
  border: 1px solid var(--color-aloe-100, #DCEACE);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
/* Acento de color superior — pista de "esto es un dashboard widget" */
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-aloe-500, #66a279), var(--color-aloe-700, #1f6e54));
  opacity: 0.6;
}
.stat-card:hover {
  border-color: var(--color-aloe-300, #B8D4A8);
  box-shadow: 0 8px 24px rgba(15, 32, 18, 0.06),
              0 2px 6px rgba(15, 32, 18, 0.04);
  transform: translateY(-1px);
}
.stat-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.stat-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-aloe-50, #ECF5E8);
  color: var(--color-aloe-700, #1f6e54);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-card__icon svg { width: 18px; height: 18px; }
.stat-card__label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.stat-card__value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-feature-settings: "tnum" on;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-card__hint {
  font-size: 12px;
  color: var(--color-aloe-600, #2f8a68);
  margin-top: var(--space-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Order list */
.order-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.order-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  font-size: 14px;
}
/* Es un <a> al PDF de la factura — sin underline ni color de link;
   hover sutil que pasa a verde aloe para invitar al click. */
.order-item__id {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  transition: color var(--transition-fast);
}
.order-item__id:hover,
.order-item__id:focus-visible {
  color: var(--color-aloe-700, #1f3f24);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}
.order-item__date { color: var(--color-text-muted); font-size: 13px; }
.order-item__total { margin-left: auto; font-weight: 700; font-feature-settings: "tnum" on; }
.order-item__status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-aloe-50);
  color: var(--color-aloe-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================
   TESTIMONIALS — slider con scroll-snap horizontal
   ============================================================ */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .testimonials { grid-template-columns: repeat(3, 1fr); }
}

.testimonials-slider {
  position: relative;
  padding-inline: 64px;
}
@media (max-width: 1023.98px) {
  .testimonials-slider { padding-inline: 56px; }
}
@media (max-width: 640px) {
  .testimonials-slider { padding-inline: 0; }
}

.testimonials-slider__track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Padding interior simétrico: evita que el border/sombra del primer y último
     card visible queden recortados por el clipping de overflow-x. */
  padding: var(--space-3) 8px var(--space-8);
  scroll-padding: 0 8px;
}
.testimonials-slider__track::-webkit-scrollbar { display: none; }
.testimonials-slider__track { scrollbar-width: none; }

.testimonials-slider__track .testimonial {
  flex: 0 0 calc((100% - var(--space-5) * 2) / 3);
  scroll-snap-align: start;
  margin: 0;
}

@media (max-width: 1023.98px) {
  .testimonials-slider__track .testimonial {
    flex: 0 0 calc((100% - var(--space-5)) / 2);
  }
}
@media (max-width: 640px) {
  .testimonials-slider__track .testimonial {
    flex: 0 0 88%;
  }
}

/* Navegación: flechas circulares blancas con sombra */
.testimonials-slider__nav {
  position: absolute;
  top: calc(50% - 16px);
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-ink-900);
  border: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 24px rgba(15, 32, 18, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              opacity var(--transition-normal);
}
.testimonials-slider__nav:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 12px 32px rgba(15, 32, 18, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.10);
}
.testimonials-slider__nav:active {
  transform: translateY(-50%) scale(0.98);
}
.testimonials-slider__nav svg { width: 20px; height: 20px; stroke-width: 2; }
.testimonials-slider__nav--prev { left: 0; }
.testimonials-slider__nav--next { right: 0; }
.testimonials-slider__nav:disabled,
.testimonials-slider__nav[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}
@media (max-width: 640px) {
  .testimonials-slider__nav { display: none; }
}

/* Dots de paginación bajo el slider */
.testimonials-slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2);
}
.testimonials-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border-subtle);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), width var(--transition-fast);
}
.testimonials-slider__dot:hover { background: var(--color-aloe-300); }
.testimonials-slider__dot.is-active {
  background: var(--color-aloe-700);
  width: 24px;
  border-radius: 999px;
}
@media (max-width: 640px) {
  .testimonials-slider__dots { margin-top: var(--space-1); }
}
/* Mismo lenguaje que las product card: spotlight radial centrado,
   border aloe-100, sombra elevada en hover. Acento coral en la comilla. */
.testimonial {
  padding: var(--space-7, 28px) var(--space-6) var(--space-6);
  background: radial-gradient(circle at 50% 42%,
    #FFFFFF 0%,
    #FDFDFE 60%,
    #F6F7F9 100%);
  border: 1px solid var(--color-aloe-100);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition-normal),
              border-color var(--transition-normal),
              transform var(--transition-normal);
}
/* Logo Google a modo de atribución de reseña — alineado horizontalmente
   con el centro vertical de la pill de rating (estrellas) */
.testimonial::before {
  content: "";
  position: absolute;
  top: 31px;
  right: 24px;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23FFC107' d='M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z'/><path fill='%23FF3D00' d='M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z'/><path fill='%234CAF50' d='M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z'/><path fill='%231976D2' d='M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: 0.95;
}
.testimonial:hover {
  border-color: var(--color-aloe-200);
  box-shadow: 0 16px 40px rgba(15, 32, 18, 0.10);
  transform: translateY(-2px);
}
.testimonial__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--color-paper);
  border: 1px solid var(--color-aloe-100);
  border-radius: var(--radius-pill);
  align-self: flex-start;
  box-shadow: var(--shadow-xs);
}
.testimonial__rating .stars { font-size: 13px; }
.testimonial__score {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: 0.2px;
  font-feature-settings: "tnum" on;
}
/* Estrellas con relleno parcial: usa --rating (0-5) para colorear gradualmente */
.stars--rated {
  display: inline-block;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
  background: linear-gradient(
    90deg,
    var(--color-rating) 0%,
    var(--color-rating) calc(var(--rating, 5) / 5 * 100%),
    rgba(15, 32, 18, 0.18) calc(var(--rating, 5) / 5 * 100%),
    rgba(15, 32, 18, 0.18) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.testimonial__quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  font-weight: 450;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-aloe-100);
}
.testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(36, 74, 41, 0.10) 0%, rgba(36, 74, 41, 0.18) 100%);
  color: var(--color-aloe-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow:
    inset 0 0 0 1px rgba(36, 74, 41, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.testimonial__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
  letter-spacing: -0.1px;
}
.testimonial__role {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ============================================================
   MOBILE — TESTIMONIAL CARD (≤ 767.98px)
   Tipografía un punto más compacta para que cada cita ocupe menos
   alto y respire mejor en el slider de móvil. Avatar más pequeño.
   ============================================================ */
@media (max-width: 767.98px) {
  .testimonial {
    padding: 20px 18px 18px;
    gap: 14px;
  }
  .testimonial::before {
    top: 24px;
    right: 18px;
    width: 18px;
    height: 18px;
  }
  .testimonial__rating { padding: 5px 9px; gap: 6px; }
  .testimonial__rating .stars { font-size: 12px; }
  .testimonial__score { font-size: 11px; }
  .testimonial__quote {
    font-size: 13px;
    line-height: 1.55;
  }
  .testimonial__author {
    gap: var(--space-2);
    padding-top: 12px;
  }
  .testimonial__avatar {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
  .testimonial__name { font-size: 12.5px; }
  .testimonial__role { font-size: 10.5px; }
}

/* ============================================================
   VALUE STRIP — destacados bajo el hero (envíos, precio, garantías)
   ============================================================ */
.value-strip {
  background: var(--color-paper);
  border-block: 1px solid var(--color-border-subtle);
  padding-block: var(--space-8);
}
.value-strip__list {
  list-style: none;
  display: grid;
  /* En móvil 2x2 (era 1 columna apilada) — los 4 ítems caben cómodos
     a 393 px con icono + texto compactos. A partir de 640 px sigue siendo
     2 cols, y a partir de 1024 px pasa a 4 cols en línea. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-4);
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .value-strip__list { gap: var(--space-6) var(--space-8); }
}
@media (min-width: 1024px) {
  .value-strip__list { grid-template-columns: repeat(4, 1fr); }
}
.value-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.value-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--color-ink-900);
}
.value-strip__icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
}
.value-strip__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.value-strip__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.value-strip__sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.3;
}
@media (min-width: 1024px) {
  .value-strip { padding-block: var(--space-10); }
  .value-strip__title { font-size: 17px; }
}

/* Móvil < 640 (donde el grid es 2x2): tipografías más compactas e
   icono pequeño para que cada ítem entre en una sola línea tanto el
   title como el sub. Si dejamos los tamaños desktop, "Mejor precio
   online", "Desde 35€ en pedidos" y "Canal directo de la marca"
   rompían a 2 líneas. */
@media (max-width: 639.98px) {
  .value-strip {
    padding-block: var(--space-6);
    /* Fondo gris claro (mismo tono que usa la sección de categorías
       más abajo) para que el bloque de garantías se sienta como un
       módulo "premium" diferenciado del hero blanco. */
    background: #FBFCFD;
    /* Solo borde superior — quitamos el inferior largo que separaba
       de la siguiente sección para que la transición sea más suave. */
    border-block: 0;
    border-top: 1px solid var(--color-border-subtle);
  }
  /* Grid sin gap: las líneas separadoras viven como borders dentro de
     cada item para crear una rejilla cruz limpia (vertical entre cols,
     horizontal entre filas) */
  .value-strip__list { gap: 0; }

  /* Item vertical: icono arriba, título y sub centrados debajo */
  .value-strip__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 10px;
  }
  /* Separadores: borde derecho en cada item de la columna izquierda
     (los impares 1 y 3) y borde inferior en los items de la fila superior
     (los dos primeros). Crea una rejilla cruz sin doble línea ni borde
     externo. */
  .value-strip__item:nth-child(odd) {
    border-right: 1px solid var(--color-border-subtle);
  }
  .value-strip__item:nth-child(1),
  .value-strip__item:nth-child(2) {
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .value-strip__text {
    align-items: center;
  }
  .value-strip__icon { width: 36px; height: 36px; }
  .value-strip__icon svg { width: 26px; height: 26px; }
  .value-strip__title { font-size: 13px; line-height: 1.2; letter-spacing: -0.005em; }
  .value-strip__sub { font-size: 11px; line-height: 1.35; }
}

/* ============================================================
   INSTAGRAM STRIP — feed visual full-bleed pegado al footer
   ============================================================ */
.ig-strip {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 100%;
  background: var(--color-ink-900);
  overflow: hidden;
}
.ig-strip__item {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.ig-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
}
/* Velo oscuro permanente sobre las fotos (estático, sin hover) */
.ig-strip__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

/* Cuando va justo antes del footer, anula el margin-top del footer */
.ig-strip + .site-footer { margin-top: 0; }

@media (max-width: 1023.98px) {
  .ig-strip { grid-template-columns: repeat(3, 1fr); }
}
/* En móvil (<768): tira horizontal de 1 fila × 3 columnas (acento
   editorial, no muro). Ocultamos los items 4+ para que no quede una
   última fila con huecos vacíos. Desktop sigue mostrando los 9.
   Sustituye al antiguo repeat(2, 1fr) que se aplicaba a ≤640 px. */
@media (max-width: 767.98px) {
  .ig-strip { grid-template-columns: repeat(3, 1fr); }
  .ig-strip .ig-strip__item:nth-child(n+4) { display: none; }
}

/* ============================================================
   PACK BANNER
   ============================================================ */
.pack-banner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  background: linear-gradient(135deg, var(--color-aloe-50) 0%, var(--color-stone-bg) 100%);
  border: 1px solid var(--color-aloe-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 768px) {
  .pack-banner { grid-template-columns: 1.3fr 1fr; }
}
.pack-banner__content {
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pack-banner__media {
  aspect-ratio: 16 / 10;
  background: var(--color-stone-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.pack-banner__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pack-banner h2 {
  font-size: 28px;
  margin-bottom: var(--space-2);
}
.pack-banner__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ============================================================
   PRO CTA BLOCK — fondo teal profundo, glow aloe sutil
   ============================================================ */
.pro-cta {
  background: var(--color-teal-900);
  color: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.pro-cta::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 122, 69, 0.45) 0%, transparent 70%);
}
.pro-cta > * { position: relative; z-index: 1; }
.pro-cta h2 {
  color: var(--color-paper);
  max-width: 30ch;
}
.pro-cta p {
  color: rgba(255,255,255,0.85);
  max-width: 50ch;
}

/* ============================================================
   WHY ALOE — split layout: stamp + headline a la izquierda, descripción a la
   derecha; debajo 4 features con números grandes detrás
   ============================================================ */

/* Bloque copy a la derecha: eyebrow + descripción */
.why-head__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.why-head__copy .eyebrow {
  font-size: 11.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

/* ============================================================
   SECTION --WHY · bloque claro de marca (statement block, light)
   Cohesión visual con el resto, pero con peso e identidad
   ============================================================ */
.section--why {
  position: relative;
  isolation: isolate;
  background: #FBFCFD;
  overflow: hidden;
}

/* Sin background decorativo — sección limpia sobre paper */
.section--why .why-bg {
  display: none;
}

/* Head: descripción ligeramente más estrecha para mejor lectura */
.section--why .section__head p {
  max-width: 56ch;
}

/* === BANDA DE STATS — full-width tras Testimonios === */
.why-stats-band {
  background: #FBFCFD;
  border-block: 1px solid var(--color-border-subtle);
  padding-block: var(--space-10);
}
@media (min-width: 1024px) {
  .why-stats-band { padding-block: var(--space-12); }
}
/* En móvil ocultamos la banda de stats: a 393 px las cifras
   (+10/+340/+20/100%) ya están servidas en otros lugares del index
   (testimonios, why) y aquí solo añadiría scroll sin valor. */
@media (max-width: 767.98px) {
  .why-stats-band { display: none; }
}

/* En páginas de tienda, carrito y cuenta damos un margen superior consistente.
   El home y demás traen su propia separación natural por las secciones
   que preceden a la banda. */
.page-tienda .why-stats-band,
.page-tienda-micro .why-stats-band,
.page-carrito .why-stats-band,
.page-cuenta .why-stats-band {
  margin-top: var(--space-16);
}
@media (min-width: 1024px) {
  .page-tienda .why-stats-band,
  .page-tienda-micro .why-stats-band,
  .page-carrito .why-stats-band,
  .page-cuenta .why-stats-band {
    margin-top: var(--space-20);
  }
}
/* En carrito y cuenta anulamos el padding-bottom de la sección que precede
   al stats-band para que la altura total iguale a la de tienda (solo el
   margin-top manda). */
.page-carrito .cart-suggest,
.page-cuenta .account {
  padding-bottom: 0;
}

/* En pro-team y distribuidores ocultamos la banda de stats del footer
   compartido — la página ya tiene su propia banda de stats justo debajo
   del hero. Solo aplica a la stats-band que vive a nivel <body> (la del
   footer); la del <main> no se ve afectada por el selector hijo directo. */
.page-pro-team > .why-stats-band,
.page-distribuidores > .why-stats-band {
  display: none;
}
/* Y a la banda interna le damos el gris de fondo de marca para que destaque
   sobre el hero oscuro. */
.page-pro-team main .why-stats-band,
.page-distribuidores main .why-stats-band {
  background: var(--color-stone-bg);
}

/* Stats grid — usado dentro de .why-stats-band */
.why-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .why-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}
.why-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  position: relative;
}
@media (min-width: 768px) {
  .why-stats__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: calc(var(--space-4) * -0.5);
    top: 18%;
    height: 64%;
    width: 1px;
    background: var(--color-border-subtle);
  }
}
.why-stats__num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text-primary);
}
@media (min-width: 1024px) {
  .why-stats__num { font-size: 36px; }
}
.why-stats__label {
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* === FEATURES — grid 1/2/3 cols con separadores entre celdas (3×2 en desktop) ===
   Color: var(--color-border-default) #D1D5DB — un gramaje más sólido que subtle
   para que las líneas se lean sin lugar a duda en todas las celdas */
.why-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) {
  .why-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .why-features { grid-template-columns: repeat(3, 1fr); }
  .why-features--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.why-feature {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-12) var(--space-6);
}
@media (min-width: 1024px) {
  .why-feature { padding: var(--space-16) var(--space-8); }
}

/* Separadores: mobile (1 col) → solo horizontales entre cards */
.why-feature + .why-feature {
  border-top: 1px solid var(--color-border-default);
}
/* Tablet (2 cols) → vertical entre col 1 y 2 + horizontal entre filas */
@media (min-width: 640px) {
  .why-feature + .why-feature { border-top: 0; }
  .why-feature:nth-child(odd) { border-right: 1px solid var(--color-border-default); }
  .why-feature:nth-child(n+3) { border-top: 1px solid var(--color-border-default); }
}
/* Desktop (3 cols × 2 filas) → vertical entre las 3 columnas + horizontal entre filas
   Reglas con specificity uniforme (0,2,0) — el cascade resuelve correctamente */
@media (min-width: 1024px) {
  .why-feature:nth-child(odd) { border-right: 0; }
  .why-feature:nth-child(n+3) { border-top: 0; }
  .why-feature:not(:nth-child(3n)) {
    border-right: 1px solid var(--color-border-default);
  }
  .why-feature:nth-child(n+4) {
    border-top: 1px solid var(--color-border-default);
  }

  /* Variante 4 cols (1 fila × 4 items) — overrides para que los separadores
     verticales caigan entre 1-2, 2-3 y 3-4, sin bordes horizontales. */
  .why-features--cols-4 .why-feature {
    border-top: 0;
    border-right: 0;
  }
  .why-features--cols-4 .why-feature:not(:nth-child(4n)) {
    border-right: 1px solid var(--color-border-default);
  }
}

/* Icono outline limpio, sin halo — protagonismo al trazo en verde marca.
   Hairline coral debajo como acento de marca minimalista (stamp editorial). */
.why-feature__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-aloe-700);
  padding-bottom: 14px;
  margin-bottom: var(--space-6);
}
.why-feature__icon::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--color-coral-500);
}
.why-feature__icon svg {
  width: 44px;
  height: 44px;
  stroke-width: 1.5;
}
@media (min-width: 1024px) {
  .why-feature__icon {
    padding-bottom: 16px;
    margin-bottom: var(--space-7, 28px);
  }
  .why-feature__icon svg { width: 48px; height: 48px; }
  .why-feature__icon::after { width: 24px; }
}

/* Tag/chip con número + label integrados en la misma cápsula verde.
   El número refuerza la enumeración 01-06 sin flotar como decoración suelta. */
.why-feature__tag {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-4);
  padding: 0;
  border-radius: var(--radius-pill);
  background: rgba(36, 74, 41, 0.08);
  color: var(--color-aloe-700);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  width: fit-content;
  overflow: hidden;
}
.why-feature__tag-num {
  display: inline-flex;
  align-items: center;
  padding: 9px 11px 9px 16px;
  background: rgba(36, 74, 41, 0.14);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.7px;
}
.why-feature__tag-label {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px 9px 11px;
}

.why-feature h4 {
  position: relative;
  z-index: 1;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}
.why-feature p {
  position: relative;
  z-index: 1;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 30ch;
}

/* Defaults para el swap mobile/desktop de las descripciones de cada
   why-feature (la conmutación real está en la @media móvil de abajo).
   Mismo patrón que las intros de sección y los nombres de las cards. */
.why-feature p .lead--desktop { display: inline; }
.why-feature p .lead--mobile { display: none; }

/* Defaults para el swap del título h4 — en desktop "Asesoramiento
   experto" / "Innovación constante"; en móvil estrecho se cambia a
   "Asesoría experta" / "I+D constante" para que cada h4 entre en una
   sola línea sin romper el grid 2x3. */
.why-feature h4 .title--desktop { display: inline; }
.why-feature h4 .title--mobile { display: none; }

/* ============================================================
   MOBILE — WHY FEATURES 2x3 (≤ 767.98px)
   Cambia el grid de 1 columna (6 cards apiladas) a 2 columnas × 3 filas
   y aplica las tipografías compactas que venimos usando en el resto del
   móvil (pill 9 px, título 15 px, descripción 11.5 px / 1.5). Los
   separadores cruz (vertical entre cols + horizontal entre filas) se
   heredan de las reglas existentes para 2 cols a ≥640 px — aquí solo
   las extendemos hacia abajo.
   ============================================================ */
@media (max-width: 767.98px) {
  .why-features { grid-template-columns: repeat(2, 1fr); }

  /* Limpia el border-top del default 1-col entre todos los siblings */
  .why-feature + .why-feature { border-top: 0; }
  /* Aplica la lógica 2-col: vertical entre columnas, horizontal entre filas */
  .why-feature:nth-child(odd) { border-right: 1px solid var(--color-border-default); }
  .why-feature:nth-child(n+3) { border-top: 1px solid var(--color-border-default); }

  /* Padding interno compacto */
  .why-feature {
    padding: 24px 14px;
  }

  /* Icono más pequeño + lineal coral más fino (look editorial original) */
  .why-feature__icon {
    padding-bottom: 10px;
    margin-bottom: 14px;
  }
  .why-feature__icon svg {
    width: 34px;
    height: 34px;
  }
  .why-feature__icon::after { width: 18px; }

  /* Tag-chip: ocultamos solo el número (01, 02…) y dejamos el label
     ("SIN INTERMEDIARIOS", "PRECIO FABRICANTE"…). Compensamos el
     padding del label para que la pill quede balanceada sin la
     mitad izquierda más oscura. */
  .why-feature__tag {
    font-size: 9px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
  }
  .why-feature__tag-num { display: none; }
  .why-feature__tag-label {
    padding: 6px 11px;
  }

  /* Título tamaño card-name (16 px) y descripción tamaño card-description
     (11.5 px / 1.5) para que toda la web móvil hable el mismo idioma */
  .why-feature h4 {
    font-size: 15px;
    line-height: 1.2;
    margin: 0 0 6px;
  }
  .why-feature p {
    font-size: 11.5px;
    line-height: 1.5;
    max-width: 100%;
  }

  /* Conmuta a la versión corta (3 líneas) en móvil */
  .why-feature p .lead--desktop { display: none; }
  .why-feature p .lead--mobile { display: inline; }

  /* Conmuta los h4 a la versión corta en móvil (cabe en 1 línea) */
  .why-feature h4 .title--desktop { display: none; }
  .why-feature h4 .title--mobile { display: inline; }
}

/* ============================================================
   PRO TEAM — sponsored artists
   ============================================================ */

/* HERO oscuro con foto editorial + overlay para legibilidad (legacy team-hero,
   pro-team.php ya usa el .hero compartido del index — esta clase queda por
   si se reutiliza puntualmente). */
.team-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.78) 0%, rgba(8, 8, 8, 0.55) 60%, rgba(8, 8, 8, 0.4) 100%),
    url('../img/header/Header_Distributors.jpg') 75% center / cover no-repeat,
    radial-gradient(circle at 20% 30%, #1a1a1a 0%, #050505 70%);
  background-color: #050505;
  color: var(--color-paper);
  padding-block: 140px 120px;
}

/* Pro-team y distribuidores usan el .hero del index pero con fondo desde
   negro (la foto Header_Distributors es oscura — el degradado gris-azulado
   del home no encaja). Texto en claro para legibilidad. */
.page-pro-team .hero,
.page-distribuidores .hero {
  min-height: clamp(440px, 38vw, 620px);
  background-color: #050505;
  background-image: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 55%, #050505 100%);
  color: var(--color-paper);
}
.page-pro-team .hero .hero__title,
.page-distribuidores .hero .hero__title { color: var(--color-paper); }
.page-pro-team .hero .hero__subtitle,
.page-distribuidores .hero .hero__subtitle {
  color: rgba(255, 255, 255, 0.78);
}
.page-pro-team .hero .hero__subtitle strong,
.page-distribuidores .hero .hero__subtitle strong {
  color: var(--color-paper);
}
.page-pro-team .hero .hero__eyebrow,
.page-distribuidores .hero .hero__eyebrow {
  color: var(--color-aloe-300, #a3d9a5);
}
/* Trust pills (Producto garantizado · Soporte · Stock local) sobre fondo dark */
.page-pro-team .hero .hero__benefits,
.page-distribuidores .hero .hero__benefits {
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--space-5);
}
.page-pro-team .hero .hero__benefits svg {
  color: var(--color-aloe-300, #a3d9a5);
}
.page-distribuidores .hero .hero__benefits svg {
  color: var(--color-mustard-500, #D4A656);
}
/* Foto un poco más grande, anclada al lado derecho. Mask con fade más corto
   que el del index — la foto se vuelve opaca antes (la zona negra de
   transición es más estrecha, dando más protagonismo a la imagen). */
.page-pro-team .hero__media,
.page-distribuidores .hero__media {
  transform-origin: right center;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 14%,
    rgba(0, 0, 0, 0.85) 30%,
    #000 42%);
          mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 14%,
    rgba(0, 0, 0, 0.85) 30%,
    #000 42%);
}
.page-pro-team .hero__media {
  height: 130%;
  transform: translateY(-10%);
}
.page-distribuidores .hero__media {
  height: 170%;
  transform: translateY(-17%);
}

/* Mobile: velo oscuro sobre la foto (en vez de claro como el index). */
@media (max-width: 767.98px) {
  .page-pro-team .hero {
    background-image:
      linear-gradient(180deg, rgba(5, 5, 5, 0.55) 0%, rgba(5, 5, 5, 0.78) 55%, rgba(5, 5, 5, 0.95) 100%),
      url("../img/header/Header_PRO.jpg");
    background-position: center top, 70% center;
    background-size: cover, cover;
    min-height: 540px;
  }
  .page-distribuidores .hero {
    background-image:
      linear-gradient(180deg, rgba(5, 5, 5, 0.55) 0%, rgba(5, 5, 5, 0.78) 55%, rgba(5, 5, 5, 0.95) 100%),
      url("../img/header/Header_Distributors.jpg");
    background-position: center top, 70% center;
    background-size: cover, cover;
    min-height: 540px;
  }
}

/* Distribuidores: el hero es a 2 columnas (texto + tarjeta de stats sobre la
   foto). El .hero__visual sigue debajo como capa de imagen. */
@media (min-width: 1024px) {
  .page-distribuidores .hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 380px);
    gap: var(--space-12);
    align-items: center;
  }
  /* La tarjeta vive dentro del flujo del grid (col 2) — la subimos al z-index 2
     para asegurar que queda sobre la foto absoluta. */
  .page-distribuidores .distributors-hero-card {
    position: relative;
    z-index: 2;
    justify-self: end;
  }
}
/* En mobile la tarjeta cae debajo del texto, pero igual queremos verla. */
.page-distribuidores .distributors-hero-card {
  position: relative;
  z-index: 2;
}
.team-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
.team-hero__monogram {
  position: absolute;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  color: rgba(255,255,255,0.04);
  line-height: 0.8;
  font-size: clamp(280px, 50vw, 600px);
  letter-spacing: -0.04em;
}
.team-hero__monogram--a { top: -8%; left: -3%; }
.team-hero__monogram--t { bottom: -22%; right: -5%; color: rgba(243,86,39,0.07); }

.team-hero__inner {
  position: relative;
  max-width: 880px;
  margin-inline: 0 auto;
  text-align: left;
}
.team-hero__eyebrow {
  display: inline-block;
  color: var(--color-coral-500);
  margin-bottom: var(--space-4);
  letter-spacing: 0.08em;
}
.team-hero__title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-6);
  color: var(--color-paper);
}
.team-hero__lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
  margin: 0 0 var(--space-8);
}
.team-hero__lede strong {
  color: var(--color-paper);
  font-weight: 600;
  background: linear-gradient(transparent 65%, rgba(243,86,39,0.4) 65%);
  padding: 0 4px;
}
.team-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* STATS BAR */
.team-stats {
  background: var(--color-bone);
  border-block: 1px solid var(--color-border-subtle);
  padding-block: var(--space-10);
}
.team-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .team-stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.team-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline: var(--space-2);
  border-left: 2px solid var(--color-ink-900);
  padding-left: var(--space-4);
}
.team-stats__num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.team-stats__num small {
  font-size: 0.55em;
  color: var(--color-coral-500);
  margin-left: 2px;
}
.team-stats__label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* FEATURED ARTIST */
.featured-artist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-6);
}
@media (min-width: 900px) {
  .featured-artist { grid-template-columns: 1fr 1fr; }
}
.featured-artist__portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--gradient, linear-gradient(135deg, #F35627 0%, #A03828 100%));
}
.featured-artist[data-palette="coral"] .featured-artist__portrait { background: linear-gradient(135deg, #F35627 0%, #A03828 100%); }
.featured-artist[data-palette="aloe"]  .featured-artist__portrait { background: linear-gradient(135deg, #3F7A45 0%, #1F3D24 100%); }
.featured-artist[data-palette="ink"]   .featured-artist__portrait { background: linear-gradient(135deg, #2A2A2A 0%, #050505 100%); }
.featured-artist[data-palette="rust"]  .featured-artist__portrait { background: linear-gradient(135deg, #A03828 0%, #5A1F15 100%); }
.featured-artist[data-palette="mustard"] .featured-artist__portrait { background: linear-gradient(135deg, #D4A656 0%, #6E5325 100%); }
.featured-artist[data-palette="amber"] .featured-artist__portrait { background: linear-gradient(135deg, #C49544 0%, #6B4F1F 100%); }
.featured-artist__monogram {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(160px, 22vw, 280px);
  color: rgba(255,255,255,0.95);
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
.featured-artist__style {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: rgba(255,255,255,0.95);
  color: var(--color-text-primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
}
.featured-artist__body {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}
@media (min-width: 1024px) { .featured-artist__body { padding: var(--space-12); } }
.featured-artist__name {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.02em;
}
.featured-artist__location {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}
.featured-artist__location svg { width: 16px; height: 16px; }
.featured-artist__quote {
  position: relative;
  margin: var(--space-4) 0 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-coral-500);
}
.featured-artist__quote-mark {
  position: absolute;
  top: -4px;
  left: -10px;
  width: 24px;
  height: 24px;
  background: var(--color-paper);
  color: var(--color-coral-500);
  padding: 0 4px;
}
.featured-artist__quote p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-primary);
  margin: 0;
  font-style: italic;
}
.featured-artist__meta {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}
.featured-artist__handle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-primary);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.featured-artist__handle:hover {
  border-color: var(--color-ink-900);
  background: var(--color-bone);
}
.featured-artist__handle svg { width: 18px; height: 18px; }
.featured-artist__handle strong { font-weight: 700; }
.featured-artist__handle span { color: var(--color-text-muted); font-size: 13px; }

/* FILTROS DE ESTILO */
.team-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-8);
  justify-content: center;
}
.team-filter {
  background: var(--color-paper);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.team-filter:hover {
  border-color: var(--color-ink-900);
}
.team-filter.is-active {
  background: var(--color-ink-900);
  color: var(--color-paper);
  border-color: var(--color-ink-900);
}

/* GRID DE ARTISTAS */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

.artist-card {
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.artist-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.artist-card__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* B&W para las cards que tienen foto de fondo (las que NO tienen solo el
   gradient por palette). El monograma y los textos siguen siendo blancos
   sobre el gradient overlay, así que el filtro no los afecta visualmente. */
.artist-card__portrait[style*="background-image"] {
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--transition-slow);
}
.artist-card:hover .artist-card__portrait[style*="background-image"] {
  filter: grayscale(0) contrast(1);
}
.artist-card[data-palette="coral"] .artist-card__portrait { background: linear-gradient(135deg, #F35627 0%, #7A2812 100%); }
.artist-card[data-palette="aloe"]  .artist-card__portrait { background: linear-gradient(135deg, #3F7A45 0%, #1F3D24 100%); }
.artist-card[data-palette="ink"]   .artist-card__portrait { background: linear-gradient(135deg, #2A2A2A 0%, #050505 100%); }
.artist-card[data-palette="rust"]  .artist-card__portrait { background: linear-gradient(135deg, #A03828 0%, #4A1810 100%); }
.artist-card[data-palette="mustard"] .artist-card__portrait { background: linear-gradient(135deg, #D4A656 0%, #6E5325 100%); }
.artist-card[data-palette="amber"] .artist-card__portrait { background: linear-gradient(135deg, #C49544 0%, #6B4F1F 100%); }
.artist-card__monogram {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 7vw, 80px);
  color: rgba(255,255,255,0.95);
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.artist-card__style {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255,255,255,0.95);
  color: var(--color-text-primary);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
}
.artist-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  color: var(--color-paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.artist-card__overlay span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  background: var(--color-paper);
  color: var(--color-text-primary);
  border-radius: var(--radius-pill);
}
.artist-card__overlay svg { width: 16px; height: 16px; }
.artist-card:hover .artist-card__overlay { opacity: 1; }

.artist-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.artist-card__name {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.artist-card__location {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}
.artist-card__handle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--color-text-primary);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}
.artist-card__handle svg { width: 14px; height: 14px; color: var(--color-text-muted); }
.artist-card__handle strong { font-weight: 700; }

/* Empty state */
.team-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.team-empty svg { width: 48px; height: 48px; opacity: 0.5; }

/* PERKS */
.team-perks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-10);
}
@media (min-width: 768px) { .team-perks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-perks { grid-template-columns: repeat(4, 1fr); } }
.team-perk {
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.team-perk__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-ink-900);
  color: var(--color-paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-perk h4 { margin: 0; font-size: 17px; }
.team-perk p { font-size: 14px; color: var(--color-text-secondary); margin: 0; line-height: 1.55; }

/* APPLY SECTION (modo día — fondo blanco) */
.team-apply {
  background: var(--color-paper);
  color: var(--color-text-primary);
  position: relative;
  overflow: hidden;
}
.team-apply__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  position: relative;
}
@media (min-width: 1024px) {
  .team-apply__inner { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-12); }
}
/* Bloque copy de la sección "Convocatoria" — alineado con .section__head:
   eyebrow + h2 + p con los mismos espacios y tipografía. */
.team-apply__copy .eyebrow {
  font-size: 11.5px;
  letter-spacing: 2.4px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: inline-block;
}
@media (min-width: 1024px) {
  .team-apply__copy .eyebrow { margin-bottom: 18px; }
}
.team-apply__copy h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 24px;
  max-width: 22ch;
}
@media (min-width: 1024px) {
  .team-apply__copy h2 { font-size: 52px; margin-bottom: 28px; }
}
@media (min-width: 1280px) {
  .team-apply__copy h2 { font-size: 60px; }
}
.team-apply__copy p {
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-6);
  max-width: 50ch;
}
.team-apply__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.team-apply__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--color-text-primary);
}
.team-apply__list svg {
  width: 18px;
  height: 18px;
  color: var(--color-coral-500);
  flex-shrink: 0;
}
.team-apply__form {
  background: var(--color-stone-bg);
  color: var(--color-text-primary);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Variante "section__head" alineado a la izquierda */
.section__head--left { text-align: left; align-items: flex-start; }
.section__head--left p { margin-left: 0; }

/* ============================================================
   DISTRIBUIDORES
   ============================================================ */

/* Tarjeta destacada del hero (3 cifras + cierre) */
.distributors-hero-card {
  width: 100%;
  max-width: 360px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-paper);
}
.distributors-hero-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.distributors-hero-card__row:first-child { padding-top: 0; }
.distributors-hero-card__row:nth-last-of-type(2) { border-bottom: 0; padding-bottom: 0; }
.distributors-hero-card__num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
}
.distributors-hero-card__num small {
  font-size: 24px;
  margin-left: 2px;
  color: rgba(255,255,255,0.7);
}
.distributors-hero-card__label {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.distributors-hero-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.distributors-hero-card__foot svg { width: 18px; height: 18px; }

/* Tarjeta sede central (4 columnas) */
.hq-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
@media (min-width: 640px) {
  .hq-card { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hq-card { grid-template-columns: repeat(4, 1fr); padding: var(--space-8); gap: var(--space-6); }
}
.hq-card__col { display: flex; flex-direction: column; gap: var(--space-2); }
.hq-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-aloe-50);
  color: var(--color-aloe-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.hq-card__col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0; }
.hq-card__col p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-text-primary); }
.hq-card__col a { color: var(--color-text-primary); text-decoration: none; border-bottom: 1px solid var(--color-border-default); }
.hq-card__col a:hover { color: var(--color-aloe-600); border-color: var(--color-aloe-600); }

/* Toolbar buscador */
.distributors-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.distributors-toolbar__count {
  font-size: 14px;
  color: var(--color-text-secondary);
}
.distributors-toolbar__count [data-distributor-count],
.distributors-toolbar__count [data-distributor-country-count] {
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Listado por país */
.distributors-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.distributors-country {
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.distributors-country__head {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: 600;
}
.distributors-country__head::-webkit-details-marker { display: none; }
.distributors-country__head::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: auto;
  line-height: 1;
}
.distributors-country[open] .distributors-country__head::after { content: "−"; }
.distributors-country__name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.distributors-country__count {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.distributors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: 0 var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-6);
}
@media (min-width: 720px) {
  .distributors-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .distributors-grid { grid-template-columns: repeat(3, 1fr); }
}

.distributor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-bone);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.distributor-card:hover {
  border-color: var(--color-ink-900);
  transform: translateY(-2px);
}
.distributor-card--primary {
  background: var(--color-paper);
  border-color: var(--color-coral-500);
  box-shadow: 0 0 0 1px var(--color-coral-500) inset;
}
.distributor-card__flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-coral-500);
  margin-bottom: var(--space-1);
}
.distributor-card__flag svg { width: 14px; height: 14px; }
.distributor-card__name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.3;
}
.distributor-card__address {
  display: flex;
  gap: var(--space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}
.distributor-card__address svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--color-text-muted);
}
.distributor-card__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.distributor-card__contact li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.distributor-card__contact svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.distributor-card__contact a {
  color: var(--color-text-primary);
  text-decoration: none;
  word-break: break-word;
}
.distributor-card__contact a:hover { color: var(--color-aloe-600); }

/* Empty state */
.distributors-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.distributors-empty[hidden] { display: none; }
.distributors-empty svg { width: 48px; height: 48px; opacity: 0.6; }
.distributors-empty p { font-size: 15px; margin: 0; }

/* ============================================================
   NOSOTROS — usa el patrón .team-apply de /distribuidores.
   Solo añadimos:
   · que el <h1> herede el display de .team-apply__copy h2
   · enlaces dentro de .team-apply__list
   · pills de sellos de marca al pie
   ============================================================ */
.page-nosotros .team-apply__copy h1 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 24px;
  max-width: 22ch;
}
@media (min-width: 1024px) {
  .page-nosotros .team-apply__copy h1 { font-size: 52px; margin-bottom: 28px; }
}
@media (min-width: 1280px) {
  .page-nosotros .team-apply__copy h1 { font-size: 60px; }
}
.page-nosotros .team-apply__list a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.page-nosotros .team-apply__list a:hover {
  color: var(--color-aloe-600, #1f7a3d);
  border-bottom-color: currentColor;
}

/* Metadatos: sede y horario, en dos tarjetas blancas con acento rosa */
.contact-meta {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-meta__item {
  padding: var(--space-6) var(--space-10);
  background: var(--color-paper, #fff);
  border-radius: var(--radius-md, 14px);
  border: 1px solid var(--color-border-subtle);
}
.contact-meta dt {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-primary, #0f172a);
  margin: 0 0 14px;
}
.contact-meta dt svg {
  width: 14px;
  height: 14px;
  color: #fff;
  padding: 7px;
  background: var(--color-rose-500, #e11d48);
  border-radius: 50%;
  box-sizing: content-box;
  flex-shrink: 0;
}
.contact-meta dt::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(15, 23, 42, 0.18), transparent);
}
.contact-meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary, #475569);
  line-height: 1.6;
}

/* Pills de credenciales de marca al pie del bloque copy */
.contact-pills {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.contact-pills li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--color-text-secondary, #475569);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
}
.contact-pills svg {
  width: 14px;
  height: 14px;
  color: var(--color-aloe-600, #1f7a3d);
}

/* Formulario distribuidor */
.distributor-form {
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 720px;
  margin-inline: auto;
}
.faq-item {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  overflow: hidden;
}
.faq-item summary {
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: var(--color-text-muted);
  transition: transform var(--transition-normal);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================================
   404
   ============================================================ */
.error-page {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--container-pad);
  gap: var(--space-4);
}
.error-page__code {
  font-family: var(--font-display);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-aloe-300);
  letter-spacing: -0.04em;
}
@media (min-width: 768px) { .error-page__code { font-size: 180px; } }
.error-page h1 {
  font-size: 32px;
  max-width: 24ch;
}
.error-page p {
  color: var(--color-text-secondary);
  max-width: 50ch;
}

/* ============================================================
   PROMO STRIP container helper
   ============================================================ */
.has-trust-strip {
  padding-block: var(--space-4);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ============================================================
   SHOP-BAR MÓVIL/TABLET (2026-09-06) — SOLO ≤1023px.
   El escritorio está aprobado: nada de aquí puede afectarle.
   ============================================================ */

/* Select "Uso" (proxy móvil de las tabs): oculto en tablet/desktop */
.shop-bar__uso { display: none; }
@media (max-width: 1023.98px) {
  /* Chips de tipo con altura táctil real (~40px en vez de 32) */
  .shop-type-chip__label { padding: 10px 14px; font-size: 13px; }

  /* Degradado en el borde derecho de tabs y chips: insinúa que la
     fila sigue con scroll lateral (a 360px "Durante…" quedaba cortado
     sin ninguna pista). */
  .shop-bar__tabs,
  .shop-bar__types {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}

@media (max-width: 767.98px) {
  /* Cabecera estilo editorial (ref. Abercrombie): ARRIBA las
     categorías como fila de texto (la activa, subrayada en tinta);
     DEBAJO los dos filtros (Uso · orden) como rectángulos ligeros.
     Misma tipografía en las dos filas. */

  .shop-bar .container { display: flex; flex-direction: column; }

  /* Fila 1 — los pills de categoría de siempre, solo que ARRIBA */
  .shop-bar__types {
    order: 1;
    border-top: 0;
    padding: 12px 0 10px;
    gap: 8px;
  }
  .shop-type-chip__label {
    padding: 8px 14px;
    font-size: 12.5px;
    border-width: 1px;
  }

  /* Fila 2 — desplegables Uso + orden, al 50%: pill suave con icono
     identificador a la izquierda (orden ⇅ / uso ≡) + chevron. Misma
     fuente que los chips de categoría (12.5px). */
  .shop-bar__tabs { display: none; }
  .shop-bar__uso { display: block; }
  /* Banda gris clarísima a TODO el ancho bajo los filtros: separa los
     dos planos — arriba el carril blanco de categorías (con scroll
     lateral y su degradado), abajo la barra de controles fija. Los
     pills blancos ganan contraste sobre el gris. */
  .shop-bar__row {
    order: 2;
    gap: 8px;
    margin-inline: calc(-1 * var(--container-pad));
    padding: 10px var(--container-pad) 12px;
    background: var(--color-bone, #F9FAFB);
    border-top: 1px solid var(--color-border-subtle);
  }
  .shop-bar__row .shop-bar__sort {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px 26px 9px 32px;
    min-height: 40px;
    border: 1.5px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    /* chevron (dcha) + icono de ORDENAR (izda) */
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 16 4 4 4-4'/><path d='M7 20V4'/><path d='m21 8-4-4-4 4'/><path d='M17 4v16'/></svg>");
    background-position: right 10px center, left 12px center;
    background-repeat: no-repeat, no-repeat;
  }
  /* Icono de USO (momento de aplicación): sliders de filtro */
  .shop-bar__row .shop-bar__uso {
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' x2='14' y1='4' y2='4'/><line x1='10' x2='3' y1='4' y2='4'/><line x1='21' x2='12' y1='12' y2='12'/><line x1='8' x2='3' y1='12' y2='12'/><line x1='21' x2='16' y1='20' y2='20'/><line x1='12' x2='3' y1='20' y2='20'/><line x1='14' x2='14' y1='2' y2='6'/><line x1='8' x2='8' y1='10' y2='14'/><line x1='16' x2='16' y1='18' y2='22'/></svg>");
    background-position: right 10px center, left 12px center;
  }
  .shop-bar__sort:focus,
  .shop-bar__sort:focus-visible,
  .shop-bar__sort:active { border-color: var(--color-border-default); }

  /* Aire entre la última fila de cards y la galería de fotos del pie:
     con el grid a sangre, el botón Comprar del último producto quedaba
     pegado a las imágenes. MARGEN (no padding): la galería tiene fondo
     oscuro y el hueco debe verse blanco. */
  .page-tienda .ig-strip,
  .page-tienda-micro .ig-strip { margin-top: 44px; }
}

/* ============================================================
   PDP MÓVIL (2026-09-06) — SOLO ≤767px. Escritorio intocable.
   ============================================================ */

/* Cabeceras del acordeón móvil: inexistentes en escritorio (allí
   mandan las tabs). La regla default va ANTES de la @media. */
.pdp-acc { display: none; }

/* Pill "Canal oficial" del buy box: solo existe en móvil */
.trust-pill--movil { display: none; }

/* Ídem para el item "Tienda oficial" del carrito (con el li en el
   selector: la regla base .cart-summary__trust li ganaba por
   especificidad y salía también en escritorio) */
.cart-summary__trust li.cart-trust--movil { display: none; }

/* Dúo de confianza bajo el botón Pagar del checkout: solo móvil */
.checkout-paytrust { display: none; }
@media (max-width: 767.98px) {
  /* 1. La FOTO primero (el orden base la mandaba tras TODO el buy box:
     el producto no se veía hasta 2,5 pantallas de scroll) y A SANGRE,
     como el grid de tienda. */
  .pdp { gap: 18px; }
  .pdp > .pdp__gallery-main {
    order: -1;
    margin-inline: calc(-1 * var(--container-pad));
    border-radius: 0;
    padding: var(--space-6);
    /* Un tercio más baja que el cuadrado 1:1: el título y la
       descripción entran en el primer pantallazo. */
    aspect-ratio: auto;
    height: 440px;
    padding: 0;
  }
  /* SIN zoom por SKU en móvil, e imagen ABSOLUTA llenando el visor con
     object-fit: contain. Safari iOS tiene un bug de layout con imágenes
     limitadas por max-height en flex (pinta la foto a tamaño natural y
     no recalcula al cargar: se veía gigante hasta tocar la pantalla).
     Con posicionamiento absoluto el tamaño es determinista siempre. */
  .pdp > .pdp__gallery-main img {
    transform: none;
    position: absolute;
    inset: 8px 16px;
    width: calc(100% - 32px);
    height: calc(100% - 16px);
    max-width: none;
    max-height: none;
    object-fit: contain;
  }

  /* Guarda anti scroll-horizontal fantasma (iOS): los drawers
     desplazados con translateX y los full-bleed con margen negativo no
     deben ensanchar la página. clip no rompe position:sticky. */
  html, body { overflow-x: clip; }

  /* 2. Reorden del buy box: identidad → decisión de compra → confianza
     → beneficios AL FINAL (refuerzan, no estorban el CTA).
     min-width:0 — CAUSA del scroll horizontal en iPhone: como grid
     item, el buy box crecía hasta el min-content de sus hijos
     (cart-row, rating…) y desbordaba el viewport. */
  .pdp__info { display: flex; flex-direction: column; min-width: 0; }
  .pdp__info > * { min-width: 0; }
  .pdp__cart-row .btn { min-width: 0; }
  .pdp__capacity      { order: 1; align-self: flex-start; }
  .pdp__name          { order: 2; }
  .pdp__rating-row    { order: 3; }
  .pdp__description   { order: 4; }
  .pdp__variants      { order: 5; }
  .pdp__price-row     { order: 6; }
  .pdp__cart-row      { order: 7; }
  .pdp__trust         { order: 8; }

  /* Cantidad + Añadir al carrito EN LA MISMA LÍNEA (la regla base de
     móvil los apilaba a 1 columna). Stepper un punto más compacto
     para que el botón conserve su texto completo. */
  .pdp__cart-row { grid-template-columns: auto 1fr; }
  .pdp__cart-row .qty__btn { width: 40px; }
  .pdp__cart-row .qty__value { width: 42px; }
  .pdp__benefits-grid,
  .pdp__features      { order: 9; margin-top: var(--space-5); }

  /* 3. Título contenido (editorial, como la tienda) */
  .pdp__name { font-size: 27px; line-height: 1.15; letter-spacing: -0.01em; }

  /* 4. Los 4 beneficios como tiles 2×2 COMPACTOS al cierre del buy box
     (tras las pills de confianza, antes de los acordeones) — refuerzo
     visual de compra sin robar scroll. El fallback .pdp__features
     (lista de claims) sigue fuera en móvil. */
  /* Sin el módulo de ventajas en el buy box móvil (probado en 2×2 y
     1×4 el 2026-09-07 — no aportaba): los beneficios completos siguen
     en su acordeón. */
  .pdp__benefits-grid,
  .pdp__features { display: none; }

  /* Pill de capacidad al MISMO tamaño que en las cards de tienda */
  .pdp__capacity {
    font-size: 10.5px;
    padding: 2px 8px;
  }

  /* 6. SECCIONES INFERIORES — mismo lenguaje editorial que el hero. */

  /* ACORDEÓN en lugar de tabs (decisión 2026-09-07): la página se
     centra en la conversión y el contenido se abre a demanda. Todos
     los paneles nacen plegados; pueden abrirse varios a la vez. */
  section[data-tabs] .tabs { display: none; }
  section[data-tabs] .tabs__panel { display: none !important; }
  section[data-tabs] .tabs__panel.acc-open { display: block !important; }

  .pdp-acc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 21px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--color-border-subtle);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
  }
  .pdp-acc__ico {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
    flex: none;
  }
  .pdp-acc.is-open .pdp-acc__ico { transform: rotate(180deg); }
  section[data-tabs] .tabs__panel.acc-open { padding-bottom: var(--space-5); }

  /* La imagen lateral del tab Descripción no suma en móvil */
  .pdp-tab-cols__media { display: none; }
  .pdp-tab-cols { display: block; }

  /* Títulos de sección contenidos (26→21px, como el h1 de 27) */
  .pdp-tab-cols__title,
  .cart-suggest__head h2 {
    font-size: 21px;
    line-height: 1.2;
  }

  /* Lectura: lead y párrafos un punto más finos. (!important porque
     la regla base del lead ya lo usa y ganaría siempre.) */
  .pdp-tab-content__lead { font-size: 16px !important; }
  .pdp-tab-content p:not(.pdp-tab-content__lead) {
    font-size: 15px;
    line-height: 1.65;
  }

  /* Imagen lateral del tab Descripción a sangre, como el hero */
  .pdp-tab-cols__media {
    margin-inline: calc(-1 * var(--container-pad));
    padding: var(--space-6) var(--space-8);
  }

  /* Beneficios: filas más compactas (eran 24px de padding por fila) */
  .pdp-benefits__item { padding: var(--space-4) 0; }

  /* Timeline de uso y sugerencias con ritmo móvil (menos hueco) */
  .pdp-usage-timeline { margin: var(--space-10) 0; }
  .cart-suggest {
    margin-top: var(--space-8);
    padding-block: var(--space-8);
  }
  .cart-suggest__head { margin-bottom: var(--space-5); }

  /* 5. CAJA DE CONVERSIÓN (rediseño 2026-09-07): precio, CTA y
     confianza como UN clúster con ritmo cerrado — nada flotando. */

  /* Precio con su "sin IVA" pegado en la misma línea de base (antes
     quedaba huérfano en la otra punta) */
  .pdp__price-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
    margin: 20px 0 0;   /* aire sobre el precio: arranque claro del bloque de pago */
  }
  .pdp__price-row .price--big { font-size: 26px; letter-spacing: -0.01em; }
  .pdp__price-row .legal {
    margin-left: 0;
    font-size: 11.5px;
    color: var(--color-text-muted);
  }

  .pdp__cart-row { margin-top: 12px; }

  /* Confianza: de bocadillos a LÍNEA discreta centrada — envío gratis
     + tienda oficial como microcopy con icono, separados con aire.
     (SSL y devolución, fuera en móvil: el SSL es cosa del checkout.) */
  .pdp__trust { margin-top: 14px; }
  .pdp__trust .trust-strip {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 22px;
  }
  .pdp__trust .trust-pill { display: none; }
  .pdp__trust .trust-pill:first-child,
  .pdp__trust .trust-pill--movil {
    display: inline-flex;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    font-size: 12.5px;
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  /* Cierre del clúster: aire equilibrado entre confianza y acordeones
     (sin el hueco muerto original de ~150px). */
  .pdp { padding-block: 4px 28px; }
  .section--sm[data-tabs] { padding-block: var(--space-2) var(--space-6); }
}

/* ============================================================
   CARRITO MÓVIL (2026-09-07) — SOLO ≤767px. Escritorio intocable.
   ============================================================ */
@media (max-width: 767.98px) {
  /* Sin cross-sell en el carrito: aquí la misión es EL PAGO. El
     "Completa tu pedido" vive en la PDP, que es donde se decide. */
  .page-carrito .cart-suggest { display: none; }

  /* Confianza bajo el CTA como en la PDP: línea discreta centrada con
     Envío gratis + Pago seguro SSL (la devolución, fuera). */
  .cart-summary__trust {
    flex-direction: row;
    justify-content: center;
    gap: 22px;
    margin-top: var(--space-3);
  }
  .cart-summary__trust li { font-size: 12.5px; white-space: nowrap; }
  /* Fuera devolución (2º) y envío gratis (3º — ya lo canta el hero);
     entra "Tienda oficial", que en desktop va oculto. */
  .cart-summary__trust li:nth-child(2),
  .cart-summary__trust li:nth-child(3) { display: none; }
  .cart-summary__trust li.cart-trust--movil { display: flex; }
}

/* ============================================================
   CHECKOUT MÓVIL (2026-09-07) — SOLO ≤767px. Escritorio intocable.
   ============================================================ */
@media (max-width: 767.98px) {
  /* El "Pago 100% seguro · Cifrado SSL" del header no cabe y se rompía
     en vertical sobre el logo. La confianza SSL vive en el resumen.
     (!important: el span lleva display inline en el markup.) */
  .checkout-ssl { display: none !important; }

  /* SIN puntos de fuga (decisión 2026-09-07): fuera el botón "Volver
     al carrito" y el logo se queda como marca, no como enlace. */
  .checkout-back { display: none; }
  .page-checkout .site-header__logo { pointer-events: none; }
  /* Header reducido a la marca: centrada */
  .page-checkout .site-header__inner { grid-template-columns: 1fr !important; justify-items: center; }

  /* Email sin texto de ayuda: menos ruido en el form */
  .checkout-email-helper { display: none; }

  /* Resumen recolocado al inicio (script síncrono en checkout.php).
     CLAVE: sin sticky — la regla base lo fija para la columna derecha
     de escritorio y aquí hacía que todo scrolleara POR DEBAJO del
     resumen. Altura mínima reservada para que el relleno por JS no
     desplace las secciones. */
  .checkout #checkout-form .cart-summary {
    position: static;
    min-height: 520px;
    margin-block: var(--space-2);
  }

  /* Sin el banner de envío del hero: ya se vio en el carrito y el
     resumen lo repite en su fila Envío. Y sin la línea bajo el
     subtítulo ni el helper SSL del checkbox (menos ruido). */
  .page-checkout .cart-hero__shipping { display: none; }
  .page-checkout .cart-hero { border-bottom: 0; margin-bottom: 0; }
  .page-checkout .checkbox__helper { display: none; }

  /* SEPARACIÓN ESTÁNDAR entre todos los bloques del checkout: 16px.
     El grid del .checkout y el form interno usan el mismo ritmo. */
  .checkout { gap: 16px; padding-block: var(--space-2) var(--space-10); }
  .checkout #checkout-form { display: flex; flex-direction: column; gap: 16px; }
  .checkout #checkout-form .cart-summary { margin-block: 0; }
  .checkout__section { margin: 0; }
  .page-checkout .cart-hero { padding-bottom: 0; }

  /* Fuera el "Pago seguro SSL" suelto del pie del resumen (la
     confianza vive bajo el botón Pagar) */
  .page-checkout .cart-summary__trust { display: none; }

  /* Opciones de PAGO: sin emoji (alineación limpia), título al 100% y
     la explicación DEBAJO alineada con el título. El selector `>` deja
     intactas las opciones de ENVÍO (su meta va anidada en su propio
     div y la regla anterior las rompía). */
  .payment-option { flex-wrap: wrap; row-gap: 4px; }
  .payment-option__icon { display: none; }
  .payment-option > .meta {
    flex-basis: 100%;
    padding-left: 32px;   /* círculo 20 + gap 12: texto alineado con el título */
    margin-top: -2px;
  }

  /* Bajo el CTA: fuera el legal de "no te cobraremos"; en su lugar el
     dúo de confianza estándar del funnel. */
  .checkout-nocharge { display: none; }
  .checkout-paytrust {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: var(--space-4);
  }
  .checkout-paytrust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--color-text-secondary);
    white-space: nowrap;
  }
  .checkout-paytrust svg { width: 16px; height: 16px; color: var(--color-aloe-600); }
}

/* ============================================================
   ESPECIAL TATTOO SPRAY (home, 2026-09-08)
   Escritorio ≥1024: grid de 3 · tablet y móvil: los 2 formatos
   más baratos (fuera el de 400 mL) en 2 columnas.
   ============================================================ */
@media (max-width: 1023.98px) {
  #tattoo-spray-grid { grid-template-columns: repeat(2, 1fr); }
  #tattoo-spray-grid .product-card:nth-child(3) { display: none; }
}

/* ============================================================
   HOME MÓVIL (2026-09-07) — SOLO ≤767px. Escritorio intocable.
   ============================================================ */

/* Hero móvil a medida: inexistente en escritorio */
.hero-movil { display: none; }

@media (max-width: 767.98px) {
  /* El hero de escritorio no compite en móvil */
  .page-inicio .hero { display: none; }

  /* HERO MÓVIL: foto lifestyle a pantalla (aplicación real del
     producto), degradado de tinta abajo y un único CTA. */
  .hero-movil {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 76vh;
    min-height: 76svh;
    /* Foto lifestyle genérica (vuelta 2026-09-08; la campaña del
       eraser con instagram3 queda en el historial por si se retoma) */
    background: url('../img/instagram/Aloe_instagram2.jpg') center 30% / cover no-repeat #0C120E;
    padding: 24px var(--container-pad) 30px;
  }
  .hero-movil::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Velo suave + degradado abajo para el texto */
    background:
      linear-gradient(180deg,
        rgba(3, 7, 18, 0.10) 35%,
        rgba(3, 7, 18, 0.55) 68%,
        rgba(3, 7, 18, 0.86) 100%);
  }
  /* "Rework." con el azul de la campaña (como en el hero de escritorio) */
  .hero-movil__title em {
    font-style: normal;
    background: linear-gradient(95deg, #6EA8FF 0%, #3b82f6 60%, #2563eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Variante PRO (distribuidores): tarjeta B2B dorada sobre negro.
     La foto ya es oscura — velo mínimo, solo apoyo abajo. */
  .hero-movil--pro {
    background: url('../img/header/Header_Distributors.jpg') 62% center / auto 130% no-repeat #05070B;
    min-height: 68vh;
    min-height: 68svh;
  }
  .hero-movil--pro::before {
    background: linear-gradient(180deg,
      rgba(3, 7, 18, 0.05) 40%,
      rgba(3, 7, 18, 0.45) 70%,
      rgba(3, 7, 18, 0.82) 100%);
  }
  .hero-movil--pro .hero-movil__title em {
    background: linear-gradient(95deg, #F7D774 0%, #E8B72E 55%, #C99414 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .page-distribuidores .hero { display: none; }

  /* "¿Quieres ser distribuidor?": copy centrado, y los 4 requisitos
     como TARJETAS de línea fina (estilo Apple: monocromo, trazo fino,
     check en aro), centradas en el eje de la sección. */
  .page-distribuidores .team-apply__copy { text-align: center; }
  .page-distribuidores .team-apply__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: var(--space-5) 0 0;
    padding: 0;
    text-align: left;
  }
  .page-distribuidores .team-apply__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-paper, #fff);
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    padding: 13px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text-primary);
  }
  .page-distribuidores .team-apply__list li svg {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 5px;
    border: 1px solid var(--color-border-default);
    border-radius: 50%;
    color: var(--color-ink-900, #030712);
    stroke-width: 2;
  }

  /* NOSOTROS (contacto): copy centrado y acentos en monocromo fino —
     los iconos coral de Ubicación/Horario pasan a tinta de trazo fino
     (mismo lenguaje Apple que el resto de acentos móviles). */
  .page-nosotros .team-apply__copy { text-align: center; }
  .page-nosotros .contact-meta { text-align: left; }
  .page-nosotros .contact-meta__item dt i,
  .page-nosotros .contact-meta__item dt svg {
    background: none !important;
    color: var(--color-ink-900, #030712) !important;
    stroke-width: 1.5;
  }
  .page-nosotros .contact-pills { justify-content: center; }
  .page-nosotros .contact-pills svg { stroke-width: 1.5; }

  /* Separación ESTÁNDAR de 16px entre bloques: intro → Ubicación →
     Horario → formulario (venían a 24/12/40). */
  .page-nosotros .team-apply__copy p { margin-bottom: 0; }
  .page-nosotros .contact-meta {
    margin-block: 16px 0;
    gap: 16px;
  }
  .page-nosotros .team-apply__inner { gap: 16px; }
  .page-nosotros .team-apply__form { margin-top: 0; }
  .hero-movil__content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #fff;
  }
  .hero-movil__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
  }
  .hero-movil__title {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: clamp(38px, 11vw, 46px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.02em;
  }
  .hero-movil__sub {
    margin: 0 0 6px;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    max-width: 30ch;
  }
  .hero-movil__alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
  }
  .hero-movil__alt svg { width: 14px; height: 14px; }

  /* VALUE-STRIP como PROTAGONISTA: 2×2 de tiles blancos con relieve
     sobre banda bone — el posicionamiento (envío, precio, oficial,
     48h) se lee como promesa de marca, no como letra pequeña. */
  .page-inicio .value-strip {
    background: var(--color-bone, #F9FAFB);
    padding-block: 20px;
  }
  .page-inicio .value-strip__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  /* Tiles estilo APPLE: monocromo, líneas finas, todo centrado.
     El icono en tinta fina es el protagonista silencioso; cero verde,
     cero sombras de color. */
  .page-inicio .value-strip__item {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--color-paper, #fff);
    border: 1px solid var(--color-border-subtle);
    border-radius: 14px;
    padding: 20px 12px 18px;
    box-shadow: none;
  }
  .page-inicio .value-strip__text {
    align-items: center;
    text-align: center;
    gap: 3px;
  }
  .page-inicio .value-strip__icon {
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    color: var(--color-ink-900, #030712);
    display: inline-flex;
  }
  .page-inicio .value-strip__icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.5;
  }
  .page-inicio .value-strip__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    text-align: center;
  }
  .page-inicio .value-strip__sub {
    font-size: 11.5px;
    color: var(--color-text-muted);
    text-align: center;
  }

  /* Testimonios fuera en móvil (decisión 2026-09-07) */
  .page-inicio .section--testimonios { display: none; }

  /* Bestsellers a GRID DE 4: fuera los dos CB2 (posiciones 3 y 4 del
     listado server-side) — dos filas limpias de 2. */
  #bestsellers .product-card:nth-child(3),
  #bestsellers .product-card:nth-child(4) { display: none; }

  /* "Desarrollo y fabricación propia" a 4 piezas: fuera Asesoría (05)
     y Realizado en España (06) — cuadrícula 2×2 equilibrada. */
  .page-inicio .why-features .why-feature:nth-child(n+5) { display: none; }
}

/* ============================================================
   CUENTA MÓVIL (2026-09-07) — SOLO ≤767px. Escritorio intocable.
   El sidebar apilado encima de los paneles no navegaba: pasa a
   ser una fila de chips con scroll horizontal (mismo lenguaje que
   los chips de categoría de tienda). Los !important pisan los
   estilos inline del PHP.
   ============================================================ */
@media (max-width: 767.98px) {
  /* Welcome compacto: menos aire arriba, título contenido, CTA debajo,
     todo centrado en el eje */
  .page-cuenta .account__welcome {
    margin-top: var(--space-4) !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .page-cuenta .account__welcome h1 { font-size: 26px !important; }
  .page-cuenta .account__welcome .text-muted { font-size: 13.5px; }
  /* Aire inferior estándar: la banda de stats va oculta en móvil y los
     paneles quedaban pegados al ig-strip del footer (44px, como el
     respiro del ig-strip en tienda). Pisa el padding-bottom:0 base. */
  .page-cuenta .account {
    padding-block: var(--space-4) 44px;
    gap: var(--space-6);   /* aire entre la fila de chips y el panel */
  }

  /* Sidebar → chips scrolleables a sangre con fade lateral */
  .page-cuenta .account__sidebar {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: 2px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--container-pad, 20px));
    padding-inline: var(--container-pad, 20px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }
  .page-cuenta .account__sidebar::-webkit-scrollbar { display: none; }
  .page-cuenta .account__sidebar a {
    flex: 0 0 auto;
    padding: 10px 16px;   /* ~40px de alto: navegación primaria, área táctil cómoda */
    border: 1.5px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    background: var(--color-paper);
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    white-space: nowrap;
  }
  .page-cuenta .account__sidebar a svg { width: 14px; height: 14px; }
  .page-cuenta .account__sidebar a.is-active {
    background: var(--color-aloe-500);
    border-color: var(--color-aloe-500);
    color: var(--color-paper);
    box-shadow: none;
  }
  /* Cerrar sesión: chip normal al final de la fila — sus inline
     styles de separador vertical (margin/border/padding-top) no
     tienen sentido en horizontal. */
  .page-cuenta .account__sidebar a[href*="auth-logout"] {
    margin-top: 0 !important;
    border-top-width: 1.5px !important;
    padding-top: 10px !important;
  }

  /* Resumen sin stats en móvil (decisión 2026-09-07): directo a los
     últimos pedidos. */
  .page-cuenta .account__stats { display: none; }

  /* Lista guardada: manda el grid editorial de tienda (mismas cards
     server-rendered); el .wishlist-grid clásico queda para escritorio. */
  .page-cuenta .wishlist-grid { display: none; }
  .page-cuenta .wishlist-grid--movil { display: grid; }

  /* Mis datos: reorden (decisión 2026-09-07) — Cuenta arriba, luego
     Datos personales y al final Cambiar contraseña. Los !important
     pisan los inline styles del h3 "Datos personales" (que en el orden
     de escritorio iba primero y llevaba el separador anulado). */
  /* :not([hidden]) — sin él, este display:flex pisaba el atributo
     hidden del sistema de tabs y "Mis datos" se veía SIEMPRE debajo
     de cualquier tab en móvil (bug corregido 2026-09-14). */
  .page-cuenta [data-panel="mis-datos"]:not([hidden]) { display: flex; flex-direction: column; }
  .page-cuenta [data-panel="mis-datos"] > header { order: 1; }
  .page-cuenta [data-panel="mis-datos"] .cuenta-section__title:nth-of-type(2) { order: 2; margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
  .page-cuenta [data-panel="mis-datos"] .cuenta-readonly { order: 3; }
  .page-cuenta [data-panel="mis-datos"] .cuenta-section__title:nth-of-type(1) { order: 4; margin-top: var(--space-8) !important; padding-top: var(--space-6) !important; border-top: 1px solid var(--color-border-subtle) !important; }
  .page-cuenta [data-panel="mis-datos"] form[data-cuenta-form="profile"] { order: 5; }
  .page-cuenta [data-panel="mis-datos"] .cuenta-section__title:nth-of-type(3) { order: 6; }
  .page-cuenta [data-panel="mis-datos"] form[data-cuenta-form="password"] { order: 7; }
}

/* El grid móvil de la lista guardada solo existe ≤767 (regla base:
   oculto; el media de arriba lo enciende). */
.wishlist-grid--movil { display: none; }

/* ============================================================
   PAGO KO (TPV Redsys, 2026-09-08) — pantalla de reintento tras un
   pago denegado/cancelado. Rollo Apple: icono de trazo fino en aro,
   card informativa del pedido reservado y checks de tranquilidad.
   ============================================================ */
.pago-ko {
  max-width: 470px;
  margin: 0 auto;
  padding: 48px 0 72px;
  text-align: center;
}
.pago-ko__icon {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border: 1.5px solid var(--color-border-default);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-900, #030712);
}
.pago-ko__icon > svg { width: 26px; height: 26px; stroke-width: 1.5; }
.pago-ko__icon-x {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-rose-500, #e0394d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bone, #fff);
}
.pago-ko__icon-x svg { width: 12px; height: 12px; stroke-width: 3; }
.pago-ko__eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}
.pago-ko__title {
  font-size: 26px;
  margin: 8px 0 10px;
  letter-spacing: -0.02em;
}
.pago-ko__lead {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 22px;
}
.pago-ko__order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-paper, #fff);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 18px;
  text-align: left;
}
.pago-ko__order-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  font-weight: 700;
}
.pago-ko__order-ref {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  font-feature-settings: "tnum" on;
}
.pago-ko__order-side { display: flex; align-items: center; gap: 12px; }
.pago-ko__order-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(234, 179, 8, 0.14);
  color: #854d0e;
  white-space: nowrap;
}
.pago-ko__order-pill svg { width: 12px; height: 12px; stroke-width: 2.5; }
.pago-ko__order-total {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  font-feature-settings: "tnum" on;
}
.pago-ko__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}
.pago-ko__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.pago-ko__list svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: var(--color-aloe-600, #2f6a3a);
  flex: none;
  margin-top: 2px;
}
.pago-ko__alt {
  display: inline-flex;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: underline;
}
.pago-ko__help {
  margin: 26px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.pago-ko__help a { color: inherit; text-decoration: underline; }
@media (max-width: 767.98px) {
  .pago-ko { padding: 32px 0 56px; }
  .pago-ko__title { font-size: 23px; }
}

/* ============================================================
   PÁGINAS LEGALES (2026-09-07) — aviso-legal, privacidad, cookies,
   condiciones-de-compra. Prosa contenida, legible en cualquier ancho.
   ============================================================ */
.legal-page {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-10) var(--space-16);
}
.legal-page h1 {
  font-size: 32px;
  margin: 0 0 var(--space-2);
}
.legal-page .legal-updated {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0 0 var(--space-8);
}
.legal-page h2 {
  font-size: 20px;
  margin: var(--space-8) 0 var(--space-3);
}
.legal-page h3 {
  font-size: 16px;
  margin: var(--space-5) 0 var(--space-2);
}
.legal-page p,
.legal-page li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.legal-page p { margin: 0 0 var(--space-3); }
.legal-page ul,
.legal-page ol {
  margin: 0 0 var(--space-3);
  padding-left: 22px;
}
.legal-page ul { list-style: disc; }
.legal-page ol { list-style: decimal; }
.legal-page strong { color: var(--color-text-primary); }
.legal-page a { color: var(--color-aloe-700); text-decoration: underline; }
.legal-page .legal-table-wrap { overflow-x: auto; margin: 0 0 var(--space-3); }
.legal-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.legal-page th,
.legal-page td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  vertical-align: top;
}
.legal-page th {
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
@media (max-width: 767.98px) {
  .legal-page { padding-block: var(--space-6) 44px; }
  .legal-page h1 { font-size: 26px; }
  .legal-page h2 { font-size: 18px; }
}


/* ===== search.css ===== */
/* ============================================================
   ALOE TATTOO — BUSCADOR
   Overlay desktop + fullscreen móvil + página de resultados.
   Prefijo .site-search__ para evitar colisión con otros módulos.
   ============================================================ */

/* ============================================================
   OVERLAY (desktop modal + mobile fullscreen)
   ============================================================ */

.site-search {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
}
.site-search.is-open {
  display: block;
}

.site-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 20, 16, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.site-search.is-open .site-search__backdrop {
  opacity: 1;
}

.site-search__panel {
  position: relative;
  background: var(--color-paper);
  width: 100%;
  /* Desktop: panel centrado superior con ancho cómodo. */
  max-width: 760px;
  margin-inline: auto;
  margin-top: 80px;
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 64px rgba(14, 20, 16, 0.25);
  transform: translateY(-12px);
  opacity: 0;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
}
.site-search.is-open .site-search__panel {
  transform: translateY(0);
  opacity: 1;
}

/* Mobile: pantalla completa, sin radius, sin margin */
@media (max-width: 767.98px) {
  .site-search__backdrop {
    background: var(--color-paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-search__panel {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
  }
}

/* ============================================================
   FORM + INPUT
   ============================================================ */

.site-search__form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.site-search__input-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.site-search__input-icon {
  width: 22px;
  height: 22px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  pointer-events: none;
}

.site-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text-primary);
  padding: var(--space-2) 0;
  outline: none;
}
.site-search__input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.55;
  font-weight: 400;
}
@media (min-width: 768px) {
  .site-search__input { font-size: 22px; }
}

/* Quita la X nativa del search input (la sustituimos por nuestro botón). */
.site-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.site-search__input::-webkit-search-decoration   { -webkit-appearance: none; }

.site-search__close {
  flex-shrink: 0;
}

/* ============================================================
   BODY (sugerencias / resultados / vacío / error)
   ============================================================ */

.site-search__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

/* Estado inicial */
.site-search__initial {
  padding: var(--space-2) var(--space-5);
}
.site-search__hint {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.site-search__suggest-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}
.site-search__suggest {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.site-search__suggest a {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(36, 74, 41, 0.06);
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast);
}
.site-search__suggest a:hover,
.site-search__suggest a:focus-visible {
  background: rgba(36, 74, 41, 0.12);
}

/* Lista de resultados */
.site-search__results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-search__result {
  display: block;
}
.site-search__result a {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--color-border-subtle);
}
.site-search__result a:hover,
.site-search__result.is-active a,
.site-search__result a:focus-visible {
  background: rgba(36, 74, 41, 0.05);
  outline: none;
}
.site-search__result:last-child a {
  border-bottom: 0;
}

.site-search__result-img {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.site-search__result-img img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}

.site-search__result-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-search__result-cat {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Pill de capacidad sobre el nombre. Reusa .product-card__capacity (ya
   trae fondo crema + borde aloe-300 + uppercase). Aquí la hacemos un
   poco más compacta que la card de tienda y la separamos del título. */
.site-search__result-capacity {
  margin-bottom: 6px;
  padding: 3px 9px;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-width: 1px;
}
.site-search__result-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.site-search__result-name mark {
  background: rgba(36, 74, 41, 0.18);
  color: inherit;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 1px;
}
.site-search__result-sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--color-text-muted);
}
.site-search__result-sub--out {
  color: var(--color-coral-500, #d96363);
  font-weight: 600;
}

.site-search__result-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  text-align: right;
}
.site-search__result-price strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.site-search__result-price s {
  color: var(--color-text-muted);
  font-size: 12px;
  text-decoration: line-through;
}

/* Estados auxiliares */
.site-search__loading,
.site-search__error,
.site-search__empty {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}
.site-search__empty-lead {
  font-size: 16px;
  color: var(--color-text-primary);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.site-search__empty-help {
  margin: 0;
}
.site-search__error {
  color: var(--color-coral-500, #d96363);
}

/* Footer del overlay: enlace a la página completa */
.site-search__view-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(36, 74, 41, 0.04);
  border-top: 1px solid var(--color-border-subtle);
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--transition-fast);
  margin-top: auto;
  position: sticky;
  bottom: 0;
}
.site-search__view-all:hover,
.site-search__view-all:focus-visible {
  background: rgba(36, 74, 41, 0.08);
  outline: none;
}
.site-search__view-all svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   PÁGINA BUSCAR.PHP (resultados completos)
   ============================================================ */

.search-page__head {
  margin: var(--space-6) 0 var(--space-8);
}
.search-page__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 var(--space-5);
  line-height: 1.2;
}
@media (min-width: 768px) {
  .search-page__title { font-size: 36px; }
}

.search-page__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 10px 10px var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: #fff;
  /* Ancho 100% del contenedor para igualar al ancho del grid de
     resultados (no tiene sentido capar el form si los productos
     ocupan el contenedor entero). */
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-page__form:focus-within {
  border-color: var(--color-text-primary);
  box-shadow: 0 0 0 3px rgba(14, 20, 16, 0.06);
}
.search-page__form-icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.search-page__form input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--color-text-primary);
  padding: var(--space-2) 0;
}
.search-page__form input[type="search"]::placeholder {
  color: var(--color-text-muted);
  opacity: 0.55;
  font-weight: 400;
}
@media (min-width: 768px) {
  .search-page__form input[type="search"] { font-size: 17px; }
}

/* Botón "Buscar" — look elevado en negro (no usamos coral para no
   competir con el CTA de "Comprar"). Tipografía display, padding
   generoso, sutil sombra en reposo, hover/focus que oscurece. */
.search-page__form-btn {
  appearance: none;
  border: 0;
  background: var(--color-text-primary, #0e1410);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.search-page__form-btn:hover,
.search-page__form-btn:focus-visible {
  background: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  outline: none;
}
.search-page__form-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.search-page__suggest {
  /* Margen inferior generoso para que el banner de stats del footer
     (+10 años, +340 estudios…) respire respecto a los pills de
     sugerencias. Mismo aire que tienen los grids de tienda. */
  margin: var(--space-6) 0 var(--space-16);
}
.search-page__suggest-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}
.search-page__suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.search-page__suggest-list a {
  display: inline-flex;
  padding: 8px 16px;
  background: rgba(36, 74, 41, 0.06);
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast);
}
.search-page__suggest-list a:hover {
  background: rgba(36, 74, 41, 0.12);
}

.search-page__empty {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  /* Aire inferior antes del banner de stats del footer. */
  margin: 0 auto var(--space-16);
  max-width: 540px;
}
.search-page__empty-icon {
  width: 48px;
  height: 48px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.search-page__empty-lead {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
}
.search-page__empty-cta {
  margin-top: var(--space-6);
  font-size: 14px;
  color: var(--color-text-muted);
}
.search-page__empty-cta a {
  color: var(--color-text-primary);
  font-weight: 600;
}

.search-page__grid {
  margin-bottom: var(--space-12);
}

/* Cuando no hay JS, las cards en el grid llevan wrapper div con
   data-search-result — el wrapper no debe romper el grid. */
.search-page__grid > div[data-search-result] {
  display: contents;
}

/* Skip-link helper (ya usado en header pero aseguramos por si falta) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bloqueo del scroll del body cuando hay overlay abierto */
body.has-search-open {
  overflow: hidden;
}


/* ===== order-detail.css ===== */
/* ============================================================
   ALOE TATTOO — DETALLE DE PEDIDO (cuenta-pedido.php)
   Prefijo .order-detail-* / .order-timeline-* para evitar colisión.
   ============================================================ */

.account-order-detail {
  padding-block: var(--space-6) var(--space-12);
}

/* ============================================================
   CABECERA — número, fecha, estado, total
   ============================================================ */
.order-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  margin-block: var(--space-4) var(--space-6);
}
.order-detail-header__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.order-detail-header__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-rose-500);
}
.order-detail-header__id {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.1;
  font-feature-settings: "tnum" on;
}
@media (min-width: 768px) {
  .order-detail-header__id { font-size: 34px; }
}
.order-detail-header__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 14px;
  margin: 0;
}
.order-detail-header__date svg { width: 16px; height: 16px; opacity: 0.8; }

.order-detail-header__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}
.order-detail-header__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
.order-detail-header__total-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}
.order-detail-header__total-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text-primary);
  font-feature-settings: "tnum" on;
}

/* ============================================================
   TIMELINE de estados
   ============================================================ */
.order-detail-timeline {
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-6);
  overflow-x: auto;
}
.order-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  position: relative;
}
@media (min-width: 768px) {
  .order-timeline {
    grid-template-columns: repeat(var(--steps, 5), 1fr);
    gap: 0;
  }
}
.order-timeline__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
@media (min-width: 768px) {
  .order-timeline__step {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding-inline: var(--space-2);
  }
  /* Línea conectora horizontal entre dots */
  .order-timeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    top: 18px;
    height: 2px;
    background: var(--color-border-subtle);
    z-index: 0;
  }
  .order-timeline__step--done:not(:last-child)::after {
    background: #15803d;
  }
}
.order-timeline__dot {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text-muted);
  border: 2px solid var(--color-border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.order-timeline__dot svg { width: 16px; height: 16px; stroke-width: 2; }

/* Estados del step */
.order-timeline__step--done .order-timeline__dot {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}
.order-timeline__step--current .order-timeline__dot {
  background: rgba(70, 130, 180, 0.18);
  border-color: #1d5489;
  color: #1d5489;
  animation: order-detail-pulse 1.6s ease-in-out infinite;
}
.order-timeline__step--pending .order-timeline__dot {
  background: var(--color-paper);
}
.order-timeline__step--skipped .order-timeline__dot {
  opacity: 0.45;
}
.order-timeline__step--cancelled .order-timeline__dot {
  background: rgba(220, 90, 80, 0.14);
  border-color: var(--color-coral-500, #d96363);
  color: var(--color-coral-700, #b94236);
}
@keyframes order-detail-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 84, 137, 0.40); }
  50%      { box-shadow: 0 0 0 6px rgba(29, 84, 137, 0); }
}

.order-timeline__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.order-timeline__step--pending .order-timeline__label,
.order-timeline__step--skipped .order-timeline__label {
  color: var(--color-text-muted);
  font-weight: 500;
}
.order-timeline__time {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-feature-settings: "tnum" on;
}

/* ============================================================
   LAYOUT 2 columnas (main + side)
   ============================================================ */
.order-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .order-detail-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }
  .order-detail-side {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}
.order-detail-main,
.order-detail-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ============================================================
   CARDS comunes
   ============================================================ */
.order-detail-card {
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.order-detail-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.order-detail-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}
.order-detail-card__title svg {
  width: 18px;
  height: 18px;
  color: var(--color-aloe-700, #1f3f24);
}
.order-detail-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(36, 74, 41, 0.10);
  color: var(--color-aloe-700, #1f3f24);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

/* ============================================================
   PRODUCTOS
   ============================================================ */
.order-detail-products {
  list-style: none;
  margin: 0;
  padding: 0;
}
.order-detail-product {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.order-detail-product:first-child { padding-top: 0; }
.order-detail-product:last-child  { padding-bottom: 0; border-bottom: 0; }

.order-detail-product__media {
  width: 128px;
  height: 128px;
  background: #fff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.order-detail-product__media a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.order-detail-product__media img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}
/* Pill de capacidad — reusa .product-card__capacity (mismo lenguaje
   visual que tienda, buscador, wishlist). Compacta para no robar
   foco al título. */
.order-detail-product__capacity {
  align-self: flex-start;
  padding: 3px 9px;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-width: 1px;
  margin-bottom: 4px;
}
.order-detail-product__placeholder {
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-detail-product__placeholder svg { width: 24px; height: 24px; }

.order-detail-product__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-detail-product__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-detail-product__name a { color: inherit; text-decoration: none; }
.order-detail-product__name a:hover { color: var(--color-aloe-700); text-decoration: underline; }
.order-detail-product__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 4px;
  white-space: nowrap;
}
.order-detail-product__sku {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  font-family: var(--font-display);
}
.order-detail-product__qty {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 2px 0 0;
}
.order-detail-product__total {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-feature-settings: "tnum" on;
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
   DIRECCIONES
   ============================================================ */
.order-detail-addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .order-detail-addresses { grid-template-columns: 1fr 1fr; }
}
.order-detail-addresses__label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.order-detail-addresses__notes {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--color-text-secondary);
  font-style: italic;
}
.order-detail-address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-detail-address strong {
  font-weight: 700;
  font-family: var(--font-display);
}
.order-detail-address__phone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.order-detail-address__phone svg { width: 13px; height: 13px; }

/* ============================================================
   PAGO + ENVÍO
   ============================================================ */
.order-detail-payment-shipping {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .order-detail-payment-shipping { grid-template-columns: 1fr 1fr; }
}
.order-detail-payment-shipping__label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.order-detail-payment-shipping__value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}
.order-detail-payment-shipping__hint {
  font-family: var(--font-body, var(--font-display));
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 4px;
}
.order-detail-payment-shipping__sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.order-detail-payment-shipping__sub code {
  font-size: 12.5px;
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.order-detail-payment-shipping__cta {
  margin-top: var(--space-2);
}

/* ============================================================
   NOTAS
   ============================================================ */
.order-detail-notes {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(36, 74, 41, 0.04);
  border-left: 3px solid var(--color-aloe-600);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* ============================================================
   RESUMEN ECONÓMICO (sidebar)
   ============================================================ */
.order-detail-summary__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.order-detail-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 14px;
}
.order-detail-summary__row dt {
  margin: 0;
  color: var(--color-text-secondary);
}
.order-detail-summary__row dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-text-primary);
  font-feature-settings: "tnum" on;
}
.order-detail-summary__row--muted dt,
.order-detail-summary__row--muted dd {
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.order-detail-summary__row--discount dd {
  color: #15803d;
}
.order-detail-summary__free {
  color: #15803d;
  font-weight: 700;
}
.order-detail-summary__coupon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: rgba(36, 74, 41, 0.08);
  color: var(--color-aloe-700);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
}
.order-detail-summary__row--total {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 16px;
}
.order-detail-summary__row--total dt {
  color: var(--color-text-primary);
  font-weight: 700;
  font-family: var(--font-display);
}
.order-detail-summary__row--total dd {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text-primary);
}

/* ============================================================
   ACCIONES (sidebar)
   ============================================================ */
.order-detail-actions__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.order-detail-actions__list .btn {
  justify-content: flex-start;
  width: 100%;
}
.order-detail-actions__hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  padding: 6px 4px;
}

/* ============================================================
   Empty / fallback texts
   ============================================================ */
.order-detail-empty {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

/* ============================================================
   Solicitudes del cliente (cancelación / devolución)
   ============================================================ */
.order-request-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  background: rgba(70, 130, 180, 0.08);
  border: 1px solid rgba(70, 130, 180, 0.25);
  color: #1d5489;
}

.order-request-notice svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.order-request-notice--ok {
  background: rgba(34, 140, 107, 0.10);
  border-color: rgba(34, 140, 107, 0.28);
  color: var(--color-aloe-700, #1f6e54);
}

.order-request-notice--warn {
  background: rgba(220, 90, 80, 0.08);
  border-color: rgba(220, 90, 80, 0.25);
  color: var(--color-coral-700, #b94236);
}

.order-request-danger {
  color: var(--color-coral-700, #b94236) !important;
  border-color: rgba(220, 90, 80, 0.4) !important;
}

.order-request-danger:hover {
  background: rgba(220, 90, 80, 0.06) !important;
}

.order-request-note {
  width: 100%;
  margin-bottom: 8px;
  font-size: 13px;
}

.order-request-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-bg-secondary, #f9fafb);
  border: 1px solid var(--color-border-subtle, #e5e7eb);
  border-radius: 10px;
  padding: 14px;
}

.order-request-panel[hidden] { display: none; }

.order-request-panel__hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.order-request-item {
  background: #fff;
  border: 1px solid var(--color-border-subtle, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}

.order-request-item.is-selected { border-color: rgba(234, 124, 42, 0.5); }

.order-request-item__check {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.order-request-item__check input {
  width: 16px;
  height: 16px;
  accent-color: #ea7c2a;
  flex: none;
}

.order-request-item__check em {
  font-style: normal;
  color: var(--color-text-muted);
  font-weight: 400;
}

.order-request-item__fields {
  display: none;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  margin-top: 10px;
}

.order-request-item.is-selected .order-request-item__fields { display: grid; }

/* Selects de unidades/motivo: compactos — el .field__input base (16px,
   padding 14/16) queda desproporcionado dentro de la línea de artículo. */
.order-request-item__fields .field__input {
  font-size: 13px;
  padding: 8px 10px;
}

.order-request-panel__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ============================================================
   MÓVIL (≤767.98) — seguimiento.php + cuenta-pedido.php
   Escritorio intocable: todo dentro del media. Ritmo estándar de
   bloque 16px (los inline styles de seguimiento.php usan
   space-5/6 → hace falta !important para pisarlos).
   ============================================================ */
@media (max-width: 767.98px) {
  .order-detail-header {
    padding: var(--space-5);
    margin-block: var(--space-4) !important;
  }
  /* Cabecera: estado a la izquierda, total a la derecha en una fila */
  .order-detail-header__side {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .order-detail-timeline { margin-bottom: var(--space-4); }
  form.order-detail-card { margin-bottom: var(--space-4) !important; }
  .order-detail-summary { margin-top: var(--space-4) !important; }
  .order-detail-main,
  .order-detail-side { gap: var(--space-4); }

  /* Línea de producto compacta: miniatura 64px y nombre a 2 líneas
     (en escritorio la miniatura de 128px dejaba ~100px al nombre). */
  .order-detail-product {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: var(--space-3);
  }
  .order-detail-product__media { width: 64px; height: 64px; }
  .order-detail-product__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Timeline vertical: conector fino entre dots, verde en tramos
     completados (mismo lenguaje que la línea horizontal de escritorio). */
  .order-timeline__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 38px;
    width: 2px;
    height: calc(var(--space-4) - 4px + 2px);
    background: var(--color-border-subtle);
    z-index: 0;
  }
  .order-timeline__step--done:not(:last-child)::before { background: #15803d; }

  /* --- cuenta-pedido.php: REORDEN de módulos (decisión 2026-09-07) ---
     Cabecera → Resumen → Productos → Timeline → Pago y envío →
     Direcciones → Notas → Acciones. Con display:contents las cards de
     las dos columnas pasan a ser hijas flex del contenedor y se
     ordenan libremente; el ritmo lo pone el gap (los margins propios
     de cada pieza se anulan). */
  .account-order-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-4) 44px;
  }
  .account-order-detail .order-detail-layout,
  .account-order-detail .order-detail-main,
  .account-order-detail .order-detail-side { display: contents; }

  .account-order-detail .order-detail-header  { margin-block: 0 !important; order: 1; }
  .account-order-detail .order-detail-summary { margin-top: 0 !important;   order: 2; }
  .account-order-detail .order-detail-main > .order-detail-card:nth-of-type(1) { order: 3; } /* Productos */
  .account-order-detail .order-detail-timeline { margin-bottom: 0; order: 4; }
  .account-order-detail .order-detail-main > .order-detail-card:nth-of-type(3) { order: 5; } /* Pago y envío */
  .account-order-detail .order-detail-main > .order-detail-card:nth-of-type(2) { order: 6; } /* Direcciones */
  .account-order-detail .order-detail-main > .order-detail-card:nth-of-type(4) { order: 7; } /* Notas (si hay) */
  .account-order-detail .order-detail-actions { order: 8; }
}


/* ===== factura.css ===== */
/* ============================================================
   ALOE TATTOO — FACTURA
   Diseño elevado al lenguaje visual del sitio:
     - eyebrow rosa rose-500
     - display Inter Tight
     - pills verde aloe para capacidades (reusa .product-card__capacity)
     - imagen del producto por línea con halo radial sutil
     - acentos color aloe-700 + barras finas
   En @media print se neutraliza todo lo decorativo (color → tinta,
   fondos blancos) para una factura A4 legible y económica de imprimir.
   ============================================================ */

.factura-page {
  padding-block: var(--space-6) var(--space-12);
}

/* ============================================================
   TOOLBAR (no-print)
   ============================================================ */
.factura-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.factura-toolbar__hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}

/* ============================================================
   DOCUMENTO — contenedor principal
   ============================================================ */
.factura {
  background: #fff;
  color: var(--color-text-primary, #0f0f0f);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -16px rgba(15, 32, 18, 0.08), 0 2px 6px rgba(15, 32, 18, 0.04);
  padding: 56px 64px;
  max-width: 880px;
  margin: 0 auto;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  line-height: 1.55;
  position: relative;
  overflow: hidden;
}
/* Banda fina superior verde aloe — detalle editorial sutil */
.factura::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-aloe-600, #244a29) 0%, var(--color-aloe-400, #5e8a5e) 100%);
}

/* ============================================================
   HEAD — brand + título + meta
   ============================================================ */
.factura__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: start;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.factura__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* logo y datos pegados a la izquierda */
  gap: 40px;                 /* aire entre logo y datos fiscales */
}
.factura__logo {
  max-height: 32px;
  width: auto;
  align-self: flex-start;    /* defensivo: el flex no estira la imagen */
  display: block;
}
.factura__company {
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-secondary, #555);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.factura__company strong {
  color: var(--color-text-primary, #0f0f0f);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.factura__title {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.factura__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-rose-500, #e0394d);
}
.factura__title h1 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-text-primary, #0f0f0f);
}
.factura__meta {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 6px;
  column-gap: 16px;
  margin: 0;
  font-size: 12.5px;
}
.factura__meta > div { display: contents; }
.factura__meta dt {
  color: var(--color-text-muted, #777);
  font-weight: 500;
  text-align: right;
}
.factura__meta dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-primary, #0f0f0f);
  font-feature-settings: "tnum" on;
  text-align: right;
}

/* ============================================================
   ADDRESSES — facturar a + enviar a
   ============================================================ */
.factura__addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}
.factura__address-block {
  background: rgba(36, 74, 41, 0.03);
  border: 1px solid rgba(36, 74, 41, 0.08);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.factura__address-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-aloe-700, #1f3f24);
  margin-bottom: 10px;
}
.factura__address-icon {
  width: 14px;
  height: 14px;
}
.factura__address-block address {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--color-text-primary, #0f0f0f);
}
.factura__address-block address strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}
.factura__empty {
  color: var(--color-text-muted, #999);
  font-style: italic;
  margin: 0;
  font-size: 13px;
}

/* ============================================================
   SECTION HEAD (eyebrow + h2)
   ============================================================ */
.factura__section-head {
  margin-bottom: 16px;
}
.factura__section-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-rose-500, #e0394d);
  margin-bottom: 4px;
}
.factura__section-head h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

/* ============================================================
   LINES — listado de productos (sin tabla, cards apiladas)
   ============================================================ */
.factura__lines {
  margin-bottom: 36px;
}
.factura-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--color-text-primary);
}
.factura-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 80px 100px 100px;
  gap: 18px;
  align-items: center;
  padding: 16px 4px;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Imagen del producto con halo verde aloe sutil — mismo lenguaje
   que la PDP y las cards de tienda. */
.factura-line__media {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.factura-line__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(36, 74, 41, 0.10), transparent 70%);
  pointer-events: none;
}
.factura-line__media img {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.factura-line__media svg {
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
}

.factura-line__info {
  min-width: 0;
}
.factura-line__name {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.factura-line__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* Pill de capacidad — reusa .product-card__capacity (mismo lenguaje
   visual que tienda, buscador, wishlist, detalle de pedido). Compacta. */
.factura-line__capacity {
  align-self: flex-start;
  padding: 3px 9px;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-width: 1px;
}
.factura-line__sku,
.factura-line__cat {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  letter-spacing: 0.2px;
}
.factura-line__cat::before {
  content: "·";
  margin-right: 8px;
  color: var(--color-text-muted);
}

/* Columnas numéricas — alineadas a la derecha, label arriba muted */
.factura-line__qty,
.factura-line__price,
.factura-line__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  font-feature-settings: "tnum" on;
}
.factura-line__qty-label,
.factura-line__price-label,
.factura-line__total-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.factura-line__qty strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-primary);
}
.factura-line__price span:not(.factura-line__price-label) {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.factura-line__total strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15.5px;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* ============================================================
   BOTTOM — pago + totales
   ============================================================ */
.factura__bottom {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: 32px;
  align-items: start;
  margin-bottom: 36px;
}

.factura__payment {
  background: rgba(36, 74, 41, 0.03);
  border: 1px solid rgba(36, 74, 41, 0.08);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.factura__payment-method {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text-primary);
}
.factura__payment-meta {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 6px;
}
.factura__payment-txn {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin: 0;
}
.factura__payment-txn code {
  background: rgba(0,0,0,0.04);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

/* Totales — mismo lenguaje visual que el bloque .factura__payment:
   fondo crema verde aloe muy sutil + borde fino. Sin contraste negro. */
.factura__totals {
  background: rgba(36, 74, 41, 0.03);
  border: 1px solid rgba(36, 74, 41, 0.08);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.factura__totals dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.factura__totals dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
}
.factura__totals dt {
  color: var(--color-text-secondary);
  font-weight: 500;
}
.factura__totals dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-primary);
  font-feature-settings: "tnum" on;
}
.factura__totals-row--muted dt,
.factura__totals-row--muted dd {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
}
.factura__totals-discount dd {
  color: #15803d;
}
.factura__totals-free {
  color: #15803d;
  font-weight: 700;
}
.factura__totals-coupon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: rgba(36, 74, 41, 0.08);
  color: var(--color-aloe-700, #1f3f24);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
}
.factura__totals-grand {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(36, 74, 41, 0.18);
}
.factura__totals-grand dt {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--color-text-primary);
}
.factura__totals-grand dd {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

/* ============================================================
   FOOT — leyenda fiscal
   ============================================================ */
.factura__foot {
  padding-top: 24px;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 11.5px;
  color: var(--color-text-muted);
}
.factura__foot p { margin: 0; }
.factura__foot strong { color: var(--color-text-secondary); font-weight: 600; }
.factura__foot-thanks {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-aloe-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================
   PRINT — A4 sin cabecera/footer del sitio
   Neutralizamos colores oscuros del bloque "Totales" para no gastar
   tinta — versión print en marco gris suave con tipografía oscura.
   ============================================================ */
@media print {
  @page {
    size: A4;
    margin: 10mm 12mm;
  }
  body {
    background: #fff !important;
    color: #0f0f0f !important;
  }
  .site-header,
  .site-footer,
  .why-stats-band,
  .ig-strip,
  .promo-strip,
  .drawer,
  .drawer-overlay,
  .auth-modal,
  .reviews-drawer,
  .site-search,
  .toast-container,
  .sticky-cart,
  .factura-volver-movil,
  .no-print { display: none !important; }

  main, .container, .factura-page {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* La factura se imprime TAL CUAL se ve en pantalla (decisión
     2026-09-08): colores y bloques intactos — forzamos la impresión
     de fondos — y un zoom que encaja el documento de 880px en el
     ancho útil del A4 (~186mm ≈ 700px) en una sola página. */
  .factura,
  .factura * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .factura {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 32px 36px !important;
    zoom: 0.79;
    page-break-inside: avoid;
  }

  /* Evitar saltos feos */
  .factura-line,
  .factura__totals,
  .factura__bottom,
  .factura__foot { page-break-inside: avoid; }
}

/* Modo captura del PDF (html2pdf): documento limpio y compacto — sin
   el chrome de "tarjeta" de la vista web y con el padding recortado
   para aprovechar el A4. Se aplica al DOM real un instante durante la
   generación (el onclone de html2pdf 0.10 no es fiable) y se revierte
   al terminar. */
.factura--pdf {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 24px 22px !important;
  max-width: 880px !important;
  font-size: 12px;
}

/* — Versión COMPACTA para el PDF (2026-09-08): tipografías un punto
     más pequeñas y sin las "tarjetas" de dirección — el papel pide
     densidad, no aire de pantalla. Solo afecta al archivo generado. — */
.factura--pdf .factura__head { gap: 24px; padding-bottom: 16px; margin-bottom: 18px; }
.factura--pdf .factura__brand { gap: 22px; }
.factura--pdf .factura__logo { max-height: 26px; }
.factura--pdf .factura__company { font-size: 11px; }
.factura--pdf .factura__company strong { font-size: 12.5px; }
.factura--pdf .factura__title h1 { font-size: 30px; margin-bottom: 8px; }
.factura--pdf .factura__meta { font-size: 11.5px; row-gap: 4px; }

/* Direcciones: sin caja ni fondo, dos columnas de texto plano */
.factura--pdf .factura__addresses { gap: 40px; margin-bottom: 20px; }
.factura--pdf .factura__address-block {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.factura--pdf .factura__address-label { font-size: 10px; margin-bottom: 4px; }
.factura--pdf .factura__address-block address { font-size: 11.5px; line-height: 1.45; }
.factura--pdf .factura__address-block address strong { font-size: 12.5px; margin-bottom: 2px; }

.factura--pdf .factura__section-head { margin-bottom: 8px; }
.factura--pdf .factura__section-eyebrow { font-size: 10px; margin-bottom: 2px; }
.factura--pdf .factura__section-head h2 { font-size: 17px; }

/* Líneas de producto más prietas */
.factura--pdf .factura__lines { margin-bottom: 20px; }
.factura--pdf .factura-line {
  grid-template-columns: 44px minmax(0, 1fr) 70px 90px 90px;
  gap: 12px;
  padding: 9px 4px;
}
.factura--pdf .factura-line__media { width: 44px; height: 44px; }
.factura--pdf .factura-line__name { font-size: 13px; margin-bottom: 3px; }
.factura--pdf .factura-line__capacity { font-size: 9px; padding: 2px 7px; }
.factura--pdf .factura-line__sku,
.factura--pdf .factura-line__cat { font-size: 10.5px; }
.factura--pdf .factura-line__qty-label,
.factura--pdf .factura-line__price-label,
.factura--pdf .factura-line__total-label { font-size: 9px; }
.factura--pdf .factura-line__qty strong { font-size: 13.5px; }
.factura--pdf .factura-line__price span:not(.factura-line__price-label) { font-size: 12px; }
.factura--pdf .factura-line__total strong { font-size: 13px; }

/* Pago + totales */
.factura--pdf .factura__bottom { gap: 24px; margin-bottom: 20px; }
.factura--pdf .factura__payment { padding: 12px 14px; }
.factura--pdf .factura__payment-method { font-size: 13px; }
.factura--pdf .factura__payment-meta { font-size: 11.5px; }
.factura--pdf .factura__payment-txn { font-size: 10.5px; }
.factura--pdf .factura__totals { padding: 14px 16px; }
.factura--pdf .factura__totals dl { gap: 7px; }
.factura--pdf .factura__totals dl > div { font-size: 12px; }
.factura--pdf .factura__totals-row--muted dt,
.factura--pdf .factura__totals-row--muted dd { font-size: 10.5px; }
.factura--pdf .factura__totals-grand { margin-top: 6px; padding-top: 10px; }
.factura--pdf .factura__totals-grand dd { font-size: 21px; }

/* Pie */
.factura--pdf .factura__foot { padding-top: 14px; font-size: 10.5px; }
.factura--pdf .factura__foot-thanks { font-size: 11.5px; }

/* ============================================================
   MÓVIL — DOCUMENTO PURO (2026-09-07)
   El body lleva .factura-movil (UA móvil, ver factura.php): fuera
   todo el chrome del sitio — con el viewport fijo de 940 saldría en
   versión escritorio. Queda el toolbar (volver + PDF) y la factura.
   ============================================================ */
body.factura-movil .promo-strip,
body.factura-movil .site-header,
body.factura-movil .why-stats-band,
body.factura-movil .ig-strip,
body.factura-movil .site-footer,
body.factura-movil .drawer,
body.factura-movil .drawer-overlay,
body.factura-movil .sticky-cart,
body.factura-movil .toast-container { display: none !important; }

body.factura-movil .factura-page { padding-block: 18px 40px; }

/* Sin toolbar ni ayuda: solo el documento… */
body.factura-movil .factura-toolbar,
body.factura-movil .factura-toolbar__hint { display: none !important; }

/* …y debajo, un único CTA centrado de vuelta a Facturas. Ojo con las
   medidas: el viewport aquí es fijo a 940 y el teléfono lo escala
   ~0.4x, así que el botón se dimensiona "grande" en CSS para verse
   como un botón móvil normal (≈52px de alto visual). */
.factura-volver-movil { display: none; }
body.factura-movil .factura-volver-movil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;               /* ~12px visuales con el escalado del viewport */
  margin-top: 44px;
}
body.factura-movil .factura-volver-movil .btn {
  font-size: 34px;
  font-weight: 600;
  padding: 34px 90px;
  border-radius: 999px;
}
body.factura-movil .factura-volver-movil .btn svg {
  width: 34px;
  height: 34px;
}

/* ============================================================
   RESPONSIVE pantalla pequeña
   ============================================================ */
@media (max-width: 768px) {
  .factura {
    padding: 28px 22px;
    font-size: 13px;
  }
  .factura__head,
  .factura__addresses,
  .factura__bottom,
  .factura__foot {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .factura__title { align-items: flex-start; text-align: left; }
  .factura__title h1 { font-size: 30px; }
  .factura__meta { grid-template-columns: auto auto; }
  .factura__meta dt,
  .factura__meta dd { text-align: left; }

  /* Líneas: layout 2 filas (info arriba, números abajo) en móvil */
  .factura-line {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 12px 14px;
  }
  .factura-line__media { width: 56px; height: 56px; }
  .factura-line__info { grid-column: 2; }
  .factura-line__qty,
  .factura-line__price,
  .factura-line__total {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding-left: 70px;
    gap: 8px;
  }
  .factura-line__qty-label,
  .factura-line__price-label,
  .factura-line__total-label {
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--color-text-secondary);
  }
}


/* ===== pedido-confirmado.css ===== */
/* ============================================================
   ALOE TATTOO — PEDIDO CONFIRMADO
   Patrón "thank-you page" premium: hero con check pulsante,
   resumen del pedido en card editorial y grid de 3 next-steps
   tipo Shopify/Stripe (no botones inline horizontales).
   ============================================================ */

.thanks-page {
  max-width: 880px;
  margin: 0 auto;
  /* padding-top reducido: el hero ya queda cerca del header del sitio
     sin el aire excesivo que daba el --space-10 anterior. */
  padding-block: var(--space-5) var(--space-12);
}

/* ============================================================
   HERO con check circle animado
   ============================================================ */
.thanks-hero {
  text-align: center;
  padding: var(--space-4) var(--space-4) var(--space-6);
  position: relative;
}

/* Check verde simple, compacto. El eyebrow "PEDIDO CONFIRMADO"
   queda inmediatamente debajo, formando un mini grupo "icono +
   label" antes del h1. */
.thanks-hero__check {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.thanks-hero__check svg { width: 30px; height: 30px; stroke-width: 2; }
/* El eyebrow va pegado al check (margin-bottom del check ya da el aire
   justo); el h1 grande recoge todo el espacio respiratorio aparte. */
.thanks-hero__eyebrow {
  margin-bottom: var(--space-4);
}

.thanks-hero__eyebrow {
  /* display:block para que caiga DEBAJO del check (el check es
     inline-flex, si el eyebrow fuese inline también, irían en la
     misma línea). */
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--color-rose-500, #e0394d);
  margin-bottom: var(--space-3);
}
.thanks-hero__title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 var(--space-3);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
}
@media (min-width: 768px) {
  .thanks-hero__title { font-size: 44px; }
}
.thanks-hero__lead {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin: 0 auto;
  max-width: 480px;
  line-height: 1.55;
}

/* ============================================================
   ORDER CARD — resumen del pedido
   ============================================================ */
.thanks-order {
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -16px rgba(15, 32, 18, 0.08), 0 2px 6px rgba(15, 32, 18, 0.04);
  /* Padding generoso: vertical 32 + lateral 40 px. La escala del
     proyecto salta de --space-6 (24) a --space-8 (32) — no usar
     --space-7 que no existe en tokens.css o el shorthand entero
     queda inválido y los elementos pegan al borde. */
  padding: var(--space-8) var(--space-10);
  margin-bottom: var(--space-8);
  position: relative;
  overflow: hidden;
}
@media (max-width: 640px) {
  .thanks-order { padding: var(--space-5) var(--space-5); }
}
.thanks-order::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #15803d 0%, var(--color-aloe-400, #5e8a5e) 100%);
}

.thanks-order__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-5);
}
.thanks-order__eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-rose-500, #e0394d);
  margin-bottom: 4px;
}
.thanks-order__id {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  font-feature-settings: "tnum" on;
}

/* ============================================================
   LÍNEAS DE PRODUCTOS — lista con foto + capacidad + qty + total
   ============================================================ */
.thanks-order__lines {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.thanks-order__line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.thanks-order__line:last-child { border-bottom: 0; padding-bottom: var(--space-5); }
.thanks-order__line:first-child { padding-top: var(--space-1); }

.thanks-order__line-media {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
/* Halo verde aloe sutil — mismo lenguaje que la PDP y la factura */
.thanks-order__line-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(36, 74, 41, 0.10), transparent 70%);
  pointer-events: none;
}
.thanks-order__line-media img {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.thanks-order__line-media svg {
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
}

.thanks-order__line-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.thanks-order__line-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thanks-order__line-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* Pill capacidad — reusa .product-card__capacity, compacta */
.thanks-order__line-capacity {
  align-self: flex-start;
  padding: 3px 9px;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-width: 1px;
}
.thanks-order__line-qty {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-feature-settings: "tnum" on;
}

.thanks-order__line-total {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-feature-settings: "tnum" on;
  text-align: right;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* Filas de meta — cada una con icono Lucide en chip aloe a la
   izquierda + label + valor a la derecha. Más respiración, más
   jerarquía y consistencia con el lenguaje icónico del sitio. */
.thanks-order__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.thanks-order__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 14.5px;
  padding: var(--space-3) 0;
}
.thanks-order__row + .thanks-order__row {
  border-top: 1px solid var(--color-border-subtle);
}
.thanks-order__row dt {
  margin: 0;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
}
.thanks-order__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: right;
  font-feature-settings: "tnum" on;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.thanks-order__row--discount dd { color: #15803d; }

/* Chip circular aloe sutil para los iconos de cada fila — mismo
   lenguaje que cuenta-pedido.php (iconos chip aloe-100). */
.thanks-order__row-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(36, 74, 41, 0.08);
  color: var(--color-aloe-700, #1f3f24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.thanks-order__row-icon svg { width: 16px; height: 16px; stroke-width: 2; }

/* Texto del método de pago — display + tracking sutil */
.thanks-order__pay-method {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
}

/* Cupón pill — verde aloe sólido como en cards */
.thanks-order__coupon {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: rgba(36, 74, 41, 0.10);
  color: var(--color-aloe-700);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
}

/* Pill "Gratis" — verde brillante con check */
.thanks-order__free-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.thanks-order__free-pill svg { width: 12px; height: 12px; stroke-width: 3; }

/* Pill "Pagado" — verde brillante con check, igual estructura */
.thanks-order__paid-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.thanks-order__paid-pill svg { width: 11px; height: 11px; stroke-width: 3; }

/* Total — fila destacada con generosa separación arriba */
.thanks-order__total {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-text-primary);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
/* Wrapper derecho: importe grande + nota muted con el IVA incluido */
.thanks-order__total-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.thanks-order__total-vat-note {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.2px;
}
.thanks-order__total-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-primary);
}
.thanks-order__total-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" on;
}

/* ============================================================
   NEXT STEPS — 3 cards en grid (no botones inline)
   ============================================================ */
.thanks-next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.thanks-next__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}
.thanks-next__card:hover,
.thanks-next__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(15, 32, 18, 0.12);
  border-color: var(--color-aloe-300, #B8D4A8);
  outline: none;
}
.thanks-next__card--primary {
  background: var(--color-text-primary, #0e1410);
  color: #fff;
  border-color: var(--color-text-primary, #0e1410);
}
.thanks-next__card--primary:hover,
.thanks-next__card--primary:focus-visible {
  background: #000;
  border-color: #000;
}
.thanks-next__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(36, 74, 41, 0.10);
  color: var(--color-aloe-700, #1f3f24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.thanks-next__icon svg { width: 22px; height: 22px; stroke-width: 1.8; }

.thanks-next__card--primary .thanks-next__icon {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.thanks-next__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: inherit;
}
.thanks-next__desc {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.thanks-next__card--primary .thanks-next__desc {
  color: rgba(255, 255, 255, 0.72);
}
/* Flecha sutil que se mueve al hover — refuerza el "click here" */
.thanks-next__arrow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--color-aloe-700, #1f3f24);
  padding-top: var(--space-3);
}
.thanks-next__arrow svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}
.thanks-next__card:hover .thanks-next__arrow svg,
.thanks-next__card:focus-visible .thanks-next__arrow svg {
  transform: translateX(4px);
}
.thanks-next__card--primary .thanks-next__arrow {
  color: #fff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .thanks-page { padding-block: var(--space-6) var(--space-10); }
  .thanks-hero { padding-top: var(--space-4); }
  .thanks-hero__title { font-size: 28px; }
  .thanks-order { padding: var(--space-5) var(--space-4); }
  .thanks-order__id { font-size: 24px; }
  .thanks-order__total-value { font-size: 26px; }
}