/* === Garet local fonts === */
@font-face {
  font-family: 'Garet';
  src: url('assets/fonts/Garet-Book.otf') format('opentype'),
       url('assets/fonts/Garet-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Garet';
  src: url('assets/fonts/Garet-Heavy.otf') format('opentype'),
       url('assets/fonts/Garet-Heavy.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/*
 Theme Name:   Artis
 Theme URI:    https://artis.makkao.com/
 Description:  ARTIS Gallery — child theme de Bricks Builder. Diseño de galería de arte contemporáneo con tipografía editorial y acento rojo ARTIS.
 Author:       Makkao
 Author URI:   https://makkao.com/
 Template:     bricks
 Version:      1.2
 Text Domain:  bricks
*/

/* =========================================================
   ARTIS — Design tokens
   Fuente: extraído del Figma Make oficial de la marca.
   Todas las secciones y componentes consumen ÚNICAMENTE
   estas variables. Si cambias aquí, cambia en toda la web.
   ========================================================= */

:root {
  /* Paleta de marca */
  --ar-color-ink:           #201b18;
  --ar-color-accent:        #db321b;
  --ar-color-accent-hover:  #c02916;
  --ar-color-cream:         #f5f1e8;
  --ar-color-mute:          #625d5c;
  --ar-color-whisper:       #a1957d;
  --ar-color-highlight:     #eee9ae;
  --ar-color-olive:         #726b4e;
  --ar-color-bg:            #ffffff;

  /* Derivadas (opacidades para overlays) */
  --ar-ink-50:   rgba(32, 27, 24, .50);
  --ar-ink-55:   rgba(32, 27, 24, .55);
  --ar-ink-85:   rgba(32, 27, 24, .85);
  --ar-ink-90:   rgba(32, 27, 24, .90);
  --ar-cream-15: rgba(245, 241, 232, .15);
  --ar-cream-20: rgba(245, 241, 232, .20);
  --ar-cream-30: rgba(245, 241, 232, .30);
  --ar-cream-40: rgba(245, 241, 232, .40);
  --ar-cream-50: rgba(245, 241, 232, .50);
  --ar-cream-60: rgba(245, 241, 232, .60);
  --ar-ink-border: rgba(32, 27, 24, .10);
  --ar-ink-border-20: rgba(32, 27, 24, .20);

  /* Tipografía — marca ARTIS (parity exacta con Figma Make).
     Figma: --font-garet "Garet", sans-serif · --font-questrial "Questrial", sans-serif
             · --font-montserrat "Montserrat", sans-serif.
     Garet es licenciada y pendiente de .woff2 del cliente; hasta entonces
     el navegador cae al genérico `sans-serif` del sistema (= Figma spec). */
  --ar-font-head:  "Garet", "Outfit", sans-serif;
  --ar-font-body:  "Questrial", sans-serif;
  --ar-font-label: "Montserrat", sans-serif;

  /* Escala tipográfica (clamp fluida)
     Headings (h1..h5) mantienen jerarquía; todo texto no-heading comparte
     un único token unificado --ar-fs-text para coherencia editorial. */
  --ar-fs-hero:     clamp(4.2rem, 12vw, 15rem);     /* ARTIS hero */
  --ar-fs-xxl:      clamp(3.6rem, 10.8vw, 10.8rem); /* section hero */
  --ar-fs-xl:       clamp(3.3rem, 7.2vw, 7.2rem);   /* section title h2 */
  --ar-fs-l:        clamp(2.4rem, 4.8vw, 4.2rem);   /* section subtitle h3 */
  --ar-fs-m:        clamp(1.8rem, 3vw, 2.7rem);
  --ar-fs-text:     clamp(1.125rem, 1.4vw, 1.625rem); /* 18 → 26px — único tamaño no-heading */
  --ar-fs-body:     var(--ar-fs-text);
  --ar-fs-body-lg:  var(--ar-fs-text);
  --ar-fs-sm:       var(--ar-fs-text);
  --ar-fs-xs:       var(--ar-fs-text);
  --ar-fs-label:    var(--ar-fs-text);

  /* Trackings */
  --ar-tr-label:    .20em;
  --ar-tr-label-wide: .25em;
  --ar-tr-label-tight: .15em;
  --ar-tr-title:    -.02em;

  /* Spacing (rail 4px) */
  --ar-s-1: .25rem;
  --ar-s-2: .5rem;
  --ar-s-3: .75rem;
  --ar-s-4: 1rem;
  --ar-s-6: 1.5rem;
  --ar-s-8: 2rem;
  --ar-s-10: 2.5rem;
  --ar-s-12: 3rem;
  --ar-s-16: 4rem;
  --ar-s-20: 5rem;
  --ar-s-24: 6rem;     /* spacing seccional estándar */
  --ar-s-32: 8rem;

  /* Layout */
  --ar-container:    1280px;
  --ar-container-px: clamp(1.25rem, 4vw, 3rem);   /* 20-48px */
  --ar-header-h:     80px;

  /* Gradientes de hero */
  --ar-hero-grad-top:    linear-gradient(to bottom, var(--ar-ink-50) 0%, transparent 100%);
  --ar-hero-grad-bottom: linear-gradient(to top, var(--ar-ink-85) 0%, rgba(32,27,24,.30) 50%, transparent 100%);
  --ar-hero-grad-over:   linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.20) 50%, rgba(0,0,0,.75) 100%);

  /* Curvas y duraciones */
  --ar-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ar-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ar-dur-fast:    .25s;
  --ar-dur:         .6s;
  --ar-dur-slow:    .85s;
  --ar-dur-xslow:   1.2s;

  /* Sombras */
  --ar-shadow-card: 0 8px 24px rgba(32,27,24,.08);
  --ar-shadow-nav:  0 2px 12px rgba(32,27,24,.06);
  --ar-shadow-lg:   0 18px 48px rgba(32,27,24,.16);

  /* Radios: ARTIS usa esquinas rectas — sin border-radius en componentes principales */
  --ar-radius-0: 0;
  --ar-radius-sm: 2px;  /* reserva para inputs si hace falta */
}

/* =========================================================
   Escalado tipográfico en móvil (≤767px)
   Subimos los tokens base ~15-20% para legibilidad real en
   dispositivos pequeños. Afecta a todo el site de forma
   coherente porque las secciones consumen los tokens.
   ========================================================= */
/* En móvil ≤767px subimos los floors de los clamp() un 15% para
   mejorar la jerarquía tipográfica en pantallas pequeñas.
   Los techos (max) no se tocan — solo el suelo (min). */
@media (max-width: 767px) {
  :root {
    --ar-fs-hero: clamp(4.83rem, 13.8vw, 15rem);
    --ar-fs-xxl:  clamp(4.14rem, 12.4vw, 10.8rem);
    --ar-fs-xl:   clamp(3.8rem,  8.3vw,  7.2rem);
    --ar-fs-l:    clamp(2.76rem, 5.5vw,  4.2rem);
    --ar-fs-m:    clamp(2.07rem, 3.45vw, 2.7rem);
    --ar-fs-text: clamp(1.29rem, 1.6vw,  1.625rem);
  }
  .ar-journal-card__title { font-size: 1.84rem; }
  .ar-footer__col-title   { font-size: 1rem; }
}

/* =========================================================
   SISTEMA GLOBAL — reglas base para elementos HTML
   Todo el site hereda de estas reglas. Las secciones solo
   ajustan cuando necesitan un caso especial (p.ej. hero).
   ========================================================= */

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ar-font-head);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: normal !important;
  color: inherit;
  margin: 0 0 var(--ar-s-6);
}
h1 {
  font-family: var(--ar-font-head) !important;
  font-size: clamp(3.5rem, 11.5vw, 14rem) !important;
  line-height: .95 !important;
  letter-spacing: -.02em !important;
  font-weight: 200 !important;
  margin: 0 0 2.25rem !important;
  text-transform: none !important;
}
h2 {
  line-height: 1.05 !important;
  letter-spacing: -.015em !important;
  font-weight: 200 !important;
  letter-spacing: inherit;
}
body.home h2 { font-size: clamp(2.5rem, 5.5vw, 5rem) !important; }
h3 { font-size: var(--ar-fs-l);    line-height: 1.1; }
h4 { font-size: var(--ar-fs-m);    line-height: 1.2; letter-spacing: -.01em; }
h5 {
  font-family: var(--ar-font-label);
  font-size: var(--ar-fs-text);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ar-tr-label-tight);
  text-transform: uppercase;
}

