/* ============================================================
   fantasmogenesis — sistema de diseño del rediseño (preview)
   Dos materiales del mismo aparato:
     data-mode="dark"  = CRT (fósforo ámbar, scanlines, glow)
     data-mode="light" = plástico translúcido (bisel, sombra dura)
   Tipografía: Manrope (display + cuerpo) + IBM Plex Mono (sistema)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..700&family=IBM+Plex+Mono:wght@400;500&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* --serif se conserva como nombre de token pero apunta a Manrope (el DS real) */
  --serif:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --display:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --maxw:920px;
}

/* MONOCROMO: no hay hue de acento. La jerarquía es tinta plena (--accent = --ink,
   destaca contra --ink-dim) + peso + tamaño. Nada de naranja. */

/* ---------- OSCURO = CRT (fósforo monocromo ámbar) ---------- */
html[data-mode="dark"]{
  --bg:#08090b; --bg-deep:#030405; --panel:#131519; --panel-hi:#1b1f24;
  --ink:#f8f1e6; --ink-dim:rgba(248,241,230,.68); --ink-faint:rgba(248,241,230,.26);
  --accent:#fdf8ee;
  --edge:rgba(248,241,230,.24); --edge-hot:rgba(248,241,230,.58);
  --glow:0 0 24px rgba(242,220,187,.1),0 0 70px rgba(242,220,187,.05);
  --bevel-hi:rgba(242,220,187,.12); --bevel-lo:rgba(0,0,0,.7);
  --shadow:0 26px 64px rgba(0,0,0,.78);
  --scan:.26; --grain:.06; --vig:.6;
}
/* ---------- CLARO = plástico (monocromo tinta/crema) ---------- */
html[data-mode="light"]{
  --bg:#eceae2; --bg-deep:#d8d5cb; --panel:#faf9f5; --panel-hi:#ffffff;
  --ink:#15171a; --ink-dim:rgba(21,23,26,.5); --ink-faint:rgba(21,23,26,.16);
  --accent:#000000;
  --edge:rgba(21,23,26,.15); --edge-hot:rgba(21,23,26,.42);
  --glow:0 0 0 rgba(0,0,0,0);
  --bevel-hi:rgba(255,255,255,.95); --bevel-lo:rgba(21,23,26,.2);
  --shadow:10px 14px 0 rgba(21,23,26,.08),0 30px 50px rgba(21,23,26,.15);
  --scan:.08; --grain:.04; --vig:.3;
}

html,body{min-height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--serif);-webkit-font-smoothing:antialiased;
  transition:background .5s,color .5s,filter .5s ease,transform .5s ease;line-height:1.6;
  position:relative;overflow-x:hidden;
}
/* transición fantasmal entre páginas: velo que se disuelve al entrar y
   reaparece (con desenfoque de la página) al salir. */
#fgfade{position:fixed;inset:0;z-index:300;pointer-events:none;background:var(--bg-deep);
  opacity:1;transition:opacity .6s ease}
#fgfade.gone{opacity:0}
body.fg-leaving{filter:blur(12px);transform:scale(.985)}

/* ---------- capas de pantalla (fijas, cada página las incluye) ---------- */
.fx{position:fixed;pointer-events:none;left:0;top:0;width:100%;height:100%}
.fx-vignette{z-index:60;opacity:var(--vig);transition:opacity .5s;
  background:radial-gradient(ellipse 82% 72% at 50% 44%,transparent 40%,var(--bg-deep) 100%)}
