/* ============================================================
   brand.css — chavezduque.art
   Fuentes: Louize Display · Louize · Sweet Sans Pro
   Referente: studioolimpo.it · Marco: Dourish, Bringhurst, Butterick
   Escala fluida: 390px → 1440px
   Versión: 1.0.0 · 2026-05-27
   Subir a: /wp-content/themes/blocksy-child/brand.css
   ============================================================ */


/* ============================================================
   FUENTES
   Verificar nombres exactos de archivos en CPanel antes de subir.
   Ruta: /wp-content/themes/blocksy-child/fonts/
   ============================================================ */

@font-face {
  font-family: 'Louize Display';
  src: url('/wp-content/themes/blocksy-child/fonts/LouizeDisplay.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Louize Display';
  src: url('/wp-content/themes/blocksy-child/fonts/LouizeDisplay-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Louize';
  src: url('/wp-content/themes/blocksy-child/fonts/Louize.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Louize';
  src: url('/wp-content/themes/blocksy-child/fonts/Louize-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('/wp-content/themes/blocksy-child/fonts/SweetSansPro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   VARIABLES DEL SISTEMA
   ============================================================ */

:root {

  /* COLORES
     Solo dos colores base + un acento.
     La jerarquía viene del tamaño, no del color. */
  --cdq-bg:          #F8F6F1;   /* crema cálida */
  --cdq-text:        #0D0D0D;   /* casi negro */
  --cdq-bg-dark:     #121212;   /* near-black — secciones oscuras, footer, menú */
  --cdq-muted:       #6B6660;   /* gris cálido — textos secundarios, números */
  --cdq-accent:      #4A3028;   /* hierro oxidado — un solo acento · umbrales y CTAs */

  /* TIPOGRAFÍA FLUIDA
     Butterick: body 15–25px · interlineado 120–145% · medida 45–90 caracteres
     Bringhurst: la tipografía existe para honrar el contenido */

  /* Display — Louize Display */
  --cdq-size-display:    clamp(3rem, 6.5vw + 1rem, 7rem);
  --cdq-lh-display:      0.85;       /* apretado · por debajo de 1 · técnica Olimpo */
  --cdq-ls-display:      -0.02em;
  --cdq-weight-display:  400;

  /* H2 — Louize */
  --cdq-size-h2:         clamp(1.5rem, 2.5vw + 0.5rem, 3rem);
  --cdq-lh-h2:           1.05;
  --cdq-ls-h2:           -0.01em;

  /* Body editorial — Louize */
  --cdq-size-body:       clamp(1.125rem, 1vw + 0.875rem, 1.5rem);
  --cdq-lh-body:         1.6;        /* 142% — dentro del rango Butterick */
  --cdq-ls-body:         -0.01em;

  /* UI — Sweet Sans Pro · labels · números · CTAs */
  --cdq-size-ui:         0.8125rem;  /* 13px exacto */
  --cdq-lh-ui:           1.3;
  --cdq-ls-ui:           0.065em;    /* tracking abierto */
  --cdq-weight-ui:       500;

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

  /* GRID */
  --cdq-max-width:       90rem;      /* 1440px */
  --cdq-margin:          clamp(1rem, 0.858rem + 0.71vw, 1.5rem);
  --cdq-gutter:          0.5rem;

  /* ESPACIADO FLUIDO */
  --cdq-space-xs:        clamp(0.5rem,  1vw, 0.75rem);
  --cdq-space-sm:        clamp(1rem,    2vw, 1.5rem);
  --cdq-space-md:        clamp(2rem,    4vw, 3rem);
  --cdq-space-lg:        clamp(4rem,    8vw, 7rem);
  --cdq-space-xl:        clamp(8rem,   14vw, 12rem);
}


/* ============================================================
   HERO — CHAVEZ / DUQUE / .ART
   Metáfora: estratos del fenómeno-maleza
   Una sola aparición visible sobre un sistema subterráneo extenso.
   Cada línea emerge desde abajo dentro de su propio contenedor de recorte.
   La demora es el umbral — Dourish: el significado emerge en la participación encarnada.
   ============================================================ */

.cdq-hero-title {
  display: block;
}

.cdq-hero-title .line {
  overflow: hidden;     /* el secreto de la animación limpia */
  display: block;
  line-height: var(--cdq-lh-display);
}

.cdq-hero-title .line span {
  display: block;
  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: var(--cdq-weight-display);
  color: var(--cdq-text);
  transform: translateY(110%);
  animation: cdq-reveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Estratos:
   CHAVEZ  — superficie · margen izquierdo · lo visible
   DUQUE   — primer estrato · desplazado a la derecha · lo que se extiende bajo tierra
   .ART    — el retorno · entre los dos · más pequeño · el fruto, la marca */

.cdq-hero-title .line:nth-child(1) span {
  padding-left: 0;
  animation-delay: 0.1s;
}

.cdq-hero-title .line:nth-child(2) span {
  padding-left: clamp(2rem, 6vw, 5rem);
  animation-delay: 0.32s;
}

.cdq-hero-title .line:nth-child(3) span {
  padding-left: clamp(1rem, 3vw, 2.5rem);
  font-size: calc(var(--cdq-size-display) * 0.55);
  animation-delay: 0.54s;
}

@keyframes cdq-reveal {
  to { transform: translateY(0); }
}

/*
HTML del hero:
<div class="cdq-hero-title">
  <div class="line"><span>CHAVEZ</span></div>
  <div class="line"><span>DUQUE</span></div>
  <div class="line"><span>.ART</span></div>
</div>
*/


/* ============================================================
   CABECERA DE SECCIÓN
   Sistema de coordenadas presente en todos los bloques cdq/
   [número] [LABEL] [CTA ——]
   ============================================================ */

.cdq-section-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 var(--cdq-space-sm);
  align-items: baseline;
  padding: var(--cdq-space-xs) 0;
  border-top: 1px solid currentColor;
  margin-bottom: var(--cdq-space-lg);
  font-family: var(--cdq-font-sans);
  font-size: var(--cdq-size-ui);
  font-weight: var(--cdq-weight-ui);
  letter-spacing: var(--cdq-ls-ui);
  text-transform: uppercase;
}

.cdq-section-header .number {
  color: var(--cdq-muted);
}

.cdq-section-header .cta {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--cdq-accent);   /* el único lugar donde el acento es señal de umbral */
}


/* ============================================================
   HEADER FLOTANTE
   CHzDQ.ART — Louize Display · mix-blend-mode para adaptación al fondo
   ============================================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--cdq-space-xs) var(--cdq-margin);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  mix-blend-mode: difference;   /* se invierte sobre fondos claros y oscuros */
  color: #F8F6F1;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-header.hidden {
  transform: translateY(-100%);
}

.site-header .logo {
  font-family: var(--cdq-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.site-header .nav-toggle {
  font-family: var(--cdq-font-sans);
  font-size: var(--cdq-size-ui);
  font-weight: var(--cdq-weight-ui);
  letter-spacing: var(--cdq-ls-ui);
  text-transform: uppercase;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}


/* ============================================================
   MENÚ FULL-SCREEN
   ============================================================ */

.cdq-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--cdq-bg-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--cdq-margin);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cdq-nav-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.cdq-nav-item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: baseline;
  gap: 0 var(--cdq-space-md);
  border-top: 1px solid rgba(248, 246, 241, 0.15);
  padding: var(--cdq-space-sm) 0;
}

.cdq-nav-item .num {
  font-family: var(--cdq-font-sans);
  font-size: var(--cdq-size-ui);
  font-weight: var(--cdq-weight-ui);
  color: var(--cdq-muted);
}

.cdq-nav-item .name {
  font-family: var(--cdq-font-display);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 400;
  line-height: 0.85;
  color: var(--cdq-bg);
}


/* ============================================================
   FOOTER — MANIFIESTO
   Conectores sintácticos en cursiva — musicalidad tipográfica
   ARTE VIVO *y* EXPERIENCIAS SOMÁTICAS
   ============================================================ */

.cdq-footer-manifesto {
  font-family: var(--cdq-font-sans);
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cdq-bg);
  line-height: 1.8;
}

.cdq-footer-manifesto em {
  font-family: var(--cdq-font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/*
HTML del footer:
<p class="cdq-footer-manifesto">
  ARTE VIVO <em>y</em> EXPERIENCIAS SOMÁTICAS<br>
  DESPERTANDO A LA VITALIDAD · ENRAIZADO <em>en</em> LA AUTOINDAGACIÓN · SUSTENTADO <em>por</em> EL CUIDADO
</p>
*/


/* ============================================================
   OVERRIDES BLOCKSY — alta especificidad
   Neutralizan los valores del tema para que el sistema CDQ rija
   ============================================================ */

body,
.ct-container,
.entry-content {
  background-color: var(--cdq-bg) !important;
  color: var(--cdq-text) !important;
  font-family: var(--cdq-font-serif) !important;
  font-size: var(--cdq-size-body) !important;
  line-height: var(--cdq-lh-body) !important;
  font-weight: 400 !important;
}

h1,
.wp-block-heading.has-large-font-size {
  font-family: var(--cdq-font-display) !important;
  font-size: var(--cdq-size-display) !important;
  font-weight: var(--cdq-weight-display) !important;
  line-height: var(--cdq-lh-display) !important;
  letter-spacing: var(--cdq-ls-display) !important;
}

h2 {
  font-family: var(--cdq-font-serif) !important;
  font-size: var(--cdq-size-h2) !important;
  font-weight: 400 !important;
  line-height: var(--cdq-lh-h2) !important;
  letter-spacing: var(--cdq-ls-h2) !important;
}

.ct-button,
button,
.wp-element-button {
  font-family: var(--cdq-font-sans) !important;
  font-size: var(--cdq-size-ui) !important;
  font-weight: var(--cdq-weight-ui) !important;
  letter-spacing: var(--cdq-ls-ui) !important;
  text-transform: uppercase !important;
  background-color: var(--cdq-accent) !important;
  color: var(--cdq-bg) !important;
  border: none !important;
  border-radius: 0 !important;
}

a {
  color: var(--cdq-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--cdq-accent);
}