/* ============================================================
   stephanobrooke.ai — design system
   crema #FCFCF7 · oxblood #8C1C13 · ink #161412 · Inter
   ============================================================ */
:root{
  --bg:#FCFCF7; --crema2:#EFE3D3; --ox:#8C1C13; --gris:#6E6862; --ink:#161412;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease2:cubic-bezier(.2,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}
a{cursor:none; color:inherit}
::selection{background:var(--ox); color:var(--bg)}

/* ---------- PRELOADER ---------- */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--ox);
  display:flex; align-items:center; justify-content:center; color:var(--bg);
}
.loader-count{
  font-size:clamp(60px,10vw,140px); font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.loader-tag{
  position:absolute; bottom:5vh; left:5vw; font-size:12px; letter-spacing:.14em; opacity:.7;
}
body:not(.loaded) h1 .line > span,
body:not(.loaded) .kicker,
body:not(.loaded) .sub,
body:not(.loaded) .cta,
body:not(.loaded) .scroll-hint{animation-play-state:paused}

/* ---------- CURSOR ---------- */
.cursor{
  position:fixed; z-index:99; width:8px; height:8px; border-radius:50%;
  background:var(--ox); pointer-events:none; top:0; left:0;
  transform:translate(-50%,-50%);
}
.cursor-ring{
  position:fixed; z-index:99; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(140,28,19,.5); pointer-events:none; top:0; left:0;
  transform:translate(-50%,-50%);
  transition:width .3s, height .3s, background .3s;
}
.cursor-ring.big{width:70px; height:70px; background:rgba(140,28,19,.07)}
@media (hover:none){ .cursor,.cursor-ring{display:none} body,a{cursor:auto} }

/* ---------- FONDO ---------- */
#fluid{position:fixed; inset:0; z-index:0; width:100vw; height:100vh; display:block}
.liquid{
  position:fixed; inset:0; z-index:0; overflow:hidden; display:none;
  filter:blur(90px) saturate(1.05);
}
body.no-webgl .liquid{display:block}
body.no-webgl #fluid{display:none}
.blob{position:absolute; border-radius:50%; opacity:.85}
.b1{width:55vw;height:55vw;background:radial-gradient(circle at 30% 30%,var(--crema2),transparent 70%);
    top:-10%;left:-10%;animation:drift1 26s ease-in-out infinite alternate}
.b2{width:45vw;height:45vw;background:radial-gradient(circle at 60% 40%,rgba(140,28,19,.55),transparent 70%);
    top:30%;right:-15%;animation:drift2 32s ease-in-out infinite alternate}
.b3{width:40vw;height:40vw;background:radial-gradient(circle at 50% 50%,rgba(140,28,19,.28),transparent 70%);
    bottom:-15%;left:25%;animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vw,22vh) scale(1.25)}}
@keyframes drift2{to{transform:translate(-20vw,-12vh) scale(.85)}}
@keyframes drift3{to{transform:translate(12vw,-18vh) scale(1.3)}}

.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite; mix-blend-mode:overlay;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-8%)}
  30%{transform:translate(4%,6%)} 50%{transform:translate(-6%,3%)}
  70%{transform:translate(7%,-4%)} 90%{transform:translate(-3%,7%)}
}

main{position:relative; z-index:2}

/* ---------- NAV ---------- */
nav.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 5vw; font-size:13px; letter-spacing:.06em;
  mix-blend-mode:darken;
}
.site-nav .logo{font-weight:700; text-decoration:none}
.site-nav .links a{color:var(--ink); text-decoration:none; margin-left:26px; position:relative}
.site-nav .links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background:var(--ox); transition:width .35s var(--ease2);
}
.site-nav .links a:hover::after{width:100%}
.site-nav .links a.active{color:var(--ox)}
.site-nav .links a.active::after{width:100%}

