/* Portfolio de KrakenPez. Es una muestra para presentar en persona: no explica nada, solo deja ver y probar los
   overlays de cada proyecto, de a uno por vez. La marca sale de la hoja del logo: azul noche de fondo y la K
   blanca. El degradé violeta y celeste del logo es el único acento: marca en qué proyecto se está. Los títulos van
   en itálica y los botones cortados en diagonal, por la inclinación de la K. La letra es Josefin Sans. Fondo oscuro
   porque lo que se muestra son overlays transparentes pensados para ir encima de un juego. */
:root{
 --noche:#0a0920;--fondo-2:#1b1848;--linea:#2e2a66;--barra:#2a2080;--accion:#5540e0;
 --texto:#f3f0ff;--tenue:#b9b4dc;--violeta:#b65cff;--celeste:#3fd8ff;
 --corte:10px;--borde:clamp(16px,4vw,40px);
 /* El ancho de todo sale de la escena: tan grande como entre en la pantalla con sus botones a la vista. */
 --ancho:min(1240px,max(560px,calc(68vh * 16 / 9)));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--noche);color:var(--texto);font:400 17px/1.5 'Josefin Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h2,p,ul{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--celeste);outline-offset:3px}
.saltar{position:absolute;left:-999px;top:8px;background:var(--texto);color:var(--noche);padding:10px 16px;z-index:20}
.saltar:focus{left:8px}

/* —— Arriba: la K, "Proyectos" y, al medio, los nombres para pasar de un proyecto a otro. La barra va en un
   violeta más claro que el fondo, para que se distinga del resto de la página. —— */
