/* =========================================================
   CEPAVET MEGA SITE
   STYLE.CSS
========================================================= */

:root {

    --blue: #183572;
    --blue-dark: #102653;
    --blue-deep: #0a1b3f;
    --blue-light: #31579f;

    --yellow: #f5c51c;
    --yellow-light: #ffe98b;

    --sand: #eee2cf;
    --sand-light: #faf6ee;
    --cream: #fffdf8;

    --white: #ffffff;

    --text: #202020;
    --muted: #77736b;

    --green: #25d366;

    --border: rgba(24,53,114,.11);

    --shadow:
        0 25px 80px rgba(16,38,83,.11);

    --shadow-soft:
        0 12px 35px rgba(16,38,83,.08);

    --radius: 28px;

    --transition:
        .35s cubic-bezier(.2,.8,.2,1);

}


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background: var(--sand-light);

    color: var(--text);

    font-family:
        "DM Sans",
        sans-serif;

    line-height: 1.6;

    overflow-x: hidden;

}


body.no-scroll {

    overflow: hidden;

}


img {

    display: block;

    max-width: 100%;

}


button,
input {

    font: inherit;

}


button {

    cursor: pointer;

}


a {

    color: inherit;

    text-decoration: none;

}


.container {

    width:
        min(
            1240px,
            calc(100% - 48px)
        );

    margin: 0 auto;

}


.section {

    padding:
        130px 0;

}


/* =========================================================
   LOADER
========================================================= */

.page-loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: var(--sand-light);

    transition:
        opacity .5s ease,
        visibility .5s ease;

}


.page-loader.hidden {

    opacity: 0;

    visibility: hidden;

}


.loader-logo {

    width: 190px;

    padding: 15px;

    border-radius: 20px;

    background: white;

}


.loader-logo img {

    width: 100%;

}


.loader-line {

    width: 120px;

    height: 3px;

    margin-top: 28px;

    overflow: hidden;

    border-radius: 10px;

    background: rgba(24,53,114,.1);

}


.loader-line span {

    display: block;

    width: 50%;

    height: 100%;

    background: var(--yellow);

    animation:
        loading 1s infinite ease-in-out;

}


@keyframes loading {

    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(250%);
    }

}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {

    background: var(--blue-dark);

    color: white;

}


.top-bar-inner {

    min-height: 36px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    font-size: 10px;

}


.top-message {

    display: flex;

    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.8);

    font-weight: 600;

}


.pulse-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--yellow);

    box-shadow:
        0 0 0 5px rgba(245,197,28,.08);

}


.top-links {

    display: flex;

    align-items: center;

    gap: 12px;

    color: rgba(255,255,255,.6);

}


.top-links a {

    color: white;

}


.top-separator {

    width: 1px;

    height: 12px;

    background: rgba(255,255,255,.2);

}


/* =========================================================
   HEADER
========================================================= */

.header {

    position: fixed;

    top: 36px;

    left: 0;

    width: 100%;

    z-index: 5000;

    transition:
        top .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}


.header.scrolled {

    top: 0;

    background:
        rgba(250,246,238,.94);

    backdrop-filter: blur(20px);

    box-shadow:
        0 12px 40px rgba(16,38,83,.08);

}


.header-inner {

    min-height: 88px;

    display: flex;

    align-items: center;

    gap: 28px;

}


.brand {

    flex-shrink: 0;

}


.brand-logo {

    width: 155px;

    height: auto;

}


.main-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-left: auto;

}


.main-nav a {

    position: relative;

    color: var(--blue);

    font-size: 12px;

    font-weight: 700;

}


.main-nav a::after {

    position: absolute;

    content: "";

    left: 0;

    right: 0;

    bottom: -7px;

    height: 2px;

    border-radius: 5px;

    background: var(--yellow);

    transform:
        scaleX(0);

    transform-origin: center;

    transition:
        transform var(--transition);

}


.main-nav a:hover::after {

    transform:
        scaleX(1);

}


.header-cta {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 46px;

    padding:
        0 17px;

    border-radius: 100px;

    background: var(--blue);

    color: white;

    font-size: 11px;

    font-weight: 800;

    transition:
        transform var(--transition),
        background var(--transition);

}


.header-cta:hover {

    transform:
        translateY(-2px);

    background:
        var(--blue-dark);

}


.header-cta-icon {

    color: var(--yellow);

}


.menu-button {

    display: none;

    width: 46px;

    height: 46px;

    border: 0;

    border-radius: 13px;

    background: var(--blue);

}


.menu-button span {

    display: block;

    width: 19px;

    height: 2px;

    margin: 4px auto;

    border-radius: 10px;

    background: white;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    min-height: 850px;

    padding:
        170px 0 120px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 75% 20%,
            rgba(245,197,28,.16),
            transparent 25%
        ),

        var(--sand-light);

}


.hero-background-shape {

    position: absolute;

    width: 700px;

    height: 700px;

    right: -250px;

    top: 100px;

    border-radius: 50%;

    background:
        rgba(245,197,28,.11);

}


.hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(500px,.95fr);

    align-items: center;

    gap: 90px;

}


.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .18em;

}


.eyebrow-line {

    width: 25px;

    height: 1px;

    background: var(--yellow-dark);

}


.hero h1 {

    margin-top: 25px;

    max-width: 720px;

    color: var(--blue-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(58px,6.5vw,92px);

    line-height: .98;

    letter-spacing: -.055em;

    font-weight: 800;

}


.hero h1 span {

    display: block;

    color: var(--blue);

}


.hero-description {

    max-width: 590px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.85;

}


.hero-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 35px;

}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    min-height: 57px;

    padding:
        0 22px;

    border-radius: 15px;

    font-size: 12px;

    font-weight: 800;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition);

}


.btn:hover {

    transform:
        translateY(-3px);

}


.btn-primary {

    background: var(--blue);

    color: white;

    box-shadow:
        0 18px 35px rgba(24,53,114,.2);

}


.btn-primary strong {

    color: var(--yellow);

}


.btn-outline {

    border: 1px solid var(--border);

    background:
        rgba(255,255,255,.5);

    color: var(--blue);

}


.btn-outline:hover {

    background: white;

}


.hero-trust {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 50px;

}


.hero-trust-item {

    display: flex;

    flex-direction: column;

}


.hero-trust-item strong {

    color: var(--blue);

    font-family: "Manrope";

    font-size: 18px;

    line-height: 1.1;

}


.hero-trust-item span {

    margin-top: 4px;

    color: var(--muted);

    font-size: 9px;

}


.hero-trust-divider {

    width: 1px;

    height: 38px;

    background:
        rgba(24,53,114,.14);

}


.hero-visual {

    position: relative;

}


.hero-image-wrap {

    position: relative;

    min-height: 580px;

}


.hero-image-frame {

    position: absolute;

    z-index: 2;

    inset:
        0 35px 0 0;

    overflow: hidden;

    border-radius: 40px;

    box-shadow: var(--shadow);

}


.hero-image-frame::after {

    position: absolute;

    content: "";

    inset: 0;

    background:
        linear-gradient(
            145deg,
            transparent 45%,
            rgba(16,38,83,.15)
        );

}


.hero-image-frame img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.hero-image-accent {

    position: absolute;

    z-index: 1;

    right: 0;

    bottom: -35px;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background: var(--yellow);

}


.hero-floating-card {

    position: absolute;

    z-index: 4;

    left: -35px;

    bottom: 50px;

    min-width: 235px;

    padding:
        18px 20px;

    border-radius: 18px;

    background: white;

    box-shadow: var(--shadow);

}


.floating-status {

    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .08em;

}


.floating-status span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--green);

}


.floating-card-title {

    margin-top: 9px;

    color: var(--blue);

    font-family: "Manrope";

    font-size: 16px;

    font-weight: 800;

}


.floating-card-subtitle {

    margin-top: 2px;

    color: var(--muted);

    font-size: 10px;

}


.hero-badge {

    position: absolute;

    z-index: 4;

    right: 0;

    top: 45px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 15px;

    border-radius: 15px;

    background: var(--blue);

    color: rgb(246, 246, 248);

    box-shadow: var(--shadow-soft);

}


.badge-icon {

    display: flex !important;

    align-items: center;

    justify-content: center;

    width: 37px;

    height: 37px;

    border-radius: 11px;

    background: var(--yellow);

    color: var(--blue);

    font-size: 25px !important;
    font-weight: 900;
    padding: 0;
    margin: 0;
    line-height: 1;
    box-sizing: border-box;
}   


.hero-badge strong,
.hero-badge span {

    display: block;

}


.hero-badge strong {

    font-size: 11px;

}


.hero-badge span {

    color: rgba(255,255,255,.55);

    font-size: 9px;

}


.hero-bottom-wave {

    position: absolute;

    right: 0;

    bottom: -1px;

    left: 0;

    height: 55px;

    background: var(--cream);

    clip-path:
        ellipse(70% 100% at 50% 100%);

}


/* =========================================================
   QUICK ACCESS
========================================================= */

.quick-access {

    position: relative;

    z-index: 10;

    margin-top: -5px;

    background: var(--cream);

}


.quick-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 1px;

    overflow: hidden;

    border-radius: 25px;

    background:
        rgba(24,53,114,.08);

    box-shadow: var(--shadow-soft);

}


.quick-card {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 100px;

    padding: 18px 20px;

    background: white;

    transition:
        background var(--transition);

}



.quick-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 43px;

    height: 43px;

    border-radius: 13px;

    background: var(--sand);

    color: var(--blue);

    font-size: 14px;

    font-weight: 800;

}


.quick-card span {

    display: block;

    color: var(--muted);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .1em;

}


.quick-card strong {

    display: block;

    margin-top: 3px;

    color: var(--blue);

    font-size: 11px;

}


.quick-card b {

    margin-left: auto;

    color: var(--blue);

    font-size: 16px;

}


.quick-whatsapp .quick-icon {

    background:
        rgba(37,211,102,.12);

    color: #20ad55;

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-kicker {

    display: inline-block;

    color: var(--blue-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .18em;

}


.section-heading h2,
.contact-header h2,
.faq-intro h2 {

    margin-top: 15px;

    color: var(--blue-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(38px,4.3vw,61px);

    line-height: 1.24;

    letter-spacing: -.045em;

}


.section-heading h2 span,
.contact-header h2 span,
.faq-intro h2 span {

    display: block;

    color: var(--blue);

}


.split-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 70px;

    margin-bottom: 70px;

}


.heading-copy {

    max-width: 400px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.9;

}


.centered-heading {

    max-width: 760px;

    margin:
        0 auto 65px;

    text-align: center;

}


.centered-heading p {

    max-width: 560px;

    margin:
        20px auto 0;

    color: var(--muted);

    font-size: 14px;

}


/* =========================================================
   ABOUT
========================================================= */

.about-section {

    background: var(--cream);

}


.about-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: center;

}


.about-photo {

    position: relative;

    min-height: 610px;

    overflow: hidden;

    border-radius: 35px;

}


.about-photo img {

    width: 100%;

    height: 610px;

    object-fit: cover;

}


.photo-label {

    position: absolute;

    right: 20px;

    bottom: 20px;

    left: 20px;

    padding:
        18px 20px;

    border-radius: 18px;

    background:
        rgba(16,38,83,.9);

    backdrop-filter:
        blur(10px);

    color: white;

}


.photo-label span,
.photo-label strong {

    display: block;

}


.photo-label span {

    color: var(--yellow);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .15em;

}


.photo-label strong {

    margin-top: 5px;

    font-size: 12px;

}


.about-content {

    padding-right: 30px;

}


.mini-number {

    color:
        rgba(24,53,114,.25);

    font-family: "Manrope";

    font-size: 12px;

    font-weight: 900;

}


.about-content h3 {

    max-width: 570px;

    margin-top: 18px;

    color: var(--blue-dark);

    font-family: "Manrope";

    font-size: 35px;

    line-height: 1.13;

    letter-spacing: -.035em;

}


.about-content > p {

    margin-top: 22px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.9;

}


.about-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 35px;

}


.about-feature {

    display: flex;

    gap: 11px;

}


.feature-check {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 26px;

    height: 26px;

    border-radius: 50%;

    background:
        rgba(245,197,28,.35);

    color: var(--blue);

    font-size: 11px;

    font-weight: 900;

}


.about-feature strong {

    display: block;

    color: var(--blue);

    font-size: 11px;

}


.about-feature p {

    margin-top: 2px;

    color: var(--muted);

    font-size: 9px;

}


.text-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 35px;

    color: var(--blue);

    font-size: 11px;

    font-weight: 900;

}


.text-button span {

    transition:
        transform var(--transition);

}


.text-button:hover span {

    transform:
        translateX(6px);

}


/* =========================================================
   NUMBERS
========================================================= */

.numbers-section {

    padding:
        60px 0;

    background: var(--blue);

}


.numbers-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

}


.number-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 20px;

    text-align: center;

    border-right:
        1px solid rgba(255,255,255,.1);

}


.number-item:last-child {

    border-right: 0;

}


.number-item strong {

    color: var(--yellow);

    font-family: "Manrope";

    font-size: 43px;

    line-height: 1;

}


.number-item span {

    margin-top: 7px;

    color:
        rgba(255,255,255,.55);

    font-size: 10px;

}


/* =========================================================
   SERVICES
========================================================= */

.services-section {

    background: var(--sand-light);

}


.services-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

}


.service-card {

    position: relative;

    min-height: 340px;

    padding: 28px;

    overflow: hidden;

    border: 1px solid var(--border);

    border-radius: 25px;

    background: white;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);

}


.service-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(245,197,28,.7);

    box-shadow:
        var(--shadow-soft);

}


.service-featured {

    background: var(--blue);

    color: white;

}


.service-number {

    color:
        rgba(24,53,114,.3);

    font-size: 10px;

    font-weight: 900;

}


.service-featured .service-number {

    color:
        rgba(255,255,255,.35);

}


.service-symbol {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 53px;

    height: 53px;

    margin-top: 45px;

    border-radius: 16px;

    background: var(--yellow);

    color: var(--blue);

    font-size: 18px;

    font-weight: 900;

}