/* ---------- HERO (home) ---------- */
.hero{
  min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:0 5vw; will-change:transform,opacity;
}
.kicker{
  font-size:12px; letter-spacing:.12em; color:var(--gris); margin-bottom:28px;
  opacity:0; animation:up .9s .1s var(--ease2) forwards;
}
h1{
  font-size:clamp(44px,8.5vw,120px); line-height:1; letter-spacing:-.03em;
  font-weight:700; max-width:14ch;
  --ab:0;
  text-shadow:
    calc(var(--ab)*1px) 0 rgba(140,28,19,.45),
    calc(var(--ab)*-1px) 0 rgba(19,72,140,.3);
}
h1 .line{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
h1 .line > span{
  display:block; transform:translateY(110%);
  animation:lineReveal 1.3s var(--ease) forwards;
  will-change:transform;
}
h1 .line:nth-child(2) > span{animation-delay:.14s}
h1 .line:nth-child(3) > span{animation-delay:.28s}
h1 .line.ox > span{color:var(--ox)}
@keyframes lineReveal{to{transform:translateY(0)}}
@keyframes up{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)}}

.sub{
  margin-top:34px; max-width:44ch; color:var(--gris); font-size:17px; line-height:1.55;
  opacity:0; animation:up .9s .55s var(--ease2) forwards;
}
.cta{
  margin-top:40px; display:inline-flex; align-items:center; gap:14px;
  opacity:0; animation:up .9s .7s var(--ease2) forwards;
}
.btn{
  display:inline-block; text-decoration:none; color:var(--bg); background:var(--ink);
  padding:17px 32px; border-radius:100px; font-size:13.5px; letter-spacing:.05em;
  font-weight:500; border:0;
  transition:transform .6s var(--ease2), background .6s;
  font-family:inherit;
}
.btn:hover{transform:translateY(-2px); background:var(--ox)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid rgba(22,20,18,.25)}
.btn.ghost:hover{background:rgba(140,28,19,.08); color:var(--ox); border-color:rgba(140,28,19,.35)}
.btn.ox{background:var(--ox)}
.btn.ox:hover{background:var(--ink)}

.scroll-hint{
  position:absolute; bottom:5vh; left:5vw; font-size:11px; letter-spacing:.14em;
  color:var(--gris); display:flex; align-items:center; gap:10px;
  opacity:0; animation:up .9s 1s forwards;
}
.scroll-hint .bar{width:1px; height:34px; background:rgba(22,20,18,.3); position:relative; overflow:hidden}
.scroll-hint .bar::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--ox); animation:fall 1.8s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes fall{to{top:100%}}

/* ---------- HERO INTERIOR (páginas internas) ---------- */
.page-hero{padding:22vh 5vw 8vh}
.page-hero .kicker{animation-delay:.05s}
.page-hero h1{font-size:clamp(38px,6.5vw,92px)}
.page-hero .sub{animation-delay:.4s}

/* ---------- MANIFIESTO ---------- */
.manifiesto{min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:0 5vw}
.m-tag{font-size:13px; letter-spacing:.12em; color:var(--gris); margin-bottom:38px}
.m-line{
  font-size:clamp(34px,5.4vw,76px); font-weight:700; letter-spacing:-.025em;
  line-height:1.15; opacity:.1;
}
.m-line.ox{color:var(--ox)}

