/* Notas · estilos. Un solo archivo, sin framework.
   Tokens arriba; cada color pastel define --fondo y --acento para su tarjeta. */

:root {
  --papel: #FBFAF6;
  --blanco: #FFFFFF;
  --tinta: #1F1E1B;
  --tinta-2: #6B675F;
  --tinta-3: #9C978C;
  --linea: #E8E5DD;
  --alarma: #B3423C;

  --mantequilla: #FFF3B0; --mantequilla-tinta: #7A5C00;
  --rosa: #FFD6D6;        --rosa-tinta: #9E3B38;
  --menta: #D4F1DE;       --menta-tinta: #27633F;
  --durazno: #FFE0C2;     --durazno-tinta: #8F4F1B;
  --cielo: #D6E8FF;       --cielo-tinta: #2B5590;
  --lavanda: #E6DDF7;     --lavanda-tinta: #5B4690;

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'DM Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(31, 30, 27, .06);
  --sombra-alta: 0 2px 4px rgba(0, 0, 0, .06), 0 18px 40px rgba(31, 30, 27, .16);
  --radio: 14px;
  --ancho: 1240px;
}

.c-mantequilla { --fondo: var(--mantequilla); --acento: var(--mantequilla-tinta); }
.c-rosa        { --fondo: var(--rosa);        --acento: var(--rosa-tinta); }
.c-menta       { --fondo: var(--menta);       --acento: var(--menta-tinta); }
.c-durazno     { --fondo: var(--durazno);     --acento: var(--durazno-tinta); }
.c-cielo       { --fondo: var(--cielo);       --acento: var(--cielo-tinta); }
.c-lavanda     { --fondo: var(--lavanda);     --acento: var(--lavanda-tinta); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--papel); color: var(--tinta);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.arrastre-activo { user-select: none; cursor: grabbing; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento, var(--tinta)); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .01em; }
.titulo-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.05; }
.eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-2);
}

/* ── botones ─────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: 14px;
  line-height: 1; white-space: nowrap; transition: background .15s, transform .15s;
}
.boton.primario { background: var(--tinta); color: var(--papel); }
.boton.primario:hover { background: #000; }
.boton.sutil { color: var(--tinta-2); }
.boton.sutil:hover { background: rgba(31, 30, 27, .06); color: var(--tinta); }
.boton.icono { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; color: var(--tinta-3); font-size: 18px; }
.boton.icono:hover { background: rgba(31, 30, 27, .08); color: var(--tinta); }
.boton.peligro { color: var(--alarma); }
.boton.peligro:hover { background: rgba(179, 66, 60, .08); }
.boton:active { transform: scale(.97); }

/* ── techo ───────────────────────────────────────────────────────────────── */
.techo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px; background: rgba(251, 250, 246, .85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.techo-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 22px; }
.techo-acciones { display: flex; align-items: center; gap: 4px; }
.volver { text-decoration: none; color: var(--tinta-2); font-weight: 500; font-size: 14px; }
.volver:hover { color: var(--tinta); }

/* El post-it: la marca. Un cuadrito amarillo apenas girado. */
.postit {
  display: inline-block; width: 18px; height: 18px; border-radius: 3px;
  background: var(--mantequilla); transform: rotate(-6deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  position: relative;
}
.postit::after {
  content: ''; position: absolute; left: 4px; top: 6px; width: 7px; height: 4px;
  border-left: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); transform: rotate(-45deg);
}

