/* ─────────────────────────────────────────────────────────────
   Pasifae Arquitech — Footer del sitio (idéntico en todas las
   páginas estáticas; réplica del footer de la home React).
   Autónomo: colores literales para no depender de tokens de página.
   ───────────────────────────────────────────────────────────── */

.site-footer {
  background: #1c1917;
  color: #faf6ef;
  padding: clamp(64px, 10vh, 144px) 40px 40px;
  font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
}

.site-footer-inner {
  max-width: 1680px;
  margin-inline: auto;
}

.site-footer-mission {
  max-width: 24ch;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.site-footer-mission em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.site-footer-cols {
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid rgb(250 246 239 / 0.15);
  display: grid;
  gap: 48px;
  grid-template-columns: repeat(4, 1fr);
}

.site-footer-h {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(250 246 239 / 0.5);
}

.site-footer-h-2 {
  margin-top: 24px;
}

.site-footer-col ul {
  margin-top: 20px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}

.site-footer-col a {
  color: #faf6ef;
  text-decoration: none;
  transition: color 0.3s;
}

.site-footer-col a:hover {
  color: #ead3cb;
}

.site-footer-plain {
  color: rgb(250 246 239 / 0.8);
}

.site-footer-zone {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: rgb(250 246 239 / 0.8);
}

/* NAP */
.site-footer-nap {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid rgb(250 246 239 / 0.15);
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr auto;
  align-items: end;
}

.site-footer-address {
  font-style: normal;
}

.site-footer-studio {
  margin-top: 16px;
  font-size: 1.125rem;
  font-weight: 500;
}

.site-footer-addr {
  margin-top: 8px;
  max-width: 30ch;
  line-height: 1.6;
  color: rgb(250 246 239 / 0.7);
}

.site-footer-contacts {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 15px;
}

.site-footer-contacts a {
  color: #faf6ef;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s;
}

.site-footer-contacts a:hover {
  color: #ead3cb;
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 12px;
}

@media (max-width: 900px) {
  .site-footer-brand {
    align-items: flex-start;
    text-align: left;
  }
}

.site-footer-word {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.site-footer-word span:first-child {
  font-size: 22px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: -0.045em;
  line-height: 1;
}

.site-footer-tag {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.6;
}

.site-footer-cta {
  background: #b75c4c;
  color: #faf6ef;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 999px;
  transition: background 0.3s;
}

.site-footer-cta:hover {
  background: #71362e;
}

.site-footer-copy {
  margin-top: 16px;
  font-size: 13px;
  color: rgb(250 246 239 / 0.5);
}

.site-footer-madeby {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgb(250 246 239 / 0.5);
  text-decoration: none;
  transition: color 0.3s;
}

.site-footer-madeby:hover {
  color: #ead3cb;
}

/* El navbar fijo se retira cuando el footer entra en pantalla (site-footer.js) */
.nav {
  transition: transform 0.45s cubic-bezier(0.32, 0.94, 0.6, 1), opacity 0.45s;
}

.nav.nav-hide {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .site-footer {
    padding-inline: 20px;
  }
  .site-footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .site-footer-nap {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

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

/* ═══════════════════════════════════════════════════════════════
   Menú móvil unificado (gana sobre la hoja de cada página).
   Estructura: enlaces arriba + botón CTA abajo, sin "Inicio".
   Al abrir: franja superior negra con el logo y la X en crema.
   Se replica en proyectos/styles.css (doorway, que no carga este archivo).
   ═══════════════════════════════════════════════════════════════ */
.mobile-menu {
  justify-content: flex-start;
  gap: 2px;
  padding: 104px 24px 32px;
  overflow-y: auto;
  background: #faf6ef;
}
.mobile-menu a {
  font-size: clamp(2.25rem, 8vw, 3rem);
  line-height: 1.12;
  padding: 10px 0;
  color: #1c1917;
}
/* CTA: píldora anaranjada a lo ancho, abajo */
.mobile-menu .mobile-menu-cta {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  color: #faf6ef;
  background: #b75c4c;
  border-radius: 999px;
  padding: 18px 28px;
  transition: background 0.3s;
}
.mobile-menu .mobile-menu-cta:hover {
  background: #71362e;
}

/* Franja superior negra con el logo blanco al abrir el menú */
body.menu-open .nav {
  background: #1c1917;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.menu-open .nav-brand {
  color: #faf6ef;
}
body.menu-open .nav-burger span {
  background: #faf6ef;
}

/* Al ampliar a escritorio: oculta el overlay y restaura el navbar aunque
   el estado "menu-open" quede colgado tras un resize. */
@media (min-width: 900px) {
  .mobile-menu {
    display: none;
  }
  body.menu-open .nav {
    background: color-mix(in srgb, #faf6ef 85%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  body.menu-open .nav-brand {
    color: #1c1917;
  }
  body.menu-open .nav-burger span {
    background: #1c1917;
  }
}

/* Área táctil cómoda (≥24px) SIN romper el roll-over: la altura se da con
   line-height, no con padding, para que la máscara (overflow:hidden) mida lo
   mismo que el texto y el clip 115% funcione igual que en la home.
   (El padding vertical inflaba la máscara y dejaba ver los dos textos.) */
.nav .nav-roll {
  padding-block: 0;
  margin-block: 0;
  line-height: 2.3;
}

/* ── Selector de idioma ES · CA · EN en el navbar estático (lo inyecta
   site-footer.js; replica el de la home). ── */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-lang a {
  color: rgb(28 25 23 / 0.4);
  transition: color 0.3s;
}
.nav-lang a:hover,
.nav-lang a.is-current {
  color: #1c1917;
}
.nav-lang-sep {
  color: rgb(28 25 23 / 0.25);
}
/* Versión móvil: centrada bajo el CTA del menú */
.nav-lang-mobile {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 15px;
}