/* Portfolio de CutFish. La marca sale de la hoja del logo de KRAKENPEZ: azul noche de fondo, la K blanca y su
   borde violeta y celeste. Ese degradé es el único acento y va solo en la K y en el corte que abre cada sección.
   El gesto que se repite es la inclinación de la K: los títulos van en itálica y los botones cortados en diagonal.
   La letra es Josefin Sans, la misma de overlays.cutfish.app. Fondo oscuro porque lo que se muestra son overlays
   transparentes pensados para ir encima de un juego. */
:root{
 --noche:#0a0920;--fondo:#121034;--fondo-2:#1b1848;--linea:#2e2a66;
 --texto:#f3f0ff;--tenue:#b9b4dc;--violeta:#b65cff;--celeste:#3fd8ff;
 --corte:11px;--ancho:1240px;--borde:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--noche);color:var(--texto);font:400 17px/1.55 'Josefin Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,dl,dd,ul,figure{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 —— */
.tope{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding:10px var(--borde);background:var(--noche);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font-weight:400;letter-spacing:.04em}
.marca b{font-weight:700}
.k{width:34px;height:33px;fill:var(--texto)}
.tope nav{display:flex;flex-wrap:wrap;gap:0 4px}
.tope nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;color:var(--tenue);font-weight:600}
.tope nav a:hover{color:var(--texto)}

/* —— Los botones: cortados en diagonal, como la K. (El recorte se come el contorno del foco: lo reemplaza un
   aro por dentro.) —— */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:0;cursor:pointer;text-decoration:none;
 font:700 16px/1 'Josefin Sans',system-ui,sans-serif;letter-spacing:.02em;color:var(--texto);background:var(--fondo-2);
 clip-path:polygon(var(--corte) 0,100% 0,calc(100% - var(--corte)) 100%,0 100%);transition:background .15s,color .15s}
