/*

 Theme Name:   GeneratePress Child

 Theme URI:    https://generatepress.com

 Description:  Default GeneratePress child theme

 Author:       Tom Usborne

 Author URI:   https://tomusborne.com

 Template:     generatepress

 Version:      0.1

*/

/* ---------- variable style ---------- */

:root {
  /* fonts */
  --font-body: "BellotaText", sans-serif;

  --bold: bold;
  --normal: normal;
  --light: 300;

  --title-large: 4.5rem;
  --title-medium: 2.5rem;
  --title-small: 1.75rem;

  --body: 1.1rem;

  /* colors */
  --pantone-7506: #f0e9d6;
  --pantone-170: #cb7960;
  --pantone-1788: #be4841;
  --pantone-rubine-red-m: #a3284f;
  --pantone-2415: #72255b;
  --pantone-2767: #262536;
  --c-blanco: #ffffff;

  /* Transitions */
  --all-transition: all 0.4s ease;
}

@media screen and (max-width: 1024px) {
  :root {
    --title-large: 2.5rem;
    --title-medium: 2rem;
    --title-small: 1.25rem;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: var(--normal);
  font-size: var(--body);
}

p {
  font-family: var(--font-body);
  font-weight: var(--normal);
  font-size: var(--body);
}

p > b,
p > strong {
  text-shadow: 0.5px 0.5px 1px var(--pantone-2767);
}

.c-beige b,
.c-beige strong {
  text-shadow: 0.5px 0.5px 1px var(--pantone-7506);
}

.vce > p:last-child {
  margin-bottom: 0 !important;
}

.vce-single-image-inner {
  padding-bottom: 0 !important;
}

.vce-single-image-inner img {
  position: relative !important;
}

.zindex0 {
  position: relative;
  z-index: 0;
}

.zindex1 {
  position: relative;
  z-index: 1;
}

/* ENCABEZADOS */

.tit h1 {
  font-size: var(--title-large);
  color: var(--pantone-2767);
  font-weight: var(--bold);
}

.cab .tit h1 {
  font-size: 3.25rem;
}

.tit h2 {
  font-size: var(--title-medium);
  color: var(--pantone-2767);
  font-weight: var(--bold);
}

.cab .tit h2 {
  font-size: 2rem;
}

.tit h3 {
  font-size: var(--title-small);
  color: var(--pantone-2767);
  font-weight: var(--normal);
}

.tit p {
  font-size: var(--title-medium);
  font-weight: var(--normal);
  line-height: 1.25em;
}

.subtit h3,
.subtit p {
  font-size: 1.5rem;
  font-weight: var(--normal);
  line-height: 1.25em;
}

/* Colores */

.c-beige * {
  color: var(--pantone-7506) !important;
}

.c-morado * {
  color: var(--pantone-2415) !important;
}

/* Botones */

.default-btn a {
  font-size: var(--body) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--bold) !important;
  padding: 15px 20px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
  border: 1px solid !important;
  min-width: 225px;
}

.default-btn.bg-pantone-2415 a {
  /* Purpura */
  background-color: var(--pantone-7506) !important;
  color: var(--pantone-2415) !important;
  border-color: var(--pantone-7506) !important;
  transition: var(--all-transition);
}

.default-btn.bg-pantone-2415 a:hover {
  background-color: transparent !important;
  color: var(--pantone-7506) !important;
}

.default-btn.bg-pantone-170 a {
  /* Naranja */
  background-color: var(--pantone-2767) !important;
  color: var(--pantone-7506) !important;
  border-color: var(--pantone-2767) !important;
  transition: var(--all-transition);
}

.default-btn.bg-pantone-170 a:hover {
  background-color: transparent !important;
  border-color: var(--pantone-7506) !important;
  color: var(--pantone-7506) !important;
}

.default-btn.bg-pantone-rubine-red-m a {
  /* Rosa */
  background-color: var(--pantone-7506) !important;
  color: var(--pantone-rubine-red-m) !important;
  border-color: var(--pantone-7506) !important;
  transition: var(--all-transition);
}

