/* ============================================================
   THE WHEEL — Creative Innovation Lab · McCann Lima
   Design system + landing styles
   ============================================================ */

:root{
  /* Brand */
  --orange:      #FF681C;   /* logo orange */
  --orange-hot:  #FF7A33;
  --blue:        #3601F5;   /* electric */
  --blue-soft:   #7C66FF;   /* blue for text on dark */
  --cyan:        #8FE8FC;
  --green:       #00E973;

  /* Neutrals (warm) */
  --ink:         #0B0B0D;   /* base dark */
  --ink-2:       #141417;   /* raised dark */
  --ink-3:       #1E1E22;   /* card / line on dark */
  --cream:       #F4F0E7;   /* warm light */
  --cream-2:     #EAE4D7;
  --paper-ink:   #16140F;   /* near-black text on cream */

  --white:       #FFFFFF;
  --line-dark:   rgba(255,255,255,.14);
  --line-light:  rgba(22,20,15,.14);

  /* Type */
  --display: "Archivo Expanded","Archivo",system-ui,sans-serif;
  --sans:    "Archivo",system-ui,sans-serif;
  --mono:    "Space Mono","Archivo",monospace;

  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 84px);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
::selection{background:var(--orange); color:#000}

/* ---------- Helpers ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.kicker{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  display:inline-flex; align-items:center; gap:.6em;
}
.kicker::before{
  content:""; width:26px; height:2px; background:currentColor; display:inline-block;
}
.kicker.dot::before{ width:9px; height:9px; border-radius:50%; background:var(--orange) }

.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--orange); font-weight:700;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.display-xl{ font-size:clamp(2.9rem, 9.2vw, 9rem) }
.display-l { font-size:clamp(2.4rem, 6vw, 5.4rem) }
.display-m { font-size:clamp(1.7rem, 3.4vw, 3rem) }

p{text-wrap:pretty}
.lead{font-size:clamp(1.05rem,1.55vw,1.4rem); line-height:1.5; color:rgba(255,255,255,.74)}

.orange{color:var(--orange)}
.outline-txt{
  color:transparent;
  -webkit-text-stroke:1.5px currentColor;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--mono); font-weight:700; font-size:.84rem;
  letter-spacing:.04em; text-transform:uppercase;
  padding:1.05em 1.6em; border-radius:100px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn .arrow{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{ background:var(--orange); color:#000 }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -10px var(--orange) }
.btn-ghost{ background:transparent; color:var(--white); box-shadow:inset 0 0 0 1.5px var(--line-dark) }
.btn-ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--white); transform:translateY(-2px) }
.btn-dark{ background:#000; color:var(--white) }
.btn-dark:hover{ transform:translateY(-2px) }
.on-light .btn-ghost{ color:var(--paper-ink); box-shadow:inset 0 0 0 1.5px var(--line-light) }
.on-light .btn-ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--paper-ink) }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s, backdrop-filter .4s, padding .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,11,13,.88);
  backdrop-filter:blur(6px);
  border-bottom-color:var(--line-dark);
  padding-top:13px; padding-bottom:13px;
}
.nav-logo{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-weight:700; letter-spacing:.04em}
.nav-logo img{width:38px; height:38px}
.nav-logo span{font-size:.7rem; line-height:1.05; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6)}
.nav-links{display:flex; align-items:center; gap:34px}
.nav-links a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.7); transition:color .2s; position:relative;
}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--orange); transition:width .25s}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:14px}
.nav-burger{display:none; flex-direction:column; gap:5px; padding:6px}
.nav-burger span{width:24px; height:2px; background:#fff; transition:.3s}

@media(max-width:920px){
  .nav-links{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:30px;
    background:rgba(11,11,13,.97); backdrop-filter:blur(8px);
    transform:translateX(100%); transition:transform .4s cubic-bezier(.6,0,.2,1);
  }
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.3rem}
  .nav-burger{display:flex; z-index:101}
  .nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-burger.open span:nth-child(2){opacity:0}
  .nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-cta .btn{display:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:140px 0 70px; overflow:hidden;
}
.hero-wheel{
  position:absolute; top:50%; right:-12vw; translate:0 -50%;
  width:min(78vh, 760px); aspect-ratio:1; opacity:.9;
  pointer-events:none; z-index:0;
  filter:drop-shadow(0 0 80px rgba(255,104,28,.18));
}
.hero-wheel img{width:100%; height:100%; opacity:.16}
.hero-glow{
  position:absolute; z-index:0; width:60vw; height:60vw; right:-10vw; top:10%;
  background:radial-gradient(circle, rgba(255,104,28,.20), transparent 60%);
  pointer-events:none;
}
.hero .wrap{position:relative; z-index:2; width:100%}
.hero-kick{color:var(--orange); margin-bottom:30px}
.hero h1{ max-width:15ch; margin-bottom:34px }
.hero h1 em{font-style:normal; color:var(--orange)}
.hero-lead{max-width:48ch; margin-bottom:42px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

@media(max-width:920px){
  .hero-wheel{right:-30vw; width:90vw; top:62%}
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  border-block:1px solid var(--line-dark); background:var(--ink-2);
  overflow:hidden; padding:18px 0;
}
.marquee-track{display:flex; gap:48px; width:max-content; animation:scrollx 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:1.5rem; letter-spacing:.02em; color:rgba(255,255,255,.55);
  display:inline-flex; align-items:center; gap:48px; white-space:nowrap;
}
.marquee-item::after{content:"●"; color:var(--orange); font-size:.6em}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ============================================================
   SECTION basics
   ============================================================ */
.section{padding:clamp(80px,11vw,160px) 0; position:relative}
.section-head{max-width:60ch; margin-bottom:clamp(48px,7vw,84px)}
.section-head .eyebrow{margin-bottom:22px; display:block}
.section.light{background:var(--cream); color:var(--paper-ink)}
.section.light .lead{color:rgba(22,20,15,.66)}
.section.light .kicker{color:var(--paper-ink)}

/* ============================================================
   ABOUT / QUÉ ES — editorial block (Outpost-style)
   ============================================================ */
.about-sec{position:relative; overflow:hidden}
.about-mccann{
  position:absolute; top:50%; right:4%; translate:0 -50%;
  width:min(42vw,620px); opacity:.08;
  pointer-events:none; z-index:0;
}
.about-mccann img{width:100%; height:auto}
.about-inner{position:relative; z-index:2}
.about-eyebrow{display:block; margin-bottom:30px}
.about-headline{
  font-family:var(--display); font-weight:800; line-height:1.04;
  letter-spacing:-.015em; font-size:clamp(1.8rem, 3.8vw, 3.4rem);
  max-width:19ch; margin-bottom:44px;
}
.about-headline em{font-style:normal; color:var(--orange)}
@media(max-width:680px){ .about-mccann{right:-20%; width:80vw; opacity:.05} }

/* ============================================================
   ABOUT PAGE (the-wheel.html)
   ============================================================ */
.about-hero{min-height:90svh}
.about-hero-wheel{
  position:absolute; top:50%; right:-10vw; translate:0 -50%;
  width:min(74vh,720px); aspect-ratio:1; opacity:.16; z-index:0; pointer-events:none;
  filter:drop-shadow(0 0 80px rgba(255,104,28,.18));
}
.about-hero-wheel img{width:100%; height:100%; animation:spin 50s linear infinite}
.about-hero .wrap{position:relative; z-index:2}
.back-link{
  display:inline-block; font-family:var(--mono); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:34px; transition:color .2s;
}
.back-link:hover{color:var(--orange)}
.about-hero h1{max-width:16ch; margin-bottom:36px}
.about-hero h1 em{font-style:normal; color:var(--orange)}
.about-intro{max-width:54ch}

.verb-list{display:flex; flex-direction:column}
.verb-row{
  display:grid; grid-template-columns:auto 1fr 2fr; gap:clamp(20px,4vw,60px); align-items:start;
  padding:clamp(26px,3.5vw,42px) 0; border-top:1px solid var(--line-light);
}
.verb-row:last-child{border-bottom:1px solid var(--line-light)}
.verb-row .vr-num{font-family:var(--mono); color:var(--orange); font-size:.86rem; letter-spacing:.1em; padding-top:.5em}
.verb-row .vr-name{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.6rem,3.2vw,2.8rem); line-height:.95}
.verb-row .vr-copy{color:rgba(22,20,15,.66); font-size:1.02rem; max-width:46ch}
@media(max-width:780px){
  .verb-row{grid-template-columns:auto 1fr; }
  .verb-row .vr-copy{grid-column:1/-1}
}

