:root {
    --tecla-pizarra: #26313A;
    --tecla-tiza: #F4EFE4;
    --tecla-mostaza: #E8A33D;
    --tecla-coral: #E4635A;
    --tecla-menta: #7FB69E;
    --tinta: #1A2228;
    --borde: rgba(244, 239, 228, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--tecla-tiza); color: var(--tinta); font-family: 'Nunito Sans', sans-serif; font-size: 16px; line-height: 1.55; }
button, a { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
.saltar { position: fixed; z-index: 20; top: -5rem; left: 1rem; padding: .7rem 1rem; background: var(--tecla-tiza); color: var(--tinta); border-radius: .4rem; }
.saltar:focus { top: 1rem; }

.barra { width: min(1180px, calc(100% - 2.5rem)); margin: 0 auto; min-height: 5.7rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { text-decoration: none; font: 700 clamp(1.7rem, 3vw, 2.25rem)/1 'Baloo 2', sans-serif; letter-spacing: -.06em; display: inline-flex; align-items: center; gap: .35rem; }
.marca__tecla { display: inline-grid; place-items: center; width: 1.45em; height: 1.28em; padding-top: .08em; background: var(--tecla-mostaza); color: var(--tinta); border: 1px solid rgba(0,0,0,.18); border-radius: .25em; box-shadow: 0 .13em 0 #a76a16; font: 600 .55em/1 'IBM Plex Mono', monospace; letter-spacing: 0; }
.barra nav { display: flex; gap: clamp(.8rem, 2vw, 1.8rem); font-weight: 800; }
.barra nav a { text-decoration: none; border-bottom: 2px solid transparent; }
.barra nav a:hover, .barra nav a:focus-visible { border-color: var(--tecla-coral); }

.boton { border: 0; display: inline-flex; align-items: center; gap: .7rem; padding: .9rem 1.2rem; border-radius: .55rem; background: var(--tecla-coral); color: #fff; box-shadow: 0 .22rem 0 #a73d37; font-weight: 800; text-decoration: none; transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1); }
.boton:hover, .boton:focus-visible { transform: translateY(.14rem); box-shadow: 0 .08rem 0 #a73d37; }
.boton--pequeno { padding: .62rem .9rem; font-size: .9rem; }
.boton--claro { background: var(--tecla-tiza); color: var(--tinta); box-shadow: 0 .22rem 0 #bbb4a7; }

.hero { min-height: min(720px, calc(100vh - 5.7rem)); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); align-items: center; gap: clamp(2rem, 7vw, 8rem); padding: clamp(4rem, 9vw, 8rem) max(1.25rem, calc((100vw - 1180px) / 2)); background: var(--tecla-pizarra); color: var(--tecla-tiza); overflow: hidden; }
.etiqueta { margin: 0 0 .8rem; color: var(--tecla-mostaza); font: 600 .78rem/1.3 'IBM Plex Mono', monospace; letter-spacing: .07em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: 'Baloo 2', sans-serif; line-height: .98; letter-spacing: -.045em; }
h1 { max-width: 700px; font-size: clamp(3.25rem, 7.4vw, 6.8rem); }
h1 em { color: var(--tecla-mostaza); font-style: normal; }
.hero__bajada { max-width: 35rem; margin: 1.8rem 0; font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.hero__acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 1.3rem; }
.hero__acciones > a { font-weight: 800; text-underline-offset: .3em; }
.hero__teclas { position: relative; padding: clamp(1.5rem, 3vw, 2.7rem); border: 1px dashed rgba(244,239,228,.35); border-radius: 1.3rem; background: linear-gradient(130deg, rgba(255,255,255,.06), transparent); transform: rotate(2deg); }
.hero__teclas > p:first-child { margin: 0 0 1.3rem; font: 600 .8rem 'IBM Plex Mono', monospace; color: var(--tecla-menta); }
.teclas { display: flex; gap: .8rem; flex-wrap: wrap; }
.keycap { min-width: 7.2rem; border: 1px solid rgba(24, 34, 40, .24); border-radius: .65rem; padding: .8rem 1rem .64rem; background: var(--tecla-tiza); color: var(--tinta); box-shadow: 0 .34rem 0 rgba(13, 18, 22, .7); transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1); text-align: left; }
.keycap:hover, .keycap:focus-visible, .keycap:active { transform: translateY(.25rem); box-shadow: 0 .09rem 0 rgba(13, 18, 22, .7); }
.keycap kbd { display: block; font: 600 1rem 'IBM Plex Mono', monospace; }
.keycap span { display: block; margin-top: .15rem; font-size: .74rem; font-weight: 800; opacity: .72; }
.keycap--mostaza { background: var(--tecla-mostaza); }.keycap--menta { background: var(--tecla-menta); }
.hero__nota { margin: 1.8rem 0 0; color: rgba(244,239,228,.78); font-size: .9rem; }.hero__nota span { color: var(--tecla-coral); font-size: 1.4rem; }

.pasos, .cursos, .profe, .voces { padding: clamp(4.5rem, 10vw, 9rem) max(1.25rem, calc((100vw - 1180px) / 2)); }
.pasos { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; background: var(--tecla-mostaza); }.pasos h2, .cursos h2, .profe h2, .voces h2, .cta h2 { font-size: clamp(2.4rem, 5vw, 4.75rem); }.pasos ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0; margin: 0; list-style: none; }.pasos li { border-top: 2px solid var(--tinta); padding-top: .8rem; }.pasos b, .pasos strong, .pasos span { display: block; }.pasos b { font: 600 .75rem 'IBM Plex Mono', monospace; }.pasos strong { margin: .65rem 0 .35rem; font-size: 1.08rem; }.pasos span { font-size: .92rem; }

.cursos header { max-width: 43rem; }.cursos header > p:last-child { max-width: 32rem; margin: 1.3rem 0 0; }.curso-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; margin-top: 3.5rem; }.curso { min-width: 0; background: #fffdf8; border: 1px solid #ddd7ca; border-radius: 1rem; overflow: hidden; box-shadow: 0 .4rem 0 #ded8cb; }.curso img { display: block; width: 100%; aspect-ratio: 1.26; object-fit: cover; }.curso__contenido { padding: 1.5rem; }.curso__contenido > p:first-child { margin: 0; color: #6f5a2f; font: 600 .72rem 'IBM Plex Mono', monospace; text-transform: uppercase; }.curso h3 { margin: .8rem 0; font-size: 2rem; }.curso__contenido > p:not(:first-child) { min-height: 5rem; margin: 0 0 1.35rem; }.keycap--chica { min-width: auto; padding: .58rem .78rem .44rem; }.keycap--chica kbd { font-size: .82rem; }.keycap--chica span { display: inline; margin-left: .4rem; }

.profe { display: grid; grid-template-columns: minmax(260px, .7fr) 1fr; gap: clamp(2rem, 8vw, 8rem); align-items: center; background: #dce7df; }.profe__foto { max-width: 28rem; overflow: hidden; border-radius: 9rem 9rem 1rem 1rem; background: var(--tecla-pizarra); }.profe__foto img { display: block; width: 100%; aspect-ratio: .76; object-fit: cover; }.profe__texto { max-width: 36rem; }.profe__texto > p:not(.etiqueta):not(.firma) { font-size: 1.1rem; }.firma { margin-top: 2rem; font-family: 'IBM Plex Mono', monospace; font-weight: 600; }.firma span { color: #56625c; font-size: .78rem; }

.voces { background: var(--tecla-pizarra); color: var(--tecla-tiza); }.voces__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; }.voces blockquote { display: flex; min-height: 15rem; flex-direction: column; justify-content: space-between; margin: 0; padding: 1.6rem; border: 1px solid var(--borde); border-radius: 1rem; background: rgba(255,255,255,.04); font: 600 clamp(1.25rem, 2vw, 1.7rem)/1.22 'Baloo 2', sans-serif; }.voces cite { color: var(--tecla-menta); font: 500 .75rem 'IBM Plex Mono', monospace; font-style: normal; }
.cta { padding: clamp(5rem, 12vw, 10rem) 1.25rem; background: var(--tecla-coral); color: #fff; text-align: center; }.cta h2 span { color: var(--tecla-mostaza); }.cta > p:not(.etiqueta) { max-width: 32rem; margin: 1.4rem auto 2rem; }.cta .etiqueta { color: var(--tecla-tiza); }.pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(1180px, calc(100% - 2.5rem)); padding: 2.4rem 0; margin: auto; }.pie p { margin: 0; font-size: .88rem; }.pie > a:last-child { font-weight: 800; text-underline-offset: .25em; }

@media (max-width: 850px) { .barra nav { display: none; }.hero, .pasos, .profe { grid-template-columns: 1fr; }.hero { min-height: auto; gap: 3rem; }.hero__teclas { max-width: 35rem; }.pasos { gap: 2rem; }.curso-grid, .voces__grid { grid-template-columns: 1fr; }.curso-grid { max-width: 34rem; }.curso { display: grid; grid-template-columns: .9fr 1.1fr; }.curso img { height: 100%; aspect-ratio: auto; }.curso__contenido > p:not(:first-child) { min-height: 0; }.voces blockquote { min-height: 10rem; } }
@media (max-width: 560px) { .barra { min-height: 4.8rem; }.barra .boton { font-size: .78rem; }.hero { padding-top: 3.5rem; }.teclas--grandes { display: grid; grid-template-columns: 1fr 1fr; }.teclas--grandes .keycap:last-child { grid-column: span 2; }.pasos ol { grid-template-columns: 1fr; }.pasos li { display: grid; grid-template-columns: 2rem 1fr; column-gap: .5rem; }.pasos li span { grid-column: 2; }.curso { display: block; }.curso img { aspect-ratio: 1.35; }.pie { align-items: flex-start; flex-direction: column; }.pie p { order: 3; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }