/* ============================================================
   LINK 360 — Marianna Balbi · Nutricionista
   Variáveis de marca + estilos específicos deste cliente
   Base compartilhada: ../../shared/core.js
   ============================================================ */

/* ─── TOKENS DE MARCA ─── */
:root {
    --nude:  #C9A88A;
    --terra: #8B6A52;
    --off:   #F5F0EB;
    --dark:  #1C1A19;
    --muted: #7A6E68;
    --card:  #FFFFFF;
    --ease:  cubic-bezier(0.16,1,0.3,1);
}

/* ─── DARK MODE ─── */
body.dark {
    --off:   #1C1A19;
    --dark:  #F5F0EB;
    --muted: #A89888;
    --card:  #252220;
}

/* ─── RESET MÍNIMO ─── */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
img { -webkit-user-drag: none; user-select: none; }
html { scroll-behavior: smooth; }

body {
    background: var(--off);
    color: var(--dark);
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden;
    user-select: none;
    transition: background .5s var(--ease), color .5s var(--ease);
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--off); }
::-webkit-scrollbar-thumb { background: var(--nude); border-radius: 10px; }

/* ─── THEME TOGGLE ─── */
#theme-btn {
    position: fixed;
    top: .9rem; right: .9rem;
    z-index: 1100;
    width: 38px; height: 38px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid rgba(201,168,138,.25);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(28,26,25,.1);
    transition: all .4s var(--ease);
    color: var(--nude);
    font-size: .9rem;
}
#theme-btn:hover { border-color: var(--nude); transform: rotate(15deg) scale(1.08); }
body.dark #theme-btn { background: #252220; border-color: rgba(201,168,138,.3); }
.hidden-btn { opacity: 0 !important; pointer-events: none !important; transform: translateY(-10px) !important; }

/* ─── MUSIC BTN ─── */
#music-btn {
    position: fixed;
    top: 3.4rem; right: .9rem;
    z-index: 1100;
    width: 38px; height: 38px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid rgba(201,168,138,.25);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(28,26,25,.1);
    transition: all .4s var(--ease);
    color: var(--nude);
    font-size: .85rem;
}
#music-btn:hover { border-color: var(--nude); transform: scale(1.08); }
body.dark #music-btn { background: #252220; border-color: rgba(201,168,138,.3); }
#music-btn.playing {
    animation: pulse-music 2.5s infinite var(--ease);
    border-color: var(--nude);
}
@keyframes pulse-music {
    0%, 100% { box-shadow: 0 4px 16px rgba(28,26,25,.1); }
    50%       { box-shadow: 0 4px 20px rgba(201,168,138,.45); }
}

/* ─── PLAY SOM VÍDEO ─── */
.btn-ativar-som {
    position: absolute;
    top: .75rem; left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex; align-items: center; gap: .45rem;
    padding: .55rem 1.1rem;
    background: var(--nude);
    color: #fff; border: none; border-radius: 2rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    cursor: pointer;
    animation: pulse-som 2s ease-in-out infinite;
    box-shadow: 0 4px 18px rgba(201,168,138,.5);
    transition: background .2s, transform .2s;
    white-space: nowrap;
}
.btn-ativar-som:hover { background: var(--terra); transform: translateX(-50%) scale(1.04); }
@keyframes pulse-som {
    0%, 100% { box-shadow: 0 4px 18px rgba(201,168,138,.5); }
    50%       { box-shadow: 0 4px 28px rgba(201,168,138,.85); }
}

/* ─── HERO ─── */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(28,26,25,.08) 0%, transparent 30%, rgba(28,26,25,.5) 65%, rgba(28,26,25,.92) 100%);
    z-index: 1;
    transition: background .5s var(--ease);
}
body:not(.dark) .hero::after {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 40%, rgba(255,255,255,.6) 75%, var(--off) 100%);
}
body.dark .hero::after {
    background: linear-gradient(to bottom, rgba(28,26,25,0) 0%, rgba(28,26,25,.15) 30%, rgba(28,26,25,.75) 65%, var(--off) 100%);
}

.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; }
.hero-content { position: relative; z-index: 2; transition: color .5s var(--ease); }

body:not(.dark) .hero-content h1,
body:not(.dark) .hero-content p { color: #4A3728 !important; text-shadow: 0 1px 12px rgba(255,255,255,.8) !important; }
body:not(.dark) .hero-content .pill { background: rgba(201,168,138,.1); border-color: rgba(201,168,138,.2); color: #4A3728 !important; }

.font-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; text-transform: uppercase; letter-spacing: .08em; }

/* ─── PILL ─── */
.pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(201,168,138,.15);
    border: 1px solid rgba(201,168,138,.35);
    border-radius: 999px;
    padding: .28rem .8rem;
    font-size: .6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .15em;
    color: var(--nude);
    backdrop-filter: blur(6px);
}

