/* Variables de diseño y estilos generales. */
/* Alephsia / Alpha — Color tokens (Manual de Identidad + Alpha_Landing) */
:root {
  /* Paleta oficial */
  --emerald-primary: #33D6BE;
  --emerald-deep: #25AC99;
  --emerald-glow: #84F7E0;
  --midnight: #0A0F1F;
  --black-deep: #000000;
  --white-clean: #FFFFFF;
  --dark-neutral: #1C1F26;
  --medium-neutral: #8A9BA8;
  --light-neutral: #E6E8EB;

  /* Semantic — surfaces */
  --surface-page: var(--midnight);
  --surface-deep: var(--black-deep);
  --surface-card: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.005) 100%);
  --surface-card-hover: linear-gradient(180deg, rgba(51,214,190,0.04) 0%, rgba(255,255,255,0.005) 100%);
  --surface-input: rgba(255,255,255,0.04);
  --surface-input-focus: rgba(51,214,190,0.04);
  --surface-nav: rgba(10, 15, 31, 0.7);
  --surface-badge-active: rgba(51,214,190,0.1);
  --surface-badge-muted: rgba(255,255,255,0.05);

  /* Semantic — text */
  --text-primary: var(--white-clean);
  --text-body: rgba(255,255,255,0.7);
  --text-secondary: rgba(255,255,255,0.65);
  --text-muted: rgba(255,255,255,0.6);
  --text-faint: rgba(255,255,255,0.4);
  --text-accent: var(--emerald-primary);
  --text-label: var(--medium-neutral);
  --text-on-accent: var(--midnight);

  /* Semantic — borders */
  --border-subtle: rgba(255,255,255,0.05);
  --border-default: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);
  --border-accent: rgba(51,214,190,0.3);
  --border-accent-strong: var(--emerald-primary);

  /* Effects */
  --glow-cta: 0 0 30px rgba(0, 199, 118, 0.4);
  --glow-cta-lg: 0 0 40px rgba(0, 199, 118, 0.4);
  --glow-dot: 0 0 12px var(--emerald-primary);
}


/* Alephsia / Alpha — Typography tokens */
:root {
  /* Families (from Alpha_Landing, the shipped product artifact) */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  /* Manual de Identidad wordmark family (logo lockups only) */
  --font-wordmark: 'Montserrat', var(--font-body);

  /* Scale */
  --text-h1: clamp(48px, 7vw, 96px);
  --text-h2: clamp(36px, 5vw, 64px);
  --text-manifesto: clamp(28px, 4vw, 52px);
  --text-h3: 28px;
  --text-h4: 24px;
  --text-stat: 44px;
  --text-lead: 20px;
  --text-desc: 18px;
  --text-base: 15px;
  --text-sm: 14px;
  --text-caption: 12px;
  --text-micro: 11px;

  /* Weights — display serif runs light */
  --weight-display-light: 300;
  --weight-display: 400;
  --weight-display-medium: 500;
  --weight-body: 300;
  --weight-body-regular: 400;
  --weight-medium: 500;

  /* Letterspacing */
  --tracking-display: -0.04em;
  --tracking-title: -0.03em;
  --tracking-h3: -0.02em;
  --tracking-label: 0.25em;
  --tracking-mono: 0.2em;
  --tracking-wide: 0.3em;

  --leading-display: 1.02;
  --leading-title: 1.05;
  --leading-body: 1.6;
}


/* Alephsia / Alpha — Spacing, radii, layout */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 80px;
  --space-section: 140px;

  /* Radii — square-leaning system */
  --radius-sm: 2px;
  --radius-base: 4px;   /* buttons, inputs */
  --radius-card: 8px;   /* module cards */
  --radius-pill: 100px; /* phase badges */

  /* Layout */
  --container-max: 1280px;
  --container-pad: 32px;

  /* Motion */
  --ease-out: ease-out; /* @kind other */
  --duration-fast: 0.2s; /* @kind other */
  --duration-base: 0.3s; /* @kind other */
  --duration-slow: 0.4s; /* @kind other */
  --duration-reveal: 0.8s; /* @kind other */
}


