/* ==========================================================================
   Cardexa · base compartilhada pelas páginas novas (home e Captura).
   Fontes self-hosted (app/fonts/), tokens, botões, cabeçalho, imagens do
   produto, hero, seções, contato e rodapé. O que é de uma página só fica no
   CSS dela (home.css, captura.css).
   ========================================================================== */

/* ==== fontes (self-hosted, do design original) ==== */
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/afa30393-11ac-4415-b04a-9043fba11519.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/a92d7bed-1855-4407-82c7-26086b195ff3.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/6e9938c4-d4e1-4e03-a666-8121b56b9ccd.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/bb6d8393-f48c-4cbe-bf33-78a34062382f.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/30e8ce0e-ae21-4897-abe0-c319693fd606.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/ed31d6f9-a1e0-4057-aee2-15514eefdd3d.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/ad9ab931-7a13-428a-9827-e761126e84ab.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/a938e149-6c1b-4721-b907-a8ba5c237871.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/99654421-bacc-4fad-af48-8e69d75a9f89.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/3b9ac1d5-4457-478e-bd3b-d37787dadae1.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/3defcc9f-cf7f-40b5-8ad6-e10c7c74ac3d.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/c6f166bc-31f7-4205-bff6-c25f37ffc0b0.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/0daafa85-f4bd-4f4f-8b0d-288755c8ff6c.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/cbab5a20-23f1-4484-a4a6-f8ecfef3d627.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/34589ace-6639-42ac-b897-7cb325c39c58.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/19a8041d-64fb-4b78-a36c-418bac5a7ceb.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/f2c33776-0d59-49c1-8627-82b78b248d85.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/d7dd0371-f40e-4bac-bc38-d1fd251e53b3.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/a520e319-ca9c-4aec-919e-71e6173d4571.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/bfb94a14-9a52-4cc8-9b16-01d511ab2e70.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/31c4c12a-806e-48fe-85d4-5dd1df86fbc7.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/19a8041d-64fb-4b78-a36c-418bac5a7ceb.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/f2c33776-0d59-49c1-8627-82b78b248d85.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/d7dd0371-f40e-4bac-bc38-d1fd251e53b3.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/a520e319-ca9c-4aec-919e-71e6173d4571.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/bfb94a14-9a52-4cc8-9b16-01d511ab2e70.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/31c4c12a-806e-48fe-85d4-5dd1df86fbc7.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/19a8041d-64fb-4b78-a36c-418bac5a7ceb.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/f2c33776-0d59-49c1-8627-82b78b248d85.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/d7dd0371-f40e-4bac-bc38-d1fd251e53b3.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/a520e319-ca9c-4aec-919e-71e6173d4571.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/bfb94a14-9a52-4cc8-9b16-01d511ab2e70.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/31c4c12a-806e-48fe-85d4-5dd1df86fbc7.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/19a8041d-64fb-4b78-a36c-418bac5a7ceb.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/f2c33776-0d59-49c1-8627-82b78b248d85.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/d7dd0371-f40e-4bac-bc38-d1fd251e53b3.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/a520e319-ca9c-4aec-919e-71e6173d4571.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/bfb94a14-9a52-4cc8-9b16-01d511ab2e70.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/31c4c12a-806e-48fe-85d4-5dd1df86fbc7.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;
}

/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/8837dced-2edf-42ef-8d0e-6e876abd495e.woff2") format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Tokens
   Base da marca: navy #0B1020 e verde-petróleo #08655A. O verde claro
   (#22E0C8) fica restrito a detalhes pontuais; não vai em botão nem título.
   Fundo alternativo em cinza levemente quente. Dois raios só: 8 e 14 px.
   ========================================================================== */
:root{
  --deep:#0B1020; --primary:#08655A; --primary-dk:#064E46; --neon:#22E0C8;
  --ink:#14171F; --ink2:#3A3F48; --ink3:#676C75; --ink4:#A9ADB4;
  --rule:#E3DFD7; --rule2:#D4CFC5; --paper:#F5F3EE; --white:#ffffff;
  --on-deep:#C9CED8; --on-deep2:#8E95A3;
  --ok:#1E9E5A;
  --r1:8px; --r2:14px;
  --wrap:1180px; --gutter:clamp(18px,3vw,32px);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Aliases usados por form.css (compartilhado com a index). */
:root{
  --brand:var(--primary); --light:var(--neon);
  --n900:var(--ink); --n700:var(--ink2); --n500:var(--ink3); --n400:var(--ink4);
  --n200:var(--rule2); --n100:var(--rule); --n50:var(--paper);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'IBM Plex Sans',Helvetica,system-ui,sans-serif;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;text-wrap:pretty;overflow-x:hidden;}
a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--deep);}
img{max-width:100%;display:block;}
h1,h2,h3{margin:0;text-wrap:balance;}
p{margin:0;}

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


