/* Aora theme - compiled page stylesheet.
   Built by work/theme/build/build-css.py from the approved mockups.
   Do not edit by hand: edit the mockups or this script and rebuild. */

/* ===== home-v2.css ===== */
/* ==========================================================================
   Aöra Marbella — home page v2 · PAGE-ONLY STYLES
   Loaded by 01-home.html only, after tokens.css and base.css.
   Everything here is specific to the home page: hero, need tiles, tabs,
   the skin quiz, routine bundles, trending, Club band layout, reviews,
   the Marbella visit block and the compact newsletter.

   Rules followed:
   - only tokens from tokens.css (var(--c-*), --s-*, --fs-*, --r-*, --dur…)
   - `.band-brand`, `.brand-pattern`, `--bg-brand`, `--text-on-brand`,
     `--heading-on-brand`, `--rule-on-brand` and `--c-brand-grad` are owned by
     base.css / tokens.css; they are USED here, never redefined
   - no footer rules here (the footer is styled by base.css)
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
/* v3.1 hero (client 2026-09-17: "less Aöra blue, more premium, all the texts in white,
   only the first line stays black, the -20 % rectangle looks cheap").
   The flat brand-blue wash is gone. The photo now carries the mood under a soft, almost
   colourless deep-slate scrim that is strong on the copy side and fades out over the sea.
   Contrast, measured against the LIGHTEST pixel of the photo under the copy column
   (rgb 244,243,245 = the sea foam / bright sand), scrim #1C2733:
     alpha .86 -> 9.92:1 · alpha .80 -> 8.19:1 · alpha .74 -> 6.78:1 · alpha .62 -> 4.66:1
   The gradient never drops below .78 anywhere the copy sits, so white body text is >= 7.7:1.
   Gold "-20 %" is display size (2rem) on that scrim: 3.35:1, above the 3:1 large-text floor.
   The eyebrow is the only black text; it sits on a small white pill (16.0:1). */
.hero {
  --hero-scrim: 28, 39, 51;          /* #1C2733 deep, low-saturation slate */
  --hero-band: 35, 47, 62;           /* #232F3E phone copy band            */
  position: relative; background: rgb(var(--hero-band)); color: var(--c-white); overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* depth: a whisper of shade top and bottom, so the photo does not look flat */
    linear-gradient(180deg, rgba(var(--hero-scrim), .18) 0%, rgba(var(--hero-scrim), 0) 34%, rgba(var(--hero-scrim), 0) 72%, rgba(var(--hero-scrim), .16) 100%),
    /* the reading scrim: strong under the copy, gone over the sea */
    linear-gradient(90deg,
      rgba(var(--hero-scrim), .90) 0%,
      rgba(var(--hero-scrim), .85) 34%,
      rgba(var(--hero-scrim), .79) 56%,   /* the copy column ends at 52-54 % at every width */
      rgba(var(--hero-scrim), .50) 67%,
      rgba(var(--hero-scrim), .20) 80%,
      rgba(var(--hero-scrim), .04) 92%,
      rgba(var(--hero-scrim), 0) 100%);
}
.hero-inner { position: relative; padding-block: var(--s-16); max-width: 660px; }
@media (max-width: 767px) {
  /* phone: the photo stays a block on top; the copy sits on a deep slate band below it,
     the photo fading into that band, so the woman is never hidden behind the buttons */
  .hero { display: flex; flex-direction: column; }
  .hero-media { position: relative; inset: auto; height: 100vw; max-height: 480px; }
  .hero-media img { object-position: 50% 100%; }
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(var(--hero-band), 0) 42%,
      rgba(var(--hero-band), .55) 76%,
      rgba(var(--hero-band), 1) 100%);
  }
  .hero-inner { padding-block: 0 var(--s-12); margin-top: -48px; }
  /* keep the black line on one row, so the pill stays a pill and not a white slab */
  .hero .eyebrow { font-size: 11px; letter-spacing: .07em; padding: 6px 12px 5px; }
}
@media (max-width: 389px) {
  /* 360 px phones: 11 px + .07em wrapped the pill onto two rows */
  .hero .eyebrow { font-size: 10px; letter-spacing: .03em; padding-inline: 10px; }
}
@media (min-width: 900px) {
  .hero { display: grid; align-items: center; min-height: 600px; }
  .hero-inner { padding-block: var(--s-24); }
}
.hero h1 {
  color: var(--c-white); font-size: clamp(2.3rem, 1.3rem + 4vw, var(--fs-5xl));
  line-height: 1.04; margin-top: var(--s-5);
}
/* the one black line she asked to keep: ink on a small white pill */
.hero .eyebrow {
  display: inline-block; color: var(--c-ink); background: var(--c-white);
  padding: 7px 14px 6px; border-radius: var(--r-pill); margin-bottom: 0;
}
/* the lead paragraph only: `.hero p` used to win over `.eyebrow` and `.hero-offer`
   (both are <p>), which blew the eyebrow up to 20 px and killed the offer max-width */
.hero-inner > p:not(.eyebrow):not(.hero-offer) {
  color: var(--c-white); max-width: 54ch; margin-top: var(--s-6);
  /* client 2026-09-18: "the font is too plain under Escucha tu piel" */
  /* user 2026-09-18: smaller than the section intros */
  font-family: var(--font-sub); font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem); font-weight: 400; line-height: 1.55;
}
/* the lead is long on a phone: hold it at the low end of the scale */
@media (max-width: 767px) {
  .hero-inner > p:not(.eyebrow):not(.hero-offer) { font-size: 0.92rem; }
}
.hero-offer {
  /* v3.1: no rectangle. A thin gold hairline, the number in gold display type, the rest in white. */
  display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap;
  width: 100%; max-width: 560px; box-sizing: border-box;
  margin-top: var(--s-10); padding-top: var(--s-5);
  border-top: 1px solid rgba(205, 157, 95, .75);
  font-size: var(--fs-sm); color: var(--c-white); line-height: 1.5;
}
.hero-offer b {
  font-family: var(--font-display); font-size: 2rem; line-height: 1;
  color: var(--c-gold); letter-spacing: 0; white-space: nowrap; flex: none;
}
.hero-offer > span { flex: 1 1 15ch; }
.hero-cta { display: flex; gap: var(--s-3); margin-top: var(--s-8); width: 100%; max-width: 560px; }
.hero-cta .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--s-4); }
@media (max-width: 480px) { .hero-cta { flex-wrap: wrap; } .hero-cta .btn { flex-basis: 100%; } }
.hero .btn-primary { background: var(--c-gold); color: var(--c-ink); }
/* client 2026-09-17: every dark blue button becomes Aöra blue */
.hero .btn-outline-light { background: var(--c-slate); color: var(--c-white); border-color: var(--c-slate); font-weight: 600; }
.hero .btn-outline-light:hover { background: var(--c-slate-hover); color: var(--c-white); border-color: var(--c-slate-hover); }
.hero .btn { transition: box-shadow .25s ease, background-color .2s ease; }
.hero .btn:hover, .hero .btn:focus-visible { box-shadow: 0 6px 18px rgba(12, 18, 26, .30); }
.hero-store { margin-top: var(--s-10); display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--c-white); }
.hero-store svg { color: var(--c-white); flex: none; }

/* v4 (client 2026-09-18, hero idea = products seen from above on a pale ground): `.hero-claro`.
   On desktop the copy sits on a soft sand wash instead of the deep-slate scrim and every text is ink
   (ink on the wash >= 12:1, gold-deep "-20 %" >= 4.8:1). The phone keeps the photo block on top and
   a band below it. Client 2026-09-22 ("a lot of degraded dark blue"): no dark fade over the photo any more;
   the band is her brand blue with ink copy, reached by a short fade behind the eyebrow pill.
   Remove the class to go back to the dark-scrim hero for a photo with a person. */
@media (max-width: 767px) {
  /* client 2026-09-23 ("instead of blue, could we make it beige as on the website"; the user agreed in
     the sent reply, replacing the blue band of 2026-09-22): her brand beige #E5D2C1 under the photo.
     The photo's lower edge is already sand (#E0CCBA), so the band continues it. On beige every text is
     ink, as on the desktop wash: ink 11.9:1, gold-deep "-20 %" as large text. */
  /* user 2026-09-24 ("a large chunk of beige", variant B): no flat band any more. A tall 3:5 photo
     (products in its top half, plain sand below, `hero-movil.webp` 971x1619) runs on behind the eyebrow
     and the title and melts into the desktop's cream wash (#F7F2EC), like the desktop hero. */
  .hero.hero-claro { --hero-band: 247, 242, 236; --hero-photo: min(166.667vw, 1000px); background: rgb(var(--hero-band)); }
  .hero.hero-claro .hero-media { height: var(--hero-photo); max-height: none; }
  .hero.hero-claro .hero-media img { object-position: 50% 0; }
  .hero.hero-claro .hero-inner { margin-top: calc(var(--hero-photo) * -0.46); }
  .hero.hero-claro h1,
  .hero.hero-claro .hero-inner > p:not(.eyebrow):not(.hero-offer),
  .hero.hero-claro .hero-offer,
  .hero.hero-claro .hero-store, .hero.hero-claro .hero-store svg { color: var(--c-ink); }
  .hero.hero-claro .hero-offer { border-top-color: rgba(140, 96, 35, .6); }
  .hero.hero-claro .hero-offer b { color: var(--c-gold-deep); }
  /* "Hacer el test de piel": the deeper brand blue, white text (5.77:1) */
  .hero.hero-claro .btn-outline-light { background: var(--c-slate-deep); color: var(--c-white); border-color: var(--c-slate-deep); }
  .hero.hero-claro .btn-outline-light:hover { background: #3D4E68; color: var(--c-white); border-color: #3D4E68; }
  /* the WhatsApp bubble goes one step darker while it floats over the band (#546782, white icon
     5.77:1); the class is set by the home script */
  .wa.wa-on-brand, .wa.wa-on-brand:hover { background: var(--c-slate-deep); }
  /* the cream wash: clear over the products, then soft behind the pill and the title (54-62 % of the
     photo), almost solid behind the text, solid at the bottom edge (no hard border) */
  .hero.hero-claro .hero-media::after {
    background: linear-gradient(180deg,
      rgba(var(--hero-band), 0) 0,
      rgba(var(--hero-band), 0) 29%,
      rgba(var(--hero-band), .60) 48%,
      rgba(var(--hero-band), .88) 62%,
      rgba(var(--hero-band), .94) 82%,
      rgba(var(--hero-band), 1) 100%);
  }
}
@media (min-width: 768px) {
  .hero.hero-claro .hero-media::after {
    background: linear-gradient(90deg,
      rgba(247, 242, 236, .92) 0%,
      rgba(247, 242, 236, .86) 30%,
      rgba(247, 242, 236, .72) 48%,
      rgba(247, 242, 236, .36) 60%,
      rgba(247, 242, 236, 0) 72%);
  }
  .hero.hero-claro h1,
  .hero.hero-claro .hero-inner > p:not(.eyebrow):not(.hero-offer),
  .hero.hero-claro .hero-offer,
  .hero.hero-claro .hero-store, .hero.hero-claro .hero-store svg { color: var(--c-ink); }
  .hero.hero-claro .hero-offer { border-top-color: rgba(140, 96, 35, .6); }
  .hero.hero-claro .hero-offer b { color: var(--c-gold-deep); }
  .hero.hero-claro .btn:hover, .hero.hero-claro .btn:focus-visible { box-shadow: 0 6px 18px rgba(60, 40, 20, .22); }
}

/* ------------------------------------------------- need tiles (section 3) */
.tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--rule); background: var(--c-white);
}
.tile img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.tile:hover img { transform: scale(1.04); }
.tile:hover { text-decoration: none; }
.tile-cap {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--s-8) var(--s-4) var(--s-4);
  background: linear-gradient(180deg, rgba(31,43,68,0) 0%, rgba(31,43,68,.90) 72%);
  color: #fff;
}
.tile-cap strong { display: block; font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--tr-tight); }
.tile-cap span { display: block; font-size: var(--fs-xs); color: #D7DCE2; }

/* ------------------------------------------------ tabs (bestsellers, reviews) */
.tabs {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-8);
}
.tab {
  min-height: var(--tap); padding: var(--s-2) var(--s-5);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
  background: var(--c-white); color: var(--c-ink);
  font-size: var(--fs-sm); font-weight: 600;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab:hover { border-color: var(--c-slate-deep); }
/* client 2026-09-17: the selected tab uses the Aöra blue, not the navy */
.tab[aria-selected="true"] { background: var(--c-slate); border-color: var(--c-slate); color: var(--c-white); font-weight: 600; }
.tabpanel-note { margin-top: var(--s-6); }

/* --------------------------------------------------------- quiz (section 5) */
.quiz { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 900px) { .quiz { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-16); } }
.quiz-media { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule); }
.quiz-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
/* desktop: the photo fills the full height of the text + quiz column, so top and bottom edges line up (user 23:20) */
@media (min-width: 900px) {
  .quiz { align-items: stretch; }
  .quiz-media { position: relative; min-height: 100%; }
  .quiz-media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 50% 35%; }
}

