/* ================================================================
   Servicios: una marca de ejemplo («lume») que se construye capa a capa
   ================================================================ */
.svc-head{padding-bottom:clamp(20px,3vw,40px)}
.svc-head h1{font-size:clamp(4rem,15vw,13rem)}

.build{position:relative;height:620vh}
.build-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:56% 44%}
@media (min-width:960px){ .build-sticky{grid-template-rows:none;grid-template-columns:minmax(380px,.85fr) 1.15fr;align-items:center} }

/* ---- Texto de cada capa ---- */
.layers{position:relative;order:2;padding:6px var(--gutter) calc(80px + env(safe-area-inset-bottom))}
@media (min-width:960px){ .layers{order:1;padding:0 0 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));height:100%;display:flex;flex-direction:column;justify-content:center} }
.rail{display:flex;gap:6px;margin:0 0 18px}
.rail span{flex:1;height:2px;background:var(--linea);position:relative;overflow:hidden}
.rail span::after{content:"";position:absolute;inset:0;background:var(--siena);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rail span.on::after{transform:none}
.layer-stack{position:relative;min-height:240px}
@media (min-width:960px){ .layer-stack{min-height:420px} .rail{max-width:420px;margin-bottom:34px} }
.layer{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.layer.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.12s}
.layer .eyebrow{margin-bottom:10px}
.layer h2{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.4vw,3.3rem);line-height:1;letter-spacing:-.045em;margin:0 0 12px;max-width:14ch}
.layer p{margin:0 0 14px;color:var(--gris);font-size:clamp(.95rem,1.1vw,1.06rem);max-width:40ch}
.layer ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.layer li{font-size:12.5px;border:1px solid var(--linea);border-radius:999px;padding:5px 11px}
.layer .price{font-family:var(--display);font-size:clamp(1.25rem,1.8vw,1.6rem);letter-spacing:-.03em}
.layer .price small{font-family:var(--sans);font-size:13px;color:var(--gris);letter-spacing:0;margin-left:6px}
.layer .acts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:6px}
@media (max-width:959px){
  .layer p{display:none}
  .layer.final p{display:block}
  .layer h2{max-width:none}
}

/* ---- Escenario ---- */
.stage-box{position:relative;order:1;display:flex;align-items:center;justify-content:center;min-height:0}
@media (min-width:960px){ .stage-box{order:2;height:100%} }
.canvas{position:relative;width:560px;height:560px;flex:0 0 auto;transform-origin:50% 50%;font-family:var(--sans);color:#2B2A28}
.demo-tag{position:absolute;right:var(--gutter);top:calc(78px);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);z-index:3}
@media (max-width:959px){ .demo-tag{top:auto;bottom:8px;right:auto;left:var(--gutter)} }

.g{position:absolute;left:50%;top:50%;transition:transform .9s cubic-bezier(.2,.75,.2,1), opacity .6s ease;will-change:transform,opacity}

