body {
      height: 100vh;
      background-color: #f0d4ad;
      /* background-image: url("static/img/cabana_volta_som.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; */
    }

    /* Distribució esquerra‑dreta */
    .main-wrapper {
      display: flex;
      height: 100vh;
    }

    .left-panel {
      flex: 1;
      position: relative;
    }

    .right-panel {
      flex: 1;
      /* 95 % blanc, 5 % gris clar */
      background-color: #f3f3f3;
      color: #0d0d0d;              /* 95 % negre, 5 % blanc */
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin: 7% 10% 10% -10%;          /* fa el requadre més petit – deixa veure el fons */
      padding: 20px;
      padding-top: 40px;
      text-align: center;
      font-family: "Abril Fatface", sans-serif;
      box-shadow: 0 5px 10px rgba(236, 236, 236, 0.5); /* ombra exterior */
      animation: zoomInBox 0.6s ease-out both;
      transform-origin: center;
      flex-direction: column;
      position: relative;
    }

    .right-panel h1 {
      padding:3% 10% 10% 10%;
      font-size: 1.4rem;    
      line-height: 1.2;
    }
    .challenge-title {
      /* background-color: #383636; */
      color: #e7c493;
      font-family: "Abril Fatface", sans-serif;
      font-size: 3.5rem;
      padding: 0 40px 0px 40px;
      margin-bottom: 0px;
      text-align: center;
      animation: fadeInLabel 3s ease-out forwards;
      /* opacity: 0.2; */
    }

    /* Botó del widget */
.vapi-btn {
  position: absolute !important;   /* ara RELATIU a .right-panel */
  left: 47% !important;            /* centrat horitzontalment */
  bottom: 22% !important;        /* espai sota el text */
  width: 80px !important;
  height: 80px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2000 !important;
  opacity: 0;                 /* amaga'l fins que el reubiquem */
  background-color: transparent; /* evita requadre blanc */
  border: none;                  /* elimina contorn nadiu */
}

/* Quan la trucada és activa: sense ombra ni fons */
.vapi-btn[data-state="active"] {
  background-color: transparent !important;
  box-shadow: none !important;
}

    /* Logo dins del botó */
    .vapi-btn img {
      width: 100px !important;
      height: 100px !important;
      object-fit: cover;
    }

    /* Cercle pampallugant quan la trucada és en marxa (dins del botó) */
    .speaking-star {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(35deg);
  background-color: #ab4f0d;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: starBlink 3s linear infinite;
  box-shadow: 0 0 50px 10px #ad4646; /* halo difuminat */
}

@keyframes starBlink {  
  50% { opacity: 0; }
}

    /* Etiqueta sota el botó */
    .vapi-btn::after {
      /* content: "POSA'M A PROVA"; */
      position: absolute;
      top: calc(100% + 2.5rem);
      left: 50%;
      transform: translateX(-50%);
      font-size: 1.9em;
      font-weight: bold;
      font-family: Abril Fatface, sans-serif;
      color: rgb(234, 153, 2);
      white-space: nowrap;
      background-color: #f0d4ad;
      padding:0.5em 0.7em 0.5em 0.7em;
    }
    /* Text dinàmic segons l'estat del botó (idle / active) */
    .vapi-btn[data-state="idle"]::after {
      content: "SOM-HI";
    }
    .vapi-btn[data-state="active"]::after {
      content: "Finalitzar Trucada";
    }

/* Elimina el contorn blau de focus del botó Vapi */
.vapi-btn:focus,
.vapi-btn:focus-visible {
  outline: none;
}

