/* =========================================================
   BITSIDEAS — Programa de Aliados
   ========================================================= */

/* ---------------- Niveles ---------------- */
.tiers{
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:20px;row-gap:20px;align-items:stretch;
}
@media (max-width:1340px){.tiers{grid-template-columns:repeat(2,1fr);max-width:900px;margin-inline:auto}}

.tier{
  position:relative;display:flex;flex-direction:column;
  padding:34px 30px 30px;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  background:var(--bg-elev);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform .55s var(--ease-out),box-shadow .5s var(--ease),border-color .4s var(--ease);
}
.tier:hover{transform:translateY(-9px);box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb,var(--accent-500) 44%,var(--line))}

/* El nivel recomendado va destacado y algo más alto */
.tier--top{
  border-color:color-mix(in srgb,var(--accent-500) 55%,var(--line));
  box-shadow:var(--shadow-md);
}
.tier--top::after{
  content:"El más elegido";content:"Recomendado";
  position:absolute;top:18px;right:-34px;z-index:3;
  padding:6px 42px;transform:rotate(38deg);
  background:linear-gradient(100deg,var(--brand-600),var(--accent-500));color:#fff;
  font-family:var(--font);font-weight:700;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;box-shadow:0 6px 16px rgba(43,39,51,.22);
}

/* Halo que sube desde la base al activar */
.tier__glow{
  position:absolute;left:0;right:0;bottom:0;height:55%;z-index:-1;opacity:0;
  background:linear-gradient(0deg,color-mix(in srgb,var(--accent-500) 14%,transparent),transparent);
  transition:opacity .55s var(--ease);
}
.tier:hover .tier__glow{opacity:1}

.tier__head{position:relative;padding-bottom:20px;margin-bottom:20px;
  border-bottom:1px solid var(--line)}
.tier__n{
  position:absolute;top:-8px;right:0;
  font-family:var(--font);font-weight:700;font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent-500) 28%,transparent);
  transition:-webkit-text-stroke-color .4s var(--ease);
}
.tier:hover .tier__n{-webkit-text-stroke-color:color-mix(in srgb,var(--accent-500) 60%,transparent)}

.tier__ico{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:18px;
  background:color-mix(in srgb,var(--accent-500) 11%,transparent);color:var(--brand-600);
  transition:transform .55s var(--ease-out),background .35s var(--ease),color .35s var(--ease);
}
.tier__ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tier:hover .tier__ico{transform:translateY(-4px) rotate(-6deg) scale(1.07);
  background:color-mix(in srgb,var(--accent-500) 18%,transparent);color:var(--accent-600)}

.tier h3{font-size:1.24rem;margin-bottom:8px}
.tier__gancho{font-size:1rem;color:var(--ink-2);line-height:1.55}

/* Cifra de la condición económica */
.tier__cifra{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:16px 18px;border-radius:var(--r-md);margin-bottom:20px;
  background:var(--bg-soft);border:1px solid var(--line);
}
.tier__cifra b{
  font-family:var(--font-light);font-weight:300;font-size:2.2rem;line-height:1;
  color:var(--brand-600);letter-spacing:-.01em;
}
.tier__cifra span{font-size:.8rem;color:var(--muted);line-height:1.4}

.tier__para{font-size:.9rem;color:var(--muted);line-height:1.6;margin-bottom:12px}
.tier__para b{color:var(--ink);font-family:var(--font);font-weight:600}

