/* ==========================================================================
   SLP · Hoja de estilos única
   Orden: tokens → base → utilidades → componentes → páginas → responsive
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --brand: #e4032e;
  --brand-dark: #b80325;
  --brand-soft: rgba(228, 3, 46, .08);
  --brand-ring: rgba(228, 3, 46, .4);
  --ink: #111418;
  --ink-soft: #2a2f36;
  --afa: #0e5bd6;
  --afa-dark: #0a48a8;

  --g50: #f9fafb;
  --g100: #f3f4f6;
  --g200: #e5e7eb;
  --g300: #d1d5db;
  --g400: #9ca3af;
  --g500: #6b7280;
  --g600: #4b5563;
  --green: #16a34a;

  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow: 0 4px 14px rgba(0, 0, 0, .08);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, .14);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --header-h: 44px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

/* El atributo `hidden` siempre gana: si no, un `display` de componente lo pisa
   y el panel oculto sigue capturando clics sobre la página. */
[hidden] { display: none !important; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; }
legend { padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Utilidades ───────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1rem; }
.center { text-align: center; }
.italic { font-style: italic; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: .75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Campo trampa anti-bots */
.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

/* Aparición al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.section { padding: 3.5rem 0; background: #fff; }
.section--gray { background: var(--g50); }

.section-title { margin-bottom: 2rem; text-align: center; }
.section-title h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.section-title p { margin: .5rem auto 0; max-width: 36rem; font-size: .875rem; color: var(--g500); }
.section-title__rule { display: block; width: 4rem; height: 4px; margin: .75rem auto 0; border-radius: 99px; background: var(--brand); }
.section-title__rule--afa { background: var(--afa); }
.section-title__back { display: inline-block; margin-top: .75rem; font-size: .875rem; font-weight: 600; color: var(--brand); }
.section-title__back:hover { text-decoration: underline; }
.section-title--left { text-align: left; }
.section-title--left .section-title__rule { margin-inline: 0; }

.prose { font-size: .9375rem; line-height: 1.7; color: var(--g600); }
.center-cta { margin-top: 2.5rem; text-align: center; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border: 0; border-radius: 99px; cursor: pointer;
  font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn--sm { padding: .5rem 1rem; font-size: .8125rem; }
.btn--block { display: flex; width: 100%; }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-dark); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-soft); }
.btn--afa { background: var(--afa); color: #fff; }
.btn--afa:hover { background: var(--afa-dark); }
.btn--outline { border: 1px solid var(--g300); background: #fff; color: var(--ink); }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--outline-ink { border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.btn--outline-ink:hover { background: var(--ink); color: #fff; }
.btn--ghost { border: 1px solid var(--g200); background: #fff; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.btn--ghost:hover { background: var(--g50); }
.btn[disabled], .btn.is-disabled { background: var(--g200); color: var(--g400); cursor: not-allowed; }

.icon-btn {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: 99px; background: transparent; color: var(--g400); cursor: pointer;
}
.icon-btn:hover { color: var(--ink); background: var(--g100); }

.link-brand {
  display: inline-flex; align-items: center; gap: .375rem; margin-top: .5rem;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: .875rem; font-weight: 600; color: var(--brand);
}
.link-brand:hover { text-decoration: underline; }

/* ── Badges, chips y swatches ─────────────────────────────────────────────── */
.badge {
  position: absolute; top: .5rem; z-index: 2;
  padding: .125rem .5rem; border-radius: 99px;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; color: #fff;
}
.badge--brand { left: .5rem; background: var(--brand); }
.badge--ink { right: .5rem; background: var(--ink); }
.badge--inline { position: static; padding: .25rem .625rem; font-size: .875rem; }

.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .3rem .7rem; border: 1px solid var(--g300); border-radius: 10px;
  font-size: .8125rem; font-weight: 600; cursor: pointer; background: #fff;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover { border-color: var(--brand); }
.chip.is-on { border-color: var(--brand); background: var(--brand); color: #fff; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; }

.swatch {
  width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 99px;
  border: 1px solid rgba(0, 0, 0, .15); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.swatch:hover { border-color: rgba(0, 0, 0, .4); }
.swatch.is-active { border-color: var(--brand); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-ring); }
.swatch--xs { width: 1rem; height: 1rem; }
.swatch--lg { width: 2.5rem; height: 2.5rem; }
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatches--sm { gap: .375rem; margin-top: .75rem; }

.tag { border: 1px solid var(--g200); border-radius: 6px; padding: .1rem .375rem; font-size: .75rem; color: var(--g500); }

/* ── Barra de promo ───────────────────────────────────────────────────────── */
.topbar { background: var(--brand); color: #fff; font-size: .6875rem; font-weight: 600; letter-spacing: .03em; }
.topbar__inner { padding-block: .375rem; text-align: center; text-transform: uppercase; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.site-header { background: #fff; border-bottom: 1px solid var(--g100); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-block: 1rem; }

.logo img { height: 44px; width: auto; }

/* En móvil el buscador pasa a una fila propia debajo del logo: sigue siendo
   usable (antes estaba oculto y no se podía buscar desde el teléfono). */
.searchbox {
  display: flex; order: 3; flex: 1 0 100%; max-width: none; margin-inline: auto; position: relative;
  align-items: center; gap: .5rem;
  border: 1px solid var(--g200); border-radius: 99px; background: var(--g50); padding: .5rem 1rem;
}
.searchbox:focus-within { border-color: var(--brand); background: #fff; }
.searchbox__icon { color: var(--g400); flex: none; }
.searchbox input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .875rem;
}
.searchbox input::placeholder { color: var(--g400); }
.searchbox__go {
  border: 0; border-radius: 99px; padding: .35rem .9rem; cursor: pointer;
  background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700; text-transform: uppercase;
}
.searchbox__go:hover { background: var(--brand-dark); }

.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.account { display: none; align-items: center; gap: .375rem; font-size: .875rem; color: var(--ink-soft); }
.account:hover { color: var(--brand); }
.account span { line-height: 1.15; }
.account small { display: block; font-size: .6875rem; color: var(--g400); }

.cart-btn { position: relative; border: 0; background: none; color: var(--ink-soft); cursor: pointer; display: flex; }
.cart-btn:hover { color: var(--brand); }
.cart-btn__count {
  position: absolute; top: -.5rem; right: -.5rem;
  display: grid; place-items: center; min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem;
  border-radius: 99px; background: var(--brand); color: #fff; font-size: .625rem; font-weight: 700;
}

/* ── Navegación ───────────────────────────────────────────────────────────── */
.mainnav { position: sticky; top: 0; z-index: 40; background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }

.nav-list { display: none; align-items: center; gap: .25rem; }
.nav-item { position: relative; }
.nav-item > a {
  display: flex; align-items: center; gap: .25rem; white-space: nowrap;
  padding: .75rem 1rem; font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: rgba(255, 255, 255, .9);
  transition: background-color .15s, color .15s;
}
.nav-item > a:hover, .nav-item > a[aria-current] { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-item__chevron { opacity: .7; }

.dropdown {
  position: absolute; left: 0; top: 100%; z-index: 50; min-width: 220px;
  visibility: hidden; opacity: 0; transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-item.has-sub:hover .dropdown,
.nav-item.has-sub:focus-within .dropdown { visibility: visible; opacity: 1; transform: none; }
.dropdown ul {
  border: 1px solid var(--g100); border-radius: 0 0 var(--radius) var(--radius);
  background: #fff; color: var(--ink); padding: .5rem 0; box-shadow: var(--shadow-lg);
}
.dropdown a {
  display: block; padding: .5rem 1rem; font-size: .875rem; font-weight: 500; color: var(--ink-soft);
  transition: background-color .15s, color .15s;
}
.dropdown a:hover { background: var(--g50); color: var(--brand); }

.nav-toggle {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .875rem 0; border: 0; background: none; cursor: pointer;
  color: #fff; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.nav-toggle__bars { display: grid; gap: 5px; }
.nav-toggle__bars span { display: block; width: 24px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile { border-top: 1px solid rgba(255, 255, 255, .1); max-height: 70vh; overflow-y: auto; }
.nav-mobile > ul > li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.nav-mobile__row { display: flex; align-items: center; justify-content: space-between; }
.nav-mobile__row a {
  flex: 1; padding: .875rem 0; font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: rgba(255, 255, 255, .9);
}
.nav-mobile__row button { border: 0; background: none; color: #fff; padding: .75rem; cursor: pointer; }
.nav-mobile__row button[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-mobile__row button svg { transition: transform .2s; }
.nav-mobile__sub { margin: 0 0 .5rem .5rem; padding-left: .75rem; border-left: 1px solid rgba(255, 255, 255, .15); }
.nav-mobile__sub a { display: block; padding: .625rem 0; font-size: .875rem; color: rgba(255, 255, 255, .7); }
.nav-mobile__sub a:hover { color: #fff; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--ink); }
.hero__stage { position: relative; height: 300px; }
.hero__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1s; }
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide.is-active img { animation: kenburns 7s ease-out both; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14); } }

.hero__overlay {
  position: absolute; inset: 0; display: flex; align-items: center;
  background: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25) 50%, transparent);
}
/* padding-right: deja libre la zona de la flecha para que no tape el texto */
.hero__copy { max-width: 32rem; padding-right: 3rem; color: #fff; }
.hero__copy h2 { font-size: 1.875rem; font-weight: 800; line-height: 1.1; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.hero__copy p { margin-top: .75rem; font-size: .875rem; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.hero__copy .btn { margin-top: 1.25rem; }

.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  display: grid; place-items: center; padding: .625rem; border: 0; border-radius: 99px;
  background: rgba(0, 0, 0, .3); color: #fff; cursor: pointer; backdrop-filter: blur(4px);
}
.hero__arrow:hover { background: rgba(0, 0, 0, .5); }
.hero__arrow--prev { left: .75rem; }
.hero__arrow--next { right: .75rem; }

.hero__dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: .5rem; }
.hero__dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, .6); cursor: pointer; transition: width .25s, background-color .25s;
}
.hero__dots button:hover { background: #fff; }
.hero__dots button.is-active { width: 28px; background: var(--brand); }

/* ── Garantías ────────────────────────────────────────────────────────────── */
.trust { border-bottom: 1px solid var(--g100); background: #fff; }
.trust__grid { display: grid; gap: 1.5rem; padding-block: 2rem; }
.trust__item { display: flex; align-items: center; gap: 1rem; }
.trust__icon {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem;
  border-radius: 99px; background: var(--brand-soft); color: var(--brand);
}
.trust__item h3 { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.trust__item p { font-size: .75rem; color: var(--g500); }

/* ── #FreeToRide ──────────────────────────────────────────────────────────── */
.freetoride {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding-block: 6rem; text-align: center;
  background-image: url(/sections/freetoride.jpg);
  background-size: cover; background-position: 50% 100%; background-attachment: fixed;
}
.freetoride::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.freetoride h2 {
  position: relative; font-size: 2.25rem; font-weight: 800; letter-spacing: -.02em;
  color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

/* ── Tarjetas de producto ─────────────────────────────────────────────────── */
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }

.product-card {
  display: flex; flex-direction: column; height: 100%;
  padding: .75rem; border: 1px solid var(--g100); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .2s;
}
.product-card:hover { box-shadow: var(--shadow-lg); }

.product-card__media {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: 10px; background: #fff;
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: contain; padding: .5rem;
  transition: transform .3s;
}
.product-card:hover .product-card__media img { transform: scale(1.05); }

.product-card__body { display: flex; flex: 1; flex-direction: column; margin-top: .75rem; }
.product-card__cat { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--g400); }
.product-card__title {
  margin-top: .125rem; font-size: .875rem; font-weight: 600; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card__title:hover { color: var(--brand); }
.product-card__color { margin-top: .25rem; font-size: .75rem; color: var(--g500); }
.product-card__color span { font-weight: 500; color: var(--ink-soft); }
.product-card__price { display: flex; align-items: baseline; gap: .5rem; margin-top: .5rem; }
.product-card .btn { margin-top: auto; }
.product-card__body > .btn { margin-top: .75rem; }

.price-old { font-size: .875rem; color: var(--g400); text-decoration: line-through; }
.price-old--lg { font-size: 1.25rem; }
.price-now { font-size: 1.125rem; font-weight: 800; color: var(--brand); }
.price-now--lg { font-size: 2.25rem; }

/* ── Tarjetas de categoría ────────────────────────────────────────────────── */
.cat-tiles { padding: 1rem 0; background: #fff; }
.cat-tiles__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.cat-tile {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--ink);
  transition: box-shadow .2s;
}
.cat-tile img:first-child {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .55; transition: transform .5s, opacity .3s;
}
.cat-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); }
.cat-tile:hover img:first-child { transform: scale(1.1); opacity: .7; }
.cat-tile:hover { box-shadow: inset 0 0 0 2px var(--brand); }
.cat-tile.is-active { box-shadow: inset 0 0 0 4px var(--brand); }
.cat-tile__label {
  position: relative; z-index: 2; display: flex; align-items: center; gap: .5rem;
  font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.cat-tile__label img { width: 32px; height: 32px; opacity: .9; }

/* ── Catálogo con filtros ─────────────────────────────────────────────────── */
.catalog { display: grid; gap: 2rem; }
.catalog__aside { display: none; }
.catalog__aside .filters { position: sticky; top: calc(var(--header-h) + 1rem); }

.catalog__bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.catalog__count { font-size: .875rem; color: var(--g500); }
.catalog__sort { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--g500); }
.catalog__sort select {
  border: 1px solid var(--g200); border-radius: 99px; padding: .4rem 1.75rem .4rem .75rem;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2'><path d='m4 6 4 4 4-4'/></svg>") no-repeat right .5rem center;
  font-size: .8125rem; font-weight: 600; color: var(--ink); appearance: none; cursor: pointer;
}

.filters {
  border: 1px solid var(--g100); border-radius: var(--radius-lg); background: #fff; padding: 1.25rem;
}
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.filters__head h3 { font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.filters__clear { font-size: .75rem; font-weight: 600; color: var(--brand); }
.filters__clear:hover { text-decoration: underline; }
.filters__group + .filters__group { margin-top: 1.5rem; }
.filters__group legend { margin-bottom: .5rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--g500); }
.filters__submit { margin-top: 1.5rem; }

.color-list { max-height: 14rem; overflow-y: auto; padding-right: .25rem; display: grid; gap: .375rem; }
.color-opt { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--g600); cursor: pointer; }
.color-opt.is-on { font-weight: 600; color: var(--ink); }
.color-opt input { accent-color: var(--brand); }

/* Doble slider de precio sobre un mismo riel */
.range { position: relative; height: 22px; margin-bottom: .5rem; }
.range__track, .range__fill {
  position: absolute; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 99px; pointer-events: none;
}
.range__track { left: 0; width: 100%; background: var(--g200); }
.range__fill { background: var(--brand); }
.range input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 22px; margin: 0;
  background: transparent; pointer-events: none; appearance: none; -webkit-appearance: none;
}
.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 99px; background: var(--brand);
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); cursor: pointer;
}
.range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 99px; background: var(--brand);
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); cursor: pointer;
}
.range__labels { display: flex; justify-content: space-between; font-size: .75rem; font-weight: 500; }

.empty {
  border: 1px dashed var(--g300); border-radius: var(--radius-lg); background: #fff;
  padding: 4rem 1.5rem; text-align: center;
}
.empty > p:first-of-type { font-size: 1.125rem; font-weight: 600; }
.empty__sub { margin-top: .5rem; font-size: .875rem; color: var(--g500); }
.empty .btn { margin-top: 1rem; }
.empty__chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.empty__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }
.empty--404 { border: 0; background: transparent; }
.empty__code { font-size: 4rem; font-weight: 800; color: var(--brand); line-height: 1; }

