/* SAENZ BIKES — DESIGN SYSTEM V1.0
   Fuente única para tokens y componentes reutilizables. */
:root{
  /* Color */
  --sb-black:#050505;
  --sb-surface:#0d0d0f;
  --sb-surface-2:#141416;
  --sb-surface-3:#1b1b1e;
  --sb-white:#f7f7f4;
  --sb-text:#f7f7f4;
  --sb-muted:#a8a8ad;
  --sb-muted-2:#74747a;
  --sb-red:#e31b2b;
  --sb-red-hover:#f12638;
  --sb-whatsapp:#25d366;
  --sb-line:#2d2d31;

  /* Layout */
  --sb-max:1480px;
  --sb-gutter:24px;

  /* Escala de espaciado */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-7:96px;
  --space-8:128px;

  /* Bordes */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;

  /* Movimiento */
  --ease:cubic-bezier(.2,.7,.2,1);
  --duration-fast:180ms;
  --duration:280ms;

  /* Sombra */
  --shadow-card:0 18px 50px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sb-black);color:var(--sb-text);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}

.sb-container{width:min(var(--sb-max),calc(100% - (var(--sb-gutter) * 2)));margin-inline:auto}
.sb-section{padding-block:var(--space-7)}
.sb-stack{display:flex;flex-direction:column;gap:var(--space-3)}
.sb-cluster{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
.sb-grid{display:grid;gap:var(--space-3)}
.sb-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sb-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.sb-kicker{margin:0 0 10px;color:var(--sb-red);font-family:'Barlow Condensed',sans-serif;font-size:clamp(15px,1.2vw,20px);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sb-display{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:clamp(54px,8vw,126px);font-weight:700;letter-spacing:-.035em;line-height:.82;text-transform:uppercase}
.sb-h2{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:clamp(38px,5vw,72px);font-weight:700;letter-spacing:-.025em;line-height:.92;text-transform:uppercase}
.sb-h3{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:clamp(30px,3vw,46px);font-weight:700;line-height:.95;text-transform:uppercase}
.sb-body{font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:#d5d5d7}
.sb-muted{color:var(--sb-muted)}
.sb-rule{width:84px;height:3px;background:var(--sb-red)}

/* Botones */
.sb-button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:14px 22px;border:1px solid var(--sb-red);border-radius:var(--radius-md);background:transparent;color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:background var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease),transform var(--duration-fast) var(--ease)}
.sb-button:hover{background:var(--sb-red);transform:translateY(-2px)}
.sb-button:focus-visible{outline:3px solid rgba(227,27,43,.35);outline-offset:3px}
.sb-button--solid{background:var(--sb-red)}
.sb-button--solid:hover{background:var(--sb-red-hover);border-color:var(--sb-red-hover)}
.sb-button--secondary{border-color:#5d5d62;background:var(--sb-surface)}
.sb-button--secondary:hover{background:var(--sb-surface-2);border-color:#fff}
.sb-button--whatsapp{background:var(--sb-whatsapp);border-color:var(--sb-whatsapp);color:#06150b}
.sb-button--whatsapp:hover{background:#32e578;border-color:#32e578}
.sb-button--text{min-height:auto;padding:0;border:0;border-radius:0;color:var(--sb-white)}
.sb-button--text:hover{background:none;color:var(--sb-red);transform:none}

/* Tarjeta base */
.sb-card{position:relative;overflow:hidden;border:1px solid var(--sb-line);border-radius:var(--radius-lg);background:var(--sb-surface);box-shadow:0 0 0 rgba(0,0,0,0);transition:transform var(--duration) var(--ease),border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}
.sb-card:hover{transform:translateY(-4px);border-color:#47474c;box-shadow:var(--shadow-card)}
.sb-card__media{position:relative;display:flex;align-items:center;justify-content:center;min-height:290px;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(74,78,82,.72) 0%,rgba(34,36,39,.72) 28%,rgba(15,16,18,.96) 62%,#080809 100%)}
.sb-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 38%),radial-gradient(ellipse at 50% 84%,rgba(0,0,0,.75),transparent 46%);pointer-events:none}
.sb-card__media img{position:relative;z-index:1;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 24px 22px rgba(0,0,0,.88));transition:transform .5s var(--ease)}
.sb-card:hover .sb-card__media img{transform:scale(1.025)}
.sb-card__body{padding:var(--space-4)}
.sb-card__eyebrow{margin:0 0 8px;color:var(--sb-red);font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sb-card__title{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:clamp(32px,3vw,48px);line-height:.94;text-transform:uppercase}
.sb-card__text{margin:14px 0 0;color:#c8c8cc;line-height:1.55}
.sb-card__footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-2);border-top:1px solid var(--sb-line);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase}
.sb-card__footer b{color:var(--sb-red)}

/* Variantes semánticas */
.sb-bike-card .sb-card__media{aspect-ratio:16/11}
.sb-equipment-card .sb-card__media{aspect-ratio:4/3}
.sb-product-card .sb-card__media{aspect-ratio:1/1}
.sb-service-card .sb-card__media{aspect-ratio:16/10}
.sb-tech-card{padding:var(--space-4)}
.sb-tech-card .sb-card__title{font-size:34px}
.sb-price{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700}
.sb-badge{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border:1px solid var(--sb-line);border-radius:999px;color:#d5d5d7;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* Formularios */
.sb-input{width:100%;min-height:52px;padding:13px 16px;border:1px solid var(--sb-line);border-radius:var(--radius-md);background:var(--sb-surface);color:var(--sb-white);outline:none;transition:border-color var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease)}
.sb-input:focus{border-color:var(--sb-red);box-shadow:0 0 0 3px rgba(227,27,43,.16)}

/* Movimiento accesible */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media(max-width:980px){.sb-grid--4,.sb-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  :root{--sb-gutter:14px}
  .sb-section{padding-block:var(--space-6)}
  .sb-display{font-size:clamp(52px,18vw,78px)}
  .sb-h2{font-size:clamp(36px,12vw,54px)}
  .sb-button{width:100%;min-height:52px}
  .sb-grid--4,.sb-grid--3,.sb-grid--2{grid-template-columns:1fr}
  .sb-card__media{min-height:250px}
  .sb-card__body{padding:var(--space-3)}
}

/* SAENZ BIKES UX: toda imagen con destino es clickeable */
.clickable-media,.hero-bike--link{cursor:pointer;text-decoration:none}
.clickable-media img,.hero-bike--link img{transition:transform .45s var(--ease, ease)}
.clickable-media:hover img,.hero-bike--link:hover img{transform:scale(1.025)}
.clickable-product-image{cursor:zoom-in}
.family-card{cursor:pointer;text-decoration:none;color:inherit}
.family-card:focus-visible,.clickable-media:focus-visible,.hero-bike--link:focus-visible,.clickable-product-image:focus-visible{outline:2px solid #d71920;outline-offset:4px}
