:root {
  color-scheme: light;

  /* Core brand */
  --qirava-ink: #0B102A;
  --qirava-ink-2: #11183A;
  --qirava-green: #3E8551;
  --qirava-violet: #3C8F86;
  --qirava-indigo: #2E6B41;
  --qirava-blue: #2563EB;
  --qirava-cyan: #22D3EE;
  --qirava-sky: #38BDF8;
  --qirava-lavender: #86C1A9;

  /* UI neutrals */
  --qirava-bg: #F8FAFC;
  --qirava-bg-strong: #ECF3EC;
  --qirava-surface: #FFFFFF;
  --qirava-surface-glass: rgba(255, 255, 255, 0.78);
  --qirava-border: #DCE3F1;
  --qirava-border-strong: #C6DBC9;
  --qirava-muted: #64748B;
  --qirava-muted-2: #475569;

  /* Semantic */
  --qirava-success: #10B981;
  --qirava-warning: #F59E0B;
  --qirava-danger: #EF4444;

  /* Gradients */
  --qirava-gradient-primary: linear-gradient(135deg, #3E8551 0%, #2E9E8F 50%, #22D3EE 100%);
  --qirava-gradient-hover: linear-gradient(135deg, #2E6B41 0%, #2A8C7F 50%, #0891B2 100%);
  --qirava-gradient-soft:
    radial-gradient(circle at 18% 10%, rgba(60, 143, 134, 0.18), transparent 34%),
    radial-gradient(circle at 86% 14%, rgba(34, 211, 238, 0.16), transparent 30%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 62%, #ECF3EC 100%);

  /* Typography */
  --qirava-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --qirava-font-display: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  --qirava-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Legacy token mapping */
  --bg: var(--qirava-bg);
  --surface: var(--qirava-surface);
  --border: var(--qirava-border);
  --text: var(--qirava-ink);
  --muted: var(--qirava-muted);
  --accent: var(--qirava-green);
  --accent-hover: var(--qirava-indigo);
  --error-bg: #FEF2F2;
  --error-text: #991B1B;
}

/* ── Reset ─────────────────────────────────────────────── */

* { box-sizing: border-box; }

/* ── Base ──────────────────────────────────────────────── */

body {
  margin: 0;
  font-family: var(--qirava-font-sans);
  background: var(--qirava-gradient-soft);
  color: var(--qirava-ink);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand {
  font-family: var(--qirava-font-display);
}

/* ── Layout ────────────────────────────────────────────── */

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

/* El header es una barra a todo el ancho: su fila interior necesita MUCHO más
   aire que la columna de lectura para que el menú (8 enlaces + CTA) y el cluster
   de utilidades (tema, idioma, login/cuenta) quepan sin solaparse ni forzar
   scroll horizontal. Rompe el .wrap estrecho del contenido y usa casi todo el
   viewport con padding lateral propio. */
.site-header .wrap {
  max-width: none;
  width: 100%;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}

/* ── Header ────────────────────────────────────────────── */

.site-header {
  background: rgba(255, 255, 255, 0.76);
  border-bottom: 1px solid rgba(220, 227, 241, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  margin-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

/* tool page needs breathing room below header */
.page-transcribe .site-header { margin-bottom: 56px; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap; /* móvil lo cambia a wrap para el panel desplegable */
  min-height: 76px;
  max-width: 100%;
  min-width: 0;
}

/* Botón hamburguesa — solo visible en móvil */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--q-border, #e2e8f0);
  border-radius: var(--q-radius-md, 10px);
  background: transparent;
  color: var(--q-ink, #0f172a);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--qirava-bg-strong); color: var(--qirava-green); }
.nav-toggle:focus-visible { outline: 3px solid var(--q-focus-inset, rgba(60, 143, 134,.35)); outline-offset: 2px; }

/* ── Language switcher ────────────────────────────────── */

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-switcher a {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--qirava-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.lang-switcher a:hover {
  color: var(--qirava-green);
  background: var(--qirava-bg-strong);
}

.lang-switcher a.active {
  color: var(--qirava-green);
  background: var(--qirava-bg-strong);
  font-weight: 700;
}

.brand {
  font-weight: 700;
  color: var(--qirava-green);
  text-decoration: none;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo img {
  display: block;
  width: clamp(148px, 16vw, 196px);
  height: auto;
}

nav a {
  color: var(--qirava-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}

nav a:hover { color: var(--qirava-green); }

/* ── Site nav (company nav) ───────────────────────────── */

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  /* El menú se dimensiona a su contenido; NO crece para llenar la fila (eso
     empujaba el CTA sobre las utilidades). El cluster de utilidades se ancla a
     la derecha con margin-left:auto en .header-right. */
  flex: 0 1 auto;
  min-width: 0;
  padding-left: 24px;
}

.site-nav a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--qirava-muted-2);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 7px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--qirava-green);
  background: var(--qirava-bg-strong);
}

.site-nav a[aria-current="page"] {
  color: var(--qirava-green);
  font-weight: 600;
}

.btn-nav-cta {
  margin-left: 14px; /* separa el CTA del último enlace del menú */
  background: var(--qirava-gradient-primary);
  color: #fff !important;
  border-radius: 8px;
  padding: 7px 16px !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  transition: opacity 0.15s !important;
}

.btn-nav-cta:hover {
  opacity: 0.88;
  background: var(--qirava-gradient-hover) !important;
  color: #fff !important;
}

/* ── Page-level buttons ───────────────────────────────── */

.btn-primary {
  display: inline-block;
  background: var(--qirava-gradient-primary);
  color: #fff;
  font-family: var(--qirava-font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 10px;
  transition: opacity 0.15s;
}

.btn-primary:hover { opacity: 0.88; color: #fff; }

.btn-secondary {
  display: inline-block;
  border: 2px solid var(--qirava-border-strong);
  color: var(--qirava-green);
  font-family: var(--qirava-font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s;
}

.btn-secondary:hover {
  background: var(--qirava-bg-strong);
  border-color: var(--qirava-green);
}

/* ── Badges ───────────────────────────────────────────── */

.badge-live {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: #D1FAE5;
  color: #065F46;
}

.badge-soon {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--qirava-bg-strong);
  color: var(--qirava-muted);
}

.badge-beta {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: #E6F0E7;
  color: #234E37;
}

/* ── Product detail page ──────────────────────────────── */

.back-link {
  display: inline-block;
  font-size: 0.88rem;
  color: var(--qirava-primary);
  text-decoration: none;
  margin-bottom: 32px;
}

.back-link:hover {
  text-decoration: underline;
}

.product-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #234E37;
  background: #E6F0E7;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.product-section {
  padding: 36px 0;
  border-bottom: 1px solid var(--qirava-border);
}

.product-section h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--qirava-ink);
  margin: 0 0 12px;
}

.product-section p {
  font-size: 0.97rem;
  color: var(--qirava-muted-2);
  line-height: 1.65;
  max-width: 720px;
  margin: 0 0 16px;
}

.product-section ul,
.feature-list ul {
  color: var(--qirava-muted-2);
  font-size: 0.93rem;
  line-height: 1.75;
  padding-left: 20px;
  margin: 0 0 16px;
}

.product-section li,
.feature-list li {
  margin-bottom: 6px;
}

.product-cta {
  padding: 48px 0 32px;
  text-align: left;
}

.product-cta h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--qirava-ink);
  margin: 0 0 10px;
}

.product-cta p {
  font-size: 0.97rem;
  color: var(--qirava-muted-2);
  max-width: 600px;
  margin: 0 0 20px;
}

.product-entry--beta {
  background: #FAFAFF;
  border-radius: 8px;
  padding: 24px 24px;
  border: 1px solid #E6F0E7;
  margin-top: 8px;
}

/* ── Company homepage ─────────────────────────────────── */

.home-hero {
  text-align: center;
  padding: 80px 0 64px;
}

.home-hero .hero-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qirava-green);
  background: var(--qirava-bg-strong);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.home-hero h1 {
  font-size: clamp(1.85rem, 4.2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--qirava-ink);
  max-width: 760px;
  margin: 0 auto 20px;
}

.home-hero .lead {
  font-size: 1.12rem;
  color: var(--qirava-muted-2);
  max-width: 580px;
  margin: 0 auto 36px;
  line-height: 1.6;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Products section (homepage) ─────────────────────── */

.products-section {
  padding: 56px 0 72px;
  border-top: 1px solid var(--qirava-border);
}

.section-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qirava-muted);
  margin-bottom: 24px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.product-card {
  background: var(--qirava-surface);
  border: 1px solid var(--qirava-border);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  color: inherit;
}

.product-card--live {
  border-color: var(--qirava-border-strong);
  box-shadow: 0 2px 12px rgba(62, 133, 81, 0.08);
}

.product-card--live:hover {
  box-shadow: 0 4px 20px rgba(62, 133, 81, 0.13);
  border-color: var(--qirava-green);
}

.product-card--soon {
  opacity: 0.58;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.product-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--qirava-ink);
  margin: 0;
}

.product-card p {
  font-size: 0.86rem;
  color: var(--qirava-muted-2);
  margin: 0;
  flex: 1;
  line-height: 1.5;
}

.product-card > a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--qirava-green);
  text-decoration: none;
  margin-top: 6px;
  align-self: flex-start;
}

