/* business.css — OWNER business · Slide 6 · Modelo de negocio RaaS.
   Usa exclusivamente variables de css/tokens.css. */

#slide-7{
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(79,124,255,.12), transparent 58%),
    radial-gradient(90% 80% at 100% 110%, rgba(226,72,61,.06), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800) 60%, var(--navy-900));
}

.biz{
  display:flex;
  flex-direction:column;
  gap:clamp(24px,4vh,44px);
  padding-top:clamp(56px,7vh,72px);
  padding-bottom:clamp(36px,5vh,52px);
}

/* ---------- Encabezado ---------- */
.biz__head{max-width:62ch}
.biz__head .eyebrow{display:block;margin-bottom:12px}
.biz__title{
  font-size:clamp(2rem,4.4vw,3.4rem);
  color:var(--ink);
  line-height:1.04;
}
.biz__title-accent{color:var(--accent-soft)}
.biz__lede{
  margin-top:1.1rem;
  max-width:60ch;
  font-size:clamp(.95rem,1.2vw,1.06rem);
  line-height:1.6;
  color:var(--muted);
}
.biz__lede strong{color:var(--ink);font-weight:600}

/* ---------- Grid principal ---------- */
.biz__grid{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(20px,2.6vw,40px);
  align-items:stretch;
}

/* ---------- Pricing card ---------- */
.biz__price{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(22px,2.4vw,34px);
  border:1px solid rgba(79,124,255,.35);
  border-radius:22px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(79,124,255,.16), transparent 60%),
    var(--glass);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.85), 0 0 60px -28px rgba(79,124,255,.5);
}
.biz__price-eyebrow{
  font-family:var(--font-head);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-soft);
}
.biz__price-figure{
  display:flex;
  align-items:baseline;
  gap:.4rem;
  margin-top:.55rem;
}
.biz__price-amount{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(3rem,6vw,4.6rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.biz__price-period{
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.05rem;
  color:var(--accent-soft);
}
.biz__price-sub{
  margin-top:.5rem;
  font-size:.82rem;
  color:var(--muted);
}
.biz__includes{
  list-style:none;
  margin-top:clamp(1.1rem,2.2vh,1.6rem);
  padding-top:clamp(1.1rem,2.2vh,1.6rem);
  border-top:1px solid var(--line);
  display:grid;
  gap:.75rem;
}
.biz__includes li{
  position:relative;
  padding-left:24px;
  font-size:.86rem;
  line-height:1.45;
  color:var(--steel);
}
.biz__includes li::before{
  content:"";
  position:absolute;
  left:0;top:.36em;
  width:13px;height:8px;
  border-left:2px solid var(--accent-soft);
  border-bottom:2px solid var(--accent-soft);
  transform:rotate(-45deg);
}

/* ---------- Lado derecho: timeline + métricas ---------- */
.biz__side{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2.4vh,26px);
}
.biz__side-title{
  font-family:var(--font-head);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-soft);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

/* ---------- Calculadora interactiva de flota ---------- */
.biz__calc{
  position:relative;
  padding:clamp(18px,2vw,26px);
  border:1px solid rgba(79,124,255,.32);
  border-radius:18px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(79,124,255,.12), transparent 60%),
    rgba(15,31,85,.34);
  box-shadow:0 24px 60px -40px rgba(0,0,0,.8);
}
.biz__calc-readout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.4vw,18px);
}
.biz__calc-figure{
  padding:clamp(12px,1.4vw,16px);
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(6,13,40,.45);
}
.biz__calc-figure--accent{
  border-color:rgba(255,59,48,.32);
  background:rgba(255,59,48,.07);
}
.biz__calc-num{
  display:block;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(1.5rem,2.8vw,2.2rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.biz__calc-figure--accent .biz__calc-num{color:var(--red-soft)}
.biz__calc-lbl{
  display:block;
  margin-top:.4rem;
  font-size:.74rem;
  letter-spacing:.02em;
  color:var(--muted);
}
.biz__calc-armsrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:clamp(14px,1.8vh,20px);
  margin-bottom:.5rem;
}
.biz__calc-arms{font-size:.86rem;color:var(--steel)}
.biz__calc-arms b{
  font-family:var(--font-head);
  font-size:1.05rem;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.biz__calc-tier{
  font-family:var(--font-head);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-soft);
  padding:.28rem .7rem;
  border:1px solid rgba(79,124,255,.4);
  border-radius:999px;
  background:rgba(79,124,255,.1);
  white-space:nowrap;
}
/* Slider */
.biz__calc-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--fill,0%),rgba(138,152,189,.18) var(--fill,0%));
  outline:none;
  cursor:pointer;
}
.biz__calc-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--red));
  border:2px solid #fff;
  box-shadow:0 4px 14px -2px rgba(58,107,255,.8);
  cursor:grab;
  transition:transform .15s var(--ease);
}
.biz__calc-slider::-webkit-slider-thumb:active{transform:scale(1.15);cursor:grabbing}
.biz__calc-slider::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;border:2px solid #fff;
  background:var(--accent);box-shadow:0 4px 14px -2px rgba(58,107,255,.8);cursor:grab;
}
/* Presets */
.biz__calc-presets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:clamp(12px,1.6vh,16px);
}
.biz__calc-preset{
  flex:1 1 auto;
  padding:.5rem .4rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(6,13,40,.4);
  color:var(--muted);
  font-family:var(--font-head);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .15s var(--ease);
}
.biz__calc-preset:hover{color:var(--ink);border-color:rgba(79,124,255,.4);transform:translateY(-1px)}
.biz__calc-preset.is-active{
  color:var(--ink);
  border-color:rgba(79,124,255,.6);
  background:rgba(79,124,255,.16);
  box-shadow:0 0 0 1px rgba(79,124,255,.25) inset;
}

