.zoom {
	overflow: hidden;
}

.zoom img {
	max-width: 100%;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.zoom:hover img {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.whatsapp-share-button{
	display: inline-block;            
	width: 40px;
	height: 40px;
	margin: 5px;
	background-size: 100% 100%; 
	background-image: url("../imagens/whatsapp\ button.png"); 
	background-repeat: no-repeat;
	background-position: center;
}


.telegram-share-button{
	display: inline-block;            
	width: 40px;
	height: 40px;
	margin: 5px;
	background-size: 100% 100%; /* ou 'contain' */
	background-image: url("../imagens/telegram\ button.png");
	background-repeat: no-repeat;
	background-position: center;
}



.facebook-share-button{
	display: inline-block;            
	width: 40px;
	height: 40px;
	margin: 5px;
	background-size: 100% 100%; /* ou 'contain' */
	background-image: url("../imagens/facebook\ button.png"); /*Base 64 Icon by Xinh Studio*/
	background-repeat: no-repeat;
	background-position: center;
}

.twitter-share-button{
	display: inline-block;            
	width: 40px;
	height: 40px;
	margin: 5px;
	background-size: 100% 100%; /* ou 'contain' */
	background-image: url("../imagens/twitter\ button.png");
	background-repeat: no-repeat;
	background-position: center;
}

.pinterest-share-button{
	display: inline-block;            
	width: 40px;
	height: 40px;
	margin: 5px;
	background-size: 100% 100%; /* ou 'contain' */
	background-image: url("../imagens/pinterest\ button.png"); /*Base 64 Icon by Xinh Studio*/
	background-repeat: no-repeat;
	background-position: center;
}




.breadcrumb-custom {
	display: flex;
	flex-wrap: wrap;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	list-style: none;
	background-color: #f8f9fa;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .breadcrumb-custom .breadcrumb-item {
	font-size: 0.9rem;
  }
  
  .breadcrumb-custom .breadcrumb-item a {
	color: #6c757d;
	text-decoration: none;
  }
  
  .breadcrumb-custom .breadcrumb-item a:hover {
	color: #007bff;
  }
  
  .breadcrumb-custom .breadcrumb-item.active {
	color: #6c757d;

  }
  
  .breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
	content: "›";
	color: #6c757d;
	padding: 0 0.5rem;
  }




 /* Estilos personalizados para o card */
 .card {
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s; /* Efeito de transição suave */
  }
  .card-title {
	font-size: 24px;
	color: #333;
  }
  .card-text {
	color: #666;
  }
  .card:hover {
	transform: scale(1.05); /* Efeito de zoom no hover */
  }
  .card-body {
	padding: 20px;
  }


  
  /* Tema Halloween */
  .card.halloween {
    background-color: #1b1b1b;
    border: 2px solid #ff7518;
    color: #f8f8f8;
    box-shadow: 0 0 10px rgba(255, 117, 24, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card.halloween:hover {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(255, 117, 24, 0.8);
  }

  .card.halloween .card-title {
    color: #ffb347;
    font-weight: bold;
  }

  .card.halloween .card-text {
    color: #d1d1d1;
  }

  .card.halloween .card-footer {
    background-color: transparent;
    border-top: none;
  }

  .card.halloween .btn {
    background-color: #ff7518;
    border: none;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 117, 24, 0.4);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  .card.halloween .btn:hover {
    background-color: #ff9e42;
    box-shadow: 0 0 15px rgba(255, 117, 24, 0.7);
  }

  /* Efeito de brilho leve nas imagens */
  .card.halloween img {
    border-bottom: 2px solid #ff7518;
    filter: brightness(0.9);
    transition: filter 0.3s ease;
  }

  .card.halloween:hover img {
    filter: brightness(1.1);
  }


/* Tema Dia da Água */
.card-agua {
  border: 2px solid #4fc3f7;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-agua:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.card-agua .card-title {
  color: #0277bd;
  font-weight: 600;
}

.card-agua .card-footer {
  background: #e1f5fe;
}

.btn-agua {
  background-color: #039be5;
  border: none;
}

.btn-agua:hover {
  background-color: #0277bd;
}

/* --- TEMA FESTA JUNINA --- */

/* Estilo geral do card */
.card-junino {
  border: 2px dashed #e76f51; /* Borda "costurada" laranja */
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fffef9; /* Fundo levemente palha */
}

/* Efeito ao passar o mouse */
.card-junino:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(231, 111, 81, 0.2);
}

/* Enfeite com emojis no título para dar um charme */
.card-junino .card-title::before {
  content: '🌽 ';
}
.card-junino .card-title {
  color: #264653; /* Azul bem escuro para contraste */
  font-weight: 700;
  font-size: 1.3rem;
}

/* Destacando as habilidades da BNCC */
.bncc-skills {
  font-size: 0.85rem;
  color: #b74f00;
  background-color: #ffeadb;
  padding: 6px 10px;
  border-radius: 8px;
  display: block;
  margin-top: 10px;
  font-weight: 600;
  line-height: 1.5;
}

/* Rodapé com textura de toalha de mesa xadrez */
.card-footer-junino {
  background-color: #fdfaf6;
  background-image: 
    linear-gradient(45deg, rgba(231, 111, 81, 0.05) 25%, transparent 25%, transparent 75%, rgba(231, 111, 81, 0.05) 75%, rgba(231, 111, 81, 0.05)), 
    linear-gradient(45deg, rgba(231, 111, 81, 0.05) 25%, transparent 25%, transparent 75%, rgba(231, 111, 81, 0.05) 75%, rgba(231, 111, 81, 0.05));
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  border-top: 2px dashed #e76f51;
  padding: 1rem;
}

/* Botão temático */
.btn-junino {
  background-color: #e76f51;
  border-color: #e76f51;
  color: #fff;
  font-weight: bold;
  border-radius: 20px;
  padding: 8px 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-junino:hover {
  background-color: #d1495b;
  border-color: #d1495b;
  color: #fff;
  transform: scale(1.05);
}

/* ==========================================================================
   ESTILOS TEMÁTICOS: COPA DO MUNDO 2026 (ATIVIDADE PEDAGÓGICA)
   ========================================================================== */

/* Caixa principal que isola o tema da Copa para não dar conflito no site */
.tema-copa {
    font-family: 'Nunito', sans-serif;
    background-color: #f8f9fa;
    color: #212529;
}

/* Banner Principal */
.tema-copa .hero-section {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%);
    color: white;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Cards das Dicas de Aula */
.tema-copa .card-dica {
    border: none;
    border-top: 5px solid #ffc107; /* Bordinha amarela estilo Brasil */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    background-color: #ffffff;
}

.tema-copa .card-dica:hover {
    transform: translateY(-5px);
}

/* Badges (Etiquetas) dos códigos da BNCC */
.tema-copa .bncc-badge {
    background-color: #0dcaf0;
    color: #000000;
    font-weight: bold;
    font-size: 0.9em;
}

/* Acordeão da BNCC quando está aberto */
.tema-copa .accordion-button:not(.collapsed) {
    background-color: #e8f5e9;
    color: #198754;
    font-weight: bold;
}


/* =====================================================
   Banner Sorteio Professor App
===================================================== */

.spapp-banner{

    background:#fffdf6;
    border-radius:28px;
    padding:40px 45px;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
    overflow:hidden;
    position:relative;
    border:2px solid #efe2b0;

}

.spapp-recomendado{

    display:inline-flex;
    align-items:center;
    gap:8px;

    background:linear-gradient(135deg,#2f6f4f,#3f8b64);
    color:#fff;

    padding:10px 18px;

    border-radius:50px;

    font-size:.95rem;
    font-weight:700;

    margin-bottom:18px;

    box-shadow:0 8px 18px rgba(47,111,79,.25);

    white-space:nowrap;

}

.spapp-banner h2{

    font-size:2.2rem;
    font-weight:800;
    color:#222;
    margin-bottom:15px;
    line-height:1.2;

}

.spapp-banner .lead{

    font-size:1.05rem;
    line-height:1.65;
    color:#555;

}

.spapp-feature{

    background:#fff;

    border-radius:12px;

    padding:12px 15px;

    display:flex;
    align-items:center;

    font-weight:600;

    border:1px solid #f1f1f1;

    box-shadow:0 8px 18px rgba(0,0,0,.05);

    transition:.3s;

    height:100%;

    font-size:.95rem;

}

.spapp-feature:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 24px rgba(0,0,0,.08);

}

.spapp-emoji{

    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#eef8f1;

    margin-right:10px;

    font-size:18px;

    flex-shrink:0;

}

.spapp-btn-download{

    display:inline-block;

    background:linear-gradient(135deg,#2f6f4f,#3f8b64);

    color:#fff;

    padding:14px 28px;

    border-radius:50px;

    font-weight:700;

    text-decoration:none;

    font-size:17px;

    box-shadow:0 12px 25px rgba(47,111,79,.30);

    transition:.3s;

}

.spapp-btn-download:hover{

    color:#fff;

    text-decoration:none;

    transform:translateY(-3px);

    box-shadow:0 18px 30px rgba(47,111,79,.35);

}

/* ===== CELULARES ===== */

.spapp-phones{

    position:relative;

    height:500px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.spapp-phone{

    position:absolute;

    width:205px;

    border-radius:25px;

    box-shadow:0 20px 35px rgba(0,0,0,.22);

    transition:.35s;

}

.spapp-phone:hover{

    transform:scale(1.04);

    z-index:20;

}

.spapp-phone-center{

    width:235px;

    z-index:5;

}

.spapp-phone-left{

    left:20px;

    transform:rotate(-10deg);

}

.spapp-phone-right{

    right:20px;

    transform:rotate(10deg);

}

@media (max-width:991.98px){

    .spapp-banner{

        padding:28px 20px;

        border-radius:20px;

        text-align:center;

    }

    .spapp-banner h2{

        font-size:1.9rem;

    }

    .spapp-banner .lead{

        font-size:1rem;

    }

    .spapp-recomendado{

        display:inline-flex;
        justify-content:center;
        align-items:center;
        white-space:normal;
        max-width:100%;
        margin:0 auto 20px;

    }

    .spapp-banner .col-6{

        width:100%;

    }

    .spapp-feature{

        justify-content:flex-start;

    }

    .spapp-btn-download{

        display:block;
        width:100%;
        text-align:center;
        margin-top:20px;

    }

    .spapp-phones{

        position:static;

        height:auto;

        display:flex;
        justify-content:center;
        align-items:flex-end;

        gap:10px;

        margin-top:35px;

    }

    .spapp-phone{

        position:static;

        transform:none !important;

        width:30%;
        max-width:110px;

        border-radius:18px;

    }

    .spapp-phone-center{

        width:36%;
        max-width:140px;

    }

    .spapp-phone-left,
    .spapp-phone-right{

        left:auto;
        right:auto;

    }

    .spapp-phone:hover{

        transform:none !important;

    }

}

@media (max-width:430px){

    .spapp-banner{

        padding:22px 16px;

    }

    .spapp-phone-left{

        display:none;

    }

    .spapp-phone{

        max-width:95px;

    }

    .spapp-phone-center{

        max-width:125px;

    }

}