:root{
  --papel:#f7f1e6;
  --papel-hondo:#ede3d1;
  --papel-luz:#fffdf8;
  --tinta:#22223a;
  --tinta-media:#45445e;
  --naranja:#c86600;
  --naranja-boton:#b05800;
  --naranja-oscuro:#8f4700;
  --carmin:#c30602;
  --ultramar:#2e4c9e;
  --savia:#557f33;
  --ocre:#b9841f;
  --violeta:#74508f;
  --tono:var(--naranja);
  --col-texto:44rem;
  --col-caja:74rem;
  --f-mano:"Kalam","Segoe Print","Bradley Hand",cursive;
  --f-letra:"Inder","Trebuchet MS","Segoe UI",sans-serif;
}
body[data-tono="ultramar"]{--tono:var(--ultramar)}
body[data-tono="savia"]{--tono:var(--savia)}
body[data-tono="carmin"]{--tono:var(--carmin)}
body[data-tono="ocre"]{--tono:var(--ocre)}
body[data-tono="violeta"]{--tono:var(--violeta)}
body[data-tono="humo"]{--tono:var(--tinta-media)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-letra);
  font-size:1.0625rem;
  line-height:1.68;
  color:var(--tinta);
  background-color:var(--papel);
  background-image:url("/acuarela/grano.svg");
  background-size:240px 240px;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto}
a{color:var(--tinta);text-decoration-color:var(--tono);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--tono)}
:focus-visible{outline:3px dashed var(--tono);outline-offset:3px}

[data-role="saltar"]{position:absolute;left:-999px;top:0;background:var(--papel-luz);padding:.5rem 1rem;z-index:20}
[data-role="saltar"]:focus{left:1rem;top:1rem}

