/* =====================================================================
   MAKKI — Componentes. Retícula editorial estricta de tarjetas
   rectangulares (seccion 9.3): sin superposiciones, sin flotantes,
   sin radios, sin sombras.
   ===================================================================== */

/* ---------------------------------------------------------------
   BLOQUES DE COLOR ALTERNOS — separadores de estado, no decoracion
   --------------------------------------------------------------- */
.bloque { padding: var(--e-5); }
@media (min-width: 720px) { .bloque { padding: var(--e-6); } }

.bloque--negro  { background: var(--negro); color: var(--crema); border: var(--filete) solid var(--negro-filete); }
.bloque--crema  { background: var(--crema); color: var(--negro); }
.bloque--acento { background: var(--acento); color: var(--negro); }        /* texto pequeno en NEGRO: 4.91:1 */
.bloque--acento-prof { background: var(--acento-prof); color: var(--crema); } /* texto pequeno en CREMA: 5.30:1 */
.bloque--apagado { background: var(--negro-elev); color: var(--crema-apag); border: var(--filete) solid var(--negro-filete); }

.bloque--crema h1, .bloque--crema h2, .bloque--crema h3,
.bloque--acento h1, .bloque--acento h2, .bloque--acento h3 { color: inherit; }

/* Filete superior grueso como marca de seccion */
.bloque--marcado { border-top: var(--filete-grueso) solid var(--acento); }

/* ---------------------------------------------------------------
   RETÍCULA — una columna en movil, multi-columna a partir de 720px
   --------------------------------------------------------------- */
.reticula { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .reticula--2 { grid-template-columns: repeat(2, 1fr); }
  .reticula--3 { grid-template-columns: repeat(3, 1fr); }
  .reticula--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (min-width: 1040px) {
  .reticula--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Dos paneles + lienzo (Modulo 2). En movil se apilan siempre. */
.tres-zonas { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 1100px) {
  .tres-zonas { grid-template-columns: 300px 1fr 330px; align-items: start; }
}

/* ---------------------------------------------------------------
   TARJETA "PROGRAMA DE FESTIVAL" (seccion 9.3 y 9.4)
   titular grande · franja de reparto · imagen · metadato en esquina
   --------------------------------------------------------------- */
.tarjeta {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: var(--e-4);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-elev);
  color: var(--crema);
  text-align: left;
  width: 100%;
  font: inherit;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans);
}
.tarjeta:hover, .tarjeta:focus-visible { border-color: var(--acento); }
.tarjeta--estatica { cursor: default; }
.tarjeta--estatica:hover { border-color: var(--negro-filete); }

.tarjeta--crema  { background: var(--crema); color: var(--negro); border-color: var(--crema); }
.tarjeta--crema:hover { background: #fff; border-color: var(--negro); }
.tarjeta--acento { background: var(--acento); color: var(--negro); border-color: var(--acento); }
.tarjeta--acento-prof { background: var(--acento-prof); color: var(--crema); border-color: var(--acento-prof); }

.tarjeta__titular {
  font-family: var(--f-display);
  font-size: var(--t-l);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: var(--ls-cartel);
  margin: 0 0 var(--e-2);
  overflow-wrap: anywhere;
}
.tarjeta__cuerpo { font-size: var(--t-s); margin: 0; flex: 1 1 auto; }
.tarjeta__pie {
  margin-top: var(--e-4);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--e-3);
}

/* Franja de reparto: cuadricula pequena de miniaturas */
.franja-reparto { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: var(--e-2) 0; }
.miniatura {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--negro); color: var(--crema);
  font-family: var(--f-cond); font-weight: 700; font-size: .7rem;
  letter-spacing: .04em;
  border: 1px solid var(--negro-filete);
}
.tarjeta--crema .miniatura,
.tarjeta--acento .miniatura { background: var(--negro); color: var(--crema); border-color: var(--negro); }
.miniatura--errante { background: transparent; color: var(--acento); border: 1px dashed var(--acento); }

