/* FOLHA DE ESTILO DA HOME */

:root{
    --accent-500: #0d9488;
    --accent-400: #14b8a6;
    --glass-bg: rgba(255,255,255,0.55);
    --glass-border: rgba(255,255,255,0.25);
    --muted: #64748b;
    --page-bg-day: linear-gradient(180deg, #f7fbfc 0%, #eef8fb 100%);
    --page-bg-night: linear-gradient(180deg, #061018 0%, #0b1220 100%);
    --text-day: #0b1720;
    --text-night: #e6f3f6;
    --card-radius: 16px;
    --shadow-1: 0 6px 18px rgba(13,148,136,0.08);
    font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset & base */
*{box-sizing:border-box}

html,body{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Organiza os elementos verticalmente */
}

body{
    margin:0;
    color:var(--text-day);
    background:var(--page-bg-day);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    transition:background 400ms ease, color 300ms ease;
    font-family:inherit;
}

body::-webkit-scrollbar {
    display: none;
    overflow: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

body.night {
    background:var(--page-bg-night);
    color:var(--text-night);
}

/* HERO */
.hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 235px 20px 205px;
    color: #fff;
    background: linear-gradient(-45deg, #0ea5e9, #14b8a6, #0369a1, #0d9488);
    background-size: 400% 400%;
    animation: gradientShift 14s ease infinite;
}

@keyframes gradientShift { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%} 
}

.hero h1{ 
    font-weight:700; 
    font-size:2.8rem; 
    margin-bottom:.6rem; 
    position:relative; 
    z-index:2; 
}

.hero p.lead{ 
    font-size:1.25rem; 
    font-weight:500; 
    color:#e0f2fe; 
    position:relative; 
    z-index:2; 
}

.network-bg{ 
    position:absolute; 
    inset:0; 
    width:100%; 
    height:100%; 
    opacity:.25; 
    z-index:1; 
    animation:networkFloat 12s ease-in-out infinite alternate;
    pointer-events:none 
}

@keyframes networkFloat{ 
    0%{transform:scale(1) translateY(0); opacity:.3}
    50%{transform:scale(1.05) translateY(-8px); opacity:.4}
    100%{transform:scale(1) translateY(0); opacity:.3} 
}

/* Responsive rules */
@media (max-width:991px){
    .glass-card{ grid-column: span 6; }
    .glass-card-lg{ grid-column: span 12; }
    .hero{ padding:4.5rem 0 2.5rem; }
    .network-bg{ display:none; }
}

@media (max-width:575px){
    .glass-card{ grid-column: span 12; }
    header.hero h1{ font-size:1.4rem; }
    .icon-title { gap:10px; }
    .icon-title i{ font-size:1.3rem }
}

/* NIGHT MODE */
body.night .timeline {
    border-left-color: var(--accent-400);
}

body.night .timeline-dot {
    background: var(--accent-400);
}

body.night .timeline-content {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.05);
    color: var(--text-night);
}

/* Preloader */
.preloader-wrap{
    position:fixed; 
    inset:0; 
    display:flex; 
    align-items:center; 
    justify-content:center;
    background:linear-gradient(180deg, rgba(14,29,33,0.04), rgba(255,255,255,0.02));
    z-index:99999; 
    transition:opacity .4s ease, visibility .4s;
}

.preloader-wrap.hidden{ 
    opacity:0; 
    visibility:hidden; 
    pointer-events:none 
}

.cube-scene{ 
    width:110px; 
    height:110px; 
    perspective:900px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}

.cube{ 
    position:relative; 
    width:64px; 
    height:64px; 
    transform-style:preserve-3d; 
    animation:spinCube 2.8s cubic-bezier(.2,.9,.3,.98) infinite; 
    transition:filter .15s linear; 
}

.cube__face{ 
    position:absolute; 
    inset:0; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    border-radius:10px; 
    font-weight:600; 
    font-size:0.85rem; 
    background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)); 
    border:1px solid rgba(255,255,255,0.5); 
    box-shadow: 0 8px 28px rgba(2,132,199,0.08), inset 0 1px 0 rgba(255,255,255,0.6); 
    color:var(--accent-500); 
    backdrop-filter: blur(6px); 
}

.cube__face--front{ 
    transform: translateZ(32px) 
}

.cube__face--back{ 
    transform: rotateY(180deg) translateZ(32px) 
}

.cube__face--right{ 
    transform: rotateY(90deg) translateZ(32px) 
}

.cube__face--left{ 
    transform: rotateY(-90deg) translateZ(32px) 
}

.cube__face--top{ 
    transform: rotateX(90deg) translateZ(32px) 
}

.cube__face--bottom{ 
    transform: rotateX(-90deg) translateZ(32px) 
}

@keyframes spinCube{ 
    0%{ transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg) } 
    50%{ transform: rotateX(260deg) rotateY(180deg) rotateZ(30deg) } 
    100%{ transform: rotateX(370deg) rotateY(360deg) rotateZ(360deg) } 
}

/* Night adjustments */
body.night .glass-card{ 
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); 
    border:1px solid rgba(255,255,255,0.04); 
    box-shadow:none; 
}

body.night .cube__face{ 
    background: linear-gradient(180deg, rgba(10,20,30,0.9), rgba(15,25,35,0.85)); 
    color:var(--accent-400); 
    border:1px solid rgba(255,255,255,0.03); 
}

/* Focus styles */
a:focus, button:focus, input:focus, textarea:focus{ 
    outline:4px solid rgba(13,148,136,0.12); 
    outline-offset:3px; 
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ 
    .cube, .network-bg{ 
    animation:none !important } [data-aos]{ 
        transition:none !important; 
        opacity:1 !important; 
        transform:none !important 
    } 
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    /*background: var(--primary);*/
    background-color: #0369a1;
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    margin-top: 1.5rem;
    transition: 0.3s;
}

.btn:hover { opacity: 0.9; transform: scale(1.05); }