/* ============================================================
   AVIVA — v7 "Editorial institucional"
   ------------------------------------------------------------
   Tipografía: DM Serif Display (display dramático) + DM Sans
   (body) + JetBrains Mono (datos, precios, folios).
   Detalles editoriales: folios numerados al margen, créditos
   al pie de cada sección, italic en subtítulos, reglas finas
   a sangrado, pull quote tipo Monocle.
   Audiencia: empresas, fundaciones, gremios, centros, asociaciones
   y universidades — institucional amplia.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Surfaces */
  --paper:        #ffffff;
  --paper-warm:   #fdfaf3;   /* very soft warm white, used sparingly */
  --rule:         #e6e0d4;
  --rule-soft:    #efeae0;

  /* Ink */
  --ink:          #161311;
  --ink-2:        #3a3530;
  --ink-3:        #6e6760;
  --ink-4:        #a8a098;

  /* Accent — verde editorial */
  --accent:       #2d4a36;
  --accent-deep:  #1e3325;
  --accent-soft:  #d8e0d4;

  /* Inverse */
  --ink-canvas:   #161311;
  --on-ink:       #f5efe2;
  --on-ink-2:     #b8ad97;

  /* Type */
  --font-serif:   'DM Serif Display', 'Tiempos Headline', Georgia, serif;
  --font-sans:    'DM Sans', 'Söhne', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Sizes */
  --fs-eyebrow:   12px;
  --fs-meta:      13px;
  --fs-body:      17px;
  --fs-lead:      clamp(1.15rem, 0.95rem + 0.9vw, 1.5rem);

  --fs-h6:        14px;
  --fs-h5:        18px;
  --fs-h4:        clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem);
  --fs-h3:        clamp(1.85rem, 1.4rem + 1.8vw, 2.6rem);
  --fs-h2:        clamp(2.4rem, 1.8rem + 2.6vw, 4rem);
  --fs-h1:        clamp(3rem,   2rem + 4.5vw,   6rem);

  /* Spacing */
  --s-1:  4px; --s-2:  8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;

  --measure:       62ch;
  --measure-wide:  78ch;
  --measure-tight: 36ch;

  /* Radii — squared off in v5 */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --dur-fast:  160ms;
  --dur:       260ms;
  --dur-slow:  520ms;

  /* Layout */
  --maxw:      1200px;
  --gutter:    clamp(24px, 5vw, 64px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  padding: var(--s-9) 0;
  position: relative;
  scroll-margin-top: 88px;
}
@media (max-width: 720px) {
  section { padding: var(--s-7) 0; }
}

/* ============================================================
   TYPE
   ============================================================ */

.h1, h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
  padding-bottom: 0.05em;
}
.h2, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
  padding-bottom: 0.05em;
}
.h3, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0;
  padding-bottom: 0.04em;
}
.h4, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.h5, h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

/* SIGNATURE: italic serif in accent color, inside headlines */
.it, h1 em, h2 em, h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.003em;
  font-size: 1em;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow .num { color: var(--ink); font-weight: 700; }
.eyebrow .dash { color: var(--ink-4); margin: 0 4px; }

p, .p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--measure);
  margin: 0;
}

.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  max-width: var(--measure-wide);
  margin: 0;
}

.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule);
  transition: color var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease);
}
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

::selection { background: var(--accent); color: var(--paper); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 24px;
  border-radius: var(--r-1);
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  text-decoration: none;
}
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn.sec {
  background: transparent;
  color: var(--ink);
}
.btn.sec:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn.on-ink {
  background: transparent;
  color: var(--on-ink);
  border-color: var(--on-ink);
}
.btn.on-ink:hover {
  background: var(--on-ink);
  color: var(--ink);
}

/* ============================================================
   ELEMENTS
   ============================================================ */

/* ============================================================
   EDITORIAL CHROME — folios, section headers, credits
   ============================================================ */

/* Folio number at the start of each section — small mono mark at left */
.folio {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Section header: full-width rule + folio + italic subtitle */
.sec-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) 0 var(--s-7);
  border-top: 1px solid var(--ink);
}
.sec-head .folio { padding-top: 4px; }
.sec-head .subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.4rem);
  color: var(--accent);
  letter-spacing: -0.005em;
}
.sec-head .subtitle .sec-iso {
  display: inline-block;
  height: 26px;
  width: auto;
  vertical-align: -5px;
  margin-right: 10px;
}
.sec-head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  text-transform: uppercase;
  text-align: right;
}

/* Section credit at the bottom — like a printer's mark */
.sec-credit {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.sec-credit em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}

/* Pull quote in the margin (Monocle-style) */
.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding: 8px 0 8px 22px;
  margin: 0;
  max-width: 38ch;
}
.pullquote cite {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 14px;
}

/* Mono tag — for prices, numbers, dates */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* Full-bleed rule that escapes the wrap to the viewport edges */
.bleed-rule {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 1px;
  background: var(--ink);
  border: 0;
}

/* Centered separator bar between sections */
.section-divider {
  position: relative;
  height: 0;
  border-top: 1px solid var(--rule);
}
.section-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 2px;
  background: var(--accent);
}

.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.2px;
}
.text-link:hover { color: var(--accent); text-decoration-color: var(--accent); }

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}
.fade-up {
  opacity: 1;
  animation: fadeUp 600ms var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; opacity: 1; transform: none; }
}