/* mindfulwebs — hoja de componentes.
   Todos los valores salen de tokens.json a través de tokens.css.
   Los tamaños de texto se aplican con los tokens de la familia `fluid`: escalan
   con el ancho de la ventana entre el valor móvil y el de escritorio que
   documenta la familia `type`. Si cambias un tamaño, cámbialo en `fluid`. */

/* --- Texto: tamaños fluidos --------------------------------------------- */
.display-xl { font-size: var(--fluid-display); line-height: 1.05; }
.heading-1 { font-size: var(--fluid-heading-1); line-height: 1.18; }
.heading-2 { font-size: var(--fluid-heading-2); line-height: 1.27; }
.lead { font-size: var(--fluid-lead); line-height: 1.21; }
.body { font-size: var(--fluid-body); line-height: 1.6; }
.ui-label { font-size: var(--fluid-ui); line-height: 1.2; }
.note { font-size: var(--fluid-note); line-height: 1.5; }

/* --- Contenedor y ritmo ------------------------------------------------- */
.mw-container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--layout-container) + 2 * var(--fluid-gutter));
  margin-inline: auto;
  padding-inline: var(--fluid-gutter);
}
.mw-section + .mw-section { margin-top: var(--fluid-section); }
.mw-stack > * + * { margin-top: var(--fluid-block); }

/* Hero partido: texto a un lado, panel de boceto al otro */
.mw-split { display: grid; grid-template-columns: 1fr 1fr; }
.mw-split > * + * { border-left: var(--stroke-hairline) solid var(--line); }
@media (max-width: 860px) {
  .mw-split { grid-template-columns: 1fr; }
  .mw-split > * + * { border-left: 0; border-top: var(--stroke-hairline) solid var(--line); }
}

/* --- Botones ------------------------------------------------------------ */
.mw-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  min-height: 53px;
  border-radius: var(--radius-md);
  border: var(--stroke-strong) solid transparent;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: opacity .15s ease;
}
.mw-btn:hover { opacity: .85; }
.mw-btn:focus-visible {
  outline: var(--stroke-strong) solid var(--focus-ring);
  outline-offset: var(--space-1);
}
.mw-btn[disabled], .mw-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.mw-btn--primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.mw-btn--ghost { color: var(--ink); border-color: var(--ink); }
@media (max-width: 560px) {
  .mw-btn { width: 100%; }
}

/* --- Cabecera ----------------------------------------------------------- */
.mw-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--fluid-header);
  border-bottom: var(--stroke-hairline) solid var(--line);
  color: var(--ink);
}
.mw-nav__links { display: flex; align-items: center; gap: var(--space-10); }
.mw-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  transition: opacity .15s ease;
}
.mw-nav__link:hover { opacity: .85; }
.mw-nav__link:focus-visible,
.mw-nav__toggle:focus-visible {
  outline: var(--stroke-strong) solid var(--focus-ring);
  outline-offset: var(--space-1);
}
.mw-nav__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* Botón de menú: solo por debajo del punto de apilado */
.mw-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: var(--stroke-hairline) solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  cursor: pointer;
}
.mw-nav__toggle svg { display: block; }

@media (max-width: 860px) {
  .mw-nav { flex-wrap: wrap; }
  .mw-nav__toggle { display: inline-flex; }
  .mw-nav__links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding-bottom: var(--space-4);
  }
  .mw-nav[data-open="true"] .mw-nav__links { display: flex; }
  .mw-nav__links > * + * { border-top: var(--stroke-hairline) solid var(--line); }
  .mw-nav__links .mw-btn { width: 100%; margin-top: var(--space-4); }
}

/* --- Logotipo ----------------------------------------------------------- */
.mw-logo { display: inline-flex; align-items: center; gap: var(--space-5); color: var(--ink); text-decoration: none; }
.mw-logo__mark { display: block; height: clamp(28px, 3vw, 40px); width: auto; }
.mw-logo__word { white-space: nowrap; font-weight: 300; font-size: clamp(22px, 1.4vw + 14px, 32px); line-height: 1; }
.mw-logo__word b { font-weight: 600; }

/* --- Títulos ------------------------------------------------------------ */
.mw-heading { color: var(--ink); margin: 0; }
.mw-eyebrow { color: var(--ink-muted); text-transform: uppercase; display: block; margin-bottom: var(--space-4); }

/* --- Reglas ------------------------------------------------------------- */
.mw-rule { border: 0; border-top: var(--stroke-hairline) solid var(--line); margin: 0; }
.mw-rule--dashed {
  border: 0;
  height: var(--stroke-hairline);
  margin: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--line) 0 var(--pattern-dash),
    transparent var(--pattern-dash) calc(var(--pattern-dash) + var(--pattern-dash-gap))
  );
}

/* --- Servicios ---------------------------------------------------------- */
.mw-services { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--space-12); }
.mw-service { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--space-6); row-gap: var(--space-4); color: var(--ink); }
.mw-service__icon { width: 48px; height: 48px; display: block; }
.mw-service__icon [stroke] { stroke: var(--ink); }
.mw-service__title { margin: 0; color: var(--ink); align-self: center; }
.mw-service__text { grid-column: 2; margin: 0; max-width: 300px; color: var(--ink); }
@media (max-width: 1100px) {
  .mw-services { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: var(--fluid-block) var(--space-12); }
  .mw-service__text { max-width: none; }
}
@media (max-width: 700px) {
  .mw-services { grid-template-columns: minmax(0, 1fr); }
  .mw-service { grid-template-columns: 40px 1fr; column-gap: var(--space-4); }
  .mw-service__icon { width: 40px; height: 40px; }
}

/* --- Panel de boceto ---------------------------------------------------- */
.mw-panel {
  position: relative;
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(to right, var(--line-soft) 0 var(--stroke-hairline), transparent var(--stroke-hairline) var(--pattern-grid)),
    repeating-linear-gradient(to bottom, var(--line-soft) 0 var(--stroke-hairline), transparent var(--stroke-hairline) var(--pattern-grid));
  color: var(--ink);
}
.mw-panel__art { display: block; width: 100%; height: auto; }
.mw-panel__art [stroke] { stroke: var(--ink); }

/* Guías de columna del contenedor */
.mw-guides { position: relative; }
.mw-guides::before, .mw-guides::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--stroke-hairline);
  background: var(--line);
}
.mw-guides::before { left: 0; }
.mw-guides::after { right: 0; }
@media (max-width: 700px) {
  .mw-guides::before, .mw-guides::after { content: none; }
}

/* --- Anotación ---------------------------------------------------------- */
.mw-note { display: inline-flex; align-items: flex-start; gap: var(--space-2); color: var(--ink-muted); max-width: 320px; }
.mw-note__arrow { flex: none; }
.mw-note__arrow path { stroke: var(--sketch); fill: none; }
@media (max-width: 700px) {
  .mw-note { display: none; }
}