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

   The review strip, the reading toolbar, the cover (logo, title, introduction,
   notice and "Ir a la guía completa") with the mascot's welcome, and the privacy note.

   Sections in this file:
   INTEGRATION NOTE

   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.
   ========================================================================== */

/* ============================================================
   INTEGRATION NOTE
   This page is the component, not a site page. It carries no site
   header, no main menu and no site footer, because the page
   that embeds it already draws those. This strip only exists
   to say so while the mock is under review; it is not part of
   the design and it disappears on print.
   ============================================================ */
.mockframe{background:#f2f2f2;border-bottom:1px dashed #cccccc;font-size:.82em;color:var(--ink-2)}
.mockframe .wrap{display:flex;gap:14px;align-items:center;justify-content:center;padding-block:9px;flex-wrap:wrap}
.mockframe button{
  border:1px solid #cccccc;background:transparent;border-radius:8px;padding:4px 11px;
  font-family:var(--font);font-size:.95em;font-weight:700;color:var(--ink-2);cursor:pointer;min-height:30px;
}
.mockframe button:hover{background:#fff}
.mockframe[hidden]{display:none}

/* ---------- Accessibility bar: always on screen, never in a menu ---------- */
.toolbar{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-1)}
.toolbar .row{display:flex;align-items:center;gap:12px;min-height:60px;flex-wrap:wrap;padding-block:8px}
.toolbar .who{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.toolbar .who .oct{width:30px;height:30px;flex:none}
.toolbar .who b{font-size:.86em;font-weight:800;letter-spacing:-.2px;white-space:nowrap}
.tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolgroup{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:12px;padding:4px;background:var(--surface)}
.toolgroup .lab{font-size:.78em;font-weight:700;color:var(--ink-3);padding:0 8px;text-transform:uppercase;letter-spacing:.4px}
.icobtn{
  min-width:44px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:none;background:transparent;border-radius:9px;cursor:pointer;font-family:var(--font);
  font-weight:800;color:var(--ink-2);font-size:.95em;padding:0 10px;
}
.icobtn:hover{background:var(--wash);color:var(--ink)}
.icobtn:disabled{opacity:.32;cursor:default;background:transparent}
.icobtn[aria-pressed="true"]{background:var(--calm);color:#fff}
.icobtn svg{width:18px;height:18px}
@media(max-width:900px){
  .toolbar .who b{display:none}
  .toolgroup .lab{display:none}
}

/* ---------- Hero ---------- */
.hero{background:var(--surface);border-bottom:1px solid var(--line)}
.hero .wrap{padding-block:38px 32px}
.eyebrow{display:inline-block;font-size:.76em;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--brand);background:var(--brand-tint);border-radius:999px;padding:6px 14px}
/* Headings in their gray (#54595F, 7.1:1), as on every page of their site. */
.hero h1{font-size:clamp(30px,5.4vw,48px);font-weight:800;letter-spacing:-1px;margin:16px 0 0;max-width:16ch;color:var(--ink-2)}
.hero .rule{height:4px;width:78px;background:var(--brand);border-radius:2px;margin:18px 0 0}
.hero .lead{font-size:1.1em;color:var(--ink-2);max-width:60ch;margin:16px 0 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
/* Where the guide applies: a notice, not a footnote, because it decides whether it is for you. */
.hero .scope{max-width:60ch;margin:14px 0 0;padding:8px 14px;border-left:4px solid var(--brand);background:var(--brand-tint);border-radius:0 10px 10px 0;font-size:.98em;color:var(--ink-2)}
.hero .scope b{color:var(--ink)}

/* The mascot's welcome: a speech bubble beside it. Under the introduction on narrow screens;
   from 1100 px it moves out towards the right edge of the hero, clear of the introduction. */
.welcome{display:flex;align-items:flex-end;gap:12px;margin:22px 0 0;max-width:560px}
/* The figure is a button: tapping it leads to the contact details, as the bubble's own button does. */
.welcome-face{flex:none;width:88px;padding:0;border:0;background:transparent;border-radius:14px;cursor:pointer}
.welcome-face .ms{width:100%;height:auto}
.welcome-bubble{position:relative;flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px 12px;box-shadow:0 6px 18px -8px rgba(0,0,0,.25)}
.welcome-bubble::before{content:"";position:absolute;left:-8px;bottom:24px;width:14px;height:14px;background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.welcome-bubble p{margin:0;font-size:.98em;color:var(--ink-2);line-height:1.55}
.welcome-bubble p + p{margin-top:8px}
.welcome-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.welcome-acts .btn svg{width:18px;height:18px}
/* A phone has no room for the two side by side: the mascot stands on top of its bubble. */
@media(max-width:560px){
  .welcome{flex-direction:column;align-items:flex-start;gap:10px}
  .welcome-bubble{flex:none;width:100%}
  .welcome-bubble::before{left:36px;top:-8px;bottom:auto;border-bottom:0;border-top:1px solid var(--line)}
}
@media(min-width:1100px){
  /* Measured from the hero, not the centred column, so it can leave the text behind; on very wide
     screens it stops 140 px past the column instead of drifting to the far edge. */
  .hero{position:relative}
  .hero .lead,.hero .scope{max-width:min(60ch, calc(100% - 500px))}
  .welcome{position:absolute;top:38px;right:max(24px, env(safe-area-inset-right), calc(50% - 700px));margin:0;width:450px;flex-direction:row-reverse}
  .welcome-face{width:120px}
  .welcome-bubble::before{left:auto;right:-8px;border-left:0;border-bottom:0;border-right:1px solid var(--line);border-top:1px solid var(--line)}
}
/* It fades in slowly enough to be noticed and the bubble follows, then it stays alive: it bobs,
   blinks and waves again every so often. Without motion, it is simply there. */
.welcome-face{animation:welcome-in 1.4s ease-out both, welcome-bob 3.2s ease-in-out 1.4s infinite}
.welcome .ms .ms-wave{animation:welcome-wave 15s ease-in-out 1.6s infinite}
.welcome-bubble{animation:welcome-fade 1.2s ease-out .8s both}
@keyframes welcome-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes welcome-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes welcome-wave{0%,18%,100%{transform:rotate(0)}3%,9%,15%{transform:rotate(-12deg)}6%,12%{transform:rotate(12deg)}}
@keyframes welcome-fade{from{opacity:0}to{opacity:1}}
/* The One Stop logo heads the guide. The print sheets reuse this same image, so it is
   downloaded only once. */
.hero .brandlogo{display:block;width:auto;height:68px;margin:0 0 24px}
@media(max-width:600px){ .hero .brandlogo{height:48px;margin-bottom:20px} }

/* Privacy first: for this reader distrust is the first obstacle, not the
   last, so the promise sits in the reading flow and not in the footer.
   The way to erase what was saved sits right under the promise, where it
   is read, and not only at the foot of the page. */
.privacy{
  display:flex;gap:14px;align-items:flex-start;margin:26px 0 0;padding:16px 18px;
  background:var(--calm-tint);border:1px solid var(--calm);border-radius:var(--radius);
}
.privacy svg{width:24px;height:24px;color:var(--calm);flex:none;margin-top:2px}
.privacy .privacy-body{flex:1;min-width:0}
.privacy p{margin:0;font-size:.95em;color:#3f4347}
.privacy b{color:#26292c}
.privacy .btn{margin-top:12px}

/* ---------- Sections ---------- */
section{padding:44px 0}
section.tight{padding:30px 0}
section.alt{background:var(--surface);border-block:1px solid var(--line)}
.head{margin-bottom:22px}
.head h2{font-size:clamp(22px,3.4vw,30px);font-weight:800;letter-spacing:-.5px;color:var(--ink-2)}
.head p{color:var(--ink-2);margin:8px 0 0;max-width:64ch}
.head .kicker{display:block;font-size:.76em;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--brand);margin-bottom:8px}