/* Blanco + amarillo — consistente con el resto del manual */
:root{
  --bg:#ffffff;
  --text:#1b1b1b;
  --muted:#555;
  --brand:#ffd24d;
  --brand-dark:#e5b900;
  --line:#e9e9e9;
  --card:#ffffff;
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --radius:14px;
  --max:1200px;
  --gap:20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

/* Header */
.hero{position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--line)}
.hero .inner{
  margin:0 auto; max-width:var(--max);
  padding:14px var(--gap);
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap);
}
.brand{display:flex; gap:14px; text-decoration:none; color:var(--text); align-items:center}
.logo{width:46px; height:46px; object-fit:contain}
.titles h1{margin:0; font-size:20px}
.titles .subtitle{margin:0; color:var(--muted); font-size:13px}

.tools{display:flex; gap:10px; align-items:center}
.btn{
  border:1px solid var(--brand);
  background:var(--brand); color:#111;
  padding:8px 14px; border-radius:12px; cursor:pointer;
  font-weight:600;
  transition:.18s transform ease,.18s filter ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(0.98)}
.search{
  width:240px; padding:8px 12px; border:1px solid #ddd; border-radius:12px; outline:none;
}
.search:focus{border-color:var(--brand-dark)}

/* Layout */
.wrap{margin:28px auto; max-width:var(--max); padding:0 var(--gap)}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  margin-bottom:22px;
}
.note-card{border-left:6px solid var(--brand)}
.card h2{margin:0 0 10px}
.note{color:var(--muted)}
a{color:#0b5bd3; text-underline-offset:3px}
a:hover{text-decoration:underline}

/* FAQ items */
.faq-list{display:grid; gap:10px}
.faq{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.q{
  width:100%; text-align:left; background:#fff;
  padding:12px 14px; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  font-weight:600;
}
.q:hover{background:#fdf7d6}
.q:focus-visible{outline:2px solid var(--brand-dark); outline-offset:2px}
.marker{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--brand); color:#111; font-weight:800;
}
.a{
  display:none; padding:10px 14px; border-top:1px solid var(--line); color:#222;
}
.faq.open .a{display:block}
.faq.open .marker{content:"−";}

/* Footer */
.foot{color:var(--muted); text-align:center; margin:30px 0 10px}

/* A11y */
a:focus-visible,.btn:focus-visible,.search:focus-visible{outline:2px solid var(--brand-dark); outline-offset:2px}