/* ── entrada (PIN) ───────────────────────────────────────────────────────── */
.entrada { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.entrada-caja { width: min(340px, 100%); text-align: center; display: grid; gap: 14px; }
.entrada-caja .marca { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 4px; }
.entrada-caja .marca .postit { width: 30px; height: 30px; border-radius: 5px; }
.entrada-caja .marca .postit::after { left: 7px; top: 10px; width: 12px; height: 6px; }
.entrada-caja h1 { font-family: var(--serif); font-size: 44px; line-height: 1; }
.entrada-caja p { color: var(--tinta-2); }
.entrada-caja input {
  width: 100%; padding: 14px 16px; text-align: center; font-family: var(--mono); font-size: 22px; letter-spacing: .3em;
  border: 0; border-radius: 12px; background: var(--blanco); box-shadow: var(--sombra);
}
.entrada-caja input:focus { outline: 2px solid var(--tinta); }
.entrada-caja .boton { justify-content: center; padding: 13px; }
.entrada-error { color: var(--alarma); font-size: 14px; }
.entrada-caja.tiembla { animation: tiembla .4s; }
@keyframes tiembla { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ── muro ────────────────────────────────────────────────────────────────── */
.pagina { max-width: var(--ancho); margin: 0 auto; padding: 24px 32px 96px; }
.muro-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 28px; }
.muro-cabecera h1 { font-size: 44px; }
.muro-cabecera .sub { color: var(--tinta-2); }
.muro { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.proyecto-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left;
  min-height: 210px; padding: 22px 22px 18px; border-radius: var(--radio);
  background: var(--fondo); box-shadow: var(--sombra); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.animar .proyecto-card, body.animar .seccion, body.animar .nota { animation: aparece .4s both; }
.proyecto-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.proyecto-card .asa { position: absolute; top: 14px; right: 14px; opacity: 0; }
.proyecto-card:hover .asa { opacity: 1; }
.proyecto-nombre { font-family: var(--serif); font-size: 32px; line-height: 1; margin-top: 2px; }
.proyecto-cliente { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--acento); }
.proyecto-card .mosaico { margin-top: auto; padding-top: 14px; }
.proyecto-cifras { color: var(--tinta-2); margin-top: 8px; }
.proyecto-cifras b { color: var(--tinta); font-weight: 500; }
.proyecto-cifras .bloquea, .avance .bloquea { color: var(--alarma); }
.proyecto-fecha { color: var(--tinta-3); }
.proyecto-card.pausado, .proyecto-card.entregado { opacity: .7; }
.proyecto-card .estado-etq { position: absolute; top: 16px; left: 22px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--acento); }
.proyecto-card.con-estado { padding-top: 40px; }

.proyecto-card.nuevo {
  background: transparent; box-shadow: none; border: 1.5px dashed var(--linea);
  align-items: center; justify-content: center; color: var(--tinta-2); font-size: 15px; font-weight: 500;
}
.proyecto-card.nuevo:hover { border-color: var(--tinta-3); color: var(--tinta); transform: none; box-shadow: none; }
.formulario-nuevo { display: grid; gap: 10px; background: var(--blanco); cursor: default; }
.formulario-nuevo input { width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); }
.formulario-nuevo input:focus { outline: 2px solid var(--tinta); border-color: transparent; }
.formulario-nuevo .acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* El mosaico: un cuadrito por tarea, del color de su lista; lleno si está hecha. */
.mosaico { display: flex; flex-wrap: wrap; gap: 3px; }
.mosaico i { display: block; width: 9px; height: 9px; border-radius: 2px; background: var(--acento); opacity: .22; }
.mosaico i.h { opacity: 1; }
.mosaico.grande i { width: 12px; height: 12px; border-radius: 3px; }
.mosaico:empty::before { content: 'Sin tareas todavía'; font-family: var(--mono); font-size: 12px; color: var(--tinta-3); }

/* ── proyecto ────────────────────────────────────────────────────────────── */
.proyecto-cabecera { display: grid; gap: 6px; margin: 8px 0 32px; max-width: 760px; }
.proyecto-cabecera h1 { font-size: 46px; }
.proyecto-cliente-grande { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--acento); }
.proyecto-descripcion { color: var(--tinta-2); max-width: 60ch; margin-top: 4px; }
.avance { display: grid; gap: 10px; margin-top: 18px; }
.avance p { color: var(--tinta-2); }
.avance p b { color: var(--tinta); font-weight: 500; }

.tablero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.listas { display: grid; gap: 18px; }
.notas-col { display: grid; gap: 14px; position: sticky; top: 72px; }
.notas-grid { display: grid; gap: 14px; }

