/* CSS Dedicado para as Páginas Centermedh */
/* Estilos Gerais */
.breadcrumb-nav {
background: #f8f9fa;
padding: 1rem 0;
border-bottom: 1px solid #e9ecef;
}
.breadcrumb {
display: flex;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.9rem;
}
.breadcrumb li:not(:last-child)::after {
content: '>';
margin: 0 0.5rem;
color: #6c757d;
}
.breadcrumb a {
color: #007bff;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
/* Hero Sections */
.como-comprar-hero,
.sobre-hero,
.faq-hero,
.contato-hero,
.tracking-hero,
.politica-hero {
color: white;
padding: 4rem 0;
text-align: center;
position: relative;
}
/* Hero especÃfico para Como Comprar com imagem de background */
.como-comprar-hero {
background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 80%), url(../images/bg_slider_01.jpeg) #1e3a8a;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
/* Hero especÃfico para Sobre Nós com imagem de background */
.sobre-hero {
background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) 80%), url(../images/bg_quem_somos.jpeg) #1e3a8a;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
.contato-hero {
background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) 80%), url(../images/img_contato.jpg) #1e3a8a;
background-position: top center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
/* Hero especÃfico para FAQ com imagem de background */
.faq-hero {
background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) 80%), url(../images/bg_quem_somos.jpeg) #1e3a8a;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
/* Outros heroes mantêm o gradiente original */
.contato-hero,
.tracking-hero,
.politica-hero {
/* background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); */
}
.hero-title,
.sobre-hero-title,
.faq-hero-title,
.contato-hero-title,
.politica-hero-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
}
.hero-subtitle,
.sobre-hero-subtitle,
.faq-hero-subtitle,
.contato-hero-subtitle,
.politica-hero-subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.sobre-hero-description {
max-width: 800px;
margin: 0 auto;
font-size: 1.1rem;
line-height: 1.6;
}
/* Section Titles */
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 3rem;
text-align: center;
}
h2.section-title-sobre {
font-size: 2em;
font-weight: 700;
color: var(--bs-secondary-text-emphasis);
margin-bottom: var(--spacing-3xl);
display: flex;
/* align-items: center; */
gap: var(--spacing-sm);
letter-spacing: -1px;
}
.section-subtitle {
color: var(--brand-dark);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Estilo para o tÃtulo da seção de documentação - igual ao produtos.php */
h2.section-title-medicamentos {
font-size: var(--font-2xl);
font-weight: 700;
color: var(--primary-600);
margin-bottom: var(--spacing-xl);
line-height: 0.9em;
letter-spacing: -1px;
margin-top: 10px;
}
/* Buttons */
.btn-primary,
.btn-whatsapp,
.btn-secondary,
.btn-contact,
.btn-print,
.btn-track {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-primary {
background: linear-gradient(135deg, #3b82f6, #1e40af);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
.btn-whatsapp {
background: #25d366;
color: white;
}
.btn-whatsapp:hover {
background: #128c7e;
transform: translateY(-2px);
}
.btn-secondary {
background: rgba(255,255,255,0.1);
color: white;
border: 2px solid rgba(255,255,255,0.3);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
}
/* Cards */
.search-card,
.result-card {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
overflow: hidden;
}
.search-card {
padding: 3rem;
text-align: center;
max-width: 600px;
margin: 0 auto;
}
/* Forms */
.form-group {
margin-bottom: 1.5rem;
}
.form-control {
width: 100%;
padding: 1rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-control:focus {
outline: none;
border-color: #3b82f6;
}
/* FAQ Styles */
.faq-accordion {
margin: 2rem 0;
}
.faq-item {
background: #dee2e6;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
margin-bottom: 1rem;
overflow: hidden;
}
.faq-question {
width: 100%;
padding: 1.5rem;
background: none;
border: none;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1rem;
font-weight: 600;
color: #1f2937;
transition: background 0.3s ease;
}
.faq-question:hover {
/* background: #f8f9fa; */
}
.faq-answer {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item.active .faq-answer {
padding: 0 1.5rem 1.5rem;
max-height: 1000px;
}
/* Timeline */
.timeline {
position: relative;
padding-left: 2rem;
}
.timeline::before {
content: '';
position: absolute;
left: 0.75rem;
top: 0;
bottom: 0;
width: 2px;
background: #e5e7eb;
}
.timeline-item {
position: relative;
margin-bottom: 2rem;
padding-left: 2rem;
}
.timeline-item::before {
content: '';
position: absolute;
left: -0.5rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #e5e7eb;
}
.timeline-item.active::before {
background: #3b82f6;
}
.timeline-item.completed::before {
background: #10b981;
}
/* Grid Layouts */
.steps-grid,
.docs-grid,
.info-grid,
.faq-grid {
display: grid;
gap: 2rem;
}
.steps-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
max-width: 1200px;
margin: 0 auto;
}
/* Step Cards */
.step-item,
.step-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
position: relative;
transition: transform 0.3s ease;
overflow: hidden;
}
.step-item:hover,
.step-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.step-number {
position: absolute;
top: -15px;
left: 2rem;
width: 40px;
height: 40px;
background: linear-gradient(135deg, #3b82f6, #1e40af);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
z-index: 2;
}
/* Novo estilo para Ãcones dos steps */
.step-icon {
position: absolute;
top: 1rem;
right: 1rem;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #0ea5e9;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.step-item:hover .step-icon {
background: linear-gradient(135deg, #0ea5e9, #0284c7);
color: white;
transform: scale(1.1);
}
.step-content h3 {
color: #1f2937;
margin-bottom: 1rem;
margin-top: 1rem;
font-size: 1.3rem;
padding-right: 4rem;
}
.step-content p {
color: #4b5563;
line-height: 1.6;
padding-right: 1rem;
}
/* ===== ESTILOS ESPECÃFICOS PARA PÃGINA SOBRE NÓS ===== */
/* Nossa História Section */
.nossa-historia {
padding: 5rem 0;
background: #fff;
}
.historia-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.historia-text p {
margin-bottom: 1.5rem;
line-height: 1.7;
color: #4b5563;
}
.historia-image img {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.quem-somos-image {
max-width: 100%;
height: auto;
border-radius: 40px 5px 40px 5px;
width: 450px;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}
/* Missão, Visão e Valores Section */
.missao-visao-valores {
padding: 6rem 0;
background: #f8f9fa;
}
.mvv-header {
text-align: center;
margin-bottom: 4rem;
}
.mvv-description {
font-size: 1.1rem;
color: #6b7280;
max-width: 600px;
margin: 1rem auto 0;
line-height: 1.6;
}
.mvv-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2.5rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 1rem;
}
.mvv-card {
background: white;
padding: 2.5rem 2rem;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.2);
position: relative;
overflow: hidden;
min-height: 400px;
display: flex;
flex-direction: column;
}
.mvv-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #3b82f6, #1e40af);
}
.mvv-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}
.mvv-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #3b82f6, #1e40af);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
position: relative;
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
flex-shrink: 0;
}
.mvv-icon i {
font-size: 2rem;
color: white;
}
.mvv-card h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #1f2937;
font-weight: 700;
flex-shrink: 0;
}
.mvv-card p {
color: #4b5563;
line-height: 1.7;
font-size: 1rem;
flex-grow: 1;
}
.mvv-card ul {
text-align: left;
list-style: none;
padding: 0;
margin-top: 1rem;
flex-grow: 1;
}
.mvv-card li {
margin-bottom: 1rem;
color: #4b5563;
display: flex;
align-items: flex-start;
line-height: 1.6;
}
.mvv-card li::before {
content: '✓';
color: #10b981;
font-weight: bold;
margin-right: 0.75rem;
margin-top: 0.1rem;
flex-shrink: 0;
}
.mvv-card strong {
color: #1f2937;
font-weight: 600;
}
/* Compromisso com a Excelência Section */
.compromisso-excelencia {
padding: 5rem 0;
background: #f8f9fa;
}
.compromisso-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.compromisso-items {
margin: 2rem 0;
}
.compromisso-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
color: #4b5563;
}
.compromisso-item i {
color: var(--brand-dark);
margin-right: 0.75rem;
}
.compromisso-cta {
margin-top: 2rem;
}
/* Responsividade */
@media (max-width: 1200px) {
.mvv-grid {
gap: 2rem;
padding: 0 2rem;
}
.mvv-card {
padding: 2rem 1.5rem;
min-height: 380px;
}
}
@media (max-width: 992px) {
.mvv-grid {
grid-template-columns: 1fr;
gap: 2rem;
max-width: 600px;
padding: 0 1rem;
}
.mvv-card {
min-height: auto;
padding: 2.5rem 2rem;
}
}
@media (max-width: 768px) {
.hero-title,
.sobre-hero-title,
.faq-hero-title,
.contato-hero-title,
.politica-hero-title {
font-size: 2rem;
}
.section-title {
font-size: 1.8rem;
}
.steps-grid,
.docs-grid,
.info-grid,
.faq-grid {
grid-template-columns: 1fr;
}
.historia-content,
.compromisso-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.mvv-header {
margin-bottom: 3rem;
}
.mvv-card {
padding: 2rem 1.5rem;
}
.mvv-icon {
width: 70px;
height: 70px;
}
.mvv-icon i {
font-size: 1.8rem;
}
}
/* Texto geral */
p, li {
/* line-height: 1.7; */
/* color: #4b5563; */
}
/* Links */
a {
color: #3b82f6;
text-decoration: none;
}
a:hover {
/* text-decoration: underline; */
}
/* ===== ESTILOS ESPECÃFICOS PARA PÃGINA COMO COMPRAR ===== */
/* Processo Steps Section - Novo Layout Timeline */
.processo-steps {
padding: 5rem 0;
background: #f8f9fa;
}
.steps-intro {
text-align: center;
margin-bottom: 4rem;
}
.steps-description {
font-size: 1.1rem;
color: #6b7280;
margin-bottom: 2rem;
}
/* Indicador de Progresso */
.progress-indicator {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin-bottom: 3rem;
}
.progress-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #d1d5db;
transition: all 0.3s ease;
}
.progress-dot.active {
background: #3b82f6;
}
/* Timeline de Passos */
.steps-timeline {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Linha conectora */
.timeline-line {
position: absolute;
top: 50px;
left: 10%;
right: 10%;
height: 2px;
background: #e5e7eb;
z-index: 1;
}
.timeline-line::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3b82f6;
transform-origin: left;
animation: progressLine 2s ease-in-out;
}
@keyframes progressLine {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Cada passo da timeline */
.timeline-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
max-width: 200px;
}
/* Ãcones da timeline */
.timeline-icon {
width: 80px;
height: 80px;
background: white;
border: 3px solid #e5e7eb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: #9ca3af;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.timeline-step:hover .timeline-icon {
border-color: #3b82f6;
color: #3b82f6;
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
}
/* Conteúdo de cada passo */
.timeline-content h3 {
font-size: 0.8rem;
font-weight: 600;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.5rem;
}
.timeline-content h4 {
font-size: 1rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 0.8rem;
line-height: 1.3;
}
.timeline-content p {
font-size: 0.9rem;
color: #6b7280;
line-height: 1.5;
margin: 0;
}
/* Animação de entrada */
.timeline-step {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease-out forwards;
}
.timeline-step:nth-child(2) { animation-delay: 0.1s; }
.timeline-step:nth-child(3) { animation-delay: 0.2s; }
.timeline-step:nth-child(4) { animation-delay: 0.3s; }
.timeline-step:nth-child(5) { animation-delay: 0.4s; }
.timeline-step:nth-child(6) { animation-delay: 0.5s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* CTA Atendente Section */
.cta-atendente {
color: var(--text-white);
padding: var(--spacing-4xl) 0;
position: relative;
background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 80%), url(../images/bg_especialistas.jpeg) var(--primary-600);
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
.cta-atendente .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.cta-atendente-content {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-4xl);
align-items: center;
justify-items: center;
text-align: center;
}
.cta-atendente-text {
max-width: 600px;
}
.cta-atendente-title {
font-size: var(--font-3xl);
font-weight: 700;
color: var(--text-white);
margin-bottom: var(--spacing-xl);
line-height: 0.9em;
}
.cta-atendente-description {
font-size: var(--font-lg);
color: var(--text-white);
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta-atendente-btn {
background: transparent;
color: var(--text-white);
border: 2px solid var(--text-white);
padding: var(--spacing-lg) var(--spacing-2xl);
border-radius: var(--radius-full);
font-weight: 700;
font-size: var(--font-base);
text-transform: uppercase;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.cta-atendente-btn:hover {
background: var(--text-white);
color: var(--primary-600);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}
.cta-atendente-btn i {
transition: transform 0.3s ease;
}
.cta-atendente-btn:hover i {
transform: translateX(3px);
}
/* Responsividade especÃfica para Como Comprar */
@media (max-width: 1024px) {
.steps-timeline {
flex-direction: column;
align-items: center;
gap: 3rem;
}
.timeline-line {
display: none;
}
.timeline-step {
max-width: 400px;
flex-direction: row;
text-align: left;
}
.timeline-icon {
margin-right: 1.5rem;
margin-bottom: 0;
flex-shrink: 0;
}
.timeline-content {
flex: 1;
}
}
@media (max-width: 768px) {
.timeline-step {
flex-direction: column;
text-align: center;
max-width: 300px;
}
.timeline-icon {
margin-right: 0;
margin-bottom: 1rem;
width: 60px;
height: 60px;
font-size: 1.4rem;
}
.cta-atendente-title {
font-size: 2rem;
}
.cta-atendente-description {
font-size: 1rem;
}
.cta-atendente-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* ===== ESTILOS PARA SEÇÃO TRATAMENTOS E COMPROMISSOS ===== */
.tratamentos-compromissos {
padding: 5rem 0;
background: #fff;
}
.tratamentos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.tratamento-card {
background: white;
padding: 2.5rem 2rem;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.2);
position: relative;
overflow: hidden;
min-height: 350px;
display: flex;
flex-direction: column;
}
.tratamento-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
}
.tratamento-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}
.tratamento-icon {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
position: relative;
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
flex-shrink: 0;
}
.tratamento-icon i {
font-size: 2rem;
color: white;
}
.tratamento-card h3 {
font-size: 1.4rem;
margin-bottom: 1.5rem;
color: #1f2937;
font-weight: 700;
flex-shrink: 0;
line-height: 1.3;
}
.tratamento-card p {
color: #4b5563;
line-height: 1.7;
font-size: 1rem;
flex-grow: 1;
margin: 0;
}
/* Responsividade para Tratamentos */
@media (max-width: 1200px) {
.tratamentos-grid {
gap: 2rem;
padding: 0 2rem;
}
.tratamento-card {
padding: 2rem 1.5rem;
min-height: 320px;
}
}
@media (max-width: 992px) {
.tratamentos-grid {
grid-template-columns: 1fr;
gap: 2rem;
max-width: 600px;
padding: 0 1rem;
}
.tratamento-card {
min-height: auto;
padding: 2.5rem 2rem;
}
}
@media (max-width: 768px) {
.tratamento-card {
padding: 2rem 1.5rem;
}
.tratamento-icon {
width: 70px;
height: 70px;
}
.tratamento-icon i {
font-size: 1.8rem;
}
.tratamento-card h3 {
font-size: 1.2rem;
}
}
/* ========================================
ESTILOS PARA CAMPO DE BUSCA FAQ
======================================== */
/* Estilos personalizados para o campo de busca FAQ */
.faq-search {
max-width: 500px;
margin: 2rem auto 0;
}
.search-container {
position: relative;
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.search-container:hover {
border-color: #d1d5db;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.search-container:focus-within {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
#faqSearch {
flex: 1;
padding: 12px 16px;
border: none;
background: transparent;
font-size: 16px;
color: #374151;
outline: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.5;
}
#faqSearch::placeholder {
color: #9ca3af;
font-weight: 400;
}
#faqSearch:focus::placeholder {
color: #d1d5db;
}
#searchBtn {
background: #ffffff;
border: none;
border-left: 1px solid #e5e7eb;
padding: 12px 16px;
cursor: pointer;
color: #6b7280;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
}
#searchBtn:hover {
background: #f9fafb;
color: #374151;
}
#searchBtn:active {
background: #f3f4f6;
transform: scale(0.98);
}
#searchBtn i {
font-size: 16px;
transition: transform 0.2s ease;
}
#searchBtn:hover i {
transform: scale(1.05);
}
/* Estados de foco e interação */
.search-container:focus-within #searchBtn {
color: #3b82f6;
}
/* Responsividade para o campo de busca */
@media (max-width: 768px) {
.faq-search {
max-width: 100%;
margin: 1.5rem 1rem 0;
}
#faqSearch {
padding: 10px 14px;
font-size: 16px; /* Evita zoom no iOS */
}
#searchBtn {
padding: 10px 14px;
min-width: 44px;
}
#searchBtn i {
font-size: 14px;
}
}
@media (max-width: 480px) {
.search-container {
border-radius: 6px;
}
#faqSearch {
padding: 8px 12px;
font-size: 16px;
}
#searchBtn {
padding: 8px 12px;
min-width: 40px;
}
}
/* Melhorias de acessibilidade */
#faqSearch:focus {
outline: none;
}
#searchBtn:focus {
outline: 2px solid #3b82f6;
outline-offset: -2px;
}
/* Animação sutil para o container */
.search-container {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mensagem quando não encontrar resultados na busca FAQ */
.no-results-message {
text-align: center;
padding: 3rem 2rem;
margin: 2rem 0;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e9ecef;
animation: fadeInUp 0.5s ease-out;
}
.no-results-content {
max-width: 500px;
margin: 0 auto;
}
.no-results-content i {
font-size: 3rem;
color: #6c757d;
margin-bottom: 1.5rem;
display: block;
}
.no-results-content h3 {
color: #495057;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.no-results-content p {
color: #6c757d;
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 2rem;
}
.no-results-content .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 12px 24px;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
}
.no-results-content .btn-primary {
background: #007bff;
color: white;
border: 2px solid #007bff;
}
.no-results-content .btn-primary:hover {
background: #0056b3;
border-color: #0056b3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.no-results-content .btn i {
font-size: 1rem;
margin: 0;
}
/* Responsividade para a mensagem de não encontrado */
@media (max-width: 768px) {
.no-results-message {
padding: 2rem 1rem;
margin: 1rem 0;
}
.no-results-content h3 {
font-size: 1.3rem;
}
.no-results-content p {
font-size: 1rem;
}
.no-results-content .btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
/* Hero Section */
.contato-hero-new {
background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #1e40af 100%);
color: white;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.contato-hero-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 600px;
margin: 0 auto;
}
.hero-content h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.hero-content p {
font-size: 1.2rem;
opacity: 0.9;
line-height: 1.6;
}
/* Formulário Principal */
.formulario-principal {
/* background: #f8fafc; */
/* padding: 4rem 0; */
/* min-height: 80vh; */
}
.form-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
max-width: 1200px;
margin: 0 auto;
}
.form-container {
/* background: #1e3a8a; */
/* padding: 3rem; */
/* border-radius: 20px; */
/* box-shadow: 0 20px 40px rgba(30, 58, 138, 0.3); */
/* position: relative; */
/* overflow: hidden; */
}
.form-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
pointer-events: none;
}
.medicamento-form {
position: relative;
z-index: 2;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
color: white;
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem;
border: none;
border-radius: 10px;
font-size: 1rem;
background: white;
color: #1f2937;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 20px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #9ca3af;
}
.checkbox-group {
margin: 2rem 0;
}
.checkbox-container {
display: flex;
align-items: flex-start;
cursor: pointer;
color: white;
line-height: 1.5;
}
.checkbox-container input[type="checkbox"] {
width: auto;
margin-right: 0.75rem;
margin-top: 0.25rem;
transform: scale(1.2);
}
.checkbox-text {
font-size: 0.9rem;
}
.checkbox-text a {
color: #60a5fa;
text-decoration: none;
}
.checkbox-text a:hover {
text-decoration: underline;
}
.btn-solicitar {
width: 100%;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
border: none;
padding: 1.25rem 2rem;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.btn-solicitar:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
/* Informações Adicionais */
.info-adicional {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.info-card {
background: white;
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.info-icon {
/* width: 60px; */
/* height: 60px; */
/* background: linear-gradient(135deg, #3b82f6, #1e40af); */
/* border-radius: 50%; */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
/* margin: 0 auto 1rem; */
}
.info-icon i {
/* font-size: 1.5rem; */
/* color: white; */
}
.info-card h3 {
color: #1f2937;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.info-card p {
color: #6b7280;
font-size: 0.9rem;
line-height: 1.4;
}
/* Contato Alternativo */
.contato-alternativo {
background: white;
padding: 4rem 0;
}
.contato-alternativo h2 {
text-align: center;
color: #1f2937;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
}
.contatos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.contato-item {
background: #f8fafc;
padding: 2.5rem;
border-radius: 15px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.contato-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.contato-item.whatsapp:hover {
border-color: #25d366;
}
.contato-item.telefone:hover {
border-color: #3b82f6;
}
.contato-item.email:hover {
border-color: #f59e0b;
}
.contato-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.whatsapp .contato-icon {
background: linear-gradient(135deg, #25d366, #128c7e);
}
.telefone .contato-icon {
background: linear-gradient(135deg, #3b82f6, #1e40af);
}
.email .contato-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.contato-icon i {
font-size: 2rem;
color: white;
}
.contato-info h3 {
color: #1f2937;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.contato-info p {
color: #6b7280;
margin-bottom: 1.5rem;
}
.btn-contato {
display: inline-block;
background: #1f2937;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-contato:hover {
background: #374151;
transform: translateY(-2px);
}
/* Responsividade */
@media (max-width: 1024px) {
.form-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
}
.hero-content h1 {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.form-container {
padding: 2rem;
margin: 0 1rem;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-content p {
font-size: 1rem;
}
.contatos-grid {
grid-template-columns: 1fr;
}
.info-adicional {
margin-top: 2rem;
}
}
@media (max-width: 480px) {
.contato-hero-new {
padding: 2rem 0;
}
.formulario-principal {
padding: 2rem 0;
}
.form-container {
margin: 0 0.5rem;
padding: 1.5rem;
}
.hero-content h1 {
font-size: 1.8rem;
}
}
.no-results-message {
text-align: center;
padding: 3rem 2rem;
background: #f8f9fa;
border-radius: 12px;
margin: 2rem 0;
}
.no-results-content i {
font-size: 3rem;
color: #6c757d;
margin-bottom: 1rem;
}
.no-results-content h3 {
color: #1f2937;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.no-results-content p {
color: #6c757d;
margin-bottom: 2rem;
font-size: 1.1rem;
}
.contact-options {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-whatsapp {
background: #25d366;
color: white;
}
.btn-whatsapp:hover {
background: #128c7e;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
}
@media (max-width: 768px) {
.contact-options {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* ========================================
ESTILOS PARA PÃGINA DE CONTATO
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Hero Section */
.contato-hero-new {
background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #1e40af 100%);
color: white;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.contato-hero-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 600px;
margin: 0 auto;
}
.hero-content h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.hero-content p {
font-size: 1.2rem;
opacity: 0.9;
line-height: 1.6;
}
/* Formulário Principal */
.formulario-principal {
/* background: #f8fafc; */
/* padding: 4rem 0; */
/* min-height: 80vh; */
}
.form-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
max-width: 1200px;
margin: 0 auto;
}
.form-container {
/* background: #1e3a8a; */
/* padding: 3rem; */
/* border-radius: 20px; */
/* box-shadow: 0 20px 40px rgba(30, 58, 138, 0.3); */
/* position: relative; */
/* overflow: hidden; */
}
.form-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
pointer-events: none;
}
.medicamento-form {
position: relative;
z-index: 2;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
color: white;
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem;
border: none;
border-radius: 10px;
font-size: 1rem;
background: white;
color: #1f2937;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 20px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #9ca3af;
}
/* Checkbox Styles */
.checkbox-group {
margin: 2rem 0;
}
.checkbox-wrapper {
background: rgba(255, 255, 255, 0.1);
padding: 1rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.checkbox-container {
display: flex;
align-items: flex-start;
cursor: pointer;
color: white;
line-height: 1.5;
}
.checkbox-container input[type="checkbox"] {
width: auto;
margin-right: 0.75rem;
margin-top: 0.25rem;
transform: scale(1.2);
}
.checkbox-text {
font-size: 0.9rem;
}
.checkbox-text a {
color: #60a5fa;
text-decoration: none;
}
.checkbox-text a:hover {
text-decoration: underline;
}
/* Upload Styles */
.upload-group {
background: rgba(255, 255, 255, 0.05);
padding: 1.5rem;
border-radius: 15px;
border: 2px dashed rgba(255, 255, 255, 0.3);
margin: 1.5rem 0;
}
.upload-container {
width: 100%;
}
.upload-area {
border: 2px dashed rgba(255, 255, 255, 0.4);
border-radius: 12px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
}
.upload-area:hover,
.upload-area.drag-over {
border-color: #60a5fa;
background: rgba(96, 165, 250, 0.1);
transform: translateY(-2px);
}
.upload-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.upload-icon {
font-size: 3rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
}
.upload-text-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.upload-text {
color: white;
font-size: 1.1rem;
font-weight: 600;
}
.upload-subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.btn-browse {
background: linear-gradient(135deg, #3b82f6, #1e40af);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-browse:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}
.upload-info {
margin-top: 1rem;
text-align: center;
}
/* Progress Bar */
.progress-container {
margin-top: 1rem;
}
.progress-bar {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-text {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
color: white;
font-size: 0.9rem;
}
/* Arquivo Info */
.arquivo-info {
margin-top: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 1rem;
}
.arquivo-detalhes {
display: flex;
align-items: center;
gap: 1rem;
}
.arquivo-icon {
font-size: 2rem;
width: 50px;
text-align: center;
}
.arquivo-texto {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.arquivo-nome {
color: white;
font-weight: 600;
font-size: 0.9rem;
}
.arquivo-tamanho {
color: rgba(255, 255, 255, 0.7);
font-size: 0.8rem;
}
.arquivo-status {
color: #10b981;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.arquivo-actions {
display: flex;
gap: 0.5rem;
}
.btn-preview,
.btn-remover {
background: none;
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.5rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-preview:hover {
background: rgba(59, 130, 246, 0.3);
border-color: #3b82f6;
}
.btn-remover:hover {
background: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
}
.btn-solicitar {
width: 100%;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
border: none;
padding: 1.25rem 2rem;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.btn-solicitar:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.btn-solicitar:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* Informações Adicionais */
.info-adicional {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.info-card {
background: white;
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.info-icon {
/* width: 60px; */
/* height: 60px; */
/* background: linear-gradient(135deg, #3b82f6, #1e40af); */
/* border-radius: 50%; */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
/* margin: 0 auto 1rem; */
}
.info-icon i {
/* font-size: 1.5rem; */
/* color: white; */
}
.info-card h3 {
color: #1f2937;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.info-card p {
color: #6b7280;
font-size: 0.9rem;
line-height: 1.4;
}
/* Contato Alternativo */
.contato-alternativo {
background: white;
padding: 4rem 0;
}
.contato-alternativo h2 {
text-align: center;
color: #1f2937;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
}
.contatos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.contato-item {
background: #f8fafc;
padding: 2.5rem;
border-radius: 15px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.contato-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.contato-item.whatsapp:hover {
border-color: #25d366;
}
.contato-item.telefone:hover {
border-color: #3b82f6;
}
.contato-item.email:hover {
border-color: #f59e0b;
}
.contato-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.whatsapp .contato-icon {
background: linear-gradient(135deg, #25d366, #128c7e);
}
.telefone .contato-icon {
background: linear-gradient(135deg, #3b82f6, #1e40af);
}
.email .contato-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.contato-icon i {
font-size: 2rem;
color: white;
}
.contato-info h3 {
color: #1f2937;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.contato-info p {
color: #6b7280;
margin-bottom: 1.5rem;
}
.btn-contato {
display: inline-block;
background: #1f2937;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-contato:hover {
background: #374151;
transform: translateY(-2px);
}
/* Responsividade */
@media (max-width: 1024px) {
.form-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
}
.hero-content h1 {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.form-container {
padding: 2rem;
margin: 0 1rem;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-content p {
font-size: 1rem;
}
.contatos-grid {
grid-template-columns: 1fr;
}
.info-adicional {
margin-top: 2rem;
}
}
@media (max-width: 480px) {
.contato-hero-new {
padding: 2rem 0;
}
.formulario-principal {
padding: 2rem 0;
}
.form-container {
margin: 0 0.5rem;
padding: 1.5rem;
}
.hero-content h1 {
font-size: 1.8rem;
}
}
.no-results-message {
text-align: center;
padding: 3rem 2rem;
background: #f8f9fa;
border-radius: 12px;
margin: 2rem 0;
}
.no-results-content i {
font-size: 3rem;
color: #6c757d;
margin-bottom: 1rem;
}
.no-results-content h3 {
color: #1f2937;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.no-results-content p {
color: #6c757d;
margin-bottom: 2rem;
font-size: 1.1rem;
}
.contact-options {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-whatsapp {
background: #25d366;
color: white;
}
.btn-whatsapp:hover {
background: #128c7e;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
}
@media (max-width: 768px) {
.contact-options {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* ========================================
ESTILOS PARA PÃGINA DE CONTATO
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Hero Section */
.contato-hero-new {
background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #1e40af 100%);
color: white;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.contato-hero-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 600px;
margin: 0 auto;
}
.hero-content h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.hero-content p {
font-size: 1.2rem;
opacity: 0.9;
line-height: 1.6;
}
/* Formulário Principal */
.formulario-principal {
/* background: #f8fafc; */
/* padding: 4rem 0; */
/* min-height: 80vh; */
}
.form-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
max-width: 1200px;
margin: 0 auto;
}
.form-container {
/* background: #1e3a8a; */
/* padding: 3rem; */
/* border-radius: 20px; */
/* box-shadow: 0 20px 40px rgba(30, 58, 138, 0.3); */
/* position: relative; */
/* overflow: hidden; */
}
.form-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
pointer-events: none;
}
.medicamento-form {
position: relative;
z-index: 2;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
color: white;
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem;
border: none;
border-radius: 10px;
font-size: 1rem;
background: white;
color: #1f2937;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 20px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #9ca3af;
}
/* Checkbox Styles */
.checkbox-group {
margin: 2rem 0;
}
.checkbox-wrapper {
background: rgba(255, 255, 255, 0.1);
padding: 1rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.checkbox-container {
display: flex;
align-items: flex-start;
cursor: pointer;
color: white;
line-height: 1.5;
}
.checkbox-container input[type="checkbox"] {
width: auto;
margin-right: 0.75rem;
margin-top: 0.25rem;
transform: scale(1.2);
}
.checkbox-text {
font-size: 0.9rem;
}
.checkbox-text a {
color: #60a5fa;
text-decoration: none;
}
.checkbox-text a:hover {
text-decoration: underline;
}
/* Upload Styles */
.upload-group {
background: rgba(255, 255, 255, 0.05);
padding: 1.5rem;
border-radius: 15px;
border: 2px dashed rgba(255, 255, 255, 0.3);
margin: 1.5rem 0;
}
.upload-container {
width: 100%;
}
.upload-area {
border: 2px dashed rgba(255, 255, 255, 0.4);
border-radius: 12px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
}
.upload-area:hover,
.upload-area.drag-over {
border-color: #60a5fa;
background: rgba(96, 165, 250, 0.1);
transform: translateY(-2px);
}
.upload-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.upload-icon {
font-size: 3rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
}
.upload-text-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.upload-text {
color: white;
font-size: 1.1rem;
font-weight: 600;
}
.upload-subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.btn-browse {
background: linear-gradient(135deg, #3b82f6, #1e40af);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-browse:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}
.upload-info {
margin-top: 1rem;
text-align: center;
}
/* Progress Bar */
.progress-container {
margin-top: 1rem;
}
.progress-bar {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-text {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
color: white;
font-size: 0.9rem;
}
/* Arquivo Info */
.arquivo-info {
margin-top: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 1rem;
}
.arquivo-detalhes {
display: flex;
align-items: center;
gap: 1rem;
}
.arquivo-icon {
font-size: 2rem;
width: 50px;
text-align: center;
}
.arquivo-texto {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.arquivo-nome {
color: white;
font-weight: 600;
font-size: 0.9rem;
}
.arquivo-tamanho {
color: rgba(255, 255, 255, 0.7);
font-size: 0.8rem;
}
.arquivo-status {
color: #10b981;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.arquivo-actions {
display: flex;
gap: 0.5rem;
}
.btn-preview,
.btn-remover {
background: none;
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.5rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-preview:hover {
background: rgba(59, 130, 246, 0.3);
border-color: #3b82f6;
}
.btn-remover:hover {
background: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
}
.btn-solicitar {
width: 100%;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
border: none;
padding: 1.25rem 2rem;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.btn-solicitar:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.btn-solicitar:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* Informações Adicionais */
.info-adicional {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.info-card {
background: white;
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.info-icon {
/* width: 60px; */
/* height: 60px; */
/* background: linear-gradient(135deg, #3b82f6, #1e40af); */
/* border-radius: 50%; */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
/* margin: 0 auto 1rem; */
}
.info-icon i {
/* font-size: 1.5rem; */
/* color: white; */
}
.info-card h3 {
color: #1f2937;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.info-card p {
color: #6b7280;
font-size: 0.9rem;
line-height: 1.4;
}
/* Contato Alternativo */
.contato-alternativo {
background: white;
padding: 4rem 0;
}
.contato-alternativo h2 {
text-align: center;
color: #1f2937;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
}
.contatos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.contato-item {
background: #f8fafc;
padding: 2.5rem;
border-radius: 15px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.contato-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.contato-item.whatsapp:hover {
border-color: #25d366;
}
.contato-item.telefone:hover {
border-color: #3b82f6;
}
.contato-item.email:hover {
border-color: #f59e0b;
}
.contato-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.whatsapp .contato-icon {
background: linear-gradient(135deg, #25d366, #128c7e);
}
.telefone .contato-icon {
background: linear-gradient(135deg, #3b82f6, #1e40af);
}
.email .contato-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.contato-icon i {
font-size: 2rem;
color: white;
}
.contato-info h3 {
color: #1f2937;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.contato-info p {
color: #6b7280;
margin-bottom: 1.5rem;
}
.btn-contato {
display: inline-block;
background: #1f2937;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-contato:hover {
background: #374151;
transform: translateY(-2px);
}
/* Responsividade */
@media (max-width: 1024px) {
.form-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
}
.hero-content h1 {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.form-container {
padding: 2rem;
margin: 0 1rem;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-content p {
font-size: 1rem;
}
.contatos-grid {
grid-template-columns: 1fr;
}
.info-adicional {
margin-top: 2rem;
}
}
@media (max-width: 480px) {
.contato-hero-new {
padding: 2rem 0;
}
.formulario-principal {
padding: 2rem 0;
}
.form-container {
margin: 0 0.5rem;
padding: 1.5rem;
}
.hero-content h1 {
font-size: 1.8rem;
}
}
.no-results-message {
text-align: center;
padding: 3rem 2rem;
background: #f8f9fa;
border-radius: 12px;
margin: 2rem 0;
}
.no-results-content i {
font-size: 3rem;
color: #6c757d;
margin-bottom: 1rem;
}
.no-results-content h3 {
color: #1f2937;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.no-results-content p {
color: #6c757d;
margin-bottom: 2rem;
font-size: 1.1rem;
}
.contact-options {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-whatsapp {
background: #25d366;
color: white;
}
.btn-whatsapp:hover {
background: #128c7e;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
}
@media (max-width: 768px) {
.contact-options {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* ========================================
ESTILOS PARA PÃGINA DE CONTATO
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Hero Section */
.contato-hero-new {
background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #1e40af 100%);
color: white;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.contato-hero-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 600px;
margin: 0 auto;
}
.hero-content h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.hero-content p {
font-size: 1.2rem;
opacity: 0.9;
line-height: 1.6;
}
/* Formulário Principal */
.formulario-principal {
/* background: #f8fafc; */
/* padding: 4rem 0; */
/* min-height: 80vh; */
}
.form-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
max-width: 1200px;
margin: 0 auto;
}
.form-container {
/* background: #1e3a8a; */
/* padding: 3rem; */
/* border-radius: 20px; */
/* box-shadow: 0 20px 40px rgba(30, 58, 138, 0.3); */
/* position: relative; */
/* overflow: hidden; */
}
.form-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
pointer-events: none;
}
.medicamento-form {
position: relative;
z-index: 2;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
color: white;
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem;
border: none;
border-radius: 10px;
font-size: 1rem;
background: white;
color: #1f2937;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 20px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #9ca3af;
}
/* Checkbox Styles */
.checkbox-group {
margin: 2rem 0;
}
.checkbox-wrapper {
background: rgba(255, 255, 255, 0.1);
padding: 1rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.checkbox-container {
display: flex;
align-items: flex-start;
cursor: pointer;
color: white;
line-height: 1.5;
}
.checkbox-container input[type="checkbox"] {
width: auto;
margin-right: 0.75rem;
margin-top: 0.25rem;
transform: scale(1.2);
}
.checkbox-text {
font-size: 0.9rem;
}
.checkbox-text a {
color: #60a5fa;
text-decoration: none;
}
.checkbox-text a:hover {
text-decoration: underline;
}
/* Upload Styles */
.upload-group {
background: rgba(255, 255, 255, 0.05);
padding: 1.5rem;
border-radius: 15px;
border: 2px dashed rgba(255, 255, 255, 0.3);
margin: 1.5rem 0;
}
.upload-container {
width: 100%;
}
.upload-area {
border: 2px dashed rgba(255, 255, 255, 0.4);
border-radius: 12px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
}
.upload-area:hover,
.upload-area.drag-over {
border-color: #60a5fa;
background: rgba(96, 165, 250, 0.1);
transform: translateY(-2px);
}
.upload-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.upload-icon {
font-size: 3rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
}
.upload-text-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.upload-text {
color: white;
font-size: 1.1rem;
font-weight: 600;
}
.upload-subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.btn-browse {
background: linear-gradient(135deg, #3b82f6, #1e40af);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-browse:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}
.upload-info {
margin-top: 1rem;
text-align: center;
}
/* Progress Bar */
.progress-container {
margin-top: 1rem;
}
.progress-bar {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-text {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
color: white;
font-size: 0.9rem;
}
/* Arquivo Info */
.arquivo-info {
margin-top: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 1rem;
}
.arquivo-detalhes {
display: flex;
align-items: center;
gap: 1rem;
}
.arquivo-icon {
font-size: 2rem;
width: 50px;
text-align: center;
}
.arquivo-texto {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.arquivo-nome {
color: white;
font-weight: 600;
font-size: 0.9rem;
}
.arquivo-tamanho {
color: rgba(255, 255, 255, 0.7);
font-size: 0.8rem;
}
.arquivo-status {
color: #10b981;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.arquivo-actions {
display: flex;
gap: 0.5rem;
}
.btn-preview,
.btn-remover {
background: none;
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.5rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-preview:hover {
background: rgba(59, 130, 246, 0.3);
border-color: #3b82f6;
}
.btn-remover:hover {
background: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
}
.btn-solicitar {
width: 100%;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
border: none;
padding: 1.25rem 2rem;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.btn-solicitar:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.btn-solicitar:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* Informações Adicionais */
.info-adicional {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.info-card {
background: white;
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.info-icon {
/* width: 60px; */
/* height: 60px; */
/* background: linear-gradient(135deg, #3b82f6, #1e40af); */
/* border-radius: 50%; */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
/* margin: 0 auto 1rem; */
}
.info-icon i {
font-size: 1.5rem;
color: var(--bs-secondary);
}
.info-card h3 {
color: #1f2937;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.info-card p {
color: #6b7280;
font-size: 0.9rem;
line-height: 1.4;
}
/* Contato Alternativo */
.contato-alternativo {
background: white;
padding: 4rem 0;
}
.contato-alternativo h2 {
text-align: center;
color: #1f2937;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
}
.contatos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.contato-item {
background: #f8fafc;
padding: 2.5rem;
border-radius: 15px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.contato-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.contato-item.whatsapp:hover {
border-color: #25d366;
}
.contato-item.telefone:hover {
border-color: #3b82f6;
}
.contato-item.email:hover {
border-color: #f59e0b;
}
.contato-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.whatsapp .contato-icon {
background: linear-gradient(135deg, #25d366, #128c7e);
}
.telefone .contato-icon {
background: linear-gradient(135deg, #3b82f6, #1e40af);
}
.email .contato-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.contato-icon i {
font-size: 2rem;
color: white;
}
.contato-info h3 {
color: #1f2937;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.contato-info p {
color: #6b7280;
margin-bottom: 1.5rem;
}
.btn-contato {
display: inline-block;
background: #1f2937;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-contato:hover {
background: #374151;
transform: translateY(-2px);
}
/* Responsividade */
@media (max-width: 1024px) {
.form-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
}
.hero-content h1 {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.form-container {
padding: 2rem;
margin: 0 1rem;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-content p {
font-size: 1rem;
}
.contatos-grid {
grid-template-columns: 1fr;
}
.info-adicional {
margin-top: 2rem;
}
}
@media (max-width: 480px) {
.contato-hero-new {
padding: 2rem 0;
}
.formulario-principal {
padding: 2rem 0;
}
.form-container {
margin: 0 0.5rem;
padding: 1.5rem;
}
.hero-content h1 {
font-size: 1.8rem;
}
.upload-content {
gap: 0.5rem;
}
.upload-icon {
font-size: 2rem;
}
}
/* Hero Section do Contato */
.contato-hero-new {
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
color: white;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.contato-hero-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../images/doctor-patient-consultation.jpg') center/cover;
opacity: 0.1;
z-index: 1;
}
.contato-hero-new .container {
position: relative;
z-index: 2;
}
.contato-hero-new h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.contato-hero-new p {
font-size: 1.2rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* Formulário Principal */
.formulario-principal {
padding: 4rem 0;
/* background: #f8f9fa; */
}
.form-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.form-container {
/* background: white; */
/* padding: 2.5rem; */
/* border-radius: 16px; */
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
}
.medicamento-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-weight: 600;
color: #333;
font-size: 0.95rem;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 12px 16px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
/* Checkbox personalizado */
.checkbox-group {
margin: 1rem 0;
}
.checkbox-wrapper {
display: block;
}
.checkbox-container {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
line-height: 1.5;
position: relative;
}
.checkbox-container input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-radius: 4px;
position: relative;
flex-shrink: 0;
transition: all 0.3s ease;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.checkbox-container:hover .checkmark {
border-color: #3b82f6;
background: #f8f9ff;
}
.checkbox-container input[type="checkbox"]:checked + .checkmark {
background: #3b82f6;
border-color: #3b82f6;
}
.checkbox-container input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
color: white;
font-size: 12px;
font-weight: bold;
line-height: 1;
}
.checkbox-text {
font-size: 0.9rem;
color: #666;
flex: 1;
user-select: none;
}
.checkbox-text a {
color: #3b82f6;
text-decoration: none;
}
.checkbox-text a:hover {
text-decoration: underline;
}
/* Botão de envio */
.btn-solicitar {
background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
color: white;
border: none;
padding: 16px 32px;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 1rem;
}
.btn-solicitar:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.btn-solicitar:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* Informações Adicionais */
.info-adicional {
display: flex;
flex-direction: column;
gap: 2rem;
}
.info-card {
background: white;
padding: 2rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.info-icon {
/* width: 60px; */
/* height: 60px; */
/* background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%); */
/* border-radius: 50%; */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
/* margin: 0 auto 1rem; */
/* color: white; */
/* font-size: 1.5rem; */
}
.info-card h3 {
font-size: 1.2rem;
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
}
.info-card p {
color: #666;
font-size: 0.95rem;
line-height: 1.5;
}
/* Seção de Contato Alternativo */
.contato-alternativo {
padding: 4rem 0;
background: white;
}
.contato-alternativo h2 {
text-align: center;
font-size: 2rem;
font-weight: 700;
color: #333;
margin-bottom: 3rem;
}
.contatos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.contato-item {
background: #f8f9fa;
padding: 2rem;
border-radius: 12px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.contato-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.contato-item.whatsapp {
border-color: #25d366;
}
.contato-item.telefone {
border-color: #3b82f6;
}
.contato-item.email {
border-color: #ea4335;
}
.contato-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.5rem;
color: white;
}
.contato-item.whatsapp .contato-icon {
background: #25d366;
}
.contato-item.telefone .contato-icon {
background: #3b82f6;
}
.contato-item.email .contato-icon {
background: #ea4335;
}
.contato-info h3 {
font-size: 1.2rem;
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
}
.contato-info p {
color: #666;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.btn-contato {
display: inline-block;
padding: 10px 20px;
background: #333;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-contato:hover {
background: #555;
transform: translateY(-2px);
}
/* Estilos para upload de prescrição */
.upload-group {
margin: 20px 0;
}
.upload-container {
position: relative;
}
.upload-area {
border: 2px dashed #2196f3;
border-radius: 16px;
padding: 40px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
position: relative;
overflow: hidden;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.upload-area:hover {
border-color: #1976d2;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(33, 150, 243, 0.15);
}
.upload-area.drag-over {
border-color: #1976d2;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
transform: scale(1.02);
box-shadow: 0 12px 30px rgba(33, 150, 243, 0.25);
}
.upload-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.upload-icon {
position: relative;
}
.upload-icon i {
font-size: 64px;
color: #2196f3;
transition: all 0.3s ease;
}
.upload-area:hover .upload-icon i {
transform: scale(1.1);
color: #1976d2;
}
.upload-text-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.upload-text {
font-size: 18px;
font-weight: 600;
color: #1976d2;
margin: 0;
}
.upload-subtitle {
font-size: 14px;
color: #666;
margin: 0;
}
.btn-browse {
background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
color: white;
border: none;
border-radius: 25px;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}
.btn-browse:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}
.btn-browse i {
font-size: 16px;
}
.upload-info {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 10px;
}
/* Barra de progresso */
.progress-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
padding: 20px;
border-radius: 0 0 16px 16px;
backdrop-filter: blur(10px);
}
.progress-bar {
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #4caf50 0%, #8bc34a 100%);
border-radius: 4px;
transition: width 0.3s ease;
width: 0%;
}
.progress-text {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #333;
}
#progress-percentage {
font-weight: 600;
color: #4caf50;
}
#progress-status {
color: #666;
}
/* Informações do arquivo */
.arquivo-info {
margin-top: 20px;
animation: slideDown 0.3s ease-out;
}
.arquivo-detalhes {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.arquivo-icon {
flex-shrink: 0;
}
.arquivo-icon i {
font-size: 32px;
}
.arquivo-texto {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.arquivo-nome {
font-weight: 600;
color: #333;
font-size: 16px;
}
.arquivo-tamanho {
font-size: 14px;
color: #666;
}
.arquivo-status {
font-size: 12px;
color: #4caf50;
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.arquivo-status i {
font-size: 14px;
}
.arquivo-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.btn-preview, .btn-remover {
width: 40px;
height: 40px;
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-size: 16px;
}
.btn-preview {
background: #2196f3;
color: white;
}
.btn-preview:hover {
background: #1976d2;
transform: scale(1.05);
}
.btn-remover {
background: #f44336;
color: white;
}
.btn-remover:hover {
background: #d32f2f;
transform: scale(1.05);
}
/* Estilos para a mensagem de prescrição */
.mensagem-prescricao {
margin: 15px 0;
animation: slideDown 0.3s ease-out;
}
.alert-info {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border: 1px solid #2196f3;
border-radius: 8px;
padding: 15px 20px;
display: flex;
align-items: center;
gap: 12px;
color: #1565c0;
font-weight: 500;
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
transition: all 0.3s ease;
}
.alert-info:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.25);
}
.alert-info i {
font-size: 18px;
color: #1976d2;
}
.alert-info span {
font-size: 14px;
line-height: 1.4;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsividade para Contato */
@media (max-width: 768px) {
.contato-hero-new h1 {
font-size: 2rem;
}
.contato-hero-new p {
font-size: 1rem;
}
.form-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
}
.form-container {
padding: 1.5rem;
}
.contatos-grid {
grid-template-columns: 1fr;
}
.upload-area {
padding: 30px 15px;
min-height: 180px;
}
.upload-icon i {
font-size: 48px;
}
.upload-text {
font-size: 16px;
}
.upload-subtitle {
font-size: 12px;
}
.btn-browse {
padding: 10px 20px;
font-size: 13px;
}
.arquivo-detalhes {
padding: 15px;
flex-direction: column;
text-align: center;
gap: 12px;
}
.arquivo-actions {
justify-content: center;
}
.progress-container {
padding: 15px;
}
.alert-info {
padding: 12px 16px;
font-size: 13px;
}
.alert-info i {
font-size: 16px;
}
}
/* Estilos especÃficos para checkbox de prescrição */
#checkbox-prescricao .checkbox-container {
background: #f8f9ff;
border: 1px solid #e3f2fd;
border-radius: 8px;
padding: 15px;
margin: 10px 0;
transition: all 0.3s ease;
}
#checkbox-prescricao .checkbox-container:hover {
background: #e3f2fd;
border-color: #bbdefb;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}
#checkbox-prescricao .checkmark {
width: 22px;
height: 22px;
border: 2px solid #2196f3;
border-radius: 6px;
background: white;
}
#checkbox-prescricao .checkbox-container input[type="checkbox"]:checked + .checkmark {
background: #2196f3;
border-color: #2196f3;
}
#checkbox-prescricao .checkbox-text {
font-weight: 500;
color: #1976d2;
font-size: 0.95rem;
}
/* Correção final para alinhamento horizontal */
#checkbox-prescricao {
display: block !important;
}
#checkbox-prescricao .checkbox-wrapper {
display: block !important;
width: 100% !important;
}
#checkbox-prescricao .checkbox-container {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
box-sizing: border-box !important;
}
#checkbox-prescricao .checkmark {
order: 1 !important;
flex-shrink: 0 !important;
margin-right: 12px !important;
}
#checkbox-prescricao .checkbox-text {
order: 2 !important;
flex: 1 !important;
margin-left: 0 !important;
text-align: left !important;
white-space: normal !important;
word-wrap: break-word !important;
}
/* Correção especÃfica para checkbox de prescrição */
#enviar_prescricao {
position: absolute !important;
left: -9999px !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Estilos especÃficos para formulário mais compacto */
.medicamento-form .form-group {
margin-bottom: 1rem;
}
.medicamento-form .form-group label {
margin-bottom: 0.10rem;
font-size: 0.9rem;
}
.medicamento-form .form-group input,
.medicamento-form .form-group select,
.medicamento-form .form-group textarea {
padding: 0.75rem;
font-size: 0.95rem;
}
.medicamento-form .checkbox-group {
margin: 1rem 0;
}
.medicamento-form .checkbox-text {
font-size: 0.85rem;
}
/* Estilos para formulário minimalista */
.form-container-minimal {
background: white;
padding: 3rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
max-width: 800px;
margin: 0 auto;
}
.medicamento-form-minimal {
position: relative;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 1.5rem;
}
.form-group-minimal {
margin-bottom: 1.5rem;
}
.form-group-minimal label {
display: block;
color: var(--primary-600);
font-weight: 500;
margin-bottom: 0.5rem;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-group-minimal input,
.form-group-minimal select,
.form-group-minimal textarea {
width: 100%;
padding: 0.75rem 0;
border: none;
border-bottom: 2px solid #e5e7eb;
font-size: 1rem;
background: transparent;
color: #1f2937;
transition: all 0.3s ease;
outline: none;
}
.form-group-minimal input:focus,
.form-group-minimal select:focus,
.form-group-minimal textarea:focus {
border-bottom-color: #3b82f6;
background: rgba(59, 130, 246, 0.02);
}
.form-group-minimal input::placeholder,
.form-group-minimal textarea::placeholder {
color: #9ca3af;
font-style: italic;
}
.form-group-minimal select {
cursor: pointer;
background: white;
border: 2px solid #e5e7eb;
border-radius: 6px;
padding: 0.75rem;
margin-top: 0.5rem;
}
.form-group-minimal select:focus {
border-color: #3b82f6;
background: white;
}
.form-group-minimal textarea {
border: 2px solid #e5e7eb;
border-radius: 6px;
padding: 0.75rem;
margin-top: 0.5rem;
resize: vertical;
min-height: 80px;
}
.form-group-minimal textarea:focus {
border-color: #3b82f6;
background: white;
}
.checkbox-group-minimal {
margin: 1.5rem 0;
}
.checkbox-container-minimal {
display: flex;
align-items: flex-start;
cursor: pointer;
color: #6b7280;
line-height: 1.5;
}
.checkbox-container-minimal input[type="checkbox"] {
width: auto;
margin-right: 0.75rem;
margin-top: 0.25rem;
transform: scale(1.1);
}
.checkbox-text {
font-size: 0.85rem;
color: #6b7280;
}
.checkbox-text a {
color: #3b82f6;
text-decoration: none;
}
.checkbox-text a:hover {
text-decoration: underline;
}
.upload-group-minimal {
margin: 1.5rem 0;
}
.upload-group-minimal label {
color: #6b7280;
font-weight: 500;
margin-bottom: 0.5rem;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Responsividade */
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.form-container-minimal {
padding: 2rem 1.5rem;
}
}
/* Estilos para checkbox minimalista */
.checkbox-container-minimal {
display: flex;
align-items: center;
cursor: pointer;
color: #6b7280;
line-height: 1.5;
gap: 0.75rem;
}
.checkbox-container-minimal input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
cursor: pointer;
accent-color: #3b82f6;
}
.checkbox-text {
font-size: 0.9rem;
color: #6b7280;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.checkbox-text a {
color: #3b82f6;
text-decoration: none;
}
.checkbox-text a:hover {
text-decoration: underline;
}
/* Estilos para seção de contato clean */
.contatos-clean {
position: relative;
padding: 2rem 0;
}
.contatos-icons {
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
gap: 1rem;
z-index: 10;
}
.contato-icon-item {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.contato-icon-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.whatsapp-icon {
background: #25d366;
color: white;
}
.telefone-icon {
background: #1e3a8a;
color: white;
}
.email-icon {
background: #1e3a8a;
color: white;
}
.contatos-cards {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-right: 2rem;
}
.contato-card {
background: white;
border-radius: 16px;
padding: 2rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.contato-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.whatsapp-card {
border-color: #25d366;
}
.telefone-card {
border-color: #1e3a8a;
}
.email-card {
border-color: #1e3a8a;
}
.card-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2rem;
color: white;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.whatsapp-card .card-icon {
background: #25d366;
}
.telefone-card .card-icon {
background: #1e3a8a;
}
.email-card .card-icon {
background: #1e3a8a;
}
.contato-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 0.5rem;
}
.contato-card p {
color: #6b7280;
font-size: 0.9rem;
margin-bottom: 1.5rem;
line-height: 1.4;
}
.btn-contato-clean {
display: inline-block;
background: #374151;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
width: 100%;
text-align: center;
}
.btn-contato-clean:hover {
background: #1f2937;
color: white;
text-decoration: none;
transform: translateY(-1px);
}
/* Responsividade */
@media (max-width: 768px) {
.contatos-clean {
padding: 1rem 0;
}
.contatos-icons {
position: static;
flex-direction: row;
justify-content: center;
margin-bottom: 2rem;
}
.contatos-cards {
margin-right: 0;
}
.contato-card {
padding: 1.5rem;
}
.card-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
/* Estilos para seção de contato ultra clean */
.contatos-ultra-clean {
/* padding: 2rem 0; */
text-align: left;
}
.contato-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e3a8a;
margin-bottom: 2rem;
text-align: left;
}
.contato-info-list {
margin-bottom: 2rem;
text-align: left;
margin-top: 2rem;
}
.contato-info-item {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
/* padding: 0.75rem 0; */
transition: all 0.3s ease;
justify-content: flex-start;
text-align: left;
}
.contato-info-item:hover {
transform: translateX(5px);
}
.info-icon {
width: 32px;
height: 32px;
/* border-radius: 50%; */
/* background: #f3f4f6; */
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
font-size: 0.9rem;
flex-shrink: 0;
/* border: 1px solid #e5e7eb; */
}
.info-text {
font-size: 1rem;
color: #374151;
font-weight: 500;
line-height: 1.4;
text-align: left;
flex: 1;
}
/* Card WhatsApp destacado */
.whatsapp-card-destaque {
background: white;
/* border: 2px solid #25d366; */
border-radius: 16px;
padding: 2rem;
text-align: center;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.whatsapp-card-destaque:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.2);
}
.card-icon-whatsapp {
width: 80px;
height: 80px;
border-radius: 50%;
background: #25d366;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2.5rem;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
}
.whatsapp-card-destaque h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 0.5rem;
}
.whatsapp-card-destaque p {
color: #6b7280;
font-size: 0.9rem;
margin-bottom: 1.5rem;
line-height: 1.4;
}
.btn-whatsapp {
display: inline-block;
background: #374151;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
width: 100%;
text-align: center;
border: none;
cursor: pointer;
}
.btn-whatsapp:hover {
background: #1f2937;
color: white;
text-decoration: none;
transform: translateY(-1px);
}
/* Responsividade */
@media (max-width: 768px) {
.contatos-ultra-clean {
padding: 1rem 0;
text-align: left;
}
.contato-title {
font-size: 1.25rem;
margin-bottom: 1.5rem;
text-align: left;
}
.contato-info-item {
margin-bottom: 1rem;
text-align: left;
}
.info-icon {
width: 28px;
height: 28px;
font-size: 0.8rem;
}
.info-text {
font-size: 0.9rem;
text-align: left;
}
.whatsapp-card-destaque {
padding: 1.5rem;
}
.card-icon-whatsapp {
width: 60px;
height: 60px;
font-size: 2rem;
}
}