/* =========================================================
   LIVRARIA SENSORIAL
   Cada Passo, uma Jornada
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root{

  --liv-bg:#f7e4cf;
  --liv-soft:#fff5ea;
  --liv-paper:#fff8f1;

  --liv-text:#1f2d44;

  --liv-accent:#d88a3c;
  --liv-accent-dark:#b96820;

  --liv-white:#ffffff;

  --liv-shadow:
    0 18px 55px rgba(0,0,0,.12);

  --liv-shadow-soft:
    0 10px 35px rgba(0,0,0,.06);

}


/* =========================================================
   GLOBAL
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  background:
    linear-gradient(
      to bottom,
      rgba(247,228,207,.97),
      rgba(244,219,190,.96)
    ),
    url('../img/paper-texture.jpg');

  background-size:cover;

  color:var(--liv-text);

  overflow-x:hidden;

  font-family:'Inter',sans-serif;
}


/* =========================================================
   HEADER
   ========================================================= */

.header{

  background:
    rgba(255,248,240,.82);

  backdrop-filter:blur(14px);

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

}

.sitename,
.navmenu a{
  color:var(--liv-text)!important;
}

.btn-getstarted{

  background:
    linear-gradient(
      135deg,
      var(--liv-accent),
      var(--liv-accent-dark)
    );

  border:none;

  color:white!important;
}


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

.hero{

  min-height:100vh;

  display:flex;
  align-items:center;

  position:relative;

  overflow:hidden;

  padding:150px 0 110px;
}

.hero::before{

  content:"";

  position:absolute;

  width:900px;
  height:900px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,213,143,.35) 0%,
      rgba(255,213,143,0) 72%
    );

  right:-260px;
  top:-260px;
}

.hero-title{

  font-family:'Cormorant Garamond',serif;

  font-size:
    clamp(3.5rem,8vw,7rem);

  line-height:.82;

  letter-spacing:-2px;

  margin-bottom:28px;

  font-weight:700;

  color:var(--liv-text);
}

.hero-subtitle{

  font-size:
    clamp(1.2rem,2vw,2rem);

  line-height:1.5;

  margin-bottom:28px;

  font-weight:600;

  opacity:.9;
}

.hero p{

  line-height:1.95;

  font-size:1.1rem;

  margin-bottom:20px;

  max-width:720px;
}

.hero-badge{

  display:inline-flex;
  align-items:center;
  gap:10px;

  background:
    rgba(216,138,60,.12);

  border:
    1px solid rgba(216,138,60,.2);

  padding:12px 20px;

  border-radius:999px;

  margin-bottom:26px;

  color:var(--liv-accent-dark);

  font-weight:700;

  font-size:.92rem;
}


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

.hero-buttons{

  display:flex;
  flex-wrap:wrap;

  gap:18px;

  margin-top:42px;
}

.btn-livraria{

  padding:16px 30px;

  border-radius:999px;

  text-decoration:none;

  transition:.35s ease;

  font-weight:700;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.btn-primary-liv{

  background:
    linear-gradient(
      135deg,
      var(--liv-accent),
      var(--liv-accent-dark)
    );

  color:white;

  box-shadow:
    0 12px 28px rgba(216,138,60,.35);
}

.btn-primary-liv:hover{

  transform:
    translateY(-4px);

  color:white;
}

.btn-secondary-liv{

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

  border:
    1px solid rgba(0,0,0,.08);

  backdrop-filter:blur(12px);

  color:var(--liv-text);
}

.btn-secondary-liv:hover{

  background:white;

  color:var(--liv-text);
}


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

.hero-stack{

  position:relative;

  width:100%;
  max-width:620px;

  margin:auto;

  min-height:720px;
}

.hero-book{

  position:absolute;

  width:340px;

  border-radius:18px;

  overflow:hidden;

  box-shadow:var(--liv-shadow);

  border:
    8px solid rgba(255,255,255,.35);

  transition:.4s ease;

  backdrop-filter:blur(8px);
}

.hero-book::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.12),
      rgba(0,0,0,0)
    );

  pointer-events:none;
}

.hero-book img{

  width:100%;

  display:block;

  border-radius:10px;
}

.hero-book:hover{

  transform:
    translateY(-12px)
    scale(1.02);
}


/* =========================================================
   HERO STACK ORDER
   ========================================================= */

.book-1{

  left:40px;
  top:40px;

  transform:
    rotate(-5deg);

  z-index:3;
}

.book-2{

  right:20px;
  top:120px;

  transform:
    rotate(6deg);

  z-index:2;
}

.book-3{

  right:90px;
  bottom:20px;

  transform:
    rotate(-2deg);

  z-index:1;
}


/* =========================================================
   MOBILE HERO STACK
   ========================================================= */

.hero-stack-mobile{

  display:flex;
  justify-content:center;

  margin:
    10px auto
    40px auto;
}

.hero-stack-mobile .hero-stack{

  min-height:360px;

  max-width:320px;

  width:100%;
}