/* ── Producto destacado (bloque oscuro) ───────────────────────────────────── */
.featured {
  position: relative; overflow: hidden; padding-block: 4rem; color: #fff;
  background: linear-gradient(135deg, #0d3b2e, #0a1f1a 55%, #000);
}
.featured__grid { display: grid; gap: 2.5rem; align-items: center; }
.featured__eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--brand); }
.featured h2 { margin-top: .5rem; font-size: 1.875rem; font-weight: 800; }
.featured__sub { margin-top: .25rem; color: rgba(255, 255, 255, .5); }
.featured__specs { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.featured__specs > div { border-left: 2px solid var(--brand); padding-left: .75rem; }
.featured__spec-k { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.featured__spec-v { margin-top: .125rem; font-size: .875rem; color: rgba(255, 255, 255, .6); }
.featured__cta { margin-top: 2rem; }
.featured__art { display: flex; justify-content: center; }
.featured__art img { max-height: 360px; width: auto; object-fit: contain; padding: 1.5rem; border-radius: var(--radius-xl); background: rgba(255, 255, 255, .05); }

/* ── Contacto ─────────────────────────────────────────────────────────────── */
.contact { position: relative; overflow: hidden; padding-block: 4rem; color: #fff; background: var(--ink); }
.contact__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, .85), rgba(0, 0, 0, .7), rgba(0, 0, 0, .5));
}
.contact__grid { position: relative; z-index: 2; display: grid; gap: 2.5rem; }
.contact__form-wrap { border-radius: var(--radius-xl); background: #fff; color: var(--ink); padding: 1.5rem; box-shadow: var(--shadow-lg); }
.contact-form { display: grid; gap: .75rem; }
.contact-form input, .contact-form textarea {
  width: 100%; border: 1px solid var(--g200); border-radius: 10px; padding: .75rem 1rem;
  font: inherit; font-size: .875rem; outline: 0;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--brand); }
