/* Profe Tomi · maqueta v4 (19-oct-2026) — pizarra de liceo llena de garabatos; logo = Tomás a tiza
   v3 (pizarra ordenada, gatopájaro) en ../sitio-v3/ · v2 (neón) en ../sitio-v2/ · v1 (papel) en ../sitio-v1/ */
@font-face{font-family:"Permanent Marker";src:url(assets/fonts/PermanentMarker.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Caveat Brush";src:url(assets/fonts/CaveatBrush.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Patrick Hand";src:url(assets/fonts/PatrickHand.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Rock Salt";src:url(assets/fonts/RockSalt.woff2) format("woff2");font-display:swap}

:root{
  --pizarra:#17221d; --pizarra-2:#1d2b25; --pizarra-3:#10171a;
  --tiza:#f4f1e6; --tiza-2:#d9d6c8; --tiza-3:#a9b3a8;
  --amarillo:#f7d95c; --rosa:#f59ac0; --celeste:#86d3f4; --naranjo:#f6a35e; --verde:#9fe0a8;
  --madera:#8d5d2e; --madera-osc:#4e3013;
  --marco:10px;
  --rock:"Permanent Marker","Rock Salt",cursive; --mano:"Caveat Brush","Patrick Hand",cursive;
  --texto:"Patrick Hand","Segoe Print",system-ui,sans-serif; --mono:ui-monospace,"DejaVu Sans Mono",Menlo,monospace;
  --ancho:1080px; --g:clamp(18px,5vw,44px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--pizarra-3);scroll-padding-top:76px}
body{color:var(--tiza);font:400 1.2rem/1.5 var(--texto);overflow-x:hidden;min-height:100vh;
  /* tablero: verde-negro con manchas de borrador y grano */
  background:
    radial-gradient(ellipse 60% 22% at 18% 12%,rgba(244,241,230,.07),transparent 70%),
    radial-gradient(ellipse 50% 18% at 82% 46%,rgba(244,241,230,.06),transparent 70%),
    radial-gradient(ellipse 70% 20% at 30% 82%,rgba(244,241,230,.05),transparent 70%),
    radial-gradient(ellipse 40% 9% at 70% 22%,rgba(244,241,230,.06),transparent 70%),
    radial-gradient(ellipse 45% 8% at 12% 60%,rgba(244,241,230,.06),transparent 70%),
    radial-gradient(ellipse 35% 7% at 88% 72%,rgba(244,241,230,.05),transparent 70%),
    repeating-linear-gradient(-14deg,transparent 0 220px,rgba(244,241,230,.025) 220px 236px,transparent 236px 520px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 -.18'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
    linear-gradient(180deg,var(--pizarra-2),var(--pizarra) 40%,#141e1a)}
/* marco de madera fijo + sombra interior */
body::before{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;box-shadow:inset 0 0 70px 6px rgba(0,0,0,.55)}
body::after{content:"";position:fixed;inset:0;z-index:61;pointer-events:none;border:var(--marco) solid transparent;
  border-image:repeating-linear-gradient(90deg,#9a672f 0 9px,#855627 9px 11px,#a3713a 11px 22px,#7a4d22 22px 23px) 12;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.45),inset 0 3px 6px rgba(0,0,0,.6)}
img,svg{display:block;max-width:100%}
a{color:inherit}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 var(--g)}
/* logo: Tomás a tiza (SVG propio, sin foto ni IA) */
.tomi-logo,.tomi-cara,.tomi-cierre{width:100%;height:auto;overflow:hidden;filter:url(#tiza-fina) drop-shadow(0 0 6px rgba(244,241,230,.16))}
.ico{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.2em}
.adorno{position:absolute;pointer-events:none}

/* dato por confirmar (para Tomás) */
.ph{-webkit-box-decoration-break:clone;box-decoration-break:clone;overflow-wrap:anywhere;background:repeating-linear-gradient(-45deg,rgba(247,217,92,.14) 0 6px,transparent 6px 12px);outline:2px dashed var(--amarillo);outline-offset:2px;padding:0 .25em;border-radius:2px;color:var(--tiza)}
.ph::after{content:"por confirmar";font:700 .66rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--amarillo);margin-left:.45em;vertical-align:.25em}

/* tipografía de tiza */
h1,h2,h3{font-weight:400}
h1,h2,.titulo-sec h2{font-family:var(--rock);filter:url(#tiza);letter-spacing:.01em}
.t-amarillo{color:var(--amarillo)} .t-rosa{color:var(--rosa)}
.sub{position:relative;display:inline-block;color:var(--celeste)}
.subr{position:absolute;left:-2%;bottom:-.22em;width:104%;height:.3em;color:var(--rosa);overflow:visible;filter:url(#tiza-fina)}
.lec{font:400 .92em/1 var(--rock);color:var(--pizarra);background:var(--amarillo);padding:.18em .5em .1em;transform:rotate(-3deg);display:inline-block;margin-right:.55em;filter:url(#tiza-fina)}

/* botones */
.btn{display:inline-flex;align-items:center;gap:.55em;font:400 1.15rem/1 var(--rock);text-decoration:none;padding:.85em 1.2em .75em;border:2.5px solid var(--tiza);border-radius:3px;transition:transform .15s,background .15s;min-height:48px;filter:url(#tiza-fina);letter-spacing:.02em}
.btn svg{width:1.3em;height:1.3em;flex:none}
.btn-primario{background:var(--amarillo);border-color:var(--amarillo);color:#1b1b12}
.btn-primario:hover{transform:translate(-1px,-2px) rotate(-1deg);background:#ffe777}
.btn-sec{background:transparent;color:var(--tiza)}
.btn-sec:hover{background:rgba(244,241,230,.12);transform:translate(-1px,-2px) rotate(1deg)}
.btn-chico{padding:.6em .95em .5em;font-size:1rem;min-height:40px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--celeste);outline-offset:3px}

/* cabecera */
.cabecera{position:sticky;top:0;z-index:40;padding-top:var(--marco);background:linear-gradient(180deg,rgba(16,23,26,.96) 70%,rgba(16,23,26,.0))}
.cabecera .envoltura{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 1.5rem/1 var(--rock)}
.marca .tomi-cara{width:42px;flex:none;transform:rotate(-4deg)}
.marca b{color:var(--amarillo);font-weight:400}
.nav{display:flex;align-items:center;gap:6px}
.nav a:not(.btn){font:400 1.2rem/1 var(--mano);padding:10px 12px;text-decoration:none;color:var(--tiza-2)}
.nav a:not(.btn):hover{color:var(--amarillo);text-decoration:underline wavy 1.5px;text-underline-offset:5px}
.oculto-movil{display:none}

/* hero */
.hero{padding:6px 0 34px;position:relative}
.hero .envoltura{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.escena{position:relative;width:min(70%,300px);margin:6px auto 0;aspect-ratio:1/1.04;display:grid;place-items:center}
.tomi-logo{overflow:visible;width:84%;position:relative;z-index:1;transform:rotate(-3deg)}
.circ{inset:-4% -6%;width:112%;height:108%;color:var(--tiza-3);filter:url(#tiza);opacity:.8;transform:rotate(8deg)}
.ico{stroke-linecap:round}
.rayo-a,.rayo-b,.est-a,.est-b,.est-c{filter:url(#tiza-fina)}
.rayo-a{width:15%;height:auto;aspect-ratio:1;left:-6%;top:6%;color:var(--amarillo);transform:rotate(-12deg)}
.rayo-b{width:11%;height:auto;aspect-ratio:1;right:-5%;bottom:10%;color:var(--rosa);transform:rotate(14deg)}
.est-a{width:11%;height:auto;aspect-ratio:1;right:2%;top:2%;color:var(--celeste)}
.est-b{width:8%;height:auto;aspect-ratio:1;left:4%;bottom:6%;color:var(--naranjo)}
.est-c{width:6%;height:auto;aspect-ratio:1;right:-9%;top:46%;color:var(--tiza)}
.hero-texto{text-align:center}
.kicker{line-height:2.1;font:400 1.25rem/2.1 var(--mano);color:var(--tiza-2);margin-bottom:14px}
h1{font-size:clamp(2.1rem,9.2vw,3.5rem);line-height:1.12;margin-bottom:20px;text-wrap:balance}
.bajada{font-size:1.28rem;color:var(--tiza-2);max-width:34em;margin:0 auto 22px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero-dato{margin-top:16px;font:400 1.05rem/1.2 var(--mano);color:var(--tiza-3)}

/* apunte de tablatura */
.tab{padding:6px 0 30px}
.tab .envoltura{position:relative}
.tab small{display:block;font:400 1.25rem/1 var(--mano);color:var(--celeste);margin-bottom:10px;text-align:center}
.tab small .ico{width:1.8em;height:1em;transform:rotate(14deg) translateY(.1em)}
.tab pre{font:400 clamp(.62rem,2.7vw,1.02rem)/1.55 var(--mono);color:var(--tiza-2);overflow:hidden;text-align:center;filter:url(#tiza-fina);
  border-top:2px dashed rgba(244,241,230,.28);border-bottom:2px dashed rgba(244,241,230,.28);padding:14px 0}
.tab pre b{color:var(--amarillo);font-weight:400}

/* bloques */
.bloque{padding:64px 0 60px;position:relative}
.titulo-sec{position:relative;display:inline-block;margin-bottom:34px;transform:rotate(-1.6deg);transform-origin:left bottom}
#clases .titulo-sec,#preguntas .titulo-sec{transform:rotate(1.2deg)}
.titulo-sec .num{display:block;font:400 1.2rem/1 var(--mano);color:var(--rosa);margin-bottom:4px;transform:rotate(-2deg);transform-origin:left}
.titulo-sec h2{font-size:clamp(2.1rem,8vw,3.1rem);line-height:1.05}
.titulo-sec .subr{color:var(--amarillo);bottom:-.35em}

/* quién soy */
.quien{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.retrato{position:relative;aspect-ratio:4/3;max-width:340px;border:2.5px dashed var(--tiza-3);display:grid;place-items:center;padding:26px;text-align:center;font:400 1.1rem/1.35 var(--mano);color:var(--tiza-3);transform:rotate(-1.5deg);background:rgba(244,241,230,.04)}
.cinta{position:absolute;top:-14px;left:50%;width:96px;height:28px;transform:translateX(-50%) rotate(3deg);background:rgba(246,163,94,.78);box-shadow:0 1px 2px rgba(0,0,0,.4);clip-path:polygon(0 0,4% 18%,0 38%,3% 58%,0 80%,2% 100%,100% 100%,97% 78%,100% 56%,97% 36%,100% 16%,98% 0)}
.texto{display:grid;gap:14px;align-content:start}
.grande{font:400 clamp(1.5rem,5.2vw,1.95rem)/1.25 var(--mano);color:var(--tiza)}
.texto p{color:var(--tiza-2)}
.texto .grande{color:var(--tiza)}
.firma{font:400 2rem/1 var(--rock);color:var(--amarillo)!important;transform:rotate(-4deg);transform-origin:left}
.firma .ico{color:var(--rosa);width:.9em}

/* clases: apuntes */
.rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.tarjeta{position:relative;border:2.5px solid var(--tiza-3);padding:24px 20px 20px;background:rgba(244,241,230,.035);border-radius:2px;filter:url(#tiza-fina)}
.tarjeta:nth-child(odd){transform:rotate(-1.2deg)} .tarjeta:nth-child(even){transform:rotate(1.1deg)}
.tarjeta:nth-child(3){transform:rotate(.4deg) translateX(4px)}
.et{position:absolute;top:-14px;left:16px;font:400 1.05rem/1 var(--rock);background:var(--pizarra);padding:2px 10px 0}
.c1 .et{color:var(--amarillo)} .c2 .et{color:var(--rosa)} .c3 .et{color:var(--celeste)} .c4 .et{color:var(--naranjo)}
.c1{border-color:rgba(247,217,92,.7)} .c2{border-color:rgba(245,154,192,.7)} .c3{border-color:rgba(134,211,244,.7)} .c4{border-color:rgba(246,163,94,.7)}
.tarjeta h3{font:400 1.7rem/1.1 var(--mano);margin-bottom:10px}
.tarjeta p,.tarjeta li{color:var(--tiza-2)}
.tarjeta ul{list-style:none;display:grid;gap:4px}
.tarjeta li::before{content:"♪ ";color:var(--rosa)}

/* pasos */
.pasos{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;counter-reset:p}
.paso{position:relative;padding-left:74px;counter-increment:p;min-height:64px}
.paso::before{content:counter(p);position:absolute;left:0;top:-4px;width:56px;height:56px;display:grid;place-items:center;font:400 2.2rem/1 var(--rock);color:var(--pizarra);background:var(--amarillo);border-radius:50%;filter:url(#tiza-fina);padding-top:4px}
.paso:nth-child(2)::before{background:var(--rosa)} .paso:nth-child(3)::before{background:var(--celeste)}
.paso h3{font:400 1.7rem/1.1 var(--mano);margin-bottom:4px;transform:rotate(-1.5deg);transform-origin:left}
.paso:nth-child(2) h3{transform:rotate(1.4deg)}
del{color:var(--tiza-3);text-decoration:line-through 3px var(--rosa);font-size:.75em;margin-right:.25em}
.paso p{color:var(--tiza-2)}

/* preguntas */
.faq{display:grid;gap:12px;max-width:760px}
details{border-bottom:2px dashed rgba(244,241,230,.3);padding:6px 0}
summary{list-style:none;cursor:pointer;font:400 1.5rem/1.2 var(--mano);padding:12px 36px 12px 0;position:relative;min-height:48px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-52%);font:400 2rem/1 var(--rock);color:var(--amarillo)}
details[open] summary::after{content:"–";color:var(--rosa)}
details[open] summary{color:var(--amarillo)}
details p{color:var(--tiza-2);padding:2px 0 14px}

/* cierre */
.cierre{padding:56px 0 64px;text-align:center;position:relative}
.cierre::before{content:"";display:block;width:min(86%,520px);height:3px;margin:0 auto 38px;background:repeating-linear-gradient(90deg,var(--tiza-3) 0 14px,transparent 14px 22px);opacity:.7}
.cierre-dib{position:relative;width:min(40%,160px);margin:0 auto 18px;transform:rotate(3deg)}
.globo{position:absolute;left:92%;top:-6px;white-space:nowrap;font:400 1.2rem/1 var(--mano);color:var(--pizarra);background:var(--tiza);padding:.35em .6em .25em;border-radius:14px;transform:rotate(-6deg);filter:url(#tiza-fina)}
.globo::after{content:"";position:absolute;left:8px;bottom:-9px;border:6px solid transparent;border-top-color:var(--tiza);border-left-color:var(--tiza)}
.cierre h2{font:400 clamp(2.2rem,9vw,3.6rem)/1.1 var(--rock);filter:url(#tiza);margin-bottom:14px}
.cierre p{color:var(--tiza-2);font-size:1.25rem;margin-bottom:22px}
.tel{margin-top:18px!important;font:400 1.4rem/1 var(--mano)!important;color:var(--amarillo)!important}

/* pie: repisa de madera con tiza y borrador */
.pie{position:relative;padding:0 0 calc(var(--marco) + 74px);font-size:1rem;color:var(--tiza-3)}
.repisa{position:relative;height:30px;margin-bottom:16px;background:linear-gradient(180deg,#a4713a,#8d5d2e 40%,#6c4421);box-shadow:0 -2px 0 #b98550 inset,0 6px 12px rgba(0,0,0,.55)}
.tiza-barra{position:absolute;left:18%;top:-9px;width:54px;height:11px;border-radius:3px;background:linear-gradient(180deg,#fff,#d9d6c8);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.borrador{position:absolute;right:14%;top:-16px;width:78px;height:20px;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#3b3b3b 0 55%,#d9c58f 55%);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.pie .envoltura{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}
.pie a{color:var(--tiza-2)}

/* barra fija de WhatsApp (móvil) */
.barra-wsp{position:fixed;left:calc(var(--marco) + 10px);right:calc(var(--marco) + 10px);bottom:calc(var(--marco) + 10px);z-index:55;display:flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--amarillo);color:#1b1b12;text-decoration:none;font:400 1.15rem/1 var(--rock);padding:1em;border-radius:3px;box-shadow:0 6px 18px rgba(0,0,0,.55);
  transform:translateY(160%);transition:transform .25s;min-height:52px}
.barra-wsp svg{width:1.3em;height:1.3em}
.barra-wsp.visible{transform:none}

/* animación sutil: el subrayado se «dibuja» y los rayos titilan */
.hero .subr{animation:trazo .9s .3s ease-out both}
@keyframes trazo{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.rayo-a,.rayo-b{animation:titila 4.5s infinite}
.late{animation:late 1.6s ease-in-out infinite}
@keyframes late{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.14)}}
@keyframes titila{0%,86%,100%{opacity:1}90%{opacity:.35}94%{opacity:1}97%{opacity:.5}}

/* ===== garabatos de liceo (decorativos, aria-hidden) ===== */
.hero,.tab,.bloque,.cierre{position:relative}
.capa{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero>.envoltura,.tab>.envoltura,.bloque>.envoltura,.cierre>.envoltura{position:relative;z-index:1}
.d{position:absolute;height:auto;aspect-ratio:1;pointer-events:none;opacity:.72;filter:url(#tiza-fina);color:var(--tiza)}
.dt{position:absolute;white-space:nowrap;font:400 1.2rem/1.05 var(--mano);color:var(--tiza-2);opacity:.78;transform:rotate(var(--r,0deg));filter:url(#tiza-fina)}
.dt .ico{width:1em;height:1em;display:inline-block}
.grande-dt{font:400 2.6rem/1 var(--rock)}
.caja{border:2px solid currentColor;padding:.15em .45em .05em;font-family:var(--rock);font-size:.95rem;letter-spacing:.04em;opacity:.85;z-index:2}
.borrado{opacity:.3;-webkit-mask-image:linear-gradient(97deg,#000 0 30%,rgba(0,0,0,.15) 46%,#000 60%,rgba(0,0,0,.05) 92%);mask-image:linear-gradient(97deg,#000 0 30%,rgba(0,0,0,.15) 46%,#000 60%,rgba(0,0,0,.05) 92%)}
.mancha{position:absolute;width:190px;height:70px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(244,241,230,.1),rgba(244,241,230,.04) 45%,transparent 70%);transform:rotate(-8deg)}
.solo-ancho{display:none}
.el-profe{left:-18%;bottom:-2%;--r:-10deg;color:var(--amarillo);opacity:.9;font-size:1.15rem;z-index:2}
.el-profe .ico{width:1.8em;transform:rotate(-30deg) translateY(-.2em)}
.escena .d{z-index:0}
.tarjeta .esq{position:absolute;right:-10px;top:-14px;width:30px;transform:rotate(14deg)}
.tarjeta.c2 .esq,.tarjeta.c4 .esq{right:auto;left:auto;right:18px;top:auto;bottom:-14px;transform:rotate(-10deg)}
.nota-tarj{right:56px;bottom:-12px;--r:-8deg;color:var(--naranjo);font-size:1.05rem}
.paso-g{left:auto;right:4px;top:0;width:26px;opacity:.6}
.kicker{position:relative}
.kick-g{width:54px;left:50%;top:-22px;transform:translateX(-50%) rotate(-4deg);opacity:.55;aspect-ratio:60/24}
.hero-texto{position:relative}
.hero-g1{width:24px;left:2%;bottom:24px;transform:rotate(-14deg)}
.hero-g2{width:24px;right:2%;bottom:30px}
.faq{position:relative}
.faq-g{right:0;top:-34px;--r:-6deg;color:var(--rosa);font-size:1.05rem}
.retrato .esq{position:absolute;right:-12px;bottom:-14px;width:34px;opacity:.85;transform:rotate(12deg)}

@media (min-width:700px){
  :root{--marco:14px}
  body{font-size:1.28rem}
  .oculto-movil{display:inline-block}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
  .paso{padding-left:0;padding-top:72px}
  .paso::before{top:0}
  .quien{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:48px;align-items:center}
  .retrato{aspect-ratio:4/5}
  .barra-wsp{display:none}
  .pie{padding-bottom:calc(var(--marco) + 22px)}
}
@media (min-width:1180px){
  .solo-ancho{display:block}
  span.solo-ancho{display:inline-block}
}
@media (min-width:960px){
  .hero{padding:24px 0 50px}
  .hero .envoltura{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
  .escena{width:min(100%,420px);margin:0 auto}
  .hero-texto{text-align:left}
  .ctas{justify-content:flex-start}
  .bajada{margin-left:0}
  h1{font-size:clamp(2.8rem,4.6vw,4rem)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Efecto máquina de escribir al hacer scroll (JS añade .tw-on a <html>; sin JS el texto se ve completo) */
.tw-on .tw-pend{opacity:0}
.tw-c{opacity:0}
.tw-c.v{opacity:1}
.tw-cur{position:relative;display:inline;width:0}
.tw-cur::after{content:"";position:absolute;left:2px;top:-.85em;height:.95em;width:.09em;min-width:2px;background:var(--amarillo);animation:tw-blink .7s steps(1) infinite}
@keyframes tw-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tw-on .tw-pend{opacity:1}}