.quiz-card {
  background: var(--c-white); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-6);
}
@media (min-width: 640px) { .quiz-card { padding: var(--s-8); } }

.quiz-progress { display: none; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.quiz-js .quiz-progress { display: flex; }
.quiz-js .quiz-progress[hidden] { display: none; }
.quiz-progress p { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep); flex: none; }
.quiz-bar { flex: 1 1 auto; height: 4px; background: var(--c-border); border-radius: var(--r-pill); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; background: var(--c-slate-deep); width: 25%; transition: width var(--dur-slow) var(--ease); }

.quiz-step { border: 0; margin: 0; padding: 0; }
.quiz-step + .quiz-step { margin-top: var(--s-8); border-top: 1px solid var(--rule); padding-top: var(--s-8); }
.quiz-js .quiz-step + .quiz-step { margin-top: 0; border-top: 0; padding-top: 0; }
.quiz-step legend { padding: 0; font-family: var(--font-display); font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
.quiz-hint { font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--s-2); }

/* Without JS (phone file-preview viewers run no scripts) the four questions
   appeared all at once, and the first version only added the next question
   below the answered one (client 2026-09-18: she wants ONE question at a time,
   like the JS wizard). Each of steps 1-3 carries a hidden checkbox .quiz-go and
   a label "Siguiente" that toggles it; the rules below show exactly one step:
   step N while its own go box is unchecked and the previous one is checked.
   The "Siguiente" label only appears once that step holds a real answer, so no
   dead button. The JS wizard is untouched (it adds .quiz-js to the card).
   Everything sits inside @supports selector(:has(*)); a browser without :has()
   falls back to the old all-at-once form instead of a form stuck on step 1. */
.quiz-card:not(.quiz-js) .quiz-step > legend::before {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep);
}
.quiz-card:not(.quiz-js) .quiz-step[data-step="1"] > legend::before { content: "Paso 1 de 4"; }
.quiz-card:not(.quiz-js) .quiz-step[data-step="2"] > legend::before { content: "Paso 2 de 4"; }
.quiz-card:not(.quiz-js) .quiz-step[data-step="3"] > legend::before { content: "Paso 3 de 4"; }
.quiz-card:not(.quiz-js) .quiz-step[data-step="4"] > legend::before { content: "Paso 4 de 4"; }

/* the go boxes are never seen and never submitted (they carry no name) */
.quiz-go { display: none; }
/* the no-JS "Siguiente" row is off by default: the JS wizard and the :has()
   fallback both use the real buttons instead */
.quiz-nav-nojs { display: none; margin-top: var(--s-8); }
.quiz-js .quiz-nav-nojs,
.quiz-js .quiz-next-nojs { display: none; }

@supports selector(:has(*)) {
  .quiz-card:not(.quiz-js) .quiz-step[data-step="2"],
  .quiz-card:not(.quiz-js) .quiz-step[data-step="3"],
  .quiz-card:not(.quiz-js) .quiz-step[data-step="4"],
  .quiz-card:not(.quiz-js) .quiz-nav { display: none; }

  /* one question at a time: a step goes away as soon as its own go box is on */
  .quiz-card:not(.quiz-js):has(#quiz-go-1:checked) .quiz-step[data-step="1"] { display: none; }
  .quiz-card:not(.quiz-js):has(#quiz-go-1:checked):not(:has(#quiz-go-2:checked)) .quiz-step[data-step="2"] { display: block; }
  .quiz-card:not(.quiz-js):has(#quiz-go-2:checked):not(:has(#quiz-go-3:checked)) .quiz-step[data-step="3"] { display: block; }
  .quiz-card:not(.quiz-js):has(#quiz-go-3:checked) .quiz-step[data-step="4"] { display: block; }

  /* "Siguiente" only once the visible step holds a real answer */
  .quiz-card:not(.quiz-js) .quiz-step:has(input:not(.quiz-go):checked) .quiz-nav-nojs { display: block; }
  /* question 2 ("hasta dos") may stay empty: the skin type then sets the priority */
  .quiz-card:not(.quiz-js) .quiz-step[data-step="2"] .quiz-nav-nojs { display: block; }

  .quiz-card:not(.quiz-js):has(.quiz-step[data-step="4"] input:not(.quiz-go):checked) .quiz-nav { display: flex; }
}

.qopts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.qopt {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: var(--s-2) var(--s-5);
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.qopt:hover { border-color: var(--c-slate-deep); }
.qopt input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-slate-deep); flex: none; }
/* client 2026-09-17: the chosen answer uses the Aöra blue, not the navy */
.qopt:has(input:checked) { background: var(--c-slate); color: var(--c-white); border-color: var(--c-slate); font-weight: 600; }
.qopt:has(input:checked) input { accent-color: var(--c-white); }
.qopt:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

.quiz-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
/* .btn is inline-flex, which beats the browser's [hidden] rule: without JS the
   dead "Atrás" / "Siguiente" buttons would show. The JS clears their hidden
   attribute on start-up, so the wizard is not affected. */
.quiz-nav .btn[hidden] { display: none; }
.quiz-js .quiz-submit { display: none; }

/* result */
.quiz-result:empty { display: none; }
.quiz-result { margin-top: var(--s-8); }
.quiz-verdict {
  border: 1px solid var(--c-gold); border-radius: var(--r-md);
  background: var(--c-gold-tint); padding: var(--s-5) var(--s-6);
}
.quiz-verdict h3 { font-size: var(--fs-xl); }
.quiz-verdict p { font-size: var(--fs-sm); color: var(--c-ink); margin-top: var(--s-2); }
.quiz-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
/* phone: one product per row, photo left (three cards in two columns left the
   third one alone on its own row) */
@media (max-width: 479px) {
  .quiz-picks { grid-template-columns: 1fr; }
  .quiz-picks .mini { flex-direction: row; align-items: center; }
  .quiz-picks .mini img { width: 88px; flex: none; }
}

.mini { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.mini img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--c-white); padding: var(--s-2); }
.mini-body { padding: var(--s-3); display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mini-brand { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep); }
.mini-name { font-size: var(--fs-xs); line-height: 1.35; }
.mini-name a { color: var(--c-ink); }
.mini-price { font-size: var(--fs-sm); font-weight: 600; margin-top: auto; padding-top: var(--s-2); }

/* the in-store step under the result */
.quiz-store {
  margin-top: var(--s-8); padding: var(--s-6);
  background: var(--c-slate-tint); border: 1px solid var(--rule); border-radius: var(--r-md);
}
.quiz-store h3 { font-size: var(--fs-lg); }
.quiz-store p { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s-2); }
.quiz-store .row { margin-top: var(--s-5); }

/* ------------------------------------------------- routine (section 6) */
.routine { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) { .routine { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }
.routine-img { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule); }
.routine-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.steps { counter-reset: st; display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-8); }
.steps li { display: flex; gap: var(--s-4); align-items: flex-start; }
.steps li::before {
  counter-increment: st; content: counter(st);
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--c-slate); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-slate-deep);
}
.steps strong { display: block; font-size: var(--fs-sm); }
.steps span { font-size: var(--fs-xs); color: var(--text-2); }

/* routine bundles */
.bundle { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5); }
.bundle h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
.bundle > p { font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--s-2); }
.bundle-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-5); }
.bundle-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--c-cream); border: 1px solid var(--rule); border-radius: var(--r-xs); padding: 4px; }
/* One column on a phone: two of these cards side by side leave ~127px of text. */
.bundles { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .bundles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .bundles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bundle-steps { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.bundle-steps li { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
.bundle-steps b { color: var(--c-ink); font-weight: 600; }
.bundle-steps b::after { content: ":"; }
.bundle-foot { margin-top: auto; padding-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.bundle-total { font-size: var(--fs-lg); font-weight: 600; font-family: var(--font-display); letter-spacing: 0; }
/* Only the note line is a block: wc_price() prints its own spans, which must stay
   on one line ("90,00 €" split into "90,00" / "€" before 2026-09-23). */
.bundle-total .bundle-note { display: block; font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.bundle-total del { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 400; color: var(--text-2); margin-right: var(--s-1); }

/* ----------------------------------------------- trending (section 7) */
.trend-chips { margin-top: var(--s-6); }
.trend-note { margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--text-2); }

/* ------------------------------------------------- brand strip (section 8) */
.brandstrip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 640px) { .brandstrip { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 900px) { .brandstrip { grid-template-columns: repeat(8, minmax(0,1fr)); } }
.brandstrip a { background: var(--c-white); display: grid; place-items: center; padding: var(--s-5) var(--s-4); min-height: 96px; }
.brandstrip a:hover { background: var(--c-cream); }
.brandstrip img { width: 100%; max-width: 136px; height: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.brandstrip a:hover img { filter: none; opacity: 1; }
.brandstrip .txt { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); text-align: center; }

/* --------------------------------------------------- academia (section 9) */
.post { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.post img { aspect-ratio: 4/3; width: 100%; object-fit: cover; }
.post-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.post-body h3 { font-size: var(--fs-lg); }
.post-meta { font-size: var(--fs-2xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep); font-weight: 600; }
.post-ing { font-size: var(--fs-2xs); color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.post-ing a { font-weight: 600; color: var(--c-slate-deep); border-bottom: 1px solid var(--c-slate); }
.post-ing a:hover { text-decoration: none; border-bottom-color: var(--c-slate-deep); }
.post-foot { margin-top: auto; padding-top: var(--s-2); }

/* -------------------------------------------------------- club (section 10) */
.club { position: relative; display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) { .club { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-16); } }
.club-media { border-radius: var(--r-md); overflow: hidden; }
.club-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.club-list { margin-top: var(--s-8); display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .club-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-8); } }
.club-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.club-list svg { flex: none; color: var(--c-gold-deep); margin-top: 2px; }
.club-list strong { display: block; font-size: var(--fs-base); }
.club-list span { font-size: var(--fs-xs); }
.club-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-10); }
.club-edge {
  height: 96px; margin-top: var(--s-12);   /* exactly one tile row */
  border-top: 1px solid var(--rule-on-brand);
  opacity: .9;
}
/* client 2026-09-18: the Club band is beige now, not brand blue.
   Everything that assumed the blue surface is re-tuned here. */
#club .club-list strong + span { color: var(--muted-on-beige); }
#club .club-edge { border-top-color: rgba(107, 71, 21, .28); opacity: .5; }
#club .club-edge.brand-pattern::before { background-color: var(--c-slate); opacity: .45; }
/* gold on beige is nearly the same tone: a gold-deep edge keeps the button readable */
#club .btn-primary { box-shadow: inset 0 0 0 1px var(--c-gold-deep); }

/* ---------------------------------------------------- reviews (section 11) */
.review { background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.review blockquote { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.4; letter-spacing: var(--tr-tight); }
.review figcaption { font-size: var(--fs-xs); color: var(--text-2); margin-top: auto; }
.review-prod { font-size: var(--fs-xs); font-weight: 600; color: var(--c-slate-deep); }

/* ----------------------------------------------------- visita (section 12) */
.visita { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) { .visita { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }
.visita-img { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule); }
.visita-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.visita-data { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.visita-data li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.visita-data svg { flex: none; color: var(--c-slate-deep); margin-top: 2px; }
.visita-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.map-box {
  margin-top: var(--s-8); position: relative; overflow: hidden;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background:
    repeating-linear-gradient(0deg, rgba(123,142,170,.16) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(123,142,170,.16) 0 1px, transparent 1px 34px),
    var(--c-mist);
  min-height: 180px; display: grid; place-items: center; text-align: center; padding: var(--s-6);
}
.map-box p { font-size: var(--fs-xs); color: var(--text-2); max-width: 30ch; }
.map-pin { color: var(--c-clay); margin-inline: auto; }
/* Home "Visítanos": the shop photo carries the address and a plain Google Maps
   link instead of an embedded map (user decision 2026-09-23: nothing from Google
   loads on the page, no consent needed). */
.visita-map { background: var(--c-white); }
.visita-map-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); }
.visita-map-bar p { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); }
.visita-map-bar svg { flex: none; color: var(--c-slate-deep); margin-top: 2px; }

