/* MarketNext: negro y blanco, cristal y una sola tipografía moderna. La firma es el anillo de 50 plazas. */
@font-face { font-family: "Geist"; src: url(/fonts/geist-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "Geist"; src: url(/fonts/geist-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --negro: #000;
  --fondo: #070707;
  --blanco: #fff;
  --tinta: #000;
  --gris: #b8b8b8;
  --gris-2: #8c8c8c;
  --borde: rgb(255 255 255 / .13);
  --borde-fuerte: rgb(255 255 255 / .28);
  --brillo-borde: inset 0 1px 0 rgb(255 255 255 / .16);
  /* Cristal: siempre como degradado, para que la luz parezca caer de arriba a la izquierda */
  --cristal: linear-gradient(145deg, rgb(255 255 255 / .085), rgb(255 255 255 / .025));
  --cristal-2: linear-gradient(145deg, rgb(255 255 255 / .15), rgb(255 255 255 / .05));
  --cristal-3: linear-gradient(145deg, rgb(255 255 255 / .24), rgb(255 255 255 / .09));
  --display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;
  --radio: 22px;
  --radio-chico: 14px;
  --sombra: 0 24px 60px rgb(0 0 0 / .55);
  --suave: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--negro); }
body { margin: 0; overflow-x: clip; background: var(--negro); color: var(--blanco); font: 400 1rem/1.55 var(--texto); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; }
/* Luz ambiental muy lenta: es lo que el cristal deja ver detrás */
body::before { content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none; background:
  radial-gradient(46vmax 34vmax at 16% 2%, rgb(255 255 255 / .13), transparent 68%),
  radial-gradient(40vmax 40vmax at 92% 30%, rgb(255 255 255 / .075), transparent 66%),
  radial-gradient(52vmax 34vmax at 40% 104%, rgb(255 255 255 / .07), transparent 68%);
  animation: deriva 26s ease-in-out infinite alternate; }
@keyframes deriva { to { transform: translate3d(3%, 4%, 0) scale(1.06); } }

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.02em; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.display { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: -.042em; text-wrap: balance; }
.etiqueta { font: 500 .7rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.tenue { color: var(--gris); }
.muy-tenue { color: var(--gris-2); }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: .55rem; font: 600 1.14rem/1 var(--display); letter-spacing: -.035em; text-decoration: none; color: var(--blanco); }
.marca b { font-weight: 400; color: var(--gris); margin-left: -.55rem; } /* compensa el hueco entre icono y texto: la palabra va junta */
.marca img { width: 24px; height: 24px; }

/* Botones: la luz que se mueve está renderizada con Remotion (ver motion/); el gesto al pasar y pulsar, con CSS */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .7rem 1.45rem; border: 1px solid transparent; border-radius: 999px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; background: none; transition: transform .28s var(--suave), border-color .2s ease, background-color .2s ease; }
.btn .ico { transition: transform .28s var(--suave); }
.btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.02); }
.btn:hover:not(:disabled) .ico { transform: translateX(3px); }
.btn:active:not(:disabled) { transform: scale(.97); transition-duration: .08s; }
.btn:disabled { opacity: .5; cursor: default; }

.btn-primario { color: var(--tinta); }
.btn-primario::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url(/img/boton-brillo-oscuro.webp) center / 100% 100% no-repeat, var(--blanco); box-shadow: 0 0 0 1px rgb(255 255 255 / .9), 0 10px 34px rgb(255 255 255 / .16); transition: box-shadow .28s var(--suave); }
.btn-primario::after { content: ""; position: absolute; inset: -16px -22px; z-index: -2; pointer-events: none; background: url(/img/boton-halo.webp) center / 100% 100% no-repeat; }
@media (max-width: 760px) { .btn-primario::after { inset: -14px -10px; } } /* el halo no se sale del margen de la pantalla */
.btn-primario:hover:not(:disabled)::before { box-shadow: 0 0 0 1px var(--blanco), 0 14px 46px rgb(255 255 255 / .34); }

.btn-borde { color: var(--blanco); background: var(--cristal); border-color: var(--borde-fuerte); box-shadow: var(--brillo-borde); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn-borde::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; }
.btn-borde:hover:not(:disabled) { border-color: rgb(255 255 255 / .55); }
.btn-borde:hover:not(:disabled)::before { background: url(/img/boton-brillo-claro.webp) center / 100% 100% no-repeat; }