/* ---------------------------------------------------------------
   BOTONES — rectangulares, planos, con area de toque de 48px
   --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--alto-toque);
  padding: var(--e-3) var(--e-5);
  border: var(--filete) solid var(--crema);
  background: transparent;
  color: var(--crema);
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: var(--t-s);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
  -webkit-tap-highlight-color: transparent;
}
/* Cada estado lleva su color y su fondo explícitos: reposo, encima, pulsado,
   cargando y desactivado. Nada se deja a la opacidad ni al gris del navegador,
   y ninguna combinación pone texto crema sobre fondo crema.
   Contraste (texto pequeño, AA 4.5:1):
     reposo       crema/negro 18:1 · crema/acento-prof 5.3:1 · acento/negro 4.9:1
     encima       negro/crema 18:1 · crema/acento-prof 5.3:1
     cargando     crema/negro-elev 17:1
     desactivado  inactivo-texto/negro 4.7:1 */
.btn:hover:not(:disabled), .btn:focus-visible:not(:disabled),
.btn:active:not(:disabled) { background: var(--crema); color: var(--negro); border-color: var(--crema); }

/* Primario en terracota PROFUNDO: el de marca con texto crema pequeño da 3.78:1
   y no pasa AA (ver la nota de tokens.css). */
.btn--primario { background: var(--acento-prof); border-color: var(--acento-prof); color: var(--crema); }
.btn--solido { background: var(--crema); color: var(--negro); border-color: var(--crema); }
.btn--solido:hover:not(:disabled), .btn--solido:focus-visible:not(:disabled),
.btn--solido:active:not(:disabled) { background: var(--acento-prof); color: var(--crema); border-color: var(--acento-prof); }
.btn--fantasma { border-color: var(--negro-filete); color: var(--crema-apag); }
.btn--peligro { border-color: var(--acento); color: var(--acento); }
.btn--peligro:hover:not(:disabled), .btn--peligro:focus-visible:not(:disabled),
.btn--peligro:active:not(:disabled) { background: var(--acento-prof); color: var(--crema); border-color: var(--acento-prof); }
.btn--bloque { width: 100%; }
.btn--menudo { min-height: 36px; padding: var(--e-2) var(--e-3); font-size: var(--t-meta); letter-spacing: .1em; }

.bloque--crema .btn { border-color: var(--negro); color: var(--negro); }
.bloque--crema .btn:hover:not(:disabled), .bloque--crema .btn:focus-visible:not(:disabled),
.bloque--crema .btn:active:not(:disabled) { background: var(--negro); color: var(--crema); border-color: var(--negro); }
.bloque--crema .btn--primario { background: var(--acento-prof); border-color: var(--acento-prof); color: var(--crema); }

/* Desactivado y cargando van al final: tienen que ganar a todas las variantes. */
.btn:disabled { background: transparent; border-color: var(--inactivo-filete); color: var(--inactivo-texto); cursor: not-allowed; }
.bloque--crema .btn:disabled { background: rgba(0, 0, 0, .06); border-color: rgba(0, 0, 0, .22); color: #5F5A53; } /* 5.2:1 */
/* Cargando no es «no disponible»: la petición está en marcha y el botón lo dice. */
.btn[aria-busy="true"] { background: var(--negro-elev); border-color: var(--crema-apag); border-style: dashed; color: var(--crema); cursor: progress; }
.bloque--crema .btn[aria-busy="true"] { background: rgba(0, 0, 0, .08); border-color: var(--negro); color: var(--negro); }

.botonera { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.botonera--fin { justify-content: flex-end; }

/* ---------------------------------------------------------------
   FORMULARIOS
   --------------------------------------------------------------- */
.campo { display: block; margin-bottom: var(--e-4); }
.campo__etiqueta {
  display: block;
  font-family: var(--f-cond);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  margin-bottom: var(--e-2);
}
.campo__pista { display: block; font-size: var(--t-xs); color: var(--crema-apag); margin-bottom: var(--e-2); font-weight: 400; letter-spacing: 0; text-transform: none; font-family: var(--f-cuerpo); }
.bloque--crema .campo__pista, .bloque--acento .campo__pista { color: rgba(0,0,0,.62); }

.entrada, textarea.entrada, select.entrada {
  width: 100%;
  min-height: var(--alto-toque);
  padding: var(--e-3);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-elev);
  color: var(--crema);
  font-family: var(--f-cuerpo);
  font-size: var(--t-m);
  line-height: 1.45;
}
.entrada::placeholder { color: #6b6560; }
.entrada:focus { border-color: var(--acento); }
textarea.entrada { min-height: 110px; resize: vertical; }

.bloque--crema .entrada, .bloque--acento .entrada {
  background: #fff; color: var(--negro); border-color: var(--negro);
}
.bloque--crema .entrada::placeholder { color: #8a857e; }

.entrada--error { border-color: var(--acento); }
.campo__error {
  display: block; margin-top: var(--e-2);
  font-family: var(--f-cond); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--acento);
}
.bloque--crema .campo__error { color: var(--acento-prof); }
/* Sobre crema el borde normal del campo es negro y pesaba más que el de error */
.bloque--crema .entrada--error { border-color: var(--acento-prof); border-width: var(--filete-grueso); }

.contador { float: right; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--crema-apag); }
.contador--limite { color: var(--acento); }

/* Casilla / radio de area amplia, tactil */
.opcion {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3);
  border: var(--filete) solid var(--negro-filete);
  cursor: pointer;
  min-height: var(--alto-toque);
  transition: border-color var(--trans), background var(--trans);
}
.opcion:hover:not(.opcion--activa) { border-color: var(--crema-apag); }
.opcion input { margin-top: 4px; flex: none; width: 20px; height: 20px; accent-color: var(--acento); }
.opcion--activa { border-color: var(--acento); background: var(--negro-elev); }
.opcion__texto { flex: 1 1 auto; }
.opcion__titulo { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-s); }
.opcion__desc { font-size: var(--t-xs); color: var(--crema-apag); }
.bloque--crema .opcion { border-color: rgba(0,0,0,.25); }
.bloque--crema .opcion--activa { border-color: var(--acento-prof); background: rgba(0,0,0,.05); }
.bloque--crema .opcion__desc { color: rgba(0,0,0,.62); }

