/* ============================================================
   IDENTITY — navegación + portada
   La portada no explica el producto: lo pone a funcionar.
   ============================================================ */

/* ---- navegación --------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:900;
  height:var(--nav-h);
  display:flex; align-items:center; gap:var(--s5);
  padding-inline:clamp(16px,3vw,28px);
  background:rgba(5,5,5,.72);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid transparent;
  transition:border-color var(--transition-normal), background var(--transition-normal);
}
.nav.is-scrolled{
  border-bottom-color:var(--border);
  background:rgba(5,5,5,.86);
}

.nav__mark{
  display:flex; align-items:center; gap:var(--s2);
  font-size:14px; font-weight:600;
  letter-spacing:.02em;
  flex:none;
}
.nav__glyph{
  width:16px; height:16px; flex:none;
  border-radius:5px;
  background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);
  transition:transform var(--transition-large), border-radius var(--transition-large);
}
.nav__mark:hover .nav__glyph{ transform:rotate(45deg); border-radius:2px; }

.nav__links{ display:flex; gap:2px; margin-right:auto; }
.nav__links a{
  padding:7px 12px;
  border-radius:var(--radius-sm);
  font-size:14px;
  color:var(--text-secondary);
  transition:color var(--transition-fast), background var(--transition-fast);
}
.nav__links a:hover{ color:var(--text-primary); background:var(--surface); }
.nav__links a.on{ color:var(--text-primary); background:var(--surface-2); }

.nav__end{ display:flex; align-items:center; gap:var(--s2); flex:none; }

@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__hide-sm{ display:none; }
}

/* ============================================================
   PORTADA
   ============================================================ */

.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,468px);
  align-items:center;
  gap:clamp(32px,5vw,72px);
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(48px,7vw,88px) var(--pad) clamp(48px,6vw,72px);
  min-height:calc(100vh - var(--nav-h));min-height:calc(100dvh - var(--nav-h));
}
@media (max-width:960px){
  .hero{ grid-template-columns:minmax(0,1fr); min-height:0; padding-top:var(--s6); }
}

/* halo tenue detrás del perfil demo: profundidad, no decoración */
.hero::before{
  content:"";
  position:absolute;
  right:-6%; top:8%;
  width:52%; height:72%;
  background:radial-gradient(closest-side, rgba(255,255,255,.055), transparent 72%);
  filter:blur(40px);
  pointer-events:none;
}
.hero > *{ position:relative; }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:5px 12px 5px 8px;
  border:1px solid var(--border);
  border-radius:100px;
  background:var(--bg-secondary);
  font-size:12.5px;
  color:var(--text-secondary);
  margin-bottom:var(--s5);
}
.hero__eyebrow b{ color:var(--text-primary); font-weight:500; }

.hero__h{
  font-size:clamp(38px,6vw,68px);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:1.03;
}
.hero__h em{
  font-style:normal;
  color:var(--text-muted);
}
.hero__p{
  margin:var(--s5) 0 0;
  font-size:clamp(16px,1.7vw,19px);
  color:var(--text-secondary);
  max-width:40ch;
  line-height:1.5;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }

.hero__proof{
  display:flex; align-items:center; gap:var(--s4);
  margin-top:var(--s6);
  padding-top:var(--s5);
  border-top:1px solid var(--border);
}
.hero__faces{ display:flex; }
.hero__faces span{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-size:13px;
  background:var(--surface-2);
  border:2px solid var(--bg-primary);
  margin-left:-9px;
}
.hero__faces span:first-child{ margin-left:0; }

/* ---- soporte del perfil demo -------------------------------- */
.demo{ display:flex; flex-direction:column; gap:var(--s3); }

.demo__frame{
  position:relative;
  height:clamp(460px,62vh,560px);height:clamp(460px,62dvh,560px);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--bg-primary);
  box-shadow:var(--shadow-lg);
}
.demo__scroll{
  position:absolute; inset:0;
  overflow-y:auto;
  scrollbar-width:none;
}
.demo__scroll::-webkit-scrollbar{ display:none; }
.demo__scroll .pf{ min-height:100%; padding:var(--s6) var(--s5); }

/* control de tema bajo el demo: el visitante juega con el producto */
.demo__ctrl{
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-secondary);
  overflow-x:auto;
  scrollbar-width:none;
}
.demo__ctrl::-webkit-scrollbar{ display:none; }
.demo__hint{
  flex:none; padding-left:6px; padding-right:2px;
  font-size:11px; color:var(--text-muted);
  white-space:nowrap;
}
.demo__sw{
  width:26px; height:26px; flex:none;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  cursor:pointer;
  transition:transform var(--transition-fast), border-color var(--transition-fast);
}
.demo__sw:hover{ transform:translateY(-2px); border-color:var(--border-loud); }
.demo__sw.on{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}

/* ============================================================
   BANDAS DE LA PORTADA
   ============================================================ */

.band{ padding-block:clamp(48px,7vw,88px); }
.band__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s5); margin-bottom:var(--s5);
  flex-wrap:wrap;
}
.band__head p{ margin:6px 0 0; color:var(--text-secondary); font-size:15px; max-width:52ch; }

/* carrusel horizontal de perfiles reales */
.rail{
  display:flex; gap:var(--s3);
  overflow-x:auto;
  padding-bottom:var(--s3);
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
}
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; flex:none; width:232px; }