.tier__cols{display:grid;gap:20px;margin-top:8px;margin-bottom:24px}
.tier__cols h4{
  font-family:var(--font);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:11px;
}
.tier__list{display:grid;gap:9px}
.tier__list li{display:flex;gap:9px;align-items:flex-start;
  font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.tier__list svg{width:14px;height:14px;flex:0 0 auto;margin-top:3px;
  stroke:var(--accent-500);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tier__list--req svg{stroke:var(--muted);stroke-width:2.2}
.tier__list--req li{color:var(--muted)}

.tier__cta{
  margin-top:auto;display:block;text-align:center;
  padding:14px 20px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--bg);
  font-family:var(--font);font-weight:700;font-size:.9rem;color:var(--ink);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             color .3s var(--ease),transform .35s var(--ease-out);
}
.tier__cta:hover{background:var(--brand-600);border-color:var(--brand-600);
  color:#fff;transform:translateY(-3px)}
.tier--top .tier__cta{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.tier--top .tier__cta:hover{background:var(--accent-600);border-color:var(--accent-600)}

/* Alineacion fila a fila. Cada tarjeta adopta las mismas filas que sus vecinas,
   de modo que cifra, parrafos, encabezados de lista y boton quedan a la misma
   altura aunque los textos tengan distinta longitud. */
@media (min-width:1341px){
  @supports (grid-template-rows:subgrid){
    .tiers{grid-template-rows:repeat(9,auto);row-gap:0}
    .tier{display:grid;grid-template-rows:subgrid;grid-row:span 9;row-gap:0}
    .tier__cols{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:0}
    .tier__cols > div{display:grid;grid-template-rows:subgrid;grid-row:span 2}
    .tier__cols > div + div{margin-top:20px}
  }
}


@media (max-width:1080px){.tiers{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}

/* ---------------- Encaje por producto ---------------- */
.fits{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fit{
  display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-elev);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease);
}
.fit:hover{transform:translateY(-7px);box-shadow:var(--shadow-md)}
.fit__img{position:relative;overflow:hidden}
.fit__img img{width:100%;height:150px;object-fit:cover;transition:transform 1s var(--ease-out)}
.fit:hover .fit__img img{transform:scale(1.07)}
.fit__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(24,21,31,.55),transparent 60%)}
.fit__body{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
.fit__tag{
  font-family:var(--font);font-weight:700;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-600);margin-bottom:8px;display:block;
}
.fit h3{font-size:1.2rem;margin-bottom:9px;letter-spacing:.01em}
.fit h3 a{transition:color .3s var(--ease)}
.fit:hover h3 a{color:var(--brand-600)}
.fit p{font-size:.88rem;line-height:1.6;color:var(--muted)}
@media (max-width:1080px){.fits{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.fits{grid-template-columns:1fr}}

/* ---------------- Aviso de condiciones por confirmar ---------------- */
.tiers-note{
  display:flex;gap:13px;align-items:flex-start;max-width:90ch;
  margin:0 auto clamp(30px,4vw,44px);padding:16px 20px;border-radius:var(--r-md);
  background:var(--bg-soft);border:1px solid var(--line);
}
.tiers-note svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;color:var(--accent-600);
  stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tiers-note p{font-size:.9rem;line-height:1.6;color:var(--muted)}
.tiers-note b{color:var(--ink)}


/* =========================================================
   Fondo animado de la seccion de niveles
   ========================================================= */
.tiers-wrap{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(170deg,var(--bg) 0%,var(--bg-soft) 48%,var(--bg) 100%);
}
.tiers-wrap .container{position:relative;z-index:2}

/* Malla de color en movimiento */
.tiers-mesh{position:absolute;inset:-16%;z-index:0;pointer-events:none;filter:blur(78px)}
.tiers-mesh span{position:absolute;display:block;border-radius:50%;opacity:.42;will-change:transform}
.tiers-mesh span:nth-child(1){
  width:42%;padding-bottom:42%;top:-4%;left:-6%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-500) 58%,transparent),transparent 68%);
  animation:tmA 24s var(--ease) infinite alternate;
}
.tiers-mesh span:nth-child(2){
  width:36%;padding-bottom:36%;top:34%;left:56%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-500) 52%,transparent),transparent 68%);
  animation:tmB 29s var(--ease) infinite alternate;
}
.tiers-mesh span:nth-child(3){
  width:32%;padding-bottom:32%;top:62%;left:16%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-400) 46%,transparent),transparent 68%);
  animation:tmC 33s var(--ease) infinite alternate;
}
@keyframes tmA{to{transform:translate3d(18%,14%,0) scale(1.2)}}
@keyframes tmB{to{transform:translate3d(-16%,-12%,0) scale(1.15)}}
@keyframes tmC{to{transform:translate3d(14%,-16%,0) scale(1.24)}}

