# /*

LÁGRIMA NEGRA TATTOO STUDIO
PALETA:
#000000
#FFFFFF
#F50000
=======

*/

:root{


--primary:#f50000;
--primary-hover:#c40000;

--black:#000000;
--dark:#0d0d0d;
--dark-2:#141414;
--dark-3:#1b1b1b;

--white:#ffffff;
--gray:#b8b8b8;
--border:#232323;

--transition:.3s ease;


}

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

html{
scroll-behavior:smooth;
}

body{


background:#000;
color:#fff;

font-family:'Inter',sans-serif;

overflow-x:hidden;


}

img{
max-width:100%;
}

a{
text-decoration:none;
}

section{
padding:100px 0;
}

.container{
position:relative;
z-index:2;
}

/* ==========================
TIPOGRAFIA
========================== */

h1,h2,h3,h4,h5,h6{


font-family:'Oswald',sans-serif;
font-weight:700;
letter-spacing:.5px;


}

h1{


font-size:4rem;
line-height:1.1;


}

h2{


font-size:3rem;
margin-bottom:20px;


}

p{


color:var(--gray);
line-height:1.8;


}

.section-header{


margin-bottom:60px;


}

.section-tag{


display:inline-block;

color:var(--primary);

font-weight:700;

letter-spacing:2px;

margin-bottom:15px;

text-transform:uppercase;


}

/* ==========================
BOTÕES
========================== */

.btn{


border-radius:10px;
padding:15px 35px;
font-weight:700;

transition:var(--transition);


}

.btn-danger{


background:var(--primary);
border-color:var(--primary);


}

.btn-danger:hover{


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

transform:translateY(-3px);


}

.btn-outline-light:hover{


color:#000;

transform:translateY(-3px);


}

/* ==========================
WHATSAPP
========================== */

.whatsapp-float{


position:fixed;

right:20px;
bottom:20px;

width:65px;
height:65px;

background:#25D366;

border-radius:50%;

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

color:#fff;

font-size:32px;

z-index:9999;

box-shadow:0 0 25px rgba(37,211,102,.4);


}

.whatsapp-float:hover{


color:#fff;

transform:scale(1.08);


}

/* ==========================
HERO
========================== */

.hero{


background:url('../img/hero-bg.webp');

background-size:cover;
background-position:center;

position:relative;


}

.hero .overlay{


position:absolute;

inset:0;

background:linear-gradient(
    rgba(0,0,0,.8),
    rgba(0,0,0,.9)
);


}

.hero-badge{


display:inline-block;

background:rgba(245,0,0,.12);

color:var(--primary);

padding:10px 20px;

border:1px solid rgba(245,0,0,.25);

border-radius:100px;

margin-bottom:25px;


}

.hero h1{


margin-bottom:25px;


}

.hero-text{


font-size:1.2rem;

margin-bottom:35px;


}

.hero-buttons{


display:flex;
gap:15px;

flex-wrap:wrap;

margin-bottom:40px;


}

.hero-trust{


display:flex;
gap:25px;

flex-wrap:wrap;


}

.hero-trust div{


color:#fff;

font-weight:600;


}

.hero-trust i{


color:var(--primary);

margin-right:6px;


}

.hero-image{


max-height:700px;


}

/* ==========================
FORM
========================== */

.lead-section{


background:#0d0d0d;


}

.lead-box{


background:#111;

padding:50px;

border-radius:20px;

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


}

.form-control,
.form-select{


background:#1a1a1a;

border:1px solid #2a2a2a;

color:#fff;

min-height:55px;


}

.form-control:focus,
.form-select:focus{


background:#1a1a1a;

color:#fff;

border-color:var(--primary);

box-shadow:none;


}

/* ==========================
STATS
========================== */

.stats-section{


background:#000;


}

.stat-item{


padding:30px;


}

.stat-item h3{


font-size:4rem;

color:var(--primary);


}

/* ==========================
INTRO
========================== */

.about-intro{


background:#0d0d0d;


}

.about-intro img{


border-radius:20px;


}

/* ==========================
PORTFÓLIO
========================== */

