/* Kinstride: pergamino y tinta, como el mapa de la app. */
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fuentes/alegreya-sans-normal-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fuentes/alegreya-sans-normal-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IM Fell English';font-style:italic;font-weight:400;font-display:swap;src:url(/fuentes/im-fell-english-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IM Fell English';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/im-fell-english-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IM Fell English SC';font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/im-fell-english-sc-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--papel:#EBDDBC;--hoja:#F7EED8;--tinta:#2B1F12;--suave:#5A4630;--borde:#B49A6C;--acento:#8E2F17}
@media (prefers-color-scheme:dark){:root{--papel:#1A2130;--hoja:#1F2735;--tinta:#EDE6D6;--suave:#C9C1AE;--borde:#4A5770;--acento:#E9A23B;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font:500 17px/1.6 'Alegreya Sans',system-ui,sans-serif}
main{max-width:720px;margin:0 auto;padding:40px 20px 64px}
h1,h2,.marca{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;line-height:1.15}
h1{font-size:clamp(34px,6vw,52px);margin:8px 0 12px;text-wrap:balance}
h2{font-size:26px;margin:36px 0 8px;border-bottom:1px solid var(--borde);padding-bottom:4px}
.marca{font-size:18px;letter-spacing:3px;color:var(--acento);text-decoration:none}
.bajada{font-family:'IM Fell English',Georgia,serif;font-style:italic;font-size:21px;color:var(--suave)}
a{color:var(--acento)}
.resumen{background:var(--hoja);border:1px solid var(--borde);border-radius:14px;padding:14px 18px}
.pie{margin-top:48px;font-size:14px;color:var(--suave)}
ul{padding-left:22px}
li{margin:4px 0}
/* Página principal */
main.principal{max-width:none;padding:0}
.ancho{max-width:1040px;margin:0 auto;padding:12px 20px 24px}
.icono{display:block;width:72px;height:72px;border-radius:16px;margin-bottom:10px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 8px}
.boton{display:inline-block;background:var(--acento);color:#F7EED8;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:999px}
.boton.secundario{background:transparent;color:var(--acento);border:2px solid var(--acento);padding:10px 20px}
.aviso{font-size:15px;color:var(--suave);margin:0}
/* Portada: el mapa es el fondo y las hojas se abren encima */
.heroe{position:relative;overflow:hidden;background:#20281f url(/img/mapa.webp) 32% 58%/170% auto;color:#F7EED8}
.heroe::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,26,36,.92) 0,rgba(20,26,36,.74) 44%,rgba(20,26,36,.05) 100%)}
.heroe-dentro{position:relative;max-width:1120px;margin:0 auto;padding:56px 24px 64px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:center;min-height:620px}
.heroe h1{font-size:clamp(38px,5.6vw,66px);margin:8px 0 14px;color:#F7EED8}
.heroe .marca{color:#E9A23B}
.heroe .bajada,.heroe .aviso{color:#E6DCC7}
.heroe .boton{background:#E9A23B;color:#1A2130}
.heroe .boton.secundario{background:transparent;color:#F7EED8;border-color:#F7EED8}
.abanico{position:relative;height:520px}
.abanico img{position:absolute;top:0;left:50%;width:280px;height:auto;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.abanico img:nth-child(1){transform:translateX(-96%) rotate(-9deg) translateY(30px)}
.abanico img:nth-child(2){transform:translateX(-4%) rotate(8deg) translateY(30px)}
.abanico img:nth-child(3){transform:translateX(-50%)}
h3{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:24px;line-height:1.2;margin:0 0 4px}
section{max-width:720px}
section.amplia,section.como{max-width:none}
.intro{max-width:720px;font-size:19px}
/* Cómo funciona: tres paradas sobre un camino punteado, como en el mapa */
.camino{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:30px 0 0;margin:0;position:relative}
.camino::before{content:"";position:absolute;left:24px;right:24px;top:53px;border-top:3px dotted var(--acento)}
.camino li{counter-increment:p;margin:0;position:relative}
.camino li::before{content:counter(p);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--acento);color:#F7EED8;font:400 24px 'IM Fell English',Georgia,serif;margin-bottom:14px;position:relative}
.camino p{margin:0;color:var(--suave)}
.galeria{display:flex;gap:16px;overflow-x:auto;padding:18px 2px 10px;scroll-snap-type:x mandatory}
.galeria figure{margin:0;flex:0 0 min(230px,62vw);scroll-snap-align:start}
.galeria img{width:100%;height:auto;border-radius:22px;border:3px solid var(--borde);display:block}
.galeria figcaption{font-size:14px;color:var(--suave);text-align:center;margin-top:6px}
.razas{display:grid;grid-template-columns:repeat(9,1fr);gap:0;margin:22px 0 14px;background:#F6ECD3;border:1px solid var(--borde);border-radius:14px;padding:14px 8px;align-items:start}
.razas figure{margin:0;text-align:center;min-width:0}
.razas img{width:100%;height:auto;display:block}
.razas figcaption{font-size:13px;line-height:1.25;color:#5A4630;padding:6px 3px 0}
.razas b{display:block;font-family:'IM Fell English SC',Georgia,serif;font-weight:400;font-size:17px;color:#2B1F12}
.habilidades{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.habilidades li{margin:0;border:1px solid var(--borde);background:var(--hoja);border-radius:999px;padding:3px 14px;font-size:15px;color:var(--suave)}
.habilidades b{color:var(--tinta)}
.hojas{display:flex;gap:18px;overflow-x:auto;padding:22px 4px 14px;scroll-snap-type:x proximity}
.hojas figure{margin:0;flex:0 0 min(300px,76vw);scroll-snap-align:center}
.hojas img{width:100%;height:auto;display:block;border-radius:5px;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.centro{text-align:center}
.banda{max-width:none;margin-top:44px;background:linear-gradient(rgba(20,26,36,.72),rgba(20,26,36,.82)),url(/img/mapa.webp) 62% 40%/cover;color:#F7EED8}
.banda-dentro{max-width:1040px;margin:0 auto;padding:44px 20px}
.banda h2{margin-top:0;border-color:#B49A6C}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:22px 0}
.cifras b{display:block;font:400 clamp(30px,4.6vw,48px)/1.1 'IM Fell English',Georgia,serif;color:#E9A23B}
.cifras span{font-size:15px;color:#E6DCC7}
.tabla{overflow-x:auto;margin-top:14px}
table{border-collapse:collapse;width:100%;min-width:460px;background:var(--hoja);border:1px solid var(--borde);font-size:16px}
th,td{padding:9px 12px;border-bottom:1px solid var(--borde);text-align:left;vertical-align:top}
thead th{font:400 20px 'IM Fell English SC',Georgia,serif}
tbody th{font-weight:700}
.viene{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 28px;padding-left:22px;max-width:760px}
.tester{margin-top:36px;max-width:720px}
.tester h2{margin-top:0}
.tester ol{padding-left:22px}
.tester li{margin:8px 0}
.nota{font-size:14px;color:var(--suave)}
.legal{font-size:12px;margin-top:10px}
@media (max-width:860px){
.heroe-dentro{grid-template-columns:1fr;padding:36px 20px 28px;min-height:0}
.heroe{background-image:url(/img/mapa-1000.webp)}
.heroe::before{background:linear-gradient(rgba(20,26,36,.9),rgba(20,26,36,.72))}
.abanico{height:360px}
.abanico img{width:190px}
.camino{grid-template-columns:1fr;gap:20px}
.camino::before{left:23px;right:auto;top:20px;bottom:20px;border-top:0;border-left:3px dotted var(--acento)}
.camino li{padding-left:64px}
.camino li::before{position:absolute;left:0;top:0}
.razas{grid-template-columns:repeat(3,1fr);row-gap:12px}
.cifras{grid-template-columns:repeat(2,1fr)}
.viene{grid-template-columns:1fr}
}

.historias-dentro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:26px;align-items:start;margin-top:14px}
.historias-dentro>img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.rutas-lista{display:grid;gap:18px}
.rutas-lista h3{margin:0}
.rutas-lista p{margin:4px 0 0}
.rutas-lista .dato{color:var(--suave);font-weight:700;font-size:15px}
.crecer{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 30px;padding:0;margin:14px 0 0;list-style:none;max-width:860px}
.crecer b{display:block}
@media (max-width:760px){.historias-dentro,.crecer{grid-template-columns:1fr}}
.cifras{grid-template-columns:repeat(5,1fr)}
@media (max-width:760px){.cifras{grid-template-columns:repeat(2,1fr)}}
/* Test y páginas de linaje */
.barra{background:#1A2130;color:#F7EED8}
.barra-dentro{max-width:1040px;margin:0 auto;padding:14px 20px;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:space-between}
.barra .marca{color:#E9A23B}
.barra span{display:flex;flex-wrap:wrap;gap:6px 18px}
.barra span a{color:#F7EED8;text-decoration:none;font-weight:700}
.barra span a:hover{text-decoration:underline}
body.sub h1{margin-top:22px}
.intro{max-width:720px}
.test{margin-top:20px;background:var(--hoja);border:1px solid var(--borde);border-radius:14px;padding:22px;min-height:360px;display:block}
.test-fila{display:block;width:100%;max-width:900px;height:auto;margin:24px auto 0;border-radius:8px}
.test h2{border:0;margin:6px 0 14px;font-size:clamp(24px,4vw,32px);outline:none}
.test-avance{margin:0 0 6px;font-size:14px;color:var(--suave)}
.test-barra{height:6px;border-radius:3px;background:var(--papel);overflow:hidden}
.test-barra::before{content:"";display:block;height:100%;width:var(--avance);background:var(--acento)}
.test-opciones{display:grid;gap:10px}
button{font:inherit;cursor:pointer}
.boton{border:0}
.test-opcion{text-align:left;padding:13px 16px;border:1px solid var(--borde);border-radius:10px;background:var(--papel);color:var(--tinta)}
.test-opcion:hover,.test-opcion:focus-visible{border-color:var(--acento);outline:2px solid var(--acento)}
.test-atras{margin-top:14px;padding:6px 0;border:0;background:none;color:var(--acento);text-decoration:underline}
.test-resultado{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:24px;align-items:start}
.test-resultado img{width:100%;height:auto;border-radius:8px;background:#F6ECD3}
.test-resumen{font-size:19px;margin:0 0 12px}
.test-ranking{list-style:none;padding:0;margin:0 0 12px}
.test-ranking li{margin:6px 0;padding:4px 10px;border-radius:6px;background:linear-gradient(90deg,rgba(142,47,23,.25) var(--pct),transparent var(--pct));border:1px solid var(--borde)}
.linajes-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.linaje-fila{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:var(--hoja);border:1px solid var(--borde);border-radius:12px;padding:12px}
.linaje-fila img{width:100%;height:auto;display:block}
.linaje-fila h2{border:0;margin:0 0 2px;font-size:24px}
.linaje-fila h2 a{text-decoration:none}
.linaje-fila p{margin:0;font-size:15px;color:var(--suave)}
.linaje-pag{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:30px;align-items:start;margin-top:22px}
.linaje-pag>img{width:100%;height:auto;border-radius:10px;background:#F6ECD3;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.miga{margin:0;font-size:15px}
th em{font-weight:500;font-style:normal;color:var(--acento)}
.linajes-mini{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:14px}
.linaje{display:block;text-align:center;text-decoration:none;color:var(--tinta);min-width:0}
.linaje img{width:100%;height:auto;display:block;background:#F6ECD3;border-radius:6px}
.linaje b{display:block;font-size:15px;margin-top:4px}
.razas a{display:block;color:inherit;text-decoration:none}
@media (max-width:760px){
.test-resultado,.linaje-pag{grid-template-columns:1fr}
.test-resultado img,.linaje-pag>img{max-width:240px}
.linajes-lista{grid-template-columns:1fr}
.linajes-mini{grid-template-columns:repeat(4,1fr)}
}
.boton.secundario.claro{color:#F7EED8;border-color:#F7EED8}