/* ============================================================
   Tornillos y Servicios Ferreteros MG — Design System
   Global entry point. @import only — no rules here.
   Consumers link this single file.
   ============================================================ */

/* ============================================================
   FONTS — Tornillos MG Design System
   Display : Oswald        — condensed industrial headlines (uppercase)
   Body    : IBM Plex Sans — technical, neutral, serious body copy
   Mono    : IBM Plex Mono — fastener specs, part numbers, dimensions
   Loaded from Google Fonts CDN. See readme.md "Font substitution" note.
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/491e433e-7b62-4d2b-a8c4-dbb752c0967f.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fa8da083-a32b-4efe-85e7-a7ec2b1d00a1.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/afebde17-8269-4f6b-b7a2-0c9a658203a1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/e4eb320c-0935-43f3-afff-75b5b36a3aa0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/beff02fd-8b79-4fe3-a48c-ae58af95bb27.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/426a34b0-8ba7-445b-8b8f-f4882399ae4b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/478d346e-f8e8-455d-a9d3-9bb744ff0c87.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/c86b0f95-db56-4384-941d-93d54405ed52.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/22d55d73-ea51-4b6e-b0fb-b064cf42558d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/05dc1d8a-b794-4c14-be12-d1e810ca4601.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fdd9a84d-e676-41d9-a734-a10be9d8fbbd.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/85b9f1ea-05d0-4204-ab38-67ed00bad969.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/4a87211a-5cf9-4db4-b063-41b6b6119d88.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/74cb4dde-a451-4ea6-ae82-a603cf713670.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/b35ab045-e958-454d-b20b-9fe916c6e5ad.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/36db6a87-7a07-4606-9933-4bd972b09d09.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f4a9cb55-294e-41c4-9c0a-1ef759bcce22.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/87f63826-247c-407d-bc5e-42c7ef750b65.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/71477eac-ca8b-42f6-9d29-73713cda771f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/71fadc6b-9abc-481c-a33b-9505a771a749.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/85f3f7e3-f0de-4508-b75b-8f4b02fc9ba3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/0e6fcfe6-2676-44bc-baa3-11c633661fa8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f20e3bc5-bd0e-46fe-a4fc-28a558798426.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/2d6e1498-b5b5-4a18-9045-e85dd5b8fdb5.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/0c56e598-e823-4c82-a572-8f238e4a4bf5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f3b43d09-141d-4962-9439-b36a27ec4b7f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/677ba77a-1b16-4e14-8c8e-855776991721.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/0e6fcfe6-2676-44bc-baa3-11c633661fa8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f20e3bc5-bd0e-46fe-a4fc-28a558798426.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/2d6e1498-b5b5-4a18-9045-e85dd5b8fdb5.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/0c56e598-e823-4c82-a572-8f238e4a4bf5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f3b43d09-141d-4962-9439-b36a27ec4b7f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/677ba77a-1b16-4e14-8c8e-855776991721.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/0e6fcfe6-2676-44bc-baa3-11c633661fa8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f20e3bc5-bd0e-46fe-a4fc-28a558798426.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/2d6e1498-b5b5-4a18-9045-e85dd5b8fdb5.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/0c56e598-e823-4c82-a572-8f238e4a4bf5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f3b43d09-141d-4962-9439-b36a27ec4b7f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/677ba77a-1b16-4e14-8c8e-855776991721.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/0e6fcfe6-2676-44bc-baa3-11c633661fa8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f20e3bc5-bd0e-46fe-a4fc-28a558798426.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/2d6e1498-b5b5-4a18-9045-e85dd5b8fdb5.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/0c56e598-e823-4c82-a572-8f238e4a4bf5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f3b43d09-141d-4962-9439-b36a27ec4b7f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/677ba77a-1b16-4e14-8c8e-855776991721.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fc9cdc11-7d26-41dd-876d-95b6d5c8ce40.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/d7bfacc9-1abe-4327-badd-5464348475f9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/5e83ebe0-2f17-4dcd-972e-b1bd879514ea.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/e5d90cd9-d686-44ff-af39-a5de3778fbfc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/af01d0b1-de7a-4007-aa51-4544b343eda6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fc9cdc11-7d26-41dd-876d-95b6d5c8ce40.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/d7bfacc9-1abe-4327-badd-5464348475f9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/5e83ebe0-2f17-4dcd-972e-b1bd879514ea.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/e5d90cd9-d686-44ff-af39-a5de3778fbfc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/af01d0b1-de7a-4007-aa51-4544b343eda6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fc9cdc11-7d26-41dd-876d-95b6d5c8ce40.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/d7bfacc9-1abe-4327-badd-5464348475f9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/5e83ebe0-2f17-4dcd-972e-b1bd879514ea.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/e5d90cd9-d686-44ff-af39-a5de3778fbfc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/af01d0b1-de7a-4007-aa51-4544b343eda6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fc9cdc11-7d26-41dd-876d-95b6d5c8ce40.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/d7bfacc9-1abe-4327-badd-5464348475f9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/5e83ebe0-2f17-4dcd-972e-b1bd879514ea.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/e5d90cd9-d686-44ff-af39-a5de3778fbfc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/af01d0b1-de7a-4007-aa51-4544b343eda6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   COLORS — Tornillos MG
   Brand palette derived from the real logo (sampled pixels):
     · Brick red   rgb(176,48,32)  — TORNILLOS / the MG shield
     · Deep red    #4E1815         — "Y SERVICIOS FERRETEROS"
     · Charcoal-green #1A2321       — logo background / dark surfaces
   Warm-neutral greige neutrals, brass as a rare tertiary.
   Base scales first, then semantic aliases. Use semantic tokens.
   ============================================================ */

