/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --dark:    #131313;
  --dark2:   #1c1c1c;
  --dark3:   #2A2724;
  --salmon:  #E8C5BC;
  --gold:    #C6A98C;
  --accent:  #6BAA9B;
  --light:   #D8D6D2;
  --cream:   #E9E2D9;
  --white:   #ffffff;
  --mid:     #888;
  --mute:    rgba(255,255,255,.45);
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  background: var(--dark);
  color: var(--white);
  overflow-x: hidden;
  font-feature-settings: "kern", "liga", "calt";
}
img { display: block; width: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }

/* Custom scrollbar — luxury minimal */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 0;
  transition: background .3s;
}
::-webkit-scrollbar-thumb:hover { background: var(--salmon); }

/* Selection */
::selection { background: var(--salmon); color: var(--dark); }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 3rem;
  transition: background .4s, padding .4s;
}
nav.scrolled {
  background: rgba(26,26,26,.95);
  backdrop-filter: blur(10px);
  padding: 1rem 3rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: .32em; color: var(--white);
  transition: letter-spacing .5s ease;
}
.nav-logo:hover { letter-spacing: .38em; }
.nav-logo span { color: var(--accent); transition: color .3s; }
.nav-cta {
  background: transparent; color: var(--white);
  padding: .65rem 1.6rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 0;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--salmon);
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  z-index: -1;
}
.nav-cta:hover {
  color: var(--dark);
  border-color: var(--salmon);
}
.nav-cta:hover::before { transform: translateY(0); }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; height: 100vh; min-height: 600px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-slideshow {
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #1a1a1a 100%);
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: brightness(.55);
  transition: opacity 2.2s cubic-bezier(.45,0,.25,1);
  z-index: 1;
  will-change: opacity, transform;
  /* Ken Burns infinito (oscila zoom in ↔ zoom out) — nunca tiene estado final, nunca snap */
  animation: kenBurns 22s ease-in-out infinite alternate;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: -5s;  animation-name: kenBurnsAlt; }
.hero-slide:nth-child(3) { animation-delay: -10s; }
.hero-slide:nth-child(4) { animation-delay: -15s; animation-name: kenBurnsAlt; }
.hero-slide:nth-child(5) { animation-delay: -20s; }
.hero-slide.active {
  opacity: 1;
  z-index: 2;
}
@keyframes kenBurns {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.16) translate(-1%, -.6%); }
}
@keyframes kenBurnsAlt {
  0%   { transform: scale(1.16) translate(1%, .6%); }
  100% { transform: scale(1.06) translate(0, 0); }
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(26,26,26,.2) 0%,
    rgba(26,26,26,.1) 50%,
    rgba(26,26,26,.7) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center; padding: 0 2rem;
}
.hero-eyebrow {
  font-size: .68rem; letter-spacing: .42em; text-transform: uppercase;
  color: var(--accent); font-weight: 400; margin-bottom: 2rem;
  display: inline-flex; align-items: center; gap: 1rem;
  opacity: 0; animation: fadeUp .8s .3s forwards;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: ''; width: 28px; height: 1px;
  background: var(--accent); opacity: .5;
}
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.5rem, 10vw, 9.5rem);
  font-weight: 300; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; animation: fadeUp 1.1s .5s forwards;
}
.hero-title span { color: var(--accent); font-style: italic; font-weight: 400; }
.hero-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 2.5vw, 1.55rem);
  font-weight: 300; font-style: italic;
  color: rgba(255,255,255,.7); margin-top: 1.2rem;
  letter-spacing: .08em;
  opacity: 0; animation: fadeUp .8s .8s forwards;
}
.hero-desc {
  font-size: .72rem; color: rgba(255,255,255,.5);
  letter-spacing: .35em; text-transform: uppercase;
  margin-top: 2rem;
  font-weight: 300;
  opacity: 0; animation: fadeUp .8s 1s forwards;
}
.hero-btn {
  display: inline-flex; align-items: center; gap: .8rem;
  margin-top: 2.6rem;
  background: transparent; border: 1px solid rgba(255,255,255,.3);
  color: var(--white); padding: 1rem 2.4rem; border-radius: 0;
  font-size: .7rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
  transition: all .45s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
  opacity: 0; animation: fadeUp .8s 1.1s forwards;
}
.hero-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--salmon);
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s cubic-bezier(.7,0,.3,1);
  z-index: -1;
}
.hero-btn:hover {
  color: var(--dark); border-color: var(--salmon);
  gap: 1.2rem;
}
.hero-btn:hover::before { transform: scaleX(1); transform-origin: left; }
.hero-btn svg { transition: transform .4s; }
.hero-btn:hover svg { transform: translate(2px, -2px); }

