/* =====================================================================
   fitxa-curs.css — Pestanyes i resum de la pàgina del curs
   P1.2 (15/9/2026) · demanat per l'Andrea a la reunió del 4/9 (00:15:23)

   Tres peces:
     .fitxa-claus  → la tira de dades sota el títol
     .fitxa-dades  → la taula de la pestanya «Informació addicional»
     .fitxa-resum  → la repetició del final, amb preu i botó

   Tot amb els tokens de variables.css: si es canvia el morat o el radi,
   aquesta pàgina hi va darrere sense tocar res.
   ===================================================================== */

/* ---- Àncora invisible per al botó del resum de baix ---- */
.fitxa-ancora {
  display: block;
  height: 0;
  scroll-margin-top: 120px;   /* la capçalera fixa no ha de tapar el preu */
}

/* ---------------------------------------------------------------------
   1 · La tira de dades, sota el títol
   --------------------------------------------------------------------- */
.fitxa-claus {
  list-style: none;
  margin: 14px 0 20px;
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  border-top: 1px solid var(--passa-line);
  border-bottom: 1px solid var(--passa-line);
}
.fitxa-claus__item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
}
.fitxa-claus__item::before { content: none; }   /* llistes de Kadence */

.fitxa-icona {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--passa-purple-soft);
}
.fitxa-claus__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.fitxa-claus__etiqueta {
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--passa-text-2);
}
.fitxa-claus__valor {
  font-family: var(--passa-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--passa-ink);
}

/* ---------------------------------------------------------------------
   2 · Dins de les pestanyes
   --------------------------------------------------------------------- */
.woocommerce-Tabs-panel .fitxa-tab__titol {
  font-family: var(--passa-font-heading);
  font-size: 26px;
  color: var(--passa-ink);
  margin: 0 0 22px;
}
.fitxa-subtitol {
  font-family: var(--passa-font-heading);
  font-size: 17px;
  color: var(--passa-ink);
  margin: 30px 0 12px;
}
.fitxa-subtitol:first-child { margin-top: 0; }

/* Taula de dades. Dues columnes a l'ample, una de sola al mòbil:
   una taula de veritat es trenca malament en pantalles estretes. */
.fitxa-dades {
  margin: 0;
  border-top: 1px solid var(--passa-line);
}
.fitxa-dades__fila {
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr;
  gap: 8px 26px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--passa-line);
}
.fitxa-dades dt {
  margin: 0;
  font-family: var(--passa-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--passa-text-2);
}
.fitxa-dades dd {
  margin: 0;
  font-size: 15.5px;
  color: var(--passa-text);
}

/* Què inclou / horaris: la mateixa píndola amb vist que fan servir les
   targetes, per no inventar-se un estil nou a mitja pàgina. */
.fitxa-inclou,
.fitxa-horaris__llista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 22px;
}
.fitxa-inclou li,
.fitxa-horaris__llista li {
  position: relative;
  margin: 0;
  padding: 7px 0 7px 26px;
  font-size: 15.5px;
  color: var(--passa-text);
}
.fitxa-inclou li::before,
.fitxa-horaris__llista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--passa-accent);
  border-bottom: 2px solid var(--passa-accent);
  transform: rotate(-45deg);
}
.fitxa-horaris__llista li::before {
  /* Els horaris porten punt, no vist: no és una cosa aconseguida. */
  width: 6px;
  height: 6px;
  top: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--passa-accent);
  transform: none;
}
.fitxa-horaris__nota,
.fitxa-lloc__nota {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--passa-text-2);
}
.fitxa-lloc__seu {
  margin: 0;
  font-family: var(--passa-font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--passa-ink);
}
.fitxa-lloc__adreca { margin: 4px 0 0; color: var(--passa-text); }
.fitxa-lloc__mapa {
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--passa-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
   3 · El resum del final
   --------------------------------------------------------------------- */
.fitxa-resum {
  max-width: var(--passa-container);
  margin: 46px auto 10px;
  padding: 28px 30px;
  background: var(--passa-bg-soft);
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
}
.fitxa-resum__titol {
  font-family: var(--passa-font-heading);
  font-size: 20px;
  color: var(--passa-ink);
  margin: 0 0 18px;
}
.fitxa-resum__dades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 26px;
}
.fitxa-resum__dades li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
}
.fitxa-resum__dades li::before { content: none; }

.fitxa-resum__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--passa-line);
}
.fitxa-resum__preu {
  font-family: var(--passa-font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--passa-ink);
}
.fitxa-resum__preu del { font-size: 17px; font-weight: 500; color: var(--passa-text-2); }
.fitxa-resum__preu ins { text-decoration: none; }
.fitxa-resum__preu .woocommerce-Price-amount { white-space: nowrap; }