/* Una lista = una hoja pastel. Las filas van sin caja, solo con una línea fina. */
.seccion {
  padding: 18px 22px 12px; border-radius: var(--radio);
  background: var(--fondo); box-shadow: var(--sombra);
}
.seccion-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.seccion-emoji { font-size: 18px; width: 24px; text-align: center; }
.seccion-nombre {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--acento); padding: 4px 0; border-radius: 4px;
}
.seccion-cuenta { color: var(--acento); opacity: .8; }
.seccion-menu { opacity: 0; }
.seccion:hover .seccion-menu, .seccion-menu:focus-visible { opacity: 1; }

.filas { min-height: 12px; }
.fila {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: start;
  padding: 9px 0; border-top: 1px solid rgba(31, 30, 27, .07);
  position: relative;
}
.fila:first-child { border-top: 0; }
.fila-texto { display: grid; gap: 2px; min-width: 0; }
.fila-titulo { font-size: 15px; line-height: 1.4; padding: 1px 0; border-radius: 4px; word-break: break-word; }
.fila-nota { font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); padding: 1px 0; border-radius: 4px; white-space: pre-wrap; word-break: break-word; }
.fila-esperado { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; color: var(--tinta-2); }
.fila-esperado .etq { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--acento); flex: none; }
.fila-esperado-texto { flex: 1; min-width: 0; padding: 1px 0; border-radius: 4px; }
.fila-nota:empty { display: none; }
.fila:focus-within .fila-nota:empty { display: block; }
.fila.hecha .fila-titulo { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: rgba(31, 30, 27, .3); }
.fila.hecha .fila-nota, .fila.hecha .fila-esperado { color: var(--tinta-3); }
.fila.bloquea .fila-titulo::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--alarma); margin: 0 8px 2px 0; vertical-align: middle;
}
.fila.hecha.bloquea .fila-titulo::before { display: none; }
.fila .asa, .fila .fila-mas { opacity: 0; margin-top: 1px; }
.fila:hover .asa, .fila:hover .fila-mas, .fila .fila-mas:focus-visible { opacity: 1; }
.fila .fila-mas { width: 26px; height: 26px; font-size: 16px; }

