/**
 * Comunick design layer.
 *
 * Brand tokens come from the logo. Sections opt in through CSS classes set in
 * Elementor (Advanced > CSS Classes): cmk-hero, cmk-hero-visual, cmk-strip,
 * cmk-plans, cmk-section, cmk-faq. Nothing here changes pages without those classes,
 * except the shortcode components and browser surfaces (selection, focus).
 *
 * @author Agência MB - Manhumirim/MG
 */

:root {
  --cmk-cyan: #00a3e4;        /* action color, from the logo */
  --cmk-yellow: #e4d728;      /* brand color, from the logo */
  --cmk-navy: #14275c;        /* headings and dark surfaces */
  --cmk-ink: #4c5a75;         /* body text */
  --cmk-ink-soft: #66748c;    /* secondary text, AA on white */
  --cmk-line: #e4e8f0;        /* borders and dividers */
  --cmk-surface: #f5f7fb;     /* alternate section background */
  --cmk-whatsapp: #25d366;
  --cmk-radius-control: 12px;
  --cmk-radius-card: 22px;
  --cmk-shadow: 0 18px 44px rgba(20, 39, 92, 0.14);
  --cmk-shadow-hover: 0 22px 48px rgba(20, 39, 92, 0.16);
  --cmk-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cmk-font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cmk-font-text: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------------ */
/* Browser surfaces                                                    */
/* ------------------------------------------------------------------ */

::selection { background: var(--cmk-yellow); color: var(--cmk-navy); }

.cmk-section a:focus-visible,
.cmk-section button:focus-visible,
.cmk-section input:focus-visible,
.cmk-section select:focus-visible,
.cmk-hero a:focus-visible,
.cmk-coverage :focus-visible,
.cmk-addons :focus-visible + i {
  outline: 3px solid var(--cmk-cyan);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

/* Highlighted words inside the H1: <span class="cmk-hl">...</span> */
.cmk-hl {
  background: var(--cmk-navy);
  color: var(--cmk-yellow);
  padding: 0 0.18em;
  border-radius: 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Right column: photo on a cyan frame, coverage card overlapping bottom-left. */
.cmk-hero-visual > .elementor-widget-wrap {
  position: relative;
  min-height: 460px;
  padding-bottom: 0;
}

.cmk-hero-visual::before {
  content: "";
  position: absolute;
  right: 8%;
  top: 8%;
  width: 62%;
  aspect-ratio: 1 / 1.05;
  border: 6px solid var(--cmk-cyan);
  border-radius: var(--cmk-radius-card);
}

.cmk-hero-visual .elementor-widget-image {
  position: absolute;
  right: 0;
  bottom: -4px;
  width: 78%;
  max-width: 420px;
  margin: 0;
}

.cmk-hero-visual .elementor-widget-image img { display: block; width: 100%; }

.cmk-hero-visual .elementor-widget-shortcode {
  position: absolute;
  left: 0;
  bottom: 96px;
  width: min(330px, 80%);
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Coverage card [comunick_coverage]                                   */
/* ------------------------------------------------------------------ */

.cmk-coverage {
  background: #fff;
  border-radius: 18px;
  padding: 20px 20px 16px;
  box-shadow: 0 18px 50px rgba(20, 39, 92, 0.22);
  font-family: var(--cmk-font-text);
}

.cmk-coverage__title {
  font-family: var(--cmk-font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--cmk-navy);
  margin: 0 0 4px;
}

.cmk-coverage__text { margin: 0 0 12px; font-size: 14px; color: var(--cmk-ink); }

.cmk-coverage select,
.cmk-coverage input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  border: 1.5px solid var(--cmk-line);
  border-radius: 10px;
  background: #fff;
  color: var(--cmk-navy);
  margin: 0 0 8px;
}

.cmk-coverage input::placeholder { color: var(--cmk-ink-soft); }

.cmk-coverage button {
  width: 100%;
  font-family: var(--cmk-font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 13px;
  border: 0;
  border-radius: 10px;
  background: var(--cmk-cyan);
  color: #fff;
  text-transform: none;  /* the theme uppercases buttons */
  letter-spacing: 0;
  cursor: pointer;
  transition: transform 0.18s var(--cmk-ease), box-shadow 0.18s, background-color 0.18s;
}

.cmk-coverage button:hover { background: var(--cmk-navy); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 39, 92, 0.18); }
.cmk-coverage button:active { transform: scale(0.98); }

.cmk-coverage__note { display: block; margin-top: 8px; font-size: 12.5px; color: var(--cmk-ink-soft); }

/* ------------------------------------------------------------------ */
/* Quick-links strip below the hero                                    */
/* ------------------------------------------------------------------ */

.cmk-strip { position: relative; z-index: 2; }

.cmk-strip .elementor-column:not(:last-child) > .elementor-widget-wrap { border-right: 1px solid var(--cmk-line); }

.cmk-strip .elementor-widget-icon-box { margin: 0; transition: transform 0.18s var(--cmk-ease); }
.cmk-strip .elementor-widget-icon-box:hover { transform: translateY(-2px); }

.cmk-strip .elementor-icon-box-icon .elementor-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--cmk-radius-control);
  background: #fbf9d8;
  display: grid;
  place-items: center;
  font-size: 22px !important;
}

/* ------------------------------------------------------------------ */
/* Buttons (Elementor) inside opted-in sections                        */
/* ------------------------------------------------------------------ */

.cmk-hero .elementor-button,
.cmk-section .elementor-button {
  transition: transform 0.18s var(--cmk-ease), box-shadow 0.18s, background-color 0.18s;
}

.cmk-hero .elementor-button:hover,
.cmk-section .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 39, 92, 0.18); }

