/** Shopify CDN: Minification failed

Line 2497:2 All "@import" rules must come first

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.page-404 {
    padding: var(--space-xl) 0 var(--space-2xl);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    min-height: 60vh;
  }

  .page-404__container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-md);
  }

  /* ---------- Hero ---------- */
  .page-404__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
    padding: var(--space-lg) 0 var(--space-2xl);
  }

  .page-404__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(96px, 22vw, 180px);
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--color-text);
  }

  .page-404__code-zero {
    display: inline-flex;
    width: 1em;
    height: 1em;
    color: var(--color-brand-accent, var(--color-text));
    animation: page-404-spin 12s linear infinite;
  }

  .page-404__code-zero svg {
    width: 100%;
    height: 100%;
  }

  @keyframes page-404-spin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .page-404__code-zero { animation: none; }
  }

  .page-404__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(24px, 5vw, 34px);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
  }

  .page-404__text {
    max-width: 540px;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
  }

  /* ---------- Buscador ---------- */
  .page-404__search {
    width: 100%;
    max-width: 480px;
    margin: 6px 0 0;
  }

  .page-404__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    padding: 4px 4px 4px 42px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }

  .page-404__search-wrap:focus-within {
    border-color: var(--color-brand-accent, var(--color-text));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent, var(--color-text)) 20%, transparent);
  }

  .page-404__search-wrap > svg {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
  }

  .page-404__search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 14.5px;
  }

  .page-404__search-input:focus { outline: none; }

  .page-404__search-submit {
    padding: 10px 18px;
    background: var(--color-text);
    color: var(--color-bg);
    border: 0;
    border-radius: var(--radius-full, 999px);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color 150ms ease;
  }

  .page-404__search-submit:hover {
    background: var(--color-brand-accent, var(--color-text));
  }

  /* ---------- CTAs ---------- */
  .page-404__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
  }

  .page-404__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    font-size: 13.5px;
    font-weight: var(--font-weight-strong);
    text-decoration: none;
    transition: transform 150ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  }

  .page-404__cta:hover {
    transform: translateY(-1px);
    border-color: var(--color-text);
  }

  .page-404__cta--primary {
    background: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
  }

  .page-404__cta--primary:hover {
    background: var(--color-brand-accent, var(--color-text));
    border-color: var(--color-brand-accent, var(--color-text));
    color: var(--color-bg);
  }

  /* ---------- Bloques (colecciones / artículos) ---------- */
  .page-404__block {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
  }

  .page-404__block-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 20px;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-md);
    text-align: center;
  }

  /* Colecciones destacadas */
  .page-404__coll-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  @media (min-width: 550px) {
    .page-404__coll-grid { grid-template-columns: repeat(3, 1fr); }
  }

  @media (min-width: 990px) {
    .page-404__coll-grid { grid-template-columns: repeat(4, 1fr); }
  }

  .page-404__coll-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: var(--color-bg);
  }

  .page-404__coll-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
  }

  .page-404__coll-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
  }

  .page-404__coll-img--placeholder {
    background: linear-gradient(135deg, var(--color-bg-soft), var(--color-border));
  }

  .page-404__coll-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
  }

  .page-404__coll-name {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 13.5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.2;
  }

  .page-404__coll-link:hover .page-404__coll-img {
    transform: scale(1.06);
  }

  @media (prefers-reduced-motion: reduce) {
    .page-404__coll-img { transition: none; }
  }

  /* Artículos del blog */
  .page-404__articles {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  @media (min-width: 550px) {
    .page-404__articles { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 990px) {
    .page-404__articles { grid-template-columns: repeat(3, 1fr); }
  }

  .page-404__article-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--color-text);
    height: 100%;
  }

  .page-404__article-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
  }

  .page-404__article-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
  }

  .page-404__article-link:hover .page-404__article-img {
    transform: scale(1.05);
  }

  .page-404__article-meta {
    font-size: 11.5px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
  }

  .page-404__article-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 16px;
    line-height: 1.3;
    margin: 4px 0;
    color: var(--color-text);
  }

  .page-404__article-link:hover .page-404__article-title {
    color: var(--color-brand-accent, var(--color-text));
  }

  .page-404__article-excerpt {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---------- Ayuda ---------- */
  .page-404__help {
    margin-top: var(--space-xl);
    padding: var(--space-md);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    text-align: center;
  }

  .page-404__help-title {
    font-size: 14px;
    font-weight: var(--font-weight-strong);
    margin: 0 0 10px;
    color: var(--color-text);
  }

  .page-404__help-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .page-404__help-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 12.5px;
    font-weight: var(--font-weight-strong);
    text-decoration: none;
  }

  .page-404__help-btn--wa {
    background: #25D366;
    color: #ffffff;
  }
/* END_SECTION:404 */

/* START_SECTION:brand-tiles-desktop (INDEX:3) */
.brand-tiles { display: none; }

  @media (min-width: 750px) {
    .brand-tiles {
      display: block;
      /* La flecha derecha va pegada al borde: al crecer en :hover se salía
         de la pantalla y aparecía un scroll horizontal. clip no crea
         contenedor de scroll. */
      overflow-x: clip;
      padding: var(--space-lg) 0 var(--space-xl);
      background:
        linear-gradient(180deg, transparent 0%, #ffffff 94%),
        var(--tiles-bg, #20b19e);
      transition: background 850ms cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  .brand-tiles__head { margin-bottom: var(--space-md); }
  .brand-tiles__heading {
    font-family: var(--font-heading);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: var(--font-weight-heading);
    margin: 0;
    color: var(--color-text);
  }

  .brand-tiles__wrap {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    /* Padding-inline reserva: 48px de flecha + 20px de separacion visual = 68px.
       El stage queda ENTRE las flechas, no debajo. */
    padding-inline: 68px;
  }

  /* Viewport: recorta lo que se sale del ancho visible. Sin peek — cada
     grupo ocupa 100% exacto, solo se ve el activo. */
  .brand-tiles__viewport {
    overflow: hidden;
  }

  /* Stage: track horizontal con todos los grupos alineados en fila.
     El translate se aplica desde JS en px (medido del grupo real + gap)
     para evitar el bug del `100%` de translate sobre track ancho. */
  .brand-tiles__stage {
    position: relative;
    display: flex;
    gap: var(--space-md); /* gap ENTRE grupos (marcas) */
    transition: transform 550ms cubic-bezier(0.25, 1, 0.35, 1);
    will-change: transform;
  }

  .brand-tiles__group {
    display: flex;
    flex: 0 0 100%;
    min-width: 100%;
    gap: 10px; /* gap INTERNO chico entre los 3 tiles - da mas ancho a cada tile */
    align-items: stretch;
    /* Layout hero 16:9 + 2 tiles 9:16. Aspect 3:1 con gap 10px da la altura
       maxima que cabe sin cortarse en viewports 1200-1600px. */
    aspect-ratio: 3 / 1;
    max-height: 780px;
  }
  /* Grupos inactivos: no reciben interaccion (aunque estan fuera del viewport
     por el overflow hidden, evitamos foco/tab en tiles ocultos). */
  .brand-tiles__group:not(.is-active) {
    pointer-events: none;
  }

  .brand-tile {
    position: relative;
    display: block;
    background: var(--tile-bg);
    color: var(--tile-fg);
    border-radius: var(--radius-lg);
    text-decoration: none;
    overflow: hidden;
    height: 100%;
    width: auto;
    aspect-ratio: 9 / 16;
    flex-shrink: 0;
  }

  .brand-tile--hero {
    aspect-ratio: 16 / 9;
  }

  .brand-tile:focus-visible {
    outline: 2px solid var(--color-focus, currentColor);
    outline-offset: 2px;
  }

  .brand-tile__img,
  .brand-tile__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .brand-tile__video {
    background: transparent;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Video SIEMPRE visible (opacity 1). Cuando esta pausado se ve el
       primer/ultimo frame o el atributo poster nativo. Sin opacity 0
       para evitar que quede vacio si el poster JS no cargo. */
  }

  /* Poster: <img> por encima del video (z-index 2) — visible por default,
     hace fade-out cuando el video empieza a reproducir (is-video-playing). */
  .brand-tile__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 1;
    transition: opacity 500ms ease;
    pointer-events: none;
  }

  /* Estado is-video-playing: poster fade-out (video queda visible debajo). */
  .brand-tile.is-video-playing .brand-tile__poster { opacity: 0; }

  .brand-tile__video-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 200ms ease, transform 150ms ease;
  }
  .brand-tile__video-btn:hover,
  .brand-tile__video-btn:focus-visible {
    background: rgba(0, 0, 0, 0.78);
    transform: scale(1.06);
    outline: none;
  }
  /* Boton semi-visible por default (opacity 0.65) para que el user siempre
     vea el estado actual del video (play/pausa icono). Al hover, opacity 1.
     Antes estaba en opacity 0 -> user no sabia si le daba play o pause al hacer
     click, causaba confusion tipo "el video se pauso solo al sacar el mouse"
     cuando realmente el click habia toggleado un video que ya reproducia. */
  @media (hover: hover) {
    .brand-tile__video-btn {
      opacity: 0.65;
      transition: opacity 200ms ease, background 200ms ease, transform 150ms ease;
    }
    .brand-tile:hover .brand-tile__video-btn {
      opacity: 1;
    }
  }
  .brand-tile__video-btn svg { display: none; }
  .brand-tile__video-btn[data-video-state="paused"] .icon-play { display: block; }
  .brand-tile__video-btn[data-video-state="playing"] .icon-pause { display: block; }
  .brand-tile__video-btn[data-video-state="ended"] .icon-reload { display: block; }

  .brand-tile__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    background: linear-gradient(180deg,
      transparent 55%,
      rgba(0, 0, 0, 0.15) 75%,
      rgba(0, 0, 0, 0.42) 100%);
    color: #ffffff;
    text-align: left;
    z-index: 3; /* encima del poster (z-index 2) y del video */
  }

  .brand-tile__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
  }

  .brand-tile__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.02em;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
  }
  .brand-tile--hero .brand-tile__title {
    font-size: clamp(28px, 3vw, 44px);
  }

  .brand-tile__subtitle {
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: var(--tile-accent);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }

  .brand-tile__description {
    font-size: 12px;
    line-height: 1.3;
    margin: 4px 0 0;
    color: #ffffff;
    opacity: 0.92;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .brand-tile--hero .brand-tile__description {
    font-size: 14px;
    -webkit-line-clamp: 3;
            line-clamp: 3;
    max-width: 62%;
  }

  .brand-tile__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    padding: 8px 18px;
    background: #ffffff;
    color: var(--tile-bg);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-heading);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
  }
  .brand-tile--hero .brand-tile__cta {
    font-size: 13px;
    padding: 10px 22px;
  }

  .brand-tiles__empty {
    padding: var(--space-lg);
    color: var(--color-text-muted);
    font-size: 14px;
    text-align: center;
    width: 100%;
    align-self: center;
  }

  /* ===== Flechas prev/next entre marcas ===== */
  .brand-tiles__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    border-radius: 50%;
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms ease, box-shadow 150ms ease;
  }
  .brand-tiles__nav:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  }
  .brand-tiles__nav--prev { left: 0; }
  .brand-tiles__nav--next { right: 0; }

  /* ===== Fila de logos de marcas (tabs) ===== */
  .brand-tiles__brands {
    max-width: 1600px;
    margin: var(--space-xl) auto 0;
  }
  .brand-tiles__brands-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .brand-tiles__brand-btn {
    appearance: none;
    border: 2px solid transparent;
    /* Degradado sutil por default (variante clara del color de marca) */
    background:
      linear-gradient(135deg,
        var(--brand-bg, #ffffff) 0%,
        color-mix(in srgb, var(--brand-bg, #ffffff) 82%, #ffffff 18%) 100%);
    color: var(--brand-fg, #1a1a1a);
    border-radius: var(--radius-md);
    padding: 18px 32px;
    min-width: 180px;
    min-height: 108px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition:
      transform 220ms cubic-bezier(0.25, 1, 0.35, 1),
      box-shadow 220ms ease,
      border-color 220ms ease,
      background 300ms ease;
    position: relative;
  }
  .brand-tiles__brand-btn:hover,
  .brand-tiles__brand-btn:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    outline: none;
  }
  /* Estado seleccionado: sombra colorida detras + degradado mas intenso +
     scale up + logo con drop-shadow propio para separarlo del fondo. */
  .brand-tiles__brand-btn.is-active {
    border-color: color-mix(in srgb, var(--brand-fg, #1a1a1a) 40%, transparent);
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--brand-bg, #ffffff) 92%, #ffffff 8%) 0%,
        color-mix(in srgb, var(--brand-bg, #ffffff) 72%, #ffffff 28%) 100%);
    transform: translateY(-6px) scale(1.04);
    box-shadow:
      0 18px 40px color-mix(in srgb, var(--brand-bg, #1a1a1a) 45%, transparent),
      0 4px 12px color-mix(in srgb, var(--brand-bg, #1a1a1a) 25%, transparent);
  }
  .brand-tiles__brand-btn.is-active .brand-tiles__brand-logo {
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
    transform: scale(1.05);
  }
  .brand-tiles__brand-logo {
    transition: filter 260ms ease, transform 260ms ease;
  }

  .brand-tiles__brand-logo {
    max-height: 64px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .brand-tiles__brand-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* Laptops medianas y ajuste responsive.
     Padding-inline se reduce con el viewport para mantener espacio de contenido,
     pero siempre reserva ancho de flecha + separacion visual. */
  @media (max-width: 1200px) {
    .brand-tiles__wrap { padding-inline: 62px; } /* 48 flecha + 14 separacion */
    .brand-tiles__group {
      aspect-ratio: 61 / 20;
      max-height: 540px;
    }
  }
  @media (max-width: 900px) and (min-width: 750px) {
    .brand-tiles__wrap { padding-inline: 52px; } /* 40 flecha + 12 separacion */
    .brand-tiles__group {
      aspect-ratio: 31 / 10;
      max-height: 440px;
    }
    .brand-tile--hero .brand-tile__description { max-width: 80%; }
    .brand-tiles__nav { width: 40px; height: 40px; }
  }
/* END_SECTION:brand-tiles-desktop */

/* START_SECTION:cart (INDEX:5) */
/* ---------- Contenedor / layout base ---------- */
  .cart-page {
    padding: var(--space-lg) 0 var(--space-xl);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    min-height: 60vh;
  }

  .cart-page__container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--space-md);
  }

  /* ---------- Header ---------- */
  .cart-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
  }

  .cart-page__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.02em;
  }

  .cart-page__count {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 4px 0 0;
  }

  .cart-page__continue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--font-weight-strong);
    transition: background 160ms ease, border-color 160ms ease;
  }

  .cart-page__continue:hover,
  .cart-page__continue:focus-visible {
    background: var(--color-bg-soft);
    border-color: var(--color-text);
  }

  /* ---------- Grid ---------- */
  .cart-page__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  @media (min-width: 990px) {
    .cart-page__grid {
      grid-template-columns: 2fr 1fr;
      gap: var(--space-xl);
      align-items: start;
    }
  }

  /* ---------- Items ---------- */
  .cart-page__items {
    display: block;
  }

  .cart-page__items-head {
    display: none;
  }

  @media (min-width: 750px) {
    .cart-page__items-head {
      display: grid;
      grid-template-columns: 1fr 160px 120px;
      gap: var(--space-md);
      padding: 0 0 var(--space-sm);
      border-bottom: 1px solid var(--color-border);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-text-muted);
      font-weight: var(--font-weight-strong);
    }
    .cart-page__col-qty { text-align: center; }
    .cart-page__col-total { text-align: right; }
  }

  .cart-page__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product product"
      "qty     total";
    row-gap: var(--space-sm);
    column-gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    transition: opacity 200ms ease;
  }

  .cart-item__product { grid-area: product; }
  .cart-item__qty-cell {
    grid-area: qty;
    justify-self: start;
    align-self: center;
  }
  .cart-item__total {
    grid-area: total;
    justify-self: end;
    align-self: center;
    text-align: right;
  }

  .cart-item[data-loading='true'] {
    opacity: 0.5;
    pointer-events: none;
  }

  @media (min-width: 750px) {
    .cart-item {
      grid-template-columns: 1fr 160px 120px;
      grid-template-areas: "product qty total";
      align-items: center;
      row-gap: 0;
    }
    .cart-item__qty-cell { justify-self: center; }
  }

  .cart-item__product {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-sm);
    align-items: start;
    padding-right: 44px;
    min-width: 0;
  }

  @media (min-width: 750px) {
    .cart-item__product {
      grid-template-columns: 100px 1fr;
      gap: var(--space-md);
      padding-right: 40px;
    }
  }

  .cart-item__media {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-soft);
    flex-shrink: 0;
  }

  @media (min-width: 750px) {
    .cart-item__media {
      width: 100px;
      height: 100px;
    }
  }

  .cart-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cart-item__img--placeholder {
    background: linear-gradient(135deg, var(--color-bg-soft), var(--color-border));
  }

  .cart-item__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .cart-item__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-strong);
    font-size: 15px;
    line-height: 1.3;
    color: var(--color-text);
    text-decoration: none;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }

  .cart-item__title:hover,
  .cart-item__title:focus-visible {
    text-decoration: underline;
  }

  .cart-item__variants,
  .cart-item__properties {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
  }

  .cart-item__variant,
  .cart-item__property {
    display: inline-flex;
    gap: 4px;
    margin: 0;
  }

  .cart-item__variant dt,
  .cart-item__property dt {
    font-weight: var(--font-weight-strong);
    color: var(--color-text-muted);
    margin: 0;
  }

  .cart-item__variant dd,
  .cart-item__property dd {
    margin: 0;
    color: var(--color-text);
  }

  .cart-item__selling-plan {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-brand-secondary);
    font-weight: var(--font-weight-strong);
    margin: 4px 0 0;
  }

  .cart-item__sku {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 2px 0 0;
    letter-spacing: 0.02em;
  }

  .cart-item__unit-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-size: 14px;
  }

  .cart-item__savings-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 6px;
    padding: 5px 10px;
    background: color-mix(in srgb, var(--color-brand-danger) 12%, transparent);
    color: var(--color-brand-danger);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: var(--font-weight-strong);
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .cart-item__savings-badge svg {
    flex-shrink: 0;
  }

  .cart-item__total .cart-item__savings-badge {
    align-self: flex-end;
  }

  /* Precio anterior tachado en rojo, como en las tarjetas */
  .cart-item__price-compare {
    text-decoration: line-through;
    color: var(--color-brand-danger);
    font-size: 12px;
  }

  .cart-item__price-final {
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
  }

  .cart-item__discounts {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cart-item__discount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--color-brand-secondary) 12%, transparent);
    color: var(--color-brand-secondary);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: var(--font-weight-normal);
    line-height: 1.3;
  }

  .cart-item__discount strong {
    font-weight: var(--font-weight-strong);
  }

  .cart-item__discount svg {
    flex-shrink: 0;
  }

  .cart-item__remove {
    position: absolute;
    top: var(--space-sm);
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-full, 999px);
    transition: background-color 150ms ease, color 150ms ease;
    font-family: inherit;
    transition: color 160ms ease;
  }

  .cart-item__remove:hover,
  .cart-item__remove:focus-visible {
    color: var(--color-brand-danger);
    background: color-mix(in srgb, var(--color-brand-danger) 10%, transparent);
    outline: none;
  }

  .cart-item__remove svg {
    display: block;
  }

  /* Cantidad */
  .cart-item__qty-cell {
    display: flex;
    justify-content: flex-start;
  }

  @media (min-width: 750px) {
    .cart-item__qty-cell { justify-content: center; }
  }

  .cart-item__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg);
  }

  .cart-item__qty-btn {
    width: 36px;
    height: 40px;
    border: none;
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease;
  }

  .cart-item__qty-btn:hover,
  .cart-item__qty-btn:focus-visible {
    background: var(--color-bg-soft);
  }

  .cart-item__qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .cart-item__qty-input {
    width: 44px;
    height: 40px;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    text-align: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-strong);
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .cart-item__qty-input::-webkit-outer-spin-button,
  .cart-item__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .cart-item__qty-input:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: -2px;
  }

  /* Total */
  .cart-item__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 15px;
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
    text-align: right;
  }

  .cart-item__total-compare {
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
    color: var(--color-brand-danger);
  }

  .cart-item__total-final {
    font-family: var(--font-heading);
  }

  /* ---------- Resumen sticky ---------- */
  .cart-page__summary {
    display: block;
  }

  @media (min-width: 990px) {
    .cart-page__summary {
      position: sticky;
      top: 80px;
    }
  }

  .cart-summary {
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .cart-summary__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 18px;
    margin: 0 0 var(--space-xs);
    letter-spacing: -0.01em;
  }

  .cart-summary__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
  }

  .cart-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
    margin: 0;
  }

  .cart-summary__row dt {
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    margin: 0;
  }

  .cart-summary__row dd {
    color: var(--color-text);
    font-weight: var(--font-weight-strong);
    margin: 0;
  }

  .cart-summary__row--muted dd {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 13px;
    font-style: italic;
  }

  .cart-summary__row--discount dt,
  .cart-summary__row--discount dd {
    color: var(--color-brand-secondary);
    font-weight: var(--font-weight-strong);
  }

  .cart-summary__row-meta {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
    font-size: 12px;
    margin-left: 4px;
  }

  .cart-summary__row--savings {
    padding: 8px 10px;
    background: color-mix(in srgb, var(--color-brand-danger) 10%, transparent);
    border-radius: var(--radius-sm);
    margin: 2px 0;
  }

  .cart-summary__row--savings dt,
  .cart-summary__row--savings dd {
    color: var(--color-brand-danger);
    font-weight: var(--font-weight-strong);
  }

  .cart-summary__row--savings dt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .cart-summary__row--savings svg {
    flex-shrink: 0;
  }

  .cart-summary__divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
  }

  .cart-summary__row--total {
    padding-top: 4px;
  }

  .cart-summary__row--total dt,
  .cart-summary__row--total dd {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 18px;
    color: var(--color-text);
  }

  .cart-summary__discount {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--space-xs);
  }

  .cart-summary__discount-details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
  }

  .cart-summary__discount-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
    list-style: none;
    user-select: none;
  }

  .cart-summary__discount-toggle::-webkit-details-marker { display: none; }

  .cart-summary__discount-toggle::after {
    content: '';
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms ease;
  }

  .cart-summary__discount-details[open] .cart-summary__discount-toggle::after {
    transform: rotate(-135deg);
  }

  .cart-summary__discount-form {
    padding: 0 12px 12px;
  }

  .cart-summary__discount-input-wrap {
    display: flex;
    gap: 6px;
  }

  .cart-summary__discount-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .cart-summary__discount-input:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 1px;
  }

  .cart-summary__discount-apply {
    padding: 10px 14px;
    background: var(--color-text);
    color: var(--color-bg);
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity 150ms ease;
    white-space: nowrap;
  }

  .cart-summary__discount-apply:hover:not(:disabled) { opacity: 0.85; }
  .cart-summary__discount-apply:disabled { opacity: 0.5; cursor: wait; }

  .cart-summary__discount-msg {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-brand-danger);
  }

  .cart-summary__discount-msg[data-state='success'] {
    color: var(--color-brand-secondary);
  }

  .cart-summary__discount-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
  }

  .cart-summary__discount-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 10px;
    background: color-mix(in srgb, var(--color-brand-secondary) 12%, transparent);
    color: var(--color-brand-secondary);
    border-radius: var(--radius-full, 999px);
    font-size: 12px;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .cart-summary__discount-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    padding: 0;
    transition: background-color 150ms ease;
  }

  .cart-summary__discount-remove:hover {
    background: color-mix(in srgb, var(--color-brand-secondary) 22%, transparent);
  }

  .cart-summary__note {
    margin-top: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .cart-summary__note-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-strong);
  }

  .cart-summary__note-input {
    width: 100%;
    min-height: 70px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    transition: border-color 160ms ease;
  }

  .cart-summary__note-input:focus-visible {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 25%, transparent);
  }

  .cart-summary__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 20px;
    margin-top: var(--space-xs);
    background: var(--color-text);
    color: var(--color-bg);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
  }

  .cart-summary__checkout:hover,
  .cart-summary__checkout:focus-visible {
    background: var(--color-brand-accent);
    color: var(--color-bg);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  .cart-summary__checkout:active { transform: translateY(0); }

  .cart-summary__secure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 4px 0 0;
    text-align: center;
  }

  .cart-summary__share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
  }
  .cart-summary__share .share-btns { width: 100%; }
  .cart-summary__share .share-btns__trigger {
    width: 100%;
    justify-content: center;
  }
  .cart-summary__share-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.3;
  }

  .cart-summary__payments {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
  }

  .cart-summary__payment {
    display: inline-flex;
  }

  .cart-summary .payment-icon {
    height: 22px;
    width: auto;
    display: block;
  }

  .cart-summary__payments-local {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
    text-align: center;
  }

  .cart-summary__payments-local img {
    max-width: 100%;
    height: auto;
    display: inline-block;
  }

  /* ---------- Empty state ---------- */
  .cart-page--empty .cart-page__container {
    display: flex;
    justify-content: center;
  }

  .cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    gap: var(--space-sm);
    max-width: 420px;
  }

  .cart-empty__illustration {
    color: var(--color-text-muted);
    opacity: 0.7;
    margin-bottom: var(--space-xs);
  }

  .cart-empty__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(22px, 4vw, 30px);
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-text);
  }

  .cart-empty__text {
    font-size: 15px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
  }

  .cart-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-sm);
    padding: 14px 24px;
    background: var(--color-text);
    color: var(--color-bg);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 160ms ease, transform 160ms ease;
  }

  .cart-empty__cta:hover,
  .cart-empty__cta:focus-visible {
    background: var(--color-brand-primary);
    color: var(--color-text);
    transform: translateY(-1px);
  }

  /* ---------- Recomendaciones ---------- */
  .cart-recom {
    padding: var(--space-lg) 0 var(--space-xl);
    background: var(--color-bg-soft);
  }

  [data-cart-recom][hidden] { display: none; }

  .cart-recom__header {
    margin-bottom: var(--space-md);
  }

  .cart-recom__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(20px, 2.2vw, 26px);
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--color-text);
  }

  .cart-recom__viewport { position: relative; }

  .cart-recom__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 20px 6px;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  .cart-recom__track::-webkit-scrollbar { display: none; }
  .cart-recom__slot { scroll-snap-align: start; }

  @media (min-width: 550px) {
    .cart-recom__track { grid-auto-columns: 38%; }
  }

  @media (min-width: 750px) {
    .cart-recom__track {
      grid-auto-columns: calc((100% - (var(--space-md) * 3)) / 4);
      gap: var(--space-md);
    }
  }

  @media (min-width: 1200px) {
    .cart-recom__track {
      grid-auto-columns: calc((100% - (var(--space-md) * 5)) / 6);
    }
  }

  .cart-recom__skeleton {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    min-height: 320px;
  }

  .cart-recom__skeleton-media {
    aspect-ratio: 1 / 1;
    background: linear-gradient(90deg, #f0f0f2 0%, #e4e4e8 50%, #f0f0f2 100%);
    background-size: 200% 100%;
    animation: cart-recom-shimmer 1400ms ease-in-out infinite;
  }

  .cart-recom__skeleton-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .cart-recom__skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f2 0%, #e4e4e8 50%, #f0f0f2 100%);
    background-size: 200% 100%;
    animation: cart-recom-shimmer 1400ms ease-in-out infinite;
  }

  .cart-recom__skeleton-line--title { width: 85%; }
  .cart-recom__skeleton-line--short { width: 55%; }

  @keyframes cart-recom-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-recom__skeleton-media,
    .cart-recom__skeleton-line { animation: none; }
    .cart-summary__checkout,
    .cart-empty__cta { transition: none; }
  }
/* END_SECTION:cart */

/* START_SECTION:category-cards (INDEX:6) */
.cat-cards {
    padding: var(--space-lg) 0;
    background: var(--color-bg, #ffffff);
    overflow-x: hidden;
    overflow-x: clip;
  }

  .cat-cards__wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-md);
  }

  .cat-cards__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(20px, 2.2vw, 28px);
    margin: 0 0 var(--space-md);
    color: var(--color-text);
    letter-spacing: -0.01em;
  }

  /* Track: mobile scroll horizontal, desktop grid */
  .cat-cards__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    padding: 4px 2px;
  }
  .cat-cards__track::-webkit-scrollbar { display: none; }

  @media (min-width: 750px) {
    .cat-cards__track {
      grid-auto-flow: unset;
      grid-template-columns: repeat(var(--cc-visible-desktop, 4), 1fr);
      grid-auto-columns: unset;
      overflow: visible;
      gap: var(--space-md);
      padding: 0;
    }
  }

  /* Card individual */
  .cat-card {
    position: relative;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--cc-bg, #e8f5e9);
    color: var(--cc-fg, #1a1a1a);
    border-radius: 14px;
    padding: 18px;
    aspect-ratio: 9 / 16;
    text-decoration: none;
    transition: box-shadow 200ms ease;
    overflow: hidden;
    isolation: isolate;
  }

  /* Imagen de fondo (opcional): cubre todo el card detras del contenido */
  .cat-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
    border-radius: inherit;
  }

  /* Overlay configurable (color + opacidad) para legibilidad sobre la foto */
  .cat-card--has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgb(from var(--cc-overlay, #000) r g b / calc(var(--cc-overlay-alpha, 0.45) * 0.1)) 0%,
      rgb(from var(--cc-overlay, #000) r g b / calc(var(--cc-overlay-alpha, 0.45) * 0.35)) 55%,
      rgb(from var(--cc-overlay, #000) r g b / var(--cc-overlay-alpha, 0.45)) 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
  }

  /* El fondo queda fuera: si no, esta regla le gana a .cat-card__bg y la
     foto entra al flujo empujando la grilla y el texto hacia abajo. */
  .cat-card > :not(.cat-card__bg) { position: relative; z-index: 2; }

  .cat-card:hover,
  .cat-card:focus-visible {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    outline: none;
  }

  .cat-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-content: start;
  }

  .cat-card__cell {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cat-card__cell--empty {
    background: rgba(255, 255, 255, 0.5);
  }

  .cat-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Badge de descuento — arriba-izquierda, pill rojo con % */
  .cat-card__discount {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    background: var(--color-brand-danger, #e53935);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: 0.02em;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    pointer-events: none;
  }

  /* Footer: texto + CTA al fondo del card (como en el hero) */
  .cat-card__foot {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cat-card__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    color: inherit;
    text-decoration: none;
  }

  .cat-card__head:hover .cat-card__title,
  .cat-card__head:focus-visible .cat-card__title {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .cat-card__head:focus-visible {
    outline: none;
  }

  .cat-card__cell:focus-visible {
    outline: 2px solid var(--cc-fg, #1a1a1a);
    outline-offset: 2px;
  }

  .cat-card__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1;
    margin: 0;
    color: inherit;
    letter-spacing: -0.02em;
  }

  .cat-card__subtitle {
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    color: inherit;
    opacity: 0.85;
    line-height: 1.25;
  }

  .cat-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    padding: 8px 18px;
    background: var(--cc-cta-bg, #ffffff);
    color: var(--cc-cta-fg, #1a1a1a);
    border-radius: var(--radius-full, 999px);
    font-weight: var(--font-weight-heading, 800);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    transition: transform 150ms ease;
  }

  /* Estilo del texto: sombra suave para leer sobre cualquier fondo */
  .cat-cards--texto-sombra .cat-card__title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  .cat-cards--texto-sombra .cat-card__subtitle {
    opacity: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  /* Estilo del texto: contorno NQ (letra blanca con borde morado, de nq-estilo) */
  .cat-cards--texto-nq .cat-card__title {
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.05;
    padding-bottom: 5px;
    letter-spacing: 0.02em;
  }
  .cat-cards--texto-nq .cat-card__subtitle {
    --cc-sub-borde: color-mix(in srgb, var(--color-brand-accent) 58%, var(--color-text));
    opacity: 1;
    color: var(--color-bg);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-shadow:
      1px 0 var(--cc-sub-borde), -1px 0 var(--cc-sub-borde),
      0 1px var(--cc-sub-borde), 0 -1px var(--cc-sub-borde),
      0 2px var(--cc-sub-borde);
  }

  .cat-card__cta:hover,
  .cat-card__cta:focus-visible {
    transform: scale(1.04);
    outline: none;
  }
/* END_SECTION:category-cards */

/* START_SECTION:collection-explore (INDEX:7) */
.cx {
    padding: var(--cx-pt, 40px) 0 var(--cx-pb, 56px);
  }

  .cx__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .cx__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.15;
    color: var(--color-text);
  }

  .cx__viewall {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Mobile: carrusel horizontal. Desktop: grilla de 6 (tarjetas chicas). */
  .cx__list {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-xs);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 42%;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cx__list::-webkit-scrollbar { display: none; }

  @media (min-width: 750px) {
    .cx__list { grid-auto-columns: 28%; }
  }

  @media (min-width: 990px) {
    .cx__list {
      grid-auto-flow: row;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: var(--space-md);
      overflow: visible;
    }
  }

  .cx__item { scroll-snap-align: start; min-width: 0; }
  .cx__item[hidden] { display: none; }

  .cx__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 150ms ease, transform 150ms ease;
  }

  .cx__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-text) 12%, transparent);
  }

  .cx__card:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  .cx__media {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-soft);
    overflow: hidden;
  }

  .cx__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cx__initial {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-muted);
  }

  .cx__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }

  .cx__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .cx__count {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  /* ===== Dentro de la grilla de productos: franja compacta de una fila ===== */
  /* Fondo en el verde de la marca para que no pase desapercibida entre los
     productos. Texto oscuro: contraste ~6.5:1 sobre el verde (blanco no pasa AA). */
  .cx--inline {
    grid-column: 1 / -1;
    margin: var(--space-xs) 0;
    padding: var(--space-md) 0 var(--space-md) var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--color-brand-secondary);
    color: var(--color-text);
    box-shadow:
      0 18px 40px -12px color-mix(in srgb, var(--color-brand-secondary) 70%, var(--color-text)),
      0 6px 16px -6px color-mix(in srgb, var(--color-text) 30%, transparent);
  }

  @media (min-width: 990px) {
    .cx--inline {
      margin: var(--space-md) 0;
      padding: var(--space-lg) 0 var(--space-lg) var(--space-lg);
    }
  }

  /* Estilo NQ en la franja de la grilla: trama "NO LO QUIERES, LO NECESITAS",
     titular blanco con contorno morado (el contorno da el contraste sobre el verde)
     y "Ver todo" como píldora NQ. Las clases vienen de snippets/nq-estilo. */
  .cx--inline .cx__heading { letter-spacing: -0.005em; }
  .cx--inline .cx__head { align-items: flex-end; }
  /* el kicker va dentro del titular: le devolvemos su propio relieve y tamaño */
  .cx__heading .cx__kicker {
    display: table;
    margin: 0 0 8px;
    text-shadow:
      1px 0 var(--nq-kicker-dark), -1px 0 var(--nq-kicker-dark),
      0 1px var(--nq-kicker-dark), 0 -1px var(--nq-kicker-dark),
      0 2px var(--nq-kicker-dark);
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .cx__reason { display: block; }
  .cx--inline .cx__viewall { flex: none; }

  /* ===== Carrusel: flechas sobre los bordes de la fila ===== */
  .cx__rail {
    position: relative;
  }

  .cx__arrow {
    position: absolute;
    top: 38%;
    z-index: 2;
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-text) 28%, transparent);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 150ms ease, transform 150ms ease;
  }

  .cx__arrow--prev { left: 8px; }
  .cx__arrow--next { right: 12px; }

  .cx__arrow:hover { transform: translateY(-50%) scale(1.06); }

  .cx__arrow:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  .cx__arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }

  /* Solo con mouse (desktop/tablet): en touch se desliza con el dedo. */
  @media (min-width: 750px) and (hover: hover) {
    .cx__arrow:not([hidden]) { display: grid; }
  }


  .cx--inline .cx__card {
    border-color: transparent;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-text) 14%, transparent);
  }

  .cx--inline .cx__inner {
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .cx--inline .cx__head {
    padding-right: var(--space-md);
    margin-bottom: var(--space-sm);
  }

  .cx--inline .cx__heading {
    font-size: clamp(24px, 3.4vw, 30px);
    line-height: 1.05;
  }

  .cx--inline .cx__list {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 34%;
    gap: var(--space-sm);
    overflow-x: auto;
    padding-right: var(--space-md);
    scroll-padding-left: 0;
  }

  @media (min-width: 750px) {
    .cx--inline .cx__list { grid-auto-columns: 22%; }
  }

  @media (min-width: 990px) {
    .cx--inline .cx__list {
      grid-auto-columns: calc((100% - 3 * var(--space-md)) / 4.35);
      gap: var(--space-md);
    }
    .cx--inline .cx__title { font-size: 15px; }
    .cx--inline .cx__count { font-size: 12px; }
    .cx--inline .cx__body { padding: var(--space-sm) var(--space-md) var(--space-md); }
    .cx--inline .cx__heading { font-size: 28px; }
  }

  .cx--inline .cx__media { aspect-ratio: 1 / 1; }

  .cx--inline .cx__body {
    padding: var(--space-xs) var(--space-sm) var(--space-sm);
  }

  .cx--inline .cx__title { font-size: 13px; }
  .cx--inline .cx__count { font-size: 11px; }

  .cx--inline .cx__card:hover { transform: none; }

  .cx--empty p {
    padding: var(--space-md);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .cx__card { transition: none; }
    .cx__card:hover { transform: none; }
  }
/* END_SECTION:collection-explore */

/* START_SECTION:collection (INDEX:8) */
.coll-page {
    position: relative;
    padding: var(--space-lg) 0 var(--space-xl);
    background: var(--color-bg, #ffffff);
    isolation: isolate;
  }

  /* Degradado del brand a blanco en el top (mismo patron que hero-brand-panel) */
  .coll-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 480px;
    background:
      linear-gradient(180deg, transparent 0%, var(--color-bg, #ffffff) 90%),
      var(--coll-bg-gradient, var(--coll-bg-color, #08C4AF));
    pointer-events: none;
    z-index: -1;
  }

  .coll-page__header {
    margin-bottom: var(--space-lg);
  }

  /* ===== Banner de oferta (global, desde el editor) =====
     Proporcion real de la imagen (sin recortes), esquinas y sombra del tema. */
  .coll-promo {
    display: block;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    background: var(--color-bg-soft);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-text) 14%, transparent);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .coll-promo picture,
  .coll-promo__img {
    display: block;
    width: 100%;
    height: auto;
  }
  a.coll-promo:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--color-text) 20%, transparent);
  }
  a.coll-promo:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
  }
  @media (prefers-reduced-motion: reduce) {
    .coll-promo { transition: none; }
    a.coll-promo:hover { transform: none; }
  }

  .coll-page__banner {
    position: relative;
    aspect-ratio: 3 / 1;
    background: var(--color-bg-soft, #f4f4f6);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: var(--space-md);
  }

  /* Banner con metafields: aspect-ratio nativo del asset (mobile portrait, desktop wide) */
  .coll-page__banner--responsive {
    aspect-ratio: 1080 / 525;
  }

  @media (min-width: 750px) {
    .coll-page__banner--responsive {
      aspect-ratio: 2500 / 400;
    }
  }

  .coll-page__banner picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Overlay del titulo sobre el banner con pill highlight color de marca */
  .coll-page__banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px 12px 8%;
    pointer-events: none;
  }
  @media (min-width: 750px) {
    /* En desktop el titulo se ancla abajo del banner, no centrado */
    .coll-page__banner-overlay {
      align-items: flex-end;
      justify-content: center;
      padding: 0 20px 16px;
    }
  }
  /* SVG text: unica forma real de tener stroke grueso con linejoin round
     (sin picos). Se escala con viewBox — max-width controla el ancho final. */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');

  .coll-page__banner-svg {
    display: block;
    width: 92%;
    max-width: 720px;
    height: auto;
    overflow: visible;
  }
  @media (min-width: 750px) {
    .coll-page__banner-svg {
      max-width: 360px;
    }
  }

  .coll-page__banner-svg-text {
    font-family: 'Poppins', var(--font-heading), sans-serif;
    font-weight: 900;
    font-size: 92px;
    letter-spacing: 4px;
    fill: #ffffff;
    stroke: var(--marca-10, var(--color-brand-accent, #6c3fd4));
    stroke-width: 22;
    stroke-linejoin: round;
    stroke-linecap: round;
    paint-order: stroke fill;
  }

  .coll-page__banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .coll-page__title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .coll-page__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading, 900);
    font-size: clamp(24px, 3vw, 38px);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }

  .coll-page__count {
    font-size: 13px;
    color: var(--color-text-muted, #6b6b74);
    margin: 0;
  }

  .coll-page__description {
    font-size: 14px;
    line-height: 1.5;
    margin-top: var(--space-xs);
    color: var(--color-text);
    max-width: 720px;
  }

  /* ---------- Toolbar ---------- */
  .coll-page__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  }

  /* Sticky mobile: se pega debajo del header mobile (~56px), delgado,
     y se oculta al scroll down / aparece al scroll up (mismo pattern del header). */
  @media (max-width: 989px) {
    .coll-page__toolbar {
      position: sticky;
      /* Altura del header mobile medida en JS y expuesta como CSS var en :root.
         Fallback 56px si el JS no corrió. */
      top: var(--mobile-header-height, 56px);
      z-index: 50;
      /* Sin fondo por default (respeta el degradado brand); blanco solo cuando pegado. */
      background: transparent;
      padding: 6px var(--space-md);
      margin-inline: calc(var(--space-md) * -1);
      margin-bottom: var(--space-md);
      border-bottom: 1px solid transparent;
      transition:
        transform 300ms cubic-bezier(0.2, 0, 0.2, 1),
        background 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease;
      will-change: transform;
    }
    /* Cuando el toolbar toca su posicion sticky (detectado por sentinel + IO) */
    .coll-page__toolbar.is-stuck {
      background: #ffffff;
      border-bottom-color: var(--color-border, rgba(0, 0, 0, 0.08));
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    /* Hide on scroll down: solo cuando esta stuck (evita salto en posicion inicial) */
    .coll-page__toolbar.is-stuck.is-hidden {
      transform: translateY(calc(-100% - var(--mobile-header-height, 56px)));
    }
    .coll-page__toolbar .coll-page__filter-btn,
    .coll-page__toolbar .coll-page__sort select {
      padding: 6px 12px;
      font-size: 12px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .coll-page__toolbar { transition: none; }
  }

  .coll-page__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-md, 6px);
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
  }

  .coll-page__filter-btn:hover {
    border-color: #1a1a1a;
  }

  .coll-page__filter-btn:focus-visible {
    outline: 2px solid var(--color-brand-secondary, #08C4AF);
    outline-offset: 2px;
  }

  .coll-page__filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-brand-primary, #ffcd11);
    color: var(--color-text, #1a1a1a);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }

  .coll-page__sort {
    margin-left: auto;
  }

  .coll-page__sort select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-md, 6px);
    background: #ffffff;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }

  .coll-page__sort select:hover { border-color: #1a1a1a; }

  /* ---------- Body: sidebar + main ---------- */
  .coll-page__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .coll-page__sidebar { display: none; }
  .coll-page__main { min-width: 0; }

  @media (min-width: 990px) {
    .coll-page--sidebar .coll-page__body {
      grid-template-columns: 260px 1fr;
      align-items: start;
    }
    .coll-page--sidebar .coll-page__sidebar {
      display: block;
      /* Sticky: sigue al scroll. top: 80px = altura del header desktop (~72) + margen. */
      position: sticky;
      top: 80px;
      max-height: calc(100vh - 100px);
      overflow-y: auto;
      scrollbar-width: thin;
      padding-right: 4px;
    }
    .coll-page--sidebar .coll-page__sidebar::-webkit-scrollbar {
      width: 6px;
    }
    .coll-page--sidebar .coll-page__sidebar::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.15);
      border-radius: 3px;
    }
    .coll-page--sidebar .coll-page__filter-btn { display: none; }
  }

  /* ---------- Chips ---------- */
  .coll-page__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-md);
  }

  .coll-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 12px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 999px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.2;
    transition: border-color 150ms ease, background 150ms ease;
  }

  .coll-chip:hover {
    border-color: #1a1a1a;
    background: var(--color-bg-soft, #f6f5f1);
  }

  .coll-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted, #6b6b74);
    transition: background 150ms ease, color 150ms ease;
  }

  .coll-chip:hover .coll-chip__x {
    background: #1a1a1a;
    color: #ffffff;
  }

  .coll-chip--clear {
    color: var(--color-brand-secondary, #08C4AF);
    font-weight: 700;
    text-decoration: underline;
    border-color: transparent;
    padding-right: 12px;
  }

  .coll-chip--clear:hover {
    border-color: transparent;
    background: transparent;
  }

  /* ---------- Filter form (sidebar + drawer share styles) ---------- */
  .coll-filters { display: block; }

  .coll-filter {
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    padding: 4px 0;
  }

  .coll-filter[open] { padding-bottom: var(--space-sm); }

  .coll-filter__summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: var(--space-sm) 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
  }

  .coll-filter__summary::-webkit-details-marker { display: none; }

  .coll-filter__summary::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 200ms ease;
    margin-right: 4px;
  }

  .coll-filter[open] .coll-filter__summary::after {
    transform: rotate(-135deg);
  }

  .coll-filter__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 4px 8px;
    max-height: 260px;
    overflow-y: auto;
  }

  .coll-filter__option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    line-height: 1.2;
  }

  .coll-filter__option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-brand-secondary, #08C4AF);
    cursor: pointer;
    flex-shrink: 0;
  }

  .coll-filter__option-count {
    color: var(--color-text-muted, #6b6b74);
    font-size: 12px;
    margin-left: auto;
  }

  .coll-filter__price {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 4px 4px;
  }

  .coll-filter__price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Dual-handle range slider.
     Los handles nativos <input type="range"> tienen el "thumb" que se posiciona
     desde el centro del thumb, no desde el borde. Para que la linea gris/verde
     coincida con la posicion visual del thumb, el track y el range deben
     tener margen lateral igual al radio del thumb (9px = 18px/2). */
  .coll-filter__slider {
    position: relative;
    height: 24px;
    margin: 4px 0;
  }

  .coll-filter__slider-track {
    position: absolute;
    top: 50%;
    left: 9px;
    right: 9px;
    height: 3px;
    background: var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 999px;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .coll-filter__slider-range {
    position: absolute;
    top: 50%;
    left: 9px;
    height: 3px;
    background: var(--color-brand-secondary, #08C4AF);
    border-radius: 999px;
    transform: translateY(-50%);
    pointer-events: none;
    /* left y width se calculan en JS relativo al content-box (entre los 9px de cada lado) */
  }

  .coll-filter__slider-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
            appearance: none;
    pointer-events: none;
    outline: none;
  }

  .coll-filter__slider-handle::-webkit-slider-runnable-track {
    background: transparent;
    height: 3px;
    border: none;
  }

  .coll-filter__slider-handle::-moz-range-track {
    background: transparent;
    height: 3px;
    border: none;
  }

  .coll-filter__slider-handle::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--color-brand-secondary, #08C4AF);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: grab;
    pointer-events: auto;
    margin-top: -8px;
    transition: transform 120ms ease;
  }

  .coll-filter__slider-handle::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--color-brand-secondary, #08C4AF);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: grab;
    pointer-events: auto;
  }

  .coll-filter__slider-handle::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
  }

  .coll-filter__slider-handle--hi { z-index: 2; }
  .coll-filter__slider-handle--lo { z-index: 3; }

  .coll-filter__price-field {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  .coll-filter__price-label {
    font-size: 11px;
    color: var(--color-text-muted, #6b6b74);
    margin-bottom: 2px;
  }

  .coll-filter__price input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
    background: #ffffff;
    color: var(--color-text);
    -moz-appearance: textfield;
            appearance: textfield;
  }

  .coll-filter__price input[type="number"]::-webkit-inner-spin-button,
  .coll-filter__price input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
            appearance: none;
    margin: 0;
  }

  .coll-filter__price-sep {
    color: var(--color-text-muted);
    font-size: 13px;
    padding-top: 14px;
  }

  .coll-filter__noscript {
    padding: var(--space-sm) 4px;
  }

  .coll-filter__noscript button {
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--radius-md, 6px);
    background: #1a1a1a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  /* ---------- Grid + paginación ---------- */
  .coll-page__grid {
    display: grid;
    grid-template-columns: repeat(var(--coll-cols-mobile, 2), 1fr);
    gap: var(--space-md);
    position: relative;
  }

  @media (min-width: 750px) {
    .coll-page__grid { grid-template-columns: repeat(3, 1fr); }
  }

  @media (min-width: 990px) {
    .coll-page--sidebar .coll-page__grid {
      grid-template-columns: repeat(4, 1fr);
    }
    .coll-page--toolbar .coll-page__grid {
      grid-template-columns: repeat(var(--coll-cols-desktop, 4), 1fr);
    }
  }

  @media (min-width: 1200px) {
    .coll-page__grid {
      grid-template-columns: repeat(var(--coll-cols-desktop, 4), 1fr);
    }
  }

  .coll-page__slot { min-width: 0; }

  .coll-page__pagination {
    margin-top: var(--space-xl);
    display: flex;
    justify-content: center;
  }

  .coll-page__pagination .pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
  }

  .coll-page__pagination .pagination li a,
  .coll-page__pagination .pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-md, 6px);
    color: var(--color-text);
    text-decoration: none;
    background: #ffffff;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }

  .coll-page__pagination .pagination li a:hover {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
  }

  .coll-page__pagination .pagination li.active span,
  .coll-page__pagination .pagination li[aria-current] span {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
    font-weight: 700;
  }

  .coll-page__empty {
    padding: var(--space-xl) 0;
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
  }

  .coll-page__empty a {
    display: inline-block;
    margin-top: var(--space-sm);
    color: var(--color-brand-secondary, #08C4AF);
    font-weight: 600;
    text-decoration: underline;
  }

  /* ---------- Infinite scroll ---------- */
  .coll-page__infinite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) 0 var(--space-md);
  }

  .coll-page__load-bar {
    width: 100%;
    max-width: 320px;
    height: 3px;
    background: var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 200ms ease;
  }

  .coll-page__infinite[data-loading="1"] .coll-page__load-bar { opacity: 1; }

  .coll-page__load-bar-fill {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--color-brand-secondary, #08C4AF), transparent);
    animation: coll-load-slide 1.2s ease-in-out infinite;
  }

  @keyframes coll-load-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
  }

  .coll-page__load-status {
    font-size: 12px;
    color: var(--color-text-muted, #6b6b74);
    margin: 0;
    min-height: 18px;
    opacity: 0;
    transition: opacity 200ms ease;
  }

  .coll-page__infinite[data-loading="1"] .coll-page__load-status,
  .coll-page__infinite[data-done="1"] .coll-page__load-status { opacity: 1; }

  .coll-page__load-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: #ffffff;
    color: var(--color-text);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-full, 999px);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }

  .coll-page__load-btn:hover {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
  }

  .coll-page__load-btn[hidden] { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .coll-page__load-bar-fill { animation: none; }
  }

  /* ---------- Loading overlay ---------- */
  .coll-page__grid[data-loading="1"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(1px);
    pointer-events: none;
    z-index: 1;
  }

  /* ---------- Drawer (mobile + toolbar mode) ---------- */
  .coll-drawer {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    inset: 0;
  }

  .coll-drawer::backdrop {
    background: rgba(0, 0, 0, 0.45);
  }

  .coll-drawer[open] {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
  }

  .coll-drawer__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    height: 100dvh;
    background: #ffffff;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    animation: coll-drawer-in 220ms ease;
  }

  @keyframes coll-drawer-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .coll-drawer__panel { animation: none; }
  }

  .coll-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  }

  .coll-drawer__title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: var(--color-text);
  }

  .coll-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    border-radius: 50%;
  }

  .coll-drawer__close:hover { background: var(--color-bg-soft, #f6f5f1); }

  .coll-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-md);
    -webkit-overflow-scrolling: touch;
  }

  .coll-drawer__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--space-md);
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    background: #ffffff;
  }

  .coll-drawer__clear {
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
  }

  .coll-drawer__apply {
    flex: 1;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--radius-md, 6px);
    background: #1a1a1a;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  /* ---------- Recomendados ---------- */
  .coll-recs {
    margin-top: var(--space-2xl, 40px);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  }

  [data-coll-recs][hidden] { display: none; }

  .coll-recs__header {
    margin-bottom: var(--space-md);
  }

  .coll-recs__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(20px, 2.2vw, 28px);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-text);
  }

  .coll-recs__viewport { position: relative; }

  .coll-recs__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 24px 8px;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  .coll-recs__track::-webkit-scrollbar { display: none; }

  .coll-recs__slot { scroll-snap-align: start; }

  @media (min-width: 550px) {
    .coll-recs__track { grid-auto-columns: 38%; }
  }

  @media (min-width: 750px) {
    .coll-recs__track {
      grid-auto-columns: calc((100% - (var(--space-md) * 3)) / 4);
      gap: var(--space-md);
    }
  }

  @media (min-width: 1200px) {
    .coll-recs__track {
      grid-auto-columns: calc((100% - (var(--space-md) * 5)) / 6);
    }
  }

  /* Skeleton (self-contained clones para independencia entre secciones) */
  .coll-recs .skeleton-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: var(--pc-radius, 6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    min-height: 320px;
  }

  .coll-recs .skeleton-card__media {
    aspect-ratio: 1 / 1;
    background: linear-gradient(90deg, #f0f0f2 0%, #e4e4e8 50%, #f0f0f2 100%);
    background-size: 200% 100%;
    animation: coll-recs-shimmer 1400ms ease-in-out infinite;
  }

  .coll-recs .skeleton-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .coll-recs .skeleton-card__line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f2 0%, #e4e4e8 50%, #f0f0f2 100%);
    background-size: 200% 100%;
    animation: coll-recs-shimmer 1400ms ease-in-out infinite;
  }

  .coll-recs .skeleton-card__line--title { width: 85%; }
  .coll-recs .skeleton-card__line--short { width: 55%; }

  @keyframes coll-recs-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .coll-recs .skeleton-card__media,
    .coll-recs .skeleton-card__line { animation: none; }
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:9) */
.colls-list {
    padding: var(--space-lg) 0 var(--space-xl);
    background: var(--color-bg, #ffffff);
  }

  .colls-list__header {
    margin-bottom: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .colls-list__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading, 900);
    font-size: clamp(24px, 3vw, 38px);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }

  .colls-list__subtitle {
    font-size: 14px;
    color: var(--color-text-muted, #6b6b74);
    margin: 0;
  }

  .colls-list__count {
    font-size: 13px;
    color: var(--color-text-muted, #6b6b74);
    margin: 4px 0 0;
  }

  .colls-list__grid {
    display: grid;
    grid-template-columns: repeat(var(--colls-cols-mobile, 2), 1fr);
    gap: var(--space-md);
  }

  @media (min-width: 750px) {
    .colls-list__grid { grid-template-columns: repeat(3, 1fr); }
  }

  @media (min-width: 990px) {
    .colls-list__grid { grid-template-columns: repeat(var(--colls-cols-desktop, 4), 1fr); }
  }

  .coll-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 180ms ease, transform 180ms ease;
    border-radius: 8px;
    overflow: hidden;
  }

  .coll-card:hover,
  .coll-card:focus-visible {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    outline: none;
  }

  .coll-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--color-bg-soft, #f4f4f6);
    overflow: hidden;
  }

  .coll-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
  }

  .coll-card:hover .coll-card__img {
    transform: scale(1.04);
  }

  .coll-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-brand-secondary, #20b19e), var(--color-brand-primary, #ffcd11));
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(48px, 6vw, 72px);
  }

  .coll-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
  }

  .coll-card__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.2;
    margin: 0;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .coll-card__desc {
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-text-muted, #6b6b74);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .coll-card__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-brand-secondary, #20b19e);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
  }

  .colls-list__empty {
    padding: var(--space-xl) 0;
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
  }
/* END_SECTION:collections */

/* START_SECTION:footer (INDEX:10) */
.site-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    color: var(--footer-text);
    padding: var(--space-xl) 0 0;
    padding-bottom: calc(var(--space-xl) + 56px + env(safe-area-inset-bottom));
  }

  /* ===== Estilo NQ: sin trama y con el fondo de siempre; solo la franja,
     la tarjeta de ofertas por correo y las redes llevan el acento ===== */
  .site-footer--nq { border-top: 0; padding-top: 0; }
  .site-footer__franja {
    margin-bottom: var(--space-xl);
    overflow: hidden;
    padding: 9px 0;
    background: var(--color-brand-secondary);
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    --franja-borde: color-mix(in srgb, var(--color-brand-secondary) 50%, var(--color-text));
    text-shadow: 1px 0 var(--franja-borde), -1px 0 var(--franja-borde), 0 1px var(--franja-borde), 0 -1px var(--franja-borde), 0 2px var(--franja-borde);
  }
  .site-footer__franja-track {
    display: inline-flex;
    animation: footer-franja 40s linear infinite;
  }
  .site-footer__franja-track span { padding-right: 28px; }
  @keyframes footer-franja { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .site-footer__franja-track { animation: none; }
  }

  .site-footer--nq .site-footer__col--newsletter {
    padding: 18px 16px 20px;
    border: 2px solid var(--color-brand-accent);
    border-radius: 20px;
    background: var(--color-bg);
    box-shadow: 5px 5px 0 var(--color-brand-accent);
  }
  .site-footer__nl-ico {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 4px;
  }
  .site-footer--nq .site-footer__newsletter-btn {
    --nq-btn-borde: color-mix(in srgb, var(--color-brand-secondary) 50%, var(--color-text));
    background: var(--color-brand-secondary);
    color: var(--color-bg);
    box-shadow: 3px 3px 0 var(--nq-btn-borde);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .site-footer--nq .site-footer__social a {
    border-color: var(--color-brand-accent);
    background: var(--color-brand-accent);
    color: var(--color-bg);
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--color-brand-accent) 58%, var(--color-text));
  }
  .site-footer--nq .site-footer__social a:hover,
  .site-footer--nq .site-footer__social a:focus-visible {
    border-color: var(--color-brand-secondary);
    background: var(--color-brand-secondary);
  }

  .site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
  }

  /* Columns: mobile 1 col, tablet+ auto-fit */
  .site-footer__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .site-footer__col {
    min-width: 0;
  }

  /* En mobile, newsletter y social se ven mejor centrados. */
  .site-footer__col--newsletter,
  .site-footer__col--social {
    text-align: center;
  }

  .site-footer__col--newsletter .site-footer__col-title,
  .site-footer__col--social .site-footer__col-title {
    justify-content: center;
  }

  .site-footer__col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) 0 var(--space-md);
    font-size: 14px;
    font-weight: var(--font-weight-heading);
    color: var(--footer-heading);
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid var(--footer-border);
    margin: 0 0 var(--space-md);
  }

  .site-footer__col-title::-webkit-details-marker {
    display: none;
  }

  .site-footer__logo {
    display: inline-block;
    margin-bottom: var(--space-sm);
  }
  .site-footer__logo-img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  .site-footer__logo:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
  }

  .site-footer__col-title--static {
    cursor: default;
    padding-top: 0;
  }

  .site-footer__col-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform 200ms ease;
  }

  .site-footer__col[open] .site-footer__col-chevron {
    transform: rotate(180deg);
  }

  .site-footer__links {
    list-style: none;
    padding: var(--space-sm) 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .site-footer__links a {
    color: var(--footer-link);
    text-decoration: none;
    font-size: 13px;
    display: inline-block;
    padding: 4px 0;
  }

  .site-footer__links a:hover,
  .site-footer__links a:focus-visible {
    color: var(--footer-link-hover);
    text-decoration: underline;
  }

  .site-footer__placeholder {
    color: var(--footer-text-muted);
    font-size: 12px;
    font-style: italic;
    padding: var(--space-sm) 0;
    margin: 0;
  }

  /* Newsletter */
  .site-footer__newsletter-desc {
    font-size: 13px;
    color: var(--footer-text-muted);
    margin: 0 0 var(--space-sm);
    line-height: 1.4;
  }

  .site-footer__newsletter-form {
    margin: 0;
  }

  .site-footer__newsletter-input-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .site-footer__newsletter-input-wrap input[type="email"] {
    flex: 1 1 200px;
    min-width: 0;
    padding: 12px 18px;
    border: 1px solid var(--footer-border);
    border-radius: var(--radius-full);
    background: var(--nl-input-bg, var(--footer-card-bg));
    color: var(--footer-text);
    font-size: 13px;
    font-family: inherit;
  }

  .site-footer__newsletter-input-wrap input[type="email"]:focus {
    outline: 2px solid var(--color-brand-secondary);
    outline-offset: 1px;
    border-color: var(--color-brand-secondary);
  }

  .site-footer__newsletter-btn {
    background: var(--nl-btn-bg, var(--color-brand-primary));
    color: var(--nl-btn-fg, var(--color-text));
    border: none;
    padding: 12px 22px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-heading);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 150ms ease, transform 150ms ease;
    letter-spacing: 0.02em;
  }

  .site-footer__newsletter-btn:hover,
  .site-footer__newsletter-btn:focus-visible {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  .site-footer__newsletter-msg {
    margin: var(--space-sm) 0 0;
    font-size: 12px;
    line-height: 1.4;
  }

  .site-footer__newsletter-msg--success {
    color: var(--color-brand-secondary);
  }

  .site-footer__newsletter-msg--error {
    color: var(--color-brand-danger);
  }

  /* Text block */
  .site-footer__text-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--footer-text-muted);
  }

  .site-footer__text-body p {
    margin: 0 0 var(--space-sm);
  }

  .site-footer__text-body p:last-child {
    margin-bottom: 0;
  }

  .site-footer__text-body a {
    color: var(--footer-link-hover);
    text-decoration: underline;
  }

  /* Social icons */
  .site-footer__social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sc-bg, var(--footer-card-bg));
    color: var(--sc-fg, var(--footer-text));
    text-decoration: none;
    border: 1px solid var(--footer-border);
    transition: background 150ms ease, color 150ms ease, transform 150ms ease, border-color 150ms ease;
  }

  .site-footer__social a:hover,
  .site-footer__social a:focus-visible {
    background: var(--sc-hover-bg, var(--color-brand-secondary));
    color: var(--sc-hover-fg, var(--color-bg));
    border-color: var(--sc-hover-bg, var(--color-brand-secondary));
    transform: translateY(-2px);
  }

  .site-footer__social svg {
    width: 18px;
    height: 18px;
  }

  /* Bottom bar: copyright + payment icons */
  .site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
    text-align: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--footer-border);
  }

  .site-footer__copyright {
    font-size: 12px;
    color: var(--footer-text-muted);
  }

  .site-footer__copyright a {
    color: var(--footer-text);
    text-decoration: none;
    font-weight: var(--font-weight-strong);
  }

  .site-footer__payment {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .site-footer__payment svg {
    height: 22px;
    width: auto;
  }

  /* Mobile pequeño (<380 iPhone SE) */
  @media (max-width: 379.98px) {
    .site-footer {
      padding-top: var(--space-lg);
      padding-bottom: calc(var(--space-lg) + 52px + env(safe-area-inset-bottom));
    }
    .site-footer__col-title { font-size: 13px; }
    .site-footer__links a { font-size: 12px; }
  }

  /* Tablet+ (>=750): grid multi-columna, menus siempre abiertos, sin
     espacio extra por bottom-bar (que no aparece). */
  @media (min-width: 750px) {
    .site-footer {
      padding: var(--space-2xl) 0 0;
      padding-bottom: 0;
    }

    .site-footer__inner {
      padding-left: var(--space-lg);
      padding-right: var(--space-lg);
    }

    .site-footer__columns {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--space-xl);
    }

    .site-footer__col--newsletter,
    .site-footer__col--social {
      text-align: left;
    }

    .site-footer__social {
      justify-content: flex-start;
    }

    /* Desktop: menus siempre abiertos (details visual como div normal) */
    .site-footer__col--menu {
      pointer-events: auto;
    }

    .site-footer__col-title {
      cursor: default;
      pointer-events: none;
      border-bottom: none;
      padding: 0;
      margin: 0 0 var(--space-sm);
    }

    .site-footer__col-chevron {
      display: none;
    }

    .site-footer__links {
      padding: 0;
    }

    .site-footer__bottom {
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
      margin-top: var(--space-xl);
      padding-top: var(--space-lg);
      padding-bottom: var(--space-xl);
    }
  }

  /* Fuerza open en desktop para <details> (a11y-friendly, sin JS) */
  @media (min-width: 750px) {
    .site-footer__col[open],
    .site-footer__col:not([open]) .site-footer__links {
      display: block;
    }
    .site-footer__col:not([open]) .site-footer__links {
      /* En desktop siempre visibles independiente de open */
      padding: 0;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:frequently-bought-together (INDEX:11) */
.fbt {
    padding: var(--space-lg) 0;
    view-transition-name: none;
  }
  .fbt--empty { display: none; }
  /* Mientras hydratamos via /recommendations/products, no mostramos el flash del
     producto actual solo — la seccion aparece cuando el fetch confirma extras. */
  .fbt--hydrating { display: none; }

  .fbt__container {
    background: color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, #6c3fd4)) 10%, var(--color-bg));
    border-radius: var(--radius-lg, 20px);
    padding: clamp(20px, 4vw, 36px) clamp(18px, 4vw, 36px);
  }

  .fbt__header {
    margin: 0 0 clamp(18px, 3vw, 28px);
  }

  /* Estilo NQ (.nq-kicker en snippets/nq-estilo); en páginas de marca toma el color de la marca */
  .fbt__eyebrow {
    --nq-kicker-bg: var(--page-brand-bg, var(--color-brand-accent));
    margin: 0 0 10px;
  }

  .fbt__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(22px, 4vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--color-text);
    max-width: 40ch;
  }

  /* ============ Body: cards + summary ============ */
  .fbt__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 24px);
  }

  @media (min-width: 990px) {
    .fbt__body {
      grid-template-columns: 1fr minmax(240px, 300px);
      align-items: start;
    }
  }

  /* ============ Products grid ============ */
  .fbt__products {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  @media (min-width: 550px) {
    .fbt__products {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 990px) {
    .fbt__products {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ============ Card ============ */
  .fbt__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 12px;
    background: var(--color-bg);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md, 14px);
    cursor: pointer;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    isolation: isolate;
  }

  .fbt__card:hover {
    border-color: color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 30%, transparent);
    transform: translateY(-1px);
  }

  .fbt__card:has(.fbt__check:checked) {
    border-color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 15%, transparent);
  }

  .fbt__card--current {
    background: var(--color-bg);
    cursor: default;
  }

  .fbt__card--current:hover {
    transform: none;
  }

  /* Native checkbox oculto — solo para accesibilidad y estado */
  .fbt__check {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    margin: 0;
  }
  .fbt__card--current .fbt__check { pointer-events: none; }

  /* Check visual: circulo esquina superior derecha */
  .fbt__check-visual {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1.5px solid color-mix(in srgb, var(--color-text) 15%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  .fbt__card:has(.fbt__check:checked) .fbt__check-visual {
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    border-color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--color-bg);
    transform: scale(1.05);
  }

  /* Media */
  .fbt__card-media {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    background: var(--color-bg-soft, #f4f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fbt__card-media img,
  .fbt__card-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .fbt__card-placeholder {
    background: linear-gradient(135deg, var(--color-bg-soft, #f4f4f6), color-mix(in srgb, var(--color-text) 6%, transparent));
  }

  /* Info */
  .fbt__card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .fbt__card-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: var(--font-weight-strong);
    line-height: 1.25;
    color: var(--color-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .fbt__card-price {
    font-size: 13px;
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
  }

  .fbt__card-tag {
    font-size: 11.5px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
  }

  /* Precio con descuento por card */
  .fbt__card-price-final {
    color: var(--color-brand-danger, #c33a3a);
    font-weight: var(--font-weight-strong);
  }
  .fbt__card-price-compare {
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-size: 12px;
  }

  /* Badge de descuento (esquina superior izquierda de la card) */
  .fbt__card-badge {
    position: absolute;
    top: -6px;
    left: 10px;
    z-index: 2;
    padding: 3px 8px;
    background: var(--color-brand-danger, #c33a3a);
    color: #fff;
    border-radius: var(--radius-sm, 4px);
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.04em;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }

  .fbt__card--on-sale {
    /* Border sutil rojo para marcar visualmente los productos en oferta */
    border-color: color-mix(in srgb, var(--color-brand-danger, #c33a3a) 20%, transparent);
  }
  .fbt__card--on-sale:has(.fbt__check:checked) {
    border-color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
  }

  /* Countdown flash de urgencia: pill compacto debajo del precio.
     Arranca hidden y el JS lo muestra cuando confirma que la fecha es futura. */
  .fbt__card-countdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 8px;
    background: color-mix(in srgb, var(--color-brand-danger, #c33a3a) 12%, transparent);
    color: var(--color-brand-danger, #c33a3a);
    border-radius: var(--radius-sm, 4px);
    font-size: 11px;
    font-weight: var(--font-weight-strong);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  .fbt__card-countdown svg {
    flex-shrink: 0;
  }
  .fbt__card-countdown-label {
    opacity: 0.85;
  }
  .fbt__card-countdown time {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
  }

  /* ============ Summary panel ============ */
  .fbt__summary {
    background: transparent;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
  }

  @media (min-width: 990px) {
    .fbt__summary {
      position: sticky;
      top: calc(var(--header-height, 60px) + 12px);
      text-align: right;
      padding: 8px 4px 8px 12px;
      align-self: start;
    }
  }

  .fbt__summary-label {
    font-size: 12px;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
  }

  .fbt__summary-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    flex-wrap: wrap;
  }

  @media (min-width: 990px) {
    .fbt__summary-total {
      justify-content: flex-end;
    }
  }

  .fbt__summary-price {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }

  .fbt__summary-compare s {
    font-size: 16px;
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
  }

  .fbt__summary-savings {
    font-size: 12.5px;
    color: var(--color-brand-secondary, #20b19e);
    margin: 0;
    font-weight: var(--font-weight-strong);
  }

  .fbt__summary-savings strong {
    font-weight: var(--font-weight-heading);
  }

  .fbt__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 14px 18px;
    background: var(--color-text);
    color: var(--color-bg);
    border: 0;
    border-radius: var(--radius-full, 999px);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-strong);
    font-size: 14px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 200ms ease, transform 200ms ease;
  }

  .fbt__cta:hover:not(:disabled) {
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    transform: translateY(-1px);
  }

  .fbt__cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .fbt__cta-loading {
    display: none;
    align-items: center;
  }
  .fbt__cta.is-loading .fbt__cta-label { visibility: hidden; }
  .fbt__cta.is-loading .fbt__cta-loading {
    display: inline-flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .fbt__cta-loading svg {
    animation: fbt-spin 800ms linear infinite;
  }

  @keyframes fbt-spin {
    to { transform: rotate(360deg); }
  }

  .fbt__cta.is-added {
    background: var(--color-brand-secondary, #20b19e);
  }

  @media (prefers-reduced-motion: reduce) {
    .fbt__card,
    .fbt__check-visual,
    .fbt__cta,
    .fbt__cta-loading svg {
      transition: none;
      animation: none;
    }
  }
/* END_SECTION:frequently-bought-together */

/* START_SECTION:header-desktop-nav (INDEX:12) */
.header-nav-desktop {
    display: none;
    background: var(--nav-bg);
    color: var(--nav-fg);
  }

  /* Sticky en el wrapper (.shopify-section-header-desktop-nav),
     no en el <nav>, porque el wrapper es el que respeta la stacking
     order arriba del contenido. top: 72px = altura del header-desktop. */
  @media (min-width: 750px) {
    .header-nav-desktop { display: block; }
    .shopify-section-header-desktop-nav {
      position: sticky;
      top: 72px;
      z-index: 90;
      background: var(--nav-bg, #1a1a1a);
    }
  }

  .header-nav-desktop__inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 44px;
  }

  /* ============ Boton "Todas las categorias" ============ */
  .header-nav-desktop__mega {
    position: relative;
  }

  .header-nav-desktop__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background: transparent;
    color: var(--nav-fg);
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
    font-weight: var(--font-weight-heading);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 150ms ease;
  }

  .header-nav-desktop__toggle:hover,
  .header-nav-desktop__toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
  }

  .header-nav-desktop__toggle-caret {
    display: inline-flex;
    transition: transform 200ms ease;
  }

  .header-nav-desktop__toggle[aria-expanded="true"] .header-nav-desktop__toggle-caret {
    transform: rotate(-180deg);
  }

  /* ============ Mega menu ============ */
  .mega-menu {
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    width: 260px;
    background: #ffffff;
    color: #1a1a1a;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
    z-index: 100;
    overflow: hidden;
    transition: width 380ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mega-menu[hidden] { display: none; }

  .mega-menu.has-active-panel {
    width: min(1080px, 92vw);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 380px;
  }

  /* Panel derecho oculto por default; solo visible cuando .has-active-panel */
  .mega-menu__panels {
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }

  .mega-menu.has-active-panel .mega-menu__panels {
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms ease 220ms, visibility 0s;
  }

  .mega-menu__list {
    list-style: none;
    margin: 0;
    padding: var(--space-sm) 0;
    background: #f7f7f9;
    border-right: 1px solid var(--color-border);
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .mega-menu__link {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 120ms ease, color 120ms ease;
    gap: 10px;
  }

  .mega-menu__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  }

  .mega-menu__link-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mega-menu__link-initial {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted, #6b6b74);
  }

  /* Hasta 2 lineas: "Cuidado personal y bienestar" no entra en una. */
  .mega-menu__link-name {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .mega-menu__link:hover,
  .mega-menu__link.is-hover {
    background: #ffffff;
    color: var(--nav-accent);
  }

  .mega-menu__caret {
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-muted, #6b6b74);
    transition: transform 150ms ease;
  }

  .mega-menu__link.is-hover .mega-menu__caret,
  .mega-menu__link:hover .mega-menu__caret {
    color: var(--nav-accent);
    transform: translateX(2px);
  }

  /* ============ Panel derecho (nivel 2 con miniaturas) ============ */
  .mega-menu__panels {
    padding: var(--space-md) var(--space-lg);
    position: relative;
  }

  .mega-menu__panel {
    animation: mega-panel-in 260ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes mega-panel-in {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mega-menu__panel { animation: none; }
  }

  .mega-menu__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .mega-menu__panel[hidden] { display: none; }

  .mega-menu__panel--empty {
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #6b6b74);
    font-style: italic;
    height: 100%;
    text-align: center;
  }

  .mega-menu__panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
  }

  .mega-menu__panel-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: var(--font-weight-heading);
    margin: 0;
    color: #1a1a1a;
  }

  .mega-menu__panel-viewall {
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--nav-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .mega-menu__panel-viewall:hover { text-decoration: underline; }

  /* El panel puede ser largo (Hogar tiene 7 columnas con hasta 9 enlaces). */
  .mega-menu__panels {
    max-height: min(560px, calc(100vh - 140px));
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .mega-menu__cols {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-lg) var(--space-md);
    align-items: start;
  }

  .mega-menu__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .mega-menu__thumb {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text);
  }

  .mega-menu__thumb:hover .mega-menu__thumb-label,
  .mega-menu__thumb:focus-visible .mega-menu__thumb-label {
    color: var(--nav-accent);
  }

  .mega-menu__thumb-img {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: #f4f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: box-shadow 150ms ease;
  }

  .mega-menu__thumb:hover .mega-menu__thumb-img {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  }

  .mega-menu__thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mega-menu__thumb-initial {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text-muted, #6b6b74);
  }

  .mega-menu__thumb-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    transition: color 120ms ease;
  }

  /* Nivel 3 */
  .mega-menu__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mega-menu__sub-link {
    display: inline-block;
    padding: 2px 0;
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-text-muted);
    text-decoration: none;
  }

  .mega-menu__sub-link:hover,
  .mega-menu__sub-link:focus-visible {
    color: var(--nav-accent);
    text-decoration: underline;
  }

  /* ============ Links secundarios ============ */
  .header-nav-desktop__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .header-nav-desktop__link {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 12px;
    color: var(--nav-fg);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 150ms ease, color 150ms ease;
  }

  .header-nav-desktop__link:hover,
  .header-nav-desktop__link:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
  }

  .header-nav-desktop__link.is-highlight {
    color: var(--nav-accent);
    font-weight: 700;
  }

  /* Tablet 750-989: reducir espacios */
  @media (min-width: 750px) and (max-width: 989px) {
    .header-nav-desktop__link { padding: 0 8px; font-size: 12px; }
    .mega-menu { width: min(720px, 92vw); }
    .mega-menu__grid { grid-template-columns: 220px 1fr; }
  }
/* END_SECTION:header-desktop-nav */

/* START_SECTION:header-desktop (INDEX:13) */
.header-desktop {
    display: none;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
  }

  /* Sticky va en el wrapper que Shopify genera (.shopify-section-header-desktop)
     porque position:sticky en el <header> interno queda atrapado en ese wrapper.
     Mismo patron que .shopify-section-header (mobile). */
  @media (min-width: 750px) {
    .header-desktop { display: block; }
    .shopify-section-header-desktop {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--color-bg);
    }
  }

  .header-desktop__inner {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: var(--space-md);
    min-height: 72px;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  .header-desktop__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    flex: 0 0 auto;
  }

  .header-desktop__logo-image {
    display: block;
    height: auto;
    max-height: 48px;
    width: auto;
    object-fit: contain;
  }

  .header-desktop__logo-text {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 24px;
    letter-spacing: -0.02em;
    color: var(--color-text);
    white-space: nowrap;
  }

  /* ============ Beneficios rotativos ============ */
  .header-desktop__benefits {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 200px;
    height: 44px;
    perspective: 800px;
  }

  .header-desktop__benefit {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotateY(90deg);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: var(--radius-full);
    background: var(--benefits-bg);
    color: var(--benefits-fg);
    min-height: 36px;
    line-height: 1.1;
    opacity: 0;
    backface-visibility: hidden;
    transition: opacity 260ms ease, transform 520ms cubic-bezier(0.4, 0.2, 0.2, 1);
    pointer-events: none;
    will-change: transform, opacity;
    white-space: nowrap;
  }

  .header-desktop__benefit.is-active {
    opacity: 1;
    transform: translateY(-50%) rotateY(0);
    pointer-events: auto;
  }

  .header-desktop__benefits:not([data-carousel-ready]) .header-desktop__benefit:nth-of-type(1) {
    opacity: 1;
    transform: translateY(-50%) rotateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .header-desktop__benefit {
      transition: opacity 150ms ease;
      transform: translateY(-50%);
    }
  }

  .header-desktop__benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--benefits-fg);
    color: var(--benefits-bg);
    flex: 0 0 auto;
  }

  .header-desktop__benefit-icon svg {
    width: 15px;
    height: 15px;
    display: block;
  }

  .header-desktop__benefit-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .header-desktop__benefit-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
  }
  .header-desktop__benefit-title strong { font-weight: 800; }

  .header-desktop__benefit-subtitle {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.9;
    line-height: 1.15;
  }

  /* ============ Buscador ============ */
  .header-desktop__search {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    background: var(--color-bg-soft, #f4f4f6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    height: 44px;
    padding: 0 4px 0 14px;
    max-width: 640px;
    width: 100%;
    justify-self: stretch;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }

  .header-desktop__search:focus-within {
    border-color: var(--color-brand-secondary, #20b19e);
    box-shadow: 0 0 0 3px rgba(32, 177, 158, 0.15);
    background: var(--color-bg);
  }

  .header-desktop__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #6b6b74);
    flex: 0 0 auto;
  }

  .header-desktop__search-icon svg {
    width: 18px;
    height: 18px;
  }

  .header-desktop__search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--color-text);
    padding: 0 10px;
    height: 100%;
    width: 100%;
    min-width: 0;
  }

  .header-desktop__search-input::placeholder {
    color: var(--color-text-muted, #6b6b74);
  }

  /* Ocultar la X nativa del input[type=search] en todos los navegadores */
  .header-desktop__search-input::-webkit-search-cancel-button,
  .header-desktop__search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
  }
  .header-desktop__search-input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
  }

  .header-desktop__search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-right: 4px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-muted, #6b6b74);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
  }

  .header-desktop__search-clear:hover,
  .header-desktop__search-clear:focus-visible {
    background: rgba(0, 0, 0, 0.12);
    color: var(--color-text);
    outline: none;
  }

  .header-desktop__search-clear[hidden] { display: none; }

  .header-desktop__search-btn {
    background: var(--color-text);
    color: var(--color-bg);
    border: none;
    height: 36px;
    padding: 0 18px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-heading);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    flex: 0 0 auto;
  }

  /* Predictive search dropdown */
  .header-desktop__predictive {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    max-height: 480px;
    overflow-y: auto;
  }

  .header-desktop__predictive[hidden] { display: none; }

  .header-desktop__predictive-inner {
    padding: 8px;
  }

  .header-desktop__predictive-empty {
    padding: 20px 12px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13.5px;
    margin: 0;
  }

  .header-desktop__predictive-empty[hidden] { display: none; }

  .header-desktop__predictive-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .header-desktop__predictive-item a {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    transition: background-color 120ms ease;
  }

  .header-desktop__predictive-item a:hover,
  .header-desktop__predictive-item.is-focus a {
    background: var(--color-bg-soft);
    outline: none;
  }

  .header-desktop__predictive-media {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-soft);
    flex-shrink: 0;
  }

  .header-desktop__predictive-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .header-desktop__predictive-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .header-desktop__predictive-title {
    font-size: 13.5px;
    font-weight: var(--font-weight-strong);
    line-height: 1.3;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-desktop__predictive-vendor {
    font-size: 11.5px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .header-desktop__predictive-price {
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
    white-space: nowrap;
  }

  .header-desktop__predictive-price-compare {
    text-decoration: line-through;
    color: var(--color-text-muted);
    font-size: 11.5px;
    margin-right: 4px;
    font-weight: var(--font-weight-normal);
  }

  .header-desktop__predictive-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
  }

  .header-desktop__predictive-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 9.5px;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
  }

  .header-desktop__predictive-badge--sale {
    background: var(--color-brand-danger, #c33a3a);
    color: #fff;
  }

  .header-desktop__predictive-badge--tag {
    background: var(--color-brand-accent, var(--color-text));
    color: var(--color-bg);
  }

  .header-desktop__predictive-badge--out {
    background: color-mix(in srgb, var(--color-text) 12%, transparent);
    color: var(--color-text-muted);
  }

  .header-desktop__predictive-item.is-out .header-desktop__predictive-media img,
  .header-desktop__predictive-item.is-out .header-desktop__predictive-title,
  .header-desktop__predictive-item.is-out .header-desktop__predictive-vendor,
  .header-desktop__predictive-item.is-out .header-desktop__predictive-price {
    opacity: 0.55;
  }

  .header-desktop__predictive-item.is-out .header-desktop__predictive-price {
    text-decoration: line-through;
  }

  .header-desktop__predictive-view-all {
    display: block;
    text-align: center;
    padding: 10px 8px;
    margin-top: 4px;
    border-top: 1px solid var(--color-border);
    color: var(--color-brand-accent, var(--color-text));
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    text-decoration: none;
  }

  .header-desktop__predictive-view-all:hover {
    background: var(--color-bg-soft);
  }

  .header-desktop__predictive-loading {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 12.5px;
  }

  .header-desktop__search-btn:hover,
  .header-desktop__search-btn:focus-visible {
    background: var(--color-brand-secondary, #20b19e);
    outline: none;
  }

  /* ============ Acciones (cuenta / wishlist / carrito) ============ */
  .header-desktop__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
  }

  .header-desktop__action {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 10px;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background 150ms ease;
    min-width: 60px;
  }

  .header-desktop__action:hover,
  .header-desktop__action:focus-visible {
    background: var(--color-bg-soft, #f4f4f6);
    outline: none;
  }

  .header-desktop__action svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .header-desktop__action-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
  }

  .header-desktop__badge {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary, #ffcd11);
    color: var(--color-text);
    font-size: 11px;
    font-weight: var(--font-weight-strong, 700);
    line-height: 18px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .header-desktop__badge--cart {
    background: var(--color-brand-secondary, #20b19e);
    color: var(--color-bg);
  }

  .header-desktop__badge[hidden],
  .header-desktop__badge[data-count="0"] {
    display: none;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Ajustes tablets ~750-990 */
  @media (min-width: 750px) and (max-width: 989px) {
    .header-desktop__benefits { display: none; }
    .header-desktop__action-label { display: none; }
    .header-desktop__action { min-width: 44px; padding: 8px; }
  }
/* END_SECTION:header-desktop */

/* START_SECTION:header-info-bar (INDEX:14) */
.header-info-bar {
    background: transparent;
    padding: 8px var(--space-md);
    color: var(--info-bar-fg);
    transition: background 400ms cubic-bezier(0.2, 0, 0, 1);
  }

  /* Cuando el hero brand carousel activa una marca, propaga su color
     a la info-bar (efecto "el color de la marca sube hasta los beneficios"). */
  html.has-brand-bg .header-info-bar {
    background: var(--brand-active-bg);
  }

  @media (min-width: 750px) {
    .header-info-bar {
      display: none;
    }
  }

  .header-info-bar__carousel {
    position: relative;
    min-height: 40px;
    perspective: 800px;
  }

  .header-info-bar__item {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(50% - 4px);
    align-items: center;
    gap: 8px;
    background: var(--info-bar-bg);
    color: var(--info-bar-fg);
    padding: 5px 12px 5px 5px;
    border-radius: var(--radius-full);
    min-height: 40px;
    text-align: left;
    line-height: 1.1;
    min-width: 0;
    display: inline-flex;
    opacity: 0;
    transform: rotateY(90deg);
    transform-origin: center;
    backface-visibility: hidden;
    transition: opacity 250ms ease, transform 500ms cubic-bezier(0.4, 0.2, 0.2, 1);
    pointer-events: none;
    will-change: transform, opacity;
  }

  .header-info-bar__item.is-slot-1 {
    left: 0; right: auto;
    opacity: 1; transform: rotateY(0);
    pointer-events: auto;
    transition-delay: 0ms;
  }

  .header-info-bar__item.is-slot-2 {
    left: auto; right: 0;
    opacity: 1; transform: rotateY(0);
    pointer-events: auto;
    transition-delay: 80ms;
  }

  .header-info-bar__carousel:not([data-carousel-ready]) .header-info-bar__item:nth-of-type(1) {
    left: 0; right: auto; opacity: 1; transform: rotateY(0);
  }
  .header-info-bar__carousel:not([data-carousel-ready]) .header-info-bar__item:nth-of-type(2) {
    left: auto; right: 0; opacity: 1; transform: rotateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .header-info-bar__item {
      transition: opacity 150ms ease;
      transform: rotateY(0);
    }
  }

  .header-info-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--info-bar-fg);
    color: var(--info-bar-bg);
    flex: 0 0 auto;
  }

  .header-info-bar__icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .header-info-bar__text-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .header-info-bar__title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .header-info-bar__title strong { font-weight: 800; }

  .header-info-bar__subtitle {
    font-size: 9.5px;
    font-weight: 500;
    line-height: 1.15;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
/* END_SECTION:header-info-bar */

/* START_SECTION:header (INDEX:15) */
/* HEADER MOBILE — TODO oculto en tablet+desktop (>=750px).
     Ver: memory/feedback-header-mobile-oculto-desktop.md */

  /* Sticky va en el wrapper que Shopify auto-genera (.shopify-section-header)
     porque position:sticky en <header> queda atrapado dentro de ese wrapper. */
  /* Zona segura del iPhone (hora, batería, notch): arriba de todo el
     header va en su lugar normal (con top: env() se corría hacia abajo y
     tapaba la franja de beneficios). Solo cuando ya se bajó más que su alto
     (.is-stuck, lo pone el JS) se detiene debajo de la zona segura y el
     ::before de .site-header la tapa con el fondo del header. */
  .shopify-section-header {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1);
    will-change: transform;
  }

  .shopify-section-header.is-stuck {
    top: env(safe-area-inset-top, 0px);
  }

  .shopify-section-header.is-hidden {
    transform: translateY(calc(-100% - env(safe-area-inset-top, 0px)));
  }

  @media (min-width: 750px) {
    .shopify-section-header {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .shopify-section-header {
      transition: none;
    }
  }

  .site-header {
    position: relative;
    background: var(--color-bg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
  }

  .site-header::before {
    content: none;
  }
  .is-stuck .site-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: env(safe-area-inset-top, 0px);
    background: var(--color-bg);
    pointer-events: none;
  }

  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-sm);
    min-height: 56px;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
  }

  .site-header__logo {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    max-width: 60vw;
  }

  .site-header__logo-image {
    display: block;
    height: auto;
    max-height: 36px;
    width: auto;
    object-fit: contain;
  }

  .site-header__logo-text {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--color-text);
    white-space: nowrap;
  }

  .site-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }

  .site-header__actions--right {
    justify-self: end;
  }

  .site-header__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 150ms ease, color 150ms ease;
  }

  .site-header__action:hover,
  .site-header__action:focus-visible {
    background: var(--color-bg-soft);
  }

  .site-header__action--left {
    justify-self: start;
  }

  /* Botón "Buscar" — pill solo con trazo (outline), sin fondo.
     Ícono + texto en línea, con la lupa un poco más chica. */
  .site-header__action--search {
    min-width: 0;
    min-height: 0;
    height: 34px;
    padding: 0 20px 0 14px;
    gap: 8px;
    font-size: 13.5px;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.01em;
    color: var(--color-text);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
    border-radius: var(--radius-full, 999px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    font-family: inherit;
    transition: color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  }

  .site-header__action--search .site-header__icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
  }

  .site-header__action--search:hover,
  .site-header__action--search:focus-visible {
    background: transparent;
    border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
    color: var(--color-text);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    outline: none;
  }

  .site-header__action-label {
    display: inline-block;
    line-height: 1;
  }

  .site-header__icon {
    width: 22px;
    height: 22px;
    display: block;
  }

  .site-header__badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    color: var(--color-text);
    font-size: 11px;
    font-weight: var(--font-weight-strong);
    line-height: 18px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .site-header__badge[hidden] {
    display: none;
  }

  .site-header__badge--cart {
    background: var(--color-brand-secondary);
    color: var(--color-bg);
  }

  .site-header__badge[data-count="0"] {
    display: none;
  }

  /* ============================================================
     Chips de colecciones (block collection_chips)
     ============================================================ */
  .site-header__chips {
    background: var(--color-bg);
    padding: 4px 0;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
  }

  .site-header__chips-scroll {
    display: flex;
    gap: 4px;
    padding: 0 var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .site-header__chips-scroll::-webkit-scrollbar { display: none; }

  .site-header__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 3px 9px;
    background: var(--color-bg-soft);
    color: var(--color-text);
    text-decoration: none;
    font-size: 11px;
    font-weight: var(--font-weight-strong);
    white-space: nowrap;
    transition: background 150ms ease, color 150ms ease;
    min-height: 24px;
    line-height: 1.1;
  }

  .site-header__chips--pill .site-header__chip { border-radius: var(--radius-full); }
  .site-header__chips--rounded .site-header__chip { border-radius: var(--radius-md); }
  .site-header__chips--square .site-header__chip { border-radius: 0; }

  .site-header__chip:hover,
  .site-header__chip:focus-visible {
    background: var(--color-border);
  }

  .site-header__chip.is-active {
    background: var(--color-brand-secondary);
    color: var(--color-bg);
  }

  .site-header__chip--placeholder {
    opacity: 0.6;
    font-style: italic;
  }

  .site-header__chips--with-image .site-header__chip {
    padding: 2px 8px 2px 2px;
    min-height: 28px;
  }

  .site-header__chip-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--color-bg);
    overflow: hidden;
    flex: 0 0 auto;
  }

  .site-header__chips--rounded.site-header__chips--with-image .site-header__chip-image,
  .site-header__chips--square.site-header__chips--with-image .site-header__chip-image {
    border-radius: var(--radius-sm);
  }

  .site-header__chip-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .site-header__chip-initial {
    font-size: 11px;
    font-weight: var(--font-weight-heading);
    color: var(--color-text-muted);
  }

  .site-header__chip-image--all svg {
    width: 13px;
    height: 13px;
    color: var(--color-text-muted);
  }

  .site-header__chip.is-active .site-header__chip-image {
    background: rgba(255, 255, 255, 0.2);
  }
  .site-header__chip.is-active .site-header__chip-initial,
  .site-header__chip.is-active .site-header__chip-image--all svg {
    color: var(--color-bg);
  }

  /* ============ Búsqueda mobile ============ */
  .site-header__search-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-bg);
    z-index: 30;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--color-border);
    transform-origin: top;
    animation: header-search-in 180ms cubic-bezier(0.2, 0, 0, 1);
  }

  .site-header__search-panel[hidden] { display: none; }

  @keyframes header-search-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .site-header__search-form {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .site-header__search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--color-brand-danger, #c33a3a);
    background: transparent;
    color: var(--color-brand-danger, #c33a3a);
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
  }

  .site-header__search-close svg {
    width: 14px;
    height: 14px;
  }

  .site-header__search-close:hover,
  .site-header__search-close:focus-visible {
    background: var(--color-brand-danger, #c33a3a);
    color: var(--color-bg);
    transform: scale(1.05);
    outline: none;
  }

  .site-header__search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    padding: 0 12px 0 34px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }

  .site-header__search-input-wrap:focus-within {
    border-color: var(--color-brand-accent, var(--color-text));
    background: var(--color-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent, var(--color-text)) 15%, transparent);
  }

  .site-header__search-input-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--color-text);
    pointer-events: none;
  }

  .site-header__search-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 14.5px;
  }

  .site-header__search-input:focus { outline: none; }

  .site-header__search-input::-webkit-search-cancel-button,
  .site-header__search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

  /* Resultados predictivos abajo — parte del mismo panel, sutil */
  .site-header__search-results {
    margin-top: 10px;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .site-header__search-results[hidden] { display: none; }

  .site-header__search-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .site-header__search-item a {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
  }

  .site-header__search-item a:hover,
  .site-header__search-item a:focus-visible {
    background: var(--color-bg-soft);
    outline: none;
  }

  .site-header__search-media {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-soft);
    flex-shrink: 0;
  }

  .site-header__search-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .site-header__search-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .site-header__search-title {
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    line-height: 1.3;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header__search-price {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .site-header__search-price-compare {
    text-decoration: line-through;
    margin-right: 4px;
    font-size: 10.5px;
  }

  .site-header__search-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
  }

  .site-header__search-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 9px;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
  }

  .site-header__search-badge--sale {
    background: var(--color-brand-danger, #c33a3a);
    color: #fff;
  }

  .site-header__search-badge--tag {
    background: var(--color-brand-accent, var(--color-text));
    color: var(--color-bg);
  }

  .site-header__search-badge--out {
    background: color-mix(in srgb, var(--color-text) 12%, transparent);
    color: var(--color-text-muted);
  }

  .site-header__search-item.is-out .site-header__search-media img,
  .site-header__search-item.is-out .site-header__search-title,
  .site-header__search-item.is-out .site-header__search-price {
    opacity: 0.55;
  }

  .site-header__search-item.is-out .site-header__search-price {
    text-decoration: line-through;
  }

  .site-header__search-view-all {
    display: block;
    padding: 10px;
    margin-top: 4px;
    text-align: center;
    color: var(--color-brand-accent, var(--color-text));
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    text-decoration: none;
    border-top: 1px solid var(--color-border);
  }

  .site-header__search-empty,
  .site-header__search-loading {
    padding: 18px 12px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 12.5px;
  }
/* END_SECTION:header */

/* START_SECTION:hero-brand-carousel (INDEX:16) */
.hero-brand-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .hero-brand-carousel__heading {
    font-size: 22px;
    font-weight: var(--font-weight-heading);
    margin: 0 0 var(--space-md);
    padding-top: var(--space-lg);
    text-align: center;
  }

  /* Las tarjetas van en position: absolute y su alto sale del ancho (9:16),
     asi que la seccion tiene que crecer con ellas: en pantallas anchas
     (Xiaomi Note 14 Pro, 443px) la tarjeta pasaba los 560px fijos y tapaba
     los botones de marca. --hb-card-h replica la tarjeta: 82% del ancho
     (max 380px) menos sus 16px de margen a cada lado, en 9:16. Abajo queda
     lugar para los puntos. */
  .hero-brand-carousel {
    --hb-card-h: calc((min(82vw, 380px) - 32px) * 16 / 9);
  }
  .hero-brand-carousel__viewport {
    position: relative;
    min-height: max(560px, calc(var(--hb-card-h) + 84px));
    background: var(--color-bg-soft);
    transition: background 400ms cubic-bezier(0.2, 0, 0, 1);
  }

  .hero-brand-panel {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 0%, #ffffff 90%),
      var(--brand-bg);
    color: var(--brand-fg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 400ms ease, visibility 0s linear 400ms;
    padding: var(--space-md) 0 var(--space-sm);
  }

  .hero-brand-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 400ms ease, visibility 0s;
  }

  .hero-brand-carousel__viewport:has(.hero-brand-panel.is-active) {
    background: var(--brand-bg);
  }

  /* CARRUSEL CENTRADO DE 3 — el slide activo ocupa el centro y los
     adyacentes se ven a ambos lados, atenuados. En desktop cada slide
     ocupa 1/3 del ancho (3 visibles); en mobile el central domina con
     peek lateral. Scroll snap para navegacion natural (swipe/tap) y
     click en los laterales para navegar. */
  /* COVERFLOW 3D: card activa centrada + grande, cards adyacentes
     rotadas en Y con perspective. Efecto tipo Apple Cover Flow. */
  .hero-brand-panel__slides {
    position: relative;
    height: 100%;
    min-height: max(520px, calc(var(--hb-card-h) + 60px));
    perspective: 1200px;
    perspective-origin: center center;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
  }

  .hero-brand-slide {
    position: absolute;
    top: var(--space-sm);
    left: 50%;
    width: 82%;
    max-width: 380px;
    transform-origin: center center;
    transform: translateX(-50%) translateZ(-500px) scale(0.55);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: transform 550ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 500ms ease;
    will-change: transform, opacity;
  }

  .hero-brand-slide.is-prev {
    opacity: 0.6;
    transform: translateX(calc(-50% - 65%)) rotateY(40deg) translateZ(-100px) scale(0.76);
    z-index: 2;
    pointer-events: auto;
  }

  .hero-brand-slide.is-next {
    opacity: 0.6;
    transform: translateX(calc(-50% + 65%)) rotateY(-40deg) translateZ(-100px) scale(0.76);
    z-index: 2;
    pointer-events: auto;
  }

  .hero-brand-slide.is-far-prev {
    opacity: 0.22;
    transform: translateX(calc(-50% - 118%)) rotateY(52deg) translateZ(-220px) scale(0.55);
    z-index: 1;
  }

  .hero-brand-slide.is-far-next {
    opacity: 0.22;
    transform: translateX(calc(-50% + 118%)) rotateY(-52deg) translateZ(-220px) scale(0.55);
    z-index: 1;
  }

  .hero-brand-slide.is-active {
    opacity: 1;
    transform: translateX(-50%) rotateY(0deg) translateZ(0) scale(1);
    z-index: 3;
    pointer-events: auto;
    cursor: default;
  }

  .hero-brand-slide__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-brand-slide {
      transition: opacity 200ms ease;
    }
    .hero-brand-slide.is-prev,
    .hero-brand-slide.is-next,
    .hero-brand-slide.is-far-prev,
    .hero-brand-slide.is-far-next {
      transform: translateX(-50%);
    }
  }

  /* Card con esquinas redondeadas — imagen full como fondo,
     texto y CTA overlay en la parte inferior. */
  .hero-brand-slide__card {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--brand-bg);
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.18);
  }

  .hero-brand-slide__img,
  .hero-brand-slide__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hero-brand-slide__video {
    background: transparent;
  }

  /* Poster: <img> por encima del video (z-index 2) — visible por default,
     fade-out cuando el video empieza a reproducir. Cover fit siempre. */
  .hero-brand-slide__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;
    opacity: 1;
    transition: opacity 500ms ease;
    pointer-events: none;
  }
  .hero-brand-slide.is-video-playing .hero-brand-slide__poster { opacity: 0; }

  .hero-brand-slide__video-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 200ms ease, transform 150ms ease;
  }

  .hero-brand-slide__video-btn:hover,
  .hero-brand-slide__video-btn:focus-visible {
    background: rgba(0, 0, 0, 0.78);
    transform: scale(1.06);
    outline: none;
  }

  .hero-brand-slide__video-btn svg { display: none; }
  .hero-brand-slide__video-btn[data-video-state="paused"] .icon-play { display: block; }
  .hero-brand-slide__video-btn[data-video-state="playing"] .icon-pause { display: block; }
  .hero-brand-slide__video-btn[data-video-state="ended"] .icon-reload { display: block; }

  /* Overlay bottom con gradient dark para legibilidad. Jerarquia:
     subtitulo grande arriba → titulo secundario → descripcion → CTA. */
  .hero-brand-slide__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-md) var(--space-sm) var(--space-sm);
    background: linear-gradient(180deg,
      transparent 55%,
      rgba(0, 0, 0, 0.15) 75%,
      rgba(0, 0, 0, 0.4) 100%);
    color: #ffffff;
    text-align: left;
    z-index: 3; /* encima del poster (z-index 2) y del video */
  }

  .hero-brand-slide__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    width: 100%;
  }

  .hero-brand-slide__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.02em;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
  }

  .hero-brand-slide__subtitle {
    font-size: clamp(15px, 4.2vw, 19px);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: var(--brand-accent);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }

  .hero-brand-slide__description {
    font-size: 12px;
    line-height: 1.25;
    margin: 2px 0 0;
    color: #ffffff;
    opacity: 0.9;
    max-width: 100%;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    display: -webkit-box;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-brand-slide__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    padding: 9px 22px;
    background: #ffffff;
    color: var(--brand-bg);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-heading);
    font-size: 12px;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 12px;
    transition: transform 180ms ease, box-shadow 180ms ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
  }

  .hero-brand-slide__cta:hover,
  .hero-brand-slide__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  }

  .hero-brand-panel__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
  }

  .hero-brand-panel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    background: var(--dot-color, #c9c9d1);
    border-radius: 50%;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease, width 200ms ease;
  }

  .hero-brand-panel__dot.is-active {
    background: var(--dot-active-color, #1a1a1a);
    width: 24px;
    border-radius: var(--radius-full);
  }

  .hero-brand-carousel__tabs {
    display: flex;
    gap: 8px;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hero-brand-carousel__tabs::-webkit-scrollbar { display: none; }

  /* Misma paleta visual del brand-tiles-desktop, con tamaño mobile compacto:
     degradado 135 sobre el color de marca + sombra colorida al activarse +
     drop-shadow al logo activo. */
  .hero-brand-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    min-height: 60px;
    padding: 10px 16px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--tab-fg, var(--color-text));
    background:
      linear-gradient(135deg,
        var(--tab-bg, var(--color-bg)) 0%,
        color-mix(in srgb, var(--tab-bg, var(--color-bg)) 82%, #ffffff 18%) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition:
      transform 220ms cubic-bezier(0.25, 1, 0.35, 1),
      box-shadow 220ms ease,
      border-color 220ms ease,
      background 300ms ease;
    position: relative;
  }

  .hero-brand-tab:hover:not(.is-active),
  .hero-brand-tab:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
    outline: none;
  }

  .hero-brand-tab.is-active {
    border-color: color-mix(in srgb, var(--tab-fg, #1a1a1a) 40%, transparent);
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--tab-bg, #ffffff) 92%, #ffffff 8%) 0%,
        color-mix(in srgb, var(--tab-bg, #ffffff) 72%, #ffffff 28%) 100%);
    transform: translateY(-4px) scale(1.04);
    box-shadow:
      0 12px 28px color-mix(in srgb, var(--tab-bg, #1a1a1a) 45%, transparent),
      0 3px 10px color-mix(in srgb, var(--tab-bg, #1a1a1a) 25%, transparent);
  }

  .hero-brand-tab.is-active .hero-brand-tab__logo {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
    transform: scale(1.05);
  }

  .hero-brand-tab__logo {
    max-height: 40px;
    max-width: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: filter 260ms ease, transform 260ms ease;
  }

  /* "Ver página" (snippets/marca-landing-hint) más chica en las pestañas mobile */
  .hero-brand-tab .marca-hint {
    padding: 2px 7px;
    font-size: 9px;
    gap: 2px;
  }
  .hero-brand-tab .marca-hint svg { width: 10px; height: 10px; }

  .hero-brand-tab__name {
    font-weight: var(--font-weight-heading);
    font-size: 14px;
    letter-spacing: 0.02em;
  }

  .hero-brand-carousel__placeholder {
    padding: var(--space-2xl) 0;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
  }

  .hero-brand-carousel--tabs-above {
    display: flex;
    flex-direction: column;
  }
  .hero-brand-carousel--tabs-above .hero-brand-carousel__viewport { order: 2; }
  .hero-brand-carousel--tabs-above .hero-brand-carousel__tabs { order: 1; }

  @media (min-width: 750px) {
    .hero-brand-carousel { display: none; }
    .hero-brand-carousel__viewport { min-height: 620px; }
    .hero-brand-panel__slides { min-height: 580px; }

    .hero-brand-slide {
      width: 52%;
      max-width: 520px;
    }

    .hero-brand-slide.is-prev {
      transform: translateX(calc(-50% - 62%)) rotateY(32deg) translateZ(-110px) scale(0.82);
    }

    .hero-brand-slide.is-next {
      transform: translateX(calc(-50% + 62%)) rotateY(-32deg) translateZ(-110px) scale(0.82);
    }

    .hero-brand-slide.is-far-prev {
      transform: translateX(calc(-50% - 108%)) rotateY(45deg) translateZ(-220px) scale(0.68);
    }

    .hero-brand-slide.is-far-next {
      transform: translateX(calc(-50% + 108%)) rotateY(-45deg) translateZ(-220px) scale(0.68);
    }

    .hero-brand-slide__card {
      max-width: 520px;
      aspect-ratio: 9 / 16;
    }

    .hero-brand-slide__overlay {
      padding: var(--space-lg);
    }

    .hero-brand-carousel__tabs {
      justify-content: center;
      overflow-x: visible;
      padding: var(--space-lg) var(--space-lg);
      gap: var(--space-md);
    }
  }

  @media (min-width: 1200px) {
    .hero-brand-carousel__viewport { min-height: 560px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-brand-panel,
    .hero-brand-slide,
    .hero-brand-slide__cta {
      transition: opacity 150ms ease;
      transform: none;
    }
  }
/* END_SECTION:hero-brand-carousel */

/* START_SECTION:landing-antes-despues (INDEX:17) */
.lxba {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
      120deg,
      color-mix(in srgb, var(--marca-30, var(--color-text)) 4%, var(--color-text)),
      color-mix(in srgb, var(--marca-30, var(--color-text)) 14%, var(--color-text))
    );
    color: var(--color-bg);
  }
  .lxba::before {
    content: '';
    position: absolute;
    left: -160px;
    bottom: -160px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--marca-30, var(--color-bg)) 14%, transparent), transparent 68%);
    pointer-events: none;
  }
  .lxba__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
    max-width: calc(1180px + 2 * var(--space-lg));
    margin: 0 auto;
    padding: var(--lxba-pt, 78px) var(--space-md) var(--lxba-pb, 78px);
  }
  .lxba__tag {
    font-size: 15px;
    color: var(--color-bg);
  }
  .lxba__title {
    margin: 6px 0 14px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.15;
    color: var(--color-bg);
  }
  .lxba__text {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  }
  .lxba__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
  }
  .lxba__stats b {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: var(--marca-30, var(--color-bg));
  }
  .lxba__stats span {
    font-size: 13px;
    color: color-mix(in srgb, var(--color-bg) 70%, transparent);
  }

  .lxba__compare {
    --ba-pos: 50%;
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--marca-30, var(--color-bg)) 25%, transparent);
    border-radius: 16px;
    box-shadow: 0 24px 54px -28px color-mix(in srgb, var(--color-text) 50%, transparent);
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  .lxba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  .lxba__img--antes { clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
  .lxba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-pos);
    z-index: 2;
    width: 2px;
    background: var(--color-bg);
    box-shadow: 0 0 14px color-mix(in srgb, var(--color-text) 45%, transparent);
    pointer-events: none;
  }
  .lxba__knob {
    position: absolute;
    top: 50%;
    left: var(--ba-pos);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(120deg, var(--marca-30, var(--color-bg)), var(--marca-10, var(--color-bg)));
    color: var(--color-text);
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--color-text) 50%, transparent);
    transform: translate(-50%, -50%);
  }
  .lxba__knob .lx-icon { stroke-width: 2.4; }
  .lxba__knob:focus-visible {
    outline: 2px solid var(--color-bg);
    outline-offset: 3px;
  }
  .lxba__label {
    position: absolute;
    top: 14px;
    z-index: 2;
    padding: 7px 14px;
    border: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-text) 60%, transparent);
    backdrop-filter: blur(6px);
    color: var(--color-bg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
  }
  .lxba__label--a { left: 14px; }
  .lxba__label--d {
    right: 14px;
    color: var(--marca-30, var(--color-bg));
  }
  .lxba__hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    z-index: 2;
    padding: 6px 13px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-text) 55%, transparent);
    color: var(--color-bg);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .lxba__compare.is-used .lxba__hint { opacity: 0; }

  @media (min-width: 880px) {
    .lxba__inner {
      grid-template-columns: 0.9fr 1.1fr;
      gap: 48px;
    }
  }
/* END_SECTION:landing-antes-despues */

/* START_SECTION:landing-catalogo (INDEX:18) */
.lxc {
    display: block;
    background: var(--color-bg-soft);
  }
  .lxc__inner {
    max-width: calc(1180px + 2 * var(--space-lg));
    margin: 0 auto;
    padding: var(--lxc-pt, 76px) var(--space-md) var(--lxc-pb, 76px);
  }

  .lxc__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 44px;
  }
  .lxc__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  }
  .lxc__chip .lx-icon {
    width: 19px;
    height: 19px;
    color: var(--marca-10, var(--color-text));
  }
  .lxc__chip:hover {
    transform: translateY(-3px);
    border-color: var(--marca-30, var(--color-border));
    color: var(--color-text);
  }
  .lxc__chip.is-active {
    border-color: var(--color-text);
    background: var(--color-text);
    color: var(--marca-30, var(--color-bg));
  }
  .lxc__chip.is-active .lx-icon { color: var(--marca-30, var(--color-bg)); }
  .lxc__chip:focus-visible {
    outline: 2px solid var(--marca-10, var(--color-text));
    outline-offset: 2px;
  }

  /* Misma grilla que las colecciones: 2 columnas en mobile, 3 en tablet
     y 4 en desktop */
  .lxc__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lxc__slot { min-width: 0; }
  .lxc__slot[hidden] { display: none; }

  @media (min-width: 750px) {
    .lxc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 990px) {
    .lxc__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-lg);
    }
  }
  @media (max-width: 749px) {
    .lxc__chips {
      flex-wrap: nowrap;
      justify-content: flex-start;
      margin: 0 calc(-1 * var(--space-md)) 26px;
      padding: 4px var(--space-md) 12px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .lxc__chips::-webkit-scrollbar { display: none; }
    .lxc__chip { flex: 0 0 auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    .lxc__chip { transition: none; }
    .lxc__chip:hover { transform: none; }
  }
/* END_SECTION:landing-catalogo */

/* START_SECTION:landing-categorias (INDEX:19) */
.lcats__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* Packery mobile: 1.ª y 4.ª a lo ancho */
  .lcats__item:nth-child(1),
  .lcats__item:nth-child(4) {
    grid-column: 1 / -1;
  }

  .lcats__card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: var(--color-bg-soft);
    text-decoration: none;
  }
  .lcats__img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 400ms ease;
  }
  .lcats__item:nth-child(1) .lcats__img,
  .lcats__item:nth-child(4) .lcats__img {
    aspect-ratio: 16 / 10;
  }

  .lcats__pill {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--marca-30, var(--color-text));
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-text) 18%, transparent);
  }
  .lcats__card:focus-visible {
    outline: 2px solid var(--marca-30, var(--color-text));
    outline-offset: 3px;
  }

  @media (hover: hover) {
    .lcats__card:hover .lcats__img { transform: scale(1.05); }
  }

  @media (min-width: 990px) {
    .lcats__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }
    .lcats__item:nth-child(1),
    .lcats__item:nth-child(4) {
      grid-column: auto;
    }
    .lcats__item:nth-child(1) .lcats__img,
    .lcats__item:nth-child(4) .lcats__img {
      aspect-ratio: 1 / 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .lcats__img { transition: none; }
    .lcats__card:hover .lcats__img { transform: none; }
  }
/* END_SECTION:landing-categorias */

/* START_SECTION:landing-faq (INDEX:20) */
.lfaq {
    position: relative;
    overflow: clip;
    background: var(--marca-10, var(--color-bg-soft));
  }
  .lfaq__fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lfaq__veil {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-bg) var(--lfaq-veil, 85%), transparent);
  }
  .lfaq__inner {
    position: relative;
    z-index: 1;
  }
  .lfaq__lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
  }

  .lfaq__item {
    border-radius: 14px;
    background: var(--color-bg);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-text) 8%, transparent);
    overflow: hidden;
  }
  .lfaq__pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--marca-30, var(--color-text));
  }
  .lfaq__pregunta::-webkit-details-marker { display: none; }
  .lfaq__pregunta:focus-visible {
    outline: 2px solid var(--marca-60, var(--color-text));
    outline-offset: -2px;
  }
  .lfaq__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--marca-30, var(--color-text));
    color: var(--marca-fg, var(--color-bg));
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }
  .lfaq__icon::before { content: '+'; }
  .lfaq__item[open] .lfaq__pregunta {
    background: var(--marca-30, var(--color-text));
    color: var(--marca-fg, var(--color-bg));
  }
  .lfaq__item[open] .lfaq__icon {
    background: var(--color-bg);
    color: var(--marca-30, var(--color-text));
  }
  .lfaq__item[open] .lfaq__icon::before { content: '\2212'; }
  .lfaq__respuesta {
    padding: 16px 20px 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-text-muted);
  }
  .lfaq__respuesta p { margin: 0 0 10px; }
  .lfaq__respuesta p:last-child { margin-bottom: 0; }

  /* ===== Estilo NQ (home) ===== */
  .lfaq__kicker {
    margin: 0 0 6px;
    text-align: center;
  }
  .lfaq__kicker .nq-kicker { margin: 0; }
  .lfaq--nq .lfaq__item {
    border: 1.5px solid color-mix(in srgb, var(--color-brand-accent) 35%, var(--color-bg));
    border-radius: 16px;
    transition: box-shadow 200ms ease, border-color 200ms ease;
  }
  .lfaq--nq .lfaq__pregunta {
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    color: var(--color-text);
  }
  .lfaq--nq .lfaq__q-ico {
    flex: none;
    width: 32px;
    height: 32px;
    object-fit: contain;
  }
  .lfaq--nq .lfaq__pregunta-texto { flex: 1; }
  .lfaq--nq .lfaq__icon {
    background: var(--color-brand-accent);
    color: var(--color-bg);
  }
  /* Solo la pregunta abierta se destaca */
  .lfaq--nq .lfaq__item[open] {
    border: 2px solid var(--color-brand-accent);
    box-shadow: 4px 4px 0 var(--color-brand-accent);
  }
  .lfaq--nq .lfaq__item[open] .lfaq__pregunta {
    background: color-mix(in srgb, var(--color-brand-accent) 10%, var(--color-bg));
    color: var(--color-brand-accent);
  }
  .lfaq--nq .lfaq__item[open] .lfaq__icon {
    background: var(--color-brand-accent);
    color: var(--color-bg);
  }
  .lfaq--nq .lfaq__respuesta { padding: 10px 16px 16px; }
  .lfaq__cta {
    margin: 20px 0 0;
    text-align: center;
  }
  .lfaq__cta .nq-pildora {
    padding: 10px 18px;
    font-size: 13px;
    text-align: center;
  }
  @media (prefers-reduced-motion: reduce) {
    .lfaq--nq .lfaq__item { transition: none; }
  }
/* END_SECTION:landing-faq */

/* START_SECTION:landing-hero (INDEX:21) */
.lhero {
    position: relative;
    overflow: clip;
    /* El texto va superpuesto (position: absolute) y no empuja el alto
       del contenedor: sin este minimo, un titulo largo se corta contra
       el borde inferior en vez de solo pisar la imagen. */
    min-height: calc(var(--lhero-offset-m, 30vw) + 280px);
  }
  .lhero__picture,
  .lhero__img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .lhero__img {
    object-fit: cover;
  }

  /* Velo para que el texto se lea encima de cualquier foto (no todas
     traen una zona oscura dibujada). Mobile: oscurece arriba, donde
     empieza el texto. */
  .lhero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 55%, transparent 75%);
  }

  /* Texto sobre la imagen: en mobile va arriba */
  .lhero__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Mobile: el texto arranca debajo del logo que trae dibujado el banner. */
    padding-top: var(--lhero-offset-m, 30vw);
  }
  .lhero__box {
    width: 100%;
    max-width: calc(1200px + 2 * var(--space-md, 16px));
    margin: 0 auto;
    padding-inline: var(--space-md, 16px);
  }
  .lhero .land-head {
    margin-bottom: 22px;
  }
  .lhero .land-head__title {
    max-width: 16ch;
    font-size: clamp(28px, 4.5vw, 52px);
    color: var(--marca-30, var(--color-text));
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
  .lhero .land-head__sub {
    max-width: 46ch;
    color: color-mix(in srgb, var(--marca-30, var(--color-text)) 88%, white);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  }
  .lhero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--marca-60, var(--color-text));
    color: var(--marca-fg, var(--color-bg));
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease;
  }
  .lhero__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--marca-60, var(--color-text)) 35%, transparent);
  }
  .lhero__btn:focus-visible {
    outline: 2px solid var(--marca-30, var(--color-text));
    outline-offset: 3px;
  }

  @media (min-width: 750px) {
    .lhero {
      height: var(--lhero-h, 560px);
      min-height: 0;
    }
    .lhero::before {
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 68%);
    }
    .lhero--centro::before {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 55%);
    }
    .lhero__content {
      padding-top: 0;
      padding-bottom: clamp(32px, 5vw, 56px);
      justify-content: center;
    }
    .lhero--izquierda-abajo .lhero__content {
      justify-content: flex-end;
    }
    .lhero--centro .lhero__content {
      align-items: center;
      text-align: center;
    }
    .lhero--centro .land-head {
      align-items: center;
      text-align: center;
    }
    .lhero--centro .land-head__title,
    .lhero--centro .land-head__sub {
      margin-inline: auto;
    }
  }

  /* Foto completa en mobile: el alto sale de la proporción de la imagen
     mobile, sin recortar abajo. El min-height de .lhero sigue dejando lugar
     al texto si la foto es muy apaisada. */
  @media (max-width: 749px) {
    .lhero--ajustada-m {
      aspect-ratio: var(--lhero-ar-m);
    }
  }

  /* Foto completa en desktop y tablet: el alto sale de la proporción de la
     imagen desktop (sin recortar los lados). El mínimo deja lugar al texto. */
  @media (min-width: 750px) {
    .lhero--ajustada {
      height: auto;
      aspect-ratio: var(--lhero-ar);
      min-height: 340px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .lhero__btn { transition: none; }
    .lhero__btn:hover { transform: none; }
  }
/* END_SECTION:landing-hero */

/* START_SECTION:landing-iconos (INDEX:22) */
.liconos__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .liconos__list::-webkit-scrollbar { display: none; }
  .liconos__item {
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }
  .liconos__img {
    width: 64px;
    height: 64px;
    object-fit: contain;
  }
  .liconos__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-text);
  }

  .liconos__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
  }
  .liconos__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca-30, var(--color-text)) 25%, transparent);
    cursor: pointer;
  }
  .liconos__dot.is-active {
    background: var(--marca-60, var(--color-text));
  }
  .liconos__dot:focus-visible {
    outline: 2px solid var(--marca-30, var(--color-text));
    outline-offset: 2px;
  }

  @media (min-width: 750px) {
    .liconos__list {
      display: flex;
      gap: 24px;
      overflow: visible;
    }
    .liconos__item { flex: 1; }
    .liconos__dots { display: none; }
  }
/* END_SECTION:landing-iconos */

/* START_SECTION:landing-kit (INDEX:23) */
.lxk {
    background-color: var(--color-text);
    color: var(--color-bg);
  }
  .lxk__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
    max-width: calc(1180px + 2 * var(--space-lg));
    margin: 0 auto;
    padding: var(--lxk-pt, 78px) var(--space-md) var(--lxk-pb, 78px);
  }
  .lxk__media {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--marca-30, var(--color-bg)) 25%, transparent);
    border-radius: 14px;
  }
  .lxk__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.7s ease;
  }
  .lxk__media:hover .lxk__img { transform: scale(1.04); }
  .lxk__title {
    margin: 12px 0 14px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(28px, 3.2vw, 38px);
    line-height: 1.15;
    color: var(--color-bg);
  }
  .lxk__text {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-bg) 72%, transparent);
  }
  .lxk__list {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
  }
  .lxk__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 15px;
    color: color-mix(in srgb, var(--color-bg) 84%, transparent);
  }
  .lxk__list .lxk__check {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    stroke-width: 2.6;
    color: var(--marca-30, var(--color-bg));
  }
  .lxk__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 24px;
  }
  .lxk__price b {
    font-size: 32px;
    font-weight: 900;
    color: var(--marca-30, var(--color-bg));
  }
  .lxk__price span {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-bg) 60%, transparent);
  }

  @media (min-width: 880px) {
    .lxk__inner {
      grid-template-columns: 0.9fr 1.1fr;
      gap: 52px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .lxk__img { transition: none; }
    .lxk__media:hover .lxk__img { transform: none; }
  }
/* END_SECTION:landing-kit */

/* START_SECTION:landing-lookbook (INDEX:24) */
.llook {
    display: block;
  }
  .llook__rail {
    position: relative;
  }
  .llook__scenes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .llook__scenes::-webkit-scrollbar { display: none; }
  .llook__scene {
    position: relative;
    scroll-snap-align: center;
    aspect-ratio: 1874 / 1649;
  }
  @media (min-width: 750px) {
    .llook__scene { aspect-ratio: 2919 / 1649; }
  }
  .llook__picture,
  .llook__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .llook__img {
    object-fit: cover;
    display: block;
  }

  /* ===== Puntos ===== */
  .llook__punto {
    position: absolute;
    top: var(--tm, 50%);
    left: var(--lm, 50%);
    z-index: 3;
  }
  @media (min-width: 750px) {
    .llook__punto {
      top: var(--t, 50%);
      left: var(--l, 50%);
    }
  }
  .llook__pin {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--color-bg);
    border-radius: 50%;
    background: var(--marca-60, var(--color-text));
    color: var(--color-bg);
    cursor: pointer;
    transform: translate(-50%, -50%);
  }
  /* Area tactil de 44px sin agrandar el punto visible */
  .llook__pin::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
  }
  /* Pulso suave */
  .llook__pin::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--marca-60, var(--color-text)) 45%, transparent);
    animation: llook-pulse 2.4s ease-out infinite;
    pointer-events: none;
  }
  @keyframes llook-pulse {
    70% { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  .llook__pin:focus-visible {
    outline: 2px solid var(--marca-30, var(--color-text));
    outline-offset: 2px;
  }

  /* ===== Tarjeta flotante =====
     Capas: puntos 3 · flechas 4 · tarjeta (desktop) 30.
     Mobile: backdrop 1000 y hoja 1001, por encima de la barra inferior (900). */
  .llook__card[hidden] { display: none; }

  .llook__pop {
    position: absolute;
    z-index: 30;
    top: 0;
    left: 0;
    width: 240px;
    border-radius: 14px;
    background: var(--color-bg);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--color-text) 30%, transparent);
    /* Para que scrollIntoView no la deje debajo del header fijo (72 + 44px) */
    scroll-margin: 132px 16px 24px;
  }
  .llook__pop[hidden] { display: none; }
  /* Sin la franja blanca de arriba: la tarjeta trae margin-top: 12px (espacio
     para un badge que sobresale) que aqui dejaba un borde vacio sobre la foto. */
  .llook__pop { overflow: hidden; }
  .llook__pop .product-card {
    margin-top: 0;
    height: auto;
    box-shadow: none;
    border-radius: 0;
  }

  .llook__pop-close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    color: var(--color-text);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-text) 20%, transparent);
    cursor: pointer;
  }
  .llook__pop-close:focus-visible {
    outline: 2px solid var(--marca-60, var(--color-text));
    outline-offset: 2px;
  }

  .llook__backdrop { display: none; }

  /* Mobile: hoja inferior fija con fondo oscuro */
  @media (max-width: 749px) {
    .llook__pop {
      position: fixed;
      inset: auto 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
      top: auto !important;
      left: 12px !important;
      z-index: 1001;
      width: auto;
      max-width: 300px;
      max-height: 70vh;
      margin-inline: auto;
      overflow: auto;
    }
    .llook__backdrop:not([hidden]) {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: color-mix(in srgb, var(--color-text) 45%, transparent);
    }
  }

  /* ===== Flechas y dots ===== */
  .llook__arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-text) 28%, transparent);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .llook__arrow--prev { left: 12px; }
  .llook__arrow--next { right: 12px; }
  .llook__arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }
  .llook__arrow:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }
  @media (min-width: 750px) and (hover: hover) {
    .llook__arrow { display: grid; }
  }

  .llook__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding-inline: var(--space-md, 16px);
  }
  .llook__dot {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
  }
  .llook__dot.is-active {
    background: var(--marca-60, var(--color-text));
    border-color: var(--marca-60, var(--color-text));
    color: var(--marca-fg, var(--color-bg));
  }
  .llook__dot:focus-visible {
    outline: 2px solid var(--marca-60, var(--color-text));
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .llook__pin::after { animation: none; }
  }
/* END_SECTION:landing-lookbook */

/* START_SECTION:landing-marca (INDEX:25) */
.lmarca {
    position: relative;
    overflow: clip;
  }
  .lmarca__content {
    position: relative;
    z-index: 1;
    text-align: center;
  }
  .lmarca .land-head {
    margin-bottom: 18px;
  }
  .lmarca .land-head__title {
    font-size: clamp(28px, 4vw, 44px);
    color: var(--marca-60, var(--color-text));
  }
  .lmarca__texto {
    max-width: 640px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
  }
  .lmarca__texto p { margin: 0; }

  /* Fotos en forma de casa con borde grueso: el marco lleva el color del
     borde y la misma forma; la imagen va adentro con el mismo clip. */
  .lmarca__foto {
    position: relative;
    width: min(58%, 300px);
  }
  .lmarca__foto--1 { margin: 0 auto 36px 0; }
  .lmarca__foto--2 { margin: 36px 0 0 auto; }
  .lmarca__frame {
    position: relative;
    padding: 8px;
    background: var(--marca-60, var(--color-text));
    clip-path: polygon(50% 0, 100% 32%, 100% 100%, 0 100%, 0 32%);
  }
  .lmarca__img {
    display: block;
    width: 100%;
    height: auto;
    clip-path: polygon(50% 0, 100% 32%, 100% 100%, 0 100%, 0 32%);
  }
  /* Bloques de color detras de cada foto: se salen del borde de la
     pagina sin causar scroll (la seccion tiene overflow: clip). */
  .lmarca__bloque {
    position: absolute;
    z-index: -1;
    top: -14%;
    bottom: -14%;
  }
  .lmarca__foto--1 .lmarca__bloque {
    left: -45vw;
    right: 30%;
    background: var(--marca-60, var(--color-text));
  }
  .lmarca__foto--2 .lmarca__bloque {
    left: 30%;
    right: -45vw;
    background: var(--marca-30, var(--color-text));
  }

  @media (min-width: 990px) {
    .lmarca {
      display: flex;
      align-items: center;
      min-height: 480px;
    }
    .lmarca__foto {
      position: absolute;
      width: clamp(200px, 22vw, 320px);
      margin: 0;
    }
    .lmarca__foto--1 { top: 0; left: 0; }
    .lmarca__foto--2 { bottom: 0; right: 0; }
    .lmarca__content {
      width: 100%;
    }
  }
/* END_SECTION:landing-marca */

/* START_SECTION:landing-slider (INDEX:26) */
.lxs {
    display: block;
    background: var(--color-text);
    color: var(--color-bg);
  }
  .lxs__stage {
    position: relative;
    overflow: hidden;
    height: min(88vh, var(--lxs-h, 640px));
    min-height: 560px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  .lxs__stage:focus-visible {
    outline: 2px solid var(--marca-30, var(--color-bg));
    outline-offset: -4px;
  }

  .lxs__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s;
  }
  .lxs__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }

  .lxs__bg,
  .lxs__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .lxs__bg-img {
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 7s ease-out;
  }
  .lxs__slide.is-active .lxs__bg-img { transform: scale(1); }
  /* Capa de degradado: color, intensidad y dirección por diapositiva */
  .lxs__shade {
    --o1: color-mix(in srgb, var(--lxs-ov, var(--color-text)) calc(var(--lxs-ov-a, 1) * 88%), transparent);
    --o2: color-mix(in srgb, var(--lxs-ov, var(--color-text)) calc(var(--lxs-ov-a, 1) * 55%), transparent);
    --o3: color-mix(in srgb, var(--lxs-ov, var(--color-text)) calc(var(--lxs-ov-a, 1) * 15%), transparent);
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, var(--o1) 8%, var(--o2) 46%, var(--o3) 78%);
  }
  .lxs__slide--ov-derecha .lxs__shade { background: linear-gradient(265deg, var(--o1) 8%, var(--o2) 46%, var(--o3) 78%); }
  .lxs__slide--ov-abajo .lxs__shade { background: linear-gradient(0deg, var(--o1) 0%, var(--o2) 45%, var(--o3) 85%); }
  .lxs__slide--ov-arriba .lxs__shade { background: linear-gradient(180deg, var(--o1) 0%, var(--o2) 45%, var(--o3) 85%); }
  .lxs__slide--ov-uniforme .lxs__shade { background: var(--o2); }
  .lxs__slide--ov-ninguno .lxs__shade { display: none; }

  /* Botones configurables por diapositiva */
  .lxs__b1 { --b-bg: var(--lxs-b1-bg, var(--marca-10, var(--color-brand-primary))); --b-fg: var(--lxs-b1-fg, var(--color-text)); }
  .lxs__b2 { --b-bg: var(--lxs-b2-bg, var(--marca-30, var(--color-brand-primary))); --b-fg: var(--lxs-b2-fg, var(--b-bg)); }
  .lx-btn.lxs__b--relleno { background: var(--b-bg); border-color: var(--b-bg); color: var(--b-fg); }
  .lx-btn.lxs__b--relleno:hover { background: var(--b-bg); filter: brightness(1.08); }
  .lx-btn.lxs__b--contorno { background: transparent; border-color: var(--b-bg); color: var(--b-fg); }
  .lx-btn.lxs__b--contorno:hover { background: color-mix(in srgb, var(--b-bg) 16%, transparent); }
  .lx-btn.lxs__b--blanco { background: var(--color-bg); border-color: var(--color-bg); color: var(--b-bg); }
  .lx-btn.lxs__b--blanco:hover { background: var(--color-bg); filter: brightness(0.96); }
  .lx-btn.lxs__b--redondo { border-radius: 999px; }
  .lx-btn.lxs__b--recto { border-radius: var(--radius-sm); }

  .lxs__sol {
    position: absolute;
    right: 5%;
    bottom: -4%;
    z-index: 3;
    width: clamp(240px, 30vw, 430px);
    height: auto;
    filter: drop-shadow(0 34px 54px color-mix(in srgb, var(--color-text) 60%, transparent));
    pointer-events: none;
  }

  .lxs__txt {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    max-width: calc(1180px + 2 * var(--space-lg));
    margin: 0 auto;
    padding: 0 var(--space-lg);
  }
  /* Posición del contenido (título y botones) por diapositiva */
  .lxs__txt--v-arriba { justify-content: flex-start; padding-top: 72px; }
  .lxs__txt--v-abajo { justify-content: flex-end; padding-bottom: 72px; }
  .lxs__txt--h-centro { align-items: center; text-align: center; }
  .lxs__txt--h-centro .lxs__ctas { justify-content: center; }
  .lxs__txt--h-derecha { align-items: flex-end; text-align: right; }
  .lxs__txt--h-derecha .lxs__ctas { justify-content: flex-end; }
  .lxs__eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 16px;
    border: 1px solid var(--marca-30, var(--color-bg));
    border-radius: var(--radius-full);
    color: var(--marca-30, var(--color-bg));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
  }
  .lxs__title {
    max-width: 560px;
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--color-bg);
  }
  .lxs__text {
    max-width: 470px;
    margin: 0 0 30px;
    font-size: 17px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-bg) 84%, transparent);
  }
  .lxs__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* Entrada escalonada del texto de la diapositiva activa */
  .lxs__eyebrow,
  .lxs__title,
  .lxs__text,
  .lxs__ctas {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .lxs__slide.is-active .lxs__eyebrow { opacity: 1; transform: none; transition-delay: 0.1s; }
  .lxs__slide.is-active .lxs__title { opacity: 1; transform: none; transition-delay: 0.22s; }
  .lxs__slide.is-active .lxs__text { opacity: 1; transform: none; transition-delay: 0.34s; }
  .lxs__slide.is-active .lxs__ctas { opacity: 1; transform: none; transition-delay: 0.46s; }

  .lxs__arrow {
    position: absolute;
    top: 50%;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid color-mix(in srgb, var(--marca-30, var(--color-bg)) 25%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-text) 55%, transparent);
    color: var(--marca-30, var(--color-bg));
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .lxs__arrow svg { width: 22px; height: 22px; }
  .lxs__arrow:hover {
    background: var(--marca-10, var(--color-bg));
    border-color: var(--marca-10, var(--color-bg));
    color: var(--color-text);
  }
  .lxs__arrow:focus-visible {
    outline: 2px solid var(--marca-30, var(--color-bg));
    outline-offset: 2px;
  }
  .lxs__arrow--prev { left: 20px; }
  .lxs__arrow--next { right: 20px; }

  .lxs__dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    z-index: 8;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
  }
  .lxs__dot {
    position: relative;
    width: 34px;
    height: 5px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-bg) 25%, transparent);
    cursor: pointer;
    transition: width 0.35s ease, background-color 0.35s ease;
  }
  .lxs__dot.is-active {
    width: 52px;
    background: color-mix(in srgb, var(--color-bg) 35%, transparent);
  }
  .lxs__dot.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--marca-30, var(--color-bg)), var(--marca-10, var(--color-bg)));
    transform-origin: left;
    animation: lxs-dot var(--lxs-ms, 7s) linear forwards;
  }
  .lxs:not([data-playing]) .lxs__dot.is-active::after { animation: none; }
  .lxs__dot:focus-visible {
    outline: 2px solid var(--marca-30, var(--color-bg));
    outline-offset: 3px;
  }
  @keyframes lxs-dot {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  .lxs__stats {
    padding: 26px var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--marca-30, var(--color-bg)) 25%, transparent);
    background: color-mix(in srgb, var(--color-text) 92%, var(--color-bg));
  }
  .lxs__stats-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px 34px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lxs__stat { text-align: center; }
  .lxs__stat b {
    display: block;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--marca-30, var(--color-bg));
    font-variant-numeric: tabular-nums;
  }
  .lxs__stat span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-bg) 60%, transparent);
  }

  @media (max-width: 989px) {
    .lxs__stage {
      height: auto;
      min-height: 760px;
    }
    .lxs__sol {
      right: 50%;
      width: clamp(150px, 38vw, 240px);
      transform: translateX(50%);
    }
    .lxs__txt {
      justify-content: flex-start;
      align-items: center;
      padding: 56px var(--space-md) 300px;
      text-align: center;
    }
    .lxs__title,
    .lxs__text { margin-left: auto; margin-right: auto; }
    .lxs__ctas { justify-content: center; }
    .lxs__txt--v-abajo { justify-content: flex-end; padding: 0 var(--space-md) 48px; }
    .lxs__slide:not(.lxs__slide--ov-ninguno):not(.lxs__slide--ov-uniforme) .lxs__shade {
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--lxs-ov, var(--color-text)) calc(var(--lxs-ov-a, 1) * 82%), transparent) 0%,
        color-mix(in srgb, var(--lxs-ov, var(--color-text)) calc(var(--lxs-ov-a, 1) * 45%), transparent) 55%,
        color-mix(in srgb, var(--lxs-ov, var(--color-text)) calc(var(--lxs-ov-a, 1) * 75%), transparent) 100%);
    }
  }
  /* Foto completa en desktop y tablet: el alto sale de la proporción de la foto.
     El celular no cambia (usa su propia foto y su alto). */
  @media (min-width: 750px) {
    .lxs--ajustada .lxs__stage {
      height: auto;
      min-height: 0;
      aspect-ratio: var(--lxs-ar);
    }
    .lxs--ajustada .lxs__bg-img,
    .lxs--ajustada .lxs__slide.is-active .lxs__bg-img { transform: none; }
    .lxs--ajustada .lxs__txt { padding-top: 0; padding-bottom: 0; }
    .lxs--ajustada .lxs__txt--v-abajo { padding-bottom: clamp(20px, 4vw, 56px); }
    .lxs--ajustada .lxs__txt--v-arriba { padding-top: clamp(20px, 4vw, 56px); }
    .lxs--ajustada .lxs__txt--h-izquierda { align-items: flex-start; text-align: left; }
    .lxs--ajustada .lxs__txt--h-izquierda .lxs__ctas { justify-content: flex-start; }
  }
  @media (min-width: 750px) and (max-width: 989px) {
    .lxs--ajustada .lx-btn { padding: 10px 18px; font-size: 12px; }
    /* Tablet: se desliza con el dedo; las flechas tapaban el texto de la foto */
    .lxs--ajustada .lxs__arrow { display: none; }
    /* Los 4 datos en una sola fila */
    .lxs__stats-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; }
    .lxs__stat span { letter-spacing: 0.08em; font-size: 11px; }
  }

  @media (max-width: 749px) {
    .lxs__arrow { display: none; }
    .lxs__stat b { font-size: 24px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .lxs__slide,
    .lxs__bg-img,
    .lxs__eyebrow,
    .lxs__title,
    .lxs__text,
    .lxs__ctas { transition: none; }
    .lxs__bg-img { transform: none; }
    .lxs__dot.is-active::after { animation: none; transform: none; }
  }
/* END_SECTION:landing-slider */

/* START_SECTION:landing-tabs-productos (INDEX:27) */
.ltabs__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    margin-bottom: clamp(22px, 3vw, 32px);
  }
  .ltabs__tab {
    padding: 8px 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-muted);
    cursor: pointer;
  }
  .ltabs__viewall {
    margin: var(--space-md) 0 0;
    text-align: center;
  }
  .ltabs__viewall a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-lg);
    border: 1.5px solid var(--marca-30, var(--color-text));
    border-radius: var(--radius-full);
    color: var(--marca-30, var(--color-text));
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .ltabs__viewall a:hover {
    background: var(--marca-30, var(--color-text));
    color: var(--marca-fg, var(--color-bg));
  }
  .ltabs__tab:hover {
    color: var(--marca-60, var(--color-text));
  }
  .ltabs__tab[aria-selected="true"] {
    color: var(--marca-60, var(--color-text));
    border-bottom-color: var(--marca-60, var(--color-text));
  }
  .ltabs__tab:focus-visible {
    outline: 2px solid var(--marca-60, var(--color-text));
    outline-offset: 2px;
  }

  .ltabs__panelrail {
    position: relative;
  }
  /* overflow-y: hidden: el carrusel es solo horizontal. Arriba hay 12px para
     la etiqueta que sobresale de la tarjeta y abajo aire para su sombra. */
  .ltabs__cards {
    list-style: none;
    margin: 0;
    padding: 12px 2px 14px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 83%;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ltabs__cards::-webkit-scrollbar { display: none; }
  .ltabs__card {
    scroll-snap-align: start;
    min-width: 0;
  }
  /* La tarjeta trae margin-top: 12px + height: 100%: dentro del carrusel eso
     la empujaba 12px fuera de su celda y aparecia un scroll vertical. */
  .ltabs__card .product-card { margin-top: 0; }
  /* Tarjetas del tamano de la grilla de colecciones: 2 enteras en mobile
     (con flechas y dots), 3 en tablet y 4 en desktop. */
  @media (max-width: 749px) {
    .ltabs__cards { grid-auto-columns: calc((100% - 12px) / 2); }
  }
  @media (min-width: 750px) {
    .ltabs__cards { grid-auto-columns: calc((100% - 2 * 12px) / 3.2); }
  }
  @media (min-width: 990px) {
    .ltabs__cards {
      grid-auto-columns: calc((100% - 3 * 16px) / 4);
      gap: 16px;
    }
  }

  .ltabs__arrow {
    position: absolute;
    top: 38%;
    z-index: 2;
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-text) 28%, transparent);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .ltabs__arrow--prev { left: 8px; }
  .ltabs__arrow--next { right: 8px; }
  .ltabs__arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }
  .ltabs__arrow:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }
  @media (min-width: 750px) and (hover: hover) {
    .ltabs__arrow { display: grid; }
  }

  /* Mobile: flechas chicas pegadas a los bordes, a media altura de la foto */
  @media (max-width: 749px) {
    .ltabs__arrow {
      display: grid;
      top: 27%;
      width: 34px;
      height: 34px;
    }
    .ltabs__arrow svg { width: 16px; height: 16px; }
    .ltabs__arrow--prev { left: -6px; }
    .ltabs__arrow--next { right: -6px; }
  }

  /* Dots: uno por página de tarjetas (los arma el JS) */
  .ltabs__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
  }
  .ltabs__dots[hidden] { display: none; }
  .ltabs__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full, 999px);
    background: color-mix(in srgb, var(--color-text) 22%, transparent);
    cursor: pointer;
    transition: width 200ms ease, background 200ms ease;
  }
  .ltabs__dot[aria-current="true"] {
    width: 22px;
    background: var(--marca-60, var(--color-text));
  }
  .ltabs__dot:focus-visible {
    outline: 2px solid var(--marca-60, var(--color-text));
    outline-offset: 2px;
  }
  @media (min-width: 750px) {
    .ltabs__dots { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ltabs__dot { transition: none; }
  }
/* END_SECTION:landing-tabs-productos */

/* START_SECTION:landing-tarjetas (INDEX:28) */
.lxt--fondo-claro { background: var(--color-bg-soft); }
  .lxt--fondo-suave { background: color-mix(in srgb, var(--marca-30, var(--color-text)) 7%, var(--color-bg-soft)); }
  .lxt--fondo-blanco { background: var(--color-bg); }

  .lxt__inner {
    max-width: calc(1180px + 2 * var(--space-lg));
    margin: 0 auto;
    padding: var(--lxt-pt, 44px) var(--space-md) var(--lxt-pb, 44px);
  }

  .lxt__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lxt--detalle .lxt__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .lxt__card {
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius: 10px;
    background: var(--color-bg);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .lxt__card:hover {
    transform: translateY(-4px);
    border-color: var(--marca-30, var(--color-border));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--color-text) 7%, transparent);
  }
  .lxt__icon {
    color: var(--marca-10, var(--color-text));
  }

  /* Compacto */
  .lxt--compacto .lxt__card {
    padding: 20px 16px;
    text-align: center;
  }
  .lxt--compacto .lxt__icon {
    width: 30px;
    height: 30px;
    margin: 0 auto 10px;
    display: block;
  }
  .lxt--compacto .lxt__title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text);
  }

  /* Detalle */
  .lxt--detalle .lxt__card {
    padding: 30px 26px;
    border-radius: 14px;
  }
  .lxt--detalle .lxt__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    display: block;
  }
  .lxt__title {
    margin: 0;
  }
  .lxt--detalle .lxt__title {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 800;
    color: var(--color-text);
  }
  .lxt__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
  }

  @media (min-width: 750px) {
    .lxt--compacto .lxt__grid { grid-template-columns: repeat(var(--lxt-cols, 4), minmax(0, 1fr)); }
  }
  @media (min-width: 820px) {
    .lxt--detalle .lxt__grid { grid-template-columns: repeat(min(var(--lxt-cols, 3), 3), minmax(0, 1fr)); }
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .lxt__card {
        animation: land-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .lxt__card { transition: none; }
    .lxt__card:hover { transform: none; }
  }
/* END_SECTION:landing-tarjetas */

/* START_SECTION:landing-testimonios (INDEX:29) */
.ltesti__rail {
    position: relative;
  }
  .ltesti__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ltesti__list::-webkit-scrollbar { display: none; }
  .ltesti__item {
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
  }
  .ltesti__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }
  .ltesti__avatar--inicial {
    display: grid;
    place-items: center;
    background: var(--marca-30, var(--color-text));
    color: var(--marca-fg, var(--color-bg));
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .ltesti__stars {
    display: flex;
    gap: 3px;
    color: var(--marca-60, var(--color-text));
  }
  .ltesti__star--off {
    color: color-mix(in srgb, var(--marca-60, var(--color-text)) 25%, transparent);
  }
  .ltesti__frase {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--marca-60, var(--color-text));
    text-wrap: balance;
  }
  .ltesti__texto {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-text-muted);
  }
  .ltesti__autor {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
  }

  .ltesti__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
  }
  .ltesti__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca-30, var(--color-text)) 25%, transparent);
    cursor: pointer;
  }
  .ltesti__dot.is-active {
    background: var(--marca-60, var(--color-text));
  }
  .ltesti__dot:focus-visible {
    outline: 2px solid var(--marca-30, var(--color-text));
    outline-offset: 2px;
  }

  .ltesti__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-text) 28%, transparent);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .ltesti__arrow--prev { left: 8px; }
  .ltesti__arrow--next { right: 8px; }
  .ltesti__arrow:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }
  @media (min-width: 750px) and (hover: hover) {
    .ltesti__arrow { display: grid; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ltesti__list { scroll-snap-type: none; }
  }
/* END_SECTION:landing-testimonios */

/* START_SECTION:landing-videos (INDEX:30) */
.lvid {
    display: block;
    /* Fondo: el color 30 de la marca (el amarillo de Metrikasa) */
    background: var(--marca-30, var(--color-bg));
    overflow: clip;
  }
  .lvid__grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2fr;
    align-items: stretch;
  }

  .lvid__band {
    background: var(--marca-60, var(--color-text));
    color: var(--marca-fg, var(--color-bg));
    display: flex;
    align-items: center;
    padding: var(--space-lg) var(--space-md);
  }
  .lvid__band-inner {
    max-width: 380px;
    margin-left: auto;
    padding-right: var(--space-sm);
  }
  .lvid__title {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading, 900);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(22px, 2.8vw, 36px);
    line-height: 1.05;
  }
  .lvid__sub {
    margin: 0 0 var(--space-md);
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.9;
  }
  .lvid__nav {
    display: flex;
    gap: var(--space-xs);
  }
  .lvid__nav[hidden] { display: none; }
  .lvid__arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--marca-fg, var(--color-bg)) 35%, transparent);
    border-radius: 50%;
    background: transparent;
    color: var(--marca-fg, var(--color-bg));
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s ease;
  }
  .lvid__arrow:hover {
    background: color-mix(in srgb, var(--marca-fg, var(--color-bg)) 12%, transparent);
    transform: scale(1.06);
  }
  .lvid__arrow:focus-visible {
    outline: 2px solid var(--marca-fg, var(--color-bg));
    outline-offset: 2px;
  }

  .lvid__viewport {
    /* min-width: 0 evita que la pista ensanche su columna del grid: sin
       esto no hay scroll interno y la pagina se desborda a lo ancho. */
    min-width: 0;
    overflow-x: clip;
    overflow-y: visible;
    padding-block: var(--space-sm);
  }
  .lvid__track {
    display: flex;
    /* Pocos videos: centrados. Si no caben, vuelve al inicio (safe). */
    justify-content: safe center;
    gap: var(--space-2xl);
    margin: 0;
    /* El aire vertical deja asomar la foto del producto sin recortarla. */
    padding: var(--space-xl) var(--space-xl);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-xl);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .lvid__track::-webkit-scrollbar { display: none; }
  .lvid__cell { flex: 0 0 auto; scroll-snap-align: start; }

  /* El frame mide EXACTO lo mismo que el video: es el ancla para que la
     foto del producto se posicione respecto a su esquina real. */
  .lvid__frame {
    position: relative;
    width: calc(var(--lvid-h, 390px) * 9 / 16);
    max-width: 62vw;
  }
  .lvid__video {
    position: relative;
    height: var(--lvid-h, 390px);
    max-height: calc(62vw * 16 / 9);
    width: 100%;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    background: var(--color-text);
    box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.22));
  }
  .lvid__iframe,
  .lvid__native-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
  }

  /* Foto del producto montada por fuera del marco: cuadro fijo para que
     object-fit: contain nunca deforme el PNG. */
  .lvid__product {
    position: absolute;
    z-index: 2;
    display: block;
    width: var(--lvid-product-w, 90px);
    height: var(--lvid-product-w, 90px);
    line-height: 0;
    /* Circulo con borde: asi sirve cualquier foto de producto, no solo
       un PNG recortado. */
    border: 3px solid var(--color-bg);
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-text) 30%, transparent);
    transition: transform 0.2s ease;
  }
  a.lvid__product:hover { transform: scale(1.06); }
  a.lvid__product:focus-visible { outline: 2px solid var(--marca-60, var(--color-text)); outline-offset: 2px; }
  .lvid__product-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lvid__product--top-right { top: calc(var(--lvid-product-w, 90px) * -0.25); right: calc(var(--lvid-product-w, 90px) * -0.25); }
  .lvid__product--top-left { top: calc(var(--lvid-product-w, 90px) * -0.25); left: calc(var(--lvid-product-w, 90px) * -0.25); }
  .lvid__product--bottom-right { bottom: calc(var(--lvid-product-w, 90px) * -0.25); right: calc(var(--lvid-product-w, 90px) * -0.25); }
  .lvid__product--bottom-left { bottom: calc(var(--lvid-product-w, 90px) * -0.25); left: calc(var(--lvid-product-w, 90px) * -0.25); }

  @media (max-width: 989px) {
    .lvid__grid { grid-template-columns: 1fr; }
    .lvid__band { padding: var(--space-md); }
    .lvid__band-inner { max-width: none; margin: 0; padding-right: 0; }
    .lvid__nav { margin-top: var(--space-xs); }
  }
  @media (max-width: 749px) {
    .lvid__frame { max-width: 72vw; }
    .lvid__video { max-height: calc(72vw * 16 / 9); }
  }

  @media (prefers-reduced-motion: reduce) {
    .lvid__track { scroll-behavior: auto; }
    .lvid__arrow { transition: none; }
  }

  /* Estilo oscuro: fondo casi negro y acentos de la marca, para landings
     oscuras (como la de Metrikasa) */
  .lvid--oscuro {
    background: color-mix(in srgb, var(--marca-30, var(--color-text)) 8%, var(--color-text));
  }
  .lvid--oscuro .lvid__band {
    background: var(--color-text);
    color: var(--color-bg);
    border-right: 1px solid color-mix(in srgb, var(--marca-30, var(--color-bg)) 25%, transparent);
  }
  .lvid--oscuro .lvid__title { color: var(--marca-30, var(--color-bg)); }
  .lvid--oscuro .lvid__arrow {
    border-color: color-mix(in srgb, var(--marca-30, var(--color-bg)) 40%, transparent);
    color: var(--marca-30, var(--color-bg));
  }
  .lvid--oscuro .lvid__arrow:hover {
    background: var(--marca-10, var(--color-bg));
    border-color: var(--marca-10, var(--color-bg));
    color: var(--color-text);
  }
  .lvid--oscuro .lvid__arrow:focus-visible { outline-color: var(--marca-30, var(--color-bg)); }
  @media (max-width: 749px) {
    .lvid--oscuro .lvid__band {
      border-right: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--marca-30, var(--color-bg)) 25%, transparent);
    }
  }

  /* ===== Partes comunes de los estilos NQ y Metrikasa ===== */
  .lvid__tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    padding: 5px 10px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    user-select: none;
  }
  .lvid__prod {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
  }
  .lvid__prod-link { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
  .lvid__prod-img { width: 46px; height: 46px; border-radius: 10px; object-fit: contain; background: var(--color-bg); flex-shrink: 0; }
  .lvid__prod-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .lvid__prod-n { font-size: 11.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Si no cabe al lado (celulares de 360px), el precio tachado baja de linea */
  .lvid__prod-p { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; font-family: var(--font-heading); font-size: 14px; font-weight: 800; line-height: 1.2; }
  .lvid__prod-p s { font-size: 10.5px; font-weight: 600; white-space: nowrap; color: var(--color-brand-danger); }
  .lvid__buy { flex-shrink: 0; border: 0; cursor: pointer; font-family: var(--font-heading); font-weight: 900; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
  .lvid--nq .lvid__product, .lvid--metrikasa .lvid__product { display: none; }

  /* ===== Estilo NQ (propuesta A): morado intenso, trama, videos inclinados ===== */
  .lvid--nq {
    position: relative;
    isolation: isolate;
    padding-block: 44px 56px;
    --nq-trama-color: var(--color-bg);
    --nq-trama-opacidad: 0.1;
    background: radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--color-brand-accent) 85%, var(--color-bg)) 0%,
      color-mix(in srgb, var(--color-brand-accent) 70%, var(--color-text)) 45%,
      color-mix(in srgb, var(--color-brand-accent) 40%, var(--color-text)) 100%);
  }
  .lvid--nq .lvid__grid { grid-template-columns: 1fr; position: relative; z-index: 1; }
  .lvid--nq .lvid__band { background: transparent; color: var(--color-bg); justify-content: center; padding: 0 var(--space-md); }
  .lvid--nq .lvid__band-inner { max-width: none; margin: 0 auto; padding: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .lvid--nq .lvid__title { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: clamp(28px, 4vw, 44px); }
  .lvid__title-ico { width: clamp(56px, 6vw, 80px); height: auto; filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--color-text) 45%, transparent)); }
  .lvid--nq .lvid__sub { --nq-kicker-bg: var(--color-brand-secondary); margin: 6px 0 0; opacity: 1; font-size: 13px; }
  .lvid--nq .lvid__arrow { background: var(--color-bg); color: var(--color-brand-accent); border-color: var(--color-bg); }
  .lvid--nq .lvid__nav { justify-content: center; margin-top: var(--space-sm); }
  .lvid--nq .lvid__track { gap: 46px; padding-block: 30px 34px; }
  .lvid--nq .lvid__cell:nth-child(odd) .lvid__frame { transform: rotate(-4deg); }
  .lvid--nq .lvid__cell:nth-child(even) .lvid__frame { transform: rotate(4deg) translateY(18px); }
  .lvid--nq .lvid__video {
    border: 4px solid var(--color-bg);
    border-radius: 24px;
    box-shadow: 0 0 0 4px var(--color-brand-secondary), 0 24px 50px color-mix(in srgb, var(--color-text) 60%, transparent);
  }
  .lvid--nq .lvid__tag { background: var(--color-brand-secondary); color: var(--color-bg); border: 1.5px solid var(--color-bg);
    text-shadow: 0 1px color-mix(in srgb, var(--color-brand-secondary) 55%, var(--color-text)); }
  .lvid--nq .lvid__prod { background: color-mix(in srgb, var(--color-bg) 96%, transparent); color: var(--color-text); box-shadow: 0 8px 20px color-mix(in srgb, var(--color-text) 35%, transparent); }
  .lvid--nq .lvid__buy { padding: 9px 12px; border-radius: 999px; background: var(--color-brand-accent); color: var(--color-bg); border: 2px solid var(--color-bg);
    box-shadow: 2px 2px 0 color-mix(in srgb, var(--color-brand-accent) 58%, var(--color-text)); }
  /* destello que gira detrás de los videos */
  .lvid--nq::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 58%;
    z-index: -1;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(color-mix(in srgb, var(--color-bg) 7%, transparent) 0 10deg, transparent 10deg 30deg);
    animation: lvid-giro 40s linear infinite;
  }
  @keyframes lvid-giro { to { transform: translate(-50%, -50%) rotate(360deg); } }
  .lvid__flot { position: absolute; z-index: 2; height: auto; pointer-events: none;
    filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--color-text) 45%, transparent)); animation: lvid-flota 5s ease-in-out infinite; }
  .lvid__flot--1 { width: 120px; left: 4%; top: 30%; animation-delay: -1s; }
  .lvid__flot--2 { width: 96px; right: 5%; top: 22%; animation-delay: -2.5s; }
  .lvid__flot--3 { width: 84px; left: 10%; bottom: 10%; animation-delay: -3.5s; }
  .lvid__flot--4 { width: 90px; right: 9%; bottom: 12%; animation-delay: -0.5s; }
  @keyframes lvid-flota { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
  @media (max-width: 749px) {
    .lvid--nq { padding-block: 28px 34px; }
    .lvid--nq .lvid__cell .lvid__frame { transform: none !important; }
    .lvid__flot--1 { width: 64px; left: -8px; top: 14%; }
    .lvid__flot--2 { width: 58px; right: -6px; top: 8%; }
    .lvid__flot--3, .lvid__flot--4 { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lvid--nq::after, .lvid__flot { animation: none; }
  }

  /* ===== Estilo Metrikasa (propuesta B): concreto oscuro, texto a la izquierda ===== */
  .lvid--metrikasa {
    color: var(--color-bg);
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--color-text) 94%, transparent) 0%, color-mix(in srgb, var(--color-text) 82%, transparent) 45%, color-mix(in srgb, var(--color-text) 55%, transparent) 100%),
      var(--lvid-fondo, none) center / cover,
      var(--color-text);
    border-bottom: 5px solid var(--mk-10);
  }
  .lvid--metrikasa .lvid__band { background: transparent; color: var(--color-bg); }
  .lvid--metrikasa .lvid__grid { max-width: 1240px; margin-inline: auto; grid-template-columns: minmax(300px, 1fr) auto; }
  .lvid--metrikasa .lvid__band-inner { max-width: 460px; margin: 0; }
  .lvid--metrikasa .lvid__track { gap: 22px; }
  .lvid--metrikasa .lvid__prod-n { font-size: 11px; }
  .lvid__kick { display: inline-block; margin-bottom: 14px; padding: 7px 16px; border: 1.5px solid var(--mk-30); border-radius: 999px; color: var(--mk-30);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
  .lvid--metrikasa .lvid__title { text-transform: none; letter-spacing: -0.01em; font-weight: 800; font-size: clamp(30px, 4vw, 50px); margin-bottom: 14px; }
  .lvid--metrikasa .lvid__title span, .lvid--metrikasa .lvid__title em { display: block; }
  .lvid--metrikasa .lvid__title em { font-style: normal; color: var(--mk-30); }
  .lvid--metrikasa .lvid__sub { font-size: 15px; line-height: 1.6; opacity: 0.85; }
  .lvid__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 var(--space-md); }
  .lvid__btn { display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border-radius: 6px; font-family: var(--font-heading);
    font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
  .lvid__btn--fill { background: var(--mk-10); color: var(--color-text); }
  .lvid__btn--line { border: 1.5px solid var(--mk-30); color: var(--mk-30); }
  .lvid--metrikasa .lvid__arrow { border-color: var(--mk-30); color: var(--mk-30); }
  .lvid--metrikasa .lvid__arrow:hover { background: var(--mk-10); border-color: var(--mk-10); color: var(--color-text); }
  .lvid--metrikasa .lvid__cell:nth-child(even) { margin-top: 46px; }
  .lvid--metrikasa .lvid__video { border: 3px solid var(--mk-30); border-radius: 16px; }
  .lvid--metrikasa .lvid__tag { border-radius: 4px; background: var(--mk-30); color: var(--color-text); }
  .lvid--metrikasa .lvid__prod { border-radius: 10px; background: color-mix(in srgb, var(--color-text) 88%, transparent); border: 1px solid color-mix(in srgb, var(--mk-30) 35%, transparent); color: var(--color-bg); }
  .lvid--metrikasa .lvid__prod-p { color: var(--mk-30); }
  .lvid--metrikasa .lvid__buy { padding: 9px 10px; border-radius: 5px; background: var(--mk-10); color: var(--color-text); }
  @media (max-width: 989px) {
    .lvid--metrikasa .lvid__cell:nth-child(even) { margin-top: 0; }
  }
/* END_SECTION:landing-videos */

/* START_SECTION:main-policy (INDEX:31) */
.page-policy {
    padding: var(--space-md) 0 var(--space-2xl);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
  }

  @media (min-width: 750px) {
    .page-policy { padding: var(--space-lg) 0 var(--space-2xl); }
  }

  .page-policy__container {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 20px;
  }

  @media (min-width: 550px) {
    .page-policy__container { padding: 0 32px; }
  }

  @media (min-width: 990px) {
    .page-policy__container { padding: 0 var(--space-lg); }
  }

  /* ---------- Breadcrumb ---------- */
  .page-policy__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-md);
    font-size: 12.5px;
    color: var(--color-text-muted);
  }

  .page-policy__crumb {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 150ms ease;
  }

  .page-policy__crumb:hover {
    color: var(--color-brand-accent, var(--color-text));
  }

  .page-policy__crumb--current {
    color: var(--color-text);
    font-weight: var(--font-weight-strong);
  }

  .page-policy__crumb-sep {
    color: var(--color-border);
  }

  /* ---------- Header ---------- */
  .page-policy__header {
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
  }

  @media (min-width: 750px) {
    .page-policy__header {
      padding-bottom: var(--space-lg);
      margin-bottom: var(--space-xl);
    }
  }

  .page-policy__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(28px, 5vw, 40px);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
  }

  .page-policy__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin: 0;
  }

  .page-policy__meta time { text-transform: capitalize; }

  /* ---------- Prose (contenido rich del admin) ----------
     Cubre todos los tags que puede generar el editor Rich Text:
     p, strong/b, em/i, u, mark, small, sup/sub, a, ul/ol/li (con
     anidados), blockquote, hr, img, table, code/pre, dl, figure.
     Tipografía fluida con clamp para lectura cómoda en cualquier
     ancho y márgenes en em para que escalen con el tamaño. */

  .page-policy__prose {
    color: var(--color-text);
    font-size: clamp(15px, 3.6vw, 16.5px);
    line-height: 1.75;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .page-policy__prose > *:first-child { margin-top: 0; }
  .page-policy__prose > *:last-child { margin-bottom: 0; }

  /* Párrafos con aire generoso */
  .page-policy__prose p {
    margin: 0 0 1.15em;
  }

  /* Headings jerárquicos con espacio antes generoso */
  .page-policy__prose h2,
  .page-policy__prose h3,
  .page-policy__prose h4,
  .page-policy__prose h5,
  .page-policy__prose h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 2.2em 0 0.7em;
  }

  .page-policy__prose h2 { font-size: clamp(20px, 5vw, 24px); }
  .page-policy__prose h3 { font-size: clamp(17px, 4.2vw, 19px); }
  .page-policy__prose h4 { font-size: clamp(15.5px, 3.8vw, 16.5px); text-transform: uppercase; letter-spacing: 0.05em; }
  .page-policy__prose h5 { font-size: 15px; font-weight: var(--font-weight-strong); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
  .page-policy__prose h6 { font-size: 13px; font-weight: var(--font-weight-strong); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }

  .page-policy__prose h2:first-child,
  .page-policy__prose h3:first-child,
  .page-policy__prose h4:first-child { margin-top: 0; }

  /* Enlaces */
  .page-policy__prose a {
    color: var(--color-brand-accent, var(--color-text));
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    text-decoration-skip-ink: auto;
    transition: color 150ms ease, text-decoration-thickness 150ms ease;
    word-break: break-word;
  }

  .page-policy__prose a:hover {
    color: var(--color-text);
    text-decoration-thickness: 2px;
  }

  /* Énfasis tipográfico enriquecido */
  .page-policy__prose strong,
  .page-policy__prose b {
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
  }

  .page-policy__prose em,
  .page-policy__prose i {
    font-style: italic;
  }

  .page-policy__prose u {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  .page-policy__prose s,
  .page-policy__prose del {
    text-decoration: line-through;
    color: var(--color-text-muted);
  }

  .page-policy__prose mark {
    background: color-mix(in srgb, var(--color-brand-accent, #6c3fd4) 22%, transparent);
    color: var(--color-text);
    padding: 1px 4px;
    border-radius: 3px;
  }

  .page-policy__prose small {
    font-size: 0.85em;
    color: var(--color-text-muted);
  }

  .page-policy__prose sup,
  .page-policy__prose sub {
    font-size: 0.75em;
    line-height: 0;
  }

  .page-policy__prose abbr[title] {
    border-bottom: 1px dotted var(--color-text-muted);
    cursor: help;
    text-decoration: none;
  }

  /* Listas — anidados con espacio, marker en accent.
     Defensa contra reset global (ul,ol{padding:0}) de base.css:
     forzamos padding-left y list-style-position outside con
     dirección LTR + text-align left explícitos. */
  .page-policy__prose ul,
  .page-policy__prose ol {
    margin: 0 0 1.15em;
    padding-left: 1.75em;
    list-style-position: outside;
    direction: ltr;
    text-align: left;
  }

  .page-policy__prose ul { list-style-type: disc; }
  .page-policy__prose ol { list-style-type: decimal; }

  .page-policy__prose li {
    margin-bottom: 0.5em;
    padding-left: 0.35em;
    text-align: left;
  }

  .page-policy__prose li > p { margin-bottom: 0.5em; }

  .page-policy__prose li > ul,
  .page-policy__prose li > ol {
    margin: 0.5em 0 0.6em;
    padding-left: 1.5em;
  }

  .page-policy__prose ul ul { list-style-type: circle; }
  .page-policy__prose ul ul ul { list-style-type: square; }
  .page-policy__prose ol ol { list-style-type: lower-alpha; }
  .page-policy__prose ol ol ol { list-style-type: lower-roman; }

  .page-policy__prose li::marker {
    color: var(--color-brand-accent, var(--color-text-muted));
    font-weight: var(--font-weight-strong);
  }

  @media (min-width: 750px) {
    .page-policy__prose ul,
    .page-policy__prose ol { padding-left: 2em; }
  }

  /* Listas de definición */
  .page-policy__prose dl {
    margin: 0 0 1.15em;
    padding: 0;
  }

  .page-policy__prose dt {
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
    margin-top: 0.8em;
  }

  .page-policy__prose dd {
    margin: 0.2em 0 0.6em 1.2em;
    color: var(--color-text);
  }

  /* Blockquote */
  .page-policy__prose blockquote {
    margin: 1.6em 0;
    padding: 14px 18px;
    border-left: 4px solid var(--color-brand-accent, var(--color-text));
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--color-text);
    font-size: 1em;
    line-height: 1.65;
  }

  .page-policy__prose blockquote > *:first-child { margin-top: 0; }
  .page-policy__prose blockquote > *:last-child { margin-bottom: 0; }

  .page-policy__prose blockquote cite {
    display: block;
    margin-top: 0.6em;
    font-size: 0.85em;
    color: var(--color-text-muted);
    font-style: normal;
  }

  /* Separadores */
  .page-policy__prose hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 2.4em 0;
  }

  /* Imágenes y figuras */
  .page-policy__prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 1.2em 0;
    display: block;
  }

  .page-policy__prose figure {
    margin: 1.4em 0;
  }

  .page-policy__prose figure img { margin: 0; }

  .page-policy__prose figcaption {
    margin-top: 8px;
    text-align: center;
    font-size: 0.85em;
    color: var(--color-text-muted);
  }

  /* Tablas — scroll horizontal en mobile para que no rompan */
  .page-policy__prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.6em 0;
    font-size: 0.92em;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  @media (min-width: 750px) {
    .page-policy__prose table {
      display: table;
      overflow-x: visible;
    }
  }

  .page-policy__prose th,
  .page-policy__prose td {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
  }

  .page-policy__prose th {
    background: var(--color-bg-soft);
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
  }

  /* Código */
  .page-policy__prose code {
    padding: 2px 6px;
    background: var(--color-bg-soft);
    border-radius: var(--radius-xs, 4px);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    color: var(--color-text);
    word-break: break-word;
  }

  .page-policy__prose pre {
    margin: 1.4em 0;
    padding: 14px 16px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    line-height: 1.5;
  }

  .page-policy__prose pre code {
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: inherit;
  }

  /* Video/iframe responsive */
  .page-policy__prose iframe,
  .page-policy__prose video {
    max-width: 100%;
    height: auto;
    margin: 1.2em 0;
    border-radius: var(--radius-sm);
    display: block;
  }

  /* ---------- Bloque de ayuda ---------- */
  .page-policy__help {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
  }

  .page-policy__help-inner {
    padding: var(--space-lg);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    text-align: center;
  }

  .page-policy__help-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 18px;
    margin: 0 0 8px;
  }

  .page-policy__help-text {
    max-width: 480px;
    margin: 0 auto var(--space-md);
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
  }

  .page-policy__help-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .page-policy__help-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    text-decoration: none;
    border: 1px solid var(--color-text);
    transition: transform 150ms ease, background-color 150ms ease, color 150ms ease;
  }

  .page-policy__help-btn:hover,
  .page-policy__help-btn:focus-visible {
    transform: translateY(-1px);
    outline: none;
  }

  .page-policy__help-btn--wa {
    background: #25D366;
    color: #ffffff;
    border-color: #25D366;
  }

  .page-policy__help-btn--outline {
    background: transparent;
    color: var(--color-text);
  }

  .page-policy__help-btn--outline:hover {
    background: var(--color-text);
    color: var(--color-bg);
  }

  @media (prefers-reduced-motion: reduce) {
    .page-policy__crumb,
    .page-policy__help-btn { transition: none; }
  }
/* END_SECTION:main-policy */

/* START_SECTION:marcas-index (INDEX:32) */
.mkx {
    padding: var(--space-xl) 0 var(--space-2xl);
    /* Fondo con textura de puntos, para que no sea un blanco liso */
    background-color: var(--color-bg-soft);
    background-image: radial-gradient(color-mix(in srgb, var(--color-text) 14%, transparent) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
    color: var(--color-text);
    overflow: clip;
  }
  .mkx__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--space-md);
  }

  .mkx__head { text-align: center; margin-bottom: var(--space-xl); }
  /* El kicker usa el estilo NQ (.nq-kicker en snippets/nq-estilo) */
  .mkx__kicker { margin: 0 0 var(--space-sm); }
  .mkx__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading, 900);
    font-size: clamp(34px, 6vw, 64px);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .mkx__sub {
    margin: var(--space-sm) auto 0;
    max-width: 50ch;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.5;
  }

  .mkx__search { margin: 0 auto var(--space-xl); max-width: 420px; }
  .mkx__search-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .mkx__search-input {
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-md);
    border: 2px solid var(--color-text);
    border-radius: var(--radius-full, 999px);
    background: var(--color-bg);
    box-shadow: 4px 4px 0 var(--color-text);
    color: var(--color-text);
    font: inherit;
    font-size: 16px;
  }
  .mkx__search-input:focus-visible { outline: 3px solid var(--color-brand-accent); outline-offset: 3px; }

  .mkx__list {
    display: grid;
    gap: var(--space-xl);
    margin: 0;
    padding: 0 10px 0 0;
    list-style: none;
  }
  .mkx__item[hidden] { display: none; }
  .mkx__item:nth-child(odd) { --mkx-tilt: -0.7deg; }
  .mkx__item:nth-child(even) { --mkx-tilt: 0.7deg; }

  /* Tarjeta tipo sticker: borde grueso, sombra sólida con el color de
     acento de la marca y una leve inclinación. */
  .mkx__row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(130px, 220px) 1fr auto;
    align-items: stretch;
    min-height: 150px;
    border: 2px solid var(--color-text);
    border-radius: 22px;
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 9px 9px 0 var(--mkx-acento);
    transform: rotate(var(--mkx-tilt, 0deg));
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  a.mkx__row:hover,
  a.mkx__row:focus-visible {
    transform: rotate(0deg) translate(-4px, -4px);
    box-shadow: 15px 15px 0 var(--mkx-acento);
  }
  a.mkx__row:focus-visible { outline: 3px solid var(--color-brand-accent); outline-offset: 4px; }
  a.mkx__row:active {
    transform: rotate(0deg) translate(3px, 3px);
    box-shadow: 4px 4px 0 var(--mkx-acento);
  }

  /* Panel del logo: el color de la marca. Los logos son blancos. */
  .mkx__logo {
    display: grid;
    place-items: center;
    padding: var(--space-md);
    background: var(--mkx-bg);
    border-right: 2px solid var(--color-text);
  }
  .mkx__logo-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 92px;
    object-fit: contain;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  a.mkx__row:hover .mkx__logo-img { transform: scale(1.08) rotate(-3deg); }
  .mkx__logo-text {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--mkx-fg);
    color: var(--mkx-bg);
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 38px;
  }

  .mkx__body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: var(--space-md) var(--space-lg);
    overflow: hidden;
  }
  .mkx__num {
    position: relative;
    z-index: 1;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .mkx__name {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading, 900);
    font-size: clamp(28px, 4.6vw, 48px);
    letter-spacing: -0.01em;
    line-height: 1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }
  .mkx__cta-text {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--mkx-acento);
    text-underline-offset: 4px;
  }
  /* Nombre gigante de fondo, solo el contorno, cortado por el borde */
  .mkx__mark {
    position: absolute;
    right: -6px;
    bottom: -12px;
    z-index: 0;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(64px, 9vw, 104px);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--mkx-acento) 30%, transparent);
    pointer-events: none;
    user-select: none;
  }

  .mkx__go {
    z-index: 1;
    display: grid;
    place-items: center;
    align-self: center;
    width: 54px;
    height: 54px;
    margin-right: var(--space-md);
    border: 2px solid var(--color-text);
    border-radius: 50%;
    background: var(--color-text);
    color: var(--color-bg);
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  }
  a.mkx__row:hover .mkx__go {
    background: var(--mkx-bg);
    color: var(--mkx-fg);
    transform: rotate(-45deg);
  }

  .mkx__empty {
    margin: var(--space-lg) 0 0;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 600;
  }

  @media (max-width: 749px) {
    .mkx__list { gap: var(--space-lg); padding-right: 7px; }
    .mkx__row {
      grid-template-columns: 104px 1fr;
      min-height: 124px;
      box-shadow: 6px 6px 0 var(--mkx-acento);
    }
    a.mkx__row:hover, a.mkx__row:focus-visible { box-shadow: 10px 10px 0 var(--mkx-acento); }
    .mkx__logo { padding: var(--space-sm); }
    .mkx__logo-img { max-height: 64px; }
    .mkx__logo-text { width: 56px; height: 56px; font-size: 28px; }
    .mkx__body { padding: var(--space-sm) var(--space-md); }
    .mkx__name { font-size: 26px; }
    .mkx__mark { font-size: 58px; bottom: -8px; }
    .mkx__go {
      position: absolute;
      right: var(--space-sm);
      bottom: var(--space-sm);
      width: 40px;
      height: 40px;
      margin: 0;
    }
  }

  /* Entrada al hacer scroll: solo donde el navegador lo soporta */
  @keyframes mkx-in {
    from { opacity: 0; translate: 0 36px; }
    to { opacity: 1; translate: 0 0; }
  }
  @supports (animation-timeline: view()) {
    .mkx__item {
      animation: mkx-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mkx__item { animation: none; }
    .mkx__row, .mkx__go, .mkx__logo-img { transition: none; }
    a.mkx__row:hover, a.mkx__row:focus-visible, a.mkx__row:active { transform: none; }
    a.mkx__row:hover .mkx__go, a.mkx__row:hover .mkx__logo-img { transform: none; }
  }
/* END_SECTION:marcas-index */

/* START_SECTION:marquee (INDEX:33) */
.marquee {
    background: var(--marquee-bg, var(--color-text));
    color: var(--marquee-fg, var(--color-bg));
    padding: var(--marquee-pad-y, 14px) 0;
    overflow: hidden;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-strong, 600);
  }

  .marquee--upper .marquee__item { text-transform: uppercase; letter-spacing: 0.08em; }

  .marquee__viewport {
    display: flex;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }

  .marquee__track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--marquee-gap, 60px);
    padding-right: var(--marquee-gap, 60px);
    list-style: none;
    margin: 0;
    animation: marquee-scroll var(--marquee-speed, 40s) linear infinite;
    will-change: transform;
  }

  .marquee--right .marquee__track {
    animation-direction: reverse;
  }

  .marquee:hover .marquee__track { animation-play-state: paused; }

  .marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--marquee-item-size, 20px);
    line-height: 1;
    white-space: nowrap;
  }

  .marquee__ic {
    font-size: 1.1em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }

  .marquee__item--image {
    height: calc(var(--marquee-item-size, 20px) * 2.4);
    display: inline-flex;
    align-items: center;
  }

  .marquee__img {
    height: 100%;
    width: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
    opacity: 0.9;
    filter: brightness(0) invert(1);
    transition: opacity 200ms ease;
  }
  .marquee__img:hover { opacity: 1; }

  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - var(--marquee-gap, 60px))); }
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; transform: none; }
    .marquee__viewport {
      overflow-x: auto;
      scroll-snap-type: x proximity;
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:mobile-bottom-bar (INDEX:34) */
.mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    z-index: 900;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-bottom-bar__item {
    flex: 1 1 0;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px 6px;
    min-height: 56px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: var(--font-weight-strong);
    line-height: 1;
    transition: color 150ms ease;
    min-width: 0;
  }

  .mobile-bottom-bar__item:hover,
  .mobile-bottom-bar__item:focus-visible {
    color: var(--color-text);
  }

  .mobile-bottom-bar__item.is-active {
    color: var(--color-brand-secondary);
  }

  .mobile-bottom-bar__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-bottom-bar__icon-wrap svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .mobile-bottom-bar__label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.02em;
    text-transform: capitalize;
  }

  .mobile-bottom-bar__badge {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    color: var(--color-text);
    font-size: 10px;
    font-weight: var(--font-weight-strong);
    line-height: 16px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .mobile-bottom-bar__badge--cart {
    background: var(--color-brand-secondary);
    color: var(--color-bg);
  }

  .mobile-bottom-bar__badge:empty,
  .mobile-bottom-bar__badge[hidden],
  .mobile-bottom-bar__badge[data-count="0"] {
    display: none;
  }

  /* Devices pequenos (iPhone SE 375, algunos Android 360): mas compacto. */
  @media (max-width: 379.98px) {
    .mobile-bottom-bar__item {
      padding: 6px 2px 5px;
      min-height: 52px;
      font-size: 9px;
    }
    .mobile-bottom-bar__icon-wrap svg {
      width: 20px;
      height: 20px;
    }
  }

  /* Body padding-bottom para no tapar contenido. Solo en mobile. */
  @media (max-width: 749.98px) {
    body {
      padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
  }

  @media (max-width: 379.98px) {
    body {
      padding-bottom: calc(52px + env(safe-area-inset-bottom));
    }
  }

  /* Tablet+ desktop: bottom bar oculta. */
  @media (min-width: 750px) {
    .mobile-bottom-bar {
      display: none;
    }
  }
/* END_SECTION:mobile-bottom-bar */

/* START_SECTION:ofertas-relampago (INDEX:35) */
.ofertas-relampago {
    position: relative;
    background: var(--ofertas-bg, #fff8e1);
    padding: var(--space-lg) 0;
    isolation: isolate;
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* Frame con borde electrico (canvas + noise + glow multicapa) */
  .ofertas-relampago__frame {
    --eb-radius: 16px;
    position: relative;
    border-radius: var(--eb-radius);
    isolation: isolate;
  }

  @property --eb-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: true;
  }

  .ofertas-relampago__frame {
    animation: eb-hue-rotate calc(var(--eb-speed, 6) * 1s) linear infinite;
  }

  @keyframes eb-hue-rotate {
    to { --eb-angle: 360deg; }
  }

  .eb-canvas-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
  }

  .eb-canvas { display: block; }

  .eb-content {
    position: relative;
    z-index: 1;
    border-radius: var(--eb-radius);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .eb-layers {
    position: absolute;
    inset: 0;
    border-radius: var(--eb-radius);
    pointer-events: none;
    z-index: 0;
  }

  .eb-glow-1,
  .eb-glow-2,
  .eb-background-glow {
    position: absolute;
    inset: 0;
    border-radius: var(--eb-radius);
    pointer-events: none;
    box-sizing: border-box;
  }

  .eb-glow-1 {
    border: 2px solid transparent;
    background:
      conic-gradient(from var(--eb-angle, 0deg),
        var(--eb-c1), var(--eb-c2), var(--eb-c3), var(--eb-c4), var(--eb-c1)
      ) border-box;
    -webkit-mask:
      linear-gradient(#000 0 0) padding-box,
      linear-gradient(#000 0 0);
            mask:
      linear-gradient(#000 0 0) padding-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.6;
    filter: blur(1px);
  }

  .eb-glow-2 {
    border: 3px solid transparent;
    background:
      conic-gradient(from var(--eb-angle, 0deg),
        var(--eb-c1), var(--eb-c2), var(--eb-c3), var(--eb-c4), var(--eb-c1)
      ) border-box;
    -webkit-mask:
      linear-gradient(#000 0 0) padding-box,
      linear-gradient(#000 0 0);
            mask:
      linear-gradient(#000 0 0) padding-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    filter: blur(4px);
  }

  .eb-background-glow {
    z-index: -1;
    transform: scale(1.08);
    filter: blur(28px);
    opacity: 0.35;
    background: conic-gradient(from var(--eb-angle, 0deg),
      var(--eb-c1), var(--eb-c2), var(--eb-c3), var(--eb-c4), var(--eb-c1));
  }


  .ofertas-relampago--placeholder {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    text-align: center;
    font-style: italic;
    padding: var(--space-xl) 0;
  }

  .ofertas-relampago__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .ofertas-relampago__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
  }

  .ofertas-relampago__heading-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* ===== Estilo NQ: sello 3D, titular con relieve (.nq-titular) y kicker (.nq-kicker) ===== */
  .ofertas-relampago__icon {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--color-text) 35%, transparent));
  }

  .ofertas-relampago__heading {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(26px, 3vw, 38px);
    margin: 0;
    line-height: 1.05;
  }

  .ofertas-relampago__subheading { margin: 8px 0 0; }

  /* ============ Timer: reloj 3D + casillas moradas con borde blanco ============ */
  .ofertas-relampago__timer {
    --nq-dark: color-mix(in srgb, var(--color-brand-accent) 58%, var(--color-text));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-bg);
    user-select: none;
  }
  .ofertas-relampago__timer-ico {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--color-text) 35%, transparent));
  }

  .ofertas-relampago__timer-label {
    width: min-content;   /* "TERMINA" arriba, "EN" abajo */
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 1px 0 var(--nq-dark), -1px 0 var(--nq-dark), 0 1px var(--nq-dark), 0 -1px var(--nq-dark), 0 2px var(--nq-dark);
  }

  .ofertas-relampago__timer-clock {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
  }

  .ofertas-relampago__timer-unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 54px;
    line-height: 1;
    border-radius: 10px;
    border: 2px solid var(--color-bg);
    background: var(--color-brand-accent);
    box-shadow: 0 3px 0 var(--nq-dark), 0 6px 10px color-mix(in srgb, var(--nq-dark) 30%, transparent);
  }

  .ofertas-relampago__timer-unit b {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 23px;
    text-shadow: 1.5px 0 var(--nq-dark), -1.5px 0 var(--nq-dark), 0 1.5px var(--nq-dark), 0 -1.5px var(--nq-dark), 0 3px var(--nq-dark);
  }

  .ofertas-relampago__timer-unit em {
    font-style: normal;
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
    color: color-mix(in srgb, var(--color-brand-accent) 15%, var(--color-bg));
  }

  .ofertas-relampago__timer-sep {
    font-weight: 900;
    font-size: 20px;
    text-shadow: 0 2px var(--nq-dark);
    padding: 0 1px;
  }

  .ofertas-relampago__viewall { flex: 0 0 auto; }

  /* Celular: casillas más chicas para que entren con el reloj */
  @media (max-width: 749px) {
    .ofertas-relampago__icon { width: 46px; height: 46px; }
    .ofertas-relampago__timer-ico { width: 34px; height: 34px; }
    .ofertas-relampago__timer-label { font-size: 9.5px; }
    .ofertas-relampago__timer-unit { width: 38px; height: 42px; border-radius: 8px; border-width: 1.6px; }
    .ofertas-relampago__timer-unit b { font-size: 17px; }
    .ofertas-relampago__timer-unit em { font-size: 7px; margin-top: 3px; }
    .ofertas-relampago__timer-sep { font-size: 15px; }
  }

  /* ============ Track de productos ============ */
  .ofertas-relampago__viewport { position: relative; }

  /* Puntos de página: solo en celular */
  .ofertas-relampago__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
  }
  .ofertas-relampago__dots[hidden] { display: none; }
  .ofertas-relampago__dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1.5px solid var(--color-bg);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg) 35%, transparent);
    cursor: pointer;
    transition: width 220ms ease, background-color 220ms ease;
  }
  /* área táctil cómoda sin agrandar el punto */
  .ofertas-relampago__dot::after { content: ""; position: absolute; inset: -10px -4px; }
  .ofertas-relampago__dot[aria-selected="true"] { width: 22px; background: var(--color-brand-accent); }
  @media (min-width: 750px) { .ofertas-relampago__dots { display: none; } }
  @media (prefers-reduced-motion: reduce) { .ofertas-relampago__dot { transition: none; } }

  /* Celular: dos tarjetas a la vista; se desliza para ver más */
  .ofertas-relampago__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--space-sm)) / 2);
    gap: var(--space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 16px 4px;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  .ofertas-relampago__track::-webkit-scrollbar { display: none; }

  .ofertas-relampago__slot {
    scroll-snap-align: start;
  }

  @media (min-width: 550px) {
    .ofertas-relampago__track { grid-auto-columns: calc((100% - (var(--space-sm) * 2)) / 3); }
  }

  @media (min-width: 750px) {
    .ofertas-relampago__track {
      grid-auto-columns: calc((100% - (var(--space-sm) * 3)) / 4);
      margin: 0;
      padding-inline: 0;
    }
  }

  @media (min-width: 1200px) {
    .ofertas-relampago__track {
      grid-auto-columns: calc((100% - (var(--space-sm) * 4)) / 5);
    }
  }
/* END_SECTION:ofertas-relampago */

/* START_SECTION:page-app (INDEX:36) */
.appx { color: var(--color-text); background: var(--color-bg); overflow: clip; }
  .appx__wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-md); }
  .appx__wrap--narrow { max-width: 760px; }
  .appx__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Banner + botones */
  .appx__hero { position: relative; }
  .appx__banner { display: block; width: 100%; height: auto; }
  .appx__bar { padding: var(--space-lg) var(--space-md); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
  .appx__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-lg); max-width: 900px; margin: 0 auto; }
  .appx__qr { display: none; align-items: center; gap: var(--space-sm); }
  .appx__qr-img { width: 88px; height: 88px; padding: 6px; border: 2px solid var(--color-text); border-radius: 12px; background: #fff; }
  .appx__qr p { margin: 0; max-width: 16ch; font-size: 14px; font-weight: 600; line-height: 1.3; }
  @media (min-width: 990px) { .appx__qr { display: flex; } }

  .appx__stores { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
  .appx__store { display: inline-block; text-decoration: none; transition: transform 0.2s ease; }
  .appx__store:hover { transform: translateY(-3px) scale(1.03); }
  .appx__store:focus-visible { outline: 3px solid var(--color-brand-accent); outline-offset: 4px; border-radius: 10px; }
  .appx__badge { display: block; width: 160px; height: auto; }
  .appx__store-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 54px; padding: 8px 20px;
    border: 2px solid var(--color-text); border-radius: 12px;
    background: var(--color-text); color: var(--color-bg);
  }
  .appx__store-btn span { display: flex; flex-direction: column; line-height: 1.1; }
  .appx__store-btn small { font-size: 11px; opacity: 0.8; }
  .appx__store-btn strong { font-size: 18px; font-weight: 800; }
  .appx__soon { display: inline-block; margin: 0; padding: 12px 20px; border: 2px dashed currentColor; border-radius: var(--radius-full, 999px); font-weight: 700; }

  /* Secciones */
  .appx__sec { padding: var(--space-2xl) 0; }
  .appx__sec--alt { background: var(--color-bg-soft); }
  .appx__h2 {
    margin: 0 0 var(--space-xl); text-align: center;
    font-family: var(--font-heading); font-weight: var(--font-weight-heading, 900);
    font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.01em; line-height: 1.1;
  }
  .appx__benefits { display: grid; gap: var(--space-lg); margin: 0; padding: 0 6px 0 0; list-style: none; grid-template-columns: 1fr; }
  @media (min-width: 640px) { .appx__benefits { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 990px) { .appx__benefits { grid-template-columns: repeat(3, 1fr); } }
  .appx__benefit {
    padding: var(--space-lg);
    border: 2px solid var(--color-text); border-radius: 20px;
    background: var(--color-bg);
    box-shadow: 6px 6px 0 var(--color-brand-secondary);
  }
  .appx__icon {
    display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-sm);
    border: 2px solid var(--color-text); border-radius: 50%;
    background: var(--color-brand-primary); color: var(--color-text);
  }
  .appx__benefit-title { margin: 0 0 6px; font-family: var(--font-heading); font-size: 19px; font-weight: 800; line-height: 1.2; }
  .appx__benefit-text { margin: 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.5; }

  .appx__steps { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
  .appx__step { display: flex; gap: var(--space-md); align-items: flex-start; }
  .appx__step-num {
    flex: none; display: grid; place-items: center; width: 48px; height: 48px;
    border: 2px solid var(--color-text); border-radius: 50%;
    background: var(--color-brand-secondary); color: #fff;
    font-family: var(--font-heading); font-weight: 900; font-size: 22px;
  }
  .appx__step-title { margin: 4px 0 4px; font-family: var(--font-heading); font-size: 19px; font-weight: 800; }
  .appx__step-text { margin: 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.5; }

  .appx__final { padding: var(--space-2xl) 0; text-align: center; background: var(--color-brand-secondary); color: #fff; }
  .appx__final-title {
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading); font-weight: var(--font-weight-heading, 900);
    font-size: clamp(26px, 4vw, 40px); line-height: 1.1;
  }

  @media (prefers-reduced-motion: reduce) { .appx__store { transition: none; } .appx__store:hover { transform: none; } }
/* END_SECTION:page-app */

/* START_SECTION:page-faq (INDEX:37) */
.page-faq {
    padding: var(--space-lg) 0 var(--space-2xl);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
  }

  .page-faq__container {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 var(--space-md);
  }

  .page-faq__header {
    text-align: center;
    margin-bottom: var(--space-xl);
  }

  .page-faq__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(28px, 6vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 var(--space-sm);
  }

  .page-faq__intro {
    max-width: 560px;
    margin: 0 auto;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.5;
  }

  .page-faq__search {
    margin-bottom: var(--space-lg);
  }

  .page-faq__search-wrap {
    position: relative;
  }

  .page-faq__search-wrap svg {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
  }

  .page-faq__search-input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    background: var(--color-bg-soft);
    color: var(--color-text);
    font-family: inherit;
    font-size: 14px;
  }

  .page-faq__search-input:focus-visible {
    outline: 2px solid var(--color-brand-accent, var(--color-text));
    outline-offset: 1px;
    background: var(--color-bg);
  }

  .page-faq__no-results {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
  }

  .page-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .page-faq__category {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin: var(--space-lg) 0 var(--space-xs);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
  }

  .page-faq__category:first-child {
    margin-top: 0;
  }

  .page-faq__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }

  .page-faq__item[open] {
    border-color: var(--color-brand-accent, var(--color-text));
    box-shadow: var(--shadow-sm);
  }

  .page-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-strong);
    font-size: 15px;
    line-height: 1.35;
    color: var(--color-text);
  }

  .page-faq__question::-webkit-details-marker { display: none; }

  .page-faq__question:hover {
    background: var(--color-bg-soft);
  }

  .page-faq__chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform 220ms ease, color 220ms ease;
  }

  .page-faq__item[open] .page-faq__chevron {
    transform: rotate(180deg);
    color: var(--color-brand-accent, var(--color-text));
  }

  .page-faq__answer {
    padding: 0 18px 18px;
    color: var(--color-text);
    font-size: 14.5px;
    line-height: 1.6;
  }

  .page-faq__answer > *:first-child { margin-top: 0; }
  .page-faq__answer > *:last-child { margin-bottom: 0; }
  .page-faq__answer a {
    color: var(--color-brand-accent, var(--color-text));
    text-underline-offset: 3px;
  }

  .page-faq__contact {
    margin-top: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    text-align: center;
  }

  .page-faq__contact-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 20px;
    margin: 0 0 var(--space-xs);
    letter-spacing: -0.01em;
  }

  .page-faq__contact-text {
    max-width: 480px;
    margin: 0 auto var(--space-md);
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
  }

  .page-faq__contact-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .page-faq__contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    text-decoration: none;
    transition: transform 150ms ease, background-color 150ms ease;
  }

  .page-faq__contact-btn:hover,
  .page-faq__contact-btn:focus-visible {
    transform: translateY(-1px);
    outline: none;
  }

  .page-faq__contact-btn--wa {
    background: #25D366;
    color: #ffffff;
  }

  .page-faq__contact-hours {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-md) 0 0;
    font-size: 12.5px;
    color: var(--color-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .page-faq__item,
    .page-faq__chevron,
    .page-faq__contact-btn { transition: none; }
  }
/* END_SECTION:page-faq */

/* START_SECTION:page-ubicacion (INDEX:38) */
/* Fondo: degradado suave con el verde (secondary) y el morado (accent)
     de la marca, los mismos de las ilustraciones de las tiendas. */
  .page-ubi {
    padding: var(--space-lg) 0 var(--space-2xl);
    background:
      radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--color-brand-secondary) 16%, transparent), transparent 70%),
      radial-gradient(55% 35% at 100% 45%, color-mix(in srgb, var(--color-brand-accent) 12%, transparent), transparent 70%),
      radial-gradient(60% 35% at 0% 100%, color-mix(in srgb, var(--color-brand-secondary) 12%, transparent), transparent 70%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--color-brand-secondary) 8%, var(--color-bg)) 0%,
        var(--color-bg) 35%,
        color-mix(in srgb, var(--color-brand-accent) 6%, var(--color-bg)) 100%);
    color: var(--color-text);
    font-family: var(--font-body);
  }

  .page-ubi__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
  }

  .page-ubi__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
  }

  .page-ubi__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(28px, 6vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
  }

  .page-ubi__subheading {
    max-width: 560px;
    color: var(--color-text-muted);
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
  }

  .page-ubi__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-full, 999px);
    background: #25D366;
    color: #ffffff;
    font-weight: var(--font-weight-strong);
    text-decoration: none;
    font-size: 14px;
    transition: transform 150ms ease, box-shadow 150ms ease;
    margin-top: 6px;
  }

  .page-ubi__cta:hover,
  .page-ubi__cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    outline: none;
  }

  .page-ubi__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl) var(--space-lg);
  }
  @media (min-width: 990px) {
    .page-ubi__grid { gap: var(--space-2xl) var(--space-xl); }
  }
  /* Cada tarjeta ocupa 3 filas (foto, texto, mapa) compartidas con sus
     vecinas: asi textos y mapas quedan alineados aunque solo algunas
     sucursales tengan foto. */
  @supports (grid-template-rows: subgrid) {
    .page-ubi__grid > .page-ubi__card {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: var(--space-sm);
      justify-items: center;
      align-content: start;
    }
    .page-ubi__grid .page-ubi__card-photo { grid-row: 1; place-self: end center; }
    .page-ubi__grid .page-ubi__card-body { grid-row: 2; align-self: start; }
    .page-ubi__grid .page-ubi__card-map { grid-row: 3; margin-top: 0; align-self: start; }
  }

  @media (min-width: 550px) {
    .page-ubi__grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 990px) {
    .page-ubi__grid { grid-template-columns: repeat(3, 1fr); }
  }

  .page-ubi__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
    padding: 0;
    background: transparent;
    border: 0;
  }

  /* Ilustracion de la sucursal. Los PNG son cuadrados con mucho margen
     transparente arriba y abajo: los margenes negativos lo recortan para
     que el dibujo quede pegado al nombre. */
  .page-ubi__card-photo {
    --ubi-size: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ubi-size);
    height: var(--ubi-size);
    margin: calc(var(--ubi-size) * -0.16) 0 calc(var(--ubi-size) * -0.14);
  }
  @media (min-width: 990px) {
    .page-ubi__card-photo { --ubi-size: 240px; }
  }

  /* Mapa con boton flotante encima */
  .page-ubi__card-map {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Empuja el mapa al fondo de la tarjeta: asi los mapas de una fila
       quedan alineados aunque las direcciones tengan largos distintos. */
    margin-top: auto;
    overflow: hidden;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
  }

  .page-ubi__card-map iframe,
  .page-ubi__card-map embed,
  .page-ubi__card-map object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    z-index: 1;
  }

  .page-ubi__card-map-cta {
    position: absolute;
    z-index: 10;
    pointer-events: auto;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 12px;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-full, 999px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transition: transform 150ms ease, background 150ms ease;
  }
  .page-ubi__card-map-cta:hover,
  .page-ubi__card-map-cta:focus-visible {
    transform: translateY(-2px);
    background: var(--color-brand-accent, var(--color-text));
    outline: none;
  }

  .page-ubi__card:hover .page-ubi__card-map {
    border-color: var(--color-brand-accent, var(--color-text));
    box-shadow: var(--shadow-md);
  }

  .page-ubi__card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    width: 100%;
  }

  .page-ubi__card-name {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
    color: var(--color-text);
  }

  .page-ubi__card-address {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
  }

  .page-ubi__card-area {
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin: 0;
  }

  .page-ubi__card-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 12px;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 150ms ease;
  }

  .page-ubi__card-link:hover,
  .page-ubi__card-link:focus-visible {
    background: var(--color-brand-accent, var(--color-text));
    outline: none;
  }

  .page-ubi__pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    padding: var(--space-md);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    text-align: center;
  }

  @media (min-width: 550px) {
    .page-ubi__pillars { grid-template-columns: repeat(3, 1fr); }
  }

  .page-ubi__pillar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
  }

  .page-ubi__pillar svg {
    color: var(--color-brand-accent, var(--color-text));
    flex-shrink: 0;
  }
/* END_SECTION:page-ubicacion */

/* START_SECTION:popup-announcement (INDEX:41) */
/* Root: capa full-screen que contiene el scrim y ancla el popup.
       Usa flex para centrar/anclar sin transforms que rompan el clamp
       de altura en pantallas chicas. */
    .popup-ann-root {
      position: fixed;
      inset: 0;
      z-index: 998;
      display: flex;
      /* dvh en vez de vh: en mobile descuenta la barra del browser, que
         era la causa de que el popup se cortara y no se viera el cerrar */
      height: 100dvh;
      padding: 12px;
      padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
      pointer-events: none;
    }
    .popup-ann-root[hidden] { display: none; }

    .popup-ann-root--bottom-right  { align-items: flex-end; justify-content: flex-end; }
    .popup-ann-root--bottom-left   { align-items: flex-end; justify-content: flex-start; }
    .popup-ann-root--bottom-center { align-items: flex-end; justify-content: center; }
    .popup-ann-root--center        { align-items: center;   justify-content: center; }

    /* En mobile siempre abajo (mas comodo para el pulgar y no tapa el
       contenido de arriba); el centrado aplica solo en desktop. */
    @media (max-width: 749px) {
      .popup-ann-root--center { align-items: flex-end; }
    }

    /* Scrim oscuro detras del popup — da foco y sirve de tap-para-cerrar */
    .popup-ann__scrim {
      position: fixed;
      inset: 0;
      border: 0;
      padding: 0;
      cursor: pointer;
      background: rgba(0, 0, 0, var(--popup-scrim, 0.55));
      opacity: 0;
      transition: opacity 260ms ease;
      pointer-events: none;
    }
    .popup-ann-root[data-visible] .popup-ann__scrim {
      opacity: 1;
      pointer-events: auto;
    }

    .popup-ann {
      position: relative;
      z-index: 1;
      width: min(100%, var(--popup-w, 320px));
      /* Nunca mas alto que el viewport disponible -> nunca se corta */
      max-height: 100%;
      display: flex;
      flex-direction: column;
      background: var(--popup-bg, #ffffff);
      color: var(--popup-fg, #1a1a1a);
      border-radius: var(--popup-radius, 14px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      font-family: var(--font-body);
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 260ms ease, transform 260ms cubic-bezier(0.2, 0, 0, 1);
      pointer-events: none;
    }
    .popup-ann-root[data-visible] .popup-ann {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .popup-ann__close {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 3;
      width: 30px;
      height: 30px;
      padding: 0;
      background: rgba(0, 0, 0, 0.6);
      color: #ffffff;
      border: 0;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 150ms ease, transform 150ms ease;
      backdrop-filter: blur(4px);
    }
    .popup-ann__close:hover,
    .popup-ann__close:focus-visible {
      background: rgba(0, 0, 0, 0.8);
      transform: scale(1.05);
      outline: none;
    }

    /* El media puede encogerse si no hay altura suficiente, asi el body
       con el CTA siempre queda visible (no se corta el boton). */
    .popup-ann__media {
      position: relative;
      width: 100%;
      flex: 0 1 auto;
      min-height: 0;
      background: var(--color-bg-soft, #f4f4f6);
      aspect-ratio: var(--popup-ratio, 3 / 4);
      overflow: hidden;
    }
    .popup-ann__img,
    .popup-ann__video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .popup-ann__yt {
      position: absolute;
      inset: 0;
    }
    .popup-ann__yt iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* Body compacto. flex-shrink:0 para que nunca se recorte el CTA. */
    .popup-ann__body {
      flex: 0 0 auto;
      padding: 10px 12px 12px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .popup-ann__title {
      font-family: var(--font-heading);
      font-weight: var(--font-weight-heading, 700);
      font-size: 14.5px;
      line-height: 1.2;
      margin: 0;
      color: var(--popup-fg);
    }
    .popup-ann__subtitle {
      font-size: 12px;
      line-height: 1.35;
      color: color-mix(in srgb, var(--popup-fg) 72%, transparent);
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    /* CTA con borde animado de 2px que recorre el perimetro.
       Misma tecnica que ofertas-relampago: se anima el ANGULO del
       conic-gradient via @property (no se rota el elemento, que en un
       pill ancho deformaba la figura), y mask-composite recorta el
       relleno dejando visible solo el borde. */
    @property --cta-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    .popup-ann__cta {
      --cta-ring: 2px;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      margin-top: 8px;
      padding: 11px 16px;
      background: var(--popup-cta-bg);
      color: var(--popup-cta-fg);
      font-family: var(--font-heading);
      font-weight: var(--font-weight-strong, 600);
      font-size: 12.5px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 999px;
      transition: transform 150ms ease, filter 150ms ease;
    }
    .popup-ann__cta::before {
      content: '';
      position: absolute;
      inset: calc(var(--cta-ring) * -1);
      border-radius: inherit;
      border: var(--cta-ring) solid transparent;
      box-sizing: border-box;
      pointer-events: none;
      background: conic-gradient(
        from var(--cta-angle, 0deg),
        transparent 0deg,
        transparent 170deg,
        color-mix(in srgb, var(--popup-cta-ring) 40%, transparent) 230deg,
        var(--popup-cta-ring) 275deg,
        color-mix(in srgb, var(--popup-cta-ring) 40%, transparent) 320deg,
        transparent 360deg
      ) border-box;
      -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
              mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      animation: popup-ann-ring 2.6s linear infinite;
    }
    @keyframes popup-ann-ring {
      to { --cta-angle: 360deg; }
    }
    .popup-ann__cta:hover,
    .popup-ann__cta:focus-visible {
      transform: translateY(-1px);
      filter: brightness(1.08);
      outline: none;
    }
    .popup-ann__cta:active { transform: scale(0.97); }

    /* Pantallas muy bajas (o teclado abierto): el media se comprime para
       que titulo + CTA + cerrar siempre quepan. */
    @media (max-height: 640px) {
      .popup-ann__media { aspect-ratio: auto; height: 42dvh; }
      .popup-ann__subtitle { -webkit-line-clamp: 2; line-clamp: 2; }
    }

    @media (prefers-reduced-motion: reduce) {
      .popup-ann { transition: opacity 200ms ease; transform: none !important; }
      .popup-ann__cta::before { animation: none; }
    }
/* END_SECTION:popup-announcement */

/* START_SECTION:por-que-comprar (INDEX:42) */
.por-que {
    padding: var(--space-xl) 0;
    background: var(--color-bg, #ffffff);
    text-align: center;
  }

  .por-que__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading, 900);
    font-size: clamp(22px, 2.6vw, 34px);
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
    letter-spacing: -0.01em;
  }

  .por-que__subheading {
    font-size: 14px;
    color: var(--color-text-muted, #6b6b74);
    margin: 0 0 var(--space-lg);
  }

  .por-que__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-lg);
  }

  @media (min-width: 750px) {
    .por-que__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-xl);
    }
  }

  .por-que__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--space-xs);
  }

  .por-que__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pq-icon, #20b19e);
    margin-bottom: var(--space-md);
  }

  .por-que__icon svg {
    width: 56px;
    height: 56px;
    display: block;
  }

  .por-que__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(14px, 1.2vw, 17px);
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .por-que__desc {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    color: var(--color-text);
    max-width: 260px;
  }

  .por-que__link {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--pq-icon, #20b19e);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .por-que__link:hover {
    text-decoration-thickness: 2px;
  }
/* END_SECTION:por-que-comprar */

/* START_SECTION:product-antes-despues (INDEX:43) */
.pad__stage {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-bg-soft);
    box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.45);
    touch-action: pan-y;
    user-select: none;
  }
  @media (min-width: 750px) {
    .pad__stage { aspect-ratio: 16 / 10; }
  }
  .pad__stage:has(.pad__range:focus-visible) {
    outline: 3px solid var(--marca-10, var(--color-text));
    outline-offset: 3px;
  }
  .pad__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  .pad__before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  }

  .pad__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    transform: translateX(-1px);
    background: #fff;
    box-shadow: 0 0 12px rgb(0 0 0 / 0.25);
    pointer-events: none;
    z-index: 2;
  }
  .pad__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--marca-10, var(--color-text));
    color: var(--color-text);
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.3);
  }

  .pad__label {
    position: absolute;
    top: 16px;
    z-index: 2;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    pointer-events: none;
  }
  .pad__label--antes { left: 16px; }
  .pad__label--despues { right: 16px; color: var(--marca-30, #fff); }

  .pad__hint {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 2;
    transform: translateX(-50%);
    padding: 7px 14px;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.5);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 300ms ease;
  }
  .pad__stage.is-touched .pad__hint { opacity: 0; }

  /* El range cubre toda la imagen; invisible pero operable */
  .pad__range {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .pad__hint { transition: none; }
  }
/* END_SECTION:product-antes-despues */

/* START_SECTION:product-banner-hero (INDEX:44) */
.pbanner {
    display: block;
    padding-top: var(--pb-pad-top, 0px);
    padding-bottom: var(--pb-pad-bottom, 0px);
    view-transition-name: none;
    width: 100%;
  }

  .pbanner--empty .pbanner__hint {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md, 14px);
    padding: 20px 22px;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
    max-width: 800px;
    margin: 32px auto;
  }
  .pbanner--empty .pbanner__hint strong { color: var(--color-text); }

  /* ============ Frame + Picture (aspect-ratio panoramico) ============ */
  .pbanner__frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--pb-ratio-mobile, 4 / 3);
    overflow: hidden;
    isolation: isolate;
    background: var(--color-bg-soft, #f4f4f6);
  }
  @media (min-width: 750px) {
    .pbanner__frame {
      aspect-ratio: var(--pb-ratio-desktop, 21 / 9);
    }
  }

  .pbanner__picture {
    position: absolute;
    inset: 0;
    display: block;
  }
  .pbanner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
  }

  /* Parallax: la imagen es 30% mas alta que el frame para que al desplazarla
     por scroll no muestre bordes. Solo activa en desktop y sin reduced-motion. */
  @media (min-width: 750px) and (prefers-reduced-motion: no-preference) {
    .pbanner--parallax .pbanner__picture {
      top: -15%;
      bottom: -15%;
      height: 130%;
      inset: -15% 0;
    }
    .pbanner--parallax .pbanner__img {
      height: 100%;
      transform: translate3d(0, var(--pb-parallax-y, 0px), 0);
      transition: transform 100ms linear;
    }
  }

  /* Overlay gradient para contraste del texto sobre la imagen */
  .pbanner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      color-mix(in srgb, #000 var(--pb-overlay, 35%), transparent) 0%,
      color-mix(in srgb, #000 calc(var(--pb-overlay, 35%) * 0.4), transparent) 50%,
      transparent 100%
    );
    pointer-events: none;
  }
  .pbanner--dark .pbanner__overlay {
    background: linear-gradient(
      to top,
      color-mix(in srgb, #fff var(--pb-overlay, 35%), transparent) 0%,
      color-mix(in srgb, #fff calc(var(--pb-overlay, 35%) * 0.4), transparent) 50%,
      transparent 100%
    );
  }

  /* ============ Content ============ */
  .pbanner__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vw, 24px);
    /* Padding vertical proporcional + padding lateral que crece en pantallas anchas
       para que el contenido no quede pegado a la esquina en monitores 4K. */
    padding-block: clamp(20px, 4vw, 60px);
    padding-inline: clamp(20px, 6vw, 120px);
    color: #fff;
  }
  .pbanner--dark .pbanner__content { color: #1a1a1a; }

  .pbanner--pos-top .pbanner__content { justify-content: flex-start; }
  .pbanner--pos-center .pbanner__content { justify-content: center; }
  .pbanner--pos-bottom .pbanner__content { justify-content: flex-end; }

  .pbanner__header {
    max-width: var(--pb-max-width, 1200px);
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .pbanner__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(24px, 3.6vw, 48px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0;
    color: inherit;
    /* Doble capa: halo grande separa el texto del fondo (por si la imagen es
       clara/detallada); segunda capa da nitidez al borde del texto. Legible
       sobre cualquier imagen de fondo. */
    text-shadow:
      0 2px 12px rgba(0, 0, 0, 0.55),
      0 1px 3px rgba(0, 0, 0, 0.45);
    max-width: 30ch;
  }
  .pbanner--dark .pbanner__title {
    text-shadow:
      0 2px 12px rgba(255, 255, 255, 0.35),
      0 1px 2px rgba(255, 255, 255, 0.25);
  }

  .pbanner__subtitle {
    font-size: clamp(14px, 1.6vw, 20px);
    line-height: 1.5;
    margin: 0;
    color: inherit;
    opacity: 0.92;
    max-width: 60ch;
    text-shadow:
      0 2px 10px rgba(0, 0, 0, 0.5),
      0 1px 2px rgba(0, 0, 0, 0.4);
  }
  .pbanner--dark .pbanner__subtitle {
    text-shadow:
      0 2px 10px rgba(255, 255, 255, 0.3),
      0 1px 2px rgba(255, 255, 255, 0.2);
  }

  /* ============ Features (iconos + texto en fila) ============ */
  .pbanner__features {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: var(--pb-max-width, 1200px);
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 2vw, 24px);
  }

  /* Direccion de features: row (horizontal) o column (una debajo de otra) */
  .pbanner--dir-row .pbanner__features {
    flex-direction: row;
  }
  .pbanner--dir-column .pbanner__features {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(14px, 2vw, 22px);
    width: auto;
    max-width: none;
  }
  .pbanner--dir-column.pbanner--align-center .pbanner__features {
    align-items: center;
    align-self: center;
    margin-inline: auto;
  }
  .pbanner--dir-column.pbanner--align-start .pbanner__features {
    align-items: flex-start;
    align-self: flex-start;
  }
  .pbanner--align-start .pbanner__features { justify-content: flex-start; }
  .pbanner--align-center .pbanner__features { justify-content: center; }
  .pbanner--align-space-between .pbanner__features { justify-content: space-between; }

  /* Cuando features van a la izquierda, TODO el bloque (titulo + subtitulo + features)
     se pega al lado izq del banner (respetando el padding lateral), sin centrar
     en el viewport. Overrides el margin-auto del centrado default. */
  .pbanner--align-start .pbanner__header,
  .pbanner--align-start .pbanner__features {
    margin-inline: 0;
    text-align: left;
  }
  .pbanner--align-center .pbanner__header {
    text-align: center;
    align-items: center;
  }
  .pbanner--align-center .pbanner__title,
  .pbanner--align-center .pbanner__subtitle {
    max-width: 100%;
  }

  .pbanner__feature {
    display: inline-flex;
    align-items: center;
    gap: clamp(10px, 1vw, 14px);
    padding: clamp(8px, 1vw, 12px) clamp(14px, 1.4vw, 22px) clamp(8px, 1vw, 12px) clamp(8px, 1vw, 12px);
    background: color-mix(in srgb, #fff 92%, transparent);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #1a1a1a;
    font-size: clamp(13px, 1.4vw, 17px);
    font-weight: var(--font-weight-strong);
    line-height: 1;
  }
  .pbanner--dark .pbanner__feature {
    background: color-mix(in srgb, #1a1a1a 92%, transparent);
    color: #fff;
  }

  .pbanner__feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 2.4vw, 44px);
    height: clamp(32px, 2.4vw, 44px);
    background: color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 18%, #fff);
    color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    border-radius: 50%;
    flex-shrink: 0;
  }
  .pbanner__feature-icon img {
    width: clamp(18px, 1.4vw, 24px);
    height: clamp(18px, 1.4vw, 24px);
    object-fit: contain;
    display: block;
  }

  .pbanner__feature-text {
    white-space: nowrap;
  }

  /* Modo "bare" — sin relleno pill. Solo icono + texto flotante con
     text-shadow para legibilidad sobre imagenes claras. Icon circle sigue
     visible como acento visual pero con transparencia. */
  .pbanner--feat-bare .pbanner__feature {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    border-radius: 0;
    color: inherit;
    text-shadow:
      0 2px 8px rgba(0, 0, 0, 0.55),
      0 1px 2px rgba(0, 0, 0, 0.4);
  }
  .pbanner--feat-bare.pbanner--dark .pbanner__feature {
    text-shadow:
      0 2px 8px rgba(255, 255, 255, 0.35),
      0 1px 2px rgba(255, 255, 255, 0.2);
  }
  .pbanner--feat-bare .pbanner__feature-icon {
    background: color-mix(in srgb, var(--marca-10, var(--page-brand-bg, var(--color-brand-accent))) 88%, transparent);
    color: var(--marca-fg, #fff);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  }

  /* ============ Desktop compacto (imagen chica) ============
     Banner ancho igual, pero la foto se muestra como maximo a su ancho
     real (--pb-img-w), centrada y nitida; los costados son la misma foto
     desenfocada y los bordes de la foto se funden con degradado. */
  .pbanner__bg { display: none; }
  @media (min-width: 750px) {
    .pbanner--compact .pbanner__bg {
      display: block;
      position: absolute;
      inset: -48px;
      width: calc(100% + 96px);
      height: calc(100% + 96px);
      object-fit: cover;
      filter: blur(36px) saturate(1.1);
    }
    .pbanner--compact .pbanner__picture {
      left: 50%;
      right: auto;
      width: min(100%, var(--pb-img-w, 100%));
      transform: translateX(-50%);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
    }
    .pbanner--compact .pbanner__img {
      will-change: auto;
    }
  }

  /* ============ Mobile: foto arriba, contenido abajo ============
     Encima de la foto el titulo y 3-4 features no caben y tapaban la
     imagen. En mobile la foto va limpia (con la proporcion del ajuste) y
     debajo un panel con el color de la marca lleva titulo, subtitulo y
     TODAS las features. */
  @media (max-width: 749px) {
    .pbanner__frame {
      aspect-ratio: auto;
      overflow: visible;
    }
    .pbanner__picture {
      position: relative;
      inset: auto;
      aspect-ratio: var(--pb-ratio-mobile, 4 / 3);
      overflow: hidden;
    }
    .pbanner__overlay { display: none; }
    .pbanner__content {
      position: static;
      padding: 24px 16px 28px;
      background: var(--marca-30, var(--color-text));
      color: var(--marca-fg, #fff);
      justify-content: flex-start;
    }
    .pbanner--dark .pbanner__content {
      background: var(--marca-10, var(--color-bg-soft));
      color: var(--color-text);
    }
    .pbanner__title,
    .pbanner__subtitle,
    .pbanner--dark .pbanner__title,
    .pbanner--dark .pbanner__subtitle {
      text-shadow: none;
    }
    .pbanner__title {
      font-size: clamp(22px, 6.4vw, 28px);
      max-width: none;
    }
    .pbanner__subtitle {
      font-size: 15px;
    }
    /* Features: bajan de linea en vez de salirse de la pantalla */
    .pbanner--dir-column .pbanner__features {
      width: 100%;
      gap: 10px;
    }
    .pbanner__feature {
      max-width: 100%;
      align-items: center;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.3;
    }
    .pbanner__feature-text {
      white-space: normal;
      text-wrap: pretty;
    }
  }

  /* Mobile: en modo row, scroll horizontal si no caben */
  @media (max-width: 749px) {
    .pbanner--dir-row .pbanner__features {
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      padding-bottom: 4px;
      justify-content: flex-start !important;
    }
    .pbanner--dir-row .pbanner__features::-webkit-scrollbar { display: none; }
    .pbanner--dir-row .pbanner__feature {
      scroll-snap-align: start;
      flex-shrink: 0;
    }
  }
/* END_SECTION:product-banner-hero */

/* START_SECTION:product-benefits (INDEX:45) */
/* ============ Responsive mobile / tablet ============
     Los estilos del grid vienen inline desde settings del schema (grid-template-columns
     hardcoded por columns). En mobile forzamos 1 columna y en tablet 2, con !important
     porque el inline style tiene mayor especificidad. */
  @media (max-width: 749px) {
    .product-benefits__grid {
      grid-template-columns: 1fr !important;
      gap: 14px !important;
    }
    .product-benefits__item {
      padding: 20px !important;
    }
    .product-benefits__title {
      font-size: 26px !important;
      padding-inline: 12px;
    }
    .product-benefits__subtitle {
      font-size: 14px !important;
      padding-inline: 12px;
    }
  }
  @media (min-width: 750px) and (max-width: 989px) {
    .product-benefits__grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  /* Padding lateral del page-width en mobile para que las cards no toquen el borde */
  @media (max-width: 749px) {
    .product-benefits .page-width {
      padding-inline: 16px;
    }
  }

  /* Microinteracciones — hover en la card y su icono */
  .product-benefits__item {
    transition:
      transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
      background-color 200ms ease;
    will-change: transform;
    cursor: default;
  }

  .product-benefits__item:hover {
    transform: translateY(-4px);
    box-shadow:
      0 12px 28px color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, #000)) 25%, transparent),
      0 2px 6px color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, #000)) 12%, transparent);
  }

  .product-benefits__icon {
    display: inline-block;
    transition:
      transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 260ms ease;
  }

  .product-benefits__icon img {
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: center;
  }

  .product-benefits__item:hover .product-benefits__icon {
    transform: scale(1.08) rotate(-4deg);
  }

  .product-benefits__item:hover .product-benefits__icon img {
    transform: scale(1.05);
  }

  /* Título sube ligeramente para reforzar el "lift" */
  .product-benefits__item-title {
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .product-benefits__item:hover .product-benefits__item-title {
    transform: translateY(-2px);
  }

  /* Respetar prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .product-benefits__item,
    .product-benefits__icon,
    .product-benefits__icon img,
    .product-benefits__item-title {
      transition: none;
    }
    .product-benefits__item:hover {
      transform: none;
    }
    .product-benefits__item:hover .product-benefits__icon,
    .product-benefits__item:hover .product-benefits__icon img,
    .product-benefits__item:hover .product-benefits__item-title {
      transform: none;
    }
  }
/* END_SECTION:product-benefits */

/* START_SECTION:product-como-usar (INDEX:47) */
.pcu__grid {
    display: grid;
    gap: 20px;
  }
  @media (min-width: 990px) {
    .pcu__grid {
      grid-template-columns: 1.1fr 1fr;
      gap: 48px;
      align-items: start;
    }
  }

  .pcu__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
  }

  /* ===== Metrikasa ===== */
  .pcu--metrikasa .pcu__step {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 16px;
    align-items: center;
    width: 100%;
    padding: 16px 18px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: color-mix(in srgb, var(--color-bg) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--marca-30, var(--color-bg)) 22%, transparent);
    border-radius: 14px;
    transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  }
  .pcu--metrikasa .pcu__step:hover {
    border-color: color-mix(in srgb, var(--marca-30, var(--color-bg)) 55%, transparent);
  }
  .pcu--metrikasa .pcu__step:focus-visible {
    outline: 2px solid var(--marca-30, var(--color-bg));
    outline-offset: 3px;
  }
  .pcu--metrikasa .pcu__step.is-active {
    border-color: var(--marca-30, var(--color-bg));
    background: color-mix(in srgb, var(--marca-30, var(--color-bg)) 8%, transparent);
    box-shadow: 0 10px 30px -18px var(--marca-30, transparent);
  }
  .pcu--metrikasa .pcu__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--marca-30, var(--color-bg));
    color: var(--marca-30, var(--color-bg));
    font-weight: 800;
    font-size: 14px;
  }
  .pcu--metrikasa .pcu__step.is-active .pcu__num {
    border-color: transparent;
    background: linear-gradient(135deg, var(--marca-30, var(--color-bg)), var(--marca-10, var(--color-bg)));
    color: var(--color-text);
  }
  .pcu--metrikasa .pcu__step-body { display: grid; gap: 4px; }
  .pcu--metrikasa .pcu__step-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-bg);
  }
  .pcu--metrikasa .pcu__step-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-bg) 68%, transparent);
  }

  .pcu__stage {
    position: relative;
    aspect-ratio: var(--pcu-ar, 3 / 2);
    border-radius: 16px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-bg) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--marca-30, var(--color-bg)) 25%, transparent);
  }
  .pcu__frame {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 350ms ease;
  }
  .pcu__frame.is-active { opacity: 1; }
  /* contain: las fotos de los pasos pueden traer texto y tener proporciones
     distintas; se muestran completas sobre el fondo de la caja */
  .pcu__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .pcu__pill {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
  }
  .pcu__pill-step {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--marca-30, #fff);
  }

  @media (prefers-reduced-motion: reduce) {
    .pcu__frame, .pcu--metrikasa .pcu__step { transition: none; }
  }
/* END_SECTION:product-como-usar */

/* START_SECTION:product-comparativo (INDEX:48) */
.pcmp__card {
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    overflow: hidden;
    box-shadow: 0 18px 40px -28px rgb(0 0 0 / 0.35);
  }
  .pcmp__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .pcmp__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
  }
  .pcmp__th,
  .pcmp__crit,
  .pcmp__cell {
    padding: 16px 20px;
    text-align: left;
    vertical-align: middle;
  }
  .pcmp__cell { text-align: center; }
  .pcmp__table tbody tr + tr > * { border-top: 1px solid var(--color-border); }

  /* 1ª columna fija al hacer scroll horizontal */
  .pcmp__col-first {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 180px;
    background: var(--color-bg);
  }
  @media (min-width: 750px) {
    .pcmp__col-first { min-width: 0; width: 38%; }
  }

  .pcmp__crit {
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.35;
  }
  .pcmp__cell-text {
    display: inline-block;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
  }
  .pcmp__icon { display: inline-block; vertical-align: middle; }
  .pcmp__icon--yes { color: var(--marca-10, var(--color-brand-secondary, var(--color-text))); }
  .pcmp__icon--no { color: var(--color-text-muted); opacity: 0.7; }
  .pcmp__icon + .pcmp__cell-text { margin-left: 6px; }

  .pcmp__note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-muted);
  }

  /* Hint "desliza para comparar": solo mobile */
  .pcmp__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: -12px 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .pcmp__hint svg { color: var(--marca-10, currentColor); }
  @media (min-width: 750px) {
    .pcmp__hint { display: none; }
  }

  /* ===== Metrikasa ===== */
  .pcmp--metrikasa thead .pcmp__th {
    background: color-mix(in srgb, var(--marca-30, var(--color-text)) 10%, var(--color-bg));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: center;
    padding-block: 24px;
  }
  .pcmp--metrikasa thead .pcmp__th.pcmp__col-first { text-align: left; }
  .pcmp--metrikasa thead .pcmp__th.is-hl {
    background: var(--color-text);
    color: var(--marca-30, var(--color-bg));
    font-size: 12.5px;
    font-weight: 800;
  }
  .pcmp--metrikasa .pcmp__th-name { display: block; }
  .pcmp--metrikasa .pcmp__badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--marca-30, var(--color-bg)), var(--marca-10, var(--color-bg)));
    color: var(--color-text);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
  }
  .pcmp--metrikasa tbody .pcmp__cell.is-hl {
    background: color-mix(in srgb, var(--marca-30, var(--color-text)) 8%, var(--color-bg));
  }
/* END_SECTION:product-comparativo */

/* START_SECTION:product-donde-usar (INDEX:49) */
.pdu__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* ===== Metrikasa: ovalos (forma de estadio) ===== */
  .pdu--metrikasa .pdu__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Deja ver el borde de la siguiente tarjeta para invitar al scroll */
    margin-inline: calc(var(--space-md, 16px) * -1);
    padding-inline: var(--space-md, 16px);
    scroll-padding-inline: var(--space-md, 16px);
  }
  .pdu--metrikasa .pdu__list::-webkit-scrollbar { display: none; }
  /* Desktop: los ovalos ocupan todo el ancho y se centran (con auto-fill
     quedaban pegados a la izquierda dejando columnas vacias). */
  @media (min-width: 750px) {
    .pdu--metrikasa .pdu__list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 18px;
      overflow: visible;
      margin-inline: 0;
      padding-inline: 0;
    }
    .pdu--metrikasa .pdu__item {
      flex: 1 1 180px;
      max-width: 280px;
    }
  }
  .pdu--metrikasa .pdu__item { scroll-snap-align: start; }
  .pdu--metrikasa .pdu__tile {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
  }
  .pdu--metrikasa .pdu__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
  }
  .pdu--metrikasa .pdu__img--placeholder {
    background: linear-gradient(135deg, var(--color-bg-soft), var(--color-border));
  }
  .pdu--metrikasa .pdu__tile::after {
    content: '';
    position: absolute;
    inset: 40% 0 0 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0));
    pointer-events: none;
  }
  .pdu--metrikasa .pdu__name {
    position: absolute;
    inset: auto 12% 14% 12%;
    z-index: 1;
    text-align: center;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(13px, 1.3vw, 15px);
    line-height: 1.2;
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
  }
  .pdu--metrikasa .pdu__text {
    margin: 8px 6px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-muted);
    text-align: center;
  }
  @media (hover: hover) {
    .pdu--metrikasa .pdu__tile:hover .pdu__img { transform: scale(1.06); }
  }

  /* Nota / restriccion */
  .pdu--metrikasa .pdu__note {
    margin-top: clamp(24px, 3vw, 32px);
    padding: 16px 20px;
    border: 1px solid var(--marca-10, var(--color-border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--marca-10, var(--color-text)) 8%, var(--color-bg));
  }
  .pdu__note-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--marca-10, var(--color-text));
  }
  .pdu__note-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text);
  }

  @media (prefers-reduced-motion: reduce) {
    .pdu--metrikasa .pdu__img { transition: none; }
  }
/* END_SECTION:product-donde-usar */

/* START_SECTION:product-ficha-tecnica (INDEX:50) */
.pft__grid {
    display: grid;
    gap: 20px;
    align-items: start;
  }
  @media (min-width: 990px) {
    .pft__grid { grid-template-columns: 1.15fr 1fr; gap: 28px; }
  }
  .pft__col { display: grid; gap: 16px; }
  .pft__col:empty { display: none; }

  .pft__card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: clamp(18px, 2.4vw, 28px);
  }
  .pft__group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 15px;
    color: var(--color-text);
  }
  .pft__group-title::before {
    content: '';
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: var(--marca-10, var(--color-text));
  }

  /* Filas clave/valor */
  .pft__rows { margin: 0; }
  .pft__rows:empty { display: none; }
  .pft__row {
    display: grid;
    grid-template-columns: minmax(110px, 38%) 1fr;
    gap: 16px;
    padding: 13px 10px;
    border-top: 1px solid var(--color-border);
  }
  .pft__row:first-child { border-top: 0; }
  .pft__key {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
    line-height: 1.5;
  }
  .pft__val {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted);
  }

  .pft__bullets { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .pft__bullets:empty { display: none; }
  .pft__bullet {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
  }
  .pft__bullet::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--marca-10, var(--color-text));
  }

  /* Sub-tarjetas (grupos secundarios) */
  .pft__subcards { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .pft__subcard {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
  }
  .pft__subcard-icon { color: var(--marca-10, var(--color-text)); margin-top: 1px; }
  .pft__subcard-title {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text);
  }
  .pft__subcard-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted);
  }

  /* Nota destacada: callout oscuro con brillo del color 30 */
  .pft__note {
    position: relative;
    overflow: hidden;
    padding: 20px 22px;
    border-radius: 16px;
    background:
      radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--marca-30, var(--color-bg)) 32%, transparent), transparent 42%),
      var(--color-text);
    color: var(--color-bg);
  }
  .pft__note-kicker {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--marca-30, var(--color-bg));
  }
  .pft__note-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-bg) 88%, transparent);
  }

  @media (max-width: 749px) {
    .pft__row { grid-template-columns: 1fr; gap: 2px; padding-inline: 4px; }
  }
/* END_SECTION:product-ficha-tecnica */

/* START_SECTION:product-problema-solucion (INDEX:51) */
.pps {
      background: rgb(var(--pps-bg));
      color: rgb(var(--pps-text));
      padding: var(--pps-pt) var(--space-md) var(--pps-pb);
    }

    .pps__inner {
      max-width: var(--pps-max-width);
      margin: 0 auto;
    }

    .pps__head {
      max-width: 900px;
      margin: 0 auto var(--space-lg);
      text-align: left;
    }

    .pps__kicker {
      margin: 0 0 var(--space-sm);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgb(var(--pps-kicker-color));
    }

    .pps__title {
      margin: 0 0 var(--space-md);
      font-family: var(--font-heading);
      font-weight: var(--font-weight-heading);
      font-size: clamp(28px, 5vw, 52px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: rgb(var(--pps-text));
    }

    .pps__title-highlight {
      color: rgb(var(--pps-highlight-color));
    }

    .pps__lead {
      margin: 0;
      max-width: 620px;
      font-size: clamp(15px, 1.6vw, 17px);
      line-height: 1.5;
      color: rgb(var(--pps-muted));
    }

    /* ===== Stage ===== */
    .pps__stage {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: rgb(var(--pps-text) / 0.04);
    }

    .pps__track {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .pps__track::-webkit-scrollbar { display: none; }

    .pps__slide {
      position: relative;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      aspect-ratio: var(--pps-aspect);
      overflow: hidden;
    }

    .pps__img,
    .pps__slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .pps__img--placeholder {
      background: linear-gradient(135deg, rgb(var(--pps-text) / 0.08), rgb(var(--pps-text) / 0.02));
    }

    /* ===== Overlay ===== */
    .pps__overlay {
      position: absolute;
      max-width: min(80%, 520px);
      padding: clamp(16px, 2.5vw, 32px);
      color: #fff;
      z-index: 2;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    }

    .pps--overlay-bottom-left .pps__overlay {
      left: 0;
      bottom: 0;
    }
    .pps--overlay-bottom-center .pps__overlay {
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      text-align: center;
    }
    .pps--overlay-top-left .pps__overlay {
      left: 0;
      top: 0;
    }

    /* Degradado sutil detras del overlay */
    .pps__slide::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 45%;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
      pointer-events: none;
      z-index: 1;
    }
    .pps--overlay-top-left .pps__slide::after {
      inset: 0 0 auto 0;
      height: 45%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    }

    .pps__overlay-title {
      margin: 0 0 6px;
      font-family: var(--font-heading);
      font-weight: var(--font-weight-heading);
      font-size: clamp(20px, 3vw, 30px);
      line-height: 1.1;
    }
    .pps__overlay-desc {
      margin: 0;
      font-size: clamp(13px, 1.6vw, 15px);
      line-height: 1.45;
      opacity: 0.95;
    }

    /* ===== Nav arrows ===== */
    .pps__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 0;
      background: rgba(0, 0, 0, 0.35);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 3;
      transition: background 200ms ease, transform 200ms ease;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .pps__nav:hover { background: rgba(0, 0, 0, 0.55); transform: translateY(-50%) scale(1.05); }
    .pps__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .pps__nav--prev { left: 12px; }
    .pps__nav--next { right: 12px; }

    @media (min-width: 750px) {
      .pps__nav { width: 52px; height: 52px; }
      .pps__nav--prev { left: 20px; }
      .pps__nav--next { right: 20px; }
    }

    /* ===== Indicator top-right ===== */
    .pps__indicator {
      position: absolute;
      top: 16px;
      right: 16px;
      display: flex;
      gap: 6px;
      z-index: 3;
      padding: 6px 8px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: var(--radius-full);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .pps__ind-item {
      appearance: none;
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .pps__ind-item:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* Barras */
    .pps--ind-bars .pps__ind-item {
      width: 26px;
      height: 3px;
      background: rgba(255, 255, 255, 0.4);
      border-radius: var(--radius-full);
      transition: background 250ms ease, width 250ms ease;
    }
    .pps--ind-bars .pps__ind-item.is-active {
      background: rgb(var(--pps-highlight-color));
      width: 38px;
    }

    /* Dots */
    .pps--ind-dots .pps__ind-item {
      width: 8px;
      height: 8px;
      background: rgba(255, 255, 255, 0.45);
      border-radius: 50%;
      transition: background 250ms ease, transform 250ms ease;
    }
    .pps--ind-dots .pps__ind-item.is-active {
      background: rgb(var(--pps-highlight-color));
      transform: scale(1.4);
    }

    /* Numbers */
    .pps--ind-numbers .pps__ind-item {
      min-width: 24px;
      height: 24px;
      padding: 0 8px;
      background: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.85);
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 700;
      transition: background 250ms ease, color 250ms ease;
    }
    .pps--ind-numbers .pps__ind-item.is-active {
      background: rgb(var(--pps-highlight-color));
      color: #fff;
    }

    /* Empty state */
    .pps__empty {
      padding: var(--space-xl);
      background: rgb(var(--pps-text) / 0.05);
      border: 1px dashed rgb(var(--pps-text) / 0.2);
      border-radius: var(--radius-md);
      color: rgb(var(--pps-muted));
      font-size: 14px;
      text-align: center;
    }
    .pps__empty code {
      background: rgb(var(--pps-text) / 0.08);
      padding: 2px 6px;
      border-radius: 4px;
      font-family: monospace;
    }

    /* Mobile refinements */
    @media (max-width: 749px) {
      .pps__head { text-align: left; }
      .pps__overlay { max-width: 90%; padding: 16px; }
      .pps__indicator { top: 10px; right: 10px; }
      .pps--ind-bars .pps__ind-item { width: 20px; }
      .pps--ind-bars .pps__ind-item.is-active { width: 30px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .pps__nav, .pps__ind-item { transition: none; }
    }
/* END_SECTION:product-problema-solucion */

/* START_SECTION:product-slide-shows (INDEX:53) */
.pss {
    padding-top: var(--pss-pad-top, 32px);
    padding-bottom: var(--pss-pad-bottom, 32px);
    view-transition-name: none;
  }

  .pss--empty .pss__hint {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md, 14px);
    padding: 20px 22px;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
  }
  .pss--empty .pss__hint strong { color: var(--color-text); }

  .pss__container {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 5vw, 44px);
    /* Mobile: mantener padding lateral suave para que el card respire */
    padding: 0 var(--space-md, 16px);
  }

  /* Desktop: full width edge-to-edge (sin max-width, sin padding lateral) */
  @media (min-width: 990px) {
    .pss__container {
      padding: 0;
      max-width: none;
    }
  }

  .pss__show {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 20px);
  }

  .pss__show-heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(20px, 3vw, 26px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0;
  }

  /* ============ Viewport + track ============ */
  .pss__viewport {
    position: relative;
    isolation: isolate;
  }

  .pss__track {
    display: flex;
    gap: clamp(12px, 2vw, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pss__track::-webkit-scrollbar { display: none; }

  /* ============ Slide (card) ============
     El .pss__slide es el "banner" edge-to-edge con fondo colorido.
     El .pss__slide-inner es el contenedor BOXED (max-width) que aloja
     texto + imagen. Asi el fondo llega a los bordes de la pantalla,
     pero el contenido respeta un ancho maximo legible. */
  .pss__slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding-block: clamp(24px, 4vw, 44px);
    isolation: isolate;
  }
  /* Fondos configurables por el setting bg_style */
  .pss--bg-brand-accent .pss__slide {
    background: color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) var(--pss-bg-intensity, 8%), var(--color-bg));
  }
  .pss--bg-brand-solid .pss__slide {
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--color-bg);
  }
  .pss--bg-brand-solid .pss__slide-title,
  .pss--bg-brand-solid .pss__slide-text,
  .pss--bg-brand-solid .pss__slide-kicker,
  .pss--bg-brand-solid .pss__slide-cta { color: inherit; }
  .pss--bg-brand-solid .pss__slide-kicker-line { background: currentColor; }
  .pss--bg-bg .pss__slide { background: var(--color-bg); }
  .pss--bg-bg-soft .pss__slide { background: var(--color-bg-soft, #f4f4f6); }
  .pss--bg-transparent .pss__slide { background: transparent; }

  /* Variantes del sistema 60/30/10 de marca — usa --marca-XX de pdp-brand-bg
     con fallback al brand accent del theme si no estamos en PDP con marca. */
  .pss--bg-brand-60 .pss__slide {
    background: var(--marca-60, var(--page-brand-bg, var(--color-brand-accent)));
    color: var(--marca-fg, var(--color-bg));
  }
  .pss--bg-brand-30 .pss__slide {
    background: var(--marca-30, var(--page-brand-bg, var(--color-brand-accent)));
    color: var(--marca-fg, var(--color-bg));
  }
  .pss--bg-brand-10 .pss__slide {
    background: var(--marca-10, var(--page-brand-bg, var(--color-brand-accent)));
    color: var(--marca-fg, var(--color-bg));
  }
  .pss--bg-brand-60 .pss__slide-title,
  .pss--bg-brand-60 .pss__slide-text,
  .pss--bg-brand-60 .pss__slide-kicker,
  .pss--bg-brand-60 .pss__slide-cta,
  .pss--bg-brand-30 .pss__slide-title,
  .pss--bg-brand-30 .pss__slide-text,
  .pss--bg-brand-30 .pss__slide-kicker,
  .pss--bg-brand-30 .pss__slide-cta,
  .pss--bg-brand-10 .pss__slide-title,
  .pss--bg-brand-10 .pss__slide-text,
  .pss--bg-brand-10 .pss__slide-kicker,
  .pss--bg-brand-10 .pss__slide-cta { color: inherit; }
  .pss--bg-brand-60 .pss__slide-kicker-line,
  .pss--bg-brand-30 .pss__slide-kicker-line,
  .pss--bg-brand-10 .pss__slide-kicker-line { background: currentColor; }

  @media (max-width: 989px) {
    /* En mobile mantenemos radio de card — no es edge-to-edge en mobile */
    .pss__slide {
      border-radius: var(--radius-lg, 20px);
    }
  }

  .pss__slide-inner {
    max-width: var(--pss-max-width, 1200px);
    margin: 0 auto;
    padding-inline: clamp(18px, 3vw, 32px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 32px);
  }

  @media (min-width: 750px) {
    .pss__slide-inner {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
  }

  @media (min-width: 990px) {
    .pss__slide-inner {
      grid-template-columns: 1.1fr 1fr;
      gap: clamp(28px, 4vw, 48px);
    }
  }

  /* Lado default de la imagen (setting image_side) */
  @media (min-width: 750px) {
    .pss--image-right .pss__slide-media { order: 2; }
    .pss--image-right .pss__slide-body { order: 1; }
    .pss--image-left .pss__slide-media { order: 1; }
    .pss--image-left .pss__slide-body { order: 2; }

    /* Alternancia opcional (setting alternate_sides). Invierte slides impares. */
    .pss--alternate.pss--image-right .pss__slide[data-index="1"] .pss__slide-media,
    .pss--alternate.pss--image-right .pss__slide[data-index="3"] .pss__slide-media,
    .pss--alternate.pss--image-right .pss__slide[data-index="5"] .pss__slide-media,
    .pss--alternate.pss--image-right .pss__slide[data-index="7"] .pss__slide-media { order: 1; }
    .pss--alternate.pss--image-right .pss__slide[data-index="1"] .pss__slide-body,
    .pss--alternate.pss--image-right .pss__slide[data-index="3"] .pss__slide-body,
    .pss--alternate.pss--image-right .pss__slide[data-index="5"] .pss__slide-body,
    .pss--alternate.pss--image-right .pss__slide[data-index="7"] .pss__slide-body { order: 2; }

    .pss--alternate.pss--image-left .pss__slide[data-index="1"] .pss__slide-media,
    .pss--alternate.pss--image-left .pss__slide[data-index="3"] .pss__slide-media,
    .pss--alternate.pss--image-left .pss__slide[data-index="5"] .pss__slide-media,
    .pss--alternate.pss--image-left .pss__slide[data-index="7"] .pss__slide-media { order: 2; }
    .pss--alternate.pss--image-left .pss__slide[data-index="1"] .pss__slide-body,
    .pss--alternate.pss--image-left .pss__slide[data-index="3"] .pss__slide-body,
    .pss--alternate.pss--image-left .pss__slide[data-index="5"] .pss__slide-body,
    .pss--alternate.pss--image-left .pss__slide[data-index="7"] .pss__slide-body { order: 1; }
  }

  /* Alineacion del texto (setting text_align) */
  .pss--text-center .pss__slide-body {
    text-align: center;
    align-items: center;
  }
  .pss--text-center .pss__slide-kicker { justify-content: center; }
  .pss--text-center .pss__slide-cta { justify-content: center; }

  .pss__slide-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
  }
  .pss__slide-link:focus-visible {
    outline: 2px solid var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    outline-offset: -4px;
    border-radius: inherit;
  }

  /* ============ Media (foto cuadrada) ============ */
  .pss__slide-media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md, 14px);
    overflow: hidden;
    background: var(--color-bg-soft, #f4f4f6);
  }
  .pss__slide-img,
  .pss__slide-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pss__slide-placeholder {
    background: linear-gradient(135deg, var(--color-bg-soft, #f4f4f6), color-mix(in srgb, var(--color-text) 6%, transparent));
  }

  /* ============ Body (texto) ============ */
  .pss__slide-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }

  .pss__slide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 12.5px;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
  }
  .pss__slide-kicker-line {
    width: 28px;
    height: 2px;
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    border-radius: 2px;
  }

  .pss__slide-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(20px, 3vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--color-text);
  }

  .pss__slide-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
  }
  .pss__slide-text p { margin: 0 0 8px; }
  .pss__slide-text p:last-child { margin-bottom: 0; }

  .pss__slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    font-weight: var(--font-weight-strong);
    font-size: 13.5px;
    letter-spacing: 0.02em;
  }
  .pss__slide-cta svg { transition: transform 220ms ease; }
  .pss__slide:hover .pss__slide-cta svg { transform: translateX(3px); }

  /* ============ Nav (prev / next) + Dots ============ */
  .pss__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }
  .pss__nav:hover {
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--color-bg);
    border-color: transparent;
    transform: translateY(-50%) scale(1.05);
  }
  .pss__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: translateY(-50%);
  }
  .pss__nav--prev { left: max(12px, calc(50vw - 620px)); }
  .pss__nav--next { right: max(12px, calc(50vw - 620px)); }

  /* Celular: flechas centradas sobre la imagen y puntos justo debajo de ella,
     encima del texto. El JS mide la imagen y deja --pss-media-mid / -bottom. */
  @media (max-width: 749px) {
    .pss__nav {
      top: var(--pss-media-mid, 50%);
      width: 34px;
      height: 34px;
      background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    }
    .pss__nav--prev { left: 6px; }
    .pss__nav--next { right: 6px; }
    .pss__nav:disabled { opacity: 0; pointer-events: none; }
    .pss--dots-arriba .pss__dots {
      position: absolute;
      left: 0;
      right: 0;
      top: var(--pss-media-bottom, auto);
      margin-top: 10px;
      z-index: 2;
    }
    .pss--dots-arriba .pss__slide-body { padding-top: 22px; }
  }

  .pss__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
  }
  .pss__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background: color-mix(in srgb, var(--color-text) 25%, transparent);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 200ms ease, transform 200ms ease, width 200ms ease;
  }
  .pss__dot:hover {
    background: color-mix(in srgb, var(--color-text) 55%, transparent);
  }
  .pss__dot.is-active {
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    width: 22px;
    border-radius: 999px;
  }

  @media (prefers-reduced-motion: reduce) {
    .pss__slide-cta svg,
    .pss__nav,
    .pss__dot { transition: none; }
  }
/* END_SECTION:product-slide-shows */

/* START_SECTION:product-stats-strip (INDEX:54) */
.pstats {
    padding-top: var(--ps-pad-top, 40px);
    padding-bottom: var(--ps-pad-bottom, 40px);
    view-transition-name: none;
  }

  .pstats--empty .pstats__hint {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md, 14px);
    padding: 20px 22px;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
    max-width: 800px;
    margin: 32px auto;
  }
  .pstats--empty .pstats__hint strong { color: var(--color-text); }

  .pstats__container {
    max-width: var(--ps-max-width, 1400px);
    margin: 0 auto;
    padding-inline: var(--ps-margin-inline, 16px);
  }

  /* ============ Box: la banda con fondo ============ */
  .pstats__box {
    border-radius: var(--ps-radius, 24px);
    padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 48px);
    isolation: isolate;
  }

  /* Variantes de fondo — degradado sutil (135deg) del acento base a
     un tono un poco mas oscuro en la esquina superior izq y un highlight
     ligero en la inferior derecha. Da profundidad y look premium. */
  .pstats--bg-brand-solid .pstats__box {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 82%, #000) 0%,
      var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 55%,
      color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 88%, #fff) 100%
    );
  }
  .pstats--bg-brand-accent .pstats__box {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 14%, var(--color-bg)) 0%,
      color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 8%, var(--color-bg)) 100%
    );
  }
  .pstats--bg-dark .pstats__box {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 60%, #262626 100%);
  }
  .pstats--bg-light .pstats__box {
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-soft, #f4f4f6) 100%);
  }

  /* Variantes del sistema 60/30/10 de marca (nueva paleta explicita).
     Usa las CSS vars --marca-XX que emite pdp-brand-bg.liquid — con fallback
     al brand accent del theme si estamos fuera de PDP (sin marca detectada). */
  .pstats--bg-brand-60 .pstats__box {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--marca-60, var(--page-brand-bg, var(--color-brand-accent))) 88%, #000) 0%,
      var(--marca-60, var(--page-brand-bg, var(--color-brand-accent))) 55%,
      color-mix(in srgb, var(--marca-60, var(--page-brand-bg, var(--color-brand-accent))) 88%, #fff) 100%
    );
  }
  .pstats--bg-brand-30 .pstats__box {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--marca-30, var(--page-brand-bg, var(--color-brand-accent))) 88%, #000) 0%,
      var(--marca-30, var(--page-brand-bg, var(--color-brand-accent))) 55%,
      color-mix(in srgb, var(--marca-30, var(--page-brand-bg, var(--color-brand-accent))) 88%, #fff) 100%
    );
  }
  .pstats--bg-brand-10 .pstats__box {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--marca-10, var(--page-brand-bg, var(--color-brand-accent))) 88%, #000) 0%,
      var(--marca-10, var(--page-brand-bg, var(--color-brand-accent))) 55%,
      color-mix(in srgb, var(--marca-10, var(--page-brand-bg, var(--color-brand-accent))) 88%, #fff) 100%
    );
  }

  /* Colores del texto segun modo */
  .pstats--light .pstats__value { color: color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 40%, #fff); }
  .pstats--light .pstats__label { color: color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 40%, #fff); }
  .pstats--light .pstats__desc { color: color-mix(in srgb, #fff 78%, transparent); }
  .pstats--light .pstats__heading { color: #fff; }

  .pstats--dark .pstats__value { color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text))); }
  .pstats--dark .pstats__label { color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text))); }
  .pstats--dark .pstats__desc { color: var(--color-text-muted); }
  .pstats--dark .pstats__heading { color: var(--color-text); }

  /* ============ Heading ============ */
  .pstats__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(20px, 2.5vw, 28px);
    line-height: 1.15;
    margin: 0 0 clamp(20px, 3vw, 32px);
    text-align: center;
  }

  /* ============ Grid ============
     Mobile: 2 columnas (2x2 con 4 stats).
     Tablet: 2 columnas.
     Desktop: usa el setting `columns` (default 4). */
  /* minmax(0,1fr): una palabra larga no ensancha la columna (desbordaba la página) */
  .pstats__item { min-width: 0; overflow-wrap: break-word; }
  .pstats__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 40px);
  }
  @media (min-width: 900px) {
    .pstats__grid {
      grid-template-columns: repeat(var(--ps-cols, 4), minmax(0, 1fr));
    }
  }

  /* ============ Item ============ */
  .pstats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding-inline: clamp(4px, 1vw, 8px);
  }

  .pstats__value {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    /* Degradado con color acento — del acento base a un tono mas claro.
       En modo light (fondo oscuro) va del acento tenue al blanco.
       En modo dark (fondo claro) va del acento sólido a un tono mas suave. */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .pstats--light .pstats__value {
    background-image: linear-gradient(
      135deg,
      color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 50%, #fff) 0%,
      #fff 100%
    );
  }
  .pstats--dark .pstats__value {
    background-image: linear-gradient(
      135deg,
      var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 0%,
      color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 55%, transparent) 100%
    );
  }

  .pstats__label {
    font-size: clamp(12.5px, 1.2vw, 14.5px);
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.01em;
    margin: 0;
    line-height: 1.35;
  }

  .pstats__desc {
    font-size: clamp(12px, 1.1vw, 13.5px);
    font-weight: var(--font-weight-normal);
    line-height: 1.45;
    margin: 4px 0 0;
    opacity: 0.92;
  }

  /* Mobile: mas compacto */
  @media (max-width: 549px) {
    .pstats__value {
      font-size: 36px;
    }
    .pstats__label {
      font-size: 13px;
    }
    .pstats__desc {
      font-size: 12.5px;
    }
  }

  /* ============ Estilo METRIKASA: tarjetas con icono ============
     Sin banda de color: cada stat es una tarjeta clara con borde fino,
     icono de linea en --marca-10, valor en negrita y etiqueta en
     mayusculas espaciadas. Selectores con 3 clases para ganarle a los
     modos .pstats--light / --dark del estilo vauli. */
  .pstats.pstats--estilo-metrikasa .pstats__box {
    background: none;
    padding: 0;
    border-radius: 0;
  }
  .pstats.pstats--estilo-metrikasa .pstats__grid {
    gap: 12px;
  }
  @media (min-width: 750px) {
    .pstats.pstats--estilo-metrikasa .pstats__grid { gap: 16px; }
  }
  .pstats.pstats--estilo-metrikasa .pstats__item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: clamp(18px, 2.4vw, 28px) clamp(12px, 1.6vw, 18px);
    gap: 4px;
    justify-content: center;
  }
  .pstats.pstats--estilo-metrikasa .pstats__icon {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: 10px;
    background-color: var(--marca-10, var(--color-text));
    -webkit-mask: var(--ps-icon) center / contain no-repeat;
            mask: var(--ps-icon) center / contain no-repeat;
  }
  .pstats.pstats--estilo-metrikasa .pstats__value {
    font-size: clamp(20px, 2.4vw, 26px);
    letter-spacing: -0.01em;
    margin: 0;
    background-image: none;
    color: var(--color-text);
    -webkit-text-fill-color: currentColor;
  }
  .pstats.pstats--estilo-metrikasa .pstats__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .pstats.pstats--estilo-metrikasa .pstats__desc {
    color: var(--color-text-muted);
  }
  .pstats.pstats--estilo-metrikasa .pstats__heading {
    color: var(--color-text);
  }

  /* ============ Animacion de entrada (stagger por item) ============
     Cada item arranca hidden + trasladado. Cuando el JS agrega .is-visible
     al section, cada item anima con delay progresivo. */
  .pstats[data-pstats] .pstats__item {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--ps-item-index, 0) * 120ms);
  }
  .pstats[data-pstats].is-visible .pstats__item {
    opacity: 1;
    transform: translateY(0);
  }
  /* El valor tambien tiene un efecto sutil de count-in — escala desde 0.85 */
  .pstats[data-pstats] .pstats__value {
    display: inline-block;
    transform: scale(0.85);
    transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--ps-item-index, 0) * 120ms + 80ms);
  }
  .pstats[data-pstats].is-visible .pstats__value {
    transform: scale(1);
  }
  /* El heading tambien fade in — sin delay */
  .pstats[data-pstats] .pstats__heading {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .pstats[data-pstats].is-visible .pstats__heading {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .pstats[data-pstats] .pstats__item,
    .pstats[data-pstats] .pstats__value,
    .pstats[data-pstats] .pstats__heading {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }
/* END_SECTION:product-stats-strip */

/* START_SECTION:product-valor (INDEX:55) */
/* ===== Norwell: bloque oscuro a sangre con textura de puntos ===== */
  .pval--norwell {
    padding: calc(clamp(48px, 8vw, 96px) + var(--pdp-pt, 0px)) var(--space-md, 16px)
      calc(clamp(48px, 8vw, 96px) + var(--pdp-pb, 0px));
    background-color: var(--marca-60, var(--color-text));
    /* color-mix y no rgb(var(--marca-*-rgb) / a): pdp-brand-bg emite las -rgb
       separadas por comas, y esa sintaxis invalida la declaracion entera. */
    background-image: radial-gradient(
      color-mix(in srgb, var(--marca-fg, var(--color-bg)) 8%, transparent) 1.2px,
      transparent 1.4px
    );
    background-size: 18px 18px;
    color: var(--marca-fg, var(--color-bg));
  }
  .pval__inner {
    max-width: var(--pdp-max, 1200px);
    margin: 0 auto;
  }
  .pval__grid {
    display: grid;
    gap: clamp(36px, 6vw, 56px);
  }
  @media (min-width: 990px) {
    .pval__grid {
      grid-template-columns: 55fr 45fr;
      align-items: center;
      gap: clamp(40px, 5vw, 72px);
    }
  }

  .pval__content {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .pval__content .pdp-head {
    margin-bottom: 0;
  }
  .pval--norwell .pdp-head__title {
    color: var(--marca-fg, var(--color-bg));
  }
  .pval__desc {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.6;
    color: color-mix(in srgb, var(--marca-fg, var(--color-bg)) 72%, transparent);
  }

  .pval__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .pval__feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .pval__check {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--marca-10, var(--color-bg));
    color: var(--marca-60, var(--color-text));
  }
  .pval__feature-text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--marca-fg, var(--color-bg));
  }

  /* Tarjeta de imagen */
  .pval__media {
    /* Aire para la mitad de la pildora que sale por debajo de la tarjeta */
    padding-bottom: 22px;
  }
  .pval__card {
    position: relative;
  }
  .pval__frame {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 3px solid var(--color-text);
    border-radius: 24px;
    background: var(--color-bg);
  }
  .pval__picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .pval__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pval__tri {
    position: absolute;
    top: -11px;
    right: -7px;
    color: var(--marca-10, var(--color-bg));
  }
  .pval__pill {
    position: absolute;
    left: 18px;
    bottom: 0;
    transform: translateY(50%);
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--marca-10, var(--color-bg));
    color: var(--marca-60, var(--color-text));
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: lowercase;
    white-space: nowrap;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--marca-10, var(--color-bg)) 45%, transparent);
  }
/* END_SECTION:product-valor */

/* START_SECTION:product (INDEX:56) */
/* ============ Layout base ============ */
  .product-page {
    position: relative;
    padding: var(--space-md) 0 var(--space-2xl);
    color: var(--color-text);
    font-family: var(--font-body);
    isolation: isolate;
    background:
      linear-gradient(180deg, transparent 0%, var(--color-bg, #ffffff) 14%),
      var(--page-brand-bg, var(--pdp-bg-color, var(--color-brand-accent, #6c3fd4)));
  }

  /* Desktop: extender un poco más el degradado del acento de marca. */
  @media (min-width: 990px) {
    .product-page {
      background:
        linear-gradient(180deg, transparent 0%, var(--color-bg, #ffffff) 22%),
        var(--page-brand-bg, var(--pdp-bg-color, var(--color-brand-accent, #6c3fd4)));
    }
  }

  .product-page__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
  }

  @media (min-width: 990px) {
    .product-page__container {
      grid-template-columns: 58% 1fr;
      gap: var(--space-xl);
      padding: 0 var(--space-lg);
    }
  }

  .product-page__info-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  /* ============ Separadores selectivos entre bloques ============
     No queremos separadores en TODO. Solo en los cortes de sección
     naturales del panel info, para que la lectura tenga ritmo. */
  .pdp-block-app.pdp-block-bundle:not(:empty),
  .pdp-block-features,
  .pdp-block-description {
    position: relative;
    padding-top: var(--space-md);
    margin-top: 4px;
  }
  .pdp-block-app.pdp-block-bundle:not(:empty)::before,
  .pdp-block-features::before,
  .pdp-block-description::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border);
  }

  /* ============ Auto-hide de bloques vacios ============
     Cuando un bloque de app no renderiza contenido — porque la app no esta
     activa, no aplica al producto, o los custom elements no pueblan nada —
     su wrapper queda con altura 0 pero SIGUE recibiendo el gap del flex
     layout, dejando huecos raros.

     IMPORTANTE: los custom elements de apps (MW Bundle, IIA Inventory,
     Swym Back-in-Stock) suelen renderizar en SHADOW DOM cerrado. CSS
     `:not(:empty)` NO puede ver dentro del shadow root, por lo que si
     usaramos :has con :not(:empty), ocultariamos bloques que en realidad
     SI tienen contenido visible (renderizado en shadow).

     Solucion: solo ocultamos si el wrapper esta LITERALMENTE :empty
     (sin ningun descendiente). Si tiene custom elements o cualquier hijo,
     lo dejamos pasar — la propia app decide si renderizar o no. */
  .pdp-block-app:empty,
  [data-app-back-in-stock]:empty {
    display: none !important;
  }

  /* Wrapper .product-page__block del block sin contenido visible → sin gap.
     Con display:contents no participa en el layout, pero forzamos display:none
     para asegurar que ni siquiera aporte flex-item cuando esta vacio. */
  .product-page__block:not(:has(> *:not(:empty))),
  .product-page__block:empty {
    display: none !important;
  }

  @media (min-width: 990px) {
    .product-page__info {
      position: sticky;
      top: calc(var(--header-height, 60px) + 12px);
      align-self: start;
      z-index: 5;
    }
    /* En desktop el panel info va sobre el degradado del acento de marca.
       Le damos su propio fondo blanco + padding + radio para que el texto
       tenga contraste garantizado (WCAG AA) y no dependa del color detrás. */
    .product-page__info-inner {
      background: var(--color-bg);
      padding: 24px 22px;
      border-radius: var(--radius-md);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    }
  }

  .product-page__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
  }

  .product-page__block { display: contents; }

  /* Descripción al lado de la imagen — solo en desktop */
  .product-page__block--description-side {
    display: none;
  }
  @media (min-width: 990px) {
    .product-page__block--description-side {
      display: block;
    }
  }
  /* En mobile: mostrar el block description en su orden natural del info */
  @media (max-width: 989px) {
    .product-page__block--description { display: block; }
  }
  @media (min-width: 990px) {
    .product-page__block--description { display: none; }
  }

  /* ============ Block: promo banner ============ */
  .pdp-block-promo {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-soft);
  }
  .pdp-block-promo__img { width: 100%; height: auto; display: block; }

  /* ============ Block: breadcrumbs ============ */
  .pdp-block-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--color-text-muted);
    line-height: 1.4;
  }
  .pdp-block-breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 150ms ease;
  }
  .pdp-block-breadcrumbs a:hover {
    color: var(--color-text);
  }
  .pdp-block-breadcrumbs__current {
    color: var(--color-text);
    font-weight: var(--font-weight-strong);
  }

  /* ============ Block: sku ============ */
  .pdp-block-sku {
    margin: 0;
    font-size: 12.5px;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .pdp-block-sku__label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--font-weight-strong);
  }
  .pdp-block-sku__value {
    color: var(--color-text);
    font-family: var(--font-body);
  }

  /* ============ Block: vauli button ============ */
  .pdp-block-vauli {
    text-align: center;
    margin: 8px 0;
  }
  .pdp-block-vauli__btn {
    display: inline-block;
    width: 100%;
    max-width: 500px;
    padding: 14px 20px;
    background: #001F32;
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--font-weight-strong);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms ease;
  }
  .pdp-block-vauli__btn:hover {
    background: #AD2221;
  }
  .pdp-block-vauli__note {
    color: #666;
    margin-top: 8px;
    font-size: 13px;
  }

  /* ============ Block: title ============ */
  .pdp-block-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .pdp-block-title__vendor {
    align-self: flex-start;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: var(--font-weight-strong);
  }

  .pdp-block-title__tag {
    align-self: flex-start;
    display: inline-flex;
    padding: 3px 8px;
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .pdp-block-title__h1 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(22px, 4.5vw, 30px);
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0;
    color: var(--color-text);
  }

  /* ============ Block: rating ============ */
  .pdp-block-rating {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 0;
    font-size: 14px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
  }
  .pdp-block-rating .product-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 14px;
  }
  .pdp-block-rating .product-card__star {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .pdp-block-rating .product-card__rating-value {
    font-size: 14px;
    flex-shrink: 0;
  }
  .pdp-block-rating .product-card__rating-count {
    font-size: 12.5px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }
  .pdp-block-rating .alireviews-review-star-rating {
    font-size: 14px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .pdp-block-rating .alireviews-review-star-rating * {
    white-space: nowrap;
  }

  /* ============ Block: price ============ */
  .pdp-block-price {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
  }

  .pdp-block-price__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }

  .pdp-block-price__compare {
    font-size: 16px;
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-weight: var(--font-weight-normal);
  }

  .pdp-block-price__final {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(26px, 5.5vw, 34px);
    color: var(--color-text);
    line-height: 1;
  }

  /* Cuando hay descuento activo — precio en rojo, compare tachado más visible */
  .pdp-block-price--on-sale .pdp-block-price__final {
    color: var(--color-brand-danger, #c33a3a);
  }

  .pdp-block-price--on-sale .pdp-block-price__compare {
    color: var(--color-text-muted);
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-brand-danger);
  }

  /* Pastilla del descuento con el sello 3D (mismo estilo que en las tarjetas) */
  .pdp-block-price__pct {
    --pct-borde: color-mix(in srgb, var(--color-descuento) 58%, var(--color-text));
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 3px;
    height: 28px;
    padding: 0 12px 0 2px;
    border: 1.5px solid var(--color-bg);
    border-radius: var(--radius-full, 999px);
    background: var(--color-descuento);
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 1px 0 var(--pct-borde), -1px 0 var(--pct-borde), 0 1px var(--pct-borde), 0 -1px var(--pct-borde);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--color-text) 25%, transparent);
  }
  .pdp-block-price__pct img { width: 26px; height: 26px; display: block; }

  .pdp-block-price__savings {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 5px 10px;
    background: color-mix(in srgb, var(--color-brand-danger) 12%, transparent);
    color: var(--color-brand-danger);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: var(--font-weight-strong);
  }

  .pdp-block-price__countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--color-brand-danger) 10%, transparent);
    border-radius: var(--radius-sm);
    color: var(--color-brand-danger);
    font-size: 12.5px;
  }
  .pdp-block-price__countdown[data-active] { display: inline-flex; }
  .pdp-block-price__countdown strong {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.02em;
  }

  /* ============ Block: variants ============ */
  .pdp-block-variants {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .pdp-block-variants__group { border: 0; padding: 0; margin: 0; }

  .pdp-block-variants__legend {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 13px;
  }

  .pdp-block-variants__name {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-strong);
    font-size: 11.5px;
  }

  .pdp-block-variants__value { font-weight: var(--font-weight-strong); color: var(--color-text); }

  .pdp-block-variants__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pdp-block-variants__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* Pill (default para talla, etc.) */
  .pdp-block-variants__swatches--pill .pdp-block-variants__swatch {
    cursor: pointer;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    transition: border-color 150ms ease, background-color 150ms ease;
  }
  .pdp-block-variants__swatches--pill .pdp-block-variants__swatch:hover { border-color: var(--color-brand-secondary, #20b19e); }
  .pdp-block-variants__swatches--pill .pdp-block-variants__input:checked + .pdp-block-variants__swatch {
    background: var(--color-brand-secondary, #20b19e);
    color: var(--color-bg);
    border-color: var(--color-brand-secondary, #20b19e);
  }

  /* Color circle */
  .pdp-block-variants__swatches--color .pdp-block-variants__swatch {
    padding: 4px;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
  }
  .pdp-block-variants__swatches--color .pdp-block-variants__swatch-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .pdp-block-variants__swatch-color {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--swatch-color, var(--color-bg-soft));
    border: 1px solid rgba(0,0,0,0.08);
    display: block;
  }
  .pdp-block-variants__swatches--color .pdp-block-variants__input:checked + .pdp-block-variants__swatch {
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand-secondary, #20b19e);
  }

  /* Image swatch (cuadrados con imagen de variante) */
  .pdp-block-variants__swatches--image .pdp-block-variants__swatch {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-soft);
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    display: block;
    transition: border-color 150ms ease, transform 150ms ease;
  }
  .pdp-block-variants__swatches--image .pdp-block-variants__swatch:hover {
    border-color: color-mix(in srgb, var(--color-brand-secondary, #20b19e) 60%, transparent);
    transform: translateY(-1px);
  }
  .pdp-block-variants__swatch-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pdp-block-variants__swatches--image .pdp-block-variants__swatch-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .pdp-block-variants__swatches--image .pdp-block-variants__input:checked + .pdp-block-variants__swatch {
    border-color: var(--color-brand-secondary, #20b19e);
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand-secondary, #20b19e);
  }

  /* ============ Block: buy button ============
     ATC pill grande (fondo color de acento de la marca)
     + qty circular a la derecha */
  .pdp-block-buy {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    isolation: isolate;
  }

  /* Cualquier botón que las apps de back-in-stock inyecten dentro del
     .pdp-block-buy (Swym, otras) se manda a fila propia full-width. */
  .pdp-block-buy > *:not(.pdp-block-buy__atc):not(.pdp-block-buy__qty),
  .pdp-block-buy [class*="swym"],
  .pdp-block-buy [class*="back-in-stock"],
  .pdp-block-buy [class*="notify"],
  .pdp-block-buy [data-swym-back-in-stock],
  .pdp-block-buy [id*="swym"] {
    flex-basis: 100%;
    order: 100;
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
  }

  .pdp-block-buy__atc {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 28px;
    flex: 1 1 220px;
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--color-bg);
    border: 0;
    border-radius: var(--radius-full, 999px);
    font-family: var(--font-body);
    font-weight: var(--font-weight-strong);
    font-size: 14.5px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: filter 150ms ease, transform 150ms ease;
  }
  .pdp-block-buy__atc:hover:not(:disabled) {
    filter: brightness(0.92);
    transform: translateY(-1px);
  }
  .pdp-block-buy__atc:disabled {
    background: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.65;
  }
  .pdp-block-buy__atc.is-loading .pdp-block-buy__atc-label { visibility: hidden; }
  .pdp-block-buy__atc.is-loading .pdp-block-buy__atc-loading { display: inline-flex; }
  .pdp-block-buy__atc-loading {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
  }
  .pdp-block-buy__atc-loading svg { animation: pp-spin 800ms linear infinite; }
  @keyframes pp-spin { to { transform: rotate(360deg); } }
  .pdp-block-buy__atc.is-added {
    background: var(--color-brand-secondary, var(--color-text));
    filter: none;
  }

  /* Qty circular */
  .pdp-block-buy__qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .pdp-block-buy__qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
  }
  .pdp-block-buy__qty-btn:hover {
    border-color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
  }
  .pdp-block-buy__qty-btn svg { display: block; }

  .pdp-block-buy__qty-input {
    width: 28px;
    height: 34px;
    border: 0;
    text-align: center;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-weight: var(--font-weight-strong);
    font-size: 15px;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .pdp-block-buy__qty-input::-webkit-inner-spin-button,
  .pdp-block-buy__qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

  /* ============ Block: dynamic checkout ============ */
  .pdp-block-dynamic > * { width: 100%; min-height: 44px; }

  /* ============ Block: actions (wish + share) ============ */
  .pdp-block-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
  }

  .pdp-block-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
    transition: border-color 150ms ease, color 150ms ease, transform 150ms ease, background-color 150ms ease;
  }

  .pdp-block-actions__btn:hover {
    border-color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    transform: translateY(-1px);
  }

  .pdp-block-actions__btn.is-active {
    background: var(--color-brand-danger);
    border-color: var(--color-brand-danger);
    color: var(--color-bg);
  }
  .pdp-block-actions__btn.is-active svg { fill: currentColor; stroke: currentColor; }

  .pdp-block-actions__btn.is-copied {
    background: var(--color-brand-secondary, var(--color-text));
    border-color: var(--color-brand-secondary, var(--color-text));
    color: var(--color-bg);
  }

  /* ============ Block: app anchors ============ */
  .pdp-block-app:not(:empty) {
    padding: 8px 0;
  }

  /* Multi-Location Inventory — sin recuadro exterior. */
  .iia-container {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .iia-container .iia-header-container {
    padding: 12px 0 !important;
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent) !important;
  }
  .iia-container .iia-list-item {
    padding: 10px 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }
  .iia-container .iia-details-container {
    padding: 6px 0 !important;
  }
  /* Cantidad de disponibles resaltada */
  .iia-container .iia-qty {
    display: inline-block !important;
    padding: 2px 8px !important;
    margin: 0 2px !important;
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) !important;
    color: var(--color-bg) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: var(--font-weight-strong) !important;
    font-size: 13px !important;
  }

  .pdp-block-bundle__hint {
    background: color-mix(in srgb, var(--color-brand-danger) 8%, transparent);
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    margin: 8px 0 0;
    line-height: 1.4;
  }
  .pdp-block-bundle__hint em { font-style: italic; }

  /* Back in Stock — el anchor va SIEMPRE en su propia fila, full width */
  .product-page__block--back_in_stock {
    display: block;
    width: 100%;
    clear: both;
    order: 100;
  }

  [data-app-back-in-stock] {
    display: block;
    width: 100%;
    margin-top: 4px;
  }

  /* Si la app inyecta huerfanamente en el form (fuera del anchor)
     defensivo: cualquier widget de back-in-stock cae en su fila propia */
  .product-page__form > [class*="swym"],
  .product-page__form > [class*="back-in-stock"],
  .product-page__form > [class*="notify-me"],
  .product-page__form > .swym-widget-container {
    width: 100%;
    display: block;
    order: 99;
    margin-top: 10px;
  }

  /* Estiliza el botón que la app inyecta dentro del anchor para que
     se vea como parte del theme (outline + ancho completo). */
  [data-app-back-in-stock] > button,
  [data-app-back-in-stock] > a,
  [data-app-back-in-stock] .swym-btn,
  [data-app-back-in-stock] .bis-btn,
  [data-app-back-in-stock] input[type="submit"],
  [data-app-back-in-stock] input[type="button"] {
    display: flex !important;
    width: 100% !important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 20px !important;
    background: transparent !important;
    color: var(--color-text) !important;
    border: 1.5px solid var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) !important;
    border-radius: var(--radius-full, 999px) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--font-weight-strong) !important;
    font-size: 13.5px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
  }

  [data-app-back-in-stock] > button:hover,
  [data-app-back-in-stock] > a:hover,
  [data-app-back-in-stock] .swym-btn:hover,
  [data-app-back-in-stock] .bis-btn:hover {
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) !important;
    color: var(--color-bg) !important;
  }

  /* ============ Block: features (3 columnas siempre) ============ */
  .pdp-block-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 0;
  }

  .pdp-block-features__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 4px;
  }

  .pdp-block-features__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--color-bg);
    border-radius: 50%;
  }

  .pdp-block-features__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-strong);
    font-size: 12.5px;
    line-height: 1.25;
    margin: 0;
    color: var(--color-text);
  }

  .pdp-block-features__more {
    background: transparent;
    border: 0;
    color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    font-size: 11.5px;
    font-weight: var(--font-weight-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
  }

  /* Modal */
  .pdp-modal {
    max-width: min(520px, 92vw);
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  }
  .pdp-modal::backdrop { background: rgba(0,0,0,0.55); }

  .pdp-modal__inner {
    position: relative;
    padding: 24px;
  }

  .pdp-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pdp-modal__close:hover { background: var(--color-bg-soft); }

  .pdp-modal__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 18px;
    margin: 0 40px 12px 0;
    color: var(--color-text);
  }

  .pdp-modal__body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
  }
  .pdp-modal__body > *:first-child { margin-top: 0; }
  .pdp-modal__body > *:last-child { margin-bottom: 0; }

  /* ============ Share modal (estilo legacy Halo — grid 5 cols + circulos coloridos) ============ */
  .pdp-share-modal {
    width: min(94vw, 480px);
    max-width: 480px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  .pdp-share-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .pdp-share-modal__inner {
    padding: 26px 24px 24px;
  }

  .pdp-share-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 18px;
  }
  .pdp-share-modal__title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #1a1a1a;
  }
  .pdp-share-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border: 0;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
  }
  .pdp-share-modal__close:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.05);
  }

  .pdp-share-modal__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }

  .pdp-share-modal__app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 4px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
    transition: background-color 0.15s ease, transform 0.15s ease;
  }
  .pdp-share-modal__app:hover {
    background: rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
    text-decoration: none;
  }

  .pdp-share-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    color: #ffffff;
  }
  .pdp-share-modal__icon > svg {
    width: 30px !important;
    height: 30px !important;
    display: block;
  }
  .pdp-share-modal__app--wa .pdp-share-modal__icon { background: #25D366; }
  .pdp-share-modal__app--fb .pdp-share-modal__icon { background: #1877F2; }
  .pdp-share-modal__app--x  .pdp-share-modal__icon { background: #000000; }
  .pdp-share-modal__app--tg .pdp-share-modal__icon { background: #0088CC; }
  .pdp-share-modal__app--copy .pdp-share-modal__icon { background: #666666; }

  .pdp-share-modal__label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
    text-align: center;
  }

  .pdp-share-modal__app.is-copied .pdp-share-modal__icon {
    background: var(--color-brand-secondary, #20b19e);
  }

  /* Mobile: iconos un pelin mas chicos y padding tactil */
  @media (max-width: 749px) {
    .pdp-share-modal { width: min(94vw, 420px); }
    .pdp-share-modal__inner { padding: 22px 18px 20px; }
    .pdp-share-modal__title { font-size: 14px; }
    .pdp-share-modal__grid { gap: 8px; }
    .pdp-share-modal__icon { width: 52px; height: 52px; }
    .pdp-share-modal__icon > svg { width: 26px !important; height: 26px !important; }
    .pdp-share-modal__label { font-size: 11px; }
  }
  @media (max-width: 380px) {
    .pdp-share-modal__grid { gap: 6px; }
    .pdp-share-modal__icon { width: 46px; height: 46px; }
    .pdp-share-modal__icon > svg { width: 22px !important; height: 22px !important; }
  }

  /* ============ Block: physical stores ============ */
  .pdp-block-stores {
    padding: 8px 0;
  }

  .pdp-block-stores__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: var(--font-weight-strong);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
  }

  .pdp-block-stores__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .pdp-block-stores__chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    font-size: 11.5px;
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .pdp-block-stores__chip:hover {
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--color-bg);
    border-color: transparent;
  }

  /* ============ Block: description (colapsable) ============ */
  .pdp-block-description {
    position: relative;
    padding: var(--space-md) 0 12px;
  }
  .pdp-block-description__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
  }
  .pdp-block-description__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--page-brand-bg, var(--color-brand-accent, var(--color-text))) 12%, transparent);
    color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    flex-shrink: 0;
  }
  .pdp-block-description__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 20px;
    line-height: 1.2;
    text-align: left;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--color-text);
  }
  .pdp-block-description__body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
    max-height: 140px;
    overflow: hidden;
    transition: max-height 320ms ease;
  }
  .pdp-block-description__body > *:first-child { margin-top: 0; }
  .pdp-block-description__body > *:last-child { margin-bottom: 0; }

  .pdp-block-description[data-expanded] .pdp-block-description__body {
    max-height: 3000px;
  }

  .pdp-block-description__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 44px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--color-bg));
    pointer-events: none;
    transition: opacity 220ms ease;
  }
  .pdp-block-description[data-expanded] .pdp-block-description__fade { opacity: 0; }

  .pdp-block-description__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
    z-index: 1;
    transition: border-color 150ms ease, color 150ms ease;
  }
  .pdp-block-description__toggle:hover {
    border-color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
  }
  .pdp-block-description__toggle svg {
    transition: transform 220ms ease;
  }
  .pdp-block-description[data-expanded] .pdp-block-description__toggle svg {
    transform: rotate(180deg);
  }

  /* ============ Block: custom html / spacer ============ */
  .pdp-block-custom {
    font-size: 14px;
    line-height: 1.6;
  }
  .pdp-block-spacer {
    height: var(--sp-height, 16px);
  }

  /* ============ Sticky ATC — card blanca compacta ============ */
  .pdp-sticky {
    position: fixed;
    left: 8px;
    right: 8px;
    /* Mobile: encima del mobile-bottom-bar */
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 1000;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 6px 6px 6px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    transform: translateY(calc(100% + 80px));
    opacity: 0;
    transition:
      transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 200ms ease;
  }

  .pdp-sticky[data-visible] {
    transform: translateY(0);
    opacity: 1;
  }

  /* Cuando el cart drawer del theme esta abierto, ocultamos el sticky ATC
     — sino queda flotando encima del drawer y compite visualmente por
     el mismo espacio (fondo de la pantalla en mobile). El cart-drawer.js
     agrega .cart-drawer-open al <body> y al <html>. */
  body.cart-drawer-open .pdp-sticky,
  html.cart-drawer-open .pdp-sticky {
    transform: translateY(calc(100% + 80px)) !important;
    opacity: 0 !important;
    pointer-events: none;
  }

  /* Desktop: pegado al inferior con más ancho */
  @media (min-width: 990px) {
    .pdp-sticky {
      left: 50%;
      right: auto;
      transform: translate(-50%, calc(100% + 80px));
      bottom: 16px;
      width: min(560px, calc(100vw - 32px));
    }
    .pdp-sticky[data-visible] {
      transform: translate(-50%, 0);
    }
    /* Desktop: mismo override cuando el drawer esta abierto */
    body.cart-drawer-open .pdp-sticky,
    html.cart-drawer-open .pdp-sticky {
      transform: translate(-50%, calc(100% + 80px)) !important;
    }
  }

  .pdp-sticky__media {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-soft);
    flex-shrink: 0;
    text-decoration: none;
  }

  .pdp-sticky__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pdp-sticky__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }

  .pdp-sticky__title {
    font-size: 12.5px;
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pdp-sticky__price {
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }

  .pdp-sticky__price-compare {
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-size: 11px;
  }

  .pdp-sticky__price-final {
    color: var(--color-text);
    font-weight: var(--font-weight-strong);
    font-size: 13px;
  }

  .pdp-sticky__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .pdp-sticky__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    border: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
    flex-shrink: 0;
  }

  .pdp-sticky__icon-btn:hover,
  .pdp-sticky__icon-btn:focus-visible {
    border-color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    outline: none;
  }

  .pdp-sticky__icon-btn:active {
    transform: scale(0.94);
  }

  .pdp-sticky__icon-btn.is-active {
    background: var(--color-brand-danger, #c33a3a);
    border-color: var(--color-brand-danger, #c33a3a);
    color: var(--color-bg);
  }
  .pdp-sticky__icon-btn.is-active svg { fill: currentColor; }

  .pdp-sticky__icon-btn.is-copied {
    background: var(--color-brand-secondary, #20b19e);
    border-color: var(--color-brand-secondary, #20b19e);
    color: var(--color-bg);
  }

  .pdp-sticky__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    background: var(--page-brand-bg, var(--color-brand-accent, var(--color-text)));
    color: var(--color-bg);
    border: 0;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: var(--font-weight-strong);
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter 150ms ease, transform 150ms ease;
    flex-shrink: 0;
  }

  .pdp-sticky__btn:hover,
  .pdp-sticky__btn:focus-visible {
    filter: brightness(0.92);
    outline: none;
  }

  .pdp-sticky__btn:active {
    transform: scale(0.97);
  }

  .pdp-sticky__btn.is-loading {
    opacity: 0.7;
    pointer-events: none;
  }

  .pdp-sticky__btn.is-added {
    background: var(--color-brand-secondary, #20b19e) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-block-buy__atc,
    .pdp-sticky,
    .pdp-sticky__btn,
    .pdp-block-variants__swatch,
    .pdp-block-buy__atc-loading svg { transition: none; animation: none; }
  }
/* END_SECTION:product */

/* START_SECTION:productos-recomendados (INDEX:57) */
.prod-recom {
    padding: var(--space-lg) 0;
    background: var(--color-bg, #ffffff);
  }

  .prod-recom--placeholder {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    text-align: center;
    font-style: italic;
    padding: var(--space-xl) 0;
  }

  .prod-recom__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
  }

  .prod-recom__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(20px, 2.2vw, 28px);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-text);
  }

  .prod-recom__subheading {
    font-size: 13px;
    margin: 4px 0 0;
    color: var(--color-text-muted);
  }

  .prod-recom__viewall {
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 7px 14px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-full);
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    flex: 0 0 auto;
  }

  .prod-recom__viewall:hover,
  .prod-recom__viewall:focus-visible {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
    outline: none;
  }

  .prod-recom__viewport {
    position: relative;
  }

  .prod-recom__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: var(--space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 16px 4px;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  .prod-recom__track::-webkit-scrollbar { display: none; }

  .prod-recom__slot { scroll-snap-align: start; }

  @media (min-width: 550px) {
    .prod-recom__track { grid-auto-columns: 38%; }
  }

  @media (min-width: 750px) {
    .prod-recom__track {
      grid-auto-columns: calc((100% - (var(--space-sm) * 3)) / 4);
      gap: var(--space-md);
    }
  }

  @media (min-width: 1200px) {
    .prod-recom__track {
      grid-auto-columns: calc((100% - (var(--space-sm) * 4)) / 5);
    }
  }
  /* Flechas prev/next: snippets/carousel-nav.liquid */
/* END_SECTION:productos-recomendados */

/* START_SECTION:promo-banners (INDEX:58) */
.promo-banners {
    padding: var(--space-md) 0;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .promo-banners__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(18px, 2vw, 24px);
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
    line-height: 1.2;
  }

  .promo-banners__wrap {
    position: relative;
  }

  .promo-banners__viewport {
    position: relative;
  }

  /* Flechas prev/next — solo desktop */
  .promo-banners__nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    border-radius: 50%;
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    z-index: 5;
    align-items: center;
    justify-content: center;
    transition: box-shadow 150ms ease;
  }

  .promo-banners__nav:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  }

  .promo-banners__nav--prev { left: -18px; }
  .promo-banners__nav--next { right: -18px; }

  .promo-banners__nav[hidden] { display: none; }

  @media (min-width: 750px) {
    .promo-banners__nav:not([hidden]) { display: inline-flex; }
  }

  .promo-banners__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--space-sm) * (var(--pb-visible) - 1))) / var(--pb-visible));
    gap: var(--space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    padding: 4px 0;
  }

  /* Wrap por default: page-width equivalente en desktop */
  .promo-banners__wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-md);
  }

  /* Mobile: quitar el max-width del wrap; el heading conserva padding
     lateral pero el track se pega al borde. */
  @media (max-width: 749px) {
    .promo-banners__wrap {
      max-width: none;
      padding-inline: 0;
    }
    .promo-banners__heading {
      padding-inline: var(--space-md);
    }
    .promo-banners__track {
      padding-inline: 0;
      gap: 6px;
    }
  }

  .promo-banners__track::-webkit-scrollbar { display: none; }

  .promo-banner {
    position: relative;
    display: block;
    scroll-snap-align: start;
    aspect-ratio: var(--pb-ratio, 3 / 2);
    background: var(--color-bg-soft, #f4f4f6);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 200ms ease;
  }

  .promo-banner:hover,
  .promo-banner:focus-visible {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    outline: none;
  }

  .promo-banner__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .promo-banner__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: var(--color-bg-soft, #f4f4f6);
    color: var(--color-text-muted, #6b6b74);
    font-size: 13px;
    font-style: italic;
    text-align: center;
  }

  @media (min-width: 750px) {
    .promo-banners__track {
      grid-auto-columns: calc((100% - (var(--space-md) * (var(--pb-visible-desktop, 3) - 1))) / var(--pb-visible-desktop, 3));
      gap: var(--space-md);
    }
  }
/* END_SECTION:promo-banners */

/* START_SECTION:recomendaciones-carrito (INDEX:59) */
.recom-cart {
    padding: var(--space-lg) 0;
    background: var(--color-bg, #ffffff);
  }

  [data-recom-cart][hidden] { display: none; }

  .recom-cart__header {
    margin-bottom: var(--space-md);
  }

  .recom-cart__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(20px, 2.2vw, 28px);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-text);
  }

  .recom-cart__subheading {
    font-size: 13px;
    margin: 4px 0 0;
    color: var(--color-text-muted);
  }

  .recom-cart__viewport {
    position: relative;
  }

  .recom-cart__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 24px 8px;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  .recom-cart__track::-webkit-scrollbar { display: none; }

  .recom-cart__slot { scroll-snap-align: start; }

  @media (min-width: 550px) {
    .recom-cart__track { grid-auto-columns: 38%; }
  }

  @media (min-width: 750px) {
    .recom-cart__track {
      grid-auto-columns: calc((100% - (var(--space-md) * 3)) / 4);
      gap: var(--space-md);
    }
  }

  @media (min-width: 1200px) {
    .recom-cart__track {
      grid-auto-columns: calc((100% - (var(--space-md) * 5)) / 6);
    }
  }

  /* Skeleton shimmer — usa las mismas keyframes que recomendaciones-wishlist
     si esa seccion tambien esta cargada. Definimos las clases de nuevo para
     que la seccion funcione standalone. */
  .recom-cart .skeleton-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: var(--pc-radius, 6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    min-height: 320px;
  }

  .recom-cart .skeleton-card__media {
    aspect-ratio: 1 / 1;
    background: linear-gradient(
      90deg,
      #f0f0f2 0%,
      #e4e4e8 50%,
      #f0f0f2 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1400ms ease-in-out infinite;
  }

  .recom-cart .skeleton-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .recom-cart .skeleton-card__line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(
      90deg,
      #f0f0f2 0%,
      #e4e4e8 50%,
      #f0f0f2 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1400ms ease-in-out infinite;
  }

  .recom-cart .skeleton-card__line--title { width: 85%; }
  .recom-cart .skeleton-card__line--short { width: 55%; }

  @keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .recom-cart .skeleton-card__media,
    .recom-cart .skeleton-card__line { animation: none; }
  }
/* END_SECTION:recomendaciones-carrito */

/* START_SECTION:recomendaciones-wishlist (INDEX:60) */
.recom-wl {
    padding: var(--space-lg) 0;
    background: var(--color-bg, #ffffff);
  }

  /* Respetar el atributo HTML `hidden` (JS lo alterna). */
  [data-recom-wishlist][hidden] { display: none; }

  .recom-wl__header {
    margin-bottom: var(--space-md);
  }

  .recom-wl__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(20px, 2.2vw, 28px);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-text);
  }

  .recom-wl__subheading {
    font-size: 13px;
    margin: 4px 0 0;
    color: var(--color-text-muted);
  }

  .recom-wl__viewport {
    position: relative;
  }

  .recom-wl__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 24px 8px;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  .recom-wl__track::-webkit-scrollbar { display: none; }

  .recom-wl__slot { scroll-snap-align: start; }

  @media (min-width: 550px) {
    .recom-wl__track { grid-auto-columns: 38%; }
  }

  @media (min-width: 750px) {
    .recom-wl__track {
      grid-auto-columns: calc((100% - (var(--space-md) * 3)) / 4);
      gap: var(--space-md);
    }
  }

  @media (min-width: 1200px) {
    .recom-wl__track {
      grid-auto-columns: calc((100% - (var(--space-md) * 5)) / 6);
    }
  }

  /* Skeleton loader shimmer.
     Fondo gris con gradient animado moviendose horizontalmente. */
  .skeleton-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: var(--pc-radius, 6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    min-height: 320px;
  }

  .skeleton-card__media {
    aspect-ratio: 1 / 1;
    background: linear-gradient(
      90deg,
      #f0f0f2 0%,
      #e4e4e8 50%,
      #f0f0f2 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1400ms ease-in-out infinite;
  }

  .skeleton-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .skeleton-card__line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(
      90deg,
      #f0f0f2 0%,
      #e4e4e8 50%,
      #f0f0f2 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1400ms ease-in-out infinite;
  }

  .skeleton-card__line--title { width: 85%; }
  .skeleton-card__line--short { width: 55%; }

  @keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .skeleton-card__media,
    .skeleton-card__line { animation: none; }
  }
/* END_SECTION:recomendaciones-wishlist */

/* START_SECTION:search (INDEX:61) */
.search-page {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    padding-bottom: var(--space-2xl);
  }

  /* ---------- Hero ---------- */
  .search-page__hero {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 10vw, 96px) 0 clamp(56px, 10vw, 88px);
    isolation: isolate;
  }

  .search-page__hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, transparent 0%, var(--color-bg, #ffffff) 90%),
      var(--search-bg-color, #20b19e);
  }

  .search-page__hero-inner {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* Estilo NQ (.nq-kicker en snippets/nq-estilo) */
  .search-page__eyebrow { margin: 0; }

  .search-page__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(30px, 6.5vw, 52px);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0;
    color: var(--color-text);
  }

  .search-page__form {
    width: 100%;
    max-width: 640px;
    margin-top: 6px;
  }

  .search-page__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    padding: 6px 6px 6px 46px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    transition: box-shadow 180ms ease, border-color 180ms ease;
  }

  .search-page__input-wrap:focus-within {
    border-color: var(--color-brand-accent, var(--color-text));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand-accent, var(--color-text)) 18%, transparent), 0 12px 32px rgba(0, 0, 0, 0.08);
  }

  .search-page__input-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
  }

  .search-page__input {
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 15px;
  }

  .search-page__input:focus { outline: none; }

  .search-page__input::-webkit-search-cancel-button,
  .search-page__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

  .search-page__submit {
    padding: 12px 22px;
    background: var(--color-text);
    color: var(--color-bg);
    border: 0;
    border-radius: var(--radius-full, 999px);
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color 150ms ease;
  }

  .search-page__submit:hover {
    background: var(--color-brand-accent, var(--color-text));
  }

  .search-page__meta {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 4px 0 0;
  }

  .search-page__meta strong { color: var(--color-text); }

  .search-page__term {
    display: inline-block;
    color: var(--color-text);
    font-weight: var(--font-weight-strong);
    margin-left: 4px;
  }

  /* ---------- Body ---------- */
  .search-page__body {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    margin-top: var(--space-xl);
  }

  .search-page__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  @media (min-width: 550px) {
    .search-page__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  }

  @media (min-width: 990px) {
    .search-page__grid { grid-template-columns: repeat(4, 1fr); }
  }

  @media (min-width: 1300px) {
    .search-page__grid { grid-template-columns: repeat(5, 1fr); }
  }

  .search-page__grid-item { display: contents; }

  /* ---------- Otros resultados (artículos, páginas) ---------- */
  .search-page__secondary {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
  }

  .search-page__secondary-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 18px;
    margin: 0 0 var(--space-md);
  }

  .search-page__secondary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  @media (min-width: 750px) {
    .search-page__secondary-list { grid-template-columns: repeat(2, 1fr); }
  }

  .search-page__secondary-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: transform 150ms ease, border-color 150ms ease;
  }

  .search-page__secondary-link:hover {
    transform: translateY(-2px);
    border-color: var(--color-brand-accent, var(--color-text));
  }

  .search-page__secondary-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 8px;
    background: color-mix(in srgb, var(--color-brand-accent, var(--color-text)) 14%, transparent);
    color: var(--color-brand-accent, var(--color-text));
    border-radius: var(--radius-sm);
    font-size: 10.5px;
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .search-page__secondary-name {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 15px;
    line-height: 1.3;
  }

  .search-page__secondary-excerpt {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---------- Empty state ---------- */
  .search-page__empty {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: var(--space-2xl) var(--space-md);
    max-width: 520px;
    margin: 0 auto;
  }

  .search-page__empty-icon {
    color: var(--color-text-muted);
    opacity: 0.5;
    margin-bottom: 4px;
  }

  .search-page__empty-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 22px;
    margin: 0;
  }

  .search-page__empty-text {
    color: var(--color-text-muted);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
  }

  .search-page__empty-text strong { color: var(--color-text); }

  .search-page__empty-subtitle {
    margin: 14px 0 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-strong);
  }

  .search-page__empty-tags,
  .search-page__idle-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .search-page__empty-tag,
  .search-page__idle-tag {
    display: inline-block;
    padding: 8px 14px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    color: var(--color-text);
    font-size: 12.5px;
    font-weight: var(--font-weight-strong);
    text-decoration: none;
    transition: transform 150ms ease, background-color 150ms ease, color 150ms ease;
  }

  .search-page__empty-tag:hover,
  .search-page__idle-tag:hover {
    background: var(--color-text);
    color: var(--color-bg);
    transform: translateY(-1px);
  }

  /* ---------- Idle (sin búsqueda todavía) ---------- */
  .search-page__idle {
    text-align: center;
    padding: var(--space-lg) 0;
  }

  .search-page__idle-title {
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-strong);
    margin: 0 0 12px;
  }

  /* ---------- Infinite scroll ---------- */
  .search-page__infinite {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    text-align: center;
    min-height: 60px;
    position: relative;
  }

  .search-page__load-bar {
    height: 3px;
    width: 100%;
    max-width: 240px;
    margin: 0 auto 10px;
    background: color-mix(in srgb, var(--color-brand-secondary, #20b19e) 15%, transparent);
    border-radius: 999px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .search-page__infinite[data-loading="1"] .search-page__load-bar { opacity: 1; }

  .search-page__load-bar-fill {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--color-brand-secondary, #20b19e), transparent);
    animation: search-load-slide 1.2s ease-in-out infinite;
  }

  @keyframes search-load-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
  }

  .search-page__load-status {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .search-page__infinite[data-loading="1"] .search-page__load-status,
  .search-page__infinite[data-done="1"] .search-page__load-status { opacity: 1; }

  .search-page__load-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 10px 22px;
    background: var(--color-text);
    color: var(--color-bg);
    border: 0;
    border-radius: var(--radius-full, 999px);
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color 150ms ease;
  }

  .search-page__load-btn:hover {
    background: var(--color-brand-accent, var(--color-text));
  }

  @media (prefers-reduced-motion: reduce) {
    .search-page__load-bar-fill { animation: none; }
  }
/* END_SECTION:search */

/* START_SECTION:tiendas-carousel (INDEX:63) */
/* Fondo: el mismo degradado verde/morado de la pagina de ubicacion */
  .tcar {
    display: block;
    padding: var(--space-xl) 0;
    background:
      radial-gradient(50% 70% at 0% 0%, color-mix(in srgb, var(--color-brand-secondary) 16%, transparent), transparent 70%),
      radial-gradient(50% 70% at 100% 100%, color-mix(in srgb, var(--color-brand-accent) 14%, transparent), transparent 70%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--color-brand-secondary) 6%, var(--color-bg)) 0%,
        var(--color-bg) 50%,
        color-mix(in srgb, var(--color-brand-accent) 6%, var(--color-bg)) 100%);
    color: var(--color-text);
    overflow: hidden;
  }

  .tcar__head {
    text-align: center;
    margin-bottom: var(--space-md);
  }
  /* El kicker usa el estilo NQ (.nq-kicker en snippets/nq-estilo) */
  .tcar__kicker { margin: 0 0 var(--space-sm); }
  .tcar__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading, 900);
    font-size: clamp(22px, 2.6vw, 34px);
    letter-spacing: -0.01em;
  }
  .tcar__sub {
    margin: var(--space-xs) auto 0;
    max-width: 52ch;
    color: var(--color-text-muted);
    font-size: 14px;
  }

  .tcar__viewport { position: relative; }

  .tcar__track {
    --tcar-gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: var(--space-sm) 0 var(--space-md);
    display: grid;
    grid-auto-flow: column;
    /* Mobile: ~1,6 tarjetas para que se asome la siguiente */
    grid-auto-columns: 62%;
    gap: var(--tcar-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-md);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tcar__track::-webkit-scrollbar { display: none; }
  @media (min-width: 550px) {
    .tcar__track { grid-auto-columns: 38%; }
  }
  @media (min-width: 990px) {
    .tcar__track {
      --tcar-gap: var(--space-lg);
      grid-auto-columns: calc((100% - 4 * var(--tcar-gap)) / 5);
    }
  }

  .tcar__item { scroll-snap-align: start; }

  .tcar__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-xs) var(--space-md);
    border-radius: var(--radius-md, 16px);
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.25s ease;
  }
  .tcar__card:hover {
    background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  }
  .tcar__card:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: 2px;
  }

  /* Los PNG traen margen transparente: el margen negativo lo recorta */
  .tcar__sticker {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin: -10% 0 -12%;
  }
  .tcar__placeholder {
    width: 100%;
    height: 100%;
    fill: var(--color-border);
  }

  .tcar__name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .tcar__zona {
    color: var(--color-text-muted);
    font-size: 13px;
  }

  /* Flechas: solo desktop */
  .tcar__arrow {
    display: none;
  }
  @media (min-width: 990px) {
    .tcar__arrow {
      position: absolute;
      top: 40%;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 1px solid var(--color-border);
      border-radius: 50%;
      background: var(--color-bg);
      color: var(--color-text);
      box-shadow: 0 6px 16px color-mix(in srgb, var(--color-text) 14%, transparent);
      cursor: pointer;
      transform: translateY(-50%);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .tcar__arrow--prev { left: calc(-1 * var(--space-md)); }
    .tcar__arrow--next { right: calc(-1 * var(--space-md)); }
    .tcar__arrow:hover { transform: translateY(-50%) scale(1.06); }
    .tcar__arrow:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; }
    .tcar__arrow[disabled] { opacity: 0; pointer-events: none; }
  }

  .tcar__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--space-sm);
  }
  .tcar__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: 0 var(--space-lg);
    border-radius: var(--radius-full, 999px);
    background: var(--color-text);
    color: var(--color-bg);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.2s ease;
  }
  .tcar__cta:hover { transform: translateY(-1px); }
  .tcar__cta:focus-visible { outline: 3px solid var(--color-brand-accent); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    .tcar__track { scroll-behavior: auto; }
    .tcar__card, .tcar__arrow, .tcar__cta { transition: none; }
  }

  .tcar-empty {
    margin: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    color: var(--color-text-muted);
    font-size: 14px;
  }
/* END_SECTION:tiendas-carousel */

/* START_SECTION:whatsapp-flotante (INDEX:64) */
.wa-float {
    position: fixed;
    z-index: 800;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    right: 24px;
  }
  .wa-float--izquierda {
    right: auto;
    left: 24px;
  }
  /* En mobile va por encima de la barra inferior (si se muestra) */
  @media (max-width: 749px) {
    .wa-float { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 16px; }
    .wa-float--izquierda { left: 16px; }
    .wa-float--solo-desktop { display: none; }
  }

  .wa-float__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }
  .wa-float--izquierda .wa-float__btn { flex-direction: row-reverse; }

  .wa-float__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--wa-color);
    color: var(--color-bg);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--wa-color) 45%, transparent),
      0 2px 6px color-mix(in srgb, var(--color-text) 25%, transparent);
    transition: transform 0.2s ease;
  }
  /* Pulso suave para que se note sin molestar */
  .wa-float__icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--wa-color) 55%, transparent);
    animation: wa-pulse 2.8s ease-out infinite;
    pointer-events: none;
  }
  @keyframes wa-pulse {
    70% { box-shadow: 0 0 0 14px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* Etiqueta: aparece al pasar el mouse o con el foco del teclado */
  .wa-float__label {
    padding: 10px 14px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-text) 18%, transparent);
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .wa-float--izquierda .wa-float__label { transform: translateX(-8px); }
  .wa-float__btn:hover .wa-float__label,
  .wa-float__btn:focus-visible .wa-float__label {
    opacity: 1;
    transform: none;
  }
  .wa-float__btn:hover .wa-float__icon { transform: scale(1.06); }
  .wa-float__btn:focus-visible { outline: none; }
  .wa-float__btn:focus-visible .wa-float__icon {
    outline: 3px solid var(--color-text);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .wa-float__icon::after { animation: none; }
    .wa-float__icon,
    .wa-float__label { transition: none; }
    .wa-float__btn:hover .wa-float__icon { transform: none; }
  }

  .wa-float-empty {
    margin: 16px;
    padding: 12px 16px;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    color: var(--color-text-muted);
    font-size: 14px;
  }
/* END_SECTION:whatsapp-flotante */

/* START_SECTION:wishlist (INDEX:65) */
.wishlist-page {
    padding: var(--space-lg) 0 var(--space-2xl);
    background: var(--color-bg, #ffffff);
    min-height: 60vh;
  }

  /* ---------- Header ---------- */
  .wishlist-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border, #e5e5e5);
  }

  .wishlist-page__header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .wishlist-page__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-text);
    background: linear-gradient(
      90deg,
      var(--color-text) 0%,
      var(--color-brand-secondary, #20b19e) 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .wishlist-page__count {
    font-size: 14px;
    color: var(--color-text-muted, #666);
    margin: 0;
    min-height: 1.2em;
  }

  /* Boton "Vaciar lista" — outline gris, hover rojo suave para indicar destruccion. */
  .wishlist-page__clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    color: var(--color-text-muted, #666);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-sm, 4px);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
    flex: 0 0 auto;
  }

  .wishlist-page__clear:hover,
  .wishlist-page__clear:focus-visible {
    color: var(--color-brand-danger, #c33a3a);
    border-color: var(--color-brand-danger, #c33a3a);
    background: rgba(195, 58, 58, 0.05);
    outline: none;
  }

  .wishlist-page__clear[hidden] { display: none; }

  /* ---------- Grid ---------- */
  .wishlist-page__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  @media (min-width: 750px) {
    .wishlist-page__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-md);
    }
  }

  @media (min-width: 990px) {
    .wishlist-page__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .wishlist-page__grid[hidden] { display: none; }

  /* Slot con animacion de salida cuando se quita del wishlist. */
  .wishlist-page__slot {
    animation: wishlist-slot-in 240ms ease both;
    transition: opacity 220ms ease, transform 220ms ease;
  }

  .wishlist-page__slot.is-removing {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
  }

  @keyframes wishlist-slot-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .wishlist-page__slot,
    .wishlist-page__slot.is-removing {
      animation: none;
      transition: none;
      transform: none;
    }
  }

  /* ---------- Skeleton loaders (mismo pattern que recomendaciones-wishlist) ---------- */
  .wishlist-page__skeleton[hidden] { display: none; }

  .skeleton-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: var(--pc-radius, 6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    min-height: 260px;
  }

  .skeleton-card__media {
    aspect-ratio: 1 / 1;
    background: linear-gradient(
      90deg,
      #f0f0f2 0%,
      #e4e4e8 50%,
      #f0f0f2 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1400ms ease-in-out infinite;
  }

  .skeleton-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .skeleton-card__line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(
      90deg,
      #f0f0f2 0%,
      #e4e4e8 50%,
      #f0f0f2 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1400ms ease-in-out infinite;
  }

  .skeleton-card__line--title { width: 85%; }
  .skeleton-card__line--short { width: 55%; }

  @keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .skeleton-card__media,
    .skeleton-card__line { animation: none; }
  }

  /* ---------- Empty state ---------- */
  .wishlist-page__empty[hidden] { display: none; }

  .wishlist-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    gap: var(--space-sm);
    max-width: 520px;
    margin: 0 auto;
  }

  .wishlist-page__empty-icon {
    color: var(--color-text-muted, #999);
    opacity: 0.5;
    margin-bottom: var(--space-sm);
  }

  .wishlist-page__empty-heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(18px, 2.4vw, 22px);
    line-height: 1.2;
    margin: 0;
    color: var(--color-text);
  }

  .wishlist-page__empty-description {
    font-size: 14px;
    color: var(--color-text-muted, #666);
    margin: 0;
    line-height: 1.5;
  }

  .wishlist-page__empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-md);
    padding: 12px 24px;
    background: var(--color-text, #1a1a1a);
    color: var(--color-bg, #ffffff);
    border-radius: var(--radius-sm, 4px);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 150ms ease, transform 150ms ease;
  }

  .wishlist-page__empty-cta:hover,
  .wishlist-page__empty-cta:focus-visible {
    background: var(--color-brand-secondary, #20b19e);
    transform: translateY(-1px);
    outline: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .wishlist-page__empty-cta { transition: none; }
    .wishlist-page__empty-cta:hover { transform: none; }
  }

  /* Acciones del header (compartir + vaciar) */
  .wishlist-page__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Banner de vista compartida */
  .wishlist-page__shared-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background: color-mix(in srgb, var(--color-brand-accent, #6c3fd4) 8%, var(--color-bg));
    border: 1px solid color-mix(in srgb, var(--color-brand-accent, #6c3fd4) 20%, transparent);
    border-radius: var(--radius-md);
  }
  .wishlist-page__shared-banner p {
    margin: 0;
    font-size: 14px;
    color: var(--color-text);
    max-width: 60ch;
  }
  .wishlist-page__save-shared {
    padding: 10px 20px;
    background: var(--color-text);
    color: var(--color-bg);
    border: 0;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease;
  }
  .wishlist-page__save-shared:hover:not(:disabled) {
    background: var(--color-brand-secondary, #20b19e);
    transform: translateY(-1px);
  }
  .wishlist-page__save-shared:disabled { opacity: 0.7; cursor: default; }
/* END_SECTION:wishlist */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:66) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:67) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:bs-ref (INDEX:70) */
.bs-ref {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .bs-ref[hidden] { display: none; }
  .bs-ref__label { font-weight: 700; letter-spacing: 0.04em; }
  .bs-ref__value { font-weight: 700; color: var(--color-text); }
/* END_SNIPPET:bs-ref */

/* START_SNIPPET:carousel-nav (INDEX:71) */
.carousel-nav__btn {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-text) 14%, transparent);
    cursor: pointer;
    transform: translateY(-50%);
    transition: box-shadow 150ms ease, transform 150ms ease;
  }
  .carousel-nav__btn:hover {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-text) 20%, transparent);
    transform: translateY(-50%) scale(1.06);
  }
  .carousel-nav__btn:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }
  .carousel-nav__btn--prev { left: -18px; }
  .carousel-nav__btn--next { right: -18px; }
  .carousel-nav__btn[hidden] { display: none; }

  @media (min-width: 750px) {
    .carousel-nav__btn:not([hidden]) { display: inline-flex; }
  }
  @media (prefers-reduced-motion: reduce) {
    .carousel-nav__btn { transition: none; }
    .carousel-nav__btn:hover { transform: translateY(-50%); }
  }
/* END_SNIPPET:carousel-nav */

/* START_SNIPPET:cart-drawer-content (INDEX:72) */
.cart-drawer__items {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .cart-drawer-item {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
  }

  .cart-drawer-item__media {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-soft);
    text-decoration: none;
  }

  .cart-drawer-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cart-drawer-item__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-right: 24px;
  }

  .cart-drawer-item__title {
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
    font-size: 13.5px;
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cart-drawer-item__variant {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
  }

  .cart-drawer-item__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
  }

  .cart-drawer-item__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    height: 30px;
  }

  .cart-drawer-item__qty-btn {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cart-drawer-item__qty-btn:hover { background: var(--color-bg-soft); }

  .cart-drawer-item__qty-input {
    width: 32px;
    height: 28px;
    border: 0;
    background: transparent;
    text-align: center;
    color: var(--color-text);
    font-family: inherit;
    font-size: 13px;
    padding: 0;
    -moz-appearance: textfield;
  }

  .cart-drawer-item__qty-input::-webkit-inner-spin-button,
  .cart-drawer-item__qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .cart-drawer-item__unit-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
  }

  /* Precio anterior tachado en rojo, como en las tarjetas */
  .cart-drawer-item__price-compare {
    text-decoration: line-through;
    color: var(--color-brand-danger);
    font-size: 11px;
  }

  .cart-drawer-item__price-final {
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
  }

  .cart-drawer-item__discounts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cart-drawer-item__discount {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--color-brand-secondary) 12%, transparent);
    color: var(--color-brand-secondary);
    border-radius: var(--radius-sm);
    font-size: 10.5px;
    line-height: 1.3;
  }

  .cart-drawer-item__discount strong { font-weight: var(--font-weight-strong); }
  .cart-drawer-item__discount svg { flex-shrink: 0; }

  .cart-drawer-item__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    font-size: 13.5px;
    text-align: right;
  }

  .cart-drawer-item__total-compare {
    text-decoration: line-through;
    color: var(--color-brand-danger);
    font-size: 11px;
    font-weight: var(--font-weight-normal);
  }

  .cart-drawer-item__total-final {
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
  }

  .cart-drawer-item__savings {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background: color-mix(in srgb, var(--color-brand-danger) 12%, transparent);
    color: var(--color-brand-danger);
    border-radius: var(--radius-sm);
    font-size: 10.5px;
    font-weight: var(--font-weight-strong);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }

  .cart-drawer-item__savings svg { flex-shrink: 0; }

  .cart-drawer-item__remove {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 150ms ease, background-color 150ms ease;
  }

  .cart-drawer-item__remove:hover {
    color: var(--color-brand-danger);
    background: color-mix(in srgb, var(--color-brand-danger) 10%, transparent);
  }

  .cart-drawer-item[data-loading='true'] {
    opacity: 0.5;
    pointer-events: none;
  }

  /* ---------- Footer ---------- */
  .cart-drawer__footer {
    flex-shrink: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0));
  }

  .cart-drawer__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
  }

  .cart-drawer__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
  }

  .cart-drawer__row dt,
  .cart-drawer__row dd {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .cart-drawer__row--discount {
    color: var(--color-brand-secondary);
    font-weight: var(--font-weight-strong);
  }

  .cart-drawer__row--savings {
    padding: 8px 10px;
    background: color-mix(in srgb, var(--color-brand-danger) 12%, transparent);
    border-radius: var(--radius-sm);
    color: var(--color-brand-danger);
    font-weight: var(--font-weight-strong);
    font-size: 13px;
  }

  .cart-drawer__row--savings svg { flex-shrink: 0; }

  .cart-drawer__note {
    font-size: 11.5px;
    color: var(--color-text-muted);
    margin: 0;
    text-align: center;
  }

  .cart-drawer__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--color-text);
    color: var(--color-bg);
    border: 0;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 14px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease;
  }

  .cart-drawer__checkout:hover {
    background: var(--color-brand-accent, var(--color-text));
    transform: translateY(-1px);
  }

  .cart-drawer__view-cart {
    text-align: center;
    font-size: 12.5px;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .cart-drawer__view-cart:hover { color: var(--color-text); }

  /* Imagen de métodos de pago — solo desktop (>=750px). */
  .cart-drawer__payments-local {
    display: none;
  }

  @media (min-width: 750px) {
    .cart-drawer__payments-local {
      display: block;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed var(--color-border);
      text-align: center;
    }
    .cart-drawer__payments-local img {
      max-width: 100%;
      height: auto;
      display: inline-block;
    }
  }

  /* ---------- Empty state ---------- */
  .cart-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    gap: 10px;
    height: 100%;
    justify-content: center;
  }

  .cart-drawer__empty-icon {
    color: var(--color-text-muted);
    opacity: 0.5;
    margin-bottom: 4px;
  }

  .cart-drawer__empty-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 17px;
    margin: 0;
  }

  .cart-drawer__empty-text {
    font-size: 13.5px;
    color: var(--color-text-muted);
    margin: 0;
  }

  .cart-drawer__empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 12px 20px;
    background: var(--color-text);
    color: var(--color-bg);
    border-radius: var(--radius-full, 999px);
    font-size: 13px;
    font-weight: var(--font-weight-strong);
    text-decoration: none;
  }
/* END_SNIPPET:cart-drawer-content */

/* START_SNIPPET:cart-drawer (INDEX:73) */
.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    pointer-events: none;
  }

  .cart-drawer[data-open] {
    pointer-events: auto;
  }

  .cart-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 220ms ease;
  }

  .cart-drawer[data-open] .cart-drawer__backdrop { opacity: 1; }

  .cart-drawer__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 90vh;
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
    font-family: var(--font-body);
    will-change: transform;
  }

  .cart-drawer[data-open] .cart-drawer__panel {
    transform: translateY(0);
  }

  @media (min-width: 750px) {
    .cart-drawer__panel {
      top: 0;
      bottom: 0;
      left: auto;
      right: 0;
      max-height: 100vh;
      width: min(420px, 100vw);
      border-radius: 0;
      box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
      transform: translateX(100%);
    }
    .cart-drawer[data-open] .cart-drawer__panel {
      transform: translateX(0);
    }
  }

  .cart-drawer__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .cart-drawer__grabber {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--color-border);
  }

  @media (min-width: 750px) {
    .cart-drawer__grabber { display: none; }
    .cart-drawer__header { padding-top: 20px; }
  }

  .cart-drawer__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 17px;
    letter-spacing: -0.01em;
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }

  .cart-drawer__count {
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    font-size: 13px;
    color: var(--color-text-muted);
  }

  .cart-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 150ms ease;
  }

  .cart-drawer__close:hover,
  .cart-drawer__close:focus-visible {
    background: var(--color-bg-soft);
    outline: none;
  }

  .cart-drawer__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  html.cart-drawer-open,
  body.cart-drawer-open {
    overflow: hidden;
  }

  /* Bloque de acciones secundarias: link a cart + botón compartir apilados */
  .cart-drawer__actions-secondary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-border, #e5e5e5);
  }
  .cart-drawer__actions-secondary .share-btns {
    width: 100%;
  }
  .cart-drawer__actions-secondary .share-btns__trigger {
    width: 100%;
    justify-content: center;
  }
  .cart-drawer__share-hint {
    font-size: 11px;
    color: var(--color-text-muted, #888);
    text-align: center;
    line-height: 1.3;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-drawer__backdrop,
    .cart-drawer__panel { transition: none; }
  }

  /* ============ Recomendaciones (filas delgadas, solo desktop) ============ */
  .cart-drawer__recs {
    display: none;
    border-top: 1px solid var(--color-border, #e5e5e5);
    padding: 10px 14px 12px;
    background: var(--color-bg-soft, #f7f7f5);
  }
  @media (min-width: 750px) {
    .cart-drawer__recs.is-loaded { display: block; }
  }

  .cart-drawer__recs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }

  .cart-drawer__recs-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #666);
  }

  .cart-drawer__recs-nav {
    display: inline-flex;
    gap: 4px;
  }

  .cart-drawer__recs-arrow {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--color-border, #e5e5e5);
    background: #ffffff;
    color: var(--color-text, #1a1a1a);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms ease, background 150ms ease;
  }
  .cart-drawer__recs-arrow:hover {
    transform: scale(1.08);
    background: var(--color-bg, #fff);
  }

  /* Viewport = altura de 1 fila (60px) */
  .cart-drawer__recs-viewport {
    overflow: hidden;
    max-height: 60px;
  }

  .cart-drawer__recs-track {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: translateY(0);
    transition: transform 400ms cubic-bezier(0.25, 1, 0.35, 1);
    will-change: transform;
  }

  .cart-drawer__rec-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    padding: 6px 8px 6px 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    min-height: 60px;
  }

  .cart-drawer__rec {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-decoration: none;
    color: var(--color-text, #1a1a1a);
  }

  .cart-drawer__rec-media {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--color-bg-soft, #f4f4f6);
    border-radius: 6px;
    overflow: hidden;
  }

  .cart-drawer__rec-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cart-drawer__rec-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 2;
    padding: 1px 4px;
    background: var(--color-brand-danger, #e53935);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 8px;
    line-height: 1.1;
    border-radius: 3px;
    letter-spacing: 0.02em;
  }

  .cart-drawer__rec-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .cart-drawer__rec-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11.5px;
    line-height: 1.25;
    color: var(--color-text, #1a1a1a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cart-drawer__rec-price {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--font-heading);
    line-height: 1.15;
  }

  .cart-drawer__rec-price-final {
    font-weight: 700;
    font-size: 12px;
    color: var(--color-text, #1a1a1a);
  }

  .cart-drawer__rec-compare {
    font-size: 10px;
    color: var(--color-brand-danger);
    text-decoration: line-through;
    font-weight: 500;
  }

  .cart-drawer__rec-add {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-text, #1a1a1a);
    color: var(--color-bg, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms ease, background 200ms ease;
  }
  .cart-drawer__rec-add:hover { transform: scale(1.08); }
  .cart-drawer__rec-add[data-loading="1"] { opacity: 0.5; pointer-events: none; }
  .cart-drawer__rec-add.is-added { background: var(--color-brand-secondary, #20b19e); }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:coll-tree-chips (INDEX:76) */
.coll-tree {
    margin: 0 0 var(--space-lg);
  }

  /* Mobile: una sola fila con scroll horizontal. Desktop: envuelve. */
  .coll-tree__list {
    list-style: none;
    margin: 0;
    padding: 2px 0 6px;
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .coll-tree__list::-webkit-scrollbar { display: none; }

  @media (min-width: 990px) {
    .coll-tree__list {
      flex-wrap: wrap;
      overflow: visible;
    }
  }

  .coll-tree__list > li {
    flex: none;
    scroll-snap-align: start;
  }

  .coll-tree__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
  }

  .coll-tree__chip:hover {
    border-color: var(--color-text);
  }

  .coll-tree__chip:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  .coll-tree__chip.is-current {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-bg);
    font-weight: 700;
  }

  .coll-tree__chip--back {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .coll-tree__chip { transition: none; }
  }
/* END_SNIPPET:coll-tree-chips */

/* START_SNIPPET:image (INDEX:81) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:landing-head (INDEX:82) */
/* ===== Movimiento de las landing (todo en un solo lugar) =====
     - Entradas al hacer scroll con animaciones ligadas al scroll
       (animation-timeline: view()): cero JS, cero timers, las corre el
       compositor. Sin soporte del navegador no se anima y todo se ve igual.
     - Entrada del hero al cargar y transiciones de interaccion.
     - Todo apagado con prefers-reduced-motion. */
  @keyframes land-rise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes land-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes land-from-left {
    from { opacity: 0; transform: translateX(-48px) rotate(-3deg); }
    to { opacity: 1; transform: none; }
  }
  @keyframes land-from-right {
    from { opacity: 0; transform: translateX(48px) rotate(3deg); }
    to { opacity: 1; transform: none; }
  }
  @keyframes land-zoom-out {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
  }
  @keyframes land-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: none; }
  }
  @keyframes land-sheet {
    from { transform: translateY(100%); }
    to { transform: none; }
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Hero: al cargar, la foto se asienta y el texto sube escalonado */
    .lhero__img { animation: land-zoom-out 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .lhero__box > * { animation: land-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .lhero__box > *:nth-child(2) { animation-delay: 0.12s; }
    .lhero__box > *:nth-child(3) { animation-delay: 0.24s; }

    /* Cambio de pestana y tarjeta del lookbook */
    .ltabs__panel:not([hidden]) { animation: land-fade 0.35s ease both; }
    .llook__pop:not([hidden]) { animation: land-pop 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

    /* Entradas al hacer scroll. En el lookbook se anima .llook__scenes y no
       .llook__rail: un transform en el rail atrapa la tarjeta (position: fixed
       en mobile) y la deja fuera de pantalla o debajo de otras capas. */
    @supports (animation-timeline: view()) {
      .land-sec .land-head,
      .liconos__rail,
      .lmarca__texto,
      .ltabs__tabs,
      .ltabs__panelrail,
      .ltabs__viewall,
      .lcats__item,
      .ltesti__rail,
      .lfaq__item,
      .llook__scenes {
        animation: land-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
      /* Escalonado en grillas: cada tarjeta termina de entrar un poco despues */
      .lcats__item:nth-child(2),
      .lfaq__item:nth-child(2) { animation-range: entry 8% entry 63%; }
      .lcats__item:nth-child(3),
      .lfaq__item:nth-child(3) { animation-range: entry 16% entry 71%; }
      .lcats__item:nth-child(4),
      .lfaq__item:nth-child(4) { animation-range: entry 24% entry 79%; }

      .lmarca__foto--1 {
        animation: land-from-left linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
      }
      .lmarca__foto--2 {
        animation: land-from-right linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) and (max-width: 749px) {
    /* Mobile: la tarjeta del lookbook sube como hoja */
    .llook__pop:not([hidden]) { animation: land-sheet 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  }

  /* Transiciones de interaccion (se desactivan abajo con reduced-motion) */
  .ltabs__tab { transition: color 0.2s ease, border-color 0.25s ease; }
  .lfaq__pregunta { transition: background-color 0.25s ease, color 0.25s ease; }
  .lfaq__icon { transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s ease; }
  .lfaq__item[open] .lfaq__icon { transform: rotate(180deg); }
  .liconos__item { transition: transform 0.25s ease; }
  .liconos__item:hover { transform: translateY(-4px); }
  .lcats__card { transition: box-shadow 0.3s ease, transform 0.3s ease; }
  .lcats__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--color-text) 18%, transparent);
  }
  .llook__dot,
  .ltesti__dot,
  .liconos__dot { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
  .llook__pin { transition: transform 0.2s ease; }
  .llook__pin:hover { transform: translate(-50%, -50%) scale(1.12); }

  /* FAQ: la respuesta se despliega con altura animada donde el navegador
     lo soporta (::details-content + interpolate-size); si no, abre normal. */
  .lfaq { interpolate-size: allow-keywords; }
  .lfaq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .lfaq__item[open]::details-content { block-size: auto; }

  @media (prefers-reduced-motion: reduce) {
    .ltabs__tab,
    .lfaq__pregunta,
    .lfaq__icon,
    .liconos__item,
    .lcats__card,
    .llook__pin,
    .lfaq__item::details-content { transition: none; }
    .liconos__item:hover,
    .lcats__card:hover { transform: none; }
    .lfaq__item[open] .lfaq__icon { transform: none; }
  }

  /* ===== Utilidades compartidas por las secciones landing-* =====
     Viven aca porque todas esas secciones renderizan este snippet. */
  .land-sec {
    padding-top: var(--land-pt, 48px);
    padding-bottom: var(--land-pb, 48px);
  }
  .land-sec__inner {
    max-width: calc(1200px + 2 * var(--space-md, 16px));
    margin: 0 auto;
    padding-inline: var(--space-md, 16px);
  }
  .land-sec--suave {
    background: var(--marca-10, var(--color-bg-soft));
  }
  /* Estado vacio en el editor: mismas reglas que el .pdp-empty de
     pdp-section-head (en plantillas page/index ese snippet no se
     renderiza, asi que las landing lo definen aca). */
  .pdp-empty {
    padding: 20px 22px;
    border: 1px dashed var(--color-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
  }
  .pdp-empty code {
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    font-family: monospace;
  }

  .land-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 44px);
  }
  .land-head--left {
    align-items: flex-start;
    text-align: left;
  }
  .land-head__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 650;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--marca-30, var(--color-text));
    text-wrap: balance;
  }
  .land-head__hl {
    font-style: italic;
    color: var(--marca-60, var(--color-text));
  }
  .land-head__sub {
    margin: 0;
    max-width: 640px;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.6;
    color: var(--color-text-muted);
  }
/* END_SNIPPET:landing-head */

/* START_SNIPPET:landing-icono (INDEX:83) */
/* ===== Utilidades de las landing estilo "tienda" =====
     Viven aca porque todas esas secciones renderizan este snippet. */
  .lx-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .lx-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    overflow: hidden;
    padding: 13px 30px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--marca-10, var(--color-brand-primary));
    color: var(--color-text);
    font-family: inherit;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.2s ease, box-shadow 0.25s ease;
  }
  .lx-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--color-bg) 45%, transparent), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
    pointer-events: none;
  }
  .lx-btn:hover {
    background: var(--marca-30, var(--color-brand-primary));
    transform: translateY(-2px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--marca-10, var(--color-brand-primary)) 35%, transparent);
  }
  .lx-btn:hover::after { left: 120%; }
  .lx-btn:focus-visible {
    outline: 2px solid var(--marca-30, var(--color-text));
    outline-offset: 3px;
  }
  .lx-btn--ghost {
    background: transparent;
    border-color: var(--marca-30, var(--color-brand-primary));
    color: var(--marca-30, var(--color-brand-primary));
  }
  .lx-btn--ghost:hover {
    background: color-mix(in srgb, var(--marca-30, var(--color-brand-primary)) 14%, transparent);
  }
  .lx-btn--sm {
    padding: 11px 20px;
    font-size: 12px;
  }
  .lx-btn[disabled],
  .lx-btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  /* Estados que pone assets/product-card-actions.js en [data-add-to-cart] */
  .lx-btn.is-loading { opacity: 0.7; pointer-events: none; }
  .lx-btn.is-added {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--marca-30, var(--color-bg));
  }

  .lx-kicker {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--marca-10, var(--color-brand-primary));
  }
  .lx-hl {
    font-style: normal;
    color: var(--marca-30, var(--color-brand-primary));
  }

  .lx-head {
    max-width: 720px;
    margin: 0 auto clamp(28px, 4vw, 46px);
    text-align: center;
  }
  .lx-head__title {
    margin: 12px 0 14px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text);
    text-wrap: balance;
  }
  .lx-head__sub {
    margin: 0;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.6;
    color: var(--color-text-muted);
  }

  /* Franja degradada de marca entre secciones */
  .lx-franja {
    height: 6px;
    background: linear-gradient(90deg, var(--marca-30, var(--color-brand-primary)) 0%, var(--marca-10, var(--color-brand-primary)) 50%, var(--marca-30, var(--color-brand-primary)) 100%);
  }

  /* Patron de puntos sutiles para fondos oscuros (colores de marca, sin SVG
     con colores fijos) */
  .lx-patron {
    background-image:
      radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--marca-30, var(--color-brand-primary)) 14%, transparent) 0 2px, transparent 3px),
      radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--marca-10, var(--color-brand-primary)) 10%, transparent) 0 2px, transparent 3px);
    background-size: 84px 84px;
  }

  @media (prefers-reduced-motion: reduce) {
    .lx-btn,
    .lx-btn::after { transition: none; }
    .lx-btn:hover { transform: none; }
  }
/* END_SNIPPET:landing-icono */

/* START_SNIPPET:marca-landing-hint (INDEX:85) */
.marca-hint {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    padding: 3px 10px;
    border: 2px solid var(--color-brand-accent);
    border-radius: var(--radius-full, 999px);
    background: var(--color-bg);
    color: var(--color-brand-accent);
    box-shadow: 2px 2px 0 var(--color-brand-accent);
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    /* Escondida hasta que la marca está elegida. visibility la saca también
       del nombre accesible del botón. */
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 40%) scale(0.9);
    transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
  }
  .is-active > .marca-hint {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 50%) scale(1);
    transition: opacity 200ms ease 120ms, transform 200ms ease 120ms, visibility 0s;
    animation: marca-hint-pulso 1.6s ease-in-out 600ms 2;
  }
  @keyframes marca-hint-pulso {
    50% { transform: translate(-50%, 50%) scale(1.08); }
  }
  @media (prefers-reduced-motion: reduce) {
    .marca-hint,
    .is-active > .marca-hint { transition: none; animation: none; }
  }
/* END_SNIPPET:marca-landing-hint */

/* START_SNIPPET:nq-estilo (INDEX:88) */
.nq-kicker {
    --nq-kicker-bg-final: var(--nq-kicker-bg, var(--color-brand-accent));
    --nq-kicker-dark: color-mix(in srgb, var(--nq-kicker-bg-final) 58%, var(--color-text));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-sm);
    padding: 5px 12px 6px;
    border: 1.5px solid var(--color-bg);
    border-radius: var(--radius-sm, 4px);
    background: var(--nq-kicker-bg-final);
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* relieve de las letras, como los titulares de los posts */
    text-shadow:
      1px 0 var(--nq-kicker-dark), -1px 0 var(--nq-kicker-dark),
      0 1px var(--nq-kicker-dark), 0 -1px var(--nq-kicker-dark),
      0 2px var(--nq-kicker-dark);
    box-shadow:
      0 2px 0 var(--nq-kicker-dark),
      0 6px 14px color-mix(in srgb, var(--nq-kicker-dark) 30%, transparent);
  }
  .nq-kicker svg { flex-shrink: 0; }

  /* Trama recta repetida (asset nq-trama.svg), para fondos de color */
  .nq-trama-recta { position: relative; isolation: isolate; }
  .nq-trama-recta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: var(--nq-trama-color, var(--color-bg));
    opacity: var(--nq-trama-opacidad, 0.16);
    -webkit-mask: var(--nq-trama) left top / auto repeat;
            mask: var(--nq-trama) left top / auto repeat;
  }

  /* Titular estilo NQ: blanco con contorno morado y relieve */
  .nq-titular {
    --nq-titular-dark: color-mix(in srgb, var(--color-brand-accent) 58%, var(--color-text));
    color: var(--color-bg);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    text-shadow:
      2px 0 var(--nq-titular-dark), -2px 0 var(--nq-titular-dark),
      0 2px var(--nq-titular-dark), 0 -2px var(--nq-titular-dark),
      1.5px 1.5px var(--nq-titular-dark), -1.5px 1.5px var(--nq-titular-dark),
      1.5px -1.5px var(--nq-titular-dark), -1.5px -1.5px var(--nq-titular-dark),
      0 4px var(--nq-titular-dark), 0 5px var(--nq-titular-dark);
  }

  /* Botón píldora NQ: blanco, borde morado y sombra sólida desplazada */
  .nq-pildora {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 2px solid var(--color-brand-accent);
    border-radius: var(--radius-full, 999px);
    background: var(--color-bg);
    color: var(--color-brand-accent);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 3px 3px 0 var(--color-brand-accent);
    transition: transform 150ms ease, box-shadow 150ms ease;
  }
  .nq-pildora:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--color-brand-accent); }
  @media (prefers-reduced-motion: reduce) { .nq-pildora { transition: none; } }

  .nq-trama-arcos { position: relative; isolation: isolate; }
  .nq-trama-arcos::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--nq-trama-color, var(--color-brand-accent));
    opacity: var(--nq-trama-opacidad, 0.13);
    -webkit-mask: var(--nq-trama) center bottom / cover no-repeat;
            mask: var(--nq-trama) center bottom / cover no-repeat;
  }
/* END_SNIPPET:nq-estilo */

/* START_SNIPPET:pdp-section-head (INDEX:90) */
/* ===== Utilidades compartidas por las secciones PDP de marca =====
     Viven aca porque todas esas secciones renderizan este snippet. */
  .pdp-sec {
    padding: var(--pdp-pt, 56px) var(--space-md, 16px) var(--pdp-pb, 56px);
  }
  .pdp-sec__inner {
    max-width: var(--pdp-max, 1200px);
    margin: 0 auto;
  }
  /* Superficies. "calido" = tinte muy leve del color 30 de la marca (look Metrikasa). */
  .pdp-sec--calido { background: color-mix(in srgb, var(--marca-30, var(--color-bg-soft)) 6%, var(--color-bg)); }
  .pdp-sec--claro { background: var(--color-bg); }
  .pdp-sec--suave { background: var(--color-bg-soft); }
  .pdp-sec--oscuro { background: var(--color-text); color: var(--color-bg); }

  .pdp-empty {
    padding: 20px 22px;
    border: 1px dashed var(--color-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
  }
  .pdp-empty code {
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    font-family: monospace;
  }

  .pdp-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: clamp(24px, 3.5vw, 40px);
  }
  .pdp-head--center {
    align-items: center;
    text-align: center;
  }
  .pdp-head__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--marca-10, var(--color-text-muted));
  }
  .pdp-head__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(26px, 4.4vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-wrap: balance;
  }
  .pdp-head__title-hl {
    color: var(--marca-30, var(--color-brand-accent, var(--color-text)));
  }
  .pdp-head__sub {
    margin: 0;
    max-width: 620px;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.6;
    color: var(--color-text-muted);
  }

  /* Sobre fondo oscuro */
  .pdp-head--dark .pdp-head__title { color: var(--color-bg); }
  .pdp-head--dark .pdp-head__sub { color: color-mix(in srgb, var(--color-bg) 72%, transparent); }

  /* ===== Norwell: minusculas, kicker con triangulo ===== */
  .pdp-head--norwell .pdp-head__kicker {
    letter-spacing: 0.2em;
    color: var(--color-text-muted);
  }
  .pdp-head--norwell .pdp-head__tri { color: var(--marca-10, var(--color-text)); }
  .pdp-head--norwell.pdp-head--dark .pdp-head__kicker { color: var(--marca-10, var(--color-bg)); }
  .pdp-head--norwell .pdp-head__title {
    text-transform: lowercase;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-size: clamp(28px, 4.4vw, 46px);
  }
  .pdp-head--norwell .pdp-head__title-hl { color: inherit; }

  /* ===== Acurrucados: kicker con linea, titulo muy bold ===== */
  .pdp-head--acurrucados .pdp-head__kicker::before {
    content: '';
    width: 24px;
    height: 1.5px;
    background: currentColor;
  }
  .pdp-head--acurrucados .pdp-head__kicker { letter-spacing: 0.2em; font-weight: 700; }
  .pdp-head--acurrucados .pdp-head__title {
    font-weight: 800;
    letter-spacing: -0.035em;
    font-size: clamp(30px, 5vw, 56px);
    color: var(--marca-30, var(--color-text));
  }
  .pdp-head--acurrucados.pdp-head--dark .pdp-head__title { color: var(--color-bg); }
  .pdp-head--acurrucados .pdp-head__title-hl { color: inherit; }
/* END_SNIPPET:pdp-section-head */

/* START_SNIPPET:pdp-stock-bajo (INDEX:91) */
.pdp-block-stock[hidden] { display: none; }
  .pdp-block-stock {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pdp-block-stock__text {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--font-weight-strong);
    color: var(--color-brand-danger);
  }
  .pdp-block-stock__text svg { flex-shrink: 0; }
  .pdp-block-stock__bar {
    height: 6px;
    border-radius: var(--radius-full, 999px);
    background: color-mix(in srgb, var(--color-brand-danger) 14%, transparent);
    overflow: hidden;
  }
  .pdp-block-stock__bar span {
    display: block;
    height: 100%;
    width: var(--stock, 50%);
    border-radius: inherit;
    background: var(--color-brand-danger);
    transition: width 300ms ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .pdp-block-stock__bar span { transition: none; }
  }
/* END_SNIPPET:pdp-stock-bajo */

/* START_SNIPPET:product-card-badges (INDEX:92) */
/* ===== Estilo NQ (zonas 'tab' y 'titulo') ===== */
  /* Pestaña "OFERTA": píldora morada, borde blanco, sello 3D y letras con relieve */
  .product-card__badge--custom.nq-tab {
    --nq-dark: color-mix(in srgb, var(--color-brand-accent) 58%, var(--color-text));
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 14px 2px 3px;
    /* Va centrado con left: 50%: sin esto el navegador le da solo la mitad
       de la tarjeta y en mobile el texto se sale de la pastilla. */
    width: max-content;
    background: var(--color-brand-accent);
    color: var(--color-bg);
    border: 2px solid var(--color-bg);
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 1px 0 var(--nq-dark), -1px 0 var(--nq-dark), 0 1px var(--nq-dark), 0 -1px var(--nq-dark), 0 2px var(--nq-dark);
    box-shadow: 0 2px 0 var(--nq-dark), 0 6px 14px color-mix(in srgb, var(--nq-dark) 35%, transparent);
    user-select: none;
  }
  .nq-tab__ico { width: 24px; height: 24px; display: block; }

  /* Etiquetas en la línea del título: del alto del texto, con el ícono 3D por dentro */
  .nq-tag {
    --nq-dark: color-mix(in srgb, var(--color-brand-accent) 58%, var(--color-text));
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    padding: 0 7px 0 1px;
    margin-right: 4px;
    vertical-align: -4px;
    border-radius: 999px;
    border: 1.2px solid var(--color-bg);
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 25%, transparent);
    user-select: none;
  }
  .nq-tag img { width: 16px; height: 16px; display: block; flex-shrink: 0; }

  /* Ficha de producto: fila de etiquetas arriba del título */
  .pdp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--space-xs);
  }
  .pdp-tags .nq-tag {
    height: 24px;
    margin: 0;
    padding: 0 10px 0 2px;
    font-size: 12px;
    vertical-align: 0;
  }
  .pdp-tags .nq-tag img { width: 22px; height: 22px; object-fit: contain; }
  @media (min-width: 990px) {
    .pdp-tags .nq-tag { height: 26px; font-size: 13px; padding-right: 12px; }
    .pdp-tags .nq-tag img { width: 24px; height: 24px; }
  }
  .nq-tag--solid { background: var(--color-brand-accent); color: var(--color-bg);
    text-shadow: 1px 0 var(--nq-dark), -1px 0 var(--nq-dark), 0 1px var(--nq-dark), 0 -1px var(--nq-dark); }
  .nq-tag--teal { --nq-dark: color-mix(in srgb, var(--color-brand-secondary) 55%, var(--color-text));
    background: var(--color-brand-secondary); color: var(--color-bg);
    text-shadow: 1px 0 var(--nq-dark), -1px 0 var(--nq-dark), 0 1px var(--nq-dark), 0 -1px var(--nq-dark); }
  .nq-tag--soft { background: color-mix(in srgb, var(--color-brand-accent) 14%, var(--color-bg)); color: var(--color-brand-accent); }
  .nq-tag--line { background: var(--color-bg); color: color-mix(in srgb, var(--color-brand-secondary) 60%, var(--color-text));
    border: 1.5px solid var(--color-brand-secondary); }

  /* Varias etiquetas: se turnan en el mismo espacio (el JS fija el ancho) */
  .nq-tags { display: inline-block; height: 20px; margin-right: 4px; vertical-align: -5px; overflow: hidden; }
  .nq-tags__track { display: flex; transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1); }
  .nq-tags__slot { flex: 0 0 auto; display: flex; align-items: center; height: 20px; }
  .nq-tags .nq-tag { margin-right: 0; vertical-align: 0; }
  @media (prefers-reduced-motion: reduce) { .nq-tags__track { transition: none; } }

  /* Badge custom (override manual): pill grande sobresaliendo arriba centrado */
  .product-card__badge--custom {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    border-radius: 999px;
    z-index: 5;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  }
/* END_SNIPPET:product-card-badges */

/* START_SNIPPET:product-card-media (INDEX:93) */
.product-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--color-bg-soft, #f4f4f6);
    overflow: hidden;
    border-radius: var(--pc-radius, 6px) var(--pc-radius, 6px) 0 0;
  }

  .product-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }

  .product-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 250ms ease;
  }

  .product-card__img--hover { opacity: 0; }

  /* Desktop: hover del card swap de imagenes */
  @media (hover: hover) {
    .product-card:hover .product-card__img--primary { opacity: 0; }
    .product-card:hover .product-card__img--hover { opacity: 1; }
  }

  .product-card__img--placeholder {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20%;
    opacity: 0.4;
  }

  /* Video hover: encima de la imagen, fade in cuando esta activo. */
  .product-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 200ms ease;
    z-index: 2;
    pointer-events: none;
  }

  /* Activo: por hover (desktop) o por clase toggleada via JS (mobile). */
  @media (hover: hover) {
    .product-card:hover .product-card__media--has-video .product-card__img--primary { opacity: 0; }
    .product-card:hover .product-card__media--has-video .product-card__video { opacity: 1; }
  }
  .product-card__media--has-video.is-video-playing .product-card__img--primary { opacity: 0; }
  .product-card__media--has-video.is-video-playing .product-card__video { opacity: 1; }

  /* Overlay AGOTADO */
  .product-card__media--sold-out .product-card__img,
  .product-card__media--sold-out .product-card__video {
    filter: grayscale(0.5);
  }
  .product-card:hover .product-card__media--sold-out .product-card__img--primary { opacity: 1; }
  .product-card:hover .product-card__media--sold-out .product-card__img--hover { opacity: 0; }
  .product-card:hover .product-card__media--sold-out .product-card__video { opacity: 0; }

  .product-card__sold-out {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
  }
  .product-card__sold-out::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.35);
  }
  .product-card__sold-out-band {
    position: relative;
    padding: 6px 40px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: rotate(-8deg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    z-index: 1;
  }

  .product-card__wishlist {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 150ms ease, color 150ms ease, background 150ms ease;
  }
  .product-card__wishlist:hover,
  .product-card__wishlist:focus-visible {
    outline: none;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  }
  .product-card__wishlist.is-active { color: #e53935; }
  .product-card__wishlist.is-active svg { fill: currentColor; }
/* END_SNIPPET:product-card-media */

/* START_SNIPPET:product-card-price (INDEX:94) */
.product-card__prices {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .product-card__price {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 900;
    color: var(--color-text);
    line-height: 1;
  }

  /* Precio anterior tachado en rojo */
  .product-card__compare {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-brand-danger);
    text-decoration: line-through;
    text-decoration-color: var(--color-brand-danger);
    text-decoration-thickness: 1.5px;
  }

  /* "Ahorras" + sello -% en una línea propia */
  .product-card__saveline {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .nq-dcto {
    --nq-dark: color-mix(in srgb, var(--color-descuento) 58%, var(--color-text));
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 19px;
    padding: 0 7px 0 1px;
    border-radius: 999px;
    border: 1.2px solid var(--color-bg);
    background: var(--color-descuento);
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 1px 0 var(--nq-dark), -1px 0 var(--nq-dark), 0 1px var(--nq-dark), 0 -1px var(--nq-dark);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 25%, transparent);
    user-select: none;
  }
  .nq-dcto img { width: 17px; height: 17px; display: block; }

  /* Tarjetas angostas (2 por fila en celular): solo el sello -%, sin "Ahorras" */
  /* (más específico: el @container queda al inicio del CSS compilado) */
  @container (max-width: 200px) {
    .product-card .product-card__saveline .product-card__save { display: none; }
  }

  .product-card__save {
    display: inline-block;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: #00693c;
    background: rgba(0, 200, 83, 0.14);
    border-radius: 999px;
    white-space: nowrap;
  }
/* END_SNIPPET:product-card-price */

/* START_SNIPPET:product-card-rating (INDEX:95) */
.product-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    min-height: 16px;
  }

  .product-card__star { flex-shrink: 0; }

  .product-card__rating-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted, #6b6b74);
  }

  .product-card__rating .alireviews-review-star-rating { font-size: 12px; }
/* END_SNIPPET:product-card-rating */

/* START_SNIPPET:product-card (INDEX:96) */
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 180ms ease;
    margin-top: 12px;
    height: 100%;
    border-radius: var(--pc-radius, 6px);
    /* Contenedor para que el precio se adapte al ancho de la tarjeta (ver product-card-price) */
    container-type: inline-size;
    /* overflow: visible para que el badge --custom pueda sobresalir arriba
       (top: -12px). El clip del border-radius vive en .product-card__media
       y en el body via su propio border-radius. */
    overflow: visible;
  }

  .product-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  }

  .product-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px 12px;
    min-height: 92px;
    flex: 1 1 auto;
    text-align: left;
    background: #ffffff;
    border-radius: 0 0 var(--pc-radius, 6px) var(--pc-radius, 6px);
  }

  .product-card__title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
    color: var(--color-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card__title:hover { color: var(--color-brand-secondary, #20b19e); }

  .product-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    width: 100%;
  }

  .product-card__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 50%;
    background: #ffffff;
    color: #1a1a1a;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
  }

  .product-card__add:hover,
  .product-card__add:focus-visible {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
    outline: none;
  }

  .product-card__add.is-loading { opacity: 0.6; }
  .product-card__add.is-added {
    background: #00c853;
    color: #ffffff;
    border-color: #00c853;
  }

  /* Franja del contador (estilo NQ), al final de la tarjeta a todo el ancho */
  .nq-cd {
    --nq-dark: color-mix(in srgb, var(--color-brand-accent) 58%, var(--color-text));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-top: 1.5px solid var(--color-bg);
    border-radius: 0 0 var(--pc-radius, 6px) var(--pc-radius, 6px);
    background: var(--color-brand-accent);
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 1px 0 var(--nq-dark), -1px 0 var(--nq-dark), 0 1px var(--nq-dark), 0 -1px var(--nq-dark);
    user-select: none;
  }
  .nq-cd[hidden] { display: none; }
  .nq-cd img { width: 22px; height: 22px; display: block; }
  .nq-cd b { font-weight: 900; font-variant-numeric: tabular-nums; }
  /* Tarjeta angosta (carruseles de 2 en mobile): solo reloj + tiempo, para
     que la franja no se salga de la tarjeta. Más específico porque el
     @container queda al inicio del CSS compilado. */
  @container (max-width: 190px) {
    .product-card .nq-cd.nq-cd { gap: 4px; padding: 0 4px; font-size: 10px; letter-spacing: 0.02em; }
    .product-card .nq-cd.nq-cd img { width: 18px; height: 18px; }
    .product-card .nq-cd .nq-cd__lbl { display: none; }
  }
  .product-card:has(.nq-cd:not([hidden])) .product-card__body { border-radius: 0; }

  @media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-card__img,
    .product-card__video,
    .product-card__wishlist,
    .product-card__add {
      transition: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-gallery (INDEX:97) */
.product-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  @media (min-width: 990px) {
    .product-gallery {
      grid-template-columns: 72px 1fr;
      gap: 12px;
    }
  }

  /* Thumbnails */
  .product-gallery__thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    -webkit-overflow-scrolling: touch;
    padding: 2px 20px 6px 2px;
    order: 2;
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 12px,
      #000 calc(100% - 28px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 12px,
      #000 calc(100% - 28px),
      transparent 100%
    );
  }

  .product-gallery__thumbs::-webkit-scrollbar { display: none; }

  @media (min-width: 990px) {
    .product-gallery__thumbs {
      order: 0;
      flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      max-height: 600px;
      padding: 2px 4px 20px 2px;
      mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 12px,
        #000 calc(100% - 28px),
        transparent 100%
      );
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 12px,
        #000 calc(100% - 28px),
        transparent 100%
      );
    }
  }

  .product-gallery__thumb {
    position: relative;
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: border-color 150ms ease;
  }

  .product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .product-gallery__thumb:hover { border-color: var(--color-border); }
  .product-gallery__thumb.is-active { border-color: var(--color-text); }

  .product-gallery__thumb-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
  }

  /* Main media */
  .product-gallery__main {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
  }

  .product-gallery__track {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    aspect-ratio: 1 / 1;
  }

  .product-gallery__track::-webkit-scrollbar { display: none; }

  .product-gallery__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
  }

  .product-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .product-gallery__video,
  .product-gallery__external-video iframe {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  .product-gallery__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-bg-soft), var(--color-border));
  }

  /* Nav arrows */
  .product-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    background: rgba(255,255,255,0.9);
    color: var(--color-text);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 150ms ease, background-color 150ms ease;
  }

  @media (min-width: 750px) {
    .product-gallery__main:hover .product-gallery__nav,
    .product-gallery__main:focus-within .product-gallery__nav {
      opacity: 1;
    }
    .product-gallery__nav { display: inline-flex; }
  }

  .product-gallery__nav--prev { left: 12px; }
  .product-gallery__nav--next { right: 12px; }

  .product-gallery__nav:hover { background: #fff; }

  /* Dots */
  .product-gallery__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
  }

  @media (min-width: 990px) {
    .product-gallery__dots { display: none; }
  }

  .product-gallery__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0,0,0,0.25);
    transition: background-color 150ms ease, transform 150ms ease;
  }

  .product-gallery__dot.is-active {
    background: var(--color-text);
    transform: scale(1.35);
  }
/* END_SNIPPET:product-gallery */

/* START_SNIPPET:product-recommendations-fragment (INDEX:98) */
.pdp-recs {
    margin-top: var(--space-2xl);
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-border);
    /* Permitir que hover/box-shadow de las cards se desborden verticalmente */
    overflow: visible;
  }

  .pdp-recs__header {
    max-width: 1400px;
    margin: 0 auto var(--space-md);
    padding: 0 var(--space-md);
  }

  .pdp-recs__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(20px, 4vw, 26px);
    letter-spacing: -0.01em;
    margin: 0;
  }

  .pdp-recs__viewport {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    /* Truco: el track necesita overflow-x auto para scroll horizontal, pero
       eso implica overflow-y: hidden -> corta las cards al hover.
       Le damos padding-block generoso al track para que el area scrollable
       tenga aire y no corte hover/sombras/lift. */
  }

  .pdp-recs__track {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 65%;
    gap: var(--space-md);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Padding vertical (arriba y abajo) para dar aire al hover expandido
       de las cards. Sin esto, el overflow-y: hidden implicito corta el lift. */
    padding: 16px 4px 20px;
    margin: -16px -4px -20px;
  }

  .pdp-recs__track::-webkit-scrollbar { display: none; }
  .pdp-recs__slot { scroll-snap-align: start; }

  @media (min-width: 550px) {
    .pdp-recs__track { grid-auto-columns: 40%; }
  }

  @media (min-width: 750px) {
    .pdp-recs__track { grid-auto-columns: calc((100% - (var(--space-md) * 3)) / 4); }
  }

  @media (min-width: 1200px) {
    .pdp-recs__track { grid-auto-columns: calc((100% - (var(--space-md) * 4)) / 5); }
  }

  /* Skeleton */
  .pdp-recs__skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pdp-recs__skeleton-media {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--color-bg-soft) 0%, var(--color-border) 50%, var(--color-bg-soft) 100%);
    background-size: 200% 100%;
    animation: pdp-recs-shimmer 1400ms ease-in-out infinite;
  }

  .pdp-recs__skeleton-line {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-bg-soft) 0%, var(--color-border) 50%, var(--color-bg-soft) 100%);
    background-size: 200% 100%;
    animation: pdp-recs-shimmer 1400ms ease-in-out infinite;
  }

  .pdp-recs__skeleton-line--title { width: 85%; }
  .pdp-recs__skeleton-line--short { width: 55%; }

  @keyframes pdp-recs-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-recs__skeleton-media,
    .pdp-recs__skeleton-line { animation: none; }
  }
/* END_SNIPPET:product-recommendations-fragment */

/* START_SNIPPET:product-tabs (INDEX:99) */
.product-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
  }

  .product-tabs__item {
    border-bottom: 1px solid var(--color-border);
  }

  .product-tabs__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-strong);
    font-size: 14px;
    color: var(--color-text);
    letter-spacing: 0.02em;
  }

  .product-tabs__summary::-webkit-details-marker { display: none; }

  .product-tabs__chevron {
    color: var(--color-text-muted);
    transition: transform 220ms ease, color 220ms ease;
    flex-shrink: 0;
  }

  .product-tabs__item[open] .product-tabs__chevron {
    transform: rotate(180deg);
    color: var(--color-brand-accent, var(--color-text));
  }

  .product-tabs__content {
    padding: 0 0 16px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-text);
  }

  .product-tabs__content > *:first-child { margin-top: 0; }
  .product-tabs__content > *:last-child { margin-bottom: 0; }
  .product-tabs__content p { margin: 0 0 0.9em; }
  .product-tabs__content ul,
  .product-tabs__content ol { margin: 0 0 0.9em; padding-left: 1.4em; }
  .product-tabs__content li { margin-bottom: 0.35em; }
  .product-tabs__content strong { font-weight: var(--font-weight-strong); }
  .product-tabs__content a { color: var(--color-brand-accent, var(--color-text)); text-underline-offset: 3px; }
/* END_SNIPPET:product-tabs */

/* START_SNIPPET:share-buttons (INDEX:102) */
.share-btns {
    position: relative;
    display: inline-block;
  }

  .share-btns__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease;
  }
  .share-btns__trigger:hover,
  .share-btns__trigger:focus-visible {
    border-color: var(--color-text);
    background: var(--color-bg-soft, #f7f7f5);
    outline: none;
  }

  .share-btns__menu {
    position: fixed;
    z-index: 10000;
    min-width: 220px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .share-btns__menu[hidden] { display: none; }

  .share-btns__opt {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    width: 100%;
  }
  .share-btns__opt:hover,
  .share-btns__opt:focus-visible {
    background: var(--color-bg-soft, #f7f7f5);
    outline: none;
  }

  .share-btns__opt--wa svg { color: #25d366; }
  .share-btns__opt.is-copied span { color: var(--color-brand-secondary, #20b19e); }

  /* Toast de "copiado" abajo */
  .share-btns__toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    z-index: 200;
    padding: 10px 20px;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .share-btns__toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
/* END_SNIPPET:share-buttons */

/* START_SNIPPET:tienda-sticker (INDEX:103) */
.tstk {
    position: relative;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--color-text) 18%, transparent));
    transition: transform 0.3s ease;
  }
  .tstk__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
  }
  .tstk::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      transparent 32%,
      color-mix(in srgb, var(--color-bg) 95%, transparent) 50%,
      transparent 68%
    ) no-repeat;
    background-size: 250% 100%;
    background-position: 150% 0;
    -webkit-mask: var(--tstk-img) center / contain no-repeat;
    mask: var(--tstk-img) center / contain no-repeat;
    mix-blend-mode: screen;
    animation: tstk-shine 4.5s ease-in-out var(--tstk-delay, 0s) infinite;
  }
  @keyframes tstk-shine {
    0%, 55% { background-position: 150% 0; }
    85%, 100% { background-position: -50% 0; }
  }
  .tstk-hover:hover .tstk,
  .tstk-hover:focus-visible .tstk {
    transform: translateY(-4px) scale(1.05) rotate(-2deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .tstk::after { animation: none; opacity: 0; }
    .tstk { transition: none; }
    .tstk-hover:hover .tstk,
    .tstk-hover:focus-visible .tstk { transform: none; }
  }
/* END_SNIPPET:tienda-sticker */