/* Reset e Variables - Curso DTTC */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Nova Paleta de Cores */
--primary-color: #EC117E; /* Magenta Vibrante - títulos, chamadas, destaques principais */
--primary-dark: #C62828; /* Vermelho Profundo para variações */
--secondary-color: #C62828; /* Vermelho Profundo - destaques estratégicos e alertas CTA */
--accent-color: #EC117E; /* Magenta para elementos de destaque */
--warning-color: #C62828; /* Vermelho para alertas e CTAs importantes */
/* Cores de texto */
--text-dark: #1C1C1C; /* Preto Profundo - títulos e textos principais */
--text-gray: #999999; /* Cinza Médio - textos complementares */
--text-light: #999999; /* Cinza Médio */
--text-muted: #999999; /* Cinza Médio para textos secundários */
/* Cores de fundo */
--background-white: #FFFFFF; /* Branco Neve - fundo dos cards */
--background-light: #F4F4F4; /* Cinza Claro - fundo geral da página */
--background-gray: #F4F4F4; /* Cinza Claro */
--background-blue: #F4F4F4; /* Cinza Claro */
/* Bordas e sombras */
--border-color: #e2e8f0;
--border-light: #F4F4F4;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
/* Gradientes */
--gradient-primary: linear-gradient(135deg, #EC117E 0%, #C62828 100%);
--gradient-secondary: linear-gradient(135deg, #C62828 0%, #EC117E 100%);
--gradient-warm: linear-gradient(135deg, #EC117E 0%, #C62828 100%);
--gradient-hero: linear-gradient(135deg, #1C1C1C 0%, #2a2a2a 100%);
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-dark);
background-color: var(--background-white);
font-size: 16px;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.header {
position: absolute;
top: 0;
width: 100%;
background: transparent;
z-index: 1000;
transition: all 0.3s ease;
}
.nav-container {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 2rem 1rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.nav-menu {
display: flex;
list-style: none;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1000px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 1.25rem 4rem;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.nav-menu a {
text-decoration: none;
color: white;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
padding: 0.75rem 1rem;
font-size: 1rem;
text-align: center;
white-space: nowrap;
}
.nav-menu a:hover {
color: var(--warning-color);
text-shadow: 0 0 10px rgba(236, 17, 126, 0.5);
}
.nav-menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--warning-color);
transition: width 0.3s ease;
}
.nav-menu a:hover::after {
width: 100%;
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
}
.nav-toggle span {
width: 25px;
height: 3px;
background: white;
margin: 3px 0;
transition: 0.3s;
}
/* About Section - Quem é Edythe */
.about-section {
padding: 120px 0;
background: var(--background-white);
position: relative;
}
.about-content {
display: grid;
grid-template-columns: 450px 1fr;
gap: 3rem;
align-items: center;
position: relative;
}
.about-text {
max-width: none;
}
.section-badge {
display: inline-block;
background: var(--primary-color);
color: white;
padding: 0.5rem 1.25rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.about-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
color: var(--text-dark);
margin-bottom: 1.5rem;
}
.about-title .highlight {
color: var(--primary-color);
}
.about-intro {
font-size: 1.25rem;
line-height: 1.6;
color: var(--text-gray);
margin-bottom: 3rem;
font-weight: 500;
}
.about-details {
display: flex;
flex-direction: column;
gap: 2rem;
margin-bottom: 3rem;
}
.detail-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.detail-icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.detail-icon i {
font-size: 1.5rem;
color: white;
}
.detail-content h4 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.75rem;
}
.detail-content p {
font-size: 1rem;
line-height: 1.6;
color: var(--text-gray);
margin: 0;
}
.detail-content strong {
color: var(--primary-color);
font-weight: 700;
}
.about-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding: 2rem 0;
border-top: 1px solid rgba(236, 17, 126, 0.2);
}
.stat-item {
text-align: center;
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 800;
color: var(--primary-color);
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-gray);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.about-image {
position: relative;
}
.image-container {
border-radius: 24px;
overflow: hidden;
}
.main-image {
width: 100%;
height: 600px;
object-fit: cover;
object-position: center top;
display: block;
}
/* Hero Section */
.hero {
padding: 120px 0 80px;
background: var(--gradient-hero);
color: white;
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-container {
display: grid;
grid-template-columns: 1fr 400px;
gap: 4rem;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-badge i {
color: var(--primary-color);
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1rem;
}
.highlight {
color: var(--primary-color);
text-shadow: 0 0 30px rgba(236, 17, 126, 0.5);
}
.hero-subtitle {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 1.5rem;
opacity: 0.95;
}
.accent {
color: var(--secondary-color);
font-weight: 700;
}
.hero-description {
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.9;
}
.hero-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.highlight-item {
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 1rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.highlight-item i {
color: var(--primary-color);
font-size: 1.5rem;
}
.highlight-item span {
font-weight: 500;
font-size: 0.875rem;
}
.event-info {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.info-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1rem;
}
.info-item i {
color: var(--primary-color);
font-size: 1.25rem;
width: 20px;
}
.hero-cta {
text-align: left;
}
.cta-note {
margin-top: 1rem;
font-size: 0.875rem;
opacity: 0.8;
font-style: italic;
}
/* Doctor Featured Layout */
.doctor-photo-featured {
position: relative;
margin-bottom: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.doctor-image-featured {
width: 380px;
height: 450px;
border-radius: 24px;
object-fit: cover;
object-position: center top;
border: 6px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
transition: all 0.4s ease;
display: block;
margin: 0 auto;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.doctor-image-featured:hover {
transform: scale(1.02) translateY(-8px);
border-color: var(--primary-color);
box-shadow: 0 30px 80px rgba(236, 17, 126, 0.4);
}
.doctor-badge-featured {
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--gradient-primary);
color: white;
padding: 1rem 2rem;
border-radius: 30px;
font-size: 1rem;
font-weight: 700;
box-shadow: 0 8px 25px rgba(236, 17, 126, 0.5);
animation: pulse 2s infinite;
white-space: nowrap;
}
.doctor-info-featured {
text-align: center;
margin-top: 1rem;
}
.doctor-info-featured h3 {
font-size: 2rem;
font-weight: 800;
margin-bottom: 0.75rem;
color: white;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.doctor-title {
opacity: 0.95;
margin-bottom: 1.5rem;
font-size: 1.25rem;
line-height: 1.4;
color: white;
}
.doctor-title strong {
color: var(--primary-color);
font-weight: 700;
text-shadow: 0 0 20px rgba(236, 17, 126, 0.5);
}
.doctor-credentials-featured {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
max-width: 350px;
margin-left: auto;
margin-right: auto;
}
.credential-featured {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 1rem 1.5rem;
border-radius: 16px;
font-size: 1rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.credential-featured:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateX(8px);
border-color: var(--primary-color);
}
.credential-featured i {
color: var(--primary-color);
font-size: 1.25rem;
width: 20px;
text-shadow: 0 0 10px rgba(236, 17, 126, 0.5);
}
/* Botões */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 2rem;
border: none;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
font-size: 1rem;
font-family: inherit;
}
.btn-primary {
background: var(--secondary-color);
color: white;
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
background: #047857;
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--primary-color);
color: white;
box-shadow: var(--shadow-md);
}
.btn-secondary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-outline {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-outline:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
}
.btn-large {
padding: 1.25rem 2.5rem;
font-size: 1.125rem;
}
.btn-xl {
padding: 1.5rem 3rem;
font-size: 1.25rem;
font-weight: 700;
}
/* Section Headers */
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1rem;
line-height: 1.2;
}
.section-header p {
font-size: 1.125rem;
color: var(--text-gray);
max-width: 700px;
margin: 0 auto;
}
/* Texto mais escuro na seção problem-solution */
.problem-solution .section-header p {
color: var(--text-dark);
font-weight: 500;
}
/* Para Quem Section */
/* Para Quem - Nova Versão Enhanced */
.para-quem-enhanced {
padding: 100px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
overflow: hidden;
}
.para-quem-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.3;
}
/* Target Hero */
.target-hero {
text-align: center;
margin-bottom: 5rem;
position: relative;
z-index: 2;
}
.target-hero h2 {
font-size: 2.5rem;
font-weight: 800;
color: var(--text-dark);
margin-bottom: 1rem;
line-height: 1.2;
}
.target-subtitle {
font-size: 1.25rem;
color: var(--text-gray);
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
/* Cards Grid */
.target-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-bottom: 4rem;
position: relative;
z-index: 2;
}
.target-card-enhanced {
background: white;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border-top: 4px solid transparent;
}
.target-card-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform 0.3s ease;
transform-origin: left;
}
.target-card-enhanced:hover::before {
transform: scaleX(1);
}
.target-card-enhanced:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15);
}
.target-card-enhanced[data-category="clinical"]:hover::before {
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
.target-card-enhanced[data-category="expertise"]:hover::before {
background: linear-gradient(90deg, var(--secondary-color), var(--warning-color));
}
.target-card-enhanced[data-category="science"]:hover::before {
background: linear-gradient(90deg, var(--warning-color), var(--accent-color));
}
.target-card-enhanced[data-category="advanced"]:hover::before {
background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
}
.card-header {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 2rem 1rem;
}
.card-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
transition: all 0.3s ease;
}
.target-card-enhanced:hover .card-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}
.card-content {
padding: 0 2rem 2rem;
}
.card-content h3 {
font-size: 1.375rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1rem;
line-height: 1.3;
}
.card-content p {
font-size: 1rem;
color: var(--text-gray);
line-height: 1.6;
margin-bottom: 1.25rem;
}
/* CTA Enhanced */
.target-cta-enhanced {
background: white;
border-radius: 24px;
padding: 3rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
position: relative;
overflow: hidden;
z-index: 2;
}
.target-cta-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 0%, rgba(37, 99, 235, 0.05) 50%, transparent 100%);
transform: translateX(-100%);
animation: shimmer 3s infinite;
}
.cta-content {
display: grid;
grid-template-columns: auto 1fr;
gap: 2rem;
align-items: center;
}
.cta-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
flex-shrink: 0;
animation: bounce 2s infinite;
}
.cta-text h3 {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.cta-text p {
font-size: 1.125rem;
color: var(--text-gray);
line-height: 1.6;
}
.btn-primary-enhanced {
background: var(--gradient-primary);
color: white;
padding: 1.5rem 2.5rem;
border-radius: 16px;
text-decoration: none;
font-weight: 600;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
border: none;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-primary-enhanced::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.btn-primary-enhanced:hover::before {
left: 100%;
}
.btn-primary-enhanced:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(37, 99, 235, 0.5);
}
.btn-primary-enhanced i {
font-size: 1.25rem;
}
.btn-primary-enhanced span {
display: flex;
flex-direction: column;
text-align: left;
}
.btn-primary-enhanced strong {
font-size: 1.125rem;
margin-bottom: 0.25rem;
}
.btn-primary-enhanced small {
font-size: 0.875rem;
opacity: 0.9;
font-weight: 400;
}
/* Animações */
@keyframes checkPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); box-shadow: 0 6px 16px rgba(5, 150, 105, 0.6); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Contexto Section */
.contexto {
padding: 60px 0;
background: linear-gradient(135deg, #f8fafc 0%, rgba(244, 244, 244, 0.8) 100%);
position: relative;
}
.contexto::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
}
.contexto .container {
position: relative;
z-index: 2;
}
.contexto-content {
display: grid;
grid-template-columns: 1fr 350px;
gap: 4rem;
align-items: center;
}
.contexto-card {
display: flex;
align-items: center;
gap: 2rem;
background: white;
padding: 2.5rem;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
.contexto-icon {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
flex-shrink: 0;
}
.contexto-text h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.contexto-text p {
font-size: 1.125rem;
color: var(--text-gray);
margin-bottom: 0.5rem;
}
.contexto-source {
font-size: 0.875rem;
color: var(--text-muted);
font-style: italic;
}
.contexto-image {
display: flex;
justify-content: center;
align-items: center;
}
.noticia-image {
width: 100%;
max-width: 350px;
height: auto;
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
border: 2px solid rgba(255, 255, 255, 0.9);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.noticia-image:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
/* Event Schedule Section */
.event-schedule {
padding: 80px 0;
background: var(--background-white);
}
.schedule-tabs {
display: flex;
justify-content: center;
gap: 0;
margin: 3rem 0;
background: var(--background-light);
border-radius: 15px;
padding: 0.5rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.tab-btn {
background: transparent;
border: none;
padding: 1rem 2.5rem;
font-size: 1rem;
font-weight: 600;
color: var(--text-gray);
cursor: pointer;
border-radius: 12px;
transition: all 0.3s ease;
flex: 1;
text-align: center;
white-space: nowrap;
}
.tab-btn.active {
background: white;
color: var(--primary-color);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.tab-btn:hover {
color: var(--primary-color);
}
.schedule-content {
margin: 3rem 0;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.event-card {
display: flex;
align-items: center;
gap: 2rem;
background: white;
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
padding: 2rem;
margin-bottom: 2rem;
border: 1px solid rgba(236, 17, 126, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.event-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.event-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.event-date {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 1.5rem;
border-radius: 16px;
min-width: 120px;
flex-shrink: 0;
}
.date-number {
font-size: 2rem;
font-weight: 800;
line-height: 1;
margin-bottom: 0.25rem;
}
.date-month {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.25rem;
}
.date-year {
font-size: 0.75rem;
opacity: 0.9;
}
.event-details {
flex: 1;
}
.event-header {
margin-bottom: 1.5rem;
position: relative;
}
.event-header h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.75rem;
}
.new-badge {
position: absolute;
top: -0.5rem;
right: 0;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.module-content {
margin-top: 1.5rem;
}
.topic-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1rem;
}
.topic-list li {
background: rgba(248, 250, 252, 0.8);
border: 1px solid rgba(236, 17, 126, 0.1);
border-radius: 12px;
padding: 1rem 1.25rem;
font-size: 0.95rem;
color: var(--text-dark);
line-height: 1.5;
position: relative;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.topic-list li::before {
content: '●';
color: var(--primary-color);
font-weight: bold;
margin-right: 0.75rem;
font-size: 1.1rem;
}
.topic-list li:hover {
transform: translateX(5px);
border-left-color: var(--primary-color);
background: rgba(236, 17, 126, 0.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.topic-list li:nth-child(1) { animation-delay: 0.1s; }
.topic-list li:nth-child(2) { animation-delay: 0.2s; }
.topic-list li:nth-child(3) { animation-delay: 0.3s; }
.topic-list li:nth-child(4) { animation-delay: 0.4s; }
.topic-list li:nth-child(5) { animation-delay: 0.5s; }
.schedule-cta {
text-align: center;
margin-top: 3rem;
}
.schedule-cta p {
font-size: 1.125rem;
margin-bottom: 2rem;
color: var(--text-dark);
}
/* Problem Solution Section */
.problem-solution {
padding: 80px 0;
background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(236, 17, 126, 0.08) 100%), url('imagens/fundo_apraxia01.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
}
.problem-solution::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.3);
opacity: 1;
}
.problem-solution .container {
position: relative;
z-index: 1;
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 2rem;
margin: 4rem 0;
align-items: center;
}
.problem-side, .solution-side {
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.problem-side::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #dc2626, #ef4444);
}
.solution-side::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
.side-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.side-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 2rem;
color: white;
}
.problem-icon {
background: linear-gradient(135deg, #dc2626, #ef4444);
}
.solution-icon {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.side-header h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.side-header p {
color: var(--text-gray);
font-size: 0.95rem;
}
.problem-items, .solution-items {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.problem-item, .solution-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
border-radius: 12px;
transition: all 0.3s ease;
}
.problem-item {
background: rgba(220, 38, 38, 0.05);
border-left: 3px solid #dc2626;
}
.solution-item {
background: rgba(236, 17, 126, 0.05);
border-left: 3px solid var(--primary-color);
}
.problem-item:hover, .solution-item:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.item-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1rem;
color: white;
margin-top: 0.25rem;
}
.problem-item .item-icon {
background: linear-gradient(135deg, #dc2626, #ef4444);
}
.solution-item .item-icon {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.item-content h4 {
font-size: 1rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.item-content p {
font-size: 0.9rem;
color: var(--text-gray);
line-height: 1.5;
margin: 0;
}
.vs-divider {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
padding: 3rem 0;
height: 100%;
min-height: 200px;
}
.vs-circle {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
font-weight: 700;
box-shadow: 0 8px 25px rgba(236, 17, 126, 0.3);
}
.arrow-right {
font-size: 1.5rem;
color: var(--primary-color);
animation: bounce-right 2s infinite;
}
@keyframes bounce-right {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0);
}
40% {
transform: translateX(10px);
}
60% {
transform: translateX(5px);
}
}
.solution-cta {
margin-top: 4rem;
}
.cta-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
align-items: center;
position: relative;
overflow: hidden;
}
.cta-grid::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
.cta-message {
display: flex;
align-items: center;
gap: 1.5rem;
}
.cta-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
flex-shrink: 0;
}
.cta-text h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.cta-text p {
font-size: 1rem;
color: var(--text-gray);
line-height: 1.5;
margin: 0;
}
.cta-action {
text-align: center;
}
.btn-transformation {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
border-radius: 15px;
padding: 1.25rem 2rem;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 1rem;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(236, 17, 126, 0.3);
width: 100%;
justify-content: center;
}
.btn-transformation:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(236, 17, 126, 0.4);
color: white;
}
.btn-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.btn-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.3;
}
.btn-text strong {
font-size: 1.1rem;
font-weight: 700;
}
.btn-text small {
font-size: 0.85rem;
opacity: 0.9;
font-weight: 400;
}
/* Transformação Section */
.transformacao {
padding: 80px 0;
background: var(--background-light);
}
.beneficios-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2rem;
margin-bottom: 3rem;
}
/* Primeira linha: 3 cards ocupando 2 colunas cada */
.beneficios-grid .beneficio-card:nth-child(1),
.beneficios-grid .beneficio-card:nth-child(2),
.beneficios-grid .beneficio-card:nth-child(3) {
grid-column: span 2;
}
/* Segunda linha: 2 cards centralizados ocupando 3 colunas cada com offset */
.beneficios-grid .beneficio-card:nth-child(4) {
grid-column: 1 / span 3;
}
.beneficios-grid .beneficio-card:nth-child(5) {
grid-column: 4 / span 3;
}
.beneficio-card {
background: white;
padding: 2rem;
border-radius: 16px;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
text-align: center;
}
.beneficio-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.beneficio-icon {
width: 80px;
height: 80px;
background: var(--gradient-secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2rem;
color: white;
position: relative;
z-index: 1;
}
.beneficio-icon i {
font-size: 2rem !important;
color: white !important;
display: block !important;
width: 100%;
text-align: center;
line-height: 1;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
}
.beneficio-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
}
.beneficio-card p {
color: var(--text-gray);
line-height: 1.6;
}
.transformacao-cta {
text-align: center;
}
.transformacao-cta p {
font-size: 1.125rem;
margin-bottom: 1.4rem; /* Reduzido 30% de 2rem para 1.4rem */
color: var(--text-dark);
}
/* Curso Info Section */
.curso-info {
padding: 60px 0;
background: var(--background-blue);
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.info-card {
background: white;
padding: 2rem;
border-radius: 16px;
box-shadow: var(--shadow-md);
text-align: center;
}
.info-card i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.info-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
}
.info-card p {
color: var(--text-gray);
line-height: 1.6;
}
/* Depoimentos Section - Carrossel Moderno */
.depoimentos {
padding: 80px 0;
background: linear-gradient(135deg, #1C1C1C 0%, #2a2a2a 100%);
position: relative;
}
.depoimentos::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(236, 17, 126, 0.05) 0%, rgba(198, 40, 40, 0.05) 100%);
z-index: 1;
}
.depoimentos .container {
position: relative;
z-index: 2;
}
/* Ajustes de cor para o fundo escuro */
.depoimentos .section-header h2 {
color: white;
}
.depoimentos .section-header p {
color: rgba(255, 255, 255, 0.8);
}
/* Estrutura de duas colunas para depoimentos */
.depoimentos-content {
display: flex;
gap: 40px;
align-items: flex-start;
margin-top: 30px;
}
.video-column {
flex: 1;
max-width: 45%;
}
.carousel-column {
flex: 1;
max-width: 55%;
}
.video-container {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
background: #f8f9fa;
}
.depoimento-video {
width: 100%;
height: auto;
display: block;
border-radius: 15px;
}
/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
.depoimentos-content {
flex-direction: column;
gap: 30px;
}
.video-column,
.carousel-column {
max-width: 100%;
}
.carousel-track {
min-height: 400px;
}
.depoimento-card-modern {
padding: 2rem;
min-height: 350px;
}
.carousel-controls {
padding: 0 5px;
}
.carousel-btn {
width: 40px;
height: 40px;
}
}
.testimonial-carousel {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.carousel-container {
overflow: visible;
border-radius: 24px;
box-shadow: var(--shadow-xl);
}
.carousel-track {
position: relative;
width: 100%;
height: auto;
min-height: 500px;
}
.depoimento-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
visibility: hidden;
transform: translateX(30px);
transition: all 0.5s ease-in-out;
z-index: 1;
}
.depoimento-slide.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
z-index: 2;
}
.depoimento-card-modern {
background: white;
padding: 3rem;
text-align: center;
position: relative;
min-height: 450px;
height: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: visible;
}
.quote-icon {
position: absolute;
top: 2rem;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
background: var(--gradient-secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
}
.quote-icon i {
font-size: 2rem;
color: white;
}
.depoimento-text {
margin: 4rem 0 2rem;
flex-grow: 1;
display: flex;
align-items: center;
}
.depoimento-text p {
font-size: 1.25rem;
line-height: 1.7;
color: var(--text-dark);
font-style: italic;
font-weight: 400;
max-width: 600px;
margin: 0 auto;
}
.depoimento-author-modern {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
padding-bottom: 1rem;
flex-shrink: 0;
}
.author-avatar {
width: 60px;
height: 60px;
background: var(--gradient-secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
}
.author-avatar i {
font-size: 2rem;
color: white;
}
.author-info {
text-align: left;
}
.author-info h4 {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.25rem;
}
.author-info span {
font-size: 0.875rem;
color: var(--text-muted);
display: block;
margin-bottom: 0.5rem;
}
.rating {
display: flex;
gap: 2px;
}
.rating i {
font-size: 0.875rem;
color: #FFD700;
}
/* Controles do Carrossel */
.carousel-controls {
position: absolute;
top: 50%;
width: 100%;
left: 0;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
pointer-events: none;
padding: 0 10px;
}
.carousel-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
border: none;
box-shadow: var(--shadow-lg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
pointer-events: all;
position: relative;
z-index: 10;
}
.carousel-btn:hover {
background: var(--primary-color);
color: white;
transform: scale(1.1);
}
.carousel-btn i {
font-size: 1.125rem;
color: var(--text-dark);
transition: color 0.3s ease;
}
.carousel-btn:hover i {
color: white;
}
.prev-btn {
position: relative;
}
.next-btn {
position: relative;
}
/* Indicadores */
.carousel-indicators {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-top: 2rem;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active {
background: var(--primary-color);
transform: scale(1.2);
}
.indicator:hover {
background: var(--primary-color);
opacity: 0.7;
}
/* Garantir que o conteúdo completo seja visível */
.depoimento-slide {
min-width: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
overflow: visible;
}
.testimonial-carousel {
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
padding: 0 60px;
}
/* Local Section - Hotel Showcase */
.local {
padding: 80px 0;
background: #fff;
}
.local .section-header h2 {
color: var(--text-dark);
}
.local .section-header p {
color: var(--text-gray);
}
.hotel-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
margin-top: 3rem;
}
.hotel-gallery {
display: flex;
flex-direction: column;
gap: 1rem;
}
.hotel-image-main {
position: relative;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.hotel-image-main:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.hotel-img {
width: 100%;
height: 300px;
object-fit: cover;
transition: all 0.3s ease;
}
.hotel-image-main .hotel-img {
height: 400px;
}
.hotel-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 2rem;
}
.hotel-overlay h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.hotel-overlay p {
opacity: 0.9;
}
.hotel-images-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.hotel-image-item {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.hotel-image-item:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.hotel-image-item .hotel-img {
height: 150px;
}
.image-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
text-align: center;
}
.hotel-details {
display: flex;
flex-direction: column;
gap: 2rem;
}
.endereco-completo {
background: #f8f9fa;
padding: 2.5rem;
border-radius: 16px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.endereco-completo:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.endereco-header {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.endereco-header i {
color: var(--accent-color);
font-size: 1.5rem;
margin-top: 0.25rem;
}
.endereco-header h4 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.endereco-header p {
color: var(--text-gray);
margin-bottom: 0.25rem;
}
.endereco-header span {
color: var(--text-muted);
font-size: 0.875rem;
}
.hotel-features {
background: #fff;
padding: 2.5rem;
border-radius: 16px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.hotel-features:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.hotel-features h4 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.hotel-features h4 i {
color: var(--warning-color);
}
.features-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.features-list li {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text-gray);
font-size: 0.95rem;
}
.features-list li i {
color: var(--secondary-color);
font-size: 1rem;
}
.map-container {
background: #fff;
padding: 2.5rem;
border-radius: 16px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.map-container:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.map-container h4 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.map-container h4 i {
color: var(--primary-color);
}
.map-embed {
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.map-embed iframe {
width: 100%;
height: 300px;
border: none;
}
.local-cta {
text-align: center;
margin-top: 2.5rem;
padding: 2rem 0;
border-top: 1px solid var(--border-color);
}
.local-cta .btn {
padding: 1.25rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
min-width: 280px;
border-radius: 12px;
transition: all 0.3s ease;
}
.local-cta .btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* CTA Final Section Enhanced */
.cta-final-enhanced {
position: relative;
padding: 100px 0;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
color: white;
text-align: center;
overflow: hidden;
}
.cta-background-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(219, 39, 119, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.cta-final-content {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
}
/* Badge de Destaque */
.cta-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #dc2626, #b91c1c);
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 2rem;
box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3);
animation: pulse 2s infinite;
}
.cta-badge i {
color: #fbbf24;
}
/* Header */
.cta-header {
margin-bottom: 3rem;
}
.cta-header h2 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.1;
background: linear-gradient(135deg, #ffffff, #e5e7eb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cta-subtitle {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
max-width: 700px;
margin: 0 auto;
}
/* Benefícios Destaque */
.cta-benefits {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-bottom: 4rem;
}
.benefit-item {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
}
.benefit-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.benefit-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
.benefit-icon i {
font-size: 1.5rem;
color: white;
}
.benefit-text {
text-align: center;
}
.benefit-text strong {
display: block;
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: white;
}
.benefit-text span {
color: rgba(255, 255, 255, 0.75);
font-size: 0.95rem;
}
/* Urgência Enhanced */
.urgencia-enhanced {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.urgencia-timer,
.urgencia-vagas {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(185, 28, 28, 0.1));
border: 2px solid rgba(220, 38, 38, 0.3);
border-radius: 16px;
padding: 2rem;
display: flex;
align-items: center;
gap: 1rem;
animation: glow 3s ease-in-out infinite alternate;
}
.urgencia-timer i,
.urgencia-vagas i {
font-size: 2rem;
color: #fbbf24;
flex-shrink: 0;
}
.timer-content,
.vagas-content {
text-align: left;
}
.timer-content strong,
.vagas-content strong {
display: block;
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.25rem;
color: white;
}
.timer-content span,
.vagas-content span {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
/* Botão Principal */
.cta-action-enhanced {
margin-bottom: 4rem;
}
.btn-cta-final {
position: relative;
display: inline-block;
padding: 2rem 3rem;
text-decoration: none;
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
border: 2px solid transparent;
background: linear-gradient(135deg, #dc2626, #b91c1c);
box-shadow: 0 15px 35px rgba(220, 38, 38, 0.4);
}
.btn-cta-final:hover {
transform: translateY(-3px);
box-shadow: 0 25px 50px rgba(220, 38, 38, 0.6);
}
.btn-background {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-cta-final:hover .btn-background {
left: 100%;
}
.btn-content {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
color: white;
}
.btn-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn-icon i {
font-size: 1.25rem;
}
.btn-text {
text-align: left;
}
.btn-text strong {
display: block;
font-size: 1.375rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.btn-text span {
font-size: 0.95rem;
opacity: 0.9;
}
/* Garantias Enhanced */
.garantias-enhanced {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.garantia-enhanced {
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 1rem 1.5rem;
border-radius: 12px;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.garantia-enhanced:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
}
.garantia-enhanced i {
color: var(--warning-color);
font-size: 1rem;
}
/* Contato */
.cta-contact {
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cta-contact p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
font-size: 0.95rem;
}
.cta-contact a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: color 0.3s ease;
}
.cta-contact a:hover {
color: white;
}
/* Animações */
@keyframes glow {
from {
box-shadow: 0 0 20px rgba(220, 38, 38, 0.3);
}
to {
box-shadow: 0 0 30px rgba(220, 38, 38, 0.6);
}
}
/* Footer */
.footer {
background: var(--text-dark);
color: white;
padding: 60px 0 20px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3,
.footer-section h4 {
margin-bottom: 1rem;
color: white;
}
.footer-section p {
color: #9ca3af;
line-height: 1.6;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: #9ca3af;
}
.footer-section ul li i {
color: var(--primary-color);
width: 16px;
}
.footer-section ul li a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: var(--primary-color);
}
.footer-section ul li a i {
margin-right: 0.5rem;
}
.footer-bottom {
border-top: 1px solid #374151;
padding-top: 2rem;
text-align: center;
color: #9ca3af;
}
/* Footer Agency */
.footer-agency {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 0px solid #374151;
text-align: center;
}
.agency-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.agency-text {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: #9ca3af;
}
.made-with {
color: #9ca3af;
}
.agency-heart {
color: #ef4444;
animation: heartbeat 1.5s ease-in-out infinite;
font-size: 0.875rem;
}
.agency-name {
color: #e5e7eb;
}
.agency-name strong {
color: var(--primary-color);
font-weight: 600;
}
.agency-link {
color: var(--primary-color);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.agency-link:hover {
color: white;
text-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}
.agency-tagline {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: #6b7280;
font-style: italic;
}
.agency-tagline i {
color: var(--secondary-color);
font-size: 0.75rem;
}
/* Animação do coração */
@keyframes heartbeat {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
/* Responsive Design */
/* Event Schedule Responsive */
@media (max-width: 1024px) {
.event-card {
gap: 1.5rem;
}
.event-meta {
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.schedule-tabs {
flex-direction: column;
max-width: none;
padding: 0.25rem;
}
.tab-btn {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.event-card {
flex-direction: column;
text-align: center;
gap: 1.5rem;
padding: 1.5rem;
}
.event-date {
min-width: auto;
width: 100%;
max-width: 200px;
margin: 0 auto;
}
.topic-list {
gap: 0.75rem;
}
.topic-list li {
padding: 0.875rem 1rem;
font-size: 0.9rem;
}
.new-badge {
position: static;
display: inline-block;
margin-top: 0.5rem;
}
}
@media (max-width: 480px) {
.event-card {
padding: 1rem;
gap: 1rem;
}
.date-number {
font-size: 1.5rem;
}
.event-header h3 {
font-size: 1.25rem;
}
.topic-item {
font-size: 0.9rem;
gap: 0.5rem;
}
}
@media (max-width: 1024px) {
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-title {
font-size: 3rem;
}
.doctor-image-featured {
width: 280px;
height: 340px;
}
.doctor-credentials-featured {
max-width: 300px;
}
.doctor-credentials {
gap: 0.5rem;
}
.credential-item {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
.hotel-showcase {
grid-template-columns: 1fr;
gap: 2rem;
}
.local-cta {
margin-top: 2rem;
padding: 1.5rem 0;
}
.local-cta .btn {
width: 100%;
max-width: 400px;
margin: 0 auto;
display: block;
}
.hotel-images-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.hotel-image-item .hotel-img {
height: 200px;
}
.contexto-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.contexto-card {
flex-direction: column;
text-align: center;
}
.noticia-image {
max-width: 300px;
}
/* Para Quem Enhanced - Tablet */
.target-cards-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.card-content h3 {
font-size: 1.15rem;
}
.card-content p {
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
/* About Section - Mobile */
.about-section {
padding: 80px 0;
}
.about-content {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.about-title {
font-size: 2.5rem;
}
.about-intro {
font-size: 1.125rem;
}
.detail-item {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.detail-icon {
width: 50px;
height: 50px;
}
.detail-icon i {
font-size: 1.25rem;
}
.about-stats {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.stat-number {
font-size: 2rem;
}
.main-image {
height: 400px;
}
.nav-menu {
display: none;
position: fixed;
left: -100%;
top: 80px;
flex-direction: column;
background: rgba(37, 99, 235, 0.95);
backdrop-filter: blur(10px);
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.2);
gap: 0;
padding: 2rem 0;
border-radius: 0;
border: none;
}
.nav-menu.active {
display: flex;
left: 0;
}
.nav-menu a {
padding: 1rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
text-align: center;
}
.nav-toggle {
display: flex;
}
.hero {
padding: 100px 0 60px;
}
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.25rem;
}
.hero-highlights {
grid-template-columns: 1fr;
}
.section-header h2 {
font-size: 2rem;
}
.target-grid,
.depoimentos-grid {
grid-template-columns: 1fr;
}
/* Carrossel Responsivo */
.testimonial-carousel {
max-width: 100%;
margin: 0 10px;
padding: 0 50px;
}
.depoimento-card-modern {
padding: 2rem 1.5rem;
min-height: 380px;
}
.quote-icon {
width: 60px;
height: 60px;
}
.quote-icon i {
font-size: 1.5rem;
}
.depoimento-text p {
font-size: 1.125rem;
}
.author-avatar {
width: 50px;
height: 50px;
}
.author-avatar i {
font-size: 1.5rem;
}
.carousel-btn {
width: 40px;
height: 40px;
}
.carousel-btn i {
font-size: 1rem;
}
.prev-btn {
left: -20px;
}
.next-btn {
right: -20px;
}
.beneficios-grid {
grid-template-columns: repeat(2, 1fr);
}
.beneficios-grid .beneficio-card:nth-child(1),
.beneficios-grid .beneficio-card:nth-child(2),
.beneficios-grid .beneficio-card:nth-child(3),
.beneficios-grid .beneficio-card:nth-child(4),
.beneficios-grid .beneficio-card:nth-child(5) {
grid-column: span 1;
}
/* Para Quem Enhanced - Mobile */
.target-hero h2 {
font-size: 2rem;
}
.target-cards-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.target-cta-enhanced {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem;
text-align: center;
}
.cta-content {
grid-template-columns: 1fr;
gap: 1rem;
text-align: center;
}
.desafios-grid {
grid-template-columns: 1fr;
}
.urgencia {
flex-direction: column;
gap: 1rem;
}
.estrutura-buttons {
flex-direction: column;
align-items: center;
}
.garantias {
grid-template-columns: 1fr;
gap: 1rem;
max-width: none;
}
.comparison-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.vs-divider {
order: 1;
padding: 1rem 0;
}
.problem-side {
order: 0;
}
.solution-side {
order: 2;
}
.vs-circle {
width: 60px;
height: 60px;
font-size: 1.2rem;
}
.arrow-right {
transform: rotate(90deg);
font-size: 1.2rem;
}
.side-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.problem-item, .solution-item {
padding: 0.875rem;
}
.item-icon {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.item-content h4 {
font-size: 0.95rem;
}
.item-content p {
font-size: 0.85rem;
}
.cta-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: center;
}
.cta-message {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.btn-transformation {
padding: 1rem 1.5rem;
}
/* CTA Final Enhanced Responsive - Tablet */
.cta-header h2 {
font-size: 2.5rem;
}
.cta-benefits {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.urgencia-enhanced {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.garantias-enhanced {
flex-wrap: wrap;
gap: 1rem;
}
}
@media (max-width: 480px) {
/* About Section - Mobile Small */
.about-section {
padding: 60px 0;
}
.about-content {
gap: 2rem;
}
.about-title {
font-size: 2rem;
}
.about-intro {
font-size: 1rem;
}
.about-details {
gap: 1.5rem;
}
.detail-content h4 {
font-size: 1.125rem;
}
.detail-content p {
font-size: 0.9rem;
}
.about-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.stat-number {
font-size: 1.75rem;
}
.main-image {
height: 350px;
}
.container {
padding: 0 15px;
}
.nav-container {
padding: 1rem 15px;
}
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.125rem;
}
.doctor-image {
width: 200px;
height: 240px;
}
.doctor-card-enhanced {
padding: 2rem 1.5rem 1.5rem;
max-width: 320px;
}
.doctor-credentials {
gap: 0.5rem;
}
.credential-item {
padding: 0.5rem;
font-size: 0.75rem;
}
.hotel-showcase {
gap: 1.5rem;
}
.hotel-images-grid {
grid-template-columns: 1fr;
}
.hotel-details {
gap: 1.5rem;
}
.endereco-completo,
.hotel-features,
.map-container {
padding: 1.5rem;
}
.local-cta {
margin-top: 1.5rem;
padding: 1rem 0;
}
.local-cta .btn {
padding: 1rem 1.5rem;
font-size: 1rem;
min-width: auto;
width: 100%;
}
.map-embed iframe {
height: 250px;
}
.btn {
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
}
.btn-large {
padding: 1rem 2rem;
font-size: 1rem;
}
.btn-xl {
padding: 1.25rem 2rem;
font-size: 1.125rem;
}
.target-card,
.beneficio-card,
.depoimento-card {
padding: 1.5rem;
}
/* Carrossel Mobile Small */
.testimonial-carousel {
margin: 0 5px;
padding: 0 40px;
}
.depoimento-card-modern {
padding: 1.5rem 1rem;
min-height: 350px;
}
.quote-icon {
width: 50px;
height: 50px;
top: 1.5rem;
}
.quote-icon i {
font-size: 1.25rem;
}
.depoimento-text {
margin: 3rem 0 1.5rem;
}
.depoimento-text p {
font-size: 1rem;
line-height: 1.6;
}
.depoimento-author-modern {
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
.author-info {
text-align: center;
}
.carousel-controls {
padding: 0 -50px;
}
.prev-btn {
left: -15px;
}
.next-btn {
right: -15px;
}
.carousel-btn {
width: 35px;
height: 35px;
}
.carousel-btn i {
font-size: 0.875rem;
}
.beneficios-grid {
grid-template-columns: 1fr;
}
.beneficios-grid .beneficio-card:nth-child(1),
.beneficios-grid .beneficio-card:nth-child(2),
.beneficios-grid .beneficio-card:nth-child(3),
.beneficios-grid .beneficio-card:nth-child(4),
.beneficios-grid .beneficio-card:nth-child(5) {
grid-column: span 1;
}
/* Para Quem Enhanced - Mobile Small */
.target-hero h2 {
font-size: 1.75rem;
}
.target-subtitle {
font-size: 1rem;
}
.card-header {
padding: 1.5rem 1.5rem 1rem;
}
.card-content {
padding: 0 1.5rem 1.5rem;
}
.card-content h3 {
font-size: 1.25rem;
}
.card-content p {
font-size: 0.95rem;
}
.btn-primary-enhanced {
padding: 1.25rem 2rem;
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.btn-primary-enhanced span {
text-align: center;
}
.modulo-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.solucao {
padding: 2rem;
}
.solucao-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}
/* CTA Final Enhanced Responsive - Mobile */
.cta-final-enhanced {
padding: 80px 0;
}
.cta-header h2 {
font-size: 2rem;
}
.cta-subtitle {
font-size: 1.125rem;
}
.benefit-item {
padding: 1.5rem;
}
.benefit-icon {
width: 50px;
height: 50px;
margin-bottom: 1rem;
}
.benefit-icon i {
font-size: 1.25rem;
}
.urgencia-timer,
.urgencia-vagas {
padding: 1.5rem;
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.urgencia-timer i,
.urgencia-vagas i {
font-size: 1.5rem;
}
.timer-content,
.vagas-content {
text-align: center;
}
.btn-cta-final {
padding: 1.5rem 2rem;
width: 100%;
max-width: 350px;
margin: 0 auto;
display: block;
}
.btn-content {
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
.btn-text strong {
font-size: 1.25rem;
}
.btn-text span {
font-size: 0.9rem;
}
.garantias-enhanced {
flex-direction: column;
gap: 1rem;
max-width: 300px;
margin: 0 auto;
}
.garantia-enhanced {
justify-content: center;
}
/* Footer Agency Responsive */
.agency-content {
gap: 0.5rem;
}
.agency-text {
font-size: 0.8rem;
flex-wrap: wrap;
justify-content: center;
}
.agency-tagline {
font-size: 0.75rem;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
}
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
/* Animações */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.hero-badge {
animation: pulse 2s infinite;
}
/* Estados de foco */
.btn:focus,
input:focus,
select:focus,
textarea:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Menu mobile ativo - removido porque já está na media query */
.nav-menu a.active {
color: var(--primary-color);
}
/* Efeitos de hover melhorados */
.target-card:hover .target-icon,
.beneficio-card:hover .beneficio-icon {
transform: scale(1.1);
}
.doctor-card:hover {
transform: translateY(-5px);
}
.modulo-card:hover {
transform: translateY(-5px);
}
/* Notificações */
.notificacao {
position: fixed;
bottom: 20px;
right: 20px;
background: white;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
transform: translateY(100px);
opacity: 0;
transition: all 0.3s ease;
}
.notificacao-show {
transform: translateY(0);
opacity: 1;
}
.notificacao-success {
border-left: 4px solid #4CAF50;
}
.notificacao-info {
border-left: 4px solid #2196F3;
}
.notificacao-texto {
margin-right: 10px;
font-size: 0.9rem;
}
.notificacao-close {
position: absolute;
top: 5px;
right: 5px;
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: #999;
padding: 0;
line-height: 1;
}
@media (max-width: 768px) {
.notificacao {
left: 20px;
right: 20px;
bottom: 20px;
text-align: center;
}
}
/* About Julie Section */
.about-julie {
background-color: var(--background-light);
padding: 80px 0;
}
.about-julie .about-content.reverse {
flex-direction: row-reverse;
gap: 60px;
}
.about-julie .about-content.reverse .about-text {
padding-left: 0;
padding-right: 0;
flex: 1.2;
}
.about-julie .about-content.reverse .about-image {
padding-right: 0;
padding-left: 0;
flex: 0.8;
}
.about-julie .about-image .image-container {
height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
.about-julie .about-image .image-container img {
height: 100%;
width: auto;
object-fit: contain;
}
.about-julie .section-badge {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.about-julie .about-title {
color: var(--text-dark);
margin-bottom: 20px;
font-size: 2.5rem;
}
.about-julie .about-intro {
font-size: 1.5rem;
color: var(--primary-color);
font-weight: 600;
margin-bottom: 40px;
}
.about-julie .detail-item {
background: var(--background-white);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-julie .detail-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.about-julie .detail-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 1.2rem;
}
.about-julie .detail-content h4 {
color: var(--text-dark);
font-size: 1.3rem;
margin-bottom: 15px;
}
.about-julie .detail-content p {
color: var(--text-gray);
line-height: 1.7;
font-size: 1.1rem;
}
@media (max-width: 768px) {
.about-julie .about-content.reverse {
flex-direction: column;
gap: 40px;
}
.about-julie .about-content.reverse .about-text,
.about-julie .about-content.reverse .about-image {
padding: 0;
width: 100%;
}
.about-julie .about-image .image-container {
height: 400px;
}
.about-julie .about-title {
font-size: 2rem;
}
.about-julie .about-intro {
font-size: 1.3rem;
}
.about-julie .detail-content h4 {
font-size: 1.2rem;
}
.about-julie .detail-content p {
font-size: 1rem;
}
}
/* Estilos específicos para cada versão do site */
/* Versão 2 - Azul */
body.index2 .about-julie .section-badge {
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%) !important;
}
body.index2 .about-julie .detail-icon {
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%) !important;
}
/* Versão 3 - Verde */
body.index3 .about-julie .section-badge {
background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%) !important;
}
body.index3 .about-julie .detail-icon {
background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%) !important;
}
/* Versão 4 - Roxo */
body.index4 .about-julie .section-badge {
background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%) !important;
}
body.index4 .about-julie .detail-icon {
background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%) !important;
}
/* Versão 5 - Laranja */
body.index5 .about-julie .section-badge {
background: linear-gradient(135deg, #f57c00 0%, #e65100 100%) !important;
}
body.index5 .about-julie .detail-icon {
background: linear-gradient(135deg, #f57c00 0%, #e65100 100%) !important;
}
/* Versão 6 - Rosa */
body.index6 .about-julie .section-badge {
background: linear-gradient(135deg, #c2185b 0%, #880e4f 100%) !important;
}
body.index6 .about-julie .detail-icon {
background: linear-gradient(135deg, #c2185b 0%, #880e4f 100%) !important;
}
/* Estilos específicos para cada versão do site */
/* Versão 1 - Roxo Original */
body.index1 .about-julie .section-badge {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
body.index1 .about-julie .detail-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
/* Ajustes Mobile - Header e Navegação */
@media (max-width: 768px) {
.nav-container {
padding: 1rem;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 100vh;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
flex-direction: column;
justify-content: center;
padding: 2rem;
transition: 0.3s ease;
border-radius: 0;
}
.nav-menu.active {
right: 0;
}
.nav-menu a {
color: var(--text-dark);
font-size: 1.2rem;
padding: 1rem 0;
width: 100%;
text-align: center;
}
.nav-toggle {
display: flex;
z-index: 1001;
}
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
}
/* Ajustes Mobile - Hero Section */
@media (max-width: 768px) {
.hero-container {
flex-direction: column;
padding: 2rem 1rem;
}
.hero-content {
text-align: center;
padding: 0;
}
.hero-title {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.hero-highlights {
flex-direction: column;
gap: 1rem;
}
.event-info {
flex-direction: column;
gap: 1rem;
}
.hero-image {
margin-top: 2rem;
}
.doctor-photo-featured {
max-width: 300px;
margin: 0 auto;
}
}
/* Ajustes Mobile - About Section */
@media (max-width: 768px) {
.about-section {
padding: 4rem 0;
}
.about-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-title {
font-size: 2.5rem;
}
.about-intro {
font-size: 1.1rem;
}
.detail-item {
flex-direction: column;
align-items: center;
text-align: center;
}
.detail-icon {
margin-bottom: 1rem;
}
.about-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* Ajustes Mobile - Cards e Grids */
@media (max-width: 768px) {
.target-cards-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.beneficios-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.comparison-grid {
grid-template-columns: 1fr;
}
.vs-divider {
display: none;
}
}
/* Ajustes Mobile - Depoimentos */
@media (max-width: 768px) {
.depoimentos-content {
flex-direction: column;
}
.video-column,
.carousel-column {
width: 100%;
}
.depoimento-card-modern {
padding: 1.5rem;
}
.depoimento-text p {
font-size: 1rem;
}
.carousel-controls {
bottom: -40px;
}
}
/* Ajustes Mobile - Local e Hotel */
@media (max-width: 768px) {
.hotel-showcase {
flex-direction: column;
}
.hotel-gallery {
margin-bottom: 2rem;
}
.hotel-images-grid {
grid-template-columns: 1fr;
}
.hotel-details {
padding: 1.5rem;
}
.map-embed iframe {
height: 250px;
}
}
/* Ajustes Mobile - CTA e Footer */
@media (max-width: 768px) {
.cta-final-content {
padding: 2rem 1rem;
}
.cta-header h2 {
font-size: 2rem;
}
.benefit-item {
flex-direction: column;
text-align: center;
}
.benefit-icon {
margin-bottom: 1rem;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.footer-section ul li {
justify-content: center;
}
}
/* Ajustes Mobile - Utilitários */
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
.section-header {
text-align: center;
}
.section-header h2 {
font-size: 2rem;
}
.btn {
width: 100%;
text-align: center;
}
.btn-large {
padding: 1rem;
}
}
/* Ajustes Mobile - Animações e Transições */
@media (max-width: 768px) {
.fade-in-up {
animation: fadeInUp 0.5s ease forwards;
}
.btn:focus,
.nav-menu a:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(236, 17, 126, 0.3);
}
}
/* Ajustes Mobile - Melhorias Adicionais */
@media (max-width: 768px) {
/* Prevenir scroll quando menu está aberto */
body.menu-open {
overflow: hidden;
}
/* Melhorar espaçamento geral */
section {
padding: 3rem 0;
}
/* Ajustar tamanho de fontes */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
p { font-size: 1rem; }
/* Melhorar botões */
.btn {
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
/* Ajustar cards */
.card {
padding: 1.5rem;
}
/* Melhorar formulários */
input, textarea, select {
font-size: 16px; /* Prevenir zoom em iOS */
padding: 0.875rem;
}
/* Ajustar imagens */
img {
max-width: 100%;
height: auto;
}
/* Melhorar espaçamento entre elementos */
.spacing-sm { margin: 0.5rem 0; }
.spacing-md { margin: 1rem 0; }
.spacing-lg { margin: 2rem 0; }
/* Ajustar grid de benefícios */
.beneficios-grid {
gap: 1rem;
}
/* Melhorar carrossel */
.carousel-container {
padding: 0 1rem;
}
/* Ajustar footer */
.footer {
padding: 3rem 0 1rem;
}
/* Melhorar CTA */
.cta-final-enhanced {
padding: 3rem 1rem;
}
/* Ajustar modal */
.modal-content {
width: 90%;
margin: 1rem;
padding: 1.5rem;
}
}
/* Ajustes Mobile - Melhorias de Performance */
@media (max-width: 768px) {
/* Reduzir animações em dispositivos móveis */
* {
animation-duration: 0.3s !important;
transition-duration: 0.3s !important;
}
/* Otimizar renderização */
.transform-gpu {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
/* Melhorar performance de scroll */
.smooth-scroll {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
}
/* Seção de Valores */
.valores-section {
padding: 80px 0;
background: linear-gradient(135deg, #2a2a2a 30%, var(--primary-dark) 100%);
position: relative;
overflow: hidden;
}
.valores-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.1;
}
.valores-intro {
text-align: center;
margin-bottom: 40px;
position: relative;
}
.valores-intro .section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 8px 16px;
border-radius: 20px;
margin-bottom: 16px;
backdrop-filter: blur(4px);
}
.valores-intro h2 {
font-size: 2.5rem;
color: white;
margin-bottom: 16px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.valores-highlight {
font-size: 1.2rem;
color: white;
font-weight: 600;
margin-bottom: 32px;
opacity: 0.9;
}
.valores-urgency {
display: flex;
justify-content: center;
gap: 24px;
margin-bottom: 48px;
position: relative;
}
.urgency-item {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
padding: 12px 24px;
border-radius: 8px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.urgency-item i {
color: white;
font-size: 1.2rem;
}
.urgency-item span {
color: white;
}
.valores-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 48px;
position: relative;
}
.valor-card {
background: white;
border-radius: 12px;
padding: 32px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
position: relative;
transition: all 0.3s ease;
}
.valor-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
.valor-card.featured {
border: 2px solid var(--primary-color);
background: white;
}
.valor-badge {
position: absolute;
top: -12px;
right: 24px;
background: var(--primary-color);
color: white;
padding: 6px 16px;
border-radius: 20px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.valor-header {
margin-bottom: 24px;
}
.valor-header h3 {
font-size: 1.5rem;
color: var(--text-dark);
margin-bottom: 8px;
}
.valor-dates {
color: var(--text-light);
font-size: 0.9rem;
}
.valor-includes {
margin-bottom: 24px;
}
.valor-includes h4 {
font-size: 1.1rem;
color: var(--text-dark);
margin-bottom: 16px;
}
.valor-includes ul {
list-style: none;
padding: 0;
}
.valor-includes li {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: var(--text-dark);
}
.valor-includes i {
color: var(--primary-color);
}
.valor-precos {
margin-bottom: 32px;
}
.valor-precos h4 {
font-size: 1.1rem;
color: var(--text-dark);
margin-bottom: 16px;
}
.lote-item {
background: var(--light-bg);
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
border: 1px solid var(--border-color);
}
.lote-item.featured {
background: var(--primary-color);
color: white;
border: none;
}
.lote-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.lote-nome {
font-weight: 600;
}
.lote-badge {
background: rgba(255,255,255,0.2);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.9rem;
}
.lote-precos {
display: flex;
flex-direction: column;
gap: 8px;
}
.preco-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.preco-tipo {
font-size: 0.9rem;
color: var(--text-light);
}
.preco-valor {
font-weight: 600;
font-size: 1.1rem;
color: var(--text-dark);
}
.lote-item.featured .preco-tipo,
.lote-item.featured .preco-valor {
color: white;
}
.valor-cta {
text-align: center;
}
.valor-cta .btn {
width: 100%;
padding: 16px;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.valor-cta .btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}
.valores-alert {
background: rgba(255, 255, 255, 0.1);
color: white;
padding: 16px 24px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 32px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.valores-footer {
text-align: center;
position: relative;
}
.valores-footer p {
margin-bottom: 16px;
color: white;
opacity: 0.9;
}
.btn-whatsapp {
background: #25D366;
color: white;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-whatsapp:hover {
background: #128C7E;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
.valores-section {
padding: 40px 0;
}
.valores-intro h2 {
font-size: 2rem;
}
.valores-urgency {
flex-direction: column;
gap: 16px;
}
.valores-grid {
grid-template-columns: 1fr;
}
.valor-card {
padding: 24px;
}
.valor-header h3 {
font-size: 1.3rem;
}
.lote-item {
padding: 12px;
}
.preco-valor {
font-size: 1rem;
}
}
.valor-detalhes {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.valor-ideal,
.valor-resultados {
margin-bottom: 1.5rem;
}
.valor-ideal h4,
.valor-resultados h4 {
color: #2c3e50;
font-size: 1.1rem;
margin-bottom: 1rem;
font-weight: 600;
}
.valor-ideal ul,
.valor-resultados ul {
list-style: none;
padding: 0;
margin: 0;
}
.valor-ideal li,
.valor-resultados li {
display: flex;
align-items: flex-start;
margin-bottom: 0.8rem;
font-size: 0.95rem;
color: #4a5568;
line-height: 1.4;
}
.valor-ideal li i,
.valor-resultados li i {
color: #667eea;
margin-right: 0.8rem;
font-size: 1rem;
margin-top: 0.2rem;
}
.valor-resultados li i {
color: #48bb78;
}
@media (max-width: 768px) {
.valor-detalhes {
margin-top: 1.5rem;
padding-top: 1.5rem;
}
.valor-ideal li,
.valor-resultados li {
font-size: 0.9rem;
}
}
/* Estilos para a seção de cursos individuais */
.cursos-individuais {
padding: 120px 0 180px 0;
background: #FFFFFF !important;
position: relative;
}
.cursos-individuais::before {
display: none; /* Remove o gradiente de fundo */
}
.cursos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
position: relative;
z-index: 1;
}
.curso-card {
background: var(--background-white);
border-radius: 15px;
box-shadow: var(--shadow-md);
padding: 30px;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
}
.curso-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.curso-header {
margin-bottom: 25px;
position: relative;
}
.curso-header h3 {
color: var(--text-dark);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.3;
}
.curso-dates, .curso-horas {
display: flex;
align-items: center;
margin-bottom: 10px;
color: var(--text-gray);
font-size: 0.95rem;
}
.curso-dates i, .curso-horas i {
margin-right: 8px;
color: var(--primary-color);
}
.curso-observacao {
background-color: rgba(236, 17, 126, 0.1);
border-left: 4px solid var(--primary-color);
padding: 12px;
margin-top: 15px;
display: flex;
align-items: center;
border-radius: 0 4px 4px 0;
}
.curso-observacao i {
color: var(--primary-color);
margin-right: 10px;
}
.curso-conteudo {
margin-bottom: 30px;
}
.curso-conteudo h4 {
color: var(--text-dark);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 15px;
}
.curso-conteudo ul {
list-style: none;
padding: 0;
}
.curso-conteudo li {
margin-bottom: 12px;
display: flex;
align-items: flex-start;
color: var(--text-gray);
font-size: 0.95rem;
line-height: 1.5;
}
.curso-conteudo li i {
color: var(--primary-color);
margin-right: 10px;
margin-top: 4px;
font-size: 0.9rem;
}
.curso-beneficios {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid var(--border-color);
}
.curso-beneficios h4 {
color: var(--text-dark);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 15px;
}
.curso-beneficios ul {
list-style: none;
padding: 0;
}
.curso-beneficios li {
margin-bottom: 10px;
display: flex;
align-items: center;
color: var(--text-gray);
font-size: 0.95rem;
}
.curso-beneficios li i {
color: var(--primary-color);
margin-right: 10px;
font-size: 0.9rem;
}
.curso-valores {
background-color: var(--background-light);
padding: 25px;
border-radius: 10px;
margin-bottom: 30px;
}
.curso-valores h4 {
color: var(--text-dark);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 20px;
}
.valor-item {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-color);
}
.valor-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.valor-tipo {
color: var(--text-gray);
font-size: 0.95rem;
}
.valor-preco {
font-weight: 700;
color: var(--text-dark);
font-size: 1.1rem;
}
.valor-item.estudante {
background-color: rgba(236, 17, 126, 0.05);
padding: 12px;
border-radius: 6px;
margin: 10px 0;
}
.valor-alerta {
display: flex;
align-items: center;
color: var(--warning-color);
margin-top: 15px;
font-size: 0.95rem;
}
.valor-alerta i {
margin-right: 8px;
}
.valor-obs {
font-size: 0.9rem;
color: var(--text-gray);
margin-top: 15px;
line-height: 1.5;
}
.curso-cta {
display: flex;
flex-direction: column;
gap: 12px;
}
.curso-cta .btn {
width: 100%;
text-align: center;
padding: 14px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
}
.btn-primary {
background: var(--gradient-primary);
color: white;
border: none;
position: relative;
overflow: hidden;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.btn-outline:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.cursos-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.curso-card {
padding: 20px;
}
.curso-header h3 {
font-size: 1.3rem;
}
.curso-valores {
padding: 20px;
}
.valor-preco {
font-size: 1rem;
}
.curso-cta .btn {
padding: 12px 20px;
}
}