/* =========================================================================
   system.css — Patrones de SISTEMA efectivamente implementados.
   Fuente: docs/DESIGN_SYSTEM.md (Final / Accepted / Visual freeze)

   Alcance actual (Slice 1): shell, navegación, footer y las primitivas de
   link que el shell realmente usa.

   Los demás patrones de Sistema (pauta, evidencia, listas marcadas, citas,
   lista de definición, columnas divididas, cinta de proceso, banda
   narrativa, Case Study Header) entran cuando una pantalla real los
   necesite, no por anticipación.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Altura del sticky comprimido.

   NO es un valor estimado: se deriva de los valores del contrato y se
   verifica por medición en tests/shell.spec.js, que falla si la altura
   renderizada deja de coincidir.

     mobile   = 14px padding + 44px (control) + 14px padding + 1px filete
     desktop  = 14px padding + 17px (wordmark) + 14px padding + 1px filete

   Existe para que los anchors no queden tapados por la navegación fija.
   ------------------------------------------------------------------------- */
:root {
  --nav-sticky-h: 73px;
}

@media (min-width: 900px) {
  :root {
    --nav-sticky-h: 46px;
  }
}

[id] {
  scroll-margin-top: calc(var(--nav-sticky-h) + var(--s5));
}

/* -------------------------------------------------------------------------
   Shell
   Sin sombra, sin blur. Fondo sólido y filete inferior en estado comprimido.
   ------------------------------------------------------------------------- */
.shell {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg);
  border-bottom: 1px solid transparent;
  padding-block: var(--s5);
  transition:
    padding-block var(--duration-interaction) var(--easing),
    border-bottom-color var(--duration-interaction) var(--easing);
}

.shell[data-compressed='true'] {
  padding-block: 14px;
  border-bottom-color: var(--border);
}

.shell__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s4);
  row-gap: 0;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter-sm);
}

@media (min-width: 900px) {
  .shell__inner {
    flex-wrap: nowrap;
    padding-inline: var(--gutter);
  }
}

/* -------------------------------------------------------------------------
   Wordmark
   La identidad se sostiene tipográficamente (D-023): no hay logo.
   ------------------------------------------------------------------------- */
.wordmark {
  text-decoration: none;
  color: var(--text-primary);
}

.wordmark__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5);
  line-height: 1;
  letter-spacing: -0.03em;
}

.wordmark__url {
  display: block;
  margin-top: var(--s1);
  color: var(--text-secondary);
}

.shell[data-compressed='true'] .wordmark__name {
  font-size: 17px;
}

.shell[data-compressed='true'] .wordmark__url {
  display: none;
}

/* -------------------------------------------------------------------------
   Control del menú mobile
   44 × 44. El estado abierto es visible también mediante borde, no sólo
   por color.
   ------------------------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition:
    border-color var(--duration-interaction) var(--easing),
    color var(--duration-interaction) var(--easing);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentColor;
}

.nav-toggle__bars {
  position: relative;
  color: var(--text-primary);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

.shell[data-open='true'] .nav-toggle {
  border-color: var(--accent);
}

.shell[data-open='true'] .nav-toggle__bars {
  color: var(--accent);
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Navegación
   Sin mega menu, dropdown, breadcrumb, navegación secundaria, índice
   interno ni indicador automático de sección activa.
   ------------------------------------------------------------------------- */
.nav {
  flex-basis: 100%;
}

.nav__list {
  list-style: none;
}

.nav-link {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-interaction) var(--easing);
}

.nav-link:hover {
  color: var(--accent);
}

/* --- Mobile: el panel empuja el contenido. Sin overlay, sin scroll lock,
       sin focus trap. Los ítems miden 54px. --------------------------------- */
@media (max-width: 899.98px) {
  .nav {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
      grid-template-rows var(--duration-interaction) var(--easing),
      visibility 0s linear var(--duration-interaction);
  }

  .shell[data-open='true'] .nav {
    grid-template-rows: 1fr;
    visibility: visible;
    transition:
      grid-template-rows var(--duration-interaction) var(--easing),
      visibility 0s;
  }

  .nav__list {
    overflow: hidden;
  }

  .nav__item + .nav__item {
    border-top: 1px solid var(--border);
  }

  .nav-link {
    display: flex;
    align-items: center;
    min-height: 54px;
  }
}

/* --- Desktop: cinco links en línea. ------------------------------------- */
@media (min-width: 900px) {
  .nav {
    flex-basis: auto;
  }

  .nav__list {
    display: flex;
    align-items: center;
    column-gap: var(--s5);
  }
}

/* -------------------------------------------------------------------------
   Links inline
   El subrayado, no sólo el color, comunica que es un link.
   ------------------------------------------------------------------------- */
.link-inline {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition:
    color var(--duration-interaction) var(--easing),
    border-bottom-color var(--duration-interaction) var(--easing);
}

.link-inline:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* -------------------------------------------------------------------------
   Footer
   Una sola versión, sin variantes. En mobile se apila y la nota queda
   alineada a la izquierda.
   ------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--s8);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s5);
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter-sm);
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.footer__note {
  color: var(--text-secondary);
}

