/* Página de proyecto. Usa los tokens y las piezas de estilo.css (flotante, marca fija, pie, líneas). */

/* cabecera: el nombre enorme a la izquierda (como el titular en esquinas de la portada) */
.caso-cab{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--gutter) 22px}
.caso-cab__nombre{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.98;font-size:clamp(64px,13vw,240px);max-width:11ch;padding:.12em .06em .08em;margin-left:-.06em;width:fit-content}   /* el relleno lateral deja entera la letra que sobresale (el fondo solo se pinta adentro de la caja) */
/* el nombre es una ventana: las letras se rellenan con el sitio en gris oscuro (_scripts/rellenos.py);
   con el mouse encima, el cursor lo muestra en color. Entra abriéndose desde la línea del medio */
html.js .caso-cab__nombre{color:transparent;-webkit-text-fill-color:transparent;background:var(--negro) var(--relleno) 50% 0/cover no-repeat;-webkit-background-clip:text;background-clip:text;animation:abre-nombre 1s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes abre-nombre{from{clip-path:inset(48% -5% 52% -5%)}to{clip-path:inset(-10% -5% -10% -5%)}}
.caso-cab__chips{display:flex;flex-wrap:wrap;gap:4px;margin:28px 0 8svh}
.caso-cab__chips .chip{background:var(--negro)}
.caso-cab__datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-top:12px;border-top:1px solid currentColor}
.caso-cab__datos span{display:block}
.caso-cab__datos p>span:first-child{color:var(--plata);margin-bottom:4px}
.caso-cab__datos a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.caso-cab__datos{grid-template-columns:1fr 1fr}.caso-cab__nombre{font-size:17vw}}

/* portada del sitio: se abre como la ventana de la portada del portfolio, de una línea a la pantalla */
.caso-portada{background:var(--carbon);height:160svh;position:relative}
.caso-portada__ventana{position:sticky;top:0;height:100svh;overflow:hidden;clip-path:inset(46% 26% 46% 26%);will-change:clip-path}
.caso-portada__ventana img{width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* el proyecto: una frase grande y dos columnas angostas en mayúscula */
.caso{padding:22svh var(--gutter) 16svh}
.caso__intro{max-width:17em;font-size:clamp(30px,3.8vw,62px);line-height:1.05;letter-spacing:-.025em;font-weight:500;text-indent:3.2em}
.caso__intro .linea:first-child>span{text-indent:3.2em}
.caso__bloques{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:clamp(24px,4vw,64px);margin:16svh 0 0 calc(50% + 2vw)}
.caso__bloque .etiqueta{margin-bottom:14px}
.caso__texto{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;font-size:clamp(18px,1.5vw,24px)}
@media (max-width:900px){.caso__bloques{grid-template-columns:1fr;margin-left:0}}

/* galería */
.caso-galeria{padding:0 var(--gutter) 18svh;display:flex;flex-direction:column;gap:12svh}
.g{margin:0}
.g__imgs{display:grid;gap:16px}
.g img{width:100%;border-radius:2px}
.g__abrir{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:2px}
.g--celulares .g__abrir{border-radius:18px}
.g figcaption{margin-top:12px;color:var(--plata)}
.g--par .g__imgs{grid-template-columns:1fr 1fr;align-items:start}
.g--afiches .g__imgs{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.g--celulares{background:var(--carbon);margin:0 calc(var(--gutter) * -1);padding:12svh var(--gutter)}
.g--celulares .g__imgs{grid-template-columns:repeat(auto-fit,minmax(140px,250px));justify-content:center;max-width:1100px;margin:0 auto;gap:clamp(12px,2vw,28px)}   /* dos o cuatro pantallas, siempre centradas */
.g--celulares img{border-radius:18px;box-shadow:0 0 0 1px #2c2c2c}
.g--celulares figcaption{text-align:center;margin-top:28px}
@media (max-width:760px){.g--par .g__imgs{grid-template-columns:1fr}.g--afiches .g__imgs{grid-template-columns:repeat(2,minmax(0,1fr))}.g--celulares .g__imgs{grid-template-columns:1fr 1fr}}

/* siguiente proyecto */
.caso-sig{background:var(--carbon);color:var(--papel)}
.caso-sig__enlace{display:flex;flex-direction:column;align-items:center;gap:20px;padding:22svh var(--gutter);text-align:center}
.caso-sig__nombre{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:1;font-size:clamp(56px,11vw,200px);transition:color .3s}
.caso-sig__enlace:hover .caso-sig__nombre{color:var(--rojo)}

/* el visor: la imagen en grande sobre negro, se abre y cambia con un parpadeo (galeria.js) */
.visor{position:fixed;inset:0;z-index:57;display:grid;grid-template-rows:1fr auto;padding:72px var(--gutter) 18px;background:rgba(11,11,11,.96);color:var(--papel);opacity:0;transition:opacity .35s}
.visor[hidden]{display:none}
.visor.abierto{opacity:1}
.visor__marco{min-height:0;display:flex;align-items:center;justify-content:center;clip-path:inset(0 0 0 0);transition:clip-path .26s cubic-bezier(.7,0,.3,1)}
.visor__marco.cerrado{clip-path:inset(50% 0 50% 0)}
.visor__img{max-width:100%;max-height:calc(100svh - 72px - 18px - 56px);width:auto;height:auto;object-fit:contain;border-radius:2px}
.visor__pie{display:flex;gap:20px;padding-top:12px;margin-top:14px;border-top:1px solid #2c2c2c}
.visor__n{font-variant-numeric:tabular-nums}
.visor__cerrar,.visor__ant,.visor__sig{position:absolute;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.visor__cerrar{top:24px;right:var(--gutter);font-weight:600;font-size:12px;letter-spacing:.04em}
.visor__ant,.visor__sig{top:50%;transform:translateY(-50%);font-size:28px;padding:16px}
.visor__ant{left:calc(var(--gutter) - 16px)}.visor__sig{right:calc(var(--gutter) - 16px)}
.visor__cerrar:hover,.visor__ant:hover,.visor__sig:hover{color:var(--rojo)}
@media (prefers-reduced-motion:reduce){.visor,.visor__marco{transition:none}html.js .caso-cab__nombre{animation:none}}
@media (prefers-reduced-motion:reduce){.caso-portada{height:auto}.caso-portada__ventana{position:relative;clip-path:none}}