/* 
Theme Name: EstudiQ Theme
Theme URI: https://github.com/elementor/hello-theme-child/
Description: EstudiQ Theme is a child theme of Hello Elementor, modified by EstudiQ team
Author: EstudiQ Team
Author URI: https://estudiq.com/
Template: hello-elementor
Text Domain: hello-elementor-child
*/

/* Add your custom styles here */

/*---------------------------------------------- */
/*-------Fixar Header--------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: transparent;
}

.logo-header svg {
  width: 133px;   /* mida per defecte (escriptori) */
  height: auto;   /* manté proporció del viewBox */
}

@media (max-width: 768px) {
  .logo-header svg {
    width: 100px; /* tablets */
  }
}

@media (max-width: 600px) {
  .logo-header svg {
    width: 80px;  /* mòbils petits */
	  margin-left: 5px;
  }
}

.logo-header svg path {
	fill: #ff8a45;
	transition: fill 0.2 ease;
}

.logo-header.transparent svg path {
  fill: transparent;
}

.logo-header.blanc svg path {
  fill: #f8f8f8;
}

  body.pagina-questions .jet-mobile-menu__toggle-icon svg path {
  fill: #ff8a45 !important;
}
  body.pagina-contacto .jet-mobile-menu__toggle-icon svg path {
  fill: #ff8a45 !important;
}
  body.pagina-saborizate .jet-mobile-menu__toggle-icon svg path {
  fill: #ff8a45 !important;
}
  body.pagina-home .jet-mobile-menu__toggle-icon svg path {
  fill: #ff8a45 !important;
}
  body.pagina-cursos .jet-mobile-menu__toggle-icon svg path {
  fill: #ffffff !important;
}
  body.pagina-workshops .jet-mobile-menu__toggle-icon svg path {
  fill: #ffffff !important;
}
  body.pagina-news .jet-mobile-menu__toggle-icon svg path {
  fill: #ff8a45 !important;
}
  body.pagina-legal .jet-mobile-menu__toggle-icon svg path {
  fill: #ff8a45 !important;
}
  body.pagina-privacidad .jet-mobile-menu__toggle-icon svg path {
  fill: #ff8a45 !important;
}
  body.pagina-cookies .jet-mobile-menu__toggle-icon svg path {
  fill: #ff8a45 !important;
}
  body.pagina-accesibilidad .jet-mobile-menu__toggle-icon svg path {
  fill: #ff8a45 !important;
}

/*---------------------------------------------- */
/*---------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

.textTitol h2 {
  font-size: clamp(60px, 8vw, 115px) !important;
  line-height: 1 !important;
  white-space: normal !important;
  max-height: 100%;
}

button.btn-titol,
a.btn-titol,
.btn-titol span {
  font-size: clamp(60px, 8vw, 115px) !important;
  line-height: 1 !important;
  white-space: normal !important;
  max-height: 100% !important;
}
/*---------------------------------------------- */
/*---------------------------------------------- */

/*---------------------------------------------- */
/*------Scrollbar personalitzat----------------- */
.jet-popup {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0,0,0,0.25) transparent; /* polze translúcid sobre fons transparent */
}

.jet-popup::-webkit-scrollbar {
  width: 8px; /* amplada de la barra */
}

.jet-popup::-webkit-scrollbar-track {
  background: transparent; /* fons transparent */
}

.jet-popup::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.25); /* polze gris translúcid */
  border-radius: 4px; /* cantonades arrodonides */
  border: 2px solid transparent; /* espai al voltant perquè es vegi més fi */
  background-clip: content-box; 
}
/*---------------------------------------------- */
/*---------------------------------------------- */

/*---------------------------------------------- */
/*-------Formulari------------------------------ */
/* Estils personalitzats per als inputs del formulari JetFormBuilder */

.jet-form-builder__field:focus {
  outline: none !important;
  border: 1px solid #87a3be !important;
  background-color: #ffffff !important;
}

