/* ==========================================================================
   LARDOX STUDIOS — DS CREATIVE DESIGN IDENTITY
   Inspired by: DS Creative Design Studio (Angelika Staruch)
   ========================================================================== */

:root {
  --bg-dark: #0a0a0a;
  --bg-card: #0a0a0a;
  --bg-card-subtle: #0a0a0a;
  --bg-light: #ffffff;
  --bg-light-subtle: #f6f6f7;
  
  --text-main: #ffffff;
  --text-muted: #8e8e93;
  --text-dim: #636366;
  --text-dark: #0a0a0a;
  --text-dark-muted: #555558;
  
  --border-dark: rgba(255, 255, 255, 0.12);
  --border-dark-hover: rgba(255, 255, 255, 0.28);
  --border-light: rgba(0, 0, 0, 0.12);
  
  --accent-blue: #0055ff;
  --accent-white: #ffffff;
  
  --font-sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  background-color: var(--bg-dark);
  color: var(--text-main);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: no-preference) {
  :root:has(:not(:target)) {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.5;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

img, video, iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Container */
.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container-fluid {
  width: 100%;
  padding: 0 2rem;
}

/* Typography Helpers */
.lowercase {
  text-transform: lowercase;
}

.asterisk {
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  vertical-align: -0.05em;
  margin-right: 0.15em;
}

.crosshair {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  position: relative;
  vertical-align: middle;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-dark);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.brand-logo {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #ffffff;
}

.brand-dot {
  color: var(--accent-blue);
}

.brand-subtitle {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
}

.nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  position: relative;
}

.nav-link:hover, .nav-link.active {
  color: #ffffff;
}





.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  background-color: #ffffff;
  color: #0a0a0a;
  border-radius: 999px;
  transition: var(--transition);
}

.nav-cta:hover {
  background-color: #e5e5e5;
  transform: translateY(-1px);
}

.menu-toggle {
  display: none;
  font-size: 1.25rem;
  padding: 0.5rem;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  position: relative;
  padding-top: 140px;
  padding-bottom: 90px;
  background-color: var(--bg-dark);
  border-bottom: 1px solid var(--border-dark);
  overflow: hidden;
}

/* Wireframe background lines (inspired by Behance) */
.hero-bg-graphic {
  position: absolute;
  top: 50%;
  right: -5%;
  width: 750px;
  height: 750px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.06);
  pointer-events: none;
  transform: translateY(-50%);
}
.hero-bg-graphic::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.hero-bg-graphic::after {
  content: "";
  position: absolute;
  inset: 35%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.04);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.2rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: clamp(3.2rem, 7.5vw, 6.2rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #ffffff;
  margin-bottom: 2rem;
}

.hero-title .asterisk {
  color: #ffffff;
  font-weight: 300;
}

.hero-subtitle-box {
  max-width: 520px;
}

.hero-description {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  background-color: #ffffff;
  color: #0a0a0a;
  border-radius: 999px;
  transition: var(--transition);
}

.btn-primary:hover {
  background-color: #e2e2e5;
  transform: translateY(-2px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  background-color: transparent;
  color: #ffffff;
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  transition: var(--transition);
}

.btn-ghost:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
}

/* Hero Right Column */
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hero-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-dark);
}

.hero-tagline {
  font-size: 0.95rem;
  font-weight: 500;
  color: #ffffff;
  max-width: 320px;
  line-height: 1.45;
}

.hero-micro-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

/* Video Stage Card */
.hero-video-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background-color: #0a0a0a;
  border: 1px solid var(--border-dark);
  aspect-ratio: 16 / 10;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  group: hover;
}

.hero-video-card iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  transition: var(--transition);
}

.hero-video-card:hover .hero-video-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.85) 100%);
}

.hero-video-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffffff;
}

.hero-play-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease-out);
}

.hero-video-card:hover .hero-play-icon {
  transform: scale(1.1);
}

.hero-video-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.hero-video-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
}

.hero-video-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ==========================================================================
   STATEMENT SECTION (HIGH CONTRAST WHITE)
   ========================================================================== */
.statement-section {
  background-color: var(--bg-light);
  color: var(--text-dark);
  padding: 100px 0;
  border-bottom: 1px solid var(--border-light);
}

.statement-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.statement-headline {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.04em;
  max-width: 1100px;
}

.statement-sub {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-dark-muted);
  max-width: 850px;
  line-height: 1.6;
}

/* ==========================================================================
   WORK / PORTFOLIO SECTION
   ========================================================================== */
.work-section {
  padding: 120px 0 100px;
  background-color: var(--bg-dark);
  border-bottom: 1px solid var(--border-dark);
}

.work-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
}

.section-big-title {
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: #ffffff;
}

.work-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
}

.filter-btn {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  border: 1px solid var(--border-dark);
  transition: var(--transition);
}

.filter-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.filter-btn.active {
  background-color: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
  font-weight: 600;
}

/* Portfolio Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

.project-card {
  grid-column: span 6;
  background-color: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-dark);
  transition: var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-dark-hover);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Asymmetric featured cards */
.project-card.featured-wide {
  grid-column: span 12;
}

.project-card.col-4 {
  grid-column: span 4;
}

.project-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #0a0a0a;
}

.project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.project-card:hover .project-thumb {
  transform: scale(1.04);
}

.project-tag-pill {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  padding: 0.35rem 0.8rem;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
}

.project-play-badge {
  position: absolute;
  bottom: 1.2rem;
  right: 1.2rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transform: scale(0.9);
  opacity: 0.85;
  transition: var(--transition);
}

.project-card:hover .project-play-badge {
  transform: scale(1.1);
  opacity: 1;
  background-color: #ffffff;
}

.project-info {
  padding: 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

.project-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.project-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.project-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.project-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   SERVICES SECTION ("WE CAN HELP YOU WITH")
   ========================================================================== */
.services-section {
  padding: 120px 0;
  background-color: #0a0a0a;
  border-bottom: 1px solid var(--border-dark);
}

.services-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
}

.services-left {
  position: sticky;
  top: 120px;
  align-self: start;
}

.services-headline {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #ffffff;
  margin-bottom: 1.8rem;
}

.services-intro-text {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 440px;
  line-height: 1.6;
}

.services-list {
  display: flex;
  flex-direction: column;
}

.service-row {
  border-top: 1px solid var(--border-dark);
  padding: 2.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition);
  cursor: pointer;
}

.service-row:last-child {
  border-bottom: 1px solid var(--border-dark);
}

.service-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.service-row-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 1.8rem;
}

.service-index {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.service-name {
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #ffffff;
  transition: color 0.25s;
}

.service-row:hover .service-name {
  color: #ffffff;
  transform: translateX(4px);
}

.service-arrow {
  font-size: 1.4rem;
  color: var(--text-muted);
  transition: transform 0.3s var(--ease-out), color 0.3s;
}

.service-row:hover .service-arrow {
  color: #ffffff;
  transform: translate(4px, -4px);
}

.service-details {
  padding-left: 3rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 580px;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-left: 3rem;
  margin-top: 0.4rem;
}

.service-tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  color: var(--text-dim);
}

/* ==========================================================================
   MEET THE FOUNDER / LEADERSHIP SECTION
   ========================================================================== */
.founder-section {
  padding: 120px 0;
  background-color: var(--bg-light);
  color: var(--text-dark);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-light);
}

.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.founder-visual-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Huge background letters LX */
.founder-bg-letter {
  position: absolute;
  font-size: clamp(14rem, 26vw, 24rem);
  font-weight: 900;
  line-height: 0.75;
  color: rgba(0, 0, 0, 0.05);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.founder-img-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
  background-color: #0a0a0a;
}

.founder-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
}

.founder-info {
  position: relative;
  z-index: 3;
}

.founder-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dark-muted);
  margin-bottom: 0.8rem;
}

.founder-name {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #0a0a0a;
  margin-bottom: 0.6rem;
}

.founder-role {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-dark-muted);
  margin-bottom: 2rem;
}

.founder-bio {
  font-size: 1.1rem;
  line-height: 1.65;
  color: #0a0a0a;
  margin-bottom: 2rem;
}

