/* ==========================================================
   TecnetOne · Cómo funciona (tarjetas que entran al scroll)
   ========================================================== */

.chw{
  position:relative;
  overflow:clip;
  background-color:var(--chw-bg,#000208);
  /* cada texto trae su propia fuente desde su campo font */
  -webkit-font-smoothing:antialiased;
}
.chw *{box-sizing:border-box}

.chw__track{height:var(--chw-track,300vh)}

.chw__sticky{
  position:sticky;top:0;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:min(var(--chw-pad-top,104px), 9vh) 24px min(var(--chw-pad-bottom,104px), 9vh);
  background-image:var(--chw-bg-image,none);
  background-position:50% 50%;
  background-size:cover;
  background-repeat:no-repeat;
}

.chw__glow{
  position:absolute;inset:0;pointer-events:none;
  opacity:var(--chw-glow-a,1);
  background:
    radial-gradient(120% 70% at 50% 8%, color-mix(in srgb, var(--chw-glow-1,#00a8e8) 16%, transparent) 0%, transparent 60%),
    radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--chw-glow-2,#1a5fb4) 28%, transparent) 0%, transparent 70%);
}
/* respaldo para navegadores sin color-mix */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .chw__glow{background:radial-gradient(110% 65% at 50% 5%, rgba(0,168,232,.16) 0%, rgba(0,0,0,0) 62%)}
}

.chw__lines{
  position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 0%,transparent 75%);
          mask-image:radial-gradient(70% 60% at 50% 30%,#000 0%,transparent 75%);
}

.chw__inner{position:relative;z-index:2;width:100%;max-width:var(--chw-content-w,1240px);margin:0 auto}

/* ---------------- encabezado ---------------- */
/* El espacio hasta las tarjetas es editable, con un tope del 10% del alto
   de la pantalla: en escritorio la seccion se queda fija ocupando una
   pantalla entera, asi que pasado ese punto las tarjetas se cortarian.
   En tablet y movil no hay sticky y el tope no aplica. */
.chw__head{text-align:center;max-width:var(--chw-head-w,760px);
  margin:0 auto min(var(--chw-head-gap,56px), 10vh)}
.chw__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--chw-eyebrow-font, inherit);
  font-weight:var(--chw-eyebrow-weight,600);
  font-size:var(--chw-eyebrow-size,12px);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--chw-eyebrow-color,#7fd8f7);
  border:1px solid currentColor;
  border-radius:999px;padding:7px 15px;margin-bottom:20px;
  opacity:.95;
}
.chw__eyebrow i{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;box-shadow:0 0 10px currentColor;flex:0 0 auto;
}
.chw__title{
  margin:0 0 16px;
  font-family:var(--chw-title-font, inherit);
  color:var(--chw-title-color,#fff);
  font-weight:var(--chw-title-weight,700);
  font-size:var(--chw-title-size,45px);
  line-height:1.12;letter-spacing:-.03em;
}
.chw__desc{
  margin:0;
  font-family:var(--chw-desc-font, inherit);
  font-weight:var(--chw-desc-weight,400);
  color:var(--chw-desc-color,#b9c2ce);
  font-size:var(--chw-desc-size,17px);
  line-height:1.65;
}

/* ---------------- fila de tarjetas ---------------- */
.chw__flex{
  display:flex;justify-content:center;align-items:flex-start;
  list-style:none;margin:0;padding:0;
}

.chw__card{
  position:relative;
  isolation:isolate;
  flex:0 0 auto;
  width:100%;max-width:var(--chw-card-w,424px);
  min-height:min(var(--chw-card-min-h,420px), 42vh);
  margin-top:var(--chw-offset-y,0);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--chw-card-pad,30px);
  padding-bottom:calc(var(--chw-card-pad,30px) + 8px);
  border:var(--chw-border-w,1px) solid var(--chw-border,rgba(255,255,255,.2));
  border-radius:var(--chw-radius,16px);
  -webkit-backdrop-filter:blur(var(--chw-blur,20px));
          backdrop-filter:blur(var(--chw-blur,20px));
  will-change:transform;
}
/* capa de color aparte: así las tarjetas de atrás se aclaran
   sin desvanecer también el texto */
.chw__card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  background-image:var(--chw-grad);
  background-position:50% 50%;
  background-size:cover;
  background-repeat:no-repeat;
}
.chw[data-cardbg="solid"] .chw__card::before{
  background-image:none;
  background-color:var(--chw-card-solid,#101f33);
}
/* la imagen lleva un velo encima para que el texto siga legible */
.chw[data-cardbg="image"] .chw__card::before{
  background-image:linear-gradient(var(--chw-card-ov), var(--chw-card-ov)), var(--chw-card-img, none);
  background-color:var(--chw-card-solid,#101f33);
}
/* el aclarado de las tarjetas de atrás simula profundidad, y eso solo
   tiene sentido con degradado: en color plano o imagen aclararlas se ve
   como si el color no se hubiera aplicado, así que ahí van a opacidad completa */
.chw[data-cardbg="gradient"] .chw__card--back::before{opacity:var(--chw-back-op,.6)}

.chw__card + .chw__card{margin-left:calc(var(--chw-overlap,130px) * -1)}

/* Con "Proteger el texto" encendido, cada tarjeta reserva por dentro la
   franja que le tapa la siguiente, así no se pierde ni una palabra.
   Apágalo si quieres el efecto de baraja literal, con el texto cortado. */
.chw--protect .chw__card:not(:last-child){
  padding-right:calc(var(--chw-card-pad,30px) + max(0px, var(--chw-overlap,130px) - 12px));
}

.chw__card-top{flex:0 0 auto}
.chw__card-body{flex:0 0 auto}

.chw__num{
  font-family:var(--chw-num-font, inherit);
  font-size:var(--chw-num-size,34px);
  font-weight:var(--chw-num-weight,700);
  letter-spacing:-.02em;line-height:1;
  color:var(--chw-num-color,#7fd8f7);
}
.chw__num[data-style="gradient"]{
  background:linear-gradient(120deg,#fff 0%, var(--chw-num-color,#7fd8f7) 55%, var(--chw-glow-1,#00a8e8) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.chw__rule{
  height:1px;margin-top:18px;
  background:linear-gradient(90deg, var(--chw-glow-1,#00a8e8), rgba(255,255,255,0));
  opacity:.6;
}
.chw__card-title{
  margin:0 0 12px;
  font-family:var(--chw-ctitle-font, inherit);
  color:var(--chw-ctitle-color,#fff);
  font-size:var(--chw-ctitle-size,27px);
  font-weight:var(--chw-ctitle-weight,600);
  line-height:1.2;letter-spacing:-.02em;
}
.chw__card-desc{
  margin:0;
  font-family:var(--chw-cdesc-font, inherit);
  font-weight:var(--chw-cdesc-weight,400);
  color:var(--chw-cdesc-color,#c3cbd6);
  font-size:var(--chw-cdesc-size,16px);
  line-height:1.58;
}

/* ---------------- tablet: cuadrícula, sin sticky ---------------- */
@media (max-width:991px){
  .chw__track{height:auto}
  .chw__sticky{position:static;min-height:0;padding:var(--chw-pad-top,104px) 20px var(--chw-pad-bottom,104px)}
  .chw__head{margin-bottom:calc(var(--chw-head-gap,56px) * .7)}
  .chw__flex{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .chw__flex[data-cols="1"]{grid-template-columns:1fr}
  .chw__card{
    max-width:100%;min-height:0;margin-top:0;
    padding:22px;row-gap:48px;
    transform:none !important;
  }
  .chw__card + .chw__card{margin-left:0}
  .chw--protect .chw__card:not(:last-child){padding-right:22px}
  /* un solo control reduce todos los textos, manteniendo proporciones */
  .chw__title{font-size:calc(var(--chw-title-size,45px) * var(--chw-m-scale,.68))}
  .chw__desc{font-size:calc(var(--chw-desc-size,17px) * max(var(--chw-m-scale,.68), .85))}
  .chw__card-title{font-size:calc(var(--chw-ctitle-size,27px) * max(var(--chw-m-scale,.68), .8))}
  .chw__card-desc{font-size:calc(var(--chw-cdesc-size,16px) * max(var(--chw-m-scale,.68), .88))}
  .chw__num{font-size:calc(var(--chw-num-size,34px) * var(--chw-m-scale,.68))}
}

@media (max-width:640px){
  .chw__flex{grid-template-columns:1fr}
  .chw__sticky{padding-left:18px;padding-right:18px}
  .chw__card{padding:20px;row-gap:32px}
  .chw--protect .chw__card:not(:last-child){padding-right:20px}
}

@media (prefers-reduced-motion:reduce){
  .chw__card{transform:none !important}
}