/* =====================================================================
   BASE — typography, layout primitives, utilities, a11y helpers
   ===================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-body);
  background: var(--color-surface);
}

/* ===== Headings ===== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: inherit;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* ===== Paragraphs and inline ===== */

p {
  max-width: 65ch;
}

p + p {
  margin-top: var(--space-4);
}

strong, b { font-weight: 700; }
em, i { font-style: italic; }

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--color-accent-warm);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Lists ===== */

ul, ol {
  padding-left: 1.25rem;
}

li + li {
  margin-top: var(--space-2);
}

/* ===== Blockquote ===== */

blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  max-width: 40ch;
  margin-inline: auto;
}

blockquote cite {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  font-style: normal;
  opacity: 0.8;
}

/* ===== Layout primitives ===== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

section {
  padding-block: var(--section-y);
}

/* Collapse a section's bottom padding so it merges with whatever follows.
   Used on the home eventos section to flow directly into the closing
   quote with no empty airspace between them. */
.section--flush-bottom {
  padding-bottom: 0;
}

/* Alternating section backgrounds — teal/white rhythm */
.section--teal {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-text-on-teal);
  overflow: hidden;
}

/* Informational links on teal backgrounds — scoped to exclude .btn
   so that button color schemes (which set their own text color) are
   not overridden. */
.section--teal a:not(.btn) {
  color: var(--color-text-on-teal);
}

.section--teal a:not(.btn):hover,
.section--teal a:not(.btn):focus-visible {
  color: var(--color-accent-warm);
  text-decoration-thickness: 2px;
}

.section--white {
  background-color: var(--color-surface);
  color: var(--color-text-body);
}

.section--alt {
  background-color: var(--color-surface-alt);
  color: var(--color-text-body);
}

/* Renaissance brain texture — used in teal sections behind content.
   Placed via ::before so it does not affect flow or semantics. */
.section--teal-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/illustrations/brain-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(90%, 900px) auto;
  /* PNG is already subtle light-cyan line art on transparent, so we
     render it near full opacity and let the artwork's low contrast
     against teal do the "texture" work. An extra 0.12 multiplier made
     it invisible. */
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

.section--teal-texture > * {
  position: relative;
  z-index: 1;
}

/* Vitruvian backdrop — wrap any block with this class to render the
   Vitruvian figure behind it. The backdrop is clipped to the wrapper's
   bounds, so applying it to the heading/intro block (instead of the
   whole section) keeps the figure out of the logo grid. The `auto 80%`
   background-size scales the figure to the wrapper's height, so it
   always reads as a full figure regardless of viewport. */
.vitruvian-backdrop {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-6);
}

.vitruvian-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/illustrations/vitruvian-circulo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 80%;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.vitruvian-backdrop > * {
  position: relative;
  z-index: 1;
}

/* ===== Page heading (white-box-on-teal per CLAUDE.md) ===== */

.page-heading {
  font-family: var(--font-display);
  font-weight: 700;
  /* Scoped clamp (not --fs-h1). Mobile floor is 40px — large enough
     to match the visual weight of short single-word H1s ("La Red",
     "Membresías", etc.), now that longer titles like "¿Qué es
     Neuroeducación?" carry an explicit <br> that keeps each line
     short enough to never overflow. */
  font-size: clamp(40px, 10vw, 120px);
  background: var(--color-surface);
  color: var(--color-primary);
  padding: 0.1em 0.35em;
  display: inline-block;
  width: auto;
  max-width: 100%;
  line-height: 1;
  letter-spacing: 0.005em;
  /* No mid-word breaks — the heading should only wrap at spaces
     ("¿Qué es" / "Neuroeducación?"), never hyphenate. */
  hyphens: none;
  word-break: keep-all;
}

.page-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

/* Modifier for tight banner layouts (e.g. eventos.html) where the next
   section sits immediately below on phones and the heading row's default
   bottom margin reads as wasted whitespace. Desktop keeps the default. */
@media (max-width: 767px) {
  .page-heading-row--flush-bottom-mobile {
    margin-bottom: 0;
  }
}

.page-heading-row .brand-mark {
  flex: 0 0 auto;
  width: clamp(90px, 14vw, 140px);
}

/* ===== Utilities ===== */

/* text-align centers inline content only. A constrained block
   (p: max-width 65ch, blockquote: max-width 40ch) sits at the left of
   its container with its inline content centered *inside*, which reads
   as a left-of-center button. Margin auto on the block itself centers
   the block. Applied both to the element that carries .text-center and
   to its p/blockquote descendants so both composition patterns work:
   <p class="text-center">...</p>  and  <div class="text-center"><p>...</p></div> */
.text-center {
  text-align: center;
  margin-inline: auto;
}
.text-center > p,
.text-center > blockquote {
  margin-inline: auto;
}

.text-balance { text-wrap: balance; }

.stack > * + * { margin-top: var(--space-5); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-7); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.flow > * + * { margin-top: 1em; }

.mx-auto { margin-inline: auto; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Responsive grid — auto-fit with min column width via --min */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr));
  gap: var(--gap, var(--space-5));
}

/* ===== A11y helpers ===== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  z-index: 1000;
  transition: top var(--transition-fast);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ===== Tablet+ refinements ===== */

@media (min-width: 768px) {
  body {
    font-size: var(--fs-body);
  }
  .page-heading-row {
    gap: var(--space-6);
  }
}