/* Cousateca mockup — HTML & CSS only, no JS */
:root{
  --white:#fff;
  --near-white:#f7f7f7;
  --ink:#111;
  --muted:#777;
  --brand:#e02828;
  --brand-dark:#c51f1f;
  --gold:#ffb400;
  --line:#e7e7e7;
  --chip:#f1f1f1;
  --accent:#e02828;
  --font:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
  accent-color: var(--accent);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--white);
  font-family:var(--font);
  line-height:1.25;
}

/* Header */
.site-header{
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap:1rem;
  align-items:center;
  padding:0.75rem 1rem;
  border-bottom:2px solid var(--line);
}
.brand{display:flex; align-items:center; gap:.5rem}
.logo{font-weight:700; letter-spacing:.2px}
.icon-btn{width:36px;height:36px;border:1.5px solid var(--ink);background:transparent;border-radius:.5rem;display:grid;place-items:center;cursor:pointer}
.hamburger{width:16px;height:2px;background:var(--ink); position:relative; display:block}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink)}
.hamburger::before{top:-5px}.hamburger::after{top:5px}
.searchbar input{width:100%;padding:.65rem .75rem;border:1.5px solid var(--ink);border-radius:.6rem;outline:none}
.nav-actions{display:flex;gap:.5rem;justify-self:end}
.pill{background:var(--brand);color:#fff;border:none;padding:.6rem .9rem;border-radius:.6rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.pill .caret{font-size:.9em; opacity:.9}
.pill:hover{background:var(--brand-dark)}

/* Canvas */
.canvas{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2rem;
  padding:1.75rem 1rem 2.5rem;
}
.panel{min-width:0}
.sheet{
  border:1.5px solid var(--ink);
  border-radius:.9rem;
  padding:1.25rem 1rem;
  background:#fff;
}
.sheet.easy{padding-top:.75rem}

.row{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.row-title{gap:1.25rem; margin-bottom:.5rem}
.star{color:var(--gold); font-size:1.25rem}
.radio-chip,input[type="checkbox"] + span{cursor:pointer}
.radio-chip input,
.check-chip input{margin-right:.35rem}
.field{margin-top:.35rem}
.field-label{font-weight:700; letter-spacing:.3px}
.help{
  display:inline-grid; place-items:center;
  width:18px;height:18px;border:1.5px solid var(--ink);
  border-radius:50%; font-size:.8rem; margin-left:.35rem
}
.text{
  flex:1 1 260px;
  min-width:240px;
  padding:.55rem .6rem;
  border:1.5px solid var(--ink);
  border-radius:.5rem;
}
.badges{margin:.35rem 0 .25rem}
.check-chip,
.circle-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--chip);
  padding:.45rem .6rem;
  border-radius:.6rem;
  border:1px solid var(--line);
  font-weight:600;
}
.check-chip.small{padding:.25rem .45rem; font-weight:600}

.circle-chip{border-radius:999px;padding:.35rem .75rem}
.circle-chip span{font-weight:700;}

.upload{margin-top:.25rem}
.upload-btn{
  display:inline-block;
  padding:.55rem .85rem;
  border:1.5px solid var(--ink);
  border-radius:.6rem;
  cursor:pointer;
  user-select:none;
}
.sep{border:0;border-top:1.5px solid var(--line); margin:1rem 0}

.group{margin:.75rem 0}
.group legend{font-weight:700; padding:0 .25rem}
.options{
  display:grid;
  gap:.5rem .75rem;
  margin-top:.6rem;
}
.options.three{grid-template-columns: repeat(3, minmax(140px,1fr));}
.options.five{grid-template-columns: repeat(5, minmax(120px,1fr));}
.options label{display:flex; align-items:center; gap:.45rem; white-space:nowrap}

.total{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1.5px solid var(--line);
  padding-top:1rem; margin-top:.5rem;
  font-weight:700;
}
.stars{color:var(--gold); letter-spacing:.35rem}

.list-choices{display:flex; flex-direction:column; gap:1rem; margin:.25rem 0 1rem}
.row-list{display:flex; align-items:center; gap:.6rem; font-weight:700;}

.mt{margin-top:.25rem}
.block{margin: .6rem 0 .25rem; font-size:1rem; letter-spacing:.2px}
.muted{color:var(--muted)}

.chips{gap:.5rem}

.buttons{display:flex; align-items:center; gap:.75rem; margin-top:.5rem}
.inline{display:flex; align-items:center; gap:.5rem}
.cta{
  background:var(--brand);
  color:#fff;
  border:none;
  padding:.65rem 1rem;
  border-radius:.7rem;
  font-weight:700;
  cursor:pointer;
}
.cta:hover{background:var(--brand-dark)}
.percent{
  width:90px;
  padding:.45rem .55rem;
  border:1.5px solid var(--ink);
  border-radius:.5rem;
}

.site-footer{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2rem;
}
.footer-block{
  background:var(--brand);
  color:#fff;
  text-align:center;
  padding:1.25rem 1rem;
  font-size:1.5rem;
  font-weight:800;
}

/* Responsive */
@media (max-width: 960px){
  .canvas{grid-template-columns:1fr}
  .options.five{grid-template-columns: repeat(3,minmax(120px,1fr));}
}
@media (max-width: 520px){
  .site-header{grid-template-columns:1fr; gap:.75rem}
  .nav-actions{justify-self:start}
  .options.three{grid-template-columns: 1fr}
  .options.five{grid-template-columns: 1fr 1fr}
}