/* ---------------------------------------------------------------
   ALERTAS EN DOS NIVELES (seccion 8)
   ambar = advertencia suave, no bloquea · terracota = alerta dura, bloquea
   --------------------------------------------------------------- */
.alerta {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3) var(--e-4);
  border-left: var(--filete-grueso) solid;
  font-size: var(--t-s);
  background: var(--negro-elev);
}
.alerta__icono { flex: none; font-family: var(--f-cond); font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.alerta__cuerpo { flex: 1 1 auto; }
.alerta__titulo { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: var(--t-xs); display: block; margin-bottom: 2px; }

.alerta--suave { border-left-color: var(--ambar); color: var(--ambar); }
.alerta--dura  { border-left-color: var(--acento); color: var(--acento); }
.alerta--ok    { border-left-color: var(--valido); color: var(--valido); }
.alerta--info  { border-left-color: var(--crema-apag); color: var(--crema-apag); }
.alerta p { color: var(--crema); margin: 0; }

/* ---------------------------------------------------------------
   BREADCRUMB DE PROGRESO (seccion 11)
   --------------------------------------------------------------- */
.breadcrumb {
  position: sticky; top: 0; z-index: 40;
  background: var(--negro);
  border-bottom: var(--filete) solid var(--negro-filete);
}
.breadcrumb__interior {
  max-width: var(--ancho-max); margin: 0 auto;
  padding-inline: var(--gutter); padding-block: var(--e-2);
  display: flex; align-items: center; gap: var(--e-3);
}

/* El tramo: el fondo de siempre y un relleno encima. El JS solo escribe la
   variable --pct sobre el nodo que ya existe; la transición es puramente
   visual y no aplaza nada del guardado. */
.tramo, .medidor { --pct: 0; position: relative; overflow: hidden; background: var(--negro-filete); }
.tramo__relleno, .medidor__relleno {
  position: absolute; top: 0; left: 0;
  background: var(--acento);
  transition: width 240ms linear, height 240ms linear, background-color var(--trans);
}
.tramo { height: var(--filete-grueso); }
.tramo__relleno { bottom: 0; width: calc(var(--pct) * 1%); }

/* --- Movil: paso activo + un medidor vertical por modulo, lleno de arriba abajo --- */
.breadcrumb__movil { display: flex; align-items: center; gap: var(--e-3); flex: 1 1 auto; min-width: 0; }
.breadcrumb__compacto {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
  background: none; border: 0; color: inherit; font: inherit;
  padding: var(--e-2) 0; cursor: pointer; min-height: var(--alto-toque); text-align: left;
}
.breadcrumb__activo { display: flex; flex-direction: column; min-width: 0; }
.breadcrumb__medidores { display: flex; gap: 6px; flex: none; height: 28px; cursor: pointer; }
.medidor { display: block; width: 8px; height: 100%; }
.medidor__relleno { right: 0; height: calc(var(--pct) * 1%); }
.medidor--completo .medidor__relleno { background: var(--valido); }
.medidor--alerta { background: var(--acento-apag); }
.medidor--actual { outline: var(--filete) solid var(--crema); outline-offset: 2px; }

/* --- Escritorio: los 5 pasos, cada uno con su tramo --- */
.breadcrumb__pasos { display: none; }
@media (min-width: 860px) {
  .breadcrumb__movil { display: none; }
  .breadcrumb__pasos { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e-2); flex: 1 1 auto; }
}

