/* Matchly design tokens — única fuente de color, tipo, espacio y radios. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/InstrumentSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/InstrumentSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/InstrumentSerif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/InstrumentSerif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  color-scheme: light;

  --paper: #faf8f5;
  --surface: #ffffff;
  --ink: #0f1c1a;
  --muted: #546460;
  --line: #e3eae7;

  --brand: #0c383f;
  --brand-strong: #06262c;
  --brand-soft: #e5f0ed;

  /* Conversion and personality accents (naranja vibrante con mayor densidad y legibilidad) */
  --accent-coral: #ea580c;
  --accent-coral-hover: #c2410c;
  --accent-coral-soft: #fff7ed;
  --accent-cyan: #06b6d4;
  --accent-cyan-soft: #ecfeff;
  --accent-amber: #f59e0b;

  --success: #166534;
  --success-soft: #dcfce7;
  --warning: #854d0e;
  --warning-soft: #fef9c3;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, Cambria,
    "Times New Roman", serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px 0 rgb(15 28 26 / 0.05), 0 1px 2px -1px rgb(15 28 26 / 0.05);
  --shadow-md: 0 4px 16px -4px rgb(15 28 26 / 0.10), 0 2px 6px -2px rgb(15 28 26 / 0.06);
  --shadow-lg: 0 16px 36px -8px rgb(15 28 26 / 0.12), 0 6px 16px -2px rgb(15 28 26 / 0.08);

  --container: 75rem;
  --reading: 68ch;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --z-header: 20;
  --z-overlay: 40;
  --z-toast: 60;
}

/* Reset y estilos base. Sin colores literales: todo sale de tokens. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: var(--brand);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--brand-soft);
  color: var(--ink);
}

[hidden],
.hidden {
  display: none !important;
}

[x-cloak] {
  display: none !important;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.display {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.muted {
  color: var(--muted);
}

.reading {
  max-width: var(--reading);
}

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

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-toast);
  transform: translateY(-200%);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--surface);
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.prose {
  max-width: var(--reading);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.7;
}

.prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

.prose h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
}

.prose p,
.prose ul,
.prose ol {
  margin-bottom: 1rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: 0.35rem;
}

.prose a {
  color: var(--brand-strong);
  font-weight: 600;
}

.prose strong {
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Componentes compartidos entre landing y app. */

.icon-sprite {
  display: none;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 1rem;
  height: 1rem;
}

.icon-lg {
  width: 1.5rem;
  height: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--brand);
  color: var(--surface);
  box-shadow: var(--shadow-sm);
}

.brand-mark svg {
  width: 1.35rem;
  height: 1.35rem;
}

.brand-name {
  font-size: 1.125rem;
  line-height: 1;
}

.btn {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.65rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--brand);
  color: var(--surface);
}

.btn-primary:hover {
  background: var(--brand-strong);
}

.btn-secondary {
  border-color: var(--line);
  background: transparent;
  color: var(--ink);
}

.btn-secondary:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
}

.btn-ghost:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.btn-inverse {
  background: var(--surface);
  color: var(--brand-strong);
}

.btn-inverse:hover {
  background: var(--brand-soft);
}

