/* ============================================
   OH WOW! - Static Home Page Styles
   ============================================ */

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

:root {
  --bg: var(--color-warm-canvas, #FDF8F2);
  --black: var(--color-ink-core, #252525);
  --white: var(--color-white, #ffffff);
  --lime: var(--color-estudio, #C1FE1A);
  --text-muted: rgba(37, 37, 37, 0.55);
  --text-light: rgba(37, 37, 37, 0.7);
  --border: rgba(37, 37, 37, 0.1);
  --max-w: 1280px;
  --font: var(--font-body, 'Inter', sans-serif);
  --font-display: 'Space Grotesk', sans-serif;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--black);
  line-height: 1.5;
  font-weight: 400;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

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

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

/* Custom Cursor - Wand (black) */
* {
  cursor: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 1200 1200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M230.457 300.04L202.162 179.552L272.653 262.544L324.916 136.67L320.361 258.686L414.109 157.108L365.733 263.431L501.812 244.812L402.555 315.879L490.259 403.582L370.522 347.912L401.949 471.532L332.218 368.988L332.37 503.524L300.933 370.517L253.344 480.751L270.394 339.977L176.637 433.734L230.457 300.04Z' fill='%23000000'/%3E%3Cpath d='M509.166 463.049C516.513 455.702 525.085 456.927 534.881 466.723C567.943 498.56 604.065 531.621 643.249 565.907C682.433 601.418 722.229 636.316 762.638 670.602C803.046 704.888 841.312 737.031 877.435 767.031C912.945 797.644 943.864 823.664 970.191 845.093C996.517 867.746 1014.58 883.971 1024.37 893.767C1039.68 909.073 1048.25 924.992 1050.09 941.523C1052.54 958.666 1047.03 973.972 1033.56 987.441C1020.09 1000.91 1004.78 1006.42 987.64 1003.97C971.109 1002.14 955.19 993.564 939.884 978.258C929.476 967.849 913.558 949.482 892.129 923.155C870.088 897.44 844.067 866.522 814.067 830.399C783.454 794.889 751.005 756.929 716.719 716.521C682.433 676.112 647.841 636.01 612.943 596.213C578.045 557.642 544.677 521.825 512.84 488.764C503.044 478.968 501.819 470.396 509.166 463.049Z' fill='%23000000'/%3E%3C/svg%3E") 12 12, auto;
}

button, a, [role="button"], input[type="submit"], input[type="button"] {
  cursor: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 1200 1200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M230.457 300.04L202.162 179.552L272.653 262.544L324.916 136.67L320.361 258.686L414.109 157.108L365.733 263.431L501.812 244.812L402.555 315.879L490.259 403.582L370.522 347.912L401.949 471.532L332.218 368.988L332.37 503.524L300.933 370.517L253.344 480.751L270.394 339.977L176.637 433.734L230.457 300.04Z' fill='%23000000'/%3E%3Cpath d='M509.166 463.049C516.513 455.702 525.085 456.927 534.881 466.723C567.943 498.56 604.065 531.621 643.249 565.907C682.433 601.418 722.229 636.316 762.638 670.602C803.046 704.888 841.312 737.031 877.435 767.031C912.945 797.644 943.864 823.664 970.191 845.093C996.517 867.746 1014.58 883.971 1024.37 893.767C1039.68 909.073 1048.25 924.992 1050.09 941.523C1052.54 958.666 1047.03 973.972 1033.56 987.441C1020.09 1000.91 1004.78 1006.42 987.64 1003.97C971.109 1002.14 955.19 993.564 939.884 978.258C929.476 967.849 913.558 949.482 892.129 923.155C870.088 897.44 844.067 866.522 814.067 830.399C783.454 794.889 751.005 756.929 716.719 716.521C682.433 676.112 647.841 636.01 612.943 596.213C578.045 557.642 544.677 521.825 512.84 488.764C503.044 478.968 501.819 470.396 509.166 463.049Z' fill='%23000000'/%3E%3C/svg%3E") 12 12, pointer;
}

/* Green cursor for dark backgrounds */
.cursor-green,
.cursor-green * {
  cursor: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 1200 1200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M230.457 300.04L202.162 179.552L272.653 262.544L324.916 136.67L320.361 258.686L414.109 157.108L365.733 263.431L501.812 244.812L402.555 315.879L490.259 403.582L370.522 347.912L401.949 471.532L332.218 368.988L332.37 503.524L300.933 370.517L253.344 480.751L270.394 339.977L176.637 433.734L230.457 300.04Z' fill='%23C1FE1A'/%3E%3Cpath d='M509.166 463.049C516.513 455.702 525.085 456.927 534.881 466.723C567.943 498.56 604.065 531.621 643.249 565.907C682.433 601.418 722.229 636.316 762.638 670.602C803.046 704.888 841.312 737.031 877.435 767.031C912.945 797.644 943.864 823.664 970.191 845.093C996.517 867.746 1014.58 883.971 1024.37 893.767C1039.68 909.073 1048.25 924.992 1050.09 941.523C1052.54 958.666 1047.03 973.972 1033.56 987.441C1020.09 1000.91 1004.78 1006.42 987.64 1003.97C971.109 1002.14 955.19 993.564 939.884 978.258C929.476 967.849 913.558 949.482 892.129 923.155C870.088 897.44 844.067 866.522 814.067 830.399C783.454 794.889 751.005 756.929 716.719 716.521C682.433 676.112 647.841 636.01 612.943 596.213C578.045 557.642 544.677 521.825 512.84 488.764C503.044 478.968 501.819 470.396 509.166 463.049Z' fill='%23C1FE1A'/%3E%3C/svg%3E") 12 12, auto !important;
}

.cursor-green button, .cursor-green a, .cursor-green [role="button"],
.cursor-green input[type="submit"], .cursor-green input[type="button"] {
  cursor: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 1200 1200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M230.457 300.04L202.162 179.552L272.653 262.544L324.916 136.67L320.361 258.686L414.109 157.108L365.733 263.431L501.812 244.812L402.555 315.879L490.259 403.582L370.522 347.912L401.949 471.532L332.218 368.988L332.37 503.524L300.933 370.517L253.344 480.751L270.394 339.977L176.637 433.734L230.457 300.04Z' fill='%23C1FE1A'/%3E%3Cpath d='M509.166 463.049C516.513 455.702 525.085 456.927 534.881 466.723C567.943 498.56 604.065 531.621 643.249 565.907C682.433 601.418 722.229 636.316 762.638 670.602C803.046 704.888 841.312 737.031 877.435 767.031C912.945 797.644 943.864 823.664 970.191 845.093C996.517 867.746 1014.58 883.971 1024.37 893.767C1039.68 909.073 1048.25 924.992 1050.09 941.523C1052.54 958.666 1047.03 973.972 1033.56 987.441C1020.09 1000.91 1004.78 1006.42 987.64 1003.97C971.109 1002.14 955.19 993.564 939.884 978.258C929.476 967.849 913.558 949.482 892.129 923.155C870.088 897.44 844.067 866.522 814.067 830.399C783.454 794.889 751.005 756.929 716.719 716.521C682.433 676.112 647.841 636.01 612.943 596.213C578.045 557.642 544.677 521.825 512.84 488.764C503.044 478.968 501.819 470.396 509.166 463.049Z' fill='%23C1FE1A'/%3E%3C/svg%3E") 12 12, pointer !important;
}

/* Black cursor when footer flips to lime */
.footer.green,
.footer.green * {
  cursor: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 1200 1200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M230.457 300.04L202.162 179.552L272.653 262.544L324.916 136.67L320.361 258.686L414.109 157.108L365.733 263.431L501.812 244.812L402.555 315.879L490.259 403.582L370.522 347.912L401.949 471.532L332.218 368.988L332.37 503.524L300.933 370.517L253.344 480.751L270.394 339.977L176.637 433.734L230.457 300.04Z' fill='%23000000'/%3E%3Cpath d='M509.166 463.049C516.513 455.702 525.085 456.927 534.881 466.723C567.943 498.56 604.065 531.621 643.249 565.907C682.433 601.418 722.229 636.316 762.638 670.602C803.046 704.888 841.312 737.031 877.435 767.031C912.945 797.644 943.864 823.664 970.191 845.093C996.517 867.746 1014.58 883.971 1024.37 893.767C1039.68 909.073 1048.25 924.992 1050.09 941.523C1052.54 958.666 1047.03 973.972 1033.56 987.441C1020.09 1000.91 1004.78 1006.42 987.64 1003.97C971.109 1002.14 955.19 993.564 939.884 978.258C929.476 967.849 913.558 949.482 892.129 923.155C870.088 897.44 844.067 866.522 814.067 830.399C783.454 794.889 751.005 756.929 716.719 716.521C682.433 676.112 647.841 636.01 612.943 596.213C578.045 557.642 544.677 521.825 512.84 488.764C503.044 478.968 501.819 470.396 509.166 463.049Z' fill='%23000000'/%3E%3C/svg%3E") 12 12, auto !important;
}
.footer.green button, .footer.green a, .footer.green [role="button"] {
  cursor: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 1200 1200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M230.457 300.04L202.162 179.552L272.653 262.544L324.916 136.67L320.361 258.686L414.109 157.108L365.733 263.431L501.812 244.812L402.555 315.879L490.259 403.582L370.522 347.912L401.949 471.532L332.218 368.988L332.37 503.524L300.933 370.517L253.344 480.751L270.394 339.977L176.637 433.734L230.457 300.04Z' fill='%23000000'/%3E%3Cpath d='M509.166 463.049C516.513 455.702 525.085 456.927 534.881 466.723C567.943 498.56 604.065 531.621 643.249 565.907C682.433 601.418 722.229 636.316 762.638 670.602C803.046 704.888 841.312 737.031 877.435 767.031C912.945 797.644 943.864 823.664 970.191 845.093C996.517 867.746 1014.58 883.971 1024.37 893.767C1039.68 909.073 1048.25 924.992 1050.09 941.523C1052.54 958.666 1047.03 973.972 1033.56 987.441C1020.09 1000.91 1004.78 1006.42 987.64 1003.97C971.109 1002.14 955.19 993.564 939.884 978.258C929.476 967.849 913.558 949.482 892.129 923.155C870.088 897.44 844.067 866.522 814.067 830.399C783.454 794.889 751.005 756.929 716.719 716.521C682.433 676.112 647.841 636.01 612.943 596.213C578.045 557.642 544.677 521.825 512.84 488.764C503.044 478.968 501.819 470.396 509.166 463.049Z' fill='%23000000'/%3E%3C/svg%3E") 12 12, pointer !important;
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: all 0.5s ease;
  background: rgba(245, 242, 237, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 2rem 0;
}

.nav.scrolled {
  padding: 0.75rem 0;
  background: transparent;
  backdrop-filter: none;
}

.nav-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s ease;
  position: relative;
}

.nav.scrolled .nav-inner {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-logo {
  z-index: 10;
  display: flex;
  align-items: center;
}

.nav-logo-img {
  height: 28px;
  width: auto;
  transition: height 0.3s ease;
}

.nav.scrolled .nav-logo-img {
  height: 22px;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--black);
  transition: all 0.3s ease;
  position: relative;
  display: block;
}

.nav.scrolled .nav-link {
  font-size: 0.75rem;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 0;
  background: var(--lime);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 75%;
}

.nav-link-wrapper {
  position: relative;
}

/* Mega Menu */
.mega-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.75rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.mega-menu.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-menu-content {
  border-radius: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.25);
  background: var(--bg);
}

.mega-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 1.2vw, 1.75rem) clamp(1.5rem, 2vw, 3rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mega-menu-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}

.mega-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--black);
  color: var(--white);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.mega-menu-btn:hover {
  gap: 0.75rem;
  background: #262626;
}

.mega-menu-btn svg {
  width: 14px;
  height: 14px;
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mega-menu-item {
  padding: clamp(1.5rem, 2vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.7vw, 1rem);
  transition: background 0.3s ease;
}

.mega-menu-item:nth-child(odd) {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.mega-menu-item:nth-child(-n+2) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mega-menu-item:hover .mega-item-number {
  color: var(--black);
}

.mega-menu-item:hover .mega-item-arrow {
  opacity: 1;
  transform: translateX(0);
}

.mega-menu-item:hover .mega-item-title-underline {
  width: 100%;
}

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

.mega-item-number {
  font-size: clamp(1.75rem, 2.2vw, 3rem);
  letter-spacing: -0.025em;
  color: rgba(0, 0, 0, 0.25);
  transition: color 0.3s ease;
}

.mega-item-arrow {
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.3s ease;
}

.mega-item-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.5vw, 1.875rem);
  letter-spacing: -0.025em;
  line-height: 1.25;
  display: inline-flex;
}

.mega-item-title-inner {
  position: relative;
}

.mega-item-title-underline {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--black);
  transition: width 0.3s ease;
}

