/* Actividades de Niveles 1 y 2: piezas compartidas por las 17 herramientas web.
   Colores, fuentes y esquinas vienen de variables.css. */

* { box-sizing:border-box;margin:0;padding:0; }
body { font-family:var(--font-body);background:var(--color-ivory);color:var(--color-chocolate);min-height:100vh;padding:2rem 1rem; }
.eyebrow { font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-mocha);margin-bottom:.75rem; }
textarea:focus { outline:none;border-color:var(--color-terracotta); }
.btn:hover { background:var(--color-beige); }
.btn.primary { background:var(--color-chocolate);color:var(--color-ivory);border-color:var(--color-chocolate); }
.btn.primary:hover { background:var(--color-charcoal); }
.btn:disabled { opacity:.3;cursor:default; }
.back-link { display:inline-block;font-size:12px;color:var(--color-mocha);text-decoration:none;border-bottom:1px solid var(--color-terracotta);padding-bottom:2px;margin-bottom:1.25rem; }
.back-link:hover { color:var(--color-chocolate); }
.pull-quote { border-left:3px solid var(--color-terracotta);padding:.875rem 1.125rem;background:var(--color-beige);border-radius:0;margin:1.5rem 0; }
.pull-quote p { font-size:16.5px;color:var(--color-chocolate);line-height:1.8;font-family:var(--font-display);font-style:italic; }
.section-eyebrow { font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-terracotta-deep);margin-top:2.25rem;margin-bottom:.4rem; }
.ref-eyebrow { font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-terracotta-deep);margin-bottom:.75rem; }
textarea::placeholder { color:var(--color-mocha); }
.screen { display:none; }
.screen.active { display:block; }
.title { font-size:26px;font-weight:500;font-family:var(--font-display);color:var(--color-chocolate);line-height:1.35;margin-bottom:.875rem; }
.prog-wrap { height:3px;background:var(--color-taupe);border-radius:0;margin-bottom:1.75rem; }
.prog-fill { height:3px;background:var(--color-olive);border-radius:0;transition:width .4s ease; }
.q-counter { font-size:12px;color:var(--color-mocha);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.875rem; }
.opts { display:flex;flex-direction:column;gap:9px;margin-bottom:1.75rem; }
.opt { background:var(--color-beige);border:.5px solid var(--color-taupe);border-radius:0;padding:13px 16px;text-align:left;cursor:pointer;font-size:15.5px;color:var(--color-mocha);line-height:1.55;font-family:inherit;transition:border-color .15s,background .15s; }
.opt:hover { border-color:var(--color-terracotta);background:var(--color-beige); }
.opt.sel { border-color:var(--color-terracotta);background:var(--color-beige);color:var(--color-chocolate); }
.nav { display:flex;gap:10px; }
.btn.p { background:var(--color-chocolate);color:var(--color-ivory);border-color:var(--color-chocolate); }
.btn.p:hover { background:var(--color-charcoal); }
.res-title { font-size:24px;font-weight:500;font-family:var(--font-display);color:var(--color-chocolate);line-height:1.35;margin-bottom:1rem; }
.res-body { font-size:16.5px;color:var(--color-mocha);line-height:1.75;margin-bottom:1.25rem; }
.mirror { border-left:3px solid var(--color-terracotta);padding:.875rem 1.125rem;background:var(--color-beige);border-radius:0;margin:1.25rem 0; }
.mirror p { font-size:16.5px;color:var(--color-chocolate);line-height:1.8;font-family:var(--font-display); }
.dims { background:var(--color-beige);border:.5px solid var(--color-taupe);border-radius:0;padding:1rem 1.125rem;margin:1.25rem 0; }
.dim-label { font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--color-mocha);margin-bottom:.3rem; }
.dim-bg { height:4px;background:var(--color-taupe);border-radius:0;margin-bottom:.2rem; }
.dim-fill { height:4px;border-radius:0;transition:width .7s ease; }
.dim-note { font-size:12px;color:var(--color-mocha);margin-bottom:1rem; }
.res-closing { font-size:15.5px;color:var(--color-mocha);line-height:1.75;margin-top:.5rem; }
.share-btn { display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--rgb-chocolate), .15);background:var(--color-beige);color:var(--color-terracotta-deep);cursor:pointer;transition:background .2s,color .2s,border-color .2s;padding:0;flex-shrink:0; }
.share-btn:hover { background:var(--color-olive);color:var(--color-ivory);border-color:var(--color-terracotta); }
.share-btn svg { width:16px;height:16px; }
.entry-head { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.share-row { display:flex;align-items:center;gap:10px;margin:1rem 0; }
.share-row-label { font-size:13px;color:var(--color-mocha); }
.step { background:var(--color-chocolate);border-radius:0;padding:1.5rem;margin-top:1.5rem; }
.step-eyebrow { font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-terracotta-deep);margin-bottom:.5rem; }
.step-title { font-size:17px;font-weight:500;font-family:var(--font-display);color:var(--color-ivory);margin-bottom:.7rem;line-height:1.35; }
.step-intro { font-size:15px;color:var(--color-taupe);line-height:1.7;margin-bottom:1.1rem; }
.step-q { font-size:15.5px;font-family:var(--font-display);color:var(--color-ivory);line-height:1.55;margin-bottom:.5rem;margin-top:1rem; }