.biz__timeline{
  padding:clamp(16px,1.8vw,22px);
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(15,31,85,.30);
}
.biz__steps{
  list-style:none;
  display:grid;
  gap:14px;
}
.biz__step{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"tag amt" "note note";
  gap:.2rem .9rem;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(6,13,40,.4);
}
.biz__step--accent{
  border-color:rgba(79,124,255,.4);
  background:rgba(79,124,255,.08);
}
.biz__step-tag{
  grid-area:tag;
  align-self:center;
  font-family:var(--font-head);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel-dim);
}
.biz__step--accent .biz__step-tag{color:var(--accent-soft)}
.biz__step-amt{
  grid-area:amt;
  justify-self:end;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.1rem;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.biz__step-note{
  grid-area:note;
  margin-top:.3rem;
  font-size:.8rem;
  line-height:1.45;
  color:var(--muted);
}
.biz__step-note strong{color:var(--steel);font-weight:600}

/* ---------- Métricas ---------- */
.biz__metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.biz__metric{
  padding:clamp(16px,1.8vw,22px);
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--glass);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.biz__metric--accent{
  border-color:rgba(79,124,255,.4);
  background:rgba(79,124,255,.08);
}
.biz__metric-num{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(1.7rem,3vw,2.4rem);
  line-height:1;
  color:var(--ink);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.biz__metric--accent .biz__metric-num{color:var(--accent-soft)}
.biz__metric-sub{font-size:.4em;font-weight:600;color:var(--accent-soft);letter-spacing:0}
.biz__metric-lbl{
  font-size:.8rem;
  line-height:1.4;
  color:var(--muted);
}

/* ---------- Interactividad (business.js) ----------
   Solo da vida al contenido existente: reveal al entrar en vista, glow que
   sigue al cursor y pasos del timeline enfocables. No cambia ni agrega texto. */

/* Reveal escalonado — el estado oculto solo lo aplica el JS (clase .biz-reveal),
   así sin JS el contenido permanece visible. */
.biz-reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:var(--biz-delay,0ms);
}
.biz.is-revealed .biz-reveal{opacity:1;transform:none}

/* Tarjeta de precio: realce al hover + glow que sigue al cursor */
.biz__price{transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)}
.biz__price:hover{
  transform:translateY(-3px);
  border-color:rgba(79,124,255,.55);
  box-shadow:0 36px 90px -40px rgba(0,0,0,.9), 0 0 80px -26px rgba(79,124,255,.65);
}
.biz__price::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,0%), rgba(79,124,255,.20), transparent 70%);
  opacity:0;
  transition:opacity .3s var(--ease);
}
.biz__price.is-lit::after{opacity:1}

/* Items "incluye": micro-desplazamiento y check que se enciende */
.biz__includes li{transition:color .25s var(--ease), transform .25s var(--ease)}
.biz__includes li:hover{color:var(--ink);transform:translateX(3px)}
.biz__includes li::before{transition:border-color .25s var(--ease), transform .25s var(--ease)}
.biz__includes li:hover::before{border-color:var(--accent);transform:rotate(-45deg) scale(1.15)}

/* Pasos del timeline: clicables/enfocables (role=button vía JS) */
.biz__step{
  cursor:pointer;
  transition:transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.biz__step:hover{transform:translateY(-2px);border-color:rgba(79,124,255,.45)}
.biz__step:focus-visible{outline:none;border-color:rgba(79,124,255,.6)}
.biz__step.is-focused{
  border-color:rgba(79,124,255,.7);
  background:rgba(79,124,255,.14);
  box-shadow:0 0 0 1px rgba(79,124,255,.3) inset, 0 24px 60px -42px rgba(0,0,0,.85);
}

@media (prefers-reduced-motion: reduce){
  .biz-reveal{transition:none}
  .biz__price,.biz__includes li,.biz__step,.biz__price::after{transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .biz__grid{grid-template-columns:1fr;gap:24px}
}
@media (max-width:560px){
  .biz__metrics{grid-template-columns:1fr}
  .biz__step{grid-template-columns:1fr;grid-template-areas:"tag" "amt" "note";gap:.25rem}
  .biz__step-amt{justify-self:start}
}