/* Blanco + amarillo — consistente con A1–A4, B, C1–C3, D, E */
: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);
  flex-wrap:wrap; /* permite que baje a 2 líneas en pantallas chicas */
}
.brand{
  display:flex; gap:14px; text-decoration:none; color:var(--text); align-items:center;
  min-width:0; /* evita desbordes del título */
}
.logo{width:46px; height:46px; object-fit:contain; flex:0 0 auto}
.titles{min-width:0}
.titles h1{margin:0; font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.titles .subtitle{margin:0; color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis}

.tools{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  max-width:100%;
}
.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:220px; padding:8px 12px; border:1px solid #ddd; border-radius:12px;
  outline:none; max-width:100%;
}
.search:focus{border-color:var(--brand-dark)}

/* ---------- Layout ---------- */
.wrap{margin:28px auto; max-width:var(--max); padding:0 var(--gap)}
.group{margin:26px 0}
.group h2{margin:0 0 10px}

/* ---------- Cards / Grid ---------- */
.grid.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
}
@media (max-width:1200px){ .grid.cards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .grid.cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .grid.cards{grid-template-columns:1fr} }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.card h3{margin:10px 0 6px; font-size:16px}
.card p{margin:0; color:var(--muted); font-size:14px}

.card.link{
  display:block; color:inherit; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card.link:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08)}
.card .thumb{
  width:100%; height:140px; border:1px solid var(--line);
  border-radius:12px; overflow:hidden; background:#fff;
}
.card .thumb img{width:100%; height:100%; object-fit:cover}

.note-card{border-left:6px solid var(--brand)}

/* ---------- 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}

/* ===================================================================
   MEJORAS RESPONSIVE (sin cambiar el look)
   =================================================================== */

/* Evita scroll horizontal en móvil */
html, body { overflow-x:hidden }

/* 1024px: tipografías levemente más compactas */
@media (max-width:1024px){
  .titles h1{ font-size:19px }
  .titles .subtitle{ font-size:12px }
}

/* 900px: header en dos líneas de forma ordenada */
@media (max-width:900px){
  .hero .inner{ gap:12px }
  .brand{ flex:1 1 320px }
  .tools{ flex:1 1 100%; justify-content:flex-start }
  .btn{ padding:8px 12px }
}

/* 680px: paddings y tamaños optimizados, imágenes/miniaturas fluidas */
@media (max-width:680px){
  .wrap{ padding:0 14px }
  .hero .inner{ padding:12px 14px }
  .logo{ width:40px; height:40px }
  .titles h1{ font-size:18px }
  .card{ padding:14px }
  .card .thumb{ height:120px }
  .search{ width:100% }        /* buscador a ancho completo cuando baja */
}

/* 420px: botones se apilan al 100% si no entran */
@media (max-width:420px){
  .btn{ width:100% }
  .tools{ gap:8px }
  .titles h1{ font-size:17px }
}