/* Configurações Default */
:root {
	--color_primary: #43aa8b;
	--color_secondary: #43aa8b;
	--color_strong: #4d908e;
	--color_distinct: #ccc;
}
p {
	text-align: justify!important;
}

/* START CLASS Configurações Default */
.city_comment_form_login .theam_btn, .side_news_deatil:hover .theam_btn, .city_news2_post.post2:hover .theam_btn, .navigation ul li ul li a:hover, .blog_post_slide .slick-prev:hover, .blog_post_slide .slick-next:hover, .blog_next_post ul li a:hover, .city_blog2_fig.fig2.detail .city_blog2_met::after, .city_blog2_fig.fig2.detail .city_blog2_met::before, .city_blog2_fig.fig2.detail .city_blog2_met, .city_contact_text:hover, .city_event_detail.question .event_booking_area .theam_btn.btn2, .city_mayor_contact .theam_btn, .sidebar_search_login a, .forum_author_posts, .forum_title, .city_news2_detail:hover .theam_btn, .city_404_wrap.coming.overlay::before, .city_404_text .theam_btn:hover, .city_team_fig .city_top_social li a:hover, .blog_tags a:hover, .blog_author_date li::before, .city_blog2_fig.fig2 .theam_btn:hover, .city_blog2_fig.fig2 .theam_btn:hover, .city_blog2_fig .paly_btn:hover, .city_blog2_fig:hover .city_blog2_met, .city_blog2_fig:hover .city_blog2_met::after, .city_blog2_fig:hover .city_blog2_met::before, .city_blog2_list:hover .city_meta_list, .list li:hover, .list li.option.selected.focus, .event_booking_form .theam_btn:hover, .event_counter_list .countdown li, .city_event2_year .list li:hover, .city_event2_year .list li.option.selected.focus, .city_event2_list2_row:hover .theam_btn, .city_event2_list2_row:hover .event_categories_date, .city_full_event_list:hover .theam_btn.btn2, .city_special2_dream, .city_treatment_wrap, .city_treatment_text .paly_btn, .city_about_list.list2 .theam_btn:hover, .accordion-section-title.active, .city_health2_text .slick-prev:hover, .city_health2_text .slick-next:hover, .city_emergency_slider .slick-prev:hover, .city_emergency_slider .slick-next:hover, .city_department_wrap .slick-prev:hover, .city_department_wrap .slick-next:hover, .side_submit_form, .city_event2_fig:hover .theam_btn.btn2, .city_event2_date, .city_visit_text .theam_btn:hover, .city_business_fig .city_service2_list span, .city_service2_btn.btn2 .theam_btn, .pagination ul li a:hover, .city_news2_text .theam_btn, .special_service_text .theam_btn:hover, .widget_wrap.overlay::before, .widget_wrap, .city_news_feild, .city_client_wrap, .city_event_fig:hover .event_date, .city_project_wrap .slick-prev:hover, .city_project_wrap .slick-next:hover, .city_project_fig .overlay::before, .city_jobs_item.overlay::before, .city_blog_fig.position:hover .theam_btn, .city_department_wrap .slick-prev:hover, .city_department_wrap .slick-next:hover, .city_department_wrap.overlay::before, .city_department_fig:hover, .city_about_video .overlay::before, .city_top_social ul li a, .city_main_banner .slick-prev:hover, .city_main_banner .slick-next:hover, .banner_text, .city_top_navigation, .city_top_news span{	
	background: var(--color_primary)!important;
	background-color: var(--color_primary)!important;
}
.city_comment_form_login .theam_btn, .city_login h4::before, .side_news_deatil:hover .theam_btn, .navigation ul > li > ul, .blog_post_slide .slick-prev:hover, .blog_post_slide .slick-next:hover, .forum_quote, .forum_card, .city_news2_detail:hover .theam_btn, .city_news2_detail:hover, .city_team_fig .city_top_social li a:hover, .project_title, .city_blog2_fig.fig2 .theam_btn:hover, .city_blog2_fig:hover .see_more_btn, .city_blog2_fig .paly_btn:hover, .city_blog2_list:hover .city_meta_list, .city_blog2_list:hover .city_blog2_text, .event_booking_area textarea:focus, .event_booking_field input:focus, .event_heading, .city_event2_year .sidebar_search input:focus, .city_event2_year .list, .city_event2_list2_row:hover .theam_btn, .city_event2_list2_row:hover .city_event2_list2_fig figure, .sidebar_search input:focus, .sidebar_heading, .city_about_list.list2 .theam_btn:hover, .city_senior_team > figure, .city_health2_text .slick-prev:hover, .city_health2_text .slick-next:hover, .city_emergency_slider .slick-prev:hover, .city_emergency_slider .slick-next:hover, .city_department_wrap .slick-prev:hover, .city_department_wrap .slick-next:hover, .city_health2_service:hover, .city_visit_text .theam_btn:hover, .city_business_fig figure::after, .city_service2_btn.btn2 .theam_btn, .city_health_fig::after, .city_news2_text .theam_btn, .special_service_text .theam_btn:hover, .city_request_list, .city_project_wrap .slick-prev:hover, .city_project_wrap .slick-next:hover, .section_heading.center::before, .city_blog_fig.position:hover .theam_btn, .city_office_list, .city_department_wrap .slick-prev:hover, .city_department_wrap .slick-next:hover, .city_department_fig:hover, .section_heading, .city_top_social ul li a, .city_top_social ul li a:hover {
	border-color: var(--color_secondary)!important;
}
.city_top_navigation::before {
	background-color: var(--color_strong)!important;
}
.city_forget:hover, .city_checkout_list li a:hover, .dl-menuwrapper li a:hover, .city_news2_post.post2:hover .city_news2_detail h4, .navigation ul li ul li a::before, .blog_post_slide_text h6:hover a, .blog_next_post ul li a i, .detail_process_list li a:hover, .city_mayor_text p, .city_mayor_text h2, .forum_user_meta .city_meta_list li a:hover, .forum_detail_deta > a:hover, .forum_detail_deta .city_meta_list li a:hover, .forum_quote h5, .forum_detail_deta a i, .forum_author_text h6:hover a, .forum_month a, .city_news2_detail .city_meta_list li a:hover, .city_news2_detail:hover h2, .city_team_fig:hover .city_team_text h4 a, .information_list li a:hover, .city_project_description .city_local_link li a::before, .city_blog2_fig.fig2:hover .city_meta_list li a:hover, .city_blog2_fig.fig2 .city_blog2_text h4:hover a, .city_blog2_fig.fig2:hover .city_meta_list li a i, .city_blog2_fig:hover .see_more_btn, .city_blog2_text h5:hover a, .city_blog2_list .city_meta_list li a i, .city_event_tags span a:hover, .event_counter_list .countdown li::before, .venue_list ul li p:hover a, .city_blog_text.event2 .social_icon li a:hover, .city_event2_list2_row:hover .share_icon, .city_blog_text.event2 .city_meta_list li a:hover, .city_blog_text.event2 h4:hover a, .city_blog_text.event2 span, .event2_menu_list a:hover, .event_video .paly_btn:hover, .event_categories_text a:hover, .categories_list ul li a:hover, .section_heading h3, .city_senior_team:hover .city_senior_team_text h5, .city_senior_team_text a:hover, .city_local_link li a:hover, .city_health2_service:hover span, .city_health2_service a:hover, .city_health2_service:hover h5 a, .side_notice_text h6:hover a, .side_notice_detail > a, .side_contact_text a:hover, .city_event2_text h4:hover a, .city_event2_text span, .city_event2_text ul li a:hover, .city_visit_text p i, .city_visit_text h3 span, .see_more_btn:hover, .city_busine_detail li a:hover, .city_busine_detail li a i, .city_blog_grid_text a:hover, .emergency_service_item h4:hover a, .city_emergency_slide_text h5:hover a, .city_emergency_call ul li a:hover, .special_service_text .theam_btn, .city_service2_list > span, .breadcrumb > li a:hover, .city_project_mansory ul li a.active, .city_request_link ul li a:hover::before, .city_request_link ul li a:hover, .city_document_list ul li a:hover, .city_news_meta li a:hover, .city_event_fig a:hover, .city_event_fig > a:hover, .city_event_fig:hover .city_date_text a i, .city_event_fig:hover .custom_size, .city_jobs_item span, .ciy_jobs_row span, .city_blog_fig.position:hover .share_icon, .city_office_text a, .city_department_text a:hover, .city_about_link li a:hover, .section_heading h2, .city_service_text h5 a:hover, .banner_search_field a {
	color: var(--color_strong)!important;
}
.paly_btn:hover, .top_user:hover, .blog_post_author_text .city_top_social li a, .blog_detail_row .city_event_meta li a, .forum_fig.forum2 .forum_text span, .side_news_text:hover p, .side_news_text:hover span, .tabs li.active a, .tabs li.active a:hover, .city_health_text h2, .city_service2_fig:hover .city_service2_text a, .widget_service ul li a:hover::before, .widget_service ul li a:hover, .city_request_text span, .city_request_row > span, .social_icon li a, .city_about_text h6, .banner_search_field a {
	color: var(--color_distinct)!important;
}
/* END CLASS Configurações Default */

.inner-background { background: #05579e!important; }
.width_control { min-height: 250px; }
.city_department_fig { min-height: 185px; }
.city_news_text h2 { font-size: 22px; }
.city_news_fig_1 { margin-bottom: 40px; }
.city_news_fig_1 figure { max-height: 280px; min-height: 250px; }
.city_news_fig_2 figure { width: 115px!important; height: auto; }
.ciy_jobs_caption h2 { font-size: 25px; }
.city_jobs_item { padding: 40px!important; }
.city_about_fig { padding: 0px 30px 70px 0px!important; }
.sidebar_project {
  padding: 25px 30px;
  background-color: #fff;
  margin-bottom: 30px;
}
.border::after, .border::before {
	display: none!important;
}
.banner_text {
	padding: 42px 30px 10px!important;
}
.city_jobs_wrap {
	background-image: url("../images/estrutura.jpg")!important;
}
.city_event2_fig {
	margin-bottom: 85px!important;
}
.city_blog2_list p a{
	color: #000!important;
}
.swal2-popup {
	font-size: 15px!important;
}

.widget_service ul li a:hover{ 
	color: #111111;
}
.main-menu-03 ul > li {
	margin-left: 30px!important;
}
.main-menu ul li ul.submenu li {
	margin-left: 0px!important;
}
.place__search .form-control {
	padding: 0 40px!important;
}

/* ============================================================
   Slider de Frases Inspiradoras
   Estiliza-se como a antiga seção .newsletter: box laranja em forma
   de pílula sobreposto no topo do footer escuro. Cor da marca
   (--pelocis-base #dd9947), texto branco, shapes nas extremidades.
   ============================================================ */
.quotes-slider {
    padding: 40px 0;
    position: relative;
    background: transparent;
}
.quotes-slider__inner {
    background-color: var(--pelocis-base, #dd9947);
    position: relative;
    padding: 50px 40px;
    margin-bottom: -138px;
    z-index: 9;
    border-radius: 120px;
    overflow: hidden;
    max-width: 1431px;
    margin-left: auto;
    margin-right: auto;
}
.quotes-slider__shape {
    position: absolute;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    height: 100%;
    top: 0;
    z-index: 1;
}
.quotes-slider__shape--one { left: -63px; }
.quotes-slider__shape--two { right: -83px; }
.quotes-slider__box {
    position: relative;
    z-index: 11;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 70px;
    text-align: center;
    min-height: 260px;
}
.quotes-slider__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 140px;
    color: #fff;
    opacity: 0.10;
    pointer-events: none;
    line-height: 1;
    z-index: 0;
}
.quotes-slider__item {
    position: relative;
    z-index: 1;
    padding: 4px 8px;
    /* min-height reserva espaço antes do Owl Carousel inicializar — evita CLS */
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.quotes-slider__text {
    font-family: var(--pelocis-heading-font, 'Ellograph CF', Georgia, serif);
    font-style: italic;
    font-size: clamp(18px, 2.1vw, 24px);
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    margin: 0 auto;
    max-width: 780px;
    text-align: center !important;
    border: 0;
    padding: 0;
    background: transparent;
    quotes: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.quotes-slider__divider {
    display: block;
    width: 48px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    margin: 18px auto 12px;
    border-radius: 2px;
}
.quotes-slider__author {
    display: block;
    font-style: normal;
    font-family: var(--pelocis-heading-font, 'Ellograph CF', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--pelocis-letter-space-xl, 0.2em);
    color: #fff;
    text-transform: uppercase;
    margin: 0;
}
.quotes-slider__source {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
    font-style: italic;
    margin-top: 4px;
}

/* Setas de navegação (prev/next) — círculos brancos sobre o box laranja */
.quotes-slider__carousel .owl-nav {
    margin-top: 0 !important;
}
.quotes-slider__carousel .owl-nav button.owl-prev,
.quotes-slider__carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 0 !important;
    color: var(--pelocis-base, #dd9947) !important;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
    cursor: pointer;
    z-index: 3;
}
.quotes-slider__carousel .owl-nav button.owl-prev { left: 8px; }
.quotes-slider__carousel .owl-nav button.owl-next { right: 8px; }
.quotes-slider__carousel .owl-nav button.owl-prev:hover,
.quotes-slider__carousel .owl-nav button.owl-next:hover,
.quotes-slider__carousel .owl-nav button.owl-prev:focus,
.quotes-slider__carousel .owl-nav button.owl-next:focus {
    background: #fff !important;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);
}
.quotes-slider__carousel .owl-nav button.owl-prev:focus-visible,
.quotes-slider__carousel .owl-nav button.owl-next:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Dots — brancos sobre o box laranja */
.quotes-slider__carousel .owl-dots {
    margin-top: 20px !important;
    position: relative;
    z-index: 2;
}
.quotes-slider__carousel .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    margin: 5px 4px;
    transition: width 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
}
.quotes-slider__carousel .owl-dots .owl-dot.active span {
    background: #fff;
    width: 22px;
    border-radius: 10px;
}
.quotes-slider__carousel .owl-dots .owl-dot:hover span {
    background: rgba(255, 255, 255, 0.8);
}
.quotes-slider__carousel .owl-dots .owl-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 10px;
}

/* Single-quote: esconde controles */
.quotes-slider__carousel.has-single .owl-nav,
.quotes-slider__carousel.has-single .owl-dots {
    display: none;
}

/* Responsivo (segue breakpoints do .newsletter original) */
@media (max-width: 1199px) {
    .quotes-slider__inner { max-width: 90%; }
}
@media (max-width: 767px) {
    .quotes-slider { padding: 30px 0; }
    .quotes-slider__inner {
        border-radius: 20px;
        padding: 40px 16px;
        margin-bottom: -100px;
    }
    .quotes-slider__box { padding: 0 8px; min-height: 240px; }
    .quotes-slider__item { min-height: 180px; }
    .quotes-slider__icon { font-size: 90px; }
    .quotes-slider__carousel .owl-nav { display: none; }
    .quotes-slider__shape--one,
    .quotes-slider__shape--two { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .quotes-slider__carousel .owl-nav button,
    .quotes-slider__carousel .owl-dots .owl-dot span { transition: none; }
}

/* ============================================================
   "Como funciona" — sidebar da página de serviço
   Substituiu a antiga box de CTA "conversa gratuita"
   ============================================================ */
.service-sidebar__how-it-works .service-sidebar__title {
    margin: 0 0 22px;
    color: #fff;
    font-size: 22px;
    font-weight: 500;
}
.service-sidebar__how-it-works .service-sidebar__title b {
    font-weight: 700;
}
.how-it-works__list {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}
.how-it-works__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0 18px;
}
.how-it-works__item + .how-it-works__item {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 18px;
}
.how-it-works__step {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--color_primary);
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.how-it-works__content { flex: 1 1 auto; }
.how-it-works__heading {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}
.how-it-works__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    text-align: left !important;
}