.founder-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.founder-tag-pill {
  padding: 0.5rem 1.1rem;
  background-color: #0a0a0a;
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ==========================================================================
   3 DISTINCT CATEGORIES OF PRODUCTION
   ========================================================================== */
.categories-section {
  padding: 100px 0;
  background-color: var(--bg-light-subtle);
  color: var(--text-dark);
  border-bottom: 1px solid var(--border-light);
}

.categories-head {
  max-width: 820px;
  margin-bottom: 4rem;
}

.categories-title {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #0a0a0a;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.category-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--border-light);
}

.category-number {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark-muted);
}

.category-heading {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}

.category-text {
  font-size: 0.98rem;
  color: var(--text-dark-muted);
  line-height: 1.6;
}

/* ==========================================================================
   MARQUEE TICKER BANNERS
   ========================================================================== */
.ticker-banner {
  background-color: #0a0a0a;
  color: #ffffff;
  padding: 1.4rem 0;
  overflow: hidden;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  gap: 3rem;
  animation: marquee 25s linear infinite;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}

.ticker-icon {
  color: #ffffff;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-peace {
  background-color: #ffffff;
  color: #0a0a0a;
  border-color: var(--border-light);
}
.ticker-peace .ticker-track {
  animation-direction: reverse;
}

/* ==========================================================================
   SPACE ONE / ALQUILER & CONTENT STUDIO
   ========================================================================== */
.space-section {
  padding: 120px 0;
  background-color: var(--bg-dark);
  border-bottom: 1px solid var(--border-dark);
}

.space-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.space-media-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-dark);
  aspect-ratio: 4 / 3;
}

.space-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.space-eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.space-title {
  font-size: clamp(3rem, 6vw, 4.8rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.space-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.space-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.space-feat-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: #ffffff;
}

/* ==========================================================================
   CLIENT LOGOS STRIP
   ========================================================================== */
.clients-section {
  padding: 70px 0;
  background-color: var(--bg-dark);
  border-bottom: 1px solid var(--border-dark);
  text-align: center;
}

.clients-title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 2.5rem;
}

.clients-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5rem;
}

.client-logo-item {
  height: 56px;
  max-width: 190px;
  object-fit: contain;
  opacity: 0.65;
  filter: grayscale(100%) brightness(180%);
  transition: opacity 0.3s, transform 0.3s;
}

.client-logo-item:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* ==========================================================================
   MOTTO SECTION & ROTATING BADGE
   ========================================================================== */
.motto-section {
  padding: 140px 0;
  background-color: var(--bg-dark);
  border-bottom: 1px solid var(--border-dark);
  position: relative;
  overflow: hidden;
}

.motto-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 4rem;
  align-items: center;
}

.motto-title {
  font-size: clamp(3rem, 7vw, 5.8rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: #ffffff;
  margin-bottom: 2rem;
}

.motto-title em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
}

.smiley-o {
  display: inline-block;
  position: relative;
}

.motto-copy {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.6;
}

/* Rotating Seal Badge */
.seal-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.rotating-seal {
  width: 220px;
  height: 220px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rotating-seal-svg {
  width: 100%;
  height: 100%;
  animation: rotate-badge 20s linear infinite;
  transform-origin: center;
}

.rotating-seal-center {
  position: absolute;
  font-size: 2rem;
  color: #ffffff;
}

@keyframes rotate-badge {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   READY TO WORK / BRIEF SECTION
   ========================================================================== */
.contact-section {
  padding: 120px 0;
  background-color: var(--bg-light);
  color: var(--text-dark);
  border-bottom: 1px solid var(--border-light);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
}

.contact-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-headline {
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #0a0a0a;
  margin-bottom: 2.5rem;
}

.brief-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0a0a0a;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 1rem 1.2rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background-color: #ffffff;
  color: #0a0a0a;
  transition: border-color 0.2s;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: #0a0a0a;
}

.btn-submit-brief {
  align-self: flex-start;
  padding: 1rem 2.2rem;
  background-color: #0a0a0a;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 8px;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-submit-brief:hover {
  background-color: #0a0a0a;
  transform: translateY(-2px);
}

.contact-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-photo-card {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.contact-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.direct-channels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.channel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  color: #0a0a0a;
  transition: var(--transition);
}

.channel-link:hover {
  background-color: #0a0a0a;
  color: #ffffff;
}

/* ==========================================================================
   NEWSLETTER SECTION
   ========================================================================== */
.newsletter-section {
  padding: 90px 0;
  background-color: #ffffff;
  color: #0a0a0a;
  border-bottom: 1px solid var(--border-light);
}

.newsletter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.newsletter-title {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
}

.newsletter-sub {
  font-size: 1.05rem;
  color: var(--text-dark-muted);
  line-height: 1.5;
}

.newsletter-form {
  display: flex;
  gap: 1rem;
}

.newsletter-input-wrap {
  position: relative;
  flex-grow: 1;
}

.newsletter-input {
  width: 100%;
  padding: 1rem 0;
  font-size: 1.05rem;
  font-family: inherit;
  border: none;
  border-bottom: 2px solid #0a0a0a;
  background: transparent;
  color: #0a0a0a;
}

.newsletter-input:focus {
  outline: none;
}

.newsletter-btn {
  padding: 1rem 2rem;
  background-color: #0a0a0a;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 4px;
  transition: var(--transition);
}

.newsletter-btn:hover {
  background-color: #0a0a0a;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  padding: 100px 0 60px;
  background-color: #0a0a0a;
  color: #ffffff;
  border-top: 1px solid var(--border-dark);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 4rem;
  margin-bottom: 5rem;
}

.footer-brand-title {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
}

.footer-tagline {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.6;
}

.footer-col-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 1.4rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-link {
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

.footer-link:hover {
  color: #ffffff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-dark);
  font-size: 0.82rem;
  color: var(--text-dim);
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

/* ==========================================================================
   MODAL (PROJECT VIEWER)
   ========================================================================== */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

.project-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background-color: #0a0a0a;
  border: 1px solid var(--border-dark);
  border-radius: 20px;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s var(--ease-out);
}

.project-modal.active .modal-content {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 10;
  transition: var(--transition);
}

.modal-close-btn:hover {
  background-color: #ffffff;
  color: #0a0a0a;
  transform: scale(1.08);
}

.modal-video-stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #0a0a0a;
  border-bottom: 1px solid var(--border-dark);
}

.modal-video-stage iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.modal-details {
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 3rem;
}

.modal-tag {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
  margin-bottom: 1rem;
}

.modal-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 1rem;
}

.modal-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.modal-facts-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background-color: rgba(255, 255, 255, 0.03);
  padding: 1.8rem;
  border-radius: 12px;
  border: 1px solid var(--border-dark);
}