/* ------------------------------------------------- newsletter (section 13) */
.news { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .news { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); } }
.news-form { display: flex; flex-direction: column; gap: var(--s-4); }
.news-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.news-row .input { flex: 1 1 200px; }

/* reviews: one column on phones (two 170px columns broke the quotes into one word per line) */
#opiniones .grid-3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { #opiniones .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { #opiniones .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --------------------------------- tipos de producto (section 14, v3) -----
   Replaces the old "vista de revisión" block that showed the mega-menu panel
   inline. Now a real section: 11 product-type cards with a real photo, and
   the editorial "Destacado del mes" as one wide card on a pale blue band. */
.ptypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (min-width: 640px) { .ptypes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 1100px) { .ptypes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }

.ptype {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.ptype:hover {
  text-decoration: none; transform: translateY(-2px);
  border-color: var(--c-slate); box-shadow: 0 10px 22px rgba(31,43,68,.10);
}
/* white ground: most catalogue photos are jpg on white, so a tinted media box
   would show a white rectangle inside a blue one. The blue lives in the count,
   the hover border and the Destacado band instead. */
.ptype-media { background: var(--c-white); border-bottom: 1px solid var(--rule); }
.ptype-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--s-4);
  transition: transform var(--dur-slow) var(--ease);
}
.ptype:hover .ptype-media img { transform: scale(1.05); }
.ptype-body { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: var(--s-4); }
.ptype-body strong { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.ptype-n {
  margin-top: auto; padding-top: var(--s-2);
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-slate-deep);
  font-variant-numeric: tabular-nums;
}

/* the editorial slot: one wide card on the pale blue band */
.destacado {
  margin-top: var(--s-12);
  display: grid; gap: var(--s-6); align-items: center;
  background: var(--c-mist); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-6);
}
@media (min-width: 900px) {
  .destacado { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s-12); padding: var(--s-10); }
}
.destacado-media {
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
}
.destacado-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--s-5); }
.destacado h3 { font-size: var(--fs-xl); }
.destacado-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ===== 06-resultado-test.html (scope .aora-resultado) ===== */
.aora-resultado /* ====================================================================
     Page-only styles: resultado del test de piel.
     Tokens only (tokens.css). Todo va dentro de .rz para no tocar los
     componentes compartidos de base.css.
     ==================================================================== */

  /* ---- Botones: mismo tratamiento que el hero de la portada -----------
     Equivalente a home-v2.css (55-66) para que esta página no dependa de
     home-v2.css: oro con texto tinta, .aora-resultado secundario azul Aora con las
     letras en blanco (v4 2026-09-17), .aora-resultado y brillo dorado al pasar por encima. */
  .rz .btn-primary { background: var(--c-gold); color: var(--c-ink); }
.aora-resultado .rz .btn-navy {
    background: var(--c-slate); color: var(--c-white);
    border: 1px solid var(--c-slate);
  }
.aora-resultado .rz .btn-navy:hover, .aora-resultado .rz .btn-navy:focus-visible {
    background: var(--c-slate-hover); color: var(--c-white); border-color: var(--c-slate-hover);
  }
.aora-resultado .rz .btn { transition: box-shadow .25s ease, transform .25s ease, background-color .2s ease; }
.aora-resultado .rz .btn:hover, .aora-resultado .rz .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(205,157,95,.28), 0 10px 28px rgba(205,157,95,.40);
    transform: translateY(-1px);
  }
.aora-resultado /* un botón marcado como pendiente no lleva el subrayado punteado de .ph */
  .rz .btn.ph { border-bottom-style: solid; }
.aora-resultado /* ------------------------------------------- 1. Cabecera del resultado */
  .res { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .aora-resultado .res { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-12); }
  .aora-resultado .res-media { order: 2; }
}
.aora-resultado .res-media {
    border-radius: var(--r-md); overflow: hidden; background: var(--c-white);
    border: 1px solid var(--rule);
  }
.aora-resultado .res-media img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.aora-resultado .res h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs-4xl)); }
.aora-resultado .res-sum { max-width: 54ch; }
.aora-resultado /* respuestas del test */
  .answers { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.aora-resultado .answer {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--s-2) var(--s-4); min-width: 0;
    background: var(--c-white); border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
  }
.aora-resultado .answer b {
    font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--tr-wide); color: var(--c-slate-deep);
  }
.aora-resultado .answer span { font-size: var(--fs-sm); color: var(--c-ink); }
.aora-resultado .answers-edit { margin-top: var(--s-4); font-size: var(--fs-sm); }
.aora-resultado .res-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.aora-resultado /* ----------------------------------------------- 2. Diagnóstico (3+1) */
  .dcard { display: flex; flex-direction: column; gap: var(--s-2); }
.aora-resultado .dcard h3 { font-size: var(--fs-lg); }
.aora-resultado .dcard p { font-size: var(--fs-sm); color: var(--text-2); }
.aora-resultado .dcard .dtag {
    align-self: flex-start; margin-bottom: var(--s-1);
    font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--tr-wide); color: var(--c-slate-deep);
  }
.aora-resultado .spf-note {
    display: flex; gap: var(--s-4); align-items: flex-start;
    margin-top: var(--s-8); padding: var(--s-5);
    background: var(--c-gold-tint); border-left: 3px solid var(--c-gold);
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }
.aora-resultado .spf-note svg { flex: none; color: var(--c-gold-deep); margin-top: 2px; }
.aora-resultado .spf-note p { font-size: var(--fs-sm); color: var(--c-ink); }
.aora-resultado .spf-note p + p { margin-top: var(--s-2); }
.aora-resultado .spf-note strong { font-weight: 600; }
.aora-resultado /* ------------------------------------------------ 3. Rutina (4 pasos) */
  .rut { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 900px) {
  .aora-resultado .rut { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-12); }
}
.aora-resultado .rsteps { counter-reset: rs; display: flex; flex-direction: column; gap: var(--s-5); }
.aora-resultado .rsteps li { counter-increment: rs; display: flex; gap: var(--s-4); align-items: flex-start; }
.aora-resultado .rsteps li::before {
    content: counter(rs); flex: none;
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-gold);
    font-family: var(--font-display); font-size: var(--fs-base); color: var(--c-ink);
  }
.aora-resultado .rsteps strong { display: block; font-weight: 600; }
.aora-resultado .rsteps span span { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.aora-resultado /* tarjeta de rutina completa */
  .rbundle {
    background: var(--c-white); border: 1px solid var(--rule);
    border-radius: var(--r-lg); padding: var(--s-6);
  }
@media (min-width: 640px) {
  .aora-resultado .rbundle { padding: var(--s-8); }
}
.aora-resultado .rbundle h3 { font-size: var(--fs-xl); }
.aora-resultado .rbundle > p { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s-2); }
.aora-resultado .rlist { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.aora-resultado .rlist li {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: var(--s-4); align-items: center;
    padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule);
  }
.aora-resultado .rlist img {
    width: 56px; height: 56px; object-fit: contain;
    background: var(--c-cream); border-radius: var(--r-sm); padding: 4px;
  }
.aora-resultado .rlist b {
    display: block; font-size: var(--fs-2xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--c-slate-deep);
  }
.aora-resultado .rlist a { font-size: var(--fs-sm); color: var(--c-ink); overflow-wrap: anywhere; }
.aora-resultado .rlist .price { font-size: var(--fs-sm); white-space: nowrap; }
.aora-resultado .rtotal {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: var(--s-2) var(--s-4); margin-top: var(--s-5);
  }
.aora-resultado .rtotal .price { font-family: var(--font-display); font-size: var(--fs-xl); }
.aora-resultado .rtotal .price-old { font-size: var(--fs-base); }
.aora-resultado .rsave {
    display: inline-block; margin-top: var(--s-3);
    padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
    background: var(--c-gold-tint); color: var(--c-gold-deep);
    font-size: var(--fs-xs); font-weight: 600;
  }
.aora-resultado .rbundle .btn { margin-top: var(--s-5); }
.aora-resultado .rbundle .xsmall { margin-top: var(--s-3); color: var(--text-2); }
.aora-resultado /* --------------------------------------------------- 4. Mañana y noche */
  .amp { display: grid; gap: var(--s-6); }
@media (min-width: 720px) {
  .aora-resultado .amp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
}
.aora-resultado .amp-col { background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-6); }
.aora-resultado .amp-col h3 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-lg); }
.aora-resultado .amp-col h3 svg { color: var(--c-gold-deep); flex: none; }
.aora-resultado .amp-col ol { counter-reset: ap; margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.aora-resultado .amp-col li { counter-increment: ap; display: flex; gap: var(--s-3); font-size: var(--fs-sm); }
.aora-resultado .amp-col li::before {
    content: counter(ap) "."; flex: none; width: 18px;
    font-weight: 600; color: var(--c-slate-deep);
  }
.aora-resultado .amp-col li span { display: block; color: var(--text-2); min-width: 0; }
.aora-resultado .amp-col li strong { display: block; font-weight: 600; color: var(--c-ink); }
.aora-resultado .tips { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 720px) {
  .aora-resultado .tips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.aora-resultado .tip { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); }
.aora-resultado .tip svg { flex: none; color: var(--c-gold-deep); margin-top: 2px; }
.aora-resultado .tip strong { display: block; color: var(--c-ink); font-weight: 600; }
.aora-resultado /* ------------------------------------------------ 5. Análisis en tienda */
  .anal { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .aora-resultado .anal { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-12); }
}
.aora-resultado .anal-media { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule); }
.aora-resultado .anal-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.aora-resultado .anal-list { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-6); }
.aora-resultado .anal-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.aora-resultado .anal-list svg { flex: none; color: var(--c-gold-deep); margin-top: 3px; }
.aora-resultado .anal-list span { min-width: 0; }
.aora-resultado .anal-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.aora-resultado /* ----------------------------------------------- 6. Guarda tu resultado */
  .save-band { position: relative; overflow: hidden; }
.aora-resultado .save-edge {
    position: absolute; inset-block: 0; right: 0; width: 192px;   /* dos teselas de 96 px */
    opacity: .55; pointer-events: none;
  }