/* ─── LINK CARD ─── */
.link-card {
    display: flex; align-items: center; gap: 1rem;
    background: var(--card);
    border-radius: 1.5rem;
    padding: 1.8rem 1.25rem;
    border: 1px solid rgba(201,168,138,.12);
    box-shadow: 0 2px 12px rgba(28,26,25,.06);
    transition: all .35s var(--ease);
    text-decoration: none;
    color: var(--dark);
    position: relative; overflow: hidden;
    cursor: pointer;
}
.link-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(201,168,138,.22); border-color: var(--nude); }
.link-card:active { transform: scale(.98); }
body.dark .link-card { background: #252220; border-color: rgba(201,168,138,.15); }

.lc-icon {
    width: 40px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 1.85rem;
    color: var(--nude);
}
.lc-label { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); margin-bottom: 2px; }
.lc-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; line-height: 1; color: var(--dark); }
body.dark .lc-title { color: var(--dark); }
.lc-arrow { margin-left: auto; color: var(--nude); font-size: .72rem; opacity: .55; transition: all .3s var(--ease); }
.link-card:hover .lc-arrow { opacity: 1; transform: translateX(3px); }

/* ─── CARD PREMIUM ─── */
.card-premium {
    background: linear-gradient(135deg, #C9A88A 0%, #8B6A52 60%, #6b5040 100%) !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(139,106,82,.3) !important;
}
.card-premium:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 40px rgba(139,106,82,.5) !important;
    border-color: transparent !important;
}
body.dark .card-premium { filter: brightness(.92); }
.card-premium .lc-icon { background: transparent !important; backdrop-filter: none !important; }
.card-premium .lc-icon i { color: #fff !important; }
.card-premium .lc-title { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,.18); }
.card-premium .lc-label { color: rgba(255,255,255,.65) !important; }
.card-premium .lc-arrow { color: rgba(255,255,255,.7) !important; opacity: 1 !important; }
.card-premium:hover .lc-arrow { color: #fff !important; transform: translateX(3px); }
.card-premium::before {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 55%);
    pointer-events: none;
}

/* ─── SEÇÃO ─── */
.eyebrow { font-size: .6rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--nude); margin-bottom: .35rem; }
.sec-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.2rem,8vw,3rem); line-height: .92; color: var(--dark); margin-bottom: .65rem; }
.sec-line { width: 36px; height: 2px; background: linear-gradient(90deg, var(--nude), var(--terra)); border-radius: 2px; margin-bottom: .7rem; }
.sec-sub { font-size: .77rem; color: var(--muted); line-height: 1.65; max-width: 300px; }

/* ─── REVEAL ─── */
.reveal { opacity: 0; transform: translateY(20px); transition: all .75s var(--ease); }
.reveal.on { opacity: 1; transform: translateY(0); }

/* ─── CARROSSEL 3D ─── */
.c3d-wrap {
    perspective: 1200px;
    width: 100%; height: 580px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: visible;
}
.c3d-item {
    position: absolute;
    width: 280px; aspect-ratio: 9/16;
    border-radius: 1.5rem; overflow: hidden;
    transition: all .6s cubic-bezier(.23,1,.32,1);
    cursor: pointer; background: #000;
    will-change: transform, opacity;
}
.c3d-item.active { 
    z-index: 30; 
    transform: translate3d(0,0,0) scale(1); 
    opacity: 1; 
    filter: none; 
    box-shadow: 0 20px 50px rgba(28,26,25,0.4); 
    border: 2px solid var(--nude); 
}
.c3d-item.right { 
    z-index: 20; 
    transform: translate3d(120px, 0, -150px) rotateY(-15deg) scale(0.85); 
    opacity: 0.4; 
    filter: blur(1px) brightness(0.6); 
}
.c3d-item.left { 
    z-index: 20; 
    transform: translate3d(-120px, 0, -150px) rotateY(15deg) scale(0.85); 
    opacity: 0.4; 
    filter: blur(1px) brightness(0.6); 
}
.c3d-item video { width: 100%; height: 100%; object-fit: cover; }
.c3d-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(28,26,25,0.8) 0%, transparent 60%);
    z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem;
}

@media(max-width:480px){
    .c3d-wrap { height: 520px; }
    .c3d-item { width: 240px; }
    .c3d-item.right { transform: translate3d(100px, 0, -120px) rotateY(-12deg) scale(0.8); }
    .c3d-item.left { transform: translate3d(-100px, 0, -120px) rotateY(12deg) scale(0.8); }
}

@media(max-width:360px){
    .c3d-wrap { height: 480px; }
    .c3d-item { width: 210px; }
    .c3d-item.right { transform: translate3d(85px, 0, -100px) rotateY(-10deg) scale(0.75); }
    .c3d-item.left { transform: translate3d(-85px, 0, -100px) rotateY(10deg) scale(0.75); }
}

