:root { --vino:#4B1725; --amarillo:#E9C650; --tinta:#1a1a1a; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--vino); color:var(--tinta); min-height:100vh; display:flex; }
.card { background:#fff; margin:auto; width:100%; max-width:440px; min-height:100vh;
  padding:28px 22px; display:flex; flex-direction:column; }
.logo { height:38px; align-self:center; margin-bottom:18px; }
.screen { display:flex; flex-direction:column; gap:14px; }
.hidden { display:none; }
h1 { font-size:1.7rem; margin:.2em 0 0; }
.lead { color:#555; margin:0 0 6px; }
.rating { display:flex; flex-direction:column; gap:6px; }
.rating-label { font-weight:600; }
.stars { display:flex; gap:8px; font-size:2.2rem; cursor:pointer; }
.star { color:#ddd; transition:transform .05s;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.star.on { color:var(--amarillo); }
.star:active { transform:scale(1.2); }
label { display:flex; flex-direction:column; gap:4px; font-weight:600; }
.opt { font-weight:400; color:#888; }
input, textarea { font-size:1.05rem; padding:12px; border:1.5px solid #ccc; border-radius:10px; font-family:inherit; }
input:focus, textarea:focus { outline:none; border-color:var(--vino); }
.btn { margin-top:8px; background:var(--vino); color:#fff; border:none; border-radius:12px;
  padding:15px; font-size:1.1rem; font-weight:700; text-align:center; text-decoration:none;
  cursor:pointer; display:block; }
.btn:disabled { background:#bbb; cursor:not-allowed; }
#google-link { background:var(--amarillo); color:var(--vino); }
.err { color:#c0392b; margin:0; }