/* ==================================================================
   LP Programa de Trainee Inpasa 2027 — fase 2 (KV oficial)

   A página segue o KV que o cliente enviou em out/2026. Quatro
   elementos do KV sustentam tudo:

     1. LOSANGO  — foto recortada em diamante, com a pessoa saindo dele
     2. ONDAS    — as linhas onduladas do kit (grafismo 02) no laranja
     3. CHEVRON  — a seta âmbar (grafismo 13) apontando para frente
     4. TARJA    — texto branco em caixa azul, como a assinatura do KV

   PALETA — medida no GIF do KV e nos PNG do kit de grafismos:
     #EA5016  laranja do KV         fundo do hero, Benefícios e CTA
     #F2691C  laranja claro do KV   as ondas sobre o laranja
     #CC5121  laranja do kit        laranja para texto pequeno (5,9:1)
     #EAA238  amarelo do kit        chevrons (= âmbar do relatório)
     #30507F  azul do kit           títulos, faixa escura, rodapé
     #007CC5  azul claro do kit     tarjas e botões (4,6:1 com branco)
     #F4F3F3 / #BDC1C2 / #666666   neutros do material institucional

   CONTRASTE: branco sobre o laranja do KV dá 3,7:1. Passa para texto
   grande (título, número, lead em negrito ≥ 19px) e não passa para
   corpo. Por isso, sobre o laranja, texto pequeno sempre vai dentro de
   tarja azul ou de card branco — nunca solto.

   GRAFISMOS: os 16 do kit estão em img/graficos/gNN.svg, extraídos dos
   .ai do cliente. Os que a página usa vão EMBUTIDOS aqui (data URI):
   máscara com arquivo externo é bloqueada quando a página abre sem
   servidor (file://), e aí a foto mascarada some inteira. Entram como mask-image e quem dá a cor é o
   background: currentColor — então um SVG serve para todas as cores.

   Tipografia: Montserrat, a fonte do site da Inpasa (pedido do
   cliente em 22/10). Os font-stretch que sobraram da Archivo não têm
   efeito nela. Troca: --display e o tailwind.config.
   ================================================================== */

:root {
  --laranja: #EA5016;
  --claro:   #F2691C;
  --tijolo:  #CC5121;
  --ambar:   #EAA238;
  --azul:    #30507F;
  --vivo:    #007CC5;
  --fundo:   #F4F3F3;
  --cinza:   #BDC1C2;
  --texto:   #666666;

  --display: 'Montserrat', Arial, sans-serif;

  --rule-dark:  rgba(48, 79, 126, .16);
  --rule-light: rgba(255, 255, 255, .22);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 80px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  overflow-x: hidden;
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  background: #fff;
}