.woocommerce a.button.fitxa-resum__boto,
a.button.fitxa-resum__boto {
  margin-left: auto;
  padding: 13px 30px;
  font-size: 15px;
}

@media (max-width: 720px) {
  .fitxa-dades__fila { grid-template-columns: 1fr; gap: 3px; padding: 12px 2px; }
  .fitxa-resum { padding: 22px 20px; margin-top: 34px; }
  .woocommerce a.button.fitxa-resum__boto,
  a.button.fitxa-resum__boto { margin-left: 0; width: 100%; text-align: center; }
}

/* 1/10 (Andrea): distintius de la targeta, a sobre de la foto de la fitxa, a la dreta. */
.woocommerce-product-gallery__image { position: relative; }
.fitxa__distintius {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none;
}
.fitxa__best, .fitxa__soon {
  font-family: var(--passa-font-body); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 7px 11px; border-radius: var(--passa-radius); white-space: nowrap;
}
.fitxa__best { background: var(--passa-purple); color: #fff; }
.fitxa__soon { background: var(--passa-mustard); color: var(--passa-purple-dark); }

/* 1/10 (Eric): els botons «Consulta'ls aquí» (Premium · Estàndard · Bàsic · Teoria · Físiques) anaven
   enganxats. Venen dins del contingut del producte (el wpautop els posa en un <p>); es separen aquí,
   sense tocar el contingut: serveix per a tots els productes que els porten. */
.single-product p:has(> a.passa-btn) { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 28px; }
.single-product a.button.passa-btn { margin: 0 !important; border-radius: var(--passa-radius); padding: 11px 20px; line-height: 1.2; }
.single-product :is(h3, h4):has(+ p > a.passa-btn) { margin-bottom: 12px; }
@media (max-width: 600px) {
  .single-product p:has(> a.passa-btn) { gap: 8px; }
  .single-product a.button.passa-btn { flex: 1 1 calc(50% - 8px); text-align: center; padding: 11px 12px; }
}

/* 1/10 (Eric): Curs Bulevard · ISPC en tres columnes, com a la web vella: logo petit · introducció
   · per què aquest curs. Al mòbil, una sota l'altra amb el logo encara més petit. */
.passa-ispc { display: grid; grid-template-columns: 170px 1fr 1fr; gap: 40px; align-items: start; margin: 28px 0 10px; }
.passa-ispc__logo img, .passa-ispc__logo p { margin: 0; }
.passa-ispc__logo img { width: 100%; max-width: 170px; height: auto; display: block; }
.passa-ispc h3 { margin: 18px 0 10px; font-size: 22px; color: var(--passa-purple); }
.passa-ispc__perque h3 { margin-top: 0; }
.passa-ispc ul { margin: 0; padding-left: 1.1em; }
.passa-ispc li { margin: 0 0 8px; line-height: 1.5; }
.passa-ispc__intro > p:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .passa-ispc { grid-template-columns: 110px 1fr; gap: 24px; }
  .passa-ispc__perque { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .passa-ispc { grid-template-columns: 1fr; gap: 18px; }
  .passa-ispc__logo img { max-width: 90px; }
}

/* =====================================================================
   1/10 (Eric): Packs Prèmium — repàs de disseny. Tot des del tema, sense
   tocar el contingut del producte: si algú torna a desar la fitxa, es manté.
   ===================================================================== */

/* Encapçalaments buits que va deixar la migració (<h2></h2>, <h3></h3>). */
.woocommerce-Tabs-panel--description :is(h2, h3):empty { display: none; }

/* Vídeo: centrat i gran (venia a 300×150 i a l'esquerra). */
.woocommerce-Tabs-panel--description video {
  display: block; width: 100% !important; max-width: 760px !important; height: auto; aspect-ratio: 16 / 9;
  margin: 10px auto 48px; border-radius: 12px; background: #000;
}

/* Les icones (Temari, Psicotècnics…) i el titular de sota: més aire. */
.woocommerce-Tabs-panel--description .passa-icones-curs { margin-bottom: 34px; }
.woocommerce-Tabs-panel--description h3[align=center] { margin: 0 auto 22px; max-width: 820px; line-height: 1.3; }

/* «Si no aproves…»: la marca de la llista sortia com el text «2713» (es va perdre la barra). */
.single-product .pl-land .pl-gar li::before { content: "\2713"; }

/* Preu: a l'HTML la secció de preu no es tanca i «Horaris i ubicació» queda a dins.
   Se separen i la caixa grisa torna a fer l'ample de les altres seccions. */
.single-product .pl-land #pl-preu { padding-bottom: 0; }
.single-product .pl-land #pl-preu > .pl-sec { margin: 44px -22px 0; }
.single-product .pl-land .pl-caixa { margin-left: auto; margin-right: auto; }

/* Horaris: grup a l'esquerra, horari al costat, «Places disponibles» a la dreta. */
.single-product .pl-land .pl-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 10px; text-align: left; }
.single-product .pl-land .pl-fila > strong { min-width: 170px; }
.single-product .pl-land .pl-fila .pl-badge { margin-left: auto; }