/* ==========================================================================
   Botões
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:var(--r1);font-weight:600;font-size:16px;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;}
.btn--dark{background:var(--deep);color:#fff;}
.btn--dark:hover{background:var(--primary);color:#fff;}
.btn--light{background:#fff;color:var(--deep);}
.btn--light:hover{background:var(--paper);color:var(--deep);}
.btn--ghost{color:#fff;border-color:rgba(255,255,255,.3);}
.btn--ghost:hover{background:rgba(255,255,255,.08);color:#fff;}
.btn--line{color:var(--primary);border-color:var(--rule2);background:#fff;}
.btn--line:hover{border-color:var(--primary);color:var(--primary);}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */
.topo{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px;}
.marca{display:flex;align-items:baseline;gap:10px;color:var(--ink);}
.marca:hover{color:var(--ink);}
.marca__logo{font-size:23px;font-weight:700;letter-spacing:-.02em;}
.marca__logo span{color:var(--primary);}
.marca__produto{font-size:16px;font-weight:500;color:var(--ink3);padding-left:10px;border-left:1px solid var(--rule2);}
.topo nav{display:flex;align-items:center;gap:clamp(14px,2.1vw,28px);flex-wrap:wrap;}
.topo nav a{color:var(--ink2);font-size:15px;font-weight:500;}
.topo nav a:hover{color:var(--primary);}
.topo nav a.topo__sec{color:var(--ink3);}
.topo nav .btn{height:42px;padding:0 18px;font-size:15px;color:#fff;}

/* ==========================================================================
   Imagens do produto
   Cada <figure class="tela"> recebe uma captura real do app/portal.
   O js/telas.js marca a figura com
   .tela--ok quando a imagem carrega; até lá a figura fica escondida e o
   layout ao redor fica em uma coluna.
   ========================================================================== */
.tela{margin:0;min-width:0;display:none;}
.tela--ok{display:block;}
.tela img{width:100%;height:auto;border-radius:var(--r2);border:1px solid var(--rule);background:var(--paper);}
.tela--celular img{border-radius:var(--r2);box-shadow:0 18px 40px rgba(11,16,32,.14);}
.tela figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink3);}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{background:var(--deep);color:#fff;}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center;padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px);}
.hero__in:has(.tela--ok){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
.hero h1{font-size:clamp(38px,5.4vw,64px);line-height:1.02;font-weight:700;letter-spacing:-.035em;max-width:20ch;}
.hero__in:has(.tela--ok) h1{max-width:16ch;}
.hero__sub{margin-top:26px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--on-deep);max-width:680px;}
.hero__in:has(.tela--ok) .hero__sub{max-width:560px;}
.hero__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}
.hero .tela{justify-self:center;width:100%;max-width:330px;}
.hero .tela img{border-color:rgba(255,255,255,.12);box-shadow:0 30px 60px rgba(0,0,0,.35);}
.hero .tela figcaption{color:var(--on-deep2);}

/* ==========================================================================
   Seções: cabeçalho de seção e ritmo
   ========================================================================== */
.secao{padding:clamp(64px,8vw,112px) 0;}
.secao--papel{background:var(--paper);}
.secao--curta{padding:clamp(48px,6vw,80px) 0;}
.secao--linha{border-top:1px solid var(--rule);}

.h2{font-size:clamp(28px,3.2vw,38px);line-height:1.1;font-weight:700;letter-spacing:-.025em;}
.h2--grande{font-size:clamp(34px,4.6vw,56px);line-height:1.02;letter-spacing:-.035em;}
.lead{margin-top:18px;font-size:18px;line-height:1.6;color:var(--ink2);max-width:640px;}

/* ==========================================================================
   Contato
   ========================================================================== */
.contato{background:var(--deep);color:#fff;}
.contato__in{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center;}
.contato h2{color:#fff;}
.contato .lead{color:var(--on-deep);}
.contato__lista{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;font-size:15px;line-height:1.5;color:var(--on-deep);}
.contato__lista li{padding-left:20px;position:relative;}
.contato__lista li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--neon);}

/* Ajustes do formulário compartilhado (form.css) para esta página. */
.contact-card{border-radius:var(--r2);}
.contato-form .botao-enviar{background:var(--deep);border-radius:var(--r1);}
.contato-form .botao-enviar:hover{background:var(--primary);}
.contato-form .form-nota{font-family:inherit;}
.form-status{border-radius:var(--r1);}

/* ==========================================================================
   Rodapé
   ========================================================================== */
.rodape{background:var(--ink);padding:56px 0 36px;color:var(--ink4);}
.rodape__topo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-start;}
.rodape .marca{color:#fff;}
.rodape .marca__logo span{color:var(--neon);}
.rodape .marca__produto{color:var(--ink4);border-color:#3A3F48;}
.rodape__desc{margin-top:12px;max-width:360px;font-size:14px;line-height:1.6;}
.rodape nav{display:flex;gap:clamp(32px,5vw,64px);flex-wrap:wrap;}
.rodape nav div{display:flex;flex-direction:column;gap:10px;}
.rodape__grupo{font-size:13px;font-weight:600;color:#fff;margin-bottom:2px;}
.rodape nav a{color:var(--on-deep);font-size:14px;}
.rodape nav a:hover{color:#fff;}
.rodape__legal{margin-top:36px;border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;}

/* ==========================================================================
   Responsivo (base)
   ========================================================================== */
@media (max-width:900px){
  .hero__in,.hero__in:has(.tela--ok),.contato__in{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:560px){
  .topo nav a:not(.btn){display:none;}
  .topo__in{flex-wrap:nowrap;gap:10px;}
  .marca{gap:8px;}
  .marca__logo{font-size:21px;}
  .marca__produto{font-size:15px;padding-left:8px;}
  .topo nav .btn{height:38px;padding:0 12px;font-size:13px;white-space:nowrap;}
}