/* Mismo lenguaje que el rail de gates del M5: terracota en curso, verde
   cerrado, gris sin relleno bloqueado. La caja es negra en todos los estados:
   lo que cambia es el tramo y el color del texto. */
.paso-celda { display: flex; flex-direction: column; min-width: 0; }
.paso-celda .tramo { order: -1; }   /* detras del boton en el DOM, encima en pantalla */
.paso {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: var(--e-2) var(--e-3);
  border: var(--filete) solid var(--negro-filete); border-top: 0;
  background: var(--negro);
  color: var(--crema);
  font: inherit; text-align: left; cursor: pointer;
  min-height: 46px;
  transition: border-color var(--trans), background var(--trans), color var(--trans);
}
/* El hover solo cambia el fondo, nunca el texto: antes pesaba más que el estado
   y dejaba el paso en curso con texto crema sobre fondo crema. */
.paso:hover { background: var(--negro-elev); }
.paso__nombre { font-family: var(--f-cond); font-weight: 700; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paso__pct { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .06em; }
.paso__falta { font-family: var(--f-cond); font-size: var(--t-xs); letter-spacing: .02em; color: var(--crema-apag); margin-top: var(--e-1); }

.paso-celda--vacio .paso { color: var(--crema-apag); }
.paso-celda--completo .tramo__relleno { background: var(--valido); }
.paso-celda--completo .paso__pct { color: var(--valido); }
.paso-celda--alerta .paso { border-color: var(--acento); color: var(--acento); }
.paso-celda--alerta .tramo { background: var(--acento-apag); }
.paso-celda--bloqueado .paso { color: var(--inactivo-texto); cursor: not-allowed; }
.paso-celda--bloqueado .paso:hover { background: var(--negro); }
.paso-celda--actual .paso { background: var(--negro-elev); border-color: var(--crema); }
.paso-celda--actual .paso__nombre { color: var(--acento); }

/* En la hoja inferior cada paso es un bloque de toque completo */
.hoja__cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.hoja__global { margin-top: var(--e-5); }
.hoja .paso { min-height: var(--alto-toque); }

/* Indicador global de completitud de la Biblia */
.global-pct {
  flex: none; display: flex; flex-direction: column; align-items: flex-end;
  padding-left: var(--e-3); border-left: var(--filete) solid var(--negro-filete);
}
.global-pct__cifra { font-family: var(--f-display); font-size: var(--t-l); line-height: 1; }
.global-pct__etq { font-family: var(--f-cond); font-size: 0.58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--crema-apag); }

/* Hoja inferior con el detalle de los 5 modulos, en movil */
.hoja {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: var(--negro); border-top: var(--filete-grueso) solid var(--acento);
  padding: var(--e-4) var(--gutter) var(--e-6);
  max-height: 80vh; overflow-y: auto;
}
.hoja[hidden] { display: none !important; }
.velo { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.72); }
.velo[hidden] { display: none !important; }

/* ---------------------------------------------------------------
   CABECERA
   --------------------------------------------------------------- */
.cabecera { border-bottom: var(--filete) solid var(--negro-filete); }
.cabecera__interior {
  max-width: var(--ancho-max); margin: 0 auto;
  padding-inline: var(--gutter); padding-block: var(--e-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
}
.marca { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; border: 0; color: var(--crema); }
.marca__logo { width: 30px; height: 30px; flex: none; color: var(--acento); }
.marca__logo svg { display: block; width: 100%; height: 100%; }
.marca__texto { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.marca__nombre { font-family: var(--f-display); font-size: var(--t-l); text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.marca__sub { font-family: var(--f-cond); font-size: var(--t-meta); font-weight: 700; letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--crema-apag); }
.cabecera__acciones { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------
   VARIOS
   --------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 3px var(--e-2);
  border: 1px solid currentColor;
  font-family: var(--f-cond); font-size: var(--t-meta); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.chip--ok { color: var(--valido); }
.chip--aviso { color: var(--ambar); }
.chip--bloqueo { color: var(--acento); }
.chip--neutro { color: var(--crema-apag); }
.chip--relleno { background: var(--acento); border-color: var(--acento); color: var(--crema); }

.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-limpia > li + li { margin-top: var(--e-2); }

.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabla th, .tabla td { padding: var(--e-2) var(--e-3); text-align: left; border-bottom: 1px solid var(--negro-filete); vertical-align: top; }
.tabla th { font-family: var(--f-cond); font-size: var(--t-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--crema-apag); font-weight: 700; }
.bloque--crema .tabla th, .bloque--crema .tabla td { border-bottom-color: rgba(0,0,0,.16); }
.bloque--crema .tabla th { color: rgba(0,0,0,.6); }

.vacio { padding: var(--e-7) var(--e-4); text-align: center; border: var(--filete) dashed var(--negro-filete); }
.vacio__titular { font-family: var(--f-display); font-size: var(--t-xl); text-transform: uppercase; line-height: .95; margin-bottom: var(--e-3); }

.cargando { display: inline-block; font-family: var(--f-cond); letter-spacing: var(--ls-meta); text-transform: uppercase; font-size: var(--t-meta); color: var(--crema-apag); }

/* Aviso persistente de modo invitado (seccion 15) */
.cinta-invitado {
  background: var(--acento-prof); color: var(--crema);
  padding: var(--e-2) var(--gutter);
  font-family: var(--f-cond); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  display: flex; gap: var(--e-3); align-items: center; justify-content: center; flex-wrap: wrap;
  text-align: center;
}
.cinta-invitado a { color: var(--crema); border-bottom-color: var(--crema); }

/* Avisos tostada */
.tostadas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: var(--gutter); display: flex; flex-direction: column; gap: var(--e-2); pointer-events: none; align-items: center; }
.tostada {
  pointer-events: auto; max-width: 520px; width: 100%;
  padding: var(--e-3) var(--e-4);
  background: var(--crema); color: var(--negro);
  border-left: var(--filete-grueso) solid var(--acento);
  font-size: var(--t-s);
}
.tostada--error { background: var(--acento); color: var(--crema); border-left-color: var(--negro); }
.tostada--ok { border-left-color: var(--valido); }

/* ---------------------------------------------------------------
   EJEMPLOS POR CAMPO
   Un ejemplo no es un adorno: convierte «escribe tu idea controladora»
   en una pregunta que se puede contestar. Se inserta y se edita.
   --------------------------------------------------------------- */
.con-ejemplos { display: block; }

.ejemplos { margin-top: var(--e-2); }

.ejemplos__abrir {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--acento);
  color: var(--acento);
  font-family: var(--f-cond);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--e-1) 0;
  min-height: 32px;
  cursor: pointer;
}
.ejemplos__abrir:hover { color: var(--crema); border-bottom-color: var(--crema); }
.ejemplos__abrir:focus-visible { outline: var(--filete) solid var(--acento); outline-offset: 3px; }

/* `display:flex` de autor gana al `display:none` que el navegador aplica a
   [hidden]: sin esta línea el panel no se cerraba nunca. */
.ejemplos__cuerpo[hidden] { display: none; }
.ejemplos__cuerpo {
  margin-top: var(--e-2);
  border-left: var(--filete-grueso) solid var(--negro-filete);
  padding-left: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.ejemplos__pista {
  margin: 0;
  font-size: var(--t-s);
  color: var(--crema-apag);
  max-width: var(--ancho-lectura);
}
.ejemplos__nota {
  margin: 0;
  font-family: var(--f-cond);
  font-size: var(--t-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crema-apag);
}

.ejemplo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--e-2);
  border-top: var(--filete) solid var(--negro-filete);
  padding-top: var(--e-2);
}
.ejemplo__texto {
  margin: 0;
  flex: 1 1 220px;
  font-size: var(--t-s);
  line-height: 1.45;
}
.ejemplo .btn { flex: 0 0 auto; }