::selection { background: var(--laranja); color: #fff; }

:focus-visible { outline: 2px solid var(--vivo); outline-offset: 3px; }

.secao-laranja :focus-visible,
footer :focus-visible { outline-color: #fff; }

.secao { position: relative; overflow: hidden; }

/* ==================================================================
   GRAFISMOS DO KIT
   Um elemento vazio pintado com currentColor e recortado pelo SVG.
   ================================================================== */

.graf {
  display: block;
  background: currentColor;
  -webkit-mask: var(--g) center / contain no-repeat;
          mask: var(--g) center / contain no-repeat;
  pointer-events: none;
}

.graf-ondas     { --g: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22294.51%22 viewBox=%220 0 400 294.51%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3CclipPath id=%22clip_1%22%3E%3Cpath transform=%22matrix(1,0,0,-1,0,294.51)%22 d=%22M0 294.51H400V0H0Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%3E%3Cg clip-path=%22url(%23clip_1)%22%3E%3Cpath transform=%22matrix(1,0,0,-1,21.1159,296.4798)%22 d=%22M0 0-8.461 17.364C-8.601 17.296-8.671 17.246-8.671 17.246-8.64 17.268-5.466 19.64-.841 32.466 3.165 43.575 5.668 55.528 6.602 67.991 8.565 94.208 13.313 152.448 16.149 187.245 17.138 199.361 17.907 208.799 18.271 213.35 19.848 233.052 29.694 243.55 41.095 255.705 44.276 259.096 47.565 262.603 50.987 266.616 57.829 274.64 59.279 292.661 59.246 298.342L78.562 298.449C78.578 295.474 78.358 268.946 65.684 254.083 61.965 249.723 58.362 245.881 55.183 242.491 44.818 231.441 38.562 224.771 37.525 211.81 37.161 207.255 36.39 197.805 35.401 185.675 32.566 150.902 27.821 92.702 25.863 66.549 24.8 52.341 21.929 38.67 17.329 25.914 12.042 11.256 6.698 3.264 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,47.921,295.7468)%22 d=%22M0 0-7.747 15.899C-7.747 15.898-7.747 15.898-7.749 15.898-7.77 15.898-4.485 18.241 .282 31.456 4.313 42.631 6.832 54.656 7.77 67.197 10.388 102.154 17.827 193.154 19.442 212.58 21.066 232.063 30.9 242.545 42.287 254.682 45.415 258.015 48.648 261.461 51.958 265.349 58.917 273.528 60.285 290.987 60.226 297.023L77.908 297.239C77.946 294.348 77.913 268.562 65.425 253.886 61.836 249.671 58.302 245.904 55.184 242.581 44.943 231.666 38.177 224.455 37.065 211.113 35.451 191.704 28.019 100.784 25.407 65.877 24.348 51.738 21.491 38.138 16.918 25.456 11.708 11.014 6.491 3.163 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,74.7249,295.01393)%22 d=%22M0 0-7.033 14.433C-7.034 14.434-3.597 16.574 1.407 30.447 5.463 41.695 7.998 53.793 8.941 66.403 11.505 100.657 18.991 193.021 20.613 211.805 22.284 231.071 32.58 242.041 43.48 253.656 46.553 256.931 49.731 260.318 52.933 264.083 60.08 272.5 61.329 289.752 61.207 295.689L77.259 296.019C77.315 293.211 77.466 268.172 65.166 253.688 61.708 249.619 58.392 246.086 55.185 242.67 45.091 231.913 37.797 224.141 36.608 210.421 34.988 191.665 27.511 99.418 24.95 65.205 23.899 51.145 21.059 37.618 16.508 25 11.446 10.965 6.2 3.021 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,101.5287,294.281)%22 d=%22M0 0-6.319 12.967C-6.284 12.984-2.697 14.939 2.53 29.436 6.611 40.754 9.162 52.924 10.112 65.61 12.744 100.787 20.221 193.568 21.786 211.025 23.499 230.077 33.783 241.032 44.671 252.63 47.691 255.847 50.815 259.174 53.907 262.817 61.146 271.361 62.34 288.503 62.187 294.387L76.607 294.788C76.638 293.702 77.224 268.023 64.908 253.488 61.577 249.565 58.329 246.104 55.187 242.757 44.872 231.77 37.419 223.831 36.152 209.735 34.59 192.314 27.124 99.67 24.496 64.533 23.448 50.544 20.624 37.09 16.098 24.544 11.115 10.723 6 2.924 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,128.3325,293.548)%22 d=%22M0 0-5.605 11.501C-5.449 11.577-1.715 13.537 3.654 28.427 7.761 39.814 10.327 52.057 11.283 64.816 13.904 99.85 21.324 192.667 22.957 210.24 24.713 229.082 34.986 240.022 45.862 251.603 48.829 254.763 51.897 258.029 54.882 261.553 62.267 270.285 63.369 287.275 63.17 293.084L75.954 293.548C75.994 292.496 76.767 267.618 64.646 253.288 61.446 249.51 58.265 246.122 55.188 242.846 45.051 232.051 37.044 223.524 35.695 209.055 34.067 191.53 26.66 98.856 24.039 63.861 22.998 49.946 20.188 36.564 15.688 24.088 10.781 10.479 5.796 2.825 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,155.1363,292.81513)%22 d=%22M0 0-4.891 10.035C-4.201 10.37-.499 12.786 4.779 27.418 8.91 38.871 11.491 51.186 12.452 64.023 14.932 97.147 22.385 191.305 24.127 209.449 25.924 228.085 36.188 239.011 47.056 250.578 49.968 253.679 52.981 256.886 55.859 260.289 64.936 271.046 64.161 291.587 64.153 291.794L75.304 292.296C75.351 291.278 76.303 267.21 64.386 253.085 61.316 249.455 58.202 246.14 55.191 242.935 45.253 232.356 36.669 223.22 35.238 208.38 33.6 191.31 26.327 99.836 23.584 63.189 22.548 49.344 19.753 36.035 15.28 23.631 10.447 10.234 5.593 2.725 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,181.9401,292.08213)%22 d=%22M0 0-4.174 8.569C-3.138 9.074 .653 11.854 5.903 26.408 10.059 37.931 12.655 50.319 13.622 63.228 16.411 100.475 23.574 191.299 25.298 208.653 27.135 227.085 37.867 238.506 48.247 249.551 51.106 252.594 54.063 255.74 56.836 259.026 66.096 270.023 65.145 290.31 65.134 290.514L74.652 291.031C74.705 290.047 75.839 266.794 64.124 252.882 61.184 249.398 58.137 246.158 55.192 243.023 45.055 232.235 36.298 222.918 34.783 207.709 33.066 190.419 25.913 99.725 23.128 62.517 22.096 48.746 19.318 35.509 14.87 23.175 10.114 9.99 5.389 2.626 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,208.7439,291.3492)%22 d=%22M0 0-3.46 7.103C-2.041 7.795 1.822 10.962 7.026 25.399 11.208 36.994 13.822 49.454 14.794 62.435 17.463 98.101 24.64 190.025 26.467 207.852 28.342 226.085 39.066 237.492 49.436 248.524 52.243 251.508 55.144 254.595 57.813 257.764 67.301 269.054 66.128 289.044 66.116 289.245L74.001 289.754C74.063 288.805 75.368 266.372 63.859 252.677 61.049 249.34 58.073 246.174 55.193 243.112 45.287 232.573 35.929 222.619 34.327 207.045 32.507 189.286 25.339 97.478 22.673 61.845 21.648 48.15 18.884 34.986 14.46 22.718 9.848 9.924 5.117 2.493 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,235.5477,290.6162)%22 d=%22M0 0-2.746 5.637C-1.238 6.373 2.844 9.671 8.151 24.389 12.358 36.054 14.986 48.587 15.963 61.641 18.519 95.77 25.743 189.136 27.638 207.046 29.548 225.082 40.264 236.476 50.627 247.496 53.379 250.422 56.225 253.449 58.791 256.503 68.431 267.999 67.111 287.799 67.096 287.997L73.35 288.462C73.417 287.548 74.891 265.942 63.594 252.471 60.914 249.281 58.007 246.189 55.195 243.199 45.099 232.464 35.563 222.323 33.873 206.386 31.987 188.544 24.771 95.275 22.217 61.172 21.198 47.552 18.45 34.461 14.05 22.262 9.514 9.678 4.918 2.396 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,262.3516,289.8833)%22 d=%22M0 0-2.032 4.171C-.047 5.139 4.062 8.921 9.275 23.38 13.507 35.113 16.15 47.719 17.134 60.847 20.001 99.146 26.921 188.928 28.806 206.235 30.753 224.077 41.461 235.46 51.816 246.467 54.64 249.468 57.306 252.303 59.77 255.243 69.61 267 68.093 286.565 68.077 286.761L72.701 287.154C72.776 286.276 74.41 265.505 63.329 252.264 60.777 249.22 57.941 246.204 55.196 243.287 45.365 232.836 35.198 222.029 33.419 205.731 31.541 188.484 24.627 98.776 21.761 60.501 20.748 46.954 18.015 33.935 13.64 21.805 9.179 9.431 4.717 2.298 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,289.1554,289.1503)%22 d=%22M0 0-1.318 2.705C1.242 3.953 5.353 8.377 10.4 22.37 14.656 34.17 17.315 46.849 18.303 60.053 21.521 103.026 28.1 188.711 29.974 205.418 31.957 223.074 43.142 234.958 53.009 245.443 55.775 248.381 58.388 251.157 60.753 253.986 70.794 266.011 69.075 285.348 69.056 285.542L72.053 285.831C72.133 284.989 73.921 265.06 63.062 252.055 60.641 249.159 57.999 246.352 55.202 243.379 45.19 232.741 34.837 221.741 32.965 205.083 31.096 188.42 24.521 102.783 21.305 59.828 20.296 46.352 17.58 33.406 13.232 21.349 8.905 9.353 4.453 2.169 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,315.9605,288.418)%22 d=%22M0 0-.604 1.241C3.261 3.124 7.455 10.081 11.522 21.361 15.804 33.231 18.479 45.982 19.472 59.26 22.306 97.118 29.117 187.064 31.14 204.597 33.156 222.067 44.334 233.938 54.196 244.412 56.907 247.291 59.467 250.011 61.733 252.73 71.987 265.033 70.052 284.15 70.032 284.342L71.403 284.49C71.491 283.684 73.427 264.607 62.792 251.846 60.501 249.095 57.926 246.361 55.2 243.466 45.486 233.148 34.474 221.453 32.511 204.439 30.49 186.931 23.682 97.007 20.849 59.157 19.845 45.754 17.143 32.881 12.821 20.894 8.568 9.103 4.255 2.073 0 0%22 fill=%22%23000%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.graf-asterisco { --g: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22 viewBox=%220 0 400 400%22%3E%3Cg%3E%3Cpath transform=%22matrix(1,0,0,-1,389.3333,174.7556)%22 d=%22M0 0H-95.12L-12.744 47.56-37.988 91.284-120.365 43.724-72.805 126.101-116.529 151.345-164.089 68.969V164.089H-214.578V68.969L-262.138 151.345-305.862 126.101-258.302 43.724-340.678 91.284-365.923 47.56-283.546 0H-378.667V-50.489H-283.546L-365.923-98.049-340.678-141.773-258.302-94.213-305.862-176.59-262.138-201.834-214.578-119.458V-214.578H-164.089V-119.458L-116.529-201.834-72.805-176.59-120.365-94.213-37.988-141.773-12.744-98.049-95.12-50.489H0Z%22 fill=%22%23000%22/%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 1; }
.graf-flor      { --g: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22 viewBox=%220 0 400 400%22%3E%3Cdefs%3E%3CclipPath id=%22clip_1%22%3E%3Cpath transform=%22matrix(1,0,0,-1,0,400)%22 d=%22M0 400H400V0H0Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%3E%3Cg clip-path=%22url(%23clip_1)%22%3E%3Cpath transform=%22matrix(1,0,0,-1,389.3333,200)%22 d=%22M0 0C0 21.859-21.486 39.579-64.587 39.579-77.272 39.579-93.293 36.962-109.59 33.031-95.286 41.775-82.107 51.254-73.138 60.223-42.661 90.7-39.998 118.422-55.456 133.879-70.911 149.336-98.634 146.674-129.112 116.196-138.08 107.227-147.559 94.047-156.304 79.744-152.372 96.041-149.754 112.063-149.754 124.747-149.754 167.849-167.475 189.333-189.333 189.333-211.194 189.333-228.914 167.849-228.914 124.747-228.914 112.063-226.296 96.041-222.365 79.744-231.11 94.047-240.588 107.227-249.557 116.196-280.034 146.674-307.757 149.336-323.213 133.879-338.67 118.422-336.008 90.7-305.53 60.223-296.561 51.254-283.38 41.775-269.079 33.031-285.376 36.962-301.397 39.579-314.081 39.579-357.183 39.579-378.667 21.859-378.667 0-378.667-21.859-357.183-39.579-314.081-39.579-301.397-39.579-285.376-36.962-269.079-33.031-283.382-41.775-296.561-51.254-305.53-60.223-336.008-90.7-338.67-118.422-323.213-133.879-307.757-149.336-280.034-146.674-249.557-116.196-240.588-107.227-231.11-94.047-222.365-79.744-226.296-96.041-228.914-112.063-228.914-124.747-228.914-167.849-211.194-189.333-189.333-189.333-167.475-189.333-149.754-167.849-149.754-124.747-149.754-112.063-152.372-96.041-156.304-79.744-147.559-94.047-138.08-107.227-129.112-116.196-98.634-146.674-70.911-149.336-55.456-133.879-39.998-118.422-42.661-90.7-73.138-60.223-82.107-51.254-95.286-41.775-109.59-33.031-93.293-36.962-77.272-39.579-64.587-39.579-21.486-39.579 0-21.859 0 0%22 fill=%22%23000%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 1; }
.graf-alvo      { --g: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22 viewBox=%220 0 400 400%22%3E%3Cdefs%3E%3CclipPath id=%22clip_1%22%3E%3Cpath transform=%22matrix(1,0,0,-1,0,400)%22 d=%22M0 400H400V0H0Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%3E%3Cg clip-path=%22url(%23clip_1)%22%3E%3Cpath transform=%22matrix(1,0,0,-1,199.9998,26.262787)%22 d=%22M0 0C-95.799 0-173.737-77.937-173.737-173.735-173.737-269.537-95.799-347.476 0-347.476 95.798-347.476 173.736-269.537 173.736-173.735 173.736-77.937 95.798 0 0 0M0-363.07C-104.399-363.07-189.332-278.137-189.332-173.735-189.332-69.337-104.399 15.596 0 15.596 104.398 15.596 189.332-69.337 189.332-173.735 189.332-278.137 104.398-363.07 0-363.07%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,199.9998,284.9462)%22 d=%22M0 0C-46.838 0-84.944 38.106-84.944 84.949-84.944 131.787-46.838 169.892 0 169.892 46.838 169.892 84.944 131.787 84.944 84.949 84.944 38.106 46.838 0 0 0%22 fill=%22%23000%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 1; }
.graf-circulos  { --g: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22 viewBox=%220 0 400 400%22%3E%3Cdefs%3E%3CclipPath id=%22clip_1%22%3E%3Cpath transform=%22matrix(1,0,0,-1,0,400)%22 d=%22M0 400H400V0H0Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%3E%3Cg clip-path=%22url(%23clip_1)%22%3E%3Cpath transform=%22matrix(1,0,0,-1,200,22.06781)%22 d=%22M0 0C-98.112 0-177.932-79.819-177.932-177.931-177.932-276.045-98.112-355.865 0-355.865 98.112-355.865 177.932-276.045 177.932-177.931 177.932-79.819 98.112 0 0 0M0-365.842C-103.614-365.842-187.91-281.547-187.91-177.931-187.91-74.317-103.614 9.978 0 9.978 103.614 9.978 187.91-74.317 187.91-177.931 187.91-281.547 103.614-365.842 0-365.842%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,200,88.85031)%22 d=%22M0 0C-61.288 0-111.15-49.861-111.15-111.148-111.15-172.438-61.288-222.3 0-222.3 61.287-222.3 111.149-172.438 111.149-111.148 111.149-49.861 61.287 0 0 0M0-232.277C-66.79-232.277-121.127-177.94-121.127-111.148-121.127-44.359-66.79 9.978 0 9.978 66.789 9.978 121.127-44.359 121.127-111.148 121.127-177.94 66.789-232.277 0-232.277%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,200,155.6328)%22 d=%22M0 0C-24.463 0-44.367-19.903-44.367-44.366-44.367-68.832-24.463-88.735 0-88.735 24.463-88.735 44.366-68.832 44.366-44.366 44.366-19.903 24.463 0 0 0M0-98.712C-29.965-98.712-54.344-74.334-54.344-44.366-54.344-14.401-29.965 9.978 0 9.978 29.965 9.978 54.344-14.401 54.344-44.366 54.344-74.334 29.965-98.712 0-98.712%22 fill=%22%23000%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 1; }
.graf-pontos    { --g: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22 viewBox=%220 0 400 400%22%3E%3Cdefs%3E%3CclipPath id=%22clip_1%22%3E%3Cpath transform=%22matrix(1,0,0,-1,0,400)%22 d=%22M0 400H400V0H0Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%3E%3Cg clip-path=%22url(%23clip_1)%22%3E%3Cpath transform=%22matrix(1,0,0,-1,48.3091,111.34741)%22 d=%22M0 0C0-11.377-9.223-20.599-20.599-20.599-31.975-20.599-41.198-11.377-41.198 0-41.198 11.376-31.975 20.598-20.599 20.598-9.223 20.598 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,134.4542,111.34741)%22 d=%22M0 0C0-11.377-9.223-20.599-20.599-20.599-31.976-20.599-41.198-11.377-41.198 0-41.198 11.376-31.976 20.598-20.599 20.598-9.223 20.598 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,220.5982,111.34741)%22 d=%22M0 0C0-11.377-9.222-20.599-20.599-20.599-31.975-20.599-41.198-11.377-41.198 0-41.198 11.376-31.975 20.598-20.599 20.598-9.222 20.598 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,306.7434,111.34741)%22 d=%22M0 0C0-11.377-9.222-20.599-20.599-20.599-31.975-20.599-41.198-11.377-41.198 0-41.198 11.376-31.975 20.598-20.599 20.598-9.222 20.598 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,392.8889,111.34741)%22 d=%22M0 0C0-11.377-9.223-20.599-20.599-20.599-31.976-20.599-41.198-11.377-41.198 0-41.198 11.376-31.976 20.598-20.599 20.598-9.223 20.598 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,48.3091,288.6526)%22 d=%22M0 0C0-11.376-9.223-20.597-20.599-20.597-31.975-20.597-41.198-11.376-41.198 0-41.198 11.377-31.975 20.599-20.599 20.599-9.223 20.599 0 11.377 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,134.4542,288.6526)%22 d=%22M0 0C0-11.376-9.223-20.597-20.599-20.597-31.976-20.597-41.198-11.376-41.198 0-41.198 11.377-31.976 20.599-20.599 20.599-9.223 20.599 0 11.377 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,220.5982,288.6526)%22 d=%22M0 0C0-11.376-9.222-20.597-20.599-20.597-31.975-20.597-41.198-11.376-41.198 0-41.198 11.377-31.975 20.599-20.599 20.599-9.222 20.599 0 11.377 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,306.7434,288.6526)%22 d=%22M0 0C0-11.376-9.222-20.597-20.599-20.597-31.975-20.597-41.198-11.376-41.198 0-41.198 11.377-31.975 20.599-20.599 20.599-9.222 20.599 0 11.377 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,392.8889,288.6526)%22 d=%22M0 0C0-11.376-9.223-20.597-20.599-20.597-31.976-20.597-41.198-11.376-41.198 0-41.198 11.377-31.976 20.599-20.599 20.599-9.223 20.599 0 11.377 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,48.3091,377.3044)%22 d=%22M0 0C0-11.376-9.223-20.598-20.599-20.598-31.975-20.598-41.198-11.376-41.198 0-41.198 11.377-31.975 20.599-20.599 20.599-9.223 20.599 0 11.377 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,134.4542,377.3044)%22 d=%22M0 0C0-11.376-9.223-20.598-20.599-20.598-31.976-20.598-41.198-11.376-41.198 0-41.198 11.377-31.976 20.599-20.599 20.599-9.223 20.599 0 11.377 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,220.5982,377.3044)%22 d=%22M0 0C0-11.376-9.222-20.598-20.599-20.598-31.975-20.598-41.198-11.376-41.198 0-41.198 11.377-31.975 20.599-20.599 20.599-9.222 20.599 0 11.377 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,306.7434,377.3044)%22 d=%22M0 0C0-11.376-9.222-20.598-20.599-20.598-31.975-20.598-41.198-11.376-41.198 0-41.198 11.377-31.975 20.599-20.599 20.599-9.222 20.599 0 11.377 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,392.8889,377.3044)%22 d=%22M0 0C0-11.376-9.223-20.598-20.599-20.598-31.976-20.598-41.198-11.376-41.198 0-41.198 11.377-31.976 20.599-20.599 20.599-9.223 20.599 0 11.377 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,48.3091,22.695313)%22 d=%22M0 0C0-11.377-9.223-20.599-20.599-20.599-31.975-20.599-41.198-11.377-41.198 0-41.198 11.376-31.975 20.597-20.599 20.597-9.223 20.597 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,134.4542,22.695313)%22 d=%22M0 0C0-11.377-9.223-20.599-20.599-20.599-31.976-20.599-41.198-11.377-41.198 0-41.198 11.376-31.976 20.597-20.599 20.597-9.223 20.597 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,220.5982,22.695313)%22 d=%22M0 0C0-11.377-9.222-20.599-20.599-20.599-31.975-20.599-41.198-11.377-41.198 0-41.198 11.376-31.975 20.597-20.599 20.597-9.222 20.597 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,306.7434,22.695313)%22 d=%22M0 0C0-11.377-9.222-20.599-20.599-20.599-31.975-20.599-41.198-11.377-41.198 0-41.198 11.376-31.975 20.597-20.599 20.597-9.222 20.597 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,392.8889,22.695313)%22 d=%22M0 0C0-11.377-9.223-20.599-20.599-20.599-31.976-20.599-41.198-11.377-41.198 0-41.198 11.376-31.976 20.597-20.599 20.597-9.223 20.597 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,48.3091,199.9991)%22 d=%22M0 0C0-11.377-9.223-20.599-20.599-20.599-31.975-20.599-41.198-11.377-41.198 0-41.198 11.376-31.975 20.597-20.599 20.597-9.223 20.597 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,134.4542,199.9991)%22 d=%22M0 0C0-11.377-9.223-20.599-20.599-20.599-31.976-20.599-41.198-11.377-41.198 0-41.198 11.376-31.976 20.597-20.599 20.597-9.223 20.597 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,220.5982,199.9991)%22 d=%22M0 0C0-11.377-9.222-20.599-20.599-20.599-31.975-20.599-41.198-11.377-41.198 0-41.198 11.376-31.975 20.597-20.599 20.597-9.222 20.597 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,306.7434,199.9991)%22 d=%22M0 0C0-11.377-9.222-20.599-20.599-20.599-31.975-20.599-41.198-11.377-41.198 0-41.198 11.376-31.975 20.597-20.599 20.597-9.222 20.597 0 11.376 0 0%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,392.8889,199.9991)%22 d=%22M0 0C0-11.377-9.223-20.599-20.599-20.599-31.976-20.599-41.198-11.377-41.198 0-41.198 11.376-31.976 20.597-20.599 20.597-9.223 20.597 0 11.376 0 0%22 fill=%22%23000%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 1; }
.graf-quarto    { --g: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22 viewBox=%220 0 400 400%22%3E%3Cdefs%3E%3CclipPath id=%22clip_1%22%3E%3Cpath transform=%22matrix(1,0,0,-1,0,400)%22 d=%22M0 400H400V0H0Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%3E%3Cg clip-path=%22url(%23clip_1)%22%3E%3Cpath transform=%22matrix(1,0,0,-1,0,397.9019)%22 d=%22M0 0C219.755 0 397.902 178.147 397.902 397.902H0Z%22 fill=%22%23000%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 1; }
.graf-chevron   { --g: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22 viewBox=%220 0 400 400%22%3E%3Cg%3E%3Cpath transform=%22matrix(1,0,0,-1,19.6325,.00039672853)%22 d=%22M0 0 177.498-200-.001-400H183.237L360.735-200 183.238 0Z%22 fill=%22%23000%22/%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 1; }
.graf-arcos     { --g: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22 viewBox=%220 0 400 400%22%3E%3Cdefs%3E%3CclipPath id=%22clip_1%22%3E%3Cpath transform=%22matrix(1,0,0,-1,0,400)%22 d=%22M0 400H400V0H0Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%3E%3Cg clip-path=%22url(%23clip_1)%22%3E%3Cpath transform=%22matrix(1,0,0,-1,400,400)%22 d=%22M0 0C-220.17 0-399.288 179.438-399.288 400H-388.488C-388.488 185.404-214.216 10.818 0 10.818Z%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,400,301.8749)%22 d=%22M0 0C-166.16 0-301.341 135.42-301.341 301.875H-290.542C-290.542 141.386-160.204 10.819 0 10.819Z%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,400,202.7032)%22 d=%22M0 0C-111.573 0-202.348 90.931-202.348 202.703H-191.548C-191.548 96.897-105.618 10.819 0 10.819Z%22 fill=%22%23000%22/%3E%3Cpath transform=%22matrix(1,0,0,-1,400,116.87921)%22 d=%22M0 0C-64.332 0-116.67 52.431-116.67 116.879H-105.87C-105.87 58.397-58.378 10.819 0 10.819Z%22 fill=%22%23000%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 1; }

