/* OFER.CITY · La puerta mundial de OFER. Mismos colores y tipografías que OFER.MIA (Dirección B «Pop»).
   Fondo noche con luces que se mueven, grilla y grano; globo de puntos; lista de ciudades tipo «linktree». */

@font-face { font-family: "Unbounded"; src: url("assets/unbounded.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/dmsans.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --violeta: #5B2EFF; --lima: #C8F53C; --chicle: #FF5C9D; --noche: #17102E; --blanco: #FFFFFF;
  --display: "Unbounded", system-ui, sans-serif; --body: "DM Sans", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noche); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100vh; background: var(--noche); color: var(--blanco); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Fondo */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .7; animation: drift 20s ease-in-out infinite alternate; }
.blob--v { width: 560px; height: 560px; right: -180px; top: -160px; background: var(--violeta); }
.blob--p { width: 380px; height: 380px; left: -170px; top: 45%; background: var(--chicle); opacity: .3; animation-duration: 24s; }
.blob--l { width: 320px; height: 320px; right: 10%; bottom: -170px; background: var(--lima); opacity: .2; animation-duration: 28s; }
@keyframes drift { to { transform: translate3d(-40px, 50px, 0) scale(1.12); } }
.bg__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(80% 60% at 50% 20%, #000, transparent 75%); mask-image: radial-gradient(80% 60% at 50% 20%, #000, transparent 75%); }
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap { position: relative; z-index: 2; width: 100%; max-width: 520px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 28px); }

/* Aparición */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }

/* Cabecera */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mark { font: 800 26px/1 var(--display); letter-spacing: -0.06em; }
.mark i { font-style: normal; color: var(--lima); }
.live { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 13px; font-weight: 700; }
.live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lima); animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(200,245,60,.7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(200,245,60,0); } }

/* Portada */
.hero { text-align: center; padding-top: 6px; }
.globe { width: min(78vw, 300px); aspect-ratio: 1; margin: 6px auto 0; }
.globe canvas { width: 100%; height: 100%; display: block; }
.eyebrow { margin: 6px 0 0; color: var(--lima); font: 700 12px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.title { margin: 12px 0 0; font: 800 clamp(30px, 8.6vw, 44px)/1.02 var(--display); letter-spacing: -0.055em; text-wrap: balance; }
.title em { font-style: normal; background: linear-gradient(100deg, var(--lima) 0%, #e9ff9a 40%, var(--lima) 60%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s ease-in-out infinite; }
.title .dot { color: var(--chicle); -webkit-text-fill-color: var(--chicle); }
@keyframes shine { 50% { background-position: 100% 0; } }
.lead { margin: 14px auto 0; max-width: 34ch; color: rgba(255,255,255,.76); font-size: 16.5px; }

/* Ciudades (tipo linktree) */
.cities { display: grid; gap: 12px; margin-top: 30px; }
.cities__title { margin: 0 0 2px; font: 800 14px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.6); text-align: center; }
.city { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 14px 16px; border: 0; border-radius: 22px; text-align: left; text-decoration: none; cursor: pointer;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .2s cubic-bezier(.3, 1.3, .5, 1), background-color .2s, opacity .7s var(--ease); }
.city:active { transform: scale(.97); }
.city__flag { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.1); font-size: 24px; }
.city__body { display: grid; flex: 1; min-width: 0; }
.city__body strong { font: 800 19px/1.15 var(--display); letter-spacing: -0.04em; }
.city__body small { color: rgba(255,255,255,.66); font-size: 13.5px; }

/* Miami: la única disponible, con borde que brilla */
.city--live { background: linear-gradient(135deg, var(--violeta), #3a17c9); box-shadow: 0 16px 40px rgba(91,46,255,.45); isolation: isolate; }
.city--live::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 24px; padding: 2px;
  background: conic-gradient(from var(--a, 0deg), var(--lima), transparent 30%, transparent 70%, var(--lima));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 4s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }
.city--live .city__body small { color: var(--lima); font-weight: 700; }
.city__go { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--lima); color: var(--noche); transition: transform .2s var(--ease); }
@media (hover: hover) { .city--live:hover .city__go { transform: translateX(3px); } .city--soon:hover { background: rgba(255,255,255,.1); } }

/* Próximas: el nombre se lee detrás del difuminado */
.city--soon .city__flag { opacity: .9; }
/* En lugar del nombre: dos barras difuminadas (el nombre no está en la página) */
.city__ghost { display: grid; gap: 7px; flex: 1; min-width: 0; filter: blur(3px); opacity: .55; }
.city__ghost b { display: block; height: 14px; width: 62%; border-radius: 7px; background: rgba(255,255,255,.75); }
.city__ghost b + b { height: 9px; width: 34%; background: rgba(255,255,255,.45); }
.city--soon:nth-of-type(3) .city__ghost b:first-child { width: 78%; }
.city--soon:nth-of-type(5) .city__ghost b:first-child { width: 70%; }
.city--soon:nth-of-type(6) .city__ghost b:first-child { width: 54%; }
.soon { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(23,16,46,.75); box-shadow: inset 0 0 0 1px rgba(200,245,60,.5); color: var(--lima); font: 800 11px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.soon::before { content: ""; width: 10px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 11h12v10H6zM8.5 11V8a3.5 3.5 0 0 1 7 0v3' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 11h12v10H6zM8.5 11V8a3.5 3.5 0 0 1 7 0v3' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.city.is-shake .soon { animation: shake .45s ease; }
@keyframes shake { 20% { transform: translateX(-4px) rotate(-3deg); } 40% { transform: translateX(4px) rotate(3deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ¿Querés OFER en tu ciudad? */
.wish { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding: 16px; border-radius: 22px; text-decoration: none; border: 1.5px dashed rgba(200,245,60,.45); }
.wish__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--lima); color: var(--noche); font: 800 24px/1 var(--display); }
.wish strong { display: block; font: 800 16px/1.2 var(--display); letter-spacing: -0.03em; }
.wish small { color: rgba(255,255,255,.66); font-size: 13.5px; }

/* Aviso */
.toast { position: fixed; z-index: 10; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 18px); width: min(calc(100% - 32px), 460px); display: grid; gap: 4px; padding: 14px 18px; border-radius: 18px;
  background: var(--blanco); color: var(--noche); box-shadow: 0 20px 50px rgba(0,0,0,.45); transform: translate(-50%, 140%); transition: transform .4s cubic-bezier(.32, .72, 0, 1); }
.toast.is-on { transform: translate(-50%, 0); }
.toast strong { font: 800 15px/1.25 var(--display); letter-spacing: -0.03em; }
.toast a { color: var(--violeta); font-weight: 700; }

/* Pie */
.foot { margin-top: 34px; text-align: center; color: rgba(255,255,255,.5); font-size: 13px; display: grid; gap: 4px; }
.foot p { margin: 0; }
.foot a { color: rgba(255,255,255,.75); text-decoration: none; }
.foot__credit a { font-weight: 700; letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}