:root{
  --papel:#E9EDEA;
  --papel-alto:#F4F7F4;
  --tinta:#141C1A;
  --jade:#2F5F55;
  --cinabrio:#A6321E;
  --gris:#67736F;
  --linea:#C6D0CB;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Spectral",Georgia,serif;
  font-weight:400;
  font-size:17px;
  line-height:1.62;
}
a{color:var(--jade)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--cinabrio);outline-offset:2px
}

/* ---------- barra ---------- */
.barra{
  display:flex;align-items:baseline;gap:2rem;flex-wrap:wrap;
  padding:1.1rem clamp(1rem,4vw,3rem);
  border-bottom:1px solid var(--linea);
  background:var(--papel-alto);
}
.marca{text-decoration:none;color:inherit;display:flex;align-items:baseline;gap:.6rem}
.marca-nombre{
  font-family:"Barlow Semi Condensed",sans-serif;
  font-weight:600;font-size:1.6rem;letter-spacing:.06em;
}
.marca-glosa{font-size:.82rem;color:var(--gris);font-style:italic}
.barra nav{display:flex;gap:1.4rem;margin-left:auto;font-family:"Barlow Semi Condensed",sans-serif;font-size:1.05rem}
.barra nav a{text-decoration:none;color:var(--gris);padding-bottom:.2rem;border-bottom:2px solid transparent}
.barra nav a:hover{color:var(--tinta)}
.barra nav a.activo{color:var(--tinta);border-bottom-color:var(--cinabrio)}

main{padding:clamp(1.5rem,4vw,3rem);max-width:78rem;margin:0 auto}
.pie{
  border-top:1px solid var(--linea);margin-top:4rem;
  padding:1.4rem clamp(1rem,4vw,3rem);color:var(--gris);font-size:.86rem
}
.pie p{max-width:60ch;margin:0}

h1{font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;margin:0 0 .4rem}
h2{font-weight:600;font-size:1.35rem;margin:2.4rem 0 .7rem}
h3{font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;font-size:1.1rem;
   letter-spacing:.03em;color:var(--jade);margin:1.6rem 0 .4rem}
p{max-width:68ch}
.entradilla{color:var(--gris);max-width:60ch;font-size:1.05rem;margin-top:0}

/* ---------- índice de meridianos ---------- */
.meridianos{list-style:none;padding:0;margin:2rem 0 0;border-top:1px solid var(--linea)}
.meridianos li{border-bottom:1px solid var(--linea)}
.meridianos a{
  display:grid;grid-template-columns:4.5rem 1fr auto;gap:1rem;align-items:baseline;
  padding:.9rem .2rem;text-decoration:none;color:inherit
}
.meridianos a:hover{background:var(--papel-alto)}
.mer-sigla{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;font-size:1.5rem;
  color:var(--cinabrio);letter-spacing:.02em
}
.mer-nombre{font-size:1.15rem}
.mer-cuenta{font-family:"Barlow Semi Condensed",sans-serif;color:var(--gris);font-size:.95rem}

/* ---------- riel de puntos (elemento distintivo) ---------- */
.riel{margin:2rem 0 2.5rem;overflow-x:auto;padding-bottom:.6rem}
.riel-pista{display:flex;align-items:flex-end;gap:0;min-width:min-content;position:relative}
.riel-pista::before{
  content:"";position:absolute;left:0;right:0;bottom:1.15rem;height:1px;background:var(--linea)
}
.nodo{
  position:relative;flex:0 0 auto;width:2.6rem;text-align:center;text-decoration:none;color:var(--gris);
  font-family:"Barlow Semi Condensed",sans-serif;font-size:.9rem;padding-bottom:.35rem
}
.nodo span{display:block;margin-bottom:.5rem}
.nodo::after{
  content:"";display:block;width:9px;height:9px;border-radius:50%;
  background:var(--papel);border:1.5px solid var(--jade);margin:0 auto
}
.nodo:hover{color:var(--tinta)}
.nodo:hover::after{background:var(--jade)}
.nodo.actual{color:var(--cinabrio);font-weight:600}
.nodo.actual::after{background:var(--cinabrio);border-color:var(--cinabrio);width:13px;height:13px}

/* ---------- ficha de punto ---------- */
.ficha-cabeza{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap}
.codigo-punto{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  font-size:clamp(2.6rem,7vw,4rem);line-height:1;color:var(--cinabrio);letter-spacing:.01em
}
.ficha-meta{color:var(--gris);font-size:.95rem}
.bloque{margin:2rem 0}
.bloque h3{margin-top:0}
.bloque p{margin:.3rem 0 .8rem}
.navpunto{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;
  border-top:1px solid var(--linea);padding-top:1rem;font-family:"Barlow Semi Condensed",sans-serif}
.navpunto a{text-decoration:none}

