/* ==========================================================================
   Cause We Care Portugal - authored kit stylesheet
   causewecare.pt  |  replaces what the archive did not keep
   --------------------------------------------------------------------------
   The Wayback crawl of this domain stored 44 documents and not one stylesheet.
   Three kinds of CSS were lost and only two of them are recoverable:

     * hello-elementor 3.3.0 + elementor 3.29.2 -> reinstalled verbatim from the
       official releases (ccp_02_framework.py). NOT re-authored here.
     * elementor-pro 3.29.2 (21 sheets, paid, no public release) -> the widget
       rules this site actually uses are hand-authored below, marked [PRO].
     * uploads/elementor/css/post-*.css - the kit palette, the typography and the
       per-page geometry. Generated per page, genuinely gone. Authored below.

   EVIDENCE FOR THE PALETTE. #5d755c is the site's own: it is the value the owner
   typed into the booking plugin (--bookly-main-color) and it survives inline on
   every capture. #ffab00 is the accent of the Envato template kit the site was
   built on, whose customizer.css also survives inline. The five
   "Green-Aesthetic-Watercolor-Scenery" wallpapers name the direction.

   EVIDENCE FOR THE TYPE. Ten families were self-hosted and all 404, so which
   family sat on which element is unrecoverable. What IS recoverable is which
   were loaded GLOBALLY: Roboto, Roboto Slab, Montserrat, Work Sans and Alfa Slab
   One appear on 20 of the 21 interior captures (i.e. from the kit), while Syne,
   Poppins, Pontano Sans, Cabin and the rest appear on a handful (per-page
   overrides). Three of the five global families are used here and the rest are
   dropped: Roboto Slab for headings, Work Sans for copy, Montserrat for the
   uppercase labels the copy itself is written in ("SOBRE NOS", "OS NOSSOS
   SERVICOS"). Self-hosted; no fonts.googleapis.com call ships.

   HERO BACKGROUNDS ARE DESIGNED, NOT RESTORED. Elementor stored section
   background-image urls inside post-*.css, so we cannot even enumerate what the
   heroes were. The .ccp-hero treatment below is new work.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */
:root {
  --ccp-green:       #5d755c;   /* the owner's own brand value */
  --ccp-green-dark:  #45593f;
  --ccp-green-deep:  #2b3a29;
  --ccp-green-tint:  #e7eee2;
  --ccp-green-wash:  #f4f7f0;
  --ccp-amber:       #ffab00;   /* template-kit accent, used sparingly */
  --ccp-ink:         #24301f;
  --ccp-body:        #4b5648;
  --ccp-muted:       #78846f;
  --ccp-cream:       #fcfbf7;
  --ccp-line:        rgba(93,117,92,.20);

  --ccp-serif: "Roboto Slab", Georgia, "Times New Roman", serif;
  --ccp-sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ccp-label: "Montserrat", var(--ccp-sans);

  --ccp-radius: 18px;
  --ccp-radius-sm: 10px;
  --ccp-shadow: 0 14px 34px -22px rgba(43,58,41,.55);
  --ccp-shadow-lg: 0 24px 54px -28px rgba(43,58,41,.5);
  --ccp-pad: clamp(16px, 4vw, 28px);

  /* Elementor globals the lost kit stylesheet used to define */
  --container-max-width: 1140px;
  --widgets-spacing: 22px;
  --widgets-spacing-row: 22px;
  --widgets-spacing-column: 22px;
  --e-global-color-primary: #5d755c;
  --e-global-color-secondary: #45593f;
  --e-global-color-text: #4b5648;
  --e-global-color-accent: #ffab00;
}

/* --------------------------------------------------- 2. page ground + base */
html { scroll-behavior: smooth; }
body {
  background: var(--ccp-cream);
  color: var(--ccp-body);
  font-family: var(--ccp-sans);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body a { color: var(--ccp-green-dark); }
body a:hover { color: var(--ccp-green); }
img { max-width: 100%; height: auto; }
::selection { background: var(--ccp-green-tint); color: var(--ccp-green-deep); }

.skip-link.screen-reader-text {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ccp-green); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link.screen-reader-text:focus { left: 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ccp-amber); outline-offset: 2px; border-radius: 4px;
}

/* --------------------------------------------- 3. Elementor container fixes
   .e-con reads its display and direction from custom properties that ONLY the
   per-element post-*.css ever set. With that file gone `display:var(--display)`
   is invalid-at-computed-value and every flex container in the header, the
   footer and every blog article collapsed to `display:inline`. These are the
   defaults Elementor itself would have written. */
.e-con, .e-con > .e-con-inner {
  --display: flex;
  --flex-direction: column;
  --align-items: stretch;
  --justify-content: flex-start;
  --flex-wrap: nowrap;
  --align-content: flex-start;
  --justify-items: stretch;
  --container-default-padding-top: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
  --container-default-padding-right: 0px;
}
.e-con.e-parent { padding-inline: var(--ccp-pad); }
.e-con.e-parent > .e-con-inner,
.e-con.e-con-boxed > .e-con-inner { max-width: var(--container-max-width); }

/* -------------------------------------------------------- 4. section rhythm */
.elementor-section.elementor-top-section { padding-block: clamp(40px, 5vw, 72px); }
.elementor-section.elementor-inner-section { padding-block: 0; }
.elementor-section > .elementor-container { padding-inline: var(--ccp-pad); }
.elementor-column > .elementor-widget-wrap.elementor-element-populated { padding: 0; }
.elementor-column > .elementor-widget-wrap { gap: 0; }
.elementor-column + .elementor-column { padding-inline-start: clamp(0px, 2vw, 26px); }

/* Sections the capture records as having had a background_background. Which
   colour or picture is unrecoverable, so the restore gives the page a designed
   rhythm instead: every other such band gets a soft sage wash. */
.ccp-band { background: var(--ccp-green-wash); }
.ccp-band + .ccp-band { background: transparent; }

/* Elementor's own vertical spacing between widgets */
.elementor-widget:not(:last-child) { margin-block-end: var(--widgets-spacing); }

/* --------------------------------------------------------- 5. typography */
.elementor-heading-title {
  font-family: var(--ccp-serif);
  color: var(--ccp-ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1.elementor-heading-title { font-size: clamp(2.05rem, 4.4vw, 3.3rem); }
h2.elementor-heading-title { font-size: clamp(1.65rem, 3.1vw, 2.4rem); }
h3.elementor-heading-title { font-size: clamp(1.32rem, 2.2vw, 1.72rem); }
h4.elementor-heading-title { font-size: clamp(1.12rem, 1.7vw, 1.32rem); }
h5.elementor-heading-title { font-size: 1.06rem; }
h6.elementor-heading-title {
  font-family: var(--ccp-label);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ccp-green);
}
/* An all-caps heading in the copy is an eyebrow, whatever tag it was given. */
.ccp-eyebrow .elementor-heading-title {
  font-family: var(--ccp-label);
  font-size: .78rem !important;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ccp-green);
}
/* A heading that immediately follows another is the deck line under it. */
.ccp-deck .elementor-heading-title {
  font-family: var(--ccp-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.1rem) !important;
  line-height: 1.72;
  letter-spacing: 0;
  color: var(--ccp-body);
}

.elementor-widget-text-editor { font-size: 1rem; }
.elementor-widget-text-editor p { margin: 0 0 1.05em; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor strong, .elementor-widget-text-editor b { color: var(--ccp-ink); }
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol { margin: 0 0 1.05em; padding-inline-start: 1.25em; }
.elementor-widget-text-editor li { margin-bottom: .4em; }

/* ------------------------------------------------------------- 6. buttons */
.elementor-button,
.elementor-button-link,
a.elementor-button, button.elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  background: var(--ccp-green); color: #fff;
  border: 1px solid var(--ccp-green); border-radius: 999px;
  font-family: var(--ccp-label); font-weight: 600; font-size: .82rem;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  padding: .95em 2.05em; line-height: 1.15;
  box-shadow: 0 10px 22px -16px rgba(43,58,41,.9);
  transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
  cursor: pointer;
}
.elementor-button:hover, .elementor-button:focus-visible {
  background: var(--ccp-green-deep); border-color: var(--ccp-green-deep);
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 16px 26px -16px rgba(43,58,41,.95);
}
.elementor-button.elementor-size-sm { padding: .78em 1.6em; font-size: .76rem; }
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl { padding: 1.08em 2.6em; font-size: .88rem; }
.elementor-button-wrapper { line-height: 1; }
.elementor-align-center .elementor-button-wrapper,
.elementor-widget-button.elementor-align-center { text-align: center; }
.elementor-align-right  .elementor-button-wrapper { text-align: right; }
/* Elementor's hover animations need no JS - they are pure CSS - but they are
   distracting on a health site, so only the lift above is kept. */
.elementor-animation-float:hover, .elementor-animation-sink:hover { transform: translateY(-2px); }

/* --------------------------------------------------------- 7. site header */
header.elementor-location-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(252,251,247,.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--ccp-line);
}
header.elementor-location-header.ccp-stuck { box-shadow: 0 10px 26px -22px rgba(43,58,41,.9); }
header.elementor-location-header > .e-con.e-parent {
  --flex-direction: row;
  --align-items: center;
  --justify-content: space-between;
  --flex-wrap: nowrap;
  max-width: 1240px; margin-inline: auto;
  padding-block: 10px; gap: 20px;
}
header.elementor-location-header .e-con.e-child {
  --flex-direction: row;
  --align-items: center;
  --justify-content: flex-end;
  --flex-wrap: nowrap;
  gap: 14px; width: auto;
}
header.elementor-location-header .e-con.e-child:first-child { --justify-content: flex-start; }
header.elementor-location-header .elementor-widget { margin-block-end: 0 !important; width: auto; }
header .elementor-widget-theme-site-logo img,
header .elementor-widget-theme-site-logo a { display: block; }
header .elementor-widget-theme-site-logo img { width: auto; height: 58px; }

/* ---------------------------------------------- 8. [PRO] nav-menu widget
   elementor-pro/assets/css/widget-nav-menu.min.css is a paid file with no public
   release. These are the rules this site's markup needs, written from scratch. */
.elementor-nav-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.elementor-nav-menu li { position: relative; list-style: none; }
.elementor-nav-menu a.elementor-item {
  display: block; position: relative;
  padding: 10px 15px;
  font-family: var(--ccp-label); font-size: .8rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ccp-ink); text-decoration: none;
  transition: color .2s ease;
}
.elementor-nav-menu a.elementor-item:hover { color: var(--ccp-green); }
/* e--pointer-underline is the pointer style the markup declares */
.e--pointer-underline .elementor-item::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px;
  background: var(--ccp-green); transform: scaleX(0); transform-origin: left;
  transition: transform .24s ease;
}
.e--pointer-underline .elementor-item:hover::after,
.e--pointer-underline .elementor-item.elementor-item-active::after { transform: scaleX(1); }
.elementor-nav-menu a.elementor-item-active { color: var(--ccp-green); }

