/* ===========================================================================
   Chávez Duque · Sistema de diseño — hoja global
   Tokens + tipografías auto-hospedadas (woff2 en /fonts)
   =========================================================================== */

/* --- Louize (serif editorial) ------------------------------------------- */
@font-face{font-family:'Louize';src:url('../fonts/Louize.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Louize';src:url('../fonts/Louize-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:block}
/* --- Louize Display (titulares + monograma) ------------------------------ */
@font-face{font-family:'Louize Display';src:url('../fonts/LouizeDisplay.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Louize Display';src:url('../fonts/LouizeDisplay-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:'Louize Display';src:url('../fonts/LouizeDisplay-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:block} /* solo monograma sobre fondo claro */

/* --- Sweet Sans Pro (UI / etiquetas) ------------------------------------ */
@font-face{font-family:'Sweet Sans Pro';src:url('../fonts/SweetSansPro-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Sweet Sans Pro';src:url('../fonts/SweetSansPro-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:'Sweet Sans Pro';src:url('../fonts/SweetSansPro-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Sweet Sans Pro';src:url('../fonts/SweetSansPro-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:block}

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* Color */
  --cdq-bg:#F8F6F1;          /* crema cálida   */
  --cdq-bg-dark:#121212;     /* near-black     */
  --cdq-text:#0D0D0D;        /* casi negro     */
  --cdq-muted:#6B6660;       /* apagado        */
  --cdq-accent:#0D0D0D;      /* bicromo: acento = texto */
  --cdq-border:rgba(13,13,13,.12);    /* divisoria · solo contexto claro */
  --cdq-text-inv:rgba(248,246,241,.85); /* texto sobre fondo oscuro */
  --cdq-muted-inv:rgba(248,246,241,.55); /* apagado sobre fondo oscuro */

  /* Familias */
  --cdq-font-display:'Louize Display',Georgia,serif;
  --cdq-font-serif:'Louize',Georgia,serif;
  --cdq-font-sans:'Sweet Sans Pro',system-ui,sans-serif;

  /* Escala tipográfica — CINCO roles (sitio de arte: el texto es servicio,
     la obra es el contenido). Ningún elemento usa un tamaño suelto; todo
     aplica una de estas clases.
     .t-display / .t-titulo / .t-cuerpo / .t-largo / .t-etiqueta
     Fuente: NbLM 2026-06-26 [7: 205-230] · referentes Studio Olimpo / HENI */
  /* Meseta por rango (2026-07-07) — ver cdq-design-system/styles.css para el
     razonamiento completo (verificado contra el CSS real de studioolimpo.it):
     plano ≤1024px · escala 1024→1440px · plano ≥1440px. Ajustado de los
     1440/1920px reales de Olimpo porque el ancho de referencia de este sitio
     (contenido real, no tarjetas de Design System) cae mayormente bajo esa
     franja — mismo MIN/MAX de antes, solo se comprime dónde ocurre el salto. */
  --cdq-size-display:clamp(3rem,-6.846rem + 15.385vw,7rem);    /* 48→112px · impacto máximo · nombre / hero */
  --cdq-size-titulo:clamp(2rem,-2.923rem + 7.692vw,4rem);      /* 32→64px · obra · serie · lockup */
  --cdq-size-cuerpo:clamp(1.25rem,.635rem + .962vw,1.5rem); /* 20→24px · Lead/Intro · ancla visual · ≤5 líneas */
  --cdq-size-largo:clamp(1.125rem,.817rem + .481vw,1.25rem); /* 18→20px · BASE lectura sostenida · cartas · nota artista */
  --cdq-size-etiqueta:.8125rem;                          /* 13px fijo · UI · etiquetas · uppercase · no escalar */

  --cdq-lh-display:.85;      /* @kind other */
  --cdq-lh-titulo:1.05;      /* @kind other */
  --cdq-lh-cuerpo:1.25;      /* @kind other */ /* lectura corta · 1.2–1.3 rango experto */
  --cdq-lh-largo:1.4;        /* @kind other */ /* lectura sostenida · reducido de 1.60→1.48→1.4 (2026-07-06): Louize tiene métricas generosas de por sí */
  --cdq-lh-etiqueta:1.3;     /* @kind other */
  /* título/display cuando envuelve a 2+ líneas en columna angosta (2026-07-06):
     unificado a 1.0, base recomendada para display multilínea */
  --cdq-lh-multilinea:1;     /* @kind other */

  /* Tracking — inverso al tamaño · siempre en em (relativo) · NbLM [7: 57, 154]
     Texto inverso (crema sobre oscuro) en cuerpo/largo: añadir +.02em en componente */
  --cdq-ls-display:-.015em;  /* reducido de -.03em: a 7rem el tracking negativo agresivo toca letras */
  --cdq-ls-titulo:-.01em;    /* 0/−.01em rango · solidez sin aplaste */
  --cdq-ls-cuerpo:-.01em;    /* aprieta ligeramente la serif a tamaño cuerpo */
  --cdq-ls-largo:0;          /* Louize respira con su propio espaciado en lectura sostenida */
  --cdq-ls-etiqueta:.065em;  /* +.05/+.1em rango · aire para versalitas */
  --cdq-ls-ficha:.04em;      /* etiqueta en contexto de ficha: más compacto que etiqueta estándar */

  /* Columna de texto (Anish Kapoor: --measure: 28em) */
  --cdq-measure:28em;

  /* Velocidad de micro-interacción (hover, feedback inmediato) */
  --cdq-fast:120ms; /* @kind other */
  /* Velocidad contemplativa (menú overlay, carrusel, transiciones de página) */
  --cdq-slow:350ms; /* @kind other */

  /* Escala de espaciado — sucesión de Fibonacci · cinco pasos
     Uso: padding de sección, gap entre tarjetas, márgenes de componente.
     No usar fuera de estos tokens; sin valores sueltos en componentes. */
  --cdq-space-1:8px;
  --cdq-space-2:13px;
  --cdq-space-3:21px;
  --cdq-space-4:34px;
  --cdq-space-5:55px;

  /* Radio de borde · botones transaccionales · mismo valor en todos los componentes */
  --cdq-radius:clamp(8px,2vw,12px);

  /* Espacio de manifiesto · NbLM 2026-07-01 (Santa Maria) · para afirmaciones de autoridad
     del estudio: después del título en Louize Display que opera como declaración de voz de marca */
  --cdq-space-statement:clamp(3rem,8vw,5rem);

  /* Espaciado entre secciones · tres niveles semánticos · NbLM Trama-diseño 2026-07-01
     Regla Wong: padding-block-end = padding-block-start × 1.2 (equilibrio óptico gravitatorio).
     S → unidad de sentido única (imagen + ficha)
     M → bloques de igual jerarquía dentro de una sección
     L → contraste por aislamiento: declaraciones de autoridad, cierre, antes del footer */
  --cdq-section-s:clamp(3rem,6vw,5rem);
  --cdq-section-m:clamp(4rem,8vw,7rem);
  --cdq-section-l:clamp(6rem,12vw,10rem);

  /* --- Grid del sitio · extraído del CSS real de Studio Olimpo (2026-07-06/07,
     ver cdq-design-system/styles.css y Studio-Olimpo-referente.md § Grid de sitio).
     Portado aquí solo lo que cdq/header consume: --cdq-margin (margen fluido de
     pendiente suave, no el clamp(...,5vw,...) agresivo que este bloque usaba) y
     la cadena de --cdq-column-width--1 (mancha con tope de 90rem: min(site-width,
     100vw) hace que el margen absorba el ancho extra en pantallas ultra-anchas
     en vez de que la retícula siga creciendo). */
  --cdq-margin:clamp(1rem,0.858rem + 0.71vw,1.5rem);
  --cdq-site-width:90rem;
  --cdq-gutter:.5rem;
  --cdq-column-count:12;
  --cdq-container:calc(min(var(--cdq-site-width),100vw) - var(--cdq-margin) * 2);
  --cdq-gutter-total:calc(var(--cdq-gutter) * (var(--cdq-column-count) - 1));
  --cdq-column-width--1:calc((var(--cdq-container) - var(--cdq-gutter-total)) / var(--cdq-column-count));
}

/* T-largo en móvil: measure cae de 28em al ancho real del viewport — con
   pocas palabras por línea el interlineado base se percibe como demasiado
   aire, se aprieta más solo aquí (ver cdq-design-system/styles.css). */
@media(max-width:600px){
  :root{ --cdq-lh-largo:1.3; }
}

/* --- Ligaduras: solo Louize (texto) las tiene · LouizeDisplay no tiene liga --
   Ambas propiedades juntas: font-variant-ligatures para semántica,
   font-feature-settings para Safari y contextos de reset externo.
   No aplicar a * porque font-feature-settings no es aditivo: una regla
   más específica sin "liga" la cancelaría. */

/* --- Los cinco roles de texto ------------------------------------------ */
.t-display{font-family:var(--cdq-font-display);font-size:var(--cdq-size-display);line-height:var(--cdq-lh-display);letter-spacing:var(--cdq-ls-display);font-weight:400}
.t-titulo{font-family:var(--cdq-font-display);font-size:var(--cdq-size-titulo);line-height:var(--cdq-lh-titulo);letter-spacing:var(--cdq-ls-titulo);font-weight:400;color:var(--cdq-text)}
/* cuerpo: Lead/Intro · 20–24px · lh 1.25 · ancla visual · ≤5 líneas · impacto corto */
.t-cuerpo{font-family:var(--cdq-font-serif);font-size:var(--cdq-size-cuerpo);line-height:var(--cdq-lh-cuerpo);letter-spacing:var(--cdq-ls-cuerpo);font-weight:400;color:var(--cdq-text);font-variant-ligatures:common-ligatures;font-feature-settings:"liga" 1,"calt" 1,"kern" 1}
/* largo: BASE del sitio · 18–20px · lh 1.48 · lectura sostenida · medida 28em · cartas · nota artista */
.t-largo{font-family:var(--cdq-font-serif);font-size:var(--cdq-size-largo);line-height:var(--cdq-lh-largo);letter-spacing:var(--cdq-ls-largo);font-weight:400;color:var(--cdq-text);max-width:var(--cdq-measure);font-variant-ligatures:common-ligatures;font-feature-settings:"liga" 1,"calt" 1,"kern" 1}
.t-etiqueta{font-family:var(--cdq-font-sans);font-size:var(--cdq-size-etiqueta);line-height:var(--cdq-lh-etiqueta);letter-spacing:var(--cdq-ls-etiqueta);text-transform:uppercase;color:var(--cdq-muted)}

/* --- Accesibilidad de teclado ------------------------------------------ */
/* focus-visible reemplaza :focus para no mostrar anillo en click/touch.
   El anillo usa --cdq-accent para coherencia con el sistema cromático. */
:focus-visible{outline:2px solid var(--cdq-accent);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* Usuarios con preferencia de movimiento reducido: desactivar transiciones */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* --- Encabezados -------------------------------------------------------- */
/* La jerarquía es de tamaño, nunca de peso. Anula el bold por defecto del
   navegador en <h1>–<h6> (que ahora cargaría el corte Bold 700 real) y
   prohíbe la negrita/itálica sintética. Cada titular declara su propio peso
   en su clase; este reset solo evita el peso heredado del user-agent. */
h1,h2,h3,h4,h5,h6{font-weight:400;font-synthesis:none}

/* Header + menú overlay: ya no vive aquí — es el bloque cdq/header
   (chavezduque-blocks/blocks/header/style.css). Blocksy no es un theme de
   bloques completo (no tiene Editor del sitio) y su Header Builder con
   bloques Gutenberg propios es exclusivo de Blocksy Pro (no instalado) —
   resuelto sin Pro (2026-07-07, ver functions.php cdq_render_header_block):
   cdq/header se inyecta vía wp_footer (wp_body_open no lo dispara este
   theme) y el header nativo de Blocksy se oculta aquí.
   !important necesario: el header nativo tiene data-sticky="fade" — su
   propio JS le aplica estilo inline en el cliente (fade-in al hacer
   scroll), que le gana a un simple selector de ID sin !important. */
#header.ct-header{display:none !important}

/* Footer + declaración editorial: ya no vive aquí — es el bloque
   cdq/footer (chavezduque-blocks/blocks/footer/style.css), mismo patrón
   que el header arriba (wp_footer + ocultar el nativo por CSS). */
#footer.ct-footer{display:none !important}

/* --- Reveal de scroll — modelo Studio Olimpo, un solo disparo, nunca loop --
   Fuente: su ScrollTrigger real usa autoAlpha 0→1 + toggleActions "play none
   none none" (dispara una vez, no se revierte). Aquí: opacidad + escala sutil,
   activado por cdq-reveal.js (IntersectionObserver). Sin JS o sin soporte,
   .js habilita is-revealed en carga — el contenido nunca queda oculto. */
[data-cdq-reveal]{
  opacity:0;
  transform:scale(.96);
  transition:opacity .7s cubic-bezier(.25,.46,.45,.94),
             transform .7s cubic-bezier(.25,.46,.45,.94);
}
[data-cdq-reveal].is-revealed{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  [data-cdq-reveal]{opacity:1;transform:none;transition:none}
}

/* --- Hero de portada — frase-declaración (ver brand/hero/hero.html) -----
   Animadas por assets/hero-animation.js (envuelve cada palabra en
   .word e imprime el delay inline vía JS; el fade en sí vive aquí).
   .cdq-hero es la sección completa (fondo oscuro, 100vh, alineada abajo);
   aplicar como clase adicional del Group block que envuelve el Hero. */
.cdq-hero{
  background:var(--cdq-bg-dark);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(2rem,5vw,4rem) var(--cdq-margin);
}
.cdq-hero__inner{max-width:var(--cdq-site-width);margin-inline:auto;width:100%}
.cdq-hero-descriptor{
  margin:0 0 clamp(2.5rem,4vw,4rem);
  font-family:var(--cdq-font-sans);
  font-size:var(--cdq-size-etiqueta);
  line-height:var(--cdq-lh-etiqueta);
  letter-spacing:var(--cdq-ls-etiqueta);
  text-transform:uppercase;
  color:var(--cdq-muted-inv);
  opacity:0;
  animation:cdq-fade .8s ease forwards;
  animation-delay:.05s;
}
/* Louize Display regular (2026-07-07): la frase vive en la escala Display,
   va en el corte Display, no en el de lectura. */
.cdq-hero-frase{
  margin:0;
  font-family:var(--cdq-font-display);
  font-size:var(--cdq-size-display);
  line-height:.92;
  letter-spacing:var(--cdq-ls-display);
  font-weight:400;
  color:var(--cdq-text-inv);
}
/* fade simple por palabra, sin filter (reemplaza el blur-to-sharp,
   no compone de forma fiable en WebKit/iOS) */
.cdq-hero-frase .word{
  display:inline-block;
  opacity:0;
  animation:cdq-fade-in 1.2s ease forwards;
}
@keyframes cdq-fade-in{to{opacity:1}}
@keyframes cdq-fade{to{opacity:1}}