/* ============================================================
   MAGMA — hoja de estilo principal
   Paleta: obsidiana + turquesa, con naranja de detalle. Tipografía Jost / Inter.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:#0b0b0d;
  --ink-2:#141417;
  --ink-3:#1d1d22;
  --paper:#ffffff;
  --paper-2:#f3f3f5;
  --line:#e4e4e8;
  --line-dark:rgba(255,255,255,.14);
  --text:#15151a;
  --muted:#6b6b76;
  --muted-dark:rgba(255,255,255,.62);

  /* Negro de base, turquesa como color de marca y naranja sólo en detalles
     (badges, favorito, estrellas, "Servicio"). Los tokens -rgb existen para
     las sombras y velos translúcidos, que necesitan los canales sueltos. */
  --accent:#0e7c7f;            /* turquesa profundo: rellenos y texto sobre blanco */
  --accent-rgb:14,124,127;
  --accent-2:#3fcbce;          /* turquesa claro: etiquetas e iconos sobre negro  */
  --accent-2-rgb:63,203,206;
  --accent-soft:rgba(14,124,127,.12);
  --grad-accent:linear-gradient(100deg,#0e7c7f 0%,#3fcbce 100%);
  --hot:#ff5c1a;               /* naranja de detalle sobre negro */
  --hot-deep:#c93d05;          /* el mismo naranja para texto sobre blanco    */
  --grad-hot:linear-gradient(100deg,#d94407 0%,#f4661c 100%);

  --font-head:'Jost',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --wrap:1320px;
  /* El isotipo redondea su hombro con un radio del 39 % de su alto: la curva
     crece con la pieza. Por eso hay cinco pasos y no un valor único — un chip
     y el mapa no pueden compartir esquina. */
  --radius-xs:8px;    /* chips, tags, badges     */
  --radius-sm:12px;   /* campos, miniaturas      */
  --radius:18px;      /* tarjetas de producto    */
  --radius-lg:28px;   /* paneles, categorías     */
  --radius-xl:40px;   /* mapa, calculadora, hero */
  --radius-pill:999px;
  --header-h:76px;
  /* Alto de la banda de marcas. El slider se monta sobre el hero con un margen
     negativo de esta medida, así que la usan también los controles del hero. */
  --logos-h:98px;
  --shadow:0 18px 44px rgba(11,11,13,.10);
  --shadow-lg:0 30px 70px rgba(11,11,13,.18);
  --t:.28s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px)}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%; display:block; height:auto}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
/* 700 = asta/cap 0.245, que es el peso medido en el logotipo (0.243).
   El tracking va en positivo: el logo abre las letras, no las aprieta. */
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; line-height:1.08; margin:0; letter-spacing:.02em}
svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
input,select{font:inherit; color:inherit}
/* --accent (no --accent-2): el turquesa claro daba 2:1 sobre blanco y el aro de
   foco no se veía en las secciones claras. El profundo pasa 3:1 en ambos fondos. */
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
.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:fixed; top:-60px; left:16px; z-index:200; background:var(--accent); color:#fff; padding:10px 18px; border-radius:0 0 var(--radius-sm) var(--radius-sm); transition:top var(--t)}
.skip-link:focus{top:0}
.hide-sm{display:inline-flex}

/* ---------- Elementos compartidos ---------- */
.eyebrow{
  display:inline-block; font-family:var(--font-head); font-weight:700;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:14px;
}
.eyebrow--dark{color:var(--accent)}
.eyebrow--ico{display:inline-flex; align-items:center; gap:9px}
.eyebrow--ico .tech-ico{width:17px; height:17px}

.btn{
  --btn-bg:var(--ink); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-head); font-weight:700; font-size:.9rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--radius-pill); border:1.5px solid transparent;
  transition:transform var(--t), background var(--t), color var(--t), border-color var(--t);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
/* Blanco con texto naranja. --hot-deep y no --hot: el naranja vivo se queda en
   3.1:1 sobre blanco y el texto del botón (14.4 px en negrita) pide 4.5:1. */
.btn--accent{background:#fff; color:var(--hot-deep)}
/* Sobre superficie clara el pill blanco desaparece y el borde lo devuelve.
   Si añades un botón primario sobre fondo claro, súmalo a esta lista. */
.cart__foot .btn--accent,
.modal__box .btn--accent{border-color:var(--hot-deep)}
.btn--dark{background:var(--ink); color:#fff}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4); backdrop-filter:blur(4px)}
.btn--ghost:hover{background:rgba(255,255,255,.1); border-color:#fff}
.btn--block{width:100%}

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-head); font-weight:700; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2);
}
.link-arrow--dark{color:var(--accent)}
.link-arrow svg{width:16px; height:16px; transition:transform var(--t)}
.link-arrow:hover svg{transform:translateX(5px)}

.tag{
  display:inline-block; font-family:var(--font-head); font-weight:700;
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--radius-pill); background:var(--ink); color:#fff;
}
/* Badges (Nuevo · Oferta · Top · Servicio): el toque naranja de la paleta */
.tag--accent{background:var(--grad-hot)}

.icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; color:inherit;
  transition:background var(--t), color var(--t);
}
.icon-btn svg{width:21px; height:21px}
.icon-btn:hover{background:rgba(255,255,255,.1)}

/* ============================================================
   HEADER
   ============================================================ */
/* Fixed, no sticky: en sticky el header ocupa sitio en el flujo y arriba del
   todo tendría el blanco del body detrás, así que "transparente" lo dejaría
   ilegible. Fixed lo monta sobre el hero y la transparencia sí lee. */
.header{
  position:fixed; top:0; left:0; right:0; z-index:90;
  background:transparent;
  color:#fff; border-bottom:1px solid transparent;
  transition:background var(--t), box-shadow var(--t), border-color var(--t);
}
/* Al salir del hero el fondo pasa a ser claro: el cristal oscuro devuelve el
   contraste. Mismo tratamiento con el megamenú abierto sobre el hero. */
.header.is-stuck,
.header:has(.megamenu:not([hidden])),
body:has(#search:not([hidden])) .header{
  background:rgba(6,6,8,.62); backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line-dark); box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.header__inner{display:flex; align-items:center; gap:clamp(12px,2vw,28px); min-height:var(--header-h)}

.header__burger{display:none}
.burger{position:relative; width:20px; height:14px; display:block}
.burger i{position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:2px; transition:transform var(--t), opacity var(--t)}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:6px}
.burger i:nth-child(3){top:12px}

.brand{flex:none; display:block}
.brand__img{width:auto; height:38px; object-fit:contain}

.nav{flex:1; min-width:0}
.nav__list{display:flex; align-items:center; gap:clamp(2px,.7vw,7px)}
.nav__link{
  display:inline-flex; align-items:center; gap:6px; position:relative;
  font-family:var(--font-head); font-weight:600; font-size:.74rem;
  letter-spacing:.09em; text-transform:uppercase;
  padding:10px 8px; color:rgba(255,255,255,.86); transition:color var(--t);
  white-space:nowrap;
}
.nav__link::after{
  content:""; position:absolute; left:10px; right:10px; bottom:2px; height:2px;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--t);
}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:#fff}
.nav__link:hover::after,.nav__link[aria-expanded="true"]::after{transform:scaleX(1)}
.nav__link--hot{color:var(--hot)}
.nav__link--hot::after{background:var(--grad-hot)}
.tech-ico{width:15px; height:15px; flex:none}
.nav__link .tech-ico{color:var(--accent-2)}
.chev{width:10px; height:6px; stroke-width:2; transition:transform var(--t)}
.nav__link[aria-expanded="true"] .chev{transform:rotate(180deg)}

.has-menu{position:static}
/* El botón va centrado en los 76px del header y el panel arranca pegado al
   borde inferior: entre uno y otro quedan ~20px muertos. Este puente invisible
   —solo del ancho del disparador y solo con el menú abierto— los cubre para que
   bajar el cursor hacia el panel no cuente como salir del menú. */
.nav__link--btn[aria-expanded="true"]::before{
  content:""; position:absolute; left:-10px; right:-10px; top:100%;
  height:calc((var(--header-h) - 100%) / 2 + 4px);
}
.megamenu{
  position:absolute; left:0; right:0; top:100%;
  background:var(--ink-2); border-top:1px solid var(--line-dark);
  box-shadow:0 28px 60px rgba(0,0,0,.45);
  animation:mmIn .22s ease both;
}
@keyframes mmIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.megamenu__grid{display:grid; grid-template-columns:repeat(4,1fr) 1.15fr; gap:32px; padding-block:36px 40px}
.megamenu__col h4{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:14px;
}
.megamenu__col li + li{margin-top:9px}
.megamenu__col a{font-size:.94rem; color:rgba(255,255,255,.78); transition:color var(--t), padding-left var(--t)}
.megamenu__col a:hover{color:#fff; padding-left:5px}
.megamenu__promo{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:linear-gradient(150deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-2-rgb),.05));
  border:1px solid rgba(var(--accent-2-rgb),.28); border-radius:var(--radius); padding:22px;
}
.megamenu__promo strong{font-family:var(--font-head); font-size:1.22rem}
.megamenu__promo-txt{font-size:.88rem; color:var(--muted-dark)}

.header__actions{flex:none; display:flex; align-items:center; gap:2px}
.icon-btn--cart .cart-count{
  position:absolute; top:2px; right:0; min-width:19px; height:19px; padding:0 5px;
  border-radius:var(--radius-pill); background:var(--grad-accent); color:#fff;
  font-family:var(--font-head); font-size:.66rem; font-weight:700;
  display:grid; place-items:center; line-height:1;
}

/* ---------- Buscador ---------- */
/* Fixed por lo mismo que el header: en flujo empujaría el hero hacia abajo al abrirse */
.search{
  position:fixed; top:var(--header-h); left:0; right:0; z-index:88;
  background:rgba(6,6,8,.92); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-dark); color:#fff;
}
.search__inner{padding-block:22px}
.search__form{display:flex; align-items:center; gap:12px; border-bottom:2px solid rgba(255,255,255,.22); padding-bottom:12px}
.search__icon{width:22px; height:22px; flex:none; color:var(--accent-2)}
.search__form input{
  flex:1; min-width:0; background:none; border:0; outline:0; color:#fff;
  font-family:var(--font-head); font-size:clamp(1.1rem,3vw,1.6rem); font-weight:600;
}
.search__form input::placeholder{color:rgba(255,255,255,.34)}
.search__form input::-webkit-search-cancel-button,
.search__form input::-webkit-search-decoration{-webkit-appearance:none; appearance:none; display:none}
.search__results{padding-top:18px; min-height:60px}
.search__hint{margin:0; font-size:.85rem; color:var(--muted-dark); display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.chip{
  padding:5px 13px; border-radius:var(--radius-pill); border:1px solid var(--line-dark);
  font-size:.8rem; color:#fff; transition:background var(--t), border-color var(--t);
}
.chip:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4)}
.search__list{display:grid; gap:2px}
.search__row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border-radius:var(--radius-sm); transition:background var(--t)}
.search__row:hover{background:rgba(255,255,255,.06)}
.search__row span{font-size:.94rem}
.search__text{flex:1}
.search__thumb{flex:none; width:46px; height:46px; border-radius:var(--radius-sm); overflow:hidden; background:rgba(255,255,255,.08); display:grid; place-items:center}
.search__thumb svg{width:52%; height:52%; color:rgba(255,255,255,.45); stroke-width:1.3}
.search__img{width:100%; height:100%; object-fit:cover; display:block}
.search__row em{font-style:normal; font-size:.78rem; color:var(--muted-dark); display:block}
.search__row b{font-family:var(--font-head); color:var(--accent-2); white-space:nowrap}
.search__empty{color:var(--muted-dark); font-size:.9rem; margin:0}

