/* Web de marca de Impulsibox · lo común a todas las páginas: tipografía, color, barra, botones y cristal.
   El megamenú y el pie viven en marco.css; cada página añade su propia hoja con sus efectos (inicio.css, impulsores.css…). */
@font-face{font-family:'Poppins';src:url('../tipografia/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../tipografia/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../tipografia/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../tipografia/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --verde:#2bb295; --texto-osc:#111827; --gris:#4b5563; --banda:#f6f7f9;
  --apoyo:rgba(255,255,255,.72); --linea:rgba(255,255,255,.1);
  --cristal:rgba(255,255,255,.06); --cristal-borde:rgba(255,255,255,.12);
  --barra:72px; --ancho:1200px; --lado:24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--barra)}
body{font-family:'Poppins',system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.6;color:#fff;background:#000;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-red{width:1em;height:1em;flex:none;fill:currentColor}
.envoltura{width:min(var(--ancho),100% - 2*var(--lado));margin:0 auto}
.etq{font-weight:500;font-size:14px;line-height:1.3;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.punto-f{color:var(--verde)}
.junto{white-space:nowrap}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;text-wrap:balance}
h2{font-size:clamp(34px,4.6vw,64px);line-height:1.06}
.txt{font-size:clamp(16px,1.25vw,19px);line-height:1.65;color:var(--apoyo);max-width:36em}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;height:54px;padding:0 28px;border:0;border-radius:999px;
  font-weight:600;font-size:16px;line-height:1;white-space:nowrap;cursor:pointer;transition:transform .25s ease,background-color .25s ease,border-color .25s ease}
.btn .ic{font-size:18px}
.btn--blanco{background:#fff;color:#000}
.btn--blanco:hover{transform:translateY(-2px)}
.btn--cristal{color:#fff;background:var(--cristal);border:1px solid rgba(255,255,255,.24);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn--cristal:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.chip{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 12px;border-radius:999px;background:var(--cristal);
  border:1px solid var(--cristal-borde);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-weight:500;font-size:14px}
.punto{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--verde);box-shadow:0 0 12px rgba(43,178,149,.8);flex:none}
.punto--onda::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--verde);opacity:0}
.mueve .punto--onda::after{animation:onda 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes onda{0%{transform:scale(1);opacity:.95}100%{transform:scale(3.4);opacity:0}}

/* la barra: transparente arriba, de cristal al bajar */
.barra{position:fixed;inset:0 0 auto;z-index:50;height:var(--barra);border-bottom:1px solid transparent;transition:background-color .35s ease,border-color .35s ease}
.barra.solida{background:rgba(0,0,0,.62);border-color:var(--linea);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.barra-in{height:100%;width:min(var(--ancho),100% - 2*var(--lado));margin:0 auto;display:flex;align-items:center;gap:28px}
.barra-logo{margin-right:auto}
.barra-logo img{height:26px;width:auto}
.barra .btn{height:44px;padding:0 20px;font-size:15px}

/* la barra de lectura (Términos, Privacidad y las lecciones de la academia) */
.lectura{position:fixed;left:0;top:var(--barra);z-index:49;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--verde),rgba(255,255,255,.9));box-shadow:0 0 10px rgba(43,178,149,.7)}

/* un dato que falta, en los borradores (Términos, Privacidad, Empresa, Nuestro ADN) */
.hueco{display:inline-block;padding:0 8px;border-radius:6px;background:rgba(255,196,0,.12);border:1px dashed rgba(255,196,0,.5);color:#ffd466;font-size:.92em;max-width:100%}

/* aparecer al llegar */
.mueve [data-aparece]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.mueve [data-aparece].is-in{opacity:1;transform:none}

/* ---------- pasos: cuatro pasos unidos por una línea de luz (Impulsores, Compra protegida…) ---------- */
.seccion{padding:clamp(96px,13vw,170px) 0}
.cab{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(44px,6vw,80px)}
.pasos{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:paso}
.pasos::before{content:'';position:absolute;left:4%;right:4%;top:33px;height:1px;background:rgba(255,255,255,.12)}
.pasos::after{content:'';position:absolute;left:4%;top:33px;height:1px;width:0;background:linear-gradient(90deg,var(--verde),rgba(255,255,255,.9));box-shadow:0 0 12px rgba(43,178,149,.8);transition:width 2.4s cubic-bezier(.3,.6,.2,1)}
.pasos.is-in::after{width:92%}
.paso{position:relative;display:flex;flex-direction:column;gap:14px;padding-top:0}
.paso-n{position:relative;z-index:1;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:#000;border:1px solid var(--cristal-borde);font-weight:600;font-size:18px}
.paso:first-child .paso-n{border-color:var(--verde);box-shadow:0 0 18px rgba(43,178,149,.5)}
.paso h3{font-size:22px;line-height:1.2;margin-top:10px}
.paso p{font-size:15px;line-height:1.6;color:var(--apoyo)}
.mueve .pasos .paso{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.mueve .pasos.is-in .paso{opacity:1;transform:none}
.mueve .pasos.is-in .paso:nth-child(2){transition-delay:.5s}
.mueve .pasos.is-in .paso:nth-child(3){transition-delay:1s}
.mueve .pasos.is-in .paso:nth-child(4){transition-delay:1.5s}

/* ---------- fichas con icono (Impulsores, Compra protegida…) ---------- */
.fichas.fichas--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fichas{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fichas li{display:flex;flex-direction:column;gap:14px;padding:30px;border-radius:24px;background:var(--cristal);border:1px solid var(--cristal-borde)}
.ficha-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);font-size:20px}
.fichas h3{font-size:22px;line-height:1.2}
.fichas p{font-size:15px;line-height:1.55;color:var(--apoyo)}

/* preguntas: el mismo diseño en todas las páginas (el de la landing de tiendas) */
.preguntas{padding:120px 0 90px;border-top:1px solid var(--linea)}
.preguntas-in{width:min(980px,100% - 2*var(--lado));margin:0 auto;display:flex;flex-direction:column;gap:28px}
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;cursor:pointer;list-style:none;font-weight:500;font-size:clamp(18px,1.5vw,22px);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq-ic{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--cristal);border:1px solid var(--cristal-borde);font-size:18px;transition:transform .3s ease,background-color .3s ease}
.faq details[open] .faq-ic{transform:rotate(45deg);background:#fff;color:#000}
.faq details p{padding:0 60px 26px 0;font-size:17px;line-height:1.6;color:var(--apoyo)}

@media (max-width:980px){
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px}
  .pasos::before,.pasos::after{display:none}
  .fichas{grid-template-columns:1fr}
  .fichas.fichas--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preguntas{padding:90px 0 70px}
  .faq details p{padding-right:0}
}
@media (max-width:600px){
  :root{--barra:64px;--lado:18px}
  .pasos,.fichas.fichas--4{grid-template-columns:1fr}
  .barra .btn{height:40px;padding:0 16px;font-size:14px}
  .barra-logo img{height:22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}