:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

  /* Fuentes auto-alojadas desde el propio dominio (Fase 8, 16/10) — antes se cargaban por
     @import desde fonts.googleapis.com. El playbook prefiere servir todo desde el propio
     dominio; además simplifica la CSP (ya no hace falta permitir fonts.googleapis.com /
     fonts.gstatic.com). Subset "latin" (cubre español: á é í ó ú ñ ü están en Latin-1). */
  @font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/archivo-black-400.woff2') format('woff2'); }
  @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/archivo-400.woff2') format('woff2'); }
  @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/archivo-500.woff2') format('woff2'); }
  @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/archivo-600.woff2') format('woff2'); }
  @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/archivo-700.woff2') format('woff2'); }
  @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/archivo-800.woff2') format('woff2'); }
  @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/space-mono-400.woff2') format('woff2'); }
  @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/space-mono-700.woff2') format('woff2'); }

  :root {
    --paper: #efece6;
    --paper-raised: #f7f5f1;
    --ink: #17140d;
    --ink-soft: #5c5645;
    /* --ink-faint oscurecido de #948d78 a #6b6450 (fase 7, 16/10): el original daba 2.81:1
       sobre --paper, por debajo de AA (4.5:1) en texto normal — se usa en SKU, pie de
       página, contador de carrito vacío, etc. Ahora da 5:1 manteniendo el mismo tono. */
    --ink-faint: #6b6450;
    --citrus: #ff4d1c;
    /* --citrus-text: variante oscurecida de --citrus solo para TEXTO sobre fondo claro
       (mensajes de error, enlaces, tabla de tallas) — el --citrus original (2.81:1 sobre
       --paper) se queda igual para fondos/bordes/hover, donde no aplica la regla de
       contraste de texto. Fase 7, 16/10. */
    --citrus-text: #c2360a;
    --citrus-ink: #fff0e6;
    --lime: #b9cc2e;
    --lime-ink: #f3f6df;
    --line: #e2dac6;
    --line-strong: #c9bfa2;
    --focus: #17140d;
    --shadow: rgba(23, 20, 13, 0.12);
    --panel: #4a3222;
  }

  :root[data-theme="dark"] {
    --paper: #15130e;
    --paper-raised: #1e1b14;
    --ink: #f3efe2;
    --ink-soft: #bdb49b;
    --ink-faint: #756d58;
    --citrus: #ff6a3d;
    --citrus-ink: #2c1810;
    --lime: #c9dc4c;
    --lime-ink: #23260f;
    --line: #322d21;
    --line-strong: #494131;
    --focus: #f3efe2;
    --shadow: rgba(0, 0, 0, 0.4);
  }

  * { box-sizing: border-box; }

  /* Enlace "saltar al contenido": invisible hasta que se navega con teclado (Tab).
     Requisito básico de accesibilidad para usuarios de teclado/lector de pantalla. */
  .skip-link {
    position: absolute;
    top: -999px;
    left: 0.75rem;
    z-index: 999;
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1.2rem;
    border-radius: 0 0 10px 10px;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
  }
  .skip-link:focus-visible {
    top: 0;
  }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Archivo', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  img, svg { max-width: 100%; display: block; }

  a { color: inherit; }

  .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
  }

  .mono {
    font-family: 'Space Mono', ui-monospace, monospace;
  }

  .eyebrow {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .display {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  /* ---------- nav ---------- */
  header.site {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }

  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 0;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .logo {
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
  }
  .logo span { color: var(--citrus); }

  .logo-link {
    display: inline-flex;
    text-decoration: none;
    border-radius: 10px;
    flex-shrink: 0;
  }
  .logo-link:focus-visible {
    outline: 2px solid var(--citrus);
    outline-offset: 2px;
  }

  .logo-badge {
    background: #ffffff;
    border-radius: 10px;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    line-height: 0;
  }
  .logo-badge img {
    height: 38px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
  }
  footer .logo-badge img { height: 30px; }

  .navlinks {
    display: flex;
    gap: clamp(1rem, 3vw, 2.2rem);
    font-size: 0.85rem;
    font-weight: 600;
  }
  .navlinks a {
    text-decoration: none;
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
  }
  .navlinks a:hover, .navlinks a:focus-visible { border-color: var(--citrus); }

  .navlinks .mono { display: none; }
  @media (min-width: 640px) { .navlinks .mono { display: inline; color: var(--ink-faint); font-weight: 400; } }

  /* En móvil estrecho, el logo (protegido con flex-shrink:0, fase 7 — 16/10) ya no absorbe
     el hueco que falta, así que el propio nav pasa a dos líneas: logo arriba, enlaces +
     carrito en su propia fila con todo el ancho disponible. */
  @media (max-width: 560px) {
    .navlinks { flex-basis: 100%; justify-content: space-between; gap: 0.6rem 0.9rem; }
  }

  .drops-menu { position: relative; }
  .drops-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0.3rem 0;
    font: inherit;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ink);
    cursor: pointer;
    border-bottom: 2px solid transparent;
  }
  .drops-trigger:hover, .drops-trigger:focus-visible { border-color: var(--citrus); }
  .drops-trigger .caret { font-size: 0.65em; transition: transform 0.2s ease; }
  .drops-menu.is-open .drops-trigger .caret { transform: rotate(180deg); }

  .drops-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 220px;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.5rem;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 16%, transparent);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 30;
  }
  .drops-menu.is-open .drops-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .drops-panel a {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
  }
  .drops-panel a:hover, .drops-panel a:focus-visible { background: color-mix(in srgb, var(--citrus) 12%, transparent); }
  .drops-panel .drop-tag {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .drops-panel .drop-name { font-weight: 700; font-size: 0.92rem; }

  /* ---------- cart ---------- */
  .cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink);
    border-bottom: 2px solid transparent;
  }
  .cart-btn:hover, .cart-btn:focus-visible { color: var(--citrus); border-color: var(--citrus); }
  .cart-btn svg { width: 21px; height: 21px; display: block; }
  /* Objetivo táctil de 44px en móvil (fase 7, control de calidad) — el icono interior
     se queda igual, solo crece el área pulsable alrededor. */
  @media (max-width: 560px) {
    .cart-btn { width: 44px; height: 44px; margin: -5px -5px -5px 0; flex-shrink: 0; }
  }
  .cart-badge {
    position: absolute;
    top: -4px; right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--citrus);
    color: #1c0d05;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .cart-badge[hidden] { display: none; }

  .cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(23, 20, 13, 0.45);
    z-index: 110;
    display: flex;
    justify-content: flex-end;
  }
  .cart-overlay[hidden] { display: none; }

  .cart-drawer {
    width: min(420px, 100%);
    height: 100%;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    box-shadow: -14px 0 34px rgba(0,0,0,0.2);
  }
  .cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.3rem;
    border-bottom: 1px solid var(--line);
  }
  .cart-head h3 {
    margin: 0;
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    font-size: 1.05rem;
  }
  .cart-close {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .cart-close:hover { border-color: var(--citrus); color: var(--citrus); }

  .cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem 1.3rem;
  }
  .cart-empty {
    color: var(--ink-faint);
    font-size: 0.9rem;
    padding: 2rem 0;
    text-align: center;
  }
  .cart-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
  }
  .cart-line-thumb {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
  }
  .cart-line-name { font-weight: 700; font-size: 0.92rem; }
  .cart-line-variant {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--ink-soft);
    margin-top: 0.2rem;
  }
  .cart-line-price { font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
  .cart-line-remove {
    background: none;
    border: none;
    color: var(--ink-faint);
    font-size: 0.76rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.3rem 0 0;
  }
  .cart-line-remove:hover { color: var(--citrus); }

  .cart-foot {
    padding: 1.1rem 1.3rem 1.4rem;
    border-top: 1px solid var(--line);
  }
  .cart-total-row {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
  }
  .cart-note {
    font-size: 0.76rem;
    color: var(--ink-soft);
    line-height: 1.4;
    margin: 0 0 0.9rem;
  }
  .cart-checkout-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.9rem;
    border-radius: 999px;
    box-sizing: border-box;
  }
  .cart-clear {
    display: block;
    text-align: center;
    margin-top: 0.7rem;
    background: none;
    border: none;
    color: var(--ink-faint);
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
  }
  .cart-clear:hover { color: var(--citrus); }

  /* ---------- hero ---------- */
  .hero {
    padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--line);
  }

  .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    margin-bottom: 1.6rem;
  }
  .hero-tag .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--citrus);
    box-shadow: 0 0 0 3px var(--citrus-ink);
  }

  .hero h1 {
    margin: 0;
    font-size: clamp(2.6rem, 8.2vw, 6.4rem);
  }
  .hero h1 .accent { color: var(--citrus); }

  /* 26/10 (ronda 3): .hero-grid y ".hero p.lede" eran del layout VIEJO del hero (columna
     de texto + columna de imagen, con fondo papel claro) — desde el 26/10 el hero usa una
     foto de fondo y el subtítulo real es .hero-lede-short (texto claro + sombra, ver más
     abajo). ".hero p.lede" ya no se usaba en el HTML, pero por especificidad (clase + clase
     + elemento, más específico que ".hero-lede-short" sola) seguía ganando el color oscuro
     "--ink-soft" sobre el subtítulo, dejándolo casi ilegible sobre la foto — bug reportado
     por Iker. Se retira este bloque muerto para que gane la regla correcta. */

  .btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
  }
  .btn-primary {
    background: var(--ink);
    color: var(--paper);
    padding: 0.95rem 1.7rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .btn-primary:hover { background: var(--citrus); }
  .btn-primary:active { transform: scale(0.97); }
  .btn-primary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

  .hero-visual {
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    border: 1px solid var(--line-strong);
    background: var(--paper-raised);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
  .hero-visual .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .hero-visual .cap {
    position: absolute;
    top: 1rem; left: 1rem;
    font-size: 0.68rem;
    z-index: 2;
    background: color-mix(in srgb, var(--paper-raised) 78%, transparent);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
  }
  .hero-visual .cap-b {
    position: absolute;
    top: 1rem; right: 1rem;
    font-size: 0.68rem;
    text-align: right;
    z-index: 2;
    background: color-mix(in srgb, var(--paper-raised) 78%, transparent);
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
  }
  .hero-visual {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .hero-visual:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px var(--shadow);
  }
  .hero-visual:hover .hero-img {
    transform: scale(1.03);
  }
  .hero-visual .hero-img {
    transition: transform 0.35s ease;
  }
  .hero-visual .hero-caption {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--paper-raised);
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
    display: flex;
    justify-content: space-between;
  }

  /* ---------- section shell ---------- */
  section { padding: clamp(3rem, 7vw, 5rem) 0; border-bottom: 1px solid var(--line); }
  section:last-of-type { border-bottom: none; }

  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
    flex-wrap: wrap;
  }
  .section-head h2 {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    margin: 0.3rem 0 0;
  }

  /* ---------- drop grid ---------- */
  .drop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.4rem;
  }

  .cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.6rem 0 1.8rem;
  }
  .cat-filter-btn {
    appearance: none;
    cursor: pointer;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink-soft);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .cat-filter-btn:hover { border-color: var(--ink); color: var(--ink); }
  .cat-filter-btn.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .cat-filter-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  /* 26/10 (ronda 3): distingue visualmente el filtro especial "Novedades en reserva" de
     las categorías normales (mismo verde que la insignia "Reserva" de Nuevos Productos). */
  .cat-filter-btn--reserve { border-color: var(--lime); color: color-mix(in srgb, var(--lime) 55%, var(--ink)); }
  .cat-filter-btn--reserve:hover { border-color: var(--lime); }
  .cat-filter-btn--reserve.active { background: var(--lime); border-color: var(--lime); color: #1c2405; }

  .cat-empty {
    border: 1px dashed var(--line-strong);
    border-radius: 18px;
    padding: 2rem;
    text-align: center;
    color: var(--ink-soft);
    margin-bottom: 1.8rem;
  }
  .cat-empty p { margin: 0; font-size: 0.95rem; }
  .cat-empty a { color: var(--citrus-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

  .piece {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper-raised);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .piece[hidden] { display: none; }

  .piece-art {
    aspect-ratio: 1 / 1.05;
    position: relative;
    overflow: hidden;
  }
  .piece-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .piece-status {
    position: absolute;
    top: 0.7rem; left: 0.7rem;
    font-size: 0.62rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: var(--lime);
    color: #1c2405;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .piece-status.permanent {
    background: var(--citrus);
    color: var(--citrus-ink);
  }

  .piece-info {
    padding: 1rem 1.1rem 1.2rem;
    border-top: 1px solid var(--line);
  }
  .piece-info h3 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    text-transform: none;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
  }
  .piece-info .sku {
    font-size: 0.72rem;
    color: var(--ink-faint);
  }
  .piece-info .price {
    margin-top: 0.6rem;
    font-weight: 700;
  }

  .swatches {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.7rem;
  }
  .swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--sw);
    cursor: pointer;
    padding: 0;
  }
  .swatch.active {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  .swatch:focus-visible { outline: 2px solid var(--citrus); outline-offset: 2px; }

  .buy-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
  }
  .mini-btn {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.55rem 0.7rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
  }
  .mini-btn.reserve {
    background: var(--ink);
    color: var(--paper);
  }
  .mini-btn.reserve:hover { background: var(--citrus); }
  .mini-btn.card-buy {
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    cursor: not-allowed;
  }
  .mini-btn.card-buy.ready {
    border-color: var(--citrus);
    color: var(--ink);
    cursor: pointer;
  }
  .mini-btn.card-buy.ready:hover { background: var(--citrus-ink); }

  /* ---------- categories ---------- */
  .cat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
  }
  .cat-cell {
    appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    padding: 1.6rem 1.4rem;
    border: none;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper-raised);
    position: relative;
    transition: background 0.15s ease;
  }
  .cat-cell:hover, .cat-cell:focus-visible {
    background: color-mix(in srgb, var(--ink) 6%, var(--paper-raised));
  }
  .cat-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .cat-cell:last-child { border-right: none; }
  .cat-cell .eyebrow { margin-bottom: 0.5rem; }
  .cat-cell h3 { margin: 0; font-size: 1.15rem; font-family: 'Archivo Black'; text-transform: uppercase; }
  .cat-cell .soon { color: var(--ink-faint); font-size: 0.8rem; }
  .cat-cell .cat-arrow {
    position: absolute;
    top: 1.5rem;
    right: 1.2rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    color: var(--ink-faint);
    font-size: 0.9rem;
  }
  .cat-cell:hover .cat-arrow, .cat-cell:focus-visible .cat-arrow {
    opacity: 1;
    transform: translateX(0);
  }
  .cat-strip-foot {
    margin-top: 0.9rem;
    font-size: 0.8rem;
    color: var(--ink-faint);
  }

  /* ---------- next drop teaser ---------- */
  .next-drop {
    margin-top: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.3rem 1.6rem;
    border-radius: 18px;
    background: var(--panel);
    color: var(--paper);
  }
  .next-drop .eyebrow { color: color-mix(in srgb, var(--paper) 65%, transparent); }
  .next-drop h3 {
    margin: 0.25rem 0 0;
    font-family: 'Archivo Black';
    font-size: 1.25rem;
    letter-spacing: 0.01em;
  }
  /* 26/10: la temática del Drop 002 todavía no está cerrada — se difumina el nombre/descr.
     en vez de mostrar el nombre de trabajo "Junk Food", que podría cambiar. La versión
     accesible (.sr-only) explica lo mismo sin depender de ver el blur. */
  .next-drop-blur {
    filter: blur(6px);
    user-select: none;
    opacity: 0.8;
  }
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .next-drop-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--paper) 75%, transparent);
  }
  .loading-dots { display: inline-flex; gap: 4px; }
  .loading-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--citrus);
    display: inline-block;
    animation: loadingPulse 1.1s ease-in-out infinite;
  }
  .loading-dots i:nth-child(2) { animation-delay: 0.15s; }
  .loading-dots i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes loadingPulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
  }

  /* ---------- about ---------- */
  .about {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  @media (max-width: 780px) { .about { grid-template-columns: 1fr; } }
  .about p { color: var(--ink-soft); line-height: 1.7; font-size: 1.02rem; }
  .about p + p { margin-top: 1.1rem; }
  .stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
  }
  .stat {
    border-top: 2px solid var(--ink);
    padding-top: 0.6rem;
  }
  .stat b { font-family: 'Archivo Black'; font-size: 1.6rem; display: block; }
  .stat span { font-size: 0.78rem; color: var(--ink-faint); }

  /* ---------- waitlist ---------- */
  .waitlist {
    background: var(--panel);
    color: var(--paper);
    border-radius: 24px;
    padding: clamp(2rem, 6vw, 3.4rem);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: center;
  }
  @media (max-width: 780px) { .waitlist { grid-template-columns: 1fr; } }
  .waitlist h2 { margin: 0.4rem 0 0.9rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
  .waitlist p { color: color-mix(in srgb, var(--paper) 70%, transparent); max-width: 40ch; }
  .waitlist .eyebrow { color: color-mix(in srgb, var(--paper) 65%, transparent); }

  /* 26/10 (ronda 3): carrusel de categorías para "¿Qué talla elijo?".
     26/10 (ronda 4): Iker pidió mover las flechas de fuera de la caja a encima de su borde
     (mitad dentro, mitad fuera) y que la etiqueta de categoría (Camisetas/Sudaderas) se note
     más al llegar a la sección. .sg-table-wrap pasa a ser una tarjeta propia, algo más clara
     que el panel oscuro de fondo, para que se note dónde está "el borde" sobre el que flotan
     las flechas; .sg-carousel ya no reparte espacio en fila (eso era lo que se veía
     "apelmazado" en móvil) sino que solo centra esa tarjeta y le da sitio alrededor para que
     las flechas, con position:absolute, no se corten. */
  /* min-width:0 es necesario aquí: .sg-carousel es un item directo del grid de .waitlist, y
     con white-space:nowrap en las celdas de la tabla (fix de ronda 4 para que "57.8 cm" no
     se parta en dos líneas), el ancho mínimo de contenido de la tabla crece lo suficiente
     como para que, sin este override, el propio track del grid se agrande para acomodarlo y
     toda la sección se desborde por la derecha — aunque .sg-table-wrap ya tenga
     overflow-x:auto, ese overflow solo "contiene" el desbordamiento si esta cadena no se lo
     impide antes a nivel de grid. */
  .sg-carousel { position: relative; padding: 0 20px; min-width: 0; }
  .sg-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
    background: var(--panel);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .sg-arrow-prev { left: -18px; }
  .sg-arrow-next { right: -18px; }
  .sg-arrow:hover, .sg-arrow:focus-visible { background: var(--citrus); border-color: var(--citrus); color: var(--citrus-ink); }
  .sg-arrow:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .sg-cat-label {
    display: block;
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    letter-spacing: 0.01em;
    color: var(--citrus);
    margin-bottom: 0.7rem;
  }
  .sg-table-wrap {
    overflow-x: auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--paper) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
    border-radius: 18px;
    padding: 1.3rem 1.3rem 1.1rem;
  }
  .sg-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.86rem;
  }
  .sg-table th, .sg-table td {
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
    color: var(--paper);
    white-space: nowrap;
  }
  .sg-table th {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--paper) 65%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
  }
  .sg-table td:first-child, .sg-table th:first-child { font-weight: 700; color: var(--citrus); }
  .sg-note {
    font-size: 0.76rem;
    color: color-mix(in srgb, var(--paper) 55%, transparent);
    margin: 0.9rem 0 0;
    line-height: 1.45;
  }
  .order-mini-block { margin-top: 1.4rem; }

  .wl-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .wl-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
  .wl-row input[type="email"] {
    flex: 1 1 220px;
    padding: 0.9rem 1.1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
    background: color-mix(in srgb, var(--paper) 8%, transparent);
    color: var(--paper);
    font-family: 'Archivo', sans-serif;
    font-size: 0.95rem;
  }
  .wl-row input[type="email"]::placeholder { color: color-mix(in srgb, var(--paper) 55%, transparent); }
  .wl-row input[type="email"]:focus-visible { outline: 2px solid var(--citrus); outline-offset: 2px; }
  .wl-row .btn-primary {
    background: var(--citrus);
    color: #1c0d05;
  }
  .wl-row .btn-primary:hover { background: color-mix(in srgb, var(--citrus) 82%, black); color: #1c0d05; }
  .wl-note { font-size: 0.76rem; color: color-mix(in srgb, var(--paper) 55%, transparent); }
  .wl-status { font-size: 0.85rem; min-height: 1.2em; font-weight: 600; }
  /* Mensajes de estado del formulario de lista de espera: colores ajustados para contraste
     AA (fase 7, 16/10) — los tokens de fondo/acento originales no llegaban a 4.5:1 en texto
     de este tamaño sobre --paper. */
  .wl-status.ok { color: #5c6a13; }
  .wl-status.err { color: var(--citrus-text); }

  #ordProduct option,
  #ordColor option,
  #ordSize option {
    color: var(--ink);
    background: var(--paper-raised);
  }

  /* ---------- footer ---------- */
  footer {
    padding: 2.2rem 0 3rem;
  }
  .foot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .socials { display: flex; gap: 0.9rem; }
  .socials a {
    width: 38px; height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
  }
  .socials a:hover { border-color: var(--citrus); color: var(--citrus); }
  .foot-fine { color: var(--ink-faint); font-size: 0.78rem; margin-top: 1.2rem; }
  .foot-legal { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
  .foot-legal a { color: var(--ink-faint); font-size: 0.78rem; text-decoration: none; }
  .foot-legal a:hover, .foot-legal a:focus-visible { color: var(--citrus-text); text-decoration: underline; }

  .foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 780px) {
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .foot-grid { grid-template-columns: 1fr; }
  }
  .foot-brand .logo-badge { margin-bottom: 0.9rem; }
  .foot-tagline { color: var(--ink-soft); font-size: 0.88rem; max-width: 30ch; margin: 0 0 1.1rem; }
  .foot-col h4 {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 0.9rem;
  }
  .foot-col { display: flex; flex-direction: column; gap: 0.6rem; }
  .foot-col a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.15s ease;
  }
  .foot-col a:hover { color: var(--citrus); }

  /* ---------- back to top ---------- */
  .back-to-top {
    position: fixed;
    bottom: 1.6rem;
    right: 1.6rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 22px var(--shadow);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
    z-index: 50;
  }
  .back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .back-to-top:hover { background: var(--citrus); }
  .back-to-top:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  @media (max-width: 640px) {
    .back-to-top { bottom: 1.1rem; right: 1.1rem; width: 42px; height: 42px; }
  }

  /* ---------- clickable product art ---------- */
  .piece-art {
    cursor: pointer;
  }
  .piece-art::after {
    content: 'Ver producto';
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.6rem 0.7rem 0.65rem;
    text-align: center;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
  }
  .piece-art:hover::after,
  .piece-art:focus-visible::after {
    opacity: 1;
  }

  /* ---------- modal ---------- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(23, 20, 13, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    z-index: 100;
  }
  .modal-overlay[hidden] { display: none; }

  .modal-box {
    background: var(--paper);
    border-radius: 22px;
    max-width: 920px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
  }
  .modal-box-narrow {
    max-width: 560px;
    padding: 1.4rem;
  }
  .modal-box-narrow img { border-radius: 12px; }

  .size-guide-title {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin: 0 1.6rem 0.5rem 0;
  }
  .size-guide-intro {
    font-size: 0.86rem;
    color: var(--ink-soft);
    margin: 0 0 1rem;
    line-height: 1.45;
  }
  .size-table-wrap { overflow-x: auto; }
  .size-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.86rem;
  }
  .size-table th, .size-table td {
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--line);
  }
  .size-table th {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line-strong);
  }
  .size-table td:first-child, .size-table th:first-child { font-weight: 700; color: var(--citrus-text); }
  .size-guide-note {
    font-size: 0.76rem;
    color: var(--ink-faint);
    margin: 0.9rem 0 0;
    line-height: 1.45;
  }

  .modal-close {
    position: absolute;
    top: 0.9rem; right: 0.9rem;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
  }
  .modal-close:hover { border-color: var(--citrus); color: var(--citrus); }

  .modal-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
  }
  @media (max-width: 700px) { .modal-grid { grid-template-columns: 1fr; } }

  .modal-gallery {
    background: var(--paper-raised);
    padding: 1.4rem;
    border-radius: 22px 0 0 22px;
  }
  @media (max-width: 700px) { .modal-gallery { border-radius: 22px 22px 0 0; } }

  .modal-main-img-wrap {
    aspect-ratio: 1 / 1.05;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper);
  }
  .modal-main-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
  }

  .modal-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.8rem;
  }
  .modal-thumb {
    width: 56px; height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    background: var(--paper);
  }
  .modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .modal-thumb.active { border-color: var(--ink); }

  .modal-info {
    padding: 2rem 1.8rem;
    display: flex;
    flex-direction: column;
  }
  .modal-info .sku { font-size: 0.75rem; color: var(--ink-faint); }
  .modal-info h3 {
    margin: 0.2rem 0 0.4rem;
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 1.05;
  }
  .modal-info .price { font-weight: 700; font-size: 1.1rem; margin-bottom: 1.2rem; }

  .modal-field { margin-bottom: 1rem; }
  .modal-field label {
    display: block;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.45rem;
  }
  .modal-field select {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    font-family: 'Archivo', sans-serif;
    font-size: 0.95rem;
  }

  .qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    overflow: hidden;
  }
  .qty-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: var(--paper);
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
  }
  .qty-btn:hover { background: var(--citrus); color: var(--citrus-ink); }
  .qty-btn:disabled { opacity: 0.35; cursor: not-allowed; background: var(--paper); color: var(--ink); }
  .qty-stepper input {
    width: 44px;
    height: 38px;
    border: none;
    border-left: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong);
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--paper);
    -moz-appearance: textfield;
  }
  .qty-stepper input::-webkit-outer-spin-button,
  .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .cart-line-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
  }
  .cart-line-qty .qty-btn { width: 26px; height: 26px; font-size: 0.9rem; }
  .cart-line-qty span { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.8rem; min-width: 1.2em; text-align: center; }

  .size-guide-link {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    margin: -0.2rem 0 1.2rem;
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .size-guide-link:hover { color: var(--citrus-text); }

  .modal-info .buy-row { margin-top: auto; }
  .modal-info .mini-btn { font-size: 0.85rem; padding: 0.75rem 0.9rem; }
  .modal-hint {
    font-size: 0.76rem;
    color: var(--citrus-text);
    margin: -0.6rem 0 0.9rem;
    min-height: 1em;
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  /* ==================== 21st.dev-inspired: cinematic scroll reveal + product reveal card ====================
     Adaptado a vanilla CSS/JS de:
     - "Cinematic Product Scroll Section" (@Loomix, 21st.dev) -> revelado escalonado al hacer scroll
     - "Product Reveal Card" (@isaiahbjork, 21st.dev) -> overlay de color+precio en hover/tap
     Usa la paleta y tipografías YA existentes en esta página (papel/tinta/cítrico/lima, Archivo/Space Mono). */

  #coleccion .section-head > div .eyebrow,
  #coleccion .section-head > div h2.display,
  #coleccion .section-head > p {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.16, 0.84, 0.32, 1);
  }
  #coleccion.reveal-in .section-head > div .eyebrow { opacity: 1; transform: none; }
  #coleccion.reveal-in .section-head > div h2.display { opacity: 1; transform: none; transition-delay: 0.1s; }
  #coleccion.reveal-in .section-head > p { opacity: 1; transform: none; transition-delay: 0.2s; }

  .piece {
    opacity: 0;
    transform: translateY(38px) scale(0.98);
    transition: opacity 0.9s cubic-bezier(0.16, 0.84, 0.32, 1), transform 0.9s cubic-bezier(0.16, 0.84, 0.32, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
  .piece.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .piece-img {
    filter: grayscale(1) brightness(0.92);
    transform: scale(1.09);
    transition: filter 1.15s cubic-bezier(0.16, 0.84, 0.32, 1), transform 0.7s cubic-bezier(0.16, 0.84, 0.32, 1);
  }
  .piece.in-view .piece-img { filter: grayscale(0) brightness(1); transform: scale(1); }
  .piece-art:hover .piece-img,
  .piece-art.touched .piece-img { transform: scale(1.055); }

  .piece-art::after { content: none; }

  .piece-reveal {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 1.8rem 0.85rem 0.9rem;
    background: linear-gradient(to top, rgba(23,20,13,0.86) 0%, rgba(23,20,13,0.5) 60%, rgba(23,20,13,0) 100%);
    color: #f7f5f1;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 0.84, 0.32, 1);
    pointer-events: none;
  }
  .piece-art:hover .piece-reveal,
  .piece-art.touched .piece-reveal,
  .piece-art:focus-visible .piece-reveal {
    opacity: 1;
    transform: translateY(0);
  }
  .piece-reveal-info { display: flex; flex-direction: column; gap: 0.2rem; }
  .piece-reveal-color {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
  }
  .piece-reveal-price {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
  }
  .piece-reveal-cta {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-self: flex-end;
    opacity: 0.85;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    .piece, .piece-img, .piece-reveal,
    #coleccion .section-head > div .eyebrow,
    #coleccion .section-head > div h2.display,
    #coleccion .section-head > p {
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }
  }

  /* ==================== 21st.dev-inspired: Minimalist Hero Fashion (@kokonutd) ====================
     Adaptado a vanilla CSS/JS: micro-movimiento sutil al cargar la página en el hero,
     más un indicador de scroll animado que invita a bajar hacia la colección. */

  .hero .hero-tag,
  .hero h1.display,
  .hero .hero-grid > div:first-child,
  .hero .hero-visual {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition: opacity 1s cubic-bezier(0.16, 0.84, 0.32, 1), transform 1s cubic-bezier(0.16, 0.84, 0.32, 1);
  }
  .hero.hero-ready .hero-tag { opacity: 1; transform: none; transition-delay: 0.02s; }
  .hero.hero-ready h1.display { opacity: 1; transform: none; transition-delay: 0.16s; }
  .hero.hero-ready .hero-grid > div:first-child { opacity: 1; transform: none; transition-delay: 0.36s; }
  .hero.hero-ready .hero-visual { opacity: 1; transform: none; transition-delay: 0.26s; }

  /* ==================== Hero: entrada mas dramatica + parallax/tilt ligado al scroll ====================
     Peticion de Iker: que la zona de portada (donde se promociona la coleccion) tenga
     "algo de tipo scroll o movimiento mas fluido, mas realista". Dos capas, sin tocar la
     entrada ya existente del resto del hero (tag, titulo, columna izquierda):
       1) Entrada de la imagen amplificada (antes: mismo translateY+scale sutil que el resto
          del hero; ahora: escala mayor + rotacion leve + desenfoque que se resuelve),
          inspirada en el patron "heroImageIn" (scale+rotate+blur -> nitido) de referencias
          tipo Aceternity UI / Motion Sites.
       2) Parallax/tilt 3D continuo mientras se hace scroll por el hero, aplicado via JS
          (hero_scroll_js.js) directamente sobre .hero-visual-wrap con requestAnimationFrame,
          solo transform (translate3d + rotateX/rotateY + scale), nunca layout. */

  
  /* Mascota animada del corazon en el hero (30/09 -> 01/10/2026, reposicionada el 01/10/2026
     por segunda vez a peticion de Iker -- su diseno, colores y animaciones NO se tocan aqui,
     solo donde vive dentro del layout).
     Esto es una ilustracion ORIGINAL dibujada a mano en SVG, inspirada en el corazon del
     logo de la marca (ojos saltones, lengua fuera, guante blanco) pero reinterpretada con su
     propia pose y proporciones -- nunca el archivo del logo pegado tal cual.
     Posicionamiento (v2): el primer intento la colocaba como item de grid superpuesto a la
     columna de texto, lo que dejaba un hueco variable entre el corazon y el texto segun la
     altura de la tarjeta. Iker pidio en concreto: la tarjeta de producto a la derecha del
     corazon (sin tocar donde esta el corazon) y el texto/CTA justo debajo del corazon.
     Ahora el corazon es simplemente el primer elemento, en flujo normal, dentro de
     .hero-left-stack (columna 1 de .hero-grid), centrado con margin:auto, y el bloque de
     texto/CTA le sigue justo debajo en el mismo flujo -- sin grid ni trucos de superposicion.
     Animaciones solo con transform/opacity (nunca filter), respetando "reducir movimiento".

     Ajuste del brazo que saluda (01/10/2026, misma tanda que el cambio de precios): la mano
     del brazo que saluda (el del grupo .hero-mascot-wave, SVG) quedaba casi tapada por el
     propio relleno del corazon -- el corazon se dibuja DESPUES del brazo en el SVG, asi que
     tapa cualquier parte del brazo que caiga dentro de su silueta, y la mano caia casi
     entera dentro del lobulo derecho. Primer intento: se alargo la curva del brazo y se
     desplazo la mano (circulo + dedos) mas hacia la derecha -- de cx=158 a cx=184. Resulto
     insuficiente (Iker lo reporto el 02/10/2026): con cx=184 la mano solo libraba el borde
     del corazon por ~6px y la mayor parte del antebrazo seguia por detras del lobulo
     derecho, dando la sensacion de que el brazo saluda "por detras de la cabeza".

     Segundo ajuste (02/10/2026): se recalculo la curva de Bezier del lobulo derecho del
     corazon (su borde exterior maximo esta en x=176, y=72) para que la mano y buena parte
     del antebrazo queden con un margen comparable al del brazo quieto de la izquierda
     (que libra el borde del corazon por ~26px en su mano). Nueva curva del brazo:
     de "M138,96 Q172,75 184,34" a "M138,96 Q186,66 194,26"; mano de cx=184,cy=34 a
     cx=194,cy=26 (mismo radio r=15); dedos reposicionados con el mismo offset relativo a
     la mano que antes. El tramo cercano al hombro sigue quedando oculto bajo el relleno
     del corazon a proposito (igual que en el brazo quieto), ya que es el punto de anclaje;
     lo que cambia es que ahora, a partir de mas o menos la mitad de la curva, el brazo ya
     libra el borde del corazon en cualquier fotograma de la animacion de saludo (incluso
     en el giro mas extremo de -16 grados), y la mano queda con un margen de entre +17 y
     +40px segun el fotograma -- igual o mejor que el brazo quieto. No se ha tocado la
     forma, el color, ni la posicion del propio corazon, ni la logica del click (is-hit) --
     solo las coordenadas de ese brazo (curva, mano y dedos). */

  .hero-mascot {
    width: clamp(120px, 15vw, 210px);
    margin: 0 auto 1.4rem;
    cursor: pointer;
    pointer-events: auto;
    animation: heroMascotBob 3.4s ease-in-out infinite;
    transform-origin: 50% 88%;
    filter: drop-shadow(0 14px 18px rgba(23, 20, 13, 0.22));
  }
  .hero-mascot:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 6px;
    border-radius: 50%;
  }
  .hero-mascot-svg { display: block; width: 100%; height: auto; overflow: visible; }

  @keyframes heroMascotBob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-9px) rotate(4deg); }
  }

  .hero-mascot-eye {
    animation: heroMascotBlink 4.6s ease-in-out infinite;
    transform-origin: center;
  }
  .hero-mascot-eye-r { animation-delay: 0.06s; }
  @keyframes heroMascotBlink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.12); }
  }

  .hero-mascot-wave {
    animation: heroMascotWave 2.4s ease-in-out infinite;
    transform-origin: 148px 96px;
  }
  @keyframes heroMascotWave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-16deg); }
    50% { transform: rotate(4deg); }
    75% { transform: rotate(-10deg); }
  }

  .hero-mascot-tongue {
    animation: heroMascotTongue 3.4s ease-in-out infinite;
    transform-origin: 100px 128px;
  }
  @keyframes heroMascotTongue {
    0%, 85%, 100% { transform: translateY(0); }
    92% { transform: translateY(2px); }
  }

  /* Reaccion al click: a peticion de Iker, al pulsar el corazon le salen los ojos en X y
     la boca de "ouch" durante un momento y luego vuelve solo a su cara normal (saludando
     en todo momento, el brazo nunca deja de moverse). */
  .hero-mascot-face-hit { opacity: 0; transition: opacity 0.08s linear; }
  .hero-mascot-face-normal { transition: opacity 0.08s linear; }
  .hero-mascot.is-hit .hero-mascot-face-normal { opacity: 0; }
  .hero-mascot.is-hit .hero-mascot-face-hit { opacity: 1; }
  .hero-mascot.is-hit .hero-mascot-svg { animation: heroMascotPulse 0.4s ease; }
  @keyframes heroMascotPulse {
    0% { transform: scale(1, 1); }
    35% { transform: scale(0.88, 1.12); }
    65% { transform: scale(1.06, 0.94); }
    100% { transform: scale(1, 1); }
  }

  @media (max-width: 780px) {
    .hero-mascot { width: clamp(96px, 28vw, 150px); margin-bottom: 1rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-mascot,
    .hero-mascot-eye,
    .hero-mascot-wave,
    .hero-mascot-tongue,
    .hero-mascot.is-hit .hero-mascot-svg {
      animation: none;
    }
  }

  /* Columna izquierda del hero: corazon arriba, texto/CTA justo debajo, siempre pegada
     arriba de la fila (el contenedor .hero-grid alinea abajo por defecto -- este bloque
     se ancla arriba para que el corazon se quede donde Iker lo quiere, cerca del titular). */
  .hero-left-stack { align-self: start; }

  /* Tarjeta de producto un poco mas pequena y pegada a la derecha, para que quepa mejor
     junto al corazon + texto ahora que ocupan menos alto (peticion de Iker, 01/10/2026). */
  .hero-visual-wrap { max-width: 380px; margin-inline-start: auto; }
  @media (max-width: 780px) {
    .hero-visual-wrap { max-width: 320px; margin-inline: auto; }
  }


  .hero-visual-wrap {
    position: relative;
    will-change: transform;
  }

  /* Entrada de la imagen: mas dramatica que la del resto del hero (que usa translateY+scale sutil).
     Solo transform + opacity (nunca filter/blur: es una propiedad cara de animar, sobre todo
     sobre una imagen grande, y puede provocar tirones/jank -- se anima solo lo que el
     compositor puede mover sin repintar, tal y como pide la guia de animacion que seguimos). */
  .hero .hero-visual-wrap .hero-visual {
    opacity: 0;
    transform: scale(1.16) rotate(1.6deg) translateY(22px);
    transition: opacity 1.15s cubic-bezier(0.16, 0.84, 0.32, 1),
                transform 1.15s cubic-bezier(0.16, 0.84, 0.32, 1);
  }
  .hero.hero-ready .hero-visual-wrap .hero-visual {
    opacity: 1;
    transform: none;
    transition-delay: 0.24s;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-visual-wrap { transform: none !important; }
    .hero .hero-visual-wrap .hero-visual {
      transform: none !important;
      transition: opacity 0.4s ease !important;
    }
  }

  @media (max-width: 900px) {
    /* En movil el parallax de scroll se desactiva desde JS; nos aseguramos ademas de
       que ninguna transformacion residual quede aplicada por CSS. */
    .hero-visual-wrap { transform: none !important; }
  }


  .hero-scroll-cue {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Archivo', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin: clamp(2.2rem, 6vw, 3.6rem) auto 0;
    padding: 0.4rem;
    /* 26/10 (ronda 3): igual que el subtítulo del hero, esto vivía con --ink-soft (pensado
       para el fondo papel claro de antes), que sobre la foto de fondo actual resultaba casi
       ilegible — bug reportado por Iker ("ver novedades" en negro). Texto claro + sombra,
       mismo criterio que .hero-lede-short. */
    color: #f1ece0;
    text-shadow: 0 1px 10px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 0.84, 0.32, 1), color 0.15s ease;
  }
  .hero.hero-ready .hero-scroll-cue { opacity: 1; transform: none; transition-delay: 0.62s; }
  .hero-scroll-cue:hover,
  .hero-scroll-cue:focus-visible { color: var(--citrus); }
  .hero-scroll-cue:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

  .hero-scroll-line {
    width: 1px;
    height: 34px;
    background: color-mix(in srgb, #f1ece0 55%, transparent);
    position: relative;
    overflow: hidden;
  }
  .hero-scroll-light {
    position: absolute;
    inset-inline: 0;
    top: -40%;
    height: 40%;
    background: linear-gradient(to bottom, transparent, var(--citrus), transparent);
    animation: heroScrollLight 2s ease-in-out infinite;
  }
  .hero-scroll-label {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  @keyframes heroScrollLight {
    0% { top: -40%; }
    100% { top: 100%; }
  }

  /* ==================== 21st.dev-inspired: fondo animado del hero ====================
     Tras valorar las opciones de 21st.dev (shaders WebGL tipo "Grain Gradient" / "Mesh
     Gradient" / "Neural Noise", casi todos en paletas neón moradas/azules típicas de SaaS,
     y "Paper Texture" de @paper-design, pensado justo para fondos de hero con grano sutil),
     se ha optado por una adaptación 100% CSS —sin canvas ni WebGL— de esa misma idea
     (grano de papel + gradiente animado), pero con la paleta propia de la marca
     (cítrico, lima, papel) en vez de colores genéricos: encaja con la identidad editorial
     y "de papel" que ya tiene la página, pesa prácticamente nada y no depende de librerías. */

  .hero { position: relative; overflow: hidden; }
  .hero > .wrap { position: relative; z-index: 1; }

  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
    /* 24/10: sustituye las 3 manchas difuminadas (citrus/lime/paper) por un
       degradado direccional único "atardecer de papel" — opción A elegida
       por Iker de las 3 propuestas. Mismo grano de papel por encima (sin tocar). */
    background: linear-gradient(158deg, var(--paper) 0%, var(--paper) 36%, #ffd3a3 64%, var(--citrus) 100%);
  }
  .hero.hero-ready .hero-bg { opacity: 1; }
  :root[data-theme="dark"] .hero-bg {
    background: linear-gradient(158deg, var(--paper) 0%, var(--paper) 38%, #4a2614 66%, var(--citrus) 100%);
  }

  /* Manchas difuminadas (citrus/lime/paper) retiradas del fondo del hero (24/10) —
     se deja la regla en display:none en vez de borrar los spans del HTML, para no
     tener que tocar también index.html por un cambio que es solo de estilo. */
  .hero-blob {
    display: none;
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    mix-blend-mode: multiply;
    will-change: transform;
  }
  :root[data-theme="dark"] .hero-blob { mix-blend-mode: screen; opacity: 0.3; }

  .hero-blob-citrus {
    width: 46vw; height: 46vw;
    max-width: 620px; max-height: 620px;
    background: var(--citrus);
    top: -16%; left: -10%;
    animation: heroBlobDriftA 22s ease-in-out infinite;
  }
  .hero-blob-lime {
    width: 38vw; height: 38vw;
    max-width: 520px; max-height: 520px;
    background: var(--lime);
    bottom: -20%; right: -8%;
    animation: heroBlobDriftB 26s ease-in-out infinite;
  }
  .hero-blob-paper {
    width: 30vw; height: 30vw;
    max-width: 420px; max-height: 420px;
    background: var(--line-strong);
    top: 28%; left: 54%;
    opacity: 0.32;
    animation: heroBlobDriftC 30s ease-in-out infinite;
  }

  @keyframes heroBlobDriftA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(4vw, 3vh) scale(1.08); }
  }
  @keyframes heroBlobDriftB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-3vw, -4vh) scale(1.1); }
  }
  @keyframes heroBlobDriftC {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-5vw, 3vh) scale(0.94); }
  }

  .hero-grain {
    position: absolute;
    inset: -10%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
    opacity: 0.05;
    animation: heroGrainShift 1s steps(4) infinite;
  }
  :root[data-theme="dark"] .hero-grain { opacity: 0.08; }

  @keyframes heroGrainShift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-2%, 1%); }
    50% { transform: translate(1%, -2%); }
    75% { transform: translate(-1%, 2%); }
    100% { transform: translate(0, 0); }
  }

    /* ==================== "Frutas volando" v2: banner mas grande y con profundidad ====================
     Rediseño tras feedback: frutas bastante mas grandes, campo mas alto que envuelve el propio titulo
     "Fruit Collection" (una capa de frutas detras del texto, otra capa por delante, para dar sensacion
     de profundidad real), trayectorias en arco (no solo una linea recta) y una entrada tipo "estallido"
     la primera vez que se revela. Sigue siendo 100% SVG propio, sin imagenes de terceros. */

  /* 26/10: banner a sangre completa (full-bleed) — vive fuera de .wrap, como hijo directo
     de <section id="coleccion">, así ocupa el 100% del ancho de la pantalla en vez de
     quedarse encajado dentro del ancho máximo de 1180px. #coleccion pierde su padding-top
     para que el banner quede pegado al borde superior de la sección, sin hueco. Se añade
     un tinte de fondo suave (--paper-raised → --citrus-ink) para que, al no tener ninguna
     imagen de fondo propia, siga leyéndose como una franja/banner y no como texto flotando
     sobre la página. Pedido de Iker (26/10): más estrecho que antes para reducir scroll. */
  #coleccion { padding-top: 0; }

  .fruit-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: clamp(170px, 22vw, 280px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--citrus) 7%, var(--paper-raised)) 0%, var(--paper) 100%);
    border-bottom: 1px solid var(--line);
    margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
  }

  .fruit-flight {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.7s ease;
    z-index: 0;
  }
  #coleccion.reveal-in .fruit-flight { opacity: 1; }

  .fruit-hero > .wrap {
    position: relative;
    z-index: 2;
    padding-top: clamp(1.4rem, 5vw, 2.4rem);
    padding-bottom: clamp(1.1rem, 3vw, 1.8rem);
    margin-bottom: 0;
  }

  .fruit-item {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--fs, 80px);
    height: var(--fs, 80px);
    z-index: var(--fz, 1);
    transform: translate3d(-24vw, 0, 0) rotate(var(--fr0, 0deg)) scale(0.3);
    filter: drop-shadow(0 14px 22px rgba(23, 20, 13, var(--fshadow, 0.2)));
    opacity: var(--fop, 1);
    /* El avance horizontal, el rebote vertical y el empuje del cursor ahora los controla
       un bucle requestAnimationFrame (ver "Fisica reutilizable de banners de iconos" en el
       script). La animacion CSS solo se encarga de la aparicion inicial (fade/scale in). */
    animation: fruitBurst 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
    animation-delay: var(--fburst, 0s);
    animation-play-state: paused;
    will-change: transform;
  }
  #coleccion.reveal-in .fruit-item {
    animation-play-state: running;
  }

  .fruit-item--front { z-index: 3; }
  .fruit-item--back { z-index: 1; }

  .fruit-item svg { display: block; width: 100%; height: 100%; }

  @keyframes fruitBurst {
    0% { opacity: 0; }
    1% { opacity: var(--fop, 1); }
    100% { opacity: var(--fop, 1); }
  }

  /* Trayectoria en arco: dos jorobas (no una linea recta), con mas rotacion para sensacion de vuelo real */
  @keyframes fruitFly {
    0% {
      transform: translate3d(-24vw, 0, 0) rotate(var(--fr0, 0deg)) scale(var(--fscale, 1));
    }
    28% {
      transform: translate3d(18vw, var(--fbob1, -46px), 0) rotate(var(--fr1, 130deg)) scale(var(--fscale, 1));
    }
    55% {
      transform: translate3d(58vw, var(--fbob2, 34px), 0) rotate(var(--fr2, 230deg)) scale(var(--fscale, 1));
    }
    80% {
      transform: translate3d(96vw, var(--fbob1, -46px), 0) rotate(var(--fr3, 300deg)) scale(var(--fscale, 1));
    }
    100% {
      transform: translate3d(126vw, 0, 0) rotate(var(--fr4, 380deg)) scale(var(--fscale, 1));
    }
  }

  /* A petición de Iker: las frutas nunca se paran, ni al pasar el cursor por encima.
     Se mueven en todo momento (solo se detienen si el sistema pide "reducir movimiento"). */

  @media (prefers-reduced-motion: reduce) {
    .fruit-hero { min-height: 0; padding-top: 0; }
    .fruit-flight { opacity: 1; }
    .fruit-item {
      animation: none !important;
      transform: translate3d(6vw, 0, 0) rotate(0deg) scale(var(--fscale, 1)) !important;
      opacity: var(--fop, 1) !important;
    }
  }

  @media (max-width: 640px) {
    .fruit-hero { min-height: clamp(190px, 62vw, 280px); }
  }

  
  /* ==================== Pasada general de movimiento: resto de secciones ====================
     Reveal generico al hacer scroll para las secciones que aun no tenian animacion (Categorias,
     La marca, listas de espera / reserva). Mismo lenguaje visual que el resto del sitio (fade +
     translateY, curva ease-out marcada), aplicado via una sola clase reutilizable y activado por
     un IntersectionObserver compartido. No toca la logica ya existente de #coleccion. */

  .reveal-block {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s cubic-bezier(0.16, 0.84, 0.32, 1), transform 0.85s cubic-bezier(0.16, 0.84, 0.32, 1);
    transition-delay: var(--reveal-stagger, 0s);
  }
  .reveal-block.revealed {
    opacity: 1;
    transform: none;
  }

  /* Cat-strip: las tarjetas de categoria entran una a una */
  .cat-strip .cat-cell.reveal-block {
    transform: translateY(22px) scale(0.97);
  }
  .cat-strip .cat-cell.reveal-block.revealed {
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal-block,
    .cat-strip .cat-cell.reveal-block {
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }

  
  /* ---------- Urban Studios Collection: banner ----------
     Actualizado 16/10 (ronda 2): el texto va SUPERPUESTO sobre la foto (banner real), no
     apilado encima — así el bloque ocupa menos alto y los primeros productos se ven sin
     hacer scroll al entrar en la pestaña. El banner de iconos a la deriva (.urban-flight/
     .urban-item) se deja intacto pero sin usarse (populateUrbanFlight() ya no se llama). */
  /* 26/10: mismo tratamiento a sangre completa que .fruit-hero — vive fuera de .wrap, como
     hijo directo de <section id="urbanCollection">, sin radio de borde ni sombra de tarjeta
     (ya no es una tarjeta flotante, es una franja de ancho completo). Más estrecho que antes
     (min-height reducido) a petición de Iker, para que quepa todo de un vistazo. */
  #urbanCollection { padding-top: 0; }
  .urban-hero { position: relative; overflow: hidden; width: 100%; min-height: clamp(190px, 24vw, 320px); display: flex; flex-direction: column; justify-content: flex-start; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); border-bottom: 1px solid var(--line); }
  .urban-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
  .urban-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.32) 42%, rgba(255,255,255,0) 72%); }
  .urban-flight { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.7s ease; z-index: 0; }
  #urbanCollection.reveal-in .urban-flight { opacity: 1; }
  .urban-hero > .wrap { position: relative; z-index: 2; color: #17140d; text-shadow: 0 1px 2px rgba(255,255,255,0.75), 0 3px 16px rgba(255,255,255,0.45); padding-top: clamp(1.4rem, 5vw, 2.4rem); padding-bottom: clamp(1.1rem, 3vw, 1.8rem); margin-bottom: 0; }
  .urban-hero .eyebrow { color: #17140d; }
  .urban-hero p a#backToFruitLink { color: #17140d; }
  .urban-item { position: absolute; left: 0; top: 0; width: var(--fs, 80px); height: var(--fs, 80px); z-index: var(--fz, 1); transform: translate3d(-24vw, 0, 0) rotate(var(--fr0, 0deg)) scale(0.3); filter: drop-shadow(0 14px 22px rgba(23, 20, 13, var(--fshadow, 0.2))); opacity: var(--fop, 1); animation: fruitBurst 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1; animation-delay: var(--fburst, 0s); animation-play-state: paused; will-change: transform; }
  #urbanCollection.reveal-in .urban-item { animation-play-state: running; }
  .urban-item--front { z-index: 3; }
  .urban-item--back { z-index: 1; }
  .urban-item svg { display: block; width: 100%; height: 100%; }
  @media (prefers-reduced-motion: reduce) {
    .urban-flight { opacity: 1; }
    .urban-item { animation: none !important; transform: translate3d(6vw, 0, 0) rotate(0deg) scale(var(--fscale, 1)) !important; opacity: var(--fop, 1) !important; }
  }
  @media (max-width: 640px) { .urban-hero { min-height: clamp(180px, 50vw, 260px); } }
  #urbanCollection.reveal-in .section-head > div .eyebrow { opacity: 1; transform: none; }
  #urbanCollection.reveal-in .section-head > div h2.display { opacity: 1; transform: none; transition-delay: 0.1s; }
  #urbanCollection.reveal-in .section-head > p { opacity: 1; transform: none; transition-delay: 0.2s; }



  /* ==================== Rediseño 26/10: ticker, nav, hero con foto, Best Sellers, Todos
     los productos, Drop 2 difuminado ==================== */

  /* ---------- ticker superior ---------- */
  .ticker-bar {
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    white-space: nowrap;
  }
  .ticker-track {
    display: flex;
    width: max-content;
    animation: tickerScroll 26s linear infinite;
  }
  .ticker-seq {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.5rem 0;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .ticker-seq span { padding: 0 0.9rem; }
  .ticker-dot { color: var(--citrus); padding: 0 0.9rem; }
  @keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
  }

  /* ---------- nav de 3 columnas (logo centrado) ---------- */
  .nav-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1rem;
    padding: 0.9rem 0;
  }
  .nav-left {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2.4vw, 1.8rem);
    min-width: 0;
  }
  .nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.7rem, 2vw, 1.2rem);
    min-width: 0;
  }
  .nav-link {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .nav-link:hover, .nav-link:focus-visible { border-color: var(--citrus); }

  .logo-link-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 10px;
  }
  .logo-link-center:focus-visible { outline: 2px solid var(--citrus); outline-offset: 2px; }
  /* 26/10 (ronda 2): Iker mandó el logo completo (corazón + wordmark "URBAN studios"),
     sin fondo, para usar directamente en vez del icono de corazón solo que había antes.
     Más alto que un logo de una sola línea porque lleva dos renglones de texto debajo del
     corazón — si no, el wordmark queda demasiado pequeño para leerse. */
  .logo-heart-icon { height: 52px; width: auto; display: block; }
  @media (max-width: 560px) {
    .logo-heart-icon { height: 42px; }
  }

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink);
    border-bottom: 2px solid transparent;
    flex-shrink: 0;
  }
  .icon-btn:hover, .icon-btn:focus-visible { color: var(--citrus); border-color: var(--citrus); }
  .icon-btn svg { width: 20px; height: 20px; display: block; }

  .lang-switch {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.74rem;
    flex-shrink: 0;
  }
  .lang-sep { color: var(--line-strong); }
  .lang-btn {
    background: none;
    border: none;
    padding: 0.2rem 0.15rem;
    cursor: pointer;
    color: var(--ink-faint);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
  }
  .lang-btn.active { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .lang-btn:hover, .lang-btn:focus-visible { color: var(--citrus); }

  /* hamburguesa (móvil) */
  .menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
  .menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.4rem 0 1.1rem;
    border-top: 1px solid var(--line);
    margin-top: 0.4rem;
  }
  .mobile-menu-link {
    padding: 0.7rem 0.2rem;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--line);
  }
  /* 26/10 (ronda 3): separadores "Productos" / "Drops" dentro del menú móvil, mismo
     estilo que el eyebrow de "Idioma" que ya existía ahí abajo. */
  .mobile-menu-group {
    padding: 0.9rem 0.2rem 0.2rem;
    display: block;
  }
  .mobile-menu-lang {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 0.2rem 0.2rem;
  }
  .mobile-menu-lang .lang-btn { font-size: 0.85rem; }

  /* 26/10 (ronda 4): en móvil los triggers "Productos" y "Drops" de la barra (.drops-menu,
     usados por #dropsMenu y #collectionsMenu) se quedaban visibles junto al hamburguesa,
     solapando el logo centrado — y su desplegable, anclado con right:0 a un contenedor
     estrecho cerca del borde izquierdo, se abría hacia fuera del viewport. El menú
     hamburguesa (.mobile-menu) ya contiene exactamente las mismas opciones (Productos +
     categorías, Drops, Sobre nosotros, Reserva), así que en móvil basta con ocultar estos
     dos triggers del todo y dejar el hamburguesa como único punto de entrada a la nav. */
  @media (max-width: 880px) {
    .navlink-desktop { display: none; }
    .drops-menu { display: none; }
    .menu-toggle { display: flex; }
  }
  @media (min-width: 881px) {
    .mobile-menu { display: none !important; }
  }

  /* ---------- panel de búsqueda (desliza desde la derecha) ---------- */
  .search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(23, 20, 13, 0.45);
    z-index: 60;
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .search-overlay.is-open { opacity: 1; }
  .search-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    background: var(--paper);
    z-index: 61;
    box-shadow: -14px 0 34px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.16, 0.84, 0.32, 1);
    display: flex;
    flex-direction: column;
  }
  .search-panel.is-open { transform: translateX(0); }
  .search-panel-inner { display: flex; flex-direction: column; height: 100%; }
  .search-panel-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.3rem 1.2rem;
    border-bottom: 1px solid var(--line);
  }
  .search-panel-icon { width: 18px; height: 18px; color: var(--ink-faint); flex-shrink: 0; }
  .search-panel-head input {
    flex: 1;
    border: none;
    background: none;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    outline: none;
  }
  .search-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-faint);
    font-size: 1rem;
    padding: 0.2rem;
  }
  .search-panel-close:hover { color: var(--citrus); }
  .search-results { flex: 1; overflow-y: auto; padding: 0.6rem 1.2rem 1.4rem; }
  .search-hint { color: var(--ink-faint); font-size: 0.86rem; padding: 1rem 0; }
  .search-result {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    text-align: left;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    cursor: pointer;
  }
  .search-result-img-wrap {
    width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: 6px; overflow: hidden;
    background: var(--paper-raised);
    border: 1px solid var(--line);
  }
  .search-result-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .search-result-info { display: flex; flex-direction: column; gap: 0.15rem; }
  .search-result-name { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
  .search-result-price { font-size: 0.8rem; color: var(--ink-faint); }
  .search-result:hover .search-result-name { color: var(--citrus); }

  /* ---------- aviso flotante (toast) ---------- */
  .us-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 12px);
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1.2rem;
    border-radius: 999px;
    font-size: 0.82rem;
    box-shadow: 0 10px 28px rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 200;
    max-width: 90vw;
    text-align: center;
  }
  .us-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

  /* ---------- hero: foto real en vez de degradado naranja, más corto ---------- */
  .hero-bg-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  /* 26/10 (ronda 5): carrusel de 3 fotos de fondo del hero, foto estática unos
     segundos y la siguiente entra empujando a la actual hacia la izquierda —
     pedido de Iker. Transform en vez de cambiar "left/right" para que la
     animación vaya por GPU y no provoque tirones. Lógica de cambio de foto en
     app.js (busca "hero-bg-slide"). */
  .hero-bg-slide {
    transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
    z-index: 1;
  }
  .hero-bg-slide.pos-active { transform: translateX(0); z-index: 2; }
  .hero-bg-slide.pos-right { transform: translateX(100%); }
  .hero-bg-slide.pos-left { transform: translateX(-100%); }
  .hero-bg-slide.hero-bg-slide--no-transition { transition: none !important; }
  @media (prefers-reduced-motion: reduce) {
    .hero-bg-slide { transition: none !important; }
  }
  .hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(23,20,13,0.52) 0%, rgba(23,20,13,0.38) 46%, rgba(23,20,13,0.6) 100%);
  }
  :root[data-theme="dark"] .hero-scrim {
    background: linear-gradient(180deg, rgba(10,9,6,0.62) 0%, rgba(10,9,6,0.46) 46%, rgba(10,9,6,0.7) 100%);
  }
  .hero .hero-grain { z-index: 1; }
  .hero > .wrap { padding-top: clamp(1.6rem, 5vw, 2.6rem); padding-bottom: clamp(1.6rem, 4vw, 2.4rem); }
  .hero .hero-tag .eyebrow,
  .hero .hero-tag { color: #fff; }
  .hero .hero-tag .dot { background: var(--citrus); }
  .hero h1.display { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
  .hero-lede-short {
    color: #f1ece0;
    max-width: 46ch;
    margin: 0.7rem 0 1.3rem;
    text-shadow: 0 1px 10px rgba(0,0,0,0.3);
  }
  .hero-cta-row { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
  .hero-cta-secondary {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #f1ece0;
  }
  .hero-cta-secondary:hover { color: #fff; }

  .hero-top-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
    margin-bottom: 0.6rem;
  }
  /* La mascota pasa de ser una ilustración grande en columna propia a un icono
     compacto junto a la etiqueta del hero (26/10, hero más corto). Su diseño,
     colores y animaciones no se tocan — solo el tamaño y dónde vive en el layout. */
  .hero-top-row .hero-mascot {
    width: clamp(52px, 7vw, 78px);
    margin: 0;
    flex-shrink: 0;
  }
  @media (max-width: 780px) {
    .hero-top-row .hero-mascot { width: clamp(44px, 14vw, 60px); }
  }

  /* La entrada suave al cargar ahora cubre los elementos nuevos del hero en vez de
     .hero-grid/.hero-visual (retirados de la estructura el 26/10). */
  .hero .hero-lede-short,
  .hero .hero-cta-row {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s cubic-bezier(0.16, 0.84, 0.32, 1), transform 0.9s cubic-bezier(0.16, 0.84, 0.32, 1);
  }
  .hero.hero-ready .hero-lede-short { opacity: 1; transform: none; transition-delay: 0.24s; }
  .hero.hero-ready .hero-cta-row { opacity: 1; transform: none; transition-delay: 0.32s; }

  /* ---------- Best Sellers (home) ---------- */
  .bestsellers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.2rem;
  }
  .bs-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .bs-card:hover, .bs-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--citrus);
    box-shadow: 0 14px 28px rgba(23, 20, 13, 0.12);
  }
  .bs-card-img-wrap {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--paper);
    overflow: hidden;
  }
  .bs-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* 26/10 (ronda 2): insignia "Reserva" sobre la miniatura, solo para las
     tarjetas de Nuevos Productos (todavía sin pago con tarjeta activo) —
     mismo código de color que .piece-status (sin clase permanent) en las
     fichas reales, para que la insignia sea coherente con el resto del sitio. */
  .bs-card-badge {
    position: absolute;
    top: 0.6rem; left: 0.6rem;
    z-index: 1;
    font-size: 0.6rem;
    padding: 0.26rem 0.5rem;
    border-radius: 999px;
    background: var(--lime);
    color: #1c2405;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .bs-card-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
  }
  .bs-card-name { font-weight: 700; font-size: 0.92rem; }
  .bs-card-price { font-weight: 700; font-size: 0.88rem; color: var(--citrus-text); white-space: nowrap; }
  .bestsellers-foot { display: flex; justify-content: center; margin-top: 2rem; }

  /* Resalte momentáneo al llegar desde Best Sellers / búsqueda a una ficha real */
  .piece-highlight {
    animation: pieceHighlightPulse 1.6s ease;
  }
  @keyframes pieceHighlightPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--citrus) 55%, transparent); }
    20% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--citrus) 35%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero .hero-lede-short,
    .hero .hero-cta-row,
    .piece-highlight {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }