@layer reset, tokens, base, layout, components, pages, utilities;

/* ==========================================================================
   AFerrolterra · tokens.css
   Única fonte de cor, tipo, espazo, raio e sombra.
   ========================================================================== */

@layer tokens {
  /* --- Tipografía -------------------------------------------------------- */
  @font-face {
    font-family: "Ibarra Real Nova";
    src: url("../fonts/ibarra.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
      U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Ibarra Real Nova";
    src: url("../fonts/ibarra-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
      U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
      U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
      U+A720-A7FF;
  }

  @font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
      U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-ext.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
      U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
      U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
      U+A720-A7FF;
  }

  :root {
    --aft-font-display: "Ibarra Real Nova", "Iowan Old Style", Georgia, serif;
    --aft-font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system,
      "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* --- Cor ------------------------------------------------------------ */
    --aft-paper: #f7f2e7;
    --aft-paper-deep: #efe7d6;
    --aft-card: #fffdf7;

    --aft-ink: #0a1f26;
    --aft-ink-soft: #3d4e4f;
    --aft-muted: #5e6f6e;

    --aft-line: #ded5c2;
    --aft-line-strong: #c6bba5;

    --aft-sea: #14515c;
    --aft-sea-bright: #1d7280;
    --aft-sea-deep: #0e2a32;
    --aft-abyss: #08191f;

    --aft-moss: #356b4a;
    --aft-moss-soft: #e1ecdf;

    --aft-toxo: #d8a32e;
    --aft-toxo-soft: #f7e9c4;

    --aft-clay: #a65336;
    --aft-clay-soft: #f3e2d9;

    /* --- Escala tipográfica --------------------------------------------- */
    --aft-fs-xs: 0.75rem;
    --aft-fs-sm: 0.875rem;
    --aft-fs-base: 1rem;
    --aft-fs-md: 1.125rem;
    --aft-fs-lg: 1.3125rem;
    --aft-fs-xl: 1.5rem;
    --aft-fs-2xl: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
    --aft-fs-3xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
    --aft-fs-4xl: clamp(2.25rem, 1.5rem + 4.2vw, 4.25rem);

    /* --- Espazo --------------------------------------------------------- */
    --aft-s-1: 4px;
    --aft-s-2: 8px;
    --aft-s-3: 12px;
    --aft-s-4: 16px;
    --aft-s-5: 24px;
    --aft-s-6: 32px;
    --aft-s-7: 48px;
    --aft-s-8: 64px;
    --aft-s-9: 96px;

    /* --- Forma ---------------------------------------------------------- */
    --aft-r-1: 4px;
    --aft-r-2: 8px;
    --aft-r-3: 14px;
    --aft-r-4: 22px;
    --aft-r-pill: 999px;

    /* --- Sombra --------------------------------------------------------- */
    --aft-shadow-1: 0 1px 2px rgba(10, 31, 38, 0.05),
      0 8px 24px -16px rgba(10, 31, 38, 0.28);
    --aft-shadow-2: 0 2px 4px rgba(10, 31, 38, 0.06),
      0 22px 48px -24px rgba(10, 31, 38, 0.35);

    /* --- Movemento ------------------------------------------------------ */
    --aft-fast: 160ms;
    --aft-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* --- Estructura ----------------------------------------------------- */
    --aft-shell: 1240px;
    --aft-gutter: clamp(18px, 4vw, 40px);
    --aft-measure: 68ch;
    --aft-header: 68px;

    --aft-z-tabs: 40;
    --aft-z-header: 50;
  }

  @media (max-width: 560px) {
    :root {
      --aft-header: 60px;
    }
  }
}

/* ==========================================================================
   AFerrolterra · base.css
   Tipografía, elementos nativos e accesibilidade.
   ========================================================================== */

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--aft-header) + 24px);
    background: var(--aft-paper);
  }

  body {
    margin: 0;
    background: var(--aft-paper);
    color: var(--aft-ink);
    font-family: var(--aft-font-sans);
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 400;
    font-variation-settings: "wdth" 100;
    text-rendering: optimizeLegibility;
  }

  body.is-locked {
    overflow: hidden;
  }

  /* --- Escala tipográfica ------------------------------------------------ */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
    line-height: 1.1;
    text-wrap: balance;
    color: var(--aft-ink);
  }

  h1,
  h2 {
    font-family: var(--aft-font-display);
    letter-spacing: -0.022em;
    font-variation-settings: "opsz" 72;
  }

  h1 {
    font-size: var(--aft-fs-4xl);
    line-height: 1.02;
    letter-spacing: -0.03em;
  }

  h2 {
    font-size: var(--aft-fs-3xl);
    line-height: 1.06;
  }

  h3 {
    font-size: var(--aft-fs-md);
    letter-spacing: -0.012em;
    line-height: 1.28;
  }

  h4 {
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
  }

  p {
    text-wrap: pretty;
  }

  p + p {
    margin-top: 0.9em;
  }

  strong,
  b {
    font-weight: 650;
  }

  small {
    font-size: var(--aft-fs-sm);
  }

  /* --- Ligazóns --------------------------------------------------------- */
  a {
    color: var(--aft-sea);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--aft-sea) 30%, transparent);
    text-underline-offset: 0.22em;
    transition: color var(--aft-fast) var(--aft-ease),
      text-decoration-color var(--aft-fast) var(--aft-ease);
  }

  a:hover {
    color: var(--aft-sea-bright);
    text-decoration-color: var(--aft-toxo);
  }

  /* --- Foco e selección ------------------------------------------------- */
  :focus-visible {
    outline: 3px solid var(--aft-toxo);
    outline-offset: 3px;
    border-radius: 3px;
  }

  ::selection {
    background: var(--aft-toxo);
    color: var(--aft-abyss);
  }

  /* --- Controis nativos ------------------------------------------------- */
  ::placeholder {
    color: var(--aft-muted);
    opacity: 1;
  }

  input,
  select,
  textarea {
    caret-color: var(--aft-sea);
  }

  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  /* --- Medios ----------------------------------------------------------- */
  img {
    height: auto;
    max-width: 100%;
  }

  img[width][height] {
    aspect-ratio: attr(width) / attr(height);
  }

  figure {
    margin: 0;
  }

  figcaption {
    margin-top: 0.55rem;
    font-size: var(--aft-fs-sm);
    color: var(--aft-muted);
  }

  hr {
    border: 0;
    border-top: 1px solid var(--aft-line);
    margin: var(--aft-s-6) 0;
  }

  /* --- Código e datos --------------------------------------------------- */
  code,
  kbd,
  samp {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--aft-paper-deep);
    padding: 0.12em 0.36em;
    border-radius: var(--aft-r-1);
  }

  abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
  }

  /* --- Texto xeral ------------------------------------------------------ */
  .prose {
    max-width: var(--aft-measure);
  }

  .prose > * + * {
    margin-top: 1.05em;
  }

  .prose h2 {
    font-size: var(--aft-fs-2xl);
    margin-top: 1.9em;
    scroll-margin-top: calc(var(--aft-header) + 24px);
  }

  .prose h3 {
    font-size: var(--aft-fs-md);
    font-family: var(--aft-font-sans);
    font-weight: 650;
    margin-top: 1.7em;
  }

  .prose ul,
  .prose ol {
    padding-left: 1.25em;
    list-style: none;
  }

  .prose ul li,
  .prose ol li {
    position: relative;
    padding-left: 0.9em;
    margin-top: 0.4em;
  }

  .prose ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 5px;
    height: 5px;
    background: var(--aft-toxo);
    border-radius: 50%;
  }

  .prose ol {
    counter-reset: li;
  }

  .prose ol li::before {
    counter-increment: li;
    content: counter(li);
    position: absolute;
    left: 0;
    top: 0.05em;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--aft-sea);
  }

  .prose blockquote {
    margin: 1.6em 0;
    padding-left: 1.2em;
    border-left: 2px solid var(--aft-toxo);
    font-family: var(--aft-font-display);
    font-size: var(--aft-fs-lg);
    line-height: 1.45;
    color: var(--aft-ink-soft);
  }

  .prose table {
    width: 100%;
    font-size: 0.9375rem;
  }

  .prose th,
  .prose td {
    text-align: left;
    padding: 0.7em 0.9em;
    border-bottom: 1px solid var(--aft-line);
    vertical-align: top;
  }

  .prose th {
    font-size: var(--aft-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--aft-muted);
    font-weight: 650;
  }

  /* --- Utilidades ------------------------------------------------------- */
  .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 100;
    transform: translateY(-160%);
    background: var(--aft-card);
    color: var(--aft-ink);
    padding: 12px 18px;
    border-radius: var(--aft-r-2);
    border: 1px solid var(--aft-line);
    box-shadow: var(--aft-shadow-2);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--aft-fast) var(--aft-ease);
  }

  .skip-link:focus-visible {
    transform: none;
  }

  .icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .icon--sm {
    width: 1em;
    height: 1em;
  }

  .icon--lg {
    width: 1.6em;
    height: 1.6em;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  @media print {
    .site-header,
    .site-footer,
    .bottom-tabs,
    .search-dialog,
    .no-print {
      display: none !important;
    }
    body {
      background: #fff;
      color: #000;
    }
    a {
      color: #000;
      text-decoration: underline;
    }
    a[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 0.8em;
      word-break: break-all;
    }
  }
}

