/* ======================================================================
   Tienda directa, tipo catálogo (2026-11-05).
   Estructura tomada del aromaclub (portada compacta, filtros en chips, rejilla, cómo comprar y
   preguntas frecuentes) y tarjeta de producto inspirada en 21st.dev (deltacomponents, MIT).
   Se carga la última y reabre las capas de styles.css.
   ====================================================================== */
@layer layout {
  .demo-bar { position: static; }
  .site-header { top: 0; }
  .site-header__in { min-height: 68px; gap: var(--s-4); }
  .header-actions { margin-left: auto; }
  @media (min-width: 768px) {
    .header-search { display: block; flex: 1; max-width: 560px; margin-inline: auto; }
    .header-search input, .header-search input:focus { width: 100%; }
    .header-actions { margin-left: 0; }
  }
  .tabs { display: none; border-top: 1px solid var(--border); }
  .tabs__in { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; }
  .tabs a { padding: 12px 16px; font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; position: relative; z-index: 1; transition: color var(--dur-fast); }
  .tabs a:hover { color: var(--gold-ink); }
  .tabs a:first-child { padding-left: 0; }
  .tabs .pill { position: absolute; left: 0; bottom: 4px; height: 1.5px; width: 100px; background: var(--gold-ink); transform: translateX(var(--x, 0px)) scaleX(var(--s, 1)); transform-origin: left center; opacity: 0; transition: transform var(--dur-slow) var(--ease-in-out), opacity var(--dur-base); pointer-events: none; }
  .tabs__in.has-pill .pill { opacity: 1; }
  @media (min-width: 768px) { .tabs { display: block; } }
}

