/* ================= RESET ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}

/* ================= SESSÃO ================= */
.sessao1 {
    margin-top: 210px;
    margin-bottom: 40px;
    padding: 0 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ================= CONTAINER PRINCIPAL ================= */
.itens {
    display: flex;
    gap: 12px;
}

/* ================= CARD 1 ================= */
.eletro {
    background: #F3F4F6;
    padding: 20px;
    flex: 0 0 24%;
    min-height: 250px;
    position: relative;
    overflow: hidden;
}

/* textos */
.eletro h2 {
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 700;
    color: #092170;
}

.eletro h3 {
    font-size: 0.9rem;
    color: #092170;
    font-weight: 400;
}

/* link */
.eletro a {
    position: absolute;
    right: 160px;
    top: 56%;
    transform: translateY(-50%);
    text-decoration: none;
    font-size: 0.6rem;
    color: #248ce0;

    display: flex;
    align-items: center;
    gap: 3px;
}

.eletro a img {
    width: 10px;
}

/* imagem */
.eletro > img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
}

.Adqui {
    background: #092170;
    padding: 20px;
    flex: 0 0 24%;
    min-height: 250px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    overflow: hidden;
    position: relative;
}

/* 🔥 começa FORA da div (em cima) */
.Adqui h2,
.Adqui a {
    transform: translateY(-120px);
    opacity: 0;
    transition: all 0.6s ease;
}

/* estado FINAL (dentro da div) */
.Adqui.ativo h2,
.Adqui.ativo a {
    transform: translateY(0);
    opacity: 1;
}

/* estilo do texto */
.Adqui h2 {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 300;
}

