/* ==========================================================================
   Aöra Marbella — redesign mockup · BASE + COMPONENTS
   Depends on tokens.css. Mobile-first. Breakpoints: 640 / 900 / 1100 / 1280.
   Flat system: 1px rules and background shifts, no decorative shadows.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`: `overflow-x: hidden` on <body> turns it into a scroll
     container and silently breaks every `position: sticky` inside it
     (the header, the filter sidebar). `clip` does not. */
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* a link inside running text is underlined, not told apart by colour alone
   (WCAG 1.4.1; Lighthouse "link-in-text-block", 2026-09-22) */
p a:not(.btn), address a, label a, .legal-steps a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-8) 0; }

/* v4 (user 2026-09-18): no blue rectangle when tapping on a phone; the outline stays for keyboard users */
a, button, input, select, textarea, summary, label, [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

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

.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;
}
.skip {
  position: absolute; left: var(--s-4); top: -60px; z-index: 200;
  background: var(--c-navy); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600;
}
.skip:focus { top: var(--s-2); text-decoration: none; }

/* ---------------------------------------------------------- 2. Typography */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--text-1);
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, var(--fs-4xl)); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.8vw, var(--fs-2xl)); }
h3 { font-size: clamp(1.2rem, 1.02rem + 0.72vw, var(--fs-xl)); line-height: var(--lh-snug); }
h4 {
  font-family: var(--font-sans); font-size: var(--fs-base);
  font-weight: 600; line-height: var(--lh-snug); letter-spacing: 0;
}
p { max-width: 68ch; }
.lead { font-size: var(--fs-lg); color: var(--text-2); line-height: 1.45; }
/* v4: intro text under titles and lead paragraphs in the secondary serif (client 2026-09-18) */
.lead, .sub, .section-head > p.muted, .section-head-row p.muted {
  font-family: var(--font-sub); font-size: var(--fs-sub); font-weight: 400; line-height: 1.5; letter-spacing: 0;
}
.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin-bottom: var(--s-3);
}
.eyebrow-slate { color: var(--c-slate-deep); }

/* A rule under a section title — the one decorative move in the system */
.rule-gold { width: 40px; height: 2px; background: var(--c-gold); border: 0; margin: var(--s-4) 0 0; }

/* Placeholder value the client still has to confirm */
.ph {
  border-bottom: 1px dotted var(--c-gold-deep);
  cursor: help;
}

/* ------------------------------------------------------------- 3. Layout */
.wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: 16px; }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .wrap, .wrap-narrow { padding-inline: var(--gutter); } }