.cmk-hero .elementor-button:active,
.cmk-section .elementor-button:active { transform: scale(0.98); }

/* ------------------------------------------------------------------ */
/* Plans: tabs + cards (template content restyled from here)           */
/* ------------------------------------------------------------------ */

.cmk-plans .ha-cs-switch-wrapper {
  background: var(--cmk-surface);
  padding: 6px;
  border-radius: 14px;
  display: inline-flex;
  gap: 6px;
  box-shadow: none;
}

.cmk-plans .ha-cs-button {
  background: transparent !important;
  color: var(--cmk-ink) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  font-family: var(--cmk-font-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 12px 22px !important;
  text-shadow: none !important;
  transition: background-color 0.18s, color 0.18s;
}

.cmk-plans .ha-cs-button.active { background: var(--cmk-navy) !important; color: #fff !important; }

.cmk-plans .ha-content-switcher .elementor-column > .elementor-widget-wrap {
  background: #fff;
  border: 1px solid var(--cmk-line);
  border-radius: var(--cmk-radius-card);
  box-shadow: none;
  transition: transform 0.22s var(--cmk-ease), box-shadow 0.22s;
}

.cmk-plans .ha-content-switcher .elementor-column:hover > .elementor-widget-wrap {
  transform: translateY(-4px);
  box-shadow: var(--cmk-shadow-hover);
}

.cmk-plans .ha-content-switcher .elementor-heading-title { font-family: var(--cmk-font-display); color: var(--cmk-navy); }
.cmk-plans .ha-content-switcher .elementor-heading-title .mega { color: var(--cmk-cyan); }
.cmk-plans .ha-content-switcher .elementor-divider-separator { border-color: var(--cmk-line) !important; }
.cmk-plans .ha-content-switcher .elementor-icon-list-text { color: var(--cmk-ink); font-weight: 500; font-size: 15.5px !important; }
.cmk-plans .ha-content-switcher .elementor-icon-list-icon i { color: var(--cmk-cyan); }

/* Price pulse when an add-on is toggled. */
@keyframes cmk-bump { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
.cmk-bump { animation: cmk-bump 0.32s var(--cmk-ease); display: inline-block; }

/* ------------------------------------------------------------------ */
/* Add-on toggles [comunick_addons]                                    */
/* ------------------------------------------------------------------ */

.cmk-addons {
  margin: 4px 18px 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--cmk-line);
  text-align: left;
  font-family: var(--cmk-font-text);
}

.cmk-addons__title {
  font-family: var(--cmk-font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cmk-ink-soft);
  margin: 0 0 8px;
}

.cmk-addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  cursor: pointer;
  font-weight: 400;
}

.cmk-addon b { display: block; font-size: 15px; color: var(--cmk-navy); font-weight: 700; line-height: 1.25; }
.cmk-addon small { display: block; font-size: 13px; color: var(--cmk-ink-soft); line-height: 1.35; }

.cmk-switch { position: relative; width: 44px; height: 24px; flex: none; }
.cmk-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.cmk-switch i {
  position: absolute;
  inset: 0;
  background: #d5dce8;
  border-radius: 999px;
  transition: background-color 0.15s;
  pointer-events: none;
}

.cmk-switch i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(20, 39, 92, 0.3);
  transition: transform 0.15s var(--cmk-ease);
}

