/* =====================================================================
   CREA Studio · Toques tecnológicos (oct-2026)
   Nada de esto toca el hero, el logo ni las imágenes.
   1) Aparición al bajar  2) Escaneo HUD y esquinas  3) Flujo de automatización
   ===================================================================== */

/* ---------- 1) Aparición al bajar ---------- */
html.ctx-js .ctx-reveal{
  opacity:0;
  translate:0 18px;
}
html.ctx-js .ctx-reveal.is-in{
  opacity:1;
  translate:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--ctx-delay,0ms);
}

/* ---------- 2a) Escaneo: línea roja que recorre la sección al entrar ---------- */
.ctx-scan{
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  pointer-events:none;
  z-index:2;
  overflow:hidden;
}
.ctx-scan::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,21,31,.0) 10%,#ff151f 50%,rgba(255,21,31,0) 90%,transparent 100%);
  transform:translateX(-100%);
  opacity:0;
}
.ctx-scan.is-on::before{
  animation:ctx-scan-run 1.6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes ctx-scan-run{
  0%{transform:translateX(-100%);opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{transform:translateX(100%);opacity:0}
}

/* ---------- 2b) Esquinas tipo interfaz en las tarjetas ---------- */
.ctx-corners{
  position:absolute;
  inset:7px;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity .35s ease, inset .35s ease;
  --c:#ff151f; --a:14px; --t:1.5px;
  background:
    linear-gradient(var(--c),var(--c)) top left / var(--a) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) top left / var(--t) var(--a) no-repeat,
    linear-gradient(var(--c),var(--c)) top right / var(--a) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) top right / var(--t) var(--a) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left / var(--a) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left / var(--t) var(--a) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right / var(--a) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right / var(--t) var(--a) no-repeat;
}
/* Al aparecer, las esquinas "encienden" una vez y se apagan */
.ctx-card.is-in > .ctx-corners{animation:ctx-boot 1.4s ease .25s both;}
@keyframes ctx-boot{
  0%{opacity:0;inset:16px}
  30%{opacity:1;inset:7px}
  70%{opacity:1}
  100%{opacity:0}
}
/* ---------- 2c) Tarjetas: se levantan, pasa el escáner y el ícono se ilumina ---------- */
.ctx-card{
  transition:translate .35s cubic-bezier(.2,.7,.2,1), scale .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.ctx-sweep{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
  z-index:2;
}
.ctx-sweep::before{
  content:'';
  position:absolute;
  left:-10%; right:-10%;
  top:0;
  height:38%;
  background:linear-gradient(180deg,transparent 0%,rgba(255,21,31,.06) 45%,rgba(255,21,31,.22) 50%,rgba(255,21,31,.06) 55%,transparent 100%);
  transform:translateY(-110%);
  opacity:0;
}
.ctx-icon{
  transition:scale .35s cubic-bezier(.2,.7,.2,1), filter .35s ease, color .35s ease;
}
@media (hover:hover){
  .ctx-card:hover{
    translate:0 -6px;
    scale:1.025;
    box-shadow:0 22px 46px rgba(0,0,0,.18), 0 0 0 1px rgba(255,21,31,.35) !important;
    z-index:4;
  }
  .ctx-card:hover > .ctx-corners{opacity:1;inset:5px;animation:none;}
  .ctx-card:hover > .ctx-sweep::before{animation:ctx-sweep-run .9s cubic-bezier(.4,0,.2,1) forwards;}
  .ctx-card:hover .ctx-icon{
    scale:1.14;
    filter:drop-shadow(0 0 10px rgba(255,21,31,.55));
  }
}
/* Bloques planos (sin fondo propio): al pasar el mouse se vuelven tarjeta */
.ctx-flat{transition:translate .35s cubic-bezier(.2,.7,.2,1), scale .35s cubic-bezier(.2,.7,.2,1), background-color .35s ease, box-shadow .35s ease;}
.ctx-flat.is-in > .ctx-corners{animation:none;}
@media (hover:hover){
  .ctx-flat.ctx-on-light:hover{background-color:#fff !important;border-radius:14px;}
  .ctx-flat.ctx-on-dark:hover{background-color:rgba(255,255,255,.06) !important;border-radius:14px;box-shadow:0 22px 46px rgba(0,0,0,.45), 0 0 0 1px rgba(255,21,31,.45) !important;}
}
@keyframes ctx-sweep-run{
  0%{transform:translateY(-110%);opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{transform:translateY(290%);opacity:0}
}
/* En celular no hay mouse: al tocar la tarjeta se marca un instante */
@media (hover:none){
  .ctx-card:active{scale:.985;}
  .ctx-card:active > .ctx-corners{opacity:1;animation:none;}
}

/* =====================================================================
   3) Flujo de automatización · CREA Tech
   ===================================================================== */
.ctx-flow{
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:clamp(64px,8vw,112px) 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%,rgba(255,21,31,.10),transparent 70%),
    linear-gradient(180deg,#030303 0%,#080809 100%);
}
/* Retícula fina de fondo, se desvanece hacia los bordes */
.ctx-flow::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px);
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 50% 50%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 70% 75% at 50% 50%,#000 30%,transparent 80%);
}
.ctx-flow__wrap{
  position:relative;
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}
.ctx-flow__head{max-width:720px;margin:0 auto clamp(40px,5vw,64px);text-align:center;}
.ctx-flow__kicker{
  display:inline-block;
  font:600 13px/1 Inter,Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#ff151f;
  margin-bottom:14px;
}
.ctx-flow__head h2{
  font-family:Oswald,"Arial Narrow",sans-serif;
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(30px,3.6vw,46px);
  line-height:1.05;
  letter-spacing:.01em;
  color:#fff;
  margin:0 0 16px;
}
.ctx-flow__head h2 span{color:#ff151f;}
.ctx-flow__head p{
  font:400 clamp(15px,1.25vw,17px)/1.6 Inter,Arial,sans-serif;
  color:rgba(255,255,255,.7);
  margin:0;
}

/* Pista y nodos */
.ctx-flow__track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  --p:0;
}
.ctx-flow__rail{
  position:absolute;
  top:31px;
  left:10%; right:10%;
  height:2px;
  background:rgba(255,255,255,.1);
  border-radius:2px;
}
.ctx-flow__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:calc(var(--p) * 100%);
  background:linear-gradient(90deg,rgba(255,21,31,.35),#ff151f);
  box-shadow:0 0 12px rgba(255,21,31,.6);
  border-radius:2px;
  transition:width .9s cubic-bezier(.65,0,.35,1);
}
.ctx-flow__pulse{
  position:absolute;
  top:50%;
  left:calc(var(--p) * 100%);
  width:10px; height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,21,31,.35),0 0 18px 4px rgba(255,21,31,.75);
  transition:left .9s cubic-bezier(.65,0,.35,1);
}
.ctx-node{
  position:relative;
  text-align:center;
  padding:0 6px;
}
.ctx-node__icon{
  position:relative;
  z-index:1;
  width:64px; height:64px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#0d0d0f;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.45);
  font-size:26px;
  transition:border-color .4s ease, color .4s ease, box-shadow .4s ease, background .4s ease;
}
.ctx-node h3{
  font-family:Oswald,"Arial Narrow",sans-serif;
  font-weight:600;
  text-transform:uppercase;
  font-size:19px;
  letter-spacing:.02em;
  margin:0 0 6px;
  color:rgba(255,255,255,.55);
  transition:color .4s ease;
}
.ctx-node p{
  font:400 14px/1.5 Inter,Arial,sans-serif;
  color:rgba(255,255,255,.5);
  margin:0 auto;
  max-width:200px;
  transition:color .4s ease;
}
.ctx-node.is-active .ctx-node__icon{
  border-color:#ff151f;
  color:#fff;
  background:radial-gradient(circle at 50% 35%,rgba(255,21,31,.35),#120204 75%);
  box-shadow:0 0 0 4px rgba(255,21,31,.12),0 0 28px rgba(255,21,31,.35);
}
.ctx-node.is-active h3{color:#fff;}
.ctx-node.is-active p{color:rgba(255,255,255,.78);}

/* Consola: registro del ejemplo */
.ctx-flow__log{
  margin:clamp(36px,4vw,52px) auto 0;
  max-width:620px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  padding:16px 20px;
  font:500 14px/1.5 Inter,Arial,sans-serif;
  color:rgba(255,255,255,.8);
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
}
.ctx-flow__log b{
  flex:none;
  font-weight:600;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ff151f;
}
.ctx-flow__log span{transition:opacity .25s ease;}
.ctx-flow__log span.is-swap{opacity:0;}
.ctx-flow__cta{text-align:center;margin-top:clamp(32px,4vw,44px);}

/* Celular: la pista se vuelve vertical */
@media (max-width: 860px){
  .ctx-flow__track{grid-template-columns:1fr;gap:26px;padding-left:4px;}
  .ctx-flow__rail{top:32px;bottom:32px;left:35px;right:auto;width:2px;height:auto;}
  .ctx-flow__fill{inset:0 0 auto 0;width:auto;height:calc(var(--p) * 100%);transition:height .9s cubic-bezier(.65,0,.35,1);}
  .ctx-flow__pulse{left:50%;top:calc(var(--p) * 100%);margin:-5px 0 0 -5px;transition:top .9s cubic-bezier(.65,0,.35,1);}
  .ctx-node{display:grid;grid-template-columns:64px 1fr;gap:0 18px;text-align:left;align-items:center;padding:0;}
  .ctx-node__icon{margin:0;grid-row:span 2;}
  .ctx-node h3{align-self:end;}
  .ctx-node p{margin:0;max-width:none;align-self:start;}
  .ctx-flow__log{font-size:13px;}
}

/* Movimiento reducido: todo visible y quieto */
@media (prefers-reduced-motion: reduce){
  html.ctx-js .ctx-reveal{opacity:1;translate:none;}
  .ctx-scan,.ctx-flow__pulse{display:none;}
  .ctx-card.is-in > .ctx-corners{animation:none;}
  .ctx-card,.ctx-icon{transition:none;}
  .ctx-card:hover{translate:none;scale:none;}
  .ctx-sweep{display:none;}
  .ctx-flow__fill,.ctx-node__icon{transition:none;}
}