/* Landing de Sam (madenlabsapp.com/sam). Diseño: Claude Design, proyecto Sam, "Landing Page".
   Sin pedidos a terceros: las tres tipografías (OFL) se sirven desde acá, subconjunto latino. */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}

:root{
  --bg:#070A09; --card:#0B0F0D; --line:#16201C; --line2:#1E2A25; --edge:#2F5A4A;
  --ink:#EEF2EF; --soft:#B9C3BD; --muted:#7D8882; --mint:#A6DCC3; --green:#3F8A6E; --dark:#07110D;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --text:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(20px,4vw,48px);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--mint);text-decoration:none}
a:hover{color:#fff}
a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes pulse{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.8);opacity:0}}

.wrap{max-width:1200px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.top{position:relative;min-height:100vh;overflow:hidden}
.grid-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(166,220,195,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(166,220,195,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 30%,transparent 80%)}

header.site{position:relative;padding-top:24px;padding-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font:600 19px var(--display);letter-spacing:-.02em}
.dot{width:22px;height:22px;border-radius:11px;background:radial-gradient(circle at 35% 30%,#C8F0DD,var(--green) 70%);box-shadow:0 0 16px rgba(127,194,165,.6)}
nav.site{display:flex;align-items:center;gap:clamp(12px,3vw,32px);font:500 15px var(--text)}
nav.site a{color:var(--soft)}
nav.site a.pill{height:44px;padding:0 20px;border-radius:22px;border:1px solid var(--edge);display:flex;align-items:center;color:var(--ink)}

.eyebrow{font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.eyebrow.live{display:flex;align-items:center;gap:10px}
.eyebrow.live::before{content:"";width:6px;height:6px;border-radius:3px;background:var(--mint);box-shadow:0 0 10px var(--mint)}

.hero{position:relative;padding-top:clamp(48px,8vw,96px);padding-bottom:80px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:36px}
h1{margin:0;max-width:900px;font:400 clamp(44px,7.5vw,96px)/.98 var(--display);letter-spacing:-.045em;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--mint)}
.lead{margin:0;max-width:560px;font:400 clamp(18px,2vw,21px)/1.5 var(--text);color:var(--soft);text-wrap:pretty}
.cta{height:60px;padding:0 30px;border-radius:30px;background:var(--mint);color:var(--dark);font:600 18px var(--text);display:inline-flex;align-items:center;gap:12px;box-shadow:0 0 40px rgba(166,220,195,.35)}
.cta:hover{color:var(--dark);background:#BDE8D3}
.cta .mic{width:12px;height:20px;border-radius:6px;border:2.5px solid var(--dark)}
.fine{font:400 14px var(--text);color:var(--muted)}

/* El orbe de Sam */
.orb{position:relative;width:clamp(180px,26vw,260px);aspect-ratio:1}
.orb i{position:absolute;border-radius:50%}
.orb .r1{inset:-22%;border:1px dashed rgba(166,220,195,.25);animation:spin 40s linear infinite}
.orb .r2{inset:-8%;border:1px solid rgba(166,220,195,.14);animation:spin 60s linear infinite reverse}
.orb .p{inset:10%;border:1px solid rgba(166,220,195,.5);animation:pulse 3.2s ease-out infinite}
.orb .g{inset:10%;background:rgba(63,138,110,.25);filter:blur(30px);animation:breathe 4s ease-in-out infinite}
.orb .c{inset:18%;background:radial-gradient(circle at 34% 28%,#E4FFF2,var(--mint) 22%,var(--green) 58%,#0E2A20 100%);
  box-shadow:0 0 80px rgba(166,220,195,.45),inset 0 -20px 40px rgba(0,0,0,.35);animation:breathe 4s ease-in-out .4s infinite}

section.band{position:relative;border-top:1px solid var(--line)}
.band .wrap{padding-top:clamp(72px,10vw,128px);padding-bottom:clamp(72px,10vw,128px)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(48px,6vw,96px);align-items:center}
.stack{display:flex;flex-direction:column;gap:24px}
.center{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
h2{margin:0;font:400 clamp(34px,4.5vw,56px)/1.04 var(--display);letter-spacing:-.035em;text-wrap:balance}
.body{margin:0;max-width:480px;font:400 18px/1.55 var(--text);color:var(--soft);text-wrap:pretty}

/* El teléfono con la charla */
.phone-wrap{display:flex;justify-content:center}
.phone{width:340px;max-width:100%;border-radius:48px;padding:10px;background:#1A1F1D;box-shadow:0 0 0 1px #2A332F,0 40px 100px rgba(63,138,110,.25)}
.screen{border-radius:38px;background:#0E1311;padding:28px 20px 24px;display:flex;flex-direction:column;gap:18px}
.screen .bar{display:flex;justify-content:space-between;align-items:center}
.screen .time{font:500 13px var(--mono);color:var(--muted)}
.screen .end{height:36px;padding:0 14px;border-radius:18px;background:#1E2522;font:500 13px var(--text);display:flex;align-items:center}
.speaking{display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 0;font:500 13px var(--text);color:var(--mint)}
.wave{display:flex;align-items:center;gap:4px;height:48px}
.wave span{width:4px;height:48px;border-radius:2px;background:var(--mint);box-shadow:0 0 8px rgba(166,220,195,.6);animation:wave 1s ease-in-out infinite}
.wave span:nth-child(1){height:24px;animation-duration:.9s}
.wave span:nth-child(2){height:38px;animation-duration:1.05s;animation-delay:.08s}
.wave span:nth-child(3){height:48px;animation-duration:1.2s;animation-delay:.16s}
.wave span:nth-child(4){height:34px;animation-duration:1.35s;animation-delay:.24s}
.wave span:nth-child(5){height:43px;animation-duration:.9s;animation-delay:.32s}
.wave span:nth-child(6){height:29px;animation-duration:1.05s;animation-delay:.4s}
.wave span:nth-child(7){height:48px;animation-duration:1.2s;animation-delay:.48s}
.wave span:nth-child(8){height:36px;animation-duration:1.35s;animation-delay:.56s}
.wave span:nth-child(9){height:26px;animation-duration:.9s;animation-delay:.64s}
.wave span:nth-child(10){height:41px;animation-duration:1.05s;animation-delay:.72s}
.wave span:nth-child(11){height:31px;animation-duration:1.2s;animation-delay:.8s}
.said{margin:0;font:400 15px/1.45 var(--text);color:var(--muted)}
.said.me{color:#9AA59F;text-align:right;padding-left:24px}
.said.me u{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--mint)}
.pause{background:#1A2420;border:1px solid var(--edge);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 0 30px rgba(166,220,195,.08)}
.pause b{font:600 11px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}
.pause .en{margin:0;font:500 20px/1.22 var(--display);color:#fff}
.pause .es{margin:0;font:400 13px/1.45 var(--text);color:var(--soft)}
.controls{display:flex;justify-content:space-between;align-items:center;padding:8px 6px 0}
.controls .side{width:48px;height:48px;border-radius:24px;background:#1E2522;display:flex;align-items:center;justify-content:center;font:600 13px var(--text)}
.controls .ghost{width:48px}
.controls .mute{width:76px;height:76px;border-radius:38px;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 7px rgba(127,194,165,.12),0 0 30px rgba(127,194,165,.3)}
.controls .mute span{width:14px;height:22px;border-radius:7px;border:2.5px solid #fff}

/* Cómo funciona */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line2);border-radius:24px;padding:36px 32px;display:flex;flex-direction:column;gap:18px}
.card .when{font:500 13px var(--mono);color:#5E8F7A}
.card h3{margin:0;font:500 26px/1.15 var(--display);letter-spacing:-.02em}
.card p{margin:0;font:400 17px/1.55 var(--text);color:var(--soft);text-wrap:pretty}

/* Lo que sé de vos */
.profile{background:var(--card);border:1px solid var(--line2);border-radius:28px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:24px}
.profile .level{display:flex;justify-content:space-between;align-items:baseline}
.profile .level span{font:500 15px var(--text);color:var(--soft)}
.profile .level strong{font:400 44px/1 var(--display);letter-spacing:-.03em;font-weight:400}
.profile .rule{height:1px;background:var(--line2)}
.profile .list{display:flex;flex-direction:column;gap:12px}
.profile .label{font:600 12px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.profile .row{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 17px var(--text)}
.profile .row small{font:500 13px var(--mono);color:var(--muted);white-space:nowrap}
.profile .row small.ok{color:var(--mint)}
.profile .fix{align-self:flex-start;height:44px;padding:0 18px;border-radius:22px;border:1px solid var(--edge);display:flex;align-items:center;font:500 15px var(--text)}

/* La notificación */
.notif{width:100%;max-width:420px;text-align:left;background:rgba(30,37,34,.7);border:1px solid #2A332F;border-radius:24px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.notif .icon{flex:none;width:40px;height:40px;border-radius:10px;background:radial-gradient(circle at 35% 30%,#C8F0DD,var(--green) 70%)}
.notif .txt{display:flex;flex-direction:column;gap:4px;flex:1}
.notif .head{display:flex;justify-content:space-between;font:600 15px var(--text)}
.notif .head span{font-weight:400;font-size:13px;color:var(--muted)}
.notif p{margin:0;font:400 15px/1.4 var(--text);color:#D5DCD8}

/* Precio */
.price{width:100%;max-width:440px;background:var(--card);border:1px solid var(--edge);border-radius:28px;padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;align-items:center;gap:24px;box-shadow:0 0 60px rgba(63,138,110,.18)}
.price .kind{font:500 17px var(--text);color:var(--soft)}
.price .amount{display:flex;align-items:baseline;gap:8px}
.price .amount strong{font:400 clamp(56px,8vw,80px)/1 var(--display);letter-spacing:-.045em}
.price .amount span{font:400 17px var(--text);color:var(--muted)}
.price .rule{width:100%;height:1px;background:var(--line2)}
.price ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font:400 17px/1.4 var(--text);color:#D5DCD8}
.price .go{width:100%;height:56px;border-radius:28px;background:var(--mint);color:var(--dark);font:600 17px var(--text);display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(166,220,195,.3)}
.price .go:hover{color:var(--dark);background:#BDE8D3}
.price .terms{font:400 13px/1.5 var(--text);color:var(--muted)}
.price .terms a{color:var(--muted);text-decoration:underline}

/* Bajar */
.download{overflow:hidden}
.download .glow{position:absolute;left:50%;top:100%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:radial-gradient(circle,rgba(63,138,110,.35),transparent 60%);pointer-events:none}
.download .wrap.center{position:relative;padding-top:clamp(88px,12vw,160px);padding-bottom:clamp(88px,12vw,160px);gap:32px}
.download h2{max-width:820px;font-size:clamp(40px,6vw,80px);line-height:1;letter-spacing:-.045em}
.download p{margin:0;font:400 19px/1.5 var(--text);color:var(--soft)}
.store{height:60px;padding:0 28px;border-radius:30px;background:var(--ink);color:var(--dark);font:600 18px var(--text);display:inline-flex;align-items:center;gap:10px;box-shadow:0 0 40px rgba(166,220,195,.25)}
.store:hover{color:var(--dark);background:#fff}
footer.site{position:relative;padding-top:24px;padding-bottom:32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--line);font:400 14px var(--text);color:var(--muted)}
footer.site nav{display:flex;flex-wrap:wrap;gap:24px}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--ink)}

@media (max-width:560px){
  nav.site a:not(.pill):not(.lang){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
}