/* ============================================================
   Botão flutuante de WhatsApp (canto inferior direito)
   ============================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    z-index: 9998;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float:hover,
.whatsapp-float:focus {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45);
    color: #fff;
    text-decoration: none;
}
.whatsapp-float__icon {
    position: relative;
    z-index: 2;
    line-height: 1;
}
.whatsapp-float__ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.45);
    animation: wa-pulse 2.2s ease-out infinite;
    z-index: 1;
}
@keyframes wa-pulse {
    0%   { transform: scale(1);    opacity: .55; }
    100% { transform: scale(1.85); opacity: 0;   }
}
.whatsapp-float__tooltip {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: #1f2d3d;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.whatsapp-float__tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #1f2d3d;
}
.whatsapp-float:hover .whatsapp-float__tooltip,
.whatsapp-float:focus .whatsapp-float__tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
/* Empurra o scroll-to-top do tema (rotacionado 90° via transform pelo
   pelocis.min.css) para CIMA dos botões flutuantes empilhados.
   Stack: WA (30px+60px=90px) → Instagram (100px+60px=160px) → scroll-to-top (230px). */
.scroll-to-target.scroll-to-top { bottom: 230px !important; }
.scroll-to-target.scroll-to-top.show { bottom: 240px !important; }

@media (max-width: 576px) {
    .whatsapp-float {
        width: 54px;
        height: 54px;
        font-size: 26px;
        bottom: 20px;
        right: 20px;
    }
    .whatsapp-float__tooltip { display: none; }
    .scroll-to-target.scroll-to-top { bottom: 200px !important; }
    .scroll-to-target.scroll-to-top.show { bottom: 210px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float__ripple { animation: none; display: none; }
    .whatsapp-float { transition: none; }
}

/* ============================================================
   Botão flutuante de Instagram (canto inferior direito, acima do WhatsApp)
   Stack desktop: WA bottom:30px → Instagram bottom:100px → scroll-to-top:230px
   Stack mobile:  WA bottom:20px → Instagram bottom:84px  → scroll-to-top:200px
   ============================================================ */
.instagram-float {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #515bd4 100%);
    box-shadow: 0 8px 24px rgba(221, 42, 123, 0.35), 0 2px 6px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    z-index: 9997;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.instagram-float:hover,
.instagram-float:focus {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px rgba(221, 42, 123, 0.50);
    color: #fff;
    text-decoration: none;
}
.instagram-float__icon {
    position: relative;
    z-index: 2;
    line-height: 1;
}
.instagram-float__ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(221, 42, 123, 0.40);
    animation: ig-pulse 2.2s ease-out infinite;
    z-index: 1;
}
@keyframes ig-pulse {
    0%   { transform: scale(1);    opacity: .55; }
    100% { transform: scale(1.85); opacity: 0;   }
}
.instagram-float__tooltip {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: #1f2d3d;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.instagram-float__tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #1f2d3d;
}
.instagram-float:hover .instagram-float__tooltip,
.instagram-float:focus .instagram-float__tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
@media (max-width: 576px) {
    .instagram-float {
        width: 54px;
        height: 54px;
        font-size: 24px;
        bottom: 84px;
        right: 20px;
    }
    .instagram-float__tooltip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .instagram-float__ripple { animation: none; display: none; }
    .instagram-float { transition: none; }
}

/* ============================================================
   Acessibilidade: links em textos não podem depender só de cor.
   PageSpeed (A11y) reportou "Os links dependem da cor para serem
   distinguíveis". Força underline em links dentro de texto corrido
   (parágrafos, citações, listas de descrição), preservando os
   sublinhados removidos em links de UI (botões, menus, cards, footer
   widgets — esses têm bordas, ícones ou hover state próprios).
   ============================================================ */
p a:not([class]),
article a:not([class]),
blockquote a:not([class]),
.about-one__text a,
.blog-details a:not([class]),
.publicacao-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
p a:not([class]):hover,
article a:not([class]):hover,
blockquote a:not([class]):hover,
.about-one__text a:hover,
.blog-details a:not([class]):hover,
.publicacao-content a:hover {
    text-decoration-thickness: 2px;
}

/* Garantir foco visível em todos os elementos interativos
   (a11y WCAG 2.4.7). O Bootstrap remove outline em alguns lugares. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color_primary);
    outline-offset: 2px;
}

/* ============================================================
   Aspect-ratio + object-fit nas imagens dinâmicas do site.
   Resolve CLS independente do tamanho original da imagem subida
   no admin: o container reserva o espaço pela proporção CSS, e
   a imagem preenche com `object-fit: cover` (centraliza e corta
   o excesso sem distorcer). Também resolve "imagem com proporção
   incorreta" / "baixa resolução" reportadas pelo PageSpeed em
   Práticas — o navegador para de comparar dimensões intrínsecas
   com o tamanho renderizado.
   ============================================================ */

/* Hero LCP — main-slider-three (home).
   Banners do admin chegam em proporções variadas (493×573 portrait,
   1080×1350 portrait, 1920×1080 landscape). Fixa 16/9 desktop e
   4/3 mobile, com object-fit cover para qualquer banner caber bem. */
.main-slider-three__image__one {
    position: relative;
    overflow: hidden;
}
.main-slider-three__image__one img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 767px) {
    .main-slider-three__image__one img {
        aspect-ratio: 4 / 3;
    }
}

