/*
Theme Name: Divi Child
Theme URI: https://surtdecasa.cat/dev/conscat/
Description: Tema fill de Divi per a CONSCAT. Conte el CSS personalitzat de la web.
Author: CONSCAT
Template: Divi
Version: 1.0.0
*/

h1 {
  font-weight: 800 !important;
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;

}

h2 {
  font-weight: 800 !important;
  font-size: clamp(34px, 3.6vw, 52px) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

h3 {
  font-weight: 800 !important;
  font-size: clamp(28px, 2.3vw, 42px) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

h6 {
  font-family: Inter;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.16em !important;
  line-height: 1.8 !important;
  text-transform: uppercase;
}

.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button,
.et_button_no_icon.et_button_left .et_pb_button:hover,
.et_button_no_icon .et_pb_button,
.et_button_no_icon .et_pb_button:hover,
body #page-container .et_pb_section .et_pb_button_2,
body #page-container .et_pb_section .et_pb_button_2:hover {
  font-family: Inter !important;
  font-weight: 600 !important;
  padding: 14px 36px !important
}

body {
  line-height: 1.5em !important;
}

.cc-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  /* separació entre la línia i el text */
}

.cc-eyebrow::before {
  content: "";
  /* pseudo-element buit = la línia */
  width: 34px;
  height: 3px;
  background: #C8202C;
  flex: none;
  /* que no s'encongeixi */
}

.home-profesionals .cc-eyebrow {
  display: block;
  /* separació entre la línia i el text */
}

.home-profesionals .cc-eyebrow::before {
  content: "";
  /* pseudo-element buit = la línia */
  width: 34px;
  height: 3px;
  background: #C8202C;
  flex: none;
  /* que no s'encongeixi */
}

/* hero */
.xifra {
  font-family: "Inter Tight";
  font-weight: 800;
  font-size: clamp(18px, 3vh, 30px);
  letter-spacing: -0.02em;
  color: rgb(255, 255, 255);
  line-height: 1;
}

.professionals .xifra {
  font-size: clamp(28px, 3vh, 40px);
  color: #C8202C;
  line-height: 1;
}

.xifra-text {
  display: block;
  margin-top: 8px;
  font-family: Inter;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.professionals .xifra-text {
  color: #8a8f95;
}

.xifra-row {
  padding: 28px 40px;
}



/* SECCIÓ HERO — layout amb grid */
.hero {
  display: grid !important;
  grid-template-rows: 1fr auto auto 1fr auto;
  min-height: 100vh;
  padding: 0 !important;
  position: relative;
}

/* el vídeo de fons fora del grid */
.hero>.et_pb_section_video_bg {
  position: absolute !important;
  inset: 0;
  z-index: 0;
}

/* text i botons centrats al mig */
.hero-text {
  grid-row: 2;
  z-index: 1;
}

.hero-botons {
  grid-row: 3;
  z-index: 1;
}

/* xifra a la darrera banda, a baix, i centrada com sempre */
.hero-xifra {
  grid-row: 5;
  z-index: 1;
}

.hero>.et_pb_section_video_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(26, 26, 26, .75) 0%, rgba(26, 26, 26, .15) 52%, transparent 78%),
    linear-gradient(180deg, rgba(26, 26, 26, .72) 0%, rgba(26, 26, 26, .38) 32%, rgba(26, 26, 26, .55) 100%);
  z-index: 1;
  pointer-events: none;
}