.default-btn.bg-pantone-rubine-red-m a:hover {
  background-color: transparent !important;
  border-color: var(--pantone-7506) !important;
  color: var(--pantone-7506) !important;
}

.default-btn.bg-pantone-1788 a {
  /* Rojo Anaranjado */
  background-color: var(--pantone-2767) !important;
  color: var(--pantone-7506) !important;
  border-color: var(--pantone-2767) !important;
  transition: var(--all-transition);
}

.default-btn.bg-pantone-1788 a:hover {
  background-color: transparent !important;
  border-color: var(--pantone-7506) !important;
  color: var(--pantone-7506) !important;
}

.default-btn.bg-pantone-2767 a {
  /* Azul */
  background-color: var(--pantone-7506) !important;
  color: var(--pantone-2767) !important;
  border-color: var(--pantone-7506) !important;
  transition: var(--all-transition);
}

.default-btn.bg-pantone-2767 a:hover {
  background-color: transparent !important;
  border-color: var(--pantone-7506) !important;
  color: var(--pantone-7506) !important;
}

.default-btn.bg-pantone-7506 a {
  /* Azul */
  background-color: var(--pantone-2767) !important;
  color: var(--pantone-7506) !important;
  border-color: var(--pantone-2767) !important;
  transition: var(--all-transition);
}

.default-btn.bg-pantone-7506 a:hover {
  background-color: transparent !important;
  border-color: var(--pantone-2767) !important;
  color: var(--pantone-2767) !important;
}

/* Menu */

header {
  z-index: 1;
}
.main-navigation ul > li > a {
  font-size: 1.25rem;
  color: var(--pantone-2415);
  font-weight: var(--bold);
}

.main-navigation ul > li > a:hover,
.main-navigation ul > li.current_page_item > a {
  color: var(--pantone-1788);
}

/* Carrusel */

.valoracionsSlider {
  width: 100%;
  height: 100%;
}

