/* ==========================================================================
   MARTÍN VUELVE — edición digital
   Blanco dominante · amarillo #FFDD00 de acento · negro secundario
   ========================================================================== */

:root{
  --amarillo:#FFDD00;
  --amarillo-claro:#FFF4B8;
  --amarillo-tenue:#FFFCEC;
  --negro:#12120F;
  --tinta:#1e1e1a;
  --tinta-2:#4a4a44;
  --gris:#8e8e86;
  --linea:rgba(18,18,15,.12);
  --linea-suave:rgba(18,18,15,.07);
  --papel:#ffffff;

  --display:"Archivo Black","Arial Black",sans-serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --gala:"Playfair Display",Georgia,serif;

  --radio:4px;
  --sombra-foto:0 1px 2px rgba(18,18,15,.06), 0 6px 18px rgba(18,18,15,.07);

  --pw:560px;
  --ph:790px;
  --escala:1;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(120% 90% at 50% -10%, #ffffff 0%, #f6f6f2 45%, #ecece5 100%);
  font-family:var(--serif);
  color:var(--tinta);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Escena y libro ------------------------------------------------ */

.escena{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  touch-action:pan-y;
}

.libro{
  position:relative;
  flex:0 0 auto;
  width:calc(var(--pw) * 2);
  height:var(--ph);
  perspective:2800px;
  transform:scale(var(--escala));
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.25,.8,.3,1);
  filter:
    drop-shadow(0 2px 4px rgba(18,18,15,.10))
    drop-shadow(0 18px 34px rgba(18,18,15,.14))
    drop-shadow(0 40px 70px rgba(18,18,15,.10));
  animation:entrada .7s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes entrada{
  from{ opacity:0; transform:scale(calc(var(--escala) * .97)) translateY(10px); }
  to  { opacity:1; }
}
.libro.una-pagina{ width:var(--pw); }
.libro.en-portada{ transform:scale(var(--escala)) translateX(-25%); }
.libro.en-final{   transform:scale(var(--escala)) translateX(25%); }
.libro.una-pagina.en-portada,
.libro.una-pagina.en-final{ transform:scale(var(--escala)); }

.libro::after{
  content:"";
  position:absolute; left:3%; right:3%; bottom:-18px; height:28px;
  background:radial-gradient(ellipse at 50% 0%, rgba(18,18,15,.22), rgba(18,18,15,0) 70%);
  z-index:0; pointer-events:none;
}

/* ---------- Hojas --------------------------------------------------------- */

.hoja{
  position:absolute; top:0; left:50%;
  width:var(--pw); height:100%;
  transform-style:preserve-3d;
  transform-origin:left center;
  will-change:transform;
  --sombra:0;
}
.libro.una-pagina .hoja{ left:0; }

.cara{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden;
  background:var(--papel);
  transform-style:preserve-3d;
}
.cara.dorso{ transform:rotateY(180deg); }

.cara > .velo{
  position:absolute; inset:0; z-index:60; pointer-events:none;
  opacity:var(--sombra);
  transition:opacity 60ms linear;
}
.cara.frente > .velo{
  background:linear-gradient(to left, rgba(10,10,8,.58), rgba(10,10,8,.12) 44%, rgba(10,10,8,0) 80%);
}
.cara.dorso > .velo{
  background:linear-gradient(to right, rgba(10,10,8,.52), rgba(10,10,8,.10) 48%, rgba(10,10,8,0) 82%);
}

/* Curvatura junto al lomo */
.cara::before{
  content:""; position:absolute; top:0; bottom:0; width:46px;
  z-index:50; pointer-events:none;
}
.cara.frente::before{
  left:0;
  background:linear-gradient(to right, rgba(18,18,15,.14), rgba(18,18,15,.03) 45%, rgba(18,18,15,0));
}
.cara.dorso::before{
  right:0;
  background:linear-gradient(to left, rgba(18,18,15,.14), rgba(18,18,15,.03) 45%, rgba(18,18,15,0));
}
.libro.una-pagina .cara::before{ display:none; }

/* ---------- Zonas de arrastre --------------------------------------------- */

.zona{
  position:absolute; top:0; bottom:0; width:11%;
  z-index:900; cursor:pointer; touch-action:none;
}
.zona-der{ right:0; }
.zona-izq{ left:0; }
.libro.una-pagina .zona{ width:15%; }
.zona.oculta{ display:none; }

.zona::after{
  content:""; position:absolute; bottom:0; width:62px; height:62px;
  opacity:0; transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
  transform:translateY(8px); pointer-events:none;
}
.zona-der::after{
  right:0;
  background:linear-gradient(225deg, rgba(18,18,15,.20) 0%, rgba(18,18,15,.05) 40%, rgba(18,18,15,0) 58%);
  box-shadow:inset -3px -3px 0 0 var(--amarillo);
}
.zona-izq::after{
  left:0;
  background:linear-gradient(135deg, rgba(18,18,15,.20) 0%, rgba(18,18,15,.05) 40%, rgba(18,18,15,0) 58%);
  box-shadow:inset 3px -3px 0 0 var(--amarillo);
}
.zona:hover::after{ opacity:1; transform:translateY(0); }

/* ---------- Controles ------------------------------------------------------ */

.flecha{
  position:fixed; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border:0; border-radius:50%;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--negro);
  display:grid; place-items:center; cursor:pointer; z-index:1000;
  box-shadow:0 1px 2px rgba(18,18,15,.10), 0 8px 22px rgba(18,18,15,.14);
  opacity:.55;
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.8,.3,1), background .25s ease;
}
.flecha:hover{ opacity:1; background:var(--amarillo); transform:translateY(-50%) scale(1.07); }
.flecha:active{ transform:translateY(-50%) scale(.96); }
.flecha svg{ width:17px; height:17px; }
.flecha.izq{ left:18px; }
.flecha.der{ right:18px; }
.flecha[disabled]{ opacity:.12; cursor:default; }
.flecha[disabled]:hover{ background:rgba(255,255,255,.82); transform:translateY(-50%); }

