/* lucashermida.com · páginas de caso (/casos/<slug>), 28/9/2026.
   Se apoya en estilo.css (paleta, cabecera, botones, chips, pie) y suma lo propio. */

.pagina-caso .cabecera{background:rgba(12,14,17,.72);border-color:var(--linea);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* La apertura: título, quién, y la pantalla del trabajo */
.caso-hero{position:relative;padding:calc(var(--cab) + clamp(28px,5vw,64px)) 0 clamp(56px,8vw,96px);
  background:radial-gradient(110% 70% at 70% 0%,#1b2027 0%,#111419 55%,var(--fondo) 100%)}
.caso-volver{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14.5px;text-decoration:none;color:var(--crema-2);transition:color .3s,gap .3s}
.caso-volver:hover{color:var(--crema);gap:11px}
.caso-rubro-grande{margin-top:clamp(20px,3vw,36px);font-size:15px;color:var(--oro)}
.caso-titulo{margin-top:14px;max-width:22ch;font-size:clamp(2.1rem,4.6vw,4rem);text-wrap:balance}
.caso-quien{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:15.5px;color:var(--crema-2)}
.caso-quien a,.caso-privado{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:var(--oro);text-decoration:none}
.caso-quien a:hover{text-decoration:underline;text-underline-offset:5px}
.caso-privado{color:var(--crema-3)}

.caso-pantalla{position:relative;margin:clamp(32px,5vw,56px) 0 0;border:1px solid var(--linea-2);border-radius:18px;overflow:hidden;background:#0f1215;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4),0 -1px 0 0 rgba(214,180,124,.25) inset}
.caso-pantalla::before{content:"";position:absolute;inset:0 0 auto;height:2px;z-index:2;background:linear-gradient(90deg,var(--acento),rgba(214,180,124,.6) 40%,transparent)}
.caso-pantalla .ventana-barra{height:36px}
.caso-pantalla img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.caso-diagrama{display:flex;flex-direction:column;align-items:center;padding:clamp(20px,4vw,48px) clamp(16px,4vw,64px) 20px;background:radial-gradient(90% 90% at 50% 40%,#171b21,#0f1215)}
.caso-diagrama svg{width:100%;max-width:760px;height:auto}
.caso-diagrama-nota{margin-top:12px;font-size:13px;color:var(--crema-3)}

/* 5/10/2026 · En el celular: tres pantallas reales de la web. En computadora, en fila; en el celular se deslizan
   de costado dentro de su franja (la página no se mueve a los lados). */
.caso-celulares{margin-top:clamp(36px,5vw,64px)}
.caso-celulares h2{font-family:Inter,sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.caso-cels{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.6vw,36px);max-width:900px}
.caso-cel{border:5px solid #23262c;border-radius:clamp(18px,2.4vw,30px);overflow:hidden;background:#000;
  box-shadow:0 34px 70px -28px rgba(0,0,0,.85),0 0 0 1px rgba(214,180,124,.12)}
.caso-cel img{display:block;width:100%;height:auto}
@media (max-width:700px){
  .caso-cels{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:4px var(--gutter) 18px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .caso-cels::-webkit-scrollbar{display:none}
  .caso-cel{scroll-snap-align:start}
}

/* El cuerpo: el punto de partida y lo que se construyó */
.caso-cuerpo-seccion{padding:clamp(64px,9vw,128px) 0;background:var(--fondo)}
.caso-grilla{display:grid;gap:48px;grid-template-columns:1fr}
@media (min-width:960px){.caso-grilla{grid-template-columns:5fr 7fr;gap:72px}.caso-partida{position:sticky;top:calc(var(--cab) + 32px);align-self:start}}
.caso-partida h2,.caso-hecho h2{font-size:clamp(1.3rem,2vw,1.6rem)}
.caso-partida p{margin-top:18px;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.7;color:var(--crema-2)}
.caso-hecho ol{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--linea)}
.caso-hecho ol > li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--linea)}
.caso-n{font-family:Sora,sans-serif;font-weight:300;font-size:1.05rem;line-height:1.6;color:var(--oro)}
.caso-hecho ol > li p{color:var(--crema-2);line-height:1.65}
.caso-stack-titulo{margin-top:44px}
.caso-hecho .chips{margin-top:16px}
.caso-ver{margin-top:28px}

/* Invitación, sobre la vidriera encendida */
.caso-cta{position:relative;overflow:hidden;padding:clamp(96px,12vw,168px) 0;background:var(--fondo)}
.caso-cta::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,12,14,.96) 0%,rgba(10,12,14,.82) 40%,rgba(10,12,14,.25) 75%,rgba(10,12,14,.1) 100%)}
.caso-cta .contacto-fondo{object-position:70% 50%}
.caso-cta-in{position:relative;z-index:2}
.caso-cta .bajada{max-width:44ch}

/* Trabajo anterior y siguiente */
.caso-otros{border-top:1px solid var(--linea);background:var(--fondo-2)}
.caso-otros-in{display:grid;grid-template-columns:1fr 1fr;gap:0}
.caso-otro{display:flex;flex-direction:column;gap:8px;min-height:44px;padding:clamp(24px,4vw,44px) 0;text-decoration:none;color:var(--crema);transition:color .3s}
.caso-otro span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--crema-3)}
.caso-otro strong{font-family:Sora,sans-serif;font-weight:500;font-size:clamp(1.05rem,2vw,1.4rem);letter-spacing:-.015em}
.caso-otro:hover strong{color:var(--oro)}
.caso-otro-sig{align-items:flex-end;text-align:right;padding-left:16px;border-left:1px solid var(--linea)}
.caso-otros-in > a:first-child{padding-right:16px}

@media (max-width:760px){
  .pagina-caso .cabecera{background:rgba(12,14,17,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  .caso-cta::before{background:linear-gradient(180deg,rgba(10,12,14,.92),rgba(10,12,14,.8))}
  .caso-cta .acciones{display:grid;grid-template-columns:1fr}
  .caso-hecho ol > li{grid-template-columns:34px 1fr}
}