/* burger: hidden until the layout actually needs it */
.elementor-menu-toggle {
  display: none;
  width: 46px; height: 46px; flex: 0 0 46px;
  align-items: center; justify-content: center;
  background: var(--ccp-green-tint); color: var(--ccp-green-deep);
  border: 0; border-radius: 12px; cursor: pointer; padding: 0;
}
.elementor-menu-toggle svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.elementor-menu-toggle .ccp-nav-icon--close,
.elementor-menu-toggle[aria-expanded="true"] .ccp-nav-icon--open { display: none; }
.elementor-menu-toggle[aria-expanded="true"] .ccp-nav-icon--close { display: block; }
.elementor-menu-toggle[aria-expanded="true"] { background: var(--ccp-green); color: #fff; }

/* the mobile drawer - a real drawer, opened by ccp-ui.js */
nav.elementor-nav-menu--dropdown {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ccp-cream);
  border-bottom: 1px solid var(--ccp-line);
  box-shadow: var(--ccp-shadow);
  padding: 8px 0 14px;
}
nav.elementor-nav-menu--dropdown.ccp-open { display: block; }
nav.elementor-nav-menu--dropdown .elementor-nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
nav.elementor-nav-menu--dropdown a.elementor-item {
  padding: 14px var(--ccp-pad); font-size: .92rem; letter-spacing: .05em;
  border-bottom: 1px solid var(--ccp-line);
}
nav.elementor-nav-menu--dropdown a.elementor-item::after { content: none; }

/* ------------------------------------------------------------- 9. the hero
   Designed, not restored: the section background-image lived in post-*.css and
   is not recoverable, nor even enumerable. */
.ccp-hero {
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(255,171,0,.14), transparent 58%),
    radial-gradient(110% 100% at 8% 96%, rgba(93,117,92,.28), transparent 62%),
    linear-gradient(168deg, #eef3e8 0%, #e2ebdb 52%, #d8e4d0 100%);
  padding-block: clamp(58px, 8.5vw, 116px) !important;
  overflow: hidden;
}
.ccp-hero::after {                      /* soft watercolour edge, pure CSS */
  content: ""; position: absolute; inset: auto -10% -42% -10%; height: 62%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(252,251,247,.95), transparent 70%);
  z-index: -1;
}
.ccp-hero .elementor-heading-title { color: var(--ccp-green-deep); }
.ccp-hero .ccp-deck .elementor-heading-title { color: #46523f; max-width: 62ch; }
.ccp-hero.ccp-hero-photo { background-size: cover; background-position: center; }
.ccp-hero.ccp-hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(170deg, rgba(238,243,232,.93), rgba(216,228,208,.88));
}

/* ------------------------------------------------- 10. cards and icon boxes */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  background: #fff; border: 1px solid var(--ccp-line); border-radius: var(--ccp-radius);
  padding: 26px 24px; height: 100%;
  box-shadow: var(--ccp-shadow);
  transition: transform .24s ease, box-shadow .24s ease;
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
  transform: translateY(-3px); box-shadow: var(--ccp-shadow-lg);
}
.elementor-icon-box-title, .elementor-icon-box-title a {
  font-family: var(--ccp-serif); font-size: 1.22rem; font-weight: 700;
  color: var(--ccp-ink); margin: 0 0 .5em; text-decoration: none; display: block;
}
.elementor-icon-box-description { margin: 0; color: var(--ccp-body); font-size: .98rem; }
.elementor-icon-box-icon { margin-bottom: 14px; }
.elementor-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ccp-green); font-size: 26px;
}
.elementor-widget-icon .elementor-icon-wrapper { line-height: 1; }
.elementor-icon svg { width: 1em; height: 1em; fill: currentColor; }
.elementor-view-stacked .elementor-icon {
  background: var(--ccp-green); color: #fff; width: 2em; height: 2em; border-radius: 50%;
}
.elementor-view-framed .elementor-icon {
  border: 2px solid var(--ccp-green); width: 2em; height: 2em; border-radius: 50%;
}

/* ------------------------------------------------------- 11. images, media */
.elementor-widget-image img { border-radius: var(--ccp-radius); display: block; }
.elementor-widget-image figure { margin: 0; }
.elementor-widget-image figcaption {
  font-size: .84rem; color: var(--ccp-muted); text-align: center; padding-top: .6em;
}
.elementor-widget-theme-post-featured-image img {
  border-radius: var(--ccp-radius); width: 100%; object-fit: cover; max-height: 460px;
}

/* --------------------------------------------------------- 12. divider */
.elementor-widget-divider { --divider-color: var(--ccp-green); }
.elementor-widget-divider .elementor-divider-separator {
  border-block-start: 3px solid var(--ccp-green);
  width: 58px; display: block;
}
.elementor-widget-divider .elementor-divider { display: flex; }
.elementor-widget-divider.elementor-widget__width-auto { display: block; }

/* ------------------------------------------------------ 13. icon lists */
.elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.elementor-icon-list-item {
  display: flex; align-items: flex-start; gap: .6em;
  margin-bottom: .55em; color: var(--ccp-body);
}
.elementor-icon-list-item > a { display: flex; align-items: flex-start; gap: .6em;
  color: inherit; text-decoration: none; }
.elementor-icon-list-item:hover > a { color: var(--ccp-green); }
.elementor-icon-list-icon { color: var(--ccp-green); flex: 0 0 auto; line-height: 1.7; }
.elementor-icon-list-icon svg { width: .95em; height: .95em; fill: currentColor; }
.elementor-inline-items { display: flex; flex-wrap: wrap; gap: .4em 1.5em; }
.elementor-inline-items .elementor-icon-list-item { margin-bottom: 0; }

/* --------------------------------------------- 14. [PRO] form widget
   elementor-pro/assets/css/widget-form.min.css, hand-authored. */
.elementor-form .elementor-form-fields-wrapper {
  display: flex; flex-wrap: wrap; margin-inline: -8px;
}
.elementor-field-group { padding-inline: 8px; margin-bottom: 16px; flex: 0 0 100%; max-width: 100%; }
.elementor-field-group.elementor-col-50 { flex-basis: 50%; max-width: 50%; }
.elementor-field-group.elementor-col-33 { flex-basis: 33.333%; max-width: 33.333%; }
.elementor-field-group.elementor-col-25 { flex-basis: 25%; max-width: 25%; }
.elementor-field-group > label,
.elementor-field-label {
  display: block; margin-bottom: 6px;
  font-family: var(--ccp-label); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ccp-green-deep);
}
.elementor-field-textual,
.elementor-form input[type="text"], .elementor-form input[type="email"],
.elementor-form input[type="tel"],  .elementor-form input[type="date"],
.elementor-form input[type="time"], .elementor-form input[type="number"],
.elementor-form select, .elementor-form textarea {
  width: 100%; box-sizing: border-box;
  background: #fff; color: var(--ccp-ink);
  border: 1px solid var(--ccp-line); border-radius: 12px;
  padding: .82em 1em; font-family: var(--ccp-sans); font-size: 1rem; line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.elementor-field-textual:focus, .elementor-form select:focus, .elementor-form textarea:focus {
  outline: none; border-color: var(--ccp-green);
  box-shadow: 0 0 0 3px rgba(93,117,92,.16);
}
.elementor-form textarea { min-height: 140px; resize: vertical; }
.elementor-form select { appearance: none; padding-inline-end: 2.4em;
  background-image: linear-gradient(45deg, transparent 50%, var(--ccp-green) 50%),
                    linear-gradient(135deg, var(--ccp-green) 50%, transparent 50%);
  background-position: calc(100% - 20px) 1.25em, calc(100% - 14px) 1.25em;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.elementor-form ::placeholder { color: var(--ccp-muted); opacity: 1; }
.e-form__buttons { display: flex; align-items: flex-end; }
.elementor-field-type-submit .elementor-button { width: 100%; }
.elementor-button-align-stretch .e-form__buttons .elementor-button { width: 100%; }
.elementor-field-type-acceptance,
.elementor-field-subgroup { display: flex; align-items: flex-start; gap: .6em; font-size: .92rem; }
.elementor-field-subgroup input[type="checkbox"],
.elementor-field-subgroup input[type="radio"] { margin-top: .35em; accent-color: var(--ccp-green); }
.elementor-field-type-html { color: var(--ccp-body); }
.elementor-field-type-html h4 {
  font-family: var(--ccp-label); font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ccp-green);
  margin: .6em 0 0;
}

/* --------------------------------------- 15. [PRO] price table widget */
.elementor-price-table {
  background: #fff; border: 1px solid var(--ccp-line); border-radius: var(--ccp-radius);
  overflow: hidden; box-shadow: var(--ccp-shadow); height: 100%;
  display: flex; flex-direction: column; text-align: center;
}
.elementor-price-table__header { background: var(--ccp-green); color: #fff; padding: 26px 22px 20px; }
.elementor-price-table__heading {
  font-family: var(--ccp-serif); font-size: 1.16rem; font-weight: 700; color: #fff; margin: 0;
}
.elementor-price-table__subheading {
  display: block; margin-top: .45em;
  font-family: var(--ccp-label); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.86);
}
.elementor-price-table__price {
  display: flex; align-items: flex-start; justify-content: center; gap: .1em;
  padding: 24px 20px 8px; color: var(--ccp-green-deep);
  font-family: var(--ccp-serif); font-weight: 700; line-height: 1;
}
.elementor-price-table__currency { font-size: 1.5rem; margin-top: .35em; }
.elementor-price-table__integer-part { font-size: 3.1rem; }
.elementor-price-table__after-price { display: flex; flex-direction: column; align-items: flex-start;
  margin-top: .5em; }
.elementor-price-table__fractional-part { font-size: 1.3rem; }
.elementor-price-table__period {
  font-family: var(--ccp-label); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ccp-muted);
}
.elementor-price-table__features-list {
  list-style: none; margin: 0; padding: 14px 24px 22px; text-align: left; flex: 1 1 auto;
}
.elementor-price-table__features-list li { margin-bottom: .6em; }
.elementor-price-table__feature-inner { display: flex; align-items: flex-start; gap: .6em; }
.elementor-price-table__feature-inner svg { width: 1em; height: 1em; margin-top: .35em;
  fill: var(--ccp-green); flex: 0 0 auto; }
.elementor-price-table__footer { padding: 0 24px 26px; }
.elementor-price-table__footer .elementor-price-table__button { width: 100%; }
.elementor-price-table__additional_info {
  font-size: .86rem; color: var(--ccp-muted); padding: 0 24px 20px; margin: 0;
}
.elementor-price-table__ribbon { display: none; }

