/* Stories Studio — landing pública */
* { margin:0; padding:0; box-sizing:border-box }
:root {
  --fondo:#0e0e0e; --panel:#181818; --panel2:#1f1f1f; --borde:#2a2a2a;
  --texto:#e6e6e6; --apagado:#8a8a8a; --lima:#C1FD00; --azul:#0099FF;
  --radio:10px;
}
html { scroll-behavior:smooth }
body {
  background:var(--fondo); color:var(--texto);
  font:15px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit }
.cont { max-width:1120px; margin:0 auto; padding:0 28px }

.boton {
  display:inline-block; font:inherit; color:var(--texto); background:var(--panel2);
  border:1px solid var(--borde); border-radius:8px; padding:9px 18px;
  cursor:pointer; text-decoration:none; text-align:center;
}
.boton:hover { background:#262626 }
.boton.primario { background:var(--lima); color:#111; border-color:var(--lima); font-weight:600 }
.boton.primario:hover { filter:brightness(1.06) }
.boton.grande { padding:12px 26px; font-size:16px }

/* ---------- cabecera ---------- */
.cabecera {
  position:sticky; top:0; z-index:20;
  background:rgba(14,14,14,.88); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borde);
}
.cabecera .cont { display:flex; align-items:center; gap:14px; height:58px }
.logo { width:30px; height:30px; border-radius:8px; background:var(--lima); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:#111; font-weight:800; font-size:15px }
.marca { font-weight:700; letter-spacing:-.01em; text-decoration:none }
.cabecera nav { margin-left:auto; display:flex; align-items:center; gap:20px }
.cabecera nav a { color:var(--apagado); text-decoration:none; font-size:14px }
.cabecera nav a:hover { color:var(--texto) }
.cabecera nav a.boton { color:#111 }
.solo-ancha { display:inline }

/* ---------- hero ---------- */
.hero { padding:74px 0 40px; text-align:center }
.hero h1 {
  font-size:clamp(34px, 5.4vw, 58px); line-height:1.08; letter-spacing:-.025em;
  font-weight:800; max-width:17ch; margin:0 auto;
}
.hero h1 em { font-style:normal; color:var(--lima) }
.hero .sub { color:var(--apagado); max-width:62ch; margin:22px auto 0; font-size:16.5px }
.hero .sub strong { color:var(--texto); font-weight:600 }
.hero .ctas { margin-top:30px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.hero .letra { color:var(--apagado); font-size:13px; margin-top:14px }

/* ---------- demos ---------- */
.demos { padding:36px 0 20px }
.demos .fila { display:flex; gap:22px; justify-content:center; flex-wrap:wrap }
.demo { width:216px }
.demo img {
  width:100%; height:auto; display:block; aspect-ratio:9/16; object-fit:cover;
  border-radius:18px; border:1px solid var(--borde); background:#000;
}
.demo figcaption { color:var(--apagado); font-size:12.5px; text-align:center; margin-top:9px }
.demos .pie { text-align:center; color:var(--apagado); font-size:13px; margin-top:22px }

/* ---------- secciones ---------- */
.seccion { padding:64px 0 }
.seccion h2 { font-size:clamp(24px, 3.2vw, 34px); letter-spacing:-.02em; text-align:center }
.seccion .intro { color:var(--apagado); text-align:center; max-width:56ch; margin:12px auto 0 }

/* ---------- pasos ---------- */
.pasos { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:38px }
.paso { background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:24px 22px }
.paso .num { color:var(--lima); font-weight:800; font-size:14px; letter-spacing:.08em }
.paso h3 { font-size:17px; margin:10px 0 8px; letter-spacing:-.01em }
.paso p { color:var(--apagado); font-size:14px }

/* ---------- precios ---------- */
.planes { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:38px; align-items:stretch }
.plan { background:var(--panel); border:1px solid var(--borde); border-radius:16px;
  padding:26px 24px; display:flex; flex-direction:column }
.plan.destacado { border-color:var(--lima) }
.plan .nombre { font-weight:700; font-size:16px }
.plan .sello { float:right; background:var(--lima); color:#111; font-size:11px; font-weight:700;
  border-radius:20px; padding:2px 10px; letter-spacing:.03em }
.plan .precio { font-size:38px; font-weight:800; letter-spacing:-.03em; margin-top:10px }
.plan .precio span { font-size:14px; font-weight:500; color:var(--apagado); letter-spacing:0 }
.plan ul { list-style:none; margin:18px 0 22px; flex:1 }
.plan li { padding:6px 0 6px 26px; position:relative; color:var(--texto); font-size:14px }
.plan li::before { content:'✓'; position:absolute; left:2px; color:var(--lima); font-weight:700 }
.plan.azulado li::before { color:var(--azul) }
.plan li.suave { color:var(--apagado) }
.plan .nota { color:var(--apagado); font-size:12.5px; text-align:center; margin-top:9px }

/* ---------- faq ---------- */
.faq { max-width:720px; margin:34px auto 0 }
.faq details { border:1px solid var(--borde); border-radius:12px; background:var(--panel);
  margin-bottom:10px; overflow:hidden }
.faq summary { cursor:pointer; padding:15px 18px; font-weight:600; font-size:15px; list-style:none }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:'+'; float:right; color:var(--apagado); font-weight:400; font-size:18px }
.faq details[open] summary::after { content:'–' }
.faq details p { padding:0 18px 16px; color:var(--apagado); font-size:14px }
.faq details p a { color:var(--lima) }

/* ---------- cierre ---------- */
.cierre { text-align:center; padding:70px 0 84px }
.cierre h2 { font-size:clamp(24px, 3.4vw, 36px); letter-spacing:-.02em }
.cierre p { color:var(--apagado); margin:12px 0 26px }

/* ---------- pie ---------- */
.pie-pagina { border-top:1px solid var(--borde); padding:30px 0 40px; color:var(--apagado); font-size:13px }
.pie-pagina .cont { display:flex; gap:10px 26px; flex-wrap:wrap; align-items:center }
.pie-pagina a { color:var(--apagado) }
.pie-pagina a:hover { color:var(--texto) }
.pie-pagina .legal { margin-left:auto; text-align:right }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .pasos, .planes { grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto }
  .demo { width:calc(50% - 12px); max-width:216px }
}
@media (max-width: 640px) {
  .cont { padding:0 18px }
  .cabecera nav { gap:12px }
  .solo-ancha { display:none }
  .hero { padding:52px 0 28px }
  .seccion { padding:48px 0 }
  .pie-pagina .legal { margin-left:0; text-align:left }
}