/* As ondas são esticadas na altura, como no KV: lá elas sobem de
   ponta a ponta do banner. */
.graf-ondas { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* Grafismo solto em canto de seção. O deslocamento com o mouse usa a
   propriedade translate (e não transform) para não brigar com a
   rotação contínua, que usa rotate. */
.deco {
  position: absolute;
  z-index: 0;
  translate: calc(var(--px, 0) * 1px) calc(var(--py, 0) * 1px);
  transition: translate 1s var(--ease);
}

@keyframes gira { to { rotate: 360deg; } }

/* ==================================================================
   TIPOGRAFIA
   ================================================================== */

.section-title {
  font-weight: 400;
  font-stretch: 112%;
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--azul);
}

/* O destaque é o laranja do KV: 3,7:1 sobre o branco, aprovado para
   texto grande — e o título nunca fica abaixo de 33px. */
.section-title strong { font-weight: 800; font-stretch: 125%; color: var(--laranja); }

.section-title--light,
.section-title--light strong { color: #fff; }

/* Cabeçalho de seção: título e, logo abaixo, a frase de apoio.
   Ajuste do cliente (16/10): as frases "pareciam soltas" na coluna da
   direita. Agora ficam presas ao título, maiores, com a barra laranja
   do KV marcando o começo da leitura. */
.bloco-cabecalho { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }

.section-lead {
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1.3;
  color: var(--azul);
  letter-spacing: -.015em;
  max-width: 42ch;
  padding-left: 1.1rem;
  border-left: 4px solid var(--laranja);
}

/* Sobre o laranja: 21px+ em negrito conta como texto grande (3,7:1);
   a barra vira âmbar para não sumir no fundo. */
.section-lead--light { color: #fff; border-left-color: var(--ambar); }

.prose-p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--texto);
  max-width: 62ch;
}