.section { padding-block: var(--s-12); }
.section-lg { padding-block: var(--s-16); }
@media (min-width: 900px) {
  .section { padding-block: var(--s-16); }
  .section-lg { padding-block: var(--s-24); }
}
.band-cream { background: var(--c-cream); }
.band-sand  { background: var(--c-sand); }
.band-mist  { background: var(--c-mist); }
.band-white { background: var(--c-white); }
/* v4: beige band (client 2026-09-18: Club, Lo que nos define, Guarda tu resultado) */
.band-beige { background: var(--c-beige); color: var(--c-ink); }
.band-beige .muted, .band-beige .lead, .band-beige .sub, .band-beige .hint, .band-beige .small.muted { color: var(--muted-on-beige); }
.band-beige .btn-primary { border-color: var(--c-gold-deep); }
.band-beige .brand-pattern::before { background-color: var(--c-gold); opacity: .38; }
.band-beige .eyebrow { color: var(--eyebrow-on-beige); }
.band-beige a:not(.btn) { color: var(--link-on-beige); }
.band-beige .card, .band-beige .panel { background: var(--c-white); }
.band-beige .input, .band-beige .select, .band-beige .textarea { background-color: var(--c-white); border-color: #CDB9A5; }
.band-beige .btn-dark { background: var(--c-slate-deep); color: var(--c-white); }
.band-beige .btn-dark:hover { background: var(--c-ink); color: var(--c-white); }
.band-beige .rule-gold { background: var(--c-gold-deep); }
.band-ink   { background: var(--c-navy); color: var(--c-white); }
.band-ink h2, .band-ink h3 { color: var(--c-white); }
.band-ink .muted { color: #C8CEd6; }

/* --- Brand band (v2): the shop's own blue #7B8EAA as a surface -----------
   Text rules are forced by the tone (see tokens.css section 1b):
   body/links/small text = ink (4.81:1), headings = white (large only),
   gold is never text here. .site-footer gets exactly the same treatment. */
.band-brand,
.site-footer {
  background: var(--bg-brand);
  color: var(--text-on-brand);
}
.band-brand h1, .band-brand h2, .band-brand h3,
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer .footer-h, .band-brand .footer-h {
  color: var(--heading-on-brand);
}
.band-brand .muted, .band-brand .lead, .band-brand .sub, .band-brand .hint,
.band-brand .small.muted, .band-brand .xsmall,
.site-footer .muted, .site-footer .lead, .site-footer .hint {
  color: var(--muted-on-brand);
}
/* the gold eyebrow is unreadable on blue: ink, spaced caps carry it instead */
.band-brand .eyebrow, .band-brand .eyebrow-slate,
.site-footer .eyebrow, .site-footer .eyebrow-slate {
  color: var(--text-on-brand);
}
.band-brand a, .site-footer a {
  color: var(--text-on-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26,34,44,.45);
}
.band-brand a:hover, .site-footer a:hover {
  color: var(--text-on-brand);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--heading-on-brand);
}
.band-brand :focus-visible, .site-footer :focus-visible { outline-color: var(--heading-on-brand); }
.band-brand hr, .site-footer hr { border-top-color: var(--rule-on-brand); }
.band-brand .rule-gold, .site-footer .rule-gold { background: var(--c-gold); }
/* form controls stay white cards with ink text */
.band-brand .input, .band-brand .select, .band-brand .textarea {
  background-color: var(--c-white); color: var(--c-ink); border-color: rgba(255,255,255,.72);
}
.band-brand .input::placeholder, .band-brand .textarea::placeholder { color: #6B737C; }
.band-brand .label, .band-brand .check { color: var(--text-on-brand); }
.band-brand .check input { accent-color: var(--c-ink); }
/* buttons: gold fill and ink fill both pass; the light outline does not */
.band-brand .btn, .site-footer .btn { text-decoration: none; }
/* v4: on the brand-blue band a brand-blue button would vanish, so here the
   dark button keeps the SAME hue one step deeper (#546782, white 5.77:1). */
.band-brand .btn-dark, .site-footer .btn-dark { background: var(--c-slate-deep); color: var(--c-white); }
.band-brand .btn-dark:hover, .site-footer .btn-dark:hover { color: var(--c-white); background: var(--c-ink); }
.band-brand .btn-primary, .site-footer .btn-primary { color: var(--c-ink); }
.band-brand .btn-outline-light, .site-footer .btn-outline-light {
  color: var(--c-ink); border-color: var(--c-ink);
}
.band-brand .btn-outline-light:hover, .site-footer .btn-outline-light:hover {
  background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink);
}
.band-brand .link-more, .site-footer .link-more { color: var(--c-ink); border-bottom-color: var(--c-ink); }
.band-brand .badge-soft { background: var(--c-white); color: var(--c-slate-deep); }
.band-brand .note { background: rgba(255,255,255,.85); border-left-color: var(--c-gold-deep); }
.band-brand .ph, .site-footer .ph { border-bottom-color: var(--c-ink); }

/* --- Brand pattern: the pale diamond tile from the brand book ------------
   Painted as a masked layer so ONE svg file works on light surfaces and on
   the brand blue. It sits behind the content of its own box (z-index -1 +
   an isolated stacking context), never behind the page's body text. */
.brand-pattern { position: relative; isolation: isolate; }
.brand-pattern::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--c-slate);
  -webkit-mask-image: url("../img/aora-tile.svg");
          mask-image: url("../img/aora-tile.svg");
  -webkit-mask-repeat: repeat;  mask-repeat: repeat;
  -webkit-mask-size: 96px 96px; mask-size: 96px 96px;
  -webkit-mask-position: center; mask-position: center;   /* whole diamonds in a 96px-multiple box */
}
.band-brand .brand-pattern::before,
.site-footer .brand-pattern::before { background-color: var(--heading-on-brand); opacity: .6; }

