/* Compatibility layer on top of the Freshflow template (loaded last; template files are untouched). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Touch devices have no mouse pointer: hide the template's custom cursor circles */
@media (hover: none), (pointer: coarse) {
  .custom-cursor__cursor,
  .custom-cursor__cursor-two { display: none !important; }
}

@media (max-width: 767px) {
  /* bigger tap area for the hamburger without moving it */
  .main-menu .mobile-nav__toggler { padding: 13px; margin: -13px; }
  /* footer links were 26px tall; give them a comfortable tap height */
  .footer-widget__quick-links-list li a { display: inline-block; padding: 6px 0; }
  /* 16px inputs stop iOS Safari from zooming the page when a field is focused */
  input, select, textarea { font-size: 16px; }
  /* nova logo (4.21:1) e larga: limitar pela largura para sobrar folga ao lado do hamburguer */
  .main-menu__logo img { height: auto; width: min(220px, 58vw); }
}

/* logo links were only text-line tall; make the anchor as tall as the logo image */
.main-menu__logo a, .site-footer__logo a, .mobile-nav__content .logo-box a { display: inline-block; }

@media (max-width: 767px) {
  /* tiny social icons in the mobile menu */
  .mobile-nav__social a { padding: 10px; }
}

@media (max-width: 767px) {
  /* decorative outlined brand name: clipped on phones and worse with long names */
  .about-one__left-big-title { display: none; }
}

/* Hover preview photos of the Services list: there is no hover on touch screens, and the template animation shows them for ~1s on load */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .services-one__hover-img { display: none; }
}

/* ---- About photo: template mask (heart) -> rounded arch ---- */
.about-one__left-img-3 {
  -webkit-mask: none;
  mask: none;
  border-radius: 190px 190px 28px 28px;
  box-shadow: 0 18px 45px rgba(5, 23, 61, 0.12);
}
.about-one__left-img-3 img { border-radius: 0; display: block; }

