/* ==========================================================================
   SECCION 04 — CURATED / OBSIDIAN STANDARD (V1)
   Editorial warm-white despues del impacto de Beyond. Scroll natural: sin
   sticky, sin pin. Todo movimiento lo escribe curated.js como funcion pura de
   la posicion de scroll (reversible por construccion).

   Este archivo NO modifica beyond.*, catalog.*, hero.*, app.js, style.css ni
   header.*. De fuera consume --site-container y --cat-col-gap (la reticula
   del sitio). Ademas:
     - pinta la SALIDA de Beyond (.beyond-stage::after), igual que
       catalog.css pinta la salida del Hero;
     - cambia solo el COLOR del header global cuando curated.js marca
       html[data-surface="light"].
   Tipografia: Manrope se declara SOLO dentro de .curated. No hay @font-face
   (no existe una Manrope local): hoy cae al mismo fallback que el resto.
   ========================================================================== */

.curated{
  /* Paleta de la seccion. Scopeada: nada de esto vive en :root. */
  --curated-bg:#F4F2ED;
  --curated-ink:#080808;
  --curated-muted:#6B6862;          /* copy pequeno: 4.95:1 sobre el fondo */
  --curated-champagne:#C8B89A;      /* solo numerales: firma, no texto */
  --curated-rule:rgba(8,8,8,.42);
  --curated-rule-soft:rgba(8,8,8,.16);
  --curated-font:'Manrope', 'Segoe UI Variable Display', 'Segoe UI',
                 system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --curated-gap:var(--cat-col-gap, clamp(24px, 3vw, 56px));
  /* V2: respiracion superior. IMAGEN5 sube hasta el tope de la seccion
     atravesando este padding, asi que no queda una franja crema vacia. */
  --curated-pad-top:5svh;

  position:relative;
  /* 100cqw = ancho real de la seccion (sin barra de scroll): permite que el
     cierre sangre hasta el borde derecho sin desbordar la pagina. */
  container-type:inline-size;
  overflow-x:clip;
  background:var(--curated-bg);
  color:var(--curated-ink);
  font-family:var(--curated-font);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  padding:5vh 0 4vh;
  padding:var(--curated-pad-top) 0 4svh;
}

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

/* Linea fina: se dibuja con scaleX desde la izquierda (curated.js). */
.curated-rule{
  display:block;
  height:1px;
  background:var(--curated-rule);
  transform-origin:left center;
}

/* ==========================================================================
   1. APERTURA — OBSIDIAN STANDARD / SELECCIONADOS PARA LO EXCEPCIONAL.
   V2: texto a la izquierda (eyebrow, titular, copy, microcopy) e IMAGEN5 a
   la derecha, sangrando hasta el borde derecho y el tope de la seccion. La
   foto no suma altura: la marca el bloque de texto.
   ========================================================================== */
.curated-intro{
  position:relative;
  margin-bottom:clamp(32px, 4svh, 56px);
}
.curated-intro-text{
  position:relative;
  z-index:1;
  width:44%;
}

.curated-eyebrow{
  display:flex;
  align-items:center;
  gap:clamp(20px, 1.8vw, 28px);
  margin:0 0 clamp(22px, 3.6svh, 44px);
  font-size:clamp(10px, .78vw, 12px);
  font-weight:500;
  line-height:1;
  letter-spacing:.34em;
  text-transform:uppercase;
}
.curated-eyebrow-text{display:inline-block}
.curated-eyebrow .curated-rule{width:clamp(40px, 3.4vw, 64px)}

/* V2: "SELECCIONADOS" (13 letras) debe caber en la columna de texto sin
   tocar la foto: escala algo menor que la V1. */