/* Cards de blog (home + listagem) — uploads tipicamente 770×447 (~16/9.3).
   Mas independente disso, fixa em 16/9 para uniformidade visual. */
.blog-card-three__image {
    overflow: hidden;
}
.blog-card-three__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Cards de serviços (home + listagem). */
.home-services__card__image {
    overflow: hidden;
}
.home-services__card__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Etapas (work-process-three) — uploads tipicamente quadrados 270×270.
   Container redondo já força aspect via CSS do tema, mas garantimos. */
.work-process-three__card__img img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Imagens "about" (sobre, welcome, experiência) — proporção 3/4 portrait
   típica de fotos verticais profissionais. Cai para 4/3 em mobile.
   O container precisa do mesmo aspect-ratio para reservar altura,
   porque o <picture> filho está em position:absolute (regra abaixo
   linhas 670-681) e sem altura no container ele colapsa para 0. */
.about-one__image {
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
}
.about-one__image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
    display: block;
}
@media (max-width: 767px) {
    .about-one__image,
    .about-one__image img {
        aspect-ratio: 4 / 3;
    }
}

/* Timeline / history (sobre) — usa proporção landscape padrão. */
.history-two__images img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Detalhe de publicação (publicacao.php) — imagem hero do post. */
.blog-details__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Detalhe de publicação — título do post em destaque (tema base: 22px/500, fraco)
   + tipografia do corpo legível e livre de sobreposições. */