/* Si també voleu treure'l quan el botó està actiu (mentre es fa clic) */
.vapi-btn:active {
  outline: none;
}


    /* Text “HAIDINI” entre el vídeo i el botó */
    .haidini-label {
      background-color: #fff;
      opacity: 0;
      animation: fadeInLabel 7s ease-out forwards;
      padding: 0.5em 0.5em;
      position: fixed;
      left: 25%;
      top: 55%;
      transform: translate(-52%, -50%);
      font-family: "Abril Fatface", sans-serif;
      color: #000;
      font-size: 1.5rem;
      letter-spacing: 0.08em;
      line-height: 1;
      z-index: 1500;
    }
    /* Animació de zoom suau només per al requadre dret */
    @keyframes zoomInBox {
      0%   { transform: scale(0.95); opacity: 0; }
      100% { transform: scale(1);    opacity: 1; }
    }

    /* Animació de fade‑in per a la capsa “HAIDINI” */
    @keyframes fadeInLabel {
      from { opacity: 0; }
      to   { opacity: 0.8; }
    }


    /*  ---------- Responsivitat per a pantalles petites ---------- */
    @media (max-width: 768px) {
      /* Col·loca les dues columnes una sota l'altra */
      .main-wrapper {
        flex-direction: column;
      }

      /* Panels ocupen tota l'amplada */
      .left-panel,
      .right-panel {
        flex: none;
        width: 100%;
        margin: 0;          /* elimina marges laterals/negatius */
        padding: 20px;
      }

      /* Centra el contingut de la dreta quan passa a sota */
      .right-panel {
        align-items: center;
        justify-content: center;
        padding-bottom: 10vh;          /* alçada extra a la part inferior */
      }

      /* Botó: es torna 'relative' i queda centrat sota el text */
      .vapi-btn {
        position: relative !important;
        left: 50% !important;
        bottom: auto !important;
        margin-top: 20px !important;
        transform: translate(-50%, 0) !important;
      }

      /* Etiqueta sota el botó: adapta separació */
      .vapi-btn::after {
        margin-top: 3em !important; 
        top: calc(100% + 1rem);
      }

      /* Vídeo: que participi en el flux i doni alçada al panell esquerre */
      #videoElement {
        position: relative !important;
        display: block !important;
        width: 40% !important;
        max-width: 300px;
        margin: 5% auto 20px auto; /* centrat i amb espai inferior */
        left: auto !important;
        top: auto !important;
        transform: none !important;
      }

      /* Columna esquerra: centrem contingut i li donem alçada natural */
      .left-panel {
        display: flex;
        flex-direction: column;
        align-items: center;    
      }

      /* Etiqueta “HAIDINI” també dins del flux perquè estiri el panell */
      .haidini-label {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin-top: 10px;
        font-size: 1.1em !important;
      }

      /* Assegura que la wrapper tingui alçada natural i la dreta quedi per sota */
      .main-wrapper {
        height: auto;
      }

      /* El requadre dret ocupa tota l'amplada (sense espais laterals) */
      .right-panel {
        width: 100vw !important;      /* força 100 % de l'ample de la finestra */
        max-width: 100vw !important;
        margin: 20px 0 0 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      /* Peu de pàgina: deixa de ser fixed i va al final del flux */
      .footer {
        position: static;
        margin: 10% 15% 0 5%; 
      }

      /* Reduce heading sizes by 50% */
      .challenge-title {
        font-size: 1.8rem;
      }
      .right-panel h1 {
        font-size: 1rem;
      }

      /* Shrink the button and centre it with extra bottom margin */
      .vapi-btn {
        position: relative !important;
        left: 0 !important;
        bottom: auto !important;
        transform: translate(0, 0) !important;

        width: 50px !important; 
        height: 50px !important;
        margin: 10px auto 40px auto !important;  /* espai blanc amb el footer */
      }

      /* Shrink the button label and its separation */
      .vapi-btn::after {
        font-size: 1rem;
        top: calc(100% + 0.3rem);
      }

      /* Redueix la mida dels logos i dels enllaços un 40 % en mòbil */
      #logo-badass,
      #logo-top10,
      #logo-fetama {
        width: 10% !important; 
      }

      #link-contacte {
        font-size: 0.8em;
      }

      /* Amaga l'enllaç de privacitat en mòbil */
      #link-privacitat {
        font-size: 0.8em;
        /* display: none; */
      }

  /* Ajusta la mida de la icona de telèfon perquè no quedi retallada */
  .vapi-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }

  /* Fes l’estrella un 50 % més gran en mòbil */
  .speaking-star {
    width: 45% !important; 
    height: 45% !important;
  }
    }

/* Elimina animacions i transicions del botó Vapi */
.vapi-btn {
  animation: none !important;
  transition: none !important;
}
.vapi-btn.vapi-pulse {
  animation: none !important;
  transition: none !important;
}