/* ============================================================================
   /contact/ (+ /es/ /it/ /pt/) — "Get in touch" form block.

   2026-08-04: the four contact pages no longer load ANY Tilda form asset.
   The vendored form stack (cover CSS, forms CSS+JS, the page-7998070 block
   bundle, and the base runtime) was deleted; the form is now a plain <form>
   driven by /js/contact-form.js, and every style rule it needs lives here.

   PROVENANCE — every declaration below was extracted from the three deleted
   stylesheets by matching their rules against the live rendered DOM, so this
   file is the exact applicable subset, not a guess. Section headers name the
   file each rule came from. Field classes (.t-input, .t-select, .t-submit,
   .t-input-group, .t-form__*) are deliberately KEPT so the markup — and the
   look — stays byte-comparable with live clickio.com/contact/.

   ONE INTENTIONAL DIFFERENCE from the old vendored build: the cover used to be
   a hard-coded 1000px-tall box that Tilda's cover JS resized at runtime. We
   never vendored that JS, so the box stayed 1000px and the taller localized
   content overflowed it. The cover is now content-sized in CSS
   (min-height:1000px + symmetric padding), which is what live actually renders.
   ============================================================================ */

/* ---------------------------------------------------------------- cover ----
   was: tilda-cover-1.0.min.css (.t-cover / __carrier / __filter / __wrapper)
   The carrier (background image) and the filter (gradient overlay) collapse
   into one element here: the block has no background image, so the overlay
   gradient — #E84253 top -> #4B0467 bottom, per the live inline style — is the
   only thing that was ever visible.                                          */