/* ---------- formularios y listas ---------- */
form.caja{background:var(--papel-alto);border:1px solid var(--linea);padding:1.4rem;max-width:34rem}
label{display:block;font-family:"Barlow Semi Condensed",sans-serif;font-size:1rem;color:var(--gris);margin-top:.9rem}
input[type=text],input[type=password],select,textarea{
  width:100%;padding:.55rem .6rem;border:1px solid var(--linea);background:#fff;
  font-family:inherit;font-size:1rem;color:var(--tinta)
}
button,.boton{
  display:inline-block;margin-top:1.2rem;padding:.6rem 1.4rem;border:0;cursor:pointer;
  background:var(--jade);color:#fff;font-family:"Barlow Semi Condensed",sans-serif;
  font-size:1.05rem;letter-spacing:.03em;text-decoration:none
}
button:hover,.boton:hover{background:var(--tinta)}
.boton.secundario{background:transparent;color:var(--jade);border:1px solid var(--linea)}

.resultados{list-style:none;padding:0;margin:1.6rem 0}
.resultados li{border-bottom:1px solid var(--linea);padding:.8rem 0}
.resultados .cod{font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;color:var(--cinabrio);
  font-size:1.15rem;text-decoration:none;margin-right:.6rem}
.resultados mark{background:#F2E2A8;padding:0 .1em}

/* ---------- prueba ---------- */
.pregunta{border-top:1px solid var(--linea);padding:1.4rem 0}
.pregunta > p{font-size:1.1rem;margin-top:0}
.items{list-style:none;padding:0;margin:0}
.items li{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:.45rem 0}
.vf{display:flex;gap:.4rem;font-family:"Barlow Semi Condensed",sans-serif}
.vf label{margin:0;display:flex;align-items:center;gap:.25rem;cursor:pointer;color:var(--tinta)}
.marcador{font-family:"Barlow Semi Condensed",sans-serif;font-size:3rem;color:var(--jade)}
.bien{color:var(--jade)}
.mal{color:var(--cinabrio)}

/* ---------- anamnesis ---------- */
.grupo-atributo{border-top:1px solid var(--linea);padding:1.1rem 0}
.grupo-atributo summary{cursor:pointer;font-family:"Barlow Semi Condensed",sans-serif;font-size:1.1rem}
.valores{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.8rem 0 0;padding:0;list-style:none}
.valores li{flex:0 1 auto}
.valores label{margin:0;display:flex;gap:.35rem;align-items:baseline;color:var(--tinta);
  font-family:inherit;font-size:.95rem;background:#fff;border:1px solid var(--linea);padding:.3rem .55rem;cursor:pointer}
.valores input:checked + span{color:var(--cinabrio);font-weight:600}

table{border-collapse:collapse;width:100%;margin:1.5rem 0;font-size:.95rem}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--linea)}
th{font-family:"Barlow Semi Condensed",sans-serif;color:var(--gris);font-weight:500}

.aviso{border-left:3px solid var(--cinabrio);padding:.2rem 0 .2rem 1rem;color:var(--gris);max-width:60ch}