.section-head { margin-bottom: var(--s-8); }
.section-head-row {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--s-8);
}
.section-head-row p { margin-top: var(--s-2); }

.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-8); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--s-2); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ 4. Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: var(--s-3) var(--s-6);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.01em; text-align: center; text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn svg { flex: none; }

.btn-primary { background: var(--c-gold); color: var(--c-ink); }
.btn-primary:hover { background: #BE8C4D; }

/* v4 2026-09-17 (Scarlet): the dark button is now the brand blue #7B8EAA.
   White on it is 3.34:1 — her explicit choice. Mitigated with 600 weight and
   the 44px tap height the .btn base already sets. */
.btn-dark { background: var(--c-slate); color: var(--c-white); font-weight: 600; }
.btn-dark:hover { background: var(--c-slate-hover); color: var(--c-white); }

.btn-ghost { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn-ghost:hover { background: var(--c-ink); color: var(--c-white); }

.btn-quiet { background: var(--c-white); color: var(--c-ink); border-color: var(--c-border-strong); }
.btn-quiet:hover { border-color: var(--c-ink); }

.btn-onink { background: var(--c-white); color: var(--c-ink); }
.btn-onink:hover { background: var(--c-sand-deep); }
.btn-outline-light { background: transparent; color: var(--c-white); border-color: rgba(255,255,255,.6); }
.btn-outline-light:hover { background: rgba(255,255,255,.14); border-color: #fff; }

.btn-sm { min-height: 36px; padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); }
.btn-block { width: 100%; }
.btn-lg { min-height: 52px; padding: var(--s-4) var(--s-8); font-size: var(--fs-base); }

/* Text link with a gold underline — used for "Ver todo" style links */
.link-more {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink);
  padding-bottom: 2px; border-bottom: 1px solid var(--c-gold);
  min-height: 24px;
}
.link-more:hover { text-decoration: none; border-bottom-color: var(--c-ink); }

/* ------------------------------------------------- 5. Badges, chips, tags */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px var(--s-2); border-radius: var(--r-xs);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.3;
}
.badge-new  { background: var(--c-slate-deep); color: var(--c-white); } /* 12px text: deep brand blue, 5.77:1 */   /* v4: brand blue */
.badge-sale { background: var(--c-clay); color: var(--c-white); }
.badge-out  { background: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-ink); }
.badge-gold { background: var(--c-gold-tint); color: var(--c-gold-deep); }
.badge-soft { background: var(--c-slate-tint); color: var(--c-slate-deep); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 38px; padding: var(--s-2) var(--s-4);
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--c-slate-deep); text-decoration: none; }
/* v4: the selected chip is brand blue, like every other selected state */
.chip.is-active { background: var(--c-slate); color: var(--c-white); border-color: var(--c-slate); font-weight: 600; }
.chip.is-active:hover { background: var(--c-slate-hover); border-color: var(--c-slate-hover); }
.chip-count { color: var(--text-2); font-size: var(--fs-xs); }
.chip.is-active .chip-count { color: rgba(255,255,255,.88); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ------------------------------------------------------- 6. Generic card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.card-flush { padding: 0; overflow: hidden; }

/* Mockup annotation — visible note for the reviewer, never real UI copy */
.note {
  border-left: 3px solid var(--c-gold);
  background: var(--c-gold-tint);
  color: var(--c-ink);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-xs);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.note strong { font-weight: 600; }

/* -------------------------------------------------------- 7. Product card */
.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.pcard:hover { border-color: var(--c-slate); }
.pcard-media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--c-white);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.pcard-media img {
  width: 100%; height: 100%; object-fit: contain; padding: var(--s-5);
  transition: transform var(--dur-slow) var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.03); }