/* Sobre crema, el mismo bloque tiene que seguir leyéndose */
.bloque--crema .ejemplos__abrir { color: var(--acento-prof); border-bottom-color: var(--acento-prof); }
.bloque--crema .ejemplos__abrir:hover { color: var(--negro); border-bottom-color: var(--negro); }
.bloque--crema .ejemplos__cuerpo { border-left-color: rgba(0, 0, 0, .18); }
.bloque--crema .ejemplos__pista,
.bloque--crema .ejemplos__nota { color: #6b6560; }
.bloque--crema .ejemplo { border-top-color: rgba(0, 0, 0, .14); }

/* ---------------------------------------------------------------
   SEGUNDO FACTOR
   --------------------------------------------------------------- */
.entrada--codigo {
  font-family: var(--f-mono);
  font-size: var(--t-xl);
  letter-spacing: .5em;
  text-align: center;
  max-width: 9ch;
  padding-left: .5em;
}

.tfa__estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-s); }
.tfa__aviso {
  font-size: var(--t-s);
  border-left: var(--filete) solid var(--ambar);
  padding-left: var(--e-3);
  color: var(--crema-apag);
  max-width: var(--ancho-lectura);
}
.bloque--crema .tfa__aviso { color: #6b6560; }

/* La cinta del proyecto de ejemplo: tiene que distinguirse de la de invitado,
   porque lo que avisa es distinto — ese trabajo no es del usuario. */
.cinta-invitado--ejemplo { background: var(--ambar-prof); }
.cinta-invitado__accion {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

/* ---------------------------------------------------------------
   PÁGINAS LEGALES
   Un documento legal que no se lee no protege a nadie: aquí manda
   la medida de línea y el aire entre apartados.
   --------------------------------------------------------------- */
.legal__entradilla { font-size: var(--t-l); line-height: 1.4; max-width: var(--ancho-lectura); }
.legal__seccion { margin-bottom: var(--e-7); max-width: var(--ancho-lectura); }
.legal__seccion h3 {
  font-family: var(--f-cond);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-top: var(--filete) solid var(--acento);
  padding-top: var(--e-3);
}
.legal__lista { padding-left: var(--e-5); margin: var(--e-3) 0; }
.legal__lista li { margin-bottom: var(--e-2); }
.legal__pie { border-top: var(--filete) solid var(--negro-filete); padding-top: var(--e-3); }

/* ---------------------------------------------------------------
   PIE DE PÁGINA
   Cuatro columnas (Política · Makki · Ayuda · Social), la marca a
   tamaño de cartel y la línea de cierre con el año y la versión.
   Una columna en móvil, dos a partir de 600px, las cuatro a partir
   de 960px — la misma progresión que `.reticula`.
   --------------------------------------------------------------- */
.pie { border-top: var(--filete-grueso) solid var(--negro-filete); margin-top: var(--e-9); }
.pie__interior { max-width: var(--ancho-max); margin: 0 auto; padding-inline: var(--gutter); padding-block: var(--e-7) var(--e-5); }

.pie__grid { display: grid; gap: var(--e-6); grid-template-columns: 1fr; }
@media (min-width: 600px) { .pie__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pie__grid { grid-template-columns: repeat(4, 1fr); } }

.pie__col-titulo { display: block; margin-bottom: var(--e-3); }
.pie__enlaces li a { display: inline-block; padding: 5px 0; font-size: var(--t-s); color: var(--crema-apag); }
.pie__enlaces li a:hover, .pie__enlaces li a:focus-visible { color: var(--crema); }

.pie__marca {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(3.2rem, 15vw, 9rem);
  line-height: .82;
  text-transform: uppercase;
  letter-spacing: var(--ls-cartel);
  color: var(--crema);
  text-decoration: none;
  border: 0;
  margin: var(--e-8) 0 var(--e-5);
  overflow-wrap: anywhere;
}
.pie__marca:hover, .pie__marca:focus-visible { color: var(--acento); }

.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
  border-top: var(--filete) solid var(--negro-filete);
  padding-top: var(--e-4);
}
.pie__base a { color: var(--crema-apag); }
.pie__base a:hover, .pie__base a:focus-visible { color: var(--crema); }