/* ---------- 2 · DOS ETAPAS ---------- */
.etapas{ background:var(--crema); padding:clamp(24px,3.8vh,46px) 0 clamp(26px,4.2vh,50px); }
.etapas__par{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.8vw,48px); margin-top:clamp(16px,2.4vh,28px); align-items:start; }
.etapa{ display:grid; grid-template-rows:auto auto; gap:clamp(10px,1.4vh,15px); }
.etapa__foto{ margin:0; overflow:hidden; border-radius:2px; aspect-ratio:18/5; }
.etapa__foto img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  transition:transform 1.4s cubic-bezier(.22,1,.28,1); }
.etapa:hover .etapa__foto img{ transform:scale(1.035); }
.etapa__eti{ margin:0 0 7px; font-size:clamp(11.5px,.86vw,13px); font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#004484; }
.etapa__eti::before{ content:""; display:block; width:40px; height:1px; margin-bottom:10px; background:var(--oro-vivo);
  transform:scaleX(0); transform-origin:left center; transition:transform .7s cubic-bezier(.22,1,.28,1) .35s; }
.etapas__par.se-traza .etapa__eti::before, html:not(.js-traza) .etapa__eti::before{ transform:scaleX(1); }
.etapa__nom{ margin:0 0 8px; font-family:var(--f-display); font-weight:500; font-size:clamp(21px,1.85vw,29px); line-height:1.12; letter-spacing:-.012em; color:var(--tinta); }
.etapa__p{ margin:0 0 clamp(10px,1.4vh,14px); font-size:clamp(14px,.98vw,15.5px); line-height:1.46; color:rgba(12,31,79,.82); max-width:52ch; }
.etapa__lista{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.etapa__lista li{ position:relative; padding-left:18px; font-size:clamp(13.5px,.95vw,15.5px); line-height:1.45; color:rgba(12,31,79,.8); }
.etapa__lista li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--oro-vivo); }
.etapa__lista b{ color:var(--tinta); font-weight:700; }
/* los tres grados llevan su ordinal en serif, no una viñeta */
.etapa__grados li{ padding-left:44px; }
.etapa__grados li::before{ display:none; }
.etapa__g{ position:absolute; left:0; top:-.12em; font-family:var(--f-display); font-size:clamp(19px,1.5vw,25px); color:var(--oro-texto); }
/* Porfirio es fijo y ocupa ~252 px desde el borde derecho de la PANTALLA; el
   último grado de la columna derecha caía justo debajo. La reserva va en px,
   no en vw: él no escala con el ancho. */
@media (min-width:901px){
  .etapas__par > .etapa:last-child .etapa__lista li:last-child{ padding-right:252px; }
}

.musculo{ position:relative; isolation:isolate; overflow:hidden; background:var(--noche); color:var(--blanco);
  padding:clamp(34px,5.4vh,64px) 0 clamp(36px,5.6vh,68px); }
.musculo__fondo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; z-index:-2; }
.musculo__velo{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to right, rgba(12,31,79,.92) 0%, rgba(12,31,79,.84) 52%, rgba(12,31,79,.74) 100%); }
.musculo__marco{ position:relative; }
.musculo__lista{ list-style:none; margin:clamp(18px,2.6vh,30px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,2vw,34px) clamp(20px,2.6vw,44px); }
.mus{ position:relative; padding-top:14px; border-top:1px solid rgba(249,198,88,.34); }
.mus__n{ display:block; margin-bottom:7px; font-family:var(--f-display); font-size:clamp(17px,1.3vw,22px); color:var(--oro-vivo); }
.mus__t{ margin:0 0 5px; font-size:clamp(14.5px,1.05vw,17px); font-weight:700; letter-spacing:.01em; color:var(--blanco); }
.mus__p{ margin:0; font-size:clamp(13px,.94vw,15px); line-height:1.45; color:rgba(255,255,255,.82); }