.folio-flotante{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
  font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.1em;
  color:var(--gris); z-index:1000; user-select:none;
}
.folio-flotante b{ color:var(--negro); font-weight:600; }

.pista{
  position:fixed; left:50%; bottom:44px; transform:translateX(-50%);
  font-family:var(--sans); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--negro);
  background:var(--amarillo); padding:7px 16px; border-radius:100px;
  box-shadow:0 6px 20px rgba(18,18,15,.16);
  z-index:1000; pointer-events:none;
  transition:opacity .8s ease, transform .8s ease;
}
.pista.fuera{ opacity:0; transform:translateX(-50%) translateY(6px); }

/* ==========================================================================
   PÁGINA
   ========================================================================== */

.pagina{
  position:absolute; inset:0;
  background:var(--papel);
  padding:22px 30px 20px;
  display:flex; flex-direction:column;
  overflow:hidden;
  font-size:11.2px; line-height:1.5;
}
.pagina.vacia{ background:#fbfbf8; }
.contenido{ flex:1 1 auto; min-height:0; overflow:hidden; }

/* Cornisa */
.cornisa{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:7px; margin-bottom:13px;
  border-bottom:1px solid var(--linea);
  font-family:var(--sans); font-size:9px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2);
}
.cornisa .seccion{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--negro);
}
.cornisa .seccion::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--amarillo); flex:0 0 auto;
}
.cornisa .marca{ display:flex; align-items:center; gap:7px; color:var(--gris); }
.cornisa .marca img{ width:15px; height:15px; display:block; border-radius:2px; }

/* Pie */
.pie{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px; margin-top:12px;
  border-top:1px solid var(--linea-suave);
  font-family:var(--sans); font-size:8.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gris);
}
.pie .num{
  font-family:var(--display); font-size:13px; letter-spacing:0;
  color:var(--negro); line-height:1;
  padding-bottom:3px; border-bottom:3px solid var(--amarillo);
}

/* ---------- Tipografía base ------------------------------------------------ */

.pagina p{ margin:0 0 .6em; text-align:justify; hyphens:auto; }
.pagina p:last-child{ margin-bottom:0; }

/* ---------- Huecos de imagen ---------------------------------------------- */

figure.foto{ margin:0; }
figure.foto .marco{
  position:relative; width:100%;
  aspect-ratio:var(--ar, auto);
  overflow:hidden;
  border-radius:var(--radio);
  background:var(--amarillo-tenue);
  box-shadow:var(--sombra-foto);
  display:grid; place-items:center;
}
figure.foto .marco::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:var(--radio);
  box-shadow:inset 0 0 0 1px rgba(18,18,15,.09);
}
figure.foto .marco img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
figure.foto .marco img.sin-imagen{ display:none; }

/* Marcador mientras no hay foto */
figure.foto:not(.con-imagen) .marco{
  background:
    repeating-linear-gradient(135deg,
      var(--amarillo-tenue) 0 12px, var(--amarillo-claro) 12px 24px);
  box-shadow:none;
}
figure.foto:not(.con-imagen) .marco::after{
  box-shadow:inset 0 0 0 1.5px rgba(18,18,15,.22);
  border-radius:var(--radio);
}
figure.foto.con-imagen .etiqueta-hueco{ display:none; }