.product-card > a:hover { text-decoration: underline; }

/* ── Home consulting section ──────────────────────────── */

.consulting-section {
  padding: 56px 0 72px;
  border-top: 1px solid var(--qirava-border);
}

.consulting-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.section-sub {
  font-size: 0.97rem;
  color: var(--qirava-muted-2);
  margin-bottom: 28px;
  max-width: 540px;
}

.section-cta {
  margin-top: 32px;
}

.card-cta {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--qirava-green);
  margin-top: 6px;
  align-self: flex-start;
}

/* ── Request consulting page ──────────────────────────── */

.request-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 52px 0 72px;
}

.request-hero {
  margin-bottom: 48px;
}

.request-hero h1 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--qirava-ink);
  margin: 0 0 16px;
}

.request-body {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.request-services h2,
.request-next-steps h2,
.request-cta-section h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--qirava-ink);
  margin: 0 0 20px;
}

.service-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--qirava-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.service-option:hover {
  border-color: var(--qirava-border-strong);
}

.service-option--selected {
  border-color: var(--qirava-green);
  background: rgba(62, 133, 81, 0.04);
}

.service-radio {
  margin-top: 3px;
  accent-color: var(--qirava-green);
  flex-shrink: 0;
}

.service-option-body strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--qirava-ink);
  display: block;
  margin-bottom: 4px;
}

.service-option-body p {
  font-size: 0.86rem;
  color: var(--qirava-muted-2);
  margin: 0;
  line-height: 1.5;
}

.next-steps-list {
  padding-left: 20px;
  color: var(--qirava-muted-2);
  line-height: 1.8;
  font-size: 0.97rem;
}

.request-cta-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.request-cta-lead {
  font-size: 0.97rem;
  color: var(--qirava-muted-2);
  margin: 0;
}

.request-email-note {
  font-size: 0.86rem;
  color: var(--qirava-muted);
  margin: 0;
}

.request-email-note a {
  color: var(--qirava-green);
  text-decoration: none;
}

/* ── Consulting & Products detail pages ───────────────── */