/* O fecho do bloco: único texto em corpo grande, com o filete laranja */
.frase-manifesto {
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--azul);
  padding-top: 1.6rem;
  border-top: 4px solid var(--laranja);
}

.frase-manifesto--azul { font-weight: 600; }

/* ============================== BOTÕES ============================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-stretch: 112%;
  font-size: 14px;
  letter-spacing: .02em;
  padding: .85rem 2rem;
  border-radius: 45px;
  border: 2px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease),
              transform .25s var(--ease);
}

/* Preenchimento que sobe de baixo no hover */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform .45s var(--ease);
}

.btn:hover::before { transform: translateY(0); }

.btn-lg { font-size: 15px; padding: 1rem 2.5rem; }

/* CTA do header: some no celular, onde o hambúrguer assume */
.btn-header { display: none; }

@media (min-width: 480px) { .btn-header { display: inline-flex; } }
@media (max-width: 479px) { .btn-lg { font-size: 14px; padding: .9rem 1.6rem; } }

/* Azul claro do kit, o da tarja do KV: é o botão principal da página */
.btn-azul { background: var(--vivo); border-color: var(--vivo); color: #fff; }
.btn-azul::before { background: var(--azul); }
.btn-azul:hover { border-color: var(--azul); }

.btn-ghost { border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn-ghost::before { background: #fff; }
.btn-ghost:hover { border-color: #fff; color: var(--tijolo); }

/* ============================== HEADER ============================== */

#header { background: transparent; }

.header-bar { position: relative; z-index: 45; }

#header .nav-link { color: #fff; }

.logo-slot { position: relative; display: inline-flex; }

.logo-lockup { height: 34px; width: auto; transition: opacity .3s ease; }

.logo-pos { position: absolute; inset: 0; opacity: 0; }
.logo-neg { opacity: 1; }

#header.is-scrolled { background: #fff; box-shadow: 0 1px 0 rgba(48, 79, 126, .12); }
#header.is-scrolled .logo-neg { opacity: 0; }
#header.is-scrolled .logo-pos { opacity: 1; }
#header.is-scrolled .nav-link { color: var(--azul); }
#header.is-scrolled .burger-bar { background: var(--azul); }

/* Painel mobile aberto: vem depois do .is-scrolled (mesma
   especificidade), senão o header branco apaga o X e o logo. */
#header.is-nav-aberto { background: transparent; box-shadow: none; }
#header.is-nav-aberto .logo-neg { opacity: 1; }
#header.is-nav-aberto .logo-pos { opacity: 0; }
#header.is-nav-aberto .burger-bar { background: #fff; }

.nav-link {
  position: relative;
  font-size: .94rem;
  font-weight: 600;
  transition: color .3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width .35s var(--ease);
}

#header.is-scrolled .nav-link::after { background: var(--laranja); }

.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }

.burger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}

#nav-toggle.is-open .burger-bar { background: #fff; }
#nav-toggle.is-open .burger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-toggle.is-open .burger-bar:nth-child(2) { opacity: 0; }
#nav-toggle.is-open .burger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

#nav-mobile.is-open { display: flex; animation: fadeIn .25s ease both; }

.nav-mobile-link {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  font-stretch: 112%;
  transition: opacity .3s ease;
}

.nav-mobile-link:hover { opacity: .75; }

/* ==================================================================
   HERO — KV oficial da agência (GIF 2000x768)

   Padrão Hager (mesmo esquema da Axia e da CTG):
   - ALTURA: tela inteira (100svh). A barra do topo é fixa e
     transparente; o padding-top a deixa sobre o laranja, e não sobre a
     foto do KV, onde os links brancos sumiriam.
   - LARGURA: base de 1140px, acompanhando a tela a partir daí e
     travando em 2000px, o tamanho nativo da arte. A altura é sempre
     cheia; o excedente sai pelas laterais (object-fit: cover).

   ENQUADRAMENTO: o conteúdo deste KV não é centrado — o "trainee"
   começa em x=314 e a pessoa termina em x≈1515 (de 2000). Centralizado,
   o corte comeria o começo do texto; a 30% cabem texto e pessoa.
   ================================================================== */

.kv-gif {
  --w: clamp(1140px, 100vw, 2000px);
  position: relative;
  height: 100vh;
  height: 100svh;
  padding-top: var(--nav-h);
  overflow: hidden;
  background: var(--laranja);
}

.kv-gif img {
  display: block;
  width: var(--w);
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
  /* Abaixo de 1140px a imagem é mais larga que a tela: o mesmo 30% vale
     para o que sobra fora da seção. Acima de 2000px, centraliza. */
  margin-left: calc((100% - var(--w)) * .3);
}

@media (min-width: 2001px) { .kv-gif img { margin-inline: auto; } }

/* Celular: sem KV vertical, a arte horizontal em tela cheia mostraria
   só um pedaço da pessoa, sem o texto. Aqui ela encolhe e aparece
   inteira, até a agência mandar a versão vertical (PENDENCIAS, item 4). */
@media (max-width: 767px) {
  .kv-gif { --w: 100%; height: auto; }
  .kv-gif img { height: auto; margin-left: 0; }
}

/* ---- Título do KV, reaproveitado no CTA final ---- */

/* Assinatura em tarjas azuis, alinhadas à direita, como no KV */
.kv-assinatura {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-end;
  gap: .3em;
  margin-bottom: 1.4rem;
  margin-right: -.6em;
  font-size: clamp(1.05rem, 1.75vw, 1.6rem);
  font-weight: 500;
  font-stretch: 112%;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.kv-assinatura span {
  display: block;
  background: var(--vivo);
  color: #fff;
  padding: .12em .42em .16em;
  border-radius: 3px;
}

.kv-titulo,
.cta-title { display: flex; flex-direction: column; color: #fff; }

.kv-titulo span,
.cta-title span { display: block; }

.kv-titulo-l1,
.kv-titulo-l3 {
  font-size: clamp(1.3rem, 2.55vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.kv-titulo-l1 { margin-left: .9em; }
.kv-titulo-l3 { align-self: flex-end; margin-right: 1.7em; }

.kv-titulo-l2 {
  font-size: clamp(4rem, 8.6vw, 8rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .86;
  letter-spacing: -.045em;
  margin: .02em 0 .1em;
}

@media (max-width: 479px) {
  .kv-assinatura { margin-right: 0; }
  .kv-titulo-l2 { font-size: 20vw; }
  .kv-titulo-l1, .kv-titulo-l3 { font-size: 5.6vw; }
}

/* ==================================================================
   FAIXAS LARANJA — Benefícios e CTA
   ================================================================== */

.secao-laranja {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--laranja);
}

/* Facho: luz que segue o cursor (variáveis escritas pelo JS) */
.facho {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--fx, 50%) var(--fy, 40%),
              rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  transition: opacity .5s ease;
}

.secao-laranja.tem-facho .facho { opacity: 1; }

.ben-ondas {
  position: absolute;
  z-index: 0;
  top: -8%;
  right: -4%;
  width: min(46%, 620px);
  height: 116%;
  color: var(--claro);
}

.deco-ben {
  bottom: 6%;
  left: -50px;
  width: 170px;
  color: var(--ambar);
  opacity: .9;
  animation: gira 40s linear infinite;
}

/* ======================= SOBRE O PROGRAMA ======================= */

.deco-programa {
  top: 72px;
  right: 4%;
  width: clamp(70px, 9vw, 120px);
  color: var(--ambar);
  animation: gira 30s linear infinite;
}

@media (max-width: 767px) { .deco-programa { top: 22px; width: 60px; } }

.programa-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }

@media (min-width: 1024px) {
  .programa-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
}

.tiras { position: relative; display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 768px) {
  .tiras { grid-template-columns: 1fr 1.45fr 1fr; gap: 1.25rem; align-items: stretch; }
}

.tira { position: relative; z-index: 1; margin: 0; aspect-ratio: 3 / 4; }

/* A do meio é mais larga, mas da mesma altura das vizinhas: no desktop
   quem manda na altura é a linha do grid, e o corte diagonal é o mesmo
   de todas as fotos da página. */
@media (min-width: 768px) { .tira--larga { aspect-ratio: auto; height: 100%; } }

.deco-tiras {
  left: -46px;
  bottom: -40px;
  width: 150px;
  color: var(--laranja);
  opacity: .9;
}

/* ==================================================================
   FOTOGRAFIA
   Canto inferior direito cortado na diagonal — o mesmo ângulo do
   chevron. As fotos entram em cor natural.
   ================================================================== */

.js-foto {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), calc(100% - 56px) 100%, 0 100%);
  background: var(--cinza);
  cursor: pointer;
}

.js-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02) translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -10px), 0);
  transition: transform .9s var(--ease);
}

