/* ═══════════════════════════════════════════════════════════════════
   ManyStream — landing
   Duotono hot-pink + aqua sobre plum-night. Mobile-first.
   ═══════════════════════════════════════════════════════════════════ */

:root{
	--bg:        #15111e;
	--bg-2:      #1b1530;
	--surface:   #221b33;
	--surface-2: #2a2240;
	--line:      rgba(255,255,255,.09);
	--text:      #f3eefa;
	--muted:     #a79fbb;
	--pink:      #ff4f7e;
	--aqua:      #34dfd0;
	--pink-soft: rgba(255,79,126,.14);
	--aqua-soft: rgba(52,223,208,.12);
	--grad:      linear-gradient(100deg, #ff4f7e 0%, #34dfd0 100%);

	--radius:    18px;
	--radius-sm: 11px;
	--maxw:      1100px;

	--ff-display: 'Space Grotesk', system-ui, sans-serif;
	--ff-body:    'Inter', system-ui, sans-serif;
	--ff-mono:    'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:var(--ff-body);
	font-size:17px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--ff-display); font-weight:700; line-height:1.1; margin:0; }

/* ───────── Botones ───────── */
.btn{
	display:inline-flex; align-items:center; justify-content:center;
	gap:.5em;
	padding:.85em 1.5em;
	border-radius:999px;
	font-family:var(--ff-display); font-weight:600; font-size:1rem;
	cursor:pointer; border:1px solid transparent;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
	white-space:nowrap;
}
.btn:focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; }
.btn--primary{ background:var(--grad); color:#15111e; box-shadow:0 8px 24px -8px rgba(255,79,126,.5); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(255,79,126,.6); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--aqua); color:var(--aqua); }
.btn--block{ display:flex; width:100%; }

/* ───────── Marca ───────── */
.brand{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--ff-display); font-weight:700; font-size:1.18rem; }
.brand__name span{ color:var(--pink); }
.brand__dot{ width:11px; height:11px; border-radius:50%; background:var(--grad); box-shadow:0 0 0 4px var(--pink-soft); }

/* ───────── Nav ───────── */
.nav{
	position:sticky; top:0; z-index:50;
	display:flex; align-items:center; justify-content:space-between;
	gap:1rem;
	padding:1rem clamp(1rem,4vw,2.5rem);
	background:rgba(21,17,30,.82);
	backdrop-filter:blur(12px);
	border-bottom:1px solid var(--line);
}
.nav__links{ display:none; gap:1.8rem; font-size:.97rem; color:var(--muted); }
.nav__links a:hover{ color:var(--text); }
.nav__cta{ padding:.6em 1.2em; }

/* ───────── Layout de secciones ───────── */
main{ display:block; }
.band{
	max-width:var(--maxw);
	margin-inline:auto;
	padding:clamp(3.5rem,9vw,6rem) clamp(1.2rem,5vw,2.5rem);
}
.section-title{ font-size:clamp(1.7rem,4.4vw,2.5rem); text-align:center; }
.section-lead{ text-align:center; color:var(--muted); max-width:44ch; margin:1rem auto 0; }

/* ───────── Hero ───────── */
.hero{
	max-width:var(--maxw); margin-inline:auto;
	padding:clamp(2.5rem,6vw,4.5rem) clamp(1.2rem,5vw,2.5rem) clamp(2rem,5vw,3rem);
	display:grid; gap:2.5rem; align-items:center;
}
.eyebrow{
	display:inline-flex; align-items:center; gap:.5em;
	font-family:var(--ff-mono); font-size:.8rem; letter-spacing:.04em;
	color:var(--aqua); text-transform:uppercase; margin:0 0 1.1rem;
}
.hero__title{ font-size:clamp(2.6rem,8vw,4.2rem); letter-spacing:-.02em; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__sub{ color:var(--muted); font-size:clamp(1.05rem,2.4vw,1.2rem); margin:1.4rem 0 0; max-width:46ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin:2rem 0 0; }
.hero__note{ font-family:var(--ff-mono); font-size:.8rem; color:var(--muted); margin:1.4rem 0 0; }

.live-dot{ width:9px; height:9px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 0 var(--pink); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,79,126,.6);} 70%{box-shadow:0 0 0 9px rgba(255,79,126,0);} 100%{box-shadow:0 0 0 0 rgba(255,79,126,0);} }

/* ───────── Firma: abanico ───────── */
.fanout{ justify-self:center; width:100%; max-width:520px; }
.fanout__svg{ width:100%; height:auto; overflow:visible; }
.fanout__lines path{ stroke-dasharray:7 9; animation:flow 1.6s linear infinite; opacity:.85; }
.fanout__lines path:nth-child(2){ animation-delay:.2s; }
.fanout__lines path:nth-child(3){ animation-delay:.4s; }
.fanout__lines path:nth-child(4){ animation-delay:.6s; }
.fanout__lines path:nth-child(5){ animation-delay:.8s; }
@keyframes flow{ to{ stroke-dashoffset:-32; } }

.src__pulse{ fill:var(--pink-soft); animation:srcpulse 2.4s ease-in-out infinite; transform-origin:150px 210px; }
@keyframes srcpulse{ 0%,100%{ transform:scale(1); opacity:.7;} 50%{ transform:scale(1.18); opacity:.35;} }
.src__core{ fill:var(--bg-2); stroke:var(--pink); stroke-width:2.5; }
.src__label{ font-family:var(--ff-display); font-weight:700; font-size:15px; fill:var(--text); }