.hero-scroll {
  position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .8rem;
  opacity: 0; animation: fadeIn 1s 1.5s forwards;
}
.hero-scroll span {
  font-family: 'Cormorant Garamond', serif;
  font-size: .9rem; font-style: italic; font-weight: 300;
  letter-spacing: .15em;
  color: rgba(255,255,255,.5);
}
.scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation: scrollPulse 2.4s infinite;
}

/* ── Statement ─────────────────────────────────────────────────────────────── */
.statement {
  background: var(--light); color: var(--dark2);
  padding: 10rem 3rem;
  text-align: center;
  position: relative;
}
.statement::before,
.statement::after {
  content: '';
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, transparent, #A8A6A2);
}
.statement::before { top: 0; }
.statement::after { bottom: 0; transform: translateX(-50%) rotate(180deg); }
.statement-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 5.2vw, 4.8rem);
  font-weight: 300; line-height: 1.18;
  max-width: 1000px; margin: 0 auto;
  letter-spacing: -.005em;
}
.statement-text em {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}
.statement-sub {
  font-size: .72rem; color: var(--mid);
  letter-spacing: .42em; text-transform: uppercase;
  margin-top: 2.5rem;
  font-weight: 400;
}

/* ── Stats Band ────────────────────────────────────────────────────────────── */
.stats-band {
  background: var(--dark);
  padding: 5rem 3rem;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.stat {
  text-align: center;
  padding: 1rem 0;
  border-right: 1px solid rgba(255,255,255,.05);
}
.stat:last-child { border-right: none; }
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 300; line-height: 1;
  color: var(--white);
  letter-spacing: -.01em;
  margin-bottom: .6rem;
}
.stat-num::before { content: '+'; color: var(--accent); margin-right: .1em; font-size: .8em; }
.stat-label {
  font-size: .68rem; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255,255,255,.45); font-weight: 400;
}

