@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap');

:root{

--bg:#F7F3EE;
--white:#FFFFFF;

--text:#2C2824;
--muted:#8A8177;

--gold:#B68B52;
--gold-dark:#9F7540;

--border:#E8E0D7;

--shadow:
0 20px 60px rgba(0,0,0,.06);

}

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

body{

font-family:Inter,sans-serif;

background:var(--bg);

color:var(--text);

}

a{
text-decoration:none;
}

button{
cursor:pointer;
font-family:inherit;
}

input,
textarea,
select{

width:100%;

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

background:white;

padding:16px 18px;

border-radius:14px;

font-size:15px;

font-family:inherit;

}

input:focus,
textarea:focus,
select:focus{

outline:none;

border-color:var(--gold);

}

button{

border:none;

background:var(--gold);

color:white;

padding:16px 24px;

border-radius:14px;

font-weight:600;

transition:.25s;

}

button:hover{

background:var(--gold-dark);

}

small{

text-transform:uppercase;

letter-spacing:.28em;

color:var(--gold);

font-size:11px;

}

h1,
h2,
h3{

font-family:
"Cormorant Garamond",
serif;

font-weight:400;

}

/* ================================================= */
/* LOGIN */
/* ================================================= */

.login-page{

min-height:100vh;

background:#F7F3EE;

}

.login-layout{

min-height:100vh;

display:grid;

grid-template-columns:60% 40%;

}

.login-visual{

position:relative;

background-image:
url("../assets/images/login-bg.png");

background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}

.login-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
rgba(20,20,20,.12),
rgba(20,20,20,.12)
);

}

.login-brand{

position:absolute;

left:80px;

bottom:80px;

z-index:2;

max-width:540px;

color:white;

}

.brand-kicker{

display:block;

margin-bottom:18px;

letter-spacing:.35em;

font-size:12px;

}

.login-brand h2{

font-size:68px;

line-height:1;

margin-bottom:20px;

}

.login-brand p{

font-size:18px;

line-height:1.8;

}

.login-panel{

display:flex;

align-items:center;

justify-content:center;

padding:80px;

background:#F7F3EE;

}

.login-card{

width:100%;

max-width:420px;

}

.login-card h1{

font-size:76px;

line-height:.9;

margin:10px 0 20px;

}

.login-subtitle{

color:var(--muted);

line-height:1.8;

margin-bottom:30px;

}

.login-card form{

display:flex;

flex-direction:column;

gap:16px;

}

/* ================================================= */
/* CRM */
/* ================================================= */

.crm-shell{

display:grid;

grid-template-columns:
280px
1fr;

min-height:100vh;

}

.crm-sidebar{

background:white;

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

padding:40px 30px;

display:flex;

flex-direction:column;

}

.sidebar-brand{

display:flex;

gap:18px;

align-items:center;

margin-bottom:40px;

}

.brand-symbol{

width:50px;
height:50px;

border-radius:50%;

display:flex;

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

background:#F6EFE6;

color:var(--gold);

font-size:20px;

}

.sidebar-divider{

height:1px;

background:var(--border);

margin-bottom:30px;

}

.menu-label{

display:block;

font-size:11px;

letter-spacing:.25em;

margin-bottom:14px;

color:var(--muted);

}

.menu-item{

display:block;

padding:14px 18px;

border-radius:14px;

color:var(--text);

transition:.25s;

cursor:pointer;

position:relative;

}

.menu-item:hover{

background:#F8F4EF;

padding-left:24px;

}

.menu-item.active{

background:#F8F4EF;

padding-left:24px;

font-weight:600;

}

.menu-item.active::before{

content:"";

position:absolute;

left:10px;

top:50%;

transform:translateY(-50%);

width:6px;

height:6px;

border-radius:50%;

background:var(--gold);

}

.sidebar-footer{

margin-top:auto;

}

.sidebar-footer button{

width:100%;

}

.crm-main{

padding:50px;

}

.crm-topbar{

margin-bottom:35px;

}

.crm-topbar h1{

font-size:72px;

line-height:.9;

margin-top:10px;

}