/* ---------- TERMINAL IA ---------- */
.demo-ia{padding:60px 5vw 110px}
.demo-ia .tag{font-size:13px; letter-spacing:.12em; color:var(--gris); margin-bottom:30px}
.term{
  max-width:720px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(22,20,18,.15);
  background:rgba(252,252,247,.6); backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -30px rgba(22,20,18,.25);
}
.term-bar{
  display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid rgba(22,20,18,.1); font-size:11px;
  letter-spacing:.1em; color:var(--gris);
}
.term-bar i{width:10px; height:10px; border-radius:50%; background:rgba(22,20,18,.15)}
.term-bar i:first-child{background:var(--ox)}
.term-bar span{margin-left:8px}
.term-body{
  padding:26px 24px 30px; min-height:230px;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:14px; line-height:1.7;
}
.term-q{color:var(--ink); font-weight:600}
.term-q::before{content:"tú → "; color:var(--ox); font-weight:700}
.term-caret{
  display:inline-block; width:8px; height:16px; background:var(--ox);
  vertical-align:-2px; animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.term-a{margin-top:16px; color:var(--gris); white-space:pre-wrap}
.term-a::before{content:"ia → "; color:var(--ox); font-weight:700}
.term-note{margin-top:22px; font-size:12px; color:var(--gris); letter-spacing:.06em}

/* ---------- TEXTO GIGANTE ---------- */
.giant{padding:6vh 0; overflow:hidden; white-space:nowrap; user-select:none}
.giant .row{
  font-size:clamp(70px,13vw,190px); font-weight:700; letter-spacing:-.02em;
  line-height:1.05; will-change:transform; display:inline-block;
}
.giant .outline{color:transparent; -webkit-text-stroke:1px rgba(22,20,18,.28)}
.giant .fill em{font-style:normal; color:var(--ox)}
.giant .row span{margin-right:6vw}

/* ---------- MARQUEE ---------- */
.marquee{
  border-top:1px solid rgba(22,20,18,.12); border-bottom:1px solid rgba(22,20,18,.12);
  overflow:hidden; padding:18px 0; white-space:nowrap;
  backdrop-filter:blur(6px); background:rgba(252,252,247,.35);
}
.marquee .track{display:inline-block; animation:scroll 28s linear infinite}
.marquee span{font-size:13px; letter-spacing:.14em; color:var(--gris); margin:0 34px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- BIBLIOTECA (cards) ---------- */
section.lib{padding:120px 5vw 140px; will-change:transform}
.lib h2, .sec-tag{font-size:13px; letter-spacing:.12em; color:var(--gris); margin-bottom:46px; font-weight:500}
.card{
  display:flex; align-items:baseline; gap:3vw; padding:38px 0; position:relative;
  border-top:1px solid rgba(22,20,18,.14); text-decoration:none; color:var(--ink);
  opacity:0; transform:translateY(50px);
  transition:opacity .9s var(--ease2), transform .9s var(--ease2);
}
.card.vis{opacity:1; transform:translateY(0)}
.card .num{font-size:13px; color:var(--ox); min-width:32px}
.card .t{
  font-size:clamp(22px,3.4vw,42px); font-weight:600; letter-spacing:-.02em; flex:1;
  transition:transform .6s var(--ease2), color .45s;
}
.card:hover .t{transform:translateX(14px); color:var(--ox)}
.card .meta{font-size:12px; color:var(--gris); letter-spacing:.08em}
.card .arrow{font-size:22px; transition:transform .45s var(--ease2); color:var(--gris)}
.card:hover .arrow{transform:translateX(12px) rotate(-45deg) scale(1.3); color:var(--ox)}
.card::after{
  content:""; position:absolute; left:0; top:-1px; height:1px; width:0;
  background:var(--ox); transition:width .6s var(--ease2);
}
.card:hover::after{width:100%}
.card.soon{pointer-events:none; opacity:.45}
.card .desc{
  flex-basis:100%; font-size:14.5px; color:var(--gris); line-height:1.55; max-width:56ch;
  margin-top:6px;
}
.card-wrap .card{flex-wrap:wrap}

/* ---------- CONTENIDO DE GUÍA (prose) ---------- */
.guide{max-width:760px; margin:0 auto; padding:0 5vw 90px}
.guide-head{max-width:760px; margin:0 auto; padding:20vh 5vw 6vh}
.guide-head h1{font-size:clamp(34px,5vw,64px); max-width:none}
.guide-head .meta-row{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:26px;
  font-size:12px; letter-spacing:.1em; color:var(--gris);
}
.guide-head .meta-row b{color:var(--ox); font-weight:600}
.prose{font-size:17px; line-height:1.75; color:#3a3733}
.prose h2{
  font-size:clamp(22px,3vw,30px); letter-spacing:-.02em; margin:56px 0 18px;
  color:var(--ink);
}
.prose h3{font-size:19px; margin:40px 0 12px; color:var(--ink)}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 22px 22px}
.prose li{margin-bottom:10px}
.prose strong{color:var(--ink)}

/* tarjeta de prompt con botón copiar */
.prompt-card{
  position:relative; margin:26px 0 34px; padding:26px 24px 22px;
  border:1px solid rgba(22,20,18,.14); border-radius:14px;
  background:rgba(252,252,247,.65); backdrop-filter:blur(10px);
}
.prompt-card .p-label{
  font-size:11px; letter-spacing:.14em; color:var(--ox); font-weight:600;
  margin-bottom:12px; text-transform:uppercase;
}
.prompt-card .p-text{
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:14.5px; line-height:1.7; color:var(--ink);
}
.copy-btn{
  position:absolute; top:16px; right:16px;
  font-family:inherit; font-size:11.5px; letter-spacing:.08em;
  padding:8px 16px; border-radius:100px; border:1px solid rgba(22,20,18,.2);
  background:transparent; color:var(--gris);
  transition:all .4s var(--ease2); cursor:none;
}
.copy-btn:hover{border-color:var(--ox); color:var(--ox); background:rgba(140,28,19,.06)}
.copy-btn.ok{background:var(--ox); color:var(--bg); border-color:var(--ox)}

/* FAQ */
.faq{margin-top:70px}
.faq details{
  border-top:1px solid rgba(22,20,18,.14); padding:22px 0;
}
.faq summary{
  font-weight:600; font-size:17px; cursor:none; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--ox); font-size:22px; font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:14px; color:var(--gris); line-height:1.7}

/* CTA descarga / newsletter inline */
.cta-box{
  margin:70px 0 0; padding:40px 36px; border-radius:18px;
  background:var(--ink); color:var(--bg); position:relative; overflow:hidden;
}
.cta-box::before{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(140,28,19,.55), transparent 70%);
  top:-160px; right:-100px; filter:blur(40px);
}
.cta-box h2{font-size:clamp(22px,3vw,30px); letter-spacing:-.02em; margin-bottom:10px; position:relative}
.cta-box p{color:rgba(252,252,247,.65); margin-bottom:24px; position:relative; line-height:1.6}
.cta-box .row{display:flex; gap:12px; flex-wrap:wrap; position:relative}