/* ── Por Qué — Pain / Gain ─────────────────────────────────────────────────── */
.por-que {
  background: var(--dark2);
  padding: 8rem 3rem;
}
.por-que .section-title { color: var(--white); }
.por-que-grid {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  gap: 4rem;
  max-width: 1100px; margin: 4rem auto 0;
  align-items: start;
}
.pq-divider {
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.1), transparent);
  align-self: stretch;
}
.pq-col { padding: 1rem 0; }
.pq-tag {
  font-size: .68rem; letter-spacing: .25em; text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pq-pain .pq-tag { color: rgba(255,255,255,.4); }
.pq-gain .pq-tag { color: var(--salmon); }
.pq-col ul { list-style: none; padding: 0; }
.pq-col li {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem; font-weight: 300;
  line-height: 1.5;
  padding: .9rem 0 .9rem 2rem;
  position: relative;
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.pq-col li:last-child { border-bottom: none; }
.pq-pain li { color: rgba(255,255,255,.45); }
.pq-pain li::before {
  content: '×';
  position: absolute; left: 0; top: .85rem;
  font-size: 1.2rem; color: rgba(255,255,255,.3);
  font-weight: 300;
}
.pq-gain li::before {
  content: '';
  position: absolute; left: 0; top: 1.5rem;
  width: 14px; height: 1px; background: var(--salmon);
}

/* ── Marquee — Editorial ticker ────────────────────────────────────────────── */
.marquee {
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 1.6rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-block;
  animation: marquee 38s linear infinite;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-weight: 300; font-style: italic;
  color: rgba(255,255,255,.5);
  letter-spacing: .18em;
}
.marquee-track span { padding: 0 2rem; display: inline-block; }
.marquee-track span:nth-child(odd) { color: rgba(255,255,255,.7); }
.marquee-track span:nth-child(even) { color: var(--salmon); opacity: .55; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Proyectos ─────────────────────────────────────────────────────────────── */
.proyectos { background: var(--dark); padding: 8rem 0; }
.section-label {
  font-size: .66rem; letter-spacing: .42em; text-transform: uppercase;
  color: var(--accent); font-weight: 400;
  text-align: center; margin-bottom: 1.4rem;
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
}
.section-label::before,
.section-label::after {
  content: ''; width: 28px; height: 1px;
  background: var(--accent); opacity: .35;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.3rem, 4.2vw, 3.8rem);
  font-weight: 300; text-align: center; line-height: 1.1;
  margin-bottom: 4rem; letter-spacing: .02em;
}
.section-intro {
  text-align: center;
  max-width: 600px; margin: -3rem auto 4rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-weight: 300; font-style: italic;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  padding: 0 3px;
}
.project-item {
  position: relative; overflow: hidden; cursor: pointer;
  background: #111;
}
.project-item:nth-child(1) { grid-column: span 8; aspect-ratio: 16/10; }
.project-item:nth-child(2) { grid-column: span 4; aspect-ratio: 4/5; }
.project-item:nth-child(3) { grid-column: span 4; aspect-ratio: 4/5; }
.project-item:nth-child(4) { grid-column: span 8; aspect-ratio: 16/10; }
.project-item img,
.project-item video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .7s;
  filter: brightness(.8);
}
.project-item:hover img,
.project-item:hover video { transform: scale(1.04); filter: brightness(.6); }
.project-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2rem 2.2rem;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
  transform: translateY(6px);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.project-item:hover .project-info { transform: translateY(0); }
.project-meta {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: .6rem;
  font-weight: 400;
}
.project-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem; font-weight: 300;
  letter-spacing: .03em;
  color: var(--white);
}
/* Placeholder cuando no hay imagen */
.project-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1d1d1d 0%, #2a2a2a 50%, #1a1a1a 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; color: rgba(255,255,255,.1);
  letter-spacing: .3em; font-weight: 300; font-style: italic;
}

/* ── Servicios ─────────────────────────────────────────────────────────────── */
.servicios {
  background: var(--dark2); padding: 8rem 3rem;
}
.servicios-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin-top: 4rem;
  border: 1px solid rgba(255,255,255,.06);
}
.servicio-card {
  padding: 3.5rem 2.5rem;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: background .3s;
}
.servicio-card:last-child { border-right: none; }
.servicio-card:hover { background: rgba(255,255,255,.03); }
.servicio-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.5rem; font-weight: 300;
  color: rgba(255,255,255,.08); line-height: 1;
  margin-bottom: 1.5rem;
}
.servicio-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem; font-weight: 400;
  margin-bottom: 1rem; line-height: 1.2;
}
.servicio-desc {
  font-size: .8rem; color: rgba(255,255,255,.5);
  line-height: 1.8;
}
.servicio-tag {
  display: inline-block; margin-top: 1.5rem;
  font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* ── Entregables ───────────────────────────────────────────────────────────── */
.entregables { background: var(--dark); padding: 8rem 3rem; }
.entregables-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 4rem;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.entregable {
  text-align: left; padding: 3rem 2.4rem;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: background .45s ease;
  position: relative;
  cursor: default;
}
.entregable:last-child { border-right: none; }
.entregable:hover { background: rgba(255,255,255,.015); }
.entregable-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 300; font-style: italic;
  color: var(--salmon);
  margin-bottom: 2.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  letter-spacing: .1em;
}
.entregable-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 400;
  margin-bottom: .8rem;
  letter-spacing: .02em;
}
.entregable-desc {
  font-size: .78rem; color: rgba(255,255,255,.45);
  line-height: 1.7;
  font-weight: 300;
}

