/* ============================================================
   personas-instabiz · base.css
   Sistema visual compartido entre micrositios de marca personal
   (nico, santi, ...). Una sola fuente de verdad para tokens y
   componentes. Cada persona sólo aporta su contenido.
   ============================================================ */

:root{
  --bg:#000;
  --blue:#2979ff;
  --blue-soft:rgba(41,121,255,0.12);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.45);
  --faint:rgba(255,255,255,0.22);
  --border:rgba(255,255,255,0.10);
  --card:rgba(255,255,255,0.03);
  --green:#23d18b;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;}
body{
  font-family:'Montserrat',sans-serif;
  color:var(--text);
  background:radial-gradient(ellipse 90% 60% at 50% -10%, var(--blue-soft) 0%, transparent 60%), var(--bg);
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:0 20px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

/* ---------- Layout shells ---------- */
.shell{
  width:100%; max-width:480px; flex:1;
  display:flex; flex-direction:column; align-items:center;
  padding:56px 0 32px;
}
.shell--wide{max-width:720px;}

/* ---------- Brand wordmark ---------- */
.brand{
  font-weight:900; font-size:20px; letter-spacing:-0.02em;
  text-transform:lowercase; color:#fff; user-select:none;
}
.brand .dot{color:var(--blue);}

/* ---------- Hero (linktree) ---------- */
.hero{text-align:center; display:flex; flex-direction:column; align-items:center;}
.avatar{
  position:relative; width:104px; height:104px; border-radius:50%;
  overflow:hidden; border:1.5px solid rgba(255,255,255,0.14);
  background:linear-gradient(160deg,#11161f,#05070b);
  box-shadow:0 0 0 6px rgba(41,121,255,0.06), 0 24px 60px -24px rgba(41,121,255,0.5);
}
.avatar img{width:100%; height:100%; object-fit:cover;}
.avatar__ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:900; color:var(--blue); letter-spacing:-0.02em;
}
.name{
  margin-top:18px; font-size:1.6rem; font-weight:800; letter-spacing:-0.01em; color:#fff;
}
.role{
  margin-top:8px; font-size:10px; font-weight:700; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--muted);
}
.bio{
  margin-top:14px; max-width:360px; font-size:0.92rem; font-weight:500;
  line-height:1.55; color:var(--muted);
}