/* Reticula muy tenue por encima de la malla */
.tiers-wrap::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 43px,rgba(14,122,171,.055) 43px 44px),
    repeating-linear-gradient(0deg,transparent 0 43px,rgba(14,122,171,.055) 43px 44px);
  -webkit-mask-image:radial-gradient(90% 75% at 50% 45%,#000 32%,transparent 88%);
  mask-image:radial-gradient(90% 75% at 50% 45%,#000 32%,transparent 88%);
}
/* Velo para que las tarjetas siempre ganen contraste */
.tiers-wrap::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 72%,transparent),
    color-mix(in srgb,var(--bg) 52%,transparent) 45%,
    color-mix(in srgb,var(--bg) 76%,transparent));
}

/* Las tarjetas se apoyan en superficie acrilica sobre la malla */
.tiers-wrap .tier{
  background:color-mix(in srgb,var(--bg-elev) 82%,transparent);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
}

/* Los iconos de nivel se trazan al entrar en pantalla */
.tier__ico .draw path,.tier__ico .draw circle,.tier__ico .draw ellipse{
  stroke-dasharray:var(--len,140);stroke-dashoffset:var(--len,140);
  transition:stroke-dashoffset 1.1s var(--ease-out);
}
.tier.is-in .tier__ico .draw path,
.tier.is-in .tier__ico .draw circle,
.tier.is-in .tier__ico .draw ellipse{stroke-dashoffset:0}
.tier:hover .tier__ico .draw path,
.tier:hover .tier__ico .draw circle,
.tier:hover .tier__ico .draw ellipse{animation:tierRedraw 1s var(--ease-out)}
@keyframes tierRedraw{from{stroke-dashoffset:var(--len,140)}to{stroke-dashoffset:0}}

/* El globo del distribuidor gira despacio */
.tier__ico .ico-accent{transform-origin:16px 16px}
.tier.is-in .tier__ico .ico-accent{animation:tierSpin 11s var(--ease) infinite}
.tier:hover .tier__ico .ico-accent{animation-duration:3.4s}
@keyframes tierSpin{0%,100%{rx:5.5}50%{rx:11.5}}

@media (prefers-reduced-motion:reduce){
  .tiers-mesh span,.tier__ico .ico-accent{animation:none}
  .tier__ico .draw path,.tier__ico .draw circle,.tier__ico .draw ellipse{stroke-dashoffset:0}
}



/* =========================================================
   Flujo horizontal del proceso
   Las tarjetas sobresalen una tras otra, como si el proceso
   se fuera cumpliendo, y los puntos las van conectando.
   ========================================================= */
.flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:stretch;gap:0;
}

.flow__step{
  position:relative;display:flex;flex-direction:column;
  padding:32px 26px 28px;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  background:var(--bg-elev);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(43,39,51,.05);
  opacity:0;transform:translateY(28px);
  transition:box-shadow .5s var(--ease),border-color .4s var(--ease),transform .5s var(--ease-out);
}
.flow.is-in .flow__step{
  animation:flowIn .8s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * .45s);
}
@keyframes flowIn{
  0%{opacity:0;transform:translateY(28px) scale(.97)}
  55%{opacity:1;transform:translateY(-14px) scale(1.02)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.flow.is-in .flow__step:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb,var(--accent-500) 46%,var(--line));
}
.flow__step:focus-visible{outline:3px solid var(--accent-400);outline-offset:3px}

