/*
 * Cosmo Clinic — Refinement Stylesheet (v5 — clean consolidation)
 * Scope: surgical overrides that preserve the site's native look.
 * Benchmark: treatment pages (e.g. /preenchimentos/) — don't break these.
 * Updated: 2026-04-23
 */

/* ============================================
 * 2. BUTTONS — use NATIVE pattern (line-height = height, 0 vertical padding)
 * Native: padding:0 24px; line-height:4rem (40px tall). Centered by line-height.
 * We override ONLY: pill radius, colors, font-size, hover.
 * ============================================ */
.btn, a.btn, button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 2.4rem !important;
  height: 4rem !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  width: max-content !important;
  min-height: 0 !important;
}
@media (min-width: 1008px) {
  .btn, a.btn, button.btn {
    padding: 0 2.8rem !important;
    height: 4.4rem !important;
    font-size: 1.5rem !important;
  }
}
a.btn:hover, button.btn:hover, .btn:hover { text-decoration: none !important; }

/* Theme JS wraps button text: <a class="btn"><span class="btn__content-wrapper"><span class="btn__content--1">text</span><span class="btn__content--2">text</span></span></a>
   Native rule makes --1/--2 position:absolute, height:100%. Wrapper collapses to height:0, so children render at 0×0 = text invisible.
   Fix: force wrapper to fill button height, and center text inside each content span. */
.btn .btn__content-wrapper {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* width set inline by theme JS based on text width — don't override */
}
.btn .btn__content,
.btn .btn__content--1,
.btn .btn__content--2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.btn--primary, a.btn--primary {
  background: var(--color-theme-black) !important;
  color: var(--color-theme-white) !important;
  border-color: var(--color-theme-black) !important;
}
.btn--primary:hover, a.btn--primary:hover {
  background: var(--color-theme-accent-2) !important;
  border-color: var(--color-theme-accent-2) !important;
  color: var(--color-theme-black) !important;
}
.btn--secondary, a.btn--secondary {
  background: var(--color-theme-white) !important;
  color: var(--color-theme-black) !important;
  border-color: var(--color-theme-black) !important;
}
.btn--secondary:hover, a.btn--secondary:hover {
  background: var(--color-theme-black) !important;
  color: var(--color-theme-white) !important;
  border-color: var(--color-theme-black) !important;
}

/* Header CTA — shorter, keeps header bar compact */
.header__buttons .btn--primary, .header__buttons a.btn.btn--primary {
  padding: 0 2rem !important;
  height: 3.6rem !important;
  font-size: 1.3rem !important;
}
@media (min-width: 1008px) {
  .header__buttons .btn--primary, .header__buttons a.btn.btn--primary {
    height: 3.8rem !important;
    padding: 0 2.2rem !important;
    font-size: 1.35rem !important;
  }
}

/* Form submit button — full width stays, but line-height as height */
.form__field--submit .btn {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================
 * 4. HOMEPAGE "TRATAMENTOS" — clinicafmr style
 * ============================================ */
.services__list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem 1.6rem !important;
  margin: 0 auto !important;
  /* No width override — inherits 108rem from the site-wide .container rule below */
}
@media (min-width: 769px) {
  .services__list { grid-template-columns: repeat(4, 1fr) !important; gap: 2rem !important; }
}
.services__item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  gap: 0.8rem;
  transition: transform 0.3s ease;
}
.services__item:hover { transform: translateY(-2px); }
.services__item__image {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1 !important;
  max-height: 18rem !important;
  overflow: hidden;
  background: none !important;
  border-radius: 0.8rem !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
}
@media (min-width: 1008px) { .services__item__image { max-height: 20rem !important; } }
@media (min-width: 1216px) { .services__item__image { max-height: 22rem !important; } }
.services__item__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  mix-blend-mode: normal !important;
  filter: brightness(1.02) saturate(0.88) contrast(1.02);
  transition: transform 0.6s ease;
}
.services__item:hover .services__item__image img { transform: scale(1.03); }
.services__item__counter { display: none !important; }
.services__item__content {
  position: relative !important;
  bottom: auto !important; left: auto !important;
  padding: 0 !important;
  z-index: 1 !important;
  flex-direction: column !important;
  gap: 0.3rem;
  justify-content: center !important;
  align-items: center !important;
}
.services__item__content h3, .services__item__content h3 a {
  color: var(--color-theme-black) !important;
  text-align: center !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
@media (min-width: 1008px) {
  .services__item__content h3, .services__item__content h3 a { font-size: 1.5rem !important; }
}
.services__item__content::after {
  content: "Ver tratamentos →";
  font-size: 1rem;
  color: var(--color-theme-accent-2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 0.1rem;
}
.services__item .btn--arrow { display: none !important; }

/* ============================================
 * 5. HOMEPAGE FAQ — compact cards
 * ============================================ */
.faq-question {
  padding: 1.6rem 2rem !important;
  border-radius: 0.8rem !important;
  margin-bottom: 0.8rem !important;
  border: 1px solid rgba(35, 31, 32, 0.06) !important;
  box-shadow: none !important;
}
@media (min-width: 1008px) { .faq-question { padding: 1.8rem 2.4rem !important; } }
.faq-question__header h3 {
  font-size: 1.55rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
@media (min-width: 1008px) { .faq-question__header h3 { font-size: 1.7rem !important; } }
/* FAQ accordion arrow — explicit contrasting circular bg so it renders
 * consistently on every item. Native btn--arrow-4 inherits gray-light bg from
 * cascade which matches the page bg and disappears against beige sections. */
.faq-question .btn--arrow,
.faq-question__header .btn--arrow,
.faq-question .btn--arrow-4,
.faq-question__header .btn--arrow-4 {
  width: 3.2rem !important;
  height: 3.2rem !important;
  flex: 0 0 3.2rem !important;
  border-radius: 50% !important;
  background-color: var(--color-theme-white) !important;
  border: 1px solid rgba(35, 31, 32, 0.1) !important;
  box-shadow: 0 1px 2px rgba(35, 31, 32, 0.04) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.faq-question:hover .btn--arrow,
.faq-question:hover .btn--arrow-4 {
  background-color: var(--color-theme-accent-3) !important;
  border-color: var(--color-theme-accent-3) !important;
  box-shadow: 0 2px 6px rgba(224, 150, 114, 0.18) !important;
}
.faq-question.is-open .btn--arrow,
.faq-question.is-open .btn--arrow-4,
.faq-question.is-active .btn--arrow,
.faq-question.is-active .btn--arrow-4,
.faq-question[aria-expanded="true"] .btn--arrow,
.faq-question[aria-expanded="true"] .btn--arrow-4 {
  background-color: var(--color-theme-accent-2) !important;
  border-color: var(--color-theme-accent-2) !important;
}
/* Native JS adds .is-active — keep icon white (native CSS would set it to dark on open) */
.faq-question.is-open .btn--arrow::after,
.faq-question.is-open .btn--arrow-4::after,
.faq-question.is-active .btn--arrow::after,
.faq-question.is-active .btn--arrow-4::after,
.faq-question[aria-expanded="true"] .btn--arrow::after,
.faq-question[aria-expanded="true"] .btn--arrow-4::after {
  background-color: white !important;
}
.faq-question__content p {
  padding-right: 1.2rem !important;
  padding-top: 0.8rem !important;
  font-size: 1.5rem !important;
  line-height: 1.55 !important;
  color: var(--color-theme-gray) !important;
}
@media (min-width: 1008px) { .faq-question__content p { padding-right: 3rem !important; } }
.faq-block__text__cta {
  padding: 2rem 2.4rem !important;
  border-radius: 0.8rem !important;
}
@media (min-width: 1008px) { .faq-block__text__cta { padding: 2.4rem 3rem !important; } }
.faq-block__text__cta h3 { font-size: 1.8rem !important; margin-bottom: 0.8rem !important; }
.faq-block__text__cta p {
  font-size: 1.4rem !important; line-height: 1.55 !important; margin-bottom: 1.6rem !important;
}

/* (Section 6 removed 2026-04-24 — homepage gallery replaced by .cases-grid
 *  pattern below, no longer uses .gallery__item__image class.) */

/* ============================================
 * 7. HOMEPAGE CONTACT FORM
 * ============================================ */
.contact-us__inner {
  padding: 2.4rem !important;
  border-radius: 1.2rem !important;
}
@media (min-width: 769px) { .contact-us__inner { padding: 3.2rem !important; border-radius: 1.6rem !important; } }
@media (min-width: 1008px) { .contact-us__inner { padding: 4rem 5rem !important; border-radius: 2rem !important; } }
.contact-us__content h2 {
  font-size: clamp(2.2rem, 3.5vw, 3rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 1.2rem !important;
}
.contact-us__content p {
  font-size: 1.45rem !important;
  line-height: 1.55 !important;
  margin-bottom: 2rem !important;
  max-width: 50rem;
}
/* Text/email/textarea — scoped, DON'T touch tel */
.contact-us__content__form input[type="text"],
.contact-us__content__form input[type="email"],
.contact-us__content__form textarea {
  width: 100% !important;
  padding: 1rem 1.4rem !important;
  font-size: 1.4rem !important;
  line-height: 1.3 !important;
  border-radius: 0.4rem !important;
  border: 1px solid rgba(35, 31, 32, 0.12) !important;
  background: var(--color-theme-white) !important;
  color: var(--color-theme-black) !important;
  min-height: 0 !important;
  box-sizing: border-box;
}
.contact-us__content__form textarea { min-height: 8rem !important; resize: vertical; }
.contact-us__content__form input:focus,
.contact-us__content__form textarea:focus {
  border-color: var(--color-theme-black) !important;
  outline: none !important;
}
.contact-us__content__form .form__field label {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.4rem !important;
  line-height: 1.3 !important;
  color: var(--color-theme-black) !important;
  display: block !important;
}
.contact-us__content__form input[type="tel"] {
  font-size: 1.4rem !important;
  background: var(--color-theme-white) !important;
  color: var(--color-theme-black) !important;
}

/* ============================================
 * 8. TREATMENT PAGES — cards (benchmark — treat carefully)
 * ============================================ */
.services-list__item__content { padding: 1.2rem 1.4rem !important; }
.services-list__item__content h2, .services-list__item__content h2 a {
  font-size: 1.4rem !important; line-height: 1.3 !important;
}
@media (min-width: 1008px) {
  .services-list__item__content h2, .services-list__item__content h2 a { font-size: 1.6rem !important; }
}
.services-list__item__category {
  font-size: 1.05rem !important;
  padding: 0.4rem 0.8rem !important;
}
.single-service__result { padding: 0.8rem 1.2rem !important; }
.single-service__result img { max-width: 3.6rem !important; height: auto !important; }
.single-service__result p { font-size: 1.35rem !important; line-height: 1.3 !important; }

/* ============================================
 * 9. BLOG
 * ============================================ */
/* Hide hero on individual post pages */
.single-post .blog-hero-image,
.blog-post .blog-hero-image { display: none !important; }

/* Search */
#blog-search {
  border-radius: 999px !important;
  padding: 1.2rem 1.6rem 1.2rem 4.8rem !important;
  font-size: 1.5rem !important;
  border: 1px solid rgba(35, 31, 32, 0.12) !important;
  background: var(--color-theme-white) !important;
  font-family: var(--global-font-family) !important;
  color: var(--color-theme-black) !important;
}
#blog-search::placeholder { color: var(--color-theme-gray) !important; }
#blog-search:focus {
  border-color: var(--color-theme-accent-2) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(224, 150, 114, 0.15) !important;
}

/* Category filter pills */
.blog-categories__pill {
  display: inline-block !important;
  padding: 0.8rem 1.8rem !important;
  font-size: 1.35rem !important;
  border: 1px solid var(--color-theme-gray-medium) !important;
  color: var(--color-theme-black) !important;
  background: var(--color-theme-white) !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.blog-categories__pill:hover,
.blog-categories__pill.is-active {
  background: var(--color-theme-black) !important;
  color: var(--color-theme-white) !important;
  border-color: var(--color-theme-black) !important;
}

.blog-featured__body { padding: 2.4rem !important; }
@media (min-width: 769px) { .blog-featured__body { padding: 3rem !important; } }
.blog-card__body { padding: 1.6rem 1.8rem !important; }
.blog-related-card__body { padding: 1.2rem 1.4rem !important; }
.blog-related-card__title { font-size: 1.4rem !important; }
/* (.blog-hero-meta__mark canonical rule lives in section 24 below, sized 4rem.
 *  Earlier 3rem override removed 2026-04-27 — was breaking flex centering of "CC"
 *  inside the coral circle in blog post bylines.) */

/* Newsletter pill input */
.blog-newsletter-wrap input { border-radius: 999px !important; }

/* ============================================
 * 10. REVIEWS — enable touch scroll
 * ============================================ */
.reviews__list.swiper { cursor: grab; }
.reviews__list.swiper:active { cursor: grabbing; }

/* ============================================
 * 11. GALERIA PAGE — tighter
 * ============================================ */
.page-gallery__content { margin-bottom: 3rem !important; }
@media (min-width: 1008px) { .page-gallery__content { margin-bottom: 4.8rem !important; } }
.page-gallery__content__nav-item {
  font-size: 1.4rem !important;
  padding: 0.8rem 1.2rem !important;
}
@media (min-width: 1008px) { .page-gallery__content__nav-item { padding: 0.8rem 1.6rem !important; } }

/* ============================================
 * AUDIT FIXES (2026-04-23 final pass)
 * ============================================ */

/* Fix #5: Blog hero hide — broader selector to cover all body classes we use */
body.single-post .blog-hero-image,
body.blog-post .blog-hero-image,
.single-post.blog-post .blog-hero-image { display: none !important; }

/* (Contact-us-scoped phone field rules removed 2026-04-24 — the global
 *  .form__field--tel rules further down now cover ALL forms uniformly.) */
.contact-us__content__form .form__field--tel input[type="tel"] {
  box-sizing: border-box;
  min-height: 0 !important;
}

/* Fix #7: Contact section — force intended margin-top */
@media (min-width: 769px) {
  section}
@media (min-width: 1008px) {
  section}

/* Services item image — drop forced max-height so aspect-ratio controls size */
.services__item__image {
  max-height: none !important;
}

/* Fix #9: Footer newsletter submit button (btn--arrow-6) */
.footer__form .btn--arrow-6,
.footer__form button.btn--arrow-6 {
  width: 4rem !important;
  height: 4rem !important;
  flex: 0 0 4rem !important;
  border-radius: 50% !important;
}

/* Fix #10: Language switcher opacity logic lives in the unified block below
 * (search for "LANGUAGE SWITCHER FLAGS"). This placeholder kept to preserve
 * line numbering in diffs. */



/* ============================================
 * HOVER INTERACTIONS — site-wide polish
 * Principles: subtle, functional, consistent timing (200-300ms),
 * cubic-bezier easing, respects prefers-reduced-motion.
 * ============================================ */

:root {
  --hover-lift: translateY(-3px);
  --hover-shadow-card: 0 10px 24px rgba(35, 31, 32, 0.08);
  --hover-shadow-featured: 0 16px 40px rgba(35, 31, 32, 0.1);
  --hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hover-duration: 0.3s;
  --hover-duration-fast: 0.2s;
}

/* === Treatment category cards (services-list on /preenchimentos/ etc.) === */
.services-list__item {
  transition: transform var(--hover-duration) var(--hover-ease),
              box-shadow var(--hover-duration) var(--hover-ease) !important;
}
.services-list__item:hover {
  transform: var(--hover-lift) !important;
  box-shadow: var(--hover-shadow-card) !important;
}
.services-list__item-image img {
  transition: transform 0.6s var(--hover-ease) !important;
}
.services-list__item:hover .services-list__item-image img {
  transform: scale(1.04) !important;
}

/* === Homepage Tratamentos cards === */
.services__item {
  transition: transform var(--hover-duration) var(--hover-ease) !important;
}
.services__item:hover {
  transform: var(--hover-lift) !important;
}
.services__item__image img {
  transition: transform 0.6s var(--hover-ease) !important;
}
.services__item:hover .services__item__image img {
  transform: scale(1.05) !important;
}

/* === Blog listing cards === */
.blog-featured,
.blog-card,
.blog-related-card,
.blog-related-treatments__card {
  transition: transform var(--hover-duration) var(--hover-ease),
              box-shadow var(--hover-duration) var(--hover-ease) !important;
}
.blog-featured:hover,
.blog-card:hover,
.blog-related-card:hover,
.blog-related-treatments__card:hover {
  transform: var(--hover-lift) !important;
  box-shadow: var(--hover-shadow-card) !important;
}
.blog-featured:hover { box-shadow: var(--hover-shadow-featured) !important; }

/* Blog card images */
.blog-featured__image,
.blog-card__image,
.blog-related-card__image {
  transition: transform 0.6s var(--hover-ease);
}
.blog-featured:hover .blog-featured__image,
.blog-card:hover .blog-card__image,
.blog-related-card:hover .blog-related-card__image {
  transform: scale(1.03);
}

/* === Navigation hover (already has color change, add underline gesture) === */
#primary-menu li a {
  position: relative;
}
#primary-menu li a::after {
  content: "";
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: calc(100% - 2.8rem);
  height: 1.5px;
  background: var(--color-theme-accent-2);
  transition: transform var(--hover-duration-fast) var(--hover-ease);
  transform-origin: center;
}
#primary-menu li a:hover::after,
#primary-menu li a[aria-current="page"]::after {
  transform: translateX(-50%) scaleX(1);
}

/* === Footer social icons — scale on hover === */

/* === Footer menu links — subtle slide === */

/* === Blog search input — already has focus ring; add subtle scale === */
#blog-search {
  transition: border-color var(--hover-duration-fast) ease,
              box-shadow var(--hover-duration-fast) ease !important;
}

/* === Breadcrumb links === */
.breadcrumbs a,
#breadcrumbs a {
  transition: color var(--hover-duration-fast) ease !important;
}
.breadcrumbs a:hover,
#breadcrumbs a:hover {
  color: var(--color-theme-accent-2) !important;
}

/* === Category filter pills — already styled === */
.blog-categories__pill {
  transition: all var(--hover-duration-fast) var(--hover-ease) !important;
}

/* (Hero advantages icons block removed 2026-04-24 —
 *  .hero__advantages no longer present in HTML.) */

/* === FAQ question headers — darken on hover === */
.faq-question {
  transition: border-color var(--hover-duration-fast) ease !important;
}
.faq-question:hover {
  border-color: rgba(35, 31, 32, 0.15) !important;
}
.faq-question__header {
  cursor: pointer;
  transition: color var(--hover-duration-fast) ease !important;
}
.faq-question:hover .faq-question__header h3 {
  color: var(--color-theme-accent-2) !important;
}

/* === Gallery items (homepage swiper + galeria page) === */
.gallery__item__image,
.page-gallery__item {
  overflow: hidden;
  position: relative;
}
.gallery__item__image img,
.page-gallery__item img {
  transition: transform 0.6s var(--hover-ease) !important;
}
.gallery__item__image:hover img,
.page-gallery__item:hover img {
  transform: scale(1.05);
}

/* === Buttons already have background transition — enhance with subtle lift === */
.btn--primary:hover,
.btn--secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(35, 31, 32, 0.12);
}

/* === Respect reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}



/* ============================================
 * HEADER + FOOTER — MINIMAL overrides only
 * Let the native theme render its polished layout.
 * Only override: Blog link color on hover, footer logo larger per user.
 * ============================================ */

/* Blog nav item hover — coral accent on active/hover */
#masthead #primary-menu li a:hover,
#masthead #primary-menu li a[aria-current="page"] { color: var(--color-theme-accent-2) !important; }

/* (Header logo uses native theme sizing — overrides removed because they
 *  broke the lazyload placeholder → real-image swap and the logo vanished.) */

/* Footer logo — sized to match footer heading scale (not overpower it) */
#footer .footer__logo img,
.footer__logo a img {
  width: auto !important;
  max-width: 11rem !important;
  height: auto !important;
  max-height: 4rem !important;
}
@media (min-width: 1008px) {
  #footer .footer__logo img,
  .footer__logo a img {
    max-width: 13rem !important;
    max-height: 4.8rem !important;
  }
}

/* (Legacy flag switcher block — superseded by the unified "LANGUAGE
 *  SWITCHER FLAGS" rules further below, which use round SVG icons.) */




/* ============================================
 * MAP/CONTACT ADDRESS CARD (inside #contact-us section)
 * Fix being cut + update proportions to new design system
 * ============================================ */
#contact-us .modal-content {
  padding: 1.6rem 2rem !important;
  border-radius: 1rem !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (min-width: 1008px) {
  #contact-us .modal-content {
    padding: 2rem 2.4rem !important;
    border-radius: 1.2rem !important;
  }
}
#contact-us .modal-content h3 {
  font-size: 1.6rem !important;
  line-height: 1.2 !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
}
@media (min-width: 1008px) {
  #contact-us .modal-content h3 { font-size: 1.8rem !important; }
}
#contact-us .modal-content .color--white {
  font-size: 1.15rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500 !important;
  margin-bottom: 0.4rem !important;
}
#contact-us .modal-content .typo--medium,
#contact-us .modal-content .typo--medium a {
  font-size: 1.4rem !important;
  line-height: 1.4 !important;
}
#contact-us .modal-content > div + div.color--white { margin-top: 1.2rem !important; }



/* ============================================
 * SECTION SPACING — single source of truth (audit fixes)
 * Principle: consistent vertical rhythm, generous but not sprawling.
 * Mobile: 48px · Tablet: 64px · Desktop: 96px · Large: 120px
 * ============================================ */

/* Header-to-first-section gap (was too tight) */
.site-main > section:first-child,
.site-main > section.hero {
  margin-top: 3.2rem !important;
}
@media (min-width: 769px) {
  .site-main > section:first-child,
  .site-main > section.hero { margin-top: 4rem !important; }
}
@media (min-width: 1008px) {
  .site-main > section:first-child,
  .site-main > section.hero { margin-top: 4.8rem !important; }
}

/* Between consecutive sections — consistent rhythm */
.site-main > section + section {
  margin-top: 4.8rem !important;
}
@media (min-width: 769px) {
  .site-main > section + section { margin-top: 6.4rem !important; }
}
@media (min-width: 1008px) {
  .site-main > section + section { margin-top: 9.6rem !important; }
}

/* Nullify class-based margins that would add on top of sibling rule */
section.my-5xl, section.my-6xl__tablet, section.my-7xl__desktop,
section.mt-5xl, section.mt-6xl__tablet, section.mt-7xl__desktop {
  margin-top: 0 !important;
}
section.mb-5xl, section.mb-6xl__tablet, section.mb-7xl__desktop {
  margin-bottom: 0 !important;
}

/* Last section → footer gap (single rule, no double-stacking) */
.site-main > section:last-child {
  margin-bottom: 4rem !important;
}
@media (min-width: 1008px) {
  .site-main > section:last-child { margin-bottom: 6rem !important; }
}

/* Contact section — consolidated single rule */
section#contact-us.contact-us {
  margin-top: 6.4rem !important;
  margin-bottom: 4rem !important;
}
@media (min-width: 1008px) {
  section#contact-us.contact-us {
    margin-top: 9.6rem !important;
    margin-bottom: 6rem !important;
  }
}



/* ============================================
 * HEADER CORNERS — match rest of site (24px mobile, 40px desktop)
 * Native theme sets 4rem always; content sections use 24/40 responsive.
 * ============================================ */
.site-header > .container {
  border-radius: 2.4rem !important;
}
@media (min-width: 1008px) {
  .site-header > .container { border-radius: 2.4rem !important; }
}

/* Sync footer too (native uses 24/40 responsive — keep that) */
#footer > .container {
  border-radius: 2.4rem !important;
}
@media (min-width: 1008px) {
  #footer > .container { border-radius: 2.4rem !important; }
}

/* ============================================
 * FOOTER LOGOS — smaller, proportional
 * ============================================ */
/* Bottom wordmark (cosmo-text-light.svg — the horizontal "Cosmo Clinic" text) */
.footer__text-logo {
  max-height: 8rem !important;
  overflow: hidden;
  opacity: 0.7;
  margin-top: 1.2rem !important;
  padding: 0 2rem !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.footer__text-logo img {
  width: auto !important;
  height: auto !important;
  max-height: 7rem !important;
  max-width: 60% !important;
  display: block;
  margin: 0 auto;
}
@media (min-width: 1008px) {
  .footer__text-logo { max-height: 10rem !important; }
  .footer__text-logo img { max-height: 9rem !important; max-width: 50% !important; }
}

/* ============================================
 * UNIFIED CORNER RADIUS — 24px everywhere for big blocks
 * Header + footer + hero + contact = same radius, no more mismatch
 * ============================================ */
.border-radius--24,
.border-radius--4__desktop,
.border-radius--40__desktop,
.border-radius--48,
.border-radius--32 {
  border-radius: 2.4rem !important;
}

/* ============================================
 * HOMEPAGE "CASOS CLÍNICOS" — clinicafmr.com aesthetic
 * Static 3-col grid (2 rows × 3 cols = 6 cases), 3:2 landscape,
 * case number + treatment name below each image.
 * ============================================ */
.cases-header__kicker {
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-theme-accent-2);
  font-weight: 600;
  margin: 0;
}
@media (min-width: 1008px) {
  .cases-header__kicker { font-size: 1.3rem; }
}

/* Swiper container for the cases carousel (single row, 3 visible desktop).
 * Don't override Swiper's own width/wrapper math — just style the card. */
.cases-grid--swiper {
  overflow: hidden !important;
  width: 100% !important;
}

.cases-grid__item {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.2rem !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.3s ease !important;
  height: auto !important;
}
/* Re-assert flex layout on swiper slide for the card content */
.swiper-slide.cases-grid__item {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}
.cases-grid__item:hover {
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

.cases-grid__image {
  aspect-ratio: 3 / 2 !important;
  overflow: hidden !important;
  border-radius: 0.8rem !important;
  background: var(--color-theme-gray-light);
  width: 100% !important;
}
.cases-grid__image picture,
.cases-grid__image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.cases-grid__image img {
  object-fit: cover !important;
  filter: brightness(1.02) saturate(0.88) contrast(1.02);
  transition: transform 0.6s ease !important;
}
.cases-grid__item:hover .cases-grid__image img {
  transform: scale(1.03) !important;
}

.cases-grid__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
  padding: 0 0.2rem !important;
}
.cases-grid__case {
  font-size: 1.15rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-theme-accent-2) !important;
  font-weight: 500 !important;
}
@media (min-width: 1008px) {
  .cases-grid__case { font-size: 1.2rem !important; }
}
.cases-grid__title {
  font-size: 1.6rem !important;
  line-height: 1.25 !important;
  color: var(--color-theme-black) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}
@media (min-width: 1008px) {
  .cases-grid__title { font-size: 1.8rem !important; }
}

/* Cases swiper nav — two arrows side-by-side, centered, above the CTA.
 * Let native btn--arrow-1 (coral circle + white pseudo arrows) render. */
.cases-grid__buttons {
  width: 100% !important;
  gap: 1.2rem !important;
}
.cases-grid__buttons .btn--arrow {
  cursor: pointer !important;
}
.cases-grid__buttons .btn--arrow.swiper-button-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}
/* CTA sits close to the arrow bar — matches the Avaliações mt-xs spacing */
.cases-cta { margin-top: 1.6rem !important; }
@media (min-width: 1008px) {
  .cases-cta { margin-top: 2rem !important; }
}



/* Slide gap is handled by margin-right further below (swiper-safe).
 * Do NOT set `gap` on .swiper-wrapper — it breaks Swiper's transform math.
 * (Duplicate slide-width rules removed 2026-04-23 — the single source of truth
 *  lives in the GALLERIA block above.) */

/* ============================================
 * HERO — OPTIMIZED (final)
 * Clean 2-col layout · proportional typography · responsive · polished
 * ============================================ */

/* Hero section — classic 2-col side-by-side layout
 * NATIVE .hero is `display: flex; height: 83rem` — this forces the hero
 * contents (hero__container + hero__stats) onto a horizontal row and caps
 * height, which breaks the stack. Override: flex column, auto height. */
.hero.hero--redesigned {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0.8rem 0 0 !important;
  padding: 0 0 0 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}
@media (min-width: 1008px) {
  .hero.hero--redesigned { margin-top: 1.2rem !important; }
}

.hero__container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
  width: 100% !important;
  margin: 0 auto !important;
  /* Horizontal padding MATCHES the header — so hero content aligns vertically
   * with the toolbar above. Header uses px-xs (1.6rem) / px-l (3.2rem) / px-xl (4rem). */
  padding: 0 1.6rem !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  align-items: center !important;
}
@media (min-width: 769px) {
  .hero__container {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) !important;
    gap: 1.6rem !important;
    padding: 0 3.2rem !important;
  }
}
@media (min-width: 1008px) {
  .hero__container {
    gap: 2rem !important;
    padding: 0 4rem !important;
  }
}

/* Text column — LEFT side. Fills its column for a substantial hero. */
.hero__text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 1.6rem 0 !important;
  margin: 0 !important;
  justify-self: stretch !important;
}
@media (min-width: 769px) {
  .hero__text {
    padding: 2.4rem 0 !important;
  }
}
@media (min-width: 1008px) {
  .hero__text {
    padding: 3.2rem 0 !important;
  }
}
.hero__text .hero__subtitle { margin-left: 0 !important; margin-right: 0 !important; max-width: 54rem; }

.hero__kicker {
  display: inline-block;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-theme-accent-2);
  font-weight: 600;
  margin: 0 0 1.6rem;
}
@media (min-width: 1008px) {
  .hero__kicker { font-size: 1.3rem; margin-bottom: 2rem; }
}

.hero__title {
  font-size: clamp(3rem, 5.5vw, 5.2rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 1.6rem !important;
  color: var(--color-theme-black) !important;
  font-weight: 400 !important;
}
@media (min-width: 1008px) {
  .hero__title { margin-bottom: 2rem !important; }
}

.hero__subtitle {
  font-size: 1.55rem !important;
  line-height: 1.55 !important;
  color: var(--color-theme-gray);
  margin: 0 0 2.4rem;
  max-width: 48rem;
}
@media (min-width: 1008px) {
  .hero__subtitle {
    font-size: 1.7rem !important;
    margin-bottom: 3rem;
  }
}

.hero__ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.2rem !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}
@media (max-width: 560px) {
  .hero__ctas { flex-direction: column; align-items: stretch !important; width: 100%; max-width: 34rem; }
  .hero__ctas .btn { width: 100%; }
}

/* (Legacy .hero__trust block — removed from HTML on 2026-04-23; counters
 *  now render at the bottom of the hero via .hero__stats above.) */

/* Image column — RIGHT side, portrait. Fills its column width
 * so the hero feels substantial (not tiny). */
.hero__visual {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: block !important;
  aspect-ratio: 988 / 1408;
  max-height: 52rem !important;
  justify-self: stretch !important;
}
@media (min-width: 1008px) {
  .hero__visual {
    max-height: 60rem !important;
  }
}
@media (min-width: 1216px) {
  .hero__visual {
    max-height: 68rem !important;
  }
}
.hero__visual picture.hero__visual__img,
.hero__visual > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
.hero__visual picture.hero__visual__img img,
.hero__visual > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: saturate(0.98) contrast(1.02);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-mask-image: none !important;
          mask-image: none !important;
  border-radius: 0 !important;
  /* Ensure the browser renders at full quality — prevents blurry upscaling
   * on retina displays when the column is wider than the naive render */
  image-rendering: auto;
}
.hero__visual:hover picture.hero__visual__img img,
.hero__visual:hover > img { transform: scale(1.015); }
.hero__visual::before,
.hero__visual::after { content: none !important; }

/* Mobile: text first, image below. Image uses natural aspect (no crop). */
@media (max-width: 768px) {
  .hero__container { grid-template-rows: auto auto !important; }
  .hero__text { order: 1; }
  .hero__visual {
    order: 2;
    aspect-ratio: 4 / 5;
    width: 100vw;
    margin-left: -2rem !important;
    margin-right: -2rem !important;
    max-height: 56rem;
  }
}

/* (Merged into the primary .hero.hero--redesigned block above.) */

/* ============================================
 * LANGUAGE SWITCHER FLAGS — round SVG flag icons (Portugal + UK)
 * Flags are proper SVG icons from the Design References flag library.
 * ============================================ */
.header__buttons {
  display: flex !important;
  align-items: center !important;
  gap: 1.2rem !important;
}
.header__buttons__switcher {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin: 0 !important;
}
.header__buttons__switcher a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  width: 2.8rem !important;
  height: 2.8rem !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  overflow: visible !important;
}
.header__buttons__switcher a img {
  display: block !important;
  width: 2.4rem !important;
  height: 2.4rem !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 0 0 1px rgba(35, 31, 32, 0.08);
}
.header__buttons__switcher a:not(.current) img { opacity: 0.55 !important; }
.header__buttons__switcher a.current img,
.header__buttons__switcher a:hover img { opacity: 1 !important; }
.header__buttons__switcher a:hover { transform: translateY(-1px) !important; }
.header__buttons__switcher a.current img {
  box-shadow: 0 0 0 2px var(--color-theme-accent-2), 0 0 0 3px rgba(255, 255, 255, 0.8);
}

/* ============================================
 * BLOG INDEX — newsletter block: soft blush editorial card
 * Warm peach gradient BG (different from the beige canvas elsewhere).
 * Full content width, readable typography.
 * ============================================ */
