/* Transformado en el Fuego — Kei Bonilla
   Dark / fire aesthetic. Vanilla CSS, no framework. */

:root{
  --black: #0a0908;
  --charcoal: #141210;
  --smoke: #1d1a17;
  --smoke-2: #26221e;
  --ember: #d68a2a;
  --amber: #f0a93a;
  --fire-gold: #f7c55a;
  --burnt: #b5551c;
  --off-white: #f4efe8;
  --grey: #b8b2a9;
  --grey-dim: #8a847b;
  --line: rgba(244,239,232,0.12);

  --font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --max-w: 1280px;
  --radius: 10px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--black);
  color: var(--off-white);
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
.container{
  width:100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
section{ position: relative; }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--amber); color:#141210; padding:10px 16px;
  border-radius:6px; font-weight:700; z-index:1000; transition: top .2s ease;
}
.skip-link:focus{ top:12px; }

:focus-visible{
  outline: 2px solid var(--fire-gold);
  outline-offset: 3px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family: var(--font-body);
  font-weight:700;
  font-size: 1rem;
  letter-spacing:.03em;
  text-decoration:none;
  padding: 16px 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(180deg, var(--fire-gold), var(--ember) 70%, var(--burnt));
  color: #1a1006;
  box-shadow: 0 8px 24px -8px rgba(214,138,42,.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(214,138,42,.7); }
.btn-primary:active{ transform: translateY(0); }
.btn-outline{
  background: transparent;
  color: var(--off-white);
  border-color: rgba(244,239,232,.35);
}
.btn-outline:hover{ border-color: var(--fire-gold); color: var(--fire-gold); }
.btn-lg{ padding: 19px 36px; font-size: 1.08rem; }
.btn-icon{ width:1.1em; height:1.1em; flex-shrink:0; }

.eyebrow{
  display:inline-block;
  font-size: .85rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--amber);
  margin: 0 0 16px;
}
.section-title{
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(2.1rem, 3.8vw, 3.1rem);
  line-height:1.1;
  margin: 0;
  color: var(--off-white);
}
.rule{
  width:72px; height:4px; margin-top:24px;
  background: linear-gradient(90deg, var(--fire-gold), transparent);
  border:0;
}

