/* =====================================================================
   final-cta.css — Secció de tancament "Et truquem en menys de 24 hores"
   Rèplica de la maqueta (.final-cta .frame), amb els tokens del tema.
   ===================================================================== */

.passa-final-cta {
  width: 100%;
  background: #fff;
  padding: 0;
  margin: 0 !important;
}
.passa-final-cta > .wp-block-group__inner-container {
  max-width: var(--passa-container);
  margin: 0 auto;
  padding: 90px 30px;
}

/* ---- Marc morat ---- */
.passa-final-cta .cta-frame {
  background: var(--passa-purple);
  border-radius: var(--passa-radius);
  padding: 60px 70px;
  color: #fff;
}
/* Dues columnes: text a l'esquerra, targeta del formulari a la dreta. */
.passa-final-cta .cta-frame > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  align-items: center;
}
.passa-final-cta .cta-frame > .wp-block-group__inner-container { padding: 0; margin: 0; }

.passa-final-cta .cta-title {
  font-family: var(--passa-font-heading);
  font-weight: 600;
  font-size: clamp(30px, 3.5vw, 40px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 14px;
}
/* Paraula destacada en el color de la línia activa */
.passa-final-cta .cta-title em {
  font-style: normal;
  color: var(--passa-accent);
}
.passa-final-cta .cta-copy > .wp-block-group__inner-container { padding: 0; margin: 0; }
.passa-final-cta .cta-text {
  font-family: var(--passa-font-body);
  color: rgba(255, 255, 255, .85);
  font-size: 17px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0;
}
.passa-final-cta .cta-legal {
  font-family: var(--passa-font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--passa-text-2);
  margin: 10px 0 0;
}
.passa-final-cta .cta-legal a { color: var(--passa-purple); text-decoration: underline; }
.passa-final-cta .cta-legal a:hover { color: var(--passa-purple-dark); }

/* =====================================================================
   Targeta blanca del formulari (maqueta: .form)
   Els colors i mides viuen aquí, amb els tokens del tema. Ningú ha de tocar
   estils des de l'editor: només els textos.
   ===================================================================== */
.passa-final-cta .cta-form-card {
  background: #fff;
  color: var(--passa-text);
  padding: 32px;
  border-radius: var(--passa-radius);
}
.passa-final-cta .cta-form-card > .wp-block-group__inner-container { padding: 0; margin: 0; }

.passa-final-cta .cta-form-title {
  font-family: var(--passa-font-heading);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--passa-ink);
  margin: 0 0 18px;
}

/* ---- Etiquetes ---- */
:is(.passa-final-cta, .contacte__form) .kb-adv-form-label {
  display: block;
  font-family: var(--passa-font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--passa-text-2);
  margin: 0 0 5px;
  line-height: 1.3;
  padding: 0;
}
:is(.passa-final-cta, .contacte__form) .kb-adv-form-required { color: var(--passa-purple); margin-left: 2px; }

/* ---- Camps ---- */
:is(.passa-final-cta, .contacte__form) .kb-advanced-form input[type="text"],
:is(.passa-final-cta, .contacte__form) .kb-advanced-form input[type="tel"],
:is(.passa-final-cta, .contacte__form) .kb-advanced-form input[type="email"],
:is(.passa-final-cta, .contacte__form) .kb-advanced-form select,
:is(.passa-final-cta, .contacte__form) .kb-advanced-form textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--passa-line);
  border-radius: 2px;
  background-color: #fff;
  color: var(--passa-ink);
  font-family: var(--passa-font-body);
  font-size: 14.5px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
:is(.passa-final-cta, .contacte__form) .kb-advanced-form input::placeholder { color: var(--passa-text-2); opacity: .8; }

:is(.passa-final-cta, .contacte__form) .kb-advanced-form input:focus,
:is(.passa-final-cta, .contacte__form) .kb-advanced-form select:focus,
:is(.passa-final-cta, .contacte__form) .kb-advanced-form textarea:focus {
  outline: 0;
  border-color: var(--passa-purple);
  box-shadow: 0 0 0 3px var(--passa-purple-bg);
  transform: translateY(-1px);
}
:is(.passa-final-cta, .contacte__form) .kb-advanced-form select option { color: var(--passa-ink); }

/* Fletxa dels desplegables. Va com a imatge de fons (SVG en línia, sense
   fitxer ni petició extra) perquè el triangle natiu del sistema operatiu no
   es pot pintar amb els colors de marca. El color va escrit al SVG: si es
   canvia el gris del tema, cal canviar-lo també a %238B859F. */
:is(.passa-final-cta, .contacte__form) .kb-advanced-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238B859F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
  padding-right: 36px;
}
/* En obrir-lo, la fletxa segueix el morat del focus. */
:is(.passa-final-cta, .contacte__form) .kb-advanced-form select:focus {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234c1b69' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- Compactar ----
   Kadence separa els camps amb gap:1.6em (uns 23 px) i a sobre hi sumàvem el
   marge de l'etiqueta. Amb un sol separador de 13 px el formulari cap sense
   allargar la targeta. */
:is(.passa-final-cta, .contacte__form) .kb-advanced-form { gap: 13px; }

/* ---- Casella de consentiment ----
   La casella va a l'esquerra del text, no a sota. S'aconsegueix amb posició
   absoluta i no amb flex perquè <legend> es comporta de manera especial dins
   de contenidors flex i no és fiable entre navegadors. */
:is(.passa-final-cta, .contacte__form) .wp-block-kadence-advanced-form-accept fieldset {
  border: 0;
  margin: 2px 0 0;
  padding: 0 0 0 25px;
  position: relative;
}
:is(.passa-final-cta, .contacte__form) .wp-block-kadence-advanced-form-accept .kb-radio-check-item {
  position: absolute;
  left: 0;
  top: 1px;
  margin: 0;
}
:is(.passa-final-cta, .contacte__form) .wp-block-kadence-advanced-form-accept .kb-radio-check-item label { display: none; }
:is(.passa-final-cta, .contacte__form) .wp-block-kadence-advanced-form-accept legend.kb-adv-form-label {
  font-size: 12px;
  line-height: 1.5;
  color: var(--passa-text-2);
  margin: 0;
  padding: 0;
}
/* Nota d'ajuda sota la casella */
:is(.passa-final-cta, .contacte__form) .kb-adv-form-help {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--passa-text-2);
  margin: 4px 0 0;
  font-style: normal;
}
:is(.passa-final-cta, .contacte__form) .wp-block-kadence-advanced-form-accept legend a {
  color: var(--passa-purple);
  text-decoration: underline;
}
:is(.passa-final-cta, .contacte__form) .wp-block-kadence-advanced-form-accept input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--passa-purple);
  margin: 0 8px 0 0;
  vertical-align: middle;
}

/* ---- Botó: groc de marca sobre morat profund, com a la maqueta ---- */
:is(.passa-final-cta, .contacte__form) .kb-advanced-form .kb-submit-field { width: 100%; }
:is(.passa-final-cta, .contacte__form) .kb-advanced-form .kb-adv-form-submit-button,
:is(.passa-final-cta, .contacte__form) .kb-advanced-form .kb-adv-form-submit-button.kb-btn-global-fill {
  width: 100%;
  justify-content: center;
  margin-top: 14px;
  padding: 13px;
  border: 0;
  border-radius: 2px;
  background: var(--passa-mustard);
  color: var(--passa-purple-dark);
  font-family: var(--passa-font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
:is(.passa-final-cta, .contacte__form) .kb-advanced-form .kb-adv-form-submit-button:hover,
:is(.passa-final-cta, .contacte__form) .kb-advanced-form .kb-adv-form-submit-button.kb-btn-global-fill:hover {
  filter: brightness(.92);
  transform: translateY(-1px);
}

/* ---- Avisos de validació ---- */
:is(.passa-final-cta, .contacte__form) .kb-advanced-form .kb-adv-form-submit-button .kt-btn-inner-text { color: inherit; }

:is(.passa-final-cta, .contacte__form) .kb-adv-form-message { border-radius: 2px; font-size: 14px; padding: 12px 14px; }
:is(.passa-final-cta, .contacte__form) .kb-advanced-form input.kb-field-error,
:is(.passa-final-cta, .contacte__form) .kb-advanced-form select.kb-field-error { border-color: #b3261e; }

/* ====================================================================== */
@media (max-width: 1023px) {
  .passa-final-cta .cta-frame > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .passa-final-cta .cta-frame { padding: 36px; }
}
@media (max-width: 768px) {
  /* La targeta NO va de vora a vora: queda encaixada dins del marc morat, amb
     una franja de color als costats. Els 14 px del marc són el que la separa
     de la pantalla; la secció no hi posa res perquè no se sumin dos coixins,
     que és el que abans deixava els camps estrets. Res d'això toca
     l'escriptori. */
  .passa-final-cta > .wp-block-group__inner-container { padding: 56px 0; }
  .passa-final-cta .cta-frame { padding: 30px 14px; }
  .passa-final-cta .cta-form-card { padding: 22px 20px; }
  /* El text morat de sobre s'alinea amb la targeta. */
  .passa-final-cta .cta-copy > .wp-block-group__inner-container { padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.passa-final-cta, .contacte__form) .kb-advanced-form input:focus,
  :is(.passa-final-cta, .contacte__form) .kb-advanced-form select:focus,
  :is(.passa-final-cta, .contacte__form) .kb-advanced-form .kb-adv-form-submit-button:hover { transform: none; }
}

/* 21/10 · Andrea: foto de fons al marc del formulari (promoció de Mossos/PL, girada en mirall),
   difuminada a negre-lila. Fitxers a assets/img/ (girats amb canvas: cta-foto/flip.js a pwtools).
   Receta: /opt/pasarela-dev/eines/portada-escriptori/cta-fons.css */
.passa-final-cta .cta-frame {
  background-color: var(--passa-purple-dark);
  background-image:
    linear-gradient(100deg, rgba(42,14,58,.80) 0%, rgba(58,20,82,.84) 45%, rgba(42,14,58,.93) 100%),
    url("img/cta-mossos-1536.webp");
  background-size: cover;
  background-position: center 30%;
}
@media (max-width: 900px) {
  .passa-final-cta .cta-frame {
    background-image:
      linear-gradient(180deg, rgba(42,14,58,.82) 0%, rgba(42,14,58,.92) 100%),
      url("img/cta-mossos-900.webp");
  }
}