/* home-below-fold.css — Estilos no-críticos (below the fold) */

/* Sharing animation */
.share-anim-box{
  border-radius: var(--radius-xl); border: 1px solid rgba(234,240,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow); padding: 1.5rem; overflow:hidden;
}
.share-animation{
  display:flex; align-items:center; justify-content:center;
  gap: 1.5rem; max-width: 720px; margin: 0 auto; padding: 1rem 0;
}
.share-panel{
  background: rgba(234,240,255,.05); border-radius: var(--radius-md);
  padding: 1.25rem; min-width: 180px; text-align: left;
  border:1px solid rgba(234,240,255,.10);
}
.share-panel-title{
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin-bottom: .75rem;
}
.share-field{
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem 0; font-size: .9rem; color: var(--ink);
}
.share-checkbox{
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid rgba(234,240,255,.25); position: relative;
  flex-shrink: 0; transition: all .3s;
}
.share-checkbox.checked{ background: var(--aqua); border-color: var(--aqua); }
.share-checkbox.checked::after{
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 6px; height: 10px; border: solid var(--bg0);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.share-arrow{ color: var(--gold); font-size: 1.5rem; flex-shrink: 0; opacity: 0; transition: opacity .4s; }
.share-token{
  background: rgba(215,184,106,.08); border: 1px solid rgba(215,184,106,.22);
  border-radius: var(--radius-md); padding: 1.25rem; text-align: center; min-width: 140px;
  opacity: 0; transform: scale(0.8); transition: all .5s cubic-bezier(.34,1.56,.64,1);
}
.share-token.visible{ opacity: 1; transform: scale(1); }
.token-icon{ font-size: 1.8rem; margin-bottom: .25rem; }
.token-label{
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin-bottom: .35rem;
}
.token-value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .85rem; color: var(--gold2); font-weight: 700; letter-spacing: .08em;
}
.share-whatsapp{
  background: rgba(59,212,198,.08); border: 1px solid rgba(59,212,198,.22);
  border-radius: var(--radius-md); padding: 1.25rem; text-align: center; min-width: 130px;
  opacity: 0; transform: scale(0.8); transition: all .5s cubic-bezier(.34,1.56,.64,1);
}
.share-whatsapp.visible{ opacity: 1; transform: scale(1); }
.whatsapp-icon{ width: 40px; height: 40px; margin: 0 auto .35rem; }
.whatsapp-label{ font-size: .8rem; font-weight: 600; color: var(--aqua); }
.share-whatsapp.visible .whatsapp-icon{ animation: wp-pulse 1s ease-in-out 1; }
@keyframes wp-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.step-number{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background: rgba(215,184,106,.25); color: var(--gold2);
  font-size:.7rem; font-weight:700; margin-bottom:.5rem;
}