/* botão */
.Adqui a {
    background: #0FA0F3;
    color: #111;
    padding: 12px;
    width: 100%;
    margin-top: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.Adqui img {
    width: 16px;
}

.itens .tec {
    background: #DBEAFE;
    flex: 0 0 48%;
    min-height: 400px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.itens .tec {
    position: relative;
}

.itens .tec img {
    position: absolute;
    opacity: 0;
    transition: opacity 0.6s ease;
    width: 400px;
}

.itens .tec img.active {
    opacity: 1;
}
/* dots */
.dots {
    position: absolute;
    bottom: 15px;
    display: flex;
    gap: 8px;
    align-items:right;
    justify-content: right;
    text-align: right;
}

.dot {
    width: 10px;
    height: 10px;
    background: #999;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active {
    background: #092170;
    transform: scale(1.2);
}








/* ================= CARD 3 ================= */
.itens1 .tec1 {
    background: #DBEAFE;
    flex: 0 0 48%;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.itens1 .tec1 img {
    width: 310px;
    transition: 0.3s;
}

/* ================= SEGUNDA LINHA ================= */
.itens1 {
    margin-top: 30px;
    display: flex;
    gap: 20px;
}

/* ================= ESQUERDA ================= */
.itens1 .tec1 {
    flex: 0 0 48%;
    background: #DBEAFE;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.itens1 .tec1 h2 {
    font-size: 2.4rem;
    margin-bottom: 10px;
    color: #092170;
    font-weight: 600;
}

.itens1 .tec1 p {
    font-size: 1rem;
    color: #111;
    font-weight: 300;
}


/* ================= DIREITA ================= */
.lado-direito {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ================= MARCAS ================= */
.Apple {
    background: #f5f5f5;
    padding: 15px;
    height: 200px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* topo */
.sig {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
}

.sig img {
    width: 120px;
}

/* baixo */
.phone {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.phone img {
    width: 75px;
}

/* ================= RELÓGIO ================= */
.relogio {
    background: #f5f5f5;
    padding: 10px 0 10px 15px;
    height: 200px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.relogio h2 {
    font-size: 1.7rem;
    color: #092170;
    max-width: 320px;
    font-weight: 600;
}

.relogio img {
    width: 290px;
    height: 200px;
}


/* ================= SESSÃO 2 ================= */
.sessao2 {
    margin: 40px 0px;
}

/* container principal */
.miss {
    background: #092170;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-radius: 30px;
   margin: 0 50px;

  
}

/* cada item */
.miss h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1rem;
    font-weight: 300;
    padding: 0 15px;
    position: relative;
     font-family: 'Montserrat', sans-serif;
    }
    
    /* separador (linha direita) */
    .miss h3:not(:last-child)::after {
        content: "";
    position: absolute;
    right: 0;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.4);
}

/* ícone */
.miss h3 img {
    width: 35px;
    height: 35px;
    background: #fff;
    padding: 6px;
    border-radius: 50%;
}  


.categoria {
    font-family: 'Montserrat', sans-serif;
    margin-top: 100px;
    border-bottom: 1px solid rgba(122, 121, 121, 0.4); /* linha completa */
    padding-bottom: 10px;
       margin: 140px 50px 0;
}

/* título */
.categoria h1 {
    font-size: 2.5rem;
    font-weight: 200; /* fino */
    color: #0FA0F3;
}


/* ================= CONTAINER ================= */
.comp {
    display: flex;
    margin: 40px 230px;
      gap: 0; /* controla o espaço */
     
}

/* ================= CARD ================= */
.comp .item {
    flex: 1;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
    
}

/* efeito hover */
.comp .item:hover {
    transform: translateY(-5px);
}

/* ================= IMAGEM ================= */
.comp .item > img {
    width: 180px;
    height: auto;
    margin-bottom: 4px;
}

/* ================= TEXTO ================= */
.comp .item p {
    width: 100%;
    text-align: center;
    background: #DBEAFE;
    color: #0d3dda;
    font-size: 0.85rem;
    font-weight: 400;
    padding: 10px;
    height: 60px;
    width: 95%;



}

/* ================= LINK ================= */
.comp .item a {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    background: #DBEAFE;
    color: #0d3dda;
    text-decoration: none;
    font-size: 0.8rem;
    padding: 6px;
    transition: 0.3s;
    z-index: 2;
    top: 10px;
    height: 25px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
     position: absolute;
    top: 229px;
    /* right: 35px; */
}

/* hover do link */
.comp .item a:hover {
    background: #c7dcfc;
}

/* ícone da seta */
.comp .item a img {

 width: 20px;
    height: 20px;
    background: #3b82f6;
    border-radius: 50%;
    padding: 5px;
}

.comp1 {
    background-color: #F3F4F6;
    padding: 20px 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
}

/* ================= TÍTULO ================= */
.categoria1 h1 {
    font-size: 2.5rem;
    font-weight: 200;
    color: #0FA0F3;
    margin: 0;
}

/* ================= GRID PRODUTOS ================= */
.items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
}

/* ================= CARD ================= */
.item {
  
  
    position: relative;
    transition: 0.3s;

    padding: 10px;
}
.cont{
    padding: 5px;
  background: #fff;
  width: 91%;
  justify-content: center;
   align-items: center;
   margin-left: 12px;
  
}

.item:hover {
    transform: translateY(-5px);
}

/* ================= IMAGEM ================= */
.produto-img {
    width: 100%;
    height: 230px;
    object-fit: contain;
    margin-bottom: 10px;
}

/* ================= ÍCONES ================= */
.icons {
    position: absolute;
    top: 25px;
    right: 26px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    
}

.icons img {
    width: 28px;
    background: #1e3a8a;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
}

/* ================= TEXTO ================= */
.item h2 {
    font-size: 0.9rem;
    text-align: center;
    font-weight: 400;
    color: #888;
}

.item h2 p {
    font-size: 0.45rem;
    color: #888;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
    
}

/* ================= BOTÃO ================= */
.item a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 4px 12px;
    text-decoration: none;
    color: #092170;
    border-radius: 6px;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
     position: absolute;
    top: 318px;
    right: 35px;
    background-color: #Fff;
}

.item a img {
    width: 20px;
    height: 20px;
    background: #092170;
    border-radius: 50%;
    padding: 2px;
}

/* ================= BOTÃO FINAL ================= */
.pro {
    text-align: left;
    margin: 30px 0 0 20px;
    
}

.pro a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DBEAFE;
    color: #0d3dda;
    padding: 8px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    
}

.pro a img {
    width: 31px;
     background: #fff;
    border-radius: 50%;
    padding: 10px;
}

.enc {
   
    align-items: flex-start; /* alinha tudo à esquerda */
    gap: 30px;
    max-width: 900px; /* controla o tamanho do texto */
    margin: 190px 0 190px 50px;

}

/* imagem */
.enc img {
    width: 150px;
    height: auto;
}

/* texto */
.enc h2 {
    font-size: 1.3rem;
    font-weight: 500;
    color: #1d315a; /* azul */
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    position: relative;
    padding-bottom: 6px;
}

/* linha por baixo do texto */
.enc h2::after {
    content: "";
    display: block;
    width: 420px; /* borda curta */
    height: 1px;
    background: #888;
    margin-top: 6px;
}