.valoracionsSlider .swiper-slide p {
  text-align: center;
  background-image: url("/wp-content/uploads/2024/11/fondo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  padding: 20px 55px;
  overflow-y: scroll;
}

.valoracionsSlider .swiper-slide p::-webkit-scrollbar {
  display: none;
}

.valoracionsSlider .swiper-button-prev,
.valoracionsSlider .swiper-button-next {
  background-color: var(--pantone-7506);
  border-radius: 100%;
  height: 40px;
  max-width: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.valoracionsSlider .swiper-button-prev::after,
.valoracionsSlider .swiper-button-next::after {
  font-size: 30px;
  color: var(--pantone-2767);
}

/* FORMULARIO DE CONTACTO */

form .contacto .datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

form .contacto .datos > div {
  flex: 0 0 48%;
  max-width: 48%;
}

form .contacto label {
  display: inline-block;
  margin-bottom: 10px;
}

form .contacto input,
form .contacto textarea {
  border: none;
  border-radius: 50px;
  background-color: rgba(163, 40, 79, 0.2);
}

form .contacto textarea {
  resize: none;
  border-radius: 25px;
  max-height: 125px;
}

form .btn-enviar > p {
  margin-bottom: 0;
}

form .contacto input[type="submit"] {
  font-size: var(--body) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--bold) !important;
  padding: 15px 20px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
  border: 1px solid !important;
  min-width: 225px;
  background-color: var(--pantone-2767);
  color: var(--pantone-7506);
}

form .contacto input[type="submit"]:hover {
  background-color: transparent !important;
  border-color: var(--pantone-2767) !important;
  color: var(--pantone-2767) !important;
}

form .aceptar-rgpd > p {
  margin-bottom: 0;
}

form .aceptar-rgpd .wpcf7-list-item {
  margin: 0;
}

.txt-legal {
  margin-bottom: 0;
  font-size: 0.8rem;
}

.txt-legal .tab-legal {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  column-gap: 10px;
  /* margin-bottom: 15px; */
}

.txt-legal .tab-legal p {
  color: var(--pantone-2767pan) !important;
  font-size: 1.2em;
  margin-bottom: 10px;
}

.txt-legal .tab-legal:hover {
  cursor: pointer;
}

.txt-legal .tab-legal .plus-icon {
  margin-top: 4px;
}

.txt-legal .tab-legal .plus-icon svg {
  transform: rotate(45deg);
  fill: var(--pantone-2767);
}

.form-w .txt-legal .tab-legal .plus-icon svg {
  fill: var(--pantone-7506);
}

.txt-legal .let-peq {
  margin: 0;
  padding-left: 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.txt-legal .let-peq > p {
  font-size: 0.8rem;
  line-height: 1.25em !important;
  color: var(--texto) !important;
}

.form-w .txt-legal .tab-legal p,
.form-w .txt-legal .let-peq > p {
  color: var(--pantone-7506) !important;
}

/* Newsletter Mailchimp */

.newsletter form .mc_form_inside {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 10px;
}

.newsletter form .mc_merge_var {
  flex: 0 0 48%;
  max-width: 48%;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.newsletter form .mc_interest {
  flex: 0 0 90%;
}

.newsletter form #mc_message,
.newsletter form #mc-indicates-required,
.newsletter form .mc_signup_submit {
  flex: 0 0 100%;
}

.newsletter form #mc-indicates-required {
  margin-bottom: 20px;
}

.newsletter form .mc_merge_var label {
  display: inline-block;
  margin-bottom: 10px;
}

.newsletter form .mc_merge_var input {
  border: none !important;
  border-radius: 50px !important;
  background-color: rgba(163, 40, 79, 0.2) !important;
}

.newsletter form input[type="submit"] {
  font-size: var(--body) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--bold) !important;
  padding: 15px 20px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
  border: 1px solid !important;
  min-width: 225px;
  background-color: var(--pantone-2767);
  color: var(--pantone-7506);
  margin-top: 1.5em;
}

.newsletter form input[type="submit"]:hover {
  background-color: transparent !important;
  border-color: var(--pantone-2767) !important;
  color: var(--pantone-2767) !important;
}

/* LOGOS COLABORADORES */

.logos-colabs .vce-row-content {
  flex-wrap: wrap !important;
  justify-content: center;
  gap: 20px;
}

.logos-colabs .vce-row-content > div {
  flex: 0 0 18% !important;
}

.logos-colabs .vce-row-content > div img {
  max-height: 110px;
  max-width: 150px;
  object-fit: contain !important;
  object-position: center;
}

/* Què ofereixo? */

.icon-circle {
  position: relative;
}

.icon-circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 10px;
  z-index: 0;
  background-color: var(--pantone-170);
}

#el-1f4b2aa3 .icon-circle::after {
  content: none;
}

.icon-circle > div {
  background-color: var(--pantone-170);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 120px;
  height: 120px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.icon-circle > div svg {
  max-width: 80px;
  width: 100%;
  max-height: 80px;
  object-fit: contain;
}

.servicios .vce-col-content {
  position: relative;
}

.servicios .subtit {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.servicios .subtit * {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.servicios .subtit a {
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--all-transition);
}

.servicios .subtit a:hover {
  transform: scale(1.3);
}

#families .f-wrap > .vce-row-content {
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 20px;
  row-gap: 40px;
}

#families .f-wrap > .vce-row-content > div {
  flex: 0 0 48%;
  margin: 0 !important;
}

#families svg,
#claustre svg,
#alumnat svg {
  max-width: 120px;
  width: 100%;
  height: 120px;
  /* object-fit: contain; */
}

.assessories svg {
  max-width: 60px;
  width: 100%;
  height: 55px;
  display: block;
  margin: 0 auto;
  /* object-fit: contain; */
}

#families .vce-raw-html-wrapper,
#claustre .vce-raw-html-wrapper,
#alumnat .vce-raw-html-wrapper {
  text-align: center;
}

#families .vce-text-block ul,
#alumnat .vce-text-block ul {
  list-style-type: none;
  margin-left: 0;
  margin-bottom: 0;
}