.boton:hover{background:#2a2670}
.boton.lleno,.boton[aria-pressed="true"],.boton[aria-selected="true"]{background:var(--texto);color:var(--noche)}
.boton.lleno:hover{background:#fff}
.boton:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--celeste)}
.boton.lleno:focus-visible,.boton[aria-pressed="true"]:focus-visible,.boton[aria-selected="true"]:focus-visible{box-shadow:inset 0 0 0 3px #0a63b8}

/* —— Portada —— */
.inicio{max-width:var(--ancho);margin:0 auto;padding:clamp(40px,7vw,96px) var(--borde) clamp(48px,8vw,110px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,5vw,72px)}
h1{font:italic 700 clamp(36px,5.6vw,74px)/1.02 'Josefin Sans',system-ui,sans-serif;letter-spacing:-.01em;text-wrap:balance}
.inicio-texto p{margin-top:22px;max-width:54ch;font-size:clamp(17px,1.5vw,20px);color:var(--tenue)}
.inicio-texto .aclaracion{color:var(--texto);padding-left:16px;border-left:2px solid var(--linea)}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* La K: blanca, con el borde en degradé y su resplandor (el único de la página), como en la hoja del logo. */
.k-grande{width:100%;max-width:470px;justify-self:end;fill:var(--texto);stroke:url(#k-borde);stroke-width:9;stroke-linejoin:round;paint-order:stroke;filter:drop-shadow(0 0 34px rgba(150,80,255,.55))}

/* —— Cada proyecto —— */
.proyecto,.incluye{max-width:var(--ancho);margin:0 auto;padding:clamp(48px,8vw,104px) var(--borde)}
/* El corte que abre la sección: el acento de la marca. */
.proyecto::before,.incluye::before,.contacto::before{content:'';display:block;width:132px;height:10px;margin-bottom:26px;background:linear-gradient(90deg,var(--celeste),var(--violeta));clip-path:polygon(var(--corte) 0,100% 0,calc(100% - var(--corte)) 100%,0 100%)}
.proyecto-cabeza{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:20px clamp(18px,3vw,44px)}
.logo{width:clamp(64px,8vw,96px);height:clamp(64px,8vw,96px);object-fit:contain;border-radius:14px}
.evento{font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
h2{font:italic 700 clamp(40px,7vw,92px)/.95 'Josefin Sans',system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.resumen{max-width:60ch;color:var(--tenue)}

/* El visor: la lista de piezas, la escena con el overlay andando y su ficha. */
.visor{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(16px,2.4vw,32px);margin-top:clamp(28px,4vw,48px);align-items:start}
.al-reves .visor{grid-template-columns:minmax(0,1fr) 230px}
.al-reves .piezas{order:2}
.piezas{display:flex;flex-direction:column;gap:8px}
.piezas .boton{justify-content:flex-start;width:100%;padding:0 22px}
.escena{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--linea);border-radius: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}
.ficha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;margin-top:18px}
.ficha h3{font:italic 700 28px/1.1 'Josefin Sans',system-ui,sans-serif}
.ficha .medida{align-self:center;justify-self:end;font-size:14px;color:var(--tenue);white-space:nowrap}
.ficha .texto{grid-column:1/-1;max-width:70ch;margin-top:14px;color:var(--tenue)}
.grupo{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.grupo .rotulo{flex:0 0 100%;font-weight:700;font-size:14px;color:var(--tenue)}
.grupo .boton{min-height:44px;padding:0 20px;font-size:15px}
.aviso{color:var(--tenue)}

/* El panel de cada proyecto, en capturas (necesita el servidor del reloj: acá no anda). */
.panel-foto{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:clamp(18px,3vw,44px);margin-top:clamp(40px,6vw,72px)}
.al-reves .panel-foto{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.al-reves .panel-foto .fotos{order:2}
.fotos{position:relative}
.fotos a{display:block;border-radius:8px}
.fotos img{width:100%;border:1px solid var(--linea);border-radius:8px}
.fotos .celular{position:absolute;right:-10px;bottom:-22px;width:23%;border-radius:14px;border:3px solid var(--noche);box-shadow:0 18px 40px rgba(0,0,0,.6)}
.panel-foto figcaption{color:var(--tenue);padding-bottom:6px}
.panel-foto figcaption b{display:block;margin-bottom:6px;font:italic 700 28px/1.1 'Josefin Sans',system-ui,sans-serif;color:var(--texto)}

/* —— Qué incluye —— */
.incluye{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px clamp(24px,5vw,80px)}
.incluye::before{grid-column:1/-1;margin-bottom:6px}
.incluye h2{font-size:clamp(34px,4.6vw,60px);position:sticky;top:100px;align-self:start}
.incluye dl>div{padding:20px 0;border-top:1px solid var(--linea)}
.incluye dl>div:first-child{border-top:0;padding-top:0}
.incluye dt{font:italic 700 24px/1.2 'Josefin Sans',system-ui,sans-serif}
.incluye dd{margin-top:6px;color:var(--tenue);max-width:58ch}

/* —— Contacto —— */
.contacto{background:var(--fondo);border-top:1px solid var(--linea);padding:clamp(48px,8vw,96px) max(var(--borde),calc((100vw - var(--ancho))/2 + var(--borde))) clamp(56px,8vw,96px)}
.contacto h2{font-size:clamp(38px,6vw,80px)}
.contacto p{margin-top:14px;color:var(--tenue)}
.contacto ul{display:flex;flex-wrap:wrap;gap:6px 36px;margin-top:22px}
.contacto li a{display:inline-flex;align-items:center;min-height:44px;font:700 clamp(18px,2.2vw,24px)/1.2 'Josefin Sans',system-ui,sans-serif;text-decoration-color:var(--violeta);text-underline-offset:6px}
.contacto li a:hover{text-decoration-color:var(--celeste)}

/* —— Pantallas angostas —— */
@media (max-width:900px){
 .inicio{grid-template-columns:1fr}
 .k-grande{order:-1;max-width:210px;justify-self:start}
 .proyecto-cabeza{grid-template-columns:auto minmax(0,1fr)}
 .resumen{grid-column:1/-1}
 .visor,.al-reves .visor{grid-template-columns:minmax(0,1fr)}
 .al-reves .piezas{order:0}
 .piezas{flex-direction:row;flex-wrap:wrap}
 .piezas .boton{width:auto}
 .ficha{grid-template-columns:minmax(0,1fr)}
 .ficha .medida{justify-self:start}
 .panel-foto,.al-reves .panel-foto{grid-template-columns:minmax(0,1fr)}
 .al-reves .panel-foto .fotos{order:0}
 .fotos .celular{right:6px;bottom:-14px}
 .panel-foto figcaption{margin-top:14px}
 .incluye{grid-template-columns:minmax(0,1fr)}
 .incluye h2{position:static}
}
@media (max-width:520px){
 body{font-size:16px}
 .tope nav a{padding:0 9px}
 .botones .boton{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.boton,.escena iframe{transition:none}}
/* En el celular el encabezado ocupa dos renglones: no se queda pegado arriba. */
@media (max-width:900px){.tope{position:static}html{scroll-padding-top:12px}}