.page-header {
  padding: 52px 0 36px;
  border-bottom: 1px solid var(--qirava-border);
  margin-bottom: 8px;
}

.page-header h1 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--qirava-ink);
  margin: 0 0 12px;
}

.page-header .lead,
main.wrap > h1 + .lead {
  font-size: 1.05rem;
  color: var(--qirava-muted-2);
  max-width: 640px;
  margin: 0;
  line-height: 1.6;
}

main.wrap > h1 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--qirava-ink);
  margin: 52px 0 12px;
}

.consulting-service,
.product-entry {
  padding: 40px 0;
  border-bottom: 1px solid var(--qirava-border);
}

.consulting-service:last-of-type,
.product-entry:last-of-type {
  border-bottom: none;
}

.consulting-service h2,
.product-entry h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--qirava-ink);
  margin: 0 0 12px;
}

.consulting-service p,
.product-entry p {
  font-size: 0.97rem;
  color: var(--qirava-muted-2);
  line-height: 1.65;
  max-width: 720px;
  margin: 0 0 16px;
}

.consulting-service ul,
.product-entry ul,
.consulting-service ol {
  color: var(--qirava-muted-2);
  font-size: 0.93rem;
  line-height: 1.7;
  padding-left: 20px;
  margin: 0 0 16px;
}

.page-updated,
.page-note {
  font-size: 0.82rem;
  color: var(--qirava-muted);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--qirava-border);
}

/* ── Responsive nav ───────────────────────────────────── */

@media (max-width: 1400px) {
  /* Barra cerrada en móvil/tablet/anchos intermedios: solo logo + hamburguesa.
     La navegación completa (marca ~196 + 8 enlaces + CTA ~780 + utilidades
     tema/idioma/cuenta ~305, más paddings) necesita ~1370px de contenido; solo
     cabe con separación holgada por encima de 1400px. Por debajo se colapsa al
     menú hamburguesa para evitar CUALQUIER solapamiento y scroll horizontal.
     Se prefija .header-inner para ganar en especificidad al .header-right base
     (que está más abajo en el archivo y, sin esto, reimpone display:flex). */
  .header-inner { flex-wrap: wrap; } /* permite el panel desplegable en filas completas */
  .nav-toggle { display: inline-flex; }
  .header-inner .site-nav { display: none; }
  .header-inner .header-right { display: none; margin-left: 0; padding-left: 0; border-left: none; }

  /* Barra abierta: menú y zona de cuenta se despliegan en filas completas. */
  .header-inner.nav-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    order: 3;
    gap: 2px;
    padding: 10px 0 4px;
  }
  .header-inner.nav-open .site-nav a { padding: 12px 10px; font-size: 1rem; }
  .header-inner.nav-open .site-nav .btn-nav-cta {
    margin: 8px 0 2px;
    text-align: center;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
  }
  .header-inner.nav-open .header-right {
    display: flex;
    flex-basis: 100%;
    order: 4;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-left: 0;
    padding-left: 0;
    padding-top: 12px;
    border-left: none;
    border-top: 1px solid var(--q-border, #e2e8f0);
  }
}

/* ── Hero ──────────────────────────────────────────────── */

.hero {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  padding: 28px 0 10px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qirava-green);
  background: rgba(60, 143, 134, 0.10);
  border: 1px solid rgba(60, 143, 134, 0.18);
  border-radius: 999px;
  padding: 8px 12px;
  margin: 0 0 18px;
}

.hero h1 {
  font-family: var(--qirava-font-display);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--qirava-ink);
  margin: 0 0 22px;
}

.hero h1 strong,
.gradient-text {
  background: var(--qirava-gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  max-width: 720px;
  margin: 0 auto 30px;
  color: var(--qirava-muted-2);
  font-size: clamp(1.02rem, 2.4vw, 1.22rem);
  line-height: 1.65;
}

.lead strong {
  color: var(--qirava-ink);
  font-weight: 700;
}

/* ── Source tabs ───────────────────────────────────────── */

.source-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 12px;
  background: var(--qirava-bg-strong);
  border-radius: 12px;
  padding: 4px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.source-tab {
  flex: 1;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--qirava-muted-2);
  font-family: var(--qirava-font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.source-tab:hover {
  color: var(--qirava-green);
  background: rgba(60, 143, 134, 0.08);
}

.source-tab--active {
  background: #fff;
  color: var(--qirava-green);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.10);
}

.source-tab--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.stt-disabled-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 4px 0 0;
  text-align: center;
}

.timestamps-toggle {
  margin: 10px 0 0;
  text-align: center;
}

.toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.toggle-label input[type="checkbox"] {
  accent-color: var(--accent, #2563eb);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.stt-diarization-note {
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--surface-alt, #f5f5f5);
  border-left: 3px solid var(--warning, #d97706);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
  line-height: 1.5;
}

/* ── File pick label ────────────────────────────────────── */

.file-pick-label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(220, 227, 241, 0.85);
  cursor: pointer;
  overflow: hidden;
}

.file-pick-label input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-pick-label:focus-within {
  outline: 4px solid rgba(34, 211, 238, 0.22);
  box-shadow: inset 0 0 0 1px rgba(60, 143, 134, 0.35);
}

.file-pick-icon {
  font-size: 1.15rem;
  color: var(--qirava-green);
  flex-shrink: 0;
}

#file-name-display {
  flex: 1;
  color: var(--qirava-muted);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-pick-btn {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--qirava-green);
  background: rgba(60, 143, 134, 0.08);
  border-radius: 8px;
  padding: 5px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.file-pick-label:hover .file-pick-btn {
  background: rgba(60, 143, 134, 0.15);
}

/* ── Form ──────────────────────────────────────────────── */

.transcribe-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
  padding: 10px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(199, 210, 254, 0.72);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.10);
}