.jet-form-builder__field {
  border: none !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

.jet-form__field {
  border: none !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

.jet-form__field:focus {
  outline: none !important;
  border: 1px solid #87a3be !important;
  background-color: #ffffff !important;
}

.jet-form__field-label a {
  color: #144A7D;
  font-weight: 600;
  font-style: italic;
  text-decoration: none;
}

.jet-form__field-label a:hover {
  color: #144A7D;
  font-weight: 600;
  font-style: italic;
  text-decoration: none;
}

.jet-form__field-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
  cursor: pointer;
}

/*---------------------------------------------- */
/*---------------------------------------------- */

/*---------------------------------------------- */
/*-------Banner Home Sabores-------------------- */
/* Container*/
.home-banner-container {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  transition: height 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}
.home-banner-container.scrolled {
  height: 50vh; /* Es redueix a 50vh */
}

/*-------Titol H2 */
/* Estat inicial */
.home-banner-container h2 {
  max-width: 100%;
  margin: 20px auto 0 auto; /* Afegeix un marge de 20px a dalt */
  text-align: left;
  font-size: clamp(60px, 8vw, 115px) !important;
  line-height: 1 !important;
  white-space: normal !important;
  display: block;
  transition: line-height 1s ease-out, letter-spacing 1s ease-out,
    transform 1.5s ease-out, opacity 0.5s ease-in, margin 1.5s ease-out;
}

/* Quan el banner es redueix */
.home-banner-container.scrolled h2 {
  line-height: 0.1 !important;
  letter-spacing: -2px;
  transform: translateY(300px);
  opacity: 0; /* Es torna transparent */
  margin-top: 0; /* Elimina el marge durant la transició */
}

/*-------Imatge */
/* Estat inicial */
.home-banner-container img {
  width: clamp(280px, 50%, 500px);
  transition: transform 1.5s ease-out;
}

/* Quan el banner es redueix */
.home-banner-container.scrolled img {
  transform: translateY(15vh); /* Es desplaça un 15% de l'altura del viewport */
}

/*---------------------------------------------- */
/*---------------------------------------------- */

/*---------------------------------------------- */
/*-------Banner Home-Universo------------------- */

.universo-text h6 {
  font-size: clamp(65px, 8vw, 115px) !important;
  line-height: 1 !important;
  white-space: normal !important;
  max-height: 100%;
}

.universo-text {
  position: sticky !important;
  top: 90px;
  background-color: transparent;
}

.universo-image {
  position: relative;
  width: 100%;
  height: auto;
}

.universo-foto {
  /*width: 100%;
  height: auto;
  display: block;*/
}

.text2-universo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  color: white;
  -webkit-mask-image: url('https://nanita.cuartocuarta.com/wp-content/uploads/2025/05/img_universo_mask.png');
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-image: url('https://nanita.cuartocuarta.com/wp-content/uploads/2025/05/img_universo_mask.png');
  mask-size: cover;
  mask-repeat: no-repeat;
}

/*---------------------------------------------- */
/*---------------------------------------------- */

/*---------------------------------------------- */
/*-------Degradat superior general 150px-------- */
/*
.mask-content {
  position: relative;
  mask-image: linear-gradient(transparent 0px, transparent 95px, black 150px);
  -webkit-mask-image: linear-gradient(
    transparent 0px,
    transparent 95px,
    black 150px
  );
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% calc(100% + 150px);
  -webkit-mask-size: 100% calc(100% + 150px);
}
*/
/*-------Sense degradat, tall sec */
.mask-content {
  position: relative;
  mask-image: linear-gradient(transparent 0px, transparent 75px, black 75px);
  -webkit-mask-image: linear-gradient(transparent 0px, transparent 75px, black 75px);
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% calc(100% + 150px);
  -webkit-mask-size: 100% calc(100% + 150px);
}
/*---------------------------------------------- */
/*---------------------------------------------- */

/*---------------------------------------------- */
/*-------Amplada contenidor FAQS---------------- */
.faqs-container {
  max-width: 750px;
  margin-left: 15px;
  margin-right: 30px;
  width: calc(100% - 45px); /* assegura que el contenidor no desbordi */
}
/*---------------------------------------------- */
/*---------------------------------------------- */

/*---------------------------------------------- */
/*-------Banner Cursos---------------------------*/
.banner-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}

.banner-cursos {
  background: white;
  pointer-events: auto;
  padding-bottom: 60px;
  transition: padding 0.6s ease;
}

.banner-cursos.shrink {
  padding-bottom: 10px;
}

.titol-secundari {
  overflow: hidden;
  max-height: 500px;
  opacity: 1;
  transition: max-height 0.6s ease, opacity 0.6s ease;
}

