/* kreawave — Home page styles (complementa styles.css) */

.home-body { overflow-x: hidden; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.home-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 32px;
  background: rgba(10,14,24,.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 30;
  flex-wrap: wrap;
}
.home-nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.waveform-logo.small { width: 36px; height: 36px; border-radius: 10px; }
.waveform-logo.small .wb:nth-child(3) { height: 22px; }
.waveform-logo.small .wb:nth-child(2),
.waveform-logo.small .wb:nth-child(4) { height: 15px; }
.waveform-logo.small .wb:nth-child(1),
.waveform-logo.small .wb:nth-child(5) { height: 9px; }

/* flex-wrap SIEMPRE, no solo bajo 640px. Al separar la entrada en dos puertas
   explicitas ("Log in" y "Sign up", 2-ago) el nav gano un enlace y dejo de caber
   en la franja 640-760px: medido con navegador real, scrollWidth 753 contra un
   viewport de 649, o sea 104px de desplazamiento lateral en tablet y movil
   apaisado. La media query de 640 llegaba tarde. Envolver no cambia nada en
   pantalla ancha: alli caben en una linea y el wrap no llega a actuar. */
.home-nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px;
                  flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.home-nav-links a { color: var(--muted); text-decoration: none; transition: color .12s; }
.home-nav-links a:hover, .home-nav-links a.active { color: var(--text); }
.nav-cta {
  background: var(--accent-grad); color: #160c1f !important;
  padding: 7px 14px; border-radius: 9px; font-weight: 600;
}
.nav-cta:hover { filter: brightness(1.1); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  user-select: none;
  padding: 96px 32px 64px;
  background:
    radial-gradient(ellipse 70% 55% at 28% -5%, rgba(160,107,255,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 8%, rgba(255,93,143,.12) 0%, transparent 60%);
  text-align: center; position: relative;
}
.hero-inner { max-width: 800px; margin: 0 auto; }

.hero-badge {
  display: inline-block; background: rgba(160,107,255,.1);
  border: 1px solid rgba(160,107,255,.25); color: var(--accent);
  padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  margin-bottom: 24px;
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 68px); font-weight: 700;
  line-height: 1.05; letter-spacing: -1.4px; margin-bottom: 20px;
}
.hero-gradient {
  background: var(--wave-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
  font-size: 18px; color: var(--muted); max-width: 560px; margin: 0 auto 32px; line-height: 1.6;
}
/* ── Escucha en un toque (hero) ───────────────────────────────────────────────
   Bloque nuevo el 11-ago-2026. Lo único que tiene que conseguir: que el visitante
   pueda OÍR una voz sin bajar ni una pantalla y sin captcha. Todo lo demás del
   hero está subordinado a que esto quepa sobre el pliegue de 844 px del iPhone.

   El botón mide 56 px de alto (>= 44 px, mínimo táctil de las WCAG 2.5.8 y de las
   guías de Apple), y el círculo del play 34 px: tiene que leerse como "esto suena"
   de un vistazo, sin instrucciones. */
.hero-listen { margin: 0 auto 26px; max-width: 560px; }
.hero-listen-label {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600; margin-bottom: 10px;
}
.hero-listen-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.hl-chip {
  display: flex; align-items: center; gap: 11px; min-height: 56px;
  padding: 8px 12px; text-align: left; cursor: pointer;
  background: var(--bg-card, #16121f); border: 1px solid var(--border-soft);
  border-radius: 14px; color: var(--text);
  font: inherit; transition: border-color .12s, transform .12s, box-shadow .12s;
}
.hl-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.hl-chip.playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 0 22px rgba(160,107,255,.22);
}
.hl-chip[hidden] { display: none; }
.hl-play {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-grad); color: #160c1f;
  font-size: 13px; line-height: 1; padding-left: 2px;
}
.hl-chip.playing .hl-play { padding-left: 0; }
.hl-chip.loading .hl-play { padding-left: 0; animation: hlPulse 1s ease-in-out infinite; }
@keyframes hlPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.hl-meta { display: flex; flex-direction: column; min-width: 0; }
.hl-lang { font-size: 14px; font-weight: 600; line-height: 1.25; }
.hl-name {
  font-size: 11.5px; color: var(--muted-2); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-listen-more {
  display: inline-block; margin-top: 12px;
  font-size: 13px; color: var(--accent); text-decoration: none;
}
.hero-listen-more:hover { text-decoration: underline; }

/* ── El precio POR HORA + uso comercial (hero) ─────────────────────────────── */
.hero-value { max-width: 560px; margin: 0 auto 26px; }
.hv-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px 12px; flex-wrap: wrap;
}
.hv-price, .hv-vs {
  padding: 6px 13px; border-radius: 999px; font-size: 13.5px; white-space: nowrap;
}
.hv-price {
  background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.34);
  color: #6ee7b7;
}
.hv-price strong { color: #34d399; font-size: 16px; font-weight: 700; }
.hv-vs {
  background: var(--bg-soft); border: 1px solid var(--border-soft); color: var(--muted-2);
}
.hv-vs strong { color: var(--muted); font-weight: 600; }
.hv-note {
  margin: 9px auto 0; max-width: 520px;
  font-size: 11.5px; line-height: 1.5; color: var(--muted-2);
}
.hv-note strong { color: var(--muted); }
.hv-note a { color: var(--accent); text-decoration: none; }
.hv-note a:hover { text-decoration: underline; }

.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-btn-primary {
  padding: 15px 30px; font-size: 16px; border-radius: 13px;
  box-shadow: var(--shadow-glow);
}
.hero-btn-primary:hover { box-shadow: 0 0 50px rgba(160,107,255,.4); transform: translateY(-1px); }
.hero-btn-secondary { padding: 15px 26px; font-size: 15px; border-radius: 13px; }

/* Onda L→R: alturas NO simétricas (rompen el efecto espejo) +
   delays con amplio rango para que el barrido de izquierda a derecha sea visible */
.hero-wave {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 76px; margin-top: 52px; opacity: .6;
}
.hero-wave span {
  display: block; width: 5px; border-radius: 3px;
  background: var(--accent-grad);
  animation: wave 3.05s ease-in-out infinite;
}
.hero-wave span:nth-child(1)  { height:44px; animation-delay:0s; }
.hero-wave span:nth-child(2)  { height:56px; animation-delay:.1s; }
.hero-wave span:nth-child(3)  { height:38px; animation-delay:.2s; }
.hero-wave span:nth-child(4)  { height:64px; animation-delay:.3s; }
.hero-wave span:nth-child(5)  { height:48px; animation-delay:.4s; }
.hero-wave span:nth-child(6)  { height:72px; animation-delay:.5s; }
.hero-wave span:nth-child(7)  { height:52px; animation-delay:.6s; }
.hero-wave span:nth-child(8)  { height:68px; animation-delay:.7s; }
.hero-wave span:nth-child(9)  { height:42px; animation-delay:.8s; }
.hero-wave span:nth-child(10) { height:60px; animation-delay:.9s; }
.hero-wave span:nth-child(11) { height:50px; animation-delay:1.0s; }
.hero-wave span:nth-child(12) { height:66px; animation-delay:1.1s; }
.hero-wave span:nth-child(13) { height:40px; animation-delay:1.2s; }
.hero-wave span:nth-child(14) { height:54px; animation-delay:1.3s; }
.hero-wave span:nth-child(15) { height:46px; animation-delay:1.4s; }

/* ── Stats strip ─────────────────────────────────────────────────────────── */
.stats-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 20px 32px;
  border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
  background: var(--bg-soft);
}
.stat { text-align: center; padding: 0 40px; }
.stat-n { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--text); letter-spacing: -.5px; }
.stat-l { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .8px; }
.stat-sep { width: 1px; height: 40px; background: var(--border); }

