/* Tokens compartidos por las vistas públicas. */
:root {
    --ink: #19364d;
    --green: #287eae;
    --cream: #f4f7f9;
    --paper: #fff;
    --muted: #6c7c88;
    --line: #e2e9ed;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    padding-top: 4%;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

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

/* Color base; cada vista conserva su propia tipografía y composición. */
h1,
h2,
h3,
h4 {
    color: var(--ink);
}

@media (max-width: 768px) {
    body {
        padding-top: 17%;
    }
}

@media (max-width: 991px) {
    .overflow-mobile-hidden {
        overflow: hidden;
    }
}

/* Preloader odontológico compartido por las vistas públicas. */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 42%, #fff 0%, #f4fafc 54%, #e7f1f5 100%);
    transition: opacity .45s ease, visibility .45s ease;
}

.preloader.is-leaving {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.preloader-content {
    display: flex;
    width: min(90vw, 360px);
    flex-direction: column;
    align-items: center;
}

.preloader .loader-svg {
    display: block;
    width: min(78vw, 320px);
    max-width: 100%;
    height: auto;
    overflow: visible;
}

.loader-brush-motion {
    transform-box: view-box;
    transform-origin: 205px 94px;
    animation: dental-brush 1.05s ease-in-out infinite alternate;
}

.loader-sparkle {
    transform-box: fill-box;
    transform-origin: center;
}

.loader-sparkle--one {
    animation: dental-sparkle .9s ease-in-out infinite;
}

.loader-sparkle--two {
    animation: dental-sparkle 1.1s .2s ease-in-out infinite;
}

.loader-sparkle--three {
    animation: dental-sparkle .8s .35s ease-in-out infinite;
}

.preloader-caption {
    margin: 4px 0 14px;
    color: #31596d;
    font: 500 15px var(--sans);
    letter-spacing: .02em;
}

.preloader-progress {
    width: 132px;
    height: 3px;
    overflow: hidden;
    border-radius: 99px;
    background: #dcebf1;
}

.preloader-progress i {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #58a8c3, #1d7195);
    animation: dental-progress 1.35s ease-in-out infinite;
}

@keyframes dental-brush {
    from { transform: translate(-5px, 2px) rotate(-3deg); }
    to { transform: translate(6px, -1px) rotate(3deg); }
}

@keyframes dental-sparkle {
    0%, 100% { opacity: .45; transform: scale(.72); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes dental-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
    .loader-brush-motion,
    .loader-sparkle,
    .preloader-progress i {
        animation-duration: 2.5s;
    }
}

/* Estilos compartidos por el menú público. */
.navbar {
    position: sticky;
    z-index: 20;
    top: 0;
    padding: 1px 0;
    border-bottom: 1px solid rgba(219, 229, 235, .7);
    background: #F4F7F9;
    backdrop-filter: blur(16px);
}

.navbar.scrolled {
    z-index: 1030;
    border-bottom-color: #cfe1e9;
    box-shadow: 0 4px 20px rgba(25, 54, 77, .12);
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font: 500 25px var(--serif);
    letter-spacing: -.06em;
}

.brand img {
    width: 104px;
    height: 76px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.navbar .nav-link {
    position: relative;
    margin: 0 10px;
    color: #5c7180;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color .3s ease;
}

.navbar .nav-link:hover {
    color: var(--green);
}