.service-card h3 {

    margin-top: 27px;

    color: var(--blue-dark);

    font-family: "Manrope";

    font-size: 21px;

}


.service-featured h3 {

    color: white;

}


.service-card p {

    max-width: 330px;

    margin-top: 10px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.8;

}


.service-featured p {

    color:
        rgba(255,255,255,.65);

}


.service-card a {

    position: absolute;

    left: 28px;

    bottom: 25px;

    color: var(--blue);

    font-size: 10px;

    font-weight: 900;

}


.service-featured a {

    color: var(--yellow);

}


/* =========================================================
   SPECIALTIES
========================================================= */

.specialties-section {

    background: var(--sand);

}


.specialty-carousel {

    display: flex;

    align-items: center;

    gap: 16px;

}


.carousel-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 50px;

    height: 50px;

    border: 1px solid var(--border);

    border-radius: 50%;

    background: rgba(255,255,255,.7);

    color: var(--blue);

    font-size: 18px;

    transition:
        transform var(--transition),
        background var(--transition);

}


.carousel-arrow:hover {

    transform:
        scale(1.06);

    background: white;

}


.specialty-track {

    flex: 1;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 16px;

}


.specialty-card {

    min-height: 340px;

    padding: 24px;

    border: 1px solid rgba(24,53,114,.08);

    border-radius: 25px;

    background:
        rgba(255,255,255,.65);

    cursor: pointer;

    transition:
        transform var(--transition),
        background var(--transition),
        box-shadow var(--transition);

}


.specialty-card:hover,
.specialty-card.active {

    transform:
        translateY(-6px);

    background: white;

    box-shadow:
        var(--shadow-soft);

}


.specialty-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.specialty-card-top span {

    color:
        rgba(24,53,114,.35);

    font-size: 10px;

    font-weight: 900;

}


.specialty-card-top i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    border-radius: 13px;

    background: var(--yellow);

    color: var(--blue);

    font-style: normal;

    font-size: 13px;

    font-weight: 900;

}


.specialty-card-body {

    margin-top: 55px;

}


.specialty-card-body h3 {

    color: var(--blue-dark);

    font-family: "Manrope";

    font-size: 19px;

}


.specialty-card-body p {

    margin-top: 10px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.8;

}


.specialty-card-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 55px;

    padding-top: 15px;

    border-top:
        1px solid var(--border);

}


.specialty-card-bottom span {

    color: var(--blue);

    font-size: 9px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .08em;

}


.specialty-card-bottom b {

    color: var(--blue);

}


.carousel-controls {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 25px;

}


.carousel-dots {

    display: flex;

    align-items: center;

    gap: 6px;

}


.carousel-dot {

    width: 7px;

    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background:
        rgba(24,53,114,.22);

    transition:
        width var(--transition),
        background var(--transition);

}


.carousel-dot.active {

    width: 25px;

    background: var(--blue);

}


.carousel-counter {

    color: var(--muted);

    font-size: 10px;

}


.carousel-counter strong {

    color: var(--blue);

}


/* =========================================================
   EMERGENCY
========================================================= */

.emergency-section {

    padding: 40px 0;

    background: var(--yellow);

}


.emergency-container {

    display: grid;

    grid-template-columns:
        100px 1fr auto;

    align-items: center;

    gap: 28px;

}


.emergency-icon {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 85px;

    height: 85px;

    border-radius: 25px;

    background: var(--blue);

    color: var(--yellow);

}


.emergency-icon span {

    font-family: "Manrope";

    font-size: 29px;

    font-weight: 900;

    line-height: 1;

}


.emergency-icon small {

    margin-top: 4px;

    font-size: 8px;

    font-weight: 900;

}


.emergency-content > span {

    color: var(--blue);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .14em;

}


.emergency-content h2 {

    margin-top: 5px;

    color: var(--blue-dark);

    font-family: "Manrope";

    font-size: 28px;

    line-height: 1.1;

}


.emergency-content p {

    margin-top: 3px;

    color:
        rgba(24,53,114,.65);

    font-size: 11px;

}


.emergency-button {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding:
        16px 20px;

    border-radius: 14px;

    background: var(--blue);

    color: white;

    font-size: 11px;

    font-weight: 900;

}


.emergency-button span {

    color: var(--yellow);

}


/* =========================================================
   STRUCTURE
========================================================= */

.structure-section {

    background: var(--cream);

}


.structure-layout {

    display: grid;

    grid-template-columns:
        1.35fr .65fr;

    gap: 20px;

}


.structure-main-photo {

    position: relative;

    min-height: 600px;

    overflow: hidden;

    border-radius: 30px;

    cursor: zoom-in;

}


.structure-main-photo img {

    width: 100%;

    height: 600px;

    object-fit: cover;

    transition:
        transform .7s ease;

}


.structure-main-photo:hover img {

    transform:
        scale(1.04);

}


.structure-photo-overlay {

    position: absolute;

    right: 20px;

    bottom: 20px;

    left: 20px;

    display: flex !important;
    
    justify-content: flex-start !important;

    align-items: center !important;

    justify-content: space-between;

    gap: 20px;

    padding: 20px;

    border-radius: 18px;

    background:
        rgba(16,38,83,.88);

    color: white;

}


.structure-photo-overlay span,
.structure-photo-overlay strong {

    display: block;

}


.structure-photo-overlay span {

    color: var(--yellow);

    font-size: 15px;

    font-weight: 900;

    letter-spacing: .12em;

}


.structure-photo-overlay strong {


    
    margin-top: 0px !important;

    font-family: "Manrope";

    font-size: 14px;

    position: absolute !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    white-space: nowrap !important;

}



.structure-side {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.structure-feature {

    flex: 1;

    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 14px;

    align-content: center;

    padding: 25px;

    border-radius: 23px;

    background: var(--sand);

    transition:
        transform var(--transition),
        background var(--transition);

}


.structure-feature:hover {

    transform:
        translateX(5px);

    background: var(--yellow);

}


.structure-feature-number {

    color:
        rgba(24,53,114,.35);

    font-size: 10px;

    font-weight: 900;

}


.structure-feature h3 {

    color: var(--blue-dark);

    font-family: "Manrope";

    font-size: 17px;

}


.structure-feature p {

    margin-top: 5px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.7;

}


.gallery-grid {

    display: grid;

    grid-template-columns:
        1.2fr .8fr .8fr;

    gap: 18px;

    margin-top: 18px;

}


.gallery-item {

    position: relative;

    height: 300px;

    overflow: hidden;

    border-radius: 24px;

    cursor: zoom-in;

}


.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .7s ease;

}


.gallery-item:hover img {

    transform:
        scale(1.06);

}


.gallery-item > span {

    position: absolute;

    left: 18px;

    bottom: 18px;

    padding:
        8px 12px;

    border-radius: 10px;

    background:
        rgba(16,38,83,.8);

    color: white;

    font-size: 9px;

    font-weight: 800;

}


.gallery-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 30px;

    border-radius: 24px;

    background: var(--sand);

}


.gallery-info h3 {

    margin-top: 13px;

    color: var(--blue-dark);

    font-family: "Manrope";

    font-size: 24px;

    line-height: 1.15;

}


.gallery-info p {

    margin-top: 12px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.8;

}


.gallery-info a {

    margin-top: 20px;

    color: var(--blue);

    font-size: 10px;

    font-weight: 900;

}


/* =========================================================
   PROCESS
========================================================= */

.process-section {

    padding:
        120px 0;

    background: var(--blue-dark);

    color: white;

}


.light-heading h2 {

    color: white;

}


.light-heading h2 span {

    color: var(--yellow);

}


.light-heading p {

    color:
        rgba(255,255,255,.55);

}


.process-grid {

    display: grid;

    grid-template-columns:
        1fr 70px 1fr 70px 1fr;

    align-items: center;

}


.process-step {

    text-align: center;


}


.process-number {

    color:
        rgba(255,255,255,.25);

    font-size: 10px;

    font-weight: 900;

}


.process-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 70px;

    height: 70px;

    margin:
        18px auto 22px;

    border-radius: 22px;

    background: var(--yellow);

    color: var(--blue);

    font-size: 20px;

    font-weight: 900;

}


.process-step h3 {

    font-family: "Manrope";

    font-size: 17px;

}


.process-step p {

    max-width: 210px;

    margin:
        8px auto 0;

    color:
        rgba(255,255,255,.5);

    font-size: 10px;

    line-height: 1.7;

}


.process-line {

    height: 1px;

    background:
        rgba(255,255,255,.15);

}


/* =========================================================
   TEAM
========================================================= */

.team-section {

    background: var(--sand);

}


.team-grid {

    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 100px;

    align-items: center;

}


.team-brand {

    position: relative;

    min-height: 450px;

}


.team-logo-card {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 390px;

    padding: 45px;

    border-radius: 35px;

    background: white;

    box-shadow: var(--shadow);

}


.team-logo-card img {

    width: 100%;

    max-width: 300px;

}


.team-floating {

    position: absolute;

    right: -25px;

    bottom: 20px;

    width: 230px;

    padding:
        18px 20px;

    border-radius: 18px;

    background: var(--blue);

    color: white;

    box-shadow: var(--shadow);

}


.team-floating span,
.team-floating strong,
.team-floating small {

    display: block;

}


.team-floating span {

    color: var(--yellow);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .12em;

}


.team-floating strong {

    margin-top: 6px;

    font-size: 14px;

}


.team-floating small {

    color:
        rgba(255,255,255,.55);

    font-size: 9px;

}


.team-content h2 {

    max-width: 650px;

    margin-top: 15px;

    color: var(--blue-dark);

    font-family: "Manrope";

    font-size:
        clamp(40px,4vw,58px);

    line-height: 1.05;

    letter-spacing: -.045em;

}


.team-content h2 span {

    display: block;

    color: var(--blue);

}


.team-content > p {

    max-width: 590px;

    margin-top: 25px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.9;

}


.team-points {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

    margin-top: 40px;

}


.team-points > div {

    padding-top: 17px;

    border-top:
        1px solid var(--border);

}


.team-points span {

    color:
        rgba(24,53,114,.3);

    font-size: 9px;

    font-weight: 900;

}


.team-points strong {

    display: block;

    margin-top: 12px;

    color: var(--blue);

    font-size: 10px;

}


.team-points p {

    margin-top: 5px;

    color: var(--muted);

    font-size: 9px;

}


/* =========================================================
   WARNING
========================================================= */

.warning-section {

    background: var(--cream);

}


.warning-box {

    display: grid;

    grid-template-columns:
        80px 1.2fr 1fr auto;

    align-items: center;

    gap: 30px;

    padding:
        40px;

    border-radius: 30px;

    background:
        #fff8dc;

    border:
        1px solid rgba(245,197,28,.4);

}


.warning-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 70px;

    height: 70px;

    border-radius: 22px;

    background: var(--yellow);

    color: var(--blue);

    font-family: "Manrope";

    font-size: 28px;

    font-weight: 900;

}


.warning-content > span {

    color: var(--blue);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .14em;

}


.warning-content h2 {

    margin-top: 6px;

    color: var(--blue-dark);

    font-family: "Manrope";

    font-size: 24px;

    line-height: 1.15;

}


.warning-content p {

    margin-top: 5px;

    color: var(--muted);

    font-size: 10px;

}


.warning-list {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

}


.warning-list div {

    color: var(--blue);

    font-size: 9px;

    font-weight: 700;

}


.warning-list span {

    color: var(--yellow-dark);

}


.warning-button {

    display: inline-flex;

    padding:
        14px 17px;

    border-radius: 12px;

    background: var(--blue);

    color: white;

    font-size: 9px;

    font-weight: 900;

    white-space: nowrap;

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    background: var(--sand-light);

}


.faq-grid {

    display: grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap: 110px;

}


.faq-intro p {

    max-width: 400px;

    margin-top: 25px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.9;

}


.faq-list {

    border-top:
        1px solid var(--border);

}


.faq-item {

    border-bottom:
        1px solid var(--border);

}


.faq-question {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        23px 0;

    border: 0;

    background: transparent;

    color: var(--blue-dark);

    text-align: left;

    font-size: 13px;

    font-weight: 800;

}


.faq-question i {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background: var(--sand);

    color: var(--blue);

    font-style: normal;

    transition:
        transform var(--transition),
        background var(--transition);

}


.faq-item.active
.faq-question i {

    transform:
        rotate(45deg);

    background: var(--yellow);

}


.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition:
        max-height .4s ease;

}


.faq-item.active
.faq-answer {

    max-height: 180px;

}


.faq-answer p {

    padding:
        0 45px 24px 0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.8;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {

    background: var(--cream);

}


.contact-header {

    margin-bottom: 55px;

}


.contact-layout {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 50px;

}


.contact-information {

    display: flex;

    flex-direction: column;

    gap: 1px;

}


.contact-row {

    display: grid;

    grid-template-columns:
        50px 1fr auto;

    align-items: center;

    gap: 15px;

    padding:
        19px;

    border-bottom:
        1px solid var(--border);

    transition:
        background var(--transition);

}


.contact-row:first-child {

    border-top:
        1px solid var(--border);

}


.contact-row:hover {

    background: var(--sand-light);

}


.contact-row-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 43px;

    height: 43px;

    border-radius: 13px;

    background: var(--sand);

    color: var(--blue);

    font-size: 13px;

    font-weight: 900;

}


.contact-row span,
.contact-row strong {

    display: block;

}


.contact-row span {

    color: var(--muted);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .08em;

}


.contact-row strong {

    margin-top: 4px;

    color: var(--blue);

    font-size: 12px;

}


.contact-row b {

    color: var(--blue);

}


.map-panel {

    overflow: hidden;

    border-radius: 30px;

    background: var(--blue-dark);

}


.map-panel-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        20px 24px;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.5);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .13em;

}


.map-panel-top i {

    color: var(--yellow);

    font-style: normal;

}


.map-visual {

    position: relative;

    min-height: 350px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(245,197,28,.12),
            transparent 40%
        );

}


.map-grid-lines {

    position: absolute;

    inset: 0;

    opacity: .25;

    background-image:
        linear-gradient(
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.07) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    transform:
        rotate(-7deg)
        scale(1.3);

}


