/* ════════════════════════════════════════════════════════════════════════
   layout.css — el esqueleto: barra, vistas, rejillas y pie.
   Lo que coloca bloques en la página va aquí.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Barra superior ───────────────────────────────────────────────────── */
.barra{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.barra .wrap{display:flex; align-items:center; gap:1rem; min-height:56px}
.marca{font-weight:700; letter-spacing:-.02em; color:var(--ink); text-decoration:none;
       display:flex; align-items:center; gap:.45rem; white-space:nowrap}
.marca .punto{width:.7rem; height:.7rem; border-radius:50%; background:var(--brand)}

.nav{margin-left:auto; display:flex; gap:.25rem}
.nav button{
  border:0; background:none; color:var(--muted); cursor:pointer;
  font:inherit; font-size:.92rem; padding:.45rem .7rem; border-radius:999px;
}
.nav button:hover{color:var(--ink); background:var(--brand-suave)}
.nav button[aria-current="page"]{color:var(--brand-ink); background:var(--brand)}
.nav .globo{
  display:inline-block; min-width:1.15rem; margin-left:.35rem; padding:0 .3rem;
  background:var(--acento); color:#fff; border-radius:999px;
  font-size:.72rem; line-height:1.15rem; text-align:center;
}
.nav button[aria-current="page"] .globo{background:var(--brand-ink); color:var(--brand)}

/* ── Vistas: solo una visible a la vez ────────────────────────────────── */
.vista{display:none; padding:2rem 0 4rem}
.vista.activa{display:block}

/* ── Portada ──────────────────────────────────────────────────────────── */
.portada{text-align:center; padding:3rem 0 1rem}
.portada .lede{font-size:1.15rem; color:var(--muted); max-width:36rem; margin:0 auto 1.75rem}
.portada .acciones{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}

.tres{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-top:3rem}

/* ── Descubrir: filtros arriba, rejilla debajo ────────────────────────── */
.filtros{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radio);
  padding:1.1rem 1.25rem; margin-bottom:1.5rem; box-shadow:var(--sombra);
}
.filtros .fila{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.filtros h2{font-size:1rem; margin-bottom:.9rem}

.rejilla{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}

/* ── Mensajes: lista a la izquierda, conversación a la derecha ────────── */
.mensajeria{
  display:grid; grid-template-columns:16rem 1fr; gap:1rem;
  border:1px solid var(--line); border-radius:var(--radio); overflow:hidden;
  background:var(--card); min-height:26rem; box-shadow:var(--sombra);
}
.mensajeria .lista{border-right:1px solid var(--line); overflow-y:auto; max-height:32rem}
.mensajeria .panel{display:flex; flex-direction:column; min-height:26rem; max-height:32rem}

@media (max-width:44rem){
  .mensajeria{grid-template-columns:1fr; gap:0}
  .mensajeria .lista{border-right:0; border-bottom:1px solid var(--line); max-height:14rem}
  .nav button{padding:.45rem .55rem; font-size:.85rem}
}

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--line); padding:1.75rem 0 2.5rem; color:var(--muted); font-size:.88rem}
.pie p{margin:0 0 .5em}