@font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-Thin.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-Thin.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-Thin.ttf) format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-ThinItalic.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-ThinItalic.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-ThinItalic.ttf) format('truetype');
font-weight: 100;
font-style: italic;
font-display: swap;
} @font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-Light.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-Light.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-Light.ttf) format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-LightItalic.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-LightItalic.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-LightItalic.ttf) format('truetype');
font-weight: 300;
font-style: italic;
font-display: swap;
} @font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-Regular.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-Regular.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-RegularItalic.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-RegularItalic.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-RegularItalic.ttf) format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
} @font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-Medium.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-Medium.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-Medium.ttf) format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-MediumItalic.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-MediumItalic.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-MediumItalic.ttf) format('truetype');
font-weight: 500;
font-style: italic;
font-display: swap;
} @font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-Bold.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-Bold.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-BoldItalic.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-BoldItalic.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-BoldItalic.ttf) format('truetype');
font-weight: 700;
font-style: italic;
font-display: swap;
} @font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-ExtraBold.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-ExtraBold.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-ExtraBold.ttf) format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-ExtraBoldItalic.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-ExtraBoldItalic.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-ExtraBoldItalic.ttf) format('truetype');
font-weight: 800;
font-style: italic;
font-display: swap;
} @font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-Black.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-Black.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-Black.ttf) format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Creato Display';
src: url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff2/CreatoDisplay-BlackItalic.woff2) format('woff2'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/woff/CreatoDisplay-BlackItalic.woff) format('woff'),
url(//www.attenciosamente.com.br/wp-content/themes/attenciosamente/assets/fonts/CreatoDisplay/ttf/CreatoDisplay-BlackItalic.ttf) format('truetype');
font-weight: 900;
font-style: italic;
font-display: swap;
}*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--background: hsl(40, 20%, 98%);
--foreground: hsl(220, 25%, 14%);
--card: hsl(0, 0%, 100%);
--card-foreground: hsl(220, 25%, 14%);
--primary: hsl(187, 59%, 50%);
--primary-foreground: hsl(0, 0%, 100%);
--secondary: hsl(40, 25%, 95%);
--muted-foreground: hsl(220, 10%, 46%);
--accent: hsl(25, 98%, 51%);
--border: hsl(187, 15%, 88%);
--warm: hsl(39, 100%, 59%);
--blue: hsl(195, 70%, 28%);
--lilas: hsl(270, 60%, 65%);
--att-lime: hsl(92, 73%, 66%);
--radius: 0.875rem;
--shadow-card: 0 4px 24px -4px rgba(27,33,45,0.08);
--shadow-card-hover: 0 8px 40px -8px rgba(27,33,45,0.14);
}
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
background-color: var(--background);
color: var(--foreground);
min-height: 100vh;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Creato Display', serif;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}  .text-gradient {
background: linear-gradient(to right, #FFB82C 0%, #FFB82C 35%, #FD6B06 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@media (min-width: 768px) { .text-gradient { display: block; } }
.text-gradient.inline { display: inline; }
.question { -webkit-text-fill-color: hsl(187, 59%, 50%); color: hsl(187, 59%, 50%); }
.text-gradient-hero {
display: block;
background: linear-gradient(160deg, #ffffff 0%, #ffffff 30%, #FEB82C 70%, #FD6B06 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@media (min-width: 768px) { .text-gradient-hero { display: block; } }
.text-gradient-hero .span-hero {
display: inline-block;
background: linear-gradient(to right, #CF62BC 0%, #E8A0DC 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} @keyframes whatsapp-glow {
0%, 100% { box-shadow: 0 0 8px 0 rgba(164,232,105,0.4), 0 4px 16px -4px rgba(164,232,105,0.3); }
50%       { box-shadow: 0 0 20px 4px rgba(164,232,105,0.5), 0 4px 24px -4px rgba(164,232,105,0.4); }
}
.glow-lime { animation: whatsapp-glow 2.5s ease-in-out infinite; }
@keyframes yellow-glow {
0%, 100% { box-shadow: 0 0 8px 0 rgba(254,184,44,0.4), 0 4px 16px -4px rgba(254,184,44,0.3); }
50%       { box-shadow: 0 0 20px 4px rgba(254,184,44,0.5), 0 4px 24px -4px rgba(254,184,44,0.4); }
}
.glow-yellow { animation: yellow-glow 2.5s ease-in-out infinite; }
@keyframes lilas-glow {
0%, 100% { box-shadow: 0 0 8px 0 rgba(207,98,188,0.4), 0 4px 16px -4px rgba(207,98,188,0.3); }
50%       { box-shadow: 0 0 20px 4px rgba(207,98,188,0.5), 0 4px 24px -4px rgba(207,98,188,0.4); }
}
.glow-lilas { animation: lilas-glow 2.5s ease-in-out infinite; } .badge {
display: inline-block;
padding: 0.375rem 1rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.badge-primary   { background: rgba(29,173,190,0.1); color: var(--primary); }
.badge-accent    { background: rgba(253,110,8,0.1);  color: var(--accent); }
.badge-warm      { background: rgba(251,197,66,0.1);  color: var(--warm); }
.badge-blue      { background: rgba(29,173,190,0.1);   color: var(--blue); }
.badge-instagram {
background: linear-gradient(135deg, #833AB4, #E1306C, #F77737);
color: #fff;
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 1.25rem;
} .btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.625rem; padding: 1rem 2rem;
border-radius: 9999px; font-weight: 600; font-size: 1.125rem;
transition: all 0.2s ease; cursor: pointer;
}
.btn-lime { background: var(--att-lime); color: var(--foreground); }
.btn-lime:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-outline {
background: rgba(255,255,255,0.05); color: hsl(40,20%,98%);
border: 1.5px solid rgba(255,255,255,0.6);
backdrop-filter: blur(4px);
}
.btn-outline:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); } .card {
background: var(--card); border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
transition: all 0.3s ease;
}
.card:hover {
box-shadow: var(--shadow-card-hover);
border-color: rgba(29,173,190,0.2);
transform: translateY(-4px);
} section { padding: 4rem 0; }
@media (min-width: 768px) { section { padding: 6rem 0; } } .section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header h2 { font-size: clamp(1.875rem, 4vw, 3rem); margin: 0.75rem 0 1rem; color: var(--primary); line-height: 1.2; }
.section-header p { color: var(--muted-foreground); font-size: 1.0625rem; max-width: 42rem; margin: 0 auto; } #hero {
position: relative; min-height: 100vh;
display: flex; align-items: center; overflow: hidden;
padding: 5rem 0;
}
#hero .hero-bg { position: absolute; inset: 0; }
@keyframes ken-burns {
0%   { transform: scale(1)    translate(0, 0); }
50%  { transform: scale(1.08) translate(-1.5%, -1%); }
100% { transform: scale(1)    translate(0, 0); }
}
#hero .hero-bg img {
width: 100%; height: 100%; object-fit: cover;
animation: ken-burns 20s ease-in-out infinite;
transform-origin: center center;
}
#hero .hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(
to right,
hsl(220,25%,10%,0.88),
hsl(187,30%,12%,0.72),
hsl(187,20%,14%,0.3)
);
}
#hero .hero-overlay-bottom {
position: absolute; bottom: 0; left: 0; right: 0;
height: 8rem;
background: linear-gradient(to top, var(--background), transparent);
}
#hero .hero-content { position: relative; z-index: 10; max-width: 40rem; }
#hero .hero-chip {
display: inline-flex; align-items: center; gap: 0.625rem;
padding: 0.5rem 1.25rem; border-radius: 9999px;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.05);
backdrop-filter: blur(12px);
color: hsl(187,59%,62%); font-size: 0.875rem; font-weight: 600;
margin-bottom: 2rem;
}
#hero .hero-chip img { height: 1.5rem; width: auto; }
#hero h1 {
font-size: clamp(2.25rem, 6vw, 4rem);
font-weight: 700; line-height: 1.08;
color: hsl(40,20%,98%); margin-bottom: 1.5rem;
letter-spacing: -0.01em;
}
#hero p {
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: 600;
color: hsl(0,0%,95%); margin-bottom: 2.5rem;
max-width: 32rem; line-height: 1.625;
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; } .services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
}
.service-card { padding: 1.75rem; }
.service-icon {
width: 3rem; height: 3rem; border-radius: 0.75rem;
display: flex; align-items: center; justify-content: center;
margin-bottom: 1.25rem;
transition: transform 0.3s ease;
}
.service-card:hover .service-icon { transform: scale(1.1); }
.service-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--foreground); }
.service-card p  { color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; } #identificacao {
position: relative; overflow: hidden;
background: var(--secondary);
}
#identificacao .bg-img { position: absolute; inset: 0; }
#identificacao .bg-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.06; }
#identificacao .content { position: relative; z-index: 1; }
.checklist-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
max-width: 48rem; margin: 0 auto;
}
.checklist-item {
display: flex; align-items: center; gap: 0.75rem;
padding: 1rem; border-radius: 0.75rem;
background: rgba(255,255,255,0.8); border: 1px solid var(--border);
backdrop-filter: blur(4px);
}
.checklist-item .check-icon {
width: 2rem; height: 2rem; border-radius: 9999px;
background: rgba(253,110,8,0.1);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.checklist-item span { font-weight: 500; font-size: 0.9375rem; color: var(--foreground); } .approach-flow {
display: flex;
align-items: stretch;
gap: 5rem;
max-width: 72rem;
margin: 0 auto;
position: relative;
}
.approach-item {
flex: 1;
min-width: 0;
position: relative;
z-index: 1;
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
transition: all 0.25s ease;
overflow: hidden;
display: flex;
flex-direction: column;
}
.approach-item:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.approach-item .icon-header {
position: relative;
background: linear-gradient(135deg, hsl(187,59%,50%), hsl(187,70%,36%));
padding: 2rem 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.approach-item .icon-header i { color: white; width: 32px; height: 32px; }
.approach-wave {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
overflow: visible;
}
.approach-item .step-num {
position: absolute;
top: 8px; left: 10px;
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
border: 1.5px solid rgba(255,255,255,0.5);
display: flex !important;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 800;
color: #ffffff !important;
line-height: 1;
margin: 0;
}
.approach-item .card-body { padding: 1.5rem 1.25rem; text-align: center; flex: 1; }
.approach-item span { font-size: 1rem; font-weight: 700; color: var(--foreground); display: block; margin-bottom: 0.5rem; }
.approach-item p { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.5; }
.approach-arrow { display: none; }
@media (max-width: 767px) {
.approach-flow { flex-direction: column; gap: 3rem; }
.approach-wave { display: none; }
.approach-arrow {
display: flex;
align-items: center;
justify-content: center;
margin: -2rem 0;
z-index: 2;
position: relative;
}
} #processo { background: var(--secondary); }
.process-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
.process-card {
display: flex; align-items: center; gap: 1.25rem;
padding: 1.25rem; border-radius: 1rem;
background: var(--card); border: 1px solid var(--border);
box-shadow: var(--shadow-card); transition: all 0.3s ease;
}
.process-card:hover {
box-shadow: var(--shadow-card-hover);
border-color: rgba(29,173,190,0.15);
}
.process-img {
position: relative; width: 4rem; height: 4rem;
border-radius: 0.75rem; overflow: hidden; flex-shrink: 0;
}
.process-img img { width: 100%; height: 100%; object-fit: cover; }
.process-img .step-overlay {
position: absolute; inset: 0;
background: rgba(29,173,190,0.6);
display: flex; align-items: center; justify-content: center;
}
.process-img .step-overlay span {
font-size: 1.125rem; font-weight: 700; color: #fff;
font-family: 'Creato Display', serif;
}
.process-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.25rem; }
.process-card p  { color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.5; } #diferenciais { position: relative; overflow: hidden; }
#diferenciais .bg-img { position: absolute; inset: 0; }
#diferenciais .bg-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.15; }
#diferenciais .bg-overlay {
position: absolute; inset: 0;
background: rgba(29,125,138,0.60);
}
#diferenciais .content {
position: relative; z-index: 10;
max-width: 56rem; margin: 0 auto;
color: #fff;
}
#diferenciais h2 {
font-size: clamp(1.875rem, 4vw, 3rem);
font-weight: 700; text-align: center;
margin-bottom: 2.5rem; color: #fff; line-height: 1.2;
}
#diferenciais h2 .highlight {
position: relative; display: inline-block;
}
#diferenciais h2 .highlight::after {
content: '';
position: absolute; bottom: 4px; left: 0; right: 0;
height: 12px;
background: rgba(164,232,105,0.4);
transform: skewX(-2deg);
border-radius: 2px;
z-index: -1;
}
#diferenciais p { font-size: 1.0625rem; line-height: 1.7; opacity: 0.9; margin-bottom: 1.5rem; }
#diferenciais strong { color: #fff; } .team-scroll {
display: flex; gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
padding-bottom: 1rem;
}
.team-scroll::-webkit-scrollbar { display: none; }
.team-member { flex-shrink: 0; text-align: center; width: 9rem; }
.team-avatar {
width: 7rem; height: 7rem; border-radius: 9999px;
overflow: hidden; margin: 0 auto 0.75rem;
box-shadow: var(--shadow-card);
border: 2px solid var(--border);
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.team-member h3 { font-size: 0.875rem; font-weight: 700; color: var(--foreground); }
.team-member p  { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.125rem; } #depoimentos { background: var(--secondary); }
.testimonials-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card { padding: 1.75rem; position: relative; }
.testimonial-card .stars { display: flex; gap: 2px; margin-bottom: 1.25rem; }
.testimonial-card .stars i { color: var(--warm); }
.testimonial-card .quote-icon { position: absolute; top: 1.75rem; right: 1.75rem; color: rgba(29,173,190,0.1); }
.testimonial-card p { color: var(--foreground); line-height: 1.6; font-size: 0.9375rem; margin-bottom: 1.5rem; }
.testimonial-card .divider { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.testimonial-card .name { font-weight: 700; font-size: 0.875rem; color: var(--foreground); }
.testimonial-card .role { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 2px; } .faq-list { max-width: 50rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
background: var(--card); border-radius: 0.75rem;
border: 1px solid var(--border); overflow: hidden;
transition: border-color 0.2s;
}
.faq-item:hover { border-color: rgba(29,173,190,0.2); }
.faq-btn {
width: 100%; display: flex; align-items: center; justify-content: space-between;
padding: 1.25rem; text-align: left; cursor: pointer;
background: none; border: none; font-family: inherit;
}
.faq-btn span { font-weight: 600; color: var(--foreground); font-size: 0.9375rem; padding-right: 1rem; }
.faq-btn .chevron { flex-shrink: 0; transition: transform 0.3s ease; color: var(--muted-foreground); }
.faq-btn.open .chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; opacity: 0; }
.faq-answer.open { max-height: 300px; opacity: 1; }
.faq-answer p { padding: 0 1.25rem 1.25rem; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; } #instagram {
background: linear-gradient(135deg, #E8D5F5 0%, #F5D5E0 30%, #FDE8D0 60%, #FCF0E0 80%, #F0D5F0 100%);
}
.insta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (min-width: 768px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } }
.insta-item {
aspect-ratio: 1; border-radius: 0.75rem; overflow: hidden;
box-shadow: var(--shadow-card); cursor: pointer;
transition: all 0.3s ease;
}
.insta-item:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.insta-item:hover img { transform: scale(1.05); }
.btn-instagram {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.75rem 2rem; border-radius: 9999px;
background: linear-gradient(135deg, #833AB4, #E1306C, #F77737);
color: #fff; font-weight: 600;
transition: all 0.2s ease; margin-top: 2.5rem;
}
.btn-instagram:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); } #contato {
background: var(--primary);
color: var(--primary-foreground);
position: relative; overflow: hidden;
}
#contato .glow-circle {
position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 600px; height: 600px; border-radius: 9999px;
background: rgba(253,110,8,0.05); filter: blur(80px);
pointer-events: none;
}
#contato .content { position: relative; z-index: 10; }
#contato .cta-header { text-align: center; margin-bottom: 3rem; }
#contato .cta-header img { height: 4rem; width: auto; margin: 0 auto 1.5rem; }
#contato h2 { font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 700; margin-bottom: 1.25rem; line-height: 1.2; color: #fff; }
#contato p  { font-size: 1.0625rem; opacity: 0.85; max-width: 28rem; margin: 0 auto; }
.contact-form {
background: rgba(255,255,255,0.1); backdrop-filter: blur(12px);
border-radius: 1rem; padding: 2.5rem;
border: 1px solid rgba(255,255,255,0.1);
max-width: 600px; margin: 0 auto;
}
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; opacity: 0.9; }
.form-group input,
.form-group select {
width: 100%; padding: 0.75rem 1rem;
border-radius: 0.75rem;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
color: #fff; font-family: inherit; font-size: 0.9375rem;
outline: none; transition: all 0.2s;
}
.form-group input::placeholder { color: #fff; }
.form-group input:focus,
.form-group select:focus { outline: none !important; border-color: rgba(255,255,255,0.8) !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.15) !important; }
.form-group select option { color: #1a1a1a; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.btn-submit {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.625rem;
padding: 1rem 2rem; border-radius: 0.75rem;
background: linear-gradient(90deg, #FEB82C, #CF62BC 60%); color: #fff;
font-weight: 600; font-size: 1.0625rem;
cursor: pointer; border: none; font-family: inherit;
transition: filter 0.2s;
margin-top: 0.5rem;
}
.btn-submit:hover { filter: brightness(1.1); } footer {
background: var(--card); border-top: 1px solid var(--border);
padding: 2.5rem 0;
}
.footer-grid {
display: grid; gap: 2rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
footer .logo img { height: 3.5rem; width: auto; }
footer .tagline { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.6; margin-top: 1rem; }
footer h4 { font-weight: 700; color: var(--foreground); font-size: 0.875rem; margin-bottom: 1rem; font-family: 'DM Sans', sans-serif; }
footer .contact-info { display: flex; flex-direction: column; gap: 0.625rem; }
footer .contact-info p {
display: flex; align-items: center; gap: 0.5rem;
color: var(--muted-foreground); font-size: 0.875rem;
}
footer .insta-link {
display: inline-flex; align-items: center; gap: 0.5rem;
color: var(--muted-foreground); font-size: 0.875rem;
transition: color 0.2s;
}
footer .insta-link:hover { color: var(--primary); }
footer .copyright {
margin-top: 2.5rem; padding-top: 1.5rem;
border-top: 1px solid var(--border);
text-align: center; color: var(--muted-foreground); font-size: 0.75rem;
} .whatsapp-float {
position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
width: 3.5rem; height: 3.5rem;
background: var(--att-lime); color: var(--foreground);
border-radius: 9999px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
.whatsapp-float:hover { transform: scale(1.1); } .form-error {
display: block;
margin-top: 0.375rem;
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
min-height: 1.2em;
} .page-content {
min-height: 100vh;
background: var(--background);
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 1.5rem;
}
.page-obrigado {
max-width: 640px;
width: 100%;
text-align: center;
}
.page-thumbnail {
margin-bottom: 2rem;
}
.page-thumbnail img {
max-width: 180px;
height: auto;
border-radius: 9999px;
margin: 0 auto;
display: block;
}
.page-obrigado__body h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.75rem, 5vw, 2.5rem);
color: var(--foreground);
margin-bottom: 0.75rem;
}
.page-subtitle {
font-size: 1.125rem;
color: var(--primary);
font-weight: 600;
margin-bottom: 1.5rem;
}
.page-body {
font-size: 1rem;
color: var(--muted-foreground);
line-height: 1.75;
margin-bottom: 2rem;
}
.btn-voltar {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
border-radius: 0.75rem;
border: 2px solid var(--primary);
color: var(--primary);
font-weight: 600;
font-size: 0.9375rem;
transition: background 0.2s, color 0.2s;
}
.btn-voltar:hover {
background: var(--primary);
color: #fff;
} #nosso-diferencial { background: var(--background); }
.nosso-diferencial-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
align-items: stretch;
}
.nosso-diferencial-grid .card { height: 100%; }
.diferencial-cta-card {
background: linear-gradient(135deg, hsl(195,70%,97%) 0%, hsl(195,50%,93%) 100%);
border-color: hsl(195,50%,78%);
}
.diferencial-cta-card:hover { border-color: hsl(195,70%,28%); }
.diferencial-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.25rem;
padding: 0.625rem 1.25rem;
border-radius: 9999px;
background: hsl(195,70%,28%);
color: #fff;
font-size: 0.875rem;
font-weight: 600;
transition: background 0.2s ease, transform 0.2s ease;
}
.diferencial-cta-btn:hover {
background: hsl(195,70%,22%);
transform: translateY(-1px);
} @media (max-width: 640px) {
#hero { padding-top: 4rem; align-items: flex-start; min-height: 80vh; }
.hero-btns { flex-direction: column; }
.btn { width: 100%; }
.form-row { grid-template-columns: 1fr; }
.contact-form { padding: 1.5rem; }
}