/* ---- perfil del día ------------------------------------------ */
.potd{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(16px,3vw,28px);
  padding:clamp(18px,3vw,26px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  position:relative;
  overflow:hidden;
}
.potd::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(80% 140% at 0% 0%, var(--potd-tint,rgba(255,255,255,.05)), transparent 62%);
  pointer-events:none;
}
.potd > *{ position:relative; }
@media (max-width:680px){
  .potd{ grid-template-columns:auto 1fr; }
  .potd__cta{ grid-column:1/-1; }
}
.potd__av{
  width:64px; height:64px; border-radius:var(--radius-lg);
  display:grid; place-items:center;
  font-size:26px; font-weight:600;
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  overflow:hidden; flex:none;
}
.potd__av img{ width:100%; height:100%; object-fit:cover; }
.potd__name{ font-size:20px; font-weight:600; letter-spacing:-.03em; }
.potd__why{ color:var(--text-secondary); font-size:13.5px; margin-top:2px; }

/* ---- top 3 de la portada -------------------------------------- */
.top3{ display:grid; gap:var(--s2); }
.top3__row{
  display:grid; grid-template-columns:44px 40px 1fr auto;
  align-items:center; gap:var(--s4);
  padding:var(--s3) var(--s4);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  transition:border-color var(--transition-fast), transform var(--transition-fast);
}
.top3__row:hover{ border-color:var(--border-strong); transform:translateX(3px); }
.top3__n{
  font-size:20px; font-weight:600;
  color:var(--text-faint);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
.top3__row:first-child .top3__n{ color:var(--text-primary); }
.top3__av{
  width:36px; height:36px; border-radius:var(--radius-sm);
  display:grid; place-items:center; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border);
  font-size:15px;
}
.top3__av img{ width:100%; height:100%; object-fit:cover; }
.top3__v{ font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
.top3__v small{ display:block; color:var(--text-muted); font-size:11px; font-weight:400; }

/* ---- cierre ---------------------------------------------------- */
.close-band{
  text-align:center;
  padding:clamp(64px,10vw,120px) var(--pad);
  border-top:1px solid var(--border);
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.035), transparent 68%);
}
.close-band h2{
  font-size:clamp(30px,5vw,52px);
  letter-spacing:-.04em;
  font-weight:600;
}
.close-band p{
  color:var(--text-secondary);
  margin:var(--s4) auto var(--s6);
  max-width:44ch;
  font-size:17px;
}

.foot{
  border-top:1px solid var(--border);
  padding:var(--s5) var(--pad) var(--s7);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  align-items:center;
  font-size:12.5px; color:var(--text-muted);
}
.foot a:hover{ color:var(--text-primary); }
.foot__sep{ margin-left:auto; }

/* ---- campo de reclamo del heroe ------------------------------ */
.claim{
  display:flex; align-items:stretch;
  margin-top:var(--s6);
  max-width:440px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  background:var(--bg-secondary);
  overflow:hidden;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.claim:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.claim__pre{
  display:flex; align-items:center;
  padding-left:var(--s4);
  font-size:14px; color:var(--text-muted); flex:none;
}
.claim input{
  flex:1; min-width:0;
  border:0; background:transparent;
  padding:13px 4px;
  font-size:14px; color:var(--text-primary);
  outline:none;
}
.claim input::placeholder{ color:var(--text-faint); }
.claim button{ margin:5px; border-radius:var(--radius-sm); }

/* Dentro de un perfil la barra de la aplicacion desaparece.
   Antes se atenuaba al 16% y volvia entera al acercar el puntero
   arriba, que en la practica es estar siempre visible: cualquiera
   que mueva el raton hacia la barra del navegador la despierta.

   Un perfil no es una pagina DE la aplicacion: es la pagina de esa
   persona. Su fondo llega hasta el borde de la pantalla, y una
   barra ajena encima rompe justo eso. Fuera del todo.

   Para volver esta el boton atras del navegador, y el dueño llega a
   su panel por la direccion de siempre. */
body.is-profile .nav{ display:none; }

/* Y con la barra fuera, el hueco que tenia reservado tambien sobra.
   Sin esto quedaba una banda negra de 60px arriba: el fondo del
   perfil empezaba por debajo de donde ya no habia nada. */
body.is-profile .view{ padding-top:0; }

/* el panel no necesita la sombra de scroll de la portada */
body.is-dashboard .nav{ border-bottom-color:var(--border); }


/* ============================================================
   ESPERA
   Solo se ve cuando la red tarda de verdad: el router lo pinta a
   los 180 ms. Por debajo de eso no aparece, para que navegar
   rapido no sea un parpadeo continuo.
   ============================================================ */
.cargando{
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:56vh;min-height:56dvh; color:var(--p-dim, #8b939c);
  font-size:14px; letter-spacing:.02em;
}
.cargando__giro{
  width:18px; height:18px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:cargandoGiro .8s linear infinite;
}
@keyframes cargandoGiro{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .cargando__giro{ animation-duration:2.4s; }
}


/* la sesion en la barra: solo separacion, el boton ya trae lo suyo */
.nav__sesion{ display:inline-flex; }
.nav__sesion:empty{ display:none; }


/* ---- la barra bajo la muesca -------------------------------- */
.nav{
  padding-top:env(safe-area-inset-top, 0px);
  padding-left:max(clamp(16px,3vw,28px), env(safe-area-inset-left, 0px));
  padding-right:max(clamp(16px,3vw,28px), env(safe-area-inset-right, 0px));
}