/* CIMO — base tokens, layout scaffolding, header/footer/topbar/wa-float.
   Hero/cards styling is deliberately out of scope here (Task 5). */

:root{
  --c-navy:#243B53; --c-teal-d:#1F6F82; --c-teal:#2E8B9E; --c-teal-m:#3E9DB0;
  --c-teal-l:#5FB8C9; --c-overlay:#CFE7EC; --c-gray:#6B7780; --c-bg:#F4F6F7; --c-white:#fff;
  --font: 'Segoe UI', system-ui, Arial, sans-serif;
  --wrap-max: 1180px;
  --gap: 24px;
  --radius: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-navy);
  background: var(--c-bg);
  line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-teal-d); text-decoration: none; }
a:hover, a:focus { color: var(--c-teal); }

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-navy {
  background: var(--c-navy);
  color: var(--c-white);
}
.btn-navy:hover, .btn-navy:focus {
  background: var(--c-teal-d);
  color: var(--c-white);
}

/* ---------- Top bar ---------- */

.cimo-topbar {
  background: var(--c-bg);
  color: var(--c-gray);
  font-size: 0.8rem;
  border-bottom: 1px solid var(--c-overlay);
}
.cimo-topbar .wrap {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ---------- Header ---------- */

.cimo-header {
  background: var(--c-white);
  box-shadow: 0 1px 4px rgba(36, 59, 83, 0.08);
}
.cimo-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}

.cimo-logo {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
}
.cimo-logo svg { display: block; height: 44px; width: auto; }

.cimo-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.cimo-nav a {
  color: var(--c-navy);
  font-weight: 500;
  font-size: 0.95rem;
}
.cimo-nav a:hover, .cimo-nav a:focus { color: var(--c-teal); }

.cimo-social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cimo-social a {
  color: var(--c-teal-d);
  display: inline-flex;
}
.cimo-social a:hover, .cimo-social a:focus { color: var(--c-teal); }

@media (max-width: 782px) {
  .cimo-header .wrap { flex-direction: column; align-items: flex-start; }
  .cimo-nav ul { gap: 12px; }
}

/* ---------- Main content scaffold ---------- */

.cimo-main {
  padding: 40px 0;
  min-height: 200px;
}

/* ---------- Footer ---------- */

.cimo-footer {
  background: var(--c-teal-d);
  color: var(--c-white);
  margin-top: 60px;
}
.cimo-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: space-between;
  padding-top: 36px;
  padding-bottom: 36px;
}
.cimo-footer a { color: var(--c-overlay); }
.cimo-footer a:hover, .cimo-footer a:focus { color: var(--c-white); }
.cimo-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Floating WhatsApp button ---------- */

.cimo-wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 999;
  transition: transform .15s ease;
}
.cimo-wa-float:hover, .cimo-wa-float:focus {
  color: var(--c-white);
  transform: scale(1.08);
}

/* ======================================================================
   Task 5 — Home (front-page.php): hero, cards, sections
   ====================================================================== */

/* ---------- Outline buttons (hero/cards use white outline over color) ---------- */

.btn-outline-white {
  background: transparent;
  color: var(--c-white);
  border-color: var(--c-white);
}
.btn-outline-white:hover, .btn-outline-white:focus {
  background: var(--c-white);
  color: var(--c-teal-d);
}

.btn-outline-navy {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.btn-outline-navy:hover, .btn-outline-navy:focus {
  background: var(--c-navy);
  color: var(--c-white);
}

/* ---------- Hero ----------
   Placeholder background: CSS gradient in teal tones, layered under an
   optional real photo. To swap in the real photo later, just drop a file
   at assets/img/hero.jpg — the gradient below already sits as the first
   (bottom) layer and the image URL is listed after it, so once the file
   exists the browser paints the photo on top automatically (no code
   change needed). Until the file exists, 404s on background-image are
   silent and the gradient alone is shown.
*/

.cimo-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-color: var(--c-overlay); /* fallback se a foto não carregar */
  background-image:
    linear-gradient(90deg, var(--c-overlay) 0%, rgba(207, 231, 236, 0.72) 38%, rgba(207, 231, 236, 0.10) 100%),
    url('../img/hero.jpg');
  background-repeat: no-repeat;
  background-position: center, right center;
  background-size: cover, cover;
  color: var(--c-navy);
  overflow: hidden;
}