.pcard-badges {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1);
}
.pcard-wish {
  position: absolute; top: var(--s-2); right: var(--s-2); z-index: 2;
  width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink); background: rgba(255,255,255,.88);
  border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease);
}
.pcard-wish:hover { color: var(--c-clay); }
.pcard-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); flex: 1; }
.pcard-brand {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--c-slate-deep);
}
.pcard-name {
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600;
  line-height: 1.35; letter-spacing: 0; color: var(--c-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard-name a { color: inherit; }
.pcard-for { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.4; }
.pcard-foot { margin-top: auto; padding-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }
.pcard-out .pcard-media img { opacity: .62; }

.price { font-size: var(--fs-lg); font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.price-sale { color: var(--c-clay); }
.price-old { font-size: var(--fs-sm); color: var(--text-2); text-decoration: line-through; margin-left: var(--s-2); }
.price-vat { font-size: var(--fs-2xs); color: var(--text-2); }

.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--c-gold-deep); }
.stars svg { width: 14px; height: 14px; }
.stars-count { font-size: var(--fs-xs); color: var(--text-2); margin-left: var(--s-1); }

/* ------------------------------------------------------ 8. Form elements */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.hint { font-size: var(--fs-xs); color: var(--text-2); }
.input, .select, .textarea {
  width: 100%; min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #8A929C; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-slate-deep); }
.textarea { min-height: 120px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A222C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-3) center;
  padding-right: var(--s-10);
}
.check { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-sm); line-height: 1.45; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-slate-deep); flex: none; }

/* qty stepper */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); overflow: hidden; }
.qty button { width: var(--tap); min-height: var(--tap); display: grid; place-items: center; color: var(--c-ink); }
.qty button:hover { background: var(--c-cream); }
.qty input {
  width: 48px; text-align: center; border: 0; border-inline: 1px solid var(--c-border-strong);
  font-weight: 600; background: var(--c-white);
}

/* ------------------------------------------------------- 9. Accordion */
.acc { border-bottom: 1px solid var(--rule); }
.acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; min-height: var(--tap);
  font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600;
  cursor: pointer; list-style: none; color: var(--c-ink);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A222C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.acc[open] > summary::after { transform: rotate(180deg); }
.acc-body { padding: 0 0 var(--s-5); color: var(--text-2); font-size: var(--fs-sm); }
.acc-body p + p { margin-top: var(--s-3); }
.acc-body ul { display: flex; flex-direction: column; gap: var(--s-2); }
.acc-body li { padding-left: var(--s-5); position: relative; }
.acc-body li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-slate);
}

/* ------------------------------------------------ 10. Announcement bar */
.announce {
  background: var(--c-navy); color: var(--c-white);
  font-size: var(--fs-xs); letter-spacing: 0.01em;
}
.announce .wrap {
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  min-height: 40px; padding-block: var(--s-2); text-align: center; flex-wrap: wrap;
}
.announce a { color: var(--c-gold); font-weight: 600; }
.announce .ph { border-bottom-color: var(--c-gold); }
.announce-sep { color: #6D7885; }
@media (max-width: 639px) { .announce-extra { display: none; } }

/* ----------------------------------------------------- 11. Site header */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--c-white);
  border-bottom: 1px solid var(--rule);
  /* v4 2026-09-17: the bar turns brand blue once the page is scrolled
     (see "14. Header on scroll" below). Only colours move, never sizes. */
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
.site-header > .wrap { max-width: none; }
@media (min-width: 1100px) { .site-header > .wrap { padding-inline: 40px; } }
.header-inner { padding-block: 16px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--s-3);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; }
.brand img { width: 56px; height: 56px; object-fit: contain; }
@media (min-width: 900px) { .brand img { width: 76px; height: 76px; } }

