/* ==========================================================
   ILLA PERU EXPERIENCE
   styles.css
========================================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* VARIABLES */

:root{

--primary:#0B5D4B;
--secondary:#C49A3A;
--dark:#1D1D1D;
--light:#F8F8F8;
--white:#ffffff;
--gray:#666;
--shadow:0 10px 35px rgba(0,0,0,.15);
--radius:18px;
--transition:.35s ease;

}

/* RESET */

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

body{

font-family:'Poppins',sans-serif;
background:#fff;
color:#333;
overflow-x:hidden;
line-height:1.6;

}

img{

display:block;
max-width:100%;
height:auto;

}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(1200px,90%);
margin:auto;

}

/* ===============================
NAVBAR
================================*/

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
background:rgba(255,255,255,.92);
backdrop-filter:blur(12px);
box-shadow:0 2px 15px rgba(0,0,0,.08);

}

.navbar{

padding:15px 0;

}

.navbar .container{

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

}

.logo{

display:flex;
align-items:center;
gap:12px;
font-size:1.2rem;
font-weight:700;
color:var(--primary);

}

.logo img{

width:60px;
height:60px;
object-fit:contain;

}

.menu{

display:flex;
gap:30px;

}

.menu li a{

font-weight:500;
transition:var(--transition);
position:relative;

}

.menu li a:hover{

color:var(--secondary);

}

.menu li a::after{

content:"";
position:absolute;
left:0;
bottom:-6px;
width:0%;
height:2px;
background:var(--secondary);
transition:.3s;

}

.menu li a:hover::after{

width:100%;

}

/* REDES */

.redes{

display:flex;
gap:15px;

}

.redes a{

width:40px;
height:40px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
background:#f3f3f3;
transition:.3s;

}

.redes a:hover{

background:var(--primary);
color:#fff;
transform:translateY(-4px);

}

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

.hero{

height:100vh;

background:

linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
url("img/hero.jpg");

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

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

padding:0 20px;

}

.hero-content{

max-width:850px;
color:#fff;

}

.hero-content h1{

font-size:3.8rem;
font-weight:800;
margin-bottom:20px;

}

.hero-content span{

color:var(--secondary);

}

.hero-content p{

font-size:1.2rem;
margin-bottom:40px;

}

/* BOTONES */

.hero-buttons{

display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;

}

.btn{

padding:16px 40px;

background:var(--secondary);

color:#fff;

border-radius:40px;

font-weight:600;

transition:.35s;

box-shadow:var(--shadow);

}

.btn:hover{

background:var(--primary);

transform:translateY(-5px);

}

.btn2{

padding:16px 40px;

border:2px solid #fff;

border-radius:40px;

font-weight:600;

color:#fff;

transition:.35s;

}

.btn2:hover{

background:#fff;

color:var(--primary);

}

/* ===============================
SECTION TITLE
================================*/

.section{

padding:110px 0;

}

.title{

text-align:center;
margin-bottom:60px;

}

.title h2{

font-size:2.5rem;
color:var(--primary);
margin-bottom:15px;

}

.title p{

color:#666;
max-width:700px;
margin:auto;

}

/* ===============================
NUMBERS
================================*/

.numbers{

padding:70px 0;
background:#fafafa;

}

.numbers .container{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.number{

text-align:center;

}

.number h2{

font-size:3rem;
color:var(--secondary);

}

.number p{

font-weight:500;

}

/* ==========================================================
   TOURS Y TARJETAS
========================================================== */

.cards{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:35px;

}

.card{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

position:relative;

}

.card:hover{

transform:translateY(-12px);

box-shadow:0 25px 45px rgba(0,0,0,.18);

}

.card img{

width:100%;
height:250px;
object-fit:cover;

transition:.5s;

}

.card:hover img{

transform:scale(1.08);

}

.card-content{

padding:28px;

}

.tag{

display:inline-block;

padding:7px 16px;

background:var(--secondary);

color:#fff;

font-size:.8rem;

font-weight:600;

border-radius:30px;

margin-bottom:18px;

}

.card-content h3{

font-size:1.6rem;

color:var(--primary);

margin-bottom:15px;

}

.card-content p{

color:#666;

margin-bottom:20px;

line-height:1.8;

}

.card-content ul{

margin-bottom:25px;

}

.card-content ul li{

display:flex;

align-items:center;

gap:12px;

margin-bottom:12px;

color:#555;

}

.card-content ul li i{

color:var(--secondary);

font-size:1rem;

}

.price{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

border-top:1px solid #eee;

border-bottom:1px solid #eee;

margin-bottom:25px;

}

.price h4{

font-weight:500;

color:#777;

}

.price h2{

font-size:2rem;

color:var(--primary);

}

.btn-card{

display:block;

text-align:center;

padding:15px;

background:var(--primary);

color:#fff;

font-weight:600;

border-radius:40px;

transition:.35s;

}

.btn-card:hover{

background:var(--secondary);

transform:translateY(-3px);

}

/* =====================================
   EFECTO PREMIUM
===================================== */

.card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transition:.8s;

}

.card:hover::before{

left:100%;

}

/* =====================================
   EXPERIENCIAS ESPIRITUALES
===================================== */

.spiritual{

background:#fafaf8;

}

.spiritual .card{

border:1px solid rgba(196,154,58,.18);

}

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

.why-us{

padding:100px 0;

background:linear-gradient(135deg,#0B5D4B,#08483b);

color:#fff;

}

.features{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:35px;

margin-top:60px;

}

.feature{

background:rgba(255,255,255,.08);

padding:40px 30px;

border-radius:20px;

text-align:center;

backdrop-filter:blur(8px);

transition:.35s;

}

.feature:hover{

transform:translateY(-10px);

background:rgba(255,255,255,.14);

}

.feature i{

font-size:3rem;

margin-bottom:20px;

color:var(--secondary);

}

.feature h3{

margin-bottom:15px;

font-size:1.4rem;

}

.feature p{

opacity:.9;

line-height:1.7;

}

/* ==========================================================
   GALERÍA
========================================================== */

.gallery{

padding:110px 0;
background:#fff;

}

.gallery-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:18px;

}

.gallery-grid img{

width:100%;
height:260px;
object-fit:cover;

border-radius:18px;

cursor:pointer;

transition:.45s;

box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.gallery-grid img:hover{

transform:scale(1.05);

box-shadow:0 20px 40px rgba(0,0,0,.25);

}

/* ==========================================
   TESTIMONIOS
========================================== */

.testimonials{

padding:110px 0;

background:#f8f8f8;

}

.testimonial-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.testimonial{

background:#fff;

padding:40px 30px;

border-radius:20px;

text-align:center;

box-shadow:0 10px 35px rgba(0,0,0,.10);

transition:.35s;

}

.testimonial:hover{

transform:translateY(-12px);

}

.testimonial img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

margin:auto;

margin-bottom:20px;

border:4px solid var(--secondary);

}

.testimonial h3{

margin-bottom:12px;

color:var(--primary);

}

.stars{

color:#FFC107;

font-size:1.3rem;

margin-bottom:18px;

letter-spacing:3px;

}

.testimonial p{

color:#666;

line-height:1.8;

font-style:italic;

}

/* ==========================================
   BOUTIQUE
========================================== */

.boutique{

padding:110px 0;

background:#fff;

}

.boutique .cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:35px;

}

.card-product{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 10px 35px rgba(0,0,0,.10);

transition:.35s;

text-align:center;

padding-bottom:25px;

}

.card-product:hover{

transform:translateY(-12px);

}

.card-product img{

width:100%;

height:260px;

object-fit:cover;

transition:.45s;

}

.card-product:hover img{

transform:scale(1.08);

}

.card-product h3{

margin-top:22px;

font-size:1.4rem;

color:var(--primary);

}

.card-product h2{

margin:15px 0 25px;

color:var(--secondary);

font-size:2rem;

}

/* ==========================================
   ESTADÍSTICAS
========================================== */

.stats{

padding:90px 0;

background:linear-gradient(135deg,var(--primary),#07372d);

color:#fff;

}

.stats .container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:35px;

text-align:center;

}

.stats h2{

font-size:3rem;

margin-bottom:12px;

color:var(--secondary);

}

.stats p{

font-size:1.1rem;

font-weight:500;

}

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

.cta{

padding:120px 20px;

text-align:center;

background:

linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
url("img/banner.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

color:#fff;

}

.cta h2{

font-size:3rem;

margin-bottom:20px;

font-weight:700;

}

.cta p{

max-width:700px;

margin:auto;

margin-bottom:35px;

font-size:1.2rem;

line-height:1.8;

}

.cta .btn{

display:inline-block;

padding:18px 45px;

font-size:1.1rem;

}

/* ==========================================================
   CONTACTO
========================================================== */

.contact{

padding:110px 0;

background:#f8f9fa;

}

.contact-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:50px;

align-items:start;

}