/* ------------------------------------------- 16. [PRO] posts / post-info */
.elementor-posts-container.elementor-grid {
  display: grid; gap: 34px 30px;
  grid-template-columns: repeat(var(--ccp-cols, 3), minmax(0, 1fr));
}
.elementor-grid-1 .elementor-posts-container { --ccp-cols: 1; }
.elementor-grid-2 .elementor-posts-container { --ccp-cols: 2; }
.elementor-grid-3 .elementor-posts-container { --ccp-cols: 3; }
.elementor-grid-4 .elementor-posts-container { --ccp-cols: 4; }
.elementor-post {
  background: #fff; border: 1px solid var(--ccp-line); border-radius: var(--ccp-radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--ccp-shadow); transition: transform .24s ease, box-shadow .24s ease;
}
.elementor-post:hover { transform: translateY(-4px); box-shadow: var(--ccp-shadow-lg); }
.elementor-post__thumbnail { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ccp-green-tint); }
.elementor-post__thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; border-radius: 0; }
.elementor-post:hover .elementor-post__thumbnail img { transform: scale(1.04); }
.elementor-post__text { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1 1 auto;
  text-align: left; }
.elementor-post__title { margin: 0 0 .5em; font-family: var(--ccp-serif); font-size: 1.14rem;
  font-weight: 700; line-height: 1.3; }
.elementor-post__title a { color: var(--ccp-ink); text-decoration: none; }
.elementor-post__title a:hover { color: var(--ccp-green); }
.elementor-post__excerpt p { margin: 0 0 1em; color: var(--ccp-body); font-size: .96rem; }
.elementor-post__meta-data {
  font-family: var(--ccp-label); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ccp-muted);
  margin-top: auto; padding-top: .6em;
}
.elementor-post__read-more {
  align-self: flex-start; margin-top: .8em;
  font-family: var(--ccp-label); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ccp-green);
  text-decoration: none; border-bottom: 2px solid var(--ccp-amber); padding-bottom: 2px;
}
.elementor-posts--align-center .elementor-post__text { text-align: left; }

.elementor-post-info { justify-content: center; }
.elementor-post-info__item {
  font-family: var(--ccp-label); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ccp-muted);
}
.elementor-post-info__terms-list-item {
  background: var(--ccp-green-tint); color: var(--ccp-green-deep);
  padding: .3em .9em; border-radius: 999px;
}

/* ------------------------------------ 17. single post body (theme widgets) */
.elementor-widget-theme-post-title .elementor-heading-title {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
}
.elementor-widget-theme-post-content { font-size: 1.03rem; }
.elementor-widget-theme-post-content h2 {
  font-family: var(--ccp-serif); font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  color: var(--ccp-ink); margin: 1.8em 0 .55em; line-height: 1.25;
}
.elementor-widget-theme-post-content h3 {
  font-family: var(--ccp-serif); font-size: 1.28rem; color: var(--ccp-ink);
  margin: 1.5em 0 .5em;
}
.elementor-widget-theme-post-content p { margin: 0 0 1.15em; }
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol { margin: 0 0 1.15em; padding-inline-start: 1.3em; }
.elementor-widget-theme-post-content li { margin-bottom: .45em; }
.elementor-widget-theme-post-content img { border-radius: var(--ccp-radius); }
.elementor-widget-theme-post-content blockquote {
  margin: 1.6em 0; padding: .2em 0 .2em 1.3em;
  border-inline-start: 4px solid var(--ccp-amber);
  font-family: var(--ccp-serif); font-size: 1.1rem; color: var(--ccp-ink);
}
/* the article column must not run the full 1140px */
.elementor-widget-theme-post-content > *,
.elementor-widget-theme-post-title,
.elementor-widget-post-info { max-width: 74ch; margin-inline: auto; }

/* ------------------------------------------------- 18. toggle / accordion */
.elementor-toggle .elementor-toggle-item + .elementor-toggle-item { margin-top: 10px; }
.elementor-toggle .elementor-tab-title {
  background: #fff; border: 1px solid var(--ccp-line); border-radius: var(--ccp-radius-sm);
  padding: 16px 20px; cursor: pointer;
  display: flex; align-items: flex-start; gap: .7em;
  font-family: var(--ccp-serif); font-weight: 700; font-size: 1.02rem; color: var(--ccp-ink);
  transition: background .2s ease, border-color .2s ease;
}
.elementor-toggle .elementor-tab-title:hover { border-color: var(--ccp-green); }
.elementor-toggle .elementor-tab-title.elementor-active {
  background: var(--ccp-green-tint); border-color: var(--ccp-green);
  border-end-start-radius: 0; border-end-end-radius: 0;
}
.elementor-toggle .elementor-toggle-icon { color: var(--ccp-green); flex: 0 0 auto; margin-top: .2em; }
.elementor-toggle .elementor-toggle-icon svg { width: .8em; height: .8em; fill: currentColor; }
.elementor-toggle .elementor-toggle-icon-closed,
.elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon-opened { display: inline-block; }
.elementor-toggle .elementor-toggle-icon-opened,
.elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon-closed { display: none; }
.elementor-toggle .elementor-tab-content {
  display: none;
  background: #fff; border: 1px solid var(--ccp-green); border-top: 0;
  border-end-start-radius: var(--ccp-radius-sm); border-end-end-radius: var(--ccp-radius-sm);
  padding: 4px 20px 20px;
}
.elementor-toggle .elementor-tab-content.elementor-active { display: block; }

