/* ======================================================================
   Mejora de la vista pública (2026-11-05): tipografía, botones, menú,
   tarjetas, portada, banda fotográfica, pie y transiciones.
   Se carga después de styles.css y reabre sus capas.
   ====================================================================== */
@layer layout {
  .logo { transform-origin: left center; }

  .site-footer { padding-top: var(--s-6); }
  .footer-giant { position: relative; z-index: 1; margin-top: var(--s-5); padding-bottom: var(--s-2); color: var(--gold); line-height: 0; }
  .footer-giant svg { width: min(100%, 1180px); height: auto; margin-inline: auto; fill: transparent; stroke: currentColor; stroke-width: 1px; transition: fill var(--dur-page) var(--ease-out); }
  .footer-giant svg path { vector-effect: non-scaling-stroke; }
  .site-footer:hover .footer-giant svg { fill: rgb(199 178 115 / .14); }
}

@layer components {
  /* botones: píldora con burbuja de flecha */
  .btn { border-radius: var(--radius-full); min-height: 52px; padding: 0 var(--s-6); transform: translate(var(--tx, 0px), var(--ty, 0px)); transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base), transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); }
  .btn:active { transform: translate(var(--tx, 0px), calc(var(--ty, 0px) + 1px)) scale(.97); transition-duration: var(--dur-instant); }
  .btn--sm { min-height: 42px; padding: 0 var(--s-5); }
  .btn:has(.bub) { padding-right: var(--s-2); }
  .bub { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--navy); transition: transform var(--dur-slow) var(--ease-spring), background var(--dur-base), color var(--dur-base); }
  .bub .i { transition: transform var(--dur-base) var(--ease-out); }
  .btn:hover .bub { transform: scale(1.08); background: var(--navy); color: var(--gold); }
  .btn:hover .bub .i { transform: translateX(2px); }
  .btn--on-dark .bub, .btn--ghost .bub { background: var(--navy); color: var(--cream); }
  .btn--on-dark:hover .bub { background: var(--navy); color: var(--cream); }
  .btn--ghost:hover .bub { background: var(--gold); color: var(--navy); }
  .btn--ghost-dark .bub { background: var(--gold); color: var(--navy); }
  .btn--ghost-dark:hover .bub { background: var(--navy); color: var(--gold); }
  .btn--sm .bub { width: 28px; height: 28px; }
  .link-arrow { position: relative; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
  .link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
  .link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); }

  /* tarjetas de producto: halo del color del frasco e inclinación suave */

  @media (max-width: 767px) {
    .snap.grid-products { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: var(--s-3); }
    .snap.grid-products::-webkit-scrollbar { display: none; }
    .snap.grid-products > * { scroll-snap-align: start; }
  }

  /* respuesta de la cesta */
  .badge-count.bump { animation: bump 520ms var(--ease-spring); }
  #btn-cesta .i.wiggle { animation: wiggle 420ms var(--ease-out); transform-origin: 50% 20%; }
  @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 100% { transform: scale(1); } }
  @keyframes wiggle { 25% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } 100% { transform: rotate(0); } }
  .fly { position: fixed; inset: auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; pointer-events: none; will-change: transform; }
  .fly svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgb(8 31 44 / .25)); }
  dialog.vt, dialog.vt::backdrop { transition: none !important; opacity: 1 !important; transform: none !important; }
}

@layer views {
  /* portada */
  @media (min-width: 1024px) { .hero__copy h1 { margin-right: calc(-1 * var(--s-9)); position: relative; z-index: 3; background: none; padding: 0; } }

  /* compra por */

  /* banda fotográfica */

  /* decants: forma grande derivada del logo */

  .page-head > * { animation: rise var(--dur-page) var(--ease-out) both; }
  .page-head > :nth-child(2) { animation-delay: 80ms; }
  .page-head > :nth-child(3) { animation-delay: 160ms; }
  .split-head h2, .story h2, .decant h2, .quiz h2, .page-head h1 { letter-spacing: -0.035em; line-height: 1; }
  .split-head h2, .story h2, .decant h2 { font-size: var(--text-3xl); }
}

@layer utilities {
  /* transiciones entre vistas y entre tarjeta y ficha */
  ::view-transition-old(root) { animation: vt-out var(--dur-fast) var(--ease-in) both; }
  ::view-transition-new(root) { animation: vt-in var(--dur-slow) var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
  ::view-transition-group(prod-img) { animation-duration: 460ms; animation-timing-function: var(--ease-out); }
  ::view-transition-group(*) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease-out); }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .grid-products > .pcard { 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; }
      @keyframes hero-par { to { transform: scale(1.1) translateY(48px); } }
      .logo { animation: logo-s linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
      @keyframes logo-s { to { transform: scale(.84); } }
    }
    @supports not (animation-timeline: view()) { .hero__media img { transform: none; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .bub, .pcard__img svg, .link-arrow::after, .shopby a::before { transition-duration: 1ms; }
  .logo { animation: none; }
}

@layer views {
  .pdp__img { background: color-mix(in srgb, var(--tono, #1c3a4d) 14%, var(--muted)); }
  .pdp__img svg { filter: drop-shadow(0 14px 18px rgb(8 31 44 / .22)); }
}

@layer views {
  .story__img { position: relative; z-index: 1; }
  @media (min-width: 1024px) { .hero__facts, .hero__cta { max-width: 30rem; } }
}

@layer views {
  .quiz__res .res { display: grid; gap: var(--s-3); padding: var(--s-3); border: 1px solid rgb(244 231 178 / .3); border-radius: var(--radius-sm); transition: border-color var(--dur-fast), background var(--dur-fast); }
  .quiz__res .res:hover { border-color: var(--gold); background: rgb(244 231 178 / .06); }
  .quiz__res .res > a { border: 0; padding: 0; background: none; }
  .quiz__res .res > a:hover { background: none; }
  .quiz__res .why { display: block; margin-top: 2px; color: var(--gold); }
  .quiz__res .res .btn { justify-self: start; }
}