.etiqueta-hueco{
  position:relative; z-index:2; text-align:center; padding:8px 12px;
  font-family:var(--sans); color:var(--tinta);
}
.etiqueta-hueco .icono{ display:block; margin:0 auto 6px; width:24px; height:24px; opacity:.5; }
.etiqueta-hueco .tit{
  display:block; font-size:9px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
}
.etiqueta-hueco .ruta{
  display:inline-block; margin-top:6px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:8px;
  background:var(--negro); color:var(--amarillo);
  padding:3px 7px; border-radius:100px;
}

figure.foto figcaption{
  margin-top:6px;
  font-family:var(--sans); font-size:8.6px; font-weight:500;
  line-height:1.45; letter-spacing:.02em; color:var(--tinta-2);
}
figure.foto figcaption b{
  color:var(--negro); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}

/* ==========================================================================
   PORTADA
   ========================================================================== */

.pagina.portada{ padding:0; }
.portada .lamina{ display:flex; flex-direction:column; height:100%; }
.portada p{ text-align:left; }

.cinta-superior{
  flex:0 0 auto;
  background:var(--negro); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:7px 22px;
  font-family:var(--sans); font-size:8.4px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
}
.cinta-superior .punto{ color:var(--amarillo); }
.cinta-superior .tenue{ color:rgba(255,255,255,.62); }

.cabezal{
  flex:0 0 auto;
  display:flex; align-items:center; gap:13px;
  padding:15px 30px 10px;
}
.cabezal .logo{
  width:48px; height:48px; flex:0 0 auto; display:block;
  border-radius:6px;
  box-shadow:0 2px 10px rgba(18,18,15,.16);
}
.lockup{ flex:1 1 auto; min-width:0; }
.lockup .linea-1,
.lockup .linea-2{
  display:block;
  font-family:var(--display);
  line-height:.9; letter-spacing:-.038em;
  text-transform:uppercase; color:var(--negro);
  white-space:nowrap;
}
.lockup .linea-1{ font-size:31px; color:var(--tinta-2); }
.lockup .linea-2{ font-size:37px; margin-top:3px; }
.lockup .marcado{
  background:linear-gradient(to top, var(--amarillo) 0 26%, transparent 26%);
  padding:0 3px 1px 0;
}

.lema{
  flex:0 0 auto;
  margin:0; padding:0 30px 13px;
  font-family:var(--gala); font-size:14.5px; line-height:1.32;
  color:var(--tinta-2); font-style:italic;
}
.lema b{ font-style:normal; font-weight:900; color:var(--negro); }

/* Hero a sangre */
.hero{
  flex:1 1 auto; min-height:0;
  position:relative; margin:0;
}
.hero .marco{
  position:absolute; inset:0;
  width:100%; height:100%;
  aspect-ratio:auto; border-radius:0; box-shadow:none;
}
.hero .marco img{ object-position:50% 22%; }
.hero .marco::after{
  border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(18,18,15,.10);
  background:linear-gradient(to top, rgba(10,10,8,.58) 0%, rgba(10,10,8,.12) 30%, rgba(10,10,8,0) 58%);
}
.hero .banda{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:center; gap:10px;
  padding:12px 30px 13px;
  color:#fff;
}
.hero .banda .marca-check{
  flex:0 0 auto;
  width:20px; height:20px; border-radius:50%;
  background:var(--amarillo); color:var(--negro);
  display:grid; place-items:center;
  font-size:11px; font-weight:700; font-family:var(--sans);
}
.hero .banda p{
  margin:0; text-align:left;
  font-family:var(--sans); font-weight:600;
  font-size:14px; line-height:1.2; letter-spacing:-.005em;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}

/* Cifras */
.cifras{
  flex:0 0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--linea);
  background:#fff;
}
.cifras div{
  padding:9px 8px 10px 30px;
  border-left:1px solid var(--linea-suave);
}
.cifras div:first-child{ border-left:0; }
.cifras div:not(:first-child){ padding-left:14px; }
.cifras b{
  display:block;
  font-family:var(--display); font-size:21px; line-height:1;
  letter-spacing:-.03em; color:var(--negro);
}
.cifras span{
  display:block; margin-top:5px;
  font-family:var(--sans); font-size:8px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-2);
}
.cifras div:first-child b{
  background:linear-gradient(to top, var(--amarillo) 0 30%, transparent 30%);
  display:inline-block; padding:0 3px;
}

/* Bloque biográfico */
.bio{ flex:0 0 auto; padding:12px 30px 16px; }
.bio h2{
  margin:0 0 9px;
  font-family:var(--sans); font-weight:600; font-size:11.4px;
  line-height:1.32; letter-spacing:.01em; color:var(--negro);
  max-width:96%;
}
.bio h2 .marcado{
  background:linear-gradient(to top, var(--amarillo) 0 40%, transparent 40%);
  padding:0 2px;
}
.bio-texto{ column-count:2; column-gap:20px; }
.bio-texto p{ font-size:9.6px; line-height:1.46; }

