/* ============================================================================
   H-GO · ENCUESTA DE SERVICIO · estilos de la hoja digital
   ----------------------------------------------------------------------------
   Es la hoja de papel, pero en el teléfono del cliente: banda de carbón con
   el logo, papel claro debajo y Skratch Punk en los titulares. Mismo idioma
   que la encuesta de experiencia (14-ENCUESTA) para que el cliente sienta que
   es la misma empresa. El tablero de resultados sí va oscuro, como el CRM.

   Todo se toca con el dedo: las casillas del papel son botones grandes,
   nunca checkboxes chiquitos.
   ============================================================================ */

@font-face {
  font-family: 'SkratchPunk';
  src: url('assets/fonts/Skratch_Punk.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}

/* ----------------------------------------------------------------------------
   La paleta va HONDA a propósito, no brillante. Dos razones:

   1. El logo lleva el "GO" en blanco. Sobre claro se pierde, así que vive
      sobre la banda de carbón; y si el resto de la pantalla fuera de colores
      encendidos, la banda se vería como un parche. Con la paleta calmada, el
      logo es lo más fuerte de la pantalla, que es como debe ser.
   2. Se contesta con el teléfono en la mano, muchas veces al rayo del sol,
      recién bajando de la actividad. El verde neón sobre blanco deslumbra.

   Los cuatro colores de la escala (excelente · buena · regular · mala) están
   escogidos para que el texto BLANCO encima pase 4.5:1. No los aclares.
   ---------------------------------------------------------------------------- */
:root {
  --verde:       #1F6B1C;   /* excelente, y el color de la marca en texto */
  --verde-hondo: #17521A;
  --verde-claro: #E3EDDD;   /* relleno suave, para avisos */
  --olivo:       #517D1E;   /* buena */
  --ambar:       #9A6A00;   /* regular */
  --rojo:        #A81F26;   /* mala */
  --fuego:       #C2431A;

  --carbon:      #14170F;   /* la banda del logo */
  --tinta:       #12140F;
  --tinta-2:     #4A5147;
  --tinta-3:     #6D7469;
  --papel:       #ffffff;
  --fondo:       #ECEFE8;
  --borde:       #DDE2D8;
  --borde-2:     #B9C1B2;

  --f-display: 'SkratchPunk', system-ui, sans-serif;
  --f-texto: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-num: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --radio: 16px;
  --suave: cubic-bezier(0.23, 1, 0.32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-texto);
  background: var(--fondo);
  color: var(--tinta);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 40px;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--verde-hondo); }
[hidden] { display: none !important; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--verde); color: #fff; }

.display { font-family: var(--f-display); font-weight: 400; line-height: 0.95; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.verde { color: var(--verde); }

.caja { max-width: 620px; margin: 0 auto; padding: 0 16px; }

/* =============================== LA BANDA ===============================
   El logo NUNCA va sobre fondo claro: su "GO" es blanco y se pierde. */
.banda {
  background: var(--carbon);
  border-bottom: 4px solid var(--verde);
  padding: 20px 16px;
  display: grid; place-items: center;
}
.banda .logo { width: auto; height: 52px; }

.placa {
  display: inline-grid; place-items: center;
  background: var(--carbon);
  border-radius: 14px;
  padding: 14px 22px;
}
.placa .logo { width: auto; height: 40px; }

/* ============================== ENCABEZADO ============================== */
header { text-align: center; padding: 28px 0 6px; }
header h1 { font-size: clamp(38px, 11vw, 58px); margin-bottom: 12px; text-wrap: balance; }
.entrada { color: var(--tinta-2); font-size: 15px; margin: 0 auto; max-width: 38ch; }

/* ================================ AVANCE ================================ */
.avance {
  position: sticky; top: 0; z-index: 5;
  background: var(--fondo);
  padding: 14px 0 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--tinta-2);
  box-shadow: 0 10px 10px -10px rgba(20, 23, 15, 0.12);
}
.avance .riel { flex: 1; height: 6px; background: var(--borde-2); border-radius: 99px; overflow: hidden; }
.avance .lleno { display: block; height: 100%; width: 0%; background: var(--verde); border-radius: 99px; transition: width 0.25s var(--suave); }

/* ============================== LOS BLOQUES ============================== */
.bloque, .pregunta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 16px;
  margin-bottom: 12px;
}
.pregunta.contestada { border-color: var(--verde); }
.pregunta.importante { border-width: 2px; }