/* ============================================================
   CYCLE — interactive dial
   ============================================================ */
.cycle-top{display:block; margin-bottom:0}
.cycle-head{margin-bottom:clamp(40px,6vw,72px); max-width:60ch}
.cycle-head h2{max-width:18ch}
.cycle-top .dial{width:clamp(340px,46vw,540px); max-width:none; margin:0 auto}
/* wide screens: heading left, dial on the right in the same row */
@media(min-width:1200px){
  .cycle-top{display:grid; grid-template-columns:1fr auto; align-items:center; gap:clamp(40px,5vw,80px)}
  .cycle-head{margin-bottom:0; max-width:none}
  .cycle-head h2{max-width:12ch}
  .cycle-top .dial{width:min(34vw,460px); margin:0 60px 0 0; justify-self:end}
}
.dial{position:relative; aspect-ratio:1; width:100%; max-width:520px; margin-inline:auto}
.dial-core{
  position:absolute; inset:31%; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 50% 30%, var(--ink-3), var(--ink-2));
  box-shadow:inset 0 0 0 1px var(--line-dark);
}
.dial-core img{width:54%; animation:spin 26s linear infinite}
.dial-ring{position:absolute; inset:0; border-radius:50%; border:1px dashed var(--line-dark)}
.node{
  position:absolute; top:50%; left:50%; width:206px; height:206px; margin:-103px;
  border-radius:50%; cursor:pointer;
  perspective:900px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.node-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.node:hover{ z-index:5 }
.node:hover .node-inner{ transform:rotateY(180deg) }
.node-face{
  position:absolute; inset:0; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:26px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px var(--line-dark);
}
.node-front{ background:var(--ink-2); transition:background .4s, color .4s, box-shadow .4s }
.node-back{
  background:var(--orange); color:#000; transform:rotateY(180deg);
  box-shadow:0 22px 50px -16px rgba(255,104,28,.6);
  gap:10px;
}
.node-back .nb-tag{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:rgba(0,0,0,.6)}
.node-back p{font-family:var(--sans); font-size:.88rem; line-height:1.34; font-weight:600; max-width:19ch}
.node .n-num{font-family:var(--mono); font-size:.74rem; color:var(--orange); letter-spacing:.1em; transition:color .4s}
.node .n-label{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.35rem; margin-top:5px}
.node.active{ transform:scale(1.08) }
.node.active .node-front{ background:var(--orange); color:#000; box-shadow:0 18px 40px -12px rgba(255,104,28,.7) }
.node.active .node-front .n-num{ color:#000 }

/* horizontal steps removed — all detail now lives in the dial nodes */
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:880px){
  .cycle-top .dial{width:min(400px,90%); margin-inline:auto}
}
@media(max-width:520px){
  .node{width:154px; height:154px; margin:-77px}
  .node-face{padding:16px}
  .node-back p{font-size:.68rem; max-width:15ch}
  .node-back .nb-tag{font-size:.6rem}
  .node .n-label{font-size:1.05rem}
}
/* Móvil: el dial circular se reacomoda en tarjetas apiladas para no
   recortarse y para mostrar la descripción de cada etapa (no hay hover). */
@media(max-width:600px){
  .dial{position:static; display:flex; flex-direction:column; gap:12px;
    aspect-ratio:auto; width:100% !important; max-width:none; height:auto; margin:0}
  .dial-ring,.dial-core{display:none}
  .node{position:static !important; width:100% !important; height:auto !important;
    margin:0 !important; perspective:none; border-radius:18px;
    box-shadow:inset 0 0 0 1px var(--line-dark);
    transition:box-shadow .4s, background .4s}
  .node.active{transform:none; background:rgba(255,104,28,.06);
    box-shadow:inset 0 0 0 1px var(--orange)}
  .node-inner{position:static; transform:none !important; height:auto}
  .node-face{position:static; inset:auto; width:100%; height:auto; border-radius:0;
    box-shadow:none; align-items:stretch; justify-content:flex-start;
    text-align:left; backface-visibility:visible; -webkit-backface-visibility:visible}
  .node-front{background:transparent; flex-direction:row; align-items:baseline;
    gap:12px; padding:20px 22px 6px}
  .node-front .n-num{font-size:.8rem}
  .node-front .n-label{margin-top:0; font-size:1.5rem}
  .node.active .node-front,.node.active .node-front .n-num{background:transparent; color:inherit}
  .node.active .n-num,.node.active .n-label{color:var(--orange)}
  .node-back{background:transparent; color:var(--cream); transform:none !important;
    box-shadow:none; padding:0 22px 20px; gap:6px}
  .node-back .nb-tag{display:none}
  .node-back p{width:100%; max-width:none; font-size:.95rem; line-height:1.4;
    font-weight:500; color:var(--cream); opacity:.66; overflow-wrap:anywhere}
}

/* ============================================================
   DIFERENCIADORES
   ============================================================ */
.diff-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.diff-card{
  background:var(--cream-2); border-radius:22px; padding:38px 34px 42px;
  position:relative; overflow:hidden; min-height:340px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.diff-card:hover{transform:translateY(-6px)}
.diff-card .d-ico{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.diff-card h3{font-size:1.7rem; margin:18px 0 12px}
.diff-card p{color:rgba(22,20,15,.62); font-size:1rem}
.diff-card .d-big{font-family:var(--display); font-weight:800; font-size:clamp(3rem,5vw,4.6rem); line-height:.85; color:var(--orange)}
.diff-card.feature{background:var(--ink); color:#fff; box-shadow:inset 0 0 0 1px var(--line-dark)}
.diff-card.feature p{color:rgba(255,255,255,.6)}
@media(max-width:880px){ .diff-grid{grid-template-columns:1fr} }

/* ============================================================
   STATS band
   ============================================================ */
.stats{background:var(--orange); color:#000}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-block:clamp(56px,7vw,90px)}
.stat{border-left:2px solid rgba(0,0,0,.28); padding-left:22px}
.stat .s-num{font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,4.6vw,4.4rem); line-height:.9; letter-spacing:-.02em}
.stat .s-lab{font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin-top:12px; max-width:22ch}
@media(max-width:760px){ .stats .wrap{grid-template-columns:1fr 1fr; gap:34px 20px} }

/* ============================================================
   PRODUCTS — poster cards + fullscreen overlay
   ============================================================ */
.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.prod-card{
  position:relative; overflow:hidden; text-align:left;
  min-height:clamp(360px,40vw,480px); padding:34px 32px 36px;
  border-radius:24px; background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-dark); color:#fff;
  display:flex; flex-direction:column; gap:18px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), background .4s, color .4s, box-shadow .4s;
}
.prod-card .pcard-num{font-family:var(--mono); font-size:.8rem; letter-spacing:.12em; color:var(--orange); transition:color .4s}
.prod-card .pcard-name{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.6rem,2.6vw,2.5rem); line-height:.98; letter-spacing:-.01em;
}
.prod-card .pcard-desc{font-size:1rem; color:rgba(255,255,255,.6); line-height:1.45; max-width:26ch; transition:color .4s}
.prod-card .pcard-cta{
  margin-top:auto; font-family:var(--mono); font-weight:700; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6em;
}
.prod-card .pcard-cta .arrow{transition:transform .3s}
.prod-card .pcard-wheel{
  position:absolute; right:-22%; bottom:-30%; width:75%; aspect-ratio:1;
  opacity:.05; pointer-events:none; transition:opacity .4s, transform .6s cubic-bezier(.2,.8,.2,1);
}
.prod-card .pcard-wheel img{width:100%; height:100%}
.prod-card:hover{transform:translateY(-8px); background:var(--orange); color:#000; box-shadow:none}
.prod-card:hover .pcard-num{color:#000}
.prod-card:hover .pcard-desc{color:rgba(0,0,0,.7)}
.prod-card:hover .pcard-cta .arrow{transform:translateX(5px)}
.prod-card:hover .pcard-wheel{opacity:.14; transform:rotate(40deg)}

/* per-product brand accents: 01 orange · 02 cyan · 03 green */
.prod-card[data-p="1"] .pcard-num{color:var(--cyan)}
.prod-card[data-p="1"]:hover{background:var(--cyan)}
.prod-card[data-p="2"] .pcard-num{color:var(--green)}
.prod-card[data-p="2"]:hover{background:var(--green)}

/* products section sits on cream — dark cards pop */
.section.light .prod-card{background:var(--ink); box-shadow:none}
.section.light .prod-card:hover{background:var(--orange)}
.section.light .prod-card[data-p="1"]:hover{background:var(--cyan)}
.section.light .prod-card[data-p="2"]:hover{background:var(--green)}

.prod-panel[data-p="1"] .ghost{-webkit-text-stroke-color:var(--cyan)}
.prod-panel[data-p="1"] .pp-metric .v{color:var(--cyan)}
.prod-panel[data-p="1"] .pp-label{color:var(--cyan)}
.prod-panel[data-p="1"] .pd-k{color:var(--cyan)}
.prod-panel[data-p="2"] .ghost{-webkit-text-stroke-color:var(--green)}
.prod-panel[data-p="2"] .pp-metric .v{color:var(--green)}
.prod-panel[data-p="2"] .pp-label{color:var(--green)}
.prod-panel[data-p="2"] .pd-k{color:var(--green)}

/* overlay */
.prod-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(5,5,6,.6); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.prod-overlay.open{opacity:1; pointer-events:auto}
.prod-sheet{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--ink); 
  transform:translateY(5vh); transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.prod-overlay.open .prod-sheet{transform:none}
.prod-sheet-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gutter); border-bottom:1px solid var(--line-dark);
  background:rgba(11,11,13,.85); backdrop-filter:blur(10px);
}
.psb-label{font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); font-weight:700}
.psb-nav{display:flex; align-items:center; gap:10px}
.psb-arrow,.psb-close{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--line-dark); color:#fff; font-size:1rem;
  transition:background .25s, color .25s, box-shadow .25s, transform .25s;
}
.psb-arrow:hover,.psb-close:hover{background:#fff; color:#000; box-shadow:none; transform:scale(1.06)}
.psb-close{background:var(--orange); color:#000; box-shadow:none}
.psb-close:hover{background:#fff}
.prod-sheet-scroll{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(40px,6vh,70px) 0 90px;
  scrollbar-width:thin; scrollbar-color:var(--ink-3) transparent;
}

.prod-panel{display:none}
.prod-panel.active{display:block; animation:fade .5s both}
@keyframes fade{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

/* header */
.pp-head{
  display:grid; grid-template-columns:1.6fr .8fr; gap:clamp(30px,5vw,70px);
  align-items:end; padding-bottom:clamp(34px,4vw,52px);
  border-bottom:1px solid var(--line-dark);
}
.pp-title{font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,4.6vw,4rem); line-height:.95; letter-spacing:-.01em; margin-bottom:22px}
.pp-title .ghost{ -webkit-text-stroke:1.5px var(--orange); color:transparent }
.pp-lead{font-size:clamp(1.02rem,1.4vw,1.25rem); line-height:1.55; color:rgba(255,255,255,.72); max-width:50ch}
.pp-metric{text-align:right}
.pp-metric .v{font-family:var(--display); font-weight:800; font-size:clamp(2.8rem,5vw,4.6rem); line-height:.85; color:var(--orange); letter-spacing:-.02em}
.pp-metric .l{font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.6); margin-top:12px; max-width:24ch; margin-left:auto}

/* section labels inside a panel */
.pp-label{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); display:flex; align-items:center; gap:.8em; margin-bottom:28px;
}
.pp-label::before{content:""; width:24px; height:1.5px; background:currentColor}

/* diferenciales */
.pp-block{padding-top:clamp(40px,5vw,60px)}
.pp-diffs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.pp-diff{
  background:var(--ink-2); border-radius:18px; padding:30px 28px 34px;
  box-shadow:inset 0 0 0 1px var(--line-dark); min-height:200px;
  display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.pp-diff:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.pp-diff .pd-k{font-family:var(--mono); color:var(--orange); font-size:.8rem; letter-spacing:.06em; margin-bottom:auto}
.pp-diff strong{display:block; font-family:var(--display); font-weight:700; font-size:1.2rem; margin:28px 0 10px}
.pp-diff span{color:rgba(255,255,255,.6); font-size:.95rem; line-height:1.5}

/* caso de éxito */
.pp-cases{display:grid; gap:16px}
.pp-cases.two{grid-template-columns:1fr 1fr}
.pp-cases.three{grid-template-columns:repeat(3,1fr)}
.pp-case{
  --pcpad:clamp(28px,3vw,38px);
  background:var(--cream); color:var(--paper-ink); border-radius:20px;
  padding:var(--pcpad); display:flex; flex-direction:column; gap:16px;
  position:relative; overflow:hidden;
}
.pp-case .pc-brand{font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); font-weight:700}
.pp-case .pc-desc{font-size:.98rem; line-height:1.55; color:rgba(22,20,15,.7)}
.pp-case .pc-photo{
  width:calc(100% + var(--pcpad)*2);
  margin:calc(var(--pcpad)*-1) calc(var(--pcpad)*-1) 4px;
  max-width:none; height:215px; object-fit:cover; display:block;
  border-radius:20px 20px 0 0;
}
.pp-case .pc-transform{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:1rem; margin-top:auto; padding-top:8px}
.pp-case .pc-transform .from{color:rgba(22,20,15,.5); text-decoration:line-through}
.pp-case .pc-transform .ar{color:var(--orange); font-size:1.1em}
.pp-case .pc-transform .to{background:var(--orange); color:#000; padding:.3em .8em; border-radius:8px; font-weight:700}
.pp-case .pc-result{font-size:.92rem; line-height:1.5; color:rgba(22,20,15,.66); padding-top:14px; border-top:1px solid var(--line-light)}
.pp-case .pc-result b{color:var(--paper-ink); font-weight:700}

/* amplifiers feature case (dark, with big metrics) */
.pp-case.feature{background:var(--blue); color:#fff; grid-column:1/-1}
.pp-case.feature .pc-brand{color:var(--cyan)}
.pp-case.feature .pc-desc{color:rgba(255,255,255,.8); max-width:60ch}
.pp-case-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:14px; padding-top:26px; border-top:1px solid rgba(255,255,255,.2)}
.pp-case-metrics .m .v{font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,3.4vw,3.2rem); line-height:.85; color:#fff}
.pp-case-metrics .m .l{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--cyan); margin-top:10px}

/* marcas trabajadas */
.pp-brands{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:clamp(34px,4vw,50px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line-dark)}
.pp-brands .pb-label{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.clients{display:flex; flex-wrap:wrap; gap:10px}
.client-chip{
  font-family:var(--mono); font-size:.84rem; padding:.6em 1.1em; border-radius:100px;
  background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line-dark);
}

@media(max-width:880px){
  .prod-grid{grid-template-columns:1fr}
  .prod-card{min-height:0; padding:28px 26px}
  .psb-arrow{display:none}
  .pp-head{grid-template-columns:1fr; align-items:start; gap:30px}
  .pp-metric{text-align:left}
  .pp-metric .l{margin-left:0}
  .pp-diffs{grid-template-columns:1fr}
  .pp-cases.two, .pp-cases.three{grid-template-columns:1fr}
  .pp-case-metrics{grid-template-columns:1fr 1fr}
}

/* ============================================================
   CASES
   ============================================================ */
.cases{display:flex; flex-direction:column; gap:20px}
.case{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,4vw,60px); align-items:center;
  padding:clamp(28px,4vw,48px); border-radius:24px; background:var(--cream-2);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s;
  position:relative; overflow:hidden;
}
.case:hover{transform:translateY(-4px)}
.case .c-idx{font-family:var(--mono); font-size:.8rem; color:var(--orange); letter-spacing:.1em}
.case .c-brand{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.6rem,3vw,2.6rem); line-height:.95}
.case .c-brand small{display:block; font-family:var(--mono); font-weight:400; font-size:.8rem; letter-spacing:.06em; text-transform:none; color:rgba(22,20,15,.55); margin-top:10px; max-width:40ch; line-height:1.5}
.case .c-flow{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:.92rem; margin-top:16px; flex-wrap:wrap}
.case .c-flow .from{color:rgba(22,20,15,.5); text-decoration:line-through}
.case .c-flow .to{background:var(--orange); color:#000; padding:.25em .7em; border-radius:6px; font-weight:700; text-decoration:none}
.case .c-flow .ar{color:var(--orange)}
.case .c-metric{text-align:right; min-width:140px}
.case .c-metric .m-v{font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,4vw,3.6rem); line-height:.85; color:var(--paper-ink)}
.case .c-metric .m-l{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(22,20,15,.55); margin-top:8px}
.case.dark{background:var(--ink); color:#fff}
.case.dark .c-brand small{color:rgba(255,255,255,.6)}
.case.dark .c-metric .m-v{color:#fff}
.case.dark .c-metric .m-l{color:rgba(255,255,255,.55)}
.case.dark .c-metrics{display:flex; gap:34px; justify-content:flex-end}
@media(max-width:880px){
  .case{grid-template-columns:1fr; text-align:left}
  .case .c-metric{text-align:left}
  .case.dark .c-metrics{justify-content:flex-start; flex-wrap:wrap; gap:24px}
}

/* ============================================================
   TOOL banner — La Rueda Innovadora
   ============================================================ */
.tool{background:var(--blue); color:#fff; position:relative; overflow:hidden; padding-block:clamp(90px,11vw,170px)}
.tool .wheel-bg{
  position:absolute; right:-8%; top:50%; translate:0 -50%; width:min(60vh,560px); aspect-ratio:1; opacity:.14;
  animation:spin 40s linear infinite; pointer-events:none;
}
.tool .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(50px,7vw,110px); align-items:center; max-width:1420px}
.tool .eyebrow{color:var(--cyan)}
.tool h2{margin:22px 0 24px; font-size:clamp(2.2rem,5vw,4.2rem)}
.tool p{color:rgba(255,255,255,.82); max-width:46ch; margin-bottom:34px; font-size:1.1rem}
.tool .url{font-family:var(--mono); font-size:.84rem; letter-spacing:.04em; margin-top:22px; color:var(--cyan); display:inline-flex; align-items:center; gap:8px}
.tool-feats{display:flex; flex-direction:column; gap:14px}
.tool-feat{
  background:rgba(255,255,255,.08); border-radius:16px; padding:20px 22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); backdrop-filter:blur(4px);
}
.tool-feat .tf-k{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin-bottom:8px}
.tool-feat strong{font-family:var(--display); font-weight:800; font-size:1.15rem}
.tool .btn-primary{background:var(--cyan); color:#000}
.tool .btn-primary:hover{box-shadow:0 12px 30px -10px var(--cyan)}
@media(max-width:880px){ .tool .wrap{grid-template-columns:1fr; gap:36px} }

/* ============================================================
   CONTACT / CTA
   ============================================================ */
.cta{text-align:center; position:relative; overflow:hidden}
.cta .wheel-bg{
  position:absolute; left:50%; top:50%; translate:-50% -50%; width:min(120vh,900px); aspect-ratio:1; opacity:.05;
  animation:spin 60s linear infinite; pointer-events:none;
}
.cta .wrap{position:relative; z-index:2}
.cta .eyebrow{margin-bottom:26px; display:block}
.cta h2{font-size:clamp(2.4rem,7vw,6rem); margin-bottom:30px; max-width:18ch; margin-inline:auto}
.cta .lead{max-width:50ch; margin:0 auto 44px}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:#000; padding:70px 0 40px; border-top:1px solid var(--line-dark)}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line-dark)}
.footer-brand img{width:64px; margin-bottom:22px}
.footer-brand p{color:rgba(255,255,255,.5); max-width:34ch; font-size:.95rem}
.footer-col h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:18px; font-weight:700}
.footer-col a{display:block; padding:7px 0; color:rgba(255,255,255,.78); font-size:.96rem; transition:color .2s}
.footer-col a:hover{color:var(--orange)}
.footer-bot{display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:30px; flex-wrap:wrap; font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:rgba(255,255,255,.4)}
@media(max-width:760px){ .footer-top{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} }

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}