/* =========================================================
   DR. LUIS LEÓN — VCARD
   Mobile First · Premium Edition
   ========================================================= */


/* ---------- Variables ---------- */

:root {
    --background: #f4f1eb;
    --background-secondary: #ebe7df;

    --text: #25332f;
    --text-soft: #65706c;

    --card: rgba(255, 255, 255, 0.72);
    --card-hover: rgba(255, 255, 255, 0.96);

    --border: rgba(66, 76, 70, 0.13);
    --border-hover: rgba(179, 154, 112, 0.32);

    --accent: #b39a70;
    --accent-dark: #927b57;
    --accent-light: #d4b87f;

    --shadow:
        0 10px 35px rgba(43, 49, 45, 0.07);
    --shadow-hover:
        0 18px 50px rgba(43, 49, 45, 0.12);
    --shadow-card:
        0 25px 80px rgba(43, 49, 45, 0.10);

    --radius: 22px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------- Reset ---------- */

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


html {
    min-height: 100%;
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(179, 154, 112, 0.16),
            transparent 42%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(37, 51, 47, 0.05),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            var(--background),
            var(--background-secondary)
        );

    background-attachment: fixed;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    overflow-x: hidden;
}


/* ---------- Main ---------- */

.vcard {
    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        max(46px, env(safe-area-inset-top))
        22px
        max(30px, env(safe-area-inset-bottom));

    position: relative;
}


/* ---------- Animated background orbs ---------- */

.orb {
    position: fixed;

    border-radius: 50%;

    filter: blur(48px);

    pointer-events: none;

    z-index: 0;

    animation: float 18s var(--ease) infinite alternate;
}


.orb--1 {
    width: 320px;
    height: 320px;

    top: -140px;
    right: -120px;

    background:
        radial-gradient(
            circle,
            rgba(179, 154, 112, 0.42),
            transparent 70%
        );

    animation-delay: 0s;
}


.orb--2 {
    width: 260px;
    height: 260px;

    bottom: -130px;
    left: -120px;

    background:
        radial-gradient(
            circle,
            rgba(37, 51, 47, 0.18),
            transparent 70%
        );

    animation-delay: -6s;
    animation-duration: 22s;
}


.orb--3 {
    width: 200px;
    height: 200px;

    top: 40%;
    left: -100px;

    background:
        radial-gradient(
            circle,
            rgba(212, 184, 127, 0.22),
            transparent 70%
        );

    animation-delay: -10s;
    animation-duration: 26s;
}


@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(20px, -30px) scale(1.08);
    }
    100% {
        transform: translate(-15px, 25px) scale(0.96);
    }
}


/* ---------- Profile ---------- */

.profile {
    width: 100%;
    max-width: 420px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    position: relative;
    z-index: 1;

    animation: rise 900ms var(--ease) both;
}


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


/* ---------- Logo ---------- */

.logo-wrapper {
    width: min(180px, 46vw);
    height: min(180px, 46vw);

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

    margin-bottom: 28px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255, 255, 255, 0.85),
            rgba(255, 255, 255, 0.45)
        );

    border:
        1px solid rgba(179, 154, 112, 0.22);

    box-shadow:
        0 14px 45px rgba(43, 49, 45, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);

    overflow: hidden;

    position: relative;
}


/* Rotating gold ring around the logo */

.logo-ring {
    position: absolute;
    inset: -6px;

    border-radius: 50%;

    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(179, 154, 112, 0.55) 90deg,
        transparent 180deg,
        rgba(212, 184, 127, 0.45) 270deg,
        transparent 360deg
    );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 2px),
            #000 calc(100% - 1px)
        );
    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 2px),
            #000 calc(100% - 1px)
        );

    animation: spin 9s linear infinite;

    pointer-events: none;
}


@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


.logo {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    position: relative;
    z-index: 1;
}


/* ---------- Name ---------- */

h1 {
    font-family:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(34px, 9vw, 48px);

    font-weight: 600;

    letter-spacing: -0.8px;

    line-height: 1.05;

    color: var(--text);

    background: linear-gradient(
        180deg,
        #2c3a36 0%,
        #3a4a45 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* ---------- Specialty ---------- */

.specialty {
    margin-top: 10px;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--accent-dark);
}


/* ---------- Divider ---------- */

.divider {
    display: block;

    width: 48px;
    height: 2px;

    margin-top: 22px;

    border-radius: 2px;

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


/* ---------- Links ---------- */

.links {
    width: 100%;
    max-width: 420px;

    display: flex;
    flex-direction: column;

    gap: 14px;

    margin-top: 38px;

    position: relative;
    z-index: 1;
}


/* Staggered entrance for each link */

.social-link {
    animation: rise 700ms var(--ease) both;
}

.social-link:nth-child(1) { animation-delay: 150ms; }
.social-link:nth-child(2) { animation-delay: 250ms; }
.social-link:nth-child(3) { animation-delay: 350ms; }
.social-link:nth-child(4) { animation-delay: 450ms; }


/* ---------- Link card ---------- */

.social-link {
    min-height: 70px;

    display: flex;
    align-items: center;

    padding: 0 20px;

    text-decoration: none;

    color: var(--text);

    background:
        var(--card);

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(14px) saturate(140%);

    -webkit-backdrop-filter:
        blur(14px) saturate(140%);

    position: relative;

    overflow: hidden;

    transition:
        transform 220ms var(--ease),
        background 220ms var(--ease),
        border-color 220ms var(--ease),
        box-shadow 220ms var(--ease);
}


/* Gradient sheen that follows hover */

.social-link::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 70%
    );

    opacity: 0;

    transform: translateX(-100%);

    transition:
        opacity 220ms var(--ease),
        transform 700ms var(--ease);

    pointer-events: none;
}


