/* ======================================================================
   Refinado suave (2026-11-05, segunda pasada): esquinas redondeadas, líneas casi invisibles,
   superficies tonales en lugar de filetes duros y componentes interactivos.
   Paleta neutra: piedra, tinta, azul de marca en bloques oscuros y dorado de acento.
   Todo en la última capa para ganar sin guerras de especificidad. Se carga la última.
   ====================================================================== */
@layer utilities {
  /* ---------- base de componentes de contenido (los afinan las reglas suaves de más abajo) ---------- */
  .how__in { display: grid; gap: var(--s-7); }
  @media (min-width: 1024px) { .how__in { grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: start; } }
  .how__steps, .how__cmp { min-width: 0; }
  .steps { list-style: none; padding: 0; margin: 0; counter-reset: paso; display: grid; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .steps li { counter-increment: paso; display: block; }
  .steps li::before { content: "Paso " counter(paso); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); font-variant-numeric: tabular-nums; line-height: 1.2; }
  .steps h3 { font-size: 1.375rem; margin-bottom: var(--s-1); }
  .steps p { font-size: var(--text-sm); color: var(--muted-foreground); }
  .cmp-wrap { overflow-x: auto; }
  .cmp { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
  .cmp th, .cmp td { text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-top: 1px solid var(--border); vertical-align: top; }
  .cmp thead th { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; letter-spacing: -0.02em; border-top: 0; padding-bottom: var(--s-3); }
  .cmp tbody th { font-weight: 500; color: var(--muted-foreground); width: 26%; }
  .cmp td { font-variant-numeric: tabular-nums lining-nums; }
  .cmp td.big { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.1; }
  .cmp-note { margin-top: var(--s-3); font-size: var(--text-xs); color: var(--muted-foreground); }
  .faq h2 { margin-bottom: var(--s-4); }
  .acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-block: var(--s-3); cursor: pointer; font-weight: 500; transition: color var(--dur-fast); }
  .acc summary::-webkit-details-marker { display: none; }
  .acc summary:hover { color: var(--muted-foreground); }
  .acc details p { color: var(--muted-foreground); font-size: var(--text-sm); padding-bottom: var(--s-4); max-width: 60ch; }
  .acc details a { color: var(--foreground); text-underline-offset: 3px; }
  .pyr__k { font-size: var(--text-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
  .notes dt { font-size: var(--text-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); padding-top: 2px; }
  .pdp__rel h3 { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--muted-foreground); margin-bottom: var(--s-4); }
  .rel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, 1fr); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--s-2); }
  .rel__i { display: grid; gap: 2px; text-align: left; scroll-snap-align: start; align-content: start; }
  .rel__img { background: var(--muted); aspect-ratio: 1 / 1; display: grid; place-items: center; margin-bottom: var(--s-2); }
  .rel__img svg { width: 52%; height: auto; }
  .rel__n { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.15; letter-spacing: -0.01em; }
  .rel__p { font-size: var(--text-sm); color: var(--muted-foreground); }
}