.blog-newsletter-wrap {
  max-width: 100% !important;
  /* Accent-3 dusty taupe — brand secondary surface, different from beige canvas */
  background: var(--color-theme-accent-3) !important;
  color: var(--color-theme-black) !important;
  border-radius: 2.4rem !important;
  padding: 4.8rem 2.4rem !important;
}
.blog-newsletter-wrap::before { content: none !important; }
@media (min-width: 769px) {
  .blog-newsletter-wrap { padding: 6rem 4rem !important; }
}
@media (min-width: 1008px) {
  .blog-newsletter-wrap {
    max-width: 112rem !important;
    padding: 7.2rem 6rem !important;
  }
}
@media (min-width: 1216px) {
  .blog-newsletter-wrap { max-width: 124rem !important; }
}
@media (min-width: 1408px) {
  .blog-newsletter-wrap { max-width: 136rem !important; }
}
/* Title: ink black on beige */
.blog-newsletter-wrap h2 {
  color: var(--color-theme-black) !important;
  margin-bottom: 1.6rem !important;
}
/* Subtitle: generous size, gray but readable */
.blog-newsletter-wrap p {
  color: var(--color-theme-gray) !important;
  max-width: 56rem !important;
  margin: 0 auto 2.8rem !important;
  line-height: 1.6 !important;
  font-size: 1.5rem !important;
}
@media (min-width: 1008px) {
  .blog-newsletter-wrap p {
    font-size: 1.7rem !important;
  }
}
/* Form */
.blog-newsletter-wrap form {
  display: flex !important;
  max-width: 48rem !important;
  margin: 0 auto !important;
  gap: 0.8rem !important;
}
.blog-newsletter-wrap input {
  flex: 1 !important;
  padding: 1.4rem 2rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(35, 31, 32, 0.15) !important;
  background: var(--color-theme-white) !important;
  color: var(--color-theme-black) !important;
  font-size: 1.5rem !important;
  outline: none !important;
  font-family: inherit !important;
}
.blog-newsletter-wrap input::placeholder {
  color: rgba(82, 80, 77, 0.6) !important;
}
.blog-newsletter-wrap input:focus {
  border-color: var(--color-theme-accent-2) !important;
  box-shadow: 0 0 0 3px rgba(224, 150, 114, 0.18) !important;
}
.blog-newsletter-wrap button {
  padding: 1.4rem 2.8rem !important;
  border-radius: 999px !important;
  background: var(--color-theme-accent-2) !important;
  color: var(--color-theme-white) !important;
  border: none !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-size: 1.5rem !important;
  font-family: inherit !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}
.blog-newsletter-wrap button:hover {
  background: var(--color-theme-black) !important;
  transform: translateY(-1px) !important;
}
@media (max-width: 560px) {
  .blog-newsletter-wrap form { flex-direction: column !important; }
  .blog-newsletter-wrap button { width: 100% !important; }
}

/* (Legacy .gallery__item swiper margin rules removed 2026-04-24 —
 *  homepage Gallery now uses .cases-grid__item; Swiper handles spacing
 *  via spaceBetween in the JS config. `gap: 0` on .swiper-wrapper still
 *  applies globally to any Swiper and is safe to keep.) */
.gallery__list.swiper .swiper-wrapper,
.cases-grid--swiper .swiper-wrapper {
  gap: 0 !important;
}

/* ============================================
 * UNIFIED CONTENT WIDTH — ALL pages, ALL sections, ALL viewports.
 * Header, footer, hero, every section — one width at each breakpoint.
 * Scales up at widescreen so wide monitors don't waste margin.
 * ============================================ */

/* Shared selector list — we reuse it at each breakpoint */
@media (min-width: 1008px) {
  .site-header > .container,
  #footer > .container,
  main .container,
  main > section > .container,
  main > section > section > .container,
  .services__counters, .services__list,
  .gallery-block__inner,
  .reviews-block__inner, .reviews-block > .container,
  .faq-block__inner, .faq-block > .container,
  .contact-us__inner, .contact-us > .container,
  .page-gallery__content__inner,
  .single-service__inner, .single-service > .container,
  .about-us__hero .container, .about-us > section > .container,
  #faq > .container, #contact-us > .container,
  .hero__container, .hero__stats,
  .breadcrumbs.container {
    max-width: 112rem !important;
  }
}
@media (min-width: 1216px) {
  .site-header > .container,
  #footer > .container,
  main .container,
  main > section > .container,
  main > section > section > .container,
  .services__counters, .services__list,
  .gallery-block__inner,
  .reviews-block__inner, .reviews-block > .container,
  .faq-block__inner, .faq-block > .container,
  .contact-us__inner, .contact-us > .container,
  .page-gallery__content__inner,
  .single-service__inner, .single-service > .container,
  .about-us__hero .container, .about-us > section > .container,
  #faq > .container, #contact-us > .container,
  .hero__container, .hero__stats,
  .breadcrumbs.container {
    max-width: 124rem !important;
  }
}
@media (min-width: 1408px) {
  .site-header > .container,
  #footer > .container,
  main .container,
  main > section > .container,
  main > section > section > .container,
  .services__counters, .services__list,
  .gallery-block__inner,
  .reviews-block__inner, .reviews-block > .container,
  .faq-block__inner, .faq-block > .container,
  .contact-us__inner, .contact-us > .container,
  .page-gallery__content__inner,
  .single-service__inner, .single-service > .container,
  .about-us__hero .container, .about-us > section > .container,
  #faq > .container, #contact-us > .container,
  .hero__container, .hero__stats,
  .breadcrumbs.container {
    max-width: 136rem !important;
  }
}

/* ============================================
 * HERO STATS — 4-col strip BELOW the hero 2-col grid
 * Sits inside the same content-width container (matches site chrome)
 * ============================================ */
.hero__stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.6rem 2rem !important;
  padding: 2rem 2rem 0 !important;
  margin: 2.4rem auto 0 !important;
  border-top: 1px solid rgba(35, 31, 32, 0.08);
}
@media (min-width: 769px) {
  .hero__stats {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
    padding: 2.4rem 3rem 0 !important;
    margin-top: 3.2rem !important;
  }
}
@media (min-width: 1008px) {
  .hero__stats {
    padding: 3.2rem 4rem 0 !important;
    margin-top: 4rem !important;
    gap: 3.2rem !important;
  }
}
.hero__stats .services__counters__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.4rem !important;
  margin: 0 !important;
}
.hero__stats .services__counters__item > div:first-child {
  font-family: "Athena", Georgia, serif !important;
  font-size: 2.8rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  color: var(--color-theme-accent-2) !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}
@media (min-width: 1008px) {
  .hero__stats .services__counters__item > div:first-child {
    font-size: 3.6rem !important;
  }
}
.hero__stats .services__counters__item > div:last-child {
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
  color: var(--color-theme-gray) !important;
  margin: 0 !important;
  max-width: 22rem !important;
  width: 100% !important;
}
@media (min-width: 1008px) {
  .hero__stats .services__counters__item > div:last-child {
    font-size: 1.4rem !important;
  }
}

/* (Legacy max-height overrides removed 2026-04-23 — image now uses
 *  object-fit:cover + column min-height to fill properly at any size.) */

/* ============================================
 * UNIFIED ROUNDED CORNERS — all pages, all section boxes
 * Scale: small items 1.2rem · medium blocks 1.6rem · large sections 2.4rem · pills 999px
 * ============================================ */

/* Large section blocks — header, footer, hero, contact card, FAQ container,
 * reviews container, single-service wrappers, any .border-radius--24 block */
.site-header > .container,
#footer > .container,
.hero__container,
.contact-us__inner,
.reviews-block__inner,
.faq-block__inner,
.single-service__form,
.single-service__form--sticky,
.services__item,
.page-gallery__content__inner,
.border-radius--24,
.border-radius--4__desktop,
.border-radius--40__desktop {
  border-radius: 2.4rem !important;
}
@media (min-width: 1008px) {
  .contact-us__inner,
  .reviews-block__inner,
  .faq-block__inner {
    border-radius: 2.4rem !important;
  }
}

/* Medium cards — gallery slides, blog cards, result pills, FAQ items,
 * service detail cards, before/after frames */
.gallery__item__image,
.page-gallery__content__gallery-item,
.faq-question,
.reviews__item,
.blog-card,
.blog-categories__pill,
.single-service__result,
.border-radius--16 {
  border-radius: 1.6rem !important;
}

/* Small elements — form fields, inline thumbnails, tags */
input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
textarea,
select,
.form__field input,
.form__field textarea {
  border-radius: 0.8rem !important;
}
/* Phone field — site-wide: country selector on left, input on right,
 * with a real gap between them so they never overlap. Applies to contact
 * form + treatment-page forms + footer subscription — anywhere tel exists. */
.form__field--tel {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0.8rem !important;
}
.form__field--tel label {
  flex: 0 0 100% !important;
  margin-bottom: 0.4rem !important;
}
.form__field--tel .form__countries {
  flex: 0 0 11rem !important;
  width: 11rem !important;
  height: 4.4rem !important;
  margin: 0 !important;
}
.form__field--tel .form__countries__current {
  height: 4.4rem !important;
  padding: 0 1.2rem !important;
  font-size: 1.3rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  border: 1px solid rgba(35, 31, 32, 0.15) !important;
  border-radius: 0.8rem !important;
  background: var(--color-theme-white) !important;
  box-sizing: border-box !important;
}
.form__field--tel input[type="tel"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 4.4rem !important;
  padding: 0 1.6rem !important;
  font-size: 1.4rem !important;
  border: 1px solid rgba(35, 31, 32, 0.15) !important;
  border-radius: 0.8rem !important;
  background: var(--color-theme-white) !important;
  color: var(--color-theme-black) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
/* Dropdown list-holder sits below both inputs full-width */
.form__field--tel .form__countries__list-holder {
  flex: 0 0 100% !important;
}

/* ============================================
 * WHATSAPP CTA — treatment page form alternative + contact pages
 * Secondary path when user prefers chat over form submission.
 * ============================================ */
.btn--whatsapp {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  background: #25D366 !important;
  color: var(--color-theme-white) !important;
  border-radius: 999px !important;
  padding: 0 2rem !important;
  line-height: 4.4rem !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
  text-decoration: none !important;
  border: none !important;
  white-space: nowrap;
}
.btn--whatsapp:hover {
  background: #1DA851 !important;
  color: var(--color-theme-white) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}
.btn--whatsapp svg { fill: currentColor; flex-shrink: 0; }

.single-service__form__whatsapp {
  padding: 0 1.6rem 1.6rem;
}
@media (min-width: 1008px) {
  .single-service__form__whatsapp { padding: 0 2rem 2rem; }
}
.single-service__form__whatsapp__divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.6rem 0 1.2rem;
  color: var(--color-theme-gray);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.single-service__form__whatsapp__divider::before,
.single-service__form__whatsapp__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(35, 31, 32, 0.1);
}

/* ============================================
 * BLOG INDEX — Editorial hero (kicker + H1 + subtitle)
 * ============================================ */