.modal-fact-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.modal-fact-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.modal-fact-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ==========================================================================
   RESPONSIVENESS
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .services-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .services-left {
    position: static;
  }
  .founder-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .space-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .newsletter-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .categories-grid {
    grid-template-columns: 1fr;
  }
  .modal-details {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .nav-menu, .nav-cta {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .project-card, .project-card.col-4 {
    grid-column: span 12;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
}

/* ============================================================
   Ajustes de la copia local
   ============================================================ */
@font-face{
  font-family:"LX Inter Tight";
  src:url("/assets/fonts/inter-tight.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
:root{
  --font-sans:"LX Inter Tight","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
}

/* Botón hamburguesa */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:5px;
  width:42px;height:42px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  cursor:pointer;
}
.menu-toggle span{
  display:block;width:16px;height:1.5px;margin:0 auto;
  background:#fff;transition:transform .25s var(--ease-out),opacity .25s var(--ease-out);
}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.mobile-nav{
  display:none;
  position:fixed;top:72px;left:0;right:0;bottom:0;
  z-index:99;
  padding:2rem 1.5rem;
  background:rgba(10,10,10,.98);
  border-top:1px solid var(--border-dark);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  flex-direction:column;
  gap:.2rem;
}
.mobile-nav[hidden]{display:none!important}
.mobile-nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 0;
  border-bottom:1px solid var(--border-dark);
  font-size:1.25rem;font-weight:500;color:#fff;
}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav__cta{
  margin-top:1.2rem;
  padding:1rem 1.2rem!important;
  border:0!important;
  border-radius:999px;
  background:#fff;color:#0a0a0a!important;
  font-weight:700;
}
body.menu-open{overflow:hidden}

@media (max-width:768px){
  .nav-menu,.nav-cta{display:none!important}
  .menu-toggle{display:inline-flex}
  .mobile-nav:not([hidden]){display:flex}
  .hero-actions{flex-direction:column;align-items:stretch;gap:.7rem}
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost{
    width:100%;
    justify-content:space-between;
    padding:.8rem 1.2rem;
    font-size:.85rem;
    white-space:nowrap;
  }
}

/* El panel móvil debe quedar por encima del hero */
.mobile-nav{
  z-index:200!important;
  background:#0a0a0a!important;
  top:73px!important;
}
.site-header{z-index:300}

/* Trabajo agrupado como el sitio original */
.projects-grid{display:block!important}
.work-group{margin-top:3.2rem}
.work-group-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-top:1rem;margin-bottom:1.5rem;
  border-top:1px solid var(--border-dark);
}
.work-group-title{font-size:1.35rem;font-weight:700;letter-spacing:-.03em;color:#fff}
.work-group-count{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.work-group-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
@media (max-width:768px){
  .work-group-grid{grid-template-columns:1fr;gap:1.2rem}
}

/* Trabajo en dos carruseles, uno encima del otro */
.projects-grid{display:block!important}
.work-carousel{margin-top:2.8rem}
.work-carousel-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1rem;margin-bottom:1.2rem;
  border-top:1px solid var(--border-dark);
}
.work-carousel-title{font-size:1.35rem;font-weight:700;letter-spacing:-.03em;color:#fff}
.work-carousel-nav{display:flex;gap:.5rem}
.carousel-btn{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border-dark);background:transparent;color:#fff;
  font-size:1rem;cursor:pointer;transition:var(--transition);
}
.carousel-btn:hover{background:#fff;color:#0a0a0a;border-color:#fff}
.work-carousel-track{
  display:flex;gap:1.25rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:.6rem;
}
.work-carousel-track::-webkit-scrollbar{display:none}
.work-carousel-track .project-card{
  flex:0 0 min(420px,82vw);
  scroll-snap-align:start;
  grid-column:auto!important;
}
@media (max-width:768px){
  .work-carousel-track .project-card{flex:0 0 86vw}
  .carousel-btn{width:36px;height:36px}
}

/* Portada Vimeo */
.hero-video-card--vimeo{aspect-ratio:16/9;cursor:default}
.hero-video-card--vimeo .hero-vimeo{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:auto}
.hero-video-card--vimeo .hero-video-overlay{pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 100%)}
.hero-video-card--vimeo .hero-video-bottom{pointer-events:none}

/* Logo SVG oficial */
.brand-svg{height:22px;width:auto;display:block}
@media (max-width:768px){.brand-svg{height:20px}}

/* Iconos sociales junto a Hablemos */
.nav-actions{display:flex;align-items:center;gap:.5rem}
.nav-social-icon{
  width:38px;height:38px;border:1px solid var(--border-dark);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  transition:var(--transition);
}
.nav-social-icon svg{width:16px;height:16px;display:block}
.nav-social-icon:hover{background:#fff;border-color:#fff;color:#0a0a0a}
@media (max-width:768px){.nav-social-icon{width:34px;height:34px}}

/* Filtros de trabajo: sin borde + text roll */
.work-filters{gap:.2rem 1.1rem;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.filter-btn{
  position:relative;
  overflow:hidden;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  padding:.35rem 0!important;
  color:var(--text-muted);
  font-size:.8rem;
  line-height:1.25;
  letter-spacing:.01em;
  cursor:pointer;
}
.filter-btn span{display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.filter-btn::after{
  content:attr(data-label);
  position:absolute;
  left:0;top:100%;width:100%;
  color:#fff;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.filter-btn:hover span,.filter-btn:focus-visible span{transform:translateY(-140%)}
.filter-btn:hover::after,.filter-btn:focus-visible::after{transform:translateY(-100%)}
.filter-btn.active{color:#fff}
@media (max-width:768px){
  .work-filters{justify-content:flex-start;gap:.2rem .8rem}
}

/* Text roll en el menú */
.nav-link{
  position:relative;
  display:inline-block;
  overflow:hidden;
  line-height:1.2;
  vertical-align:middle;
}
.nav-link span{display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.nav-link::after{
  content:attr(data-label);
  position:absolute;
  left:0;top:100%;width:100%;
  color:#fff;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.nav-link:hover span,.nav-link:focus-visible span{transform:translateY(-140%)}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:translateY(-100%)}
.nav-link.active span{color:#fff}

/* Corregir subrayado viejo del nav: solo texto en roll */
.nav-link::after{
  height:auto!important;
  bottom:auto!important;
  background:transparent!important;
  top:100%!important;
  width:100%!important;
  white-space:nowrap;
}

.nav-link{text-decoration:none!important}
.site-header .nav-link::after{
  content:attr(data-label)!important;
  height:auto!important;
  bottom:auto!important;
  background:transparent!important;
  top:100%!important;
  width:100%!important;
}

/* Portada full-width debajo del header */
.hero-section{padding-top:73px}
.hero-video-full{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0a0a0a;
  border-bottom:1px solid var(--border-dark);
}
.hero-video-full .hero-video-card{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.hero-video-full .hero-vimeo{
  width:100%;
  height:100%;
  border:0;
}
@media (max-width:768px){
  .hero-section{padding-top:65px}
  .hero-video-full{aspect-ratio:16/10}
}

/* Hablemos sin fondo + text roll, iconos sin círculo */
.nav-cta{
  position:relative;
  display:inline-block;
  overflow:hidden;
  padding:0!important;
  background:transparent!important;
  color:#fff!important;
  border-radius:0!important;
  font-size:.88rem;
  font-weight:500;
  line-height:1.2;
}
.nav-cta span{display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.nav-cta::after{
  content:attr(data-label);
  position:absolute;
  left:0;top:100%;width:100%;
  color:#fff;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.nav-cta:hover span,.nav-cta:focus-visible span{transform:translateY(-140%)}
.nav-cta:hover::after,.nav-cta:focus-visible::after{transform:translateY(-100%)}
.nav-social-icon{
  width:34px;height:34px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.nav-social-icon:hover{background:transparent!important;color:var(--text-muted)}

/* Igualar el text roll de los filtros al del menú principal */
.filter-btn{
  padding:0!important;
  font-size:.88rem!important;
  line-height:1.2!important;
  letter-spacing:-.01em!important;
}
.filter-btn::after{
  top:100%!important;
  height:auto!important;
  background:transparent!important;
}

/* CTAs del hero: solo texto + text roll */
.hero-actions{gap:2rem}
.hero-link{
  position:relative;
  display:inline-block;
  overflow:hidden;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  color:#fff!important;
  font-size:.95rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
}
.hero-link span{display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.hero-link::after{
  content:attr(data-label);
  position:absolute;
  left:0;top:100%;width:100%;
  color:var(--accent-blue);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.hero-link:hover span,.hero-link:focus-visible span{transform:translateY(-140%)}
.hero-link:hover::after,.hero-link:focus-visible::after{transform:translateY(-100%)}

/* Azul en todos los text roll */
.nav-link::after,
.filter-btn::after,
.nav-cta::after,
.hero-link::after{color:var(--accent-blue)!important}

/* Sin líneas divisorias: todo se siente unido */
.site-header,
.hero-section,
.statement-section,
.work-section,
.services-section,
.categories-section,
.space-section,
.clients-section,
.motto-section,
.contact-section,
.site-footer{border-top:0!important;border-bottom:0!important}
.service-row,
.work-carousel-head,
.work-header,
.statement-headline,
.statement-sub,
.founder-left,
.founder-right,
.contact-left,
.contact-right{border-top:0!important;border-bottom:0!important}

/* Evitar que el hover corte la tarjeta arriba en el carrusel */
.work-carousel-track .project-card:hover{transform:none}

/* Sin bordes en el formulario y canales de contacto */
.form-input,
.form-select,
.form-textarea,
.channel-link,
.contact-photo-card{border:0!important}

/* La caja de ubicación no es un enlace: que no cambie a blanco al pasar el cursor */
.direct-channels .channel-link:not(a):hover{
  background:transparent!important;
  color:#0a0a0a!important;
}

/* Equilibrar el hero: más aire arriba y menos negro abajo */
.hero-section{padding-bottom:40px}
.hero-section .container{padding-top:80px}
@media (max-width:768px){
  .hero-section .container{padding-top:56px}
}

/* Sin bordes en etiquetas y pills secundarios */
.service-tag,
.founder-tag-pill,
.rental-card__specs li,
.modal-tag{border:0!important}

/* Alinear los tags de servicios con el texto descriptivo */
.service-tags{padding-left:0!important;gap:1.2rem}
.service-tag{padding:0!important;background:transparent!important}

/* Tags de servicios alineados con el título/descripción, no debajo del índice */
.service-tags{padding-left:3rem!important;gap:1.2rem}
.service-tag{padding:0!important}

/* Logos de marcas más grandes */
.client-logo-item{height:88px!important;max-width:270px!important}
.clients-logos{gap:6rem!important}
.clients-section{padding:90px 0!important}
@media (max-width:768px){
  .client-logo-item{height:64px!important;max-width:200px!important}
  .clients-logos{gap:3rem!important}
}

/* Distribuir mejor Hablemos + iconos */
.nav-actions{gap:.95rem}
.nav-cta{margin-right:.25rem}
.nav-social-icon{width:30px;height:30px}

/* Detalles azules sutiles en los textos */
::selection{background:var(--accent-blue);color:#ffffff}
.service-index,
.category-number{color:var(--accent-blue)}
.motto-title em,
.ticker-item em{color:var(--accent-blue)}
.hero-title .asterisk{color:var(--accent-blue)}

/* Work en móvil: título arriba y filtros debajo, sin amontonarse */
@media (max-width:768px){
  .work-header{flex-direction:column!important;align-items:flex-start!important;gap:1.4rem!important}
  .work-header-right{width:100%;align-items:flex-start!important}
  .work-filters{justify-content:flex-start!important;width:100%}
}

/* En móvil dejar ver el inicio de la siguiente tarjeta del carrusel */
@media (max-width:768px){
  .work-carousel-track .project-card{flex:0 0 78vw}
}

/* Flechas del carrusel sin borde */
.carousel-btn{border:0!important;background:transparent!important}

/* Hamburguesa de 3 líneas desiguales */
.menu-toggle span{
  display:block;height:2px;background:#fff;
  transition:transform .25s var(--ease-out),opacity .25s var(--ease-out),width .25s var(--ease-out);
}
.menu-toggle span:nth-child(1){width:24px}
.menu-toggle span:nth-child(2){width:17px}
.menu-toggle span:nth-child(3){width:10px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){width:22px;transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){width:22px;transform:translateY(-7px) rotate(-45deg)}

/* Menú móvil: textos centrados y sin líneas */
.mobile-nav a{
  justify-content:center!important;
  text-align:center!important;
  border-bottom:0!important;
}
.mobile-nav__cta{justify-content:center!important}

/* Menú móvil con text roll y CTA sin fondo */
.mobile-nav a{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  text-align:center;
  border-bottom:0;
}
.mobile-nav a span{display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.mobile-nav a::after{
  content:attr(data-label);
  position:absolute;
  left:0;top:100%;width:100%;
  text-align:center;
  color:var(--accent-blue);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.mobile-nav a:hover span,.mobile-nav a:focus-visible span{transform:translateY(-140%)}
.mobile-nav a:hover::after,.mobile-nav a:focus-visible::after{transform:translateY(-100%)}
.mobile-nav__cta{
  margin-top:1.2rem;
  padding:1rem 0!important;
  background:transparent!important;
  color:#fff!important;
  border:0!important;
  border-radius:0!important;
}

/* Menú móvil: roll más sutil */
.mobile-nav{gap:1rem!important}
.mobile-nav a{padding:.35rem 0!important}
.mobile-nav a::after{top:0!important;transform:translateY(100%)}
.mobile-nav a:hover span,.mobile-nav a:focus-visible span{transform:translateY(-100%)}
.mobile-nav a:hover::after,.mobile-nav a:focus-visible::after{transform:translateY(0)}

/* Menú móvil: roll limpio de una línea */
.mobile-nav{gap:2rem!important}
.mobile-nav a{padding:0!important;line-height:1.2}
.mobile-nav a::after{top:100%!important;transform:none!important}
.mobile-nav a:hover span,.mobile-nav a:focus-visible span{transform:translateY(-100%)}
.mobile-nav a:hover::after,.mobile-nav a:focus-visible::after{transform:translateY(-100%)}

/* Menú móvil sin text roll: enlaces normales */
.mobile-nav a::after{display:none!important}
.mobile-nav a span{transform:none!important}
.mobile-nav a{overflow:visible}

/* Espaciado uniforme del menú móvil */
.mobile-nav{gap:1.2rem!important}
.mobile-nav__cta{margin-top:.4rem!important}

/* Menos espacio entre Work y Servicios */
.work-section{padding-bottom:60px!important}
.services-section{padding-top:60px!important}

/* Categorías con fondo blanco */
.categories-section{background:#ffffff!important}

/* Sin línea de división ni bordes en categorías */
.categories-section{border-top:0!important;border-bottom:0!important}
.category-col{border:0!important}

/* Footer móvil en 2 columnas para no dejar tanto negro a la derecha */
@media (max-width:768px){
  .footer-top{grid-template-columns:1fr 1fr!important;gap:2.5rem 1.5rem!important}
  .footer-top > div:first-child{grid-column:1 / -1}
}

/* Sin línea debajo del video de portada */
.hero-video-full{border-bottom:0!important}

/* Evitar que iOS pinte estos glifos como emoji */
.asterisk,
.smiley-o,
.ticker-icon,
.rotating-seal text,
.rotating-seal-center{font-variant-emoji:text}

/* Etiqueta de tipo de trabajo, sin bordes */
.project-type{
  display:inline-block;
  margin-top:.9rem;
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  background:transparent;
  border:0;
}

/* ============================================================
   Identidad: grano de película + revelados al hacer scroll
   ============================================================ */
body::after{
  content:"";
  position:fixed;
  inset:-50%;
  z-index:9999;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:lardox-grain .55s steps(2) infinite;
}
@keyframes lardox-grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}
  75%{transform:translate(-1%,2%)}
  100%{transform:translate(2%,-1%)}
}
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
}

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* Grano al 10% */
body::after{opacity:.1!important}

/* Grano al 30% */
body::after{opacity:.3!important}

/* Grano al 20% pero detrás del contenido (no sobre videos/imágenes) */
body::after{display:none!important}
.hero-section,.work-section,.services-section,.motto-section,.contact-section,.site-footer,.space-section,.founder-section,.clients-section{position:relative}
.hero-section::before,.work-section::before,.services-section::before,.motto-section::before,.contact-section::before,.site-footer::before,.space-section::before,.founder-section::before,.clients-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;
}
.hero-section > *,.work-section > *,.services-section > *,.motto-section > *,.contact-section > *,.site-footer > *,.space-section > *,.founder-section > *,.clients-section > *{position:relative;z-index:1}

/* El fondo decorativo no debe entrar al flujo (rompía el hero) */
.hero-section > .hero-bg-graphic{position:absolute!important;z-index:0!important}
.hero-section > *:not(.hero-bg-graphic),
.work-section > *,
.services-section > *,
.motto-section > *,
.contact-section > *,
.site-footer > *,
.space-section > *,
.founder-section > *,
.clients-section > *{position:relative;z-index:1}

/* Grano animado */
.hero-section::before,.work-section::before,.services-section::before,.motto-section::before,.contact-section::before,.site-footer::before,.space-section::before,.founder-section::before,.clients-section::before{
  animation:lardox-grain-bg .6s steps(2) infinite;
}
@keyframes lardox-grain-bg{
  0%{background-position:0 0}
  25%{background-position:-60px 40px}
  50%{background-position:40px -50px}
  75%{background-position:-30px -20px}
  100%{background-position:50px 30px}
}
@media (prefers-reduced-motion:reduce){
  .hero-section::before,.work-section::before,.services-section::before,.motto-section::before,.contact-section::before,.site-footer::before,.space-section::before,.founder-section::before,.clients-section::before{animation:none}
}

/* Asterisco del hero girando */
.hero-title .asterisk{
  display:inline-block;
  animation:lardox-spin 14s linear infinite;
  transform-origin:50% 50%;
}
@keyframes lardox-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .hero-title .asterisk{animation:none}
}

/* Asterisco de servicios en azul y girando */
.services-headline .asterisk{
  display:inline-block;
  color:var(--accent-blue);
  animation:lardox-spin 14s linear infinite;
  transform-origin:50% 50%;
}
@media (prefers-reduced-motion:reduce){
  .services-headline .asterisk{animation:none}
}

/* El asterisco central gira al revés que el círculo */
.rotating-seal-center{
  animation:rotate-badge 20s linear infinite reverse;
  transform-origin:center;
}
@media (prefers-reduced-motion:reduce){
  .rotating-seal-center{animation:none}
}

/* Dar aire al track para que la sombra del hover no se corte */
.work-carousel-track{
  padding-top:24px!important;
  padding-bottom:44px!important;
  margin-top:-24px!important;
  margin-bottom:-44px!important;
}

/* Más espacio abajo para la sombra del carrusel */
.work-carousel-track{
  padding-bottom:100px!important;
  margin-bottom:-100px!important;
}

/* Aire lateral para que la sombra no se corte a la izquierda */
.work-carousel-track{
  padding-left:24px!important;
  padding-right:24px!important;
  margin-left:-24px!important;
  margin-right:-24px!important;
}

/* Ticker más fluido: GPU + loop exacto */
.ticker-track{
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}
@keyframes marquee{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-50%,0,0)}
}

/* Grano animado con transform (no repinta el fondo) */
.hero-section::before,.work-section::before,.services-section::before,.motto-section::before,.contact-section::before,.site-footer::before,.space-section::before,.founder-section::before,.clients-section::before{
  inset:-12%!important;
  animation:lardox-grain-transform .6s steps(2) infinite!important;
  will-change:transform;
}
@keyframes lardox-grain-transform{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-2%,1%,0)}
  50%{transform:translate3d(1%,-2%,0)}
  75%{transform:translate3d(-1%,2%,0)}
  100%{transform:translate3d(2%,-1%,0)}
}

/* Contener el grano dentro de cada sección para evitar parpadeo arriba del ticker */
.work-section,.services-section,.motto-section,.contact-section,.site-footer,.space-section,.founder-section,.clients-section{overflow:hidden}

/* Modal de proyecto optimizado en móvil */
@media (max-width:768px){
  .modal-actions{
    flex-direction:column!important;
    gap:.6rem!important;
    margin-top:1.2rem!important;
  }
  .modal-actions .btn-primary,
  .modal-actions .btn-ghost{
    width:100%!important;
    justify-content:space-between!important;
    padding:1rem 1.2rem!important;
    white-space:normal!important;
    text-align:left!important;
  }
}

/* Alquiler: imagen full-width formato cine */
.space-section{padding:0 0 100px!important}
.space-full-image{
  width:100vw;
  aspect-ratio:21/9;
  overflow:hidden;
  background:#0a0a0a;
  margin-bottom:60px;
}
.space-full-image .space-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.space-info{max-width:900px;margin:0 auto}
@media (max-width:768px){
  .space-full-image{aspect-ratio:16/9}
}

/* Contacto: foto full-width formato cine */
.contact-section{padding-top:0!important}
.contact-full-image{
  width:100vw;
  aspect-ratio:21/9;
  overflow:hidden;
  background:#0a0a0a;
  margin-bottom:60px;
}
.contact-full-image .contact-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:768px){
  .contact-full-image{aspect-ratio:16/9}
}

/* En móvil mantener proporción cine widescreen */
@media (max-width:768px){
  .space-full-image{aspect-ratio:21/9!important}
  .contact-full-image{aspect-ratio:21/9!important}
}

/* Imágenes aún más widescreen en móvil */
@media (max-width:768px){
  .space-full-image{aspect-ratio:2.76/1!important}
  .contact-full-image{aspect-ratio:2.76/1!important}
}

/* Categorías más compactas en móvil */
@media (max-width:768px){
  .categories-section{padding:60px 0!important}
  .categories-grid{gap:1.2rem!important}
  .category-col{padding:1.3rem!important}
}

/* Quitar barras negras del video (crop tipo cover) */
.hero-video-full{aspect-ratio:16/9!important;overflow:hidden}
.hero-video-full .hero-vimeo{transform:scale(1.18);transform-origin:center}

/* Quitar línea entre fundador y categorías */
.founder-section,.categories-section{border-top:0!important;border-bottom:0!important}

/* Un solo blanco para fundador y categorías */
.founder-section,.categories-section{background:#ffffff!important}

/* El grano hacía que el blanco del fundador se viera gris */
.founder-section::before{display:none!important}

/* Categorías en horizontal (3 columnas) */
.categories-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1.5rem!important}
@media (max-width:900px){
  .categories-grid{grid-template-columns:1fr!important}
}

/* Menos blanco entre fundador y categorías */
.founder-section{padding-bottom:60px!important}
.categories-section{padding-top:60px!important}

/* Banner divisor entre fundador y categorías */
.ticker-divider{
  background:#0a0a0a;
  border-top:0!important;
  border-bottom:0!important;
  padding:1rem 0!important;
}
.ticker-divider .ticker-item{font-size:.95rem}

/* Tickers: misma velocidad y loop sin hueco */
.ticker-track{
  gap:3rem!important;
  padding-right:3rem!important;
  animation-duration:30s!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
}
.ticker-peace .ticker-track{animation-direction:normal!important}

/* Video en la sección de contacto */
.contact-full-image{position:relative}
.contact-full-image .contact-video{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* Escalar el video de contacto para cubrir el widescreen */
.contact-full-image{overflow:hidden!important}
.contact-full-image .contact-video{
  transform:scale(1.55);
  transform-origin:center;
}

/* Carita con vida: mira a los lados y parpadea */
.smiley-o{display:inline-flex;width:.9em;height:.9em;vertical-align:-.08em;margin:0 .04em}
.smiley-svg{width:100%;height:100%;overflow:visible;display:block}
.smiley-eye{animation:smiley-look 6s ease-in-out infinite;transform-origin:50px 42px}
.smiley-eyes{animation:smiley-blink 5.5s infinite;transform-origin:50px 42px}
@keyframes smiley-look{
  0%,18%,100%{transform:translateX(0)}
  28%,42%{transform:translateX(-6px)}
  58%,72%{transform:translateX(6px)}
}
@keyframes smiley-blink{
  0%,93%,100%{transform:scaleY(1)}
  95%{transform:scaleY(.08)}
}
@media (prefers-reduced-motion:reduce){
  .smiley-eye,.smiley-eyes{animation:none}
}

/* Marcas: carrusel animado horizontal */
.clients-marquee{overflow:hidden;width:100%}
.clients-track{
  display:flex;align-items:center;gap:6rem;
  width:max-content;padding-right:6rem;
  animation:clients-marquee 35s linear infinite;
  will-change:transform;
}
.client-logo-item{height:100px!important;max-width:300px!important}
@keyframes clients-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (max-width:768px){
  .clients-track{gap:3rem;padding-right:3rem}
  .client-logo-item{height:64px!important;max-width:200px!important}
}

/* Banners de marcas */
.ticker-brands{
  background:#0a0a0a;
  border-top:0!important;
  border-bottom:0!important;
  padding:1rem 0!important;
}
.ticker-brands .ticker-item{font-size:.95rem}

/* Servicios más compactos */
.services-section{padding:80px 0!important}
.services-grid{gap:2.5rem!important}
.services-headline{font-size:clamp(2.6rem,5vw,4.2rem)!important;margin-bottom:1.2rem!important}
.service-row{padding:1.4rem 0!important;gap:.7rem!important}
.service-desc{font-size:.9rem!important;line-height:1.55!important}
.service-tags{margin-top:.3rem!important}
@media (max-width:768px){
  .services-section{padding:60px 0!important}
}

/* Video arriba de Work */
.work-top-video{width:100vw;aspect-ratio:21/9;overflow:hidden;background:#0a0a0a;margin-bottom:40px}
.work-full-image{position:relative;width:100%;height:100%}
.work-full-image .contact-video{position:absolute;inset:0;width:100%;height:100%;border:0;transform:scale(1.55);transform-origin:center}
@media (max-width:768px){.work-top-video{aspect-ratio:2.76/1}}

/* Quitar borde negro debajo del video de Work */
.work-top-video{margin-bottom:0!important;background:transparent!important}
.work-full-image{background:transparent!important}

/* Separar motto y contacto */
.contact-section{padding-top:90px!important}

/* Categorías más compactas */
.categories-section{padding:50px 0!important}
.categories-grid{gap:1rem!important}
.category-col{padding:1.1rem!important;gap:.5rem!important}

/* Categorías en 3 columnas también en tablet: menos alto total */
@media (max-width:900px) and (min-width:601px){
  .categories-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:600px){
  .categories-grid{grid-template-columns:1fr!important}
}

/* Director: fondo negro y foto sin redondeo */
.founder-section{background:#0a0a0a!important;color:#fff!important}
.founder-img-card{border-radius:0!important}
.founder-name,.founder-role{color:#fff!important}
.founder-bio{color:rgba(255,255,255,.65)!important}
.founder-tag-pill{color:#fff!important;border:0!important}

/* Director: foto B/N y nombre con mayúsculas */
.founder-img{filter:grayscale(1)!important}
.founder-name{text-transform:none!important}

/* Tags del fundador sin fondo y alineados con el texto */
.founder-tags{gap:1.2rem!important;padding-left:0!important;margin-left:0!important}
.founder-tag-pill{background:transparent!important;padding:0!important;color:#fff!important;border:0!important}

/* Contacto más sencillo y compacto */
.contact-section{padding:70px 0!important}
.contact-grid{grid-template-columns:1fr!important;gap:2rem!important;max-width:820px;margin:0 auto}
.contact-headline{font-size:clamp(2rem,4vw,3.2rem)!important;margin-bottom:1.5rem!important}
.brief-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.brief-form .form-group:nth-of-type(4),
.brief-form .btn-submit-brief,
.brief-form #brief-status{grid-column:1 / -1}
.direct-channels{display:flex;flex-wrap:wrap;gap:1rem}
.channel-link{flex:1 1 240px;padding:.9rem 1rem!important}
@media (max-width:768px){
  .brief-form{grid-template-columns:1fr!important}
}

/* Canales de contacto compactos, sin estirarse al hover */
.direct-channels{align-items:flex-start!important}
.channel-link{flex:0 0 auto!important;width:100%!important;min-height:0!important}

/* Canales de contacto compactos, sin ancho completo */
.direct-channels{align-items:flex-start!important;gap:.6rem 1.5rem!important}
.channel-link{width:auto!important;flex:0 1 auto!important;min-width:0!important;padding:.55rem 0!important}

/* Canales de contacto como texto simple, sin caja negra */
.channel-link{
  display:inline-flex!important;
  align-items:center!important;
  gap:.6rem!important;
  background:transparent!important;
  color:#0a0a0a!important;
  border:0!important;
  padding:.5rem 0!important;
}
.channel-link:hover{background:transparent!important;color:var(--accent-blue)!important}

/* Contacto nuevo, simple */
.contact-section{padding:70px 0!important}
.contact-simple{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact-simple-eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1rem}
.contact-simple-title{font-size:clamp(2rem,4vw,3.4rem);font-weight:800;line-height:1.02;letter-spacing:-.04em;margin:0 0 1rem}
.contact-simple-copy{font-size:.95rem;line-height:1.6;color:var(--text-dark-muted);max-width:40ch;margin:0 0 1.5rem}
.contact-simple-links{display:flex;flex-direction:column;gap:.45rem;font-size:.9rem}
.contact-simple-links a{display:inline-flex;gap:.5rem;align-items:center;color:#0a0a0a}
.contact-simple-links a:hover{color:var(--accent-blue)}
.contact-simple-links span{color:var(--text-dark-muted)}
.contact-simple-form{display:flex;flex-direction:column;gap:.8rem}
@media (max-width:768px){
  .contact-simple{grid-template-columns:1fr;gap:2rem}
}

/* Contacto: número aparte y text roll */
.contact-phone{color:var(--text-dark-muted);font-size:.9rem;margin:-.2rem 0 .4rem}
.contact-roll{position:relative;display:inline-block;overflow:hidden;color:#0a0a0a!important;width:fit-content}
.contact-roll span{display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.contact-roll::after{content:attr(data-label);position:absolute;left:0;top:100%;width:100%;color:var(--accent-blue);transition:transform .4s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.contact-roll:hover span{transform:translateY(-140%)}
.contact-roll:hover::after{transform:translateY(-100%)}

/* Compensar el header fijo al navegar por anclas */
section[id],#categories,#work,#services,#space-one,#contacto,.founder-section{scroll-margin-top:90px}

/* Scroll suave al navegar por secciones */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* Alinear el ancla justo debajo del header fijo */
section[id],#categories,#work,#services,#space-one,#contacto,.founder-section{scroll-margin-top:73px!important}

/* Seguridad: nada oculto por reveal */
.reveal{opacity:1!important;transform:none!important;transition:none!important}

/* Work un poco más arriba al navegar */
#work{scroll-margin-top:52px!important}

/* Loader de página */
#lx-loader{
  position:fixed;inset:0;z-index:99999;background:#0a0a0a;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s var(--ease-out);
}
#lx-loader .lx-loader-mark{
  color:var(--accent-blue);font-size:3rem;line-height:1;
  animation:lardox-spin 1.1s linear infinite;display:inline-block;
}
#lx-loader.is-hidden{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  #lx-loader .lx-loader-mark{animation:none}
}

/* Poster detrás del video del hero para no ver negro */
.hero-video-full{background:url('/assets/portada.jpg') center/cover no-repeat #0a0a0a!important}

/* Texto del loader */
#lx-loader{flex-direction:column;gap:1.2rem}
.lx-loader-text{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}

/* Loader horizontal: asterisco + texto en minúscula */
#lx-loader{flex-direction:row!important;gap:1rem!important}
.lx-loader-text{
  font-size:clamp(1.6rem,4vw,3rem);
  font-weight:800;
  letter-spacing:-.04em;
  text-transform:lowercase;
  color:#fff;
}
.lx-loader-mark{font-size:clamp(2rem,5vw,3.6rem)!important}

/* Poster encima del iframe hasta que el video arranque */
.hero-video-full{position:relative}
.hero-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:2;transition:opacity .6s ease;pointer-events:none;
}
.hero-poster.is-hidden{opacity:0}

/* Video del hero sin recorte lateral */
.hero-vimeo{transform:none!important}

/* Loop perfecto de tickers: dos grupos idénticos */
.ticker-track{display:flex!important;width:max-content!important;gap:0!important;padding-right:0!important;animation:ticker-loop 35s linear infinite!important}
.ticker-group{display:flex;align-items:center;gap:3rem;padding-right:3rem;flex:0 0 auto}
@keyframes ticker-loop{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Espaciado proporcional en tickers */
.ticker-item{gap:.55rem!important}
.ticker-dot{opacity:.55}

/* Estrella como separador centrado */
.ticker-star{color:#fff;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}

/* Ticker blanco sobre Work */
.ticker-white{background:#ffffff!important;color:#0a0a0a!important;border:0!important}
.ticker-white .ticker-item,.ticker-white .ticker-star{color:#0a0a0a}
.ticker-white .ticker-item em{color:var(--accent-blue)}
.ticker-white .ticker-dot{opacity:.45}

/* Loop infinito idéntico en todos los tickers */
.ticker-track{display:flex!important;width:max-content!important;gap:0!important;animation:ticker-loop 35s linear infinite!important}
.ticker-group{display:flex!important;align-items:center!important;gap:3rem!important;padding-right:3rem!important;flex:0 0 auto!important}
@keyframes ticker-loop{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Marcas en blanco y sin animación al hover */
.client-logo-item{opacity:1!important;filter:none!important}
.client-logo-item:hover{transform:none!important;opacity:1!important;filter:none!important}

/* Servicios en 2 columnas para reducir altura sin tocar la tipografía */
.services-list{display:grid!important;grid-template-columns:1fr 1fr!important;gap:1.4rem 2rem!important}
.service-row{padding:.9rem 0!important}
@media (max-width:900px){
  .services-list{grid-template-columns:1fr!important}
}

/* Servicios en fila horizontal: título izquierda, descripción derecha */
.services-list{display:block!important}
.service-row{display:grid!important;grid-template-columns:1fr 1.25fr!important;column-gap:2.5rem!important;align-items:start!important;padding:1rem 0!important}
.service-row-header{grid-column:1;grid-row:1}
.service-desc{grid-column:2;grid-row:1;margin:0!important}
.service-tags{grid-column:2;grid-row:2;margin-top:.4rem!important}
@media (max-width:900px){
  .service-row{grid-template-columns:1fr!important}
  .service-row-header,.service-desc,.service-tags{grid-column:1}
}

/* Servicios en carrusel horizontal */
.services-list{
  display:flex!important;
  gap:1.2rem!important;
  overflow-x:auto!important;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  scrollbar-width:none;
}
.services-list::-webkit-scrollbar{display:none}
.service-row{
  flex:0 0 min(420px,82vw)!important;
  scroll-snap-align:start;
  display:flex!important;
  flex-direction:column!important;
  padding:1.2rem!important;
}
.service-row-header,.service-desc,.service-tags{grid-column:auto!important;grid-row:auto!important}
@media (max-width:900px){
  .service-row{flex:0 0 86vw!important}
}

/* Carrusel de servicios (regla final con prioridad) */
#services .services-list{
  display:flex!important;
  flex-direction:row!important;
  gap:1.2rem!important;
  overflow-x:auto!important;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  scrollbar-width:none;
  width:100%;
}
#services .services-list::-webkit-scrollbar{display:none}
#services .service-row{
  flex:0 0 min(420px,82vw)!important;
  display:flex!important;
  flex-direction:column!important;
  scroll-snap-align:start;
  padding:1.2rem!important;
  border:1px solid var(--border-dark);
}
#services .service-desc,#services .service-tags{grid-column:auto!important;grid-row:auto!important;margin:0!important}

/* El carrusel no debe expandirse: contenerlo en su columna */
.services-right{min-width:0!important}
#services .services-list{max-width:100%!important;min-width:0!important}

/* Servicios: centrar título y quitar líneas divisorias */
.services-grid{align-items:center!important}
.services-left{display:flex;flex-direction:column;justify-content:center!important}
#services .service-row{border:0!important;border-left:0!important;border-right:0!important;border-top:0!important;border-bottom:0!important}

/* Alinear el título de servicios arriba con los títulos del carrusel */
.services-grid{align-items:start!important}
.services-left{justify-content:flex-start!important}

/* Quitar offset superior del bloque de título de servicios */
.services-left,.services-headline{padding-top:0!important;margin-top:0!important}

/* Número arriba y texto debajo en servicios */
.service-row-title-wrap{flex-direction:column!important;align-items:flex-start!important;gap:.4rem!important}

/* Servicios siempre visibles, sin acordeón */
.service-details{display:block!important}
.service-tags{display:flex!important}

/* Alinear verticalmente el título de servicios con los títulos del carrusel */
.services-left{margin-top:-67px!important}
@media (max-width:900px){.services-left{margin-top:0!important}}

/* Servicios sin flecha ni animación al hover */
.service-arrow{display:none!important}
.service-row:hover{transform:none!important;box-shadow:none!important}

/* Servicios sin ningún movimiento al hover */
.service-row,.service-row:hover,.service-name,.service-row-header{transition:none!important;transform:none!important}

/* Subir un poco más el título de servicios */
.services-left{margin-top:-100px!important}
@media (max-width:900px){.services-left{margin-top:0!important}}

/* Espaciado uniforme entre secciones */
.work-section,.services-section,.motto-section,.categories-section,.space-section,.contact-section,.clients-section{padding-top:80px!important;padding-bottom:80px!important}
.services-left{margin-top:0!important}
.work-carousel-track{padding-bottom:24px!important;margin-bottom:0!important}

/* Pegar la imagen de alquiler a la sección anterior */
.space-section{padding-top:0!important}

/* Sin sombras en las tarjetas de trabajo */
.project-card,.project-card:hover{box-shadow:none!important}

/* Subir servicios para reducir el espacio con Work */
.services-section{padding-top:40px!important}

/* Reducir también el cierre de Work */
.work-section{padding-bottom:30px!important}

/* Alinear exactamente el título con 'dirección & producción audiovisual' */
.services-left{margin-top:-35px!important}
@media (max-width:900px){.services-left{margin-top:0!important}}

/* Alinear fino con el título de la tarjeta */
.services-left{margin-top:-49px!important}

/* Ajuste final de alineación del título de servicios */
.services-left{margin-top:-63px!important}

/* Marcas en fondo blanco y con menos espacio */
.clients-section{background:#ffffff!important;padding:40px 0!important;
  border-top:0!important;border-bottom:0!important}
.clients-title{color:#0a0a0a!important;margin-bottom:1.4rem!important}
.client-logo-item{filter:invert(1)!important;opacity:1!important}

/* Logo eléctrico: brillo azul y parpadeo sutil */
.brand-svg{
  filter:drop-shadow(0 0 4px var(--accent-blue)) drop-shadow(0 0 10px rgba(0,85,255,.45));
  animation:logo-electric 4s infinite;
}
@keyframes logo-electric{
  0%,7%,9%,100%{filter:drop-shadow(0 0 4px var(--accent-blue)) drop-shadow(0 0 10px rgba(0,85,255,.45));opacity:1}
  8%{filter:drop-shadow(0 0 1px var(--accent-blue));opacity:.72}
  42%{filter:drop-shadow(0 0 7px var(--accent-blue)) drop-shadow(0 0 16px rgba(0,85,255,.65));opacity:1}
  43%{filter:drop-shadow(0 0 2px var(--accent-blue));opacity:.8}
  70%{filter:drop-shadow(0 0 5px var(--accent-blue)) drop-shadow(0 0 12px rgba(0,85,255,.5));opacity:1}
}
@media (prefers-reduced-motion:reduce){.brand-svg{animation:none}}

/* Loop exacto por ancho real del grupo */
@keyframes ticker-loop{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--ticker-w, 50%)),0,0)}
}

/* Móvil: no recortar el título de servicios */
@media (max-width:900px){
  .services-left{margin-top:0!important;padding-top:0!important}
}

/* Carrusel de servicios: flechas, peek y atenuado */
.services-list{padding-right:8vw!important;scrollbar-width:none}
.services-nav{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1rem}
.services-nav button{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:transparent;color:#fff;font-size:1rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .25s,border-color .25s;
}
.services-nav button:hover{background:rgba(255,255,255,.08);border-color:#fff}
.service-row{opacity:.5;transition:opacity .3s}
.service-row.is-active{opacity:1}

/* Marcas: mantener negro al hover sobre fondo blanco */
.client-logo-item:hover{filter:invert(1)!important;opacity:1!important;transform:none!important}

/* Flechas de servicios con el mismo diseño que Work */
.services-nav button{
  width:auto!important;height:auto!important;border:0!important;border-radius:0!important;
  background:transparent!important;padding:.2rem .35rem!important;
  font-size:1.1rem!important;color:#fff!important;opacity:.8;
}
.services-nav button:hover{background:transparent!important;opacity:1}

/* Servicios: versión limpia, sin animaciones */
.services-section{padding:60px 0!important}
.services-simple{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start}
.services-headline{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:800;line-height:.98;letter-spacing:-.04em;margin:0 0 1.4rem}
.services-headline .asterisk{color:var(--accent-blue)}
.services-intro{font-size:.95rem;line-height:1.65;color:var(--text-dark-muted);max-width:38ch;margin:0}
.services-simple-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem 2.6rem}
.service-card{border:0;background:transparent;padding:0;margin:0;transition:none}
.service-card .service-index{display:block;font-size:.8rem;font-weight:600;color:var(--accent-blue);margin-bottom:.7rem}
.service-card .service-name{font-size:clamp(1.15rem,1.6vw,1.5rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 0 .8rem;color:#fff}
.service-card .service-details{font-size:.9rem;line-height:1.6;color:var(--text-dark-muted);margin:0 0 .9rem}
.service-card .service-tags{display:flex;flex-wrap:wrap;gap:.5rem 1rem}
.service-card .service-tag{font-size:.78rem;color:var(--text-dim)}
.service-card:hover,.service-card *{transition:none!important;transform:none!important;opacity:1!important;color:inherit}
@media (max-width:900px){
  .services-simple{grid-template-columns:1fr;gap:2.4rem}
  .services-simple-grid{grid-template-columns:1fr;gap:2rem}
  .services-section{padding:40px 0!important}
}

/* Servicios en tabs */
.services-tabs{display:flex;flex-direction:column;gap:1.6rem}
.services-tablist{display:flex;gap:1.4rem;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:.8rem}
.services-tab{
  background:transparent;border:0;padding:0;cursor:pointer;
  font-size:.9rem;font-weight:700;letter-spacing:.02em;color:var(--text-dim);
}
.services-tab.is-active{color:var(--accent-blue)}
.services-tab:focus-visible{outline:2px solid var(--accent-blue);outline-offset:4px}
.services-panel{display:none}
.services-panel.is-active{display:block}
.services-panel .service-name{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0 0 1rem;color:#fff}
.services-panel .service-details{font-size:.95rem;line-height:1.65;color:var(--text-dark-muted);max-width:52ch;margin:0 0 1rem}
.services-panel .service-tags{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
.services-panel .service-tag{font-size:.8rem;color:var(--text-dim)}

/* Imagen de alquiler menos alta */
.space-full-image{aspect-ratio:3/1!important}
@media (max-width:768px){.space-full-image{aspect-ratio:2.4/1!important}}

/* Text roll en las tabs de servicios */
.services-tab{position:relative;overflow:hidden;display:inline-block}
.services-tab span{display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.services-tab::after{
  content:attr(data-label);position:absolute;left:0;top:100%;width:100%;
  color:var(--accent-blue);transition:transform .4s cubic-bezier(.2,.7,.2,1);pointer-events:none;
}
.services-tab:hover span{transform:translateY(-140%)}
.services-tab:hover::after{transform:translateY(-100%)}

/* Logo sin efecto eléctrico */
.brand-svg{filter:none!important;animation:none!important}

/* Cursor correcto sobre el logo */
.brand,.brand-svg,a.brand,.logo a{cursor:pointer!important}

/* Marcas estilo Logo Loop: fade en bordes y pausa al hover */
.clients-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.clients-marquee:hover .clients-track{animation-play-state:paused}

/* Marcas sin fade lateral */
.clients-marquee{-webkit-mask-image:none!important;mask-image:none!important}

/* Marcas sin fondo blanco */
.clients-section{background:#0a0a0a!important}
.clients-title{color:var(--text-dim)!important}
.client-logo-item{filter:none!important}
.client-logo-item:hover{filter:none!important}

/* Marcas: sin pausa al hover (evita el salto) */
.clients-marquee:hover .clients-track{animation-play-state:running!important}

/* Variable proximity */
.vp-letter{display:inline-block;will-change:font-variation-settings}

/* Letras para variable proximity (inline para no romper el flujo) */
.vp-letter{display:inline;will-change:font-variation-settings}

/* Hero: evitar línea de video desbordada */
.hero-video-full{overflow:hidden!important;line-height:0}
.hero-vimeo{display:block!important;border:0!important;vertical-align:top}

/* Border glow en las tarjetas de Work */
.project-card{position:relative}
.project-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--glow-angle,0deg),
    transparent 0deg, rgba(0,85,255,.15) 30deg, #0055ff 55deg, rgba(0,85,255,.15) 80deg, transparent 110deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:3;
}
.project-card:hover::before{opacity:1}
@media (prefers-reduced-motion:reduce){.project-card::before{display:none}}

/* Border glow dentro de la tarjeta (no se recorta) */
.project-card::before{inset:0!important;border-radius:inherit!important;z-index:4!important}

/* BorderGlow portado de React Bits para las tarjetas de Work */
.project-card.border-glow-card{
  --edge-proximity:0;
  --cursor-angle:45deg;
  --edge-sensitivity:30;
  --color-sensitivity:50;
  --card-bg:#120F17;
  --glow-padding:40px;
  --cone-spread:25;
  --fill-opacity:.35;
  --glow-color:hsl(220deg 100% 66% / 100%);
  --glow-color-60:hsl(220deg 100% 66% / 60%);
  --glow-color-50:hsl(220deg 100% 66% / 50%);
  --glow-color-40:hsl(220deg 100% 66% / 40%);
  --glow-color-30:hsl(220deg 100% 66% / 30%);
  --glow-color-20:hsl(220deg 100% 66% / 20%);
  --glow-color-10:hsl(220deg 100% 66% / 10%);
  --gradient-one:radial-gradient(at 80% 55%, #0055ff 0px, transparent 50%);
  --gradient-two:radial-gradient(at 69% 34%, #38bdf8 0px, transparent 50%);
  --gradient-three:radial-gradient(at 8% 6%, #c084fc 0px, transparent 50%);
  --gradient-four:radial-gradient(at 41% 38%, #0055ff 0px, transparent 50%);
  --gradient-five:radial-gradient(at 86% 85%, #38bdf8 0px, transparent 50%);
  --gradient-six:radial-gradient(at 82% 18%, #c084fc 0px, transparent 50%);
  --gradient-seven:radial-gradient(at 51% 4%, #38bdf8 0px, transparent 50%);
  --gradient-base:linear-gradient(#0055ff 0 100%);
  position:relative!important;
  isolation:isolate;
  overflow:visible!important;
  border:1px solid rgb(255 255 255 / 15%)!important;
}
.project-card.border-glow-card::before,
.project-card.border-glow-card::after,
.project-card.border-glow-card > .edge-light{
  content:"";position:absolute;inset:0;border-radius:inherit;
  transition:opacity .25s ease-out;z-index:-1;
}
.project-card.border-glow-card::before{
  border:1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box, var(--gradient-two) border-box, var(--gradient-three) border-box,
    var(--gradient-four) border-box, var(--gradient-five) border-box, var(--gradient-six) border-box,
    var(--gradient-seven) border-box, var(--gradient-base) border-box;
  opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image:conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%));
}
.project-card.border-glow-card::after{
  border:1px solid transparent;
  background:
    var(--gradient-one) padding-box, var(--gradient-two) padding-box, var(--gradient-three) padding-box,
    var(--gradient-four) padding-box, var(--gradient-five) padding-box, var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box, var(--gradient-base) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite:subtract, add, add, add, add, add;
  opacity:calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode:soft-light;
}
.project-card.border-glow-card > .edge-light{
  inset:calc(var(--glow-padding) * -1);pointer-events:none;z-index:1;
  mask-image:conic-gradient(from var(--cursor-angle) at center,
    black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode:plus-lighter;
}
.project-card.border-glow-card > .edge-light::before{
  content:"";position:absolute;inset:var(--glow-padding);border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}
.project-card.border-glow-card:not(:hover)::before,
.project-card.border-glow-card:not(:hover)::after,
.project-card.border-glow-card:not(:hover) > .edge-light{
  opacity:0;transition:opacity .75s ease-in-out;
}
.project-card > .project-media-wrap,
.project-card > .project-info{position:relative;z-index:2}

/* BorderGlow: capas visibles sobre la imagen y glow contenido */
.project-card.border-glow-card::before,
.project-card.border-glow-card::after,
.project-card.border-glow-card > .edge-light{z-index:3!important;pointer-events:none}
.project-card.border-glow-card{--glow-padding:22px}
.project-card.border-glow-card::after{--fill-opacity:.12}

/* BorderGlow: solo borde, sin relleno interno */
.project-card.border-glow-card::after{display:none!important}