.burger { width: var(--tap); height: var(--tap); display: grid; place-items: center; color: var(--c-ink); margin-left: -8px; }
@media (min-width: 1100px) { .burger { display: none; } }

.header-tools { display: flex; align-items: center; gap: var(--s-1); justify-self: end; }
.icon-btn {
  position: relative; width: var(--tap); height: var(--tap);
  display: grid; place-items: center; color: var(--c-ink); border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--c-cream); text-decoration: none; }
.cart-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--c-clay); color: #fff;
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; line-height: 1;
}
.cart-count[hidden] { display: none; }   /* empty cart; aora.js fills the count on cached pages */

/* language switch */
.lang { display: inline-flex; align-items: center; border: 1px solid var(--c-border); border-radius: var(--r-pill); overflow: hidden; margin-right: var(--s-2); }
.lang a {
  min-width: 36px; min-height: 32px; padding: 0 var(--s-2);
  display: grid; place-items: center;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em;
  color: var(--text-2);
}
.lang a:hover { background: var(--c-cream); text-decoration: none; }
.lang a[aria-current="true"] { background: var(--c-slate); color: #fff; }   /* v4: brand blue */
@media (max-width: 899px) { .lang { display: none; } }

/* header search */
.hsearch { position: relative; display: none; }
@media (min-width: 900px) { .hsearch { display: block; width: min(420px, 100%); justify-self: center; } }
.hsearch input {
  width: 100%; min-height: 42px; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-10);
  background: var(--c-cream); border: 1px solid var(--c-border);
  border-radius: var(--r-pill); font-size: var(--fs-sm);
}
.hsearch input:hover { border-color: var(--c-border-strong); }
.hsearch button {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center; color: var(--c-slate-deep);
  border-radius: var(--r-pill);
}
/* mobile: a search row under the header bar */
.msearch { padding-bottom: var(--s-3); }
@media (min-width: 900px) { .msearch { display: none; } }
.msearch .hsearch { display: block; width: 100%; }