/* ── Testimonios — Vertical Videos 9:16 ───────────────────────────────────── */
.testimonios {
  background: var(--dark2);
  padding: 8rem 3rem;
  position: relative;
}
.testimonios::before {
  content: '"';
  position: absolute;
  top: 5rem; left: 50%; transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 14rem; font-weight: 300; font-style: italic;
  color: rgba(232,197,188,.04);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
.testimonios > * { position: relative; z-index: 1; }
.testimonios-videos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  max-width: 1400px; margin: 4rem auto 0;
}
.video-card {
  margin: 0;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.video-card:hover { transform: translateY(-6px); }
.video-wrap {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #0d0d0d;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.06);
}
.testimonio-video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.25,.46,.45,.94), filter .5s;
  filter: brightness(.88);
}
.video-card:hover .testimonio-video {
  transform: scale(1.04);
  filter: brightness(1);
}
.video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
  transition: opacity .5s;
}
.video-card:hover .video-overlay { opacity: .7; }
.video-toggle {
  position: absolute;
  bottom: 1rem; right: 1rem;
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .35s;
  z-index: 2;
}
.video-toggle:hover {
  border-color: var(--salmon);
  background: var(--salmon);
  color: var(--dark);
}
.video-toggle svg { width: 16px; height: 16px; display: none; }
.video-toggle .ico-mute { display: block; }
.video-card.unmuted .ico-mute { display: none; }
.video-card.unmuted .ico-unmute { display: block; }
.video-corner {
  position: absolute;
  top: 1.2rem; left: 1.2rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: .85rem; font-style: italic; font-weight: 300;
  color: rgba(255,255,255,.8);
  letter-spacing: .12em;
  z-index: 2;
  padding: .3rem .6rem;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}
.video-caption {
  padding: 1.6rem 0 0;
  text-align: left;
}
.video-author {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem; font-weight: 400;
  color: var(--white);
  letter-spacing: .02em;
  margin-bottom: .3rem;
  line-height: 1.2;
}
.video-role {
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}

/* ── Trust Band ────────────────────────────────────────────────────────────── */
.trust-band {
  background: var(--dark);
  padding: 3rem 3rem;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  border-top: 1px solid rgba(255,255,255,.04);
}
.trust-item {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  padding: .8rem 1rem;
  border-right: 1px solid rgba(255,255,255,.04);
}
.trust-item:last-child { border-right: none; }
.trust-icon {
  font-size: 1.6rem;
  color: var(--salmon);
  font-weight: 300;
  line-height: 1;
}
.trust-label {
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.6); font-weight: 400;
}

/* ── Proceso ───────────────────────────────────────────────────────────────── */
.proceso { background: var(--light); color: var(--dark2); padding: 9rem 3rem; }
.proceso .section-label { color: var(--accent); }
.proceso .section-label::before,
.proceso .section-label::after { background: var(--accent); }
.proceso .section-title { color: var(--dark2); }
.proceso-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-top: 4.5rem; position: relative;
}
.proceso-steps::before {
  content: '';
  position: absolute; top: 1.6rem; left: 18%; right: 18%;
  height: 1px;
  background: linear-gradient(to right, transparent, #A8A6A2, transparent);
}
.paso {
  text-align: center; padding: 0 2.5rem;
  position: relative;
}
.paso-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem; font-weight: 300; font-style: italic;
  color: var(--accent);
  margin-bottom: 2rem;
  letter-spacing: .15em;
  position: relative; z-index: 1;
  background: var(--light);
  display: inline-block;
  padding: 0 1.4rem;
}
.paso-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.65rem; font-weight: 400;
  margin-bottom: 1rem;
  letter-spacing: .02em;
}
.paso-desc {
  font-size: .82rem; color: var(--mid);
  line-height: 1.75;
  font-weight: 300;
  max-width: 280px; margin: 0 auto;
}