/* Base element styles shared by all Alephsia surfaces */
body {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
a { color: var(--text-body); text-decoration: none; transition: color var(--duration-fast); }
a:hover { color: var(--emerald-primary); }
::selection { background: var(--emerald-primary); color: var(--midnight); }



  html:root { --font-display: 'Jost', 'Futura', system-ui, sans-serif; --font-wordmark: 'Jost', system-ui, sans-serif; }
  html, body { margin: 0; padding: 0; background: #0A0F1F; scroll-behavior: smooth; }
  body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: #33D6BE; text-decoration: none; }
  a:hover { color: #84F7E0; }


/* Contenedores, en el mismo orden que index.html. */

/* 01 · Presentación principal */
.seccion-inicio {
  position: relative;
  z-index: 2;
  background: var(--black-deep);
  overflow: hidden;
}

/* Navegación principal */
.seccion-navegacion {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 50;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

/* 02 · El problema */
.seccion-problema {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 32px;
}

/* Titular e imagen explicativa del problema. */
.problema-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}
.problema-imagen {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-card);
  background: #020a0e;
  cursor: zoom-in;
}
.problema-imagen img {
  display: block;
  width: 100%;
  height: auto;
}

/* 03 · Propuesta de valor */
.seccion-propuesta {
  position: relative;
  z-index: 1;
  background: var(--black-deep);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

/* 04 · Cómo operamos */
.seccion-modelo {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 32px;
}

/* 05 · Soluciones */
.seccion-soluciones {
  position: relative;
  z-index: 1;
  background: var(--black-deep);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

/* 06 · Tres caminos */
.seccion-caminos {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 32px;
}

/* 07 · Diagnóstico y formulario */
.seccion-diagnostico {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px 140px;
}

/* 08 · Discovery Sprint y contacto */
.seccion-sprint {
  position: relative;
  z-index: 1;
  background: var(--black-deep);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}

/* 09 · Pie de página */
.seccion-pie-de-pagina {
  position: relative;
  z-index: 1;
  background: var(--black-deep);
}

/* ==================== Identidad y accesibilidad ==================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 105px; }
.page-shell { overflow-wrap: break-word; }
.page-shell :where(div, section, header, footer, form) { min-width: 0; }
img, video { max-width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--emerald-glow);
  outline-offset: 5px;
}
section, #inicio, #contacto { scroll-margin-top: 105px; }

/* La ventana del logo muestra la imagen original sin modificar sus colores. */
.brand-logo {
  position: relative;
  display: block;
  flex: 0 0 166px;
  width: 166px;
  height: 64px;
  overflow: hidden;
  border-radius: 12px;
}
.brand-logo img {
  position: absolute;
  width: 289px;
  max-width: none;
  height: auto;
  left: -75px;
  top: -62px;
}
.brand-logo-footer { flex: none; width: 210px; height: 84px; }
.brand-logo-footer img { width: 366px; left: -95px; top: -78px; }

/* ==================== Navegación ==================== */
.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 6px 12px;
  border: 1px solid rgba(51, 214, 190, .23);
  border-radius: 24px;
  background: rgba(8, 13, 24, .94);
  backdrop-filter: blur(22px);
  box-shadow: 0 12px 40px #0005, inset 0 1px 0 #ffffff08;
}
.nav-links { display: flex; flex: 1; align-items: center; justify-content: center; gap: clamp(12px, 1.5vw, 24px); }
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 500;
  color: var(--emerald-primary);
  white-space: nowrap;
  transition: color .25s, transform .25s, text-shadow .25s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--emerald-primary), var(--emerald-glow));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--emerald-glow); transform: translateY(-2px); text-shadow: 0 0 18px #33d6be70; }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-agenda {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 12px;
  color: #071914;
  background: var(--emerald-primary);
  font-size: 12px;
  font-weight: 600;
  transition: background .25s, box-shadow .25s;
}
.nav-agenda:hover, .nav-agenda:focus-visible { color: #071914; background: var(--emerald-glow); box-shadow: 0 0 22px #33d6be35; }
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 44px;
  border: 1px solid #33d6be40;
  border-radius: 12px;
  background: #33d6be0c;
  color: var(--emerald-glow);
  font-size: 24px;
  cursor: pointer;
}

