/* ------------------------------------------------------------------
   DESIGN TOKENS — the one place the site's look is defined

   Every page used to carry its own copy of these, pasted from whichever
   page was written first. They drifted: the measure was 1080px on two
   pages and 1180px on three, section padding ran 3.6em / 4em / 4.5em /
   5.5em / 6em, and --radius was missing entirely on macchine.html. The
   result was five pages that were nearly, but not quite, the same site.

   This file is loaded BEFORE each page's own <style>, so a page can
   still override a token where it genuinely needs to — the offer sheet
   narrows the measure because it is a printed document, and says so.
   Anything overridden without a reason written next to it is drift
   coming back.
------------------------------------------------------------------- */

:root{
  /* ---- brand ------------------------------------------------------ */
  --orange:#f16522;      --orange-dark:#cf5218;
  --toyo-blue:#004b9e;   --toyo-light:#0089d2;
  --wa:#25d366;          --wa-dark:#128c7e;

  /* ---- ink and ground --------------------------------------------- */
  --charcoal:#232427;    --gray:#55575c;      --gray-light:#8b8d92;
  --bg:#ffffff;          --bg-alt:#f4f4f2;    --bg-dark:#1a1b1d;
  --border:#e4e3df;

  /* ---- status ------------------------------------------------------ */
  --ok:#1c7a3c;          --ok-bg:#e8f6ec;
  --warn:#8a6100;        --warn-bg:#fdf3dc;
  --muted-badge:#5c5f66; --muted-badge-bg:#ececeb;

  /* ---- radius scale ------------------------------------------------
     Machinery is rectilinear and the catalogue is a technical document,
     so the geometry stays close to square. Capsule buttons read as
     consumer software and fought the subject matter.

       --r-xs   3px   thin markers, swatches
       --r-sm   6px   badges, tags, chips, small controls
       --r-btn  8px   every button, and the language switcher beside them
       --r-md  10px   cards
       --r-lg  14px   large panels and image frames
       50%            true circles only — dots, avatars

     Nothing should use a bare pixel radius: if a value is missing here,
     add it here rather than in a page.                                */
  --r-xs:3px;
  --r-sm:6px;
  --r-btn:8px;
  --r-md:10px;
  --r-lg:14px;

  /* kept as an alias: --radius was the old name for the card radius and
     is still referenced in page CSS */
  --radius:var(--r-md);

  /* ---- measure and rhythm ------------------------------------------
     --gutter is the space between content and the edge of the screen,
     and --sec the space between one band of content and the next. Both
     scale with the viewport so a phone is not given desktop spacing. */
  --maxw:1180px;
  --gutter:clamp(32px,6vw,88px);
  --sec:clamp(3.4em,6vw,5.5em);

  /* ---- elevation --------------------------------------------------- */
  --shadow-sm:0 2px 8px rgba(20,20,22,.06);
  --shadow-md:0 8px 24px rgba(20,20,22,.09);
  --shadow-lg:0 20px 48px rgba(20,20,22,.16);
  --shadow:var(--shadow-md);

  /* ---- motion ------------------------------------------------------ */
  --ease:cubic-bezier(.22,.9,.32,1);

  /* ---- type -------------------------------------------------------- */
  --font-display:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

/* ---- shared primitives ---------------------------------------------
   Only the pieces that were identical on every page and are worth
   holding in one place. Page-specific components stay in the page.   */

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

/* The eyebrow above a heading: .75rem everywhere. It was .72rem on the
   offer sheet, which read as a different typeface at a glance. */
.eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.6em;}

/* ---- how a button label may break -----------------------------------
   The rule follows the size of the button rather than a list of places,
   because a list goes stale: the first version of this exempted four
   action rows by name and still let the Italian "Chiedi informazioni
   sulle macchine nuove" push a page sideways from a row nobody had
   listed.

   A small button carries a phrase — "Ver detalhes", "WhatsApp" — and
   splitting that across two lines inside its own box reads as a mistake,
   so .btn-sm never wraps. A full-size button often carries what is really
   a short sentence once translated, so it wraps between words. Never
   inside a word, at either size.

   Each page still defines its own .btn for colour and padding and none
   of them declare white-space, so this stays the only place the policy
   is written down.                                                     */
