/* ========================================================
   APPRIL · Partners (página informativa del programa)
   Extiende landing/styles.css — solo componentes nuevos.
   ======================================================== */

/* Reveal-on-scroll lo maneja styles.css (html.js .reveal / .in);
   partners.js solo añade la clase .in al entrar en viewport. */

/* ---------- Hero ---------- */
.phero{
  padding:40px 0 96px;
  position:relative;
  overflow:hidden;
}
.phero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(680px 460px at 88% -8%, var(--coral-50), transparent 62%),
    radial-gradient(560px 420px at -6% 110%, rgba(254,52,92,.05), transparent 58%);
  pointer-events:none;
  z-index:-1;
}
.phero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:72px;
  align-items:center;
}
.phero h1{font-size:clamp(40px,5.6vw,68px);margin-bottom:22px}
.phero h1 em{font-style:normal;color:var(--coral)}
.phero__sub{
  font-size:clamp(16px,1.4vw,19px);
  color:var(--muted);
  margin-bottom:34px;
  max-width:54ch;
  line-height:1.55;
}
.phero__sub strong{color:var(--ink);font-weight:600}
.phero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.phero__facts{
  display:flex;
  gap:10px 26px;
  flex-wrap:wrap;
  align-items:center;
  font-size:13.5px;
  color:var(--ink-soft);
  font-weight:500;
}
.phero__facts span{display:inline-flex;align-items:center;gap:8px}
.phero__facts svg{width:16px;height:16px;color:var(--coral);flex-shrink:0}

@media (max-width: 980px){
  .phero{padding:24px 0 64px}
  .phero__grid{grid-template-columns:1fr;gap:48px}
}

/* ---------- Hero visual: foto + tarjeta flotante ---------- */
.phero__visual{position:relative;align-self:stretch}
.phero__photo{
  border-radius:var(--r-xl);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:var(--shadow-lg);
  background:var(--paper-soft);
  max-width:440px;
  margin-left:auto;
}
.phero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}

.float-card{
  position:absolute;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  padding:16px 18px;
}
.float-card--earn{
  left:-8px;
  bottom:40px;
  display:flex;
  align-items:center;
  gap:14px;
}
.float-card--earn .fc__icon{
  width:46px;height:46px;border-radius:13px;
  background:var(--coral);color:#fff;
  display:grid;place-items:center;flex-shrink:0;
  box-shadow:var(--shadow-coral);
}
.float-card--earn .fc__icon svg{width:24px;height:24px}
.fc__amount{font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1}
.fc__label{font-size:12.5px;color:var(--muted);margin-top:3px}

.float-card--link{
  top:24px;
  right:-12px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}
.float-card--link .fc__dot{
  width:30px;height:30px;border-radius:9px;
  background:var(--coral-50);color:var(--coral);
  display:grid;place-items:center;flex-shrink:0;
}
.float-card--link .fc__dot svg{width:16px;height:16px}
.float-card--link code{
  font-family:var(--font);
  color:var(--ink-soft);
  font-weight:600;
}

@media (max-width: 980px){
  .phero__photo{max-width:380px;margin:0 auto}
  .float-card--link{right:0}
  .float-card--earn{left:0}
}
@media (max-width: 480px){
  .float-card{padding:12px 14px}
  .float-card--earn{left:-4px;bottom:18px}
  .fc__amount{font-size:21px}
  .float-card--link{top:14px;right:-4px;font-size:12px}
}

/* ---------- Steps: descripción del CTA bajo el grid ---------- */
.steps-foot{
  margin-top:36px;
  display:flex;
  justify-content:center;
}

/* ---------- Sección Cuánto ganas ---------- */
.earn{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:stretch;
}
.earn__hero{
  background:linear-gradient(150deg, #131922 0%, #0A0E14 100%);
  color:#fff;
  border-radius:var(--r-xl);
  padding:48px 44px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.earn__hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 300px at 90% 0%, rgba(254,52,92,.30), transparent 62%),
    radial-gradient(360px 260px at 0% 100%, rgba(254,52,92,.16), transparent 60%);
  pointer-events:none;
}
.earn__hero > *{position:relative}
.earn__tag{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#FF6585;margin-bottom:18px;
}
.earn__amount{
  font-size:clamp(56px,8vw,92px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:.92;
  color:#fff;
}
.earn__amount small{font-size:.38em;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:0;margin-left:6px}
.earn__amount-sub{
  font-size:18px;
  color:rgba(246,248,250,.7);
  margin-top:14px;
  max-width:30ch;
  line-height:1.45;
}
.earn__chip{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:26px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:8px 15px 8px 11px;
  font-size:13.5px;color:rgba(246,248,250,.9);font-weight:500;
  width:fit-content;
}
.earn__chip .gift-i{
  width:22px;height:22px;border-radius:50%;
  background:#10B981;color:#fff;display:grid;place-items:center;flex-shrink:0;
}
.earn__chip .gift-i svg{width:13px;height:13px}

.earn__aside{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.earn__note{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 28px;
}
.earn__note h3{font-size:18px;margin-bottom:10px}
.earn__note p{font-size:15px;color:var(--muted);line-height:1.55}
.earn__note p strong{color:var(--ink);font-weight:600}
.earn__math{
  display:flex;align-items:baseline;gap:10px;
  margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);
}
.earn__math b{font-size:28px;font-weight:700;letter-spacing:-.03em;color:var(--coral)}
.earn__math span{font-size:14px;color:var(--muted)}
.earn__valid{
  display:flex;gap:14px;align-items:flex-start;
}
.earn__valid .ev__icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:var(--coral-50);color:var(--coral);
  display:grid;place-items:center;
}
.earn__valid .ev__icon svg{width:21px;height:21px}