.curated-title{
  margin:0;
  font-size:clamp(50px, 4.6vw, 86px);
  font-weight:300;
  line-height:.96;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.curated-line{display:block}

.curated-aside{margin-top:clamp(20px, 3svh, 32px)}
.curated-lede{
  margin:0;
  font-size:clamp(16px, 1.25vw, 20px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:.005em;
}
/* Microcopy champagne (V2, indicado expresamente). Ver contraste en el
   reporte: sobre #F4F2ED el champagne es decorativo, no texto de lectura. */
.curated-motto{
  margin:clamp(22px, 3.5svh, 40px) 0 0;
  font-size:clamp(10px, .74vw, 12px);
  font-weight:500;
  line-height:2;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--curated-champagne);
}

/* ---- IMAGEN5: fotografia principal ----
   Absoluta dentro de la apertura: desde el 46% de la reticula hasta el borde
   derecho de la seccion, y desde el tope de la seccion (atraviesa el padding)
   hasta el pie del bloque de texto. Sus bordes izquierdo y superior se
   funden con el crema (mascara estatica, rampa smoothstep): integrada con el
   fondo, no pegada. El borde inferior queda neto, como en el boceto. */
.curated-principal{
  position:absolute;
  top:calc(-1 * var(--curated-pad-top));
  bottom:0;
  left:46%;
  right:0;
  margin:0;
  overflow:hidden;
  -webkit-mask-image:
    linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .104) 4.4%, rgb(0 0 0 / .352) 8.8%, rgb(0 0 0 / .648) 13.2%, rgb(0 0 0 / .896) 17.6%, #000 22%),
    linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .104) 3.2%, rgb(0 0 0 / .352) 6.4%, rgb(0 0 0 / .648) 9.6%, rgb(0 0 0 / .896) 12.8%, #000 16%);
          mask-image:
    linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .104) 4.4%, rgb(0 0 0 / .352) 8.8%, rgb(0 0 0 / .648) 13.2%, rgb(0 0 0 / .896) 17.6%, #000 22%),
    linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .104) 3.2%, rgb(0 0 0 / .352) 6.4%, rgb(0 0 0 / .648) 9.6%, rgb(0 0 0 / .896) 12.8%, #000 16%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.curated-principal img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* conserva retrovisor, carroceria y sol: el recorte cae sobre todo en el
     cielo de la izquierda, que ademas esta en la zona fundida */
  object-position:70% 50%;
  user-select:none;
}
/* Microcopy sobre la carroceria (unico texto sobre fotografia). */
.curated-principal-caption{
  position:absolute;
  right:0;
  bottom:clamp(24px, 7%, 56px);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:clamp(10px, .74vw, 12px);
  font-weight:500;
  line-height:2;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#F4F2ED;
}
/* el tracking deja aire tras la ultima letra: se compensa para alinear */
.curated-principal-caption span:not(.curated-rule){margin-right:-.34em}
.curated-principal-caption .curated-rule{
  width:clamp(36px, 3vw, 52px);
  margin-top:clamp(10px, 1.4svh, 16px);
  background:rgba(244,242,237,.55);
  transform-origin:right center;
}
@supports (width:1cqw){
  .curated-principal{right:calc((var(--site-container, min(92vw, 1680px)) - 100cqw) / 2)}
  .curated-principal-caption{right:calc((100cqw - var(--site-container, min(92vw, 1680px))) / 2)}
}

/* ==========================================================================
   2. 01 SOURCING / 02 INSPECTION / 03 DELIVERY
   No son cards: sin fondo, sin borde, sin radio, sin sombra, sin hover.
   El marco (figure) es el que se abre con clip-path; la foto no se mueve.
   ========================================================================== */
.curated-pillars{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:var(--curated-gap);
  align-items:start;
}
.curated-pillar{margin:0}

/* V2: 11:10 (antes 9:10). Mas cerca del boceto y ~18% menos alto; las
   tres fotos siguen dominando la fila. */
.curated-shot{
  margin:0;
  aspect-ratio:11 / 10;
  overflow:hidden;
}
.curated-shot img,
.curated-closing-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  user-select:none;
}

