/* ══════════════════════════════════════════════════════════════
   ARXLAB v7 — «Nuestro universo»
   Hoja de estilos del index. Las páginas de departamento
   (taiga.html / goldfish.html) siguen usando styles.css.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:#04060c;
  --bg-2:#070a14;
  --ink:#f3f5fa;
  --dim:#9aa3b5;
  --line:rgba(170,195,255,.13);
  --acc:#8fd4ff;            /* celeste estelar */
  --acc-soft:rgba(143,212,255,.14);

  --delivery:#ff8a3d;
  --kit:#8fb7e8;
  --comarca:#7fd6a4;
  --agenda:#d3a5ff;
  --comet:#ffa040;

  --f-display:'Clash Display',sans-serif;
  --f-body:'General Sans',system-ui,sans-serif;
  --f-mono:'Fragment Mono',monospace;

  --wrap:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
/* sin scroll-behavior:smooth — Lenis maneja el scroll; si conviven se traba */
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--acc);color:#04121f}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em}
.acc{color:var(--acc)}
.tabnum{font-variant-numeric:tabular-nums}
.arr{display:inline-block;transition:transform .25s ease}

/* ── El espacio ─────────────────────────────────────────────── */
#space{
  position:fixed;inset:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none;
}
.nebula{
  position:fixed;inset:-20%;z-index:0;pointer-events:none;
  opacity:.5;
  background:
    radial-gradient(ellipse 60% 45% at 18% 20%, var(--neb-a,rgba(70,100,180,.10)), transparent 60%),
    radial-gradient(ellipse 55% 50% at 85% 75%, var(--neb-b,rgba(120,80,180,.07)), transparent 60%);
  transition:--neb-a 1.2s,--neb-b 1.2s;
}
/* tinte del espacio según la escena activa */
body[data-tint="delivery"] .nebula{background:
  radial-gradient(ellipse 60% 45% at 18% 25%, rgba(255,120,50,.09), transparent 60%),
  radial-gradient(ellipse 55% 50% at 85% 75%, rgba(180,70,20,.06), transparent 60%)}
body[data-tint="kit"] .nebula{background:
  radial-gradient(ellipse 60% 45% at 80% 22%, rgba(90,140,220,.10), transparent 60%),
  radial-gradient(ellipse 55% 50% at 15% 78%, rgba(90,220,200,.05), transparent 60%)}
body[data-tint="comarca"] .nebula{background:
  radial-gradient(ellipse 60% 45% at 20% 70%, rgba(70,190,120,.09), transparent 60%),
  radial-gradient(ellipse 55% 50% at 82% 20%, rgba(40,140,110,.06), transparent 60%)}
body[data-tint="agenda"] .nebula{background:
  radial-gradient(ellipse 60% 45% at 78% 70%, rgba(170,110,255,.09), transparent 60%),
  radial-gradient(ellipse 55% 50% at 18% 22%, rgba(110,80,220,.06), transparent 60%)}
body[data-tint="reveal"] .nebula{background:
  radial-gradient(ellipse 70% 55% at 50% 40%, rgba(120,170,255,.10), transparent 65%)}
.nebula{transition:background 1.4s ease}

main{position:relative;z-index:2}