@media (max-width: 860px){
  .earn{grid-template-columns:1fr;gap:20px}
  .earn__hero{padding:40px 32px}
}

/* ---------- Partner y Líder (2 niveles) ---------- */
.tiers{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.tier{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:34px 32px;
  position:relative;
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.tier:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tier--lead{
  border-color:transparent;
  background:linear-gradient(180deg,#FFF6F8 0%, var(--paper) 60%);
  box-shadow:0 0 0 1.5px var(--coral-100), var(--shadow);
}
.tier__badge{
  position:absolute;top:24px;right:28px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--coral);background:var(--coral-50);
  padding:5px 11px;border-radius:999px;
}
.tier__icon{
  width:52px;height:52px;border-radius:15px;
  display:grid;place-items:center;margin-bottom:20px;
}
.tier--base .tier__icon{background:var(--coral-50);color:var(--coral)}
.tier--lead .tier__icon{background:var(--coral);color:#fff;box-shadow:var(--shadow-coral)}
.tier__icon svg{width:26px;height:26px}
.tier h3{font-size:24px;letter-spacing:-.02em;margin-bottom:8px}
.tier__lead-in{font-size:15px;color:var(--muted);line-height:1.55;margin-bottom:22px}
.tier__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.tier__list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-soft);line-height:1.45}
.tier__list .tl__check{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-top:1px;
  background:var(--coral-50);color:var(--coral);
  display:grid;place-items:center;
}
.tier__list .tl__check svg{width:13px;height:13px}
.tier__list li b{color:var(--ink);font-weight:700}
.tier__amount{
  font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--ink);
  margin-bottom:4px;line-height:1;
}
.tier__amount small{font-size:.42em;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:5px}

.tiers-note{
  margin-top:26px;
  text-align:center;
  font-size:14.5px;
  color:var(--muted);
}
.tiers-note strong{color:var(--ink);font-weight:600}
.tiers-note a{color:var(--coral);font-weight:600;text-decoration:none}
.tiers-note a:hover{text-decoration:underline}

@media (max-width: 820px){
  .tiers{grid-template-columns:1fr}
}

/* ---------- Career Levels (4 niveles) ---------- */
.levels{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.level{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.level:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.level--top{
  border-color:transparent;
  box-shadow:0 0 0 1.5px var(--coral-100), var(--shadow);
}
.level__order{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--coral);background:var(--coral-50);
  padding:5px 11px;border-radius:999px;
  width:fit-content;margin-bottom:14px;
}
.level h3{font-size:19px;letter-spacing:-.02em;margin-bottom:8px;line-height:1.25}
.level__lead-in{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:18px}
.level__req{
  list-style:none;padding:0;margin:auto 0 0;
  display:flex;flex-direction:column;gap:10px;
  padding-top:16px;border-top:1px dashed var(--line);
}
.level__req li{display:flex;gap:10px;align-items:baseline;font-size:14px;color:var(--ink-soft);line-height:1.4}
.level__req-n{
  font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  min-width:44px;flex-shrink:0;
}
@media (max-width: 1000px){.levels{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.levels{grid-template-columns:1fr}}

/* ---------- Para quién es ---------- */
.audience{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.aud{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 24px;
  transition:transform .2s var(--ease),border-color .2s var(--ease);
}
.aud:hover{transform:translateY(-3px);border-color:var(--coral)}
.aud__icon{
  width:46px;height:46px;border-radius:13px;
  background:var(--coral-50);color:var(--coral);
  display:grid;place-items:center;margin-bottom:16px;
}
.aud__icon svg{width:23px;height:23px}
.aud h3{font-size:16.5px;letter-spacing:-.01em;margin-bottom:6px;line-height:1.25}
.aud p{font-size:14px;color:var(--muted);line-height:1.5}
@media (max-width: 900px){.audience{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.audience{grid-template-columns:1fr}}

/* ---------- Qué es Appril (dark) ---------- */
.whatis__benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:52px;
}
.benefit{padding-right:12px}
.benefit__icon{
  width:54px;height:54px;border-radius:15px;
  background:rgba(254,52,92,.14);
  color:#FF6585;
  display:grid;place-items:center;margin-bottom:20px;
}
.benefit__icon svg{width:27px;height:27px}
.benefit h3{font-size:19px;letter-spacing:-.01em;margin-bottom:8px;color:#F6F8FA}
.benefit p{font-size:15px;color:rgba(246,248,250,.62);line-height:1.55}
.whatis__line{
  font-size:clamp(20px,2.4vw,26px);
  font-weight:600;
  letter-spacing:-.02em;
  color:#F6F8FA;
  max-width:24ch;
}
.whatis__line .ink-soft{color:rgba(246,248,250,.55)}
@media (max-width: 820px){
  .whatis__benefits{grid-template-columns:1fr;gap:32px;margin-top:40px}
}

/* ---------- FAQ wrapper a 2 columnas en desktop ancho ---------- */
.faq{max-width:820px}

/* ---------- CTA final: línea de soporte ---------- */
.cta-final__support{
  margin-top:26px;
  font-size:14.5px;
  color:rgba(255,255,255,.82);
}
.cta-final__support a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Footer: enlace de registro destacado ---------- */
.footer__join{color:#fff!important;font-weight:600}