:root {
  /* ---- Brick Red (brand primary / CTA) ---- */
  --red-900: #34110D;
  --red-800: #4E1815;   /* deep red — "Y SERVICIOS FERRETEROS" */
  --red-700: #6E2117;
  --red-600: #8E2A1B;
  --red-500: #B23A28;   /* primary brick red — the brand red */
  --red-400: #C75A45;
  --red-300: #DD897A;
  --red-100: #F7DDD7;

  /* ---- Charcoal-Green (brand dark / ink) ---- */
  --ink-950: #0F1513;
  --ink-900: #1A2321;   /* logo background */
  --ink-800: #24302D;
  --ink-700: #324440;
  --ink-600: #425853;
  --ink-500: #56706A;

  /* ---- Warm-neutral greige (neutrals) ---- */
  --steel-50:  #F6F6F4;
  --steel-100: #ECECE8;
  --steel-200: #DEDED9;
  --steel-300: #C5C6BF;
  --steel-400: #9D9E96;
  --steel-500: #76776F;
  --steel-600: #5B5C55;
  --steel-700: #43443E;
  --steel-800: #2C2D28;
  --steel-900: #1B1C18;

  /* ---- True ink / paper ---- */
  --black: #0E0F0C;
  --white: #FFFFFF;

  /* ---- Brass (rare tertiary — fastener metal warmth) ---- */
  --amber-500: #B5862F;
  --amber-400: #CBA04A;
  --amber-100: #F0E4C6;

  /* ---- Functional ---- */
  --green-600: #2E7D52;
  --green-100: #DBEFE2;
  --alert-600: #C5402F;
  --alert-100: #F7DCD7;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */

  /* Surfaces & backgrounds */
  --bg-page:        var(--steel-50);
  --surface-card:   var(--white);
  --surface-sunken: var(--steel-100);
  --surface-dark:   var(--ink-900);
  --surface-darker: var(--ink-950);
  --surface-steel:  var(--ink-800);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--steel-700);
  --text-muted:    var(--steel-500);
  --text-on-dark:  var(--steel-100);
  --text-on-dark-muted: var(--steel-400);
  --text-on-accent: var(--white);

  /* Accent / brand */
  --accent:        var(--red-500);
  --accent-strong: var(--red-600);
  --accent-press:  var(--red-700);
  --accent-soft:   var(--red-100);
  --signal:        var(--amber-500);
  --brand:         var(--ink-900);

  /* Borders & lines */
  --border-soft:   var(--steel-200);
  --border:        var(--steel-300);
  --border-strong: var(--steel-400);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* Focus ring */
  --focus-ring: var(--red-500);

  /* Caution stripe (deep red / charcoal) — thin dividers & accent bands only */
  --hazard-stripes: repeating-linear-gradient(
    -45deg,
    var(--red-700) 0 16px,
    var(--ink-950) 16px 32px
  );
}

/* ============================================================
   TYPOGRAPHY — Tornillos MG
   Display: Oswald (condensed, uppercase headlines, tight tracking)
   Body:    IBM Plex Sans
   Mono:    IBM Plex Mono (specs: M12 × 80, Ø, rosca, part #)
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* ---- Display / heading scale (Oswald) ---- */
  --text-display:  clamp(2.75rem, calc(1.6rem + 4.6vw), 5rem);   /* hero */
  --text-h1: clamp(2.1rem, calc(1.4rem + 2.8vw), 3.4rem);
  --text-h2: clamp(1.6rem, calc(1.2rem + 1.7vw), 2.4rem);
  --text-h3: clamp(1.3rem, calc(1.1rem + 0.9vw), 1.6rem);
  --text-h4: 1.15rem;

  /* ---- Body scale (IBM Plex Sans) ---- */
  --text-lead: clamp(1.05rem, calc(0.98rem + 0.4vw), 1.3rem);
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* ---- Mono / label ---- */
  --text-spec: 0.9375rem;
  --text-eyebrow: 0.8125rem;   /* uppercase kicker */

  /* ---- Line heights ---- */
  --lh-tight: 1.02; /* @kind other */
  --lh-snug: 1.18; /* @kind other */
  --lh-body: 1.6; /* @kind other */
  --lh-relaxed: 1.7; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-display: -0.01em;
  --ls-tight: -0.005em;
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.08em;
  --ls-eyebrow: 0.18em;   /* uppercase kicker / eyebrow */
  --ls-mono: 0.02em;
}

