/* NóS Arquitectura e Urbanismo — hoja de estilos única.
   Paleta de la identidad corporativa (NOS_Identidad_Corporativa): oliva, tinta, blanco, gris.
   Esquema claro como la papelería: fondo blanco, texto tinta, acentos y pie en oliva.
   Tipografía: Azeret Mono (monoespaciada geométrica, OFL, en static/fonts/; la
   gratuita más parecida a Polar Mono) para todos los textos.
   Versión 2: mucho blanco, imágenes grandes sin cajas, urbanismo por delante
   (referencias ADEPT, KCAP, West 8 y Ecosistema Urbano). */
@font-face { font-family: "Azeret Mono"; src: url("/fonts/azeret-mono-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Azeret Mono"; src: url("/fonts/azeret-mono-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Azeret Mono"; src: url("/fonts/azeret-mono-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --oliva: #6B7F4D;
  --tinta: #1A1A1A;
  --blanco: #FFFFFF;
  --gris: #666666;
  --superficie: #F4F4F2;               /* blanco roto para bloques y huecos de imagen */
  --linea: rgba(26, 26, 26, 0.14);     /* tinta translúcida para separadores */
  /* Para pasar a Polar Mono (de pago, frostype.xyz): comprar licencia web, poner sus woff2
     en static/fonts/ con su @font-face y escribir "Polar Mono" delante aquí. */
  --maquina: "Azeret Mono", "Courier New", monospace;
  --fuente: var(--maquina);            /* todos los textos en Azeret Mono */
  --ancho: 1280px;
}
* { box-sizing: border-box; }
html { color-scheme: light; font-family: var(--fuente); color: var(--tinta); background: var(--blanco); line-height: 1.7; font-variant-ligatures: none; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tinta); text-decoration-color: var(--oliva); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--oliva); }
h1, h2, h3 { font-family: var(--maquina); color: var(--tinta); font-weight: 700; line-height: 1.2; letter-spacing: 0; }
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); margin: 2rem 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 0.6rem 0 0.2rem; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding-inline: 20px; }
.seccion { padding-block: clamp(3rem, 7vw, 5.5rem); }
.seccion__titulo { margin-top: 0; }
.prosa { max-width: 68ch; }
.prosa > :last-child { margin-bottom: 0; }
.prosa p { margin: 0 0 1rem; }
.prosa ul { padding-left: 1.2rem; }

/* Cabecera */
.cabecera { border-bottom: 1px solid var(--linea); background: var(--blanco); position: sticky; top: 0; z-index: 10; }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; flex-wrap: wrap; }
.cabecera__marca img { height: 64px; width: auto; }
.nav { display: flex; gap: 2rem; flex-wrap: wrap; font-family: var(--maquina); }
.nav a { text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem; color: var(--tinta); padding-block: 0.4rem; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a.activo { color: var(--tinta); border-bottom-color: var(--oliva); }

/* Portada a pantalla completa: o nome grande e a imaxe do estudo, que ocupan a primeira vista */
.intro { min-height: calc(100svh - 84px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 2rem clamp(2rem, 5vw, 5rem); padding-block: 4vh 12vh; border-bottom: 1px solid var(--tinta); }  /* máis aire abaixo ca arriba: o bloque queda algo por riba do centro, que é onde o ollo o percibe centrado */
.intro__nome { font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 1.5rem; }
.intro__claim { font-family: var(--maquina); text-transform: uppercase; letter-spacing: 0.14em; color: var(--oliva); font-size: clamp(0.95rem, 1.6vw, 1.2rem); margin: 0 0 2.5rem; }
.intro__baixar { font-family: var(--maquina); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem; text-decoration: none; border-bottom: 1px solid var(--oliva); padding-bottom: 0.2rem; }
.intro__imaxe { width: 100%; max-height: calc(100svh - 120px); object-fit: contain; mix-blend-mode: multiply; }
/* Páxinas con debuxo (Estudo, Contacto): texto á esquerda e debuxo á dereita, como na portada */
.pagina--imaxe { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: 2rem clamp(2rem, 5vw, 5rem); }
.pagina__imaxe { width: 100%; height: auto; mix-blend-mode: multiply; position: sticky; top: 7rem; }
.seccion__titulo { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 1rem; }

/* Filtros por disciplina e cambio Retícula | Mapa: texto, sen botóns */
.filtros { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.75rem 2rem; font-family: var(--maquina); padding-block: 0.9rem; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--linea); margin-bottom: 2.5rem; }
.filtros nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.filtros a { color: var(--gris); text-decoration: none; border-bottom: 1px solid transparent; }
.filtros a:hover { color: var(--tinta); }
.filtros a.activo { color: var(--tinta); border-bottom-color: var(--oliva); }
.filtros__vista span { color: var(--linea); }
.filtros__vista { gap: 0 0.6rem !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }
.migas__raiz { color: var(--gris); text-decoration: none; }
.migas__sep { color: var(--gris); font-weight: 400; }

/* Retícula: dúas columnas grandes, nome · actuación · lugar e anos */
.reticula { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 2.5rem 1.5rem; }  /* catro por fila no ancho máximo; tres, dúas ou unha ao estreitar */
.tarxeta a { text-decoration: none; color: inherit; display: block; }
.tarxeta img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--superficie); }
.tarxeta h3 { font-size: 0.95rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.03em; margin: 0.75rem 0 0.25rem; }
.tarxeta a:hover h3 { color: var(--oliva); }
.tarxeta__tipo { font-size: 0.85rem; line-height: 1.5; margin: 0; }
.tarxeta__meta { font-family: var(--maquina); color: var(--gris); font-size: 0.8rem; margin: 0.1rem 0 0; }