.blog-lead__kicker {
  display: inline-block;
  font-family: "Avenir", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-theme-accent-2);
  font-weight: 600;
  margin: 0 0 1.6rem;
}
@media (min-width: 1008px) {
  .blog-lead__kicker {
    font-size: 1.3rem;
    margin-bottom: 2rem;
  }
}
.blog-lead h1 {
  color: var(--color-theme-black);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* ============================================
 * COOKIE CONSENT BANNER — centered blocking modal
 * ============================================ */
#cosmo-cookie-banner {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  z-index: 2000001 !important;
  width: calc(100% - 3.2rem) !important;
  max-width: 46rem !important;
  margin: 0 !important;
  background: #231f20 !important;
  color: #fff !important;
  border-radius: 1.6rem !important;
  padding: 0 !important;
  box-shadow: 0 2.4rem 6rem rgba(0,0,0,0.55) !important;
  border-top: 3px solid #e09672 !important;
  transform: translate(-50%, -46%);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), opacity 0.28s ease;
}
#cosmo-cookie-banner.is-visible {
  transform: translate(-50%, -50%);
  opacity: 1;
}
#cosmo-cookie-banner[hidden] { display: none !important; }
.cosmo-cookie-banner__inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 2.4rem 2.4rem 2rem !important;
  flex-wrap: nowrap !important;
}
@media (min-width: 480px) {
  .cosmo-cookie-banner__inner { padding: 2.8rem 3.2rem 2.4rem !important; }
}
.cosmo-cookie-banner__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.cosmo-cookie-banner__head svg {
  color: #e09672;
  flex-shrink: 0;
}
.cosmo-cookie-banner__title {
  font-family: var(--heading-font-family, "Athena", serif) !important;
  font-size: 1.9rem !important;
  font-weight: 400 !important;
  color: #fff !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}
.cosmo-cookie-banner__text {
  font-size: 1.35rem !important;
  line-height: 1.6 !important;
  color: #c8c6c3 !important;
  margin: 0 0 1.8rem !important;
  flex: none !important;
}
.cosmo-cookie-banner__link {
  color: #e09672 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.cosmo-cookie-banner__link:hover { color: #f0b492 !important; }
.cosmo-cookie-banner__actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.cosmo-cookie-banner__row {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
/* Accept — primary coral CTA */
.cosmo-cookie-banner__btn--accept,
#cosmo-cookie-accept {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #e09672 !important;
  color: #231f20 !important;
  border: none !important;
  border-radius: 0.8rem !important;
  padding: 1.1rem 2rem !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  font-family: var(--global-font-family, "Avenir", sans-serif) !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.15s !important;
  white-space: nowrap !important;
}
.cosmo-cookie-banner__btn--accept:hover,
#cosmo-cookie-accept:hover {
  background: #f0b492 !important;
  transform: translateY(-1px) !important;
}
/* Reject — ghost outlined */
.cosmo-cookie-banner__btn--outline,
#cosmo-cookie-reject {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  color: #c8c6c3 !important;
  border: 1px solid rgba(200,198,195,0.35) !important;
  border-radius: 0.8rem !important;
  padding: 0.9rem 1.2rem !important;
  font-size: 1.3rem !important;
  font-family: var(--global-font-family, "Avenir", sans-serif) !important;
  cursor: pointer !important;
  transition: border-color 0.2s, color 0.2s !important;
  white-space: nowrap !important;
}
.cosmo-cookie-banner__btn--outline:hover,
#cosmo-cookie-reject:hover {
  border-color: rgba(200,198,195,0.75) !important;
  color: #fff !important;
}
/* Customise — text link */
.cosmo-cookie-banner__btn--ghost,
#cosmo-cookie-customise {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  background: transparent !important;
  color: #c8c6c3 !important;
  border: none !important;
  padding: 0.9rem 1rem !important;
  font-size: 1.3rem !important;
  font-family: var(--global-font-family, "Avenir", sans-serif) !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.2s !important;
  white-space: nowrap !important;
}
.cosmo-cookie-banner__btn--ghost:hover,
#cosmo-cookie-customise:hover { color: #fff !important; }
@media (prefers-reduced-motion: reduce) {
  #cosmo-cookie-banner { transition: none !important; }
  #cosmo-cookie-banner.is-visible { transform: translate(-50%, -50%) !important; }
  #cosmo-cookie-accept,
  #cosmo-cookie-reject,
  #cosmo-cookie-customise { transition: none !important; }
}

/* ============================================
 * FLOATING WHATSAPP CTA — site-wide funnel button
 * Bottom-right circular bubble. Always visible. Sits above content but
 * below the cookie banner. Tappable on mobile (52px+ touch target).
 * ============================================ */
/* Hide the label visually but keep for screen readers */
@media (min-width: 769px) {
  }
/* Lift above the iOS safe-area on phones */
@supports (padding: env(safe-area-inset-bottom)) {
  }
/* When cookie banner is visible (first visit), nudge the FAB up so they
 * don't visually collide on mobile */