.mega-item-desc {
  margin-top: 0.375rem;
  font-size: clamp(0.8rem, 0.9vw, 1rem);
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
}


/* Mobile Menu Button */
.mobile-menu-btn {
  display: block;
  padding: 0.5rem;
  color: var(--black);
  border-radius: 9999px;
  transition: background 0.3s ease;
}

.mobile-menu-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.mobile-menu-btn svg {
  width: 24px;
  height: 24px;
}

/* Mobile Overlay */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mobile-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-overlay a {
  font-size: 2.25rem;
  color: var(--black);
  position: relative;
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.mobile-overlay.open a {
  opacity: 1;
  transform: translateY(0);
}

.mobile-overlay a:nth-child(1) { transition-delay: 0s; }
.mobile-overlay a:nth-child(2) { transition-delay: 0.1s; }
.mobile-overlay a:nth-child(3) { transition-delay: 0.2s; }
.mobile-overlay a:nth-child(4) { transition-delay: 0.3s; }
.mobile-overlay a:nth-child(5) { transition-delay: 0.4s; }

.mobile-overlay a::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  height: 4px;
  width: 0;
  background: var(--lime);
  transition: width 0.3s ease;
}

.mobile-overlay a:hover::after,
.mobile-overlay a.active::after {
  width: 75%;
}