.contact-form textarea { resize: vertical; }

/* El widget de Google trae su propio tamaño: solo lo centramos y lo dejamos
   encogerse en pantallas angostas. */
.captcha-box { display: flex; justify-content: center; }
.captcha-box .g-recaptcha { transform-origin: center; }

.form-error { border-radius: 10px; background: var(--brand-soft); color: var(--brand); padding: .625rem .875rem; font-size: .8125rem; font-weight: 600; }
.form-ok { padding: 2.5rem 0; text-align: center; }
.form-ok__check { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto; border-radius: 99px; background: #dcfce7; color: var(--green); font-size: 1.75rem; }
.form-ok__title { margin-top: 1rem; font-size: 1.125rem; font-weight: 700; }
.form-ok__sub { margin-top: .25rem; font-size: .875rem; color: var(--g500); }

.contact__info { display: flex; flex-direction: column; justify-content: center; }
.contact__eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--brand); }
.contact__info h2 { margin-top: .5rem; font-size: 1.875rem; font-weight: 800; }
.contact__link { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1rem; font-size: 1.125rem; font-weight: 600; }
.contact__link:hover { color: var(--brand); }
.contact__bubble { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 99px; background: var(--brand); flex: none; }
.contact__address { margin-top: 1.5rem; font-size: .875rem; color: rgba(255, 255, 255, .6); }