/* ── Nav ────────────────────────────────────────────────────── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  transition:background .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
#nav.solid{
  background:rgba(4,6,12,.72);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.brand{
  font-family:var(--f-display);font-weight:600;font-size:1.05rem;
  letter-spacing:.14em;color:var(--ink);text-decoration:none;
  display:flex;align-items:baseline;gap:10px;
}
.brand i{
  font-style:normal;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.1em;color:var(--dim);font-weight:400;
}
.nav-cta{display:flex;align-items:center;gap:12px}

/* botones */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-body);font-weight:500;font-size:.88rem;
  padding:12px 22px;border-radius:99px;text-decoration:none;cursor:pointer;
  border:1px solid var(--line);color:var(--ink);background:transparent;
  transition:background .25s,color .25s,border-color .25s,transform .2s;
}
.btn-fill{background:var(--acc);border-color:var(--acc);color:#04121f}
.btn-fill:hover{background:#b5e3ff;border-color:#b5e3ff;transform:translateY(-1px)}
.btn-fill:hover .arr{transform:translateX(3px)}
.btn-sm{padding:9px 18px;font-size:.8rem}

/* ── Portada ────────────────────────────────────────────────── */
.hero{
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  position:relative;padding:120px 0 80px;
}
.eyebrow{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:26px;
}
.h-mega{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(2.6rem,7.2vw,5.4rem);
  line-height:1.04;letter-spacing:-.01em;
  margin-bottom:28px;
}
.hero .lede{
  color:var(--dim);font-size:clamp(1rem,1.6vw,1.15rem);max-width:560px;
  margin:0 auto 34px;
}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(143,212,255,.5)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(143,212,255,0)}}
.scrollcue{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  color:var(--dim);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scrollcue .bar{
  width:1px;height:44px;background:linear-gradient(var(--acc),transparent);
  display:block;animation:cue 2s ease-in-out infinite;transform-origin:top;
}
@keyframes cue{0%{transform:scaleY(0);opacity:0}30%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ══ Escenas de planetas ═════════════════════════════════════ */
.scene{position:relative}
.scene-pin{min-height:100svh;display:flex;align-items:center}
.stage{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  align-items:center;width:100%;min-height:100svh;padding-top:70px;padding-bottom:40px;
}
.scene[data-side="l"] .stage .planet{order:2}
.scene[data-side="l"] .stage .p-card{order:1}

/* card */
.p-card{max-width:480px}
/* marca del producto: chip tipo app-icon + nombre */
.p-brand{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.p-ico{
  width:42px;height:42px;border-radius:11px;overflow:hidden;flex:none;
  background:#0c0f16;border:1px solid var(--line);
}
.p-ico img{width:100%;height:100%;object-fit:cover;display:block}
.p-name{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc);
}
/* Kit: la marca viva. El chip no va dentro del cuadradito de app —
   los ocho pines salen del cuerpo y necesitan aire — y se encienden
   en ronda, uno cada 150ms, como cuando la IA de Kit está ejecutando. */
.p-chip{
  display:block;width:52px;height:52px;flex:none;
  color:var(--ink);margin:-3px 0;
}
.p-chip svg{width:100%;height:100%;display:block;overflow:visible}
.p-chip text{font-family:var(--f-body);font-weight:600;fill:var(--bg)}
.p-chip .pines path{opacity:.16;animation:chip 1.2s linear infinite}
.p-chip .pines path:nth-child(1){animation-delay:0s}
.p-chip .pines path:nth-child(2){animation-delay:.15s}
.p-chip .pines path:nth-child(3){animation-delay:.3s}
.p-chip .pines path:nth-child(4){animation-delay:.45s}
.p-chip .pines path:nth-child(5){animation-delay:.6s}
.p-chip .pines path:nth-child(6){animation-delay:.75s}
.p-chip .pines path:nth-child(7){animation-delay:.9s}
.p-chip .pines path:nth-child(8){animation-delay:1.05s}
@keyframes chip{0%,100%{opacity:.16}9%{opacity:1}}
.p-claim{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.005em;
  margin-bottom:18px;
}
.p-desc{color:var(--dim);margin-bottom:22px;max-width:44ch}
.p-desc b{color:var(--ink);font-weight:500}
.p-stats{
  color:var(--ink);font-size:.7rem;line-height:1.9;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin-bottom:22px;display:block;
}
.p-link{color:var(--acc);text-decoration:none;text-transform:uppercase;font-size:.68rem}
.p-link:hover .arr{transform:translateX(4px)}

/* ── El planeta (base común) ────────────────────────────────── */
.planet{
  position:relative;
  width:min(38vw,460px);aspect-ratio:1;
  margin:0 auto;
  will-change:transform,opacity;
}

/* ── La revelación ──────────────────────────────────────────── */
.sc-reveal{
  min-height:110svh;display:flex;align-items:center;text-align:center;
  padding:120px 0;
}
.sc-reveal .wrap{width:100%}
.h-big{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(2rem,5vw,3.8rem);line-height:1.1;letter-spacing:-.01em;
  margin-bottom:34px;
}
.counter{color:var(--dim);font-size:.72rem;letter-spacing:.14em}
.counter b{color:var(--acc);font-size:1.05rem;margin-right:6px;font-weight:400}

/* ── El cometa global (Goldfish viaja con vos) — WebGL ─────────
   #cometa es una caja de 520×200 con la cabeza del cometa en (432,104).
   El margen negativo hace que esa cabeza caiga en el left/top que mueve
   el scroll, y el transform-origin en la cabeza hace que escale/rote
   desde ahí (como un cometa real: la cabeza manda, la cola la sigue). */
.cometa{
  position:fixed;left:0;top:0;width:520px;height:200px;
  margin:-104px 0 0 -432px;transform-origin:432px 104px;
  z-index:1;pointer-events:none;opacity:0;will-change:transform;
}
.cometa.front{z-index:5}
.cometa canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* ── La tripulación: escenas separadas, sin jaulas ───────────── */
.crew-scene{position:relative}
.crew-pin{min-height:100svh;display:flex;align-items:center}
.crew-taiga{min-height:90svh;display:flex;align-items:center;padding:80px 0}
.crew-copy{text-align:center;max-width:640px}
.crew-role{display:block;color:var(--comet);text-transform:uppercase;margin-bottom:14px}
.crew-taiga .crew-role{color:var(--acc)}
.crew-name{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(2.6rem,7vw,5rem);line-height:1;letter-spacing:.01em;
  margin-bottom:20px;
}
.crew-desc{color:var(--dim);font-size:1.05rem;max-width:46ch;margin:0 auto 26px}

/* Taiga: la estación (arte propio, grande) — con aire: el radar mide 210px
   de diámetro, así que la caja tiene que medir al menos eso más un respiro */
.art-station{position:relative;height:230px;margin-bottom:44px}
.art-station .st-core{
  position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;background:var(--acc);
  box-shadow:0 0 20px 4px rgba(143,212,255,.6),0 0 60px 16px rgba(143,212,255,.15);
  animation:pulse 2.6s ease-in-out infinite;
}
.art-station .st-ring{
  position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;
  border:1px solid rgba(143,212,255,.32);border-radius:50%;
  border-top-color:rgba(143,212,255,.85);
  animation:stationSpin 14s linear infinite;
}
.art-station .st-ring.r2{
  width:160px;height:160px;margin:-80px 0 0 -80px;
  border-color:rgba(143,212,255,.14);border-bottom-color:rgba(143,212,255,.5);
  animation-duration:26s;animation-direction:reverse;
}
@keyframes stationSpin{to{transform:rotate(360deg)}}
.art-station .st-ring.r3{
  width:210px;height:210px;margin:-105px 0 0 -105px;
  border-color:rgba(143,212,255,.07);border-left-color:rgba(143,212,255,.3);
  animation-duration:44s;
}
.art-station .radar{
  position:absolute;left:50%;top:50%;width:210px;height:210px;margin:-105px 0 0 -105px;
  border-radius:50%;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,rgba(143,212,255,.20),transparent 55deg);
  animation:stationSpin 7s linear infinite;
}
.art-station .st-blink{
  position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  background:#dff2ff;box-shadow:0 0 8px 2px rgba(143,212,255,.6);
  animation:blink 3s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}
.art-station .st-strut{position:absolute;left:50%;top:50%;background:rgba(143,212,255,.28)}
.art-station .s1{width:220px;height:1px;margin:0 0 0 -110px}
.art-station .s2{width:1px;height:64px;margin:-32px 0 0 0}

/* ── Contacto ───────────────────────────────────────────────── */
.sc-mesa{padding:130px 0 150px}
.sec-head{max-width:640px;margin-bottom:56px}
.sec-head h2{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.12;margin:14px 0 16px;
}
.sec-head p{color:var(--dim)}
.forms{
  border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(170deg,rgba(255,255,255,.03),rgba(255,255,255,0) 60%);
  overflow:hidden;
}
/* El selector: dos botones-tarjeta con radio visible — que se entienda
   de una que son dos caminos y cuál está elegido, sobre todo en mobile */
.f-tabs{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:24px 26px 6px}
.f-tab{
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;
  cursor:pointer;text-align:left;padding:16px 18px;color:var(--dim);
  transition:border-color .25s,background .25s,color .25s;
}
.f-tab .tt{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:500;font-size:1.02rem;color:var(--ink)}
.f-tab .tt::before{
  content:'';width:15px;height:15px;border-radius:50%;flex:none;
  border:1.5px solid var(--dim);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.f-tab .td{display:block;font-size:.8rem;line-height:1.45;margin-top:6px;opacity:.8;padding-left:27px}
.f-tab:hover{border-color:rgba(143,212,255,.45)}
.f-tab.on{background:var(--acc-soft);border-color:var(--acc);color:var(--ink)}
.f-tab.on .tt{color:var(--acc)}
.f-tab.on .tt::before{border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 3px #0b1826}

.f-panel{display:none;padding:34px 30px 38px}
.f-panel.on{display:block}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:20px}
fieldset.field{border:0}
.field label,.field legend{
  display:block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px;padding:0;
}
.req{color:var(--acc)}
/* 16px exactos: por debajo de eso, iOS hace zoom al tocar el campo */
.field input[type="text"],.field input[type="email"],.field input[type="tel"],
.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:10px;padding:13px 14px;color:var(--ink);
  font-family:var(--f-body);font-size:16px;outline:none;
  transition:border-color .25s,background .25s;
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:var(--bg-2);color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(143,212,255,.5);background:rgba(143,212,255,.04);
}
/* Los montos usan el mismo check que los dos caminos de arriba: el
   visitante ya aprendió ese gesto en el selector, no le cambiamos las
   reglas a mitad del formulario. */
.budget{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.budget input{position:absolute;opacity:0;pointer-events:none}
.budget label{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  cursor:pointer;transition:border-color .25s,background .25s;
  margin:0;text-transform:none;
}
.budget label::before{
  content:'';width:15px;height:15px;border-radius:50%;flex:none;
  border:1.5px solid var(--dim);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.budget label:hover{border-color:rgba(143,212,255,.45)}
.budget .bk{font-family:var(--f-mono);font-size:.6rem;color:var(--dim);letter-spacing:.06em}
.budget .bv{font-family:var(--f-display);font-weight:500;font-size:.95rem;color:var(--ink)}
.budget input:checked + label{border-color:var(--acc);background:var(--acc-soft)}
.budget input:checked + label::before{border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 3px #0b1826}
.budget input:checked + label .bv{color:var(--acc)}
.budget input:focus-visible + label{outline:2px solid var(--acc);outline-offset:2px}
.f-submit{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:8px}
.f-note{color:var(--dim);font-size:.8rem;max-width:34ch}
.f-success{display:none;text-align:center;padding:70px 30px}
.f-success.on{display:block}
.f-success .ck{
  width:56px;height:56px;border-radius:50%;margin:0 auto 20px;
  border:1px solid var(--acc);color:var(--acc);
  display:flex;align-items:center;justify-content:center;
}
.f-success h3{font-family:var(--f-display);font-weight:500;font-size:1.5rem;margin-bottom:8px}
.f-success p{color:var(--dim)}
.f-success a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}

/* ── Footer ─────────────────────────────────────────────────── */
/* Un cierre y nada más: la firma al medio, el oficio abajo del nombre.
   Los productos ya tuvieron su escena; acá no hace falta repetirlos. */
.footer{border-top:1px solid var(--line);padding:56px 0 30px;position:relative;z-index:2;text-align:center}
.footer-top{display:flex;justify-content:center;margin-bottom:34px}
.footer .brand{flex-direction:column;align-items:center;gap:10px}
.footer .brand i{letter-spacing:.16em}
.footer-bot{
  display:flex;justify-content:center;gap:8px 22px;flex-wrap:wrap;
  color:var(--dim);font-size:.78rem;border-top:1px solid var(--line);padding-top:22px;
}

/* ── Estados iniciales para animación (JS los revela) ──────── */
html.js [data-hero],html.js [data-rv],html.js [data-cw]{opacity:0}
html.js .planet{opacity:0}

/* ── Mobile ─────────────────────────────────────────────────── */
.only-d{display:inline}
@media (max-width:860px){
  .only-d{display:none}
  .stage{
    grid-template-columns:1fr;gap:12px;
    padding-top:86px;align-content:center;
  }
  .scene[data-side="l"] .stage .planet{order:0}
  .scene[data-side="l"] .stage .p-card{order:1}
  .planet{width:min(58vw,290px);margin-bottom:6px}
  .p-card{max-width:100%}
  .p-claim{font-size:1.55rem}
  .art-station{height:180px;margin-bottom:34px}
  /* el cometa llega arriba: el texto respira más abajo, sin pisarse */
  #gfScene .crew-copy{padding-top:20vh}
  .f-row{grid-template-columns:1fr}
  .budget{grid-template-columns:1fr}
  .f-tabs{grid-template-columns:1fr;gap:10px;padding:18px 18px 4px}
  .f-submit{flex-direction:column;align-items:stretch;text-align:center}
  .f-submit .btn{justify-content:center}
}

/* ── Motor WebGL de planetas (reemplaza a las esferas CSS) ────
   Apilado: luna atrás (z1) → planeta (z2) → partículas y luna adelante (z3).
   El disco del planeta es opaco, así que tapa a la luna que pasa por atrás;
   fuera del disco el canvas es transparente y la luna se sigue viendo. */
.planet canvas{
  display:block;width:100%;height:100%;position:absolute;inset:0;
  z-index:2;touch-action:pan-y;cursor:grab;
}
.planet canvas:active{cursor:grabbing}
.planet .capa{position:absolute;inset:0;pointer-events:none;z-index:3}
.planet .moon{
  position:absolute;border-radius:50%;pointer-events:none;top:auto;left:auto;
  background:radial-gradient(circle at 34% 30%,#fdfff4,#cfdea6 55%,#3d4a22 100%);
  box-shadow:none;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .art-station .st-ring,.art-station .radar,.art-station .st-blink,
  .scrollcue .bar{animation:none}
  /* Kit queda en reposo: los pines encendidos, quietos */
  .p-chip .pines path{animation:none;opacity:.3}
  .cometa{display:none}
  .crew-pin{min-height:auto;padding:100px 0}
}