/* Vacío editable: el placeholder sale del atributo. */
[contenteditable]:empty::before { content: attr(data-placeholder); color: var(--tinta-3); pointer-events: none; }
[contenteditable]:hover { background: rgba(255, 255, 255, .35); }
[contenteditable]:focus { outline: none; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.proyecto-cabecera [contenteditable]:hover { background: rgba(31, 30, 27, .04); }
.proyecto-cabecera [contenteditable]:focus { background: var(--blanco); box-shadow: 0 0 0 4px var(--blanco); }

/* La casilla: un círculo del color de la lista. */
.marca-check {
  width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid var(--acento); background: transparent; position: relative;
  transition: background .15s, transform .15s;
}
.marca-check::after {
  content: ''; position: absolute; left: 5px; top: 4px; width: 7px; height: 4px;
  border-left: 2px solid var(--fondo); border-bottom: 2px solid var(--fondo); transform: rotate(-45deg) scale(0);
  transition: transform .15s;
}
.marca-check:hover { background: rgba(255, 255, 255, .5); }
.fila.hecha .marca-check { background: var(--acento); }
.fila.hecha .marca-check::after { transform: rotate(-45deg) scale(1); }
.marca-check.animada { animation: salta .3s; }
@keyframes salta { 40% { transform: scale(1.25); } }
.marca-check[disabled] { cursor: default; }

.anadir { display: block; width: 100%; text-align: left; padding: 9px 0 6px; color: var(--acento); font-size: 14px; font-weight: 500; opacity: .75; border-top: 1px solid rgba(31, 30, 27, .07); }
.filas:empty + .anadir { border-top: 0; }
.anadir:hover { opacity: 1; }
#btn-nueva-seccion { justify-self: start; }

.asa {
  cursor: grab; touch-action: none; user-select: none; color: var(--tinta-3);
  font-size: 14px; letter-spacing: -2px; line-height: 1; padding: 4px 2px; border-radius: 4px;
}
.asa:hover { color: var(--tinta); background: rgba(255, 255, 255, .5); }
.fantasma { position: fixed; z-index: 100; pointer-events: none; box-shadow: var(--sombra-alta); opacity: .95; margin: 0; }
.arrastrando { opacity: .25; }
.hueco { border-radius: 10px; background: rgba(31, 30, 27, .06); border: 1.5px dashed rgba(31, 30, 27, .18); margin: 4px 0; }

/* ── notas (post-its) ────────────────────────────────────────────────────── */
.nota {
  display: grid; gap: 4px; padding: 16px 18px 12px; border-radius: var(--radio);
  background: var(--fondo); box-shadow: var(--sombra); position: relative;
}
.nota.fijada::before { content: '📌'; position: absolute; top: -8px; right: 12px; font-size: 15px; transform: rotate(12deg); }
.nota-titulo { font-family: var(--serif); font-size: 21px; line-height: 1.1; color: var(--tinta); padding: 2px 0; border-radius: 4px; }
.nota-cuerpo { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--tinta); padding: 2px 0; border-radius: 4px; min-height: 22px; }
.nota-cuerpo.larga:not(:focus) { max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.nota-pie { display: flex; align-items: center; gap: 8px; margin-top: 8px; opacity: 0; transition: opacity .15s; }
.nota:hover .nota-pie, .nota:focus-within .nota-pie { opacity: 1; }
.nota-pie .fecha { margin-left: auto; color: var(--tinta-3); }
.nota.nueva {
  border: 1.5px dashed var(--linea); background: transparent; box-shadow: none;
  color: var(--tinta-2); font-weight: 500; text-align: left; padding: 14px 18px;
}
.nota.nueva:hover { border-color: var(--tinta-3); color: var(--tinta); }
.nota .asa { position: absolute; top: 10px; right: 10px; opacity: 0; }
.nota:hover .asa { opacity: 1; }

.colores { display: inline-flex; gap: 6px; }
.colores i { display: block; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.colores i:hover { transform: scale(1.15); }
.colores i.activo { border-color: var(--tinta); }
.colores i[data-color="mantequilla"] { background: var(--mantequilla); }
.colores i[data-color="rosa"]        { background: var(--rosa); }
.colores i[data-color="menta"]       { background: var(--menta); }
.colores i[data-color="durazno"]     { background: var(--durazno); }
.colores i[data-color="cielo"]       { background: var(--cielo); }
.colores i[data-color="lavanda"]     { background: var(--lavanda); }

/* ── menú flotante, ficha, diálogo, avisos ───────────────────────────────── */
.menu-flotante {
  position: absolute; z-index: 30; min-width: 220px; padding: 10px; border-radius: 12px;
  background: var(--blanco); box-shadow: var(--sombra-alta); display: grid; gap: 4px;
}
.menu-flotante .titulo { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); padding: 6px 8px 2px; }
.menu-flotante button, .menu-flotante select { text-align: left; padding: 8px 10px; border-radius: 8px; width: 100%; font-size: 14px; }
.menu-flotante button:hover { background: rgba(31, 30, 27, .06); }
.menu-flotante select { border: 1px solid var(--linea); background: var(--papel); }
.menu-flotante .colores { padding: 6px 8px 8px; }
.menu-flotante hr { border: 0; border-top: 1px solid var(--linea); margin: 4px 0; }

.ficha {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); z-index: 40;
  background: var(--blanco); box-shadow: -8px 0 40px rgba(31, 30, 27, .12);
  padding: 24px 28px 32px; overflow: auto; display: grid; gap: 14px; align-content: start;
  animation: entra-derecha .22s ease-out;
}
@keyframes entra-derecha { from { transform: translateX(24px); opacity: 0; } }
.ficha-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ficha label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.ficha textarea, .ficha select, .ficha input[type="text"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel);
  font-size: 14.5px; line-height: 1.5; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--tinta);
}
.ficha textarea { min-height: 120px; resize: vertical; }
.ficha .campo-titulo { font-size: 17px; font-weight: 500; }
.ficha .conmutador { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 400; color: var(--tinta); }
.ficha .conmutador input { width: 18px; height: 18px; accent-color: var(--alarma); }
.ficha .fechas { color: var(--tinta-3); display: grid; gap: 2px; }
.ficha .pie { display: flex; justify-content: space-between; margin-top: 8px; }
.velo { position: fixed; inset: 0; z-index: 39; background: rgba(31, 30, 27, .12); }