.btn-coral {
  background: var(--accent-coral, #ea580c);
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px -2px rgba(234, 88, 12, 0.38);
}

.btn-coral:hover {
  background: var(--accent-coral-hover, #c2410c);
  border-color: rgba(0, 0, 0, 0.12);
  color: #ffffff;
  box-shadow: 0 6px 20px -2px rgba(234, 88, 12, 0.48);
  transform: translateY(-1px);
}

.btn-coral-outline {
  background: #ffffff;
  color: var(--ink, #111827);
  border: 2px solid var(--accent-coral, #ea580c);
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px -1px rgba(234, 88, 12, 0.12);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-coral-outline:hover {
  background: rgba(234, 88, 12, 0.08);
  border-color: var(--accent-coral-hover, #c2410c);
  color: var(--accent-coral-hover, #c2410c);
  box-shadow: 0 4px 16px -2px rgba(234, 88, 12, 0.28);
  transform: translateY(-1px);
}

.btn-lg {
  min-height: 3.25rem;
  padding-inline: 1.35rem;
  font-size: 0.9375rem;
}

.btn-sm {
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
}

.btn-block {
  width: 100%;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-strong);
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  box-sizing: border-box;
}

.chip-requirement {
  display: inline-flex;
  align-items: flex-start;
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--muted);
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.chip-neutral {
  background: var(--paper);
  color: var(--muted);
}

.chip-success {
  background: var(--success-soft);
  color: var(--success);
}

.chip-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.chip-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.divider {
  height: 1px;
  border: 0;
  background: var(--line);
}

.label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 0.65rem 0.8rem;
  font-size: 0.9375rem;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.textarea {
  min-height: 6rem;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--muted);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}

.help {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.field-error {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--danger);
}

.alert {
  display: flex;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  line-height: 1.45;
}

.alert-error {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
  background: var(--danger-soft);
  color: var(--danger);
}

.alert-success {
  border-color: color-mix(in srgb, var(--success) 30%, var(--line));
  background: var(--success-soft);
  color: var(--success);
}

.alert-info {
  border-color: var(--brand-soft);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"],
.input:disabled,
.select:disabled,
.textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.card-interactive {
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.card-interactive:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--line);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
  content: "";
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-text {
  height: 0.85rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-xs);
}

.skeleton-title {
  height: 1.4rem;
  width: 60%;
  margin-bottom: 0.75rem;
  border-radius: var(--radius-xs);
}

.skeleton-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
}

.toast-container {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 18rem;
  max-width: 26rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  animation: toast-in var(--duration-normal) var(--ease-out);
}

.toast-success {
  border-left: 4px solid var(--success);
}

.toast-error {
  border-left: 4px solid var(--danger);
}

.toast-info {
  border-left: 4px solid var(--brand);
}

@keyframes toast-in {
  from {
    transform: translateY(0.75rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}



.empty-state {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: clamp(2rem, 6vw, 4rem);
  text-align: center;
}

.empty-state-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.empty-state h2,
.empty-state h3 {
  font-size: 1.125rem;
}

.empty-state p {
  max-width: 34rem;
  margin: 0.5rem auto 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.meter {
  display: block;
  width: 100%;
  height: 0.4rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line);
  appearance: none;
}

.meter::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--line);
}

.meter::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--brand);
}

.meter::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--brand);
}

.meter-success::-webkit-progress-value {
  background: var(--success);
}

.meter-success::-moz-progress-bar {
  background: var(--success);
}

.score {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 6vw, 4.25rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th,
.table td {
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.table th {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.dialog {
  width: min(32rem, calc(100vw - 2rem));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: 0;
  box-shadow: var(--shadow-lg);
}

.dialog::backdrop {
  background: rgb(8 42 48 / 0.55);
}

.dialog-header,
.dialog-body,
.dialog-footer {
  padding: 1.25rem;
}

.dialog-header {
  border-bottom: 1px solid var(--line);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid var(--line);
}

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--paper) 25%,
    color-mix(in srgb, var(--line) 60%, var(--surface)) 37%,
    var(--paper) 63%
  );
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
}