@media (max-width: 899.98px) {
  /* Target mobile de 44px: estos links no son inline dentro de un párrafo. */
  .footer__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (min-width: 900px) {
  .footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--gutter);
  }

  .footer__list {
    flex-direction: row;
    gap: var(--s5);
  }
}

/* -------------------------------------------------------------------------
   Movimiento reducido
   El estado sigue cambiando, pero sin animación de altura ni retardo.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .shell,
  .nav,
  .shell[data-open='true'] .nav,
  .nav-toggle,
  .nav-link,
  .link-inline {
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   Layout de sección
   Ritmo vertical del Design System: s6 en mobile, s8 en desktop.
   ------------------------------------------------------------------------- */
.seccion {
  padding-block: var(--s6);
}

.contenedor {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter-sm);
}

/* La medida de lectura es responsabilidad de Layout, no de `.body`. */
.medida {
  max-width: var(--measure);
}

@media (min-width: 900px) {
  .seccion {
    padding-block: var(--s8);
  }

  .contenedor {
    padding-inline: var(--gutter);
  }
}

/* -------------------------------------------------------------------------
   Pauta — Sistema
   Segmento + numeral opcional + rótulo + filete.
   Sólo abre secciones narrativas de primer nivel, como máximo una por
   sección. El numeral es local a la página. El largo del segmento es Local
   y se pasa como --pauta-seg.
   ------------------------------------------------------------------------- */
.pauta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s5);
}

.pauta__segmento {
  flex: none;
  width: var(--pauta-seg, 24px);
  height: 3px;
  background-color: var(--accent);
}

.pauta__numeral {
  flex: none;
  color: var(--accent);
  white-space: nowrap;
}

.pauta__rotulo {
  flex: none;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Ocupa el espacio restante y colapsa a 0 cuando falta ancho. Nunca se
   omite deliberadamente como variante visual. */
.pauta__filete {
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  background-color: var(--border);
}

@media (min-width: 900px) {
  .pauta {
    gap: 14px;
  }
}

/* -------------------------------------------------------------------------
   Estado de proyecto — Sistema
   Sólo dos estados. Vive junto al nombre del proyecto, nunca como badge
   independiente.
   ------------------------------------------------------------------------- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.estado::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}

.estado--desarrollo {
  color: var(--accent);
}

.estado--publicado {
  color: var(--status-published);
}

/* -------------------------------------------------------------------------
   Acciones — Sistema
   Como máximo un primario por grupo de acciones.
   ------------------------------------------------------------------------- */
.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 26px;
  border-radius: var(--radius-control);
  background-color: var(--accent);
  color: #1a0e08;
  text-decoration: none;
  transition: opacity var(--duration-interaction) var(--easing);
}

.btn-primary:hover {
  opacity: 0.9;
}

/* Tipo de acción con filete inferior. Se combina con el estilo tipográfico
   `.action` de base.css, que es otra cosa: aquél define familia, peso y
   tamaño; éste define el tipo de control. */
.action-link {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  transition: color var(--duration-interaction) var(--easing);
}

.action-link:hover {
  color: var(--accent);
}

@media (max-width: 899.98px) {
  /* Target mobile de 44px. */
  .action-link,
  .btn-primary {
    min-height: 44px;
  }
}

/* -------------------------------------------------------------------------
   Superficie de evidencia — Sistema
   Una sola API: la cantidad de figuras determina la composición. No existen
   variantes single / duo / trio.
   ------------------------------------------------------------------------- */
.evidencia {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  border-radius: var(--radius-media);
  background-color: var(--surface-media);
}

.evidencia__figura {
  margin: 0;
  min-width: 0;
}

.evidencia__figura img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-figure);
}

.evidencia__caption {
  display: block;
  margin-top: var(--s3);
  color: var(--text-secondary);
}

