/* ==========================================================================
   Home · secciones en crema con motion graphics (mismo lenguaje que #integral)
   Alcance: solo body.home. Hero, «Hablemos de tu próximo proyecto» y pie siguen
   oscuros como anclas de la página. El contenido de cada sección no cambia.
   Reglas: texto negro sobre crema, texto blanco sobre naranja fuerte,
   nunca naranja sobre crema.
   ========================================================================== */

/* ---- 1 · variables: al invertirlas, los componentes existentes se re-pintan solos ---- */
body.home :is(#produccion,.video-sales,#resultados,#marketing,#portafolio,#equipo){
  --cr:#F3EDE4; --cr-2:#EAE0D3; --cr-3:#FBF8F3;
  --tx:#161411; --tx-2:#4B443C; --or:#B85A2B;
  --ink:#F3EDE4; --ink-2:#FFFFFF; --ink-3:#EAE0D3;
  --fg:#161411; --fg-muted:#4B443C; --sand:#161411;
  --line:rgba(70,50,30,.14); --line-strong:rgba(70,50,30,.28);
  --bg:var(--cr);
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--bg);color:var(--tx);border-top:0;
}
/* alternancia de dos cremas para que las secciones se distingan sin líneas */
body.home :is(#produccion,.video-sales,#resultados,#marketing,#equipo){--bg:var(--cr-3)}
body.home #portafolio{--bg:var(--cr)}
/* «Videos que venden» vive dentro de .wrap: se extiende a todo el ancho */
body.home .video-sales{
  overflow:visible;box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax);
  margin-block:0;padding-block:clamp(48px,7vw,88px);
}
/* la foto de fondo de Marketing y los degradados oscuros antiguos se retiran */
body.home #marketing .section__bg{display:none}
body.home #produccion,body.home #equipo{background:var(--bg)}

/* ---- 2 · fondo: puntos finos + manchas suaves a la deriva ---- */
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo)::before,
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo)::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(8px);
}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo)::before{
  width:42vmax;height:42vmax;right:-14vmax;top:-12vmax;
  background:radial-gradient(closest-side,rgba(184,90,43,.15),transparent 70%);
  animation:intFloatA 26s ease-in-out infinite alternate;
}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo)::after{
  width:38vmax;height:38vmax;left:-14vmax;bottom:-10vmax;
  background:radial-gradient(closest-side,rgba(217,140,95,.18),transparent 70%);
  animation:intFloatB 32s ease-in-out infinite alternate;
}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) > .wrap{position:relative;z-index:1}

/* ---- 3 · cabeceras: eyebrow con línea que se dibuja y subrayado bajo el título ---- */
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .h2{color:var(--tx);position:relative;display:inline-block}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .eyebrow{color:var(--tx)}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .eyebrow::before{background:var(--or);width:0}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .reveal.is-in .eyebrow::before{width:28px;transition:width .9s var(--ease) .2s}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .h2::after{
  content:"";position:absolute;left:0;bottom:-10px;height:4px;width:100%;
  background:var(--or);border-radius:4px;transform:scaleX(0);transform-origin:left;
}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .reveal.is-in .h2::after{transform:scaleX(.34);transition:transform 1s var(--ease) .35s}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .lead{color:var(--tx-2)}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .lead strong{color:var(--tx)}
body.home .video-sales__title,body.home .video-sales .kicker{color:var(--tx)}