/* Paleta de la marca de ejemplo */
.canvas{--l-rose:#C98E7A;--l-blush:#ECD9CE;--l-sage:#A9B39C;--l-cream:#F6F1EA;--l-ink:#2B2A28}

/* Capa 1 · Branding */
.g-brand{width:360px;height:360px;margin:-180px 0 0 -180px}
.seed{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:var(--l-blush);transform:scale(.05);transition:transform 1s cubic-bezier(.2,.75,.2,1), background .6s}
.seed::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--siena);opacity:1;transition:opacity .5s .25s}
.lume-logo{position:absolute;left:0;right:0;top:118px;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .6s .45s, transform .8s .45s cubic-bezier(.2,.7,.2,1)}
.lume-logo b{display:block;font-family:var(--display);font-weight:400;font-size:84px;line-height:1;letter-spacing:-.06em;color:var(--l-ink)}
.lume-logo b i{font-style:normal;display:inline-block;width:.42em;height:.42em;border-radius:50% 50% 0 0;background:var(--l-rose);margin-left:.05em;vertical-align:.05em}
.lume-logo small{display:block;margin-top:8px;font-size:10px;letter-spacing:.42em;color:#6d6660}
.swatches{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:10px}
.swatches span{width:30px;height:30px;border-radius:50%;opacity:0;transform:translateY(12px);transition:opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1)}
.swatches span:nth-child(1){background:var(--l-rose);transition-delay:.7s}
.swatches span:nth-child(2){background:var(--l-sage);transition-delay:.78s}
.swatches span:nth-child(3){background:var(--l-blush);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition-delay:.86s}
.swatches span:nth-child(4){background:var(--l-ink);transition-delay:.94s}
.specimen{position:absolute;right:-74px;top:30px;background:#fff;border-radius:10px;padding:10px 14px;box-shadow:0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:translateX(-10px);transition:opacity .5s 1s, transform .7s 1s}
.specimen b{display:block;font-family:var(--display);font-weight:400;font-size:34px;letter-spacing:-.04em;line-height:1}
.specimen span{font-size:10px;color:#857d75}

/* Capa 2 · Redes */
.g-phone{width:232px;height:464px;margin:-232px 0 0 -116px}
.phone{width:100%;height:100%;border-radius:34px;background:var(--l-ink);padding:9px;box-shadow:0 30px 60px -30px rgba(43,42,40,.45)}
.screen{width:100%;height:100%;border-radius:26px;background:#fff;overflow:hidden;padding:14px 12px}
.ig-head{display:flex;align-items:center;gap:10px;margin:8px 0 10px}
.ig-av{width:44px;height:44px;border-radius:50%;background:var(--l-blush);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:16px;letter-spacing:-.04em}
.ig-name{font-size:12px;font-weight:500}
.ig-name span{display:block;font-weight:400;color:#857d75;font-size:10.5px}
.ig-bio{font-size:10.5px;color:#5f5852;margin:0 0 10px;line-height:1.4}
.ig-btn{display:block;text-align:center;font-size:10.5px;font-weight:500;background:var(--l-cream);border-radius:7px;padding:6px;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.grid span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:13px;letter-spacing:-.03em;color:var(--l-ink);position:relative;overflow:hidden}
.t1{background:var(--l-blush)} .t2{background:var(--l-sage)} .t3{background:var(--l-cream)}
.t4{background:var(--l-rose);color:#fff!important} .t5{background:#E3E6DC} .t6{background:var(--l-ink);color:var(--l-cream)!important}
.sun::before{content:"";width:46%;height:23%;border-radius:999px 999px 0 0;background:var(--l-rose);position:absolute;bottom:30%}
.arc::before{content:"";width:60%;height:60%;border-radius:50%;border:2px solid #fff;opacity:.8;position:absolute}

/* Capa 3 · Publicidad */
.g-ad{width:236px;margin:-150px 0 0 -118px}
.ad{background:#fff;border-radius:16px;box-shadow:0 24px 50px -24px rgba(43,42,40,.4), 0 0 0 1px rgba(0,0,0,.04);overflow:hidden}
.ad-top{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:10.5px}
.ad-top i{width:24px;height:24px;border-radius:50%;background:var(--l-blush);display:inline-block}
.ad-top span{color:#857d75;display:block;font-size:9.5px}
.ad-img{height:150px;background:var(--l-sage);position:relative;display:flex;align-items:flex-end;padding:14px}
.ad-img::before{content:"";position:absolute;right:22px;top:22px;width:70px;height:70px;border-radius:50%;background:var(--l-cream);opacity:.9}
.ad-img b{position:relative;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.02;letter-spacing:-.04em;color:#fff;max-width:9ch}
.ad-cta{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:11px;font-weight:500;border-top:1px solid #eee}
.ad-cta span{color:var(--l-rose)}
.chip{position:absolute;background:#fff;border-radius:999px;padding:7px 12px;font-size:10.5px;white-space:nowrap;box-shadow:0 10px 24px -14px rgba(43,42,40,.5), 0 0 0 1px rgba(0,0,0,.04)}
.chip i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7FA06B;margin-right:6px}
.chip.c1{left:-84px;top:40px}
.chip.c2{right:-70px;bottom:-16px}

/* Capa 4 · Web y SEO */
.g-web{width:520px;height:340px;margin:-170px 0 0 -260px}
.browser{width:100%;height:100%;background:var(--l-cream);border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -36px rgba(43,42,40,.45), 0 0 0 1px rgba(0,0,0,.05)}
.b-bar{height:30px;background:#fff;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid #eee}
.b-bar i{width:8px;height:8px;border-radius:50%;background:#e2ddd6}
.b-bar span{margin-left:12px;font-size:10px;color:#857d75;background:var(--l-cream);border-radius:6px;padding:3px 12px}
.b-nav{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;font-size:10.5px;color:#5f5852}
.b-nav b{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:-.05em;color:var(--l-ink)}
.b-hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding:10px 22px}
.b-hero h4{font-family:var(--display);font-weight:400;font-size:32px;line-height:.98;letter-spacing:-.05em;margin:0 0 14px;color:var(--l-ink)}
.b-hero em{font-style:normal;display:inline-block;font-size:10.5px;background:var(--l-ink);color:#fff;border-radius:999px;padding:7px 13px}
.b-hero div:last-child{justify-self:center;width:150px;height:150px;border-radius:50%;background:var(--l-blush);position:relative}
.b-hero div:last-child::after{content:"";position:absolute;left:25%;right:25%;bottom:36%;height:25%;border-radius:999px 999px 0 0;background:var(--l-rose)}
.g-google{width:260px;margin:-50px 0 0 -130px}
.serp{background:#fff;border-radius:14px;padding:13px 15px;box-shadow:0 24px 50px -26px rgba(43,42,40,.45), 0 0 0 1px rgba(0,0,0,.05);font-size:10.5px}
.serp small{color:#857d75}
.serp b{display:block;font-size:14px;font-weight:500;margin:3px 0 2px;color:#1a4fa0}
.serp p{margin:0 0 9px;color:#5f5852}
.serp .bt{display:flex;gap:6px}
.serp .bt span{border:1px solid #e2ddd6;border-radius:999px;padding:4px 9px}

/* ---- Estados por capa ---- */
.g-phone,.g-ad,.g-web,.g-google{opacity:0}
.g-phone{transform:translate(0,40px) scale(.92)}
.g-ad{transform:translate(160px,80px) scale(.9)}
.g-web{transform:translate(0,30px) scale(.94)}
.g-google{transform:translate(-120px,240px) scale(.92)}

/* 1 · Branding */
.canvas[data-step="1"] .seed,.canvas[data-step]:not([data-step="0"]) .seed{transform:scale(1)}
.canvas:not([data-step="0"]) .seed::before{opacity:0}
.canvas:not([data-step="0"]) .lume-logo{opacity:1;transform:none}
.canvas:not([data-step="0"]) .swatches span{opacity:1;transform:none}
.canvas:not([data-step="0"]) .specimen{opacity:1;transform:none}

/* 2 · Redes: la marca sube y aparece el móvil */
.canvas[data-step="2"] .g-brand,.canvas[data-step="3"] .g-brand{transform:translate(-170px,-176px) scale(.4)}
.canvas[data-step="2"] .g-phone{opacity:1;transform:none}
.canvas[data-step="2"] .specimen,.canvas[data-step="3"] .specimen,.canvas[data-step="4"] .specimen,.canvas[data-step="5"] .specimen{opacity:0}

/* 3 · Publicidad */
.canvas[data-step="3"] .g-phone{opacity:1;transform:translate(-70px,0)}
.canvas[data-step="3"] .g-ad{opacity:1;transform:translate(110px,40px)}

/* 4 · Web y SEO */
.canvas[data-step="4"] .g-brand,.canvas[data-step="5"] .g-brand{transform:translate(-206px,-226px) scale(.32)}
.canvas[data-step="4"] .g-web,.canvas[data-step="5"] .g-web{opacity:1;transform:translate(10px,-40px)}
.canvas[data-step="4"] .g-phone,.canvas[data-step="5"] .g-phone{opacity:1;transform:translate(-178px,96px) scale(.62)}
.canvas[data-step="4"] .g-ad,.canvas[data-step="5"] .g-ad{opacity:1;transform:translate(176px,128px) scale(.66)}
.canvas[data-step="4"] .g-google,.canvas[data-step="5"] .g-google{opacity:1;transform:translate(10px,200px)}
.canvas[data-step="5"]{transform-origin:50% 50%}
.canvas[data-step="5"] .g-web .browser{box-shadow:0 30px 70px -36px rgba(43,42,40,.45), 0 0 0 1px rgba(156,74,43,.35)}

/* ---- Tarifas ---- */
.rates{padding:clamp(90px,12vw,150px) 0 0}
.rates .h2{margin-bottom:clamp(24px,4vw,44px)}

/* Movimiento reducido o sin JS: composición final */
.reduce .build{height:auto}
.reduce .build-sticky{position:relative;height:auto;min-height:100svh}
.reduce .layer{position:relative;opacity:1;transform:none;margin-bottom:28px}
.reduce .layer p{display:block}
.reduce .layer-stack{min-height:0}
html:not(.js) .build{height:auto}
html:not(.js) .build-sticky{position:relative;height:auto}
html:not(.js) .layer{position:relative;opacity:1;transform:none;margin-bottom:28px}
/* La composición no empuja el ancho de la página: se centra y se escala dentro de su caja */
.build-sticky{grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){ .build-sticky{grid-template-columns:minmax(380px,.85fr) minmax(0,1.15fr)} }
.stage-box{overflow:hidden}
.canvas{position:absolute;left:50%;top:50%;margin:-280px 0 0 -280px}
.layers{min-width:0}
@media (max-width:959px){ .stage-box{overflow:visible} .layer ul{max-width:100%} }