/* ==========================================================================
   AFerrolterra · layout.css
   Contedor, cabeceira, navegación, pé e estruturas de páxina.
   ========================================================================== */

@layer layout {
  /* --- Contedor --------------------------------------------------------- */
  .shell {
    width: min(var(--aft-shell), calc(100% - var(--aft-gutter) * 2));
    margin-inline: auto;
  }

  .shell--narrow {
    width: min(860px, calc(100% - var(--aft-gutter) * 2));
    margin-inline: auto;
  }

  .page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .page > main {
    flex: 1 0 auto;
  }

  main:focus {
    outline: none;
  }

  /* ======================================================================
     Cabeceira
     ====================================================================== */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--aft-z-header);
    background: color-mix(in srgb, var(--aft-paper) 92%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid color-mix(in srgb, var(--aft-ink) 10%, transparent);
  }

  .header-bar {
    display: flex;
    align-items: center;
    gap: var(--aft-s-5);
    min-height: var(--aft-header);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--aft-ink);
    flex: none;
  }

  .brand:hover {
    color: var(--aft-ink);
  }

  .brand__mark {
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--aft-sea);
  }

  .brand__mark .mark-dot {
    fill: var(--aft-toxo);
    stroke: none;
  }

  .brand__type {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }

  .brand__name {
    font-family: var(--aft-font-display);
    font-weight: 700;
    font-size: 1.42rem;
    letter-spacing: -0.02em;
  }

  .brand__sub {
    margin-top: 4px;
    font-size: 0.5625rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--aft-muted);
  }

  .primary-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: var(--aft-s-4);
  }

  .primary-nav a {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--aft-r-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--aft-ink-soft);
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: background var(--aft-fast) var(--aft-ease),
      color var(--aft-fast) var(--aft-ease);
  }

  .primary-nav a:hover {
    background: color-mix(in srgb, var(--aft-sea) 8%, transparent);
    color: var(--aft-sea);
  }

  .primary-nav a[aria-current="page"] {
    color: var(--aft-ink);
    background: color-mix(in srgb, var(--aft-toxo) 22%, transparent);
  }

  .header-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }

  .tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: var(--aft-r-2);
    color: var(--aft-ink-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--aft-fast) var(--aft-ease),
      color var(--aft-fast) var(--aft-ease);
  }

  .tool:hover {
    background: color-mix(in srgb, var(--aft-sea) 8%, transparent);
    color: var(--aft-sea);
  }

  .tool kbd {
    display: none;
    font-family: inherit;
    font-size: 0.6875rem;
    background: transparent;
    border: 1px solid var(--aft-line);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--aft-muted);
  }

  @media (min-width: 1080px) {
    .tool kbd {
      display: block;
    }
  }

  .tool--saved .icon {
    width: 1.15em;
    height: 1.15em;
  }

  /* Selector de idioma */
  .lang-switch {
    position: relative;
  }

  .lang-switch > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--aft-r-2);
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--aft-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .lang-switch > summary::-webkit-details-marker {
    display: none;
  }

  .lang-switch > summary:hover {
    background: color-mix(in srgb, var(--aft-sea) 8%, transparent);
  }

  .lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    background: var(--aft-card);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-3);
    box-shadow: var(--aft-shadow-2);
    padding: 6px;
    z-index: 10;
  }

  .lang-menu a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border-radius: var(--aft-r-1);
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--aft-ink);
  }

  .lang-menu a:hover {
    background: var(--aft-paper-deep);
  }

  .lang-menu a[aria-current="true"] {
    color: var(--aft-sea);
    font-weight: 650;
  }

  /* Menú móbil */
  .menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: var(--aft-r-2);
    color: var(--aft-ink);
    align-items: center;
    justify-content: center;
  }

  .menu-toggle:hover {
    background: color-mix(in srgb, var(--aft-sea) 8%, transparent);
  }

  .mobile-panel,
  .mobile-panel[hidden] {
    display: none;
  }

  @media (max-width: 1180px) {
    .primary-nav {
      display: none;
    }
    .menu-toggle {
      display: inline-flex;
    }
    .tool--saved {
      display: none;
    }
  }

  @media (max-width: 560px) {
    .brand__sub {
      display: none;
    }
    .tool__label {
      display: none;
    }
    .tool {
      padding: 0;
    }
  }

  @media (max-width: 400px) {
    .header-tools {
      gap: 0;
    }
    .header-tools .tool[data-search-open] {
      display: none;
    }
    .brand {
      gap: 8px;
    }
    .brand__name {
      font-size: 1.22rem;
    }
    .lang-switch > summary {
      padding: 0 6px;
    }
  }

  /* Panel de navegación móbil */
  @media (max-width: 1180px) {
  .mobile-panel {
    position: fixed;
    inset: var(--aft-header) 0 0;
    z-index: calc(var(--aft-z-header) - 1);
    background: var(--aft-paper);
    padding: var(--aft-s-5) var(--aft-gutter) var(--aft-s-8);
    overflow-y: auto;
    display: block;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--aft-fast) var(--aft-ease),
      transform var(--aft-fast) var(--aft-ease);
  }

  .mobile-panel[data-open="true"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .mobile-panel__nav {
    display: grid;
    gap: 2px;
    margin-bottom: var(--aft-s-5);
  }

  .mobile-panel__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    font-family: var(--aft-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--aft-ink);
    border-bottom: 1px solid var(--aft-line);
  }

  .mobile-panel__nav a[aria-current="page"] {
    color: var(--aft-sea);
  }

  .mobile-panel__nav a .icon {
    color: var(--aft-muted);
  }

  .mobile-panel__extra {
    display: grid;
    gap: 10px;
    font-size: 0.9375rem;
  }

  .mobile-panel__extra a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--aft-ink-soft);
    padding: 8px 0;
  }

  .mobile-panel__langs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    border-top: 1px solid var(--aft-line);
    margin-top: var(--aft-s-4);
    padding-top: var(--aft-s-4);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-panel__langs a {
    padding: 0;
    color: var(--aft-muted);
  }
  }

  /* ======================================================================
     Pé de páxina
     ====================================================================== */
  .site-footer {
    margin-top: var(--aft-s-9);
    background: var(--aft-abyss);
    color: #cfe0dd;
    position: relative;
  }

  .site-footer a {
    color: #cfe0dd;
    text-decoration-color: rgba(207, 224, 221, 0.3);
  }

  .site-footer a:hover {
    color: #fff;
    text-decoration-color: var(--aft-toxo);
  }

  .footer-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--aft-s-6);
    padding: var(--aft-s-8) 0 var(--aft-s-7);
  }

  .footer-brand .brand {
    color: #fff;
  }

  .footer-brand .brand__sub {
    color: rgba(207, 224, 221, 0.62);
  }

  .footer-brand .brand__mark {
    color: #9fc7c2;
  }

  .footer-brand p {
    margin-top: var(--aft-s-4);
    max-width: 34ch;
    font-size: 0.875rem;
    line-height: 1.65;
    color: rgba(207, 224, 221, 0.78);
  }

  .footer-col h2 {
    font-family: var(--aft-font-sans);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(207, 224, 221, 0.55);
    margin-bottom: var(--aft-s-4);
  }

  .footer-col ul {
    display: grid;
    gap: 9px;
    font-size: 0.875rem;
  }

  .footer-col a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .footer-bottom {
    border-top: 1px solid rgba(207, 224, 221, 0.14);
    padding: var(--aft-s-5) 0 var(--aft-s-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--aft-s-4);
    font-size: 0.75rem;
    color: rgba(207, 224, 221, 0.6);
  }

  .footer-bottom p {
    margin: 0;
  }

  .install-app {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(207, 224, 221, 0.28);
    border-radius: var(--aft-r-2);
    padding: 8px 13px;
    font-size: 0.75rem;
    font-weight: 650;
    color: #eaf4f1;
    text-decoration: none;
    background: transparent;
  }

  .install-app:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
  }

  @media (max-width: 900px) {
    .footer-main {
      grid-template-columns: 1fr 1fr;
      gap: var(--aft-s-5);
    }
    .footer-brand {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 560px) {
    .footer-main {
      grid-template-columns: 1fr;
      padding: var(--aft-s-7) 0 var(--aft-s-5);
    }
    .site-footer {
      margin-top: var(--aft-s-7);
    }
  }

  /* ======================================================================
     Barra inferior móbil
     ====================================================================== */
  .bottom-tabs {
    display: none;
  }

  @media (max-width: 760px) {
    .bottom-tabs {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: var(--aft-z-tabs);
      background: color-mix(in srgb, var(--aft-card) 96%, transparent);
      backdrop-filter: blur(16px);
      border-top: 1px solid var(--aft-line);
      padding-bottom: env(safe-area-inset-bottom);
    }

    .bottom-tabs a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-height: 58px;
      padding: 6px 2px;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-decoration: none;
      color: var(--aft-muted);
    }

    .bottom-tabs a .icon {
      width: 21px;
      height: 21px;
    }

    .bottom-tabs a[aria-current="page"],
    .bottom-tabs a.is-active {
      color: var(--aft-sea);
    }

    .bottom-tabs a[aria-current="page"] .icon,
    .bottom-tabs a.is-active .icon {
      stroke-width: 2;
    }

    .page > main {
      padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .site-footer {
      padding-bottom: 12px;
    }
  }

  /* ======================================================================
     Estruturas de páxina
     ====================================================================== */
  .page-head {
    padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
    border-bottom: 1px solid var(--aft-line);
  }

  .page-head--sea {
    background: var(--aft-sea-deep);
    color: #eaf4f1;
    border-bottom: 0;
  }

  .page-head--sea h1,
  .page-head--sea .page-head__lead {
    color: #fff;
  }

  .page-head--sea .page-head__lead {
    color: rgba(234, 244, 241, 0.82);
  }

  .page-head--sea .breadcrumb a {
    color: rgba(234, 244, 241, 0.72);
  }

  .page-head--sea .breadcrumb [aria-current="page"] {
    color: #fff;
  }

  .page-head__inner {
    display: grid;
    gap: var(--aft-s-4);
    max-width: 900px;
  }

  .page-head h1 {
    max-width: 20ch;
  }

  .page-head__lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--aft-ink-soft);
    max-width: 62ch;
  }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--aft-fs-sm);
    color: var(--aft-muted);
  }

  .breadcrumb a {
    color: var(--aft-muted);
    text-decoration: none;
  }

  .breadcrumb a:hover {
    color: var(--aft-sea);
    text-decoration: underline;
  }

  .breadcrumb .icon {
    width: 0.85em;
    height: 0.85em;
    opacity: 0.6;
  }

  .breadcrumb [aria-current="page"] {
    color: var(--aft-ink-soft);
    font-weight: 600;
  }

  .section {
    padding: clamp(36px, 6vw, 72px) 0;
  }

  .section--tight {
    padding-top: var(--aft-s-6);
  }

  .section--paper {
    background: var(--aft-paper-deep);
  }

  .section--sea {
    background: var(--aft-sea-deep);
    color: #eaf4f1;
  }

  .section--sea h2 {
    color: #fff;
  }

  .section--sea p {
    color: rgba(234, 244, 241, 0.82);
  }

  .section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--aft-s-5);
    margin-bottom: var(--aft-s-5);
  }

  .section-head h2 {
    max-width: 24ch;
  }

  .section-head p {
    max-width: 46ch;
    color: var(--aft-ink-soft);
    font-size: 0.9375rem;
  }

  .section-head__link {
    font-size: 0.875rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--aft-sea);
  }

  .section-head__link .icon {
    transition: transform var(--aft-fast) var(--aft-ease);
  }

  .section-head__link:hover .icon {
    transform: translateX(3px);
  }

  @media (max-width: 760px) {
    .section-head {
      display: grid;
      gap: var(--aft-s-3);
      align-items: start;
    }
    .section-head p {
      max-width: 100%;
    }
  }

  /* Grellas */
  .grid {
    display: grid;
    gap: var(--aft-s-4);
  }

  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid--mosaic {
    grid-template-columns: repeat(12, 1fr);
  }

  @media (max-width: 1000px) {
    .grid--3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 620px) {
    .grid--2,
    .grid--3,
    .grid--4 {
      grid-template-columns: 1fr;
    }
  }

  /* Dúas columnas editoriais */
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }

  .split > * {
    min-width: 0;
  }

  .split__aside {
    position: sticky;
    top: calc(var(--aft-header) + 24px);
    display: grid;
    gap: var(--aft-s-4);
  }

  @media (max-width: 980px) {
    .split {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--aft-s-6);
    }
    .split__aside {
      position: static;
    }
  }

  /* Ficha: contido + datos */
  .fact-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--aft-line);
  }

  .fact-list > div {
    display: flex;
    justify-content: space-between;
    gap: var(--aft-s-4);
    padding: 10px 0;
    border-bottom: 1px solid var(--aft-line);
    font-size: 0.875rem;
  }

  .fact-list dt {
    color: var(--aft-muted);
  }

  .fact-list dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
  }
}