/* ---------------------------------------------------------- 19. tabs */
.elementor-tabs-wrapper { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.elementor-tabs .elementor-tab-title {
  padding: 11px 22px; border-radius: 999px; cursor: pointer;
  background: var(--ccp-green-tint); color: var(--ccp-green-deep);
  font-family: var(--ccp-label); font-size: .78rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; border: 0;
  transition: background .2s ease, color .2s ease;
}
.elementor-tabs .elementor-tab-title.elementor-active { background: var(--ccp-green); color: #fff; }
.elementor-tabs .elementor-tab-content { display: none; }
.elementor-tabs .elementor-tab-content.elementor-active { display: block; }
/* The pill row (.elementor-tabs-wrapper) holds the DESKTOP titles and Elementor's own stylesheet
   hides it below 768px, handing the labels over to the .elementor-tab-mobile-title copies that sit
   interleaved with the panels. Hiding those unconditionally - which this rule used to do - left
   /programa-jovem/ at 390px with three panels and NOT ONE label: the visitor saw an unnamed box of
   bullets and could not reach the other two offerings at all. Scope the hide to the desktop
   breakpoint, exactly like the upstream widget CSS does. */
@media (min-width: 768px) {
  .elementor-tabs .elementor-tab-mobile-title { display: none; }
}
@media (max-width: 767px) {
  .elementor-tabs-wrapper { margin-bottom: 0; }
  .elementor-tabs .elementor-tab-mobile-title { display: block; margin: 0 0 8px; }
  .elementor-tabs .elementor-tab-content.elementor-active { margin-bottom: 8px; }
}

/* ------------------------------------ 20. testimonial + [PRO] carousels */
.elementor-testimonial-wrapper, .elementor-testimonial {
  background: #fff; border: 1px solid var(--ccp-line); border-radius: var(--ccp-radius);
  padding: 26px 26px 22px; box-shadow: var(--ccp-shadow); height: 100%;
}
.elementor-testimonial-content, .elementor-testimonial__text {
  font-family: var(--ccp-serif); font-size: 1.03rem; color: var(--ccp-ink); line-height: 1.6;
}
.elementor-testimonial-name, .elementor-testimonial__name {
  display: block; margin-top: .9em;
  font-family: var(--ccp-label); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ccp-green);
}
.elementor-testimonial-job, .elementor-testimonial__title { font-size: .86rem; color: var(--ccp-muted); }
.elementor-testimonial-image img, .elementor-testimonial__image img {
  width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
}

/* A swiper track with no swiper.js stacks every slide on top of the last one.
   ccp-ui.js drives these instead; the CSS below is what it needs. */
.ccp-carousel { position: relative; }
.ccp-carousel .swiper-wrapper {
  display: flex; gap: 22px; transform: none !important;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 6px;
  scrollbar-width: thin; scrollbar-color: var(--ccp-green) transparent;
}
.ccp-carousel .swiper-slide {
  flex: 0 0 min(100%, var(--ccp-slide, 320px));
  scroll-snap-align: start; height: auto; opacity: 1 !important;
}
.ccp-carousel .swiper-wrapper::-webkit-scrollbar { height: 6px; }
.ccp-carousel .swiper-wrapper::-webkit-scrollbar-thumb { background: var(--ccp-green); border-radius: 3px; }
.ccp-carousel__nav { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.ccp-carousel__btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ccp-line);
  background: #fff; color: var(--ccp-green-deep); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; transition: background .2s ease, color .2s ease;
}
.ccp-carousel__btn:hover { background: var(--ccp-green); color: #fff; border-color: var(--ccp-green); }
.ccp-carousel__btn[disabled] { opacity: .35; cursor: default; }
.ccp-carousel .swiper-pagination, .ccp-carousel .elementor-swiper-button { display: none; }

/* -------------------------------------------------------- 21. social icons */
.elementor-social-icons-wrapper { display: flex; flex-wrap: wrap; gap: 10px; list-style: none;
  margin: 0; padding: 0; }
.elementor-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ccp-green); color: #fff; text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}
.elementor-social-icon:hover { background: var(--ccp-green-deep); transform: translateY(-2px); }
.elementor-social-icon svg { width: 17px; height: 17px; fill: #fff; }
.elementor-social-icon i { font-size: 17px; }
.elementor-screen-only, .elementor-social-icon .elementor-screen-only { position: absolute;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ 22. footer */
.elementor-location-footer {
  background: var(--ccp-green-deep); color: rgba(255,255,255,.8); margin-top: clamp(40px, 6vw, 80px);
}
.elementor-location-footer .elementor-section.elementor-top-section {
  padding-block: clamp(38px, 5vw, 62px);
}
.elementor-location-footer .elementor-heading-title {
  color: #fff; font-family: var(--ccp-label); font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.elementor-location-footer .elementor-widget-divider .elementor-divider-separator {
  border-block-start-color: var(--ccp-amber); width: 42px;
}
.elementor-location-footer,
.elementor-location-footer p { color: rgba(255,255,255,.78); font-size: .95rem; }
.elementor-location-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.elementor-location-footer a:hover { color: #fff; text-decoration: underline; }
.elementor-location-footer .elementor-icon-list-icon,
.elementor-location-footer .elementor-icon-list-icon svg { color: var(--ccp-amber); fill: var(--ccp-amber); }
.elementor-location-footer .elementor-social-icon { background: rgba(255,255,255,.12); }
.elementor-location-footer .elementor-social-icon:hover { background: var(--ccp-amber); }
.elementor-location-footer .elementor-social-icon:hover svg { fill: var(--ccp-green-deep); }
.elementor-location-footer .page, .elementor-location-footer .section,
.elementor-location-footer .layoutArea, .elementor-location-footer .column { display: block; }

/* --------------------------------------------- 23. link-in-bio (bio page) */
.elementor-widget-link-in-bio .e-link-in-bio {
  max-width: 520px; margin-inline: auto; text-align: center;
}
.elementor-widget-link-in-bio .e-link-in-bio__ctas { display: grid; gap: 12px; margin-top: 22px; }
.elementor-widget-link-in-bio .e-link-in-bio__cta {
  display: block; padding: 15px 20px; border-radius: 999px;
  background: var(--ccp-green); color: #fff; text-decoration: none;
  font-family: var(--ccp-label); font-weight: 600; font-size: .84rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.elementor-widget-link-in-bio .e-link-in-bio__cta:hover { background: var(--ccp-green-deep); color: #fff; }
.elementor-widget-link-in-bio .e-link-in-bio__heading {
  font-family: var(--ccp-serif); font-size: 1.9rem; color: var(--ccp-ink);
}

/* -------------------------------------------- 24. reveal (replaces Pro JS) */
.ccp-reveal { opacity: 0; transform: translateY(18px); }
.ccp-reveal.ccp-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .ccp-reveal, .ccp-reveal.ccp-in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------- 25. WhatsApp button
   Replaces the Click-to-Chat widget, which the crawler captured with its
   greeting bubble expanded. The number is the site's own, published both in the
   widget settings and as "Telefone: +351 923 394 395" on /contactos/. */
.ccp-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: .55em;
  padding: 12px 18px 12px 14px; border-radius: 999px;
  background: #25d366; color: #fff; text-decoration: none;
  font-family: var(--ccp-label); font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.5);
  transition: transform .2s ease, background .2s ease;
}
.ccp-wa:hover { background: #1fb355; color: #fff; transform: translateY(-2px); }
.ccp-wa svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 640px) { .ccp-wa span { display: none; } .ccp-wa { padding: 14px; } }

/* ------------------------------------------------------ 26. the 404 page */
.ccp-404 { text-align: center; padding-block: clamp(60px, 10vw, 120px); }
.ccp-404__code {
  font-family: var(--ccp-serif); font-size: clamp(4rem, 14vw, 8rem); font-weight: 700;
  color: var(--ccp-green); line-height: 1; margin: 0;
}
.ccp-404__links {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px;
  list-style: none; padding: 0;
}
.ccp-404__links a {
  display: inline-block; padding: .7em 1.4em; border-radius: 999px;
  background: #fff; border: 1px solid var(--ccp-line); color: var(--ccp-green-deep);
  text-decoration: none; font-family: var(--ccp-label); font-size: .78rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}
.ccp-404__links a:hover { background: var(--ccp-green); color: #fff; border-color: var(--ccp-green); }

/* -------------------------------------------- 27. authored-page furniture */
.ccp-prose { max-width: 74ch; margin-inline: auto; }
.ccp-prose h2 { font-family: var(--ccp-serif); font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  color: var(--ccp-ink); margin: 1.9em 0 .55em; line-height: 1.25; }
.ccp-prose h3 { font-family: var(--ccp-serif); font-size: 1.24rem; color: var(--ccp-ink);
  margin: 1.5em 0 .5em; }
.ccp-prose h2:first-child, .ccp-prose h3:first-child { margin-top: 0; }
.ccp-prose p { margin: 0 0 1.15em; }
.ccp-prose ul, .ccp-prose ol { margin: 0 0 1.2em; padding-inline-start: 1.3em; }
.ccp-prose li { margin-bottom: .45em; }
.ccp-note {
  background: var(--ccp-green-wash); border: 1px solid var(--ccp-line);
  border-radius: var(--ccp-radius); padding: 20px 24px; margin: 1.6em 0;
}
.ccp-note p:last-child { margin-bottom: 0; }
.ccp-cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ccp-card {
  background: #fff; border: 1px solid var(--ccp-line); border-radius: var(--ccp-radius);
  padding: 24px; box-shadow: var(--ccp-shadow);
}
.ccp-card h3 { margin-top: 0; }
.ccp-card p:last-child { margin-bottom: 0; }
/* the flyer slot on /servicos/: a printed-flyer card in the kit's own tokens, carrying the
   service list, the online/presencial split and the published contacts */
.ccp-flyer {
  background: linear-gradient(180deg, var(--ccp-cream) 0%, var(--ccp-green-wash) 100%);
  border: 1px solid var(--ccp-line); border-radius: var(--ccp-radius);
  box-shadow: var(--ccp-shadow); padding: clamp(22px, 3.4vw, 32px);
  max-width: 420px; margin: 0 auto; text-align: center; color: var(--ccp-body);
}
.ccp-flyer__logo { display: block; width: 138px; height: auto; margin: 0 auto 14px; }
.ccp-flyer__eyebrow {
  font-family: var(--ccp-label); text-transform: uppercase; letter-spacing: .16em;
  font-size: 11px; color: var(--ccp-green); margin: 0 0 6px;
}
.ccp-flyer__title {
  font-family: var(--ccp-serif); color: var(--ccp-ink); margin: 0 0 10px;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25;
}
.ccp-flyer__lead { font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.ccp-flyer__list { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; }
.ccp-flyer__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 2px; border-bottom: 1px dotted var(--ccp-line);
  font-size: 14px; color: var(--ccp-ink);
}
.ccp-flyer__list li:last-child { border-bottom: 0; }
.ccp-flyer__list li span + span {
  font-family: var(--ccp-label); text-transform: uppercase; letter-spacing: .1em;
  font-size: 10px; color: var(--ccp-green); white-space: nowrap;
}
.ccp-flyer__foot { display: grid; gap: 4px; margin: 0; font-size: 13px; }
.ccp-flyer__foot a { color: var(--ccp-green-dark); font-weight: 600; text-decoration: none; }
.ccp-flyer__foot a:hover { text-decoration: underline; }
.ccp-flyer__foot span { color: var(--ccp-muted); }

/* --------------------------------------------------------- 28. responsive */
@media (max-width: 1024px) {
  .elementor-menu-toggle { display: inline-flex; }
  header.elementor-location-header nav.elementor-nav-menu--main { display: none; }
  header.elementor-location-header > .e-con.e-parent { position: relative; }
  .elementor-posts-container.elementor-grid { --ccp-cols: 2; }
  .elementor-column.elementor-col-33 { width: 50%; }
  .elementor-column + .elementor-column { padding-inline-start: 0; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .elementor-section > .elementor-container { flex-wrap: wrap; }
  .elementor-column,
  .elementor-column.elementor-col-33,
  .elementor-column.elementor-col-25,
  .elementor-column.elementor-col-50 { width: 100%; }
  .elementor-column + .elementor-column { margin-top: 26px; }
  .elementor-posts-container.elementor-grid { --ccp-cols: 1; }
  .elementor-field-group.elementor-col-50,
  .elementor-field-group.elementor-col-33,
  .elementor-field-group.elementor-col-25 { flex-basis: 100%; max-width: 100%; }
  header .elementor-widget-theme-site-logo img { height: 46px; }
  header.elementor-location-header .elementor-widget-button { display: none; }
  nav.elementor-nav-menu--dropdown .ccp-drawer-cta { display: block; margin: 14px var(--ccp-pad) 0; }
  .elementor-price-table__integer-part { font-size: 2.6rem; }
  .ccp-carousel .swiper-slide { --ccp-slide: 86vw; }
}
.ccp-drawer-cta { display: none; }
.ccp-drawer-cta a { display: block; text-align: center; }

/* ============================ 29. legal / policy pages ======================
   DoD item 5: these come out with the worst styling of any page, every time -
   and they did. /privacy-policy/ rendered as one 8,900px column of 15px text
   running the full 1140px, with no header and no footer to escape by.  The
   headings the owner wrote as <h5><strong> get a real hierarchy here. */
.ccp-legal .elementor-widget-text-editor > .elementor-widget-container,
.ccp-legal .elementor-widget-theme-post-content > .elementor-widget-container {
  max-width: 76ch; margin-inline: auto;
}
.ccp-legal .elementor-widget-text-editor { font-size: 1rem; line-height: 1.78; }
.ccp-legal .elementor-widget-text-editor h5,
.ccp-legal .elementor-widget-text-editor h4 {
  font-family: var(--ccp-serif); font-size: 1.28rem; font-weight: 700;
  color: var(--ccp-ink); margin: 2.1em 0 .5em; line-height: 1.3;
}
.ccp-legal .elementor-widget-text-editor h5:first-child { margin-top: 0; }
.ccp-legal .elementor-widget-text-editor h5 strong,
.ccp-legal .elementor-widget-text-editor h4 strong { font-weight: 700; }
.ccp-legal .elementor-widget-text-editor p { margin: 0 0 1.05em; }
.ccp-legal .elementor-widget-text-editor ol,
.ccp-legal .elementor-widget-text-editor ul { margin: 0 0 1.2em; padding-inline-start: 1.4em; }
.ccp-legal .elementor-widget-text-editor li { margin-bottom: .5em; }
.ccp-legal .elementor-widget-text-editor li span[style*="underline"] {
  font-family: var(--ccp-serif); font-weight: 700; color: var(--ccp-ink);
  text-decoration: none !important;
}
.ccp-legal .elementor-section.elementor-inner-section { padding-block: 0; }
.ccp-legal .ccp-prose { max-width: 76ch; }

/* ==================== 30. service card (image + icon + icon-box) ============
   The homepage and the service pages stack three widgets that the lost post CSS
   composed into one card: a photo, a round icon, and the icon-box text. Without
   it they read as three unrelated blocks with a gap between each. :has() lets
   the column become the card again without touching the markup. */
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box) {
  align-self: stretch;
}
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  > .elementor-widget-wrap {
  position: relative; height: 100%;
  background: #fff; border: 1px solid var(--ccp-line); border-radius: var(--ccp-radius);
  overflow: hidden; box-shadow: var(--ccp-shadow);
  transition: transform .24s ease, box-shadow .24s ease;
}
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  > .elementor-widget-wrap:hover { transform: translateY(-4px); box-shadow: var(--ccp-shadow-lg); }
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  > .elementor-widget-wrap > .elementor-widget { margin-block-end: 0 !important; }
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  > .elementor-widget-wrap > .elementor-widget-image img {
  border-radius: 0; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
}
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  > .elementor-widget-wrap { display: flex; flex-direction: column; }
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  > .elementor-widget-wrap.elementor-element-populated { padding: 0; }
/* The round icon overlaps the BOTTOM EDGE OF THE PHOTO. On /sobre-nos/ the same card
   shape has no photo, and the negative margin then pulled the icon off the top of the
   card - visible as six circles clipped by the card border. Only pull it up when there
   is an image above it to overlap. */
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  > .elementor-widget-wrap > .elementor-widget-icon {
  margin-top: 24px; margin-inline-start: 22px; align-self: flex-start; z-index: 2;
}
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  > .elementor-widget-wrap > .elementor-widget-image + .elementor-widget-icon {
  margin-top: -26px;
}
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  > .elementor-widget-wrap > .elementor-widget-icon .elementor-icon {
  background: var(--ccp-green); color: #fff; width: 52px; height: 52px; border-radius: 50%;
  box-shadow: 0 8px 18px -10px rgba(43,58,41,.8);
}
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  .elementor-icon-box-wrapper {
  background: transparent; border: 0; box-shadow: none; padding: 18px 24px 26px;
}
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  > .elementor-widget-wrap > .elementor-widget-icon-box { flex: 1 1 auto; }
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  .elementor-icon-box-wrapper:hover { transform: none; box-shadow: none; }
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box)
  .elementor-icon-box-icon { display: none; }

/* ================== 31. /agendamento/ - three steps, not testimonials ======= */
.ccp-step { text-align: left; position: relative; }
.ccp-step .elementor-testimonial-content {
  font-family: var(--ccp-sans); font-size: 1rem; color: var(--ccp-body);
}
.ccp-step .elementor-testimonial-name {
  order: -1; margin: 0 0 .6em;
  font-family: var(--ccp-label); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ccp-green);
}
.ccp-step .elementor-testimonial-meta { margin-top: 0; }
.ccp-step { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

/* ==================== 32. header logo, sized to the redrawn mark =========== */
header .elementor-widget-theme-site-logo img { height: 52px; width: auto; max-width: 230px; }
@media (max-width: 767px) { header .elementor-widget-theme-site-logo img { height: 42px; } }

/* ==================== 33. authored pages share the page rhythm ============= */
.ccp-authored #content > section:first-child { margin-top: 0; }
.ccp-authored .ccp-prose a,
.ccp-legal .elementor-widget-text-editor a { text-decoration: underline; text-underline-offset: .18em; }

/* the "Formulário" anchor target must not hide under the sticky header */
#formulario, #agendar { scroll-margin-top: 96px; }

/* the three booking steps sit in one flex container that defaults to a column */
.ccp-steps, .ccp-steps > .e-con-inner {
  --flex-direction: row; --align-items: stretch; --flex-wrap: wrap; gap: 20px;
}
.ccp-steps > .elementor-widget,
.ccp-steps > .e-con-inner > .elementor-widget { flex: 1 1 260px; margin-block-end: 0 !important; }
.ccp-steps .ccp-step { height: 100%; }
@media (max-width: 767px) { .ccp-steps, .ccp-steps > .e-con-inner { --flex-direction: column; } }

/* ============ 34. authored pages: one measure for headings and copy ========= */
.ccp-authored .ccp-prose { margin-inline: 0; }
.ccp-authored .elementor-widget-price-table { max-width: 420px; }
.ccp-card h3 {
  font-family: var(--ccp-serif); font-size: 1.16rem; font-weight: 700;
  color: var(--ccp-ink); margin: 0 0 .5em; line-height: 1.3;
}
.ccp-card p { margin: 0; font-size: .97rem; }
.ccp-note p { font-size: .97rem; }

/* ================ 35. /bio-contactos/ - the link-in-bio landing page ========
   elementor's widget-link-in-bio-base.min.css is installed, but every colour it
   draws comes from CSS variables that the lost kit stylesheet used to define, so
   the six CTAs rendered as default-blue buttons inside green boxes. These are the
   variables the widget actually reads. */
.e-link-in-bio {
  --e-link-in-bio-ctas-background-color: var(--ccp-green);
  --e-link-in-bio-ctas-text-color: #fff;
  --e-link-in-bio-ctas-border-color: var(--ccp-green);
  --e-link-in-bio-ctas-border-style: solid;
  --e-link-in-bio-ctas-border-width: 1px;
  --e-link-in-bio-ctas-border-radius: 999px;
  --e-link-in-bio-ctas-gap: 12px;
  --e-link-in-bio-ctas-padding-block-start: 14px;
  --e-link-in-bio-ctas-padding-block-end: 14px;
  --e-link-in-bio-ctas-padding-inline-start: 22px;
  --e-link-in-bio-ctas-padding-inline-end: 22px;
  --e-link-in-bio-border-color: transparent;
  --e-link-in-bio-content-width: 460px;
  --e-link-in-bio-identity-image-border-radius: 50%;
  max-width: 480px; margin-inline: auto; text-align: center;
}
.e-link-in-bio .e-link-in-bio__identity-image,
.e-link-in-bio .e-link-in-bio__identity-image-cover {
  width: 132px; height: 132px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden;
  border: 3px solid #fff; box-shadow: var(--ccp-shadow);
}
.e-link-in-bio .e-link-in-bio__identity-image-element {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.e-link-in-bio__heading {
  font-family: var(--ccp-serif); font-size: 1.7rem; font-weight: 700;
  color: var(--ccp-ink); margin: 0;
}
.e-link-in-bio__title {
  font-family: var(--ccp-label); font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ccp-green);
  margin: .35em 0 0;
}
.e-link-in-bio__description { color: var(--ccp-body); margin: 1em 0 0; font-size: .98rem; }
.e-link-in-bio__icons { display: flex; gap: 14px; justify-content: center; margin: 20px 0 26px; }
.e-link-in-bio__icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ccp-green-tint); color: var(--ccp-green-deep);
}
.e-link-in-bio__icon-link:hover { background: var(--ccp-green); color: #fff; }
.e-link-in-bio__icon-svg svg { width: 18px; height: 18px; fill: currentColor; }
.e-link-in-bio__ctas { display: grid; gap: 12px; }
.e-link-in-bio__cta {
  display: block; text-decoration: none;
  background: var(--ccp-green); color: #fff; border-radius: 999px;
  padding: 15px 22px;
  font-family: var(--ccp-label); font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.e-link-in-bio__cta:hover { background: var(--ccp-green-deep); color: #fff; transform: translateY(-2px); }

/* ============ 36. containers of repeated card widgets are rows ==============
   Marked by ccp_08_polish.py; see its docstring for the rule and why.

   Both shapes have to be addressed. A "boxed" container puts its children inside its
   own .e-con-inner, and section 3 above sets --flex-direction on `.e-con > .e-con-inner`
   DIRECTLY - which out-specifies inheritance from the parent. Setting the variable only
   on .ccp-row therefore did nothing at all for boxed containers, and the five team
   portraits got wider instead of side by side. */
.ccp-row,
.ccp-row > .e-con-inner {
  --flex-direction: row;
  --flex-wrap: wrap;
  --align-items: stretch;
  --justify-content: center;
  gap: 22px;
}
.ccp-row > .elementor-widget,
.ccp-row > .e-con-inner > .elementor-widget {
  flex: 0 1 210px; max-width: 230px; margin-block-end: 0 !important;
}
.ccp-row .elementor-widget-image figure { display: flex; flex-direction: column; height: 100%;
  margin: 0; }
.ccp-row .elementor-widget-image img { width: 100%; }
.ccp-row .widget-image-caption {
  font-family: var(--ccp-label); font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ccp-green-deep);
  text-align: center; padding-top: .8em; line-height: 1.4;
}
@media (max-width: 767px) {
  .ccp-row > .elementor-widget,
  .ccp-row > .e-con-inner > .elementor-widget { flex-basis: 140px; max-width: 46%; }
}

/* ============ 37. the alternating image / text rows ========================
   The five service rows on the homepage (and their equivalents on the service
   pages) are inner sections of two 50% columns: one image, one block of copy.
   Column alignment came from the lost post-*.css, so both columns sat at the top
   and the taller image hung a third of its height below the text, which read as
   a staggered, unfinished grid. Inner sections centre; TOP sections keep
   stretch, because those are the equal-height card rows. */
.elementor-section.elementor-inner-section > .elementor-container { align-items: center; }
.elementor-section.elementor-inner-section > .elementor-container > .elementor-column
  { align-self: center; }

/* ============ 38. /servicos/ : the two blocks whose geometry died with post-*.css ==========
   Both defects here are the same lost file, not lost markup.

   (a) The hero's three category panels (Servicos online / presenciais / Eventos) are three 33%
   columns whose background image, min-height and padding lived in post-*.css. Without it the three
   headings collided on one line over an empty strip. They are restored as three tinted cards, each
   now pointing at the page that actually covers it.

   (b) The "Receituario cronico" band is a single 50% column inside a min-height section: the right
   half was a section background image, so with the image gone half the band read as blank. Refilled
   with the site's own desk photograph, faded into the page ground on the side where the copy sits,
   and dropped below 1024px where the section stacks. */
.elementor-element-c4db123 > .elementor-container { align-items: stretch; gap: 16px; }
.elementor-element-52d7232f > .elementor-widget-wrap,
.elementor-element-3ab67fd0 > .elementor-widget-wrap,
.elementor-element-2d9e699f > .elementor-widget-wrap {
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--ccp-line);
  border-radius: var(--ccp-radius);
  box-shadow: var(--ccp-shadow);
  min-height: 168px;
  padding: 20px 16px;
  align-content: center;
  justify-content: center;
  text-align: center;
  transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.elementor-element-52d7232f > .elementor-widget-wrap:hover,
.elementor-element-3ab67fd0 > .elementor-widget-wrap:hover,
.elementor-element-2d9e699f > .elementor-widget-wrap:hover {
  transform: translateY(-4px);
  box-shadow: var(--ccp-shadow-lg);
  background: #fff;
}
.elementor-element-52d7232f .elementor-spacer-inner,
.elementor-element-3ab67fd0 .elementor-spacer-inner,
.elementor-element-2d9e699f .elementor-spacer-inner { height: 0; }
.elementor-element-52d7232f .elementor-heading-title,
.elementor-element-3ab67fd0 .elementor-heading-title,
.elementor-element-2d9e699f .elementor-heading-title {
  font-family: var(--ccp-serif); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; margin: 0;
}
.elementor-element-52d7232f .elementor-heading-title a,
.elementor-element-3ab67fd0 .elementor-heading-title a,
.elementor-element-2d9e699f .elementor-heading-title a {
  color: var(--ccp-ink); text-decoration: none; display: block;
}
.elementor-element-52d7232f .elementor-heading-title a:hover,
.elementor-element-3ab67fd0 .elementor-heading-title a:hover,
.elementor-element-2d9e699f .elementor-heading-title a:hover { color: var(--ccp-green); }

.elementor-element-8d50843 {
  background-image:
    linear-gradient(90deg, var(--ccp-cream) 0%, var(--ccp-cream) 44%, rgba(252, 251, 247, 0) 66%),
    url("/img/person-writing-on-brown-wooden-table-nea-c8165556.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: cover, 60% auto;
}
@media (max-width: 1024px) {
  .elementor-element-8d50843 { background-image: none; }
  .elementor-element-c4db123 > .elementor-container { gap: 12px; }
}

/* The transition strip between the values grid and the Receituario band on /servicos/ is a section
   with no columns at all: its whole content was a background image in post-*.css, so it landed as a
   flat empty band. Refilled with one of the site's own watercolour wallpapers, veiled towards the
   page ground so it reads as the divider it was rather than as a second hero. */
.elementor-element-96ab5a5 {
  min-height: 140px;
  background-image:
    linear-gradient(180deg, var(--ccp-cream) 0%, rgba(252, 251, 247, .55) 45%, var(--ccp-cream) 100%),
    url("/img/Green-Aesthetic-Watercolor-Scenery-Deskt-0aa15374.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}

/* ==================== 39. /servicos/ : the price list ======================
   Elementor's widget-price-list.min.css was never archived: nothing in the capture links it and
   no copy exists under /css/. Without it the <ul> fell back to browser defaults — raw disc
   bullets at a 40px indent, .elementor-price-list-item as inline text, each row image at its
   full 474px intrinsic width, and the leader line between name and price collapsed to zero. The
   preçário is the only page on the site that quotes a price, so it is also the block a buyer
   looks at first. Rebuilt in the site's own tokens rather than restored byte-for-byte, because
   what matters is the row: thumbnail, name, leader, price, description. */
.elementor-price-list { list-style: none; margin: 0; padding: 0; }
.elementor-price-list > li { margin: 0; }
.elementor-price-list > li + li { border-top: 1px solid var(--ccp-line); }
.elementor-price-list-item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 8px; text-decoration: none; color: inherit;
  border-radius: var(--ccp-radius-sm);
  transition: background-color .22s ease;
}
.elementor-price-list-item:hover { background: var(--ccp-green-wash); }
.elementor-price-list-image {
  flex: 0 0 auto; width: 74px; height: 74px; border-radius: 12px; overflow: hidden;
  background: var(--ccp-green-tint);
}
.elementor-price-list-image img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
.elementor-price-list-text { flex: 1 1 auto; min-width: 0; }
.elementor-price-list-header {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 .35em;
}
.elementor-price-list-title {
  font-family: var(--ccp-serif); font-weight: 700; font-size: 1rem; line-height: 1.3;
  color: var(--ccp-ink);
}
.elementor-price-list-separator {
  flex: 1 1 auto; min-width: 16px; height: 0; align-self: center;
  border-bottom: 1px dotted var(--ccp-line);
}
.elementor-price-list-price {
  flex: 0 0 auto; font-family: var(--ccp-label); font-weight: 700; font-size: 1rem;
  color: var(--ccp-green-dark); white-space: nowrap;
}
.elementor-price-list-description {
  margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ccp-muted);
}
@media (max-width: 480px) {
  .elementor-price-list-image { width: 56px; height: 56px; }
  .elementor-price-list-item { gap: 12px; padding: 12px 4px; }
}
/* the preçário is two columns of unequal length; centring them (the site's default for inner
   sections) left the shorter one floating half a row low, so the two lists never started level */
.elementor-element-650d0f40 > .elementor-container,
.elementor-element-650d0f40 > .elementor-container > .elementor-column { align-items: flex-start; align-self: flex-start; }

/* ==================== 40. /servicos/ : the three category panels ============
   The panels were three headings alone in a card — a link label floating in an empty white box,
   while the equivalent homepage tiles carry image, icon, title and copy. Each now states what it
   actually covers, in one sentence taken from the page it links to. */
.ccp-panel__icon {
  width: 40px; height: 40px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--ccp-green-tint);
}
.ccp-panel__icon svg { width: 19px; height: 19px; fill: var(--ccp-green-dark); }
.ccp-panel__copy {
  margin: .6em 0 0; font-size: .88rem; line-height: 1.55; color: var(--ccp-muted);
  max-width: 30ch; margin-inline: auto;
}
.elementor-element-52d7232f > .elementor-widget-wrap,
.elementor-element-3ab67fd0 > .elementor-widget-wrap,
.elementor-element-2d9e699f > .elementor-widget-wrap { padding: 26px 20px 28px; }

/* ==================== 41. /servicos/ : the "3 passos" card =================
   The band is an elementor-column-gap-no section, which zeroes the padding on every widget wrap
   inside it. The left column did not notice because .ccp-flyer carries its own padding; the right
   column had none, so its eyebrow sat on the band's top edge and the h2 one pixel from the left.
   Padding it here rather than removing the gap-no class keeps the flyer's geometry untouched.
   The selector is deliberately long: Elementor's own gap-no rule is a four-class chain, so a
   two-class override loses to it and the padding never lands. */
.elementor-element-22595a11 > .elementor-container { align-items: center; }
.elementor-section .elementor-container > .elementor-column.elementor-element-349130b9
  > .elementor-widget-wrap.elementor-element-populated {
  padding: clamp(22px, 3vw, 38px) clamp(22px, 3vw, 40px) clamp(26px, 3.4vw, 42px);
}

/* ==================== 42. icon lists breathe ===============================
   Elementor's icon-list spacing lived in post CSS. Without it multi-line items ran together as
   one block of text and each tick sat centred against the wrong line of its item. Scoped away
   from the header and footer, whose lists are already spaced by the theme. */
.elementor-widget-icon-list:not(.elementor-icon-list--layout-inline) .elementor-icon-list-items {
  display: grid; gap: .62em;
}
.elementor-widget-icon-list .elementor-icon-list-item {
  display: flex; align-items: flex-start; gap: .6em;
}
.elementor-widget-icon-list .elementor-icon-list-icon { flex: 0 0 auto; margin-top: .22em; }
.elementor-widget-icon-list .elementor-icon-list-text { line-height: 1.6; }
header .elementor-widget-icon-list .elementor-icon-list-items,
footer .elementor-widget-icon-list .elementor-icon-list-items { gap: .4em; }

/* ==================== 43. cards that end level =============================
   The blog grid stretches every card to the tallest in its row, so with the read-more link in
   normal flow it floated at a different height in each card. Pushing it to the bottom lines the
   whole row up. */
.elementor-posts--skin-cards .elementor-post__card { display: flex; flex-direction: column; height: 100%; }
.elementor-posts--skin-cards .elementor-post__text { display: flex; flex-direction: column; flex: 1 1 auto; }
.elementor-posts--skin-cards .elementor-post__read-more { margin-top: auto; padding-top: .8em; }
.elementor-posts--skin-cards .elementor-post__thumbnail { aspect-ratio: 16 / 10; overflow: hidden; }
.elementor-posts--skin-cards .elementor-post__thumbnail img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ==================== 44. /agendamento/ : the three ETAPA cards ============
   The three steps are equal-height cards but hold one to three lines each, so the two short ones
   ended with ~120px of dead white below the text. Centring the content in the card spends that
   space instead of parking it at the bottom, and the page heading gets the top band the rest of
   the site's pages have rather than butting against the sticky header.
   They were not even side by side: the same container carries .ccp-row, whose later rule caps a
   child at 230px, while Elementor's own elementor-widget__width-initial forces width:100% with
   !important — so each step took a full row and then padded itself out to the tallest. Real flex
   properties here (not the --flex-* custom properties, which lose to both) put the three steps in
   one row again, and centring the content spends the leftover height instead of parking it.
   The direction needs !important: the page's own inline block sets --flex-direction: column on a
   three-class selector, so nothing we can write in this file outranks it by specificity alone. */
.ccp-steps, .ccp-steps > .e-con-inner {
  display: flex; flex-direction: row !important; flex-wrap: wrap; align-items: stretch; gap: 20px;
}
.ccp-steps > .elementor-widget,
.ccp-steps > .e-con-inner > .elementor-widget {
  flex: 1 1 240px; max-width: none; width: auto !important; margin-block-end: 0 !important;
}
@media (max-width: 767px) {
  .ccp-steps, .ccp-steps > .e-con-inner { flex-direction: column !important; }
}
.ccp-steps .ccp-step { justify-content: center; }
.elementor-element-dc3a704 { padding-block: clamp(34px, 6vw, 68px) clamp(28px, 5vw, 54px); }

/* ==================== 45. "Todos os cuidados de que precisa" ===============
   The heading sat in a 25% column and wrapped to three lines with the smiley icon orphaned in the
   column beside it. The two belong together: they are one lockup, so they share one column. */
@media (min-width: 768px) {
  .elementor-element-fb00595 > .elementor-container { align-items: center; }
  .elementor-container > .elementor-column.elementor-element-55f50335 { width: 33%; }
  .elementor-container > .elementor-column.elementor-element-68697098 { width: 9%; }
}
.elementor-element-55f50335 .elementor-heading-title { text-wrap: balance; }

/* ==================== 46. the short column beside a long one ===============
   On /sobre-nos/ the "Mais informações" block is a 50% column beside "A nossa história", which
   runs eight paragraphs — the contact card ended after 200px and left ~850px of white beside the
   text. On /fqas/ the intro column does the same beside the accordion. Rather than padding either
   with invented copy, the short column now travels with the reader: it stretches to the section's
   height and sticks under the header, so the contact details stay on screen for the whole scroll,
   which is what they are for. Below 1025px both sections stack and sticky is switched off.
   Section 62702c37 on /sobre-nos/ is an inner section that contains no columns at all — an empty
   Elementor wrapper whose content never came through the capture; it collapses. */
.elementor-element-62702c37 { display: none; }
@media (min-width: 1025px) {
  .elementor-element-61978ac7 > .elementor-container { align-items: stretch; }
  .elementor-element-526b0511 > .elementor-widget-wrap,
  .elementor-element-332fd0fb > .elementor-widget-wrap { position: sticky; top: 96px; }
}

/* The accordion's answer panel inherited cursor:pointer from the toggle wrapper, so eight
   paragraphs of running text advertised themselves as clickable and did nothing when clicked.
   Only the question is a control. */
.elementor-toggle .elementor-tab-content { cursor: auto; }

/* ==================== 47. form feedback ====================================
   ccp-ui.js appends this note when a form hands off to the visitor's mail client, so the
   interaction never dead-ends silently. */
.ccp-form-note {
  flex: 1 1 100%; margin: 12px 0 0; font-size: .86rem; line-height: 1.5; color: var(--ccp-body);
}
.ccp-form-note a { color: var(--ccp-green-dark); }
/* The same slot also carries the "you left a mandatory field empty" answer, which has to read as
   a correction rather than as progress — a visitor who cannot tell the two notes apart has been
   told nothing. Colour is not the only carrier: the field itself gets aria-invalid and the
   browser is asked to point at it. */
.ccp-form-note--error { color: #9b2226; font-weight: 600; }
.elementor-form [aria-invalid="true"] { border-color: #9b2226; box-shadow: 0 0 0 2px rgba(155,34,38,.14); }

/* ==================== 48. fix round 3 ======================================
   Four defects the second independent review located, each fixed once at the
   stylesheet so every page sharing the template is fixed with it. */

/* 48.1  Elementor form field groups also carry .elementor-column, so the column
   gutter rule in section 3 (.elementor-column + .elementor-column) indented
   every field AFTER the first by 26px on desktop and un-indented it on phone.
   The result was a jagged left edge on all four forms (contactos, servicos,
   home newsletter, blog). A field group is a row of the form, not a column of
   the layout, so it keeps the group's own 8px inline padding at every width. */
.elementor-column + .elementor-column.elementor-field-group { padding-inline-start: 8px; }

/* 48.2  The "SOBRE NOS" button on the home page is an <a> with no href, and
   style.min's a:not([href]):not([tabindex]) { color: inherit } outranks
   a.elementor-button, so the label rendered in body green on the green pill -
   about 1.5:1. A button is white-on-green whether or not it links out. */
a.elementor-button:not([href]):not([tabindex]),
a.elementor-button:not([href]):not([tabindex]):hover,
a.elementor-button:not([href]):not([tabindex]):focus { color: #fff; }
/* Same button, same comparison: elementor's own .elementor-button.elementor-size-*
   rules outrank the kit's .elementor-button, so md/lg/xl buttons kept elementor's
   4-5px corners while every sm button is the kit's pill - three rectangles among
   eight pills on the home page alone. Radius only; nothing here can reflow. */
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl { border-radius: 999px; }

/* 48.3  The four service pages (yoga, sound-healing, nutricionista,
   consultas-online) put the illustration in a 66% column and the whole essay in
   the 33% one, so at 1440 the picture floated in ~830px of empty white while the
   text ran at ~40 characters a line. The picture becomes a full-height panel and
   the running text takes the wider half. Below 1025 the row already stacks, so
   the image keeps its own aspect ratio there and this does not apply. */
@media (min-width: 1025px) {
  .elementor-section.elementor-inner-section.ccp-split > .elementor-container { align-items: stretch; }
  .elementor-section.elementor-inner-section.ccp-split > .elementor-container > .elementor-column { align-self: stretch; }
  .ccp-split > .elementor-container > .elementor-column.elementor-col-66 { width: 42%; }
  .ccp-split > .elementor-container > .elementor-column.elementor-col-33 { width: 58%; }
  .ccp-split > .elementor-container > .elementor-col-66 > .elementor-widget-wrap { align-content: stretch; }
  .ccp-split .elementor-widget-image,
  .ccp-split .elementor-widget-image > .elementor-widget-container,
  .ccp-split .elementor-widget-image a { display: flex; width: 100%; }
  .ccp-split .elementor-widget-image img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    border-radius: var(--ccp-radius);
  }
}

/* 48.4  /yoga/ is the one page whose running text was typed as a bare <h6>
   inside a text-editor widget, so it inherited heading leading (1.2) next to
   body copy set at 1.72. Inside a text editor an h6 is a paragraph. */
.elementor-widget-text-editor h6 {
  font-family: var(--ccp-sans);
  font-size: 1rem; font-weight: 400;
  line-height: 1.72; letter-spacing: 0; text-transform: none;
  color: var(--ccp-body);
  margin: 0 0 1.05em;
}

/* 48.5  The contact card's intro paragraph had margin:0 (section 34 sets it for
   the three-up ccp-cards, where each card holds a single last-child paragraph),
   so on /contactos/ its last line sat straight on the NOME label. Cards with one
   paragraph are unaffected: :last-child still zeroes it. */
.ccp-card > p { margin-bottom: 1.05em; }
.ccp-card > p:last-child { margin-bottom: 0; }

/* 48.6  Elementor's .elementor-field-group .elementor-field-textual (0,2,0)
   outranks the kit's .elementor-form textarea (0,1,1) - but not its
   input[type="..."] selectors (0,2,1) - so in every form the textarea kept
   elementor's grey-blue 4px box while the inputs above it wore the kit's soft
   green 12px one. Same treatment for select, which had the same problem. */
.elementor-form textarea.elementor-field-textual,
.elementor-form select.elementor-field-textual {
  background-color: #fff; color: var(--ccp-ink);
  border: 1px solid var(--ccp-line); border-radius: 12px;
  padding-block: .82em; padding-inline-start: 1em;
}
/* select keeps room for the drawn chevron - never collapse its inline-end pad */
.elementor-form textarea.elementor-field-textual { padding-inline-end: 1em; }
.elementor-form select.elementor-field-textual { padding-inline-end: 2.4em; }

/* ==================== 49. fix round 4 ======================================
   49.1  Elementor's frontend.min draws the select's chevron as a pseudo-element
   glyph — .elementor-field-group .elementor-select-wrapper:before sets
   content:"\e92a" in font-family eicons. The restore ships no eicons @font-face
   and no eicons file (nothing here ever will: the whole point is that the site
   carries its own fonts), so the browser painted its missing-glyph tofu box at
   right:10px, on top of the kit's own gradient chevron 14-20px in. Elementor's
   own escape hatch is already in the markup — the wrapper carries `remove-before`
   and an inline caret SVG — but the rule that honours it lives in the Pro
   widget-form stylesheet the capture never had. Removing the pseudo-element
   entirely also drops its text-shadow; section 14's drawn chevron is the one
   mark left. Only /agendamento/ has a select, but the rule is written for any. */
.elementor-field-group .elementor-select-wrapper::before { content: none; }

/* 49.2  Same root cause, HTML side: three buttons and one icon disc asked for an
   icon font by class (<i class="icon icon-mail">, icon-heart-shape-outline) that
   the build does not ship, so they painted nothing — an empty green disc on
   /sound-healing/ and a missing envelope on three of the four service pages
   whose fourth (/nutricionista/) renders it. Fixed in the markup by swapping in
   the site's own inline SVGs (e-fas-envelope, e-far-heart), so there is no CSS
   here; this note records why no icon-font @font-face was added instead. */

/* ==================== 50. fix round 5 ======================================
   Nine defects the fifth independent review located. None of them blocked, and
   the four gates were already green, so every one is a thing the gates cannot
   see: geometry that is level in the DOM and ragged on screen, and copy that is
   correct and reads badly. Each is fixed at the stylesheet where a template is
   involved, so the sibling pages using it are fixed with it.

   50.1  Inner-section columns that must NOT be centred.
   Section 37 centres every inner-section column, which is right for the
   alternating image/text rows it was written for and wrong for a row of cards.
   Rounds 3 and 4 both tried to exempt the precario and both lost the cascade:
   `.elementor-element-650d0f40 > .elementor-container > .elementor-column` is
   three classes and section 37's `.elementor-section.elementor-inner-section >
   .elementor-container > .elementor-column` is four, so `align-self: center`
   kept winning and the 4-row and 3-row price columns stayed centred against
   each other - no row on one side level with any row on the other. Written here
   with the inner-section chain included so it outranks the rule it exempts. */
.elementor-section.elementor-inner-section.elementor-element-650d0f40
  > .elementor-container > .elementor-column,
.elementor-section.elementor-inner-section.elementor-element-c4db123
  > .elementor-container > .elementor-column,
.elementor-section.elementor-inner-section.elementor-element-10dfb9d9
  > .elementor-container > .elementor-column { align-self: stretch; }

/* 50.2  /servicos/ : the three category panels were also three DIFFERENT widths.
   Three 33.3% columns plus a 16px gap overflow their 460px strip, so flex
   shrinks them - but only down to each one's own min-content, and "presenciais"
   is a longer word than "Eventos", so the three cards settled at 137 / 151 /
   140. `flex: 1 1 0` with `min-width: 0` makes the share of the row the only
   thing that decides the width, and the title then has to fit the narrower box,
   hence the smaller cap. Content tops out rather than centres, so the three
   icons and the three titles sit on the same lines.
   460px of strip for three cards was also 42px of it spent twice over: section 4
   gives every column after the first a 26px gutter, and this row already has its
   own 16px gap. One gap is enough, and the hero splits 44/56 rather than 50/50 so
   the three titles fit their box on one line instead of hyphenating.
   All of it is desktop-only: below 768px the three panels stack full width, and
   `flex: 1 1 0` there would drag them back onto one row three cards wide. */
@media (min-width: 768px) {
  .elementor-element-c4db123 > .elementor-container > .elementor-column
    { flex: 1 1 0; min-width: 0; }
  .elementor-element-c4db123 > .elementor-container > .elementor-column
    + .elementor-column { padding-inline-start: 0; }
  .elementor-element-c4db123 > .elementor-container { gap: 14px; }
  .elementor-column.elementor-element-4f57dd4 { width: 44%; }
  .elementor-column.elementor-element-f39a4d0 { width: 56%; }
}
.elementor-element-52d7232f > .elementor-widget-wrap,
.elementor-element-3ab67fd0 > .elementor-widget-wrap,
.elementor-element-2d9e699f > .elementor-widget-wrap {
  align-content: flex-start;
  padding: 24px 14px 26px;
}
.elementor-element-52d7232f .elementor-heading-title,
.elementor-element-3ab67fd0 .elementor-heading-title,
.elementor-element-2d9e699f .elementor-heading-title {
  font-size: clamp(15px, 1.15vw, 16.5px);
}
.ccp-panel__copy { font-size: .82rem; }

/* 50.3  /sound-healing/ : the two price cards.
   The band is elementor-section-items-middle, so the two cards were centred
   against each other: 428px and 448px tall, tops 10px apart, and the two
   COMECAR buttons 30px apart because the right card carries a fourth feature.
   Stretching the columns and pushing the footer to the bottom of the card puts
   both prices on one line and both buttons on another. */
.elementor-section.elementor-section-items-middle.elementor-element-ce0688
  > .elementor-container { align-items: stretch; }
.elementor-element-ce0688 > .elementor-container > .elementor-column
  > .elementor-widget-wrap {
  display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%;
}
.elementor-element-ce0688 .elementor-widget-price-table { flex: 1 1 auto; display: flex; }
.elementor-element-ce0688 .elementor-widget-price-table > .elementor-widget-container
  { display: flex; width: 100%; }
.elementor-element-ce0688 .elementor-price-table
  { display: flex; flex-direction: column; width: 100%; }
.elementor-element-ce0688 .elementor-price-table__footer { margin-top: auto; }
/* The left card's footer also carries an "additional info" line the owner left
   blank - a 20px empty box plus 20px of its own padding UNDER the button, which
   is exactly why the two COMECAR buttons still sat 20px apart once the footers
   were flush. It is the only one on the site and it has never had any text. */
.elementor-price-table__additional_info { display: none; }

/* 50.4  /agendamento/ : the three ETAPA cards.
   Round 4 centred the card contents to spend the dead white below the two short
   steps. That traded one defect for another: the three eyebrows then sat at
   y=292, y=266 and y=253, a 39px stagger across one row. A numbered sequence has
   to start on one line, so the contents top out and the leftover height stays at
   the bottom, which is what every other card row on this site does.
   On the phone the row becomes a column, and `flex: 1 1 240px` is a basis on
   whichever axis the container runs - so stacked, each card was forced to 240px
   tall and the two-line first step opened a well under itself.
   The card is flex-direction: column-reverse (section 32: the eyebrow is the last
   child in the DOM and the first on screen), so the value that tops the content
   out is flex-END, not flex-start. */
.ccp-steps .ccp-step { justify-content: flex-end; }
@media (max-width: 767px) {
  .ccp-steps > .elementor-widget,
  .ccp-steps > .e-con-inner > .elementor-widget { flex: 0 0 auto; }
}

/* 50.5  /bio-contactos/ : the page the client pastes into an Instagram bio.
   Both defects are the widget's own base stylesheet winning, and both had been
   "fixed" before by setting the variable one level too high to matter.
   (a) `.e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button.has-corners-rounded`
   re-declares --e-link-in-bio-ctas-border-radius:20px ON THE BUTTON, so the 999px
   set on the .e-link-in-bio ancestor was shadowed and never reached it: these six
   were the only buttons on the site that were not pills.
   (b) The five social glyphs read --e-link-in-bio-icon-color, which the base
   stylesheet defines as `inherit`, and the disc took the pale tint - navy on pale,
   while every other social row on the site is white on dark green (section 21). */
.e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button.has-corners-rounded,
.e-link-in-bio__ctas .e-link-in-bio__cta.is-type-button
  { --e-link-in-bio-ctas-border-radius: 999px; border-radius: 999px; }
.e-link-in-bio { --e-link-in-bio-icon-color: #fff; }
.e-link-in-bio .e-link-in-bio__icon .e-link-in-bio__icon-link {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  justify-content: center; background: var(--ccp-green); color: #fff;
  transition: transform .2s ease, background .2s ease;
}
.e-link-in-bio .e-link-in-bio__icon .e-link-in-bio__icon-link:hover
  { background: var(--ccp-green-deep); color: #fff; transform: translateY(-2px); }
.e-link-in-bio .e-link-in-bio__icon .e-link-in-bio__icon-svg { color: #fff; }
.e-link-in-bio .e-link-in-bio__icon .e-link-in-bio__icon-svg svg
  { width: 17px; height: 17px; fill: #fff; }

/* 50.6  /sobre-nos/ and /fqas/ : the short column beside the long one.
   Round 4 made the short column sticky and nothing moved, because it also
   stretched it: a sticky box the full height of its own containing block has
   nowhere to travel. The column still stretches (it is what gives the sticky box
   its track); the WRAP inside it now shrinks to its content, and only then does
   `top` mean anything. /fqas/ had never been given the rule at all.
   On /sobre-nos/ that is the whole fix: a contact card beside an article is a
   real pattern, and at 37% against 63% the card reads as the rail it is instead
   of as the empty half of a 50/50 split.
   /fqas/ is not the same shape. Two short paragraphs and a CTA cannot hold half
   a page open beside eight questions however they are aligned, and an FAQ has no
   reason to be two columns at all: the intro takes the full width above the
   accordion, capped to a readable measure, which is also the order the page
   already stacks in on a phone. */
@media (min-width: 1025px) {
  .elementor-element-526b0511 > .elementor-widget-wrap
    { align-self: flex-start; height: auto; position: sticky; top: 96px; }
  .elementor-column.elementor-element-7220d71f { width: 63%; }   /* /sobre-nos/ history */
  .elementor-column.elementor-element-526b0511 { width: 37%; }   /* /sobre-nos/ contact card */
}
@media (min-width: 768px) {
  .elementor-element-78f2e70a > .elementor-container { flex-wrap: wrap; }
  .elementor-column.elementor-element-332fd0fb,
  .elementor-column.elementor-element-12e2fa9 { width: 100%; }
  .elementor-column.elementor-element-12e2fa9 { padding-inline-start: 0; margin-top: 26px; }
  .elementor-element-332fd0fb .elementor-widget-text-editor { max-width: 62ch; }
  /* section 46 made this column sticky when it was a rail; full width, it has
     nothing to stick past and the rule would only pin it over the accordion. */
  .elementor-element-332fd0fb > .elementor-widget-wrap { position: static; }
  /* "Ainda tem duvidas?" and its email pill were authored as one line (both
     widgets carry elementor-widget__width-auto) and land stacked, so the pill was
     centred under a left-aligned heading. Widening the column made that more
     obvious, so it is straightened here rather than left as a new defect. */
  .elementor-element-6d1da90b .elementor-button-wrapper { text-align: left; }
}

/* 50.7  /fqas/ on the phone: the page explained itself after it had closed.
   The band carries elementor-reverse-mobile, which is right when a photo leads
   on the desktop and the copy has to come first when stacked - and wrong here,
   where it put the accordion first, then the closing "Ainda tem duvidas?" CTA,
   and only then the introduction and a second, competing CTA. Reversing the
   reverse for this one band restores intro, accordion, CTA. */
@media (max-width: 767px) {
  .elementor-element-78f2e70a.elementor-reverse-mobile > .elementor-container
    > .elementor-column:nth-child(1) { order: 1; }
  .elementor-element-78f2e70a.elementor-reverse-mobile > .elementor-container
    > .elementor-column:nth-child(2) { order: 2; }
}

/* 50.8  /privacy-policy/, /fqas/, /sobre-nos/ : three left edges on one page.
   (a) The "Voltar" pill sits alone in a header band, in a 33% column, centred
   within it - so it landed at x=490, aligned to neither the 178px page gutter nor
   the 720px centre. It is a back link: it belongs on the gutter, and the band
   does not need 72px of air above and below a 35px pill.
   (b) The hero breadcrumb carries elementor-align-center while the eyebrow above
   it is left-aligned, so the two halves of one lockup disagreed. Only the three
   pages with a breadcrumb are touched.
   (c) In the body, the legal prose is capped to a 76ch measure and was centred in
   its column, putting it at x=341 while the intro paragraph above it sat at x=206.
   Same cap, same left edge. */
.elementor-section.elementor-top-section.elementor-element-354d7684
  { padding-block: clamp(18px, 2.2vw, 28px) clamp(10px, 1.4vw, 18px); }
.elementor-element-2b53c6eb .elementor-button-wrapper { text-align: left; }
.ccp-hero .elementor-widget-button.elementor-align-center
  { align-self: flex-start; margin-inline-end: auto; }
.ccp-hero .elementor-widget-button.elementor-align-center .elementor-button-wrapper
  { text-align: left; }
.ccp-legal .elementor-widget-text-editor > .elementor-widget-container,
.ccp-legal .elementor-widget-theme-post-content > .elementor-widget-container
  { margin-inline: 0; }

/* 50.9  /servicos/ : the contact band and the sign-off row below it.
   Both bands carried a decorative icon alone in its own column - an outlined
   heart in the third column of the contact band (x=943, ~440px of empty band to
   its right) and a home disc at the far left of the sign-off row. Neither is a
   link, neither labels anything, and both are the last trace of a decorative
   layer that died with post-*.css. Dropping the two orphan columns leaves the
   contact band as form + copy at half the band each - which also widens the copy
   measure from 317px, the reason its h2 broke over two lines - and the sign-off
   row as wordmark + address on one centre line. */
.elementor-element-373f7894, .elementor-element-597a7382 { display: none; }
.elementor-column.elementor-element-2f4e2c1f,
.elementor-column.elementor-element-53ee7fb1 { width: 50%; }
.elementor-element-10dfb9d9 > .elementor-container { align-items: flex-start; }
.elementor-column.elementor-element-5dc4834f { width: 34%; }
.elementor-column.elementor-element-33e830f3 { width: 66%; }
.elementor-element-28ee5f8 > .elementor-container { align-items: center; }
@media (max-width: 767px) {
  .elementor-column.elementor-element-2f4e2c1f,
  .elementor-column.elementor-element-53ee7fb1,
  .elementor-column.elementor-element-5dc4834f,
  .elementor-column.elementor-element-33e830f3 { width: 100%; }
}

/* 50.10  /blog/ : the newsletter heading began exactly where the card grid ended.
   The band is an e-con container, and only elementor-section carries this site's
   block rhythm (section 4), so this one band had a measured 0px gap above its h2
   while every other band on the site has clear air. */
.elementor-element-399b0c59 { padding-block: clamp(40px, 5vw, 72px); }

/* ============ 51. round 7 =================================================
   51.1  /blog/ : the numbered "1 / 2 / 3" band staggered by 22px.
   Same root cause as the precario in section 50.1 - section 37 centres every
   inner-section column, so a column whose heading wraps to one line instead of
   two floats 22px above its neighbours (measured tops 3204 / 3204 / 3182). The
   exemption has to repeat the .elementor-section.elementor-inner-section chain
   or section 37 outranks it, which is how rounds 3 and 4 lost this fix twice.
   The three columns are equals in a row, so they top out together. */
.elementor-section.elementor-inner-section.elementor-element-4e44469e
  > .elementor-container { align-items: flex-start; }
.elementor-section.elementor-inner-section.elementor-element-4e44469e
  > .elementor-container > .elementor-column { align-self: flex-start; }

/* 51.2  /servicos/ : the sign-off row's address hung in the middle of its own
   column. The row is wordmark 34% + address 66% and it does fill the container -
   what read as ~200px of empty right-hand gutter was the address text sitting
   left-aligned inside a 678px box. A sign-off row is wordmark left, address
   right; below the breakpoint the two stack and both stay left. */
@media (min-width: 768px) {
  .elementor-column.elementor-element-33e830f3 .elementor-widget-container { text-align: right; }
}

/* 51.3  /servicos/ : "preencha o formulario AO LADO" while the form was above.
   At 1440 the band is form left / copy right and the sentence is true. Stacked
   at 390 the form came FIRST, so the copy referred backwards to something the
   reader had already scrolled past. The copy is the site's own sentence and is
   not edited; the columns are re-ordered so it introduces the form instead. */
@media (max-width: 767px) {
  .elementor-column.elementor-element-53ee7fb1 { order: 1; }
  .elementor-column.elementor-element-2f4e2c1f { order: 2; }
}

/* 51.4  /servicos/ : the lone Instagram disc under the copy column. It is the
   archive's own widget and stays, but a single social glyph with nothing beside
   it reads as debris; the site's own word for a social row is the footer's
   "Redes sociais", so the disc gets that label and becomes a follow affordance. */
.elementor-element-69eb1924 .elementor-social-icons-wrapper::before {
  content: "Redes sociais";
  display: block;
  width: 100%;
  margin-bottom: 8px;
  font-family: var(--ccp-label);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ccp-green);
}

/* ------------------------------------------------------- legibility gate, 2026-08-18

   Finger-sized hit areas (WCAG 2.5.8 wants 24px in the smaller dimension). Two controls on this
   site sit under it, and both are block elements, so plain padding would have grown the row and
   changed a layout that has already been reviewed. Padding plus an equal NEGATIVE margin grows the
   border box the browser hit-tests by exactly as much as it pulls the margin box back in, so the
   rectangle a finger can find becomes 26px while the page renders pixel-for-pixel as before. The
   overhang lands inside the control's own parent in both cases (the toggle's own 12px header
   padding, and the input the <label for=…> already focuses), so it steals nothing.

   Deliberately NOT changed: the type size. These are the sizes the design asked for. */
.elementor-toggle .elementor-toggle-title {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: -5px;
  margin-bottom: -5px;
}
.elementor-form .elementor-field-label {
  display: block;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-top: -7px;
  margin-bottom: -7px;
}

/* 11.5px running text - the post's date and category on every article, and the team portrait
   captions. The gate's hard floor is 12 and the client's complaint ("hold a magnifying glass to
   the screen") starts below it; half a pixel is the whole change. */
.elementor-post-info .elementor-icon-list-text,
.elementor-post-info .elementor-icon-list-text time,
.elementor-post-info__item,
.elementor-post-date,
.widget-image-caption,
.wp-caption-text,
/* .ccp-row .widget-image-caption above sets .72rem and carries TWO classes, so a one-class rule
   here loses the cascade however late it is written. That rule is the only thing that styles these
   five team captions, so without this line the 12px was dead code that won nowhere - caught by an
   evaluator measuring getComputedStyle rather than reading the comment. */
.ccp-row .widget-image-caption,
.ccp-row .wp-caption-text { font-size: 12px; }