/* @naciceleste — versión 2 (cuadrícula minimal) */
:root{ --ink:#282828; --pad:clamp(16px,4vw,57px); --gap:3px; --tile-ratio:16/9; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:#fff; color:var(--ink); font-family:"Oswald","Arial Narrow",sans-serif; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}

/* ---------- encabezado ---------- */
.top{position:sticky; top:0; z-index:10; background:#fff;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  padding:52px var(--pad) 54px; transition:padding .3s}
.top.compact{padding-top:18px; padding-bottom:20px}
.filters,.profiles{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
.profiles{justify-content:flex-end}
.filters button{appearance:none; border:0; background:none; padding:0; cursor:pointer; font:inherit;
  font-size:15px; text-transform:uppercase; color:var(--ink); transition:font-size .2s, opacity .2s; opacity:.85}
.filters button:hover{opacity:1}
.filters button[aria-pressed="true"]{font-size:19px; font-weight:500; opacity:1}
.profiles a,.profiles span{font-size:15px; text-transform:uppercase; opacity:.85}
.profiles a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}
.profiles .soon{opacity:.4}
.profiles .soon small{font-size:11px; margin-left:4px}
.name{font-family:"Jost",sans-serif; font-weight:300; font-size:20px; text-transform:none; letter-spacing:.02em; white-space:nowrap}

/* ---------- cuadrícula ---------- */
main{padding:0 var(--pad)}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap)}
.tile{position:relative; display:block; aspect-ratio:var(--tile-ratio); overflow:hidden; background:#eee; cursor:pointer}
.tile[hidden]{display:none}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .5s, transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tile img.on{opacity:1}
.tile img.contain{object-fit:contain; background:#f4f4f4}
.tile:hover img.on{transform:scale(1.015)}

/* Instagram: el embed oficial recortado para mostrar solo la imagen */
.ig{position:absolute; inset:0; overflow:hidden; background:#111}
.ig iframe{position:absolute; left:0; top:0; border:0; transform-origin:0 0; pointer-events:none; opacity:0; transition:opacity .6s}
.ig iframe.on{opacity:1}

/* tuit sin imagen */
.text-tile{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:14px;
  padding:9% 11%; background:#f3f3f1; color:#3a3a3a}
.text-tile q{font-family:"Jost",sans-serif; font-weight:300; font-size:clamp(17px,2vw,26px); line-height:1.3; quotes:"“" "”";
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden}
.text-tile span{font-size:14px; text-transform:uppercase; opacity:.6}

/* capa al pasar el mouse */
.over{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:rgba(22,22,22,.55); color:#fff; opacity:0; transition:opacity .35s; text-align:center; pointer-events:none}
.tile:hover .over,.tile:focus-visible .over{opacity:1}
.over h2{margin:0; font-weight:400; font-size:24px; text-transform:uppercase; letter-spacing:.01em}
.over p{margin:0; font-size:16px}
.tile:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.empty{text-align:center; text-transform:uppercase; padding:80px 0; opacity:.6}

/* ---------- pie ---------- */
.foot{padding:70px var(--pad) 60px; text-align:center; font-size:13px; text-transform:uppercase; color:#777}
.foot p{margin:6px 0}
.foot a{color:var(--ink)}
.foot a:hover{text-decoration:underline; text-underline-offset:4px}
.foot .legal{text-transform:none; font-family:"Jost",sans-serif; font-weight:300; font-size:13px; max-width:520px; margin:12px auto 0}
.up{position:fixed; right:28px; bottom:28px; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(40,40,40,.08); color:#555; display:grid; place-items:center; transition:background .2s}
.up:hover{background:rgba(40,40,40,.16)}
.up svg{width:18px; height:18px}

/* ---------- celular / pantallas táctiles ---------- */
@media (max-width:760px){
  .top{grid-template-columns:1fr; justify-items:center; gap:12px; padding:26px var(--pad) 20px}
  .top.compact{padding-top:12px; padding-bottom:12px}
  .top.compact .profiles{display:none}
  .name{order:-1; font-size:19px}
  .filters{justify-content:center; gap:16px}
  .profiles{justify-content:center; gap:14px}
  .profiles a,.profiles span{font-size:12.5px}
  .grid{grid-template-columns:1fr; gap:var(--gap)}
  .up{right:16px; bottom:16px}
}
@media (hover:none){
  /* sin hover: la capa queda visible pero discreta, abajo */
  .over{opacity:1; justify-content:flex-end; align-items:flex-start; text-align:left; padding:14px 16px;
    background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.25) 38%,rgba(0,0,0,0) 60%)}
  .over h2,.over p{text-shadow:0 1px 6px rgba(0,0,0,.4)}
  .over h2{font-size:18px}
  .over p{font-size:13px; opacity:.9}
  .tile:active .over{background:rgba(22,22,22,.55)}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }