* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background: #ffffff;
    color: #071B2C;
    line-height: 1.5;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
    max-width: 100%;
}

img {
    height: auto;
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
}

.topo {
    width: 100%;
    height: 96px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 55px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 4px 22px rgba(0,0,0,0.08);
}

.logo-area {
    display: flex;
    align-items: center;
}

.logo {
    height: 78px;
    width: auto;
    display: block;
    object-fit: contain;
}

.menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.menu a {
    text-decoration: none;
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 600;
}

.menu a.active,
.menu a:hover {
    color: #FF6B2B;
}

.btn-topo {
    background: linear-gradient(135deg, #0A2A43 0%, #1D6FF2 58%, #58A6FF 100%);
    color: white;
    padding: 13px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 12px 26px rgba(29,111,242,0.24);
}

.hero {
    min-height: 100vh;
    padding: 130px 55px 70px;
    background: #071B2C;
    position: relative;
    color: white;
    overflow: hidden;
}

.overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(7,27,44,0.98) 0%, rgba(7,27,44,0.92) 35%, rgba(7,27,44,0.55) 58%, rgba(7,27,44,0.18) 100%),
        url("images/hero.png");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    max-width: 1220px;
    margin: 0 auto;
    min-height: calc(100vh - 200px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;
}

.hero-text {
    text-align: left;
    max-width: 610px;
}

.tag {
    display: inline-block;
    color: #2F8DFF;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

h1 {
    font-size: 58px;
    line-height: 1.05;
    letter-spacing: 0;
    margin-bottom: 24px;
    font-weight: 800;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.hero-highlight {
    color: #2F8DFF;
}

.hero-text p {
    font-size: 19px;
    line-height: 1.65;
    margin-bottom: 34px;
    color: rgba(255,255,255,0.88);
    max-width: 560px;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn {
    display: inline-block;
    background: linear-gradient(135deg, #1D6FF2 0%, #2F8DFF 55%, #72B8FF 100%);
    color: white;
    text-decoration: none;
    padding: 17px 34px;
    border-radius: 10px;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(29,111,242,0.28);
}

.btn-outline {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 16px 30px;
    border-radius: 10px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.04);
}

.hero-image {
    min-height: 470px;
}

.hero-benefits,
.hero-copy-mobile,
.cta-mobile-label,
.mobile-hero-break,
.home-hero-title-mobile,
.home-mobile-summary,
.mobile-family-bridge,
.clean-hero-mobile,
.clean-family-image {
    display: none;
}

.proof-section {
    background:
        linear-gradient(180deg, #F5F8FC 0%, #F5F8FC 58%, #071B2C 58%, #071B2C 100%);
    color: #071B2C;
    padding: 95px 55px 85px;
}

.proof-container {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 58px;
    align-items: center;
}

.proof-copy {
    max-width: 540px;
}

.section-tag {
    display: inline-block;
    color: #1D6FF2;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

h2 {
    color: #071B2C;
    font-size: 44px;
    line-height: 1.1;
    margin-bottom: 22px;
    font-weight: 800;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.proof-copy p {
    color: #32465A;
    font-size: 18px;
    line-height: 1.65;
    max-width: 520px;
}

.proof-block-copy {
    color: #071B2C !important;
    font-weight: 800;
    margin-top: 18px;
}

.result-visual {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(7,27,44,0.16);
    background: white;
    position: relative;
    min-height: 430px;
}

.result-visual::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(255,255,255,0.9);
    transform: translateX(-50%);
}

.result-visual img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.proof-points {
    max-width: 1220px;
    margin: 36px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.proof-card {
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    box-shadow: 0 12px 28px rgba(7,27,44,0.07);
}

.check {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E8F1FF;
    color: #1D6FF2;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 18px;
}

.proof-card p {
    color: #18324A;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
}

.results-gallery {
    max-width: 1220px;
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
    gap: 16px;
}

.result-gallery-intro {
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(47,141,255,0.18);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(7,27,44,0.12);
    padding: 26px;
}

.result-gallery-intro-wide,
.result-gallery-intro-auto {
    grid-column: 1 / -1;
}

.result-gallery-intro h2 {
    font-size: clamp(28px, 4vw, 38px);
    margin-bottom: 14px;
}

.result-gallery-intro p,
.result-gallery-intro strong {
    color: #32465A;
    display: block;
    font-size: 17px;
    line-height: 1.55;
    max-width: 760px;
}

.result-gallery-intro strong {
    color: #071B2C;
    font-weight: 900;
    margin-top: 12px;
}

.result-card {
    position: relative;
    min-height: 250px;
    border-radius: 8px;
    overflow: hidden;
    background: #0A2A43;
    box-shadow: 0 18px 36px rgba(0,0,0,0.24);
}

.result-card-wide {
    min-height: 310px;
}

.result-card img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: cover;
    object-position: center;
}

.result-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7,27,44,0.58), rgba(7,27,44,0.02) 58%);
}

.result-card-label {
    bottom: 18px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 900;
    left: 18px;
    line-height: 1.25;
    position: absolute;
    right: 18px;
    text-shadow: 0 8px 18px rgba(0,0,0,0.42);
    z-index: 1;
}

.trust-section {
    background:
        radial-gradient(circle at 80% 20%, rgba(47,141,255,0.24), transparent 34%),
        linear-gradient(135deg, #061725 0%, #0A2A43 46%, #123D63 100%);
    color: white;
    padding: 96px 55px;
    overflow: hidden;
}

.trust-container {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: 58px;
    align-items: center;
}

.trust-copy {
    max-width: 500px;
}

.trust-copy .section-tag {
    color: #58A6FF;
}

.trust-copy h2 {
    color: white;
}

.trust-copy p {
    color: rgba(255,255,255,0.84);
    font-size: 18px;
    line-height: 1.65;
}

.machine-cert-card {
    border-radius: 8px;
    overflow: hidden;
    background: white;
    padding: 14px;
    box-shadow: 0 28px 70px rgba(0,0,0,0.32);
    position: relative;
}

.trust-support {
    color: rgba(255,255,255,0.94) !important;
    font-weight: 800;
    margin-top: 18px;
}

.machine-cert-card::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(10,42,67,0.08);
    pointer-events: none;
}

.machine-cert-card img {
    width: 100%;
    display: block;
    border-radius: 6px;
    object-fit: cover;
}

.social-proof-section {
    background: #F5F8FC;
    padding: 70px 22px;
}

.social-proof-container {
    max-width: 1220px;
    margin: 0 auto;
}

.social-proof-heading {
    max-width: 620px;
    margin-bottom: 28px;
}

.social-proof-heading h2 {
    margin-bottom: 0;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.testimonial-card {
    background: white;
    border: 1px solid rgba(10,42,67,0.08);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(7,27,44,0.1);
}

.testimonial-photo {
    width: 100%;
    height: 210px;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.testimonial-content {
    padding: 22px;
}

.stars {
    color: #F6A800;
    font-size: 15px;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.testimonial-content p {
    color: #071B2C;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 800;
    margin-bottom: 18px;
}

.testimonial-content span {
    color: #486174;
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.blog-info-section {
    background: #F5F8FC;
    padding: 72px 22px;
}

.blog-info-container {
    max-width: 1220px;
    margin: 0 auto;
}

.blog-info-heading {
    margin-bottom: 28px;
}

.blog-info-heading h2 {
    color: #071B2C;
    font-size: 32px;
    line-height: 1.12;
    margin-bottom: 12px;
}

.blog-info-heading p {
    color: #486174;
    font-size: 17px;
    line-height: 1.5;
}

.blog-carousel {
    position: relative;
}

.blog-carousel-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

.blog-carousel-viewport::-webkit-scrollbar {
    display: none;
}

.blog-carousel-viewport.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.blog-card-track {
    display: flex;
    gap: 18px;
}

.blog-card {
    flex: 0 0 100%;
    min-height: 430px;
    background: white;
    border: 1px solid rgba(10,42,67,0.08);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(7,27,44,0.09);
    scroll-snap-align: start;
}

.blog-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: contain;
    background: #071B2C;
}

.blog-card p {
    color: #32465A;
    font-size: 16px;
    line-height: 1.55;
    padding: 18px;
}

.carousel-button {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #0A2A43;
    color: white;
    display: none;
    place-items: center;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(7,27,44,0.2);
    transform: translateY(-50%);
}

.carousel-button-prev {
    left: -20px;
}

.carousel-button-next {
    right: -20px;
}

.blog-transition {
    color: #071B2C;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 900;
    text-align: center;
    max-width: 760px;
    margin: 34px auto 0;
}

.final-cta-section {
    background:
        radial-gradient(circle at 20% 0%, rgba(47,141,255,0.22), transparent 32%),
        linear-gradient(145deg, #061725 0%, #071B2C 52%, #0A2A43 100%);
    color: white;
    padding: 22px 22px 72px;
}

.final-cta-container {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.final-cta-image {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 58px rgba(0,0,0,0.32);
}

.final-cta-image img {
    width: 100%;
    min-height: 300px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.final-cta-copy {
    max-width: 620px;
}

.final-alert {
    color: #9FCBFF;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 800;
    margin-bottom: 18px;
}

.final-cta-copy h2 {
    color: white;
    font-size: 32px;
    line-height: 1.12;
    margin-bottom: 18px;
}

.final-subtitle {
    color: rgba(255,255,255,0.84);
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 22px;
}

.final-proof-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.final-proof-list span {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 12px;
}

.final-impact {
    color: white;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 800;
    margin-bottom: 24px;
}

.final-cta-button {
    display: inline-block;
    width: 100%;
    background: linear-gradient(135deg, #1D6FF2 0%, #2F8DFF 55%, #72B8FF 100%);
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 18px 24px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(29,111,242,0.34);
}

.btn-topo,
.btn,
.final-cta-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.btn-topo::before,
.btn::before,
.final-cta-button::before {
    content: "";
    position: absolute;
    inset: -45% -70%;
    z-index: -1;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.72) 48%, transparent 62%);
    transform: translateX(-70%) skewX(-18deg);
    animation: ctaShine 2.8s ease-in-out infinite;
}

.btn-topo:hover,
.btn:hover,
.final-cta-button:hover,
.btn-topo:focus-visible,
.btn:focus-visible,
.final-cta-button:focus-visible {
    transform: scale(1.05);
    filter: brightness(1.08);
    box-shadow: 0 20px 42px rgba(29,111,242,0.42);
}

.btn-topo:hover::before,
.btn:hover::before,
.final-cta-button:hover::before,
.btn-topo:focus-visible::before,
.btn:focus-visible::before,
.final-cta-button:focus-visible::before {
    animation-duration: 1.8s;
}

@keyframes ctaShine {
    0% {
        transform: translateX(-75%) skewX(-18deg);
        opacity: 0;
    }

    18% {
        opacity: 0.95;
    }

    48% {
        transform: translateX(75%) skewX(-18deg);
        opacity: 0.6;
    }

    70%,
    100% {
        transform: translateX(75%) skewX(-18deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-topo,
    .btn,
    .final-cta-button {
        transition: none;
    }

    .btn-topo::before,
    .btn::before,
    .final-cta-button::before {
        animation: none;
        opacity: 0;
    }
}

.smart-hover {
    cursor: default;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        color 0.3s ease,
        filter 0.3s ease,
        transform 0.3s ease;
}

.smart-hover :where(h3, strong, p, span, small) {
    transition: color 0.3s ease;
}

.smart-hover:hover {
    background: linear-gradient(135deg, #0A2A43 0%, #1D6FF2 58%, #58A6FF 100%);
    border-color: rgba(255,255,255,0.24);
    box-shadow: 0 14px 32px rgba(7,27,44,0.22);
    color: #FFFFFF;
    transform: scale(1.03);
}

.smart-hover:hover :where(h3, strong, p, span, small) {
    color: #FFFFFF;
}

.js-motion .fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        color 0.3s ease;
    will-change: opacity, transform;
}

.js-motion .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.js-motion .fade-up.visible.smart-hover:hover {
    transform: translateY(0) scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .smart-hover,
    .smart-hover :where(h3, strong, p, span, small),
    .js-motion .fade-up,
    .auto-hero h1,
    .auto-hero > .auto-hero-content > p:not(.auto-microcopy),
    .auto-benefits span,
    .auto-hero-note,
    .auto-hero .auto-cta,
    .auto-microcopy,
    .auto-collection-note {
        animation: none;
        transition: none;
    }

    .smart-hover:hover,
    .js-motion .fade-up.visible.smart-hover:hover {
        transform: none;
    }

    .js-motion .fade-up {
        opacity: 1;
        transform: none;
    }
}

.final-guarantee {
    color: white;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 900;
    margin-bottom: 24px;
}

.site-footer {
    background: #05111C;
    color: rgba(255,255,255,0.78);
    padding: 42px 22px 24px;
}

.footer-container {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    font-size: 14px;
}

.footer-container strong {
    color: white;
    display: block;
    font-size: 22px;
    margin-bottom: 10px;
}

.footer-brand p {
    color: rgba(255,255,255,0.74);
    line-height: 1.5;
    max-width: 360px;
}

.footer-contact,
.footer-legal {
    display: grid;
    gap: 9px;
}

.footer-contact a,
.footer-legal a {
    color: rgba(255,255,255,0.86);
    text-decoration: none;
}

.footer-contact a:hover,
.footer-legal a:hover {
    color: #58A6FF;
}

.footer-bottom {
    max-width: 1220px;
    margin: 28px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    color: rgba(255,255,255,0.62);
    font-size: 13px;
}

.legal-page {
    background: #F5F8FC;
    color: #071B2C;
}

.legal-container {
    width: min(880px, calc(100% - 44px));
    margin: 0 auto;
    padding: 56px 0 72px;
}

.legal-back {
    color: #1D6FF2;
    display: inline-block;
    font-weight: 800;
    margin-bottom: 28px;
    text-decoration: none;
}

.legal-container h1 {
    color: #071B2C;
    font-size: 40px;
    line-height: 1.12;
    margin-bottom: 20px;
}

.legal-container h2 {
    color: #071B2C;
    font-size: 24px;
    line-height: 1.25;
    margin: 34px 0 10px;
}

.legal-container p {
    color: #32465A;
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: none;
}

.residences-page {
    background: #FFFFFF;
    color: #071B2C;
}

.res-header {
    background: rgba(5,17,28,0.96);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 78px;
    padding: 12px 22px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.res-logo img {
    display: block;
    height: 58px;
    width: auto;
}

.res-nav {
    display: none;
}

.res-nav a {
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.res-nav a.active,
.res-nav a:hover {
    color: #2F8DFF;
}

.res-hero {
    color: white;
    min-height: 620px;
    position: relative;
    overflow: hidden;
}

.res-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5,17,28,0.96), rgba(5,17,28,0.68) 48%, rgba(5,17,28,0.08)),
        url("images/residencias-hero-familia.png");
    background-size: cover;
    background-position: center;
}

.res-hero-content {
    max-width: 1220px;
    margin: 0 auto;
    min-height: 620px;
    padding: 72px 22px 44px;
    position: relative;
    display: flex;
    align-items: center;
}

.res-hero-copy {
    max-width: 600px;
}

.res-hero h1 {
    color: white;
    font-size: 42px;
    line-height: 1.08;
    margin-bottom: 18px;
}

.res-hero p {
    color: rgba(255,255,255,0.9);
    font-size: 20px;
    line-height: 1.45;
    margin-bottom: 26px;
}

.res-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 30px;
}

.res-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.res-hero-badges span {
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 12px;
}

.res-problem,
.res-solution,
.res-services,
.res-blog-strip,
.res-testimonials {
    padding: 52px 22px;
}

.res-family-trigger {
    background:
        linear-gradient(135deg, rgba(5,17,28,0.94), rgba(10,42,67,0.9)),
        url("images/residencias-sujeira-uv.png");
    background-position: center;
    background-size: cover;
    color: white;
    padding: 50px 22px;
}

.res-family-card {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    background: rgba(5,17,28,0.44);
    padding: 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.24);
}

.res-family-card .section-tag {
    color: #58A6FF;
}

.res-family-card h2 {
    color: white;
    font-size: 31px;
    line-height: 1.12;
}

.res-family-card p {
    color: rgba(255,255,255,0.86);
    font-size: 18px;
    line-height: 1.6;
    font-weight: 700;
}

.res-problem,
.res-blog-strip {
    background: white;
}

.res-solution,
.res-services,
.res-testimonials {
    background: #F5F8FC;
}

.res-section-grid {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: center;
}

.res-text-block h2,
.res-centered-heading h2,
.res-final-cta h2 {
    color: #071B2C;
    font-size: 32px;
    line-height: 1.12;
    margin-bottom: 16px;
}

.res-text-block p,
.res-final-cta p {
    color: #32465A;
    font-size: 17px;
    line-height: 1.6;
}

.res-check-list {
    display: grid;
    gap: 12px;
    list-style: none;
    margin-top: 22px;
}

.res-check-list li {
    color: #18324A;
    font-weight: 800;
    line-height: 1.35;
    padding-left: 30px;
    position: relative;
}

.res-check-list li::before {
    content: "";
    background: #1D6FF2;
    border-radius: 50%;
    height: 18px;
    left: 0;
    position: absolute;
    top: 2px;
    width: 18px;
}

.res-image-card {
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(7,27,44,0.12);
    overflow: hidden;
}

.res-image-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.res-feature-row,
.res-service-grid,
.res-trust-grid,
.res-tip-grid,
.res-testimonial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.res-feature-row {
    margin-top: 22px;
}

.res-feature-row article,
.res-service-card,
.res-trust-grid article,
.res-tip-grid article,
.res-testimonial-grid article {
    background: white;
    border: 1px solid rgba(10,42,67,0.08);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(7,27,44,0.08);
}

.res-feature-row article {
    padding: 20px;
}

.res-feature-row strong,
.res-service-card strong,
.res-trust-grid strong,
.res-tip-grid strong,
.res-testimonial-grid strong {
    color: #071B2C;
    display: block;
    font-size: 17px;
    margin-bottom: 8px;
}

.res-feature-row span,
.res-tip-grid p,
.res-testimonial-grid span,
.res-service-card p,
.res-trust-grid p {
    color: #486174;
    font-size: 14px;
    line-height: 1.5;
}

.res-centered-heading {
    max-width: 760px;
    margin: 0 auto 24px;
    text-align: center;
}

.res-services .section-tag {
    font-size: 15px;
    letter-spacing: 2.4px;
    margin-bottom: 12px;
}

.res-service-card,
.res-tip-grid article {
    overflow: hidden;
}

.res-service-card img,
.res-tip-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.res-service-card div,
.res-tip-grid article {
    padding-bottom: 18px;
}

.res-service-card div,
.res-tip-grid strong,
.res-tip-grid p {
    padding-left: 18px;
    padding-right: 18px;
}

.res-service-card strong,
.res-tip-grid strong {
    margin-top: 14px;
}

.res-trust-band {
    background: linear-gradient(135deg, #061725, #0A2A43);
    color: white;
    padding: 70px 22px;
}

.res-trust-band h2 {
    color: white;
}

.res-trust-grid {
    max-width: 1220px;
    margin: 0 auto;
}

.res-trust-grid article {
    background: transparent;
    border-color: rgba(255,255,255,0.16);
    box-shadow: none;
    padding: 20px;
}

.res-trust-grid strong {
    color: white;
}

.res-trust-grid p {
    color: rgba(255,255,255,0.78);
}

.res-tech-gallery {
    max-width: 1220px;
    margin: 34px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.res-tech-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 10px;
}

.res-testimonial-grid article {
    padding: 24px;
}

.res-testimonial-grid p {
    color: #071B2C;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
    margin: 12px 0 18px;
}

.res-final-cta {
    background:
        linear-gradient(135deg, rgba(5,17,28,0.96), rgba(10,42,67,0.94)),
        url("images/cta-colchao-acaros.png");
    background-position: center;
    background-size: cover;
    color: white;
    display: grid;
    gap: 24px;
    padding: 72px 22px;
}

.res-final-cta > * {
    max-width: 610px;
}

.res-final-cta h2,
.res-final-cta p {
    color: white;
}

.res-final-box {
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 22px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.24);
}

@media (min-width: 760px) {
    .res-hero-actions {
        grid-template-columns: auto;
        justify-content: start;
    }

    .res-feature-row,
    .res-service-grid,
    .res-testimonial-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .res-trust-grid,
    .res-tip-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 980px) {
    .res-header {
        padding: 0 55px;
    }

    .res-nav {
        display: flex;
        gap: 28px;
    }

    .res-hero-content {
        padding-left: 55px;
        padding-right: 55px;
    }

    .res-hero h1 {
        font-size: 58px;
    }

    .res-problem,
    .res-family-trigger,
    .res-solution,
    .res-services,
    .res-blog-strip,
    .res-testimonials {
        padding: 68px 55px;
    }

    .res-section-grid {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 48px;
    }

    .res-family-card {
        grid-template-columns: 0.9fr 1.1fr;
        align-items: center;
        padding: 42px;
    }

    .res-family-card h2 {
        font-size: 42px;
    }

    .res-section-grid.reverse {
        grid-template-columns: 1.05fr 0.95fr;
    }

    .res-text-block h2,
    .res-centered-heading h2,
    .res-final-cta h2 {
        font-size: 42px;
    }

    .res-trust-band {
        padding: 78px 55px;
    }

    .res-trust-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .res-tech-gallery {
        grid-template-columns: repeat(4, 1fr);
    }

    .res-tip-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .res-final-cta {
        grid-template-columns: 1fr 0.85fr;
        justify-content: center;
        padding: 90px 55px;
    }
}

@media (max-width: 520px) {
    .res-header .btn-topo {
        font-size: 11px;
        padding: 10px 11px;
    }

    .res-logo img {
        height: 50px;
    }

    .res-hero {
        min-height: 560px;
    }

    .res-hero-content {
        min-height: 560px;
    }

    .res-hero h1 {
        font-size: 34px;
    }
}

@media (max-width: 979px) {
    .res-header {
        flex-wrap: wrap;
    }

    .autos-page .res-header {
        background: rgba(5,17,28,0.96);
        border-bottom: 1px solid rgba(255,255,255,0.12);
        position: sticky;
        top: 0;
    }

    .res-nav {
        order: 3;
        display: flex;
        width: 100%;
        gap: 18px;
        overflow-x: auto;
        padding: 10px 0 2px;
        border-top: 1px solid rgba(255,255,255,0.12);
        scrollbar-width: none;
    }

    .res-nav::-webkit-scrollbar {
        display: none;
    }

    .res-nav a {
        flex: 0 0 auto;
        font-size: 13px;
    }
}

.hotels-page {
    background: #FFFFFF;
    color: #071B2C;
}

.hotel-hero {
    color: white;
    min-height: 680px;
    overflow: hidden;
    position: relative;
}

.hotel-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5,17,28,0.98), rgba(5,17,28,0.78) 48%, rgba(5,17,28,0.22)),
        url("images/hoteis-hero-quarto-zoom.png");
    background-position: center right;
    background-size: cover;
}

.hotel-hero-content {
    max-width: 1220px;
    min-height: 680px;
    margin: 0 auto;
    padding: 76px 22px 56px;
    position: relative;
    display: flex;
    align-items: center;
}

.hotel-hero-copy {
    max-width: 650px;
    position: relative;
    z-index: 2;
}

.hotel-hero h1 {
    color: white;
    font-size: 40px;
    line-height: 1.08;
    margin-bottom: 18px;
}

.hotel-hero p {
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 24px;
}

.hotel-bullets {
    display: grid;
    gap: 12px;
    margin-bottom: 28px;
}

.hotel-bullets span {
    color: white;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    padding-left: 30px;
    position: relative;
}

.hotel-bullets span::before,
.hotel-impact li::before,
.hotel-tech li::before,
.hotel-offer li::before {
    content: "";
    background: #D4A23A;
    border-radius: 50%;
    height: 17px;
    left: 0;
    position: absolute;
    top: 2px;
    width: 17px;
}

.hotel-cta {
    text-transform: uppercase;
}

.hotel-pain,
.hotel-impact,
.hotel-offer {
    padding: 64px 22px;
}

.hotel-heading {
    max-width: 850px;
    margin: 0 auto 30px;
    text-align: center;
}

.hotel-heading h2,
.hotel-impact h2,
.hotel-tech h2,
.hotel-offer h2 {
    color: #071B2C;
    font-size: 32px;
    line-height: 1.12;
}

.hotel-pain-grid,
.hotel-difference-grid {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.hotel-pain-grid article {
    background: white;
    border: 1px solid rgba(10,42,67,0.08);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(7,27,44,0.08);
    padding: 22px;
    text-align: center;
}

.hotel-icon {
    color: #D4A23A;
    display: block;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 12px;
}

.hotel-pain-grid p,
.hotel-difference-grid article {
    color: #18324A;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

.hotel-impact {
    background:
        linear-gradient(90deg, rgba(245,248,252,0.96), rgba(245,248,252,0.82)),
        url("images/hoteis-review-telemovel-original.png");
    background-position: center right;
    background-size: cover;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}

.hotel-impact-copy,
.hotel-offer-copy {
    max-width: 590px;
}

.hotel-impact ul,
.hotel-tech ul,
.hotel-offer ul {
    display: grid;
    gap: 13px;
    list-style: none;
    margin: 24px 0;
}

.hotel-impact li,
.hotel-tech li,
.hotel-offer li {
    color: #18324A;
    font-weight: 800;
    line-height: 1.45;
    padding-left: 30px;
    position: relative;
}

.hotel-impact p {
    color: #B9811C;
    font-size: 18px;
    font-weight: 900;
}

.hotel-impact img {
    border-radius: 8px;
    box-shadow: 0 22px 50px rgba(7,27,44,0.18);
    display: block;
    width: 100%;
}

.hotel-tech {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.96), rgba(255,255,255,0.74), rgba(255,255,255,0.2)),
        url("images/hoteis-tecnologia-acao.png");
    background-position: center right;
    background-size: cover;
    padding: 70px 22px;
}

.hotel-tech-copy {
    max-width: 620px;
}

.hotel-difference {
    background: linear-gradient(135deg, #061725, #0A2A43);
    color: white;
    padding: 66px 22px;
}

.hotel-difference h2 {
    color: white;
}

.hotel-difference-grid article {
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    color: white;
    padding: 22px;
    text-align: center;
}

.hotel-card {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    cursor: default;
    min-height: 178px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hotel-card h3 {
    color: inherit;
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 12px;
}

.hotel-card p {
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
    transition: color 0.3s ease;
}

.hotel-card:hover {
    background: linear-gradient(135deg, #0A2A43 0%, #1D6FF2 58%, #58A6FF 100%);
    border-color: rgba(255,255,255,0.28);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    color: #FFFFFF;
    transform: scale(1.03);
}

.hotel-card:hover p {
    color: #FFFFFF;
}

.hotel-offer {
    background: #F5F8FC;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}

.hotel-offer img {
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(7,27,44,0.12);
    display: block;
    width: 100%;
}

.hotel-offer .section-tag {
    color: #B9811C;
}

.hotel-offer .final-cta-button {
    margin-top: 4px;
    text-transform: uppercase;
}

.about-page {
    background: #FFFFFF;
    color: #071B2C;
}

.about-hero {
    background: #061725;
    color: white;
    min-height: 650px;
    overflow: hidden;
    position: relative;
}

.about-hero-bg {
    background:
        linear-gradient(90deg, rgba(5,17,28,0.98), rgba(5,17,28,0.82) 46%, rgba(5,17,28,0.18)),
        url("images/hoteis-tecnologia-acao.png");
    background-position: center right;
    background-size: cover;
    inset: 0;
    position: absolute;
}

.about-hero-content {
    align-content: center;
    display: grid;
    margin: 0 auto;
    max-width: 1220px;
    min-height: 650px;
    padding: 130px 22px 76px;
    position: relative;
    z-index: 1;
}

.about-hero h1 {
    color: white;
    font-size: clamp(40px, 5.5vw, 68px);
    line-height: 1.04;
    max-width: 690px;
}

.about-hero p {
    color: rgba(255,255,255,0.9);
    font-size: 21px;
    line-height: 1.5;
    margin: 20px 0 28px;
    max-width: 610px;
}

.about-intro,
.about-trust,
.about-final-cta {
    display: grid;
    gap: 32px;
    padding: 72px 22px;
}

.about-intro-copy,
.about-trust-copy,
.about-heading,
.about-final-cta > div {
    max-width: 720px;
}

.about-intro h2,
.about-heading h2,
.about-trust h2,
.about-final-cta h2 {
    color: #071B2C;
    font-size: clamp(31px, 4vw, 46px);
    line-height: 1.12;
}

.about-intro p,
.about-trust p,
.about-final-cta p {
    color: #32465A;
    font-size: 17px;
    line-height: 1.68;
    margin-top: 18px;
}

.about-intro-image,
.about-trust-image {
    border-radius: 8px;
    box-shadow: 0 20px 48px rgba(7,27,44,0.12);
    overflow: hidden;
}

.about-intro-image img,
.about-trust-image img {
    aspect-ratio: 16 / 11;
    display: block;
    object-fit: cover;
    width: 100%;
}

.about-values {
    background: #F5F8FC;
    padding: 76px 22px;
}

.about-heading {
    margin: 0 auto 34px;
    text-align: center;
}

.about-value-grid,
.about-process-grid {
    display: grid;
    gap: 18px;
    margin: 0 auto;
    max-width: 1220px;
}

.about-card,
.about-step {
    background: white;
    border: 1px solid rgba(10,42,67,0.08);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(7,27,44,0.08);
    padding: 24px;
}

.about-card h3,
.about-step h3 {
    color: #071B2C;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.about-card p,
.about-step p {
    color: #486174;
    font-size: 15px;
    line-height: 1.55;
}

.about-process {
    background:
        radial-gradient(circle at 80% 15%, rgba(47,141,255,0.18), transparent 28%),
        linear-gradient(135deg, #061725 0%, #0A2A43 100%);
    color: white;
    padding: 76px 22px;
}

.about-process .section-tag,
.about-process h2 {
    color: white;
}

.about-step {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
    box-shadow: none;
}

.about-step span {
    color: #2F8DFF;
    display: block;
    font-size: 15px;
    font-weight: 950;
    margin-bottom: 18px;
}

.about-step h3,
.about-step p {
    color: white;
}

.about-step p {
    color: rgba(255,255,255,0.78);
}

.about-trust {
    background: white;
}

.about-trust-list {
    display: grid;
    gap: 12px;
    margin-top: 26px;
}

.about-trust-list span {
    background: #F5F8FC;
    border: 1px solid rgba(10,42,67,0.08);
    border-radius: 8px;
    color: #18324A;
    font-size: 15px;
    font-weight: 850;
    padding: 14px 16px;
}

.about-final-cta {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(5,17,28,0.96), rgba(10,42,67,0.94)),
        url("images/cta-colchao-acaros.png");
    background-position: center;
    background-size: cover;
    color: white;
}

.about-final-cta h2,
.about-final-cta p {
    color: white;
}

.about-final-cta p {
    color: rgba(255,255,255,0.82);
}

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

    .about-process-grid,
    .about-trust-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 980px) {
    .about-hero-content,
    .about-intro,
    .about-trust,
    .about-values,
    .about-process,
    .about-final-cta {
        padding-left: max(55px, calc((100vw - 1220px) / 2));
        padding-right: max(55px, calc((100vw - 1220px) / 2));
    }

    .about-intro,
    .about-trust,
    .about-final-cta {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .about-process-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.autos-page {
    background: #061725;
    color: white;
}

.autos-page .res-header {
    background: linear-gradient(180deg, rgba(2,9,17,0.9), rgba(2,9,17,0.2));
    border-bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.autos-page .btn-topo {
    background: linear-gradient(135deg, #57C72F 0%, #78D84C 54%, #B9FF59 100%);
    box-shadow: 0 0 20px rgba(120,216,76,0.28), 0 14px 28px rgba(0,0,0,0.22);
}

.auto-hero {
    background:
        radial-gradient(circle at 48% 50%, rgba(29,111,242,0.16), transparent 30%),
        linear-gradient(135deg, #020911 0%, #061725 48%, #0A2A43 100%);
    min-height: 820px;
    overflow: hidden;
    position: relative;
}

.auto-hero-bg {
    background-image: url("images/automoveis-hero-familia-wide.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(1.08) contrast(1.05) saturate(1.03);
    inset: 0;
    position: absolute;
    transform: scale(1.005);
}

.auto-hero::before {
    background:
        linear-gradient(90deg, #020911 0%, rgba(5,17,28,0.98) 31%, rgba(5,17,28,0.76) 43%, rgba(5,17,28,0.28) 56%, transparent 76%),
        linear-gradient(180deg, rgba(2,9,17,0.76) 0%, transparent 22%, rgba(2,9,17,0.74) 100%);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

.auto-hero::after {
    background: linear-gradient(0deg, rgba(5,17,28,0.72), transparent 28%);
    bottom: 0;
    content: "";
    height: 220px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 1;
}

.auto-hero-content {
    align-content: center;
    display: grid;
    margin: 0 auto;
    max-width: 1220px;
    min-height: 820px;
    padding: 150px 22px 64px;
    position: relative;
    z-index: 2;
}

.auto-hero h1 {
    color: white;
    font-size: clamp(46px, 6.2vw, 82px);
    letter-spacing: 0;
    line-height: 1.02;
    max-width: 560px;
    text-transform: none !important;
}

.auto-hero h1 strong {
    text-transform: none !important;
}

.auto-hero h1 strong,
.auto-problem h2 strong,
.auto-section-heading strong,
.auto-transform h2 strong,
.auto-convenience h2 strong,
.auto-final-copy h2 strong {
    color: #78D84C;
}

.auto-hero p {
    color: rgba(255,255,255,0.92);
    font-size: 23px;
    line-height: 1.45;
    margin: 18px 0 24px;
    max-width: 510px;
}

.auto-hero p strong {
    color: #78D84C;
}

.auto-benefits {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
    margin: 34px 0 16px;
    max-width: 560px;
}

.auto-benefits span {
    align-items: center;
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(120,216,76,0.42);
    border-radius: 0;
    color: rgba(255,255,255,0.92);
    display: grid;
    font-size: 15px;
    font-weight: 800;
    gap: 10px;
    justify-items: center;
    line-height: 1.2;
    min-height: 92px;
    padding: 0 24px;
    text-align: center;
    text-transform: uppercase;
}

.auto-benefits span:last-child {
    border-right: 0;
}

.auto-benefits span::before {
    align-items: center;
    border: 0;
    border-radius: 0;
    color: #B9FF59;
    content: "⌂";
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 44px;
    font-weight: 950;
    height: 44px;
    justify-content: center;
    line-height: 1;
    text-shadow: 0 0 18px rgba(120,216,76,0.35);
    width: 44px;
}

.auto-benefits span:nth-child(2)::before {
    content: "↔";
}

.auto-benefits span:nth-child(3)::before {
    content: "✦";
}

.auto-hero-note {
    color: rgba(255,255,255,0.66);
    display: block;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 24px;
    max-width: 430px;
}

.auto-cta {
    background: linear-gradient(135deg, #57C72F 0%, #78D84C 48%, #B9FF59 100%);
    border: 1px solid rgba(185,255,89,0.42);
    box-shadow: 0 0 22px rgba(120,216,76,0.44), 0 18px 34px rgba(0,0,0,0.24);
    color: white;
    text-transform: uppercase;
}

.auto-microcopy {
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    font-weight: 800;
    margin: 15px 0 0;
}

.auto-collection-note {
    color: rgba(255,255,255,0.58);
    display: block;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 8px;
    max-width: 430px;
}

.auto-hero h1 {
    animation: autoHeroIn 0.8s ease both;
}

.auto-hero > .auto-hero-content > p:not(.auto-microcopy) {
    animation: autoHeroIn 0.8s ease 0.3s both;
}

.auto-benefits span {
    animation: autoHeroIn 0.7s ease both;
}

.auto-benefits span:nth-child(1) {
    animation-delay: 0.42s;
}

.auto-benefits span:nth-child(2) {
    animation-delay: 0.52s;
}

.auto-benefits span:nth-child(3) {
    animation-delay: 0.62s;
}

.auto-hero-note {
    animation: autoHeroIn 0.7s ease 0.68s both;
}

.auto-hero .auto-cta {
    animation: autoHeroIn 0.8s ease 0.78s both, autoCtaPulse 2.6s ease-in-out 1.4s infinite;
    width: fit-content;
}

.auto-microcopy {
    animation: autoHeroIn 0.7s ease 0.9s both;
}

.auto-collection-note {
    animation: autoHeroIn 0.7s ease 1s both;
}

@keyframes autoHeroIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes autoCtaPulse {
    0%,
    100% {
        box-shadow: 0 0 22px rgba(120,216,76,0.44), 0 18px 34px rgba(0,0,0,0.24);
    }

    50% {
        box-shadow: 0 0 34px rgba(185,255,89,0.62), 0 22px 42px rgba(0,0,0,0.3);
    }
}

.auto-problem,
.auto-services,
.auto-transform,
.auto-convenience,
.auto-final-cta {
    border-top: 1px solid rgba(255,255,255,0.14);
}

.auto-problem {
    background: linear-gradient(135deg, #061725 0%, #081D30 100%);
    display: grid;
    gap: 28px;
    padding: 52px 22px;
}

.auto-problem-copy h2,
.auto-section-heading h2,
.auto-transform h2,
.auto-convenience h2,
.auto-final-copy h2 {
    color: white;
    font-size: clamp(30px, 4.8vw, 44px);
    line-height: 1.05;
    text-transform: uppercase;
}

.auto-problem-copy p {
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    line-height: 1.5;
    margin: 16px 0;
    max-width: 460px;
}

.auto-problem-copy ul {
    display: grid;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.auto-problem-copy li {
    color: rgba(255,255,255,0.9);
    font-size: 16px;
    font-weight: 700;
    padding-left: 28px;
    position: relative;
}

.auto-problem-copy li::before {
    background: #78D84C;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(120,216,76,0.55);
    color: #061725;
    content: "✓";
    display: grid;
    font-size: 13px;
    font-weight: 950;
    height: 18px;
    left: 0;
    place-items: center;
    position: absolute;
    top: 1px;
    width: 18px;
}

.auto-problem-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}

.auto-problem-grid img {
    aspect-ratio: 1 / 1.08;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.auto-services {
    background: #061725;
    padding: 40px 22px 46px;
}

.auto-section-heading {
    margin: 0 auto 22px;
    max-width: 1220px;
    text-align: center;
}

.auto-service-grid {
    display: grid;
    gap: 14px;
    margin: 0 auto;
    max-width: 1220px;
}

.auto-service-card {
    background: linear-gradient(180deg, rgba(10,42,67,0.74), rgba(5,17,28,0.96));
    border: 1px solid rgba(120,216,76,0.22);
    border-radius: 8px;
    box-shadow: 0 18px 34px rgba(0,0,0,0.18);
    overflow: hidden;
}

.auto-service-card img {
    aspect-ratio: 16 / 10;
    background: #061725;
    display: block;
    object-fit: contain;
    padding: 8px;
    width: 100%;
}

.auto-service-card div {
    padding: 18px;
}

.auto-service-card h3 {
    color: white;
    font-size: 19px;
    line-height: 1.16;
    margin: 0 0 9px;
    text-transform: uppercase;
}

.auto-service-card p {
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    line-height: 1.45;
}

.auto-transform {
    background: linear-gradient(135deg, #05111C 0%, #061725 100%);
    padding: 36px 22px 46px;
}

.auto-transform h2 {
    margin: 0 auto 18px;
    max-width: 1220px;
    text-align: center;
}

.auto-transform-grid {
    align-items: stretch;
    display: grid;
    gap: 10px;
    margin: 0 auto;
    max-width: 1220px;
}

.auto-transform-grid img {
    aspect-ratio: 16 / 10;
    background: #061725;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 8px;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    width: 100%;
}

.auto-transform-badge {
    align-items: center;
    aspect-ratio: 1 / 1;
    border: 2px solid rgba(120,216,76,0.9);
    border-radius: 50%;
    color: white;
    display: flex;
    font-size: 13px;
    font-weight: 950;
    justify-content: center;
    line-height: 1.25;
    margin: 0 auto;
    max-width: 150px;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
}

.auto-convenience {
    background: linear-gradient(90deg, rgba(5,17,28,0.52), rgba(5,17,28,0.96) 46%, #061725 100%);
    display: grid;
}

.auto-convenience > img {
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    width: 100%;
}

.auto-convenience-copy {
    padding: 42px 22px;
}

.auto-process {
    display: grid;
    gap: 12px;
    margin: 28px 0;
}

.auto-process article {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.9);
    font-weight: 800;
    line-height: 1.35;
    padding: 18px;
    text-align: center;
}

.auto-pill-row,
.auto-bottom-benefits {
    border: 1px solid rgba(120,216,76,0.42);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: center;
    padding: 14px 18px;
    text-transform: uppercase;
}

.auto-pill-row span,
.auto-bottom-benefits span {
    color: white;
    font-size: 13px;
    font-weight: 900;
}

.auto-final-cta {
    background: linear-gradient(135deg, #061725 0%, #081D30 100%);
    display: grid;
}

.auto-final-cta img {
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    width: 100%;
}

.auto-final-copy {
    padding: 44px 22px;
}

.auto-final-copy p {
    color: rgba(255,255,255,0.9);
    font-size: 19px;
    line-height: 1.45;
    margin: 14px 0 24px;
}

.auto-bottom-benefits {
    background: #061725;
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    padding: 18px 22px;
}

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

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

    .auto-benefits {
        grid-template-columns: repeat(3, 1fr);
    }

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

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

    .auto-convenience,
    .auto-final-cta {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 980px) {
    .hotel-hero-content {
        padding-left: 55px;
        padding-right: 55px;
    }

    .hotel-hero h1 {
        font-size: 56px;
    }

    .hotel-hero p {
        font-size: 21px;
    }

    .hotel-bullets {
        grid-template-columns: repeat(3, 1fr);
        max-width: 720px;
    }

    .hotel-pain,
    .hotel-impact,
    .hotel-offer {
        padding: 84px 55px;
    }

    .hotel-heading h2,
    .hotel-impact h2,
    .hotel-tech h2,
    .hotel-offer h2 {
        font-size: 42px;
    }

    .hotel-pain-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .hotel-impact,
    .hotel-offer {
        grid-template-columns: 1fr 0.9fr;
        justify-content: center;
    }

    .hotel-impact {
        padding-left: max(55px, calc((100vw - 1220px) / 2));
        padding-right: max(55px, calc((100vw - 1220px) / 2));
    }

    .hotel-impact img {
        max-width: 430px;
        justify-self: center;
    }

    .hotel-tech {
        padding: 92px max(55px, calc((100vw - 1220px) / 2));
    }

    .hotel-difference {
        padding: 78px 55px;
    }

    .hotel-difference-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .hotel-offer {
        padding-left: max(55px, calc((100vw - 1220px) / 2));
        padding-right: max(55px, calc((100vw - 1220px) / 2));
    }

    .auto-hero-content {
        padding-left: 55px;
        padding-right: 55px;
    }

    .auto-hero h1,
    .auto-hero p {
        text-shadow: 0 10px 28px rgba(0,0,0,0.32);
    }

    .auto-hero-bg {
        background-position: center center;
        background-size: cover;
    }

    .auto-benefits {
        grid-template-columns: repeat(3, 1fr);
    }

    .auto-problem {
        grid-template-columns: 0.82fr 1.18fr;
        padding: 58px max(55px, calc((100vw - 1220px) / 2));
    }

    .auto-problem-grid {
        grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr;
    }

    .auto-services,
    .auto-transform {
        padding-left: 55px;
        padding-right: 55px;
    }

    .auto-service-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .auto-transform-grid {
        grid-template-columns: 1fr 1.22fr 0.62fr 1.12fr 1.22fr;
    }

    .auto-transform-badge {
        align-self: center;
    }

    .auto-convenience-copy,
    .auto-final-copy {
        padding: 58px max(55px, calc((100vw - 1220px) / 2)) 58px 58px;
    }
}


@media (max-width: 900px) {
    .auto-hero-bg {
        background-position: 63% top;
        background-size: auto 58%;
        background-repeat: no-repeat;
        filter: brightness(1.14) contrast(1.04) saturate(1.04);
    }

    .auto-hero::before {
        background: linear-gradient(180deg, rgba(5,17,28,0.1) 0%, rgba(5,17,28,0.44) 34%, rgba(5,17,28,0.98) 62%);
    }

    .auto-hero-content {
        align-content: end;
        display: grid;
        min-height: 760px;
        padding-top: 300px;
    }

    .auto-hero h1 {
        font-size: 42px;
        max-width: 440px;
    }

    .auto-hero p {
        font-size: 18px;
    }

    .auto-hero .auto-cta {
        width: 100%;
    }

    .auto-benefits {
        gap: 10px;
        grid-template-columns: 1fr;
    }

    .auto-benefits span {
        align-items: center;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(120,216,76,0.32);
        border-radius: 10px;
        display: flex;
        justify-content: flex-start;
        min-height: auto;
        padding: 12px 14px;
        text-align: left;
    }

    .auto-benefits span::before {
        font-size: 26px;
        height: 30px;
        width: 30px;
    }

    .topo {
        height: auto;
        padding: 14px 20px;
        flex-wrap: wrap;
    }

    .logo {
        height: 66px;
    }

    .menu {
        order: 3;
        display: flex;
        width: 100%;
        gap: 18px;
        overflow-x: auto;
        padding: 10px 0 2px;
        border-top: 1px solid rgba(10,42,67,0.08);
        scrollbar-width: none;
    }

    .menu::-webkit-scrollbar {
        display: none;
    }

    .menu a {
        flex: 0 0 auto;
        font-size: 13px;
    }

    .btn-topo {
        font-size: 13px;
        padding: 11px 16px;
    }

    .hero {
        padding: 172px 22px 55px;
    }

    .overlay {
        background:
            linear-gradient(to bottom, rgba(7,27,44,0.92), rgba(7,27,44,0.80)),
            url("images/hero.png");
        background-size: cover;
        background-position: center;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 35px;
        min-height: auto;
    }

    h1 {
        font-size: 38px;
    }

    .hero-text p {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-image {
        display: none;
    }

    .proof-section {
        background:
            linear-gradient(180deg, #F5F8FC 0%, #F5F8FC 68%, #071B2C 68%, #071B2C 100%);
        padding: 70px 22px 58px;
    }

    .proof-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    h2 {
        font-size: 32px;
    }

    .proof-copy p {
        font-size: 16px;
    }

    .result-visual,
    .result-visual img {
        min-height: 300px;
    }

    .proof-points {
        grid-template-columns: 1fr;
        margin-top: 24px;
    }

    .proof-card {
        min-height: 76px;
        padding: 18px;
    }

    .results-gallery {
        grid-template-columns: 1fr;
        margin-top: 22px;
    }

    .result-card,
    .result-card-wide {
        min-height: 260px;
    }

    .trust-section {
        padding: 68px 22px;
    }

    .trust-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .trust-copy p {
        font-size: 16px;
    }

    .machine-cert-card {
        padding: 10px;
    }
}

@media (max-width: 520px) {
    .topo {
        gap: 12px;
    }

    .logo {
        height: 58px;
    }

    .btn-topo {
        padding: 10px 13px;
        font-size: 12px;
        white-space: nowrap;
    }

    .hero {
        padding: 112px 20px 50px;
    }

    .tag,
    .section-tag {
        font-size: 12px;
        letter-spacing: 1.6px;
    }

    h1 {
        font-size: 32px;
        line-height: 1.12;
    }

    h2 {
        font-size: 29px;
        line-height: 1.16;
    }

    .btn,
    .btn-outline {
        width: 100%;
        text-align: center;
        padding: 15px 18px;
    }

    .result-visual,
    .result-visual img {
        min-height: 240px;
    }

    .machine-cert-card {
        margin: 0 -4px;
    }
}

@media (min-width: 901px) {
    .social-proof-section {
        padding: 95px 55px;
    }

    .social-proof-heading {
        text-align: center;
        margin: 0 auto 38px;
    }

    .testimonial-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .testimonial-card {
        min-height: 450px;
    }

    .testimonial-photo {
        height: 220px;
    }

    .testimonial-content p {
        font-size: 17px;
    }

    .blog-info-section {
        padding: 96px 55px;
    }

    .blog-info-heading {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 38px;
    }

    .blog-info-heading h2 {
        font-size: 44px;
    }

    .blog-card {
        flex-basis: calc((100% - 54px) / 4);
        min-height: 410px;
    }

    .blog-card p {
        min-height: 162px;
    }

    .carousel-button {
        display: grid;
    }

    .final-cta-section {
        padding: 100px 55px;
    }

    .final-cta-container {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: center;
        gap: 58px;
    }

    .final-cta-image img {
        min-height: 520px;
    }

    .final-cta-copy h2 {
        font-size: 44px;
    }

    .final-cta-button {
        width: auto;
        padding: 18px 32px;
    }

    .footer-container {
        grid-template-columns: 1.1fr 1fr 1fr;
        align-items: start;
    }

    .footer-bottom {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

@media (min-width: 640px) and (max-width: 900px) {
    .blog-card {
        flex-basis: calc((100% - 18px) / 2);
    }
}

/* Mobile app-style refinement layer. Desktop rules above remain untouched. */
@media (max-width: 767px) {
    :root {
        --mobile-pad: 16px;
        --mobile-section: 42px;
        --mobile-card-radius: 10px;
    }

    body {
        font-size: 16px;
    }

    .topo,
    .res-header {
        gap: 10px;
        padding: 9px var(--mobile-pad);
    }

    .topo {
        align-items: center;
    }

    .logo {
        height: 58px;
    }

    .res-logo img {
        height: 48px;
    }

    .btn-topo {
        border-radius: 999px;
        font-size: 12px;
        min-height: 40px;
        padding: 10px 13px;
        white-space: nowrap;
    }

    .menu,
    .res-nav {
        gap: 10px;
        margin-inline: calc(var(--mobile-pad) * -1);
        padding: 8px var(--mobile-pad) 1px;
        scroll-padding-inline: var(--mobile-pad);
    }

    .menu a,
    .res-nav a {
        background: rgba(10,42,67,0.05);
        border-radius: 999px;
        flex: 0 0 auto;
        font-size: 12px;
        padding: 7px 11px;
    }

    .res-nav a {
        background: rgba(255,255,255,0.08);
    }

    .hero,
    .res-hero,
    .hotel-hero,
    .about-hero,
    .auto-hero {
        min-height: 0;
    }

    .hero {
        display: grid;
        min-height: 590px;
        padding: 150px var(--mobile-pad) 38px;
    }

    .overlay {
        background:
            linear-gradient(180deg, rgba(7,27,44,0.64) 0%, rgba(7,27,44,0.88) 42%, rgba(7,27,44,0.98) 100%),
            url("images/hero.png");
        background-position: 58% top;
        background-size: auto 54%;
    }

    .hero-container {
        align-content: end;
        gap: 0;
        min-height: 400px;
    }

    .tag,
    .section-tag {
        font-size: 11px;
        letter-spacing: 1.3px;
        margin-bottom: 12px;
    }

    h1,
    .res-hero h1,
    .hotel-hero h1,
    .about-hero h1,
    .auto-hero h1 {
        font-size: 34px;
        line-height: 1.08;
        margin-bottom: 14px;
    }

    h2,
    .res-text-block h2,
    .res-centered-heading h2,
    .hotel-heading h2,
    .hotel-impact h2,
    .hotel-tech h2,
    .hotel-offer h2,
    .about-intro h2,
    .about-heading h2,
    .about-trust h2,
    .about-final-cta h2,
    .auto-problem-copy h2,
    .auto-section-heading h2,
    .auto-transform h2,
    .auto-convenience h2,
    .auto-final-copy h2 {
        font-size: 28px;
        line-height: 1.12;
        margin-bottom: 13px;
    }

    .hero-text p,
    .res-hero p,
    .hotel-hero p,
    .about-hero p,
    .auto-hero p,
    .proof-copy p,
    .trust-copy p,
    .final-subtitle,
    .res-text-block p,
    .res-final-cta p,
    .hotel-impact p,
    .about-intro p,
    .about-trust p,
    .about-final-cta p,
    .auto-problem-copy p,
    .auto-final-copy p {
        font-size: 16px;
        line-height: 1.5;
    }

    .hero-text p,
    .res-hero p,
    .hotel-hero p,
    .about-hero p,
    .auto-hero p {
        margin-bottom: 18px;
    }

    .btn,
    .btn-outline,
    .final-cta-button,
    .hotel-cta,
    .auto-cta {
        border-radius: 10px;
        min-height: 46px;
        padding: 13px 16px;
        text-align: center;
        width: 100%;
    }

    .hero-buttons {
        gap: 10px;
    }

    .proof-section,
    .trust-section,
    .social-proof-section,
    .blog-info-section,
    .final-cta-section,
    .res-problem,
    .res-solution,
    .res-services,
    .res-blog-strip,
    .res-testimonials,
    .hotel-pain,
    .hotel-impact,
    .hotel-tech,
    .hotel-difference,
    .hotel-offer,
    .about-intro,
    .about-trust,
    .about-values,
    .about-process,
    .about-final-cta,
    .auto-problem,
    .auto-services,
    .auto-transform,
    .auto-final-copy,
    .auto-convenience-copy {
        padding: var(--mobile-section) var(--mobile-pad);
    }

    .proof-section {
        background: linear-gradient(180deg, #F5F8FC 0%, #F5F8FC 62%, #071B2C 62%, #071B2C 100%);
    }

    .proof-container,
    .trust-container,
    .final-cta-container,
    .res-section-grid,
    .hotel-impact,
    .hotel-offer,
    .about-intro,
    .about-trust,
    .auto-problem,
    .auto-convenience,
    .auto-final-cta {
        gap: 18px;
    }

    .result-visual,
    .result-visual img {
        min-height: 0;
    }

    .result-visual {
        border-radius: var(--mobile-card-radius);
        height: 205px;
        min-height: 0;
    }

    .result-visual img {
        height: 100%;
        min-height: 0;
    }

    .proof-points {
        gap: 10px;
        margin-top: 18px;
    }

    .proof-card,
    .res-feature-row article,
    .res-service-card,
    .hotel-pain-grid article,
    .hotel-card,
    .about-card,
    .about-step,
    .auto-service-card,
    .auto-process article {
        border-radius: var(--mobile-card-radius);
        box-shadow: 0 10px 24px rgba(7,27,44,0.08);
    }

    .proof-card {
        gap: 10px;
        min-height: 0;
        padding: 13px 14px;
    }

    .check {
        flex-basis: 26px;
        font-size: 15px;
        height: 26px;
        width: 26px;
    }

    .results-gallery {
        gap: 10px;
        grid-template-columns: 1fr 1fr;
        margin-top: 16px;
    }

    .result-gallery-intro {
        grid-column: 1 / -1;
        padding: 18px;
    }

    .result-gallery-intro h2 {
        font-size: 24px;
        line-height: 1.14;
        margin-bottom: 10px;
    }

    .result-gallery-intro p,
    .result-gallery-intro strong {
        font-size: 14px;
        line-height: 1.45;
    }

    .result-card,
    .result-card-wide {
        height: 150px;
        min-height: 145px;
    }

    .result-card-wide {
        grid-column: span 2;
        height: 170px;
        min-height: 170px;
    }

    .result-card img {
        height: 100%;
        min-height: 0;
    }

    .result-card-label {
        bottom: 12px;
        font-size: 12px;
        left: 12px;
        right: 12px;
    }

    .machine-cert-card {
        border-radius: var(--mobile-card-radius);
        padding: 8px;
    }

    .machine-cert-card img,
    .final-cta-image img,
    .res-image-card img,
    .res-service-card img,
    .hotel-impact img,
    .hotel-offer img,
    .about-intro-image img,
    .about-trust-image img,
    .auto-convenience > img,
    .auto-final-cta img {
        height: 190px;
        min-height: 0;
        object-fit: cover;
        aspect-ratio: auto;
        width: 100%;
    }

    .testimonial-grid,
    .res-feature-row,
    .res-service-grid,
    .hotel-pain-grid,
    .hotel-difference-grid,
    .about-value-grid,
    .about-process-grid,
    .about-trust-list,
    .auto-service-grid,
    .auto-process {
        gap: 12px;
    }

    .testimonial-photo {
        height: 136px;
    }

    .testimonial-content,
    .about-card,
    .about-step,
    .hotel-pain-grid article,
    .hotel-difference-grid article,
    .auto-service-card div {
        padding: 16px;
    }

    .testimonial-content p {
        font-size: 16px;
        line-height: 1.38;
        margin-bottom: 12px;
    }

    .blog-info-heading,
    .social-proof-heading,
    .res-centered-heading,
    .hotel-heading,
    .about-heading,
    .auto-section-heading {
        margin-bottom: 18px;
        text-align: left;
    }

    .blog-card-track {
        gap: 12px;
    }

    .blog-card {
        flex-basis: 82%;
        min-height: 0;
    }

    .blog-card img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .blog-card p {
        font-size: 15px;
        line-height: 1.45;
        padding: 14px;
    }

    .blog-transition {
        font-size: 18px;
        margin-top: 22px;
        text-align: left;
    }

    .final-cta-section {
        padding-top: var(--mobile-section);
    }

    .final-cta-image,
    .res-image-card,
    .about-intro-image,
    .about-trust-image {
        border-radius: var(--mobile-card-radius);
    }

    .final-cta-copy h2 {
        font-size: 28px;
    }

    .final-guarantee {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .final-proof-list {
        gap: 8px;
    }

    .final-proof-list span {
        border-radius: 999px;
        font-size: 12px;
        padding: 8px 10px;
    }

    .res-hero,
    .hotel-hero,
    .about-hero {
        min-height: 520px;
    }

    .res-hero-bg {
        background:
            linear-gradient(180deg, rgba(5,17,28,0.4), rgba(5,17,28,0.88) 46%, rgba(5,17,28,0.98)),
            url("images/residencias-hero-familia.png");
        background-position: 62% top;
        background-size: auto 58%;
    }

    .hotel-hero-bg {
        background:
            linear-gradient(180deg, rgba(5,17,28,0.42), rgba(5,17,28,0.88) 48%, rgba(5,17,28,0.98)),
            url("images/hoteis-hero-quarto-zoom.png");
        background-position: 62% top;
        background-size: auto 58%;
    }

    .about-hero-bg {
        background:
            linear-gradient(180deg, rgba(5,17,28,0.44), rgba(5,17,28,0.88) 46%, rgba(5,17,28,0.98)),
            url("images/hoteis-tecnologia-acao.png");
        background-position: 64% top;
        background-size: auto 58%;
    }

    .res-hero-content,
    .hotel-hero-content,
    .about-hero-content {
        align-items: end;
        align-content: end;
        min-height: 520px;
        padding: 128px var(--mobile-pad) 34px;
    }

    .res-hero-actions,
    .hotel-bullets {
        gap: 9px;
        margin-bottom: 16px;
    }

    .res-hero-badges {
        gap: 7px;
    }

    .res-hero-badges span,
    .hotel-bullets span,
    .auto-pill-row span,
    .auto-bottom-benefits span {
        font-size: 12px;
    }

    .res-hero-badges span {
        border-radius: 999px;
        padding: 8px 10px;
    }

    .res-check-list,
    .hotel-impact ul,
    .hotel-tech ul,
    .hotel-offer ul,
    .auto-problem-copy ul {
        gap: 8px;
        margin-top: 16px;
    }

    .res-feature-row article {
        padding: 15px;
    }

    .res-service-card div {
        padding: 0 15px 15px;
    }

    .res-family-trigger,
    .res-final-cta {
        padding: var(--mobile-section) var(--mobile-pad);
    }

    .res-family-card {
        gap: 12px;
        padding: 18px;
    }

    .res-family-card h2 {
        font-size: 27px;
    }

    .res-family-card p {
        font-size: 16px;
        line-height: 1.5;
    }

    .hotel-card {
        min-height: 0;
        text-align: left;
    }

    .hotel-card h3,
    .auto-service-card h3,
    .about-card h3,
    .about-step h3 {
        font-size: 18px;
    }

    .about-hero .btn {
        width: 100%;
    }

    .about-step span {
        margin-bottom: 10px;
    }

    .about-trust-list span {
        border-radius: var(--mobile-card-radius);
        padding: 12px 14px;
    }

    .auto-hero {
        min-height: 545px;
    }

    .auto-hero-bg {
        background-position: 60% top;
        background-size: auto 54%;
    }

    .auto-hero::before {
        background: linear-gradient(180deg, rgba(5,17,28,0.08) 0%, rgba(5,17,28,0.48) 31%, rgba(5,17,28,0.96) 52%, rgba(5,17,28,0.98) 100%);
    }

    .auto-hero-content {
        align-content: end;
        min-height: 545px;
        padding: 118px var(--mobile-pad) 24px;
    }

    .auto-benefits {
        display: flex;
        gap: 8px;
        margin: 14px 0 10px;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .auto-benefits::-webkit-scrollbar {
        display: none;
    }

    .auto-benefits span {
        border-radius: 999px;
        flex: 0 0 auto;
        font-size: 11px;
        gap: 7px;
        min-height: 36px;
        padding: 8px 11px;
        white-space: nowrap;
    }

    .auto-benefits span::before {
        font-size: 19px;
        height: 22px;
        width: 22px;
    }

    .auto-hero-note,
    .auto-collection-note {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .auto-microcopy {
        font-size: 13px;
        margin-top: 8px;
    }

    .auto-problem-grid {
        gap: 8px;
    }

    .auto-problem-grid img,
    .auto-service-card img,
    .auto-transform-grid img {
        aspect-ratio: auto;
        height: 120px;
    }

    .auto-service-card img,
    .auto-transform-grid img {
        object-fit: contain;
        padding: 7px;
    }

    .auto-problem-grid img {
        object-fit: cover;
    }

    .auto-transform-grid {
        gap: 8px;
        grid-template-columns: 1fr 1fr;
    }

    .auto-transform-badge {
        aspect-ratio: auto;
        border-radius: 999px;
        grid-column: span 2;
        max-width: none;
        min-height: 48px;
        padding: 12px 18px;
    }

    .auto-pill-row,
    .auto-bottom-benefits {
        border-radius: var(--mobile-card-radius);
        gap: 8px 12px;
        justify-content: flex-start;
        padding: 12px;
    }

    .site-footer {
        padding: 34px var(--mobile-pad) 22px;
    }

    .footer-container {
        gap: 18px;
    }
}

@media (max-width: 600px) {
    :root {
        --mobile-section: 36px;
    }

    .hero {
        min-height: 560px;
        padding-top: 138px;
    }

    .hero-container {
        min-height: 370px;
    }

    .res-hero,
    .hotel-hero,
    .about-hero {
        min-height: 500px;
    }

    .res-hero-content,
    .hotel-hero-content,
    .about-hero-content {
        min-height: 500px;
        padding-top: 118px;
    }

    .auto-hero {
        min-height: 530px;
    }

    .auto-hero-content {
        min-height: 530px;
        padding-top: 110px;
    }

    .results-gallery {
        grid-template-columns: 1fr;
    }

    .result-card-wide {
        grid-column: auto;
    }

    .result-card,
    .result-card-wide,
    .result-visual {
        height: 165px;
        min-height: 155px;
    }

    .machine-cert-card img,
    .final-cta-image img,
    .res-image-card img,
    .res-service-card img,
    .hotel-impact img,
    .hotel-offer img,
    .about-intro-image img,
    .about-trust-image img,
    .auto-convenience > img,
    .auto-final-cta img {
        height: 170px;
    }

    .blog-card {
        flex-basis: 86%;
    }
}

@media (max-width: 480px) {
    :root {
        --mobile-pad: 14px;
        --mobile-section: 32px;
    }

    .topo,
    .res-header {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .logo {
        height: 54px;
    }

    .res-logo img {
        height: 44px;
    }

    .btn-topo {
        font-size: 11px;
        min-height: 38px;
        padding: 9px 11px;
    }

    .menu a,
    .res-nav a {
        font-size: 11px;
        padding: 7px 10px;
    }

    h1,
    .res-hero h1,
    .hotel-hero h1,
    .about-hero h1,
    .auto-hero h1 {
        font-size: 31px;
    }

    h2,
    .res-text-block h2,
    .res-centered-heading h2,
    .hotel-heading h2,
    .hotel-impact h2,
    .hotel-tech h2,
    .hotel-offer h2,
    .about-intro h2,
    .about-heading h2,
    .about-trust h2,
    .about-final-cta h2,
    .auto-problem-copy h2,
    .auto-section-heading h2,
    .auto-transform h2,
    .auto-convenience h2,
    .auto-final-copy h2,
    .final-cta-copy h2 {
        font-size: 25px;
    }

    .hero {
        min-height: 535px;
        padding-top: 130px;
    }

    .hero-container {
        min-height: 350px;
    }

    .overlay,
    .res-hero-bg,
    .hotel-hero-bg,
    .about-hero-bg {
        background-size: auto 50%;
    }

    .res-hero,
    .hotel-hero,
    .about-hero {
        min-height: 480px;
    }

    .res-hero-content,
    .hotel-hero-content,
    .about-hero-content {
        min-height: 480px;
        padding-bottom: 28px;
    }

    .auto-hero {
        min-height: 515px;
    }

    .auto-hero-content {
        min-height: 515px;
        padding-bottom: 28px;
    }

    .testimonial-photo {
        height: 124px;
    }

    .blog-card {
        flex-basis: 90%;
    }

    .auto-problem-grid img,
    .auto-service-card img,
    .auto-transform-grid img {
        height: 112px;
    }
}

@media (max-width: 390px) {
    :root {
        --mobile-pad: 12px;
    }

    .btn-topo {
        font-size: 10.5px;
        padding-inline: 10px;
    }

    h1,
    .res-hero h1,
    .hotel-hero h1,
    .about-hero h1,
    .auto-hero h1 {
        font-size: 29px;
    }

    h2,
    .res-text-block h2,
    .res-centered-heading h2,
    .hotel-heading h2,
    .hotel-impact h2,
    .hotel-tech h2,
    .hotel-offer h2,
    .about-intro h2,
    .about-heading h2,
    .about-trust h2,
    .about-final-cta h2,
    .auto-problem-copy h2,
    .auto-section-heading h2,
    .auto-transform h2,
    .auto-convenience h2,
    .auto-final-copy h2,
    .final-cta-copy h2 {
        font-size: 23px;
    }

    .hero {
        min-height: 515px;
    }

    .res-hero,
    .hotel-hero,
    .about-hero {
        min-height: 460px;
    }

    .res-hero-content,
    .hotel-hero-content,
    .about-hero-content {
        min-height: 460px;
    }

    .auto-hero {
        min-height: 505px;
    }

    .auto-hero-content {
        min-height: 505px;
    }

    .machine-cert-card img,
    .final-cta-image img,
    .res-image-card img,
    .res-service-card img,
    .hotel-impact img,
    .hotel-offer img,
    .about-intro-image img,
    .about-trust-image img,
    .auto-convenience > img,
    .auto-final-cta img {
        height: 155px;
    }

    .auto-transform-grid {
        grid-template-columns: 1fr;
    }

    .auto-transform-badge {
        grid-column: auto;
    }
}

/* Final mobile parity pass: keep recent desktop copy/CTA treatment consistent on phones. */
@media (max-width: 767px) {
    .hero-text,
    .proof-copy,
    .trust-copy,
    .social-proof-heading,
    .blog-info-heading,
    .final-cta-copy,
    .res-hero-copy,
    .res-text-block,
    .res-centered-heading,
    .res-family-card,
    .hotel-hero-copy,
    .hotel-heading,
    .hotel-impact-copy,
    .hotel-tech-copy,
    .hotel-offer-copy,
    .about-hero-content,
    .about-intro-copy,
    .about-heading,
    .about-trust-copy,
    .about-final-cta,
    .auto-hero-content,
    .auto-problem-copy,
    .auto-section-heading,
    .auto-transform,
    .auto-convenience-copy,
    .auto-final-copy {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .hero-highlight {
        color: #2F8DFF !important;
    }

    .auto-hero h1,
    .auto-hero > .auto-hero-content > p:not(.auto-microcopy),
    .auto-benefits span,
    .auto-hero-note,
    .auto-hero .auto-cta,
    .auto-microcopy,
    .auto-collection-note {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .hero-text p,
    .proof-copy p,
    .trust-copy p,
    .blog-info-heading p,
    .final-subtitle,
    .final-guarantee,
    .res-hero p,
    .res-text-block p,
    .res-family-card p,
    .hotel-hero p,
    .hotel-impact p,
    .hotel-offer-copy p,
    .about-hero p,
    .about-intro p,
    .about-trust p,
    .about-final-cta p,
    .auto-hero p,
    .auto-problem-copy p,
    .auto-convenience-copy p,
    .auto-final-copy p,
    .blog-transition {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .hero-buttons,
    .res-hero-actions {
        align-items: center;
        justify-content: center;
    }

    .proof-card,
    .testimonial-content,
    .hotel-card,
    .about-card,
    .about-step,
    .auto-service-card div,
    .auto-process article {
        text-align: center;
    }

    .proof-card {
        justify-content: center;
    }

    .res-hero-badges,
    .final-proof-list,
    .auto-benefits,
    .auto-pill-row,
    .auto-bottom-benefits {
        justify-content: center;
    }

    .res-check-list,
    .hotel-impact ul,
    .hotel-tech ul,
    .hotel-offer ul,
    .auto-problem-copy ul {
        text-align: left;
    }

    .hotel-hero,
    .hotel-hero-content {
        min-height: 480px;
    }

    .hotel-hero-content {
        align-items: center;
        padding-top: 106px;
        padding-bottom: 18px;
    }

    .hotel-hero h1 {
        font-size: 28px;
    }

    .hotel-hero p {
        font-size: 15px;
        line-height: 1.38;
        margin-bottom: 10px;
    }

    .hotel-bullets {
        gap: 6px;
        justify-items: center;
        margin-bottom: 8px;
    }

    .hotel-bullets span {
        display: inline-flex;
        align-items: center;
        font-size: 11px;
        gap: 8px;
        justify-content: center;
        padding-left: 0;
        text-align: center;
    }

    .hotel-bullets span::before {
        flex: 0 0 11px;
        height: 11px;
        position: static;
        width: 11px;
    }
}

/* Mobile-first release pass: stabilizes small screens without changing desktop. */
@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
        width: 100%;
    }

    body {
        min-width: 0;
    }

    .topo,
    .res-header {
        gap: 8px;
        min-height: 0;
        padding: 8px 14px;
        width: 100%;
    }

    .topo {
        height: auto;
        flex-wrap: wrap;
    }

    .res-header {
        flex-wrap: wrap;
    }

    .logo {
        height: 58px;
    }

    .res-logo img {
        height: 40px;
        width: auto;
    }

    .btn-topo {
        border-radius: 999px;
        flex: 0 1 auto;
        font-size: 11px;
        line-height: 1.12;
        max-width: calc(100vw - 118px);
        min-height: 34px;
        padding: 8px 11px;
        text-align: center;
        white-space: normal;
    }

    .menu,
    .res-nav {
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid rgba(10,42,67,0.08);
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 -14px;
        order: 3;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 7px 14px 2px;
        scroll-padding-inline: 14px;
        scrollbar-width: none;
        width: calc(100% + 28px);
    }

    .res-nav {
        border-top-color: rgba(255,255,255,0.12);
    }

    .menu::-webkit-scrollbar,
    .res-nav::-webkit-scrollbar {
        display: none;
    }

    .menu a,
    .res-nav a {
        flex: 0 0 auto;
        font-size: 11px;
        line-height: 1.1;
        max-width: none;
        padding: 7px 10px;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .hero,
    .res-hero,
    .hotel-hero,
    .about-hero,
    .auto-hero {
        min-height: 520px;
        overflow: hidden;
    }

    .overlay,
    .res-hero-bg,
    .hotel-hero-bg,
    .about-hero-bg,
    .auto-hero-bg {
        background-repeat: no-repeat !important;
        background-size: cover !important;
        transform: none;
    }

    .overlay {
        background-position: center top !important;
    }

    .res-hero-bg {
        background-position: 58% top !important;
    }

    .hotel-hero-bg {
        background-position: 50% top !important;
    }

    .about-hero-bg {
        background-position: 62% top !important;
    }

    .auto-hero-bg {
        background-position: center top !important;
        filter: brightness(1.04) contrast(1.02) saturate(1.02);
    }

    .hero {
        padding: 122px 14px 28px;
    }

    .hero-container,
    .res-hero-content,
    .hotel-hero-content,
    .about-hero-content,
    .auto-hero-content {
        min-height: 398px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-container {
        align-content: end;
        display: grid;
    }

    .res-hero-content,
    .hotel-hero-content,
    .about-hero-content {
        align-items: end;
        padding-top: 108px;
        padding-bottom: 24px;
    }

    .auto-hero-content {
        align-content: end;
        min-height: 520px;
        padding: 110px 14px 22px;
    }

    h1,
    .res-hero h1,
    .hotel-hero h1,
    .about-hero h1,
    .auto-hero h1 {
        font-size: clamp(27px, 8vw, 34px);
        line-height: 1.08;
        margin-bottom: 12px;
        max-width: 100%;
    }

    h2,
    .res-text-block h2,
    .res-centered-heading h2,
    .hotel-heading h2,
    .hotel-impact h2,
    .hotel-tech h2,
    .hotel-offer h2,
    .about-intro h2,
    .about-heading h2,
    .about-trust h2,
    .about-final-cta h2,
    .auto-problem-copy h2,
    .auto-section-heading h2,
    .auto-transform h2,
    .auto-convenience h2,
    .auto-final-copy h2 {
        font-size: clamp(23px, 6.7vw, 28px);
        line-height: 1.12;
    }

    .hero-text p,
    .res-hero p,
    .hotel-hero p,
    .about-hero p,
    .auto-hero p {
        font-size: 15px;
        line-height: 1.42;
        margin-bottom: 14px;
        max-width: 100%;
    }

    .btn,
    .btn-outline,
    .final-cta-button,
    .hotel-cta,
    .auto-cta {
        max-width: 100%;
        min-height: 42px;
        overflow-wrap: anywhere;
        padding: 12px 14px;
        width: 100%;
    }

    .proof-section,
    .trust-section,
    .social-proof-section,
    .blog-info-section,
    .final-cta-section,
    .res-problem,
    .res-solution,
    .res-services,
    .res-family-trigger,
    .res-final-cta,
    .hotel-pain,
    .hotel-impact,
    .hotel-tech,
    .hotel-difference,
    .hotel-offer,
    .about-intro,
    .about-trust,
    .about-values,
    .about-process,
    .about-final-cta,
    .auto-problem,
    .auto-services,
    .auto-transform,
    .auto-convenience,
    .auto-final-cta,
    .auto-bottom-benefits {
        padding-left: 14px;
        padding-right: 14px;
    }

    .result-visual,
    .result-card,
    .result-card-wide,
    .machine-cert-card,
    .final-cta-image,
    .res-image-card,
    .res-service-card,
    .hotel-impact img,
    .hotel-offer img,
    .about-intro-image,
    .about-trust-image,
    .auto-service-card,
    .auto-transform-grid img,
    .auto-convenience > img,
    .auto-final-cta img {
        border-radius: 10px;
    }

    .result-visual,
    .result-card,
    .result-card-wide {
        height: 150px;
        min-height: 0;
    }

    .result-visual img,
    .result-card img {
        height: 100%;
        min-height: 0;
        object-fit: cover;
        width: 100%;
    }

    .machine-cert-card img,
    .final-cta-image img,
    .res-image-card img,
    .res-service-card img,
    .hotel-impact img,
    .hotel-offer img,
    .about-intro-image img,
    .about-trust-image img,
    .auto-convenience > img,
    .auto-final-cta img {
        height: auto;
        max-height: 220px;
        min-height: 0;
        object-fit: cover;
        width: 100%;
    }

    .proof-card,
    .testimonial-card,
    .res-feature-row article,
    .res-service-card,
    .hotel-pain-grid article,
    .hotel-card,
    .about-card,
    .about-step,
    .auto-service-card,
    .auto-process article {
        min-height: 0;
    }

    .res-hero-badges,
    .hotel-bullets,
    .auto-benefits,
    .auto-pill-row,
    .auto-bottom-benefits {
        max-width: 100%;
        overflow: visible;
    }

    .res-hero-badges,
    .auto-pill-row,
    .auto-bottom-benefits {
        flex-wrap: wrap;
    }

    .auto-benefits {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        justify-content: center;
        margin: 12px auto 10px;
        padding-bottom: 0;
    }

    .auto-benefits span {
        flex: 1 1 calc(50% - 7px);
        font-size: 10px;
        justify-content: center;
        line-height: 1.15;
        max-width: 100%;
        min-width: 0;
        padding: 8px 9px;
        text-align: center;
        white-space: normal;
    }

    .auto-benefits span:last-child {
        flex-basis: 100%;
    }

    .auto-benefits span::before {
        flex: 0 0 18px;
        font-size: 16px;
        height: 18px;
        width: 18px;
    }
}

@media (max-width: 430px) {
    .hero,
    .res-hero,
    .hotel-hero,
    .about-hero {
        min-height: 500px;
    }

    .auto-hero,
    .auto-hero-content {
        min-height: 510px;
    }

    .btn-topo {
        max-width: calc(100vw - 104px);
    }
}

@media (max-width: 390px) {
    .logo {
        height: 50px;
    }

    .res-logo img {
        height: 36px;
    }

    .btn-topo {
        font-size: 10px;
        max-width: calc(100vw - 98px);
        padding: 7px 9px;
    }

    .hero,
    .res-hero,
    .hotel-hero,
    .about-hero {
        min-height: 485px;
    }

    .auto-hero,
    .auto-hero-content {
        min-height: 500px;
    }
}

@media (max-width: 360px) {
    .menu a,
    .res-nav a {
        font-size: 10px;
        padding: 6px 9px;
    }

    h1,
    .res-hero h1,
    .hotel-hero h1,
    .about-hero h1,
    .auto-hero h1 {
        font-size: 26px;
    }

    .auto-benefits span {
        flex-basis: 100%;
    }
}

/* Mobile hero redesign only. Header, desktop and lower sections stay untouched. */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
    }

    .hero {
        align-items: center;
        display: flex;
        min-height: 625px;
        padding: 128px 18px 28px;
    }

    .overlay {
        background:
            linear-gradient(90deg, rgba(5,18,31,0.98) 0%, rgba(5,18,31,0.93) 38%, rgba(5,18,31,0.64) 62%, rgba(5,18,31,0.24) 100%),
            linear-gradient(180deg, rgba(5,18,31,0.18) 0%, rgba(5,18,31,0.90) 100%),
            url("images/hero.png") !important;
        background-position: right center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    .hero-container {
        align-content: center;
        display: grid;
        gap: 0;
        margin: 0;
        max-width: 100%;
        min-height: 0;
        padding: 0;
        width: 100%;
    }

    .hero-text {
        margin: 0;
        max-width: 560px;
        text-align: left !important;
        width: min(100%, 560px);
    }

    .tag {
        font-size: 11px;
        letter-spacing: 1.6px;
        line-height: 1.2;
        margin-bottom: 14px;
    }

    .hero h1 {
        font-size: clamp(28px, 5.4vw, 32px);
        line-height: 1.05;
        margin-bottom: 13px;
        max-width: 570px;
        text-align: left;
        text-wrap: balance;
    }

    .hero-highlight {
        color: #2F8DFF !important;
    }

    .hero-text p {
        color: rgba(255,255,255,0.88);
        font-size: clamp(14px, 3.6vw, 16px);
        line-height: 1.48;
        margin-bottom: 18px;
        max-width: 500px;
        text-align: left;
    }

    .hero-copy-desktop,
    .cta-desktop-label {
        display: none;
    }

    .hero-copy-mobile {
        display: block;
    }

    .cta-mobile-label {
        display: inline;
    }

    .hero-buttons {
        align-items: stretch !important;
        display: grid;
        gap: 11px;
        justify-content: stretch !important;
        margin-bottom: 16px;
        width: 100%;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline {
        align-items: center;
        border-radius: 12px;
        display: flex;
        font-size: 15px;
        justify-content: center;
        min-height: 46px;
        padding: 12px 16px;
        text-align: center;
        width: 100%;
    }

    .hero-buttons .btn-outline {
        background: rgba(255,255,255,0.06);
        border-color: rgba(255,255,255,0.58);
    }

    .hero-benefits {
        display: grid;
        gap: 9px 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 520px;
        width: 100%;
    }

    .hero-benefits > span {
        align-items: center;
        color: rgba(255,255,255,0.9);
        display: flex;
        font-size: 12px;
        font-weight: 700;
        gap: 7px;
        line-height: 1.25;
        min-width: 0;
    }

    .hero-benefits .benefit-icon {
        align-items: center;
        background: rgba(47,141,255,0.2);
        border: 1px solid rgba(88,166,255,0.44);
        border-radius: 999px;
        color: #8FC4FF;
        display: inline-flex;
        flex: 0 0 18px;
        font-size: 11px;
        height: 18px;
        justify-content: center;
        width: 18px;
    }

    .hero-image {
        display: none !important;
    }

    .mobile-family-bridge {
        background: linear-gradient(180deg, #071B2C 0%, #F5F8FC 100%);
        display: block;
        padding: 0 18px 22px;
    }

    .mobile-family-bridge img {
        aspect-ratio: 16 / 10;
        border-radius: 14px;
        box-shadow: 0 18px 32px rgba(7,27,44,0.16);
        display: block;
        height: auto;
        object-fit: cover;
        object-position: center;
        width: 100%;
    }
}

@media (max-width: 430px) {
    .hero {
        min-height: 625px;
        padding-inline: 16px;
    }

    .overlay {
        background:
            linear-gradient(90deg, rgba(5,18,31,0.99) 0%, rgba(5,18,31,0.95) 42%, rgba(5,18,31,0.72) 70%, rgba(5,18,31,0.38) 100%),
            linear-gradient(180deg, rgba(5,18,31,0.20) 0%, rgba(5,18,31,0.92) 100%),
            url("images/hero.png") !important;
        background-position: 72% center !important;
    }

    .hero h1 {
        font-size: clamp(28px, 7.6vw, 32px);
    }
}

@media (min-width: 520px) and (max-width: 768px) {
    .hero-benefits {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hero-benefits > span {
        font-size: 11px;
        gap: 6px;
    }
}

@media (max-width: 360px) {
    .hero {
        min-height: 615px;
    }

    .hero-benefits {
        grid-template-columns: 1fr;
    }
}

/* Clean hero mobile layout supplied for the first fold. */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
    }

    main > .hero {
        display: none !important;
    }

    .clean-hero-mobile {
        background-image: url("images/hero.png");
        background-position: 72% center;
        background-repeat: no-repeat;
        background-size: cover;
        color: #ffffff;
        display: block;
        min-height: 760px;
        overflow: hidden;
        padding: 150px 20px 0;
        position: relative;
        width: 100%;
    }

    .clean-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3, 22, 36, 0.98) 0%,
                rgba(3, 22, 36, 0.9) 42%,
                rgba(3, 22, 36, 0.58) 72%,
                rgba(3, 22, 36, 0.25) 100%
            ),
            linear-gradient(
                180deg,
                rgba(3, 22, 36, 0.1) 0%,
                rgba(3, 22, 36, 0.82) 100%
            );
        inset: 0;
        position: absolute;
        z-index: 1;
    }

    .clean-hero-content {
        max-width: 640px;
        position: relative;
        z-index: 2;
    }

    .clean-hero-label {
        color: #2d8cff;
        display: block;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 4px;
        margin-bottom: 18px;
    }

    .clean-hero-content h1 {
        color: #ffffff;
        font-size: 42px;
        font-weight: 900;
        line-height: 1.1;
        margin: 0;
    }

    .clean-hero-content h1 strong {
        color: #2484ff;
        display: block;
    }

    .clean-hero-content p {
        color: rgba(255, 255, 255, 0.9);
        font-size: 19px;
        line-height: 1.55;
        margin: 24px 0 0;
        max-width: 560px;
    }

    .clean-hero-buttons {
        display: grid;
        gap: 14px;
        grid-template-columns: 1fr;
        margin-top: 34px;
    }

    .clean-hero-buttons a {
        align-items: center;
        border-radius: 14px;
        display: flex;
        font-size: 18px;
        font-weight: 800;
        justify-content: center;
        min-height: 58px;
        text-decoration: none;
    }

    .clean-hero-buttons .btn-primary {
        background: linear-gradient(135deg, #0069ff, #3fa2ff);
        box-shadow: 0 14px 35px rgba(0, 105, 255, 0.35);
        color: #ffffff;
    }

    .clean-hero-buttons .btn-secondary {
        background: rgba(255, 255, 255, 0.04);
        border: 1.5px solid rgba(255, 255, 255, 0.75);
        color: #ffffff;
    }

    .clean-hero-benefits {
        color: #ffffff;
        display: grid;
        font-size: 15px;
        font-weight: 700;
        gap: 14px 18px;
        grid-template-columns: 1fr 1fr;
        margin-top: 34px;
    }

    .clean-family-image {
        display: block;
        margin-top: -180px;
        position: relative;
        width: 100%;
        z-index: 3;
    }

    .clean-family-image img {
        display: block;
        height: auto;
        object-fit: cover;
        width: 100%;
    }
}

@media (min-width: 640px) and (max-width: 768px) {
    .clean-hero-mobile {
        padding-top: 160px;
    }

    .clean-hero-buttons {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .clean-hero-benefits {
        grid-template-columns: repeat(4, auto);
        gap: 18px;
    }
}

@media (max-width: 430px) {
    .clean-hero-mobile {
        background-position: 78% center;
        min-height: 720px;
        padding: 150px 18px 0;
    }

    .clean-hero-label {
        font-size: 13px;
        letter-spacing: 3px;
    }

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

    .clean-hero-content p {
        font-size: 17px;
        line-height: 1.5;
    }

    .clean-hero-buttons a {
        font-size: 18px;
        min-height: 58px;
    }

    .clean-family-image {
        margin-top: -145px;
    }
}

@media (max-width: 768px) {
    .testimonial-card:first-child .testimonial-photo {
        height: auto;
        object-fit: contain;
        object-position: center center;
    }

    .testimonial-card:nth-child(2) .testimonial-photo {
        height: 210px !important;
        object-fit: cover !important;
        object-position: center 68% !important;
    }
}

@media (max-width: 768px) {
    .residences-page .res-hero {
        min-height: 590px;
    }

    .residences-page .res-hero-bg {
        background:
            linear-gradient(180deg, rgba(5,17,28,0.22) 0%, rgba(5,17,28,0.38) 34%, rgba(5,17,28,0.92) 100%),
            url("images/residencias-hero-familia.png") !important;
        background-position: 58% 34% !important;
        background-size: cover !important;
    }

    .residences-page .res-hero-content {
        align-items: flex-start;
        min-height: 590px;
        padding: 16px 20px 28px;
    }

    .residences-page .res-hero-copy {
        margin: 0 auto;
        max-width: 560px;
        text-align: center !important;
    }

    .residences-page .res-hero h1 {
        font-size: clamp(26px, 5vw, 32px);
        line-height: 1.03;
        margin-left: auto;
        margin-right: auto;
        max-width: 560px;
        text-align: center;
        text-shadow: 0 3px 18px rgba(5,17,28,0.42);
    }

    .residences-page .res-hero p {
        font-size: 16px;
        line-height: 1.45;
        margin-top: 320px;
        margin-left: auto;
        margin-right: auto;
        max-width: 480px;
        text-align: center;
    }

    .residences-page .res-hero-actions,
    .residences-page .res-hero-badges {
        margin-left: auto;
        margin-right: auto;
        max-width: 520px;
    }

    .residences-page .res-hero-badges {
        justify-content: center;
    }
}

@media (max-width: 430px) {
    .residences-page .res-hero {
        min-height: 560px;
    }

    .residences-page .res-hero-bg {
        background-position: 60% 34% !important;
    }

    .residences-page .res-hero-content {
        min-height: 560px;
        padding: 18px 18px 24px;
    }

    .residences-page .res-hero h1 {
        font-size: 25px;
        max-width: 360px;
    }

    .residences-page .res-hero p {
        margin-top: 300px;
    }
}

@media (max-width: 768px) {
    .residences-page .res-solution .res-image-card img {
        aspect-ratio: auto;
        height: auto;
        object-fit: contain;
        object-position: center top;
    }
}

@media (max-width: 768px) {
    .hotels-page .hotel-hero {
        min-height: 590px;
    }

    .hotels-page .hotel-hero-bg {
        background:
            linear-gradient(180deg, rgba(5,17,28,0.18) 0%, rgba(5,17,28,0.42) 38%, rgba(5,17,28,0.94) 100%),
            url("images/hoteis-hero-quarto-zoom.png") !important;
        background-position: 52% top !important;
        background-size: cover !important;
    }

    .hotels-page .hotel-hero-content {
        align-items: flex-start;
        min-height: 590px;
        padding: 60px 20px 28px;
    }

    .hotels-page .hotel-hero-copy {
        margin: 0 auto;
        max-width: 620px;
        text-align: center !important;
    }

    .hotels-page .hotel-hero h1 {
        font-size: clamp(30px, 6vw, 38px);
        line-height: 1.04;
        margin-left: auto;
        margin-right: auto;
        max-width: 580px;
        text-align: center;
        text-shadow: 0 3px 18px rgba(5,17,28,0.48);
    }

    .hotels-page .hotel-hero p {
        font-size: 16px;
        line-height: 1.45;
        margin-top: 150px;
        margin-left: auto;
        margin-right: auto;
        max-width: 540px;
        text-align: center;
    }

    .hotels-page .hotel-bullets {
        justify-items: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 560px;
    }

    .hotels-page .hotel-cta {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 430px) {
    .hotels-page .hotel-hero {
        min-height: 560px;
    }

    .hotels-page .hotel-hero-content {
        min-height: 560px;
        padding: 48px 18px 24px;
    }

    .hotels-page .hotel-hero h1 {
        font-size: 28px;
        max-width: 370px;
    }

    .hotels-page .hotel-hero p {
        margin-top: 132px;
    }
}

/* Final mobile cleanup: fixes duplicated home hero, repeating backgrounds and heavy white gaps. */
@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
        width: 100vw !important;
    }

    .clean-hero-mobile,
    .clean-family-image,
    .mobile-family-bridge {
        display: none !important;
    }

    .topo,
    .res-header {
        background:
            radial-gradient(circle at 76% 8%, rgba(47,141,255,0.22), transparent 32%),
            linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,252,255,0.98));
    }

    .res-header {
        background:
            radial-gradient(circle at 74% 0%, rgba(47,141,255,0.24), transparent 34%),
            linear-gradient(180deg, #061625 0%, #071B2C 100%);
    }

    .autos-page .res-header {
        background:
            radial-gradient(circle at 76% 0%, rgba(120,216,76,0.22), transparent 34%),
            linear-gradient(180deg, #061625 0%, #071B2C 100%);
        border-bottom: 1px solid rgba(255,255,255,0.12);
        position: sticky;
        top: 0;
    }

    .menu,
    .res-nav {
        scroll-snap-type: x proximity;
    }

    main > .hero {
        align-items: center;
        background: #071B2C;
        display: flex !important;
        min-height: 620px;
        overflow: hidden;
        padding: 138px 18px 30px;
    }

    .overlay {
        background:
            radial-gradient(circle at 88% 24%, rgba(47,141,255,0.2), transparent 34%),
            linear-gradient(90deg, rgba(5,17,28,0.98) 0%, rgba(5,17,28,0.92) 46%, rgba(5,17,28,0.68) 72%, rgba(5,17,28,0.44) 100%),
            linear-gradient(180deg, rgba(5,17,28,0.1) 0%, rgba(5,17,28,0.94) 100%),
            url("images/hero.png") !important;
        background-position: 72% center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    .hero-container {
        align-content: center;
        display: grid;
        grid-template-columns: 1fr;
        margin: 0;
        max-width: 100%;
        min-height: 0;
        padding: 0;
        width: 100%;
    }

    .hero-text {
        margin: 0;
        max-width: 560px;
        text-align: left !important;
        width: 100%;
    }

    .hero .tag {
        display: block;
        font-size: 11px;
        letter-spacing: 1.5px;
        line-height: 1.2;
        margin: 0 0 14px;
    }

    .hero h1 {
        color: #FFFFFF;
        font-size: clamp(29px, 8vw, 36px);
        line-height: 1.06;
        margin: 0 0 14px;
        max-width: 100%;
        text-align: left !important;
    }

    .hero-highlight {
        color: #2F8DFF !important;
    }

    .hero-copy-desktop,
    .cta-desktop-label {
        display: none !important;
    }

    .hero-copy-mobile {
        display: block !important;
    }

    .cta-mobile-label {
        display: inline !important;
    }

    .hero-text p {
        color: rgba(255,255,255,0.88);
        font-size: 16px;
        line-height: 1.48;
        margin: 0 0 18px;
        max-width: 520px;
        text-align: left !important;
    }

    .hero-buttons {
        align-items: stretch !important;
        display: grid !important;
        gap: 11px;
        margin: 0 0 15px;
        width: 100%;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline {
        align-items: center;
        border-radius: 14px;
        display: flex;
        font-size: 16px;
        justify-content: center;
        min-height: 50px;
        padding: 12px 16px;
        text-align: center;
        width: 100%;
    }

    .hero-benefits {
        display: grid !important;
        gap: 9px 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
        max-width: 520px;
        width: 100%;
    }

    .hero-benefits > span {
        align-items: center;
        color: rgba(255,255,255,0.92);
        display: flex;
        font-size: 12px;
        font-weight: 800;
        gap: 7px;
        line-height: 1.22;
        min-width: 0;
    }

    .hero-image {
        display: none !important;
    }

    .proof-section,
    .trust-section,
    .social-proof-section,
    .blog-info-section,
    .final-cta-section,
    .res-problem,
    .res-solution,
    .res-services,
    .hotel-pain,
    .hotel-impact,
    .hotel-difference,
    .hotel-offer,
    .about-intro,
    .about-trust,
    .about-values,
    .about-process,
    .about-final-cta,
    .auto-problem,
    .auto-services,
    .auto-transform,
    .auto-convenience,
    .auto-final-cta,
    .auto-bottom-benefits {
        background:
            radial-gradient(circle at 92% 0%, rgba(47,141,255,0.13), transparent 34%),
            radial-gradient(circle at 4% 18%, rgba(71,210,84,0.08), transparent 30%),
            linear-gradient(180deg, #F7FBFF 0%, #EFF6FC 100%);
    }

    .res-family-trigger,
    .hotel-tech {
        background:
            radial-gradient(circle at 80% 10%, rgba(47,141,255,0.18), transparent 36%),
            linear-gradient(180deg, #071B2C 0%, #0A2A43 100%);
    }

    .res-hero-bg,
    .hotel-hero-bg,
    .about-hero-bg,
    .auto-hero-bg {
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    .residences-page .res-hero,
    .hotels-page .hotel-hero,
    .about-hero {
        min-height: 640px;
    }

    .residences-page .res-hero-bg {
        background-position: 58% center !important;
    }

    .hotels-page .hotel-hero-bg {
        background-position: 50% center !important;
    }

    .about-hero-bg {
        background-position: 60% center !important;
    }

    .residences-page .res-hero-content,
    .hotels-page .hotel-hero-content,
    .about-hero-content {
        align-items: stretch;
        min-height: 640px;
        padding: 28px 18px 28px;
    }

    .residences-page .res-hero-copy,
    .hotels-page .hotel-hero-copy,
    .about-hero-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: 584px;
        text-align: center !important;
        width: 100%;
    }

    .residences-page .res-hero h1,
    .hotels-page .hotel-hero h1,
    .about-hero h1 {
        font-size: clamp(30px, 8.5vw, 40px);
        line-height: 1.06;
        margin: 0 auto;
        max-width: 680px;
        text-align: center !important;
    }

    .residences-page .res-hero p {
        font-size: 17px;
        line-height: 1.45;
        margin: auto auto 18px;
        max-width: 560px;
        text-align: center !important;
    }

    .residences-page .res-hero-actions,
    .residences-page .res-hero-badges {
        margin-left: auto;
        margin-right: auto;
        max-width: 560px;
        width: 100%;
    }

    .residences-page .res-hero-badges {
        justify-content: center;
    }

    .hotels-page .hotel-hero p {
        font-size: 17px;
        line-height: 1.45;
        margin: auto auto 18px;
        max-width: 590px;
        text-align: center !important;
    }

    .hotels-page .hotel-bullets {
        justify-items: center;
        margin: 0 auto 18px;
        max-width: 590px;
    }

    .hotels-page .hotel-cta {
        margin-left: auto;
        margin-right: auto;
    }

    .about-hero p {
        font-size: 17px;
        line-height: 1.45;
        margin: auto auto 22px;
        max-width: 590px;
        text-align: center !important;
    }

    .residences-page .res-solution .res-image-card,
    .testimonial-card:first-child {
        overflow: hidden;
    }

    .residences-page .res-solution .res-image-card {
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .residences-page .res-solution .res-image-card img,
    .testimonial-card:first-child .testimonial-photo {
        aspect-ratio: 16 / 10;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center top !important;
        width: 100%;
    }

    .residences-page .res-solution .res-image-card img {
        border-radius: 15% !important;
    }
}

@media (max-width: 430px) {
    main > .hero {
        min-height: 640px;
        padding: 136px 16px 28px;
    }

    .hero h1 {
        font-size: clamp(30px, 9vw, 36px);
    }

    .hero-text p {
        font-size: 16px;
    }

    .residences-page .res-hero,
    .hotels-page .hotel-hero,
    .about-hero {
        min-height: 660px;
    }

    .residences-page .res-hero-content,
    .hotels-page .hotel-hero-content,
    .about-hero-content {
        min-height: 660px;
        padding: 24px 16px 26px;
    }

    .residences-page .res-hero-copy,
    .hotels-page .hotel-hero-copy,
    .about-hero-content {
        min-height: 610px;
    }

    .residences-page .res-hero h1,
    .hotels-page .hotel-hero h1,
    .about-hero h1 {
        font-size: clamp(31px, 10vw, 39px);
    }

    .residences-page .res-hero p,
    .hotels-page .hotel-hero p,
    .about-hero p {
        font-size: 16px;
    }
}

/* Final mobile overflow guard. */
@media (max-width: 768px) {
    body * {
        min-width: 0;
    }

    main,
    header,
    footer,
    section {
        max-width: 100vw;
        overflow-x: hidden;
        width: 100vw;
    }

    h1,
    h2,
    h3,
    p,
    a,
    li,
    span,
    strong,
    small {
        overflow-wrap: anywhere !important;
        text-wrap: auto !important;
    }

    .topo,
    .res-header {
        align-items: center;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        padding: 8px 14px;
    }

    .logo-area,
    .res-logo {
        min-width: 0;
    }

    .logo {
        height: 46px;
    }

    .res-logo img {
        height: 38px;
    }

    .topo .btn-topo,
    .res-header .btn-topo,
    .autos-page .btn-topo {
        display: none !important;
        flex: 0 1 auto;
        font-size: 0 !important;
        justify-self: end;
        line-height: 1.15;
        max-width: 112px !important;
        min-height: 34px;
        overflow: visible;
        padding: 8px 10px;
        text-align: center;
        white-space: normal !important;
        width: 112px !important;
    }

    .topo .btn-topo::after,
    .res-header .btn-topo::after,
    .autos-page .btn-topo::after {
        content: "Orçamento";
        font-size: 11px;
        font-weight: 800;
    }

    .menu,
    .res-nav {
        grid-column: 1 / -1;
        margin: 0 !important;
        padding: 8px 0 2px !important;
        width: 100% !important;
    }

    main > .hero {
        padding-top: 128px;
    }

    .hero h1 {
        font-size: clamp(24px, 6.4vw, 27px);
        max-width: 300px;
    }

    .mobile-hero-break {
        display: block;
    }

    .hero-text p,
    .hero-buttons,
    .hero-benefits {
        max-width: 300px;
    }

    .hero-text,
    .proof-copy,
    .trust-copy,
    .social-proof-heading,
    .blog-info-heading,
    .final-cta-copy,
    .res-text-block,
    .res-centered-heading,
    .hotel-heading,
    .hotel-impact-copy,
    .hotel-offer-copy,
    .about-intro-copy,
    .about-heading,
    .auto-problem-copy,
    .auto-section-heading,
    .auto-final-copy {
        margin-left: auto;
        margin-right: auto;
        max-width: 300px;
        overflow-x: hidden;
        width: 100%;
    }

    .hero-text p {
        font-size: 14.5px;
        max-width: 270px;
    }

    .hero-benefits {
        grid-template-columns: 1fr !important;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline {
        white-space: normal;
    }

    .proof-container,
    .trust-container,
    .social-proof-container,
    .blog-info-container,
    .final-cta-container,
    .res-section-grid,
    .hotel-pain-grid,
    .hotel-impact,
    .hotel-difference-grid,
    .hotel-offer,
    .about-intro-grid,
    .about-trust-grid,
    .about-values-grid,
    .about-process-grid,
    .auto-problem-grid,
    .auto-service-grid,
    .auto-transform-grid,
    .auto-convenience,
    .auto-final-cta {
        margin-left: auto;
        margin-right: auto;
        max-width: 300px;
        overflow-x: hidden;
    }

    h2,
    .proof-copy h2,
    .social-proof-heading h2,
    .blog-info-heading h2,
    .final-cta-copy h2,
    .res-text-block h2,
    .res-centered-heading h2,
    .hotel-heading h2,
    .about-intro h2,
    .auto-problem-copy h2,
    .auto-section-heading h2,
    .auto-transform h2 {
        font-size: clamp(22px, 6vw, 25px);
        margin-left: auto;
        margin-right: auto;
        max-width: 300px;
    }

    .residences-page .res-hero h1,
    .hotels-page .hotel-hero h1,
    .about-hero h1,
    .auto-hero h1 {
        font-size: clamp(26px, 7.4vw, 31px);
        max-width: 300px;
    }

    .residences-page .res-hero p,
    .hotels-page .hotel-hero p,
    .about-hero p,
    .auto-hero p {
        max-width: 270px;
    }

    .proof-copy p,
    .trust-copy p,
    .final-cta-copy p,
    .res-text-block p,
    .hotel-impact-copy p,
    .hotel-offer-copy p,
    .about-intro-copy p,
    .auto-problem-copy p,
    .auto-final-copy p {
        max-width: 270px;
    }

    .auto-benefits {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .res-hero-badges,
    .hotel-bullets {
        display: grid !important;
        grid-template-columns: 1fr;
        margin-left: auto;
        margin-right: auto;
        max-width: 300px;
        width: 100%;
    }

    .auto-benefits span,
    .res-hero-badges span,
    .hotel-bullets span,
    .proof-card p {
        max-width: 100%;
        white-space: normal !important;
    }

    .auto-problem,
    .auto-transform,
    .auto-bottom-benefits {
        background:
            radial-gradient(circle at 78% 10%, rgba(120,216,76,0.14), transparent 35%),
            linear-gradient(180deg, #071B2C 0%, #061725 100%) !important;
    }
}

@media (max-width: 430px) {
    .hero h1 {
        font-size: clamp(25px, 7vw, 28px);
    }

    .residences-page .res-hero h1,
    .hotels-page .hotel-hero h1,
    .about-hero h1,
    .auto-hero h1 {
        font-size: clamp(26px, 7.8vw, 31px);
    }
}

/* Mobile contrast repair: keeps the light Clean Frades gradients readable. */
@media (max-width: 768px) {
    .js-motion .fade-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .trust-section,
    .final-cta-section,
    .hotel-difference,
    .about-intro,
    .about-trust,
    .about-values,
    .about-final-cta {
        background:
            radial-gradient(circle at 88% 0%, rgba(47,141,255,0.16), transparent 36%),
            radial-gradient(circle at 0% 16%, rgba(71,210,84,0.10), transparent 32%),
            linear-gradient(180deg, #F8FCFF 0%, #ECF5FC 100%) !important;
        color: #071B2C !important;
    }

    .trust-section h2,
    .trust-section h3,
    .trust-section p,
    .trust-section li,
    .trust-section span,
    .final-cta-section h2,
    .final-cta-section h3,
    .final-cta-section p,
    .final-cta-section li,
    .final-cta-section span,
    .hotel-difference h2,
    .hotel-difference h3,
    .hotel-difference p,
    .hotel-difference li,
    .hotel-difference span,
    .about-intro h2,
    .about-intro h3,
    .about-intro p,
    .about-intro li,
    .about-intro span,
    .about-trust h2,
    .about-trust h3,
    .about-trust p,
    .about-trust li,
    .about-trust span,
    .about-values h2,
    .about-values h3,
    .about-values p,
    .about-values li,
    .about-values span,
    .about-final-cta h2,
    .about-final-cta h3,
    .about-final-cta p,
    .about-final-cta li,
    .about-final-cta span {
        color: #071B2C !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    .trust-section .section-tag,
    .final-cta-section .section-tag,
    .hotel-difference .section-tag,
    .about-intro .section-tag,
    .about-trust .section-tag,
    .about-values .section-tag,
    .about-final-cta .section-tag {
        color: #1D6FF2 !important;
    }

    .final-proof-list span,
    .hotel-difference-grid article,
    .about-card,
    .about-trust-list span {
        background: rgba(255,255,255,0.82) !important;
        border: 1px solid rgba(7,27,44,0.10) !important;
        box-shadow: 0 16px 36px rgba(7,27,44,0.08) !important;
        color: #071B2C !important;
    }

    .about-value-grid,
    .about-values-grid {
        max-width: 300px !important;
        overflow: visible !important;
        width: 100% !important;
    }

    .about-card,
    .about-trust-list span,
    .hotel-card,
    .auto-service-card {
        box-sizing: border-box;
        max-width: 100% !important;
        overflow: visible !important;
        width: 100% !important;
    }

    .about-card p,
    .about-step p,
    .hotel-card p,
    .auto-service-card p {
        overflow-wrap: break-word !important;
        text-wrap: auto !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    .hotel-tech,
    .about-process,
    .auto-services,
    .auto-convenience,
    .auto-final-cta {
        background:
            radial-gradient(circle at 82% 4%, rgba(47,141,255,0.22), transparent 36%),
            radial-gradient(circle at 8% 12%, rgba(71,210,84,0.12), transparent 30%),
            linear-gradient(180deg, #071B2C 0%, #061725 100%) !important;
        color: #FFFFFF !important;
    }

    .hotel-tech h2,
    .hotel-tech h3,
    .hotel-tech p,
    .hotel-tech li,
    .hotel-tech span,
    .about-process h2,
    .about-process h3,
    .about-process p,
    .about-process li,
    .about-process span,
    .auto-convenience h2,
    .auto-convenience h3,
    .auto-convenience p,
    .auto-convenience li,
    .auto-convenience span,
    .auto-final-cta h2,
    .auto-final-cta h3,
    .auto-final-cta p,
    .auto-final-cta li,
    .auto-final-cta span {
        color: #FFFFFF !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    .hotel-tech .section-tag,
    .about-process .section-tag {
        color: #58A6FF !important;
    }

    .auto-convenience h2 strong,
    .auto-final-copy h2 strong {
        color: #78D84C !important;
    }

    .auto-services h2,
    .auto-services h3,
    .auto-services p,
    .auto-services li,
    .auto-services span {
        color: #FFFFFF !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    .auto-services .section-tag {
        color: #58A6FF !important;
    }

    .about-step,
    .auto-service-card,
    .auto-process article {
        background: rgba(255,255,255,0.08) !important;
        border: 1px solid rgba(255,255,255,0.16) !important;
        color: #FFFFFF !important;
    }

    .about-step h3,
    .about-step p,
    .auto-process article,
    .auto-process article strong,
    .auto-process article span {
        color: #FFFFFF !important;
        opacity: 1 !important;
    }

    .auto-service-card h3,
    .auto-service-card p {
        color: #FFFFFF !important;
        opacity: 1 !important;
    }

    .proof-card {
        align-items: center;
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr);
        justify-content: stretch !important;
        overflow: visible !important;
        width: 100%;
    }

    .proof-card p {
        font-size: 13.5px !important;
        line-height: 1.28 !important;
        overflow-wrap: break-word !important;
        text-align: left !important;
        word-break: normal !important;
    }

    .auto-convenience > img,
    .auto-final-cta img {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Home mobile first fold cleanup: a calmer hero with details moved below. */
@media (max-width: 768px) {
    main > .hero {
        align-items: flex-end !important;
        min-height: 560px !important;
        padding: 132px 18px 28px !important;
    }

    main > .hero .overlay {
        background:
            radial-gradient(circle at 78% 18%, rgba(47,141,255,0.12), transparent 34%),
            linear-gradient(180deg, rgba(5,17,28,0.08) 0%, rgba(5,17,28,0.48) 42%, rgba(5,17,28,0.96) 100%),
            linear-gradient(90deg, rgba(5,17,28,0.78) 0%, rgba(5,17,28,0.46) 48%, rgba(5,17,28,0.16) 100%),
            url("images/hero.png") !important;
        background-position: 66% center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    main > .hero .hero-container {
        align-items: end !important;
        display: grid !important;
        min-height: 390px;
    }

    main > .hero .hero-text {
        margin: 0 auto !important;
        max-width: 320px !important;
        text-align: center !important;
    }

    .home-hero-title-desktop,
    main > .hero .hero-copy-desktop,
    main > .hero .hero-benefits,
    main > .hero .btn-outline {
        display: none !important;
    }

    .home-hero-title-mobile,
    main > .hero .hero-copy-mobile {
        display: block !important;
    }

    main > .hero .tag {
        display: none !important;
        font-size: 12px !important;
        letter-spacing: 3px !important;
        margin: 0 auto 14px !important;
        text-align: center !important;
    }

    main > .hero h1 {
        font-size: clamp(29px, 8.3vw, 38px) !important;
        line-height: 1.05 !important;
        margin: 0 auto !important;
        max-width: 350px !important;
        text-align: center !important;
    }

    main > .hero .hero-copy-mobile {
        color: rgba(255,255,255,0.88) !important;
        font-size: 14.5px !important;
        line-height: 1.42 !important;
        margin: 16px auto 0 !important;
        max-width: 330px !important;
        text-align: center !important;
    }

    main > .hero .hero-buttons {
        display: grid !important;
        margin: 22px auto 0 !important;
        max-width: 300px !important;
        width: 100% !important;
    }

    main > .hero .hero-buttons .btn {
        min-height: 54px !important;
        width: 100% !important;
    }

    .home-mobile-summary {
        background:
            radial-gradient(circle at 86% 8%, rgba(47,141,255,0.34), transparent 38%),
            radial-gradient(circle at 0% 12%, rgba(71,210,84,0.16), transparent 34%),
            linear-gradient(180deg, #F4FBFF 0%, #DDEFFF 100%);
        display: block !important;
        padding: 34px 14px 38px;
    }

    .home-mobile-summary-card {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.92), rgba(239,248,255,0.88)),
            radial-gradient(circle at 88% 0%, rgba(47,141,255,0.16), transparent 34%);
        border: 1.5px solid rgba(29,111,242,0.26);
        border-radius: 12px;
        box-shadow:
            0 20px 48px rgba(29,111,242,0.16),
            inset 0 1px 0 rgba(255,255,255,0.95);
        color: #071B2C;
        margin: 0 auto;
        max-width: 330px;
        padding: 24px 18px;
        text-align: center;
    }

    .home-mobile-summary .section-tag {
        color: #1D6FF2 !important;
        display: block;
        font-size: 12px;
        letter-spacing: 2.5px;
        margin-bottom: 12px;
    }

    .home-mobile-summary h2 {
        color: #071B2C !important;
        font-size: 24px !important;
        line-height: 1.12 !important;
        margin: 0 auto 14px !important;
        max-width: 290px !important;
    }

    .home-mobile-summary p {
        color: #32465A !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin: 0 auto 12px !important;
        max-width: 285px;
    }

    .home-mobile-summary p + p {
        margin-bottom: 20px !important;
    }

    .home-mobile-summary-benefits {
        display: grid;
        gap: 10px;
        margin: 0 auto 20px;
        max-width: 285px;
    }

    .home-mobile-summary-benefits span {
        align-items: center;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.98), rgba(231,243,255,0.86));
        border: 1.4px solid rgba(29,111,242,0.24);
        border-radius: 999px;
        color: #071B2C !important;
        display: flex;
        font-size: 13px;
        font-weight: 900;
        gap: 9px;
        justify-content: flex-start;
        min-height: 40px;
        padding: 8px 14px;
        box-shadow: 0 10px 24px rgba(29,111,242,0.08);
        text-align: left;
    }

    .home-mobile-summary-benefits span::before {
        align-items: center;
        background: linear-gradient(135deg, #1D6FF2 0%, #58A6FF 100%);
        border-radius: 999px;
        color: #FFFFFF;
        content: "✓";
        display: inline-flex;
        flex: 0 0 22px;
        font-size: 15px;
        height: 22px;
        justify-content: center;
        width: 22px;
    }

    .home-mobile-summary-link {
        color: #1D6FF2 !important;
        display: inline-flex;
        font-size: 14px;
        font-weight: 900;
        text-decoration: none;
    }

    .trust-section .section-tag {
        background: rgba(29,111,242,0.10);
        border: 1.5px solid rgba(29,111,242,0.34);
        border-radius: 999px;
        color: #1D6FF2 !important;
        display: inline-flex !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        justify-content: center;
        letter-spacing: 2.6px !important;
        line-height: 1.1;
        margin-bottom: 18px !important;
        padding: 8px 12px;
        text-align: center;
        text-shadow: none;
    }
}

@media (max-width: 430px) {
    main > .hero {
        min-height: 540px !important;
        padding-top: 126px !important;
    }

    main > .hero h1 {
        font-size: clamp(28px, 8.1vw, 34px) !important;
    }
}

/* Mobile automobile hero framing: keep the full family, especially the father, visible. */
@media (max-width: 768px) {
    .autos-page .auto-hero {
        min-height: 620px !important;
    }

    .autos-page .auto-hero-bg {
        background-position: 76% 38px !important;
        background-size: auto 62% !important;
        filter: brightness(1.1) contrast(1.03) saturate(1.04) !important;
    }

    .autos-page .auto-hero::before {
        background:
            linear-gradient(180deg, rgba(5,17,28,0.14) 0%, rgba(5,17,28,0.18) 30%, rgba(5,17,28,0.76) 58%, rgba(5,17,28,0.98) 100%),
            linear-gradient(90deg, rgba(5,17,28,0.52) 0%, rgba(5,17,28,0.18) 42%, rgba(5,17,28,0.10) 100%) !important;
    }

    .autos-page .auto-hero-content {
        align-content: start !important;
        min-height: 620px !important;
        padding: 68px 14px 24px !important;
    }

    .autos-page .auto-hero h1 {
        font-size: clamp(25px, 7.2vw, 30px) !important;
        line-height: 1.03 !important;
        margin: 0 auto 9px !important;
        max-width: 356px !important;
        text-align: center !important;
        text-shadow: 0 10px 28px rgba(0,0,0,0.42);
    }

    .autos-page .auto-hero p {
        font-size: 14.5px !important;
        line-height: 1.35 !important;
        margin: 0 auto 10px !important;
        max-width: 300px !important;
        text-align: center !important;
        text-shadow: 0 8px 22px rgba(0,0,0,0.44);
    }

    .autos-page .auto-benefits {
        margin-top: 318px !important;
    }
}

@media (max-width: 430px) {
    .autos-page .auto-hero-bg {
        background-position: 78% 40px !important;
        background-size: auto 60% !important;
    }

    .autos-page .auto-benefits {
        margin-top: 306px !important;
    }
}

/* Mobile automobile hero final: image first, copy below, no text over family faces. */
@media (max-width: 768px) {
    .autos-page .auto-hero {
        background:
            radial-gradient(circle at 78% 0%, rgba(120,216,76,0.14), transparent 34%),
            linear-gradient(180deg, #061725 0%, #020911 100%) !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .autos-page .auto-hero-bg {
        background-color: #061725 !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        filter: brightness(1.03) contrast(1.03) saturate(1.04) !important;
        flex: 0 0 auto !important;
        height: 250px !important;
        inset: auto !important;
        order: 1 !important;
        position: relative !important;
        width: 100% !important;
        z-index: 1 !important;
    }

    .autos-page .auto-hero::before,
    .autos-page .auto-hero::after {
        display: none !important;
    }

    .autos-page .auto-hero-content {
        background:
            radial-gradient(circle at 50% 0%, rgba(120,216,76,0.13), transparent 30%),
            linear-gradient(180deg, rgba(5,17,28,0.96) 0%, #061725 100%) !important;
        box-sizing: border-box !important;
        display: grid !important;
        margin: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        order: 2 !important;
        padding: 26px 14px 34px !important;
        position: relative !important;
        width: 100% !important;
        z-index: 2 !important;
    }

    .autos-page .auto-hero h1 {
        font-size: clamp(31px, 8.8vw, 38px) !important;
        line-height: 1.04 !important;
        margin: 0 auto 14px !important;
        max-width: 300px !important;
        text-align: center !important;
    }

    .autos-page .auto-hero p {
        font-size: 17px !important;
        line-height: 1.4 !important;
        margin: 0 auto 20px !important;
        max-width: 290px !important;
        overflow-wrap: normal !important;
        text-align: center !important;
        width: 100% !important;
    }

    .autos-page .auto-hero p strong {
        display: block !important;
    }

    .autos-page .auto-benefits {
        display: grid !important;
        gap: 10px !important;
        grid-template-columns: 1fr !important;
        margin: 0 auto 18px !important;
        max-width: 290px !important;
        width: 100% !important;
    }

    .autos-page .auto-benefits span {
        align-items: center !important;
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(120,216,76,0.34) !important;
        border-radius: 999px !important;
        display: flex !important;
        font-size: 12px !important;
        justify-content: center !important;
        min-height: 46px !important;
        padding: 10px 14px !important;
        width: 100% !important;
    }

    .autos-page .auto-hero-note {
        font-size: 13px !important;
        margin: 0 auto 20px !important;
        max-width: 290px !important;
        text-align: center !important;
    }

    .autos-page .auto-hero .auto-cta {
        margin: 0 auto !important;
        max-width: 290px !important;
        width: 100% !important;
    }

    .autos-page .auto-microcopy {
        margin-top: 22px !important;
    }
}

@media (max-width: 430px) {
    .autos-page .auto-hero-bg {
        height: 232px !important;
    }

    .autos-page .auto-hero-content {
        padding-top: 24px !important;
    }
}

/* Production mobile hardening: one visual source per hero, stable Hostinger rendering. */
@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

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

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    .clean-hero-mobile,
    .clean-family-image,
    .mobile-family-bridge {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    main > .hero {
        display: flex !important;
        min-height: 540px !important;
        overflow: hidden !important;
    }

    main > .hero .hero-image {
        display: none !important;
    }

    main > .hero .overlay {
        background:
            radial-gradient(circle at 78% 18%, rgba(47,141,255,0.12), transparent 34%),
            linear-gradient(180deg, rgba(5,17,28,0.08) 0%, rgba(5,17,28,0.48) 42%, rgba(5,17,28,0.96) 100%),
            linear-gradient(90deg, rgba(5,17,28,0.78) 0%, rgba(5,17,28,0.46) 48%, rgba(5,17,28,0.16) 100%),
            url("images/hero.png") !important;
        background-position: 66% center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    main > .hero .tag,
    main > .hero .hero-benefits,
    main > .hero .btn-outline,
    main > .hero .hero-copy-desktop,
    main > .hero .home-hero-title-desktop {
        display: none !important;
    }

    main > .hero .hero-copy-mobile,
    main > .hero .home-hero-title-mobile {
        display: block !important;
    }

    main > .hero .hero-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    main > .hero .hero-text {
        margin: 0 auto !important;
        max-width: 320px !important;
        text-align: center !important;
        width: 100% !important;
    }

    main > .hero h1,
    main > .hero p {
        text-align: center !important;
    }

    .home-mobile-summary {
        display: block !important;
    }

    .res-hero-bg,
    .hotel-hero-bg,
    .about-hero-bg,
    .auto-hero-bg {
        background-repeat: no-repeat !important;
    }

    .residences-page .res-hero-bg,
    .hotels-page .hotel-hero-bg,
    .about-hero-bg {
        background-size: cover !important;
    }

    .residences-page .res-hero,
    .hotels-page .hotel-hero,
    .about-hero {
        overflow: hidden !important;
    }

    .autos-page .auto-hero {
        background:
            radial-gradient(circle at 78% 0%, rgba(120,216,76,0.14), transparent 34%),
            linear-gradient(180deg, #061725 0%, #020911 100%) !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .autos-page .auto-hero-bg {
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        flex: 0 0 auto !important;
        height: 250px !important;
        inset: auto !important;
        order: 1 !important;
        position: relative !important;
        width: 100% !important;
    }

    .autos-page .auto-hero::before,
    .autos-page .auto-hero::after {
        display: none !important;
    }

    .autos-page .auto-hero-content {
        display: grid !important;
        min-height: 0 !important;
        order: 2 !important;
        position: relative !important;
    }

    .about-hero-content {
        justify-content: flex-start !important;
        padding-top: clamp(96px, 20vw, 138px) !important;
    }

    .about-hero .section-tag {
        font-size: clamp(13px, 3vw, 16px) !important;
        letter-spacing: 2.8px !important;
        margin: 0 auto 14px !important;
    }

    .about-hero h1 {
        font-size: clamp(36px, 9.4vw, 52px) !important;
        line-height: 1.04 !important;
        max-width: min(92vw, 640px) !important;
    }

    .about-hero p {
        margin: auto auto 22px !important;
    }
}

@media (min-width: 769px) {
    .mobile-only,
    .home-mobile-summary,
    .clean-hero-mobile,
    .clean-family-image,
    .mobile-family-bridge {
        display: none !important;
    }

    .desktop-only {
        display: block !important;
    }
}