/* =========================================================
   La Pinyol — PÀGINA CONTACTE (contacta.html)
   Depèn de global.css. El formulari és una maqueta visual
   preparada per al plugin de WordPress.
   ========================================================= */

.ct-hero{
  position:relative;
  background:var(--bg-peach);
  overflow:hidden;
}
.ct-hero__inner{
  position:relative; z-index:2;
  padding-block:72px;
  text-align:center;
}

/* ---- Fons: blobs verds laterals ---- */
.ct-blob{
  position:absolute; top:0; height:100%; width:42%;
  background:var(--bg-mint); z-index:0;
}
.ct-blob--left{  left:0;  border-radius:0 9999px 9999px 0; }
.ct-blob--right{ right:0; border-radius:9999px 0 0 9999px; }

/* ---- Pastilletes decoratives ---- */
.ct-pill{
  position:absolute; z-index:1; top:44%;
  width:200px; height:74px; border-radius:9999px;
  background:#fff6f1;
}
.ct-pill--left{  left:-50px;  transform-origin:left center; }
.ct-pill--right{ right:-50px; transform-origin:right center; }

/* ---- Textos ---- */
.ct-title{ font-size:30px; font-weight:800; color:var(--c-ink); margin:0 0 12px; }
.ct-lead{ font-size:12px; color:var(--c-gray); line-height:20px; max-width:430px; margin:0 auto 30px; }
.ct-servei-tag{
  position:relative; z-index:1;
  display:inline-block; margin:-14px auto 26px;
  padding:8px 16px; border-radius:999px;
  background:var(--bg-mint); color:var(--c-ink);
  font-size:12px; font-weight:700;
}
.ct-servei-tag strong{ color:var(--c-green); font-weight:800; }

/* ---- Formulari ---- */
.ct-form{
  max-width:680px; margin:0 auto;
  display:flex; flex-direction:column; gap:16px;
  text-align:left;
}
.ct-row{ display:flex; gap:16px; }
.ct-row > *{ flex:1; min-width:0; }
.ct-field{
  width:100%; border:0;
  background:var(--c-white);
  border-radius:var(--radius-pill);
  padding:14px 22px;
  font-family:inherit; font-size:13px; color:var(--c-ink);
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.ct-field--area{ border-radius:24px; min-height:70px; resize:vertical; }
.ct-field--select,
.ct-form--plugin select.ct-field{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  cursor:pointer; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 22px center; background-size:12px 8px;
}
.ct-field::placeholder{ color:#9a9a9a; }
.ct-field:focus{ outline:2px solid var(--c-green); outline-offset:1px; }
.ct-submit{ justify-content:center; padding:14px; font-size:13px; }

/* ---- Contact Form 7: corregeix l'embolcall <p>/<br> que afegeix el plugin ---- */
.ct-form--plugin form{ display:flex; flex-direction:column; gap:16px; }
.ct-form--plugin .hidden-fields-container{ display:none; }
/* Files de dues columnes (nom+població, correu+telèfon) */
.ct-form--plugin .ct-row{ display:block; margin:0; }
.ct-form--plugin .ct-row > p{ display:flex; gap:16px; margin:0; width:100%; }
.ct-form--plugin .ct-row > p > br{ display:none; }
.ct-form--plugin .ct-row .wpcf7-form-control-wrap{ flex:1 1 0; min-width:0; }
/* Bloc de select + missatge + botó (CF7 els agrupa en un sol <p>) */
.ct-form--plugin form > p{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; margin:0; }
.ct-form--plugin form > p > br{ display:none; }
.ct-form--plugin form > p > .wpcf7-form-control-wrap{ width:100%; }
.ct-form--plugin .wpcf7-form-control-wrap .ct-field{ width:100%; }
.ct-form--plugin .wpcf7-response-output{ margin:8px 0 0; }
.ct-form--plugin .wpcf7-spinner{ margin:0; }

@media (prefers-reduced-motion: no-preference){
  @keyframes ct-pill-breathe{
    0%,100%{ scale:1 1; }
    50%    { scale:1.15 1; }
  }
  .ct-pill{ animation:ct-pill-breathe 8s ease-in-out infinite; }
  .ct-pill--right{ animation-duration:9.5s; animation-delay:-3s; }
}

/* ---- Responsive ---- */
@media (max-width:640px){
  .ct-row{ flex-direction:column; }
  .ct-blob{ width:60%; opacity:.6; }
  .ct-pill{ display:none; }
}

/* Formulari servit per un plugin (Contact Form 7) que hereta el disseny */
.ct-form--plugin{ max-width:680px; margin:0 auto; text-align:left; }
.ct-form--plugin .wpcf7-form > p{ margin:0 0 16px; }
.ct-form--plugin input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.ct-form--plugin textarea,
.ct-form--plugin select{
  width:100%; border:0; background:var(--c-white);
  border-radius:var(--radius-pill); padding:14px 22px;
  font-family:inherit; font-size:13px; color:var(--c-ink);
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.ct-form--plugin textarea{ border-radius:24px; min-height:70px; resize:vertical; }
.ct-form--plugin input[type=submit]{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-green); color:#fff; border:0; cursor:pointer;
  border-radius:var(--radius-pill); padding:14px 28px; font-size:13px;
  transition:background .2s ease, box-shadow .2s ease;
}
.ct-form--plugin input[type=submit]:hover{ background:#fff; color:var(--c-green); box-shadow:0 0 10px rgba(0,0,0,.12); }