/* ── Demo section ────────────────────────────────────────────────────────── */
.demo-section {
  padding: 72px 24px;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255,93,143,.08) 0%, transparent 70%);
}
.demo-inner { max-width: 680px; margin: 0 auto; }
.demo-header { text-align: center; margin-bottom: 32px; }
.demo-header h2 { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.demo-sub { color: var(--muted); font-size: 15px; }

.demo-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.demo-row { display: flex; flex-direction: column; gap: 7px; }
.demo-label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px;
  display: flex; justify-content: space-between; align-items: center;
}
.demo-chars { font-size: 11px; color: var(--muted-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
.demo-chars.near { color: var(--amber); }
.demo-chars.full { color: var(--red); }

/* ── Paso 1: rejilla de idiomas de la demo (10-ago-2026) ───────────────────
   Los 23 idiomas A LA VISTA con su recuento de voces. Buscar entre 3.337 voces en un
   único <select> era imposible ("es de locos", el dueño), y de paso el número de voces
   por idioma es EL argumento de venta: escondido dentro de un desplegable no lo veía
   nadie. La rejilla se reparte sola: 3 columnas a 390px, 5 en escritorio.
   El control es un <input type="radio"> nativo, no un <div> con clases: así el grupo
   se recorre con las flechas del teclado, sale bien en un lector de pantalla y el
   estado "elegido" lo lleva el navegador (:checked), sin JavaScript que sincronizar. */
.demo-lang-hint { font-size: 11px; color: var(--muted-2); font-weight: 400;
                  text-transform: none; letter-spacing: 0; }
.demo-lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 6px; }
.demo-lang { cursor: pointer; min-width: 0; }
/* El radio se esconde SIN sacarlo del árbol de accesibilidad (nada de display:none,
   que lo dejaría fuera del recorrido con teclado). */
.demo-lang input { position: absolute; opacity: 0; width: 0; height: 0; }
.demo-lang-face {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 7px; min-height: 42px;   /* objetivo táctil cómodo con el dedo */
  transition: border-color .12s, background .12s;
  overflow: hidden;
}
/* El nombre PARTE EN DOS LÍNEAS antes que recortarse: a 390px caben 3 columnas de
   ~100px y "Mandarin Chinese" no entra en una sola línea. Recortando se leía
   "Norwegiar" y "Portugues" (medido), que es peor que ocupar un renglón más. */
.demo-lang-name { display: flex; align-items: baseline; gap: 4px; min-width: 0;
                  font-size: 12px; line-height: 1.25; color: var(--text); }
/* break-word y NO anywhere: "anywhere" partia "Portuguese" en "Portugues"+"e"
   (visto en pantalla). Con 12px y 7px de relleno el nombre mas largo de una sola
   palabra ("Portuguese", "Vietnamese", "Indonesian") cabe en la columna de 103px
   que dan 3 columnas a 390px; solo parte por el espacio "Mandarin Chinese". */
.demo-lang-text { min-width: 0; overflow-wrap: break-word; }
.demo-lang-code { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--muted-2); }
.demo-lang-n { font-size: 11px; color: var(--muted-2); }
.demo-lang:hover .demo-lang-face { border-color: var(--accent); }
.demo-lang input:checked + .demo-lang-face { border-color: var(--accent); background: rgba(160,107,255,.14); }
.demo-lang input:checked + .demo-lang-face .demo-lang-name { font-weight: 600; }
.demo-lang input:checked + .demo-lang-face .demo-lang-code,
.demo-lang input:checked + .demo-lang-face .demo-lang-n { color: var(--accent); }
.demo-lang input:focus-visible + .demo-lang-face { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo-lang-empty { font-size: 13px; color: var(--muted); }
/* Con raton hay sitio de sobra: la letra de 12px es la que hace falta para que
   "Portuguese" quepa en la columna de 103px del movil, no una eleccion de estilo.
   Por encima de 640px la rejilla da columnas de ~120px y se puede respirar. */
@media (min-width: 641px) {
  .demo-lang-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .demo-lang-face { padding: 8px 11px; min-height: 48px; }
  .demo-lang-name { font-size: 13.5px; }
  .demo-lang-n    { font-size: 11.5px; }
}

/* ── Paso 2: buscador de voz dentro del idioma ─────────────────────────────── */
.demo-search {
  width: 100%; background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 14px;
}
.demo-search::placeholder { color: var(--muted-2); }
.demo-search:focus { outline: none; border-color: var(--accent); }
.demo-voice-count { font-size: 11px; color: var(--muted-2); font-weight: 400;
                    text-transform: none; letter-spacing: 0; }

.demo-voice-row { display: flex; gap: 8px; align-items: center; }
.demo-select {
  flex: 1; background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; font-size: 14px;
}
.demo-select:focus { outline: none; border-color: var(--accent); }

.demo-preview-btn {
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--muted);
  border-radius: 10px; padding: 10px 13px; cursor: pointer; transition: all .12s;
  display: flex; align-items: center; gap: 5px; font-size: 13px;
}
.demo-preview-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.demo-preview-btn:disabled { opacity: .4; cursor: not-allowed; }
/* Estados del preview de la demo. El <audio> va oculto: si el botón no cambia, el
   usuario no tiene NINGUNA forma de saber si se está descargando la muestra, si suena
   o si el navegador la ha bloqueado. Esa ausencia de señal era la queja "no suena". */
