/* =========================================================
   MenthorIA.es — hoja de estilos compartida
   Basada en Design System MenthorIA_v1 (07.IDENTIDAD-UI)
   ========================================================= */

:root {
  /* Marca */
  --brand-turquesa: #5eafb4;
  --brand-morado: #653c8e;
  --brand-naranja: #f09836;
  --color-turquesa-50: #eff9fa; --color-turquesa-100: #ddf2f3; --color-turquesa-200: #c0e4e7;
  --color-turquesa-300: #9cd1d5; --color-turquesa-400: #74babf; --color-turquesa-500: #52a2a8;
  --color-turquesa-600: #36888e; --color-turquesa-700: #206d72; --color-turquesa-800: #0f5054; --color-turquesa-900: #043337;
  --color-morado-50: #faf4ff; --color-morado-100: #f3e7ff; --color-morado-200: #e9d1ff;
  --color-morado-300: #d9b3fa; --color-morado-400: #c594ed; --color-morado-500: #b077dc;
  --color-morado-600: #945ebd; --color-morado-700: #77469b; --color-morado-800: #583175; --color-morado-900: #391d4e;
  --color-neutro-50: #fafafa; --color-neutro-100: #f2f2f2; --color-neutro-200: #e6e6e6;
  --color-neutro-300: #d9d9d9; --color-neutro-400: #bdbdbd; --color-neutro-500: #9b9b9b;
  --color-neutro-600: #7f7f7f; --color-neutro-700: #5c5c5c; --color-neutro-800: #333333; --color-neutro-900: #1a1a1a;

  --surface-page: #ffffff; --surface-band: var(--color-neutro-50); --surface-card: #ffffff;
  --surface-soft: var(--color-turquesa-50); --surface-inverse: var(--color-morado-900);
  --surface-scrim: rgba(57, 29, 78, 0.55);

  --text-display: var(--color-neutro-900); --text-strong: var(--color-neutro-900);
  --text-heading: var(--brand-morado); --text-heading-sobre-tinte: var(--color-morado-800);
  --text-body: #1a1a1a; --text-nav: var(--color-neutro-800); --text-muted: var(--color-neutro-600);
  --text-faint: var(--color-neutro-500); --text-quote: var(--color-turquesa-700);
  --text-link: var(--color-turquesa-700); --text-link-hover: var(--color-turquesa-800);
  --text-inverse: var(--color-morado-50); --text-inverse-muted: var(--color-morado-200);
  --text-link-inverse: var(--color-turquesa-300);

  --border-hairline: var(--color-neutro-200); --border-default: var(--color-neutro-300);
  --border-strong: var(--color-neutro-400); --border-accent: var(--brand-turquesa); --border-inverse: var(--color-morado-700);

  --action-primary: var(--brand-turquesa); --action-primary-hover: var(--color-turquesa-600);
  --action-primary-active: var(--color-turquesa-700); --action-on-primary: #ffffff; --action-quiet: var(--color-neutro-100);
  --status-danger: #b3261e;

  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-display: var(--font-serif); --font-heading: var(--font-serif); --font-quote: var(--font-serif);
  --font-body: var(--font-sans); --font-ui: var(--font-sans); --font-wordmark: var(--font-serif);

  --text-2xs: 0.647rem; --text-xs: 0.765rem; --text-sm: 0.882rem; --text-base: 1.0625rem;
  --text-md: 1.176rem; --text-lg: 1.412rem; --text-xl: 1.765rem; --text-2xl: 2.118rem;
  --text-3xl: 2.588rem; --text-4xl: 3.294rem; --text-5xl: 4.235rem;

  --leading-tight: 1.18; --leading-snug: 1.32; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.9;
  --tracking-display: -0.015em; --tracking-tight: -0.01em; --tracking-normal: 0em;
  --tracking-wide: 0.04em; --tracking-kicker: 0.14em;
  --weight-extralight: 200; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --weight-display: var(--weight-regular); --weight-heading: var(--weight-medium); --weight-body: var(--weight-light);

  --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem;
  --space-10: 5rem; --space-11: 3.9rem; --space-12: 4.8rem;

  --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --radius-pill: 999px; --radius-circle: 50%; --radius-image: var(--radius-none);

  --measure-narrow: 34ch; --measure-body: 62ch; --measure-wide: 78ch;
  --container-sm: 640px; --container-md: 900px; --container-lg: 1180px; --container-xl: 1400px;
  --gutter-col: var(--space-9);

  --border-width-hairline: 1px; --border-width-thick: 2px; --rule-accent-width: 3px;
  --lockup-gap-h: 0.24em; --lockup-gap-v: 0.2em; --lockup-ring-h: 1.44em; --lockup-ring-v: 2.39em;

  --shadow-sm: 0 1px 3px rgba(57, 29, 78, 0.08), 0 1px 2px rgba(57, 29, 78, 0.04);
  --shadow-md: 0 4px 12px rgba(57, 29, 78, 0.09), 0 1px 3px rgba(57, 29, 78, 0.05);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 360ms;
  --focus-outline: 2px solid var(--brand-turquesa); --focus-offset: 2px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-body);
  font-size: var(--text-base); font-weight: var(--weight-body); line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-heading);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--text-heading);
  text-wrap: balance; }
