/*
  site-footer.css
  Footer global de Bryde — componente aislado, no integrado todavía.
  Todo namespaced bajo .site-footer-global — no toca estilos globales del host.
  Variables propias (--sfg-*). --page-accent es la única variable externa
  opcional: el host la define (:root o ancestro) para tintar el detalle de
  hover; si no existe, cae al vino Bryde (#6B1F2A).
  Fuentes requeridas (ya cargadas por el host): Manrope, Playfair Display.
*/
.site-footer-global{
  --sfg-bg:#0d0d0c;
  --sfg-ink:#F5EEE1;
  --sfg-ink-muted:rgba(245,238,225,.56);
  --sfg-ink-faint:rgba(245,238,225,.38);
  --sfg-line:rgba(247,241,230,.08);
  --sfg-accent:var(--page-accent, #6B1F2A);
  --sfg-font-display:'Playfair Display',serif;
  --sfg-font-system:'Manrope',sans-serif;
  --sfg-ease:cubic-bezier(.22,.61,.36,1);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--sfg-bg);
  border-top:1px solid var(--sfg-line);
  padding:clamp(72px,9vh,120px) clamp(24px,5vw,88px) 28px;
  font-family:var(--sfg-font-system);
  color:var(--sfg-ink-muted);
}
.site-footer-global *,
.site-footer-global *::before,
.site-footer-global *::after{box-sizing:border-box}

/* ——— marca de fondo: isotipo muy tenue, recortado, no interfiere con enlaces.
   Composición distinta de .cierre-wordmark (que usa el wordmark completo, sin
   rotar, en index.html): aquí solo el isotipo, rotado y anclado esquina inf-der. ——— */
.site-footer-global .sfg-mark{position:absolute;z-index:0;right:0;bottom:0;
  width:clamp(280px,32vw,520px);height:auto;opacity:.04;pointer-events:none;
  transform:translate(6%,4%) rotate(-8deg)}
.site-footer-global .sfg-mark svg{display:block;width:100%;height:auto;fill:var(--sfg-ink)}

.site-footer-global .sfg-top,
.site-footer-global .sfg-bottom{position:relative;z-index:1}

/* ——— nivel superior ——— */
.site-footer-global .sfg-top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(40px,6vw,96px)}

.site-footer-global .sfg-brand{flex:0 0 auto}
.site-footer-global .sfg-wordmark-link{display:inline-block;line-height:0}
.site-footer-global .sfg-wordmark{width:clamp(128px,12vw,190px);height:auto;fill:var(--sfg-ink)}
.site-footer-global .sfg-wordmark-link:focus-visible{outline:2px solid var(--sfg-accent);
  outline-offset:4px;border-radius:2px}
.site-footer-global .sfg-tagline{margin:18px 0 0;max-width:360px;font-size:.9rem;
  line-height:1.6;color:var(--sfg-ink-muted)}

.site-footer-global .sfg-groups{display:flex;gap:clamp(56px,7vw,104px);flex-wrap:wrap}
.site-footer-global .sfg-group-title{margin:0 0 16px;font-family:var(--sfg-font-system);
  font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sfg-ink-faint)}
.site-footer-global .sfg-list{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:2px}
.site-footer-global .sfg-link{display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:2px 0;font-size:.94rem;font-weight:500;letter-spacing:.002em;
  color:var(--sfg-ink-muted);text-decoration:none;transition:color .3s var(--sfg-ease)}
.site-footer-global .sfg-link:hover,
.site-footer-global .sfg-link:focus-visible{color:var(--sfg-ink)}
.site-footer-global .sfg-link:focus-visible{outline:2px solid var(--sfg-accent);
  outline-offset:3px;border-radius:2px}
.site-footer-global .sfg-arrow{opacity:.36;transform:translateX(0);
  transition:opacity .3s var(--sfg-ease),transform .3s var(--sfg-ease),color .3s var(--sfg-ease)}
.site-footer-global .sfg-link:hover .sfg-arrow,
.site-footer-global .sfg-link:focus-visible .sfg-arrow{opacity:1;color:var(--sfg-accent);
  transform:translateX(4px)}

/* ——— nivel inferior ——— */
.site-footer-global .sfg-bottom{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;margin-top:clamp(48px,7vh,72px);padding-top:20px;
  border-top:1px solid var(--sfg-line);font-size:.78rem;letter-spacing:.01em;
  color:var(--sfg-ink-faint)}
.site-footer-global .sfg-legal{display:flex;align-items:center;gap:10px}
.site-footer-global .sfg-legal-link{display:inline-flex;align-items:center;padding:11px 0;
  margin:-11px 0;color:var(--sfg-ink-faint);text-decoration:none;
  transition:color .3s var(--sfg-ease)}
.site-footer-global .sfg-legal-link:hover,
.site-footer-global .sfg-legal-link:focus-visible{color:var(--sfg-ink)}
.site-footer-global .sfg-legal-link:focus-visible{outline:2px solid var(--sfg-accent);
  outline-offset:3px;border-radius:2px}
.site-footer-global .sfg-sep{color:rgba(247,241,230,.22)}

/* ——— reveal de entrada: opacity + translateY, stagger mínimo por grupo ——— */
.site-footer-global [data-sfg-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--sfg-ease),transform .7s var(--sfg-ease)}
.site-footer-global [data-sfg-reveal].sfg-visible{opacity:1;transform:none}
.site-footer-global [data-sfg-reveal][data-sfg-delay="1"]{transition-delay:.08s}
.site-footer-global [data-sfg-reveal][data-sfg-delay="2"]{transition-delay:.16s}
.site-footer-global [data-sfg-reveal][data-sfg-delay="3"]{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .site-footer-global [data-sfg-reveal]{opacity:1;transform:none;transition:none}
}

/* ——— mobile: apilado, alineado a la izquierda (nunca centrado), líneas finas
   en vez de cards para separar grupos ——— */
@media (max-width:820px){
  .site-footer-global{padding:clamp(56px,9vh,88px) 7vw 24px}
  .site-footer-global .sfg-top{flex-direction:column;align-items:flex-start;
    gap:clamp(36px,6vh,44px)}
  .site-footer-global .sfg-tagline{max-width:320px}
  .site-footer-global .sfg-groups{flex-direction:column;gap:0;width:100%}
  .site-footer-global .sfg-group{padding-top:clamp(24px,4.5vh,30px);
    border-top:1px solid var(--sfg-line)}
  .site-footer-global .sfg-group + .sfg-group{margin-top:clamp(24px,4.5vh,30px)}
  .site-footer-global .sfg-bottom{flex-direction:column;align-items:flex-start;gap:6px;
    margin-top:clamp(40px,6vh,52px)}
  .site-footer-global .sfg-mark{width:clamp(200px,58vw,300px);opacity:.038}
}