:root{color-scheme:dark;--fondo:#0e0e10;--fondo-alt:#131316;--superficie:#17171a;--texto:#ededed;--texto-suave:#9a9aa0;--texto-tenue:#808086;--linea:#2a2a2e;--linea-campo:#6a6a70;--acento:#c6f432;--acento-hover:#b3e01f;--acento-suave:#1f2610;--sobre-acento:#0e0e10;--rojo:#f87171;--rojo-hover:#ef4444;--radio:14px;--ancho:1240px;--alto-barra:68px;--titulos:"Geist",Arial,system-ui,-apple-system,"Segoe UI",sans-serif;--sans:"Geist",Arial,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",Consolas,ui-monospace,monospace}*,::after,::before{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-barra) + 16px)}body{margin:0;font-family:var(--sans);font-size:1rem;line-height:1.6;color:var(--texto);background:var(--fondo);-webkit-font-smoothing:antialiased}img{max-width:100%;height:auto}h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.15;letter-spacing:-.01em}p{margin:0}a{color:inherit}code{font-family:var(--mono);font-size:.88em;background:var(--acento-suave);color:var(--acento);padding:2px 6px;border-radius:6px;overflow-wrap:break-word}.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border:1px solid var(--acento);border-radius:999px;background:var(--acento);color:var(--sobre-acento);font:inherit;font-size:.9375rem;font-weight:500;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s}.boton>[aria-hidden=true]:first-child{margin-inline-end:-4px}.boton:hover{background:var(--acento-hover);border-color:var(--acento-hover);transform:translateY(-1px)}.boton:active{transform:translateY(0)}.boton:disabled{background:var(--fondo-alt);border-color:var(--linea);color:var(--texto-suave);cursor:default;transform:none}.boton--borde{background:0 0;color:var(--texto);border-color:var(--linea)}.boton--borde:hover{background:var(--superficie);border-color:var(--texto-suave)}.boton--rojo{background:var(--rojo);border-color:var(--rojo)}.boton--rojo:hover{background:var(--rojo-hover);border-color:var(--rojo-hover)}.boton--claro{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}.boton--claro:hover{background:var(--acento-hover);border-color:var(--acento-hover)}.boton--pequeno{padding:8px 16px;font-size:.875rem}.oculto{display:none}.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.saltar{position:absolute;top:8px;left:8px;z-index:30;padding:10px 16px;border-radius:999px;background:var(--acento);color:var(--sobre-acento);font-weight:500;text-decoration:none;transform:translateY(-200%)}.saltar:focus{transform:none}.boton-tab:focus-visible,.boton:focus-visible,.cuadro:focus-visible,.tarjeta__abrir:focus-visible,.visor:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--acento);outline-offset:3px}@supports selector(:has(*)){.tarjeta__abrir:focus-visible{outline:0}.tarjeta-hover:has(.tarjeta__abrir:focus-visible){outline:2px solid var(--acento);outline-offset:3px}}.barra{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--fondo) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}.barra__interior{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--alto-barra)}.logo{font-family:var(--titulos);font-weight:700;font-size:1.375rem;letter-spacing:-.04em;text-decoration:none;white-space:nowrap;color:var(--texto)}.logo__punto{color:var(--acento)}.logo__sub{font-family:var(--sans);font-size:.8125rem;color:var(--texto-suave)}.barra__enlaces{display:flex;align-items:center;gap:24px;font-size:.9375rem}.barra__enlaces a{color:var(--texto-suave);text-decoration:none;transition:color .2s}.barra__enlaces a:hover{color:var(--texto)}.portada{padding:110px 0 100px}.etiqueta{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border:1px solid var(--linea);border-radius:999px;background:var(--superficie);font-size:.8125rem;color:var(--texto-suave);margin-bottom:28px}.etiqueta__punto{width:8px;height:8px;border-radius:50%;background:var(--acento)}.portada__titulo{font-family:var(--titulos);font-weight:600;font-size:clamp(2.5rem, 6.2vw, 4.75rem);line-height:1.02;letter-spacing:-.045em;max-width:15ch;color:var(--texto)}.portada__titulo em{font-style:normal;color:var(--acento)}.portada__texto{margin-top:24px;max-width:56ch;font-size:1.125rem;color:var(--texto-suave)}.portada__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}.portada__principal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}.portada__mascota{height:400px;width:auto;margin-right:24px;filter:drop-shadow(0 0 1px color-mix(in srgb, var(--acento) 55%, transparent)) drop-shadow(0 18px 44px color-mix(in srgb, var(--acento) 16%, transparent));animation:aparecer .7s .15s ease both}.cifras{display:flex;flex-wrap:wrap;gap:40px;margin-top:64px;padding-top:28px;border-top:1px solid var(--linea)}.cifra__numero{display:block;font-family:var(--mono);font-size:2.25rem;font-weight:500;line-height:1;letter-spacing:-.04em;color:var(--acento)}.cifra__texto{font-size:.875rem;color:var(--texto-suave)}.seccion{padding:96px 0;border-top:1px solid var(--linea)}.seccion--alt{background:var(--fondo-alt)}.seccion__cabecera{margin-bottom:48px;max-width:60ch}.seccion__etiqueta{font-size:.8125rem;text-transform:uppercase;letter-spacing:.12em;color:var(--texto-suave);margin-bottom:12px}.seccion__titulo{font-family:var(--titulos);font-weight:600;font-size:clamp(1.875rem, 4vw, 2.75rem);line-height:1.1;letter-spacing:-.035em;color:var(--texto)}.seccion__texto{margin-top:14px;color:var(--texto-suave)}.ciclos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.tarjeta-hover{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:170px;padding:28px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);transition:transform .3s ease,box-shadow .3s ease,border-color .3s}.tarjeta-hover:hover{transform:translateY(-6px);border-color:var(--acento);box-shadow:0 16px 32px -14px rgba(0,0,0,.5)}.tarjeta-hover:has(:focus-visible){transform:translateY(-6px);border-color:var(--acento);box-shadow:0 16px 32px -14px rgba(0,0,0,.5)}.tarjeta__numero{margin-bottom:12px;font-family:var(--mono);font-size:2.5rem;font-weight:500;line-height:1;letter-spacing:-.04em;color:var(--acento)}.tarjeta__estado{position:absolute;top:28px;right:28px;padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:500;background:var(--acento-suave);color:var(--acento)}.titulot{margin-top:auto;font-size:1.375rem;color:var(--texto)}.parrafotarjeta{margin-top:6px;font-size:.875rem;color:var(--texto-suave)}.tarjeta__abrir{display:inline-flex;align-items:center;gap:12px;padding:0;border:0;background:0 0;font:inherit;color:inherit;text-align:left;cursor:pointer}.tarjeta__abrir[aria-expanded=false]::after{content:"";position:absolute;inset:0}.tarjeta__flecha{flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s ease;opacity:.6}.tarjeta__abrir[aria-expanded=true] .tarjeta__flecha{transform:translateY(2px) rotate(-135deg)}.tarjeta-hover:hover .tarjeta__flecha{opacity:1}.tarjeta-hover--activo{border-color:color-mix(in srgb,var(--acento) 40%,var(--linea))}.tarjeta-hover--activo:hover{transform:none;box-shadow:none;border-color:color-mix(in srgb,var(--acento) 40%,var(--linea))}.tarjeta-hover--activo:has(:focus-visible){transform:none;box-shadow:none;border-color:color-mix(in srgb,var(--acento) 40%,var(--linea))}@media (min-width:861px){.tarjeta-hover--activo{grid-column:span 2;grid-row:span 2}}@media (max-width:860px){.tarjeta-hover--activo{grid-column:1/-1}}@media (min-width:561px){.tarjeta-hover--activo{order:-1}}.tarjeta__cursos{display:grid;margin-top:18px;border-top:1px solid var(--linea)}.tarjeta__cursos[hidden]{display:none}.tarjeta__cursos .curso{justify-content:flex-start;min-height:48px;padding:12px 4px;font-size:1rem}.tarjeta__cursos .curso>span:first-child{flex:1}.curso__estado{display:block;font-size:.75rem;line-height:1.4;color:var(--texto-tenue)}.curso{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--linea);color:var(--texto);text-decoration:none;font-size:.9375rem}.curso:last-child{border-bottom:none}.curso::after{content:"→";transition:transform .2s}.curso:hover{color:var(--acento)}.curso:hover::after{transform:translateX(4px)}.tarjeta-hover--pronto{background:0 0;border-style:dashed}.tarjeta-hover--pronto:hover{transform:none;box-shadow:none;border-color:var(--linea)}.tarjeta-hover--pronto .tarjeta__numero{color:var(--texto-tenue)}.tarjeta-hover--pronto .tarjeta__estado,.tarjeta__estado--pronto{background:var(--fondo-alt);color:var(--texto-suave)}.tarjeta-hover--pronto .titulot{color:var(--texto-suave)}.tarjeta__mascota{position:absolute;top:calc(28px + 8px + 1.2rem + 6.8px);right:22px;height:80px;width:auto;filter:drop-shadow(0 0 1px color-mix(in srgb, var(--acento) 45%, transparent))}.tarjeta__mascota~.titulot{padding-right:70px}.tarjeta__mascota~.tarjeta__cursos{margin-top:24px}@media (scripting:none){.tarjeta__cursos[hidden]{display:grid}.tarjeta__abrir[aria-expanded=false]::after{content:none}.tarjeta__abrir{display:none}.tarjeta__titulo-sinjs[hidden]{display:inline}.tarjeta-hover--activo{grid-row:auto}}.laboratorio{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}.laboratorio>*{min-width:0}.laboratorio .seccion__texto{margin-bottom:28px}.pasos{margin:0;padding:0;list-style:none;counter-reset:paso}.pasos li{position:relative;padding:16px 0 16px 48px;border-bottom:1px solid var(--linea);color:var(--texto-suave);counter-increment:paso}.pasos li:first-child{border-top:1px solid var(--linea)}.pasos li::before{content:"0" counter(paso);position:absolute;left:0;top:13px;font-family:var(--mono);font-size:1.25rem;color:var(--acento)}.demo{padding:32px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);transition:background-color .3s}.demo__titulo{font-family:var(--titulos);font-weight:600;font-size:1.875rem;letter-spacing:-.035em;color:var(--texto)}.demo__titulo:focus{outline:0}.demo__texto{margin-top:12px;color:var(--texto-suave)}.demo__texto img{display:block;margin-top:16px;border:1px solid var(--linea);border-radius:10px}.demo__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.demo__codigo{margin-top:14px;background:#1e1e1e;border:1px solid var(--linea);border-radius:10px;overflow:hidden}.demo__archivo{display:block;padding:7px 14px;background:#252526;color:#ccc;font-size:.75rem}.demo__codigo pre{margin:0;padding:12px 14px;overflow-x:auto;color:#d4d4d4;font-family:Consolas,"Cascadia Code",ui-monospace,monospace;font-size:.78125rem;line-height:1.55}.pie{border-top:1px solid var(--linea);padding:28px 0;font-size:.875rem;color:var(--texto-suave)}.pie__interior{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}#contenedor{max-width:960px;margin:0 auto;padding:64px 24px 96px}#titulop{font-family:var(--titulos);font-weight:600;font-size:clamp(2.25rem, 5.2vw, 3.5rem);line-height:1.05;letter-spacing:-.04em;color:var(--texto);overflow-wrap:break-word}.subtitulo{margin:10px 0 36px;font-size:1.125rem;font-weight:400;color:var(--texto-suave)}.cartel-marco{container-type:inline-size}.cartel{--cartel-luz:var(--acento);--cartel-luz-suave:var(--acento-suave);--cartel-brillo:14%;--cartel-plano:linear-gradient(var(--linea) 1px, transparent 1px),linear-gradient(90deg, var(--linea) 1px, transparent 1px);position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:48px;padding:44px 48px 36px;background:var(--fondo-alt);border:1px solid var(--linea);border-radius:var(--radio)}.cartel--pronto{margin-top:8px;border-style:dashed;border-color:var(--linea-campo)}.cartel--error{--cartel-luz:var(--rojo);--cartel-luz-suave:color-mix(in srgb, var(--rojo) 14%, var(--fondo-alt));--cartel-brillo:22%}.cartel__escena{position:relative}.cartel__escena::after,.cartel__escena::before{content:"";position:absolute;inset:-90px -110px;z-index:-1;pointer-events:none}.cartel__escena::before{background-image:var(--cartel-plano);background-size:24px 24px;background-position:center;-webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent);mask-image:radial-gradient(closest-side,#000 25%,transparent)}.cartel__escena::after{inset:-40px -60px;background:radial-gradient(closest-side,color-mix(in srgb,var(--cartel-luz) 10%,transparent),transparent)}.cartel__mascota{display:block;height:220px;width:auto;filter:drop-shadow(0 0 1px color-mix(in srgb, var(--cartel-luz) 55%, transparent)) drop-shadow(0 14px 36px color-mix(in srgb, var(--cartel-luz) var(--cartel-brillo), transparent))}.cartel__estado{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:4px 12px 4px 10px;border-radius:999px;font-size:.75rem;font-weight:500;background:var(--cartel-luz-suave);color:var(--cartel-luz)}.cartel__estado::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.cartel__titulo{font-family:var(--titulos);font-size:clamp(1.625rem, 3.4vw, 2.125rem);line-height:1.1;letter-spacing:-.035em;color:var(--texto);text-wrap:balance}.cartel__texto{margin-top:12px;max-width:46ch;color:var(--texto-suave);text-wrap:pretty}.cartel__texto strong{color:var(--texto);font-weight:500}.cartel .portada__acciones{margin-top:28px}.cartel__progreso{max-width:320px;height:6px;margin-top:16px;border-radius:999px;background:var(--linea);overflow:hidden}.cartel__progreso>span{display:block;height:100%;border-radius:inherit;background:var(--cartel-luz)}.cartel__pie{grid-column:1/-1;margin-top:40px;padding-top:28px;border-top:1px dashed var(--linea)}.cartel__pie .seccion__etiqueta{margin-bottom:18px;font-weight:500;line-height:1.6}.cartel__lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px;margin:0;padding:0;list-style:none}.cartel__lista a,.cartel__lista li{display:flex;align-items:flex-start;gap:12px}.cartel__lista a{text-decoration:none;border-radius:10px}.cartel__lista a:hover strong{color:var(--cartel-luz)}.cartel__icono{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--cartel-luz-suave);color:var(--cartel-luz);font-family:var(--mono);font-size:.875rem;font-weight:500}.cartel__icono svg{width:18px;height:18px}.cartel__lista strong{display:block;font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--texto);transition:color .2s}.cartel__detalle{display:block;margin-top:2px;font-size:.875rem;line-height:1.45;color:var(--texto-suave)}.cartel__nota{margin-top:16px;font-size:.875rem;color:var(--texto-suave)}@container (max-width:700px){.cartel{column-gap:28px;padding:36px 32px 32px}.cartel__mascota{height:180px}}@container (max-width:520px){.cartel{grid-template-columns:1fr;row-gap:24px;padding:32px 22px 28px}.cartel__mascota{height:170px}.cartel__pie{margin-top:12px}}.tema__cierre:not(:empty){margin-top:40px}.no-encontrada{display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - var(--alto-barra));max-width:960px;margin:0 auto;padding:48px 24px}.aula{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;align-items:start;max-width:var(--ancho);margin:0 auto;padding:40px 24px 24px}.aula__indice{position:sticky;top:calc(var(--alto-barra) + 24px);max-height:calc(100dvh - var(--alto-barra) - 48px);overflow-y:auto;padding-right:6px;padding-left:4px;margin-left:-4px;scroll-padding-block:32px}.aula__indice a:focus-visible{outline-offset:-2px}.aula__nombre{font-family:var(--titulos);font-weight:600;font-size:1.3125rem;line-height:1.2;letter-spacing:-.02em;color:var(--texto);margin-bottom:16px}.aula__cabecera{display:flex;align-items:center;gap:12px;margin-bottom:16px}.aula__cabecera .seccion__etiqueta{margin-bottom:4px}.aula__cabecera .aula__nombre{margin-bottom:0}.aula__mascota{flex:none;height:84px;width:auto;filter:drop-shadow(0 0 1px color-mix(in srgb, var(--acento) 50%, transparent))}.aula__buscar{width:100%;padding:9px 14px;margin-bottom:20px;background:var(--superficie);border:1px solid var(--linea-campo);border-radius:10px;font-family:var(--sans);font-size:.875rem;color:var(--texto)}.aula__buscar::placeholder{color:var(--texto-suave)}.aula__buscar:focus{outline:0;border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 25%,transparent)}.aula__sinresultados{padding:10px;font-size:.8125rem;line-height:1.5;color:var(--texto-suave)}.aula__sinresultados strong{color:var(--texto)}.indice__modulo{margin-bottom:22px}.indice__lista{list-style:none;margin:0;padding:0}.indice__titulo{display:flex;align-items:center;gap:8px;margin:0 0 8px 10px;font-size:.75rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-suave)}.indice__contador{margin-left:auto;font-size:.6875rem;letter-spacing:0}.indice__numero{flex:none;min-width:1rem;font-family:var(--mono);font-size:.75rem;color:var(--texto-tenue)}.indice__tema--activo .indice__numero{color:var(--acento)}a.indice__tema:hover .indice__numero{color:var(--texto-suave)}.indice__tema{display:flex;align-items:baseline;gap:8px;padding:7px 10px;border-left:2px solid transparent;border-radius:0;font-size:.875rem;line-height:1.35;color:var(--texto-suave);text-decoration:none;transition:background-color .15s,color .15s}a.indice__tema:hover{background:var(--fondo-alt);color:var(--texto)}.indice__tema--activo{background:var(--acento-suave);border-left-color:var(--acento);color:var(--acento)}.indice__tema--pronto{color:var(--texto-tenue);cursor:default}.indice__pronto{flex:none;margin-left:auto;padding-left:6px;font-family:var(--mono);font-size:.6875rem;color:var(--texto-tenue)}.indice__marca{flex:none;margin-left:auto;padding-left:6px;font-size:.75rem;color:var(--acento)}@media (forced-colors:active){a.indice__tema{forced-color-adjust:none;color:LinkText;background:Canvas;border-left-color:Canvas}a.indice__tema .indice__numero{color:CanvasText}a.indice__tema--activo{background:Highlight;color:HighlightText;border-left-color:Highlight}a.indice__tema--activo .indice__numero{color:HighlightText}a.indice__tema .indice__marca{color:inherit}a.indice__tema:focus-visible{outline-color:CanvasText}a.indice__tema--activo:focus-visible{outline-color:HighlightText}a.indice__tema:hover{background:Canvas;color:LinkText;text-decoration:underline}a.indice__tema--activo:hover{background:Highlight;color:HighlightText}.indice__tema--pronto{forced-color-adjust:none;color:GrayText;background:Canvas;border-left-color:Canvas}.indice__tema--pronto .indice__numero,.indice__tema--pronto .indice__pronto{color:inherit}}.aula__panel{min-width:0;padding-bottom:72px}.tema__titulo{font-family:var(--titulos);font-weight:600;font-size:clamp(1.75rem, 3.4vw, 2.5rem);line-height:1.1;letter-spacing:-.03em;color:var(--texto)}.tema__titulo:focus{outline:0}.aula__aviso{padding:48px 0;color:var(--texto-suave);line-height:1.7}.aula__aviso strong{overflow-wrap:anywhere}.con-cabeza{display:flex;align-items:center;gap:12px}.con-cabeza[hidden]{display:none}.con-cabeza>img{flex:none;height:40px;width:auto}.consola__pantalla .con-cabeza>img{height:32px}.tema__pie{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid var(--linea)}.boton--hecho{background:var(--acento-suave);color:var(--acento)}.boton--hecho:hover{background:var(--acento-suave)}.tema__navegacion{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}.tema__salto{padding:8px 14px;border:1px solid var(--linea);border-radius:999px;font-size:.8125rem;color:var(--texto-suave);text-decoration:none}.tema__salto:hover{border-color:var(--acento);color:var(--acento)}.tema__salto--siguiente{color:var(--acento)}.tema__reaccion{display:flex;align-items:center;gap:12px;font-size:.875rem;line-height:1.45;color:var(--texto-suave)}.tema__reaccion>*{animation:aparecer .35s ease both}.tema__reaccion img{flex:none;height:88px;width:auto;filter:drop-shadow(0 0 1px color-mix(in srgb, var(--acento) 50%, transparent))}.tema__reaccion strong{color:var(--texto);font-weight:500}.aula__menu{display:none;position:fixed;right:20px;bottom:20px;z-index:20;padding:12px 20px;background:var(--acento);border:0;border-radius:999px;font-family:var(--sans);font-size:.875rem;font-weight:500;color:var(--sobre-acento);cursor:pointer} /* inicio: pestañas */ /* PESTAÑAS (tabs) Este trozo es el que se muestra en el visor "¿Cómo hice esto?": el JS lee este archivo y recorta justo lo que hay entre "inicio: pestañas" y "fin: pestañas". Si mueves estos dos comentarios, el visor cambia. */ .contenedor-pestanas { border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; } /* overflow: hidden recorta los botones en las esquinas redondeadas */ .botones-pestanas { display: flex; flex-wrap: wrap; background: var(--fondo-alt); border-bottom: 1px solid var(--linea); } /* La fila de botones */ .boton-tab { flex: 1 1 auto; /* crecer / encoger / tamaño base. Los tres botones se reparten el ancho por igual */ padding: 12px 18px; background: transparent; /* Sin relleno: el fondo lo pone el contenedor */ border: none; /* Quita el borde de fábrica del