.tope{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0 24px;padding:6px var(--borde);background:var(--barra);border-bottom:1px solid #4a3fb0}
.marca{display:flex;align-items:center;gap:12px;min-height:48px;text-decoration:none;font:italic 700 20px/1 'Josefin Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.k{width:34px;height:33px;fill:var(--texto)}
.tope nav{display:flex;justify-content:center;gap:4px 34px}
.tope nav a{position:relative;display:flex;align-items:center;min-height:48px;text-decoration:none;color:#cfcaf0;font-weight:700;font-size:19px}
.tope nav a:hover,.tope nav a[aria-current]{color:var(--texto)}
.tope nav a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:4px;background:linear-gradient(90deg,var(--celeste),var(--violeta))}

/* —— Cada proyecto —— */
.proyecto{max-width:calc(var(--ancho) + 2 * var(--borde));margin:0 auto;padding:clamp(14px,2.4vh,26px) var(--borde) clamp(24px,4vh,48px)}
.proyecto-cabeza{display:flex;align-items:center;gap:14px}
.logo{width:44px;height:44px;object-fit:contain;border-radius:9px}
svg.logo{border-radius:0}
h2{font:italic 700 clamp(28px,3.6vw,42px)/1 'Josefin Sans',system-ui,sans-serif;text-transform:uppercase}
.evento{margin-left:auto;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}

/* El visor: las piezas arriba, la escena con el overlay andando y, abajo, los botones para probarlo. */
.visor{display:flex;flex-direction:column;margin-top:10px}
/* Las piezas son una tira de pestañas pegada arriba de la escena, con su propio fondo: así se distinguen de los
   botones de abajo, que son los que disparan algo. La pieza elegida queda en el violeta de la barra de arriba, con
   una raya celeste. */
.barra{display:flex;align-items:stretch;justify-content:space-between;background:#16133f;border:1px solid var(--linea);border-bottom:0;border-radius:8px 8px 0 0;overflow:hidden}
.piezas{display:flex;flex-wrap:wrap}
.barra .boton{min-height:48px;padding:0 10px;font-size:15px;border-bottom:0}
.barra .boton:hover{background:rgba(255,255,255,.07)}
.barra .boton[aria-selected="true"]{background:var(--barra);color:#fff;box-shadow:inset 0 3px 0 var(--celeste)}
.barra .boton:focus-visible{outline-offset:-3px}
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0;border:0;border-bottom:2px solid transparent;cursor:pointer;background:none;color:var(--tenue);
 font:700 16px/1 'Josefin Sans',system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;transition:background .15s,color .15s}
.boton:hover{color:var(--texto)}
.boton.grande{flex:none;padding:0 14px}
/* Los que disparan algo: violeta fuerte, cortados en diagonal y con el triangulito de "reproducir". */
.acciones .boton,.estado .boton{gap:9px;padding:0 22px 0 20px;border-bottom:0;color:#fff;background:var(--accion);clip-path:polygon(var(--corte) 0,100% 0,calc(100% - var(--corte)) 100%,0 100%)}
.acciones .boton::before{content:'';border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.acciones .boton:hover,.estado .boton:hover{background:#6a52f0}
/* (el recorte se come el contorno del foco: en estos lo reemplaza un aro por dentro) */
.acciones .boton:focus-visible,.estado .boton:focus-visible{outline:0;box-shadow:inset 0 0 0 3px #fff}
/* Los que eligen cómo se ve: un selector de casillas pegadas, con su rótulo; la elegida queda en blanco. */
.variantes{gap:7px 0}
.variantes .boton{padding:0 16px;border:1px solid var(--linea);border-left-width:0;color:var(--tenue);font-size:15px}
.variantes .rotulo+.boton{border-left-width:1px;border-radius:6px 0 0 6px}
.variantes .boton:last-child{border-radius:0 6px 6px 0}
.variantes .boton:hover{background:rgba(255,255,255,.07);color:var(--texto)}
.variantes .boton[aria-pressed="true"]{background:var(--texto);border-color:var(--texto);color:var(--noche)}
.variantes .boton:focus-visible{outline-offset:-3px}
.escena{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--linea);border-radius:0 0 8px 8px;
 /* un gris azulado neutro, como una escena de OBS apagada: los overlays son transparentes */
 background:linear-gradient(160deg,#232638,#14151f)}
.escena iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none;transition:opacity .2s}
.escena[data-estado="cargando"] iframe{opacity:0}
.escena .estado{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;text-align:center;color:var(--tenue)}
.escena[data-estado="cargando"] .estado.cargando,.escena[data-estado="fallo"] .estado.fallo{display:flex}
/* Abajo de la escena: cada grupo de botones con su rótulo arriba ("Prueba de alertas", "Diseño"…). */
.ficha{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 40px;min-height:44px;margin-top:14px}
.grupo{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.grupo .rotulo{flex:0 0 100%;margin-bottom:-1px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.aviso{color:var(--tenue)}
/* A pantalla completa, para presentar: la escena ocupa todo y los botones quedan a mano. */
.visor:fullscreen{margin:0;padding:10px 18px 16px;background:var(--noche)}
.visor:fullscreen .escena{flex:1;min-height:0;aspect-ratio:auto}
.visor:fullscreen .barra,.visor:fullscreen .escena{border-radius:0}

/* El panel de cada proyecto, en capturas (necesita el servidor del reloj: acá no anda): cómo se ve en la
   computadora y, al lado, desde el celular, cada una con su título. Las dos capturas quedan del mismo alto. */
.panel-foto{display:grid;gap:12px clamp(10px,1.6vw,20px);margin-top:clamp(32px,6vh,64px)}
.panel-foto.con-celular{grid-template-columns:1440fr 416fr;grid-template-rows:auto auto;grid-auto-flow:column}
.panel-foto h3{align-self:end;margin:0;font:italic 700 clamp(20px,2.2vw,28px)/1.05 'Josefin Sans',system-ui,sans-serif;text-transform:uppercase}
.panel-foto a{display:block;border-radius:8px}
.panel-foto img{width:100%;border:1px solid var(--linea);border-radius:8px}

/* —— Abajo: dónde encontrarme —— */
.contacto{margin-top:clamp(24px,5vh,56px);padding:10px var(--borde) 22px;border-top:1px solid var(--linea)}
.contacto ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px}
.contacto li a{display:inline-flex;align-items:center;min-height:44px;color:var(--tenue);font-size:15px;text-decoration:none}
.contacto li a:hover{color:var(--texto);text-decoration:underline}

/* —— Pantallas angostas —— */
@media (max-width:700px){
 /* en el celular los nombres pasan abajo de la marca, centrados */
 .tope{grid-template-columns:1fr}
 .marca{justify-content:center}
 .barra{flex-direction:column}
 .boton.grande{justify-content:flex-start;padding:0 10px;border-top:1px solid var(--linea)}
 .evento{display:none}
}
@media (max-width:520px){
 body{font-size:16px}
 .tope nav{gap:4px 18px}
 .acciones .boton{padding:0 16px 0 14px;font-size:15px}
 .variantes .boton{padding:0 12px}
 .panel-foto.con-celular{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
 .panel-foto.con-celular a:last-child{max-width:60%}
 .panel-foto.con-celular h3:nth-of-type(2){margin-top:18px}
}
@media (prefers-reduced-motion:reduce){.boton,.escena iframe{transition:none}}