@media (min-width: 900px) {
  /* N columnas iguales para N figuras, sin declarar N en ninguna clase. */
  .evidencia {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   A. Lista marcada — Sistema
   La marca se alinea con la primera línea y soporta contenido multilínea.
   El ítem de cierre es una variante EXPLÍCITA: nunca se infiere con
   :last-child.
   ------------------------------------------------------------------------- */
.lista-marcada {
  list-style: none;
  border-bottom: 1px solid var(--border);
}

.lista-marcada__item {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: var(--s3);
  align-items: start;
  padding-block: var(--s4);
  border-top: 1px solid var(--border);
}

.lista-marcada__marca {
  color: var(--text-secondary);
  /* Alinea la marca con la primera línea del texto. */
  padding-top: 0.35em;
}

.lista-marcada__item--cierre .lista-marcada__marca {
  color: var(--accent);
}

.lista-marcada__item--cierre .lista-marcada__texto {
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   B. Cita destacada con barra — Sistema
   Expresa la tesis, pregunta o principio de una sección. No es testimonial
   ni callout genérico, por eso el elemento por defecto es <p>.
   Máximo una por sección y dos por página.
   ------------------------------------------------------------------------- */
.pull-quote {
  border-left: 3px solid var(--accent);
  padding-left: 20px;
}

/* -------------------------------------------------------------------------
   C. Lista de definición — Sistema
   ------------------------------------------------------------------------- */
.definicion {
  border-bottom: 1px solid var(--border);
}

.definicion__fila {
  padding-block: var(--s4);
  border-top: 1px solid var(--border);
}

.definicion__desc {
  margin: 0;
  color: var(--text-secondary);
}

@media (min-width: 900px) {
  .definicion__fila {
    display: grid;
    grid-template-columns: 260px 1fr;
    column-gap: var(--s5);
    align-items: baseline;
  }
}

/* -------------------------------------------------------------------------
   D. Columnas divididas — Sistema
   Soporta N=2 y N=3. Sin cards. Desktop usa filete vertical; mobile apila
   con filete horizontal.
   ------------------------------------------------------------------------- */
.columnas {
  display: grid;
  border-bottom: 1px solid var(--border);
}

.columnas__col {
  padding-block: var(--s5);
  border-top: 1px solid var(--border);
}

@media (min-width: 900px) {
  .columnas {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-bottom: none;
  }

  .columnas__col {
    padding-block: 0;
    padding-inline: var(--s5);
    border-top: none;
    border-left: 1px solid var(--border);
  }

  .columnas__col:first-child {
    padding-left: 0;
    border-left: none;
  }
}

/* -------------------------------------------------------------------------
   E. Cinta de proceso de trabajo — Sistema
   Representa únicamente el proceso de trabajo de Fernando. Texto real, no
   imagen. Ninguna fuente define un paso activo en la Home, así que no se
   renderiza ninguno.
   ------------------------------------------------------------------------- */
.proceso {
  list-style: none;
  display: grid;
  gap: var(--s5);
}

.proceso__paso {
  padding-left: var(--s4);
  border-left: 3px solid var(--border);
}

@media (min-width: 900px) {
  .proceso {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--s5);
  }

  .proceso__paso {
    padding-left: 0;
    padding-top: var(--s4);
    border-left: none;
    border-top: 3px solid var(--border);
  }
}

/* -------------------------------------------------------------------------
   F. Banda narrativa — Sistema
   Composición a sangre lateral. Máximo una por página, siempre por una
   razón narrativa.
   ------------------------------------------------------------------------- */
.banda {
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* -------------------------------------------------------------------------
   Back link — Sistema
   El subset latin de las fuentes self-hosted no incluye U+2190, así que la
   flecha es un SVG decorativo y no depende de un fallback del sistema.
   El nombre accesible del link es sólo «Proyectos».
   ------------------------------------------------------------------------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-9);
  line-height: 1;
  transition: color var(--duration-interaction) var(--easing);
}

.back-link:hover {
  color: var(--accent);
}

.back-link__flecha {
  flex: none;
  width: 15px;
  height: 15px;
}

/* -------------------------------------------------------------------------
   Shell de case study — Sistema
   En estado comprimido la identidad se reemplaza por back link, filete
   vertical, nombre del proyecto y estado. `Proyectos` desaparece de la
   lista derecha porque ya está en el back link: quedan cuatro links.
   ------------------------------------------------------------------------- */
.shell__caso {
  display: none;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

.shell__caso-nombre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  /* El nombre y el estado no deben partirse. */
  white-space: nowrap;
}

.shell__caso-filete {
  flex: none;
  width: 1px;
  height: 16px;
  background-color: var(--border);
}

.shell__caso .estado {
  white-space: nowrap;
}

/* El intercambio identidad ↔ caso ocurre con el estado comprimido. */
.shell--caso[data-compressed='true'] .shell__identidad {
  display: none;
}

.shell--caso[data-compressed='true'] .shell__caso {
  display: flex;
}

/* En el sticky mobile puede omitirse el estado: ya fue comunicado en el
   Case Study Header. */
@media (max-width: 899.98px) {
  .shell__caso .estado,
  .shell__caso .shell__caso-filete {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Case Study Header — Sistema
   Required: back link, nombre en hero-title, estado, lede y metadata.
   Las acciones son opcionales; cuando no hay, no se deja hueco.
   El encabezado no lleva pauta.
   ------------------------------------------------------------------------- */
.case-header {
  padding-block: var(--s6) var(--s7);
}

.case-header__identidad {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s4);
  row-gap: var(--s2);
  margin-top: var(--s5);
}

.case-header__lede {
  margin-top: var(--s5);
  color: var(--text-secondary);
}

.case-header__lede > * + * {
  margin-top: var(--s4);
}

.case-header__meta {
  margin-top: var(--s5);
  color: var(--text-secondary);
}

/* Las acciones sólo ocupan espacio cuando existen. */
.case-header__acciones {
  margin-top: var(--s6);
}

@media (min-width: 900px) {
  .case-header {
    padding-block: var(--s7) var(--s8);
  }
}