.fx-scan{z-index:61;opacity:var(--scan);
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 1px,transparent 1px 3px)}
.fx-grain{z-index:62;opacity:var(--grain);inset:-50%;width:200%;height:200%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .55s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
.fx-sweep{z-index:59;height:180px;
  background:linear-gradient(180deg,transparent,rgba(242,220,187,.04),transparent);animation:sweep 8s linear infinite}
html[data-mode="light"] .fx-sweep{opacity:.22}
@keyframes sweep{0%{transform:translateY(-190px)}100%{transform:translateY(100vh)}}

/* ---------- topbar (nav fija, misma en todo el sitio) ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 2rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase}
.topbar a.mark{color:var(--ink);text-decoration:none;font-weight:500;letter-spacing:.3em}
.topbar .tools{display:flex;gap:.4rem}
.btn{font-family:var(--mono);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;
  background:transparent;color:var(--ink-dim);cursor:pointer;padding:.5rem .7rem;
  border:1px solid var(--edge);border-radius:2px;transition:.18s;text-decoration:none;display:inline-block}
.btn:hover{color:var(--ink);border-color:var(--edge-hot)}
.btn[aria-pressed="true"]{color:var(--accent);border-color:var(--edge-hot)}

/* ---------- backdrop: el espacio del menú, atenuado detrás de la sección ---------- */
.backdrop{position:fixed;inset:0;z-index:1;overflow:hidden;
  background:
    radial-gradient(ellipse 50% 40% at 20% 24%,rgba(232,84,31,.06),transparent 60%),
    radial-gradient(ellipse 46% 38% at 82% 78%,rgba(31,110,232,.05),transparent 60%);
  filter:blur(2px);opacity:.5}
.backdrop::before{content:'';position:absolute;inset:-10%;
  background-image:
    repeating-linear-gradient(115deg,rgba(242,220,187,.03) 0 30px,transparent 30px 70px);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0)}100%{transform:translate(3%,-2%)}}

/* ---------- shell: la sección abre en un panel flotante sobre el menú ---------- */
.shell{position:relative;z-index:10;max-width:var(--maxw);
  margin:8.5rem auto 6rem;padding:0 clamp(1.2rem,4vw,2.4rem);
  animation:openShell 1.4s cubic-bezier(.2,.7,.25,1) both}
@keyframes openShell{
  from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(12px)}
  to{opacity:1;transform:none;filter:blur(0)}}
.shell-bar{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-bottom:1rem;margin-bottom:2.6rem;border-bottom:1px solid var(--edge)}
.shell-bar .blk{font-family:var(--mono);font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-dim)}
.shell-bar .close{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim);text-decoration:none;transition:.18s}
.shell-bar .close:hover{color:var(--accent)}

/* ---------- tipografía ---------- */
.eyebrow{font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-dim)}
.display{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(2.4rem,7vw,4.6rem)}
.display .slash{font-weight:500}
.lede{font-family:var(--serif);font-weight:200;font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.5rem);color:var(--ink-dim);line-height:1.5}
.h-sec{font-family:var(--mono);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-dim);padding-bottom:.9rem;margin:3.4rem 0 1.8rem;border-bottom:1px solid var(--edge)}
.prose p{font-weight:300;font-size:1rem;line-height:1.75;margin-bottom:1.1rem;max-width:62ch}
.prose i,.prose em{font-style:italic}
.prose b,.prose strong{font-weight:600}

/* ---------- reveal (blur-in escalonado) ---------- */
.reveal{opacity:0;animation:reveal 1.4s cubic-bezier(.2,.7,.25,1) forwards}
@keyframes reveal{from{opacity:0;transform:translateY(14px);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}

/* ---------- grids + cards ---------- */
.grid{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:3px;overflow:hidden;
  box-shadow:inset 1px 1px 0 var(--bevel-hi),inset -1px -1px 0 var(--bevel-lo),var(--shadow);
  transition:border-color .25s,box-shadow .25s,transform .25s}
.card:hover{border-color:var(--edge-hot);box-shadow:inset 1px 1px 0 var(--bevel-hi),inset -1px -1px 0 var(--bevel-lo),var(--shadow),var(--glow)}
.card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000;border-bottom:1px solid var(--edge)}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.55) contrast(1.12) brightness(.86);transition:filter .4s}
.card:hover .card-media img{filter:grayscale(0) contrast(1.03) brightness(1)}
html[data-mode="light"] .card-media img{filter:grayscale(.65) contrast(1.03) brightness(1.02)}
.card-media video{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.5) contrast(1.1) brightness(.9);transition:filter .4s}
.card:hover .card-media video{filter:grayscale(0) contrast(1.03) brightness(1)}
html[data-mode="light"] .card-media video{filter:grayscale(.6) contrast(1.03) brightness(1.02)}
.card-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.4rem}
.card-title{font-family:var(--serif);font-weight:300;font-size:1.4rem;line-height:1.05}
.card-desc{font-family:var(--serif);font-style:italic;font-size:.82rem;color:var(--ink-dim);line-height:1.4}