.cf-cover {
  position: relative;
  width: 100%;
  min-height: 1000px;
  box-sizing: border-box;
  padding: 90px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-image: linear-gradient(180deg, #e84253 0%, #4b0467 100%);
}

/* was: tilda-grid-3.0 .t-container / .t-width_8 (1200px track, 8-of-12 column).
   Reimplemented locally so the block owns its own widths: at >=1200px the
   inner track is 760px (= live's 720px form + 2x20px padding); below that it
   is fluid, which also removes the negative-gutter overflow the grid classes
   caused on the ES page at 390px. */
.cf-cover__block { width: 100%; max-width: 1200px; margin: 0 auto; }
.cf-cover__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  /* The 62px title is one long word in ES/PT ("Contáctenos"). Live lets it
     break mid-word rather than run off the screen; without this it would be
     clipped by the cover's overflow:hidden at 390px. Only affects words that
     genuinely do not fit — ordinary copy still wraps at spaces. */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ------------------------------------------------------- block typography --
   was: tilda-blocks-page7998070.min.css (.t-title/.t-descr/.t-text scale and
   the .t698__* block rules). Kept under the original class names.            */
.t-title { font-family: Inter, Arial, sans-serif; font-weight: 700; color: #283975; }
.t-title_xs { font-size: 42px; line-height: 1.23; }
.t-descr { font-family: Inter, Arial, sans-serif; font-weight: 400; color: #243b52; }
.t-descr_md { font-size: 18px; line-height: 1.55; }
.t-text { font-family: Inter, Arial, sans-serif; font-weight: 400; color: #243b52; }
.t-text_md { font-size: 18px; line-height: 1.55; }
.t-text_xs { font-size: 13px; line-height: 1.55; }

@media screen and (max-width: 1200px) {
  .t-title_xs { font-size: 38px; }
  .t-descr_md { font-size: 16px; }
  .t-text_md { font-size: 16px; }
  .t-text_xs { font-size: 12px; }
}
@media screen and (max-width: 640px) {
  .t-title_xs { font-size: 30px; }
  .t-descr_md { font-size: 14px; line-height: 1.45; }
  .t-text_md { font-size: 14px; line-height: 1.45; }
  .t-text_xs { font-size: 10px; line-height: 1.45; }
}

.t698__title { color: #fff; margin-bottom: 40px; }
.t698__descr { color: #fff; margin-bottom: 50px; }

/* was: the per-record inline <style> that Tilda emitted at the end of the block
   (byte-identical on all four pages, so it lives here once instead of four
   times). The title's own font-size only governs the two leading <br>s — the
   visible words carry an inline font-size:62px, as on live. */
.t698__title { font-weight: 400; font-family: Inter, Arial, sans-serif; }
@media screen and (min-width: 900px) { .t698__title { font-size: 48px; line-height: 1; } }
.t698__descr { font-size: 24px; color: #fff; font-weight: 500; font-family: Inter, Arial, sans-serif; }
.t698__form-bottom-text { color: #fff; margin-top: 30px; margin-bottom: 30px; }
@media screen and (max-width: 640px) {
  .t698__title { margin-bottom: 18px; }
  /* "Contáctenos"/"Contate-nos" carry an inline 62px font-size and are one
     long word, so they broke mid-word ("Contácten / os") on phones; scale
     with the viewport instead. !important beats the inline style. EN/IT
     titles fit at 62px and are left untouched. */
  .t698__title strong:lang(es),
  .t698__title strong:lang(pt) { font-size: clamp(36px, 12.5vw, 62px) !important; }
  .t698__descr { margin-bottom: 30px; }
}

/* --------------------------------------------------------------- fields ----
   was: tilda-forms-1.0.min.css (base) + tilda-blocks-page7998070.min.css
   (the t698 block's 56px-tall / 560px-wide overrides). Merged.               */
.t-form__inputsbox { max-width: 560px; margin: 0 auto; text-align: left; }
.t-input-group { margin-bottom: 20px; }
@media screen and (max-width: 480px) { .t-input-group { margin-bottom: 15px; } }

.t-input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  outline: none;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.33;
}
.t-input-group_ta textarea.t-input { resize: vertical; padding-top: 17px; }
@media screen and (max-width: 640px) { .t-input-group_ta textarea.t-input { padding-top: 12px; } }

.t-select {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: 0 45px 0 20px;
  border: 0;
  outline: none;
  cursor: pointer;
  background: transparent;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.33;
}
.t-select__wrapper { position: relative; }
.t-select__wrapper::after {
  content: " ";
  position: absolute;
  top: 0; bottom: 0; right: 20px;
  margin: auto;
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 5px 0;
  border-color: #000 transparent transparent;
  pointer-events: none;
}
.t-form option { color: #000; }

.t-input-title {
  display: block;
  height: 100%;
  padding-right: 10px;
  padding-bottom: 5px;
  vertical-align: middle;
  color: #fff;
}

/* --------------------------------------------------------------- submit ----
   was: tilda-forms-1.0.min.css .t-submit + the t698 56px/full-width override. */
.t-form__submit {
  display: block;
  height: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
  vertical-align: middle;
}
.t-submit {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  outline: none;
  cursor: pointer;
  background: transparent;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
@media screen and (max-width: 640px) { .t-submit { white-space: normal; } }
/* New: in-flight state. The Tilda engine used its own .t-btn_sending spinner;
   a dimmed, non-interactive button is the equivalent here. */
.t-submit[disabled] { opacity: 0.6; cursor: default; }

/* ------------------------------------------------- messages: error/success --
   was: tilda-forms-1.0.min.css. The per-field .t-input-error box and the
   red summary banner keep their original look; .t-form__errorbox-bottom
   (the duplicate banner Tilda rendered below the button) is gone from the
   markup entirely, so no display:none rule is needed for it any more.        */
.t-input-error {
  display: none;
  margin-top: 5px;
  color: red;
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
}
.t-input-error.is-visible { display: block; }

.t-form__errorbox-wrapper {
  display: none;
  margin-bottom: 20px;
  padding: 10px;
  background: #f95d51;
  text-align: center;
  font-family: Inter, Arial, sans-serif;
}
.t-form__errorbox-wrapper.is-visible { display: block; }
.t-form__errorbox-text {
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px 10px;
  list-style: none;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
}
.t-form__errorbox-item { margin-top: 10px; }
/* Support/mailto link inside the red banner stays legible on the red field. */
.t-form__errorbox-text a { color: #fff; text-decoration: underline; }

.t-form__successbox {
  display: none;
  margin-bottom: 20px;
  padding: 20px;
  background: #62c584;
  color: #fff;
  text-align: center;
  font-family: Inter, Arial, sans-serif;
}
.t-form__successbox.is-visible { display: block; }

/* ------------------------------------------------------------- honeypot ----
   Spam trap (see docs/CONTACT-FORM-JIRA.md §9): off-screen, untabbable and
   hidden from assistive tech. Never use display:none — some bots skip those. */
.cf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ------------------------------------------------------------- turnstile ---
   Cloudflare widget, centered above the submit button. Reserves its own height
   so nothing shifts when the iframe paints. data-size="flexible" (on the
   widget div in each contact page) makes the iframe fill the container width
   (min 300px per Cloudflare docs), so on mobile it lines up with the
   full-width pill inputs instead of floating as a fixed 300x65 box. */
.cf-turnstile-box { margin-bottom: 20px; display: flex; justify-content: center; }
.cf-turnstile { width: 100%; }

/* ------------------------------------------------------------- noscript ----
   JS-off fallback: same mailto the error path offers.                        */
.cf-noscript {
  max-width: 560px;
  margin: 0 auto 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-align: center;
}
.cf-noscript a { color: #fff; text-decoration: underline; }

/* Placeholder colour — was an inline <style> block inside the Tilda record. */
.cf-cover ::-webkit-input-placeholder { color: #0d1240; opacity: 0.5; }
.cf-cover ::-moz-placeholder { color: #0d1240; opacity: 0.5; }
.cf-cover :-ms-input-placeholder { color: #0d1240; opacity: 0.5; }
.cf-cover ::placeholder { color: #0d1240; opacity: 0.5; }