/* tapa de la caja */
[data-section="tapa"]{
  background:linear-gradient(180deg,#2b2b48 0%,var(--tinta) 55%,#1a1a2d 100%);
  color:#f3ecdf;
  border-bottom:6px solid #15152a;
  position:relative;
  z-index:5;
}
[data-role="tapa-interior"]{
  max-width:var(--col-caja);
  margin:0 auto;
  padding:.9rem 1.25rem;
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
[data-role="tapa-nombre"]{display:flex;flex-direction:column;text-decoration:none;color:#fff;margin-right:auto;line-height:1.1}
[data-role="tapa-nombre"]:hover{color:#fff}
[data-role="tapa-nombre-sala"]{font-family:var(--f-mano);font-weight:700;font-size:1.75rem;letter-spacing:.01em}
[data-role="tapa-nombre-sala"] b{color:#f0952c;font-weight:700}
[data-role="tapa-nombre-pie"]{font-size:.78rem;color:#cfc6b6;letter-spacing:.03em}
[data-role="abre-pastillero"]{
  display:none;
  font-family:var(--f-mano);font-weight:700;font-size:1.05rem;
  color:var(--tinta);background:var(--papel);
  border:0;border-radius:999px 860px 920px 780px;
  padding:.45rem 1.1rem;cursor:pointer;
}

/* pastillero: navegación como fila de pastillas */
[data-section="pastillero"]{
  background:linear-gradient(180deg,#d8d2c6,#c9c2b4);
  border-top:2px solid #f5f0e6;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
}
[data-role="fila-pastillas"]{
  max-width:var(--col-caja);margin:0 auto;padding:.7rem 1rem .55rem;
  display:flex;justify-content:center;gap:.4rem 1.1rem;flex-wrap:wrap;
  list-style:none;
}
[data-role="fila-pastillas"] a{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  text-decoration:none;font-size:.86rem;color:var(--tinta);padding:.1rem .3rem;
}
[data-role="fila-pastillas"] a::before{
  content:"";width:2.7rem;height:1.9rem;border-radius:.55rem;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 45%),var(--pan,#999);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 1px 0 #fff;
  transition:transform .2s;
}
[data-role="fila-pastillas"] a:hover::before{transform:translateY(-2px) rotate(-2deg)}
[data-role="fila-pastillas"] a[aria-current="page"]{font-weight:700}
[data-role="fila-pastillas"] a[aria-current="page"]::before{
  background:radial-gradient(ellipse at 50% 60%,rgba(0,0,0,.28),rgba(0,0,0,0) 55%),radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),rgba(255,255,255,0) 45%),var(--pan,#999);
}
[data-pan="naranja"]{--pan:var(--naranja)}
[data-pan="ultramar"]{--pan:var(--ultramar)}
[data-pan="savia"]{--pan:var(--savia)}
[data-pan="carmin"]{--pan:var(--carmin)}
[data-pan="ocre"]{--pan:var(--ocre)}
[data-pan="violeta"]{--pan:var(--violeta)}
[data-pan="humo"]{--pan:var(--tinta-media)}

/* pincelada: botón hacia el operador */
[data-role="pincelada"]{
  position:relative;isolation:isolate;display:inline-block;
  padding:.8rem 1.9rem .85rem;
  font-family:var(--f-mano);font-weight:700;font-size:1.2rem;line-height:1.25;
  color:#fff;text-decoration:none;text-align:center;
  transition:transform .18s;
}
[data-role="pincelada"]::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--naranja-boton);
  -webkit-mask:url("/acuarela/trazo.svg") center/100% 100% no-repeat;
  mask:url("/acuarela/trazo.svg") center/100% 100% no-repeat;
}
[data-role="pincelada"]:hover{color:#fff;transform:rotate(-1.2deg) scale(1.02)}
[data-role="pincelada"]:hover::before{background:var(--naranja-oscuro)}
[data-section="tapa"] [data-role="pincelada"]{font-size:1.02rem;padding:.6rem 1.5rem .65rem}
[data-role="puente"]{
  margin:2.4rem auto;padding:1.4rem 1.2rem;text-align:center;
  background:radial-gradient(ellipse at 50% 50%,rgba(200,102,0,.12),rgba(200,102,0,0) 70%);
}
[data-role="puente"] p{margin:0 0 .8rem}

/* aguada: cabecera de cada página */
[data-section="aguada"]{position:relative;overflow:hidden;padding:3.2rem 1.25rem 2.6rem}
[data-section="aguada"]::before,[data-section="aguada"]::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  -webkit-mask:url("/acuarela/mancha.svg") center/contain no-repeat;
  mask:url("/acuarela/mancha.svg") center/contain no-repeat;
}
[data-section="aguada"]::before{width:min(64rem,95vw);height:34rem;right:-8rem;top:-6rem;background:var(--tono);opacity:.17}
[data-section="aguada"]::after{width:min(34rem,80vw);height:20rem;left:-10rem;bottom:-2rem;background:var(--ocre);opacity:.12;transform:rotate(12deg)}
[data-role="aguada-interior"]{
  position:relative;z-index:1;max-width:var(--col-caja);margin:0 auto;
  display:grid;gap:2rem;align-items:center;
}
[data-role="aguada-texto"]{max-width:var(--col-texto)}
[data-section="aguada"] h1{
  font-family:var(--f-mano);font-weight:700;
  font-size:clamp(2rem,1.3rem + 2.6vw,3.15rem);line-height:1.12;margin:0 0 1rem;
}
[data-role="entradilla"]{font-size:1.14rem;margin:0 0 1rem}
[data-role="ultima-mano"]{font-size:.86rem;color:var(--tinta-media);margin:0}
[data-role="ultima-mano"]::before{content:"";display:inline-block;width:.75rem;height:.75rem;border-radius:50%;background:var(--tono);margin-right:.45rem;vertical-align:-.05rem;opacity:.8}

/* muestrario: ficha de datos tipo carta de colores */
[data-section="muestrario"]{
  background:var(--papel-luz);
  border-radius:4px 10px 6px 12px;
  box-shadow:0 1px 0 #fff inset,0 10px 26px -14px rgba(34,34,58,.45);
  padding:1.3rem 1.4rem 1rem;transform:rotate(.6deg);
}
[data-section="muestrario"] dl{margin:0}
[data-section="muestrario"] div{display:grid;grid-template-columns:1.3rem 1fr;column-gap:.6rem;padding:.55rem 0;border-bottom:1px dashed #d8ccb6}
[data-section="muestrario"] div:last-child{border-bottom:0}
[data-section="muestrario"] div::before{content:"";grid-row:1 / span 2;width:1.05rem;height:1.05rem;margin-top:.3rem;border-radius:40% 55% 45% 60%;background:var(--pan,var(--tono))}
[data-section="muestrario"] dt{font-family:var(--f-mano);font-weight:700;font-size:1rem;line-height:1.3}
[data-section="muestrario"] dd{margin:0;font-size:.95rem;line-height:1.45}
[data-role="pie-muestrario"]{font-size:.78rem;color:var(--tinta-media);margin:.7rem 0 0}
[data-role="ilustracion"]{display:block;margin:0 auto -1.6rem;width:min(14rem,46vw);position:relative;z-index:2}

/* cuerpo del texto */
main{display:block}
[data-section="lamina"]{max-width:calc(var(--col-texto) + 2.5rem);margin:0 auto;padding:1rem 1.25rem 3rem}
[data-section="lamina"] h2{
  font-family:var(--f-mano);font-weight:700;font-size:clamp(1.55rem,1.25rem + 1vw,2rem);
  line-height:1.2;margin:2.6rem 0 .9rem;position:relative;padding-bottom:.45rem;
}
[data-section="lamina"] h2::after{
  content:"";position:absolute;left:0;bottom:0;width:min(14rem,60%);height:.55rem;background:var(--tono);opacity:.75;
  -webkit-mask:url("/acuarela/trazo-fino.svg") left/100% 100% no-repeat;
  mask:url("/acuarela/trazo-fino.svg") left/100% 100% no-repeat;
}
[data-section="lamina"] h3{font-family:var(--f-mano);font-weight:700;font-size:1.3rem;margin:1.8rem 0 .5rem}
[data-section="lamina"] p{margin:0 0 1.05rem}
[data-section="lamina"] ul,[data-section="lamina"] ol{padding-left:1.4rem;margin:0 0 1.2rem}
[data-section="lamina"] li{margin:0 0 .45rem}
[data-section="lamina"] ol li::marker{font-family:var(--f-mano);font-weight:700;color:var(--tono)}
[data-section="lamina"] ul li::marker{color:var(--tono)}

[data-role="velo-de-color"]{
  background:linear-gradient(100deg,rgba(255,253,248,.95),rgba(255,253,248,.7));
  border-left:6px solid var(--tono);border-radius:0 12px 12px 0;
  padding:1rem 1.2rem;margin:1.6rem 0;
}
[data-role="velo-de-color"] p:last-child{margin-bottom:0}

/* tabla: carta de colores */
[data-role="pigmentos-rollo"]{overflow-x:auto;margin:1.4rem 0 1.6rem;-webkit-overflow-scrolling:touch}
[data-section="lamina"] table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--papel-luz)}
[data-section="lamina"] caption{caption-side:bottom;text-align:left;font-size:.8rem;color:var(--tinta-media);padding:.5rem 0 0}
[data-section="lamina"] th,[data-section="lamina"] td{text-align:left;vertical-align:top;padding:.65rem .75rem;border-bottom:1px solid #e2d7c3}
[data-section="lamina"] thead th{font-family:var(--f-mano);font-weight:700;font-size:1rem;border-bottom:3px solid var(--tono)}
[data-section="lamina"] tbody th{font-weight:400}
[data-section="lamina"] tbody th::before{content:"";display:inline-block;width:.7rem;height:.7rem;margin-right:.45rem;border-radius:45% 60% 50% 55%;background:var(--tono);opacity:.8}

/* preguntas como gotas */
[data-section="gotas"] details{
  background:var(--papel-luz);border-radius:14px 6px 14px 8px;margin:0 0 .7rem;
  box-shadow:0 6px 18px -14px rgba(34,34,58,.6);
}
[data-section="gotas"] summary{
  cursor:pointer;list-style:none;padding:.85rem 1rem .85rem 2.6rem;position:relative;
  font-family:var(--f-mano);font-weight:700;font-size:1.08rem;line-height:1.35;
}
[data-section="gotas"] summary::-webkit-details-marker{display:none}
[data-section="gotas"] summary::before{
  content:"";position:absolute;left:1rem;top:1.1rem;width:.85rem;height:.85rem;
  background:var(--tono);border-radius:0 50% 50% 50%;transform:rotate(45deg);transition:transform .2s;
}
[data-section="gotas"] details[open] summary::before{transform:rotate(225deg)}
[data-section="gotas"] details p{margin:0;padding:0 1.1rem 1rem 2.6rem}

/* fondo de la caja */
[data-section="fondo-de-caja"]{
  background:linear-gradient(180deg,#1f1f35,#17172a);color:#ddd5c6;
  border-top:6px solid #2d2d4a;margin-top:2rem;font-size:.9rem;line-height:1.6;
}
[data-role="fondo-tercios"]{
  max-width:var(--col-caja);margin:0 auto;padding:2.4rem 1.25rem 1.2rem;
  display:grid;gap:1.6rem;
}
[data-role="fondo-rubro"]{font-family:var(--f-mano);font-weight:700;font-size:1.1rem;color:#f0952c;margin:0 0 .4rem}
[data-section="fondo-de-caja"] p{margin:0 0 .6rem}
[data-section="fondo-de-caja"] a{color:#f3ecdf;text-decoration-color:#f0952c}
[data-section="fondo-de-caja"] [data-role="fondo-borde"]{max-width:var(--col-caja);margin:0 auto;padding:1rem 1.25rem 1.8rem;border-top:1px solid #34345a;font-size:.8rem;color:#a9a294}

/* página extraviada */
[data-section="charco"]{max-width:var(--col-texto);margin:0 auto;padding:4rem 1.25rem 3rem;text-align:center}
[data-section="charco"] h1{font-family:var(--f-mano);font-size:clamp(2rem,1.4rem + 2vw,2.8rem);margin:.5rem 0 1rem}
[data-role="cuatro-corrido"]{font-family:var(--f-mano);font-weight:700;font-size:6rem;line-height:1;color:var(--naranja);opacity:.85;text-shadow:0 .25rem 0 rgba(200,102,0,.25),0 .6rem 0 rgba(200,102,0,.12)}
[data-role="charco-caminos"]{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.2rem;padding:0;list-style:none;margin:1.6rem 0 0}

@media (min-width:900px){
  [data-role="fondo-tercios"]{grid-template-columns:1.3fr 1fr 1fr}
}
@media (min-width:980px){
  [data-role="aguada-interior"]{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  [data-role="aguada-texto"]{justify-self:end;width:100%}
  [data-role="aguada-solo"] [data-role="aguada-interior"]{grid-template-columns:1fr}
  [data-role="aguada-solo"] [data-role="aguada-texto"]{justify-self:center;max-width:calc(var(--col-texto) + 2.5rem);padding:0 1.25rem}
}
@media (min-width:1700px){
  body{font-size:1.125rem}
  :root{--col-texto:46rem;--col-caja:80rem}
}
@media (max-width:760px){
  html[data-js] [data-role="abre-pastillero"]{display:inline-block}
  html[data-js] [data-section="pastillero"][data-abierto="false"]{display:none}
  [data-role="tapa-interior"]{padding:.75rem 1rem}
  [data-role="tapa-nombre-sala"]{font-size:1.45rem}
  [data-section="tapa"] [data-role="pincelada"]{order:3;width:100%;font-size:.98rem}
  [data-role="fila-pastillas"]{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem .4rem;padding:.9rem .8rem}
  [data-section="aguada"]{padding:2.2rem 1rem 1.8rem}
  [data-section="lamina"]{padding:.6rem 1rem 2.4rem}
  [data-section="muestrario"]{transform:none}
  [data-section="lamina"] th,[data-section="lamina"] td{padding:.55rem .5rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}