/* Tema Box (setor de exercícios): o site é um box de crossfit.
   Parede de bloco pintada de amarelo, piso de borracha com grânulos, caixote de compensado,
   quadro branco escrito à mão, relógio de LED, fita zebrada, chapa xadrez e portão de galpão.
   Paleta de energia de academia: amarelo forte, quase preto e claro. Nada arredondado.
   Este bloco é o CSS do tema; o segundo <style> é só da prévia. Ainda NÃO está ligado ao gerar.mjs.
   Descrição completa em ../TEMA-EXERCICIOS.md. */

:root {
  --amarelo: #FFC21A;
  --preto: #141416;
  --aco: #1E1F23;
  --borracha: #1C1D20;
  --parede: #EEECE6;
  --concreto: #E2DFD8;
  --madeira: #DFB87F;
  --queimado: #22120A;
  --quadro: #FAFAF7;
  --aluminio: #C9CCD0;
  --fita-prata: #C9CCD0;
  --fita-crepe: #E8DBB0;
  --fita-preta: #1A1A1C;
  --marcador-azul: #1D3FAA;
  --marcador-vermelho: #C4261C;
  --led: #FF4436;
  --led-apagado: #2E100D;
  --portao: #2A2C31;
  --gelo: #F2F1EC;
  --texto-suave: #4A4C53;
  --claro-suave: #A9ACB3;
  --link: #7A4F00;
  --alerta: #C62828;
  --feito: #1A7040;
  --anilha-25: #C62828;
  --anilha-20: #1E5BB8;
  --anilha-15: #FFC21A;
  --anilha-10: #2E8B3E;
  --forte: 'Anton', Impact, 'Arial Narrow', sans-serif; /* títulos: letra cheia, fácil de ler */
  --estencil: 'Big Shoulders Stencil', 'Arial Narrow', sans-serif; /* só no caixote */
  --titulo: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --marcador: 'Permanent Marker', 'Comic Sans MS', cursive;
  --corpo: 'Archivo', system-ui, sans-serif;
  /* Texturas desenhadas em SVG dentro do próprio CSS (nenhuma foto) */
  --tex-bloco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cpath d='M0 1.5H240M0 61.5H240M1.5 0V60M121.5 0V60M61.5 60V120M181.5 60V120' fill='none' stroke='%23000' stroke-opacity='.09' stroke-width='3'/%3E%3C/svg%3E");
  --tex-chapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='%23fff' fill-opacity='.08'%3E%3Cpath d='M2.5 7.5L7.5 2.5 9 4 4 9Z'/%3E%3Cpath d='M14.5 16L16 14.5 21.5 20 20 21.5Z'/%3E%3C/g%3E%3C/svg%3E");
  --tex-veio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='w' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.012' numOctaves='2' seed='12' stitchTiles='stitch' result='onda'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.016' numOctaves='2' seed='5' stitchTiles='stitch' result='base'/%3E%3CfeDisplacementMap in='base' in2='onda' scale='36' xChannelSelector='R' yChannelSelector='G' result='torto'/%3E%3CfeGaussianBlur in='torto' stdDeviation='0.6 0.3' result='liso'/%3E%3CfeComponentTransfer in='liso' result='anel'%3E%3CfeFuncR type='table' tableValues='0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0 0.02 0.1 0.3 0.62 0.9 1 0.9 0.62 0.3 0.1 0.02 0'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix in='anel' type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.17 0 0 0 0 0.04 0.3 0 0 0 0' result='veio'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.55' numOctaves='2' seed='8' stitchTiles='stitch' result='f'/%3E%3CfeColorMatrix in='f' type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.17 0 0 0 0 0.04 0 0 0 0.48 -0.216' result='fibra'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0012 0.006' numOctaves='2' seed='10' stitchTiles='stitch' result='m'/%3E%3CfeColorMatrix in='m' type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.17 0 0 0 0 0.04 0 0 0 0.2 -0.08000000000000002' result='mancha'/%3E%3CfeMerge%3E%3CfeMergeNode in='mancha'/%3E%3CfeMergeNode in='veio'/%3E%3CfeMergeNode in='fibra'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23w)'/%3E%3C/svg%3E");
  --tex-concreto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.24 0 0 0 0.8 -0.36'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23c)'/%3E%3C/svg%3E");
  --tex-junta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cpath d='M0 1H360M1 0V360' stroke='%23000' stroke-opacity='.11' stroke-width='2'/%3E%3Cpath d='M0 3H360M3 0V360' stroke='%23fff' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E");
  --tex-borracha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath fill='%234A4D54' fill-opacity='.55' d='M21.6 54L22.9 53L24.3 54.3L22.9 55.5ZM34.9 142.5L33.9 143L32.9 142.2L33.9 141.3ZM14.8 31.2L14.7 30.4L15.7 30.1L15.7 30.7ZM86.4 88.9L85.5 88.3L86 87.5L86.9 87.9ZM32 108.4L33.2 105.8L35.3 107.7L34.1 109.7ZM116.2 14.9L116 13.5L117.4 13.6L117.6 14.5ZM31.4 130.4L29.5 131.2L29.1 129.3L30.5 129.2ZM107.6 59.1L108.2 58L109.4 58.3L109 59.5ZM139 76.2L139.3 74.3L141.8 75L139.8 77.4ZM26.6 67.9L27.3 66.3L28.7 66.3L27.9 68.5ZM26.4 117.3L24.7 117.2L24.8 115.6L26.2 115.7ZM61.6 66.5L61.1 65.4L62.3 65.2L62.8 66.2ZM157.5 2.9L156.4 3.7L155.7 2.9L156.8 1.9ZM151.8 149.5L149.8 149.4L149.8 148L151.8 147.2ZM84.7 21.2L84.4 20L86.5 19.8L86.1 21.8ZM80.8 119.5L81.2 118.6L83 119L82.6 121.2ZM123.2 159.1L123 158.5L123.9 157.9L124.1 159ZM80.5 54.7L80.9 53.6L82.8 54.2L82.5 55.3ZM0.7 49.1L1.3 48.4L2.3 48.9L1.3 49.9ZM20.7 35.3L21.4 33.9L23.1 35.1L21.2 37ZM98.4 123.8L99.3 122.6L100.6 122.8L100.4 124.3ZM137.6 119.7L135 120L135.5 118.5L136.6 118ZM117.5 127.8L116.3 128.1L116.1 127.1L117.3 126.5ZM3.4 101.9L2 102.5L1.7 101.2L2.7 101.1ZM46.3 31.3L45.1 31.5L45.4 29.6L47.7 30ZM8 33.9L6.6 33.6L6.7 32.2L9.2 32.1ZM156.4 45.8L155.5 43.3L157.7 42L158.5 44.1ZM79.4 80.3L77.9 80.6L77.6 79.3L78.9 79.3ZM21.9 155.6L19.3 155.7L20.1 153.3L21.8 152.9ZM65.6 146.2L64.7 145.9L64.7 145.1L66 145.6ZM71.8 127.7L71.8 125.8L73.2 126.3L73.2 127.5ZM70.4 76.4L69.5 76.5L69.5 75.4L70.4 75.6ZM11.4 18.4L9.3 19.7L8.8 17.5L10 16.3ZM119.8 52L119 52.9L118.2 51.7L119 50.9ZM20 121.6L18.4 122.2L17 120.4L19.5 119.5ZM132.1 3.7L131.2 3.6L131.4 2.4L132.1 2.6ZM4.6 147.7L2.8 146.3L4 145.3L5.2 146.1ZM78 29.6L78.3 28.8L79 28.8L78.7 30.1ZM107.8 95.4L107.5 93.2L109.4 93.3L108.9 95.2ZM110.2 5.8L108.7 4.3L110.4 3.1L111.4 5.6ZM79.9 114.5L79 115.1L78.8 114.5L79.6 114ZM15.6 50.7L15.6 49.6L16.8 49.4L16.5 50.8ZM2 30.6L0.7 29.7L1.6 28.8L2.5 29.5ZM9.6 44.4L8.4 45.6L7.7 44.7L8.9 43.9ZM48.8 141.6L47.4 141.8L47.7 139.6L49.1 139.8ZM69.2 57.7L67.7 58L66.6 56.5L68.2 55.9ZM90.2 115.5L88.7 115.8L87.5 114.7L88.9 114.1Z'/%3E%3Cpath fill='%236B6F77' fill-opacity='.85' d='M44.3 64L43.7 62.6L45.4 62L46 63.2ZM26.4 4.6L25.1 4.9L24.6 3.9L26.4 3.3ZM39.3 126.4L37.9 126.6L38.2 125.7L39.2 125.3ZM125.9 15.8L126.8 13.5L129 14.1L128.9 16ZM-0.5 38.2L-0.1 36.9L1.9 37.2L1 39.2ZM148.1 69.5L146.4 68.9L146.9 66.8L148.5 67.5ZM2.1 29.8L2.7 28.5L4.8 28.8L4.1 30.9ZM40.5 111.6L39.4 112.1L38.3 111.2L39.8 109.7ZM145.8 29.7L144.8 27.8L147.1 27.5L147 29.4ZM23.8 16.5L25.3 14.7L25.9 15.8L25.2 17ZM147.6 130.3L146.7 129.9L147.3 129.3L148.3 129.7ZM7.8 143.8L7 144.6L5.9 143.2L7.4 141.8ZM128.5 55.3L126.7 54.4L127.6 52.9L129.3 53.7ZM103.5 99.2L103.9 98.1L104.8 98.8L104.1 99.7ZM42.9 96.7L40.7 97L39.3 95.9L41.1 94ZM96.2 74.1L96 72.4L99.1 72.3L99.2 74.8ZM3 11.2L1.3 10.9L1 9.1L3.6 9.3ZM30.3 64L27.8 63.7L28 61L29.7 61.4ZM60 19.8L58.6 19.4L59.1 18.4L60.7 18.6ZM130.3 136.2L129.3 136.4L128.8 135L129.5 134.5ZM128.2 108.8L126.5 107.6L128.4 106.1L130.2 107.7ZM109.7 155.7L108.8 155.1L109.2 153.7L110.6 154.3Z'/%3E%3Cpath fill='%234A4D54' fill-opacity='.85' d='M76.6 125L74.8 125.5L74.1 124.5L75.9 123.3ZM4.2 45.6L2.9 44.7L2.4 43.5L4.3 43.2ZM58.3 23.5L57.6 22.9L58.5 21.8L59.7 22.3ZM117.3 128.3L117.6 126.9L119 127.2L118.3 128.5ZM80.2 154.5L78.1 152.9L79.9 151.3L81.6 152.8ZM103.3 102.2L102.5 101.8L102.7 100.7L103.7 101.2ZM68.4 72L66.8 70.7L68.3 68.7L69.3 70.1ZM27.6 39.1L26.2 39.7L25.3 38.2L26.5 37.3ZM130.9 19.6L130 19.9L129.8 19.1L131 18.7ZM117.4 92L116.4 90.9L118.2 89.8L118.7 91.5ZM62.4 28.8L60 29.5L59.9 26.5L61.2 26ZM44.3 159.5L45.8 157.9L46.8 159.7L45.7 160.8ZM153.3 125.3L153.7 123.3L155.1 124.4L154.5 125.4ZM147.9 142.6L149.3 140.5L150.4 142.1L149.5 144.1ZM19.3 147.7L18.8 145.6L20.1 145L20.5 147.3ZM113.9 40.8L112.4 40.1L113 38L114.5 39ZM34 48.9L33.3 48.8L33.8 47.8L34.6 48.1ZM14.2 95L13.8 92.5L16.5 92L16.6 94.2ZM135.1 68.3L135.7 67.8L136.8 67.9L136.1 68.7ZM106.2 24.8L105.7 23.8L107 23.4L107.1 24.3ZM95.2 98.6L93.3 98.6L93.5 96.9L95 97ZM20.6 77.9L19.3 77.2L20.5 75.8L21.4 77.6ZM38.2 106.3L38.6 104.5L39.9 104.9L39.7 106.1ZM138.7 44.5L137.4 44.1L138.7 41.7L139.8 43.2ZM85.4 27.4L84.3 26.6L85 25.5L86.1 26.8ZM2.4 83.2L3.3 82.1L4.1 82.8L3.4 83.7ZM69.2 121.6L67.3 120.2L69 117.8L71.1 118.9ZM6.9 18.4L4.7 18.2L4.5 17L6.9 16.8ZM137.9 8.2L138.4 7.1L139 7.8L138.4 8.9ZM114.3 56.2L112.6 56.2L112.4 53.6L115 54.3ZM1.9 30.8L1.6 30.1L2.6 29.7L2.8 30.3ZM154 146.8L152.1 147.3L152 145.4L153.9 144.9ZM134.1 118.2L132.9 118.9L132.6 117.6L133.6 117.5ZM132.6 23L131 23.3L131 20.3L132.9 20.4ZM135.9 39.8L133.9 38L134.5 36.6L136 36.7ZM98.5 93.7L97.9 92.8L99.2 92.3L99.5 93.3ZM74 21.4L73.4 20.1L74.4 19.4L75.4 20.6ZM119.5 69L118.8 68.9L119.1 68.1L120.2 68.3ZM31.8 92.3L30.8 92L30.8 91.2L32.1 91.4ZM81.3 35.1L82.4 32.9L84 33.7L83.9 36.6ZM57.9 102L56.3 103.5L55.5 101.6L57 100.5ZM98.7 79.1L97.7 79.4L97.2 77.9L98.7 78ZM2.5 144.7L2.2 144.3L2.7 143.6L3.2 144.2ZM8.4 114.3L9.1 113.2L10.3 113.4L9.4 115.2ZM148.5 115.1L147.7 113.6L150 113.6L149.3 115.8ZM118.4 89.5L116.7 90.5L115.8 89.1L117.6 88.5ZM49.4 33.1L48.6 31.7L50.2 30.9L50.7 32.5ZM45.9 103.5L44.3 104L43.8 102.6L45.3 101.8ZM122 61.9L122.3 61.1L123.3 60.7L123.3 62.3ZM70.9 8.6L68.9 8.7L69.6 6.2L70.6 6.9ZM134.3 103.4L133.3 102.4L134.7 101.5L135.6 103.3ZM72.6 73L71.6 73.3L71.3 72.5L72.2 72.1ZM107.4 3.6L106.1 4.5L104.3 2.5L106.2 0.9Z'/%3E%3Cpath fill='%236B6F77' fill-opacity='.55' d='M119.2 37.3L118.7 36.4L119.6 35.7L119.8 36.6ZM94.4 11.6L94.2 9.5L96.2 9.7L95.8 11.9ZM65.2 8.4L64.2 6.5L67.4 6L66.9 8.6ZM99.9 19L99.8 16.4L101.9 16.6L101.2 19ZM81.1 74.1L81.6 72L84 72.6L83.1 74.2ZM127 43.2L126.9 42L129 41.6L128.9 43.4ZM48.4 116.6L47.7 116.7L47.6 115.6L48.4 115.4ZM86.8 61.5L87.8 60.2L88.3 60.9L87.6 62ZM46.3 143.2L45.1 142.3L46.2 141L47.8 141.9ZM95.7 65.7L95.8 64.6L97.5 64.9L97.1 66.2ZM62.9 111.4L62.9 109.9L64.4 110.5L64.1 111.4ZM23.9 19.7L23.7 18.3L25 17.8L25.7 19.1ZM132.5 118.3L130.5 117L131.9 115.6L133.2 117.2ZM116.4 120.9L113.7 120.7L114.7 119.4L116.4 119.9ZM10.6 47.8L10.4 45.9L11.9 45.9L11.8 47.7ZM124.9 154.5L123.3 153.8L124.8 152.1L127.2 152.5Z'/%3E%3Cpath fill='%239A9EA6' fill-opacity='.85' d='M156.1 38.8L156.4 37.6L157.6 37.7L157.5 38.5ZM117.2 150.1L115.7 150.2L116 148.7L117.3 148.8ZM102.3 67.9L100.5 67.4L99.5 66.1L101.3 65.6ZM61.6 72.2L60.5 71.8L60.7 71.1L61.5 71.2ZM13.8 62.4L12.4 63L11.8 61.3L13.1 60.6ZM90 11.5L88.8 11.9L88.2 10.5L89.6 10.5ZM79.9 29.7L78.5 29.9L78 27.6L79.5 27.6ZM29 74.1L28.4 73.1L29.3 72.9L29.6 73.8ZM51.7 43.6L49.8 43.4L49.6 41.4L51.8 41.2ZM117.3 64.5L116 64.6L116 63.2L117.3 62.6ZM119.7 78.3L118.3 76.9L119.1 75.8L120.8 77.1ZM101.7 144.1L100.8 144.4L100.4 143.2L100.8 143ZM79.9 95.7L78.9 95.9L78.6 95L79.6 94.9ZM104 81L103.1 79.7L104.1 79L105.4 80.2Z'/%3E%3Cpath fill='%239A9EA6' fill-opacity='.55' d='M57.4 111.8L56.1 113.1L55.7 111.8L56.8 111.1ZM42.5 115.8L41.1 116L40.6 114L42.3 113.9ZM90.2 77.6L88.9 77.7L88.3 76.8L89.1 76.2ZM30.9 133.4L29.3 133L29.7 131.7L31.1 131.7ZM67.9 129.7L69 128.4L72 129.8L70.4 131.3ZM30.3 30.7L28.9 29.3L29.2 28.3L31.2 28.9ZM159.6 13.2L157.7 12L158.5 9.7L161 11.3ZM18.3 134.9L17.4 134.5L18.1 133.5L18.7 134.3Z'/%3E%3Cpath fill='%23FFC21A' fill-opacity='.85' d='M75.5 3.8L76.1 2.7L77.9 4.1L76.6 5.1ZM5.5 70.8L4.7 70.3L5 69.4L5.9 69.8ZM11.5 126.1L9.3 125.8L10.3 123.3L11.9 124.6ZM70.8 68.6L69.7 68L70.2 66.9L71.2 67.4ZM39.8 6L39.9 3.9L41.8 3.7L41.7 5.6ZM143.4 44.3L143.2 43.6L144.1 42.7L144.5 43.4Z'/%3E%3Cpath fill='%23FFC21A' fill-opacity='.55' d='M40 41.6L38 42.5L36.9 41.7L38.6 39.8ZM38.9 5.2L37.4 3.4L39.8 2.9L40.2 4.5ZM25.8 63.9L23.7 64.5L23.2 62.4L25.1 62.7ZM14.1 127.1L15.4 125.4L18.1 127.7L16.5 128.9Z'/%3E%3C/svg%3E");
  --dente-cima: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='22'%3E%3Cpath d='M12 0H48L42 22H18Z'/%3E%3C/svg%3E");
  --dente-baixo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='22'%3E%3Cpath d='M18 0H42L48 22H12Z'/%3E%3C/svg%3E");
  --rasgo: polygon(4px 0, calc(100% - 3px) 0, 100% 30%, calc(100% - 4px) 55%, 100% 80%, calc(100% - 2px) 100%, 3px 100%, 0 75%, 4px 45%, 0 20%);
  --zebra: repeating-linear-gradient(-45deg, var(--amarelo) 0 7px, var(--preto) 7px 14px);
  --d: clamp(20px, 3vw, 40px); /* quanto a fita diagonal do rodapé sobe de um lado ao outro */
  --fita: 20px;
}

html, body { margin: 0; padding: 0; background: var(--parede); }
* { box-sizing: border-box; }
body { font-family: var(--corpo); color: var(--preto); font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--amarelo); color: var(--preto); }
:focus-visible { outline: 3px solid var(--preto); outline-offset: 4px; }
.escuro :focus-visible { outline-color: var(--amarelo); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.largura { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 100; background: var(--amarelo); color: var(--preto); padding: 8px 12px; }
.rotulo { font-family: var(--titulo); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Fita zebrada reta (embaixo do cabeçalho) ---------- */
.zebrada { height: 16px; background: repeating-linear-gradient(-45deg, var(--amarelo) 0 16px, var(--preto) 16px 32px); border-block: 2px solid var(--preto); }

/* ---------- Cabeçalho: chapa xadrez preta ---------- */
.topo { background-color: var(--aco); background-image: var(--tex-chapa); color: var(--gelo); }
.topo .largura { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 16px; padding-bottom: 12px; }
/* Marca: placa amarela aparafusada, letra de estêncil */
.marca { position: relative; display: inline-block; background: var(--amarelo); color: var(--preto); font-family: var(--forte); font-weight: 400; font-size: 28px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; padding: 8px 18px 6px; }
.marca::before { content: ""; position: absolute; inset: 4px; background: linear-gradient(var(--preto) 0 0) top left / 4px 4px no-repeat, linear-gradient(var(--preto) 0 0) top right / 4px 4px no-repeat, linear-gradient(var(--preto) 0 0) bottom left / 4px 4px no-repeat, linear-gradient(var(--preto) 0 0) bottom right / 4px 4px no-repeat; opacity: .6; }
.menu { order: 3; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.menu a { display: flex; align-items: center; min-height: 44px; font-family: var(--titulo); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--gelo); border-bottom: 4px solid transparent; }
.menu a:hover, .menu a[aria-current] { color: var(--amarelo); border-bottom-color: var(--amarelo); }
.busca { display: flex; width: 100%; border: 2px solid #4A4D54; background: #26272B; }
.busca:focus-within { border-color: var(--amarelo); }
.busca input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--gelo); padding: 10px 12px; font: 16px var(--corpo); }
.busca input::placeholder { color: var(--claro-suave); }
.busca input:focus-visible { outline: none; }
.busca button { border: 0; background: var(--amarelo); color: var(--preto); font-family: var(--titulo); font-weight: 800; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; padding: 0 16px; min-height: 44px; cursor: pointer; }
.busca button:hover { background: var(--gelo); }

/* ---------- Botões: placa com espessura, sobe no mouse e afunda no clique ---------- */
.botao { --espessura: var(--preto); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--titulo); font-weight: 800; font-size: 21px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--preto); background: var(--amarelo); border: 3px solid var(--preto); box-shadow: 0 6px 0 var(--espessura); padding: 15px 24px 13px; transition: transform .12s, box-shadow .12s, background-color .12s; }
.botao:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--espessura); }
.botao:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--espessura); }
.botao.preto { --espessura: #4A4D54; background: var(--preto); color: var(--amarelo); }
.botao.contorno { background: transparent; box-shadow: none; }
.botao.contorno:hover { transform: none; background: var(--preto); color: var(--amarelo); }
.escuro .botao { --espessura: #8A6600; border-color: var(--amarelo); }
.botao-mini { --espessura: var(--preto); display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; font-family: var(--titulo); font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; background: var(--gelo); color: var(--preto); border: 2px solid var(--preto); box-shadow: 0 4px 0 var(--espessura); padding: 8px 14px 6px; transition: transform .12s, box-shadow .12s, background-color .12s; }
.botao-mini:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--espessura); background: var(--amarelo); }
.botao-mini:active, .botao-mini[aria-pressed="true"] { transform: translateY(3px); box-shadow: 0 1px 0 var(--espessura); background: var(--amarelo); }
.escuro .botao-mini { --espessura: #5A5D64; }

/* ---------- Fitas (etiquetas): pedaços de fita com ponta rasgada, escritos à caneta ---------- */
.fitas { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.fita { display: inline-block; font-family: var(--marcador); font-size: 15px; line-height: 1; padding: 6px 12px 5px; color: var(--preto); background-color: var(--fita-prata); background-image: linear-gradient(180deg, rgba(255,255,255,.35), transparent 45%, rgba(0,0,0,.06)); clip-path: var(--rasgo); transform: rotate(-1.2deg); white-space: nowrap; }
.fita:nth-child(2n) { transform: rotate(1deg); }
.fita.crepe { background-color: var(--fita-crepe); }
.fita.amarela { background-color: var(--amarelo); }
.fita.preta { background-color: var(--fita-preta); color: var(--gelo); }
a.fita:hover { background-color: var(--preto); color: var(--amarelo); }

/* ---------- Herói: parede de bloco pintada de amarelo ---------- */
.heroi { --respiro: 36px; background-color: var(--amarelo); background-image: var(--tex-bloco); padding: var(--respiro) 0 70px; }
.heroi .largura { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.heroi .fita { font-size: 16px; margin-bottom: 18px; }
.heroi h1 { font-family: var(--forte); font-weight: 400; font-size: clamp(50px, 7.6vw, 108px); line-height: .94; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 20px; }
.heroi p { font-size: 19px; line-height: 1.5; max-width: 44ch; margin: 0 0 30px; }
.acoes { display: flex; flex-wrap: wrap; gap: 16px; }
.na-parede { display: grid; gap: 22px; justify-items: end; }

/* Relógio de LED de box (os dígitos são desenhados em SVG pelo script) */
.relogio { position: relative; display: inline-flex; align-items: center; gap: 14px; background: #0E0E10; border: 3px solid #2B2C30; padding: 12px 16px; color: var(--claro-suave); }
.relogio::before { content: ""; position: absolute; inset: 3px; pointer-events: none; background: linear-gradient(#3A3B40 0 0) top left / 4px 4px no-repeat, linear-gradient(#3A3B40 0 0) top right / 4px 4px no-repeat, linear-gradient(#3A3B40 0 0) bottom left / 4px 4px no-repeat, linear-gradient(#3A3B40 0 0) bottom right / 4px 4px no-repeat; }
.relogio .digitos { flex: 0 1 164px; min-width: 0; }
.relogio svg { display: block; width: 100%; max-width: 164px; height: auto; }
.bancada .relogio { display: flex; }
.relogio .aceso { fill: var(--led); filter: drop-shadow(0 0 3px rgba(255, 68, 54, .75)); }
.relogio .apagado { fill: var(--led-apagado); }
.relogio .modo { display: grid; gap: 6px; font-family: var(--titulo); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.relogio .modo span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.relogio .modo i { width: 8px; height: 8px; background: var(--led-apagado); }
.relogio .modo .ligado i { background: var(--led); box-shadow: 0 0 6px var(--led); }
.relogio .modo .ligado { color: var(--gelo); }

/* Quadro branco do treino do dia, escrito à mão */
.quadro { position: relative; width: 100%; max-width: 480px; margin-bottom: 26px; background-color: var(--quadro); background-image: linear-gradient(100deg, transparent 18%, rgba(29, 63, 170, .05) 21%, transparent 38%), linear-gradient(78deg, transparent 56%, rgba(20, 20, 22, .045) 59%, transparent 74%); border: 12px solid var(--aluminio); box-shadow: inset 0 0 0 2px #A7ABB1, 0 0 0 2px #8D9197; padding: 20px 24px 22px; font-family: var(--marcador); color: var(--marcador-azul); }
.quadro::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -30px; height: 12px; background: linear-gradient(90deg, transparent 62%, var(--preto) 62% 74%, var(--marcador-vermelho) 74% 77%, transparent 77%) 0 -4px / 100% 8px no-repeat, #B5B9BF; border: 2px solid #8D9197; }
.quadro h2 { display: inline-block; font-family: var(--marcador); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--marcador-vermelho); border-bottom: 3px solid var(--marcador-vermelho); transform: rotate(-1.5deg); margin: 0 0 10px; }
.quadro .nome-treino { color: var(--preto); font-size: 21px; line-height: 1.2; margin: 0 0 10px; }
.quadro ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px; font-size: 23px; line-height: 1.3; }
.quadro ol b { font-weight: 400; color: var(--preto); }

/* ---------- Piso de borracha (seção escura) com dentes de encaixe de tatame em cima e embaixo ---------- */
.piso { --respiro: 60px; position: relative; background-color: var(--borracha); background-image: var(--tex-borracha); color: var(--gelo); padding: var(--respiro) 0 72px; }
.piso::before, .piso::after { content: ""; position: absolute; left: 0; right: 0; height: 22px; background: inherit; -webkit-mask: var(--dente-cima) 0 0 / 72px 22px repeat-x; mask: var(--dente-cima) 0 0 / 72px 22px repeat-x; }
.piso::before { top: -22px; }
.piso::after { bottom: -22px; -webkit-mask-image: var(--dente-baixo); mask-image: var(--dente-baixo); z-index: 1; }

/* Cabeçalho de seção */
.cabeca { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px 20px; margin-bottom: 34px; }
.cabeca .rotulo { display: inline-block; background: var(--amarelo); color: var(--preto); padding: 5px 12px 3px; margin-bottom: 12px; clip-path: var(--rasgo); }
.cabeca h2 { font-family: var(--forte); font-weight: 400; font-size: clamp(40px, 5.2vw, 70px); line-height: .95; text-transform: uppercase; margin: 0; }

/* ---------- Caixote de compensado: o cartão de exercício ----------
   Retângulo plano de pinus. A demarcação do caixote é a borda com as lâminas do compensado
   (sombras internas finas) e os parafusos (::after). O texto é "queimado" na madeira. */
.grade-caixotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 30px 26px; }
.caixote { --moldura: inset 0 0 0 2px #4A2C12, inset 0 0 0 4px rgba(240, 215, 170, .9), inset 0 0 0 5px #9C6B38, inset 0 0 0 7px rgba(236, 206, 155, .85), inset 0 0 0 8px #8A5B2C, inset 0 0 0 10px rgba(0, 0, 0, .06);
  position: relative; display: block; padding: 20px 20px 22px; color: var(--queimado); background-color: var(--madeira); background-image: var(--tex-veio); box-shadow: var(--moldura); transition: transform .15s ease-out, box-shadow .15s; }
/* Cada caixote mostra um pedaço diferente da tábua */
/* A tábua tem 760 × 760 px; os recortes ficam longe da emenda mesmo no caixote mais largo do celular */
.caixote:nth-child(3n+2) { background-position: -200px -120px; }
.caixote:nth-child(3n) { background-position: -380px -40px; }
.caixote:nth-child(4n) { background-position: -100px -190px; }
.caixote::after { content: ""; position: absolute; inset: 13px; pointer-events: none; --parafuso: radial-gradient(circle, #6B6258 0 1.6px, #2B2520 1.7px 3px, transparent 3.2px);
  background: var(--parafuso) top left / 7px 7px no-repeat, var(--parafuso) top right / 7px 7px no-repeat, var(--parafuso) bottom left / 7px 7px no-repeat, var(--parafuso) bottom right / 7px 7px no-repeat, var(--parafuso) top center / 7px 7px no-repeat, var(--parafuso) bottom center / 7px 7px no-repeat; }
.caixote .face { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.caixote .cima { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
/* Texto queimado: marrom quase preto, com a marca de calor em volta e o veio aparecendo por baixo */
.queimado, .caixote .altura, .caixote .nome, .caixote .musculos, .selo-caixote { color: var(--queimado); text-shadow: 0 0 1px rgba(34, 18, 10, .85), 0 0 4px rgba(95, 48, 14, .45), 0 0 10px rgba(130, 75, 25, .22); }
.queimado, .caixote .altura, .caixote .nome, .caixote .musculos { mix-blend-mode: multiply; }
.altura { display: grid; line-height: .8; }
.altura b { font-family: var(--estencil); font-weight: 900; font-size: 46px; }
.altura small { font-family: var(--estencil); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-top: 5px; }
.alca { width: 64px; height: 18px; margin-top: 6px; background: #1E140B; box-shadow: inset 0 4px 0 rgba(0, 0, 0, .6); clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%); }
.caixote .nome { font-family: var(--titulo); font-weight: 800; font-size: 26px; line-height: .95; text-transform: uppercase; }
.caixote .musculos { font-size: 15px; font-weight: 600; line-height: 1.35; margin-top: -4px; }
.caixote .fitas { margin-top: auto; }
.caixote:hover { transform: translateY(-6px); box-shadow: var(--moldura), 0 12px 0 -4px rgba(0, 0, 0, .55); }
.caixote:active { transform: translateY(2px); box-shadow: var(--moldura); }
.caixote:focus-visible { outline: 4px solid var(--amarelo); outline-offset: 6px; }

/* Foto presa com fita prateada */
.foto { position: relative; display: block; margin: 8px 4px 2px; background: #fff; padding: 6px 6px 8px; transform: rotate(-1deg); box-shadow: 0 2px 0 rgba(74, 53, 24, .35); }
.caixote:nth-child(2n) .foto, .fotos figure:nth-child(2n) .foto { transform: rotate(.8deg); }
.foto::before, .foto::after { content: ""; position: absolute; top: -7px; width: 50px; height: 17px; z-index: 1; background: rgba(201, 204, 208, .92); clip-path: var(--rasgo); }
.foto::before { left: -16px; transform: rotate(-32deg); }
.foto::after { right: -16px; transform: rotate(32deg); }
.foto .imagem { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--concreto); }
.foto .imagem img { width: 100%; height: 100%; object-fit: cover; }
.foto figcaption, .foto .legenda { display: block; font-family: var(--marcador); font-size: 17px; line-height: 1; padding-top: 7px; color: var(--marcador-azul); }

/* ---------- Piso de concreto: zonas marcadas com fita zebrada nos cantos ---------- */
.concreto { --respiro: 76px; background-color: var(--concreto); background-image: var(--tex-junta), var(--tex-concreto); background-size: 360px 360px, 220px 220px; padding: var(--respiro) 0 64px; }
.concreto .cabeca p { margin: 12px 0 0; max-width: 52ch; color: var(--texto-suave); }
.zonas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 18px; margin-bottom: 40px; }
.zona { --f: 9px; --c: 40px; position: relative; display: block; min-height: 172px; padding: 24px 22px 22px; color: var(--preto);
  background: var(--zebra) top left / var(--c) var(--f) no-repeat, var(--zebra) top left / var(--f) var(--c) no-repeat,
    var(--zebra) top right / var(--c) var(--f) no-repeat, var(--zebra) top right / var(--f) var(--c) no-repeat,
    var(--zebra) bottom left / var(--c) var(--f) no-repeat, var(--zebra) bottom left / var(--f) var(--c) no-repeat,
    var(--zebra) bottom right / var(--c) var(--f) no-repeat, var(--zebra) bottom right / var(--f) var(--c) no-repeat;
  transition: background-color .12s; }
.zona:hover, .zona:focus-visible { background-color: var(--amarelo); }
.zona .numero { display: block; font-family: var(--forte); font-weight: 400; font-size: 52px; line-height: .9; margin-bottom: 14px; }
.zona .nome { display: block; font-family: var(--titulo); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
.zona .quantos { display: block; margin-top: 8px; font-size: 15px; color: var(--texto-suave); }

/* ---------- Página de exercício ---------- */
.ficha { --respiro: 64px; background-color: var(--parede); background-image: var(--tex-bloco); padding: var(--respiro) 0 72px; }
.migalhas { font-family: var(--titulo); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 16px; }
.migalhas a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.ficha h1 { font-family: var(--forte); font-weight: 400; font-size: clamp(46px, 6.8vw, 96px); line-height: .94; text-transform: uppercase; margin: 0 0 18px; }
.ficha > .largura > .fitas { margin-bottom: 30px; align-items: center; }
.selo-caixote { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 14px 5px; background-color: var(--madeira); background-image: var(--tex-veio); box-shadow: inset 0 0 0 2px #4A2C12, inset 0 0 0 4px rgba(240, 215, 170, .9), inset 0 0 0 5px #9C6B38; font-family: var(--estencil); font-weight: 900; font-size: 26px; line-height: 1; text-transform: uppercase; }
.selo-caixote small { font-size: 13px; letter-spacing: .12em; }
.ficha-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px 52px; }
.fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0 0 30px; }
.fotos figure { margin: 0; }
.ficha h2 { font-family: var(--titulo); font-weight: 800; font-size: 36px; line-height: 1; text-transform: uppercase; margin: 0 0 16px; }
.prosa a { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prosa a:hover { background: var(--amarelo); color: var(--preto); }
.passos { list-style: none; counter-reset: passo; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.passos li::before { content: counter(passo); display: grid; place-items: center; height: 48px; padding-top: 1px; font-family: var(--forte); font-weight: 400; font-size: 26px; background: var(--amarelo); border: 3px solid var(--preto); }
.passos li span { padding-top: 10px; }
/* Placa de atenção */
.placa { position: relative; background: var(--amarelo); border: 4px solid var(--preto); padding: 16px 18px 18px 46px; margin: 0 0 32px; }
.placa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 24px; background: repeating-linear-gradient(-45deg, var(--preto) 0 8px, var(--amarelo) 8px 16px); border-right: 4px solid var(--preto); }
.placa .titulo-placa { display: flex; align-items: center; gap: 10px; font-family: var(--titulo); font-weight: 800; font-size: 21px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.placa .titulo-placa i { display: grid; place-items: end center; width: 28px; height: 25px; padding-bottom: 1px; background: var(--preto); color: var(--amarelo); clip-path: polygon(50% 0, 100% 100%, 0 100%); font: 900 15px/1 var(--titulo); font-style: normal; }
.placa ul { margin: 0; padding-left: 1.2em; }
.musculos-lista { display: grid; gap: 6px; margin: 0 0 34px; }
.musculos-lista b { font-family: var(--titulo); font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }

/* Ferramentas da página: cronômetro de LED e barra de séries */
.ferramentas { display: grid; gap: 18px; }
.bancada { background-color: var(--aco); background-image: var(--tex-chapa); color: var(--gelo); padding: 18px; }
.bancada .rotulo { display: block; color: var(--amarelo); margin-bottom: 12px; }
.bancada .botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.barra { display: flex; align-items: center; justify-content: center; height: 110px; margin: 4px 0 6px; overflow: hidden; }
.barra .anilhas { display: flex; align-items: center; gap: 2px; min-width: 70px; }
.barra .anilhas.esq { flex-direction: row-reverse; }
.barra .luva { width: 34px; height: 14px; background: linear-gradient(#C3C6CB, #8E9299); }
.barra .colar { width: 8px; height: 30px; background: #6B6F76; }
.barra .pegada { flex: 0 1 220px; height: 9px; background: repeating-linear-gradient(60deg, #9EA2A8 0 2px, #7E8288 2px 4px); }
.anilha { display: block; width: 15px; height: 96px; border: 2px solid rgba(0, 0, 0, .45); background: var(--anilha-25); }
.anilha.p20 { height: 96px; background: var(--anilha-20); }
.anilha.p15 { height: 84px; background: var(--anilha-15); }
.anilha.p10 { height: 72px; background: var(--anilha-10); }

/* ---------- Rodapé: portão de enrolar do galpão ---------- */
.rodape { background-color: var(--portao); background-image: repeating-linear-gradient(180deg, #3B3E44 0 2px, var(--portao) 2px 24px, #1A1B1E 24px 26px); color: var(--claro-suave); --respiro: 40px; padding: var(--respiro) 0 0; }
.rodape .topo-rodape { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 26px; }
.rodape .sobre { max-width: 34ch; font-size: 15px; line-height: 1.5; margin: 16px 0 0; color: #D5D7DC; }
.rodape nav { flex: 1 1 18rem; min-width: 0; max-width: 660px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0 30px; }
.rodape nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--titulo); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: #D5D7DC; }
.rodape nav a:hover { color: var(--amarelo); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.rodape .final { font-family: var(--titulo); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--claro-suave); padding-bottom: 18px; margin: 0; }
.rodape .trilho { height: 16px; background: #141518; border-top: 3px solid #4A4D54; }

/* ---------- Telas maiores ---------- */
@media (min-width: 481px) {
  .largura { padding-left: 24px; padding-right: 24px; }
  .marca { font-size: 32px; }
}
@media (min-width: 861px) {
  .menu { display: flex; flex-wrap: wrap; gap: 0 28px; }
  .busca { width: auto; margin-left: auto; }
  .busca input { width: 220px; }
  .heroi { --respiro: 64px; padding-bottom: 96px; }
  .heroi .largura { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; }
  .piso { --respiro: 76px; padding-bottom: 96px; }
  .ficha-grade { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .ferramentas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Fita zebrada na diagonal (entrada do rodapé) ----------
   A seção de baixo sobe por cima da de cima (margem negativa) e tem o topo cortado na diagonal;
   a fita acompanha o corte: ::before é a borda preta, ::after são as listras.
   "troca" sobe para a direita; "troca inversa" sobe para a esquerda. Vale em qualquer largura de tela. */
.troca { position: relative; z-index: 1; margin-top: calc(-1 * var(--d)); padding-top: calc(var(--d) + var(--fita) + var(--respiro, 48px)); clip-path: polygon(0 var(--d), 100% 0, 100% 100%, 0 100%); }
.troca::before, .troca::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; pointer-events: none; }
.troca::before { top: 0; height: calc(var(--d) + var(--fita) + 4px); background: var(--preto); clip-path: polygon(0 var(--d), 100% 0, 100% calc(var(--fita) + 4px), 0 calc(var(--d) + var(--fita) + 4px)); }
.troca::after { top: 2px; height: calc(var(--d) + var(--fita)); background: repeating-linear-gradient(-45deg, var(--amarelo) 0 16px, var(--preto) 16px 32px); clip-path: polygon(0 var(--d), 100% 0, 100% var(--fita), 0 calc(var(--d) + var(--fita))); }
.troca.inversa { clip-path: polygon(0 0, 100% var(--d), 100% 100%, 0 100%); }
.troca.inversa::before { clip-path: polygon(0 0, 100% var(--d), 100% calc(var(--d) + var(--fita) + 4px), 0 calc(var(--fita) + 4px)); }
.troca.inversa::after { clip-path: polygon(0 0, 100% var(--d), 100% calc(var(--d) + var(--fita)), 0 var(--fita)); }