/* ---------- Link buttons (linktree) ---------- */
.links{
  width:100%; margin-top:28px;
  display:flex; flex-direction:column; gap:12px;
}
.link{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:16px 18px;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.link:hover{
  transform:translateY(-2px); border-color:rgba(41,121,255,0.55);
  background:rgba(41,121,255,0.06);
}
.link__icon{
  flex:none; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
}
.link__icon svg{width:18px; height:18px; stroke:#fff; fill:none; stroke-width:1.8;}
.link--primary{border-color:rgba(41,121,255,0.4); background:rgba(41,121,255,0.10);}
.link--primary .link__icon{background:var(--blue); border-color:var(--blue);}
.link--primary .link__icon svg{stroke:#fff;}
.link__body{flex:1; min-width:0;}
.link__title{font-size:0.95rem; font-weight:700; color:#fff; line-height:1.2;}
.link__sub{font-size:11px; font-weight:500; color:var(--muted); margin-top:2px;}
.link__chev{flex:none; color:var(--faint); transition:transform .16s ease, color .16s ease;}
.link:hover .link__chev{transform:translateX(3px); color:var(--blue);}
.link__chev svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2;}

/* ---------- Stack de tarjetas en el linktree ---------- */
.link-stack{width:100%; margin-top:28px; display:flex; flex-direction:column; gap:12px;}

/* ---------- Socials ---------- */
.socials{display:flex; gap:12px; margin-top:24px;}
.social{
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--border);
  transition:border-color .16s ease, transform .16s ease;
}
.social:hover{border-color:rgba(41,121,255,0.55); transform:translateY(-2px);}
.social svg{width:19px; height:19px; fill:#fff;}

/* ---------- Content pages (sobre / trabaja) ---------- */
.topbar{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  margin-bottom:36px;
}
.back{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); transition:color .16s ease;
}
.back:hover{color:#fff;}
.back svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;}

.chip{
  display:inline-block; padding:6px 14px; margin-bottom:16px;
  background:var(--card); border:1px solid var(--border); border-radius:70px;
  font-size:10px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; color:var(--blue);
}
.h1{
  font-size:clamp(1.7rem,6vw,2.4rem); font-weight:800; line-height:1.1;
  letter-spacing:-0.01em; color:#fff;
}
.lead{
  margin-top:14px; font-size:1.02rem; font-weight:500; line-height:1.6; color:var(--muted);
}
.section{width:100%; margin-top:36px;}
.section__title{
  font-size:9px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.prose p{font-size:1rem; line-height:1.7; color:var(--text); opacity:0.9;}
.prose p + p{margin-top:16px;}

/* feature list (trabaja) */
.feats{display:flex; flex-direction:column; gap:12px; width:100%;}
.feat{
  display:flex; gap:13px; align-items:flex-start;
  padding:16px; background:var(--card); border:1px solid var(--border); border-radius:14px;
}
.feat__dot{
  flex:none; width:22px; height:22px; border-radius:50%; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(41,121,255,0.14); border:1px solid rgba(41,121,255,0.4);
}
.feat__dot svg{width:12px; height:12px; stroke:var(--blue); fill:none; stroke-width:2.5;}
.feat__txt{font-size:0.95rem; font-weight:500; line-height:1.5; color:var(--text);}
.feat__txt b{font-weight:700; color:#fff;}

/* CTA button */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  margin-top:26px; padding:15px 26px; width:100%;
  background:var(--blue); color:#fff; border-radius:14px;
  font-size:0.98rem; font-weight:800; letter-spacing:-0.01em;
  transition:transform .16s ease, box-shadow .16s ease;
  box-shadow:0 20px 40px -18px rgba(41,121,255,0.7);
}
.cta:hover{transform:translateY(-2px); box-shadow:0 26px 50px -18px rgba(41,121,255,0.85);}
.cta svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2;}

/* GHL form embed */
.form-card{width:100%; margin-top:8px;}
.form-card iframe{
  display:block; width:100%; border:none; border-radius:16px;
  background:rgba(255,255,255,0.015);
  box-shadow:0 40px 90px -50px rgba(41,121,255,0.30), 0 8px 24px -10px rgba(0,0,0,0.6);
}

/* badges row */
.badges{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:18px;}
.badge{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
  border:1px solid var(--border); border-radius:8px;
  font-size:10px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted);
}
.badge .dot-g{width:6px; height:6px; border-radius:50%; background:var(--green);}

/* ---------- Nav (páginas de contenido) ---------- */
.nav{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:36px;
}
.nav__brand{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:14px; letter-spacing:-0.01em; color:#fff;
}
.nav__brand img{width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid var(--border);}
.nav__links{display:flex; gap:6px; flex-wrap:wrap;}
.nav__link{
  padding:8px 14px; border-radius:999px; border:1px solid transparent;
  font-size:12px; font-weight:700; letter-spacing:0.02em; color:var(--muted);
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.nav__link:hover{color:#fff;}
.nav__link.is-active{color:#fff; background:rgba(41,121,255,0.10); border-color:rgba(41,121,255,0.4);}
@media (max-width:600px){
  .nav{justify-content:center;}
  .nav__brand{width:100%; justify-content:center; margin-bottom:4px;}
}

/* ---------- Retrato de la persona (sobre / trabaja) ---------- */
.portrait{
  width:120px; height:120px; border-radius:24px; object-fit:cover; margin:0 auto 18px;
  border:1.5px solid rgba(255,255,255,0.14);
  box-shadow:0 0 0 6px rgba(41,121,255,0.06), 0 24px 60px -24px rgba(41,121,255,0.5);
}
.portrait--sm{width:84px; height:84px; border-radius:18px;}

/* ---------- Clases (grid de webinars, réplica de recursos) ---------- */
.shell--clases{max-width:1120px;}
.clases-hero{width:100%; text-align:left; margin-bottom:40px;}
.clases-hero h1{
  font-size:clamp(2.4rem,8vw,4.5rem); font-weight:900; text-transform:uppercase;
  letter-spacing:-0.02em; line-height:1; color:#fff;
}
.clases-hero h1 .thin{font-weight:200;}
.clases-hero p{
  margin-top:20px; max-width:640px; font-size:1.05rem; line-height:1.6;
  color:rgba(255,255,255,0.8);
}
.clase-grid{width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.clase-card{
  display:block; overflow:hidden; border:1px solid var(--border); border-radius:18px;
  background:var(--card);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.clase-card:hover{
  transform:translateY(-4px); border-color:rgba(41,121,255,0.4);
  box-shadow:0 0 40px rgba(41,121,255,0.12);
}
.clase-card.is-expired{opacity:0.6; pointer-events:none;}
.clase-thumb{position:relative; aspect-ratio:16/9; overflow:hidden; background:#0a0a0a; border-bottom:1px solid var(--border);}
.clase-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.clase-card:hover .clase-thumb img{transform:scale(1.05);}
.clase-card.is-expired .clase-thumb img{filter:grayscale(1); transform:none;}
.clase-thumb__grad{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1) 60%, transparent);}
.clase-badge{
  position:absolute; top:12px; right:12px; padding:4px 12px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.clase-badge--free{color:var(--blue); border:1px solid rgba(41,121,255,0.3); background:rgba(0,0,0,0.5);}
.clase-badge--exp{color:rgba(255,255,255,0.75); border:1px solid rgba(255,255,255,0.15); background:rgba(0,0,0,0.6);}
.clase-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.clase-play span{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,0.8); background:rgba(0,0,0,0.3); backdrop-filter:blur(4px);
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.clase-card:hover .clase-play span{transform:scale(1.1); border-color:var(--blue); background:rgba(41,121,255,0.25);}
.clase-play svg{width:20px; height:20px; fill:#fff; margin-left:2px;}
.clase-body{padding:22px;}
.clase-title{font-size:1.25rem; font-weight:800; letter-spacing:-0.01em; color:#fff; transition:color .2s ease;}
.clase-card:hover .clase-title{color:var(--blue);}
.clase-card.is-expired .clase-title{color:rgba(255,255,255,0.7);}
.clase-desc{margin-top:8px; font-size:0.875rem; line-height:1.6; color:rgba(255,255,255,0.55);}
.clase-cta{margin-top:16px; display:inline-block; font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue);}
@media (max-width:900px){.clase-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.clase-grid{grid-template-columns:1fr;}}

/* CTA final ancho (clases) */
.cta-block{
  width:100%; margin-top:48px; padding:48px 24px; text-align:center;
  border-top:1px solid var(--border);
}
.cta-block h2{font-size:clamp(1.5rem,5vw,2rem); font-weight:900; color:#fff;}
.cta-block p{margin:14px auto 0; max-width:520px; font-size:1rem; color:var(--muted); line-height:1.6;}

/* ---------- Footer ---------- */
.footer{width:100%; text-align:center; padding:32px 0 10px;}
.footer .brand{font-size:16px; opacity:0.7;}
.footer-copy{
  font-size:9px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--faint); margin-top:8px;
}

/* ---------- Entrance animation ---------- */
@keyframes fadeUp{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}
.anim{opacity:0; animation:fadeUp .5s ease forwards;}
.anim-1{animation-delay:.05s;} .anim-2{animation-delay:.12s;}
.anim-3{animation-delay:.19s;} .anim-4{animation-delay:.26s;}
@media (prefers-reduced-motion:reduce){.anim{animation:none; opacity:1;}}

/* ---------- Responsive ---------- */
@media (max-width:600px){
  .shell{padding:40px 0 28px;}
  .name{font-size:1.4rem;}
}