/* styles.css: layout and components. Colors, type and the two spacings come only from tokens.css.
   The layout values below (80, 48, 24, 20, 32, 7...) have no Figma variable, so they are kept
   here as --layout-* and reported as missing tokens. */
:root {
  --layout-page-pad: 5rem;      /* 80 */
  --layout-section-gap: 3rem;   /* 48 */
  --layout-stack-gap: var(--spacing-04); /* 12 = spacing/04 */
  --layout-measure: 55rem;      /* 880 */
  --layout-line: 1.5px;
  --layout-handle: 7px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font-texto);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-cuerpo);
  line-height: var(--leading-cuerpo);
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-gap);
  max-width: calc(var(--layout-measure) + 2 * var(--layout-page-pad));
  padding: var(--layout-page-pad);
}

/* Marco (title frame with redline handles and the "Cota" tag) */
.marco {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  padding: var(--spacing-05) 2rem 1.25rem 1.5rem;
  border: var(--layout-line) solid var(--color-redline);
}
.marco h1 {
  margin: 0;
  font-family: var(--font-titular);
  font-weight: var(--font-weight-ligero);
  font-size: var(--text-titulo);
  line-height: var(--leading-titulo);
  overflow-wrap: break-word;
}
.cota {
  position: absolute;
  right: -3.5px;
  bottom: -23.5px;
  margin: 0;
  padding: 0.25rem 0.5rem;
  background: var(--color-redline);
  color: var(--color-redline-contraste);
  font-family: var(--font-mono);
  font-size: var(--text-mini);
  line-height: var(--leading-mini);
  white-space: nowrap;
}
.asa {
  position: absolute;
  width: var(--layout-handle);
  height: var(--layout-handle);
  background: var(--color-fondo);
  border: var(--layout-line) solid var(--color-redline);
}
.asa-tl { top: -5.5px; left: -5.5px; }
.asa-tr { top: -5.5px; right: -5.5px; }
.asa-bl { bottom: -5.5px; left: -5.5px; }
.asa-br { bottom: -5.5px; right: -5.5px; }

/* Steps */
.paso { display: flex; flex-direction: column; gap: var(--layout-stack-gap); align-items: flex-start; }
.paso > * { margin: 0; max-width: var(--layout-measure); }
.paso h2 {
  font-size: var(--text-cuerpo);
  line-height: var(--leading-cuerpo);
  font-weight: var(--font-weight-semibold);
}
.paso p { color: var(--color-texto-suave); }
code {
  font-family: var(--font-mono);
  color: var(--color-texto);
  font-size: var(--text-cuerpo); /* Figma uses 15px here; no 15px token, closest token used (decision for the designer) */
}
.comando {
  align-self: stretch;
  max-width: none !important;
  background: var(--color-superficie);
  padding: var(--spacing-04) var(--spacing-05);
}
.comando pre { margin: 0; line-height: var(--leading-mini); white-space: pre-wrap; overflow-wrap: anywhere; }
.comando code {
  font-size: var(--text-mini);
  line-height: var(--leading-mini);
}

.filete { height: 1px; width: 100%; max-width: var(--layout-measure); margin: 0; border: 0; background: var(--color-borde); }
.nota {
  margin: 0;
  max-width: var(--layout-measure);
  color: var(--color-texto-suave);
  font-size: var(--text-nota);
  line-height: var(--leading-nota);
  letter-spacing: 0.16px;
  overflow-wrap: anywhere;
}

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

/* Mobile: the frame is desktop only; this is an inferred one-column layout */
@media (max-width: 47.9375rem) {
  :root { --layout-page-pad: var(--spacing-05); --layout-section-gap: 2rem; }
  .marco h1 { font-size: 1.5rem; line-height: 2rem; } /* 24/32, inferred, no token */
}

/* "About this page" block: added by the factory after the run, with this page's tokens. Not part of run B. */
.cierre { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cierre__rotulo { margin: 0; font-family: var(--font-mono); font-size: var(--text-mini); line-height: var(--leading-mini); color: var(--color-texto-suave); }
.cierre h2 { margin: 0; font-size: var(--text-cuerpo); line-height: var(--leading-cuerpo); font-weight: var(--font-weight-semibold); }
.cierre p:not([class]) { margin: 0; color: var(--color-texto-suave); }
.cierre a:not(.boton) { color: var(--color-texto); text-underline-offset: 3px; }
.boton { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 16px; background: var(--color-texto); color: var(--color-fondo); font-weight: var(--font-weight-semibold); text-decoration: none; }
.boton:hover { background: var(--color-texto-suave); }
.cierre__letra { margin: 0; font-size: var(--text-nota); line-height: var(--leading-nota); color: var(--color-texto-suave); }