.curated-pillar-text{padding-top:clamp(16px, 2svh, 24px)}
.curated-num{
  display:block;
  font-size:clamp(20px, 1.6vw, 28px);
  font-weight:300;
  line-height:1;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:var(--curated-champagne);
}
.curated-pillar .curated-rule{
  width:100%;
  margin:clamp(12px, 1.4svh, 16px) 0 clamp(14px, 1.8svh, 20px);
  background:var(--curated-rule-soft);
}
.curated-pillar-title{
  margin:0 0 clamp(10px, 1.3svh, 14px);
  font-size:clamp(12px, .95vw, 15px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.curated-pillar-copy{
  margin:0;
  font-size:clamp(14px, 1.05vw, 17px);
  line-height:1.55;
  color:var(--curated-muted);
}

/* ==========================================================================
   3. CIERRE — IMAGEN 4
   Texto en la columna 1; la fotografia ocupa las columnas 2-3 y su caja
   final sangra hasta el borde derecho de la seccion (2:1 nativo, sin
   recorte). curated.js arranca con la ventana recortada a la reticula
   (contenida, ~2.2:1) y la abre hasta esa caja: gana espacio, sin zoom.
   ========================================================================== */
.curated-closing{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:var(--curated-gap);
  align-items:center;
  margin-top:clamp(44px, 6svh, 80px);
}
.curated-closing-text{grid-column:1}
.curated-closing-title{
  margin:0;
  font-size:clamp(14px, 1.25vw, 20px);
  font-weight:400;
  line-height:1.75;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.curated-closing-title span{display:block}
.curated-closing-text .curated-rule{
  width:clamp(40px, 3.4vw, 64px);
  margin:clamp(28px, 4.5svh, 52px) 0;
}
.curated-closing-copy{
  margin:0;
  font-size:clamp(14px, 1.05vw, 17px);
  line-height:1.6;
  color:var(--curated-muted);
}
.curated-closing-shot{
  grid-column:2 / 4;
  margin:0;
  aspect-ratio:2 / 1;
  overflow:hidden;
}
/* Sangre derecha: el margen negativo es exactamente el hueco entre el borde
   de la reticula y el borde de la seccion. Sin soporte de cqw: contenida. */
@supports (width:1cqw){
  .curated-closing-shot{
    margin-right:calc((var(--site-container, min(92vw, 1680px)) - 100cqw) / 2);
  }
}

.curated-signature{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:clamp(16px, 1.6vw, 24px);
  margin:clamp(18px, 3svh, 36px) 0 0;
  font-size:clamp(9px, .68vw, 11px);
  font-weight:500;
  line-height:1;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--curated-muted);
}
.curated-signature .curated-rule{width:clamp(32px, 2.8vw, 48px)}

/* ==========================================================================
   4. TRANSICION BEYOND -> CURATED (salida de Beyond)
   Franja pegada al borde INFERIOR del stage de Beyond: transparente arriba,
   #F4F2ED abajo. Su ultima fila es SIEMPRE crema (sin rampa de opacidad):
   lo que crece es su LONGITUD, con scaleY desde abajo. curated.js escribe
   --curated-exit (0..1) solo cuando Beyond se libera (despues de q = 1);
   mientras el sticky esta clavado vale 0 y la franja no existe.
   bottom:-4px: la franja sobresale por debajo (overflow hidden del stage la
   recorta) y ninguna fila fisica queda sin cubrir (sin seam).
   45svh: arriba queda el 55% del stage, donde vive el texto de Beyond.
   Perfil alfa = smoothstep(t)^1.5: arranque muy largo y suave.
   ========================================================================== */
.beyond-stage::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:45vh;
  height:45svh;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(244,242,237,0) 0%,
    rgba(244,242,237,.015) 15%,
    rgba(244,242,237,.100) 30%,
    rgba(244,242,237,.277) 45%,
    rgba(244,242,237,.522) 60%,
    rgba(244,242,237,.694) 70%,
    rgba(244,242,237,.848) 80%,
    rgba(244,242,237,.958) 90%,
    #F4F2ED 100%);
  transform-origin:50% 100%;
  transform:scaleY(var(--curated-exit, 0));
}

/* ==========================================================================
   5. HEADER SOBRE SUPERFICIE CLARA
   Solo color. Dimensiones, layout, posiciones y comportamiento hide/show
   siguen siendo de header.css / header.js. curated.js muestrea lo que hay
   detras de la banda en dos grupos y marca en <html>:
     data-surface-left="light"  -> marca
     data-surface-right="light" -> navegacion + ES / MENU
   cuando esa zona es predominantemente crema (no fotografia). Al volver a
   una superficie oscura el atributo desaparece y el header es el de siempre.
   ========================================================================== */
html[data-surface-left="light"] .site-wordmark,
html[data-surface-right="light"] .site-nav,
html[data-surface-right="light"] .site-aux{
  --hdr-ink:#080808;
  --hdr-muted:#6B6862;
}
html[data-surface-right="light"] .site-menu:hover{color:#000}

/* ==========================================================================
   6. REDUCED MOTION
   Todo visible, sin aperturas ni transforms (curated.js no escribe nada).
   Beyond no es sticky: no hay salida animada. La union se resuelve con un
   degradado estatico corto en la entrada de CURATED, dentro de su padding.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .beyond-stage::after{display:none}
  .curated::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:var(--curated-pad-top);
    pointer-events:none;
    background:linear-gradient(to bottom, #080808, rgba(8,8,8,0));
  }
}

/* ==========================================================================
   7. DEBUG — solo con #debug en la URL. Arriba a la derecha, bajo la banda
   del header, para no pisar #hero-debug ni #beyond-debug.
   ========================================================================== */
#curated-debug{
  position:fixed;
  right:14px;
  top:84px;
  z-index:9999;
  width:236px;
  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;
}