/* ---------- FORM NEWSLETTER (embed Beehiiv) ---------- */
.nl-lead{
  margin-top:30px; font-size:16px; line-height:1.5; color:var(--ink);
  max-width:40ch; opacity:0; animation:up .9s .65s var(--ease2) forwards;
}
.nl-lead b{color:var(--ox)}
.beehiiv-wrap{
  min-height:96px;            /* evita brinco de layout mientras carga el iframe */
  width:100%; max-width:480px; position:relative; z-index:1;
}
.beehiiv-wrap iframe{max-width:100%}
.nl-small{margin-top:12px; font-size:11.5px; color:var(--gris); letter-spacing:.04em}

/* ---------- POPUP NEWSLETTER ---------- */
.nl-overlay{
  position:fixed; inset:0; z-index:150; background:rgba(22,20,18,.35);
  backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center;
  padding:5vw; opacity:0; transition:opacity .5s;
}
.nl-overlay.show{display:flex}
.nl-overlay.vis{opacity:1}
.nl-popup{
  max-width:480px; width:100%; background:var(--bg); border-radius:20px;
  padding:44px 40px 38px; position:relative;
  border:1px solid rgba(22,20,18,.12);
  box-shadow:0 40px 120px -30px rgba(22,20,18,.5);
  transform:translateY(30px); transition:transform .6s var(--ease);
}
.nl-overlay.vis .nl-popup{transform:translateY(0)}
.nl-popup .nl-kicker{font-size:11px; letter-spacing:.14em; color:var(--ox); font-weight:600; margin-bottom:14px}
.nl-popup h3{font-size:26px; letter-spacing:-.02em; line-height:1.2; margin-bottom:10px}
.nl-popup p{font-size:14.5px; color:var(--gris); line-height:1.6; margin-bottom:22px}
.nl-close{
  position:absolute; top:16px; right:20px; font-size:26px; line-height:1;
  background:none; border:0; color:var(--gris); cursor:none; font-family:inherit;
  transition:color .3s, transform .3s;
}
.nl-close:hover{color:var(--ox); transform:rotate(90deg)}