/* botons */
/* Fila de botons en linia, reutilitzable */
.cc-botons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.cc-botons .et_pb_column {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cc-botons .et_pb_column_empty {
  display: none !important;
}

.cc-botons .et_pb_button {
  margin: 0 !important;
}

/* Mobil: botons a tota amplada, un sota l'altre */
@media (max-width:767px) {
  .cc-botons {
    flex-direction: column;
    align-items: stretch;
  }

  .cc-botons .et_pb_column {
    width: 100% !important;
  }

  .cc-botons .et_pb_button {
    display: block;
    text-align: center;
  }
}

/* Fila/columna de botons en linia, reutilitzable
   (assumeix els dos botons dins de la MATEIXA columna) */
.cc-botons .et_pb_column {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.cc-botons .et_pb_button_module_wrapper {
  margin: 0 !important;
}

.cc-botons .et_pb_button {
  margin: 0 !important;
}

/* Centrat opcional: afegeix tambe la classe cc-center a la fila */
.cc-botons.cc-center .et_pb_column {
  justify-content: center;
}

/* Mobil: botons a tota amplada, un sota l'altre */
@media (max-width:767px) {
  .cc-botons .et_pb_column {
    flex-direction: column;
    align-items: stretch;
  }

  .cc-botons .et_pb_button {
    display: block;
    text-align: center;
  }
}

/* Franja de xifres */
.hero-xifra {
  grid-row: 5;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, .18);
  background: rgba(26, 26, 26, .35);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.hero-xifra .et_pb_column {
  width: auto !important;
  margin: 0 !important;
}

/* Sota 980px: 2 columnes (minim garantit) */
@media (max-width:980px) {
  .hero-xifra {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Capcalera de seccio: titol gran a l'esquerra + etiqueta a la dreta */
.titol-seccio .et_pb_text_inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.titol-seccio h2 {
  margin: 0;
}

.titol-seccio h6 {
  margin: 0;
  white-space: nowrap;
  color: #8A8F95;
  /* gris tenue */
  font-weight: 700;
}

/* Mobil: etiqueta sota el titol, alineada a l'esquerra */
@media (max-width:767px) {
  .titol-seccio .et_pb_text_inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* CARD DE SERVEI */
.card-servei {
  position: relative;
  background: #fff;
  border: 1px solid #D5D8DD;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .22s ease, transform .22s ease;
}

.card-servei:hover {
  box-shadow: 0 18px 44px rgba(26, 26, 26, .16);
  transform: translateY(-5px);
}

/* imatge: mateixa alcada a totes (object-fit retalla el sobrant) */
.card-servei .et_pb_image {
  margin: 0 !important;
  width: 100%;
}

.card-servei .et_pb_image_wrap,
.card-servei .et_pb_image img {
  display: block;
  width: 100%;
}

.card-servei .et_pb_image img {
  height: 222px;
  object-fit: cover;
}

/* etiqueta categoria (a dalt esquerra) */
.card-servei .card-etiqueta {
  position: absolute;
  top: 14px;
  left: 14px;
  margin: 0 !important;
  z-index: 2;
}

.card-servei .card-etiqueta .et_pb_text_inner p {
  margin: 0;
  background: rgba(26, 26, 26, .55);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 11px;
}

/* numero (a baix esquerra de la imatge) */
.card-servei .card-num {
  position: absolute;
  top: 222px;
  transform: translateY(-100%);
  left: 0;
  margin: 0 !important;
  z-index: 2;
}

.card-servei .card-num .et_pb_text_inner p {
  margin: 0;
  background: #C8202C;
  color: #fff;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 17px;
  padding: 8px 15px;
}

/* cos de la card */
.card-servei .card-cos {
  padding: 26px;
}

.card-servei .card-cos h3 {
  margin: 0 0 13px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 22px !important;
}

.card-servei .card-cos .et_pb_text_inner>p {
  margin: 0 0 20px;
  color: #6B6F75;
  font-size: 15px;
  line-height: 1.6;
}

.card-servei .card-cos a,
.home-projectes a {
  color: #1A1A1A;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
}

.card-servei .card-cos a::after,
.home-projectes a::after {
  content: " →";
  color: #C8202C;
}

/* barra vermella inferior, sempre a baix */
.card-servei::after {
  content: "";
  display: block;
  height: 4px;
  background: #C8202C;
  margin-top: auto;
}

/* Dades del projecte destacat: 3 columnes (etiqueta sobre valor) */
.projecte-destacat-dades .et_pb_text_inner {
  display: grid;
  grid-template-rows: auto auto;
  /* 2 files: etiqueta / valor */
  grid-auto-flow: column;
  /* omple columna a columna */
  justify-content: start;
  column-gap: 44px;
  row-gap: 8px;
}

.projecte-destacat-dades br {
  display: none;
}

/* els <br> no han de comptar */

/* etiquetes (spans senars): Ubicacio, Tipus, Estat */
.projecte-destacat-dades span:nth-of-type(odd) {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A8F95;
}

/* valors (spans parells): Tortosa, Edifici de pisos, Finalitzat */
.projecte-destacat-dades span:nth-of-type(even) {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #1A1A1A;
}

/* Mobil: menys separacio entre columnes */
@media (max-width:600px) {
  .projecte-destacat-dades .et_pb_text_inner {
    column-gap: 24px;
  }
}

.projecte-destacat-dades .et_pb_text_inner {
  display: grid !important;
  grid-template-rows: auto auto;
  grid-auto-flow: column !important;
  justify-content: start;
  column-gap: 44px;
  row-gap: 8px;
}

/* Fotos abans/despres */
.foto-projecte {
  position: relative;
}

/* imatge: mateixa forma a les dues, marc i zoom en hover */
.foto-projecte .et_pb_image {
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid #D5D8DD;
  transition: box-shadow .3s ease;
}

.foto-projecte .et_pb_image_wrap {
  display: block;
  overflow: hidden;
}

.foto-projecte .et_pb_image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  /* mateixa proporcio encara que els originals variin */
  object-fit: cover;
  transition: transform .5s ease;
}

/* efecte hover: ombra suau + zoom lleuger */
.foto-projecte:hover .et_pb_image {
  box-shadow: 0 18px 44px rgba(26, 26, 26, .18);
}

.foto-projecte:hover .et_pb_image img {
  transform: scale(1.05);
}

/* etiquetes a dalt a l'esquerra */
.etiqueta-abans,
.etiqueta-despres {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 !important;
  z-index: 2;
}

.etiqueta-abans .et_pb_text_inner p,
.etiqueta-despres .et_pb_text_inner p {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 14px;
}

.etiqueta-abans .et_pb_text_inner p {
  background: #1A1A1A;
}

/* fosc */
.etiqueta-despres .et_pb_text_inner p {
  background: #C8202C;
}

/* vermell */

.home-defineix h3 {
  font-size: 21px !important;
}

.home-defineix p {
  font-size: 15px;
}

.home-defineix .et-pb-icon {
  font-size: 30px !important;
  margin-bottom: 10px;
}

/* footer-botons h6.comemcem*/

.et-l--footer .comencem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 14px;
  font-weight: 700;
  color: #9a9a9a;
  margin: 0 auto;
}

.et-l--footer .comencem::before,
.et-l--footer .comencem::after {
  content: "";
  height: 2px;
  width: 40px;
  background-color: #c0392b;
  display: inline-block;
}

.et-l--footer .et_pb_button_1_tb_footer {
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

.et-l--footer .footer-botons .et_pb_column {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

@media (max-width: 767px) {
  .et-l--footer .footer-botons .et_pb_column {
    flex-direction: column;
    align-items: center;
  }
}

/* Fila copyright + enllaços a la mateixa línia */
.et-l--footer .et_pb_row_3_tb_footer .et_pb_column {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Enllaços en horitzontal, sense punts */
.et-l--footer .et_pb_text_10_tb_footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.et-l--footer .et_pb_text_10_tb_footer li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Menú alineat a la dreta */
.et_pb_menu_0_tb_header .et_pb_menu_inner_container {
  display: flex;
  align-items: center;
}

/* Evita que el wrap ocupi tot l'espai i empeny-lo a la dreta */
.et_pb_menu_0_tb_header .et_pb_menu__wrap {
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
}

/* Últim ítem com a botó */
.et_pb_menu_0_tb_header #menu-principal-1 li.menu-item-347>a {
  background-color: #c0392b;
  color: #ffffff !important;
  padding: 0 24px;
  border-radius: 4px;
  opacity: 1;
  height: 45px;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
}

/* Per si el menú intern encara queda alineat a l'esquerra */
.et_pb_menu_0_tb_header .et_pb_menu__menu,
.et_pb_menu_0_tb_header nav.et-menu-nav,
.et_pb_menu_0_tb_header #menu-principal-1 {
  margin-left: auto;
  justify-content: flex-end;
}

.tl {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Línia vertical discontínua central */
.tl::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 280px;
  /* = ample columna any (220) + meitat del gap */
  border-left: 2px dashed #c7ccd4;
}

/* Cada fila: any | gap amb punt | targeta */
.tl-item {
  display: grid;
  grid-template-columns: 220px 120px 1fr;
  align-items: start;
  margin-bottom: 30px;
  position: relative;
}

/* Punt vermell sobre la línia */
.tl-item::before {
  content: "";
  position: absolute;
  left: 280px;
  top: 22px;
  width: 16px;
  height: 16px;
  background: #c0392b;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Etiqueta de l'any */
.tl-year {
  grid-column: 1;
  background: #2b3f52;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  padding: 28px 10px;
  align-self: center;
}

/* Targeta de contingut (columna 3, saltant el gap) */
.tl-card {
  grid-column: 3;
  background: #fff;
  border: 1px solid #e4e7ec;
  padding: 24px 28px;
}

.tl-card h3 {
  margin: 0 0 12px;
  color: #1a2733;
}

.tl-card p {
  margin: 0 0 8px;
  color: #6b7480;
}

/* Últim element: any en vermell + targeta ressaltada */
.tl-now .tl-year {
  background: #c0392b;
  font-style: italic;
}

.tl-now .tl-card {
  border: 2px solid #c0392b;
}

/* Responsiu: apilat en mòbil */
@media (max-width: 767px) {

  .tl::before,
  .tl-item::before {
    display: none;
  }

  .tl-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tl-year,
  .tl-card {
    grid-column: 1;
  }
}

.tl-card {
  grid-column: 3;
  background: #fff;
  border: none;
  padding: 24px 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tl-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Últim element sense border, ressaltat amb ombra vermellosa */
.tl-now .tl-card {
  border: none;
  box-shadow: 0 2px 10px rgba(192, 57, 43, 0.18);
}

.tl-now .tl-card:hover {
  box-shadow: 0 12px 28px rgba(192, 57, 43, 0.28);
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.feat {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #fff;
  border: none;
  padding: 28px 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feat:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.feat-num {
  color: #c0392b;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}

.feat-text h3 {
  margin: 0 0 8px;
  color: #1a2733;
}

.feat-text p {
  margin: 0;
  color: #6b7480;
}

/* Responsiu: una columna en mòbil */
@media (max-width: 767px) {
  .feat-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.que-fem-per-que-fem .home-defineix .et_pb_column {

  padding: 32px 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ombra-st {

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.que-fem-per-que-fem .home-defineix .et_pb_column:hover,
.ombra-st:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Desktop: TOC fixat mentre es llegeix el text */
.textos-legals .et_pb_column_1 {
  position: sticky;
  top: 100px;
  /* separació respecte al header fix; ajusta-ho */
  align-self: flex-start;
}

/* Opcional: que la TOC no sigui més alta que la pantalla i faci scroll propi */
.textos-legals .toc {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.textos-legals h4 {
  margin-top: 15px;
}

/* Responsiu: en tauleta/mòbil torna a flux normal, sense fixar */
@media (max-width: 980px) {
  .textos-legals .et_pb_column_1 {
    position: static;
    top: auto;
    max-height: none;
  }

  .textos-legals .toc {
    max-height: none;
    overflow: visible;
  }
}

/* Imatges amb alçada fixa (retallades) */
.columnes-informatives .et_pb_image,
.columnes-informatives .et_pb_image .et_pb_image_wrap {
  display: block;
  width: 100%;
}

.columnes-informatives .et_pb_column .et_pb_image .et_pb_image_wrap img.wp-image-401,
.columnes-informatives .et_pb_column .et_pb_image img {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block;
}

/* Tauleta */
@media (max-width: 980px) {
  .columnes-informatives .et_pb_image img {
    height: 260px !important;
  }
}

/* Mòbil */
@media (max-width: 767px) {
  .columnes-informatives .et_pb_image img {
    height: 220px !important;
  }
}

/* Bullets de la llista en vermell del web */
.columnes-informatives ul li::marker {
  color: #c0392b;
}

.blocs-foscos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.bf {
  background: #202020;
  padding: 30px 34px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bf:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.bf h3 {
  margin: 0 0 12px;
  color: #ffffff;
  font-weight: 700;
}

.bf p {
  margin: 0;
  color: #9aa0a6;
  line-height: 1.5;
}

/* Responsiu: una columna en mòbil */
@media (max-width: 767px) {
  .blocs-foscos {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.bf h3 {
  font-size: 24px !important;
}

h6[style*="text-align: center"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
}

h6[style*="text-align: center"]::before,
h6[style*="text-align: center"]::after {
  content: "";
  width: 34px;
  height: 3px;
  background: #C8202C;
  flex: none;
}