/* Glosario de arquitectura bioclimática — MHDS
   Paleta salvia del MHDS + Poppins, como el estimador de IPE y la
   calculadora de geotermia. */

:root{
  --sage:#5c7268; --sage-dark:#48584f; --sage-light:#8ba192;
  --sage-pale:#eef1ec; --sage-mist:#f4f6f3;
  --deep:#2f605c; --bright:#7ed957;
  --paper:#fafaf7; --ink:#2c3733; --ink-soft:#55625c; --line:#e2e5e0;
  --warm:#c2571a; --warm-pale:#fdeee4;
  --cool:#2f7497; --cool-pale:#e8f1f6;
  --ok:#1e8f4e; --ok-pale:#e6f4ec;
  --prob:#c98a12; --prob-pale:#fdf3dc;
  --sin:#c9483f; --sin-pale:#fbe9e7;
  --radius:14px;
  --shadow:0 2px 10px rgba(44,55,51,.08);
  --shadow-lg:0 18px 50px rgba(44,55,51,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Poppins,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased;
}
body.modal-open{overflow:hidden}
b,strong{font-weight:600}
a{color:var(--deep)}
button{font-family:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 16px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ico{width:18px; height:18px; flex-shrink:0}
body:not(.obs) .obs-only{display:none !important}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg,var(--sage) 0%,var(--sage-dark) 100%);
  color:#fff; padding:48px 0 44px;
}
.hero-kicker{text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; opacity:.85; margin:0 0 12px; font-weight:500}
.hero h1{margin:0; font-size:clamp(1.65rem,4.2vw,2.5rem); line-height:1.18; font-weight:700}
.hero-sub{margin:14px 0 0; max-width:60ch; opacity:.92; font-size:1rem}
.draft-badge{
  display:inline-block; margin:18px 0 0; padding:4px 12px; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  font-size:.78rem; font-weight:500; letter-spacing:.02em;
}