/* ------------------------------------------------------- 12. Main nav */
.mainnav { display: none; }
@media (min-width: 1100px) {
  .mainnav { display: block; grid-column: 1 / -1; border-top: 1px solid var(--rule); }
  .mainnav > ul { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2); margin-left: calc(-1 * var(--s-4)); }
}
.nav-link {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 48px; padding: 0 var(--s-4);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em;
  color: var(--c-ink); background: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { border-bottom-color: var(--c-gold); text-decoration: none; }
.nav-link svg { transition: transform var(--dur) var(--ease); }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* mega panel */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-white);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-pop);
  display: none;
  z-index: 95;
}
.mega[data-open="true"] { display: block; }
.mega-inner { display: grid; gap: var(--s-8); padding-block: var(--s-8); }
@media (min-width: 900px) { .mega-inner { grid-template-columns: 2fr 1fr; } }
.mega-title {
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--tr-wider); text-transform: uppercase;
  color: var(--c-slate-deep); margin-bottom: var(--s-4);
}
.mega-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px var(--s-6); }
.mega-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 38px; padding: var(--s-1) var(--s-2);
  color: var(--c-ink); font-size: var(--fs-sm); border-radius: var(--r-xs);
}
.mega-list a:hover { background: var(--c-cream); text-decoration: none; }
.mega-list .n { color: var(--text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.mega-promo { background: var(--c-cream); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5); }
.mega-promo img { border-radius: var(--r-sm); margin-bottom: var(--s-4); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
/* Looks like an h3 but is a <p>: keeps the document outline h1 > h2 > h3 clean
   even though the panel markup sits above the page's own <h1>. */
.promo-title {
  font-family: var(--font-display); font-size: var(--fs-lg);
  line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--c-ink);
}
.mega-foot { border-top: 1px solid var(--rule); padding-block: var(--s-4); }

/* Marcas + Productos panels: lists read top to bottom, column by column (all brands A-Z; types in the client order, Scarlet 2026-09-22) */
.mega-list-cols { display: block; columns: 4 170px; column-gap: var(--s-6); }
.mega-list-cols a { break-inside: avoid; min-height: 34px; }
#mega-productos .mega-list-cols { columns: 3 220px; } /* 11 types: 4 + 4 + 3, long names on one line */

/* Static "panel open" demo used on the home page so the panel can be
   reviewed without hovering. Same markup, positioned in flow. */
.mega-static { position: static; display: block; box-shadow: none; border-radius: var(--r-md); border: 1px solid var(--rule); }

/* ------------------------------------------- 12b. Header on scroll (v4)
   Scarlet 2026-09-17: "Menu bar, we would like it to be Aöra blue only when
   it goes down with the page, as we had it in the other website."
   White at the top of the page, brand blue #7B8EAA once scrolled past 24px.
   A tiny script on every page toggles .is-scrolled. NOTHING here changes a
   size, a padding or the grid: colours only, so the header keeps its one row
   and the logo keeps its 76/56px box and its 16px clear space.
   The logo is the coloured mark (brand blue + gold): its blue half would
   disappear on a blue bar, so on the scrolled state it is painted solid
   white with a filter (same file, same box, same silhouette).
   The mega panels that drop under the bar keep their white card styles. */
.site-header.is-scrolled {
  background: var(--c-slate);
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.site-header.is-scrolled .brand img { filter: brightness(0) invert(1); transition: filter 0.2s var(--ease); }
.site-header.is-scrolled .burger,
.site-header.is-scrolled .icon-btn,
.site-header.is-scrolled .nav-link,
.site-header.is-scrolled .hsearch button { color: var(--c-white); }
.site-header.is-scrolled .icon-btn:hover,
.site-header.is-scrolled .burger:hover { background: rgba(255,255,255,.18); color: var(--c-white); }
.site-header.is-scrolled .nav-link:hover,
.site-header.is-scrolled .nav-link[aria-expanded="true"] { color: var(--c-white); border-bottom-color: var(--c-white); }
.site-header.is-scrolled .mainnav { border-top-color: rgba(255,255,255,.35); }
/* search field: a white-framed pill on the blue, text stays ink for legibility */
.site-header.is-scrolled .hsearch input {
  background: rgba(255,255,255,.94); border-color: rgba(255,255,255,.55); color: var(--c-ink);
}
.site-header.is-scrolled .hsearch input::placeholder { color: #5A6673; }
.site-header.is-scrolled .hsearch input:hover { border-color: var(--c-white); }
.site-header.is-scrolled .hsearch button { color: var(--c-slate-deep); }
/* counters and the language switch */
.site-header.is-scrolled .cart-count { background: var(--c-white); color: var(--c-ink); }
.site-header.is-scrolled .lang { border-color: rgba(255,255,255,.55); }
.site-header.is-scrolled .lang a { color: var(--c-white); }
.site-header.is-scrolled .lang a:hover { background: rgba(255,255,255,.18); }
.site-header.is-scrolled .lang a[aria-current="true"] { background: var(--c-white); color: var(--c-ink); }

/* --------------------------------------------------- 13. Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 120; display: none; }
.drawer[data-open="true"] { display: block; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(31,43,68,.55); }
.drawer-panel {
  position: absolute; inset-block: 0; left: 0;
  width: min(380px, 88vw); background: var(--c-white);
  box-shadow: var(--shadow-over);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer-right .drawer-panel { left: auto; right: 0; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4); border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--c-white);
}
.drawer-body { padding: var(--s-4); flex: 1; }
.drawer-foot { padding: var(--s-4); border-top: 1px solid var(--rule); position: sticky; bottom: 0; background: var(--c-white); }
.drawer-nav a, .drawer-nav summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap); padding: var(--s-3) 0;
  font-size: var(--fs-base); font-weight: 600; color: var(--c-ink);
  border-bottom: 1px solid var(--rule);
}
.drawer-nav a:hover { text-decoration: none; color: var(--c-slate-deep); }
.drawer-nav details summary { cursor: pointer; list-style: none; }
.drawer-nav details summary::-webkit-details-marker { display: none; }
.drawer-nav details[open] > summary svg { transform: rotate(180deg); }
.drawer-sub { padding: var(--s-2) 0 var(--s-3) var(--s-4); }
.drawer-sub a { font-weight: 400; font-size: var(--fs-sm); border-bottom: 0; min-height: 40px; }
/* the 29 brands in two columns; the closing "Ver todas las marcas" spans both */
.drawer-sub-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
.drawer-sub-cols > a { justify-content: flex-start; line-height: var(--lh-snug); }
.drawer-sub-cols > a:last-child { grid-column: 1 / -1; font-weight: 600; }

/* ---------------------------------------- 13b. All-brands index (17-marcas.html)
   The "Ver todas las marcas" destination: one tile per brand, A-Z. */
.brand-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px)  { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 900px)  { .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.brand-grid a {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  height: 100%; padding: var(--s-5) var(--s-3) var(--s-4);
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
  color: var(--c-ink); text-align: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.brand-grid a:hover { border-color: var(--c-slate); background: var(--c-cream); text-decoration: none; }
.brand-grid-logo { display: grid; place-items: center; width: 100%; min-height: 64px; margin-bottom: var(--s-2); }
.brand-grid-logo img { width: 100%; max-width: 136px; height: auto; object-fit: contain; }
.brand-grid-logo .txt { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--c-ink); }
.brand-grid-name { font-size: var(--fs-sm); font-weight: 600; }
.brand-grid-n { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- 14. Trust bar */
.trustbar { border-block: 1px solid var(--rule); background: var(--c-white); }
.trust-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--s-5) var(--s-4); padding-block: var(--s-8);
}
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .trust-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.trust-item { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.trust-item svg { color: var(--c-slate-deep); }
.trust-item strong { font-size: var(--fs-sm); font-weight: 600; }
.trust-item span { font-size: var(--fs-xs); color: var(--text-2); }

/* Single-line trust row (product page) */
.trustline { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.trustline li { display: flex; align-items: flex-start; gap: var(--s-2); }
.trustline svg { color: var(--c-gold-deep); flex: none; margin-top: 2px; }

/* ------------------------------------------------------ 15. Breadcrumbs */
.breadcrumb { font-size: var(--fs-xs); color: var(--text-2); padding-block: var(--s-4); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.breadcrumb a { color: var(--text-2); }
.breadcrumb a:hover { color: var(--c-ink); }
.breadcrumb [aria-current="page"] { color: var(--c-ink); }
.breadcrumb .sep { color: var(--c-border-strong); }

/* ------------------------------------------------------- 16. Pagination */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); }
.pager a, .pager span {
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--s-3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); background: var(--c-white);
}
.pager a:hover { border-color: var(--c-slate-deep); text-decoration: none; }
.pager [aria-current="page"] { background: var(--c-slate); color: #fff; border-color: var(--c-slate); }   /* v4: brand blue */
.pager .gap { border: 0; background: none; color: var(--text-2); min-width: 24px; }

/* ----------------------------------------------------------- 17. Footer */
/* v2: the footer IS the brand-blue surface. Its colour rules live in the
   .band-brand block above (section 3) so the two can never drift apart. */
.site-footer { margin-top: 0; }   /* v2: the brand-blue footer sits directly under the last section */
.footer-top { display: grid; gap: var(--s-10); padding-block: var(--s-16); }
@media (min-width: 640px) { .footer-top { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: var(--s-8); } }
.footer-h {
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-white);
  margin-bottom: var(--s-4);
}
.footer-list { display: flex; flex-direction: column; }
.footer-list a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--fs-sm); }
.footer-brand img { width: 132px; margin-bottom: var(--s-4); }
/* v4: isotipo next to the wordmark (client 2026-09-18) */
.footer-logos { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.footer-logos img { margin-bottom: 0; }
.footer-brand .footer-logos .mark { width: 44px; height: 44px; flex: 0 0 auto; }
.footer-contact { display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--fs-sm); }
.footer-contact li { display: flex; align-items: flex-start; gap: var(--s-3); }
.footer-contact svg { color: var(--c-ink); flex: none; margin-top: 2px; }
.social { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.social a {
  width: var(--tap); height: var(--tap); display: grid; place-items: center;
  border: 1px solid var(--rule-on-brand); border-radius: var(--r-pill);
  color: var(--c-ink); text-decoration: none;
}
.social a:hover { border-color: var(--heading-on-brand); background: rgba(255,255,255,.28); color: var(--c-ink); }
.pay-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pay {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 var(--s-3);
  border: 1px solid var(--rule-on-brand); border-radius: var(--r-xs);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.03em; color: var(--c-ink);
}
/* bottom strip: the diamond tile runs edge to edge behind the legal line */
.footer-bottom-strip { border-top: 1px solid var(--rule-on-brand); }
/* one row of whole diamonds in the free band under the legal line (the 76px reserved for the WhatsApp bubble) */
.footer-bottom.brand-pattern::before {
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: left 0 bottom 0; mask-position: left 0 bottom 0;
}
.footer-bottom {
  padding-block: var(--s-6);
  /* extra bottom room so the WhatsApp bubble never covers the legal line */
  padding-bottom: calc(var(--s-6) + 76px);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--muted-on-brand);
}
/* v2: the same 100px reserve on every width; on desktop the legal links sit on the right, exactly under the WhatsApp bubble */
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer-legal a { font-size: var(--fs-xs); }