#families .vce-text-block ul > li:not(:last-child),
#alumnat .vce-text-block ul > li:not(:last-child) {
  margin-bottom: 5px;
}

/* #families .vce-text-block ul > li:not(:last-child)::after,
#alumnat .vce-text-block ul > li:not(:last-child)::after {
  content: "";
  display: block;
  height: 5px;
  width: 5px;
  border-radius: 100%;
  margin: 5px auto 0;
  background-color: var(--pantone-2767);
} */

/* LOGOS KIT DIGITAL */

.logos-kit-digital {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  background-color: var(--gris-claro);
  gap: 10px;
}

.logos-kit-digital img {
  display: block;
  max-width: 230px;
  padding: 0 20px;
}

.logos-kit-digital > img:last-child {
  max-width: 190px;
}

/* ---------- RESPONSIVE ---------- */

@media screen and (max-width: 1080px) {
  button.menu-toggle {
    background-color: transparent !important;
    padding: 0;
  }

  button.menu-toggle svg {
    height: 25px;
    width: 25px;
    fill: var(--pantone-2415);
  }

  .main-navigation {
    margin-top: 0 !important;
  }

  .main-navigation .main-nav {
    position: absolute;
    top: 9px;
    width: 100%;
    background-color: var(--pantone-2415);
  }

  .main-navigation .main-nav ul > li > a {
    color: var(--pantone-7506);
  }

  .main-navigation .main-nav ul > li.current_page_item > a {
    color: var(--pantone-170);
  }

  .cab .tit h1 {
    font-size: 2.5rem;
  }

  .subtit p {
    font-size: var(--title-small);
  }

  .inside-header {
    flex-direction: row;
  }

  /* Newsletter Mailchimp */

  .newsletter form .mc_interest {
    flex: 0 0 85%;
  }

  /* Què ofereixo? */

  #families .f-wrap > .vce-row-content > div {
    flex: 0 0 48%;
  }

  #alumnat .f-wrap > .vce-row-content {
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 20px;
    row-gap: 40px;
  }

  #alumnat .f-wrap > .vce-row-content > div {
    flex: 0 0 48%;
    margin: 0 !important;
  }

  /* LOGOS KIT DIGITAL */

  .logos-kit-digital img {
    max-width: 210px;
  }

  .logos-kit-digital > img:last-child {
    max-width: 190px;
  }
}

@media screen and (orientation: landscape) and (max-width: 700px) {
  /* Què ofereixo? */

  .icon-circle::after {
    content: none;
  }

  .perspectiva .vce-row-content {
    row-gap: 40px;
    justify-content: center;
  }

  #claustre .f-wrap > .vce-row-content {
    row-gap: 40px;
  }
}

@media screen and (max-width: 820px) {
}

@media screen and (max-width: 600px) {
  /* LOGOS COLABORADORES */

  .logos-colabs .vce-row-content > div {
    flex: 0 0 29% !important;
  }
  /* FORMULARIO DE CONTACTO */

  form .contacto .datos {
    flex-direction: column;
  }

  form .contacto .datos > div {
    max-width: 100%;
    flex: 0 0 100%;
  }

  /* Newsletter Mailchimp */

  .newsletter form .mc_merge_var {
    max-width: 100%;
    flex:0  0 100%;
  }

  .newsletter form .mc_interest {
    flex: 0 0 80% !important;
  }

  /* Què ofereixo? */

  .icon-circle::after {
    content: none;
  }

  .perspectiva .vce-row-content {
    row-gap: 40px;
    justify-content: center;
  }

  #families .f-wrap > .vce-row-content > div {
    flex: 0 0 100%;
  }

  #alumnat .f-wrap > .vce-row-content > div {
    flex: 0 0 100%;
  }

  #claustre .f-wrap > .vce-row-content {
    row-gap: 40px;
  }

  /* LOGOS KIT DIGITAL */

  .logos-kit-digital img {
    max-width: 165px;
  }

  .logos-kit-digital > img:last-child {
    max-width: 150px;
  }

  table {
    display: block;
    overflow: scroll;
  }
}