.form-mode {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  grid-column: 1 / -1;
}

.form-mode[hidden] { display: none; }

@media (min-width: 680px) {
  .form-mode {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.transcribe-form input {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--qirava-ink);
  font-family: var(--qirava-font-sans);
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px rgba(220, 227, 241, 0.85);
}

.transcribe-form input::placeholder {
  color: #94A3B8;
}

.transcribe-form input:focus {
  outline: 4px solid rgba(34, 211, 238, 0.22);
  border-color: rgba(60, 143, 134, 0.55);
  box-shadow: inset 0 0 0 1px rgba(60, 143, 134, 0.35);
}

.transcribe-form button,
.btn-primary,
.btn-secondary {
  padding: 0 24px;
  min-height: 56px;
  border-radius: 16px;
  font-family: var(--qirava-font-sans);
  font-size: 0.97rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.transcribe-form button,
.btn-primary {
  background: var(--qirava-gradient-primary);
  color: #FFFFFF;
  font-weight: 800;
  border: 0;
  box-shadow: 0 18px 42px rgba(46, 107, 65, 0.28);
}

.transcribe-form button:hover,
.btn-primary:hover {
  background: var(--qirava-gradient-hover);
  transform: translateY(-1px);
  box-shadow: 0 22px 54px rgba(46, 107, 65, 0.36);
}

.transcribe-form button:active,
.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: #FFFFFF;
  border: 1px solid var(--qirava-border);
  color: var(--qirava-ink);
  font-weight: 700;
}

.btn-secondary:hover {
  border-color: var(--qirava-border-strong);
  color: var(--qirava-green);
}

/* ── Hint / notices ────────────────────────────────────── */

.hint {
  max-width: 760px;
  margin: 14px auto 0;
  font-size: 0.9rem;
  color: var(--qirava-muted);
}

.legal-notice {
  max-width: 760px;
  margin: 8px auto 0;
  font-size: 0.8rem;
  color: var(--qirava-muted);
  text-align: center;
  padding: 0;
  background: none;
  border: none;
}

.stt-confirm-panel {
  margin: 24px auto;
  max-width: 780px;
  padding: 22px;
  background: rgba(238, 242, 255, 0.88);
  border: 1px solid rgba(60, 143, 134, 0.32);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(46, 107, 65, 0.10);
}

.stt-confirm-panel h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.stt-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* ── Value flow ────────────────────────────────────────── */

.value-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 44px auto 42px;
  padding: 20px;
  max-width: 900px;
  background: var(--qirava-surface-glass);
  border: 1px solid rgba(220, 227, 241, 0.92);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.07);
}

@media (min-width: 720px) {
  .value-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
  }

  .flow-arrow {
    align-self: center;
    flex-shrink: 0;
  }
}

.flow-step {
  display: flex;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
}

.flow-step-highlight {
  background: linear-gradient(135deg, rgba(60, 143, 134, 0.10), rgba(34, 211, 238, 0.10));
  border: 1px solid rgba(60, 143, 134, 0.16);
  margin: 0;
}

.flow-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(60, 143, 134, 0.10);
  color: var(--qirava-green);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.flow-step strong {
  color: var(--qirava-ink);
  font-weight: 800;
  font-size: 0.95rem;
}

.flow-step p {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: var(--qirava-muted-2);
}

.flow-arrow {
  color: var(--qirava-lavender);
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  padding: 4px 0;
  align-self: center;
}

/* ── Sections ──────────────────────────────────────────── */

.agents-section,
.use-cases,
.vault-explainer {
  margin: 36px auto;
  max-width: 900px;
  padding: 28px 32px;
  background: var(--qirava-surface-glass);
  border: 1px solid rgba(220, 227, 241, 0.92);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.07);
}

.agents-section h2,
.use-cases h2,
.vault-explainer h2 {
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: var(--qirava-ink);
}

.section-lead {
  color: var(--qirava-muted-2);
  margin: 0 0 16px;
}

.section-note {
  font-size: 0.9rem;
  color: var(--qirava-muted);
  margin: 16px 0 0;
}

/* ── Agent chips ───────────────────────────────────────── */

.agent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.agent-chips li {
  padding: 8px 13px;
  background: rgba(238, 242, 255, 0.86);
  color: var(--qirava-ink-2);
  border: 1px solid rgba(60, 143, 134, 0.20);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
}

/* ── Use cases / vault ─────────────────────────────────── */

.use-cases ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.use-cases li {
  margin-bottom: 14px;
  padding-left: 0;
  font-size: 0.95rem;
  color: var(--qirava-muted-2);
}

.use-cases li strong {
  color: var(--qirava-ink);
}

.vault-explainer p {
  color: var(--qirava-muted-2);
  margin: 0 0 12px;
  font-size: 0.95rem;
}

/* ── Result / error panels ─────────────────────────────── */

.result-panel,
.error-panel {
  max-width: 900px;
  margin: 32px auto;
  padding: 24px;
  background: var(--qirava-surface-glass);
  border: 1px solid rgba(220, 227, 241, 0.92);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.07);
}

.result-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.result-panel h2 {
  margin: 0;
  font-size: 1.1rem;
}

.result-meta {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--qirava-muted);
}

.result-hint {
  font-size: 0.85rem;
  color: var(--qirava-muted);
  margin: -8px 0 12px;
}

.result-actions {
  display: flex;
  gap: 8px;
}

.result-text {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 440px;
  overflow: auto;
  margin: 0;
  padding: 18px;
  font-family: var(--qirava-font-mono);
  font-size: 0.86rem;
  line-height: 1.55;
  color: #1E293B;
  background: #F8FAFC;
  border: 1px solid var(--qirava-border);
  border-radius: 16px;
}

