@font-face{font-family:'Space Grotesk';src:url('fuentes/SpaceGrotesk-Medium.ttf');font-weight:500}
@font-face{font-family:'Space Grotesk';src:url('fuentes/SpaceGrotesk-Bold.ttf');font-weight:700}
@font-face{font-family:'DM Sans';src:url('fuentes/DMSans-Regular.ttf');font-weight:400}
@font-face{font-family:'DM Sans';src:url('fuentes/DMSans-SemiBold.ttf');font-weight:600}
@font-face{font-family:'DM Sans';src:url('fuentes/DMSans-Bold.ttf');font-weight:700}
@font-face{font-family:'DM Sans';src:url('fuentes/DMSans-Italic.ttf');font-weight:400;font-style:italic}
@font-face{font-family:'DM Sans';src:url('fuentes/DMSans-SemiBoldItalic.ttf');font-weight:600;font-style:italic}
@font-face{font-family:'DM Mono';src:url('fuentes/DMMono-Regular.ttf');font-weight:400}
@font-face{font-family:'DM Mono';src:url('fuentes/DMMono-Medium.ttf');font-weight:500}

:root{--mm:1mm;--ink:#28203B;--teal:#55C4BF;--coral:#EA6077;--sun:#F8CB67;--cream:#F7F2E8;--paper:#FFFDF8;--muted:#665F68;
  --sombra:1.6mm 1.6mm 0 rgba(40,32,59,.18);--sombra-dura:1.4mm 1.4mm 0 #28203B}

@page{size:A4;margin:20mm 17mm 17mm 17mm;background:#FFFDF8;
  @top-left{content:"Tazón para Dos · Historias";font:500 6.6pt 'DM Mono';letter-spacing:.12em;text-transform:uppercase;color:#28203B;
    vertical-align:bottom;padding-bottom:2.2mm;border-bottom:1.3pt solid #28203B}
  @top-center{content:"";border-bottom:1.3pt solid #28203B}
  @top-right{content:"La marea detenida";font:500 6.6pt 'DM Mono';letter-spacing:.12em;text-transform:uppercase;color:#665F68;
    vertical-align:bottom;text-align:right;padding-bottom:2.2mm;border-bottom:1.3pt solid #28203B}
  @top-right-corner{content:"";background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'> <path d='M0 0H100V100Z' fill='%23EA6077'/><path d='M46 0H100V54Z' fill='%23F8CB67'/></svg>") no-repeat;background-size:100% 100%}
  @bottom-center{content:"Mago: La Ascensión · historia alternativa";font:400 6.4pt 'DM Mono';letter-spacing:.12em;text-transform:uppercase;color:#665F68;vertical-align:middle}
}
@page :right{
  @bottom-right{content:counter(page);width:11mm;font:700 8.5pt 'Space Grotesk';color:#28203B;text-align:center;vertical-align:middle;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <path d='M50 6 88 28V72L50 94 12 72V28Z' fill='%23F8CB67' stroke='%2328203B' stroke-width='7' stroke-linejoin='round'/></svg>") center/10mm 10mm no-repeat}
  @bottom-left{content:"";width:11mm;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'> <path d='M0,-50 C6,-10 10,-6 50,0 C10,6 6,10 0,50 C-6,10 -10,6 -50,0 C-10,-6 -6,-10 0,-50 Z' fill='%23EA6077'/></svg>") left center/4mm 4mm no-repeat}
}
@page :left{
  @bottom-left{content:counter(page);width:11mm;font:700 8.5pt 'Space Grotesk';color:#28203B;text-align:center;vertical-align:middle;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <path d='M50 6 88 28V72L50 94 12 72V28Z' fill='%23F8CB67' stroke='%2328203B' stroke-width='7' stroke-linejoin='round'/></svg>") center/10mm 10mm no-repeat}
  @bottom-right{content:"";width:11mm;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'> <path d='M0,-50 C6,-10 10,-6 50,0 C10,6 6,10 0,50 C-6,10 -10,6 -50,0 C-10,-6 -6,-10 0,-50 Z' fill='%23EA6077'/></svg>") right center/4mm 4mm no-repeat}
}
@page portada { margin:0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} @bottom-left{content:none;background:none} @bottom-center{content:none} @bottom-right{content:none;background:none} }
@page portada:left { margin:0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} @bottom-left{content:none;background:none} @bottom-center{content:none} @bottom-right{content:none;background:none} }
@page portada:right { margin:0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} @bottom-left{content:none;background:none} @bottom-center{content:none} @bottom-right{content:none;background:none} }
@page sangre { margin:0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} @bottom-left{content:none;background:none} @bottom-center{content:none} @bottom-right{content:none;background:none} }
@page sangre:left { margin:0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} @bottom-left{content:none;background:none} @bottom-center{content:none} @bottom-right{content:none;background:none} }
@page sangre:right { margin:0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} @bottom-left{content:none;background:none} @bottom-center{content:none} @bottom-right{content:none;background:none} }
@page contraportada { margin:0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} @bottom-left{content:none;background:none} @bottom-center{content:none} @bottom-right{content:none;background:none} }
@page contraportada:left { margin:0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} @bottom-left{content:none;background:none} @bottom-center{content:none} @bottom-right{content:none;background:none} }
@page contraportada:right { margin:0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} @bottom-left{content:none;background:none} @bottom-center{content:none} @bottom-right{content:none;background:none} }
@page apertura { margin:0 0 17mm 0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} }
@page apertura:left { margin:0 0 17mm 0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} @bottom-left{width:28mm;background-origin:content-box;background-clip:content-box;padding-left:17mm} @bottom-right{width:28mm;padding-right:17mm;background-origin:content-box} }
@page apertura:right { margin:0 0 17mm 0; @top-left{content:none;border:0;background:none} @top-center{content:none;border:0} @top-right{content:none;border:0} @top-right-corner{content:none;background:none} @bottom-right{width:28mm;background-origin:content-box;background-clip:content-box;padding-right:17mm} @bottom-left{width:28mm;padding-left:17mm;background-origin:content-box} }