/* ---------- Barra de herramientas ---------- */
.toolbar{
  position:sticky; top:0; z-index:40;
  background:rgba(250,250,247,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.toolbar-in{display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; padding-top:12px; padding-bottom:8px}
.search{
  flex:1 1 280px; display:flex; align-items:center; gap:8px;
  background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:0 14px;
}
.search:focus-within{border-color:var(--sage-light)}
.search svg{width:18px; height:18px; color:var(--ink-soft); flex-shrink:0}
.search input{
  flex:1; min-width:0; border:0; outline:0; background:transparent; padding:10px 0;
  font:inherit; font-size:.93rem; color:var(--ink);
}
.seg{display:flex; background:var(--sage-pale); border-radius:999px; padding:3px}
.seg button{
  border:0; background:transparent; color:var(--ink-soft); padding:7px 13px; border-radius:999px;
  font-size:.85rem; font-weight:500; cursor:pointer; white-space:nowrap;
}
.seg button.on{background:#fff; color:var(--ink); box-shadow:var(--shadow)}
.tool-acc{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.tool{
  border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:999px;
  padding:7px 14px; font-size:.85rem; font-weight:500; cursor:pointer;
}
.tool:hover{border-color:var(--sage-light)}
.tool-pri{background:var(--deep); border-color:var(--deep); color:#fff}
.tool-pri:hover{background:var(--sage-dark); border-color:var(--sage-dark)}
.switch{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-soft); cursor:pointer; user-select:none}
.switch input{position:absolute; opacity:0; width:1px; height:1px}
.switch-ui{width:34px; height:20px; border-radius:999px; background:#cfd6d0; position:relative; transition:background .15s}
.switch-ui::after{content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .15s}
.switch input:checked + .switch-ui{background:var(--prob)}
.switch input:checked + .switch-ui::after{transform:translateX(14px)}
.switch input:focus-visible + .switch-ui{outline:2px solid var(--sage); outline-offset:2px}

.chips{display:flex; gap:6px; overflow-x:auto; padding-top:2px; padding-bottom:10px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  border:1.5px solid var(--line); background:#fff; color:var(--ink-soft);
  border-radius:999px; padding:5px 12px; font-size:.82rem; font-weight:500; cursor:pointer;
}
.chip .ico{width:15px; height:15px; color:var(--fam,var(--sage))}
.chip span{color:#97a29b; font-weight:400}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.chip.on .ico{color:#fff}
.chip.on span{color:rgba(255,255,255,.7)}

/* ---------- Términos ---------- */
.main{padding-bottom:56px}
#sec-terminos{padding-top:22px}
.result-note{margin:0 0 14px; color:var(--ink-soft); font-size:.92rem}
.falta-nota{display:block; margin-top:6px; padding:8px 12px; border-radius:10px; background:var(--prob-pale); color:#7a5a12}
.vista-nota{margin:0 0 14px; color:var(--ink-soft); font-size:.9rem}

.fam{margin-bottom:30px}
.fam-h{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.fam-ico{
  width:38px; height:38px; padding:8px; border-radius:12px;
  color:var(--fam); background:color-mix(in srgb, var(--fam) 13%, #fff);
}
.fam-h h2{margin:0; font-size:1.08rem; font-weight:600}
.fam-h p{margin:0; font-size:.85rem; color:var(--ink-soft)}
.fam-n{margin-left:auto; font-size:.8rem; color:#97a29b}
.letra{margin-bottom:22px}
.letra-h{margin:0 0 10px; font-size:1.3rem; font-weight:600; color:var(--sage)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:12px}
.card{
  position:relative; display:flex; flex-direction:column; gap:6px; min-height:178px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px 12px; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
  overflow:hidden;
}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--fam)}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(44,55,51,.14); border-color:color-mix(in srgb, var(--fam) 40%, var(--line))}
.card:focus-visible{outline:2px solid var(--fam); outline-offset:2px}
.card-top{display:flex; align-items:center; gap:8px}
.card-ico{color:var(--fam)}
.card-num{font-size:.75rem; font-weight:600; color:#97a29b}
.sym{
  display:inline-block; padding:1px 9px; border-radius:7px;
  background:var(--sage-mist); border:1px solid var(--line);
  font-size:.8rem; font-weight:600; color:var(--ink); font-family:"Cambria Math","Segoe UI",Poppins,serif;
}
.card-top .sym{margin-left:auto}
.card-name{font-size:1.02rem; font-weight:600; line-height:1.3}
.card-linea{
  font-size:.86rem; color:var(--ink-soft); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card-foot{margin-top:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-top:6px}
.tag{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
  font-size:.72rem; font-weight:500;
}
.tag .ico{width:13px; height:13px}
.tag-gesto{background:var(--cool-pale); color:var(--cool)}
.tag-par{background:var(--warm-pale); color:var(--warm)}
.tag-obs{background:var(--prob-pale); color:#8a6110}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0}
.card-foot .dot{margin-left:auto}
.dot-ok{background:var(--ok)} .dot-prob{background:var(--prob)} .dot-sin{background:var(--sin)}

/* ---------- Secciones ---------- */
.block{margin-top:44px; scroll-margin-top:130px}
.section-title{
  position:relative; margin:0 0 8px; padding-bottom:10px;
  font-size:1.1rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--sage-dark);
}
.section-title::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--sage),var(--sage-light) 60%,var(--bright));
}
.section-lead{margin:10px 0 18px; color:var(--ink-soft); max-width:70ch}
.sub{margin:28px 0 10px; font-size:1rem; font-weight:600}

/* Galería de gestos */
.gestos-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.gcard{
  display:flex; flex-direction:column; gap:6px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
.gcard-mini{width:100%; height:78px; background:var(--sage-mist); border-radius:10px; margin-bottom:6px}
.gcard h3{margin:0; font-size:1rem; font-weight:600}
.gq{margin:0; color:var(--ink-soft); font-size:.9rem}
.gterms{margin:4px 0 0; display:flex; flex-wrap:wrap; gap:4px}
.gterms a{font-size:.75rem; padding:2px 8px; border-radius:999px; background:var(--sage-pale); text-decoration:none; color:var(--ink-soft)}
.gterms a:hover{color:var(--ink)}
.btn-probar{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  background:var(--deep); color:#fff; text-decoration:none; border-radius:999px; padding:7px 16px;
  font-size:.86rem; font-weight:500;
}
.btn-probar .ico{width:16px; height:16px}
.btn-probar:hover{background:var(--sage-dark)}

/* No confundir */
.pares{display:grid; grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); gap:14px}
.par{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.par h3{margin:0 0 12px; font-size:1rem; font-weight:600}
.par-t{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.par-t a{text-decoration:none; color:var(--ink)}
.par-t a:hover{text-decoration:underline}
.par-vs{display:inline-flex; color:var(--warm)}
.cmp{display:grid; grid-template-columns:minmax(90px,.7fr) 1fr 1fr; gap:0; font-size:.86rem; border-top:1px solid var(--line)}
.cmp > div{padding:8px 10px; border-bottom:1px solid var(--line)}
.cmp-h{font-weight:600; font-size:.8rem; color:var(--ink-soft); background:var(--sage-mist)}
.cmp-l{font-weight:500; color:var(--ink-soft); font-size:.8rem}
.cmp-c.act, .cmp-h.act{background:var(--warm-pale)}
.cmp-h.act{color:var(--warm)}
.clave{margin:12px 0 0; font-size:.92rem}
.par-pie{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px}
.lnk{font-size:.86rem; font-weight:500; text-decoration:none}
.lnk:hover{text-decoration:underline}

/* Fuentes */
.barra{display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--line)}
.barra span{display:block; height:100%}
.ley{margin:8px 0 0; font-size:.8rem; color:var(--ink-soft); display:flex; gap:6px 10px; align-items:center; flex-wrap:wrap}
.apa{margin:0; padding-left:1.6em; text-indent:-1.6em}
.lnk-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  border:0; background:none; color:var(--deep); font-size:.86rem; font-weight:500; cursor:pointer; padding:0;
}
.lnk-btn .ico{width:15px; height:15px}
.lnk-btn:hover{text-decoration:underline}

/* Observaciones */
.obs-lista{margin:0; padding-left:1.2em; display:grid; gap:4px}
#sec-obs{background:var(--prob-pale); border:1px solid #efd9a6; border-radius:var(--radius); padding:18px 20px; margin-top:24px}
#sec-obs h3{font-size:.95rem; margin:18px 0 8px}
.obs-faltan{display:flex; flex-wrap:wrap; gap:6px; margin:0}

.footer{border-top:1px solid var(--line); padding:20px 0 32px; color:var(--ink-soft); font-size:.84rem}
.footer p{margin:0; max-width:80ch}

/* ---------- Modal (ficha y estudio) ---------- */
.modal{
  position:fixed; inset:0; z-index:60; background:rgba(34,44,40,.5);
  display:flex; align-items:flex-start; justify-content:center; padding:28px 16px;
  overflow:hidden;
}
.modal[hidden]{display:none}
.modal-box{
  position:relative; width:100%; max-width:800px; max-height:calc(100vh - 56px); overflow-y:auto;
  background:#fff; border-radius:18px; box-shadow:var(--shadow-lg); padding:20px 26px 22px;
  overscroll-behavior:contain;
}
.ficha-box{border-top:6px solid var(--fam)}
.f-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.f-top-acc{display:flex; align-items:center; gap:6px}
.fam-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:500;
  color:var(--fam); background:color-mix(in srgb, var(--fam) 11%, #fff); border-radius:999px; padding:3px 10px;
}
.fam-chip .ico{width:15px; height:15px}
.f-btn{
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:#fff;
  border-radius:999px; padding:5px 11px; font-size:.8rem; color:var(--ink-soft); cursor:pointer;
}
.f-btn .ico{width:15px; height:15px}
.f-btn:hover{border-color:var(--sage-light); color:var(--ink)}
.f-close{
  width:36px; height:36px; border-radius:50%; border:0; background:var(--sage-pale); color:var(--ink);
  font-size:1rem; cursor:pointer; flex-shrink:0;
}
.f-close:hover{background:var(--line)}
.f-title{margin:12px 0 4px; font-size:clamp(1.45rem,3.6vw,1.9rem); line-height:1.2; font-weight:700}
.f-meta{margin:0 0 4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.unit{font-size:.85rem; color:var(--ink-soft)}
.f-linea{
  margin:16px 0 0; padding:14px 16px; border-radius:14px;
  background:color-mix(in srgb, var(--fam) 8%, #fff); border-left:4px solid var(--fam);
}
.f-linea p{margin:0 0 8px; font-size:1.08rem; font-weight:400; line-height:1.5}
.f-linea-top{display:flex; align-items:flex-start; gap:12px}
.f-linea-top p{flex:1; margin:0}
.btn-def{
  flex-shrink:0; margin-top:3px; padding:2px 10px; border-radius:999px;
  border:1px solid #d3d9d4; background:rgba(255,255,255,.6); color:#8a958e;
  font:500 .72rem/1.5 Poppins, system-ui, sans-serif; cursor:pointer;
}
.btn-def:hover{color:var(--ink-soft); border-color:#b9c2bc}
.btn-def[aria-expanded="true"]{background:#e9ece8; color:var(--ink-soft); border-color:#c9d0ca}
.btn-def:focus-visible{outline:2px solid var(--sage-light); outline-offset:2px}
.btn-def-falta{color:#a77a1c}
.f-fuentes{margin:8px 0 0 !important; font-size:.76rem !important; line-height:1.5 !important; color:#97a29b}
.ref-txt{border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer; text-align:left}
.ref-txt:hover{color:var(--ink-soft); text-decoration:underline}
.cita-txt .ref-txt{font-style:normal; font-size:.76rem; color:#97a29b}
.cita-txt .ref-txt:hover{color:var(--ink-soft)}
.f-def{margin-top:12px; padding-top:12px; border-top:1px solid color-mix(in srgb, var(--fam) 25%, var(--line))}
.f-def-t{margin:0 0 8px !important; font-size:.72rem !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.07em; color:var(--sage-dark)}
.f-def .cita-txt p{font-size:.86rem; font-weight:300}
.f-def-pie{margin:6px 0 0 !important; font-size:.8rem !important}
.ficha-box h3{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 8px; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--sage-dark);
}
.ficha-box h3 .ico{width:16px; height:16px}
.ficha-box .par h3{text-transform:none; letter-spacing:0; font-size:.98rem; color:var(--ink)}
.orig-tag{
  font-size:.66rem; letter-spacing:.03em; text-transform:none; font-weight:500;
  padding:1px 8px; border-radius:999px; background:var(--sage-mist); border:1px solid var(--line); color:var(--ink-soft);
}
.f-bloque, .f-gesto, .f-rel, .f-obs, .f-orig, .f-alt{margin-top:22px}
.f-bloque p{margin:0}
.f-bloque .vacio{color:#97a29b; font-style:italic}
.citas{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px}
.cita-txt{margin:0 0 10px; padding:2px 0 2px 14px; border-left:3px solid var(--line)}
.cita-txt p{margin:0 0 6px; font-size:.86rem; line-height:1.55; color:var(--ink-soft); font-style:italic}
.cita-falta{
  margin:0 0 10px; padding:10px 12px; border:1.5px dashed #e3c27a; border-radius:10px; background:var(--prob-pale);
}
.cita-falta .cf-t{margin:0 0 2px; font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#8a6110}
.cita-falta .cf-d{margin:0 0 8px; font-size:.84rem; color:#6e5212}
.f-orig{background:var(--sin-pale); border-radius:12px; padding:12px 16px; font-size:.9rem}
.f-orig p{margin:0 0 6px}
.f-orig .f-alt-nota{margin:4px 0 0}
.cita{
  display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:3px 11px;
  font-size:.76rem; font-weight:500; border:1px solid transparent; cursor:pointer; font-family:inherit;
}
.cita-sin{background:var(--sin-pale); color:#9c3029; border-color:#f2c9c4}
.cita-sin::before{content:"!"; font-weight:700}
.cita-prob{background:var(--prob-pale); color:#7a5a12; border-color:#f0dca8}
.cita-ok{background:var(--ok-pale); color:#17693b; border-color:#bfe2cc}
.cita-propia{background:var(--sage-mist); color:var(--ink-soft); border-color:var(--line); cursor:default}
.par-en-ficha{margin-top:22px; box-shadow:none; background:var(--paper)}
.rel-chips{display:flex; flex-wrap:wrap; gap:6px}
.chip-rel{
  font-size:.84rem; text-decoration:none; color:var(--ink); padding:4px 12px; border-radius:999px;
  border:1.5px solid color-mix(in srgb, var(--fam) 35%, var(--line)); background:#fff;
}
.chip-rel:hover{background:color-mix(in srgb, var(--fam) 10%, #fff)}
.chip-falta{
  font-size:.82rem; color:#97a29b; padding:4px 12px; border-radius:999px; border:1.5px dashed #cfd6d0; cursor:help;
}
.f-alt{background:var(--cool-pale); border-radius:12px; padding:12px 16px}
.f-alt-nota{margin:0 0 8px; font-size:.8rem; color:var(--ink-soft)}
.f-alt ul{margin:0; padding-left:1.1em; font-size:.9rem; display:grid; gap:6px}
.alt-ref{font-weight:500; color:var(--cool)}
.f-obs{background:var(--prob-pale); border-radius:12px; padding:12px 16px}
.f-obs ul{margin:0; padding-left:1.1em; font-size:.9rem; display:grid; gap:4px}
.f-nav{display:flex; justify-content:space-between; gap:10px; margin-top:20px; padding-top:14px; border-top:1px solid var(--line)}
.f-nav a{font-size:.88rem; text-decoration:none; font-weight:500}
.f-nav a:hover{text-decoration:underline}
.f-next{text-align:right; margin-left:auto}

/* ---------- Gestos ---------- */
.f-gesto{background:var(--sage-mist); border:1px solid var(--line); border-radius:16px; padding:14px 16px 12px}
.g-q{margin:-2px 0 12px; font-size:.95rem; font-weight:500}
.g-ctrl{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 16px; margin-bottom:12px; align-items:end}
.g-field{display:flex; flex-direction:column; gap:4px; min-width:0}
.g-wide{grid-column:1 / -1}
.g-lbl{font-size:.8rem; color:var(--ink-soft); font-weight:500}
.g-lbl b{color:var(--ink); margin-left:4px}
.g-field input[type=range]{width:100%; accent-color:var(--deep); margin:2px 0}
.g-pills{display:flex; flex-wrap:wrap; gap:5px}
.g-pills button{
  border:1.5px solid var(--line); background:#fff; color:var(--ink-soft); border-radius:999px;
  padding:4px 11px; font-size:.8rem; cursor:pointer;
}
.g-pills button:hover{border-color:var(--sage-light)}
.g-pills button.on{background:var(--deep); border-color:var(--deep); color:#fff}
.g-check{display:flex; align-items:center; gap:8px; font-size:.86rem; cursor:pointer}
.g-check input{accent-color:var(--deep); width:16px; height:16px}
.g-svg{display:block; width:100%; height:auto; background:#fff; border-radius:12px; border:1px solid var(--line)}
.g-canvas{background:#fff; border-radius:12px; border:1px solid var(--line); overflow:hidden}
.g-canvas canvas{display:block}
.g-out{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-top:10px}
.g-out-6{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.g-tile{background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; display:flex; flex-direction:column}
.g-tile-l{font-size:.74rem; color:var(--ink-soft)}
.g-tile-v{font-size:1.15rem; font-weight:600; line-height:1.3}
.g-tile-s{font-size:.72rem; color:#8a958e}
.g-msg{margin:10px 0 0; font-size:.92rem; padding:8px 12px; background:#fff; border-left:3px solid var(--deep); border-radius:0 8px 8px 0}
.g-nota{margin:8px 0 0; font-size:.74rem; color:#8a958e}
.g-info{margin-top:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:.86rem}
.g-info p{margin:0 0 6px}
.g-info-t{font-weight:600; font-size:.9rem}
.g-info-s{color:var(--ink-soft)}
.g-met{margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.g-met h4{margin:0 0 6px; font-size:.84rem; font-weight:600; color:var(--sage-dark)}
.g-form{padding:6px 10px; background:var(--cool-pale); border-radius:8px; font-family:"Cambria Math","Segoe UI",Poppins,serif; font-size:.95rem; overflow-x:auto}
.g-res{color:var(--deep)}
.g-aviso{margin-top:12px; padding:10px 12px; background:var(--prob-pale); border-radius:8px; color:#6e5212; font-size:.84rem}
.g-aviso p{margin:0 0 4px}
.g-aviso ul{margin:0; padding-left:1.2em}

/* Sol */
.s-suelo{fill:#e4e1d6}
.s-int{fill:#f7f5ee}
.s-muro{fill:#8a978f}
.s-losa{fill:#55625c}
.s-vidrio{stroke:#7fbcd6; stroke-width:4}
.s-sombra{fill:rgba(44,55,51,.28)}
.s-luz{fill:rgba(245,184,61,.42)}
.s-rayo{stroke:#e8a21c; stroke-width:1.6; opacity:.75}
.s-rayo-in{stroke-width:1.8; opacity:.95}
.s-rayo-clave{stroke:#c2571a; stroke-dasharray:6 5; stroke-width:1.8; opacity:1}
.s-tip{fill:#c2571a}
.s-sol{fill:#f5b83d; stroke:#f8d27f; stroke-width:6}
.s-arco{fill:none; stroke:#c2571a; stroke-width:1.6}
.s-txt{font-family:Poppins,system-ui,sans-serif; font-size:13px; fill:var(--ink-soft)}
.s-txt-sm{font-size:11px}
.s-txt-sol{font-size:15px; font-weight:600; fill:#b0560f}
.s-txt-h{fill:#c2571a; font-style:italic; font-weight:600}
.s-txt-n{font-weight:500; fill:var(--sage-dark)}

/* Humedad */
.h-tick{stroke:#b8c1bb}
.h-frasco{fill:#fbfdfe; stroke:#55625c; stroke-width:2.5}
.h-vapor{fill:#d6ecf5}
.h-pt{fill:#4f9bc0; opacity:.75}
.h-max{stroke:var(--cool); stroke-width:2; stroke-dasharray:7 5}
.h-max-t{fill:var(--cool); font-weight:500}
.h-niebla{fill:rgba(255,255,255,.55)}
.h-gota{fill:#3a8db6}
.h-cond{fill:#1f5f80; font-weight:600}
.h-arco-bg{fill:none; stroke:var(--line); stroke-width:22}
.h-arco{fill:none; stroke:#4f9bc0; stroke-width:22}
.h-arco-sat{stroke:#1f5f80}
.h-hr{font-family:Poppins,system-ui,sans-serif; font-size:40px; font-weight:600; fill:var(--ink)}

/* Inercia */
.i-grid{stroke:#eef0ec}
.i-noche{fill:#eef1f5}
.i-noche-t{fill:#8a96a6}
.i-ext{fill:none; stroke:var(--warm); stroke-width:2.6}
.i-int{fill:none; stroke:var(--cool); stroke-width:2.6}
.i-pico-ext{fill:var(--warm)}
.i-pico-int{fill:var(--cool)}
.i-flecha{stroke:var(--ink-soft); stroke-width:1.5}
.i-punta{fill:var(--ink-soft)}
.i-flecha-t{font-weight:600; fill:var(--ink)}

/* Conductividad */
.c-lista{background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 10px}
.c-fila{
  display:grid; grid-template-columns:minmax(120px,170px) 1fr 52px; gap:10px; align-items:center;
  width:100%; border:0; background:none; padding:5px 6px; border-radius:8px; cursor:pointer; text-align:left;
  font-size:.84rem; color:var(--ink);
}
.c-fila:hover{background:var(--sage-mist)}
.c-fila.on{background:var(--warm-pale)}
.c-barra{height:9px; background:var(--sage-pale); border-radius:999px; overflow:hidden}
.c-barra span{display:block; height:100%; background:var(--sage); border-radius:999px}
.c-fila.on .c-barra span{background:var(--warm)}
.c-val{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft)}
.c-eje{display:flex; justify-content:space-between; margin:4px 6px 0 calc(min(170px, 40%) + 16px); margin-right:68px; font-size:.68rem; color:#97a29b}
.c-eje-t{margin:2px 6px 2px; font-size:.72rem; color:#97a29b}
.c-comp{margin-top:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.c-pregunta{margin:0; font-size:.88rem; color:var(--ink-soft)}
.c-resp{margin:2px 0 8px; font-size:1.6rem; font-weight:600; line-height:1.25}
.c-resp span{font-size:.95rem; font-weight:400; color:var(--ink-soft)}
.c-barras{display:grid; gap:6px}
.c-b{display:grid; grid-template-columns:minmax(90px,150px) 1fr 64px; gap:10px; align-items:center; font-size:.8rem}
.c-b-l{color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.c-b-t{height:14px; background:var(--sage-mist); border-radius:4px; overflow:hidden}
.c-b-t span{display:block; height:100%; border-radius:4px}
.c-b-eps{background:var(--sage)}
.c-b-mat{background:var(--warm)}
.c-corta{background:repeating-linear-gradient(90deg,var(--warm) 0 88%,transparent 88% 90%,var(--warm) 90% 93%,transparent 93% 95%,var(--warm) 95%)}
.c-b-v{text-align:right; font-variant-numeric:tabular-nums}
.c-escala{margin:6px 0 0; font-size:.72rem; color:#97a29b}
.c-espesor{margin-top:12px}

/* ---------- Popover de citas ---------- */
.pop{
  position:fixed; z-index:80; width:min(380px, calc(100vw - 16px));
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg);
  padding:14px 16px; font-size:.86rem;
}
.pop[hidden]{display:none}
.pop p{margin:0 0 8px}
.pop-t{font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--sage-dark)}
.pop-ref{padding-left:1.4em; text-indent:-1.4em}
.pop-nota{color:var(--ink-soft); font-size:.8rem}
.pop-acc{display:flex; gap:6px; flex-wrap:wrap}
.pop-acc button{
  border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:4px 11px;
  font-size:.78rem; cursor:pointer; color:var(--ink);
}
.pop-acc button:hover{border-color:var(--sage-light)}

.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:90;
  background:var(--ink); color:#fff; padding:8px 18px; border-radius:999px; font-size:.86rem; box-shadow:var(--shadow-lg);
}
.toast[hidden]{display:none}

/* ---------- Modo estudio ---------- */
.estudio-box{max-width:560px}
.estudio-t{margin:0; font-size:1.2rem; font-weight:600}
.estudio-cab{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:14px 0}
.estudio-cab select{font:inherit; font-size:.86rem; padding:6px 10px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink)}
.estudio-prog{margin:0; font-size:.86rem; display:flex; align-items:center; gap:8px}
.barra-sm{width:90px; height:7px}
.carta{
  min-height:230px; border-radius:16px; padding:18px 20px;
  background:color-mix(in srgb, var(--fam) 7%, #fff); border:1.5px solid color-mix(in srgb, var(--fam) 30%, var(--line));
  display:flex; flex-direction:column; gap:8px;
}
.carta-t{margin:6px 0 0; font-size:1.6rem; font-weight:700; line-height:1.2}
.carta-pista{margin:auto 0 0; color:var(--ink-soft); font-size:.92rem}
.carta-linea{margin:4px 0 0; font-size:1.02rem; font-weight:500}
.carta-def{margin:0; font-size:.9rem; color:var(--ink-soft)}
.estudio-acc{display:flex; gap:10px; justify-content:flex-end; margin-top:14px}
.btn-pri, .btn-sec{border-radius:999px; padding:9px 20px; font-size:.9rem; font-weight:500; cursor:pointer; border:1.5px solid var(--deep)}
.btn-pri{background:var(--deep); color:#fff}
.btn-pri:hover{background:var(--sage-dark)}
.btn-sec{background:#fff; color:var(--deep)}
.estudio-pie{margin:14px 0 0; font-size:.78rem; color:var(--ink-soft)}
.estudio-pie .lnk-btn{margin:0 0 0 6px; font-size:.78rem}

/* ---------- Celular ---------- */
@media (max-width: 720px){
  .toolbar{position:static}
  .block{scroll-margin-top:12px}
  .pares{grid-template-columns:1fr}
  .tool-acc{width:100%}
  .seg{flex:1}
  .seg button{flex:1; padding:7px 8px}
}
@media (max-width: 560px){
  .hero{padding:36px 0 32px}
  .modal{padding:0}
  .modal-box{max-height:100vh; height:100%; border-radius:0; padding:16px 16px 22px}
  .ficha-box{border-top-width:5px}
  .f-btn span{display:none}
  .cmp{grid-template-columns:1fr 1fr}
  .cmp-h0{display:none}
  .cmp-l{grid-column:1 / -1; background:var(--sage-mist); padding:4px 10px !important; border-bottom:0 !important}
  .c-fila{grid-template-columns:minmax(96px,1fr) 1fr 46px; gap:8px}
  .c-eje{margin-left:calc(50% - 10px); margin-right:56px}
  .c-b{grid-template-columns:84px 1fr 58px}
  .grid{grid-template-columns:1fr 1fr; gap:10px}
  .card{min-height:0; padding:12px 12px 10px}
  .card-linea{-webkit-line-clamp:4; font-size:.8rem}
  .card-name{font-size:.94rem}
  .card-foot .tag{font-size:0; padding:3px 5px}
  .card-foot .tag .ico{width:14px; height:14px}
}
@media (max-width: 380px){
  .grid{grid-template-columns:1fr}
}

/* ---------- Impresión ---------- */
.solo-imp{display:none}
@media print{
  body{background:#fff; font-size:10.5pt}
  body > *:not(#imprimible){display:none !important}
  #imprimible{display:block !important; color:#000}
  #imprimible h1{font-size:18pt; margin:0}
  .imp-sub{margin:2pt 0 14pt; color:#444}
  .imp-t{break-inside:avoid; margin:0 0 10pt; padding-bottom:8pt; border-bottom:.5pt solid #ccc}
  .imp-t h2{font-size:11.5pt; margin:0 0 3pt}
  .imp-t h2 span{font-weight:400; color:#555; font-size:9.5pt}
  .imp-t p{margin:0 0 3pt}
  .imp-t i{color:#8a2b22; font-size:9pt}
  .imp-bib{font-size:12pt; margin:16pt 0 6pt}
  .imp-ref{margin:0 0 4pt; padding-left:1.6em; text-indent:-1.6em}
}

.b-ok{background:var(--ok)}

/* ---------- Bibliografía: desplegable discreto al final (como en el MHDS) ---------- */
.biblio-fold{margin-top:44px; border-top:1px solid var(--line)}
.biblio-fold > summary{
  cursor:pointer; list-style:none; user-select:none; width:max-content; max-width:100%;
  display:flex; align-items:center; gap:8px; padding:14px 2px 6px;
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.biblio-fold > summary::-webkit-details-marker{display:none}
.biblio-fold > summary::after{content:'+'; font-size:1.05rem; font-weight:400; letter-spacing:0; color:var(--sage-light); transition:transform .2s}
.biblio-fold[open] > summary::after{transform:rotate(45deg)}
.biblio-fold > summary:hover{color:var(--sage-dark)}
.biblio-body{padding:4px 0 6px}
.biblio-list{list-style:none; margin:0; padding:0; font-size:.78rem; color:var(--ink-soft)}
.biblio-list li{padding:4px 10px 4px 30px; text-indent:-20px; line-height:1.5}
.biblio-body .apa{font-size:.78rem; color:var(--ink-soft)}
.biblio-sub{font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:16px 2px 4px}

/* ---------- Modo presentación (para proyectar) ---------- */
.pr{
  position:fixed; inset:0; z-index:120; background:rgba(28,36,32,.72); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  display:grid; grid-template-columns:64px 1fr 64px; align-items:center;
}
.pr[hidden]{display:none}
.pr:fullscreen{background:#26302c}
.pr:-webkit-full-screen{background:#26302c}
.pr-progress{position:absolute; top:0; left:0; right:0; height:4px; background:rgba(255,255,255,.14)}
.pr-progress span{display:block; height:100%; background:var(--sage-light); transition:width .3s ease}
.pr-bar{position:absolute; top:14px; left:20px; right:20px; display:flex; justify-content:space-between; gap:10px; z-index:2}
.pr-bar-acc{display:flex; gap:8px}
.pr-btn{
  cursor:pointer; font:600 .8rem/1 Poppins,system-ui,sans-serif; padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.1); color:#fff;
}
.pr-btn:hover{background:rgba(255,255,255,.24)}
.pr-arrow{
  align-self:center; justify-self:center; width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; font-size:1.8rem; line-height:1;
}
.pr-arrow:hover{background:rgba(255,255,255,.22)}
.pr-arrow:disabled{opacity:.25; cursor:default}
.pr-ayuda{position:absolute; bottom:10px; left:0; right:0; text-align:center; margin:0; font-size:.72rem; color:rgba(255,255,255,.55)}
.pr-indice{
  position:absolute; top:58px; left:20px; z-index:3; width:min(340px, calc(100vw - 40px)); max-height:calc(100vh - 90px); overflow-y:auto;
  background:#fff; border-radius:14px; box-shadow:var(--shadow-lg); padding:8px;
}
.pr-ind{display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer; padding:5px 10px 5px 22px; border-radius:8px; font:400 .84rem/1.35 Poppins,system-ui,sans-serif; color:var(--ink)}
.pr-ind:hover{background:var(--sage-mist)}
.pr-ind.is-on{background:var(--sage-pale); font-weight:600}
.pr-ind-tema, .pr-ind-portada, .pr-ind-cierre{padding-left:10px; font-weight:600; margin-top:6px; color:var(--sage-dark)}
.pr-ind-par, .pr-ind-gesto{color:var(--ink-soft); font-size:.78rem}

.pr-stage{display:grid; place-items:center; height:100%; min-height:0; padding:58px 0 30px}
.pr-card{
  position:relative; width:min(1200px, 100%); max-height:100%; overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper); border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.4);
  border-top:8px solid var(--fam); padding:clamp(20px, min(3.4vw, 5vh), 52px) clamp(24px, 4.6vw, 66px);
}
.pr-card.is-in{animation:pr-in .28s cubic-bezier(.2,.7,.3,1)}
@keyframes pr-in{from{opacity:0; transform:translateY(16px) scale(.985)}}
.pr-kicker{margin:0 0 8px; font-size:clamp(.74rem, min(1.1vw, 2vh), 1rem); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fam)}
.pr-title{margin:0; font-size:clamp(1.6rem, min(3.6vw, 6.4vh), 3.6rem); line-height:1.06; font-weight:700; letter-spacing:-.02em; color:var(--ink)}
.pr-title-xl{font-size:clamp(2rem, min(5vw, 8.6vh), 4.6rem)}
.pr-title-sm{font-size:clamp(1.1rem, min(2vw, 3.6vh), 1.9rem)}
.pr-meta{margin:8px 0 0; font-size:clamp(.9rem, min(1.4vw, 2.6vh), 1.3rem); font-family:"Cambria Math","Segoe UI",Poppins,serif; color:var(--ink-soft)}
.pr-lead{margin:clamp(12px, 2.4vh, 26px) 0 0; font-size:clamp(1.05rem, min(2vw, 3.7vh), 1.95rem); line-height:1.42; font-weight:400; color:var(--ink); max-width:34ch}
.pr-split{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px, 3.5vw, 56px); align-items:center}
.pr-fig{margin:0; background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(10px, 1.6vw, 22px)}
.pr-svg{display:block; width:100%; height:auto; max-height:44vh}
.pr-svg text{font-family:Poppins,system-ui,sans-serif; font-size:11px; fill:var(--ink-soft)}
.pr-svg .pf-b{font-weight:600; fill:var(--ink)}
.pr-svg .pf-xl{font-size:26px; font-weight:700; fill:var(--ink)}
.pr-fuente-btn{
  margin-top:clamp(10px, 2vh, 18px); padding:4px 14px; border-radius:999px; border:1px solid #d3d9d4; background:rgba(255,255,255,.6);
  color:#8a958e; font:500 clamp(.78rem, 1vw, .9rem)/1.5 Poppins,system-ui,sans-serif; cursor:pointer;
}
.pr-fuente-btn[aria-expanded="true"]{background:#e9ece8; color:var(--ink-soft)}
.pr-fuente{margin-top:12px; padding-left:14px; border-left:3px solid var(--line)}
.pr-fuente p{margin:0 0 8px; font-size:clamp(.82rem, min(1.2vw, 2.3vh), 1.12rem); line-height:1.5; font-style:italic; color:var(--ink-soft)}
.pr-fuente span{font-style:normal; font-size:.82em; color:#97a29b}
.pr-clave{
  margin-top:clamp(12px, 2.6vh, 30px); padding:clamp(10px, 1.8vh, 18px) clamp(14px, 2vw, 24px); border-radius:14px;
  background:color-mix(in srgb, var(--fam) 10%, #fff); border-left:6px solid var(--fam);
  font-size:clamp(.98rem, min(1.7vw, 3.1vh), 1.6rem); line-height:1.4; color:var(--ink);
  opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease;
}
.pr-clave.is-on{opacity:1; transform:none}
.pr-clave b{display:block; margin-bottom:4px; font-size:.62em; letter-spacing:.14em; text-transform:uppercase; color:var(--fam)}
.pr-num{position:absolute; right:clamp(18px, 2.6vw, 30px); top:clamp(16px, 2.2vw, 24px); font-size:.82rem; font-weight:600; color:#b3bcb6}
.pr-temas{margin:clamp(22px, 3vw, 40px) 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px; counter-reset:t}
.pr-temas li{counter-increment:t; padding:8px 16px; border-radius:999px; border:2px solid var(--fam); font-size:clamp(.95rem, 1.5vw, 1.3rem); font-weight:500}
.pr-temas li::before{content:counter(t) ". "; color:var(--fam); font-weight:700}
.pr-lista{margin:clamp(20px, 2.8vw, 36px) 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px}
.pr-lista li{padding:6px 14px; border-radius:999px; background:color-mix(in srgb, var(--fam) 12%, #fff); font-size:clamp(.95rem, 1.5vw, 1.3rem)}
.pr-vs{color:var(--fam)}
.pr-cmp{display:grid; grid-template-columns:minmax(120px,.6fr) 1fr 1fr; margin-top:clamp(12px, 2.6vh, 30px); border-top:1px solid var(--line); font-size:clamp(.92rem, min(1.45vw, 2.6vh), 1.35rem); line-height:1.38}
.pr-cmp > div{padding:clamp(6px, 1.3vh, 13px) 12px; border-bottom:1px solid var(--line)}
.pr-cmp-h{font-weight:600; color:var(--fam); background:var(--sage-mist)}
.pr-cmp-l{font-weight:500; color:var(--ink-soft); font-size:.86em}
.pr-par-clave{margin:clamp(12px, 2.4vh, 26px) 0 0; font-size:clamp(1rem, min(1.8vw, 3.2vh), 1.6rem); font-weight:500}
.pr-gesto .pr-gesto-mount{margin-top:12px}
.pr-gesto .g-nota{display:none}
.pr-gesto .g-svg, .pr-gesto .g-canvas{max-height:40vh; margin:0 auto}
.pr-gesto .g-svg{width:auto; max-width:100%}
@media (max-width: 760px){
  .pr{grid-template-columns:0 1fr 0}
  .pr-arrow{display:none}
  .pr-stage{padding:56px 8px 30px}
  .pr-split{grid-template-columns:1fr}
  .pr-cmp{grid-template-columns:1fr 1fr}
  .pr-cmp > div:nth-child(3n+1){grid-column:1 / -1; background:var(--sage-mist)}
  .pr-ayuda{display:none}
}