/* Unha frase sobre o estudo */
.frase { border-top: 1px solid var(--linea); }
.frase p { font-size: clamp(1.15rem, 2.2vw, 1.45rem); max-width: 40ch; line-height: 1.5; margin: 0 0 1.5rem; }
.frase .frase__enlaces { font-family: var(--maquina); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; }
.frase__enlaces a { text-decoration: none; }

/* Ficha de proxecto (KCAP): cabeza con datos, secuencia gráfica e texto. Compacta: todo, ata anterior/seguinte, nunha pantalla */
.seccion.proxecto { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.migas { font-family: var(--maquina); color: var(--gris); font-size: 0.85rem; margin: 0 0 0.5rem; }
.migas a { color: var(--gris); }
.migas a:hover { color: var(--oliva); }
.proxecto__cabeza { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem 3rem; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--tinta); margin-bottom: 1.25rem; }
.proxecto__cabeza h1 { font-size: clamp(1.4rem, 2.2vw, 1.6rem); line-height: 1.25; margin-bottom: 0.5rem; }
.proxecto__lugar { font-family: var(--maquina); font-size: 1rem; margin: 0 0 0.35rem; }
.proxecto__disciplinas { font-family: var(--maquina); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; color: var(--oliva); margin: 0; }
.proxecto__disciplinas a { color: var(--oliva); text-decoration: none; }
.proxecto__disciplinas a:hover { text-decoration: underline; }
.ficha { display: grid; gap: 0.6rem; margin: 0.25rem 0 0; font-family: var(--maquina); }
.ficha dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris); }
.ficha dd { margin: 0; font-size: 0.9rem; line-height: 1.55; }
.secuencia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--miniatura, 250px)), 1fr)); gap: 1.5rem; margin-bottom: 1.25rem; }  /* miniaturas do tamaño da retícula (máis pequenas se hai 5 ou máis, para que caiban nunha fila); cada unha abre a imaxe enteira */
.secuencia a { display: block; cursor: zoom-in; }
.secuencia img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }  /* enteira, sen recortar planos, sobre o branco da páxina */
.secuencia video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--superficie); }  /* no oco da portada e do mesmo ancho; vese grande coa pantalla completa dos controis */
.secuencia__credito { grid-column: 1 / -1; font-family: var(--maquina); color: var(--gris); font-size: 0.8rem; line-height: 1.3; margin: -1.1rem 0 0; }
.outros { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--maquina); font-size: 0.85rem; border-top: 1px solid var(--linea); margin-top: 1.25rem; padding-top: 0.75rem; }  /* pequeno e en oliva: que non se confunda coa descrición */
.outros a { text-decoration: none; max-width: 48%; color: var(--oliva); display: inline-flex; align-items: center; gap: 0.6rem; }
.outros a:hover { color: var(--tinta); }
.outros a:last-child { text-align: right; }
.outros__frecha { font-size: 2.2em; line-height: 1; }
.outros__nome { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* nunha liña; en móbil pode partir */

/* Mapa: contorno de Galicia e un punto oliva por lugar */
.mapa { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem 3rem; align-items: start; }
.mapa__svg { display: block; width: 100%; height: auto; max-height: 80vh; overflow: visible; }
.mapa__fixo { position: sticky; top: 100px; }  /* o mapa queda á vista mentres se percorren as listas */
/* Ao premer un lugar, a páxina baixa ata o título do grupo (PROXECTOS / CONCURSOS), xusto baixo a
   cabeceira: o lugar escollido é sempre a primeira sección visible, e esta marxe deixa á vista o título. */
.mapa__sitio { scroll-margin-top: 150px; }
/* "Mapa" e "Ver todos" levan a #mapa: o mapa queda na mesma posición que ao escoller un lugar.
   (#mapa é o propio .mapa, que non conta para .mapa:has(:target), así que non filtra nada.) */
.mapa { scroll-margin-top: 104px; }
.mapa__galicia { fill: var(--superficie); stroke: var(--tinta); stroke-width: 1; stroke-linejoin: round; }
.mapa__punto { fill: var(--oliva); }
.mapa__anel { fill: var(--blanco); stroke: var(--oliva); stroke-width: 2.5; }
.mapa a:hover .mapa__punto { fill: var(--tinta); }
.mapa a:hover .mapa__anel { stroke: var(--tinta); }
.mapa__nome { font-family: var(--maquina); font-size: 20px; fill: var(--tinta); paint-order: stroke; stroke: var(--superficie); stroke-width: 6px; stroke-linejoin: round; }  /* halo claro: a costa non corta os nomes */
.mapa a:hover .mapa__nome { fill: var(--oliva); }
.mapa__lenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-family: var(--maquina); font-size: 0.9rem; margin: 0 0 1rem; }
.mapa__lenda span { display: inline-flex; align-items: center; gap: 0.45rem; }
.mapa__lenda svg, .mapa__grupo h2 svg { width: 1.1em; height: 1.1em; flex: none; }
.mapa__lista { display: flex; flex-direction: column; gap: 2.5rem; }  /* gap e non marxe: se un grupo se oculta, non deixa oco */
.mapa__grupo h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.25rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--tinta); }
.mapa__grupo h2 span { margin-left: auto; font-weight: 400; color: var(--gris); letter-spacing: 0; }
.mapa__lista h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris); margin: 1rem 0 0.35rem; }
.mapa__lista ul { list-style: none; padding: 0; margin: 0; }
.mapa__lista li { position: relative; padding-left: 1.2rem; margin-bottom: 0.45rem; font-size: 0.88rem; line-height: 1.45; }
/* punto antes de cada traballo, como no mapa: recheo = proxecto, anel = concurso */
.mapa__lista li::before { content: ""; position: absolute; left: 0.1rem; top: 0.42em; width: 0.55em; height: 0.55em; border-radius: 50%; box-sizing: border-box; }
.mapa__grupo--p li::before { background: var(--oliva); }
.mapa__grupo--c li::before { border: 1.5px solid var(--oliva); background: var(--blanco); }
.mapa__lista span { font-family: var(--maquina); color: var(--gris); font-size: 0.78rem; }
.mapa__lista h3 a { color: inherit; text-decoration: none; }
.mapa__lista h3 a:hover { color: var(--oliva); }
.mapa__lista section:target h3 { color: var(--oliva); }
/* Lugar escollido (:target): no mapa, o resto de lugares quedan case transparentes; nas listas
   só se ve ese lugar. As regras de cada lugar xéranse en layouts/_default/mapa.html. */
