/* ============================================================
   NOCTA — Home TEST  ·  clon exacto del PDF (WebNocta_Home)
   Se carga DESPUÉS de styles.css y home-v2.css.
   Reutiliza los componentes de 4.0 (proceso, dashboard,
   servicios, CTA) y añade lo nuevo del PDF + tema claro/idioma.
   ============================================================ */

/* ---------- TOKENS exactos del PDF ---------- */
html:not([data-theme="light"]) {
  --n-bg:   #070709;
  --n-live: #B7FF00;
}
html[data-theme="light"] {
  --n-bg:     #F4F3F0;
  --n-bg-2:   #FFFFFF;
  --n-ink:    #0C0C0E;
  --n-mute:   rgba(12,12,14,0.58);
  --n-faint:  rgba(12,12,14,0.40);
  --n-ghost:  rgba(12,12,14,0.18);
  --n-line:   rgba(12,12,14,0.12);
  --n-line-2: rgba(12,12,14,0.06);
  /* Color secundario en modo claro: morado flúor (petición de Luis
     2026-07-09). En oscuro sigue siendo el lima de arriba (#B7FF00).
     6.26:1 de contraste sobre el fondo claro (#F4F3F0) — pasa AA. */
  --n-live:   #7C1FD6;
  --n-live-soft: rgba(124,31,214,0.35);
}
.home-test {
  --n-green:      #6F9A00;   /* botón "Start a project" del nav */
  --n-title-2:    #A3A3A4;   /* segunda línea gris de los títulos */
  --n-red:        #D10000;   /* tags "MADE FOR PEOPLE..." */
  --n-magenta:    #FF00F4;   /* "Galeria" */
  --n-video-gray: #B1B1B1;   /* bloque de vídeo */
}

/* fondos que en oscuro estaban hardcodeados a negro */
html[data-theme="light"] body,
html[data-theme="light"] .home-v2,
html[data-theme="light"] .n-hero,
html[data-theme="light"] .n-process,
html[data-theme="light"] .n-cta,
html[data-theme="light"] .home-v2 .footer { background: var(--n-bg); }
html[data-theme="light"] .n-btn,
html[data-theme="light"] .nav-cta:hover,
html[data-theme="light"] .n-serv-row:hover .n-serv-arrow,
html[data-theme="light"] .n-bubble.me { color: var(--n-bg-2) !important; }
html[data-theme="light"] .nav-mobile { background: rgba(255,255,255,0.97); }
html[data-theme="light"] .nav-mobile-link { color: var(--n-mute); }
html[data-theme="light"] .n-device,
html[data-theme="light"] .n-dash { box-shadow: 0 40px 120px rgba(0,0,0,0.10); }
/* logo (imagen NOCTA GRAPHICS): en claro se invierte para que se vea "NOCTA" */
html[data-theme="light"] .nav-logo-img,
html[data-theme="light"] .footer-logo-img { filter: invert(1); }

/* Mockups del proceso y el dashboard (home-v2.css): tenían gradientes y
   fondos translúcidos pensados solo para oscuro (segundo stop #090909,
   rgba(255,255,255,…) para "vidrio"). En claro se veían como recuadros
   negros metidos dentro de tarjetas blancas — se corrige aquí. */
html[data-theme="light"] .n-device,
html[data-theme="light"] .n-dash { background: var(--n-bg-2); }
html[data-theme="light"] .n-canvas-mock { background: linear-gradient(135deg, #ECEBE7, #E2E0DA); }
html[data-theme="light"] .n-msg,
html[data-theme="light"] .n-typing,
html[data-theme="light"] .n-bubble.them { background: rgba(12,12,14,0.045); }
html[data-theme="light"] .n-field-v,
html[data-theme="light"] .n-deliv-item { background: rgba(12,12,14,0.03); }
html[data-theme="light"] .n-stage-item.is-active { background: rgba(12,12,14,0.045); }
/* Badges/notas con el lima quemado directamente en rgba(200,255,0,…):
   en claro deben usar el nuevo acento morado, no quedarse verdes. */
html[data-theme="light"] .n-dash-status b { background: rgba(124,31,214,0.1); }
html[data-theme="light"] .n-review-note { background: rgba(124,31,214,0.06); }
/* Franja de marcas: en oscuro resalta en blanco; en claro se funde con el
   fondo del bloque — un borde sutil la separa. */
html[data-theme="light"] .n-band { border-top: 1px solid var(--n-line); border-bottom: 1px solid var(--n-line); }

/* ============================================================
   NAV  — logo · enlaces centro · Modo/Idioma · botón verde
   ============================================================ */
.home-v2 .nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.home-v2 .nav-logo { justify-self: start; display: inline-flex; align-items: center; }
.nav-logo-img { height: 26px; width: auto; display: block; }

.home-v2 .nav-links { justify-self: center; gap: 38px; }
.home-v2 .nav-links a { font-size: 15px; color: var(--n-ink); opacity: .92; }
.home-v2 .nav-links a:hover { opacity: 1; }

.home-v2 .nav-side { justify-self: end; display: flex; align-items: center; gap: 26px; }
.home-v2 .nav-links .nav-cta { display: none; }

.n-ctrl {
  background: transparent; border: none; padding: 0;
  font-size: 15px; color: var(--n-mute); white-space: nowrap; cursor: pointer;
  transition: color .3s var(--n-ease);
}
.n-ctrl b { color: var(--n-ink); font-weight: 400; }
.n-ctrl:hover { color: var(--n-ink); }

.n-btn--green {
  background: var(--n-green); color: #0A0A0A;
  border: none; border-radius: 100px;
  padding: 13px 26px; font-size: 15px; font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center;
  transition: filter .3s var(--n-ease), transform .3s var(--n-ease);
}
/* el PDF no lleva selector de moneda en el nav */
.home-v2 .nav-links .currency-selector { display: none; }
.n-btn--green:hover { filter: brightness(1.08); transform: translateY(-1px); }

.n-btn--outline {
  background: transparent; color: var(--n-ink);
  border: 1px solid var(--n-ghost); border-radius: 100px;
  padding: 15px 30px; font-size: 15px; font-weight: 400;
  display: inline-flex; align-items: center; gap: 10px; width: max-content;
  transition: border-color .3s var(--n-ease);
}
.n-btn--outline:hover { border-color: var(--n-ink); }

@media (max-width: 1080px) {
  .home-v2 .nav-links, .home-v2 .nav-side { display: none; }
  .home-v2 .nav { grid-template-columns: 1fr auto; }
  .home-v2 .nav-hamburger { display: flex; }
}
.nav-mobile-controls { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; align-items: center; }

/* ============================================================
   TÍTULOS a dos tonos (blanco + gris / lima)
   ============================================================ */
.n-t2 {
  font-family: var(--n-sans);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.2vw, 6.1rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--n-ink);
  margin: 0;
}
.n-t2 .mut  { color: var(--n-title-2); }
.n-t2 .lime { color: var(--n-live); }

/* ============================================================
   HERO  — "Creative systems for nightlife."
   ============================================================ */
/* Altura reducida (petición de Luis 2026-07-09): menos espacio negro entre
   el título+botón y el párrafo de la derecha. */
.n-hero--split { min-height: 85svh; padding-top: 130px; }
.n-hero--split .n-hero-inner { max-width: 1560px; display: flex; flex-direction: column; min-height: 56vh; }
.n-hero-h1 {
  font-weight: 400;
  font-size: clamp(2.8rem, 8.4vw, 8.2rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--n-ink);
  margin: 0;
}
.n-hero-h1 .lime { color: var(--n-live); }
.n-hero-cta { margin-top: clamp(28px, 4vh, 44px); }
.n-hero-descwrap { margin-top: auto; display: flex; justify-content: flex-end; padding-top: clamp(50px, 8vh, 110px); }
.n-hero-desc {
  text-align: right;
  font-size: clamp(21px, 2.5vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--n-ink);
  /* Los saltos de línea los fija el <br> en el HTML (captura de Luis,
     2026-07-09) — el max-width solo evita que el navegador añada saltos
     de más en desktop. */
  max-width: 32ch;
}
@media (max-width: 900px) {
  .n-hero-descwrap { justify-content: flex-start; padding-top: 40px; }
  .n-hero-desc { text-align: left; max-width: 24ch; }
}

/* ============================================================
   FRANJA DE MARCAS  (blanca, texto negro, se desliza a la izq)
   ============================================================ */
.n-band { background: #fff; overflow: hidden; padding: clamp(28px, 4vh, 46px) 0; }
.n-band-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.n-band-track {
  display: flex; width: max-content; align-items: center; gap: clamp(36px, 4vw, 70px);
  animation: n-slide-left 34s linear infinite;
  will-change: transform;
}
.n-band-marquee:hover .n-band-track { animation-play-state: paused; }
.n-band-item {
  flex: 0 0 auto; color: #000;
  font-size: clamp(24px, 3.2vw, 52px); font-weight: 500; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: clamp(36px, 4vw, 70px); white-space: nowrap;
}
.n-band-item::after { content: "•"; color: #000; font-size: 0.34em; }
@keyframes n-slide-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   FRANJA DE VÍDEO  (placeholder gris)
   ============================================================ */
.n-video {
  background: var(--n-video-gray);
  min-height: 74vh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(48px, 8vh, 96px) 24px;
}
.n-video video { width: 100%; height: 74vh; object-fit: cover; }
.n-video-label { color: #fff; font-size: clamp(26px, 3vw, 44px); font-weight: 400; letter-spacing: -0.01em; }

/* ============================================================
   PROCESO  (título dos tonos; el device es el de 4.0)
   ============================================================ */
.n-process .n-t2 { margin-bottom: clamp(48px, 8vh, 90px); }

/* ============================================================
   BRANDING FOR CLUBS  (retratos rojos + ROOM)
   ============================================================ */
.n-clubs-head { margin-bottom: clamp(40px, 7vh, 80px); }
.n-clubs-stage { position: relative; }
.n-clubs-img { display: block; width: 100%; height: auto; }

/* ============================================================
   SOCIAL MEDIA KITS  (visor de stories interactivo)
   ============================================================ */
.n-kits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.n-kits-left { position: relative; display: flex; justify-content: center; }
.n-story {
  position: relative; width: 100%; max-width: 440px; aspect-ratio: 9/16;
  border-radius: 30px; overflow: hidden; border: 1px solid var(--n-line); background: #000;
}
.n-story-img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s var(--n-ease); }
.n-story-img.is-swap { opacity: 0; }
.n-story-galeria {
  position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 4;
  background: #000; color: var(--n-magenta); padding: 5px 18px; font-size: 22px;
}
.n-story-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
}
.n-story-dots { display: flex; gap: 5px; }
.n-story-dots i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.35); transition: background .3s; }
.n-story-dots i.on { background: #fff; }
.n-story-ctrls { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 13px; pointer-events: none; }
.n-story-ctrls .sp { flex: 1; }
.n-story-ctrls .lk { display: inline-flex; align-items: center; gap: 6px; opacity: .95; }
.n-story-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #000;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 22px; box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.n-story-nav.prev { left: -14px; } .n-story-nav.next { right: -14px; }
/* Título + párrafo alineados a la derecha (captura de Luis, 2026-07-09).
   Los saltos de línea del párrafo los fija el <br> en el HTML. */
.n-kits-right { text-align: right; }
.n-kits-right .n-t2 { margin-bottom: clamp(24px, 3vh, 34px); }
.n-kits-desc { font-size: clamp(17px, 1.7vw, 26px); line-height: 1.4; color: var(--n-ink); max-width: 34ch; font-weight: 400; margin-left: auto; }
@media (max-width: 860px) {
  .n-kits { grid-template-columns: 1fr; gap: 40px; }
  .n-kits-right { text-align: left; }
  .n-kits-desc { max-width: none; margin-left: 0; }
}

/* ============================================================
   INDIVIDUAL PROJECTS  (fila de flyers 9:16 hacia la izq)
   ============================================================ */
.n-ind { overflow: hidden; padding-bottom: clamp(80px, 12vh, 150px); }
.n-ind-head { margin-bottom: clamp(40px, 6vh, 70px); }
.n-ind-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.n-ind-track {
  display: flex; width: max-content; gap: clamp(16px, 1.8vw, 30px); padding: 4px 0;
  animation: n-slide-left 55s linear infinite; will-change: transform;
}
.n-ind-marquee:hover .n-ind-track { animation-play-state: paused; }
.n-ind-card {
  flex: 0 0 auto; width: clamp(240px, 24vw, 360px); aspect-ratio: 9/16;
  border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--n-line);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.n-ind-card img,
.n-ind-card video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   FILOSOFÍA  (dos tonos + lima, párrafo a la derecha)
   ============================================================ */
/* align-items:start (no "end"): la posición del párrafo ya no depende de
   que su altura "coincida por casualidad" con la del título — se controla
   con el margin-top de abajo, igual que la captura de Luis.
   grid-template-columns: 1fr auto — la 2ª columna se ajusta ella sola al
   ancho real del párrafo (hasta max-width:34ch), en vez de un reparto fijo
   en fr. Así, subir o bajar el tamaño de letra del párrafo YA NO puede
   volver a romper las líneas por columna estrecha (lo que pasó al fijar un
   ratio a mano en la iteración anterior). */
.n-phi-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(30px, 5vw, 70px); align-items: start; }
.n-phi .n-t2 { font-size: clamp(2rem, 4.5vw, 4.4rem); } /* -25% a petición de Luis (2026-07-09), párrafo sin cambios */
.n-phi-desc {
  text-align: right; font-size: clamp(18px, 1.8vw, 32px); line-height: 1.25;
  letter-spacing: -0.02em; color: var(--n-ink); font-weight: 400;
  /* Saltos fijados por <br> en el HTML (captura de Luis, 2026-07-09).
     Tamaño +20% a petición de Luis (2026-07-09). */
  max-width: 34ch; justify-self: end;
  margin-top: clamp(70px, 11vh, 150px);
}
@media (max-width: 900px) {
  .n-phi-grid { grid-template-columns: 1fr; gap: 34px; }
  .n-phi-desc { text-align: left; max-width: none; justify-self: start; margin-top: 0; }
}

/* ============================================================
   FOOTER  (logo · enlaces · copyright · legal)
   ============================================================ */
.home-v2 .footer {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 22px 30px; padding: 42px var(--n-gut) 48px;
}
.home-v2 .footer-logo { justify-self: start; display: inline-flex; align-items: center; }
.footer-logo-img { height: 24px; width: auto; display: block; }
.home-v2 .footer-links { justify-self: center; margin: 0; display: flex; gap: 34px; flex-wrap: wrap; justify-content: center; }
.home-v2 .footer-copy { justify-self: end; margin: 0; font-size: 14px; color: var(--n-faint); text-align: right; }
.home-v2 .footer-legal {
  grid-column: 1 / -1; display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
  border-top: 1px solid var(--n-line); padding-top: 26px; margin-top: 6px;
}
@media (max-width: 820px) {
  .home-v2 .footer { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .home-v2 .footer-logo, .home-v2 .footer-copy { justify-self: center; text-align: center; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .n-band-track, .n-ind-track { animation: none; }
}