/* ---- Optional helper classes (components may use tokens directly) ---- */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.ds-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.ds-spec {
  font-family: var(--font-mono);
  font-size: var(--text-spec);
  letter-spacing: var(--ls-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   SPACING, RADII, LAYOUT — Tornillos MG
   8px base grid. Tight, ordered, structural. Industrial brands
   favor small radii (machined edges) — nothing pill-soft.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---- Section rhythm ---- */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); /* @kind spacing */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 0.5rem + 3vw, 4rem);

  /* ---- Radii (small, machined) ---- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hairline: 1px;
  --bw-bold: 2px;
  --bw-heavy: 4px;     /* accent rules / left markers */

  /* ---- Z-index ---- */
  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-toast: 1100; /* @kind other */
}

/* ============================================================
   ELEVATION & EFFECTS — Tornillos MG
   Restrained, grounded shadows (charcoal-green tinted, not soft gray).
   Cards read as solid metal plates: hairline border + low shadow.
   ============================================================ */

:root {
  /* ---- Shadows (ink-tinted, crisp) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 21, 19, 0.10);
  --shadow-sm: 0 1px 3px rgba(15, 21, 19, 0.12), 0 1px 2px rgba(15, 21, 19, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 21, 19, 0.12), 0 2px 4px rgba(15, 21, 19, 0.08);
  --shadow-lg: 0 12px 28px rgba(15, 21, 19, 0.20), 0 4px 8px rgba(15, 21, 19, 0.10);
  --shadow-accent: 0 6px 18px rgba(178, 58, 40, 0.30);

  /* ---- Inset (pressed / sunken fields) ---- */
  --shadow-inset: inset 0 1px 2px rgba(15, 21, 19, 0.12);

  /* ---- Focus ring ---- */
  --ring: 0 0 0 3px rgba(178, 58, 40, 0.35);
  --ring-navy: 0 0 0 3px rgba(50, 68, 64, 0.40);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

/* ============================================================
   COMPONENT INTERACTION STATES — Tornillos MG
   Components set base appearance via inline styles (token-driven);
   this file adds hover / active / focus enhancements via class hooks
   (.dsmg-*). Shipped through styles.css so consumers get both.
   ============================================================ */

/* ---- Button ---- */
.dsmg-btn { -webkit-tap-highlight-color: transparent; }
.dsmg-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.dsmg-btn--primary:hover { background: var(--accent-strong) !important; border-color: var(--accent-strong) !important; box-shadow: var(--shadow-accent); transform: translateY(-1px); }
.dsmg-btn--primary:active { background: var(--accent-press) !important; border-color: var(--accent-press) !important; transform: translateY(0); box-shadow: none; }

.dsmg-btn--secondary:hover { background: var(--ink-800) !important; border-color: var(--ink-800) !important; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.dsmg-btn--secondary:active { background: var(--ink-950) !important; transform: translateY(0); box-shadow: none; }

.dsmg-btn--outline:hover { border-color: var(--accent) !important; color: var(--accent-strong) !important; }
.dsmg-btn--outline:active { background: var(--steel-100) !important; }

.dsmg-btn--ghost:hover { color: var(--accent-press) !important; background: var(--accent-soft) !important; }

.dsmg-btn--on-dark:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ---- Card lift ---- */
.dsmg-card--interactive { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.dsmg-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border); }

/* ---- Product / service tile accent rule reveal ---- */
.dsmg-tile:hover .dsmg-tile__rule { width: 56px; }

/* ---- Inputs ---- */
.dsmg-field:focus { outline: none; border-color: var(--accent) !important; box-shadow: var(--ring); }
.dsmg-field::placeholder { color: var(--steel-400); }

/* ---- Tag / Badge hover (when clickable) ---- */
.dsmg-tag--clickable:hover { border-color: var(--border-strong) !important; background: var(--steel-100) !important; }


@media (max-width:900px){.dsmg-nav,.dsmg-headphone{display:none !important;}}