.demo-preview-btn.loading { border-color: var(--accent); color: var(--text); opacity: .8; }
.demo-preview-btn.playing { border-color: var(--accent); color: var(--accent); background: rgba(160,107,255,.1); }
.demo-preview-btn.loading .listen-icon span { animation: barsLoad 1s ease-in-out infinite alternate; }
.demo-preview-btn.playing .listen-icon span { animation: barsPlay .6s ease-in-out infinite alternate; }
.demo-preview-btn .listen-icon span:nth-child(2) { animation-delay: .1s; }
.demo-preview-btn .listen-icon span:nth-child(3) { animation-delay: .2s; }
.demo-preview-btn .listen-icon span:nth-child(4) { animation-delay: .3s; }
.demo-preview-btn .listen-icon span:nth-child(5) { animation-delay: .4s; }

.demo-textarea {
  background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 14.5px; line-height: 1.55; resize: vertical;
  font-family: inherit; min-height: 110px;
  transition: border-color .12s;
}
.demo-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(160,107,255,.1); }
.demo-textarea::placeholder { color: var(--muted-2); }

.demo-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.demo-gen-btn {
  padding: 12px 24px; font-size: 15px; border-radius: 11px;
  background: var(--accent-grad);
}
.demo-gen-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.demo-gen-btn.loading { animation: btnPulse 1.2s ease-in-out infinite; }
@keyframes btnPulse { 0%,100%{opacity:1;} 50%{opacity:.65;} }

.demo-status { font-size: 13px; color: var(--muted); }
.demo-status.error { color: var(--red); }
.demo-status.success { color: var(--green); }

.demo-progress {
  height: 3px; border-radius: 2px;
  background: var(--border); overflow: hidden;
}
.demo-progress-bar {
  height: 100%; border-radius: 2px;
  background: var(--accent-grad);
  animation: indeterminate 1.5s ease-in-out infinite;
  transform-origin: left;
}
@keyframes indeterminate {
  0%   { transform: scaleX(0) translateX(0); }
  50%  { transform: scaleX(.6) translateX(60%); }
  100% { transform: scaleX(0) translateX(300%); }
}

/* Fila de espera: transcurrido · ETA en cubos · puesto en la cola. Misma escala y
   colores que .demo-status/.demo-chars — es información de apoyo, no un bloque nuevo. */
/* min-height = una fila de chips: la fila ya está a su altura desde el primer segundo,
   así que cuando llegan el ETA y el puesto en la cola no empujan lo de abajo. */