/* Mòbil: sense el marc de la pestanya ni el doble coixí, les seccions fan tot l'ample. */
@media (max-width: 767px) {
  /* Mateix pes que la regla del Kadence (.woocommerce div.product .woocommerce-tabs .panel) i una mica més. */
  .woocommerce div.product .woocommerce-tabs:has(.pl-land) { border: 0; }
  .woocommerce div.product .woocommerce-tabs:has(.pl-land) .woocommerce-Tabs-panel--description { padding-left: 0; padding-right: 0; }
  .single-product .pl-land .pl-sec { padding: 34px 16px; }
  .single-product .pl-land #pl-preu > .pl-sec { margin: 36px -16px 0; }
  .single-product .pl-land .pl-fila > strong { min-width: 0; flex-basis: 100%; }
  .single-product .pl-land .pl-fila .pl-badge { margin-left: 0; }
  .woocommerce-Tabs-panel--description video { margin-bottom: 36px; border-radius: 8px; }
  /* «Què inclou el pack»: 2 per fila en lloc d'1 (9 targetes una sota l'altra feien la secció eterna). */
  .single-product .pl-land .pl-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .single-product .pl-land .pl-card { padding: 18px 10px; }
  .single-product .pl-land .pl-card .pl-ico { font-size: 26px; margin-bottom: 6px; }
  .single-product .pl-land .pl-card h5 { font-size: 14px; line-height: 1.25; }
  .single-product .pl-land .pl-card { font-size: 12.5px; line-height: 1.45; }
  /* Preu: «des de 217 €/mes» en una sola línia (l'estil en línia el posa a 32px). */
  .single-product .pl-land .pl-caixa p[style*="32px"] { font-size: 25px !important; white-space: nowrap; }
}

/* =====================================================================
   1/10 (Eric) · Packs Prèmium, segona passada — com a la web vella
   ===================================================================== */

/* Resum: «El curs més complet de Catalunya…» destacat en caixa lila (a la vella anava així). */
.woocommerce-product-details__short-description hr + p {
  background: var(--passa-purple-bg, #EFE8F3);
  border-left: 4px solid var(--passa-purple);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 18px 0 16px;
  color: var(--passa-purple-dark);
}
.woocommerce-product-details__short-description hr + p b { color: var(--passa-purple-dark); }

/* Blocs lila d'icones (Temari, Psicotècnics…): un 40 % més petits i centrats.
   Mateix ample que el vídeo, així queden alineats. */
.woocommerce-Tabs-panel--description .passa-icones-curs { max-width: 740px; margin: 34px auto; gap: 14px; }
@media (max-width: 480px) {
  .woocommerce-Tabs-panel--description .passa-icones-curs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* «Assegura't una formació completa…»: més gran i separat, que destaqui. */
.woocommerce-Tabs-panel--description h3[align=center] {
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.3;
  color: var(--passa-ink, #1c1530);
  max-width: 820px;
  margin: 50px auto 26px;
}

/* Vídeo: amb marc i ombra, com a la vella, i la seva portada (la posa inc/fitxa-curs.php). */
.woocommerce-Tabs-panel--description video {
  max-width: 640px !important;
  border: 6px solid var(--passa-purple-dark, #2a0e3a);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(42, 14, 58, .25);
  object-fit: cover;
}
@media (max-width: 767px) {
  .woocommerce-Tabs-panel--description h3[align=center] { margin: 36px auto 20px; }
  .woocommerce-Tabs-panel--description video { border-width: 4px; border-radius: 10px; }
}

/* 5/10 · Tecnificació: el botó de «3 sessions» (Variation Swatches) diu també el descompte (Andrea/Eric).
   El desplegable ja ho diu pel filtre de inc/comandes-pagament.php; aquests botons no passen per aquell filtre. */
.cfvsw-swatches-option[data-slug="3 sessions"] .cfvsw-swatch-inner::after { content: "\00a0(estalvies 15 €)"; }

/* Places esgotades (6/10). */
.fitxa__soon.fitxa__full { background: var(--passa-purple-dark); color: #fff; }