/* ---------- Drawer móvil ---------- */
.drawer{
  position:fixed; inset:0 auto 0 0; z-index:120; width:min(340px,86vw);
  background:var(--ink); color:#fff; display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform var(--t); border-right:1px solid var(--line-dark);
}
.drawer.is-open{transform:none}
.drawer__head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; border-bottom:1px solid var(--line-dark)}
.drawer__logo{height:32px; width:auto}
.drawer__nav{display:flex; flex-direction:column; padding:12px 10px; overflow-y:auto; flex:1}
.drawer__nav a{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:600; font-size:1rem;
  letter-spacing:.08em; text-transform:uppercase; padding:15px 14px;
  border-radius:var(--radius-sm); transition:background var(--t), color var(--t);
}
.drawer__nav .tech-ico{width:18px; height:18px; color:var(--accent-2)}
.drawer__nav a:hover{background:rgba(255,255,255,.07); color:var(--accent-2)}
.drawer__foot{padding:20px 22px; border-top:1px solid var(--line-dark)}
.drawer__meta{margin:14px 0 0; font-size:.8rem; color:var(--muted-dark); text-align:center}

.overlay{position:fixed; inset:0; z-index:110; background:rgba(6,6,8,.6); backdrop-filter:blur(3px); animation:fade .25s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ============================================================
   HERO — contenedor + variante Cinema
   ============================================================ */
.hero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  /* --hv-mx / --hv-my se actualizan desde JS con la posición del cursor
     (0-1) para efectos de parallax y spotlight sin recalcular en CSS. */
  --hv-mx:.5; --hv-my:.5;
}
.hero__stage{position:relative; display:grid; min-height:clamp(520px,74vh,760px)}

/* ---- Ver 01 · Cinético (hero estático con las 3 promociones) ---- */
.hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:50px; height:50px; border-radius:50%; color:#fff;
  border:1px solid rgba(255,255,255,.24); background:rgba(11,11,13,.35);
  backdrop-filter:blur(6px); display:grid; place-items:center;
  transition:background var(--t), border-color var(--t);
}
.hero__arrow svg{width:22px; height:22px}
.hero__arrow:hover{background:var(--accent); border-color:var(--accent)}
.hero__arrow--prev{left:clamp(10px,2vw,26px)}
.hero__arrow--next{right:clamp(10px,2vw,26px)}

.hero__controls{
  position:absolute; left:0; right:0; bottom:calc(var(--logos-h) + 20px); z-index:3;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.hero__dots{display:flex; align-items:center; gap:6px}
/* La barra visible sigue midiendo 4 px de alto, pero el botón que la contiene
   llega a 24 px: es el mínimo de área táctil de la WCAG 2.5.8. */
.hero__dot{
  display:grid; place-items:center; width:44px; height:24px;
  padding:0; background:none; border:0; transition:width var(--t);
}
.hero__dot::after{
  content:""; display:block; width:34px; height:4px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.28); transition:background var(--t), width var(--t);
}
.hero__dot:hover::after{background:rgba(255,255,255,.55)}
.hero__dot.is-active{width:56px}
.hero__dot.is-active::after,
.hero__dot.is-active:hover::after{background:var(--grad-accent); width:46px}

.hero__pause{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  color:#fff; border:1px solid rgba(255,255,255,.28); background:rgba(11,11,13,.4);
  backdrop-filter:blur(6px); transition:background var(--t), border-color var(--t);
}
.hero__pause:hover{background:var(--accent); border-color:var(--accent)}
.hero__pause[hidden]{display:none}
.hero__ico{width:15px; height:15px}
.hero__ico--play{fill:currentColor; stroke:none}
.hero__pause[data-paused="false"] .hero__ico--play{display:none}
.hero__pause[data-paused="true"] .hero__ico--pause{display:none}

/* ============================================================
   SLIDER DE MARCAS
   ============================================================ */
/* El margen negativo lo sube sobre el hero: ahí detrás hay foto oscura, así que
   el cristal se lee translúcido en vez de aclararse contra el blanco del body. */
.logos{
  position:relative; z-index:2;
  margin-top:calc(var(--logos-h) * -1);
  background:rgba(6,6,8,.55); backdrop-filter:blur(18px) saturate(130%);
  color:#fff; border-top:1px solid rgba(255,255,255,.10);
}
/* la máscara desvanece los logos en los bordes en vez de cortarlos en seco */
.logos__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.logos__track{display:flex; width:max-content; animation:slide-logos 48s linear infinite}
.logos:hover .logos__track,
.logos__track:focus-within{animation-play-state:paused}
.logos__group{display:flex; align-items:center; margin:0; padding:0; list-style:none}
.logos__group > li{flex:none}
.logos__item{
  display:grid; place-items:center;
  width:clamp(148px,13vw,196px); height:var(--logos-h); padding-inline:clamp(14px,2vw,26px);
}
.logos__item img{
  width:auto; max-width:100%; max-height:46px; object-fit:contain;
  opacity:.6; transition:opacity var(--t), transform var(--t);
}
a.logos__item:hover img,
a.logos__item:focus-visible img{opacity:1; transform:scale(1.06)}
@keyframes slide-logos{to{transform:translateX(-50%)}}

/* ---------- Marquesina ---------- */
/* La sección que sigue también es blanca: sin el filete inferior la banda se
   funde con ella y deja de leerse como banda. */
.marquee{background:#fff; color:var(--ink); overflow:hidden; padding:11px 0; border-bottom:1px solid var(--line)}
.marquee__track{display:flex; width:max-content; animation:slide-marquee 34s linear infinite}
.marquee__track span{
  padding-right:26px; font-family:var(--font-head); font-weight:700;
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
}
@keyframes slide-marquee{to{transform:translateX(-50%)}}

/* ============================================================
   SECCIONES
   ============================================================ */
.section{padding-block:clamp(56px,8vw,104px)}
.section--tint{background:var(--paper-2)}
.section--dark{background:var(--ink); color:#fff}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap; margin-bottom:44px}
.section__head--center{justify-content:center; text-align:center}
.section__head--center .section__sub{margin-inline:auto}
.section__title{font-size:clamp(1.85rem,4vw,3rem); text-transform:uppercase}
.section__sub{max-width:62ch; margin:14px 0 0; color:var(--muted); font-size:1.02rem}
.section--dark .section__sub{color:var(--muted-dark)}
.section__more{display:flex; justify-content:center; margin-top:48px}

/* ---------- Categorías ---------- */
.cats{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.cat{
  grid-column:span 2; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:38px;
  min-height:190px; padding:24px; border-radius:var(--radius-lg);
  background:var(--ink); color:#fff;
  transition:transform var(--t), box-shadow var(--t);
}
.cat--wide{grid-column:span 6}
.cat--wide{min-height:210px; background:radial-gradient(90% 160% at 88% 12%,#06234b 0%,#050c1b 46%,#0b0b0d 100%)}
.cat__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:.7; transition:transform .7s ease, opacity var(--t);
}
/* velo: oscurece abajo y a la izquierda, que es donde va el texto */
.cat::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(11,11,13,.18) 0%,rgba(11,11,13,.54) 52%,rgba(11,11,13,.92) 100%),
    linear-gradient(90deg,rgba(11,11,13,.62),rgba(11,11,13,0) 55%);
}
.cat::after{
  content:""; position:absolute; inset:auto -30% -60% auto; width:260px; height:260px; z-index:1;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.42),transparent 68%);
  opacity:0; transition:opacity var(--t);
}
.cat:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.cat:hover::after{opacity:1}
.cat:hover .cat__img{transform:scale(1.06); opacity:.78}
.cat__icon{position:relative; z-index:2; width:46px; height:46px; border-radius:var(--radius-sm); display:grid; place-items:center; background:rgba(255,255,255,.08); color:var(--accent-2)}
.cat__icon svg{width:24px; height:24px}
.cat__body{position:relative; z-index:2; display:block}
.cat__body strong{display:block; font-family:var(--font-head); font-size:1.28rem; text-transform:uppercase; letter-spacing:.01em}
.cat__body em{font-style:normal; font-size:.83rem; color:var(--muted-dark)}
.cat--wide .cat__body strong{font-size:1.9rem}

/* La sexta casilla no es una categoría: cierra el renglón con el taller, que es
   a donde va el que no encontró lo suyo en el catálogo. Va sin foto y con el
   degradado naranja —el mismo gesto que .cat--wide, pero en el color de acción—
   para que se lea como acción y no como una categoría más. El naranja se apaga
   hacia abajo a propósito: el texto blanco cae sobre el extremo oscuro y
   conserva su contraste. */
.cat--cta{gap:10px; background:radial-gradient(92% 150% at 86% 10%,#e8641a 0%,#8f3405 44%,#1a0a05 100%)}
.cat--cta::before{content:none}
/* Icono en blanco y velo de hover en naranja: sobre esta tarjeta el turquesa
   del resto de la rejilla queda como complementario y pelea con el fondo. */
.cat--cta .cat__icon{color:#fff}
.cat--cta::after{background:radial-gradient(circle,rgba(255,92,26,.42),transparent 68%)}
/* gap y margen cortos: con la línea del enlace la tarjeta cabe en los 190 px de
   .cat y el tercer renglón de la rejilla no queda más alto que el segundo. */
.cat--cta .cat__cta{
  display:flex; align-items:center; gap:9px; margin-top:8px;
  font-family:var(--font-head); font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--hot);
}
.cat--cta .cat__cta svg{width:16px; height:16px; transition:transform var(--t)}
.cat--cta:hover .cat__cta svg{transform:translateX(5px)}

/* ---------- Productos ---------- */
.tabs{display:flex; flex-wrap:wrap; gap:8px}
.tab{
  font-family:var(--font-head); font-weight:600; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:10px 18px; border-radius:var(--radius-pill); border:1.5px solid var(--line);
  background:var(--paper); color:var(--muted);
  transition:all var(--t);
}
.tab:hover{border-color:var(--ink); color:var(--ink)}
.tab.is-active{background:var(--ink); border-color:var(--ink); color:#fff}

.grid-products{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
  animation:cardIn .35s ease both;
}
@keyframes cardIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}

.card__media{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center;
  background:linear-gradient(var(--tilt,150deg),#f8f8fa,#e7e7ee); overflow:hidden;
}
.card__media svg{width:44%; height:44%; color:rgba(11,11,13,.28); stroke-width:1.2}
.card__img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease}
.card:hover .card__img{transform:scale(1.045)}
.card__media::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 70% at 50% 120%,rgba(var(--accent-rgb),.16),transparent 70%);
  opacity:0; transition:opacity var(--t);
}
.card:hover .card__media::before{opacity:1}
.card__badges{position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; z-index:2}
.card__fav{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9);
  display:grid; place-items:center; color:var(--ink);
  opacity:0; transform:translateY(-6px); transition:all var(--t);
}
.card__fav svg{width:17px; height:17px}
.card:hover .card__fav{opacity:1; transform:none}
.card__fav.is-on{color:var(--hot)}
.card__fav.is-on svg{fill:currentColor}

