/* ==========================================================================
   CUBE Collective — shared page frame (cubecore.pro)  ·  cube-layout.css v20261010a
   One place for what every page must agree on: the content width, the side gutter, the CTA size and the
   form-field look. Each page stylesheet reads these tokens (with its own fallback), so changing the width
   of the whole site is a one-line edit here.
   Donor contract: CUBE OneCare design standard (single content container, 44 px minimum targets, visible
   field borders and focus ring). No runtime is shared: this is a static asset.
   ========================================================================== */

:root {
  /* Content container: the widest layout the site already used (home, investors, brand, leadership). */
  --cube-page-max: 1240px;
  /* Total horizontal gutter (half on each side). */
  --cube-page-gutter: 40px;
  /* Ready to use as `width: var(--cube-page-width)`; `100%` resolves against the element's containing block. */
  --cube-page-width: min(var(--cube-page-max), calc(100% - var(--cube-page-gutter)));
  /* Longest comfortable line for running text: about 75 characters in Inter at body size (measured: 60ch gives a median of
     76 full-line characters on the legal pages; 68ch gave 86-89). Legal copy keeps this measure inside the wide container. */
  --cube-measure: 70ch;

  /* Call-to-action buttons: one size on every page, never below the 44 px touch target. */
  --cube-cta-h: 46px;
  --cube-cta-px: 18px;
  --cube-cta-fs: 13px;
  --cube-cta-radius: 13px;
  /* Secondary controls (toolbars, tabs, toggles): 40 px with a mouse, 44 px on touch screens. */
  --cube-control-h: 40px;
}
@media (pointer: coarse), (max-width: 767px) {
  :root { --cube-control-h: 44px; }
}

@media (max-width: 960px) {
  :root { --cube-page-gutter: 28px; }
}

/* Headings break into balanced lines (no lone word on the last line); browsers without support ignore it. */
h1, h2, h3, .section-heading, .headline { text-wrap: balance; }

/* Marcas de producto pintadas en línea (SVG, regla 10): un <img> no se encoge como ítem flex y un <svg> sí; se queda en su tamaño. */
.pmark { flex: 0 0 auto; }