/* ---------- Header ---------- */
.site-header{
  position: relative; z-index: 500;
  background: rgba(9,8,7,.97);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.wordmark{
  font-family: var(--font-display);
  font-weight:900;
  font-size: 1.12rem;
  letter-spacing:.03em;
  text-decoration:none;
  color: var(--off-white);
  line-height:1.05;
}
.wordmark span{ color: var(--amber); }
.main-nav{ display:flex; align-items:center; gap:40px; }
.main-nav a:not(.btn){
  text-decoration:none;
  color: var(--grey);
  font-size: .96rem;
  font-weight:600;
  letter-spacing:.02em;
  transition: color .15s ease;
}
.main-nav a:not(.btn):hover{ color: var(--off-white); }
.main-nav .btn{ display:none; }
.header-actions{ display:flex; align-items:center; gap:22px; }
.nav-toggle{
  display:none;
  background:transparent; border:1px solid var(--line); border-radius:8px;
  width:44px; height:44px; align-items:center; justify-content:center;
  color: var(--off-white); cursor:pointer;
}
.nav-toggle svg{ width:22px; height:22px; }

@media (max-width: 860px){
  .main-nav{
    position:fixed; inset: 76px 0 auto 0;
    background: var(--charcoal);
    border-bottom: 1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0;
    padding: 8px 24px 20px;
    transform: translateY(-8px);
    opacity:0; visibility:hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .main-nav.is-open{ opacity:1; visibility:visible; transform: translateY(0); }
  .main-nav a:not(.btn){ padding: 14px 0; width:100%; border-bottom:1px solid var(--line); }
  .main-nav .btn{ display:inline-flex; margin-top:16px; width:100%; }
  .nav-toggle{ display:inline-flex; }
  .header-actions .btn-primary.header-cta{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  padding: 56px 0 48px;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 84% 12%, rgba(214,138,42,.24), transparent 62%),
    radial-gradient(50% 50% at 6% 96%, rgba(181,85,28,.16), transparent 60%),
    radial-gradient(40% 40% at 30% 60%, rgba(120,50,10,.10), transparent 70%),
    var(--black);
}
.hero-embers{
  position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.hero-embers span{
  position:absolute;
  width:5px; height:5px; border-radius:50%;
  background: var(--fire-gold);
  box-shadow: 0 0 10px 3px rgba(247,197,90,.7);
  opacity:.55;
}
.hero-embers span:nth-child(1){ left:12%; top:20%; width:4px; height:4px; }
.hero-embers span:nth-child(2){ left:22%; top:65%; }
.hero-embers span:nth-child(3){ left:38%; top:35%; width:3px; height:3px; opacity:.4; }
.hero-embers span:nth-child(4){ left:55%; top:78%; }
.hero-embers span:nth-child(5){ left:68%; top:15%; width:4px; height:4px; }
.hero-embers span:nth-child(6){ left:80%; top:55%; opacity:.4; }
.hero-embers span:nth-child(7){ left:92%; top:30%; width:3px; height:3px; }

.hero .container{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items:center;
}
.hero-copy .eyebrow{ font-size:.95rem; }
.hero-title{
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(2.9rem, 5.6vw, 4.4rem);
  line-height: .96;
  letter-spacing: -.01em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.hero-title .line-1{ color: var(--off-white); display:block; }
.hero-title .line-2{ color: var(--off-white); display:block; }
.hero-title .line-fuego{
  display:block;
  background: linear-gradient(180deg, var(--fire-gold), var(--ember) 55%, var(--burnt));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(214,138,42,.35);
}
.hero-lead{
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--off-white);
  max-width: 42ch;
  margin: 0 0 10px;
}
.hero-sub{
  font-size: 1.05rem;
  color: var(--grey);
  max-width: 44ch;
  margin: 0 0 30px;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; }

.hero-art{ position:relative; display:flex; justify-content:center; }
.hero-art-glow{
  position:absolute; inset: -18% -10% -18% 6%;
  background: radial-gradient(closest-side, rgba(214,138,42,.5), rgba(214,138,42,0) 68%);
  filter: blur(6px);
  pointer-events:none;
  z-index:0;
}

/* Reusable 3D book component */
.book-3d{
  position:relative; z-index:1;
  perspective: 1600px;
}
.book-3d-inner{
  position:relative;
  transform: rotateY(-22deg) rotateX(3deg);
  transform-style: preserve-3d;
  transition: transform .5s ease;
}
.book-3d:hover .book-3d-inner{ transform: rotateY(-14deg) rotateX(2deg); }
.book-3d-cover{
  position:relative; z-index:2;
  width:100%;
  height:auto;
  border-radius: 3px 6px 6px 3px;
  box-shadow:
    0 30px 60px -18px rgba(0,0,0,.8),
    0 0 0 1px rgba(244,239,232,.07);
  display:block;
}
.book-3d-pages{
  position:absolute; z-index:1;
  right:-9px; top:2%; bottom:2%; width:14px;
  background: repeating-linear-gradient(180deg, #e9e2d3 0 2px, #d8cfba 2px 4px);
  transform: rotateY(90deg) translateZ(7px) translateX(-2px);
  transform-origin: left center;
  border-radius: 0 3px 3px 0;
}
.book-3d-spine{
  position:absolute; z-index:0;
  left:-16px; top:1%; bottom:1%; width:22px;
  background: linear-gradient(90deg, #0a0908, #241a10 55%, #0a0908);
  transform: rotateY(-90deg) translateZ(7px) translateX(-2px);
  transform-origin: right center;
  border-radius: 3px 0 0 3px;
  box-shadow: inset -4px 0 8px rgba(0,0,0,.55);
}
.book-3d--hero{ width: min(58vw, 320px); }
.book-3d--cta{ width: min(52vw, 260px); }

/* ---------- Info strip ---------- */
.info-strip{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--charcoal);
}
.info-strip ul{
  list-style:none; margin:0; padding: 26px 0;
  display:flex; flex-wrap:wrap; gap: 22px 48px;
  justify-content:center;
}
.info-strip li{
  display:flex; align-items:center; gap:12px;
  font-size:.92rem; font-weight:700; letter-spacing:.05em;
  color: var(--grey);
  text-transform:uppercase;
}
.info-strip svg{ width:22px; height:22px; color: var(--amber); flex-shrink:0; }

/* ---------- Sobre el libro ---------- */
.about{ padding: 108px 0 100px; }
.about .container{
  display:grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items:center;
}
.about-copy p{ color: var(--grey); font-size: 1.12rem; margin: 0 0 20px; }
.about-copy p:last-child{ margin-bottom:0; }
.about-media{
  position:relative; border-radius: var(--radius); overflow:hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
}
.about-media svg{ width:100%; height:100%; display:block; }

.themes{ padding: 0 0 108px; }
.theme-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.theme-card{
  background: linear-gradient(180deg, var(--smoke), var(--charcoal));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 26px;
  text-align:center;
}
.theme-icon{
  width:48px; height:48px; margin: 0 auto 20px;
  color: var(--amber);
}
.theme-icon svg{ width:100%; height:100%; }
.theme-card h3{
  font-family: var(--font-display);
  font-size: 1.08rem; letter-spacing:.05em;
  margin: 0 0 10px; color: var(--off-white);
}
.theme-card p{ margin:0; color: var(--grey-dim); font-size:.96rem; }

/* ---------- Quote ---------- */
.quote-section{
  padding: 96px 0;
  position:relative;
  background:
    radial-gradient(65% 80% at 20% 50%, rgba(214,138,42,.22), transparent 65%),
    var(--black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow:hidden;
}
.quote-layout{
  display:grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items:center;
}
.quote-visual{ position:relative; display:flex; justify-content:center; }
.quote-visual svg{ width:100%; max-width:340px; height:auto; display:block; }
.quote-content{ text-align:left; }
.quote-mark{
  font-family: var(--font-display);
  font-size: 5.5rem; line-height:1; color: var(--ember);
  opacity:.6; margin: 0 0 4px;
}
blockquote{
  margin: 0; max-width: none;
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.2;
  color: var(--off-white);
}
blockquote em{ font-style:normal; color: var(--amber); }

/* ---------- Author ---------- */
.author{ padding: 108px 0; }
.author .container{
  display:grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items:center;
}
.author-photo-wrap{ position:relative; }
.author-photo-wrap img{
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.75);
}
.author-photo-wrap::before{
  content:"";
  position:absolute; inset: 18px -18px -18px 18px;
  border: 1px solid rgba(214,138,42,.45);
  border-radius: var(--radius);
  z-index:-1;
}
.author-bio p{ color: var(--grey); font-size: 1.12rem; margin: 0 0 18px; }
.author-role-list{
  list-style:none; margin: 24px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:12px;
}
.author-role-list li{
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size:.9rem; font-weight:600;
  color: var(--off-white);
  background: var(--smoke);
}
.author-signature{
  margin-top: 30px; font-family: "Bradley Hand Bold", cursive; font-size:1.65rem; color: var(--amber);
}

/* ---------- Final CTA ---------- */
.final-cta{
  position:relative; overflow:hidden;
  padding: 116px 0 108px;
  background:
    radial-gradient(55% 70% at 12% 30%, rgba(214,138,42,.16), transparent 65%),
    linear-gradient(180deg, var(--black), #140f0a);
  border-top: 1px solid var(--line);
}
.final-cta .container{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items:center;
}
.final-cta-art{ position:relative; display:flex; justify-content:center; }
.final-cta-copy{ text-align:left; }
.final-cta-title{
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height:1.12;
  margin: 0 0 20px;
  color: var(--off-white);
}
.final-cta-sub{ color: var(--grey); font-size:1.2rem; margin:0 0 32px; }
.final-cta-note{ margin-top:20px; color: var(--grey-dim); font-size:.92rem; }

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 34px 0;
  background: var(--black);
}
.site-footer .container{
  display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between;
}
.footer-copy{ color: var(--grey-dim); font-size:.85rem; margin:0; }
.footer-tag{ color: var(--grey-dim); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin:0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .book-3d-inner{ transition:none; }
  .btn{ transition:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero .container{ grid-template-columns: 1fr; gap: 36px; }
  .hero-copy{ order:2; text-align:center; }
  .hero-art{ order:1; }
  .hero-lead, .hero-sub{ max-width: 60ch; margin-left:auto; margin-right:auto; }
  .hero-ctas{ justify-content:center; }
  .book-3d--hero{ width: min(64vw, 300px); }
  .about .container{ grid-template-columns: 1fr; }
  .about-media{ order:-1; aspect-ratio: 16/9; }
  .theme-grid{ grid-template-columns: repeat(2, 1fr); }
  .quote-layout{ grid-template-columns: 1fr; text-align:center; gap:32px; }
  .quote-content{ text-align:center; }
  .quote-visual svg{ max-width:220px; }
  .author .container{ grid-template-columns: 1fr; text-align:center; }
  .author-photo-wrap{ max-width: 340px; margin: 0 auto; }
  .author-photo-wrap::before{ display:none; }
  .author-role-list{ justify-content:center; }
  .final-cta .container{ grid-template-columns: 1fr; text-align:center; }
  .final-cta-copy{ text-align:center; }
  .final-cta-ctas{ justify-content:center; }
  .book-3d--cta{ width: min(56vw, 260px); }
}

@media (max-width: 640px){
  .container{ padding: 0 20px; }
  .site-header .container{ height:68px; }
  .main-nav{ inset: 68px 0 auto 0; }
  .hero{ padding: 36px 0 44px; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; }
  .book-3d--hero{ width: min(70vw, 280px); }
  .info-strip ul{ flex-direction:column; align-items:flex-start; gap:14px; padding: 20px 0; }
  .about{ padding: 64px 0; }
  .themes{ padding: 0 0 64px; }
  .theme-grid{ grid-template-columns: 1fr; }
  .quote-section{ padding: 68px 0; }
  .quote-mark{ font-size:3.6rem; }
  .author{ padding: 64px 0; }
  .final-cta{ padding: 72px 0; }
  .book-3d--cta{ width: min(66vw, 260px); }
  .final-cta-ctas{ flex-direction:column; align-items:stretch; }
  .final-cta-ctas .btn{ width:100%; }
  .site-footer .container{ flex-direction:column; text-align:center; }
}