.cmk-switch input:checked + i { background: var(--cmk-cyan); }
.cmk-switch input:checked + i::after { transform: translateX(20px); }

/* ------------------------------------------------------------------ */
/* Coverage: city pills [comunick_cities] and technology list           */
/* ------------------------------------------------------------------ */

.cmk-cities { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }

.cmk-cities a {
  font-family: var(--cmk-font-display);
  font-weight: 700;
  font-size: 15px;
  background: #fff;
  border: 1.5px solid var(--cmk-line);
  color: var(--cmk-navy);
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.18s var(--cmk-ease), border-color 0.18s, box-shadow 0.18s;
}

.cmk-cities a:hover { border-color: var(--cmk-cyan); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 39, 92, 0.12); }
.cmk-cities a small { font-weight: 600; color: var(--cmk-ink-soft); margin-left: 6px; font-size: 12px; }

.cmk-tech { display: grid; gap: 12px; }

.cmk-tech div {
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--cmk-radius-control);
  padding: 14px 16px;
  font-size: 15.5px;
  color: #fff;
  font-family: var(--cmk-font-text);
}

.cmk-tech b {
  font-family: var(--cmk-font-display);
  color: var(--cmk-yellow);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 78px;
}

/* Legacy two-tone SVG icons drawn in the old yellow: recolor to the action color. */
.cmk-section .elementor-widget-icon svg [fill="#e4d728"] { fill: var(--cmk-cyan); }
.cmk-section .elementor-widget-icon svg [stroke="#e4d728"] { stroke: var(--cmk-cyan); }

/* ------------------------------------------------------------------ */
/* Testimonials and FAQ                                                */
/* ------------------------------------------------------------------ */

.cmk-section .ha-review { transition: transform 0.22s var(--cmk-ease); }
.cmk-section .ha-review:hover { transform: translateY(-4px); }
.cmk-section .ha-review .ha-review-desc,
.cmk-section .ha-review p { font-family: var(--cmk-font-text) !important; font-size: 17px !important; line-height: 1.6 !important; color: var(--cmk-ink) !important; }
.cmk-section .ha-review .ha-review-reviewer { font-family: var(--cmk-font-display) !important; font-size: 16px !important; color: var(--cmk-navy) !important; }
.cmk-section .ha-review .ha-review-position { font-size: 14px !important; }

.cmk-faq .elementor-accordion .elementor-tab-title { padding: 18px 0; font-family: var(--cmk-font-display); }

/* ------------------------------------------------------------------ */
/* Scroll reveal (classes added by comunick.js)                        */
/* ------------------------------------------------------------------ */

.cmk-will-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--cmk-ease), transform 0.8s var(--cmk-ease);
}

.cmk-will-reveal.cmk-reveal--right { transform: translateX(40px); }
.cmk-will-reveal.cmk-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .cmk-hero-visual > .elementor-widget-wrap { min-height: 400px; }
  .cmk-strip .elementor-column > .elementor-widget-wrap { border-right: 0 !important; border-bottom: 1px solid var(--cmk-line); }
}

@media (max-width: 767px) {
  .cmk-hero-visual > .elementor-widget-wrap { min-height: 0; }
  .cmk-hero-visual::before { display: none; }
  .cmk-hero-visual .elementor-widget-image { position: relative; width: 70%; margin: 0 0 0 auto; bottom: 0; }
  .cmk-hero-visual .elementor-widget-shortcode { position: relative; width: 100%; left: auto; bottom: auto; margin-top: -50px; }
  .cmk-plans .ha-cs-button { font-size: 14px !important; padding: 10px 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cmk-will-reveal { opacity: 1; transform: none; transition: none; }
  .cmk-bump { animation: none; }
  .cmk-hero *, .cmk-section *, .cmk-coverage *, .cmk-cities * { transition: none !important; }
}