/* guia-kratom.es — «guía práctica»: fichas numeradas, papel blanco frío, tinta azul marino, pimentón y azafrán */
:root{
  --fondo:#f5f7fb; --hoja:#ffffff; --tinta:#14213d; --suave:#4c5872; --raya:#dbe1ec;
  --pimenton:#e8553e; --azafran:#f4b400; --azafran-claro:#fff4d1; --mar:#1d6fa5; --mar-claro:#e4f0f8;
  --alerta:#b3261e; --alerta-claro:#fdecea;
  --titular:"Avenir Next Condensed","DIN Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --texto:"Avenir Next",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --fondo:#0d1428; --hoja:#141d36; --tinta:#eef1f7; --suave:#a9b3c9; --raya:#29345a;
  --pimenton:#ff7a63; --azafran:#ffc933; --azafran-claro:#2b2a1c; --mar:#7cc0ee; --mar-claro:#13283c;
  --alerta:#ff8a80; --alerta-claro:#3a1a1a;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:1.0625rem/1.65 var(--texto);overflow-wrap:break-word}
a{color:var(--mar);text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,var(--mar) 35%,transparent)}
a:hover{text-decoration-color:var(--pimenton)}
img{max-width:100%;height:auto;display:block}
.saltar{position:absolute;left:-999px}.saltar:focus{left:.5rem;top:.5rem;background:var(--tinta);color:var(--fondo);padding:.5rem .8rem;z-index:9}
.envoltura{max-width:72rem;margin:0 auto;padding:0 1rem}

/* cabecera: franja superior de color + barra */
.franja{height:6px;background:linear-gradient(90deg,var(--pimenton) 0 60%,var(--azafran) 60% 85%,var(--mar) 85%)}
.cabecera{background:var(--hoja);border-bottom:1px solid var(--raya)}
.cabecera .envoltura{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;padding-top:.7rem;padding-bottom:.7rem}
.marca{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:var(--tinta)}
.marca img{width:40px;height:40px}
.marca span{font:800 1.45rem/1 var(--titular);text-transform:uppercase;letter-spacing:.02em}
.marca small{display:block;font:500 .72rem/1.2 var(--texto);letter-spacing:.04em;color:var(--suave);text-transform:none}
.menu{display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0;list-style:none;font:600 .9rem var(--texto)}
.menu a{display:block;padding:.35rem .7rem;border-radius:99px;text-decoration:none;color:var(--tinta)}
.menu a:hover{background:var(--mar-claro)}
.menu a.activo{box-shadow:inset 0 0 0 2px var(--tinta)}
.menu a[aria-current]{background:var(--tinta);color:var(--hoja)}

/* migas */
.migas{font-size:.85rem;color:var(--suave);margin:1.1rem 0 .4rem}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem}
.migas li+li::before{content:"›";margin:0 .35rem;color:var(--pimenton)}
.migas a{color:var(--suave)}