/* ==========================================================================
   AFerrolterra · components.css
   Botóns, etiquetas, tarxetas, listas de datos, busca, axenda e formularios.
   ========================================================================== */

@layer components {
  /* --- Botóns ----------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: var(--aft-r-2);
    background: var(--aft-sea);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    text-decoration: none;
    border: 1px solid var(--aft-sea);
    transition: background var(--aft-fast) var(--aft-ease),
      border-color var(--aft-fast) var(--aft-ease),
      transform var(--aft-fast) var(--aft-ease);
  }

  .btn:hover {
    background: var(--aft-sea-bright);
    border-color: var(--aft-sea-bright);
    color: #fff;
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn .icon {
    width: 1.05em;
    height: 1.05em;
    transition: transform var(--aft-fast) var(--aft-ease);
  }

  .btn:hover .icon {
    transform: translateX(2px);
  }

  .btn--accent {
    background: var(--aft-toxo);
    border-color: var(--aft-toxo);
    color: var(--aft-abyss);
  }

  .btn--accent:hover {
    background: #e6b445;
    border-color: #e6b445;
    color: var(--aft-abyss);
  }

  .btn--ghost {
    background: transparent;
    border-color: var(--aft-line-strong);
    color: var(--aft-ink);
  }

  .btn--ghost:hover {
    background: var(--aft-card);
    border-color: var(--aft-sea);
    color: var(--aft-sea);
  }

  .btn--sm {
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.8125rem;
  }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 650;
    font-size: 0.9375rem;
    text-decoration: none;
    color: var(--aft-sea);
  }

  .link-arrow .icon {
    transition: transform var(--aft-fast) var(--aft-ease);
  }

  .link-arrow:hover .icon {
    transform: translateX(3px);
  }

  /* --- Etiquetas e meta ------------------------------------------------- */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--aft-r-1);
    background: var(--aft-paper-deep);
    color: var(--aft-ink-soft);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }

  .tag--sea {
    background: color-mix(in srgb, var(--aft-sea) 12%, transparent);
    color: var(--aft-sea);
  }

  .tag--moss {
    background: var(--aft-moss-soft);
    color: #2c5c3f;
  }

  .tag--toxo {
    background: var(--aft-toxo-soft);
    color: #7a5a0e;
  }

  .tag--clay {
    background: var(--aft-clay-soft);
    color: #8a4227;
  }

  .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--aft-muted);
  }

  .meta__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
  }

  /* --- Tarxetas --------------------------------------------------------- */
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--aft-s-3);
    padding: var(--aft-s-5);
    background: var(--aft-card);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-3);
    box-shadow: var(--aft-shadow-1);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--aft-fast) var(--aft-ease),
      box-shadow var(--aft-fast) var(--aft-ease),
      transform var(--aft-fast) var(--aft-ease);
  }

  a.card:hover {
    border-color: color-mix(in srgb, var(--aft-sea) 45%, var(--aft-line));
    box-shadow: var(--aft-shadow-2);
    transform: translateY(-2px);
    color: inherit;
  }

  .card h3 {
    font-family: var(--aft-font-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.18;
  }

  .card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--aft-ink-soft);
  }

  .card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aft-s-3);
    margin-top: auto;
    padding-top: var(--aft-s-2);
    font-size: 0.8125rem;
    color: var(--aft-muted);
  }

  .card__arrow {
    color: var(--aft-sea);
    display: inline-flex;
    transition: transform var(--aft-fast) var(--aft-ease);
  }

  a.card:hover .card__arrow {
    transform: translate(2px, -2px);
  }

  /* Ficha de lugar / recurso */
  .place-card {
    position: relative;
    display: grid;
    gap: var(--aft-s-3);
    padding: var(--aft-s-5);
    background: var(--aft-card);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-3);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color var(--aft-fast) var(--aft-ease),
      box-shadow var(--aft-fast) var(--aft-ease),
      transform var(--aft-fast) var(--aft-ease);
  }

  .place-card:hover {
    border-color: color-mix(in srgb, var(--aft-sea) 45%, var(--aft-line));
    box-shadow: var(--aft-shadow-2);
    transform: translateY(-2px);
    color: inherit;
  }

  .place-card h3 {
    font-family: var(--aft-font-display);
    font-size: 1.4rem;
    line-height: 1.15;
    letter-spacing: -0.018em;
  }

  .place-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--aft-ink-soft);
  }

  .place-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--aft-muted);
    margin-top: auto;
    padding-top: var(--aft-s-2);
  }

  .place-card__meta .icon {
    width: 0.95em;
    height: 0.95em;
    color: var(--aft-sea);
  }

  /* Ficha destacada (mosaico) */
  .feature {
    grid-column: span 7;
    display: grid;
    align-content: space-between;
    gap: var(--aft-s-4);
    min-height: 320px;
    padding: var(--aft-s-6);
    background: var(--aft-sea-deep);
    color: #eaf4f1;
    border-radius: var(--aft-r-4);
    text-decoration: none;
    position: relative;
    overflow: hidden;
  }

  .feature:hover {
    color: #fff;
  }

  .feature h3 {
    font-family: var(--aft-font-display);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.05;
    max-width: 18ch;
  }

  .feature p {
    color: rgba(234, 244, 241, 0.8);
    max-width: 42ch;
    font-size: 0.9375rem;
  }

  .feature .feature__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: rgba(234, 244, 241, 0.7);
  }

  .feature .feature__arrow {
    position: absolute;
    right: var(--aft-s-5);
    bottom: var(--aft-s-5);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(234, 244, 241, 0.3);
    color: #fff;
    transition: background var(--aft-fast) var(--aft-ease),
      transform var(--aft-fast) var(--aft-ease);
  }

  .feature:hover .feature__arrow {
    background: var(--aft-toxo);
    border-color: var(--aft-toxo);
    color: var(--aft-abyss);
    transform: rotate(-45deg);
  }

  .feature--paper {
    background: var(--aft-card);
    color: var(--aft-ink);
    border: 1px solid var(--aft-line);
  }

  .feature--paper h3 {
    color: var(--aft-ink);
  }

  .feature--paper p {
    color: var(--aft-ink-soft);
  }

  .feature--paper .feature__meta {
    color: var(--aft-muted);
  }

  .feature--paper .feature__arrow {
    border-color: var(--aft-line-strong);
    color: var(--aft-sea);
  }

  .feature--moss {
    background: #2c5c3f;
  }

  .feature--clay {
    background: #7d3d26;
  }

  .grid--mosaic > .place-card,
  .grid--mosaic > .card {
    grid-column: span 5;
  }

  @media (max-width: 900px) {
    .grid--mosaic {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .feature,
    .grid--mosaic > .place-card,
    .grid--mosaic > .card {
      grid-column: span 1;
    }
    .feature {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 620px) {
    .grid--mosaic {
      grid-template-columns: 1fr;
    }
    .feature {
      min-height: 260px;
      padding: var(--aft-s-5);
    }
  }

  /* --- Listas de datos -------------------------------------------------- */
  .rowlist {
    border-top: 1px solid var(--aft-line);
  }

  .rowlist__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--aft-s-4);
    padding: var(--aft-s-4) 0;
    border-bottom: 1px solid var(--aft-line);
    text-decoration: none;
    color: inherit;
    transition: background var(--aft-fast) var(--aft-ease),
      padding var(--aft-fast) var(--aft-ease);
  }

  .rowlist__item:hover {
    color: inherit;
    background: color-mix(in srgb, var(--aft-sea) 4%, transparent);
  }

  .rowlist__body {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .rowlist__title {
    font-family: var(--aft-font-display);
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.012em;
  }

  .rowlist__meta {
    font-size: 0.8125rem;
    color: var(--aft-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .rowlist__desc {
    font-size: 0.875rem;
    color: var(--aft-ink-soft);
    line-height: 1.55;
    max-width: 70ch;
  }

  .rowlist__end {
    display: flex;
    align-items: center;
    gap: var(--aft-s-3);
    color: var(--aft-muted);
    font-size: 0.8125rem;
  }

  .rowlist__end .icon {
    color: var(--aft-sea);
    transition: transform var(--aft-fast) var(--aft-ease);
  }

  .rowlist__item:hover .rowlist__end .icon {
    transform: translateX(3px);
  }

  @media (max-width: 620px) {
    .rowlist__item {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .rowlist__end {
      justify-content: flex-start;
    }
    .rowlist__end .rowlist__count {
      display: none;
    }
  }

  /* --- Barra de filtros ------------------------------------------------- */
  .filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aft-s-2);
    padding: var(--aft-s-3) 0 var(--aft-s-4);
    border-bottom: 1px solid var(--aft-line);
    margin-bottom: var(--aft-s-5);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--aft-line-strong);
    border-radius: var(--aft-r-pill);
    background: transparent;
    color: var(--aft-ink-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--aft-fast) var(--aft-ease),
      color var(--aft-fast) var(--aft-ease),
      border-color var(--aft-fast) var(--aft-ease);
  }

  .chip:hover {
    border-color: var(--aft-sea);
    color: var(--aft-sea);
  }

  .chip[aria-pressed="true"],
  .chip.is-active {
    background: var(--aft-ink);
    border-color: var(--aft-ink);
    color: var(--aft-paper);
  }

  .chip__count {
    font-size: 0.6875rem;
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
  }

  .filterbar__spacer {
    flex: 1;
  }

  .filterbar__search {
    position: relative;
    min-width: 240px;
  }

  .filterbar__search .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--aft-muted);
    width: 1em;
    height: 1em;
    pointer-events: none;
  }

  .field {
    width: 100%;
    min-height: 42px;
    padding: 9px 13px;
    background: var(--aft-card);
    border: 1px solid var(--aft-line-strong);
    border-radius: var(--aft-r-2);
    color: var(--aft-ink);
    font-size: 0.9rem;
  }

  .filterbar__search .field {
    padding-left: 36px;
  }

  .field:focus-visible {
    border-color: var(--aft-sea);
    outline: 3px solid var(--aft-toxo);
    outline-offset: 1px;
  }

  .filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--aft-s-3);
    padding: var(--aft-s-4);
    background: var(--aft-card);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-3);
    margin-bottom: var(--aft-s-5);
  }

  .filters label {
    display: grid;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--aft-muted);
  }

  .filters select {
    width: 100%;
    min-height: 42px;
    padding: 8px 32px 8px 12px;
    background: var(--aft-card)
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235e6f6e' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E")
      no-repeat right 12px center;
    border: 1px solid var(--aft-line-strong);
    border-radius: var(--aft-r-2);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--aft-ink);
    appearance: none;
  }

  .filters__reset {
    align-self: end;
  }

  .result-count {
    font-size: 0.8125rem;
    color: var(--aft-muted);
    margin-bottom: var(--aft-s-4);
    font-variant-numeric: tabular-nums;
  }

  /* --- Axenda ----------------------------------------------------------- */
  .agenda-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--aft-line);
  }

  .agenda-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: var(--aft-s-5);
    padding: var(--aft-s-5) 0;
    border-bottom: 1px solid var(--aft-line);
    align-items: start;
  }

  .agenda-date {
    display: grid;
    justify-items: center;
    gap: 0;
    padding: 10px 6px 9px;
    background: var(--aft-card);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-2);
    text-align: center;
  }

  .agenda-date__day {
    font-family: var(--aft-font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--aft-ink);
    font-variant-numeric: tabular-nums;
  }

  .agenda-date__month {
    margin-top: 4px;
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aft-sea);
  }

  .agenda-date__year {
    font-size: 0.625rem;
    color: var(--aft-muted);
    font-variant-numeric: tabular-nums;
  }

  .agenda-body {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .agenda-body h3 {
    font-family: var(--aft-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }

  .agenda-body h3 a {
    text-decoration: none;
    color: inherit;
  }

  .agenda-body h3 a:hover {
    text-decoration: underline;
    text-decoration-color: var(--aft-toxo);
  }

  .agenda-body p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--aft-ink-soft);
    max-width: 65ch;
  }

  .agenda-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .agenda-tags .tag {
    max-width: 100%;
    height: auto;
    white-space: normal;
    text-align: left;
    line-height: 1.4;
    padding-block: 4px;
  }

  .agenda-actions {
    display: flex;
    align-items: center;
    gap: var(--aft-s-2);
    padding-top: 4px;
  }

  .agenda-actions .btn {
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.8125rem;
  }

  @media (max-width: 700px) {
    .agenda-item {
      grid-template-columns: 64px minmax(0, 1fr);
      gap: var(--aft-s-4);
    }
    .agenda-date__day {
      font-size: 1.4rem;
    }
    .agenda-actions {
      grid-column: 1 / -1;
    }
  }

  /* --- Avisos ----------------------------------------------------------- */
  .note {
    display: flex;
    gap: var(--aft-s-3);
    padding: var(--aft-s-4) var(--aft-s-5);
    background: var(--aft-paper-deep);
    border-radius: var(--aft-r-2);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--aft-ink-soft);
  }

  .note .icon {
    color: var(--aft-sea);
    margin-top: 2px;
  }

  .note strong {
    color: var(--aft-ink);
  }

  .note--toxo {
    background: var(--aft-toxo-soft);
  }

  .note--toxo .icon {
    color: #8a6408;
  }

  .note--clay {
    background: var(--aft-clay-soft);
  }

  .note--clay .icon {
    color: var(--aft-clay);
  }

  /* --- Estado baleiro --------------------------------------------------- */
  .empty {
    display: grid;
    justify-items: start;
    gap: var(--aft-s-3);
    padding: clamp(28px, 5vw, 48px);
    border: 1px dashed var(--aft-line-strong);
    border-radius: var(--aft-r-3);
    background: color-mix(in srgb, var(--aft-card) 60%, transparent);
    max-width: 720px;
  }

  .empty .icon {
    width: 28px;
    height: 28px;
    color: var(--aft-sea);
  }

  .empty h2,
  .empty h3 {
    font-family: var(--aft-font-display);
    font-size: var(--aft-fs-xl);
  }

  .empty p {
    color: var(--aft-ink-soft);
    font-size: 0.9375rem;
    max-width: 55ch;
  }

  /* --- Busca: disparador e diálogo -------------------------------------- */
  .search-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    background: var(--aft-card);
    border: 1px solid var(--aft-line-strong);
    border-radius: var(--aft-r-2);
    color: var(--aft-muted);
    font-size: 0.9375rem;
    text-align: left;
    transition: border-color var(--aft-fast) var(--aft-ease),
      box-shadow var(--aft-fast) var(--aft-ease);
  }

  .search-trigger:hover {
    border-color: var(--aft-sea);
    box-shadow: var(--aft-shadow-1);
    color: var(--aft-ink-soft);
  }

  .search-trigger .icon {
    color: var(--aft-sea);
  }

  .search-trigger kbd {
    margin-left: auto;
    padding: 2px 7px;
    border: 1px solid var(--aft-line);
    border-radius: 5px;
    font-size: 0.6875rem;
    background: var(--aft-paper);
    color: var(--aft-muted);
  }

  .search-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: min(80dvh, 760px);
    margin: 12vh auto auto;
    padding: 0;
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-4);
    background: var(--aft-card);
    box-shadow: var(--aft-shadow-2);
    overflow: hidden;
    color: var(--aft-ink);
  }

  .search-dialog::backdrop {
    background: rgba(10, 31, 38, 0.55);
    backdrop-filter: blur(3px);
  }

  .search-dialog__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--aft-line);
    background: var(--aft-card);
  }

  .search-dialog__head .icon {
    color: var(--aft-sea);
  }

  .search-dialog__input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 1.0625rem;
    font-weight: 500;
    padding: 6px 0;
  }

  .search-dialog__input:focus {
    outline: none;
  }

  .search-dialog__close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--aft-r-1);
    color: var(--aft-muted);
  }

  .search-dialog__close:hover {
    background: var(--aft-paper-deep);
    color: var(--aft-ink);
  }

  .search-dialog__body {
    overflow-y: auto;
    max-height: calc(80dvh - 66px);
    padding: 8px;
  }

  .search-hint {
    padding: 10px 12px 6px;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--aft-muted);
  }

  .search-result {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--aft-r-2);
    text-decoration: none;
    color: var(--aft-ink);
  }

  .search-result:hover,
  .search-result[aria-selected="true"],
  .search-result.is-active {
    background: var(--aft-paper-deep);
    color: var(--aft-ink);
  }

  .search-result .icon {
    color: var(--aft-sea);
  }

  .search-result__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .search-result__meta {
    display: block;
    font-size: 0.75rem;
    color: var(--aft-muted);
    margin-top: 2px;
  }

  .search-result__type {
    font-size: 0.6875rem;
    color: var(--aft-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .search-empty {
    padding: 28px 18px 32px;
    text-align: center;
    color: var(--aft-muted);
    font-size: 0.9rem;
  }

  .search-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--aft-line);
    background: var(--aft-paper);
    font-size: 0.72rem;
    color: var(--aft-muted);
  }

  .search-foot a {
    font-weight: 600;
  }

  /* --- Instalación PWA -------------------------------------------------- */
  .install-banner {
    display: flex;
    align-items: center;
    gap: var(--aft-s-4);
    padding: var(--aft-s-4) var(--aft-s-5);
    background: var(--aft-card);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-3);
    box-shadow: var(--aft-shadow-1);
  }

  .install-banner .icon {
    color: var(--aft-sea);
    width: 24px;
    height: 24px;
  }

  .install-banner p {
    font-size: 0.875rem;
    color: var(--aft-ink-soft);
    margin: 0;
  }

  .install-banner strong {
    color: var(--aft-ink);
  }

  .install-banner .btn {
    margin-left: auto;
    flex: none;
  }

  @media (max-width: 560px) {
    .install-banner {
      flex-wrap: wrap;
    }
    .install-banner .btn {
      margin-left: 0;
      width: 100%;
    }
  }

  /* --- Formularios ------------------------------------------------------ */
  .form {
    display: grid;
    gap: var(--aft-s-4);
    max-width: 640px;
  }

  .form__row {
    display: grid;
    gap: 6px;
  }

  .form label {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--aft-ink);
  }

  .form__hint {
    font-size: 0.75rem;
    color: var(--aft-muted);
  }

  .form input,
  .form textarea,
  .form select {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    background: var(--aft-card);
    border: 1px solid var(--aft-line-strong);
    border-radius: var(--aft-r-2);
    font-size: 0.9375rem;
  }

  .form textarea {
    min-height: 150px;
    resize: vertical;
  }

  .form input:focus-visible,
  .form textarea:focus-visible,
  .form select:focus-visible {
    border-color: var(--aft-sea);
    outline: 3px solid var(--aft-toxo);
    outline-offset: 1px;
  }

  .form__check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.8125rem;
    color: var(--aft-ink-soft);
  }

  .form__check input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin-top: 2px;
    accent-color: var(--aft-sea);
  }

  /* --- Táboa de contidos ------------------------------------------------ */
  .toc {
    padding: var(--aft-s-4) var(--aft-s-5);
    background: var(--aft-card);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-3);
  }

  .toc h2 {
    font-family: var(--aft-font-sans);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aft-muted);
    margin-bottom: var(--aft-s-3);
  }

  .toc ol {
    display: grid;
    gap: 7px;
    counter-reset: toc;
    font-size: 0.875rem;
  }

  .toc li {
    counter-increment: toc;
    display: flex;
    gap: 9px;
    color: var(--aft-ink-soft);
  }

  .toc li::before {
    content: counter(toc, decimal-leading-zero);
    font-size: 0.6875rem;
    color: var(--aft-toxo);
    font-weight: 650;
    padding-top: 3px;
    font-variant-numeric: tabular-nums;
  }

  .toc a {
    text-decoration: none;
  }

  .toc a:hover {
    text-decoration: underline;
  }

  /* --- Tarxeta de descarga / fonte -------------------------------------- */
  .source-box {
    padding: var(--aft-s-4);
    background: var(--aft-paper-deep);
    border-radius: var(--aft-r-2);
    font-size: 0.8125rem;
    color: var(--aft-ink-soft);
  }

  .source-box h2,
  .source-box h3 {
    font-family: var(--aft-font-sans);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aft-muted);
    margin-bottom: 8px;
  }

  .source-box a {
    overflow-wrap: anywhere;
  }

  /* --- Contador / número tabular ---------------------------------------- */
  .tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* --- Ampliacións de compoñentes --------------------------------------- */

  .card--icon .card__icon,
  .card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--aft-r-2);
    background: var(--aft-moss-soft);
    color: var(--aft-moss);
  }

  .card--icon h2 {
    font-family: var(--aft-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  .chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aft-s-2);
  }

  /* Ficha compacta en columna */
  .place-card--row {
    padding: var(--aft-s-4) var(--aft-s-5);
  }

  .place-card--row h3 {
    font-size: 1.2rem;
  }

  .place-card--row p {
    font-size: 0.875rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Lista de ligazóns (directorio, gardados) */
  .link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--aft-line);
  }

  .link-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--aft-s-4);
    padding: var(--aft-s-4) 0;
    border-bottom: 1px solid var(--aft-line);
  }

  .link-list a,
  .link-list__static {
    display: grid;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
  }

  .link-list a:hover .link-list__title {
    color: var(--aft-sea);
  }

  .link-list__head {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .link-list__title {
    font-family: var(--aft-font-display);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }

  .link-list__head .icon {
    color: var(--aft-muted);
    flex: none;
  }

  .link-list__meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--aft-sea);
  }

  .link-list__note {
    font-size: 0.875rem;
    color: var(--aft-ink-soft);
    line-height: 1.5;
  }

  .link-list__aside {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--aft-sea);
    white-space: nowrap;
    align-self: center;
  }

  /* Formularios */
  .form__title {
    font-family: var(--aft-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  .form__field {
    display: grid;
    gap: 6px;
  }

  .form__note {
    font-size: 0.8125rem;
    color: var(--aft-clay);
    background: var(--aft-clay-soft);
    border-radius: var(--aft-r-2);
    padding: 10px 12px;
  }

  .contact-mail a {
    font-family: var(--aft-font-sans);
    font-size: 1.05rem;
    font-weight: 600;
  }

  /* Táboa de datos */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--aft-s-4) 0;
    font-size: 0.9375rem;
  }

  .data-table th,
  .data-table td {
    text-align: left;
    padding: 12px 4px;
    border-bottom: 1px solid var(--aft-line);
  }

  .data-table th {
    font-family: var(--aft-font-sans);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--aft-sea);
    width: 84px;
  }

  @media (max-width: 560px) {
    .link-list li {
      grid-template-columns: 1fr;
    }
  }
}

