/* Pantalla completa, TODO blanco, sin scroll */
:root{
  --text:#2d2f31;
  --muted:#242424;
  --border:#e6e9f0;
  --accent:#c72c53;        /* color del botón */
  --star:#f5b301;          /* dorado estrellas */

  /* NUEVO: variables de tamaño responsivo */
  --star-size: clamp(32px, 8.8vw, 44px);   /* tamaño de cada estrella */
  --star-gap:  clamp(10px, 2.8vw, 16px);   /* separación entre estrellas */
  --footer-lift: 34px;                     /* “sube” el botón (padding inferior) */
}

html, body {
  height: 100%;
  margin: 0;
  background: #ffffff;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  overflow: hidden;        /* sin scroll */
}

/* Layout de una sola pantalla (header, contenido, botón) */
.screen {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 10px 14px;
}

/* Título centrado */
.header { display:grid; place-items:center; }
.header h1{
  margin: 4px 0 8px;
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 800;
  letter-spacing: .2px;
  color: rgb(20, 20, 20);
}

/* Contenido vertical compacto */
.content{
  width: min(520px, 100%);
  justify-self: center;
  display: grid;
  grid-auto-rows: minmax(46px, auto);
  gap: 12px;
  align-content: start;
}

/* Campo visible */
.field{ display:grid; gap:6px; }
.lbl{ color:var(--muted); font-size:clamp(18px,3.3vw,13px); }
.input{
  width:100%; height:44px; padding:8px 12px;
  font-size:clamp(14px,3.8vw,15px);
  border:1px solid var(--border);
  border-radius:12px; background:#fff;
}

/* Preguntas (vertical) */
.qs{ display:grid; gap:14px; }
.q{
  display:grid; gap:8px;
  padding:6px 0 10px;
  border-bottom:1px dashed var(--border);
}
.qlabel{
  font-size:clamp(15px,4.2vw,17px);
  font-weight:600;
}

/* Estrellas debajo y centradas */
.stars{
  display:inline-flex;
  justify-content:center;
  gap: var(--star-gap);        /* ← usa la variable */
  user-select:none;
  direction: rtl;              /* llena hacia la izquierda */
}
.stars input{ display:none; }
.stars label{
  font-size: var(--star-size); /* ← tamaño grande y responsivo */
  line-height:1;
  cursor:pointer;
  color:#808080;
  transition:transform .1s, color .1s;
}
.stars label:hover,
.stars label:hover ~ label{ color:var(--star); transform:translateY(-1px) scale(1.05); }
.stars input:checked ~ label{ color:var(--star); }

/* Botón bajo fijo (más arriba) */
.footer{
  display:grid; place-items:center;
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--footer-lift)); /* ← lo sube */
}
.btn{
  width:min(520px, 60%);        /* puedes subir a 70–80% si quieres más ancho */
  height:52px;                  /* un poco más alto */
  appearance:none; border:1px solid var(--accent); background:var(--accent);
  color:#fff; font-weight:800; letter-spacing:.2px;
  border-radius:14px; font-size:clamp(15px,4vw,17px); cursor:pointer;
  box-shadow:0 10px 24px rgba(235, 37, 80, 0.22);
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Overlay envío / gracias (permanece en éxito) */
.overlay{
  position:fixed; inset:0; background:#ffffff;
  display:none; align-items:center; justify-content:center; z-index:1000;
}
.overlay.show{ display:flex; }
.overlay-box{
  width:min(350px,70vw); min-height:50px;
  border-radius:18px; border:1px solid var(--border);
  background:#fff; box-shadow:0 14px 42px rgba(0,0,0,.14);
  padding:28px 30px; display:flex; align-items:center; justify-content:center; gap:16px;
}
.overlay-box.success{ background:#d32f2f; color:#fff; border-color:transparent; }
.overlay-msg{ font-size:clamp(18px,5vw,22px); font-weight:800; text-align:center; }

/* Spinner */
.spinner{
  width:30px; height:30px; border-radius:50%;
  border:3px solid #e5e7eb; border-top-color:var(--accent);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* Ajustes por altura: que quepa en pantallas pequeñas */
@media (max-height: 700px) {
  :root{
    --star-size: clamp(28px, 8vw, 36px);
    --footer-lift: 24px;
  }
  .btn{ height:48px; }
}
@media (max-height: 600px) {
  :root{
    --star-size: clamp(24px, 7vw, 30px);
    --footer-lift: 16px;
  }
  .header h1{ font-size: clamp(18px, 5vw, 22px); }
  .input{ height: 40px; }
}