/* titulares */
h1,h2,h3{font-family:var(--titular);line-height:1.12;letter-spacing:.005em}
h1{font-size:clamp(2.1rem,6vw,3.4rem);font-weight:800;margin:.25rem 0 .6rem;text-wrap:balance}
h2{font-size:clamp(1.45rem,3.6vw,1.9rem);font-weight:700;margin:2.4rem 0 .7rem;padding-top:.9rem;border-top:3px solid var(--tinta);text-wrap:balance}
h3{font-size:1.28rem;font-weight:700;margin:1.7rem 0 .5rem}
.entrada{font-size:1.18rem;color:var(--suave);max-width:44rem;margin:0 0 1rem}
.sello{display:inline-flex;gap:.5rem;align-items:center;font:700 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.sello b{background:var(--pimenton);color:#fff;padding:.35rem .5rem;border-radius:4px}
.sello span{color:var(--suave)}

/* ficha: rejilla de dos columnas asimétrica (índice lateral) */
.ficha{display:grid;grid-template-columns:minmax(0,1fr);gap:0 3rem;margin-bottom:3rem}
@media (max-width:61.99rem){.ficha>header{order:1}.ficha>.lateral{order:2;background:var(--hoja);border-radius:12px;padding:.2rem 1rem .8rem}.ficha>div.cuerpo{order:3}.lateral .rel{display:none}}
@media (min-width:62rem){.ficha{grid-template-columns:15rem minmax(0,1fr)}.ficha>.lateral{grid-column:1;grid-row:1/span 2}.ficha>header,.ficha>div.cuerpo{grid-column:2}}
.lateral{font-size:.9rem}
@media (min-width:62rem){.lateral .pegado{position:sticky;top:1rem}}
.lateral h2{font:700 .78rem var(--mono);text-transform:uppercase;letter-spacing:.1em;border:0;margin:1.2rem 0 .4rem;padding:0;color:var(--suave)}
.lateral ol{margin:0;padding:0;list-style:none;counter-reset:p}
.lateral li{counter-increment:p;padding:.3rem 0;border-bottom:1px dashed var(--raya)}
.lateral li::before{content:counter(p,decimal-leading-zero)" ";font:700 .75rem var(--mono);color:var(--pimenton)}
.lateral a{color:var(--tinta);text-decoration:none}
.lateral a:hover{text-decoration:underline}
.cuerpo{max-width:44rem;min-width:0}
.cuerpo p,.cuerpo ul,.cuerpo ol{margin:0 0 1.05em}
.cuerpo li{margin:.3em 0}
.cuerpo li::marker{color:var(--pimenton);font-weight:700}
.foto{margin:1.2rem 0 1.6rem;border-radius:14px;overflow:hidden;background:var(--raya);aspect-ratio:1376/768}
.foto img{width:100%;height:100%;object-fit:cover}

/* cajas */
.corto{background:var(--azafran-claro);border:2px solid var(--azafran);border-radius:14px;padding:1rem 1.2rem;margin:1.2rem 0 1.6rem;position:relative}
.corto::before{content:"En 30 segundos";display:inline-block;font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;background:var(--azafran);color:#14213d;padding:.25rem .5rem;border-radius:4px;margin-bottom:.5rem}
.corto ul{margin:0;padding-left:1.1rem}
.corto p:last-child,.corto ul:last-child{margin-bottom:0}
.ojo{background:var(--alerta-claro);border-left:6px solid var(--alerta);border-radius:0 10px 10px 0;padding:.9rem 1.1rem;margin:1.4rem 0}
.ojo p:last-child{margin-bottom:0}
.nota{background:var(--mar-claro);border-radius:10px;padding:.9rem 1.1rem;margin:1.4rem 0;font-size:.97rem}
.nota p:last-child{margin-bottom:0}
.telefono{font:800 1.5rem/1.1 var(--titular);letter-spacing:.02em;white-space:nowrap}

/* tablas */
.tabla{overflow-x:auto;margin:1rem 0 1.4rem;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.94rem;background:var(--hoja)}
th,td{text-align:left;vertical-align:top;padding:.55rem .7rem;border-bottom:1px solid var(--raya)}
th{font:700 .8rem var(--mono);text-transform:uppercase;letter-spacing:.05em;background:var(--tinta);color:var(--hoja)}
tr:nth-child(even) td{background:color-mix(in srgb,var(--mar-claro) 45%,transparent)}

/* fuentes */
#fuentes{font-size:1.1rem;border-top:1px solid var(--raya)}
#fuentes+ol,#fuentes+ul{font-size:.88rem;color:var(--suave);padding-left:1.3rem}
.revisado{font:.82rem var(--mono);color:var(--suave);margin-top:2rem}

/* tarjetas de fichas: rejilla de 12 columnas, primera tarjeta ancha */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:1rem;margin:1.2rem 0 2rem;padding:0;list-style:none}
.tarjeta{background:var(--hoja);border:1px solid var(--raya);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s}
.tarjeta:hover{transform:translateY(-2px);border-color:var(--pimenton)}
.tarjeta a{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.tarjeta .num{font:800 2.4rem/1 var(--titular);color:var(--pimenton);padding:1rem 1rem 0}
.tarjeta h3{margin:.4rem 1rem .4rem;font-size:1.2rem}
.tarjeta p{margin:0 1rem 1rem;font-size:.92rem;color:var(--suave)}
.tarjeta img{aspect-ratio:16/9;object-fit:cover;width:100%}
.seguir{margin-top:2.6rem}
.seguir h2{border-top-color:var(--pimenton)}

/* portada */
.heroe{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:center;padding:1.6rem 0 1rem}
@media (min-width:56rem){.heroe{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.heroe .foto{margin:0}
.pasos{counter-reset:paso;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1rem;list-style:none;padding:0;margin:1rem 0 2rem}
.pasos li{counter-increment:paso;background:var(--hoja);border-radius:14px;padding:1rem 1.1rem;border-top:6px solid var(--mar)}
.pasos li:nth-child(2){border-top-color:var(--azafran)}.pasos li:nth-child(3){border-top-color:var(--pimenton)}
.pasos li::before{content:"Paso " counter(paso);display:block;font:700 .75rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--suave)}
.pasos strong{display:block;font:700 1.2rem/1.2 var(--titular);margin:.3rem 0}

/* tienda */
.tienda{background:var(--hoja);border:2px solid var(--tinta);border-radius:16px;padding:1.2rem;margin:1.4rem 0}
.tienda h3{margin-top:0;font-size:1.6rem}
.tienda dl{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.35rem 1rem;margin:0 0 1rem;font-size:.95rem}
@media (max-width:30rem){.tienda dl{grid-template-columns:minmax(0,1fr)}.tienda dd{margin-bottom:.5rem}}
.tienda dt{font-weight:700}.tienda dd{margin:0}
.boton{display:inline-block;background:var(--pimenton);color:#fff;font:700 1rem var(--texto);padding:.65rem 1.2rem;border-radius:99px;text-decoration:none}
.boton:hover{background:var(--tinta);color:var(--hoja)}
.vinculo{font-size:.78rem;color:var(--suave);margin-top:2.4rem}

/* glosario */
dl.glosario dt{font:700 1.15rem var(--titular);margin-top:1.2rem}
dl.glosario dd{margin:.2rem 0 0}

/* pie */
.pie{background:var(--tinta);color:#dfe5f1;margin-top:3rem;padding:2rem 0 2.4rem;font-size:.9rem}
.pie a{color:#fff}
.pie .envoltura{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.pie h2{font:700 .78rem var(--mono);text-transform:uppercase;letter-spacing:.1em;border:0;padding:0;margin:0 0 .5rem;color:var(--azafran)}
.pie ul{list-style:none;margin:0;padding:0}.pie li{margin:.25rem 0}
.pie p{margin:0 0 .5rem}
@media (prefers-color-scheme:dark){.pie{background:#070b17}}
.sinfoto{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:repeating-linear-gradient(135deg,var(--tinta) 0 14px,#22325a 14px 28px);color:var(--azafran);font:800 3.4rem/1 var(--titular)}
.sinfoto+.num{display:none}