.bio-cierre{
  display:flex; align-items:center; gap:14px;
  margin:11px 0 0; padding-top:10px;
  border-top:1px solid var(--linea);
}
.bio-cierre figure.foto{ flex:0 0 96px; width:96px; }
.bio-cierre p{
  margin:0; text-align:left;
  font-family:var(--gala); font-style:italic; font-size:10.2px;
  line-height:1.42; color:var(--tinta-2);
}

/* ==========================================================================
   MÓDULO DE OBRA
   ========================================================================== */

.pagina-obras .contenido{ display:flex; flex-direction:column; gap:14px; }

.obra{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.pagina-obras .obra:not(:last-child){
  padding-bottom:14px; border-bottom:1px solid var(--linea);
}

.obra-cab{
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:9px;
}
.obra-num{
  flex:0 0 auto;
  font-family:var(--display); font-size:15px; line-height:1;
  color:var(--negro);
  background:var(--amarillo);
  padding:6px 8px 5px; border-radius:3px;
  letter-spacing:-.02em;
}
.obra-titulo{
  flex:1 1 auto; min-width:0; margin:0; padding-top:2px;
  font-family:var(--sans); font-weight:600;
  font-size:12.4px; line-height:1.26; letter-spacing:-.005em;
  color:var(--negro);
}

.obra figure.foto{ flex:0 0 auto; margin-bottom:10px; }
.obra figure.foto .marco{ aspect-ratio:var(--ar); max-height:var(--mh); }

.obra .texto-obra{
  flex:0 0 auto;
  column-count:2; column-gap:18px;
}
.obra .texto-obra p{ font-size:10.6px; line-height:1.52; }
.obra .subtit{
  font-family:var(--sans); font-size:9.4px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--negro);
}

/* Banner de cierre */
.banner-cierre{
  flex:0 0 auto;
  display:flex; align-items:center; gap:14px;
  padding:16px 0 0;
  border-top:2px solid var(--amarillo);
}
.banner-cierre img{
  width:40px; height:40px; flex:0 0 auto;
  border-radius:4px; display:block; opacity:.92;
}
.banner-cierre p{
  margin:0; text-align:left;
  font-family:var(--gala); font-style:italic; font-weight:700;
  font-size:17px; line-height:1.25; letter-spacing:-.005em;
  color:var(--tinta);
}
.banner-cierre p b{ color:var(--negro); font-weight:900; }

/* ==========================================================================
   CONTRAPORTADA
   ========================================================================== */

.pagina.contraportada{ background:var(--negro); color:#fff; }
/* El aire sobrante se reparte entre titular, foto y marcas */
.contraportada .contenido{ display:flex; flex-direction:column; justify-content:space-between; }
.contraportada .cornisa{
  border-bottom-color:rgba(255,255,255,.16); color:rgba(255,255,255,.58);
}
.contraportada .cornisa .seccion{ color:#fff; }
.contraportada .cornisa .marca{ color:rgba(255,255,255,.42); }
.contraportada .pie{
  border-top-color:rgba(255,255,255,.14); color:rgba(255,255,255,.38);
}
.contraportada .pie .num{ color:#fff; }

.titular-cierre{
  margin:4px 0 14px;
  font-family:var(--gala); font-weight:900; font-style:italic;
  font-size:29px; line-height:1.05; letter-spacing:-.015em;
  color:#fff; text-align:center;
}
.titular-cierre .marcado{ color:var(--amarillo); }

.contraportada figure.foto .marco{
  background:rgba(255,255,255,.05);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.contraportada figure.foto:not(.con-imagen) .marco{
  background:repeating-linear-gradient(135deg, #26261f 0 12px, #1c1c16 12px 24px);
  box-shadow:none;
}
.contraportada figure.foto .marco::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.contraportada figure.foto:not(.con-imagen) .marco::after{ box-shadow:inset 0 0 0 1.5px rgba(255,221,0,.5); }
.contraportada .etiqueta-hueco{ color:var(--amarillo); }
.contraportada .etiqueta-hueco .ruta{ background:var(--amarillo); color:var(--negro); }
.contraportada figcaption{ color:rgba(255,255,255,.55); }
.contraportada figcaption b{ color:var(--amarillo); }

.marcas{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:16px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);
}
.marcas figure{ margin:0; text-align:center; }
.marcas .rotulo{
  margin:0 0 8px; text-align:center;
  font-family:var(--sans); font-size:8.4px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.marcas img{
  width:100%; max-width:118px; height:auto; display:block; margin:0 auto;
  border-radius:5px;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}

@media (max-width:900px){
  .flecha{ width:40px; height:40px; }
  .flecha.izq{ left:8px; }
  .flecha.der{ right:8px; }
}