/* ---------- CONTACTO ---------- */
.contact-grid{
  max-width:1100px; padding:0 5vw 120px; display:grid;
  grid-template-columns:1fr 1.2fr; gap:60px;
}
.contact-info .item{margin-bottom:36px}
.contact-info .label{font-size:12px; letter-spacing:.12em; color:var(--gris); margin-bottom:8px}
.contact-info a{color:var(--ink); text-decoration:none; font-size:17px; transition:color .3s}
.contact-info a:hover{color:var(--ox)}
.c-form .field{margin-bottom:18px}
.c-form label{display:block; font-size:12px; letter-spacing:.1em; color:var(--gris); margin-bottom:8px}
.c-form input,.c-form textarea{
  width:100%; font-family:inherit; font-size:15px; padding:14px 18px;
  border:1px solid rgba(22,20,18,.2); border-radius:12px;
  background:rgba(252,252,247,.75); color:var(--ink); outline:none;
  transition:border-color .3s; resize:vertical;
}
.c-form input:focus,.c-form textarea:focus{border-color:var(--ox)}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr} }

/* ---------- SOBRE MÍ ---------- */
.about{max-width:760px; padding:0 5vw 110px}
.about .prose{font-size:18px}
.about .quote{
  margin:50px 0; padding-left:26px; border-left:2px solid var(--ox);
  font-size:clamp(20px,2.6vw,27px); font-weight:600; letter-spacing:-.01em;
  line-height:1.45; color:var(--ink);
}
.topics{margin-top:26px}
.topics li{
  list-style:none; padding:16px 0; border-top:1px solid rgba(22,20,18,.12);
  font-size:16px; display:flex; gap:14px;
}
.topics li::before{content:"—"; color:var(--ox)}

/* ---------- FOOTER ---------- */
footer.site-footer{
  padding:60px 5vw 40px; border-top:1px solid rgba(22,20,18,.12);
  position:relative; z-index:2;
}
.f-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:44px}
.f-col .f-label{font-size:11px; letter-spacing:.14em; color:var(--gris); margin-bottom:14px}
.f-col a{display:block; color:var(--ink); text-decoration:none; font-size:14px; margin-bottom:10px; transition:color .3s}
.f-col a:hover{color:var(--ox)}
.f-bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12px; color:var(--gris); letter-spacing:.06em;
}
.f-brand{font-weight:700; font-size:15px; margin-bottom:10px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:640px){
  .card{flex-wrap:wrap; gap:10px}
  .grain{opacity:.35; animation-duration:12s}
  /* nav compacto: logo arriba, links abajo en su propia línea — nada encimado */
  .site-nav{
    flex-direction:column; align-items:flex-start; gap:8px;
    padding:14px 5vw 12px;
    background:linear-gradient(to bottom, rgba(252,252,247,.92), rgba(252,252,247,0));
    mix-blend-mode:normal;
  }
  .site-nav .logo{font-size:14px}
  .site-nav .links{display:flex; flex-wrap:nowrap; gap:0}
  .site-nav .links a{margin-left:0; margin-right:16px; font-size:12px}
  /* hero: contenido anclado abajo del nav, con aire */
  .hero{justify-content:flex-start; padding-top:118px}
  h1{font-size:clamp(38px,11vw,64px)}
  .kicker{margin-bottom:20px}
  .sub{font-size:15.5px; margin-top:24px}
  .cta{flex-wrap:wrap; margin-top:28px}
  .scroll-hint{display:none}
  .giant .row{font-size:clamp(56px,17vw,110px)}
  .m-line{font-size:clamp(30px,8.5vw,52px)}
  .term-body{font-size:13px; min-height:260px}
  .page-hero{padding-top:120px}
  .guide-head{padding-top:120px}
  .nl-popup{padding:34px 26px 30px}
  .beehiiv-wrap{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  h1 .line > span{transform:none}
  .kicker,.sub,.cta,.scroll-hint{opacity:1}
  .card{opacity:1; transform:none}
  .m-line{opacity:1}
}