/* hecho por r3k1 */
.yo{position:relative;min-height:100svh;padding-top:48px;display:grid;align-items:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 20% 110%,rgba(229,36,59,.24),transparent 55%),#000}
.yo .embers{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.yo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(560px circle at var(--mx,30%) var(--my,50%),rgba(229,36,59,.14),transparent 60%)}
.yo-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:48px;max-width:var(--max);width:100%;margin:0 auto;padding:28px 22px}

.retrato{position:relative;display:grid;place-items:center}
.retrato .dib-gato{width:100%;max-width:440px;height:auto;overflow:visible;animation:asoma 1s cubic-bezier(.2,1.2,.3,1) .1s both}
.piensa{position:absolute;right:4%;top:-6%;width:30%;aspect-ratio:1;border-radius:50%;background:#f5f1e8;display:grid;place-items:center;
  box-shadow:6px 6px 0 var(--red);animation:asoma .8s cubic-bezier(.2,1.4,.3,1) .7s both}
.piensa::before,.piensa::after{content:"";position:absolute;border-radius:50%;background:#f5f1e8}
.piensa::before{width:18%;height:18%;left:-6%;bottom:-2%}
.piensa::after{width:9%;height:9%;left:-18%;bottom:-16%}
.piensa svg{grid-area:1/1;width:62%;height:auto;opacity:0;animation:idea 9s infinite;animation-delay:var(--d)}
@keyframes idea{0%{opacity:0;transform:scale(.6) rotate(-10deg)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:scale(.6) rotate(10deg)}}
@keyframes asoma{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}

.texto>*{animation:asoma .8s cubic-bezier(.2,1.2,.3,1) both;animation-delay:calc(.25s + var(--o,0) * 90ms)}
.texto>:nth-child(2){--o:1}.texto>:nth-child(3){--o:2}.texto>:nth-child(4){--o:3}.texto>:nth-child(5){--o:4}.texto>:nth-child(6){--o:5}
.texto h1{margin-top:8px;font-size:clamp(44px,7vw,88px);font-weight:800;letter-spacing:-.055em;line-height:.95}
.texto h1 span{color:var(--red)}
.texto .bio{margin-top:18px;max-width:500px;color:var(--text-2);font-size:17px;line-height:1.5}
.texto .bio b{color:var(--text);font-weight:600}

.camino{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;list-style:none}
.camino::before{content:"";position:absolute;left:6px;right:0;top:6px;height:2px;background:var(--line)}
.camino::after{content:"";position:absolute;left:6px;right:0;top:6px;height:2px;background:linear-gradient(90deg,#f5f1e8,var(--red));transform-origin:0 50%;animation:traza 1.6s cubic-bezier(.6,0,.2,1) .9s both}
@keyframes traza{from{transform:scaleX(0)}}
.camino li{position:relative;padding:24px 12px 0 0}
.camino li::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#000;border:2px solid #f5f1e8;z-index:1}
.camino li.ya::before{background:var(--red);border-color:var(--red);box-shadow:0 0 0 0 rgba(229,36,59,.6);animation:late 2s 2.4s infinite}
@keyframes late{70%{box-shadow:0 0 0 10px rgba(229,36,59,0)}100%{box-shadow:0 0 0 0 rgba(229,36,59,0)}}
.camino b{display:block;font-size:15px;font-weight:650}
.camino span{display:block;margin-top:2px;font-size:13px;color:var(--text-2);line-height:1.35}

.cifras{display:flex;gap:30px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.cifras div{display:grid}
.cifras b{font-size:30px;font-weight:750;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.cifras span{font-size:12px;color:var(--text-2);margin-top:4px}

.usa{margin-top:18px;font-size:13px;color:var(--text-2)}
.usa b{color:var(--text);font-weight:500}
.yo .ctas{justify-content:flex-start;margin-top:24px}

@media (max-width:820px){
  .yo{align-items:start}
  .yo-in{grid-template-columns:1fr;gap:6px;padding-top:16px;padding-bottom:26px}
  .retrato .dib-gato{max-width:230px}
  .piensa{right:10%;top:-4%;width:24%}
  .texto h1{font-size:44px}
  .texto .bio{font-size:15px;margin-top:10px}
  .camino{margin-top:20px}
  .cifras{margin-top:20px;gap:22px}
  .cifras b{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.retrato *,.piensa,.texto>*,.camino::after,.camino li::before{animation:none!important}.piensa svg:first-child{opacity:1}}