@layer utilities {
  ::selection { background: var(--navy); color: var(--on-navy); }
  .grain::after, .quiz::before { display: none; }
  .kbd { font: 500 11px/1 var(--font-body); letter-spacing: .04em; padding: 5px 7px; border-radius: var(--radius-full); background: var(--muted); color: var(--muted-foreground); }

  /* ---------- cabecera y pie ---------- */
  .demo-bar { background: var(--navy); color: var(--on-navy); font-weight: 400; }
  .demo-bar a { color: var(--on-navy); }
  .site-header { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--border); }
  .tabs { border-top-color: var(--border); }
  .header-search { display: none; align-items: center; gap: var(--s-3); height: 46px; padding: 0 var(--s-3) 0 var(--s-4); border: 0; border-radius: var(--radius-full); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--muted-foreground); text-align: left; font-size: var(--text-sm); transition: box-shadow var(--dur-fast), background var(--dur-fast); }
  .header-search:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--border-strong); }
  .header-search .i { position: static; }
  .header-search span { flex: 1; }
  @media (min-width: 768px) { .header-search { display: flex; flex: 1; max-width: 560px; margin-inline: auto; } }
  .icon-btn { border-radius: var(--radius-full); }
  .site-footer { border-top: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .news { display: grid; gap: var(--s-3); max-width: 420px; margin-top: var(--s-5); }
  .news p { color: var(--on-navy-muted); font-size: var(--text-sm); }
  .news__row { display: flex; gap: var(--s-2); }
  .news .input { background: rgb(241 239 233 / .08); color: var(--on-navy); border-color: rgb(241 239 233 / .3); border-radius: var(--radius-full); min-width: 0; padding-inline: var(--s-4); }
  .news .input::placeholder { color: var(--on-navy-muted); }
  .news .check { color: var(--on-navy-muted); }
  .news .check a { color: var(--on-navy); }
  .news .error-msg { color: #f2b8b0; }

  /* ---------- botones, chips y campos ---------- */
  .btn { border-radius: var(--radius-full); min-height: 48px; padding: 0 var(--s-5); gap: var(--s-3); letter-spacing: .02em; --btn-sweep: var(--card); }
  .btn:has(.bub) { padding-right: var(--s-5); }
  .btn--sm { min-height: 42px; padding: 0 var(--s-4); }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--foreground); --btn-sweep: var(--muted); border-color: var(--border-strong); }
  .btn--ghost:hover { border-color: var(--foreground); }
  .btn--on-dark { --btn-bg: var(--on-navy); --btn-fg: var(--navy); --btn-sweep: var(--gold); border-color: var(--on-navy); }
  .btn--on-dark:hover { border-color: var(--gold); }
  .btn--ghost-dark { --btn-sweep: var(--on-navy); border-color: rgb(241 239 233 / .5); }
  .chip span { border: 0; border-radius: var(--radius-full); background: var(--muted); min-height: 38px; padding: 0 var(--s-4); font-size: var(--text-sm); transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-instant); }
  .chip:hover span { background: #dcd9d0; }
  .chip input:checked + span { background: var(--navy); color: var(--on-navy); }
  .input, .select, .textarea { border-radius: var(--radius-sm); }
  .search-big .input { border-radius: var(--radius-full); padding-left: 48px; }
  .search-big .i { top: 15px; left: 18px; }
  .select { border-radius: var(--radius-full); padding-inline: var(--s-4); }
  .box, .calc, .panel, .kpi, .table-wrap { border-radius: var(--radius-md); }
  .tag { border-radius: var(--radius-full); }
  dialog { border-radius: var(--radius-md); }
  .dlg-wide { width: min(100vw - 24px, 980px); }
  .dlg-drawer { border-radius: var(--radius-md) 0 0 var(--radius-md); }
  .cookie { border-radius: var(--radius-md); }
  .toast { border-radius: var(--radius-sm); }

  /* ---------- tarjeta de producto ---------- */
  .pc__img { background: var(--muted); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
  .pc:hover .pc__img { transform: translateY(-4px); box-shadow: 0 20px 36px -22px rgb(8 31 44 / .35); }
  .pc__open img, .pc__open .foto { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: var(--s-5); transition: transform var(--dur-page) var(--ease-out); }
  .pc:hover .pc__open .foto { transform: scale(1.05); }
  .pc__fav { background: rgb(255 255 255 / .85); width: 40px; height: 40px; top: var(--s-3); right: var(--s-3); border-radius: 50%; }
  .pc__fav:hover { background: #fff; transform: scale(1.08); }
  .pcard__tag { background: var(--navy); color: var(--on-navy); border-radius: var(--radius-full); font-weight: 500; font-size: 11px; letter-spacing: .08em; padding: 5px 10px; left: var(--s-3); top: var(--s-3); }
  .pcard__tag--offer { background: #fff; color: var(--navy); }
  .pc__name { font-size: 1.25rem; }
  .pc-tile { border-radius: var(--radius-md); }
  .pc-tile::after { background: rgb(8 31 44 / .3); }

  /* selector de formato con indicador que se desliza */
  .pc__fmt { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); background: var(--muted); border: 0; border-radius: var(--radius-full); padding: 3px; }
  .pc__fmt::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2)); border-radius: var(--radius-full); background: var(--navy); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform var(--dur-slow) var(--ease-in-out); }
  .pc__fmt label { position: relative; z-index: 1; }
  .pc__fmt span { border: 0; border-radius: var(--radius-full); min-height: 36px; line-height: 36px; padding: 0 var(--s-3); text-align: center; background: none; transition: color var(--dur-base); }
  .pc__fmt label + label span { border-left: 0; }
  .pc__fmt input:checked + span { background: none; color: var(--on-navy); }
  .pc__add { min-height: 42px; }

  /* ---------- portada: ventana redondeada que se abre ---------- */
  .sx__bg::after { background: rgb(8 31 44 / .6); }
  .sx__media { box-shadow: none; clip-path: inset(calc(50% - var(--h) / 2) calc(50% - var(--w) / 2) round 28px); }
  .sx__shade { display: none; }
  .sx__end { background: rgb(8 31 44 / .82); padding: var(--s-5); border-left: 0; border-radius: var(--radius-md); max-width: 500px; }
  .sx__end p { font-size: 1.0625rem; }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .sx__media { animation-name: sx-open-s; }
      @keyframes sx-open-s { from { clip-path: inset(calc(50% - var(--h) / 2) calc(50% - var(--w) / 2) round 28px); } to { clip-path: inset(0 round 0); } }
    }
  }

  /* ---------- catálogo: sin filetes duros ---------- */
  .cat__head { border-top: 0; padding-top: 0; }
  .cat__filters { border-block: 0; padding-block: var(--s-2); }
  .grp legend { font-weight: 500; }

  /* ---------- firma olfativa: componente interactivo ---------- */
  .qzs { padding-block: var(--s-6) var(--s-4); }
  .qzs__in, .qzp__in { display: grid; gap: var(--s-6); background: var(--navy); color: var(--on-navy); border-radius: var(--radius-lg); padding: var(--s-6); }
  @media (min-width: 1024px) { .qzs__in { grid-template-columns: 4fr 7fr; gap: var(--s-8); padding: var(--s-8) var(--s-7); align-items: center; } }
  .qzs__intro h2, .qzp__intro h1 { font-size: var(--text-3xl); line-height: 1; margin-bottom: var(--s-4); }
  .qzs__intro p, .qzp__intro p { color: var(--on-navy-muted); max-width: 40ch; }
  .qzp { padding-block: var(--s-6) var(--s-8); }
  @media (min-width: 1024px) { .qzp__in { grid-template-columns: 4fr 7fr; gap: var(--s-8); padding: var(--s-8) var(--s-7); align-items: start; min-height: 70dvh; } }
  .qz { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
  .qz__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .qz__steps { display: flex; gap: 6px; flex: 1; max-width: 220px; }
  .qz__s { height: 6px; flex: 1; border-radius: 6px; background: rgb(241 239 233 / .18); position: relative; overflow: hidden; }
  .qz__s::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
  .qz__s.is-done::after, .qz__s.is-on::after { transform: scaleX(1); }
  .qz__s.is-on::after { transform: scaleX(.45); }
  .qz__reset { color: var(--on-navy-muted); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; min-height: 36px; padding-inline: var(--s-2); transition: color var(--dur-fast); }
  .qz__reset:hover { color: var(--on-navy); }
  .qz__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .qz__chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-3) 0 var(--s-4); border-radius: var(--radius-full); background: rgb(241 239 233 / .1); color: var(--on-navy); font-size: var(--text-sm); transition: background var(--dur-fast), transform var(--dur-instant); }
  .qz__chip:hover { background: rgb(241 239 233 / .2); }
  .qz__chip:active { transform: scale(.97); }
  .qz__chip .i { opacity: .7; }
  .qz__step, .qz__res { display: grid; gap: var(--s-4); animation: qz-in var(--dur-slow) var(--ease-out) both; }
  @keyframes qz-in { from { opacity: 0; transform: translateY(14px); } }
  .qz__q { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; }
  .qz__grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .qz__opt { position: relative; display: grid; gap: var(--s-2); align-content: start; text-align: left; padding: var(--s-4); border-radius: var(--radius-md); background: rgb(241 239 233 / .07); box-shadow: inset 0 0 0 1px rgb(241 239 233 / .12); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base), box-shadow var(--dur-base), color var(--dur-base); }
  .qz__opt:hover { transform: translateY(-4px); background: rgb(241 239 233 / .13); box-shadow: inset 0 0 0 1px rgb(199 178 115 / .7); }
  .qz__opt:active { transform: translateY(-1px) scale(.985); transition-duration: var(--dur-instant); }
  .qz__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgb(199 178 115 / .18); color: var(--gold); transition: transform var(--dur-slow) var(--ease-spring), background var(--dur-base), color var(--dur-base); }
  .qz__ico .i { width: 24px; height: 24px; }
  .qz__opt:hover .qz__ico { transform: rotate(-8deg) scale(1.1); }
  .qz__t { font-weight: 500; font-size: 1.0625rem; }
  .qz__d { font-size: var(--text-sm); color: var(--on-navy-muted); transition: color var(--dur-base); }
  .qz__opt.is-sel { background: var(--gold); color: var(--navy); box-shadow: none; }
  .qz__opt.is-sel .qz__ico { background: var(--navy); color: var(--gold); transform: scale(1.1); }
  .qz__opt.is-sel .qz__d { color: var(--navy); }
  .qz__sum { color: var(--on-navy-muted); }
  .qz__gen { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .qz__g { position: relative; }
  .qz__g input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .qz__g span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--s-4); border-radius: var(--radius-full); background: rgb(241 239 233 / .1); font-size: var(--text-sm); transition: background var(--dur-fast), color var(--dur-fast); }
  .qz__g:hover span { background: rgb(241 239 233 / .2); }
  .qz__g input:checked + span { background: var(--on-navy); color: var(--navy); }
  .qz__g input:focus-visible + span { outline: 2px solid var(--ring-on-dark); outline-offset: 2px; }
  .qz__list { display: grid; gap: var(--s-3); }
  .rc { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3); border-radius: var(--radius-md); background: rgb(241 239 233 / .07); animation: qz-in var(--dur-page) var(--ease-out) both; transition: background var(--dur-fast); }
  .rc:nth-child(2) { animation-delay: 90ms; }
  .rc:nth-child(3) { animation-delay: 180ms; }
  .rc:hover { background: rgb(241 239 233 / .11); }
  .rc__img { background: var(--on-navy); border-radius: var(--radius-sm); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
  .rc__img svg { width: 62%; height: auto; }
  .rc__img .foto { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 6px; }
  .rc__body { display: grid; gap: var(--s-2); align-content: center; min-width: 0; }
  .rc__top { display: flex; justify-content: space-between; align-items: start; gap: var(--s-3); }
  .rc__n { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.1; display: block; }
  .rc__top small { color: var(--on-navy-muted); }
  .rc__why { color: var(--gold); font-size: var(--text-sm); }
  .rc__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
  .rc__act .link-arrow { color: var(--on-navy); }
  .qring { position: relative; width: 52px; height: 52px; flex: none; }
  .qring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .qring circle { fill: none; stroke-width: 3; }
  .qring .bg { stroke: rgb(241 239 233 / .18); }
  .qring .fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--off, 1); transition: stroke-dashoffset 900ms var(--ease-out); }
  .qring__n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .qz__more { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

  /* ---------- cómo comprar y decant o frasco: superficies suaves ---------- */
  .how { background: none; padding-block: var(--s-7); }
  .how__steps, .how__cmp { border-top: 0; padding-top: 0; }
  .how h2 { margin-bottom: var(--s-4); }
  .steps { gap: var(--s-3); }
  .steps li { background: var(--card); border: 0; border-radius: var(--radius-md); padding: var(--s-5); box-shadow: 0 0 0 1px var(--border); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
  .steps li:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--border), 0 18px 30px -22px rgb(8 31 44 / .35); }
  .steps li::before { display: inline-flex; padding: 4px 10px; border-radius: var(--radius-full); background: var(--muted); letter-spacing: .1em; margin-bottom: var(--s-3); }
  .steps p { max-width: none; }
  .cmp-wrap { background: var(--card); border-radius: var(--radius-md); padding: var(--s-4) var(--s-5); box-shadow: 0 0 0 1px var(--border); }
  .cmp th, .cmp td { border-top-color: var(--border); }
  .faq__in > h2 { border-top: 0; padding-top: 0; }
  .acc { display: grid; gap: var(--s-2); }
  .acc details, .acc details:first-child { border: 0; background: var(--card); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--border); padding-inline: var(--s-5); transition: background var(--dur-base), box-shadow var(--dur-base); }
  .acc details[open] { background: #fff; box-shadow: 0 0 0 1px var(--border-strong); }
  .acc summary { min-height: 58px; }
  .acc summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--muted) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='%2314181b' stroke-width='1.5' stroke-linecap='round'><path d='M8 14h12M14 8v12'/></svg>") center / 28px no-repeat; flex: none; }
  .acc details[open] summary::after { transform: rotate(45deg); }

  /* ---------- ficha: pestañas con indicador, pirámide en barras y zoom ---------- */
  .pdp { padding: var(--s-2); gap: var(--s-2); }
  .pdp__img { background: var(--muted); border-radius: var(--radius-md); align-self: stretch; position: relative; display: grid; place-items: center; min-height: 380px; padding: var(--s-5); overflow: hidden; }
  .pdp__img .foto { width: 100%; height: 100%; max-height: 520px; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--dur-slow) var(--ease-out); }
  .pdp__img.zoomable { cursor: zoom-in; }
  .pdp__img.zoom .foto { transform: scale(1.9); }
  #pdp-frasco { display: block; width: min(64%, 320px); }
  #pdp-frasco svg { width: 100%; }
  #pdp-frasco .foto { width: 100%; }
  .pdp__info { padding: var(--s-5) var(--s-5) var(--s-4); gap: var(--s-5); }
  .fmt label { border-radius: var(--radius-sm); }
  .fmt label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--navy); border-color: transparent; background: #fff; }
  .tb__list { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); background: var(--muted); border-radius: var(--radius-full); padding: 4px; }
  .tb__list::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 3)); border-radius: var(--radius-full); background: var(--navy); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform var(--dur-slow) var(--ease-in-out); }
  .tb__t { position: relative; z-index: 1; min-height: 42px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; color: var(--foreground); transition: color var(--dur-base); }
  .tb__t[aria-selected="true"] { color: var(--on-navy); }
  .tb__p { padding-top: var(--s-4); animation: qz-in var(--dur-base) var(--ease-out) both; }
  .tb__p[hidden] { display: none; }
  .pyr { display: grid; gap: var(--s-2); }
  .pyr__row { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--navy) 7%, transparent); width: var(--w, 100%); font-size: var(--text-sm); }
  .pyr__row::before { display: none; }
  .notes { border-top: 0; display: grid; gap: var(--s-2); }
  .notes div { border: 0; background: var(--muted); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4); }
  .meter i { border-radius: 4px; }
  .pdp__rel { border-top: 0; padding: var(--s-4) var(--s-5) var(--s-5); }
  .rel__img { border-radius: var(--radius-sm); overflow: hidden; transition: transform var(--dur-base) var(--ease-out); }
  .rel__img .foto { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 6px; }
  .rel__i:hover .rel__img { box-shadow: none; transform: translateY(-3px); }

  /* miniaturas con foto en cesta, resumen y paleta */
  .thumb .foto, .thumb-s .foto, .pal__th .foto { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 4px; }
  .thumb, .thumb-s, .pal__th { border-radius: var(--radius-sm); overflow: hidden; }

  /* ---------- paleta de búsqueda ---------- */
  dialog.pal { margin: 10vh auto auto; width: min(100vw - 24px, 640px); max-height: 78dvh; padding: 0; overflow: hidden; border-radius: var(--radius-md); }
  dialog.pal[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .pal__in { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-3) 0 var(--s-5); border-bottom: 1px solid var(--border); min-height: 64px; color: var(--muted-foreground); }
  .pal__in input { flex: 1; min-width: 0; border: 0; background: none; font-size: 1.0625rem; color: var(--foreground); min-height: 56px; }
  .pal__in input:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-full); }
  #pal-list { list-style: none; margin: 0; padding: var(--s-2); overflow: auto; }
  #pal-list li[role="option"] { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); cursor: pointer; border-radius: var(--radius-sm); }
  #pal-list li[aria-selected="true"] { background: var(--muted); }
  .pal__th { background: var(--muted); aspect-ratio: 1; display: grid; place-items: center; }
  #pal-list li[aria-selected="true"] .pal__th { background: var(--background); }
  .pal__th svg { width: 62%; }
  .pal__t { display: grid; min-width: 0; }
  .pal__t b { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.15; }
  .pal__t small { color: var(--muted-foreground); font-size: var(--text-sm); }
  .pal__p { font-size: var(--text-sm); font-weight: 500; }
  .pal__empty { padding: var(--s-5) var(--s-3); color: var(--muted-foreground); }
  .pal__foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pc__img, .pc__fmt::before, .tb__list::before, .qz__opt, .qz__ico, .steps li, .rel__img { transition-duration: 1ms; }
  .qz__step, .qz__res, .rc, .tb__p { animation: none; }
}

