/* ═══════════════════════════════════════════════════════════
   BRIDGE + GLOBALES · Syncros
   ───────────────────────────────────────────────────────────
   Traduce la paleta "Quiet luxury cálido" a los tokens que
   consume el Motor tema-cero (header/footer universales) y
   estiliza el header (≡ MENÚ + logo centrado + switcher + CTA
   Reservar) y el footer (logo → nodo → 4 columnas → barra legal)
   para que queden 1:1 con el prototipo aprobado (Prueba/).

   Las reglas que deben ganarle al header.css/footer del motor
   (que viven en @layer components) van SIN layer · en CSS
   Cascade Layers lo unlayered gana a lo layered, sin !important.

   Paleta "Quiet luxury cálido" (prototipo aprobado por Germán):
     tinta #1C1C1A · naranja #F2920A · marfil #F7F4EF ·
     blanco #FFFFFF · greige #EAE5DD · piedra #8A857C
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta de marca (vars propias del child · se reusan en home.css en M4) ── */
  --sy-tinta: #1c1c1a;
  --sy-naranja: #f2920a;
  --sy-naranja-d: #dd8208;
  --sy-marfil: #f7f4ef;
  --sy-blanco: #fff;
  --sy-greige: #eae5dd;
  --sy-piedra: #8a857c;
  --sy-linea: rgba(28, 28, 26, 0.11);
  /* Negro del footer/CTA (un punto más profundo que la tinta · prototipo). */
  --sy-negro: #0f0f0d;

  /* ── Tokens del motor (header/footer universales) ──
     El motor define estos tokens en INGLÉS en su style.css con su
     paleta default. El child los repinta acá con "Quiet luxury cálido". */
  --color-bone: #fff;
  --color-bg: #f7f4ef;
  --color-bg-soft: #eae5dd;
  --color-graphite: #1c1c1a;
  --color-text: #1c1c1a;
  --color-text-soft: #56554e; /* AA sobre marfil y greige */
  --color-accent: #f2920a;
  --color-line: rgba(28, 28, 26, 0.11);
  --color-stone: #8a857c;

  /* ── Tipografía (autohospedada · ver fonts.css) ── */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-text: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Easing canónico #512 ── */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-slow: 600ms;
  --dur-hover: 320ms;

  /* ═══ Header del motor · multipágina con hero foto ═══
     Transparente sobre el hero → al scrollear toma marfil translúcido
     + blur y el texto pasa a tinta. El logo se blanquea sobre el hero
     y vuelve a su color al scrollear (ver reglas abajo). */
  --tema-header-h: 72px;
  --tema-header-bg: transparent;
  --tema-header-color: #fff;
  --tema-header-scrolled-bg: rgba(247, 244, 239, 0.92);
  --tema-header-scrolled-color: var(--sy-tinta);
  --tema-header-blur: blur(16px) saturate(140%);
  /* Hairline del header sigue al texto: claro sobre hero, tinta al scroll. */
  --tema-header-rule: color-mix(in oklab, currentColor 18%, transparent);
  --tema-header-font-display: var(--font-display);
  --tema-header-link-hover-color: var(--sy-naranja);
  --tema-header-link-hover-opacity: 1;

  /* Lang switcher del header · hereda color del header, hover naranja. */
  --tema-idiomas-color: currentColor;
  --tema-idiomas-hover-color: var(--sy-naranja);
  --tema-idiomas-hover-opacity: 1;
}

/* ───────────────────────────────────────────────────────────
   HEADER · logo + CTA (unlayered → gana al header.css del motor)
   ─────────────────────────────────────────────────────────── */

/* Logo del header al tamaño del prototipo (~34px) y BLANCO sobre el
   hero / banda oscura. brightness(0) → silueta negra · invert(1) →
   blanca · preserva el alpha del PNG. */
.tema-header__brand--logo img,
.tema-header__brand--logo .custom-logo {
  max-height: 34px;
  filter: brightness(0) invert(1);
}
/* Al scrollear el header pasa a marfil → el logo vuelve a su color natural. */
.tema-header.is-scrolled .tema-header__brand--logo img,
.tema-header.is-scrolled .tema-header__brand--logo .custom-logo {
  filter: none;
}

