/* ============================================================
   Juan Miguel Ripoll — sistema visual compartido
   Editorial cream/ink + acento oro-bronce
   Fuentes: Spectral (títulos) + Karla (cuerpo)
   ============================================================ */

:root{
  --ink:#17140f;
  --ink-soft:#2a251c;
  --paper:#f3ede2;
  --paper-soft:#ece3d1;
  --paper-deep:#e6dac0;
  --gold:#b08d3f;
  --gold-bright:#cba758;
  --gold-dim:#7d5f28;
  --oxblood:#6d2020;
  --text-muted:#6b6252;
  --line:rgba(23,20,15,0.12);
  --line-strong:rgba(23,20,15,0.22);
  --shadow:0 20px 50px rgba(23,20,15,0.14);
  --shadow-soft:0 10px 30px rgba(23,20,15,0.08);
  --radius:2px;
  --ff-display:'Spectral', Georgia, 'Times New Roman', serif;
  --ff-body:'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden;}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;margin:0;line-height:1.15;color:var(--ink);}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* fade-in on load */
body{opacity:0;}
body.is-loaded{opacity:1;transition:opacity .6s ease;}

/* ============ Scroll progress bar ============ */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));
  z-index:9999;transition:width .1s linear;
}

/* ============ Nav ============ */
.site-nav{
  position:sticky;top:0;left:0;right:0;z-index:500;
  background:rgba(243,237,226,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:20px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav-logo{
  font-family:var(--ff-display);font-size:20px;font-weight:600;letter-spacing:.01em;
  display:flex;align-items:baseline;gap:2px;white-space:nowrap;
}
.nav-logo .lg-name{color:var(--ink);}
.nav-logo .lg-dot{color:var(--gold);}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links a,.nav-links span.current{
  font-family:var(--ff-body);font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;color:var(--ink-soft);
  transition:background .25s ease,color .25s ease;
}
.nav-links a:hover{background:var(--paper-deep);color:var(--ink);}
.nav-links span.current{background:var(--ink);color:var(--paper);}
.lang-toggle{
  margin-left:8px;border:1px solid var(--line-strong);background:transparent;
  border-radius:999px;padding:8px 14px;font-size:13px;letter-spacing:.05em;
  color:var(--ink-soft);transition:all .25s ease;
}
.lang-toggle:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;z-index:1200;}
.burger span{width:24px;height:2px;background:var(--ink);transition:all .3s ease;}
.burger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.is-active span:nth-child(2){opacity:0;}
.burger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-panel{
  position:fixed;inset:0;background:var(--ink);z-index:900;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.mobile-panel.is-open{opacity:1;pointer-events:auto;}
.mobile-panel a,.mobile-panel span.current{
  font-family:var(--ff-display);font-size:32px;color:var(--paper);padding:14px 0;
}
.mobile-panel span.current{color:var(--gold-bright);}
.mobile-panel .mp-lang{margin-top:24px;border:1px solid rgba(243,237,226,0.3);color:var(--paper);
  background:none;border-radius:999px;padding:10px 22px;font-size:14px;letter-spacing:.05em;}

@media (max-width:860px){
  .nav-links{display:none;}
  .burger{display:flex;}
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 28px;
  font-family:var(--ff-body);font-size:14px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  border-radius:999px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:var(--gold-dim);color:var(--paper);box-shadow:var(--shadow-soft);}
.btn-outline{border:1.5px solid var(--line-strong);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{background:var(--gold-bright);box-shadow:var(--shadow-soft);}

/* ============ Hero ============ */
.hero{
  padding:90px 0 70px;
}
.hero-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.hero-eyebrow{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim);font-weight:700;
  margin-bottom:18px;display:block;
}
.hero h1{font-size:clamp(38px,5.2vw,64px);margin-bottom:20px;}
.hero h1 em{font-style:italic;color:var(--gold-dim);}
.hero-lede{font-size:19px;color:var(--ink-soft);max-width:52ch;margin-bottom:32px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-portrait{
  position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:2/3;
}
.hero-portrait img{width:100%;height:100%;object-fit:cover;}
.hero-portrait::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(23,20,15,0.35) 100%);
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:left;}
  .hero-portrait{max-width:360px;}
}

/* ============ Section basics ============ */
section{padding:80px 0;}
.section-alt{background:var(--paper-soft);}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap;
}
.section-head h2{font-size:clamp(28px,3.6vw,42px);}
.section-head .sh-link{font-size:14px;letter-spacing:.04em;color:var(--gold-dim);font-weight:700;
  border-bottom:1px solid var(--gold-dim);padding-bottom:2px;white-space:nowrap;}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);font-weight:700;display:block;margin-bottom:14px;}

/* ============ Proyectos cards ============ */
.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.project-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease;
}
.project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.project-card .pc-media{aspect-ratio:16/10;overflow:hidden;background:var(--ink);}
.project-card .pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.project-card:hover .pc-media img{transform:scale(1.05);}
/* Portadas de libro (retrato) dentro de una tarjeta panorámica: si se recortan con
   object-fit:cover se pierde casi todo el diseño de la portada. Se muestran enteras,
   centradas sobre el fondo oscuro de la tarjeta, en vez de recortadas. */