h1 { font-size: var(--text-3xl); font-weight: var(--weight-display); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-display); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-5); max-width: var(--measure-body); text-wrap: pretty; }
blockquote { margin: 0; font-family: var(--font-quote); font-style: italic; font-weight: var(--weight-regular);
  color: var(--text-quote); line-height: var(--leading-normal); }
a { color: var(--text-link); text-decoration: none; border-bottom: 1px solid var(--color-turquesa-300); }
a:hover { color: var(--text-link-hover); border-bottom-color: var(--brand-turquesa); }
img { max-width: 100%; height: auto; display: block; }

.seccion-oscura { background: var(--surface-inverse); color: var(--text-inverse); }
.seccion-oscura h1, .seccion-oscura h2, .seccion-oscura h3 { color: var(--text-inverse); }
.seccion-oscura a { color: var(--text-link-inverse); border-bottom-color: var(--color-turquesa-700); }
.seccion-oscura a:hover { border-bottom-color: var(--color-turquesa-300); }

.wordmark { font-family: var(--font-wordmark); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display); line-height: 1; color: var(--text-strong); }
.wordmark .ia { color: var(--brand-turquesa); }
.seccion-oscura .wordmark { color: var(--text-inverse); }
.seccion-oscura .wordmark .ia { color: var(--color-turquesa-300); }
.lockup { display: flex; align-items: center; gap: var(--lockup-gap-h); }
.lockup img { width: var(--lockup-ring-h); height: auto; }
.lockup-apilado { display: flex; flex-direction: column; align-items: center; gap: var(--lockup-gap-v); }
.lockup-apilado img { width: var(--lockup-ring-v); height: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide); line-height: 1; white-space: nowrap;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
  border: var(--border-width-hairline) solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.btn-primario { background: var(--color-turquesa-700); color: var(--action-on-primary); border-color: var(--color-turquesa-700); }
.btn-primario:hover { background: var(--color-turquesa-800); border-color: var(--color-turquesa-800); }
.btn-secundario { background: transparent; color: var(--color-turquesa-700); border-color: var(--brand-turquesa); }
.btn-secundario:hover { background: var(--color-turquesa-50); border-color: var(--color-turquesa-600); }
.seccion-oscura .btn-primario { background: var(--brand-turquesa); border-color: var(--brand-turquesa); color: var(--color-turquesa-900); }
.seccion-oscura .btn-primario:hover { background: var(--color-turquesa-300); border-color: var(--color-turquesa-300); }
.seccion-oscura .btn-secundario { color: var(--color-turquesa-300); border-color: var(--color-turquesa-700); }

.campo { display: flex; flex-direction: column; gap: var(--space-2); }
.campo > label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.entrada { font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-light);
  color: var(--text-body); background: var(--surface-card); padding: var(--space-3) var(--space-4);
  border: var(--border-width-hairline) solid var(--border-default); border-radius: var(--radius-sm); width: 100%; }
.entrada::placeholder { color: var(--text-faint); }
.entrada:focus { border-color: var(--brand-turquesa); outline: var(--focus-outline); outline-offset: 1px; }

.tarjeta { background: var(--surface-card); border: var(--border-width-hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.tarjeta-rotulo { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-muted); }
.tarjeta-titulo { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-medium);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.tarjeta-cuerpo { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-light);
  line-height: var(--leading-relaxed); color: var(--text-body); margin: 0; }
.tarjeta-acento { border-top: var(--rule-accent-width) solid var(--brand-turquesa); }

.etiqueta { display: inline-flex; align-items: center; font-family: var(--font-ui); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  border: var(--border-width-hairline) solid var(--color-turquesa-200); background: var(--color-turquesa-50); color: var(--color-turquesa-800); width: max-content; }
.etiqueta-morado { border-color: var(--color-morado-200); background: var(--color-morado-50); color: var(--color-morado-800); }

.cabecera { display: flex; align-items: center; gap: var(--space-7); padding: var(--space-4) var(--space-8);
  background: var(--surface-page); border-bottom: var(--border-width-hairline) solid var(--border-hairline); }
.cabecera nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
/* :not(.btn) evita que estas reglas de enlace de texto (color apagado, padding-bottom de 2px
   para el subrayado en hover) se cuelen en el botón "Hablemos" y le rompan el color y el centrado */