.cimo-hero__wrap {
  position: relative;
  z-index: 1;
  padding-top: 96px;
  padding-bottom: 140px;
}

.cimo-hero__content {
  max-width: 620px;
}

.cimo-hero__title {
  margin: 0 0 20px;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--c-navy);
}

.cimo-hero__subtitle {
  margin: 0 0 32px;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--c-navy);
  max-width: 520px;
}

.cimo-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.cimo-hero__ctas .btn-outline-white {
  border-color: var(--c-navy);
  color: var(--c-navy);
}
.cimo-hero__ctas .btn-outline-white:hover, .cimo-hero__ctas .btn-outline-white:focus {
  background: var(--c-navy);
  color: var(--c-white);
}

@media (max-width: 782px) {
  .cimo-hero { min-height: 460px; }
  .cimo-hero__wrap { padding-top: 56px; padding-bottom: 120px; }
}

/* ---------- Cards (overlap the hero bottom) ---------- */

.cimo-cards {
  margin-top: -96px;
  position: relative;
  z-index: 2;
}

.cimo-cards__wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.cimo-card {
  padding: 40px 28px;
  border-radius: var(--radius);
  color: var(--c-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 12px 28px rgba(36, 59, 83, 0.18);
}

.cimo-card--d { background: var(--c-teal-d); }
.cimo-card--m { background: var(--c-teal); }
.cimo-card--l { background: var(--c-teal-m); }

.cimo-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.cimo-card__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.95;
}

@media (max-width: 900px) {
  .cimo-cards__wrap { grid-template-columns: 1fr; }
  .cimo-cards { margin-top: -60px; }
}

/* ---------- Section scaffolding ---------- */

.cimo-section {
  padding: 64px 0;
}
.cimo-section h2 {
  margin: 0 0 24px;
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--c-navy);
}
.cimo-section p {
  max-width: 760px;
  line-height: 1.7;
}
.cimo-section:nth-of-type(even) {
  background: var(--c-white);
}

.cimo-about p + p { margin-top: 16px; }

/* ---------- Grids: especialidades / médicos ---------- */

