/* ---------- HERO ---------- */
.hero-img{
  max-width: 420px;
  width: 100%;
  height: auto;
  display: inline-block;
}

/* Espaiat del header */
.masthead{
  padding-top: 7rem;
  padding-bottom: 7rem;
}

/* ---------- PORTADES ---------- */
.book-cover{
  width: 100%;          /* ocupa tota l’amplada de la columna */
  height: auto;         /* manté proporció */
  max-width: 540px;     /* les fem més grans a desktop */
  border-radius: .5rem;
  box-shadow: 0 0.25rem 1rem rgba(0,0,0,.15);
  margin: 0 auto;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

/* Tremolor suau al passar el cursor */
.book-cover:hover,
.book-cover:focus{
  animation: wobble .4s ease-in-out 1;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.25);
  outline: none;
}

@keyframes wobble{
  0%   { transform: rotate(0) translateY(0); }
  25%  { transform: rotate(-1.2deg) translateY(-2px); }
  50%  { transform: rotate(1.2deg) translateY(0); }
  75%  { transform: rotate(-.8deg) translateY(-1px); }
  100% { transform: rotate(0) translateY(0); }
}

/* ---------- SECCIONS DE LLIBRE ---------- */
/* Efecte d’enfosquiment lleu del fons de secció */
.book-section{
  transition: filter .25s ease, background-color .25s ease;
}
.book-section:hover{
  filter: brightness(.94);
}

/* ---------- RESPONSIU ---------- */
@media (max-width: 576px){
  .book-cover{
    max-width: 84vw;  /* grans a mòbil però amb marge */
  }
  .hero-img{
    max-width: 72vw;
  }
}

/* ---------- PEU I ESTÈTICA EXISTENT ---------- */
footer{
  padding: 25px 0;
  text-align: left;
  color: #fff;
  background-color: #222;
}
footer p{ font-size: 1em; margin: 0; }
footer ul{ margin-bottom: 0; }
footer ul li a{
  font-size: 12px;
  color: rgba(255,255,255,.3);
}
footer ul li a:hover,
footer ul li a:focus,
footer ul li a:active,
footer ul li a.active{ text-decoration: none; }