.card__body{display:flex; flex-direction:column; flex:1; gap:6px; padding:18px 18px 20px}
.card__brand{font-family:var(--font-head); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.card__name{font-family:var(--font-head); font-size:1.08rem; font-weight:700; line-height:1.28; letter-spacing:0; min-height:2.56em}
.card__specs{font-size:.8rem; color:var(--muted); margin:0}
.card__price{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px; margin-top:auto; padding-top:10px}
.card__price b{font-family:var(--font-head); font-size:1.16rem}
.card__price s{font-size:.85rem; color:var(--muted)}
.card__price small{font-size:.7rem; color:var(--muted)}
.card__add{
  margin-top:12px; width:100%; padding:12px; border-radius:var(--radius-pill);
  background:var(--ink); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background var(--t), transform var(--t);
}
.card__add:hover{background:var(--grad-accent)}
.card__add:disabled{background:var(--line); color:var(--muted); cursor:not-allowed}
.card--out .card__media{filter:grayscale(1); opacity:.72}

/* Cuatro columnas temáticas: arriba la tarjeta que abre el tema y debajo
   tres renglones compactos. La reja plana sigue viva para los filtros. */
.cols{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:start}
.col{display:flex; flex-direction:column; gap:14px; min-width:0}
.col__head{padding-bottom:11px; border-bottom:2px solid var(--ink)}
.col__title{font-size:1.02rem; text-transform:uppercase; letter-spacing:.04em}
.col__sub{display:block; margin-top:5px; font-family:var(--font-head); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.col__empty{margin:0; font-size:.88rem; color:var(--muted)}
.col__list{display:grid; gap:10px}

/* Las cuatro columnas comparten los mismos renglones: el encabezado, la
   tarjeta de arriba y cada renglón compacto empiezan a la misma altura
   aunque un nombre ocupe dos líneas en una columna y una en la de al lado.
   Sin subgrid cada columna se apila por su cuenta, como antes. */
@supports (grid-template-rows:subgrid){
  .cols{grid-template-rows:repeat(5,auto); align-items:stretch}
  .col{display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:12px}
  .col__list{grid-row:span 3; grid-template-rows:subgrid; row-gap:12px}
  .col__empty{grid-row:span 4}
}

.prow{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:10px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
  animation:cardIn .35s ease both;
}
.prow:hover{transform:translateY(-2px); border-color:transparent; box-shadow:var(--shadow)}
.prow__media{
  width:58px; height:58px; display:grid; place-items:center; overflow:hidden;
  border-radius:var(--radius-xs); background:var(--paper-2);
}
.prow__media svg{width:52%; height:52%; color:rgba(11,11,13,.28); stroke-width:1.2}
.prow__img{width:100%; height:100%; object-fit:cover}
.prow__body{min-width:0; display:flex; flex-direction:column; gap:2px}
.prow__brand{font-family:var(--font-head); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
/* dos renglones y corta: los nombres largos no deben desnivelar la columna */
.prow__name{
  font-size:.86rem; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.prow__price{display:flex; align-items:baseline; gap:7px; font-family:var(--font-head)}
.prow__price b{font-size:.95rem}
.prow__price s{font-size:.76rem; color:var(--muted)}
.prow__add{
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  background:var(--ink); color:#fff; transition:background var(--t);
}
.prow__add svg{width:16px; height:16px; stroke-width:2.2}
.prow__add:hover{background:var(--grad-accent)}
.prow__add:disabled{background:var(--line); color:var(--muted); cursor:not-allowed}
.prow--out .prow__media{filter:grayscale(1); opacity:.72}

/* ---------- Split / servicio ---------- */
.split{display:grid; grid-template-columns:1fr 1.15fr; background:var(--ink); color:#fff; align-items:start}
/* La columna de precios es mucho más alta que la foto: en vez de estirar la
   imagen a lo largo de toda la sección, se queda fija mientras pasan los
   paquetes. */
/* Sin max-height: la foto mide exactamente el hueco entre el header y el
   borde de la ventana. Con el tope de 900 px, en una pantalla alta la imagen
   se quedaba corta y bajo ella aparecía una franja negra mientras los
   paquetes seguían corriendo al lado — la foto se veía desfasada. */
.split__media{
  position:sticky; top:var(--header-h); align-self:start;
  height:calc(100vh - var(--header-h)); min-height:460px;
  overflow:hidden; background:radial-gradient(100% 100% at 30% 20%,#06234b,#050c1b 55%,#0b0b0d);
}
.split__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:58% center;
}
/* Oscurece la esquina inferior izquierda para que la tarjeta de 72 h no compita con la foto */
.split__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(28deg,rgba(11,11,13,.88) 0%,rgba(11,11,13,.42) 38%,transparent 68%);
}
.split__stat{
  z-index:2;
  position:absolute; left:clamp(20px,4vw,48px); bottom:clamp(20px,4vw,48px);
  background:rgba(11,11,13,.6); backdrop-filter:blur(8px);
  border:1px solid var(--line-dark); border-radius:var(--radius); padding:18px 24px;
}
.split__stat strong{display:block; font-family:var(--font-head); font-size:2.4rem; line-height:1; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent}
.split__stat span{font-size:.8rem; color:var(--muted-dark)}
.split__body{padding:clamp(40px,6vw,88px) clamp(24px,5vw,80px); display:flex; flex-direction:column; justify-content:center}
/* Si la base no devuelve paquetes, main.js esconde esta columna: la foto pasa
   a ocupar el ancho completo en vez de dejar medio bloque negro vacío. */
.split:has(.split__body[hidden]){grid-template-columns:1fr}
.split__title{font-size:clamp(1.7rem,3.2vw,2.6rem); text-transform:uppercase; margin-bottom:18px}
.split__text{color:var(--muted-dark); margin:0 0 24px; max-width:56ch}
.checklist{display:grid; gap:11px; margin-bottom:32px}
.checklist li{position:relative; padding-left:32px; font-size:.96rem; color:rgba(255,255,255,.88)}
.checklist li::before{
  content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--grad-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.checklist li::after{
  content:""; position:absolute; left:5px; top:8px; width:9px; height:5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}
.split__cta{display:flex; align-items:center; gap:24px; flex-wrap:wrap}

/* ---------- Precios de taller ---------- */
/* Viven dentro de #servicio, sobre el negro de la sección. La tarjeta se parte
   en dos: a la izquierda el glifo, el nombre y lo que incluye; a la derecha un
   riel con el precio y su propio velo. Los tres rieles miden igual, así que los
   importes caen sobre un mismo eje vertical y se comparan de un vistazo en vez
   de tener que buscarlos al final de cada renglón. */
.svc-list{display:grid; gap:clamp(12px,1.6vw,18px); margin:6px 0 clamp(20px,2.6vw,28px)}
.svc{
  /* El ancho del riel se usa dos veces —la columna y el degradado que lo
     pinta—, así que vive en una variable y no en dos números sueltos. */
  --svc-px:clamp(20px,2.8vw,32px);
  --svc-py:clamp(20px,2.6vw,30px);
  /* El riel creció junto con el importe: "$2,650" a tipografía de titular no
     cabía en los 116 px de antes y se habría montado sobre el nombre. */
  --svc-rail:clamp(130px,14vw,178px);
  --svc-edge:calc(100% - var(--svc-rail) - var(--svc-px));

  display:grid; grid-template-columns:auto minmax(0,1fr) var(--svc-rail);
  grid-template-areas:"ico nombre precio" "lista lista precio" "nota nota precio";
  align-items:center; column-gap:clamp(14px,2vw,22px); row-gap:0;
  border:1px solid var(--line-dark); border-radius:var(--radius-lg);
  padding:var(--svc-py) var(--svc-px);
  background-color:rgba(255,255,255,.05);
  /* El velo y la línea del riel llegan hasta el filo de la tarjeta. Van como
     fondo y no como caja propia: con márgenes negativos el precio dejaría de
     medir para la rejilla y un paquete de una sola viñeta se desbordaría. */
  background-image:linear-gradient(90deg,
    rgba(63,203,206,0) var(--svc-edge),
    rgba(255,255,255,.14) var(--svc-edge),
    rgba(255,255,255,.14) calc(var(--svc-edge) + 1px),
    rgba(63,203,206,.10) calc(var(--svc-edge) + 1px));
  transition:border-color var(--t), background-color var(--t);
}
.svc:hover{border-color:rgba(63,203,206,.42); background-color:rgba(255,255,255,.07)}
/* El envoltorio no pinta nada: se disuelve para que el nombre y la lista
   caigan directo en la rejilla de la tarjeta. */
.svc__body{display:contents}
.svc__icon{
  grid-area:ico;
  display:grid; place-items:center; flex:none;
  width:clamp(46px,4.4vw,58px); aspect-ratio:1; border-radius:50%;
  background:var(--grad-accent); color:#fff;
}
.svc__icon svg{width:52%; height:52%; stroke-width:1.7}
.svc__name{
  grid-area:nombre; margin:0;
  font-size:clamp(1.02rem,1.55vw,1.28rem); text-transform:uppercase; line-height:1.15;
}
/* Mismo palomeo que .checklist: círculo de degradado con la marca en blanco. */
/* El detalle va plegado: con seis viñetas la tarjeta se iba a 450 px y la
   sección entera se volvía un muro. Se despliega al pasar el cursor.

   Se pliega con max-height y no tocando grid-template-rows porque el riel
   del precio abarca las tres filas de la rejilla: cambiar su altura de fila
   descuadraría el importe. Sigue en el DOM —sólo recortado— así que lectores
   de pantalla y buscadores lo leen igual. */
.svc__list{
  grid-area:lista; display:grid; gap:8px;
  max-height:0; opacity:0; overflow:hidden;
  margin-top:0; padding-top:0;
  border-top:0 solid var(--line-dark);
  transition:max-height .45s cubic-bezier(.22,.61,.36,1), opacity .28s ease,
             margin-top .45s cubic-bezier(.22,.61,.36,1),
             padding-top .45s cubic-bezier(.22,.61,.36,1);
}
/* 48em es holgado a propósito: el paquete más largo no pasa de la mitad, y
   quedarse corto recortaría viñetas, que es peor que una transición un pelo
   más rápida al final. */
.svc:hover .svc__list,
.svc:focus-within .svc__list,
.svc.is-open .svc__list{
  max-height:48em; opacity:1;
  margin-top:clamp(16px,2vw,20px);
  padding-top:clamp(14px,1.8vw,18px);
  border-top-width:1px;
}
.svc__list li{position:relative; padding-left:28px; font-size:.93rem; color:rgba(255,255,255,.86)}
.svc__list li::before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--grad-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.svc__list li::after{
  content:""; position:absolute; left:5px; top:8px; width:8px; height:4px;
  border-left:1.7px solid #fff; border-bottom:1.7px solid #fff; transform:rotate(-45deg);
}
/* La letra chica que trae ese paquete desde el panel, si la trae. */
/* ---------- Táctil: sin hover, se despliega con un toque ----------
   Sin esto el detalle quedaría inalcanzable en un teléfono, que es peor
   que una tarjeta alta. El chevron sólo aparece aquí: en escritorio el
   hover ya lo revela y no hace falta ensuciar la tarjeta. */
@media (hover:none){
  .svc{cursor:pointer}
  .svc__name::after{
    content:""; display:inline-block; vertical-align:middle;
    width:9px; height:9px; margin-left:10px;
    border-right:2px solid var(--accent-2); border-bottom:2px solid var(--accent-2);
    transform:translateY(-2px) rotate(45deg); transition:transform var(--t);
  }
  .svc.is-open .svc__name::after{transform:translateY(1px) rotate(-135deg)}
}

.svc__fine{grid-area:nota; margin:12px 0 0; font-size:.8rem; color:var(--muted-dark)}

/* El riel. El importe manda: tipografía de titular, cifras tabulares para que
   los tres queden alineados y el signo en turquesa a media altura. Los centavos
   no se imprimen si son cero — "$450" pesa más a la vista que "$450.00". */
.svc__price{
  grid-area:precio; align-self:stretch; margin:0;
  display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start;
  gap:9px; text-align:right; padding-left:clamp(14px,1.8vw,22px);
}
.svc__amount{
  display:flex; align-items:flex-start; gap:1px;
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(2.15rem,3.6vw,3.15rem); line-height:.92; letter-spacing:-.005em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.svc__cur{font-size:.46em; line-height:1.55; color:var(--accent-2)}
.svc__unit{
  font-family:var(--font-head); font-weight:700; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted-dark);
}
/* El recargo de e-bike era una nota gris pegada al precio y se leía como parte
   de él; en píldora se ve que es otra cifra y que es opcional. */
.svc__extra{
  padding:5px 10px; border-radius:var(--radius-pill);
  border:1px solid rgba(63,203,206,.34); background:rgba(63,203,206,.1);
  font-size:.72rem; line-height:1.25; color:#cbeff0; white-space:nowrap;
}
.svc__book{font-size:.74rem; letter-spacing:.08em}
.svc-note{
  margin:0 0 clamp(22px,3vw,30px); max-width:56ch;
  font-size:.88rem; color:var(--muted-dark);
}
.svc-note strong{color:#fff; font-weight:600}

/* ---------- Nutrición ---------- */
/* Panel oscuro dentro de una sección clara: el gel es una promoción suelta,
   no una sección más del catálogo, y así se lee como cartel. */
.gel{
  position:relative; overflow:hidden; display:grid; align-items:center;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,4vw,56px);
  padding:clamp(26px,4vw,52px); border-radius:var(--radius-lg);
  background:radial-gradient(120% 140% at 12% 8%,#06234b 0%,#050c1b 46%,#0b0b0d 100%);
  color:#fff;
}
.gel::after{
  content:""; position:absolute; inset:auto -12% -46% auto; width:440px; height:440px; z-index:0;
  background:radial-gradient(circle,rgba(var(--accent-2-rgb),.26),transparent 68%); pointer-events:none;
}
.gel__media{position:relative; z-index:1; display:grid; place-items:center; min-height:clamp(280px,30vw,380px)}
.gel__pack{width:min(232px,62%); height:auto; filter:drop-shadow(0 28px 48px rgba(0,0,0,.55))}
.gel__stat{
  position:absolute; left:0; bottom:0;
  background:rgba(11,11,13,.6); backdrop-filter:blur(8px);
  border:1px solid var(--line-dark); border-radius:var(--radius); padding:14px 20px;
}
.gel__stat strong{
  display:block; font-family:var(--font-head); font-size:1.9rem; line-height:1;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gel__stat span{font-size:.76rem; color:var(--muted-dark)}
.gel__body{position:relative; z-index:1}
.gel__title{margin:14px 0 0; font-size:clamp(1.7rem,3.2vw,2.6rem); text-transform:uppercase}
.gel__title em{font-style:normal; color:var(--accent-2)}
.gel__text{margin:16px 0 26px; color:var(--muted-dark); max-width:56ch}
.gel .checklist{margin-bottom:24px}
.gel__flavors{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.gel__flavor{
  font-family:var(--font-head); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; padding:8px 14px;
  border-radius:var(--radius-pill); border:1px solid var(--line-dark);
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.86);
}
.gel__price{margin:0 0 22px; font-size:.9rem; color:var(--muted-dark)}
.gel__price b{font-family:var(--font-head); font-size:1.5rem; color:#fff; margin-right:4px}
.gel__cta{display:flex; align-items:center; flex-wrap:wrap; gap:18px 24px}

/* ---------- Dealers ---------- */
/* minmax(0,1fr): sin esto, el aspect-ratio + min-height del mapa inflan la
   columna por encima del ancho de la pantalla y aparece scroll horizontal */
.dealers{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:stretch}
/* Selector de sucursal: dos tarjetas que hacen de pestañas del mapa. */
.locs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:26px}
.loc{
  display:grid; gap:4px; justify-items:start; text-align:left;
  padding:15px 17px; border-radius:var(--radius);
  border:1.5px solid var(--line); background:var(--paper);
  transition:border-color var(--t), background var(--t), transform var(--t);
}
.loc:hover{border-color:var(--ink); transform:translateY(-2px)}
.loc.is-active{border-color:var(--hot-deep); background:var(--paper-2)}
.loc__tag{
  font-family:var(--font-head); font-weight:700; font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--hot-deep);
}
.loc__tag--soon{color:var(--muted)}
.loc__name{font-family:var(--font-head); font-size:1rem; line-height:1.2; color:var(--ink)}
.loc__addr{font-size:.8rem; color:var(--muted); line-height:1.4}
.dealers__msg{min-height:22px; margin:12px 0 0; font-size:.88rem; color:var(--accent); font-weight:600}
.dealers__ship{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px;
  margin:14px 0 0; font-size:.88rem; color:var(--muted);
}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px; padding-top:32px; border-top:1px solid var(--line)}
.stat strong{display:block; font-family:var(--font-head); font-size:clamp(1.6rem,3vw,2.2rem); line-height:1; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat span{font-size:.78rem; color:var(--muted); letter-spacing:.04em}

.dealers__map{
  /* En dos columnas el mapa se estira a lo que mida la celda —o sea, al alto de
     la columna de texto— en vez de traer su propia proporción: con aspect-ratio
     fijo quedaba corto y dejaba un hueco arriba y abajo. El min-height sólo
     entra si el texto queda más bajo que eso, y escala con el ancho de pantalla.
     width:100% fija el ancho: sin él, el min-height + aspect-ratio resuelven
     el ancho a partir del alto y el mapa se sale de la pantalla en móvil. */
  position:relative; align-self:stretch; aspect-ratio:auto;
  height:100%; min-height:clamp(340px,30vw,480px); width:100%; min-width:0;
  border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--line); background:var(--paper-2);
  box-shadow:var(--shadow); isolation:isolate;
}
.dealers__frame{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; background:var(--paper-2);
}
.dealers__card{
  position:absolute; z-index:2;
  left:clamp(14px,2.4vw,22px); bottom:clamp(14px,2.4vw,22px);
  max-width:min(300px,calc(100% - 28px));
  background:rgba(11,11,13,.9); backdrop-filter:blur(10px); color:#fff;
  border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:15px 18px; display:grid; gap:3px;
  box-shadow:0 14px 36px rgba(11,11,13,.34);
}
.dealers__card strong{font-family:var(--font-head); font-size:1.06rem; line-height:1.25}
.dealers__card span{font-size:.82rem; color:var(--muted-dark); line-height:1.45}
.dealers__status{font-weight:600}
.dealers__status.is-open{color:#4ade80}
.dealers__status.is-closed{color:#fbbf24}
.dealers__status.is-soon{color:#7dd3fc}
.dealers__actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.mapbtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 15px; border-radius:var(--radius-pill); border:1px solid var(--line-dark);
  font-family:var(--font-head); font-weight:700; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:#fff;
  transition:background var(--t), border-color var(--t), transform var(--t);
}
.mapbtn[hidden]{display:none}
.mapbtn:hover{background:rgba(255,255,255,.12); transform:translateY(-1px)}
.mapbtn--primary{background:var(--grad-accent); border-color:transparent}
.mapbtn--primary:hover{background:var(--grad-accent); filter:brightness(1.08)}

/* ---------- Recursos ---------- */
.resources{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:16px}
.resource{
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:210px; border-radius:var(--radius-lg);
  background:radial-gradient(90% 130% at 78% 10%,#06234b,#050c1b 50%,#0b0b0d);
  color:#fff; border:1px solid transparent;
  transition:transform var(--t), box-shadow var(--t);
}
.resource:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.resource__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:.68; transition:transform .7s ease, opacity var(--t);
}
/* velo: abajo para el título, a la izquierda para la etiqueta */
.resource::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(11,11,13,.2) 0%,rgba(11,11,13,.52) 50%,rgba(11,11,13,.92) 100%),
    linear-gradient(90deg,rgba(11,11,13,.6),rgba(11,11,13,0) 58%);
}
.resource:hover .resource__img{transform:scale(1.05); opacity:.78}
.resource__body{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:22px;
}
.resource strong{font-family:var(--font-head); font-size:1.13rem; line-height:1.3}
.resource em{font-style:normal; font-size:.83rem; color:var(--muted-dark)}
.resource__tag{
  align-self:flex-start; font-family:var(--font-head); font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:rgba(255,255,255,.14); padding:5px 11px; border-radius:var(--radius-pill); margin-bottom:auto;
}
.resource--video{grid-column:span 2; grid-row:span 2}
.resource--video .resource__body{padding:26px}
.resource--video strong{font-size:1.5rem}
.resource__play{
  position:absolute; right:clamp(20px,4vw,42px); top:50%; transform:translateY(-50%); z-index:2;
  width:66px; height:66px; border-radius:50%; background:var(--grad-accent);
  display:grid; place-items:center;
  transition:transform var(--t);
}
.resource__play svg{width:26px; height:26px; fill:#fff; stroke:none; margin-left:3px}
.resource--video:hover .resource__play{transform:translateY(-50%) scale(1.08)}
/* las cuatro chicas también son video: el botón se va a la esquina de
   arriba, del lado contrario a la etiqueta, para no tapar el título */
.resource:not(.resource--video) .resource__play{width:44px; height:44px; top:18px; right:18px; transform:none}
.resource:not(.resource--video) .resource__play svg{width:18px; height:18px; margin-left:2px}
.resource:not(.resource--video):hover .resource__play{transform:scale(1.08)}
.resource--video em{font-size:.92rem}

/* ---------- Testimonios ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
/* Columna flex y no bloque a secas: las tres opiniones no miden lo mismo y la
   firma quedaba a distinta altura en cada tarjeta. Con el margen automático
   las tres se van al piso y los retratos alinean. */
.quote{
  margin:0; padding:28px; border-radius:var(--radius-lg);
  background:var(--paper-2); border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.stars{color:var(--hot); letter-spacing:.16em; font-size:1rem; margin-bottom:12px}
.quote blockquote{margin:0 0 20px; font-size:1rem; line-height:1.62}
/* El retrato va en la firma y no arriba de la tarjeta: la opinión sigue
   mandando y la foto nada más le pone cara al nombre. Dos renglones al lado
   del círculo — nombre arriba, disciplina y ciudad abajo — que el <img> junta
   al centro porque cruza los dos. */
.quote figcaption{
  margin-top:auto;
  display:grid; grid-template-columns:auto 1fr; column-gap:13px; align-items:center;
  font-family:var(--font-head); font-weight:700; font-size:.88rem;
}
.quote__face{
  grid-row:1/3; width:56px; height:56px; border-radius:50%; object-fit:cover;
  background:var(--paper); border:1px solid var(--line);
}
.quote figcaption b{font-weight:inherit; align-self:end; line-height:1.25}
.quote figcaption span{
  font-family:var(--font-body); font-weight:400; font-size:.84rem;
  color:var(--muted); align-self:start; line-height:1.35;
}

/* ---------- Red MAGMA / comunidad ---------- */
/* El mismo azul de .cat--wide y .split__media: la banda se separa del negro
   plano del newsletter que va justo debajo. */
.red{position:relative; overflow:hidden; background:radial-gradient(110% 150% at 10% 0%,#06234b 0%,#050c1b 46%,#0b0b0d 100%)}
/* La foto va a sangre sobre ese degradado, no en su lugar: el azul sigue
   asomando por los bordes y la banda no se despega del resto de la página. */
.red__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  /* el maestro ya viene con la proporción de la banda, así que en escritorio
     casi no sobra nada; lo poco que sobra se recorta por arriba (el 72%) para
     no cortarles las ruedas a los ciclistas, que van pegados al borde de abajo */
  object-position:50% 72%; opacity:.58;
}
/* velo: aprieta a la izquierda, que es donde va el texto, y cierra por abajo
   para que la banda entregue al negro plano del newsletter */
.red::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg,rgba(5,12,27,.88) 0%,rgba(5,12,27,.66) 46%,rgba(5,12,27,.22) 100%),
    linear-gradient(180deg,rgba(11,11,13,.34) 0%,rgba(11,11,13,.08) 38%,rgba(11,11,13,.72) 100%);
}
.red__inner{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
.red__text{margin:16px 0 0; color:var(--muted-dark); font-size:1.02rem; max-width:52ch}
.red__text strong{color:#fff; font-weight:600}
.red__cta{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:32px}
/* .stats nace para el bloque claro de dealers: aquí se le quitan la línea
   superior y los cuatro carriles, y cada dato pasa a ser una tarjeta. */
.red__stats{grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,20px); margin-top:0; padding-top:0; border-top:0}
.red__stats .stat{
  padding:clamp(24px,3.4vw,34px);
  border:1px solid var(--line-dark); border-radius:var(--radius-lg);
  /* sobre la foto, el .045 de blanco se perdía: el fondo pasa a ser oscuro y
     opaco para que la tarjeta se recorte contra el valle */
  background:rgba(6,16,33,.62); backdrop-filter:blur(8px);
}
.red__stats .stat strong{font-size:clamp(2.4rem,5vw,3.4rem); margin-bottom:10px}
.red__stats .stat span{color:var(--muted-dark)}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--ink); color:#fff; padding-block:clamp(44px,6vw,72px); border-top:1px solid var(--line-dark)}
.newsletter__inner{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center}
.newsletter__title{font-size:clamp(1.5rem,3vw,2.2rem); text-transform:uppercase}
.newsletter__text{margin:10px 0 0; color:var(--muted-dark)}
.newsletter__form{display:flex; gap:10px; flex-wrap:wrap}
.newsletter__form input{
  flex:1; min-width:230px; padding:15px 22px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line-dark); background:rgba(255,255,255,.05); color:#fff;
}
.newsletter__form input::placeholder{color:rgba(255,255,255,.4)}
.newsletter__form input:focus{outline:none; border-color:var(--accent-2)}
.newsletter__msg{grid-column:1/-1; margin:0; min-height:20px; font-size:.88rem; color:var(--accent-2)}

/* ============================================================
   FOOTER
   ============================================================ */
/* Se lee como directorio de la empresa, no como una lista de enlaces: cada
   columna abre con el rótulo del sistema (el mismo Jost 700 / .22em del
   .eyebrow) sobre una línea de pelo que fija la retícula, y los datos de
   contacto van en <dl> con su etiqueta. El turquesa se queda en los rótulos
   y en el hover, que es donde la paleta lo pide sobre negro. */
.footer{background:var(--ink-2); color:#fff}

.footer__notice{background:rgba(var(--accent-rgb),.14); border-block:1px solid rgba(var(--accent-rgb),.28); font-size:.84rem; padding:12px 0}
.footer__notice-inner{display:flex; align-items:center; justify-content:center; gap:8px 13px; flex-wrap:wrap; text-align:center}
.footer__notice p{margin:0; color:rgba(255,255,255,.88)}
.footer__notice-tag{
  font-family:var(--font-head); font-weight:700; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-2); white-space:nowrap;
  border:1px solid rgba(var(--accent-2-rgb),.45); border-radius:var(--radius-xs); padding:4px 10px;
}

/* Las columnas no pesan igual: contacto y ubicación cargan datos que no
   admiten corte (un horario, una calle), así que se llevan unas décimas de
   más y los listados de enlaces ceden. */
.footer__grid{display:grid; grid-template-columns:1.4fr .95fr 1.05fr 1.15fr 1.05fr; gap:30px clamp(22px,2.6vw,42px); padding-block:clamp(48px,6vw,76px)}
.footer__logo{height:44px; width:auto; margin-bottom:18px}
.footer__pitch{margin:0 0 28px; color:var(--muted-dark); font-size:.92rem; max-width:34ch}

/* min-height de dos renglones y texto pegado abajo: así el rótulo de una línea
   y el de dos ("Atención a clientes") cierran su raya a la misma altura y las
   cinco columnas arrancan alineadas. */
.footer__head{
  display:flex; align-items:flex-end; min-height:2.6em;
  font-size:.72rem; font-weight:700; letter-spacing:.22em; line-height:1.3;
  text-transform:uppercase; color:var(--accent-2);
  margin:0 0 18px; padding-bottom:11px; border-bottom:1px solid var(--line-dark);
}
/* La columna de marca se va a todo el ancho en pantallas chicas y ahí la raya
   del rótulo cruzaba el pie entero: se queda en la medida del párrafo. */
.footer__brandcol .footer__head{max-width:34ch}

.footer__links li + li{margin-top:11px}
.footer__links a,
.footer__data a{font-size:.92rem; color:var(--muted-dark); transition:color var(--t)}
.footer__links a:hover,
.footer__data a:hover{color:#fff; text-decoration:underline; text-underline-offset:4px}

.footer__data{margin:0}
.footer__data dt{
  font-family:var(--font-head); font-weight:700; font-size:.63rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:3px;
}
.footer__data dd{margin:0 0 14px; font-size:.92rem; color:var(--muted-dark); line-height:1.55}
.footer__data dd:last-child{margin-bottom:0}
.footer__data address{font-style:normal}
.footer__maplink{display:inline-flex; align-items:center; gap:7px; margin-top:16px; color:var(--accent-2); font-weight:500; font-size:.88rem}
.footer__maplink svg{width:14px; height:14px; transition:transform var(--t)}
.footer__maplink:hover svg{transform:translateX(4px)}

/* Cuadrados y no círculos: riman con los chips de pago del pie y con el resto
   de piezas chicas del sistema, que llevan --radius-xs. */
.footer__social{display:flex; gap:8px}
.footer__social a{
  width:38px; height:38px; border-radius:var(--radius-xs); border:1px solid var(--line-dark);
  display:grid; place-items:center; color:rgba(255,255,255,.82);
  transition:background var(--t), border-color var(--t), color var(--t);
}
.footer__social svg{width:18px; height:18px}
.footer__social a:hover{background:var(--grad-accent); border-color:transparent; color:#fff}

/* Franja de pagos: los chips salen de la barra legal, donde iban apretados
   contra los enlaces, y estrenan rótulo y letra chica de condiciones. */
.footer__meta{border-top:1px solid var(--line-dark)}
.footer__meta-inner{display:flex; align-items:flex-end; justify-content:space-between; gap:16px 40px; flex-wrap:wrap; padding-block:24px}
.footer__pay .footer__head{min-height:0; margin-bottom:12px; padding-bottom:0; border-bottom:0}
.footer__fine{margin:0; max-width:52ch; font-size:.78rem; line-height:1.5; color:rgba(255,255,255,.42); text-align:right}

/* Centrada, no en extremos: abajo a la derecha vive el botón fijo de WhatsApp
   y ahí tapaba el último chip de pago. */
/* La barra vive en dos sitios: dentro del pie negro de la portada y suelta,
   sobre blanco, al cierre de las páginas legales. Los tonos claros son la base
   —ahí los enlaces se perdían en el blanco— y el pie oscuro los reescribe. */
.footer__bar{border-top:1px solid var(--line)}
.footer__bar-inner{display:flex; align-items:center; justify-content:center; gap:10px 26px; flex-wrap:wrap; padding-block:22px; text-align:center}
.footer__copy,
.footer__bar p{margin:0; font-size:.8rem; color:var(--muted)}
.footer__legal{display:flex; align-items:center; justify-content:center; gap:10px 22px; flex-wrap:wrap}
.footer__legal a{font-size:.8rem; color:var(--muted); transition:color var(--t)}
.footer__legal a:hover{color:var(--text); text-decoration:underline; text-underline-offset:4px}
.footer .footer__bar{border-top-color:var(--line-dark)}
.footer .footer__copy,
.footer .footer__bar p{color:rgba(255,255,255,.42)}
.footer .footer__legal a{color:var(--muted-dark)}
.footer .footer__legal a:hover{color:#fff}
/* Acceso al panel: va con los legales, no compite con ellos. El candado
   avisa que es puerta de servicio y no una sección más del sitio. */
.footer__admin{display:inline-flex; align-items:center; gap:6px; opacity:.72}
.footer__admin:hover{opacity:1}
.footer__admin svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round}

.pay{display:flex; gap:7px; flex-wrap:wrap}
.pay__chip{
  font-family:var(--font-head); font-size:.6rem; font-weight:700; letter-spacing:.1em;
  padding:7px 11px; border-radius:var(--radius-xs); border:1px solid var(--line-dark); color:var(--muted-dark);
}

/* ============================================================
   CARRITO
   ============================================================ */
.cart{
  position:fixed; top:0; right:0; bottom:0; z-index:120;
  width:min(420px,92vw); background:var(--paper);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--t);
  box-shadow:-20px 0 60px rgba(0,0,0,.28);
}
.cart.is-open{transform:none}
.cart__head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line)}
.cart__head h2{font-size:1.15rem; text-transform:uppercase; letter-spacing:.06em}
.cart__head .icon-btn:hover{background:var(--paper-2)}
.cart__body{flex:1; overflow-y:auto; padding:8px 24px}
.cart__empty{text-align:center; padding:60px 10px; color:var(--muted)}
.cart__empty svg{width:52px; height:52px; margin:0 auto 16px; color:var(--line); stroke-width:1.4}
.cart-item{display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:18px 0; border-bottom:1px solid var(--line)}
.cart-item__thumb{width:64px; height:64px; border-radius:var(--radius-sm); background:linear-gradient(150deg,#f7f7f9,#e6e6ec); display:grid; place-items:center; overflow:hidden}
.cart-item__thumb svg{width:52%; height:52%; color:rgba(11,11,13,.3); stroke-width:1.3}
.cart-item__img{width:100%; height:100%; object-fit:cover; display:block}
.cart-item__name{font-family:var(--font-head); font-size:.98rem; line-height:1.3; margin:0 0 2px}
.cart-item__brand{display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.cart-item__qty{display:inline-flex; align-items:center; gap:2px; margin-top:8px; border:1px solid var(--line); border-radius:var(--radius-pill); padding:2px}
.cart-item__qty button{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:1rem; line-height:1; color:var(--muted); transition:background var(--t)}
.cart-item__qty button:hover{background:var(--paper-2); color:var(--ink)}
.cart-item__qty span{min-width:24px; text-align:center; font-family:var(--font-head); font-weight:700; font-size:.88rem}
.cart-item__variant{
  display:block; margin-top:5px; font-size:.76rem; font-weight:600; color:var(--accent);
}
.cart-item__note{display:block; margin-top:2px; font-size:.74rem; color:var(--muted); font-style:italic}
.cart-item__right{display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px}
.cart-item__price{font-family:var(--font-head); font-weight:700; font-size:.95rem; white-space:nowrap}
.cart-item__acts{display:flex; flex-direction:column; align-items:flex-end; gap:3px}
.cart-item__edit,
.cart-item__rm{font-size:.74rem; color:var(--muted); text-decoration:underline; transition:color var(--t)}
.cart-item__edit:hover,
.cart-item__rm:hover{color:var(--accent)}
.cart__foot{padding:20px 24px; border-top:1px solid var(--line); background:var(--paper-2)}
.cart__ship{font-size:.8rem; color:var(--muted); margin-bottom:12px}
.cart__ship b{color:var(--accent)}
.cart__bar{display:block; height:5px; border-radius:var(--radius-pill); background:var(--line); margin-top:8px; overflow:hidden}
.cart__bar i{display:block; height:100%; background:var(--grad-accent); transition:width .4s}
.cart__total{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px}
.cart__total span{font-size:.86rem; color:var(--muted)}
.cart__total strong{font-family:var(--font-head); font-size:1.4rem}
.cart__continue{width:100%; margin-top:10px; padding:10px; font-size:.82rem; color:var(--muted); text-decoration:underline}

/* ---------- Modal de pedido ----------
   Va por encima del panel del carrito (z 120), que es desde donde se abre. */
.modal{position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px}
/* display:grid pisa el [hidden] que pone el user-agent */
.modal[hidden]{display:none}
.modal__veil{position:absolute; inset:0; background:rgba(11,11,13,.62); backdrop-filter:blur(3px)}
.modal__box{
  position:relative; width:min(440px, 100%); max-height:calc(100vh - 40px); overflow:auto;
  background:var(--paper); border-radius:var(--radius-lg); padding:32px 28px 26px;
  box-shadow:var(--shadow-lg); animation:modalIn .3s cubic-bezier(.22,.61,.36,1) both;
}
.modal__box--sm{width:min(400px, 100%)}
@keyframes modalIn{from{opacity:0; transform:translateY(14px) scale(.98)}}
.modal__x{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; color:var(--muted); transition:background var(--t), color var(--t);
}
.modal__x:hover{background:var(--paper-2); color:var(--text)}
.modal__x svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.modal__title{font-family:var(--font-head); font-size:1.5rem; margin:0 0 6px}
.modal__text{font-size:.88rem; color:var(--muted); margin:0 0 20px}

.field{display:block; margin-bottom:14px}
.field > span{display:block; font-size:.78rem; font-weight:600; margin-bottom:6px}
.field > span em{font-style:normal; font-weight:400; color:var(--muted)}
.field input, .field textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:.92rem; color:var(--text);
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color var(--t), box-shadow var(--t);
}
.field select{
  width:100%; padding:12px 14px; font:inherit; font-size:.92rem; color:var(--text);
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color var(--t), box-shadow var(--t);
}
.field textarea{resize:vertical; min-height:56px}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field__hint{display:block; margin-top:5px; font-size:.74rem; color:var(--muted)}

.modal__total{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:14px 0; margin-bottom:6px; border-top:1px solid var(--line);
}
.modal__total span{font-size:.86rem; color:var(--muted)}
.modal__total strong{font-family:var(--font-head); font-size:1.35rem}
.modal__msg{min-height:1.2em; margin:10px 0 0; font-size:.82rem; color:var(--muted); text-align:center}
.modal__msg.is-bad{color:#c0341a}

.modal__done{text-align:center}
.modal__check{width:56px; height:56px; margin:0 auto 14px; display:block; color:var(--accent);
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.modal__done .btn{margin-top:8px}

/* Reja de catálogo sin resultados */
.grid-products__empty{
  grid-column:1/-1; text-align:center; color:var(--muted); font-size:.94rem;
  padding:56px 24px; background:var(--paper-2); border-radius:var(--radius);
}

/* ---------- WhatsApp + toast ---------- */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:100;
  width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff;
  display:grid; place-items:center;
  transition:transform var(--t);
}
.wa svg{width:28px; height:28px; stroke-width:1.6}
.wa:hover{transform:scale(1.08)}

.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:140;
  background:var(--ink); color:#fff; padding:14px 24px; border-radius:var(--radius-pill);
  font-size:.88rem; box-shadow:var(--shadow-lg);
  opacity:0; transition:opacity var(--t), transform var(--t);
}
.toast.is-on{opacity:1; transform:translate(-50%,0)}

/* ---------- Reveal al hacer scroll ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1; transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* El menú creció a ocho entradas. El wrap topa en 1320 px, así que arriba de
   ese ancho ya no hay más sitio: la medida base va apretada y en pantallas
   chicas se aprieta otro paso antes de irse entero al drawer. */
@media (max-width:1300px){
  .nav__list{gap:1px}
  .nav__link{font-size:.71rem; letter-spacing:.06em; padding:10px 6px}
  .nav__link .tech-ico{display:none}
}

@media (max-width:1180px){
  /* Ocho entradas ya no caben junto a los iconos: aquí el menú se va al drawer,
     aunque el resto del layout siga en versión de escritorio hasta 960 px. */
  .header__burger{display:inline-flex}
  .nav{display:none}
  .brand{flex:1}
  .brand__img{height:32px}
  .megamenu__grid{grid-template-columns:repeat(3,1fr); gap:26px}
  .megamenu__promo{grid-column:span 3}
  .grid-products{grid-template-columns:repeat(3,1fr)}
  .cols{gap:13px}
  .resources{grid-template-columns:repeat(2,1fr); grid-auto-rows:auto}
  .resource--video{grid-column:span 2; grid-row:auto}
}

@media (max-width:960px){
  :root{--header-h:64px}
  .hide-sm{display:none}
  .brand__img{height:28px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cat{grid-column:span 1}
  .cat--wide{grid-column:span 2}
  .split{grid-template-columns:1fr}
  /* En una sola columna la foto vuelve a ser una banda normal: pegarla arriba
     la dejaría encima de los paquetes. */
  .split__media{position:relative; top:auto; height:auto; min-height:300px; max-height:none; order:-1}
  .cols{grid-template-columns:repeat(2,1fr); gap:clamp(16px,3vw,26px)}
  .gel{grid-template-columns:minmax(0,1fr)}
  .gel__media{min-height:260px; order:-1}
  .gel__stat{position:relative; left:auto; bottom:auto; margin-top:12px}
  .dealers{grid-template-columns:minmax(0,1fr)}
  /* En una columna ya no hay celda que llenar: height:auto devuelve el mando
     a la proporción para que el mapa siga al ancho del contenedor. */
  .dealers__map{height:auto; aspect-ratio:16/9; min-height:clamp(260px,42vw,340px)}
  .quotes{grid-template-columns:1fr}
  .red__inner{grid-template-columns:minmax(0,1fr)}
  /* en una columna el texto cruza toda la banda, así que el velo deja de
     apretar sólo a la izquierda y se reparte parejo */
  .red::before{
    background:
      linear-gradient(90deg,rgba(5,12,27,.8) 0%,rgba(5,12,27,.64) 100%),
      linear-gradient(180deg,rgba(11,11,13,.3) 0%,rgba(11,11,13,.06) 42%,rgba(11,11,13,.72) 100%);
  }
  .newsletter__inner{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .footer__brandcol{grid-column:1/-1}
  .footer__meta-inner{align-items:flex-start}
  .footer__fine{text-align:left}
  .hero__arrow{display:none}
  .section__head{margin-bottom:32px}
}

@media (max-width:640px){
  .grid-products{grid-template-columns:repeat(2,1fr); gap:12px}
  .cols{grid-template-columns:minmax(0,1fr); gap:30px}
  /* En el teléfono no cabe el riel a un lado: el precio se cruza como banda de
     lado a lado entre el nombre y la lista, que es donde se corta la lectura.
     Sigue siendo lo más grande de la tarjeta, sólo que en horizontal. */
  .svc{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"ico nombre" "precio precio" "lista lista" "nota nota";
    background-image:none;
  }
  .svc__name{font-size:1.08rem}
  .svc__price{
    align-self:auto; flex-direction:row; align-items:baseline; justify-content:flex-start;
    flex-wrap:wrap; gap:10px; text-align:left;
    margin:16px calc(var(--svc-px) * -1) 0; padding:13px var(--svc-px);
    border-top:1px solid var(--line-dark);
    background:rgba(63,203,206,.1);
  }
  /* Sin filete abajo: el que trae la lista al desplegarse ya cierra la banda,
     y dos rayas a 16 px una de otra se ven como un error de maqueta. */
  .svc__book{margin-left:auto}
  /* En banda horizontal no hay riel que respetar: la cifra puede crecer otro
     paso sin empujar al nombre. */
  .svc__amount{font-size:2.45rem}
  .svc__list li{font-size:.9rem}
  .card__body{padding:14px 14px 16px}
  .card__name{font-size:.98rem}
  .card__price b{font-size:1.06rem}
  .card__add{font-size:.68rem; letter-spacing:.05em; padding:12px 8px}
  .cart-item{grid-template-columns:56px 1fr auto; gap:12px}
  .cart-item__thumb{width:56px; height:56px}
  .cart-item__qty button{width:30px; height:30px}
  :root{--logos-h:78px}
  .logos__item{width:126px; padding-inline:12px}
  .logos__item img{max-height:36px}
  /* min() en vez de un mínimo fijo: en teléfono acostado un min-height de 380px
     era más alto que la pantalla y el mapa se comía la sección entera. */
  .dealers__map{aspect-ratio:3/4; min-height:min(380px,70vh); max-height:80vh}
  .dealers__card{padding:13px 15px; max-width:calc(100% - 24px)}
  .dealers__card strong{font-size:1rem}
  .dealers__card span{font-size:.78rem}
  .mapbtn{padding:8px 13px; font-size:.66rem}
  .resources{grid-template-columns:1fr}
  .resource--video{grid-column:span 1; grid-row:auto}
  /* arriba a la derecha: abajo se encimaba con el título del video */
  .resource__play{width:52px; height:52px; right:20px; top:20px; bottom:auto; transform:none}
  .resource--video:hover .resource__play{transform:scale(1.08)}
  .resource--video strong{font-size:1.28rem}
  .stats{grid-template-columns:repeat(2,1fr); gap:22px}
  .red__stats{gap:12px}
  .red__stats .stat{padding:20px}
  /* 16 px evita que iOS haga zoom al enfocar el select */
  .locs{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  /* En una sola columna ya no hay rótulos que alinear entre sí: el alto de dos
     renglones sobra. */
  .footer__head{min-height:0}
  /* Sitio para el botón flotante de WhatsApp, que aterriza justo encima de
     esta franja al llegar al final de la página. */
  .footer__bar-inner{padding-bottom:56px}
  .cats{grid-template-columns:1fr}
  .cat--wide{grid-column:span 1}
  .wa{width:50px; height:50px; right:14px; bottom:14px}
}

/* Pantallas de 320–360 px: las dos columnas del catálogo quedan muy angostas */
@media (max-width:380px){
  .card__body{padding:12px 12px 14px}
  .card__add{font-size:.62rem; letter-spacing:.02em; padding:11px 6px}
  .card__price b{font-size:1rem}
  .cart-item{grid-template-columns:52px 1fr auto; gap:10px}
  .cart-item__thumb{width:52px; height:52px}
}

/* En pantallas táctiles no hay hover: el corazón de favoritos debe verse
   siempre y el zoom de la foto no debe quedarse pegado después del tap. */
@media (hover:none){
  .card__fav{opacity:1; transform:none}
  .card:hover .card__img{transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    /* el retardo no lo cubre transition-duration: sin esto, la cascada
       seguiría escalonando las entradas aunque fueran instantáneas */
    transition-delay:0ms !important; animation-delay:0ms !important;
  }
  [data-stagger] > *{opacity:1 !important; transform:none !important}
  img.fade-in{opacity:1 !important; transform:none !important}
  .progress{display:none}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* ============================================================
   HERO — barra de progreso del carrusel
   ============================================================ */
.hero__progress{
  position:absolute; left:0; right:0; bottom:calc(var(--logos-h)); z-index:3;
  height:2px; background:rgba(255,255,255,.08); overflow:hidden;
}
.hero__progress > i{
  display:block; height:100%; width:0;
  background:var(--grad-accent); transform-origin:left;
  transition:width .12s linear;
}
.hero__progress[data-paused="true"] > i{background:rgba(255,255,255,.28)}

/* ============================================================
   HERO — versión 02 · Cinema (split panavision + reel)
   ============================================================ */
.hero[data-hv="cinema"]{background:#050607}
.hero[data-hv="cinema"] .hero__stage{
  grid-template-columns:1fr; min-height:clamp(560px,80vh,820px);
}
.cine{
  grid-area:1/1; position:relative;
  display:grid; grid-template-columns:minmax(0,45%) minmax(0,55%);
  padding-top:var(--header-h);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .55s ease, visibility .55s;
}
.cine.is-active{opacity:1; visibility:visible; pointer-events:auto}
/* Panel izquierdo: contenido */
.cine__panel{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  /* El bajo reserva la banda de marcas (que se monta sobre el hero) más el alto
     de .hero__controls, que va anclado justo encima de ella: sin esto el carrete
     de miniaturas queda debajo de los logos. */
  padding:clamp(24px,4vw,64px) clamp(20px,5vw,72px) calc(var(--logos-h) + 64px);
  background:linear-gradient(180deg,#08090c 0%,#0b0b0d 60%,#050607 100%);
}
.cine__panel::before{
  /* Grain textural muy sutil. */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.5px);
  background-size:3px 3px;
}
.cine__index{
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
  font-family:var(--font-head); font-weight:700; font-size:.72rem;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.cine__index b{color:var(--hot); font-weight:800}
.cine__index i{flex:1; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.24),transparent)}
.cine__title{
  font-family:var(--font-head); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.4rem,5.5vw,4.4rem); line-height:.98; letter-spacing:-.005em;
  margin:0 0 20px;
}
.cine__title em{
  font-style:normal; background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Reveal por líneas con máscara de barrido diagonal */
.cine__title .cl{display:block; overflow:hidden; padding-bottom:.06em}
.cine__title .cl > i{
  display:block; font-style:inherit;
  transform:translateY(105%);
  transition:transform 1s cubic-bezier(.22,.61,.36,1);
}
.cine.is-active .cine__title .cl > i{transform:none; transition-delay:calc(var(--i,0) * 90ms + 180ms)}
.cine__text{
  max-width:44ch; color:rgba(255,255,255,.72); font-size:1.02rem; margin:0 0 26px;
  opacity:0; transform:translateY(12px); transition:opacity .7s ease .5s, transform .7s ease .5s;
}
.cine.is-active .cine__text{opacity:1; transform:none}
.cine__cta{display:flex; flex-wrap:wrap; gap:12px; opacity:0; transform:translateY(12px);
  transition:opacity .7s ease .7s, transform .7s ease .7s}
.cine.is-active .cine__cta{opacity:1; transform:none}

/* Panel derecho: la foto en marco panavision */
.cine__frame{
  position:relative; overflow:hidden; margin:clamp(20px,3vw,40px);
  border-radius:var(--radius-lg); background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.6);
}
.cine__photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* 30% y no center: cuando el marco se estrecha a 16/10 el recorte vertical
     se come más de abajo que de arriba, y así el casco del corredor no acaba
     detrás de la barra negra superior. */
  object-position:50% 30%;
  transform:scale(1.08) translate3d(calc((var(--hv-mx) - .5) * -22px), calc((var(--hv-my) - .5) * -16px), 0);
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.cine.is-active .cine__photo{animation:cineZoom 12s ease-out both}
@keyframes cineZoom{
  from{transform:scale(1.02)}
  to  {transform:scale(1.16) translate3d(-18px,-10px,0)}
}
/* Corner brackets — cámara HUD */
.cine__frame::before, .cine__frame::after{
  content:""; position:absolute; z-index:3; width:26px; height:26px; border:2px solid var(--hot);
  opacity:.85;
}
.cine__frame::before{top:14px; left:14px; border-right:0; border-bottom:0}
.cine__frame::after {bottom:14px; right:14px; border-left:0; border-top:0}
/* Barras cinematográficas (panavision) sobre la foto */
.cine__frame > .cine__bars{
  content:""; position:absolute; left:0; right:0; z-index:2; pointer-events:none;
  background:#000;
}
.cine__frame > .cine__bars--top{top:0; height:8%}
.cine__frame > .cine__bars--bottom{bottom:0; height:8%}
/* Parche naranja sobre la foto, mismo papel que los badges de producto */
.cine__tag{
  position:absolute; z-index:3; left:28px; top:28px;
  font-family:var(--font-head); font-weight:800; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  padding:7px 12px; border-radius:var(--radius-xs);
  background:var(--grad-hot); color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
/* Sello inferior derecho: se movió arriba a la izquierda (bajo el tag) para
   no chocar con el reel y para que la vista completa quede más limpia. */
.cine__note{
  position:absolute; z-index:3; left:28px; top:74px; max-width:240px;
  font-family:var(--font-head); font-weight:700; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.85); text-shadow:0 2px 8px rgba(0,0,0,.6);
}

/* Reel de miniaturas: ahora vive dentro del panel de contenido (debajo del CTA)
   en lugar de flotar absoluto sobre todo el hero. Así no invade la foto ni
   se solapa con el título en pantallas medianas. */
.cine__reel{
  display:flex; align-items:center; gap:12px; margin-top:32px;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.08);
  position:relative; z-index:2;
}
.cine__reel button{
  position:relative; flex:1 1 0; max-width:150px; aspect-ratio:16/10;
  border-radius:var(--radius-sm); overflow:hidden; padding:0;
  border:1px solid rgba(255,255,255,.14); background:#000;
  transition:border-color var(--t), transform var(--t);
}
.cine__reel button img{width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity var(--t)}
.cine__reel button:hover img{opacity:.8}
.cine__reel button.is-active{border-color:var(--accent-2); transform:translateY(-3px)}
.cine__reel button.is-active img{opacity:1}
.cine__reel button::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left;
}
.cine__reel button.is-active::after{transform:scaleX(var(--p,0))}
.cine__reel .cine__num{
  position:absolute; top:6px; left:8px;
  font-family:var(--font-head); font-weight:800; font-size:.62rem; letter-spacing:.14em;
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7);
}

/* ============================================================
   Responsive hero
   ============================================================ */
@media (max-width:960px){
  /* Cinema colapsa a stacked */
  .hero[data-hv="cinema"] .hero__stage{min-height:auto}
  .cine{grid-template-columns:1fr; padding-top:calc(var(--header-h) + 8px)}
  .cine__panel{padding:24px 20px calc(var(--logos-h) + 64px); min-height:340px}
  .cine__frame{
    order:-1; margin:0 12px 12px; aspect-ratio:16/10;
    position:relative; height:auto;
  }
  .cine__frame::before, .cine__frame::after{width:20px; height:20px}
  .cine__reel{margin-top:24px; padding-top:18px; gap:8px}
  .cine__reel button{max-width:none}
  .cine__title{font-size:clamp(2rem,8vw,3rem)}
  .cine__note{left:16px; top:60px; font-size:.62rem}

  /* Editorial: quitamos el índice lateral y afinamos tamaño */

  /* Switcher: pega el menú al header aunque el badge quede al ras */
}

@media (max-width:640px){
  .cine__index{font-size:.66rem; letter-spacing:.2em; gap:10px}
  .cine__tag{left:16px; top:16px; font-size:.64rem; padding:5px 9px}
  .cine__reel{gap:6px}
  .cine__reel .cine__num{font-size:.58rem}


}

/* ============================================================
   PÁGINAS LEGALES (aviso de privacidad · términos)
   ============================================================ */
.legal__top{
  position:sticky; top:0; z-index:90;
  background:rgba(6,6,8,.92); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-dark); color:#fff;
}
.legal__top-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--header-h)}
.legal__top .brand__img{height:34px; width:auto}
.legal__body{padding-block:clamp(40px,6vw,72px) clamp(56px,8vw,96px)}
.legal__wrap{max-width:760px}
.legal__title{font-size:clamp(2rem,5vw,3rem); line-height:1.04; margin:0 0 10px}
.legal__meta{color:var(--muted); font-size:.88rem; margin:0 0 12px}
/* Aviso de relleno pendiente: llamativo a propósito, para que no se publique así */
.legal__warn{
  margin:0 0 32px; padding:14px 18px; border-radius:var(--radius-sm);
  background:rgba(255,92,26,.10); border:1px solid var(--hot);
  color:var(--hot-deep); font-size:.88rem;
}
.legal__toc{
  margin:0 0 40px; padding:20px 24px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius-sm);
}
.legal__toc ol{margin:0; padding-left:20px; columns:2; column-gap:28px}
.legal__toc li{margin-bottom:6px; break-inside:avoid}
.legal__toc a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.legal h2{
  font-size:1.22rem; margin:38px 0 12px; padding-top:8px;
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.legal h3{font-size:1rem; margin:22px 0 8px}
.legal p, .legal li{font-size:.96rem; line-height:1.7; color:var(--text)}
.legal p{margin:0 0 14px}
.legal ul, .legal ol{margin:0 0 16px; padding-left:22px}
.legal li{margin-bottom:7px}
.legal a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.legal strong{font-weight:600}
.legal__data{
  margin:0 0 16px; padding:18px 22px; background:var(--paper-2);
  border-left:3px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.legal__data p{margin:0 0 6px; font-size:.92rem}
.legal__data p:last-child{margin:0}

@media (max-width:640px){
  .legal__toc ol{columns:1}
  .legal__top .brand__img{height:28px}
}

/* ============================================================
   CHECKOUT — entrega, dirección y desglose
   ============================================================ */
.ck__group{border:0; padding:0; margin:0 0 18px}
.ck__legend{
  padding:0; margin-bottom:10px;
  font-family:var(--font-head); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.ck__opts{display:grid; gap:8px}
.ck__opt{
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color var(--t), background var(--t);
}
.ck__opt:hover{border-color:var(--accent)}
/* :has da el estado seleccionado sin JS; el borde marca cuál está activo */
.ck__opt:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.ck__opt input{margin-top:3px; accent-color:var(--accent); flex:none}
.ck__opt span{display:flex; flex-direction:column; gap:2px; min-width:0}
.ck__opt strong{font-size:.94rem; font-weight:600}
.ck__opt em{font-style:normal; font-size:.8rem; color:var(--muted)}

.ck__items{
  list-style:none; margin:0 0 20px; padding:14px 16px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-sm);
}
.ck__item{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:baseline; padding:7px 0}
.ck__item + .ck__item{border-top:1px solid var(--line)}
.ck__item-qty{font-family:var(--font-head); font-weight:700; font-size:.84rem; color:var(--muted)}
.ck__item-body{min-width:0}
.ck__item-body b{display:block; font-size:.86rem; font-weight:600; line-height:1.35}
.ck__item-body em{display:block; font-style:normal; font-size:.76rem; color:var(--muted)}
.ck__item-price{font-family:var(--font-head); font-weight:700; font-size:.84rem; white-space:nowrap}

.ck__addr{display:grid; gap:0}
.ck__addr[hidden]{display:none}
.ck__row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ck__row--3{grid-template-columns:1.4fr 1fr 1fr}
.field--sm{max-width:none}

.ck__sum{
  margin:4px 0 18px; padding:16px 0 0; border-top:1px solid var(--line);
  display:grid; gap:8px;
}
.ck__sum > div{display:flex; align-items:baseline; justify-content:space-between; gap:14px}
.ck__sum dt{font-size:.88rem; color:var(--muted)}
.ck__sum dd{margin:0; font-size:.94rem; font-weight:600}
.ck__sum-total{padding-top:10px; border-top:1px solid var(--line)}
.ck__sum-total dt{font-size:1rem; color:var(--text); font-weight:600}
.ck__sum-total dd{font-family:var(--font-head); font-size:1.35rem}
.ck__sum .is-free{color:var(--accent); font-weight:600}

.ck__legal{margin:12px 0 0; font-size:.76rem; color:var(--muted); text-align:center}
.ck__legal a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}

@media (max-width:640px){
  .ck__row,
  .ck__row--3{grid-template-columns:1fr}
}

/* ============================================================
   PÁGINA DE RETORNO DEL PAGO
   ============================================================ */
.gr{display:grid; place-items:center; min-height:calc(100vh - var(--header-h)); padding:40px 0}
.gr__box{max-width:560px; text-align:center}
.gr__icon svg{
  width:64px; height:64px; margin:0 auto 20px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.gr__box.is-ok   .gr__icon{color:var(--accent)}
.gr__box.is-wait .gr__icon{color:var(--hot)}
.gr__box.is-bad  .gr__icon{color:var(--hot-deep)}
.gr__title{font-size:clamp(1.7rem,4vw,2.4rem); line-height:1.1; margin:0 0 12px}
.gr__text{font-size:1rem; line-height:1.65; color:var(--muted); margin:0 auto 18px; max-width:44ch}
.gr__meta{
  display:inline-block; margin:0 0 24px; padding:10px 18px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-pill);
  font-size:.9rem;
}
/* El desglose de lo que se pidió, con la variante de cada renglón. */
.gr__items{
  list-style:none; margin:0 auto 26px; padding:14px 18px; max-width:440px; text-align:left;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-sm);
}
.gr__item{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:baseline; padding:7px 0}
.gr__item + .gr__item{border-top:1px solid var(--line)}
.gr__item-qty{font-family:var(--font-head); font-weight:700; font-size:.84rem; color:var(--muted)}
.gr__item-body{min-width:0; font-size:.88rem}
.gr__item-body b{display:block; font-weight:600; line-height:1.35}
.gr__item-body em{display:block; font-style:normal; font-size:.78rem; color:var(--muted)}
.gr__item-price{font-family:var(--font-head); font-weight:700; font-size:.86rem; white-space:nowrap}
.gr__item--sum{grid-template-columns:1fr auto; color:var(--muted)}
.gr__item--total{grid-template-columns:1fr auto; font-weight:600}
.gr__item--total .gr__item-price{font-size:1.05rem}

.gr__cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.gr__spinner{
  width:44px; height:44px; margin:0 auto 22px;
  border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%;
  animation:grSpin .8s linear infinite;
}
@keyframes grSpin{to{transform:rotate(360deg)}}

/* ============================================================
   MICROANIMACIONES

   Todo lo de aquí anima sólo transform y opacity: son las dos
   propiedades que el navegador resuelve en el compositor, sin
   recalcular layout ni repintar. Nada de animar width, top o
   box-shadow, que sí cuestan.

   El bloque de prefers-reduced-motion del final las desactiva todas.
   ============================================================ */

/* ---------- Entrada escalonada ---------- */
/* Los hijos de un [data-stagger] entran en cascada en vez de todos a
   la vez. El índice lo pone el JS en --i; el tope de 12 evita que el
   último elemento de una reja larga tarde un segundo en aparecer. */
[data-stagger] > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(min(var(--i, 0), 12) * 60ms);
}
[data-stagger].is-in > *{opacity:1; transform:none}

/* ---------- Barra de progreso de lectura ---------- */
/* Con animation-timeline no hace falta ni un listener de scroll: lo
   resuelve el compositor. Donde no esté soportado se queda en
   scaleX(0), o sea invisible, en vez de aparecer llena. */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:95;
  transform-origin:0 50%; transform:scaleX(0);
  background:var(--grad-accent); pointer-events:none;
}
@supports (animation-timeline: scroll()){
  .progress{
    animation:progressGrow linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes progressGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Botones: hundido al pulsar ---------- */
/* Un botón que no responde al dedo se siente muerto. 1.5% de escala
   basta: se percibe sin que parezca que se dobla. */
.btn:active,.icon-btn:active,.card__add:active,.mapbtn:active,.tab:active{
  transform:translateY(0) scale(.985);
}

/* ---------- Botón trabajando ---------- */
.btn.is-busy{pointer-events:none; opacity:.85}
.btn.is-busy::before{
  content:""; width:15px; height:15px; margin-right:9px; flex:none;
  display:inline-block; vertical-align:-2px;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ---------- Contador del carrito ---------- */
.icon-btn--cart .cart-count{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.icon-btn--cart.is-bump .cart-count{animation:cartBump .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes cartBump{
  0%{transform:scale(1)} 35%{transform:scale(1.45)} 100%{transform:scale(1)}
}

/* ---------- Renglones del carrito ---------- */
/* Sólo cuando entra algo nuevo: si se animara en cada render, cambiar
   una cantidad haría parpadear la lista entera. */
.cart__body.is-fresh .cart-item{animation:rowIn .32s cubic-bezier(.22,.61,.36,1) both}
@keyframes rowIn{from{opacity:0; transform:translateX(12px)}to{opacity:1; transform:none}}

/* ---------- Fotos que aparecen al cargar ---------- */
/* Arrancan visibles: si el evento load no llega (caché, error, JS
   apagado) la foto se ve igual. El JS sólo las atenúa cuando de
   verdad están por cargar. */
img.fade-in{opacity:0; transform:scale(1.015)}
img.fade-in.is-loaded{
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Marquesinas: se frenan al pasar el cursor ---------- */
.marquee:hover .marquee__track{animation-play-state:paused}