@charset "UTF-8";
/* ==========================================================================
   Avanzando Hacia el Éxito · One Stop Career Center of Puerto Rico
   css/06-reader-and-tools.css

   The reader and everything that opens in it (questions, lessons, resume,
   interview), the tour, the help band, the footer, the phone's bottom bar and
   the animated mascot drawing.

   Sections in this file:
   READER + WORKSPACE

   index.html loads css/01 to css/07 in this order and the later files build on
   the earlier ones: they reuse the colours and sizes defined in 01 as custom
   properties (var(--brand), var(--ink)…), and where two rules tie, the later
   file wins. Keep the order.
   ========================================================================== */

/* ============================================================
   READER + WORKSPACE — one thing at a time, full attention
   ============================================================ */
.overlay{position:fixed;inset:0;background:rgba(14,18,22,.55);z-index:90;display:none}
.overlay[data-open="true"]{display:block}
.reader{
  position:fixed;top:0;right:0;bottom:0;width:min(760px,100%);background:var(--surface);
  z-index:91;display:none;flex-direction:column;box-shadow:var(--shadow-3);
}
.reader[data-open="true"]{display:flex}
@media(max-width:820px){.reader{width:100%;left:0}}
.reader-top{padding:14px 22px 18px;border-bottom:1px solid var(--line);background:var(--brand);color:#fff}
/* Above the title: the way back on the left, where phones keep it, and the voice on the right.
   The title gets the whole width below them. */
.reader-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.reader-top .k{font-size:.78em;font-weight:800;letter-spacing:1px;text-transform:uppercase;opacity:.92}
.reader-top h3{font-size:1.28em;font-weight:800;margin-top:5px;letter-spacing:-.3px}
.reader.calm .reader-top{background:var(--calm)}
/* Long titles (full agency names, the long 4.3.1 question) would fill half a phone screen. */
@media(max-width:600px){ .reader-top h3.long{font-size:1.08em;line-height:1.25} }
.rbtn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-family:var(--font);font-weight:700;font-size:.88em}
/* On a red surface the pointer turns the control white with red text, as their drop-down
   menu does. */
