/* Impulsores · sus efectos: la esfera de personas que se recomiendan, los cuatro pasos unidos por una línea de luz,
   las dos tarjetas («no hace falta ser famoso») y lo que no tenés que hacer. */

/* ---------- 1 · portada: la esfera ---------- */
.portada{position:relative;isolation:isolate;min-height:max(100svh,720px);display:flex;align-items:center;overflow:hidden}
.esfera{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.portada::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.2) 45%,rgba(0,0,0,0) 65%)}
.portada-in{width:min(var(--ancho),100% - 2*var(--lado));margin:0 auto;padding:calc(var(--barra) + 6vh) 0 10vh}
.portada .chip{margin-bottom:26px}
.portada h1{font-size:clamp(38px,5.1vw,78px);line-height:1.06;letter-spacing:-.045em}
.portada-entrada{margin:26px 0 34px;max-width:30em;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:rgba(255,255,255,.82)}
.portada-botones{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 3 · no hace falta ser famoso ---------- */
.dos-tarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.persona{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-height:560px;padding:34px;border-radius:28px;overflow:hidden;border:1px solid var(--cristal-borde)}
.persona img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.persona::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.9) 100%)}
.persona:hover img{transform:scale(1.04)}
.persona h3{font-size:clamp(26px,2.4vw,34px);line-height:1.12}
.persona p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.85);max-width:28em}

/* ---------- 4b · lo que miran las tiendas ---------- */
.miran{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:mira}
.miran li{counter-increment:mira;display:flex;flex-direction:column;gap:8px;padding:22px 20px;border-radius:20px;background:var(--cristal);border:1px solid var(--cristal-borde)}
.miran li::before{content:counter(mira,decimal-leading-zero);font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--verde)}
.miran b{font-weight:600;font-size:18px;line-height:1.25}
.miran span{font-size:14.5px;line-height:1.5;color:var(--apoyo)}
@media (max-width:980px){.miran{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.miran{grid-template-columns:minmax(0,1fr)}}

/* ---------- 5 · la ventaja de la lista ---------- */
.ventaja{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(28px,4vw,48px);border-radius:28px;
  background:linear-gradient(120deg,rgba(43,178,149,.18),rgba(43,178,149,.04) 60%),#050505;border:1px solid rgba(43,178,149,.4)}
.ventaja h2{font-size:clamp(28px,3.4vw,46px);line-height:1.1;max-width:18ch}
.ventaja p{margin-top:12px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.82);max-width:34em}
.ventaja-48{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:170px;height:170px;border-radius:50%;
  border:1px solid rgba(43,178,149,.6);box-shadow:0 0 40px rgba(43,178,149,.35) inset,0 0 30px rgba(43,178,149,.2)}
.ventaja-48 b{font-weight:600;font-size:54px;line-height:1;letter-spacing:-.04em}
.ventaja-48 span{font-size:14px;color:rgba(255,255,255,.75)}

/* ---------- preguntas y cierre ---------- */
.cierre{text-align:center;padding:clamp(110px,14vw,190px) 0}
.cierre h2{font-size:clamp(38px,5.6vw,84px);line-height:1.05;letter-spacing:-.045em}
.cierre .txt{margin:24px auto 34px;text-align:center}

@media (max-width:980px){
  .dos-tarjetas{grid-template-columns:1fr}
  .persona{min-height:460px}
  .ventaja{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .portada{align-items:flex-start}
  .portada-in{padding:calc(var(--barra) + 5vh) 0 54vh}
  .portada-botones .btn{flex:1 1 auto}
}