/* --- Párrafos y listas --- */
p {
  font-family: var(--ar-font-body);
  font-size: var(--ar-fs-text);
  line-height: 1.65;
  color: inherit;
  margin: 0 0 var(--ar-s-4);
}
ul, ol { margin: 0 0 var(--ar-s-4); padding-left: 1.25rem; line-height: 1.65; }
li + li { margin-top: var(--ar-s-2); }
blockquote {
  font-family: var(--ar-font-head);
  font-style: italic;
  font-size: var(--ar-fs-l);
  line-height: 1.35;
  margin: 0 0 var(--ar-s-8);
  padding-left: var(--ar-s-6);
  border-left: 3px solid var(--ar-color-accent);
}
hr { border: 0; border-top: 1px solid var(--ar-ink-border); margin: var(--ar-s-8) 0; }

/* --- Enlaces base --- */
a {
  color: var(--ar-color-ink);
  text-decoration: none;
  transition: color var(--ar-dur-fast) var(--ar-ease), opacity var(--ar-dur-fast) var(--ar-ease);
}
a:hover { color: var(--ar-color-accent); }
/* Enlaces sobre fondos oscuros */
.ar-section--ink  a:not(.ar-btn):hover,
.ar-section--olive a:not(.ar-btn):hover,
.ar-section--red  a:not(.ar-btn):hover { color: #fff; opacity: .85; }

/* --- Elementos de formulario --- */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* --- Imágenes --- */
img, svg { display: block; max-width: 100%; height: auto; }

/* --- Selección de texto --- */
::selection { background: var(--ar-color-accent); color: #fff; }

/* =========================================================
   Utilities — hover primitives reutilizables
   ========================================================= */
.ar-hover-lift {
  transition: transform var(--ar-dur) var(--ar-ease-out), box-shadow var(--ar-dur) var(--ar-ease-out);
}
.ar-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--ar-shadow-lg); }

.ar-hover-underline { position: relative; display: inline-block; }
.ar-hover-underline::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--ar-dur) var(--ar-ease-out);
}
.ar-hover-underline:hover::after { transform: scaleX(1); transform-origin: left center; }

.ar-hover-zoom { overflow: hidden; }
.ar-hover-zoom img,
.ar-hover-zoom > :first-child { transition: transform .7s var(--ar-ease-out); }
.ar-hover-zoom:hover img,
.ar-hover-zoom:hover > :first-child { transform: scale(1.04); }