.rbtn:hover{background:#fff;border-color:#fff;color:var(--brand)}
.reader.calm .rbtn:hover{color:var(--calm)}
.rbtn svg{width:19px;height:19px}
.reader-body{padding:26px 28px 44px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
@media(max-width:820px){
  .reader-body{padding:20px max(var(--gutter), env(safe-area-inset-right)) 44px max(var(--gutter), env(safe-area-inset-left))}
  .reader-top{padding:12px max(var(--gutter), env(safe-area-inset-right)) 16px max(var(--gutter), env(safe-area-inset-left))}
}
.reader-body h4.sub{display:flex;gap:10px;align-items:center;font-size:1.05em;font-weight:800;margin:30px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
.reader-body h4.sub .sid{font-size:.78em;font-weight:800;color:var(--brand);background:var(--brand-tint);border-radius:8px;padding:3px 9px}
.reader-body p{font-size:1em;color:#26292c;max-width:64ch}
.reader-body ul.plain{margin:0 0 18px;padding-left:0;list-style:none}
.reader-body ul.plain li{position:relative;padding:9px 0 9px 28px;border-bottom:1px dashed var(--line)}
.reader-body ul.plain li:last-child{border-bottom:none}
.reader-body ul.plain li::before{content:"";position:absolute;left:6px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--brand)}

/* Plain-language layer. Visually distinct on purpose: the reader must be
   able to tell our wording apart from the document's wording. */
.plainbox{background:var(--calm-tint);border:1px solid var(--calm);border-radius:var(--radius);padding:16px 18px;margin:0 0 22px}
.plainbox b{display:block;font-size:.76em;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--calm);margin-bottom:6px}
.plainbox p{margin:0;color:#3f4347;font-size:1.02em}
/* Where the summary sends the reader to One Stop, the way to reach it is right there. */
.plainbox .plain-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.callout{border-left:4px solid var(--brand);background:var(--brand-tint);padding:16px 18px;border-radius:0 12px 12px 0;color:#7e0000;margin:0 0 18px}
.callout p:last-child{margin-bottom:0}
.warnbox{border-left:4px solid var(--warn);background:var(--warn-tint);padding:16px 18px;border-radius:0 12px 12px 0;color:#5c3c00;margin:0 0 18px}
.warnbox p:last-child{margin-bottom:0}
.warnbox b{color:#4a3000}
.ctable{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.97em}
.ctable td{padding:13px 14px;border:1px solid var(--line);vertical-align:top}
.ctable td.k{width:34%;font-weight:700;color:var(--ink-2);background:#f8f8f8}
.ctable a{font-weight:700;word-break:break-word}
.nw{white-space:nowrap}
.lawlist{margin:0 0 18px;padding:0;list-style:none;counter-reset:law}
.lawlist li{counter-increment:law;position:relative;padding:12px 0 12px 40px;border-bottom:1px solid var(--line-2)}
.lawlist li:last-child{border-bottom:none}
.lawlist li::before{content:counter(law);position:absolute;left:0;top:12px;width:26px;height:26px;border-radius:8px;background:var(--wash);color:var(--ink-2);display:grid;place-items:center;font-weight:800;font-size:.8em}
.lawlist a{font-weight:700}
.lawlist .why{display:block;font-size:.88em;color:var(--ink-2);margin-top:4px}
/* Our one-line explanation carries a label, so it never passes for the
   law's own words. */
.lawlist .why b{color:var(--calm);font-weight:800}

/* The document asks itself questions in bold; they are its own headings. */
.reader-body h5.qhead{font-size:1.05em;font-weight:800;color:var(--ink);margin:24px 0 9px}
.reader-body h5.qhead:first-child{margin-top:0}

ol.flow{counter-reset:s;list-style:none;padding:0;margin:0 0 20px}
ol.flow li{position:relative;padding:0 0 20px 44px;counter-increment:s}
ol.flow li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.86em}
ol.flow li::after{content:"";position:absolute;left:14px;top:34px;bottom:4px;width:2px;background:var(--line)}
ol.flow li:last-child::after{display:none}
ol.flow li:last-child{padding-bottom:0}

/* Document checklist: reading is not enough, the page has to let you act. */
.checklist{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0 0 18px;background:var(--surface)}
.checklist .ctop{display:flex;gap:12px;align-items:center;padding:13px 16px;background:#f8f8f8;border-bottom:1px solid var(--line);flex-wrap:wrap}
.checklist .ctop b{font-size:.94em}
.checklist .ctop .prog{margin-left:auto;font-size:.86em;font-weight:700;color:var(--ink-2)}
.checkitem{display:flex;gap:13px;align-items:flex-start;padding:13px 16px;border-bottom:1px solid var(--line-2);cursor:pointer}
.checkitem:last-of-type{border-bottom:none}
.checkitem:hover{background:#fcfcfc}
.checkitem input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--ok);cursor:pointer}
.checkitem span{font-size:.97em}
.checkitem input:checked + span{color:var(--ink-3);text-decoration:line-through}
.checklist .cfoot{padding:12px 16px;background:#f8f8f8;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}

.reader-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.reader-nav .btn{flex:1;min-width:150px}
/* Every section ends in something to do, never in a full stop. */
.doneline{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px;padding:16px 18px;
  background:var(--ok-tint);border:1px solid var(--ok-line);border-radius:var(--radius);
}
.doneline b{color:#0d4d29}
.doneline .acts{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
/* Index of the parts of a section, each opening on its own page. */
.parts{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.parts > b{font-size:.92em;color:var(--ink-2)}
.parts button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;
  font-family:var(--font);font-size:.98em;font-weight:700;color:var(--ink)}
.parts button:hover{border-color:var(--brand);color:var(--brand)}
.parts button .sid{flex:none}
.parts button span:nth-child(2){flex:1;min-width:0}
.parts button svg{width:18px;height:18px;flex:none;color:var(--ink-3)}

/* ---------- Workspace: the tools open here ---------- */
.ws-body{padding:26px 28px 44px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
@media(max-width:820px){
  .ws-body{padding:20px max(var(--gutter), env(safe-area-inset-right)) 44px max(var(--gutter), env(safe-area-inset-left))}
}
.steps-dots{display:flex;gap:7px;margin-bottom:20px}
.steps-dots i{height:6px;flex:1;border-radius:3px;background:var(--line);transition:background .2s}
.steps-dots i.on{background:var(--calm)}
.qtext{font-size:1.3em;font-weight:800;letter-spacing:-.4px;margin:0 0 6px}
.qhelp{color:var(--ink-2);font-size:.96em;margin:0 0 18px}
/* The goal picked in the first question, carried on the rest, and the documents it asks for. */
.qgoal{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 14px;padding:8px 8px 8px 14px;background:var(--calm-tint);border-radius:10px;font-size:.95em}
.qgoal p{flex:1;min-width:0;margin:0}
.qgoal span{color:var(--ink-2)}
.qgoal b{color:var(--ink)}
.qneed{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:0 12px 12px 0;padding:12px 16px;margin:0 0 18px}
.qneed p{margin:0 0 6px;font-weight:700}
.qneed ul{margin:0;padding-left:20px}
.qneed li{margin:2px 0}
.opt .need{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;background:var(--brand-tint);color:#8a0000;font-size:.78em;font-weight:700;vertical-align:1px}
.opts{display:grid;gap:10px}
.opt{
  display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;
  min-height:var(--tap);padding:15px 18px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface);cursor:pointer;font-family:var(--font);font-size:1em;color:var(--ink);
  transition:border-color .14s,background .14s;
}
.opt:hover{border-color:var(--calm);background:var(--calm-tint)}
.opt[aria-pressed="true"]{border-color:var(--calm);background:var(--calm-tint)}
.opt b{font-weight:700}
.opt small{display:block;color:var(--ink-2);font-size:.86em;font-weight:400;margin-top:3px;line-height:1.5}
.opt .box{
  width:26px;height:26px;border-radius:8px;border:2px solid var(--line);flex:none;margin-left:auto;
  display:grid;place-items:center;color:#fff;align-self:center;
}
.opt .box svg{width:15px;height:15px;opacity:0}
.opt[aria-pressed="true"] .box{background:var(--calm);border-color:var(--calm)}
.opt[aria-pressed="true"] .box svg{opacity:1}
.opt .n{width:26px;height:26px;border-radius:50%;background:var(--wash);color:var(--ink-2);display:grid;place-items:center;font-size:.8em;font-weight:800;flex:none;margin-top:1px}
.ws-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.ws-foot .grow{flex:1;min-width:150px}

.result{border:1.5px solid var(--ok);background:var(--ok-tint);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.result h4{font-size:1.12em;font-weight:800;color:#0d4d29;margin-bottom:8px}
.result ul{margin:0 0 14px;padding-left:0;list-style:none}
.result li{position:relative;padding:7px 0 7px 26px;font-size:.96em}
.result li::before{content:"";position:absolute;left:4px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.result .jump{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.result.stop{border-color:var(--warn);background:var(--warn-tint)}
.result.stop h4{color:#6b4600}
.result.stop li::before{background:var(--warn)}
.legalnote{
  display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;
  border-left:4px solid var(--brand);background:var(--brand-tint);border-radius:0 12px 12px 0;
  font-size:.92em;color:#7e0000;
}
.legalnote svg{width:20px;height:20px;flex:none;margin-top:2px}

/* ---------- Hazlo conmigo: one instruction per screen ---------- */
.lesson{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px}
.lesson .n{display:inline-block;background:var(--calm);color:#fff;border-radius:999px;padding:5px 15px;font-weight:800;font-size:.82em;margin-bottom:16px}
.lesson .instr{font-size:1.3em;line-height:1.55;margin:0 0 16px;font-weight:600}
.lesson .ex{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px;margin:0 0 16px;font-size:.95em}
.ex-bar{display:flex;align-items:center;gap:10px;border:2px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--ink)}
.ex-bar svg{width:18px;height:18px;flex:none;color:var(--ink-2)}
.ex-note{margin:10px 0 0;color:var(--ink-2)}
.ex-mail span{display:block}
.ex-mail .ex-from{font-weight:700}
.ex-mail .ex-subj{color:var(--ink-2);font-size:.9em;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.ex-mail .ex-line{margin-top:6px}
.ex-mail .ex-link{color:#1a0dab;text-decoration:underline;word-break:break-all}
.ex-mail .ex-btn{display:inline-block;margin-top:6px;background:#2d64bc;color:#fff;border-radius:6px;padding:6px 12px;font-weight:700}
.lesson .watch{background:var(--warn-tint);border:1px solid var(--warn-line);border-radius:12px;padding:13px 16px;font-size:.96em;color:#5c3c00;margin:0 0 16px}
.lesson .watch b{display:block;color:#4a3000;margin-bottom:2px}
.lessonlist{display:grid;gap:11px}
.lessonrow{
  display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;cursor:pointer;
  font-family:var(--font);font-size:1em;color:var(--ink);
}
.lessonrow:hover{border-color:var(--calm);background:#fcfcfc}
.lessonrow .ic{width:42px;height:42px;border-radius:12px;background:var(--calm-tint);color:var(--calm);display:grid;place-items:center;flex:none}
.lessonrow .ic svg{width:21px;height:21px}
.lessonrow.done .ic{background:var(--ok-tint);color:var(--ok)}
.lessonrow .t{flex:1;min-width:0}
.lessonrow .t b{display:block;font-weight:800}
.lessonrow .t span{display:block;font-size:.9em;color:var(--ink-2);margin-top:2px}
.lessonrow .go{color:var(--ink-3);flex:none;align-self:center}
.lessonrow .go svg{width:20px;height:20px;display:block}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:.96em;margin-bottom:6px}
.field .hint{display:block;font-weight:400;font-size:.86em;color:var(--ink-2);margin-top:2px}
.field input,.field textarea{
  width:100%;font-family:var(--font);font-size:1em;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--surface);color:var(--ink);min-height:var(--tap);
}
.field textarea{min-height:110px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--calm);box-shadow:0 0 0 3px var(--calm-tint)}
.pickrow{display:flex;flex-wrap:wrap;gap:9px}
.pick{
  border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 16px;
  font-family:var(--font);font-weight:600;font-size:.95em;min-height:46px;cursor:pointer;color:var(--ink);
}
.pick:hover{border-color:var(--calm)}
.pick[aria-pressed="true"]{background:var(--calm);border-color:var(--calm);color:#fff}
.pickgroup{margin-bottom:18px}
.pickgroup h5{font-size:.88em;font-weight:800;color:var(--ink-2);text-transform:uppercase;letter-spacing:.6px;margin:0 0 9px}

/* ---------- Generated resume ---------- */
.doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;line-height:1.65}
.doc h3{font-size:1.5em;font-weight:800;margin:0}
.doc .contacto{color:var(--ink-2);font-size:.94em;margin:4px 0 20px}
.doc h5{
  font-size:.8em;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--brand);
  border-bottom:2px solid var(--brand-tint);padding-bottom:5px;margin:22px 0 10px;
}
.doc ul{margin:0;padding-left:20px}
.doc li{margin-bottom:5px}
.doc .job{font-weight:800;margin:0 0 4px}

/* ---------- Interview practice ---------- */
.qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.qa > summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:800;display:flex;gap:12px;align-items:flex-start;font-size:1.02em}
.qa > summary::-webkit-details-marker{display:none}
.qa .arrow{margin-left:auto;color:var(--ink-3);transition:transform .2s;flex:none}
.qa .arrow svg{width:20px;height:20px;display:block}
.qa[open] .arrow{transform:rotate(90deg)}
.qa .inner{padding:0 18px 18px;border-top:1px solid var(--line-2);padding-top:14px}
.script{background:var(--calm-tint);border:1px solid var(--calm-line);border-radius:12px;padding:14px 16px;margin-bottom:11px}
.script b{display:block;font-size:.78em;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--calm);margin-bottom:4px}
.selfcheck{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:12px}
.selfcheck .h{padding:11px 15px;background:#f8f8f8;border-bottom:1px solid var(--line);font-weight:800;font-size:.9em}
.selfcheck label{display:flex;gap:11px;align-items:flex-start;padding:11px 15px;border-bottom:1px solid var(--line-2);cursor:pointer;font-size:.95em}
.selfcheck label:last-child{border-bottom:none}
.selfcheck input{width:22px;height:22px;flex:none;accent-color:var(--ok);cursor:pointer}

/* ---------- Glossary ---------- */
.term{border:none;background:none;padding:0 1px;font:inherit;color:inherit;cursor:help;border-bottom:2px dotted var(--calm)}
.term:hover{background:var(--calm-tint)}
.gloss{
  position:fixed;z-index:120;max-width:340px;background:var(--deep);color:#fff;border-radius:12px;
  padding:14px 16px;box-shadow:var(--shadow-3);display:none;font-size:.92em;line-height:1.6;
}
.gloss[data-open="true"]{display:block}
.gloss b{display:block;font-size:.74em;letter-spacing:1px;text-transform:uppercase;color:#dddddd;margin-bottom:5px}
.gloss .x{position:absolute;top:8px;right:8px;background:none;border:none;color:#fff;cursor:pointer;padding:4px;line-height:0}
.gloss .x svg{width:16px;height:16px}

/* ---------- Tour / help sheet ---------- */
.tour-veil{position:fixed;inset:0;z-index:130;display:none}
.tour-veil[data-open="true"]{display:block}
.tour-hole{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(14,18,22,.72);transition:all .25s ease}
.tour-card{position:absolute;width:min(440px,calc(100vw - 32px));background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-3);
  display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start}
.tour-card > .ms{width:96px;height:auto;margin-top:6px}
.tour-words{min-width:0}
.tour-card .acts .btn svg{width:16px;height:16px}
@media(max-width:420px){
  .tour-card{grid-template-columns:68px 1fr;gap:10px;padding:16px}
  .tour-card > .ms{width:68px}
}
/* ---------- The tour guide: One Stop's mascot drawn in SVG ----------
   A redrawing, piece by piece, so it can take poses and move: wave, point at what the tour
   shows, thumbs up at the end, blink, and move its mouth while "Léemelo" reads. Only the pieces
   of the current pose are shown. Without motion it keeps the poses and drops the movement. */
.ms{display:block;overflow:visible}
.ms .p{display:none}
.ms[data-pose="saluda"] .p-saluda,
.ms[data-pose="senala"] .p-senala,
.ms[data-pose="pulgar"] .p-pulgar{display:inline}
.ms .ms-name{fill:#ffffff}
.ms .ms-eyes{transform-box:fill-box;transform-origin:center;animation:ms-blink 5s infinite}
.ms .ms-wave{animation:ms-wave .55s ease-in-out infinite alternate}
.ms .ms-point{transition:transform .35s ease}
.ms .ms-talk{opacity:0}
.ms.talking .ms-smile{animation:ms-talk-a .32s steps(1) infinite}
.ms.talking .ms-talk{animation:ms-talk-b .32s steps(1) infinite}
@keyframes ms-blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes ms-wave{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
@keyframes ms-talk-a{0%{opacity:1}50%{opacity:0}}
@keyframes ms-talk-b{0%{opacity:0}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ms .ms-eyes,.ms .ms-wave,.ms.talking .ms-smile,.ms.talking .ms-talk,
  .welcome .ms .ms-wave,.welcome-face,.welcome-bubble{animation:none}
  .ms .ms-point{transition:none}
}
.tour-card .n{font-size:.76em;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--calm)}
.tour-card h4{font-size:1.08em;font-weight:800;margin:6px 0 7px}
.tour-card p{margin:0 0 16px;color:var(--ink-2);font-size:.95em}
.tour-card .acts{display:flex;gap:9px;flex-wrap:wrap}

.sheet{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,18,22,.55)}
.sheet[data-open="true"]{display:flex}
.sheet-card{background:var(--surface);border-radius:var(--radius-lg);max-width:600px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-3)}
.sheet-top{display:flex;gap:14px;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.sheet-top h3{font-size:1.2em;font-weight:800;flex:1}
.sheet-body{padding:22px 24px}
.howstep{display:flex;gap:15px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line-2)}
.howstep:last-of-type{border-bottom:none}
.howstep .n{width:34px;height:34px;border-radius:50%;background:var(--calm);color:#fff;display:grid;place-items:center;font-weight:800;flex:none;font-size:.92em}
.howstep > div > b{display:block;font-weight:800}
.howstep p{margin:4px 0 0;color:var(--ink-2);font-size:.94em}

/* ---------- Help rail: the human way out, always reachable ----------
   A white band, so the red is left to the footer below it. The mascot
   stands beside the way to reach a person: the email first, then the
   phones, with the main office in the page's primary red. */
.helprail{background:var(--surface)}
.helprail .wrap{display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:end;padding-block:36px 40px}
.helprail .mascot{width:132px;justify-self:center}
.helprail .body{display:flex;flex-direction:column;gap:18px}
.helprail b{display:block;font-size:1.3em;font-weight:800;color:var(--ink-2)}
.helprail p{margin:6px 0 0;color:var(--ink-2);font-size:.98em}
.helprail .hours{font-weight:700;color:var(--ink)}
.helprail .acts{display:flex;gap:10px;flex-wrap:wrap}
.helprail .write{margin:0}
.helprail .write a{color:var(--brand);font-weight:700}
@media(max-width:640px){
  .helprail .wrap{grid-template-columns:1fr;gap:12px;padding-block:28px 32px}
  .helprail .mascot{width:96px;justify-self:start}
}

/* ---------- Component footer ----------
   Not a site footer: the page that embeds this already has one. This
   closes the component with the three things that belong to the guide
   itself — the legal warning of chapter 2, the official guide as a PDF download, and the control
   that wipes whatever this device saved. It is dressed as their own
   footer: their red radial gradient and their wave along the top edge,
   filled with the white of the help band above. Every line of text on
   it is pure white (4.7:1 at its brightest), and its buttons are white
   pills, as on their own red bands. */
.compfoot{
  --wave:clamp(30px,5.5vw,72px);
  position:relative;color:#fff;padding-bottom:12px;
  background:radial-gradient(at 50% 0%,var(--brand) 12%,var(--brand-bright) 67%);
}
.compfoot .wave{position:absolute;top:-1px;left:0;width:100%;height:var(--wave);display:block;fill:var(--surface);pointer-events:none}
/* Room for the fixed bar at the bottom of the phone screen, so it never covers the credits. */
@media(max-width:760px){ .compfoot{padding-bottom:96px} }
.compfoot .wrap{padding-block:calc(var(--wave) + 26px) 26px}
.compfoot .row{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.compfoot .legal{flex:1;min-width:280px;font-size:.9em;color:#fff;margin:0}
.compfoot .legal b{color:#fff}
.compfoot .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.compfoot .credit{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.4);font-size:.82em;color:#fff;
}
.compfoot .btn-outline{background:#fff;border-color:#fff;color:var(--brand)}
.compfoot .btn-outline:hover{background:var(--wash);border-color:var(--wash);color:var(--brand)}
.compfoot :focus-visible{outline-color:#fff}
html[data-contrast="high"] .compfoot{background:var(--brand)}
/* High contrast turns --wash black; on this red that would take the white box away on hover. */
html[data-contrast="high"] .compfoot .btn-outline:hover{background:#fff;border-color:#000;color:#000}

/* ---------- Mobile action bar ---------- */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--surface);border-top:1px solid var(--line);
  padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));
  padding-left:max(12px, env(safe-area-inset-left));
  padding-right:max(12px, env(safe-area-inset-right));
  box-shadow:0 -4px 16px rgba(16,20,24,.08);
}
.mobar .row{display:flex;gap:8px}
.mobar a,.mobar button{
  flex:1;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:none;background:none;border-radius:11px;font-family:var(--font);font-size:.72em;font-weight:800;
  color:var(--ink-2);cursor:pointer;text-decoration:none;
}
/* The labels follow the A−/A+ control but stop at 14px. The bar is fixed and four
   buttons share a phone's width: at the largest reading size a label would outgrow its
   button, and a single word like "Contacto" cannot wrap to make room. The page itself
   keeps growing; only this strip is held. */
.mobar a,.mobar button{font-size:clamp(11px, .72em, 14px);transition:background .2s ease,color .2s ease}

/* Marks the section the reader is in. Gray tint, not the brand red: red is kept for calls
   to action, so a red tab would read as a button to press rather than "you are here". */
.mobar a[aria-current="location"]{background:var(--calm-tint);color:var(--calm)}
/* In high contrast the tint is white, so the marker inverts instead of disappearing. */
html[data-contrast="high"] .mobar a[aria-current="location"]{background:#000000;color:#ffffff}

.mobar svg{width:21px;height:21px}
@media(max-width:760px){.mobar{display:block}}

/* ---------- Follow-along reading ---------- */
.is-reading{background:var(--read-hl);border-radius:5px;box-shadow:0 0 0 6px var(--read-hl);scroll-margin:120px}
/* Inside a yellow tip box the usual highlight would vanish; there it turns a deeper amber. */
.warnbox .is-reading,.watch.is-reading,.watch .is-reading,.result.stop .is-reading{background:#ffd43b;box-shadow:0 0 0 6px #ffd43b}
html[data-contrast="high"] .is-reading{background:#ffe600;box-shadow:0 0 0 6px #ffe600;outline:2px solid #000;outline-offset:4px}
.reading-on .reader-body p,.reading-on .reader-body li,
.reading-on .ws-body p,.reading-on .ws-body li,
.reading-on main p,.reading-on main li{cursor:pointer}
body.reading-on .reader-body,body.reading-on .ws-body{padding-bottom:104px}

.readbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:95;
  display:none;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:999px;
  padding:9px 10px 9px 18px;box-shadow:var(--shadow-3);max-width:calc(100vw - 24px);
}
.readbar[data-open="true"]{display:flex}
.readbar[data-scope="panel"]{
  left:auto;right:calc(min(760px, 100vw) / 2);transform:translateX(50%);
  max-width:calc(min(760px, 100vw) - 24px);
}
.readbar .dot{width:9px;height:9px;border-radius:50%;background:var(--read-hl);flex:none;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.readbar .txt{font-size:.86em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.readbar button{
  min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.14);color:#fff;font-family:var(--font);font-weight:700;font-size:.86em;cursor:pointer;flex:none;
}
.readbar button:hover{background:rgba(255,255,255,.28)}
.readbar button.stop{background:var(--brand);border-color:var(--brand)}
.readbar button.stop:hover{background:var(--brand-dark)}
@media(max-width:760px){
  .readbar{bottom:calc(80px + env(safe-area-inset-bottom));padding-left:14px}
  .readbar .txt{font-size:.8em}
  .readbar[data-scope="panel"]{bottom:calc(20px + env(safe-area-inset-bottom))}
}
.icobtn[data-speaking="true"]{background:var(--brand);color:#fff}
@media(max-width:420px){.rbtn .lab{display:none}}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:110px;z-index:140;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-weight:700;font-size:.94em;
  opacity:0;pointer-events:none;transition:opacity .25s;max-width:calc(100vw - 32px);text-align:center;
}
.toast[data-on="true"]{opacity:1}