/* ============================================================
   AMBOT CROW — estilos
   ============================================================ */
:root{
  --bg:#0a0510;
  --purple:#a855f7; --purple-lt:#c084fc; --purple-dk:#2a0f45;
  --pink:#ff3b6b; --red:#ff2b3d; --blue:#2f7bff; --cyan:#38bdf8;
  --gold:#c9a227; --gold-lt:#f0d778;
  --text:#f3e9ff; --muted:#b9a3d6;
  --font-med:'MedievalSharp',serif;
  --font-goth:'Pirata One',serif;
  --font-pix:'Pixelify Sans',system-ui;
  --font-body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);
  overflow-x:hidden;min-height:100vh;min-height:100dvh;position:relative}

/* ================= FONDO ================= */
#sky{position:fixed;inset:0;z-index:-3;overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%,#2a1350 0%,transparent 60%),
    radial-gradient(900px 500px at 10% 110%,#3a0f47 0%,transparent 55%),
    linear-gradient(180deg,#0a0510 0%,#120823 50%,#0a0510 100%);}
.star{position:absolute;background:#fff;border-radius:50%;
  animation:twinkle var(--tw,3s) ease-in-out infinite alternate;opacity:.7}
@keyframes twinkle{from{opacity:.15;transform:scale(.6)}to{opacity:1;transform:scale(1.15)}}

.moon{position:fixed;top:6%;right:8%;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff7e0,#f2d78a 60%,#caa94f);
  box-shadow:0 0 60px 12px rgba(251,191,36,.35),inset -14px -10px 0 rgba(0,0,0,.08);
  z-index:-2;animation:moonglow 6s ease-in-out infinite alternate;will-change:transform}
@keyframes moonglow{from{box-shadow:0 0 40px 8px rgba(251,191,36,.28)}to{box-shadow:0 0 80px 20px rgba(251,191,36,.45)}}

#castle{position:fixed;bottom:0;left:0;width:100%;height:230px;z-index:-2;opacity:.55;pointer-events:none;will-change:transform}
.fog{position:fixed;bottom:0;left:0;width:200%;height:180px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(120,60,180,.10) 60%,rgba(120,60,180,.18));
  animation:drift 40s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ojos rojos que parpadean en la oscuridad */
#eyes-layer{position:fixed;inset:0;z-index:-1;pointer-events:none}
.eyes{position:absolute;display:flex;gap:10px;opacity:0}
.eyes .eye{width:9px;height:9px;border-radius:50%;background:#ff2b3d;
  box-shadow:0 0 10px 2px rgba(255,43,61,.8)}
.eyes.blink{animation:blink 4s ease-in-out}
@keyframes blink{0%{opacity:0}12%{opacity:.9}18%{opacity:.1}24%{opacity:.9}80%{opacity:.9}100%{opacity:0}}

/* cuervos / hongos / plumas */
.crow{position:fixed;font-size:26px;z-index:2;pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));will-change:transform,left}
.crow span{display:inline-block;animation:flap .28s ease-in-out infinite}
@keyframes flap{from{transform:scaleY(1) rotate(-4deg)}to{transform:scaleY(.6) rotate(4deg)}}
.shroom{position:fixed;z-index:1;pointer-events:none;font-size:22px;opacity:.85;
  animation:floaty var(--fl,7s) ease-in-out infinite alternate}
@keyframes floaty{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-26px) rotate(8deg)}}
.feather{position:fixed;z-index:9998;pointer-events:none;font-size:16px;animation:fall .9s ease-out forwards}
@keyframes fall{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),46px) rotate(220deg)}}

/* ================= MARQUEE ================= */
.marquee{position:relative;z-index:3;overflow:hidden;white-space:nowrap;
  border-top:2px solid rgba(168,85,247,.4);border-bottom:2px solid rgba(168,85,247,.4);
  background:linear-gradient(90deg,rgba(168,85,247,.12),rgba(255,59,107,.12));
  padding:8px 0;font-family:var(--font-pix);font-size:15px;letter-spacing:2px;color:var(--purple-lt)}