/* Filete laranja acompanhando o corte — só no hover */
.js-foto::after {
  content: '';
  position: absolute;
  right: -14px;
  bottom: 12px;
  z-index: 3;
  width: 100px;
  height: 4px;
  background: var(--laranja);
  transform: rotate(-45deg) translateX(14px);
  opacity: 0;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}

.js-foto:hover img,
.js-foto:focus-within img,
.js-foto:focus-visible img { transform: scale(1.07) translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -14px), 0); }

.js-foto:hover::after,
.js-foto:focus-within::after { opacity: 1; transform: rotate(-45deg) translateX(0); }

/* ============================ PRÉ-REQUISITOS ============================ */

.deco-reqs {
  top: -60px;
  right: -60px;
  width: clamp(200px, 26vw, 340px);
  color: var(--vivo);
  opacity: .16;
}

.reqs-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }

@media (min-width: 1024px) {
  .reqs-grid { grid-template-columns: 7fr 4fr; gap: 4rem; align-items: start; }
}

.reqs { list-style: none; margin: 0; padding: 0; }

.req {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.7rem 1.5rem 1.7rem 1.25rem;
  border-top: 1px solid var(--rule-dark);
  isolation: isolate;
}

.req:last-child { border-bottom: 1px solid var(--rule-dark); }