.v-dot { width:22px; height:4px; border-radius:99px; background:rgba(201,168,138,.25); transition:all .3s var(--ease); cursor:pointer; border:none; padding:0; }
.v-dot.on { background:var(--nude); width:32px; }

/* ─── GALERIA SCROLL ─── */
.hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; overflow-x:hidden; }
.hide-scrollbar::-webkit-scrollbar { display:none; }

@keyframes scrollReverse {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
.animate-scroll-reverse {
    display: flex; width: max-content;
    animation: scrollReverse 55s linear infinite;
}
.animate-scroll-reverse:hover { animation-play-state: paused; }

.gal-card {
    width: 240px; flex-shrink: 0;
    aspect-ratio: 4/5;
    border-radius: 2rem; overflow: hidden;
    border: 1px solid rgba(201,168,138,.12);
    box-shadow: 0 8px 24px rgba(28,26,25,.12);
    position: relative; cursor: zoom-in;
}
body.dark .gal-card { border-color: rgba(201,168,138,.18); }
.gal-card img { width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.gal-card:hover img { transform: scale(1.05); }
.gal-card-overlay {
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(28,26,25,.8) 0%, rgba(28,26,25,.18) 40%, transparent 70%);
    opacity:0; transition: opacity .45s var(--ease);
    display:flex; align-items:center; justify-content:center;
}
.gal-card:hover .gal-card-overlay { opacity:1; }
.gal-expand-btn {
    width:56px; height:56px; border-radius:50%;
    background: rgba(201,168,138,.85); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.25);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.1rem;
    transform: translateY(12px);
    transition: transform .45s var(--ease);
    box-shadow: 0 0 20px rgba(0,0,0,.4);
}
.gal-card:hover .gal-expand-btn { transform: translateY(0); }

/* ─── MOSAICO ─── */
.mosaic-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); gap:.65rem; height:430px; width:100%; }
.mosaic-cell { position:relative; border-radius:1.5rem; overflow:hidden; cursor:pointer; }
.mosaic-cell img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .7s var(--ease); }
.mosaic-cell:hover img { transform:scale(1.1); }
.mosaic-hover { position:absolute; inset:0; background: linear-gradient(to top, rgba(201,168,138,.4) 0%, transparent 60%); opacity:0; transition:opacity .3s var(--ease); }
.mosaic-cell:hover .mosaic-hover { opacity:1; }