.map-pin-large {

    position: absolute;

    top: 50%;

    left: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 82px;

    height: 82px;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    background: var(--yellow);

    color: var(--blue);

    box-shadow:
        0 0 0 15px rgba(245,197,28,.08),
        0 0 0 35px rgba(245,197,28,.04);

    font-size: 25px;

}


.map-location-card {

    position: absolute;

    right: 25px;

    bottom: 25px;

    width: 190px;

    padding:
        15px;

    border-radius: 16px;

    background:
        rgba(255,255,255,.96);

    box-shadow: var(--shadow);

}


.map-location-card img {

    width: 90px;

    padding: 4px;

    background: white;

}


.map-location-card strong {

    display: block;

    margin-top: 8px;

    color: var(--blue);

    font-size: 12px;

}


.map-location-card span {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 9px;

    line-height: 1.5;

}


.map-open-button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        18px 22px;

    border-top:
        1px solid rgba(255,255,255,.08);

    color: white;

    font-size: 10px;

    font-weight: 800;

}


.map-open-button span {

    color: var(--yellow);

}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    position: relative;

    overflow: hidden;

    padding:
        110px 0;

    background: var(--blue);

    color: white;

}


.final-cta-glow {

    position: absolute;

    width: 600px;

    height: 600px;

    top: -300px;

    right: -100px;

    border-radius: 50%;

    background:
        rgba(245,197,28,.08);

}


.final-cta-inner {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


.final-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 130px;

    height: 80px;

    padding: 10px;

    border-radius: 16px;

    background: white;

}


.final-logo img {

    max-width: 100%;

    max-height: 100%;

}


.final-cta .section-kicker {

    margin-top: 35px;

    color: var(--yellow);

}


.final-cta h2 {

    max-width: 800px;

    margin-top: 15px;

    color: white;

    font-family: "Manrope";

    font-size:
        clamp(40px,5vw,65px);

    line-height: 1;

    letter-spacing: -.045em;

}


.final-cta h2 span {

    color: var(--yellow);

}


.final-cta p {

    max-width: 500px;

    margin-top: 20px;

    color:
        rgba(255,255,255,.55);

    font-size: 13px;

}


.final-buttons {

    display: flex;

    gap: 12px;

    margin-top: 30px;

}


.btn-yellow {

    background: var(--yellow);

    color: var(--blue);

}


.btn-light {

    background: rgba(255,255,255,.1);

    color: white;

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    background:
        #091b3c;

    color: white;

}


.footer-main {

    display: grid;

    grid-template-columns:
        1.6fr
        1fr
        1fr
        1.2fr;

    gap: 70px;

    padding:
        70px 0 55px;

}


.footer-logo-wrap {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 160px;

    min-height: 75px;

    padding: 8px 12px;

    border-radius: 13px;

    background: white;

}


.footer-logo {

    width: 100%;

}


.footer-brand p {

    max-width: 290px;

    margin-top: 18px;

    color:
        rgba(255,255,255,.48);

    font-size: 10px;

    line-height: 1.8;

}


.footer-socials {

    display: flex;

    gap: 8px;

    margin-top: 20px;

}


.footer-socials a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 35px;

    height: 35px;

    border:
        1px solid rgba(255,255,255,.1);

    border-radius: 10px;

    color: var(--yellow);

    font-size: 13px;

}


.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

}


.footer-column h3 {

    margin-bottom: 7px;

    color: var(--yellow);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .12em;

}


.footer-column a,
.footer-column span {

    color:
        rgba(255,255,255,.52);

    font-size: 10px;

}


.footer-column a:hover {

    color: white;

}


.footer-contact a {

    color: white;

    font-size: 14px;

    font-weight: 800;

}


.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        20px 0;

    border-top:
        1px solid rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.32);

    font-size: 8px;

}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 4500;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 62px;

    height: 62px;

    border-radius: 50%;

    background: var(--green);

    color: white;

    box-shadow:
        0 15px 35px rgba(0,0,0,.2);

}


.floating-whatsapp strong {

    font-size: 25px;

}


.floating-whatsapp small {

    position: absolute;

    right: 75px;

    padding:
        7px 10px;

    border-radius: 8px;

    background: var(--blue);

    color: white;

    font-size: 8px;

    font-weight: 800;

    opacity: 0;

    transform:
        translateX(8px);

    transition:
        opacity var(--transition),
        transform var(--transition);

}


.floating-whatsapp:hover small {

    opacity: 1;

    transform:
        translateX(0);

}


.whatsapp-pulse {

    position: absolute;

    inset: -6px;

    border:
        1px solid rgba(37,211,102,.5);

    border-radius: 50%;

    animation:
        whatsappPulse 2s infinite;

}


@keyframes whatsappPulse {

    0%,
    100% {

        transform: scale(1);

        opacity: .7;

    }

    50% {

        transform: scale(1.12);

        opacity: 0;

    }

}


/* =========================================================
   BACK TOP
========================================================= */

.back-top {

    position: fixed;

    right: 25px;

    bottom: 100px;

    z-index: 4400;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border: 1px solid var(--border);

    border-radius: 50%;

    background: white;

    color: var(--blue);

    box-shadow: var(--shadow-soft);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px);

    transition:
        opacity var(--transition),
        transform var(--transition),
        visibility var(--transition);

}


.back-top.visible {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


/* =========================================================
   LIGHTBOX
========================================================= */

.lightbox {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.lightbox.active {

    opacity: 1;

    visibility: visible;

}


.lightbox-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(5,17,39,.9);

    backdrop-filter:
        blur(10px);

}


.lightbox-content {

    position: relative;

    z-index: 2;

    max-width: 1000px;

    width: 100%;

}


.lightbox-content img {

    width: 100%;

    max-height: 78vh;

    object-fit: contain;

    border-radius: 15px;

}


.lightbox-close {

    position: absolute;

    z-index: 4;

    top: -50px;

    right: 0;

    width: 40px;

    height: 40px;

    border: 0;

    border-radius: 50%;

    background: white;

    color: var(--blue);

    font-size: 22px;

}


.lightbox-caption {

    margin-top: 15px;

    color: white;

    text-align: center;

    font-size: 11px;

}


/* =========================================================
   SPECIALTY MODAL
========================================================= */

.specialty-modal {

    position: fixed;

    inset: 0;

    z-index: 11000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.specialty-modal.active {

    opacity: 1;

    visibility: visible;

}


.modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(9,27,60,.78);

    backdrop-filter:
        blur(10px);

}


.specialty-modal-box {

    position: relative;

    z-index: 2;

    width:
        min(
            520px,
            100%
        );

    padding:
        45px;

    border-radius: 28px;

    background: var(--cream);

    box-shadow:
        0 40px 100px rgba(0,0,0,.3);

    transform:
        translateY(20px)
        scale(.97);

    transition:
        transform var(--transition);

}


.specialty-modal.active
.specialty-modal-box {

    transform:
        translateY(0)
        scale(1);

}


.modal-close {

    position: absolute;

    top: 17px;

    right: 17px;

    width: 38px;

    height: 38px;

    border: 0;

    border-radius: 50%;

    background: var(--sand);

    color: var(--blue);

    font-size: 22px;

}


.modal-number {

    color:
        rgba(24,53,114,.3);

    font-size: 11px;

    font-weight: 900;

}


.modal-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 65px;

    height: 65px;

    margin-top: 20px;

    border-radius: 18px;

    background: var(--yellow);

    color: var(--blue);

    font-size: 20px;

    font-weight: 900;

}


.specialty-modal-box h3 {

    margin-top: 25px;

    color: var(--blue-dark);

    font-family: "Manrope";

    font-size: 30px;

}


.specialty-modal-box p {

    margin-top: 12px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.9;

}


.modal-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 30px;

}


.modal-navigation {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border: 0;

    border-radius: 12px;

    background: var(--sand);

    color: var(--blue);

}


.modal-next {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 15px;

    height: 42px;

    border: 0;

    border-radius: 12px;

    background: var(--blue);

    color: white;

    font-size: 10px;

    font-weight: 800;

}


