/* ============================================================================
   TIPOGRAFÍA · Bricolage Grotesque + Public Sans + DM Mono, self-hosted.
   Las tres las pide el MANUAL DE MARCA de la DG (sandybrown-butterfly-771269
   .hostingersite.com, "IDEA — Sistema de diseño"). Las tres son SIL OFL.
   ⛔ CERO Google Fonts: los archivos están en /fuentes/, subseteados a latin.
   Reemplazan a Aspekta VF + Commit Mono VF, que eran PROVISIONALES a la espera
   de esta entrega. Los .woff2 viejos se conservan un ciclo por si hay que volver.

   ⚠️ Bricolage trae el eje `opsz` (12..96) además de `wght` (200..800) y por eso
   pesa 77 KB. Se deja variable A PROPÓSITO: este sitio usa la display desde 14 px
   (nav) hasta 300 px (el wordmark), que es justo donde el optical sizing paga.
   Fijar opsz ahorra 46% (41 KB) si alguna vez hace falta: ver marca/README.md.

   ⛔ Los números de los fallbacks están MEDIDOS con
      python3 fuentes/font-metrics.py <archivo> --fallback <Arial|Menlo>
   sobre estos mismos woff2. No se copian a ojo, y se regeneran si cambia un archivo.
   ========================================================================== */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("/fuentes/BricolageGrotesqueVF-latin.woff2") format("woff2-variations");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("/fuentes/PublicSansVF-latin.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DM Mono";
  src:url("/fuentes/DMMono-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DM Mono";
  src:url("/fuentes/DMMono-500-latin.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* Caras de respaldo con métricas calibradas: sin esto el texto SALTA cuando la
   fuente termina de cargar. Cada bloque lleva las medidas reales del archivo. */

/* Bricolage Grotesque (upem 1000 · asc 930 · desc 270 · gap 0 · x-height 528)
   sobre Arial (upem 2048 · x-height 1062) */
@font-face{
  font-family:"Bricolage Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  size-adjust:101.82%; ascent-override:91.34%; descent-override:26.52%; line-gap-override:0%;
}
/* Public Sans (upem 2000 · asc 1900 · desc 450 · gap 0 · x-height 1034)
   sobre Arial (upem 2048 · x-height 1062) */
@font-face{
  font-family:"Public Sans Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  size-adjust:99.70%; ascent-override:95.29%; descent-override:22.57%; line-gap-override:0%;
}
/* DM Mono (upem 1000 · asc 992 · desc 310 · gap 0 · x-height 496)
   sobre Menlo (upem 2048 · x-height 1120) */
@font-face{
  font-family:"DM Mono Fallback";
  src:local("Menlo"),local("Consolas"),local("DejaVu Sans Mono");
  size-adjust:90.70%; ascent-override:109.38%; descent-override:34.18%; line-gap-override:0%;
}

/* IDEA · dirección visual — tokens */
:root{
  --platinum:#FAF5E9;          /* HUESO del manual: fondo y superficies suaves (antes #F1F0F4) */
  --warm:#FFFCFC;              /* BLANCO CÁLIDO del manual: fondo de página (antes #F4F2ED) */
  --carbon:#1E1E1E;            /* tipografía                        */
  --indigo:#3B60E4;            /* lo que se puede tocar             */
  --brick:#D00000;             /* énfasis, una vez por pantalla     */
  --crema:#D4CDBC;             /* el fondo real de las esculturas   */
  --vivo:#CEECAC;              /* ⭐ el verde que le gusta a Valentino.
                                  UN rol y UNO solo: "el canal está vivo".
                                  ⛔ No pinta fondos, ni texto, ni bordes,
                                  ni el pie: sale UNA vez por sitio. Fue
                                  ese uso disperso —pie entero + punto +
                                  línea + índice del menú— lo que lo hacía
                                  ruido, no el color. Va SIEMPRE sobre
                                  Carbon: sobre Platinum da 1,2 y no se ve. */
  --n2:#B4B1BE; --n3:#86838F; --n4:#56545E;
  /* Las tres familias del manual. --display es NUEVA: antes todo heredaba --sans.
     ⛔ El manual se ciñe a una tríada de pesos, sin grosores intermedios:
        300–400 cuerpo y "build" · 500–600 nav, CTA y subtítulos
        700–800 "IDEA", números de práctica y titulares de portada.        */
  --display:"Bricolage Grotesque","Bricolage Fallback",Arial,sans-serif;
  --sans:"Public Sans","Public Sans Fallback",Arial,sans-serif;
  --mono:"DM Mono","DM Mono Fallback",Menlo,monospace;
  --m:clamp(20px,5vw,72px);
}
/* ═══ EL LOCKUP «build IDEA» ══════════════════════════════════════════════
   Reglas duras del manual, sección "Anatomía y jerarquía de marca":
   proporción 1 : 1.72 sobre LÍNEA BASE COMÚN.
   ⛔ Nunca items-center — las dos palabras tienen cajas distintas y vibran.
   ⛔ Nunca "BUILD IDEA" ni "build idea": minúscula + versal sostenida.        */
.lockup{display:inline-flex;align-items:baseline;gap:.14em;line-height:1;
        font-family:var(--display)}
.lockup .b{font-weight:300;font-size:.58em;text-transform:lowercase;
           letter-spacing:-.02em;opacity:.9}
.lockup .i{font-weight:800;font-size:1em;text-transform:uppercase;
           letter-spacing:-.035em}

*{margin:0;padding:0;box-sizing:border-box}
/* ⚠️ MEDIDO el 15/9: el botón de WhatsApp tenía `hidden` en el markup y SE VEÍA
   igual. El atributo `hidden` sólo trae un `display:none` de la hoja del
   navegador, y cualquier regla de autor con `display` le gana: `.z4-wa` declara
   `display:flex` y lo pisaba. Quedaba en el sitio un botón muerto —todavía no
   tenemos el número de Valentino— justo en la sección de contacto. La regla va
   acá arriba para que valga en todo el sitio, no sólo en ese botón. */
[hidden]{display:none !important}
html{background:var(--platinum);-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);color:var(--carbon);background:var(--platinum);overflow-x:hidden}
img{display:block;max-width:100%}

/* tipografía */
.mega{font-family:var(--display);font-weight:200;font-size:clamp(52px,13vw,190px);line-height:.88;letter-spacing:-.045em}
.h2{font-family:var(--display);font-weight:300;font-size:clamp(28px,5vw,64px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.lead{font-weight:300;font-size:clamp(18px,2.2vw,32px);line-height:1.34;letter-spacing:-.015em;max-width:20ch}
p{font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:var(--n4);max-width:62ch}
/* ⚠️ CONTRASTE MEDIDO (27/8), no estimado. A 11 px una etiqueta es texto
   CHICO: necesita 4,5:1, no 3:1.
   · n3 #86838F sobre Platinum = 3,27 ❌  → va n4 #56545E = 6,64 ✅
   · n3 sobre Carbon = 4,49 ❌ (por dos centésimas) → va n2 #B4B1BE = 7,92 ✅
   · el Índigo sobre Carbon = 3,16 ❌ ⇒ ⛔ el acento NO se usa sobre oscuro. */
/* ⌨️ 15/9 — EL RÓTULO SALE DEL MONO. La "tipografía horrorosa" que Valentino
   marcó [31:33] resultó ser, en las seis capturas, siempre la misma cosa: la
   mono usada para PALABRAS. Queda reservada a CIFRAS (el reloj, el año, la
   numeración). El rótulo conserva tamaño, tracking, caja y color —así la
   jerarquía no se mueve— y cambia de familia: sans en 500, la misma voz que
   .z2-marcas__rotulo, .z2-social__rotulo, .z4-pie__rotulo y el botón de
   sonido. ⛔ Ninguna fuente nueva: Public Sans ya está cargada. */
.tag{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--n4)}
.tag--ind{color:var(--indigo)}          /* 4,65 sobre Platinum ✅ */
b{font-weight:500;color:var(--carbon)}
.w{display:inline-block;will-change:filter,opacity}

section{padding:clamp(72px,12vh,150px) var(--m);position:relative}
.dark{background:var(--carbon);color:var(--platinum)}
.dark p{color:var(--n2)}
.dark .tag{color:var(--n2)}
.dark .tag--ind{color:var(--n2)}        /* el índigo no llega sobre carbón */
.rule{height:1px;background:currentColor;opacity:.2;margin:28px 0}

/* imagen con placeholder de color (medido en betc.com) */
.ph{position:relative;overflow:hidden;background:var(--crema)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
        opacity:0;transition:opacity 1s ease-in}
.ph img.is-loaded{opacity:1}

/* apertura */
.hero{min-height:100svh;display:grid;grid-template-columns:1fr;align-content:center;gap:40px;
      background:var(--warm)}
.hero__art{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hero__art .ph{aspect-ratio:3/2}

/* punto de color junto al titular (medido en betc.com) */
.dot{display:inline-block;width:clamp(22px,3.4vw,60px);aspect-ratio:1;border-radius:50%;
     background:var(--indigo);transform:scale(0);vertical-align:middle;margin-right:.22em;
     transition:transform .6s cubic-bezier(.45,.05,.55,.95)}
.dot.is-in{transform:scale(1)}

/* el cubo */
.cubo-wrap{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:900px){.cubo-wrap{grid-template-columns:1fr 1fr;gap:80px}}
.escena{perspective:1400px;display:grid;place-items:center;min-height:min(70vh,520px)}
.cubo{position:relative;width:var(--s);height:var(--s);--s:min(46vw,320px);
      transform-style:preserve-3d;animation:girar 24s linear infinite}
.cara{position:absolute;inset:0;overflow:hidden;background:var(--carbon);
      box-shadow:0 0 0 1px rgba(255,255,255,.09) inset}
.cara img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease-in}
.cara img.is-loaded{opacity:1}
.cara:nth-child(1){transform:rotateY(0deg)   translateZ(calc(var(--s)/2))}
.cara:nth-child(2){transform:rotateY(90deg)  translateZ(calc(var(--s)/2))}
.cara:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cara:nth-child(4){transform:rotateY(270deg) translateZ(calc(var(--s)/2))}
.cara:nth-child(5){transform:rotateX(90deg)  translateZ(calc(var(--s)/2))}
.cara:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
@keyframes girar{from{transform:rotateX(-14deg) rotateY(0)}to{transform:rotateX(-14deg) rotateY(360deg)}}

/* ⛔ Acá vivía el muro de clientes rotativo de la maqueta (.muro/.celda con
   .is-visible). No tiene markup desde que el muro se reescribió con prefijo de
   zona, y el 15/9 el muro pasó a ser la cinta de marcas de Qué hacemos, que
   corre por CSS: se va junto con su rotador de engine.js. */

/* A/B de blancos */
.ab{display:grid;grid-template-columns:1fr;gap:2px}
@media(min-width:760px){.ab{grid-template-columns:1fr 1fr}}
.ab__lado{padding:clamp(24px,4vw,56px)}
.ab__frio{background:var(--platinum)} .ab__calido{background:var(--warm)}
.ab__lado .ph{aspect-ratio:16/10;margin-top:22px}

.ficha{display:grid;grid-template-columns:1fr;gap:0}
.ficha__fila{display:grid;grid-template-columns:1fr;gap:6px;padding:16px 0;
             border-top:1px solid rgba(134,131,143,.28)}
@media(min-width:760px){.ficha__fila{grid-template-columns:220px 1fr 190px;gap:24px;align-items:baseline}}
.ficha__dato{font-family:var(--mono);font-size:12px;color:var(--indigo);font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .cubo{animation:none;transform:rotateX(-14deg) rotateY(-28deg)}
  .ph img,.cara img{transition:none}
  .dot{transition:none;transform:scale(1)}
}