.aora-resultado /* teselas enteras: el patrón se ancla a la derecha, .aora-resultado no al centro */
  .save-edge::before { -webkit-mask-position: right center; mask-position: right center; }
@media (max-width: 767px) {
  .aora-resultado .save-edge { display: none; }
}
.aora-resultado .save-inner { position: relative; max-width: 720px; }
.aora-resultado .save-form { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.aora-resultado .save-form .field { flex: 1 1 260px; min-width: 0; }
.aora-resultado .save-form .btn { flex: none; align-self: flex-end; }
.aora-resultado /* v4 (2026-09-18): the band is beige, .aora-resultado so everything reads in ink on beige */
  .save-form .label { color: var(--c-ink); }
.aora-resultado .save-form .input { background: var(--c-white); border-color: #CDB9A5; color: var(--c-ink); }
.aora-resultado .save-band .check { margin-top: var(--s-4); color: var(--c-ink); max-width: 60ch; }
.aora-resultado .save-band .check a { color: var(--link-on-beige); text-decoration: underline; }
.aora-resultado .save-band h2 { color: var(--c-ink); }
.aora-resultado .save-band .eyebrow { color: var(--eyebrow-on-beige); }
.aora-resultado .save-inner > p { color: var(--muted-on-beige); }
.aora-resultado .save-note { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--muted-on-beige); max-width: 60ch; }
.aora-resultado /* the diamond tile was tinted by .band-brand; on beige it is gold */
  .save-edge { opacity: .38; }
.aora-resultado .save-edge::before { background-color: var(--c-gold); }
.aora-resultado /* gold fill on beige needs an edge to stay readable as a button (3.75:1) */
  .save-band .btn-primary { border-color: var(--c-gold-deep); }
.aora-resultado /* ------------------------------------------------------------- 7. FAQ */
  .faq-list { max-width: 760px; }

/* ===== 09-analisis.html (scope .aora-analisis) ===== */
.aora-analisis /* ================================================================
     Página 09 — Visítanos en Marbella + Análisis de piel
     Todo el CSS propio de esta página vive aquí: no depende de
     home-v2.css. Las reglas de los botones son las mismas que en el
     hero de la portada (home-v2.css, .aora-analisis líneas 55-66).
     ================================================================ */

  /* ---- Botones: oro con texto tinta + azul Aöra con letras en blanco ---- */
  .btn-navy { background: var(--c-slate); color: var(--c-white); border-color: var(--c-slate); }
.aora-analisis .btn-navy:hover { background: var(--c-slate-deep); color: var(--c-white); border-color: var(--c-slate-deep); }
.aora-analisis .cta-row { display: flex; gap: var(--s-3); margin-top: var(--s-8); width: 100%; max-width: 560px; }
.aora-analisis .cta-row .btn {
    flex: 1 1 0; min-width: 0; padding-inline: var(--s-4);
    transition: box-shadow .25s ease, transform .25s ease, background-color .2s ease, color .2s ease;
  }
.aora-analisis .cta-row .btn-primary { background: var(--c-gold); color: var(--c-ink); }
.aora-analisis .cta-row .btn:hover, .aora-analisis .cta-row .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(205,157,95,.28), 0 10px 28px rgba(205,157,95,.40);
    transform: translateY(-1px);
  }
@media (max-width: 480px) {
  .aora-analisis .cta-row { flex-wrap: wrap; }
  .aora-analisis .cta-row .btn { flex-basis: 100%; }
}
.aora-analisis /* ---- 2. Hero ---- */
  .ahero { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .aora-analisis .ahero { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); gap: var(--s-12); }
}
.aora-analisis .ahero-media { order: -1; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 900px) {
  .aora-analisis .ahero-media { order: 0; }
}
.aora-analisis .ahero-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.aora-analisis .ahero-media figcaption { font-size: var(--fs-2xs); color: var(--text-2); padding: var(--s-2) var(--s-3); background: var(--c-white); }
.aora-analisis .ahero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, var(--fs-4xl)); }
.aora-analisis .facts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.aora-analisis .facts li {
    display: inline-flex; align-items: center; gap: var(--s-2);
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-pill);
    padding: 8px 14px; font-size: var(--fs-sm); color: var(--text-2);
  }
.aora-analisis .facts svg { color: var(--c-gold-deep); flex: none; }
.aora-analisis .facts b { color: var(--c-ink); font-weight: 600; }
.aora-analisis /* ---- 3. Qué mide ---- */
  .mcard {
    background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
    padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
  }
.aora-analisis .mcard .ic {
    width: 40px; height: 40px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--c-slate-tint); color: var(--c-slate-deep);
  }
.aora-analisis .mcard h3 { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; }
.aora-analisis .mcard p { font-size: var(--fs-sm); color: var(--text-2); }
.aora-analisis /* ---- 4. Cómo funciona ---- */
  .pasos { counter-reset: paso; display: grid; gap: var(--s-6); margin-top: var(--s-8); }
@media (min-width: 900px) {
  .aora-analisis .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); }
}
.aora-analisis .pasos li { position: relative; padding-left: 52px; }
.aora-analisis .pasos li::before {
    counter-increment: paso; content: counter(paso);
    position: absolute; left: 0; top: 0;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--c-gold); color: var(--c-ink);
    font-size: var(--fs-sm); font-weight: 700;
  }
.aora-analisis .pasos h3 { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; }
.aora-analisis .pasos p { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s-2); }
.aora-analisis /* ---- 5. Reserva ---- */
  .reserva { display: grid; gap: var(--s-8); margin-top: var(--s-8); align-items: start; }
@media (min-width: 900px) {
  .aora-analisis .reserva { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-12); }
}
.aora-analisis .form-card {
    background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
    padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5);
  }
.aora-analisis .form-row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) {
  .aora-analisis .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.aora-analisis .form-card .btn-primary { align-self: flex-start; }
.aora-analisis .aside-box {
    background: var(--c-white); border: 1px solid var(--rule); border-left: 3px solid var(--c-gold);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4);
  }
.aora-analisis .aside-box h3 { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; }
.aora-analisis .aside-box p { font-size: var(--fs-sm); color: var(--text-2); }
.aora-analisis .aside-links { display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--fs-sm); }
.aora-analisis .aside-links a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); }
.aora-analisis .aside-links svg { color: var(--c-gold-deep); flex: none; }
.aora-analisis .book-card {
    background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
    padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5);
  }
.aora-analisis .book-card h3 { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0; }
.aora-analisis .book-facts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.aora-analisis .book-facts li {
    display: inline-flex; align-items: center; gap: var(--s-2);
    background: var(--c-slate-tint); border-radius: var(--r-pill);
    padding: 7px 14px; font-size: var(--fs-sm); color: var(--c-ink);
  }
.aora-analisis .book-facts b { font-weight: 600; }
.aora-analisis .book-facts svg { color: var(--c-slate-deep); flex: none; }
.aora-analisis /* calendario real de Google (embed de la cuenta de Aöra) */
  .cal-embed {
    width: 100%; border: 1px solid var(--rule); border-radius: var(--r-md);
    background: var(--c-white); padding: var(--s-3);
  }
@media (min-width: 900px) {
  .aora-analisis .cal-embed { padding: var(--s-4); }
}
.aora-analisis .cal-embed iframe { display: block; width: 100%; height: 600px; border: 0; border-radius: var(--r-sm); }
.aora-analisis /* the Google widget stacks on narrow screens, .aora-analisis so it needs more height and
     the full card width there */
  @media (max-width: 767px) {
    .cal-embed { padding: 0; border: 0; }
    .cal-embed iframe { height: 1160px; border: 1px solid var(--rule); }
  }
.aora-analisis .cal-link { margin-top: var(--s-3); font-size: var(--fs-sm); }
.aora-analisis /* the theme holds Google's calendar until cookie consent (aora_the_booking_embed) */
  .cal-consent-note {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-4); background: var(--c-slate-tint); border-radius: var(--r-sm);
  }
.aora-analisis .cal-consent-note p { margin: 0; font-size: var(--fs-sm); color: var(--c-ink); }
.aora-analisis .cal-consent-note a { color: var(--c-slate-deep); }
.aora-analisis .cal-consent-note .btn[hidden] { display: none; }
.aora-analisis /* aviso lateral en beige (v4, .aora-analisis petición de la clienta 2026-09-18) */
  .wa-box { background: var(--c-beige-soft); border: 1px solid #CDB9A5; color: var(--c-ink); }
.aora-analisis .wa-box h3 { color: var(--c-ink); }
.aora-analisis .wa-box p { color: var(--muted-on-beige); }
.aora-analisis .wa-box .hours-list { color: var(--muted-on-beige); }
.aora-analisis .wa-box .hours-list b { color: var(--c-ink); }
.aora-analisis .wa-box .aside-links a { color: var(--link-on-beige); }
.aora-analisis .wa-box .btn-wa {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    width: 100%; min-height: var(--tap);
    background: #1F7A4D; border-color: #1F7A4D; color: var(--c-white);
  }
.aora-analisis .wa-box .btn-wa:hover, .aora-analisis .wa-box .btn-wa:focus-visible { background: #18633E; border-color: #18633E; color: var(--c-white); }
.aora-analisis .hours-list { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.aora-analisis .hours-list b { color: var(--c-ink); font-weight: 600; }
.aora-analisis /* ---- 6. Visítanos ---- */
  .vgrid { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) {
  .aora-analisis .vgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); }
}
.aora-analisis .visita-data { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.aora-analisis .visita-data li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.aora-analisis .visita-data svg { flex: none; color: var(--c-gold-deep); margin-top: 2px; }
.aora-analisis .visita-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.aora-analisis /* Foto real de la tienda en lugar de un mapa: sin iframe de Google y sin
     cookies. El botón "Abrir en Google Maps" de .visita-cta lleva al mapa. */
  .visita-fig { margin: 0; }
.aora-analisis .visita-fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; border-radius: var(--r-md); border: 1px solid var(--rule); background: var(--c-cream); }
.aora-analisis .visita-fig figcaption { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-2); }
.aora-analisis .fotos { margin-top: var(--s-12); }
.aora-analisis .fotos figure { margin: 0; }
.aora-analisis .fotos img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--c-cream);
  }
.aora-analisis .fotos figcaption { font-size: var(--fs-2xs); color: var(--text-2); margin-top: var(--s-2); }
.aora-analisis /* ---- 7. Opiniones ---- */
  .review {
    background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
    padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3);
  }
.aora-analisis .review blockquote { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.4; letter-spacing: var(--tr-tight); }
.aora-analisis .review figcaption { font-size: var(--fs-xs); color: var(--text-2); margin-top: auto; padding-top: var(--s-2); }
.aora-analisis .review-prod { font-size: var(--fs-xs); font-weight: 600; color: var(--c-slate-deep); }
.aora-analisis .review-prod a { color: inherit; }
@media (max-width: 899px) {
  .aora-analisis #opiniones .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
.aora-analisis /* ---- 8. Preguntas frecuentes ---- */
  .acc-group { border-top: 1px solid var(--rule); margin-top: var(--s-8); }

/* ===== 10-academia.html (scope .aora-academia) ===== */
.aora-academia /* ---- Page-only styles: Academia de la piel (índice) ---- */

  /* Article card. Same component as the home page (home-v2.css .post), .aora-academia copied here because this page does not load home-v2.css. */
  .post { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.aora-academia .post img { aspect-ratio: 4/3; width: 100%; object-fit: cover; }
.aora-academia .post-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.aora-academia .post-body h3 { font-size: var(--fs-lg); }
.aora-academia .post-meta { font-size: var(--fs-2xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep); font-weight: 600; }
.aora-academia .post-ing { font-size: var(--fs-2xs); color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.aora-academia .post-ing a { font-weight: 600; color: var(--c-slate-deep); border-bottom: 1px solid var(--c-gold); }
.aora-academia .post-ing a:hover { text-decoration: none; border-bottom-color: var(--c-ink); }
.aora-academia .post-foot { margin-top: auto; padding-top: var(--s-2); }
.aora-academia /* Hero-style buttons (home-v2.css hero rules, .aora-academia scoped to .cta-row here):
     gold primary with ink text + navy fill with gold wording, .aora-academia gold glow on hover. */
  .cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.aora-academia .cta-row .btn { transition: box-shadow .25s ease, transform .25s ease, background-color .2s ease; }
.aora-academia .cta-row .btn:hover, .aora-academia .cta-row .btn:focus-visible { box-shadow: 0 0 0 3px rgba(205,157,95,.28), 0 10px 28px rgba(205,157,95,.40); transform: translateY(-1px); }
.aora-academia .btn-navy { background: var(--c-slate); color: var(--c-white); border-color: var(--c-slate); }
.aora-academia .btn-navy:hover { background: var(--c-slate-hover); color: var(--c-white); border-color: var(--c-slate-hover); }
.aora-academia /* ---- Hero ---- */
  .acad-hero { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .aora-academia .acad-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-12); }
}
.aora-academia .acad-hero-media img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--r-md); border: 1px solid var(--rule);
  }