.modal-next span {

    color: var(--yellow);

    font-size: 15px;

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

[data-reveal] {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


[data-reveal].revealed {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1150px) {

    .main-nav {

        gap: 15px;

    }


    .main-nav a {

        font-size: 10px;

    }


    .hero-grid {

        gap: 45px;

    }


    .specialty-track {

        grid-template-columns:
            repeat(3,1fr);

    }


    .warning-box {

        grid-template-columns:
            70px 1fr 1fr;

    }


    .warning-button {

        grid-column:
            2 / -1;

        width: fit-content;

    }

}


@media (max-width: 1000px) {

    .header {

        top: 36px;

    }


    .header-inner {

        min-height: 78px;

    }


    .main-nav,
    .header-cta {

        display: none;

    }


    .menu-button {

        display: block;

        margin-left: auto;

    }


    .main-nav.mobile-open {

        position: absolute;

        top: 75px;

        left: 0;

        right: 0;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 3px;

        padding: 12px;

        border-radius: 20px;

        background:
            rgba(250,246,238,.98);

        box-shadow:
            0 20px 50px rgba(16,38,83,.16);

    }


    .main-nav.mobile-open a {

        padding:
            13px;

        border-radius: 12px;

    }


    .main-nav.mobile-open a:hover {

        background: var(--sand);

    }


    .hero-grid {

        grid-template-columns:
            1fr;

    }


    .hero-content {

        max-width: 750px;

    }


    .hero-visual {

        max-width: 700px;

    }


    .quick-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .about-grid,
    .team-grid,
    .faq-grid,
    .contact-layout {

        grid-template-columns:
            1fr;

    }


    .about-content {

        padding-right: 0;

    }


    .about-photo {

        max-width: 700px;

    }


    .team-grid {

        gap: 55px;

    }


    .structure-layout {

        grid-template-columns:
            1fr;

    }


    .structure-main-photo {

        min-height: 500px;

    }


    .structure-main-photo img {

        height: 500px;

    }


    .structure-side {

        display: grid;

        grid-template-columns:
            1fr 1fr;

    }


    .gallery-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .gallery-large {

        grid-column:
            1 / -1;

    }


    .gallery-info {

        min-height: 300px;

    }


    .footer-main {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 760px) {


 .faq-intro h2 span {
        display: block !important;
        margin-top: 12px !important;
    }

    .container {

        width:
            min(
                100% - 30px,
                1240px
            );

    }


    .top-links {

        display: none;

    }


    .top-bar-inner {

        justify-content: center;

    }


    .section {

        padding:
            90px 0;

    }


    .hero {

        min-height: auto;

        padding:
            135px 0 100px;

    }


    .hero h1 {

        font-size:
            clamp(47px,14vw,67px);

    }


    .hero-description {

        font-size: 14px;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .btn {

        width: 100%;

    }


    .hero-trust {

        flex-wrap: wrap;

        gap: 15px;

    }


    .hero-trust-divider {

        display: none;

    }


    .hero-image-wrap {

        min-height: 430px;

    }


    .hero-image-frame {

        inset:
            0;

        border-radius: 27px;

    }


    .hero-image-accent {

        display: none;

    }


    .hero-floating-card {

        left: 15px;

        bottom: 20px;

    }


    .hero-badge {

        right: 15px;

        top: 15px;

    }


    .quick-grid {

        grid-template-columns:
            1fr;

    }


    .quick-card {

        min-height: 82px;

    }


    .split-heading {

        display: block;

        margin-bottom: 45px;

    }


    .heading-copy {

        margin-top: 20px;

    }


    .about-photo,
    .about-photo img {

        min-height: 400px;

        height: 400px;

    }


    .about-features {

        grid-template-columns:
            1fr;

    }


    .numbers-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .number-item:nth-child(2) {

        border-right: 0;

    }


    .number-item:nth-child(-n+2) {

        border-bottom:
            1px solid rgba(255,255,255,.1);

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .service-card {

        min-height: 310px;

    }


    .specialty-carousel {

        gap: 8px;

    }


    .carousel-arrow {

        width: 40px;

        height: 40px;

    }


    .specialty-track {

        grid-template-columns:
            1fr;

    }


    .specialty-card {

        display: none;

        min-height: 320px;

    }


    .specialty-card.active {

        display: block;

    }


    .emergency-container {

        grid-template-columns:
            70px 1fr;

    }



    .emergency-icon {

        width: 65px;

        height: 65px;

    }


    .emergency-button {

        grid-column:
            2;

        justify-self: start;

    }

.emergency-signs-intro span{
    background: #193b7a !important;
    color: #ffffff !important;
    padding: 15px 30px !important;
    border-radius: 15px !important;
    display: inline-block !important;
    font-size: 20px !important;
    position: relative !important;

    border: 5px solid;
    box-shadow: 0 0 8px !important;
    animation: led-pisca 1.2s infinite alternate !important;
}


.emergency-sign {
    border-radius: 14px !important;
    overflow: hidden !important;
}

    .structure-main-photo,
    .structure-main-photo img {

        min-height: 400px;

        height: 400px;

    }


    .structure-side {

        grid-template-columns:
            1fr;

    }


    .gallery-grid {

        grid-template-columns:
            1fr;

    }


    .gallery-large {

        grid-column:
            auto;

    }


    .process-grid {

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;

    }

    .process-line {

        width: 1px !important;

        height: 30px !important;

        background: rgba(255,255,255,0.35);

        display: none;

    }

    .process-step{
        margin: 0 !important;
        width: 100% !important;
        padding-top: 0 !important;
        transform: translateY(-1px);
    }

    .process-number{
        margin: 12px 0 12px 0!important;
        text-align: center !important;
        color: rgba(255,255,255,0.5) !important;
    }


    .team-brand {

        min-height: 380px;

    }


    .team-logo-card {

        min-height: 320px;

    }


    .team-floating {

        right: 10px;

    }


    .team-points {

        grid-template-columns:
            1fr;

    }


    .warning-box {

        grid-template-columns:
            1fr;

        padding: 28px;

    }


    .warning-list {

        grid-template-columns:
            1fr;

    }


    .warning-button {

        grid-column: auto;

        width: fit-content;

    }


    .faq-grid {

        gap: 50px;

    }


    .contact-layout {

        gap: 35px;

    }


    .footer-main {

        grid-template-columns:
            1fr;

        gap: 40px;

    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

    }


    .floating-whatsapp {

        right: 15px;

        bottom: 15px;

        width: 56px;

        height: 56px;

    }


    .floating-whatsapp small {

        display: none;

    }


    .back-top {

        right: 15px;

        bottom: 83px;

    }

}


@media (max-width: 450px) {

    .brand-logo {

        width: 125px;

    }


    .hero h1 {

        font-size: 45px;

    }


    .hero-image-wrap {

        min-height: 360px;

    }


    .hero-floating-card {

        min-width: 205px;

    }


    .hero-badge {

        transform:
            scale(.88);

        transform-origin:
            top right;

    }


    .section-heading h2,
    .contact-header h2,
    .faq-intro h2 {

        font-size: 39px;

    }


    .numbers-grid {

        grid-template-columns:
            1fr;

    }


    .number-item {

        border-right: 0 !important;

        border-bottom:
            1px solid rgba(255,255,255,.1);

    }


    .number-item:last-child {

        border-bottom: 0;

    }


    .warning-icon {

        width: 60px;

        height: 60px;

    }


    .final-buttons {

        flex-direction: column;

        width: 100%;

    }


    .final-buttons .btn {

        width: 100%;

    }


    .specialty-modal-box {

        padding: 32px 25px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }

}


/* =========================================================
   NOVO LAYOUT DA LOCALIZAÇÃO
   FOTO NO QUADRADO AZUL + CARD BEGE AO LADO
========================================================= */


.map-composition {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        190px;

    align-items: center;

    gap: 22px;

}


/* =========================================================
   PAINEL AZUL
========================================================= */

.map-composition .map-panel {

    width: 100%;

    overflow: hidden;

    border-radius: 30px;

    background: var(--blue-dark);

}


/* =========================================================
   ÁREA DA FOTO
========================================================= */

.map-composition .map-visual {

    position: relative;

    min-height: 350px;

    padding: 24px;

    overflow: hidden;

    background: var(--blue-dark);

}


/* FOTO DO GOOGLE MAPS */

.map-google-photo {

    display: block;

    width: 100%;

    height: 100%;

    min-height: 302px;

    object-fit: cover;

    border-radius: 20px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);

}


/* =========================================================
   REMOVE OS ELEMENTOS ANTIGOS DO MAPA
========================================================= */

.map-composition .map-grid-lines,
.map-composition .map-pin-large {

    display: none;

}


/* =========================================================
   CARD DE ENDEREÇO
========================================================= */

.map-composition .map-location-card {

    position: relative;

    right: auto;

    bottom: auto;

    width: 100%;

    padding: 20px;

    border-radius: 20px;

    background: var(--sand);

    box-shadow:
        0 20px 45px rgba(16,38,83,.12);

}


/* LOGO DO CARD */

.map-composition .map-location-card img {

    width: 80px;

    padding: 6px;

    border-radius: 10px;

    background: white;

}


/* NOME */

.map-composition .map-location-card strong {

    display: block;

    margin-top: 15px;

    color: var(--blue);

    font-size: 15px;

    font-weight: 900;

}


/* ENDEREÇO */

.map-composition .map-location-card span {

    display: block;

    margin-top: 7px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.6;

}


/* LINK DO CARD */

.map-composition .map-location-card a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 18px;

    color: var(--blue);

    font-size: 10px;

    font-weight: 900;

}


.map-composition .map-location-card a b {

    color: var(--blue);

    transition:
        transform var(--transition);

}


.map-composition .map-location-card a:hover b {

    transform:
        translate(3px,-3px);

}


/* =========================================================
   BOTÃO DO MAPA
========================================================= */

.map-composition .map-open-button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        18px 22px;

    border-top:
        1px solid rgba(255,255,255,.08);

    color: white;

    font-size: 10px;

    font-weight: 800;

}


.map-composition .map-open-button span {

    color: var(--yellow);

}


/* =========================================================
   TABLET / CELULAR
========================================================= */

@media (max-width: 760px) {

    .map-composition {

        grid-template-columns:
            1fr;

        gap: 20px;

    }


    .map-composition .map-visual {

        min-height: 300px;

        padding: 18px;

    }


    .map-google-photo {

        min-height: 264px;

        border-radius: 17px;

    }


    .map-composition .map-location-card {

        display: grid;

        grid-template-columns:
            auto 1fr;

        column-gap: 15px;

        align-items: center;

    }


    .map-composition .map-location-card img {

        grid-row:
            1 / 4;

    }


    .map-composition .map-location-card strong {

        margin-top: 0;

    }


    .map-composition .map-location-card span {

        margin-top: 3px;

    }


    .map-composition .map-location-card a {

        margin-top: 8px;

    }

}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media (max-width: 450px) {

    .map-composition .map-visual {

        padding: 14px;

    }


    .map-google-photo {

        min-height: 230px;

        border-radius: 15px;

    }


    .map-composition .map-location-card {

        padding: 17px;

    }

}

/* =========================================================
   CEPAVET - EFEITO DAS FOTOS
========================================================= */

.cepavet-foto {
    cursor: zoom-in;
    transition: transform 0.8s ease, box-shadow 0.8s ease, filter 0.8s ease;
}

.cepavet-foto-visivel {
    transform: translateY(-10px) scale(1.025);
    filter: brightness(1.04) saturate(1.05);

    box-shadow:
        0 0 20px rgba(246, 197, 46, 0.45),
        0 0 50px rgba(246, 197, 46, 0.25),
        0 20px 50px rgba(16, 38, 83, 0.22);

    animation: cepavet-flutuar 3s ease-in-out infinite;
}

@keyframes cepavet-flutuar {
    0% {
        transform: translateY(-8px) scale(1.02);
    }

    50% {
        transform: translateY(-14px) scale(1.03);
    }

    100% {
        transform: translateY(-8px) scale(1.02);
    }
}


/* =========================================================
   LIGHTBOX
========================================================= */

.image-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(8, 16, 35, 0.85);

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.35s ease, visibility 0.35s ease;
}

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


/* Foto ampliada */

.image-lightbox-content {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    max-width: 92vw;
    max-height: 88vh;

    transform: translateY(30px) scale(0.85);

    opacity: 0;

    transition: transform 0.45s ease, opacity 0.35s ease;
}

.image-lightbox.active .image-lightbox-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.image-lightbox-photo {
    display: block;

    max-width: 90vw;
    max-height: 82vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 0 20px rgba(246, 197, 46, 0.45),
        0 0 60px rgba(246, 197, 46, 0.30),
        0 30px 70px rgba(0, 0, 0, 0.50);

    animation: cepavet-brilho 2.5s ease-in-out infinite alternate;
}


/* Brilho */

@keyframes cepavet-brilho {
    from {
        box-shadow:
            0 0 20px rgba(246, 197, 46, 0.40),
            0 0 50px rgba(246, 197, 46, 0.20),
            0 30px 70px rgba(0, 0, 0, 0.45);
    }

    to {
        box-shadow:
            0 0 35px rgba(246, 197, 46, 0.70),
            0 0 90px rgba(246, 197, 46, 0.35),
            0 35px 80px rgba(0, 0, 0, 0.55);
    }
}


/* =========================================================
   BOTÃO X
========================================================= */

.image-lightbox-close {
    position: absolute;

    top: -18px;
    right: -18px;

    z-index: 10;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: #173875;

    color: #ffffff;

    font-size: 26px;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.image-lightbox-close:hover {
    transform: rotate(90deg) scale(1.08);
    background: #f6c52e;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    .cepavet-foto-visivel {
        transform: translateY(-6px) scale(1.015);
    }

    .image-lightbox {
        padding: 18px;
    }

    .image-lightbox-content {
        max-width: 94vw;
        max-height: 84vh;
    }

    .image-lightbox-photo {
        max-width: 94vw;
        max-height: 76vh;
        border-radius: 16px;
    }

    .image-lightbox-close {
        top: -12px;
        right: -6px;

        width: 42px;
        height: 42px;

        font-size: 23px;
    }
}


/* =========================================================
   REDUZIR ANIMAÇÕES SE NECESSÁRIO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cepavet-foto,
    .cepavet-foto-visivel,
    .image-lightbox,
    .image-lightbox-content,
    .image-lightbox-photo {
        animation: none;
        transition: none;
    }
}

/* =====================================================
   MELHORIAS CEPAVET
   SEM ALTERAÇÃO DO MAPA
===================================================== */


/* =====================================================
   INDICADOR 24H
===================================================== */

.emergency-icon-live {
    position: relative;
}

.emergency-live-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #193b7a;
    right: 5px;
    top: 5px;
    animation: cepavetPulse 1.8s infinite;
}

@keyframes cepavetPulse {

    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(25, 59, 122, .35);
    }

    70% {
        transform: scale(1.15);
        opacity: .9;
        box-shadow: 0 0 0 9px rgba(25, 59, 122, 0);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(25, 59, 122, 0);
    }

}


/* =====================================================
   SINAIS DE ATENÇÃO
===================================================== */

.emergency-signs-wrap {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid rgba(16, 38, 83, .18);
}

.emergency-signs-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 20px;
}

.emergency-signs-intro span {
     background: #193b7a !important;
    color: #ffffff !important;
    padding: 15px 30px !important;
    border-radius: 15px !important;
    display: inline-block !important;
    font-size: 20px !important;
    position: relative !important;

    border: 5px solid;
    box-shadow: 0 0 8px !important;
    animation: led-pisca 1.2s infinite alternate !important;
}

.emergency-signs-intro strong {
    color: #102653;
    font-size: 15px;
}

.emergency-signs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.emergency-sign {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    padding: 15px 17px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(16, 38, 83, .1);
    transition: transform .25s ease,
                border-color .25s ease,
                box-shadow .25s ease;
    border-radius: 14px !important;
    overflow: hidden !important;

}

.emergency-sign:hover {
    transform: translateY(-3px);
    border-color: rgba(25, 59, 122, .3);
    box-shadow: 0 10px 25px rgba(16, 38, 83, .08);
}

.emergency-sign span {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    color: #193b7a;
    letter-spacing: .08em;
}

.emergency-sign strong {
    color: #102653;
    font-size: 13px;
    line-height: 1.4;
}


/* =====================================================
   PACIENTES
===================================================== */

.patients-section {
    background: #eee2cf;
}

.patients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 45px;
}

.patient-card {
    position: relative;
    min-height: 310px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(16, 38, 83, .08);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.patient-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(16, 38, 83, .12);
}

.patient-card-number {
    position: absolute;
    top: 24px;
    right: 25px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    color: rgba(25, 59, 122, .3);
}

.patient-card-icon {
    font-size: 42px;
    margin-bottom: auto;
}

.patient-card div:nth-child(3) {
    position: relative;
    z-index: 2;
}

.patient-card div:nth-child(3) > span {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    color: #193b7a;
}

.patient-card h3 {
    margin: 0 0 10px;
    color: #102653;
    font-size: 22px;
}

.patient-card p {
    margin: 0;
    color: #5c6780;
    font-size: 14px;
    line-height: 1.65;
}

.patient-card > b {
    position: absolute;
    right: 25px;
    bottom: 25px;
    color: #193b7a;
    font-size: 20px;
}


/* =====================================================
   STATUS — COMO FUNCIONA
===================================================== */

.process-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 18px;
    padding: 6px 10px;
    border: 1px solid rgba(245, 197, 28, .45);
    color: #f5c51c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}


/* =====================================================
   EFEITO VISUAL NAS FOTOS
===================================================== */

.visual-photo {
    overflow: hidden;
}

.visual-photo img {
    transition:
        transform .8s cubic-bezier(.2,.65,.25,1),
        filter .6s ease;
    will-change: transform;
}

.visual-photo.image-in-view img {
    transform: scale(1.025);
}

.visual-photo:hover img {
    transform: scale(1.045);
}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 900px) {

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

    .patients-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .emergency-signs-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .emergency-signs {
        grid-template-columns: 1fr;
    }

    .emergency-sign {
        min-height: auto;
    }

    .patient-card {
        min-height: 270px;
        padding: 25px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .emergency-live-dot,
    .visual-photo img,
    .patient-card,
    .emergency-sign {
        animation: none !important;
        transition: none !important;
    }

}

.process-grid {
    position: relative;
}

.process-grid::before,
.process-grid::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* =========================================================
   AJUSTE FINAL — PROCESSO
========================================================= */

.process-grid {
    align-items: stretch;
}

.process-step {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.process-step p {
    min-height: 60px;
}

.process-status {
    margin-top: auto;
    align-self: center;
}

/* Centraliza os traços na altura dos ícones */
.process-line {
    align-self: center;
    position: relative;
    top: 35px;
}


/* =========================================================
   ANIMAÇÕES CEPAVET
========================================================= */

/* ELEMENTOS ENTRANDO NA TELA */

[data-reveal] {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.22,1,.36,1);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}


/* ATRASO ENTRE OS ELEMENTOS */

[data-reveal]:nth-child(2) {
    transition-delay: .12s;
}

[data-reveal]:nth-child(3) {
    transition-delay: .24s;
}

[data-reveal]:nth-child(4) {
    transition-delay: .36s;
}


/* CARDS LEVITANDO */

.patient-card,
.service-card,
.specialty-card,
.quick-card {
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.patient-card:hover,
.service-card:hover,
.specialty-card:hover,
.quick-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(16,38,83,.14);
}


/* IMAGENS */

.gallery-item,
.about-photo,
.structure-main-photo {
    overflow: hidden;
}

.gallery-item img,
.about-photo img,
.structure-main-photo img {
    transition: transform .7s cubic-bezier(.22,1,.36,1);
}

.gallery-item:hover img,
.about-photo:hover img,
.structure-main-photo:hover img {
    transform: scale(1.07);
}


/* ÍCONES DA PARTE "COMO FUNCIONA" */

.process-icon {
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.process-step:hover .process-icon {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 30px rgba(245,197,28,.25);
}


/* BOTÕES */

.cta-button,
.emergency-button,
.hero-button {
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.cta-button:hover,
.emergency-button:hover,
.hero-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(16,38,83,.18);
}


/* WHATSAPP */

.floating-whatsapp {
    animation: whatsappFloat 3s ease-in-out infinite;
}

@keyframes whatsappFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}


/* PONTO 24H */

.emergency-live-dot {
    animation: pulse24 1.8s infinite;
}

@keyframes pulse24 {

    0% {
        box-shadow: 0 0 0 0 rgba(245,197,28,.7);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(245,197,28,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245,197,28,0);
    }
}


/* ACESSIBILIDADE */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}