.btn{white-space:normal;overflow-wrap:break-word;text-wrap:balance;}
.btn-sm{white-space:nowrap;}

/* ---- icon tile -------------------------------------------------------
   A filled square with the mark reversed out of it, rather than a pale
   tint with a coloured mark. It carries more weight at small sizes and
   is the same object on every page — only the colour changes, which a
   page sets with --ico-from / --ico-to.

   The marks are Font Awesome paths carrying fill="#f16522" as an
   attribute. A presentation attribute loses to any stylesheet rule, so
   the fill below reverses them to white without touching the markup. */
.ico{display:flex;align-items:center;justify-content:center;flex:none;
  width:58px;height:58px;border-radius:var(--r-md);
  background:linear-gradient(145deg,
    var(--ico-from,var(--orange)) 0%,
    var(--ico-to,var(--orange-dark)) 100%);
  box-shadow:0 6px 16px var(--ico-shadow,rgba(241,101,34,.28));}
.ico svg{fill:#fff;width:26px;height:26px;}

/* ---- filled card -----------------------------------------------------
   The gradient is the card. The mark sits straight on it in white with no
   tile of its own, and the text is near-black.

   Dark text is the legible choice on these colours, not only the look: on
   the orange it reads about 6.7:1 and on the blue about 5.1:1 against the
   darkest end of each, where white would manage 3.2:1 and 4.3:1 and fail
   the 4.5:1 minimum. Keep that in mind before lightening a gradient — the
   floor is set by the DARKEST stop against the text, and the ceiling by
   the LIGHTEST stop against the white mark.

   A grid opts in with .card-fill and sets its three stops.            */
.card-fill{border:0;border-radius:var(--radius);
  background:linear-gradient(150deg,
    var(--fill-from) 0%, var(--fill-mid) 48%, var(--fill-to) 100%);
  box-shadow:0 8px 22px var(--fill-shadow,rgba(207,82,24,.22));}
/* no box: undo the tile above and let the mark stand on the card. Without a
   width the .ico becomes a full-width row, so it has to be told where to put
   the mark — otherwise it inherits the tile's centring and floats to the
   middle of a card whose text is ranged left. */
.card-fill .ico{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;
  justify-content:flex-start;}
.card-fill .ico svg{width:34px;height:34px;fill:#fff;}
/* Ink is a variable because it has to follow the fill: near-black on a light
   gradient, white on a dark one. The default is the dark pair. */
.card-fill h3, .card-fill b{color:var(--fill-ink,#14100d);}
.card-fill p, .card-fill span{color:var(--fill-ink-soft,rgba(20,16,13,.82));}

/* ---- spec row: label left, value right -------------------------------
   The value is what the reader compares down the column, so it holds the
   right edge and never breaks. The label takes whatever is left and wraps
   instead, because a label reads fine over two lines and a measurement
   does not.

   Without this, "2,240 × 1,800 mm" broke after the figure and dropped its
   unit onto a second line, which pushed that one value out of the column
   and left the list looking ragged. The longer the language, the more
   often it happened — "Paso entre columnas" is half again the width of
   "Tie bar clearance".                                                  */
.spec-mini li, .offer-specs li{gap:1.2em;align-items:baseline;}
.spec-mini li > span, .offer-specs li > span{flex:1 1 auto;min-width:0;}
.spec-mini b, .offer-specs b{flex:none;text-align:right;white-space:nowrap;}
/* …except where a small button sits in a row of wide ones, and its label
   is a sentence too */
.sheetbtns .btn-sm, .mcard-btns .btn-sm{white-space:normal;}