/* Varredura branca entrando pela esquerda, com a barra laranja */
.req::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  box-shadow: inset 4px 0 0 var(--laranja);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease);
}

.req:hover::before { transform: scaleX(1); }

.req-rotulo {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tijolo);
  margin-bottom: .4rem;
}

.req-text {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--azul);
}

.req-foto { margin: 0; aspect-ratio: 3 / 4; }

@media (min-width: 1024px) {
  .req-foto { position: sticky; top: calc(var(--nav-h) + 2rem); aspect-ratio: 3 / 4.4; }
}

/* ============================== CARDS ==============================
   Brancos sobre o laranja, inclinando com o mouse (--rx / --ry do JS).
   Canto superior direito cortado na diagonal. */

.beneficios-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }

@media (min-width: 560px)  { .beneficios-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .beneficios-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .beneficios-grid { gap: 1.25rem; } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.1rem 1.6rem 1.9rem;
  border-radius: 6px;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  border: 1px solid rgba(48, 79, 126, .08);
  background: #fff;
  box-shadow: 0 10px 30px rgba(110, 30, 0, .16);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--cx, 50%) var(--cy, 50%),
              rgba(234, 80, 22, .12), transparent 65%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.card:hover::before { opacity: 1; }

.card-icon { display: block; color: var(--laranja); margin-bottom: 1.4rem; transform: translateZ(24px); }
.card-icon svg { width: 36px; height: 36px; }

.card-text {
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--azul);
  transform: translateZ(14px);
}

/* ========================= ÁREAS DE ATUAÇÃO ========================= */

.vagas { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }

@media (min-width: 768px) { .vagas { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.vaga {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 2rem 1.75rem 1.9rem;
  border: 1px solid var(--rule-dark);
  border-radius: 6px;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  background: var(--fundo);
  isolation: isolate;
  overflow: hidden;
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}

/* O laranja do KV sobe de baixo no hover */
.vaga::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--laranja);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}

.vaga:hover { transform: translateY(-6px); border-color: var(--laranja); }
.vaga:hover::before { transform: translateY(0); }

.vaga-corpo { display: flex; flex-direction: column; gap: 1.25rem; flex: 1 1 auto; }

/* 21px em negrito: texto grande, então o branco sobre o laranja passa */
.vaga-nome {
  font-size: clamp(1.15rem, 1.9vw, 1.32rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--azul);
  transition: color .45s var(--ease);
}