/* =========================================================
   CEPAVET — PREMIUM MOTION SYSTEM
   Animações sofisticadas e discretas
========================================================= */


/* =========================================================
   01. HERO — ENTRADA CINEMATOGRÁFICA
========================================================= */

.hero-content {
    animation:
        cepavetHeroLeft 1s cubic-bezier(.16,1,.3,1) both;
}

.hero-visual {
    animation:
        cepavetHeroRight 1.15s .12s cubic-bezier(.16,1,.3,1) both;
}

.hero-eyebrow {
    animation:
        cepavetFadeUp .8s .15s both;
}

.hero-content h1 {
    animation:
        cepavetFadeUp .9s .25s both;
}

.hero-description {
    animation:
        cepavetFadeUp .9s .35s both;
}

.hero-buttons {
    animation:
        cepavetFadeUp .9s .45s both;
}

.hero-trust {
    animation:
        cepavetFadeUp .9s .55s both;
}


@keyframes cepavetHeroLeft {

    from {
        opacity: 0;
        transform: translateX(-45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes cepavetHeroRight {

    from {
        opacity: 0;
        transform:
            translateX(45px)
            scale(.96);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }
}


@keyframes cepavetFadeUp {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   02. FOTO PRINCIPAL — MOVIMENTO VIVO
========================================================= */

.hero-image-frame {
    overflow: hidden;
}

.hero-image-frame img {
    transform: scale(1.025);

    transition:
        transform 1.4s cubic-bezier(.16,1,.3,1),
        filter 1s ease;
}

.hero-image-frame:hover img {
    transform: scale(1.08);
}


/* brilho passando pela imagem */

.hero-image-frame {
    position: relative;
}

.hero-image-frame::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.16),
            transparent
        );

    transform: skewX(-18deg);

    transition:
        left 1s ease;

    pointer-events: none;
}

.hero-image-frame:hover::after {
    left: 140%;
}


/* =========================================================
   03. CARD "ABERTO AGORA"
========================================================= */

.hero-floating-card {
    animation:
        cepavetFloatCard 4s ease-in-out infinite;
}

@keyframes cepavetFloatCard {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* =========================================================
   04. STATUS — ABERTO AGORA
========================================================= */

.floating-status span {
    animation:
        cepavetStatusPulse 2s infinite;
}

@keyframes cepavetStatusPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(80,200,120,.55);
    }

    70% {
        box-shadow:
            0 0 0 8px rgba(80,200,120,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(80,200,120,0);
    }
}


/* =========================================================
   05. BOTÕES — MICROINTERAÇÃO PREMIUM
========================================================= */

.btn {
    position: relative;

    overflow: hidden;

    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        box-shadow .3s ease;
}

.btn:hover {
    transform: translateY(-4px);
}

.btn strong {
    display: inline-block;

    transition:
        transform .35s cubic-bezier(.16,1,.3,1);
}

.btn:hover strong {
    transform:
        translate(4px,-4px);
}


/* =========================================================
   06. QUICK ACCESS — PROFUNDIDADE
========================================================= */

.quick-card {
    position: relative;

    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        box-shadow .4s ease;
}

.quick-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            rgba(245,197,28,.08),
            transparent 45%
        );

    opacity: 0;

    transition:
        opacity .4s ease;

    pointer-events: none;
}

.quick-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 18px 45px rgba(16,38,83,.12);
}

.quick-card:hover::before {
    opacity: 1;
}


/* =========================================================
   07. CARDS DE SERVIÇOS / ESPECIALIDADES
========================================================= */

.service-card,
.specialty-card,
.patient-card {
    position: relative;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease;
}

.service-card:hover,
.specialty-card:hover,
.patient-card:hover {
    transform:
        translateY(-9px);
}


/* =========================================================
   08. ESPECIALIDADES — ÍCONE
========================================================= */

.specialty-card i {
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        background .3s ease;
}

.specialty-card:hover i {
    transform:
        rotate(-8deg)
        scale(1.08);
}


/* seta */

.specialty-card-bottom b {
    display: inline-block;

    transition:
        transform .35s cubic-bezier(.16,1,.3,1);
}

.specialty-card:hover
.specialty-card-bottom b {
    transform:
        translate(5px,-5px);
}


/* =========================================================
   09. PROCESSO — OS TRÊS PASSOS
========================================================= */

.process-step {
    transition:
        transform .4s cubic-bezier(.16,1,.3,1);
}

.process-step:hover {
    transform:
        translateY(-5px);
}

.process-icon {
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease;
}

.process-step:hover .process-icon {
    transform:
        translateY(-8px)
        scale(1.06);

    box-shadow:
        0 15px 35px rgba(245,197,28,.22);
}


/* número */

.process-number {
    transition:
        color .3s ease,
        letter-spacing .3s ease;
}

.process-step:hover .process-number {
    color:
        rgba(255,255,255,.65);

    letter-spacing:
        .18em;
}


/* =========================================================
   10. TRAÇOS ENTRE OS PASSOS
========================================================= */

.process-line {
    position: relative;

    overflow: hidden;
}

.process-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--yellow),
            transparent
        );

    transition:
        left .9s ease;
}

.process-grid:hover
.process-line::after {
    left: 100%;
}


/* =========================================================
   11. GALERIA — EFEITO PREMIUM
========================================================= */

.gallery-item {
    overflow: hidden;
}

.gallery-item img {
    transition:
        transform .9s cubic-bezier(.16,1,.3,1),
        filter .6s ease;
}

.gallery-item:hover img {
    transform:
        scale(1.08);

    filter:
        saturate(1.08);
}


/* brilho na galeria */

.gallery-item::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            transparent 35%
        );

    opacity: 0;

    transition:
        opacity .5s ease;

    pointer-events: none;
}

.gallery-item:hover::after {
    opacity: 1;
}


/* =========================================================
   12. IMAGENS INTERNAS
========================================================= */

.about-photo,
.structure-main-photo {
    overflow: hidden;
}

.about-photo img,
.structure-main-photo img {
    transition:
        transform 1s cubic-bezier(.16,1,.3,1);
}

.about-photo:hover img,
.structure-main-photo:hover img {
    transform:
        scale(1.045);
}


/* =========================================================
   13. EMERGÊNCIA 24H
========================================================= */

.emergency-icon-live {
    transition:
        transform .4s ease;
}

.emergency-section:hover
.emergency-icon-live {
    transform:
        scale(1.04);
}


/* =========================================================
   14. WHATSAPP FLUTUANTE
========================================================= */

.floating-whatsapp {
    animation:
        cepavetWhatsApp 3.5s ease-in-out infinite;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

@keyframes cepavetWhatsApp {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.floating-whatsapp:hover {
    animation: none;

    transform:
        scale(1.08);

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);
}


/* =========================================================
   15. REVEAL — MAIS CINEMATOGRÁFICO
========================================================= */

[data-reveal] {
    opacity: 0;

    transform:
        translateY(35px)
        scale(.985);

    transition:
        opacity .85s cubic-bezier(.16,1,.3,1),
        transform .85s cubic-bezier(.16,1,.3,1);
}

[data-reveal].revealed {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   16. CASCATA AUTOMÁTICA
========================================================= */

.quick-card:nth-child(1),
.patient-card:nth-child(1),
.process-step:nth-child(1) {
    transition-delay: .05s;
}

.quick-card:nth-child(2),
.patient-card:nth-child(2),
.process-step:nth-child(3) {
    transition-delay: .12s;
}

.quick-card:nth-child(3),
.patient-card:nth-child(3),
.process-step:nth-child(5) {
    transition-delay: .19s;
}

.quick-card:nth-child(4) {
    transition-delay: .26s;
}


/* =========================================================
   17. FINAL CTA — PEQUENO EFEITO DE LUZ
========================================================= */

.final-cta {
    position: relative;
}

.final-cta::before {
    content: "";

    position: absolute;

    top: -100%;
    left: -20%;

    width: 140%;
    height: 300%;

    background:
        radial-gradient(
            circle,
            rgba(245,197,28,.07),
            transparent 42%
        );

    animation:
        cepavetGlow 8s ease-in-out infinite;

    pointer-events: none;
}

@keyframes cepavetGlow {

    0%,
    100% {
        transform:
            translateX(-4%);
    }

    50% {
        transform:
            translateX(4%);
    }
}


/* =========================================================
   18. HEADER — EFEITO DE PROFUNDIDADE
========================================================= */

.site-header {
    transition:
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}


/* =========================================================
   19. REDUÇÃO DE MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   CEPAVET — CARDS FLUTUANTES PREMIUM
========================================================= */

/* Todos os cards ficam com profundidade */
.quick-card,
.patient-card,
.service-card,
.specialty-card,
.team-logo-card,
.team-floating,
.gallery-info,
.map-panel,
.contact-card,
.faq-item,
.process-step {
    position: relative;

    transform: translateY(0);

    box-shadow:
        0 12px 25px rgba(16, 38, 83, .08);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease;
}


/* =========================================================
   FLUTUAÇÃO
========================================================= */

.quick-card,
.patient-card,
.service-card,
.specialty-card,
.gallery-info,
.contact-card,
.faq-item {
    animation:
        cepavetCardFloat 5s ease-in-out infinite;
}


/* pequenas diferenças para não parecer tudo sincronizado */

.quick-card:nth-child(2),
.patient-card:nth-child(2),
.service-card:nth-child(2),
.specialty-card:nth-child(2) {
    animation-delay: -1.2s;
}

.quick-card:nth-child(3),
.patient-card:nth-child(3),
.service-card:nth-child(3),
.specialty-card:nth-child(3) {
    animation-delay: -2.4s;
}

.quick-card:nth-child(4),
.service-card:nth-child(4),
.specialty-card:nth-child(4) {
    animation-delay: -3.6s;
}


/* =========================================================
   MOVIMENTO PRINCIPAL
========================================================= */

@keyframes cepavetCardFloat {

    0% {
        transform:
            translateY(0)
            rotate(0deg);

        box-shadow:
            0 12px 25px rgba(16, 38, 83, .08);
    }

    25% {
        transform:
            translateY(-5px)
            rotate(-.25deg);

        box-shadow:
            0 18px 32px rgba(16, 38, 83, .12);
    }

    50% {
        transform:
            translateY(-8px)
            rotate(0deg);

        box-shadow:
            0 23px 38px rgba(16, 38, 83, .14);
    }

    75% {
        transform:
            translateY(-4px)
            rotate(.25deg);

        box-shadow:
            0 17px 30px rgba(16, 38, 83, .11);
    }

    100% {
        transform:
            translateY(0)
            rotate(0deg);

        box-shadow:
            0 12px 25px rgba(16, 38, 83, .08);
    }
}


/* =========================================================
   SOMBRA EXTRA — SENSAÇÃO DE CARD SUSPENSO
========================================================= */

.quick-card::after,
.patient-card::after,
.service-card::after,
.specialty-card::after,
.gallery-info::after,
.contact-card::after {
    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    bottom: -14px;

    height: 18px;

    border-radius: 50%;

    background:
        rgba(16, 38, 83, .16);

    filter:
        blur(12px);

    opacity: .55;

    z-index: -1;

    transition:
        transform .5s ease,
        opacity .5s ease;
}


/* sombra acompanha a flutuação */

@keyframes cepavetShadow {

    0%,
    100% {
        transform:
            scaleX(1);

        opacity: .5;
    }

    50% {
        transform:
            scaleX(.78);

        opacity: .25;
    }
}

.quick-card::after,
.patient-card::after,
.service-card::after,
.specialty-card::after,
.gallery-info::after,
.contact-card::after {
    animation:
        cepavetShadow 5s ease-in-out infinite;
}


/* =========================================================
   HOVER — QUANDO O MOUSE ENTRA
========================================================= */

.quick-card:hover,
.patient-card:hover,
.service-card:hover,
.specialty-card:hover,
.gallery-info:hover,
.contact-card:hover,
.faq-item:hover {
    animation-play-state: paused;

    transform:
        translateY(-12px)
        scale(1.015);

    box-shadow:
        0 25px 50px rgba(16, 38, 83, .17);
}


/* sombra fica menor quando o card sobe */

.quick-card:hover::after,
.patient-card:hover::after,
.service-card:hover::after,
.specialty-card:hover::after,
.gallery-info:hover::after,
.contact-card:hover::after {
    transform:
        scaleX(.65);

    opacity: .25;
}


/* =========================================================
   ESPECIALIDADES — MAIS PROFUNDIDADE
========================================================= */

.specialty-card {
    transform-style: preserve-3d;
}

.specialty-card:hover {
    transform:
        translateY(-12px)
        scale(1.02);
}


/* =========================================================
   CARDS DO PROCESSO
========================================================= */

.process-step {
    animation:
        cepavetProcessFloat 5.5s ease-in-out infinite;
}

.process-step:nth-child(3) {
    animation-delay: -1.8s;
}

.process-step:nth-child(5) {
    animation-delay: -3.6s;
}

@keyframes cepavetProcessFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


/* =========================================================
   CARD DO HERO
========================================================= */

.hero-floating-card {
    animation:
        cepavetHeroCardFloat 4s ease-in-out infinite;

    box-shadow:
        0 18px 45px rgba(16, 38, 83, .18);
}

@keyframes cepavetHeroCardFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-9px)
            rotate(.3deg);
    }
}


/* =========================================================
   EFEITO DE PROFUNDIDADE NOS CARDS BRANCOS
========================================================= */