.project-card .pc-media.is-cover img{object-fit:contain;padding:14px 0;}
.project-card:hover .pc-media.is-cover img{transform:scale(1.03);}
.project-card .pc-body{padding:28px 30px 32px;display:flex;flex-direction:column;gap:12px;flex:1;}
.project-card .pc-tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);font-weight:700;}
.project-card h3{font-size:24px;}
.project-card p{color:var(--text-muted);font-size:15px;}
.project-card .pc-cta{margin-top:auto;font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;}
.project-card .pc-cta .arrow{transition:transform .25s ease;}
.project-card:hover .pc-cta .arrow{transform:translateX(4px);}
@media (max-width:760px){.projects-grid{grid-template-columns:1fr;}}

/* ============ Books grid (libros.html) ============ */
.books-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.book-card{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start;}
.book-cover{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.book-cover img{width:100%;height:auto;display:block;object-fit:contain;}
.book-info .bk-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);font-weight:700;margin-bottom:10px;display:block;}
.book-info h3{font-size:26px;margin-bottom:6px;}
.book-info .bk-sub{font-family:var(--ff-display);font-style:italic;color:var(--text-muted);font-size:16px;margin-bottom:16px;display:block;}
.book-info p{color:var(--ink-soft);font-size:15.5px;margin-bottom:14px;}
.book-formats{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0;}
.format-pill{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;color:var(--ink-soft);}
@media (max-width:760px){
  .books-grid{grid-template-columns:1fr;gap:48px;}
  .book-card{grid-template-columns:150px 1fr;gap:22px;}
}

/* ============ About / bio ============ */
.about-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;}
.about-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:sticky;top:110px;aspect-ratio:3/4;}
.about-media img{width:100%;height:100%;object-fit:cover;display:block;}
.about-copy p{color:var(--ink-soft);font-size:17px;margin-bottom:20px;}
.about-copy p:first-of-type{font-size:20px;font-family:var(--ff-display);color:var(--ink);}
.pull-quote{
  font-family:var(--ff-display);font-style:italic;font-size:26px;line-height:1.4;color:var(--ink);
  border-left:3px solid var(--gold);padding-left:24px;margin:34px 0;
}
@media (max-width:860px){
  .about-split{grid-template-columns:1fr;}
  .about-media{position:static;max-width:320px;}
}

/* ============ Timeline / hitos (opcional en sobre-mi) ============ */
.milestones{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px;}
.milestone{border-top:2px solid var(--gold);padding-top:16px;}
.milestone .m-year{font-size:13px;letter-spacing:.1em;color:var(--gold-dim);font-weight:700;text-transform:uppercase;}
.milestone h4{font-size:19px;margin:8px 0 8px;}
.milestone p{color:var(--text-muted);font-size:14.5px;}
@media (max-width:760px){.milestones{grid-template-columns:1fr;}}

/* ============ Contact ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.contact-list{display:flex;flex-direction:column;gap:22px;margin-top:28px;}
.contact-item{display:flex;flex-direction:column;gap:4px;padding-bottom:20px;border-bottom:1px solid var(--line);}
.contact-item .ci-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim);font-weight:700;}
.contact-item a,.contact-item span.ci-value{font-size:18px;font-family:var(--ff-display);}
.contact-item a:hover{color:var(--gold-dim);}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}

/* ============ Footer ============ */
.site-footer{background:var(--ink);color:var(--paper);padding:64px 0 28px;}
.footer-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid rgba(243,237,226,0.14);}
.footer-brand .fb-name{font-family:var(--ff-display);font-size:26px;margin-bottom:14px;}
.footer-brand p{color:rgba(243,237,226,0.6);font-size:14.5px;max-width:36ch;}
.footer-col h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:16px;font-weight:700;}
.footer-col a,.footer-col span{display:block;color:rgba(243,237,226,0.75);font-size:15px;padding:6px 0;transition:color .2s ease;}
.footer-col a:hover{color:var(--paper);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px;}
.footer-bottom p{color:rgba(243,237,226,0.45);font-size:13px;}
.footer-bottom a{color:rgba(243,237,226,0.55);}
.footer-bottom a:hover{color:var(--gold-bright);}
@media (max-width:760px){.footer-top{grid-template-columns:1fr;gap:32px;}}

/* ============ Reveal on scroll ============ */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal-group] > *{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
[data-reveal-group].is-visible > *{opacity:1;transform:translateY(0);}
[data-reveal-group].is-visible > *:nth-child(1){transition-delay:.05s;}
[data-reveal-group].is-visible > *:nth-child(2){transition-delay:.12s;}
[data-reveal-group].is-visible > *:nth-child(3){transition-delay:.19s;}
[data-reveal-group].is-visible > *:nth-child(4){transition-delay:.26s;}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-group] > *{opacity:1 !important;transform:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ============ Custom cursor (pointer:fine only) ============ */
.cursor-dot{
  position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--gold);
  pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:transform .12s ease,opacity .2s ease;
  mix-blend-mode:normal;
}
.cursor-ring{
  position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gold-dim);
  pointer-events:none;z-index:9997;transform:translate(-50%,-50%);transition:transform .18s ease,width .2s ease,height .2s ease,opacity .2s ease;
}
.cursor-ring.is-active{width:52px;height:52px;border-color:var(--gold-bright);}
@media (max-width:900px),(hover:none){
  .cursor-dot,.cursor-ring{display:none;}
}

/* ============ Utility ============ */
.text-center{text-align:center;}
.mt-lg{margin-top:56px;}
.divider{height:1px;background:var(--line);margin:60px 0;}