/* ==========================
FORMULARIO
========================== */

.contact-form{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}

.contact-form form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

width:100%;

padding:16px 20px;

border:1px solid #ddd;

border-radius:12px;

font-family:inherit;

font-size:16px;

outline:none;

transition:.3s;

background:#fff;

}

.contact-form textarea{

resize:vertical;

min-height:180px;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

border-color:var(--secondary);

box-shadow:0 0 0 4px rgba(196,154,58,.15);

}

.contact-form button{

padding:18px;

border:none;

border-radius:50px;

background:var(--primary);

color:#fff;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.contact-form button:hover{

background:var(--secondary);

transform:translateY(-3px);

}

/* ==========================
INFO
========================== */

.contact-info{

background:linear-gradient(135deg,var(--primary),#08483b);

color:#fff;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}

.contact-info h3{

font-size:2rem;

margin-bottom:20px;

}

.contact-info>p{

margin-bottom:35px;

line-height:1.8;

opacity:.95;

}

.info{

display:flex;

align-items:center;

gap:15px;

margin-bottom:22px;

font-size:17px;

}

.info i{

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(255,255,255,.15);

color:var(--secondary);

font-size:20px;

}

/* ==========================
REDES
========================== */

.social-contact{

display:flex;

gap:15px;

margin-top:35px;

}

.social-contact a{

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(255,255,255,.12);

transition:.35s;

font-size:20px;

}

.social-contact a:hover{

background:var(--secondary);

transform:translateY(-6px);

}

/* ==========================================================
   MAPA
========================================================== */

.map{

width:100%;

height:450px;

}

.map iframe{

width:100%;

height:100%;

border:none;

display:block;

}

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

footer{

background:#111;

color:#ddd;

padding:80px 0 25px;

}

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:40px;

}

.footer-logo{

width:80px;

margin-bottom:20px;

}

footer h3{

margin-bottom:20px;

color:var(--secondary);

}

footer ul{

display:flex;

flex-direction:column;

gap:12px;

}

footer ul li a{

transition:.3s;

}

footer ul li a:hover{

color:var(--secondary);

padding-left:8px;

}

.footer-social{

display:flex;

gap:15px;

margin-top:20px;

}

.footer-social a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#222;

transition:.35s;

}

.footer-social a:hover{

background:var(--secondary);

color:#fff;

transform:translateY(-5px);

}

/* COPYRIGHT */

.copyright{

border-top:1px solid rgba(255,255,255,.08);

margin-top:50px;

padding-top:25px;

text-align:center;

font-size:15px;

color:#aaa;

}

/* ==========================================================
   BOTÓN WHATSAPP
========================================================== */

.whatsapp{

position:fixed;

bottom:25px;

right:25px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

box-shadow:0 12px 30px rgba(0,0,0,.25);

z-index:999;

transition:.35s;

}

.whatsapp:hover{

transform:scale(1.12);

}

/* ==========================================================
   BOTÓN SUBIR
========================================================== */

#topButton{

position:fixed;

bottom:105px;

right:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--secondary);

color:#fff;

font-size:20px;

cursor:pointer;

display:none;

z-index:999;

box-shadow:var(--shadow);

transition:.35s;

}

#topButton:hover{

background:var(--primary);

transform:translateY(-4px);

}

/* ==========================================================
   RESPONSIVE DESIGN
========================================================== */

/* -------- Tablets -------- */

@media (max-width:1024px){

.hero-content h1{

font-size:3rem;

}

.contact-grid{

grid-template-columns:1fr;

}

.numbers .container{

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

}

.stats .container{

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

}

.footer-grid{

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

}

}

/* -------- Móviles -------- */

