/* Konvokas · hero v4 «La pizarra del entrenador» (05/11). Pizarra de tiza con imanes, jugada animada y K a rotulador. */

/* ---------- Cabecera mínima sobre la pizarra ---------- */
.cab{position:fixed;left:0;right:0;top:0;z-index:60;background:transparent;color:#f3efe4;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .4s,box-shadow .4s}
.cab.solida{background:var(--n);box-shadow:0 10px 30px -20px rgba(0,0,0,.6)}
.cab .cab-in{max-width:none;padding:30px clamp(26px,4vw,64px) 0}
.cab.solida .cab-in{padding-top:16px;padding-bottom:16px}
.cab .marca{color:inherit;display:flex;align-items:center;gap:10px;text-decoration:none}
.cab .marca-b{width:30px;height:30px;color:var(--o);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.cab .marca:hover .marca-b{transform:rotate(-180deg)}
.marca-n{display:block;width:128px;height:17px;background:currentColor;
 -webkit-mask:url(../img/konvokas_nombre_azul.svg) no-repeat center/contain;mask:url(../img/konvokas_nombre_azul.svg) no-repeat center/contain}
.cab-cta{font:600 15px var(--f-c)!important;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--o)!important;
 padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;transition:background-size .35s}
.cab-cta:hover{background-size:0 2px;background-position:100% 100%}
@media (min-width:900px){
 .cab .menu{gap:clamp(18px,2.2vw,34px)}
 .cab .menu a{color:inherit;font:600 15px var(--f-c);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;opacity:.82}
 .cab .menu a:hover{opacity:1}
 .cab .menu .menu-entrar{opacity:.5}
}
.cab .menu-btn{background:transparent;border:1px solid rgba(243,239,228,.4)}
.cab .menu-btn span{background:#f3efe4}

/* ---------- La pared y la pizarra ---------- */
.pz{position:relative;height:100svh;min-height:660px;background:#10152f;padding:14px 14px 0;overflow:hidden}
.pz-tabla{position:relative;height:calc(100% - 46px);border-radius:4px;overflow:hidden;
 background:
  radial-gradient(70% 60% at 22% 30%,rgba(255,255,255,.07),transparent 70%),
  radial-gradient(50% 50% at 85% 85%,rgba(255,255,255,.05),transparent 70%),
  radial-gradient(40% 30% at 60% 15%,rgba(255,255,255,.04),transparent 70%),
  #213a31;
 box-shadow:inset 0 0 0 12px #b9bdc2,inset 0 0 0 13px #7f848a,inset 0 0 0 15px #d8dbdf,inset 0 0 140px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.8)}
/* polvo de tiza de fondo y vetas de borrados antiguos */
.pz-tabla::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:screen;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .32 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pz-tabla::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
 background:repeating-linear-gradient(-8deg,transparent 0 60px,rgba(255,255,255,.6) 60px 64px,transparent 64px 150px),
            repeating-linear-gradient(4deg,transparent 0 90px,rgba(255,255,255,.5) 90px 93px,transparent 93px 210px);filter:blur(6px)}
.pz-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.pz-svg .tz{fill:none;stroke:url(#pz-grano);stroke-linecap:round;stroke-linejoin:round}
.pz-svg .tz.pista{stroke-width:3.2;opacity:.62}
.pz-svg .tz.mov{stroke-width:5.5}
.pz-svg .tz.pase{stroke-width:5}
.pz-svg .rot{fill:none;stroke:var(--o);stroke-width:17;stroke-linecap:round;stroke-linejoin:round;filter:url(#pz-rot)}
.pz-fantasma{opacity:.13}
.pz-tizon{opacity:0;transition:opacity .25s}
.pz-tizon.on{opacity:1}
.pz-svg .iman-n{font:800 25px var(--f-c);fill:#fff;text-anchor:middle;dominant-baseline:central}

/* Borrador que cruza la pizarra */
.pz-borrador{position:absolute;z-index:3;left:0;top:0;width:190px;height:66px;opacity:0;pointer-events:none}
.pz-borrador i{position:absolute;inset:0;border-radius:8px;background:linear-gradient(#5b4632 0 58%,#e8e1d1 58%);box-shadow:0 14px 26px rgba(0,0,0,.45)}

/* Texto escrito a tiza */
.pz-txt{position:absolute;z-index:2;left:clamp(30px,5vw,90px);top:50%;translate:0 -46%;max-width:min(620px,44vw);color:#f3efe4}
.pz-eti{font:600 14px var(--f-c);letter-spacing:.22em;text-transform:uppercase;color:rgba(243,239,228,.6);opacity:0;transition:opacity .8s}
.pz-h1{font:400 clamp(44px,5.4vw,96px)/.94 var(--f-t);text-transform:uppercase;margin-top:18px;filter:url(#pz-tiza)}
.pz-h1 span{display:block;clip-path:inset(-10% 100% -10% 0);transition:clip-path .9s cubic-bezier(.6,.1,.3,1)}
.pz-h1 .nar{color:var(--o);filter:url(#pz-rot)}
.pz-sub{margin-top:24px;font:400 clamp(17px,1.35vw,20px)/1.55 var(--f-b);color:rgba(243,239,228,.78);max-width:500px;opacity:0;translate:0 10px;transition:opacity .8s,translate .8s}
.pz-acc{display:flex;gap:30px;align-items:center;margin-top:28px;opacity:0;transition:opacity .8s}
.pz-cta,.pz-cta2{font:600 16px var(--f-c);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:8px 0;
 background:linear-gradient(currentColor,currentColor) 0 100%/100% 3px no-repeat;transition:background-size .35s,color .2s}
.pz-cta{color:var(--o);font-size:18px}
.pz-cta2{color:rgba(243,239,228,.85);background-size:0 3px}
.pz-cta:hover{background-size:0 3px;background-position:100% 100%}
.pz-cta2:hover{background-size:100% 3px;color:#fff}
.pz.escrito .pz-eti{opacity:1}
.pz.escrito .pz-h1 span{clip-path:inset(-10% 0 -10% 0)}
.pz.escrito .pz-h1 span:nth-child(2){transition-delay:.45s}
.pz.escrito .pz-h1 span:nth-child(3){transition-delay:.9s}
.pz.escrito .pz-sub{opacity:1;translate:0 0;transition-delay:1.5s}
.pz.escrito .pz-acc{opacity:1;transition-delay:1.8s}

/* Repisa con tizas y rotulador */
.pz-repisa{position:absolute;left:14px;right:14px;bottom:0;height:46px;background:linear-gradient(#c9ccd1,#9aa0a7 40%,#7c828a);border-radius:0 0 6px 6px;box-shadow:0 -6px 14px rgba(0,0,0,.35)}
.pz-repisa span{position:absolute;bottom:14px;height:12px;border-radius:5px}
.tiza-b{left:18%;width:58px;background:#f3efe4;rotate:-3deg}
.tiza-n{left:24%;width:40px;background:#ffb07a;rotate:4deg}
.rotu{left:72%;width:120px;height:16px!important;background:linear-gradient(90deg,var(--o) 0 22%,#1c1c1c 22% 30%,#ececec 30%);rotate:-2deg}

@media (max-width:900px){
 .pz{padding:8px 8px 0}
 .pz-tabla{height:calc(100% - 34px)}
 .pz-repisa{height:34px;left:8px;right:8px}
 .pz-txt{left:24px;right:24px;top:auto;bottom:34px;translate:none;max-width:none}
 .pz-tabla::after{display:none}
 .pz-txt::before{content:"";position:absolute;inset:-60px -24px -34px;z-index:-1;background:linear-gradient(transparent,rgba(24,44,37,.92) 30%)}
 .pz-h1{font-size:clamp(38px,10.5vw,60px)}
 .pz-sub{font-size:16px}
 .pz-eti{font-size:11px;letter-spacing:.14em}
 .cab .cab-in{padding-top:22px}
}

@media (prefers-reduced-motion:reduce){
 .pz-h1 span,.pz-sub,.pz-acc,.pz-eti{transition:none}
}