.cimo-grid {
  display: grid;
  gap: var(--gap);
}
.cimo-grid--especialidades {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.cimo-grid--medicos {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.cimo-mini-card {
  display: block;
  padding: 20px;
  background: var(--c-bg);
  border: 1px solid var(--c-overlay);
  border-radius: var(--radius);
  color: var(--c-navy);
  font-weight: 600;
  transition: border-color .15s ease, background-color .15s ease;
}
.cimo-mini-card:hover, .cimo-mini-card:focus {
  border-color: var(--c-teal);
  background: var(--c-overlay);
  color: var(--c-navy);
}

.cimo-medico-card {
  background: var(--c-bg);
  border: 1px solid var(--c-overlay);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cimo-medico-card__thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.cimo-medico-card__title {
  display: block;
  padding: 16px 16px 4px;
  font-weight: 600;
  color: var(--c-navy);
}
.cimo-medico-card__especialidade {
  display: block;
  padding: 0 16px 16px;
  font-size: 0.9rem;
  color: var(--c-gray);
}

/* ---------- Unidade ---------- */

.cimo-unidade p { margin: 0 0 8px; }
.cimo-unidade .btn { margin-top: 12px; }

/* ---------- Final CTA band ---------- */

.cimo-cta-final {
  background: var(--c-navy);
  color: var(--c-white);
  text-align: center;
}
.cimo-cta-final h2 { color: var(--c-white); }
.cimo-cta-final p {
  margin: 0 auto 28px;
  color: var(--c-overlay);
}
.cimo-cta-final .btn-outline-white {
  border-color: var(--c-white);
}

/* ======================================================================
   Task 7 — Especialidades: archive grid, single breadcrumb/CTA
   ====================================================================== */

.cimo-archive-header {
  padding: 8px 0 32px;
}
.cimo-archive-header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 300;
  color: var(--c-navy);
}

.cimo-grid--especialidades-archive {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.cimo-especialidade-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px;
  background: var(--c-white);
  border: 1px solid var(--c-overlay);
  border-radius: var(--radius);
}
.cimo-especialidade-card__title {
  margin: 0;
  font-size: 1.15rem;
}
.cimo-especialidade-card__title a {
  color: var(--c-navy);
}
.cimo-especialidade-card__title a:hover,
.cimo-especialidade-card__title a:focus {
  color: var(--c-teal);
}
.cimo-especialidade-card__resumo {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-gray);
}
.cimo-especialidade-card .btn {
  margin-top: auto;
}

.cimo-breadcrumb {
  padding: 20px 0 0;
  font-size: 0.85rem;
  color: var(--c-gray);
}
.cimo-breadcrumb a { color: var(--c-teal-d); }
.cimo-breadcrumb a:hover, .cimo-breadcrumb a:focus { color: var(--c-teal); }
.cimo-breadcrumb__sep { margin: 0 6px; }
.cimo-breadcrumb__current { color: var(--c-navy); }

.cimo-especialidade-single {
  padding: 24px 0 48px;
  max-width: 760px;
}
.cimo-especialidade-single h1 {
  margin: 8px 0 24px;
  font-size: 2rem;
  font-weight: 300;
  color: var(--c-navy);
}
.cimo-especialidade-single .entry-content p {
  line-height: 1.7;
  margin: 0 0 16px;
}

.cimo-cta-final--single {
  margin-top: 24px;
}

/* ======================================================================
   Task 8 — Corpo Clínico: archive grid, avatar placeholder, single
   ====================================================================== */

.cimo-archive-header p {
  margin: 8px 0 0;
  color: var(--c-gray);
  max-width: 640px;
  line-height: 1.6;
}

.cimo-grid--medicos-archive {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.cimo-medico-card {
  align-items: flex-start;
  padding: 24px;
  background: var(--c-white);
  gap: 4px;
}
.cimo-medico-card__thumb {
  display: block;
  width: 100%;
  margin: -24px -24px 16px;
  width: calc(100% + 48px);
  overflow: hidden;
}
.cimo-medico-card__thumb img,
.cimo-medico-card__thumb .cimo-medico-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.cimo-medico-card__title {
  padding: 0;
  font-size: 1.1rem;
}
.cimo-medico-card__especialidade {
  padding: 0;
  font-weight: 500;
  color: var(--c-teal-d);
}
.cimo-medico-card__registro {
  margin: 4px 0 12px;
  font-size: 0.85rem;
  color: var(--c-gray);
}
.cimo-medico-card__cta {
  margin-top: auto;
}

.cimo-medico-avatar {
  background: var(--c-overlay);
}

.cimo-medico-single {
  padding: 24px 0 48px;
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}
.cimo-medico-single__media {
  width: 200px;
  flex: 0 0 200px;
  border-radius: 50%;
  overflow: hidden;
}
.cimo-medico-single__media img,
.cimo-medico-single__media .cimo-medico-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.cimo-medico-single__info {
  flex: 1 1 320px;
}
.cimo-medico-single__info h1 {
  margin: 0 0 8px;
  font-size: 2rem;
  font-weight: 300;
  color: var(--c-navy);
}
.cimo-medico-single__especialidade {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--c-teal-d);
}
.cimo-medico-single__registro {
  margin: 0 0 24px;
  font-size: 0.9rem;
  color: var(--c-gray);
}

/* ======================================================================
   Task 10 — Páginas institucionais (A Clínica, Exames, Contato, genérica)
   ====================================================================== */

.cimo-page {
  padding: 24px 0 48px;
  max-width: 760px;
}
.cimo-page h1 {
  margin: 8px 0 24px;
  font-size: 2rem;
  font-weight: 300;
  color: var(--c-navy);
}
.cimo-page .entry-content p {
  line-height: 1.7;
  margin: 0 0 16px;
}

.cimo-section--inline {
  padding: 0 0 32px;
  max-width: 760px;
}
.cimo-section--inline h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--c-navy);
}
.cimo-section--inline p {
  max-width: none;
}

.cimo-list {
  margin: 0 0 16px;
  padding-left: 20px;
  line-height: 1.7;
}

/* ======================================================================
   Task 12 — Blog: listagem (home/archive), single post, navegação
   ====================================================================== */

.cimo-grid--blog {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cimo-blog-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px;
  background: var(--c-white);
  border: 1px solid var(--c-overlay);
  border-radius: var(--radius);
}
.cimo-blog-card__title {
  margin: 0;
  font-size: 1.15rem;
}
.cimo-blog-card__title a {
  color: var(--c-navy);
}
.cimo-blog-card__title a:hover,
.cimo-blog-card__title a:focus {
  color: var(--c-teal);
}
.cimo-blog-card__meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--c-gray);
}
.cimo-blog-card__excerpt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-gray);
}
.cimo-blog-card__more {
  margin-top: auto;
  font-weight: 600;
  color: var(--c-teal-d);
}
.cimo-blog-card__more:hover,
.cimo-blog-card__more:focus {
  color: var(--c-teal);
}