.dialogo { border: 0; border-radius: 18px; padding: 28px; width: min(460px, calc(100% - 32px)); box-shadow: var(--sombra-alta); background: var(--blanco); color: var(--tinta); }
.dialogo::backdrop { background: rgba(31, 30, 27, .25); }
.dialogo h2 { font-family: var(--serif); font-size: 30px; margin-bottom: 6px; }
.dialogo p { color: var(--tinta-2); }
.dialogo .cuerpo { display: grid; gap: 14px; margin: 18px 0; }
.dialogo .enlace { display: flex; gap: 8px; align-items: center; }
.dialogo .enlace input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); font-family: var(--mono); font-size: 13px; }
.dialogo .acciones { display: flex; justify-content: flex-end; gap: 8px; }
.dialogo ol { margin: 0; padding-left: 20px; color: var(--tinta-2); display: grid; gap: 6px; }
.dialogo.ancho { width: min(620px, calc(100% - 32px)); max-height: 86vh; overflow: auto; }

/* Llaves de acceso */
.llaves-lista { display: grid; gap: 2px; }
.llave-fila { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--linea); }
.llave-fila:first-child { border-top: 0; }
.llave-detalle { display: block; color: var(--tinta-3); margin-top: 2px; }
.llave-nueva { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linea); }
.llave-nueva input, .llave-nueva select { padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); min-width: 0; }
.token-caja { background: var(--mantequilla); border-radius: 12px; padding: 16px 18px; display: grid; gap: 10px; }
.token-caja .eyebrow { color: var(--mantequilla-tinta); }
.token-caja input { background: rgba(255, 255, 255, .75); border-color: transparent; }
.token-caja .ojo { color: var(--mantequilla-tinta); font-size: 13.5px; }
.receta { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(31, 30, 27, .12); }
.receta p { font-size: 13.5px; color: var(--tinta-2); }
.receta input { font-size: 12px; }

.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  background: var(--tinta); color: var(--papel); padding: 10px 18px; border-radius: 999px; font-size: 14px;
  box-shadow: var(--sombra-alta); animation: aparece .25s both;
}
.franja {
  position: sticky; top: 60px; z-index: 19; text-align: center; padding: 8px 16px; font-size: 13.5px;
  background: var(--mantequilla); color: var(--mantequilla-tinta);
}

/* Vista pública */
.publico-cinta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 32px; font-size: 13.5px; color: var(--tinta-2); border-bottom: 1px solid var(--linea); }
.publico-cinta a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 18px; color: var(--tinta); }

/* ── animación ───────────────────────────────────────────────────────────── */
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }
.muro > :nth-child(2) { animation-delay: .04s; } .muro > :nth-child(3) { animation-delay: .08s; }
.muro > :nth-child(4) { animation-delay: .12s; } .muro > :nth-child(5) { animation-delay: .16s; }
.listas > :nth-child(2) { animation-delay: .04s; } .listas > :nth-child(3) { animation-delay: .08s; }
.listas > :nth-child(4) { animation-delay: .12s; } .listas > :nth-child(5) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── móvil ───────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .tablero { grid-template-columns: 1fr; gap: 28px; }
  .notas-col { position: static; }
  .notas-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .techo, .publico-cinta { padding: 10px 16px; }
  .pagina { padding: 12px 16px 120px; }
  .muro-cabecera h1 { font-size: 36px; }
  .muro { grid-template-columns: 1fr; gap: 14px; }
  .proyecto-card { min-height: 0; padding: 18px; }
  .proyecto-cabecera h1 { font-size: 36px; }
  .proyecto-cliente-grande { font-size: 20px; }
  .seccion { padding: 14px 16px 10px; }
  .fila { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
  .fila .asa, .fila .fila-mas, .seccion-menu, .nota-pie, .nota .asa, .proyecto-card .asa { opacity: 1; }
  .notas-grid { grid-template-columns: 1fr; }
  .ficha { width: 100%; padding: 20px 18px 40px; }
  .dialogo { padding: 22px; }
  .llave-nueva { grid-template-columns: 1fr; }
  .llave-fila { align-items: flex-start; }
  .franja { top: 52px; }
}