/* RESET */

body {

margin: 0;

font-family: Arial, Helvetica, sans-serif;

background: #f7f7f7;

color: #333;

}

a {

text-decoration: none;

}

/* ========================= */
/* IDIOMA - BANDEIRAS */
/* ========================= */

.language {

position: absolute;

top: 20px;

right: 30px;

z-index: 10;

display: flex;

gap: 12px;

}

.language img {

width: 32px;

height: 22px;

border-radius: 4px;

cursor: pointer;

transition: 0.3s;

box-shadow: 0 2px 6px rgba(0,0,0,0.3);

}

.language img:hover {

transform: scale(1.15);

box-shadow: 0 4px 10px rgba(0,0,0,0.5);

}

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

.hero {

position: relative;

height: 50vh;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

background: black;

}

.video-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

z-index: 0;

}

.overlay {

position: relative;

z-index: 1;

background: rgba(0,0,0,0.35);

padding: 40px;

text-align: center;

color: white;

border-radius: 12px;

max-width: 700px;

}

.overlay h1 {

font-size: 42px;

margin-bottom: 10px;

}

.overlay p {

font-size: 18px;

}

/* ========================= */
/* FEATURES */
/* ========================= */

.features {

display: grid;

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

background: #f1ebe7;

padding: 60px 40px;

}

.feature {

padding: 25px;

border-right: 1px solid #d8d0c9;

text-align: center;

}

.feature:last-child {

border-right: none;

}

.feature h3 {

font-size: 22px;

margin-bottom: 10px;

}

.feature p {

color: #555;

line-height: 1.6;

}

/* ========================= */
/* DESTINOS */
/* ========================= */

.services-gallery {

padding: 80px 40px;

text-align: center;

background: white;

}

.services-gallery h2 {

font-size: 30px;

margin-bottom: 40px;

}

.services-grid {

display: grid;

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

gap: 25px;

}

.service-card {

position: relative;

overflow: hidden;

border-radius: 12px;

box-shadow: 0 6px 15px rgba(0,0,0,0.15);

transition: 0.3s;

}

.service-card:hover {

transform: translateY(-6px);

}

.service-card img {

width: 100%;

height: 320px;

object-fit: cover;

transition: transform 0.4s;

}

.service-card:hover img {

transform: scale(1.08);

}

.service-overlay {

position: absolute;

bottom: 0;

left: 0;

right: 0;

background: linear-gradient(
to top,
rgba(0,0,0,0.85),
transparent
);

color: white;

padding: 25px;

text-align: center;

}

.service-overlay h3 {

margin: 0;

font-size: 22px;

}

.btn {

display: inline-block;

margin-top: 12px;

padding: 10px 20px;

background: #ff4da6;

color: white;

border-radius: 6px;

transition: 0.3s;

}

.btn:hover {

background: #ff1a8c;

}

/* ========================= */
/* BENEFITS */
/* ========================= */

.benefits {

background: #f9f6f3;

padding: 80px 40px;

}

.benefits-grid {

display: grid;

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

gap: 25px;

}

.benefit-card {

background: white;

padding: 30px;

border-radius: 12px;

text-align: center;

box-shadow: 0 5px 12px rgba(0,0,0,0.08);

transition: 0.3s;

}

.benefit-card:hover {

transform: translateY(-8px);

box-shadow: 0 12px 20px rgba(0,0,0,0.15);

}

.benefit-icon {

font-size: 36px;

margin-bottom: 15px;

}

.benefit-card h3 {

font-size: 20px;

margin-bottom: 10px;

}

.benefit-card p {

color: #555;

line-height: 1.5;

}

/* ========================= */
/* TESTIMONIALS */
/* ========================= */

.testimonials {

background: white;

padding: 80px 40px;

text-align: center;

}

.testimonials h2 {

font-size: 30px;

margin-bottom: 40px;

}

.testimonials-grid {

display: grid;

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

gap: 30px;

}

.testimonial-card {

background: #f9f9f9;

border-radius: 12px;

overflow: hidden;

box-shadow: 0 6px 15px rgba(0,0,0,0.12);

transition: 0.3s;

}

.testimonial-card:hover {

transform: translateY(-6px);

}

.testimonial-card img {

width: 100%;

height: 260px;

object-fit: cover;

}

.testimonial-content {

padding: 20px;

}

.testimonial-content p {

font-style: italic;

margin-bottom: 10px;

}

.testimonial-content span {

font-weight: bold;

color: #555;

}

/* ========================= */
/* PARTNERS */
/* ========================= */

.partners {

background: #f5f5f5;

padding: 70px 40px;

text-align: center;

}

.partners h2 {

font-size: 28px;

margin-bottom: 40px;

}

.partners-grid {

display: grid;

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

gap: 30px;

align-items: center;

}

.partner-card {

background: white;

padding: 25px;

border-radius: 12px;

box-shadow: 0 6px 15px rgba(0,0,0,0.1);

transition: 0.3s;

}

.partner-card:hover {

transform: translateY(-6px);

box-shadow: 0 12px 20px rgba(0,0,0,0.15);

}

.partner-card img {

max-width: 160px;

height: auto;

}

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

.footer {

background: #111;

color: white;

padding-top: 50px;

}

.footer-container {

display: grid;

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

gap: 40px;

padding: 40px;

max-width: 1200px;

margin: auto;

}

.footer h3 {

margin-bottom: 10px;

font-size: 22px;

}

.footer h4 {

margin-bottom: 15px;

font-size: 18px;

}

.footer p {

color: #ccc;

line-height: 1.6;

}

.footer-social a {

display: block;

color: white;

margin-bottom: 10px;

transition: 0.3s;

}

.footer-social a:hover {

color: #ff4da6;

}

.social-icons a {

display: block;

margin-bottom: 12px;

font-size: 16px;

}

.footer-bottom {

text-align: center;

padding: 20px;

border-top: 1px solid #333;

margin-top: 20px;

font-size: 14px;

}

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

@media (max-width: 1100px) {

.features,
.services-grid,
.benefits-grid,
.testimonials-grid,
.partners-grid,
.footer-container {

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

}

}

@media (max-width: 700px) {

.features,
.services-grid,
.benefits-grid,
.testimonials-grid,
.partners-grid,
.footer-container {

grid-template-columns: 1fr;

}

.hero {

height: 70vh;

}

.overlay h1 {

font-size: 28px;

}

.overlay p {

font-size: 16px;

}

.language {

top: 15px;

right: 15px;

}

}