.fanout__dest circle{ fill:var(--bg-2); stroke:var(--aqua); stroke-width:2.5; }
.fanout__dest text{ font-family:var(--ff-body); font-weight:500; font-size:15px; fill:var(--text); dominant-baseline:middle; }

/* ───────── Problema ───────── */
.problem__grid{ display:grid; gap:1.1rem; margin-top:2.5rem; }
.problem__item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; }
.problem__item h3{ font-size:1.2rem; margin-bottom:.5rem; }
.problem__item p{ color:var(--muted); margin:0; }

/* ───────── Cómo funciona ───────── */
.how{ background:var(--bg-2); max-width:none; }
.how > *{ max-width:var(--maxw); margin-inline:auto; }
.steps{ list-style:none; padding:0; margin:2.6rem auto 0; display:grid; gap:1.2rem; max-width:var(--maxw); }
.step{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.6rem 1.6rem; }
.step__n{
	position:absolute; top:-18px; left:1.6rem;
	width:42px; height:42px; border-radius:12px;
	display:grid; place-items:center;
	background:var(--grad); color:#15111e;
	font-family:var(--ff-display); font-weight:700; font-size:1.2rem;
	box-shadow:0 8px 20px -8px rgba(255,79,126,.5);
}
.step h3{ font-size:1.25rem; margin-bottom:.5rem; }
.step p{ color:var(--muted); margin:0; }

/* ───────── Beneficios ───────── */
.benefits__grid{ display:grid; gap:1rem; margin-top:2.6rem; grid-template-columns:1fr; }
.benefit{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.4rem; }
.benefit__ic{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--aqua-soft); color:var(--aqua); font-size:1.2rem; margin-bottom:.8rem; }
.benefit h3{ font-size:1.1rem; margin-bottom:.3rem; }
.benefit p{ color:var(--muted); margin:0; font-size:.97rem; }

/* ───────── Plataformas ───────── */
.chips{ list-style:none; padding:0; margin:2.4rem auto 0; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; max-width:760px; }
.chips li{ background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.55em 1.1em; font-weight:500; font-size:.97rem; }
.chips__more{ background:var(--aqua-soft); border-color:transparent; color:var(--aqua); }

/* ───────── Precio ───────── */
.plan{
	max-width:440px; margin:2.6rem auto 0;
	background:linear-gradient(180deg, var(--surface-2), var(--surface));
	border:1px solid var(--line); border-radius:24px;
	padding:2.2rem;
	position:relative; overflow:hidden;
}
.plan::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad); }
.plan__name{ color:var(--muted); font-weight:500; margin:0; }
.plan__price{ font-family:var(--ff-display); font-weight:700; font-size:3rem; line-height:1; margin:.4rem 0 0; }
.plan__cur{ font-size:1.1rem; color:var(--muted); vertical-align:super; margin-right:.2em; }
.plan__per{ font-size:1.1rem; color:var(--muted); font-weight:500; }
.plan__list{ list-style:none; padding:0; margin:1.8rem 0; display:grid; gap:.7rem; }
.plan__list li{ position:relative; padding-left:1.8rem; color:var(--text); }
.plan__list li::before{ content:"✓"; position:absolute; left:0; color:var(--aqua); font-weight:700; }
.plan__list strong{ color:var(--text); }
.plan__fine{ text-align:center; color:var(--muted); font-size:.85rem; margin:.9rem 0 0; }

/* ───────── FAQ ───────── */
.acc{ max-width:720px; margin:2.4rem auto 0; display:grid; gap:.7rem; }
.acc__item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.acc__item summary{
	list-style:none; cursor:pointer;
	padding:1.2rem 1.4rem;
	font-family:var(--ff-display); font-weight:600; font-size:1.05rem;
	display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.acc__item summary::-webkit-details-marker{ display:none; }
.acc__item summary::after{ content:"+"; color:var(--aqua); font-size:1.4rem; line-height:1; transition:transform .2s ease; }
.acc__item[open] summary::after{ transform:rotate(45deg); }
.acc__body{ padding:0 1.4rem 1.3rem; }
.acc__body p{ color:var(--muted); margin:0; }

/* ───────── CTA final ───────── */
.cta-final{ text-align:center; }
.cta-final h2{ font-size:clamp(1.7rem,4.4vw,2.5rem); }
.cta-final p{ color:var(--muted); margin:1rem auto 2rem; }

/* ───────── Footer ───────── */
.foot{
	border-top:1px solid var(--line);
	max-width:var(--maxw); margin-inline:auto;
	padding:2.5rem clamp(1.2rem,5vw,2.5rem);
	display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between;
}
.foot__brand{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--ff-display); font-weight:700; }
.foot__brand .brand__name span{ color:var(--pink); }
.foot__links{ display:flex; gap:1.4rem; color:var(--muted); font-size:.95rem; }
.foot__links a:hover{ color:var(--text); }
.foot__copy{ color:var(--muted); font-size:.9rem; margin:0; width:100%; }

/* ───────── Reveal al hacer scroll ───────── */
.band, .hero{ }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ───────── Responsive ───────── */
@media (min-width:560px){
	.problem__grid{ grid-template-columns:repeat(3,1fr); }
	.steps{ grid-template-columns:repeat(3,1fr); }
	.benefits__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:860px){
	.nav__links{ display:flex; }
	.hero{ grid-template-columns:1.05fr .95fr; gap:3rem; }
	.benefits__grid{ grid-template-columns:repeat(3,1fr); }
	.section-title{ text-align:center; }
}

@media (prefers-reduced-motion:reduce){
	html{ scroll-behavior:auto; }
	*{ animation:none !important; transition:none !important; }
	.reveal{ opacity:1; transform:none; }
}