.demo-jobmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 20px; font-size: 11.5px; color: var(--muted-2); }
.demo-jobmeta span { padding: 2px 8px; border-radius: 8px; background: var(--bg-soft); border: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.demo-jobmeta span:empty { display: none; }
/* La barra (3 px) y su fila de datos son UN bloque: se recorta el gap de 20 px del
   .demo-card entre ambas, pero solo cuando la barra está visible. */
.demo-progress:not([hidden]) + .demo-jobmeta { margin-top: -12px; }
/* tabular-nums (arriba) fija el ancho del dígito; el min-width evita que el chip
   encoja al pasar de "~10s left" a "~5s left" y arrastre al de al lado. */
.demo-jobmeta .demo-eta { color: var(--accent); border-color: rgba(160,107,255,.28); min-width: 8.5ch; text-align: center; }
.demo-jobmeta .demo-queue { color: var(--amber); border-color: rgba(255,184,77,.28); }

/* Aviso de alto volumen: una línea, sin botones, se va sola a los 14 s. */
.demo-load-notice {
  font-size: 12px; line-height: 1.45; color: var(--amber);
  background: rgba(255,184,77,.07); border: 1px solid rgba(255,184,77,.2);
  border-radius: 10px; padding: 8px 12px;
}

.demo-result {
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 16px; animation: fadeIn .3s ease;
}
/* HUECO RESERVADO mientras se genera (mismo arreglo que en /generate, donde se midió
   el salto: 308 px de golpe al desocultar el resultado). El bloque entra en el flujo
   desde el principio con su contenido real dentro —el reproductor ya existe en el
   DOM—, pero sin pintar: mide exactamente lo que va a ocupar. Al terminar sólo se
   quita esta clase y el audio aparece SIN mover la página. */
.demo-result.kw-reserva {
  visibility: hidden; background: none; border-color: transparent; animation: none;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }
.demo-result-inner { display: flex; flex-direction: column; gap: 12px; }
.demo-result-info { display: flex; align-items: center; justify-content: space-between; }
.demo-result-voice { font-weight: 600; font-size: 14px; }
/* min-width:0 — MISMA trampa que deformaba /generate a 375 px (allí sí se midió: la
   página pasaba de 554 a 669 px de ancho al aparecer el reproductor). El <audio> nativo
   de Chrome tiene un min-content de ~640 px, y cualquier contenedor flex/grid que
   herede ese mínimo estira la página entera. Hoy la home NO se sale (medido a 375 px:
   scrollWidth = 375 con el resultado visible) porque su tarjeta es de una columna, pero
   sin esta línea vuelve a serlo en cuanto alguien la meta en un flex o un grid. */
.demo-audio-player { width: 100%; max-width: 100%; min-width: 0; height: 36px; }
.demo-result, .demo-result-inner, .demo-card { min-width: 0; }
.demo-dl-btn { align-self: flex-start; font-size: 13px; padding: 7px 14px; }

.demo-note { font-size: 11.5px; color: var(--muted-2); text-align: center; margin: 0; }

/* ── Features ────────────────────────────────────────────────────────────── */
.features { padding: 72px 24px; background: var(--bg-soft); }
/* 5 tarjetas desde el 1-ago (entró "Fix one line"). Con el ancho anterior (1100) y
   min 240 entraban 4 y la quinta quedaba huérfana a la izquierda; se ensancha a 1240 y
   se baja el mínimo a 230 para que las cinco quepan en una fila en escritorio
   (5×230 + 4×20 = 1230). Por debajo, auto-fit las reparte y `justify-content:center`
   evita que la última fila quede descolgada a un lado. */
.features-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px;
  justify-content: center;
}
.feature-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.feature-card:hover {
  border-color: rgba(160,107,255,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 0 28px rgba(160,107,255,.1);
  transform: translateY(-4px);
}
.feature-icon { font-size: 28px; transition: transform var(--t); }
.feature-card:hover .feature-icon { transform: scale(1.15); }
.feature-card h3 { font-size: 17px; font-weight: 700; }
.feature-card p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }

/* ── Showcase ────────────────────────────────────────────────────────────── */
.showcase { padding: 72px 24px; }
.showcase-inner { max-width: 1100px; margin: 0 auto; }
.showcase-h2 { font-size: 28px; font-weight: 700; margin-bottom: 6px; }
.showcase-sub { margin-bottom: 28px; }
.showcase-sub a { color: var(--accent); text-decoration: none; }
.showcase-sub a:hover { text-decoration: underline; }
.showcase-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
}
.showcase-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  transition: all .15s;
}
.showcase-card:hover {
  border-color: var(--border); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
/* Tratamiento PREMIUM identico al del catalogo (styles.css:233): el dorado es lo que hace
   que las voces buenas se distingan de un vistazo, que es justo el objetivo de esta
   seccion -- que la primera impresion sea con las mejores. */
.showcase-card.premium-card { border-color: rgba(255,195,77,.2); }
.showcase-card.premium-card:hover {
  border-color: rgba(255,195,77,.5);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 18px rgba(255,195,77,.05);
}
.sc-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Frase de muestra: dice de un vistazo para que sirve la voz. Se acota a 2 lineas para
   que la rejilla no baile con textos de distinta longitud. */
.sc-sample {
  font-size: 11.5px; color: var(--muted); font-style: italic; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0;
}
.showcase-card.playing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sc-header { display: flex; align-items: center; gap: 8px; }
.sc-avatar {
  width: 32px; height: 32px; border-radius: 8px; background: var(--bg-soft);
  border: 1px solid var(--border); display: grid; place-items: center; font-size: 15px; flex-shrink: 0;
}
.sc-lang { font-weight: 600; font-size: 13px; }
/* .sc-id ahora contiene el chip de idioma (.lang-chip, definido en styles.css), no un
   id técnico: se quita la fuente monoespaciada y se deja que mande el chip. */
.sc-id { font-size: 10px; color: var(--muted-2); margin-top: 2px; }
.sc-traits { display: flex; gap: 4px; flex-wrap: wrap; }
.sc-trait { font-size: 10.5px; color: var(--accent); background: rgba(160,107,255,.08); border: 1px solid rgba(160,107,255,.15); padding: 2px 6px; border-radius: 5px; }
.sc-stars { font-size: 11px; color: var(--amber); }
.sc-play { font-size: 11.5px; color: var(--muted); }
.sc-play.playing { color: var(--accent); }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.pricing {
  padding: 80px 24px;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(160,107,255,.07) 0%, transparent 70%);
}
/* 1100px, el mismo ancho que .showcase-inner. Desde el 3-ago la fila de precios son
   CUATRO tarjetas (Free + Trial + Pro + Unlimited) y a 940px no caben: auto-fill daba
   tres columnas y dejaba la cuarta huerfana en una segunda fila. Ensanchar aqui NO
   descoloca lo demas de la seccion: los bloques que no deben crecer ya llevan su
   propio tope (.kw-beta-box 44rem, .recharge 720px) y el resto es texto centrado. */