.mapa__lugar { transition: opacity 0.2s; }
.mapa:has(:target) .mapa__lugar { opacity: 0.18; }
.mapa:has(:target) .mapa__sitio, .mapa:has(:target) .mapa__grupo { display: none; }
.mapa:has(:target) .mapa__grupo h2 span { display: none; }
.mapa__todos { display: none; }
.mapa:has(:target) .mapa__todos { display: inline; text-decoration: none; border-bottom: 1px solid var(--oliva); }

/* Pé en oliva, como o dorso da tarxeta */
.pie { background: var(--oliva); color: var(--blanco); margin-top: 3rem; padding-block: 2.5rem 1.5rem; font-size: 1.05rem; }
.pie a { color: var(--blanco); text-decoration-color: var(--blanco); }
.pie a:hover { color: var(--blanco); text-decoration-thickness: 2px; }
.pie__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }
.pie__marca { height: 56px; width: auto; margin-bottom: 0.75rem; }
.pie__titulo { font-family: var(--maquina); color: var(--blanco); font-size: 1rem; margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; }
.pie__titulo a { text-decoration: none; }
.pie p { margin: 0 0 0.4rem; }
.pie__claim { font-family: var(--maquina); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem; }
.pie__legal { font-family: var(--maquina); margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.5); font-size: 0.9rem; }

/* Aviso de cookies: franxa fixa abaixo; Aceptar e Rexeitar co mesmo peso */
.aviso-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--blanco); border-top: 1px solid var(--tinta); padding-block: 1rem; font-size: 0.95rem; }
.aviso-cookies[hidden] { display: none; }
.aviso-cookies__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
.aviso-cookies p { margin: 0; max-width: 70ch; }
.aviso-cookies__botons { display: flex; gap: 0.75rem; }
.aviso-cookies button, .boton-cookies { font: inherit; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; background: var(--blanco); color: var(--tinta); border: 1px solid var(--tinta); padding: 0.6rem 1.2rem; cursor: pointer; }
.aviso-cookies button:hover, .boton-cookies:hover { background: var(--oliva); border-color: var(--oliva); color: var(--blanco); }
.boton-cookies[hidden] { display: none; }

@media (max-width: 760px) {
  .proxecto__cabeza, .mapa, .intro { grid-template-columns: 1fr; }
  .mapa__fixo { position: static; }
  .mapa__sitio { scroll-margin-top: 205px; }  /* en móbil a cabeceira é máis alta */
  .mapa { scroll-margin-top: 161px; }
  .intro { min-height: 0; padding-block: 1.5rem 2.5rem; }
  .intro__imaxe { max-height: none; }
  .pagina--imaxe { grid-template-columns: 1fr; }
  .pagina__imaxe { order: -1; position: static; max-width: 480px; margin-inline: auto; }  /* en móbil, o debuxo enriba */
}
@media (max-width: 600px) {
  .mapa__nome { font-size: 23px; stroke-width: 7px; }
  .cabecera__fila { justify-content: center; }
  .nav { gap: 1.25rem; justify-content: center; }
  .reticula { gap: 2.5rem; }
  .outros__nome { white-space: normal; }
}