/* ─── MODAL GALERIA ─── */
.mgal-backdrop { position:fixed; inset:0; background:rgba(28,26,25,.92); z-index:5000; display:none; align-items:flex-start; justify-content:center; padding:1rem; backdrop-filter:blur(8px); overflow-y:auto; }
.mgal-backdrop.open { display:flex; }
.mgal-box { background:var(--card); border-radius:2rem; width:95%; max-width:480px; margin:auto; overflow:hidden; display:flex; flex-direction:column; position:relative; box-shadow:0 40px 80px rgba(28,26,25,.5); }
body.dark .mgal-box { background:#252220; }
.mgal-header { padding:1.25rem 1.5rem; border-bottom:1px solid rgba(201,168,138,.15); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.mgal-close { width:34px; height:34px; border-radius:50%; background:rgba(201,168,138,.12); border:none; color:var(--dark); font-size:.85rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; }
.mgal-close:hover { background:var(--nude); color:#fff; transform:rotate(90deg); }
.mgal-body { overflow-y:auto; padding:1.25rem; max-height:72vh; }
.mgal-body::-webkit-scrollbar { width:3px; }
.mgal-body::-webkit-scrollbar-thumb { background:var(--nude); border-radius:10px; }

/* ─── STAT CARD ─── */
.stat-card {
    background: rgba(201,168,138,.07);
    border: 1px solid rgba(201,168,138,.18);
    border-radius: 1.2rem; padding:1.15rem; text-align:center;
    transition: all .3s var(--ease);
}
.stat-card:hover { border-color:var(--nude); background:rgba(201,168,138,.15); }
body.dark .stat-card { background:rgba(201,168,138,.05); }

/* ─── CLÍNICA CARD ─── */
.clinica-card { border-radius:2rem; overflow:hidden; border:1px solid rgba(201,168,138,.12); }
body.dark .clinica-card { background: transparent; }

/* ─── BOTÃO SOM CLÍNICA ─── */
.clinica-som-btn {
    position: absolute;
    bottom: .75rem; right: .75rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(28,26,25,.65);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(201,168,138,.35);
    color: rgba(255,255,255,.85);
    font-size: .78rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .25s var(--ease);
    z-index: 5;
}
.clinica-som-btn:hover { background: var(--nude); border-color: var(--nude); color: #fff; transform: scale(1.08); }
.clinica-som-btn.active { background: var(--nude); border-color: var(--nude); color: #fff; animation: pulse-music 2s infinite; }

/* ─── CTA FINAL ─── */
.cta-grad { background: linear-gradient(135deg,#C9A88A 0%,#8B6A52 100%); }

/* ─── TICKER ─── */
.ticker-wrap { overflow:hidden; background:transparent; padding:.55rem 0; border-top:1px solid rgba(201,168,138,.25); }
body.dark .ticker-wrap { background:transparent; }
.ticker-inner { display:inline-flex; white-space:nowrap; gap:1.4rem; animation:ticker 55s linear infinite; font-family:'Bebas Neue',sans-serif; font-size:.72rem; letter-spacing:.12em; color:var(--nude); align-items:center; }
.t-sep { color:rgba(201,168,138,.3); }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ─── MODAL IMAGEM ─── */
.modal { position:fixed; inset:0; background:rgba(28,26,25,.92); z-index:9999; display:none; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(8px); }
.modal.open { display:flex; }
.modal-close-btn { position:fixed; top:1rem; right:1rem; z-index:10001; width:34px; height:34px; border-radius:50%; background:rgba(201,168,138,.25); border:none; color:#fff; font-size:.85rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; }
.modal-close-btn:hover { background:var(--nude); transform:rotate(90deg); }
.modal-img { max-width:95vw; max-height:88vh; object-fit:contain; border-radius:1.25rem; }

/* ─── BOTÕES ─── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; border-radius:999px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; transition:all .4s var(--ease); cursor:pointer; border:none; text-decoration:none; }
.btn-nude { background:var(--nude); color:#fff; }
.btn-nude:hover { background:var(--terra); transform:translateY(-2px); }
.btn-dark-solid { background:#1C1A19; color:#fff; }
.btn-dark-solid:hover { background:#2e2b29; transform:translateY(-2px); }
.btn-outline { background:transparent; border:1.5px solid var(--nude); color:var(--nude); }
.btn-outline:hover { background:var(--nude); color:#fff; }

/* ─── AVATAR ─── */
.avatar { width:88px; height:88px; border-radius:50%; object-fit:cover; object-position:top; border:3px solid var(--nude); box-shadow:0 0 0 4px rgba(201,168,138,.18); }

/* ─── SOBRE ─── */
.sobre-box {
    background: #1C1A19;
    border-radius: 2rem; padding: 1.5rem;
    position: relative; overflow: hidden;
    transition: all .5s var(--ease);
}
.sobre-box .sec-title { color: #F5F0EB; }
.sobre-box p { color: rgba(245,240,235,.72); }
.sobre-box strong { color: #F5F0EB; }
.sobre-box .stat-mini { background: rgba(201,168,138,.07); border: 1px solid rgba(201,168,138,.14); color: var(--nude); }
.sobre-box .stat-mini p:last-child { color: rgba(245,240,235,.45); }

body:not(.dark) .sobre-box { background: transparent; border: 1px solid var(--nude); box-shadow: none; }
body:not(.dark) .sobre-box .sec-title { color: var(--dark); }
body:not(.dark) .sobre-box p { color: var(--muted); }
body:not(.dark) .sobre-box strong { color: var(--dark); }
body:not(.dark) .sobre-box .stat-mini { background: rgba(201,168,138,.05); border-color: rgba(201,168,138,.15); }
body:not(.dark) .sobre-box .stat-mini p:last-child { color: var(--muted); }

/* ─── CLÍNICA CARD THEME ─── */
body:not(.dark) .clinica-card { background: transparent; border-color: var(--nude); }
body:not(.dark) .clinica-card .sec-title,
body:not(.dark) .clinica-card p:not(.text-white):not(.c3d-overlay p) { color: var(--dark) !important; }
body:not(.dark) .clinica-card .sec-sub { color: var(--muted) !important; }

/* ─── FOOTER THEME ─── */
footer { background: transparent; transition: all .5s var(--ease); }
body:not(.dark) footer { background: transparent !important; border-top: 1px solid rgba(201,168,138,.25) !important; }
body:not(.dark) footer p,
body:not(.dark) footer span { color: var(--dark) !important; opacity: 0.8; }
body:not(.dark) footer .font-title { color: var(--terra) !important; opacity: 1 !important; }

/* ─── SCROLL INDICATOR ─── */
.scroll-indicator {
    animation: bounce-scroll 2.5s infinite var(--ease);
}

@keyframes bounce-scroll {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); opacity: 0.5; }
    40% { transform: translateY(-10px) translateX(-50%); opacity: 0.8; }
    60% { transform: translateY(-5px) translateX(-50%); opacity: 0.6; }
}

.animate-bounce-slow {
    animation: bounce-slow 2s infinite;
}

@keyframes bounce-slow {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    60% { transform: translateY(-2px); }
}