.hero-panel{

background:white;

border-radius:28px;

padding:40px;

box-shadow:var(--shadow);

margin-bottom:30px;

}

.hero-eyebrow{

display:block;

margin-bottom:14px;

color:var(--gold);

letter-spacing:.25em;

font-size:11px;

text-transform:uppercase;

}

.hero-panel h2{

font-size:44px;

max-width:800px;

margin-bottom:14px;

}

.hero-panel p{

max-width:760px;

line-height:1.8;

color:var(--muted);

}

.stats-grid{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:20px;

margin-bottom:30px;

}

.metric-card{

background:white;

border-radius:24px;

padding:24px;

box-shadow:var(--shadow);

}

.metric-label{

display:block;

color:var(--muted);

margin-bottom:12px;

}

.metric-number{

font-size:38px;

font-weight:600;

}

.crm-toolbar{

margin-bottom:25px;

}

.search-wrapper input{

max-width:420px;

}

.table-card{

background:white;

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow);

}

.table-header{

display:grid;

grid-template-columns:2fr 1fr 1fr;

padding:24px 30px;

font-size:12px;

letter-spacing:.25em;

color:var(--gold);

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

}

#leads{

display:flex;

flex-direction:column;

}

.lead-row{

display:grid;

grid-template-columns:2fr 1fr 1fr;

align-items:center;

padding:22px 30px;

border-top:1px solid #F1EBE4;

color:var(--text);

transition:.2s;

background:white;

}

.lead-row:hover{

background:#FAF7F3;

}

.lead-row div:first-child{

font-weight:600;

}

.empty-state{

padding:40px;

text-align:center;

color:var(--muted);

}

/* ================================================= */
/* REPRESENTANTE */
/* ================================================= */

.rep-container{

width:min(1200px,92%);

margin:auto;

padding:50px 0;

}

.back-link{

display:inline-block;

margin-bottom:30px;

color:var(--gold);

}

.rep-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.rep-header h1{

font-size:68px;

}

.whatsapp-button{

background:#25D366;

color:white;

padding:14px 20px;

border-radius:14px;

}

.card{

background:white;

border-radius:24px;

padding:30px;

box-shadow:var(--shadow);

margin-bottom:24px;

}

.card h2{

margin-bottom:20px;

font-size:34px;

}

.card h3{

margin:20px 0 12px;

font-size:28px;

}

.card p{

margin-bottom:12px;

line-height:1.7;

}

#save,
#save-interaction{

margin-top:20px;

}

.timeline-item{

padding:18px;

border-left:
3px solid var(--gold);

background:#FAF7F3;

margin-bottom:12px;

border-radius:0 14px 14px 0;

}

.timeline-item p{

margin-top:8px;

}

/* ================================================= */
/* RESPONSIVO */
/* ================================================= */

@media(max-width:1200px){

.stats-grid{

grid-template-columns:
repeat(2,1fr);

}

.login-layout{

grid-template-columns:1fr;

}

.login-visual{

min-height:500px;

}

}

@media(max-width:900px){

.crm-shell{

grid-template-columns:1fr;

}

.crm-main{

padding:30px;

}

.rep-header{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

}

@media(max-width:768px){

.login-brand{

left:40px;

right:40px;

bottom:40px;

}

.login-brand h2{

font-size:46px;

}

.login-panel{

padding:40px 30px;

}

.login-card h1{

font-size:56px;

}

.stats-grid{

grid-template-columns:1fr;

}

}

/* ================================================= */
/* CATÁLOGO */
/* ================================================= */

#products-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(280px,1fr));

gap:24px;

}

.product-card{

background:white;

border-radius:24px;

padding:24px;

box-shadow:var(--shadow);

}

.product-card h3{

font-size:30px;

margin-bottom:12px;

}

.product-card p{

color:var(--muted);

margin-bottom:8px;

}

.product-card strong{

display:block;

margin-top:16px;

font-size:18px;

color:var(--gold);

}

#products-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fill,minmax(320px,1fr));
    gap:24px;
}

.product-card h3{
    margin-bottom:12px;
}

.product-card p{
    margin-bottom:10px;
}