/* =========================================================
   EbookShop - Aurora Olive UI
   Diseño premium con verde olivo y matices vivos
   ========================================================= */

:root{
  --olive-900:#2f3e1f;
  --olive-800:#3f5328;
  --olive-700:#556b2f;
  --olive-600:#6b8e23;
  --olive-500:#7aa236;
  --olive-400:#95b85a;
  --olive-300:#b8d48a;
  --olive-200:#d9e8be;
  --olive-100:#eef6df;

  --lime-glow:#c7f36b;
  --gold:#ffb703;
  --amber:#fb8500;
  --mint:#22c55e;

  --white:#ffffff;
  --text:#1f2937;
  --muted:#667085;
  --line:rgba(31,41,55,.08);

  --card-bg:rgba(255,255,255,.86);
  --glass-bg:rgba(255,255,255,.68);

  --shadow-sm:0 8px 20px rgba(31,41,55,.08);
  --shadow-md:0 16px 40px rgba(31,41,55,.12);
  --shadow-lg:0 24px 60px rgba(31,41,55,.16);

  --radius-sm:14px;
  --radius-md:20px;
  --radius-lg:28px;
}

/* =========================
   BASE
   ========================= */
html, body{
  min-height:100%;
}

body{
  font-family:"Inter", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(199,243,107,.35), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(122,162,54,.28), transparent 25%),
    radial-gradient(circle at 15% 85%, rgba(255,183,3,.12), transparent 20%),
    radial-gradient(circle at 82% 78%, rgba(34,197,94,.14), transparent 22%),
    linear-gradient(180deg, #f6f9ef 0%, #eef6df 35%, #ffffff 100%);
  background-attachment: fixed;
}

a{
  text-decoration:none;
}

.small-muted{
  color:var(--muted) !important;
}

.section-title{
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--olive-900);
}

.fw-black{
  font-weight:800 !important;
}

/* =========================
   NAVBAR
   ========================= */
.navbar{
  background:linear-gradient(90deg, rgba(63,83,40,.96), rgba(85,107,47,.94)) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 8px 30px rgba(47,62,31,.18);
  backdrop-filter: blur(10px);
}

.navbar .navbar-brand{
  color:var(--white) !important;
  font-size:1.9rem;
  font-weight:800;
  letter-spacing:-.03em;
}

.navbar .btn-outline-secondary{
  border:1px solid rgba(255,255,255,.45) !important;
  color:#fff !important;
  background:rgba(255,255,255,.06) !important;
  backdrop-filter: blur(8px);
}

.navbar .btn-outline-secondary:hover{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.65) !important;
}

/* =========================
   HERO
   ========================= */
.hero{
  position:relative;
  overflow:hidden;
  padding-top:54px;
  padding-bottom:54px;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(201,255,104,.16), transparent 20%),
    radial-gradient(circle at 75% 20%, rgba(122,162,54,.10), transparent 22%),
    radial-gradient(circle at 60% 80%, rgba(255,183,3,.08), transparent 18%);
  pointer-events:none;
}

.hero > .container{
  position:relative;
  z-index:2;
}

/* =========================
   BADGES / CHIPS
   ========================= */
.badge{
  background:linear-gradient(135deg, rgba(184,212,138,.9), rgba(217,232,190,.95)) !important;
  color:var(--olive-800) !important;
  border:1px solid rgba(85,107,47,.12);
  font-weight:700;
  box-shadow:0 8px 20px rgba(107,142,35,.10);
}

/* =========================
   CARDS
   ========================= */
.cardx{
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:transform .18s ease, box-shadow .18s ease;
}

.cardx:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}

/* =========================
   BLOQUES CLAROS INTERNOS
   ========================= */
.bg-light{
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(246,249,239,.92)) !important;
  border:1px solid rgba(85,107,47,.08);
  box-shadow:var(--shadow-sm);
}

/* =========================
   BOTONES
   ========================= */
.btn{
  border-radius:999px !important;
  font-weight:700 !important;
  transition:all .18s ease;
}

.btn-brand{
  background:linear-gradient(135deg, var(--olive-600), var(--olive-800)) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(85,107,47,.28);
  position:relative;
  overflow:hidden;
}

.btn-brand::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}

.btn-brand:hover::after{
  transform:translateX(120%);
}

.btn-brand:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 18px 36px rgba(85,107,47,.34);
}

.btn-brand2{
  background:linear-gradient(135deg, var(--mint), var(--olive-500)) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(34,197,94,.24);
  position:relative;
  overflow:hidden;
}

.btn-brand2::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.20) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}

.btn-brand2:hover::after{
  transform:translateX(120%);
}

.btn-brand2:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(34,197,94,.30);
}

.btn-outline-secondary{
  border:1px solid rgba(63,83,40,.24) !important;
  color:var(--olive-800) !important;
  background:rgba(255,255,255,.72) !important;
}

.btn-outline-secondary:hover{
  background:rgba(107,142,35,.08) !important;
  color:var(--olive-900) !important;
  border-color:rgba(85,107,47,.38) !important;
}

/* =========================
   INPUTS
   ========================= */
.inputx{
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(85,107,47,.12) !important;
  border-radius:16px !important;
  box-shadow: inset 0 1px 2px rgba(31,41,55,.04);
}

.inputx:focus{
  border-color:rgba(107,142,35,.45) !important;
  box-shadow:0 0 0 .25rem rgba(149,184,90,.20) !important;
}

/* =========================
   ACORDEÓN
   ========================= */
.accordion-item{
  border:none !important;
  background:transparent !important;
}

.accordion-button{
  background:rgba(255,255,255,.82) !important;
  color:var(--olive-900) !important;
  font-weight:700;
  box-shadow:var(--shadow-sm);
}

.accordion-button:not(.collapsed){
  background:linear-gradient(135deg, rgba(217,232,190,.92), rgba(255,255,255,.94)) !important;
  color:var(--olive-800) !important;
}

.accordion-body{
  background:rgba(255,255,255,.78);
  color:var(--muted);
}

/* =========================
   FOOTER
   ========================= */
.footer{
  background:linear-gradient(90deg, rgba(47,62,31,.98), rgba(85,107,47,.96)) !important;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -6px 24px rgba(31,41,55,.08);
}

.footer .small-muted{
  color:rgba(255,255,255,.75) !important;
}

.footer a{
  color:#fff !important;
  opacity:.92;
}

.footer a:hover{
  opacity:1;
}

/* =========================
   LINKS / DETALLES
   ========================= */
a.text-decoration-none:hover{
  text-decoration:underline !important;
}

/* =========================
   MODALES / BLOQUES GENERALES
   ========================= */
.modal-content{
  border:none;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  background:rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 991px){
  .hero{
    padding-top:34px;
    padding-bottom:34px;
  }

  .navbar .navbar-brand{
    font-size:1.6rem;
  }
}

@media (max-width: 576px){
  .cardx{
    border-radius:22px;
  }

  .btn-brand,
  .btn-brand2{
    width:100%;
  }
}