/* Colors de fons de les seccions (els teus) */
.bg-primary{ background: linear-gradient(#fdcc52, #fdc539); }
.bg-primary-tipuana{ background: #d3e3fb; }
.bg-primary-elevada{ background: #568193; }
.bg-primary-cautiva{ background: #dedacc; }
.bg-primary-dias{ background: #9d9d9d; }
.bg-primary-terraza{ background: #627a95; }
.bg-primary-arena{ background: #6e6e6e; }
.bg-primary-duermevela{ background: #6f9681; }
.bg-primary-extraneza{ background: #d45c50; }

.text-primary{ color: #fdcc52; }
.abstract{ text-align: justify; font-size: 1em; }
.title{ text-align: left; font-weight: bold; }
.subtitle{ text-align: left; font-style: italic; font-size: 1.7em; }

.no-gutter > [class*='col-']{ padding-right: 0; padding-left: 0; }

.btn{
  border-radius: 300px;
  font-family: 'Lato','Helvetica','Arial','sans-serif';
  letter-spacing: 2px;
  text-transform: uppercase;
}
.btn-xl{ font-size: 11px; padding: 15px 45px; }

.btn-outline,
.btn-outline1,
.btn-outline2,
.btn-outline3{
  color: #fff;
  border: 1px solid #fff;
}
.btn-outline:hover{ background-color: #686868; }
.btn-outline1:hover{ background-color: #9bbff7; }
.btn-outline2:hover{ background-color: #3d6170; }
.btn-outline3:hover{ background-color: #bbb6a3; }


/* Scroll suau nadiu */
html {
  scroll-behavior: smooth;
}

/* Evita que la navbar fixa tapi les ancores */
.anchor-target {
  scroll-margin-top: 90px; /* ~altura de la navbar */
}

/* HERO a pantalla completa */
.hero-full {
  position: relative;
  min-height: 100vh;     /* ocupa tota l’alçada visible */
  display: flex;
  align-items: center;   /* centra verticalment el contingut */
  padding-top: 7rem;     /* espai per la navbar fixa */
  padding-bottom: 7rem;
}

/* Títol del hero una mica més protagonista */
.hero-title{
  font-size: 2rem;
  line-height: 1.2;
}
@media (min-width: 992px){
  .hero-title{ font-size: 2.5rem; }
}

/* Fletxa/CTA inferior del hero */
.scroll-down{
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  text-align: center;
}

.scroll-link{
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 999px;
  padding: .6rem 1rem;
  color: #fff;
  background: rgba(0,0,0,.25);
  backdrop-filter: saturate(120%) blur(4px);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

.scroll-link:hover,
.scroll-link:focus{
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.25);
  background: rgba(0,0,0,.35);
  outline: none;
}

/* Petita animació de “bounce” per a la fletxa */
.scroll-link i{
  animation: bounce 1.2s ease-in-out infinite;
}
@keyframes bounce{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* Ja ho tens, però recordo: imatge del hero responsiva */
.hero-img{
  max-width: 460px; /* una mica més gran */
  width: 100%;
  height: auto;
  display: inline-block;
}
@media (max-width: 576px){
  .hero-img{ max-width: 72vw; }
}

/* (Opcional) lleuger degradat fosc per facilitar llegibilitat si el fons del hero fos molt clar
.hero-full::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.08));
  pointer-events: none;
}
*/

.navbar{
  transition: background-color .2s ease, box-shadow .2s ease;
}
.navbar.scrolled{
  background-color: rgba(255,255,255,.95)!important;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
}

/* --- HERO TITLE --- */
.hero-title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero-subtitle {
  color: #777;  /* gris diferent */
  font-weight: 400;
}

/* --- BOTÓ SCROLL-DOWN --- */
.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  text-align: center;
}

.scroll-link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 999px;
  padding: .6rem 1.2rem;
  color: #fff;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Efecte al passar el cursor */
.scroll-link:hover,
.scroll-link:focus {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.3);
  outline: none;
}

/* --- ANIMACIÓ BOUNCE cada 2s --- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-6px); }
  60%      { transform: translateY(3px); }
}

.scroll-link {
  animation: bounce 2s infinite;
}

/* El body/HTML poden tenir scroll suau */
html { scroll-behavior: smooth; }

/* HERO pantalla completa i contenidor de posicionats absoluts */
.hero-full{
  position: relative;          /* necessari per a .scroll-down-left */
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 7rem;           /* espai per navbar fixa */
  padding-bottom: 7rem;
}

/* Títol i subtítol */
.hero-title{
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
}
.hero-subtitle{
  color: #777;                 /* gris diferent */
  font-weight: 400;
}

/* Imatge del hero (no dupliquis aquesta regla més avall) */
.hero-img{
  max-width: 460px;
  width: 100%;
  height: auto;
  display: inline-block;
}

/* Botó “Novelas” enganxat a baix-esquerra del hero */
.scroll-down-left{
  position: absolute;
  left: 2rem;
  bottom: 1.75rem;
  text-align: left;
  z-index: 2;
}
.scroll-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;

  /* estil botó */
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  background: rgba(0,0,0,.25);
  backdrop-filter: saturate(120%) blur(4px);

  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.scroll-link:hover,
.scroll-link:focus{
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.28);
  outline: none;
}

/* Icona de la fletxa: animació cada 2s (només a la icona) */
.scroll-icon{
  width: 18px; height: auto; display: inline-block;
  animation: arrowBounce 2s infinite;
}
@keyframes arrowBounce{
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-6px); }
  60%     { transform: translateY(3px); }
}

/* Responsiu (ajusta marges a mòbil si cal) */
@media (max-width: 576px){
  .hero-full{ padding-top: 5rem; padding-bottom: 4rem; }
  .hero-img{ max-width: 72vw; }
  .scroll-down-left{ left: 1rem; bottom: 1rem; }