/* ---------- color en «Cómo comprar» y «Decant o frasco» ---------- */
@layer utilities {
  .steps li { background: #fff; }
  .steps li::before { background: var(--navy); color: var(--gold); }
  .how__cmp .cmp-wrap { background: var(--navy); color: var(--on-navy); box-shadow: none; padding: var(--s-5); }
  .how__cmp .cmp th, .how__cmp .cmp td { border-top-color: rgb(241 239 233 / .14); }
  .how__cmp .cmp thead th { color: var(--on-navy); }
  .how__cmp .cmp tbody th { color: var(--on-navy-muted); }
  .how__cmp .cmp td.big { color: var(--gold); }
  .how__cmp .cmp tbody tr:last-child td { color: var(--on-navy-muted); }

  /* ---------- firma final: nombre que se dibuja, se rellena con el puntero y fondo de malla ---------- */
  .fw { position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center; min-height: clamp(320px, 42vw, 560px); margin-top: var(--s-6); padding: var(--s-7) var(--s-5) var(--s-8); border-radius: var(--radius-lg); background: #06182a; --mx: 50%; --my: 55%; }
  /* galería "morph" (js/morph.js): lienzo WebGL con respaldo de imágenes con fundido */
  .fw__gal { position: absolute; inset: 0; z-index: -2; outline-offset: -4px; }
  .fw__gal canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 500ms var(--ease-out); }
  .fw__gal.is-ready canvas { opacity: 1; }
  .fw__gal img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity 800ms var(--ease-out); }
  .fw__gal.is-fallback canvas { display: none; }
  .fw__gal.is-fallback img { display: block; }
  /* velo liso para que el trazo dorado se lea sobre cualquier foto (sin degradado) */
  .fw__veil { position: absolute; inset: 0; z-index: -1; background: rgb(6 24 42 / .46); pointer-events: none; }
  .fw__mark { position: relative; width: min(94%, 1100px); line-height: 0; }
  .fw__line svg, .fw__fill svg { width: 100%; height: auto; display: block; overflow: visible; }
  .fw__line svg { fill: rgb(199 178 115 / .07); stroke: var(--gold); stroke-width: .5; stroke-linejoin: round; transition: fill var(--dur-page) var(--ease-out); }
  .fw__fill { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); -webkit-mask-image: radial-gradient(230px circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0) 100%); mask-image: radial-gradient(230px circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0) 100%); }
  .fw__fill svg { fill: var(--gold); stroke: none; }
  .fw.is-hover .fw__fill { opacity: 1; }
  .fw__lema { position: absolute; left: 0; right: 0; bottom: var(--s-5); text-align: center; font-size: var(--text-xs); letter-spacing: .32em; text-transform: uppercase; color: var(--on-navy); }
  @media (prefers-reduced-motion: no-preference) {
    .fw:not(.is-in) .fw__line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
    .fw:not(.is-in) .fw__line svg { fill: transparent; }
    .fw.is-in .fw__line path { stroke-dasharray: 1; animation: fw-draw 2.8s var(--ease-out) both; }
    @keyframes fw-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  }

  /* ---------- volver arriba con anillo de avance ---------- */
  .btn-top { position: fixed; right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); z-index: 70; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--on-navy); box-shadow: var(--shadow); visibility: hidden; opacity: 0; transform: translateY(14px) scale(.9); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
  .btn-top.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .btn-top:hover { background: #0d2c3e; }
  .btn-top:active { transform: scale(.94); }
  .btn-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .btn-top__ring circle { fill: none; stroke-width: 2; }
  .btn-top__ring .bg { stroke: rgb(241 239 233 / .2); }
  .btn-top__ring .fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
  .btn-top .i { transition: transform var(--dur-base) var(--ease-out); }
  .btn-top:hover .i { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .btn-top, .fw__fill { transition-duration: 1ms; } }

/* ---------- ficha de producto: scroll propio, sin chocar con la página ---------- */
/* sin capa: styles.css deja sin capa las reglas de ficha y cesta (llave de más en la línea ~440), así que solo gana lo que tampoco tiene capa */
  /* con un diálogo abierto la página no se desplaza ni "rebota" detrás */
  html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
  dialog { overscroll-behavior: contain; }
  #cesta-cuerpo, #pal-list, .rel, .cookie, .dlg-wide { overscroll-behavior: contain; }

  #dlg-producto[open] { display: flex; flex-direction: column; width: min(100vw - 24px, 1040px); height: min(92dvh, 860px); overflow: hidden; }
  #dlg-producto .pdp { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-2); overflow-y: auto; overscroll-behavior: contain; }
  #dlg-producto .pdp__img { min-height: 300px; height: 300px; }
  #dlg-producto .pdp__info { overflow: visible; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 768px) {
    #dlg-producto .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
    #dlg-producto .pdp__img { height: 100%; min-height: 0; }
    #dlg-producto .pdp__info { overflow-y: auto; overscroll-behavior: contain; height: 100%; min-height: 0; scrollbar-width: thin; scrollbar-gutter: stable; padding-right: var(--s-4); }
  }
  .pdp__x { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 6; background: rgb(255 255 255 / .92); box-shadow: 0 0 0 1px var(--border), 0 6px 16px -8px rgb(8 31 44 / .4); }
  .pdp__x:hover { background: #fff; transform: rotate(90deg); }
  .pdp__x { transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast); }
  .pdp__info > .pcard__brand { padding-right: var(--s-8); }
  .pdp__rel { padding: var(--s-4) 0 var(--s-2); margin-top: var(--s-2); }

  /* entrada escalonada: primero la imagen, luego cada bloque de información */
  @media (prefers-reduced-motion: no-preference) {
    #dlg-producto[open] .pdp__img { animation: pdp-img 620ms var(--ease-out) both; }
    #dlg-producto[open] .pdp__info > * { animation: qz-in 520ms var(--ease-out) both; }
    #dlg-producto[open] .pdp__info > :nth-child(1) { animation-delay: 60ms; }
    #dlg-producto[open] .pdp__info > :nth-child(2) { animation-delay: 110ms; }
    #dlg-producto[open] .pdp__info > :nth-child(3) { animation-delay: 160ms; }
    #dlg-producto[open] .pdp__info > :nth-child(4) { animation-delay: 210ms; }
    #dlg-producto[open] .pdp__info > :nth-child(5) { animation-delay: 260ms; }
    #dlg-producto[open] .pdp__info > :nth-child(n + 6) { animation-delay: 310ms; }
    @keyframes pdp-img { from { opacity: 0; transform: scale(1.06); } }
  }
  .vt-on .pc { view-transition-name: var(--vtn, none); }

  /* ---------- carrito ---------- */
  .dlg-drawer { width: min(100vw, 460px); }
  .dlg-count { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); }
  #cesta-cuerpo { padding: var(--s-4); }
  #cesta-pie { padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); gap: var(--s-3); background: var(--card); border-top: 1px solid var(--border); }
  .cart-empty { display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding: var(--s-8) var(--s-4); }
  .cart-empty__ico { width: 76px; height: 76px; border-radius: 50%; background: var(--muted); color: var(--navy); display: grid; place-items: center; margin-bottom: var(--s-2); }
  .cart-empty h3 { font-size: 1.625rem; }
  .cart-empty p { color: var(--muted-foreground); max-width: 32ch; margin-bottom: var(--s-2); }
  .cart-ship { background: var(--muted); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); display: grid; gap: var(--s-2); }
  .cart-ship p { font-size: var(--text-sm); }
  .progress-free { margin-top: 0; background: rgb(8 31 44 / .12); }
  .cart-lines { display: grid; gap: var(--s-3); }
  .cart-line { grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-3); background: #fff; border: 0; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--border); align-items: start; }
  .cart-line .thumb { width: 76px; height: 76px; aspect-ratio: auto; background: var(--muted); }
  .cart-line__info { display: grid; gap: 2px; min-width: 0; }
  .cart-line__info b { font-size: 1.125rem; line-height: 1.15; }
  .cart-line__ctl { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }
  .qty { background: var(--muted); border: 0; border-radius: var(--radius-full); margin-top: 0; }
  .qty button { width: 36px; height: 36px; border-radius: 50%; }
  .qty button:hover { background: rgb(8 31 44 / .1); }
  .cart-line__rm { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 var(--s-2); border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--muted-foreground); transition: color var(--dur-fast), background var(--dur-fast); }
  .cart-line__rm:hover { color: var(--destructive); background: rgb(155 44 32 / .08); }
  .cart-line__p { padding-top: 2px; }
  .totals { background: var(--muted); border-radius: var(--radius-sm); padding: var(--s-4); }
  .totals .grand { border-top-color: rgb(8 31 44 / .15); }