.btn-peligro { color: var(--blanco); border: 1px dashed rgb(255 255 255 / .5); }
.btn-peligro:hover:not(:disabled) { background: var(--blanco); color: var(--tinta); border-style: solid; }
.btn-grande { min-height: 58px; padding: .9rem 2rem; font-size: 1.06rem; }
.btn-chico { min-height: 40px; padding: .45rem 1.05rem; font-size: .9rem; }
.btn-ancho { width: 100%; }
/* Google: su variante oscura oficial, con el logo en color como exige su marca */
.btn-google { color: #e3e3e3; background: #131314; border-color: #8e918f; }
.btn-google:hover:not(:disabled) { border-color: var(--blanco); }
.btn-google svg { width: 20px; height: 20px; }

/* Formularios de cristal */
.campo { display: grid; gap: .4rem; }
.campo > label, .campo > .campo-t { font-size: .86rem; font-weight: 500; color: var(--gris); }
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width: 100%; min-height: 50px; padding: .72rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: rgb(255 255 255 / .05); color: var(--blanco); font-size: 1rem; box-shadow: inset 0 1px 2px rgb(0 0 0 / .4);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
select { background-color: #111; }
input::placeholder, textarea::placeholder { color: var(--gris-2); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--blanco); background: rgb(255 255 255 / .08); box-shadow: 0 0 0 3px rgb(255 255 255 / .14); }
.campo-error input, .campo-error textarea { border-color: var(--blanco); border-width: 2px; }
.casilla { display: grid; grid-template-columns: 24px 1fr; gap: .65rem; align-items: start; font-size: .85rem; line-height: 1.4; color: var(--gris); cursor: pointer; }
.casilla input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1px solid var(--borde-fuerte); border-radius: 7px; background: var(--cristal-2); box-shadow: var(--brillo-borde); cursor: pointer; transition: background-color .15s ease, transform .2s var(--suave); }
.casilla input:hover { border-color: var(--blanco); }
.casilla input:active { transform: scale(.9); }
.casilla input:checked { background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; border-color: var(--blanco); }
.casilla a { color: var(--blanco); }
.form-error { position: relative; padding: .55rem .8rem .55rem 2.05rem; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: rgb(255 255 255 / .08); color: var(--blanco); font-size: .9rem; font-weight: 500; }
.form-error::before { content: "!"; position: absolute; left: .7rem; top: .58rem; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--blanco); color: var(--tinta); font-size: .72rem; font-weight: 800; line-height: 1; }
.form-ok { color: var(--blanco); font-size: .9rem; font-weight: 500; }
.separador { display: flex; align-items: center; gap: .75rem; color: var(--gris-2); font-size: .82rem; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

/* Lista de email */
.lista { display: grid; gap: .75rem; }
.lista-fila { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.lista-fila input { border-radius: 999px; padding-left: 1.25rem; }
.lista-ok { padding: 1rem 1.15rem; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); background: var(--cristal-2); box-shadow: var(--brillo-borde); }
.lista-ok strong { display: block; font: 600 1.25rem/1.15 var(--display); letter-spacing: -.03em; margin-bottom: .25rem; }
.cta-nota { margin-top: .65rem; font-size: .86rem; color: var(--gris); }
@media (max-width: 420px) {
  .lista-fila { grid-template-columns: 1fr; }
}

/* Anillo de plazas */
.anillo { position: relative; aspect-ratio: 1; width: 100%; }
.anillo svg { width: 100%; height: 100%; overflow: visible; }
.anillo circle { fill: none; stroke: rgb(255 255 255 / .22); stroke-width: 1.1; transition: fill .25s ease, stroke .25s ease; }
.anillo circle.on { fill: var(--blanco); stroke: var(--blanco); }
.anillo circle.mia { fill: var(--blanco); stroke: var(--blanco); r: 6.4px; filter: drop-shadow(0 0 5px #fff); }
.anillo-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }

.tira-plazas { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; }
.tira-plazas i { aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(255 255 255 / .22); }
.tira-plazas i.on { background: var(--blanco); border-color: var(--blanco); }

/* Portada de curso sin foto: misma plantilla para los 16 cursos */
.portada, .portada-foto { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radio-chico); overflow: hidden; object-fit: cover; }
.portada { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 7%; background: radial-gradient(120% 85% at 92% 0%, rgb(255 255 255 / .2), transparent 58%), linear-gradient(170deg, #191919, #030303); container-type: inline-size; isolation: isolate; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), inset 0 1px 0 rgb(255 255 255 / .22); }
.portada-anillo { position: absolute; z-index: -1; width: 112%; max-width: none; height: auto; top: -24%; right: -36%; opacity: .5; transform: rotate(var(--giro, 0deg)); }
.portada-top { display: flex; justify-content: space-between; gap: .5em; font: 500 max(9px, 4.4cqw)/1.2 var(--mono); letter-spacing: .08em; color: var(--gris); }
.portada-top span:last-child { color: var(--blanco); }
.portada-pie strong { display: block; font: 600 12.2cqw/1.02 var(--display); letter-spacing: -.045em; color: var(--blanco); text-wrap: balance; }
@container (max-width: 130px) { .portada-top span:first-child { display: none; } .portada-top { justify-content: flex-end; } }
.portada-raya { display: block; width: 16%; height: 1px; margin-bottom: 5cqw; background: var(--blanco); }

/* Vídeo */
.video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: #060606; box-shadow: var(--brillo-borde), var(--sombra); }
.video img, .video video, .video iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-fachada { cursor: pointer; }
.video-play { width: 64px; height: 64px; border-radius: 50%; background: var(--blanco); display: grid; place-items: center; box-shadow: 0 0 0 10px rgb(255 255 255 / .1), 0 0 44px rgb(255 255 255 / .3); }
.video-play::after { content: ""; margin-left: 5px; border-left: 19px solid var(--tinta); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.video-fachada .video-play { position: absolute; inset: 0; margin: auto; }
.video-vacio { background: radial-gradient(90% 120% at 50% 40%, #262626, #030303); }
.video-anillo { position: absolute !important; inset: 0; margin: auto; width: auto !important; height: 150% !important; top: -25%; opacity: .3; object-fit: contain !important; }
.video-aviso { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .85rem; padding: 1rem; text-align: center; font-size: .94rem; color: var(--gris); }

/* Barra de demostración (solo en local) */
.demo { position: fixed; z-index: 90; right: 8px; top: 62px; max-width: min(92vw, 360px); padding: .5rem .75rem; border: 1px dashed rgb(255 255 255 / .5); border-radius: var(--radio-chico); background: rgb(0 0 0 / .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--sombra); font-size: .8rem; }
body:has(#app) .demo { top: auto; bottom: 86px; }
@media (min-width: 960px) { body:has(#app) .demo { bottom: 14px; } }
.demo summary { cursor: pointer; font: 500 .68rem var(--mono); letter-spacing: .08em; color: var(--gris); text-transform: uppercase; }
.demo-grupo { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.demo-grupo > span { width: 100%; color: var(--gris-2); }
.demo button { padding: .3rem .6rem; border: 1px solid var(--borde-fuerte); border-radius: 99px; background: none; cursor: pointer; font-size: .76rem; }
.demo button:hover { border-color: var(--blanco); }
.demo button.activo { background: var(--blanco); border-color: var(--blanco); color: var(--tinta); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before { animation: none; }
  .btn-primario::after { display: none; }
  .btn-primario::before { background: var(--blanco); }
  .btn-borde:hover::before { background: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Pantalla Sin conexion (la guarda el service worker) */
.fuera { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 2rem 24px; text-align: center; }
.fuera h1 { font-size: 2.6rem; }
.fuera p { max-width: 36ch; }

/* Guia para poner la app en la pantalla de inicio del iPhone (la usan la plataforma y el panel) */
.guia-ios { position: fixed; z-index: 95; inset: 0; display: flex; align-items: flex-end; justify-content: center; overflow-y: auto; background: rgb(0 0 0 / .78); }
.guia-caja { display: grid; gap: .9rem; width: min(100%, 480px); max-height: 100%; overflow-y: auto; padding: 1.3rem 16px calc(1.3rem + env(safe-area-inset-bottom)); border: 1px solid var(--borde-fuerte); border-radius: 24px 24px 0 0; background: #0c0c0c; box-shadow: var(--brillo-borde), var(--sombra); }
.guia-caja h2 { font-size: 1.6rem; }
.guia-pasos { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.guia-pasos li { display: grid; gap: .45rem; }
.guia-pasos p { font-size: .94rem; line-height: 1.4; color: var(--gris); }
.guia-pasos b { color: var(--blanco); }
.guia-dib { width: 100%; max-width: 280px; height: auto; color: var(--blanco); padding: .4rem; border: 1px solid var(--borde); border-radius: 14px; background: rgb(255 255 255 / .04); }
.guia-nota { font-size: .8rem; }
@media (min-width: 600px) { .guia-ios { align-items: center; } .guia-caja { border-radius: 24px; padding-bottom: 1.3rem; } }
.guia-caja:focus { outline: none; }