/* 
           SISTEMA DE ESCALA PROPORCIONAL 1920px
           Garante que o design seja IDÊNTICO em qualquer proporção (TV, Notebook, Monitores)
        */
      #block-historia{
        --base-width: 1920;
        --navy: #253064;
        --gold: #d89a14;
        --white: #ffffff;
        --black: #000000;
        --gray-text: #333333;
      }

      @font-face{
        font-family: "Lemon Milk";
        src: url("/fontes/lemonmilk-bold.woff2")
          format("woff2");
        font-weight: 700;
        font-display: swap;
      }
      @font-face{
        font-family: "Ekster";
        src: url("/fontes/ekster-regular.woff2")
          format("woff2");
        font-weight: 400;
        font-display: swap;
      }
      @font-face{
        font-family: "Ekster";
        src: url("/fontes/ekster-medium.woff2")
          format("woff2");
        font-weight: 500;
        font-display: swap;
      }
      @font-face{
        font-family: "Ekster";
        src: url("/fontes/ekster-bold.woff2")
          format("woff2");
        font-weight: 700;
        font-display: swap;
      }

      #block-historia, #block-historia *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      #block-historia,
#block-historia{
        margin: 0;
        padding: 0;
        background: var(--white);
        font-family: "Ekster", sans-serif;
      }

      #block-historia .section-wrapper{
        width: 100%;
        height: 85vh;
        position: relative;
        overflow: hidden;
      }

      /* REVEAL APENAS BLUR (SEM MOVIMENTO) */
      #block-historia .reveal-item{
        opacity: 0;
        filter: blur(12px);
        transition:
          opacity 0.32s cubic-bezier(0.23, 1, 0.32, 1),
          filter 0.32s ease;
        will-change: opacity, filter;
        transition-delay: var(--reveal-delay, 0s);
      }

      #block-historia .reveal-item.is-visible{
        opacity: 1;
        filter: blur(0);
      }

      #block-historia #scaling-container{
        width: 1920px;
        height: 1080px;
        position: absolute;
        top: 55%;
        left: 50%;
        transform-origin: center center;
        background: var(--white);
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      }

      #block-historia .section-history{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 140px;
        gap: 120px; /* Espaçamento premium mas funcional */
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      }

      #block-historia .content-left{
        width: 660px; /* Largura fixa calculada para não estourar os 1920px */
        flex: none;
        position: relative;
        z-index: 10;
        overflow: visible; /* Remover o hidden aqui pois a largura já é fixa e segura */
        transition:
          opacity 0.6s ease,
          transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
          width 0.8s cubic-bezier(0.23, 1, 0.32, 1),
          margin 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      }

      #block-historia .inner-left{
        width: 660px; /* Match com o pai */
        flex-shrink: 0;
      }

      #block-historia .tag-history{
        font-size: 18px;
        font-weight: 700;
        color: var(--gold);
        text-transform: uppercase;
        letter-spacing: 2.5px;
        margin-bottom: 5px; /* Proximidade máxima */
        display: block;
      }

      #block-historia .title-history{
        font-family: "Lemon Milk", sans-serif;
        font-size: 34px;
        line-height: 1.1;
        color: var(--navy);
        text-transform: uppercase;
        margin-bottom: 35px; /* Ajustado para 34px */
        letter-spacing: 0.5px;
        display: block;
      }

      #block-historia .text-history{
        font-size: 18px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--black);
      }

      #block-historia .text-history p{
        margin-bottom: 25px;
      }

      /* LADO DIREITO: VÍDEO */
      #block-historia .content-right{
        width: 860px; /* Ajustado para somar 1920 com padding e gaps */
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        position: relative;
        z-index: 20;
      }

      #block-historia .video-container{
        width: 860px;
        height: 520px;
        border-radius: 50px;
        overflow: hidden;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
        background: #000;
        position: relative;
        cursor: pointer;
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        z-index: 100;
      }

      /* CONTROLES AGRUPADOS NO LADO DIREITO */
      #block-historia .video-controls-group{
        position: absolute;
        bottom: 30px;
        right: 30px;
        display: flex;
        align-items: center;
        gap: 15px;
        z-index: 150;
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
      }

      #block-historia .video-container:hover .video-controls-group,
#block-historia .video-container.controls-active .video-controls-group{
        opacity: 1;
        pointer-events: all;
      }

      #block-historia .sound-toggle,
#block-historia .fullscreen-btn{
        width: 54px;
        height: 54px;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(12px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        border: 1px solid rgba(255, 255, 255, 0.4);
        cursor: pointer;
      }

      #block-historia .sound-toggle:hover,
#block-historia .fullscreen-btn:hover{
        background: var(--gold);
        transform: scale(1.1);
      }

      #block-historia .sound-toggle svg,
#block-historia .fullscreen-btn svg{
        width: 24px;
        height: 24px;
        fill: white;
        transition: transform 0.3s;
      }

      #block-historia .sound-toggle:active svg,