.hero-stack-mobile .hero-book{
  width:180px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section-space{
  padding:120px 0;
}

.section-title{

  text-align:center;

  margin-bottom:70px;
}

.section-title h2{

  font-family:
    'Cormorant Garamond',
    serif;

  font-size:
    clamp(2.6rem,5vw,4.8rem);

  margin-bottom:20px;

  font-weight:700;
}

.section-title p{

  max-width:860px;

  margin:auto;

  line-height:1.9;

  font-size:1.1rem;

  opacity:.92;
}


/* =========================================================
   COLLECTION
   ========================================================= */

.collection-section{

  margin:40px 24px;

  border-radius:42px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.22),
      rgba(255,255,255,.10)
    );

  backdrop-filter:blur(10px);

  border:
    1px solid rgba(255,255,255,.25);

  box-shadow:
    var(--liv-shadow-soft);

  position:relative;

  overflow:hidden;
}

.collection-section::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:42px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,0)
    );

  pointer-events:none;
}


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

.book-card{

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

  backdrop-filter:blur(14px);

  border-radius:22px;

  overflow:hidden;

  border:
    1px solid rgba(255,255,255,.35);

  box-shadow:var(--liv-shadow);

  transition:.35s ease;

  height:100%;
}

.book-card:hover{

  transform:
    translateY(-10px);
}

.book-card img{

  width:100%;

  height:500px;

  object-fit:contain;

  object-position:center top;

  padding:18px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.65),
      rgba(255,255,255,.2)
    );

  border-radius:14px;
}

.book-body{
  padding:34px;
}

.book-tag{

  display:inline-block;

  padding:8px 16px;

  border-radius:999px;

  background:
    rgba(216,138,60,.1);

  color:var(--liv-accent-dark);

  font-size:.82rem;

  font-weight:700;

  margin-bottom:20px;
}

.book-body h3{

  font-family:
    'Cormorant Garamond',
    serif;

  font-size:2.2rem;

  line-height:1;

  margin-bottom:18px;

  font-weight:700;
}

.book-body p{

  line-height:1.9;

  margin-bottom:28px;
}


/* =========================================================
   QUOTE SECTION
   ========================================================= */

.quote-section{
  padding-top:0;
}

.quote-box{

  background:
    linear-gradient(
      135deg,
      #d88a3c,
      #b96820
    );

  color:white;

  border-radius:40px;

  padding:80px 50px;

  text-align:center;

  box-shadow:var(--liv-shadow);
}

.quote-box p{

  font-family:
    'Cormorant Garamond',
    serif;

  font-size:
    clamp(2rem,4vw,3.4rem);

  line-height:1.4;

  margin:0;

  font-weight:700;
}


/* =========================================================
   ECOSYSTEM
   ========================================================= */

.ecosystem-card{

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

  backdrop-filter:blur(14px);

  border-radius:30px;

  padding:40px;

  box-shadow:var(--liv-shadow);

  border:
    1px solid rgba(255,255,255,.4);

  height:100%;
}

.ecosystem-icon{

  width:78px;
  height:78px;

  border-radius:24px;

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

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

  font-size:2rem;

  margin-bottom:24px;
}

.ecosystem-card h3{

  font-size:1.6rem;

  margin-bottom:18px;

  font-weight:700;
}

.ecosystem-card p{

  line-height:1.9;

  opacity:.92;
}


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

.cta-box{

  background:
    linear-gradient(
      145deg,
      #fff7ef,
      #ffe3c2
    );

  border-radius:40px;

  padding:90px 40px;

  text-align:center;

  box-shadow:var(--liv-shadow);
}

.cta-box h2{

  font-family:
    'Cormorant Garamond',
    serif;

  font-size:
    clamp(3rem,5vw,5.5rem);

  line-height:.9;

  margin-bottom:24px;

  font-weight:700;
}

.cta-box p{

  max-width:760px;

  margin:auto auto 36px auto;

  line-height:1.95;

  font-size:1.1rem;
}


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

.footer{

  background:
    rgba(255,248,241,.8);

  backdrop-filter:blur(10px);

  color:var(--liv-text);
}

.footer *{
  color:var(--liv-text)!important;
}


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

@media(max-width:992px){

  .hero{

    text-align:center;

    padding-top:150px;
  }

  .hero-buttons{
    justify-content:center;
  }

  .hero-stack{

    min-height:580px;

    margin-top:60px;
  }

  .hero-book{
    width:240px;
  }

  .book-1{
    left:10px;
  }

  .book-2{
    right:10px;
  }

  .book-3{
    right:50px;
  }

  .quote-box{
    padding:50px 24px;
  }

  .collection-section{
    margin:20px 12px;
  }

}

@media(max-width:768px){

  .hero-stack{
    min-height:500px;
  }

  .hero-book{
    width:190px;
  }

  .book-1{
    top:40px;
  }

  .book-2{
    top:100px;
  }

  .book-3{

    bottom:10px;

    right:10px;
  }

  .section-space{
    padding:90px 0;
  }

  .book-card img{
    height:420px;
  }

  .hero-title{
    letter-spacing:-1px;
  }

}