/* Nav spacer */
.nav-spacer {
  height: 6rem;
}

/* ============================================
   HERO / TEAM SECTION
   ============================================ */
.hero {
  background: var(--bg);
  padding: 5rem 0;
}

.hero-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero-title {
  text-align: center;
  margin-bottom: 4rem;
}

.hero-title h1 {
  font-family: var(--font-display);
  font-size: 4.5rem;
  letter-spacing: -0.025em;
  color: var(--black);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.hero-scroll-text {
  position: relative;
  max-width: 72rem;
  margin: 8rem auto 0;
  padding: 0 2rem;
  height: 300vh;
}

.hero-scroll-text--compact {
  height: 100vh;
  margin: 2rem auto 0;
}

.hero-sticky {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 3.75rem;
  color: var(--black);
  line-height: 1.15;
  text-align: left;
  font-weight: 400;
}

.text-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.text-line.active {
  opacity: 1;
  pointer-events: auto;
}

.text-line .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.text-line .word.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   SERVICES EDITORIAL SECTION
   ============================================ */
.services-editorial {
  background: var(--bg);
  color: var(--black);
  padding: 6rem 1.5rem;
}

.services-editorial .section-container {
  max-width: var(--max-w);
  margin: 0 auto;
}

.services-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
  align-items: end;
}

.services-header h2 {
  font-size: 2.25rem;
  letter-spacing: -0.025em;
  line-height: 1.25;
  font-weight: 400;
}

.services-header-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.services-header-right p {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--text-light);
  max-width: 28rem;
  text-align: right;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--black);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  transition: background 0.3s ease;
  align-self: flex-end;
}

.btn-primary:hover {
  background: #262626;
}

.btn-primary svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

.services-list {
  border-bottom: 1px solid var(--black);
}

/* Service Row */
.service-row {
  border-top: 1px solid var(--black);
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-row.in-view {
  opacity: 1;
  transform: translateY(0);
}

.service-row-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 2rem 0.5rem;
  position: relative;
  z-index: 10;
}

.service-number {
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.5);
}

.service-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.service-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  border: 1px solid var(--black);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.service-row:hover .service-dot {
  transform: scale(1);
  opacity: 1;
}

.service-title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  letter-spacing: -0.025em;
  font-weight: 400;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-row:hover .service-title {
  transform: translateX(8px);
}

.service-tag {
  display: block;
  grid-column: 2 / -1;
  grid-row: 2;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.service-indicator {
  grid-column: 3;
  grid-row: 1;
  text-decoration: none;
  color: inherit;
}

.service-desc {
  display: none;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.service-indicator {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: transform 0.4s ease, background-color 0.4s ease;
}

.service-row:hover .service-indicator {
  transform: rotate(45deg);
  background: var(--lime);
}

.service-indicator svg {
  width: 16px;
  height: 16px;
}

/* Floating KPI */
.service-kpi-float {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-row:hover .service-kpi-float {
  opacity: 1;
  transform: scale(1);
}

.kpi-value {
  font-size: 3.75rem;
  letter-spacing: -0.025em;
  line-height: 1;
}

.kpi-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  padding-top: 0.25rem;
}

/* ============================================
   PILLARS SECTION
   ============================================ */
.pillars {
  background: var(--bg);
  color: var(--black);
  padding: 6rem 1.5rem;
  overflow: hidden;
}

.pillars .section-container {
  max-width: var(--max-w);
  margin: 0 auto;
}

.pillars-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
  align-items: end;
}

.pillars-header h2 {
  font-size: 2.25rem;
  letter-spacing: -0.025em;
  line-height: 1.25;
  font-weight: 400;
}

.pillars-header-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pillars-header-right p {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--text-light);
  max-width: 28rem;
  text-align: right;
}

