/* TIC2026 tokens — RUTA 2.0 v2.2 — 2026-07-13 */
/* Tokens de diseno + utilidades base RUTA 2.0 «RODADA».
   Extraido de mockup-4-ruta2.html (L15-47 :root, L80-125 btn/badge/chip,
   L452-498 secciones/reveals). Reglas de vistas concretas NO se incluyen
   (van en tic2026-home/plp/pdp/... — otros bloques). Sin dependencias de DOM demo. */

/* ---------- 0. Tokens ---------- */
:root{
  --bg:#F5F6F8;
  --card:#ffffff;
  --ink:#131A2A;
  --ink-soft:#5A6478;
  --line:#E3E7EE;
  --header:#0D1322;
  --header-glass:rgba(13,19,34,.86);
  --accent:#3C5CA7;
  --accent-dark:#1C45A5;
  --on-accent:#ffffff;
  --ok:#1E8E4E;
  --sale:#D93025;
  --shadow-1:0 1px 2px rgba(19,26,42,.06),0 6px 18px rgba(19,26,42,.07);
  --shadow-2:0 4px 10px rgba(19,26,42,.10),0 18px 42px rgba(19,26,42,.14);
  --r-card:16px;
  --hdh:141px;
  /* — tokens de motion RODADA (únicos en toda la web) — */
  --d-fast:180ms;
  --d-base:320ms;
  --d-travel:620ms;
  --d-set:1100ms;
  --e-settle:cubic-bezier(0.22,1.2,0.36,1);
  --e-settle-fb:cubic-bezier(0.22,1.2,0.36,1);
  --e-travel:cubic-bezier(0.83,0,0.17,1);
  --e-out:cubic-bezier(0.16,1,0.3,1);
  --stagger:45ms;
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --e-settle:linear(0,0.008 1.1%,0.031 2.2%,0.129 4.8%,0.257 7.2%,0.671 14.2%,0.895 20%,1.003 26%,1.032 32.8%,1.021 39.6%,1.006 47.4%,0.999 61.2%,1);
  }
}

/* ---------- 0b. Mapa de acentos por tienda (body.tdc-shop-N via tudetic-shop-class.js) ---------- */
body.tdc-shop-1{--accent:#e40046;--accent-dark:#b80038;--tdc-primary:var(--accent);} /* Tudetic */
body.tdc-shop-2{--accent:#3C5CA7;--accent-dark:#1C45A5;--tdc-primary:var(--accent);} /* Mototic */
body.tdc-shop-3{--accent:#52ADBA;--accent-dark:#36AABA;--tdc-primary:var(--accent);} /* Scubatic */
body.tdc-shop-4{--accent:#A9CA4E;--accent-dark:#8DA841;--tdc-primary:var(--accent);} /* Biketic */
body.tdc-shop-5{--accent:#E50B2C;--accent-dark:#C50925;--tdc-primary:var(--accent);} /* Autotic */
body.tdc-shop-6{--accent:#ff7600;--accent-dark:#cc5e00;--tdc-primary:var(--accent);} /* Trekktic */
body.tdc-shop-7{--accent:#e40046;--accent-dark:#b80038;--tdc-primary:var(--accent);} /* Cubiertas */

/* ---------- 2. Botones / badges / chips ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:14.5px;line-height:1.15;
  border-radius:12px;padding:11px 18px;border:1.5px solid transparent;
  transition:transform var(--d-fast) var(--e-settle),box-shadow var(--d-fast) var(--e-out),background-color var(--d-fast) ease,color var(--d-fast) ease,border-color var(--d-fast) ease;
  position:relative;
}
.btn:active{transform:scale(.97)}
.btn--primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:var(--on-accent);
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 40%,transparent);
}
.btn--dark{background:var(--ink);color:#fff}
.btn--ghost{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(4px)}
.btn--soft{background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent-dark);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.btn--lg{padding:14px 24px;font-size:15.5px;border-radius:14px}
.btn--sm{padding:8px 13px;font-size:13.5px;border-radius:10px}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
@media (hover:hover){
  .btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent)}
  .btn--dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
  .btn--ghost:hover{background:rgba(255,255,255,.18)}
  .btn--soft:hover{background:color-mix(in srgb,var(--accent) 16%,#fff)}
}
.badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 8px;border-radius:7px;line-height:1;
}
.badge--stock{background:#E7F5EC;color:var(--ok)}
.badge--flash{background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent-dark)}
.badge--sale{background:#FDEBE9;color:var(--sale)}
.badge--pct{background:var(--sale);color:#fff}
.badge--compat{background:#E7F5EC;color:var(--ok)}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;
  font-size:13px;font-weight:600;padding:6px 8px 6px 13px;
  transition:transform var(--d-base) var(--e-settle),border-color var(--d-fast) ease;
}
.chip button{display:inline-flex;padding:3px;border-radius:50%;background:#F0F2F6}
.chip.is-out{transform:scale(.6);opacity:0;transition:transform var(--d-base) var(--e-travel),opacity var(--d-base) ease}
@media (hover:hover){.chip button:hover{background:var(--sale);color:#fff}}

/* ---------- 7. Secciones / reveals ---------- */
/* solo padding vertical: el shorthand pisaba el padding-inline de .wrap en «.section.wrap» */
.section{padding-block:clamp(34px,6vw,64px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.eyebrow{
  display:block;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:5px;
}
.sec-head h2,.h-display{
  font-size:clamp(23px,3.4vw,34px);font-weight:900;font-style:italic;letter-spacing:-.02em;text-transform:uppercase;
}
.sec-head h2::before,.h-display::before{content:"/ ";color:var(--accent);font-style:normal}
.sec-link{
  display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:14px;color:var(--accent-dark);
  padding:6px 4px;border-radius:8px;transition:gap var(--d-fast) var(--e-out);
}
@media (hover:hover){.sec-link:hover{gap:10px}}
/* título con máscara por líneas */
.mask-line{display:block;overflow:hidden}
.mask-line>span{display:inline-block}
html.js .mask-line>span{transform:translateY(112%) rotate(2.5deg)}
html.js .mask-line.played>span{transform:none;transition:transform .58s var(--e-settle)}
/* llegada desde profundidad (catálogo) */
html.js .rise{opacity:0;transform:scale(.94);filter:blur(5px)}
html.js .rise.in{
  opacity:1;transform:none;filter:none;
  transition:opacity .45s var(--e-out),transform .55s var(--e-settle),filter .4s ease;
  transition-delay:calc(var(--i,0)*var(--stagger));
}
/* reveal «pop» (genérico) */
html.js .pop{opacity:0;transform:scale(.9)}
html.js .pop.in{
  opacity:1;transform:none;
  transition:opacity .4s ease,transform .55s var(--e-settle);
  transition-delay:calc(var(--i,0)*var(--stagger));
}

/* ---------- Reduced motion (REAL en producción; el demo neutralizaba la query, aquí NO) ---------- */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){ .rise,.pop,.mask-line span{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important;} }

/* ============================================================================
   Tudetic 2026-07-13 r3 — NEUTRALIZACION de prefers-reduced-motion (decision
   explicita del usuario: los efectos RODADA deben verse SIEMPRE; su entorno
   Windows tiene los efectos de animacion del SO desactivados y la web se veia
   plana). Patron identico al del mockup aprobado: cada @media de reduced-motion
   lleva "and (min-width: 99999px)" (nunca aplica). Para REACTIVAR la
   accesibilidad: quitar ese sufijo en todos los tic2026-*.css y restaurar el
   rmMQ original en tic2026-motion.js.
   ============================================================================ */