.banner-cursos.shrink .titol-secundari {
  max-height: 0;
  opacity: 0;
}

.espai-reserva {
  height: auto;
  transition: height 0.6s ease;
}

.banner-cursos.shrink + .cont-content-cursos .espai-reserva {
  height: 10px;
}

.cont-content-cursos {
  overflow: visible;
}

/*---------------------------------------------- */
/*---------------------------------------------- */

/*---------------------------------------------- */
/*-------Degradat per als cursos---------------- */

.mask-content-cursos.mask-inactive {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.mask-content-cursos {
  position: relative;
  mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    transparent 25px,
    rgba(0, 0, 0, 0.6) 40px,
    black 50px
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    transparent 25px,
    rgba(0, 0, 0, 0.6) 40px,
    black 50px
  );
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% calc(100% + 50px);
  -webkit-mask-size: 100% calc(100% + 50px);
}

/*---------------------------------------------- */
/*---------------------------------------------- */

/*---------------------------------------------- */
/*-------Icones socials------------------------- */

.elementor-icon:hover {
  transform: none !important;
  transition: none !important;
}

.icones-footer .elementor-icon {
  transition: transform 0.3s ease;
}

.icones-footer .elementor-icon:hover {
  transform: scale(1.1);
}



/*---------------------------------------------- */
/*---------------------------------------------- */

/*---------------------------------------------- */
/*-------Estils Dashboard----------------------- */

.dashboard-bienvenida {
  width: 100%;
  height: 70vh;
  background-color: green; /* verd més suau */
  color: white;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

/*---------------------------------------------- */
/*---------------------------------------------- */


/*---------------------------------------------- */
/*-------Marge formulari ----------------------- */
#contact-form {
  scroll-margin-top: 75px; /* resta 75px a l'ancoratge */
}
/*---------------------------------------------- */
/*---------------------------------------------- */



/* ── Contenidor CTA ───────────────────────────── */

.cta-ring {
  position: relative;
  width: auto;          /* s’adapta a l’alçada */
  height: 100%;         /* ocupa el 100% del contenidor */
  aspect-ratio: 1/1;    /* manté forma quadrada */
  display: grid;
  place-items: center;
}

/* Traiem marges/espais per defecte dels widgets Icona */
.cta-ring .elementor-widget-icon{ 
  margin: 0 !important;
}
.cta-ring .elementor-icon-wrapper{ 
  line-height: 0; 
}

/* ── Capes apilades ───────────────────────────── */
.cta-ring .elementor-widget-icon.is-ring,
.cta-ring .elementor-widget-icon.is-label{
  position: absolute;
  inset: 0;                       /* ocupa tot el contenidor */
  display: grid;
  place-items: center;            /* centra el contingut */
}

/* Anell: ocupa tot i rota */
.cta-ring .is-ring svg{
  width: 100%;
  height: 100%;
  transform-box: fill-box;        /* Safari */
  transform-origin: 50% 50%;
  animation: cta-spin 6s linear infinite;
  transition: transform 0.3s ease; /* per al "zoom" suau */
}

/* Text/traçat: més petit i per sobre de l’anell */
.cta-ring .is-label{ z-index: 2; }
.cta-ring .is-label svg{
  width: 100%;                     /* ajusta al teu gust (50–75%) */
  height: auto;
  pointer-events: none;           /* deixa passar el clic al contenidor */
}

/* Animació de rotació */
@keyframes cta-spin { to { transform: rotate(360deg); } }

/* Respecte preferència d’usuari */
@media (prefers-reduced-motion: reduce){
  .cta-ring .is-ring svg{ animation: none; }
}

/* Contenidor: efecte de creixement al hover */
.cta-ring {
  transition: transform 0.3s ease;
}
.cta-ring:hover {
  transform: scale(1.08); /* creix una mica */
}

/* Quan fem hover, el cercle roda més ràpid */
.cta-ring:hover .is-ring svg {
  animation-duration: 3s; /* la meitat de temps = el doble de ràpid */
}




/* ------Banner Cookies ------*/
#privacy_overview .tab-title {
  color: #400101 !important; /* exemple verd fosc */
}
#strict-necessary-cookies .tab-title {
  color: #400101 !important; /* exemple verd fosc */
}
#cookie_policy_modal .tab-title {
  color: #400101 !important; /* exemple verd fosc */
}