.vaga:hover .vaga-nome { color: #fff; }

.vaga-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; }

.vaga-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  border-radius: 45px;
  border: 1px solid var(--rule-dark);
  font-size: .86rem;
  font-weight: 600;
  color: var(--azul);
  background: #fff;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}

.vaga-tag svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--laranja); }

/* Número de vagas — fora da LP por ora (ver PENDENCIAS.md, item 7) */
.vaga-tag--vagas { background: var(--vivo); border-color: var(--vivo); color: #fff; }

.vaga:hover .vaga-tag { border-color: #fff; color: var(--tijolo); }

.areas-fotos { position: relative; display: grid; grid-template-columns: 1fr; gap: 1rem; }

.areas-foto { position: relative; z-index: 1; margin: 0; aspect-ratio: 4 / 3; }

/* Colunas de larguras diferentes: no desktop quem manda na altura é a
   linha do grid, senão as fotos desalinham na base. */
@media (min-width: 768px) {
  .areas-fotos {
    grid-template-columns: 1.35fr 1fr;
    gap: 1.25rem;
    grid-auto-rows: clamp(320px, 30vw, 430px);
  }

  .areas-foto { aspect-ratio: auto; height: 100%; }
}

.deco-areas {
  right: -60px;
  bottom: -60px;
  width: 220px;
  color: var(--ambar);
}

/* ==================================================================
   ETAPAS
   O fio laranja energiza da esquerda para a direita e cada nó acende
   na sequência. No celular a linha vira grade de duas colunas.
   ================================================================== */

.linha { position: relative; padding-top: 4.5rem; margin-top: 3rem; }

.linha-fio {
  position: absolute;
  left: 0;
  right: 0;
  /* Centro do fio (top + 30) = padding-top (72) + metade do nó (44) */
  top: 86px;
  height: 60px;
  z-index: 0;
  overflow: visible;
}

.fio-base,
.fio-ativo { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.fio-base { stroke: rgba(48, 79, 126, .18); }

/* Sem transition: quem move o traço é o quadro a quadro do JS */
.fio-ativo {
  stroke: var(--laranja);
  filter: drop-shadow(0 0 6px rgba(234, 80, 22, .6));
}

.fio-pulso { fill: #fff; filter: drop-shadow(0 0 8px rgba(234, 80, 22, 1)); }

.linha-etapas {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.etapa {
  position: relative;
  text-align: center;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--delay, 0ms);
}

.linha.is-active .etapa { opacity: 1; transform: none; }

.etapa-fundo {
  position: absolute;
  z-index: 1;
  top: -58px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4.6rem;
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(48, 79, 126, .15);
  pointer-events: none;
  transition: -webkit-text-stroke-color .5s var(--ease);
}

.etapa.is-on .etapa-fundo { -webkit-text-stroke-color: rgba(234, 80, 22, .5); }

/* Halo atrás do nó: elemento próprio porque sombra não escapa de
   clip-path */
.etapa-glow {
  position: absolute;
  left: 50%;
  top: 44px;
  z-index: 0;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 80, 22, .38) 0%, rgba(234, 80, 22, 0) 68%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}

.etapa.is-on .etapa-glow { opacity: .8; }

.etapa--final.is-on .etapa-glow {
  opacity: 1;
  width: 230px;
  height: 230px;
  background: radial-gradient(circle, rgba(234, 80, 22, .6) 0%, rgba(234, 80, 22, .22) 38%, rgba(234, 80, 22, 0) 70%);
  animation: respiraHalo 1.5s ease-in-out infinite;
}

@keyframes respiraHalo {
  0%, 100% { transform: translate(-50%, -50%) scale(.86); opacity: .85; }
  50%      { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

.etapa-no {
  position: relative;
  z-index: 2;
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto);
  background: rgba(48, 79, 126, .22);       /* contorno */
  border-radius: 10px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transition: color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}

.etapa-no::after {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--fundo);                /* miolo */
  border-radius: 8px;
  clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%);
  transition: background .45s var(--ease);
}

.etapa.is-on .etapa-no { color: #fff; background: var(--laranja); }
.etapa.is-on .etapa-no::after { background: var(--laranja); }

.etapa-icone { width: 32px; height: 32px; position: relative; z-index: 1; }

.etapa:hover .etapa-no { transform: scale(1.08); }

.etapa-texto h3 {
  font-weight: 700;
  font-stretch: 112%;
  font-size: .95rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--azul);
  max-width: 16ch;
  margin: 0 auto 8px;
}

.etapa-texto p {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--texto);
  max-width: 24ch;
  margin: 0 auto;
}

@media (max-width: 1180px) and (min-width: 861px) {
  .linha-etapas { grid-template-columns: repeat(3, 1fr); gap: 4.5rem 1.5rem; }
  .linha-fio { display: none; }
}

@media (max-width: 860px) {
  .linha { padding-top: 3.5rem; }
  .linha-fio { display: none; }
  .linha-etapas { grid-template-columns: repeat(2, 1fr); gap: 3.5rem 1.25rem; }
  .etapa-fundo { top: -44px; font-size: 3.4rem; }
  .etapa-texto h3 { font-size: .92rem; }
}

@media (max-width: 480px) {
  .etapa-no { width: 72px; height: 72px; }
  .etapa-icone { width: 26px; height: 26px; }
  .etapa-glow { width: 120px; height: 120px; top: 36px; }
  .etapa--final.is-on .etapa-glow { width: 170px; height: 170px; }
  .etapa-texto p { font-size: .8rem; }
}

/* ========================== SOBRE A EMPRESA ========================== */

.deco-empresa {
  top: 50px;
  right: -70px;
  width: clamp(200px, 24vw, 320px);
  color: var(--laranja);
  opacity: .14;
}

.empresa-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }

@media (min-width: 1024px) {
  .empresa-grid { grid-template-columns: 7fr 5fr; gap: 4.5rem; align-items: start; }
}

.empresa-foto { margin: 0; aspect-ratio: 4 / 5; }

@media (min-width: 1024px) { .empresa-foto { aspect-ratio: 3 / 4; } }

.produtos-rotulo {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tijolo);
  margin-bottom: 1rem;
}

.produtos { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }

.produtos li {
  padding: .55rem 1.05rem;
  border-radius: 45px;
  border: 1.5px solid var(--azul);
  font-size: .95rem;
  font-weight: 600;
  color: var(--azul);
  transition: background .3s ease, color .3s ease;
}

.produtos li:hover { background: var(--azul); color: #fff; }

/* ---- Big numbers ---- */
.numeros {
  position: relative;
  overflow: hidden;
  background: var(--azul);
  color: #fff;
}

.numeros-ondas {
  position: absolute;
  z-index: 0;
  top: -10%;
  left: -3%;
  width: min(40%, 520px);
  height: 120%;
  color: var(--vivo);
  opacity: .35;
}

.numeros-titulo {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 3rem;
}

/* 3,8:1 do âmbar sobre o navy só serve a texto grande — e aqui é */
.numeros-titulo span { color: var(--ambar); }

.numeros-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}

@media (min-width: 560px)  { .numeros-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .numeros-grid { grid-template-columns: repeat(3, 1fr); } }

