/* ==========================================
   DESIGN SYSTEM
========================================== */

:root {

    /* ==========================================
       IDENTIDADE VISUAL
    ========================================== */

    --color-brand: #81D8D0;
    --color-brand-light: #9EF8EF;
    --color-brand-dark: #5BBAB1;

    /* ==========================================
       CORES DE INTERFACE
    ========================================== */

    --color-primary: #2F5D62;
    --color-primary-hover: #264B4F;

    --color-secondary: #81D8D0;
    --color-accent: #9EF8EF;

    /* ==========================================
       FUNDOS
    ========================================== */

    --color-background: #FFFFFF;
    --color-background-alt: #F8FCFC;
    --color-background-soft: #EEF9F8;
    --color-background-corporate: #F3FAFA;

    /* ==========================================
       TEXTO
    ========================================== */

    --color-text: #2D3436;
    --color-text-light: #636E72;
    --color-text-white: #FFFFFF;

    /* ==========================================
       BORDAS
    ========================================== */

    --color-border: #DDEBE9;

    /* ==========================================
       STATUS
    ========================================== */

    --color-success: #4CAF50;
    --color-warning: #FF9800;
    --color-danger: #F44336;

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

    --shadow-card: 0 8px 24px rgba(47, 93, 98, .08);

    /* ==========================================
       ESPAÇAMENTOS
    ========================================== */

    --section-spacing: 80px;
    --hero-spacing: 100px;
    --container-width: 1100px;
    --max-content-width: 900px;

    /* ==========================================
       BORDAS
    ========================================== */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* ==========================================
       TIPOGRAFIA
    ========================================== */

    --font-family:
        "Inter",
        "Segoe UI",
        sans-serif;

    --font-size-body: 1rem;
    --font-size-h1: 4.5rem;
    --font-size-h2: 2.2rem;

    --line-height: 1.7;

    /* ==========================================
       TRANSIÇÕES
    ========================================== */

    --transition-default: .3s ease;

    /* ==========================================
       ELEMENTOS ESPECIAIS
    ========================================== */

    --header-height: 80px;

    --cta-gradient:
        linear-gradient(
            135deg,
            #2F5D62,
            #5BBAB1
        );
}

/* ==========================================
   RESET
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-family);
    font-size:var(--font-size-body);
    color:var(--color-text);
    line-height:var(--line-height);
    background:var(--color-background);
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

ul{
    list-style:none;
}

/* ==========================================
   LAYOUT
========================================== */

.container{
    width:90%;
    max-width:var(--container-width);
    margin:0 auto;
}

.section{
    padding:var(--section-spacing) 0;
}

.alt{
    background:var(--color-background-alt);
}

/* ==========================================
   TIPOGRAFIA
========================================== */

h1{
    font-size:var(--font-size-h1);
    line-height:1.15;
    font-weight:700;
}

h2{
    font-size:var(--font-size-h2);
    margin-bottom:30px;
    text-align:center;
}

p{
    margin-bottom:16px; 
}

/* ==========================================
   BOTÕES
========================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 30px;
    background:var(--color-primary);
    color:var(--color-text-white);
    border:none;
    border-radius:var(--radius-sm);
    font-weight:600;
    transition:var(--transition-default);
    cursor:pointer;
}

.btn:hover{
    background:var(--color-primary-hover);
    transform:translateY(-2px);
}

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

.hero{
    position:relative;
    background:
        linear-gradient(
            rgba(255,255,255,.20),
            rgba(255,255,255,.20)
        ),
        url("img/hero.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    padding:var(--hero-spacing) 0;
    text-align:left;
    min-height:80vh;
    display:flex;
    align-items:center;
}

.hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:
        linear-gradient(
            to right,
            transparent,
            var(--color-brand),
            transparent
        );
}

.hero .container{
    max-width:650px;
    margin-left:12%;
}

.hero h1{
    margin-bottom:20px;
    text-align:left;
}

.hero p{
    max-width:720px;
    margin:0 auto 30px;
    color:var(--color-text-light);
    font-size:1.5rem;
    text-align:left;
}

/* ==========================================
   CARDS
========================================== */

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.card{
    background:var(--color-background);
    padding:25px;
    border-radius:var(--radius-md);
    border:1px solid transparent;
    box-shadow:var(--shadow-card);
    transition:var(--transition-default);
}

.card:hover{
    transform:translateY(-4px);
    border-color:var(--color-brand);
}

/* ==========================================
   SOBRE
========================================== */

.about{
    display:flex;
    align-items:center;
    gap:50px;
}

.photo{
    width:280px;
    height:280px;
    flex-shrink:0;
    border-radius:50%;
    overflow:hidden;
    border:4px solid var(--color-brand);
}

.photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.content{
    flex:1;
}

.content h2{
    text-align:left;
}

.content p{
    color:var(--color-text-light);
}

/* ==========================================
   PÚBLICO ALVO
========================================== */

.list{
    max-width:700px;
    margin:0 auto;
}

.list li{
    padding:14px 0;
    border-bottom:1px solid var(--color-border);
}

.list li:last-child{
    border-bottom:none;
}

/* ==========================================
   FAQ
========================================== */

.faq{
    max-width:800px;
    margin:0 auto;
}

.faq details{
    margin-bottom:15px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    overflow:hidden;
}

.faq summary{
    padding:18px;
    cursor:pointer;
    font-weight:600;
    transition:var(--transition-default);
}

.faq summary:hover{
    background:var(--color-background-soft);
}

.faq details p{
    padding:0 18px 18px;
    color:var(--color-text-light);
}

/* ==========================================
   CORPORATIVO
========================================== */

.corporate{
    background:var(--color-background-corporate);
}

.corporate p{
    max-width:800px;
    margin:0 auto 40px;
    text-align:center;
    color:var(--color-text-light);
}

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

.cta{
    background:var(--cta-gradient);
    color:var(--color-text-white);
    text-align:center;
    padding:100px 0;
}

.cta .container{
    max-width:800px;
}

.cta h2{
    margin-bottom:20px;
}

.cta p{
    margin-bottom:30px;
}

.cta .btn{
    background:var(--color-background);
    color:var(--color-primary);
}

.cta .btn:hover{
    background:#F5F5F5;
}

/* ==========================================
   RESPONSIVIDADE
========================================== */

@media(max-width:768px){

    :root{
        --font-size-h1: 2.4rem;
        --font-size-h2: 1.8rem;
        --section-spacing: 60px;
        --hero-spacing: 80px;
    }

    .about{
        flex-direction:column;
        text-align:center;
    }

    .content h2{
        text-align:center;
    }

    .photo{
        width:220px;
        height:220px;
    }

    .cards{
        grid-template-columns:1fr;
    }

}

@media(max-width:480px){

    .container{
        width:92%;
    }

    .btn{
        width:100%;
    }

}