.error-panel {
  background: #FEF2F2;
  color: #991B1B;
  border-color: rgba(239, 68, 68, 0.26);
}

/* ── Ad slots ──────────────────────────────────────────── */

.ad-slot {
  min-height: 8px;
  margin: 16px auto;
  max-width: 900px;
}

/* ── FAQ ───────────────────────────────────────────────── */

.faq {
  margin: 32px auto 48px;
  max-width: 900px;
}

.faq details {
  margin-bottom: 8px;
  padding: 14px 18px;
  background: var(--qirava-surface-glass);
  border-radius: 18px;
  border: 1px solid rgba(220, 227, 241, 0.92);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.faq summary {
  font-weight: 700;
  cursor: pointer;
  color: var(--qirava-ink);
}

.faq details[open] summary {
  margin-bottom: 10px;
}

/* ── Upsell ────────────────────────────────────────────── */

.upsell {
  margin: 40px auto;
  max-width: 900px;
  padding: 24px;
  background: var(--qirava-surface-glass);
  border: 1px solid rgba(220, 227, 241, 0.92);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.07);
  text-align: center;
}

/* ── Footer ────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid rgba(220, 227, 241, 0.92);
  padding: 40px 0;
  margin-top: 56px;
  background: rgba(255, 255, 255, 0.56);
}

/* Orden vertical: (1) enlaces arriba · (2) marca en medio · (3) copyright abajo */
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  font-size: 0.9rem;
  color: var(--qirava-muted);
}

/* marca + slogan canónico, persistente en todo el sitio */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* El logo alterna variante por tema (ver theme.css); una sola imagen visible. */
.footer-brand .brand-logo img {
  height: 36px;
  width: auto;
}

.footer-slogan {
  margin: 0;
  max-width: 40ch;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.q-acro {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--qirava-ink);
  font-style: normal;
}

.q-acro b {
  color: var(--qirava-green);
  font-weight: 700;
  font-style: normal;
}

.footer-slogan-gloss {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--qirava-muted-2, #475569);
}

/* enlaces con aire, centrados */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
}