.numero {
  padding: 1.6rem 1.5rem 1.6rem 0;
  border-top: 1px solid var(--rule-light);
}

.numero-valor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1em .22em;
  font-size: clamp(2.5rem, 4.6vw, 3.9rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.numero-valor small {
  font-size: 1.2rem;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0;
  color: var(--ambar);
}

.numero-rotulo {
  margin-top: .7rem;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
  max-width: 28ch;
}

/* ---- Missão, visão, valores ---- */
.mvv { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }

@media (min-width: 900px) { .mvv { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.mvv-card {
  position: relative;
  padding: 2.2rem 1.8rem 2rem;
  background: #fff;
  border-radius: 6px;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  box-shadow: 0 8px 26px rgba(48, 79, 126, .08);
}

.mvv-icone { width: 44px; color: var(--laranja); margin-bottom: 1.3rem; }

.mvv-titulo {
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -.03em;
  color: var(--azul);
  margin-bottom: .8rem;
}

.mvv-texto { font-size: 1.0625rem; line-height: 1.65; color: var(--texto); }

.valores { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }

.valores li {
  padding: .35rem .8rem;
  border-radius: 45px;
  background: var(--fundo);
  font-size: .92rem;
  font-weight: 600;
  color: var(--azul);
}

/* ---- Temas + vídeo ---- */
.temas-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }

/* Ajuste do cliente (16/10): vídeo maior e com mais destaque */
@media (min-width: 1024px) {
  .temas-grid { grid-template-columns: 4fr 7fr; gap: 3.5rem; align-items: center; }
}

.temas-grid > div { display: flex; flex-direction: column; align-items: flex-start; }

/* Mesmo título dos cards de missão, visão e valores, logo acima */
.temas-titulo { margin-bottom: 1.1rem; }

.temas { list-style: none; margin: 0; padding: 0; width: 100%; }

.temas li {
  position: relative;
  padding: 1rem 0;
  border-top: 1px solid var(--rule-dark);
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  font-weight: 600;
  color: var(--azul);
}

.temas li:last-child { border-bottom: 1px solid var(--rule-dark); }

.video-card {
  display: block;
  aspect-ratio: 4 / 3;
  color: #fff;
}

@media (min-width: 1024px) { .video-card { aspect-ratio: 16 / 10; } }

.video-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(20, 30, 50, .85) 0%, rgba(20, 30, 50, .25) 55%, rgba(20, 30, 50, .1) 100%);
}

.video-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: clamp(72px, 8vw, 112px);
  height: clamp(72px, 8vw, 112px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--laranja);
  box-shadow: 0 0 0 0 rgba(234, 80, 22, .55);
  animation: pulsoPlay 2.2s ease-out infinite;
  transition: transform .4s var(--ease);
}

.video-play svg { width: 40%; height: 40%; margin-left: 4px; }

.video-card:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }

@keyframes pulsoPlay {
  0%   { box-shadow: 0 0 0 0 rgba(234, 80, 22, .55); }
  100% { box-shadow: 0 0 0 26px rgba(234, 80, 22, 0); }
}

.video-legenda {
  position: absolute;
  z-index: 2;
  left: clamp(1.6rem, 3vw, 2.4rem);
  bottom: clamp(1.5rem, 3vw, 2.2rem);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.4;
}

.video-legenda strong {
  display: block;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -.02em;
}

/* ============================== CTA FINAL ============================== */

.cta { padding: 6.5rem 0; }

.cta-ondas {
  position: absolute;
  z-index: 0;
  top: -8%;
  left: -2%;
  width: min(44%, 600px);
  height: 116%;
  color: var(--claro);
}

.cta-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  max-width: 100%;
}

.cta-texto > div { align-self: flex-start; }

.cta-title { margin: 0; }

.cta-cena {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 52%;
  right: 0;
}

.cta-losango {
  position: absolute;
  top: 50%;
  left: 42%;
  height: 84%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  overflow: hidden;
  background: var(--tijolo);
}

.cta-losango img {
  position: absolute;
  inset: -21%;
  width: 142%;
  height: 142%;
  max-width: none;
  object-fit: cover;
  transform: rotate(-45deg);
}

/* Véu branco sobre a foto: a biorrefinaria vira cenário claro e a
   pessoa recortada (DSC00299, desde 19/10) se destaca na frente */
.cta-losango::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, .72));
}

.cta-chevron {
  position: absolute;
  z-index: 2;
  top: 12%;
  left: 74%;
  width: 22%;
  color: var(--ambar);
  opacity: .85;
  translate: calc(var(--px, 0) * 1px) calc(var(--py, 0) * 1px);
  transition: translate 1s var(--ease);
}

.cta-pessoa {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 42%;
  height: 94%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 20px 40px rgba(80, 20, 0, .28));
}

@media (max-width: 1023px) {
  .cta { display: flex; flex-direction: column; padding: 5rem 0 0; }
  .cta > .relative { order: 1; }
  .cta-texto { margin-inline: auto; }
  .cta-cena { position: relative; order: 2; left: auto; right: auto; height: clamp(380px, 86vw, 560px); margin-top: 3rem; }
  .cta-losango, .cta-pessoa { left: 50%; }
  .cta-losango { height: 74%; top: 55%; }
  .cta-ondas { width: 80%; height: 60%; }
}

/* ================================ FOOTER ================================ */

.footer-strip {
  height: 6px;
  background: linear-gradient(90deg, var(--laranja) 0%, var(--ambar) 50%, var(--vivo) 100%);
}

.footer-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
}

.footer-logo-inpasa { height: 46px; width: auto; }

.footer-divisor { width: 1px; height: 40px; background: rgba(255, 255, 255, .4); }

@media (max-width: 479px) { .footer-divisor { display: none; } }

.footer-rule {
  display: block;
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, .3);
  margin: 2.5rem auto;
}

.footer-suporte {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  max-width: 52ch;
  margin: 0 auto;
  text-wrap: balance;
}

.footer-mail {
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--ambar);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color .3s ease;
}

.footer-mail:hover { text-decoration-color: #fff; }

.footer-social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background-color .3s ease, transform .3s var(--ease);
}

.social:hover { background: var(--laranja); transform: translateY(-3px); }
.social svg { width: 18px; height: 18px; }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-copy { font-size: .9rem; color: rgba(255, 255, 255, .6); }

/* ========================= REVEAL ON SCROLL ========================= */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.is-visible { opacity: 1; transform: none; }

.reveal-delay-1 { transition-delay: .09s; }
.reveal-delay-2 { transition-delay: .18s; }
.reveal-delay-3 { transition-delay: .27s; }
.reveal-delay-4 { transition-delay: .36s; }
.reveal-delay-5 { transition-delay: .45s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================ ACESSIBILIDADE ============================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal { opacity: 1; transform: none; transition: none; }
  .etapa  { opacity: 1; transform: none; transition: none; }

  .deco, .cta-chevron { animation: none; translate: none !important; }
  .video-play { animation: none; }
  .fio-pulso { display: none; }
  .etapa--final.is-on .etapa-glow { animation: none; }
  .card { transform: none !important; }
  .js-foto img { transform: none !important; }
  .vaga:hover { transform: none; }
  .btn:hover { transform: none; }
}