.pillars-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

.pillars-row .pillar-card {
  flex: none;
  height: 220px;
}

.pillar-card {
  position: relative;
  height: 460px;
  border-radius: 1.5rem;
  border: 1px solid var(--black);
  overflow: hidden;
  background: var(--black);
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pillar-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pillar-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}

.pillar-card:hover .pillar-overlay,
.pillar-card.active .pillar-overlay {
  opacity: 1;
}

.pillar-bottom {
  position: absolute;
  inset: 0 0 0 0;
  bottom: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
}

.pillar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pillar-tag {
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
}

.pillar-tag-accent {
  padding: 0.25rem 0.75rem;
  background: var(--lime);
  border: 1px solid var(--black);
  border-radius: 9999px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
}

.pillar-title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  letter-spacing: -0.025em;
  color: var(--white);
  line-height: 1.25;
  font-weight: 400;
}

/* Expanded state content */
.pillar-expanded {
  display: none;
  flex-direction: column;
  gap: 1rem;
}

.pillar-card.active .pillar-expanded {
  display: flex;
  animation: fadeUp 0.4s ease forwards;
}

.pillar-card.active .pillar-closed {
  display: none;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pillar-subtitle {
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--lime);
  max-width: 28rem;
}

.pillar-intro {
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.75);
  max-width: 28rem;
}

.btn-lime {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--lime);
  border: 1px solid var(--black);
  color: var(--black);
  font-size: 0.75rem;
  text-align: center;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.3s ease;
}

.btn-lime:hover {
  background: rgba(188, 237, 9, 0.9);
}

.btn-lime svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.btn-lime:hover svg {
  transform: translateX(4px);
}

/* Floating animation */
.pillar-card {
  animation: pillarFloat 4s ease-in-out infinite;
}

.pillar-card:nth-child(2) { animation-duration: 4.5s; }
.pillar-card:nth-child(3) { animation-duration: 5s; }
.pillar-card:nth-child(4) { animation-duration: 5.5s; }