/* Validation animation */
.val-anim-box{
  border-radius: var(--radius-xl); border: 1px solid rgba(234,240,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow); padding: 1.5rem; overflow:hidden;
}
.validation-animation{
  display:flex; align-items:flex-start; justify-content:center;
  gap:1.2rem; max-width:750px; margin:0 auto; padding:1rem .5rem;
}
.val-step{ text-align:center; min-width:160px; max-width:200px; }
.val-card{
  background: rgba(234,240,255,.06); border: 2px solid rgba(234,240,255,.12);
  border-radius: var(--radius-md); padding: 1.25rem 1rem;
  transition: all .5s cubic-bezier(.34,1.56,.64,1);
  opacity:.5; transform:scale(.95);
}
.val-card.active{
  opacity:1; transform:scale(1);
  border-color: var(--gold); box-shadow: 0 0 20px rgba(215,184,106,.25);
}
.val-card.done{
  opacity:1; transform:scale(1);
  border-color: var(--aqua); background: rgba(59,212,198,.08);
}
.val-card-icon{ font-size:2rem; margin-bottom:.5rem; line-height:1; }
.val-card-title{ font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:.4rem; }
.val-card-detail{ font-size:.75rem; color:var(--muted); min-height:1.2em; }
.val-dni-field{
  background: rgba(7,11,20,.35); border: 1px solid rgba(234,240,255,.14);
  border-radius: 8px; padding: .3rem .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .85rem; color: var(--gold2); text-align: left;
  margin-top: .5rem; min-height: 1.6em; display: flex; align-items: center;
}
.val-dni-field .cursor-blink{
  display:inline-block; width:2px; height:1em;
  background: var(--gold); margin-left:1px;
  animation: blink-cursor .7s step-end infinite;
}
@keyframes blink-cursor{ 0%,100%{opacity:1} 50%{opacity:0} }
.val-spinner{
  width:28px; height:28px;
  border:3px solid rgba(234,240,255,.15); border-top-color: var(--aqua);
  border-radius:50%; margin:.5rem auto 0;
  animation: val-spin .8s linear infinite; display:none;
}
.val-spinner.visible{ display:block; }
@keyframes val-spin{ to{transform:rotate(360deg)} }
.val-checkmark{
  width:32px; height:32px; margin:.5rem auto 0;
  opacity:0; transform:scale(0);
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
}
.val-checkmark.visible{ opacity:1; transform:scale(1); }
.val-arrow{
  color: rgba(234,240,255,.2); flex-shrink:0;
  align-self:center; transition: color .3s; margin-top:1.5rem;
}
.val-arrow.active{ color: var(--gold); }
.val-arrow.done{ color: var(--aqua); }
.val-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  background: var(--aqua); color: var(--bg0);
  font-size:.75rem; font-weight:700;
  padding:.3rem .7rem; border-radius:999px; margin-top:.5rem;
  opacity:0; transform:translateY(5px);
  transition: all .5s cubic-bezier(.34,1.56,.64,1);
}
.val-badge.visible{ opacity:1; transform:translateY(0); }

/* Commitments */
.commit{
  border-radius: var(--radius-xl); border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow); overflow:hidden;
}
.commit-top{
  padding: 1.1rem 1.15rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap: 1rem;
  border-bottom: 1px solid rgba(234,240,255,.10);
  background:
    radial-gradient(650px 220px at 10% 0%, rgba(255,107,107,.10), transparent 55%),
    radial-gradient(650px 220px at 85% 0%, rgba(215,184,106,.10), transparent 55%);
}
.commit-top h3{
  font-family: Fraunces, serif; margin:0; letter-spacing:-.2px;
}
.commit-top p{margin:.25rem 0 0; color:var(--muted)}
.danger-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .65rem; border-radius:999px;
  border:1px solid rgba(255,107,107,.28); background: rgba(255,107,107,.10);
  color: rgba(255,190,190,.95); font-weight:800; font-size:.84rem;
  letter-spacing:.2px; white-space:nowrap;
}
.banlist{ display:grid; grid-template-columns: 1fr 1fr; gap: 0; }
.banlist li{
  list-style:none; margin:0; padding: .9rem 1.15rem;
  border-top: 1px solid rgba(234,240,255,.08);
  display:flex; gap:.7rem; align-items:flex-start;
  color: rgba(234,240,255,.86); background: rgba(7,11,20,.10);
}
.banlist li:nth-child(odd){
  border-right: 1px solid rgba(234,240,255,.08); background: rgba(7,11,20,.16);
}
.banlist svg{flex:0 0 auto; margin-top:.12rem; opacity:.95}
.banlist span{color: var(--muted); display:block; margin-top:.15rem; font-size:.92rem}

/* Responsive below-fold */
@media (max-width: 920px){
  .validation-animation{
    flex-direction:column; align-items:center; gap:.5rem; padding:1rem .5rem;
  }
  .validation-animation .val-arrow{transform:rotate(90deg); margin-top:0}
  .val-step{min-width:auto; max-width:260px; width:100%}
  .share-animation{
    flex-direction:column; gap:1rem; padding:1rem .5rem;
  }
  .share-arrow{transform:rotate(90deg)}
  .panel .steps > div:last-child{flex-direction:column}
  .panel .steps > div:last-child .btn{width:100%; justify-content:center}
}
@media (max-width: 720px){
  .banlist{grid-template-columns: 1fr}
  .banlist li:nth-child(odd){border-right:none}
}