/* illa. — páginas de proyectos (listado y detalle). Usa los tokens de illa.css. */

/* Cabecera de página interna */
.cabecera { padding-top: calc(132px + env(safe-area-inset-top, 0px)); padding-bottom: var(--e-48); }
.cabecera .migas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--e-32); }
.cabecera .migas a { color: var(--meta-osc); min-height: 32px; display: inline-flex; align-items: center; }
.cabecera .migas a:hover { color: var(--blanco); }
.cabecera h1 { font-size: clamp(3rem, 12vw, 7rem); line-height: .92; max-width: 12ch; }
.cabecera .bajada { margin-top: var(--e-20); }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
.filtros::-webkit-scrollbar { display: none; }
.filtros [role=tab] { flex: none; min-height: 46px; padding: 0 20px; border-radius: var(--r-pildora); border: 1px solid var(--linea-osc); background: transparent; color: var(--suave-osc); font-weight: 500; font-size: .95rem; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.filtros [role=tab]:hover { color: var(--blanco); border-color: var(--meta-osc); }
.filtros [role=tab][aria-selected=true] { background: var(--lima); border-color: var(--lima); color: var(--negro); }
.descat { margin-top: var(--e-20); min-height: 3.2em; color: var(--suave-osc); max-width: 60ch; }
.listado { display: grid; gap: var(--e-48) 24px; margin-top: var(--e-48); }
@media (min-width: 760px) { .listado { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .listado { grid-template-columns: repeat(3, 1fr); } }
.vacio { margin-top: var(--e-48); border: 1px dashed var(--linea-osc); border-radius: var(--r-tarjeta); padding: var(--e-48) 28px; display: grid; gap: 16px; justify-items: start; }
.vacio h2 { font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.02; max-width: 22ch; }
.vacio p { color: var(--suave-osc); max-width: 56ch; }
.leyenda { margin-top: var(--e-80); display: grid; gap: 14px; border-top: 1px solid var(--linea-osc); padding-top: var(--e-32); }
.leyenda p { display: flex; gap: 14px; align-items: baseline; color: var(--suave-osc); font-size: .95rem; }
.leyenda .proy .chapa, .leyenda .chapa { position: static; flex: none; }
.chapa-suelta { flex: none; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pildora); background: var(--grafito); color: var(--blanco); border: 1px solid var(--linea-osc); }
.chapa-suelta.propio { background: var(--lima); color: var(--negro); border-color: var(--lima); }

/* ---------- Detalle de proyecto ---------- */
.det-cab { display: grid; gap: var(--e-32); }
.det-cab .chapas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--e-20); }
.ficha { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea-osc); }
.ficha li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea-osc); font-size: .95rem; }
.ficha li span:first-child { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--meta-osc); padding-top: 3px; }
.ficha li span:last-child { text-align: right; }
.det-cab .acciones { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: var(--e-20); }
@media (min-width: 1000px) { .det-cab { grid-template-columns: 1.3fr 1fr; align-items: end; gap: var(--e-80); } }

.det-portada { margin-top: var(--e-48); }
.det-bloque { display: grid; gap: var(--e-20); padding-block: var(--e-80) 0; }
.det-bloque h2 { font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: .98; }
.det-bloque .texto { display: grid; gap: 16px; color: var(--suave-osc); max-width: 60ch; font-size: 1.05rem; }
.claro .det-bloque .texto { color: var(--suave-cla); }
@media (min-width: 1000px) { .det-bloque { grid-template-columns: 1fr 1.3fr; gap: var(--e-80); } }

.decisiones { display: grid; gap: 14px; margin-top: var(--e-48); }
@media (min-width: 900px) { .decisiones { grid-template-columns: repeat(3, 1fr); } }
.decision { border-radius: var(--r-tarjeta); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.decision.d-negro { background: var(--negro); color: var(--blanco); }
.decision.d-negro p { color: var(--suave-osc); }
.decision.d-borde { border: 1.5px solid var(--negro); }
.decision.d-borde p { color: var(--suave-cla); }
.decision.d-lima { background: var(--lima); color: var(--negro); }
.decision h3 { font-size: 1.6rem; line-height: 1.02; }
.decision .muestras { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.decision .muestras i { width: 40px; height: 40px; border-radius: var(--r-chico); border: 1px solid rgba(128,128,128,.35); }
.decision .especimen { margin-top: auto; padding-top: 12px; font-size: 2.6rem; line-height: 1; }

.pantallas { display: grid; gap: 24px; margin-top: var(--e-48); justify-items: center; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pantallas figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.pantallas figcaption { font-size: .9rem; color: var(--suave-osc); text-align: center; max-width: 30ch; }
@media (min-width: 900px) { .pantallas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pantalla-ancha { margin-top: var(--e-48); }

.resuelve { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.resuelve li { padding: 16px 0 16px 28px; border-top: 1px solid var(--linea-osc); position: relative; color: var(--suave-osc); }
.resuelve li::before { content: ""; position: absolute; left: 0; top: 25px; width: 8px; height: 8px; border-radius: 50%; background: var(--lima); }
.aviso-concepto { margin-top: var(--e-48); border-radius: var(--r-tarjeta); background: var(--grafito); padding: 22px 24px; color: var(--suave-osc); font-size: .95rem; display: flex; gap: 14px; align-items: flex-start; }
.aviso-concepto::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--lima); }

.siguiente { display: grid; gap: 10px; padding-block: var(--e-80); border-top: 1px solid var(--linea-osc); margin-top: var(--e-80); }
.siguiente a { font-family: var(--display); font-size: clamp(2.4rem, 9vw, 5rem); line-height: .95; display: inline-flex; align-items: center; gap: 16px; }
.siguiente a svg { width: .5em; height: .5em; transition: transform .35s; }
.siguiente a:hover svg { transform: translate(6px,-6px); }

/* Identidad illa.: variantes del logo y paleta */
.logos { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-top: var(--e-48); }
@media (min-width: 900px) { .logos { grid-template-columns: repeat(4, 1fr); } }
.logos figure { margin: 0; display: grid; gap: 10px; }
.logos .placa { aspect-ratio: 4 / 3; border-radius: var(--r-tarjeta); display: grid; place-items: center; }
.logos .placa svg { width: 58%; height: auto; }
.logos figcaption { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--meta-cla); }
.paleta { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-top: var(--e-48); }
@media (min-width: 900px) { .paleta { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.color { border-radius: var(--r-tarjeta); padding: 22px; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; }
.color h3 { font-size: 1.5rem; }
.color span { font-family: var(--mono); font-size: .74rem; }
.color.c-lima { background: var(--lima); color: var(--negro); grid-column: 1 / -1; }
@media (min-width: 900px) { .color.c-lima { grid-column: auto; } }
.color.c-negro { background: var(--negro); color: var(--blanco); }
.color.c-grafito { background: var(--grafito); color: var(--blanco); }
.color.c-hueso { background: var(--hueso); color: var(--negro); border: 1px solid var(--linea-cla); }
.voz { display: grid; gap: 12px; margin-top: var(--e-48); }
@media (min-width: 900px) { .voz { grid-template-columns: repeat(3, 1fr); } }
.voz blockquote { margin: 0; border-radius: var(--r-tarjeta); padding: 26px; min-height: 170px; font-family: var(--display); font-size: 1.6rem; line-height: 1.05; }