#cosmo-cookie-banner:not([hidden]) ~ @media (min-width: 769px) {
  body:has(#cosmo-cookie-banner.is-visible) }
@keyframes cosmo-whatsapp-pulse {
  0%, 100% { box-shadow: 0 0.6rem 1.6rem rgba(37, 211, 102, 0.42), 0 0 0 4px rgba(37, 211, 102, 0.12); }
  50%      { box-shadow: 0 0.6rem 2.4rem rgba(37, 211, 102, 0.62), 0 0 0 12px rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) {
  }

/* ============================================
 * /treatments/ category filter — client-side filtering polish
 * (Pills now trigger JS instead of navigating; smooth no-reload UX)
 * ============================================ */
.services-list__inner .services-list__item {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.services-list__inner .services-list__item[style*="display: none"] {
  display: none !important;
}

/* ============================================
 * /galeria/ + /en/gallery/ — wider grid + polish
 * Native only sets 2 cols at all breakpoints. Upgrade to 3 cols at
 * tablet+ so the 23 before/after photos read as an editorial contact sheet.
 * ============================================ */
.page-gallery__hero .cases-header__kicker {
  display: inline-block;
}
.page-gallery__content__gallery-item__images {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem 1.6rem !important;
}
@media (min-width: 560px) {
  .page-gallery__content__gallery-item__images {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.4rem 2rem !important;
  }
}
@media (min-width: 769px) {
  .page-gallery__content__gallery-item__images {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3.2rem 2.4rem !important;
  }
}
@media (min-width: 1216px) {
  .page-gallery__content__gallery-item__images {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4rem 3.2rem !important;
  }
}
/* Breathing room between category sections too */
.page-gallery__content__gallery-item {
  margin-bottom: 4rem;
}
@media (min-width: 1008px) {
  .page-gallery__content__gallery-item { margin-bottom: 6rem; }
}

/* Image cards — consistent with homepage Casos pattern (landscape aspect,
 * 0.8rem radius, brightness filter, hover lift + image scale) */
.page-gallery__content__gallery-item__image {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 2 !important;
  border-radius: 0.8rem !important;
  overflow: hidden !important;
  background: var(--color-theme-gray-light);
  transition: transform 0.3s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.page-gallery__content__gallery-item__image:hover {
  transform: translateY(-2px) !important;
}
.page-gallery__content__gallery-item__image img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: brightness(1.02) saturate(0.88) contrast(1.02);
  transition: transform 0.6s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
.page-gallery__content__gallery-item__image:hover img {
  transform: scale(1.03) !important;
}

/* Per-category heading — pair with the homepage Casos typography scale */
.page-gallery__content__gallery-item > h2 {
  font-size: 2rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  margin-bottom: 1.6rem !important;
}
@media (min-width: 1008px) {
  .page-gallery__content__gallery-item > h2 {
    font-size: 2.4rem !important;
    margin-bottom: 2rem !important;
  }
}

/* ============================================
 * /treatments/ + /en/treatments/ — NATIVE layout + light polish
 * Native services-list__item is a fixed-height (20rem) card with the image
 * rendered as an ABSOLUTE OVERLAY (dark gradient + white text on top).
 * We respect that model — don't convert to stacked flex — and only add
 * hover lift + wider grid + category nav polish.
 * ============================================ */
.treatments-kicker {
  margin-bottom: 1.2rem !important;
}

/* Grid: 2 cols → 3 cols at 1008+ → 4 cols at 1216+ (native only does 2) */
@media (min-width: 1008px) {
  .services-list__inner {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 1216px) {
  .services-list__inner {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Subtle hover lift — preserves the native card dimensions */
.services-list__item {
  transition: transform 0.3s ease !important;
}
.services-list__item:hover {
  transform: translateY(-2px) !important;
}
.services-list__item-image img {
  transition: transform 0.6s ease !important;
}
.services-list__item:hover .services-list__item-image img {
  transform: scale(1.03);
}

/* Category nav pills — tighten the native btn--tab to match the refined
 * button scale used elsewhere on the site (was 5.2rem line-height = huge). */
.services-categories-list {
  gap: 0.8rem !important;
  justify-content: center !important;
  margin-bottom: 2.4rem !important;
}
@media (min-width: 1008px) {
  .services-categories-list { margin-bottom: 3.2rem !important; }
}
.services-categories-list .btn--tab,
.services-categories-list a.btn--tab {
  padding: 0.8rem 1.8rem !important;
  font-size: 1.4rem !important;
  line-height: 1.4 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(35, 31, 32, 0.15) !important;
  color: var(--color-theme-gray) !important;
  background: transparent !important;
  font-weight: 500 !important;
}
@media (min-width: 1008px) {
  .services-categories-list .btn--tab,
  .services-categories-list a.btn--tab {
    padding: 1rem 2rem !important;
    font-size: 1.45rem !important;
  }
}
.services-categories-list .btn--tab:hover,
.services-categories-list a.btn--tab:hover {
  color: var(--color-theme-accent-2) !important;
  border-color: var(--color-theme-accent-2) !important;
  background: transparent !important;
}
.services-categories-list .btn--tab.is-active,
.services-categories-list a.btn--tab.is-active {
  background: var(--color-theme-black) !important;
  border-color: var(--color-theme-black) !important;
  color: var(--color-theme-white) !important;
}

/* ============================================
 * MOBILE POLISH — 375/390/414px viewports
 * Most traffic is mobile; this pass tunes tight edge cases.
 * ============================================ */
@media (max-width: 560px) {
  /* Hero title — don't let clamp() go above ~34px on phones */
  .hero__title {
    font-size: clamp(2.6rem, 8vw, 3.6rem) !important;
    line-height: 1.1 !important;
  }
  .hero__subtitle {
    font-size: 1.45rem !important;
    line-height: 1.55 !important;
  }
  /* Hero CTAs — already stack; make them true 44px touch targets */
  .hero__ctas .btn {
    min-height: 4.8rem !important;
    line-height: 4.8rem !important;
  }
  /* Counters under hero — tighter horizontal padding, compact rows */
  .hero__stats {
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
    gap: 1.2rem 1.6rem !important;
  }
  /* Blog featured card stacks vertically by default (grid-template-columns: 1fr)
   * Keep image aspect reasonable — 16:10 not 4:3 to avoid giant hero on phone */
  .blog-featured__image {
    aspect-ratio: 16 / 10 !important;
  }
  /* Cookie banner — account for safe-area on iPhone X+ */
  #cosmo-cookie-banner {
    padding: 1.4rem 1.6rem !important;
  }
  .cosmo-cookie-banner__text { font-size: 1.3rem !important; }
  /* Cases / gallery cards — no dead space between caption & next card */
  .cases-grid__item { gap: 0.8rem !important; }
  .cases-grid__title { font-size: 1.5rem !important; }
  .cases-grid__case { font-size: 1.1rem !important; }
  /* Gallery page: 2-col grid even on very small phones */
  .page-gallery__content__gallery-item__images {
    gap: 1.2rem 0.8rem !important;
  }
  /* Treatment cards (services-list__item) — native 20rem height is fine on phone */
  .services-categories-list {
    gap: 0.4rem !important;
  }
  .services-categories-list .btn--tab,
  .services-categories-list a.btn--tab {
    padding: 0.6rem 1.2rem !important;
    font-size: 1.25rem !important;
  }
  /* Newsletter form on blog — stack vertically with full-width button */
  .blog-newsletter-wrap {
    padding: 3.6rem 1.8rem !important;
  }
  .blog-newsletter-wrap form {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .blog-newsletter-wrap input,
  .blog-newsletter-wrap button {
    width: 100% !important;
  }
  /* WhatsApp CTA — full width + tappable */
  .btn--whatsapp {
    width: 100% !important;
    padding: 0 2rem !important;
    line-height: 4.8rem !important;
  }
  /* Phone field — country selector + input stay on same row, but allow a
   * line break for the label (labels already flex 100%). Country fixed at 10rem. */
  .form__field--tel .form__countries {
    flex: 0 0 10rem !important;
    width: 10rem !important;
  }
  /* Contact modal card + other fixed-padding panels — tighten */
  .contact-us__inner { padding: 2rem 1.6rem !important; }
  /* Breadcrumb — smaller, single-line, clipped on overflow */
  #breadcrumbs {
    font-size: 1.25rem !important;
    white-space: nowrap;
    overflow-x: auto;
    padding-top: 1.2rem !important;
    padding-bottom: 0.8rem !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Hero stats — single column if two feels cramped on <375px */
  @media (max-width: 374px) {
    .hero__stats { grid-template-columns: 1fr !important; }
  }
}

/* Make sure no horizontal overflow anywhere on mobile — common gotcha */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; }
  main { overflow-x: hidden !important; }
}

/* ============================================
 * BLOG POST PAGE — fix tag alignment + section widths + top space
 * (From design-audit screenshots 2026-04-24)
 * ============================================ */

/* ============================================
 * BLOG INDEX — unified articles grid (no featured, all same size)
 * Cards are uniform, responsive, match homepage blog-card aesthetic.
 * ============================================ */
.blog-articles-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2.4rem !important;
  margin-top: 0.8rem;
}
@media (min-width: 560px) {
  .blog-articles-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2.4rem !important; }
}
@media (min-width: 1008px) {
  .blog-articles-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 3.2rem 2.4rem !important; }
}
@media (min-width: 1216px) {
  .blog-articles-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 4rem 2.4rem !important; }
}
.blog-articles-grid .blog-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important;
  background: var(--color-theme-white) !important;
  border-radius: 1.6rem !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.blog-articles-grid .blog-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(35, 31, 32, 0.07) !important;
  text-decoration: none !important;
}
.blog-articles-grid .blog-card__image {
  aspect-ratio: 4 / 3 !important;
  background-size: cover !important;
  background-position: center !important;
  filter: brightness(1.04) saturate(0.85) sepia(0.04);
}
.blog-articles-grid .blog-card__body {
  padding: 1.8rem !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* ============================================
 * BLOG INDEX — editorial layout polish
 * Clean hierarchy: breadcrumb · hero · filter bar · grid · newsletter.
 * Following editorial design best practices — generous spacing above H1,
 * left-aligned content, confident typography, consolidated filter toolbar.
 * ============================================ */

/* Hero section — generous lead-in, left-aligned editorial feel */
.blog-index-hero { padding-top: 1.2rem; }
@media (min-width: 1008px) {
  .blog-index-hero { padding-top: 2.4rem; }
}
.blog-lead {
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
}
.blog-lead p { font-style: normal !important; }
.blog-lead__dek {
  max-width: 68rem !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

/* Filter bar — search + category pills in one toolbar row */
.blog-filter-bar__inner {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: stretch;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(35, 31, 32, 0.08);
  border-bottom: 1px solid rgba(35, 31, 32, 0.08);
}
@media (min-width: 769px) {
  .blog-filter-bar__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
  }
}
.blog-filter-bar__tabs { flex: 1 1 auto; min-width: 0; }
.blog-filter-bar__tabs .blog-category-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.4rem !important;
  overflow-x: auto;
  padding: 0.2rem 0;
  list-style: none;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.blog-filter-bar__tabs .blog-category-tabs::-webkit-scrollbar { display: none; }
.blog-filter-bar__tabs .blog-category-tabs li { flex-shrink: 0; }
.blog-filter-bar__tabs .blog-categories__pill {
  display: inline-block;
  padding: 0.6rem 1.4rem !important;
  font-size: 1.3rem !important;
  line-height: 1.4 !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  color: var(--color-theme-gray) !important;
  background: transparent !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.blog-filter-bar__tabs .blog-categories__pill:hover {
  color: var(--color-theme-accent-2) !important;
  background: var(--color-theme-gray-light) !important;
}
.blog-filter-bar__tabs .blog-categories__pill.is-active {
  color: var(--color-theme-white) !important;
  background: var(--color-theme-black) !important;
}

.blog-filter-bar__search {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 769px) {
  .blog-filter-bar__search { width: 26rem; }
}
.blog-filter-bar__search svg {
  position: absolute;
  left: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-theme-gray);
  pointer-events: none;
}
.blog-filter-bar__search input {
  width: 100%;
  padding: 0.9rem 1.4rem 0.9rem 4rem;
  border-radius: 999px;
  border: 1px solid rgba(35, 31, 32, 0.12);
  background: var(--color-theme-white);
  font-size: 1.35rem;
  font-family: inherit;
  color: var(--color-theme-black);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.blog-filter-bar__search input:focus {
  border-color: var(--color-theme-accent-2);
  box-shadow: 0 0 0 3px rgba(224, 150, 114, 0.18);
}
.blog-filter-bar__counter {
  display: none;
  font-size: 1.3rem !important;
  text-align: left !important;
}
.blog-filter-bar__counter.is-visible { display: block !important; }

/* Blog post category pill ("Tratamentos de Pele · Biostimuladores") — left-align,
 * pill style. Scoped to .blog-tag ONLY — must NOT touch .blog-hero-meta or
 * .blog-hero-meta__mark, which depend on display:flex for centering. */
.blog-post .blog-tag,
.blog-post article > header .blog-tag,
body.single-post .blog-tag,
body.blog-post .blog-tag {
  display: inline-block !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  font-size: 1.3rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
  color: var(--color-theme-accent-2) !important;
  background: var(--color-theme-gray-light) !important;
  padding: 0.6rem 1.4rem !important;
  border-radius: 999px !important;
  width: fit-content !important;
}

/* Blog hero byline row ("CC · Cosmo Clinic Editorial · 11 min · date") —
 * MUST keep flex display so the CC mark + author name + dot separators align. */
.blog-hero-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1.2rem !important;
  font-size: 1.4rem !important;
  color: var(--color-theme-gray) !important;
  margin: 0 0 4rem !important;
  padding: 0 !important;
  border: none !important;
}
.blog-hero-meta__author {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  font-weight: 500 !important;
  color: var(--color-theme-black) !important;
}
.blog-hero-meta__mark {
  width: 4rem !important;
  height: 4rem !important;
  border-radius: 50% !important;
  background: var(--color-theme-accent-2) !important;
  color: var(--color-theme-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
  font-family: "Avenir", "Avenir LT Std", "Inter", sans-serif !important;
  letter-spacing: 0.02em !important;
}
.blog-hero-meta__sep {
  color: var(--color-theme-accent-3) !important;
  font-weight: 300 !important;
}

/* Blog post article container — use unified content width, not native 94.4rem */
body.single-post main > section,
body.single-post main > article,
body.blog-post main > section,
body.blog-post main > article {
  max-width: 100% !important;
}
body.single-post main .container,
body.blog-post main .container {
  /* inherits the unified 112/124/136rem width rule from earlier */
}

/* Blog INDEX page — reduce top space before the kicker.
 * The hero section currently has pt-xs pt-m__desktop via my earlier edit.
 * Tighten the breadcrumb top padding too. */
body.archive #breadcrumbs,
body.blog #breadcrumbs,
body.page-template-default #breadcrumbs,
.blog-lead__kicker {
  margin-top: 0 !important;
}
/* If there's extra vertical space coming from nested .container + outer section
 * padding, collapse the section above the hero. */
main > section:first-of-type {
  padding-top: 1.2rem !important;
}
@media (min-width: 1008px) {
  main > section:first-of-type {
    padding-top: 1.6rem !important;
  }
}

/* Treatment page — reduce spacing between H1 content and the agent's
 * SEO-added sections (was creating visible vertical gaps on screenshots) */
.single-service__main + section,
.single-service__main-content > section:not(:first-child) {
  margin-top: 1.6rem !important;
}

/* Related-article cards on treatment pages — ensure they match blog index look */
.treatment-related-posts .blog-card,
.treatment-related-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--color-theme-white) !important;
  border-radius: 1.6rem !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  height: 100% !important;
}
.treatment-related-posts .blog-card:hover,
.treatment-related-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(35, 31, 32, 0.07) !important;
  text-decoration: none !important;
}
.treatment-related-posts .blog-card__image,
.treatment-related-card .blog-card__image {
  aspect-ratio: 16 / 10 !important;
  background-size: cover !important;
  background-position: center !important;
  filter: brightness(1.04) saturate(0.85) sepia(0.04);
}
.treatment-related-posts .blog-card__body,
.treatment-related-card .blog-card__body {
  padding: 1.6rem 1.8rem !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ============================================
 * 2026-04-27 LIVE FIXES
 * ============================================ */

/* Casos clínicos swiper nav — native btn--arrow has position:absolute which
 * stacks the buttons in the corner of their flex parent. Override to static. */
.cases-grid__buttons .btn--arrow,
.cases-grid__buttons .cases-grid__buttons__btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 4rem !important;
  height: 4rem !important;
  flex: 0 0 4rem !important;
  border-radius: 50% !important;
  background-color: var(--color-theme-accent-2) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cases-grid__buttons .btn--arrow:hover {
  background-color: var(--color-theme-accent-1) !important;
}
.cases-grid__buttons .btn--arrow.swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}
.cases-grid__buttons {
  gap: 1.6rem !important;
}

/* Social-link icon hover — explicit (not relying on CSS nesting support).
 * Applies to footer icons + contact page Redes Sociais block. */
a.link {
  color: var(--color-theme-black);
  transition: color 0.2s ease;
}
a.link:hover,
a.link:active,
a.link:focus {
  color: var(--color-theme-accent-2) !important;
}
a.link svg {
  transition: color 0.2s ease;
}
a.link:hover svg,
a.link:focus svg {
  color: var(--color-theme-accent-2) !important;
}

/* Contact-page Redes Sociais — add consistent gap so all icons space evenly. */
.contact-us__inner .is-flex > a.link,
.footer .is-flex > a.link {
  margin-right: 1.2rem !important;
}
.contact-us__inner .is-flex > a.link:last-child,
.footer .is-flex > a.link:last-child {
  margin-right: 0 !important;
}