.aora-academia .acad-search { display: flex; gap: var(--s-3); max-width: 460px; }
.aora-academia .acad-search .input { flex: 1 1 auto; min-width: 0; }
.aora-academia .acad-search .btn { flex: none; }
.aora-academia /* ---- Ingredient index ---- */
  .az-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.aora-academia /* ---- Featured article ---- */
  .feat {
    display: grid; background: var(--c-white);
    border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
    margin-bottom: var(--s-8);
  }
@media (min-width: 900px) {
  .aora-academia .feat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.aora-academia .feat-media { display: block; }
.aora-academia .feat-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) {
  .aora-academia .feat-media img { aspect-ratio: auto; height: 100%; min-height: 340px; }
}
.aora-academia .feat-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); justify-content: center; }
@media (min-width: 900px) {
  .aora-academia .feat-body { padding: var(--s-10); }
}
.aora-academia .feat-body h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, var(--fs-2xl)); }
.aora-academia /* ---- Guías ---- */
  .guide { display: flex; flex-direction: column; gap: var(--s-3); height: 100%; }
.aora-academia .guide h3 { font-size: var(--fs-lg); }
.aora-academia .guide .link-more { margin-top: auto; align-self: flex-start; padding-top: var(--s-2); }
.aora-academia /* ---- Newsletter strip (compact band) ---- */
  .nl-strip { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) {
  .aora-academia .nl-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); }
}
.aora-academia .nl-form { display: flex; flex-direction: column; gap: var(--s-4); }
.aora-academia .nl-line { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.aora-academia .nl-line .field { flex: 1 1 240px; min-width: 0; }
.aora-academia .nl-line .btn { flex: none; align-self: flex-end; }
@media (max-width: 539px) {
  .aora-academia .nl-line .btn { width: 100%; align-self: stretch; }
}

/* ===== 10b-academia-articulo.html (scope .aora-articulo) ===== */
.aora-articulo /* ---- Page-only styles: artículo de la Academia ---- */

  /* Article card (home-v2.css .post), .aora-articulo copied because this page does not load home-v2.css */
  .post { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.aora-articulo .post img { aspect-ratio: 4/3; width: 100%; object-fit: cover; }
.aora-articulo .post-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.aora-articulo .post-body h3 { font-size: var(--fs-lg); }
.aora-articulo .post-meta { font-size: var(--fs-2xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep); font-weight: 600; }
.aora-articulo .post-ing { font-size: var(--fs-2xs); color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.aora-articulo .post-ing a { font-weight: 600; color: var(--c-slate-deep); border-bottom: 1px solid var(--c-gold); }
.aora-articulo .post-ing a:hover { text-decoration: none; border-bottom-color: var(--c-ink); }
.aora-articulo .post-foot { margin-top: auto; padding-top: var(--s-2); }
.aora-articulo /* Hero-style buttons (home-v2.css hero rules, .aora-articulo scoped to .cta-row here):
     gold primary with ink text + navy fill with gold wording, .aora-articulo gold glow on hover. */
  .cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.aora-articulo .cta-row .btn { transition: box-shadow .25s ease, transform .25s ease, background-color .2s ease; }
.aora-articulo .cta-row .btn:hover, .aora-articulo .cta-row .btn:focus-visible { box-shadow: 0 0 0 3px rgba(205,157,95,.28), 0 10px 28px rgba(205,157,95,.40); transform: translateY(-1px); }
.aora-articulo .btn-navy { background: var(--c-slate); color: var(--c-white); border-color: var(--c-slate); }
.aora-articulo .btn-navy:hover { background: var(--c-slate-hover); color: var(--c-white); border-color: var(--c-slate-hover); }
.aora-articulo /* ---- Two-column article layout: text + sticky side column from 1024px ----
     The side column comes before the body in the source so that on a phone the
     table of contents sits right under the header instead of at the very end. */
  .art-layout { display: grid; gap: var(--s-10); }
.aora-articulo .art-head, .aora-articulo .art-side, .aora-articulo .prose { min-width: 0; }
@media (min-width: 1024px) {
  .aora-articulo .art-layout {
      grid-template-columns: minmax(0, 1fr) 300px;
      column-gap: var(--s-16); row-gap: var(--s-10); align-items: start;
    }
  .aora-articulo .art-head { grid-column: 1; grid-row: 1; }
  .aora-articulo .art-side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var(--s-6); }
  .aora-articulo .prose { grid-column: 1; grid-row: 2; }
}
.aora-articulo /* ---- Article header ---- */
  .art-head h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, var(--fs-4xl)); margin-top: var(--s-2); }
.aora-articulo .art-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
    margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--text-2);
  }
.aora-articulo .art-meta .sep { color: var(--c-border-strong); }
.aora-articulo .art-cover {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    margin-top: var(--s-8); border-radius: var(--r-md); border: 1px solid var(--rule);
  }
.aora-articulo /* ---- Side column ---- */
  .side-box {
    background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
    padding: var(--s-5);
  }
.aora-articulo .side-box + .side-box { margin-top: var(--s-6); }
.aora-articulo .side-h { font-size: var(--fs-sm); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep); font-family: var(--font-sans); font-weight: 700; }
.aora-articulo .toc { margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
.aora-articulo .toc a { color: var(--c-ink); padding-block: 2px; }
.aora-articulo .toc a:hover { color: var(--c-slate-deep); }
.aora-articulo .side-prods { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.aora-articulo .side-prod { display: flex; gap: var(--s-3); align-items: flex-start; }
.aora-articulo .side-prod img {
    width: 56px; height: 56px; flex: none; object-fit: contain; padding: 4px;
    background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-sm);
  }
.aora-articulo .side-prod-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aora-articulo .side-prod-txt a { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); line-height: 1.3; }
.aora-articulo .side-prod-txt .price { font-size: var(--fs-sm); }
.aora-articulo .side-prod-txt .badge { align-self: flex-start; margin-top: 2px; }
.aora-articulo /* ---- Prose ---- */
  .prose { max-width: 68ch; }
.aora-articulo .prose h2 { font-size: clamp(1.35rem, 1.05rem + 1.2vw, var(--fs-2xl)); margin-top: var(--s-12); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.aora-articulo .prose h2:first-child { margin-top: 0; }
.aora-articulo .prose p { margin-top: var(--s-4); line-height: 1.75; }
.aora-articulo .prose ol { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); counter-reset: step; }
.aora-articulo .prose ol li { position: relative; padding-left: 40px; line-height: 1.65; }
.aora-articulo .prose ol li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: 0;
    width: 28px; height: 28px; display: grid; place-items: center;
    background: var(--c-slate-tint); color: var(--c-slate-deep);
    border-radius: 50%; font-size: var(--fs-xs); font-weight: 700;
  }
.aora-articulo .prose .chip-row { margin-top: var(--s-5); }
.aora-articulo .prose-ing { margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--text-2); }
.aora-articulo .pull {
    margin: var(--s-10) 0 0; padding: var(--s-5) 0 var(--s-5) var(--s-6);
    border-left: 3px solid var(--c-gold);
    font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.4; color: var(--c-ink);
  }
.aora-articulo .callout {
    margin-top: var(--s-10); padding: var(--s-6);
    background: var(--c-slate-tint); border-radius: var(--r-md);
    display: flex; flex-direction: column; gap: var(--s-3);
  }
.aora-articulo .callout h3 { font-size: var(--fs-lg); }
.aora-articulo .fig { margin: var(--s-10) 0 0; max-width: 320px; }
.aora-articulo .fig img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--rule); }
.aora-articulo .fig figcaption { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); }
.aora-articulo /* ---- Autora y compartir ---- */
  .author {
    display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: flex-start;
    background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
    padding: var(--s-6);
  }
.aora-articulo .author-mark {
    width: 56px; height: 56px; flex: none; display: grid; place-items: center;
    background: var(--c-slate-tint); border-radius: 50%; color: var(--c-slate-deep);
  }
.aora-articulo .author-txt { flex: 1 1 260px; min-width: 0; }
.aora-articulo .share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.aora-articulo .share-row .label { margin-right: var(--s-2); }
@media (min-width: 1024px) {
  .aora-articulo /* Artículo sin columna lateral: con menos de dos h2 no hay índice y sin
       ingredientes con productos no hay caja de productos. single.php no pinta
       la columna y pone .art-solo para que no quede un hueco a la derecha. */
    .art-layout.art-solo { grid-template-columns: minmax(0, 1fr); }
}
.aora-articulo /* ---- Comentarios (comments.php del tema) ---- */
  .comments { max-width: 68ch; }
.aora-articulo .comment-list { display: flex; flex-direction: column; gap: var(--s-5); }
.aora-articulo .comment-list .comment-body {
    background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5);
    font-size: var(--fs-sm); overflow-wrap: anywhere;
  }
.aora-articulo .comment-list .children { margin-top: var(--s-4); padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.aora-articulo .comment-list .avatar { border-radius: 50%; float: left; margin-right: var(--s-3); }
.aora-articulo .comment-list .comment-meta { font-size: var(--fs-xs); color: var(--text-2); }
.aora-articulo .comment-list .comment-content { margin-top: var(--s-3); clear: both; }
.aora-articulo .comments .cform { display: flex; flex-direction: column; gap: var(--s-5); }
.aora-articulo .comments .cform-row { display: grid; gap: var(--s-5); }
@media (min-width: 560px) {
  .aora-articulo .comments .cform-row { grid-template-columns: 1fr 1fr; }
}
.aora-articulo .comments .req { color: var(--c-clay); }
.aora-articulo .comments .check a { color: var(--c-slate-deep); }
.aora-articulo .comments .form-submit { margin: 0; }
@media (max-width: 559px) {
  .aora-articulo .comments .form-submit .btn { width: 100%; }
}
.aora-articulo .comments .comment-reply-title small { margin-left: var(--s-3); font-size: var(--fs-sm); font-family: var(--font-sans); }

/* ===== 11-sobre.html (scope .aora-sobre) ===== */
.aora-sobre /* ---- Page-only styles: Sobre Aöra ----
     Only tokens from tokens.css. The hero idea (brand-blue gradient over the
     photo on desktop, .aora-sobre photo block + solid blue band on the phone) and the hero
     button rules are copied from home-v2.css and scoped to .shero so nothing
     leaks into the shared stylesheets. */

  /* ------------------------------------------------------------- hero */
  .shero { position: relative; background: var(--c-slate); color: var(--c-ink); overflow: hidden; }
.aora-sobre .shero-media { position: absolute; inset: 0; }
.aora-sobre .shero-media img { width: 100%; height: 100%; object-fit: cover; }
.aora-sobre /* v4 (2026-09-18): the copy is white, .aora-sobre so the scrim carries a deep slate
     layer on top of the brand blue. Measured on the render at 1366 px:
     white on the scrim = 10.55:1 at the left, .aora-sobre 6.46:1 at the right end of the
     longest line of the copy block. */
  .shero-media::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(28,39,51,.78) 0%, rgba(28,39,51,.62) 44%, rgba(28,39,51,.16) 72%, rgba(28,39,51,0) 100%),
      linear-gradient(90deg, rgba(123,142,170,.97) 0%, rgba(123,142,170,.90) 44%, rgba(123,142,170,.55) 68%, rgba(123,142,170,.18) 100%);
  }