.cabecera nav a:not(.btn) { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-regular);
  color: var(--text-nav); border-bottom: var(--border-width-hairline) solid transparent; padding-bottom: 2px; }
.cabecera nav a:not(.btn):hover { color: var(--text-strong); border-bottom-color: var(--brand-turquesa); }

.figura { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.figura img { border-radius: var(--radius-image); width: 100%; }
.figura-media { aspect-ratio: 16 / 10; object-fit: cover; }
.figura-ranura { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--surface-band);
  border: var(--border-width-hairline) dashed var(--border-default); font-family: var(--font-ui);
  font-size: var(--text-xs); color: var(--text-muted); text-align: center; padding: var(--space-5); margin: 0; }

.lienzo { max-width: var(--container-lg); margin: 0 auto; padding-inline: var(--space-8); }
.kicker { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-kicker);
  text-transform: uppercase; color: var(--color-neutro-700); font-weight: var(--weight-medium); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter-col); }

/* Claim / lema general de la landing, bajo la cabecera */
.claim-landing { text-align: center; font-family: var(--font-ui); font-weight: var(--weight-medium);
  font-size: var(--text-lg); color: var(--color-turquesa-700); letter-spacing: var(--tracking-wide); margin: 0; }

/* Pequeña marca (isotipo/logotipo) que acompaña la cabecera de un bloque temático */
.marca-bloque { height: 22px; width: auto; display: inline-block; vertical-align: middle; margin-right: var(--space-2); }
.cabecera-bloque { display: flex; align-items: center; gap: var(--space-2); }

/* Enlaces de "más información" hacia documentos ampliados */
.enlace-doc { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-regular);
  color: var(--text-link); border-bottom: 1px solid var(--color-turquesa-300); }
.enlace-doc:hover { color: var(--text-link-hover); border-bottom-color: var(--brand-turquesa); }

@media (max-width: 780px) {
  .cabecera nav { gap: var(--space-4); }
  .cabecera nav a { display: none; }
  .grid-12 { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
  .grid-12 > * { grid-column: 1 / -1 !important; align-self: start !important; }
  h1 { font-size: var(--text-2xl) !important; }
  h2 { font-size: var(--text-xl) !important; }
  .tarjetas-3 { grid-template-columns: 1fr !important; }
  .diagrama-svg { width: 100% !important; height: auto !important; }
}

/* =========================================================
   Ejercicio ligero — "Siete preguntas para tu transformación"
   ========================================================= */

.eslogan { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--color-turquesa-700); }

.pagina-ejercicio { max-width: 640px; margin: 0 auto; padding: 56px 24px 80px; display: flex; flex-direction: column; gap: var(--space-9); }

.slider-track { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--color-turquesa-600), var(--color-turquesa-200)); outline: none; margin: 18px 0 10px; }
.slider-track::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-turquesa-700); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(57,29,78,0.35); cursor: grab; }
.slider-track::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--color-turquesa-700);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(57,29,78,0.35); cursor: grab; }
.slider-track:focus-visible { outline: 2px solid var(--brand-turquesa); outline-offset: 4px; }

.opcion { font-family: var(--font-sans); font-size: 12px; line-height: 1.35; color: var(--text-faint); max-width: 23%; transition: color 150ms; }
.opcion-activa { color: var(--color-turquesa-800); font-weight: 500; }

.panel-resultado { border: 1px solid var(--color-neutro-200); border-radius: var(--radius-sm);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); transition: background 200ms, color 200ms; }
.etiqueta-banda { display: inline-flex; width: max-content; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-pill); }
.fila-insight { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-3); border-top: 1px solid rgba(127,127,127,0.2); }
.fila-insight .rotulo { font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.fila-insight .texto { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; }

/* ---- Páginas de profundización ("Más sobre...") ---- */
.pagina-articulo { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; display: flex; flex-direction: column; gap: var(--space-6); }
.pagina-articulo h2 { margin-top: var(--space-3); }
.pagina-articulo table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--text-sm); margin: 0 0 var(--space-5); }
.pagina-articulo th, .pagina-articulo td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-hairline); vertical-align: top; }
.pagina-articulo th { font-family: var(--font-ui); font-weight: var(--weight-medium); color: var(--text-strong); }
.pagina-articulo ul { margin: 0 0 var(--space-5); padding-left: 1.15em; max-width: var(--measure-body); }
.pagina-articulo li { margin-bottom: var(--space-3); }
.pagina-articulo blockquote { font-size: var(--text-md); padding-left: var(--space-5); border-left: 2px solid var(--brand-turquesa); margin-bottom: var(--space-5); }
.pagina-articulo .volver { font-family: var(--font-ui); font-size: var(--text-sm); }
.pagina-articulo .firma { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }