:root {
  --fondo: #0b0d10;
  --fondo-2: #14181d;
  --texto: #f4f2ec;
  --suave: #b9bcc2;
  --acento: #ffd447;
  --acento-texto: #1a1500;
  --linea: #2a3038;
  --ancho: 1040px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 1.25rem/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
a { color: var(--acento); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

header.barra { border-bottom: 1px solid var(--linea); }
header.barra .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.logo { font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--texto); text-decoration: none; }
.logo span { color: var(--acento); }
nav a { color: var(--suave); text-decoration: none; margin-left: 18px; font-size: 1.05rem; }
nav a:hover { color: var(--texto); }

.portada { padding: 72px 0 40px; }
.portada h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 20px; }
.portada p.entrada { font-size: clamp(1.25rem, 2.4vw, 1.55rem); color: var(--suave); max-width: 40ch; margin: 0 0 28px; }
.estado { display: inline-block; background: var(--acento); color: var(--acento-texto); font-weight: 700; padding: 12px 20px; border-radius: 999px; font-size: 1.1rem; }
.estado-nota { display: block; margin-top: 12px; color: var(--suave); font-size: 1rem; }

.demo { margin: 48px 0 24px; background: #000; border: 1px solid var(--linea); border-radius: 20px; overflow: hidden; position: relative; aspect-ratio: 16 / 9; }
.demo .camara { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 70%, #3a3f47 0%, #1b1f24 45%, #050607 100%); opacity: .55; }
.demo .silueta { position: absolute; left: 50%; bottom: -8%; width: 34%; aspect-ratio: 1 / 1.25; transform: translateX(-50%); background: radial-gradient(circle at 50% 28%, #59606b 0 18%, transparent 18.5%), radial-gradient(ellipse at 50% 100%, #4a515b 0 48%, transparent 48.5%); opacity: .5; }
.demo .guion { position: absolute; inset: 0; display: flex; align-items: center; padding: 6% 7%; font-size: clamp(1.4rem, 4.2vw, 3rem); font-weight: 700; line-height: 1.3; text-shadow: 0 2px 6px #000, 0 0 2px #000; }
.demo .guion p { margin: 0; }
.demo .guion .p { color: rgba(244, 242, 236, .45); transition: color .15s; }
.demo .guion .p.dicha { color: var(--texto); }
.demo .guion .p.ahora { color: var(--acento); }
.demo .microfono { position: absolute; left: 18px; bottom: 16px; font-size: .95rem; color: var(--suave); background: rgba(0, 0, 0, .55); padding: 6px 12px; border-radius: 999px; }
.demo .microfono::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ff5a4f; margin-right: 8px; vertical-align: 1px; }
.demo-pie { color: var(--suave); font-size: .95rem; margin: 0 0 56px; }

section { padding: 48px 0; border-top: 1px solid var(--linea); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.15; margin: 0 0 24px; letter-spacing: -0.02em; }
h3 { font-size: 1.35rem; margin: 0 0 8px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.tarjeta { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 16px; padding: 24px; }
.tarjeta p { margin: 0; color: var(--suave); }

.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.plan { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 16px; padding: 28px; }
.plan.pro { border-color: var(--acento); }
.plan .precio { font-size: 2.6rem; font-weight: 800; margin: 4px 0 2px; }
.plan .precio small { font-size: 1.1rem; font-weight: 500; color: var(--suave); }
.plan ul { padding-left: 1.2em; margin: 16px 0 0; }
.plan li { margin: 6px 0; }

.texto-largo { max-width: 72ch; }
.texto-largo h2 { margin-top: 8px; }
.texto-largo h3 { margin-top: 32px; }
.texto-largo p, .texto-largo li { color: #dcdad4; }
.fecha { color: var(--suave); font-size: 1rem; }

footer { border-top: 1px solid var(--linea); padding: 32px 0 48px; color: var(--suave); font-size: 1rem; }
footer a { margin-right: 18px; }

@media (max-width: 560px) {
  body { font-size: 1.15rem; }
  nav a { margin-left: 14px; font-size: 1rem; }
  nav a.solo-ancho { display: none; }
  .portada { padding-top: 48px; }
  .demo { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .demo .guion .p { transition: none; }
}