.aora-sobre .shero-inner { position: relative; padding-block: var(--s-16); max-width: 640px; }
@media (max-width: 767px) {
  .aora-sobre /* phone: photo block on top, .aora-sobre copy on a solid deep-slate band below it
       (same band as the portada, .aora-sobre #232F3E; white copy = 13.6:1) */
    .shero { display: flex; flex-direction: column; background: #232F3E; }
  .aora-sobre .shero-media { position: relative; inset: auto; height: 100vw; max-height: 460px; }
  .aora-sobre /* 2026-10-02: top of hero-movil = the Aöra bag + products */
    .shero-media img { object-position: 50% 0; }
  .aora-sobre .shero-media::after { background: linear-gradient(180deg, rgba(35,47,62,0) 42%, rgba(35,47,62,.76) 76%, rgba(35,47,62,1) 100%); }
  .aora-sobre .shero-inner { padding-block: 0 var(--s-12); margin-top: -56px; }
}
@media (min-width: 900px) {
  .aora-sobre .shero-inner { padding-block: var(--s-24); }
}
.aora-sobre .shero h1 { color: var(--c-white); font-size: clamp(2.1rem, 1.1rem + 3.4vw, var(--fs-4xl)); }
.aora-sobre .shero .eyebrow { color: var(--c-white); }
.aora-sobre /* v4 (client 2026-09-18): the subheading font comes from base.css (.lead ->
     --font-sub / --fs-sub); this page only makes it white on the scrim.
     The old page-level font-size: var(--fs-lg) is gone on purpose. */
  .shero .lead { color: #FFFFFF; margin-top: var(--s-5); font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem); line-height: 1.55; }
.aora-sobre /* hero buttons (home-v2.css l.55-66, .aora-sobre scoped): gold primary + brand-blue fill
     with white wording, .aora-sobre both with the gold glow on hover */
  .shero-cta { display: flex; gap: var(--s-3); margin-top: var(--s-8); width: 100%; max-width: 560px; }
.aora-sobre .shero-cta .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--s-4); }
@media (max-width: 480px) {
  .aora-sobre .shero-cta { flex-wrap: wrap; }
  .aora-sobre .shero-cta .btn { flex-basis: 100%; }
}
.aora-sobre .shero .btn-primary { background: var(--c-gold); color: var(--c-ink); }
.aora-sobre .shero .btn-outline-light { background: var(--c-slate); color: var(--c-white); border-color: var(--c-slate); }
.aora-sobre .shero .btn-outline-light:hover { background: var(--c-slate-deep); color: var(--c-white); border-color: var(--c-slate-deep); }
.aora-sobre .shero .btn { transition: box-shadow .25s ease, transform .25s ease, background-color .2s ease; }
.aora-sobre .shero .btn:hover, .aora-sobre .shero .btn:focus-visible { box-shadow: 0 0 0 3px rgba(205,157,95,.28), 0 10px 28px rgba(205,157,95,.40); transform: translateY(-1px); }
.aora-sobre /* -------------------------------------------------------- historia */
  .historia { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 900px) {
  .aora-sobre .historia { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-16); }
}
.aora-sobre .historia p + p { margin-top: var(--s-5); }
.aora-sobre .historia-fig { margin: 0; }
.aora-sobre .historia-fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--rule); }
.aora-sobre .historia-fig figcaption { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-2); }
.aora-sobre /* -------------------------------------------------------- criterio */
  .crit { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.aora-sobre .crit .card { display: flex; flex-direction: column; gap: var(--s-3); }
.aora-sobre .crit h3 { font-size: var(--fs-lg); }
.aora-sobre .crit p { font-size: var(--fs-sm); color: var(--text-2); }
.aora-sobre .crit-icon {
    width: 44px; height: 44px; border-radius: var(--r-pill); flex: none;
    display: grid; place-items: center;
    background: var(--c-gold-tint); color: var(--c-gold-deep); border: 1px solid var(--c-sand-deep);
  }
.aora-sobre /* ----------------------------------------------------------- equipo */
  /* v4 (2026-09-18): real portraits, .aora-sobre 4:5 photo cards */
  .team { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); justify-content: center; }
@media (min-width: 640px) {
  .aora-sobre .team { grid-template-columns: repeat(2, minmax(0, 320px)); }
}
.aora-sobre .team .card { text-align: center; max-width: 320px; margin-inline: auto; width: 100%; }
.aora-sobre .team h3 { font-size: var(--fs-lg); }
.aora-sobre .team-role { font-size: var(--fs-2xs); letter-spacing: var(--tr-wide); text-transform: uppercase; font-weight: 600; color: var(--c-slate-deep); margin-top: var(--s-1); }
.aora-sobre .team-photo { display: block; margin: 0 0 var(--s-4); }
.aora-sobre .team-photo img {
    display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%;
    border-radius: var(--r-md); border: 1px solid var(--rule); background: var(--c-cream);
  }
.aora-sobre /* ----------------------------------------------------------- marcas */
  .brandstrip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 640px) {
  .aora-sobre .brandstrip { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 900px) {
  .aora-sobre .brandstrip { grid-template-columns: repeat(6, minmax(0,1fr)); }
}
.aora-sobre .brandstrip a { background: var(--c-white); display: grid; place-items: center; padding: var(--s-5) var(--s-4); min-height: 96px; }
.aora-sobre .brandstrip a:hover { background: var(--c-cream); }
.aora-sobre /* v4 (2026-09-18): normalised logo set, .aora-sobre all 600x240 with transparent padding */
  .brandstrip img { width: 100%; max-width: 136px; height: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.aora-sobre .brandstrip a:hover img { filter: none; opacity: 1; }
.aora-sobre /* ---------------------------------------------------------- pilares */
  .cifras { display: grid; gap: var(--s-8); grid-template-columns: repeat(1, minmax(0,1fr)); text-align: center; }
@media (min-width: 560px) {
  .aora-sobre .cifras { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 900px) {
  .aora-sobre .cifras { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.aora-sobre /* v4 (2026-09-18): the band is beige, .aora-sobre so the pillars read in ink + gold */
  .pilar-ic { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.70); border: 1px solid #CDB9A5; color: var(--c-gold-deep); }
.aora-sobre .pilar-t { margin-top: var(--s-4); font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.25; color: var(--c-ink); }
.aora-sobre .pilar-p { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--muted-on-beige); }
.aora-sobre /* ----------------------------------------------------------- visita */
  .visita { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) {
  .aora-sobre .visita { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
}
.aora-sobre .visita-fig { margin: 0; }
.aora-sobre .visita-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--rule); }
.aora-sobre .visita-fig figcaption { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-2); }
.aora-sobre .visita-data { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.aora-sobre .visita-data li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.aora-sobre .visita-data svg { flex: none; color: var(--c-gold-deep); margin-top: 2px; }
.aora-sobre .visita-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
@media (max-width: 767px) {
  .aora-sobre .shero .lead { font-size: 0.92rem; }
}

/* ===== 12-contacto.html (scope .aora-contacto) ===== */
.aora-contacto /* ---- Page-only styles: Contacto ----
     Only tokens from tokens.css. The Aora-blue/white secondary button (v4 2026-09-17) and the gold
     glow are copied from home-v2.css (hero buttons, .aora-contacto l.55-66) and scoped to
     this page's blocks so nothing leaks into the shared stylesheets. */

  /* --------------------------------------------------------- hero strip */
  .chero { padding-block: var(--s-12); }
@media (min-width: 900px) {
  .aora-contacto .chero { padding-block: var(--s-16); }
}
.aora-contacto .chero h1 { font-size: clamp(2rem, 1.2rem + 3vw, var(--fs-3xl)); }
.aora-contacto .chero .lead { max-width: 56ch; margin-top: var(--s-4); }
.aora-contacto /* ----------------------------------------------- form + contact cards */
  .contacto-cols { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 900px) {
  .aora-contacto .contacto-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-12); }
}
.aora-contacto .cform { display: flex; flex-direction: column; gap: var(--s-5); }
.aora-contacto .cform-row { display: grid; gap: var(--s-5); }
@media (min-width: 560px) {
  .aora-contacto .cform-row { grid-template-columns: 1fr 1fr; }
}
.aora-contacto .cform .btn-primary { background: var(--c-gold); color: var(--c-ink); align-self: flex-start; }
.aora-contacto .cform .btn-primary:hover, .aora-contacto .cform .btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(205,157,95,.28), 0 10px 28px rgba(205,157,95,.40); transform: translateY(-1px);
  }
.aora-contacto .cform .btn { transition: box-shadow .25s ease, transform .25s ease, background-color .2s ease; }
@media (max-width: 559px) {
  .aora-contacto .cform .btn-primary { align-self: stretch; width: 100%; }
}
.aora-contacto .req { color: var(--c-clay); }
.aora-contacto /* result box + field errors of the real form (theme: inc/contact.php) */
  .cform-notice {
    margin-top: var(--s-6); padding: var(--s-4) var(--s-5);
    background: var(--c-cream); border: 1px solid var(--rule); border-left: 3px solid var(--c-stock);
    border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.5; color: var(--c-ink);
    display: flex; flex-direction: column; gap: var(--s-2);
  }
.aora-contacto .cform-notice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.aora-contacto .cform-notice-title { font-weight: 600; font-size: var(--fs-base); }
.aora-contacto .cform-notice-error { border-left-color: var(--c-clay); background: var(--c-clay-tint); }
.aora-contacto .cform-notice ul { margin: 0; padding-left: var(--s-5); list-style: disc; display: flex; flex-direction: column; gap: var(--s-1); }
.aora-contacto .cform-notice a { color: var(--c-slate-deep); text-decoration: underline; }
.aora-contacto .field-error { font-size: var(--fs-xs); font-weight: 600; color: var(--c-clay); }
.aora-contacto .cform [aria-invalid="true"] { border-color: var(--c-clay); }
.aora-contacto .cform .check input[aria-invalid="true"] { outline: 2px solid var(--c-clay); outline-offset: 2px; }
.aora-contacto .aora-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aora-contacto /* the sticky header must not cover the box or a field reached by #anchor */
  .cform-notice, .aora-contacto .cform .input, .aora-contacto .cform .select, .aora-contacto .cform .textarea, .aora-contacto .cform .check { scroll-margin-top: 210px; }
.aora-contacto .ccards { display: flex; flex-direction: column; gap: var(--s-4); }
.aora-contacto .ccard { display: flex; gap: var(--s-4); align-items: flex-start; }
.aora-contacto .ccard-icon {
    width: 40px; height: 40px; border-radius: var(--r-pill); flex: none;
    display: grid; place-items: center;
    background: var(--c-gold-tint); color: var(--c-gold-deep); border: 1px solid var(--c-sand-deep);
  }