.flow__glow{
  position:absolute;left:0;right:0;bottom:0;height:62%;z-index:-1;opacity:0;
  background:linear-gradient(0deg,color-mix(in srgb,var(--accent-500) 15%,transparent),transparent);
  transition:opacity .5s var(--ease);
}
.flow__step:hover .flow__glow{opacity:1}

.flow__n{
  position:absolute;top:14px;right:20px;
  font-family:var(--font);font-weight:700;font-size:2.3rem;line-height:1;
  color:transparent;
  -webkit-text-stroke:1.4px color-mix(in srgb,var(--accent-500) 26%,transparent);
  transition:-webkit-text-stroke-color .4s var(--ease),transform .5s var(--ease-out);
}
.flow__step:hover .flow__n{
  -webkit-text-stroke-color:color-mix(in srgb,var(--accent-500) 62%,transparent);
  transform:scale(1.1);
}

/* ---------------- Iconos animados ---------------- */
.flow__ico{
  width:60px;height:60px;border-radius:18px;display:grid;place-items:center;margin-bottom:20px;
  background:color-mix(in srgb,var(--accent-500) 10%,transparent);color:var(--brand-600);
  transition:transform .55s var(--ease-out),background .4s var(--ease),color .4s var(--ease);
}
.flow__step:hover .flow__ico{
  transform:translateY(-4px) rotate(-6deg) scale(1.08);
  background:color-mix(in srgb,var(--accent-500) 18%,transparent);
  color:var(--accent-600);
}
.flow__ico svg{
  width:32px;height:32px;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
/* Los trazos se dibujan cuando la tarjeta cumple su paso */
.flow__ico svg > *{
  stroke-dasharray:var(--l,90);stroke-dashoffset:var(--l,90);
  transition:stroke-dashoffset .9s var(--ease-out);
}
.flow.is-in .flow__step .flow__ico svg > *{
  stroke-dashoffset:0;transition-delay:calc(var(--i) * .45s + .28s);
}

/* 01 - el formulario se rellena renglon a renglon */
.fx-hoja{--l:92}
.fx-linea{--l:10;stroke:var(--accent-500)}
.flow__step:hover .fx-l1{animation:fxTrazo .45s var(--ease-out)}
.flow__step:hover .fx-l2{animation:fxTrazo .45s var(--ease-out) .12s backwards}
.flow__step:hover .fx-l3{animation:fxTrazo .45s var(--ease-out) .24s backwards}
@keyframes fxTrazo{from{stroke-dashoffset:10}to{stroke-dashoffset:0}}

/* 02 - las dos partes se juntan: el acuerdo */
.fx-uno{--l:29;transform:translateX(-3px);transition:transform .6s var(--ease-out)}
.fx-base-a{--l:25;transform:translateX(-3px);transition:transform .6s var(--ease-out)}
.fx-dos{--l:29;stroke:var(--accent-500);transform:translateX(3px);transition:transform .6s var(--ease-out)}
.fx-base-b{--l:25;stroke:var(--accent-500);transform:translateX(3px);transition:transform .6s var(--ease-out)}
.flow__step:hover .fx-uno,.flow__step:hover .fx-base-a,
.flow__step:hover .fx-dos,.flow__step:hover .fx-base-b{transform:none}

/* 03 - el sello de certificacion estampa y aparece el visto bueno */
.fx-sello{--l:54;transform-origin:16px 13px}
.fx-check{--l:17;stroke:var(--accent-500);stroke-width:2.4}
.fx-cinta{--l:38}
.flow__step:hover .fx-sello{animation:fxSello .6s var(--ease-out)}
@keyframes fxSello{0%{transform:scale(1)}45%{transform:scale(.85)}100%{transform:scale(1)}}
.flow__step:hover .fx-check{animation:fxCheck .5s var(--ease-out) .18s backwards}
@keyframes fxCheck{from{stroke-dashoffset:17}to{stroke-dashoffset:0}}

/* 04 - el engranaje gira: la ejecucion es nuestra */
.fx-eje{--l:26;stroke:var(--accent-500);transform-origin:16px 16px}
.fx-rueda{--l:58;transform-origin:16px 16px}
.fx-diente{--l:28;transform-origin:16px 16px}
.flow__step:hover .fx-rueda,.flow__step:hover .fx-diente{
  animation:fxGira 4s linear infinite;
}
.flow__step:hover .fx-eje{animation:fxGira 4s linear infinite reverse}
@keyframes fxGira{to{transform:rotate(360deg)}}
/* Una vez completado el proceso el engranaje sigue girando, muy despacio */
.flow.is-done .flow__step:last-child .fx-diente{animation:fxGira 18s linear infinite}

.flow__step h3{font-size:1.1rem;line-height:1.25;margin-bottom:9px}
.flow__step p{font-size:.9rem;line-height:1.6;color:var(--muted);margin-bottom:16px}
.flow__meta{
  margin-top:auto;font-family:var(--font);font-weight:700;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-600);
}

