﻿<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tijolo Inteligente</title>

  <style>
    /* Reset básico */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      font-size: clamp(14px, 1.2rem, 18px);
      line-height: 1.5;
      background: #f0f8ff;
    }

    /* Header */
 /* Header */
header {
  background: #b22222;
  color: white;
  padding: 10px;
   border-radius: 12px;
}

.header-conteudo {
  display: flex;              /* coloca lado a lado */
  align-items: center;        /* alinha verticalmente */
  justify-content: center;    /* centraliza no espaço */
  gap: 20px;                  /* espaço entre imagem e texto */
  max-width: 1200px;
  margin: 0 auto;
}

header img {
  width: 100px;
  border-radius: 15px;
  border: 5px solid #8B4513;
}

header h1 {
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: center;           /* texto alinhado à esquerda */
}


   

    /* Seções */
    section {
      width: 100%;
      padding: 30px 20px;
    }

    /* Container de vídeos */
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    video {
      width: 280px;
      height: 160px;
      border-radius: 12px;
      transition: transform 0.3s ease;
    }

    video:hover {
      transform: scale(1.03);
    }

    /* Benefícios */
    .benefits {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
      padding: 20px;
      background: #f5f5f5;
    }

    .benefit {
      flex: 1 1 250px;
      max-width: 300px;
      background-color: #fff8f0;
      border: 2px solid #8B4513;
      border-radius: 10px;
      padding: 15px 20px;
      font-size: 1rem;
      color: #5a3e2b;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-align: center;
    }

    .benefit:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 12px rgba(0,0,0,0.2);
      background-color: #fff0e0;
    }

    /* Botões WhatsApp */
    .botoes {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
    }

    .botao-whatsapp {
      flex: 1 1 280px;
      max-width: 350px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background-color: #25D366;
      color: white;
      font-weight: bold;
      text-decoration: none;
      padding: 15px 25px;
      border-radius: 8px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      text-align: center;
    }

    .botao-whatsapp:hover {
      transform: scale(1.05);
      background-color: #1ebe5d;
    }

    .icone-whatsapp {
      width: 24px;
      height: 24px;
    }

    /* Link especial do rodapé */
    a.elemento {
  color: white;                /* texto branco */
  padding: 25px 20px;
  border-radius: 12px;
  text-decoration: none;       /* remove sublinhado */
  transition: background-color 0.3s ease, color 0.3s ease;
}

a.elemento:hover {
  background-color: #2ecc71;   /* fundo verde no hover */
  color: white;                /* mantém branco no hover */
}


    /* Rodapé */
    footer {
      background: blue;
      color: white;
      padding: 25px;
      text-align: center;
	   border-radius: 12px;
    }

    footer img {
      width: 100px;
      border-radius: 8px;
      border: 3px solid #8B4513;
      margin-right: 10px;
      vertical-align: middle;
    }
	
	
	.botao {
  display: inline-block;
  padding: 12px 24px;
  margin: 10px;
 color: white;
  background-color: #007BFF; /* azul */
 
  text-decoration: none;
  border-radius: 16px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.botao:hover {
  background-color: red; /* azul mais escuro ao passar o mouse */
}

  </style>