.aora-contacto .ccard h4 { font-size: var(--fs-base); font-weight: 600; }
.aora-contacto .ccard p, .aora-contacto .ccard address { font-size: var(--fs-sm); color: var(--text-2); font-style: normal; margin-top: var(--s-2); line-height: 1.5; }
.aora-contacto .ccard .btn { margin-top: var(--s-4); }
.aora-contacto .ccards .btn-outline-light { background: var(--c-slate); color: var(--c-white); border-color: var(--c-slate); transition: box-shadow .25s ease, transform .25s ease, background-color .2s ease; }
.aora-contacto .ccards .btn-outline-light:hover, .aora-contacto .ccards .btn-outline-light:focus-visible {
    background: var(--c-slate-hover); color: var(--c-white); border-color: var(--c-slate-hover);
    box-shadow: 0 0 0 3px rgba(205,157,95,.28), 0 10px 28px rgba(205,157,95,.40); transform: translateY(-1px);
  }
.aora-contacto .csocial { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.aora-contacto .csocial a {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: var(--tap); padding: var(--s-2) var(--s-4);
    border: 1px solid var(--rule); border-radius: var(--r-pill);
    font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink);
  }
.aora-contacto .csocial a:hover { background: var(--c-cream); text-decoration: none; border-color: var(--c-slate-deep); }
.aora-contacto /* -------------------------------------------------------- 3. atajos */
  .atajos-band { border-top: 1px solid var(--rule); }
.aora-contacto .atajos { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.aora-contacto .atajo { display: flex; flex-direction: column; gap: var(--s-3); }
.aora-contacto .atajo h3 { font-size: var(--fs-lg); }
.aora-contacto .atajo p { font-size: var(--fs-sm); color: var(--text-2); }
.aora-contacto .atajo .link-more { margin-top: auto; }
.aora-contacto a.atajo:hover { text-decoration: none; border-color: var(--c-slate-deep); }
.aora-contacto /* -------------------------------------------------------- 4. tienda */
  .tienda { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 900px) {
  .aora-contacto .tienda { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
}
.aora-contacto .tienda-fig { margin: 0; }
.aora-contacto .tienda-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--rule); }
.aora-contacto .tienda-fig figcaption { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-2); }
.aora-contacto .tienda-data { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.aora-contacto .tienda-data li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.aora-contacto .tienda-data svg { flex: none; color: var(--c-gold-deep); margin-top: 2px; }

/* ===== 13-faq.html (scope .aora-faq) ===== */
.aora-faq /* ---- Página de preguntas frecuentes ---- */

  /* Nota de la maqueta, .aora-faq arriba del todo */
  .page-note { margin-top: var(--s-6); }
.aora-faq /* ---- Cabecera con buscador ---- */
  .faq-search { margin-top: var(--s-8); max-width: 34rem; }
.aora-faq .faq-search-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.aora-faq .faq-search-row .input { flex: 1 1 15rem; min-width: 0; }
.aora-faq .faq-search-row .btn { flex: 0 0 auto; }
.aora-faq .faq-search .hint { margin-top: var(--s-2); }
.aora-faq /* El filtro funciona en el navegador (assets/js/faq.js del tema). Sin JS el
     formulario conserva el atributo hidden y no promete una búsqueda. */
  .faq-search[hidden] { display: none; }
.aora-faq .faq-search .hint:empty { display: none; }
.aora-faq .faq-search .hint a { color: var(--c-slate-deep); font-weight: 600; }
.aora-faq .faq-jump { margin-top: var(--s-8); }
.aora-faq .faq-jump p { margin-bottom: var(--s-3); }
.aora-faq /* ---- Grupos de preguntas ---- */
  .faq-group { max-width: 72ch; }
.aora-faq .faq-group .acc-group { border-top: 1px solid var(--rule); margin-top: var(--s-6); }
.aora-faq .faq-group .acc-body p + p { margin-top: var(--s-3); }
.aora-faq .faq-count { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s-2); }
.aora-faq /* Un ancla bajo la cabecera fija: el título del grupo no queda tapado */
  .faq-anchor { scroll-margin-top: 130px; }
.aora-faq /* Preguntas enlazadas desde otras respuestas (#cumpleanos y #cancelar-cita): la pregunta
     queda justo bajo la cabecera fija del tema (170 px en escritorio). */
  .acc[id] { scroll-margin-top: 190px; }
.aora-faq /* ---- Cierre: ¿no encuentras tu respuesta? ---- */
  .faq-cta { display: flex; flex-direction: column; gap: var(--s-5); max-width: 60ch; }
.aora-faq .faq-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.aora-faq .faq-cta-row .btn { flex: 0 1 auto; }
.aora-faq /* Botón secundario del hero de la portada, .aora-faq copiado aquí
     (equivalente a home-v2.css 55-66: relleno azul Aora, .aora-faq letras en blanco). */
  .btn-navy { background: var(--c-slate); color: var(--c-white); border-color: var(--c-slate); }
.aora-faq .btn-navy:hover { background: var(--c-slate-hover); color: var(--c-white); border-color: var(--c-slate-hover); }
.aora-faq /* Sobre la banda azul de marca, .aora-faq `.band-brand a` pinta el texto en tinta y
     un relleno azul Aora se perdería contra el fondo: aquí el botón usa el
     mismo azul un tono más profundo, .aora-faq con las letras en blanco. */
  .band-brand .btn-navy { background: var(--c-slate-deep); border-color: var(--c-slate-deep); color: var(--c-white); }
.aora-faq .band-brand .btn-navy:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.aora-faq .faq-cta .btn-primary, .aora-faq .faq-cta .btn-navy {
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), box-shadow .25s ease, transform .25s ease;
  }
.aora-faq .faq-cta .btn-primary:hover, .aora-faq .faq-cta .btn-primary:focus-visible, .aora-faq .faq-cta .btn-navy:hover, .aora-faq .faq-cta .btn-navy:focus-visible {
    box-shadow: 0 0 0 3px rgba(205,157,95,.28), 0 10px 28px rgba(205,157,95,.40);
    transform: translateY(-1px);
  }

/* ===== 14-legal.html (scope .aora-legal) ===== */
.aora-legal /* ---- Plantilla de las páginas legales ---- */

  /* Nota de la maqueta, .aora-legal arriba del todo */
  .page-note { margin-top: var(--s-6); }
.aora-legal /* ---- Rejilla: índice lateral + texto ---- */
  .legal-grid { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) {
  .aora-legal .legal-grid { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-12); align-items: start; }
  .aora-legal .legal-aside { position: sticky; top: 190px; }
}
.aora-legal .legal-idx-title {
    font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep);
  }
.aora-legal .legal-idx { margin-top: var(--s-4); border-top: 1px solid var(--rule); }
.aora-legal .legal-idx li { border-bottom: 1px solid var(--rule); }
.aora-legal .legal-idx a {
    display: block; min-height: var(--tap); padding: var(--s-3) 0;
    font-size: var(--fs-sm); color: var(--link); text-decoration: none;
  }
.aora-legal .legal-idx a:hover { color: var(--c-ink); text-decoration: underline; }
.aora-legal .legal-idx a[aria-current="page"] {
    color: var(--c-ink); font-weight: 600;
    padding-left: var(--s-3); border-left: 2px solid var(--c-gold);
  }
.aora-legal .legal-updated { margin-top: var(--s-5); font-size: var(--fs-xs); color: var(--text-2); }
.aora-legal /* ---- Texto legal ---- */
  .legal-main { min-width: 0; }
.aora-legal .legal-prose { max-width: 68ch; }
.aora-legal .legal-prose h2 { font-size: var(--fs-xl); margin-top: var(--s-10); scroll-margin-top: 190px; }
.aora-legal /* Enlaces a apartados (#cumpleanos y #skin-analyzer-reserva) que no queden bajo la cabecera fija
     del tema (170 px en escritorio y 143 px en el móvil). */
  .legal-prose [id] { scroll-margin-top: 190px; }
.aora-legal .legal-prose h2:first-of-type { margin-top: var(--s-8); }
.aora-legal .legal-prose p { margin-top: var(--s-4); color: var(--text-2); }
.aora-legal .legal-prose h1 + p { margin-top: var(--s-4); }
.aora-legal .legal-prose ul, .aora-legal .legal-prose ol { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.aora-legal .legal-prose ul li { position: relative; padding-left: var(--s-5); color: var(--text-2); font-size: var(--fs-base); }
.aora-legal .legal-prose ul li::before {
    content: ""; position: absolute; left: 0; top: 10px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold);
  }
.aora-legal /* La política de cookies es el texto de Complianz (#cmplz-document): su
     hoja pone list-style: disc con un id que gana a la regla de arriba y
     cada punto salía dos veces (disco + punto dorado). */
  .legal-prose ul, .aora-legal .legal-prose #cmplz-document ul { list-style: none; margin-left: 0; padding-left: 0; }
.aora-legal /* Pasos numerados de la devolución */
  .legal-steps { counter-reset: paso; }
.aora-legal .legal-steps li { position: relative; padding-left: 44px; color: var(--text-2); min-height: 30px; }
.aora-legal .legal-steps li::before {
    counter-increment: paso; content: counter(paso);
    position: absolute; left: 0; top: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--c-slate-tint); color: var(--c-slate-deep);
    font-size: var(--fs-xs); font-weight: 700;
  }
.aora-legal .legal-steps b { color: var(--c-ink); font-weight: 600; }
.aora-legal /* ---- Caja "Lo esencial" ---- */
  .legal-sum {
    margin-top: var(--s-6);
    background: var(--c-white); border: 1px solid var(--rule); border-left: 3px solid var(--c-gold);
    border-radius: var(--r-md); padding: var(--s-6);
  }
.aora-legal .legal-sum h2 { margin-top: 0; font-family: var(--font-sans); font-size: var(--fs-lg); letter-spacing: 0; }
.aora-legal .legal-sum-list { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 620px) {
  .aora-legal .legal-sum-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.aora-legal .legal-sum-list > div { display: flex; flex-direction: column; gap: 2px; }
.aora-legal .legal-sum-k { font-size: var(--fs-xs); color: var(--text-2); }
.aora-legal .legal-sum-v { font-size: var(--fs-base); font-weight: 600; color: var(--c-ink); }
.aora-legal /* ---- Tabla de zonas: se apila en el móvil, .aora-legal nunca desborda ---- */
  .legal-table-wrap { margin-top: var(--s-5); overflow-x: auto; }
.aora-legal .legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.aora-legal .legal-table th, .aora-legal .legal-table td {
    text-align: left; padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--rule); vertical-align: top;
  }
.aora-legal .legal-table thead th {
    font-size: var(--fs-xs); letter-spacing: var(--tr-wide); text-transform: uppercase;
    color: var(--c-slate-deep); background: var(--c-slate-tint); border-bottom: 1px solid var(--c-border-strong);
  }
.aora-legal .legal-table tbody th { font-weight: 600; color: var(--c-ink); }
.aora-legal .legal-table td { color: var(--text-2); }
@media (max-width: 599px) {
  .aora-legal .legal-table, .aora-legal .legal-table tbody, .aora-legal .legal-table tr, .aora-legal .legal-table th, .aora-legal .legal-table td { display: block; width: 100%; }
  .aora-legal .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .aora-legal .legal-table tr { border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--c-white); margin-top: var(--s-3); padding: var(--s-2) var(--s-3); }
  .aora-legal .legal-table tbody th { border-bottom: 1px solid var(--rule); padding-left: 0; padding-right: 0; }
  .aora-legal .legal-table td { border-bottom: 0; padding-left: 0; padding-right: 0; }
  .aora-legal .legal-table td::before { content: attr(data-l) ": "; color: var(--c-ink); font-weight: 600; }
}
.aora-legal /* ---- Línea de confianza bajo el texto ---- */
  .legal-trust { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--rule); max-width: 68ch; }
.aora-legal /* ---- Subtítulos, .aora-legal datos de la titular y caja del formulario ---- */
  .legal-prose h3 { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0; margin-top: var(--s-8); color: var(--c-ink); }