.etapa:nth-child(2){ --esc:.18s; }
html.js-traza .etapas__par:not(.se-traza) .etapa__foto{ clip-path:inset(100% 0 0 0); }
.etapa__foto{ clip-path:inset(0 0 0 0); transition:clip-path 1.3s cubic-bezier(.76,0,.24,1) calc(var(--esc,0s) + .06s); }
html.js-traza .etapas__par:not(.se-traza) .etapa__foto img{ transform:scale(1.1) translateY(-2.5%); }
.etapa__foto::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(to right, rgba(249,198,88,0), var(--oro-vivo) 45%, rgba(249,198,88,0)); }
.etapas__par.se-traza .etapa__foto::after{ animation:telon-filo 1.3s cubic-bezier(.76,0,.24,1) calc(var(--esc,0s) + .06s) both; }
html.js-traza .etapas__par:not(.se-traza) .etapa__trio span{ opacity:0; transform:translateY(14px); }
.etapa__trio span{ transition:opacity .7s ease, transform .8s cubic-bezier(.22,1,.28,1); }
.etapa__trio span:nth-child(1){ transition-delay:1.15s; } .etapa__trio span:nth-child(2){ transition-delay:1.3s; } .etapa__trio span:nth-child(3){ transition-delay:1.45s; }
html.js-traza .etapas__par:not(.se-traza) .etapa__txt > *{ opacity:0; transform:translateY(14px); }
.etapa__txt > *{ transition:opacity .75s ease calc(var(--esc,0s) + .55s + var(--j,0) * .1s), transform .8s cubic-bezier(.22,1,.28,1) calc(var(--esc,0s) + .55s + var(--j,0) * .1s); }
.etapa__txt > :nth-child(2){ --j:1; } .etapa__txt > :nth-child(3){ --j:2; } .etapa__txt > :nth-child(4){ --j:3; }

.musculo__fondo{ transform:scale(1.001); transition:transform 2.6s cubic-bezier(.22,1,.28,1); }
html.js-traza .musculo:not(.se-traza) .musculo__fondo{ transform:scale(1.1); }
.mus{ border-top-color:transparent; }
.mus::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:rgba(249,198,88,.55);
  transform:scaleX(0); transform-origin:left center; transition:transform 1.1s cubic-bezier(.45,0,.2,1) var(--esc,0s); }
.musculo__lista.se-traza .mus::before, html:not(.js-traza) .mus::before{ transform:scaleX(1); }
html.js-traza .musculo__lista:not(.se-traza) .mus > *{ opacity:0; transform:translateY(14px); }
.mus > *{ transition:opacity .75s ease calc(var(--esc,0s) + .35s), transform .8s cubic-bezier(.22,1,.28,1) calc(var(--esc,0s) + .35s); }
.mus:nth-child(2){ --esc:.12s; } .mus:nth-child(3){ --esc:.24s; } .mus:nth-child(4){ --esc:.36s; }
.mus:nth-child(5){ --esc:.48s; } .mus:nth-child(6){ --esc:.60s; }

/* ---------- celular ---------- */
@media (max-width:900px){
  .etapas__par{ grid-template-columns:1fr; gap:26px; }
  .etapa__foto{ aspect-ratio:3/2; }
  .musculo__lista{ grid-template-columns:1fr 1fr; gap:14px 16px; }
  .musculo__velo{ background:linear-gradient(to bottom, rgba(12,31,79,.86) 0%, rgba(12,31,79,.9) 100%); }
}
@media (max-width:560px){
  .musculo__lista{ grid-template-columns:1fr; }
}

.entrar__foto img{ object-position:86% 50%; }
@media (max-width:900px){ .entrar__foto img{ object-position:75% 50%; } }

.etapa__foto{ position:relative; }
.etapa__trio{ position:absolute; left:0; right:0; bottom:0; display:flex; gap:clamp(14px,1.6vw,24px); margin:0; padding:clamp(22px,3vh,34px) clamp(14px,1.4vw,20px) clamp(10px,1.4vh,14px);
  font-family:var(--f-display); font-size:clamp(26px,2.2vw,36px); line-height:1; color:var(--blanco);
  background:linear-gradient(to top, rgba(12,31,79,.62), rgba(12,31,79,0)); text-shadow:0 1px 10px rgba(0,0,0,.35); }
.etapa__trio span{ position:relative; padding-right:clamp(14px,1.6vw,24px); }
.etapa__trio span:not(:last-child)::after{ content:""; position:absolute; right:0; top:14%; bottom:8%; width:1px; background:rgba(249,198,88,.75); }
/* Calculador: lo que le toca HOY, bajo el resultado de agosto */
.calc__res-hoy{ display:block; margin-top:8px; font-family:var(--f-text); font-size:clamp(13.5px,.95vw,15px); line-height:1.45; color:rgba(12,31,79,.78); }
.calc__res-hoy[hidden]{ display:none; }


@media (min-width:901px) and (min-height:560px){
  .etapas, .musculo{ min-height:calc(100svh - var(--cab-c, 61px)); box-sizing:border-box; display:flex; flex-direction:column; }
  .etapas > .marco, .musculo__marco{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly; }
  .etapas > .marco > *, .musculo__marco > *{ flex:0 0 auto; }
  .etapas > .marco > .niv__enca, .musculo__marco > .niv__enca{ margin-bottom:0; }
}

.hero--nivel .hero__apoyo{ text-wrap:balance; }