/* ─── WCAG 2.2 AA — focus-visible (replaces sitewide outline:none/0) ─── */
:focus-visible {
  outline: 2px solid var(--color-theme-accent-2, #e09672);
  outline-offset: 3px;
  border-radius: 2px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-toggle:focus-visible,
.faq-question__header:focus-visible {
  outline: 2px solid var(--color-theme-accent-2, #e09672);
  outline-offset: 3px;
}

/* ─── WCAG 2.2 — prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── WCAG AA contrast — accent text on white must meet 4.5:1 ─── */
/* #e09672 on white = 2.7:1 (fails). #B86A48 on white = 4.6:1 (passes). */
.blog-related-card__tag,
.blog-pullquote__label,
.blog-body a:not(.btn),
.btn--arrow-link__label {
  color: #B86A48;
}

/* ─── a11y: screen-reader-only utility (for injected labels) ─── */
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================
 * HOVER UPGRADE v2 (2026-05-05) — "cool" tier
 * Stronger lift, branded glow (#B86A48 coral), gradient sweep on buttons,
 * magnetic underline on links, image scale+brightness, FAQ arrow rotation.
 * Adds (does not replace) the v1 system above.
 * ============================================ */

:root {
  --hover-lift-strong: translateY(-6px);
  --hover-shadow-glow: 0 18px 36px -8px rgba(184, 106, 72, 0.28), 0 8px 16px -8px rgba(35, 31, 32, 0.12);
  --hover-shadow-soft: 0 14px 30px -6px rgba(35, 31, 32, 0.14);
  --hover-ease-cool: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cards: stronger lift + branded glow shadow + image zoom with brightness shift */
.services-list__item,
.services__item,
.blog-featured,
.blog-card,
.blog-related-card,
.blog-related-treatments__card {
  transition:
    transform 0.45s var(--hover-ease-cool),
    box-shadow 0.45s var(--hover-ease-cool) !important;
  will-change: transform;
}
.services-list__item:hover,
.services__item:hover,
.blog-card:hover,
.blog-related-card:hover,
.blog-related-treatments__card:hover {
  transform: var(--hover-lift-strong) !important;
  box-shadow: var(--hover-shadow-glow) !important;
}
.blog-featured:hover {
  transform: var(--hover-lift-strong) !important;
  box-shadow: var(--hover-shadow-glow), 0 24px 60px -16px rgba(35, 31, 32, 0.18) !important;
}

/* Card images: stronger zoom + saturation pop */
.services-list__item-image img,
.services__item__image img,
.blog-featured__image,
.blog-card__image,
.blog-related-card__image {
  transition:
    transform 0.7s var(--hover-ease-cool),
    filter 0.45s ease !important;
}
.services-list__item:hover .services-list__item-image img,
.services__item:hover .services__item__image img {
  transform: scale(1.08) !important;
  filter: brightness(1.05) saturate(0.96) contrast(1.04) !important;
}
.blog-featured:hover .blog-featured__image,
.blog-card:hover .blog-card__image,
.blog-related-card:hover .blog-related-card__image {
  transform: scale(1.06) !important;
  filter: brightness(1.04) saturate(1.05) !important;
}

/* Service card heading colour shift on hover (warmth pop) */
.services-list__item,
.services__item {
  --card-title-color: var(--color-theme-black);
}
.services-list__item:hover .services-list__item-content h3,
.services-list__item:hover .services-list__item-content h3 a,
.services__item:hover .services__item__content h3,
.services__item:hover .services__item__content h3 a {
  color: #B86A48 !important;
  transition: color 0.3s var(--hover-ease-cool);
}

/* Primary button: gradient sweep + glow lift */
.btn--primary,
a.btn--primary,
button.btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.3s var(--hover-ease-cool),
    box-shadow 0.3s var(--hover-ease-cool),
    background-color 0.3s ease,
    color 0.3s ease !important;
}
.btn--primary::before,
a.btn--primary::before,
button.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.6s var(--hover-ease-cool);
  pointer-events: none;
  z-index: -1;
}
.btn--primary > *,
a.btn--primary > *,
button.btn--primary > * {
  position: relative;
  z-index: 2;
}
.btn--primary:hover::before,
a.btn--primary:hover::before,
button.btn--primary:hover::before {
  transform: translateX(110%);
}
.btn--primary:hover,
a.btn--primary:hover,
button.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(184, 106, 72, 0.4) !important;
}

/* Secondary button: subtle lift + accent border on hover */
.btn--secondary:hover,
a.btn--secondary:hover,
button.btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(35, 31, 32, 0.25) !important;
}

/* Inline body links (.link, .blog-body a, .btn--arrow-link__label):
   animated underline that grows from left */
.blog-body a:not(.btn),
.btn--arrow-link__label,
a.link:not(.btn) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  transition: background-size 0.4s var(--hover-ease-cool), color 0.2s ease;
  padding-bottom: 1px;
}
.blog-body a:not(.btn):hover,
.btn--arrow-link__label:hover,
a.link:not(.btn):hover {
  background-size: 100% 1.5px;
}

/* FAQ accordion: arrow rotation + subtle background tint */
.faq-question {
  transition: background-color 0.3s var(--hover-ease-cool) !important;
}
.faq-question:hover {
  background-color: rgba(184, 106, 72, 0.04) !important;
}
.faq-question .btn--arrow,
.faq-question .btn--arrow-4 {
  transition:
    transform 0.4s var(--hover-ease-cool),
    background-color 0.3s ease,
    color 0.3s ease !important;
}
.faq-question:hover .btn--arrow,
.faq-question:hover .btn--arrow-4 {
  transform: rotate(45deg) scale(1.05);
}
.faq-question.is-active .btn--arrow,
.faq-question.is-active .btn--arrow-4 {
  transform: rotate(180deg);
}

/* Lang switcher flags: zoom + ring on hover (instant feedback before navigation) */
.header__buttons__switcher a {
  display: inline-block;
  border-radius: 4px;
  transition: transform 0.25s var(--hover-ease-cool), box-shadow 0.25s ease;
  overflow: visible;
}
.header__buttons__switcher a:hover {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px rgba(184, 106, 72, 0.35), 0 4px 12px rgba(35, 31, 32, 0.16);
}

/* Footer social icons: lift + colour shift */
.footer__social a,
.contact__social a,
.site-footer .social a {
  display: inline-block;
  transition: transform 0.3s var(--hover-ease-cool), color 0.25s ease !important;
}
.footer__social a:hover,
.contact__social a:hover,
.site-footer .social a:hover {
  transform: translateY(-3px) scale(1.08);
  color: #B86A48 !important;
}

/* Footer link slide gesture */
.site-footer a:not(.btn):not(.social a):not([class*="social"]) {
  transition: color 0.25s ease, transform 0.3s var(--hover-ease-cool);
  display: inline-block;
}
.site-footer a:not(.btn):not(.social a):not([class*="social"]):hover {
  transform: translateX(3px);
  color: #B86A48 !important;
}

/* Treatment-card arrow buttons (ver tratamento → arrow): slide right */
.btn--arrow,
.btn--arrow-4 {
  transition:
    transform 0.3s var(--hover-ease-cool),
    background-color 0.3s ease,
    color 0.3s ease !important;
}
.services-list__item:hover .btn--arrow,
.services__item:hover .btn--arrow,
a:hover > .btn--arrow,
a:hover > .btn--arrow-4 {
  transform: translateX(4px);
}

/* Blog category pills: lift + accent fill */
.blog-categories__pill {
  transition:
    transform 0.25s var(--hover-ease-cool),
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease !important;
}
.blog-categories__pill:hover {
  transform: translateY(-2px);
  background-color: #B86A48 !important;
  border-color: #B86A48 !important;
  color: #ffffff !important;
}

/* Gallery items: scale + slight rotate flair */
.gallery__item__image,
.page-gallery__item {
  overflow: hidden;
  transition: box-shadow 0.4s var(--hover-ease-cool) !important;
}
.gallery__item__image img,
.page-gallery__item img {
  transition: transform 0.7s var(--hover-ease-cool), filter 0.4s ease !important;
}
.gallery__item__image:hover,
.page-gallery__item:hover {
  box-shadow: var(--hover-shadow-glow) !important;
}
.gallery__item__image:hover img,
.page-gallery__item:hover img {
  transform: scale(1.08);
  filter: brightness(1.06) saturate(1.08);
}

/* Reduced-motion override: kill all the cool stuff */
@media (prefers-reduced-motion: reduce) {
  .services-list__item:hover,
  .services__item:hover,
  .blog-featured:hover,
  .blog-card:hover,
  .blog-related-card:hover,
  .blog-related-treatments__card:hover,
  .btn--primary:hover,
  .btn--secondary:hover,
  .header__buttons__switcher a:hover,
  .footer__social a:hover,
  .gallery__item__image:hover,
  .page-gallery__item:hover,
  .blog-categories__pill:hover {
    transform: none !important;
  }
  .btn--primary::before { display: none; }
  .services-list__item-image img,
  .services__item__image img,
  .blog-featured__image,
  .blog-card__image,
  .blog-related-card__image,
  .gallery__item__image img,
  .page-gallery__item img {
    transition: none !important;
  }
  .services-list__item:hover .services-list__item-image img,
  .services__item:hover .services__item__image img,
  .blog-featured:hover .blog-featured__image,
  .blog-card:hover .blog-card__image,
  .blog-related-card:hover .blog-related-card__image,
  .gallery__item__image:hover img,
  .page-gallery__item:hover img {
    transform: none !important;
    filter: none !important;
  }
  .blog-body a:not(.btn),
  .btn--arrow-link__label,
  a.link:not(.btn) {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1.5px !important;
    transition: none !important;
  }
}

/* ============================================
 * WCAG 2.2 AA FIX (2026-05-05)
 * Lighthouse a11y audit: Accessibility 93 → target 100
 * #e09672 coral fails 2.7:1 on light bg (need 4.5:1 normal text / 3:1 large).
 * #AD4E23 deep terracotta = 5.4:1 on white — passes AA for all text sizes.
 * Cookie banner: white on #e09672 = 2.6:1 → darken bg to #AD4E23 (white = 5.4:1).
 * Touch targets: modal tel/mailto links need 44px min tap area.
 * ============================================ */

/* Kicker labels and case labels: coral → accessible terracotta */
.hero__kicker,
.cases-header__kicker,
.page-gallery__hero .cases-header__kicker {
  color: #AD4E23 !important;
}

.cases-grid__case {
  color: #AD4E23 !important;
}

/* Cookie banner accept button: darken bg so white text passes AA */
.cosmo-cookie-banner__btn {
  background: #AD4E23 !important;
}
.cosmo-cookie-banner__btn:hover {
  background: #8B3B18 !important;
}

/* Contact modal: phone + email touch targets → 44px min */
#contact-map-modal a[href^="tel:"],
#contact-map-modal a[href^="mailto:"] {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0.4rem 0 !important;
}

/* ============================================
 * CONSULTATION POPUP (consult-popup.js)
 * Floating CTA button + modal form for non-treatment pages
 * ============================================ */

/* Floating button */
.cosmo-consult-btn {
  all: unset;
  position: fixed;
  bottom: 2.4rem;
  left: 2.4rem;
  z-index: 1000010;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 2rem;
  height: 4.4rem;
  background: #e09672;
  color: #231f20;
  border-radius: 999px;
  font-family: var(--global-font-family, "Avenir"), sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 0.4rem 1.6rem rgba(224,150,114,0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.35s ease;
}
.cosmo-consult-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 2.4rem rgba(224,150,114,0.55);
}
.cosmo-consult-btn--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Overlay */
.cosmo-consult-modal {
  position: fixed;
  inset: 0;
  z-index: 1000020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
}
.cosmo-consult-modal[hidden] { display: none; }
.cosmo-consult-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.cosmo-consult-modal.is-open .cosmo-consult-modal__bg { opacity: 1; }

