/* =========================================================
   ExploraMundo – style.css
   Autor: UI/UX Team
   Descrição: Camada extra de estilos sobre Tailwind para
   suportar Brutalismo + UI 3D (Triad Scheme)
   ========================================================= */

/* ---------- ROOT & THEME ---------- */
:root{
    /* Triadic Palette */
    --color-primary: #FFD93D;      /* Amarelo vibrante */
    --color-accent:  #4ECDC4;      /* Verde-água */
    --color-highlight:#FF6B6B;     /* Coral */
    /* Darker tones */
    --color-primary-dark: #d4b332;
    --color-accent-dark:  #3b9e97;
    --color-highlight-dark:#d95555;
    /* Grays */
    --color-bg:       #FFFCF7;
    --color-dark:     #222222;
    --color-light:    #FAFAFA;
    /* Typography */
    --font-heading:   'Poppins', sans-serif;
    --font-body:      'Work Sans', sans-serif;
    /* Shadows & Radius */
    --shadow-3d: 4px 4px 0 var(--color-dark);
    --radius-lg: 1rem;
    --transition: all .3s ease;
}

/* ---------- GLOBAL RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:var(--font-body);
    background:var(--color-bg);
    color:var(--color-dark);
    line-height:1.65;
    font-weight:400;
}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    font-weight:700;
    line-height:1.2;
    text-wrap:balance;
}
h2{text-shadow:1px 1px 3px rgba(0,0,0,.3)}

/* ---------- BUTTONS ---------- */
.btn,
button,
input[type="submit"]{
    display:inline-block;
    background:var(--color-highlight);
    color:#fff;
    font-family:var(--font-heading);
    padding:.875rem 2.5rem;
    border:none;
    border-radius:9999px;
    box-shadow:var(--shadow-3d);
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none;
}
.btn:hover,
button:hover,
input[type="submit"]:hover{
    background:var(--color-highlight-dark);
    transform:translateY(-2px);
}
.btn:active,
button:active{
    transform:translateY(0) scale(.96);
}

/* ---------- SECTIONS ---------- */
section{padding-block:5rem}
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}
.section-heading{
    text-align:center;
    margin-bottom:3rem;
    font-size:2.25rem;
}

/* ---------- HERO ---------- */
#hero{
    position:relative;
    color:#FFFFFF;
    text-shadow:2px 2px 4px rgba(0,0,0,.6);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background-size:cover;
    background-repeat:no-repeat;
}

/* ---------- NAVBAR ---------- */
header{
    backdrop-filter:blur(6px);
}
header nav a{
    transition:color .2s ease;
}
#mobileNav a{display:block}

/* ---------- CARDS & FLEX CENTER ---------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    background:#FFFFFF;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-3d);
    text-align:center;
    padding:1.5rem;
    transition:transform .25s ease;
}
.card:hover,
.item:hover,
.team-member:hover,
.product-card:hover{
    transform:translateY(-6px);
}
.card-image,
.image-container{
    width:100%;
    height:250px;
    overflow:hidden;
    border-radius:var(--radius-lg);
    margin-bottom:1rem;
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}

/* ---------- TESTIMONIAL CAROUSEL ---------- */
#testimonialCarousel{
    perspective:1000px;
}
#testimonialCarousel .bg-white{
    background:var(--color-light);
}

/* ---------- TIMELINE ---------- */
#calendar .relative::before{
    content:'';
    position:absolute;
    top:0;
    left:-2px;
    width:4px;
    height:100%;
    background:var(--color-highlight);
}
#calendar h3{
    font-family:var(--font-heading);
}

/* ---------- LINKS ---------- */
a{color:var(--color-highlight);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--color-highlight-dark)}
.read-more{
    font-weight:600;
    position:relative;
}
.read-more::after{
    content:'→';
    margin-left:.25rem;
    transition:transform .2s;
}
.read-more:hover::after{transform:translateX(4px)}

/* ---------- SOCIAL LINKS FOOTER ---------- */
footer ul li a{
    color:var(--color-light);
    font-weight:500;
}
footer ul li a:hover{
    color:var(--color-primary);
}

/* ---------- SUCCESS PAGE ---------- */
.success-wrapper{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
}
.success-wrapper h1{
    font-size:2.75rem;
    margin-bottom:1.5rem;
}
.success-wrapper .btn{margin-top:2rem}

/* ---------- PAGES (TERMS / PRIVACY) ---------- */
.page-legal{
    padding-top:100px;
}
.page-legal h1{margin-bottom:2rem}

/* ---------- COOKIE POPUP ---------- */
#cookiePopup{
    font-size:.875rem;
}
#cookiePopup button:hover{
    background:var(--color-accent-dark);
}

/* ---------- SCROLL-DEPENDENT ANIMATIONS ---------- */
[data-sr]{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s ease, transform .8s ease;
}
[data-sr].sr-show{
    opacity:1!important;
    transform:none!important;
}

/* ---------- PARALLAX SUBTLE DEPTH ---------- */
.has-depth{
    box-shadow:0 20px 35px -10px rgba(0,0,0,.15);
}

/* ---------- GLASSMORPHISM for popups / modals ---------- */
.glass{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(8px);
    border:2px solid rgba(255,255,255,.25);
    border-radius:var(--radius-lg);
}

/* ---------- UTILITIES ---------- */
.text-shadow{
    text-shadow:1px 1px 3px rgba(0,0,0,.45);
}
.z-9999{z-index:9999}

/* ---------- RESPONSIVE TWEAKS ---------- */
@media(max-width:768px){
    h2{font-size:1.875rem}
    .card-image,.image-container{height:200px}
}
#burger{
    display: none;
}