/* ── Promos bancarias ─────────────────────────────────────────────────────── */
.promos { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.promos::-webkit-scrollbar { display: none; }
.promos { scrollbar-width: none; }
.promo {
  flex: none; width: 11rem; scroll-snap-align: start; overflow: hidden;
  border: 1px solid var(--g100); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .2s;
}
.promo:hover { transform: translateY(-4px); }
.promo img { aspect-ratio: 1; width: 100%; object-fit: cover; }

/* ── Newsletter ───────────────────────────────────────────────────────────── */
.newsletter { padding-block: 3rem; background: var(--g100); }
.newsletter__grid { display: grid; gap: 1.5rem; align-items: center; }
.newsletter h2 { font-size: 1.5rem; font-weight: 800; }
.newsletter p { margin-top: .5rem; font-size: .875rem; color: var(--g500); }
.newsletter__form { display: flex; gap: .5rem; }
.newsletter__form input {
  width: 100%; border: 1px solid var(--g300); border-radius: 99px; background: #fff;
  padding: .75rem 1.25rem; font: inherit; font-size: .875rem; outline: 0;
}
.newsletter__form input:focus { border-color: var(--brand); }
.newsletter__form .btn { flex: none; }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.site-footer { background: #000; color: #fff; }
.footer-brand { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-brand__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .75rem; padding-block: 1.5rem; }
.footer-logo { font-size: 1.875rem; font-weight: 900; font-style: italic; letter-spacing: -.02em; }
.footer-contact { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.footer-contact a { display: flex; align-items: center; gap: .375rem; font-size: .875rem; color: rgba(255, 255, 255, .7); }
.footer-contact a:hover { color: var(--brand); }
.footer-sep { width: 1px; height: 1rem; background: rgba(255, 255, 255, .2); }

.footer-cols { display: grid; gap: 2rem; padding-block: 3rem; }
.footer-cols h3 { margin-bottom: .75rem; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.footer-cols li + li { margin-top: .5rem; }
.footer-cols a { font-size: .875rem; color: rgba(255, 255, 255, .6); transition: color .15s; }
.footer-cols a:hover { color: var(--brand); }

.socials { display: flex; gap: .5rem; }
.socials a {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 99px;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); transition: background-color .15s, color .15s;
}
.socials a:hover { background: var(--brand); color: #fff; }
.fiscal { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.fiscal img { border-radius: 4px; background: #fff; }
.footer-pay { border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-pay__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
.footer-pay span { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .5); }
.pay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pay-logo { display: block; border-radius: 5px; }
/* Los logos oficiales vienen con proporciones muy distintas entre sí, así que se
   los mete en la misma caja blanca que a los dibujados y se los escala adentro
   con object-fit: contain. Sin esto, uno bien apaisado (MODO) queda gigante al
   lado de los demás. */
/* Casi sin padding: los PNG oficiales ya traen su propio margen interno y, al
   escalarse con `contain`, cualquier relleno extra los deja diminutos. */
.pay-logo--img {
  object-fit: contain; border-radius: 5px; background: #fff;
  padding: 1px; border: 1px solid #e3e6ec;
}

.footer-legal { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 1rem; }
.footer-legal p { text-align: center; font-size: .75rem; color: rgba(255, 255, 255, .4); }

/* ── Carrito lateral ──────────────────────────────────────────────────────── */
.cart-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .5); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }

.cart-drawer {
  position: fixed; right: 0; top: 0; z-index: 70;
  display: flex; flex-direction: column; width: 100%; max-width: 28rem; height: 100%;
  background: #fff; box-shadow: var(--shadow-lg); animation: slide-in .25s ease-out;
}
@keyframes slide-in { from { transform: translateX(100%); } }

.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--g100); padding: 1rem 1.25rem; }
.cart-drawer__head h2 { font-size: 1.125rem; font-weight: 800; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.cart-drawer__foot { border-top: 1px solid var(--g100); padding: 1rem 1.25rem; }
.cart-drawer__foot .btn { margin-top: .75rem; }

.cart-note { border-radius: 10px; padding: .5rem .75rem; font-size: .75rem; font-weight: 600; margin-bottom: 1rem; }
.cart-note--ok { background: #f0fdf4; color: #15803d; }
.cart-note--min { background: var(--brand-soft); color: var(--ink-soft); font-weight: 400; }
.cart-note--min strong { color: var(--brand); }

.cart-line { display: flex; gap: .75rem; }
.cart-line + .cart-line { margin-top: 1rem; }
.cart-line__img { flex: none; width: 5rem; height: 5rem; overflow: hidden; border: 1px solid var(--g100); border-radius: 10px; background: #fff; }
.cart-line__img img { width: 100%; height: 100%; object-fit: contain; padding: .25rem; }
.cart-line__t { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.cart-line__v { font-size: .75rem; color: var(--g500); }
.cart-line__p { margin-top: .125rem; font-size: .875rem; font-weight: 700; color: var(--brand); }
.cart-line__ctrl { display: flex; align-items: center; gap: .5rem; margin-top: .375rem; }
.qty { display: flex; align-items: center; border: 1px solid var(--g200); border-radius: 99px; }
.qty button { border: 0; background: none; padding: .25rem .625rem; color: var(--g500); cursor: pointer; }
.qty button:hover { color: var(--ink); }
.qty span { min-width: 1.5rem; text-align: center; font-size: .875rem; }
.cart-line__rm { border: 0; background: none; padding: 0; font-size: .75rem; color: var(--g400); cursor: pointer; }
.cart-line__rm:hover { color: var(--brand); }
.cart-clear { margin-top: 1rem; border: 0; background: none; padding: 0; font-size: .75rem; color: var(--g400); cursor: pointer; }
.cart-clear:hover { color: var(--brand); }

.cart-totals { display: grid; gap: .375rem; font-size: .875rem; }
.cart-totals > div { display: flex; justify-content: space-between; color: var(--g600); }
.cart-totals dd { margin: 0; }
.cart-totals .free { font-weight: 600; color: var(--green); }
.cart-totals__total { border-top: 1px solid var(--g100); padding-top: .5rem; font-size: 1rem; font-weight: 800; color: var(--ink); }

.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; height: 100%; text-align: center; color: var(--g500); }
.cart-keep { display: block; width: 100%; margin-top: .5rem; border: 0; background: none; font-size: .875rem; color: var(--g500); cursor: pointer; }
.cart-keep:hover { color: var(--ink); }

/* ── Chat ─────────────────────────────────────────────────────────────────── */
.chat-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80;
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border: 0; border-radius: 99px; background: var(--brand); color: #fff;
  box-shadow: var(--shadow-lg); cursor: pointer; transition: transform .2s;
}
.chat-fab:hover { transform: scale(1.05); }

.chat-panel {
  position: fixed; right: 1.25rem; bottom: 6rem; z-index: 80;
  display: flex; flex-direction: column; width: 92vw; max-width: 24rem; height: 520px; max-height: 70vh;
  overflow: hidden; border: 1px solid var(--g200); border-radius: var(--radius-xl);
  background: #fff; box-shadow: var(--shadow-lg);
}
.chat-panel__head { display: flex; align-items: center; gap: .75rem; background: var(--ink); color: #fff; padding: .75rem 1rem; }
.chat-panel__head p { font-size: .875rem; font-weight: 700; line-height: 1.2; }
.chat-panel__head small { font-size: .6875rem; color: rgba(255, 255, 255, .6); }
.chat-panel__head .icon-btn { margin-left: auto; color: rgba(255, 255, 255, .7); }
.chat-panel__head .icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.chat-avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 99px; background: var(--brand); flex: none; }

.chat-log { flex: 1; overflow-y: auto; background: var(--g50); padding: .75rem; display: grid; gap: .75rem; align-content: start; }
.chat-msg { max-width: 85%; padding: .5rem .875rem; border-radius: 16px; font-size: .875rem; }
.chat-msg--bot { justify-self: start; border: 1px solid var(--g100); border-bottom-left-radius: 4px; background: #fff; }
.chat-msg--user { justify-self: end; border-bottom-right-radius: 4px; background: var(--brand); color: #fff; }
.chat-agent {
  display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .5rem;
  border-radius: 99px; background: #16a34a; color: #fff; padding: .375rem .75rem; font-size: .75rem; font-weight: 700;
}
.chat-agent:hover { background: #15803d; }
.chat-quick { display: flex; flex-wrap: wrap; gap: .375rem; background: var(--g50); padding: 0 .75rem .75rem; }
.chat-quick button {
  border: 1px solid var(--brand-ring); border-radius: 99px; background: #fff;
  padding: .25rem .625rem; font-size: .75rem; font-weight: 500; color: var(--brand); cursor: pointer;
}
.chat-quick button:hover { background: var(--brand-soft); }
.chat-input { display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--g100); padding: .625rem; }
.chat-input input {
  flex: 1; min-width: 0; border: 1px solid var(--g200); border-radius: 99px; background: var(--g50);
  padding: .5rem 1rem; font: inherit; font-size: .875rem; outline: 0;
}
.chat-input input:focus { border-color: var(--brand); }
.chat-input button { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border: 0; border-radius: 99px; background: var(--brand); color: #fff; cursor: pointer; }
.chat-input button:hover { background: var(--brand-dark); }

/* ── Encabezado de página interior ────────────────────────────────────────── */
.page-head { background: var(--ink); color: #fff; padding-block: 3rem; }
.page-head h1 { font-size: 1.875rem; font-weight: 800; }
.page-head > .container > p { margin-top: .5rem; color: rgba(255, 255, 255, .7); }

.crumbs { margin-bottom: 1.5rem; font-size: .75rem; color: var(--g500); }
.crumbs a:hover { color: var(--brand); }
.crumbs span { margin-inline: .375rem; }
.crumbs strong { font-weight: 400; color: var(--ink); }
.crumbs--light { margin-bottom: .5rem; color: rgba(255, 255, 255, .6); }
.crumbs--light strong { color: #fff; }

/* ── Ficha de producto ────────────────────────────────────────────────────── */
.product { padding-block: 2rem; }
.product__top { display: grid; gap: 2.5rem; }

.gallery__main {
  position: relative; display: block; width: 100%; max-width: 300px; margin-inline: auto;
  aspect-ratio: 1; overflow: hidden; border: 1px solid var(--g100); border-radius: var(--radius-xl);
  background: #fff; cursor: zoom-in; padding: 0;
}
.gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.gallery__zoom {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .25rem;
  border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff;
  padding: .25rem .625rem; font-size: .75rem; font-weight: 600;
}
.gallery__thumbs { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.thumb {
  flex: none; width: 5rem; height: 5rem; overflow: hidden; padding: 0;
  border: 2px solid var(--g200); border-radius: 10px; background: #fff; cursor: pointer;
}
.thumb:hover { border-color: var(--g400); }
.thumb.is-active { border-color: var(--brand); }
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: .25rem; }

.product__cat { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--g400); }
.product__info h1 { margin-top: .25rem; font-size: 1.875rem; font-weight: 800; }
.product__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .625rem; margin-top: 1rem; }
.product__note { margin-top: .375rem; font-size: .875rem; color: var(--ink-soft); }
.product__block { margin-top: 1.5rem; }
.product__label { margin-bottom: .5rem; font-size: .875rem; font-weight: 600; }
.product__label span { font-weight: 400; color: var(--g500); }

.perks { margin-top: 1rem; display: grid; gap: .375rem; font-size: .875rem; color: var(--g600); }
.perks li { display: flex; align-items: center; gap: .5rem; }
.perks svg { color: var(--brand); flex: none; }

.sizes { display: flex; flex-wrap: wrap; gap: .5rem; }
.size {
  min-width: 3rem; padding: .5rem .75rem; border: 1px solid var(--g300); border-radius: 10px;
  background: #fff; font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.size:hover:not(.is-out) { border-color: var(--brand); }
.size.is-selected { border-color: var(--brand); background: var(--brand); color: #fff; }
.size.is-out { border-color: var(--g200); color: var(--g300); text-decoration: line-through; cursor: not-allowed; }
.sizes__hint { margin-top: .375rem; font-size: .75rem; color: var(--g400); }
.sizes__hint.is-error { font-weight: 700; color: var(--brand); }

.product__actions { display: grid; gap: .75rem; margin-top: 2rem; }
.product__actions .btn { padding-block: .9rem; }

.product__assurances { margin-top: 2rem; border-top: 1px solid var(--g100); padding-top: 1.5rem; display: grid; gap: .75rem; }
.assurance { display: flex; align-items: flex-start; gap: .75rem; border: 1px solid var(--g100); border-radius: var(--radius); background: rgba(249, 250, 251, .6); padding: .875rem; }
.assurance__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 99px; background: var(--brand-soft); color: var(--brand); }
.assurance__t { font-size: .875rem; font-weight: 700; }
.assurance__d { font-size: .75rem; color: var(--g500); }

.product__detail { margin-top: 3.5rem; }
.product__detail h2 { font-size: 1.25rem; font-weight: 800; }
.product__subtitle { margin-top: 1.5rem; font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.checklist { margin-top: 1rem; display: grid; gap: .375rem; font-size: .875rem; color: var(--g600); }
.checklist li::before { content: "✓"; color: var(--brand); margin-right: .5rem; font-weight: 700; }
.spec-table { margin-top: 1rem; font-size: .875rem; }
.spec-table th, .spec-table td { border-bottom: 1px solid var(--g100); padding: .5rem 1rem .5rem 0; text-align: left; }
.spec-table th { font-weight: 600; width: 12rem; }
.spec-table td { color: var(--g600); }

.related { margin-top: 3.5rem; }

.countdown { margin-top: .75rem; border: 1px solid var(--brand-ring); border-radius: var(--radius); background: var(--brand-soft); padding: .75rem; }
.countdown > p { margin-bottom: .5rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }
.countdown__boxes { display: flex; align-items: center; gap: .5rem; }
.countdown__boxes span { display: flex; flex-direction: column; align-items: center; }
.countdown__boxes b {
  display: grid; place-items: center; min-width: 44px; border-radius: 10px;
  background: var(--ink); color: #fff; padding: .375rem .5rem;
  font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.countdown__boxes small { margin-top: .25rem; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--g500); }
.countdown__boxes i { font-style: normal; font-size: 1.125rem; font-weight: 700; }

/* Zoom de imagen */
.zoom { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .9); padding: 1rem; }
.zoom img { max-width: 100%; max-height: 100%; object-fit: contain; }
.zoom__close {
  position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
}
.zoom__close:hover { background: rgba(255, 255, 255, .2); }

/* Modal de financiación */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0, 0, 0, .5); padding: 1rem; }
.modal__box { width: 100%; max-width: 28rem; border-radius: var(--radius-xl); background: #fff; padding: 1.5rem; box-shadow: var(--shadow-lg); }
.modal__head { display: flex; align-items: center; justify-content: space-between; }
.modal__head h3 { font-size: 1.125rem; font-weight: 800; }
.modal__sub { margin-top: .25rem; font-size: .875rem; color: var(--g500); }
.modal__label { display: block; margin-top: 1rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--g500); }
.modal select {
  width: 100%; margin-top: .375rem; border: 1px solid var(--g200); border-radius: 10px;
  padding: .625rem .75rem; font: inherit; font-size: .875rem; background: #fff; outline: 0;
}
.modal select:focus { border-color: var(--brand); }
.modal__fine { margin-top: .75rem; font-size: .75rem; color: var(--g400); }
.fin-result { margin-top: 1rem; border: 1px solid var(--brand-ring); border-radius: var(--radius); background: var(--brand-soft); padding: 1rem; }
.fin-result__name { font-size: .875rem; font-weight: 700; }
.fin-result__note { font-size: .75rem; color: var(--brand); }
.fin-final { display: flex; align-items: baseline; justify-content: space-between; margin-top: .75rem; }
.fin-final span:first-child { font-size: .875rem; color: var(--g500); }
.fin-final span:last-child { font-size: 1.5rem; font-weight: 800; color: var(--brand); }
.fin-list { margin-top: .75rem; }
.fin-list li { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; border-top: 1px solid rgba(228, 3, 46, .1); }
.fin-list li:first-child { border-top: 0; }
.fin-list b { font-size: 1rem; font-weight: 800; color: var(--brand); }
.fin-list small { font-weight: 500; color: var(--g400); }

/* ── AFA ──────────────────────────────────────────────────────────────────── */
.afa-banner img { width: 100%; object-fit: cover; }
.afa-intro { display: grid; gap: 2.5rem; align-items: center; }
.afa-eyebrow { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--afa); }
.afa-intro h1 { margin-top: .75rem; font-size: 1.875rem; font-weight: 800; line-height: 1.2; }
.afa-intro .prose { margin-top: 1rem; }
.afa-list { margin-top: 1rem; display: grid; gap: .75rem; color: var(--g600); font-size: .9375rem; }
.afa-list li { position: relative; padding-left: 1rem; }
.afa-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 99px; background: var(--afa); }
.afa-list strong { color: var(--ink); }
.afa-claim { margin-top: 1rem; font-weight: 600; }
.afa-intro .btn { margin-top: 1.5rem; }
.afa-art img { border-radius: var(--radius-xl); }
.card-grid--narrow { max-width: 60rem; margin-inline: auto; }

/* ── Nosotros ─────────────────────────────────────────────────────────────── */
.historia { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.historia__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .25; }
.historia::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(17, 20, 24, .8), rgba(17, 20, 24, .7), var(--ink));
}
.historia__inner { position: relative; z-index: 2; padding-block: 4rem; }
.historia h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -.02em; }
.historia__lead { margin-top: 1rem; max-width: 48rem; color: rgba(255, 255, 255, .8); }
.historia__text { margin-top: 1rem; max-width: 48rem; display: grid; gap: .75rem; font-size: .875rem; line-height: 1.7; color: rgba(255, 255, 255, .7); }
.historia__text strong { color: #fff; }
.historia__hash { margin-top: 1.25rem; font-size: 1.5rem; font-weight: 800; color: var(--brand); }
.historia__cols { margin-top: 3rem; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 2.5rem; display: grid; gap: 2.5rem; }
.historia__cols h2 { font-size: 1.25rem; font-weight: 800; }
.historia__cols > div > p { margin-top: 1rem; font-size: .875rem; line-height: 1.7; color: rgba(255, 255, 255, .7); }
.valores { margin-top: 1rem; display: grid; gap: .75rem; }
.valores__t { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.valores__d { font-size: .875rem; color: rgba(255, 255, 255, .6); }

.stats { position: relative; z-index: 2; transform: translateY(2.5rem); margin-bottom: -2.5rem; }
.stats__box { display: grid; overflow: hidden; border-radius: var(--radius-xl); background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); }
.stat { padding: 1.5rem; text-align: center; }
.stat--brand { background: var(--brand); color: #fff; }
.stat__n { font-size: 1.875rem; font-weight: 800; }
.stat__l { margin-top: .25rem; font-size: .875rem; color: var(--g500); }
.stat--brand .stat__l { color: rgba(255, 255, 255, .9); }

.marcas { padding-top: 6rem; }
.marcas h2 { font-size: 1.5rem; font-weight: 800; }
.marcas__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.5rem 3rem; margin-top: 2rem;
  font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; color: var(--g400);
}
.collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.collage img { height: 14rem; width: 100%; object-fit: cover; border-radius: var(--radius); }

/* ── Legales ──────────────────────────────────────────────────────────────── */
.legal { padding-block: 2.5rem; }
.legal__card { max-width: 48rem; margin-inline: auto; border: 1px solid var(--g100); border-radius: var(--radius-xl); background: #fff; padding: 1.5rem; box-shadow: var(--shadow-sm); }
.legal__card h1 { font-size: 1.5rem; font-weight: 800; }
.legal__intro { margin-top: .75rem; font-size: .875rem; color: var(--g500); }
.legal__body { margin-top: 1.5rem; }
.legal__body h2 { padding-top: 1rem; font-size: 1rem; font-weight: 700; }
.legal__body p { margin-top: .5rem; font-size: .875rem; line-height: 1.7; color: var(--g600); }
.legal__body ul { margin-top: .5rem; padding-left: 1.25rem; list-style: disc; display: grid; gap: .25rem; font-size: .875rem; line-height: 1.7; color: var(--g600); }
.legal__body .accent { color: var(--brand); font-weight: 600; }
.legal__foot { margin-top: 2rem; border-top: 1px solid var(--g100); padding-top: 1rem; font-size: .75rem; color: var(--g400); }
.legal--gray { background: var(--g50); }

/* ── Checkout ─────────────────────────────────────────────────────────────── */
.checkout { display: grid; gap: 2rem; }
.checkout__items { display: grid; gap: 1rem; align-content: start; }
.checkout__summary { border: 1px solid var(--g100); border-radius: var(--radius-lg); background: #fff; padding: 1.25rem; height: fit-content; }
.checkout__summary h2 { margin-bottom: .75rem; font-size: 1.125rem; font-weight: 800; }
.checkout__summary .btn { margin-top: .75rem; }
.checkout__hint { margin-top: .75rem; border-radius: 10px; background: var(--brand-soft); padding: .5rem .75rem; font-size: .8125rem; color: var(--ink-soft); }
.checkout__note { margin-top: 1rem; font-size: .75rem; color: var(--g500); }
.checkout-line { display: flex; gap: 1rem; border: 1px solid var(--g100); border-radius: var(--radius); background: #fff; padding: 1rem; }
.checkout-line__img { flex: none; width: 6rem; height: 6rem; overflow: hidden; border-radius: 10px; background: #fff; }
.checkout-line__img img { width: 100%; height: 100%; object-fit: contain; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .trust__grid { grid-template-columns: repeat(3, 1fr); }
  .hero__stage { height: 420px; }
  .hero__copy { padding-right: 0; }
  .hero__copy h2 { font-size: 3.75rem; }
  .hero__copy p { font-size: 1rem; }
  .freetoride h2 { font-size: 3.75rem; }
  .section-title h2 { font-size: 1.875rem; }
  .account { display: flex; }
  .footer-brand__inner, .footer-pay__inner { flex-direction: row; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .stats__box { grid-template-columns: repeat(3, 1fr); }
  .page-head h1 { font-size: 2.25rem; }
  .product__actions { grid-template-columns: 1fr 1fr; }
  .gallery__main { max-width: 420px; }
  .promos { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .promo { width: auto; }
  .afa-intro h1 { font-size: 2.25rem; }
  .historia h1 { font-size: 3rem; }
}

@media (min-width: 768px) {
  :root { --header-h: 48px; }
  .site-header__inner { flex-wrap: nowrap; }
  .searchbox { order: 0; flex: 1; max-width: 36rem; }
  .nav-list { display: flex; }
  .nav-toggle, .nav-mobile { display: none; }
  .cat-tiles__grid { grid-template-columns: repeat(3, 1fr); }
  .featured__grid, .contact__grid, .afa-intro { grid-template-columns: repeat(2, 1fr); }
  .featured__specs { grid-template-columns: repeat(2, 1fr); }
  .newsletter__grid { grid-template-columns: repeat(2, 1fr); }
  .historia__cols { grid-template-columns: repeat(3, 1fr); }
  .collage { grid-template-columns: repeat(4, 1fr); }
  .product__top { grid-template-columns: repeat(2, 1fr); }
  .product__assurances { grid-template-columns: repeat(2, 1fr); }
  .checkout { grid-template-columns: 1fr 22rem; }
  .legal__card { padding: 2.5rem; }
}

@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .hero__stage { height: 560px; }
  .catalog { grid-template-columns: 240px 1fr; }
  .catalog__aside { display: block; }
  .catalog__filters-btn { display: none; }
  .gallery__main { max-width: none; }
  .product__detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
  .freetoride { background-attachment: fixed; }
}

/* En móvil el parallax se traba: se fija la imagen. */
@media (max-width: 1023px) {
  .freetoride { background-attachment: scroll; }
}

/* En pantallas chicas las flechas del hero tapaban el texto: se navega
   deslizando el dedo o con los puntos. */
@media (max-width: 639px) {
  .hero__arrow { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Stock agotado
   ══════════════════════════════════════════════════════════════════════════ */
.badge--out { left: .5rem; background: var(--g600); }

.product-card.is-sold-out .product-card__media img { filter: grayscale(1); opacity: .55; }
.product-card.is-sold-out .product-card__title { color: var(--g500); }
.product-card.is-sold-out .price-now { color: var(--g500); }

/* Color agotado: se cruza con una barra en diagonal.
   Va en DOS capas —una oscura gruesa abajo y una blanca fina arriba— para que
   se vea tanto sobre un swatch blanco como sobre uno negro. Con una sola capa
   negra, en los colores oscuros el tachado desaparecía y parecía disponible. */
.swatch.is-out { position: relative; opacity: .55; cursor: not-allowed; }
.swatch.is-out::before,
.swatch.is-out::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.swatch.is-out::before {
  background: linear-gradient(to top left,
    transparent calc(50% - 2.5px), rgba(0, 0, 0, .75) calc(50% - 2.5px),
    rgba(0, 0, 0, .75) calc(50% + 2.5px), transparent calc(50% + 2.5px));
}
.swatch.is-out::after {
  background: linear-gradient(to top left,
    transparent calc(50% - 1px), #fff calc(50% - 1px),
    #fff calc(50% + 1px), transparent calc(50% + 1px));
}
.swatch.is-out:hover { border-color: var(--g300); }
/* Un color agotado no se puede elegir: el botón va disabled. */
.swatch[disabled] { pointer-events: none; }

/* Aviso de pocas unidades. */
.stock-low {
  margin-top: .625rem; display: inline-block; border-radius: 8px;
  background: var(--brand-soft); padding: .375rem .625rem;
  font-size: .8125rem; font-weight: 700; color: var(--brand);
}

.product__label-out { font-weight: 700; color: var(--brand); }

/* ══════════════════════════════════════════════════════════════════════════
   Bloques de formulario (checkout, cuenta, panel)
   ══════════════════════════════════════════════════════════════════════════ */
.card-block {
  border: 1px solid var(--g100); border-radius: var(--radius-lg); background: #fff;
  padding: 1.25rem; margin: 0 0 1.25rem;
}
.card-block > legend, .card-block > h2 {
  padding: 0; margin-bottom: 1rem; font-size: 1rem; font-weight: 800; color: var(--ink);
}
fieldset.card-block { border: 1px solid var(--g100); }

.field-grid { display: grid; gap: 1rem; }
.field { margin: 0; display: grid; gap: .375rem; }
.field label { font-size: .8125rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--g200); border-radius: 10px; background: #fff;
  padding: .75rem 1rem; font: inherit; font-size: .875rem; outline: 0;
  transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.field input[readonly] { background: var(--g50); color: var(--g600); }
.field textarea { resize: vertical; }
.field small { font-size: .75rem; color: var(--g500); }

.form-error--wide { margin-bottom: 1.25rem; }
.form-note {
  border-radius: 10px; background: #ecfdf5; color: #047857;
  padding: .625rem .875rem; font-size: .8125rem; font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   Checkout
   ══════════════════════════════════════════════════════════════════════════ */
.checkout--form { align-items: start; }
.checkout__main { min-width: 0; }

.checkout__logged {
  margin-bottom: 1rem; border-radius: 10px; background: var(--g50);
  padding: .625rem .875rem; font-size: .8125rem; color: var(--g600);
}
.checkout__logged a { font-weight: 700; color: var(--brand); }
.checkout__logged a:hover { text-decoration: underline; }

.checkout-avisos {
  margin-bottom: 1.25rem; border: 1px solid #fcd34d; border-radius: var(--radius);
  background: #fffbeb; padding: .875rem 1rem; font-size: .8125rem; color: #92400e;
}
.checkout-avisos ul { margin: .5rem 0 0; padding-left: 1.125rem; list-style: disc; }
.checkout-avisos li + li { margin-top: .25rem; }

.checkout__fine { margin-top: 1rem; font-size: .75rem; color: var(--g500); }

/* Medios de pago */
.pay-methods { display: grid; gap: .625rem; }
.pay-method {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  border: 1px solid var(--g200); border-radius: var(--radius); background: #fff;
  padding: .875rem 1rem; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.pay-method:hover { border-color: var(--g300); }
.pay-method.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pay-method input { position: absolute; opacity: 0; width: 0; height: 0; }

.pay-method__mark {
  flex: none; width: 1.125rem; height: 1.125rem; border: 2px solid var(--g300);
  border-radius: 99px; transition: border-color .15s;
}
.pay-method.is-active .pay-method__mark {
  border-color: var(--brand); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 1rem var(--brand);
}

.pay-method__body { min-width: 0; }
.pay-method__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pay-method__name { font-size: .875rem; font-weight: 700; }
.pay-method__note { display: block; margin-top: .125rem; font-size: .75rem; color: var(--g500); }
.pay-method__logos { display: flex; align-items: center; gap: .25rem; }

.tag--pay { border-color: var(--green); color: var(--green); font-weight: 700; }
.tag--soon { border-color: var(--g300); color: var(--g400); }

/* Mercado Pago mientras no estén las keys. */
.pay-method.is-locked { background: var(--g50); cursor: default; opacity: .75; }
.pay-method.is-locked .pay-method__mark { border-style: dashed; }
.pay-method.is-locked .pay-logo { filter: grayscale(1); }

/* Resumen */
.checkout__summary--sticky { align-self: start; }
.cart-totals__off dt, .cart-totals__off dd { color: var(--green); font-weight: 600; }

.checkout__summary .checkout__items { gap: .625rem; margin-bottom: 1rem; }
.checkout__summary .checkout-line { gap: .75rem; padding: .625rem; }
.checkout__summary .checkout-line__img { width: 3.5rem; height: 3.5rem; }
.checkout__summary .cart-line__ctrl { margin-top: .375rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Ingreso y cuenta
   ══════════════════════════════════════════════════════════════════════════ */
.auth-box {
  max-width: 26rem; margin: 0 auto; border: 1px solid var(--g100);
  border-radius: var(--radius-lg); background: #fff; padding: 1.75rem; box-shadow: var(--shadow-sm);
}
.auth-form { display: grid; gap: 1rem; margin-top: 1rem; }
.auth-form__lead { font-size: .875rem; line-height: 1.6; color: var(--g600); text-align: center; }
.auth-code {
  text-align: center; font-size: 1.5rem !important; font-weight: 800;
  letter-spacing: .4em; text-indent: .4em;
}
.auth-resend { margin-top: 1rem; text-align: center; }
.auth-alt { margin-top: .5rem; text-align: center; font-size: .8125rem; color: var(--g500); }
.auth-alt a:hover { color: var(--brand); text-decoration: underline; }
.auth-fine { font-size: .75rem; color: var(--g500); text-align: center; }
.auth-fine a { font-weight: 600; color: var(--ink-soft); }
.auth-fine a:hover { color: var(--brand); }

.cuenta { display: grid; gap: 1.5rem; }
.cuenta__main { min-width: 0; }

.order-list { display: grid; gap: .75rem; }
.order-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem 1rem;
  border: 1px solid var(--g100); border-radius: var(--radius); background: #fff; padding: 1rem;
}
.order-row__id { font-weight: 800; color: var(--ink); }
.order-row__id:hover { color: var(--brand); }
.order-row__date { margin-top: .125rem; font-size: .75rem; color: var(--g500); }
.order-row__total { font-size: 1rem; font-weight: 800; }

.order-status {
  display: inline-block; border-radius: 99px; padding: .25rem .625rem;
  font-size: .75rem; font-weight: 700; background: var(--g100); color: var(--g600);
}
.order-status--pendiente  { background: #fef3c7; color: #92400e; }
.order-status--pagado     { background: #dcfce7; color: #166534; }
.order-status--preparando { background: #dbeafe; color: #1e40af; }
.order-status--enviado    { background: #e0e7ff; color: #3730a3; }
.order-status--entregado  { background: #dcfce7; color: #166534; }
.order-status--cancelado  { background: #fee2e2; color: #991b1b; }

/* ══════════════════════════════════════════════════════════════════════════
   Detalle del pedido
   ══════════════════════════════════════════════════════════════════════════ */
.order-detail { display: grid; gap: 1.5rem; align-items: start; }
.order-detail__main, .order-detail__side { min-width: 0; }

.order-items { display: grid; gap: .875rem; margin-bottom: 1.25rem; }
.order-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .875rem; }
.order-item__img { width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: 8px; background: var(--g50); }
.order-item__img img { width: 100%; height: 100%; object-fit: contain; }
.order-item__t { font-size: .875rem; font-weight: 600; }
.order-item__t:hover { color: var(--brand); }
.order-item__v, .order-item__q { margin-top: .125rem; font-size: .75rem; color: var(--g500); }
.order-item__p { font-size: .875rem; font-weight: 700; white-space: nowrap; }

.order-meta { font-size: .8125rem; line-height: 1.7; color: var(--g600); }
.order-meta--note { margin-top: .5rem; color: var(--g500); font-style: italic; }

/* Aviso de que el titular del pago tiene que coincidir con el comprador. */
.titular-aviso {
  margin-bottom: 1.25rem; border-radius: 10px; background: #fffbeb;
  padding: .75rem .875rem; font-size: .8125rem; line-height: 1.6; color: #92400e;
}
.titular-aviso--info { background: var(--g50); color: var(--g600); }
.titular-aviso strong, .titular-aviso b { color: inherit; }

/* QR de MODO en la pantalla del pedido. */
.qr-box { margin: 0 0 1.25rem; text-align: center; }
.qr-box img {
  display: inline-block; width: 15rem; max-width: 100%; height: auto;
  border: 1px solid var(--g200); border-radius: var(--radius); background: #fff; padding: .75rem;
}
.qr-box figcaption { margin-top: .5rem; font-size: .75rem; color: var(--g500); }

/* Aclaración que aparece bajo los medios de pago del checkout. */
.pay-aviso {
  margin-top: 1rem; border-radius: 10px; background: #fffbeb;
  padding: .75rem .875rem; font-size: .8125rem; line-height: 1.6; color: #92400e;
}

.bank-box { border-color: var(--brand); }
.bank-box__sub { margin-bottom: 1rem; font-size: .875rem; color: var(--g600); }
.bank-data { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.bank-data > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.bank-data dt { color: var(--g500); }
.bank-data dd { margin: 0; font-weight: 600; text-align: right; }
.bank-data code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8125rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Responsive de lo nuevo
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .field-grid { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }
  .field--wide { grid-column: span 1; }
  .order-row { grid-template-columns: 1fr auto auto auto; }
}

@media (min-width: 768px) {
  .field--wide { grid-column: span 1; }
  .cuenta { grid-template-columns: 16rem 1fr; }
  .order-detail { grid-template-columns: 1fr 20rem; }
  .card-block { padding: 1.5rem; }
}

/* El widget de reCAPTCHA mide 304px fijos: en pantallas muy angostas se escala
   para que no desborde la tarjeta. */
@media (max-width: 359px) {
  .captcha-box .g-recaptcha { transform: scale(.86); }
}