.aora-legal .legal-prose li b { color: var(--c-ink); font-weight: 600; }
.aora-legal .legal-box {
    margin-top: var(--s-5);
    background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-6);
  }
.aora-legal .legal-box h3 { margin-top: 0; }
.aora-legal .legal-company { font-style: normal; margin-top: var(--s-3); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; }

/* ===== 04-cuenta-y-busqueda.html (scope .aora-cuenta) ===== */
.aora-cuenta /* ---- Page-only styles: intro band, .aora-cuenta search results, .aora-cuenta account, .aora-cuenta 404 ---- */

  /* screen label so a reviewer can tell the three templates apart */
  .pantalla {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 28px; padding: 4px var(--s-3);
    background: var(--c-ink); color: var(--c-white);
    border-radius: var(--r-pill);
    font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 700;
    letter-spacing: var(--tr-wide); text-transform: uppercase;
    margin-bottom: var(--s-4);
  }
.aora-cuenta .pantalla svg { color: var(--c-gold); }
.aora-cuenta .intro { padding-block: var(--s-10); }
@media (min-width: 900px) {
  .aora-cuenta .intro { padding-block: var(--s-12); }
}
.aora-cuenta /* ---- search ---- */
  .searchbar { max-width: 640px; }
.aora-cuenta .search-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.aora-cuenta .search-row .input { flex: 1 1 220px; }
.aora-cuenta .search-row .btn { flex: 0 0 auto; }
.aora-cuenta .results-count { font-size: var(--fs-lg); margin-top: var(--s-6); }
.aora-cuenta .results-count strong { font-weight: 600; }
.aora-cuenta .suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.aora-cuenta .suggest-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.aora-cuenta .group-head {
    display: flex; flex-wrap: wrap; gap: var(--s-3);
    align-items: baseline; justify-content: space-between;
    margin-bottom: var(--s-4);
  }
.aora-cuenta /* brand result */
  .bres {
    display: flex; align-items: center; gap: var(--s-5);
    max-width: 560px; padding: var(--s-4);
    background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
  }
.aora-cuenta .bres-logo {
    flex: none; width: 104px; height: 64px;
    display: grid; place-items: center;
    background: var(--c-cream); border: 1px solid var(--rule); border-radius: var(--r-sm);
  }
.aora-cuenta .bres-logo img { width: 88px; max-width: 88px; height: auto; object-fit: contain; }
.aora-cuenta /* article results */
  .ares-list { border-top: 1px solid var(--rule); }
.aora-cuenta .ares { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.aora-cuenta .ares h4 a { color: var(--c-ink); }
.aora-cuenta .ares-meta { font-size: var(--fs-2xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep); font-weight: 600; }
.aora-cuenta /* bordered "this is an example" box */
  .example {
    background: var(--c-white);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r-md);
    padding: var(--s-5);
  }
@media (min-width: 900px) {
  .aora-cuenta .example { padding: var(--s-6); }
}
.aora-cuenta .example-label {
    font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 700;
    letter-spacing: var(--tr-wide); text-transform: uppercase;
    color: var(--c-slate-deep); margin-bottom: var(--s-4);
  }
.aora-cuenta .empty-state { max-width: 560px; }
.aora-cuenta /* ---- account ---- */
  .authgrid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .aora-cuenta .authgrid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.aora-cuenta .authform { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); }
.aora-cuenta .authrow { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between; }
.aora-cuenta .benefits { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-2); }
.aora-cuenta .benefits li { display: flex; align-items: flex-start; gap: var(--s-2); }
.aora-cuenta .benefits svg { color: var(--c-gold-deep); flex: none; margin-top: 3px; }
.aora-cuenta .acct { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .aora-cuenta .acct { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
}
.aora-cuenta .acct-nav { display: flex; flex-direction: column; gap: 2px; }
.aora-cuenta .acct-nav a {
    display: flex; align-items: center; gap: var(--s-3);
    min-height: var(--tap); padding: 0 var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink);
  }
.aora-cuenta .acct-nav a:hover { background: var(--c-cream); text-decoration: none; }
.aora-cuenta .acct-nav a[aria-current="page"] { background: var(--c-ink); color: var(--c-white); }
.aora-cuenta .acct-nav svg { flex: none; color: currentColor; }
.aora-cuenta .block-title { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; color: var(--c-ink); }
.aora-cuenta .greet { font-family: var(--font-display); font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--c-ink); }
.aora-cuenta /* `position: relative` is load-bearing: the table's <caption class="sr-only">
     is position:absolute, .aora-cuenta so without a positioned scroll container it is laid
     out against the page and pushes the document 96px wider than the phone
     (scrollWidth 486 on a 390px screen). Pre-existing since v1, .aora-cuenta fixed 2026-09-15. */
  .table-scroll { position: relative; overflow-x: auto; }
.aora-cuenta .otable { min-width: 540px; font-size: var(--fs-sm); }
.aora-cuenta .otable th, .aora-cuenta .otable td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: middle; }
.aora-cuenta .otable th {
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-wide);
    text-transform: uppercase; color: var(--c-slate-deep);
    border-bottom-color: var(--c-border-strong);
  }
.aora-cuenta .otable tbody th { border-bottom-color: var(--rule); }
.aora-cuenta .otable td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.aora-cuenta .otable a { min-height: 32px; display: inline-flex; align-items: center; }
.aora-cuenta .oactions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.aora-cuenta .otable .oactions .btn { white-space: nowrap; }
@media (max-width: 639px) {
  .aora-cuenta /* Phone: one block per order so nothing hides behind a sideways scroll */
    .otable.otable-stack { min-width: 0; width: 100%; }
  .aora-cuenta .otable-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .aora-cuenta .otable-stack tr {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4);
      align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule);
    }
  .aora-cuenta .otable-stack th, .aora-cuenta .otable-stack td { display: block; padding: 0; border: 0; }
  .aora-cuenta .otable-stack tbody th { font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; color: var(--c-ink); }
  .aora-cuenta .otable-stack .oc-order-number { grid-column: 1; grid-row: 1; font-weight: 700; }
  .aora-cuenta .otable-stack .oc-order-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .aora-cuenta .otable-stack .oc-order-date { grid-column: 1; grid-row: 2; color: var(--text-2); }
  .aora-cuenta .otable-stack .oc-order-total { grid-column: 2; grid-row: 2; justify-self: end; }
  .aora-cuenta .otable-stack td:not([class*="oc-order-"]), .aora-cuenta .otable-stack .oc-order-actions { grid-column: 1 / -1; }
}
.aora-cuenta /* Lost password + check your mail + new password: one card */
  .auth-single { max-width: 560px; }
@media (min-width: 900px) {
  .aora-cuenta .authgrid.auth-single { grid-template-columns: minmax(0, 1fr); }
}
.aora-cuenta .auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.aora-cuenta .auth-note {
    padding: var(--s-4) var(--s-5);
    background: var(--c-cream); border: 1px solid var(--rule);
    border-left: 3px solid var(--c-gold); border-radius: var(--r-sm);
    font-size: var(--fs-sm); color: var(--text-1);
  }
@media (max-width: 899px) {
  .aora-cuenta /* Phone: the account menu is one row of pills that scrolls sideways so the
       content starts right under it (9 stacked links pushed it below the fold) */
    .acct-nav {
      position: relative; flex-direction: row; gap: var(--s-2);
      overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
      margin-inline: -16px; padding: 2px 40px var(--s-1) 16px;
      -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
      mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    }
  .aora-cuenta .acct-nav::-webkit-scrollbar { display: none; }
  .aora-cuenta .acct-nav a {
      flex: none; white-space: nowrap; gap: var(--s-2); padding: 0 var(--s-4);
      background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-pill);
    }
  .aora-cuenta .acct-nav a[aria-current="page"] { border-color: var(--c-ink); }
  .aora-cuenta .acct-nav svg { width: 16px; height: 16px; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .aora-cuenta .acct-nav { margin-inline: calc(-1 * var(--gutter)); padding-left: var(--gutter); }
}
.aora-cuenta /* ---- 404 ---- */
  .err { text-align: center; }
.aora-cuenta .err-num {
    font-family: var(--font-display); font-size: clamp(4.5rem, 2rem + 13vw, 8rem);
    line-height: 1; letter-spacing: var(--tr-tight); color: var(--c-gold);
  }
.aora-cuenta .err p { margin-inline: auto; }
.aora-cuenta .err .searchbar { margin-inline: auto; text-align: left; }
.aora-cuenta .err .chip-row { justify-content: center; }
.aora-cuenta .helpline { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: center; font-size: var(--fs-sm); }
.aora-cuenta .helpline a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); color: var(--c-ink); font-weight: 600; }
.aora-cuenta .helpline svg { color: var(--c-gold-deep); flex: none; }

/* ===== 16-ingredientes.html (scope .aora-ingredientes) ===== */
.aora-ingredientes /* ---- Page-only styles: Ingredientes de la A a la Z ---- */

  /* Stats line under the title */
  .az-stats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); color: var(--text-2); }
.aora-ingredientes .az-stats b { color: var(--c-ink); font-weight: 600; }
.aora-ingredientes /* Sticky letter bar. It sits right under the sticky header, .aora-ingredientes so `top` equals
     the header height at each breakpoint (phone: logo row + search row;
     900-1099: logo row only; >= 1100: logo row + menu row). On phones the
     list scrolls sideways inside itself; the page never does. */
  .az-bar {
    position: sticky; top: 143px; z-index: 40;
    background: var(--c-white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  }
@media (min-width: 900px) {
  .aora-ingredientes .az-bar { top: 109px; }
}
@media (min-width: 1100px) {
  .aora-ingredientes .az-bar { top: 170px; }
}
.aora-ingredientes .az-bar ul {
    display: flex; gap: var(--s-1); padding-block: var(--s-2);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
.aora-ingredientes .az-bar ul::-webkit-scrollbar { display: none; }
.aora-ingredientes .az-bar li { flex: none; }
.aora-ingredientes .az-bar a {
    display: grid; place-items: center; min-width: var(--tap); height: var(--tap); padding-inline: var(--s-2);
    border-radius: var(--r-sm); font-family: var(--font-display); font-size: var(--fs-lg); color: var(--c-ink);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
.aora-ingredientes .az-bar a:hover, .aora-ingredientes .az-bar a:focus-visible { background: var(--c-cream); color: var(--c-slate-deep); text-decoration: none; }
.aora-ingredientes /* One group per letter: big serif letter + card grid */
  .az-group { padding-block: var(--s-8); border-top: 1px solid var(--rule); scroll-margin-top: 203px; }
.aora-ingredientes .az-group:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
  .aora-ingredientes .az-group { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-6); scroll-margin-top: 169px; }
}
@media (min-width: 1100px) {
  .aora-ingredientes .az-group { scroll-margin-top: 230px; }
}
.aora-ingredientes .az-letter {
    font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1;
    color: var(--c-slate-deep); margin-bottom: var(--s-4);
  }
@media (min-width: 900px) {
  .aora-ingredientes .az-letter { margin-bottom: 0; }
}
.aora-ingredientes .az-grid { display: grid; gap: var(--s-4); }
@media (min-width: 640px) {
  .aora-ingredientes .az-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .aora-ingredientes .az-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.aora-ingredientes .az-item { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.aora-ingredientes .az-item h3 { font-size: var(--fs-lg); }
.aora-ingredientes .az-item h3 a { color: var(--c-ink); }
.aora-ingredientes .az-item h3 a:hover { color: var(--c-slate-deep); }
.aora-ingredientes .az-count {
    margin-top: auto; padding-top: var(--s-2);
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep);
  }
.aora-ingredientes .az-item.is-soon { background: var(--c-cream); }
.aora-ingredientes .az-item.is-soon .az-count { color: var(--c-gold-deep); }
.aora-ingredientes /* Closing band buttons */
  .az-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }