/* ════════════════════════════════════════════════════════════════
   MULTIPLES MEDIOS · v2
   Y2K Retrofuturism / Liquid Chrome / Iridescent
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Surface */
  --bg: oklch(0.95 0.018 70);          /* warm cream */
  --bg-glow: oklch(0.97 0.015 80);
  --paper: oklch(0.99 0.008 80);
  --ink: oklch(0.12 0.02 260);          /* cool near-black */
  --ink-dim: oklch(0.42 0.02 260);
  --ink-mute: oklch(0.62 0.02 260);
  --line: oklch(0.86 0.014 70);
  --line-soft: oklch(0.9 0.014 70);

  /* Acid accents */
  --lime: #C8FF3E;        /* acid lime */
  --magenta: #FF3EA5;     /* hot pink */
  --azure: #4361FF;       /* electric blue */
  --tangerine: #FF6B1A;   /* hot orange */
  --violet: #9D5BFF;
  --accent: var(--magenta);

  /* Chrome bands (mid → highlight → mid → shadow → mid → highlight) */
  --chrome:
    linear-gradient(135deg,
      #2c2638 0%,
      #5d5667 8%,
      #a8a4b8 18%,
      #f4f0fa 28%,
      #d0c8e0 38%,
      #6e6779 48%,
      #3a3445 56%,
      #b8b0c8 70%,
      #f0ecf6 80%,
      #5d5667 92%,
      #2c2638 100%);

  --chrome-warm:
    linear-gradient(135deg,
      #3a2820 0%,
      #b0958a 22%,
      #fff5e8 35%,
      #d9b8a0 50%,
      #6b4838 65%,
      #d9b8a0 78%,
      #fff5e8 88%,
      #3a2820 100%);

  /* Iridescent — hue-shifting conic */
  --iridescent:
    conic-gradient(from 0deg at 50% 50%,
      #FF3EA5 0%,
      #9D5BFF 14%,
      #4361FF 28%,
      #2DD4FF 42%,
      #C8FF3E 56%,
      #FFD93E 70%,
      #FF6B1A 84%,
      #FF3EA5 100%);

  --iridescent-soft:
    conic-gradient(from 0deg at 50% 50%,
      #ffb8db 0%,
      #d4b8ff 14%,
      #b8c8ff 28%,
      #b8eeff 42%,
      #ddf5b8 56%,
      #fff0b8 70%,
      #ffd0b8 84%,
      #ffb8db 100%);

  /* Type */
  --font-display: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px;
  --space-12: 96px; --space-16: 128px; --space-20: 192px;

  --radius: 14px;
  --radius-lg: 24px;
  --radius-xl: 40px;

  --speed: 1;
  --density: 1;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] {
  --bg: oklch(0.14 0.04 280);
  --bg-glow: oklch(0.18 0.05 280);
  --paper: oklch(0.18 0.04 280);
  --ink: oklch(0.96 0.012 80);
  --ink-dim: oklch(0.72 0.012 70);
  --ink-mute: oklch(0.48 0.014 60);
  --line: oklch(0.28 0.04 280);
  --line-soft: oklch(0.22 0.04 280);
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html { scroll-behavior: smooth; }
body { cursor: none; }

::selection {
  background: var(--lime);
  color: var(--ink);
}

/* Background ambient gradient */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 50% at 80% 20%, color-mix(in oklch, var(--magenta) 8%, transparent), transparent 70%),
    radial-gradient(50% 40% at 10% 80%, color-mix(in oklch, var(--azure) 8%, transparent), transparent 70%);
}

/* Grain */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

#root { position: relative; z-index: 2; }

/* ── Cursor ─────────────────────────────────────────────────── */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0);
}
.cursor-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  transition: transform 0.08s var(--ease-out), background 0.3s;
}
.cursor-ring {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  mix-blend-mode: difference;
  transition: width 0.3s var(--ease-snap), height 0.3s var(--ease-snap),
              border-color 0.3s, transform 0.2s var(--ease-out);
}
.cursor-ring.hover {
  width: 80px; height: 80px;
  border-color: var(--accent);
}

@media (max-width: 768px) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

input, textarea, select { cursor: text; }
button, a, [data-hover], .clickable { cursor: none; }

/* ── Typography ─────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  letter-spacing: -0.04em;
  line-height: 0.88;
  text-wrap: balance;
}
.display-wide {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "wdth" 120";
  letter-spacing: -0.05em;
  line-height: 0.85;
}
.display-narrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 75;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.kicker .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 8px;
  box-shadow: 0 0 8px var(--accent);
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

/* Chrome text — silver liquid gradient on text */
.chrome-text {
  background: var(--chrome);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.1);
  animation: chromeShift 8s linear infinite;
}
@keyframes chromeShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Iridescent text — animated hue-shift */
.irid-text {
  background: var(--iridescent);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: iridShift 12s linear infinite;
  filter: saturate(1.2);
}
@keyframes iridShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── Wrap & sections ────────────────────────────────────────── */
.wrap {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 calc(var(--space-8) * var(--density));
}
section {
  position: relative;
  padding: calc(var(--space-20) * var(--density)) 0;
}
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  section { padding: 96px 0; }
}

/* ── Buttons / chips ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em; text-decoration: none;
  background: var(--ink); color: var(--bg);
  border: 1.5px solid var(--ink);
  transition: transform 0.4s var(--ease-snap), box-shadow 0.4s;
  position: relative; overflow: hidden;
}
.btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px color-mix(in oklch, var(--ink) 30%, transparent);
}
.btn.accent {
  background: var(--accent); color: white;
  border-color: var(--accent);
}
.btn.chrome-btn {
  background: var(--chrome);
  background-size: 200% 200%;
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  border-color: var(--ink);
  animation: chromeShift 6s linear infinite;
}
.btn.ghost {
  background: transparent; color: var(--ink);
  border-color: var(--ink);
}
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.btn .arrow { transition: transform 0.4s var(--ease-snap); display: inline-block; }
.btn:hover .arrow { transform: translateX(6px) rotate(-45deg); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: var(--bg);
}
.chip.filled {
  background: var(--ink); color: var(--bg);
}

/* ── Marquee ────────────────────────────────────────────────── */
.marquee {
  display: flex; overflow: hidden; white-space: nowrap; width: 100%;
}
.marquee-track {
  display: flex; gap: 4rem; flex-shrink: 0; padding-right: 4rem;
  animation: marquee calc(36s / var(--speed)) linear infinite;
}
@keyframes marquee { to { transform: translateX(-100%); } }

/* ── Reveal ─────────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(48px);
  transition: opacity calc(0.9s / var(--speed)) var(--ease-out),
              transform calc(0.9s / var(--speed)) var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-word { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-word > span {
  display: inline-block; transform: translateY(110%);
  transition: transform calc(1s / var(--speed)) var(--ease-snap);
  transition-delay: calc(var(--i, 0) * 0.04s / var(--speed));
}
.reveal-word.in > span { transform: translateY(0); }

/* ── Chrome card ────────────────────────────────────────────── */
.chrome-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.4s var(--ease-snap), box-shadow 0.4s;
}
.chrome-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}

/* ── Sticker / pill rotating ────────────────────────────────── */
.sticker-spin {
  animation: spin calc(18s / var(--speed)) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Asterisk spin (suave, lento) ────────────────────────────── */
.asterisk-spin {
  animation: asteriskSpin calc(22s / var(--speed)) linear infinite;
  transform-origin: 50% 50%;
}
@keyframes asteriskSpin { to { transform: rotate(360deg); } }

/* ── Float ──────────────────────────────────────────────────── */
.floaty {
  animation: floaty calc(6s / var(--speed)) ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ── Chrome orb (the hero sphere) ───────────────────────────── */
.orb-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

/* ── Magnetic / lift ────────────────────────────────────────── */
.lift { transition: transform 0.4s var(--ease-out); display: inline-block; }

/* ── Form ───────────────────────────────────────────────────── */
.field {
  width: 100%; padding: 18px 0;
  background: transparent; border: none;
  border-bottom: 1.5px solid var(--line);
  color: var(--ink); font-size: 18px;
  font-family: inherit; outline: none;
  transition: border-color 0.3s;
}
.field:focus { border-color: var(--accent); }

/* ── Sticky stage ───────────────────────────────────────────── */
.sticky-stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   Override grid-template-columns inline styles via [style*=]
   ════════════════════════════════════════════════════════════ */

/* TABLET — collapse 4-cols to 2-cols, 3-cols to 2-cols */
@media (max-width: 1100px) {
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [style*="grid-template-columns: 1fr auto 1fr"] {
    grid-template-columns: 1fr auto !important;
  }
}

/* MOBILE — collapse everything to single column */
@media (max-width: 720px) {
  :root { --density: 0.85; }

  .wrap { padding: 0 20px !important; }
  section { padding: 80px 0 !important; }

  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 120px 1fr 240px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Nav: hide center pill, simplify */
  nav > div[style*="grid-template-columns: 1fr auto 1fr"] {
    grid-template-columns: 1fr auto !important;
  }
  nav > div > div[style*="border-radius: 999"][style*="flex"][style*="justify-content: center"] {
    display: none !important;
  }

  /* Display type: don't let it explode */
  .display {
    letter-spacing: -0.03em !important;
  }

  /* Hero: oculta solo las estrellitas decorativas (Star), NUNCA el Y2K badge */
  #top svg[viewBox="0 0 100 100"] { display: none !important; }

  /* Hero orb: shrink + reposition */
  #top [style*="position: absolute"][style*="right: 4%"] {
    position: relative !important;
    right: auto !important; top: auto !important;
    transform: none !important;
    margin: 0 auto 24px !important;
    display: flex !important; justify-content: center !important;
  }
  #top [style*="position: absolute"][style*="right: 4%"] > div {
    width: 240px !important; height: 240px !important;
  }

  /* Process: clear in-grid borders since it's 1 col now */
  #process [style*="border-right: 1.5px solid"] {
    border-right: none !important;
    border-bottom: 1.5px solid var(--ink) !important;
  }

  /* Portfolio: clear the offset margin on every other card */
  #work a[style*="margin-top: 80px"] {
    margin-top: 0 !important;
  }

  /* Testimonials: clear the middle-card offset */
  section [style*="transform: translateY(40px)"] {
    transform: none !important;
  }

  /* Contact / FAQ: kill sticky */
  [style*="position: sticky"][style*="top: 120px"] {
    position: relative !important; top: auto !important;
  }

  /* Hide custom cursor on mobile (already in earlier rule but reinforce) */
  body { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  button, a, [data-hover], .clickable { cursor: pointer !important; }
  input, textarea { cursor: text !important; }

  /* Big footer wordmark: shrink letter-spacing */
  footer [style*="clamp(80px, 19vw"] {
    font-size: 64px !important;
    line-height: 1 !important;
  }

  /* Hero meta strip: stack */
  #top > .wrap[style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
  }
  #top > .wrap[style*="display: flex"] > span {
    text-align: left !important;
  }

  /* Sticky top elements when collapsed */
  [style*="position: sticky"][style*="top: 120"] {
    position: relative !important;
    top: 0 !important;
  }
}

/* NARROW MOBILE */
@media (max-width: 480px) {
  .btn { padding: 12px 18px !important; font-size: 13px !important; }
  .wrap { padding: 0 16px !important; }

  /* Lang toggle smaller */
  nav button[style*="border-radius: 999"] {
    padding: 3px 8px !important;
  }

  /* Form fields stack their grid */
  form [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PATCHES adicionales móvil — nav, hero, contact, tweaks
   ════════════════════════════════════════════════════════════ */

/* El TweaksPanel solo en escritorio (es herramienta de diseño) */
@media (max-width: 1024px) {
  .tweaks-panel, [data-tweaks-panel] { display: none !important; }
}

/* Hero: cuando el orb pasa a relative en móvil, evitar overflow vertical */
@media (max-width: 720px) {
  #top h1.display {
    font-size: clamp(54px, 13vw, 110px) !important;
  }
  #top h1.display div[style*="paddingLeft"] {
    padding-left: 0 !important;
  }
  /* Y2K badge en móvil: solo posición (el tamaño lo decide el componente
     en JS para que esfera + halo + sombras escalen juntos) */
  #top .y2k-wrap {
    right: 12px !important;
    top: 96px !important;
    transform: none !important;
  }
  @media (max-width: 420px) {
    #top .y2k-wrap {
      right: 8px !important;
      top: 88px !important;
    }
  }
  /* Contact: la columna izquierda no pegajosa, ajustes de form */
  #contact [style*="position: sticky"] {
    position: relative !important;
    top: auto !important;
  }
  /* Asterisk badge en móvil: centrado, tamaño contenido */
  #top svg[viewBox^="0 0 420"], #top svg[viewBox^="0 0 500"], #top svg[viewBox^="0 0 620"] {
    max-width: 70vw !important; height: auto !important;
  }
}

/* Estado "scrolled" del nav: borde inferior visible en móvil para separar drawer */
@media (max-width: 900px) {
  /* Asegurar que el hero comience debajo del nav fijo */
  #top { padding-top: 110px !important; }
  /* Inputs táctiles más cómodos */
  .field { font-size: 16px !important; padding: 16px 0 !important; }
  .btn { min-height: 44px; }
  /* Chips de servicios/budget: spacing más holgado */
  form button[type="button"] {
    padding: 10px 16px !important; font-size: 13px !important;
  }
}

/* Stacked Massive: corte de letras en mobile, asegura ratio */
.stacked-massive > div { word-break: break-word; }

/* Cards de portafolio: no offset vertical raro en móvil */
@media (max-width: 720px) {
  #work [style*="margin-top: 80px"],
  #work [style*="marginTop: 80"] {
    margin-top: 0 !important;
  }
}

/* Drawer del nav: subir z-index para que cubra contenido */
.nav-drawer { z-index: 89; }

/* Mejor focus para accesibilidad */
:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; }
  .sticker-spin { animation: none !important; }
}

/* ── Lucide icon defaults ──────────────────────────────────── */
[data-lucide] svg, .lucide {
  width: 100%; height: 100%;
  stroke-width: 2;
  fill: none; stroke: currentColor;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════
   MEDIA — Fotografía + Audiovisual
   ════════════════════════════════════════════════════════════ */
.media-sep {
  height: 1.5px; background: var(--ink);
  margin: 64px 0 80px; opacity: 0.35;
}
.media-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.media-tile {
  border-radius: 18px;
  transition: transform 0.4s var(--ease-snap), box-shadow 0.4s;
}
.media-tile:hover {
  transform: translateY(-4px);
  box-shadow: 10px 10px 0 var(--ink);
}

@media (max-width: 1100px) {
  .media-head { grid-template-columns: 1fr !important; gap: 24px !important; }
  .media-phases { grid-template-columns: 1fr !important; }
  .media-gallery { grid-template-columns: repeat(3, 1fr); }
  .media-gallery .media-tile[style*="span 2"] { grid-column: span 2 !important; }
}
@media (max-width: 720px) {
  .media-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .media-gallery .media-tile { aspect-ratio: 1 / 1 !important; }
  .media-gallery .media-tile[style*="span 2"] {
    grid-column: span 2 !important;
    aspect-ratio: 16 / 9 !important;
  }
  #media h2.display, #media h3.display { font-size: clamp(40px, 9vw, 64px) !important; }
}