/* Tipografía retro: Px437 (CP437 puro) + PxPlus como respaldo para Á Í Ó Ú × */
/* v0.7: Pixel Operator y Pixel Operator 8 (Jayvee Enaguas, CC0 1.0: fonts/PixelOperator-CC0.txt) */
@font-face {
  font-family: "Pixel Operator";
  src: url("../fonts/PixelOperator.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "Pixel Operator 8";
  src: url("../fonts/PixelOperator8.ttf") format("truetype");
  font-display: block;
}
/* v0.27 (T13, F6): la Pixel Operator 8 con Á É Í Ó Ú Ö Ü mayúsculas de verdad (acento por encima de la altura de caja, antes
   salían como minúsculas: "MISIóN"). Solo la usa el HTML (modales, formularios); el canvas fabrica la tilde en base.js. */
@font-face {
  font-family: "Pixel Operator 8 ES";
  src: url("../fonts/PixelOperator8ES.ttf?v=2") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "Px437 IBM VGA 8x16";
  src: url("../fonts/Px437_IBM_VGA_8x16.ttf") format("truetype");
  font-display: block;
}
/* HUD compacto: CGA 8x8, misma familia retro en tamaño nativo chico */
@font-face {
  font-family: "Px437 IBM CGA";
  src: url("../fonts/Px437_IBM_CGA.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "PxPlus IBM VGA 8x16";
  src: url("../fonts/PxPlus_IBM_VGA_8x16.ttf") format("truetype");
  font-display: block;
}
/* v0.11.5: Compaq Thin 8x16 (The Ultimate Oldschool PC Font Pack de VileR, int10h.org, CC BY-SA 4.0:
   fonts/Oldschool-PC-Fonts-LICENSE.txt). Trazo de 1 px: el DOS delgado que pidió Rafa. CP437 puro,
   así que Á É Í Ó Ú caen a la PxPlus VGA. */
@font-face {
  font-family: "Px437 CompaqThin 8x16";
  src: url("../fonts/Px437_CompaqThin_8x16.ttf") format("truetype");
  font-display: block;
}
/* v0.11.8: Pixellari (Zacchary Dempsey-Plante, gratis para uso comercial): la pixel sans estilo
   Kairosoft que eligió Rafa tras la ronda 3. Nativa de 16 px, acentos completos. */
@font-face {
  font-family: "Pixellari";
  src: url("../fonts/Pixellari.ttf") format("truetype");
  font-display: block;
}
/* v0.11.9: 04b03 ES, la elegida FINAL de Rafa: la 04b03 de Yuji Oshimoto (estilo Game Dev Story)
   con los 17 glifos del español fabricados en casa en el mismo grid de 8 px. */
@font-face {
  font-family: "04b03 ES";
  src: url("../fonts/04B03_ES.ttf") format("truetype");
  font-display: block;
}

:root {
  --fondo: #0c1018; --panel: #141a26; --borde: #3c4a66; --oscuro: #05070b;
  --texto: #e9edf3; --tenue: #8c96aa; --amarillo: #ffd23f; --verde: #58d36b; --rojo: #ff4f4f; --cian: #7fe3ff;
  /* v0.11.9: 04b03 ES primero, igual que TR.FUENTE del juego (elección final de Rafa) */
  --retro: "Pixel Operator 8 ES", "Pixel Operator 8", "Px437 IBM CGA", monospace;   /* v0.23: UNA sola fuente, la de Rafa */
  --fs: 16px;
}

html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;   /* v0.23: el alto real con las barras de Safari */
  background: #05070b;
  overflow: hidden;
}
html { -webkit-text-size-adjust: 100%; }
body {
  position: fixed; inset: 0;   /* v0.23: iOS no rebota ni corre la página al girar */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--retro);
  color: #e9edf3;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
canvas {
  display: block;
  outline: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background: #0c1018;
  touch-action: none;
}
.oculto { display: none !important; }

/* ---------- registro (capa HTML con el mismo look del juego) ---------- */
.capa {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: max(12px, env(safe-area-inset-top)) 16px 24px;
  box-sizing: border-box;
  background: rgba(5, 7, 11, 0.55);
  -webkit-user-select: text; user-select: text;
}
.caja {
  width: 100%; max-width: 560px; margin: auto 0; box-sizing: border-box;
  background: rgba(12, 15, 23, 0.96);
  border: 2px solid var(--amarillo);
  box-shadow: 0 0 0 2px var(--oscuro), 6px 6px 0 0 var(--oscuro);
  padding: 14px 18px 16px;
}
.caja h1 { margin: 0 0 2px; font-size: 24px; line-height: 30px; font-weight: normal; color: var(--amarillo); text-shadow: 2px 2px 0 #000; }
.caja .sub { margin: 4px 0 10px; color: #ffe9c2; font-size: var(--fs); line-height: 18px; }
.caja label { display: block; margin: 10px 0 4px; font-size: var(--fs); line-height: 16px; color: var(--cian); }
.caja .nota { color: var(--tenue); font-size: var(--fs); }
.caja input[type=text], .caja input[type=email], .caja select {
  display: block; width: 100%; box-sizing: border-box;
  font: 16px/16px var(--retro); color: var(--texto);
  background: var(--panel); border: 1px solid var(--borde); border-radius: 0;
  padding: 9px 10px; outline: none; -webkit-appearance: none; appearance: none;
}
.caja input[type=text] { text-transform: uppercase; }
.caja select {
  background-image: linear-gradient(45deg, transparent 50%, var(--amarillo) 50%), linear-gradient(135deg, var(--amarillo) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 28px;
}
.caja input:focus, .caja select:focus { border-color: var(--amarillo); box-shadow: 0 0 0 1px var(--amarillo); }
.caja .casilla { display: flex; gap: 10px; align-items: flex-start; color: var(--texto); line-height: 18px; margin-top: 14px; cursor: pointer; }
.caja .casilla input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: #ffd23f; }
.caja .casilla span { color: var(--tenue); }
.caja .error { min-height: 18px; margin: 10px 0 6px; color: var(--rojo); font-size: var(--fs); line-height: 18px; }
.caja button {
  display: block; width: 100%; font: var(--fs)/16px var(--retro); cursor: pointer;
  background: var(--amarillo); color: var(--oscuro); border: 0; border-radius: 0;
  padding: 12px 10px; box-shadow: 0 3px 0 0 #a8851a;
}
.caja button:active { transform: translateY(2px); box-shadow: 0 1px 0 0 #a8851a; }
.caja button:disabled { opacity: 0.6; cursor: wait; }
.caja button.secundario { margin-top: 12px; background: var(--panel); color: var(--texto); border: 1px solid var(--borde); box-shadow: none; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- v0.3.1: ventana al terminar la misión (ranking con nombre + comentarios) ---------- */
#fin { z-index: 22; background: rgba(5, 7, 11, 0.6); }
#fin .caja { max-width: 600px; }
#fin h1 { padding-right: 44px; }
#fin h1.bien { color: var(--verde); }
#fin h1.mal { color: var(--rojo); }
.caja h2 { margin: 0 0 6px; font-size: var(--fs); line-height: 18px; font-weight: normal; color: var(--amarillo); }
.caja h2 label { display: inline; margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.caja .bloque { margin: 10px 0 0; padding: 10px 12px 8px; border: 1px dashed var(--borde); background: rgba(20, 26, 38, 0.6); }
.caja .bloque .error { min-height: 0; margin: 6px 0 0; }
.caja .fila { display: flex; gap: 8px; align-items: stretch; }
.caja .fila input { flex: 1; min-width: 0; }
.caja .fila button { width: auto; flex: none; padding: 9px 14px; }
.caja .fila.pie { align-items: center; justify-content: space-between; margin-top: 6px; }
.caja textarea {
  display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px;
  font: 16px/18px var(--retro); color: var(--texto);
  background: var(--panel); border: 1px solid var(--borde); border-radius: 0; padding: 8px 10px; outline: none;
}
.caja textarea:focus { border-color: var(--amarillo); box-shadow: 0 0 0 1px var(--amarillo); }
.caja button.enlace {
  width: auto; margin: 8px 0 0; padding: 4px 0; background: none; box-shadow: none; color: var(--tenue);
  text-decoration: underline; text-underline-offset: 3px;
}
.caja button.enlace:active { transform: none; }
.caja .info { margin: 10px 0 0; color: var(--cian); line-height: 18px; }
.caja .info.bien { color: var(--verde); }
.caja .info.tenue { color: var(--tenue); }
.caja .gracias { margin: 10px 0 0; padding: 12px; border: 2px solid var(--verde); background: rgba(10, 30, 16, 0.7); }
.caja .gracias p { margin: 4px 0; color: var(--texto); line-height: 18px; }
.caja .gracias .grande { color: var(--verde); }
.cursor { animation: parpadeo 1s steps(1) infinite; color: var(--verde); }
@keyframes parpadeo { 50% { opacity: 0; } }
#fin-seguir { margin-top: 12px; }
#fin .caja { position: relative; }
#fin-cerrar {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 32px; padding: 0;
  background: var(--panel); color: var(--texto); border: 1px solid var(--borde); box-shadow: none;
}
#fin-cerrar:active { transform: none; }
/* celular en horizontal: la ventana se compacta para que quepa casi entera */
@media (max-height: 460px) {
  #fin { padding-top: 6px; padding-bottom: 6px; }
  #fin .caja { padding: 8px 12px 10px; }
  #fin .caja h1 { font-size: 16px; line-height: 22px; padding-right: 40px; }
  #fin .caja .sub { margin: 2px 0 4px; }
  #fin .caja .bloque { margin-top: 6px; padding: 6px 10px; }
  #fin .caja label { margin: 4px 0 4px; }
  #fin .caja .nota { font-size: var(--fs); }
  #fin .caja textarea { min-height: 40px; height: 40px; }
  #fin .caja .fila input { padding: 6px 10px; }
  #fin .caja .fila button { padding: 6px 12px; }
  #fin .caja button.enlace { margin-top: 4px; padding: 2px 0; }
  #fin-seguir { margin-top: 8px; padding: 8px 10px; }
  #fin-cerrar { top: 6px; right: 6px; height: 28px; }
}

/* ---------- v0.3.1: botón de sonido (siempre visible) ---------- */
.boton.sonido {
  z-index: 25; width: auto; min-width: 40px; height: 30px; padding: 0 5px; font-size: 18px; line-height: 18px; cursor: pointer;
  /* v0.24.1: ancho automático; con ♪♪♪ las notas se salían del cuadro (captura de Rafa 4-nov) */
  color: var(--amarillo); background: rgba(12, 15, 23, 0.55); border-color: rgba(233, 237, 243, 0.4);
}
.boton.sonido.mudo { color: var(--tenue); }
.boton.sonido:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 1px; }
/* v0.3.2: el botón muestra el nivel (♪· ♪♪ ♪♪♪ ♪×) en letra retro nativa de 16 px; apagado en rojo tenue */
.boton.sonido { font-size: var(--fs); line-height: 16px; white-space: nowrap; }
.boton.sonido.mudo { color: #c46a6a; }
/* v0.3.2: aviso retro de 1 s al cambiar el volumen ("VOLUMEN BAJO"...) */
#aviso-vol {
  position: fixed; left: 50%; z-index: 26; transform: translateX(-50%); pointer-events: none;
  font: var(--fs)/16px var(--retro); color: #FFD400; text-shadow: 1px 1px 0 #000; white-space: nowrap;
  background: rgba(5, 7, 11, 0.88); border: 2px solid #FFD400; box-shadow: 3px 3px 0 0 #000;
  padding: 7px 12px; visibility: hidden;
}
#aviso-vol.visible { visibility: visible; }
#aviso-vol.mudo { color: #ff8080; border-color: #ff4f4f; }
/* v0.3.2: logo SUÁREZ MEDIA en la ventana de resultados */
#fin-marca { display: block; height: 26px; width: auto; margin: 0 0 8px; image-rendering: pixelated; }
@media (max-height: 460px) { #fin-marca { margin-bottom: 4px; } }

/* ---------- aviso de girar el celular ---------- */
#girar { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 7, 11, 0.92); text-align: center; }
#girar .caja { max-width: 320px; }
#girar p { margin: 6px 0; color: var(--tenue); }
#girar .grande { font-size: 20px; line-height: 26px; color: var(--amarillo); }

/* ---------- controles táctiles ---------- */
#tactil { position: fixed; inset: 0; z-index: 10; pointer-events: none; display: none; }
body.tactil.en-vuelo #tactil { display: block; }
/* v0.33 (T19): en el título jugable solo los dos sticks; ACCIÓN, pausa y los demás esperan al vuelo de verdad.
   v0.36.1: el botón de VISTA sí vive en el título (Rafa: "no tengo vista en primera persona") */
body.tactil.en-inicio #bt-accion, body.tactil.en-inicio #bt-entregar, body.tactil.en-inicio #bt-pausa,
body.tactil.en-inicio #bt-rth, body.tactil.en-inicio #bt-seg { display: none !important; }
.stick { position: fixed; width: 132px; height: 132px; pointer-events: auto; touch-action: none; }
.stick .base {
  position: absolute; inset: 10px; border-radius: 50%;
  background: rgba(12, 15, 23, 0.32); border: 2px solid rgba(233, 237, 243, 0.35);
  box-shadow: inset 0 0 0 6px rgba(5, 7, 11, 0.25);
}
/* noche 7: el stick izquierdo también gira la nariz (Modo 2 completo): base redonda, como el derecho */
.stick .perilla {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: rgba(255, 210, 63, 0.55); border: 2px solid rgba(255, 233, 194, 0.8);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.stick.vertical .perilla { background: rgba(88, 211, 107, 0.55); border-color: rgba(200, 255, 210, 0.8); }
/* v0.43 (T30, Adrián pilotea y no leyó qué hacía cada círculo): relieve de joystick de radiocontrol (cazoleta hundida,
   perilla abombada) y las flechitas grabadas en la base: ↕ + giro a la altura, cruz al de mover. Sin tapar el juego. */
.stick .base { box-shadow: inset 0 5px 12px rgba(0, 0, 0, 0.55), inset 0 -2px 5px rgba(255, 255, 255, 0.10), inset 0 0 0 6px rgba(5, 7, 11, 0.22); }
.stick .perilla { z-index: 1;
  background-image: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.45) 0 18%, rgba(255, 255, 255, 0) 46%), repeating-radial-gradient(circle, rgba(0, 0, 0, 0.12) 0 2px, rgba(0, 0, 0, 0) 2px 5px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), inset 0 -3px 4px rgba(0, 0, 0, 0.3); }
.stick .guia { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); pointer-events: none; fill: rgba(233, 237, 243, 0.42); }
.stick .guia .giro { fill: none; stroke: rgba(233, 237, 243, 0.42); stroke-width: 4; }
.stick.activo .base { border-color: rgba(255, 210, 63, 0.7); }
.stick .rotulo {
  /* rótulo abajo, para no chocar con la columna del HUD que baja por la izquierda */
  position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; white-space: nowrap; pointer-events: none;
  font: var(--fs)/16px var(--retro); color: rgba(233, 237, 243, 0.6); text-shadow: 1px 1px 0 #000;
}
.boton {
  position: fixed; pointer-events: auto; touch-action: none;
  font: var(--fs)/16px var(--retro); color: var(--texto); text-shadow: 1px 1px 0 #000;
  background: rgba(12, 15, 23, 0.45); border: 2px solid rgba(233, 237, 243, 0.45); border-radius: 0;
  padding: 6px 8px; margin: 0;
}
.boton.grande { width: 76px; height: 76px; border-radius: 50%; padding: 0; text-align: center; white-space: nowrap; background: rgba(79, 184, 255, 0.35); border-color: rgba(127, 227, 255, 0.75); font-size: 13px; line-height: 13px; }
.boton.chico { width: 40px; height: 32px; padding: 0; }
/* v0.38 (T25): TURBO, el golpe de acelerón (ámbar, para que no se confunda con la acción) */
.boton.turbo { padding: 0; text-align: center; background: rgba(255, 160, 40, 0.3); border-color: rgba(255, 210, 63, 0.7); border-radius: 8px; font-size: 11px; }
/* v0.8.1: botón de cámara estilo DJI (icono + rótulo de la vista actual), en la columna del pulgar derecho */
.boton.vista { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.boton.vista svg { display: block; }
.boton.vista .rotulo-vista { font-size: 8px; line-height: 10px; }
.boton.activo { background: rgba(255, 210, 63, 0.6); color: var(--oscuro); text-shadow: none; }
/* v0.32 (T18): SEGUIR encendido = cian, como los corchetes sobre el sujeto */
.boton.seg-on { background: rgba(127, 227, 255, 0.55); color: var(--oscuro); text-shadow: none; }
/* v0.6.2: el tutorial hace parpadear el stick o botón que pide la pista */
.stick.tuto .base, .boton.tuto { animation: tuto-pulso 0.5s steps(1) infinite; }
@keyframes tuto-pulso { 50% { border-color: #ffd23f; box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.6); } }

/* v0.23: en celular la fuente de 8 nativos va a 12 (más nítida que un 16 que se sale de los botones) */
@media (max-width: 900px), (max-height: 460px) { :root { --fs: 12px; } }

/* ---------- v0.47 (T34): EL PORTÓN de la beta privada (tráiler + código de invitación + lista de espera) ---------- */
#porton {
  position: fixed; inset: 0; z-index: 40;   /* encima del aviso de girar (30): el código se escribe con el celular como sea */
  overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  background-color: #05070b;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 210, 63, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 64%, rgba(127, 227, 255, 0.14) 0 1px, transparent 2px),
    linear-gradient(180deg, #0c1018 0%, #05070b 70%);
  background-size: 37px 41px, 53px 47px, 100% 100%;
  -webkit-user-select: text; user-select: text;
}
#porton .pt-marco { width: 100%; max-width: 980px; margin: auto 0; text-align: center; }
#porton h1 { margin: 0; font-size: 32px; line-height: 38px; font-weight: normal; color: var(--amarillo); text-shadow: 3px 3px 0 #000; letter-spacing: 1px; }
#porton .pt-sello {
  display: inline-block; margin: 6px 0 12px; padding: 4px 10px;
  color: var(--oscuro); background: var(--cian); font-size: var(--fs); line-height: 16px; box-shadow: 3px 3px 0 #000;
}
#porton .pt-cuerpo { display: flex; gap: 18px; align-items: center; justify-content: center; }
#porton .pt-video { flex: none; line-height: 0; }
#porton video {
  display: block; height: 70vh; height: 70dvh; max-height: 720px; aspect-ratio: 9 / 16; width: auto;
  background: #000; border: 2px solid var(--amarillo); box-shadow: 0 0 0 2px var(--oscuro), 6px 6px 0 0 var(--oscuro);
}
#porton .pt-lado {
  flex: 0 1 400px; min-width: 0; text-align: left; box-sizing: border-box;
  background: rgba(12, 15, 23, 0.96); border: 2px solid var(--amarillo);
  box-shadow: 0 0 0 2px var(--oscuro), 6px 6px 0 0 var(--oscuro); padding: 14px 16px 12px;
}
#porton.sin-video .pt-lado { flex-basis: 520px; }
#porton .pt-pronto { margin: 0 0 4px; color: var(--verde); font-size: 20px; line-height: 26px; text-shadow: 2px 2px 0 #000; }
#porton .pt-fin { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--rojo); background: rgba(60, 14, 14, 0.6); }
#porton .pt-fin p { margin: 2px 0; color: var(--texto); font-size: var(--fs); line-height: 18px; }
#porton .pt-fin .grande { color: var(--amarillo); }
#porton label { display: block; margin: 10px 0 4px; font-size: var(--fs); line-height: 16px; color: var(--cian); }
#porton h2 { margin: 0 0 8px; font-size: var(--fs); line-height: 18px; font-weight: normal; color: #ffe9c2; }
#porton .fila { display: flex; gap: 8px; align-items: stretch; }
#porton input[type=text], #porton input[type=email] {
  flex: 1; min-width: 0; box-sizing: border-box; font: 16px/16px var(--retro); color: var(--texto);
  background: var(--panel); border: 1px solid var(--borde); border-radius: 0; padding: 9px 10px; outline: none;
  -webkit-appearance: none; appearance: none;
}
#porton input[type=text] { text-transform: uppercase; letter-spacing: 1px; }
#porton input:focus { border-color: var(--amarillo); box-shadow: 0 0 0 1px var(--amarillo); }
#porton button {
  flex: none; font: var(--fs)/16px var(--retro); cursor: pointer; border: 0; border-radius: 0; padding: 9px 14px;
  background: var(--amarillo); color: var(--oscuro); box-shadow: 0 3px 0 0 #a8851a;
}
#porton button:active { transform: translateY(2px); box-shadow: 0 1px 0 0 #a8851a; }
#porton button:disabled { opacity: 0.6; cursor: wait; }
#porton button.secundario { background: var(--cian); box-shadow: 0 3px 0 0 #3d8ea6; }
#porton .error { min-height: 18px; margin: 6px 0 4px; color: var(--rojo); font-size: var(--fs); line-height: 18px; }
#porton .pt-espera { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--borde); }
#porton .pt-respeto { margin: 0; color: var(--tenue); font-size: var(--fs); line-height: 16px; }
#porton .pt-ok { margin: 4px 0; color: var(--verde); font-size: var(--fs); line-height: 18px; }
/* celular en vertical (y ventanas angostas): título arriba, el tráiler casi a pantalla completa y el código debajo */
@media (max-aspect-ratio: 1/1) {
  #porton .pt-cuerpo { flex-direction: column; gap: 14px; }
  #porton video { height: auto; width: min(100%, calc(64dvh * 9 / 16)); max-height: none; }
  #porton .pt-lado { flex-basis: auto; width: 100%; max-width: 520px; }
  #porton h1 { font-size: 22px; line-height: 28px; }
}
/* celular acostado: poca altura, el tráiler ocupa el alto disponible y todo se compacta */
@media (min-aspect-ratio: 1/1) and (max-height: 500px) {
  #porton h1 { font-size: 20px; line-height: 24px; }
  #porton .pt-sello { margin: 4px 0 6px; }
  #porton video { height: calc(100dvh - 84px); min-height: 200px; }
  #porton .pt-lado { padding: 8px 12px; }
  #porton .pt-pronto { font-size: 14px; line-height: 18px; }
  #porton label { margin-top: 4px; }
}