/* Selvamania Espacial (demo). Colores del logo y de sus fotos: violeta de las luces del salón, azul noche, verde lima de las letras, celeste del planeta. */
:root {
  color-scheme: light dark;
  --fondo: #0d0a2e; --fondo2: #150f45; --sup: #1c1560; --linea: rgba(255,255,255,.14);
  --texto: #f4f1ff; --suave: #c9c2ee; --lima: #b6f23a; --cian: #35d0ff; --violeta: #7b4dff; --tinta: #0d0a2e;
  --t: "Bricolage Grotesque", system-ui, sans-serif; --c: "Figtree", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #0d0a2e; --fondo2: #150f45; --sup: #1c1560; --linea: rgba(255,255,255,.14); --texto: #f4f1ff; --suave: #c9c2ee; --lima: #b6f23a; --cian: #35d0ff; --violeta: #7b4dff; --tinta: #0d0a2e; }
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 1.0625rem/1.6 var(--c); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
input { color-scheme: light; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--t); font-weight: 800; line-height: 1.02; margin: 0; letter-spacing: -.02em; font-style: normal; }
h1 { font-size: clamp(2.5rem, 6.2vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
p { margin: 0 0 1rem; }
.cont { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.sub { color: var(--suave); font-size: 1.15rem; margin-top: .8rem; }
section { position: relative; }
:focus-visible { outline: 3px solid var(--cian); outline-offset: 3px; }

/* Títulos por líneas (SplitText) */
.linea-caja { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
html:not(.js-listo) [data-lineas] { opacity: 1; }

/* Aparecer */
[data-revela] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
[data-revela].visto, html:not(.js-listo) [data-revela] { opacity: 1; transform: none; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .8rem 1.6rem; border-radius: 999px; border: 2px solid var(--lima); background: var(--lima); color: var(--tinta); font: 700 1.05rem/1 var(--c); text-decoration: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: transform .2s; }
.boton::before { content: ""; position: absolute; inset: 0; background: var(--texto); transform: translateX(-101%); transition: transform .35s cubic-bezier(.2,.8,.2,1); z-index: -1; }
.boton:hover::before { transform: none; }
.boton:active { transform: scale(.97); }
.boton--linea { background: transparent; color: var(--texto); border-color: var(--linea); }
.boton--linea::before { background: var(--violeta); }
.boton--lima { background: var(--tinta); color: var(--lima); border-color: var(--tinta); }
.boton--lima::before { background: var(--lima); }
.boton--lima:hover { color: var(--tinta); }
.boton--chico { min-height: 44px; padding: .6rem 1.2rem; font-size: .98rem; }

/* Carga */
.carga { position: fixed; inset: 0; z-index: 100; background: var(--fondo); display: grid; place-items: center; overflow: hidden; }
.carga__estrellas, .estrellas { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 78% 12%, #fff, transparent), radial-gradient(2px 2px at 40% 70%, var(--cian), transparent), radial-gradient(1.5px 1.5px at 88% 62%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 88%, #fff, transparent), radial-gradient(2px 2px at 62% 38%, var(--lima), transparent), radial-gradient(1px 1px at 52% 10%, #fff, transparent), radial-gradient(1px 1px at 8% 56%, #fff, transparent), radial-gradient(1px 1px at 94% 90%, #fff, transparent); background-size: 520px 520px; opacity: .8; }
.carga__centro { position: relative; text-align: center; }
.carga__logo { width: 96px; height: 96px; margin: 0 auto 1rem; border-radius: 50%; }
.carga__num { font: 800 clamp(5rem, 18vw, 9rem)/1 var(--t); color: var(--lima); }
.carga__txt { color: var(--suave); margin: .4rem 0 0; font-weight: 600; }
.carga__cohete { position: absolute; left: 50%; bottom: 8vh; margin-left: -20px; }
html.sin-carga .carga { display: none; }

/* Barra */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 1.5rem; padding: .7rem max(1.25rem, calc((100% - 1180px) / 2)); transition: background .3s, backdrop-filter .3s; }
.barra--baja { background: rgba(13,10,46,.82); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea); }
.barra__marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; font: 800 1.1rem/1 var(--t); margin-right: auto; }
.barra__marca img { border-radius: 50%; }
.barra__nav { display: flex; gap: 1.5rem; }
.barra__nav a { text-decoration: none; font-weight: 600; color: var(--suave); transition: color .2s; }
.barra__nav a:hover { color: var(--lima); }
.barra__menu { display: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--linea); background: transparent; position: relative; cursor: pointer; }
.barra__menu i { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--texto); transition: transform .25s; }
.barra__menu i:first-child { top: 19px; } .barra__menu i:last-child { top: 27px; }
.menu-abierto .barra__menu i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-abierto .barra__menu i:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-cel { position: fixed; inset: 0; z-index: 49; background: var(--fondo); padding: 6rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.menu-cel[hidden] { display: none; }
.menu-cel a:not(.boton) { font: 800 2rem/1.2 var(--t); text-decoration: none; padding: .3rem 0; }

/* Portada */
.portada { min-height: 100svh; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 2rem; padding: 7rem max(1.25rem, calc((100% - 1180px) / 2)) 4rem; background: radial-gradient(900px 600px at 80% 40%, rgba(123,77,255,.45), transparent 70%), radial-gradient(600px 400px at 10% 90%, rgba(53,208,255,.18), transparent 70%), var(--fondo); overflow: hidden; }
.portada__texto { position: relative; z-index: 2; }
.portada__sub { font-size: 1.25rem; color: var(--suave); max-width: 34rem; margin: 1.5rem 0 2rem; }
.portada__botones { display: flex; flex-wrap: wrap; gap: .9rem; }
.portada__nota { margin: 1.6rem 0 0; color: var(--suave); }
.portada__nota b { color: var(--texto); }
.estrella { color: var(--lima); }
.portada__arte { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 620px; justify-self: center; width: 100%; }
.astro { width: 100%; border-radius: 32px; box-shadow: 0 30px 80px rgba(0,0,0,.5); position: relative; z-index: 2; }
.orbita { position: absolute; border: 2px dashed rgba(255,255,255,.25); border-radius: 50%; }
.orbita::after { content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 18px var(--cian); }
.orbita--1 { inset: 2%; }
.orbita--2 { inset: -6%; border-color: rgba(182,242,58,.3); }
.orbita--2::after { background: var(--lima); box-shadow: 0 0 18px var(--lima); top: auto; bottom: -9px; }

/* Datos */
.datos { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--linea); background: var(--fondo2); }
.datos > div { padding: 2.2rem 1.5rem 2.2rem 2rem; border-right: 1px solid var(--linea); }
.datos > div:first-child { padding-left: max(1.25rem, calc((100vw - 1180px) / 2)); }
.datos > div:last-child { border-right: 0; }
.datos b { display: block; font: 800 clamp(2rem, 4vw, 3.2rem)/1 var(--t); color: var(--lima); }
.datos span span, .datos b span { color: inherit; }
.datos > div > span { display: block; margin-top: .5rem; color: var(--suave); font-size: .98rem; }

/* Sectores */
.sectores { padding: 6rem 0; }
.plano { display: grid; grid-template-columns: 360px 1fr; gap: 2rem; margin-top: 2.5rem; align-items: start; }
.plano__lista { display: grid; gap: .6rem; }
.sec { display: flex; align-items: center; gap: 1rem; text-align: left; width: 100%; padding: 1rem 1.1rem; border-radius: 22px; border: 2px solid var(--linea); background: transparent; color: var(--texto); font: 700 1.1rem/1.2 var(--c); cursor: pointer; transition: background .25s, border-color .25s, transform .25s; }
.sec small { display: block; font-weight: 400; color: var(--suave); font-size: .92rem; margin-top: .2rem; }
.sec__n { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sup); font: 800 1.15rem/1 var(--t); color: var(--cian); transition: background .25s, color .25s; }
.sec:hover { border-color: var(--cian); }
.sec.on { background: var(--sup); border-color: var(--lima); }
.sec.on .sec__n { background: var(--lima); color: var(--tinta); }
.plano__vista { position: relative; border-radius: 28px; overflow: hidden; background: var(--sup); }
.plano__fotos { position: relative; aspect-ratio: 4 / 3; }
.pf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.pf.on { opacity: 1; }
.plano__info { padding: 1.5rem 1.8rem 1.8rem; min-height: 11rem; }
.info { display: none; }
.info.on { display: block; animation: sube .45s ease; }
.info h3 { font-size: 1.7rem; margin-bottom: .6rem; }
.info p { color: var(--suave); margin: 0; }
@keyframes sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Cumples */
.cumples { padding: 6rem 0; background: var(--fondo2); }
.cumples__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center; }
.cumples__foto img { width: 100%; aspect-ratio: 5 / 5.4; object-fit: cover; border-radius: 28px; }
.cumples__texto p { color: var(--suave); margin-top: 1.2rem; }
.cumples__lista { list-style: none; padding: 0; margin: 1.8rem 0; display: grid; gap: 0; border-top: 1px solid var(--linea); }
.cumples__lista li { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linea); }
.cumples__lista b { font: 800 1.15rem/1.2 var(--t); color: var(--lima); }
.cumples__lista span { color: var(--suave); }
.cumples__texto .cumples__nota { color: var(--texto); }