.quick-card,
.patient-card,
.service-card,
.specialty-card,
.gallery-info,
.contact-card {
    border:
        1px solid rgba(255,255,255,.5);
}


/* =========================================================
   REDUZIR MOVIMENTO SE O USUÁRIO PREFERIR
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .quick-card,
    .patient-card,
    .service-card,
    .specialty-card,
    .gallery-info,
    .contact-card,
    .faq-item,
    .process-step,
    .hero-floating-card {
        animation: none !important;
    }

    .quick-card::after,
    .patient-card::after,
    .service-card::after,
    .specialty-card::after,
    .gallery-info::after,
    .contact-card::after {
        animation: none !important;
    }
}


/* =========================================================
   CEPAVET — PREMIUM FLOATING CARDS
   Flutuação + profundidade + luz + sombra + cursor mágico
   ========================================================= */

:root {
    --cepavet-blue: #183572;
    --cepavet-blue-dark: #102653;
    --cepavet-yellow: #f5c51c;
    --cepavet-sand: #eee2cf;
}


/* =========================================================
   1. CAMADA DE ATMOSFERA DOS CARDS
   ========================================================= */

.quick-card,
.patient-card,
.service-card,
.specialty-card,
.team-logo-card,
.team-floating,
.gallery-info,
.map-panel,
.contact-card,
.faq-item,
.process-step,
.structure-card,
.info-card,
.stat-card,
.number-card {
    position: relative;
    isolation: isolate;
    transform: translateZ(0);
    will-change: transform, box-shadow;
}


/* =========================================================
   2. AURA LUMINOSA ATRÁS DOS CARDS
   ========================================================= */

.quick-card::before,
.patient-card::before,
.service-card::before,
.specialty-card::before,
.team-logo-card::before,
.team-floating::before,
.gallery-info::before,
.map-panel::before,
.contact-card::before,
.faq-item::before,
.process-step::before,
.structure-card::before,
.info-card::before,
.stat-card::before,
.number-card::before {

    content: "";
    position: absolute;

    inset: 8px -4px -10px -4px;

    z-index: -2;

    border-radius: inherit;

    background:
        radial-gradient(
            ellipse at 30% 25%,
            rgba(245, 197, 28, .18),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 75% 75%,
            rgba(24, 53, 114, .22),
            transparent 48%
        );

    filter: blur(16px);

    opacity: .55;

    transition:
        opacity .5s ease,
        transform .6s cubic-bezier(.22,1,.36,1),
        filter .5s ease;
}


/* =========================================================
   3. REFLEXO DE LUZ NO PRÓPRIO CARD
   ========================================================= */

.quick-card::after,
.patient-card::after,
.service-card::after,
.specialty-card::after,
.contact-card::after,
.faq-item::after,
.process-step::after,
.structure-card::after,
.info-card::after,
.stat-card::after,
.number-card::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    z-index: 5;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.10),
            transparent 25%,
            transparent 70%,
            rgba(245,197,28,.06)
        );

    opacity: .45;

    transition:
        opacity .45s ease,
        background .45s ease;
}


/* =========================================================
   4. FLUTUAÇÃO PREMIUM
   ========================================================= */

.quick-card,
.patient-card,
.service-card,
.specialty-card,
.team-logo-card,
.team-floating,
.gallery-info,
.contact-card,
.faq-item,
.process-step,
.structure-card,
.info-card,
.stat-card,
.number-card {

    animation:
        cepavetPremiumFloat
        6.5s
        cubic-bezier(.45,.05,.55,.95)
        infinite;
}


/* Ritmos diferentes = movimento natural */

.quick-card:nth-child(2n),
.patient-card:nth-child(2n),
.service-card:nth-child(2n),
.specialty-card:nth-child(2n),
.contact-card:nth-child(2n),
.faq-item:nth-child(2n) {
    animation-delay: -2.2s;
}

.quick-card:nth-child(3n),
.patient-card:nth-child(3n),
.service-card:nth-child(3n),
.specialty-card:nth-child(3n),
.contact-card:nth-child(3n),
.faq-item:nth-child(3n) {
    animation-delay: -4.1s;
}

.quick-card:nth-child(4n),
.service-card:nth-child(4n),
.specialty-card:nth-child(4n) {
    animation-delay: -1.1s;
}


/* =========================================================
   5. MOVIMENTO ORGÂNICO
   ========================================================= */

@keyframes cepavetPremiumFloat {

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }

    25% {
        transform:
            translate3d(0, -5px, 0)
            rotate(.18deg);
    }

    50% {
        transform:
            translate3d(0, -8px, 0)
            rotate(-.22deg);
    }

    75% {
        transform:
            translate3d(0, -3px, 0)
            rotate(.14deg);
    }

    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }
}


/* =========================================================
   6. SOMBRA DE CARD FLUTUANDO
   ========================================================= */

.quick-card,
.patient-card,
.service-card,
.specialty-card,
.team-logo-card,
.team-floating,
.gallery-info,
.contact-card,
.faq-item,
.process-step,
.structure-card,
.info-card,
.stat-card,
.number-card {

    box-shadow:
        0 12px 25px rgba(16, 38, 83, .10),
        0 24px 55px rgba(16, 38, 83, .08),
        0 2px 6px rgba(0, 0, 0, .04);

    transition:
        box-shadow .6s cubic-bezier(.22,1,.36,1),
        border-color .5s ease,
        background .5s ease;
}


/* =========================================================
   7. HOVER — CARD GANHA VIDA
   ========================================================= */

.quick-card:hover,
.patient-card:hover,
.service-card:hover,
.specialty-card:hover,
.team-logo-card:hover,
.team-floating:hover,
.gallery-info:hover,
.contact-card:hover,
.faq-item:hover,
.process-step:hover,
.structure-card:hover,
.info-card:hover,
.stat-card:hover,
.number-card:hover {

    animation-play-state: paused;

    transform:
        translate3d(0, -10px, 0)
        scale(1.018)
        rotateX(1deg)
        rotateY(-1deg);

    box-shadow:
        0 18px 35px rgba(16, 38, 83, .14),
        0 30px 70px rgba(16, 38, 83, .13),
        0 0 0 1px rgba(245, 197, 28, .08);

    z-index: 10;
}


/* =========================================================
   8. AURA AUMENTA NO HOVER
   ========================================================= */

.quick-card:hover::before,
.patient-card:hover::before,
.service-card:hover::before,
.specialty-card:hover::before,
.team-logo-card:hover::before,
.team-floating:hover::before,
.team-floating.active::before,
.gallery-info:hover::before,
.map-panel:hover::before,
.contact-card:hover::before,
.faq-item:hover::before,
.process-step:hover::before,
.structure-card:hover::before,
.info-card:hover::before,
.stat-card:hover::before,
.number-card:hover::before {

    opacity: .95;

    transform:
        scale(1.05)
        translateY(4px);

    filter: blur(20px);
}


.quick-card:hover::after,
.patient-card:hover::after,
.service-card:hover::after,
.specialty-card:hover::after,
.contact-card:hover::after,
.faq-item:hover::after,
.process-step:hover::after,
.structure-card:hover::after,
.info-card:hover::after,
.stat-card:hover::after,
.number-card:hover::after {

    opacity: .9;
}


/* =========================================================
   9. BORDA DE LUZ MUITO SUTIL
   ========================================================= */

.quick-card:hover,
.patient-card:hover,
.service-card:hover,
.specialty-card:hover,
.contact-card:hover,
.faq-item:hover,
.process-step:hover {

    border-color:
        rgba(245, 197, 28, .30);
}



/* =========================================================
   15. PEQUENA LINHA DE LUZ NO HOVER
   ========================================================= */

.quick-card,
.patient-card,
.service-card,
.specialty-card,
.contact-card,
.faq-item,
.process-step {

    overflow: hidden;
}

.quick-card > *,
.patient-card > *,
.service-card > *,
.specialty-card > *,
.contact-card > *,
.faq-item > *,
.process-step > * {

    position: relative;
    z-index: 2;
}


/* =========================================================
   16. REFLEXO PASSANDO PELO CARD
   ========================================================= */

.quick-card:hover::after,
.patient-card:hover::after,
.service-card:hover::after,
.specialty-card:hover::after,
.contact-card:hover::after,
.faq-item:hover::after,
.process-step:hover::after {

    background:
        linear-gradient(
            115deg,
            transparent 15%,
            rgba(255,255,255,.16) 32%,
            rgba(245,197,28,.08) 43%,
            transparent 58%
        );

    background-size: 250% 100%;

    animation:
        cepavetLightSweep
        1.1s
        ease
        both;
}


@keyframes cepavetLightSweep {

    from {
        background-position:
            120% 0;
    }

    to {
        background-position:
            -120% 0;
    }
}


/* =========================================================
   17. CARDS DE SERVIÇOS — MAIS PROFUNDIDADE
   ========================================================= */

.service-card,
.specialty-card {

    transform-style: preserve-3d;
    perspective: 1000px;
}


/* =========================================================
   18. PROCESSO — FLUTUAÇÃO MAIS DISCRETA
   ========================================================= */

.process-step {

    animation-duration: 7.2s;
}

.process-step:nth-child(2) {
    animation-delay: -2.8s;
}

.process-step:nth-child(3) {
    animation-delay: -4.8s;
}


/* =========================================================
   19. CARDS DE DESTAQUE
   ========================================================= */

.patient-card,
.quick-card {

    box-shadow:
        0 14px 28px rgba(16,38,83,.10),
        0 28px 60px rgba(16,38,83,.08);
}


/* =========================================================
   20. HOVER DE IMAGENS
   ========================================================= */

.gallery-item img,
.structure-main-photo img,
.about-photo img {

    transition:
        transform 1s cubic-bezier(.22,1,.36,1),
        filter .7s ease;
}

.gallery-item:hover img,
.structure-main-photo:hover img,
.about-photo:hover img {

    transform:
        scale(1.045);

    filter:
        saturate(1.05)
        contrast(1.02);
}


/* =========================================================
   21. MOBILE — MAIS LEVE
   ========================================================= */

@media (max-width: 768px) {

    .quick-card,
    .patient-card,
    .service-card,
    .specialty-card,
    .team-logo-card,
    .team-floating,
    .gallery-info,
    .contact-card,
    .faq-item,
    .process-step,
    .structure-card,
    .info-card,
    .stat-card,
    .number-card {

        animation-duration: 8s;

        box-shadow:
            0 10px 24px rgba(16,38,83,.10),
            0 18px 40px rgba(16,38,83,.07);
    }

    .quick-card:hover,
    .patient-card:hover,
    .service-card:hover,
    .specialty-card:hover,
    .team-logo-card:hover,
    .team-floating:hover,
    .gallery-info:hover,
    .contact-card:hover,
    .faq-item:hover,
    .process-step:hover,
    .structure-card:hover,
    .info-card:hover,
    .stat-card:hover,
    .number-card:hover {

        transform:
            translateY(-5px)
            scale(1.01);
    }

    .cepavet-cursor-glow,
    .cepavet-cursor-dot,
    .cepavet-cursor-trail {

        display: none;
    }
}


/* =========================================================
   22. ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .quick-card,
    .patient-card,
    .service-card,
    .specialty-card,
    .team-logo-card,
    .team-floating,
    .gallery-info,
    .contact-card,
    .faq-item,
    .process-step,
    .structure-card,
    .info-card,
    .stat-card,
    .number-card {

        animation: none !important;

        transition: none !important;
    }

    .cepavet-cursor-glow,
    .cepavet-cursor-dot,
    .cepavet-cursor-trail {

        display: none !important;
    }
}


/* =========================================================
   FAQ — REMOVER EFEITOS DE FLUTUAÇÃO
   ========================================================= */

.faq-section .faq-item {
    animation: none !important;

    transform: none !important;

    box-shadow: none !important;

    transition:
        background-color .25s ease,
        border-color .25s ease !important;
}


/* Remove a aura luminosa atrás dos cards */

.faq-section .faq-item::before {
    display: none !important;
}


/* Remove o reflexo luminoso */

.faq-section .faq-item::after {
    display: none !important;
}


/* Remove o efeito de levantar quando passa o mouse */

.faq-section .faq-item:hover {
    animation: none !important;

    transform: none !important;

    box-shadow: none !important;

    z-index: auto !important;
}


/* Mantém o FAQ com aparência limpa */

.faq-section .faq-item:hover::before,
.faq-section .faq-item:hover::after {
    display: none !important;
}


/* Remove qualquer efeito de perspectiva */

.faq-section .faq-item {
    transform-style: flat !important;
    perspective: none !important;
}


/* =========================================================
   CEPAVET — MOBILE PREMIUM
   Layout compacto, elegante e confortável
   ========================================================= */

