:root {
--white-low: rgba(0,0,0,0.5); }

.hide { display: none; }
.show { display: flex; }


dd {padding-left: 5%;}
dt {font-weight: bolder;}


.bn {
width: 100%; height: auto;
left: 0; top: 0;
border: 3px solid black; }

.on .lucide {
stroke: lime; }

.off .lucide {
stroke: red; }

p { padding: 8px; font-size: 1.3rem; }

.cau {
bottom:0; 
 border-left: 3px solid red;
   padding-left: 10px;}

button {
display: flex; gap:10px;
align-content: center; align-items: center;
justify-content: center;
border: none; color: #fff;
font-weight: 1000; background: none;

text-decoration: underline;
background: none; padding: 10px; 
transition: .5s all ease; }

button:hover {
background: linear-gradient(0deg,transparent 10%, black 100%); color:#fff; padding: 5px; }

.ctl {
margin: 5px 0 15px 0;
display: flex; width: 100vw;
height: 50px; align-items: center;
background: linear-gradient(0deg,#00c603,#004e01);
padding: 10px;
justify-content: space-between;
margin-left: calc(-50vw + 50%);
position: relative; }

.ctll {
position: fixed; left: 0; bottom: 0;
width: 100vw; height: 50px; display: flex;
align-items: center; 
justify-content: space-between;

background: linear-gradient(0deg,#004e03, #00c603);

padding: 10px; z-index: 991; }



.ctl, .ctll { box-shadow: 0 0 2px 1px black; }

table {
margin: 10px 0 10px 0;
width: 100%; table-layout: fixed;
border-collapse: collapse; }

th { font-weight: 800; color: #fff;
text-shadow: 0 2px 2px black,  2px 0 2px black; 
background: linear-gradient(0deg,
black, gray); }

b {
font-weight: bolder;
color: inherit; 
background: transparent; }

.b2 {
font-weight:bolder;text-decoration:underline;}

td {
background: linear-gradient(0deg,
gray, transparent); }
     
th, td {
border: 1px solid #000; padding: 8px;
white-space: nowrap; overflow-x: auto;
max-width: 0; }

td::-webkit-scrollbar {
height: 3px; }

td::-webkit-scrollbar-thumb {
background-color: #f00; }

.block {
display: flex; border: 3px groove black;
width: fit-content; }

.r {
font-weight: bold;
text-decoration: underline; }

.tip {
white-space: pre-wrap;
background: radial-gradient(circle, green 0%, #000 100%);
color: white;
position: relative; overflow: hidden; }

.tip h2 {
border-top: 5px double white;
text-align: right; padding-right: 5%; 
opacity: 0.2; transform: translateY(80%);}

.tip::before {
content: '💡'; position: absolute;
right: 20px; top: 50%;
transform: translateY(-50%);
font-size: 10em; opacity: 0.1; }



.af { width: 100%; height: auto;
padding: 10px; padding-right: 30px;
text-align: right;
border-bottom: 2px solid red;}

.af h2 {
transform: translateY(50%);
}



/* Funcionamento dos popups */



.destak-img {
display: none; width: 100%;
max-height: 200px; object-fit: contain;
margin: 10px 0; 
aspect-ratio: 4 / 3; }




.pt-destak {


text-decoration: underline double black 1px;
cursor:pointer; position:relative;
font-weight:600; transition:all 0.3s ease; }

.pt-destak:hover { transform:scale(1.5); }





.pt-destak-G {
text-decoration-color: #22c55e; }

.pt-destak-R {
text-decoration-color: #ef4444; }

.pt-destak-B {
text-decoration-color: #3b82f6; }

.pt-destak-Y {
text-decoration-color: #eab308; }

.focus-overlay {
position:fixed; top:0; left:0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
z-index: 998;
opacity: 0; visibility: hidden;
transition: all 0.3s ease; z-index: 100; }

.focus-overlay.active {
opacity:1; visibility:visible; }

.foco {
position:fixed; border:1px solid #f00;
box-shadow:0 0 100px 80px #000; 
pointer-events: none; opacity: 0;
transition: all 0.3s ease; z-index: 101; }

.foco.active { opacity: 1; }

.popup {
position:fixed;
background: linear-gradient(#555,#282828);
padding:5px; 

max-width: 90vw; 
max-height: calc(100vh - 40px);

overflow: hidden;
border: 1px solid #fff;
box-shadow: 0 0 5px 2px;

opacity:0; visibility:hidden;
transform:translateY(-10px);
box-sizing: border-box; 
transition:all 0.3s ease; z-index:102; }


.popup .to {
color:#fff; 
position: absolute; top:3px; right:3px;
}

.popup.active {
opacity: 1;
visibility: visible;
transform: translateY(0); }

.popup-titulo {
font-size:16px; font-weight:700;
color:#fff; margin-bottom:12px;
padding-bottom:8px;
text-align: center;
border-bottom: 1px solid #9999; }

.popup-conteudo {

overflow-y: auto; max-height: 50vh; overflow-wrap: anywhere;
word-break: break-word;

background: linear-gradient(0deg,
#737373,#494949);


padding: 10px;

font-size:14px; 
color:#fff; line-height:1.6; }

.popup-close {
position: absolute;
bottom: 0; right: 0;
width: 100%; height: auto;
border: none; background: #f3f4f6; cursor: pointer; padding:10px;
transform:translateY(100%);
font-size: 16px; color: #666; display: flex;
align-items: center; justify-content: center;
transition: all 0.2s ease; }

.popup-close:hover {
background:#e5e7eb; color:#333; }

.popup.acima::before {
bottom: auto; top: -10px; border-top: none;
border-bottom: 10px solid white; }

.hFo { z-index: 500; }
.whitenin { color:#fff !important; }


.clean { text-decoration:none; }





.num {
position: absolute;
left: 0; top: 0;
transform: translateY(50%);
width: 30px; height: 30px;
background: radial-gradient(circle, #007bff, #00f);
color: white; border-radius: 50%;
display: flex; align-items: center;
justify-content: center; font-weight: bold;
}

.step {
counter-reset: s; list-style: none;
padding: 0; }

.step li {
counter-increment: s; margin-bottom: 15px;
padding: 12px 16px 12px 50px;
position: relative;
background: linear-gradient(90deg, #b9b9b9, white); }

.step li::before {
content: counter(s); position: absolute;
left: 15px; top: 50%;
transform: translateY(-50%);
width: 24px; height: 24px;
background: radial-gradient(circle, #007bff, #00f);
color: white; border-radius: 50%;
display: flex; align-items: center;
justify-content: center; font-weight: bold; }


.silaba {

    position: relative;
    display: inline-block;
    padding-top: 20px;
}

.num {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #000, #0f0);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .7rem;
    font-weight: bold;
}

.smp {
display: flex;
margin: 10px 0 10px 0;
padding: 10px; 
border: 2px solid black;
align-content: center; align-items: center;
justify-content: space-between;
width: 100%; font-size: 1.4rem; }



.smp .b1 {
left: 0;
border: 3px solid red;
}

.b1, .b2 {
padding: 5px;
}

.smp .b2 {
right: 0;
border: 3px solid blue;
}



.smpc {
  display: flex;
  padding: 10px;
  gap: 30px;
  border: 2px solid black;
  width: 100%;
  font-size: 1.4rem;
  margin: 10px 0 10px 0;
  align-items: center;
}

.smpc.spec {

  white-space: normal;

  justify-content: space-between;
}

.r.l {
 
  margin-top: 20px;
  font-weight: bold; align-self: center;
}

.blok {

 justify-content: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
}

.silabas-line {
  display: flex;
align-content: center; align-items: center;
justify-content: center; text-align: center;
  gap: 2px;


}

.explicacao {
gap: 10px;
font-size: 1.2rem; display: flex;
align-content: center; align-items: center;
justify-content: center; text-align: center;

}

/* Seu CSS existente mantém igual */
.silaba {
  position: relative;
  display: inline-block;
  padding-top: 20px;
}

.num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #000, #0f0);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .7rem;
  font-weight: bold;
}


.tBlock {

padding: 10px; font-size: 1.2rem;
border: 3px solid black;
}

.tBlock .head {
 font-size: 1.4rem; padding: 10px;

}

.tBlock .on {
border-bottom: 1px double black; }











.dBox{
    margin: 15px 0;
    border: 2px solid #000;
    
    overflow: hidden;
    background: #fafafa;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.dBox .high{













background: linear-gradient(0deg,#9c201a, #640400);




    color: white;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    font-size: 1.1em;
}

.high.a {
background: linear-gradient(0deg,#32964d,#004c14); }


.high.f {
background: linear-gradient(0deg,#5f5200, #2f2900); }


.high.z {
background: linear-gradient(0deg,#009eac, #00575f); }


.high.e {
background: linear-gradient(0deg,#927e00,#3b3300); }

.high.h {
background: linear-gradient(0deg,#04003b,#0a0090); }

.c {
display: flex;
justify-content: center; align-items: center;
align-content: center; justify-content: center;


background: blue; 
}

.dBox .info{
    padding: 12px;
    line-height: 1.6;
}

.dBox .dica{
    padding: 12px;
    

background: linear-gradient(0deg,#fff8e1,#c8c8b7);

    border-top: 1px solid #ddd;
    font-style: italic;
}




  .divider-text {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 15px;
padding: 50px 0 50px 0;
    margin: 20px 0;
  }

  .divider-text hr {
    flex: 1;
    border: none;
    border-top: 2px solid #ccc;
  }

  .divider-text span {
    white-space: nowrap;
    color: #333; font-size: 1rem;
    font-weight: 500;
  }