*{box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
html,body{margin:0;padding:0;background:#FFFDF8;color:#28203B}
body{font:400 9.4pt/1.5 'DM Sans',sans-serif;font-kerning:normal;orphans:2;widows:2}
p{margin:0 0 .55em;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
p+p{text-indent:1.1em}
a{color:#28203B;text-decoration-color:#55C4BF;text-decoration-thickness:1.2pt}
strong{font-weight:700} em{font-style:italic}
code{font:400 .9em 'DM Mono'}
ul,ol{margin:0 0 .7em;padding-left:1.2em} li{margin:.15em 0}
ul li::marker{content:"✦  ";color:#EA6077;font-size:.8em}

/* --- flujo y columnas ------------------------------------------------------------- */
.flujo{display:block}
.flujo:empty{display:none}
.nueva-pagina{break-before:page}
.cols-2{column-count:2;column-gap:7mm;column-rule:.6pt dotted rgba(40,32,59,.35);column-fill:balance}
.cols-3{column-count:3;column-gap:6mm;column-rule:.6pt dotted rgba(40,32,59,.35)}
.salto{break-after:page;height:0}
.cabeza-capitulo{break-after:avoid;break-inside:avoid}
.cabeza-capitulo header.capitulo{margin-bottom:5mm}

/* --- títulos ------------------------------------------------------------------------ */
header.capitulo{column-span:all;margin:0 0 6mm;padding-top:1mm;break-after:avoid}
header.capitulo .kicker{display:inline-block;font:500 7pt 'DM Mono';letter-spacing:.14em;text-transform:uppercase;
  background:#28203B;color:#F8CB67;padding:1.1mm 2.6mm;border-radius:999px;margin-bottom:2.5mm}
h1{font:700 25pt/1.02 'Space Grotesk';margin:0;letter-spacing:-.01em;text-shadow:.9mm .9mm 0 #55C4BF}
h2{font:700 12.5pt/1.15 'Space Grotesk';margin:1.1em 0 .5em;break-after:avoid;padding-bottom:1.2mm;
  background:linear-gradient(#EA6077,#EA6077) left bottom/14mm 1.4pt no-repeat}
h3{font:500 7.6pt 'DM Mono';letter-spacing:.12em;text-transform:uppercase;margin:1em 0 .4em;color:#28203B;break-after:avoid}
h4{font:700 9.6pt 'DM Sans';margin:.8em 0 .3em;break-after:avoid}
h2+p,h3+p,h4+p{text-indent:0}
p.capitular{text-indent:0}
p.capitular::first-letter{float:left;font:700 33pt/0.86 'Space Grotesk';color:#EA6077;text-shadow:.8mm .8mm 0 #28203B;
  padding:.6mm 1.6mm 0 0;margin-top:.4mm}

/* --- ornamentos --------------------------------------------------------------------- */
.divisor{height:6.5mm;margin:4mm 0 5mm;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'> <path d='M0 20 L400 8 L400 13 L0 25Z' fill='%2355C4BF'/><path d='M0 15 L400 3 L400 7 L0 19Z' fill='%23F8CB67'/> <path d='M0 21.5 L400 9.5' stroke='%2328203B' stroke-width='1.6' fill='none'/></svg>") center/100% 100% no-repeat;position:relative;break-after:avoid}
.divisor::after{content:"";position:absolute;left:50%;top:50%;width:5mm;height:5mm;transform:translate(-50%,-62%);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'> <path d='M0,-50 C6,-10 10,-6 50,0 C10,6 6,10 0,50 C-6,10 -10,6 -50,0 C-10,-6 -6,-10 0,-50 Z' fill='%23EA6077'/></svg>") center/contain no-repeat}
.cols-2 .divisor,.cols-3 .divisor{column-span:all}

/* --- figuras -------------------------------------------------------------------------- */
figure{margin:2mm 0 4mm;break-inside:avoid}
figure img{display:block;width:100%;height:auto;border:1.6pt solid #28203B;border-radius:3mm;box-shadow:var(--sombra);background:#F7F2E8}
figure.recorte img{height:var(--alto,60mm);object-fit:cover}
figure.sin-marco img{border:0;box-shadow:none;border-radius:0;background:none}
figcaption{font:400 6.5pt/1.4 'DM Mono';letter-spacing:.08em;text-transform:uppercase;color:#665F68;margin-top:2.4mm;
  padding-left:4.4mm;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'> <path d='M0,-50 C6,-10 10,-6 50,0 C10,6 6,10 0,50 C-6,10 -10,6 -50,0 C-10,-6 -6,-10 0,-50 Z' fill='%23EA6077'/></svg>") left .2mm/2.8mm 2.8mm no-repeat}
figure.ancha{column-span:all;margin:3mm 0 5mm}
figure.flotante{width:44%;margin:1mm 0 3mm}
figure.flotante.derecha{float:right;margin-left:4mm}
figure.flotante.izquierda{float:left;margin-right:4mm}

/* --- recuadros, epígrafes y citas ----------------------------------------------------- */
aside.recuadro{background:#F7F2E8;background-image:radial-gradient(rgba(40,32,59,.10) 1.6px, transparent 1.7px) 0 0 / 22px 22px;border:1.6pt solid #28203B;border-radius:4mm;padding:4.5mm 4.5mm 3mm;
  margin:4mm 0 5mm;box-shadow:var(--sombra);break-inside:avoid;font-size:8.6pt;line-height:1.45;position:relative}
aside.recuadro.ancho{column-span:all}
aside.recuadro p{text-align:left;text-indent:0;hyphens:manual}
aside.recuadro .etiqueta{display:inline-block;font:500 7pt 'DM Mono';letter-spacing:.13em;text-transform:uppercase;
  padding:1.1mm 2.6mm;border:1.3pt solid #28203B;border-radius:999px;margin:-1mm 0 2.6mm;background:#55C4BF;box-shadow:.8mm .8mm 0 #28203B}
aside.c-coral .etiqueta{background:#EA6077} aside.c-sol .etiqueta{background:#F8CB67}
aside.c-tinta{background-color:#28203B;background-image:radial-gradient(rgba(247,242,232,.09) 1.6px, transparent 1.7px) 0 0 / 22px 22px;color:#F7F2E8}
aside.c-tinta .etiqueta{background:#F8CB67;color:#28203B;border-color:#F8CB67}
aside.recuadro h2,aside.recuadro h3{margin-top:.4em}
aside.recuadro ul{padding-left:1.1em}
.epigrafe{column-span:all;margin:0 0 6mm;padding:1mm 0 1mm 9mm;position:relative;max-width:150mm}
.cols-2 .epigrafe{column-span:none;max-width:none}
.epigrafe::before{content:"“";position:absolute;left:0;top:-3mm;font:700 30pt 'Space Grotesk';color:#EA6077}
.epigrafe p{font-style:italic;font-size:10.2pt;line-height:1.45;text-align:left;text-indent:0}
.epigrafe .autor{font:500 6.8pt 'DM Mono';letter-spacing:.12em;text-transform:uppercase;color:#665F68;margin-top:1.5mm}
.epigrafe .autor::before{content:"— "}
blockquote{margin:0 0 .8em;padding-left:4mm;border-left:2pt solid #F8CB67}
blockquote.destacada{border:0;padding:5mm 1mm 4mm;margin:4mm 0 5mm;break-inside:avoid;position:relative;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'> <path d='M0 20 L400 8 L400 13 L0 25Z' fill='%2355C4BF'/><path d='M0 15 L400 3 L400 7 L0 19Z' fill='%23F8CB67'/> <path d='M0 21.5 L400 9.5' stroke='%2328203B' stroke-width='1.6' fill='none'/></svg>") top/100% 4.5mm no-repeat,url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'> <path d='M0 20 L400 8 L400 13 L0 25Z' fill='%2355C4BF'/><path d='M0 15 L400 3 L400 7 L0 19Z' fill='%23F8CB67'/> <path d='M0 21.5 L400 9.5' stroke='%2328203B' stroke-width='1.6' fill='none'/></svg>") bottom/100% 4.5mm no-repeat}
blockquote.destacada.ancho{column-span:all;padding:6mm 12mm 5mm}
blockquote.destacada p{font:500 13pt/1.25 'Space Grotesk';text-align:left;text-indent:0;margin:.8mm 0}
blockquote.destacada p:last-child{margin-bottom:0}

/* --- leyendas: versión popular frente a versión del Mundo de Tinieblas ------------------ */
aside.leyenda{border:1.6pt solid #28203B;border-radius:4mm;box-shadow:var(--sombra);margin:4mm 0 6mm;break-inside:avoid;
  overflow:hidden;font-size:8.5pt;line-height:1.45;background:#F7F2E8}
aside.leyenda.ancho{column-span:all}
aside.leyenda .cabeza{display:flex;align-items:center;gap:3mm;padding:2.6mm 4.5mm;border-bottom:1.6pt solid #28203B;
  background:#F8CB67;background-image:radial-gradient(rgba(40,32,59,.10) 1.6px, transparent 1.7px) 0 0 / 22px 22px}
aside.leyenda.c-turquesa .cabeza{background-color:#55C4BF} aside.leyenda.c-coral .cabeza{background-color:#EA6077}
aside.leyenda .cabeza .etiqueta{font:500 6.6pt 'DM Mono';letter-spacing:.14em;text-transform:uppercase;background:#28203B;color:#F8CB67;
  padding:1mm 2.6mm;border-radius:999px;white-space:nowrap}
aside.leyenda .cabeza b{font:700 12.5pt/1.1 'Space Grotesk'}
aside.leyenda .paneles{display:grid;grid-template-columns:1fr 1fr}
aside.leyenda:not(.ancho) .paneles{grid-template-columns:1fr}
aside.leyenda .panel{padding:3.6mm 4.5mm 2.4mm}
aside.leyenda .panel.popular{background:#F7F2E8;background-image:radial-gradient(rgba(40,32,59,.10) 1.6px, transparent 1.7px) 0 0 / 22px 22px}
aside.leyenda .panel.tinieblas{background:#28203B;background-image:radial-gradient(rgba(247,242,232,.09) 1.6px, transparent 1.7px) 0 0 / 22px 22px;color:#F7F2E8}
aside.leyenda .rotulo{font:500 6.6pt 'DM Mono';letter-spacing:.13em;text-transform:uppercase;margin-bottom:2mm;color:#EA6077}
aside.leyenda .tinieblas .rotulo{color:#F8CB67}
aside.leyenda p{text-align:left;text-indent:0;hyphens:manual;margin-bottom:.5em}
aside.leyenda .tinieblas strong{color:#F8CB67}

/* --- páginas especiales --------------------------------------------------------------- */
.triangulo{position:absolute;top:0;right:0;width:calc(24*var(--mm));height:calc(24*var(--mm));background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'> <path d='M0 0H100V100Z' fill='%23EA6077'/><path d='M46 0H100V54Z' fill='%23F8CB67'/></svg>") center/100% 100% no-repeat;z-index:3}
.triangulo.grande{width:calc(38*var(--mm));height:calc(38*var(--mm))}
section.sangre{page:sangre;break-before:page;break-after:page;position:relative;width:calc(210*var(--mm));height:calc(297*var(--mm));overflow:hidden}
section.sangre img{position:absolute;inset:0;width:100%;height:100%}
section.sangre .portadilla{position:absolute;left:calc(16*var(--mm));top:calc(18*var(--mm));right:calc(30*var(--mm));z-index:3}
section.sangre .portadilla .kicker{display:inline-block;font:500 calc(2.8*var(--mm)) 'DM Mono';letter-spacing:.14em;text-transform:uppercase;
  background:#28203B;color:#F8CB67;padding:calc(1.4*var(--mm)) calc(3.4*var(--mm));border-radius:999px;border:calc(.5*var(--mm)) solid #F7F2E8}
section.sangre .portadilla h1{font:700 calc(17*var(--mm))/.95 'Space Grotesk';color:#F7F2E8;text-shadow:calc(2*var(--mm)) calc(2*var(--mm)) 0 #28203B;
  margin:calc(3*var(--mm)) 0 0;letter-spacing:-.015em}
section.sangre figcaption{position:absolute;left:calc(14*var(--mm));bottom:calc(14*var(--mm));max-width:calc(150*var(--mm));background:#F7F2E8;color:#28203B;
  border:calc(0.564*var(--mm)) solid #28203B;border-radius:999px;padding:calc(2*var(--mm)) calc(4*var(--mm)) calc(2*var(--mm)) calc(9*var(--mm));box-shadow:var(--sombra-dura);background-position:calc(3.5*var(--mm)) center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'> <path d='M0,-50 C6,-10 10,-6 50,0 C10,6 6,10 0,50 C-6,10 -10,6 -50,0 C-10,-6 -6,-10 0,-50 Z' fill='%23EA6077'/></svg>");background-size:calc(3.4*var(--mm));background-repeat:no-repeat;font-size:calc(2.470*var(--mm));margin:0}
section.apertura{page:apertura;break-before:page;break-after:page}
section.apertura .banner{position:relative;width:100%;height:calc(var(--alto-banner,88)*var(--mm));overflow:hidden;background:#28203B}
section.apertura .banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
section.apertura .corte{position:absolute;left:0;right:0;bottom:calc(-.2*var(--mm));height:calc(15*var(--mm));background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'> <path d='M0 26 L400 6 L400 13 L0 33Z' fill='%23F8CB67'/><path d='M0 33 L400 13 L400 40 L0 40Z' fill='%23FFFDF8'/> <path d='M0 26 L400 6' stroke='%2328203B' stroke-width='2.4' fill='none'/><path d='M0 33 L400 13' stroke='%2328203B' stroke-width='2.4' fill='none'/></svg>") center/100% 100% no-repeat;z-index:2}
section.apertura .pie-banner{position:absolute;right:calc(17*var(--mm));bottom:calc(15*var(--mm));z-index:3;font:400 calc(2.258*var(--mm)) 'DM Mono';letter-spacing:.1em;text-transform:uppercase;
  background:#F7F2E8;border:calc(0.459*var(--mm)) solid #28203B;border-radius:999px;padding:calc(1*var(--mm)) calc(3*var(--mm))}
section.apertura .interior{padding:calc(3*var(--mm)) calc(17*var(--mm)) 0}
section.apertura header.capitulo{margin-top:0}

/* portada */
section.portada{page:portada;break-after:page;position:relative;width:calc(210*var(--mm));height:calc(297*var(--mm));overflow:hidden;background-size:100% 100%;color:#28203B}
section.portada .puntos{position:absolute;inset:0;background:radial-gradient(rgba(40,32,59,.10) 1.6px, transparent 1.7px) 0 0 / 22px 22px;z-index:0}
section.portada .marca{position:absolute;left:calc(16*var(--mm));top:calc(15*var(--mm));display:flex;align-items:center;gap:calc(3.2*var(--mm));z-index:2}
section.portada .marca img{width:calc(15*var(--mm));height:calc(15*var(--mm))}
section.portada .marca b{display:block;font:700 calc(4.586*var(--mm)) 'Space Grotesk';letter-spacing:.02em}
section.portada .marca span{display:block;font:500 calc(2.328*var(--mm)) 'DM Mono';letter-spacing:.14em}
.etiqueta-portada{position:absolute;left:calc(16*var(--mm));top:calc(44*var(--mm));z-index:2;font:500 calc(2.681*var(--mm)) 'DM Mono';letter-spacing:.14em;text-transform:uppercase;
  background:#28203B;color:#F8CB67;padding:calc(1.6*var(--mm)) calc(3.6*var(--mm));border-radius:999px}
.titulo-portada{position:absolute;left:calc(16*var(--mm));right:calc(16*var(--mm));top:calc(56*var(--mm));z-index:2;font:700 calc(17.640*var(--mm))/.95 'Space Grotesk';color:#F7F2E8;
  letter-spacing:-.015em;text-shadow:calc(2.2*var(--mm)) calc(2.2*var(--mm)) 0 #28203B;margin:0}
.subtitulo-portada{position:absolute;left:calc(16*var(--mm));width:calc(120*var(--mm));top:var(--sub,calc(86*var(--mm)));z-index:2;font:500 calc(4.234*var(--mm))/1.3 'Space Grotesk';
  text-align:left;text-indent:0;background:#FFFDF8;border:calc(0.564*var(--mm)) solid #28203B;border-radius:calc(3*var(--mm));padding:calc(2.5*var(--mm)) calc(4*var(--mm));box-shadow:var(--sombra-dura)}
section.portada .heroe{position:absolute;left:0;bottom:var(--heroe-abajo,calc(26*var(--mm)));width:calc(210*var(--mm));z-index:1}
section.portada .creditos{position:absolute;left:calc(16*var(--mm));right:calc(16*var(--mm));bottom:calc(15*var(--mm));z-index:2;display:flex;justify-content:space-between;
  font:500 calc(2.611*var(--mm)) 'DM Mono';letter-spacing:.12em;text-transform:uppercase;color:#28203B}
section.portada .creditos span{background:#F7F2E8;border:calc(0.459*var(--mm)) solid #28203B;border-radius:999px;padding:calc(1.4*var(--mm)) calc(3.2*var(--mm))}

/* contraportada */
section.contraportada{page:contraportada;break-before:page;position:relative;width:calc(210*var(--mm));height:calc(297*var(--mm));overflow:hidden;
  background:#28203B;background-image:radial-gradient(rgba(247,242,232,.09) 1.6px, transparent 1.7px) 0 0 / 22px 22px;color:#F7F2E8}
section.contraportada .d20{position:absolute;right:calc(20*var(--mm));top:calc(26*var(--mm));width:calc(52*var(--mm));transform:rotate(8deg)}
section.contraportada .texto{position:absolute;left:calc(20*var(--mm));width:calc(118*var(--mm));top:calc(90*var(--mm))}
section.contraportada .texto p{font:400 calc(3.881*var(--mm))/1.55 'DM Sans';text-align:left;text-indent:0;margin-bottom:.9em}
section.contraportada .texto p:first-child{font:700 calc(5.998*var(--mm))/1.2 'Space Grotesk';color:#F8CB67}
section.contraportada .creditos-final{position:absolute;left:calc(20*var(--mm));right:calc(20*var(--mm));bottom:calc(48*var(--mm));font:400 calc(2.540*var(--mm))/1.5 'DM Mono';
  letter-spacing:.04em;color:#F7F2E8;opacity:.85}
section.contraportada .cierre{position:absolute;left:calc(20*var(--mm));right:calc(20*var(--mm));bottom:calc(22*var(--mm));display:flex;justify-content:space-between;align-items:center;
  border-top:calc(0.459*var(--mm)) solid #F7F2E8;padding-top:calc(6*var(--mm))}
section.contraportada .cierre img{height:calc(16*var(--mm))}
section.contraportada .cierre span{font:500 calc(2.611*var(--mm)) 'DM Mono';letter-spacing:.14em;color:#F8CB67}

/* ======================= versión web (pantalla) ======================= */
.barra,nav.indice,.volver{display:none}
@media screen{
  :root{--mm:calc(100cqw/210)}
  html{background:#F7F2E8;background-image:radial-gradient(rgba(40,32,59,.10) 1.6px, transparent 1.7px) 0 0 / 22px 22px;scroll-behavior:smooth;scroll-padding-top:64px}
  body.web{font-size:16.5px;line-height:1.62;background:transparent}
  .barra{display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20;background:#28203B;color:#F7F2E8;
    padding:8px 20px;border-bottom:3px solid #F8CB67;font:500 12px 'DM Mono';letter-spacing:.12em;text-transform:uppercase}
  .barra a{color:#F7F2E8;text-decoration:none;display:flex;align-items:center;gap:10px}
  .barra img{width:30px;height:30px} .barra b{font:700 15px 'Space Grotesk';letter-spacing:.02em}
  .barra span{flex:1;color:#F8CB67;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .barra .btn{background:#F8CB67;color:#28203B;border:2px solid #F7F2E8;border-radius:999px;padding:4px 14px}
  main.libro{max-width:1080px;margin:28px auto 80px;padding:0 0 40px;background:#FFFDF8;border:2px solid #28203B;
    border-radius:22px;box-shadow:10px 10px 0 rgba(40,32,59,.18);overflow:hidden}
  main.libro>section.flujo{padding:28px 56px 8px}
  main.libro>section.cabeza-capitulo{padding-bottom:0}
  main.libro>section.cabeza-capitulo+section.flujo{padding-top:0}
  section.portada,section.sangre,section.contraportada{width:100%;height:auto;aspect-ratio:210/297;container-type:inline-size;margin:0 auto}
  section.portada{border-bottom:3px solid #28203B}
  section.sangre,section.contraportada{margin:28px 0}
  section.apertura{container-type:inline-size;margin:28px 0 0}
  section.apertura .interior{padding:12px 56px 0}
  nav.indice{display:block;margin:36px 56px 8px;padding:22px 26px;background:#F7F2E8;background-image:radial-gradient(rgba(40,32,59,.10) 1.6px, transparent 1.7px) 0 0 / 22px 22px;
    border:2px solid #28203B;border-radius:16px;box-shadow:6px 6px 0 rgba(40,32,59,.18)}
  nav.indice .etiqueta{display:inline-block;font:500 12px 'DM Mono';letter-spacing:.14em;text-transform:uppercase;background:#28203B;
    color:#F8CB67;padding:4px 12px;border-radius:999px;margin-bottom:12px}
  nav.indice ol{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
  nav.indice li{break-inside:avoid;margin:0 0 6px}
  nav.indice li.parte{margin-top:12px}
  nav.indice a{display:flex;gap:10px;align-items:baseline;color:#28203B;text-decoration:none;padding:3px 0;border-bottom:1px dotted rgba(40,32,59,.3)}
  nav.indice a:hover .t{text-decoration:underline;text-decoration-color:#EA6077}
  nav.indice .k{font:500 11px 'DM Mono';letter-spacing:.1em;text-transform:uppercase;color:#665F68;min-width:92px}
  nav.indice li.parte .k{color:#EA6077} nav.indice li.parte .t{font:700 18px 'Space Grotesk'}
  nav.indice .t{font:500 15px 'Space Grotesk'}
  .volver{display:flex;position:fixed;right:18px;bottom:18px;width:46px;height:46px;align-items:center;justify-content:center;
    background:#F8CB67;color:#28203B;border:2px solid #28203B;border-radius:50%;box-shadow:3px 3px 0 #28203B;font:700 20px 'Space Grotesk';text-decoration:none;z-index:30}
  .salto{display:none}
  h1{font-size:clamp(28px,4.4vw,40px)} h2{font-size:22px} h3{font-size:12px}
  figcaption{font-size:11px}
  aside.recuadro,aside.leyenda{font-size:15px}
  aside.leyenda .cabeza b{font-size:20px}
  aside.leyenda .rotulo,aside.leyenda .cabeza .etiqueta,aside.recuadro .etiqueta,header.capitulo .kicker{font-size:11px}
  blockquote.destacada p{font-size:21px} .epigrafe p{font-size:17px} .epigrafe .autor{font-size:11px}
}
@media screen and (max-width:860px){
  .cols-2,.cols-3{column-count:1}
  main.libro{margin:0;border-radius:0;border-left:0;border-right:0}
  main.libro>section.flujo,section.apertura .interior{padding-left:20px;padding-right:20px}
  nav.indice{margin:24px 16px} nav.indice ol{columns:1}
  figure.flotante{float:none!important;width:100%!important;margin:14px 0!important}
  aside.leyenda .paneles{grid-template-columns:1fr}
  body.web{font-size:16px}
}
@media print{.barra,nav.indice,.volver{display:none!important}}