.cimo-archive-header__desc {
  margin: 8px 0 0;
  color: var(--c-gray);
  max-width: 640px;
  line-height: 1.6;
}

.cimo-blog-single {
  padding: 24px 0 48px;
  max-width: 760px;
}
.cimo-blog-single h1 {
  margin: 8px 0 8px;
  font-size: 2rem;
  font-weight: 300;
  color: var(--c-navy);
}
.cimo-blog-single__meta {
  margin: 0 0 24px;
  font-size: 0.9rem;
  color: var(--c-gray);
}
.cimo-blog-single__meta a {
  color: var(--c-teal-d);
}
.cimo-blog-single__meta a:hover,
.cimo-blog-single__meta a:focus {
  color: var(--c-teal);
}
.cimo-blog-single .entry-content p {
  line-height: 1.7;
  margin: 0 0 16px;
}

.cimo-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin: 8px 0 48px;
  padding-top: 24px;
  border-top: 1px solid var(--c-overlay);
  flex-wrap: wrap;
}
.cimo-post-nav a {
  color: var(--c-teal-d);
  font-weight: 500;
}
.cimo-post-nav a:hover,
.cimo-post-nav a:focus {
  color: var(--c-teal);
}
.cimo-post-nav__next {
  margin-left: auto;
  text-align: right;
}

.pagination,
.navigation.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 48px;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--c-overlay);
  border-radius: var(--radius);
  color: var(--c-navy);
}
.pagination .page-numbers.current {
  background: var(--c-navy);
  color: var(--c-white);
  border-color: var(--c-navy);
}
.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
  border-color: var(--c-teal);
  color: var(--c-teal-d);
}

/* ======================================================================
   Task 13 — Responsividade + acessibilidade
   Breakpoints: tablet ≤1024px, mobile ≤768px.
   Rules below are additive only; nothing above is modified or removed.
   ====================================================================== */

/* ---------- Global: no horizontal overflow ---------- */

html, body {
  overflow-x: hidden;
}

/* ---------- Accessibility: screen-reader-only utility ---------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Accessibility: visible keyboard focus ---------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.cimo-nav-toggle:focus-visible,
.cimo-mini-card:focus-visible,
.cimo-medico-card a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--c-teal-l);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Note on contrast: .cimo-footer a uses var(--c-overlay) (#CFE7EC) text on
   var(--c-teal-d) (#1F6F82) background — that pairing is ~4.6:1, passes
   WCAG AA for normal text. .cimo-blog-card__meta / .cimo-especialidade-card__resumo
   use var(--c-gray) (#6B7780) on white, ~4.6:1, also AA-compliant. No token
   pairing changes were needed. */

/* ---------- Mobile nav toggle (hamburger) ---------- */

.cimo-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--c-navy);
  cursor: pointer;
}
/* No-JS fallback: without html.cimo-js the nav is always visible (see the
   ≤768px rules below), so the toggle button itself stays hidden — there's
   nothing for it to control and it would otherwise be a dead control. */
html:not(.cimo-js) .cimo-nav-toggle {
  display: none !important;
}
.cimo-nav-toggle:hover,
.cimo-nav-toggle:focus {
  color: var(--c-teal);
}
.cimo-nav-toggle__icon {
  display: block;
}

/* ---------- Tablet breakpoint (≤1024px) ---------- */

@media (max-width: 1024px) {
  .cimo-hero__wrap {
    padding-top: 48px;
    padding-bottom: 100px;
  }
  .cimo-hero__content {
    max-width: 100%;
  }

  .cimo-cards__wrap {
    grid-template-columns: repeat(2, 1fr);
  }

  .cimo-medico-single {
    gap: 24px;
  }
}

/* ---------- Mobile breakpoint (≤768px) ---------- */