/* ── CTA Final ─────────────────────────────────────────────────────────────── */
.cta-final {
  background: var(--dark);
  padding: 10rem 3rem;
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-final::before {
  content: 'GEOMETRIKA';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(6rem, 18vw, 20rem);
  font-weight: 600; letter-spacing: .1em;
  color: rgba(255,255,255,.025);
  white-space: nowrap; pointer-events: none;
}
.cta-eyebrow {
  font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.4rem;
}
.cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300; line-height: 1.1;
  margin-bottom: 1rem;
}
.cta-title em {
  font-style: italic;
  color: var(--salmon);
}
.cta-sub {
  font-size: .9rem; color: rgba(255,255,255,.55);
  letter-spacing: .03em; line-height: 1.7;
  margin-bottom: 3rem;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.cta-micro {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-top: 2rem;
  position: relative; z-index: 1;
}
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 1rem;
  background: transparent; color: var(--white);
  padding: 1.2rem 3rem; border-radius: 0;
  border: 1px solid rgba(255,255,255,.3);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  transition: all .5s cubic-bezier(.4,0,.2,1);
  position: relative; z-index: 1; overflow: hidden;
}
.btn-whatsapp::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--salmon);
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s cubic-bezier(.7,0,.3,1);
  z-index: -1;
}
.btn-whatsapp:hover {
  color: var(--dark);
  border-color: var(--salmon);
  gap: 1.4rem;
}
.btn-whatsapp:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .4s; }
.btn-whatsapp:hover svg { transform: scale(1.1); }

