/* =========================================================
   HERO — PÀGINA TRACTAMENTS (versió sense icones)
   ========================================================= */

.page-tractaments .hero{
  min-height: auto !important;         /* anula el 70vh global */
  padding: 1.5rem 0 0 !important;      /* quita aire extra arriba */
}

.page-tractaments .hero-container{
  min-height: unset !important;         /* anula los 410px */
  width: 100% !important;   /* card más contenida */
  padding: 2.6rem 1.2rem 3rem !important; /* aire razonable */
  min-height: 35vh !important;
}

/* 🔹 En móviles: un poco menos de altura aún */
@media (max-width: 600px) {
  .page-tractaments .hero-container {
    padding: 2.8rem 1rem 3.2rem !important;
  }
}

/* 🔹 Texto centrado */
.page-tractaments .hero-text{
  max-width: 960px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.page-tractaments .hero-text h1 {
  font-family: "Nunito", "Arial Rounded MT Bold", sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.2rem, 4vw, 3rem) !important;
  color: var(--text-dark) !important;
  margin-bottom: 1rem !important;
}

/* 🔹 Ajuste del padding superior/inferior en móviles */
@media (max-width: 600px) {
  .page-tractaments .hero-container {
    padding: 4rem 1rem 4.5rem !important;
  }
  .page-tractaments .hero-text h1 {
    font-size: clamp(1.8rem, 5vw, 2.4rem) !important;
  }
}


/* INTRO */
.page-tractaments .intro {
  padding-top: 80px;
  background: #fff;
}

.page-tractaments .intro .container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

.page-tractaments .intro p {
  font-family: "Nunito", "Arial Rounded MT Bold", sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  color: var(--text-dark);
  font-weight: 500;
  text-align: left;
  margin: 0;
  max-width: none;
}


/* GRID TARGETES (reutilitza patrons d’Experiència) */
.page-tractaments .experience.section{ background:#fff; padding: 3.2rem 0 4rem; }
.page-tractaments .exp-header__titles h2{ margin-bottom: .25rem; }
.page-tractaments .exp-grid{ width: min(1100px, 92%); margin-inline: auto; }

/* --- Ajuste posición del icono en las tarjetas --- */
.page-tractaments .exp-card__icon {
  position: absolute;
  bottom: 0.1rem;   /* 👈 lo situamos en la parte inferior */
  left: 1rem;     /* 👈 y pegado al borde izquierdo */
  transform: none;  /* eliminamos el centrado anterior */
  opacity: 0.25;
  z-index: 0;
}

.page-tractaments .exp-card__icon img {
  width: 40px;      
  height: auto;
}

/* ---------- FAQ (actualizado con sombra verde e icono + / –) ---------- */
.faq {
  background: #ffffff;
  padding: 3.2rem 0 5rem;
}

.faq .container {
  width: min(900px, 92%);
  margin: 0 auto;
}

.faq h2 {
  font-size: clamp(2rem, 2.5vw, 2.2rem);
  color: var(--text-dark);
  margin-bottom: 2rem;
  text-align: center;
}

/* Recuadro con sombra verdosa */
.faq-item {
  border: 1px solid #e8f5ee;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.2rem;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(9, 124, 63, 0.1); /* sombra verde suave */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(9, 124, 63, 0.15);
}

/* Summary con icono de + / – */
.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  color: var(--text-dark);
  font-family: "Nunito", "Arial Rounded MT Bold", sans-serif;
  position: relative;
  padding-right: 2rem; /* espacio para el icono */
}

/* Elimina el marcador por defecto */
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Icono "+" a la derecha */
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: #097C3F; /* verde corporativo */
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Cambia a "–" al abrir */
.faq-item[open] summary::after {
  content: "–";
  color: #0a5230;
  transform: translateY(-50%) rotate(180deg);
}

/* Texto */
.faq-item p {
  margin-top: 0.75rem;
  color: #0c2440;
  line-height: 1.6;
  font-size: 0.95rem;
  transition: opacity 0.3s ease;
}

@media (max-width: 600px) {
  .page-tractaments .intro {
    display: none !important;      /* no solo oculta, elimina el espacio */
    padding: 0 !important;         /* por si hay padding residual */
    margin: 0 !important;
    height: 0 !important;
  }
}

/* CTA flotant: es mostra en scroll (classes ja definides al projecte) */
/* .floating-cta.visible { opacity:1; transform: translateY(0); }  — ja definit a style.css */