/* ==========================================================================
   CIERRE FINAL HOME — FOOTER OBSIDIAN V1
   CURATED (warm-white) -> rampa fisica -> cierre visual OBSIDIAN -> footer.
   Scroll natural: sin sticky, sin pelicula. footer.js solo escribe los
   reveals del cierre (funciones puras de posicion) y el tono del header.

   NO modifica curated.*, beyond.*, catalog.*, hero.*, app.js, style.css ni
   header.*. De fuera consume --site-container y --cat-col-gap (reticula del
   sitio). Tipografia: la misma pila del sitio, sin fuentes nuevas.
   ========================================================================== */

.ob-footer{
  --ob-bg:#080808;
  --ob-ink:#F4F2ED;
  --ob-muted:#8A8A86;          /* 5.7:1 sobre #080808 */
  --ob-champagne:#C8B89A;
  --ob-line:rgba(244,242,237,.14);
  --ob-font:'Manrope', 'Segoe UI Variable Display', 'Segoe UI',
            system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ob-gap:var(--cat-col-gap, clamp(24px, 3vw, 56px));

  position:relative;
  container-type:inline-size;   /* 100cqw = ancho real (sin barra de scroll) */
  overflow-x:clip;
  background:var(--ob-bg);
  color:var(--ob-ink);
  font-family:var(--ob-font);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}

/* ==========================================================================
   1. TRANSICION CURATED -> OBSIDIAN
   Rampa fisica: empieza exactamente en #F4F2ED (el ultimo pixel de CURATED)
   y termina exactamente en #080808. Interpolada en OKLab con paradas
   smoothstep (0,.061,.216,.425,.575,.784,.939,1): sin gris sucio en el medio
   y sin linea de arranque ni de llegada. El scroll la recorre: reversible
   por construccion, sin JS.
   ========================================================================== */