/* ── Footer ────────────────────────────────────────────────────────────────── */
footer {
  background: #0d0d0d; padding: 3.5rem 3rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.05);
  gap: 2rem;
}
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; letter-spacing: .3em; font-weight: 600;
}
.footer-logo span { color: var(--accent); }
.footer-meta {
  display: flex; align-items: center; gap: 2rem;
}
.footer-copy {
  font-size: .65rem;
  color: rgba(255,255,255,.3);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.footer-tag {
  font-family: 'Cormorant Garamond', serif;
  font-size: .85rem; font-style: italic; font-weight: 300;
  color: rgba(255,255,255,.4);
  letter-spacing: .08em;
}

/* ── Animations ────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scrollPulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: 1; }
}
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  nav { padding: 1.2rem 1.5rem; }
  nav.scrolled { padding: .9rem 1.5rem; }
  .statement, .servicios, .entregables, .proceso, .cta-final,
  .por-que, .testimonios { padding: 5rem 1.5rem; }
  .proyectos { padding: 4rem 0; }
  .stats-band { grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 4rem 1.5rem; }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.05); padding-bottom: 2rem; }
  .stat:nth-child(3), .stat:nth-child(4) { padding-top: 2rem; }
  .por-que-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pq-divider { display: none; }
  .testimonios-videos { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .entregables-grid { grid-template-columns: 1fr 1fr; }
  .entregable { border-bottom: 1px solid rgba(255,255,255,.06); }
  .entregable:nth-child(2) { border-right: none; }
  .entregable:nth-child(3), .entregable:nth-child(4) { border-bottom: none; }
  .marquee-track { font-size: .95rem; }
  footer { flex-direction: column; gap: 1rem; text-align: center; }
  .trust-band { grid-template-columns: 1fr 1fr; padding: 2.5rem 1.5rem; gap: 2rem 1rem; }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(1), .trust-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.04); padding-bottom: 2rem; }
  .project-item:nth-child(1) { grid-column: span 12; }
  .project-item:nth-child(2) { grid-column: span 6; }
  .project-item:nth-child(3) { grid-column: span 6; }
  .project-item:nth-child(4) { grid-column: span 12; }
  .servicios-grid { grid-template-columns: 1fr; }
  .servicio-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .entregables-grid { grid-template-columns: 1fr 1fr; }
  .proceso-steps { grid-template-columns: 1fr; gap: 3rem; }
  .proceso-steps::before { display: none; }
  footer { flex-direction: column; gap: 1rem; text-align: center; }
}
@media (max-width: 600px) {
  .project-item:nth-child(2),
  .project-item:nth-child(3) { grid-column: span 12; }
  .entregables-grid { grid-template-columns: 1fr; }
  .entregable { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .testimonios-videos { grid-template-columns: 1fr; gap: 1.4rem; max-width: 400px; margin-left: auto; margin-right: auto; }

  /* ── Hero mobile fixes ──────────────────────────────────────────── */
  .hero-content { padding: 4rem 1.2rem 2rem; }
  .hero-eyebrow {
    font-size: .56rem;
    letter-spacing: .22em;
    gap: .6rem;
    margin-bottom: 1.5rem;
    padding: 0 .5rem;
  }
  .hero-eyebrow::before,
  .hero-eyebrow::after { width: 14px; }
  .hero-title {
    font-size: clamp(2.2rem, 12vw, 3.8rem);
    letter-spacing: .04em;
  }
  .hero-tagline {
    font-size: 1rem;
    margin-top: 1rem;
    letter-spacing: .04em;
  }
  .hero-desc {
    font-size: .6rem;
    letter-spacing: .18em;
    margin-top: 1.4rem;
    padding: 0 .5rem;
  }
  .hero-btn {
    margin-top: 1.8rem;
    padding: .85rem 1.6rem;
    font-size: .62rem;
    letter-spacing: .22em;
  }
  .hero-scroll { bottom: 1.5rem; }
  .hero-scroll span { font-size: .8rem; }

  /* ── Section titles & statement ─────────────────────────────────── */
  .statement-text {
    font-size: clamp(1.7rem, 8vw, 2.6rem);
  }
  .statement-sub {
    font-size: .6rem;
    letter-spacing: .22em;
    padding: 0 .5rem;
  }
  .section-title {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }
  .section-label {
    font-size: .56rem;
    letter-spacing: .26em;
    gap: .8rem;
  }
  .section-label::before,
  .section-label::after { width: 14px; }
  .section-intro {
    font-size: .95rem;
    padding: 0 1rem;
  }
  .cta-title {
    font-size: clamp(2rem, 10vw, 3.5rem);
  }
  .cta-eyebrow {
    font-size: .62rem;
    letter-spacing: .2em;
    padding: 0 1rem;
  }
  .cta-sub {
    font-size: .82rem;
    line-height: 1.6;
    padding: 0 .5rem;
  }
  .cta-micro {
    font-size: .56rem;
    letter-spacing: .15em;
    padding: 0 1rem;
  }
  .btn-whatsapp {
    padding: 1rem 1.8rem;
    font-size: .6rem;
    letter-spacing: .22em;
  }

  /* ── Stats mobile ──────────────────────────────────────────────── */
  .stat-num { font-size: clamp(2rem, 9vw, 3rem); }
  .stat-label { font-size: .56rem; letter-spacing: .2em; }

  /* ── Marquee mobile ────────────────────────────────────────────── */
  .marquee-track { font-size: .9rem; }
  .marquee-track span { padding: 0 1.2rem; }

  /* ── Trust band mobile ─────────────────────────────────────────── */
  .trust-label { font-size: .54rem; letter-spacing: .18em; }

  /* ── Nav mobile ────────────────────────────────────────────────── */
  nav { padding: 1rem 1rem; }
  nav.scrolled { padding: .8rem 1rem; }
  .nav-logo {
    font-size: .95rem;
    letter-spacing: .24em;
  }
  .nav-cta {
    padding: .5rem 1rem;
    font-size: .56rem;
    letter-spacing: .2em;
  }

  /* ── Servicios & Proceso ───────────────────────────────────────── */
  .servicio-card { padding: 2.5rem 1.5rem; }
  .servicio-num { font-size: 2.5rem; margin-bottom: 1rem; }
  .servicio-title { font-size: 1.4rem; }
  .paso { padding: 0 1rem; }
  .paso-num { font-size: 1.8rem; padding: 0 1rem; }
  .paso-title { font-size: 1.35rem; }

  /* ── Entregables mobile ────────────────────────────────────────── */
  .entregable { padding: 2rem 1.5rem; }
  .entregable-num { font-size: 1.2rem; margin-bottom: 1.6rem; padding-bottom: 1rem; }
  .entregable-name { font-size: 1.3rem; }

  /* ── Por qué mobile ────────────────────────────────────────────── */
  .por-que { padding: 5rem 1.2rem; }
  .pq-tag { font-size: .58rem; letter-spacing: .2em; margin-bottom: 1.4rem; }
  .pq-col li { font-size: 1rem; padding: .7rem 0 .7rem 1.5rem; }

  /* ── Testimonios mobile ────────────────────────────────────────── */
  .video-author { font-size: 1.15rem; }
  .video-role { font-size: .55rem; letter-spacing: .22em; }
  .video-corner { font-size: .75rem; padding: .25rem .5rem; }

  /* ── Footer mobile ─────────────────────────────────────────────── */
  footer { padding: 2.5rem 1.2rem 1.5rem; }
  .footer-tag { font-size: .78rem; }
  .footer-copy { font-size: .56rem; }

  /* ── Project name mobile ───────────────────────────────────────── */
  .project-name { font-size: 1.4rem; }
  .project-meta { font-size: .55rem; letter-spacing: .25em; }
  .project-info { padding: 1.4rem 1.5rem; }

  /* ── Lang selector mobile ──────────────────────────────────────── */
  .lang-current { padding: .35rem .55rem; font-size: .58rem; }
  .lang-code { display: none; }
  .lang-list { min-width: 160px; right: 0; }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  Language Selector                                                ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
.lang-selector {
  position: relative;
  margin-right: .8rem;
}
.lang-current {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: var(--white);
  padding: .55rem .85rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.lang-current:hover {
  border-color: var(--salmon);
  color: var(--salmon);
}
.lang-flag {
  font-size: .95rem;
  line-height: 1;
}
.lang-current svg {
  transition: transform .35s;
}
.lang-selector.open .lang-current svg {
  transform: rotate(180deg);
}
.lang-list {
  position: absolute;
  top: calc(100% + .8rem);
  right: 0;
  min-width: 200px;
  list-style: none;
  background: rgba(20,20,20,.96);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08);
  padding: .6rem 0;
  margin: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .35s, transform .35s;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 200;
}
.lang-selector.open .lang-list {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lang-list li { list-style: none; }
.lang-option {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.7);
  padding: .65rem 1.2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 400;
  cursor: pointer;
  transition: background .25s, color .25s;
  text-align: left;
}
.lang-option:hover {
  background: rgba(255,255,255,.04);
  color: var(--white);
}
.lang-option.active {
  color: var(--salmon);
  background: rgba(232,197,188,.05);
}
.lang-option .lang-flag {
  font-size: 1.1rem;
}
.lang-option .lang-name {
  letter-spacing: .04em;
}

/* Scrollbar of lang-list */
.lang-list::-webkit-scrollbar { width: 4px; }
.lang-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  Section Lines — Líneas arquitectónicas + scan line animada       ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
.section-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
/* Líneas verticales — sutiles pero presentes (80% claridad) */
.section-lines .arch-v {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.096), transparent);
}
/* Scan line horizontal — se mueve verticalmente con tinte salmón (80% claridad) */
.section-lines .arch-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 5%,
    rgba(232,197,188,.36) 50%,
    transparent 95%);
  animation: scanMove 14s ease-in-out infinite alternate;
  will-change: top, opacity;
}
@keyframes scanMove {
  0%   { top: 8%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 92%; opacity: 0; }
}
/* Sections containing arch lines */
.stats-band,
.proyectos,
.por-que,
.servicios,
.entregables,
.testimonios,
.trust-band,
.cta-final {
  position: relative;
  overflow: hidden;
}
/* Asegurar que el contenido esté sobre las líneas */
.stats-band > *:not(.section-lines),
.proyectos > *:not(.section-lines),
.por-que > *:not(.section-lines),
.servicios > *:not(.section-lines),
.entregables > *:not(.section-lines),
.testimonios > *:not(.section-lines),
.trust-band > *:not(.section-lines),
.cta-final > *:not(.section-lines) {
  position: relative;
  z-index: 1;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  Audio Toggle — Floating luxury button                            ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
.audio-toggle {
  position: fixed;
  bottom: 1.8rem;
  left: 1.8rem;
  z-index: 150;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(20,20,20,.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all .45s cubic-bezier(.4,0,.2,1);
  opacity: 0;
  animation: audioFadeIn .8s 2s forwards;
}
@keyframes audioFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.audio-toggle:hover {
  border-color: var(--salmon);
  color: var(--salmon);
  background: rgba(20,20,20,.75);
  transform: scale(1.05);
}
.audio-toggle svg {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 2;
}
/* Mute icon (default) */
.audio-toggle .ico-audio-off { display: block; }
.audio-toggle .ico-audio-on { display: none; }
/* Playing state */
.audio-toggle.playing .ico-audio-off { display: none; }
.audio-toggle.playing .ico-audio-on { display: block; }
.audio-toggle.playing {
  color: var(--salmon);
  border-color: rgba(232,197,188,.4);
}
/* Pulse ring when playing */
.audio-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--salmon);
  opacity: 0;
  pointer-events: none;
}
.audio-toggle.playing .audio-pulse {
  animation: audioPulse 2.4s ease-out infinite;
}
@keyframes audioPulse {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.45); }
}
/* Tooltip hint on first hover */
.audio-toggle::after {
  content: 'Música';
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,20,20,.92);
  color: rgba(255,255,255,.85);
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.audio-toggle:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
/* Hide tooltip on mobile */
@media (max-width: 600px) {
  .audio-toggle::after { display: none; }
  .audio-toggle {
    bottom: 1.2rem;
    left: 1.2rem;
    width: 42px;
    height: 42px;
  }
  .audio-toggle svg { width: 16px; height: 16px; }
}
/* RTL */
html[dir="rtl"] .audio-toggle {
  left: auto;
  right: 1.8rem;
}
@media (max-width: 600px) {
  html[dir="rtl"] .audio-toggle { right: 1.2rem; }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  RTL Support (Arabic)                                             ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] .hero-content,