@keyframes skeleton {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.nav-link:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.nav-link[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 600;
}

.nav-link[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 480px) {
  .btn-lg {
    width: 100%;
  }
}

*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.-top-3{top:-.75rem}.right-6{right:1.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.\!grid{display:grid!important}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-20{height:5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.max-h-\[60vh\]{max-height:60vh}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\/3{width:66.666667%}.w-2\/5{width:40%}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\/4{width:75%}.w-3\/5{width:60%}.w-32{width:8rem}.w-4\/5{width:80%}.w-4\/6{width:66.666667%}.w-5\/6{width:83.333333%}.w-8{width:2rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre-line{white-space:pre-line}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-b-2xl{border-bottom-left-radius:var(--radius-2xl);border-bottom-right-radius:var(--radius-2xl)}.rounded-t-2xl{border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-brand{border-color:var(--brand)}.border-emerald-200\/60{border-color:rgba(167,243,208,.6)}.border-line{border-color:var(--line)}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-200\/80{border-color:rgba(226,232,240,.8)}.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.bg-brand{background-color:var(--brand)}.bg-brand-soft{background-color:var(--brand-soft)}.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-700{--tw-bg-opacity:1;background-color:rgb(4 120 87/var(--tw-bg-opacity,1))}.bg-ink{background-color:var(--ink)}.bg-line{background-color:var(--line)}.bg-paper{background-color:var(--paper)}.bg-rose-500{--tw-bg-opacity:1;background-color:rgb(244 63 94/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-surface{background-color:var(--surface)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-8{padding-bottom:2rem;padding-top:2rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pl-4{padding-left:1rem}.pr-3{padding-right:.75rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-serif{font-family:Instrument Serif,ui-serif,Georgia,serif}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-brand{color:var(--brand)}.text-brand-strong{color:var(--brand-strong)}.text-danger{color:var(--danger)}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-emerald-800{--tw-text-opacity:1;color:rgb(6 95 70/var(--tw-text-opacity,1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity,1))}.text-ink{color:var(--ink)}.text-muted{color:var(--muted)}.text-rose-600{--tw-text-opacity:1;color:rgb(225 29 72/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.shadow-md{--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-brand{--tw-ring-color:var(--brand)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:border-brand:hover{border-color:var(--brand)}.hover\:border-line:hover{border-color:var(--line)}.hover\:border-slate-300:hover{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.hover\:bg-emerald-600:hover{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.hover\:bg-rose-50:hover{--tw-bg-opacity:1;background-color:rgb(255 241 242/var(--tw-bg-opacity,1))}.hover\:text-brand:hover{color:var(--brand)}.hover\:text-danger:hover{color:var(--danger)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-brand:focus{border-color:var(--brand)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:w-72{width:18rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:flex-nowrap{flex-wrap:nowrap}.md\:items-center{align-items:center}}@media (min-width:1024px){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:p-8{padding:2rem}.lg\:py-16{padding-bottom:4rem;padding-top:4rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-base{font-size:1rem;line-height:1.5rem}}

html {
  scroll-behavior: smooth;
}

#crear-cv {
  scroll-margin-top: 5rem;
}

/* Landing pública de Matchly. */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-links a {
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-links a:hover {
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-actions .btn {
  white-space: nowrap;
}

.btn-text-mobile {
  display: none;
}

.btn-text-desktop {
  display: inline;
}

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7.5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.hero-copy {
  max-width: 36rem;
  animation: hero-in var(--duration-slow) var(--ease-out) both;
}

.hero-title {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 3.8vw, 3.15rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  max-width: 24ch;
  text-wrap: balance;
}

.hero-title .hero-line {
  display: block;
}

.hero-accent {
  position: relative;
  display: inline-block;
  color: var(--brand);
}

.hero-underline {
  position: absolute;
  right: -0.04em;
  bottom: -0.16em;
  left: -0.02em;
  width: calc(100% + 0.06em);
  height: 0.13em;
  overflow: visible;
  color: var(--brand);
}

.hero-lede {
  max-width: 32rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-trust .icon {
  color: var(--success);
}

.hero-shot {
  position: relative;
  isolation: isolate;
  margin: 0;
  animation: hero-in var(--duration-slow) var(--ease-out) 80ms both;
}

.hero-shot::before {
  position: absolute;
  z-index: -1;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border-radius: var(--radius-2xl);
  background: var(--brand-soft);
  content: "";
}

.hero-shot-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  padding: 0.6rem;
  box-shadow: var(--shadow-lg);
}

.hero-shot-frame img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-2xl) - 0.45rem);
}

.hero-shot figcaption {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

.section {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  scroll-margin-top: 5.5rem;
}

.section-tight {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem 4rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-title {
  max-width: 26ch;
  font-family: var(--font-sans);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.section-lede {
  max-width: 34rem;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.step {
  padding: 1.75rem 1.5rem 0 0;
}

.step + .step {
  border-left: 1px solid var(--line);
  padding-left: 1.5rem;
}

.step-number {
  display: grid;
  width: 2rem;
  height: 2rem;
  margin-bottom: 1.25rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 0.8125rem;
  font-weight: 600;
}

.step h3 {
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.step p {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.feature-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.feature-intro {
  position: sticky;
  top: 7rem;
}

.feature-intro .section-title {
  max-width: 16ch;
}

.feature-intro .section-lede {
  margin-top: 1rem;
}

.feature-list {
  border-top: 1px solid var(--line);
}

.feature {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.feature-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.feature h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}

.feature p {
  max-width: 38rem;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.score-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.score-intro .section-title {
  max-width: 15ch;
}

.score-intro .section-lede {
  margin-top: 1rem;
}

.score-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-md);
}

.score-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.score-card-top h3 {
  font-size: 1.125rem;
}

.score-card-top p {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.score-summary {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding-block: 1.5rem;
}

.score-summary .score {
  color: var(--brand-strong);
}

.score-summary-meta {
  padding-bottom: 0.35rem;
}

.score-summary-meta .chip {
  margin-bottom: 0.35rem;
}

.score-summary-meta p {
  color: var(--muted);
  font-size: 0.75rem;
}

.score-rows {
  display: grid;
  gap: 0.9rem;
}

.score-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
}

.score-row-head span:last-child {
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.score-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
}

.score-foot .chip {
  background: var(--success-soft);
  color: var(--success);
}

.privacy-section {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.privacy-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-radius: var(--radius-xl);
  background: var(--brand-soft);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.privacy-note h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.privacy-note p {
  max-width: 38rem;
  margin-top: 0.5rem;
  color: var(--brand-strong);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.privacy-note .btn {
  white-space: nowrap;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  flex: 0 0 auto;
  color: var(--brand);
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  max-width: 48rem;
  padding-bottom: 1.25rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.cta-band {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--brand);
  padding: clamp(2rem, 5vw, 3.5rem);
  color: var(--surface);
}

.cta-band h2 {
  max-width: 22ch;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.cta-band p {
  max-width: 36rem;
  margin-top: 0.9rem;
  color: color-mix(in srgb, var(--surface) 78%, var(--brand));
  font-size: 1rem;
  line-height: 1.6;
}

.cta-band .btn {
  margin-top: 1.5rem;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.footer-brand p {
  max-width: 28rem;
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
}

/* Página de privacidad */

.privacy-page {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.privacy-page .privacy-header {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.privacy-page h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.privacy-page .updated {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.draft-alert {
  display: flex;
  gap: 0.9rem;
  max-width: 48rem;
  margin-bottom: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--line));
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  padding: 1rem 1.15rem;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.55;
}

.draft-alert .icon {
  margin-top: 0.1rem;
  color: var(--warning);
}

.draft-alert strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--warning);
}

.privacy-content {
  max-width: 48rem;
}

.privacy-content h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.privacy-content p {
  margin-bottom: 0.85rem;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.privacy-content ul {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 1.5rem;
  padding-left: 1.2rem;
  list-style: disc;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.privacy-content a {
  color: var(--brand-strong);
  font-weight: 600;
}

.lawyer-box {
  max-width: 48rem;
  margin-top: 3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.5rem;
}

.lawyer-box h2 {
  margin-top: 0;
}

.lawyer-box p {
  color: var(--muted);
}

.lawyer-box ul {
  display: grid;
  gap: 0.4rem;
  margin: 0.85rem 0 1rem;
  padding-left: 1.15rem;
  list-style: disc;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.55;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .hero-grid,
  .feature-layout,
  .score-layout,
  .section-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy {
    max-width: 40rem;
  }

  .hero-shot {
    max-width: 44rem;
    margin-top: 1rem;
  }

  .feature-intro {
    position: static;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .step {
    padding: 1.25rem 0;
  }

  .step + .step {
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-left: 0;
  }

  .section-title {
    max-width: 26ch;
  }
}

@media (max-width: 760px) {
  .nav-links {
    display: none;
  }

  .header-inner {
    min-height: 4rem;
  }

  .hero-title {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }

  .hero-lede {
    font-size: 1rem;
  }

  .section-title {
    font-size: clamp(1.85rem, 7vw, 2.5rem);
  }

  .cta-band h2 {
    font-size: clamp(1.9rem, 7vw, 2.75rem);
  }
}

@media (max-width: 560px) {
  .btn-text-desktop {
    display: none;
  }

  .btn-text-mobile {
    display: inline;
  }

  .header-inner {
    gap: 0.5rem;
    padding-inline: 0.75rem;
    min-height: 3.75rem;
  }

  .header-actions {
    gap: 0.35rem;
  }

  .header-actions .btn {
    padding: 0.4rem 0.65rem;
    font-size: 0.8125rem;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hero-trust {
    display: grid;
    gap: 0.45rem;
  }

  .hero-shot::before {
    inset: 0.7rem -0.55rem -0.7rem 0.55rem;
  }

  .privacy-note .btn {
    width: 100%;
  }

  .score-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .footer-inner {
    display: grid;
  }
}


/* ==========================================================================
   Hero Visual Composition & Conversion Elements (JobLeads + TodoTrabajo)
   ========================================================================== */

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  border: 1px solid var(--line);
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--brand-strong);
  margin-bottom: 1.25rem;
}

.hero-eyebrow-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent-coral, #f97316);
}

.hero-proof-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.825rem;
  color: var(--muted);
}

.stars-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.star-rating .icon {
  width: 0.95rem;
  height: 0.95rem;
  fill: #f59e0b;
  stroke: #d97706;
}

.proof-score {
  font-weight: 700;
  color: var(--ink);
}

.proof-divider {
  color: var(--line);
}

.proof-label {
  font-size: 0.8rem;
  color: var(--muted);
}

/* Visual Composition & Interactive Roles Switcher */
.hero-visual-wrapper {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 580px;
  margin-inline: auto;
}

/* Selector de Perfiles (Pills) */
.hero-role-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 10;
  flex-wrap: wrap;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  user-select: none;
  box-shadow: 0 1px 2px rgba(6, 38, 44, 0.04);
}

.role-pill:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.role-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: background var(--duration-fast);
}

/* Viewport de Slides */
.hero-slides-viewport {
  position: relative;
  min-height: 480px;
}

@media (max-width: 900px) {
  .hero-slides-viewport {
    min-height: 520px;
  }
}

@media (max-width: 480px) {
  .hero-slides-viewport {
    min-height: 540px;
  }
}

/* Cada Slide ocupa la misma área */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(4px);
}

.hero-photo-card {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 10.5;
  background: var(--surface);
}

.hero-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-photo-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 38, 44, 0.4) 100%);
  pointer-events: none;
}

/* Tarjeta Flotante Interactiva (Link al Explorador) */
.hero-floating-card {
  position: absolute;
  bottom: -1.75rem;
  left: -1rem;
  right: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1rem 1.25rem;
  box-shadow: 0 20px 40px -10px rgba(6, 38, 44, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.hero-floating-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -8px rgba(6, 38, 44, 0.28);
}

.floating-card-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.floating-match-badge {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #0c383f, #06262c);
  border: 2px solid #06b6d4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
  flex-shrink: 0;
}

.match-number {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  color: #22d3ee;
}

.match-label {
  font-size: 0.55rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #e0f2fe;
}

.floating-job-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.floating-job-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  white-space: normal;
}

.floating-job-company {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.floating-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.floating-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
}

.floating-footer-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.floating-footer-cta {
  font-weight: 700;
  color: var(--accent-coral);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.hero-floating-card:hover .floating-footer-cta {
  text-decoration: underline;
}

/* Keyframes Auto-Cycle (15s ciclo: 5s por cada perfil) */
@keyframes cycleSlide1 {
  0%, 30% { opacity: 1; pointer-events: auto; transform: translateY(0); z-index: 2; }
  33.3%, 96.6% { opacity: 0; pointer-events: none; transform: translateY(4px); z-index: 1; }
  100% { opacity: 1; pointer-events: auto; transform: translateY(0); z-index: 2; }
}
@keyframes cycleSlide2 {
  0%, 30% { opacity: 0; pointer-events: none; transform: translateY(4px); z-index: 1; }
  33.3%, 63.3% { opacity: 1; pointer-events: auto; transform: translateY(0); z-index: 2; }
  66.6%, 100% { opacity: 0; pointer-events: none; transform: translateY(4px); z-index: 1; }
}
@keyframes cycleSlide3 {
  0%, 63.3% { opacity: 0; pointer-events: none; transform: translateY(4px); z-index: 1; }
  66.6%, 96.6% { opacity: 1; pointer-events: auto; transform: translateY(0); z-index: 2; }
  100% { opacity: 0; pointer-events: none; transform: translateY(4px); z-index: 1; }
}

@keyframes cyclePill1 {
  0%, 30% { background: var(--brand); color: #ffffff; border-color: var(--brand); }
  33.3%, 96.6% { background: var(--surface); color: var(--muted); border-color: var(--line); }
  100% { background: var(--brand); color: #ffffff; border-color: var(--brand); }
}
@keyframes cyclePill2 {
  0%, 30% { background: var(--surface); color: var(--muted); border-color: var(--line); }
  33.3%, 63.3% { background: var(--brand); color: #ffffff; border-color: var(--brand); }
  66.6%, 100% { background: var(--surface); color: var(--muted); border-color: var(--line); }
}
@keyframes cyclePill3 {
  0%, 63.3% { background: var(--surface); color: var(--muted); border-color: var(--line); }
  66.6%, 96.6% { background: var(--brand); color: #ffffff; border-color: var(--brand); }
  100% { background: var(--surface); color: var(--muted); border-color: var(--line); }
}

/* Ciclo activo por defecto (Slide 1 visible como estado base) */
.hero-slide-1 {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 2;
  animation: cycleSlide1 15s infinite both;
}
.hero-slide-2 { animation: cycleSlide2 15s infinite both; }
.hero-slide-3 { animation: cycleSlide3 15s infinite both; }

.pill-1 {
  background: var(--brand);
  color: #ffffff;
  border-color: var(--brand);
  animation: cyclePill1 15s infinite both;
}
.pill-1 .role-pill-dot {
  background: #22d3ee;
}
.pill-2 { animation: cyclePill2 15s infinite both; }
.pill-3 { animation: cyclePill3 15s infinite both; }

/* Pausar en hover para permitir lectura y click cómodos */
.hero-visual-wrapper:hover .hero-slide,
.hero-visual-wrapper:hover .role-pill {
  animation-play-state: paused;
}

/* Cuando el usuario hace click manual en un rol */
#role-dev:checked ~ .hero-role-pills .role-pill,
#role-admin:checked ~ .hero-role-pills .role-pill,
#role-hr:checked ~ .hero-role-pills .role-pill {
  animation: none;
  background: var(--surface);
  color: var(--muted);
  border-color: var(--line);
}

#role-dev:checked ~ .hero-role-pills .role-pill-dot,
#role-admin:checked ~ .hero-role-pills .role-pill-dot,
#role-hr:checked ~ .hero-role-pills .role-pill-dot {
  background: var(--muted);
}

#role-dev:checked ~ .hero-slides-viewport .hero-slide,
#role-admin:checked ~ .hero-slides-viewport .hero-slide,
#role-hr:checked ~ .hero-slides-viewport .hero-slide {
  animation: none;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

#role-hr:checked ~ .hero-role-pills .pill-1,
#role-admin:checked ~ .hero-role-pills .pill-2,
#role-dev:checked ~ .hero-role-pills .pill-3 {
  background: var(--brand);
  color: #ffffff;
  border-color: var(--brand);
}

#role-hr:checked ~ .hero-role-pills .pill-1 .role-pill-dot,
#role-admin:checked ~ .hero-role-pills .pill-2 .role-pill-dot,
#role-dev:checked ~ .hero-role-pills .pill-3 .role-pill-dot {
  background: #22d3ee;
}

#role-hr:checked ~ .hero-slides-viewport .hero-slide-1,
#role-admin:checked ~ .hero-slides-viewport .hero-slide-2,
#role-dev:checked ~ .hero-slides-viewport .hero-slide-3 {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 2;
}

/* Soporte estático robusto cuando el sistema o navegador tiene reducción de animaciones / ahorro de batería */
@media (prefers-reduced-motion: reduce) {
  .hero-slide-1,
  .hero-slide-2,
  .hero-slide-3,
  .pill-1,
  .pill-2,
  .pill-3 {
    animation: none !important;
  }

  .hero-slide-1 {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 2 !important;
  }

  .pill-1 {
    background: var(--brand) !important;
    color: #ffffff !important;
    border-color: var(--brand) !important;
  }

  .pill-1 .role-pill-dot {
    background: #22d3ee !important;
  }

  .hero-slide-2,
  .hero-slide-3 {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    z-index: 1 !important;
  }

  .pill-2,
  .pill-3 {
    background: var(--surface) !important;
    color: var(--muted) !important;
    border-color: var(--line) !important;
  }

  .pill-2 .role-pill-dot,
  .pill-3 .role-pill-dot {
    background: var(--muted) !important;
  }

  /* Cambio estático manual en perfiles bajo prefers-reduced-motion */
  #role-admin:checked ~ .hero-slides-viewport .hero-slide-1,
  #role-dev:checked ~ .hero-slides-viewport .hero-slide-1 {
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  #role-admin:checked ~ .hero-role-pills .pill-1,
  #role-dev:checked ~ .hero-role-pills .pill-1 {
    background: var(--surface) !important;
    color: var(--muted) !important;
    border-color: var(--line) !important;
  }

  #role-admin:checked ~ .hero-role-pills .pill-1 .role-pill-dot,
  #role-dev:checked ~ .hero-role-pills .pill-1 .role-pill-dot {
    background: var(--muted) !important;
  }

  #role-admin:checked ~ .hero-slides-viewport .hero-slide-2 {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 2 !important;
  }

  #role-admin:checked ~ .hero-role-pills .pill-2 {
    background: var(--brand) !important;
    color: #ffffff !important;
    border-color: var(--brand) !important;
  }

  #role-admin:checked ~ .hero-role-pills .pill-2 .role-pill-dot {
    background: #22d3ee !important;
  }

  #role-dev:checked ~ .hero-slides-viewport .hero-slide-3 {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 2 !important;
  }

  #role-dev:checked ~ .hero-role-pills .pill-3 {
    background: var(--brand) !important;
    color: #ffffff !important;
    border-color: var(--brand) !important;
  }

  #role-dev:checked ~ .hero-role-pills .pill-3 .role-pill-dot {
    background: #22d3ee !important;
  }

  #role-hr:checked ~ .hero-slides-viewport .hero-slide-1 {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 2 !important;
  }

  #role-hr:checked ~ .hero-role-pills .pill-1 {
    background: var(--brand) !important;
    color: #ffffff !important;
    border-color: var(--brand) !important;
  }

  #role-hr:checked ~ .hero-role-pills .pill-1 .role-pill-dot {
    background: #22d3ee !important;
  }
}

@media (max-width: 900px) {
  .hero-floating-card {
    position: static;
    margin-top: -1.5rem;
    margin-inline: 0;
  }
}

/* Pain Banner (High Contrast) */
.pain-banner {
  background: linear-gradient(135deg, #06262c 0%, #0c383f 100%);
  color: #ffffff;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pain-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.pain-copy {
  max-width: 44rem;
}

.pain-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #22d3ee;
  margin-bottom: 0.6rem;
}

.pain-title {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.pain-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #cbd5e1;
}

.pain-action {
  flex-shrink: 0;
}