/* Card */
.cosmo-consult-modal__card {
  position: relative;
  width: 100%;
  max-width: 44rem;
  background: #231f20;
  border-top: 3px solid #e09672;
  border-radius: 1.6rem;
  padding: 3.2rem 3.2rem 2.8rem;
  transform: translateY(1.6rem);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), opacity 0.28s ease;
}
.cosmo-consult-modal.is-open .cosmo-consult-modal__card {
  transform: translateY(0);
  opacity: 1;
}

/* Close */
.cosmo-consult-modal__close {
  all: unset;
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(200,198,195,0.6);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease;
}
.cosmo-consult-modal__close:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* Header */
.cosmo-consult-modal__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.cosmo-consult-modal__icon { color: #e09672; flex-shrink: 0; }
.cosmo-consult-modal__title {
  font-family: var(--heading-font-family, "Athena"), serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

/* Sub */
.cosmo-consult-modal__sub {
  color: rgba(200,198,195,0.8);
  font-size: 1.4rem;
  margin: 0 0 2rem;
  line-height: 1.5;
}

/* Form fields */
.cosmo-consult-modal__form { display: flex; flex-direction: column; gap: 1.4rem; }
.cosmo-consult-modal__field {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 0;
}
.cosmo-consult-modal__field input {
  all: unset;
  width: 100%;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(200,198,195,0.2);
  border-radius: 0.8rem;
  color: #fff;
  font-family: var(--global-font-family, "Avenir"), sans-serif;
  font-size: 1.5rem;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}
.cosmo-consult-modal__field input:focus {
  border-color: #e09672;
  background: rgba(255,255,255,0.09);
  outline: none;
}
.cosmo-consult-modal__field label {
  font-size: 1.2rem;
  color: rgba(200,198,195,0.65);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-family: var(--global-font-family, "Avenir"), sans-serif;
}

/* Submit */
.cosmo-consult-modal__submit {
  all: unset;
  width: 100%;
  padding: 1.2rem;
  background: #e09672;
  color: #231f20;
  border-radius: 0.8rem;
  font-family: var(--global-font-family, "Avenir"), sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  box-sizing: border-box;
  margin-top: 0.4rem;
}
.cosmo-consult-modal__submit:hover { background: #d07c58; transform: translateY(-1px); }
.cosmo-consult-modal__submit:disabled { opacity: 0.5; cursor: default; transform: none; }

/* Success */
.cosmo-consult-modal__success {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #a8e6a0;
  font-size: 1.5rem;
  padding: 1.2rem 0;
  line-height: 1.5;
}
.cosmo-consult-modal__success[hidden] { display: none; }

/* WhatsApp row */
.cosmo-consult-modal__wa {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(200,198,195,0.12);
  color: rgba(200,198,195,0.5);
  font-size: 1.3rem;
}
.cosmo-consult-modal__wa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #25D366;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.3rem;
}
.cosmo-consult-modal__wa-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .cosmo-consult-btn { font-size: 1.3rem; padding: 0 1.6rem; height: 4rem; }
  .cosmo-consult-modal__card { padding: 2.4rem 2rem 2rem; border-radius: 1.2rem; }
  .cosmo-consult-modal__title { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmo-consult-btn,
  .cosmo-consult-modal__bg,
  .cosmo-consult-modal__card { transition: none !important; }
}

/* ============================================
 * GOOGLE REVIEW CTA — footer
 * ============================================ */
.cosmo-footer-review {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem 0.6rem 0.9rem;
  border: 1px solid rgba(224,150,114,0.35);
  border-radius: 999px;
  color: #c8c6c3;
  font-size: 1.3rem;
  font-family: var(--global-font-family, "Avenir"), sans-serif;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.cosmo-footer-review:hover {
  border-color: #e09672;
  color: #e09672;
  background: rgba(224,150,114,0.06);
  text-decoration: none;
}
.cosmo-footer-review [data-pt],
.cosmo-footer-review [data-en] { font-size: 1.3rem; }

/* ============================================
 * MARKETING SPRINT 2026-05-19
 * Items 1-10: hover, CTA hierarchy, chips,
 * sticky bar, journey strip, form select
 * ============================================ */

/* Item 6 — card hover enhancement */
.services__item {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s cubic-bezier(0.22,1,0.36,1) !important;
}
.services__item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(62,25,88,0.12) !important;
}
.services__item:hover .services__item__image img {
  transform: scale(1.04) !important;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1) !important;
}

/* Item 10 — hero CTA hierarchy */
.hero__ctas .btn--primary {
  background: var(--color-theme-black) !important;
  color: var(--color-theme-white) !important;
  border-color: var(--color-theme-black) !important;
  font-weight: 600 !important;
}
.hero__ctas .btn--secondary {
  background: transparent !important;
  color: var(--color-theme-black) !important;
  border-color: rgba(16,13,14,0.35) !important;
  font-weight: 400 !important;
}
.hero__ctas .btn--secondary:hover {
  background: var(--color-theme-black) !important;
  color: var(--color-theme-white) !important;
  border-color: var(--color-theme-black) !important;
}

/* Item 7 — price chips (premium ink-on-canvas) */
.cosmo-price-chips {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  margin: 1.2rem 0 2.4rem;
}
.cosmo-price-chip--price {
  font-family: var(--heading-font-family, "Georgia", serif);
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--color-theme-black);
  letter-spacing: -0.01em;
  line-height: 1;
}
.cosmo-price-chip {
  font-family: var(--global-font-family, "Avenir"), "DM Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #6b6560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.cosmo-price-chip__sep {
  color: #c8c6c3;
  font-size: 1.6rem;
  margin: 0 1rem;
  user-select: none;
  display: inline;
  align-self: center;
}
@media (max-width: 599px) {
  .cosmo-price-chip--price { font-size: 2.2rem; }
  .cosmo-price-chip { font-size: 1.1rem; }
  .cosmo-price-chip__sep { margin: 0 0.7rem; }
}

/* Item 3 — sticky mobile CTA bar */
.cosmo-sticky-cta {
  display: none;
}
@media (max-width: 767px) {
  .cosmo-sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: #fff;
    border-top: 1px solid rgba(16,13,14,0.1);
    padding: 0.8rem 1.2rem;
    gap: 0.8rem;
    box-shadow: 0 -4px 16px rgba(16,13,14,0.06);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  }
  .cosmo-sticky-cta.is-visible {
    transform: translateY(0);
  }
  .cosmo-sticky-cta.is-hidden {
    transform: translateY(100%);
  }
  .cosmo-sticky-cta__wa,
  .cosmo-sticky-cta__book {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 4.4rem;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    font-family: var(--global-font-family, "Avenir"), sans-serif;
    cursor: pointer;
    border: none;
  }
  .cosmo-sticky-cta__wa {
    background: #25D366;
    color: #fff;
  }
  .cosmo-sticky-cta__book {
    background: #100D0E;
    color: #fff;
  }
  /* Hide bar when popup or Wati is open */
  body.cosmo-modal-open .cosmo-sticky-cta { display: none !important; }
  /* Safe area for iOS */
  .cosmo-sticky-cta { padding-bottom: max(0.8rem, env(safe-area-inset-bottom)); }
}

/* Item 9 — patient journey strip */
.cosmo-journey-wrap {
  background: #100D0E;
  padding: 4rem 2rem;
  margin-bottom: 0;
}
.cosmo-journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.cosmo-journey::before {
  content: '';
  position: absolute;
  top: 2.8rem;
  left: calc(12.5% + 1rem);
  right: calc(12.5% + 1rem);
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.cosmo-journey__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.2rem;
  position: relative;
}
.cosmo-journey__num {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 1.4rem;
  font-family: "Cormorant Garamond", "Cormorant", serif;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.04);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.cosmo-journey__label {
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
  font-family: var(--global-font-family, "Avenir"), sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.cosmo-journey__sub {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.5);
  font-family: var(--global-font-family, "Avenir"), sans-serif;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .cosmo-journey { grid-template-columns: repeat(2, 1fr); gap: 3rem 0; }
  .cosmo-journey::before { display: none; }
  .cosmo-journey__step { padding: 0 0.8rem; }
}
@media (max-width: 420px) {
  .cosmo-journey { grid-template-columns: 1fr 1fr; gap: 2.4rem 0; }
  .cosmo-journey-wrap { padding: 3rem 1.6rem; }
}

/* Popup form: treatment select */
.cosmo-consult-modal__select-wrap {
  position: relative;
  margin-bottom: 1.2rem;
}
.cosmo-consult-modal__select-wrap select {
  width: 100%;
  padding: 1.1rem 3rem 1.1rem 1.2rem;
  border: 1px solid rgba(16,13,14,0.2);
  border-radius: 8px;
  background: #fff;
  font-size: 1.4rem;
  color: #100D0E;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--global-font-family, "Avenir"), sans-serif;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}
.cosmo-consult-modal__select-wrap select:focus { border-color: var(--color-theme-accent-2); box-shadow: 0 0 0 3px rgba(224,150,114,0.20); }
.cosmo-consult-modal__select-wrap::after {
  content: '';
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #6b6560;
  pointer-events: none;
}

/* Global lang toggle — hide off-language [data-pt]/[data-en] via CSS :lang()
   Works with html[lang="pt-PT"] and html[lang="en"].
   applyLang() in popup/cookie JS overrides via inline style (higher specificity). */
:lang(en) [data-pt] { display: none !important; }
:lang(pt) [data-en] { display: none !important; }

/* Fix 5 — Review card text size */
.reviews__item__content p,
.reviews__item__content [class*="body-big"] {
  font-size: 1.6rem !important;
  line-height: 1.6 !important;
}
.reviews__item__content .typo--caption,
.reviews__item__content [class*="caption"],
.reviews__item__content .color--gray {
  font-size: 1.3rem !important;
  line-height: 1.5 !important;
}
.reviews__item__content .typo--medium {
  font-size: 1.5rem !important;
}

/* Treatment image lightbox */
a.cosmo-lightbox-link {
  display: block;
  cursor: zoom-in;
  text-decoration: none;
}
a.cosmo-lightbox-link img {
  transition: opacity 0.2s ease;
}
a.cosmo-lightbox-link:hover img {
  opacity: 0.88;
}

/* ============================================
 * TREATMENT CARD TOOLTIPS (cosmo-tt-v1)
 * Injected via cosmo-tooltips.js on hub pages
 * ============================================ */
.services-list__item-image .cosmo-tt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(16,13,14,0.93) 0%, rgba(16,13,14,0.60) 55%, transparent 100%);
  color: #fff;
  padding: 28px 14px 12px;
  transform: translateY(100%);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.28s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.services-list__item:hover .cosmo-tt {
  opacity: 1;
  transform: translateY(0);
}
.cosmo-tt-desc {
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 400;
}
.cosmo-tt-dur {
  display: inline-block;
  background: var(--color-theme-accent-2, #e09672);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
  width: fit-content;
}
@media (max-width: 767px) {
  .services-list__item-image .cosmo-tt { display: none !important; }
}