html[dir="rtl"] .statement,
html[dir="rtl"] .cta-final,
html[dir="rtl"] .section-label,
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-intro {
  text-align: center;
}
html[dir="rtl"] .video-caption,
html[dir="rtl"] .pq-col,
html[dir="rtl"] .servicio-card,
html[dir="rtl"] .entregable {
  text-align: right;
}
html[dir="rtl"] .pq-col li {
  padding: .9rem 2rem .9rem 0;
}
html[dir="rtl"] .pq-pain li::before {
  left: auto;
  right: 0;
}
html[dir="rtl"] .pq-gain li::before {
  left: auto;
  right: 0;
}
html[dir="rtl"] .video-corner {
  left: auto;
  right: 1.2rem;
}
html[dir="rtl"] .video-toggle {
  right: auto;
  left: 1rem;
}
html[dir="rtl"] .marquee-track {
  animation-direction: reverse;
}
html[dir="rtl"] .lang-list {
  right: auto;
  left: 0;
}
html[dir="rtl"] .lang-selector {
  margin-right: 0;
  margin-left: .8rem;
}
html[dir="rtl"] footer {
  flex-direction: row-reverse;
}

/* RTL fonts: better Arabic rendering */
html[lang="ar"] body {
  font-family: 'DM Sans', 'Segoe UI', Tahoma, sans-serif;
}
html[lang="ar"] .hero-title,
html[lang="ar"] .nav-logo,
html[lang="ar"] .footer-logo {
  /* Keep brand name in original font */
}
html[lang="ar"] .statement-text,
html[lang="ar"] .section-title,
html[lang="ar"] .cta-title,
html[lang="ar"] .servicio-title,
html[lang="ar"] .entregable-name,
html[lang="ar"] .paso-title,
html[lang="ar"] .video-author,
html[lang="ar"] .project-name {
  font-family: 'DM Sans', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 400;
}
html[lang="ar"] .hero-tagline,
html[lang="ar"] .marquee-track,
html[lang="ar"] .pq-col li {
  font-family: 'DM Sans', 'Segoe UI', Tahoma, sans-serif;
  font-style: normal;
}

/* CJK fonts: better Chinese/Thai/Vietnamese rendering */
html[lang="zh"] body,
html[lang="th"] body,
html[lang="vi"] body {
  font-feature-settings: normal;
}