.blog-details__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pelocis-black2, #222);
    margin: 0 0 24px;
}
@media (max-width: 767px) {
    .blog-details__title { font-size: 26px; }
}
.blog-details__text {
    font-size: 17px;
    line-height: 1.75;
    color: var(--pelocis-text-dark, #444);
    margin: 0 0 20px;
    position: relative;
    z-index: 1;
}
.blog-details__text > * + * {
    margin-top: 16px;
}

/* Posts recentes no footer (thumbnails pequenos). */
.footer-widget--post__img img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Detalhe de serviço (servico.php) — hero do serviço. */
.service-details__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================================
   Logos — força tamanho de display (independente do tamanho real
   da imagem). O width/height intrínsecos do atributo HTML preservam
   CLS, mas SEM `height: auto` o navegador respeita o height atributo
   e distorce. Aplica width fixo + height auto para preservar
   aspect-ratio natural redimensionado.
   ============================================================ */
.main-header__logo a img,
.main-header__logo img {
    width: 200px;
    height: auto;
    max-width: 100%;
}
.footer-widget__logo img {
    width: 224px;
    height: auto;
    max-width: 100%;
}
.sidebar-one__logo img,
.mobile-nav__content .logo-box img {
    width: 224px;
    height: auto;
    max-width: 100%;
}
.mobile-nav__content .logo-box img {
    width: 155px;
}

/* ============================================================
   <picture> wrapper (helper picture_tag() para WebP).
   Por default <picture> é inline. Para que o <img> dentro herde o
   layout esperado pelo container (block/aspect-ratio), o <picture>
   precisa virar block transparente — todas as regras de tamanho que
   o tema aplica ao <img> continuam casando via descendant selector
   (.foo img), pois <picture> não interrompe seleção.
   ============================================================ */
picture {
    display: block;
}
/* Containers que reservam espaço via aspect-ratio + position relative:
   o <picture> deve preencher 100% para a imagem ocupar todo o slot. */
.home-services__card__image picture,
.work-process-three__card__img picture,
.about-one__image picture,
.history-two__images picture,
.footer-widget--post__img picture,
.service-details__image picture,
.main-slider-three__image__one picture {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
/* Detail do post: <picture> em fluxo normal — o <img> com aspect-ratio 16/9
   dirige a altura do .blog-details__image, sem colapso/sobreposição. */
.blog-details__image picture {
    display: block;
    width: 100%;
}
.main-slider-three__image__one,
.footer-widget--post__img,
.work-process-three__card__img {
    position: relative;
}
/* Cards de blog (home + publicacoes): neutraliza o efeito "two-images fade"
   do tema Pelocis. O tema assumia 2 imagens irmãs e quebrou quando picture_tag()
   encapsulou o <img> em <picture><source><img></picture> — o <source> virou
   nth-child(1) e o <img> virou nth-child(2), fazendo o tema aplicar opacity:0
   + blur no hover (pelocis.css:2797-2853). Além disso, picture + img ambos
   position:absolute colapsavam a altura do .blog-card-three__image para zero.
   Imagem agora é estática, estável e dirigida por aspect-ratio. */
.blog-three .blog-card-three__image,
.blog-three .blog-card-three__image picture,
.blog-three .blog-card-three__image img {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}
.blog-three .blog-card-three__image picture {
    display: block;
    width: 100%;
}
.blog-three .blog-card-three__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    display: block;
    min-height: 0;
    transition: none;
}