.wa-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 20px 0 16px;
    border-radius: var(--fichi-radius-full);
    background: #25D366;
    /* Not white: white on WhatsApp green is 1.98:1. This ink measures 8.6:1. */
    color: #062E16;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  }
  .wa-fab:hover { filter: brightness(0.95); }
  .wa-fab:focus-visible { outline: 3px solid var(--fichi-text-primary); outline-offset: 3px; }
  .wa-fab svg { width: 24px; height: 24px; }
  @media (max-width: 480px) { .wa-fab-label { display: none; } .wa-fab { padding: 0 16px; } }
  @media (prefers-reduced-motion: no-preference) { .wa-fab { transition: transform 0.15s; } .wa-fab:hover { transform: translateY(-1px); } }

  .cart-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 62;
    width: min(560px, calc(100% - 24px));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 6px;
    border-radius: var(--fichi-radius-full);
    background: var(--fichi-bg-elevated);
    border: 1px solid var(--fichi-border-subtle);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  }
  .cart-bar[hidden] { display: none !important; }
  /* While the list is up it owns the corner. */
  body:has(.cart-bar:not([hidden])) .wa-fab { display: none; }
  .cart-open {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: none;
    border-radius: var(--fichi-radius-full);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--fichi-text-primary);
    cursor: pointer;
    text-align: left;
  }
  .cart-open .cart-n {
    min-width: 24px;
    padding: 2px 8px;
    border-radius: var(--fichi-radius-full);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-size: 13px;
    text-align: center;
  }
  .cart-send {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--fichi-radius-full);
    background: #25D366;
    color: #06301A;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .cart-panel {
    position: fixed;
    left: 50%;
    bottom: 78px;
    transform: translateX(-50%);
    z-index: 61;
    width: min(560px, calc(100% - 24px));
    max-height: 70dvh;
    display: flex;
    flex-direction: column;
    border-radius: var(--fichi-radius-xl);
    background: var(--fichi-bg-elevated);
    border: 1px solid var(--fichi-border-subtle);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
  }
  .cart-panel[hidden] { display: none !important; }
  .cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px 12px 20px;
    border-bottom: 1px solid var(--fichi-border-subtle);
    font-family: var(--fichi-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--fichi-text-primary);
  }
  .cart-close {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; color: var(--fichi-text-secondary); cursor: pointer;
  }
  .cart-items { list-style: none; margin: 0; padding: 6px 20px; overflow-y: auto; }
  .cart-items li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fichi-border-subtle);
  }
  .cart-items li:last-child { border-bottom: 0; }
  .cart-items .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .cart-items .who b { font-size: 14px; font-weight: 600; color: var(--fichi-text-primary); }
  .cart-items .who span { font-size: 13px; color: var(--fichi-text-muted); font-variant-numeric: tabular-nums; }
  .cart-items .qty { display: flex; align-items: center; gap: 2px; }
  .cart-items .qty button {
    width: 34px; height: 34px;
    border-radius: var(--fichi-radius-md);
    border: 1px solid var(--fichi-border-subtle);
    background: var(--fichi-bg-surface);
    color: var(--fichi-text-primary);
    font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  }
  .cart-items .qty output { min-width: 30px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .cart-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--fichi-border-subtle); }
  .cart-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: var(--fichi-text-secondary); }
  .cart-total strong { font-size: 19px; color: var(--fichi-text-primary); font-variant-numeric: tabular-nums; }
  .cart-foot .cart-send { display: flex; justify-content: center; }
  .cart-notice {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: var(--fichi-radius-md);
    background: var(--fichi-warning-bg);
    color: var(--fichi-warning-text);
    font-size: 12.5px;
    line-height: 1.45;
  }
  .cart-notice[hidden] { display: none !important; }
  .cart-zone { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 14px; }
  .cart-zone select {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--fichi-border-default);
    border-radius: var(--fichi-radius-md);
    background: var(--fichi-bg-page);
    color: var(--fichi-text-primary);
    font: inherit;
    font-size: 14px;
  }
  .cart-ship { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; font-size: 13.5px; color: var(--fichi-text-secondary); }
  /* The UA gives [hidden] display:none from its OWN stylesheet, which any
     author rule outranks — so the line above kept this row on screen while the
     script had marked it hidden, printing a bare "Envío" with no amount above
     every total. Four siblings already carry this guard; this one did not. */
  .cart-ship[hidden] { display: none !important; }
  .cart-address { display: block; margin-bottom: 12px; font-size: 14px; }
  .cart-address[hidden] { display: none !important; }
  .cart-address span { display: block; margin-bottom: 6px; }
  .cart-address textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--fichi-border-default);
    border-radius: var(--fichi-radius-md);
    background: var(--fichi-bg-page);
    color: var(--fichi-text-primary);
    font: inherit;
    font-size: 14px;
    resize: vertical;
  }
  .cart-address textarea::placeholder { color: var(--fichi-text-muted); opacity: 1; }
  @media (max-width: 640px) {
    .cart-bar { bottom: 12px; }
    .cart-panel { bottom: 74px; max-height: 66dvh; }
    .cart-open .cart-word { display: none; }
  }
  .navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 24px;
    background: var(--fichi-bg-surface);
    border-bottom: 1px solid var(--fichi-border-subtle);
    /* The bar's accent surface: without this the section's accent override
       had almost nothing to colour (search and cart are neutral chrome), so
       changing "Color" looked like it did nothing. */
    box-shadow: inset 0 -3px 0 0 var(--store-accent);
  }
  .navbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fichi-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--fichi-text-primary);
    text-decoration: none;
    flex-shrink: 0;
  }
  .navbar .brand img { height: 30px; max-width: 150px; object-fit: contain; display: block; }
  /* Text brand (no logo) carries the accent — the most visible surface a
     store without a logo has. */
  .navbar .brand.text-brand { color: var(--store-accent-text); }
  .navbar .links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .navbar .links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--fichi-text-secondary);
    text-decoration: none;
  }
  .navbar .links a:hover { color: var(--store-accent-text); }
  .navbar .search {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--fichi-radius-full);
    border: 1px solid var(--fichi-border-subtle);
    background: var(--fichi-bg-page);
    color: var(--fichi-text-muted);
  }
  /* 16px, not 13px: beside a 17px brand the field read as an afterthought, and
     iOS Safari zooms the whole page when a field under 16px takes focus. */
  .navbar .search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
    color: var(--fichi-text-primary);
    font-family: inherit;
    min-width: 0;
  }
  /* The visitor's theme toggle is FIXED at top:14/right:14 and 40px wide, and
     it paints above this bar (z 50 over 40). Measured on the live storefront,
     it covered the cart icon completely — 20px of icon inside 40px of button,
     at every desktop width. Reserving its corner is the only fix that holds:
     the toggle cannot know whether a navbar exists below it. */
  .navbar { padding-right: 64px; }
  .navbar .cart {
    color: var(--store-accent);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
  }
  .navbar button.cart { cursor: pointer; min-height: 44px; }
  .navbar .cart .cart-count {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: var(--fichi-radius-full);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }
  /* A phone: three rows, in the order a thumb expects them.
     Row 1 — the brand at the left and the cart at the right, just inside the
     corner reserved for the theme toggle. Row 2 — the links, on a line of
     their own. Row 3 — the search, full width. Before this the children
     wrapped in DOM order: brand and links filled the first row, the cart fell
     to a second row by itself at the left, and the search came third —
     which read as a header that had broken rather than one that adapted. */
  /* The burger, hidden until a phone asks for it. Sized to the 44px tap target
     the audit holds every control to. */
  .navbar .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--fichi-border-subtle);
    border-radius: 10px;
    background: transparent;
    color: var(--fichi-text-primary);
    cursor: pointer;
  }
  .navbar .nav-toggle:hover { background: var(--fichi-bg-elevated); }

  @media (max-width: 720px) {
    .navbar { flex-wrap: wrap; padding: 10px 64px 10px 16px; gap: 10px 12px; }
    .navbar .brand { order: 0; flex: 1 1 auto; min-width: 0; }
    .navbar .brand.text-brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .navbar .cart { order: 1; margin-left: auto; }
    .navbar .links { order: 2; flex-basis: 100%; gap: 6px 16px; }
    .navbar .search { order: 3; flex-basis: 100%; }

    /* «Botón de menú»: the links collapse behind the toggle and drop as a
       panel when it is pressed. Everything else on the bar keeps its place,
       so the brand, the cart and the search do not move when the menu opens.

       Toggled with a CLASS on the nav rather than the [hidden] attribute:
       [hidden] comes from the UA stylesheet and loses to any rule that sets
       display, which is exactly what the .links rule above does. */
    .navbar-burger .nav-toggle { display: inline-flex; order: 1; }
    .navbar-burger .cart { order: 2; margin-left: 0; }
    .navbar-burger .links { display: none; }
    .navbar-burger.nav-open .links,
    .navbar-burger.nav-closing .links {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding-top: 4px;
      border-top: 1px solid var(--fichi-border-subtle);
    }
    .navbar-burger.nav-open .links a,
    .navbar-burger.nav-closing .links a {
      padding: 12px 4px;
      border-bottom: 1px solid var(--fichi-border-subtle);
    }
    .navbar-burger.nav-open .links a:last-child,
    .navbar-burger.nav-closing .links a:last-child { border-bottom: 0; }

    /* «Desde un lado»: a drawer over the page instead of a panel that pushes
       it. The page keeps its scroll position, so a visitor who opens the menu
       by accident does not lose their place, and the links get the whole
       screen rather than shoving the article off the bottom.

       It is NOT a display change like the drop panel, so it needs none of that
       one's machinery: the drawer is always in the layout and travels on a
       transform, which transitions in BOTH directions by itself. visibility is
       what keeps it out of the tab order and away from a screen reader while
       it is shut, delayed on the way out so it outlives its own exit. */
    /* Where the drawer's own content starts: clear of the bar's row, so the
       first link never sits under the X. Declared here and overwritten by the
       script when the drawer opens, the way --store-navbar-height already
       works — a var() that only ever exists in JS drops its whole declaration
       for the frame before the script runs, and the guard in
       token-exists.test.ts refuses one. 68px is the X's row on a bare bar. */
    .navbar-burger.nav-side { --store-drawer-top: 68px; }
    .navbar-burger.nav-side .links,
    .navbar-burger.nav-side.nav-closing .links {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      position: fixed;
      /* The WHOLE height of the screen: the owner asked for the menu and
         nothing else — no search field, no cart, no announcement strip showing
         past its edge. Only the X stays on top of it, because the control that
         opened the drawer has to be the one that closes it.

         The content starts below the bar's row, and that number is MEASURED
         when the drawer opens: a fixed box cannot know where a STICKY bar
         currently sits, since above the fold an announcement band is still
         pushing it down. */
      inset: 0 auto 0 0;
      width: min(86vw, 340px);
      z-index: 70;
      padding: var(--store-drawer-top) 20px 24px;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--fichi-bg-surface);
      border-top: 0;
      border-right: 1px solid var(--fichi-border-subtle);
      box-shadow: var(--fichi-shadow-lg);
      transform: translateX(-101%);
      visibility: hidden;
      transition: transform 260ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 260ms;
    }
    .navbar-burger.nav-side.nav-open .links {
      transform: none;
      visibility: visible;
      transition: transform 260ms cubic-bezier(0.2, 0, 0, 1), visibility 0s;
    }
    /* The scrim is a real button: tapping beside a drawer to shut it is what
       everyone expects, and a div would hand that gesture to a mouse alone. */
    .navbar-burger .nav-scrim {
      position: fixed;
      inset: 0;
      z-index: 69;
      padding: 0;
      border: 0;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;
      visibility: hidden;
      transition: opacity 260ms ease, visibility 0s linear 260ms;
    }
    .navbar-burger.nav-side.nav-open .nav-scrim {
      opacity: 1;
      visibility: visible;
      transition: opacity 260ms ease, visibility 0s;
    }
    /* The toggle ALONE rides above the drawer. The burger is the X: the
       control that opened the menu closes it, in the corner the thumb left it.
       Everything else on the bar stays under the drawer, which is the point of
       a full-height panel. */
    .navbar-burger.nav-side .nav-toggle { position: relative; z-index: 71; }
    /* An open drawer has to clear the page's own stacked things: the cart bar
       sits at 62 and the catalogue's filter sheet at 70. */
    .navbar-burger.nav-side.nav-open { z-index: 80; }

  }

  /* The panel is a display change, so it cannot be TRANSITIONED — an animation
     is what runs when an element appears, and it needs no @starting-style, so
     it works on every phone that will ever open this. The close is the mirror,
     driven from the script: .nav-closing holds the panel in the layout for
     exactly as long as the animation lasts.

     The whole block is behind no-preference rather than reset inside a
     reduce query, because the stagger below is keyed on :nth-child and would
     OUT-SPECIFY any reset: the delays would survive it, and with a both fill a
     link sits at opacity 0 for the length of its delay. Someone who asked for
     less movement would get a menu whose links arrive blank — the one thing
     reduced motion must never produce. Declaring the movement only for whoever
     wants it cannot fail that way. */
  @media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
    /* :not(.nav-side) throughout — the drawer moves on a transform that
       transitions both ways by itself, and laying a keyframed slide over a
       transition on the same property makes one of them win at random. */
    .navbar-burger:not(.nav-side).nav-open .links { animation: nav-in 240ms cubic-bezier(0.2, 0, 0, 1) both; }
    .navbar-burger:not(.nav-side).nav-closing .links { animation: nav-out 160ms cubic-bezier(0.4, 0, 1, 1) both; }
    /* The links arrive just behind the panel, close enough together to read as
       one movement. Capped at six: past that the last link waits on a queue.
       The drawer gets them too: there the panel travels and the links fade in
       behind it, which is the same idea on a different axis. */
    .navbar-burger.nav-open .links > * { animation: nav-item-in 220ms cubic-bezier(0.2, 0, 0, 1) both; }
    .navbar-burger.nav-open .links > :nth-child(2) { animation-delay: 30ms; }
    .navbar-burger.nav-open .links > :nth-child(3) { animation-delay: 60ms; }
    .navbar-burger.nav-open .links > :nth-child(4) { animation-delay: 90ms; }
    .navbar-burger.nav-open .links > :nth-child(5) { animation-delay: 120ms; }
    .navbar-burger.nav-open .links > :nth-child(n + 6) { animation-delay: 150ms; }
  }

  @keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } }
  @keyframes nav-out { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes nav-item-in { from { opacity: 0; transform: translateY(-6px); } }

  /* The burger becomes the X that closes it: the top and bottom rules meet in
     the middle of the 24-unit box (y=7 and y=17 both travel 5 to y=12) and
     cross there, and the middle one leaves. Translate THEN rotate — the other
     order swings the line off the centre before it turns. The X itself is not
     movement for its own sake, so it stays under reduce; only its travel
     goes, which leaves the icon telling the truth about the menu's state. */
  .navbar .nav-toggle svg path {
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition: transform 240ms cubic-bezier(0.2, 0, 0, 1), opacity 140ms ease;
  }
  .navbar.nav-open .nav-toggle svg path:nth-child(1) { transform: rotate(45deg) translateY(5px); }
  .navbar.nav-open .nav-toggle svg path:nth-child(2) { opacity: 0; }
  .navbar.nav-open .nav-toggle svg path:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }

  @media (prefers-reduced-motion: reduce) {
    .navbar .nav-toggle svg path { transition-duration: 0.01ms; }
  }

  /* The catalogue's filter panel sticks at 16px, which is under this bar:
     measured at 1280px, the bar held 0-69px and covered the panel's first
     53px, its search field whole. Below a bar that sticks, the panel sticks
     16px below the bar's bottom edge. The bar's script writes its real height
     on the panel, so links that wrap to a second row (92px with eight at
     1280px, 127px at 861px) no longer cover it. Without the script it is the
     bar on one row: 12px of padding, the cart's 44px, 12px and the 1px rule.
     ".navbar ~ *" is a catalogue after the bar, in the box the bar sticks in:
     main on the home, body on a page that borrows it. A styled bar sticks in
     its .sec wrapper instead, with rules of its own. Only while the panel is
     a sidebar; at 860px and under it is a bottom sheet with top: auto.
     «Encabezado fijo» off puts the 16px back (appearance.ts). */
  @media (min-width: 861px) {
    .navbar ~ * .facets { --store-navbar-height: 69px; top: calc(var(--store-navbar-height) + 16px); }
  }

  .navbar .nav-item { position: relative; display: inline-flex; align-items: center; gap: 2px; }
  .navbar .sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 32px;
    min-height: 32px;
    padding: 0 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--fichi-text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }
  .navbar .sub-toggle:hover { color: var(--store-accent-text); }
  /* «Categorías» is text, and text in this bar starts flush with its gap —
     a plain link has no padding, so 4px here showed as a stagger on a phone,
     where the row below starts at the same edge. */
  .navbar .sub-label { padding-left: 0; }
  .navbar .sub-toggle .chev { display: inline-flex; transition: transform 0.15s; }
  .navbar .nav-item.sub-open > .sub-toggle .chev { transform: rotate(180deg); }
  .navbar .submenu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 45;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 32px));
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--fichi-bg-surface);
    border: 1px solid var(--fichi-border-subtle);
    border-radius: 12px;
    box-shadow: var(--fichi-shadow-lg);
  }
  .navbar .nav-item.sub-open > .submenu { display: block; }
  .navbar .submenu a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--fichi-text-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
  }
  .navbar .submenu a:hover { background: var(--fichi-bg-page); color: var(--store-accent-text); }
  .navbar .submenu ul { margin: 0 0 4px; padding: 0 0 0 12px; list-style: none; }
  .navbar .submenu ul a { padding: 6px 10px; font-weight: 400; color: var(--fichi-text-secondary); }

  @media (max-width: 720px) {
    .navbar .nav-item { flex-wrap: wrap; }
    /* «Take the whole row» — and that is only what flex-basis: 100% MEANS
       while .links is a row. In the drawer .links is a COLUMN, where the main
       axis is the height: the same declaration made an open submenu 717px
       tall, swallowing the panel and stacking the other links on top of it.
       There the item already spans the width, from align-items: stretch, so
       the rule is scoped away rather than undone afterwards. */
    .navbar:not(.nav-side) .nav-item.sub-open { flex-basis: 100%; }
    .navbar .sub-toggle { min-width: 44px; min-height: 44px; }
    .navbar .submenu { position: static; flex-basis: 100%; min-width: 0; max-width: none; margin-top: 4px; box-shadow: none; }
    .navbar-burger.nav-open .links .nav-item,
    .navbar-burger.nav-closing .links .nav-item { border-bottom: 1px solid var(--fichi-border-subtle); }
    .navbar-burger.nav-open .links .nav-item > a,
    .navbar-burger.nav-closing .links .nav-item > a { flex: 1; border-bottom: 0; }
    .navbar-burger.nav-open .sub-label { flex: 1; justify-content: space-between; padding: 0 4px; }
    .navbar-burger.nav-open .submenu { border: 0; padding: 0 0 8px 12px; }
    .navbar-burger.nav-open .submenu a { padding: 8px 10px; border-bottom: 0; }
  }

  .navbar .search { position: relative; }
  /* The field sets outline: 0 for its own box, which also took the store's one
     focus ring off it (.navbar .search input outranks input:focus-visible). The
     pill carries the ring instead — a combobox nobody can see focused is one a
     keyboard user cannot find. */
  .navbar .search:focus-within { outline: 2px solid var(--store-ring, var(--store-accent)); outline-offset: 2px; }
  .navbar .search input::placeholder { color: var(--fichi-text-muted); opacity: 1; }
  .navbar .suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 45;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    padding: 6px;
    background: var(--fichi-bg-surface);
    border: 1px solid var(--fichi-border-subtle);
    border-radius: 14px;
    box-shadow: var(--fichi-shadow-lg);
    color: var(--fichi-text-primary);
  }
  /* [hidden] comes from the UA stylesheet and loses to any rule that sets
     display; this one says it outright. */
  .navbar .suggest[hidden] { display: none; }
  .navbar .suggest-group + .suggest-group,
  .navbar .suggest-group + .suggest-all { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--fichi-border-subtle); }
  .navbar .suggest-label {
    padding: 8px 10px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fichi-text-muted);
  }
  .navbar .suggest [role="option"] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
  }
  .navbar .suggest [role="option"]:hover,
  .navbar .suggest [role="option"][aria-selected="true"] { background: var(--fichi-bg-page); }
  /* The active option is marked by a shape as well as a tint: on the dark base
     the tint alone is a step of a few percent. */
  .navbar .suggest [role="option"][aria-selected="true"] { box-shadow: inset 3px 0 0 var(--store-accent); }
  .navbar .suggest .thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    object-fit: cover;
    background: var(--fichi-bg-muted);
    font-family: var(--fichi-font-display);
    font-weight: 700;
    color: var(--fichi-text-muted);
  }
  .navbar .suggest .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .navbar .suggest .name,
  .navbar .suggest .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navbar .suggest .name { font-size: 14px; font-weight: 600; line-height: 1.3; }
  .navbar .suggest .meta { font-size: 12.5px; color: var(--fichi-text-secondary); }
  .navbar .suggest .price {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--store-accent-text);
    font-variant-numeric: tabular-nums;
  }
  .navbar .suggest .suggest-all { font-size: 14px; font-weight: 600; color: var(--store-accent-text); }
  /* The live region that says how many suggestions there are: read, not seen. */
  .navbar .suggest-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  /* A styled band clips what overflows it (that is how its rounded corners
     hold), and the list hangs below the bar. The band lets it out only while
     it is open. */
  .sec-band:has(.navbar .search [aria-expanded="true"]) { overflow: visible; }
  @media (max-width: 720px) {
    .navbar .suggest { max-height: 60vh; }
  }

  .hero {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
    padding: 32px 28px;
    border-radius: var(--fichi-radius-2xl);
    background: linear-gradient(135deg, var(--store-accent), var(--store-accent-strong));
    color: var(--store-accent-contrast);
    box-shadow: var(--fichi-shadow-lg);
  }
  .hero .logo {
    display: block;
    height: 48px;
    max-width: 200px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 16px;
    border-radius: var(--fichi-radius-sm);
  }
  .hero h1 {
    margin: 0;
    font-family: var(--fichi-font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 1.1;
  }
  .hero .address {
    margin: 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    opacity: 0.92;
  }
  .hero .whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 11px 20px;
    border-radius: var(--fichi-radius-full);
    background: var(--store-accent-contrast);
    /* strong, not text. This pill is INVERTED — its fill is the ink — so its
       label is scored against THAT. accent-text is lightened by the dark block
       so it reads on the page's dark ground, and on this pill that measured
       2.65:1, below even the 3:1 this file's palette decision rests on.
       accent-strong is not overridden there, and in light the two hold the
       same value, so a light store renders exactly as before. */
    color: var(--store-accent-strong);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  }
  .hero .hero-copy .whatsapp:focus-visible { outline-color: var(--store-accent-contrast); }

  .hero .subheadline {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.95;
    max-width: 46ch;
  }

  .hero.hero-showcase, .hero-slider.hero-showcase {
    max-width: none;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
  .hero.hero-showcase {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(24px, 5vw, 56px) max(16px, calc((100% - var(--store-content)) / 2));
    background: color-mix(in srgb, var(--store-accent) 12%, var(--fichi-bg-page));
    color: var(--fichi-text-primary);
    box-shadow: none;
    text-align: center;
  }
  /* On «Degradado vivo» the band is the aurora's: the tint would hide it. */
  .sec-bg-aurora > .hero.hero-showcase, .sec-bg-aurora > .hero-slider.hero-showcase .hero { background: none; }
  .hero-slider.hero-showcase .hero-track { border-radius: 0; box-shadow: none; }
  .hero-slider.hero-showcase .hero-controls { padding-inline: 16px; }
  .hero.hero-showcase .logo { margin: 0 auto 12px; object-position: center; }
  .hero-showcase .showcase-stage {
    display: grid;
    place-items: center;
    min-height: clamp(180px, 34vw, 440px);
  }
  .hero-showcase .showcase-stage > * { grid-area: 1 / 1; }
  .hero.hero-showcase .showcase-title {
    margin: 0;
    width: 100%;
    font-family: var(--fichi-font-display);
    font-size: clamp(44px, 12.5vw, 176px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    hyphens: auto;
    color: var(--store-accent-text);
  }
  @supports (-webkit-text-stroke: 1px) {
    .hero.hero-showcase .showcase-title {
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 2px var(--store-accent-text);
    }
  }
  @media (forced-colors: active) {
    .hero.hero-showcase .showcase-title { -webkit-text-fill-color: currentColor; }
  }
  /* «La foto va detrás del título»: the photo drops under the letters and the
     headline is promoted above it, so a title longer than one word stays whole.
     The outline keeps its own stroke, which is what makes it readable over a
     picture — and a little transparency (below) makes it readable over any. */
  .hero-showcase .showcase-behind .showcase-photo { z-index: 0; }
  .hero.hero-showcase .showcase-behind .showcase-title { position: relative; z-index: 1; }
  .hero-showcase .showcase-photo {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    max-width: min(78%, 520px);
    height: clamp(180px, 34vw, 440px);
    object-fit: contain;
  }
  .hero-showcase .showcase-copy {
    margin: 16px auto 0;
    max-width: 46ch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .hero.hero-showcase .subheadline, .hero.hero-showcase .address {
    margin: 0;
    max-width: none;
    color: var(--fichi-text-secondary);
    opacity: 1;
  }
  .hero.hero-showcase .subheadline { font-size: 16px; }
  .hero.hero-showcase .whatsapp {
    margin-top: 6px;
    background: linear-gradient(135deg, var(--store-accent), var(--store-accent-strong));
    color: var(--store-accent-contrast);
  }

  .hero-showcase .showcase-side {
    position: absolute;
    top: 50%;
    z-index: -1;
    width: clamp(120px, 20vw, 280px);
    aspect-ratio: 3 / 4;
    object-fit: contain;
    opacity: 0.45;
    filter: blur(4px);
    transform: translateY(-50%);
    pointer-events: none;
  }
  .hero-showcase .showcase-side-start { left: -2%; }
  .hero-showcase .showcase-side-end { right: -2%; }
  @media (max-width: 720px) {
    .hero-showcase .showcase-side { display: none; }
  }
  .hero-showcase .showcase-photo { opacity: 0.65; }
  .marquee {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
    padding: 10px 0;
    border-top: 1px solid var(--fichi-border-subtle);
    border-bottom: 1px solid var(--fichi-border-subtle);
    color: var(--fichi-text-primary);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
  }
  /* 19px bold is large text, so the strip's ink needs 3:1 on the accent's own
     fill — the floor that fill is pinned to. «Grande» only goes up from there. */
  .marquee-large { padding: 14px 0; font-size: clamp(28px, 6vw, 44px); font-weight: 800; line-height: 1.15; }
  /* At least as tall as the room the pause button takes (40px, less 4px above and below), so its arrival moves nothing. */
  .marquee-window { flex: 1 1 auto; min-width: 0; min-height: 32px; display: flex; align-items: center; overflow: hidden; }
  .marquee-list {
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 0 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    row-gap: 4px;
  }
  .marquee-item { display: inline-flex; align-items: baseline; }
  .marquee-sep { padding: 0 0.6em; color: var(--store-accent-text); }
  .marquee-list > .marquee-item:last-child > .marquee-sep { display: none; }
  .marquee-bare .marquee-list { column-gap: 1.2em; }
  .marquee-bare .marquee-group > .marquee-item { padding-right: 1.2em; }
  /* Where the script will run and move it, the list waits on one line, clipped,
     so switching to the moving copy changes nothing's height. */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .marquee-list { flex-wrap: nowrap; justify-content: flex-start; white-space: nowrap; padding: 0; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .marquee-on .marquee-list {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .marquee-on .marquee-track { animation: marquee-scroll 30s linear infinite; }
  }
  .marquee-track { display: flex; width: max-content; white-space: nowrap; }
  .marquee-group { display: flex; flex: none; align-items: baseline; }
  .marquee-right .marquee-track { animation-direction: reverse; }
  .marquee-paused .marquee-track,
  .marquee-on:not(.marquee-resumed):hover .marquee-track,
  .marquee-on:not(.marquee-resumed):focus-within .marquee-track { animation-play-state: paused; }
  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee-track, .marquee-pause { display: none !important; }
  }
  .marquee-pause {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -4px 8px -4px 0;
    padding: 0;
    border-radius: var(--fichi-radius-full);
    border: 1px solid var(--fichi-border-subtle);
    background: var(--fichi-bg-surface);
    box-shadow: var(--fichi-shadow-sm);
    color: var(--fichi-text-primary);
    cursor: pointer;
  }
  .marquee-pause[aria-pressed="true"] .icon-pause, .marquee-pause:not([aria-pressed="true"]) .icon-play { display: none; }
  .marquee-pause:focus-visible { outline: 2px solid var(--fichi-text-primary); outline-offset: 2px; border-radius: var(--fichi-radius-full); }
  .sec-bg-solid .marquee { border-color: transparent; color: var(--store-accent-contrast); }
  .sec-bg-solid .marquee-sep { color: inherit; }
  .sec-bg-solid .marquee-pause:focus-visible { outline-color: var(--store-accent-contrast); }
  .rail-head {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
  }
  .rail-head h2 {
    margin: 0;
    font-family: var(--fichi-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--fichi-text-primary);
  }
  .rail {
    max-width: var(--store-content);
    margin: var(--store-gap-inner) auto 0;
    width: calc(100% - var(--store-inset));
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .rail .rail-card {
    scroll-snap-align: start;
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    border-radius: var(--fichi-radius-lg);
    background: var(--fichi-bg-surface);
    border: 1px solid var(--fichi-border-subtle);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--fichi-shadow-sm);
  }
  .rail .rail-card img, .rail .rail-card .placeholder {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: var(--fichi-bg-muted);
  }
  .rail .rail-card .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 700;
    font-family: var(--fichi-font-display);
    color: var(--fichi-text-muted);
  }
  .rail .rail-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
  .rail .rail-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fichi-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rail .rail-price {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--store-accent-text);
    font-variant-numeric: tabular-nums;
  }
  .price, .rail-price { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .was {
    font-size: 13px;
    font-weight: 500;
    color: var(--fichi-text-muted);
    text-decoration: line-through;
  }
  .now { text-decoration: none; }
  .off {
    align-self: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
  }

  .card .media { position: relative; }
  .rail .rail-card .rail-photo { display: block; position: relative; }
  /* Selectors one step heavier than the images' own rules: the rail sizes its
     pictures with .rail .rail-card img (0,2,1), and a lighter hide lost to it —
     the second photo rendered as a block under the cover, doubling the card. */
  .card .media .alt, .rail .rail-card .alt { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .card .media .alt, .rail .rail-card .alt {
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .card:hover .media .alt, .card:focus-visible .media .alt,
    .rail .rail-card:hover .alt, .rail .rail-card:focus-visible .alt { opacity: 1; }
  }
  .promo {
    display: block;
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
    padding: 20px 28px;
    border-radius: var(--fichi-radius-xl);
    background: linear-gradient(100deg, var(--store-accent), var(--store-accent-strong));
    color: var(--store-accent-contrast);
    text-align: center;
    text-decoration: none;
    box-shadow: var(--fichi-shadow-md);
  }
  .promo .promo-title {
    display: block;
    font-family: var(--fichi-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
  .promo .promo-sub { display: block; margin-top: 4px; font-size: 14px; opacity: 0.92; }
  .cats {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
  }
  .cats h2 {
    margin: 0 0 14px;
    font-family: var(--fichi-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--fichi-text-primary);
  }
  .cats .lead, .cats .rest { display: grid; gap: 14px; }
  .cats .lead { grid-template-columns: repeat(2, 1fr); }
  .cats .rest { grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
  .cat {
    position: relative;
    display: block;
    border-radius: var(--fichi-radius-lg);
    overflow: hidden;
    background: var(--fichi-bg-muted);
    text-decoration: none;
    box-shadow: var(--fichi-shadow-sm);
    aspect-ratio: 16 / 10;
  }
  .cats .rest .cat { aspect-ratio: 4 / 5; }
  /* The whole photo, never a slice of it: an owner uploads whatever the camera
     gave them, and a square jar cropped to a wide tile read as a squashed one.
     What would be bare surface beside it is the same photo, blurred and
     filling, so the tile still looks full whatever shape arrives. */
  .cat img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
  .cat .cat-fill {
    position: absolute;
    z-index: 0;
    inset: 0;
    object-fit: cover;
    /* Scaled past its frame so the blur's own soft edge stays outside it. */
    transform: scale(1.08);
    filter: blur(8px);
  }
  .cat .fallback {
    /* display:block is load-bearing, not tidiness: a <span> is inline, and
       width/height do not apply to inline boxes — so this collapsed to nothing
       and a tile with no photo rendered as an empty pale rectangle with a
       floating label, which is what it looked like for every owner who had not
       uploaded category images yet. */
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--store-accent), var(--store-accent-strong));
  }
  .cat .cat-label {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 12px;
    right: 12px;
    padding: 8px 12px;
    border-radius: var(--fichi-radius-md);
    background: var(--fichi-bg-surface);
    color: var(--fichi-text-primary);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    box-shadow: var(--fichi-shadow-sm);
  }
  @media (max-width: 720px) {
    .cats .lead { grid-template-columns: 1fr; }
    .cats .rest { grid-template-columns: repeat(2, 1fr); }
  }
  .features {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 28px;
    align-items: start;
  }
  .features .pitch h2 {
    margin: 0 0 12px;
    font-family: var(--fichi-font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--fichi-text-primary);
  }
  .features .pitch p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--fichi-text-secondary);
    white-space: pre-line;
  }
  .features .cta {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 20px;
    border-radius: var(--fichi-radius-md);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .features .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .features .fcard {
    padding: 16px 18px;
    border-radius: var(--fichi-radius-lg);
    background: var(--fichi-bg-surface);
    border: 1px solid var(--fichi-border-subtle);
    box-shadow: var(--fichi-shadow-sm);
  }
  .features .fcard h3 {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--store-accent-text);
  }
  .features .fcard p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fichi-text-secondary); }
  @media (max-width: 720px) {
    .features { grid-template-columns: 1fr; gap: 20px; }
    .features .cards { grid-template-columns: 1fr; }
  }
  .stats {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
  }
  .stats-head { margin: 0 0 20px; text-align: center; }
  .stats-head h2 {
    margin: 0;
    font-family: var(--fichi-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--fichi-text-primary);
  }
  .stats-head p {
    margin: 6px auto 0;
    max-width: 60ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fichi-text-secondary);
  }
  .stats-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
  .stat { min-width: 0; text-align: center; }
  /* Large display type: never under 28px bold, which is what holds it to the
     large-text contrast floor on «Color sólido». The final figure and the
     script's counting copy share one grid cell, so the cell keeps the final
     width while the copy counts. */
  .stat-value {
    display: inline-grid;
    max-width: 100%;
    font-size: clamp(28px, 7.2vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    color: var(--store-accent-text);
    overflow-wrap: anywhere;
  }
  .stat-value > * { grid-area: 1 / 1; }
  .stat-value.counting > .stat-final { opacity: 0; }
  .stat-label {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--fichi-text-secondary);
    overflow-wrap: anywhere;
  }
  @media (min-width: 721px) {
    .stats-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  /* Over the 12% tint the raw accent shade drops below 4.5:1 for three accents;
     a step toward the primary ink keeps every one above it. */
  .sec-bg-soft .stat-value { color: color-mix(in oklab, var(--store-accent-text) 80%, var(--fichi-text-primary)); }
  .sec-bg-solid .stat-value,
  .sec-bg-solid .stats-head h2,
  .sec-bg-solid .stats-head p,
  .sec-bg-solid .stat-label { color: var(--store-accent-contrast); }
  .rail-head {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
  }
  .rail-head h2 {
    margin: 0;
    font-family: var(--fichi-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--fichi-text-primary);
  }
  .rail {
    max-width: var(--store-content);
    margin: var(--store-gap-inner) auto 0;
    width: calc(100% - var(--store-inset));
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .rail .rail-card {
    scroll-snap-align: start;
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    border-radius: var(--fichi-radius-lg);
    background: var(--fichi-bg-surface);
    border: 1px solid var(--fichi-border-subtle);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--fichi-shadow-sm);
  }
  .rail .rail-card img, .rail .rail-card .placeholder {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: var(--fichi-bg-muted);
  }
  .rail .rail-card .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 700;
    font-family: var(--fichi-font-display);
    color: var(--fichi-text-muted);
  }
  .rail .rail-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
  .rail .rail-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fichi-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rail .rail-price {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--store-accent-text);
    font-variant-numeric: tabular-nums;
  }
  .price, .rail-price { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .was {
    font-size: 13px;
    font-weight: 500;
    color: var(--fichi-text-muted);
    text-decoration: line-through;
  }
  .now { text-decoration: none; }
  .off {
    align-self: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
  }
  .rail.rail-badge-photo .rail-card { position: relative; }
  .rail.rail-badge-photo .rail-price .off {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 6px;
    border-radius: var(--fichi-radius-full);
    font-size: 12.5px;
    font-weight: 800;
    box-shadow: var(--fichi-shadow-sm);
  }

  .card .media { position: relative; }
  .rail .rail-card .rail-photo { display: block; position: relative; }
  /* Selectors one step heavier than the images' own rules: the rail sizes its
     pictures with .rail .rail-card img (0,2,1), and a lighter hide lost to it —
     the second photo rendered as a block under the cover, doubling the card. */
  .card .media .alt, .rail .rail-card .alt { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .card .media .alt, .rail .rail-card .alt {
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .card:hover .media .alt, .card:focus-visible .media .alt,
    .rail .rail-card:hover .alt, .rail .rail-card:focus-visible .alt { opacity: 1; }
  }
  .steps {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
  }
  .steps-head { margin: 0 0 20px; }
  .steps-head h2 {
    margin: 0;
    font-family: var(--fichi-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--fichi-text-primary);
  }
  .steps-head p {
    margin: 6px 0 0;
    max-width: 64ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fichi-text-secondary);
  }
  /* A column first: a phone always stacks, and «Horizontal» lines the steps up
     only where there is room for a row. */
  .steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
  /* align-content: start — a step in a row is stretched to the tallest one, and
     without it that height is shared out between its rows, pushing a shorter
     step's title below its neighbours'. */
  .step {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    align-content: start;
  }
  .step-marker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--fichi-radius-full);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
  }
  /* 19px bold is large text: the accent's contrast ink clears that floor on its fill. */
  .step-num { font-size: 19px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
  .step-marker svg { width: 22px; height: 22px; }
  .step-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--store-accent);
    border-radius: var(--fichi-radius-full);
    background: var(--fichi-bg-surface);
    color: var(--fichi-text-primary);
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
  }
  /* The line to the next step: decoration, drawn from under this marker to the next one. */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 52px;
    bottom: -14px;
    width: 2px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--store-accent) 35%, transparent);
  }
  .step-body { min-width: 0; overflow-wrap: anywhere; }
  .step-title {
    margin: 10px 0 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fichi-text-primary);
  }
  .step-text { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--fichi-text-secondary); }
  @media (min-width: 721px) {
    .steps-horizontal .steps-list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; }
    .steps-horizontal .step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .steps-horizontal .step-title { margin-top: 12px; }
    .steps-horizontal .step:not(:last-child)::after {
      left: calc(50% + 30px);
      top: 21px;
      bottom: auto;
      width: calc(100% - 40px);
      height: 2px;
    }
  }
  /* On the accent's own fill the marker inverts, like the hero's and the CTA's pills. */
  .sec-bg-solid .step-marker { background: var(--store-accent-contrast); color: var(--store-accent-strong); }
  .sec-bg-solid .step:not(:last-child)::after { background: color-mix(in srgb, var(--store-accent-contrast) 45%, transparent); }
  .sec-bg-solid .steps-head h2,
  .sec-bg-solid .steps-head p,
  .sec-bg-solid .step-title,
  .sec-bg-solid .step-text { color: var(--store-accent-contrast); }
  .quotes {
    margin: var(--store-gap) 0 0;
    padding: 30px 0 34px;
    background: color-mix(in srgb, var(--store-accent) 12%, var(--fichi-bg-page));
  }
  .quotes h2 {
    max-width: var(--store-content);
    margin: 0 auto 18px;
    width: calc(100% - var(--store-inset));
    text-align: center;
    font-family: var(--fichi-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--fichi-text-primary);
  }
  .quotes .qrail {
    max-width: var(--store-content);
    margin: 0 auto;
    width: calc(100% - var(--store-inset));
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .quotes .qrail:focus-visible { outline: 2px solid var(--fichi-text-primary); outline-offset: 2px; }
  .quotes .quote {
    scroll-snap-align: center;
    flex: 0 0 min(420px, 82%);
    margin: 0;
    padding: 20px 22px;
    border-radius: var(--fichi-radius-xl);
    background: var(--fichi-bg-surface);
    border: 1px solid var(--fichi-border-subtle);
    box-shadow: var(--fichi-shadow-sm);
    text-align: center;
  }
  .quotes .qmark { color: var(--store-accent); display: block; margin: 0 auto 8px; }
  .quotes .qtext {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fichi-text-secondary);
    font-style: italic;
  }
  .quotes figcaption { margin-top: 12px; font-size: 13px; color: var(--fichi-text-primary); font-weight: 600; }
  .quotes .qplace { display: block; font-weight: 400; color: var(--fichi-text-muted); font-size: 12.5px; }
  .quotes .qavatar {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: var(--fichi-radius-full);
    object-fit: cover;
    background: var(--fichi-bg-muted);
  }
  .shop-footer {
    margin-top: 40px;
    padding: 32px 24px 12px;
    background: color-mix(in srgb, var(--store-accent) 16%, var(--fichi-bg-page));
  }
  .shop-footer .inner {
    max-width: var(--store-content);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 28px 40px;
    justify-content: space-between;
  }
  /* The shop's own block takes the room the link columns leave: one column of
     links used to sit alone at the left of a band that was otherwise empty. */
  .shop-footer .shop { flex: 1 1 240px; max-width: 360px; }
  .shop-footer .shop-name {
    margin: 0 0 8px;
    font-family: var(--fichi-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--fichi-text-primary);
  }
  .shop-footer .shop-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fichi-text-secondary);
  }
  .shop-footer .shop-line svg { flex-shrink: 0; margin-top: 2px; }
  .shop-footer a.shop-line { color: var(--store-accent-text); font-weight: 500; }
  /* The layout's «Tienda creada con Rachi» line comes right after <main> on
     every page. Left alone under this tinted band it sat on the page
     background and read as a second, unrelated footer. Only when this footer
     is the LAST thing in <main> and not boxed by a section style does it make
     sense to pull the line in — a boxed footer is a card, and a tinted strip
     under a card would be the same mistake the other way round. */
  main:has(> .shop-footer:last-child) ~ .fichi-footer {
    margin-top: 0;
    flex-grow: 1;
    padding: 14px 24px 22px;
    background: color-mix(in srgb, var(--store-accent) 16%, var(--fichi-bg-page));
    border-top: 1px solid color-mix(in srgb, var(--store-accent) 28%, transparent);
    /* The layout paints this line in the muted ink, which is fine on the page
       background and measures 3.94:1 on the tint (axe, light theme). The
       band's own links are the secondary ink on the same tint and pass. */
    color: var(--fichi-text-secondary);
  }
  main:has(> .shop-footer:last-child) ~ .fichi-footer strong { color: var(--fichi-text-primary); }
  main:has(> .shop-footer:last-child) > .shop-footer { padding-bottom: 24px; }
  .shop-footer h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fichi-text-primary);
  }
  .shop-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .shop-footer a { font-size: 13px; color: var(--fichi-text-secondary); text-decoration: none; }
  .shop-footer a:hover { color: var(--store-accent-strong); }
  .shop-footer .social { display: flex; gap: 10px; }
  .shop-footer .social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--fichi-radius-full);
    background: var(--fichi-bg-surface);
    color: var(--store-accent-text);
    box-shadow: var(--fichi-shadow-sm);
  }
  .sec { margin: 0; }
  .sec-band {
    max-width: 992px;
    margin: 16px auto 0;
    width: calc(100% - 16px);
    padding: 8px 0 24px;
    overflow: hidden;
  }
  .sec-bg-card { background: var(--fichi-bg-surface); border: 1px solid var(--fichi-border-subtle); box-shadow: var(--fichi-shadow-sm); border-radius: var(--fichi-radius-xl); }
  .sec-bg-soft { background: color-mix(in srgb, var(--store-accent) 12%, var(--fichi-bg-page)); }
  .sec-bg-solid { background: linear-gradient(120deg, var(--store-accent), var(--store-accent-strong)); }
  .sec-bg-solid, .sec-bg-solid h1, .sec-bg-solid h2, .sec-bg-solid h3, .sec-bg-solid p { color: var(--store-accent-contrast); }
  .sec-r-none { border-radius: 0; }
  .sec-r-soft { border-radius: var(--fichi-radius-xl); }
  .sec-r-round { border-radius: var(--fichi-radius-2xl); }
  .sec-sp-compact { padding-top: 0; padding-bottom: 8px; }
  .sec-sp-compact > * { margin-top: 8px; }
  .sec-sp-spacious { padding-top: 28px; padding-bottom: 44px; }
  .sec-bg-aurora-bold {
    position: relative;
    isolation: isolate;
    max-width: none;
    width: 100%;
    margin-top: 0;
    --store-aurora-accent-text: var(--store-accent-text);
    --store-aurora-fade-top: min(140px, 30%);
    --store-aurora-fade-bottom: min(140px, 30%);
  }
  .sec-bg-aurora-bold > * {
    --fichi-text-secondary: var(--fichi-text-primary);
    --fichi-text-muted: var(--fichi-text-primary);
    --store-accent-text: color-mix(in oklab, var(--store-aurora-accent-text) 60%, var(--fichi-text-primary));
  }
  .sec-bg-aurora-bold::before {
    content: "";
    position: absolute;
    inset: 0 -4vw;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(farthest-side at 50% 0%, color-mix(in srgb, var(--store-accent) 24%, transparent), transparent) left 6% top 0 / min(80vw, 1000px) min(26vw, 340px, 50%) no-repeat,
      radial-gradient(farthest-side at 50% 0%, color-mix(in srgb, color-mix(in oklch longer hue, var(--store-accent), var(--store-accent) 66.667%) 16%, transparent), transparent) right 4% top 0 / min(64vw, 800px) min(22vw, 300px, 50%) no-repeat,
      radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--store-accent) 24%, transparent), transparent) left 6% bottom 0 / min(80vw, 1000px) min(26vw, 340px, 50%) no-repeat,
      radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, color-mix(in oklch longer hue, var(--store-accent), var(--store-accent) 66.667%) 16%, transparent), transparent) right 4% bottom 0 / min(64vw, 800px) min(22vw, 300px, 50%) no-repeat,
      radial-gradient(closest-side, color-mix(in srgb, color-mix(in oklch longer hue, var(--store-accent), var(--store-accent) 83.333%) 8%, transparent), transparent) left 58% top 50% / min(60vw, 760px) min(72%, 560px) no-repeat;
    -webkit-mask-image: linear-gradient(transparent, black var(--store-aurora-fade-top), black calc(100% - var(--store-aurora-fade-bottom)), transparent);
    mask-image: linear-gradient(transparent, black var(--store-aurora-fade-top), black calc(100% - var(--store-aurora-fade-bottom)), transparent);
  }
  @supports selector(:has(+ *)) {
    .sec-bg-aurora-bold + .sec-bg-aurora-bold { --store-aurora-fade-top: 0px; }
    .sec-bg-aurora-bold:has(+ .sec-bg-aurora-bold) { --store-aurora-fade-bottom: 0px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .sec-bg-aurora-bold::before { animation: sec-aurora-bold-drift 44s ease-in-out infinite alternate; }
  }
  @keyframes sec-aurora-bold-drift {
    from { transform: translate3d(-3vw, 0, 0); }
    to { transform: translate3d(3vw, 0, 0); }
  }

  .rail-controls {
    max-width: var(--store-content);
    margin: 12px auto 0;
    width: calc(100% - var(--store-inset));
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .rail-controls[hidden], .rail-controls [hidden] { display: none !important; }
  @media (scripting: none) {
    .rail-controls { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rail-controls-auto { display: none; }
  }
  .rail-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--fichi-radius-full);
    border: 1px solid var(--fichi-border-subtle);
    background: var(--fichi-bg-surface);
    box-shadow: var(--fichi-shadow-sm);
    color: var(--fichi-text-primary);
    cursor: pointer;
  }
  .rail-controls .rail-pause[aria-pressed="true"] .icon-pause,
  .rail-controls .rail-pause:not([aria-pressed="true"]) .icon-play { display: none; }
  .rail-controls button:focus-visible { outline: 2px solid var(--fichi-text-primary); outline-offset: 2px; }
  .sec-bg-solid .rail-controls button:focus-visible { outline-color: var(--store-accent-contrast); }
  .sec-bg-solid .quotes .rail-controls button:focus-visible { outline-color: var(--fichi-text-primary); }
  .rail-controls .rail-prev svg { transform: rotate(90deg); }
  .rail-controls .rail-next svg { transform: rotate(-90deg); }
  .rail-controls button[aria-disabled="true"] { opacity: 0.45; box-shadow: none; cursor: default; }

  .sec-al-center .rail-head, .sec-al-center .promo, .sec-al-center .cats > h2, .sec-al-center .features > .pitch, .sec-al-center .steps > .steps-head, .sec-al-center .stats > .stats-head, .sec-al-center .quotes > h2 { text-align: center; }
  .sec-al-center .steps > .steps-head > p, .sec-al-center .stats > .stats-head > p { margin-inline: auto; }
:is(.buy .whatsapp,.catalog-none .ask,.contact .whatsapp,.countdown-cta,.facets-apply,.features .cta,.fp-card .fp-cta,.fp-card .fp-whatsapp,.hero.hero-showcase .whatsapp,.imgtext .imgtext-cta,.package .package-cta,.pay-link,.request button,.cta .cta-btn,.hero .whatsapp,.cell .add,.video-cta,.buy .to-cart,.datecheck .dc-go,.buy .back-link,.cart-coupon-apply,.cart-items .qty button,.contact .directions,.filters-open,.locations .location-directions,.pay-copy,.ba-frame .ba-handle,.hero-controls .hero-next,.hero-controls .hero-pause,.hero-controls .hero-prev,.marquee-pause,.navbar .nav-toggle,.photos .lightbox .ph-close,.rail-controls button,.theme-toggle,.to-top.to-top-float,.topbar .back,.cart-send,.wa-fab){border-radius:var(--fichi-radius-full)}.card .media img,.card .media .placeholder,.rail .rail-card img,.rail .rail-card .placeholder{aspect-ratio:4 / 5}
  .to-top-target:focus { outline: none; }
  .fichi-footer .to-top { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: 0 auto 6px; }
  .fichi-footer .to-top svg { width: 14px; height: 14px; flex: none; }
  .to-top.to-top-float {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 39;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--fichi-border-default);
    border-radius: var(--fichi-radius-full);
    background: var(--fichi-bg-surface);
    color: var(--fichi-text-primary);
    box-shadow: var(--fichi-shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, visibility 0s linear 160ms;
  }
  .to-top.to-top-float.to-top-on { opacity: 1; visibility: visible; transition: opacity 160ms ease; }
  .to-top.to-top-float svg { width: 20px; height: 20px; }
  .to-top.to-top-float .to-top-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }