@font-face { font-family: 'ValeSans'; src: url(../fonts/ValeSans-Regular.woff2) format('woff2'); font-style: normal; font-weight: normal; font-display: swap; }
@font-face { font-family: 'ValeSans'; src: url(../fonts/ValeSans-Bold.woff2) format('woff2'); font-style: normal; font-weight: bold; font-display: swap; }

:root {
  --orange: #C3441C;
  --orange-d: #5F1910;
  --orange-l: #EAB1A2;

  --yellow: #ECB11F;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

* {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

html { font: 14px/1.25 'ValeSans', tahoma, sans-serif; color: var(--orange-d); overflow: hidden; }

body { overflow: auto; width: 100%; height: 100vh; }

html, body {
  overscroll-behavior-y: contain; /* Prevents pull-to-refresh but allows overscroll glow */
  /* Or use: overscroll-behavior-y: none; to completely disable overscroll effects */
}

section { width: 100vw; height: 100vh; position: relative; padding: 30px 48px 26px 310px; transition: all .3s ease-out; }

a { text-decoration: none; transition: all .3s ease-out; }



.scrollable { flex: 1 1 auto; overflow-y: scroll; margin-top: 20px; scrollbar-color: var(--orange) transparent; width: calc( 100% + 12px ); padding-right: 6px; }
	.scrollable p + p { margin-top: 8px; }


.back { position: absolute; top: 28px; left: 246px; width: 60px; height: 60px; background: var(--orange) url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.17187 13.125L17.6719 2.625L15 -1.31134e-06L-1.31134e-06 15L15 30L17.6719 27.375L7.17187 16.875L30 16.875L30 13.125L7.17187 13.125Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center / 50% auto; border-radius: 8px; font-size: 1px; text-indent: -999rem; transition: all .3s ease-out; }


.head { position: absolute; top: 28px; left: 42px; width: 184px; border: 1px solid var(--orange); border-radius: 8px; background: #fff; padding: 8px; z-index: 9; }
	.head nav { margin-top: 20px; }
		.head nav a { display: block; padding: 8px 20px; border-radius: 12px; font-weight: bold; }
			.head nav a + a { margin-top: 8px; }


.body { position: relative; width: 100%; height: 100%; }
	.body aside { position: absolute; top: 0; right: 0; width: 240px; height: 787px; border: 1px solid var(--orange); border-radius: 8px; background: #fff; padding: 20px; z-index: 8; overflow: hidden; display: flex; flex-direction: column; }


/* .stage { width: 1506px; height: 847px; margin: auto; position: absolute; top: 0; left: calc( 50% - 753px ); transition: all .3s ease-out; } */
.stage { width: 1506px; height: 847px; margin: 0 auto; transition: all .3s ease-out; }
  .stage.hide { /* opacity: 0; visibility: hidden; pointer-events: none; position: absolute; */ display: none; }



#ctrl-cb { display: none; }
#ctrl-nav { position: absolute; bottom: 5px; right: 5px; width: 20px; height: 20px; background: var(--orange-d); border-radius: 50%; font-size: 1px; text-indent: -999rem; }
#ctrl { position: absolute; bottom: 30px; right: 5px; width: 180px; background: #fff; border: 1px solid var(--orange); border-radius: 8px; z-index: 10; display: flex; justify-content: center; align-items: center; clip-path: polygon( 0% 0%, 100% 0%, 100% 0%, 0% 0% ); transition: all .3s ease-in-out; padding: 8px 20px; gap: 20px; }
	#ctrl-cb:checked ~ #ctrl { clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100% ); }


#home { background: url(../img/base.webp) no-repeat 0 0 / cover; }
  #home h1 { font-size: 80px; line-height: 1; }
  #home h2 { font-size: 20px; line-height: 1; margin-top: 20px; }

  #home-indigena { padding: 8px; background: var(--orange); border-radius: 8px; color: #fff; font-size: 24px; line-height: 1; position: relative; }
    #home-indigena::after { content: ''; display: block; width: 100%; height: 100px; background: url(../img/pattern-minas-gerais.svg) repeat-x center / auto 100px; margin-top: 8px; transition: all .3s ease-out; }

  #home-quilombola { padding: 8px; background: var(--orange); border-radius: 8px; color: #fff; font-size: 24px; line-height: 1; position: relative; }
    #home-quilombola::after { content: ''; display: block; width: 100%; height: 100px; background: url(../img/pattern-minas-quilombola.svg) no-repeat center / contain; margin-top: 8px; transition: all .3s ease-out; }

    #home-pesquisa { padding: 8px; background: var(--orange-l); border-radius: 8px; color: var(--orange-d); font-size: 24px; line-height: 1; position: relative; }

  #cidades-percurso { width: 400px; height: 400px; position: absolute; top: 150px; left: 450px; background: url(../img/cidades-e-percurso.svg) no-repeat center / contain; }

  #caminhao { position: absolute; top: 140px; left: 510px; width: auto; height: 280px; }

  #barco1 { width: 60px; height: auto; position: absolute; top: 120px; left: 960px; }
  #barco2 { width: 60px; height: auto; position: absolute; top: 350px; left: 860px; transform: rotateY(180deg) rotate(20deg); }
  #barco3 { width: 60px; height: auto; position: absolute; top: 510px; left: 1015px; transform: rotate(20deg); }
  #barco4 { width: 60px; height: auto; position: absolute; top: 560px; left: 770px; transform: rotateY(180deg); }
  #barco5 { width: 60px; height: auto; position: absolute; top: 690px; left: 910px; transform: rotate(-10deg); }

  #onca1 { width: 60px; height: auto; position: absolute; top: 400px; left: 440px; }
  #onca2 { width: 60px; height: auto; position: absolute; top: 550px; left: 640px; }
  #onca3 { width: 60px; height: auto; position: absolute; top: 560px; left: 600px; transform: rotateY(180deg); }

  #escorpiao1 { width: 30px; height: auto; position: absolute; top: 200px; left: 475px; transform: rotateY(180deg); }
  #escorpiao2 { width: 30px; height: auto; position: absolute; top: 280px; left: 770px; }
  #escorpiao3 { width: 30px; height: auto; position: absolute; top: 420px; left: 200px; transform: rotateY(180deg); }
  #escorpiao4 { width: 30px; height: auto; position: absolute; top: 610px; left: 450px; }

  #calango1 { width: 40px; height: auto; position: absolute; top: 230px; left: 640px; transform: rotateY(180deg); }
  #calango2 { width: 40px; height: auto; position: absolute; top: 240px; left: 660px; }
  #calango3 { width: 40px; height: auto; position: absolute; top: 390px; left: 290px; transform: rotateY(180deg); }
  #calango4 { width: 40px; height: auto; position: absolute; top: 400px; left: 310px; }

  #siriema1 { width: 80px; height: auto; position: absolute; top: 340px; left: 640px; }
  #siriema2 { width: 80px; height: auto; position: absolute; top: 430px; left: 390px; transform: rotateY(180deg) rotate(10deg); }



#pesquisa { background: url(../img/base.webp) no-repeat center / cover; }
  #pesquisa h1 { padding: 8px; background: var(--orange-l); border-radius: 8px; color: var(--orange-d); font-size: 24px; line-height: 1; position: relative; }
  #pesquisa p { margin-top: 20px; }


#quilombola { background: url(../img/base-quilombola.webp) no-repeat center / contain; }
  #quilombola h1 { padding: 8px; background: var(--orange); border-radius: 8px; color: #fff; font-size: 24px; line-height: 1; position: relative; }
    #quilombola h1::after { content: ''; display: block; width: 100%; height: 120px; background: url(../img/pattern-minas-quilombola.svg) no-repeat center / contain; margin-top: 8px; transition: all .3s ease-out; }
  #quilombola * + p { margin-top: 20px; }
  #quilombola nav { margin-top: 20px; border-top: 1px solid var(--yellow); padding-top: 20px; }
    #quilombola nav a { display: block; padding: 8px 12px; border-radius: 12px; font-weight: bold; background: var(--yellow); color: var(--orange-d); text-align: center; }
      /* #quilombola nav a:hover { background: var(--orange-d); color: #fff; } */
  #quilombola aside h2 { line-height: 1.2; }
  #quilombola .scrollable * + * { margin-top: 8px; }
  #quilombos { position: absolute; top: 200px; left: 200px; }


#quilombos-historicos { background: url(../img/base-quilombos.webp) no-repeat center / contain; }
  #quilombos-historicos h1 { padding: 8px; background: var(--orange); border-radius: 8px; color: #fff; font-size: 24px; line-height: 1; position: relative; }
  #quilombos-historicos h1::after { content: ''; display: block; width: 100%; height: 120px; background: url(../img/pattern-minas-quilombola.svg) no-repeat center / contain; margin-top: 8px; transition: all .3s ease-out; }
  #quilombos-historicos * + p { margin-top: 20px; }
  #quilombos-historicos nav { margin-top: 20px; border-top: 1px solid var(--yellow); padding-top: 20px; }
    #quilombos-historicos nav a { display: block; padding: 8px 12px; border-radius: 12px; font-weight: bold; background: var(--orange-d); color: #fff; text-align: center; }
    #quilombos-historicos .body .info { position: absolute; bottom: 0; right: 0; width: 240px; height: 380px; border: 1px solid var(--orange); border-radius: 8px; background: #fff; padding: 8px; z-index: 9; }
      #quilombos-historicos .body .info h2 { line-height: 1.2; }



#indigena { background: url(../img/base-indigenas-clear.webp) no-repeat center / contain; }
  #indigena h1 { padding: 8px; background: var(--orange); border-radius: 8px; color: #fff; font-size: 24px; line-height: 1; position: relative; }
    #indigena h1::after { content: ''; display: block; width: 100%; height: 120px; background: url(../img/pattern-minas-gerais.svg) repeat-x center / contain; margin-top: 8px; transition: all .3s ease-out; }
  #indigena * + p { margin-top: 20px; }
  #indigena nav { margin-top: 20px; border-top: 1px solid var(--orange); padding-top: 20px; }
    #indigena nav h2 { line-height: 1.2; font-size: 20px; font-weight: bold; margin-bottom: 8px; }
    #indigena nav a { display: block; padding: 8px 12px; border-radius: 12px; font-weight: bold; background: var(--orange-d); color: #fff; text-align: center; }
      #indigena nav a.active { background: var(--orange); color: #fff; }
  #indigena .body { position: relative; }
    #indigena .body .info { position: absolute; bottom: 0; right: 0; width: 240px; height: 300px; border: 1px solid var(--orange); border-radius: 8px; background: #fff; padding: 8px; z-index: 9; }
      #indigena .body .info * + p { margin-top: 8px; }
    #indigena .body:has( details[open] ) details:not([open]),
    #indigena .body:has( details[open] ) details:not([open]) summary::before,
    #indigena .body:has( details[open] ) details:not([open])::before,
    #indigena .body:has( details[open] ) details:not([open])::after { opacity: .25; pointer-events: none; }
    #indigena .body details { position: absolute; }
      #indigena .body details[open] { z-index: 99 }
      #indigena .body details summary { position: relative; padding: 0 8px; background: #fff; color: var(--orange-d); text-transform: uppercase; list-style: none; cursor: pointer; line-height: 22px; border-radius: 11px; letter-spacing: -1px; }
      #indigena .body details[open] summary { background: var(--orange-d); color: #fff; }
      #indigena .body details .details-content { position: relative; margin-top: 8px; background: var(--orange-d); color: #fff; padding: 20px; border-radius: 8px; width: 180px; }
        #indigena .body details .details-content dl {}
          #indigena .body details .details-content dt { font-weight: bold;}
            #indigena .body details .details-content dt::after { content: ':'; }
            #indigena .body details .details-content * + dt { margin-top: 20px; }
          #indigena .body details .details-content dd {}
      #indigena .body details .details-close { position: absolute; top: 0; right: -34px; width: 30px; height: 30px; text-align: center; line-height: 31px; background: var(--orange-d); color: #fff; border-radius: 50%; appearance: none; font-weight: bold; border: 0; cursor: pointer; }

    #indigena .body #arana { top: 255px; left: 724px; }
      #indigena .body #arana::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: -1px; left: -18px; }
      #indigena .body #arana::after { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: -5px; left: -34px; }

    #indigena .body #borum { top: 494px; left: 647px; }
      #indigena .body #borum::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 3px; left: -18px; }
      #indigena .body #borum::after { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 3px; left: -40px; }
      #indigena .body #borum summary::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 14px; left: -30px; }

    #indigena .body #kaxixo { top: 435px; left: 533px; }
      #indigena .body #kaxixo::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; left: -18px; }

    #indigena .body #kiriri { top: 584px; left: 453px; }
      #indigena .body #kiriri::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 0; left: -18px; }

    #indigena .body #krenak { top: 425px; left: 758px; }
      #indigena .body #krenak::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: -2px; left: -18px; }
      #indigena .body #krenak::after { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 9px; left: -31px; }

    #indigena .body #krenak2 { top: 409px; left: 525px; }
      #indigena .body #krenak2[open] { left: 460px; }
      #indigena .body #krenak2[open] summary { text-align: right; }
      #indigena .body #krenak2::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 3px; right: -18px; }

    #indigena .body #maxakali { top: 275px; left: 821px; }
      #indigena .body #maxakali::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 2px; left: -18px; }

    #indigena .body #maxakali2 { top: 316px; left: 785px; }
      #indigena .body #maxakali2::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 2px; left: -18px; }

    #indigena .body #maxakali3 { top: 340px; left: 771px; }
      #indigena .body #maxakali3::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 2px; left: -18px; }

    #indigena .body #maxakali4 { top: 314px; left: 657px; }
      #indigena .body #maxakali4::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 2px; left: -18px; }

    #indigena .body #mukurin { top: 365px; left: 752px; }
      #indigena .body #mukurin::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 2px; left: -18px; }

    #indigena .body #pataxo { top: 400px; left: 714px; }
      #indigena .body #pataxo::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 0; left: -18px; }

    #indigena .body #pataxo2 { top: 278px; left: 574px; }
      #indigena .body #pataxo2[open] { left: 532px; }
        #indigena .body #pataxo2[open] summary { text-align: right; }
      #indigena .body #pataxo2::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 3px; right: -18px; }

    #indigena .body #pataxo3 { top: 517px; left: 539px; }
      #indigena .body #pataxo3::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; left: -18px; }

    #indigena .body #pataxo4 { top: 475px; left: 365px; }
      #indigena .body #pataxo4::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; right: -18px; }
      #indigena .body #pataxo4::after { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 6px; right: -35px; }

    #indigena .body #pataxo5 { top: 455px; left: 583px; }
      #indigena .body #pataxo5::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; left: -18px; }

    #indigena .body #pataxo6 { top: 473px; left: 607px; }
      #indigena .body #pataxo6::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; left: -18px; }

    #indigena .body #puri { top: 531px; left: 693px; }
      #indigena .body #puri::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 2px; left: -18px; }

    #indigena .body #puri2 { top: 554px; left: 614px; }
      #indigena .body #puri2::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 2px; left: -18px; }

    #indigena .body #tuxa { top: 259px; left: 522px; }
      #indigena .body #tuxa::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 2px; left: -18px; }

    #indigena .body #xakriaba { top: 148px; left: 590px; }
      #indigena .body #xakriaba::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: -1px; left: -18px; }
      #indigena .body #xakriaba::after { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 11px; left: -34px; }

    #indigena .body #xucuru { top: 606px; left: 467px; }
      #indigena .body #xucuru::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; left: -18px; }

    #indigena .body #xucuru2 { top: 496px; left: 471px; }
      #indigena .body #xucuru2[open] { left: 394px; }
      #indigena .body #xucuru2[open] summary { text-align: right; }
      #indigena .body #xucuru2::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; right: -18px; }



  #etno-historico { background: url(../img/base-indigenas-clear.webp) no-repeat center / contain; }
    #etno-historico h1 { padding: 8px; background: var(--orange); border-radius: 8px; color: #fff; font-size: 24px; line-height: 1; position: relative; }
      #etno-historico h1::after { content: ''; display: block; width: 100%; height: 120px; background: url(../img/pattern-minas-gerais.svg) repeat-x center / contain; margin-top: 8px; transition: all .3s ease-out; }
    #etno-historico * + p { margin-top: 20px; }
    #etno-historico nav { margin-top: 20px; border-top: 1px solid var(--orange); padding-top: 20px; }
      #etno-historico nav h2 { line-height: 1.2; font-size: 20px; font-weight: bold; margin-bottom: 8px; }
      #etno-historico nav a { display: block; padding: 8px 12px; border-radius: 12px; font-weight: bold; background: var(--orange-d); color: #fff; text-align: center; }
        #etno-historico nav a.active { background: var(--orange); color: #fff; }
    #etno-historico .body { position: relative; }
      #etno-historico .body img { opacity: .75; width: 835px; height: auto; margin: 102px 112px; }
      #etno-historico .body .info { position: absolute; bottom: 0; right: 0; width: 240px; height: 280px; border: 1px solid var(--orange); border-radius: 8px; background: #fff; padding: 8px; z-index: 9; }
        #etno-historico .body .info * + p { margin-top: 8px; }


  #linguistico { background: url(../img/base-linguistico.webp) no-repeat center / contain; }
    #linguistico h1 { padding: 8px; background: var(--orange); border-radius: 8px; color: #fff; font-size: 24px; line-height: 1; position: relative; }
      #linguistico h1::after { content: ''; display: block; width: 100%; height: 120px; background: url(../img/pattern-minas-gerais.svg) repeat-x center / contain; margin-top: 8px; transition: all .3s ease-out; }
    #linguistico * + p { margin-top: 20px; }
    #linguistico nav { margin-top: 20px; border-top: 1px solid var(--orange); padding-top: 20px; }
      #linguistico nav h2 { line-height: 1.2; font-size: 20px; font-weight: bold; margin-bottom: 8px; }
      #linguistico nav a { display: block; padding: 8px 12px; border-radius: 12px; font-weight: bold; background: var(--orange-d); color: #fff; text-align: center; }
        #linguistico nav a.active { background: var(--orange); color: #fff; }
    #linguistico .body { position: relative; }
      #linguistico .info { position: absolute; bottom: 0; right: 0; width: 240px; height: 350px; border: 1px solid var(--orange); border-radius: 8px; background: #fff; padding: 8px; z-index: 9; }
        #linguistico .info * + p { margin-top: 8px; }


  #sitios-arqueologicos { background: url(../img/base-sitios-arqueologicos.webp) no-repeat center / contain; }#linguistico h1 { padding: 8px; background: var(--orange); border-radius: 8px; color: #fff; font-size: 24px; line-height: 1; position: relative; }
    #sitios-arqueologicos h1 { padding: 8px; background: var(--orange); border-radius: 8px; color: #fff; font-size: 24px; line-height: 1; position: relative; }
      #sitios-arqueologicos h1::after { content: ''; display: block; width: 100%; height: 120px; background: url(../img/pattern-minas-gerais.svg) repeat-x center / contain; margin-top: 8px; transition: all .3s ease-out; }
    #sitios-arqueologicos * + p { margin-top: 20px; }
    #sitios-arqueologicos nav { margin-top: 20px; border-top: 1px solid var(--orange); padding-top: 20px; }
      #sitios-arqueologicos nav h2 { line-height: 1.2; font-size: 20px; font-weight: bold; margin-bottom: 8px; }
      #sitios-arqueologicos nav a { display: block; padding: 8px 12px; border-radius: 12px; font-weight: bold; background: var(--orange-d); color: #fff; text-align: center; }
        #sitios-arqueologicos nav a.active { background: var(--orange); color: #fff; }
    #linguisitios-arqueologicosstico .body { position: relative; }
      #sitios-arqueologicos .info { position: absolute; bottom: 0; right: 0; width: 240px; height: 280px; border: 1px solid var(--orange); border-radius: 8px; background: #fff; padding: 8px; z-index: 9; }
        #sitios-arqueologicos .info * + p { margin-top: 8px; }

    #sitios-arqueologicos .body { position: relative; }
    #sitios-arqueologicos .body ol { list-style-position: inside; }
    #sitios-arqueologicos .body:has( details[open] ) details:not([open]),
    #sitios-arqueologicos .body:has( details[open] ) details:not([open]) summary::before,
    #sitios-arqueologicos .body:has( details[open] ) details:not([open])::before,
    #sitios-arqueologicos .body:has( details[open] ) details:not([open])::after { opacity: .25; pointer-events: none; }
    #sitios-arqueologicos .body details { position: absolute; }
      #sitios-arqueologicos .body details[open] { z-index: 99 }
      #sitios-arqueologicos .body details summary { position: relative; padding: 0 8px; background: #fff; color: var(--orange); text-transform: uppercase; list-style: none; cursor: pointer; line-height: 22px; border-radius: 11px; letter-spacing: -1px; }
      #sitios-arqueologicos .body details[open] summary { background: var(--orange); color: #fff; }
      #sitios-arqueologicos .body details .details-content { position: relative; margin-top: 8px; background: var(--orange); color: #fff; padding: 20px; border-radius: 8px; width: 180px; }
        #sitios-arqueologicos .body details .details-content dl {}
          #sitios-arqueologicos .body details .details-content dt { font-weight: bold;}
            #sitios-arqueologicos .body details .details-content dt::after { content: ':'; }
            #sitios-arqueologicos .body details .details-content * + dt { margin-top: 20px; }
          #sitios-arqueologicos .body details .details-content dd {}
      #sitios-arqueologicos .body details .details-close { position: absolute; top: 0; right: -34px; width: 30px; height: 30px; text-align: center; line-height: 31px; background: var(--orange); color: #fff; border-radius: 50%; appearance: none; font-weight: bold; border: 0; cursor: pointer; }

      #sitios-arqueologicos .body #jaiba { top: 145px; left: 620px; }
        #sitios-arqueologicos .body #jaiba::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; left: -18px; }

      #sitios-arqueologicos .body #curvelo { top: 385px; left: 565px; }
        #sitios-arqueologicos .body #curvelo::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; left: -18px; }

      #sitios-arqueologicos .body #rio-abaixo { top: 454px; left: 658px; }
        #sitios-arqueologicos .body #rio-abaixo::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; left: -18px; }

      #sitios-arqueologicos .body #barao-de-cocais { top: 480px; left: 655px; }
       #sitios-arqueologicos .body #barao-de-cocais::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; left: -18px; }

      #sitios-arqueologicos .body #nova-lima { top: 500px; left: 622px; }
        #sitios-arqueologicos .body #nova-lima::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; left: -18px; }
        #sitios-arqueologicos .body #nova-lima .details-content { width: 300px; }

      #sitios-arqueologicos .body #belo-vale { top: 505px; left: 495px; }
        #sitios-arqueologicos .body #belo-vale::before { content: ''; display: block; width: 16px; height: 16px; background: var(--orange-d); border-radius: 50%; position: absolute; top: 1px; right: -18px; }
        #sitios-arqueologicos .body #belo-vale[open] { left: 389px; }
        #sitios-arqueologicos .body #belo-vale[open] summary { text-align: right; }