/* estilos.css - Awwwards-level immersive UI for BlakyTales */
:root{
  --mesh-1: #0f0c0c;
  --mesh-2: #2b1d1a;
  --mesh-3: #101728; /* toque nocturno azul */
  --hueso: #eae8e1;
  --dorado: #D4AF37;
  --dorado-2: #f1d16f;
  --vidrio: rgba(30,25,25,0.4);
  --borde-vidrio: rgba(255,215,0,0.12);
  --glow: 0 25px 60px rgba(212,175,55,0.20);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-nav: 50px;
  --dur: 0.4s;
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-soft: 0 18px 48px rgba(0,0,0,0.45);
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:var(--hueso);
  background:
    radial-gradient(120% 120% at 12% 20%, rgba(43,29,26,0.55) 0%, transparent 55%),
    radial-gradient(110% 110% at 82% 10%, rgba(16,23,40,0.45) 0%, transparent 50%),
    radial-gradient(130% 130% at 50% 75%, rgba(15,12,12,0.9) 0%, rgba(15,12,12,0.2) 60%),
    linear-gradient(180deg, var(--mesh-1) 0%, var(--mesh-2) 40%, #0c0a0a 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x:hidden;
}

/* Noise overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:0;
}

.page-shell{max-width:1200px;margin:0 auto;padding:24px;position:relative;z-index:1;}

/* Navbar cápsula flotante */
.navbar{
  background:var(--vidrio);
  border:1px solid var(--borde-vidrio);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.navbar .navbar-brand{
  font-family:'Playfair Display', serif;
  font-weight:700;
  background:linear-gradient(90deg, var(--dorado), var(--dorado-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand-mark{display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
.brand-logo{height:96px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));}
.icon{display:inline-flex;align-items:center;gap:6px;}

/* Animaciones de entrada y transiciones suaves */
.animate-fade{animation: fadeIn 0.9s var(--easing) both;}
.animate-up{animation: fadeUp 0.9s var(--easing) both;}
.animate-delay-1{animation-delay: .08s;}
.animate-delay-2{animation-delay: .16s;}
.animate-delay-3{animation-delay: .24s;}

@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes fadeUp{from{opacity:0; transform:translateY(20px);}to{opacity:1; transform:translateY(0);}}
.navbar .nav-link{color:rgba(234,232,225,0.82);} 
.navbar .nav-link:hover{color:var(--hueso);} 

.nav-capsule{
  margin:16px auto 10px auto;
  background:var(--vidrio);
  border:1px solid var(--borde-vidrio);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-soft);
  padding:10px 18px;
}
.nav-capsule .navbar-brand{font-size:1.45rem;}
.nav-capsule .nav-link{
  color:rgba(234,232,225,0.82);
  position:relative;
  padding-inline:12px;
  transition: color var(--dur) var(--easing);
}
.nav-capsule .nav-link::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:4px;
  height:2px;
  background:linear-gradient(90deg, var(--dorado), var(--dorado-2));
  transform:scaleX(0);
  transform-origin:center;
  transition: transform var(--dur) var(--easing);
}
.nav-capsule .nav-link:hover{color:var(--hueso);} 
.nav-capsule .nav-link:hover::after{transform:scaleX(1);} 

/* Hero cinematográfico */
.hero{
  margin-top:22px;
  padding:48px;
  border-radius: var(--radius-xl);
  background: radial-gradient(120% 140% at 20% 20%, rgba(212,175,55,0.08), transparent 55%),
              radial-gradient(140% 120% at 85% 15%, rgba(16,23,40,0.2), transparent 60%),
              rgba(20,14,14,0.75);
  border:1px solid var(--borde-vidrio);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:32px;
  align-items:center;
}
.hero-title{
  font-family:'Playfair Display', serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height:1.05;
  margin:0 0 12px 0;
  background:linear-gradient(120deg, var(--dorado), var(--hueso));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  color:rgba(234,232,225,0.82);
  font-size:1.05rem;
  margin:0 0 20px 0;
}
.btn-oro{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  border:none;
  border-radius: var(--radius-lg);
  background:linear-gradient(135deg, var(--dorado), var(--dorado-2));
  color:#1a120c;
  font-weight:700;
  letter-spacing:0.2px;
  box-shadow: 0 0 20px rgba(212,175,55,0.4);
  transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
  text-decoration:none;
}
.btn-oro:hover{transform:translateY(-3px) scale(1.01); box-shadow:0 0 28px rgba(212,175,55,0.55);} 
.btn-oro:active{transform:translateY(0) scale(0.99);} 

/* Grid de historias */
.seccion-principal{margin-top:36px;}
.cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
}
.card-libro{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-xl);
  background: var(--vidrio);
  border:1px solid var(--borde-vidrio);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-height:340px;
  display:flex;
  flex-direction:column;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing), border-color var(--dur) var(--easing);
}
.card-libro:hover{
  transform: translateY(-10px);
  border-color: rgba(212,175,55,0.35);
  box-shadow: var(--glow);
}
.card-cover{
  position:relative;
  height:190px;
  overflow:hidden;
}
.card-cover img{
  width:100%; height:100%; object-fit:cover;
  transition: transform var(--dur) var(--easing);
}
.card-libro:hover .card-cover img{transform: scale(1.05);} 

.card-info{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:auto;
  background: linear-gradient(180deg, rgba(15,12,12,0.0) 0%, rgba(15,12,12,0.4) 100%);
}
.titulo-libro{
  margin:0;
  font-family:'Playfair Display', serif;
  font-size:1.05rem;
}
.autor-libro{color:rgba(234,232,225,0.7); font-size:0.9rem;}
.sinopsis-libro{color:rgba(234,232,225,0.78); font-size:0.95rem; margin:0;}

.card-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:6px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(241,209,111,0.35);
  color:var(--hueso);
  font-size:0.88rem;
  font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing), background var(--dur) var(--easing);
}
.pill:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,0.45); background:rgba(255,255,255,0.16);}

/* Formularios y secciones reutilizables */
.form-card{
  padding:20px;
  background:var(--vidrio);
  border:1px solid var(--borde-vidrio);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}
.form-control, .form-select{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--hueso);
}
.form-select{
  background-color:rgba(9,7,14,0.9) !important;
  color:var(--hueso) !important;
}
.form-select option{
  background-color:rgba(9,7,14,0.94) !important;
  color:var(--hueso) !important;
}
.form-select option:checked{
  background-color:rgba(212,175,55,0.24);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(212,175,55,0.35);
  box-shadow: 0 0 0 0.25rem rgba(212,175,55,0.12);
  background:rgba(255,255,255,0.08);
}

/* Tablas con vidrio oscuro */
.table{
  color:var(--hueso);
  background:transparent;
}
.table th,.table td{
  border-color:rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.06);
}
.table thead th{
  background:rgba(255,255,255,0.10);
  font-weight:700;
}
.table tbody tr{
  background:rgba(255,255,255,0.04);
  transition: background var(--dur) var(--easing);
}
.table tbody tr:nth-child(even){
  background:rgba(255,255,255,0.07);
}
.table tbody tr:hover{
  background:rgba(212,175,55,0.08);
}

.site-footer{
  margin:36px auto 10px auto;
  text-align:center;
  color:rgba(234,232,225,0.65);
}

.muted{color:rgba(234,232,225,0.72);} 

@media (max-width: 768px){
  .hero{padding:32px;}
  .nav-capsule{border-radius:32px;}
}