.marquee div{display:inline-block;animation:scrollx 18s linear infinite;will-change:transform}
.marquee.rev div{animation-direction:reverse}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.wrap{position:relative;z-index:3;max-width:960px;margin:0 auto;padding:0 20px}
section{padding:72px 0;position:relative}

/* ================= HERO ================= */
#hero{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:70px 20px 40px}

.portrait{position:relative;width:min(320px,78vw);aspect-ratio:3/4;border-radius:12px;
  overflow:hidden;margin-bottom:26px;border:3px solid #120a1f;
  box-shadow:0 0 0 4px #05030a,0 0 46px 6px rgba(255,43,61,.35),0 26px 60px rgba(0,0,0,.7);
  animation:flick 5s steps(1) infinite,hoverframe 7s ease-in-out infinite,jitter 8s steps(1) infinite;
  transform-style:preserve-3d;transition:transform .1s ease-out}
@keyframes hoverframe{50%{margin-top:-8px}}
@keyframes flick{0%,7%,9%,13%,90%,100%{filter:none}
  8%{filter:brightness(1.7) contrast(1.3)}11%{filter:brightness(.3)}12%{filter:brightness(1.4)}}
@keyframes jitter{0%,40%,100%{}
  41%{transform:translateX(-4px)}42%{transform:translateX(5px)}43%{transform:translateX(0)}
  70%{transform:translateX(3px)}71%{transform:translateX(-3px)}72%{transform:translateX(0)}}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) contrast(1.15) brightness(.82) sepia(.15) hue-rotate(-15deg)}
.portrait .p-face{z-index:1}
.portrait .p-down{z-index:2;opacity:0;animation:swap 11s ease-in-out infinite}
@keyframes swap{0%,40%{opacity:0}48%,90%{opacity:1}100%{opacity:0}}
/* scanlines */
.portrait::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(transparent 50%,rgba(0,0,0,.28) 50%);background-size:100% 4px;
  mix-blend-mode:multiply;opacity:.5}
/* grano/ruido animado */
.portrait .noise{position:absolute;inset:-50%;z-index:4;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain .5s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}50%{transform:translate(4%,-5%)}75%{transform:translate(-3%,3%)}100%{transform:translate(3%,-3%)}}
.portrait .vig{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%,transparent 38%,rgba(0,0,0,.75) 100%)}
.portrait .redflash{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(255,20,40,.55),transparent 70%);
  opacity:0;mix-blend-mode:screen;animation:redflash 6.5s ease-in-out infinite}
@keyframes redflash{0%,82%,100%{opacity:0}84%{opacity:.9}86%{opacity:.2}88%{opacity:.8}90%{opacity:0}}

.name{font-family:var(--font-goth);font-size:clamp(46px,10vw,96px);line-height:.95;
  color:#fff;letter-spacing:1px;text-shadow:0 0 18px rgba(168,85,247,.6),0 0 40px rgba(255,43,61,.4)}
.name .glitch{position:relative;display:inline-block}
.name .glitch::before,.name .glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%}
.name .glitch::before{color:var(--cyan);animation:gl1 3s infinite steps(2)}
.name .glitch::after{color:var(--red);animation:gl2 2.4s infinite steps(2)}
@keyframes gl1{0%,92%,100%{transform:none;opacity:0}93%{transform:translate(-3px,-2px);opacity:.8}96%{transform:translate(2px,1px)}}
@keyframes gl2{0%,90%,100%{transform:none;opacity:0}91%{transform:translate(3px,2px);opacity:.8}95%{transform:translate(-2px,-1px)}}
.handle{font-family:var(--font-pix);color:var(--cyan);font-size:18px;margin-top:12px;letter-spacing:1px}

