html {
    -webkit-text-size-adjust: 100%;
}

:root {
    --earth-ivory: #fbf7ff;
    --earth-sand: #e8ddff;
    --earth-clay: #8f79c7;
    --earth-clay-dark: #6855a6;
    --earth-terracotta: #d48fa6;
    --earth-sage: #7da996;
    --earth-sage-soft: #eef8f4;
    --earth-ochre-soft: #fff3d8;
    --earth-card: #ffffff;
    --earth-card-soft: #f7f1ff;
    --earth-umber: #514568;
    --earth-ink: #332b40;
    --pastel-border: #e7dcf6;
    --pastel-muted: #71677f;
}

body {
    min-width: 320px;
    color: var(--earth-ink);
}

body.bg-gray-50,
body.bg-gray-100,
.bg-gray-50,
.bg-gray-100 {
    background-color: var(--earth-ivory) !important;
}

.bg-white,
.earth-card {
    background-color: var(--earth-card) !important;
}

.earth-card {
    border: 1px solid rgba(143, 121, 199, 0.18);
}

.earth-card .bg-gray-50,
.earth-card.bg-gray-50 {
    background-color: var(--earth-card-soft) !important;
}

.text-gray-400 { color: #9c91ad !important; }
.text-gray-500 { color: var(--pastel-muted) !important; }
.text-gray-600 { color: #5f556f !important; }
.text-gray-700 { color: #51475f !important; }
.text-gray-800,
.text-gray-900 { color: var(--earth-ink) !important; }

.border,
.border-t,
.border-b,
.border-l,
.border-r,
.border-gray-200,
.border-gray-300 {
    border-color: var(--pastel-border) !important;
}

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl {
    --tw-shadow-color: rgba(82, 69, 104, 0.13);
}

.text-blue-600,
.text-blue-700,
.text-primary-600,
.text-primary-700,
.hover\:text-blue-600:hover,
.hover\:text-blue-700:hover,
.hover\:text-primary-600:hover,
.hover\:text-primary-700:hover {
    color: var(--earth-clay-dark) !important;
}

.bg-blue-50,
.hover\:bg-blue-50:hover,
.bg-primary-50 {
    background-color: #f3efff !important;
}

.bg-blue-100,
.hover\:bg-blue-100:hover,
.bg-primary-100 {
    background-color: #e8ddff !important;
}

.text-blue-800 {
    color: #5f4f9e !important;
}

.bg-blue-600,
.bg-primary-600 {
    background-color: var(--earth-clay) !important;
    color: #ffffff !important;
}

.hover\:bg-blue-700:hover,
.hover\:bg-primary-700:hover {
    background-color: var(--earth-clay-dark) !important;
    color: #ffffff !important;
}

.border-blue-300,
.border-blue-400,
.border-blue-600,
.border-primary-500 {
    border-color: var(--earth-clay) !important;
}

.border-b-2.border-blue-600 {
    border-bottom-color: var(--earth-clay) !important;
}

.from-blue-600,
.from-primary-600 {
    --tw-gradient-from: #cfc3f4 !important;
    --tw-gradient-to: rgba(207, 195, 244, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-blue-800,
.to-primary-800 {
    --tw-gradient-to: #8f79c7 !important;
}

.focus\:ring-blue-500:focus,
.focus\:ring-primary-500:focus {
    --tw-ring-color: rgba(143, 121, 199, 0.42) !important;
}

.focus\:border-blue-500:focus,
.focus\:border-primary-500:focus {
    border-color: var(--earth-clay) !important;
}

.bg-green-50,
.hover\:bg-green-50:hover {
    background-color: var(--earth-sage-soft) !important;
}

.bg-green-100 {
    background-color: #dff3eb !important;
}

.bg-green-600 {
    background-color: var(--earth-sage) !important;
    color: #ffffff !important;
}

.hover\:bg-green-700:hover {
    background-color: #6b9885 !important;
}

.text-green-700,
.text-green-800 {
    color: #4f7d6a !important;
}

.bg-purple-100 {
    background-color: #eadfff !important;
}

.text-purple-800 {
    color: #6b58a8 !important;
}

.bg-red-50,
.hover\:bg-red-50:hover {
    background-color: #fff1f4 !important;
}

.bg-red-100 {
    background-color: #ffdfe8 !important;
}

.bg-red-500,
.bg-red-600 {
    background-color: #d97a96 !important;
    color: #ffffff !important;
}

.hover\:bg-red-600:hover,
.hover\:bg-red-700:hover {
    background-color: #c46483 !important;
}

.text-red-600,
.text-red-700,
.text-red-800 {
    color: #a64d68 !important;
}

.border-red-300 {
    border-color: #f1b7c7 !important;
}

.bg-yellow-50,
.bg-amber-50 {
    background-color: #fff8e6 !important;
}

.bg-yellow-100,
.bg-amber-100 {
    background-color: #ffefbf !important;
}

.text-yellow-700,
.text-yellow-800,
.text-amber-700,
.text-amber-800 {
    color: #8a6a24 !important;
}

.border-yellow-300,
.border-amber-300 {
    border-color: #eed48d !important;
}

.bg-gray-800 {
    background-color: var(--earth-umber) !important;
}

.hover\:bg-gray-700:hover {
    background-color: #685a82 !important;
}

footer.bg-gray-800 {
    background-color: var(--earth-umber) !important;
}

footer .text-gray-400 {
    color: var(--earth-sand) !important;
}

footer .text-gray-500 {
    color: #cfc2e6 !important;
}

footer .border-gray-700 {
    border-color: #766991 !important;
}

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

input,
select,
textarea,
button {
    max-width: 100%;
}

table {
    max-width: 100%;
}

.w-46 {
    width: 11.5rem;
    height: 11.5rem;
}

.portal-tabs {
    overflow-x: auto;
}

.portal-tab {
    white-space: nowrap;
}

.whatsapp-cta.whatsapp-cta {
    background-color: #25d366 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
    flex: 0 0 3rem;
}

.whatsapp-cta.whatsapp-cta:hover {
    background-color: #1ebe5d !important;
    color: #ffffff !important;
}

.whatsapp-inline.whatsapp-inline {
    background-color: #25d366 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.whatsapp-inline.whatsapp-inline:hover {
    background-color: #1ebe5d !important;
    color: #ffffff !important;
}

.cookie-consent-banner {
    position: fixed;
    z-index: 75;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1rem;
    background: rgba(47, 42, 36, 0.42);
    pointer-events: auto;
}

.cookie-consent-banner.hidden,
.cookie-settings-modal.hidden {
    display: none;
}

.cookie-consent-content {
    width: min(26rem, calc(100vw - 2rem));
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(154, 91, 63, 0.24);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 48px rgba(63, 45, 34, 0.18);
}

body.cookie-banner-visible {
    overflow: hidden;
}

.cookie-consent-title {
    margin: 0 0 0.25rem;
    color: var(--earth-ink, #2f2a24);
    font-size: 1rem;
    font-weight: 700;
}

.cookie-consent-text {
    margin: 0;
    color: #5f554c;
    font-size: 0.875rem;
    line-height: 1.5;
}

.cookie-consent-link {
    color: var(--earth-clay, #9a5b3f);
    font-weight: 700;
    text-decoration: underline;
}

.cookie-consent-actions,
.cookie-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: stretch;
}

.cookie-consent-actions button {
    flex: 1 1 auto;
}

.cookie-consent-primary,
.cookie-consent-secondary {
    min-height: 2.5rem;
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cookie-consent-primary {
    border: 1px solid var(--earth-clay, #9a5b3f);
    background: var(--earth-clay, #9a5b3f);
    color: #ffffff;
}

.cookie-consent-primary:hover {
    border-color: var(--earth-clay-dark, #7a432f);
    background: var(--earth-clay-dark, #7a432f);
}

.cookie-consent-secondary {
    border: 1px solid rgba(154, 91, 63, 0.42);
    background: #ffffff;
    color: var(--earth-clay-dark, #7a432f);
}

.cookie-consent-secondary:hover {
    background: var(--earth-ochre-soft, #f4ead2);
}

.cookie-settings-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(47, 42, 36, 0.58);
}

.cookie-settings-panel {
    width: min(100%, 42rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 1.25rem;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
}

.cookie-settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.cookie-settings-eyebrow {
    margin: 0 0 0.2rem;
    color: var(--earth-clay, #9a5b3f);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cookie-settings-title {
    margin: 0;
    color: var(--earth-ink, #2f2a24);
    font-size: 1.35rem;
    font-weight: 800;
}

.cookie-settings-close {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #e7dccb;
    border-radius: 999px;
    background: #ffffff;
    color: #5f554c;
    font-weight: 800;
}

.cookie-settings-intro {
    margin: 0 0 1rem;
    color: #5f554c;
    font-size: 0.9rem;
    line-height: 1.55;
}

.cookie-category-list {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cookie-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid #eadfce;
    border-radius: 0.5rem;
    background: #ffffff;
}

.cookie-category strong,
.cookie-category small {
    display: block;
}

.cookie-category strong {
    color: var(--earth-ink, #2f2a24);
    font-size: 0.95rem;
}

.cookie-category small {
    margin-top: 0.15rem;
    color: #685d53;
    font-size: 0.8rem;
    line-height: 1.4;
}

.cookie-category input {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    accent-color: var(--earth-clay, #9a5b3f);
}

.cookie-category-disabled {
    background: #fbf7ef;
}

@media (max-width: 1024px) {
    .md\:grid-cols-4,
    .md\:grid-cols-5,
    .md\:grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    body > header .max-w-full,
    .min-h-screen > header .max-w-full {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 1rem !important;
    }

    body > header h1,
    .min-h-screen > header h1 {
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
    }

    body > header button,
    .min-h-screen > header button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }

    body > .flex,
    .min-h-screen > .flex {
        flex-direction: column !important;
        width: 100%;
    }

    body > .flex > .w-64,
    body > .flex > aside.w-64,
    .min-h-screen > .flex > .w-64,
    .min-h-screen > .flex > aside.w-64 {
        min-height: auto !important;
        width: 100% !important;
        padding: 0.75rem 1rem !important;
    }

    body > .flex > .w-64 h2,
    body > .flex > aside.w-64 h2,
    .min-h-screen > .flex > .w-64 h2,
    .min-h-screen > .flex > aside.w-64 h2 {
        margin-bottom: 0.75rem !important;
    }

    body > .flex > .w-64 nav,
    body > .flex > aside.w-64 nav,
    .min-h-screen > .flex > .w-64 nav,
    .min-h-screen > .flex > aside.w-64 nav {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    body > .flex > .w-64 nav.space-y-2 > :not([hidden]) ~ :not([hidden]),
    body > .flex > aside.w-64 nav.space-y-2 > :not([hidden]) ~ :not([hidden]),
    .min-h-screen > .flex > .w-64 nav.space-y-2 > :not([hidden]) ~ :not([hidden]),
    .min-h-screen > .flex > aside.w-64 nav.space-y-2 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0 !important;
    }

    body > .flex > .w-64 nav a,
    body > .flex > aside.w-64 nav a,
    .min-h-screen > .flex > .w-64 nav a,
    .min-h-screen > .flex > aside.w-64 nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    body > .flex > .flex-1,
    body > .flex > main.flex-1,
    .min-h-screen > .flex > .flex-1,
    .min-h-screen > .flex > main.flex-1 {
        min-width: 0;
        overflow-x: hidden !important;
        padding: 1rem !important;
        width: 100%;
    }

    .text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    .text-5xl {
        font-size: 2.25rem !important;
        line-height: 2.5rem !important;
    }

    .flex.justify-between.items-center.mb-8,
    .flex.justify-between.items-start.mb-6,
    .flex.justify-between.items-start.mb-5 {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 1rem;
    }

    [class*="grid-cols-2"],
    [class*="grid-cols-3"],
    [class*="grid-cols-4"],
    [class*="grid-cols-5"],
    [class*="grid-cols-6"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    [class~="h-[22rem]"],
    [class~="h-[516px]"],
    [class~="min-h-[560px]"] {
        height: auto !important;
        min-height: auto !important;
    }

    .h-96 {
        height: 18rem !important;
    }

    .w-46 {
        width: 9rem;
        height: 9rem;
    }

    .p-8,
    .p-10 {
        padding: 1rem !important;
    }

    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-16 {
        padding-bottom: 3rem !important;
        padding-top: 3rem !important;
    }

    .gap-6,
    .gap-8 {
        gap: 1rem !important;
    }

    .flex.gap-3,
    .flex.gap-4,
    .flex.gap-6 {
        flex-wrap: wrap;
    }

    .flex.gap-4 > .flex-1,
    .flex.gap-6 > .flex-1 {
        flex-basis: 100%;
    }

    .bg-white.rounded-lg.shadow.overflow-hidden,
    .bg-white.rounded-lg.shadow-md.overflow-hidden,
    .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table.min-w-full,
    table.w-full {
        min-width: 42rem;
    }

    th,
    td {
        overflow-wrap: normal;
    }

    .fixed.inset-0 {
        padding: 0.5rem;
    }

    .fixed.inset-0 > .relative,
    .fixed.inset-0 .bg-white.rounded-lg.shadow-xl {
        margin: 0 auto !important;
        max-height: calc(100vh - 1rem);
        max-width: calc(100vw - 1rem) !important;
        overflow-y: auto;
        padding: 1rem !important;
        top: 0 !important;
    }

    .fixed.inset-0 .mt-8,
    .fixed.inset-0 .mt-12 {
        margin-top: 0 !important;
    }

    .cookie-consent-banner {
        padding: 0.75rem;
    }

    .cookie-consent-content {
        width: min(25rem, calc(100vw - 1.5rem));
        padding: 0.9rem;
    }

    .cookie-consent-actions,
    .cookie-settings-actions {
        justify-content: stretch;
    }

    .cookie-consent-actions button,
    .cookie-settings-actions button {
        flex: 1 1 100%;
    }

}

@media (max-width: 640px) {
    .sm\:flex-row {
        flex-direction: column !important;
    }

    .sm\:w-1\/4,
    .sm\:w-3\/4 {
        width: 100% !important;
    }

    .text-right {
        text-align: left !important;
    }

    .service-mobile-price {
        text-align: right !important;
    }

    .justify-end {
        justify-content: flex-start !important;
    }

    .rounded-xl,
    .rounded-lg {
        border-radius: 0.5rem !important;
    }

    section,
    article {
        scroll-margin-top: 4rem;
    }
}
