/*
 Theme Name:     lgxpap - Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


/* ==============================================
   Helpers tipográficos
   ============================================== */
.sup {
  font-size: 0.6em;
  vertical-align: super;
  bottom: 0;
}

.sub {
  font-size: 0.6em;
  vertical-align: sub;
  bottom: 0;
}

/* ==============================================
   Utilidades de Flexbox
   ============================================== */
.d-flex {
  display: flex !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-direction-column {
  flex-direction: column !important;
}

.flex-direction-row {
  flex-direction: row !important;
}

.align-content-center {
  align-content: center !important;
}

.align-items-center {
  align-items: center !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-space-between {
  justify-content: space-between !important;
}

/* ==============================================
   Utilidades de Tamaño
   ============================================== */
.fit-content {
  width: fit-content !important;
}

/* ==============================================
   Utilidades de Espaciado
   ============================================== */
.gap-10 {
  gap: 10px !important;
}

.gap-20 {
  gap: 20px !important;
}

.padding-0 {
  padding: 0 !important;
}

.padding-5-20 {
  padding: 5px 20px !important;
}

.padding-10 {
  padding: 10px !important;
}

.padding-10-20 {
  padding: 10px 20px !important;
}

.padding-20 {
  padding: 20px !important;
}

.padding-30 {
  padding: 30px !important;
}

.margin-0 {
  margin: 0 !important;
}

.margin-top-5 {
  margin-top: 5px !important;
}

.margin-top-10 {
  margin-top: 10px !important;
}

.margin-top-20 {
  margin-top: 20px !important;
}

.margin-top-30 {
  margin-top: 30px !important;
}

.margin-bottom-10 {
  margin-bottom: 10px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-bottom-40 {
  margin-bottom: 40px !important;
}

.margin-bottom-50 {
  margin-bottom: 50px !important;
}

.margin-bottom-60 {
  margin-bottom: 60px !important;
}

/* ==============================================
   Utilidades de Border Radius
   ============================================== */
.border-radius-20 {
  border-radius: 20px !important;
}

.border-radius-top-40 {
  border-top-left-radius: 40px !important;
  border-top-right-radius: 40px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.border-radius-40 {
  border-radius: 40px !important;
}

/* ==============================================
   Utilidades de Forma y Fondo
   ============================================== */
.circle {
  clip-path: circle() !important;
}

.background-white {
  background: #fff !important;
}

.text-center {
  text-align: center !important;
  margin: 0 auto !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

/* ==============================================
   Listas y Decoraciones
   ============================================== */
.list-style-none {
  list-style: none !important;
}

/* ==============================================
   Box Shadow
   ============================================== */
.box-shadow {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* ==============================================
   Text Transformations
   ============================================== */
.capitalize {
  text-transform: capitalize !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.no-border {
  border: none !important;
}

/* ==============================================
   Letter Spacing & Font Size
   ============================================== */
.letter-spacing-1 {
  letter-spacing: 1pt !important;
}

/* ==============================================
   Menú Vertical Lateral
   ============================================== */
.et_pb_menu_inner_container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100vh !important;
  padding: 30px 0 !important;
}

.et_pb_menu__logo-wrap {
  order: 1 !important;
  margin-bottom: 0 !important;
  align-self: flex-start !important;
}

.et_pb_menu__logo img {
  max-width: 120px !important;
  height: auto !important;
}

.et_pb_menu__wrap {
  order: 2 !important;
  margin-top: auto !important;
  align-self: stretch !important;
}

.et_pb_menu__menu nav.et-menu-nav ul#menu-menu-principal {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.et_pb_menu__menu nav.et-menu-nav ul#menu-menu-principal li {
  display: block !important;
  width: 100% !important;
  margin: 0 0 10px !important;
}

.et_pb_menu__menu nav.et-menu-nav ul#menu-menu-principal li a {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 8px 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #333 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: all 0.3s ease !important;
}

.et_pb_menu__menu nav.et-menu-nav ul#menu-menu-principal li a:hover {
  color: #558d3f !important;
}

/* ==============================================
   SERVEIS – Mostrar contingut al clicar
   ============================================== */
.servei-contingut {
  display: none !important;
}

.servei-contingut.active {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

.servei-btn {
  cursor: pointer !important;
  color: blue !important;
  transition: color 0.3s ease !important;
}

.servei-btn:hover h3,
.servei-btn:hover .et_pb_text_inner h3 {
  color: #558d3f !important;
}

.servei-btn.active h3,
.servei-btn.active .et_pb_text_inner h3 {
  color: #558d3f !important;
}

/* 1) Fem que el contenidor sigui flex i envolti en files */
.servei-column {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* 2) Tots els fills comparteixen box-sizing i espai interior */
.servei-column .servei-item {
  box-sizing: border-box;
  padding: 10px; /* ajusta al teu gust */
}

/* 3) Text “arqui” ocupa el 60% a l'esquerra */
.servei-column .servei-item.et_pb_text {
  flex: 1 1 60%;
  padding-right: 40px; /* espai text → imatge */
}

/* 4) Primera imatge ocupa el 40% a la dreta */
.servei-column .servei-item.et_pb_image {
  flex: 0 0 40%;
	margin-left:40 px;
}

/* 5) La resta de mòduls queden a sota i amb 100% d’amplada */
.servei-column .servei-item:nth-child(n+3) {
  flex: 1 1 100%;
}







/* ==============================================
   FORMULARI – Estil global per Divi Contact Form
   ============================================== */
/* Contenidor superior inferiores */
.et_pb_contact_form_container {
  border-top: 1px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
  padding: 20px 0 !important;
}

/* Nom (camp 0) i Email (camp 1) en dues columnes */
.et_pb_contact_field_0,
.et_pb_contact_field_1 {
  width: 100% !important;
  display: inline-block !important;
  vertical-align: top !important;
  margin-right: 4% !important;
}

.et_pb_contact_field_1 {
  margin-right: 0 !important;
	
}

/* Missatge (camp 2) a tota amplada */
.et_pb_contact_field_2 {
  width: 100% !important;
  display: block !important;
 
}


.et_pb_contact_field_0 input,
.et_pb_contact_field_1 input,
.et_pb_contact_field_2 textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #ccc !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
}

.et_pb_contact_field_0 input::placeholder,
.et_pb_contact_field_1 input::placeholder,
.et_pb_contact_field_2 textarea::placeholder {
  color: #666 !important;
  margin: 0px;

}

.et_pb_contact_submit_container {
  text-align: right !important;
	 
}

.et_pb_contact_submit {
  background: none !important;
	 border: none !important;
  padding: 10px 0 !important;
   letter-spacing: 1px !important;
  color: #333 !important;
  box-shadow: none !important;
	  letter-spacing: 0 !important;
	
}

.et_pb_contact_submit:after {
  content: none !important;
  letter-spacing: 0 !important;
	
}

/* Anul·lem qualsevol transició per al botó */
.et_contact_bottom_container .et_pb_contact_submit.et_pb_button,
.et_contact_bottom_container .et_pb_contact_submit.et_pb_button:hover {
  transition: none !important;
}

/* Hover en verd i negreta immediatament */
.et_contact_bottom_container .et_pb_contact_submit.et_pb_button:hover {
  color: #28a745 !important;
  font-weight: bold !important;
}

/* Elimina transicions i fons */
.et_pb_button.et_pb_button_0.et_pb_bg_layout_light,
.et_pb_button.et_pb_button_0.et_pb_bg_layout_light:hover {
  transition: none !important;
  background: none !important;
  box-shadow: none !important;
  padding:0 px !important;
  letter-spacing: 0 !important;
}

/* Hover en verd i negreta immediatament */
.et_pb_button.et_pb_button_0.et_pb_bg_layout_light:hover {
	  transition: none !important;
  color: #28a745 !important;
  font-weight: bold !important;
 letter-spacing: 0 !important;
}


/* ==============================================
   Responsive Breakpoints
   ============================================== */

@media screen and (max-width: 48em) {
  .col-sm-3 {
    flex-basis: 23.7% !important;
  }
  .col-sm-4 {
    flex-basis: 32.2% !important;
  }
  .col-sm-6 {
    flex-basis: 49.1% !important;
  }
  .col-sm-9 {
    flex-basis: 71.5% !important;
  }
  .col-sm-12 {
    flex-basis: 100% !important;
  }
}

@media screen and (min-width: 80em) {
  .col-lg-3 {
    flex-basis: 23.7% !important;
  }
  .col-lg-4 {
    flex-basis: 32.2% !important;
  }
  .col-lg-6 {
    flex-basis: 49.1% !important;
  }
  .col-lg-9 {
    flex-basis: 71.5% !important;
  }
  .col-lg-12 {
    flex-basis: 100% !important;
  }
}

@media screen and (min-width: 100em) {
  .col-lg-3 {
    flex-basis: 23.7% !important;
  }
  .col-lg-4 {
    flex-basis: 32.2% !important;
  }
  .col-lg-6 {
    flex-basis: 49.1% !important;
  }
  .col-lg-9 {
    flex-basis: 71.5% !important;
  }
  .col-lg-12 {
    flex-basis: 100% !important;
  }
}