/* ---- Back to top: vertical "GO BACK TOP" -> round blue button with a white arrow ---- */
.scroll-to-top {
  width: 52px;
  height: 52px;
  right: 24px;
  bottom: 24px;
  justify-content: center;
  border-radius: 50%;
  background: var(--Freshflow-base);
  box-shadow: 0 10px 30px rgba(46, 114, 255, 0.30);
  transform: none;              /* the template rotates it -90deg */
  text-decoration: none;
  z-index: 999;
}
.scroll-to-top.show { bottom: 24px; }
.scroll-to-top:hover { background: #1f62ea; transform: translateY(-3px); }
.scroll-to-top__wrapper,
.scroll-to-top__text { display: none; }
.scroll-to-top::before {        /* arrow drawn with borders: no font needed */
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
  border-radius: 2px;
  transform: rotate(45deg);
}
@media (max-width: 767px) {
  .scroll-to-top { width: 46px; height: 46px; right: 16px; bottom: 16px; }
  .scroll-to-top.show { bottom: 16px; }
}
@media (max-width: 991px) {
  /* the heart mask had transparent padding at the bottom; the arch touches the section title without it */
  .about-one__left-img-3 { margin-bottom: 36px; }
}

/* =====================================================================
   MOBILE LAYOUT (audit AUDITORIA_MOBILE_2026-09-30.md). Everything below is inside max-width media queries:
   desktop (>= 992px) is untouched.
   ===================================================================== */
@media (max-width: 991px) {
  /* centered layout for phones AND tablets (audit M2-M7, M9) */
  /* M5 section titles centered (lists and long text stay left, inside centered blocks) */
  .section-title,
  .services-one__top-left,
  .services-one__top-right,
  .about-one__right .section-title,
  .before-and-after__right .section-title,
  .why-choose-one__left .section-title,
  .contact-one__right .section-title { text-align: center; }
  .services-one__top-text,
  .about-one__text,
  .before-and-after__text { text-align: center; }

  /* M4 hero */
  .banner-one__left { text-align: center; }
  .banner-one__btn-box { display: flex; justify-content: center; }
  .banner-one__satisfied-partner { flex-direction: column; align-items: center; justify-content: center; margin-top: 40px; gap: 10px; }
  .banner-one__satisfied-partner-content { text-align: center; }
  .banner-one__satisfied-partner-count-box { justify-content: center; }
  .banner-one__shape-5 { display: none; }
  .banner-one__satisfied-partner-list { justify-content: center; }

  /* M2 Services */
  .services-one__img-2 { width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
  .services-one__experience-box { margin-left: auto; margin-right: auto; }

  /* M3 Why Choose */
  .why-choose-one__img-box-1,
  .why-choose-one__img-box-2 { width: 284px; max-width: 100%; margin-left: auto; margin-right: auto; }
  .why-choose-one__contact-box { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }

  /* Contact photo: the template leaves a 95px right margin */
  .contact-one__left { margin-right: 0; margin-top: 30px; }

  /* M7 Before/After thumbnails */
  .before-and-after__img-list { justify-content: center; }
  .before-and-after__points { width: fit-content; margin-left: auto; margin-right: auto; }

  /* M6 About: two small photos side by side, arch below */
  .about-one__left-img-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-right: 0; }
  .about-one__left-img-1,
  .about-one__left-img-2 { width: 100%; }
  .about-one__left-img-1 img,
  .about-one__left-img-2 img { width: 100%; aspect-ratio: 204 / 248; object-fit: cover; }
  .about-one__points-box { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
  .about-one__mission-box { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }

}

@media (max-width: 767px) {
  /* phone only: email, footer columns, vertical rhythm, back-to-top */
  /* M1 email/phone never overflow the blue box */
  .contact-one__call-contact h4 { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
  .contact-one__call-contact { min-width: 0; }
  .site-footer__contact-info-content h5 { overflow-wrap: anywhere; }


  /* M10 vertical rhythm */
  .about-one { padding-top: 70px; padding-bottom: 60px; }
  .services-one { padding-top: 70px; padding-bottom: 60px; }
  .why-choose-one { padding-top: 70px; padding-bottom: 60px; }
  .process-one { padding-top: 70px; padding-bottom: 60px; }
  .before-and-after { padding-top: 70px; padding-bottom: 70px; }
  .faq-one { padding-top: 70px; padding-bottom: 70px; }
  .testimonial-one { padding-top: 70px; padding-bottom: 70px; }
  .contact-one { padding-top: 70px; }

  /* M11 back-to-top smaller */
  .scroll-to-top { width: 42px; height: 42px; right: 12px; bottom: 12px; }
  .scroll-to-top.show { bottom: 12px; }

}

@media (max-width: 991px) {
  /* M9 tablet: the decorative outlined brand name is 3 lines high, hide it up to 991 */
  .about-one__left-big-title { display: none; }
}

@media (max-width: 991px) {
  /* M9 tablet: one column inside the About and Why Choose groups, hero image and Google badge inside the screen */
  .about-one__left .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .about-one__left-img-box-2 { margin-left: 0; }
  .about-one__left-img-3 { max-width: 420px; margin-left: auto; margin-right: auto; }
  .banner-one__img-box { max-width: 526px; margin-left: auto; margin-right: auto; }
  .banner-one__google-rating { left: 10px; }
  .why-choose-one__client-box { margin-left: auto; margin-right: auto; }
  .why-choose-one__left > .row { justify-content: center; }
  .contact-one { padding-top: 100px; }
}

@media (max-width: 991px) {
  /* Services composition: stacked and centered like on phones (the template only does this below 768 px) */
  .services-one__left { margin-left: auto; margin-right: auto; max-width: 600px; }
  .services-one__img-shape-1,
  .services-one__shape-4 { display: none; }
  .services-one__img-2 { position: relative; left: 0; top: 0; bottom: auto; margin-top: 30px; }
  .services-one__img-2 img { width: 100%; }
  .services-one__experience-box { position: relative; left: auto; right: auto; bottom: auto; margin-top: 30px; margin-left: auto; margin-right: auto; }
  .services-one__right { margin-top: 50px; }

  /* Contact: photo group centered, contact box wraps instead of breaking the phone number */
  .contact-one__left { margin-left: 0; margin-right: 0; }
  .contact-one__left .contact-one__img-box { max-width: 520px; margin-left: auto; margin-right: auto; }
  .contact-one__call-list { flex-wrap: wrap; justify-content: center; gap: 18px 30px; }
  .contact-one__call-contact h4 { font-size: 18px; }
  .contact-one__call-contact h4 a { white-space: nowrap; }
  .banner-one__img { margin-left: auto; margin-right: auto; }
}

@media (max-width: 991px) {
  /* Contact photo group: one centered box, the two small circles stay inside the screen */
  .contact-one__left { max-width: 520px; margin-left: auto; margin-right: auto; margin-top: 50px; }
  .contact-one__small-img-1 { top: -45px; left: 0; width: 170px; height: 170px; }
  .contact-one__small-img-2 { bottom: -50px; right: 0; width: 190px; height: 190px; }
}



/* =====================================================================
   ORANGE -> YELLOW: the template's "primary" accent (#F46744) becomes its own yellow (#FFD25D).
   Every orange in the CSS comes from this variable. Text that sat in white on orange turns navy for contrast.
   ===================================================================== */
:root { --Freshflow-primary: #FFD25D; --Freshflow-primary-rgb: 255, 210, 93; }
.main-menu__btn a,
.main-menu__btn a span,
.main-menu__btn a span { color: var(--Freshflow-black); }
.process-one ul li:first-child .process-one__count::before,
.why-choose-one__right-bottom ul li:nth-child(2) .why-choose-one__count::before { color: var(--Freshflow-black); }

/* =====================================================================
   FOOTER V2: single navy band, 4 columns + bottom line (template footer classes reused)
   ===================================================================== */
.site-footer--v2 .site-footer__shape-2 { opacity: .25; }
.site-footer--v2 .site-footer__widget-box { border: 0; padding: 80px 0 50px; }
.site-footer--v2 .site-footer__logo img { height: auto; width: min(280px, 100%); }
.site-footer--v2 .site-footer__text-1 { margin-top: 22px; max-width: 300px; line-height: 1.6; }
.site-footer--v2 .site-footer__social-box { padding: 0; border: 0; margin-top: 22px; text-align: left; }
.site-footer--v2 .site-footer__social-title { font-size: 15px; margin-bottom: 12px; }
.site-footer--v2 .site-footer__social { justify-content: flex-start; }
.site-footer--v2 .footer-widget__title { margin-bottom: 28px; }
.site-footer--v2 .footer-widget__quick-links-list li + li { margin-top: 12px; }
.footer-widget__contact-list li { display: flex; align-items: flex-start; gap: 12px; color: #F1F1F2; line-height: 1.5; }
.footer-widget__contact-list li + li { margin-top: 14px; }
.footer-widget__contact-list li > span[class^="icon-"] { color: var(--Freshflow-extra); font-size: 16px; line-height: 1.5; flex: 0 0 18px; }
.footer-widget__contact-list a { color: #F1F1F2; overflow-wrap: anywhere; }
.footer-widget__contact-list a:hover { color: var(--Freshflow-extra); }
.site-footer--v2 .site-footer__bottom { background: transparent; border-top: 1px solid rgba(255, 255, 255, .10); padding: 24px 0; }
.site-footer--v2 .site-footer__bottom-text { font-size: 15px; margin: 0; }
.site-footer--v2 .site-footer__credit { text-align: right; font-size: 14px; opacity: .75; }
.site-footer--v2 .site-footer__credit a { color: inherit; text-decoration: underline; }
@media (max-width: 991px) {
  .site-footer--v2 .site-footer__widget-box { padding: 60px 0 30px; }
  .site-footer--v2 .site-footer__widget-box .row > div { margin-bottom: 30px; }
}
@media (max-width: 767px) {
  .site-footer--v2 .site-footer__widget-box { padding: 50px 0 10px; }
  .site-footer--v2 .footer-widget__brand,
  .site-footer--v2 .site-footer__social-box { text-align: center; }
  .site-footer--v2 .site-footer__text-1 { margin-left: auto; margin-right: auto; }
  .site-footer--v2 .site-footer__social { justify-content: center; }
  .site-footer--v2 .site-footer__widget-box .row > div:nth-child(2),
  .site-footer--v2 .site-footer__widget-box .row > div:nth-child(3) { flex: 0 0 50%; max-width: 50%; }
  .site-footer--v2 .site-footer__widget-box .row > div:nth-child(4) { flex: 0 0 100%; max-width: 100%; }
  .site-footer--v2 .footer-widget__contact { width: fit-content; max-width: 100%; margin: 0 auto; }
  .site-footer--v2 .footer-widget__contact .footer-widget__title { text-align: center; }
  .site-footer--v2 .footer-widget__contact .footer-widget__title:before { left: 50%; transform: translateX(-50%); }
  .site-footer--v2 .site-footer__bottom-text,
  .site-footer--v2 .site-footer__credit { text-align: center; }
  .site-footer--v2 .site-footer__copy { margin-bottom: 6px; }
}

/* Contact box (desktop): the long email squeezed the phone into 2-3 lines. Keep both on one line. */
@media (min-width: 992px) {
  .contact-one__call-list { gap: 60px; }
  .contact-one__call-list li::before { left: -30px; }
  .contact-one__call-list li { flex: 0 0 auto; }
  .contact-one__call-contact h4 a { white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .contact-one__call-contact h4 { font-size: 18px; }
}
@media (min-width: 1400px) {
  .contact-one__call-contact h4 { font-size: 20px; }
  .contact-one__call-list { gap: 50px; }
  .contact-one__call-list li::before { left: -25px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .contact-one__call-list { gap: 40px; }
  .contact-one__call-list li::before { left: -20px; }
  .contact-one__call-contact h4 { font-size: 17px; }
}

/* Call floating button (bottom-left; back-to-top is bottom-right) */
.call-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2E72FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 10px 30px rgba(46, 114, 255, 0.35);
  z-index: 999;
  transition: transform .2s ease, background-color .2s ease;
}
.call-float:hover { color: #fff; background: #1f5fe6; transform: translateY(-3px); }
@media (max-width: 767px) {
  .call-float { left: 12px; bottom: 12px; width: 50px; height: 50px; font-size: 27px; }
}
/* room at the very end of the page so the floating buttons never cover the copyright line */
.site-footer--v2 .site-footer__bottom { padding-bottom: 96px; }
@media (max-width: 767px) { .site-footer--v2 .site-footer__bottom { padding-bottom: 80px; } }
/* Phone icon next to Instagram (header top bar, footer, mobile menu): same circles, gap between them */
.main-menu__top-social,
.site-footer--v2 .site-footer__social { display: flex; gap: 10px; }
.main-menu__top-social a .fa-phone { font-size: 15px; }
.site-footer__social a .fa-phone { font-size: 20px; }

/* Before/After selector thumbnails (buttons around the template's circles) */
.before-and-after__selector {
  display: block;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.before-and-after__selector .before-and-after__img-list-img {
  width: 80px;
  box-sizing: border-box;
  transition: border-color .2s ease;
}
.before-and-after__selector.active .before-and-after__img-list-img { border-color: var(--Freshflow-base, #2E72FF); }
.before-and-after__selector:focus-visible { outline: 2px solid var(--Freshflow-base, #2E72FF); outline-offset: 3px; border-radius: 50%; }
.before-and-after__img-list { flex-wrap: wrap; }