/* ---- 4 · etiquetas, botones y notas ---- */
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .tags li{
  background:var(--or);color:#fff;box-shadow:0 6px 16px -6px rgba(184,90,43,.55);
}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .tags li a{color:inherit}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .btn--primary{background:var(--or);color:#fff}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .btn--primary:hover{background:#9C4A20}
body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .note{color:var(--tx-2)}

/* ---- 5 · Producción (carrusel): el texto sobre foto sigue siendo blanco ---- */
body.home #produccion .slide__body h3,
body.home #produccion .slide__n{color:#fff}
body.home #produccion .slide__body p{color:#E9E4DD}
body.home #produccion .carousel{--cr-card:#fff}
body.home #produccion .slide{box-shadow:0 26px 48px -28px rgba(60,40,20,.45)}

/* ---- 6 · Resultados ---- */
body.home #resultados .results__title{color:var(--tx);display:block;text-shadow:none;filter:none}
body.home #resultados .results__title::after{display:none}
body.home #resultados .results__title .accent{color:var(--tx);background:none}
body.home #resultados .results__title .outline{color:transparent;-webkit-text-stroke:1.5px var(--tx)}
body.home #resultados .results__n{color:var(--tx)}
body.home #resultados .results__n em{color:var(--tx-2)}
body.home #resultados .results__item{
  background:#fff;border:1px solid rgba(70,50,30,.12);border-radius:18px;
  box-shadow:0 24px 44px -30px rgba(60,40,20,.5);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
body.home #resultados .results__item:hover{transform:translateY(-5px);box-shadow:0 30px 50px -28px rgba(60,40,20,.6)}
body.home #resultados .results__k{color:var(--tx)}
body.home #resultados .results__d,
body.home #resultados .results__foot{color:var(--tx-2)}
body.home #resultados .results__foot strong{color:var(--tx)}

/* ---- 8 · Portafolio y Equipo ---- */
body.home #portafolio .case__body h3{color:#fff}
body.home #portafolio .case__k{color:#F0B48F}
body.home #portafolio .case__body p{color:#E9E4DD}
/* logos de colaboradores: eran blancos para fondo oscuro, ahora en tinta */
body.home #portafolio .marquee__item img{filter:brightness(0) opacity(.7)}
body.home #portafolio .marquee__item{opacity:1}
body.home #portafolio .kicker{color:var(--tx)}
body.home #portafolio .case{
  background:#fff;border:1px solid rgba(70,50,30,.12);border-radius:18px;
  box-shadow:0 24px 44px -30px rgba(60,40,20,.5);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
body.home #portafolio .case:hover{transform:translateY(-5px);box-shadow:0 30px 50px -28px rgba(60,40,20,.6)}
body.home #equipo .member__role{color:var(--tx-2)}
body.home #equipo .member__bio{color:var(--tx-2)}

/* ---- 9 · entrada escalonada de tarjetas ---- */
@media(prefers-reduced-motion:no-preference){
  body.home :is(.cases,.results__grid) > *{opacity:0;transform:translateY(24px) scale(.98)}
  body.home :is(.cases).is-in > *,
  body.home .results__grid .is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease),box-shadow .35s var(--ease)}
  body.home :is(.cases).is-in > *:nth-child(1){transition-delay:.05s}
  body.home :is(.cases).is-in > *:nth-child(2){transition-delay:.13s}
  body.home :is(.cases).is-in > *:nth-child(3){transition-delay:.21s}
  body.home :is(.cases).is-in > *:nth-child(4){transition-delay:.29s}
  body.home :is(.cases).is-in > *:nth-child(5){transition-delay:.37s}
  body.home :is(.cases).is-in > *:nth-child(6){transition-delay:.45s}
  body.home :is(.cases).is-in > *:hover{transition-delay:0s;transform:translateY(-5px)}
}

@media(prefers-reduced-motion:reduce){
  body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo)::before,
  body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo)::after{animation:none}
  body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .h2::after{transform:scaleX(.34)}
  body.home :is(#produccion,#resultados,#marketing,#portafolio,#equipo) .eyebrow::before{width:28px}
}


