/* ============================================
   COLÉGIO MONTESSORI — STYLE.CSS
   Estilos globais + Headers múltiplos
   ============================================ */


/* ************************************************************
   GLOBAL — Reset, Variáveis, Base, Container, Footer
   ************************************************************ */

/* ---------- CSS VARIABLES ---------- */
:root {
    --primary: #1a3a6b;
    --primary-light: #2557a7;
    --accent: #e63946;
    --accent-hover: #c1121f;
    --white: #ffffff;
    --gray-light: #f8f9fa;
    --gray-medium: #6c757d;
    --gray-dark: #343a40;
    --text: #2d3436;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
    --radius: 8px;
    --radius-pill: 50px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font-title: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* ---------- RESET & BASE ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* clip contém o transbordo horizontal SEM criar contexto de rolagem —
       com 'hidden' o position:sticky dos headers deixa de funcionar.
       A linha 'hidden' fica como fallback para navegadores sem 'clip'. */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.6;
    background-color: var(--gray-light);
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

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

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* ---------- CONTAINER ---------- */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- FOCUS VISIBLE ---------- */
:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- FOOTER ---------- */
.site-footer {
    background: var(--primary);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Área principal */
.footer__main {
    padding: 60px 0 40px;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

/* Colunas */
.footer__col {
    display: flex;
    flex-direction: column;
}

/* Logo */
.footer__logo {
    display: inline-block;
    margin-bottom: 16px;
    max-width: 160px;
}

.footer__logo img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Texto sobre */
.footer__about {
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 0.88rem;
}

/* Redes sociais */
.footer__social {
    display: flex;
    gap: 10px;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-size: 1.1rem;
    transition: var(--transition);
}

.footer__social-link:hover {
    transform: translateY(-3px);
}

.footer__social-link--instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.footer__social-link--whatsapp:hover {
    background: #25d366;
}

.footer__social-link--email:hover {
    background: var(--accent);
}

/* Títulos das colunas */
.footer__heading {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}

.footer__heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
}

/* Lista de links */
.footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__links a {
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease, padding-left 0.2s ease;
    font-size: 0.88rem;
}

.footer__links a i {
    font-size: 0.6rem;
    color: var(--accent);
}

.footer__links a:hover {
    color: var(--white);
    padding-left: 4px;
}

/* Lista de contato */
.footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.88rem;
}

.footer__contact li i {
    width: 16px;
    text-align: center;
    color: var(--accent);
    margin-top: 3px;
    flex-shrink: 0;
}

.footer__contact a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease;
}

.footer__contact a:hover {
    color: var(--white);
}

/* Horários */
.footer__schedule {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.footer__schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.footer__schedule-day {
    font-size: 0.85rem;
}

.footer__schedule-time {
    font-weight: 700;
    color: var(--white);
    font-size: 0.85rem;
}

/* CTA Agendar visita */
.footer__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: #25d366;
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    transition: var(--transition);
}

.footer__cta:hover {
    background: #20bf5e;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
}

/* Barra inferior */
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
}

.footer__bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.footer__copyright {
    font-size: 0.82rem;
    margin: 0;
}

.footer__legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer__legal li {
    display: inline-flex;
    align-items: center;
}

.footer__legal li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.25);
    margin-right: 16px;
}

.footer__legal a {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__legal a:hover,
.footer__legal a:focus-visible {
    color: var(--white);
    text-decoration: underline;
}

.footer__dev {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    transition: color 0.2s ease;
}

.footer__dev:hover {
    color: rgba(255, 255, 255, 0.8);
}

.footer__dev img {
    height: 22px;
    width: auto;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.footer__dev:hover img {
    opacity: 1;
}

/* Tablet */
@media (min-width: 768px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }
    .footer__bottom-inner {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .footer__main { padding: 70px 0 50px; }
    .footer__grid {
        grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
        gap: 40px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .footer__main { padding: 50px 0 30px; }
    .footer__schedule-item { padding: 8px 12px; }
}

/* ---------- HERO PLACEHOLDER ---------- */
.hero-placeholder {
    height: 200vh;
    padding: 140px 20px 40px;
    text-align: center;
}

.hero-placeholder h1 {
    font-family: var(--font-title);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}

.hero-placeholder p {
    font-size: 1.1rem;
    color: var(--gray-medium);
}


/* ************************************************************
   HEADER 01 — Original (Top Bar + Main Header branco)
   Arquivo: inc/header.inc.php
   ************************************************************ */

/* ---------- TOP BAR (H1) ---------- */
.top-bar {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    height: 40px;
    display: flex;
    align-items: center;
    transition: var(--transition);
    overflow: hidden;
}

.top-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.top-bar__left,
.top-bar__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-bar__link {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    white-space: nowrap;
}

.top-bar__link:hover {
    color: var(--white);
}

.top-bar__link i {
    font-size: 0.75rem;
}

.top-bar__social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-bar__social-link {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}

.top-bar__social-link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

/* ---------- SEARCH BOX (H1) ---------- */
.search-box {
    display: flex;
    align-items: center;
    position: relative;
}

.search-box__toggle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    padding: 4px;
    transition: var(--transition);
}

.search-box__toggle:hover {
    color: var(--white);
}

.search-box__form {
    overflow: hidden;
    width: 0;
    opacity: 0;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.search-box--active .search-box__form {
    width: 200px;
    opacity: 1;
}

.search-box__input {
    width: 100%;
    height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    font-size: 0.8rem;
    font-family: var(--font-body);
    outline: none;
    backdrop-filter: blur(4px);
}

.search-box__input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* ---------- MAIN HEADER (H1) ---------- */
.main-header {
    background: var(--white);
    height: 80px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    z-index: 100;
}

.main-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.main-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.main-header__logo img {
    height: 60px;
    width: auto;
    transition: var(--transition);
}

/* ---------- MAIN NAV Desktop (H1) ---------- */
.main-nav {
    display: none;
}

.main-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
}

.main-nav__item {
    position: relative;
}

.main-nav__link {
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-dark);
    padding: 8px 16px;
    display: block;
    position: relative;
    transition: color 0.3s ease;
}

.main-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav__link:hover {
    color: var(--primary);
}

.main-nav__link:hover::after,
.main-nav__item--active .main-nav__link::after {
    transform: scaleX(1);
}

/* ---------- DROPDOWN Desktop (H1) ---------- */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease,
                visibility 0.25s ease,
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.main-nav__item--has-dropdown.is-open > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown__link {
    display: block;
    padding: 10px 20px;
    font-size: 0.85rem;
    color: var(--gray-dark);
    transition: var(--transition);
}

.dropdown__link:hover {
    background: var(--gray-light);
    color: var(--primary);
    padding-left: 24px;
}

/* ---------- ACTIONS (H1) ---------- */
.main-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ---------- BOTÃO MATRÍCULA (H1) ---------- */
.btn-matricula {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    background: linear-gradient(135deg, var(--accent) 0%, #d62839 100%);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: var(--radius-pill);
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
}

.btn-matricula:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.45);
    background: linear-gradient(135deg, var(--accent-hover) 0%, #a4161a 100%);
}

.btn-matricula:active {
    transform: translateY(0);
}

.btn-matricula--mobile {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    padding: 14px 28px;
    font-size: 1rem;
}

/* ---------- HAMBURGER (H1) ---------- */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    gap: 5px;
    z-index: 1001;
    position: relative;
}

.hamburger__line {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gray-dark);
    border-radius: 2px;
    transition: var(--transition);
    transform-origin: center;
}

.hamburger--active .hamburger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger--active .hamburger__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger--active .hamburger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- MOBILE MENU (H1) ---------- */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    visibility: hidden;
}

.mobile-menu--active {
    pointer-events: auto;
    visibility: visible;
}

.mobile-menu__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.mobile-menu--active .mobile-menu__overlay {
    opacity: 1;
}

.mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: var(--white);
    padding: 100px 30px 40px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.mobile-menu--active .mobile-menu__panel {
    transform: translateX(0);
}

.mobile-nav__item {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mobile-menu--active .mobile-nav__item {
    opacity: 1;
    transform: translateX(0);
}

.mobile-menu--active .mobile-nav__item:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu--active .mobile-nav__item:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu--active .mobile-nav__item:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu--active .mobile-nav__item:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu--active .mobile-nav__item:nth-child(5) { transition-delay: 0.3s; }

.mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-dark);
    transition: color 0.2s ease;
}

a.mobile-nav__link:hover,
button.mobile-nav__link:hover {
    color: var(--primary);
}

.mobile-nav__link i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.mobile-nav__item--has-dropdown.is-open .mobile-nav__link i {
    transform: rotate(180deg);
}

.mobile-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav__item--has-dropdown.is-open .mobile-dropdown {
    max-height: 300px;
}

.mobile-dropdown__link {
    display: block;
    padding: 10px 0 10px 16px;
    font-size: 0.9rem;
    color: var(--gray-medium);
    transition: var(--transition);
    border-left: 2px solid transparent;
}

.mobile-dropdown__link:hover {
    color: var(--primary);
    border-left-color: var(--accent);
    padding-left: 20px;
}

/* ---------- STICKY STATE (H1) ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.site-header--sticky .top-bar {
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.site-header--sticky .main-header {
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-header--sticky .main-header__logo img {
    height: 45px;
}

/* ---------- RESPONSIVE (H1) ---------- */
@media (min-width: 768px) {
    .search-box--active .search-box__form {
        width: 240px;
    }
}

@media (min-width: 1024px) {
    .main-nav {
        display: block;
    }

    .hamburger {
        display: none;
    }

    .top-bar__link--contact span {
        display: inline;
    }
}

@media (max-width: 767px) {
    .top-bar {
        height: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .main-header {
        height: 65px;
    }

    .main-header__logo img {
        height: 45px;
    }

    .btn-matricula:not(.btn-matricula--mobile) {
        display: none;
    }

    .hero-placeholder {
        padding: 100px 20px 40px;
    }

    .hero-placeholder h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 1023px) {
    .top-bar__link--contact span {
        display: none;
    }
}


/* ************************************************************
   HEADER 02 — Moderno (Barra única, busca overlay, design clean)
   Arquivo: inc/header2.inc.php
   ************************************************************ */

/* ---------- BARRA PRINCIPAL (H2) ---------- */
.h2-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.h2-bar {
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    z-index: 100;
    border-bottom: 3px solid var(--accent);
}

.h2-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
}

/* ---------- LOGO (H2) ---------- */
.h2-bar__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.h2-bar__logo img {
    height: 87px;
    width: auto;
    transition: var(--transition);
}

/* ---------- CENTRO: Info + Nav empilhados (H2) ---------- */
.h2-bar__center {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    padding: 0 30px;
}

/* ---------- INFO STRIP (H2) ---------- */
.h2-info {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    width: 100%;
    justify-content: center;
}

.h2-info__link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--gray-medium);
    transition: color 0.2s ease;
    white-space: nowrap;
}

.h2-info__link:hover {
    color: var(--primary);
}

.h2-info__link i {
    font-size: 0.7rem;
    color: var(--primary-light);
}

.h2-info__divider {
    width: 1px;
    height: 12px;
    background: rgba(0, 0, 0, 0.12);
}

.h2-info__social {
    display: flex;
    align-items: center;
    gap: 6px;
}

.h2-info__social-link {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    color: var(--gray-medium);
    transition: var(--transition);
}

.h2-info__social-link:hover {
    color: var(--white);
    transform: translateY(-1px);
}

.h2-info__social-link[aria-label="Facebook"]:hover {
    background: #1877f2;
}

.h2-info__social-link[aria-label="Instagram"]:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.h2-info__social-link[aria-label="WhatsApp"]:hover {
    background: #25d366;
}

/* ---------- NAV PRINCIPAL (H2 Desktop) ---------- */
.h2-nav {
    padding-top: 6px;
}

.h2-nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
}

.h2-nav__item {
    position: relative;
}

.h2-nav__link {
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-dark);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    transition: color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.h2-nav__chevron {
    font-size: 0.6rem;
    transition: transform 0.3s ease;
    opacity: 0.75;
}

.h2-nav__item--has-dropdown.is-open .h2-nav__chevron {
    transform: rotate(180deg);
}

.h2-nav__link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.h2-nav__link:hover {
    color: var(--primary);
}

.h2-nav__link:hover::after {
    transform: scaleX(1);
}

/* ---------- DROPDOWN (H2 Desktop) ---------- */
.h2-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease,
                visibility 0.25s ease,
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.h2-nav__item--has-dropdown.is-open > .h2-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.h2-dropdown__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    font-size: 0.85rem;
    color: var(--gray-dark);
    transition: var(--transition);
}

.h2-dropdown__link i {
    width: 20px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--primary-light);
    opacity: 0.7;
    transition: var(--transition);
}

.h2-dropdown__link:hover {
    background: linear-gradient(90deg, rgba(37, 87, 167, 0.06), transparent);
    color: var(--primary);
    padding-left: 24px;
}

.h2-dropdown__link:hover i {
    opacity: 1;
    color: var(--accent);
}

/* ---------- AÇÕES DIREITA (H2) ---------- */
.h2-bar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Portal link */
.h2-portal {
    display: none;
    align-items: center;
    gap: 6px;
    font-family: var(--font-title);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1.5px solid rgba(26, 58, 107, 0.2);
    transition: var(--transition);
    white-space: nowrap;
}

.h2-portal:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.h2-portal i {
    font-size: 0.8rem;
}

/* Botão busca */
.h2-search-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--gray-dark);
    font-size: 0.9rem;
    transition: var(--transition);
}

.h2-search-btn:hover {
    background: var(--gray-light);
    color: var(--primary);
}

/* Botão CTA Matrícula (H2) */
.h2-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--accent) 0%, #d62839 100%);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    border-radius: var(--radius-pill);
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
    white-space: nowrap;
}

.h2-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(230, 57, 70, 0.45);
    background: linear-gradient(135deg, var(--accent-hover) 0%, #a4161a 100%);
}

.h2-cta:active {
    transform: translateY(0);
}

.h2-cta i {
    font-size: 0.75rem;
}

.h2-cta--mobile {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    font-size: 0.9rem;
}

/* ---------- HAMBURGER (H2) ---------- */
.h2-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    gap: 5px;
    z-index: 1001;
    position: relative;
}

.h2-hamburger__line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gray-dark);
    border-radius: 2px;
    transition: var(--transition);
    transform-origin: center;
}

.h2-hamburger__line:nth-child(2) {
    width: 16px;
    margin-left: auto;
}

.h2-hamburger--active .h2-hamburger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.h2-hamburger--active .h2-hamburger__line:nth-child(2) {
    opacity: 0;
    width: 0;
}

.h2-hamburger--active .h2-hamburger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- SEARCH OVERLAY (H2) ---------- */
.h2-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 58, 107, 0.95);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 25vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.h2-search-overlay--active {
    opacity: 1;
    visibility: visible;
}

.h2-search-overlay__inner {
    width: 90%;
    max-width: 650px;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.h2-search-overlay--active .h2-search-overlay__inner {
    transform: translateY(0);
}

.h2-search-overlay__form {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: 60px;
    padding: 6px 6px 6px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.h2-search-overlay__icon {
    color: var(--gray-medium);
    font-size: 1.1rem;
    margin-right: 14px;
    flex-shrink: 0;
}

.h2-search-overlay__input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--text);
    background: transparent;
    padding: 14px 0;
}

.h2-search-overlay__input::placeholder {
    color: var(--gray-medium);
}

.h2-search-overlay__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-light);
    color: var(--gray-dark);
    font-size: 1.1rem;
    transition: var(--transition);
    flex-shrink: 0;
}

.h2-search-overlay__close:hover {
    background: var(--accent);
    color: var(--white);
}

/* ---------- MOBILE MENU (H2) ---------- */
.h2-mobile {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    visibility: hidden;
}

.h2-mobile--active {
    pointer-events: auto;
    visibility: visible;
}

.h2-mobile__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.h2-mobile--active .h2-mobile__overlay {
    opacity: 1;
}

.h2-mobile__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 88vw;
    height: 100%;
    background: var(--white);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.h2-mobile--active .h2-mobile__panel {
    transform: translateX(0);
}

.h2-mobile__header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.h2-mobile__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--gray-dark);
    font-size: 1.25rem;
    transition: var(--transition);
}

.h2-mobile__close:hover {
    background: var(--gray-light);
    color: var(--accent);
}

.h2-mobile__logo {
    height: 45px;
    width: auto;
}

/* Nav mobile (H2) */
.h2-mobile__nav {
    flex: 1;
    padding: 8px 0;
}

.h2-mobile__list {
    padding: 0;
}

.h2-mobile__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.h2-mobile--active .h2-mobile__item {
    opacity: 1;
    transform: translateX(0);
}

.h2-mobile--active .h2-mobile__item:nth-child(1) { transition-delay: 0.08s; }
.h2-mobile--active .h2-mobile__item:nth-child(2) { transition-delay: 0.12s; }
.h2-mobile--active .h2-mobile__item:nth-child(3) { transition-delay: 0.16s; }
.h2-mobile--active .h2-mobile__item:nth-child(4) { transition-delay: 0.20s; }
.h2-mobile--active .h2-mobile__item:nth-child(5) { transition-delay: 0.24s; }

.h2-mobile__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 24px;
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-dark);
    transition: color 0.2s ease, background 0.2s ease;
}

.h2-mobile__link span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.h2-mobile__link span i {
    width: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--primary-light);
}

a.h2-mobile__link:hover,
button.h2-mobile__link:hover {
    color: var(--primary);
    background: rgba(37, 87, 167, 0.04);
}

.h2-mobile__toggle {
    font-size: 0.65rem;
    color: var(--gray-medium);
    transition: transform 0.3s ease;
}

.h2-mobile__item--has-dropdown.is-open .h2-mobile__toggle {
    transform: rotate(45deg);
}

.h2-mobile__dropdown {
    max-height: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.015);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.h2-mobile__item--has-dropdown.is-open .h2-mobile__dropdown {
    max-height: 300px;
}

.h2-mobile__dropdown a {
    display: block;
    padding: 11px 24px 11px 56px;
    font-size: 0.88rem;
    color: var(--gray-medium);
    transition: var(--transition);
}

.h2-mobile__dropdown a:hover {
    color: var(--primary);
    background: rgba(37, 87, 167, 0.04);
}

/* Footer do mobile menu (H2) */
.h2-mobile__footer {
    padding: 20px 24px 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.h2-mobile__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h2-mobile__contact a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--gray-medium);
    transition: color 0.2s ease;
}

.h2-mobile__contact a:hover {
    color: var(--primary);
}

.h2-mobile__contact a i {
    width: 16px;
    text-align: center;
    color: var(--primary-light);
    font-size: 0.75rem;
}

.h2-mobile__social {
    display: flex;
    gap: 10px;
}

.h2-mobile__social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    color: var(--gray-medium);
    font-size: 0.85rem;
    transition: var(--transition);
}

.h2-mobile__social a:hover {
    color: var(--white);
}

.h2-mobile__social a[aria-label="Facebook"]:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.h2-mobile__social a[aria-label="Instagram"]:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: #dc2743;
}

.h2-mobile__social a[aria-label="WhatsApp"]:hover {
    background: #25d366;
    border-color: #25d366;
}

/* ---------- STICKY STATE (H2) ---------- */
.h2-header--sticky .h2-bar {
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.h2-header--sticky .h2-bar__inner {
    height: 65px;
}

.h2-header--sticky .h2-bar__logo img {
    height: 50px;
}

.h2-header--sticky .h2-info {
    display: none;
}

/* ---------- RESPONSIVE (H2) — Tablet 768px+ ---------- */
@media (min-width: 768px) {
    .h2-cta span {
        display: inline;
    }
}

/* ---------- RESPONSIVE (H2) — Desktop 1024px+ ---------- */
@media (min-width: 1024px) {
    .h2-bar__center {
        display: flex;
    }

    .h2-hamburger {
        display: none;
    }

    .h2-portal {
        display: flex;
    }
}

/* ---------- RESPONSIVE (H2) — Mobile <768px ---------- */
@media (max-width: 767px) {
    .h2-bar__inner {
        height: 80px;
    }

    .h2-bar__logo img {
        height: 65px;
    }

    /* Sticky no mobile — manter logo grande */
    .h2-header--sticky .h2-bar__inner {
        height: 72px;
    }

    .h2-header--sticky .h2-bar__logo img {
        height: 55px;
    }

    .h2-cta:not(.h2-cta--mobile) {
        padding: 9px 18px;
        font-size: 0.7rem;
        gap: 5px;
    }

    .h2-cta:not(.h2-cta--mobile) span {
        display: inline;
    }

    .h2-cta:not(.h2-cta--mobile) i {
        font-size: 0.75rem;
    }

    .h2-hamburger {
        width: 44px;
        height: 44px;
        background: var(--gray-light);
        border-radius: var(--radius);
        gap: 5px;
    }

    .h2-hamburger__line {
        width: 22px;
        height: 2.5px;
    }

    .h2-hamburger__line:nth-child(2) {
        width: 22px;
        margin-left: 0;
    }

    .h2-search-overlay__input {
        font-size: 1rem;
    }
}


/* ************************************************************
   NÍVEIS DE ENSINO 01 — Cards com ícone, tag e accent bar
   Arquivo: inc/nivelensino.inc.php
   ************************************************************ */

/* ---------- SEÇÃO (NE1) ---------- */
.ne1 {
    padding: 80px 0;
    background: var(--white);
}

/* ---------- CABEÇALHO (NE1) ---------- */
.ne1__header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px;
}

.ne1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.ne1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.ne1__subtitle {
    font-size: 1rem;
    color: var(--gray-medium);
    line-height: 1.7;
}

/* ---------- GRID DE CARDS (NE1) ---------- */
.ne1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* ---------- CARD (NE1) ---------- */
.ne1__card {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    padding: 32px 28px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.ne1__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(26, 58, 107, 0.12);
}

/* Barra accent na base do card */
.ne1__card-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ne1__card:hover .ne1__card-accent {
    transform: scaleX(1);
}

/* ---------- IMAGEM DO CARD (NE1) ---------- */
.ne1__card-img {
    display: block;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ne1__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ne1__card:hover .ne1__card-img img {
    transform: scale(1.06);
}

/* ---------- CONTEÚDO DO CARD (NE1) ---------- */
.ne1__card-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.ne1__card-title {
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 10px;
}

.ne1__card-text {
    font-size: 0.9rem;
    color: var(--gray-medium);
    line-height: 1.7;
    margin-bottom: 18px;
}

.ne1__card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    transition: var(--transition);
}

.ne1__card-link i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.ne1__card-link:hover {
    color: var(--accent);
}

.ne1__card-link:hover i {
    transform: translateX(4px);
}

/* ---------- RESPONSIVE (NE1) — Tablet 768px+ ---------- */
@media (min-width: 768px) {
    .ne1__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ne1__title {
        font-size: 2.4rem;
    }
}

/* ---------- RESPONSIVE (NE1) — Desktop 1024px+ ---------- */
@media (min-width: 1024px) {
    .ne1 {
        padding: 100px 0;
    }

    .ne1__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }

    .ne1__header {
        margin-bottom: 60px;
    }

    .ne1__title {
        font-size: 2.6rem;
    }
}

/* ---------- RESPONSIVE (NE1) — Mobile <768px ---------- */
@media (max-width: 767px) {
    .ne1 {
        padding: 60px 0;
    }

    .ne1__title {
        font-size: 1.8rem;
    }

    .ne1__card {
        padding: 24px 22px;
    }
}


/* ************************************************************
   DIFERENCIAIS 01 — Grid de ícones com hover
   Arquivo: inc/diferenciais.inc.php
   ************************************************************ */

/* ---------- SEÇÃO (DF1) ---------- */
.df1 {
    padding: 80px 0;
    background: var(--gray-light);
}

/* ---------- CABEÇALHO (DF1) ---------- */
.df1__header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px;
}

.df1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.08), rgba(198, 18, 31, 0.08));
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.df1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.df1__subtitle {
    font-size: 1rem;
    color: var(--gray-medium);
    line-height: 1.7;
}

/* ---------- GRID (DF1) ---------- */
.df1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* ---------- ITEM (DF1) ---------- */
.df1__item {
    background: var(--white);
    border-radius: 16px;
    padding: 32px 28px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.df1__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.df1__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(26, 58, 107, 0.1);
}

.df1__item:hover::before {
    transform: scaleX(1);
}

/* ---------- ÍCONE (DF1) ---------- */
.df1__item-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.07), rgba(37, 87, 167, 0.1));
    color: var(--primary);
    font-size: 1.4rem;
    transition: var(--transition);
}

.df1__item:hover .df1__item-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white);
    transform: scale(1.08) rotate(-5deg);
}

/* ---------- TEXTO (DF1) ---------- */
.df1__item-title {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 10px;
}

.df1__item-text {
    font-size: 0.88rem;
    color: var(--gray-medium);
    line-height: 1.7;
}

/* ---------- RESPONSIVE (DF1) — Tablet 768px+ ---------- */
@media (min-width: 768px) {
    .df1__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .df1__title {
        font-size: 2.4rem;
    }
}

/* ---------- RESPONSIVE (DF1) — Desktop 1024px+ ---------- */
@media (min-width: 1024px) {
    .df1 {
        padding: 100px 0;
    }

    .df1__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .df1__header {
        margin-bottom: 60px;
    }

    .df1__title {
        font-size: 2.6rem;
    }
}

/* ---------- RESPONSIVE (DF1) — Mobile <768px ---------- */
@media (max-width: 767px) {
    .df1 {
        padding: 60px 0;
    }

    .df1__title {
        font-size: 1.8rem;
    }

    .df1__item {
        padding: 24px 20px;
    }
}


/* ************************************************************
   SOBRE O COLÉGIO 01 — Imagem + texto lado a lado
   Arquivo: inc/sobre.inc.php
   ************************************************************ */

.sb1 {
    padding: 80px 0;
    background: var(--white);
}

.sb1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

/* Imagem */
.sb1__image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.sb1__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.sb1__image-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--primary);
    color: var(--white);
    padding: 14px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.sb1__image-badge-number {
    display: block;
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}

.sb1__image-badge-text {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Conteúdo */
.sb1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.sb1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 20px;
}

.sb1__text {
    font-size: 0.95rem;
    color: var(--gray-medium);
    line-height: 1.8;
    margin-bottom: 14px;
}

.sb1__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.sb1__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(26, 58, 107, 0.25);
}

.sb1__btn-primary:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 58, 107, 0.35);
}

.sb1__btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    border: 1.5px solid rgba(26, 58, 107, 0.2);
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    transition: var(--transition);
}

.sb1__btn-secondary:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.sb1__btn-secondary i {
    transition: transform 0.3s ease;
}

.sb1__btn-secondary:hover i {
    transform: translateX(4px);
}

@media (min-width: 1024px) {
    .sb1 { padding: 100px 0; }
    .sb1__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
    .sb1__title { font-size: 2.6rem; }
}

@media (max-width: 767px) {
    .sb1 { padding: 60px 0; }
    .sb1__title { font-size: 1.8rem; }
}


/* ************************************************************
   NÚMEROS / CONQUISTAS 01 — Contadores animados
   Arquivo: inc/numeros.inc.php
   ************************************************************ */

.nm1 {
    padding: 60px 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

.nm1__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.nm1__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    text-align: center;
}

.nm1__item {
    padding: 20px 10px;
}

.nm1__number {
    font-family: var(--font-title);
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    display: inline;
}

.nm1__suffix {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 700;
    opacity: 0.8;
}

.nm1__label {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 8px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .nm1__grid { grid-template-columns: repeat(4, 1fr); }
    .nm1__number { font-size: 3.2rem; }
}

@media (min-width: 1024px) {
    .nm1 { padding: 80px 0; }
    .nm1__number { font-size: 3.6rem; }
}


/* ************************************************************
   DEPOIMENTOS 01 — Carrossel de testemunhos
   Arquivo: inc/depoimentos.inc.php
   ************************************************************ */

.dp1 {
    padding: 80px 0;
    background: var(--gray-light);
}

.dp1__header {
    text-align: center;
    margin-bottom: 50px;
}

.dp1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.08), rgba(198, 18, 31, 0.08));
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.dp1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
}

.dp1__carousel {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.dp1__track {
    overflow: hidden;
}

.dp1__card {
    display: none;
    background: var(--white);
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    text-align: center;
    animation: dp1FadeIn 0.5s ease;
}

.dp1__card--active {
    display: block;
}

@keyframes dp1FadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dp1__card-stars {
    color: #f5a623;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-bottom: 20px;
}

.dp1__card-text {
    font-size: 1.05rem;
    color: var(--gray-dark);
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 24px;
}

.dp1__card-text p {
    margin: 0;
}

.dp1__card-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.dp1__card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.dp1__card-name {
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-dark);
    font-style: normal;
    display: block;
}

.dp1__card-role {
    font-size: 0.78rem;
    color: var(--gray-medium);
}

/* Setas */
.dp1__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--white);
    color: var(--gray-dark);
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    display: none;
}

.dp1__arrow:hover {
    background: var(--primary);
    color: var(--white);
}

.dp1__arrow--prev { left: -55px; }
.dp1__arrow--next { right: -55px; }

/* Dots */
.dp1__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.dp1__dot {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50px;
    background: rgba(26, 58, 107, 0.2);
    cursor: pointer;
    padding: 0;
    transition: width 0.3s ease, background 0.3s ease;
}

.dp1__dot--active {
    width: 28px;
    background: var(--primary);
}

@media (min-width: 1024px) {
    .dp1 { padding: 100px 0; }
    .dp1__title { font-size: 2.6rem; }
    .dp1__arrow { display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 767px) {
    .dp1 { padding: 60px 0; }
    .dp1__title { font-size: 1.8rem; }
    .dp1__card { padding: 28px 22px; }
}


/* ************************************************************
   CTA MATRÍCULA 01 — Faixa de destaque
   Arquivo: inc/cta-matricula.inc.php
   ************************************************************ */

/* Layout principal — full-width split */
.ct1 {
    color: var(--white);
}

.ct1__inner {
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

/* Lado esquerdo — Chamada */
.ct1__left {
    background: linear-gradient(135deg, var(--accent) 0%, #d62839 100%);
    padding: 60px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct1__left-content {
    max-width: 500px;
}

.ct1__title {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.ct1__text {
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: 24px;
}

.ct1__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ct1__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Seta decorativa — só aparece no desktop */
.ct1__arrow {
    display: none;
}

/* Lado direito — Formulário */
.ct1__right {
    background: var(--primary);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct1__form {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ct1__form-row {
    display: flex;
    gap: 14px;
}

.ct1__form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ct1__form-group--full {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ct1__label {
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.ct1__input {
    padding: 12px 16px;
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--dark);
    background: var(--white);
    outline: none;
    transition: box-shadow 0.3s ease;
}

.ct1__input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.ct1__input::placeholder {
    color: #999;
}

.ct1__select {
    cursor: pointer;
    appearance: auto;
}

/* Rodapé do formulário */
.ct1__form-footer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    margin-top: 4px;
}

.ct1__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    opacity: 0.85;
    cursor: pointer;
    line-height: 1.4;
}

.ct1__checkbox {
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.ct1__link {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ct1__link:hover {
    opacity: 0.8;
}

.ct1__btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    align-self: flex-end;
}

.ct1__btn-submit:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}

/* Desktop — split horizontal com seta */
@media (min-width: 1024px) {
    .ct1__inner {
        flex-direction: row;
    }

    .ct1__left {
        flex: 1;
        padding: 70px 60px;
        position: relative;
    }

    .ct1__title {
        font-size: 2.4rem;
    }

    /* Seta decorativa entre as duas metades */
    .ct1__arrow {
        display: block;
        width: 50px;
        flex-shrink: 0;
        background: var(--primary);
        position: relative;
    }

    .ct1__arrow::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 210px 0 210px 50px;
        border-color: transparent transparent transparent var(--accent);
    }

    .ct1__right {
        flex: 1;
        padding: 50px 60px;
    }

    .ct1__form-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .ct1__btn-submit {
        align-self: auto;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .ct1__left { padding: 50px 40px; }
    .ct1__title { font-size: 2rem; }
    .ct1__right { padding: 40px; }
}

/* Mobile */
@media (max-width: 767px) {
    .ct1__left { padding: 40px 20px; }
    .ct1__title { font-size: 1.5rem; }
    .ct1__right { padding: 30px 20px; }
    .ct1__form-row { flex-direction: column; gap: 16px; }
    .ct1__btn-submit { width: 100%; justify-content: center; }
}


/* ************************************************************
   GALERIA 01 — Grid de fotos com overlay
   Arquivo: inc/galeria.inc.php
   ************************************************************ */

.gl1 {
    padding: 80px 0;
    background: var(--white);
}

.gl1__header {
    text-align: center;
    margin-bottom: 50px;
}

.gl1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.gl1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
}

.gl1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.gl1__item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    aspect-ratio: 4/3;
}

.gl1__item--wide {
    aspect-ratio: auto;
}

.gl1__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gl1__item:hover img {
    transform: scale(1.06);
}

.gl1__item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 58, 107, 0.85) 0%, rgba(26, 58, 107, 0.2) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gl1__item:hover .gl1__item-overlay {
    opacity: 1;
}

.gl1__item-info {
    transform: translateY(12px);
    transition: transform 0.4s ease;
}

.gl1__item:hover .gl1__item-info {
    transform: translateY(0);
}

.gl1__item-title {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 6px;
}

.gl1__item-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .gl1__grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 280px;
    }
    .gl1__item--wide { grid-column: span 2; }
    .gl1__item { aspect-ratio: auto; }
}

@media (min-width: 1024px) {
    .gl1 { padding: 100px 0; }
    .gl1__title { font-size: 2.6rem; }
    .gl1__grid { gap: 16px; }
}

@media (max-width: 767px) {
    .gl1 { padding: 60px 0; }
    .gl1__title { font-size: 1.8rem; }
    .gl1__grid { grid-template-columns: repeat(2, 1fr); }
    .gl1__item--wide { grid-column: span 2; }
}


/* ************************************************************
   CONTATO 01 — Localização + Mapa
   Arquivo: inc/contato.inc.php
   ************************************************************ */

.cn1 {
    padding: 80px 0;
    background: var(--white);
}

.cn1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: stretch;
}

/* Informações — lado esquerdo */
.cn1__info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Blocos de conteúdo */
.cn1__block {
    padding: 28px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cn1__block:first-child {
    padding-top: 0;
}

.cn1__block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Cabeçalho com ícone + título */
.cn1__block-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.cn1__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cn1__icon--red {
    background: rgba(230, 57, 70, 0.1);
    color: var(--accent);
}

.cn1__icon--green {
    background: rgba(37, 211, 102, 0.1);
    color: #25d366;
}

.cn1__title {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn1__subtitle {
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Endereço */
.cn1__address {
    font-size: 1rem;
    color: var(--gray-dark);
    line-height: 1.7;
    margin-bottom: 16px;
    padding-left: 62px;
}

/* Link destaque "Como chegar" */
.cn1__highlight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: var(--radius-pill);
    transition: var(--transition);
    margin-left: 62px;
}

.cn1__highlight:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
}

/* Bloco telefones — fundo suave */
.cn1__block--phone {
    background: var(--gray-light);
    border-radius: 12px;
    padding: 24px 28px;
    border-bottom: none;
    margin: 8px 0;
}

.cn1__contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 62px;
}

.cn1__contact-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gray-dark);
    transition: color 0.2s ease;
}

.cn1__contact-item i {
    width: 20px;
    text-align: center;
    color: var(--primary);
    font-size: 1rem;
}

.cn1__contact-item--whatsapp i {
    color: #25d366;
}

.cn1__contact-item:hover {
    color: var(--accent);
}

/* Horário e E-mail */
.cn1__extras {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cn1__extra-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.cn1__extra-item i {
    width: 20px;
    text-align: center;
    color: var(--primary);
    font-size: 1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.cn1__extra-item strong {
    display: block;
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 2px;
}

.cn1__extra-item p {
    font-size: 0.88rem;
    color: var(--gray-medium);
    line-height: 1.5;
}

.cn1__extra-item a {
    color: var(--primary);
    transition: color 0.2s ease;
}

.cn1__extra-item a:hover {
    color: var(--accent);
}

/* Mapa — lado direito */
.cn1__map-wrapper {
    display: flex;
}

.cn1__map {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    width: 100%;
    min-height: 350px;
}

.cn1__map iframe {
    display: block;
    border: 0;
    width: 100%;
    height: 100%;
    min-height: 350px;
}

/* Desktop */
@media (min-width: 1024px) {
    .cn1 { padding: 100px 0; }
    .cn1__grid {
        grid-template-columns: 1fr 1.2fr;
        gap: 50px;
    }
    .cn1__map { min-height: 100%; }
    .cn1__map iframe { min-height: 100%; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .cn1__grid { gap: 30px; }
    .cn1__block--phone { padding: 20px 24px; }
}

/* Mobile */
@media (max-width: 767px) {
    .cn1 { padding: 60px 0; }
    .cn1__title { font-size: 1.5rem; }
    .cn1__subtitle { font-size: 1.2rem; }
    .cn1__address { padding-left: 0; }
    .cn1__highlight { margin-left: 0; }
    .cn1__contacts { padding-left: 0; }
    .cn1__block--phone { padding: 20px; }
}


/* ************************************************************
   HERO INTERNO 01 — Banner de páginas internas
   Arquivo: inc/hero-interno.inc.php
   ************************************************************ */

.hi1 {
    position: relative;
    padding: 100px 0 60px;
    background: linear-gradient(135deg, var(--primary) 0%, #0d2240 100%);
    color: var(--white);
    overflow: hidden;
}

.hi1__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(37, 87, 167, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(230, 57, 70, 0.1) 0%, transparent 50%);
}

.hi1__content {
    position: relative;
    z-index: 1;
}

/* Breadcrumb */
.hi1__breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 0.85rem;
}

.hi1__breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hi1__breadcrumb li + li::before {
    content: '›';
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
}

.hi1__breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease;
}

.hi1__breadcrumb a:hover {
    color: var(--white);
}

.hi1__breadcrumb li[aria-current="page"] {
    color: var(--accent);
    font-weight: 600;
}

/* Título */
.hi1__title {
    font-family: var(--font-title);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .hi1 { padding: 130px 0 70px; }
    .hi1__title { font-size: 3rem; }
}

@media (max-width: 767px) {
    .hi1 { padding: 90px 0 40px; }
    .hi1__title { font-size: 1.8rem; }
}


/* ************************************************************
   HISTÓRIA 01 — Nossa História + Linha do Tempo
   Arquivo: inc/historia.inc.php
   ************************************************************ */

.ht1 {
    padding: 80px 0;
    background: var(--white);
}

/* Introdução — imagem + texto */
.ht1__intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 80px;
}

.ht1__intro-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.ht1__intro-image img {
    width: 100%;
    height: auto;
    display: block;
}

.ht1__intro-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--accent);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
}

.ht1__intro-badge-number {
    display: block;
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}

.ht1__intro-badge-text {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ht1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.ht1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 20px;
}

.ht1__text {
    font-size: 0.95rem;
    color: var(--gray-medium);
    line-height: 1.8;
    margin-bottom: 14px;
}

/* Linha do Tempo */
.ht1__timeline {
    position: relative;
    padding-top: 20px;
}

.ht1__timeline-title {
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    text-align: center;
    margin-bottom: 50px;
}

/* Linha central vertical */
.ht1__timeline-line {
    position: absolute;
    left: 20px;
    top: 100px;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--primary), var(--accent));
    border-radius: 2px;
}

.ht1__timeline-items {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
}

.ht1__timeline-item {
    position: relative;
    padding-left: 54px;
}

/* Ponto na linha */
.ht1__timeline-dot {
    position: absolute;
    left: 12px;
    top: 20px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--accent);
    z-index: 1;
    transition: var(--transition);
}

.ht1__timeline-item:hover .ht1__timeline-dot {
    background: var(--accent);
    transform: scale(1.3);
}

/* Card */
.ht1__timeline-card {
    background: var(--gray-light);
    border-radius: 12px;
    padding: 24px;
    transition: var(--transition);
    border-left: 3px solid transparent;
}

.ht1__timeline-item:hover .ht1__timeline-card {
    border-left-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.ht1__timeline-year {
    display: inline-block;
    padding: 4px 12px;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    margin-bottom: 10px;
}

.ht1__timeline-card-title {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
}

.ht1__timeline-card p {
    font-size: 0.88rem;
    color: var(--gray-medium);
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .ht1 { padding: 100px 0; }
    .ht1__intro { grid-template-columns: 1fr 1fr; gap: 60px; }
    .ht1__title { font-size: 2.6rem; }

    /* Linha central no desktop */
    .ht1__timeline-line {
        left: 50%;
        transform: translateX(-50%);
    }

    .ht1__timeline-items {
        gap: 40px;
    }

    .ht1__timeline-item {
        width: 50%;
        padding-left: 0;
        padding-right: 40px;
    }

    .ht1__timeline-item:nth-child(even) {
        margin-left: 50%;
        padding-left: 40px;
        padding-right: 0;
    }

    .ht1__timeline-dot {
        left: auto;
        right: -9px;
    }

    .ht1__timeline-item:nth-child(even) .ht1__timeline-dot {
        left: -9px;
        right: auto;
    }

    .ht1__timeline-item:hover .ht1__timeline-card {
        transform: translateX(0);
    }

    .ht1__timeline-item:nth-child(odd) .ht1__timeline-card {
        text-align: right;
        border-left: none;
        border-right: 3px solid transparent;
    }

    .ht1__timeline-item:nth-child(odd):hover .ht1__timeline-card {
        border-right-color: var(--accent);
    }

    .ht1__timeline-item:nth-child(even):hover .ht1__timeline-card {
        border-left-color: var(--accent);
    }

    .ht1__timeline-item:nth-child(odd) .ht1__timeline-year {
        display: inline-block;
    }
}

@media (max-width: 767px) {
    .ht1 { padding: 60px 0; }
    .ht1__title { font-size: 1.8rem; }
    .ht1__intro { margin-bottom: 50px; }
    .ht1__timeline-title { font-size: 1.3rem; margin-bottom: 30px; }
    .ht1__timeline-card { padding: 18px; }
}


/* ************************************************************
   MISSÃO, VISÃO E VALORES 01 — Cards
   Arquivo: inc/missao.inc.php
   ************************************************************ */

.mv1 {
    padding: 80px 0;
    background: var(--gray-light);
}

.mv1__header {
    text-align: center;
    margin-bottom: 50px;
}

.mv1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.mv1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
}

.mv1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.mv1__card {
    background: var(--white);
    border-radius: 16px;
    padding: 36px 28px;
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    border-top: 4px solid transparent;
}

.mv1__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.mv1__card:nth-child(1):hover { border-top-color: var(--primary); }
.mv1__card:nth-child(2):hover { border-top-color: var(--accent); }
.mv1__card:nth-child(3):hover { border-top-color: #25d366; }

.mv1__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 20px;
    font-size: 1.5rem;
}

.mv1__card-icon--blue {
    background: rgba(26, 58, 107, 0.1);
    color: var(--primary);
}

.mv1__card-icon--red {
    background: rgba(230, 57, 70, 0.1);
    color: var(--accent);
}

.mv1__card-icon--green {
    background: rgba(37, 211, 102, 0.1);
    color: #25d366;
}

.mv1__card-title {
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
}

.mv1__card-text {
    font-size: 0.9rem;
    color: var(--gray-medium);
    line-height: 1.7;
}

.mv1__values-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.mv1__values-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--gray-medium);
}

.mv1__values-list li i {
    color: #25d366;
    font-size: 0.75rem;
}

@media (min-width: 768px) {
    .mv1__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .mv1 { padding: 100px 0; }
    .mv1__title { font-size: 2.6rem; }
    .mv1__grid { gap: 30px; }
}

@media (max-width: 767px) {
    .mv1 { padding: 60px 0; }
    .mv1__title { font-size: 1.8rem; }
}


/* ************************************************************
   ESTRUTURA 01 — Infraestrutura do colégio
   Arquivo: inc/estrutura.inc.php
   ************************************************************ */

.et1 {
    padding: 80px 0;
    background: var(--white);
}

.et1__header {
    text-align: center;
    margin-bottom: 50px;
}

.et1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.08), rgba(198, 18, 31, 0.08));
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.et1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 12px;
}

.et1__subtitle {
    font-size: 1rem;
    color: var(--gray-medium);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.7;
}

.et1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.et1__item {
    background: var(--gray-light);
    border-radius: 14px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: var(--transition);
    border: 1px solid transparent;
}

.et1__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(26, 58, 107, 0.1);
    background: var(--white);
}

.et1__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--white);
    font-size: 1.3rem;
    margin-bottom: 16px;
    transition: var(--transition);
}

.et1__item:hover .et1__item-icon {
    background: var(--accent);
    transform: scale(1.1);
}

.et1__item-title {
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
}

.et1__item-text {
    font-size: 0.82rem;
    color: var(--gray-medium);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .et1__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (min-width: 1024px) {
    .et1 { padding: 100px 0; }
    .et1__title { font-size: 2.6rem; }
    .et1__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

@media (max-width: 767px) {
    .et1 { padding: 60px 0; }
    .et1__title { font-size: 1.8rem; }
    .et1__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ************************************************************
   LIGHTBOX — Modal de imagem expandida (reutilizável)
   ************************************************************ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.lightbox--active {
    opacity: 1;
    visibility: visible;
}

/* Fundo escuro */
.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer;
}

/* Container da imagem */
.lightbox__content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox--active .lightbox__content {
    transform: scale(1);
}

.lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    object-fit: contain;
    display: block;
}

/* Legenda */
.lightbox__caption {
    text-align: center;
    margin-top: 16px;
    color: var(--white);
}

.lightbox__caption-title {
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.lightbox__caption-desc {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Contador */
.lightbox__counter {
    position: absolute;
    top: 16px;
    left: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 2;
}

/* Botão fechar */
.lightbox__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--white);
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 2;
}

.lightbox__close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Setas de navegação */
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--white);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 2;
}

.lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox__nav--prev {
    left: 16px;
}

.lightbox__nav--prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.lightbox__nav--next {
    right: 16px;
}

.lightbox__nav--next:hover {
    transform: translateY(-50%) translateX(3px);
}

/* Mobile */
@media (max-width: 767px) {
    .lightbox__nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .lightbox__nav--prev { left: 8px; }
    .lightbox__nav--next { right: 8px; }
    .lightbox__close { top: 8px; right: 8px; }
    .lightbox__counter { top: 12px; left: 12px; }
    .lightbox__caption-title { font-size: 0.95rem; }
}


/* ************************************************************
   METODOLOGIA 01 — 3 Pilares pedagógicos
   Arquivo: inc/metodologia.inc.php
   ************************************************************ */

.mt1 {
    padding: 80px 0;
    background: var(--white);
}

.mt1__header {
    text-align: center;
    margin-bottom: 50px;
}

.mt1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.mt1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 12px;
}

.mt1__subtitle {
    font-size: 1rem;
    color: var(--gray-medium);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.mt1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.mt1__card {
    background: var(--gray-light);
    border-radius: 16px;
    padding: 36px 28px;
    transition: var(--transition);
    border-top: 4px solid transparent;
}

.mt1__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    background: var(--white);
}

.mt1__card:nth-child(1):hover { border-top-color: var(--primary); }
.mt1__card:nth-child(2):hover { border-top-color: var(--accent); }
.mt1__card:nth-child(3):hover { border-top-color: #25d366; }

.mt1__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 1.4rem;
}

.mt1__card-icon--blue { background: rgba(26, 58, 107, 0.1); color: var(--primary); }
.mt1__card-icon--red { background: rgba(230, 57, 70, 0.1); color: var(--accent); }
.mt1__card-icon--green { background: rgba(37, 211, 102, 0.1); color: #25d366; }

.mt1__card-title {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
}

.mt1__card-text {
    font-size: 0.9rem;
    color: var(--gray-medium);
    line-height: 1.7;
    margin-bottom: 16px;
}

.mt1__card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mt1__card-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--gray-dark);
    font-weight: 500;
}

.mt1__card-list li i {
    color: #25d366;
    font-size: 0.7rem;
}

@media (min-width: 768px) {
    .mt1__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .mt1 { padding: 100px 0; }
    .mt1__title { font-size: 2.6rem; }
    .mt1__grid { gap: 30px; }
}

@media (max-width: 767px) {
    .mt1 { padding: 60px 0; }
    .mt1__title { font-size: 1.8rem; }
}


/* ************************************************************
   SISTEMA DE ENSINO 01 — Split imagem + texto
   Arquivo: inc/sistema-ensino.inc.php
   ************************************************************ */

.se1 {
    padding: 80px 0;
    background: var(--gray-light);
}

.se1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

/* Imagem */
.se1__image-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.se1__image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.se1__image-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
}

/* Conteúdo */
.se1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.se1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 20px;
}

.se1__text {
    font-size: 0.95rem;
    color: var(--gray-medium);
    line-height: 1.8;
    margin-bottom: 14px;
}

.se1__benefits {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.se1__benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--gray-dark);
}

.se1__benefits li i {
    color: #25d366;
    font-size: 1rem;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .se1 { padding: 100px 0; }
    .se1__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
    .se1__title { font-size: 2.4rem; }
}

@media (max-width: 767px) {
    .se1 { padding: 60px 0; }
    .se1__title { font-size: 1.8rem; }
}


/* ************************************************************
   BILÍNGUE 01 — Programa Edify (split invertido)
   Arquivo: inc/bilingue.inc.php
   ************************************************************ */

.bl1 {
    padding: 80px 0;
    background: var(--white);
}

.bl1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

/* Conteúdo */
.bl1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.08), rgba(198, 18, 31, 0.08));
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.bl1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 20px;
}

.bl1__text {
    font-size: 0.95rem;
    color: var(--gray-medium);
    line-height: 1.8;
    margin-bottom: 14px;
}

/* Destaque informativo */
.bl1__highlight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.06), rgba(198, 18, 31, 0.06));
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    margin: 20px 0;
    font-size: 0.88rem;
    color: var(--gray-dark);
    line-height: 1.6;
}

.bl1__highlight i {
    color: var(--accent);
    margin-top: 3px;
    flex-shrink: 0;
}

/* Benefícios com ícone + título + desc */
.bl1__benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bl1__benefits li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.bl1__benefits li i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 58, 107, 0.08);
    color: var(--primary);
    border-radius: 10px;
    font-size: 1rem;
    flex-shrink: 0;
}

.bl1__benefits li strong {
    display: block;
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 2px;
}

.bl1__benefits li p {
    font-size: 0.82rem;
    color: var(--gray-medium);
    line-height: 1.4;
}

/* Imagem */
.bl1__image-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.bl1__image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.bl1__image-flag {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
}

@media (min-width: 1024px) {
    .bl1 { padding: 100px 0; }
    .bl1__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
    .bl1__title { font-size: 2.4rem; }
}

@media (max-width: 767px) {
    .bl1 { padding: 60px 0; }
    .bl1__title { font-size: 1.8rem; }
    .bl1__image { order: -1; }
}


/* ************************************************************
   DIFERENCIAIS PEDAGÓGICOS 02 — Grid de cards
   Arquivo: inc/diferenciais-ped.inc.php
   ************************************************************ */

.dp2 {
    padding: 80px 0;
    background: var(--gray-light);
}

.dp2__header {
    text-align: center;
    margin-bottom: 50px;
}

.dp2__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.dp2__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 12px;
}

.dp2__subtitle {
    font-size: 1rem;
    color: var(--gray-medium);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.7;
}

.dp2__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.dp2__item {
    background: var(--white);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid transparent;
    position: relative;
}

.dp2__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(26, 58, 107, 0.1);
}

.dp2__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--white);
    font-size: 1.3rem;
    margin: 0 auto 16px;
    transition: var(--transition);
}

.dp2__item:hover .dp2__item-icon {
    background: var(--accent);
    transform: scale(1.1);
}

.dp2__item-title {
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
}

.dp2__item-text {
    font-size: 0.82rem;
    color: var(--gray-medium);
    line-height: 1.6;
    margin-bottom: 12px;
}

.dp2__item-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(26, 58, 107, 0.06);
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (min-width: 768px) {
    .dp2__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .dp2 { padding: 100px 0; }
    .dp2__title { font-size: 2.6rem; }
    .dp2__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

@media (max-width: 767px) {
    .dp2 { padding: 60px 0; }
    .dp2__title { font-size: 1.8rem; }
    .dp2__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ************************************************************
   SEO HERO 01 — Hero com keyword (reutiliza visual do lh1)
   Arquivo: inc/seo-hero.inc.php
   ************************************************************ */
.sh1 { position: relative; padding: 120px 0 80px; background: linear-gradient(135deg, var(--primary) 0%, #0d2240 100%); color: var(--white); overflow: hidden; }
.sh1__bg { position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(37, 87, 167, 0.3) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(230, 57, 70, 0.1) 0%, transparent 50%); }
.sh1__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.sh1__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sh1__mini-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; }
.sh1__title { font-family: var(--font-title); font-size: 2.2rem; font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.sh1__sub { font-size: 1rem; opacity: 0.9; line-height: 1.8; margin-bottom: 28px; max-width: 580px; }
.sh1__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sh1__btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; background: #25d366; color: var(--white); font-family: var(--font-title); font-size: 1rem; font-weight: 700; border-radius: var(--radius-pill); transition: var(--transition); box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
.sh1__btn-primary:hover { background: #20bf5e; transform: translateY(-3px); box-shadow: 0 8px 30px rgba(37,211,102,0.5); }
.sh1__btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border: 2px solid rgba(255,255,255,0.4); color: var(--white); font-family: var(--font-title); font-size: 1rem; font-weight: 600; border-radius: var(--radius-pill); transition: var(--transition); }
.sh1__btn-secondary:hover { background: var(--white); color: var(--primary); border-color: var(--white); }
.sh1__image { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.sh1__image img { width: 100%; height: auto; display: block; }
@media (min-width: 1024px) { .sh1 { padding: 140px 0 100px; } .sh1__grid { grid-template-columns: 1fr 1fr; gap: 60px; } .sh1__title { font-size: 2.8rem; } }
@media (max-width: 767px) { .sh1 { padding: 100px 0 50px; } .sh1__title { font-size: 1.7rem; } .sh1__image { order: -1; } }

/* ************************************************************
   SEO POR QUE ESCOLHER 01 — Blocos de conteúdo rico
   Arquivo: inc/seo-porque.inc.php
   ************************************************************ */
.sp1 { padding: 80px 0; background: var(--white); }
.sp1__header { text-align: center; margin-bottom: 50px; max-width: 800px; margin-left: auto; margin-right: auto; }
.sp1__title { font-family: var(--font-title); font-size: 2.2rem; font-weight: 800; color: var(--primary); margin-bottom: 16px; }
.sp1__intro { font-size: 1rem; color: var(--gray-medium); line-height: 1.8; }
.sp1__grid { display: flex; flex-direction: column; gap: 24px; }
.sp1__block { display: flex; gap: 20px; padding: 28px; background: var(--gray-light); border-radius: 14px; transition: var(--transition); border-left: 4px solid transparent; }
.sp1__block:hover { border-left-color: var(--accent); box-shadow: var(--shadow-md); transform: translateX(4px); background: var(--white); }
.sp1__block-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: var(--primary); color: var(--white); font-size: 1.2rem; flex-shrink: 0; }
.sp1__block-content h3 { font-family: var(--font-title); font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.sp1__block-content p { font-size: 0.9rem; color: var(--gray-medium); line-height: 1.8; }
@media (min-width: 1024px) { .sp1 { padding: 100px 0; } .sp1__title { font-size: 2.6rem; } }
@media (max-width: 767px) { .sp1 { padding: 60px 0; } .sp1__title { font-size: 1.6rem; } .sp1__block { flex-direction: column; gap: 14px; } }

/* ************************************************************
   SEO NÍVEIS 01 — Cards com links internos
   Arquivo: inc/seo-niveis.inc.php
   ************************************************************ */
.sn1 { padding: 80px 0; background: var(--gray-light); }
.sn1__header { text-align: center; margin-bottom: 50px; }
.sn1__title { font-family: var(--font-title); font-size: 2.2rem; font-weight: 800; color: var(--primary); margin-bottom: 12px; }
.sn1__intro { font-size: 1rem; color: var(--gray-medium); line-height: 1.7; max-width: 650px; margin: 0 auto; }
.sn1__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.sn1__card { background: var(--white); border-radius: 16px; padding: 32px 28px; transition: var(--transition); border-top: 4px solid transparent; }
.sn1__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-top-color: var(--accent); }
.sn1__card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sn1__card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 1.2rem; }
.sn1__card-age { padding: 4px 14px; background: rgba(230,57,70,0.08); color: var(--accent); font-family: var(--font-title); font-size: 0.78rem; font-weight: 700; border-radius: var(--radius-pill); }
.sn1__card-title { font-family: var(--font-title); font-size: 1.2rem; font-weight: 700; color: var(--primary); margin-bottom: 10px; }
.sn1__card-text { font-size: 0.9rem; color: var(--gray-medium); line-height: 1.7; margin-bottom: 16px; }
.sn1__card-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-title); font-size: 0.85rem; font-weight: 600; color: var(--accent); transition: gap 0.2s ease; }
.sn1__card-link:hover { gap: 10px; }
@media (min-width: 768px) { .sn1__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sn1 { padding: 100px 0; } .sn1__title { font-size: 2.6rem; } }
@media (max-width: 767px) { .sn1 { padding: 60px 0; } .sn1__title { font-size: 1.6rem; } }

/* ************************************************************
   SEO DIFERENCIAIS 01 — Lista com texto rico
   Arquivo: inc/seo-diferenciais.inc.php
   ************************************************************ */
.sd1 { padding: 80px 0; background: var(--white); }
.sd1__header { text-align: center; margin-bottom: 50px; max-width: 750px; margin-left: auto; margin-right: auto; }
.sd1__title { font-family: var(--font-title); font-size: 2.2rem; font-weight: 800; color: var(--primary); margin-bottom: 14px; }
.sd1__intro { font-size: 0.95rem; color: var(--gray-medium); line-height: 1.8; }
.sd1__list { display: flex; flex-direction: column; gap: 20px; max-width: 850px; margin: 0 auto; }
.sd1__item { display: flex; gap: 20px; padding: 24px; background: var(--gray-light); border-radius: 14px; transition: var(--transition); }
.sd1__item:hover { box-shadow: var(--shadow-md); transform: translateX(4px); background: var(--white); }
.sd1__item-icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: var(--primary); color: var(--white); font-size: 1.2rem; flex-shrink: 0; }
.sd1__item:hover .sd1__item-icon { background: var(--accent); }
.sd1__item-content h3 { font-family: var(--font-title); font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.sd1__item-content p { font-size: 0.88rem; color: var(--gray-medium); line-height: 1.7; }
@media (min-width: 1024px) { .sd1 { padding: 100px 0; } .sd1__title { font-size: 2.4rem; } }
@media (max-width: 767px) { .sd1 { padding: 60px 0; } .sd1__title { font-size: 1.6rem; } .sd1__item { flex-direction: column; gap: 14px; } }

/* ************************************************************
   SEO LOCAL 01 — Endereço + Mapa
   Arquivo: inc/seo-local.inc.php
   ************************************************************ */
.sl1 { padding: 80px 0; background: var(--gray-light); }
.sl1__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.sl1__title { font-family: var(--font-title); font-size: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 16px; }
.sl1__text { font-size: 0.95rem; color: var(--gray-medium); line-height: 1.8; margin-bottom: 10px; }
.sl1__details { display: flex; flex-direction: column; gap: 18px; margin: 24px 0; }
.sl1__detail { display: flex; gap: 14px; align-items: flex-start; }
.sl1__detail i { width: 20px; text-align: center; color: var(--accent); font-size: 1rem; margin-top: 3px; flex-shrink: 0; }
.sl1__detail strong { display: block; font-family: var(--font-title); font-size: 0.88rem; font-weight: 700; color: var(--gray-dark); margin-bottom: 2px; }
.sl1__detail p { font-size: 0.85rem; color: var(--gray-medium); line-height: 1.5; }
.sl1__detail a { color: var(--primary); transition: color 0.2s ease; }
.sl1__detail a:hover { color: var(--accent); }
.sl1__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--accent); color: var(--white); font-family: var(--font-title); font-size: 0.85rem; font-weight: 700; border-radius: var(--radius-pill); transition: var(--transition); }
.sl1__btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(230,57,70,0.3); }
.sl1__map { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); min-height: 350px; }
.sl1__map iframe { display: block; border: 0; width: 100%; height: 100%; min-height: 350px; }
@media (min-width: 1024px) { .sl1 { padding: 100px 0; } .sl1__grid { grid-template-columns: 1fr 1.2fr; gap: 60px; } .sl1__map { min-height: 420px; } .sl1__map iframe { min-height: 420px; } }
@media (max-width: 767px) { .sl1 { padding: 60px 0; } .sl1__title { font-size: 1.5rem; } }

/* ************************************************************
   SEO LINKS 01 — Internal linking grid
   Arquivo: inc/seo-links.inc.php
   ************************************************************ */
.si1 { padding: 60px 0; background: var(--white); }
.si1__header { text-align: center; margin-bottom: 40px; }
.si1__title { font-family: var(--font-title); font-size: 1.6rem; font-weight: 800; color: var(--primary); margin-bottom: 10px; }
.si1__intro { font-size: 0.9rem; color: var(--gray-medium); line-height: 1.7; max-width: 550px; margin: 0 auto; }
.si1__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.si1__group { background: var(--gray-light); border-radius: 12px; padding: 24px; }
.si1__group-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-title); font-size: 0.9rem; font-weight: 700; color: var(--primary); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--accent); }
.si1__group-title i { color: var(--accent); }
.si1__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.si1__list a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--gray-medium); transition: color 0.2s ease, padding-left 0.2s ease; }
.si1__list a:hover { color: var(--accent); padding-left: 4px; }
@media (min-width: 1024px) { .si1__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .si1 { padding: 40px 0; } .si1__title { font-size: 1.3rem; } }


/* ************************************************************
   LP HERO 01 — Hero de vendas para landing pages
   Arquivo: inc/lp-hero.inc.php
   ************************************************************ */

.lh1 {
    position: relative;
    padding: 120px 0 80px;
    background: linear-gradient(135deg, var(--primary) 0%, #0d2240 100%);
    color: var(--white);
    overflow: hidden;
}

.lh1__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(37, 87, 167, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(230, 57, 70, 0.1) 0%, transparent 50%);
}

.lh1__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.lh1__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.lh1__mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}

.lh1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
}

.lh1__sub {
    font-size: 1.05rem;
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 540px;
}

.lh1__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lh1__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    background: #25d366;
    color: var(--white);
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}

.lh1__btn-primary:hover {
    background: #20bf5e;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
}

.lh1__btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    transition: var(--transition);
}

.lh1__btn-secondary:hover {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
}

.lh1__image {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.lh1__image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 1024px) {
    .lh1 { padding: 140px 0 100px; }
    .lh1__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
    .lh1__title { font-size: 2.8rem; }
}

@media (max-width: 767px) {
    .lh1 { padding: 100px 0 50px; }
    .lh1__title { font-size: 1.7rem; }
    .lh1__image { order: -1; }
}


/* ************************************************************
   LP PROVA SOCIAL 01 — Barra de números
   Arquivo: inc/lp-prova-social.inc.php
   ************************************************************ */

.lp1 {
    padding: 40px 0;
    background: linear-gradient(135deg, var(--accent) 0%, #d62839 100%);
    color: var(--white);
}

.lp1__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    text-align: center;
}

.lp1__item {
    padding: 10px;
}

.lp1__number {
    font-family: var(--font-title);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
}

.lp1__suffix {
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 700;
    opacity: 0.8;
}

.lp1__label {
    display: block;
    font-size: 0.82rem;
    opacity: 0.85;
    margin-top: 6px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .lp1__grid { grid-template-columns: repeat(4, 1fr); }
    .lp1__number { font-size: 2.8rem; }
}

@media (min-width: 1024px) {
    .lp1 { padding: 50px 0; }
    .lp1__number { font-size: 3.2rem; }
}


/* ************************************************************
   LP PARA QUEM 01 — Faixa etária + dores dos pais
   Arquivo: inc/lp-para-quem.inc.php
   ************************************************************ */

.lq1 {
    padding: 80px 0;
    background: var(--white);
}

.lq1__header {
    text-align: center;
    margin-bottom: 50px;
}

.lq1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 14px;
}

.lq1__faixa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(230, 57, 70, 0.08);
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
}

.lq1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.lq1__card {
    padding: 30px 24px;
    background: var(--gray-light);
    border-radius: 16px;
    text-align: center;
    transition: var(--transition);
    border: 2px solid transparent;
}

.lq1__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
    background: var(--white);
}

.lq1__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 1.3rem;
    margin: 0 auto 16px;
}

.lq1__card-title {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
}

.lq1__card-text {
    font-size: 0.88rem;
    color: var(--gray-medium);
    line-height: 1.6;
}

@media (min-width: 768px) {
    .lq1__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .lq1 { padding: 100px 0; }
    .lq1__title { font-size: 2.6rem; }
    .lq1__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

@media (max-width: 767px) {
    .lq1 { padding: 60px 0; }
    .lq1__title { font-size: 1.6rem; }
    .lq1__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ************************************************************
   LP DIFERENCIAIS 01 — Grid inclusos na mensalidade
   Arquivo: inc/lp-diferenciais.inc.php
   ************************************************************ */

.ld1 {
    padding: 80px 0;
    background: var(--gray-light);
}

.ld1__header {
    text-align: center;
    margin-bottom: 50px;
}

.ld1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(37, 211, 102, 0.1);
    color: #25d366;
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.ld1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
}

.ld1__title strong {
    color: var(--accent);
}

.ld1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.ld1__item {
    background: var(--white);
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    border: 1px solid transparent;
}

.ld1__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(37, 211, 102, 0.3);
}

.ld1__item-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 10px;
    background: #25d366;
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    letter-spacing: 0.5px;
}

.ld1__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--white);
    font-size: 1.2rem;
    margin: 0 auto 14px;
    transition: var(--transition);
}

.ld1__item:hover .ld1__item-icon {
    background: var(--accent);
    transform: scale(1.1);
}

.ld1__item-title {
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
}

.ld1__item-text {
    font-size: 0.8rem;
    color: var(--gray-medium);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .ld1__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .ld1 { padding: 100px 0; }
    .ld1__title { font-size: 2.6rem; }
    .ld1__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

@media (max-width: 767px) {
    .ld1 { padding: 60px 0; }
    .ld1__title { font-size: 1.6rem; }
    .ld1__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ************************************************************
   LP CTA RÁPIDO 01 — Faixa intermediária de conversão
   Arquivo: inc/lp-cta-rapido.inc.php
   ************************************************************ */

.lr1 {
    padding: 50px 0;
    background: var(--primary);
    color: var(--white);
}

.lr1__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.lr1__title {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 800;
}

.lr1__sub {
    opacity: 0.8;
    font-size: 0.95rem;
}

.lr1__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.lr1__btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #25d366;
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
}

.lr1__btn-whatsapp:hover {
    background: #20bf5e;
    transform: translateY(-2px);
}

.lr1__btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    transition: var(--transition);
}

.lr1__btn-phone:hover {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
}

@media (min-width: 1024px) {
    .lr1__inner { flex-direction: row; text-align: left; justify-content: space-between; }
    .lr1__title { font-size: 1.7rem; }
}

@media (max-width: 767px) {
    .lr1 { padding: 40px 0; }
    .lr1__title { font-size: 1.3rem; }
}


/* ************************************************************
   LP FAQ 01 — Accordion de perguntas frequentes
   Arquivo: inc/lp-faq.inc.php
   ************************************************************ */

.lf1 {
    padding: 80px 0;
    background: var(--gray-light);
}

.lf1__header {
    text-align: center;
    margin-bottom: 40px;
}

.lf1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.lf1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
}

.lf1__list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lf1__item {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid transparent;
}

.lf1__item:hover {
    border-color: rgba(26, 58, 107, 0.1);
}

.lf1__item--active {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.lf1__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    background: none;
    border: none;
    font-family: var(--font-title);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary);
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
}

.lf1__question:hover {
    color: var(--accent);
}

.lf1__arrow {
    font-size: 0.8rem;
    color: var(--gray-medium);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.lf1__item--active .lf1__arrow {
    transform: rotate(180deg);
    color: var(--accent);
}

.lf1__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.lf1__answer p {
    padding: 0 20px 18px;
    font-size: 0.88rem;
    color: var(--gray-medium);
    line-height: 1.7;
}

@media (min-width: 1024px) {
    .lf1 { padding: 100px 0; }
    .lf1__title { font-size: 2.6rem; }
}

@media (max-width: 767px) {
    .lf1 { padding: 60px 0; }
    .lf1__title { font-size: 1.6rem; }
    .lf1__question { font-size: 0.85rem; padding: 16px; }
}


/* ************************************************************
   LP CTA FINAL 01 — Urgência + Formulário
   Arquivo: inc/lp-cta-final.inc.php
   ************************************************************ */

.lc1 {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(135deg, var(--primary) 0%, #0d2240 100%);
    color: var(--white);
    overflow: hidden;
}

.lc1__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(230, 57, 70, 0.15) 0%, transparent 50%);
}

.lc1__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

/* Urgência */
.lc1__badge-urgency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    margin-bottom: 20px;
    animation: lc1Pulse 2s ease-in-out infinite;
}

@keyframes lc1Pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(230, 57, 70, 0); }
}

.lc1__title {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.lc1__text {
    font-size: 0.95rem;
    opacity: 0.85;
    line-height: 1.7;
    margin-bottom: 24px;
}

.lc1__checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lc1__checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.lc1__checklist li i {
    color: #25d366;
    font-size: 1rem;
}

/* Formulário */
.lc1__form-wrapper {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 36px 28px;
    backdrop-filter: blur(10px);
}

.lc1__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lc1__form-title {
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
}

.lc1__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.lc1__input {
    padding: 14px 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
}

.lc1__input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.lc1__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.lc1__select {
    cursor: pointer;
    appearance: auto;
}

.lc1__select option {
    color: #333;
    background: #fff;
}

.lc1__select option:checked {
    color: #333;
    background: #e9ecef;
}

.lc1__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.75rem;
    opacity: 0.7;
    cursor: pointer;
}

.lc1__checkbox {
    margin-top: 2px;
    cursor: pointer;
}

.lc1__link {
    color: var(--white);
    text-decoration: underline;
}

.lc1__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.4);
}

.lc1__submit:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(230, 57, 70, 0.5);
}

@media (min-width: 1024px) {
    .lc1 { padding: 100px 0; }
    .lc1__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
    .lc1__title { font-size: 2.4rem; }
}

@media (max-width: 767px) {
    .lc1 { padding: 60px 0; }
    .lc1__title { font-size: 1.5rem; }
    .lc1__form-wrapper { padding: 24px 18px; }
    .lc1__form-row { grid-template-columns: 1fr; }
}


/* ************************************************************
   CURSO DETALHE 01 — Página de curso reutilizável
   Arquivo: inc/curso-detalhe.inc.php
   ************************************************************ */

/* Bloco Intro */
.cd1__intro {
    padding: 80px 0;
    background: var(--white);
}

.cd1__intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.cd1__intro-content {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.cd1__intro-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--primary);
    color: var(--white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.cd1__badge {
    display: inline-block;
    padding: 4px 14px;
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
}

.cd1__badge--incluso {
    background: rgba(37, 211, 102, 0.1);
    color: #25d366;
}

.cd1__badge--extra {
    background: rgba(230, 57, 70, 0.1);
    color: var(--accent);
}

.cd1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.cd1__desc {
    font-size: 0.95rem;
    color: var(--gray-medium);
    line-height: 1.8;
}

.cd1__intro-image {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.cd1__intro-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Bloco Detalhes */
.cd1__details {
    padding: 60px 0 80px;
    background: var(--gray-light);
}

.cd1__details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.cd1__section-title {
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}

/* Benefícios */
.cd1__benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cd1__benefits-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    color: var(--gray-dark);
    padding: 12px 16px;
    background: var(--white);
    border-radius: 10px;
    transition: var(--transition);
}

.cd1__benefits-list li:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.cd1__benefits-list li i {
    color: #25d366;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Info prática */
.cd1__info-block {
    margin-bottom: 20px;
}

.cd1__info-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 6px;
}

.cd1__info-label i {
    color: var(--accent);
    font-size: 0.85rem;
}

.cd1__info-text {
    font-size: 0.88rem;
    color: var(--gray-medium);
    line-height: 1.6;
    padding-left: 26px;
}

/* Tags */
.cd1__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 26px;
}

.cd1__tag {
    display: inline-block;
    padding: 5px 14px;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
}

/* Botão CTA */
.cd1__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #25d366;
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
    margin-top: 10px;
}

.cd1__btn:hover {
    background: #20bf5e;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(37, 211, 102, 0.5);
}

@media (min-width: 1024px) {
    .cd1__intro { padding: 100px 0; }
    .cd1__intro-grid { grid-template-columns: 1fr 1fr; gap: 60px; }
    .cd1__details-grid { grid-template-columns: 1.2fr 1fr; gap: 50px; }
    .cd1__title { font-size: 2.4rem; }
}

@media (max-width: 767px) {
    .cd1__intro { padding: 60px 0; }
    .cd1__title { font-size: 1.6rem; }
    .cd1__intro-content { flex-direction: column; gap: 16px; }
    .cd1__intro-icon { width: 52px; height: 52px; font-size: 1.2rem; }
    .cd1__details { padding: 40px 0 60px; }
}

/* Galeria de fotos do curso */
.cd1__gallery {
    padding: 60px 0;
    background: var(--white);
}

.cd1__gallery-title {
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin-bottom: 30px;
}

.cd1__gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
    gap: 12px;
}

.cd1__gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: block;
}

.cd1__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.cd1__gallery-item:hover img {
    transform: scale(1.06);
}

.cd1__gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 58, 107, 0.8) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cd1__gallery-item:hover .cd1__gallery-overlay {
    opacity: 1;
}

.cd1__gallery-overlay h4 {
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--white);
}

@media (min-width: 768px) {
    .cd1__gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; }
}

@media (min-width: 1024px) {
    .cd1__gallery { padding: 80px 0; }
    .cd1__gallery-grid { gap: 16px; }
}

@media (max-width: 767px) {
    .cd1__gallery { padding: 40px 0; }
    .cd1__gallery-grid { grid-auto-rows: 160px; }
}

/* Depoimento do curso */
.cd1__testimonial {
    padding: 60px 0;
    background: var(--gray-light);
}

.cd1__testimonial-card {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 40px 30px 30px;
}

.cd1__testimonial-quote {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    color: var(--accent);
    opacity: 0.3;
}

.cd1__testimonial-text {
    font-size: 1.05rem;
    font-style: italic;
    color: var(--gray-dark);
    line-height: 1.8;
    margin-bottom: 24px;
}

.cd1__testimonial-author strong {
    display: block;
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2px;
}

.cd1__testimonial-author span {
    font-size: 0.82rem;
    color: var(--gray-medium);
}

@media (min-width: 1024px) {
    .cd1__testimonial { padding: 80px 0; }
    .cd1__testimonial-text { font-size: 1.15rem; }
}

@media (max-width: 767px) {
    .cd1__testimonial { padding: 40px 0; }
    .cd1__testimonial-card { padding: 30px 16px 20px; }
}


/* ************************************************************
   GALERIA DE FOTOS 01 — Grid com filtro + lightbox
   Arquivo: inc/galeria-fotos.inc.php
   ************************************************************ */

.gf1 {
    padding: 80px 0;
    background: var(--white);
}

.gf1__header {
    text-align: center;
    margin-bottom: 30px;
}

.gf1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.gf1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
}

/* Filtros */
.gf1__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.gf1__filter {
    padding: 8px 20px;
    background: var(--gray-light);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-medium);
    cursor: pointer;
    transition: var(--transition);
}

.gf1__filter:hover {
    color: var(--primary);
    border-color: rgba(26, 58, 107, 0.2);
}

.gf1__filter--active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.gf1__filter--active:hover {
    color: var(--white);
    border-color: var(--primary);
}

/* Grid */
.gf1__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    gap: 12px;
}

.gf1__item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: block;
}

.gf1__item--hidden {
    display: none;
}

.gf1__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gf1__item:hover img {
    transform: scale(1.06);
}

/* Overlay */
.gf1__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 58, 107, 0.85) 0%, rgba(26, 58, 107, 0.2) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gf1__item:hover .gf1__overlay {
    opacity: 1;
}

.gf1__overlay-title {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

.gf1__overlay-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

@media (min-width: 768px) {
    .gf1__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 250px; }
}

@media (min-width: 1024px) {
    .gf1 { padding: 100px 0; }
    .gf1__title { font-size: 2.6rem; }
    .gf1__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 16px; }
}

@media (max-width: 767px) {
    .gf1 { padding: 60px 0; }
    .gf1__title { font-size: 1.8rem; }
    .gf1__filter { padding: 6px 14px; font-size: 0.75rem; }
}


/* ************************************************************
   GALERIA DE VÍDEOS 01 — Grid de vídeos embed
   Arquivo: inc/galeria-videos.inc.php
   ************************************************************ */

.gv1 {
    padding: 80px 0;
    background: var(--white);
}

.gv1__header {
    text-align: center;
    margin-bottom: 50px;
}

.gv1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.08), rgba(198, 18, 31, 0.08));
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.gv1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 12px;
}

.gv1__subtitle {
    font-size: 1rem;
    color: var(--gray-medium);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

.gv1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.gv1__item {
    border-radius: 16px;
    overflow: hidden;
    background: var(--gray-light);
    transition: var(--transition);
}

.gv1__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.gv1__video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.gv1__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.gv1__info {
    padding: 18px 20px;
}

.gv1__info-title {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
}

.gv1__info-desc {
    font-size: 0.85rem;
    color: var(--gray-medium);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .gv1__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .gv1 { padding: 100px 0; }
    .gv1__title { font-size: 2.6rem; }
    .gv1__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

@media (max-width: 767px) {
    .gv1 { padding: 60px 0; }
    .gv1__title { font-size: 1.8rem; }
}


/* ************************************************************
   EVENTOS 01 — Lista de eventos com datas
   Arquivo: inc/eventos-lista.inc.php
   ************************************************************ */

.ev1 {
    padding: 80px 0;
    background: var(--white);
}

.ev1__header {
    text-align: center;
    margin-bottom: 50px;
}

.ev1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.ev1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 12px;
}

.ev1__subtitle {
    font-size: 1rem;
    color: var(--gray-medium);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

.ev1__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* Card de evento */
.ev1__card {
    display: flex;
    gap: 20px;
    background: var(--gray-light);
    border-radius: 14px;
    padding: 24px;
    transition: var(--transition);
    border-left: 4px solid transparent;
}

.ev1__card:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--accent);
    background: var(--white);
}

/* Data em destaque */
.ev1__card-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 14px;
    background: var(--primary);
    color: var(--white);
    border-radius: 12px;
    flex-shrink: 0;
}

.ev1__card-day {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}

.ev1__card-month {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* Conteúdo */
.ev1__card-content {
    flex: 1;
}

.ev1__card-badge {
    display: inline-block;
    padding: 3px 10px;
    font-family: var(--font-title);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-pill);
    margin-bottom: 8px;
}

.ev1__card-badge--proximo {
    background: rgba(37, 211, 102, 0.1);
    color: #25d366;
}

.ev1__card-badge--realizado {
    background: rgba(108, 117, 125, 0.1);
    color: var(--gray-medium);
}

.ev1__card-title {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
}

.ev1__card-desc {
    font-size: 0.88rem;
    color: var(--gray-medium);
    line-height: 1.6;
    margin-bottom: 10px;
}

.ev1__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ev1__card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--gray-medium);
    font-weight: 500;
}

.ev1__card-meta i {
    color: var(--accent);
    font-size: 0.72rem;
}

@media (min-width: 1024px) {
    .ev1 { padding: 100px 0; }
    .ev1__title { font-size: 2.6rem; }
}

@media (max-width: 767px) {
    .ev1 { padding: 60px 0; }
    .ev1__title { font-size: 1.8rem; }
    .ev1__card { flex-direction: column; gap: 14px; }
    .ev1__card-date {
        flex-direction: row;
        gap: 8px;
        min-width: auto;
        align-self: flex-start;
        padding: 10px 18px;
    }
    .ev1__card-day { font-size: 1.3rem; }
    .ev1__card-month { margin-top: 0; }
}


/* ************************************************************
   CONTATO FORMULÁRIO 01 — Form + Cards de contato rápido
   Arquivo: inc/contato-form.inc.php
   ************************************************************ */

.cf1 {
    padding: 80px 0;
    background: var(--white);
}

.cf1__header {
    text-align: center;
    margin-bottom: 50px;
}

.cf1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.cf1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 12px;
}

.cf1__subtitle {
    font-size: 1rem;
    color: var(--gray-medium);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

.cf1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

/* Formulário */
.cf1__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cf1__form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.cf1__form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cf1__label {
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-dark);
}

.cf1__input {
    padding: 13px 16px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text);
    background: var(--gray-light);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cf1__input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(37, 87, 167, 0.1);
    background: var(--white);
}

.cf1__input::placeholder {
    color: var(--gray-medium);
}

.cf1__select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

.cf1__textarea {
    resize: vertical;
    min-height: 120px;
}

.cf1__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(26, 58, 107, 0.25);
    align-self: flex-start;
}

.cf1__submit:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 58, 107, 0.35);
}

/* Cards de contato rápido */
.cf1__cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cf1__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--gray-light);
    border-radius: 12px;
    transition: var(--transition);
    border: 1px solid transparent;
    color: var(--text);
}

.cf1__card:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(26, 58, 107, 0.1);
    background: var(--white);
}

.cf1__card--whatsapp:hover {
    border-color: rgba(37, 211, 102, 0.3);
}

.cf1__card--instagram:hover {
    border-color: rgba(225, 48, 108, 0.3);
}

.cf1__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--white);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cf1__card--whatsapp .cf1__card-icon {
    background: #25d366;
}

.cf1__card--instagram .cf1__card-icon {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.cf1__card-content {
    flex: 1;
}

.cf1__card-title {
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2px;
}

.cf1__card-text {
    font-size: 0.82rem;
    color: var(--gray-medium);
}

.cf1__card-arrow {
    color: var(--gray-medium);
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.cf1__card:hover .cf1__card-arrow {
    transform: translateX(4px);
    color: var(--primary);
}

/* Horário */
.cf1__schedule {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.06), rgba(37, 87, 167, 0.06));
    border-radius: 12px;
    border-left: 3px solid var(--primary);
}

.cf1__schedule i {
    color: var(--primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cf1__schedule strong {
    display: block;
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 2px;
}

.cf1__schedule p {
    font-size: 0.82rem;
    color: var(--gray-medium);
}

@media (min-width: 768px) {
    .cf1__form-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .cf1 { padding: 100px 0; }
    .cf1__title { font-size: 2.6rem; }
    .cf1__grid { grid-template-columns: 1.2fr 1fr; gap: 50px; }
}

@media (max-width: 767px) {
    .cf1 { padding: 60px 0; }
    .cf1__title { font-size: 1.8rem; }
}


/* ************************************************************
   EQUIPE INTRO 01 — Apresentação da equipe
   Arquivo: inc/equipe-intro.inc.php
   ************************************************************ */

.ei1 {
    padding: 80px 0;
    background: var(--white);
}

.ei1__content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.ei1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.ei1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 16px;
}

.ei1__text {
    font-size: 1rem;
    color: var(--gray-medium);
    line-height: 1.8;
}

/* Stats */
.ei1__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ei1__stat {
    text-align: center;
    padding: 28px 20px;
    background: var(--gray-light);
    border-radius: 14px;
    transition: var(--transition);
}

.ei1__stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.ei1__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--white);
    font-size: 1.2rem;
    margin: 0 auto 14px;
}

.ei1__stat-number {
    display: block;
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.ei1__stat-label {
    font-size: 0.82rem;
    color: var(--gray-medium);
    font-weight: 500;
}

@media (min-width: 768px) {
    .ei1__stats { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .ei1 { padding: 100px 0; }
    .ei1__title { font-size: 2.6rem; }
    .ei1__stat-number { font-size: 2.4rem; }
}

@media (max-width: 767px) {
    .ei1 { padding: 60px 0; }
    .ei1__title { font-size: 1.8rem; }
}


/* ************************************************************
   EQUIPE GRID 01 — Cards de membros com filtro
   Arquivo: inc/equipe-grid.inc.php
   ************************************************************ */

.eg1 {
    padding: 0 0 80px;
    background: var(--white);
}

.eg1__header {
    text-align: center;
    margin-bottom: 30px;
}

.eg1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
}

/* Filtros */
.eg1__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.eg1__filter {
    padding: 8px 20px;
    background: var(--gray-light);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-medium);
    cursor: pointer;
    transition: var(--transition);
}

.eg1__filter:hover {
    color: var(--primary);
    border-color: rgba(26, 58, 107, 0.2);
}

.eg1__filter--active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.eg1__filter--active:hover {
    color: var(--white);
    border-color: var(--primary);
}

/* Grid */
.eg1__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Card */
.eg1__card {
    border-radius: 16px;
    overflow: hidden;
    background: var(--gray-light);
    transition: var(--transition);
}

.eg1__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.eg1__card--hidden {
    display: none;
}

/* Foto */
.eg1__card-photo {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.1), rgba(37, 87, 167, 0.05));
}

.eg1__card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.eg1__card:hover .eg1__card-photo img {
    transform: scale(1.05);
}

/* Overlay hover */
.eg1__card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 58, 107, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.eg1__card:hover .eg1__card-overlay {
    opacity: 1;
}

.eg1__card-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    font-size: 1rem;
    transition: var(--transition);
}

.eg1__card-social:hover {
    background: var(--accent);
    color: var(--white);
    transform: scale(1.1);
}

/* Info */
.eg1__card-info {
    padding: 18px 20px;
    text-align: center;
}

.eg1__card-name {
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.eg1__card-role {
    font-size: 0.8rem;
    color: var(--gray-medium);
    font-weight: 500;
}

@media (min-width: 768px) {
    .eg1__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .eg1 { padding: 0 0 100px; }
    .eg1__title { font-size: 2.6rem; }
    .eg1__grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}

@media (max-width: 767px) {
    .eg1 { padding: 0 0 60px; }
    .eg1__title { font-size: 1.8rem; }
    .eg1__filter { padding: 6px 14px; font-size: 0.75rem; }
}


/* ************************************************************
   TOUR VIRTUAL 01 — Intro + Street View
   Arquivo: inc/tour-virtual.inc.php
   ************************************************************ */

.tv1 {
    padding: 80px 0;
    background: var(--white);
}

.tv1__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

/* Conteúdo */
.tv1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.tv1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 20px;
}

.tv1__text {
    font-size: 0.95rem;
    color: var(--gray-medium);
    line-height: 1.8;
    margin-bottom: 14px;
}

/* Destaques */
.tv1__highlights {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0;
}

.tv1__highlight-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tv1__highlight-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(26, 58, 107, 0.08);
    color: var(--primary);
    border-radius: 10px;
    font-size: 1rem;
    flex-shrink: 0;
}

.tv1__highlight-item strong {
    display: block;
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 2px;
}

.tv1__highlight-item p {
    font-size: 0.82rem;
    color: var(--gray-medium);
    line-height: 1.4;
}

/* Botão */
.tv1__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #25d366;
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
}

.tv1__btn:hover {
    background: #20bf5e;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(37, 211, 102, 0.5);
}

/* Mapa Street View */
.tv1__map {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    min-height: 350px;
}

.tv1__map iframe {
    display: block;
    border: 0;
    width: 100%;
    height: 100%;
    min-height: 350px;
}

@media (min-width: 1024px) {
    .tv1 { padding: 100px 0; }
    .tv1__grid { grid-template-columns: 1fr 1.2fr; gap: 60px; }
    .tv1__title { font-size: 2.4rem; }
    .tv1__map { min-height: 420px; }
    .tv1__map iframe { min-height: 420px; }
}

@media (max-width: 767px) {
    .tv1 { padding: 60px 0; }
    .tv1__title { font-size: 1.8rem; }
    .tv1__map { min-height: 280px; }
    .tv1__map iframe { min-height: 280px; }
}


/* ************************************************************
   FOTOS DA ESTRUTURA 01 — Grid de fotos com overlay
   Arquivo: inc/fotos-estrutura.inc.php
   ************************************************************ */

.fe1 {
    padding: 0 0 80px;
    background: var(--white);
}

.fe1__header {
    text-align: center;
    margin-bottom: 50px;
}

.fe1__badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(26, 58, 107, 0.08), rgba(37, 87, 167, 0.08));
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.fe1__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
}

.fe1__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
    gap: 12px;
}

.fe1__item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: block;
}

.fe1__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fe1__item:hover img {
    transform: scale(1.06);
}

/* Overlay com info */
.fe1__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 58, 107, 0.85) 0%, rgba(26, 58, 107, 0.2) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.fe1__item:hover .fe1__overlay {
    opacity: 1;
}

.fe1__overlay-info {
    transform: translateY(12px);
    transition: transform 0.4s ease;
}

.fe1__item:hover .fe1__overlay-info {
    transform: translateY(0);
}

.fe1__overlay-title {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 4px;
}

.fe1__overlay-desc {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .fe1__grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 240px;
    }
    .fe1__item--wide { grid-column: span 2; }
}

@media (min-width: 1024px) {
    .fe1 { padding: 0 0 100px; }
    .fe1__title { font-size: 2.6rem; }
    .fe1__grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 220px;
        gap: 16px;
    }
    .fe1__item--wide { grid-column: span 2; }
}

@media (max-width: 767px) {
    .fe1 { padding: 0 0 60px; }
    .fe1__title { font-size: 1.8rem; }
    .fe1__grid { grid-auto-rows: 160px; }
    .fe1__item--wide { grid-column: span 2; }
}


/* ************************************************************
   RESPONSIVE GLOBAL
   ************************************************************ */
@media (min-width: 768px) {
    .container {
        padding: 0 30px;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 40px;
    }
}


/* ============================================================
   COOKIE CONSENT (LGPD) — Prefixo: cc-
   Camada 19 do seguranca.md
   ============================================================ */

/* Animacao de entrada */
@keyframes cc-slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Banner principal */
.cc-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: var(--gray-dark, #343a40);
    color: #fff;
    padding: 0;
    animation: cc-slideUp 0.4s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    font-family: var(--font-body, 'Inter', sans-serif);
}

.cc-banner[hidden] {
    display: none;
}

.cc-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cc-banner__text {
    flex: 1;
    min-width: 250px;
}

.cc-banner__text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #e9ecef;
}

.cc-banner__link {
    color: #adb5bd;
    text-decoration: underline;
    transition: color 0.2s;
}

.cc-banner__link:hover {
    color: #fff;
}

.cc-banner__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Botoes */
.cc-btn {
    border: none;
    border-radius: var(--radius, 8px);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.cc-btn:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}

.cc-btn--accept {
    background: var(--accent, #e63946);
    color: #fff;
}

.cc-btn--accept:hover {
    background: var(--accent-hover, #c1121f);
}

.cc-btn--reject {
    background: transparent;
    color: #adb5bd;
    border: 1px solid #6c757d;
}

.cc-btn--reject:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cc-btn--settings {
    background: transparent;
    color: #e9ecef;
    border: 1px solid #adb5bd;
}

.cc-btn--settings:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Modal de configuracao */
.cc-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cc-modal[hidden] {
    display: none;
}

.cc-modal__content {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    color: var(--text, #2d3436);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.cc-modal__title {
    font-family: var(--font-title, 'Montserrat', sans-serif);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--primary, #1a3a6b);
}

.cc-category {
    padding: 16px 0;
    border-bottom: 1px solid #e9ecef;
}

.cc-category:last-of-type {
    border-bottom: none;
}

.cc-category__label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
}

.cc-category__label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent, #e63946);
}

.cc-category--required .cc-category__label {
    opacity: 0.7;
    cursor: default;
}

.cc-category--required input[type="checkbox"] {
    cursor: default;
}

.cc-category__desc {
    margin: 6px 0 0 28px;
    font-size: 13px;
    color: var(--gray-medium, #6c757d);
    line-height: 1.4;
}

.cc-modal__actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    justify-content: flex-end;
}

/* Responsivo mobile */
@media (max-width: 768px) {
    .cc-banner__inner {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 16px;
    }

    .cc-banner__actions {
        justify-content: center;
        width: 100%;
    }

    .cc-btn {
        flex: 1;
        min-width: 0;
        padding: 10px 14px;
        font-size: 13px;
    }

    .cc-modal__content {
        padding: 24px;
    }

    .cc-modal__actions {
        flex-direction: column;
    }

    .cc-modal__actions .cc-btn {
        width: 100%;
    }
}

/* ************************************************************
   POLÍTICA DE PRIVACIDADE 01 — Página legal LGPD
   Arquivo: resources/components/sections/politica-privacidade.inc.php
   ************************************************************ */

.pp1 {
    padding: 60px 0 80px;
    background: var(--white);
}

.pp1__content {
    max-width: 860px;
    margin: 0 auto;
}

.pp1__intro {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--gray-light);
}

.pp1__title {
    font-family: var(--font-title);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--primary);
    margin: 0 0 16px;
    line-height: 1.2;
}

.pp1__lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 16px;
}

.pp1__meta {
    font-size: 0.9rem;
    color: var(--gray-medium);
    font-style: italic;
    margin: 0;
}

.pp1__section {
    margin-bottom: 32px;
}

.pp1__section-title {
    font-family: var(--font-title);
    font-size: 1.25rem;
    color: var(--primary);
    margin: 0 0 12px;
    line-height: 1.3;
}

.pp1__section p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 12px;
}

.pp1__list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.pp1__list li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
}

.pp1__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.pp1__section a {
    color: var(--primary-light);
    text-decoration: underline;
    transition: var(--transition);
}

.pp1__section a:hover,
.pp1__section a:focus-visible {
    color: var(--accent);
}

/* ************************************************************
   TERMOS DE USO 01 — Página legal
   Arquivo: resources/components/sections/termos-de-uso.inc.php
   ************************************************************ */

.tu1 {
    padding: 60px 0 80px;
    background: var(--white);
}

.tu1__content {
    max-width: 860px;
    margin: 0 auto;
}

.tu1__intro {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--gray-light);
}

.tu1__title {
    font-family: var(--font-title);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--primary);
    margin: 0 0 16px;
    line-height: 1.2;
}

.tu1__lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 16px;
}

.tu1__meta {
    font-size: 0.9rem;
    color: var(--gray-medium);
    font-style: italic;
    margin: 0;
}

.tu1__section {
    margin-bottom: 32px;
}

.tu1__section-title {
    font-family: var(--font-title);
    font-size: 1.25rem;
    color: var(--primary);
    margin: 0 0 12px;
    line-height: 1.3;
}

.tu1__section p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 12px;
}

.tu1__list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.tu1__list li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
}

.tu1__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.tu1__section a {
    color: var(--primary-light);
    text-decoration: underline;
    transition: var(--transition);
}

.tu1__section a:hover,
.tu1__section a:focus-visible {
    color: var(--accent);
}

/* Responsive — pp1 + tu1 */
@media (max-width: 768px) {

    .pp1,
    .tu1 {
        padding: 40px 0 60px;
    }

    .pp1__section-title,
    .tu1__section-title {
        font-size: 1.1rem;
    }
}


/* ************************************************************
   LAB HEADER — Header do vertical laboratório
   Arquivo: resources/components/headers/lab-header.inc.php
   Estrutura: barra de marca (logo + contatos + ações) e barra de
   navegação com submenus. NÃO é fixo — rola junto com a página.
   ************************************************************ */
/* h1 oculto da página que abre só com imagem (var `pageH1`, v10.38.10):
   fora da tela, mas lido por leitor de tela e pelo Google. */
.labh-sr-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.labh {
    position: relative;
    z-index: 1000;
    background: var(--white);
}

/* ---------- Barra de marca ---------- */
.labh-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    /* Respiro inferior de 10px: somado aos 10px do topo do link de menu,
       fecha os 20px pedidos entre a barra de marca e o menu.
       padding-block, e NÃO o atalho `padding`: este elemento também é
       `.container`, e o atalho zerava o respiro lateral dele — no celular a
       logo encostava na borda da tela. */
    padding-block: 18px 10px;
}

/* Desktop (menu completo): sem respiro lateral, como no layout aprovado pelo
   usuário. Abaixo de 1121px vale o padding lateral do .container. */
@media (min-width: 1121px) {
    .labh-bar__inner {
        padding-inline: 0;
    }
}

.labh-bar__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.labh-bar__logo-img {
    height: 84px;
    width: auto;
    display: block;
}

/* Contatos: ícone circular + rótulo sobre valor */
.labh-contacts {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.labh-contact {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 8px;
    border-radius: var(--radius-pill);
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

.labh-contact:hover,
.labh-contact:focus-visible {
    background: var(--gray-light);
}

.labh-contact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gray-light);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 1rem;
    transition: var(--transition);
}

.labh-contact:hover .labh-contact__icon {
    background: var(--primary);
    color: var(--white);
}

.labh-contact__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.labh-contact__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gray-medium);
}

.labh-contact__value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

/* Ações à direita */
.labh-bar__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.labh-whats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #25d366;
    color: var(--white);
    font-size: 1.35rem;
    text-decoration: none;
    box-shadow: 0 6px 16px -6px rgba(37, 211, 102, 0.9);
    transition: var(--transition);
}

.labh-whats:hover,
.labh-whats:focus-visible {
    transform: translateY(-2px) scale(1.05);
}

.labh-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: var(--accent);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-radius: var(--radius-pill);
    color: var(--white);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 20px -8px var(--accent);
    transition: var(--transition);
}

.labh-cta:hover,
.labh-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px var(--accent);
}

.labh-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 11px;
    background: var(--gray-light);
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.labh-hamburger__line {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
    transition: var(--transition);
}

/* ---------- Barra de navegação ---------- */
.labh-navbar {
    background: var(--white);
    border-top: 1px solid var(--gray-light);
}

.labh-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    list-style: none;
}

.labh-nav__item {
    position: relative;
}

/* Régua compacta (padding 14→8px, letter-spacing 0.4→0.2px, gap da lista
   4→2px): o primeiro nível do menu passou de 8 para 10 itens e, no
   espaçamento antigo, a régua media 1225px — não cabia nem em 1440px, porque
   a faixa útil trava nos 1200px do container (max-width 1280 menos 40px de
   cada lado), por maior que seja a tela. Assim ela mede 1106px, com 94px de
   folga. O que encolhe é o ESPAÇAMENTO; o corpo da fonte segue 0.82rem.
   `white-space: nowrap` porque, sem ele, o flex quebrava o rótulo de dois ou
   três itens em duas linhas e desalinhava a barra inteira.
   O ::after acompanha o mesmo recuo. */
.labh-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 8px;
    white-space: nowrap;
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    position: relative;
    transition: var(--transition);
}

/* Traço animado sob o item */
.labh-nav__link::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition);
}

.labh-nav__link:hover,
.labh-nav__link:focus-visible {
    color: var(--primary);
    background: var(--gray-light);
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.labh-nav__link:hover::after,
.labh-nav__link:focus-visible::after,
.labh-nav__toggle[aria-expanded="true"]::after {
    transform: scaleX(1);
}

/* Submenus (dropdown) */
.labh-nav__caret {
    font-size: 0.62rem;
    transition: var(--transition);
}

.labh-nav__item--has-sub:hover .labh-nav__caret,
.labh-nav__toggle[aria-expanded="true"] .labh-nav__caret {
    transform: rotate(180deg);
}

.labh-nav__submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1100;
    min-width: 258px;
    padding: 10px;
    list-style: none;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
}

.labh-nav__submenu--right {
    left: auto;
    right: 0;
}

.labh-nav__item--has-sub:hover .labh-nav__submenu,
.labh-nav__item--has-sub:focus-within .labh-nav__submenu,
.labh-nav__toggle[aria-expanded="true"] + .labh-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.labh-nav__sublink {
    display: block;
    padding: 11px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

.labh-nav__sublink:hover,
.labh-nav__sublink:focus-visible {
    background: var(--gray-light);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
    transform: translateX(4px);
}

/* Item "split" (v10.33.0 — Seja Parceiro): o rótulo é LINK para o hub e o
   caret é um botão à parte, que abre o submenu no clique/teclado. O hover e o
   :focus-within do item continuam abrindo o dropdown como nos demais.
   O link perde o recuo da direita para o caret colar nele e o botão tem 16px:
   medida em 1121px (v10.33.0), a régua passou de 1004px para 1019px dos
   1026px úteis — ver o corte de 1120px. Item novo no 1º nível NÃO cabe. */
.labh-nav__item--split {
    display: flex;
    align-items: center;
}

.labh-nav__link--split {
    padding-right: 2px;
}

.labh-nav__link--split::after {
    right: 2px;
}

.labh-nav__toggle--split {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    transition: var(--transition);
}

.labh-nav__toggle--split:hover,
.labh-nav__toggle--split:focus-visible,
.labh-nav__toggle--split[aria-expanded="true"] {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.labh-nav__toggle--split:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* ---------- Menu mobile ---------- */
.labh-mobile {
    position: fixed;
    inset: 0;
    z-index: 1200;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition);
}

.labh-mobile.is-open {
    visibility: visible;
    opacity: 1;
}

.labh-mobile__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.labh-mobile__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88%);
    background: var(--white);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: var(--transition);
}

.labh-mobile.is-open .labh-mobile__panel {
    transform: translateX(0);
}

.labh-mobile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-light);
}

.labh-mobile__logo {
    height: 42px;
    width: auto;
}

.labh-mobile__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--gray-light);
    border: none;
    border-radius: 12px;
    color: var(--primary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
}

.labh-mobile__close:hover,
.labh-mobile__close:focus-visible {
    background: var(--primary);
    color: var(--white);
}

.labh-mobile__nav {
    flex: 1;
    overflow-y: auto;
}

.labh-mobile__list {
    list-style: none;
}

.labh-mobile__link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--gray-light);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-align: left;
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

.labh-mobile__link i {
    color: var(--primary);
    width: 20px;
    text-align: center;
}

.labh-mobile__link:hover,
.labh-mobile__link:focus-visible {
    background: var(--gray-light);
    color: var(--primary);
}

/* Acordeão dos submenus (abre/fecha via classe do JS) */
.labh-mobile__caret {
    margin-left: auto;
    font-size: 0.7rem;
    transition: var(--transition);
}

.labh-mobile__toggle[aria-expanded="true"] {
    color: var(--primary);
}

.labh-mobile__toggle[aria-expanded="true"] .labh-mobile__caret {
    transform: rotate(180deg);
}

/* Item "split" no mobile: link para o hub + botão do acordeão ao lado */
.labh-mobile__split {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--gray-light);
}

.labh-mobile__link--split {
    flex: 1 1 auto;
    width: auto;
    border-bottom: none;
}

.labh-mobile__toggle--split {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid var(--gray-light);
    cursor: pointer;
    color: var(--text);
}

.labh-mobile__toggle--split .labh-mobile__caret {
    margin-left: 0;
}

.labh-mobile__toggle--split:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.labh-mobile__sublist {
    display: none;
    list-style: none;
    background: var(--gray-light);
}

.labh-mobile__sublist.is-open {
    display: block;
}

.labh-mobile__sublink {
    display: block;
    padding: 12px 20px 12px 52px;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--gray-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--white);
    transition: var(--transition);
}

.labh-mobile__sublink:hover,
.labh-mobile__sublink:focus-visible {
    color: var(--primary);
    padding-left: 58px;
}

.labh-mobile__footer {
    padding: 20px;
    border-top: 1px solid var(--gray-light);
}

.labh-cta--mobile {
    width: 100%;
    justify-content: center;
}

.labh-mobile__contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.labh-mobile__contact a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-medium);
    font-size: 0.88rem;
    text-decoration: none;
}

.labh-mobile__contact a i {
    color: var(--primary);
}

/* Trava de scroll do body com menu mobile aberto (aplicada via JS) */
body.labh-no-scroll {
    overflow: hidden;
}

/* ---------- Responsive — labh ----------
   Corte em 1260px (era 1200): com a régua base (1106px) o menu cabe até aqui,
   mas abaixo de 1261px a faixa útil acompanha a tela e encolhe junto. Só a
   partir deste ponto o corpo da fonte cede (0.82 → 0.78rem), junto com o
   resto do espaçamento: a régua cai para 1004px e cabe nos 1026px
   disponíveis em 1121px, o primeiro pixel em que a barra ainda aparece
   (abaixo disso é hambúrguer — ver o bloco de 1120px).
   Item novo no primeiro nível: remedir nas duas pontas, 1261px e 1121px. */
@media (max-width: 1260px) {

    .labh-nav__link {
        padding: 10px 6px;
        letter-spacing: 0;
        font-size: 0.78rem;
    }

    /* O traço acompanha o padding apertado, senão fica mais curto que o texto */
    .labh-nav__link::after {
        left: 6px;
        right: 6px;
    }

    .labh-contact__value {
        font-size: 0.85rem;
    }
}

/* A barra vira hambúrguer em 1120px (era 1024px): com 10 itens no primeiro
   nível a régua apertada mede 1004px e só cabe a partir de ~1100px de
   viewport. Antecipar o corte é preferível a espremer mais o espaçamento ou
   a reduzir o corpo da fonte — e a faixa cedida (1025–1120px) não é a de
   nenhum dispositivo comum: tablet deitado é 1024px, que já caía aqui. O
   menu mobile entrega os mesmos 10 itens com os submenus abertos.
   Item novo no primeiro nível: remedir a régua em 1121px. */
@media (max-width: 1120px) {

    .labh-navbar {
        display: none;
    }

    .labh-hamburger {
        display: flex;
    }

    .labh-bar__inner {
        padding-block: 14px;
    }
}

@media (max-width: 860px) {

    .labh-contacts {
        display: none;
    }
}

@media (max-width: 768px) {

    .labh-bar__logo-img {
        height: 46px;
    }

    .labh-cta span {
        display: none;
    }

    .labh-cta {
        padding: 14px 16px;
    }
}
/* ************************************************************
   LAB HERO — Faixa principal da home do laboratório
   Arquivo: resources/components/heroes/lab-hero.inc.php
   ************************************************************ */
.labhero {
    position: relative;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    padding: 90px 0;
    overflow: hidden;
}

.labhero__inner {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
}

.labhero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.labhero__title {
    font-family: var(--font-title);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    margin: 20px 0 16px;
}

.labhero__subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 560px;
}

.labhero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

.labhero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labhero__cta--primary {
    background: var(--accent);
    color: var(--white);
}

.labhero__cta--primary:hover,
.labhero__cta--primary:focus-visible {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.labhero__cta--secondary {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: var(--white);
}

.labhero__cta--secondary:hover,
.labhero__cta--secondary:focus-visible {
    background: var(--white);
    color: var(--primary);
}

.labhero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 36px;
    list-style: none;
}

.labhero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.labhero__trust-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.labhero__art {
    position: relative;
    height: 320px;
}

.labhero__art-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.labhero__art-circle--lg {
    width: 300px;
    height: 300px;
    top: 10px;
    right: 20px;
}

.labhero__art-circle--sm {
    width: 140px;
    height: 140px;
    bottom: 0;
    right: 260px;
    background: rgba(255, 255, 255, 0.12);
}

.labhero__art-icon {
    position: absolute;
    top: 50%;
    right: 110px;
    transform: translateY(-50%);
    font-size: 120px;
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive — labhero */
@media (max-width: 1024px) {

    .labhero {
        padding: 70px 0;
    }

    .labhero__inner {
        grid-template-columns: 1fr;
    }

    .labhero__art {
        display: none;
    }
}

@media (max-width: 768px) {

    .labhero__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .labhero__cta {
        justify-content: center;
    }

    .labhero__trust {
        gap: 14px;
    }
}


/* ************************************************************
   LAB EXAMES — Grid de categorias de exames
   Arquivo: resources/components/sections/lab-exames.inc.php
   ************************************************************ */
.labex {
    padding: 90px 0;
    background: var(--white);
}

.labex__head {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.labex__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    color: var(--primary);
    position: relative;
    padding-bottom: 16px;
}

.labex__title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
}

.labex__subtitle {
    margin-top: 18px;
    color: var(--gray-medium);
    line-height: 1.6;
}

.labex__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.labex__card {
    background: var(--white);
    border: 1px solid #e9ecef;
    border-radius: var(--radius);
    padding: 32px 28px;
    transition: var(--transition);
}

.labex__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.labex__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(26, 58, 107, 0.08);
    border-radius: var(--radius);
    color: var(--primary);
    font-size: 1.6rem;
    margin-bottom: 20px;
    transition: var(--transition);
}

.labex__card:hover .labex__card-icon {
    background: var(--primary);
    color: var(--white);
}

.labex__card-title {
    font-family: var(--font-title);
    font-size: 1.15rem;
    color: var(--gray-dark);
    margin-bottom: 10px;
}

.labex__card-desc {
    font-size: 0.95rem;
    color: var(--gray-medium);
    line-height: 1.6;
}

/* Responsive — labex */
@media (max-width: 1024px) {

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

@media (max-width: 768px) {

    .labex {
        padding: 60px 0;
    }

    .labex__title {
        font-size: 1.7rem;
    }

    .labex__grid {
        grid-template-columns: 1fr;
    }
}


/* ************************************************************
   LAB DIFERENCIAIS — Por que escolher o laboratório
   Arquivo: resources/components/sections/lab-diferenciais.inc.php
   ************************************************************ */
.labdif {
    padding: 90px 0;
    background: var(--gray-light);
}

.labdif__head {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.labdif__title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    color: var(--primary);
    position: relative;
    padding-bottom: 16px;
}

.labdif__title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
}

.labdif__subtitle {
    margin-top: 18px;
    color: var(--gray-medium);
    line-height: 1.6;
}

.labdif__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Exatamente 3 itens (benefícios da /trabalhe-conosco): em duas colunas o
   terceiro cartão sobraria sozinho na linha de baixo. Com 4 itens — o caso da
   home — a regra não casa e o grid segue 2×2. */
.labdif__grid:has(> .labdif__item:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
}

.labdif__item {
    display: flex;
    gap: 20px;
    background: var(--white);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.labdif__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.labdif__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--primary);
    border-radius: 50%;
    color: var(--white);
    font-size: 1.3rem;
}

.labdif__item-title {
    font-family: var(--font-title);
    font-size: 1.1rem;
    color: var(--gray-dark);
    margin-bottom: 8px;
}

.labdif__item-desc {
    font-size: 0.95rem;
    color: var(--gray-medium);
    line-height: 1.6;
}

/* Responsive — labdif */
@media (max-width: 768px) {

    .labdif {
        padding: 60px 0;
    }

    .labdif__title {
        font-size: 1.7rem;
    }

    /* O seletor com :has() tem especificidade maior que .labdif__grid e
       venceria aqui dentro também — por isso ele é repetido no mobile. */
    .labdif__grid,
    .labdif__grid:has(> .labdif__item:nth-child(3):last-child) {
        grid-template-columns: 1fr;
    }
}


/* ************************************************************
   LAB CONVÊNIOS — Grade com as logos dos planos atendidos
   Arquivo: resources/components/sections/lab-convenios.inc.php
   ************************************************************ */
.labconv {
    padding: 90px 0;
    background: var(--white);
}

.labconv__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 36px;
}

.labconv__head-text {
    max-width: 640px;
}

.labconv__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background: var(--gray-light);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labconv__eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.labconv__title {
    margin-top: 18px;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.2;
    color: var(--primary);
}

.labconv__subtitle {
    margin-top: 14px;
    color: var(--gray-medium);
    font-size: 1rem;
}

.labconv__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid #e3e8ea;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.84rem;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.labconv__all i {
    font-size: 0.78rem;
    transition: var(--transition);
}

.labconv__all:hover,
.labconv__all:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.labconv__all:hover i,
.labconv__all:focus-visible i {
    transform: translateX(4px);
}

/* Grade de ladrilhos (v10.38.8): flex com a última linha CENTRALIZADA —
   6 por linha no desktop (18 planos = 3 linhas cheias) e, com outra
   quantidade, a sobra fica no meio em vez de encostada à esquerda. */
.labconv__grid {
    --labconv-gap: 16px;
    --labconv-cols: 6;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--labconv-gap);
    list-style: none;
}

.labconv__item {
    display: flex;
    flex: 0 0 calc((100% - (var(--labconv-cols) - 1) * var(--labconv-gap)) / var(--labconv-cols));
    min-width: 0;
}

.labconv__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 132px;
    padding: 16px;
    border: 1px solid #eceff1;
    border: 1px solid color-mix(in srgb, var(--primary) 9%, transparent);
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px -12px rgba(15, 23, 42, 0.18);
    transition: var(--transition);
}

.labconv__tile:hover {
    background: var(--white);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    transform: translateY(-4px);
    box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.45);
}

.labconv__logo {
    max-width: 100%;
    max-height: 108px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* As logos vêm do cliente como quadrados com fundo BRANCO embutido;
       multiply faz esse branco desaparecer no ladrilho, sem recorte manual. */
    mix-blend-mode: multiply;
    transition: var(--transition);
}

.labconv__tile:hover .labconv__logo {
    transform: scale(1.06);
}

/* Ladrilho de texto — convênio ainda sem logo */
.labconv__name {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: center;
    color: var(--primary);
}

/* Aviso em texto corrido acima da faixa da nota (campo `notice`, v10.38.24) */
.labconv__notice {
    max-width: 760px;
    margin: 32px auto 0;
    color: var(--gray-medium);
    font-size: 1rem;
    line-height: 1.55;
    text-align: center;
}

.labconv__notice + .labconv__note {
    margin-top: 14px;
}

/* notesPlacement = 'topo': as duas notas sob o título, alinhadas à esquerda
   como o resto do cabeçalho; a faixa encolhe ao tamanho do texto. Escopadas
   em .labconv__head porque as regras-base vêm DEPOIS no arquivo. */
.labconv__head .labconv__notice--head {
    margin: 14px 0 0;
    text-align: left;
}

.labconv__head .labconv__note--head {
    width: fit-content;
    max-width: 100%;
    margin: 14px 0 0;
    text-align: left;
}

/* Nota "exames particulares" em destaque (v10.38.8): faixa com ícone, no
   lugar do texto solto. Ícone em posição absoluta — o texto corre inteiro. */
.labconv__note {
    position: relative;
    max-width: 760px;
    margin: 32px auto 0;
    padding: 14px 20px 14px 52px;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 5%, var(--white));
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.55;
    text-align: center;
}

.labconv__note::before {
    content: "\f3d1";
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: var(--accent);
    font-family: 'Font Awesome 6 Free';
    font-size: 1.05rem;
    font-weight: 900;
}

/* Asterisco do título + ressalva correspondente (campo `footnote`) */
.labconv__mark {
    margin-left: 2px;
    color: var(--accent);
}

/* Ressalva com DESTAQUE (pedido do cliente): negrito, cor da marca e corpo
   maior que a nota de "exames particulares" logo acima. */
.labconv__footnote {
    margin-top: 10px;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}

.labconv__footnote .labconv__mark {
    margin: 0 2px 0 0;
}

.labconv__note + .labconv__footnote {
    margin-top: 10px;
}

.labconv__grid + .labconv__footnote {
    margin-top: 28px;
}

/* Responsive — labconv */
@media (max-width: 1100px) {

    .labconv__grid {
        --labconv-cols: 4;
    }
}

@media (max-width: 860px) {

    .labconv__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .labconv__grid {
        --labconv-cols: 3;
    }
}

@media (max-width: 768px) {

    .labconv {
        padding: 60px 0;
    }

    .labconv__tile {
        min-height: 110px;
        padding: 12px;
        border-radius: 14px;
    }

    .labconv__logo {
        max-height: 84px;
    }
}

@media (max-width: 480px) {

    /* 3 por linha no celular: 18 planos = 6 linhas (com 2 eram 9) */
    .labconv__grid {
        --labconv-cols: 3;
        --labconv-gap: 10px;
    }

    .labconv__tile {
        min-height: 88px;
        padding: 10px;
        border-radius: 12px;
    }

    .labconv__logo {
        max-height: 60px;
    }

    .labconv__name {
        font-size: 0.8rem;
    }

    .labconv__note {
        padding: 12px 16px 12px 44px;
        font-size: 0.9rem;
        text-align: left;
    }

    .labconv__note::before {
        left: 16px;
    }
}


/* ************************************************************
   LAB RESULTADOS — Faixa de acesso aos laudos
   Arquivo: resources/components/sections/lab-resultados.inc.php
   ************************************************************ */
.labres {
    padding: 70px 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

.labres__inner {
    display: flex;
    align-items: center;
    gap: 32px;
}

.labres__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    font-size: 2.4rem;
}

.labres__content {
    flex: 1;
}

.labres__title {
    font-family: var(--font-title);
    font-size: 1.8rem;
}

.labres__subtitle {
    margin-top: 10px;
    opacity: 0.9;
    line-height: 1.6;
}

.labres__note {
    margin-top: 8px;
    font-size: 0.85rem;
    font-style: italic;
    opacity: 0.75;
}

.labres__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 14px 26px;
    background: var(--accent);
    border-radius: var(--radius-pill);
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labres__cta:hover,
.labres__cta:focus-visible {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Responsive — labres */
@media (max-width: 768px) {

    .labres__inner {
        flex-direction: column;
        text-align: center;
    }
}


/* ************************************************************
   LAB FOOTER — Footer do vertical laboratório
   Arquivo: resources/components/footers/lab-footer.inc.php

   Redesenhado na v10.26.0: cinco colunas (marca, institucional, serviços,
   especialidades, cidades), faixa de contato acima e barra legal embaixo.
   As duas últimas colunas vêm do banco e podem não existir — por isso a grade
   usa `auto-fit` e não uma contagem fixa de colunas: com três, as três ocupam
   a largura toda em vez de deixarem um vão à direita.
   ************************************************************ */
.labft {
    position: relative;
    background: var(--primary);
    color: rgba(255, 255, 255, 0.78);

    --labft-line: rgba(255, 255, 255, 0.14);
    --labft-wa: #25d366;
}

/* Trama sutil no topo, para o rodapé não colar como um bloco chapado. */
.labft::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

/* ---------- Faixa de contato ---------- */
.labft__faixa {
    background: rgba(0, 0, 0, 0.16);
    border-bottom: 1px solid var(--labft-line);
}

.labft__faixa-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.labft__faixa-titulo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--white);
}

.labft__faixa-titulo i {
    color: #9fe8c3;
}

.labft__faixa-canais {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.labft__canal {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 10px 10px;
    border: 1px solid var(--labft-line);
    border-radius: var(--radius-pill);
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
}

.labft__canal:hover,
.labft__canal:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.labft__canal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.95rem;
}

.labft__canal--wa .labft__canal-icon {
    background: var(--labft-wa);
    color: var(--white);
}

.labft__canal-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.labft__canal-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.labft__canal-valor {
    font-size: 0.92rem;
    font-weight: 700;
}

/* ---------- Corpo ---------- */
.labft__main {
    padding: 58px 0 44px;
}

/* A CONTAGEM DE COLUNAS VEM DO PHP (labft__grid--3/4/5), e não de `auto-fit`.
   Com auto-fit + `span 2` na coluna da marca, o navegador criava cinco trilhas
   em 1280px, a marca ocupava duas e a quinta coluna caía sozinha numa segunda
   fileira — deixando um vão à direita na primeira. Aqui cada arranjo possível
   tem a sua própria proporção e nada quebra linha. */
.labft__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr 1.2fr;
    gap: 36px 28px;
}

/* Sem o módulo de especialidades e/ou de unidades, o rodapé encolhe para 4 ou
   3 colunas em vez de esticar as que sobraram. */
.labft__grid--3 {
    grid-template-columns: 1.7fr 1fr 1fr;
}

.labft__grid--4 {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
}

.labft__col--marca {
    max-width: 420px;
}

.labft__logo {
    display: inline-block;
    margin-bottom: 18px;
}

.labft__logo-img {
    display: block;
    height: 58px;
    width: auto;
    max-width: 100%;
    filter: brightness(0) invert(1);
}

.labft__about {
    margin: 0 0 22px;
    font-size: 0.92rem;
    line-height: 1.7;
}

/* ---------- Números da rede ---------- */
.labft__numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.labft__numeros li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    border: 1px solid var(--labft-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.labft__numeros strong {
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--white);
}

.labft__numeros span {
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.66);
}

/* ---------- Social ---------- */
.labft__social-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.labft__social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.labft__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--labft-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: var(--white);
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--transition);
}

.labft__social-link:hover,
.labft__social-link:focus-visible {
    background: var(--white);
    border-color: var(--white);
    color: var(--primary);
    transform: translateY(-3px);
}

.labft__social-link--wa:hover,
.labft__social-link--wa:focus-visible {
    background: var(--labft-wa);
    border-color: var(--labft-wa);
    color: var(--white);
}

/* ---------- Colunas de links ---------- */
.labft__heading {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 12px;
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--white);
}

.labft__heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.labft__links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.labft__links li {
    margin-bottom: 9px;
}

.labft__links a {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: var(--transition);
}

.labft__links a:hover,
.labft__links a:focus-visible {
    color: var(--white);
    transform: translateX(3px);
}

.labft__externo {
    font-size: 0.66rem;
    opacity: 0.7;
}

.labft__todos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.83rem;
    font-weight: 700;
    color: #9fe8c3;
    text-decoration: none;
    transition: var(--transition);
}

.labft__todos:hover,
.labft__todos:focus-visible {
    gap: 12px;
    color: var(--white);
}

/* ---------- Contador de unidades por cidade ----------
   Só aparece na cidade com mais de uma unidade, então é informação e não
   decoração: distingue Santo Antônio de Jesus (5) de uma cidade com uma só. */
.labft__cidade-num {
    margin-left: 5px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--white);
}

/* ---------- Endereço da sede ---------- */
.labft__sede {
    display: flex;
    gap: 12px;
    margin: 40px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--labft-line);
    font-size: 0.88rem;
    line-height: 1.6;
}

.labft__sede i {
    margin-top: 3px;
    flex-shrink: 0;
    color: #9fe8c3;
}

.labft__sede strong {
    color: var(--white);
}

/* ---------- Barra inferior ---------- */
.labft__bottom {
    background: rgba(0, 0, 0, 0.22);
    border-top: 1px solid var(--labft-line);
}

.labft__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.labft__copyright {
    margin: 0;
    font-size: 0.82rem;
}

.labft__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.labft__legal a {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.labft__legal a:hover,
.labft__legal a:focus-visible {
    color: var(--white);
    text-decoration: underline;
}

.labft__dev {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: var(--transition);
}

.labft__dev:hover,
.labft__dev:focus-visible {
    color: var(--white);
}

.labft__dev img {
    height: 20px;
    width: auto;
}

/* ---------- Responsive — labft ---------- */
@media (max-width: 1100px) {

    /* A marca sobe para uma fileira própria, de largura cheia, e as colunas de
       links dividem a de baixo — cinco colunas em 1000px espremem os nomes de
       especialidade em duas linhas cada. */
    .labft__grid,
    .labft__grid--3,
    .labft__grid--4 {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .labft__col--marca {
        grid-column: 1 / -1;
        max-width: none;
    }
}

@media (max-width: 860px) {

    .labft__grid,
    .labft__grid--3,
    .labft__grid--4 {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 30px 24px;
    }

    .labft__faixa-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .labft__faixa-canais {
        width: 100%;
    }

    .labft__canal {
        flex: 1 1 220px;
    }
}

@media (max-width: 768px) {

    .labft__main {
        padding: 44px 0 34px;
    }

    .labft__grid,
    .labft__grid--3,
    .labft__grid--4 {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .labft__col--marca {
        grid-column: auto;
    }

    .labft__canal {
        flex: 1 1 100%;
    }

    .labft__bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    .labft__legal {
        justify-content: center;
    }
}

/* ************************************************************
   LAB SERVIÇOS — Grade de atalhos de serviços do laboratório
   Arquivo: resources/components/sections/lab-servicos.inc.php
   ************************************************************ */
.labsrv {
    padding: 90px 0;
    background: var(--gray-light);
}

.labsrv__head {
    max-width: 720px;
    margin: 0 auto 46px;
    text-align: center;
}

.labsrv__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background: var(--white);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labsrv__eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.labsrv__title {
    margin-top: 18px;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.2;
    color: var(--primary);
}

.labsrv__subtitle {
    margin-top: 14px;
    color: var(--gray-medium);
    font-size: 1rem;
}

.labsrv__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
}

.labsrv__cell {
    display: flex;
}

/* Card "Labocliv Imagem": paleta própria da marca de imagem (#212121).
   Redefine as variáveis SÓ dentro da célula — ícone, fio superior, borda,
   nome no hover e traço de "ir" herdam a cor sem regra duplicada. O
   modificador vem do href do card (ver lab-servicos.inc.php). */
.labsrv__cell--labocliv-imagem {
    --primary: #212121;
    --accent: #212121;
}

.labsrv__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    padding: 30px 26px;
    overflow: hidden;
    border: 1px solid #e9edf0;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 20px;
    background: var(--white);
    text-decoration: none;
    transition: var(--transition);
}

/* Fio superior que corre da esquerda para a direita no hover */
.labsrv__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition);
}

.labsrv__card:hover,
.labsrv__card:focus-visible {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 20px 38px -20px rgba(0, 0, 0, 0.45);
}

.labsrv__card:hover::before,
.labsrv__card:focus-visible::before {
    transform: scaleX(1);
}

.labsrv__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: var(--gray-light);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    color: var(--primary);
    font-size: 1.4rem;
    transition: var(--transition);
}

.labsrv__card:hover .labsrv__icon,
.labsrv__card:focus-visible .labsrv__icon {
    background: var(--primary);
    color: var(--white);
    transform: rotate(-6deg) scale(1.06);
}

.labsrv__name {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--text);
    transition: var(--transition);
}

.labsrv__card:hover .labsrv__name,
.labsrv__card:focus-visible .labsrv__name {
    color: var(--primary);
}

.labsrv__go {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    color: var(--accent);
    font-size: 0.78rem;
}

.labsrv__go-line {
    display: block;
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
    transition: var(--transition);
}

.labsrv__card:hover .labsrv__go-line,
.labsrv__card:focus-visible .labsrv__go-line {
    width: 46px;
    background: var(--accent);
}

.labsrv__go i {
    opacity: 0;
    transform: translateX(-8px);
    transition: var(--transition);
}

.labsrv__card:hover .labsrv__go i,
.labsrv__card:focus-visible .labsrv__go i {
    opacity: 1;
    transform: translateX(0);
}

/* Responsive — labsrv */
@media (max-width: 1100px) {

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

@media (max-width: 768px) {

    .labsrv {
        padding: 60px 0;
    }

    .labsrv__head {
        margin-bottom: 34px;
    }

    .labsrv__card {
        padding: 22px 18px;
        gap: 14px;
        border-radius: 16px;
    }

    .labsrv__icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: 1.2rem;
    }

    .labsrv__name {
        font-size: 0.9rem;
    }
}

@media (max-width: 560px) {

    .labsrv__grid {
        gap: 12px;
    }

    .labsrv__card {
        padding: 18px 16px;
    }
}

/* Só em telas muito estreitas os atalhos viram coluna única */
@media (max-width: 359px) {

    .labsrv__grid {
        grid-template-columns: 1fr;
    }
}


/* ************************************************************
   LAB UNIDADES — Carrossel das unidades da rede
   Arquivo: resources/components/sections/lab-unidades.inc.php
   ************************************************************ */
.labund {
    padding: 90px 0;
    background: var(--white);
    overflow: hidden;
}

.labund__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.labund__head-text {
    max-width: 620px;
}

.labund__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background: var(--gray-light);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labund__eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.labund__title {
    margin-top: 18px;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.2;
    color: var(--primary);
}

.labund__subtitle {
    margin-top: 14px;
    color: var(--gray-medium);
    font-size: 1rem;
}

.labund__controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.labund__count {
    margin-right: 6px;
    color: var(--gray-medium);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.labund__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #e3e8ea;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
}

.labund__nav:hover:not(:disabled),
.labund__nav:focus-visible:not(:disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
}

.labund__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Trilho com rolagem por encaixe (swipe nativo no touch) */
.labund__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* respiro para a sombra dos cards não ser cortada */
    padding: 6px 0 18px;
    margin: -6px 0 0;
}

.labund__viewport::-webkit-scrollbar {
    display: none;
}

.labund__viewport:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 4px;
    border-radius: 24px;
}

.labund__track {
    display: flex;
    gap: 22px;
    list-style: none;
}

.labund__slide {
    flex: 0 0 clamp(240px, 26%, 320px);
    scroll-snap-align: start;
}

.labund__card {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: var(--primary);
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.55);
    text-decoration: none;
    transition: var(--transition);
}

.labund__card:hover,
.labund__card:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 26px 46px -22px rgba(0, 0, 0, 0.6);
}

.labund__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.labund__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.labund__card:hover .labund__photo,
.labund__card:focus-visible .labund__photo {
    transform: scale(1.07);
}

/* Ladrilho da marca quando ainda não há foto da unidade */
.labund__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    font-size: 2.6rem;
    opacity: 0.9;
}

.labund__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.72) 100%);
    transition: var(--transition);
}

.labund__card:hover .labund__scrim,
.labund__card:focus-visible .labund__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.82) 100%);
}

.labund__label {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: var(--transition);
}

.labund__card:hover .labund__label,
.labund__card:focus-visible .labund__label {
    background: var(--accent);
    background: color-mix(in srgb, var(--accent) 88%, transparent);
    border-color: transparent;
}

.labund__name {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--white);
}

.labund__city {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

/* Barra de progresso do carrossel */
.labund__progress {
    position: relative;
    height: 4px;
    margin-top: 6px;
    border-radius: 4px;
    background: var(--gray-light);
    overflow: hidden;
}

.labund__progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: transform 0.25s ease-out;
}

/* Responsive — labund */
@media (max-width: 1024px) {

    .labund__slide {
        flex-basis: clamp(230px, 40%, 300px);
    }
}

@media (max-width: 768px) {

    .labund {
        padding: 60px 0;
    }

    .labund__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        margin-bottom: 28px;
    }

    .labund__slide {
        flex-basis: 76%;
    }

    .labund__track {
        gap: 16px;
    }
}


/* ************************************************************
   LAB ÂNCORAS — respiro ao saltar por link do menu
   Com o header NÃO fixo não é preciso compensar altura de header;
   fica só uma folga para o título não colar no topo da janela.
   ************************************************************ */
#servicos,
#unidades,
#exames,
#diferenciais,
#convenios,
#resultados,
#contato {
    scroll-margin-top: 24px;
}


/* ************************************************************
   LAB NOTÍCIAS — Últimas publicações do blog
   Arquivo: resources/components/sections/lab-noticias.inc.php
   ************************************************************ */
.labnews {
    padding: 90px 0;
    background: var(--gray-light);
}

.labnews__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.labnews__head-text {
    max-width: 640px;
}

.labnews__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background: var(--white);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labnews__eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.labnews__title {
    margin-top: 18px;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.2;
    color: var(--primary);
}

.labnews__subtitle {
    margin-top: 14px;
    color: var(--gray-medium);
    font-size: 1rem;
}

.labnews__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.84rem;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.labnews__all:hover,
.labnews__all:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.labnews__all:hover i,
.labnews__all:focus-visible i {
    transform: translateX(4px);
}

.labnews__all i {
    font-size: 0.78rem;
    transition: var(--transition);
}

/* Grade — acompanha a quantidade de posts sem quebrar */
.labnews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
    list-style: none;
}

.labnews__item {
    display: flex;
}

.labnews__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--white);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 28px -20px rgba(0, 0, 0, 0.5);
    transition: var(--transition);
}

.labnews__card:hover,
.labnews__card:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 26px 46px -24px rgba(0, 0, 0, 0.55);
}

.labnews__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--primary);
}

.labnews__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.labnews__card:hover .labnews__cover,
.labnews__card:focus-within .labnews__cover {
    transform: scale(1.07);
}

/* Ladrilho da marca quando o post ainda não tem capa */
.labnews__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    font-size: 2.4rem;
    opacity: 0.9;
}

/* Selo de data flutuando sobre a capa */
.labnews__date {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6);
}

.labnews__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    padding: 24px 24px 26px;
}

.labnews__tag {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-hover);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.labnews__post-title {
    font-family: var(--font-title);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    transition: var(--transition);
}

.labnews__link {
    color: inherit;
    text-decoration: none;
}

.labnews__card:hover .labnews__post-title,
.labnews__card:focus-within .labnews__post-title {
    color: var(--primary);
}

.labnews__excerpt {
    color: var(--gray-medium);
    font-size: 0.92rem;
    line-height: 1.6;
    /* corta em 3 linhas para os cards ficarem alinhados */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.labnews__more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.labnews__more i {
    font-size: 0.75rem;
    transition: var(--transition);
}

.labnews__card:hover .labnews__more i,
.labnews__card:focus-within .labnews__more i {
    transform: translateX(5px);
}

/* Responsive — labnews */
@media (max-width: 860px) {

    .labnews__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

@media (max-width: 768px) {

    .labnews {
        padding: 60px 0;
    }

    .labnews__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .labnews__body {
        padding: 20px 20px 22px;
    }
}


/* ************************************************************
   LAB BANNER — Faixa de imagem única (campanha / cartão)
   Arquivo: resources/components/sections/lab-banner.inc.php
   ************************************************************ */
.labbanner {
    padding: 0 0 20px;
    background: var(--white);
}

.labbanner__frame {
    display: block;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.55);
    transition: var(--transition);
}

a.labbanner__frame:hover,
a.labbanner__frame:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -24px rgba(0, 0, 0, 0.6);
}

.labbanner__img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {

    .labbanner__frame {
        border-radius: 14px;
    }

    /* A peça é 4,8:1 (feita para desktop): inteira no celular ela cairia
       para ~70px de altura e o texto ficaria ilegível. Recorta pela
       esquerda, onde estão o título, a marca e o telefone. */
    .labbanner__img {
        height: 150px;
        object-fit: cover;
        object-position: left center;
    }
}


/* ************************************************************
   LAB PAGE HERO — Faixa de título das páginas internas
   Arquivo: resources/components/heroes/lab-page-hero.inc.php
   ************************************************************ */
.labph {
    position: relative;
    padding: 62px 0 56px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    overflow: hidden;
}

/* Bolha decorativa discreta, no espírito do hero da home */
.labph::after {
    content: '';
    position: absolute;
    right: -80px;
    top: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.labph__inner {
    position: relative;
    z-index: 1;
}

.labph__crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.labph__crumb {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: var(--transition);
}

a.labph__crumb:hover,
a.labph__crumb:focus-visible {
    color: var(--white);
}

.labph__crumb-sep {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.labph__crumb--current {
    color: var(--white);
}

.labph__title {
    margin-top: 16px;
    font-family: var(--font-title);
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    line-height: 1.15;
}

.labph__subtitle {
    margin-top: 14px;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.02rem;
    line-height: 1.6;
}

@media (max-width: 768px) {

    .labph {
        padding: 44px 0 40px;
    }
}


/* ************************************************************
   LAB CANAIS — Cartões de contato + horários (página de contato)
   Arquivo: resources/components/sections/lab-canais.inc.php
   ************************************************************ */
.labcan {
    padding: 80px 0;
    background: var(--gray-light);
}

.labcan__head {
    max-width: 700px;
    margin: 0 auto 44px;
    text-align: center;
}

.labcan__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background: var(--white);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labcan__eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.labcan__title {
    margin-top: 18px;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.2;
    color: var(--primary);
}

.labcan__subtitle {
    margin-top: 14px;
    color: var(--gray-medium);
    font-size: 1rem;
}

.labcan__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    list-style: none;
}

.labcan__item {
    display: flex;
}

.labcan__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 30px 26px 34px;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 20px;
    background: var(--white);
    text-decoration: none;
    overflow: hidden;
    transition: var(--transition);
}

.labcan__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition);
}

.labcan__card:hover,
.labcan__card:focus-visible {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 20px 38px -20px rgba(0, 0, 0, 0.45);
}

.labcan__card:hover::before,
.labcan__card:focus-visible::before {
    transform: scaleX(1);
}

.labcan__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    color: var(--primary);
    font-size: 1.35rem;
    transition: var(--transition);
}

.labcan__card:hover .labcan__icon,
.labcan__card:focus-visible .labcan__icon {
    background: var(--primary);
    color: var(--white);
    transform: rotate(-6deg) scale(1.05);
}

.labcan__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gray-medium);
}

.labcan__value {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
    word-break: break-word;
}

.labcan__help {
    color: var(--gray-medium);
    font-size: 0.9rem;
    line-height: 1.55;
}

.labcan__go {
    position: absolute;
    right: 22px;
    bottom: 22px;
    color: var(--accent);
    font-size: 0.85rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: var(--transition);
}

.labcan__card:hover .labcan__go,
.labcan__card:focus-visible .labcan__go {
    opacity: 1;
    transform: translateX(0);
}

/* Painéis: horários e chat */
.labcan__extra {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.labcan__panel {
    padding: 30px 28px;
    border-radius: 20px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}

.labcan__panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-title);
    font-size: 1.08rem;
    color: var(--primary);
}

.labcan__panel-title i {
    color: var(--accent);
}

.labcan__panel-text {
    margin-top: 12px;
    color: var(--gray-medium);
    font-size: 0.94rem;
    line-height: 1.6;
}

.labcan__hours {
    margin-top: 18px;
    list-style: none;
}

.labcan__hours li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--gray-dark);
    font-size: 0.94rem;
}

.labcan__hours li:last-child {
    border-bottom: none;
}

.labcan__hours strong {
    color: var(--primary);
    white-space: nowrap;
}

.labcan__note {
    margin-top: 16px;
    color: var(--gray-medium);
    font-size: 0.86rem;
    font-style: italic;
    line-height: 1.55;
}

.labcan__chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 13px 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.labcan__chat-btn:hover,
.labcan__chat-btn:focus-visible {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px var(--primary);
}

@media (max-width: 768px) {

    .labcan {
        padding: 56px 0;
    }

    .labcan__head {
        margin-bottom: 30px;
    }

    .labcan__card {
        padding: 24px 20px 30px;
    }

    .labcan__panel {
        padding: 24px 20px;
    }
}


/* ************************************************************
   LAB FORM CONTATO — Formulário + barra lateral da página /contato
   Arquivo: resources/components/sections/lab-form-contato.inc.php
   ************************************************************ */
.labform {
    padding: 20px 0 80px;
    background: var(--gray-light);
}

.labform__layout {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 26px;
    align-items: start;
}

.labform__layout--solo {
    grid-template-columns: 1fr;
    max-width: 820px;
    margin: 0 auto;
}

.labform__main {
    padding: 36px 34px 34px;
    border-radius: 22px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
    box-shadow: 0 14px 30px -24px rgba(0, 0, 0, 0.5);
}

.labform__title {
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    color: var(--primary);
}

.labform__subtitle {
    margin-top: 10px;
    color: var(--gray-medium);
    font-size: 0.94rem;
    line-height: 1.6;
}

.labform__form {
    margin-top: 26px;
}

/* Honeypot — fora da tela, sem display:none (bots ignoram campos ocultos) */
.labform__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.labform__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.labform__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

.labform__field label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--gray-dark);
}

.labform__field label span {
    color: var(--accent);
}

.labform__field input,
.labform__field select,
.labform__field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #dfe5e8;
    border-radius: 12px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    transition: var(--transition);
}

.labform__field textarea {
    resize: vertical;
    min-height: 132px;
}

.labform__field input:focus,
.labform__field select:focus,
.labform__field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.labform__field input::placeholder,
.labform__field textarea::placeholder {
    color: #a9b4ba;
}

/* Estado de erro por campo */
.labform__field.is-invalid input,
.labform__field.is-invalid select,
.labform__field.is-invalid textarea {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.labform__error {
    display: none;
    color: var(--accent-hover);
    font-size: 0.8rem;
    font-weight: 600;
}

.labform__field.is-invalid .labform__error {
    display: block;
}

.labform__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.labform__submit {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 32px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.labform__submit:hover:not(:disabled),
.labform__submit:focus-visible:not(:disabled) {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px var(--primary);
}

.labform__submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.labform__legal {
    flex: 1;
    min-width: 220px;
    color: var(--gray-medium);
    font-size: 0.78rem;
    line-height: 1.5;
}

.labform__feedback {
    margin-top: 22px;
    padding: 15px 18px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border-left: 4px solid var(--primary);
}

.labform__feedback--error {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-hover);
    border-left-color: var(--accent);
}

/* ---------- Barra lateral ---------- */
.labform__aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.labform__box {
    padding: 26px 24px;
    border-radius: 20px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

.labform__box-title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-title);
    font-size: 1.02rem;
    color: var(--primary);
}

.labform__box-title i {
    color: var(--accent);
}

.labform__hours {
    margin-top: 16px;
    list-style: none;
}

.labform__hours li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    font-size: 0.88rem;
    color: var(--gray-dark);
}

.labform__hours strong {
    color: var(--primary);
    white-space: nowrap;
}

.labform__address {
    margin-top: 14px;
    color: var(--gray-dark);
    font-size: 0.9rem;
    line-height: 1.65;
}

.labform__address-extra {
    margin-top: 6px;
    color: var(--gray-medium);
    font-size: 0.85rem;
}

.labform__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.labform__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    color: var(--primary);
    font-size: 1.05rem;
    text-decoration: none;
    transition: var(--transition);
}

.labform__social:hover,
.labform__social:focus-visible {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
}

@media (max-width: 1024px) {

    .labform__layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .labform {
        padding: 12px 0 56px;
    }

    .labform__main {
        padding: 26px 20px 24px;
        border-radius: 18px;
    }

    .labform__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .labform__submit {
        width: 100%;
        justify-content: center;
    }
}


/* ************************************************************
   LAB TEXTO — Bloco de prosa institucional com imagem opcional
   Arquivo: resources/components/sections/lab-texto.inc.php
   ************************************************************ */
.labtxt {
    padding: 80px 0 20px;
    background: var(--white);
}

.labtxt__grid--media {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: center;
}

.labtxt__grid--left .labtxt__content {
    order: 2;
}

.labtxt__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labtxt__eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.labtxt__title {
    margin-top: 18px;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.2;
    color: var(--primary);
}

.labtxt__lead {
    margin-top: 18px;
    color: var(--gray-dark);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.65;
}

.labtxt__p {
    margin-top: 16px;
    color: var(--gray-medium);
    font-size: 0.98rem;
    line-height: 1.75;
}

.labtxt__highlights {
    margin-top: 26px;
    list-style: none;
    display: grid;
    gap: 12px;
}

.labtxt__highlights li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--gray-dark);
    font-size: 0.94rem;
    line-height: 1.55;
}

.labtxt__highlights i {
    margin-top: 3px;
    color: var(--accent);
}

.labtxt__media {
    position: relative;
}

.labtxt__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 22px;
    box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.6);
}

/* Duas fotos (v10.38.23): a principal desce e encolhe para abrir espaço; a
   sobreposta fica no canto superior EXTERNO, avançando um pouco além da
   principal. Tudo em % da largura: a composição escala igual no celular. */
.labtxt__media--duo {
    padding-top: 16%;
    padding-right: 8%;
}

/* Moldura de cada foto da dupla. O "raio" é um gradiente cônico GIRANDO atrás
   da foto: só a fresta do padding o deixa aparecer, então ele corre pela borda.
   O quadrado do ::before (150% da largura, aspect-ratio 1) cobre a diagonal das
   duas proporções (4:3 e 3:2) — menor que isso, os cantos ficariam sem brilho. */
.labtxt__frame {
    position: relative;
    display: block;
    padding: 5px;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    background: color-mix(in srgb, var(--primary) 22%, var(--white));
    box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.6);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}

.labtxt__frame::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 150%;
    aspect-ratio: 1;
    /* Duas faíscas opostas: cauda longa que esquenta até o branco na ponta. */
    background: conic-gradient(
        from 0deg,
        transparent 0deg 100deg,
        color-mix(in srgb, var(--accent) 35%, transparent) 135deg,
        var(--accent) 165deg,
        var(--white) 176deg,
        transparent 180deg 280deg,
        color-mix(in srgb, var(--accent) 35%, transparent) 315deg,
        var(--accent) 345deg,
        var(--white) 356deg,
        transparent 360deg
    );
    transform: translate(-50%, -50%) rotate(0deg);
    animation: labtxt-raio 3.6s linear infinite, labtxt-faisca 2.3s linear infinite;
}

.labtxt__frame .labtxt__img {
    border-radius: 17px;
    box-shadow: none;
}

.labtxt__frame--inset {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 46%;
    padding: 6px;
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.55);
}

/* Sentido contrário e fora de fase: os dois raios não andam juntos. */
.labtxt__frame--inset::before {
    animation-direction: reverse, normal;
    animation-delay: -1.8s, -0.9s;
}

.labtxt__frame--inset .labtxt__img {
    border-radius: 12px;
}

.labtxt__grid--left .labtxt__media--duo {
    padding-right: 0;
    padding-left: 8%;
}

.labtxt__grid--left .labtxt__frame--inset {
    right: auto;
    left: 0;
}

@keyframes labtxt-raio {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Cintilação curta, como descarga elétrica — o resto do ciclo fica aceso. */
@keyframes labtxt-faisca {
    0%, 44%, 50%, 100% { opacity: 1; }
    45% { opacity: 0.35; }
    47% { opacity: 0.9; }
    48% { opacity: 0.5; }
}

/* Movimento no hover só onde existe mouse: no toque o :hover "gruda". A
   principal sobe; a sobreposta sobe mais e gira — efeito de profundidade. */
@media (hover: hover) {

    .labtxt__frame:hover {
        transform: translateY(-6px) rotate(-1deg);
        box-shadow: 0 32px 54px -24px rgba(0, 0, 0, 0.55);
    }

    .labtxt__frame--inset:hover {
        transform: translate(-6px, -10px) rotate(2.5deg) scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {

    .labtxt__frame,
    .labtxt__frame::before {
        animation: none;
        transition: none;
    }

    .labtxt__frame:hover,
    .labtxt__frame--inset:hover {
        transform: none;
    }
}

@media (max-width: 900px) {

    .labtxt {
        padding: 56px 0 12px;
    }

    .labtxt__frame--inset {
        padding: 4px;
        border-radius: 14px;
    }

    .labtxt__frame--inset .labtxt__img {
        border-radius: 10px;
    }

    .labtxt__grid--media {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .labtxt__grid--left .labtxt__content {
        order: 0;
    }
}


/* ************************************************************
   LAB NÚMEROS — Faixa de indicadores
   Arquivo: resources/components/sections/lab-numeros.inc.php
   ************************************************************ */
.labnum {
    padding: 60px 0;
    background: var(--white);
}

.labnum__head {
    max-width: 640px;
    margin: 0 auto 34px;
    text-align: center;
}

.labnum__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labnum__title {
    margin-top: 16px;
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--primary);
}

.labnum__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    list-style: none;
    padding: 34px 26px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.labnum__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    text-align: center;
    color: var(--white);
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.labnum__item:last-child {
    border-right: none;
}

.labnum__icon {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.75);
}

.labnum__value {
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
    line-height: 1.1;
}

.labnum__prefix {
    color: var(--accent);
}

.labnum__label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {

    .labnum__item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        padding-bottom: 18px;
    }

    .labnum__item:last-child {
        border-bottom: none;
    }
}


/* ************************************************************
   LAB TIMELINE — Linha do tempo institucional
   Arquivo: resources/components/sections/lab-timeline.inc.php
   ************************************************************ */
.labtl {
    padding: 80px 0;
    background: var(--gray-light);
}

.labtl__head {
    max-width: 660px;
    margin: 0 auto 46px;
    text-align: center;
}

.labtl__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labtl__eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.labtl__title {
    margin-top: 18px;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    color: var(--primary);
}

.labtl__subtitle {
    margin-top: 14px;
    color: var(--gray-medium);
    line-height: 1.6;
}

.labtl__list {
    position: relative;
    list-style: none;
    max-width: 900px;
    margin: 0 auto;
}

/* Régua vertical contínua */
.labtl__list::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
}

.labtl__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding-bottom: 26px;
}

.labtl__item:last-child {
    padding-bottom: 0;
}

.labtl__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--primary);
    color: var(--primary);
    font-size: 1.05rem;
    transition: var(--transition);
}

.labtl__item:hover .labtl__marker {
    background: var(--primary);
    color: var(--white);
    transform: scale(1.06);
}

.labtl__card {
    flex: 1;
    padding: 24px 26px;
    border-radius: 18px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
    transition: var(--transition);
}

.labtl__item:hover .labtl__card {
    transform: translateX(4px);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.5);
}

.labtl__year {
    display: inline-block;
    padding: 5px 14px;
    margin-bottom: 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-hover);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.labtl__item-title {
    font-family: var(--font-title);
    font-size: 1.12rem;
    color: var(--primary);
    line-height: 1.3;
}

.labtl__text {
    margin-top: 10px;
    color: var(--gray-medium);
    font-size: 0.95rem;
    line-height: 1.7;
}

@media (max-width: 768px) {

    .labtl {
        padding: 56px 0;
    }

    .labtl__list::before {
        left: 21px;
    }

    .labtl__item {
        gap: 16px;
    }

    .labtl__marker {
        width: 44px;
        height: 44px;
        font-size: 0.9rem;
    }

    .labtl__card {
        padding: 20px;
    }
}


/* ************************************************************
   LAB GALERIA — Grade de fotos com lightbox
   Arquivo: resources/components/sections/lab-galeria.inc.php
   ************************************************************ */
.labgal {
    padding: 80px 0;
    background: var(--white);
}

.labgal__head {
    max-width: 660px;
    margin: 0 auto 40px;
    text-align: center;
}

.labgal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labgal__eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.labgal__title {
    margin-top: 18px;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    color: var(--primary);
}

.labgal__subtitle {
    margin-top: 14px;
    color: var(--gray-medium);
    line-height: 1.6;
}

.labgal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    list-style: none;
}

.labgal__item {
    display: flex;
}

.labgal__thumb {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 18px;
    overflow: hidden;
    background: var(--primary);
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    transition: var(--transition);
}

.labgal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.labgal__thumb:hover img,
.labgal__thumb:focus-visible img {
    transform: scale(1.08);
}

.labgal__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 14px 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
    color: var(--white);
    font-size: 0.84rem;
    font-weight: 700;
    text-align: left;
    line-height: 1.3;
}

.labgal__zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary);
    font-size: 0.8rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: var(--transition);
}

.labgal__thumb:hover .labgal__zoom,
.labgal__thumb:focus-visible .labgal__zoom {
    opacity: 1;
    transform: translateY(0);
}

/* Lightbox */
.labgal__lightbox {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: rgba(10, 20, 18, 0.94);
}

.labgal__lightbox[hidden] {
    display: none;
}

.labgal__stage {
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    text-align: center;
}

.labgal__stage img {
    max-width: 100%;
    max-height: 78vh;
    border-radius: 14px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}

.labgal__stage figcaption {
    margin-top: 16px;
    color: var(--white);
    font-size: 0.94rem;
    font-weight: 600;
}

.labgal__close,
.labgal__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-size: 1.05rem;
    cursor: pointer;
    transition: var(--transition);
}

.labgal__close {
    position: absolute;
    top: 22px;
    right: 22px;
}

.labgal__close:hover,
.labgal__nav:hover,
.labgal__close:focus-visible,
.labgal__nav:focus-visible {
    background: var(--white);
    color: var(--primary);
}

body.labgal-no-scroll {
    overflow: hidden;
}

@media (max-width: 768px) {

    .labgal {
        padding: 56px 0;
    }

    .labgal__grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .labgal__lightbox {
        padding: 12px;
        gap: 4px;
    }

    .labgal__close,
    .labgal__nav {
        width: 42px;
        height: 42px;
    }
}


/* ************************************************************
   LAB TRABALHE CONOSCO — [hidden] acima do display
   O atributo [hidden] vale display:none na folha do navegador, que
   qualquer 'display' de classe sobrescreve. Estes elementos nascem
   [hidden] (ou são escondidos pelo JS da busca), então precisam da
   regra explícita — sem ela, o filtro de vagas não esconde nada.
   ************************************************************ */
.labhv__chip[hidden],
.labvg__item[hidden],
.labcv__drop-file[hidden] {
    display: none;
}


/* ************************************************************
   LAB HERO VAGAS — Faixa principal da página /trabalhe-conosco
   Arquivo: resources/components/heroes/lab-hero-vagas.inc.php
   ************************************************************ */
.labhv {
    position: relative;
    isolation: isolate;
    padding: 74px 0 64px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    overflow: hidden;
}

/* Imagem de fundo (opcional) + véu escuro para o texto manter contraste */
.labhv__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.labhv--media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 92%, transparent) 0%,
        color-mix(in srgb, var(--primary) 68%, transparent) 100%);
}

.labhv__inner {
    position: relative;
    max-width: 780px;
}

.labhv__crumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    font-size: 0.8rem;
}

.labhv__crumb {
    color: color-mix(in srgb, var(--white) 78%, transparent);
    text-decoration: none;
    transition: var(--transition);
}

.labhv__crumb:hover,
.labhv__crumb:focus-visible {
    color: var(--white);
}

.labhv__crumb--current {
    font-weight: 600;
    color: var(--white);
}

.labhv__crumb-sep {
    font-size: 0.6rem;
    opacity: 0.65;
}

.labhv__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 17px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--white) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 26%, transparent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labhv__title {
    margin-top: 18px;
    font-family: var(--font-title);
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    line-height: 1.15;
}

.labhv__subtitle {
    margin-top: 16px;
    max-width: 620px;
    font-size: clamp(0.98rem, 1.6vw, 1.1rem);
    line-height: 1.65;
    color: color-mix(in srgb, var(--white) 88%, transparent);
}

.labhv__ctas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.labhv__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.labhv__cta--primary {
    background: var(--white);
    color: var(--primary);
}

.labhv__cta--secondary {
    background: transparent;
    color: var(--white);
    border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
}

.labhv__cta--primary:hover,
.labhv__cta--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -16px rgba(0, 0, 0, 0.7);
}

.labhv__cta--secondary:hover,
.labhv__cta--secondary:focus-visible {
    background: color-mix(in srgb, var(--white) 15%, transparent);
    border-color: var(--white);
}

/* Contador preenchido pelo JS a partir das vagas realmente renderizadas */
.labhv__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--white) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 24%, transparent);
    font-size: 0.8rem;
    line-height: 1.25;
}

.labhv__chip-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.95rem;
}

@media (max-width: 768px) {

    .labhv {
        padding: 52px 0 46px;
    }

    .labhv__cta {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* ************************************************************
   LAB ETAPAS — Passos numerados (processo seletivo, jornadas)
   Arquivo: resources/components/sections/lab-etapas.inc.php
   ************************************************************ */
.labetp {
    padding: 72px 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

.labetp__head {
    max-width: 680px;
    margin-bottom: 38px;
}

.labetp__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--white) 72%, transparent);
}

.labetp__title {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
}

.labetp__subtitle {
    margin-top: 12px;
    font-size: 0.98rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--white) 86%, transparent);
}

.labetp__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    list-style: none;
    counter-reset: labetp;
}

.labetp__step {
    display: flex;
    gap: 15px;
    padding: 24px 22px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--white) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
}

.labetp__num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
}

.labetp__step-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-title);
    font-size: 1.02rem;
    line-height: 1.3;
}

.labetp__step-title i {
    font-size: 0.86rem;
    color: color-mix(in srgb, var(--white) 78%, transparent);
}

.labetp__step-desc {
    margin-top: 8px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--white) 84%, transparent);
}

@media (max-width: 768px) {

    .labetp {
        padding: 56px 0;
    }
}


/* ************************************************************
   LAB VAGAS — Lista de oportunidades com busca instantânea
   Arquivo: resources/components/sections/lab-vagas.inc.php
   ************************************************************ */
.labvg {
    padding: 76px 0;
    background: var(--gray-light);
}

.labvg__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.labvg__head-text {
    max-width: 560px;
}

.labvg__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
}

.labvg__title {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--primary);
    line-height: 1.2;
}

.labvg__subtitle {
    margin-top: 10px;
    color: var(--gray-medium);
    font-size: 0.94rem;
    line-height: 1.6;
}

.labvg__search {
    position: relative;
    flex: 1 1 300px;
    max-width: 420px;
}

/* Rótulo só para leitor de tela — o placeholder já orienta quem enxerga */
.labvg__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.labvg__search-icon {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    color: var(--gray-medium);
    font-size: 0.9rem;
    pointer-events: none;
}

.labvg__search-input {
    width: 100%;
    padding: 14px 18px 14px 44px;
    border: 1px solid #dfe5e8;
    border-radius: var(--radius-pill);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text);
    transition: var(--transition);
}

.labvg__search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.labvg__count {
    margin-bottom: 16px;
    color: var(--gray-medium);
    font-size: 0.86rem;
}

.labvg__count strong {
    color: var(--primary);
}

.labvg__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
}

.labvg__item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border-radius: 18px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
    box-shadow: 0 12px 26px -24px rgba(0, 0, 0, 0.55);
    transition: var(--transition);
}

.labvg__item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 32%, transparent);
    box-shadow: 0 18px 32px -24px rgba(0, 0, 0, 0.6);
}

.labvg__item-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.labvg__item-body {
    flex: 1;
    min-width: 0;
}

.labvg__item-title {
    font-family: var(--font-title);
    font-size: 1.05rem;
    color: var(--primary);
    line-height: 1.3;
}

.labvg__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 7px;
    list-style: none;
    color: var(--gray-medium);
    font-size: 0.84rem;
}

.labvg__meta i {
    margin-right: 5px;
    color: var(--accent);
}

.labvg__item-desc {
    margin-top: 9px;
    color: var(--gray-medium);
    font-size: 0.88rem;
    line-height: 1.6;
}

.labvg__apply {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-decoration: none;
    text-transform: uppercase;
    transition: var(--transition);
}

.labvg__apply:hover,
.labvg__apply:focus-visible {
    background: var(--primary);
    color: var(--white);
}

.labvg__empty {
    padding: 26px 24px;
    border-radius: 18px;
    background: var(--white);
    border: 1px dashed color-mix(in srgb, var(--primary) 28%, transparent);
    color: var(--gray-medium);
    font-size: 0.92rem;
    text-align: center;
}

.labvg__empty a {
    color: var(--primary);
    font-weight: 700;
}

@media (max-width: 768px) {

    .labvg {
        padding: 56px 0;
    }

    .labvg__item {
        flex-wrap: wrap;
        padding: 20px;
    }

    .labvg__apply {
        width: 100%;
        justify-content: center;
    }
}


/* ************************************************************
   LAB FORM VAGA — Formulário de candidatura + barra lateral
   Arquivo: resources/components/sections/lab-form-vaga.inc.php
   ************************************************************ */
.labcv {
    padding: 76px 0 84px;
    background: var(--white);
}

.labcv__head {
    max-width: 680px;
    margin-bottom: 32px;
}

.labcv__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
}

.labcv__title {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--primary);
    line-height: 1.2;
}

.labcv__subtitle {
    margin-top: 10px;
    color: var(--gray-medium);
    font-size: 0.94rem;
    line-height: 1.6;
}

.labcv__layout {
    display: grid;
    grid-template-columns: 1.75fr 1fr;
    gap: 26px;
    align-items: start;
}

.labcv__main {
    padding: 34px 32px 30px;
    border-radius: 22px;
    background: var(--gray-light);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Honeypot — fora da tela, sem display:none (bots ignoram campos ocultos) */
.labcv__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.labcv__block {
    margin-bottom: 26px;
    padding: 0;
    border: none;
}

.labcv__block + .labcv__block {
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}

.labcv__legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 0;
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--primary);
}

.labcv__legend i {
    font-size: 0.86rem;
    color: var(--accent);
}

.labcv__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.labcv__row--3 {
    grid-template-columns: repeat(3, 1fr);
}

.labcv__row--cep {
    grid-template-columns: 0.8fr 2fr 0.7fr;
}

.labcv__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
    min-width: 0;
}

.labcv__field label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--gray-dark);
}

.labcv__field > label span {
    color: var(--accent);
}

.labcv__field input,
.labcv__field select,
.labcv__field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #dfe5e8;
    border-radius: 12px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    transition: var(--transition);
}

.labcv__field textarea {
    resize: vertical;
    min-height: 120px;
}

.labcv__field input:focus,
.labcv__field select:focus,
.labcv__field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.labcv__field input::placeholder,
.labcv__field textarea::placeholder {
    color: #a9b4ba;
}

.labcv__counter {
    align-self: flex-end;
    color: var(--gray-medium);
    font-size: 0.76rem;
}

/* Estado de erro por campo */
.labcv__field.is-invalid input,
.labcv__field.is-invalid select,
.labcv__field.is-invalid textarea {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.labcv__field.is-invalid .labcv__drop {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--white));
}

.labcv__error {
    display: none;
    color: var(--accent-hover);
    font-size: 0.8rem;
    font-weight: 600;
}

.labcv__field.is-invalid .labcv__error {
    display: block;
}

/* ---------- Anexo do currículo ---------- */
.labcv__drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 30px 22px;
    border: 2px dashed color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 16px;
    background: var(--white);
    text-align: center;
    transition: var(--transition);
}

.labcv__drop.is-dragging {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--white));
}

/* O input cobre a área toda: clique e drop caem nele, sem JS obrigatório */
.labcv__file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}

.labcv__drop-icon {
    font-size: 1.7rem;
    color: var(--primary);
}

.labcv__drop-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--gray-dark);
}

.labcv__drop-hint {
    color: var(--gray-medium);
    font-size: 0.8rem;
}

.labcv__drop-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
    word-break: break-all;
}

/* ---------- Checkboxes de consentimento ---------- */
.labcv__field--check {
    gap: 4px;
}

.labcv__check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--gray-dark);
    cursor: pointer;
}

.labcv__check input {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 2px;
    padding: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.labcv__check a {
    color: var(--primary);
    font-weight: 700;
}

.labcv__check span[aria-hidden="true"] {
    color: var(--accent);
}

/* ---------- Ações e retorno ---------- */
.labcv__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.labcv__submit {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 32px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.labcv__submit:hover:not(:disabled),
.labcv__submit:focus-visible:not(:disabled) {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px var(--primary);
}

.labcv__submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.labcv__legal {
    flex: 1;
    min-width: 240px;
    color: var(--gray-medium);
    font-size: 0.78rem;
    line-height: 1.5;
}

.labcv__legal i {
    margin-right: 6px;
    color: var(--primary);
}

.labcv__feedback {
    margin-top: 22px;
    padding: 15px 18px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border-left: 4px solid var(--primary);
}

.labcv__feedback--error {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-hover);
    border-left-color: var(--accent);
}

/* ---------- Barra lateral ---------- */
.labcv__aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 20px;
}

.labcv__box {
    padding: 24px 22px;
    border-radius: 18px;
    background: var(--gray-light);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

.labcv__box--help {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    border-color: transparent;
}

.labcv__box-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--font-title);
    font-size: 0.98rem;
    color: var(--primary);
}

.labcv__box--help .labcv__box-title {
    color: var(--white);
}

.labcv__tips {
    display: flex;
    flex-direction: column;
    gap: 11px;
    list-style: none;
}

.labcv__tips li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--gray-dark);
    font-size: 0.87rem;
    line-height: 1.5;
}

.labcv__tips i {
    margin-top: 3px;
    font-size: 0.72rem;
    color: var(--accent);
}

.labcv__box-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--white) 88%, transparent);
}

.labcv__box-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 15px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.labcv__box-cta:hover,
.labcv__box-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.7);
}

@media (max-width: 1024px) {

    .labcv__layout {
        grid-template-columns: 1fr;
    }

    .labcv__aside {
        position: static;
    }
}

@media (max-width: 768px) {

    .labcv {
        padding: 56px 0 64px;
    }

    .labcv__main {
        padding: 26px 20px 22px;
    }

    .labcv__row,
    .labcv__row--3,
    .labcv__row--cep {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .labcv__submit {
        width: 100%;
        justify-content: center;
    }
}


/* ************************************************************
   LAB EXAMES HERO — Hero das listagens de exame (busca + A–Z)
   Arquivo: resources/components/heroes/lab-exames-hero.inc.php
   Serve /procedimentos-medicos e /exames-laboratoriais.
   ************************************************************ */
.labexh {
    position: relative;
    overflow: hidden;
    padding: 52px 0 44px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

/* Textura de fundo: círculos em SVG, sem imagem externa e sem custo de rede */
.labexh__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
}

.labexh__bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.labexh__bg circle {
    fill: none;
    stroke: var(--white);
    stroke-width: 26;
}

.labexh__inner {
    position: relative;
    z-index: 1;
}

.labexh__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 0.82rem;
}

.labexh__crumb {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: var(--transition);
}

.labexh__crumb:hover,
.labexh__crumb:focus-visible {
    color: var(--white);
}

.labexh__crumb--current {
    color: var(--white);
    font-weight: 600;
}

.labexh__crumb-sep {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.labexh__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labexh__title {
    margin-top: 14px;
    font-family: var(--font-title);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    line-height: 1.15;
    color: var(--white);
}

.labexh__subtitle {
    margin-top: 12px;
    max-width: 640px;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

/* ---------- Busca (form GET: funciona sem JS) ---------- */
.labexh__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    max-width: 620px;
    padding: 6px 6px 6px 44px;
    border-radius: var(--radius-pill);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.labexh__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.labexh__search-icon {
    position: absolute;
    left: 18px;
    color: var(--gray-medium);
    font-size: 0.95rem;
}

.labexh__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
}

.labexh__search-input:focus {
    outline: none;
}

/* O foco visível vai para o contêiner inteiro: o input não tem borda própria */
.labexh__search:focus-within {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.labexh__search-btn {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    padding: 11px 24px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    transition: var(--transition);
}

.labexh__search-btn:hover,
.labexh__search-btn:focus-visible {
    background: var(--accent-hover);
}

/* ---------- Régua A–Z ---------- */
.labexh__alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}

.labexh__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.labexh__letter:hover,
.labexh__letter:focus-visible {
    background: rgba(255, 255, 255, 0.3);
}

.labexh__letter--active {
    background: var(--accent);
    color: var(--white);
}

.labexh__letter--active:hover {
    background: var(--accent-hover);
}

/* Letra sem exame: visível para manter o alinhamento do alfabeto, mas inerte */
.labexh__letter--off {
    background: transparent;
    color: rgba(255, 255, 255, 0.28);
    cursor: default;
}

.labexh__count {
    margin-top: 18px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.labexh__count strong {
    color: var(--white);
}

.labexh__clear {
    margin-left: 10px;
    color: var(--white);
    font-size: 0.84rem;
    text-decoration: underline;
    transition: var(--transition);
}

.labexh__clear:hover,
.labexh__clear:focus-visible {
    color: var(--accent);
}

/* ---------- "Agende aqui" no hero (v10.38.25, só laboratoriais) ----------
   Grade por ÁREAS: no desktop o cartão ocupa o vão à direita da busca e a
   régua A–Z segue na largura toda embaixo; abaixo de 1024px o cartão desce
   para o FIM do hero, para não separar a busca da régua. */
.labexh__inner--cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "main"
        "alpha"
        "count"
        "side";
}

.labexh__inner--cta .labexh__main {
    grid-area: main;
    min-width: 0;
}

.labexh__inner--cta .labexh__alphabet {
    grid-area: alpha;
}

.labexh__inner--cta .labexh__count {
    grid-area: count;
}

.labexh__inner--cta .labexh__side {
    grid-area: side;
    margin-top: 26px;
}

@media (min-width: 1024px) {
    .labexh__inner--cta {
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-areas:
            "main side"
            "alpha alpha"
            "count count";
        column-gap: 56px;
    }

    .labexh__inner--cta .labexh__side {
        align-self: end;
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .labexh {
        padding: 36px 0 32px;
    }

    .labexh__search {
        margin-top: 20px;
    }

    .labexh__search-btn {
        padding: 11px 16px;
    }
}


/* ************************************************************
   LAB EXAMES GRID — Grade de cards dos procedimentos médicos
   Arquivo: resources/components/sections/lab-exames-grid.inc.php
   ************************************************************ */
.labexg {
    padding: 60px 0 76px;
    background: var(--gray-light);
}

/* Título que existe para o leitor de tela: o H1 do hero já nomeia a página */
.labexg__sr-title,
.labexc__sr-title,
.labexd__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.labexg__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
    gap: 26px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.labexg__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: var(--transition);
}

.labexg__card:hover,
.labexg__card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.labexg__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--primary);
}

.labexg__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.labexg__card:hover .labexg__img,
.labexg__card:focus-visible .labexg__img {
    transform: scale(1.06);
}

/* Véu na base da imagem: garante contraste caso a foto seja clara na borda */
.labexg__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.28), transparent);
    pointer-events: none;
}

/* Sem imagem: marca do cliente, nunca ícone quebrado */
.labexg__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: rgba(255, 255, 255, 0.45);
    font-size: 3rem;
}

.labexg__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 22px 22px;
}

.labexg__name {
    font-family: var(--font-title);
    font-size: 1.12rem;
    line-height: 1.3;
    color: var(--primary);
}

.labexg__desc {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gray-medium);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.labexg__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    list-style: none;
    padding: 0;
}

.labexg__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--gray-light);
    font-size: 0.76rem;
    color: var(--gray-dark);
}

.labexg__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent);
}

.labexg__cta-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.labexg__card:hover .labexg__cta-icon,
.labexg__card:focus-visible .labexg__cta-icon {
    transform: translateX(5px);
}

/* ---------- Estado vazio ---------- */
.labexg__empty,
.labexc__empty {
    max-width: 520px;
    margin: 0 auto;
    padding: 48px 24px;
    text-align: center;
}

.labexg__empty-icon,
.labexc__empty-icon {
    font-size: 2.6rem;
    color: var(--gray-medium);
    opacity: 0.5;
}

.labexg__empty-title,
.labexc__empty-title {
    margin-top: 16px;
    font-family: var(--font-title);
    font-size: 1.12rem;
    color: var(--primary);
}

.labexg__empty-text,
.labexc__empty-text {
    margin-top: 10px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--gray-medium);
}

.labexc__empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.labexg__empty-cta,
.labexc__empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labexc__empty-cta {
    margin-top: 0;
}

.labexg__empty-cta:hover,
.labexg__empty-cta:focus-visible,
.labexc__empty-cta:hover,
.labexc__empty-cta:focus-visible {
    background: var(--accent-hover);
}

.labexc__empty-cta--ghost {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.labexc__empty-cta--ghost:hover,
.labexc__empty-cta--ghost:focus-visible {
    background: var(--primary);
    color: var(--white);
}

/* ---------- Paginação ---------- */
.labexg__pagination,
.labexc__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 40px;
}

.labexg__page,
.labexc__page {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.labexg__page:hover,
.labexg__page:focus-visible,
.labexc__page:hover,
.labexc__page:focus-visible {
    background: var(--primary);
    color: var(--white);
}

.labexg__page--active,
.labexc__page--active {
    background: var(--accent);
    color: var(--white);
    box-shadow: none;
}

.labexg__page--active:hover,
.labexc__page--active:hover {
    background: var(--accent);
    color: var(--white);
}

.labexc__ellipsis {
    padding: 0 4px;
    color: var(--gray-medium);
}

@media (max-width: 560px) {
    .labexg__page-text,
    .labexc__page-text {
        display: none;
    }
}


/* ************************************************************
   LAB EXAMES CATÁLOGO — Acordeão dos exames laboratoriais
   Arquivo: resources/components/sections/lab-exames-catalogo.inc.php
   Usa <details>/<summary> nativos: abre sem JS e é navegável por teclado.
   ************************************************************ */
.labexc {
    padding: 52px 0 76px;
    background: var(--gray-light);
}

.labexc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.labexc__details {
    border-radius: 12px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.labexc__details[open] {
    box-shadow: var(--shadow-md);
}

.labexc__summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Remove o triângulo nativo nos dois motores — o chevron é nosso */
.labexc__summary::-webkit-details-marker {
    display: none;
}

.labexc__summary::marker {
    content: "";
}

.labexc__summary:hover {
    background: var(--gray-light);
}

.labexc__summary:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: -3px;
}

.labexc__name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.35;
}

/* Chips visíveis com o acordeão FECHADO: respondem antes do clique */
.labexc__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.labexc__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--gray-light);
    font-size: 0.74rem;
    color: var(--gray-dark);
    white-space: nowrap;
}

.labexc__details[open] .labexc__chip {
    background: var(--white);
}

.labexc__chevron {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--accent);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.labexc__details[open] .labexc__chevron {
    transform: rotate(180deg);
}

.labexc__panel {
    padding: 4px 20px 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.labexc__intro {
    margin: 16px 0 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--gray-dark);
}

/* ---------- Ficha estruturada ---------- */
.labexc__ficha,
.labexd__ficha {
    margin: 18px 0 0;
    display: grid;
    gap: 1px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    overflow: hidden;
}

.labexc__ficha {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.labexc__ficha-row,
.labexd__ficha-row {
    background: var(--white);
    padding: 12px 14px;
}

.labexc__ficha-label,
.labexd__ficha-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--gray-medium);
}

.labexc__ficha-label i,
.labexd__ficha-label i {
    color: var(--accent);
}

.labexc__ficha-value,
.labexd__ficha-value {
    margin: 5px 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text);
}

.labexc__instructions {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 10px;
    border-left: 4px solid var(--accent);
    background: var(--gray-light);
}

.labexc__instructions-title,
.labexd__card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-title);
    font-size: 0.95rem;
    color: var(--primary);
}

.labexc__instructions-title i,
.labexd__card-title i {
    color: var(--accent);
}

/* ---------- Ações do painel ---------- */
.labexc__actions {
    display: flex;
    flex-wrap: wrap;
    /* Centralizado: o painel do acordeão é largo e o CTA sozinho encostado
       na esquerda fica solto, longe do olhar de quem acabou de ler a ficha. */
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.labexc__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--primary);
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labexc__action:hover,
.labexc__action:focus-visible {
    background: var(--primary);
    color: var(--white);
}

.labexc__action--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.labexc__action--primary:hover,
.labexc__action--primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--white);
}

.labexc__action--link {
    border-color: transparent;
    padding-left: 6px;
    padding-right: 6px;
    color: var(--accent);
}

.labexc__action--link:hover,
.labexc__action--link:focus-visible {
    background: transparent;
    color: var(--accent-hover);
    text-decoration: underline;
}

@media (max-width: 640px) {
    /* No celular os chips competem com o nome do exame pela largura. O nome
       fica na primeira linha junto do chevron (que precisa estar visível para
       indicar que o item abre) e os chips descem para a segunda. */
    .labexc__summary {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 14px 16px;
    }

    .labexc__name {
        flex: 1 1 auto;
        order: 1;
    }

    .labexc__chevron {
        order: 2;
    }

    .labexc__chips {
        order: 3;
        flex: 1 1 100%;
    }

    .labexc__ficha {
        grid-template-columns: 1fr;
    }
}


/* ************************************************************
   LAB EXAME HERO — Hero da página interna do exame
   Arquivo: resources/components/heroes/lab-exame-hero.inc.php
   ************************************************************ */
.labexdh {
    position: relative;
    overflow: hidden;
    padding: 46px 0 40px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

.labexdh__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.1;
}

.labexdh__bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.labexdh__bg circle {
    fill: none;
    stroke: var(--white);
    stroke-width: 24;
}

.labexdh__inner {
    position: relative;
    z-index: 1;
}

.labexdh__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.82rem;
}

.labexdh__crumb {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: var(--transition);
}

.labexdh__crumb:hover,
.labexdh__crumb:focus-visible {
    color: var(--white);
}

.labexdh__crumb--current {
    color: var(--white);
    font-weight: 600;
}

.labexdh__crumb-sep {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.labexdh__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.labexdh__title {
    margin-top: 14px;
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.15;
    color: var(--white);
}

.labexdh__subtitle {
    margin-top: 12px;
    max-width: 700px;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

.labexdh__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.labexdh__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labexdh__cta:hover,
.labexdh__cta:focus-visible {
    background: var(--white);
    border-color: var(--white);
    color: var(--primary);
}

.labexdh__cta--primary {
    background: var(--accent);
    border-color: var(--accent);
}

.labexdh__cta--primary:hover,
.labexdh__cta--primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--white);
}


/* ************************************************************
   LAB EXAME DETALHE — Conteúdo + ficha sticky da página do exame
   Arquivo: resources/components/sections/lab-exame-detalhe.inc.php
   ************************************************************ */
.labexd {
    padding: 52px 0 70px;
    background: var(--white);
}

.labexd__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
}

@media (min-width: 1024px) {
    .labexd__inner {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 44px;
        align-items: start;
    }

    /* Sem conteúdo (registro só com ficha) a coluna única ocupa tudo */
    .labexd__inner--single {
        grid-template-columns: minmax(0, 1fr);
        max-width: 720px;
    }

    /* sticky depende de overflow-x: clip em html/body (linhas 46-56) —
       com overflow-x: hidden o navegador anula o sticky silenciosamente */
    .labexd__side {
        position: sticky;
        top: 24px;
    }
}

.labexd__figure {
    margin: 0 0 26px;
    border-radius: 14px;
    overflow: hidden;
}

/* A capa é 4:3; em tela larga isso daria 500px de altura e empurraria o texto
   — que é o que o visitante veio ler — para baixo da dobra. Recorta em faixa. */
.labexd__cover {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
    display: block;
}

/* Carrossel da galeria do exame (v10.37.0, partial lab-galeria-fotos): a
   MESMA faixa da foto única (decisão do usuário) — altura fixa em vez do 4:3
   do carrossel, para a página não mudar de proporção entre uma foto e várias. */
.labexd__gal .labgf__img {
    aspect-ratio: auto;
    height: 320px;
}

@media (max-width: 768px) {
    .labexd__cover {
        max-height: 220px;
    }

    .labexd__gal .labgf__img {
        height: 220px;
    }
}

/* ---------- Prose: estiliza o HTML que vem do admin ---------- */
.labexd__prose {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.75;
}

.labexd__prose > *:first-child {
    margin-top: 0;
}

.labexd__prose p {
    margin: 0 0 16px;
}

.labexd__prose h2 {
    position: relative;
    margin: 34px 0 14px;
    padding-left: 14px;
    font-family: var(--font-title);
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    line-height: 1.3;
    color: var(--primary);
    scroll-margin-top: 24px;
}

.labexd__prose h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.18em;
    width: 4px;
    border-radius: 2px;
    background: var(--accent);
}

.labexd__prose h3 {
    margin: 26px 0 10px;
    font-family: var(--font-title);
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--primary-light);
}

.labexd__prose h4 {
    margin: 20px 0 8px;
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--primary-light);
}

.labexd__prose strong {
    color: var(--primary);
    font-weight: 700;
}

.labexd__prose ul,
.labexd__prose ol {
    margin: 0 0 18px;
    padding: 0 0 0 4px;
    list-style: none;
}

.labexd__prose ol {
    counter-reset: labexd-ol;
}

.labexd__prose li {
    position: relative;
    padding: 5px 0 5px 24px;
    line-height: 1.65;
}

.labexd__prose ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.labexd__prose ol > li {
    counter-increment: labexd-ol;
}

.labexd__prose ol > li::before {
    content: counter(labexd-ol) ".";
    position: absolute;
    left: 0;
    top: 5px;
    color: var(--accent);
    font-weight: 700;
}

.labexd__prose a {
    color: var(--primary-light);
    text-decoration: underline;
    transition: var(--transition);
}

.labexd__prose a:hover,
.labexd__prose a:focus-visible {
    color: var(--accent);
}

.labexd__prose blockquote {
    margin: 0 0 18px;
    padding: 12px 18px;
    border-left: 4px solid var(--accent);
    background: var(--gray-light);
    border-radius: 0 8px 8px 0;
    color: var(--gray-dark);
}

/* Tabela larga rola dentro do próprio bloco — o body nunca rola na horizontal */
.labexd__prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 18px;
    font-size: 0.92rem;
}

.labexd__prose th,
.labexd__prose td {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 9px 12px;
    text-align: left;
}

.labexd__prose th {
    background: var(--gray-light);
    color: var(--primary);
}

.labexd__prose--compact {
    font-size: 0.92rem;
    line-height: 1.65;
}

.labexd__prose--compact p:last-child,
.labexd__prose--compact ul:last-child {
    margin-bottom: 0;
}

/* ---------- Coluna lateral ---------- */
.labexd__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.labexd__card {
    padding: 20px;
    border-radius: 14px;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.labexd__card--prep {
    background: var(--gray-light);
    border-color: transparent;
    border-left: 4px solid var(--accent);
}

.labexd__card--cta {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-color: transparent;
    color: var(--white);
}

.labexd__card-title--invert {
    color: var(--white);
}

.labexd__ficha {
    grid-template-columns: 1fr;
}

.labexd__cta-text {
    margin: 10px 0 16px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.labexd__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 18px;
    margin-bottom: 10px;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labexd__cta:last-child {
    margin-bottom: 0;
}

.labexd__cta:hover,
.labexd__cta:focus-visible {
    background: var(--white);
    border-color: var(--white);
    color: var(--primary);
}

.labexd__cta--primary {
    background: var(--accent);
    border-color: var(--accent);
}

.labexd__cta--primary:hover,
.labexd__cta--primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--white);
}


/* ************************************************************
   LAB EXAME RELACIONADOS — "Veja também" da página interna
   Arquivo: resources/components/sections/lab-exame-relacionados.inc.php
   ************************************************************ */
.labexr {
    padding: 64px 0 76px;
    background: var(--gray-light);
}

.labexr__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

.labexr__eyebrow {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-title);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent);
}

.labexr__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 2.8vw, 1.85rem);
    line-height: 1.2;
    color: var(--primary);
}

/* "Ver todos" em pílula contornada: some menos que um link solto no canto */
.labexr__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labexr__all:hover,
.labexr__all:focus-visible {
    background: var(--accent);
    color: var(--white);
}

.labexr__all i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.labexr__all:hover i,
.labexr__all:focus-visible i {
    transform: translateX(4px);
}

/* Celular: trilho de arrastar com scroll-snap (sem JS). O cartão seguinte
   aparece pela metade — é o que avisa que dá para arrastar. */
.labexr__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 16px;
    margin: 0 -20px;
    padding: 4px 20px 14px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
}

.labexr__grid::-webkit-scrollbar {
    display: none;
}

.labexr__item {
    scroll-snap-align: start;
}

.labexr__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: var(--transition);
}

.labexr__card:hover,
.labexr__card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.labexr__card:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.labexr__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--primary);
}

.labexr__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.labexr__card:hover .labexr__img,
.labexr__card:focus-visible .labexr__img {
    transform: scale(1.06);
}

/* Degradê no pé da foto: o selo e a foto não brigam com o texto do cartão */
.labexr__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.25), transparent);
    pointer-events: none;
}

/* Sem imagem: marca do cliente, nunca ícone quebrado */
.labexr__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 2rem;
}

.labexr__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.labexr__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px 20px 20px;
}

/* Nome longo ("Eletroencefalograma") quebra em até 2 linhas, nunca por baixo
   de outro elemento */
.labexr__name {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.labexr__desc {
    display: -webkit-box;
    margin: 8px 0 0;
    overflow: hidden;
    color: var(--gray-dark);
    font-size: 0.88rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.labexr__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    font-family: var(--font-title);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--accent);
}

.labexr__arrow {
    font-size: 0.8rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.labexr__card:hover .labexr__arrow,
.labexr__card:focus-visible .labexr__arrow {
    transform: translateX(5px);
}

/* Tablet: grade de 2 colunas, sem trilho */
@media (min-width: 768px) {

    .labexr__grid {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
}

/* Desktop: 4 colunas (o controller manda até 4 relacionados) */
@media (min-width: 1024px) {

    .labexr__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* ---------- Movimento reduzido: respeita a preferência do sistema ---------- */
@media (prefers-reduced-motion: reduce) {

    .labexg__card,
    .labexg__img,
    .labexg__cta-icon,
    .labexc__chevron,
    .labexr__card,
    .labexr__arrow {
        transition: none;
    }

    .labexg__card:hover,
    .labexg__card:focus-visible,
    .labexr__card:hover,
    .labexr__card:focus-visible {
        transform: none;
    }

    .labexg__card:hover .labexg__img,
    .labexg__card:focus-visible .labexg__img {
        transform: none;
    }

    .labexg__card:hover .labexg__cta-icon,
    .labexr__card:hover .labexr__arrow {
        transform: none;
    }
}

.labexd__prose h3 {
    scroll-margin-top: 24px;
}

/* ************************************************************
   LAB AGENDE CTA — faixa "AGENDE AQUI" antes de listagens longas
   Arquivo: resources/components/partials/lab-agende-cta.inc.php
   Usado em (variante hero, desde a v10.38.26 nas três): heroes/lab-exames-hero,
             heroes/lab-medicos-hero e heroes/lab-especialidades-hero
   Fundo na cor da marca para destacar dos cartões brancos da lista; o
   botão em accent com o brilho de borda (`lab-cta-glow`) e o ícone com
   um pulso são o que puxa o olho.
   ************************************************************ */
.labag {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding: 22px 26px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    box-shadow: var(--shadow-md);
    color: var(--white);
}

.labag__icon {
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: var(--white);
    font-size: 1.9rem;
}

/* Onda que sai do ícone: chama atenção sem mexer no texto */
.labag__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25d366;
    animation: labag-pulse 2s ease-out infinite;
}

@keyframes labag-pulse {
    from {
        transform: scale(1);
        opacity: 0.9;
    }
    to {
        transform: scale(1.55);
        opacity: 0;
    }
}

.labag__text {
    flex: 1;
    min-width: 0;
}

.labag__title {
    margin: 0 0 4px;
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
}

.labag__sub {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

.labag__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    transition: var(--transition);
}

.labag__cta i {
    font-size: 1.35rem;
}

.labag__cta:hover,
.labag__cta:focus-visible {
    background: var(--accent-hover);
    color: var(--white);
    transform: translateY(-2px);
}

.labag__cta:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 3px;
}

@media (max-width: 720px) {
    .labag {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 24px 20px;
    }

    .labag__cta {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .labag__icon::after {
        animation: none;
        display: none;
    }

    .labag__cta:hover,
    .labag__cta:focus-visible {
        transform: none;
    }
}

/* Variante 'hero' (v10.38.25): cartão vertical translúcido sobre o fundo
   verde do lab-exames-hero — o gradiente da faixa sumiria no do hero. */
.labag--hero {
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 26px 24px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    text-align: center;
}

.labag--hero .labag__title {
    font-size: 1.25rem;
}

.labag--hero .labag__cta {
    width: 100%;
}

/* Cartão no hero do corpo clínico e das especialidades (v10.38.26): sem
   régua A–Z, então a grade é só "conteúdo | cartão" no desktop (≥ 1024px);
   abaixo disso o cartão desce para o fim do hero. O do catálogo de exames
   tem grade própria (.labexh__inner--cta), por causa da régua. */
.labmeh__inner--cta,
.labesph__inner--cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.labmeh__main,
.labesph__main {
    min-width: 0;
}

.labmeh__side,
.labesph__side {
    margin-top: 26px;
}

@media (min-width: 1024px) {
    .labmeh__inner--cta,
    .labesph__inner--cta {
        grid-template-columns: minmax(0, 1fr) 380px;
        align-items: center;
        column-gap: 56px;
    }

    .labmeh__side,
    .labesph__side {
        margin-top: 0;
    }
}

.labag__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ************************************************************
   LAB CTA BRILHO — anel de luz percorrendo a borda do CTA
   Usado em: resources/components/sections/lab-exames-catalogo.inc.php
             resources/components/sections/lab-exame-detalhe.inc.php
             resources/components/partials/lab-agende-cta.inc.php

   Como funciona: um quadrado com gradiente CÔNICO gira atrás do
   botão (::before) e o miolo é recoberto por um segundo pseudo
   (::after), sobrando só a faixa da borda — que é onde a luz
   aparece passando. O `overflow: hidden` recorta o quadrado no
   formato do botão, então serve para pill e para retângulo.

   Gira com transform em vez de animar o ângulo do gradiente: a
   interpolação de custom property exige @property, que ainda não
   é universal, enquanto rotação funciona em todo navegador.
   ************************************************************ */
.lab-cta-glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.lab-cta-glow::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 260%;
    aspect-ratio: 1;
    translate: -50% -50%;
    /* Faixa clara curta: é um reflexo passando, não um anel aceso */
    background: conic-gradient(
        transparent 0turn 0.60turn,
        rgba(255, 255, 255, 0.25) 0.70turn,
        rgba(255, 255, 255, 0.85) 0.75turn,
        rgba(255, 255, 255, 0.25) 0.80turn,
        transparent 0.90turn 1turn
    );
    animation: lab-cta-glow-spin 3.8s linear infinite;
}

/* Recobre o miolo: sobra só a borda de 2px com a luz passando.
   `inherit` faz o anel acompanhar a cor do botão no hover. */
.lab-cta-glow::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 2px;
    border-radius: inherit;
    background: inherit;
}

@keyframes lab-cta-glow-spin {
    to {
        rotate: 1turn;
    }
}

/* Movimento reduzido: sem brilho nenhum. Um anel parado seria só
   uma borda clara sem sentido. */
@media (prefers-reduced-motion: reduce) {
    .lab-cta-glow::before {
        display: none;
    }
}


/* ************************************************************
   LAB ESPECIALIDADES HERO — Hero da listagem de especialidades
   Arquivo: resources/components/heroes/lab-especialidades-hero.inc.php
   Serve /especialidades. Mesma família visual do hero de exames — as
   três páginas de catálogo têm que parecer um sistema só —, mas sem
   régua A–Z: são algumas dezenas de itens, e 26 letras quase todas
   apagadas seriam ruído.
   ************************************************************ */
.labesph {
    position: relative;
    overflow: hidden;
    padding: 52px 0 44px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

/* Textura de fundo: círculos em SVG, sem imagem externa e sem custo de rede */
.labesph__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
}

.labesph__bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.labesph__bg circle {
    fill: none;
    stroke: var(--white);
    stroke-width: 26;
}

.labesph__inner {
    position: relative;
    z-index: 1;
}

.labesph__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 0.82rem;
}

.labesph__crumb {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: var(--transition);
}

.labesph__crumb:hover,
.labesph__crumb:focus-visible {
    color: var(--white);
}

.labesph__crumb--current {
    color: var(--white);
    font-weight: 600;
}

.labesph__crumb-sep {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.labesph__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labesph__title {
    margin-top: 14px;
    font-family: var(--font-title);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    line-height: 1.15;
    color: var(--white);
}

.labesph__subtitle {
    margin-top: 12px;
    max-width: 640px;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

/* ---------- Busca (form GET: funciona sem JS) ---------- */
.labesph__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    max-width: 620px;
    padding: 6px 6px 6px 44px;
    border-radius: var(--radius-pill);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.labesph__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.labesph__search-icon {
    position: absolute;
    left: 18px;
    color: var(--gray-medium);
    font-size: 0.95rem;
}

.labesph__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
}

.labesph__search-input:focus {
    outline: none;
}

/* O foco visível vai para o contêiner inteiro: o input não tem borda própria */
.labesph__search:focus-within {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.labesph__search-btn {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    padding: 11px 24px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    transition: var(--transition);
}

.labesph__search-btn:hover,
.labesph__search-btn:focus-visible {
    background: var(--accent-hover);
}

.labesph__count {
    margin-top: 18px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.labesph__count strong {
    color: var(--white);
}

.labesph__clear {
    margin-left: 10px;
    color: var(--white);
    font-size: 0.84rem;
    text-decoration: underline;
    transition: var(--transition);
}

.labesph__clear:hover,
.labesph__clear:focus-visible {
    color: var(--accent);
}

@media (max-width: 768px) {
    .labesph {
        padding: 36px 0 32px;
    }

    .labesph__search {
        margin-top: 20px;
    }

    .labesph__search-btn {
        padding: 11px 16px;
    }
}


/* ************************************************************
   LAB ESPECIALIDADES GRID — Grade de cards das especialidades
   Arquivo: resources/components/sections/lab-especialidades-grid.inc.php

   CARD HORIZONTAL, ao contrário do card vertical com foto no topo de
   /procedimentos-medicos: são muitas especialidades numa página só, e o
   card deitado (miniatura quadrada à esquerda, texto à direita) empilha
   três por linha sem virar uma parede de fotos. O nome — o que o
   visitante procura — fica sempre na mesma altura em todos os cards.
   ************************************************************ */
.labespg {
    padding: 60px 0 76px;
    background: var(--gray-light);
}

/* O título da seção é redundante com o H1 do hero; fica só para leitor de tela */
.labespg__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.labespg__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    list-style: none;
}

.labespg__item {
    display: flex;
}

.labespg__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px;
    border-radius: calc(var(--radius) * 2);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: var(--transition);
}

/* Barra accent que cresce da base no hover — mesmo vocabulário do
   lab-exames-grid e do lab-noticias. */
.labespg__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.labespg__card:hover,
.labespg__card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.labespg__card:hover::after,
.labespg__card:focus-visible::after {
    transform: scaleX(1);
}

/* ---------- Miniatura ---------- */
.labespg__media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: calc(var(--radius) * 1.75);
    overflow: hidden;
    background: color-mix(in srgb, var(--primary) 8%, var(--white));
}

.labespg__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.labespg__card:hover .labespg__img {
    transform: scale(1.06);
}

/* Fallback quando a capa não existe no disco: ícone da própria
   especialidade, nunca imagem quebrada. */
.labespg__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--primary);
    font-size: 1.9rem;
}

/* ---------- Texto ---------- */
.labespg__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.labespg__name {
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
}

/* Resumo em 2 linhas: o texto do cliente varia de 45 a 300 caracteres,
   e sem o clamp os cards da mesma linha ficariam de alturas diferentes. */
.labespg__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--gray-medium);
}

.labespg__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 3px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
}

.labespg__cta-icon {
    font-size: 0.74rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.labespg__card:hover .labespg__cta-icon,
.labespg__card:focus-visible .labespg__cta-icon {
    transform: translateX(4px);
}

/* ---------- Estado vazio ---------- */
.labespg__empty {
    padding: 56px 24px;
    border-radius: calc(var(--radius) * 2);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.labespg__empty-icon {
    font-size: 2.4rem;
    color: var(--gray-medium);
}

.labespg__empty-title {
    margin-top: 16px;
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}

.labespg__empty-text {
    margin-top: 8px;
    font-size: 0.92rem;
    color: var(--gray-medium);
}

.labespg__empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.labespg__empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labespg__empty-cta:hover,
.labespg__empty-cta:focus-visible {
    background: var(--accent-hover);
}

.labespg__empty-cta--ghost {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.labespg__empty-cta--ghost:hover,
.labespg__empty-cta--ghost:focus-visible {
    background: var(--primary);
    color: var(--white);
}

/* ---------- Paginação ---------- */
.labespg__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
}

.labespg__page {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.labespg__page:hover,
.labespg__page:focus-visible {
    background: var(--primary);
    color: var(--white);
}

.labespg__page--active {
    background: var(--accent);
    color: var(--white);
    cursor: default;
}

.labespg__page--active:hover {
    background: var(--accent);
    color: var(--white);
}

/* ---------- Responsivo ---------- */
@media (min-width: 768px) {
    .labespg__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .labespg__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .labespg {
        padding: 40px 0 56px;
    }

    .labespg__media {
        width: 72px;
        height: 72px;
    }

    .labespg__fallback {
        font-size: 1.5rem;
    }

    .labespg__page-text {
        display: none;
    }
}


/* ************************************************************
   LAB ESPECIALIDADE HERO — Hero da página interna da especialidade
   Arquivo: resources/components/heroes/lab-especialidade-hero.inc.php
   Serve /especialidade/<slug>. Compacto: quem chega aqui vem do Google
   atrás do conteúdo, não de uma capa.
   ************************************************************ */
.labespdh {
    position: relative;
    overflow: hidden;
    padding: 44px 0 40px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

.labespdh__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.1;
}

.labespdh__bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.labespdh__bg circle {
    fill: none;
    stroke: var(--white);
    stroke-width: 24;
}

.labespdh__inner {
    position: relative;
    z-index: 1;
}

.labespdh__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.8rem;
}

.labespdh__crumb {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: var(--transition);
}

.labespdh__crumb:hover,
.labespdh__crumb:focus-visible {
    color: var(--white);
}

.labespdh__crumb--current {
    color: var(--white);
    font-weight: 600;
}

.labespdh__crumb-sep {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.5);
}

.labespdh__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labespdh__title {
    margin-top: 14px;
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 3.8vw, 2.45rem);
    line-height: 1.15;
    color: var(--white);
}

.labespdh__subtitle {
    margin-top: 12px;
    max-width: 720px;
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.labespdh__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.labespdh__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labespdh__cta:hover,
.labespdh__cta:focus-visible {
    background: var(--white);
    border-color: var(--white);
    color: var(--primary);
}

.labespdh__cta--primary {
    background: var(--accent);
    border-color: var(--accent);
}

.labespdh__cta--primary:hover,
.labespdh__cta--primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--white);
}

@media (max-width: 768px) {
    .labespdh {
        padding: 32px 0 30px;
    }

    .labespdh__cta {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* ************************************************************
   LAB ESPECIALIDADE DETALHE — Conteúdo + coluna sticky da interna
   Arquivo: resources/components/sections/lab-especialidade-detalhe.inc.php
   ************************************************************ */
.labespd {
    padding: 52px 0 70px;
    background: var(--white);
}

.labespd__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
}

@media (min-width: 1024px) {
    .labespd__inner {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 44px;
        align-items: start;
    }

    /* Sem conteúdo (especialidade ainda não descrita) a coluna única ocupa tudo */
    .labespd__inner--single {
        grid-template-columns: minmax(0, 1fr);
        max-width: 720px;
    }

    /* sticky depende de overflow-x: clip em html/body (linhas 46-56) —
       com overflow-x: hidden o navegador anula o sticky silenciosamente */
    .labespd__side {
        position: sticky;
        top: 24px;
    }
}

.labespd__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.labespd__figure {
    margin: 0 0 26px;
    border-radius: 14px;
    overflow: hidden;
}

/* Faixa recortada: a capa original é quase quadrada e em tela larga
   empurraria o texto — que é o que o visitante veio ler — para baixo da dobra. */
.labespd__cover {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .labespd__cover {
        max-height: 200px;
    }
}

/* ---------- Índice gerado por JS ---------- */
.labespd__toc {
    margin-bottom: 26px;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--gray-light);
    border-left: 4px solid var(--accent);
}

/* O atributo [hidden] só vale display:none na folha do navegador; sem esta
   regra explícita a classe venceria e o índice apareceria vazio */
.labespd__toc[hidden] {
    display: none;
}

.labespd__toc-title {
    font-family: var(--font-title);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gray-medium);
}

.labespd__toc-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.labespd__toc-list a {
    color: var(--primary);
    font-size: 0.92rem;
    line-height: 1.45;
    text-decoration: none;
    transition: var(--transition);
}

.labespd__toc-list a:hover,
.labespd__toc-list a:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

/* ---------- Prose: estiliza o HTML que vem do admin ---------- */
.labespd__prose {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.75;
}

.labespd__prose > *:first-child {
    margin-top: 0;
}

.labespd__prose p {
    margin: 0 0 16px;
}

.labespd__prose h2 {
    position: relative;
    margin: 34px 0 14px;
    padding-left: 14px;
    font-family: var(--font-title);
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    line-height: 1.3;
    color: var(--primary);
    scroll-margin-top: 24px;
}

.labespd__prose h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.18em;
    width: 4px;
    border-radius: 2px;
    background: var(--accent);
}

.labespd__prose h3 {
    margin: 26px 0 10px;
    font-family: var(--font-title);
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--primary-light);
    scroll-margin-top: 24px;
}

.labespd__prose h4 {
    margin: 20px 0 8px;
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--primary-light);
}

.labespd__prose strong {
    color: var(--primary);
    font-weight: 700;
}

.labespd__prose ul,
.labespd__prose ol {
    margin: 0 0 18px;
    padding: 0 0 0 4px;
    list-style: none;
}

.labespd__prose ol {
    counter-reset: labespd-ol;
}

.labespd__prose li {
    position: relative;
    padding: 5px 0 5px 24px;
    line-height: 1.65;
}

.labespd__prose ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.labespd__prose ol > li {
    counter-increment: labespd-ol;
}

.labespd__prose ol > li::before {
    content: counter(labespd-ol) ".";
    position: absolute;
    left: 0;
    top: 5px;
    color: var(--accent);
    font-weight: 700;
}

.labespd__prose a {
    color: var(--primary-light);
    text-decoration: underline;
    transition: var(--transition);
}

.labespd__prose a:hover,
.labespd__prose a:focus-visible {
    color: var(--accent);
}

.labespd__prose blockquote {
    margin: 0 0 18px;
    padding: 12px 18px;
    border-left: 4px solid var(--accent);
    background: var(--gray-light);
    border-radius: 0 8px 8px 0;
    color: var(--gray-dark);
}

/* Tabela larga rola dentro do próprio bloco — o body nunca rola na horizontal */
.labespd__prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 18px;
    font-size: 0.92rem;
}

.labespd__prose th,
.labespd__prose td {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 9px 12px;
    text-align: left;
}

.labespd__prose th {
    background: var(--gray-light);
    color: var(--primary);
}

/* ---------- Coluna lateral ---------- */
.labespd__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.labespd__card {
    padding: 20px;
    border-radius: 14px;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.labespd__card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.labespd__card--cta {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-color: transparent;
    color: var(--white);
}

.labespd__card-title--invert {
    color: var(--white);
}

.labespd__cta-text {
    margin: 10px 0 16px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.labespd__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 18px;
    margin-bottom: 10px;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labespd__cta:last-child {
    margin-bottom: 0;
}

.labespd__cta:hover,
.labespd__cta:focus-visible {
    background: var(--white);
    border-color: var(--white);
    color: var(--primary);
}

.labespd__cta--primary {
    background: var(--accent);
    border-color: var(--accent);
}

.labespd__cta--primary:hover,
.labespd__cta--primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--white);
}

/* ---------- Atalhos para os catálogos ---------- */
.labespd__links {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.labespd__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    background: var(--gray-light);
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

.labespd__link:hover,
.labespd__link:focus-visible {
    background: color-mix(in srgb, var(--primary) 10%, var(--white));
}

.labespd__link-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--white);
    color: var(--primary);
    font-size: 0.95rem;
}

.labespd__link-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.labespd__link-title {
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
}

.labespd__link-desc {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--gray-medium);
}

.labespd__link-arrow {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.76rem;
    color: var(--accent);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.labespd__link:hover .labespd__link-arrow,
.labespd__link:focus-visible .labespd__link-arrow {
    transform: translateX(4px);
}


/* ************************************************************
   LAB ESPECIALIDADES RELACIONADAS — "Outras especialidades"
   Arquivo: resources/components/sections/lab-especialidades-relacionadas.inc.php
   Formato de CHIP e não de card com foto: o bloco fica no pé de uma
   página já longa, e seis fotos competiriam com o CTA de agendamento.
   ************************************************************ */
.labespr {
    padding: 52px 0 64px;
    background: var(--gray-light);
}

.labespr__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.labespr__title {
    font-family: var(--font-title);
    font-size: clamp(1.3rem, 2.6vw, 1.65rem);
    color: var(--primary);
}

.labespr__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}

.labespr__all:hover,
.labespr__all:focus-visible {
    color: var(--accent-hover);
    text-decoration: underline;
}

.labespr__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    list-style: none;
}

.labespr__chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-pill);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

.labespr__chip:hover,
.labespr__chip:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.labespr__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 10%, var(--white));
    color: var(--primary);
    font-size: 0.9rem;
}

.labespr__name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-title);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labespr__arrow {
    flex: 0 0 auto;
    font-size: 0.76rem;
    color: var(--accent);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.labespr__chip:hover .labespr__arrow,
.labespr__chip:focus-visible .labespr__arrow {
    transform: translateX(4px);
}

@media (min-width: 640px) {
    .labespr__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .labespr__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Sub-item do índice: H3 recuado, para refletir a hierarquia do texto */
.labespd__toc-sub {
    padding-left: 14px;
}

.labespd__toc-sub a {
    font-size: 0.86rem;
    color: var(--gray-dark);
}


/* ************************************************************
   LAB UNIDADES HERO — Hero da listagem de unidades
   Arquivo: resources/components/heroes/lab-unidades-hero.inc.php
   Serve /unidades. Mesma família visual dos heroes de catálogo —
   as páginas de listagem do site têm que parecer um sistema só.
   A busca casa com nome, cidade e bairro: quem procura unidade
   digita o nome da cidade muito mais vezes que o da unidade.
   ************************************************************ */
.labunh {
    position: relative;
    overflow: hidden;
    padding: 52px 0 44px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

/* Textura de fundo: círculos em SVG, sem imagem externa e sem custo de rede */
.labunh__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
}

.labunh__bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.labunh__bg circle {
    fill: none;
    stroke: var(--white);
    stroke-width: 26;
}

.labunh__inner {
    position: relative;
    z-index: 1;
}

.labunh__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 0.82rem;
}

.labunh__crumb {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: var(--transition);
}

.labunh__crumb:hover,
.labunh__crumb:focus-visible {
    color: var(--white);
}

.labunh__crumb--current {
    color: var(--white);
    font-weight: 600;
}

.labunh__crumb-sep {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.labunh__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labunh__title {
    margin-top: 14px;
    font-family: var(--font-title);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    line-height: 1.15;
    color: var(--white);
}

.labunh__subtitle {
    margin-top: 12px;
    max-width: 660px;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

/* ---------- Busca (form GET: funciona sem JS) ---------- */
.labunh__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    max-width: 620px;
    padding: 6px 6px 6px 44px;
    border-radius: var(--radius-pill);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.labunh__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.labunh__search-icon {
    position: absolute;
    left: 18px;
    color: var(--gray-medium);
    font-size: 0.95rem;
}

.labunh__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
}

.labunh__search-input:focus {
    outline: none;
}

/* O foco visível vai para o contêiner inteiro: o input não tem borda própria */
.labunh__search:focus-within {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.labunh__search-btn {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    padding: 11px 24px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    transition: var(--transition);
}

.labunh__search-btn:hover,
.labunh__search-btn:focus-visible {
    background: var(--accent-hover);
}

.labunh__count {
    margin-top: 18px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.labunh__count strong {
    color: var(--white);
}

.labunh__clear {
    margin-left: 10px;
    color: var(--white);
    font-size: 0.84rem;
    text-decoration: underline;
    transition: var(--transition);
}

.labunh__clear:hover,
.labunh__clear:focus-visible {
    color: var(--accent);
}

@media (max-width: 768px) {
    .labunh {
        padding: 36px 0 32px;
    }

    .labunh__search {
        margin-top: 20px;
    }

    .labunh__search-btn {
        padding: 11px 16px;
    }
}


/* ************************************************************
   LAB UNIDADES GRID — Grade de cards das unidades
   Arquivo: resources/components/sections/lab-unidades-grid.inc.php
   CARD VERTICAL COM FOTO NO TOPO, ao contrário do card deitado das
   especialidades: aqui a fachada é informação — é por ela que o
   paciente reconhece o lugar ao chegar — e são poucas dezenas de
   itens, então a parede de fotos não se forma.
   Os filtros são links <a>, não botões com JS: cada recorte tem URL
   própria e a página funciona com o JavaScript desligado.
   ************************************************************ */
.labung {
    padding: 48px 0 64px;
    background: var(--gray-light);
}

.labung__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Filtros (chips) ---------- */
.labung__filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 30px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.labung__filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.labung__filter-label {
    flex: 0 0 auto;
    margin-right: 4px;
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gray-medium);
}

.labung__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.2;
    text-decoration: none;
    transition: var(--transition);
}

.labung__chip:hover,
.labung__chip:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(0, 0, 0, 0.02);
}

.labung__chip--active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
}

.labung__chip--active:hover,
.labung__chip--active:focus-visible {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--white);
}

.labung__chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.07);
    font-size: 0.68rem;
    font-weight: 700;
}

.labung__chip--active .labung__chip-count {
    background: rgba(255, 255, 255, 0.22);
}

/* ---------- Grade ---------- */
.labung__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.labung__item {
    display: flex;
}

.labung__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.labung__card:hover,
.labung__card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.labung__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--gray-light);
}

.labung__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.labung__card:hover .labung__img,
.labung__card:focus-visible .labung__img {
    transform: scale(1.05);
}

/* Sem foto o card não mostra imagem quebrada: ladrilho da marca */
.labung__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 2.4rem;
}

.labung__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.94);
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}

.labung__badge--posto {
    background: var(--accent);
    color: var(--white);
}

.labung__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 7px;
    padding: 18px 20px 20px;
}

.labung__name {
    font-family: var(--font-title);
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
}

.labung__city,
.labung__hours {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.86rem;
    color: var(--gray-dark);
}

.labung__meta-icon {
    flex: 0 0 auto;
    width: 14px;
    color: var(--accent);
    font-size: 0.82rem;
}

/* line-clamp em UMA linha: o endereço do cliente varia de 20 a 90
   caracteres, e sem o corte os cards da mesma linha ficariam com
   alturas diferentes */
.labung__addr {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--gray-medium);
}

.labung__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--font-title);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--accent);
}

.labung__cta-icon {
    font-size: 0.78rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.labung__card:hover .labung__cta-icon,
.labung__card:focus-visible .labung__cta-icon {
    transform: translateX(4px);
}

/* ---------- Estado vazio ---------- */
.labung__empty {
    padding: 48px 24px;
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.labung__empty-icon {
    font-size: 2.6rem;
    color: var(--gray-medium);
    opacity: 0.55;
}

.labung__empty-title {
    margin-top: 16px;
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}

.labung__empty-text {
    margin-top: 8px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--gray-medium);
}

.labung__empty-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.labung__empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labung__empty-cta:hover,
.labung__empty-cta:focus-visible {
    background: var(--accent-hover);
    color: var(--white);
}

.labung__empty-cta--ghost {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.14);
    color: var(--text);
}

.labung__empty-cta--ghost:hover,
.labung__empty-cta--ghost:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    color: var(--primary);
}

/* ---------- Paginação ---------- */
.labung__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 34px;
}

.labung__page {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    font-size: 0.88rem;
    text-decoration: none;
    transition: var(--transition);
}

.labung__page:hover,
.labung__page:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}

.labung__page--active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    font-weight: 700;
}

@media (max-width: 768px) {
    .labung {
        padding: 32px 0 48px;
    }

    .labung__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .labung__filters {
        padding: 14px 14px 16px;
    }

    /* Os chips rolam na horizontal em vez de empilhar 20 cidades em
       cinco linhas, o que empurraria a grade para baixo da dobra */
    .labung__filter-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .labung__chip {
        flex: 0 0 auto;
    }

    .labung__page-text {
        display: none;
    }
}


/* ************************************************************
   LAB UNIDADE HERO — Hero da página interna de uma unidade
   Arquivo: resources/components/heroes/lab-unidade-hero.inc.php
   Serve /unidade/<slug>. Responde de cara as três perguntas de quem
   chega: onde fica, como falo e como chego. A foto da fachada entra
   ao lado a partir de 1024px — ela é informação, não decoração: é
   por ela que o paciente reconhece o lugar ao chegar.
   ************************************************************ */
.labudh {
    position: relative;
    overflow: hidden;
    padding: 44px 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

.labudh__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
}

.labudh__bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.labudh__bg circle {
    fill: none;
    stroke: var(--white);
    stroke-width: 26;
}

.labudh__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: 38px;
}

/* Sem foto o texto ocupa a largura toda — coluna vazia seria buraco */
.labudh--nocover .labudh__inner {
    grid-template-columns: minmax(0, 1fr);
}

.labudh__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.82rem;
}

.labudh__crumb {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: var(--transition);
}

.labudh__crumb:hover,
.labudh__crumb:focus-visible {
    color: var(--white);
}

.labudh__crumb--current {
    color: var(--white);
    font-weight: 600;
}

.labudh__crumb-sep {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.labudh__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* Posto de coleta ganha o accent: a diferença importa para quem vai
   se deslocar — posto não faz consulta nem exame de imagem */
.labudh__badge--posto {
    background: var(--accent);
    color: var(--white);
}

.labudh__title {
    margin-top: 14px;
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 3.6vw, 2.45rem);
    line-height: 1.16;
    color: var(--white);
}

.labudh__addr {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

.labudh__addr-icon {
    margin-top: 4px;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.72);
}

.labudh__subtitle {
    margin-top: 10px;
    max-width: 620px;
    font-size: 0.97rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.labudh__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.labudh__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labudh__cta:hover,
.labudh__cta:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--white);
    color: var(--white);
}

.labudh__cta--primary {
    background: var(--accent);
    border-color: var(--accent);
}

.labudh__cta--primary:hover,
.labudh__cta--primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.labudh__figure {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.labudh__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .labudh__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* A foto vai para cima do texto no mobile: reconhecer a fachada
       vem antes de ler o endereço */
    .labudh__figure {
        order: -1;
    }
}

@media (max-width: 768px) {
    .labudh {
        padding: 30px 0 34px;
    }

    .labudh__actions {
        gap: 8px;
    }

    .labudh__cta {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* ************************************************************
   LAB GALERIA DE FOTOS — carrossel das fotos de uma unidade
   Arquivo: resources/components/partials/lab-galeria-fotos.inc.php
   Usado por: heroes/lab-unidade-hero, heroes/lab-lp2-hero e
   sections/lab-lp2-unidade (v10.36.0). A moldura (raio, sombra) é
   de cada componente; aqui fica só o mecanismo.

   PROGRESSIVO: sem JavaScript o trilho rola na mão e cada foto
   encaixa pelo scroll-snap (a barra fica visível, fina, como pista).
   O script.js marca .labgf--js, esconde a barra e revela setas e
   contador. Nada passa sozinho.
   ************************************************************ */
.labgf {
    position: relative;
    overflow: hidden;
}

.labgf__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.7) transparent;
}

.labgf__track:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: -3px;
}

.labgf--js .labgf__track {
    scrollbar-width: none;
}

.labgf--js .labgf__track::-webkit-scrollbar {
    display: none;
}

.labgf__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.labgf__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.labgf__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary);
    font-size: 1rem;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transform: translateY(-50%);
    transition: var(--transition);
}

.labgf__arrow--prev {
    left: 12px;
}

.labgf__arrow--next {
    right: 12px;
}

.labgf__arrow:hover,
.labgf__arrow:focus-visible {
    background: var(--white);
    color: var(--accent);
}

.labgf__arrow:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.labgf__count,
.labgf__hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    margin: 0;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    pointer-events: none;
}

.labgf__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Algo cobre a base da foto (a ficha do hero da LP): contador em cima */
.labgf--count-top .labgf__count,
.labgf--count-top .labgf__hint {
    top: 12px;
    bottom: auto;
}

/* [hidden] perde para o display de classe — regra explícita */
.labgf__arrow[hidden],
.labgf__count[hidden],
.labgf__hint[hidden] {
    display: none;
}

.labgf__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .labgf__arrow {
        transition: none;
    }
}


/* ************************************************************
   LAB UNIDADE DETALHE — Conteúdo da página interna da unidade
   Arquivo: resources/components/sections/lab-unidade-detalhe.inc.php
   Duas colunas a partir de 1024px, com a coluna da direita STICKY: a
   lista de especialidades de algumas unidades passa de 20 itens, e o
   endereço ficaria fora da tela justamente enquanto o visitante
   confere se a unidade atende o que ele precisa.
   O sticky só funciona porque html/body usam overflow-x: clip — com
   hidden ele é silenciosamente anulado.
   ************************************************************ */
.labudd {
    padding: 52px 0 60px;
    background: var(--white);
}

.labudd__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 40px;
}

/* Unidade sem texto, sem especialidade e sem serviço: o card de
   visita ocupa a largura toda em vez de deixar metade da tela branca */
.labudd__inner--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 680px;
    margin: 0 auto;
}

/* FICHA CURTA — coluna única, com a lateral virando faixa horizontal.
   Em duas colunas a altura da seção é ditada pela coluna mais alta, e a
   lateral (CTA + atalhos) é praticamente fixa em ~550px: posto de coleta,
   que tem de zero a dois itens de ficha, deixava de 150 a 280px de vão
   branco sob o conteúdo. O componente decide pelo tamanho da ficha e
   marca esta classe — sem JavaScript e sem medir nada no navegador. */
.labudd__inner--compact {
    grid-template-columns: minmax(0, 1fr);
    max-width: 920px;
    margin: 0 auto;
}

.labudd__inner--compact .labudd__side {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}

.labudd__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Coluna de conteúdo ---------- */
.labudd__prose {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
}

.labudd__prose p {
    margin-bottom: 16px;
}

.labudd__prose h2,
.labudd__prose h3 {
    margin: 26px 0 12px;
    font-family: var(--font-title);
    color: var(--primary);
}

.labudd__prose h2 {
    font-size: 1.28rem;
}

.labudd__prose h3 {
    font-size: 1.08rem;
}

.labudd__prose ul,
.labudd__prose ol {
    margin: 0 0 16px 22px;
}

.labudd__prose li {
    margin-bottom: 7px;
}

.labudd__prose a {
    color: var(--accent);
    text-decoration: underline;
}

.labudd__founded {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--gray-light);
    font-size: 0.87rem;
    color: var(--gray-dark);
}

.labudd__founded-icon {
    color: var(--accent);
}

/* Endereço e horário lado a lado NA COLUNA PRINCIPAL. Moraram na lateral até a
   v10.19.0: com quatro cards empilhados à direita, unidade de ficha curta (a
   Prime tem 7 especialidades e 1 serviço) abria um vão branco de centenas de
   pixels sob o conteúdo, porque a altura da seção é ditada pela coluna mais
   alta. Trazidos para cá, equilibram as duas colunas E ficam onde a informação
   mais procurada da página deveria estar desde o início. */
.labudd__info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.labudd__card--info {
    display: flex;
    flex-direction: column;
    background: var(--gray-light);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: none;
}

/* O "Como chegar" desce para o rodapé do painel, para os dois cards da linha
   terminarem alinhados mesmo com quantidades diferentes de linha de endereço */
.labudd__card--info .labudd__cta--ghost {
    margin-top: auto;
}

.labudd__block {
    margin-top: 32px;
}

.labudd__block-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
}

.labudd__block-title i {
    color: var(--accent);
    font-size: 0.95rem;
}

.labudd__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.labudd__chip-item {
    display: flex;
}

.labudd__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: var(--radius-pill);
    background: var(--gray-light);
    font-size: 0.87rem;
    line-height: 1.25;
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

/* O chip só vira link quando o nome casa com uma especialidade
   cadastrada — o restante fica inerte, porque link para 404 é pior
   que texto sem link */
.labudd__chip--link {
    border-color: rgba(0, 0, 0, 0.12);
    background: var(--white);
    color: var(--primary);
    font-weight: 600;
}

.labudd__chip--link:hover,
.labudd__chip--link:focus-visible {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
}

.labudd__chip-icon {
    font-size: 0.7rem;
    opacity: 0.65;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.labudd__chip--link:hover .labudd__chip-icon,
.labudd__chip--link:focus-visible .labudd__chip-icon {
    transform: translateX(3px);
    opacity: 1;
}

.labudd__chip--plain {
    color: var(--gray-dark);
}

/* ---------- Coluna lateral ---------- */
.labudd__side {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.labudd__card {
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.labudd__card--cta {
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

.labudd__card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.labudd__card-title i {
    color: var(--accent);
    font-size: 0.92rem;
}

.labudd__card-title--invert {
    color: var(--white);
}

.labudd__address {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-style: normal;
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--text);
}

.labudd__address-line:first-child {
    font-weight: 600;
    color: var(--primary);
}

.labudd__address-missing {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gray-medium);
}

.labudd__hours {
    margin: 0;
}

/* flex-wrap porque o horário do cliente nem sempre é "07:00 às 16:00": o IUR
   abre "Um sábado por mês, das 07:00 às 11:00". Sem o wrap, o valor longo
   espremia contra o rótulo em vez de descer para a própria linha. */
.labudd__hours-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 14px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.09);
}

.labudd__hours-row:last-child {
    border-bottom: 0;
}

.labudd__hours-day {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-dark);
}

.labudd__hours-time {
    margin: 0;
    text-align: right;
    font-size: 0.88rem;
    color: var(--text);
}

/* Feriado muda horário e o banco não sabe disso: o aviso é o que
   impede o site de virar promessa que a unidade não cumpre */
.labudd__hours-note {
    margin-top: 12px;
    font-size: 0.79rem;
    line-height: 1.5;
    color: var(--gray-medium);
}

.labudd__cta-text {
    margin-bottom: 14px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.labudd__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 9px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labudd__cta:hover,
.labudd__cta:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--white);
    color: var(--white);
}

.labudd__cta--primary {
    background: var(--accent);
    border-color: var(--accent);
}

.labudd__cta--primary:hover,
.labudd__cta--primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* O "Como chegar" vive num card claro, e não no card de CTA: precisa
   de contraste sobre fundo branco */
.labudd__cta--ghost {
    margin-top: 16px;
    border-color: rgba(0, 0, 0, 0.14);
    background: var(--gray-light);
    color: var(--primary);
}

.labudd__cta--ghost:hover,
.labudd__cta--ghost:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.labudd__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.labudd__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

.labudd__links li:last-child .labudd__link {
    border-bottom: 0;
}

.labudd__link:hover,
.labudd__link:focus-visible {
    color: var(--primary);
}

.labudd__link-icon {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    color: var(--accent);
}

.labudd__link-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.labudd__link-title {
    font-size: 0.9rem;
    font-weight: 600;
}

.labudd__link-desc {
    font-size: 0.78rem;
    color: var(--gray-medium);
}

.labudd__link-arrow {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--gray-medium);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.labudd__link:hover .labudd__link-arrow,
.labudd__link:focus-visible .labudd__link-arrow {
    transform: translateX(3px);
    color: var(--accent);
}

@media (max-width: 1024px) {
    .labudd__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    /* Empilhado, o sticky não tem para onde grudar e só criaria salto
       de rolagem */
    .labudd__side {
        position: static;
    }
}

@media (max-width: 768px) {
    .labudd {
        padding: 32px 0 44px;
    }

    .labudd__card {
        padding: 18px;
    }

    .labudd__info {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}


/* ************************************************************
   LAB UNIDADES PRÓXIMAS — "Outras unidades" no fim da interna
   Arquivo: resources/components/sections/lab-unidades-proximas.inc.php
   Fecha a página com saída em vez de beco. Mini-cards com foto, e
   não chips de texto: a fachada é o que faz o visitante reconhecer
   o lugar, e aqui ainda cabe mostrá-la.
   ************************************************************ */
.labudp {
    padding: 44px 0 56px;
    background: var(--gray-light);
}

.labudp__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 22px;
}

.labudp__title {
    font-family: var(--font-title);
    font-size: clamp(1.25rem, 2.6vw, 1.55rem);
    font-weight: 700;
    color: var(--primary);
}

.labudp__subtitle {
    flex: 1 1 auto;
    font-size: 0.9rem;
    color: var(--gray-medium);
}

.labudp__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}

.labudp__all:hover,
.labudp__all:focus-visible {
    color: var(--accent-hover);
}

.labudp__all-icon {
    font-size: 0.76rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.labudp__all:hover .labudp__all-icon,
.labudp__all:focus-visible .labudp__all-icon {
    transform: translateX(4px);
}

.labudp__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.labudp__item {
    display: flex;
}

.labudp__card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.labudp__card:hover,
.labudp__card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.labudp__media {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--gray-light);
}

.labudp__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.labudp__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.4rem;
}

.labudp__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.labudp__badge {
    font-family: var(--font-title);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--gray-medium);
}

.labudp__name {
    font-family: var(--font-title);
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
}

.labudp__city {
    font-size: 0.8rem;
    color: var(--gray-medium);
}

@media (max-width: 768px) {
    .labudp {
        padding: 32px 0 40px;
    }

    .labudp__grid {
        grid-template-columns: 1fr;
    }
}


/* ************************************************************
   LAB MEDICOS HERO — Hero da listagem do corpo clínico
   Arquivo: resources/components/heroes/lab-medicos-hero.inc.php
   Serve /corpo-clinico. Mesma família visual dos heroes de
   listagem — as páginas de lista do site têm que parecer um
   sistema só. A busca casa com nome e especialidade: metade das
   pessoas chega procurando "cardiologista", não o nome de quem
   atende. No site antigo essa busca era um POST que levava para
   outra página; aqui o resultado tem URL própria.
   ************************************************************ */
.labmeh {
    position: relative;
    overflow: hidden;
    padding: 52px 0 44px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

/* Textura de fundo: círculos em SVG, sem imagem externa e sem custo de rede */
.labmeh__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
}

.labmeh__bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.labmeh__bg circle {
    fill: none;
    stroke: var(--white);
    stroke-width: 26;
}

.labmeh__inner {
    position: relative;
    z-index: 1;
}

.labmeh__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 0.82rem;
}

.labmeh__crumb {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: var(--transition);
}

.labmeh__crumb:hover,
.labmeh__crumb:focus-visible {
    color: var(--white);
}

.labmeh__crumb--current {
    color: var(--white);
    font-weight: 600;
}

.labmeh__crumb-sep {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.labmeh__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labmeh__title {
    margin-top: 14px;
    font-family: var(--font-title);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    line-height: 1.15;
    color: var(--white);
}

.labmeh__subtitle {
    margin-top: 12px;
    max-width: 660px;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

/* ---------- Busca (form GET: funciona sem JS) ---------- */
.labmeh__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    max-width: 620px;
    padding: 6px 6px 6px 44px;
    border-radius: var(--radius-pill);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.labmeh__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.labmeh__search-icon {
    position: absolute;
    left: 18px;
    color: var(--gray-medium);
    font-size: 0.95rem;
}

.labmeh__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
}

.labmeh__search-input:focus {
    outline: none;
}

/* O foco visível vai para o contêiner inteiro: o input não tem borda própria */
.labmeh__search:focus-within {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.labmeh__search-btn {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    padding: 11px 24px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    transition: var(--transition);
}

.labmeh__search-btn:hover,
.labmeh__search-btn:focus-visible {
    background: var(--accent-hover);
}

.labmeh__count {
    margin-top: 18px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.labmeh__count strong {
    color: var(--white);
}

.labmeh__clear {
    margin-left: 10px;
    color: var(--white);
    font-size: 0.84rem;
    text-decoration: underline;
    transition: var(--transition);
}

.labmeh__clear:hover,
.labmeh__clear:focus-visible {
    color: var(--accent);
}

@media (max-width: 768px) {
    .labmeh {
        padding: 36px 0 34px;
    }

    .labmeh__search {
        padding-left: 38px;
    }

    .labmeh__search-btn {
        padding: 11px 16px;
    }
}


/* ************************************************************
   LAB MEDICOS GRID — Grade de cards do corpo clínico
   Arquivo: resources/components/sections/lab-medicos-grid.inc.php
   RETRATO QUADRADO NO TOPO, ao contrário do card 4:3 das unidades:
   aqui o assunto é o rosto, e o recorte quadrado mantém a cabeça
   centrada mesmo nas fotos verticais que vieram do site antigo.
   Quatro colunas a partir de 1200px: são ~140 pessoas, e três
   colunas dobrariam a rolagem sem ganho de leitura.
   O registro profissional não entra no card — é dado de
   conferência, e repetido 137 vezes vira ruído.
   ************************************************************ */
.labmeg {
    padding: 48px 0 64px;
    background: var(--gray-light);
}

.labmeg__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Grade ---------- */
.labmeg__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.labmeg__item {
    display: flex;
}

.labmeg__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.labmeg__card:hover,
.labmeg__card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.labmeg__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gray-light);
}

.labmeg__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Topo, e não centro: nas fotos verticais do site antigo o centro
       geométrico cai na altura do peito e corta o queixo */
    object-position: center top;
    display: block;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.labmeg__card:hover .labmeg__img,
.labmeg__card:focus-visible .labmeg__img {
    transform: scale(1.05);
}

/* Sem foto o card não mostra imagem quebrada: ladrilho da marca */
.labmeg__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 2.4rem;
}

.labmeg__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    padding: 16px 18px 18px;
}

.labmeg__name {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
}

/* line-clamp em DUAS linhas: a especialidade do cliente vai de
   "Nutrição" a "Cirurgia Cabeça - Pescoço - Punção de Tireoide", e
   sem o corte os cards da mesma linha ficariam desalinhados */
.labmeg__specialty {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--gray-dark);
}

.labmeg__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
}

.labmeg__cta-icon {
    font-size: 0.72rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.labmeg__card:hover .labmeg__cta-icon,
.labmeg__card:focus-visible .labmeg__cta-icon {
    transform: translateX(4px);
}

/* ---------- Estado vazio ---------- */
.labmeg__empty {
    padding: 48px 24px;
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.labmeg__empty-icon {
    font-size: 2.6rem;
    color: var(--gray-medium);
    opacity: 0.55;
}

.labmeg__empty-title {
    margin-top: 16px;
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}

.labmeg__empty-text {
    margin-top: 8px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--gray-medium);
}

.labmeg__empty-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.labmeg__empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labmeg__empty-cta:hover,
.labmeg__empty-cta:focus-visible {
    background: var(--accent-hover);
    color: var(--white);
}

.labmeg__empty-cta--ghost {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.14);
    color: var(--text);
}

.labmeg__empty-cta--ghost:hover,
.labmeg__empty-cta--ghost:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    color: var(--primary);
}

/* ---------- Paginação ---------- */
.labmeg__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 34px;
}

.labmeg__page {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    font-size: 0.88rem;
    text-decoration: none;
    transition: var(--transition);
}

.labmeg__page:hover,
.labmeg__page:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}

.labmeg__page--active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    font-weight: 700;
}

@media (max-width: 768px) {
    .labmeg {
        padding: 32px 0 48px;
    }

    /* Duas colunas no celular, não uma: card de pessoa é curto, e uma
       coluna só transformaria 137 fichas numa rolagem interminável */
    .labmeg__grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
    }

    .labmeg__body {
        padding: 12px 14px 14px;
    }

    .labmeg__name {
        font-size: 0.92rem;
    }

    .labmeg__specialty {
        font-size: 0.8rem;
    }

    .labmeg__page-text {
        display: none;
    }
}


/* ************************************************************
   LAB MEDICO HERO — Hero da ficha de um profissional
   Arquivo: resources/components/heroes/lab-medico-hero.inc.php
   Serve /corpo-clinico2/<slug>. Responde de cara quem é, o que faz
   e como marcar. O retrato entra ao lado a partir de 1024px.
   O "Marcar consulta" é uma ÂNCORA para o bloco de agendamento da
   mesma página — o modal do site antigo depende de Bootstrap JS e
   não faz nada quando o script é bloqueado.
   ************************************************************ */
.labmdh {
    position: relative;
    overflow: hidden;
    padding: 44px 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

.labmdh__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
}

.labmdh__bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.labmdh__bg circle {
    fill: none;
    stroke: var(--white);
    stroke-width: 26;
}

.labmdh__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 38px;
}

/* Sem foto o texto ocupa a largura toda — coluna vazia seria buraco */
.labmdh--nocover .labmdh__inner {
    grid-template-columns: minmax(0, 1fr);
}

.labmdh__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.82rem;
}

.labmdh__crumb {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: var(--transition);
}

.labmdh__crumb:hover,
.labmdh__crumb:focus-visible {
    color: var(--white);
}

.labmdh__crumb--current {
    color: var(--white);
    font-weight: 600;
}

.labmdh__crumb-sep {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.labmdh__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.labmdh__title {
    margin-top: 14px;
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    line-height: 1.15;
    color: var(--white);
}

/* Registro e títulos numa linha só, separados por espaço: é dado de
   conferência, não manchete. A sigla vem do cadastro (CRM, CRN, CRP,
   CREFITO…) — imprimir "CRM" fixo publicaria registro errado. */
.labmdh__registry {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.86);
}

.labmdh__registry-item strong {
    color: var(--white);
    font-weight: 700;
}

.labmdh__subtitle {
    margin-top: 12px;
    max-width: 620px;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.labmdh__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.labmdh__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labmdh__cta:hover,
.labmdh__cta:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.labmdh__cta--primary {
    background: var(--accent);
    border-color: var(--accent);
}

.labmdh__cta--primary:hover,
.labmdh__cta--primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.labmdh__figure {
    margin: 0;
}

.labmdh__photo {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    display: block;
    margin-left: auto;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
}

@media (max-width: 1024px) {
    .labmdh__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* Retrato ANTES do texto no mobile: é o que confirma ao visitante
       que ele abriu a ficha certa */
    .labmdh__figure {
        order: -1;
    }

    .labmdh__photo {
        max-width: 240px;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .labmdh {
        padding: 32px 0 34px;
    }

    .labmdh__cta {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* ************************************************************
   LAB MEDICO DETALHE — Conteúdo da ficha do profissional
   Arquivo: resources/components/sections/lab-medico-detalhe.inc.php
   Duas colunas a partir de 1024px, com a coluna da direita STICKY.
   O sticky só funciona porque html/body usam overflow-x: clip — com
   hidden ele é silenciosamente anulado.
   UM BLOCO SÓ para unidade e agendamento: no site antigo a mesma
   lista aparecia no texto e de novo dentro do modal.
   ************************************************************ */
.labmdd {
    padding: 52px 0 60px;
    background: var(--white);
}

.labmdd__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 40px;
}

/* Ficha sem formação e sem unidade: o card de contato ocupa a largura
   toda em vez de deixar metade da tela branca */
.labmdd__inner--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 680px;
    margin: 0 auto;
}

/* FICHA CURTA — coluna única, com a lateral virando faixa horizontal.
   Em duas colunas a altura da seção é ditada pela coluna mais alta, e a
   lateral (contato + atalhos) é praticamente fixa: 89 das 137 fichas do
   cliente não trazem texto de formação, e nelas a coluna principal
   terminava centenas de pixels antes da lateral. O componente decide
   pelo tamanho da ficha e marca esta classe — sem JavaScript e sem
   medir nada no navegador. */
.labmdd__inner--compact {
    grid-template-columns: minmax(0, 1fr);
    max-width: 920px;
    margin: 0 auto;
}

.labmdd__inner--compact .labmdd__side {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}

.labmdd__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Coluna de conteúdo ---------- */
.labmdd__block + .labmdd__block {
    margin-top: 30px;
}

.labmdd__block-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-family: var(--font-title);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--primary);
}

.labmdd__block-title i {
    color: var(--accent);
    font-size: 0.98rem;
}

.labmdd__block-note {
    margin-bottom: 14px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--gray-medium);
}

.labmdd__prose {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
}

.labmdd__prose p {
    margin-bottom: 16px;
}

.labmdd__prose h2,
.labmdd__prose h3 {
    margin: 26px 0 12px;
    font-family: var(--font-title);
    color: var(--primary);
}

.labmdd__prose h2 {
    font-size: 1.28rem;
}

.labmdd__prose h3 {
    font-size: 1.08rem;
}

.labmdd__prose ul,
.labmdd__prose ol {
    margin: 0 0 16px 22px;
}

.labmdd__prose li {
    margin-bottom: 7px;
}

.labmdd__prose a {
    color: var(--accent);
    text-decoration: underline;
}

/* ---------- Unidades + agendamento ---------- */
.labmdd__units {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.labmdd__unit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: var(--gray-light);
}

.labmdd__unit-name {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-title);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.labmdd__unit-name--link:hover,
.labmdd__unit-name--link:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

.labmdd__unit-icon {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 0.88rem;
}

.labmdd__unit-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labmdd__unit-cta:hover,
.labmdd__unit-cta:focus-visible {
    background: var(--accent-hover);
    color: var(--white);
}

/* O leitor de tela ouve "Marcar consulta com Fulana na unidade X": com
   vários botões iguais na página, só "Marcar consulta" não diz qual */
.labmdd__unit-cta-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.labmdd__units-note {
    margin-top: 14px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--gray-medium);
}

/* ---------- Coluna lateral ---------- */
.labmdd__side {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.labmdd__card {
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.labmdd__card--cta {
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

.labmdd__card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.labmdd__card-title i {
    color: var(--accent);
    font-size: 0.92rem;
}

.labmdd__card-title--invert {
    color: var(--white);
}

.labmdd__cta-text {
    margin-bottom: 14px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.labmdd__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 9px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labmdd__cta:hover,
.labmdd__cta:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.labmdd__cta--primary {
    background: var(--accent);
    border-color: var(--accent);
}

.labmdd__cta--primary:hover,
.labmdd__cta--primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.labmdd__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.labmdd__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

.labmdd__links li:last-child .labmdd__link {
    border-bottom: 0;
}

.labmdd__link:hover,
.labmdd__link:focus-visible {
    color: var(--primary);
}

.labmdd__link-icon {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    color: var(--accent);
}

.labmdd__link-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.labmdd__link-title {
    font-size: 0.9rem;
    font-weight: 600;
}

.labmdd__link-desc {
    font-size: 0.78rem;
    color: var(--gray-medium);
}

.labmdd__link-arrow {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--gray-medium);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.labmdd__link:hover .labmdd__link-arrow,
.labmdd__link:focus-visible .labmdd__link-arrow {
    transform: translateX(4px);
    color: var(--accent);
}

@media (max-width: 1024px) {
    .labmdd__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .labmdd__side {
        position: static;
    }
}

@media (max-width: 768px) {
    .labmdd {
        padding: 34px 0 44px;
    }

    .labmdd__card {
        padding: 18px;
    }

    /* Nome em cima, botão embaixo e largo: lado a lado, o nome de
       unidade longo ("Santo Antônio de Jesus - Unidade Centro")
       espremia o botão a ponto de cortar o rótulo */
    .labmdd__unit {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .labmdd__unit-cta {
        width: 100%;
        justify-content: center;
    }
}


/* ************************************************************
   LAB MEDICOS RELACIONADOS — "Outros profissionais" no fim da ficha
   Arquivo: resources/components/sections/lab-medicos-relacionados.inc.php
   Fecha a ficha com saída em vez de beco: quem não conseguiu horário
   com esta pessoa precisa da próxima. A lista já vem priorizando a
   MESMA especialidade, resolvida no ORDER BY do serviço.
   ************************************************************ */
.labmdr {
    padding: 44px 0 56px;
    background: var(--gray-light);
}

.labmdr__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 22px;
}

.labmdr__title {
    font-family: var(--font-title);
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 700;
    color: var(--primary);
}

.labmdr__subtitle {
    flex: 1 1 260px;
    font-size: 0.92rem;
    color: var(--gray-medium);
}

.labmdr__all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}

.labmdr__all-icon {
    font-size: 0.75rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.labmdr__all:hover .labmdr__all-icon,
.labmdr__all:focus-visible .labmdr__all-icon {
    transform: translateX(4px);
}

.labmdr__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.labmdr__item {
    display: flex;
}

.labmdr__card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.labmdr__card:hover,
.labmdr__card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.labmdr__media {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--gray-light);
}

.labmdr__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.labmdr__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.3rem;
}

.labmdr__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.labmdr__name {
    font-family: var(--font-title);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
}

.labmdr__specialty {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--gray-medium);
}

@media (max-width: 768px) {
    .labmdr {
        padding: 32px 0 40px;
    }

    .labmdr__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ************************************************************
   LAB LEGAL — documento legal (política de privacidade, termos)
   Arquivo: resources/components/sections/lab-legal.inc.php
   Documento longo é lido em varredura, não em sequência: o
   sumário fica sticky ao lado no desktop para o leitor saber
   onde está e pular para a cláusula que interessa. Medida de
   linha travada em ~72ch — texto jurídico em linha cheia de
   1280px é o que faz a pessoa desistir na segunda tela.
   ZERO JavaScript: sumário é <a href="#id">, âncora pura.
   ************************************************************ */
.lablegal {
    padding: 48px 0 64px;
    background: var(--white);
}

.lablegal__inner {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
}

/* ---------- Sumário ---------- */
.lablegal__toc {
    position: sticky;
    /* sticky depende de overflow-x: clip em html/body (linhas 46-56) —
       com overflow-x: hidden o navegador anula o sticky silenciosamente */
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    background: var(--gray-light);
}

.lablegal__toc-title {
    font-family: var(--font-title);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-medium);
    margin-bottom: 14px;
}

.lablegal__toc-list {
    counter-reset: lablegal-toc;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lablegal__toc-item {
    counter-increment: lablegal-toc;
    margin-bottom: 9px;
}

.lablegal__toc-item:last-child {
    margin-bottom: 0;
}

.lablegal__toc-link {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 4px;
    font-size: 0.83rem;
    line-height: 1.4;
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

.lablegal__toc-link::before {
    content: counter(lablegal-toc) ".";
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--gray-medium);
}

.lablegal__toc-link:hover,
.lablegal__toc-link:focus-visible {
    color: var(--primary);
}

.lablegal__toc-link:hover::before,
.lablegal__toc-link:focus-visible::before {
    color: var(--accent);
}

/* ---------- Documento ---------- */
.lablegal__doc {
    max-width: 72ch;
    color: var(--text);
}

.lablegal__head {
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 2px solid var(--gray-light);
}

.lablegal__title {
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--primary);
    margin-bottom: 12px;
}

.lablegal__updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--gray-light);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-medium);
}

.lablegal__lead {
    margin-top: 16px;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--gray-dark);
}

.lablegal__section-title {
    /* âncora do sumário não pode encostar no topo da janela */
    scroll-margin-top: 24px;
    font-family: var(--font-title);
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
    margin: 38px 0 14px;
    padding-left: 14px;
    border-left: 4px solid var(--accent);
}

.lablegal__subsection-title {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-light);
    margin: 26px 0 10px;
}

.lablegal__p {
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 14px;
    text-align: justify;
}

.lablegal__term {
    color: var(--primary);
}

.lablegal__list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.lablegal__item {
    position: relative;
    padding-left: 22px;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 12px;
    text-align: justify;
}

.lablegal__item::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.lablegal__sublist {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.lablegal__subitem {
    position: relative;
    padding-left: 18px;
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 6px;
    color: var(--gray-dark);
}

.lablegal__subitem::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 2px;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--gray-medium);
}

/* ---------- Bloco do controlador / DPO ---------- */
.lablegal__contact {
    margin: 18px 0 20px;
    padding: 20px 22px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    background: var(--gray-light);
}

.lablegal__contact-row {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 4px 16px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.lablegal__contact-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lablegal__contact-row:first-child {
    padding-top: 0;
}

.lablegal__contact-label {
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
}

.lablegal__contact-value {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text);
}

.lablegal__contact-value a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.lablegal__contact-value a:hover,
.lablegal__contact-value a:focus-visible {
    color: var(--accent-hover);
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .lablegal__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .lablegal__toc {
        position: static;
        max-height: none;
    }

    .lablegal__doc {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .lablegal {
        padding: 32px 0 44px;
    }

    .lablegal__p,
    .lablegal__item {
        text-align: left;
    }

    .lablegal__contact-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ************************************************************
   LAB LP — landing page de tráfego pago (família lab-lp-*)
   Arquivos: resources/components/{headers,heroes,sections,footers}/lab-lp-*.inc.php

   Mobile-first de verdade, não por convenção: o tráfego pago
   dessa campanha chega majoritariamente de celular, e é lá que
   a barra fixa (.lplbr) carrega a conversão. No desktop ela
   some e quem cumpre o papel são a faixa do meio e o
   fechamento.

   ZERO JavaScript em toda a família: o FAQ é <details name>
   nativo e os CTAs são <a>. A página inteira funciona com o
   script bloqueado.
   ************************************************************ */

/* Espaço para a barra fixa não cobrir o fim da página no celular.
   Só existe onde a barra existe (ver media query de 768px). */
.lpl-body {
    padding-bottom: 76px;
}

/* ---------- Header da LP (sem menu) ---------- */
.lplhd {
    position: relative;
    z-index: 20;
    padding: 12px 0;
    background: var(--white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: var(--shadow-sm);
}

.lplhd__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lplhd__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

.lplhd__logo {
    display: block;
    width: auto;
    height: 40px;
    max-width: 100%;
    object-fit: contain;
}

.lplhd__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lplhd__phone {
    display: none;
    align-items: center;
    gap: 8px;
    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

.lplhd__phone:hover,
.lplhd__phone:focus-visible {
    color: var(--accent);
}

.lplhd__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: #25d366;
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.lplhd__cta:hover,
.lplhd__cta:focus-visible {
    background: #1da851;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ---------- Hero ---------- */
.lplhr {
    position: relative;
    padding: 36px 0 40px;
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    overflow: hidden;
}

.lplhr__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.lplhr__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
}

.lplhr__title {
    font-family: var(--font-title);
    font-size: clamp(1.65rem, 6vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 14px;
}

.lplhr__sub {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    max-width: 56ch;
}

.lplhr__bullets {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.lplhr__bullet {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
}

.lplhr__bullet i {
    flex: 0 0 auto;
    margin-top: 0.2em;
    color: var(--white);
    opacity: 0.75;
}

.lplhr__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.lplhr__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-title);
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.lplhr__cta--primary {
    flex: 1 1 260px;
    background: #25d366;
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.lplhr__cta--primary:hover,
.lplhr__cta--primary:focus-visible {
    background: #1da851;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.lplhr__cta--ghost {
    flex: 0 1 auto;
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: var(--white);
}

.lplhr__cta--ghost:hover,
.lplhr__cta--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--white);
}

.lplhr__media {
    order: -1;
}

/* Card, não fundo sangrado: a foto do acervo tem 751px de largura e
   esticá-la num desktop entregaria imagem borrada justamente na
   página que está sendo paga. */
.lplhr__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

/* ---------- Seletor de exames ---------- */
.lplex {
    padding: 40px 0 44px;
    background: var(--white);
    scroll-margin-top: 16px;
}

.lplex__head {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto 26px;
}

.lplex__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--font-title);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.lplex__title {
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 4.5vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary);
    margin-bottom: 10px;
}

.lplex__intro {
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--gray-medium);
}

.lplex__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lplex__cell {
    display: flex;
}

.lplex__card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.lplex__card:hover,
.lplex__card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.lplex__media {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--gray-light);
}

.lplex__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lplex__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.5rem;
}

.lplex__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lplex__name {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
}

.lplex__desc {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--gray-medium);
}

.lplex__go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 700;
    color: #1da851;
}

.lplex__note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 68ch;
    margin: 20px auto 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--gray-light);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--gray-dark);
}

.lplex__note i {
    margin-top: 0.15em;
    color: var(--primary);
}

/* ---------- Faixa de conversão ---------- */
.lplfx {
    padding: 30px 0;
    background: var(--primary);
    color: var(--white);
}

.lplfx__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.lplfx__title {
    font-family: var(--font-title);
    font-size: clamp(1.15rem, 3.4vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 6px;
}

.lplfx__text {
    font-size: 0.94rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.lplfx__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lplfx__cta,
.lplfx__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: var(--radius-pill);
    font-family: var(--font-title);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.lplfx__cta {
    flex: 1 1 200px;
    background: #25d366;
    color: var(--white);
}

.lplfx__cta:hover,
.lplfx__cta:focus-visible {
    background: #1da851;
    transform: translateY(-2px);
}

.lplfx__phone {
    flex: 0 1 auto;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--white);
}

.lplfx__phone:hover,
.lplfx__phone:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--white);
}

/* ---------- Unidade ---------- */
.lplun {
    padding: 40px 0 44px;
    background: var(--gray-light);
}

.lplun__head {
    max-width: 62ch;
    margin-bottom: 24px;
}

.lplun__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--font-title);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.lplun__title {
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 4.5vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary);
    margin-bottom: 10px;
}

.lplun__summary {
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--gray-medium);
}

.lplun__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.lplun__info {
    display: grid;
    gap: 20px;
}

.lplun__label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    font-family: var(--font-title);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-medium);
}

.lplun__label i {
    color: var(--accent);
}

.lplun__address {
    display: grid;
    gap: 2px;
    font-style: normal;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
}

.lplun__maps {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.lplun__maps:hover,
.lplun__maps:focus-visible {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.lplun__hours {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.lplun__hour {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--white);
    font-size: 0.92rem;
    line-height: 1.5;
}

.lplun__hour-label {
    color: var(--gray-medium);
}

.lplun__hour-value {
    font-weight: 700;
    color: var(--primary);
}

.lplun__note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--white);
    border-left: 3px solid var(--accent);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--gray-dark);
}

.lplun__note i {
    margin-top: 0.15em;
    color: var(--accent);
}

.lplun__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

/* ---------- FAQ (details nativo, zero JS) ---------- */
.lplfq {
    padding: 40px 0 44px;
    background: var(--white);
}

.lplfq__inner {
    max-width: 800px;
}

.lplfq__head {
    margin-bottom: 22px;
}

.lplfq__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--font-title);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.lplfq__title {
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 4.5vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary);
}

.lplfq__intro {
    margin-top: 10px;
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--gray-medium);
}

.lplfq__list {
    display: grid;
    gap: 10px;
}

.lplfq__item {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: var(--white);
    overflow: hidden;
}

.lplfq__item[open] {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.lplfq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-title);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--primary);
}

/* O marcador padrão do <summary> duplicaria o chevron */
.lplfq__question::-webkit-details-marker {
    display: none;
}

.lplfq__question::marker {
    content: '';
}

.lplfq__chevron {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--accent);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.lplfq__item[open] .lplfq__chevron {
    transform: rotate(180deg);
}

.lplfq__answer {
    padding: 0 18px 16px;
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--text);
}

.lplfq__note {
    margin-top: 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--gray-medium);
}

/* ---------- Fechamento ---------- */
.lplfc {
    padding: 42px 0 46px;
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    scroll-margin-top: 16px;
}

.lplfc__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: center;
}

.lplfc__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--font-title);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.lplfc__title {
    font-family: var(--font-title);
    font-size: clamp(1.45rem, 5vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
}

.lplfc__text {
    font-size: 0.98rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    max-width: 52ch;
}

.lplfc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.lplfc__cta,
.lplfc__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-title);
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.lplfc__cta {
    flex: 1 1 250px;
    background: #25d366;
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.lplfc__cta:hover,
.lplfc__cta:focus-visible {
    background: #1da851;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.lplfc__phone {
    flex: 0 1 auto;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--white);
}

.lplfc__phone:hover,
.lplfc__phone:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--white);
}

.lplfc__hours {
    padding: 20px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
}

.lplfc__hours-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.lplfc__hours-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.lplfc__hours-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.lplfc__hours-label {
    color: rgba(255, 255, 255, 0.82);
}

.lplfc__hours-value {
    font-weight: 700;
}

.lplfc__hours-note {
    margin-top: 12px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
}

/* ---------- Barra fixa (só no celular) ---------- */
.lplbr {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    padding: 9px 14px;
    /* env(safe-area-inset-bottom) protege do gesto do iPhone; sem isso o
       botão fica embaixo da barra inferior do Safari e não se alcança. */
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.14);
}

/* `[hidden]` só vale display:none na folha do navegador e PERDE para o
   display de classe. Sem esta regra, esconder a barra pelo atributo
   não funciona. */
.lplbr[hidden] {
    display: none;
}

.lplbr__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 1280px;
    margin: 0 auto;
}

.lplbr__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--gray-medium);
}

.lplbr__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.lplbr__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: var(--primary);
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition);
}

.lplbr__phone:hover,
.lplbr__phone:focus-visible {
    background: var(--gray-light);
}

.lplbr__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    background: #25d366;
    color: var(--white);
    font-family: var(--font-title);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.lplbr__cta:hover,
.lplbr__cta:focus-visible {
    background: #1da851;
}

/* ---------- Footer enxuto ---------- */
.lplft {
    background: var(--primary);
    color: rgba(255, 255, 255, 0.9);
}

.lplft__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-block: 30px;
}

.lplft__logo {
    display: block;
    width: auto;
    height: 46px;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 12px;
}

.lplft__about {
    font-size: 0.88rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    max-width: 46ch;
}

.lplft__contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    align-content: start;
}

.lplft__contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.lplft__contact i {
    color: rgba(255, 255, 255, 0.6);
}

.lplft__contact a {
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
}

.lplft__contact a:hover,
.lplft__contact a:focus-visible {
    text-decoration: underline;
}

.lplft__bottom {
    padding-block: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lplft__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.lplft__copy {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.lplft__privacy {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--white);
    text-decoration: underline;
}

.lplft__note {
    margin-top: 10px;
    font-size: 0.76rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

/* ---------- 768px+ ---------- */
@media (min-width: 768px) {
    /* A barra fixa é instrumento de mobile. No desktop ela rouba área útil
       e a faixa do meio + o fechamento já cobrem a conversão. */
    .lplbr {
        display: none;
    }

    .lpl-body {
        padding-bottom: 0;
    }

    .lplhd__phone {
        display: inline-flex;
    }

    .lplhd__logo {
        height: 48px;
    }

    .lplhr {
        padding: 52px 0 56px;
    }

    .lplhr__bullets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 22px;
    }

    .lplex__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lplfx__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 26px;
    }

    .lplfx__actions {
        flex-wrap: nowrap;
    }

    .lplun__grid--media {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        gap: 30px;
    }

    .lplfc__inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        gap: 34px;
    }

    .lplft__inner {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 34px;
        padding-block: 38px;
    }
}

/* ---------- 1024px+ ---------- */
@media (min-width: 1024px) {
    .lplhr {
        padding: 64px 0 70px;
    }

    .lplhr__inner--media {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 46px;
    }

    /* A imagem volta para a direita: no mobile ela vem antes do texto
       (order:-1) porque foto de fachada é a prova mais rápida de que o
       lugar existe; no desktop os dois cabem lado a lado. */
    .lplhr__media {
        order: 0;
    }

    .lplex {
        padding: 56px 0 60px;
    }

    .lplex__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lplun,
    .lplfq {
        padding: 56px 0 60px;
    }
}


/* ************************************************************
   LAB LP2 — Landing page de tráfego pago, VERSÃO 2
   Arquivos: resources/components/{headers,heroes,sections,footers}/lab-lp2-*
   Rota: /labocliv-imagem-2

   Bloco INDEPENDENTE do `.lpl*` da v1 (/labocliv-imagem): as duas páginas
   existem para variar uma em relação à outra, então compartilhar regra faria
   um teste alterar o outro. Nenhum seletor daqui toca em classe da v1.

   Paleta: mesmas CSS variables do site (o header injeta as do tenant).
   O acordeão do FAQ é <details name> nativo. O único JS da página é o
   carrossel das fotos da unidade (v10.36.0, LAB GALERIA DE FOTOS), que
   é progressivo: sem script o trilho rola na mão.
   ************************************************************ */

.lp2-body {
    /* `clip`, nunca `hidden`: com hidden o position:sticky é silenciosamente
       anulado na página inteira (armadilha registrada no CLAUDE.md). */
    overflow-x: clip;

    --lp2-wa: #25d366;
    --lp2-wa-dark: #1da851;
    --lp2-ink: #12243d;
    --lp2-soft: #f4f7fb;
    --lp2-line: #e3e9f2;
    --lp2-muted: #5b6b80;
    --lp2-radius: 18px;
}

/* ---------- Cabeçalho de seção (compartilhado) ---------- */
.lp2-head {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}

.lp2-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.lp2-eyebrow--claro {
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
}

.lp2-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.5px;
    color: var(--lp2-ink);
}

.lp2-title--claro {
    color: var(--white);
}

.lp2-lead {
    margin: 16px 0 0;
    font-size: 1.04rem;
    line-height: 1.65;
    color: var(--lp2-muted);
}

.lp2-lead--claro {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Botões ---------- */
.lp2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.lp2-btn--grande {
    padding: 17px 34px;
    font-size: 1rem;
}

.lp2-btn--wa {
    background: var(--lp2-wa);
    color: var(--white);
    box-shadow: 0 12px 26px -12px rgba(37, 211, 102, 0.95);
}

.lp2-btn--wa:hover,
.lp2-btn--wa:focus-visible {
    background: var(--lp2-wa-dark);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgba(37, 211, 102, 0.95);
}

.lp2-btn--solid {
    background: var(--primary);
    color: var(--white);
}

.lp2-btn--solid:hover,
.lp2-btn--solid:focus-visible {
    background: var(--primary-light);
    transform: translateY(-2px);
}

.lp2-btn--ghost {
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--white);
}

.lp2-btn--ghost:hover,
.lp2-btn--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--white);
}

.lp2-btn--claro {
    background: var(--white);
    color: var(--primary);
}

.lp2-btn--claro:hover,
.lp2-btn--claro:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ============================================================
   HEADER
   ============================================================ */
.lp2hd__strip {
    background: var(--lp2-ink);
    color: rgba(255, 255, 255, 0.86);
}

.lp2hd__strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 0.8rem;
}

.lp2hd__strip-text {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.lp2hd__strip-text i {
    color: var(--lp2-wa);
}

.lp2hd__strip-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.lp2hd__strip-phone:hover,
.lp2hd__strip-phone:focus-visible {
    color: var(--lp2-wa);
}

.lp2hd {
    position: relative;
    z-index: 20;
    background: var(--white);
    border-bottom: 1px solid var(--lp2-line);
}

.lp2hd__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.lp2hd__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.lp2hd__logo {
    height: 62px;
    width: auto;
    display: block;
}

.lp2hd__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lp2hd__phone {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--lp2-ink);
    text-decoration: none;
}

.lp2hd__phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.95rem;
    transition: var(--transition);
}

.lp2hd__phone:hover .lp2hd__phone-icon {
    background: var(--primary);
    color: var(--white);
}

.lp2hd__phone-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.lp2hd__phone-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lp2-muted);
}

.lp2hd__phone-value {
    font-size: 0.95rem;
    font-weight: 700;
}

.lp2hd__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: var(--radius-pill);
    background: var(--lp2-wa);
    color: var(--white);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 22px -12px rgba(37, 211, 102, 0.95);
    transition: var(--transition);
}

.lp2hd__cta:hover,
.lp2hd__cta:focus-visible {
    background: var(--lp2-wa-dark);
    transform: translateY(-2px);
}

/* ============================================================
   HERO
   ============================================================ */
.lp2hero {
    position: relative;
    overflow: hidden;
    padding: 64px 0 72px;
    background: linear-gradient(135deg, var(--lp2-ink) 0%, var(--primary) 58%, var(--primary-light) 100%);
    color: var(--white);
}

/* Brilho de fundo — puramente decorativo, por isso em ::before. */
.lp2hero::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -140px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0%, transparent 68%);
    pointer-events: none;
}

.lp2hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 48px;
}

.lp2hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.lp2hero__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(2rem, 4.4vw, 3.15rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1px;
}

.lp2hero__highlight {
    display: block;
    color: #9fe8c3;
}

.lp2hero__lead {
    margin: 20px 0 0;
    max-width: 56ch;
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

.lp2hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.lp2hero__tel {
    margin: 16px 0 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.78);
}

.lp2hero__tel a {
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.lp2hero__tel a:hover,
.lp2hero__tel a:focus-visible {
    border-bottom-color: var(--white);
}

.lp2hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.lp2hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.lp2hero__badge i {
    color: #9fe8c3;
}

.lp2hero__aside {
    position: relative;
}

.lp2hero__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55);
}

/* Carrossel da galeria (v10.36.0, partial lab-galeria-fotos): a mesma
   moldura da foto única. O contador vai para o topo (.labgf--count-top)
   porque a ficha cobre os 46px de baixo. */
.lp2hero__gal {
    border-radius: 22px;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55);
}

/* Ficha: sobreposta quando há foto, autônoma quando não há. */
.lp2hero__card {
    padding: 20px 22px;
    border-radius: var(--lp2-radius);
    background: var(--white);
    color: var(--lp2-ink);
    box-shadow: var(--shadow-lg);
}

.lp2hero--com-foto .lp2hero__card {
    position: relative;
    z-index: 3;
    margin: -46px 18px 0;
}

.lp2hero__card-title {
    margin: 0 0 12px;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 800;
}

.lp2hero__card-row {
    display: flex;
    gap: 11px;
    margin: 0 0 10px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--lp2-muted);
}

.lp2hero__card-row i {
    margin-top: 3px;
    color: var(--primary);
}

.lp2hero__card-maps {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.lp2hero__card-maps:hover,
.lp2hero__card-maps:focus-visible {
    color: var(--accent);
}

/* Variante 'clean' (v10.38.29, layout pedido pelo usuário): fundo quase
   preto com brilho VERDE (o verde do WhatsApp, que é o canal da página) no
   canto inferior direito e um eco fraco atrás da foto; selo com contorno em
   vez de fundo. O ::before (brilho branco) dá lugar a riscos diagonais finos
   no canto superior direito. Cor fixa de propósito: é a arte da campanha,
   não a paleta do tenant. */
.lp2hero--clean {
    background:
        radial-gradient(ellipse 60% 75% at 100% 100%, rgba(37, 211, 102, 0.42) 0%, transparent 70%),
        radial-gradient(ellipse 45% 55% at 72% 45%, rgba(37, 211, 102, 0.14) 0%, transparent 70%),
        #121513;
}

.lp2hero--clean::before {
    top: 0;
    right: 0;
    width: 420px;
    height: 220px;
    border-radius: 0;
    background: repeating-linear-gradient(-35deg, rgba(37, 211, 102, 0.12) 0 1px, transparent 1px 26px);
    mask-image: linear-gradient(225deg, #000 0%, transparent 70%);
}

.lp2hero--clean .lp2hero__eyebrow {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

.lp2hero--clean .lp2hero__eyebrow i {
    color: #9fe8c3;
}

.lp2hero--clean .lp2hero__img,
.lp2hero--clean .lp2hero__gal {
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ============================================================
   SELETOR DE EXAMES
   ============================================================ */
.lp2ex {
    padding: 76px 0;
    background: var(--white);
}

/* Cartão-curinga em destaque, fora da grade. */
.lp2ex__featured {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
    padding: 24px 28px;
    border: 2px solid color-mix(in srgb, var(--lp2-wa) 45%, transparent);
    border-radius: var(--lp2-radius);
    background: linear-gradient(120deg, color-mix(in srgb, var(--lp2-wa) 9%, var(--white)) 0%, var(--white) 65%);
    color: var(--lp2-ink);
    text-decoration: none;
    transition: var(--transition);
}

.lp2ex__featured:hover,
.lp2ex__featured:focus-visible {
    border-color: var(--lp2-wa);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.lp2ex__featured-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 18px;
    background: var(--lp2-wa);
    color: var(--white);
    font-size: 1.5rem;
}

.lp2ex__featured-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
}

.lp2ex__featured-name {
    font-family: var(--font-title);
    font-size: 1.12rem;
    font-weight: 800;
}

.lp2ex__featured-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--lp2-muted);
}

.lp2ex__featured-go {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 13px 24px;
    border-radius: var(--radius-pill);
    background: var(--lp2-wa);
    color: var(--white);
    font-size: 0.88rem;
    font-weight: 700;
}

/* Ressalva de escopo — ANTES da grade, de propósito. */
.lp2ex__scope {
    display: flex;
    gap: 12px;
    margin: 0 0 26px;
    padding: 14px 18px;
    border-left: 4px solid var(--primary);
    border-radius: 0 12px 12px 0;
    background: var(--lp2-soft);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--lp2-muted);
}

.lp2ex__scope i {
    margin-top: 3px;
    color: var(--primary);
}

/* minmax de 300px resolve em 3 colunas na largura cheia — com os 6 exames de
   hoje isso dá duas fileiras completas (3+3). Com 230px cabiam 4 por fileira e
   a segunda ficava pela metade, que numa página de venda lê como lista
   inacabada. */
.lp2ex__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 0;
    list-style: none;
}

.lp2ex__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--lp2-line);
    border-radius: var(--lp2-radius);
    background: var(--white);
    color: var(--lp2-ink);
    text-decoration: none;
    transition: var(--transition);
}

.lp2ex__card:hover,
.lp2ex__card:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.lp2ex__media {
    display: block;
    position: relative;
    background: var(--lp2-soft);
}

.lp2ex__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lp2ex__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    color: var(--primary);
    font-size: 2.3rem;
}

.lp2ex__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
}

.lp2ex__name {
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.3;
}

.lp2ex__desc {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--lp2-muted);
}

.lp2ex__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--lp2-wa-dark);
}

.lp2ex__note {
    margin: 26px 0 0;
    text-align: center;
    font-size: 0.84rem;
    color: var(--lp2-muted);
}

/* ============================================================
   NÚMEROS (prova social)
   ============================================================ */
.lp2num {
    padding: 70px 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--lp2-ink) 100%);
    color: var(--white);
}

.lp2num__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 22px;
    padding: 0;
    list-style: none;
}

.lp2num__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 26px 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--lp2-radius);
    background: rgba(255, 255, 255, 0.07);
    text-align: center;
}

.lp2num__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #9fe8c3;
    font-size: 1.05rem;
}

.lp2num__value {
    font-family: var(--font-title);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
}

.lp2num__affix {
    font-size: 0.6em;
    font-weight: 700;
}

.lp2num__label {
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
}

.lp2num__note {
    margin: 26px 0 0;
    text-align: center;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   ANTES DE VIR (o que levar / preparo / resultado)
   ============================================================ */
.lp2prep {
    padding: 76px 0;
    background: var(--lp2-soft);
}

.lp2prep__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 22px;
    padding: 0;
    list-style: none;
}

.lp2prep__card {
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    border: 1px solid var(--lp2-line);
    border-radius: var(--lp2-radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.lp2prep__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 1.25rem;
}

.lp2prep__title {
    margin: 0 0 14px;
    font-family: var(--font-title);
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--lp2-ink);
}

.lp2prep__list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.lp2prep__list li {
    display: flex;
    gap: 11px;
    padding: 8px 0;
    font-size: 0.91rem;
    line-height: 1.55;
    color: var(--text);
}

.lp2prep__list li i {
    margin-top: 4px;
    flex-shrink: 0;
    color: var(--lp2-wa-dark);
}

.lp2prep__note {
    margin: auto 0 0;
    padding-top: 12px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--lp2-muted);
}

.lp2prep__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

.lp2prep__link:hover,
.lp2prep__link:focus-visible {
    gap: 13px;
    color: var(--accent);
}

/* ============================================================
   UNIDADE
   ============================================================ */
.lp2uni {
    padding: 76px 0;
    background: var(--white);
}

.lp2uni__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 44px;
}

.lp2uni__media {
    margin: 0;
}

.lp2uni__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
}

/* Carrossel da galeria (v10.36.0): a mesma moldura da foto única. */
.lp2uni__gal {
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
}

.lp2uni__block {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--lp2-line);
}

.lp2uni__block-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.lp2uni__block-title {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--lp2-muted);
}

.lp2uni__block-line {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.55;
    color: var(--lp2-ink);
}

.lp2uni__hours {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp2uni__hours li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.95rem;
}

.lp2uni__hours-label {
    color: var(--lp2-muted);
}

.lp2uni__hours-value {
    font-weight: 700;
    color: var(--lp2-ink);
}

.lp2uni__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.lp2uni__note {
    display: flex;
    gap: 11px;
    margin: 20px 0 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--lp2-muted);
}

.lp2uni__note i {
    margin-top: 3px;
    color: var(--primary);
}

/* ============================================================
   FAQ
   ============================================================ */
.lp2faq {
    padding: 76px 0;
    background: var(--lp2-soft);
}

.lp2faq__inner {
    max-width: 860px;
}

.lp2faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp2faq__item {
    overflow: hidden;
    border: 1px solid var(--lp2-line);
    border-radius: 14px;
    background: var(--white);
}

.lp2faq__item[open] {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    box-shadow: var(--shadow-sm);
}

.lp2faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp2-ink);
    list-style: none;
}

/* Remove o triângulo nativo nos dois motores. */
.lp2faq__q::-webkit-details-marker {
    display: none;
}

.lp2faq__q::marker {
    content: "";
}

.lp2faq__sign {
    flex-shrink: 0;
    color: var(--primary);
    transition: var(--transition);
}

.lp2faq__item[open] .lp2faq__sign {
    transform: rotate(45deg);
}

.lp2faq__a {
    padding: 0 22px 20px;
}

.lp2faq__a p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.68;
    color: var(--lp2-muted);
}

.lp2faq__note {
    margin: 24px 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--lp2-muted);
}

/* ============================================================
   FECHAMENTO
   ============================================================ */
.lp2fim {
    padding: 74px 0;
    background: linear-gradient(135deg, var(--lp2-ink) 0%, var(--primary) 100%);
    color: var(--white);
}

.lp2fim__inner {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    align-items: center;
    gap: 44px;
}

.lp2fim__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.lp2fim__text {
    margin: 14px 0 0;
    max-width: 58ch;
    font-size: 1.02rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
}

.lp2fim__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

.lp2fim__reassurance {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

.lp2fim__hours {
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--lp2-radius);
    background: rgba(255, 255, 255, 0.08);
}

.lp2fim__hours-title {
    margin: 0 0 14px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.lp2fim__hours ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp2fim__hours li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.92rem;
}

.lp2fim__hours-label {
    color: rgba(255, 255, 255, 0.78);
}

.lp2fim__hours-value {
    font-weight: 700;
}

/* ============================================================
   BARRA FIXA — só no celular; quem a liga é a media query lá embaixo.
   ============================================================ */
.lp2barra {
    display: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.lp2ft {
    background: var(--lp2-ink);
    color: rgba(255, 255, 255, 0.78);
}

.lp2ft__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding-top: 46px;
    padding-bottom: 32px;
}

.lp2ft__brand {
    max-width: 460px;
}

.lp2ft__logo {
    display: block;
    height: 54px;
    width: auto;
    margin-bottom: 14px;
    filter: brightness(0) invert(1);
}

.lp2ft__about {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
}

.lp2ft__contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp2ft__contact li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 0;
    font-size: 0.92rem;
}

.lp2ft__contact li i {
    color: var(--lp2-wa);
}

.lp2ft__contact a {
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
}

.lp2ft__contact a:hover,
.lp2ft__contact a:focus-visible {
    color: var(--lp2-wa);
}

.lp2ft__aviso {
    display: flex;
    gap: 12px;
    margin: 0 0 26px;
    padding: 14px 18px;
    border-left: 4px solid rgba(255, 255, 255, 0.28);
    border-radius: 0 12px 12px 0;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
    line-height: 1.6;
}

.lp2ft__aviso i {
    margin-top: 3px;
    flex-shrink: 0;
}

.lp2ft__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.lp2ft__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.lp2ft__copy {
    margin: 0;
    font-size: 0.82rem;
}

.lp2ft__links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.lp2ft__links a {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

.lp2ft__links a:hover,
.lp2ft__links a:focus-visible {
    color: var(--white);
    text-decoration: underline;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1024px) {

    .lp2hero__inner,
    .lp2uni__inner,
    .lp2fim__inner {
        grid-template-columns: 1fr;
    }

    .lp2hero__inner {
        gap: 38px;
    }

    .lp2hd__phone-text {
        display: none;
    }
}

@media (max-width: 860px) {

    .lp2hd__strip {
        display: none;
    }

    .lp2ex__featured {
        flex-wrap: wrap;
        gap: 16px;
    }

    .lp2ex__featured-go {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {

    .lp2hero {
        padding: 44px 0 52px;
    }

    .lp2ex,
    .lp2num,
    .lp2prep,
    .lp2uni,
    .lp2faq,
    .lp2fim {
        padding: 54px 0;
    }

    .lp2hero__actions .lp2-btn,
    .lp2fim__actions .lp2-btn {
        flex: 1 1 100%;
    }

    .lp2hd__logo {
        height: 48px;
    }

    .lp2hd__cta span {
        display: none;
    }

    .lp2hd__cta {
        padding: 13px 16px;
        font-size: 1.1rem;
    }

    .lp2ex__grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }

    /* A barra fixa existe SÓ aqui: no desktop o header já mantém o CTA à
       vista, e uma faixa fixa só roubaria altura útil. */
    .lp2barra {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: var(--white);
        border-top: 1px solid var(--lp2-line);
        box-shadow: 0 -8px 24px -14px rgba(0, 0, 0, 0.45);
    }

    .lp2barra__label {
        flex: 1 1 auto;
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--lp2-ink);
    }

    .lp2barra__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .lp2barra__tel,
    .lp2barra__cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 18px;
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
        font-weight: 700;
        text-decoration: none;
    }

    .lp2barra__tel {
        background: color-mix(in srgb, var(--primary) 10%, transparent);
        color: var(--primary);
    }

    .lp2barra__cta {
        background: var(--lp2-wa);
        color: var(--white);
    }

    /* Sem este respiro a barra fixa cobre a última linha do rodapé. */
    .lp2ft__bottom-inner {
        padding-bottom: 82px;
    }

    /* v10.31.1 — a LP passou a usar o header e o footer do SITE, e o footer do
       site traz o balão da Tati, que o usuário quer nesta página. Sem as regras
       abaixo, no celular o balão ficava EM CIMA do botão "Agendar" da barra
       (os dois fixos no canto inferior direito). O balão sobe para logo acima
       da barra — a saudação acompanha, porque é posicionada em relação a ele;
       a janela aberta já ocupa a tela inteira, acima da barra (z-index).
       67px = altura medida da barra em 375px e em 600px. `.lp2-body` só existe
       nesta página, então o chat do resto do site não se mexe. */
    .lp2-body {
        --lp2-barra-h: calc(67px + env(safe-area-inset-bottom));
    }

    /* v10.38.32: o botão de WhatsApp que substitui a Maria desligada sobe
       pelo mesmo motivo. */
    .lp2-body .ac1-widget,
    .lp2-body .labwa {
        bottom: calc(var(--lp2-barra-h) + 12px);
    }

    /* Mesmo respiro do .lp2ft__bottom-inner acima, agora no rodapé do site. */
    .lp2-body .labft__bottom-inner {
        padding-bottom: calc(var(--lp2-barra-h) + 20px);
    }
}

@media (max-width: 520px) {

    .lp2barra__label {
        display: none;
    }

    .lp2barra__actions {
        width: 100%;
    }

    .lp2barra__tel,
    .lp2barra__cta {
        flex: 1 1 0;
        justify-content: center;
    }
}


/* ************************************************************
   LABOCLIV IMAGEM — paleta da marca na LP /labocliv-imagem (v10.32.6)
   Escopo: `.lp-imagem`, classe do <body> vinda do PageMap (`bodyClass`).

   Paleta do cliente: #212121 (base) · #ec744e (destaque) · #7c7c7c (texto
   secundário) · #c5c5c5 (linhas). Redefinir as VARIÁVEIS no <body> repinta
   header, seções lab-lp2-*, etapas, convênios, formulário, footer e o balão
   do chat sem regra duplicada — o bloco de tema do header vale no :root, e
   o <body> vence por herança.

   `--primary-light` NÃO é #7c7c7c: ele é fundo de texto branco (fim do
   degradê do hero, hover do botão sólido) e #7c7c7c daria contraste 4,2:1.
   Sai da MISTURA das duas cores da paleta (~#3a3a3a, contraste > 11:1).

   O verde do WhatsApp (`--lp2-wa`) fica: é a cor do canal, não da marca, e é
   o que o visitante reconhece como "falar no WhatsApp".
   ************************************************************ */
.lp-imagem {
    --primary: #212121;
    --primary-light: #3a3a3a;
    --primary-light: color-mix(in srgb, #212121 72%, #7c7c7c);
    --accent: #ec744e;
    --accent-hover: #c95a36;
    --text: #212121;
    --gray-dark: #212121;
    --gray-medium: #7c7c7c;
    --gray-light: #f3f3f3;
    --gray-light: color-mix(in srgb, #c5c5c5 22%, #ffffff);

    --lp2-ink: #212121;
    --lp2-muted: #7c7c7c;
    --lp2-line: #c5c5c5;
    --lp2-soft: #f3f3f3;
    --lp2-soft: color-mix(in srgb, #c5c5c5 22%, #ffffff);

    /* Balão de chat: o widget.css resolve `--ac1-*` a partir de `--primary`
       no :root, ANTES deste escopo — por isso as cores são repetidas aqui.
       O ponto verde de "online" fica: ali a cor é status, não marca. */
    --ac1-primary: #212121;
    --ac1-primary-light: var(--primary-light);
    --ac1-primary-dark: #000000;
    --ac1-accent: #ec744e;
    --ac1-bg-user: #212121;
    --ac1-text: #212121;
    --ac1-text-light: #7c7c7c;
    --ac1-border: #c5c5c5;
}

/* Campos do formulário de contato: borda fixa azulada → linha da paleta. */
.lp-imagem .labform__field input,
.lp-imagem .labform__field select,
.lp-imagem .labform__field textarea {
    border-color: #c5c5c5;
}

/* Destaques que eram verde-menta FIXO (#9fe8c3) sobre fundo escuro: no hero,
   nos números e nos ícones do rodapé. Laranja sobre #212121 = 5,3:1. */
.lp-imagem .lp2hero__highlight,
.lp-imagem .lp2hero__badge i,
.lp-imagem .lp2num__icon,
.lp-imagem .labft__faixa-titulo i,
.lp-imagem .labft__todos,
.lp-imagem .labft__sede i {
    color: var(--accent);
}


/* ************************************************************
   LAB COLETA DOMICILIAR — página /coleta-domiciliar
   Arquivos: resources/components/{heroes,sections}/lab-coleta-*
   Rota: /coleta-domiciliar (página do SITE, com header e footer completos)

   Bloco independente do `.lp2*` (landing page de imagem): aquilo é destino de
   anúncio, isto é página institucional com menu. Compartilhar regra faria uma
   mexida na campanha alterar o site.

   ZERO JavaScript — o acordeão do FAQ é <details name> nativo.
   ************************************************************ */

/* ---------- Tokens locais ----------
   Escopados no topo da página, e não em :root, para não vazarem para o resto
   do site: o lab-header já injeta as variáveis do tenant em :root e um token
   homônimo aqui sobrescreveria a home inteira. */
.labcmh,
.labcmp,
.labcmt,
.labcmc,
.labcmr,
.labcmf,
.labcmcta {
    --labcm-wa: #25d366;
    --labcm-wa-dark: #1da851;
    --labcm-ink: #12243d;
    --labcm-soft: #f4f7fb;
    --labcm-line: #e3e9f2;
    --labcm-muted: #5b6b80;
    --labcm-radius: 18px;
}

/* ---------- Cabeçalho de seção ---------- */
.labcm-head {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}

.labcm-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labcm-eyebrow--claro {
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
}

.labcm-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.5px;
    color: var(--labcm-ink);
}

.labcm-lead {
    margin: 16px 0 0;
    font-size: 1.04rem;
    line-height: 1.65;
    color: var(--labcm-muted);
}

/* ---------- Botões ---------- */
.labcm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.labcm-btn--grande {
    padding: 17px 34px;
    font-size: 1rem;
}

.labcm-btn--wa {
    background: var(--labcm-wa);
    color: var(--white);
    box-shadow: 0 12px 26px -12px rgba(37, 211, 102, 0.95);
}

.labcm-btn--wa:hover,
.labcm-btn--wa:focus-visible {
    background: var(--labcm-wa-dark);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgba(37, 211, 102, 0.95);
}

.labcm-btn--ghost {
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--white);
}

.labcm-btn--ghost:hover,
.labcm-btn--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--white);
}

.labcm-btn--claro {
    background: var(--white);
    color: var(--primary);
}

.labcm-btn--claro:hover,
.labcm-btn--claro:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ============================================================
   HERO
   ============================================================ */
.labcmh {
    position: relative;
    overflow: hidden;
    padding: 62px 0 70px;
    background: linear-gradient(135deg, var(--labcm-ink) 0%, var(--primary) 58%, var(--primary-light) 100%);
    color: var(--white);
}

.labcmh::before {
    content: "";
    position: absolute;
    top: -200px;
    right: -160px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0%, transparent 68%);
    pointer-events: none;
}

.labcmh__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 48px;
}

.labcmh__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.labcmh__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1px;
}

.labcmh__highlight {
    display: block;
    color: #9fe8c3;
}

.labcmh__lead {
    margin: 20px 0 0;
    max-width: 56ch;
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

.labcmh__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.labcmh__tel {
    margin: 16px 0 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.78);
}

.labcmh__tel a {
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.labcmh__tel a:hover,
.labcmh__tel a:focus-visible {
    border-bottom-color: var(--white);
}

.labcmh__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.labcmh__badges li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.labcmh__badges i {
    color: #9fe8c3;
}

.labcmh__aside {
    position: relative;
}

.labcmh__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55);
}

.labcmh__card {
    padding: 26px 28px;
    border-radius: var(--labcm-radius);
    background: var(--white);
    color: var(--labcm-ink);
    box-shadow: var(--shadow-lg);
}

.labcmh__img + .labcmh__card {
    position: relative;
    margin: -46px 18px 0;
}

.labcmh__card-title {
    margin: 0 0 16px;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 800;
}

.labcmh__card-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.labcmh__card-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 10px 0;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--labcm-muted);
}

.labcmh__card-list li + li {
    border-top: 1px solid var(--labcm-line);
}

.labcmh__card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
}

/* ============================================================
   PARA QUEM É
   ============================================================ */
.labcmp {
    padding: 76px 0;
    background: var(--white);
}

.labcmp__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 0;
    list-style: none;
}

.labcmp__card {
    padding: 28px 26px;
    border: 1px solid var(--labcm-line);
    border-radius: var(--labcm-radius);
    background: var(--white);
    transition: var(--transition);
}

.labcmp__card:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.labcmp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 1.25rem;
}

.labcmp__card-title {
    margin: 0 0 8px;
    font-family: var(--font-title);
    font-size: 1.06rem;
    font-weight: 800;
    color: var(--labcm-ink);
}

.labcmp__card-text {
    margin: 0;
    font-size: 0.91rem;
    line-height: 1.6;
    color: var(--labcm-muted);
}

.labcmp__note {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 30px auto 0;
    max-width: 760px;
    padding: 14px 18px;
    border-left: 4px solid var(--primary);
    border-radius: 0 12px 12px 0;
    background: var(--labcm-soft);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--labcm-muted);
}

.labcmp__note i {
    margin-top: 3px;
    flex-shrink: 0;
    color: var(--primary);
}

/* ============================================================
   COMO FUNCIONA (trilha numerada)
   ============================================================ */
.labcmt {
    padding: 76px 0;
    background: var(--labcm-soft);
}

.labcmt__trilha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.labcmt__passo {
    position: relative;
    padding-top: 40px;
}

/* A linha que liga um passo ao outro. Some no último e no layout de coluna
   única — trilha que continua para o nada é ruído visual. */
.labcmt__passo::before {
    content: "";
    position: absolute;
    top: 24px;
    left: calc(50% + 32px);
    right: -24px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--labcm-line) 0 8px, transparent 8px 14px);
}

.labcmt__passo:last-child::before {
    display: none;
}

.labcmt__marcador {
    position: absolute;
    top: 0;
    left: calc(50% - 24px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 10px 22px -12px var(--primary);
}

.labcmt__num {
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 800;
}

.labcmt__corpo {
    height: 100%;
    padding: 34px 24px 26px;
    border: 1px solid var(--labcm-line);
    border-radius: var(--labcm-radius);
    background: var(--white);
    text-align: center;
}

.labcmt__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.labcmt__passo-title {
    margin: 0 0 8px;
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--labcm-ink);
}

.labcmt__passo-text {
    margin: 0;
    font-size: 0.89rem;
    line-height: 1.6;
    color: var(--labcm-muted);
}

.labcmt__cta {
    margin-top: 40px;
    text-align: center;
}

/* ============================================================
   ONDE ATENDEMOS
   ============================================================ */
.labcmc {
    padding: 76px 0;
    background: var(--white);
}

.labcmc__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
}

.labcmc__text {
    max-width: 52ch;
}

.labcmc__cta {
    margin-top: 26px;
}

.labcmc__note {
    display: flex;
    gap: 11px;
    margin: 22px 0 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--labcm-muted);
}

.labcmc__note i {
    margin-top: 3px;
    flex-shrink: 0;
    color: var(--primary);
}

.labcmc__mapa {
    padding: 30px 28px;
    border: 1px solid var(--labcm-line);
    border-radius: var(--labcm-radius);
    background: var(--labcm-soft);
}

.labcmc__mapa-title {
    margin: 0 0 16px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--labcm-muted);
}

.labcmc__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.labcmc__chip {
    padding: 7px 14px;
    border: 1px solid var(--labcm-line);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--labcm-ink);
}

.labcmc__mapa-note {
    margin: 18px 0 0;
    font-size: 0.85rem;
    color: var(--labcm-muted);
}

.labcmc__mapa-note a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.labcmc__mapa-note a:hover,
.labcmc__mapa-note a:focus-visible {
    text-decoration: underline;
}

/* ============================================================
   ANTES DA VISITA
   ============================================================ */
.labcmr {
    padding: 76px 0;
    background: var(--labcm-soft);
}

.labcmr__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 22px;
    padding: 0;
    list-style: none;
}

.labcmr__card {
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    border: 1px solid var(--labcm-line);
    border-radius: var(--labcm-radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.labcmr__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 1.25rem;
}

.labcmr__title {
    margin: 0 0 14px;
    font-family: var(--font-title);
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--labcm-ink);
}

.labcmr__list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.labcmr__list li {
    display: flex;
    gap: 11px;
    padding: 8px 0;
    font-size: 0.91rem;
    line-height: 1.55;
    color: var(--text);
}

.labcmr__list li i {
    margin-top: 4px;
    flex-shrink: 0;
    color: var(--labcm-wa-dark);
}

.labcmr__note {
    margin: auto 0 0;
    padding-top: 12px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--labcm-muted);
}

.labcmr__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

.labcmr__link:hover,
.labcmr__link:focus-visible {
    gap: 13px;
    color: var(--accent);
}

/* ============================================================
   FAQ
   ============================================================ */
.labcmf {
    padding: 76px 0;
    background: var(--white);
}

.labcmf__inner {
    max-width: 860px;
}

.labcmf__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.labcmf__item {
    overflow: hidden;
    border: 1px solid var(--labcm-line);
    border-radius: 14px;
    background: var(--white);
}

.labcmf__item[open] {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    box-shadow: var(--shadow-sm);
}

.labcmf__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--labcm-ink);
    list-style: none;
}

.labcmf__q::-webkit-details-marker {
    display: none;
}

.labcmf__q::marker {
    content: "";
}

.labcmf__sign {
    flex-shrink: 0;
    color: var(--primary);
    transition: var(--transition);
}

.labcmf__item[open] .labcmf__sign {
    transform: rotate(45deg);
}

.labcmf__a {
    padding: 0 22px 20px;
}

.labcmf__a p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.68;
    color: var(--labcm-muted);
}

.labcmf__note {
    margin: 24px 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--labcm-muted);
}

/* ============================================================
   FECHAMENTO
   ============================================================ */
.labcmcta {
    padding: 74px 0;
    background: linear-gradient(135deg, var(--labcm-ink) 0%, var(--primary) 100%);
    color: var(--white);
}

.labcmcta__inner {
    max-width: 760px;
    text-align: center;
}

.labcmcta__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.labcmcta__text {
    margin: 14px auto 0;
    max-width: 58ch;
    font-size: 1.02rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
}

.labcmcta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

.labcmcta__reassurance {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 20px 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1024px) {

    .labcmh__inner,
    .labcmc__inner {
        grid-template-columns: 1fr;
        gap: 38px;
    }
}

@media (max-width: 860px) {

    /* Em coluna única a trilha pontilhada ligaria os passos na horizontal
       enquanto eles empilham na vertical. Sai. */
    .labcmt__passo::before {
        display: none;
    }
}

@media (max-width: 768px) {

    .labcmh {
        padding: 44px 0 52px;
    }

    .labcmp,
    .labcmt,
    .labcmc,
    .labcmr,
    .labcmf,
    .labcmcta {
        padding: 54px 0;
    }

    .labcmh__actions .labcm-btn,
    .labcmcta__actions .labcm-btn {
        flex: 1 1 100%;
    }

    .labcmt__trilha {
        gap: 18px;
    }
}


/* ************************************************************
   LAB BLOG — listagem /blog e ficha /blog2/<slug>
   Arquivos: resources/components/{heroes,sections}/lab-blog-*,
             lab-post-hero, lab-post-detalhe, lab-posts-relacionados
   Rotas: /blog (listagem) · /blog2/<slug> (ficha) · /blog/<slug> 301

   Prefixos: labbh (hero da listagem) · labbg (grade) · labpsh (hero da ficha)
             labpd (corpo do artigo) · labpr (leia também)

   ZERO JavaScript: busca, filtro por tema e paginação são <form> e <a> puros.
   ************************************************************ */

.labbh,
.labbg,
.labpsh,
.labpd,
.labpr {
    --labb-ink: #12243d;
    --labb-soft: #f4f7fb;
    --labb-line: #e3e9f2;
    --labb-muted: #5b6b80;
    --labb-radius: 18px;
}

/* ============================================================
   HERO DA LISTAGEM
   ============================================================ */
.labbh {
    padding: 56px 0 40px;
    background: linear-gradient(135deg, var(--labb-ink) 0%, var(--primary) 100%);
    color: var(--white);
}

.labbh__inner {
    max-width: 820px;
    text-align: center;
}

.labbh__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labbh__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.labbh__lead {
    margin: 14px auto 0;
    max-width: 60ch;
    font-size: 1.02rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
}

/* ---------- Busca ---------- */
.labbh__busca {
    margin-top: 28px;
}

/* O rótulo existe para o leitor de tela; o placeholder não substitui label. */
.labbh__busca-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.labbh__busca-campo {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 620px;
    margin: 0 auto;
    padding: 6px 6px 6px 18px;
    border-radius: var(--radius-pill);
    background: var(--white);
    box-shadow: var(--shadow-lg);
}

.labbh__busca-campo > i {
    flex-shrink: 0;
    color: var(--labb-muted);
}

.labbh__busca-campo input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 0;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--labb-ink);
}

.labbh__busca-campo input:focus {
    outline: none;
}

.labbh__busca-btn {
    flex-shrink: 0;
    padding: 12px 26px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.labbh__busca-btn:hover,
.labbh__busca-btn:focus-visible {
    background: var(--accent-hover);
}

/* ---------- Chips de tema ---------- */
.labbh__temas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.labbh__tema {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.labbh__tema:hover,
.labbh__tema:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--white);
    color: var(--white);
}

.labbh__tema--ativo {
    background: var(--white);
    border-color: var(--white);
    color: var(--primary);
}

.labbh__tema-num {
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.12);
    font-size: 0.72rem;
    font-weight: 800;
}

.labbh__tema--ativo .labbh__tema-num {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.labbh__resultado {
    margin: 20px 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.86);
}

.labbh__limpar {
    margin-left: 10px;
    color: var(--white);
    font-weight: 700;
    text-decoration: underline;
}

/* ============================================================
   GRADE DA LISTAGEM
   ============================================================ */
.labbg {
    padding: 48px 0 76px;
    background: var(--labb-soft);
}

/* ---------- Destaque ---------- */
.labbg__destaque {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    margin-bottom: 28px;
    border: 1px solid var(--labb-line);
    border-radius: 22px;
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.labbg__destaque-media {
    display: block;
    position: relative;
    min-height: 260px;
    background: var(--labb-soft);
}

.labbg__destaque-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

.labbg__destaque-corpo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 36px;
}

.labbg__destaque-title {
    margin: 12px 0 0;
    font-family: var(--font-title);
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: 800;
    line-height: 1.25;
}

.labbg__destaque-title a {
    color: var(--labb-ink);
    text-decoration: none;
}

.labbg__destaque-title a:hover,
.labbg__destaque-title a:focus-visible {
    color: var(--primary);
}

.labbg__destaque-excerpt {
    margin: 12px 0 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--labb-muted);
}

/* ---------- Meta (tema · data · minutos) ---------- */
.labbg__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
}

.labbg__tag {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-hover);
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.labbg__data,
.labbg__min {
    color: var(--labb-muted);
    font-weight: 600;
}

/* ---------- Grade ---------- */
.labbg__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    padding: 0;
    list-style: none;
}

.labbg__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--labb-line);
    border-radius: var(--labb-radius);
    background: var(--white);
    transition: var(--transition);
}

.labbg__card:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.labbg__media {
    display: block;
    background: var(--labb-soft);
}

.labbg__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.labbg__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    max-width: 100%;
    color: var(--primary);
    font-size: 2.2rem;
}

.labbg__corpo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    padding: 20px 22px 22px;
}

.labbg__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.32;
}

.labbg__title a {
    color: var(--labb-ink);
    text-decoration: none;
}

.labbg__title a:hover,
.labbg__title a:focus-visible {
    color: var(--primary);
}

.labbg__excerpt {
    margin: 0;
    font-size: 0.89rem;
    line-height: 1.6;
    color: var(--labb-muted);
}

.labbg__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--labb-line);
}

.labbg__mais {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
}

.labbg__destaque-corpo .labbg__mais {
    margin-top: 20px;
}

/* ---------- Vazio ---------- */
.labbg__vazio {
    max-width: 520px;
    margin: 0 auto;
    padding: 56px 28px;
    border: 1px dashed var(--labb-line);
    border-radius: 22px;
    background: var(--white);
    text-align: center;
}

.labbg__vazio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--labb-soft);
    color: var(--labb-muted);
    font-size: 1.4rem;
}

.labbg__vazio-title {
    margin: 0 0 8px;
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--labb-ink);
}

.labbg__vazio-text {
    margin: 0 0 22px;
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--labb-muted);
}

.labbg__vazio-btn {
    display: inline-flex;
    align-items: center;
    padding: 13px 28px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labbg__vazio-btn:hover,
.labbg__vazio-btn:focus-visible {
    background: var(--primary-light);
}

/* ---------- Paginação ---------- */
.labbg__paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.labbg__pag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    justify-content: center;
    border: 1px solid var(--labb-line);
    border-radius: 12px;
    background: var(--white);
    color: var(--labb-ink);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labbg__pag:hover,
.labbg__pag:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}

.labbg__pag--ativa {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* ============================================================
   HERO DA FICHA
   ============================================================ */
/* A faixa usa o MESMO gradiente da listagem (.labbh): quem vem do /blog não
   sente que mudou de site. Com capa, a faixa ganha folga embaixo e a figura
   sobe sobre ela (--labpsh-sobe) — a capa fica metade na faixa, metade no
   branco, e o título não disputa espaço com a foto. */
.labpsh {
    --labpsh-sobe: 150px;
    background: var(--white);
}

.labpsh__faixa {
    position: relative;
    padding: 44px 0 56px;
    background: linear-gradient(135deg, var(--labb-ink) 0%, var(--primary) 100%);
    color: var(--white);
    overflow: hidden;
}

.labpsh--com-capa .labpsh__faixa {
    padding-bottom: calc(var(--labpsh-sobe) + 44px);
}

/* Bolhas decorativas discretas, no espírito dos outros heróis do site */
.labpsh__faixa::before,
.labpsh__faixa::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.labpsh__faixa::before {
    right: -90px;
    top: -140px;
    width: 380px;
    height: 380px;
}

.labpsh__faixa::after {
    left: -120px;
    bottom: -160px;
    width: 320px;
    height: 320px;
    background: rgba(255, 255, 255, 0.04);
}

.labpsh__inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    text-align: center;
}

.labpsh__trilha {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.labpsh__trilha a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: var(--transition);
}

.labpsh__trilha a:hover,
.labpsh__trilha a:focus-visible {
    color: var(--white);
    text-decoration: underline;
}

.labpsh__trilha i {
    font-size: 0.58rem;
    opacity: 0.6;
}

.labpsh__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 0.82rem;
}

.labpsh__tag {
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: var(--transition);
}

.labpsh__tag:hover,
.labpsh__tag:focus-visible {
    background: var(--white);
    color: var(--accent-hover);
}

.labpsh__data,
.labpsh__min {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
}

.labpsh__title {
    margin: 0 auto;
    max-width: 22ch;
    font-family: var(--font-title);
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.8px;
    color: var(--white);
    text-wrap: balance;
}

.labpsh__autor {
    margin: 18px 0 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.8);
}

.labpsh__autor strong {
    color: var(--white);
}

.labpsh__capa {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: calc(var(--labpsh-sobe) * -1) auto 0;
}

.labpsh__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border: 6px solid var(--white);
    border-radius: 24px;
    background: var(--labb-soft);
    box-shadow: 0 24px 48px -12px rgba(18, 36, 61, 0.35);
}

/* ============================================================
   CORPO DO ARTIGO
   ============================================================ */
.labpd {
    padding: 44px 0 64px;
    background: var(--white);
}

.labpd__inner {
    max-width: 760px;
}

/* Lead em corpo maior: é o resumo, e serve de rampa para o texto. */
.labpd__lead {
    margin: 0 0 28px;
    padding-left: 20px;
    border-left: 4px solid var(--primary);
    font-size: 1.12rem;
    line-height: 1.6;
    font-weight: 500;
    color: var(--labb-ink);
}

/* Medida de leitura: ~70 caracteres por linha. Linha mais longa que isso
   cansa e faz o olho perder o começo da seguinte. */
.labpd__corpo {
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--text);
}

.labpd__corpo > * {
    margin: 0 0 1.15em;
}

.labpd__corpo > *:last-child {
    margin-bottom: 0;
}

.labpd__corpo h2 {
    margin: 2em 0 0.7em;
    font-family: var(--font-title);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--labb-ink);
}

.labpd__corpo h3 {
    margin: 1.7em 0 0.6em;
    font-family: var(--font-title);
    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--labb-ink);
}

.labpd__corpo h2:first-child,
.labpd__corpo h3:first-child {
    margin-top: 0;
}

.labpd__corpo ul,
.labpd__corpo ol {
    padding-left: 1.3em;
}

.labpd__corpo li {
    margin-bottom: 0.55em;
}

.labpd__corpo li::marker {
    color: var(--primary);
}

.labpd__corpo strong {
    color: var(--labb-ink);
    font-weight: 700;
}

.labpd__corpo a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.labpd__corpo a:hover,
.labpd__corpo a:focus-visible {
    color: var(--accent);
}

.labpd__corpo blockquote {
    padding: 4px 0 4px 20px;
    border-left: 4px solid var(--labb-line);
    color: var(--labb-muted);
    font-style: italic;
}

/* ---------- Artigo sem corpo ---------- */
.labpd__incompleto {
    display: flex;
    gap: 20px;
    padding: 28px 30px;
    border: 1px dashed color-mix(in srgb, var(--primary) 40%, transparent);
    border-radius: var(--labb-radius);
    background: var(--labb-soft);
}

.labpd__incompleto-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 1.2rem;
}

.labpd__incompleto-title {
    margin: 0 0 8px;
    font-family: var(--font-title);
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--labb-ink);
}

.labpd__incompleto-text {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--labb-muted);
}

.labpd__incompleto-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    background: #25d366;
    color: var(--white);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.labpd__incompleto-cta:hover,
.labpd__incompleto-cta:focus-visible {
    background: #1da851;
    transform: translateY(-2px);
}

/* ---------- Rodapé do artigo ---------- */
.labpd__rodape {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--labb-line);
}

.labpd__voltar {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

.labpd__voltar:hover,
.labpd__voltar:focus-visible {
    gap: 13px;
    color: var(--accent);
}

.labpd__aviso {
    display: flex;
    gap: 11px;
    margin: 22px 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--labb-muted);
}

.labpd__aviso i {
    margin-top: 3px;
    flex-shrink: 0;
    color: var(--primary);
}

/* ============================================================
   LEIA TAMBÉM
   ============================================================ */
.labpr {
    padding: 64px 0;
    background: var(--labb-soft);
}

.labpr__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 28px;
}

.labpr__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 800;
    color: var(--labb-ink);
}

.labpr__todos {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

.labpr__todos:hover,
.labpr__todos:focus-visible {
    gap: 13px;
    color: var(--accent);
}

.labpr__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    padding: 0;
    list-style: none;
}

.labpr__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--labb-line);
    border-radius: var(--labb-radius);
    background: var(--white);
    text-decoration: none;
    transition: var(--transition);
}

.labpr__card:hover,
.labpr__card:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.labpr__media {
    display: block;
    background: var(--labb-soft);
}

.labpr__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.labpr__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    color: var(--primary);
    font-size: 1.9rem;
}

.labpr__corpo {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
}

.labpr__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    font-size: 0.74rem;
}

.labpr__tag {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-hover);
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.labpr__data {
    color: var(--labb-muted);
    font-weight: 600;
}

.labpr__nome {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.34;
    color: var(--labb-ink);
}

.labpr__mais {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--primary);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 900px) {

    .labbg__destaque {
        grid-template-columns: 1fr;
    }

    .labbg__destaque-media {
        min-height: 0;
    }

    .labbg__destaque-img {
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

@media (max-width: 768px) {

    .labbh {
        padding: 40px 0 32px;
    }

    .labbg {
        padding: 36px 0 54px;
    }

    .labpd,
    .labpr {
        padding: 36px 0 48px;
    }

    .labbh__busca-campo {
        flex-wrap: wrap;
        padding: 12px;
        border-radius: 18px;
    }

    .labbh__busca-campo > i {
        display: none;
    }

    .labbh__busca-campo input {
        flex: 1 1 100%;
        padding: 6px 4px 12px;
    }

    .labbh__busca-btn {
        width: 100%;
    }

    .labbg__destaque-corpo {
        padding: 24px 22px 28px;
    }

    .labpd__corpo {
        font-size: 1rem;
    }

    .labpd__incompleto {
        flex-direction: column;
        gap: 14px;
        padding: 24px 22px;
    }

    .labpsh {
        --labpsh-sobe: 70px;
    }

    .labpsh__faixa {
        padding: 30px 0 40px;
    }

    .labpsh--com-capa .labpsh__faixa {
        padding-bottom: calc(var(--labpsh-sobe) + 30px);
    }

    .labpsh__trilha {
        margin-bottom: 18px;
        font-size: 0.72rem;
    }

    .labpsh__meta {
        gap: 8px;
        margin-bottom: 16px;
        font-size: 0.78rem;
    }

    .labpsh__img {
        aspect-ratio: 16 / 10;
        border-width: 4px;
        border-radius: 16px;
    }
}

/* ************************************************************
   LAB SLIDER — carrossel de banners da home
   Arquivo: resources/components/heroes/lab-slider.inc.php
   Dados: tabela cms_slider (CRUD em /admin/cms/slider)

   Prefixo: labslider

   A arte manda na altura: a imagem entra com width/height reais e
   `height: auto`, sem recorte. Banner de campanha traz texto e botão
   desenhados no pixel — `object-fit: cover` cortaria justamente a
   frase ou o preço que o cliente pagou para anunciar.

   Sem JavaScript o track não translada e o visitante vê o primeiro
   slide inteiro; setas e pontos continuam de pé, mas inertes.
   ************************************************************ */
.labslider {
    position: relative;
    overflow: hidden;
    background: var(--primary);
}

.labslider__viewport {
    overflow: hidden;
}

.labslider__track {
    display: flex;
    align-items: stretch;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.labslider__slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: block;
    text-decoration: none;
    color: inherit;
}

.labslider__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Setas ---- */
.labslider__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: var(--primary);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.labslider__seta:hover {
    background: var(--white);
    transform: translateY(-50%) scale(1.06);
}

.labslider__seta:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 2px;
}

.labslider__seta--ant {
    left: 16px;
}

.labslider__seta--prox {
    right: 16px;
}

/* ---- Pontos ---- */
.labslider__pontos {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.28);
}

.labslider__ponto {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}

.labslider__ponto--ativo {
    width: 26px;
    border-radius: var(--radius-pill);
    background: var(--white);
}

.labslider__ponto:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

/* Um slide só não tem para onde navegar. */
.labslider--unico .labslider__seta,
.labslider--unico .labslider__pontos {
    display: none;
}

@media (max-width: 767px) {
    .labslider__seta {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .labslider__seta--ant {
        left: 8px;
    }

    .labslider__seta--prox {
        right: 8px;
    }

    .labslider__pontos {
        bottom: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .labslider__track {
        transition: none;
    }
}

/* O link envolve a arte inteira; o `role="group"` precisa ficar na div de
   fora, então o <a> é uma camada interna sem altura própria. */
.labslider__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ************************************************************
   LAB ROSA — campanha Outubro Rosa (/outubro-rosa)
   Arquivos: resources/components/{headers,heroes,sections,footers}/lab-rosa-*
   Rota: /outubro-rosa (layout de landing page, mas INDEXÁVEL)

   Prefixos: rosahd (header) · rosahero (hero) · rosaex (exames)
             rosasin (educativo) · rosaeq (equipe) · rosaun (unidades)
             rosafaq (dúvidas) · rosafim (fechamento) · rosabarra (fixa)
             rosaft (footer) · rosa-head/rosa-title/rosa-lead (compartilhados)

   PALETA AMOSTRADA DA ARTE DO CLIENTE, não escolhida à mão: o verde
   (#155c52 / #0b3d35), o laranja do botão (#e76f49) e os dois rosas
   (#ee809c / #f9b3c8) foram lidos pixel a pixel do banner que o cliente
   entregou. É o que faz a página parecer continuação do anúncio, e não
   outro site.

   As variáveis ficam em `.rosa-body` — escopo da página, e não `:root`:
   o tema do tenant continua valendo para todo o resto.

   ZERO JavaScript: o acordeão do FAQ é <details name> nativo, a barra
   fixa é CSS e os CTAs são âncoras.
   ************************************************************ */
.rosa-body {
    --rosa-verde: #155c52;
    --rosa-verde-esc: #0b3d35;
    --rosa-laranja: #e76f49;
    --rosa-laranja-esc: #cf5c38;
    --rosa-pink: #ee809c;
    --rosa-pink-claro: #f9b3c8;
    --rosa-pink-suave: #fdf1f5;
    --rosa-pink-texto: #b8446a;
    --rosa-ink: #16302b;
    --rosa-muted: #5d6f6a;
    --rosa-line: #e6ece9;
    --rosa-radius: 20px;

    background: #fff;
    color: var(--rosa-ink);
}

/* ---- Cabeçalho de seção, compartilhado ---- */
.rosa-head {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}

.rosa-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 16px;
    border-radius: var(--radius-pill, 999px);
    background: var(--rosa-pink-suave);
    color: var(--rosa-pink-texto);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.rosa-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.6px;
    color: var(--rosa-verde-esc);
}

.rosa-lead {
    margin: 14px 0 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--rosa-muted);
}

/* ============================================================
   HEADER
   ============================================================ */
.rosahd__strip {
    background: var(--rosa-verde-esc);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
}

/* ATENÇÃO nos elementos que também são `.container`: o respiro lateral vem de
   lá (`padding: 0 20px`), então aqui só se mexe no eixo vertical com
   `padding-block`. Um `padding: 9px 0` zeraria as laterais e colaria o texto na
   borda do celular. */
.rosahd__strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 9px;
}

.rosahd__strip-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.rosahd__strip-text i {
    color: var(--rosa-pink-claro);
}

.rosahd__strip-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.rosahd__strip-phone:hover {
    color: var(--rosa-pink-claro);
}

.rosahd {
    position: relative;
    z-index: 3;
    background: #fff;
    border-bottom: 1px solid var(--rosa-line);
}

.rosahd__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 14px;
}

.rosahd__brand {
    display: inline-flex;
    flex: 0 0 auto;
}

.rosahd__logo {
    display: block;
    width: auto;
    height: 52px;
    object-fit: contain;
}

.rosahd__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rosahd__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--rosa-ink);
    text-decoration: none;
}

.rosahd__phone-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--rosa-pink-suave);
    color: var(--rosa-pink-texto);
}

.rosahd__phone-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.rosahd__phone-label {
    font-size: 0.68rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--rosa-muted);
}

.rosahd__phone-value {
    font-size: 1rem;
    font-weight: 800;
}

.rosahd__cta,
.rosahero__cta,
.rosafaq__cta,
.rosafim__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: var(--radius-pill, 999px);
    background: var(--rosa-laranja);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(231, 111, 73, 0.28);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.rosahd__cta:hover,
.rosahero__cta:hover,
.rosafaq__cta:hover,
.rosafim__cta:hover {
    background: var(--rosa-laranja-esc);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(231, 111, 73, 0.34);
}

.rosahd__cta:focus-visible,
.rosahero__cta:focus-visible,
.rosafaq__cta:focus-visible,
.rosafim__cta:focus-visible {
    outline: 3px solid var(--rosa-pink);
    outline-offset: 3px;
}

/* ============================================================
   HERO
   ============================================================ */
.rosahero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 520px at 88% 12%, rgba(238, 128, 156, 0.30), transparent 62%),
        linear-gradient(135deg, var(--rosa-verde-esc) 0%, var(--rosa-verde) 100%);
    color: #fff;
}

/* O hero fecha com respiro embaixo, e não com a foto encostada na seção
   branca seguinte: a arte sangrando na emenda faz a página parecer cortada. */
.rosahero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: center;
    padding-block: 52px 48px;
}

.rosahero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 18px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(249, 179, 200, 0.18);
    color: var(--rosa-pink-claro);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.rosahero__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.2px;
}

.rosahero__title-hl {
    display: block;
    color: var(--rosa-pink-claro);
}

.rosahero__lead {
    max-width: 560px;
    margin: 18px 0 0;
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

.rosahero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.rosahero__cta--ghost {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: none;
}

.rosahero__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    box-shadow: none;
}

.rosahero__note {
    margin: 16px 0 0;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.72);
}

.rosahero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.rosahero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.84rem;
    font-weight: 600;
}

.rosahero__badge i {
    color: var(--rosa-pink-claro);
}

/* A arte fica CENTRADA na coluna, não colada na base: com `align-self: end`
   ela encostava na emenda com a seção branca. */
.rosahero__art {
    position: relative;
    align-self: center;
}

/* Brilho rosa atrás da foto — dá profundidade e amarra o card ao verde do
   fundo sem precisar de borda dura. */
.rosahero__art::before {
    content: "";
    position: absolute;
    inset: -8% -6%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(238, 128, 156, 0.34), transparent 72%);
    pointer-events: none;
}

.rosahero__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-width: 560px;
    margin: 0 auto;
    /* Os cantos da peça original são retos e ficam com ponta fina sobre o
       fundo escuro. O raio generoso + a moldura clara transformam a foto num
       cartão, que é como o resto da página trata imagem. */
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32);
}

/* ============================================================
   EXAMES
   ============================================================ */
.rosaex {
    padding: 64px 0;
    background: #fff;
}

.rosaex__featured {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 880px;
    margin: 0 auto 22px;
    padding: 20px 24px;
    border-radius: var(--rosa-radius);
    background: linear-gradient(120deg, var(--rosa-verde-esc), var(--rosa-verde));
    color: #fff;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(11, 61, 53, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rosaex__featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(11, 61, 53, 0.28);
}

.rosaex__featured-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(249, 179, 200, 0.22);
    color: var(--rosa-pink-claro);
    font-size: 1.3rem;
}

.rosaex__featured-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
}

.rosaex__featured-name {
    font-size: 1.12rem;
    font-weight: 800;
}

.rosaex__featured-desc {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.82);
}

.rosaex__featured-go {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 11px 20px;
    border-radius: var(--radius-pill, 999px);
    background: var(--rosa-laranja);
    font-weight: 800;
    white-space: nowrap;
}

.rosaex__scope {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 880px;
    margin: 0 auto 30px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px dashed var(--rosa-pink);
    background: var(--rosa-pink-suave);
    font-size: 0.92rem;
    line-height: 1.55;
    color: #7c3a51;
}

.rosaex__scope i {
    margin-top: 2px;
    color: var(--rosa-pink);
}

.rosaex__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rosaex__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--rosa-line);
    border-radius: var(--rosa-radius);
    background: #fff;
    box-shadow: 0 8px 22px rgba(11, 61, 53, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rosaex__card:hover {
    transform: translateY(-4px);
    border-color: var(--rosa-pink-claro);
    box-shadow: 0 18px 34px rgba(11, 61, 53, 0.12);
}

.rosaex__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--rosa-pink-suave);
}

.rosaex__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rosaex__icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--rosa-pink);
    font-size: 2.4rem;
}

.rosaex__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    padding: 20px 22px 22px;
}

.rosaex__name {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--rosa-verde-esc);
}

.rosaex__desc {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--rosa-muted);
}

.rosaex__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
}

.rosaex__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: var(--radius-pill, 999px);
    background: var(--rosa-verde);
    color: #fff;
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.2s ease;
}

.rosaex__go:hover {
    background: var(--rosa-verde-esc);
}

.rosaex__detalhe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--rosa-pink-texto);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.rosaex__detalhe:hover {
    text-decoration: underline;
}

.rosaex__note {
    max-width: 760px;
    margin: 28px auto 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--rosa-muted);
}

/* ============================================================
   EDUCATIVO — motivos + sinais
   ============================================================ */
.rosasin {
    padding: 64px 0;
    background: var(--rosa-pink-suave);
}

.rosasin__motivos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
}

.rosasin__motivo {
    padding: 26px 24px;
    border-radius: var(--rosa-radius);
    background: #fff;
    box-shadow: 0 8px 22px rgba(11, 61, 53, 0.06);
}

.rosasin__motivo-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: var(--rosa-pink-suave);
    color: var(--rosa-pink);
    font-size: 1.2rem;
}

.rosasin__motivo-title {
    margin: 0 0 8px;
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--rosa-verde-esc);
}

.rosasin__motivo-text {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--rosa-muted);
}

.rosasin__sinais {
    padding: 30px 28px;
    border-radius: var(--rosa-radius);
    background: #fff;
    border-left: 5px solid var(--rosa-pink);
    box-shadow: 0 8px 22px rgba(11, 61, 53, 0.06);
}

.rosasin__sinais-title {
    margin: 0 0 18px;
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--rosa-verde-esc);
}

.rosasin__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rosasin__item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.96rem;
    line-height: 1.55;
}

.rosasin__item i {
    margin-top: 3px;
    color: var(--rosa-pink);
}

.rosasin__sinais-note {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--rosa-line);
    font-size: 0.94rem;
    line-height: 1.6;
    font-weight: 600;
    color: var(--rosa-verde);
}

.rosasin__fonte,
.rosasin__aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 880px;
    margin: 18px auto 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--rosa-muted);
}

.rosasin__fonte i,
.rosasin__aviso i {
    margin-top: 2px;
    color: var(--rosa-verde);
}

.rosasin__aviso {
    margin-top: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(21, 92, 82, 0.06);
    color: var(--rosa-ink);
}

/* ============================================================
   EQUIPE
   ============================================================ */
.rosaeq {
    padding: 64px 0;
    background: #fff;
}

.rosaeq__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rosaeq__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--rosa-line);
    border-radius: var(--rosa-radius);
    background: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rosaeq__card:hover {
    transform: translateY(-4px);
    border-color: var(--rosa-pink-claro);
    box-shadow: 0 16px 30px rgba(11, 61, 53, 0.12);
}

.rosaeq__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--rosa-pink-suave);
}

.rosaeq__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rosaeq__icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--rosa-pink);
    font-size: 2rem;
}

.rosaeq__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px 20px;
}

.rosaeq__name {
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--rosa-verde-esc);
}

.rosaeq__spec {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--rosa-pink-texto);
}

.rosaeq__reg {
    font-size: 0.8rem;
    color: var(--rosa-muted);
}

.rosaeq__units {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--rosa-muted);
}

.rosaeq__units i {
    margin-top: 3px;
    color: var(--rosa-pink);
}

.rosaeq__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    text-align: center;
}

.rosaeq__note {
    margin: 0;
    font-size: 0.9rem;
    color: var(--rosa-muted);
}

.rosaeq__cta,
.rosaun__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    border-radius: var(--radius-pill, 999px);
    border: 2px solid var(--rosa-verde);
    color: var(--rosa-verde);
    font-weight: 800;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.rosaeq__cta:hover,
.rosaun__cta:hover {
    background: var(--rosa-verde);
    color: #fff;
}

/* ============================================================
   UNIDADES
   ============================================================ */
.rosaun {
    padding: 64px 0;
    background: linear-gradient(180deg, var(--rosa-pink-suave), #fff);
    text-align: center;
}

.rosaun__resumo {
    margin: 0 0 22px;
    font-size: 1.02rem;
    color: var(--rosa-muted);
}

.rosaun__resumo strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--rosa-verde-esc);
}

.rosaun__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.rosaun__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--rosa-line);
    background: #fff;
    color: var(--rosa-ink);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.rosaun__chip:hover {
    border-color: var(--rosa-pink);
    color: var(--rosa-pink-texto);
    transform: translateY(-2px);
}

.rosaun__chip i {
    color: var(--rosa-pink);
}

.rosaun__chip-num {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill, 999px);
    background: var(--rosa-pink-suave);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--rosa-pink-texto);
}

.rosaun__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto 24px;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--rosa-muted);
}

.rosaun__note i {
    margin-top: 3px;
    color: var(--rosa-verde);
}

/* ============================================================
   FAQ
   ============================================================ */
.rosafaq {
    padding: 64px 0;
    background: #fff;
}

.rosafaq__inner {
    max-width: 840px;
}

.rosafaq__lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rosafaq__item {
    overflow: hidden;
    border: 1px solid var(--rosa-line);
    border-radius: 16px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rosafaq__item[open] {
    border-color: var(--rosa-pink-claro);
    box-shadow: 0 10px 26px rgba(11, 61, 53, 0.08);
}

.rosafaq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--rosa-verde-esc);
    list-style: none;
}

.rosafaq__q::-webkit-details-marker {
    display: none;
}

.rosafaq__q:focus-visible {
    outline: 3px solid var(--rosa-pink);
    outline-offset: -3px;
}

.rosafaq__chevron {
    flex: 0 0 auto;
    color: var(--rosa-pink);
    transition: transform 0.2s ease;
}

.rosafaq__item[open] .rosafaq__chevron {
    transform: rotate(180deg);
}

.rosafaq__a {
    padding: 0 22px 20px;
}

.rosafaq__a p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--rosa-muted);
}

.rosafaq__cta {
    margin: 28px auto 0;
}

/* ============================================================
   FECHAMENTO
   ============================================================ */
.rosafim {
    padding: 66px 0;
    background:
        radial-gradient(900px 420px at 80% 10%, rgba(238, 128, 156, 0.28), transparent 60%),
        linear-gradient(135deg, var(--rosa-verde-esc), var(--rosa-verde));
    color: #fff;
}

.rosafim__inner {
    max-width: 780px;
    text-align: center;
}

.rosafim__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 7px 18px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(249, 179, 200, 0.18);
    color: var(--rosa-pink-claro);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.rosafim__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.rosafim__text {
    margin: 16px auto 0;
    max-width: 620px;
    font-size: 1.04rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

.rosafim__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

.rosafim__tel {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: var(--radius-pill, 999px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.rosafim__tel:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

.rosafim__tel span {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.25;
}

.rosafim__tel-label {
    font-size: 0.7rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.rosafim__tel-value {
    font-size: 1rem;
    font-weight: 800;
}

.rosafim__note {
    margin: 22px 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   BARRA FIXA — a regra que a liga está no bloco de até 767px
   ============================================================ */
.rosabarra {
    display: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.rosaft {
    background: var(--rosa-verde-esc);
    color: rgba(255, 255, 255, 0.82);
}

.rosaft__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding-block: 44px 28px;
}

.rosaft__brand {
    max-width: 460px;
}

.rosaft__logo {
    display: block;
    width: auto;
    height: 46px;
    margin-bottom: 14px;
    object-fit: contain;
}

.rosaft__about {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
}

.rosaft__contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rosaft__contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.rosaft__contact i {
    color: var(--rosa-pink-claro);
}

.rosaft__contact a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.rosaft__contact a:hover {
    color: var(--rosa-pink-claro);
}

.rosaft__aviso {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 26px;
    padding: 15px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.86rem;
    line-height: 1.6;
}

.rosaft__aviso i {
    margin-top: 2px;
    color: var(--rosa-pink-claro);
}

.rosaft__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rosaft__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-block: 18px;
}

.rosaft__copy {
    margin: 0;
    font-size: 0.82rem;
}

.rosaft__links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.rosaft__links a {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.82rem;
    text-decoration: none;
}

.rosaft__links a:hover {
    color: var(--rosa-pink-claro);
    text-decoration: underline;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (min-width: 768px) {
    .rosaex__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rosasin__motivos {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .rosaeq__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .rosaeq__footer {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

@media (min-width: 1024px) {
    .rosahero__inner {
        grid-template-columns: 1.05fr 0.95fr;
        padding-block: 64px 60px;
    }

    .rosahero__inner--solo {
        grid-template-columns: 1fr;
    }

    .rosaex__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .rosaeq__grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 767px) {
    .rosahd__strip-text {
        display: none;
    }

    .rosahd__strip-inner {
        justify-content: center;
    }

    .rosahd__phone-text,
    .rosahd__cta span {
        display: none;
    }

    .rosahd__cta {
        padding: 12px 16px;
        font-size: 1.05rem;
    }

    .rosahd__logo {
        height: 42px;
    }

    .rosahero__inner {
        padding-block: 38px 40px;
    }

    .rosahero__img {
        border-radius: 22px;
    }

    .rosaex,
    .rosasin,
    .rosaeq,
    .rosaun,
    .rosafaq {
        padding: 46px 0;
    }

    .rosaex__featured {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .rosaex__featured-go {
        width: 100%;
        justify-content: center;
    }

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

    /* A barra fixa existe SÓ aqui: no desktop o header mantém o CTA à
       vista e ela só roubaria altura útil. */
    .rosabarra {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 14px;
        background: rgba(11, 61, 53, 0.97);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22);
    }

    .rosabarra__label {
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--rosa-pink-claro);
    }

    .rosabarra__actions {
        display: flex;
        gap: 8px;
    }

    .rosabarra__tel,
    .rosabarra__cta {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 10px 16px;
        border-radius: var(--radius-pill, 999px);
        font-size: 0.9rem;
        font-weight: 800;
        text-decoration: none;
    }

    .rosabarra__tel {
        border: 1px solid rgba(255, 255, 255, 0.45);
        color: #fff;
    }

    .rosabarra__cta {
        background: var(--rosa-laranja);
        color: #fff;
    }

    /* A barra cobre o rodapé no fim da página; o respiro evita que ela
       tape a última linha de links. */
    .rosa-body .rosaft__bottom-inner {
        padding-bottom: 78px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rosahd__cta,
    .rosahero__cta,
    .rosafaq__cta,
    .rosafim__cta,
    .rosaex__card,
    .rosaex__featured,
    .rosaeq__card,
    .rosaun__chip {
        transition: none;
    }

    .rosahd__cta:hover,
    .rosahero__cta:hover,
    .rosafaq__cta:hover,
    .rosafim__cta:hover,
    .rosaex__card:hover,
    .rosaex__featured:hover,
    .rosaeq__card:hover,
    .rosaun__chip:hover {
        transform: none;
    }
}


/* ************************************************************
   LAB CONVÊNIOS — CARROSSEL (faixa em rolagem contínua)
   Arquivo: resources/components/sections/lab-convenios-carrossel.inc.php
   Alternativa ao .labconv (grade). As duas podem coexistir na mesma
   página — é o cliente quem escolhe qual fica na home (v10.31.0).

   Mecânica, e por que é assim: a faixa contém DUAS cópias da lista e
   anda de 0 a -50%. Quando a primeira cópia termina de sair, a segunda
   está exatamente onde a primeira começou, então o reinício não tem
   emenda. É por isso que o componente imprime os itens duas vezes; a
   segunda cópia sai da árvore de acessibilidade no PHP.
   ZERO JavaScript.
   ************************************************************ */
.labcvc {
    padding: 90px 0;
    background: var(--gray-light);
    overflow: hidden;
}

.labcvc__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 36px;
}

.labcvc__head-text {
    max-width: 640px;
}

.labcvc__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labcvc__eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.labcvc__title {
    margin-top: 18px;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.2;
    color: var(--primary);
}

.labcvc__subtitle {
    margin-top: 14px;
    color: var(--gray-medium);
    line-height: 1.6;
}

.labcvc__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.labcvc__all i {
    transition: var(--transition);
}

.labcvc__all:hover,
.labcvc__all:focus-visible {
    color: var(--accent);
}

.labcvc__all:hover i,
.labcvc__all:focus-visible i {
    transform: translateX(4px);
}

/* Janela da faixa: fica FORA do .container para rolar de ponta a ponta.
   A máscara desmancha os dois extremos, senão o cartão aparece e some
   com um corte seco na borda da tela. */
.labcvc__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 8px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.labcvc__track {
    display: flex;
    align-items: stretch;
    gap: 14px;
    width: max-content;
    animation: labcvc-scroll 45s linear infinite;
}

/* Velocidade por quantidade de itens (o PHP escolhe a classe): uma volta
   curta com 30 convênios passa rápido demais para ler, e uma volta longa
   com 4 parece travada. */
.labcvc__track--curto { animation-duration: 22s; }
.labcvc__track--medio { animation-duration: 38s; }
.labcvc__track--longo { animation-duration: 55s; }

/* Pausa quando o visitante quer olhar: no hover e também quando um item
   da faixa recebe foco de teclado. */
.labcvc__viewport:hover .labcvc__track,
.labcvc__viewport:focus-within .labcvc__track {
    animation-play-state: paused;
}

@keyframes labcvc-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.labcvc__card {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 120px;
    padding: 16px 24px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.labcvc__card:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.labcvc__logo {
    max-width: 100%;
    max-height: 84px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Mesmo tratamento da grade: as logos vêm do cliente como quadrados com
       fundo BRANCO embutido, e o multiply faz esse branco sumir sem recorte
       manual. Aqui o cartão já é branco, mas a regra fica para o dia em que
       alguém mudar o fundo do cartão e o quadrado reaparecer. */
    mix-blend-mode: multiply;
    transition: var(--transition);
}

.labcvc__card:hover .labcvc__logo {
    transform: scale(1.06);
}

/* Sem arquivo de logo o cartão mostra o nome — nunca imagem quebrada. */
.labcvc__name {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--primary);
}

/* Aviso em texto corrido acima da nota (campo `notice`) */
.labcvc__notice {
    margin-top: 30px;
    text-align: center;
    color: var(--gray-medium);
    font-size: 1rem;
    line-height: 1.55;
}

.labcvc__notice + .labcvc__note {
    margin-top: 10px;
}

.labcvc__note {
    margin-top: 30px;
    text-align: center;
    color: var(--gray-medium);
    font-size: 0.93rem;
}

/* Asterisco do título + ressalva correspondente (campo `footnote`) */
.labcvc__mark {
    margin-left: 2px;
    color: var(--accent);
}

/* Ressalva com DESTAQUE (pedido do cliente): negrito, cor da marca e corpo
   maior que a nota de "exames particulares" logo acima. */
.labcvc__footnote {
    margin-top: 30px;
    text-align: center;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
}

.labcvc__footnote .labcvc__mark {
    margin: 0 2px 0 0;
}

.labcvc__note + .labcvc__footnote {
    margin-top: 10px;
}

@media (max-width: 768px) {
    .labcvc {
        padding: 60px 0;
    }

    .labcvc__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 26px;
    }

    .labcvc__card {
        min-width: 156px;
        min-height: 96px;
        padding: 12px 18px;
    }

    .labcvc__logo {
        max-height: 64px;
    }
}

/* Quem pediu menos movimento não recebe movimento nenhum: a animação para
   e a faixa vira uma régua de rolagem manual, com os cartões acessíveis
   pelo arrasto e pelo teclado. */
@media (prefers-reduced-motion: reduce) {
    .labcvc__track,
    .labcvc__track--curto,
    .labcvc__track--medio,
    .labcvc__track--longo {
        animation: none;
    }

    .labcvc__viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .labcvc__card:hover {
        transform: none;
    }
}


/* ************************************************************
   LAB CARTÃO HERO — Hero da página do Cartão Labocliv Prime
   Arquivo: resources/components/heroes/lab-cartao-hero.inc.php
   ************************************************************ */
.labcrh {
    position: relative;
    overflow: hidden;
    padding: 56px 0 64px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

.labcrh::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.labcrh__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
    align-items: center;
}

.labcrh__crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.labcrh__crumb {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: var(--transition);
}

a.labcrh__crumb:hover,
a.labcrh__crumb:focus-visible {
    color: var(--white);
}

.labcrh__crumb-sep {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.labcrh__crumb--current {
    color: var(--white);
}

.labcrh__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labcrh__title {
    font-family: var(--font-title);
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.12;
}

.labcrh__lead {
    margin-top: 14px;
    max-width: 560px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.04rem;
    line-height: 1.6;
}

.labcrh__highlights {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    list-style: none;
}

.labcrh__highlight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.94rem;
    line-height: 1.5;
}

.labcrh__highlight i {
    margin-top: 4px;
    color: var(--accent);
}

.labcrh__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.labcrh__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: var(--radius-pill);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.labcrh__btn--primary {
    background: var(--accent);
    color: var(--white);
}

.labcrh__btn--primary:hover,
.labcrh__btn--primary:focus-visible {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.labcrh__btn--ghost {
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: var(--white);
}

.labcrh__btn--ghost:hover,
.labcrh__btn--ghost:focus-visible {
    background: var(--white);
    color: var(--primary);
}

.labcrh__media {
    display: flex;
    justify-content: center;
}

.labcrh__card {
    width: 100%;
    max-width: 460px;
    height: auto;
    transform: rotate(-4deg);
    filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.35));
}

@media (max-width: 1024px) {

    .labcrh__inner {
        grid-template-columns: 1fr;
    }

    .labcrh__media {
        order: -1;
    }

    .labcrh__card {
        max-width: 340px;
    }
}

@media (max-width: 768px) {

    .labcrh {
        padding: 40px 0 48px;
    }

    .labcrh__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .labcrh__btn:hover,
    .labcrh__btn:focus-visible {
        transform: none;
    }
}


/* ************************************************************
   LAB FORM CARTÃO — Cadastro do Cartão Labocliv Prime + lateral
   Arquivo: resources/components/sections/lab-form-cartao.inc.php
   ************************************************************ */
.labcf {
    padding: 76px 0 84px;
    background: var(--white);
    scroll-margin-top: 20px;
}

.labcf__head {
    max-width: 700px;
    margin-bottom: 32px;
}

.labcf__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
}

.labcf__title {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--primary);
    line-height: 1.2;
}

.labcf__subtitle {
    margin-top: 10px;
    color: var(--gray-medium);
    font-size: 0.94rem;
    line-height: 1.6;
}

.labcf__layout {
    display: grid;
    grid-template-columns: 1.75fr 1fr;
    gap: 26px;
    align-items: start;
}

.labcf__main {
    padding: 34px 32px 30px;
    border-radius: 22px;
    background: var(--gray-light);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Honeypot — fora da tela, sem display:none (bots ignoram campos ocultos) */
.labcf__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.labcf__block {
    margin-bottom: 26px;
    padding: 0;
    border: none;
}

.labcf__block + .labcf__block {
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}

.labcf__legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 0;
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--primary);
}

.labcf__legend i {
    font-size: 0.86rem;
    color: var(--accent);
}

.labcf__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.labcf__row--3 {
    grid-template-columns: repeat(3, 1fr);
}

.labcf__row--cep {
    grid-template-columns: 0.8fr 2fr 0.7fr;
}

.labcf__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
    min-width: 0;
}

.labcf__field label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--gray-dark);
}

.labcf__field > label span {
    color: var(--accent);
}

.labcf__field input,
.labcf__field select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #dfe5e8;
    border-radius: 12px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    transition: var(--transition);
}

.labcf__field input:focus,
.labcf__field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.labcf__field input::placeholder {
    color: #a9b4ba;
}

.labcf__field.is-invalid input,
.labcf__field.is-invalid select {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.labcf__error {
    display: none;
    color: var(--accent-hover);
    font-size: 0.8rem;
    font-weight: 600;
}

.labcf__field.is-invalid .labcf__error {
    display: block;
}

.labcf__hint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: -4px 0 4px;
    color: var(--gray-medium);
    font-size: 0.82rem;
    line-height: 1.5;
}

.labcf__hint i {
    margin-top: 3px;
    color: var(--primary);
}

.labcf__field--check {
    gap: 4px;
}

.labcf__field .labcf__check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.55;
    color: var(--gray-dark);
    cursor: pointer;
}

.labcf__field .labcf__check input {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 2px;
    padding: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.labcf__check a {
    color: var(--primary);
    font-weight: 700;
}

.labcf__check span[aria-hidden="true"] {
    color: var(--accent);
}

.labcf__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.labcf__submit {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 32px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.labcf__submit:hover:not(:disabled),
.labcf__submit:focus-visible:not(:disabled) {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px var(--primary);
}

.labcf__submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.labcf__legal {
    flex: 1;
    min-width: 240px;
    color: var(--gray-medium);
    font-size: 0.78rem;
    line-height: 1.5;
}

.labcf__legal i {
    margin-right: 6px;
    color: var(--primary);
}

.labcf__feedback {
    margin-top: 22px;
    padding: 15px 18px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border-left: 4px solid var(--primary);
}

.labcf__feedback[hidden] {
    display: none;
}

.labcf__feedback--error {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-hover);
    border-left-color: var(--accent);
}

.labcf__aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 20px;
}

.labcf__box {
    padding: 24px 22px;
    border-radius: 18px;
    background: var(--gray-light);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

.labcf__box--help {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    border-color: transparent;
}

.labcf__box-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--font-title);
    font-size: 0.98rem;
    color: var(--primary);
}

.labcf__box--help .labcf__box-title {
    color: var(--white);
}

.labcf__steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
}

.labcf__step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.labcf__step-num {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
}

.labcf__step-title {
    display: block;
    color: var(--gray-dark);
    font-size: 0.9rem;
}

.labcf__step-text {
    margin-top: 3px;
    color: var(--gray-medium);
    font-size: 0.84rem;
    line-height: 1.5;
}

.labcf__box-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--white) 88%, transparent);
}

.labcf__box-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 15px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.labcf__box-cta:hover,
.labcf__box-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.7);
}

@media (max-width: 1024px) {

    .labcf__layout {
        grid-template-columns: 1fr;
    }

    .labcf__aside {
        position: static;
    }
}

@media (max-width: 768px) {

    .labcf {
        padding: 56px 0 64px;
    }

    .labcf__main {
        padding: 26px 20px 22px;
    }

    .labcf__row,
    .labcf__row--3,
    .labcf__row--cep {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .labcf__submit {
        width: 100%;
        justify-content: center;
    }
}


/* ************************************************************
   LAB CARTÃO PARCEIROS — Grade de logos das empresas parceiras
   Arquivo: resources/components/sections/lab-cartao-parceiros.inc.php
   ************************************************************ */
.labctp {
    padding: 72px 0;
    background: var(--gray-light);
}

.labctp__head {
    max-width: 680px;
    margin: 0 auto 32px;
    text-align: center;
}

.labctp__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
}

.labctp__title {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--primary);
    line-height: 1.2;
}

.labctp__subtitle {
    margin-top: 10px;
    color: var(--gray-medium);
    font-size: 0.94rem;
    line-height: 1.6;
}

.labctp__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    list-style: none;
}

.labctp__item {
    display: grid;
    place-items: center;
    padding: 10px;
    border-radius: 16px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--primary) 8%, transparent);
    transition: var(--transition);
}

.labctp__item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.labctp__logo {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.labctp__note {
    max-width: 680px;
    margin: 26px auto 0;
    color: var(--gray-medium);
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1024px) {

    .labctp__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {

    .labctp {
        padding: 56px 0;
    }

    .labctp__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .labctp__item:hover {
        transform: none;
    }
}


/* ************************************************************
   LAB CARTÃO REGULAMENTO — Regulamento em <details> nativos
   Arquivo: resources/components/sections/lab-cartao-regulamento.inc.php
   ************************************************************ */
.labctr {
    padding: 72px 0 84px;
    background: var(--white);
    scroll-margin-top: 20px;
}

.labctr__inner {
    max-width: 860px;
}

.labctr__head {
    margin-bottom: 26px;
}

.labctr__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
}

.labctr__title {
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    color: var(--primary);
    line-height: 1.2;
}

.labctr__intro {
    margin-top: 10px;
    color: var(--gray-medium);
    font-size: 0.94rem;
    line-height: 1.6;
}

.labctr__groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.labctr__group {
    border-radius: 16px;
    background: var(--gray-light);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

.labctr__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    font-family: var(--font-title);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    list-style: none;
}

.labctr__summary::-webkit-details-marker {
    display: none;
}

.labctr__summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 40%, transparent);
    outline-offset: 2px;
    border-radius: 16px;
}

.labctr__chevron {
    font-size: 0.8rem;
    transition: var(--transition);
}

.labctr__group[open] .labctr__chevron {
    transform: rotate(180deg);
}

.labctr__body {
    padding: 0 22px 20px;
}

.labctr__item {
    display: flex;
    gap: 10px;
    color: var(--gray-dark);
    font-size: 0.9rem;
    line-height: 1.65;
}

.labctr__item + .labctr__item {
    margin-top: 12px;
}

.labctr__num {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--primary);
}

.labctr__note {
    margin-top: 18px;
    color: var(--gray-medium);
    font-size: 0.82rem;
    line-height: 1.5;
}


/* ************************************************************
   LAB MEU CARTÃO — Consulta do Cartão Labocliv Prime (/meu-cartao2)
   Arquivo: resources/components/sections/lab-meu-cartao.inc.php
   Sem JavaScript: três formulários HTML e o cartão desenhado por
   sobreposição de texto na arte, como no site antigo.
   ************************************************************ */
.labmc {
    padding: 56px 0 84px;
    background: var(--gray-light);
}

.labmc__inner {
    max-width: 720px;
}

.labmc__head {
    text-align: center;
    margin-bottom: 22px;
}

.labmc__title {
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    color: var(--primary);
    line-height: 1.2;
}

.labmc__intro {
    max-width: 560px;
    margin: 10px auto 0;
    color: var(--gray-medium);
    font-size: 0.95rem;
    line-height: 1.6;
}

.labmc__progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
    list-style: none;
    counter-reset: labmc;
}

.labmc__progress-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--gray-medium);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    counter-increment: labmc;
}

.labmc__progress-item::before {
    content: counter(labmc);
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 0.7rem;
}

.labmc__progress-item.is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.labmc__progress-item.is-current::before {
    background: var(--white);
}

.labmc__progress-item.is-done::before {
    content: "\2713";
}

.labmc__flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
}

.labmc__flash i {
    margin-top: 3px;
}

.labmc__flash--info {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border-left: 4px solid var(--primary);
}

.labmc__flash--error {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-hover);
    border-left: 4px solid var(--accent);
}

.labmc__panel {
    padding: 32px;
    border-radius: 22px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
    box-shadow: var(--shadow-sm);
}

.labmc__panel--card {
    text-align: center;
}

.labmc__panel-title {
    font-family: var(--font-title);
    font-size: 1.15rem;
    color: var(--primary);
}

.labmc__panel-text {
    margin-top: 8px;
    color: var(--gray-medium);
    font-size: 0.9rem;
    line-height: 1.6;
}

.labmc__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.labmc__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-dark);
}

.labmc__input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #dfe5e8;
    border-radius: 12px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--text);
    transition: var(--transition);
}

.labmc__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.labmc__input--code {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 10px;
    text-align: center;
}

.labmc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
    padding: 15px 28px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.labmc__btn:hover,
.labmc__btn:focus-visible {
    background: var(--primary-light);
    color: var(--white);
}

.labmc__btn--ghost {
    background: transparent;
    border: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
    color: var(--primary);
}

.labmc__btn--ghost:hover,
.labmc__btn--ghost:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
}

.labmc__small {
    margin-top: 14px;
    color: var(--gray-medium);
    font-size: 0.8rem;
}

.labmc__inline-form {
    display: inline;
}

.labmc__link-btn {
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary);
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.labmc__aside-link {
    margin-top: 18px;
    color: var(--gray-medium);
    font-size: 0.88rem;
}

.labmc__aside-link a {
    color: var(--primary);
    font-weight: 700;
}

.labmc__welcome {
    color: var(--gray-dark);
    font-size: 1rem;
    line-height: 1.6;
}

/* Cartão: arte 500x330 com o texto por cima, nas mesmas proporções do legado
   (texto a 30px da esquerda e começando a 200px do topo). Unidades em % e em
   cqw para acompanhar a largura do cartão no celular. */
.labmc__card {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 22px auto 18px;
    aspect-ratio: 500 / 330;
    container-type: inline-size;
    border-radius: 18px;
    background: var(--primary);
    overflow: hidden;
    box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.55);
}

.labmc__card-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.labmc__card-data {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 58%;
    display: flex;
    flex-direction: column;
    gap: 1.6cqw;
    color: var(--white);
    text-align: left;
    font-size: 3.4cqw;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.labmc__card-name {
    font-size: 3.6cqw;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.labmc__card-reg {
    margin-left: 6cqw;
}

.labmc__card-logo {
    position: absolute;
    right: 3%;
    bottom: 16%;
    max-width: 22%;
    max-height: 14%;
    padding: 1% 2%;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.93);
    object-fit: contain;
}

.labmc__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.labmc__actions .labmc__btn {
    margin-top: 0;
}

.labmc__footnotes {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.labmc__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--gray-medium);
    font-size: 0.84rem;
    line-height: 1.55;
}

.labmc__note i {
    margin-top: 3px;
    color: var(--primary);
}

.labmc__note a {
    color: var(--primary);
    font-weight: 700;
}

@media (max-width: 768px) {

    .labmc {
        padding: 36px 0 64px;
    }

    .labmc__panel {
        padding: 24px 18px;
    }

    .labmc__actions .labmc__btn,
    .labmc__actions .labmc__inline-form,
    .labmc__actions .labmc__inline-form .labmc__btn {
        width: 100%;
    }

    .labmc__actions .labmc__inline-form {
        display: block;
    }
}


/* ************************************************************
   LAB PARCEIROS HUB — "Seja Parceiro": Médicos e Clínicas (v10.33.0)
   Arquivo: resources/components/sections/lab-parceiros-hub.inc.php
   ************************************************************ */
.labphub {
    padding: 64px 0 80px;
    background: var(--white);
}

.labphub__head {
    max-width: 720px;
    margin-bottom: 34px;
}

.labphub__eyebrow,
.labpben__eyebrow,
.labpf__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
}

.labphub__title,
.labpben__title,
.labpf__title {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
    color: var(--primary);
}

.labphub__subtitle,
.labpben__subtitle,
.labpf__subtitle {
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--gray-medium);
}

.labphub__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    list-style: none;
}

.labphub__card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 36px 30px 30px;
    border-radius: 24px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
    box-shadow: 0 24px 48px -34px rgba(16, 32, 40, 0.35);
    transition: var(--transition);
}

/* Faixa da marca no topo do cartão */
.labphub__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.labphub__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -26px var(--primary);
}

.labphub__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--white)));
    box-shadow: 0 14px 26px -14px var(--primary);
    color: var(--white);
    font-size: 1.4rem;
}

.labphub__card-title {
    font-family: var(--font-title);
    font-size: 1.3rem;
    color: var(--primary);
}

.labphub__card-text {
    color: var(--gray-dark);
    font-size: 0.95rem;
    line-height: 1.65;
}

.labphub__contact,
.labpf__card--contact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--gray-light);
    font-size: 0.88rem;
    line-height: 1.5;
}

.labphub__contact > i {
    margin-top: 3px;
    color: var(--accent);
}

.labphub__contact-name,
.labpf__contact-name {
    display: block;
    color: var(--text);
}

.labphub__contact-role,
.labpf__contact-role {
    display: block;
    color: var(--gray-medium);
    font-size: 0.82rem;
}

.labphub__contact-mail,
.labpf__contact-mail {
    display: inline-block;
    margin-top: 4px;
    color: var(--primary);
    font-weight: 700;
    word-break: break-all;
}

.labphub__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: auto;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.labphub__cta:hover,
.labphub__cta:focus-visible {
    background: var(--accent);
    transform: translateY(-2px);
}

.labphub__cta i {
    transition: var(--transition);
}

.labphub__card:hover .labphub__cta i {
    transform: translateX(4px);
}

.labphub__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 28px;
    color: var(--gray-medium);
    font-size: 0.86rem;
    line-height: 1.55;
}

.labphub__note i {
    margin-top: 3px;
    color: var(--primary);
}

@media (min-width: 768px) {

    .labphub__grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ************************************************************
   LAB PARCEIRO HERO — topo das páginas "Seja Parceiro" (v10.33.0)
   Arquivo: resources/components/heroes/lab-parceiro-hero.inc.php
   Fundo da marca com luz do destaque; texto + ações à esquerda e painel
   "Como funciona" em vidro à direita. Quando a faixa de números
   (.labpben--overlap) vem logo depois, o hero ganha fôlego embaixo e a
   faixa sobe por cima dele.
   ************************************************************ */
.labprh {
    position: relative;
    overflow: hidden;
    padding: 40px 0 72px;
    color: var(--white);
    background:
        radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--accent) 30%, transparent) 0, transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.08) 0, transparent 45%),
        linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 72%, #000) 100%);
}

.labprh:has(+ .labpben--overlap) {
    padding-bottom: 132px;
}

.labprh__shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.labprh__shape--a {
    top: -140px;
    right: -120px;
    width: 420px;
    height: 420px;
    border: 60px solid rgba(255, 255, 255, 0.04);
}

.labprh__shape--b {
    bottom: -90px;
    left: 38%;
    width: 180px;
    height: 180px;
    border: 2px dashed rgba(255, 255, 255, 0.12);
}

.labprh__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
}

.labprh__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 22px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.labprh__crumb {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: var(--transition);
}

a.labprh__crumb:hover,
a.labprh__crumb:focus-visible {
    color: var(--white);
    text-decoration: underline;
}

.labprh__crumb-sep {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.45);
}

.labprh__crumb--current {
    color: var(--white);
}

.labprh__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 7px 16px 7px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.labprh__eyebrow i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    font-size: 0.72rem;
}

.labprh__title {
    font-family: var(--font-title);
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.8px;
    color: var(--white);
}

.labprh__highlight {
    display: block;
    color: var(--accent);
}

.labprh__lead {
    max-width: 580px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.05rem;
    line-height: 1.65;
}

.labprh__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.labprh__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: var(--radius-pill);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.labprh__btn--primary {
    background: var(--accent);
    color: var(--white);
    box-shadow: 0 16px 30px -14px var(--accent);
}

.labprh__btn--primary:hover,
.labprh__btn--primary:focus-visible {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.labprh__btn--ghost {
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: var(--white);
}

.labprh__btn--ghost:hover,
.labprh__btn--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--white);
}

.labprh__btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
}

.labprh__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
    list-style: none;
}

.labprh__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.86rem;
    font-weight: 600;
}

.labprh__badge i {
    color: var(--accent);
}

/* Painel "Como funciona" (vidro) */
.labprh__panel {
    padding: 26px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
}

.labprh__panel-title {
    margin-bottom: 18px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.labprh__steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
}

.labprh__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 18px;
}

/* Linha que liga um passo ao próximo */
.labprh__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 46px;
    bottom: 2px;
    left: 21px;
    border-left: 2px dashed rgba(255, 255, 255, 0.2);
}

.labprh__step-icon {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    font-size: 1rem;
}

.labprh__step-num {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    font-size: 0.66rem;
    font-weight: 800;
}

.labprh__step-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
}

.labprh__step-title {
    font-size: 0.98rem;
    color: var(--white);
}

.labprh__step-text {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
    line-height: 1.5;
}

.labprh__contact {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.labprh__avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    font-family: var(--font-title);
    font-weight: 800;
    letter-spacing: 0.5px;
}

.labprh__contact-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.labprh__contact-name {
    color: var(--white);
    font-size: 0.95rem;
}

.labprh__contact-role {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
}

.labprh__contact-mail {
    margin-top: 2px;
    color: var(--white);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
    text-underline-offset: 3px;
    word-break: break-all;
}

@media (min-width: 768px) {

    .labprh {
        padding-top: 48px;
    }

    .labprh__panel {
        padding: 30px 30px 26px;
    }
}

@media (min-width: 1024px) {

    .labprh__inner {
        grid-template-columns: 1.25fr 0.95fr;
        gap: 56px;
    }

    .labprh--solo .labprh__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {

    .labprh__btn {
        width: 100%;
    }
}


/* ************************************************************
   LAB PARCEIRO BENEFÍCIOS — faixa de números da rede (v10.33.0)
   Arquivo: resources/components/sections/lab-parceiro-beneficios.inc.php
   Sem título: vira uma faixa branca elevada que sobe sobre o hero
   (.labpben--overlap). Com título: grade de cartões comum.
   ************************************************************ */
.labpben {
    position: relative;
    z-index: 2;
    padding: 60px 0 20px;
    background: transparent;
}

.labpben__head {
    max-width: 720px;
    margin-bottom: 28px;
}

.labpben__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    list-style: none;
}

.labpben__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 22px;
    border-radius: 18px;
    background: var(--gray-light);
    border: 1px solid color-mix(in srgb, var(--primary) 8%, transparent);
}

.labpben__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 10%, var(--white));
    color: var(--primary);
    font-size: 1.15rem;
}

.labpben__body {
    min-width: 0;
}

.labpben__stat {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--primary);
}

.labpben__stat::after {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    margin: 10px 0 10px;
    border-radius: 3px;
    background: var(--accent);
}

.labpben__item-title {
    margin-bottom: 4px;
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--text);
}

.labpben__item-text {
    color: var(--gray-medium);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Faixa elevada sobre o hero. Os primeiros 88px da seção ficam por cima do
   hero (transparentes); o resto é branco, para o fundo cinza da página não
   aparecer entre a faixa e o formulário. */
.labpben--overlap {
    padding: 0;
    background: var(--white);
}

.labprh + .labpben--overlap {
    margin-top: -88px;
    background: linear-gradient(to bottom, transparent 88px, var(--white) 88px);
}

.labpben--overlap .labpben__grid {
    gap: 0;
    padding: 6px 8px;
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 34px 60px -34px rgba(16, 32, 40, 0.45), 0 2px 6px rgba(16, 32, 40, 0.06);
}

.labpben--overlap .labpben__item {
    padding: 24px 20px;
    border: none;
    border-radius: 0;
    background: transparent;
}

.labpben--overlap .labpben__item + .labpben__item {
    border-top: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Celular: a faixa empilha — itens mais baixos para não virar uma torre */
@media (max-width: 767px) {

    .labpben--overlap .labpben__item {
        align-items: center;
        padding: 18px 16px;
    }

    .labpben--overlap .labpben__stat {
        font-size: 1.8rem;
    }

    .labpben--overlap .labpben__stat::after {
        margin: 6px 0;
    }
}

@media (min-width: 768px) {

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

    .labpben--overlap .labpben__grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 10px 6px;
    }

    .labpben--overlap .labpben__item {
        padding: 26px 28px;
    }

    .labpben--overlap .labpben__item + .labpben__item {
        border-top: none;
        border-left: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
    }
}

@media (min-width: 1024px) {

    .labpben__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ************************************************************
   LAB PARCEIRO FORM — cadastro com campos montados no admin (v10.33.0)
   Arquivo: resources/components/sections/lab-parceiro-form.inc.php
   ************************************************************ */
.labpf {
    padding: 52px 0 84px;
    background: var(--white);
    scroll-margin-top: 20px;
}

.labpf__head {
    max-width: 720px;
    margin-bottom: 28px;
}

.labpf__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: start;
}

.labpf__main {
    padding: 28px 20px 26px;
    border-radius: 22px;
    background: var(--gray-light);
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Honeypot — fora da tela, sem display:none (robôs ignoram campo oculto) */
.labpf__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.labpf__required-note {
    margin-bottom: 18px;
    color: var(--gray-medium);
    font-size: 0.8rem;
}

.labpf__required-note span,
.labpf__label span[aria-hidden="true"],
.labpf__check span[aria-hidden="true"] {
    color: var(--accent);
}

.labpf__grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 18px;
}

.labpf__section {
    grid-column: 1 / -1;
    margin: 10px 0 14px;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
    font-family: var(--font-title);
    font-size: 1.02rem;
    color: var(--primary);
}

.labpf__grid > .labpf__section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.labpf__section-help {
    grid-column: 1 / -1;
    margin: -8px 0 14px;
    color: var(--gray-medium);
    font-size: 0.85rem;
}

.labpf__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    margin: 0 0 18px;
    padding: 0;
    border: none;
    grid-column: 1 / -1;
}

.labpf__label {
    padding: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--gray-dark);
}

.labpf__help {
    margin: -2px 0 2px;
    color: var(--gray-medium);
    font-size: 0.8rem;
    line-height: 1.5;
}

.labpf__field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.labpf__field select,
.labpf__field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #dfe5e8;
    border-radius: 12px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    transition: var(--transition);
}

.labpf__field textarea {
    min-height: 130px;
    resize: vertical;
}

.labpf__field input:focus,
.labpf__field select:focus,
.labpf__field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.labpf__field input::placeholder,
.labpf__field textarea::placeholder {
    color: #a9b4ba;
}

.labpf__field.is-invalid input:not([type="checkbox"]):not([type="radio"]),
.labpf__field.is-invalid select,
.labpf__field.is-invalid textarea {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.labpf__counter {
    align-self: flex-end;
    color: var(--gray-medium);
    font-size: 0.75rem;
}

.labpf__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.labpf__choice {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid #dfe5e8;
    border-radius: 12px;
    background: var(--white);
    font-size: 0.9rem;
    color: var(--gray-dark);
    cursor: pointer;
    transition: var(--transition);
}

.labpf__choice:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--white));
    color: var(--primary);
}

.labpf__choice:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.labpf__choice input,
.labpf__check input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.labpf__field.is-invalid .labpf__choice {
    border-color: var(--accent);
}

.labpf__check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--gray-dark);
    cursor: pointer;
}

.labpf__check input {
    margin-top: 2px;
}

.labpf__check a {
    color: var(--primary);
    font-weight: 700;
}

.labpf__consent {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}

.labpf__file {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1.5px dashed color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 12px;
    background: var(--white);
}

.labpf__file.is-dragover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--white));
}

.labpf__file input[type="file"] {
    max-width: 100%;
    font-size: 0.88rem;
}

.labpf__file-hint {
    color: var(--gray-medium);
    font-size: 0.78rem;
}

.labpf__field.is-invalid .labpf__file {
    border-color: var(--accent);
}

.labpf__error {
    display: none;
    color: var(--accent-hover);
    font-size: 0.8rem;
    font-weight: 600;
}

.labpf__field.is-invalid .labpf__error {
    display: block;
}

.labpf__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 8px;
}

.labpf__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 100%;
    padding: 15px 32px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.labpf__submit:hover:not(:disabled),
.labpf__submit:focus-visible:not(:disabled) {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px var(--primary);
}

.labpf__submit:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
    outline-offset: 3px;
}

.labpf__submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.labpf__legal {
    flex: 1;
    min-width: 220px;
    color: var(--gray-medium);
    font-size: 0.78rem;
    line-height: 1.5;
}

.labpf__legal i {
    margin-right: 6px;
    color: var(--primary);
}

.labpf__feedback {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 8%, var(--white));
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
}

.labpf__feedback[hidden] {
    display: none;
}

.labpf__feedback--error {
    margin: 0 0 18px;
    background: color-mix(in srgb, var(--accent) 10%, var(--white));
    color: var(--accent-hover);
}

.labpf__done,
.labpf__off {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    border-radius: 16px;
    background: var(--white);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--gray-dark);
}

.labpf__done > i {
    margin-top: 3px;
    font-size: 1.5rem;
    color: #1f9d55;
}

.labpf__off > i {
    margin-top: 3px;
    font-size: 1.3rem;
    color: var(--primary);
}

.labpf__done[hidden] {
    display: none;
}

.labpf__done-protocol {
    margin-top: 8px;
    font-size: 0.9rem;
}

.labpf__done-protocol strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: var(--primary);
}

.labpf__off a {
    color: var(--primary);
    font-weight: 700;
}

.labpf__aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.labpf__card {
    padding: 24px 22px;
    border-radius: 18px;
    background: var(--gray-light);
}

.labpf__card--contact {
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

.labpf__card-title {
    margin-bottom: 12px;
    font-family: var(--font-title);
    font-size: 1.02rem;
    color: var(--primary);
}

.labpf__checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    color: var(--gray-dark);
    font-size: 0.88rem;
    line-height: 1.55;
}

.labpf__checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.labpf__checks i {
    margin-top: 3px;
    color: var(--primary);
}

.labpf__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--white);
}

.labpf__contact-label {
    margin-bottom: 4px;
    color: var(--gray-medium);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

@media (min-width: 768px) {

    .labpf__main {
        padding: 34px 32px 30px;
    }

    .labpf__grid {
        grid-template-columns: 1fr 1fr;
    }

    .labpf__field--half {
        grid-column: auto;
    }

    .labpf__submit {
        width: auto;
    }
}

@media (min-width: 1024px) {

    .labpf__layout {
        grid-template-columns: 1.75fr 1fr;
    }
}


/* ************************************************************
   LAB RESSONÂNCIA E TOMOGRAFIA — página /ressonancia-e-tomografia
   Arquivos: resources/components/{heroes,sections}/lab-rt-*
             resources/components/partials/lab-rt-agende.inc.php
   Prefixo `labrt` (v10.38.30). Família de UMA página: não reusar fora.

   Cores do TEMA do tenant (--primary, --primary-light, --accent), para a
   página acompanhar o admin. O hero, os passos e o fechamento são faixas
   escuras (mistura do primary com preto); exames, unidade e FAQ são claros
   — a alternância é o que dá ritmo a uma página longa de rolagem.
   Único movimento: a linha de varredura da ilustração e o brilho dos CTAs,
   os dois desligados sob prefers-reduced-motion.
   ************************************************************ */

/* ---------- Peças comuns ---------- */
.labrt-head {
    max-width: 720px;
    margin: 0 auto 44px;
    text-align: center;
}

.labrt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.labrt-eyebrow--claro {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}

.labrt-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 3.4vw, 2.45rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.5px;
    color: var(--primary);
}

.labrt-lead {
    margin: 14px 0 0;
    font-size: 1.03rem;
    line-height: 1.65;
    color: var(--gray-medium);
}

.labrt-head--claro .labrt-title {
    color: var(--white);
}

.labrt-head--claro .labrt-lead {
    color: rgba(255, 255, 255, 0.78);
}

.labrt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: var(--transition);
}

.labrt-btn--cta {
    background: var(--accent);
    color: var(--white);
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}

.labrt-btn--cta:hover,
.labrt-btn--cta:focus-visible {
    background: var(--accent-hover);
    color: var(--white);
    transform: translateY(-2px);
}

.labrt-btn--lg {
    padding: 16px 30px;
    font-size: 1.02rem;
}

.labrt-btn--ghost {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--white);
}

.labrt-btn--ghost:hover,
.labrt-btn--ghost:focus-visible {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

.labrt-btn--line {
    border-color: color-mix(in srgb, var(--primary) 25%, transparent);
    color: var(--primary);
}

.labrt-btn--line:hover,
.labrt-btn--line:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}

.labrt-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 3px;
}

.labrt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Hero ---------- */
.labrth {
    position: relative;
    overflow: hidden;
    padding: 46px 0 76px;
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--primary) 45%, #050807) 0%,
        color-mix(in srgb, var(--primary) 80%, #050807) 55%,
        var(--primary) 100%);
    color: var(--white);
}

.labrth__glow {
    position: absolute;
    right: -160px;
    bottom: -220px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 65%);
    pointer-events: none;
}

.labrth__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 48px;
}

.labrth__content {
    min-width: 0;
}

.labrth__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 0.82rem;
}

.labrth__crumbs a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.labrth__crumbs a:hover,
.labrth__crumbs a:focus-visible {
    color: var(--white);
}

.labrth__crumbs i {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
}

.labrth__crumbs span {
    font-weight: 600;
}

.labrth__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.8rem;
    font-weight: 600;
}

.labrth__eyebrow i {
    color: var(--accent);
}

.labrth__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1px;
    color: var(--white);
}

.labrth__highlight {
    display: block;
    color: var(--accent);
}

.labrth__lead {
    margin: 20px 0 0;
    max-width: 54ch;
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.84);
}

.labrth__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.labrth__place {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 22px 0 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.78);
}

.labrth__place i {
    color: var(--accent);
}

/* Ilustração: anel + mesa em traço claro, varredura em accent */
.labrth__visual {
    position: relative;
    max-width: 480px;
    width: 100%;
    margin-left: auto;
}

.labrth__svg {
    display: block;
    width: 100%;
    height: auto;
}

.labrth__ring-out {
    fill: rgba(255, 255, 255, 0.05);
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 2;
}

.labrth__ring-mid {
    fill: rgba(255, 255, 255, 0.04);
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 22;
}

.labrth__ring-in {
    fill: color-mix(in srgb, var(--primary) 70%, #050807);
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
}

.labrth__table {
    fill: rgba(255, 255, 255, 0.85);
}

.labrth__base {
    fill: rgba(255, 255, 255, 0.12);
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1.5;
}

.labrth__scan {
    fill: var(--accent);
    opacity: 0.85;
    filter: drop-shadow(0 0 10px var(--accent));
    animation: labrth-scan 3.2s ease-in-out infinite alternate;
}

@keyframes labrth-scan {
    from {
        transform: translateX(-120px);
    }
    to {
        transform: translateX(120px);
    }
}

.labrth__chips {
    margin: 0;
    padding: 0;
    list-style: none;
}

.labrth__chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 10px;
    border-radius: 14px;
    background: var(--white);
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
}

.labrth__chip--a {
    top: 6%;
    left: -4%;
}

.labrth__chip--b {
    right: -2%;
    bottom: 4%;
}

.labrth__chip-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 14%, var(--white));
    color: var(--accent);
}

/* ---------- Exames ---------- */
.labrtx {
    padding: 84px 0 72px;
    background: var(--white);
}

.labrtx__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.labrtx__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 32px 30px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 24px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 5%, var(--white)) 0%, var(--white) 60%);
    transition: var(--transition);
}

.labrtx__card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--primary) 60%, transparent);
    transform: translateY(-4px);
}

.labrtx__num {
    position: absolute;
    top: 18px;
    right: 26px;
    font-family: var(--font-title);
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--primary) 8%, transparent);
}

.labrtx__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    border-radius: 18px;
    background: var(--primary);
    color: var(--white);
    font-size: 1.5rem;
    box-shadow: 0 14px 28px -14px var(--primary);
}

.labrtx__card-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--primary);
}

.labrtx__card-text {
    flex: 1;
    margin: 12px 0 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--gray-medium);
}

.labrtx__card-cta {
    margin-top: 26px;
}

.labrtx__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 780px;
    margin: 30px auto 0;
    padding: 16px 20px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 5%, var(--white));
    color: var(--primary);
    font-size: 0.95rem;
    line-height: 1.55;
}

.labrtx__note i {
    margin-top: 3px;
    color: var(--accent);
}

/* ---------- Passos ---------- */
.labrtp {
    position: relative;
    padding: 84px 0;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--primary) 50%, #050807) 0%,
        color-mix(in srgb, var(--primary) 85%, #050807) 100%);
    color: var(--white);
}

.labrtp__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.labrtp__step {
    position: relative;
    padding: 28px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
}

/* Fio ligando os passos (só no desktop, onde ficam lado a lado) */
.labrtp__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 52px;
    right: -22px;
    width: 22px;
    height: 2px;
    background: color-mix(in srgb, var(--accent) 60%, transparent);
}

.labrtp__badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: var(--accent);
    color: var(--white);
    font-size: 1.3rem;
}

.labrtp__n {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 800;
}

.labrtp__step-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--white);
}

.labrtp__step-text {
    margin: 10px 0 0;
    font-size: 0.93rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.76);
}

.labrtp__cta {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ---------- Unidade ---------- */
.labrtu {
    padding: 84px 0;
    background: color-mix(in srgb, var(--primary) 4%, var(--white));
}

.labrtu__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
    gap: 32px;
}

.labrtu__inner--sem-foto {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
}

.labrtu__media {
    min-width: 0;
}

.labrtu__img,
.labrtu__gal {
    border-radius: 24px;
    box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.45);
}

.labrtu__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

.labrtu__card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px 30px;
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 20px 50px -30px color-mix(in srgb, var(--primary) 55%, transparent);
}

.labrtu__card-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary);
}

.labrtu__row {
    display: flex;
    gap: 14px;
}

.labrtu__row-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 8%, var(--white));
    color: var(--primary);
}

.labrtu__row-label {
    margin: 0 0 4px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gray-medium);
}

.labrtu__row-text {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.55;
    color: var(--text);
}

.labrtu__tel {
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.labrtu__tel:hover,
.labrtu__tel:focus-visible {
    color: var(--accent);
}

.labrtu__hours {
    margin: 0;
    padding: 0;
    list-style: none;
}

.labrtu__hours li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    font-size: 0.95rem;
    color: var(--text);
}

.labrtu__hours li + li {
    border-top: 1px dashed color-mix(in srgb, var(--primary) 15%, transparent);
}

.labrtu__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.labrtu__more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.labrtu__more:hover,
.labrtu__more:focus-visible {
    color: var(--accent);
}

/* ---------- FAQ ---------- */
.labrtf {
    padding: 84px 0;
    background: var(--white);
}

.labrtf__inner {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
    gap: 56px;
}

.labrtf__aside {
    position: sticky;
    top: 24px;
}

.labrtf__help {
    margin-top: 28px;
    padding: 24px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--primary) 6%, var(--white));
}

.labrtf__help-text {
    margin: 0 0 16px;
    font-size: 0.97rem;
    line-height: 1.55;
    color: var(--primary);
}

.labrtf__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.labrtf__item {
    border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 16px;
    background: var(--white);
    transition: var(--transition);
}

.labrtf__item[open] {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 14px 34px -24px color-mix(in srgb, var(--primary) 60%, transparent);
}

.labrtf__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.labrtf__q::-webkit-details-marker {
    display: none;
}

.labrtf__q:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
    border-radius: 16px;
}

.labrtf__sign {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 8%, var(--white));
    font-size: 0.8rem;
    transition: var(--transition);
}

.labrtf__item[open] .labrtf__sign {
    background: var(--accent);
    color: var(--white);
    transform: rotate(45deg);
}

.labrtf__a {
    padding: 0 22px 20px;
}

.labrtf__a p {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--gray-medium);
}

/* ---------- Fechamento ---------- */
.labrtc {
    padding: 0 0 84px;
    background: var(--white);
}

.labrtc__box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 48px 52px;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 50%, #050807) 0%,
        var(--primary) 100%);
    color: var(--white);
}

.labrtc__glow {
    position: absolute;
    top: -180px;
    right: -120px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent) 0%, transparent 65%);
    pointer-events: none;
}

.labrtc__text,
.labrtc__actions {
    position: relative;
}

.labrtc__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--white);
}

.labrtc__lead {
    margin: 12px 0 0;
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.labrtc__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.labrtc__tel {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
}

.labrtc__tel a {
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.labrtc__tel a:hover,
.labrtc__tel a:focus-visible {
    border-bottom-color: var(--white);
}

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
    .labrth__inner,
    .labrtu__inner,
    .labrtf__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .labrth__visual {
        max-width: 420px;
        margin: 0 auto;
    }

    .labrtp__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .labrtp__step::after {
        display: none;
    }

    .labrtf__aside {
        position: static;
    }

    .labrtf__inner {
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .labrth {
        padding: 32px 0 56px;
    }

    .labrtx,
    .labrtp,
    .labrtu,
    .labrtf {
        padding: 60px 0;
    }

    .labrtc {
        padding-bottom: 60px;
    }

    .labrtx__grid,
    .labrtp__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .labrtx__card {
        padding: 28px 22px 24px;
    }

    .labrth__actions .labrt-btn,
    .labrtx__card-cta .labrt-btn,
    .labrtu__actions .labrt-btn,
    .labrtf__help .labrt-btn,
    .labrtc__actions .labrt-btn {
        width: 100%;
    }

    .labrth__chip {
        font-size: 0.78rem;
    }

    .labrth__chip--a {
        left: 0;
    }

    .labrth__chip--b {
        right: 0;
    }

    .labrtu__card {
        padding: 26px 20px;
    }

    .labrtc__box {
        flex-direction: column;
        align-items: stretch;
        padding: 36px 22px;
        text-align: center;
    }

    .labrtc__lead {
        margin-left: auto;
        margin-right: auto;
    }

    .labrtc__actions {
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .labrth__scan {
        animation: none;
    }

    .labrtx__card:hover,
    .labrt-btn--cta:hover,
    .labrt-btn--cta:focus-visible {
        transform: none;
    }
}

/* ************************************************************
   LAB WHATSAPP FLUTUANTE — botão "Agendamento de Exames"
   Arquivo: resources/components/widgets/lab-whatsapp-flutuante.inc.php
   Prefixo `labwa` (v10.38.32).

   Ocupa o canto inferior direito da Maria quando ela está desligada no .env
   (CHAT_WIDGET_ENABLED=false). Mesma posição e mesmo z-index do balão
   (.ac1-widget: 24px/24px, 9990) — abaixo do banner de cookies (9998), como
   o balão já ficava. Verde ESCURO de propósito: texto branco sobre o
   #25d366 da marca dá contraste 2:1; sobre o #15803d, 5:1 (WCAG AA).
   ************************************************************ */
.labwa {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px 8px 8px;
    border-radius: 999px;
    background: #15803d;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.labwa:hover,
.labwa:focus-visible {
    background: #166534;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.labwa:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px #15803d, 0 10px 26px rgba(0, 0, 0, 0.28);
}

.labwa__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    font-size: 26px;
}

/* Movimento para chamar a atenção (v10.38.33, pedido do usuário): o ícone
   balança de leve e uma onda sai do círculo — os dois juntos, uma vez a cada
   4s, e parados o resto do ciclo (movimento contínuo cansa e distrai a
   leitura). Só transform/opacity: roda na GPU, sem reflow. Desligado sob
   prefers-reduced-motion e enquanto o mouse/foco está no botão. */
.labwa__icon i {
    display: inline-block;
    animation: labwa-balanco 4s ease-in-out infinite;
}

.labwa__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    opacity: 0;
    pointer-events: none;
    animation: labwa-onda 4s ease-out infinite;
}

.labwa:hover .labwa__icon i,
.labwa:focus-visible .labwa__icon i,
.labwa:hover .labwa__icon::after,
.labwa:focus-visible .labwa__icon::after {
    animation-play-state: paused;
}

@keyframes labwa-balanco {
    0%, 70%, 100% { transform: rotate(0deg) scale(1); }
    74% { transform: rotate(-14deg) scale(1.1); }
    78% { transform: rotate(12deg) scale(1.1); }
    82% { transform: rotate(-8deg) scale(1.05); }
    86% { transform: rotate(5deg) scale(1.02); }
    90% { transform: rotate(0deg) scale(1); }
}

@keyframes labwa-onda {
    0%, 68% { transform: scale(1); opacity: 0; }
    72% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.7); opacity: 0; }
}

.labwa__text {
    white-space: nowrap;
}

@media (max-width: 767px) {
    .labwa {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        gap: 8px;
        padding: 6px 16px 6px 6px;
        font-size: 14px;
    }

    .labwa__icon {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .labwa {
        transition: none;
    }

    .labwa:hover,
    .labwa:focus-visible {
        transform: none;
    }

    .labwa__icon i,
    .labwa__icon::after {
        animation: none;
    }
}

/* ************************************************************
   LAB REDES FLUTUANTES — coluna de redes na lateral direita
   Arquivo: resources/components/widgets/lab-redes-flutuantes.inc.php
   Prefixo `labrf` (v10.38.34).

   Port do `lbc-social-float` do site antigo: círculos brancos de 44px no
   meio da lateral direita, ícone na cor do TEMA (--primary), cor da rede no
   hover e rótulo escuro à esquerda (hover E foco do teclado). Some abaixo de
   768px, como lá — o canto do celular já tem o WhatsApp/a Maria e as redes
   estão no rodapé. z-index 9980: abaixo do balão da Maria (9990, a janela
   aberta cobre a coluna) e do banner de cookies (9998).
   ************************************************************ */
.labrf {
    position: fixed;
    top: 50%;
    right: 14px;
    z-index: 9980;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    animation: labrf-entrada 0.4s ease 0.3s both;
}

.labrf__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--primary);
    font-size: 20px;
    text-decoration: none;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.labrf__item:hover,
.labrf__item:focus-visible {
    color: #ffffff;
    transform: scale(1.08) translateX(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.labrf__item:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 3px;
}

/* Cor de cada rede no hover/foco (mesmas do site antigo). */
.labrf__item--whatsapp:hover,
.labrf__item--whatsapp:focus-visible { background: #25d366; }

.labrf__item--instagram:hover,
.labrf__item--instagram:focus-visible { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

.labrf__item--facebook:hover,
.labrf__item--facebook:focus-visible { background: #1877f2; }

.labrf__item--youtube:hover,
.labrf__item--youtube:focus-visible { background: #ff0000; }

.labrf__item--spotify:hover,
.labrf__item--spotify:focus-visible { background: #1db954; }

/* Rótulo à esquerda do círculo. */
.labrf__tip {
    position: absolute;
    top: 50%;
    right: 100%;
    padding: 5px 10px;
    border-radius: 4px;
    background: #1f2937;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-12px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.labrf__tip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    border: 5px solid transparent;
    border-left-color: #1f2937;
    transform: translateY(-50%);
}

.labrf__item:hover .labrf__tip,
.labrf__item:focus-visible .labrf__tip {
    opacity: 1;
    transform: translateY(-50%) translateX(-8px);
}

@keyframes labrf-entrada {
    from { opacity: 0; transform: translateY(-50%) translateX(20px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@media (max-width: 767px) {
    .labrf {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .labrf {
        animation: none;
    }

    .labrf__item,
    .labrf__tip {
        transition: none;
    }

    .labrf__item:hover,
    .labrf__item:focus-visible {
        transform: none;
    }
}

/* ************************************************************
   LAB MANUTENÇÃO — página "Site em manutenção"
   Arquivo: resources/components/pages/lab-manutencao.inc.php
   Prefixo `labmt` (v10.38.35).

   Documento próprio (sem header/footer do site): fundo escuro na cor do
   TEMA (--primary) com brilhos suaves, cartão branco no centro com a marca,
   a mensagem editável no admin e as ações (resultados e WhatsApp). O pop-up
   de resultados é um [popover] nativo: sem JavaScript; no navegador sem a
   API o formulário aparece abaixo do cartão (@supports no fim do bloco).
   Todo movimento para sob prefers-reduced-motion.
   ************************************************************ */
.labmt-body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    color: #ffffff;
    background: #123a35;
    background:
        radial-gradient(1100px 620px at 8% -12%, rgba(59, 145, 133, 0.55), transparent 62%),
        radial-gradient(900px 560px at 108% 112%, rgba(236, 116, 78, 0.28), transparent 60%),
        linear-gradient(160deg, #0d2622 0%, var(--primary) 55%, #143934 100%);
    background-attachment: fixed;
}

.labmt-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Trama fina de laboratório, só no centro (máscara radial). */
.labmt-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
}

.labmt-bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    animation: labmt-flutua 18s ease-in-out infinite alternate;
}

.labmt-bg__orb--1 {
    top: -120px;
    left: -80px;
    width: 420px;
    height: 420px;
    background: var(--primary-light);
}

.labmt-bg__orb--2 {
    right: -140px;
    bottom: -160px;
    width: 480px;
    height: 480px;
    background: var(--accent);
    opacity: 0.28;
    animation-duration: 22s;
}

.labmt-bg__orb--3 {
    top: 40%;
    left: 62%;
    width: 260px;
    height: 260px;
    background: #7fd1c3;
    opacity: 0.18;
    animation-duration: 26s;
}

.labmt {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(14px, 3vh, 48px) 16px;
    box-sizing: border-box;
}

.labmt-card {
    position: relative;
    width: 100%;
    max-width: 680px;
    padding: clamp(22px, 4vh, 48px) 48px clamp(18px, 3vh, 36px);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.97);
    color: var(--text);
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.4);
    overflow: hidden;
    box-sizing: border-box;
    animation: labmt-entra 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Faixa fina no topo do cartão, com brilho correndo. */
.labmt-card__line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent), var(--primary-light), var(--primary));
    background-size: 300% 100%;
    animation: labmt-brilho 6s linear infinite;
}

.labmt-card__logo {
    display: block;
    width: auto;
    max-width: 220px;
    height: auto;
    max-height: clamp(54px, 8vh, 84px);
    margin: 0 auto clamp(10px, 2vh, 22px);
    object-fit: contain;
}

.labmt-card__marca {
    margin: 0 0 22px;
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
}

.labmt-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(35, 86, 79, 0.08);
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.labmt-card__dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
}

.labmt-card__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0;
    animation: labmt-pulso 2s ease-out infinite;
}

.labmt-card__icone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(58px, 9vh, 86px);
    height: clamp(58px, 9vh, 86px);
    margin: clamp(12px, 2.5vh, 26px) auto 0;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #ffffff;
    font-size: clamp(26px, 4vh, 36px);
    box-shadow: 0 14px 30px rgba(35, 86, 79, 0.35);
    transform: rotate(-6deg);
}

.labmt-card__icone > .fa-flask-vial {
    transform: rotate(6deg);
}

.labmt-card__gear {
    position: absolute;
    right: -10px;
    bottom: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--accent);
    font-size: 15px;
    animation: labmt-gira 8s linear infinite;
}

.labmt-card__title {
    margin: clamp(12px, 2.5vh, 26px) auto clamp(6px, 1.2vh, 12px);
    max-width: 24ch;
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.15rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary);
}

.labmt-card__msg {
    max-width: 58ch;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.7;
    color: #4b5d5a;
}

.labmt-card__return {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 8px 16px;
    border: 1px solid #f6d3c6;
    border-radius: 999px;
    background: #fff6f2;
    color: #a6421f;
    font-size: 0.92rem;
    font-weight: 600;
}

.labmt-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(14px, 3vh, 30px);
}

.labmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border: 2px solid transparent;
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.labmt-btn i {
    font-size: 18px;
}

.labmt-btn--primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(35, 86, 79, 0.32);
}

.labmt-btn--primary:hover,
.labmt-btn--primary:focus-visible {
    background: #1a413b;
    color: #ffffff;
    transform: translateY(-2px);
}

/* "RESULTADO DE EXAMES": um raio de luz gira pela borda do botão. O ::before
   é um cone de luz maior que o botão, girando atrás; o ::after cobre o miolo
   com a cor do botão e deixa à mostra só a faixa de 4px da borda. Só
   transform: roda na GPU. Parado (borda acesa fixa) sob reduced-motion. */
.labmt-btn--raio {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    padding: 16px 26px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    animation: labmt-raio-brilho 2.4s ease-in-out infinite;
}

.labmt-btn--raio::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -2;
    width: 160%;
    aspect-ratio: 1;
    background: conic-gradient(from 0deg, transparent 0deg 200deg, rgba(236, 116, 78, 0.35) 260deg, var(--accent) 300deg, #ffffff 335deg, var(--accent) 350deg, transparent 360deg);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: labmt-raio-gira 2.6s linear infinite;
}

.labmt-btn--raio::after {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: -1;
    border-radius: 10px;
    background: var(--primary);
    transition: background-color 0.18s ease;
}

.labmt-btn--raio:hover::after,
.labmt-btn--raio:focus-visible::after {
    background: #1a413b;
}

@keyframes labmt-raio-gira {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes labmt-raio-brilho {
    0%, 100% { box-shadow: 0 12px 26px rgba(35, 86, 79, 0.32), 0 0 0 0 rgba(236, 116, 78, 0); }
    50%      { box-shadow: 0 12px 26px rgba(35, 86, 79, 0.32), 0 0 22px 2px rgba(236, 116, 78, 0.45); }
}

.labmt-btn--whats {
    border-color: #15803d;
    background: #ffffff;
    color: #15803d;
}

.labmt-btn--whats:hover,
.labmt-btn--whats:focus-visible {
    background: #15803d;
    color: #ffffff;
    transform: translateY(-2px);
}

.labmt-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.labmt-card__contatos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin: clamp(14px, 2.5vh, 28px) 0 0;
    padding: clamp(12px, 2.2vh, 22px) 0 0;
    border-top: 1px solid #e6eeec;
    list-style: none;
}

.labmt-card__contatos a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2d3d3a;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.labmt-card__contatos a:hover,
.labmt-card__contatos a:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}

.labmt-card__contatos i {
    color: var(--primary);
}

/* Redes dentro do cartão: só no celular (no computador há a coluna flutuante). */
.labmt-card__redes {
    display: none;
}

.labmt__copy {
    margin: clamp(8px, 2vh, 22px) 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    text-align: center;
}

/* ---------- Pop-up "Acesso à área de resultados" ---------- */
.labmt-modal {
    width: min(400px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: #ffffff;
    color: var(--text);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
}

.labmt-modal:popover-open {
    margin: auto;
    animation: labmt-modal-abre 0.22s ease-out both;
}

.labmt-modal::backdrop {
    background: rgba(8, 26, 24, 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.labmt-modal__head {
    display: flex;
    justify-content: flex-end;
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
}

.labmt-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6c757d;
    font-size: 20px;
    cursor: pointer;
}

.labmt-modal__close:hover,
.labmt-modal__close:focus-visible {
    background: #f1f3f5;
    color: var(--text);
}

.labmt-modal__close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.labmt-modal__body {
    padding: 20px 24px 22px;
    text-align: center;
}

.labmt-modal__title {
    margin: 0 0 18px;
    font-family: var(--font-title);
    font-size: 1.32rem;
    font-weight: 800;
    color: var(--primary);
}

/* Rótulo só para leitor de tela: o visual é o placeholder, como no site antigo. */
.labmt-modal__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.labmt-modal__input {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 12px;
    border: 0;
    border-bottom: 2px solid #33a456;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--primary);
    font-family: inherit;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
}

.labmt-modal__input::placeholder {
    color: #6c757d;
    letter-spacing: 0.04em;
}

.labmt-modal__input:focus {
    outline: none;
    border-bottom-color: var(--primary);
    background: #f4f9f8;
}

.labmt-modal__input:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

.labmt-modal__submit {
    width: 100%;
    margin-top: 6px;
    padding: 14px;
    border: 0;
    border-radius: 10px;
    background: var(--primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.labmt-modal__submit:hover,
.labmt-modal__submit:focus-visible {
    background: #1a413b;
}

.labmt-modal__submit:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.labmt-modal__links {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    margin-top: 16px;
}

.labmt-modal__links a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.labmt-modal__links a:hover,
.labmt-modal__links a:focus-visible {
    text-decoration: underline;
}

.labmt-modal__note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    margin: 16px 0 0;
    color: #6c757d;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Navegador sem Popover API: o formulário fica visível abaixo do cartão. */
@supports not selector(:popover-open) {
    .labmt-modal {
        position: relative;
        z-index: 1;
        margin: -96px auto 120px;
    }

    .labmt-modal__head {
        display: none;
    }
}

/* ---------- Faixa do ADMIN no site com a manutenção ligada ---------- */
.labmt-admin {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9997;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    padding: 8px 16px;
    background: #9a3412;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.labmt-admin a {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
}

.labmt-admin a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

body:has(.labmt-admin) {
    padding-top: 44px;
}

/* Computador com tela baixa: o ícone decorativo sai para tudo caber sem rolagem. */
@media (min-width: 768px) and (max-height: 700px) {
    .labmt-card__icone {
        display: none;
    }
}

@keyframes labmt-entra {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes labmt-brilho {
    from { background-position: 0% 0; }
    to   { background-position: 300% 0; }
}

@keyframes labmt-pulso {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes labmt-gira {
    to { transform: rotate(360deg); }
}

@keyframes labmt-flutua {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(40px, 30px, 0) scale(1.08); }
}

@keyframes labmt-modal-abre {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 767px) {
    .labmt {
        justify-content: flex-start;
        padding: 20px 16px 104px;
    }

    .labmt-card {
        padding: 36px 22px 28px;
        border-radius: 22px;
    }

    .labmt-card__logo {
        max-width: 180px;
        max-height: 68px;
    }

    .labmt-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .labmt-card__contatos {
        flex-direction: column;
        align-items: center;
    }

    .labmt-card__redes {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 22px;
    }

    .labmt-card__rede {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #f1f6f5;
        color: var(--primary);
        font-size: 18px;
        text-decoration: none;
    }

    .labmt-card__rede:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
    }

    .labmt-admin {
        font-size: 13px;
    }

    body:has(.labmt-admin) {
        padding-top: 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .labmt-card,
    .labmt-card__line,
    .labmt-card__dot::after,
    .labmt-card__gear,
    .labmt-bg__orb,
    .labmt-modal:popover-open,
    .labmt-btn--raio,
    .labmt-btn--raio::before {
        animation: none;
    }

    /* Sem giro: a borda fica acesa por inteiro, sem movimento. */
    .labmt-btn--raio::before {
        background: linear-gradient(90deg, var(--accent), #ffffff, var(--accent));
    }

    .labmt-btn,
    .labmt-modal__submit {
        transition: none;
    }

    .labmt-btn:hover,
    .labmt-btn:focus-visible {
        transform: none;
    }
}

/* ************************************************************
   LAB PRIVACIDADE FORM — Canal de Denúncia e Requisições de Privacidade
   Arquivo: resources/components/sections/lab-privacidade-form.inc.php
   Prefixo `labpv` (v10.39.0). Cores do TEMA do tenant. Campos fixos (os do
   site antigo), agrupados em fieldsets como lá. Sem JS, tudo funciona.
   ************************************************************ */
.labpv {
    padding: 48px 0 72px;
    background: var(--gray-light, #f8f9fa);
}

.labpv .container {
    max-width: 920px;
}

.labpv__intro {
    display: flex;
    gap: 20px;
    margin-bottom: 28px;
    padding: 28px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.labpv__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--primary);
    color: #ffffff;
    font-size: 24px;
}

.labpv__title {
    margin: 0 0 10px;
    font-family: var(--font-title);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 800;
    color: var(--primary);
}

.labpv__text {
    margin: 0 0 12px;
    line-height: 1.7;
    color: #44514f;
}

.labpv__notice {
    display: flex;
    gap: 10px;
    margin: 4px 0 0;
    padding: 12px 14px;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    background: #f2f7f6;
    line-height: 1.6;
    color: #2d3d3a;
}

.labpv__notice i {
    margin-top: 4px;
    color: var(--primary);
}

.labpv__form {
    padding: 28px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.labpv__required-note {
    margin: 0 0 16px;
    font-size: 13px;
    color: #6c757d;
}

.labpv__group {
    margin: 0 0 22px;
    padding: 18px 20px 6px;
    border: 1px solid #e3ebe9;
    border-radius: 14px;
    min-width: 0;
}

.labpv__legend {
    padding: 0 8px;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.labpv__group.is-disabled {
    opacity: 0.55;
}

.labpv__group.is-disabled .labpv__legend::after {
    content: " (desabilitado em denúncia anônima)";
    font-weight: 600;
    font-size: 0.85rem;
    color: #6c757d;
}

.labpv__hint--anon {
    display: none;
}

.labpv__group.is-disabled .labpv__hint--anon {
    display: block;
}

.labpv__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.labpv__field {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    min-width: 0;
}

.labpv__field--full {
    grid-column: 1 / -1;
}

.labpv__label {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #2d3d3a;
}

.labpv__label span[aria-hidden="true"] {
    color: #b42318;
}

.labpv__cond {
    font-weight: 500;
    font-size: 0.85rem;
    color: #6c757d;
}

.labpv__field input,
.labpv__field select,
.labpv__field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cfdcd9;
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    box-sizing: border-box;
}

.labpv__field textarea {
    resize: vertical;
    min-height: 130px;
}

.labpv__field input[type="file"] {
    padding: 10px;
    background: #f7faf9;
}

.labpv__field input:focus,
.labpv__field select:focus,
.labpv__field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(35, 86, 79, 0.18);
}

.labpv__field input:disabled {
    background: #f1f3f5;
    cursor: not-allowed;
}

.labpv__field.is-invalid input,
.labpv__field.is-invalid select,
.labpv__field.is-invalid textarea {
    border-color: #b42318;
}

.labpv__error {
    min-height: 0;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #b42318;
}

.labpv__error:empty {
    display: none;
}

.labpv__hint {
    margin: 6px 0 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #5b6866;
}

.labpv__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.labpv__choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #cfdcd9;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
}

.labpv__choice input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.labpv__choice:has(input:checked) {
    border-color: var(--primary);
    background: #f2f7f6;
    color: var(--primary);
}

.labpv__choice:has(input:focus-visible) {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

.labpv__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

.labpv__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.labpv__submit:hover,
.labpv__submit:focus-visible {
    background: #1a413b;
}

.labpv__submit:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.labpv__legal {
    flex: 1 1 260px;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #5b6866;
}

.labpv__legal a {
    color: var(--primary);
    font-weight: 600;
}

.labpv__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.labpv__feedback {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-left: 4px solid #b42318;
    border-radius: 10px;
    background: #fdf1f0;
    color: #8a1c13;
    font-weight: 600;
}

.labpv__done,
.labpv__off {
    display: flex;
    gap: 16px;
    padding: 24px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.labpv__done > i {
    font-size: 34px;
    color: #15803d;
}

.labpv__off > i {
    font-size: 26px;
    color: var(--primary);
}

.labpv__done-text,
.labpv__off p {
    margin: 0 0 8px;
    font-weight: 600;
}

.labpv__done-protocol {
    display: inline-block;
    margin: 0 0 10px;
    padding: 10px 18px;
    border: 2px dashed var(--primary);
    border-radius: 10px;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    color: var(--primary);
}

.labpv__done-help {
    margin: 0;
    color: #5b6866;
}

@media (max-width: 767px) {
    .labpv {
        padding: 28px 0 48px;
    }

    .labpv__intro {
        flex-direction: column;
        padding: 20px;
    }

    .labpv__form {
        padding: 18px;
    }

    .labpv__group {
        padding: 14px 14px 4px;
    }

    .labpv__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .labpv__submit {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .labpv__submit {
        transition: none;
    }
}

/* v10.40.0 — "Outro local": [hidden] perde para o display da classe .labpv__field. */
.labpv__field--outro[hidden] {
    display: none;
}

/* ************************************************************
   LAB OUVIDORIA FORM — "Avalie nosso atendimento" (/ouvidoria)
   Arquivo: resources/components/sections/lab-ouvidoria-form.inc.php
   Prefixo `labov` (v10.41.0). Cores do TEMA do tenant. Estrelas e NPS são
   <input type="radio"> de verdade (teclado e leitor de tela, sem JS); o
   preenchimento "até a estrela escolhida" usa :has() — sem suporte, só a
   estrela marcada acende, e continua funcionando.
   ************************************************************ */
.labov {
    padding: 48px 0 72px;
    background: var(--gray-light, #f8f9fa);
}

.labov .container {
    max-width: 920px;
}

.labov__intro {
    display: flex;
    gap: 20px;
    margin-bottom: 28px;
    padding: 28px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.labov__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--primary);
    color: #ffffff;
    font-size: 24px;
}

.labov__title {
    margin: 0 0 10px;
    font-family: var(--font-title);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 800;
    color: var(--primary);
}

.labov__text {
    margin: 0 0 12px;
    line-height: 1.7;
    color: #44514f;
}

.labov__notice {
    display: flex;
    gap: 10px;
    margin: 4px 0 0;
    padding: 12px 14px;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    background: #f2f7f6;
    line-height: 1.6;
    color: #2d3d3a;
}

.labov__notice i {
    margin-top: 4px;
    color: var(--primary);
}

.labov__form {
    padding: 28px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.labov__required-note {
    margin: 0 0 16px;
    font-size: 13px;
    color: #6c757d;
}

.labov__group {
    margin: 0 0 22px;
    padding: 18px 20px 8px;
    border: 1px solid #e3ebe9;
    border-radius: 14px;
    min-width: 0;
}

.labov__legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
}

.labov__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.85rem;
}

.labov__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.labov__field {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    min-width: 0;
}

.labov__field--full {
    grid-column: 1 / -1;
}

.labov__label {
    margin-bottom: 6px;
    padding: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: #2d3d3a;
}

.labov__req {
    color: #b42318;
}

.labov__cond {
    font-weight: 500;
    font-size: 0.85rem;
    color: #6c757d;
}

.labov__field input,
.labov__field select,
.labov__field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cfdcd9;
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    box-sizing: border-box;
}

.labov__field textarea {
    resize: vertical;
    min-height: 130px;
}

.labov__field input:focus,
.labov__field select:focus,
.labov__field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(35, 86, 79, 0.18);
}

.labov__field.is-invalid input,
.labov__field.is-invalid select,
.labov__field.is-invalid textarea {
    border-color: #b42318;
}

.labov__error {
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #b42318;
}

.labov__error:empty {
    display: none;
}

.labov__hint {
    margin: 4px 0 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #5b6866;
}

.labov__hint a {
    color: var(--primary);
    font-weight: 700;
}

.labov__hint--denuncia {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.labov__hint--denuncia i {
    margin-top: 3px;
    color: var(--primary);
}

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

/* --- Estrelas (1 a 5) --- */
.labov__rating {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.labov__stars {
    display: flex;
    gap: 6px;
}

.labov__star {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #dfe7e5;
    border-radius: 12px;
    background: #ffffff;
    color: #c9d3d1;
    font-size: 22px;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.labov__star-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.labov__star:hover {
    transform: translateY(-1px);
    border-color: #f2b01e;
}

.labov__star:has(.labov__star-input:checked) {
    color: #f2b01e;
    border-color: #f2b01e;
}

.labov__star:has(.labov__star-input:focus-visible) {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

/* Acende as estrelas ANTES da escolhida (1..n). */
.labov__stars:has(.labov__star:nth-child(2) .labov__star-input:checked) .labov__star:nth-child(-n+1),
.labov__stars:has(.labov__star:nth-child(3) .labov__star-input:checked) .labov__star:nth-child(-n+2),
.labov__stars:has(.labov__star:nth-child(4) .labov__star-input:checked) .labov__star:nth-child(-n+3),
.labov__stars:has(.labov__star:nth-child(5) .labov__star-input:checked) .labov__star:nth-child(-n+4) {
    color: #f2b01e;
    border-color: #f6d27d;
}

.labov__rating.is-invalid .labov__star {
    border-color: #e9a29b;
}

.labov__scale {
    display: flex;
    justify-content: space-between;
    max-width: 268px;
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: #6c757d;
}

/* --- Escolhas em pílula ("voltaria") e grupos de escolha --- */
.labov__choices-group {
    margin: 4px 0 16px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.labov__choices-group.is-invalid .labov__pill,
.labov__choices-group.is-invalid .labov__nps-item,
.labov__choices-group.is-invalid .labov__type {
    border-color: #e9a29b;
}

.labov__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.labov__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid #cfdcd9;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
}

.labov__pill input,
.labov__nps-item input,
.labov__type input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.labov__pill:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.labov__pill:has(input:focus-visible),
.labov__nps-item:has(input:focus-visible),
.labov__type:has(input:focus-visible),
.labov__check:has(input:focus-visible) {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

/* --- NPS 0 a 10 --- */
.labov__nps {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 6px;
}

.labov__nps-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid #dfe7e5;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.labov__nps-item--detr {
    color: #b42318;
}

.labov__nps-item--neut {
    color: #a15c00;
}

.labov__nps-item--prom {
    color: #15803d;
}

.labov__nps-item--detr:has(input:checked) {
    background: #b42318;
    border-color: #b42318;
    color: #ffffff;
}

.labov__nps-item--neut:has(input:checked) {
    background: #d97706;
    border-color: #d97706;
    color: #ffffff;
}

.labov__nps-item--prom:has(input:checked) {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

.labov__nps + .labov__scale {
    max-width: none;
}

/* --- Tipo da mensagem --- */
.labov__types {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.labov__type {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid #cfdcd9;
    border-radius: 14px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.labov__type i {
    font-size: 22px;
    color: var(--primary);
}

.labov__type:has(input:checked) {
    border-color: var(--primary);
    background: #f2f7f6;
    box-shadow: inset 0 0 0 1px var(--primary);
}

/* --- Retorno --- */
.labov__check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
}

.labov__check input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.labov__contact {
    margin-top: 6px;
    padding: 14px 16px 2px;
    border-radius: 12px;
    background: #f7faf9;
}

/* [hidden] perde para o display de classe: regra explícita. */
.labov__contact[hidden] {
    display: none;
}

/* Com JS a caixa abre pela caixa de seleção — o aviso "sem JS" some. */
.labov__contact.is-js .labov__hint--nojs {
    display: none;
}

/* --- Envio --- */
.labov__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

.labov__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.labov__submit:hover,
.labov__submit:focus-visible {
    background: #1a413b;
}

.labov__submit:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.labov__legal {
    flex: 1 1 260px;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #5b6866;
}

.labov__legal a {
    color: var(--primary);
    font-weight: 600;
}

.labov__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.labov__feedback {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-left: 4px solid #b42318;
    border-radius: 10px;
    background: #fdf1f0;
    color: #8a1c13;
    font-weight: 600;
}

.labov__done,
.labov__off {
    display: flex;
    gap: 16px;
    padding: 24px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.labov__done > i {
    font-size: 34px;
    color: #15803d;
}

.labov__off > i {
    font-size: 26px;
    color: var(--primary);
}

.labov__done-text,
.labov__off p {
    margin: 0 0 8px;
    font-weight: 600;
}

.labov__done-protocol {
    display: inline-block;
    margin: 0 0 10px;
    padding: 10px 18px;
    border: 2px dashed var(--primary);
    border-radius: 10px;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    color: var(--primary);
}

.labov__done-help {
    margin: 0 0 6px;
    color: #5b6866;
}

.labov__done-help a {
    color: var(--primary);
    font-weight: 700;
}

@media (max-width: 767px) {
    .labov {
        padding: 28px 0 48px;
    }

    .labov__intro {
        flex-direction: column;
        padding: 20px;
    }

    .labov__form {
        padding: 18px;
    }

    .labov__group {
        padding: 14px 12px 4px;
    }

    .labov__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .labov__types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .labov__nps {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .labov__star {
        width: 44px;
        height: 44px;
    }

    .labov__submit {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .labov__star,
    .labov__submit {
        transition: none;
    }

    .labov__star:hover {
        transform: none;
    }
}