@media (max-width:768px){

.container{

width:92%;

}

header{

padding:10px 0;

}

.navbar .container{

flex-direction:column;

gap:20px;

}

.menu{

flex-direction:column;

align-items:center;

gap:15px;

}

.redes{

justify-content:center;

}

.hero{

height:90vh;

background-attachment:scroll;

}

.hero-content h1{

font-size:2.2rem;

line-height:1.3;

}

.hero-content p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn,
.btn2{

width:220px;

text-align:center;

}

.title h2{

font-size:2rem;

}

.cards{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.testimonial-grid{

grid-template-columns:1fr;

}

.boutique .cards{

grid-template-columns:1fr;

}

.features{

grid-template-columns:1fr;

}

.numbers .container{

grid-template-columns:1fr;

}

.stats .container{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-social{

justify-content:center;

}

.social-contact{

justify-content:center;

}

.contact-form{

padding:25px;

}

.contact-info{

padding:25px;

}

.map{

height:320px;

}

.whatsapp{

width:60px;

height:60px;

font-size:30px;

bottom:20px;

right:20px;

}

#topButton{

bottom:90px;

right:20px;

}

}

/* -------- Pantallas pequeñas -------- */

@media (max-width:480px){

.hero-content h1{

font-size:1.8rem;

}

.hero-content p{

font-size:.95rem;

}

.title h2{

font-size:1.7rem;

}

.price h2{

font-size:1.5rem;

}

.card-content{

padding:22px;

}

.btn,

.btn2{

width:100%;

}

.logo span{

display:none;

}

.logo img{

width:50px;

height:50px;

}

}

/* ==========================================================
   ANIMACIONES
========================================================== */

.fade-up{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.zoom{

overflow:hidden;

}

.zoom img{

transition:transform .5s ease;

}

.zoom:hover img{

transform:scale(1.08);

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#efefef;

}

::-webkit-scrollbar-thumb{

background:var(--secondary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary);

}

/* ==========================================================
   SELECCIÓN DE TEXTO
========================================================== */

::selection{

background:var(--secondary);

color:#fff;

}

/* ==========================================================
   TRANSICIONES GLOBALES
========================================================== */

section{

transition:.4s ease;

}

button,
a,
.card,
.card-product,
.feature,
.testimonial{

transition:all .35s ease;

}

/* ==========================================================
   PARTE 6/6
   ACABADOS FINALES
========================================================== */

/* Aparición suave al cargar */
body{
    animation:fadePage .8s ease;
}

@keyframes fadePage{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/* ==========================
   HEADER AL HACER SCROLL
========================== */

header.scrolled{

    background:#ffffff;

    box-shadow:0 8px 25px rgba(0,0,0,.12);

    transition:.35s;

}

/* ==========================
   MENÚ RESPONSIVE
========================== */

.menu-toggle{

display:none;

font-size:30px;

cursor:pointer;

color:var(--primary);

}

/* ==========================
   EFECTOS DE IMÁGENES
========================== */

.gallery img,
.card img,
.card-product img{

transition:transform .5s ease, filter .5s ease;

}

.gallery img:hover,
.card:hover img,
.card-product:hover img{

filter:brightness(1.05);

}

/* ==========================
   SOMBRAS PREMIUM
========================== */

.card,
.card-product,
.feature,
.testimonial,
.contact-form,
.contact-info{

box-shadow:
0 12px 30px rgba(0,0,0,.08);

}

.card:hover,
.card-product:hover,
.feature:hover,
.testimonial:hover{

box-shadow:
0 25px 45px rgba(0,0,0,.18);

}

/* ==========================
   BOTONES
========================== */

.btn,
.btn2,
.btn-card,
.contact-form button{

transition:all .3s ease;

}

.btn:hover,
.btn2:hover,
.btn-card:hover,
.contact-form button:hover{

transform:translateY(-4px);

}

/* ==========================
   INPUTS
========================== */

input,
textarea,
select{

transition:.25s;

}

input:focus,
textarea:focus,
select:focus{

transform:scale(1.01);

}

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

footer p{

line-height:1.8;

}

footer ul li{

margin-bottom:8px;

}

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

.whatsapp{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

/* ==========================
   BOTÓN SUBIR
========================== */

#topButton{

transition:all .35s ease;

}

#topButton:hover{

transform:translateY(-6px);

}

/* ==========================
   EFECTOS SCROLL
========================== */

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* ==========================
   SECCIONES
========================== */

section{

position:relative;

overflow:hidden;

}

/* ==========================
   RESPONSIVE MENÚ
========================== */

@media(max-width:768px){

.menu-toggle{

display:block;

}

.menu{

display:none;

flex-direction:column;

width:100%;

padding:20px 0;

background:#fff;

border-radius:15px;

margin-top:15px;

box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.menu.active{

display:flex;

}

.navbar .container{

align-items:flex-start;

}

.redes{

display:none;

}

}

/* ==========================
   FIN
========================== */