/* --------------------------------------------------- 18. WhatsApp bubble */
.wa {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 100;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-5);
  background: var(--c-slate); color: #fff;   /* v4: brand blue */
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm); font-weight: 600;
}
.wa:hover { background: var(--c-slate-hover); text-decoration: none; color: #fff; }
.wa span { display: none; }
@media (min-width: 640px) { .wa span { display: inline; } }

/* ----------------------------------------------- 19. Sticky mobile bar */
.sticky-buy {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
  background: var(--c-white); border-top: 1px solid var(--rule);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--s-4);
  box-shadow: 0 -4px 16px rgba(26,34,44,.08);
}
@media (min-width: 900px) { .sticky-buy { display: none; } }
.sticky-buy .price { font-size: var(--fs-base); }

/* -------------------------------------------------------- 20. Utilities */
.hide-mobile { display: none; }
@media (min-width: 900px) { .hide-mobile { display: block; } .hide-desktop { display: none; } }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-12 { margin-top: var(--s-12); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }
.flow > * + * { margin-top: var(--s-3); }

/* --- Product card, only needed if Scarlet turns on WooCommerce's
   "Enable AJAX add to cart buttons on archives" (#52, setting off today).
   WooCommerce then adds a "Ver carrito" link after the button and the
   classes .loading / .added on it. The card is also drawn on the home,
   where woo.css is not loaded: this block belongs with the .pcard rules
   (merged into base.css 2026-09-23). */
.pcard-foot .added_to_cart {
  display: block; margin-top: var(--s-2); text-align: center;
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-slate-deep);
}
.pcard-foot .add_to_cart_button.loading { opacity: .6; pointer-events: none; }

/* "(IVA incluido)" after prices: small and grey on every page (home cards load no woo.css). Same rule as woo.css. */
.woocommerce-price-suffix {
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 400;
  letter-spacing: 0; color: var(--text-2); white-space: nowrap;
}