/* ---------- carrusel flotante (secciones no-disco, tipo labs.google) ---------- */
.carousel3d{position:fixed;inset:0;z-index:10;perspective:1800px;perspective-origin:50% 45%;overflow:hidden;cursor:grab;touch-action:none;
  animation:enterCar 1.4s cubic-bezier(.2,.7,.25,1) both}
.carousel3d *{touch-action:none}
@keyframes enterCar{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}
.carousel3d.drag{cursor:grabbing}
.car-stage{position:absolute;left:50%;top:47%;transform-style:preserve-3d}
.floatcard{position:absolute;width:300px;margin:-185px 0 0 -150px;transform-style:preserve-3d;
  will-change:transform,opacity;cursor:pointer;transition:opacity .4s}
.floatcard .fc-in{position:relative;background:var(--panel);border:1px solid var(--edge);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);transition:border-color .3s,box-shadow .3s}
.floatcard.act .fc-in{border-color:var(--edge-hot);box-shadow:var(--shadow),var(--glow)}
.fc-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:#000}
.fc-media img,.fc-media video{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.5) contrast(1.1) brightness(.86);transition:filter .45s}
.floatcard.act .fc-media img,.floatcard.act .fc-media video{filter:grayscale(0) contrast(1.03) brightness(1)}
html[data-mode="light"] .fc-media img,html[data-mode="light"] .fc-media video{filter:grayscale(.6) contrast(1.03) brightness(1.02)}
.fc-media .tint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.42))}
.fc-body{padding:1.05rem 1.15rem 1.25rem}
.fc-body .card-title{font-size:1.35rem}
.fc-body .card-desc{margin-top:.32rem}
.fc-go{margin-top:.95rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-dim);opacity:0;transition:opacity .3s}
.floatcard.act .fc-go{opacity:1;color:var(--accent)}
.car-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.car-bg .blob{position:absolute;border-radius:50%;filter:blur(64px);background:var(--accent)}
.car-bg .b1{width:46vw;height:46vw;left:-8vw;top:6vh;opacity:.10;animation:drift1 24s ease-in-out infinite}
.car-bg .b2{width:38vw;height:38vw;right:-6vw;top:22vh;opacity:.07;animation:drift2 29s ease-in-out infinite}
.car-bg .b3{width:30vw;height:30vw;left:40vw;bottom:-12vh;opacity:.06;animation:drift1 33s ease-in-out infinite reverse}
html[data-mode="light"] .car-bg .blob{opacity:.16;background:var(--ink)}
html[data-mode="light"] .car-bg .b2{opacity:.10}html[data-mode="light"] .car-bg .b3{opacity:.09}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(4vw,-3vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-3vw,4vh)}}
.car-count{position:fixed;left:50%;bottom:5.4rem;transform:translateX(-50%);z-index:66;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.28em;color:var(--ink-dim)}
.car-ctrls{position:fixed;left:50%;bottom:2.1rem;transform:translateX(-50%);z-index:66;display:flex;gap:1rem}
.car-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--edge);background:var(--panel);
  color:var(--ink-dim);font-size:1.3rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.2s;font-family:var(--mono);box-shadow:var(--shadow)}
.car-arrow:hover{border-color:var(--edge-hot);color:var(--accent)}
@media(max-width:820px){.car-stage{transform:scale(.78)}
  /* rendimiento móvil: sin blobs con blur pesado */
  .car-bg{display:none}}
@media(prefers-reduced-motion:reduce){.carousel3d{animation:none}.car-bg .blob{animation:none}}

/* ---------- rendimiento en móvil: apaga los overlays animados pesados ---------- */
@media(max-width:820px){
  .fx-grain,.fx-sweep{display:none}
  .fx-scan{animation:none}
}