/* Juego libre */
.libre { padding: 6rem 0; }
.pase { display: grid; grid-template-columns: 1fr auto 320px; margin-top: 2.5rem; background: var(--lima); color: var(--tinta); border-radius: 28px; overflow: hidden; }
.pase p { color: var(--tinta); }
.pase__izq, .pase__der { padding: 2rem 2.2rem; }
.pase__t { font-weight: 700; opacity: .7; margin-bottom: .3rem; }
.pase__g { font: 800 clamp(1.7rem, 3vw, 2.4rem)/1.05 var(--t); margin-bottom: 1rem; }
.pase__corte { width: 0; margin-block: 14px; border-left: 3px dashed rgba(13,10,46,.45); position: relative; }
.pase__corte::before, .pase__corte::after { content: ""; position: absolute; left: -17px; width: 30px; height: 30px; border-radius: 50%; background: var(--fondo); }
.pase__corte::before { top: -30px; } .pase__corte::after { bottom: -30px; }
.pase__der { display: flex; flex-direction: column; justify-content: space-between; }

/* Reseñas */
.resenas { padding: 0 0 6rem; }
.resenas__caja { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; padding: 2rem 2.4rem; border: 2px solid var(--linea); border-radius: 28px; }
.resenas__nota b { font: 800 4rem/1 var(--t); color: var(--lima); display: block; }
.estrellas-fila { color: var(--lima); letter-spacing: .15em; font-size: 1.3rem; }
.resenas__caja p { margin: 0; flex: 1 1 14rem; color: var(--suave); font-size: 1.15rem; }

/* Armar */
.armar { padding: 6rem 0; background: linear-gradient(180deg, var(--fondo2), var(--fondo)); }
.armar__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.armar__texto p { color: var(--suave); margin-top: 1.2rem; }
.armar__prev { margin-top: 2rem; padding: 1.3rem 1.5rem; background: var(--sup); border-radius: 22px; border-left: 5px solid var(--cian); }
.armar__prevt { font-weight: 700; margin: 0 0 .4rem !important; color: var(--cian) !important; }
.armar__msg { margin: 0 !important; color: var(--texto) !important; min-height: 3.2em; }
.pasos { background: var(--sup); border-radius: 28px; padding: 1.8rem; }
.pasos__arriba { display: flex; align-items: center; gap: 1rem; font-weight: 700; margin-bottom: 1.4rem; color: var(--suave); }
.pasos__barra { flex: 1; height: 6px; border-radius: 6px; background: var(--linea); overflow: hidden; }
.pasos__barra i { display: block; height: 100%; background: var(--lima); transform-origin: left; transform: scaleX(.2); transition: transform .4s; }
.paso[hidden] { display: none; }
.paso__preg { font: 800 1.6rem/1.15 var(--t); margin-bottom: 1.2rem; }
.ops { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.op { min-height: 58px; padding: .8rem 1rem; border-radius: 18px; border: 2px solid var(--linea); background: transparent; color: var(--texto); font: 700 1.05rem/1.15 var(--c); cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.op:hover { border-color: var(--cian); }
.op:active { transform: scale(.97); }
.op.elegido { background: var(--lima); border-color: var(--lima); color: var(--tinta); }
.paso__atras { margin-top: 1.1rem; background: none; border: 0; color: var(--suave); font: 600 1rem var(--c); cursor: pointer; padding: .6rem 0; min-height: 44px; }
.paso__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.paso__fila .paso__atras { margin: 0; }
.campo { display: block; font-weight: 600; }
.campo input { display: block; width: 100%; margin-top: .5rem; min-height: 54px; padding: .8rem 1rem; border-radius: 16px; border: 2px solid var(--linea); background: #fff; color: #0d0a2e; font: 400 1.1rem var(--c); }

/* Preguntas */
.faq { padding: 6rem 0; }
.faq__lista { margin-top: 2.5rem; max-width: 52rem; border-top: 1px solid var(--linea); }
details { border-bottom: 1px solid var(--linea); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; font: 700 1.2rem/1.3 var(--c); min-height: 56px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sup); color: var(--lima); font-size: 1.4rem; transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--suave); margin: 0 0 1.4rem; max-width: 40rem; }

/* Dónde */
.donde { padding: 2rem 0 6rem; }
.donde__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: center; }
.donde__dir { font: 700 1.3rem/1.3 var(--t); color: var(--lima); }
.donde__texto p { color: var(--suave); }
.donde__texto .donde__dir { color: var(--lima); }
.donde__texto .portada__botones { margin-top: 1.5rem; }
.mapa { position: relative; display: block; border-radius: 28px; overflow: hidden; background: var(--sup); }
.mapa img { width: 100%; aspect-ratio: 1599 / 780; object-fit: cover; filter: saturate(.9); }
.mapa__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); background: var(--tinta); color: var(--lima); font: 800 .95rem/1 var(--c); padding: .6rem .9rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.mapa__pin::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--tinta); border-bottom: 0; }
.mapa__pin i { display: none; }

