/* ----------------------- */
  
        h1, h2, h3 {
            color: var(--cor-titulo);
            text-align: center;

        }

        a {
            text-decoration: none;
            color: var(--cor-principal);
        }

        .container-adrenalina {
            width: 90%;
            max-width: 90%;
            margin: 0 auto;
            padding: 20px 0;
            margin-bottom: 50px;

        }

        .info-button {font-size: 1.5em;}
        /* ----------------------- */
        /* 1. Seção Superior (Hero) */
        /* ----------------------- */
        .hero {
            background-color: var(--cor-fundo-claro);
            color: var(--cor-texto);
            padding: 80px 0;
            text-align: center;
            border-bottom: 5px solid var(--cor-principal);
            background-image: url(images/bg-head.png); width: 100%; height: *;
        }

        .hero h1 {
            font-size: 2.5em;
            margin-bottom: 15px;
            color: var(--cor-principal); /* Azul em destaque */
        }

        .hero p {
            font-size: 1.2em;
            max-width: 800px;
            margin: 0 auto;
        }

        

        /* ----------------------- */
        /* 2. Situações de Uso */
        /* ----------------------- */
        .situacoes {
            display: inline-table;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 300px 0;
            background-color: #244377; 
            height: 100vh; /* ocupa toda a altura da tela */
            width: 100%;
        }


        .situacoes h2{font-size: 3.3em; color: #ffffff}

        .situacoes-grid {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 40px;
            text-align: center;
            font-size: 1.3em;
        }

        .situacao-item {
            flex: 1 1 250px;
            padding: 15px;
            border-radius: 8px;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .situacao-ilustracao {
            /* Placeholder para a imagem ilustrativa */
            background-color: #c3e6cb;
            border-radius: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-style: italic;
            color: #6c757d;
            width: 100%;
        }

        .alerta-texto {

            color: #ffc107; /* laranja de alerta */
            font-size: 1.3em;
            margin-top: 20px;
        }


        /* ----------------------- */
        /* 3. Passo a Passo de Aplicação */
        /* ----------------------- */


        .passo-a-passo {
            padding: 300px 0;
            height: 100vh; /* ocupa toda a altura da tela */
            width: 100%;
            background-color: white;
        }

        .passo-a-passo{ 
              display: inline-table;
              justify-content: center;
              align-items: center;
              text-align: center;
        }
        .passo-a-passo h2{font-size: 3.3em; color: #244377}


        .passos-grid {
            display: flex;
            justify-content: space-around;
            gap: 30px;
            flex-wrap: wrap;
            margin-top: 40px;
        }

        .passo-bloco {
            background-color: #f1f1f1; /* Fundo suave para o bloco */
            border-radius: 10px;
            padding: 20px;
            flex: 1 1 200px; /* Flexibilidade e tamanho mínimo */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            text-align: center;
            font-size: 1.3em;
        }

        .passo-numero {
            font-size: 2em;
            font-weight: bold;
            color: var(--cor-principal);
            margin-bottom: 10px;
            background-color: white;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            line-height: 50px;
            margin: 0 auto 15px;
            border: 3px solid var(--cor-principal);
            background-color: #254377;
            color: #fff;
        }

        .passo-ilustracao {
            /* Placeholder para a imagem lúdica */
            /*height: 100px;*/
            background-color: #d1e7ff;
            border-radius: 5px;
            margin-bottom: 15px;
           /* display: flex;*/
            align-items: center;
            justify-content: center;
            font-style: italic;
            color: #6c757d;
        }


        /* ==== BOX VÍDEO FULL ==== */
        .video-caneta-full {
          background-color: #244377;
          height: 100vh; /* ocupa 100% da altura do navegador */
          display: grid;
          align-items: center;
          justify-content: center;
          padding: 40px 20px;
          box-sizing: border-box;
        }

        .container-video-full {
          max-width: 1280px;
          width: 100%;
          text-align: center;
        }

        .video-caneta-full h2 {
          font-size: 3.3em;
          color: #ffffff;
          font-weight: 700;
          margin-bottom: 15px;
        }

        .video-caneta-full .descricao-video {
          font-size: 1.8em;
          color: #b2cbf4;
          margin-bottom: 40px;
        }

        .video-caneta-full .box-video {
          position: relative;
          width: 100%;
          max-width: 1024px;
          margin: 0 auto;
          padding-bottom: 45.25%; /* proporção 16:9 */
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
        }

        .video-caneta-full video {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border: none;
          border-radius: 12px;
        }


        .video-wrapper {
          position: relative;
          padding-bottom: 56.25%; /* proporção 16:9 */
          height: 0;
          overflow: hidden;
          /*border-bottom: 3px solid #004aad;*/
        }

        .video-wrapper iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: none;
        }


        /* ----------------------- */
        /* 5. Destaque header */
        /* ----------------------- */




    .highlight-box {
      position: relative;
      width: 100%;
      height: 100vh; /* ocupa toda a altura da tela */
      overflow: hidden;
    }

    .highlight-box img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .highlight-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 20px;
      color: #fff;
    }

    .highlight-title {
      font-size: 3.3rem;
      font-weight: bold;
      margin-bottom: 16px;
    }

    .highlight-desc {
      font-size: 1.5rem;
      max-width: 1280px;
      margin-bottom: 30px;
    }

    .highlight-btn {
      background: #ff9800;
      color: #fff;
      padding: 20px 30px;
      border: none;
      border-radius: 100px;
      font-size: 1.5rem;
      font-weight: bold;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .highlight-btn:hover {
      background: #e68900;
    }


         /*---------------------------------------
            FAQ ADRENALINA              
        -----------------------------------------*/ 

        .faq-adrenalina{

            display: inline-table;
            justify-content: center;
            align-items: center;
        }

        .faq-adrenalina-container {
            max-width: 100%;
            margin: auto;
            background: #244377;
            padding: 120px;
            text-align: left;
        }
        .faq-adrenalina-title {
            text-align: center;
            margin-bottom: 20px;
            font-weight: bold;
            color: #ffffff;
        }
        .faq-adrenalina-title h2{
            font-size: 3.3rem;
            margin-bottom: 50px;
        }

        .faq-adrenalina-item {

            padding: 30px 0;
            font-size: 1.5em;
            border-bottom: 1px solid #4a6a9f;
            color: #ffffff;
            font-weight: 200;
        }
        .faq-adrenalina-question {
            cursor: pointer;
            font-weight: bold;
            color: #333;
            transition: 0.3s;
            color: #b2cbf4;
        }
        .faq-adrenalina-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out;
        }  

       


        /* ==== Tipos de Caneta Section ==== */
        .tipos-caneta {
            padding: 300px 0;
            height: 100vh; /* ocupa toda a altura da tela */
            width: 100%;
            background-color: #f1f1f1;
            display: inline-table;
            justify-content: center;
            align-items: center;
            text-align: center;
            /*margin-bottom: 50px;*/
        }

        .tipos-caneta h2{
          font-size: 3.3em;
          color: #244377;
          margin-bottom: 80px;
          font-weight: 700;
        }

        .tipos-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 30px;
          max-width: 1600px;
          margin: 0 auto;
        }

        .tipo-item {
          background: #fff;
          border-radius: 12px;
          box-shadow: 0 4px 10px rgba(0,0,0,0.08);
          overflow: hidden;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .tipo-item:hover {
          transform: translateY(-5px);
          box-shadow: 0 6px 16px rgba(0,0,0,0.12);
        }

        .tipo-item video {
          width: 100%;
          height: auto;
          display: block;
          border-bottom: 3px solid #004aad;
        }

        .tipo-item h3 {
          font-size: 1.3em;
          color: #244377;
          margin: 15px 0 10px;
        }

        .tipo-item p {
          font-size: 1em;
          color: #333;
          padding: 0 15px 20px;
        }

      
    @media (max-width: 720px) {

      .highlight-title {font-size: 2rem;}
      .highlight-desc {font-size: 1rem;}
      .passo-a-passo {padding: 100px 0;}
      .passo-a-passo h2 {font-size: 2.0em;}       
      .situacoes {padding: 100px 0;}
      .situacoes h2 {font-size: 2.0em;}
      .video-explicativo h2{font-size: 2.0em; }
      .faq-adrenalina-container {padding: 50px;margin-top: 90px; }
      .faq-adrenalina-title h2 { font-size: 2.0rem; margin-top: 60px}
      .faq-adrenalina-item { padding: 15px 0;font-size: 1.1em;}
      .faq-adrenalina-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; } 
      .video-caneta-full { height: auto; padding: 60px 20px; }
      .video-caneta-full h2 { font-size: 2em; }
      .video-caneta-full .descricao-video { font-size: 1.3em; }
      .video-caneta-full .box-video { padding-bottom: 56.25%; /* proporção 16:9 */ }
      .tipos-caneta { padding: 100px 0; display: contents;}
      .tipos-caneta h2 {font-size: 2.0em;margin-bottom: 40PX; margin-top: 60PX}
      .tipos-title {font-size: 2.0em;}
      .tipo-item video { height: auto;}
  
    }