.portfolio-section{


background:#000;


}

.portfolio-item{


display:block;

overflow:hidden;

border-radius:16px;


}

.portfolio-item img{


width:100%;

height:350px;

object-fit:cover;

transition:.5s;


}

.portfolio-item:hover img{


transform:scale(1.08);


}

/* ==========================
ESPECIALIDADES
========================== */

.specialties-section{


background:#0d0d0d;


}

.specialty-card{


background:#111;

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

padding:40px;

border-radius:20px;

height:100%;

transition:var(--transition);


}

.specialty-card:hover{


border-color:var(--primary);

transform:translateY(-8px);


}

.specialty-card i{


font-size:40px;

color:var(--primary);

margin-bottom:20px;


}

/* ==========================
BENEFÍCIOS
========================== */

.benefit-card{


background:#111;

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

padding:40px;

border-radius:20px;

height:100%;

transition:.3s;


}

.benefit-card:hover{


border-color:var(--primary);

transform:translateY(-8px);


}

.benefit-card i{


color:var(--primary);

font-size:40px;

margin-bottom:20px;


}

/* ==========================
PROCESSO
========================== */

.process-section{


background:#000;


}

.process-card{


background:#111;

border-radius:20px;

padding:35px;

text-align:center;

height:100%;

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


}

.process-card span{


display:inline-flex;

width:60px;
height:60px;

border-radius:50%;

background:var(--primary);

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

font-size:20px;
font-weight:700;

margin-bottom:20px;


}

/* ==========================
CTA INTERMEDIÁRIO
========================== */

.cta-middle{


background:linear-gradient(
135deg,
#111,
#000
);


}

.cta-middle h2{


margin-bottom:20px;


}

/* ==========================
ARTISTAS
========================== */

.artists-section{


background:#0d0d0d;


}

.artist-card{


background:#111;

border-radius:20px;

overflow:hidden;

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

height:100%;


}

.artist-card img{


width:100%;

height:420px;

object-fit:cover;


}

.artist-content{


padding:30px;


}

.artist-content span{


color:var(--primary);

display:block;

margin-bottom:15px;


}

/* ==========================
DEPOIMENTOS
========================== */

.testimonials-section{


background:#000;


}

.testimonial-card{


background:#111;

border-radius:20px;

padding:35px;

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

height:100%;


}

.stars{


color:gold;

font-size:24px;

margin-bottom:15px;


}

/* ==========================
FAQ
========================== */

.faq-section{


background:#0d0d0d;


}

.accordion-item{


background:#111;

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

margin-bottom:15px;


}

.accordion-button{


background:#111;

color:#fff;

font-weight:600;


}

.accordion-button:not(.collapsed){


background:#111;

color:var(--primary);


}

.accordion-button:focus{


box-shadow:none;


}

.accordion-body{


background:#111;

color:var(--gray);


}

/* ==========================
CTA FINAL
========================== */

.final-cta{


background:url('../img/final-bg.webp');

background-size:cover;

background-position:center;

position:relative;


}

.final-cta::before{


content:'';

position:absolute;

inset:0;

background:rgba(0,0,0,.88);


}

.final-cta .container{


position:relative;
z-index:2;


}

/* ==========================
FOOTER
========================== */

.footer{


background:#050505;

padding:80px 0 30px;


}

.footer h4{


margin-bottom:20px;


}

.footer ul{


list-style:none;
padding:0;


}

.footer li{


margin-bottom:12px;


}

.footer a{


color:#b8b8b8;


}

.footer a:hover{


color:var(--primary);


}

.footer hr{


border-color:#222;

margin:40px 0;


}

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

@media(max-width:991px){


section{
    padding:70px 0;
}

h1{
    font-size:2.8rem;
}

h2{
    font-size:2rem;
}

.hero{
    text-align:center;
}

.hero-trust{
    justify-content:center;
}

.hero-buttons{
    justify-content:center;
}

.hero-image{
    margin-top:50px;
}


}

@media(max-width:768px){


.lead-box{
    padding:30px;
}

.portfolio-item img{
    height:280px;
}

.artist-card img{
    height:350px;
}


}