/* ---------------- Puntos que conectan las tarjetas ---------------- */
.flow__dots{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:0 14px;align-self:center;
}
.flow__dots i{
  width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:color-mix(in srgb,var(--accent-500) 24%,transparent);
  opacity:0;transform:scale(.4);
}
/* Viajan de una tarjeta a la siguiente, justo antes de que aparezca */
.flow.is-in .flow__dots i{animation:dotRun .5s var(--ease-out) forwards}
.flow.is-in .flow__dots i:nth-child(1){animation-delay:calc(var(--i) * .45s - .30s)}
.flow.is-in .flow__dots i:nth-child(2){animation-delay:calc(var(--i) * .45s - .24s)}
.flow.is-in .flow__dots i:nth-child(3){animation-delay:calc(var(--i) * .45s - .18s)}
.flow.is-in .flow__dots i:nth-child(4){animation-delay:calc(var(--i) * .45s - .12s)}
.flow.is-in .flow__dots i:nth-child(5){animation-delay:calc(var(--i) * .45s - .06s)}
@keyframes dotRun{
  0%{opacity:0;transform:scale(.4)}
  55%{opacity:1;transform:scale(1.6);background:var(--accent-500)}
  100%{opacity:1;transform:scale(1)}
}
/* Latido continuo una vez el flujo esta completo.
   Los retardos se redeclaran con la misma especificidad que los de entrada
   para que no se hereden y los puntos no queden apagados. */
.flow.is-done .flow__dots i:nth-child(1){animation:dotPulso 2.4s var(--ease) infinite both;animation-delay:0s}
.flow.is-done .flow__dots i:nth-child(2){animation:dotPulso 2.4s var(--ease) infinite both;animation-delay:.12s}
.flow.is-done .flow__dots i:nth-child(3){animation:dotPulso 2.4s var(--ease) infinite both;animation-delay:.24s}
.flow.is-done .flow__dots i:nth-child(4){animation:dotPulso 2.4s var(--ease) infinite both;animation-delay:.36s}
.flow.is-done .flow__dots i:nth-child(5){animation:dotPulso 2.4s var(--ease) infinite both;animation-delay:.48s}
@keyframes dotPulso{
  0%,70%,100%{opacity:1;transform:scale(1);background:color-mix(in srgb,var(--accent-500) 24%,transparent)}
  35%{opacity:1;transform:scale(1.45);background:var(--accent-500)}
}

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
  .flow{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .flow__dots{flex-direction:column;padding:14px 0;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .flow__step,.flow.is-in .flow__step{opacity:1;transform:none;animation:none}
  .flow__dots i,.flow.is-done .flow__dots i{opacity:1;transform:none;animation:none}
  .flow__ico svg > *{stroke-dashoffset:0}
}