/* ==========================================================================
   AFerrolterra · pages.css
   Composicións específicas: portada, territorio, ficha, guía e utilidades.
   ========================================================================== */

@layer pages {
  /* ======================================================================
     Portada · hero
     ====================================================================== */
  .hero {
    padding: clamp(32px, 6vw, 76px) 0 clamp(28px, 5vw, 56px);
    border-bottom: 1px solid var(--aft-line);
    position: relative;
    overflow: hidden;
  }

  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(32px, 6vw, 72px);
    align-items: center;
  }

  .hero h1 {
    max-width: 15ch;
  }

  .hero__lead {
    margin-top: var(--aft-s-4);
    max-width: 46ch;
    font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
    line-height: 1.6;
    color: var(--aft-ink-soft);
  }

  .hero__search {
    margin-top: var(--aft-s-5);
    max-width: 480px;
  }

  .hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--aft-s-4);
    max-width: 520px;
  }

  .hero__chips a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--aft-line-strong);
    border-radius: var(--aft-r-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--aft-ink-soft);
    text-decoration: none;
    transition: border-color var(--aft-fast) var(--aft-ease),
      color var(--aft-fast) var(--aft-ease),
      background var(--aft-fast) var(--aft-ease);
  }

  .hero__chips a:hover {
    border-color: var(--aft-sea);
    color: var(--aft-sea);
    background: var(--aft-card);
  }

  .hero__chips .icon {
    width: 14px;
    height: 14px;
    color: var(--aft-sea);
  }

  /* Carta esquemática */
  .carta {
    position: relative;
    padding: var(--aft-s-4);
    background: var(--aft-card);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-4);
    box-shadow: var(--aft-shadow-1);
  }

  .carta::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid color-mix(in srgb, var(--aft-sea) 12%, transparent);
    border-radius: calc(var(--aft-r-4) - 6px);
    pointer-events: none;
  }

  .carta svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .carta figcaption {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 6px 2px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aft-muted);
    font-weight: 600;
  }

  .carta .node-label {
    font-family: var(--aft-font-display);
    font-size: 15px;
    font-weight: 600;
    fill: var(--aft-ink);
    letter-spacing: -0.01em;
  }

  .carta .node-sub {
    font-family: var(--aft-font-sans);
    font-size: 9.5px;
    font-weight: 600;
    fill: var(--aft-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .carta .node-count {
    font-family: var(--aft-font-display);
    font-size: 22px;
    font-weight: 600;
    fill: var(--aft-sea);
  }

  .carta .grid-line {
    stroke: color-mix(in srgb, var(--aft-sea) 14%, transparent);
    stroke-width: 1;
  }

  .carta .coast {
    fill: none;
    stroke: var(--aft-sea);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.85;
  }

  .carta .coast-wash {
    fill: color-mix(in srgb, var(--aft-sea) 7%, transparent);
  }

  .carta .route {
    fill: none;
    stroke: var(--aft-toxo);
    stroke-width: 1.2;
    stroke-dasharray: 4 5;
    opacity: 0.9;
  }

  .carta .pin {
    fill: var(--aft-toxo);
    stroke: var(--aft-card);
    stroke-width: 2;
  }

  .carta .pin--sea {
    fill: var(--aft-sea);
  }

  .carta .crosshair {
    stroke: color-mix(in srgb, var(--aft-muted) 45%, transparent);
    stroke-width: 1;
  }

  .carta .coord {
    font-family: var(--aft-font-sans);
    font-size: 8.5px;
    fill: var(--aft-muted);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 980px) {
    .hero__grid {
      grid-template-columns: 1fr;
      gap: var(--aft-s-6);
    }
    .hero h1 {
      max-width: 18ch;
    }
    .carta {
      max-width: 520px;
    }
  }

  @media (max-width: 480px) {
    .carta {
      padding: var(--aft-s-2);
    }
    .carta figcaption span:last-child {
      display: none;
    }
  }

  /* ======================================================================
     Portada · rail de utilidades
     ====================================================================== */
  .rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--aft-line);
  }

  .rail__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--aft-s-4) var(--aft-s-4) var(--aft-s-4) 0;
    border-right: 1px solid var(--aft-line);
    text-decoration: none;
    color: inherit;
    min-width: 0;
  }

  .rail__item:last-child {
    border-right: 0;
  }

  .rail__item:hover {
    color: inherit;
  }

  .rail__item:hover .rail__title {
    color: var(--aft-sea);
  }

  .rail__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--aft-r-2);
    background: color-mix(in srgb, var(--aft-sea) 9%, transparent);
    color: var(--aft-sea);
    flex: none;
  }

  .rail__icon .icon {
    width: 19px;
    height: 19px;
  }

  .rail__body {
    min-width: 0;
    display: grid;
    gap: 1px;
  }

  .rail__title {
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--aft-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--aft-fast) var(--aft-ease);
  }

  .rail__sub {
    font-size: 0.72rem;
    color: var(--aft-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media (max-width: 860px) {
    .rail {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .rail__item:nth-child(2) {
      border-right: 0;
    }
    .rail__item:nth-child(-n + 2) {
      border-bottom: 1px solid var(--aft-line);
    }
  }

  /* ======================================================================
     Territorio
     ====================================================================== */
  .territory-rows {
    display: grid;
    border-top: 1px solid var(--aft-line);
  }

  .territory-row {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
    gap: var(--aft-s-5);
    align-items: baseline;
    padding: clamp(20px, 3vw, 30px) 0;
    border-bottom: 1px solid var(--aft-line);
    text-decoration: none;
    color: inherit;
  }

  .territory-row:hover {
    color: inherit;
  }

  .territory-row__name {
    font-family: var(--aft-font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    transition: color var(--aft-fast) var(--aft-ease);
  }

  .territory-row:hover .territory-row__name {
    color: var(--aft-sea);
  }

  .territory-row__text {
    font-size: 0.9375rem;
    color: var(--aft-ink-soft);
    max-width: 58ch;
  }

  .territory-row__count {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--aft-muted);
    white-space: nowrap;
  }

  .territory-row__count b {
    font-family: var(--aft-font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--aft-sea);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .territory-row__count .icon {
    color: var(--aft-sea);
    transition: transform var(--aft-fast) var(--aft-ease);
  }

  .territory-row:hover .territory-row__count .icon {
    transform: translateX(4px);
  }

  @media (max-width: 820px) {
    .territory-row {
      grid-template-columns: 1fr auto;
      gap: 10px var(--aft-s-4);
    }
    .territory-row__text {
      grid-column: 1 / -1;
      grid-row: 2;
    }
  }

  /* Cabeceira de comarca */
  .comarca-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--aft-s-6);
    align-items: end;
  }

  .comarca-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
    gap: 1px;
    background: var(--aft-line);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-3);
    overflow: hidden;
  }

  .comarca-stats > div {
    background: var(--aft-card);
    padding: 14px 16px;
  }

  .comarca-stats dt {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aft-muted);
    font-weight: 650;
  }

  .comarca-stats dd {
    margin: 3px 0 0;
    font-family: var(--aft-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--aft-ink);
    font-variant-numeric: tabular-nums;
  }

  .comarca-stats--wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  @media (max-width: 820px) {
    .comarca-head {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 720px) {
    .comarca-stats--wide {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Grella de concellos */
  .concello-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--aft-line);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-3);
    overflow: hidden;
  }

  .concello-cell {
    display: grid;
    gap: 6px;
    padding: 20px 22px;
    background: var(--aft-card);
    text-decoration: none;
    color: inherit;
    transition: background var(--aft-fast) var(--aft-ease);
  }

  .concello-cell:hover {
    background: var(--aft-paper);
    color: inherit;
  }

  .concello-cell__name {
    font-family: var(--aft-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--aft-ink);
  }

  .concello-cell:hover .concello-cell__name {
    color: var(--aft-sea);
  }

  .concello-cell__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.75rem;
    color: var(--aft-muted);
    font-variant-numeric: tabular-nums;
  }

  .concello-cell__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
  }

  @media (max-width: 900px) {
    .concello-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .concello-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ======================================================================
     Banda Camiño
     ====================================================================== */
  .camino-band {
    background: var(--aft-abyss);
    color: #eaf4f1;
    position: relative;
    overflow: hidden;
  }

  .camino-band .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(32px, 6vw, 80px);
    padding: clamp(40px, 6vw, 76px) var(--aft-gutter);
    align-items: center;
  }

  .camino-band h2 {
    color: #fff;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    max-width: 15ch;
  }

  .camino-band p {
    margin-top: var(--aft-s-4);
    color: rgba(234, 244, 241, 0.78);
    max-width: 44ch;
  }

  .camino-band .btn {
    margin-top: var(--aft-s-5);
    background: var(--aft-toxo);
    border-color: var(--aft-toxo);
    color: var(--aft-abyss);
  }

  .camino-band .btn:hover {
    background: #e8b84a;
    border-color: #e8b84a;
    color: var(--aft-abyss);
  }

  .camino-steps {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(234, 244, 241, 0.16);
  }

  .camino-steps a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(234, 244, 241, 0.16);
    text-decoration: none;
    color: #eaf4f1;
  }

  .camino-steps a:hover {
    color: #fff;
  }

  .camino-steps .step-num {
    font-size: 0.6875rem;
    font-weight: 650;
    color: var(--aft-toxo);
    font-variant-numeric: tabular-nums;
  }

  .camino-steps .step-title {
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .camino-steps .step-meta {
    display: block;
    font-size: 0.75rem;
    color: rgba(234, 244, 241, 0.6);
    margin-top: 2px;
  }

  .camino-steps .icon {
    color: rgba(234, 244, 241, 0.5);
  }

  @media (max-width: 820px) {
    .camino-band .shell {
      grid-template-columns: 1fr;
    }
  }

  /* ======================================================================
     Ficha de concello
     ====================================================================== */
  .concello-head {
    padding: clamp(28px, 5vw, 56px) 0 clamp(24px, 3vw, 36px);
    border-bottom: 1px solid var(--aft-line);
  }

  .concello-head__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
  }

  .concello-head h1 {
    max-width: 18ch;
  }

  .concello-head__lead {
    margin-top: var(--aft-s-4);
    font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
    line-height: 1.62;
    color: var(--aft-ink-soft);
    max-width: 60ch;
  }

  .concello-facts {
    background: var(--aft-card);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-3);
    padding: var(--aft-s-4) var(--aft-s-5);
  }

  .concello-facts h2 {
    font-family: var(--aft-font-sans);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--aft-muted);
    margin-bottom: var(--aft-s-2);
  }

  .concello-facts .fact-list {
    border-top: 0;
  }

  .concello-facts .fact-list > div:last-child {
    border-bottom: 0;
  }

  .concello-facts a {
    overflow-wrap: anywhere;
  }

  @media (max-width: 900px) {
    .concello-head__grid {
      grid-template-columns: 1fr;
    }
  }

  /* ======================================================================
     Ficha de lugar
     ====================================================================== */
  .place-hero {
    padding: clamp(28px, 5vw, 52px) 0 clamp(20px, 3vw, 32px);
    border-bottom: 1px solid var(--aft-line);
  }

  .place-hero h1 {
    max-width: 22ch;
  }

  .place-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: var(--aft-s-4);
    font-size: 0.8125rem;
    color: var(--aft-muted);
  }

  .place-hero__lead {
    margin-top: var(--aft-s-4);
    max-width: 62ch;
    font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
    color: var(--aft-ink-soft);
    line-height: 1.6;
  }

  .place-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--aft-s-5);
  }

  .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--aft-line-strong);
    border-radius: var(--aft-r-2);
    background: var(--aft-card);
    color: var(--aft-ink-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--aft-fast) var(--aft-ease),
      color var(--aft-fast) var(--aft-ease);
  }

  .action-btn:hover {
    border-color: var(--aft-sea);
    color: var(--aft-sea);
  }

  .action-btn[aria-pressed="true"] {
    background: var(--aft-sea);
    border-color: var(--aft-sea);
    color: #fff;
  }

  .action-btn .icon {
    width: 15px;
    height: 15px;
  }

  /* ======================================================================
     Guía longa
     ====================================================================== */
  .guide-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
  }

  .guide-nav {
    position: sticky;
    top: calc(var(--aft-header) + 24px);
    display: grid;
    gap: 4px;
    font-size: 0.8125rem;
    padding-top: 4px;
  }

  .guide-nav a {
    display: block;
    padding: 7px 0 7px 12px;
    border-left: 2px solid var(--aft-line);
    text-decoration: none;
    color: var(--aft-ink-soft);
  }

  .guide-nav a:hover {
    color: var(--aft-sea);
    border-left-color: var(--aft-sea);
  }

  .guide-nav a.is-active {
    color: var(--aft-sea);
    border-left-color: var(--aft-toxo);
    font-weight: 650;
  }

  .guide-body {
    max-width: 70ch;
  }

  .guide-body h2 {
    font-size: var(--aft-fs-2xl);
    margin-top: 2.2em;
    padding-top: 0.6em;
  }

  .guide-body h2:first-child {
    margin-top: 0;
    padding-top: 0;
  }

  .guide-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aft-s-3);
    margin-top: var(--aft-s-7);
    padding-top: var(--aft-s-5);
    border-top: 1px solid var(--aft-line);
  }

  .guide-next a {
    display: grid;
    gap: 4px;
    padding: var(--aft-s-4);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-2);
    text-decoration: none;
    color: inherit;
    background: var(--aft-card);
  }

  .guide-next a:hover {
    border-color: var(--aft-sea);
  }

  .guide-next span {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--aft-muted);
    font-weight: 650;
  }

  .guide-next strong {
    font-family: var(--aft-font-display);
    font-size: 1.1rem;
    font-weight: 600;
  }

  .guide-next a:last-child {
    text-align: right;
  }

  @media (max-width: 900px) {
    .guide-layout {
      grid-template-columns: 1fr;
    }
    .guide-nav {
      position: static;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      overflow-x: auto;
      padding-bottom: 8px;
      gap: 0;
    }
    .guide-nav a {
      border-left: 0;
      border-bottom: 2px solid var(--aft-line);
      padding: 8px 14px;
      white-space: nowrap;
    }
    .guide-nav a.is-active {
      border-left: 0;
      border-bottom-color: var(--aft-toxo);
    }
    .guide-next {
      grid-template-columns: 1fr;
    }
    .guide-next a:last-child {
      text-align: left;
    }
  }

  /* ======================================================================
     Legal e texto longo
     ====================================================================== */
  .legal-body {
    max-width: 72ch;
  }

  .legal-body h2 {
    font-size: var(--aft-fs-xl);
    margin-top: 2em;
  }

  .legal-body p,
  .legal-body li {
    font-size: 0.9375rem;
    color: var(--aft-ink-soft);
  }

  /* ======================================================================
     Gardados
     ====================================================================== */
  .saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--aft-s-4);
  }

  /* ======================================================================
     404 / offline
     ====================================================================== */
  .standalone {
    min-height: 70dvh;
    display: grid;
    place-items: center;
    padding: var(--aft-s-8) 0;
    text-align: center;
  }

  .standalone__inner {
    display: grid;
    justify-items: center;
    gap: var(--aft-s-4);
    max-width: 520px;
  }

  .standalone__code {
    font-family: var(--aft-font-display);
    font-size: clamp(4rem, 14vw, 8rem);
    line-height: 0.9;
    color: var(--aft-toxo);
    letter-spacing: -0.04em;
  }

  .standalone p {
    color: var(--aft-ink-soft);
    max-width: 42ch;
  }

  /* ======================================================================
     Índice de seccións (cards de navegación)
     ====================================================================== */
  .hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: var(--aft-line);
    border: 1px solid var(--aft-line);
    border-radius: var(--aft-r-3);
    overflow: hidden;
  }

  .hub-cell {
    display: grid;
    gap: 8px;
    padding: 22px;
    background: var(--aft-card);
    text-decoration: none;
    color: inherit;
    transition: background var(--aft-fast) var(--aft-ease);
  }

  .hub-cell:hover {
    background: var(--aft-paper);
    color: inherit;
  }

  .hub-cell .icon {
    color: var(--aft-sea);
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
  }

  .hub-cell strong {
    font-family: var(--aft-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.012em;
  }

  .hub-cell span {
    font-size: 0.8375rem;
    color: var(--aft-muted);
    line-height: 1.5;
  }

  /* ======================================================================
     Ancho de lectura
     ====================================================================== */
  .measure {
    max-width: var(--aft-measure);
  }

  .stack {
    display: grid;
    gap: var(--aft-s-5);
  }

  .stack--sm {
    gap: var(--aft-s-3);
  }

  .mt-4 {
    margin-top: var(--aft-s-4);
  }

  .mt-5 {
    margin-top: var(--aft-s-5);
  }

  .mt-6 {
    margin-top: var(--aft-s-6);
  }

  /* --- Ampliacións de páxina -------------------------------------------- */

  .mt-2 { margin-top: var(--aft-s-2); }
  .mt-3 { margin-top: var(--aft-s-3); }
  .mt-8 { margin-top: var(--aft-s-8); }

  .home-discover {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: var(--aft-s-5);
    align-items: start;
  }

  .home-discover__side {
    display: grid;
    gap: var(--aft-s-3);
    align-content: start;
  }

  .feature-card {
    display: grid;
    align-content: space-between;
    gap: var(--aft-s-5);
    min-height: 420px;
    padding: var(--aft-s-6);
    border-radius: var(--aft-r-4);
    background: var(--aft-sea-deep);
    color: #eaf4f1;
    text-decoration: none;
    transition: transform var(--aft-fast) var(--aft-ease),
      box-shadow var(--aft-fast) var(--aft-ease);
  }

  .feature-card:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--aft-shadow-2);
  }

  .feature-card__top {
    display: flex;
    gap: var(--aft-s-2);
  }

  .feature-card__body {
    display: grid;
    gap: var(--aft-s-3);
  }

  .feature-card__title {
    font-family: var(--aft-font-display);
    font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.028em;
    color: #fff;
  }

  .feature-card__text {
    font-size: 0.975rem;
    line-height: 1.6;
    color: #c9dedb;
    max-width: 46ch;
  }

  .feature-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--aft-toxo);
    padding-top: var(--aft-s-2);
  }

  /* Camiño en portada */
  .camino-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--aft-s-7);
    padding: var(--aft-s-7);
    border-radius: var(--aft-r-4);
    background: var(--aft-abyss);
    color: #e8f1ee;
    text-decoration: none;
    border: 1px solid var(--aft-sea-deep);
  }

  .camino-card:hover {
    color: #fff;
  }

  .camino-card h2 {
    font-family: var(--aft-font-display);
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
    letter-spacing: -0.025em;
    color: #fff;
  }

  .camino-card p {
    color: #b9cecb;
    max-width: 46ch;
  }

  .camino-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--aft-s-4);
    color: var(--aft-toxo);
    font-weight: 650;
    font-size: 0.9375rem;
  }

  .camino-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
    align-content: start;
  }

  .camino-card__list li {
    display: flex;
    align-items: baseline;
    gap: var(--aft-s-3);
    padding: 10px 0;
    border-bottom: 1px solid rgba(216, 163, 46, 0.18);
    font-size: 0.9375rem;
  }

  .camino-card__list .step-num {
    color: var(--aft-toxo);
  }

  /* Listas de etapas */
  .stage-list {
    list-style: none;
    margin: var(--aft-s-4) 0 0;
    padding: 0;
    border-top: 1px solid var(--aft-line);
  }

  .stage-list li {
    border-bottom: 1px solid var(--aft-line);
  }

  .stage-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--aft-s-4);
    padding: var(--aft-s-4) 0;
    text-decoration: none;
    color: inherit;
  }

  .stage-list a:hover .stage-list__title {
    color: var(--aft-sea);
  }

  .stage-list__body {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .stage-list__title {
    font-family: var(--aft-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.012em;
  }

  .stage-list__lead {
    font-size: 0.875rem;
    color: var(--aft-ink-soft);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .stage-list a .icon {
    color: var(--aft-muted);
  }

  .section-label {
    font-family: var(--aft-font-display);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  /* Axenda */
  .agenda-more summary {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--aft-sea);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--aft-s-2);
  }

  .agenda-more summary::-webkit-details-marker {
    display: none;
  }

  .agenda-more summary::after {
    content: "+";
    font-size: 1rem;
    line-height: 1;
  }

  .agenda-more[open] summary::after {
    content: "–";
  }

  /* Gardados */
  .saved-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aft-s-3);
    border-bottom: 1px solid var(--aft-line);
    padding-bottom: var(--aft-s-3);
  }

  /* Busca */
  .search-page__form {
    display: flex;
    align-items: center;
    gap: var(--aft-s-3);
    position: relative;
    max-width: 720px;
  }

  .search-page__form > .icon {
    position: absolute;
    left: 16px;
    color: var(--aft-muted);
    pointer-events: none;
  }

  .field--lg {
    min-height: 56px;
    padding-left: 46px;
    font-size: 1.0625rem;
  }

  /* Erros e estados */
  .error-page {
    max-width: 640px;
    margin: var(--aft-s-8) auto 0;
    text-align: center;
    display: grid;
    gap: var(--aft-s-4);
    justify-items: center;
  }

  .error-page h1 {
    font-size: var(--aft-fs-3xl);
  }

  .error-page__code {
    font-family: var(--aft-font-display);
    font-size: clamp(4rem, 2rem + 9vw, 8rem);
    line-height: 0.85;
    color: var(--aft-toxo);
    letter-spacing: -0.05em;
  }

  .error-page__icon {
    width: 56px;
    height: 56px;
    color: var(--aft-clay);
  }

  @media (max-width: 900px) {
    .home-discover,
    .camino-card {
      grid-template-columns: 1fr;
    }
    .feature-card {
      min-height: 320px;
    }
    .camino-card {
      padding: var(--aft-s-6);
      gap: var(--aft-s-5);
    }
  }

  .search-results {
    display: grid;
    gap: 2px;
    margin-top: var(--aft-s-3);
    border-top: 1px solid var(--aft-line);
    padding-top: var(--aft-s-2);
  }

  .search-results .search-result {
    padding: 12px 8px;
    border-radius: var(--aft-r-1);
  }

  .action-btn.is-active {
    background: var(--aft-moss-soft);
    border-color: color-mix(in srgb, var(--aft-moss) 35%, var(--aft-line));
    color: var(--aft-moss);
  }

  /* Navegación entre etapas */
  .pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aft-s-4);
    margin-top: var(--aft-s-7);
    padding-top: var(--aft-s-5);
    border-top: 1px solid var(--aft-line);
  }

  .pager__item {
    display: grid;
    gap: 4px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
  }

  .pager__item--next {
    text-align: right;
    justify-items: end;
  }

  .pager__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aft-muted);
  }

  .pager__title {
    font-family: var(--aft-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.012em;
  }

  .pager__item:hover .pager__title {
    color: var(--aft-sea);
  }

  @media (max-width: 560px) {
    .pager {
      grid-template-columns: minmax(0, 1fr);
    }
    .pager__item--next {
      text-align: left;
      justify-items: start;
    }
  }
}