@media (max-width: 768px) {
  /* Header: collapse nav behind hamburger toggle */
  .cimo-header .wrap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .cimo-logo {
    margin-right: auto;
  }
  .cimo-nav-toggle {
    display: inline-flex;
    order: 1;
  }
  .cimo-nav {
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }
  /* Progressive enhancement: only hide the nav behind the toggle once JS
     has run (html.cimo-js, set in main.js). Without JS the nav stays
     visible and stacked so it's always reachable. */
  html.cimo-js .cimo-nav {
    display: none;
  }
  html.cimo-js .cimo-nav.is-open {
    display: block;
  }
  .cimo-nav ul {
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
  }
  .cimo-nav a {
    display: flex;
    align-items: center;
    padding: 10px 4px;
    min-height: 44px;
  }
  .btn-navy {
    order: 2;
  }
  .cimo-social {
    order: 4;
    flex-basis: 100%;
    justify-content: flex-start;
    padding-top: 8px;
  }
  .cimo-social a {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .cimo-topbar {
    font-size: 0.75rem;
  }
  .cimo-topbar .wrap {
    word-break: break-word;
  }

  /* Hero: stack text/photo, reduce overlap offset */
  .cimo-hero {
    min-height: 0;
  }
  .cimo-hero__wrap {
    padding-top: 40px;
    padding-bottom: 80px;
  }
  .cimo-hero__title {
    font-size: 1.9rem;
  }
  .cimo-hero__subtitle {
    max-width: 100%;
  }
  .cimo-hero__ctas .btn {
    width: 100%;
  }

  /* Cards: 3 -> 1 column */
  .cimo-cards__wrap {
    grid-template-columns: 1fr;
  }
  .cimo-cards {
    margin-top: -48px;
  }

  /* Grids: médicos / especialidades / procedimentos / blog -> 1 column */
  .cimo-grid,
  .cimo-grid--especialidades,
  .cimo-grid--medicos,
  .cimo-grid--especialidades-archive,
  .cimo-grid--medicos-archive,
  .cimo-grid--blog {
    grid-template-columns: 1fr;
  }

  /* Médico single: stack media above info */
  .cimo-medico-single {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cimo-medico-single__media {
    width: 160px;
    flex: 0 0 160px;
  }

  /* Footer: stack columns */
  .cimo-footer .wrap {
    flex-direction: column;
  }

  /* Post nav: stack prev/next */
  .cimo-post-nav {
    flex-direction: column;
  }
  .cimo-post-nav__next {
    margin-left: 0;
    text-align: left;
  }

  /* Floating WhatsApp button: keep clear of footer content, tap target ok */
  .cimo-wa-float {
    right: 12px;
    bottom: 12px;
    width: 52px;
    height: 52px;
  }
}

/* Ensure the floating WhatsApp button never overlaps the last footer
   content on very short/narrow viewports by giving the footer breathing
   room at its base. */
.cimo-footer {
  padding-bottom: 8px;
}

/* --- Logo (imagem PNG real) --- */
.cimo-logo{display:inline-flex;align-items:center;line-height:0}
.cimo-logo-img{height:52px;width:auto;display:block}
@media (max-width:768px){ .cimo-logo-img{height:42px} }

/* ======================================================================
   Unidades — cards completos (página Unidades / Contato) e lista
   compacta (home / rodapé). Reaproveita tokens e .cimo-grid existentes.
   ====================================================================== */

.cimo-grid--unidades {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 32px;
}

.cimo-unit-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--c-bg);
  border: 1px solid var(--c-overlay);
  border-radius: var(--radius);
}

.cimo-unit-card__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-navy);
}

.cimo-unit-card__city {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-teal-d);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cimo-unit-card__address,
.cimo-unit-card__phone,
.cimo-unit-card__hours {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--c-gray);
}

.cimo-unit-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.cimo-unit-card__actions .btn {
  padding: 10px 18px;
  font-size: 0.88rem;
}

/* ---------- Lista compacta (home) ---------- */

.cimo-grid--unidades-mini {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-bottom: 28px;
}

.cimo-unit-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  background: var(--c-white);
  border: 1px solid var(--c-overlay);
  border-radius: var(--radius);
}

.cimo-unit-mini__city {
  font-weight: 600;
  color: var(--c-navy);
}

.cimo-unit-mini__address {
  font-size: 0.88rem;
  color: var(--c-gray);
}

.cimo-unit-mini__wa {
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-teal-d);
}

/* ---------- Lista compacta (rodapé) ---------- */

.cimo-footer__unidades {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
}

.cimo-footer__unidades-link {
  margin: 0 0 12px;
}

@media (max-width: 768px) {
  .cimo-grid--unidades,
  .cimo-grid--unidades-mini {
    grid-template-columns: 1fr;
  }
}