.titulo-bloque {
  font-family: var(--f-display); font-weight: 400; font-size: 26px;
  margin-bottom: 16px; color: var(--tinta);
}
.pregunta h2 { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.pregunta .ayuda { font-size: 13px; color: var(--tinta-2); margin-bottom: 12px; }
.pregunta h2 + .opciones, .pregunta h2 + .campo { margin-top: 12px; }
.num-p {
  display: inline-grid; place-items: center;
  width: 25px; height: 25px; margin-right: 6px;
  border: 1.5px solid var(--verde); border-radius: 99px;
  font-size: 13px; font-weight: 700; color: var(--verde-hondo);
  vertical-align: 2px;
}
.nota {
  font-size: 13px; color: #5C4405;
  background: #FBF1DC;
  border: 1px solid #E3CE9B;
  border-radius: 12px; padding: 10px 12px; margin-bottom: 12px;
}
.nota b { color: #4A3604; }

/* ================================ CAMPOS ================================ */
.campo { display: block; margin-bottom: 14px; }
.campo:last-child { margin-bottom: 0; }
.campo > span {
  display: block; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 600; margin-bottom: 6px;
}
input[type=text], input[type=number], input[type=tel], textarea {
  width: 100%;
  background: #fbfcfa;
  border: 1px solid var(--borde-2);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.2s var(--suave), background 0.2s var(--suave);
}
input:focus, textarea:focus { outline: none; border-color: var(--verde); background: #fff; }
textarea { resize: vertical; min-height: 60px; }
/* el asterisco de lo que sí se pide, y el campo cuando falta */
.pide { color: var(--rojo); font-weight: 700; }
.campo.falta input { border-color: var(--rojo); background: #FDF4F4; }
.campo.falta .ayuda-campo { color: var(--rojo); }

.ayuda-campo {
  display: block; margin-top: 6px;
  font-size: 12px; line-height: 1.4; color: var(--tinta-3);
  text-transform: none; letter-spacing: 0;
}
.renglon { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.campo.escondido { display: none; }
.campo.escondido.abierto { display: block; margin-top: 12px; }

/* =============================== OPCIONES =============================== */
.opciones { display: grid; gap: 8px; }
.opciones.dos   { grid-template-columns: 1fr 1fr; }
.opciones.tres  { grid-template-columns: repeat(3, 1fr); }
.opciones.multi { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.opciones.calif { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px) { .opciones.calif { grid-template-columns: repeat(5, 1fr); } }

.op {
  position: relative;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; padding: 8px 10px;
  background: #F8FAF6;
  border: 1.5px solid var(--borde-2);
  border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--tinta-2);
  line-height: 1.2;
  transition: all 0.15s var(--suave);
}
.op:active { transform: scale(0.97); }
.op[aria-pressed="true"] {
  background: var(--verde); border-color: var(--verde); color: #fff;
  box-shadow: 0 2px 8px rgba(18, 20, 15, 0.20);
}

/* La escala del papel, de mejor a peor. Verde -> olivo -> ámbar -> rojo, todos
   hondos: el texto blanco encima pasa 4.5:1 en los cuatro. */
.op[data-v="excelente"][aria-pressed="true"] { background: var(--verde); border-color: var(--verde); }
.op[data-v="buena"][aria-pressed="true"]     { background: var(--olivo); border-color: var(--olivo); }
.op[data-v="regular"][aria-pressed="true"]   { background: var(--ambar); border-color: var(--ambar); }
.op[data-v="mala"][aria-pressed="true"]      { background: var(--rojo);  border-color: var(--rojo); }
.op[data-v="na"] { font-weight: 500; color: var(--tinta-3); }
.op[data-v="na"][aria-pressed="true"] { background: #5A6157; border-color: #5A6157; color: #fff; }

/* =============================== ENVIAR =============================== */
.aviso { border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 12px; }
.aviso.malo { background: #F8E5E6; border: 1px solid #E0AFB2; color: #8A181E; }

.boton {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 14px 22px;
  background: var(--verde); color: #fff;
  border-radius: 99px; border: 0;
  font-size: 17px; font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(18, 20, 15, 0.22);
  transition: transform 0.15s var(--suave), opacity 0.15s var(--suave);
}
.boton:active { transform: scale(0.98); }
.boton[disabled] { opacity: 0.55; box-shadow: none; }
.boton.enviar { width: 100%; margin-top: 6px; }
.legal { font-size: 12px; color: var(--tinta-3); text-align: center; margin-top: 14px; }

/* =============================== GRACIAS =============================== */
.tarjeta-gracias {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 22px;
  padding: 34px 20px 28px;
  margin-top: 32px;
  text-align: center;
}
.tarjeta-gracias .palomita { margin-bottom: 4px; }
.tarjeta-gracias h1 { font-size: clamp(40px, 12vw, 60px); margin: 8px 0 12px; }
.tarjeta-gracias .boton { display: inline-flex; margin-top: 14px; }
#resena { margin-top: 22px; }
.palomita svg { width: 62px; height: 62px; fill: none; stroke: var(--verde); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.palomita svg circle { opacity: 0.30; }

/* ---- el premio: la bebida de cortesía. Es lo que el cliente le enseña a
   recepción, así que va grande y en el verde de la marca, con el folio
   adentro como vale. ---- */
.regalo {
  margin: 22px -4px 8px;
  padding: 24px 18px 18px;
  background: var(--verde);
  color: #fff;
  border-radius: 18px;
  text-align: center;
}
.regalo-et {
  display: inline-block;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.35); border-radius: 99px;
  padding: 4px 12px; margin-bottom: 12px;
}
.regalo h2 { font-size: clamp(30px, 8.5vw, 42px); line-height: 0.98; margin-bottom: 10px; color: #fff; text-wrap: balance; }
.regalo-texto { font-size: 15px; color: rgba(255,255,255,0.9); margin-bottom: 12px; }
.bebidas {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 18px;
}
.bebidas li {
  background: #fff; color: var(--verde-hondo);
  font-weight: 700; font-size: 15px;
  padding: 9px 16px; border-radius: 99px;
}

.folio-caja {
  display: grid; gap: 4px; justify-items: center;
  background: #fff;
  border-radius: 14px;
  padding: 16px; margin: 0;
  color: var(--tinta);
}
.folio-et { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde-hondo); font-weight: 700; }
.folio { font-size: 34px; letter-spacing: 0.06em; color: var(--tinta); }
.folio-pie { font-size: 12px; color: var(--tinta-2); max-width: 32ch; line-height: 1.4; }

.redes { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px; font-size: 14px; font-weight: 600; }

.pie-empresa {
  max-width: 620px; margin: 26px auto 0; padding: 0 16px;
  display: flex; gap: 10px 18px; flex-wrap: wrap; justify-content: center;
  font-size: 12px; color: var(--tinta-3);
}
.pie-empresa b { color: var(--tinta-2); }