/* ============================================================
   web2 — base.css
   Reset + global rules + section primitives.
   Loaded after tokens.css; before components.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--pc-white);
  color: var(--pc-fg);
  font-family: var(--pc-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--pc-blue-light); outline-offset: 2px; border-radius: 4px; }

/* ----------- Container + section wrapper ----------- */
.vm-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 32px);
  padding-right: clamp(20px, 4vw, 32px);
}
.vm-container--narrow { max-width: 760px; }

.vm-section {
  padding-top: var(--vm-section-y, 30px);
  padding-bottom: var(--vm-section-y, 30px);
}
.vm-section--white { background: var(--pc-white); }
.vm-section--beige { background: var(--pc-beige-light); }
.vm-section--blue  { background: var(--pc-blue-bg); }
.vm-section--mist  { background: var(--pc-mist); }
.vm-section--dark  { background: var(--pc-black); color: var(--pc-white); }
.vm-section--dark .vm-h1,
.vm-section--dark .vm-h2,
.vm-section--dark .vm-h3,
.vm-section--dark .vm-h4 { color: var(--pc-white); }
.vm-section--dark .vm-lead,
.vm-section--dark .vm-body { color: rgba(255,255,255,0.75); }

@media (max-width: 768px) {
  .vm-section { --vm-section-y: 28px; }
}

/* ----------- Type scale ----------- */
.vm-h1 {
  font-family: var(--pc-font-display);
  font-weight: 800;
  /* Softened slope (was 6vw) so long headlines on tablet portrait (768)
     don't wrap to 6+ lines. At 768px ~ 38px; at 1280+ still hits the 60px cap. */
  font-size: clamp(34px, 4.6vw + 8px, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--pc-fg);
  margin: 0;
  /* Long Spanish words can extend beyond narrow columns at small widths. */
  overflow-wrap: break-word;
}
.vm-h2 {
  font-family: var(--pc-font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw + 4px, 42px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--pc-fg);
  margin: 0;
  overflow-wrap: break-word;
}
.vm-h3 {
  font-family: var(--pc-font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--pc-fg);
  margin: 0;
}
.vm-h4 {
  font-family: var(--pc-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--pc-fg);
  margin: 0;
}
.vm-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--pc-fg-muted);
  margin: 0;
}
.vm-body { font-size: 17px; line-height: 1.7; color: var(--pc-fg); }
.vm-quote {
  font-family: var(--pc-font-body);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.55;
  color: var(--pc-fg);
}
.vm-eyebrow {
  font-family: var(--pc-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pc-blue-dark);
}

/* ----------- Highlighter mark (the brand signature) ----------- */
.vm-mark {
  background-image: linear-gradient(180deg, transparent 60%, rgba(83,158,249,0.55) 60%, rgba(83,158,249,0.55) 92%, transparent 92%);
  background-repeat: no-repeat;
  padding: 0 4px;
  /* Without this, when the marked text wraps the gradient draws a single
     continuous stripe across the bounding box (covering trailing whitespace
     at line ends). `clone` paints the gradient per line-box. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ----------- Script accent ----------- */
.vm-script {
  font-family: var(--pc-font-script);
  font-weight: 400;
  line-height: 1;
  display: inline-block;
}

/* ----------- Layout micro-utilities (kept minimal — components own their CSS) ----------- */
.vm-stack          { display: flex; flex-direction: column; }
.vm-row            { display: flex; flex-direction: row; }
.vm-items-center   { align-items: center; }
.vm-justify-center { justify-content: center; }
.vm-flex-wrap      { flex-wrap: wrap; }
.vm-text-center    { text-align: center; }
.vm-mx-auto        { margin-left: auto; margin-right: auto; }
.vm-w-full         { width: 100%; }

/* ----------- Section head (eyebrow + h2 + lead, centered) ----------- */
.vm-section__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.vm-section__head .vm-lead { margin-top: 16px; }
.vm-section__head .vm-eyebrow { margin-bottom: 12px; display: block; }

/* ----------- Sticker (highlighter mark overlay) ----------- */
.vm-sticker {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(48,48,46,0.15));
}