@media (max-width:640px){
  .barra{gap:.8rem}
  .barra nav{margin-left:0;width:100%;gap:1rem;overflow-x:auto}
  .meridianos a{grid-template-columns:3.4rem 1fr;row-gap:.2rem}
  .mer-cuenta{grid-column:2}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- láminas ---------- */
.lamina{margin:2rem 0;max-width:34rem}
.lamina-marco,.lamina-editor{position:relative;display:inline-block;line-height:0;
  border:1px solid var(--linea);background:#fff}
.lamina-marco img,.lamina-editor img{max-width:100%;height:auto;display:block}
.lamina-editor img{cursor:crosshair}
.lamina figcaption{line-height:1.5;font-size:.85rem;color:var(--gris);margin-top:.5rem}
.punto-marca{position:absolute;width:11px;height:11px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--cinabrio);border:2px solid #fff;box-shadow:0 0 0 1px var(--cinabrio)}
a.punto-marca span{
  position:absolute;left:14px;top:-6px;white-space:nowrap;opacity:0;
  font-family:"Barlow Semi Condensed",sans-serif;font-size:.85rem;line-height:1.4;
  background:var(--tinta);color:#fff;padding:.05rem .35rem
}
a.punto-marca:hover span,a.punto-marca:focus span{opacity:1}
.figura-doble{display:flex;gap:1.5rem;flex-wrap:wrap;margin:1.5rem 0}
.figura-doble img{border:1px solid var(--linea);background:#fff}

/* ---------- mapa corporal ---------- */
.cuerpo{position:relative;display:inline-block;line-height:0;width:100%;max-width:16rem}
.cuerpo img{width:100%;height:auto;display:block}
.cuerpo.editable{cursor:crosshair}
.cuerpo-trazo,.cuerpo-guias{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cuerpo-trazo polyline{fill:none;stroke:var(--jade);stroke-width:1.5;opacity:.55}
.cuerpo-guias line{stroke:var(--gris);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.cuerpo-guias text{font-family:"Barlow Semi Condensed",sans-serif;font-size:19px;fill:var(--cinabrio);opacity:.85}
.cuerpo-guias line{stroke:var(--cinabrio);opacity:.45}
.vistas{display:flex;gap:2rem;flex-wrap:wrap;margin:2rem 0}
.vistas figure{margin:0}
.vistas figcaption,.localizador figcaption{font-size:.85rem;color:var(--gris);line-height:1.4;margin-top:.4rem}
.localizador{float:right;margin:0 0 1rem 2rem;max-width:11rem}
.vistas-sel{display:flex;gap:.5rem;flex-wrap:wrap}
.vistas-sel .boton{margin-top:0}
.marcador-mapa{display:flex;gap:2.5rem;flex-wrap:wrap;align-items:flex-start;margin-top:1rem}
.ficha-guia{background:var(--papel-alto);border:1px solid var(--linea);padding:1rem;max-width:26rem}
.ficha-guia p{margin:.2rem 0 .6rem}
.lista-puntos{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;padding:0;margin:1.2rem 0 0;max-width:26rem}
.lista-puntos a{display:block;min-width:2.6rem;text-align:center;padding:.2rem .4rem;
  border:1px solid var(--linea);background:#fff;text-decoration:none;color:var(--gris);
  font-family:"Barlow Semi Condensed",sans-serif;font-size:.9rem}
.lista-puntos a.hecho{color:var(--jade);border-color:var(--jade)}
.lista-puntos a.activo{background:var(--cinabrio);border-color:var(--cinabrio);color:#fff}
@media (max-width:640px){.localizador{float:none;margin:1.5rem 0;max-width:12rem}}
.atlas-cabeza .cuerpo{max-width:11rem}
.atlas-cabeza{margin:1.5rem 0 2.5rem}
.instruccion{border-left:3px solid var(--jade);background:var(--papel-alto);
  padding:.7rem 1rem;max-width:52rem;margin:1rem 0}

/* figura grande de la página de meridiano */
.lamina-grande{margin:1.6rem 0 2.4rem}
.lamina-grande .cuerpo{max-width:min(26rem,42vh)}
.cuerpo.editable{max-width:min(30rem,62vh)}
.cuerpo.con-etiquetas a.punto-marca span{
  opacity:1;position:absolute;left:12px;top:-9px;background:transparent;color:var(--cinabrio);
  padding:0;text-shadow:0 0 3px var(--papel),0 0 3px var(--papel),0 0 3px var(--papel);font-weight:600
}
.cuerpo.con-etiquetas a.punto-marca:hover span{color:var(--tinta)}
form.cuerpo.editable{display:inline-block;line-height:0;max-width:none}
form.cuerpo.editable input[type=image]{display:block;cursor:crosshair;border:1px solid var(--linea);background:#fff}
form.cuerpo.editable .punto-marca{pointer-events:none}

/* ---------- diagrama de localizacion por punto ---------- */
.diagrama{margin:1.6rem 0 2rem;max-width:20rem}
.diagrama img{width:auto;max-width:100%;max-height:52vh;height:auto;display:block;
  border:1px solid var(--linea);background:#fff;margin-inline:auto}
.diagrama figcaption{font-size:.82rem;color:var(--gris);line-height:1.45;margin-top:.5rem;max-width:44ch}
.diagrama figcaption a{color:var(--gris);text-decoration:underline}
.creditos{max-width:60ch}
@media (min-width:56rem){
  .diagrama{float:right;margin:0 0 1.5rem 2.5rem;max-width:min(15rem,38vh)}
}

/* ---------- tira de laminas del meridiano ---------- */
.recorrido{margin:2.4rem 0}
.recorrido h3{margin-bottom:.2rem}
.tira{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1rem 0 .6rem}
.tira a{display:block;text-decoration:none;color:var(--gris);text-align:center}
.tira img{
  display:block;width:76px;height:200px;object-fit:contain;
  border:1px solid var(--linea);background:#fff;padding:3px
}
.tira a:hover img{border-color:var(--cinabrio)}
.tira span{
  display:block;font-family:"Barlow Semi Condensed",sans-serif;font-size:.9rem;padding-top:.25rem
}
.tira a:hover span{color:var(--tinta)}
@media (max-width:640px){ .tira img{width:58px;height:154px} }

/* nombre tradicional del punto */
.nombre-tradicional{
  font-family:"Spectral",Georgia,serif;font-style:italic;font-size:1.12rem;
  color:var(--jade);line-height:1.5
}
.nombre-tradicional [lang="zh-Hant"]{font-style:normal;color:var(--tinta);margin-left:.15em}