/* rejilla de cards planas (secciones no-disco) */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.4rem}
.fcard{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.fcard .card-media .tint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.5))}
html[data-mode="light"] .fcard .card-media .tint{background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.22))}
.fcard-tag{position:absolute;left:.7rem;top:.6rem;z-index:2;font-family:var(--mono);font-size:.5rem;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72);text-shadow:0 0 8px #000}
.fcard .card-desc{min-height:1.1em}
.card-desc .tcat{font-family:var(--mono);font-style:normal;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-right:.6rem}
.card-desc .tprice{font-family:var(--mono);font-style:normal;font-weight:500;font-size:.95rem;letter-spacing:.05em;color:var(--accent)}

/* dither overlay reutilizable sobre imágenes */
.dither{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.85) 0 1px,transparent 1px 2px)}

/* ---------- meta / pills / kv ---------- */
.meta{font-family:var(--mono);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.pill{display:inline-block;font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim);border:1px solid var(--edge);
  border-radius:999px;padding:.28rem .6rem;margin:0 .35rem .35rem 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem;font-size:.9rem;font-weight:300}
.kv dt{font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);align-self:center}

/* ---------- player ---------- */
.player{border:1px solid var(--edge);border-radius:3px;overflow:hidden;
  box-shadow:inset 1px 1px 0 var(--bevel-hi),inset -1px -1px 0 var(--bevel-lo)}
.track{display:flex;align-items:center;gap:1rem;padding:.85rem 1.1rem;cursor:pointer;
  border-bottom:1px solid var(--edge);transition:background .2s,color .2s;background:var(--panel)}
.track:last-child{border-bottom:none}
.track:hover{background:var(--panel-hi)}
.track.playing{color:var(--accent)}
.track .num{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--ink-dim);min-width:2ch}
.track.playing .num{color:var(--accent)}
.track .tname{font-family:var(--serif);font-weight:300;font-size:1.05rem;flex:1}
.track .tdur{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--ink-dim)}
.track .eq{display:flex;gap:2px;align-items:flex-end;height:12px;opacity:0}
.track.playing .eq{opacity:1}
.track .eq i{width:2px;background:var(--accent);animation:eq .7s ease-in-out infinite}
.track .eq i:nth-child(2){animation-delay:.15s}.track .eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}

/* ---------- botón de compra / cta ---------- */
.cta{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;cursor:pointer;
  background:var(--ink);color:var(--bg);border:none;padding:1rem 1.5rem;text-decoration:none;
  transition:letter-spacing .4s,opacity .3s}
.cta:hover{letter-spacing:.4em}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--edge)}
.cta.ghost:hover{border-color:var(--edge-hot);color:var(--accent)}
.buy{display:inline-flex;align-items:baseline;gap:.8rem}
.buy .price{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--ink)}
.overlay-note{font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;color:var(--ink-faint);
  text-transform:uppercase;margin-top:.5rem}

/* ---------- rule / links ---------- */
.rule{height:1px;background:var(--edge);border:none;margin:2.6rem 0}
a.ln{color:inherit;text-decoration:none;border-bottom:1px solid var(--edge);padding-bottom:.15rem;transition:.18s}
a.ln:hover{border-color:var(--edge-hot);color:var(--accent)}
.dsp{display:flex;flex-wrap:wrap;gap:.5rem}

/* ---------- form fields ---------- */
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.8rem}
.field label{font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}
.field input,.field textarea{background:transparent;border:none;border-bottom:1px solid var(--edge);
  padding:.55rem 0;font-family:var(--serif);font-weight:300;font-size:1.05rem;color:var(--ink);transition:border-color .5s}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}

@media(max-width:720px){
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .topbar{padding:1.1rem 1.2rem}
}
@media(max-width:480px){.grid-3{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .reveal,.shell{animation:none;opacity:1}
  .fx-grain,.fx-sweep,.backdrop::before,.track .eq i{animation:none}
  .cta:hover{letter-spacing:.28em}
}