/* ============================================================
   CONTRATÁ YA — Jugá: "Fútbol tenis en la playa" (.ft-)
   ============================================================ */
.ft-caja { position: relative; background: #D7E6F4; min-height: 520px; }
.vista-futboltenis .jugar-caja { flex: 1; min-height: 0; }
.ft-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ft { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  font-family: var(--texto); color: var(--cal); -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  --ft-acento: #1A6BB5; }
.ft button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ft svg { display: block; }
.ft [hidden] { display: none !important; }

.ft-hud { flex: 0 0 auto; background: var(--ft-acento, #1A6BB5); color: #fff; padding: 8px 10px 7px;
  display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; }
.ft-puntaje { font: 700 26px/1 var(--dato); letter-spacing: -.02em; }
.ft-hud-der { display: flex; gap: 6px; align-items: center; }
.ft-vidas { display: flex; gap: 2px; }
.ft-vidas svg { width: 20px; height: 20px; fill: #FF6B5E; transition: transform .2s, opacity .2s; }
.ft-vidas svg.ft-ido { fill: rgba(255,255,255,.22); transform: scale(.8); }
.ft-ibtn { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.14) !important; display: grid; place-items: center; }
.ft-ibtn svg { width: 18px; height: 18px; fill: #fff; }
.ft-locbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.ft-loc-pill { display: inline-flex; align-items: baseline; gap: 6px; background: rgba(255,255,255,.14);
  padding: 4px 8px; border-radius: 8px; border-left: 3px solid var(--c, #fff); }
.ft-loc-pill b { font: 700 12px/1.1 var(--dato); }
.ft-loc-pill small { opacity: .8; font: 600 10px/1 var(--dato); }
.ft-riel { display: flex; gap: 3px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.ft-riel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); padding: 0 !important; }
.ft-riel-dot.ft-riel-ok { background: var(--c, #fff); opacity: .7; }
.ft-riel-dot.ft-riel-on { background: #E2A400; box-shadow: 0 0 0 2px rgba(226,164,0,.45); transform: scale(1.25); }
.ft-chips { grid-column: 1 / -1; display: flex; gap: 5px; flex-wrap: wrap; font: 600 11px/1 var(--dato); }
.ft-chip { background: rgba(255,255,255,.14); padding: 4px 6px; border-radius: 6px; white-space: nowrap; }
.ft-chip.ft-meta-ok { background: #2E9E4F; color: #fff; }

.ft-escena { position: relative; flex: 1 1 auto; min-height: 0; background: #7EB6DE; touch-action: none; }
.ft-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ft-hint { position: absolute; left: 50%; top: 10px; bottom: auto; transform: translateX(-50%);
  background: rgba(11,22,32,.78); color: #fff; font: 600 12px/1.3 var(--texto);
  padding: 7px 12px; border-radius: 10px; max-width: min(92%, 340px); text-align: center; opacity: 0;
  pointer-events: none; transition: opacity .25s; z-index: 3; }
.ft-hint.ft-hint-on { opacity: 1; }
.ft-hint[hidden] { display: none !important; opacity: 0; }
.ft-toast { position: absolute; left: 50%; top: 18%; transform: translate(-50%,-50%);
  background: rgba(26,107,181,.92); color: #fff; font: 700 14px/1.2 var(--dato);
  padding: 10px 14px; border-radius: 12px; z-index: 3; pointer-events: none;
  box-shadow: 0 8px 24px rgba(11,22,32,.25); }
.ft-banner { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px;
  background: rgba(11,22,32,.55); color: #fff; text-align: center; z-index: 4; padding: 20px; }
.ft-banner small { opacity: .75; font: 600 11px var(--dato); letter-spacing: .08em; text-transform: uppercase; }
.ft-banner b { font: 800 28px/1.05 var(--dato); color: var(--c, #E2A400); }
.ft-banner span { font: 500 14px/1.35 var(--texto); opacity: .92; }
.ft-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ft-float { position: absolute; transform: translate(-50%,-50%); font: 800 14px var(--dato); color: #fff;
  text-shadow: 0 2px 8px rgba(11,22,32,.45); animation: ft-float .7s ease-out forwards; }
@keyframes ft-float { from { opacity: 1; transform: translate(-50%,-40%); } to { opacity: 0; transform: translate(-50%,-90%); } }

.ft-capa { position: absolute; inset: 0; z-index: 5; overflow: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(165deg, #E8F1FA 0%, #D7E6F4 45%, #F4E9D8 100%);
  padding: 18px 16px 28px; display: flex; flex-direction: column; gap: 12px; }
.ft-capa-fin, .ft-capa-pausa { background: rgba(11,22,32,.78); color: #fff; align-items: center; justify-content: center; text-align: center; }
.ft-titulo { margin: 4px 0 0; font: 800 28px/1.1 var(--dato); color: #0B1620; letter-spacing: -.02em; }
.ft-titulo b { color: var(--ft-acento, #1A6BB5); }
.ft-lead { margin: 0; font: 500 14.5px/1.45 var(--texto); color: #3C4C5E; }
.ft-como { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ft-como li { display: flex; gap: 10px; align-items: flex-start; font: 500 13.5px/1.4 var(--texto); color: #0B1620;
  background: rgba(255,255,255,.72); border-radius: 12px; padding: 10px 12px; }
.ft-n { flex: 0 0 22px; height: 22px; border-radius: 7px; background: var(--ft-acento); color: #fff;
  font: 700 12px/22px var(--dato); text-align: center; }
.ft-chips-loc { display: flex; flex-wrap: wrap; gap: 5px; }
.ft-chip-loc { display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--dato);
  background: #fff; color: #0B1620; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(14,76,138,.12); }
.ft-chip-loc i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, #1A6BB5); }
.ft-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ft-mejor { font: 600 12.5px/1.3 var(--texto); color: #3C4C5E; }
.ft-toggle { font: 600 13px var(--texto); color: #0B1620; display: inline-flex; align-items: center; gap: 6px; }
.ft-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px;
  border-radius: 14px; background: var(--ft-acento, #1A6BB5) !important; color: #fff !important;
  font: 700 15px/1 var(--dato); box-shadow: 0 6px 16px rgba(26,107,181,.28); }
.ft-btn-fantasma { background: rgba(255,255,255,.14) !important; box-shadow: none; border: 1px solid rgba(255,255,255,.28) !important; }
.ft-capa .ft-btn { width: 100%; margin-top: 4px; }
.ft-fin-tit { font: 700 18px/1.2 var(--dato); opacity: .9; }
.ft-gran { font: 800 52px/1 var(--dato); letter-spacing: -.03em; margin: 6px 0; }
.ft-record { font: 700 13px var(--dato); color: #E2A400; }
.ft-ganaste { font: 700 15px var(--dato); color: #7CFFB2; margin-top: 4px; }
.ft-fin-res { margin: 0; font: 500 13.5px/1.4 var(--texto); opacity: .85; max-width: 280px; }
.ft-fin-btns { display: grid; gap: 8px; width: min(280px, 100%); margin-top: 10px; }
.ft-capa-fin .jugar-premio, .ft-capa .jugar-premio { margin-top: 4px; }

@media (min-width: 720px) {
  .ft-caja { min-height: 640px; }
}

/* ── Publicidad entre niveles: carrito de churros (v296) ───────────────── */
.ftc { position: absolute; inset: 0; z-index: 7; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; gap: 2px; padding: 8px 8px 10px;
  --fw: 300px; --c: #1A6BB5; --dur-in: 1.2s;
  background: linear-gradient(180deg, rgba(14,76,138,.0) 0%, rgba(14,76,138,.0) 100%); }
.ftc::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(180deg, #5FA3D6 0%, #9CCBEA 48%, #CBE5F5 72%); }
.ftc.ftc-in::before { opacity: .97; }
.ftc.ftc-out::before { opacity: 0; transition-delay: .2s; }

/* Cartel grande: «NIVEL N · LOCALIDAD» */
.ftc-cartel { position: relative; z-index: 3; flex: 0 0 auto; max-width: min(96%, 520px); text-align: center;
  background: #fff; color: #0B1620; border-radius: 14px; padding: 6px 14px 5px;
  border: 3px solid var(--c); box-shadow: 0 6px 0 rgba(11,22,32,.16), 0 14px 28px rgba(11,22,32,.22);
  transform: translate3d(0, -160%, 0) rotate(-3deg); opacity: 0;
  transition: transform .55s cubic-bezier(.3,1.5,.5,1) .25s, opacity .25s ease .25s; will-change: transform; }
.ftc-cartel b { display: block; font: 900 clamp(19px, 6vw, 30px)/1 var(--display, var(--dato)); font-stretch: 82%;
  letter-spacing: .01em; text-transform: uppercase; }
.ftc-cartel b span:first-child { color: var(--c); }
.ftc-cartel small { display: block; margin-top: 2px; font: 600 11px/1.15 var(--texto); color: #3C4C5E; }
.ftc.ftc-in .ftc-cartel { transform: translate3d(0, 0, 0) rotate(-1.2deg); opacity: 1; }
.ftc.ftc-out .ftc-cartel { transform: translate3d(0, -170%, 0) rotate(2deg); opacity: 0;
  transition: transform .4s cubic-bezier(.5,0,.8,.4), opacity .3s ease .1s; }

/* Pista: arena y mar a los costados */
.ftc-pista { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex;
  align-items: flex-end; justify-content: center; padding-bottom: 4px; }
.ftc-suelo { position: absolute; left: -10px; right: -10px; top: calc(100% - 26px); height: 100vh; z-index: 0;
  background: linear-gradient(180deg, #E8D4A0 0%, #DCC48C 30%, #D4B87A 100%); opacity: 0; transition: opacity .35s ease; }
.ftc-suelo::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 34px;
  background: linear-gradient(180deg, #2C86C9 0%, #1A6BB5 70%, #9CD3E8 100%); }
.ftc-suelo::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 10px;
  background: radial-gradient(circle at 12px 0, #fff 6px, transparent 6.5px) repeat-x; background-size: 24px 10px; opacity: .85; }
.ftc.ftc-in .ftc-suelo { opacity: 1; }
.ftc.ftc-out .ftc-suelo { opacity: 0; transition-delay: .2s; }

/* Carrito */
.ftc-carro { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
  width: calc(var(--fw) + 44px); will-change: transform; backface-visibility: hidden;
  transform: translate3d(var(--desde, -130vw), 0, 0); }
.ftc-der .ftc-carro { --desde: -130vw; --hacia: 130vw; }
.ftc-izq .ftc-carro { --desde: 130vw; --hacia: -130vw; }
.ftc.ftc-in .ftc-carro { transform: translate3d(0, 0, 0);
  transition: transform var(--dur-in) cubic-bezier(.15,.75,.28,1.04); }
.ftc.ftc-parado .ftc-carro { animation: ftc-freno .5s ease-out; }
.ftc.ftc-out .ftc-carro { transform: translate3d(var(--hacia), 0, 0);
  transition: transform .55s cubic-bezier(.55,0,.85,.35); }
@keyframes ftc-freno { 0% { transform: translate3d(0,0,0) rotate(0); } 30% { transform: translate3d(0,0,0) rotate(-1.4deg); }
  65% { transform: translate3d(0,0,0) rotate(.6deg); } 100% { transform: translate3d(0,0,0) rotate(0); } }
.ftc-izq.ftc-parado .ftc-carro { animation-name: ftc-freno-i; }
@keyframes ftc-freno-i { 0% { transform: translate3d(0,0,0) rotate(0); } 30% { transform: translate3d(0,0,0) rotate(1.4deg); }
  65% { transform: translate3d(0,0,0) rotate(-.6deg); } 100% { transform: translate3d(0,0,0) rotate(0); } }

/* Toldo a rayas con festón */
.ftc-toldo { position: relative; z-index: 2; width: calc(var(--fw) + 44px); height: 30px; border-radius: 12px 12px 3px 3px;
  background: repeating-linear-gradient(90deg, #E4574C 0 22px, #FFF7EA 22px 44px);
  box-shadow: inset 0 6px 0 rgba(255,255,255,.18), inset 0 -4px 0 rgba(11,22,32,.08), 0 3px 6px rgba(11,22,32,.15); }
.ftc-toldo::before { content: ''; position: absolute; left: -4px; right: -4px; top: -7px; height: 9px; border-radius: 8px;
  background: linear-gradient(180deg, #C3392F, #9E2B23); }
.ftc-toldo::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 11px;
  background: repeating-linear-gradient(90deg, #E4574C 0 22px, #FFF7EA 22px 44px);
  -webkit-mask: radial-gradient(circle 11px at 11px 0, #000 97%, transparent 100%) 0 0 / 22px 11px repeat-x;
  mask: radial-gradient(circle 11px at 11px 0, #000 97%, transparent 100%) 0 0 / 22px 11px repeat-x;
  filter: drop-shadow(0 2px 1px rgba(11,22,32,.12)); }

.ftc-cuerpo { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: 11px; }
.ftc-poste { position: absolute; top: 0; bottom: 40px; width: 6px; border-radius: 3px; z-index: 0;
  background: linear-gradient(90deg, #8D99A6, #E8EDF2 45%, #8D99A6); }
.ftc-poste-i { left: 8px; } .ftc-poste-d { right: 8px; }

/* Marco del flyer (4:5 entero, object-fit: contain) */
.ftc-marco { position: relative; z-index: 1; padding: 6px; border-radius: 12px;
  background: linear-gradient(160deg, #A0703C, #7A4E24 60%, #5E3A18);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 6px 14px rgba(11,22,32,.25); }
.ft .ftc-flyer { position: relative; display: block; width: var(--fw); aspect-ratio: 4 / 5; height: auto;
  border-radius: 7px; overflow: hidden; background: #0B1620 !important; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .15s ease; }
@supports not (aspect-ratio: 4 / 5) { .ft .ftc-flyer { height: calc(var(--fw) * 1.25); } }
.ft .ftc-flyer:active { transform: scale(.985); }
.ftc-flyer > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; -webkit-user-drag: none; }
.ftc-ver { position: absolute; top: 8px; right: -10px; z-index: 2; pointer-events: none;
  background: #E2A400; color: #1A0F02; font: 800 11px/1 var(--display, var(--dato)); padding: 5px 8px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(11,22,32,.25); transform: rotate(6deg); }

/* Cartel propio de Contratá Ya (sin anunciante) */
.ftc-casa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px 16px; text-align: center; color: #0B1620;
  background: repeating-conic-gradient(from 0deg at 50% 38%, #FFD45C 0 10deg, #F5C23A 10deg 20deg); }
.ftc-casa img { width: 22%; height: auto; filter: drop-shadow(0 4px 6px rgba(11,22,32,.2)); }
.ftc-casa b { font: 900 clamp(22px, 7.6vw, 34px)/1.02 var(--display, var(--dato)); font-stretch: 85%; color: #0E4C8A; text-transform: uppercase; }
.ftc-casa span { font: 600 clamp(12.5px, 3.6vw, 15px)/1.35 var(--texto); color: #1A2B3B; max-width: 92%; }
.ftc-casa em { font-style: normal; font: 800 clamp(13px, 3.8vw, 16px)/1 var(--display, var(--dato)); background: #1FA855; color: #fff;
  padding: 10px 14px; border-radius: 999px; box-shadow: 0 4px 0 #157A3D; }
.ftc-casa small { font: 900 12px/1 var(--display, var(--dato)); letter-spacing: .12em; color: #0B1620; opacity: .8; }
.ftc-casa small i { font-style: normal; color: #1A6BB5; }

/* Mostrador con cartel «CHURROS» chico */
.ftc-mostrador { position: relative; z-index: 2; width: calc(var(--fw) + 44px); height: 42px; margin-top: -4px;
  display: flex; align-items: center; justify-content: center; border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #FFF3D6 0 7px, #F2B51D 7px, #E2A400 60%, #C98F00);
  box-shadow: inset 0 -5px 0 rgba(11,22,32,.12), 0 4px 10px rgba(11,22,32,.18); }
.ftc-churros { margin-top: 6px; background: #C3392F; color: #FFF7EA; font: 900 13px/1 var(--display, var(--dato)); letter-spacing: .16em;
  padding: 6px 11px 5px 13px; border-radius: 7px; border: 2px solid #FFF3D6; box-shadow: 0 2px 0 rgba(11,22,32,.2); }
.ftc-cono { position: absolute; left: 12px; bottom: 22px; width: 26px; height: 36px; }
.ftc-azucar { position: absolute; right: 14px; bottom: 24px; width: 18px; height: 28px; }

/* Ruedas, manija y sombra */
.ftc-chasis { position: relative; z-index: 1; width: calc(var(--fw) + 20px); height: 26px; margin-top: -8px; }
.ftc-chasis::before { content: ''; position: absolute; left: 6%; right: 6%; top: 4px; height: 6px; border-radius: 3px; background: #4A5C70; }
.ftc-rueda { position: absolute; top: 0; width: 40px; height: 40px; z-index: 2; }
.ftc-rueda:first-child { left: 13%; } .ftc-rueda:nth-child(2) { right: 13%; }
.ftc-rayos { transform-origin: 20px 20px; transform-box: view-box; }
.ftc.ftc-in:not(.ftc-parado) .ftc-rayos, .ftc.ftc-out .ftc-rayos { animation: ftc-gira .45s linear infinite; }
.ftc-izq .ftc-rayos { animation-direction: reverse !important; }
@keyframes ftc-gira { to { transform: rotate(360deg); } }
.ftc-manija { position: absolute; right: -16px; top: -22px; width: 26px; height: 6px; border-radius: 3px; background: #4A5C70;
  transform: rotate(-24deg); transform-origin: left center; }
.ftc-manija::after { content: ''; position: absolute; right: -4px; top: -3px; width: 10px; height: 12px; border-radius: 4px; background: #22303D; }
.ftc-izq .ftc-manija { right: auto; left: -16px; transform: rotate(24deg); transform-origin: right center; }
.ftc-izq .ftc-manija::after { right: auto; left: -4px; }
.ftc-sombra { position: absolute; left: 6%; right: 6%; bottom: -24px; height: 14px; border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(11,22,32,.28), rgba(11,22,32,0) 70%); }

/* Pie: «Publicidad» chiquito + Jugar ▶ con barra de auto-continuar */
.ftc-pie { position: relative; z-index: 3; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: min(320px, 92%); opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .3s ease .7s, transform .3s ease .7s; }
.ftc.ftc-in .ftc-pie { opacity: 1; transform: none; }
.ftc.ftc-out .ftc-pie { opacity: 0; transition: opacity .15s ease; }
.ftc-pub { font: 600 10px/1 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: rgba(11,22,32,.6); }
.ft .ftc-jugar { position: relative; overflow: hidden; width: 100%; min-height: 44px; margin-top: 0 !important; isolation: isolate; }
.ftc-jugar span { position: relative; z-index: 1; }
.ftc-barra { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #E2A400; z-index: 0;
  transform: scaleX(0); transform-origin: left center; }
.ftc.ftc-auto .ftc-barra { animation: ftc-barra 4.5s linear forwards; }
@keyframes ftc-barra { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .ftc { --dur-in: .2s; }
  .ftc-cartel, .ftc-pie { transition-duration: .15s; transition-delay: 0s; }
  .ftc.ftc-parado .ftc-carro { animation: none; }
  .ftc-rayos { animation: none !important; }
}