@layer views {
  /* portada: el medio se expande con el scroll (patrón scroll-expansion-hero de 21st.dev,
     reescrito con CSS scroll-driven; la rueda y el teclado nunca se bloquean) */
  .sx { position: relative; background: var(--navy); --w: 300px; --h: 400px; }
  .sx__pin { position: relative; height: min(88dvh, 780px); min-height: 520px; overflow: clip; display: grid; place-items: center; color: var(--on-navy); isolation: isolate; }
  .sx__bg, .sx__media { position: absolute; inset: 0; }
  .sx__bg img, .sx__media img { width: 100%; height: 100%; object-fit: cover; }
  .sx__bg::after { content: ""; position: absolute; inset: 0; background: rgb(8 31 44 / .55); }
  .sx__media { clip-path: inset(calc(50% - var(--h) / 2) calc(50% - var(--w) / 2)); box-shadow: var(--shadow); }
  .sx__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 31 44 / .78), rgb(8 31 44 / 0) 55%); }
  .sx__title { position: relative; z-index: 3; display: grid; gap: var(--s-1); justify-items: center; text-align: center; font-size: clamp(2.75rem, 1rem + 7.4vw, 7rem); line-height: .95; letter-spacing: -0.04em; font-weight: 300; color: var(--on-navy); padding-inline: var(--gutter); }
  .sx__title em { color: var(--gold); }
  .sx__hint { position: absolute; z-index: 3; bottom: var(--s-5); left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: var(--s-2); font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy); }
  .sx__end { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: var(--s-6); display: grid; gap: var(--s-4); max-width: 520px; color: var(--on-navy); }
  .sx__end p { font-size: 1.1875rem; line-height: 1.5; }
  .sx__end .link-arrow { color: var(--on-navy); }
  .sx__cap { position: absolute; z-index: 3; top: var(--s-4); right: var(--gutter); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy); opacity: .85; }
  .sx__hint { display: none; }
  @media (max-width: 767px) { .sx { --w: 240px; --h: 320px; } .sx__end { bottom: var(--s-5); } }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .sx { height: calc(100dvh - var(--hdr-h, 110px) - var(--demo-h, 36px) + 90dvh); --a0: var(--demo-h, 36px); --a1: calc(var(--demo-h, 36px) + 90dvh); }
      .sx__pin { position: sticky; top: var(--hdr-h, 110px); height: calc(100dvh - var(--hdr-h, 110px) - var(--demo-h, 36px)); min-height: 0; }
      .sx__media, .sx__media img, .sx__bg, .sx__title .a, .sx__title .b, .sx__hint, .sx__end { animation-timeline: scroll(root); animation-fill-mode: both; animation-timing-function: linear; animation-duration: auto; }
      .sx__media { animation-name: sx-open; animation-range: var(--a0) var(--a1); }
      .sx__media img { animation-name: sx-img; animation-range: var(--a0) var(--a1); }
      .sx__bg { animation-name: sx-bg; animation-range: var(--a0) var(--a1); }
      .sx__title .a { animation-name: sx-a; animation-range: var(--a0) calc(var(--a0) + 60dvh); }
      .sx__title .b { animation-name: sx-b; animation-range: var(--a0) calc(var(--a0) + 60dvh); }
      .sx__hint { display: flex; animation-name: sx-hint; animation-range: var(--a0) calc(var(--a0) + 20dvh); }
      .sx__end { animation-name: sx-end; animation-range: calc(var(--a0) + 55dvh) var(--a1); }
      @keyframes sx-open { from { clip-path: inset(calc(50% - var(--h) / 2) calc(50% - var(--w) / 2)); } to { clip-path: inset(0); } }
      @keyframes sx-img { from { transform: scale(1.22); } to { transform: scale(1); } }
      @keyframes sx-bg { to { opacity: 0; } }
      @keyframes sx-a { to { transform: translateX(-60vw); opacity: 0; } }
      @keyframes sx-b { to { transform: translateX(60vw); opacity: 0; } }
      @keyframes sx-hint { to { opacity: 0; } }
      @keyframes sx-end { from { opacity: 0; transform: translateY(18px); } }
    }
  }

  /* franja del test */

  /* catálogo */
  .cat { padding-block: var(--s-7) var(--s-8); scroll-margin-top: 140px; outline: none; }
  .cat__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-4); }
  .cat__head h1, .cat__head h2 { font-size: var(--text-3xl); line-height: 1; }
  .cat__filters { display: grid; gap: var(--s-4) var(--s-6); padding-block: var(--s-4); border-block: 1px solid var(--border); }
  @media (min-width: 1024px) { .cat__filters { grid-template-columns: 1fr 1fr; } .cat__filters .grp:nth-child(2) { grid-row: span 1; } }
  .grp { display: grid; gap: var(--s-2); min-width: 0; }
  .grp legend { font-size: var(--text-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: var(--s-2); }
  .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: calc(-1 * var(--s-1)); padding-inline: var(--s-1); }
  .chips--scroll .chip { flex: none; }
  @media (min-width: 1024px) { .chips--scroll { flex-wrap: wrap; overflow: visible; } }
  .cat__bar { display: flex; gap: var(--s-4); align-items: end; flex-wrap: wrap; margin-block: var(--s-5) var(--s-5); }
  .cat__bar .search-big { flex: 1 1 280px; }
  .cat .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); grid-auto-flow: dense; }
  @media (min-width: 768px) { .cat .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } }
  @media (min-width: 1100px) { .cat .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .cat__more { display: flex; justify-content: center; margin-top: var(--s-7); }
  .count { margin: 0; }

  /* tarjeta de producto */
  .pc { display: grid; align-content: start; position: relative; min-width: 0; }
  .pc__img { --tono: #1c3a4d; position: relative; aspect-ratio: 1 / 1.1; background: color-mix(in srgb, var(--tono) 12%, var(--muted)); border-radius: var(--radius-sm); overflow: hidden; }
  .pc__open { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; }
  .pc__open svg { width: 54%; height: auto; transition: transform var(--dur-slow) var(--ease-out); }
  .pc__open img { width: 100%; height: 100%; object-fit: cover; }
  .pc:hover .pc__open svg { transform: translateY(-6px) scale(1.03); }
  .pc__open:focus-visible { outline-offset: -4px; }
  .pc__fav { position: absolute; top: var(--s-2); right: var(--s-2); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 250 240 / .92); color: var(--navy); z-index: 2; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
  .pc__fav:hover { transform: scale(1.08); background: #fff; }
  .pc__fav:active { transform: scale(.94); }
  .pc__fav[aria-pressed="true"] .i { fill: currentColor; }
  .pc__fav .i { transition: transform var(--dur-slow) var(--ease-spring); }
  .pc__fav[aria-pressed="true"] .i { transform: scale(1.12); }
  .pc__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-top: var(--s-3); }
  .pc__name { font-family: var(--font-display); font-weight: 400; font-size: 1.1875rem; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; min-width: 0; }
  .pc__name button { text-align: left; transition: color var(--dur-fast); }
  .pc__name button:hover { color: var(--gold-ink); }
  .pc__price { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pc__sub { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 2px; }
  .pc__sub s { margin-left: 2px; }
  .pc__ctl { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-3); flex-wrap: wrap; }
  .pc__fmt { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-full); padding: 2px; }
  .pc__fmt label { position: relative; }
  .pc__fmt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .pc__fmt span { display: block; padding: 6px 12px; min-height: 32px; font-size: var(--text-xs); font-weight: 500; line-height: 20px; border-radius: var(--radius-full); transition: background var(--dur-base) var(--ease-out), color var(--dur-base); white-space: nowrap; }
  .pc__fmt input:checked + span { background: var(--navy); color: var(--on-navy); }
  .pc__fmt input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
  .pc__fmt input:disabled + span { opacity: .45; text-decoration: line-through; }
  .pc__add { flex: 1 1 96px; }
  .pc.is-out .pc__open svg, .pc.is-out .pc__open img { opacity: .5; }
  .pc-tile { position: relative; grid-row: span 2; min-height: 320px; margin: 0; overflow: hidden; border-radius: var(--radius-sm); background: var(--navy); }
  .pc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pc-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 31 44 / .7), transparent 45%); }
  .pc-tile figcaption { position: absolute; left: var(--s-4); bottom: var(--s-3); z-index: 1; color: var(--on-navy); font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.02em; }
  @media (max-width: 767px) { .pc-tile { grid-column: span 2; grid-row: span 1; min-height: 0; aspect-ratio: 16 / 10; } }

  /* cómo comprar */
  .how { background: var(--muted); padding-block: var(--s-8); }
  .how__in { display: grid; gap: var(--s-7); }
  @media (min-width: 1024px) { .how__in { grid-template-columns: 6fr 4fr; align-items: center; gap: var(--s-8); } }
  .how h2, .faq h2 { font-size: var(--text-3xl); line-height: 1; margin-bottom: var(--s-5); }

  /* preguntas frecuentes */
  .faq { padding-block: var(--s-8) var(--s-9); }
  .faq__in { display: grid; gap: var(--s-6); }
  @media (min-width: 1024px) { .faq__in { grid-template-columns: 1fr 2fr; gap: var(--s-8); } }
  .faq details { border-bottom: 1px solid var(--border-strong); }
  .faq details:first-child { border-top: 1px solid var(--border-strong); }
  .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px; padding-block: var(--s-3); cursor: pointer; font-weight: 500; transition: color var(--dur-fast); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; transition: transform var(--dur-base) var(--ease-out); }
  .faq summary:hover { color: var(--gold-ink); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { color: var(--muted-foreground); padding-bottom: var(--s-4); max-width: 60ch; }
  .faq details a { color: var(--gold-ink); text-underline-offset: 3px; }
}

@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .grid-products > .pc { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry calc(0% + var(--i, 0) * 7%) entry calc(46% + var(--i, 0) * 7%); }
      .grid-products > :nth-child(4n + 2) { --i: 1; }
      .grid-products > :nth-child(4n + 3) { --i: 2; }
      .grid-products > :nth-child(4n + 4) { --i: 3; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .pc__open svg, .pc__fav, .pc__fav .i, .pc__fmt span { transition-duration: 1ms; }
}