/* Brand-colored left accent that appears on hover */

.social-link::after {
    content: "";

    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;

    width: 3px;

    border-radius: 0 3px 3px 0;

    background: linear-gradient(
        180deg,
        var(--brand, var(--accent)),
        var(--brand-3, var(--accent-dark))
    );

    transform: scaleY(0);
    transform-origin: center;

    transition: transform 260ms var(--ease);

    pointer-events: none;
}


/* ---------- Icon ---------- */

.icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    margin-right: 15px;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(179, 154, 112, 0.14),
            rgba(179, 154, 112, 0.06)
        );

    color: var(--accent-dark);

    transition:
        background 260ms var(--ease),
        color 260ms var(--ease),
        transform 260ms var(--ease);
}


.icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Facebook and WhatsApp icons are filled glyphs */

.facebook-icon svg,
.whatsapp-icon svg {
    fill: currentColor;
    stroke: none;
}


/* ---------- Link text ---------- */

.link-text {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 1px;
}


.link-title {
    font-size: 16px;

    font-weight: 600;

    letter-spacing: 0.1px;

    color: var(--text);
}


.link-sub {
    font-size: 12.5px;

    font-weight: 500;

    letter-spacing: 0.2px;

    color: var(--text-soft);
}


/* ---------- Arrow ---------- */

.arrow {
    flex: 0 0 auto;

    width: 26px;
    height: 26px;

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

    margin-left: 10px;

    color: var(--accent-dark);

    transition:
        transform 220ms var(--ease),
        color 220ms var(--ease);
}


.arrow svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------- Hover ---------- */

@media (hover: hover) {

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

        background:
            var(--card-hover);

        border-color:
            var(--border-hover);

        box-shadow:
            var(--shadow-hover);
    }


    .social-link:hover::before {
        opacity: 1;
        transform: translateX(100%);
    }


    .social-link:hover::after {
        transform: scaleY(1);
    }


    .social-link:hover .icon {
        color: #fff;

        background: linear-gradient(
            145deg,
            var(--brand, var(--accent)),
            var(--brand-3, var(--accent-dark))
        );

        transform: scale(1.06) rotate(-3deg);

        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.12);
    }


    .social-link:hover .arrow {
        transform: translateX(4px);

        color: var(--brand, var(--accent-dark));
    }
}


/* ---------- Touch ---------- */

.social-link:active {
    transform: scale(0.985);
}


/* ---------- Focus ---------- */

.social-link:focus-visible {
    outline:
        2px solid var(--accent);

    outline-offset:
        3px;
}


/* ---------- Footer ---------- */

footer {
    margin-top: auto;
    padding-top: 44px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    text-align: center;

    position: relative;
    z-index: 1;

    animation: rise 900ms var(--ease) 500ms both;
}


.footer-mark {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 0 4px rgba(179, 154, 112, 0.18);
}


footer span:last-child {
    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2.4px;

    text-transform: uppercase;

    color: rgba(37, 51, 47, 0.5);
}


/* ---------- Tablets ---------- */

@media (min-width: 600px) {

    .vcard {
        padding-top: 72px;
        padding-bottom: 42px;
    }

    .logo-wrapper {
        width: 196px;
        height: 196px;
    }

    .links {
        margin-top: 46px;
    }
}


/* ---------- Desktop ---------- */

@media (min-width: 900px) {

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

        padding: 30px;
    }

    .vcard {
        min-height: 0;

        width: 100%;
        max-width: 560px;

        padding:
            58px 52px 44px;

        border:
            1px solid rgba(66, 76, 70, 0.08);

        border-radius: 34px;

        background:
            rgba(244, 241, 235, 0.78);

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

        backdrop-filter:
            blur(20px) saturate(140%);

        -webkit-backdrop-filter:
            blur(20px) saturate(140%);

        overflow: hidden;
    }

    .links {
        max-width: 100%;
    }
}


/* ---------- Reduced motion ---------- */

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

    html {
        scroll-behavior: auto;
    }

    .orb,
    .logo-ring {
        animation: none;
    }

    .profile,
    .social-link,
    footer {
        animation: none;
    }

    .social-link,
    .arrow,
    .icon {
        transition: none;
    }
}