@media (max-width: 760px) {

    /* ---------- BASE ---------- */

    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    .container {
        width: calc(100% - 28px);
        max-width: none;
    }

    .section {
        padding: 52px 0;
    }

    .section + .section {
        padding-top: 52px;
    }


    /* ---------- HEADER ---------- */

    .header-inner {
        min-height: 64px;
    }

    .brand-logo {
        width: 108px;
        max-width: 45vw;
    }

    .menu-button {
        width: 40px;
        height: 40px;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: auto;
        padding: 104px 0 48px;
    }

    .hero-grid {
        gap: 30px;
    }

    .hero-eyebrow {
        font-size: 8px;
        letter-spacing: .14em;
        line-height: 1.4;
    }

    .hero h1 {
        margin-top: 12px;
        font-size: clamp(35px, 10.5vw, 45px);
        line-height: .98;
        letter-spacing: -.035em;
    }

    .hero-description {
        max-width: 330px;
        margin-top: 17px;
        font-size: 13px;
        line-height: 1.65;
    }

    .hero-buttons {
        margin-top: 21px;
        gap: 9px;
    }

    .hero-buttons .btn {
        min-height: 45px;
        padding: 0 15px;
        border-radius: 11px;
        font-size: 10px;
    }

    .hero-trust {
        margin-top: 24px;
        gap: 12px;
    }

    .hero-trust-item strong {
        font-size: 14px;
    }

    .hero-trust-item span {
        font-size: 8px;
        line-height: 1.3;
    }

    .hero-trust-divider {
        display: none;
    }


    /* ---------- HERO IMAGE ---------- */

    .hero-image-wrap {
        min-height: 285px;
    }

    .hero-image-frame {
        inset: 0;
        border-radius: 22px;
    }

    .hero-image-accent {
        display: none;
    }

    .hero-floating-card {
        left: 10px;
        bottom: 10px;
        min-width: 158px;
        padding: 11px 12px;
        border-radius: 13px;
    }

    .floating-card-title {
        font-size: 12px;
    }

    .floating-card-subtitle {
        font-size: 9px;
    }

    .hero-badge {
        right: 9px;
        top: 9px;
        transform: scale(.72);
        transform-origin: top right;
    }


    /* ---------- TÍTULOS ---------- */

    .section-heading h2,
    .contact-header h2,
    .faq-intro h2 {
        font-size: clamp(30px, 8.5vw, 38px);
        line-height: 1.02;
        letter-spacing: -.025em;
    }

    .heading-copy {
        margin-top: 12px;
        font-size: 13px;
        line-height: 1.65;
    }


    /* ---------- QUICK ACCESS ---------- */

    .quick-grid {
        gap: 8px;
    }

    .quick-card {
        min-height: 64px;
        padding: 13px 14px;
        border-radius: 14px;
    }


    /* ---------- SOBRE ---------- */

    .about-photo,
    .about-photo img {
        min-height: 285px;
        height: 285px;
    }

    .about-features {
        gap: 8px;
    }

    .about-feature {
        padding: 14px;
        border-radius: 14px;
    }


    /* ---------- NÚMEROS ---------- */

    .numbers-grid {
        gap: 0;
    }

    .number-item {
        padding: 20px 10px;
    }

    .number-item strong {
        font-size: 28px;
    }

    .number-item span {
        font-size: 8px;
    }


    /* ---------- SERVIÇOS ---------- */

    .services-grid {
        gap: 9px;
    }

    .service-card {
        min-height: 215px;
        padding: 18px;
        border-radius: 17px;
    }

    .service-card h3 {
        font-size: 18px;
    }

    .service-card p {
        font-size: 12px;
        line-height: 1.6;
    }


    /* ---------- PACIENTES ---------- */

    .patients-grid {
        gap: 8px;
    }

    .patient-card {
        padding: 15px;
        border-radius: 15px;
    }

    .patient-card h3 {
        font-size: 16px;
    }

    .patient-card p {
        font-size: 12px;
        line-height: 1.55;
    }


    /* ---------- ESPECIALIDADES ---------- */

    .specialty-carousel {
        gap: 7px;
    }

    .carousel-arrow {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .specialty-card {
        min-height: 235px;
        padding: 18px;
        border-radius: 17px;
    }

    .specialty-card h3 {
        font-size: 18px;
    }

    .specialty-card p {
        font-size: 12px;
        line-height: 1.55;
    }


    /* ---------- EMERGÊNCIA ---------- */

    .emergency-container {
        grid-template-columns: 52px 1fr;
        gap: 11px;
    }

    .emergency-icon {
        width: 52px;
        height: 52px;
    }

    .emergency-content span {
        font-size: 8px;
    }

    .emergency-content h2 {
        font-size: 22px;
        line-height: 1.08;
    }

    .emergency-content p {
        margin-top: 7px;
        font-size: 12px;
        line-height: 1.5;
    }

    .emergency-button {
        grid-column: 2;
        min-height: 45px;
        padding: 0 14px;
        font-size: 9px;
    }

    .emergency-signs-wrap {
        margin-top: 20px;
    }


    /* ---------- ESTRUTURA ---------- */

    .structure-main-photo,
    .structure-main-photo img {
        min-height: 285px;
        height: 285px;
    }

    .structure-side {
        gap: 9px;
    }


    /* ---------- GALERIA ---------- */

    .gallery-grid {
        gap: 7px;
    }

    .gallery-item {
        border-radius: 13px;
    }

    .gallery-info {
        min-height: 180px;
        padding: 18px;
    }


    /* ---------- COMO FUNCIONA ---------- */

    .process-grid {
        gap: 14px;
    }

    .process-step {
        padding: 17px 15px;
        border-radius: 16px;
    }

    .process-step h3 {
        font-size: 17px;
    }

    .process-step p {
        min-height: 0;
        font-size: 12px;
        line-height: 1.55;
    }

    .process-status {
        margin-top: 12px;
    }


    /* ---------- EQUIPE ---------- */

    .team-brand {
        min-height: 285px;
    }

    .team-logo-card {
        min-height: 230px;
    }

    .team-floating {
        right: 8px;
    }

    .team-points {
        gap: 8px;
    }


    /* ---------- AVISO ---------- */

    .warning-box {
        padding: 19px;
        border-radius: 17px;
        gap: 15px;
    }

    .warning-icon {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
    }

    .warning-list {
        gap: 8px;
    }


    /* ---------- FAQ ----------
       Mantém simples, sem animação pesada */

    .faq-grid {
        gap: 25px;
    }

    .faq-item {
        border-radius: 14px;
    }

    .faq-question {
        padding: 15px;
        font-size: 12px;
        line-height: 1.4;
    }

    .faq-answer {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 12px;
        line-height: 1.6;
    }


    /* ---------- CONTATO ---------- */

    .contact-layout {
        gap: 20px;
    }

    .contact-card {
        padding: 17px;
        border-radius: 17px;
    }

    .contact-card p {
        font-size: 12px;
        line-height: 1.55;
    }


    /* ---------- BOTÕES FLUTUANTES ---------- */

    .floating-whatsapp {
        right: 12px;
        bottom: 12px;
        width: 52px;
        height: 52px;
    }

    .floating-whatsapp small {
        display: none;
    }

    .back-top {
        right: 12px;
        bottom: 76px;
        width: 38px;
        height: 38px;
    }


    /* ---------- FOOTER ---------- */

    .footer-main {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        gap: 12px;
    }
}


/* =========================================================
   CELULARES PEQUENOS
   ========================================================= */

@media (max-width: 450px) {

    .container {
        width: calc(100% - 24px);
    }

    .section {
        padding: 46px 0;
    }

    .section + .section {
        padding-top: 46px;
    }


    /* HERO */

    .hero {
        padding-top: 96px;
        padding-bottom: 42px;
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero-description {
        font-size: 12.5px;
    }

    .hero-image-wrap {
        min-height: 255px;
    }

    .hero-floating-card {
        min-width: 145px;
        padding: 10px;
    }

    .hero-badge {
        transform: scale(.64);
    }


    /* TÍTULOS */

    .section-heading h2,
    .contact-header h2,
    .faq-intro h2 {
        font-size: 31px;
    }


    /* CARDS */

    .service-card {
        min-height: 195px;
    }

    .specialty-card {
        min-height: 215px;
    }

    .about-photo,
    .about-photo img {
        min-height: 255px;
        height: 255px;
    }

    .structure-main-photo,
    .structure-main-photo img {
        min-height: 255px;
        height: 255px;
    }

    .team-brand {
        min-height: 255px;
    }

    .team-logo-card {
        min-height: 210px;
    }


    /* EMERGÊNCIA */

    .emergency-content h2 {
        font-size: 20px;
    }


    /* BOTÕES */

    .hero-buttons {
        gap: 8px;
    }

    .hero-buttons .btn {
        min-height: 44px;
    }
}


/* =========================================================
   CELULARES MUITO PEQUENOS
   ========================================================= */

@media (max-width: 360px) {

    .container {
        width: calc(100% - 20px);
    }

    .section {
        padding: 42px 0;
    }

    .hero {
        padding-top: 92px;
    }

    .hero h1 {
        font-size: 33px;
    }

    .hero-image-wrap {
        min-height: 225px;
    }

    .section-heading h2,
    .contact-header h2,
    .faq-intro h2 {
        font-size: 28px;
    }

    .service-card {
        min-height: 180px;
    }

    .specialty-card {
        min-height: 200px;
    }
}


/* =========================================================
   TOUCH — EVITA EFEITOS ESTRANHOS NO CELULAR
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .quick-card:hover,
    .service-card:hover,
    .patient-card:hover,
    .specialty-card:hover,
    .process-step:hover,
    .contact-card:hover,
    .structure-card:hover,
    .info-card:hover,
    .number-card:hover {
        transform: none;
    }

    .faq-item:hover {
        transform: none;
    }
}

/* DIMINUI SOMENTE A LOGO CEPAVET DA GALERIA */
.gallery-item[data-title="CEPAVET"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(1.05) !important;
}

/* =========================================================
   BOTÃO ÚNICO — SERVIÇOS
   ========================================================= */

.services-action {
    display: flex;
    justify-content: center;
    margin-top: 38px;
}

.services-main-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-width: 170px;
    height: 48px;
    padding: 0 24px;

    border-radius: 999px;

    background: #183572;
    color: #fff;

    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.services-main-button span {
    font-size: 17px;
    line-height: 1;
    transition: transform .3s ease;
}

.services-main-button:hover {
    background: #f5c51c;
    color: #183572;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(24, 53, 114, .18);
}

.services-main-button:hover span {
    transform: translateX(4px);
}



/* =========================================================
   CEPAVET — NÚMEROS PREMIUM
   ========================================================= */

.numbers-section {
    position: relative;
    overflow: hidden;
}

/* brilho ambiente passando pelo fundo */
.numbers-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(245, 197, 28, .10) 0%,
        rgba(245, 197, 28, .035) 35%,
        transparent 70%
    );

    pointer-events: none;
    animation: numbersAmbient 6s ease-in-out infinite;
}

/* cada bloco */
.number-item {
    position: relative;
    overflow: hidden;

    opacity: 0;
    transform: translateY(28px) scale(.96);

    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);
}

/* quando o reveal original da página ativar */
.number-item.reveal-visible,
.number-item.is-visible,
.number-item.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* caso o data-reveal original use outra classe,
   esta animação também entra quando o elemento estiver
   efetivamente visível via JS abaixo */
.number-item.number-animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* número */
.number-item strong {
    position: relative;
    display: inline-block;

    color: #f5c51c;

    text-shadow:
        0 0 0 rgba(245,197,28,0),
        0 0 22px rgba(245,197,28,.10);

    transform: scale(.88);
    opacity: 0;

    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        opacity .8s ease,
        text-shadow .8s ease;
}

/* número ativado */
.number-item.number-animated strong {
    opacity: 1;
    transform: scale(1);

    text-shadow:
        0 0 8px rgba(245,197,28,.18),
        0 0 28px rgba(245,197,28,.08);
}

/* linha de brilho atravessando o número */
.number-item strong::after {
    content: "";
    position: absolute;

    left: -80%;
    top: 0;

    width: 45%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.65),
        transparent
    );

    transform: skewX(-20deg);

    opacity: 0;
}

.number-item.number-animated strong::after {
    animation: numberShine 1.2s ease .5s forwards;
}

/* legenda */
.number-item span {
    display: block;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity .7s ease .25s,
        transform .7s ease .25s;
}

.number-item.number-animated span {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   DELAYS — ENTRADA EM CASCATA
   ========================================================= */

.number-item:nth-child(1) {
    transition-delay: .05s;
}

.number-item:nth-child(2) {
    transition-delay: .18s;
}

.number-item:nth-child(3) {
    transition-delay: .31s;
}

.number-item:nth-child(4) {
    transition-delay: .44s;
}


/* =========================================================
   ANIMAÇÕES
   ========================================================= */

@keyframes numberShine {
    0% {
        left: -80%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 140%;
        opacity: 0;
    }
}

@keyframes numbersAmbient {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(.85);
        opacity: .65;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: 1;
    }
}


/* =========================================================
   HOVER — DESKTOP
   ========================================================= */

@media (hover: hover) {

    .number-item {
        transition:
            opacity .8s cubic-bezier(.22,1,.36,1),
            transform .8s cubic-bezier(.22,1,.36,1);
    }

    .number-item.number-animated:hover {
        transform: translateY(-5px) scale(1.025);
    }

    .number-item.number-animated:hover strong {
        text-shadow:
            0 0 10px rgba(245,197,28,.35),
            0 0 35px rgba(245,197,28,.14);
    }
}


/* =========================================================
   REDUZIR ANIMAÇÃO SE O USUÁRIO PEDIR
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .numbers-section::before,
    .number-item,
    .number-item strong,
    .number-item span {
        animation: none !important;
        transition: none !important;
    }

    .number-item {
        opacity: 1 !important;
        transform: none !important;
    }

    .number-item strong,
    .number-item span {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =========================================================
   CEPAVET — PULSAÇÃO FORTE E VISÍVEL DOS NÚMEROS
   ========================================================= */

.number-item strong {
    display: inline-block !important;
    position: relative;

    transform-origin: center center !important;

    animation: cepavetNumberPulse 1.5s ease-in-out infinite !important;

    will-change: transform, filter, text-shadow;
}


/* PULSAÇÃO */

/* PULSAÇÃO FORTE, COM BRILHO MAIS DISCRETO */

@keyframes cepavetNumberPulse {

    0% {
        transform: scale(1) !important;
        filter: brightness(1);
        text-shadow:
            0 0 0 rgba(245, 197, 28, 0);
    }

    45% {
        transform: scale(1.25) !important;
        filter: brightness(1.18);

        text-shadow:
            0 0 5px rgba(245, 197, 28, .45),
            0 0 13px rgba(245, 197, 28, .30),
            0 0 24px rgba(245, 197, 28, .16);
    }

    100% {
        transform: scale(1) !important;
        filter: brightness(1);

        text-shadow:
            0 0 0 rgba(245, 197, 28, 0);
    }
}


/* Cada número pulsa em um momento diferente */

.number-item:nth-child(1) strong {
    animation-delay: 0s !important;
}

.number-item:nth-child(2) strong {
    animation-delay: .35s !important;
}

.number-item:nth-child(3) strong {
    animation-delay: .70s !important;
}

.number-item:nth-child(4) strong {
    animation-delay: 1.05s !important;
}

/* Remove a bolinha azul do ícone 24 HORAS */
.emergency-live-dot {
    display: none !important;
}