.ob-ramp{
  height:38vh;
  height:38svh;
  pointer-events:none;
  background:linear-gradient(to bottom, #F4F2ED, #080808);
  background:linear-gradient(in oklab to bottom,
    #F4F2ED 0%,
    color-mix(in oklab, #080808 6.1%, #F4F2ED) 15%,
    color-mix(in oklab, #080808 21.6%, #F4F2ED) 30%,
    color-mix(in oklab, #080808 42.5%, #F4F2ED) 45%,
    color-mix(in oklab, #080808 57.5%, #F4F2ED) 55%,
    color-mix(in oklab, #080808 78.4%, #F4F2ED) 70%,
    color-mix(in oklab, #080808 93.9%, #F4F2ED) 85%,
    #080808 100%);
}

.ob-wrap{
  width:var(--site-container, min(92vw, 1680px));
  margin:0 auto;
}

/* ==========================================================================
   2. CIERRE VISUAL — una ultima imagen, una ultima declaracion
   Texto a la izquierda; la fotografia a la derecha, sangrando hasta el borde
   derecho, con sus bordes izquierdo, superior e inferior fundidos con el
   obsidian (mascara estatica): integrada, no una card.
   ========================================================================== */
.ob-close{
  position:relative;
  padding:8vh 0 7vh;
  padding:clamp(56px, 8svh, 104px) 0 clamp(48px, 7svh, 88px);
}
.ob-close-text{
  position:relative;
  z-index:1;
  width:50%;
}

.ob-rule{
  display:block;
  height:1px;
  background:var(--ob-champagne);
  transform-origin:left center;
}

.ob-eyebrow{
  display:flex;
  align-items:center;
  gap:clamp(20px, 1.8vw, 28px);
  margin:0 0 clamp(28px, 5svh, 56px);
  font-size:clamp(11px, .85vw, 14px);
  font-weight:500;
  line-height:1;
  letter-spacing:.34em;
  text-transform:uppercase;
}
.ob-eyebrow-text{display:inline-block}
.ob-eyebrow .ob-rule{width:clamp(40px, 3.8vw, 64px); opacity:.7}

.ob-kicker{
  margin:0 0 clamp(20px, 3.6svh, 40px);
  font-size:clamp(10px, .78vw, 12px);
  font-weight:500;
  line-height:2;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ob-muted);
}

.ob-title{
  margin:0;
  font-size:clamp(44px, 4.3vw, 80px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.005em;
  text-transform:uppercase;
}
.ob-line{display:block}
/* Champagne solo en la segunda declaracion, como en el boceto aprobado. */
.ob-line--accent{color:var(--ob-champagne)}

.ob-close-shot{
  position:absolute;
  top:0;
  bottom:0;
  left:42%;
  right:0;
  margin:0;
  overflow:hidden;
  -webkit-mask-image:
    linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .104) 5.2%, rgb(0 0 0 / .352) 10.4%, rgb(0 0 0 / .648) 15.6%, rgb(0 0 0 / .896) 20.8%, #000 26%),
    linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .352) 5.6%, rgb(0 0 0 / .896) 11.2%, #000 14%, #000 90%, rgb(0 0 0 / .648) 94%, rgb(0 0 0 / 0) 100%);
          mask-image:
    linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .104) 5.2%, rgb(0 0 0 / .352) 10.4%, rgb(0 0 0 / .648) 15.6%, rgb(0 0 0 / .896) 20.8%, #000 26%),
    linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .352) 5.6%, rgb(0 0 0 / .896) 11.2%, #000 14%, #000 90%, rgb(0 0 0 / .648) 94%, rgb(0 0 0 / 0) 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.ob-close-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* clasico, cuadro y firma OBSIDIAN dentro; el recorte cae en alfombra/techo */
  object-position:50% 40%;
  transform-origin:60% 50%;
  user-select:none;
}
@supports (width:1cqw){
  .ob-close-shot{right:calc((var(--site-container, min(92vw, 1680px)) - 100cqw) / 2)}
}

/* ==========================================================================
   3. FOOTER — navegacion comercial
   Sin datos comerciales inventados: telefono, email y ubicacion son
   placeholders visibles, igual que [WORDMARK] en el header.
   ========================================================================== */
.ob-nav{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr);
  column-gap:var(--ob-gap);
  padding:clamp(40px, 6svh, 72px) 0;
  border-top:1px solid var(--ob-line);
}
.ob-col-title{
  margin:0;
  font-size:clamp(11px, .85vw, 13px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.ob-col .ob-rule{width:32px; margin:16px 0 22px; opacity:.75}
.ob-col ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  row-gap:clamp(8px, 1.2svh, 12px);
}
.ob-link{
  appearance:none;
  border:0;
  background:none;
  margin:0;
  padding:0;
  font:inherit;
  font-size:clamp(13px, 1vw, 15px);
  line-height:1.5;
  text-align:left;
  color:rgba(244,242,237,.78);
  cursor:pointer;
  transition:color .2s ease;
}
.ob-link:hover{color:var(--ob-ink)}
.ob-link:focus-visible,
.ob-cta:focus-visible,
.ob-icon:focus-visible{outline:1px solid var(--ob-champagne); outline-offset:4px}

.ob-col--contact{
  border-left:1px solid var(--ob-line);
  padding-left:var(--ob-gap);
}
.ob-contact-text{
  margin:0 0 22px;
  font-size:clamp(13px, 1vw, 15px);
  line-height:1.6;
  color:var(--ob-muted);
}
.ob-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  max-width:320px;
  min-height:48px;
  padding:0 20px;
  border:1px solid rgba(200,184,154,.7);
  background:none;
  color:var(--ob-ink);
  font:inherit;
  font-size:clamp(11px, .8vw, 12px);
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease;
}
.ob-cta:hover{border-color:var(--ob-champagne); background:rgba(200,184,154,.06)}
.ob-col .ob-contact-list{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  row-gap:12px;
}
.ob-contact-list li{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:clamp(13px, 1vw, 15px);
  color:rgba(244,242,237,.62);
}
.ob-contact-list svg{width:16px; height:16px; flex:0 0 auto; color:var(--ob-champagne)}

/* ---- barra inferior ---- */
.ob-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:clamp(24px, 4svh, 40px) 0 clamp(28px, 5svh, 48px);
  border-top:1px solid var(--ob-line);
}
.ob-sign{display:flex; align-items:center; gap:clamp(16px, 1.6vw, 28px)}
.ob-sign-mark{
  font-size:clamp(12px, .95vw, 15px);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
}
.ob-sign .ob-rule{width:clamp(36px, 3vw, 52px); opacity:.7}
.ob-sign-tag{
  font-size:clamp(9px, .68vw, 11px);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ob-muted);
}
.ob-meta{display:flex; align-items:center; gap:clamp(18px, 2vw, 32px)}
.ob-social,
.ob-legal{list-style:none; margin:0; padding:0; display:flex; align-items:center}
.ob-social{gap:clamp(10px, 1vw, 16px)}
.ob-legal{gap:clamp(16px, 1.6vw, 26px)}
.ob-icon{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(244,242,237,.78);
  cursor:pointer;
  transition:color .2s ease;
}
.ob-icon svg{width:18px; height:18px}
.ob-icon:hover{color:var(--ob-ink)}
.ob-sep{display:block; width:1px; height:28px; background:var(--ob-line)}
.ob-legal .ob-link,
.ob-copy{font-size:clamp(11px, .8vw, 12px); color:var(--ob-muted)}
.ob-copy{margin:0; letter-spacing:.02em}

/* ==========================================================================
   4. HEADER SOBRE EL CIERRE
   footer.js marca html[data-footer-tone] SOLO mientras la banda del header
   esta sobre el footer: "light" en la parte clara de la rampa, "dark" en el
   resto. Mientras exista, manda sobre el atributo de CURATED (este archivo
   carga despues: misma especificidad, gana). Solo color.
   ========================================================================== */
html[data-footer-tone="dark"] .site-wordmark,
html[data-footer-tone="dark"] .site-nav,
html[data-footer-tone="dark"] .site-aux{
  --hdr-ink:#F4F2ED;
  --hdr-muted:#8A8A86;
}
html[data-footer-tone="dark"] .site-menu:hover{color:#fff}
html[data-footer-tone="light"] .site-wordmark,
html[data-footer-tone="light"] .site-nav,
html[data-footer-tone="light"] .site-aux{
  --hdr-ink:#080808;
  --hdr-muted:#6B6862;
}
html[data-footer-tone="light"] .site-menu:hover{color:#000}

/* ==========================================================================
   5. PROTECCION ESTRUCTURAL (mobile NO disenado todavia)
   Solo evita solapes, cortes y overflow por debajo del desktop.
   ========================================================================== */
@media (max-width:1100px){
  .ob-nav{grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:40px}
  .ob-col--contact{grid-column:span 2}
  .ob-bottom,
  .ob-meta{flex-wrap:wrap}
}
@media (max-width:760px){
  .ob-close-text{width:100%}
  .ob-close-shot{position:relative; left:auto; right:auto; height:56vw; margin-top:40px}
  .ob-nav{grid-template-columns:minmax(0, 1fr)}
  .ob-col--contact{grid-column:auto; border-left:0; padding-left:0}
}

/* ==========================================================================
   6. REDUCED MOTION: todo visible (footer.js no escribe reveals).
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .ob-link, .ob-cta, .ob-icon{transition:none}
}

/* ==========================================================================
   7. DEBUG — solo con #debug. Arriba a la izquierda, bajo la banda del header.
   ========================================================================== */
#footer-debug{
  position:fixed;
  left:14px;
  top:84px;
  z-index:9999;
  width:220px;
  padding:10px 12px;
  background:rgba(8,8,8,.86);
  border:1px solid #2a2a2a;
  color:#F4F2ED;
  font:11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing:.02em;
  pointer-events:none;
  white-space:pre;
}