/* ==========================================================
   CRONOLOGÍA VISUAL DE LA BIBLIA
   style.css
========================================================== */

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#f8f5ef;
    color:#1f1f1f;
    line-height:1.7;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* =========================
   VARIÁVEIS
========================= */

:root{

    --primary:#b8892f;
    --primary-dark:#8d6a23;

    --black:#1d1d1d;

    --white:#ffffff;

    --bg:#f8f5ef;

    --gray:#666;

    --border:#e7dfcf;

    --shadow:0 15px 40px rgba(0,0,0,.10);

    --radius:16px;

    --transition:.30s ease;

}

/* =========================
   CONTAINER
========================= */

.container{

    width:min(1180px,92%);
    margin:auto;

}

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

.hero{

    padding:90px 0;

    background:
    linear-gradient(rgba(248,245,239,.95),
    rgba(248,245,239,.96)),
    url("../img/hero-bg.webp") center center/cover;

}

.hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

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

.badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:#efe4c8;

    color:var(--primary-dark);

    font-weight:600;

    font-size:.90rem;

    margin-bottom:24px;

}

.hero h1{

    font-family:'Cinzel',serif;

    font-size:3.4rem;

    line-height:1.15;

    margin-bottom:25px;

    color:var(--black);

}

.subtitle{

    font-size:1.30rem;

    font-weight:600;

    margin-bottom:22px;

    color:#2b2b2b;

}

.description{

    color:var(--gray);

    margin-bottom:40px;

    font-size:1.05rem;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.btn-primary{

    background:var(--primary);

    color:white;

    padding:16px 34px;

    border-radius:50px;

    font-weight:700;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.btn-secondary{

    padding:16px 34px;

    border-radius:50px;

    border:2px solid var(--primary);

    color:var(--primary);

    font-weight:700;

    transition:var(--transition);

}

.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}

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

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    max-width:430px;

    filter:drop-shadow(0 30px 45px rgba(0,0,0,.18));

}

/* =========================
   SEÇÕES
========================= */

section{

    padding:90px 0;

}

section h2{

    text-align:center;

    font-family:'Cinzel',serif;

    font-size:2.2rem;

    margin-bottom:55px;

}

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

.cards{

    display:grid;

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

    gap:28px;

}

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

footer{

    padding:50px 0;

    text-align:center;

    border-top:1px solid var(--border);

    color:#777;

    font-size:.95rem;

}

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

.section-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-tag{

    display:inline-block;

    background:#efe4c8;

    color:var(--primary-dark);

    padding:8px 18px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:20px;

}

.section-header p{

    color:var(--gray);

    margin-top:18px;

    font-size:1.05rem;

}

.card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px;

    transition:var(--transition);

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

}

.card:hover{

    transform:translateY(-8px);

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

}

.icon{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#efe4c8;

    color:var(--primary-dark);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.3rem;

    font-weight:700;

    margin-bottom:22px;

}

.card h3{

    font-size:1.2rem;

    margin-bottom:15px;

    color:var(--black);

}

.card p{

    color:var(--gray);

    font-size:.97rem;

}


/*==================================================
CONTENTS
==================================================*/

.contents{

    background:#ffffff;

}

.content-grid{

    display:grid;

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

    gap:20px;

    margin-top:50px;

}

.content-item{

    background:#fdfbf7;

    border:1px solid var(--border);

    border-radius:14px;

    padding:22px 25px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:0 6px 18px rgba(0,0,0,.04);

}

.content-item:hover{

    transform:translateY(-5px);

    border-color:var(--primary);

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

}

/* =========================
   TABLET
========================= */

@media (max-width:992px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

margin-top:25px;

}

.hero h1{

font-size:2.8rem;

}

.cards{

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

}

}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

.hero{

padding:70px 0;

}

.hero h1{

font-size:2.2rem;

}

.subtitle{

font-size:1.10rem;

}

.description{

font-size:1rem;

}

.hero-image img{

max-width:300px;

}

.cards{

grid-template-columns:1fr;

}

section{

padding:70px 0;

}

section h2{

font-size:1.8rem;

margin-bottom:40px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,

.btn-secondary{

width:100%;

text-align:center;

}

}