#block-historia .fullscreen-btn:active svg{
        transform: scale(0.9);
      }

      /* Animação sutil de pulso quando ativo */
      #block-historia .sound-toggle.is-playing svg{
        animation: historia__speakerPulse 1.5s infinite ease-in-out;
      }

      @keyframes historia__speakerPulse{
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.08);
        }
        100% {
          transform: scale(1);
        }
      }

      #block-historia .video-container video{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50px;
      }

      /* Estilos do botão Fullscreen (agora dentro do grupo) */
      #block-historia .fullscreen-btn{
        position: static; /* No longer absolute */
        opacity: 1;
        border: 1px solid rgba(255, 255, 255, 0.4);
      }

      /* Barra de progresso gold — dentro do vídeo */
      #block-historia .video-progress-container{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(8px);
        z-index: 110;
        cursor: pointer;
        transition: height 0.3s ease, opacity 0.5s ease;
        opacity: 0;
      }

      #block-historia .video-container:hover .video-progress-container,
#block-historia .video-container.controls-active .video-progress-container{
        opacity: 1;
      }

      #block-historia .video-progress-container:hover{ height: 14px; }

      #block-historia .video-progress-bar{
        height: 100%;
        width: 0%;
        background: #D89A14;
        box-shadow: 0 0 15px rgba(216,154,20,0.6);
        transition: width 0.1s linear;
      }

      /* Texto de instrução */
      #block-historia .video-instruction{
        font-size: 14px;
        color: #666;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 1;
      }

      /* MODO EXPANDIDO 90% - PRETO SUAVE */
      #block-historia #scaling-container.is-expanded{
        background: rgba(
          0,
          0,
          0,
          0.85
        ) !important; /* Menos escuro, mais suave */
        backdrop-filter: blur(15px);
        z-index: 99999;
        width: 100vw !important;
        height: 100vh !important;
      }

      #block-historia #scaling-container.is-expanded .section-history{
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        background: transparent;
      }

      #block-historia #scaling-container.is-expanded .content-left{
        opacity: 0;
        pointer-events: none;
        width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        transform: translateX(-350px);
        transition:
          transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
          opacity 0.4s ease,
          width 0.8s cubic-bezier(0.23, 1, 0.32, 1),
          margin 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      }

      #block-historia #scaling-container.is-expanded .video-instruction{
        display: none;
      }

      #block-historia #scaling-container.is-expanded .content-right{
        width: 90vw;
        height: 90vh;
        flex: none;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      #block-historia #scaling-container.is-expanded .video-container{
        width: 90vw;
        height: 90vh;
        border-radius: 50px;
        box-shadow: 0 50px 150px rgba(0, 0, 0, 0.9);
        background: #000;
        border: none;
      }

      #block-historia #scaling-container.is-expanded video{
        object-fit: cover;
        border-radius: 50px;
        width: 100%;
        height: 100%;
      }

      /* ── MOBILE ─────────────────────────────────────────── */
      @media (max-width: 768px){
        #block-historia .section-wrapper{
          height: auto;
          min-height: 100svh;
          overflow: visible;
        }

        #block-historia #scaling-container{
          position: relative !important;
          width: 100% !important;
          height: auto !important;
          top: auto !important;
          left: auto !important;
          transform: none !important;
          transition: none !important;
        }

        #block-historia .section-history{
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          padding: 60px 24px 60px;
          gap: 32px;
          height: auto;
          min-height: 100svh;
        }

        /* TEXTO TOPO — CENTRALIZADO */
        #block-historia .content-left{
          width: 100%;
          text-align: center;
          order: 1;
        }

        #block-historia .inner-left{
          width: 100%;
        }

        #block-historia .tag-history{
          font-size: 11px;
          letter-spacing: 2px;
          margin-bottom: 10px;
        }

        #block-historia .title-history{
          font-size: 22px;
          line-height: 1.2;
          margin-bottom: 18px;
        }

        #block-historia .text-history{
          font-size: 14px;
          line-height: 1.65;
          text-align: center;
        }

        #block-historia .text-history p{
          margin-bottom: 14px;
        }

        /* VÍDEO EMBAIXO */
        #block-historia .content-right{
          width: 100%;
          order: 2;
          gap: 10px;
        }

        #block-historia .video-container{
          width: 100%;
          height: 56vw;
          border-radius: 18px;
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        #block-historia .video-container video{
          border-radius: 18px;
        }

        #block-historia .video-instruction{
          font-size: 10px;
          letter-spacing: 0.8px;
          color: #aaa;
        }

        /* Sem fullscreen no mobile */
        #block-historia .fullscreen-btn{
          display: none !important;
        }

        #block-historia .video-controls-group{
          bottom: 12px;
          right: 12px;
        }

        #block-historia .sound-toggle{
          width: 38px;
          height: 38px;
        }

        #block-historia .sound-toggle svg{
          width: 17px;
          height: 17px;
        }
      }