@media (prefers-reduced-motion: reduce) { .pdp__x { transition-duration: 1ms; } }

#cesta-pie { grid-template-columns: minmax(0, 1fr); }

/* ---------- filtros del catálogo: una barra, menús desplegables y etiquetas activas ----------
   Sin capa (igual que ficha y cesta): ver la nota de la llave de más en styles.css. */
.cat__head { margin-bottom: var(--s-3); }
.fb { position: relative; z-index: 5; padding-block: var(--s-2) var(--s-3); background: var(--background); }
@media (min-width: 900px) and (min-height: 640px) {
  .fb { position: sticky; top: var(--hdr-h, 116px); z-index: calc(var(--z-header, 50) - 1); box-shadow: 0 1px 0 var(--border); margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); }
}
.fb__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.fb__q { flex: 1 1 260px; min-width: 0; }
.fb__q .input { min-height: 46px; }
.fb__q .i { top: 12px; }
.fb__dds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.fb__ord { margin-left: auto; }
.fdd { position: relative; }
.fdd__btn, .fav-t span { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 var(--s-4); border-radius: var(--radius-full); background: var(--card); box-shadow: 0 0 0 1px var(--border-strong); font-size: var(--text-sm); white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-instant); }
.fdd__btn:hover, .fav-t:hover span { background: var(--muted); }
.fdd__btn:active, .fav-t:active span { transform: scale(.97); }
.fdd__btn:focus-visible, .fav-t input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.fdd__val { display: none; font-weight: 500; margin-left: -4px; }
.fdd__val::before { content: ":"; font-weight: 400; margin-right: 5px; }
.fdd__btn.is-set { background: var(--navy); color: var(--on-navy); box-shadow: none; }
.fdd__btn.is-set:hover { background: #0d2c3e; }
.fdd__btn.is-set .fdd__val, .fb__ord .fdd__val { display: inline; }
.fb__ord .fdd__btn.is-set { background: var(--card); color: var(--foreground); box-shadow: 0 0 0 1px var(--border-strong); }
.fdd__chev { transition: transform var(--dur-base) var(--ease-out); }
.fdd.is-open .fdd__chev { transform: rotate(180deg); }
.fav-t { position: relative; }
.fav-t input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fav-t input:checked + span { background: var(--navy); color: var(--on-navy); box-shadow: none; }
.fav-t input:checked + span .i { fill: var(--gold); color: var(--gold); }
.fdd__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 250px; max-height: min(62vh, 440px); overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2); background: var(--card); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--border), 0 22px 44px -18px rgb(8 31 44 / .4); }
.fdd__panel--2 { min-width: 400px; }
.fdd__panel--2 .fdd__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.fb__ord .fdd__panel { left: auto; right: 0; }
.fdd__head, .fb__scrim { display: none; }
.fopt { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-3); border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; transition: background var(--dur-fast); }
.fopt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fopt__t { flex: 1; }
.fopt__n { color: var(--muted-foreground); font-size: var(--text-xs); }
.fopt__ok { opacity: 0; color: var(--navy); }
.fopt:hover { background: var(--muted); }
.fopt:has(input:checked) { background: var(--muted); font-weight: 500; }
.fopt:has(input:checked) .fopt__ok { opacity: 1; }
.fopt:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }
.fopt.is-zero { opacity: .5; }
.fopt:has(input:disabled), .fopt:has(input:disabled) input { cursor: not-allowed; }
.fb__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.fact { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3) 0 var(--s-4); border-radius: var(--radius-full); background: var(--muted); font-size: var(--text-sm); transition: background var(--dur-fast), transform var(--dur-instant); }
.fact:hover { background: #dcd9d0; }
.fact:active { transform: scale(.96); }
.fact:focus-visible, .fact-clear:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.fact .i { color: var(--muted-foreground); }
.fact-clear { min-height: 36px; padding: 0 var(--s-3); border-radius: var(--radius-full); font-size: var(--text-sm); color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 3px; }
.fact-clear:hover { color: var(--foreground); }
@media (prefers-reduced-motion: no-preference) {
  .fdd__panel:not([hidden]) { animation: fdd-in var(--dur-base) var(--ease-out); }
  .fact { animation: fact-in var(--dur-base) var(--ease-out) both; }
  @keyframes fdd-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
  @keyframes fact-in { from { opacity: 0; transform: scale(.9); } }
}
@media (max-width: 720px) {
  .fb__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .fb__q { grid-column: 1 / -1; }
  .fb__dds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 3px; margin: -3px; }
  .fb__dds > * { flex: none; }
  .fb__ord { margin-left: 0; }
  .fb__ord .fdd__lab { display: none; }
  .fb__ord .fdd__val { margin-left: 0; }
  .fb__ord .fdd__val::before { content: none; }
  .fdd__panel, .fb__ord .fdd__panel { position: fixed; inset: auto 0 0 0; z-index: 90; min-width: 0; max-height: 78dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--s-3) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); }
  .fdd__panel--2 { min-width: 0; }
  .fdd__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-1) var(--s-2); font-family: var(--font-display); font-size: var(--text-xl); }
  .fdd__x { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
  .fdd__x:hover { background: var(--muted); }
  .fb__scrim { position: fixed; inset: 0; z-index: 80; display: block; background: rgb(8 31 44 / .45); }
  .fb__scrim[hidden] { display: none; }
  @media (prefers-reduced-motion: no-preference) { .fdd__panel:not([hidden]) { animation: fdd-sheet var(--dur-slow) var(--ease-out); } @keyframes fdd-sheet { from { transform: translateY(32px); opacity: 0; } } }
}