.footer-inner a {
  color: var(--qirava-muted-2, #475569);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
  transition: color 0.15s;
}

.footer-inner a:hover {
  color: var(--qirava-green);
}

/* copyright al cierre, en su propia línea */
.footer-copy {
  display: block;
  width: 100%;
  margin-top: 4px;
  color: var(--qirava-muted);
  white-space: nowrap;
}

/* ── Pro / compare ─────────────────────────────────────── */

.pro-page .compare-grid {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}

@media (min-width: 600px) {
  .pro-page .compare-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.compare-card {
  padding: 24px;
  background: var(--qirava-surface-glass);
  border: 1px solid rgba(220, 227, 241, 0.92);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.07);
}

.compare-card-featured {
  border-color: var(--qirava-border-strong);
  box-shadow: 0 0 0 2px rgba(62, 133, 81, 0.22), 0 24px 80px rgba(15, 23, 42, 0.07);
}

.compare-card ul {
  padding-left: 18px;
}

/* ── Legal pages ───────────────────────────────────────── */

.legal-page h2 {
  font-size: 1.05rem;
  margin-top: 24px;
}

.legal-note {
  font-size: 0.85rem;
  color: var(--qirava-muted);
}

/* ── Accessibility ─────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Formulario de solicitud de consultoría (real) ───────────────────────── */
.request-form{display:flex;flex-direction:column;gap:.9rem;max-width:38rem;margin-top:.6rem}
.request-form .rf-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.request-form .rf-row{grid-template-columns:1fr}}
.rf-field{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}
.rf-field > span{font-weight:600;color:#25323a}
.rf-field em{font-weight:400;color:#7d8c92;font-style:normal}
.rf-field input,.rf-field textarea{padding:.65rem .75rem;border:1px solid #cbd5d1;border-radius:.5rem;font-size:1rem;font-family:inherit}
.rf-field input:focus-visible,.rf-field textarea:focus-visible{outline:2px solid #0f766e;outline-offset:1px}
.request-hint{font-size:.85rem;color:#7d8c92;margin:.1rem 0}
#btn-request{align-self:flex-start;cursor:pointer;border:none}
#btn-request:disabled{opacity:.6;cursor:progress}
.request-result{padding:.7rem .9rem;border-radius:.5rem;font-size:.92rem}
.request-result.ok{background:#e7f3ea;color:#15803d;border:1px solid #c4e2ca}
.request-result.err{background:#f8e7e5;color:#b4231c;border:1px solid #eec6c1}

/* ── Landing v2: casos de uso (cards) + compatibilidad IA (fusionado) ─────── */
.use-cases .uc-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--q-space-4);
  margin-top:var(--q-space-5);
}
@media(max-width:900px){ .use-cases .uc-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .use-cases .uc-grid{ grid-template-columns:1fr; } }
.uc-card{
  background:var(--q-surface); border:1px solid var(--q-border);
  border-radius:var(--q-radius-lg); padding:var(--q-space-5);
  display:flex; flex-direction:column; gap:var(--q-space-2);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.uc-card:hover{ border-color:var(--q-border-strong); box-shadow:var(--q-shadow-card); transform:translateY(-2px); }
.uc-ico{ font-size:1.7rem; line-height:1; }
.uc-card h3{ margin:0; font-family:var(--q-font-display); font-size:1.02rem; color:var(--q-ink); }
.uc-card p{ margin:0; color:var(--q-muted-2); font-size:.92rem; line-height:1.5; }

.ai-compat{ text-align:center; }
.ai-compat .compat-sub{ color:var(--q-muted); font-size:.95rem; margin:.3rem auto var(--q-space-4); max-width:44rem; }
.tool-strip{
  list-style:none; margin:var(--q-space-4) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--q-space-3); justify-content:center;
}
.tool-card{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1.05rem; border-radius:var(--q-radius-pill);
  background:var(--q-surface); border:1px solid var(--q-border);
  color:var(--q-ink); text-decoration:none; font-weight:600; font-size:.95rem;
  box-shadow:var(--q-shadow-sm); transition:transform .15s, box-shadow .15s, border-color .15s;
}
.tool-card::before{ content:""; width:.7rem; height:.7rem; border-radius:50%; background:var(--tool-color,#94A3B8); }
.tool-card:hover{ transform:translateY(-2px); box-shadow:var(--q-shadow-card-hover); border-color:var(--tool-color,var(--q-border-strong)); color:var(--q-ink); }
.tool-card[data-tool="chatgpt"]{ --tool-color:#10A37F; }
.tool-card[data-tool="claude"]{ --tool-color:#D97757; }
.tool-card[data-tool="cursor"]{ --tool-color:#111827; }
.tool-card[data-tool="copilot"]{ --tool-color:#6E40C9; }
.tool-card[data-tool="gemini"]{ --tool-color:#4285F4; }
.tool-card[data-tool="customgpt"]{ --tool-color:#10A37F; }
.tool-card:focus-visible{ outline:3px solid var(--q-focus-inset); outline-offset:2px; }

/* ── Diagrama de flujo (fuentes → agente) ────────────────────────────────── */
.flow-explainer{ text-align:center; }
.flow-diagram{
  max-width:940px; margin:var(--q-space-5) auto 0; padding:var(--q-space-5);
  background:var(--q-surface); border:1px solid var(--q-border);
  border-radius:var(--q-radius-2xl); box-shadow:var(--q-shadow-card);
  overflow-x:auto;
}
.flow-diagram svg{ min-width:560px; }
.flow-note{ color:var(--q-muted); font-size:.9rem; margin-top:var(--q-space-4); }
.flow-note a{ color:var(--q-accent-hover); font-weight:600; }

/* ── ai-compat: de ladrillo a panel con identidad ────────────────────────── */
.ai-compat{
  text-align:center; max-width:900px; margin:var(--q-space-8, 32px) auto 0;
  padding:var(--q-space-8, 36px) var(--q-space-6, 28px);
  background:var(--q-gradient-soft, #f6f8ff);
  border:1px solid var(--q-border, #e3e8f2); border-radius:var(--q-radius-2xl, 22px);
}
.ai-compat h2{ font-family:var(--q-font-display, Sora), sans-serif; font-size:clamp(1.4rem,3vw,1.9rem); color:var(--q-ink,#0B102A); margin:0 0 var(--q-space-3,12px); }
.ai-compat .section-lead{ color:var(--q-muted-2,#475569); max-width:44rem; margin:0 auto var(--q-space-2,8px); font-size:1.02rem; line-height:1.6; }
.ai-compat .compat-sub{ color:var(--q-muted,#64748B); max-width:42rem; margin:0 auto var(--q-space-5,20px); font-size:.95rem; line-height:1.55; }

/* ── Franja de compatibilidad: logos reales reemplazan el punto de color ── */
.tool-card::before{ display:none; }
.tool-card img{ width:20px; height:20px; object-fit:contain; display:block; }

/* ── ai-compat: panel de dos zonas (herramientas | acciones) ─────────────── */
.compat-panel{
  display:grid; grid-template-columns:1.4fr 1fr; gap:var(--q-space-5, 22px);
  align-items:center; margin-top:var(--q-space-5, 22px); text-align:left;
}
.compat-tools{
  background:var(--q-surface, #fff); border:1px solid var(--q-border, #e3e8f2);
  border-radius:var(--q-radius-xl, 18px); padding:var(--q-space-5, 20px);
}
.compat-tools .compat-sub{ margin:0 0 var(--q-space-3, 12px); text-align:left; }
.compat-tools .tool-strip{ justify-content:flex-start; margin-top:0; }
.compat-actions{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--q-space-3, 12px);
}
.compat-actions li{
  display:flex; align-items:center; gap:.65rem;
  background:var(--q-surface, #fff); border:1px solid var(--q-border, #e3e8f2);
  border-radius:var(--q-radius-lg, 14px); padding:.7rem .9rem;
  font-family:var(--q-font-sans, Inter), sans-serif; font-weight:600; color:var(--q-ink, #0B102A); font-size:.96rem;
}
.compat-actions__ic{ font-size:1.15rem; line-height:1; flex:none; }
@media (max-width:760px){ .compat-panel{ grid-template-columns:1fr; } }

/* ── flow-explainer: escala por volumen (1 md → baúl → RAG) ──────────────── */
.flow-tiers{
  list-style:none; margin:var(--q-space-6, 28px) auto 0; padding:0; max-width:920px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--q-space-4, 18px);
}
@media (max-width:820px){ .flow-tiers{ grid-template-columns:1fr; max-width:460px; } }
.flow-tier{
  display:flex; align-items:center; gap:var(--q-space-3, 12px); text-align:left;
  background:var(--q-surface, #fff); border:1px solid var(--q-border, #e3e8f2);
  border-radius:var(--q-radius-xl, 18px); box-shadow:var(--q-shadow-card);
  padding:var(--q-space-5, 20px);
}
.flow-tier__count{
  flex:none; min-width:64px; text-align:center;
  font-family:var(--q-font-display, Sora), sans-serif; font-weight:800; font-size:.9rem;
  color:#fff; background:var(--q-gradient-primary, linear-gradient(135deg,#3E8551,#22B6C6));
  border-radius:var(--q-radius-pill, 999px); padding:.4rem .55rem;
}
.flow-tier__arrow{ color:var(--q-brand, #3E8551); font-weight:800; flex:none; }
.flow-tier__out strong{
  display:block; font-family:var(--q-font-display, Sora), sans-serif; font-size:1.02rem;
  color:var(--q-ink, #0B102A); margin-bottom:2px;
}
.flow-tier__out p{ margin:0; color:var(--q-muted-2, #475569); font-size:.9rem; line-height:1.45; }
.flow-approx{ color:var(--q-muted, #64748B); font-size:.88rem; margin-top:var(--q-space-4, 18px); }

/* ── Páginas de cuenta/pago (checkout, set-password, captive) ─────────────── */
.auth-wrap{ max-width:30rem; margin:0 auto; padding:2.6rem 1.1rem 4rem; font-family:var(--q-font-sans, Inter), sans-serif; text-align:center; }
.auth-wrap .brand-logo{ display:inline-flex; margin-bottom:1.6rem; }
.auth-card{
  background:var(--q-surface, #fff); border:1px solid var(--q-border, #e2e8f0);
  border-radius:var(--q-radius-2xl, 20px); box-shadow:var(--q-shadow-panel, 0 20px 50px rgba(15,23,42,.10));
  padding:2rem 1.8rem; text-align:left;
}
.auth-eyebrow{ display:inline-block; font-family:var(--q-font-sans, Inter), sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--q-brand, #3E8551); margin-bottom:.7rem; }
.auth-card h1{ font-family:var(--q-font-display, Sora), sans-serif; font-weight:800; font-size:1.5rem; color:var(--q-ink, #0B102A); margin:0 0 .5rem; }
.auth-sub{ color:var(--q-muted-2, #475569); font-size:.96rem; line-height:1.55; margin:0 0 1.3rem; }
.auth-form{ display:flex; flex-direction:column; gap:.5rem; margin:0; }
.auth-form label{ font-weight:600; font-size:.86rem; color:var(--q-ink, #0B102A); margin-top:.4rem; }
.auth-form input{
  width:100%; box-sizing:border-box; padding:.75rem .85rem; font-size:1rem;
  border:1px solid var(--q-border-strong, #cbd5e1); border-radius:var(--q-radius-md, 10px);
  font-family:var(--q-font-sans, Inter), sans-serif; color:var(--q-ink, #0B102A); background:#fff;
}
.auth-form input:focus-visible{ outline:3px solid var(--q-focus-inset, rgba(60, 143, 134,.35)); outline-offset:1px; border-color:var(--q-brand, #3E8551); }
.auth-form .buy-btn, .auth-card .buy-btn{
  width:100%; margin-top:.9rem; padding:.85rem; border:none; border-radius:var(--q-radius-xl, 14px);
  background:var(--q-gradient-primary, linear-gradient(135deg,#3E8551,#22B6C6)); color:#fff; font-size:1rem;
  font-family:var(--q-font-sans, Inter), sans-serif; font-weight:800; cursor:pointer; box-shadow:var(--q-shadow-btn);
  transition:transform .15s, box-shadow .15s;
}
.auth-card .buy-btn:hover{ transform:translateY(-1px); box-shadow:var(--q-shadow-btn-hover); }
.auth-card .buy-btn:focus-visible{ outline:3px solid var(--q-focus-inset); outline-offset:2px; }
.auth-error{ background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.3); color:#b91c1c; border-radius:var(--q-radius-md,10px); padding:.6rem .8rem; font-size:.9rem; margin:0 0 1rem; }
.auth-mock{ margin:1.2rem 0 0; font-size:.8rem; color:var(--q-muted-2, #475569); background:var(--q-bg-strong, #f3f5fb); border:1px solid var(--q-border, #e2e8f0); border-radius:var(--q-radius-md, 10px); padding:.7rem .85rem; }
.auth-alt{ text-align:center; margin:1.1rem 0 0; font-size:.9rem; }
.auth-alt a, .auth-alt .linklike{ color:var(--q-accent-hover, #2E6B41); text-decoration:none; font-weight:600; background:none; border:none; cursor:pointer; font-family:inherit; font-size:.9rem; }
.auth-alt a:hover, .auth-alt .linklike:hover{ text-decoration:underline; }

/* ── Zona derecha del header: idioma (dropdown) + cuenta/login ────────────── */
/* Login SIEMPRE al extremo derecho; el idioma a su izquierda como menú
   desplegable compacto (estilo YouTube). */
.header-right{
  display:flex; align-items:center; gap:.6rem;
  margin-left:auto; padding-left:20px; /* ancla el cluster de utilidades a la esquina superior derecha */
  border-left:1px solid var(--q-border, #e2e8f0);
  flex:0 0 auto;
}

/* Contenedor genérico de dropdown */
.hdr-dd{ position:relative; }
.hdr-dd-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--q-font-sans, Inter), sans-serif; font-weight:600; font-size:.86rem;
  color:var(--q-muted-2, #475569); background:transparent; cursor:pointer;
  border:1px solid var(--q-border, #e2e8f0); border-radius:999px;
  padding:.4rem .6rem; transition:background .15s, color .15s, border-color .15s;
}
.hdr-dd-btn:hover{ color:var(--q-brand, #3E8551); border-color:var(--q-brand, #3E8551); background:var(--qirava-bg-strong); }
.hdr-dd-btn:focus-visible{ outline:3px solid var(--q-focus-inset, rgba(60, 143, 134,.35)); outline-offset:2px; }
.hdr-dd-cur{ letter-spacing:.03em; }
.hdr-dd-chev{ opacity:.7; transition:transform .18s; }
.hdr-dd.open .hdr-dd-chev{ transform:rotate(180deg); }

/* Panel del dropdown */
.hdr-dd-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:40;
  min-width:172px; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--q-border, #e2e8f0);
  border-radius:var(--q-radius-lg, 14px); box-shadow:var(--q-shadow-md, 0 12px 32px rgba(15,23,42,.14));
}
.hdr-dd-menu li{ list-style:none; }
.hdr-dd-menu a,
.hdr-dd-menu .account-menu-logout{
  display:block; width:100%; text-align:left; box-sizing:border-box;
  font-family:var(--q-font-sans, Inter), sans-serif; font-size:.9rem; font-weight:500;
  color:var(--q-ink, #0f172a); text-decoration:none; background:transparent; border:0; cursor:pointer;
  padding:.55rem .65rem; border-radius:var(--q-radius-md, 9px); transition:background .12s, color .12s;
}
.hdr-dd-menu a:hover,
.hdr-dd-menu .account-menu-logout:hover{ background:var(--qirava-bg-strong); color:var(--q-brand, #3E8551); }
.hdr-dd-menu a.is-current{ color:var(--q-brand, #3E8551); font-weight:700; }
.hdr-dd-menu a:focus-visible,
.hdr-dd-menu .account-menu-logout:focus-visible{ outline:3px solid var(--q-focus-inset, rgba(60, 143, 134,.35)); outline-offset:-1px; }

/* Avatar de cuenta (logueado) */
.account-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px; cursor:pointer;
  border:0; color:#fff; font-family:var(--q-font-display, Sora), sans-serif; font-weight:700; font-size:.95rem;
  background:var(--qirava-gradient-primary, linear-gradient(135deg,#3E8551,#22B6C6));
  box-shadow:0 2px 8px rgba(62, 133, 81,.28); transition:filter .15s, box-shadow .15s;
}
.account-avatar:hover{ filter:brightness(1.05); box-shadow:0 4px 12px rgba(62, 133, 81,.36); }
.account-avatar:focus-visible{ outline:3px solid var(--q-focus-inset, rgba(60, 143, 134,.4)); outline-offset:2px; }
.account-menu{ min-width:220px; }
.account-menu-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.5rem .65rem .6rem; margin-bottom:4px; border-bottom:1px solid var(--q-border, #eef1f6);
}
.account-menu-name{
  font-size:.82rem; font-weight:600; color:var(--q-muted-2, #475569);
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.account-menu-badge{
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; background:var(--qirava-gradient-primary, linear-gradient(135deg,#3E8551,#22B6C6));
  padding:2px 7px; border-radius:999px; flex:none;
}

/* Botón de login (pill, estilo YouTube) — extremo derecho */
.btn-login{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; flex:none;
  font-family:var(--q-font-sans, Inter), sans-serif; font-weight:600; font-size:.9rem;
  color:var(--q-brand, #3E8551); text-decoration:none;
  border:1px solid var(--q-brand, #3E8551); border-radius:999px;
  transition:background .15s, color .15s;
}
.btn-login:hover{ background:var(--q-brand, #3E8551); color:#fff; }
.btn-login:focus-visible{ outline:3px solid var(--q-focus-inset, rgba(60, 143, 134,.35)); outline-offset:2px; }

/* ── Aviso FREE sutil y elegante (/transcribe) ─────────────────────────────
   Presentación fina y secundaria del plan gratis: un badge tenue, los límites
   como texto de apoyo y un indicador discreto tipo «descargar gratis». Sin
   regaño ni venta forzada. Solo estilo — el copy legal no se reescribe.
   Consume tokens de fase (--q-*) para invertir correctamente en noche. */
.plan-bar{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  margin:1.5rem auto 0; padding:1.1rem 1.25rem;
  max-width:34rem;
  background:var(--q-surface, #fff);
  border:1px solid var(--q-border, var(--qirava-border));
  border-radius:14px;
  box-shadow:0 2px 12px rgba(62, 133, 81, 0.08);
  font-size:.86rem; line-height:1.5; text-align:center;
}
.plan-bar__badge{
  display:inline-flex; align-items:center; gap:.35rem; flex:none;
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:var(--q-brand, var(--qirava-green));
  background:rgba(60,143,134,.10);
  border:1px solid rgba(60,143,134,.22);
  border-radius:999px; padding:.18rem .6rem;
}
.plan-bar__badge::before{
  content:"↓"; font-weight:800; font-size:.8em; line-height:1;
  opacity:.9;
}
.plan-bar__limits{
  margin:0; max-width:32rem;
  color:var(--q-muted-2, var(--qirava-muted));
}
.plan-bar__cta{
  flex:none;
  font-size:.8rem; font-weight:600; text-decoration:none;
  color:var(--q-brand, var(--qirava-green));
  border-bottom:1px dashed transparent;
  transition:color .15s, border-color .15s;
}
.plan-bar__cta:hover{
  color:var(--q-brand, var(--qirava-green));
  border-bottom-color:var(--q-brand, var(--qirava-green));
}
.plan-bar__cta:focus-visible{
  outline:3px solid var(--q-focus-inset, rgba(60,143,134,.35)); outline-offset:3px;
}

/* La variante --premium (premium_transcribe.html) mantiene layout horizontal,
   más ancho y con email/logout inline: no hereda el centrado de la base free. */
.plan-bar--premium{
  flex-direction:row; align-items:center; flex-wrap:wrap; gap:.7rem;
  max-width:none; text-align:left; margin:1rem 0 0;
}
.plan-bar--premium .plan-bar__limits{ flex:1 1 12rem; min-width:0; max-width:none; }
.plan-bar--premium .plan-bar__cta{ margin-left:auto; color:var(--q-muted-2, var(--qirava-muted)); }
.plan-bar--premium .plan-bar__cta:hover{ color:var(--q-brand, var(--qirava-green)); }
@media (max-width:34rem){
  .plan-bar--premium .plan-bar__cta{ margin-left:0; }
}