/* estilos.css - Rediseño oscuro, warm glassmorphism para BlakyTales */
:root{
  --fondo-principal: #1A1A1A; /* gris carbón cálido */
  --fondo-secundario: #2C2420; /* marrón chocolate profundo */
  --texto-crema: #FDFBF7; /* color hueso para texto */
  --dorado-1: #D4AF37;
  --dorado-2: #F9A825;
  --glass-bg: rgba(255,255,255,0.04); /* lámina translúcida */
  --glass-border: rgba(255,255,255,0.06);
  --shadow-warm: rgba(180,120,50,0.10);
  --card-radius: 18px;
  --btn-radius: 20px;
}

/* Tipografías sugeridas */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Merriweather:wght@700;900&display=swap');

html,body{
  height:100%;
}
body{
  margin:0;
  background: linear-gradient(180deg, var(--fondo-principal) 0%, #221812 100%);
  color: var(--texto-crema);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Navbar flotante con glassmorphism */
.navbar{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px var(--shadow-warm);
  border-radius: 14px;
}
.navbar .navbar-brand{
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-weight:700;
  font-size:1.35rem;
  background: linear-gradient(90deg, var(--dorado-1), var(--dorado-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero mejorado */
.hero-section{
  margin-top: 1.5rem;
  padding: 3rem 2rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(44,36,32,0.88) 0%, rgba(26,20,18,0.88) 100%);
  box-shadow: 0 20px 50px rgba(10,6,4,0.6), 0 6px 24px var(--shadow-warm);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.hero-section .hero-text h1{
  font-family: 'Merriweather', serif;
  font-size:2.1rem;
  line-height:1.05;
  margin:0 0 .6rem 0;
  color:var(--texto-crema);
}
.hero-section .hero-text p.lead{
  color: rgba(253,251,247,0.88);
  font-size:1.05rem;
  margin-bottom:1rem;
}
.btn-cta{
  display:inline-block;
  padding: .8rem 1.2rem;
  border-radius: var(--btn-radius);
  font-weight:600;
  color: var(--fondo-principal);
  background: linear-gradient(90deg, var(--dorado-1), var(--dorado-2));
  box-shadow: 0 12px 30px rgba(212,175,55,0.12), 0 4px 12px rgba(0,0,0,0.35) inset;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(212,175,55,0.18);}

/* Sección principal: cards con glassmorphism */
.seccion-principal{
  margin-top:2rem;
}
.cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;
}
.card-libro{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--card-radius);
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  min-height:320px;
  box-shadow: 0 18px 40px rgba(10,6,4,0.5), 0 8px 30px var(--shadow-warm);
}
.portada{
  height:160px;
  border-radius:12px;
  overflow:hidden;
  background:#201512;
}
.titulo-libro{
  font-family:'Merriweather', serif;
  font-size:1.05rem;
  margin:0;
}
.sinopsis-libro{
  color: rgba(253,251,247,0.86);
  flex:1;
}
.card-actions{
  display:flex;gap:.6rem;align-items:center;justify-content:flex-end;margin-top:.5rem;
}

/* Formularios y tarjetas pequeñas */
.form-card{
  padding:1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:16px;
  border:1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}

/* Footer */
.site-footer{
  margin-top:2.5rem;
  padding:1rem 0;
  text-align:center;
  color: rgba(253,251,247,0.7);
}

/* Utilities */
.muted{
  color: rgba(253,251,247,0.68);
}

@media (max-width:768px){
  .hero-section{flex-direction:column;align-items:flex-start}
  .hero-section .hero-text h1{font-size:1.6rem}
}