@keyframes pillarFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-card { animation: none; }
}

/* ============================================
   CLIENT LOGOS
   ============================================ */
.client-logos {
  background: var(--bg);
  border-top: 1px solid #e5e5e5;
  padding: 0 5rem 5rem;
}

.client-logos .section-container {
  max-width: var(--max-w);
  margin: 0 auto;
}

.client-logos-title {
  text-align: center;
  margin-bottom: 3.5rem;
}

.client-logos-title p {
  font-size: 0.875rem;
  color: #737373;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.marquee-wrapper {
  position: relative;
  overflow: hidden;
}

.marquee-fade-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5rem;
  background: linear-gradient(to right, var(--bg), transparent);
  z-index: 10;
}

.marquee-fade-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5rem;
  background: linear-gradient(to left, var(--bg), transparent);
  z-index: 10;
}

.marquee-track {
  display: flex;
  animation: marquee 30s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

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

.marquee-set {
  display: flex;
  flex-shrink: 0;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
}

.logo-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0.4;
  filter: grayscale(100%);
  transition: all 0.5s ease;
}

.logo-inner:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.5s ease;
}

.logo-inner:hover .logo-icon {
  background: var(--lime);
}

.logo-icon span {
  color: var(--white);
  font-size: 0.875rem;
  transition: color 0.5s ease;
}

.logo-inner:hover .logo-icon span {
  color: var(--black);
}

.logo-name {
  font-size: 1.25rem;
  color: var(--black);
  white-space: nowrap;
  letter-spacing: -0.025em;
}

/* ============================================
   CONTACT CTA
   ============================================ */
.contact-cta {
  background: var(--bg);
  padding: 8rem 0;
}

.contact-cta .section-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.cta-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  transition: gap 0.5s ease;
  background: transparent !important;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
}

.cta-button:hover {
  gap: 1.5rem;
}

.cta-text-right {
  text-align: right;
}

.cta-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #525252;
  margin-bottom: 0.75rem;
}

.cta-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cta-title {
  font-family: var(--font-display);
  font-size: 4.5rem;
  letter-spacing: -0.025em;
  color: var(--black);
  font-weight: 400;
}

.cta-arrow {
  width: 48px;
  height: 48px;
  color: var(--black);
  stroke-width: 1.5;
  transition: transform 0.5s ease;
}

.cta-button:hover .cta-arrow {
  transform: translate(8px, -8px);
}

/* ============================================
   CONTACT MODAL
   ============================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 1.5rem;
  max-width: 48rem;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5rem 3rem;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal-backdrop.open .modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
  color: var(--color-ink-core, #252525);
  background: transparent;
  border: none;
}

.modal-close:hover {
  background: transparent;
  color: var(--color-estudio, #C1FE1A);
}

.modal-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-top: 2rem;
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: 3rem;
  letter-spacing: -0.025em;
  color: var(--black);
  font-weight: 400;
  margin-bottom: 1rem;
}

.modal-header p {
  color: #525252;
  max-width: 32rem;
  margin: 0 auto;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

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

.form-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--black);
  font-weight: 500;
}

.form-input,
.form-select,
.form-textarea {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  height: 3.5rem;
  padding: 0 1.5rem;
  font-size: 1rem;
  border-radius: 0.75rem;
  font-family: var(--font);
  transition: border-color 0.3s ease;
  width: 100%;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 1px var(--black);
}

.form-textarea {
  height: auto;
  min-height: 180px;
  padding: 1rem 1.5rem;
  resize: none;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
}

.form-submit-wrap {
  padding-top: 1.5rem;
  text-align: center;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lime);
  color: var(--black);
  border: 1px solid var(--black);
  padding: 1rem 4rem;
  font-size: 1rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  transition: background 0.3s ease;
}

.btn-submit:hover {
  background: rgba(188, 237, 9, 0.9);
}

.form-privacy {
  font-size: 0.875rem;
  color: #737373;
  margin-top: 1.5rem;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 200;
  background: var(--black);
  color: var(--white);
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
  background: var(--lime);
  transition: background-color 0.6s ease;
}

.footer-wow {
  margin-bottom: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  overflow: hidden;
}

/* Opcion A: Logo SVG */
.footer-logo {
  width: 180vw;
  height: auto;
  filter: invert(0);
  transition: filter 0.6s ease, width 0.3s ease;
  will-change: width;
}

/* Opcion B: Texto tipografico */
.footer-wow-text {
  font-family: var(--font-display);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--black);
  transition: color 0.6s ease;
  will-change: font-size;
}

.footer-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.footer-pill {
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--black);
  border-radius: 9999px;
  font-size: 0.875rem;
  color: var(--black);
  transition: opacity 0.3s ease, border-color 0.6s ease, color 0.6s ease;
}

.footer-pill:hover {
  opacity: 0.7;
}

.footer-social {
  width: 40px;
  height: 40px;
  border: 1px solid var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  transition: opacity 0.3s ease, border-color 0.6s ease, color 0.6s ease;
}

.footer-social:hover {
  opacity: 0.7;
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

.footer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.footer-copyright {
  text-align: center;
  margin-top: 2rem;
}

.footer-copyright p {
  font-size: 0.875rem;
  opacity: 0.6;
  color: var(--black);
  transition: color 0.6s ease;
}

/* Footer dark state (after scroll to bottom) */
.footer.green {
  background: var(--black);
}

.footer.green .footer-logo {
  filter: invert(1);
}

.footer.green .footer-wow-text {
  color: var(--white);
}

.footer.green .footer-copyright p {
  color: var(--white);
}

.footer.green .footer-pill {
  border-color: var(--white);
  color: var(--white);
}

.footer.green .footer-social {
  border-color: var(--white);
  color: var(--white);
}

/* ============================================
   ANIMATE ON SCROLL
   ============================================ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }

  .mobile-menu-btn {
    display: none;
  }

  .mega-menu {
    display: block;
  }

  .service-row-grid {
    grid-template-columns: 0.5fr 3fr 2fr 1fr;
    padding: 2rem 1.5rem;
  }

  .service-title {
    font-size: 3rem;
  }

  .service-tag {
    display: block;
    grid-column: auto;
    grid-row: auto;
  }

  .service-indicator {
    grid-column: auto;
    grid-row: auto;
  }

  .services-header {
    grid-template-columns: 2fr 1fr;
  }

  .services-header h2 {
    font-size: 3rem;
  }

  .pillars-header {
    grid-template-columns: 7fr 5fr;
  }

  .pillars-header h2 {
    font-size: 3rem;
  }

  .form-grid-2 {
    grid-template-columns: 1fr 1fr !important;
  }

  .hero-title h1 {
    font-size: 4.5rem;
  }

  .pillar-title {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .service-row-grid {
    grid-template-columns: 0.8fr 4fr 3fr 3fr 1fr;
  }

  .service-desc {
    display: -webkit-box;
  }

  .service-kpi-float {
    display: flex;
  }

  .pillars-row {
    flex-direction: row;
  }

  .pillars-row .pillar-card {
    flex: 1 1 0;
    height: 520px;
  }

  .pillar-card {
    height: 520px;
  }

  .pillar-card:nth-child(2) { height: 600px; }
  .pillar-card:nth-child(3) { height: 560px; }
  .pillar-card:nth-child(4) { height: 640px; }

  .hero-sticky {
    font-size: 3.75rem;
  }

  .services-editorial {
    padding: 6rem 4rem;
  }

  .pillars {
    padding: 6rem 4rem;
  }
}

@media (max-width: 767px) {
  .hero-sticky {
    font-size: 2.25rem;
  }

  .service-desc {
    display: none !important;
  }

  .client-logos {
    padding: 0 1.5rem 3rem;
  }

  .cta-title {
    font-size: 3rem;
  }

  .cta-arrow {
    width: 32px;
    height: 32px;
  }

  .modal-content {
    padding: 1.5rem;
  }

  .modal-header h2 {
    font-size: 2rem;
  }
}