/* Pie (#pie) · <footer id="pie" class="site-footer">.
   Una fila: nombre · qué somos · aviso legal y privacidad · «Pedir propuesta» · «Volver arriba».
   Fondo tinta con borde superior suave (lo da .site-footer en base.css). Sin animación de entrada.
   Hasta 1400 px: dos filas. Móvil: apilado a la izquierda, con hueco abajo para la barra fija.
   Todos los selectores empiezan por #pie. */

#pie {
  --pie-y: clamp(28px, 3vw, 40px);
  --pie-gap: clamp(20px, 2.6vw, 40px);
  padding: var(--pie-y) 0 calc(var(--pie-y) + env(safe-area-inset-bottom));
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-2);
}

/* Todo en la misma línea base: el nombre, el texto y los enlaces, aunque tengan tamaños distintos. */
#pie .pie-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "brand tag legal actions";
  align-items: baseline;
  column-gap: var(--pie-gap);
}

#pie .pie-brand { grid-area: brand; display: flex; align-items: center; min-height: 44px; color: var(--text); }
#pie .pie-brand .logo { height: 20px; }

/* Dos trozos que no se parten por dentro: si no cabe, «Barcelona.» baja entera. */
#pie .pie-tag { grid-area: tag; min-width: 0; }
#pie .pie-tag span { white-space: nowrap; }
#pie .pie-city { color: var(--text-3); }

#pie .pie-legal {
  grid-area: legal;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px;
  font-size: var(--fs-small);
  color: var(--text-3);
}

/* Las dos salidas, separadas de lo legal por un trazo corto. */
#pie .pie-actions {
  grid-area: actions;
  position: relative;
  display: flex; align-items: baseline; gap: clamp(20px, 2.2vw, 32px);
  padding-left: var(--pie-gap);
}
#pie .pie-actions::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 1px; height: 18px; margin-top: -9px;
  background: var(--line-2);
}

/* ---------- Enlaces: el subrayado crece desde la izquierda ---------- */
/* Un poco de aire a los lados (que se come el margen negativo) para que el anillo de foco no pise el texto. */
#pie .pie-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  margin-inline: -6px; padding-inline: 6px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out), transform 0.16s var(--ease-out);
}
#pie .pie-link:active { transform: scale(0.97); }
#pie .pie-link-text {
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.3s var(--ease-out);
}
#pie .pie-link:focus-visible .pie-link-text { background-size: 100% 1px; }

#pie .pie-arrow {
  flex: none; width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: translate 0.3s var(--ease-out);
}

#pie .pie-cta { font-weight: 700; color: var(--ai); }

#pie .pie-top { font-weight: 500; color: var(--text); }
#pie .pie-top-ring {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow 0.25s var(--ease-out);
}
#pie .pie-top-ring .pie-arrow { width: 13px; height: 13px; }

@media (hover: hover) and (pointer: fine) {
  #pie .pie-link:hover .pie-link-text { background-size: 100% 1px; }
  #pie .pie-legal .pie-link:hover { color: var(--text-2); }
  #pie .pie-cta:hover { color: var(--ai-2); }
  #pie .pie-cta:hover .pie-arrow { translate: 3px 0; }
  #pie .pie-top:hover .pie-top-ring { box-shadow: inset 0 0 0 1px var(--text-3); }
  #pie .pie-top:hover .pie-arrow { translate: 0 -2px; }
}

/* ---------- Hasta 1400 px: dos filas (nombre y texto · enlaces). Con los enlaces de cookies, en una sola
   fila el texto se montaba sobre «Aviso legal» por debajo de ese ancho. ---------- */
@media (max-width: 1399px) {
  #pie .pie-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brand tag tag"
      "legal legal actions";
    row-gap: 6px;
  }
  #pie .pie-actions { padding-left: 0; }
  #pie .pie-actions::before { display: none; }
}

/* ---------- Móvil: apilado a la izquierda ---------- */
@media (max-width: 767px) {
  #pie {
    padding-top: 32px;
    /* La barra fija se aparta desde el contacto (core/chrome.js): aquí abajo no tapa nada. */
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
  #pie .pie-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "tag" "legal" "actions";
    row-gap: 2px;
  }
  #pie .pie-tag { margin-bottom: 6px; }
  /* «Preferencias de cookies» en su propia línea, sin el punto colgando al final de la anterior. */
  #pie .pie-dot:has(+ .pie-cookies) { display: none; }
  #pie .pie-cookies { flex-basis: 100%; text-align: left; }
  #pie .pie-actions {
    flex-wrap: wrap;
    gap: 4px 28px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
}

/* Polvo del logo (pie.js, mientras dura): encima del logo y sin coger clics. */
#pie .pie-brand { position: relative; }
#pie .pie-dust { position: absolute; left: -24px; top: -24px; width: calc(100% + 48px); height: calc(100% + 48px); pointer-events: none; }