/* Header sólido fijo en páginas SIN hero oscuro (clase puesta por
   assets/js/header-state.js · port del prototipo). Marfil + blur + tinta,
   independiente del estado de scroll del motor. */
.tema-header.sy-solid {
  background: var(--tema-header-scrolled-bg);
  color: var(--tema-header-scrolled-color);
  -webkit-backdrop-filter: var(--tema-header-blur);
  backdrop-filter: var(--tema-header-blur);
}
.tema-header.sy-solid::after {
  background: var(--sy-linea);
}
.tema-header.sy-solid .tema-header__brand--logo img,
.tema-header.sy-solid .tema-header__brand--logo .custom-logo {
  filter: none;
}

/* CTA "Reservar" · glifo WhatsApp cuadrado (el header.css del motor lo
   dejaría 22×14, distorsionando el viewBox 24×24 del glifo). */
.tema-header__cta-icon svg {
  width: 18px;
  height: 18px;
}

/* Idioma activo del switcher · naranja (el motor deja el activo al child). */
.tema-header__lang .tema-lang-item.is-active a {
  color: var(--sy-naranja);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER · negro premium con nodo + 4 columnas (prototipo .ft)
   ───────────────────────────────────────────────────────────
   El motor (root footer.php · `.site-footer`) ya da la estructura:
   logo centrado → hairline con nodo → grid de columnas → barra
   legal con crédito 512. Acá repintamos a fondo negro con acentos
   naranja y fijamos la grilla de 4 columnas del prototipo.
   Unlayered → gana al footer del motor sin !important.
   ═══════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--sy-negro);
  color: rgba(247, 244, 239, 0.62);
}
.site-footer__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 44px;
}

/* Brand · logo centrado, blanco sobre el negro. */
.site-footer__brand {
  text-align: center;
}
.site-footer__brand .custom-logo {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
}
.site-footer__site-title {
  color: var(--sy-marfil);
}

/* Hairline con nodo central visible (signature 512 · el prototipo lo conserva). */
.site-footer__rule {
  position: relative;
  height: 1px;
  border: 0;
  background: rgba(247, 244, 239, 0.14);
  margin: 36px auto 54px;
}
.site-footer__rule-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border: 1px solid rgba(247, 244, 239, 0.45);
  border-radius: 50%;
  background: var(--sy-negro);
}

/* Grid de 4 columnas (Explorá · Servicios · Legal · Contacto). */
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 56px;
}
.site-footer__col-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.5);
  margin: 0 0 18px;
}
.site-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.site-footer__col-list a,
.site-footer__col-list .site-footer__col-static {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.95rem;
  color: rgba(247, 244, 239, 0.66);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-premium);
}
.site-footer__col-list a:hover {
  color: var(--sy-naranja);
}

/* Divisor inferior + barra legal · 3 zonas (copyright · cookies · crédito 512). */
.site-footer__divider {
  height: 0;
  border: 0;
  border-top: 1px solid rgba(247, 244, 239, 0.12);
  background: transparent;
}
.site-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding-top: 24px;
  padding-bottom: 34px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-footer__copy {
  justify-self: start;
  margin: 0;
  color: rgba(247, 244, 239, 0.45);
}
.site-footer__cookies-toggle {
  justify-self: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: rgba(247, 244, 239, 0.45);
  transition: color var(--dur-hover) var(--ease-premium);
}
.site-footer__cookies-toggle:hover {
  color: var(--sy-naranja);
}
.site-footer__attribution {
  justify-self: end;
}
.site-footer__attribution a,
.site-footer__credit a {
  color: rgba(247, 244, 239, 0.45);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-premium);
}
.site-footer__attribution a:hover,
.site-footer__credit a:hover {
  color: var(--sy-naranja);
}

/* Responsive del footer (prototipo: 4 → 2 → 1 columnas). */
@media (max-width: 880px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .site-footer__bottom {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 12px;
  }
  .site-footer__copy,
  .site-footer__cookies-toggle,
  .site-footer__attribution {
    justify-self: start;
  }
}
@media (max-width: 520px) {
  .site-footer__inner {
    padding-inline: 26px;
  }
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}