/* =========================================================
   ÁREA DO CLIENTE
   ========================================================= */

.client-area-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: 42px;
    padding: 0 18px;

    border-radius: 999px;

    background: #f5c51c;
    color: #183572;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;

    text-decoration: none;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.client-area-btn:hover {
    background: #183572;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(24, 53, 114, .18);
}

/* Atendimento 24h - letra branca */
a.header-cta {
  color: #FFFFFF !important;
}

a.header-cta {
  color: #FFFFFF !important;
}


/* Lista nominal da equipe */
.team-roster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 36px;
}

.team-roster-group {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
}

.team-roster-group h3 {
    margin: 0 0 16px;
    color: var(--blue);
    font: 700 16px/1.3 Manrope, sans-serif;
}

.team-roster-group ul {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-roster-group li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.team-roster-group li strong {
    color: var(--blue);
}

@media (max-width: 768px) {
    .team-roster {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }
}
.modal-whatsapp-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #1f9d55;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.modal-whatsapp-cta:hover {
    background: #178447;
    transform: translateY(-2px);
}

.modal-whatsapp-cta span {
    color: #fff;
    font-size: 17px;
}
/* História da CEPAVET: destaque editorial na seção Equipe */
.clinic-story {
    position: relative;
    margin-top: 72px;
    padding-top: 8px;
}

.clinic-story-heading {
    max-width: 700px;
    margin: 0 auto 30px;
    text-align: center;
}

.clinic-story-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    color: var(--blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
}

.clinic-story-kicker i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 0 5px rgba(245,197,28,.16);
}

.clinic-story-heading h2 {
    margin: 0;
    color: var(--blue);
    font: 800 clamp(30px, 4vw, 48px)/1.12 Manrope, sans-serif;
    letter-spacing: -.045em;
}

.clinic-story-heading h2 span {
    color: #3f65b2;
}

.clinic-story-heading p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.clinic-story-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(170px, .7fr) 2fr;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgba(76,121,205,.42), transparent 32%),
        linear-gradient(135deg, #102858 0%, #183572 55%, #21478f 100%);
    box-shadow: 0 24px 60px rgba(16,40,88,.2);
    color: #fff;
}

.clinic-story-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 42px clamp(24px, 4vw, 54px);
    border-right: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.035);
}

.clinic-story-date > span {
    color: #f5c51c;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em;
}

.clinic-story-date strong {
    margin: 10px 0 -7px;
    color: #fff;
    font: 800 clamp(76px, 10vw, 118px)/.95 Manrope, sans-serif;
    letter-spacing: -.09em;
}

.clinic-story-date b {
    color: #dce7ff;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: .16em;
}

.clinic-story-date i {
    margin-top: 28px;
    color: rgba(255,255,255,.55);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .14em;
}

.clinic-story-timeline {
    display: grid;
    gap: 0;
    padding: 25px clamp(22px, 4vw, 52px) 20px;
}

.clinic-story-step {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 15px;
    padding: 18px 0 22px;
}

.clinic-story-step:not(:last-child)::before {
    position: absolute;
    top: 54px;
    bottom: -2px;
    left: 18px;
    width: 1px;
    background: linear-gradient(rgba(245,197,28,.8), rgba(255,255,255,.16));
    content: "";
}

.clinic-story-marker {
    z-index: 1;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(245,197,28,.5);
    border-radius: 50%;
    background: #183572;
    color: #f5c51c;
    font-size: 10px;
    font-weight: 900;
}

.clinic-story-step h3 {
    margin: 2px 0 7px;
    color: #fff;
    font: 700 16px/1.4 Manrope, sans-serif;
}

.clinic-story-step p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: 13px;
    line-height: 1.8;
}

.clinic-story-footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 66px;
    padding: 14px clamp(22px, 4vw, 52px);
    border-top: 1px solid rgba(255,255,255,.14);
    background: rgba(5,20,50,.18);
}

.clinic-story-footer span {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 99px;
    background: #f5c51c;
    color: #183572;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.clinic-story-footer strong {
    color: rgba(255,255,255,.9);
    font-size: 12px;
}

.clinic-story-footer b {
    margin-left: auto;
    color: #f5c51c;
    font-size: 21px;
}

@media (max-width: 700px) {
    .clinic-story { margin-top: 48px; }
    .clinic-story-heading { margin-bottom: 22px; }
    .clinic-story-heading h2 { font-size: clamp(28px, 8vw, 38px); }
    .clinic-story-heading p { font-size: 13px; }
    .clinic-story-card { grid-template-columns: 1fr; border-radius: 22px; }
    .clinic-story-date {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        justify-content: initial;
        gap: 0 15px;
        padding: 22px 24px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.16);
    }
    .clinic-story-date > span { grid-column: 1 / -1; }
    .clinic-story-date strong { grid-row: 2; margin: 5px 0 0; font-size: 76px; }
    .clinic-story-date b { grid-row: 2; font-size: 12px; }
    .clinic-story-date i { grid-row: 2; margin: 0 0 0 auto; font-size: 8px; }
    .clinic-story-timeline { padding: 10px 22px 12px; }
    .clinic-story-step { grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0 19px; }
    .clinic-story-marker { width: 34px; height: 34px; }
    .clinic-story-step:not(:last-child)::before { left: 16px; top: 50px; }
    .clinic-story-step h3 { font-size: 14px; }
    .clinic-story-step p { font-size: 12px; line-height: 1.7; }
    .clinic-story-footer { gap: 10px; min-height: 60px; padding: 12px 20px; }
    .clinic-story-footer strong { font-size: 10px; }
}
/* Equipe: hierarquia visual mais limpa e espaçamento consistente */
.team-section { padding-block: clamp(48px, 6vw, 76px); }
.team-grid { grid-template-columns: minmax(230px, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 54px); align-items: center; }
.team-brand { min-height: 320px; }
.team-logo-card { min-height: 290px; padding: 30px; border-radius: 22px; box-shadow: 0 12px 34px rgba(24,53,114,.08); }
.team-floating { right: -10px; bottom: 12px; }
.team-content h2 { margin-top: 10px; font-size: clamp(34px, 3.4vw, 46px); }
.team-content > p { margin-top: 14px; line-height: 1.7; }
.team-points { gap: 12px; margin-top: 22px; }
.team-points > div { padding-top: 11px; }
.team-points strong { margin-top: 7px; font-size: 10px; }

.team-roster-wrap { margin-top: clamp(42px, 5vw, 60px); }
.team-roster-heading { max-width: 600px; margin-bottom: 18px; }
.team-roster-heading > span { color: #5873a8; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.team-roster-heading h2 { margin: 7px 0 0; color: #183572; font: 750 clamp(22px, 2.5vw, 30px)/1.2 Manrope,sans-serif; letter-spacing: -.03em; }
.team-roster { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 0; }
.team-roster-group { padding: 20px 22px; border: 1px solid rgba(24,53,114,.1); border-radius: 16px; background: #fff; }
.team-roster-group h3 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(24,53,114,.1); color: #183572; font: 700 14px/1.3 Manrope,sans-serif; }
.team-roster-group ul { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; }
.team-roster-group li { justify-content: flex-start; gap: 4px 8px; color: #526176; font-size: 12px; }
.team-roster-group li strong { color: #183572; }

/* História da clínica */
.clinic-story { margin-top: clamp(34px, 4vw, 48px); padding: 0; }
.clinic-story-panel { position: relative; overflow: hidden; padding: clamp(24px, 3.5vw, 38px); border: 1px solid rgba(24,53,114,.1); border-radius: 20px; background: #f7f9fd; box-shadow: none; }
.clinic-story-panel::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: #f5c51c; content: ""; }
.clinic-story-head { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.clinic-story-kicker { display: block; margin: 0 0 8px; color: #5873a8; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.clinic-story-head h2 { margin: 0; color: #183572; font: 750 clamp(25px,3vw,36px)/1.15 Manrope,sans-serif; letter-spacing: -.035em; }
.clinic-story-head h2 span { color: #5274b5; }
.clinic-story-date { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 9px 13px; border: 1px solid rgba(24,53,114,.1); border-radius: 12px; background: #fff; color: #183572; }
.clinic-story-date strong { margin: 0; color: #183572; font: 800 34px/1 Manrope,sans-serif; }
.clinic-story-date span { color: #526176; font-size: 9px; font-weight: 800; line-height: 1.35; letter-spacing: .06em; }
.clinic-story-intro { max-width: 720px; margin: 12px 0 22px; color: #526176; font-size: 13px; line-height: 1.65; }
.clinic-story-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border-top: 1px solid rgba(24,53,114,.13); }
.clinic-story-step { display: block; padding: 18px 20px 4px 0; border: 0; border-radius: 0; background: transparent; }
.clinic-story-step + .clinic-story-step { padding-left: 20px; border-left: 1px solid rgba(24,53,114,.13); }
.clinic-story-step:not(:last-child)::before { display: none; }
.clinic-story-step > span { display: block; width: auto; height: auto; margin-bottom: 10px; padding: 0; background: none; color: #b08b00; font-size: 10px; font-weight: 900; }
.clinic-story-step h3 { margin: 0 0 7px; color: #183572; font: 700 13px/1.4 Manrope,sans-serif; }
.clinic-story-step p { margin: 0; color: #526176; font-size: 11px; line-height: 1.7; }
.clinic-story-footer { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 0 0; min-height: 0; border-top: 1px solid rgba(24,53,114,.13); background: transparent; }
.clinic-story-footer span { padding: 0; border-radius: 0; background: transparent; color: #5873a8; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.clinic-story-footer strong { color: #183572; font-size: 11px; }

@media (max-width: 900px) {
    .team-grid { grid-template-columns: minmax(190px,.7fr) minmax(0,1.3fr); gap: 28px; }
    .team-brand { min-height: 280px; }
    .team-logo-card { min-height: 250px; }
    .team-roster-group ul { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .team-grid { grid-template-columns: 1fr; gap: 25px; }
    .team-brand { min-height: 230px; max-width: 400px; width: 100%; margin-inline: auto; }
    .team-logo-card { min-height: 220px; }
    .team-content h2 { font-size: clamp(32px,8vw,40px); }
    .team-roster-wrap { margin-top: 34px; }
    .team-roster { grid-template-columns: 1fr; gap: 11px; }
    .team-roster-group { padding: 17px; }
    .team-roster-group ul { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 12px; }
    .clinic-story { margin-top: 28px; }
    .clinic-story-panel { padding: 23px 17px 18px 21px; border-radius: 16px; }
    .clinic-story-head { align-items: flex-start; gap: 10px; }
    .clinic-story-head h2 { font-size: clamp(22px,6.5vw,29px); }
    .clinic-story-date { gap: 7px; padding: 8px 9px; }
    .clinic-story-date strong { font-size: 29px; }
    .clinic-story-date span { font-size: 8px; }
    .clinic-story-intro { margin: 11px 0 15px; font-size: 12px; }
    .clinic-story-steps { grid-template-columns: 1fr; }
    .clinic-story-step, .clinic-story-step + .clinic-story-step { padding: 13px 0; border-left: 0; }
    .clinic-story-step + .clinic-story-step { border-top: 1px solid rgba(24,53,114,.12); }
    .clinic-story-step > span { margin-bottom: 5px; }
    .clinic-story-step h3 { font-size: 12px; }
    .clinic-story-footer { align-items: flex-start; flex-direction: column; gap: 5px; margin-top: 12px; padding-top: 11px; }
}
/* Vacinação */
.vaccination-section { background: #f7f9fd; }
.vaccination-section .section-heading > p { max-width: 650px; margin-inline: auto; }
.vaccination-layout { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.95fr); align-items: center; gap: clamp(28px,5vw,64px); margin-top: 42px; }
.vaccination-content { display: grid; gap: 22px; }
.vaccination-protocols { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.vaccination-protocol { display: flex; gap: 13px; padding: 20px; border: 1px solid rgba(24,53,114,.1); border-radius: 16px; background: #fff; }
.vaccination-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: #fff7d6; font-size: 21px; }
.vaccination-protocol h3,.vaccination-prices h3 { margin: 0 0 7px; color: #183572; font: 700 15px/1.3 Manrope,sans-serif; }
.vaccination-protocol p { margin: 0; color: #526176; font-size: 12px; line-height: 1.65; }
.vaccination-prices { padding: 21px 23px; border: 1px solid rgba(24,53,114,.1); border-radius: 16px; background: #fff; }
.vaccination-prices h3 { margin-bottom: 13px; }
.vaccination-prices ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.vaccination-prices li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(24,53,114,.08); color: #526176; font-size: 12px; }
.vaccination-prices li strong { color: #183572; white-space: nowrap; }
.vaccination-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 19px; border-radius: 12px; background: #183572; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; transition: transform .2s ease,background .2s ease; }
.vaccination-cta:hover { transform: translateY(-2px); background: #24488f; }
.vaccination-cta span { color: #f5c51c; font-size: 18px; }
.vaccination-gallery { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: 210px 180px; gap: 13px; }
.vaccination-photo { position: relative; overflow: hidden; margin: 0; border-radius: 18px; background: #e8edf6; box-shadow: 0 12px 30px rgba(24,53,114,.1); }
.vaccination-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vaccination-photo-main { grid-row: 1 / 3; }
.vaccination-photo-secondary { grid-column: 2; }
.vaccination-photo-care { grid-column: 2; }
.vaccination-photo-care::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,rgba(10,27,57,.72)); content: ""; }
.vaccination-photo-care figcaption { position: absolute; z-index: 1; right: 14px; bottom: 13px; left: 14px; color: #fff; font: 700 11px/1.4 Manrope,sans-serif; }
@media (max-width: 850px) { .vaccination-layout { grid-template-columns: 1fr; } .vaccination-gallery { max-width: 620px; width: 100%; margin-inline: auto; } }
@media (max-width: 600px) { .vaccination-protocols { grid-template-columns: 1fr; } .vaccination-prices { padding: 18px; } .vaccination-prices ul { grid-template-columns: 1fr; } .vaccination-gallery { grid-template-rows: 175px 145px; gap: 9px; } .vaccination-photo { border-radius: 14px; } }