.pricing-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.pricing-inner h2 { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.pricing-sub { color: var(--muted); font-size: 16px; margin-bottom: 40px; }
/* Columnas EXPLICITAS, no auto-fill: con cuatro tarjetas el reparto automatico dejaba
   una suelta (3+1) en toda la banda de anchos entre 780 y 1093px. 4 en escritorio ->
   2+2 -> 1 apiladas en movil, sin huerfanas en ningun ancho.
   El hueco ENTRE FILAS crece a 32px en cuanto hay mas de una fila porque las chapas
   "Most popular" / "Launch price" van en position:absolute con top:-12px y sobresalen
   por encima de su tarjeta: con 18px de hueco se comen el borde de la de arriba. */
.pricing-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 1000px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; } }
@media (max-width: 560px)  { .pricing-grid { grid-template-columns: 1fr; gap: 32px; } }
.plan-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px; text-align: left; position: relative;
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.plan-card:hover { border-color: var(--accent); box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.plan-popular {
  border-color: rgba(160,107,255,.5);
  box-shadow: 0 0 0 1px rgba(160,107,255,.15) inset, var(--shadow-glow);
}
.plan-badge-pop {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent-grad); color: #160c1f;
  padding: 4px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.plan-launch {
  border-color: rgba(212,168,67,.5);
  box-shadow: 0 0 0 1px rgba(212,168,67,.10) inset, 0 0 32px rgba(212,168,67,.07);
}
.plan-badge-launch {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #e8c347 0%, #c9890a 100%);
  color: #1a0f00;
  padding: 4px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.plan-name { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.plan-price { font-family: var(--font-display); font-size: 38px; font-weight: 700; letter-spacing: -1px; }
.plan-period { font-size: 15px; font-weight: 400; color: var(--muted); }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan-features li { font-size: 14px; color: var(--muted); }
/* "fair use" lleva a la cláusula de los Términos con la cifra exacta: se subraya
   discreto para que se vea que es pinchable sin gritar dentro de la tarjeta. */
.plan-fairuse-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.plan-fairuse-link:hover { color: var(--accent); }
.plan-features li::first-letter { color: var(--green); }
.plan-btn {
  background: var(--accent-grad); border: none; color: #160c1f;
  padding: 12px; border-radius: 11px; font-size: 14px; font-weight: 600;
  text-align: center; text-decoration: none; display: block;
  transition: filter .12s;
}
.plan-btn:hover { filter: brightness(1.1); }

/* Precio anual: línea discreta bajo el mensual. El ahorro se anuncia porque es real
   (Pro 12×15=180 → 150 anual = −30; Unlimited 12×30=360 → 300 anual = −60). El margen
   negativo lo pega al precio para que se lean como un bloque. */
/* Segunda línea de la tarjeta: el anual y lo que se ahorra. Sube de tamaño y el importe
   va resaltado porque antes era una nota al pie gris que nadie leía — y con ella nadie
   descubría que el interruptor de arriba existía. Sin pasarse: el precio grande sigue
   siendo el del ciclo elegido, esto es la alternativa. */
.plan-annual {
  font-size: 13.5px; color: var(--muted); margin-top: -6px;
  /* A la IZQUIERDA, igual que el precio grande de arriba y que el resto de la tarjeta.
     Estuvo centrado un rato y se veian los dos precios del mismo plan en ejes distintos. */
  display: flex; align-items: center; justify-content: flex-start;
  gap: .4rem; flex-wrap: wrap; line-height: 1.5;
}
.plan-annual strong { color: var(--text); font-weight: 700; font-size: 15px; }
/* El ahorro, en pastilla: es el único dato que convierte a anual, así que se ve de un
   vistazo sin gritar. */
.plan-annual .plan-annual-save {
  display: inline-block; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  padding: .18rem .5rem; border-radius: 999px;
  color: #34d399;
  background: rgba(52, 211, 153, .13);
  border: 1px solid rgba(52, 211, 153, .32);
}

/* ── Recargas (monederos que NO caducan) ─────────────────────────────────────
   Contrato MONEDERO: las horas de recarga se suman al wallet y no se reinician con el
   plan. Se muestran como bloque aparte bajo las tarjetas para no competir con la
   decisión principal (elegir plan). Sin precios inventados: sólo los tamaños de pack y
   la propiedad clave (no caducan); el importe lo fija la pasarela en el checkout. */
.recharge {
  max-width: 720px; margin: 44px auto 0; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 18px; padding: 26px 24px;
}
.recharge-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.recharge-sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.recharge-sub strong { color: var(--text); }
.recharge-packs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.recharge-pack {
  flex: 1 1 130px; max-width: 170px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .15s, transform .15s;
}
.recharge-pack:hover { border-color: var(--accent); transform: translateY(-2px); }
.rp-hours { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--accent); letter-spacing: -.5px; }
.rp-label { font-size: 12px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .6px; }
.recharge-note { color: var(--muted-2); font-size: 12.5px; margin-top: 16px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.home-footer {
  padding: 40px 32px; border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.footer-links a { color: var(--muted); font-size: 13px; text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.footer-note { color: var(--muted-2); font-size: 12px; }

/* ── Scroll reveal ───────────────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal-stagger > *.in-view { opacity: 1; transform: none; }
.reveal-stagger > *:nth-child(2) { transition-delay: .1s; }
.reveal-stagger > *:nth-child(3) { transition-delay: .2s; }
.reveal-stagger > *:nth-child(4) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Hero entrance animations (escalonadas) ──────────────────────────────── */
@keyframes kwFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge   { animation: kwFadeUp .5s cubic-bezier(.22,.68,0,1.2)  both  .1s; }
.hero-h1      { animation: kwFadeUp .6s cubic-bezier(.22,.68,0,1.05) both  .25s; }
.hero-sub     { animation: kwFadeUp .55s ease                         both  .40s; }
/* El bloque de escucha entra PRONTO (.48s) a propósito: es lo que el visitante ha
   venido a hacer y el que más tarde en aparecer es el que no se ve. */
.hero-listen  { animation: kwFadeUp .5s ease                          both  .48s; }
.hero-value   { animation: kwFadeUp .5s ease                          both  .58s; }
.hero-actions { animation: kwFadeUp .5s ease                          both  .66s; }
.hero-wave    { animation: kwFadeUp .7s ease                          both  .8s; }
@media (prefers-reduced-motion: reduce) {
  .hero-badge, .hero-h1, .hero-sub, .hero-listen, .hero-value,
  .hero-actions, .hero-wave { animation: none; opacity: 1; }
}

/* ── Demo card — glow sutil en hover ─────────────────────────────────────── */
.demo-card { transition: box-shadow var(--t); }
.demo-card:hover {
  box-shadow: 0 28px 72px rgba(0,0,0,.5), 0 0 0 1px rgba(160,107,255,.14);
}

/* ── FAQ ─────────────────────────────────────────────────────────────────────
   Acordeón con <details>/<summary> nativos (accesible por teclado, funciona sin JS).
   Mismo lenguaje visual que .plan-card / .feature-card: bg-card + border + radio 18/14. */
.faq { padding: 72px 24px; background: var(--bg-soft); }
.faq-inner { max-width: 780px; margin: 0 auto; }
.faq-inner h2 { font-size: 28px; font-weight: 700; margin-bottom: 24px; text-align: center; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 0 18px; transition: border-color var(--t);
}
.faq-item:hover { border-color: var(--border); }
.faq-item[open] { border-color: rgba(160,107,255,.35); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 16px 28px 16px 0; position: relative;
  font-size: 15.5px; font-weight: 600; color: var(--text);
}
/* El triángulo por defecto (Safari usa ::-webkit-details-marker) se sustituye por un
   "+" propio que gira a "×" al abrir: coherente con el resto de la portada. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 20px; line-height: 1; color: var(--accent); transition: transform var(--t);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.faq-item p {
  margin: 0; padding: 14px 0 16px; color: var(--muted); font-size: 14px; line-height: 1.65;
  border-top: 1px solid var(--border-soft);
}
.faq-item p a { color: var(--accent); }
.faq-more { margin-top: 22px; text-align: center; font-size: 13.5px; color: var(--muted-2); }
.faq-more a { color: var(--accent); text-decoration: none; }
.faq-more a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* ── Móvil: presupuesto del PRIMER PLIEGUE ───────────────────────────────────
   El 63% del tráfico entra por el webview de Instagram, en móvil. Medido a 390x844
   ANTES de esto: aviso de beta 76 px + nav 147 px (envolvía en TRES filas) = 223 px
   de cromo, y el primer elemento capaz de sonar quedaba a 2.198 px, o sea 2,6
   pantallas más abajo. Cada regla de aquí abajo existe para recuperar píxeles
   concretos y ponerlos donde se oye algo. */
@media (max-width: 640px) {
  .hero { padding: 26px 20px 36px; }
  .stats-strip { flex-wrap: wrap; gap: 20px; }
  .stat { padding: 0 16px; }
  .stat-sep { display: none; }
  /* Nav en UNA fila. Los cuatro .nav-jump se pliegan: "Voices" tiene su propio botón
     en el hero y Demo/Pricing/FAQ son anclas de esta misma página. Se quedan Discord
     (sólo el icono), Log in / Sign up y Generate. */
  /* nowrap SÓLO en la portada (.home-body). /catalog/ comparte esta hoja y su nav
     tiene 6 enlaces SIN .nav-jump: ahí quitar el wrap provocaría desbordamiento
     lateral. Ese fichero no es mío y no se toca, así que la regla se acota aquí. */
  .home-nav { padding: 10px 14px; gap: 10px; }
  .home-body .home-nav { flex-wrap: nowrap; }
  .home-nav-links { gap: 12px; font-size: 13px; justify-content: flex-end; }
  .home-body .home-nav-links { flex-wrap: nowrap; }
  /* Sin esto "Log in", "Sign up" y "Generate →" se parten en dos líneas cada uno y la
     nav vuelve a crecer a 75 px por dentro aunque sea de una sola fila. */
  .home-body .home-nav-links > a { white-space: nowrap; }
  .nav-jump { display: none; }
  .nav-label { display: none; }
  /* Discord fuera de la nav en móvil: con nowrap le comía las letras al logo
     ("kreawav") — visto en captura a 390 px. No se pierde el canal: el aviso de beta,
     justo encima y en todas las páginas, enlaza a ese mismo Discord. */
  .home-body .discord-cta { display: none; }
  /* El logo no se encoge: es lo único que identifica el sitio. */
  .home-body .home-nav-brand { flex: none; }
  .home-body .waveform-logo.small { width: 30px; height: 30px; }
  .home-body .brand-title { font-size: 19px; }
  .home-body .nav-cta { padding: 7px 12px; }
  /* Titular a 34 px: a 40 px partía en CUATRO líneas (168 px). */
  .hero-h1 { font-size: 34px; letter-spacing: -.8px; margin-bottom: 14px; }
  .hero-badge { margin-bottom: 16px; font-size: 12px; }
  .hero-sub { font-size: 15.5px; margin-bottom: 20px; }
  .hero-listen { margin-bottom: 20px; }
  .hero-value { margin-bottom: 20px; }
  /* Decoración pura: 76 px de onda animada que no dice ni deja hacer nada.
     Es el primer píxel que sobra cuando hay que elegir. */
  .hero-wave { display: none; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-btn-primary, .hero-btn-secondary { width: 100%; max-width: 320px; text-align: center; }
  .demo-card { padding: 18px; }
  .demo-section, .features, .showcase, .pricing, .faq { padding-left: 16px; padding-right: 16px; }
}

/* A 360 px o menos, las dos píldoras de precio no caben en una línea sin partirse
   por la mitad: se apilan enteras en vez de romperse. */
@media (max-width: 380px) {
  .hv-price, .hv-vs { font-size: 12.5px; padding: 5px 10px; }
  .hl-lang { font-size: 13px; }
  .hl-chip { gap: 9px; padding: 8px 10px; }
}

/* ── Turnstile a 320px de ancho ────────────────────────────────────────────
   El widget de Cloudflare mide 300px fijos y no es responsive, pero el hueco
   dentro de .demo-card sólo da 250px a 320px de ancho: el documento desbordaba
   15px (scrollWidth 335 contra clientWidth 320, medido 2-ago con navegador
   real). Se ESCALA en lugar de recortarlo con overflow:hidden porque recortar
   taparía el logo y los enlaces Privacy/Terms de Cloudflare, y el captcha tiene
   que seguir intacto y clicable: es la única defensa contra el alta masiva de
   bots. 300 x 0,82 = 246px, que caben en los 250px sin cortar nada.
   Sólo hace falta por debajo de 360px: a 375px el hueco ya son 305px. */
@media (max-width: 360px) {
  #turnstile-container > div { transform: scale(.82); transform-origin: 0 0; }
}

/* Packs de recarga: pasaron de <div> a <a> el 2-ago (antes no se podían comprar). Como
   enlaces heredaban color de acento y subrayado, que rompían la tarjeta. */
.recharge-pack { text-decoration: none; color: inherit; display: flex; flex-direction: column;
                 align-items: center; gap: 2px; transition: transform .12s, border-color .12s; }
.recharge-pack:hover { transform: translateY(-2px); border-color: var(--accent, #a06bff); }
.rp-price { font-size: 20px; font-weight: 700; color: var(--text); margin-top: 6px; }
.rp-unit { font-size: 12px; color: var(--muted); }
.recharge-pack-best { border-color: var(--accent, #a06bff); }


/* ── Aviso de BETA ABIERTA ────────────────────────────────────────────────────
   Orden del dueno (2-ago-2026): que se vea en TODAS las paginas que el servicio
   esta en beta, que puede fallar, y que reportar un fallo se premia con minutos.
   Va en el FLUJO del documento (no fixed): asi empuja el contenido en vez de
   taparlo, que en movil es la diferencia entre un aviso y un estorbo.
   Sin boton de cerrar a proposito: no es una promocion, es una advertencia que
   acompana a un cobro. */
.kw-beta-bar {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  flex-wrap: wrap; text-align: center;
  padding: .55rem 1rem; font-size: .82rem; line-height: 1.4;
  background: linear-gradient(90deg, rgba(168,85,247,.18), rgba(236,72,153,.18));
  border-bottom: 1px solid rgba(168,85,247,.35);
  color: #e9e4f5;
}
.kw-beta-tag {
  flex: none;
  font-weight: 700; font-size: .68rem; letter-spacing: .08em;
  padding: .16rem .5rem; border-radius: 999px;
  background: rgba(168,85,247,.35); color: #fff;
}
.kw-beta-text { min-width: 0; }           /* sin esto desborda a 320 px */
.kw-beta-bar a { color: #f0abfc; text-decoration: underline; }
.kw-beta-bar a:hover { color: #fff; }

/* Nota de beta dentro de una seccion concreta (demo, precios, catalogo). */
.kw-beta-note {
  margin: .6rem auto 0; max-width: 46rem;
  font-size: .8rem; line-height: 1.5; text-align: center;
  color: var(--muted-2, #a89fc0);
}
.kw-beta-note strong { color: #f0abfc; }

@media (max-width: 480px) {
  .kw-beta-bar { font-size: .76rem; padding: .45rem .7rem; }
}
/* La ADVERTENCIA se queda entera en móvil; lo que se pliega son las dos frases de
   adorno ("Spot one?" y el premio en minutos), que a 390 px convertían el aviso en
   tres líneas y 76 px del primer pliegue. El enlace a Discord sigue ahí. */
@media (max-width: 640px) {
  .kw-beta-more { display: none; }
}


/* Caja del aviso de beta en la seccion de precios. Es la unica nota de beta que se
   destaca de verdad: aqui es donde el visitante decide pagar, y donde enterarse de que
   reportar un fallo le regala minutos cambia lo que hace a continuacion. */
.kw-beta-box {
  max-width: 44rem; margin: 1.1rem auto 1.4rem;
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; flex-wrap: wrap; text-align: center;
  padding: .8rem 1.1rem; border-radius: 14px;
  background: linear-gradient(90deg, rgba(168,85,247,.12), rgba(236,72,153,.12));
  border: 1px solid rgba(168,85,247,.3);
  font-size: .88rem; line-height: 1.55; color: #d9d2ea;
}
.kw-beta-box .kw-beta-tag { flex: none; }
.kw-beta-box .kw-beta-gift { color: #34d399; font-weight: 700; white-space: nowrap; }
.kw-beta-box .kw-beta-cta {
  flex: none; display: inline-block; white-space: nowrap;
  padding: .34rem .8rem; border-radius: 999px;
  background: rgba(168,85,247,.3); border: 1px solid rgba(168,85,247,.5);
  color: #fff; font-weight: 600; font-size: .82rem; text-decoration: none;
}
.kw-beta-box .kw-beta-cta:hover { background: rgba(168,85,247,.5); color: #fff; }
@media (max-width: 480px) {
  .kw-beta-box { font-size: .82rem; padding: .7rem .8rem; gap: .5rem; }
}


/* ── Pantalla ANCHA pero BAJA: el portatil de 1366x768 ────────────────────────
   MEDIDO el 12-ago-2026 en ventana 1264x625 (= 1366x768 menos la barra del
   navegador): las tarjetas de "escucha una muestra" caian en y=534..656 y la
   barra de cookies —position:fixed, z-index 9999, bottom 16px— arranca en
   y=541. document.elementFromPoint() en el centro de las dos primeras tarjetas
   devolvia LA BARRA DE COOKIES, y las otras dos quedaban fuera de pantalla.
   Es decir: la portada pedia "ONE TAP, NO SIGN-UP" y tapaba con un banner justo
   lo unico que pide tocar. El visitante tocaba, no sonaba nada y se iba.

   No es un fallo del movil: alli funciona (tarjetas y=400..530, barra y=740).
   Es que la ventana util de ese portatil son ~625 px, MAS BAJA que el pliegue
   de 844 px del iPhone para el que se afino el hero (ver el comentario de
   .hero-listen mas arriba).

   Se recupera altura de tres sitios y se deja el bloque de escucha en UNA fila.
   Solo aqui: ni el movil (<900 px de ancho) ni las pantallas altas se tocan. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero        { padding-top: 40px; padding-bottom: 40px; }
  .hero-badge  { margin-bottom: 14px; }
  .hero-h1     { font-size: clamp(34px, 3.6vw, 48px); margin-bottom: 14px; }
  .hero-sub    { font-size: 17px; margin-bottom: 20px; }
  .hero-listen { max-width: 100%; margin-bottom: 20px; }
  /* Una sola fila: es lo que de verdad quita los 66 px que faltaban. */
  .hero-listen-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .hl-chip     { gap: 9px; padding: 8px 10px; }
}


/* ── Movil: que el CTA no caiga debajo del banner de cookies ──────────────────
   MEDIDO 12-ago-2026 a 390x844 (webview de Instagram, 63% del trafico):
     #kw-cookie-bar      top=742,6  bottom=836,0   (fixed, z-index 9999)
     boton "Try it free" top=760,5  bottom=815,3   -> entero dentro de la barra
     document.elementFromPoint(195,788) devolvia 'kw-cookie-bar', y tras pulsar
     "Accept" el mismo punto pasaba a devolver el boton: causalidad comprobada.
   El unico boton de conversion de la portada no se podia pulsar.

   El 8-ago ya se adelgazo el banner de ~150 px a ~95 px por este mismo motivo y no
   basto. Aqui se recupera el resto subiendo el hero: se recorta aire, no contenido.
   No se esconde el parrafo del precio —ahi vive "Commercial use included"— ni se
   toca el banner, cuyo texto es legal.

   Objetivo: el boton de conversion quede por ENCIMA de y=735 a 390x844. */
@media (max-width: 640px) {
  .hero        { padding-top: 18px; padding-bottom: 24px; }
  .hero-badge  { margin-bottom: 10px; }
  .hero-h1     { font-size: 31px; margin-bottom: 10px; }
  .hero-sub    { font-size: 15px; margin-bottom: 14px; }
  .hero-listen { margin-bottom: 14px; }
  .hero-value  { margin-bottom: 14px; }
  /* La letra pequena del precio: se mantiene entera (lleva "Commercial use
     included"), solo se aprieta el interlineado. */
  .hero-value p, .hv-note { line-height: 1.35; }
}


/* Llamada a la accion de la demo (12-ago-2026). Aparece junto al audio en cuanto
   esta listo: es el unico instante del embudo en el que el visitante ya ha
   comprobado que el producto funciona con SU texto. Ver el comentario de
   #demo-cta en index.html. */
.demo-cta { margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  background: rgba(160,107,255,.10); border: 1px solid rgba(160,107,255,.28);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.demo-cta-txt { margin: 0; flex: 1 1 240px; font-size: 14.5px; }
.demo-cta-btn { white-space: nowrap; }
@media (max-width: 560px) { .demo-cta { flex-direction: column; align-items: stretch;
  text-align: center; } .demo-cta-btn { width: 100%; } }