/* ---- 10 · Hero, menú y contacto en claro (sin degradados entre secciones) ---- */
body.home :is(.nav,.mobile-menu,.hero,#contacto){
  --bone:#161411; --fg:#161411; --fg-muted:#4B443C; --sand:#161411;
  --line:rgba(70,50,30,.14); --line-strong:rgba(70,50,30,.3);
  --cr:#F3EDE4; --cr-3:#FBF8F3; --or:#B85A2B;
}
body.home :is(.nav,.mobile-menu,.hero,#contacto) .btn--primary{background:var(--or);color:#fff;box-shadow:0 10px 26px -10px rgba(184,90,43,.7)}
body.home :is(.nav,.mobile-menu,.hero,#contacto) .btn--primary:hover{background:#9C4A20}
body.home :is(.hero,#contacto) .btn--ghost{background:transparent;color:#161411;border-color:#161411}
body.home :is(.hero,#contacto) .btn--ghost:hover{background:#161411;color:#F3EDE4}

/* menú */
body.home .nav__logo img{content:url('assets/logos/steidhub-lockup-black.png')}
body.home .nav.is-stuck{background:rgba(251,248,243,.88);border-bottom-color:rgba(70,50,30,.12)}
body.home .nav__links a:hover{color:#161411}
body.home .nav__burger{border-color:rgba(70,50,30,.3)}
body.home .mobile-menu{--ink:#FBF8F3;background:#FBF8F3}

/* contacto */
body.home #contacto .contact__info{
  background:rgba(251,248,243,.92);border:1px solid rgba(255,255,255,.7);border-radius:20px;
  padding:clamp(22px,3vw,40px);align-self:start;
  box-shadow:0 30px 56px -30px rgba(30,20,10,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
@media(max-width:1023px){body.home #contacto .contact__info{padding:24px 20px}}
body.home #contacto{
  --ink:#F3EDE4; --ink-2:#FFFFFF; --ink-3:#FBF8F3;
  position:relative;isolation:isolate;overflow:hidden;background:#F3EDE4;color:#161411;border-top:0;
}
body.home #contacto .section__bg::after{background:linear-gradient(180deg,rgba(40,28,16,.22),rgba(40,28,16,.1) 50%,rgba(40,28,16,.28))}
body.home #contacto .section__bg img{opacity:1;filter:saturate(1.1) brightness(.78)}
body.home #contacto::before,body.home #contacto::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(8px);
}
body.home #contacto::before{width:42vmax;height:42vmax;left:-14vmax;top:-12vmax;
  background:radial-gradient(closest-side,rgba(217,140,95,.2),transparent 70%);animation:intFloatB 28s ease-in-out infinite alternate}
body.home #contacto::after{width:40vmax;height:40vmax;right:-14vmax;bottom:-14vmax;
  background:radial-gradient(closest-side,rgba(184,90,43,.15),transparent 70%);animation:intFloatA 30s ease-in-out infinite alternate}
body.home #contacto .h2{color:#161411;position:relative;display:inline-block}
body.home #contacto .eyebrow{color:#161411}
body.home #contacto .eyebrow::before{background:var(--or)}
body.home #contacto .h2::after{content:"";position:absolute;left:0;bottom:-10px;height:4px;width:100%;background:var(--or);border-radius:4px;transform:scaleX(0);transform-origin:left}
body.home #contacto .reveal.is-in .h2::after{transform:scaleX(.34);transition:transform 1s var(--ease) .35s}
body.home #contacto .lead,body.home #contacto .contact__info dt{color:#161411}
body.home #contacto .contact__info dt{color:#4B443C}
body.home #contacto .contact__info dd a:hover{color:#161411;border-bottom-color:var(--or)}
body.home #contacto .form__panel{
  background:#fff;border:1px solid rgba(70,50,30,.12);
  box-shadow:0 34px 60px -34px rgba(60,40,20,.55);
}
body.home #contacto .form__panel::before{opacity:.55}
body.home #contacto .form__panel::after{box-shadow:0 0 30px rgba(184,90,43,.16)}
body.home #contacto .field label{color:#161411}
body.home #contacto .field label .req{color:#9C4A20}
body.home #contacto .form__panel .field input,
body.home #contacto .form__panel .field select,
body.home #contacto .form__panel .field textarea{background:#FBF8F3;color:#161411;border-color:rgba(70,50,30,.2)}
body.home #contacto .form__panel .field input:focus,
body.home #contacto .form__panel .field select:focus,
body.home #contacto .form__panel .field textarea:focus{background:#fff;border-color:var(--or);box-shadow:0 0 0 4px rgba(184,90,43,.14);outline:none}
body.home #contacto .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B443C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
body.home #contacto .field input::placeholder,body.home #contacto .field textarea::placeholder{color:#6E6A65}
body.home #contacto .field .hint{color:#4B443C}
body.home #contacto .err{color:#B3321A}
body.home #contacto .field.is-invalid input,body.home #contacto .field.is-invalid select,body.home #contacto .field.is-invalid textarea{border-color:#B3321A}
body.home #contacto .form__summary{border-color:#B3321A;background:rgba(179,50,26,.07);color:#8A2511}
body.home #contacto .form__consent{color:#4B443C}
body.home #contacto .form__consent input{accent-color:var(--or)}
body.home #contacto .form__status{color:#161411;background:rgba(122,139,122,.12)}
body.home #contacto .form__submit .btn{box-shadow:0 14px 30px -12px rgba(184,90,43,.7)}
@media(prefers-reduced-motion:reduce){
  body.home #contacto::before,body.home #contacto::after{animation:none}
  body.home #contacto .h2::after{transform:scaleX(.34)}
}
@media(max-width:599px){
  body.home #contacto .contact__info dl > div:nth-child(1),
  body.home #contacto .contact__info dl > div:nth-child(2){grid-column:1/-1}
  body.home #contacto .contact__info dd{overflow-wrap:normal}
}


/* ---- 11 · HERO v2: copy a la izquierda + video dentro de una tablet horizontal ---- */
body.home .hero{background:#FBF8F3;isolation:isolate;min-height:0}
body.home .hero::before,body.home .hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(8px)}
body.home .hero::before{width:50vmax;height:50vmax;right:-16vmax;top:-20vmax;
  background:radial-gradient(closest-side,rgba(184,90,43,.18),transparent 70%);animation:intFloatA 24s ease-in-out infinite alternate}
body.home .hero::after{width:38vmax;height:38vmax;left:-14vmax;bottom:-16vmax;
  background:radial-gradient(closest-side,rgba(217,140,95,.22),transparent 70%);animation:intFloatB 30s ease-in-out infinite alternate}
body.home .hero__center{padding:104px 0 28px;position:relative}
body.home .hero__center::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(70,50,30,.11) 1px,transparent 1.3px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 80% at 70% 45%,#000,transparent);mask-image:radial-gradient(70% 80% at 70% 45%,#000,transparent);
}
body.home .hero__grid{display:grid;gap:34px;align-items:center}
body.home .hero__copy{min-width:0}
body.home .hero .display{color:#161411;text-shadow:none}
body.home .hero .display .accent{
  color:#161411;padding:0 .08em;margin-inline:-.08em;
  background:linear-gradient(#F0B48F,#F0B48F) 0 88%/0 .34em no-repeat;
  animation:heroMark 1.1s var(--ease) .7s forwards;
}
body.home .hero .display .outline{
  display:inline-block;position:relative;overflow:hidden;-webkit-text-stroke:0;color:#fff;background:#B85A2B;
  padding:.04em .2em .02em;margin:.06em 0 .04em -.04em;border-radius:.16em;
  box-shadow:0 .28em .6em -.2em rgba(120,55,20,.6);
}
body.home .hero .display .outline::after{
  content:"";position:absolute;top:0;bottom:0;left:-50%;width:30%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
}
@media(prefers-reduced-motion:no-preference){
  body.home .hero .display .outline{animation:estIn .9s cubic-bezier(.34,1.4,.64,1) .45s backwards}
  body.home .hero .display .outline::after{animation:estShine 5s ease-in-out 1.8s infinite}
}
@keyframes estIn{from{opacity:0;transform:scale(.8)}}
@keyframes estShine{0%,60%{left:-50%}100%{left:140%}}
body.home .hero__tag{background:#fff;border:1px solid rgba(70,50,30,.18);color:#161411;box-shadow:0 10px 24px -16px rgba(60,40,20,.5)}
@media(min-width:960px){body.home .hero__tag{font-size:.75rem;letter-spacing:.14em;padding:10px 20px}}
body.home .hero__tag i{background:#B85A2B;box-shadow:0 0 0 4px rgba(184,90,43,.22);animation:heroDot 2.4s ease-out infinite}
body.home .hero__lead strong{color:#161411;box-shadow:inset 0 -.38em 0 rgba(240,180,143,.65)}

/* tablet */
body.home .hero__stage{position:relative;perspective:1400px;min-width:0;padding:12px 0 14px}
body.home .hero__device{
  --rx:3deg;--ry:-7deg;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform .35s var(--ease);will-change:transform;
}
body.home .hero__bezel{
  position:relative;padding:clamp(9px,1.3vw,16px);border-radius:clamp(20px,2.6vw,34px);
  background:linear-gradient(145deg,#2b2622,#14110f);
  box-shadow:0 2px 0 #4a423b inset,0 0 0 1.5px #0d0b09,0 50px 70px -30px rgba(60,35,15,.65),0 18px 30px -18px rgba(60,35,15,.5);
}
body.home .hero__cam{position:absolute;z-index:3;left:50%;top:clamp(3px,.5vw,6px);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#3a332d;box-shadow:inset 0 0 0 1.5px #1a1613}
body.home .hero__media{
  position:relative;inset:auto;z-index:0;overflow:hidden;
  aspect-ratio:16/10.4;border-radius:clamp(10px,1.4vw,18px);background-color:#1d1a17;
}
body.home .hero__media::after{background:linear-gradient(115deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 32%),linear-gradient(180deg,transparent 70%,rgba(0,0,0,.25))}
/* chips flotantes */
body.home .hero__chip{
  position:absolute;z-index:4;display:flex;align-items:center;gap:9px;white-space:nowrap;
  padding:10px 16px 10px 12px;border-radius:14px;background:#fff;color:#161411;
  font-size:.75rem;font-weight:600;border:1px solid rgba(70,50,30,.12);
  box-shadow:0 20px 34px -18px rgba(60,35,15,.55);
  transform:translate3d(calc(var(--mx,0) * var(--k,1)),calc(var(--my,0) * var(--k,1)),0);
  transition:transform .4s var(--ease);
}
body.home .hero__chip b{width:22px;height:22px;border-radius:50%;background:#B85A2B;flex:none;position:relative}
body.home .hero__chip b::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)}
body.home .hero__chip--a{left:-4%;top:12%;--k:-1.4}
body.home .hero__chip--b{right:-3%;top:36%;--k:1.8}
body.home .hero__chip--c{left:6%;bottom:2%;--k:1.1}
body.home .hero__chip--d{right:7%;top:-1%;--k:-1.2}
body.home .hero__chip--e{right:22%;bottom:3%;--k:1.5}
body.home .hero__chip--d b{background:#161411}
body.home .hero__chip--a b{background:#1FA855}
@media(prefers-reduced-motion:no-preference){
  body.home .hero__chip{animation:heroBob 5.5s ease-in-out infinite}
  body.home .hero__chip--b{animation-delay:-1.8s;animation-duration:6.4s}
  body.home .hero__chip--c{animation-delay:-3.2s;animation-duration:5.9s}
  body.home .hero__chip--d{animation-delay:-.9s;animation-duration:6.1s}
  body.home .hero__chip--e{animation-delay:-4.1s;animation-duration:5.2s}
}
@keyframes heroBob{0%,100%{margin-top:0}50%{margin-top:-9px}}

/* cifras */
body.home .stats{background:none;border:0;gap:12px;overflow:visible;border-radius:0}
body.home .stat{
  background:#fff;border:1px solid rgba(70,50,30,.12);border-radius:16px;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 18px 34px -26px rgba(60,40,20,.5);transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
body.home .stat:hover{transform:translateY(-4px)}
body.home .stat{text-align:center}
body.home .hero__stats{padding:26px 0 48px}
body.home .wa.is-over-hero{bottom:24px}
body.home .stat__n{color:#161411}
body.home .stat__l{color:#4B443C}

@media(min-width:960px){
  body.home .hero{min-height:min(95svh,960px)}
  body.home .hero__center{padding:128px 0 28px;flex:1;display:flex;flex-direction:column;justify-content:center}
  body.home .hero__grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,3vw,56px)}
  body.home .hero .display{font-size:clamp(2.5rem,4.8vw,4.6rem)}
  body.home .hero__center{text-align:left}
  body.home .hero__tag,body.home .hero__lead{margin-inline:0}
  body.home .hero__actions{justify-content:flex-start}
}
@media(max-width:959px){
  body.home .hero__center{padding:96px 0 18px}
  body.home .hero__grid{gap:22px}
  body.home .hero__chip{font-size:.6875rem;padding:8px 12px 8px 9px}
  body.home .hero__chip b{width:18px;height:18px}
  body.home .hero__chip b::after{left:5px;top:3px}
  body.home .hero__chip--a{left:-2%;top:6%}
  body.home .hero__chip--b{right:-2%;top:40%}
  body.home .hero__chip--c{left:4%;bottom:0}
  body.home .hero__chip--d{right:4%;top:-3%}
  body.home .hero__chip--e{right:5%;bottom:2%}
  body.home .hero__device{--rx:2deg;--ry:-4deg}
}
@keyframes heroMark{to{background-size:100% .34em}}
@keyframes heroDot{0%{box-shadow:0 0 0 0 rgba(184,90,43,.45)}100%{box-shadow:0 0 0 12px rgba(184,90,43,0)}}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroTablet{from{opacity:0;transform:translateY(40px) rotateX(10deg) rotateY(-16deg) scale(.95)}}
@media(prefers-reduced-motion:no-preference){
  body.home .hero__tag{animation:heroUp .8s var(--ease) both}
  body.home .hero .display{animation:heroUp .9s var(--ease) .12s both}
  body.home .hero__center .reveal[data-d="2"]{animation:heroUp .9s var(--ease) .26s both}
  body.home .hero__bezel{animation:heroTablet 1.2s var(--ease) .15s both}
  body.home .hero__stats .stat{animation:heroUp .8s var(--ease) both}
  body.home .hero__stats .stat:nth-child(1){animation-delay:.4s}
  body.home .hero__stats .stat:nth-child(2){animation-delay:.47s}
  body.home .hero__stats .stat:nth-child(3){animation-delay:.54s}
  body.home .hero__stats .stat:nth-child(4){animation-delay:.61s}
  body.home .hero__stats .stat:nth-child(5){animation-delay:.68s}
}
@media(prefers-reduced-motion:reduce){
  body.home .hero::before,body.home .hero::after{animation:none}
  body.home .hero .display .accent{background-size:100% .34em;animation:none}
  body.home .hero__tag i{animation:none}
  body.home .hero__device{transition:none}
}


/* ---- 12 · cifras y avisos con más vida ---- */
body.home .stat{position:relative;overflow:hidden}
body.home .stat::after{
  content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;border-radius:3px;background:#B85A2B;
  transform:scaleX(0);transform-origin:left;
}
body.home .stat::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(240,180,143,.35),transparent);transform:skewX(-18deg);
}
body.home .stat__n{display:inline-block}
@keyframes statPop{0%{opacity:0;transform:translateY(34px) scale(.9)}60%{opacity:1;transform:translateY(-6px) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes statBar{to{transform:scaleX(1)}}
@keyframes statShine{0%,70%{left:-60%}100%{left:130%}}
@keyframes numPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes chipIn{0%{opacity:0;scale:.5}65%{opacity:1;scale:1.08}100%{opacity:1;scale:1}}
@keyframes chipPing{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.3);opacity:0}}
body.home .hero__chip b::before{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0}
@media(prefers-reduced-motion:no-preference){
  body.home .hero__stats .stat{animation:statPop .9s cubic-bezier(.34,1.4,.64,1) both}
  body.home .stat::after{animation:statBar 1.2s var(--ease) both}
  body.home .stat::before{animation:statShine 7s ease-in-out infinite}
  body.home .stat:nth-child(1)::after{animation-delay:.9s}body.home .stat:nth-child(2)::after{animation-delay:1.05s}
  body.home .stat:nth-child(3)::after{animation-delay:1.2s}body.home .stat:nth-child(4)::after{animation-delay:1.35s}
  body.home .stat:nth-child(5)::after{animation-delay:1.5s}
  body.home .stat:nth-child(2)::before{animation-delay:.7s}body.home .stat:nth-child(3)::before{animation-delay:1.4s}
  body.home .stat:nth-child(4)::before{animation-delay:2.1s}body.home .stat:nth-child(5)::before{animation-delay:2.8s}
  body.home .hero__chip{animation:chipIn .8s cubic-bezier(.34,1.56,.64,1) backwards,heroBob 5.5s ease-in-out infinite}
  body.home .hero__chip--a{animation-delay:1s,0s}
  body.home .hero__chip--d{animation-delay:1.3s,-.9s;animation-duration:.8s,6.1s}
  body.home .hero__chip--b{animation-delay:1.6s,-1.8s;animation-duration:.8s,6.4s}
  body.home .hero__chip--e{animation-delay:1.9s,-4.1s;animation-duration:.8s,5.2s}
  body.home .hero__chip--c{animation-delay:2.2s,-3.2s;animation-duration:.8s,5.9s}
  body.home .hero__chip b::before{animation:chipPing 3.4s ease-out infinite}
  body.home .hero__chip--a b::before{animation-delay:2.2s}
  body.home .hero__chip--d b::before{animation-delay:.6s}
  body.home .hero__chip--b b::before{animation-delay:1.7s}
  body.home .hero__chip--e b::before{animation-delay:2.8s}
  body.home .hero__chip--c b::before{animation-delay:1.1s}
}
@media(prefers-reduced-motion:reduce){body.home .stat::after{transform:scaleX(1)}body.home .stat::before{display:none}}

/* ---- 13 · móvil: hero y muestras un poco más compactos ---- */
@media(max-width:767px){
  body.home .hero__center{padding:88px 0 10px}
  body.home .hero__grid{gap:16px}
  body.home .hero .display{font-size:clamp(1.6rem,7.4vw,2.05rem)}
  body.home .hero__lead{font-size:14px;margin:14px auto 18px}
  body.home .hero__actions .btn{min-height:48px;padding:12px 18px;font-size:14px}
  body.home .hero__stage{width:90%;margin-inline:auto}
  body.home .hero__chip{font-size:.625rem;padding:6px 10px 6px 7px;gap:6px}
  body.home .hero__chip b{width:15px;height:15px}
  body.home .hero__chip b::after{left:4px;top:2px;width:4px;height:7px}
  body.home .hero__stats{padding:14px 0 28px}
  body.home .stat{padding:14px 8px}
  body.home .stat__n{font-size:22px}
  body.home .showcase__track img{width:calc(100vw - 56px)}
}

/* v-pantalla: el hero ocupa exactamente la ventana (titular, imagen y cifras) y luego se baja */
body.home .hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
body.home .hero__center{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(84px,11svh,104px) clamp(10px,2svh,24px)}
body.home .hero__stats{flex:none;padding-bottom:clamp(14px,3svh,28px)}
@media(min-width:960px){
  body.home .hero .display{font-size:clamp(2rem,min(4.8vw,8.6svh),4.6rem)}
  body.home .hero__tag{margin-bottom:clamp(8px,2svh,20px)}
  body.home .hero__lead{font-size:clamp(.92rem,2.1svh,1.15rem);margin-block:clamp(8px,2svh,20px)}
  body.home .hero__device{width:min(100%,calc((100svh - 330px)*1.5));min-width:340px;margin-inline:auto}
  body.home .hero .stat{padding-block:clamp(10px,2.2svh,22px)}
  body.home .hero .stat__n{font-size:clamp(1.5rem,4.2svh,2.4rem)}
}
@media(max-width:767px){
  body.home .hero{min-height:100svh}
  body.home .hero__center{padding-block:clamp(84px,12svh,104px) 12px}
}
@media(min-width:960px) and (max-height:780px){
  body.home .hero__lead{display:none}
  body.home .hero__actions{flex-wrap:nowrap;gap:10px}
  body.home .hero__actions .btn{min-height:48px;padding:12px 20px;font-size:.9rem}
  body.home .hero__device{width:min(100%,calc((100svh - 300px)*1.45))}
  body.home .hero .display{font-size:clamp(1.9rem,min(4.4vw,7.6svh),4rem)}
}
@media(max-width:767px){
  body.home .hero__lead{display:none}
  body.home .hero__tag{font-size:9px;padding:8px 12px;margin-bottom:10px}
  body.home .hero .display{font-size:clamp(1.5rem,6.8vw,1.9rem);margin-bottom:12px}
  body.home .hero__actions{margin-top:12px;gap:8px}
  body.home .hero__actions .btn{min-height:46px;padding:11px 18px;font-size:14px}
  body.home .hero__stage{padding:8px 4px;margin-top:6px}
  body.home .hero__device{width:min(100%,calc((100svh - 560px)*1.5 + 120px));min-width:250px;margin-inline:auto}
  body.home .hero .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
  body.home .hero .stat,body.home .hero .stat:last-child{grid-column:auto;padding:9px 2px}
  body.home .hero .stat__n{font-size:1.05rem}
  body.home .hero .stat__l{font-size:.5rem;letter-spacing:.06em}
}
@media(max-width:767px) and (max-height:760px){
  body.home .hero__tag{display:none}
  body.home .hero__center{padding-block:78px 8px}
  body.home .hero__device{width:min(100%,calc((100svh - 500px)*1.5 + 100px))}
}

/* Videos que venden: título arriba */
body.home .video-sales__head{text-align:center;margin:0 auto clamp(18px,3svh,32px);max-width:640px}
body.home .video-sales__head .h2{margin:6px 0 8px}
body.home .video-sales__head .accent{color:#B85A2B}
body.home .video-sales__sub{margin:0;color:#4B443C;font-size:clamp(.88rem,1.6vw,1.05rem)}
@media(max-width:600px){body.home .video-sales__head .h2{font-size:1.4rem}body.home .video-sales__sub{font-size:.8rem}}

/* Programas y plataformas: 3 filas compactas sin huecos */
@media(min-width:900px){
  body.home .tags--rows{display:flex;flex-wrap:wrap;gap:10px 8px}
  body.home .tags--rows li{padding:9px 16px;font-size:.84rem}
}
@media(min-width:900px){
  body.home .tools{grid-template-columns:1.9fr 1fr!important;gap:28px 40px}
  body.home .tags--rows{gap:8px 6px}
  body.home .tags--rows li{padding:8px 13px;font-size:.8rem;white-space:nowrap}
}
@media(min-width:900px){body.home .tags--rows li{padding:10px 18px;font-size:.86rem}}

/* ===== v27 MÓVIL (home) ===== */
@media(max-width:767px){
  /* hero: contenido bien repartido y el botón flotante no tapa las cifras */
  body.home .hero__center{padding-block:78px 6px!important;justify-content:center}
  body.home .hero__stats{padding-bottom:92px!important}
  body.home .hero__device{width:min(100%,calc((100svh - 500px)*1.5 + 160px))!important}
  /* concepto → venta: sin parpadeo (imágenes en carga directa, sin máscara ni paralaje) */
  body.home #integral .flow__media{clip-path:none!important;transition:none!important;background:var(--cr-2)}
  body.home #integral .flow__media img{transform:none!important;transition:none!important;opacity:1}
  body.home #integral .flow__step{will-change:auto}
  /* programas, equipamiento y demás etiquetas: ocupan todo el ancho, títulos a la izquierda */
  body.home .tools .tags{display:flex;flex-wrap:wrap;gap:8px}
  body.home .tools .tags li{flex:1 1 auto;text-align:center;justify-content:center}
  /* embudo: texto centrado (la tarjeta ocupa todo el ancho) */
  body.home .fun__panel{text-align:center}
  body.home .fun__head{justify-content:center;flex-direction:column;align-items:center;gap:8px}
  body.home .fun__panel p{margin-inline:auto}
  body.home .fun__panel .tags{justify-content:center}
  body.home .fun__panel .fun__next{margin-inline:auto}
  /* contacto: tarjeta de borde a borde y más compacta */
  body.home #contacto .wrap{width:calc(100% - 20px)}
  body.home #contacto .contact__info{padding:16px 14px!important}
  body.home #contacto .contact__info .lead{font-size:.8rem}
  body.home #contacto .contact__info .h2{font-size:1.25rem}
  /* footer: solo la línea de copyright, sin franja negra extra */
  body:not(.ads-page) .footer,body.home .footer{padding-block:12px!important}
  body.home .footer__bottom{margin:0!important;padding:0!important;text-align:center}
  body.home #contacto{padding-bottom:28px!important}
}

/* v29 móvil: título del contacto grande en 2 líneas y footer centrado */
@media(max-width:767px){
  body.home #contacto .contact__info .h2{font-size:clamp(1.55rem,7.4vw,1.9rem)!important;line-height:1.1!important;text-wrap:balance;max-width:none;margin-inline:auto}
  body.home .footer{display:flex;align-items:center;justify-content:center;min-height:52px}
  body.home .footer>.wrap{width:100%;display:flex;justify-content:center}
  body.home .footer__bottom{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;margin:0!important;padding:0!important}
  body.home .footer__bottom>*{text-align:center;margin:0}
}
@media(max-width:767px){
  body.home #contacto .contact__info .h2{font-size:clamp(1.5rem,7.6vw,1.95rem)!important;white-space:nowrap;text-wrap:nowrap;text-align:center}
}
/* saltos de fila controlados en programas y plataformas */
body.home .tags--rows li.brk{flex:0 0 100%!important;width:100%;height:0;padding:0!important;margin:-4px 0 0!important;border:0!important;background:none!important;box-shadow:none!important;min-height:0;display:none}
@media(min-width:1200px){body.home .tags--rows li.brk--d{display:block}}
@media(max-width:600px){body.home .tags--rows li.brk--m{display:block}}
/* v31 móvil: programas y plataformas más compacto */
@media(max-width:767px){
  body.home .tools{gap:18px!important}
  body.home .tools h3{margin-bottom:8px!important}
  body.home .tags--rows,body.home .tools .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 5px!important}
  body.home .tags--rows li,body.home .tools .tags li{flex:0 0 auto!important;padding:6px 11px!important;font-size:.7rem!important;line-height:1.2;font-weight:500;white-space:nowrap}
  body.home .tags--rows li.brk{display:none!important}
}
/* v33 móvil · equipo: jerarquía clara nombre > cargo > descripción, foto más grande */
@media(max-width:767px){
  body.home #equipo .member__ph{width:196px!important;max-width:196px!important;margin:0 auto 14px!important}
  body.home #equipo .member h3{font-size:21px!important;font-weight:600!important;line-height:1.2;margin:0 0 6px!important;text-align:center;color:var(--tx)}
  body.home #equipo .member__role{font-size:10.5px!important;font-weight:500!important;letter-spacing:.09em!important;line-height:1.5!important;max-width:30ch;margin:0 auto 10px!important;text-align:center;color:var(--tx-2)}
  body.home #equipo .member__bio{font-size:12px!important;font-weight:400!important;line-height:1.55!important;max-width:32ch!important;margin:0 auto!important;text-align:center;color:var(--tx-2);opacity:.85}
}
/* v34 móvil · jerarquía tipográfica global (solo tamaños):
   h2 22 › título de card 17 › subtítulo 14 › cuerpo 13 › etiquetas 10–11 */
@media(max-width:767px){
  body.home :is(#produccion,#integral,#marketing,#portafolio,#equipo,.video-sales) .h2{font-size:22px!important}
  body.home #resultados .h2,body.home #resultados .h2 .results__title-sub,body.home #resultados .h2 span{font-size:28px!important}
  body.home .video-sales__sub,body.home #contacto .lead{font-size:14px!important}
  /* títulos de card */
  body.home :is(#produccion,#integral,#marketing,#portafolio,#equipo) :is(h3,.h3){font-size:17px!important;font-weight:600!important;line-height:1.25!important}
  body.home #integral .tools h3{font-size:11px!important;font-weight:600!important}
  body.home #integral .tools h3{letter-spacing:.12em}
  /* cuerpo */
  body.home #produccion p:not(.eyebrow):not(.kicker):not(.lead),
  body.home #resultados .results__d,
  body.home #marketing .fun__panel p,
  body.home #portafolio .case p:not(.case__k),
  body.home #integral .cta-band .muted,
  body.home #equipo .member__bio{font-size:13px!important;line-height:1.55!important}
  body.home #portafolio .case__k{font-size:11px!important;font-weight:600!important}
  body.home #equipo .member h3{font-size:17px!important}
  /* botones y pestañas */
  body.home #produccion a span,body.home .cta-band a.btn{font-size:14px!important}
  body.home #marketing .fun__l,body.home #marketing .fun__out{font-size:13px!important}
}