.bio{max-width:540px;margin:20px auto 0;color:var(--muted);font-size:16px;line-height:1.75}
.bio b{color:#ff7aa8}.bio .rr{color:var(--red)}.bio .bb{color:var(--cyan)}
.scroll-hint{margin-top:38px;color:var(--muted);font-family:var(--font-pix);font-size:13px;animation:hintbob 1.6s ease-in-out infinite}
@keyframes hintbob{50%{transform:translateY(8px);color:var(--purple-lt)}}

.sec-title{font-family:var(--font-med);font-size:clamp(30px,6vw,50px);
  display:flex;align-items:center;gap:14px;margin-bottom:8px;color:#fff}
.sec-sub{color:var(--muted);margin-bottom:34px;font-size:15px}

/* ================= SOBRE MÍ ================= */
.about-frame{border-radius:26px;padding:4px;
  background:linear-gradient(120deg,var(--red),var(--purple) 45%,var(--blue));
  background-size:200% 200%;box-shadow:0 0 40px rgba(168,85,247,.35),0 20px 60px rgba(0,0,0,.5);
  animation:frameflow 6s ease infinite}
@keyframes frameflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.about-card{background:
    radial-gradient(600px 200px at 0% 0%,rgba(255,43,61,.14),transparent 60%),
    radial-gradient(600px 200px at 100% 100%,rgba(47,123,255,.16),transparent 60%),
    linear-gradient(160deg,var(--purple-dk),#160a2c);
  border-radius:22px;padding:36px;position:relative;overflow:hidden}
.about-card::after{content:"🐦‍⬛";position:absolute;right:-10px;bottom:-16px;font-size:120px;opacity:.08}
.about-card p{font-size:17px;line-height:1.85;color:var(--text)}
.about-card p+p{margin-top:16px}
.about-card .rr{color:var(--red);font-weight:800}
.about-card .bb{color:var(--cyan);font-weight:800}
.about-card .pp{color:var(--purple-lt);font-weight:800}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tag{font-family:var(--font-pix);font-size:13px;padding:6px 14px;border-radius:999px}
.tag.r{background:rgba(255,43,61,.14);border:1px solid rgba(255,43,61,.5);color:#ff8a97}
.tag.b{background:rgba(47,123,255,.14);border:1px solid rgba(47,123,255,.5);color:#8fb8ff}
.tag.p{background:rgba(168,85,247,.16);border:1px solid rgba(168,85,247,.5);color:var(--purple-lt)}

/* ================= REDES (medieval) ================= */
#redes .wrap{position:relative}
.tablet{position:relative;border-radius:14px;padding:40px 30px 34px;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 2px,transparent 2px 5px),
    linear-gradient(160deg,#3a3450,#241f38 60%,#1b1729);
  border:3px solid #0f0b1a;
  box-shadow:inset 0 0 0 3px rgba(201,162,39,.35),inset 0 0 60px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.6)}
.rivet{position:absolute;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f0d778,#8a6d16);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.rivet.tl{top:10px;left:10px}.rivet.tr{top:10px;right:10px}
.rivet.bl{bottom:10px;left:10px}.rivet.br{bottom:10px;right:10px}
.banner{position:relative;margin:-64px auto 26px;width:max-content;max-width:92%;
  padding:14px 40px;color:#2a1a05;font-family:var(--font-med);font-size:clamp(20px,5vw,34px);
  text-align:center;background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  box-shadow:0 8px 20px rgba(0,0,0,.5);clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);
  animation:bannersway 4s ease-in-out infinite}
@keyframes bannersway{50%{transform:rotate(-1.2deg)}}
.banner span{text-shadow:0 1px 0 rgba(255,255,255,.4)}
.tablet-sub{text-align:center;color:#c9bde0;font-family:var(--font-med);margin-bottom:26px;font-size:15px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.social{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:22px 14px 18px;text-decoration:none;color:#f6ecd0;text-align:center;
  background:linear-gradient(180deg,#2c2740,#1c1830);border:2px solid #0e0a18;border-radius:10px;
  box-shadow:inset 0 0 0 2px rgba(201,162,39,.3),0 8px 18px rgba(0,0,0,.5);
  transition:transform .18s ease,box-shadow .18s ease}
.social .crest{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:28px;background:radial-gradient(circle at 35% 30%,#4a4160,#241f38);
  border:2px solid var(--gold);box-shadow:0 0 0 3px #0e0a18,inset 0 0 12px rgba(0,0,0,.6);transition:transform .25s ease}
.social b{font-family:var(--font-med);font-size:17px;color:var(--gold-lt)}
.social small{color:#b3a6cf;font-size:12px;font-family:var(--font-body)}
.social:hover,.social:focus-visible{transform:translateY(-6px)}
.social:hover .crest,.social:focus-visible .crest{transform:scale(1.15) rotate(-6deg);box-shadow:0 0 0 3px #0e0a18,0 0 22px var(--torch,#ffae3b)}
.social::before{content:"";position:absolute;inset:0;border-radius:8px;opacity:0;transition:opacity .2s;
  background:radial-gradient(100px 70px at 50% 0%,var(--torch,rgba(255,174,59,.4)),transparent 70%)}
.social:hover::before,.social:focus-visible::before{opacity:.5}

/* ================= CLIPS ================= */
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.clip{aspect-ratio:9/16;border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#241338,#150a26);border:1px solid rgba(168,85,247,.3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;color:var(--text);transition:transform .2s ease,box-shadow .2s ease}
.clip:hover{transform:scale(1.03);box-shadow:0 16px 40px rgba(255,59,107,.25)}
.clip .play{width:56px;height:56px;border-radius:50%;background:rgba(255,59,107,.9);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;
  box-shadow:0 0 30px rgba(255,59,107,.6);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12);box-shadow:0 0 44px rgba(255,59,107,.85)}}
.clip small{font-family:var(--font-pix);color:var(--muted);font-size:12px;padding:0 12px;text-align:center}
.clip.add{border-style:dashed;border-color:rgba(255,255,255,.2)}
.clip.add .play{background:rgba(168,85,247,.35);box-shadow:none;animation:none}

/* ================= COMUNIDAD ================= */
.comm{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.cbtn{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:20px;
  text-decoration:none;color:#fff;font-family:var(--font-pix);position:relative;overflow:hidden;transition:transform .18s ease}
.cbtn .ci{font-size:34px}.cbtn b{font-size:17px;display:block}
.cbtn small{font-family:var(--font-body);font-size:12px;color:rgba(255,255,255,.75)}
.cbtn:hover{transform:translateX(6px) scale(1.02)}
.cbtn.discord{background:linear-gradient(120deg,#5865F2,#7c5cff);box-shadow:0 12px 34px rgba(88,101,242,.4)}
.cbtn.wsp{background:linear-gradient(120deg,#25D366,#128C7E);box-shadow:0 12px 34px rgba(37,211,102,.35)}
.cbtn.tree{background:linear-gradient(120deg,#39E09B,#1de9b6);color:#04231a;box-shadow:0 12px 34px rgba(57,224,155,.35)}
.cbtn.tree small{color:rgba(4,35,26,.7)}

/* ================= TELÉFONO CORNER ================= */
#phone{position:fixed;left:16px;bottom:16px;z-index:9999;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;user-select:none;max-width:70vw}
.bubble{background:#fff;color:#1a0b2e;font-family:var(--font-pix);font-weight:700;
  padding:8px 14px;border-radius:14px 14px 14px 2px;font-size:14px;position:relative;
  box-shadow:0 6px 20px rgba(0,0,0,.4);white-space:nowrap;animation:shout .5s ease-in-out infinite}
@keyframes shout{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08) rotate(2deg)}}
.phone-btn{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ff3b6b,#a855f7);
  display:flex;align-items:center;justify-content:center;font-size:28px;
  box-shadow:0 0 0 0 rgba(255,59,107,.6),0 8px 24px rgba(0,0,0,.5);animation:ring .7s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(-14deg) scale(1);box-shadow:0 0 0 0 rgba(255,59,107,.6),0 8px 24px rgba(0,0,0,.5)}
  25%{transform:rotate(14deg) scale(1.05)}50%{transform:rotate(-14deg) scale(1);box-shadow:0 0 0 16px rgba(255,59,107,0),0 8px 24px rgba(0,0,0,.5)}
  75%{transform:rotate(14deg) scale(1.05)}}
#phone.answered .phone-btn{animation:none;background:#2a2a2a}
#phone.answered .bubble{animation:none;background:#d1ffd1}

/* ================= LLAMADA ENTRANTE ================= */
#call{position:fixed;top:0;left:0;right:0;z-index:10000;display:flex;justify-content:center;
  transform:translateY(-140%);transition:transform .4s cubic-bezier(.2,1.4,.4,1);pointer-events:none;
  padding-top:env(safe-area-inset-top,0)}
#call.show{transform:translateY(0)}
.call-card{margin-top:16px;pointer-events:auto;width:min(360px,92vw);
  background:linear-gradient(160deg,#1a0a1e,#2a0710);border:2px solid var(--red);border-radius:20px;
  padding:16px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 0 40px rgba(255,43,61,.5),0 20px 50px rgba(0,0,0,.6);animation:cshake .5s ease-in-out infinite}
@keyframes cshake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-4px) rotate(-1deg)}75%{transform:translateX(4px) rotate(1deg)}}
.call-top{display:flex;align-items:center;gap:14px}
.call-av{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--red);
  filter:grayscale(.3) contrast(1.1);box-shadow:0 0 16px rgba(255,43,61,.5)}
.call-info b{font-family:var(--font-pix);font-size:18px;color:#fff;display:block}
.call-info small{color:#ff8a97;font-size:12px}
.call-scream{font-family:var(--font-goth);text-align:center;color:var(--red);font-size:26px;
  text-shadow:0 0 14px rgba(255,43,61,.7);animation:screamp .4s ease-in-out infinite}
@keyframes screamp{50%{transform:scale(1.08);color:#ff6b7a}}
.call-btns{display:flex;gap:10px}
.call-btns button{flex:1;border:none;border-radius:12px;padding:12px;font-family:var(--font-pix);
  font-size:15px;cursor:pointer;color:#fff;transition:transform .12s ease}
.call-btns button:active{transform:scale(.94)}
.b-ans{background:linear-gradient(120deg,#25D366,#128C7E)}
.b-dec{background:linear-gradient(120deg,#ff2b3d,#a11020)}

footer{text-align:center;padding:50px 20px 130px;color:var(--muted);
  font-family:var(--font-pix);font-size:13px;position:relative;z-index:3}
footer b{color:#ff7aa8}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){
  section{padding:56px 0}
  .moon{width:64px;height:64px;top:4%;right:6%}
  #castle{height:170px}
  .about-card{padding:28px}
  .tablet{padding:36px 20px 30px}
}
@media (max-width:520px){
  .marquee{font-size:13px;letter-spacing:1px}
  #hero{padding:80px 16px 30px}
  .portrait{width:min(280px,82vw);margin-bottom:22px}
  .name{font-size:clamp(40px,13vw,64px)}
  .handle{font-size:16px}
  .bio{font-size:15px}
  .sec-title{font-size:clamp(26px,8vw,38px)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
  .social{padding:18px 10px 14px}
  .social .crest{width:46px;height:46px;font-size:24px}
  .social b{font-size:15px}
  .clips{grid-template-columns:repeat(2,1fr);gap:12px}
  .comm{grid-template-columns:1fr}
  .banner{margin-top:-58px;padding:12px 26px}
  #phone .phone-btn{width:52px;height:52px;font-size:24px}
  #phone .bubble{font-size:12px;padding:6px 10px;white-space:normal;max-width:60vw}
  .call-scream{font-size:22px}
}
@media (max-width:360px){
  .clips{grid-template-columns:1fr}
  .name{font-size:44px}
}

/* menos animación si el usuario lo pide */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .p-down{opacity:0}
}