/* Pie */
.pie { background: #080620; padding: 3.5rem 0 1.5rem; }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.pie img { border-radius: 50%; margin-bottom: .8rem; }
.pie__n { font: 800 1.4rem/1 var(--t); margin-bottom: .6rem !important; }
.pie p, .pie a { color: var(--suave); font-size: .98rem; margin: 0 0 .4rem; }
.pie a { display: block; text-decoration: none; padding: .2rem 0; }
.pie a:hover { color: var(--lima); }
.pie__t { color: var(--texto) !important; font-weight: 700; margin-bottom: .6rem !important; }
.pie__demo { text-align: center; margin: 2.5rem 0 0 !important; font-size: .9rem !important; }

/* Barra fija del celu */
.barra-cel { display: none; }

/* Modo demo */
.demo { position: fixed; inset: 0; z-index: 200; background: rgba(5,3,25,.8); display: grid; place-items: center; padding: 1.25rem; }
.demo[hidden] { display: none; }
.demo__caja { background: var(--sup); border-radius: 26px; padding: 1.8rem; max-width: 30rem; width: 100%; }
.demo__t { font: 800 1.5rem/1 var(--t); color: var(--lima); }
.demo__msg { background: var(--fondo); border-radius: 16px; padding: 1rem 1.2rem; color: var(--texto); border-left: 5px solid var(--lima); }

/* Celular */
@media (max-width: 900px) {
  .barra__nav, .barra .boton--chico { display: none; }
  .barra__menu { display: block; }
  .portada { grid-template-columns: 1fr; padding-top: 6.5rem; padding-bottom: 3rem; min-height: auto; gap: 1rem; }
  .portada__arte { max-width: 380px; order: -1; }
  .portada__botones .boton { flex: 1 1 100%; }
  .datos { grid-template-columns: 1fr 1fr; }
  .datos > div { border-bottom: 1px solid var(--linea); padding: 1.4rem 1.2rem; }
  .datos > div:nth-child(2n) { border-right: 0; }
  .plano, .cumples__grid, .armar__grid, .donde__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .plano__lista { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: none; }
  .sec { scroll-snap-align: start; }
  .cumples__lista li { grid-template-columns: 1fr; gap: .2rem; }
  .pase { grid-template-columns: 1fr; }
  .pase__corte { width: auto; height: 0; margin: 0 14px; border-left: 0; border-top: 3px dashed rgba(13,10,46,.45); }
  .pase__corte::before, .pase__corte::after { top: -17px; bottom: auto; left: auto; }
  .pase__corte::before { left: -44px; } .pase__corte::after { right: -44px; }
  .pase__izq, .pase__der { padding: 1.6rem; }
  .ops { grid-template-columns: 1fr 1fr; }
  .pie__grid { grid-template-columns: 1fr; }
  .mapa img { aspect-ratio: 4 / 5; }
  .mapa__pin { font-size: .82rem; padding: .5rem .75rem; }
  .barra-cel { display: flex; gap: .6rem; position: fixed; inset: auto 0 0 0; z-index: 45; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(13,10,46,.92); backdrop-filter: blur(14px); border-top: 1px solid var(--linea); }
  .barra-cel .boton { flex: 1.5; } .barra-cel .boton--linea { flex: 1; }
  body { padding-bottom: 5rem; }
  .sectores, .cumples, .libre, .armar, .faq { padding: 4rem 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
i, em, address { font-style: normal; }

.plano__lista { position: sticky; top: 6rem; }
@media (max-width: 900px) { .plano__lista { position: static; } .datos > div:first-child { padding-left: 1.2rem; } }

/* Mejora 2: cinta de juegos, vista previa del mensaje y WhatsApp directo */
.cinta { overflow: hidden; background: var(--lima); color: #0d0a2e; padding: .9rem 0; }
.cinta__fila { display: flex; gap: 2.6rem; width: max-content; animation: cinta 38s linear infinite; font: 800 clamp(1.1rem, 2.2vw, 1.6rem)/1 var(--t); white-space: nowrap; }
.cinta__fila span::after { content: "✦"; margin-left: 2.6rem; font-size: .8em; }
@keyframes cinta { to { transform: translateX(-50%); } }
.armar__directo { display: inline-block; margin-top: 1.2rem; color: var(--cian); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; padding: .6rem 0; }
@media (max-width: 900px) { .armar__directo { display: block; font-size: 1.05rem; } .cinta__fila { gap: 1.8rem; } .cinta__fila span::after { margin-left: 1.8rem; } }