/* ==================== Luz, profundidad y movimiento ==================== */
.hero-highlight { color: var(--emerald-primary); font-weight: 400; text-shadow: 0 0 42px #33d6be20; }
.hero-media { box-shadow: 0 0 0 8px #33d6be04, 0 22px 90px #33d6be18; animation: media-glow 7s ease-in-out infinite; }
.hero-grid > div:first-child { animation: arrive .8s ease-out both; }
.industry-strip span:nth-child(odd) { transition: color .25s, text-shadow .25s; }
.industry-strip span:nth-child(odd):hover { color: var(--emerald-glow); text-shadow: 0 0 20px #33d6be70; }
.seccion-problema > div:last-child > div,
.seccion-soluciones > div > div > div {
  transition: box-shadow .3s, transform .3s;
}
.seccion-problema > div:last-child > div:hover,
.seccion-soluciones > div > div > div:hover {
  box-shadow: inset 0 3px 0 var(--emerald-primary), inset 0 0 60px #33d6be08;
  transform: translateY(-3px);
}
.seccion-problema, .seccion-modelo, .seccion-caminos { border-top: 1px solid #33d6be14; }
@keyframes arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes media-glow { 50% { box-shadow: 0 0 0 8px #33d6be08, 0 22px 90px #33d6be30; } }

/* ==================== Tablet y menú móvil ==================== */
@media (max-width: 1099px) {
  .seccion-navegacion { padding: 0 20px; }
  .nav-bar { gap: 12px; }
  .nav-agenda { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    padding: 16px;
    border: 1px solid #33d6be40;
    border-radius: 20px;
    background: #080d18;
    box-shadow: 0 18px 40px #0008;
    max-height: calc(100dvh - 125px);
    overflow-y: auto;
  }
  .nav-links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; animation: arrive .2s ease-out; }
  .nav-links a { padding: 8px 12px; font-size: 15px; border-radius: 8px; }
  .nav-links a:hover { background: #33d6be0b; }
  .hero-grid { padding-top: 70px !important; gap: 40px !important; }
}

/* ==================== Teléfonos: columnas y espaciados ==================== */
@media (max-width: 767px) {
  :root { --text-h2: clamp(30px, 8vw, 42px); }
  .seccion-navegacion { top: 8px; padding: 0 12px; }
  .nav-bar { gap: 8px; border-radius: 18px; padding: 5px 8px; }
  .brand-logo { width: 130px; flex-basis: 130px; height: 52px; }
  .brand-logo img { width: 226px; left: -59px; top: -47px; }
  .nav-agenda { min-height: 44px; padding: 9px 12px; font-size: 12px; }
  .nav-agenda span { display: none; }
  .contact-strip { padding: 96px 20px 0 !important; }
  .contact-strip > div { margin-left: 0 !important; gap: 12px 24px !important; font-size: 12px !important; }
  .hero-grid { padding: 48px 20px 56px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
  .hero-grid h1 { font-size: clamp(36px, 9vw, 60px) !important; line-height: 1.08 !important; }
  .hero-grid p { font-size: 16px !important; margin-top: 24px !important; }
  .hero-grid > div:first-child > div:first-child { font-size: 10px !important; letter-spacing: .13em !important; line-height: 1.8; }
  .hero-actions { margin-top: 28px !important; gap: 12px !important; }
  .hero-actions a { width: 100%; justify-content: center; white-space: normal !important; text-align: center; padding: 15px 18px !important; }
  .industry-strip { padding: 22px 20px !important; gap: 12px 18px !important; font-size: 13px !important; letter-spacing: .1em !important; }
  .seccion-problema, .seccion-modelo, .seccion-caminos { padding: 64px 20px; }
  .seccion-propuesta > div, .seccion-soluciones > div, .seccion-sprint > div:last-child { padding: 64px 20px !important; }
  .seccion-problema > div:first-child, .seccion-propuesta > div { gap: 28px !important; }
  .seccion-problema > div:last-child, .seccion-modelo > div:last-child,
  .seccion-soluciones > div > div:last-child, .seccion-caminos > div:last-child,
  .seccion-sprint > div:last-child > div { margin-top: 36px !important; }
  .seccion-problema > div:last-child > div, .seccion-soluciones > div > div:last-child > div,
  .seccion-caminos > div:last-child > div { padding: 28px 22px !important; }
  .seccion-propuesta > div > div:last-child > div { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; padding: 24px !important; }
  .seccion-diagnostico { padding: 0 20px 64px; }
  .diagnostic-panel { padding: 28px 22px !important; gap: 32px !important; grid-template-columns: minmax(0, 1fr) !important; }
  input { font-size: 16px !important; max-width: 100%; }
  .sprint-panel { grid-template-columns: minmax(0, 1fr) !important; }
  .sprint-panel > div { padding: 28px 20px !important; border-right: 0 !important; }
  .contact-panel { border-top: 1px solid var(--border-default); }
  .contact-panel a { white-space: normal !important; overflow-wrap: anywhere; }
  .seccion-pie-de-pagina > div:first-child { padding: 48px 20px !important; gap: 32px !important; grid-template-columns: minmax(0, 1fr) !important; }
  .footer-brand { grid-column: auto !important; }
  .brand-logo-footer { width: 166px; height: 64px; }
  .brand-logo-footer img { width: 289px; left: -75px; top: -62px; }
  .seccion-pie-de-pagina > div:last-child > div { padding: 24px 20px 100px !important; font-size: 10px !important; }
  .whatsapp-float { right: 16px !important; bottom: max(16px, env(safe-area-inset-bottom)) !important; padding: 14px !important; }
  .whatsapp-float > span { display: none; }
}
@media (max-width: 359px) {
  .brand-logo { width: 108px; flex-basis: 108px; }
  .brand-logo img { width: 188px; left: -49px; top: -35px; }
  .nav-agenda { padding: 9px; font-size: 11px; }
}

/* Respeta la preferencia de reducir movimiento, incluidos componentes originales. */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .page-shell a:hover, .page-shell button:hover, .page-shell div:hover { transform: none !important; }
}

@media (max-width: 767px) {
  .problema-intro { grid-template-columns: minmax(0, 1fr); }
}

/* ==================== Diagnóstico interactivo ==================== */
.diagnostic-widget, .diag-dialog {
  --diag-surface: #101b28;
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
}
.diagnostic-widget {
  padding: clamp(24px, 5vw, 64px);
  border: 1px solid var(--border-accent);
  border-radius: 20px;
  background: radial-gradient(ellipse at top left, #33d6be13, transparent 65%), #0b1320;
}
.diag-heading { padding-bottom: 28px; border-bottom: 1px solid var(--border-default); margin-bottom: 32px; }
.diag-eyebrow { color: var(--emerald-primary); font: 11px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .16em; }
.diag-heading h2, .diag-dialog h2 { font: 400 clamp(30px, 3.4vw, 48px)/1.15 var(--font-display); margin: 16px 0 0; }
.diag-heading em { color: var(--emerald-primary); }
.diag-subtitle { margin: 10px 0 0; font-size: 15px; font-style: italic; color: var(--text-body); }
.diag-cta-text { margin: 24px 0 0; font-size: 16px; color: var(--emerald-glow); }
.diag-intro h3, .diag-question h3, .diag-complete h3 { font: 400 clamp(23px, 2.6vw, 32px)/1.3 var(--font-display); margin: 24px 0 12px; scroll-margin-top: 120px; }
.diag-intro > p, .diag-complete > p, .diag-dialog p { color: var(--text-body); }
.diag-tags, .diag-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.diag-tags span { padding: 5px 12px; border: 1px solid var(--border-accent); border-radius: 24px; color: var(--emerald-glow); font-size: 12px; }
.diag-profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0 16px; }
.diag-profile label { font-size: 13px; color: var(--text-body); }
.diag-profile input { display: block; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid var(--border-default); border-radius: 8px; background: #ffffff06; color: white; font: inherit; }
.diag-profile .diag-field-wide { grid-column: 1 / -1; }
.diag-note { font-size: 13px; color: #a2b4bf; }
.diag-button, .diag-close, .diag-link { font: 500 14px/1.4 var(--font-body); cursor: pointer; }
.diag-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 20px; border: 1px solid transparent; border-radius: 10px; background: var(--emerald-primary); color: #061b17; transition: background .2s, box-shadow .2s; }
.diag-button:hover { background: var(--emerald-glow); color: #061b17; box-shadow: 0 0 22px #33d6be20; }
.diag-secondary { background: transparent; border-color: #33d6be55; color: var(--emerald-glow); }
.diag-secondary:hover { background: #33d6be12; color: var(--emerald-glow); }
.diag-button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.diag-link { background: none; border: 0; color: #a2b4bf; padding: 12px 0; text-decoration: underline; }
.diag-progress-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; color: var(--emerald-glow); font-size: 12px; }
.diagnostic-widget progress, .diag-dialog meter { width: 100%; height: 8px; margin: 12px 0; accent-color: var(--emerald-primary); border: 0; border-radius: 99px; overflow: hidden; background: #ffffff12; }
progress::-webkit-progress-bar { background: #ffffff12; }
progress::-webkit-progress-value { background: var(--emerald-primary); }
.diag-options { display: grid; gap: 10px; margin: 24px 0; padding: 0; border: 0; min-width: 0; }
.diag-option { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border: 1px solid var(--border-default); border-radius: 12px; background: #ffffff03; cursor: pointer; transition: border-color .2s, background .2s; }
.diag-option:hover, .diag-option:focus-within { border-color: var(--emerald-primary); }
.diag-option.is-selected { border-color: var(--emerald-primary); background: #33d6be10; }
.diag-option input { flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--emerald-primary); }
.diag-option-label { display: block; font-size: 15px; }
.diag-option small { display: block; margin-top: 4px; font-size: 12px; color: #a2b4bf; }
.diag-error { color: #ffb4b4 !important; }

/* Modal nativo: foco contenido, Escape y desplazamiento independiente. */
.diag-dialog { position: fixed; inset: 0; width: min(840px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; margin: auto; border: 1px solid #33d6be55; border-radius: 20px; background: #0b1320; overflow: auto; overscroll-behavior: contain; box-shadow: 0 30px 100px #0009; }
.diag-dialog::backdrop { background: #02080de0; backdrop-filter: blur(6px); }
.diag-dialog-body { padding: clamp(22px, 5vw, 42px); }
.diag-close { position: sticky; top: 12px; display: block; margin-left: auto; padding: 10px 16px; border: 1px solid var(--border-accent); border-radius: 9px; color: var(--emerald-glow); background: #101b28; z-index: 1; }
.diag-score { display: flex; gap: 12px; align-items: baseline; color: var(--emerald-primary); margin-top: 24px; }
.diag-score strong { font: 500 64px/1 var(--font-display); }
.diag-levels { list-style: none; padding: 0; margin: 28px 0; }
.diag-levels li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 14px; font-size: 13px; border: 1px solid transparent; }
.diag-levels .is-current { border-color: var(--emerald-primary); border-radius: 8px; background: #33d6be10; color: var(--emerald-glow); }
.diag-dialog h3 { font: 400 23px/1.3 var(--font-display); margin: 24px 0 12px; }
.diag-gaps article { padding: 16px 0; border-bottom: 1px solid var(--border-default); }
.diag-gaps h4 { margin: 0 0 6px; font-size: 15px; }
.diag-gaps p { font-size: 14px; margin: 0; }
.diag-radar { display: block; width: min(100%, 320px); height: auto; margin: 28px auto; }
.diag-radar-grid { fill: none; stroke: #ffffff1f; stroke-width: 1; }
.diag-radar-axis { stroke: #ffffff1f; stroke-width: 1; }
.diag-radar-shape { fill: #33d6be2e; stroke: var(--emerald-primary); stroke-width: 2; }
.diag-radar-point { fill: var(--emerald-primary); }
.diag-radar-label { font-size: 14px; fill: var(--text-primary); }
.diag-dim-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; }
.diag-dim-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--border-default); border-radius: 12px; }
.diag-dim-card strong { font-size: 17px; font-weight: 500; }
.diag-dim-card.is-strong { border-color: #33d6be55; }
.diag-dim-card.is-gap { border-color: #ffb4b455; }
.diag-next-step { padding: 4px 20px 12px; margin-top: 24px; border-left: 2px solid var(--emerald-primary); background: #33d6be08; }
.diag-answer-review { margin-top: 24px; }
.diag-answer-review summary { cursor: pointer; padding: 12px 0; color: var(--emerald-glow); }
.diag-answer-review li { margin: 16px 0; font-size: 13px; }
.diag-answer-review p { margin: 5px 0; }
@media (max-width: 767px) {
  .diag-profile { grid-template-columns: minmax(0, 1fr); }
  .diag-option { padding: 14px; gap: 10px; }
  .diag-option-label { font-size: 14px; }
  .diag-actions > .diag-button { flex: 1 1 170px; }
  .diag-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
}
.diag-dialog meter::-webkit-meter-bar { background: #ffffff12; border: 0; }
.diag-dialog meter::-webkit-meter-optimum-value { background: var(--emerald-primary); }
.diag-dialog meter::-moz-meter-bar { background: var(--emerald-primary); }