@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

body {
  font-family: 'Inter', sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

/* ================= HEADER ================= */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  padding: 60px 72px 0 72px;
}


.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LOGO */
.logo img {
  height: 45px;
  width: auto;
  display: block;
}

/* NAV */
.nav {
  display: flex;
  align-items: center;
}

.nav a {
  margin-left: 40px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.nav a:hover {
  opacity: 1;
}

/* ================= HERO ================= */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) contrast(1.05);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
   rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.15) 60%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
}


/* ================= HERO CONTENT ================= */

.hero-content {
  position: absolute;
  bottom: 100px;
  left: 72px;
  z-index: 2;
  display: block;
  max-width: 750px;
  text-align: left;
}

.hero-content h1 {
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-align: left;
  text-shadow: none;
}

.hero-content h1 .line {
  display: block;
  overflow: hidden;
}

.hero-content h1 .line span {
  display: block;
  opacity: 0;
  transform: translateY(100%);
  animation: slideUp 1s cubic-bezier(0.16,1,0.3,1) forwards;
}

.hero-content h1 .line:nth-child(1) span { animation-delay: 1.8s; }
.hero-content h1 .line:nth-child(2) span { animation-delay: 1.92s; }
.hero-content h1 .line:nth-child(3) span { animation-delay: 2.04s; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(105%); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-content p {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  opacity: 0;
  color: #ffffff;
  animation: fadeIn 1s ease forwards;
  animation-delay: 2.2s;
}

@keyframes fadeIn {
  to { opacity: 0.9; }
}

/* ================= ANIMACIÓN ================= */

@keyframes heroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.scroll-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.scroll-track {
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}

.scroll-track::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.6);
  animation: scrollLine 2s ease-in-out infinite;
  animation-delay: 2.5s;
}

@keyframes scrollLine {
  0%   { left: -100%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}

.scroll-indicator span {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  
}

.scroll-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  opacity: 0;
  animation: slideUp 1s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay: 2.16s;
}
/* ================= SIGUIENTE SECTION ================= */

.reach-section {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #000;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* VIDEO DE FONDO */
.reach-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.6) contrast(1.1);
}

/* OVERLAY OSCURO */
.reach-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.75)
  );
  z-index: 1;
}

/* CONTENIDO */
.reach-content {
  position: relative;
  z-index: 2;
  max-width: 900px;              /* ⬅ más ancho */
  text-align: center;
  padding: 0 24px;

  opacity: 0;
  transform: translateY(20px) scale(1.08); /* ⬅ escala general */
  animation: reachIn 1s ease forwards;
}

/* TITULO */
.reach-content h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(45px, 5.9vw, 82px); /* ⬅ más grande */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  color: #ffffff;
}

/* TEXTO */
.reach-content p {
  font-family: 'Inter', sans-serif;
  font-size: 18px;               /* ⬅ más legible */
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  margin-bottom: 42px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* BOTON */
.reach-button {
  display: inline-block;
  padding: 18px 44px;            /* ⬅ más presencia */
  background: #3d5afe;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.reach-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(61,90,254,0.4);
}

/* ANIMACION */
@keyframes reachIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
}
/* ================= NAV ================= */
.nav a {
  position: relative;
  color: rgba(255,255,255,0.6);
  font-weight: 400;
  text-decoration: none;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: white;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* ACTIVO */
.nav a.is-active {
  color: #fff;
  font-weight: 600;
}

.nav a.is-active::after {
  transform: scaleX(1);

  /* SECCION DEBAJO DFEL HERO - GLOBAL REACH */
}
.reach-split {
  width: 100%;
  height: 100vh;
  background: #000;
  display: grid;
   grid-template-columns: 1.3fr 0.2fr; /* antes era 1fr 1fr */
  gap: 48px; /* más separación entre texto y video */
  align-items: center;
  padding: 0 6vw;
  overflow: hidden;
}

/* LEFT */
.reach-left {
  max-width: 700px;
}

.reach-left h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 35px;
}

.reach-left p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin-bottom: 28px;
}

.reach-cta {
  display: inline-block;
  padding: 16px 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  transition: all .3s ease;
}

.reach-cta:hover {
  background: #fff;
  color: #000;
}

/* RIGHT */
.reach-right {
  position: relative;
  display: flex;
  justify-content: center;
}

.reach-cards {
  width: 900px;
  height: 600px;
  transform: rotate(-6deg);
}


.reach-card {
  position: absolute;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
   box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}

.reach-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* MAIN CARD */
.reach-card.large {
  width: 720px;
  height: 440px;
  z-index: 3;
}


/* SECONDARY CARD */
.reach-card.small {
  width: 540px;
  height: 340px;
  right: -160px;
  top: 80px;
  z-index: 2;
  opacity: 0.95;
}


/* PLAY ICON */
.play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #fff;
  background: rgba(0,0,0,0.25);
}

@media (max-width: 1300px) {
  .reach-cards {
    width: 720px;
    height: 500px;
  }

  .reach-card.large {
    width: 600px;
    height: 380px;
  }

  .reach-card.small {
    width: 460px;
    height: 300px;
    right: -120px;
  }
}

/* =========================
   SERVICES SECTION – CENTERED
   ========================= */

.services-section {
  background: #000;
  padding: 50px 2vw;
  font-family: 'Inter', sans-serif;
  color: #fff;
}

/* ---------- SERVICES TOP (FIXED) ---------- */

.services-top {
  display: grid;
  grid-template-columns: 1.0fr 1.0fr; /* acerca columnas */
  gap: 32px;                          /* mucho menos aire */
  margin-bottom: 110px;
  align-items: center;
  max-width: 900px;                  /* evita que se “estire” */
  margin-left: auto;
  margin-right: auto;
}

.services-top-right .highlight {
  font-weight: 700; /* vuelve la negrita */
  color: #ffffff;
}

/* TITLE */
.services-top-left h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 700;
  line-height: 1.05;         /* más compacto */
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* DESCRIPTION */
.services-top-right {
  display: flex;
  justify-content: flex-start; /* NO centrado */
}

.services-top-right p {
  font-family: 'Inter', sans-serif;
  font-size: 18.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 480px;   /* más controlado */
  text-align: left;
}


/* ---------- LIST ---------- */

.services-list {
  max-width: 1100px;
  margin: 0 auto;
}

/* ITEM */
.service-item {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

/* CONTENEDOR INTERNO (MISMO ANCHO PARA TODO) */
.service-inner {
  width: 100%;
  max-width: 820px; /* ESTE ES EL EJE VISUAL */
  text-align: center;
}

/* TITLE ROW */
.service-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
 transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


.service-title span {
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.35);
}

/* ICON */
.service-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;

  opacity: 0;
  transition: opacity 0.4s ease;
}

/* DESCRIPTION */
.service-desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    transform 0.4s ease;
}


.service-desc p {
  margin: 20px auto 0;
  width: 100%;          /* MISMO ANCHO QUE EL TÍTULO */
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
}

/* HOVER */
.service-item:hover .service-title {
  transform: scale(1.03);
}

.service-item:hover .service-title span {
  color: #fff;
}

.service-item:hover .service-icon {
  opacity: 1;
}

.service-item:hover .service-desc {
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
}



/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  .services-top {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 100px;
  }

  .service-title span {
    font-size: 36px;
  }
}


/* =========================
   VIEW ALL WORKS SECTION
   ========================= */

.view-works-section {
  background: #000;
  padding: 60px 2vw;
  text-align: center;
}
.view-works-svg svg {
  height: auto;
}

/* SVG wrapper */
.view-works-svg {
  max-width: 1200px;
  margin: 0 auto -50px;
  cursor: pointer;
}

/* OUTLINE */
.text-outline {
  fill: none;
  stroke: rgba(255,255,255,0.45);
  stroke-width: 2px;
  font-size: 180px;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-family: 'Satoshi', sans-serif;
}

/* FILL */
.text-fill {
  fill: #ffffff;
  font-size: 180px;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-family: 'Satoshi', sans-serif;
}

/* MASK */
.mask-rect {
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* HOVER */
.view-works-svg:hover .mask-rect {
  width: 100%;
}

/* BUTTON */
.view-works-button {
  display: inline-block;
  padding: 16px 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
}

.view-works-button:hover {
  background: #ffffff;
  color: #000;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .text-outline,
  .text-fill {
    font-size: 96px;
  }
}
/* =========================
   BRANDS SECTION
   ========================= */

.brands-section {
  background: #000;
  padding: 160px 0 140px;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

.brands-header {
  max-width: 1000px;
  margin: 0 auto 80px;
  text-align: center;
}

.brands-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #ffffff;
  margin-bottom: 24px;
}


.brands-header p {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  max-width: 720px;
  margin: 0 auto;
}

/* MARQUEE */
.logo-marquee {
  width: 100%;
  overflow: hidden;
  padding: 25px 0;
}

.logo-track {
  display: flex;
  width: max-content;
}

.logo-track img {
  height: 56px;
  margin: 0 44px;
  object-fit: contain;
  opacity: 0.85;
  filter: grayscale(100%);
  transition: opacity 0.3s ease;
}

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

/* ANIMATIONS */
.marquee-left {
  animation: marquee-left 101s linear infinite;
}

.marquee-right {
  animation: marquee-right 109s linear infinite;
}

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

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

/* RESPONSIVE */
@media (max-width: 768px) {
  .brands-section {
    padding: 120px 0 100px;
  }

  .logo-track img {
    height: 44px;
    margin: 0 28px;
  }
}
/* =========================
   CONTACT SECTION
   ========================= */

.contact-section {
  background: #000;
  padding: 180px 6vw;
  font-family: 'Inter', sans-serif;
}

/* GRID */
.contact-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 120px;
  align-items: center;
}

/* LEFT */
.contact-content h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 28px;
  color: #ffffff;
}


.contact-content p {
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
}

.contact-content p strong {
  color: #ffffff;
  font-weight: 500;
}

/* FORM WRAP */
.contact-form-wrap {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 48px;
}

/* FORM */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding: 14px 0;
  font-size: 16px;
  color: #fff;
  outline: none;
  transition: border-color 0.3s ease;
  font-family: 'Inter', sans-serif;
}

.form-field textarea {
  resize: none;
  min-height: 90px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255,255,255,0.5);
}

.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: #ffffff;
}

/* BUTTON */
.contact-form button {
  margin-top: 20px;
  padding: 16px 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  background: #ffffff;
  color: #000000;
}


.contact-form button:hover {
  opacity: 0.7;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .contact-form-wrap {
    padding: 36px;
  }
}
/* =========================
   FAQ SECTION
   ========================= */

.faq-section {
  background: #000;
  padding: 100px 4vw;
  font-family: 'Inter', sans-serif;
}

/* GRID */
.faq-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 120px;
  align-items: center;
}

/* RIGHT CONTENT */
.faq-content h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(48px, 6vw, 92px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 24px;
  color: #ffffff;
}

.faq-content p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 420px;
}

.faq-content p strong {
  color: #ffffff;
  font-weight: 500;
}

/* FAQ LIST */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ITEM */
.faq-item {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}

/* QUESTION */
.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 22px 26px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

/* ICON */
.faq-icon {
  font-size: 20px;
  transition: transform 0.35s ease;
  opacity: 0.7;
}

/* ANSWER */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer p {
  padding: 0 26px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}

/* ACTIVE */
.faq-item.active .faq-answer {
  max-height: 370px;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}


/* RESPONSIVE */
@media (max-width: 900px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }




  
}
.hero-single-video {
  width: clamp(680px, 42vw, 980px);
  aspect-ratio: 16 / 9;

  border-radius: 24px;
  overflow: hidden;
  background: #000;

  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}

.hero-single-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* VIDEO */
.hero-single-video video {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}


@media (min-width: 2200px) {
  .hero-single-video {
    width: clamp(1200px, 60vw, 1200px);
  }
}
/* =========================================
   RESPONSIVE FINAL - ROUNDWELL
   (Pegar al final del archivo CSS)
   ========================================= */

/* --- TABLET Y LAPTOPS PEQUEÑAS (Max 1100px) --- */
@media (max-width: 1100px) {
  
  /* Ajuste Header */
  .site-header {
    padding: 30px 40px;
  }

  /* Ajuste Grid Global Reach */
  .reach-split {
    height: auto; /* Quita el 100vh forzado */
    padding: 80px 40px;
    display: flex; /* Cambia Grid por Flex vertical */
    flex-direction: column;
    gap: 60px;
  }

  .reach-left {
    max-width: 100%;
    text-align: center;
    order: 1; /* Texto arriba */
  }

  .reach-left p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-single-video {
    width: 100%; /* Ocupa todo el ancho disponible */
    order: 2; /* Video abajo */
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

  /* Ajuste Grids Contacto y FAQ */
  .contact-grid, 
  .faq-grid {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: 60px;
    text-align: center;
  }
  
  .contact-content p,
  .faq-content p {
    margin: 0 auto;
  }

  /* Invertir orden en FAQ para que el título quede arriba en móvil/tablet */
  .faq-grid {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* --- MÓVIL (Max 768px) --- */
@media (max-width: 768px) {

 .hero-content {
  position: absolute;
  left: 50%;
  bottom: 140px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 650px;
  padding: 0 24px;
  text-align: center;

}

.hero-content h1 {
  font-size: 52px;
  line-height: 0.95;
  white-space: normal;
  word-break: keep-all;
  text-align: center;
}

.hero-content p {
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}

  /* 3. REACH / VIDEO SECTION */
  .reach-split {
    padding: 60px 20px;
  }

  .reach-left h2 {
    font-size: 36px;
  }

  /* 4. SERVICES */
  .services-section {
    padding: 60px 20px;
  }

  .services-top {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
    text-align: center;
  }

  .services-top-left h2 {
    font-size: 38px;
  }

  .services-top-right {
    justify-content: center;
  }

  /* Lista de servicios */
  .service-item {
    padding: 30px 0;
  }

  .service-title {
    gap: 12px;
  }

  .service-title span {
    font-size: 28px; /* Títulos de servicios más pequeños */
  }

  .service-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  /* 5. BRANDS */
  .brands-section {
    padding: 80px 0;
  }

  .brands-header {
    padding: 0 20px;
  }

  .brands-header h2 {
    font-size: 36px;
  }

  /* 6. CONTACTO */
  .contact-section {
    padding: 80px 20px;
  }

  .contact-content h2 {
    font-size: 36px;
  }

  .contact-form-wrap {
    padding: 25px; /* Menos padding en el formulario */
  }

  /* 7. FAQ */
  .faq-section {
    padding: 80px 20px;
  }
  
  .faq-content h2 {
    font-size: 36px;
  }

  .faq-question {
    padding: 18px 15px;
    font-size: 15px;
    text-align: left; /* Alinear preguntas a la izquierda */
  }

  /* 8. VIEW WORKS */
  .view-works-svg {
    margin-bottom: -20px;
  }
  
  .text-outline, .text-fill {
    font-size: 60px; /* Reducir el SVG text */
  }
}

/* --- MÓVIL PEQUEÑO (Max 380px) --- */
@media (max-width: 380px) {
  .hero-content h1 {
    font-size: 34px;
  }
  
  .nav a {
    font-size: 10px;
    margin: 0 5px;
  }
}/* =========================
   HEADER – BASE
   ========================= */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 60px 72px 0;
  background: transparent;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 45px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  position: relative;
}

.nav a.is-active,
.nav a:hover {
  color: #fff;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.nav a.is-active::after {
  transform: scaleX(1);
}

/* =========================
   HEADER – MOBILE CLEAN
   ========================= */

@media (max-width: 768px) {

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    padding: 0 20px;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.35) 50%,
      rgba(0,0,0,0.0) 100%
    );
    backdrop-filter: blur(6px);
    z-index: 100;
  }

  .header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo img {
    height: 26px;
    opacity: 0.95;
  }

  .nav {
    display: flex;
    gap: 18px;
  }

  .nav a {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.85);
  }

  .nav a.is-active {
    color: #fff;
  }

  .nav a::after {
    bottom: -4px;
  }

  /* el hero NO queda tapado */
  .hero {
    padding-top: 64px;
  }
}
/* =========================
   HEADER – MOBILE STACKED
   ========================= */

@media (max-width: 768px) {

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 14px 0 12px;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0.0) 100%
    );
    backdrop-filter: blur(6px);
    z-index: 100;
  }


  /* LOGO */
  .logo img {
    height: 32px;
    width: auto;
    display: block;
    opacity: 1;
  }


  .nav a {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.9);
  }

  .nav a.is-active {
    color: #ffffff;
  }

  .nav a::after {
    bottom: -5px;
  }

  /* HERO OFFSET */
  .hero {
    padding-top: 96px;
  }
}

.hero-content h1 {
  white-space: normal;   /* respeta el <br> */
  word-break: keep-all; /* no corta palabras */
}

@media (max-width: 768px) {

  /* HERO */
  .hero {
    height: 95vh;            /* antes 100vh → mucho más elegante */
    min-height: 520px;       /* asegura presencia visual */
    padding-top: 0;          /* mata falsos centrados */
  }

  /* VIDEO */
  .hero-video {
    object-position: center center; /* evita cortes raros */
  }
}
@media (max-width: 768px) {

  .reach-split {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 72px !important;
    padding: 100px 6vw !important;
    height: auto !important;
  }

  .reach-left {
    margin: 0 !important;
  }

  .hero-single-video {
    margin: 0 auto !important;
  }

}

@media (max-width: 768px) {

  /* ===== SERVICES / WE DO MORE ===== */

  .services-section {
    text-align: center;
  }

  .services-section h2,
  .services-section p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .services-section p {
    max-width: 520px;
    line-height: 1.6;
  }

  /* Lista de servicios */
  .service-item,
  .services-list,
  .services-list li {
    text-align: center;
    justify-content: center;
  }

  .service-item {
    padding-left: 0;
    padding-right: 0;
  }

  /* Líneas divisorias centradas */
  .service-item::before,
  .service-item::after {
    left: 50%;
    transform: translateX(-50%);
  }

}

@media (max-width: 768px) {

  /* SERVICES LIST */
  .services-list {
    align-items: center;
  }

  .service-item {
    display: flex;
    justify-content: center;
  }

  .service-inner {
    width: 100%;
    text-align: center;
  }

  /* TITULO + ICON */
  .service-title {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .service-icon {
    margin: 0;
  }

  .service-title span {
    text-align: center;
    display: block;
  }

}
@media (max-width: 768px) {

  /* ===============================
     VIEW ALL WORKS – MOBILE BIG
     =============================== */

  .view-works-svg {
  margin-bottom: -2px; /* antes era mucho más */
  }

  .text-outline {
    display: none;
  }

  .text-fill {
    fill: #ffffff;
    font-size: 175px;              /* 🔥 ENORME */
    font-weight: 700;
    letter-spacing: -0.04em;
  }

  .mask-rect {
    width: 100% !important;
  }

}

@media (max-width: 1436px) {
  .portfolio-header-inner {
    max-width: 1200px;
    gap: 60px;
  }

  .portfolio-title {
    font-size: clamp(64px, 6vw, 88px);
    line-height: 0.95;
  }

  .portfolio-subtitle {
    font-size: 16px;
    max-width: 420px;
  }
}

.portfolio-header {
  padding: 120px 80px 80px;
}

.portfolio-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
@media (max-width: 1436px) {
  .portfolio-header {
    padding: 100px 60px 60px;
  }

  .portfolio-header-inner {
    max-width: 1200px;
    gap: 60px;
  }

  .portfolio-title {
    font-size: 88px;
    line-height: 0.95;
  }
}
@media (max-width: 1100px) {
  .portfolio-header-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }

  .portfolio-title {
    font-size: 72px;
  }

  .portfolio-subtitle {
    max-width: 600px;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .service-icon {
    display: none !important;
  }
}
@media (max-width: 768px) {

  .site-footer {
    padding: 48px 20px 32px !important; /* menos aire */
  }

  .footer-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 24px !important;
  }

  .footer-left,
  .footer-right {
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
  }

  .footer-logo {
    margin: 0 auto !important;
    display: block;
  }

  .footer-socials {
    display: flex;
    justify-content: center !important;
    gap: 14px;
  }

  .footer-right p,
  .footer-right a {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }
}
/* FIX SAFARI TAP */
.service-item,
.service-inner,
.service-title {
  pointer-events: auto;
  cursor: pointer;
}

/* Safari necesita esto para reconocer el tap */
.service-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Si hay transform, forzamos contexto */
.service-inner {
  transform: translateZ(0);
}

/* Evitar overlays bloqueando el tap */
.service-item::before,
.service-item::after {
  pointer-events: none;
}
@media (max-width: 768px) {

  .portfolio-header {
    padding-top: 120px; /* aire real bajo el nav */
  }

  .portfolio-title {
    margin-top: 0;
  }

}
@supports (-webkit-touch-callout: none) {
  .portfolio-header {
    padding-top: 140px;
  }
}
.portfolio-filters {
  flex-wrap: wrap;
  gap: 10px;
}

.portfolio-filters .filter {
  white-space: nowrap;
  font-size: 14px;
  padding: 8px 14px;
}

/* SOLO MOBILE */
@media (max-width: 768px) {
  .portfolio-filters .filter {
    font-size: 13px;
  }
}
@media (max-width: 768px) {
  .service-item {
    position: relative;
  }

  .service-trigger {
    position: absolute;
    inset: 0;
    background: transparent;
    border: none;
    z-index: 5;
    cursor: pointer;
  }
}


@media (max-width: 768px) {

  /* 🔧 reducir gap ENTRE el video (reach) y el título services */
  .reach-split + .services-section {
    margin-top: -90px;
  }

}
@media (max-width: 768px) {

  /* 🔧 reducir gap entre View Portfolio y Trusted by Brands */
  .view-works-section + .brands-section {
    margin-top: -70px;
  }

}
@media (max-width: 768px) {

  /* 🔧 reducir gap entre Brands y Contact */
  .brands-section + .contact-section {
    margin-top: -80px;
  }

}
@media (max-width: 768px) {
  .contact-form button {
    font-size: 14px;      /* antes 16px */
    padding: 14px 36px;  /* un poco más compacto */
  }
}
@media (max-width: 768px) {

  /* 🔧 reducir espacio entre Contact y FAQ */
  .contact-section + .faq-section {
    margin-top: -80px;
  }

}
@media (max-width: 768px) {

  /* 🔧 reducir espacio entre FAQ y Footer */
  .faq-section {
    padding-bottom: 20px; /* antes ~80/100 */
  }

  .site-footer {
    margin-top: 0;
    padding-top: 32px; /* antes más grande */
  }

}
/* ===== HERO TITLE – DESKTOP SIZE TWEAK ===== */
@media (min-width: 1100px) {

  .hero-content h1 {
    font-size: clamp(39px, 6vw, 67px); /* antes era más grande */
    line-height: 1.05;
  }

  .hero-content p {
    font-size: 24px; /* opcional, apenas más chico */
  }

}
/* ===== REDUCIR GAP ENTRE BRANDS Y CONTACT – SOLO DESKTOP ===== */
@media (min-width: 1100px) {

  .brands-section {
    padding-bottom: 80px; /* antes ~140px */
  }

  .contact-section {
    padding-top: 89px; /* antes ~180px */
  }

}
/* ===== REDUCIR GAP ENTRE CONTACT Y FAQ – SOLO DESKTOP ===== */
@media (min-width: 1100px) {

  .contact-section {
    padding-bottom: 80px; /* antes ~180px */
  }

  .faq-section {
    padding-top: 60px; /* antes ~100px */
  }

}
/* ===== REDUCIR GAP ENTRE FAQ Y FOOTER – SOLO DESKTOP ===== */
@media (min-width: 1100px) {

  .faq-section {
    padding-bottom: 40px; /* antes ~100px */
  }

  .site-footer {
    padding-top: 40px; /* baja el arranque del footer */
  }

}
/* ===== REDUCIR GAP ENTRE VIEW PORTFOLIO Y TRUSTED BY BRANDS – DESKTOP ===== */
@media (min-width: 1100px) {

  .view-works-section {
    margin-bottom: 35px; /* antes era mucho más */
  }

  .brands-section {
    padding-top: 35px; /* sube el título */
  }

}
/* ===== REDUCIR GAP ENTRE GLOBAL REACH Y WE DO MORE – DESKTOP ===== */
@media (min-width: 1100px) {

  /* Bloque de arriba (Global Reach) */
  .reach-split {
    padding-bottom: -2px; /* antes ~140/160 */
  }

  /* Bloque siguiente (Services / We do more) */
  .services-section {
    padding-top: -2px; /* antes ~140 */
  }

}
/* ===============================
   FOCUS CARDS – IMPACT HERO
=============================== */

.focus-cards {
  display: flex;
  gap: 16px;
  padding: 16px;
  height: 75vh;
  background: #000;
  overflow: hidden;
}

/* CARD */
.focus-card {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 24px;
  transition: flex 0.8s cubic-bezier(.16,1,.3,1);
}

/* VIDEO – estado base (apagado) */
.focus-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  filter: grayscale(100%) contrast(1.1) brightness(0.8);
  transition: transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.6s ease;
}

/* OVERLAY GRADIENT */
.focus-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.98) 0%,
    rgba(0,0,0,.75) 40%,
    rgba(0,0,0,.45) 67%,
    rgba(0,0,0,.15) 100%
  );
  z-index: 1;
}

/* ===============================
   ESTADO BASE – SOLO TÍTULO
=============================== */

.focus-overlay {
  position: absolute;
  left: 40px;
  bottom: 40px;
  max-width: 520px;
  z-index: 2;
}

/* Ocultar todo excepto título */
.focus-eyebrow {
  display: block;
  font-size: 16px;
  letter-spacing: 0.10em;
  opacity: 0;                 /* oculto por defecto */
  margin-bottom: 4px;
  transition: all .4s cubic-bezier(.16,1,.3,1);
}

.focus-desc,
.focus-btn {
  opacity: 0;
  transform: translateY(15px);
  transition: all .4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}

/* Título visible pero tenue */
.focus-title {
  font-size: 50px;
  line-height: 1.05;
  font-weight: 700;
  margin: 0;
  opacity: .35;
  transition: all .4s ease;
   margin-bottom: 15px;  /* separación real con descripción */
  opacity: .4;          /* estado base más elegante */
}

.focus-title em {
  display: block;
  font-weight: 300;
  opacity: 0.9;
}

/* ===============================
   HOVER ACTIVO
=============================== */

.focus-card:hover {
  flex: 2.2;
}

.focus-card:hover video {
  transform: scale(1);
  filter: grayscale(0%) contrast(1.05) brightness(1);
}

/* Mostrar todo en la activa */
.focus-card:hover .focus-title {
  opacity: 1;
}

  .focus-card:hover .focus-eyebrow {
    opacity: 0.55;           /* menos intenso */
  }
.focus-card:hover .focus-desc,
.focus-card:hover .focus-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===============================
   EFECTO COLAPSO DE LAS OTRAS
=============================== */

.focus-cards:hover .focus-card:not(:hover) {
  flex: .8;
}

.focus-cards:hover .focus-card:not(:hover) .focus-title {
  opacity: .25;
}

.focus-cards:hover .focus-card:not(:hover) .focus-eyebrow,
.focus-cards:hover .focus-card:not(:hover) .focus-desc,
.focus-cards:hover .focus-card:not(:hover) .focus-btn {
  opacity: 0;
}

/* ===============================
   FOCUS BUTTON
=============================== */

.focus-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  background: transparent;
  transition: all 0.4s cubic-bezier(.16,1,.3,1);
}

/* Flecha */
.focus-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
}

/* Hover botón */
.focus-btn:hover {
  border-color: rgba(255,255,255,.8);
}

.focus-btn:hover .focus-btn-icon {
  background: #fff;
  color: #000;
  border-color: #fff;
}
/* =========================================
   DESKTOP FIX – TEXT WIDTH STABILITY
   ========================================= */

/* El overlay no depende del ancho dinámico */
.focus-overlay {
  width: 520px;      /* ancho fijo */
  max-width: 520px;
}

/* Evita que el título cambie estructura */
.focus-title {
  width: 100%;
}

/* Cards cerradas muestran solo título */
.focus-card:not(.is-active):not(:hover) .focus-eyebrow,
.focus-card:not(.is-active):not(:hover) .focus-desc,
.focus-card:not(.is-active):not(:hover) .focus-btn {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

@media (max-width: 1000px) {

  /* Layout vertical limpio */
  .focus-cards {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 5px 5px;
    gap: 24px;
  }
/* Eyebrow */
.focus-eyebrow {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}

/* Título */
.focus-title {
  font-size: 50px;
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 16px;
    margin-top: 12px;
}

/* Descripción */
.focus-desc {
  font-size: 14px;
  color: #c9c9c9;
  line-height: 1.6;
  opacity: 0.85;
  max-width: 95%;
}

  /* Card normal */
  .focus-card {
    flex: none !important;
    height: 460px;
    border-radius: 18px;
  }
  .focus-overlay .focus-title {
    font-size: 42px;
  }
  /* Quitar efectos desktop */
  .focus-card:hover {
    flex: none !important;
  }

  .focus-cards:hover .focus-card {
    flex: none !important;
  }

  .focus-cards:hover .focus-card:not(:hover) {
    flex: none !important;
  }

  /* Video normal */
  .focus-card video {
    transform: none;
    filter: none;
  }

  /* Overlay ancho adaptable */
  .focus-overlay {
    left: 24px;
    right: 24px;
    bottom: 24px;
    width: auto;
    max-width: none;
  }

  /* Texto proporcional */
  .focus-title {
    font-size: 34px;
    opacity: 1 !important;
  }

  .focus-eyebrow,
  .focus-desc,
  .focus-btn {
    opacity: 1 !important;
    transform: none !important;
  }

}
@media (max-width: 1000px) {

  .services-section p {
    font-size: 18px; /* mismo tamaño que el hero mobile */
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
  }

}
@media (max-width: 1000px) {

  .services-section h2 {
    font-size: 42px;   /* ajustalo al mismo que uses en hero mobile */
    line-height: 1.1;
    font-weight: 700;
    color: #ffffff;
  }

}
@media (max-width: 1000px) {

  .view-works-button {
    padding: 10px 36px;   /* menos alto, más ancho */
    font-size: 14px;
    border-radius: 999px;
  }

}
@media (max-width: 1000px) {

  .view-works-section {
    margin-top: -40px; /* ajustá entre -30 y -60 según lo que quieras */
  }

}
@media (max-width: 1000px) {
  .services-section h2 {
    margin-top: 70px;
  }
}

@media (max-width: 768px) {

  .hero-content {
    left: 50%;
    bottom: 36vh;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    padding: 0 24px;
    text-align: center;
  }

  .hero-content h1 {
    font-size: clamp(52px, 15vw, 72px);
    line-height: 0.95;
    text-align: center;
  }

  .hero-content .line span {
    display: block;
  }

}


/* ==========================================
   MOBILE HEADER – FINAL SPACING
   (Pegar al final del CSS)
   ========================================== */

@media (max-width: 768px) {

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 84px;
    padding: 20px 28px;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.60) 0%,
      rgba(0,0,0,.35) 55%,
      rgba(0,0,0,0) 100%
    );
    backdrop-filter: blur(6px);
    z-index: 999;
  }

  .header-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo img {
    height: 34px;
    width: auto;
    display: block;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .nav a {
    margin: 0;
    font-size: 11px;
    letter-spacing: .18em;
  }

  /* Evita que el header tape el hero */
  .hero {
    padding-top: 84px;
  }

}

/* ==========================================
   APPLE GLASS HEADER
   ========================================== */

.site-header{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:9999;

    padding:30px 72px 22px;

    transition:padding .35s ease;

}

/* Glass Layer */

.site-header::before{

    content:"";

    position:absolute;
    inset:0;

    background:rgba(18,18,18,.18);

    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);

    border-bottom:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 8px 40px rgba(0,0,0,.12),
        inset 0 1px rgba(255,255,255,.05);

    opacity:0;

    transition:
        opacity .35s ease,
        background .35s ease;

    pointer-events:none;

}

.site-header.scrolled{

    padding:22px 72px 18px;

}

.site-header.scrolled::before{

    opacity:1;

}

.header-inner{

    position:relative;
    z-index:2;

}

/* ==========================================
   MOBILE TYPOGRAPHY POLISH
   ========================================== */

@media (max-width:768px){

  /* ===== WHERE IDEAS ===== */

  .reach-left{
    text-align:center;
  }

  .reach-left h2{

    max-width:340px;
    margin:0 auto 28px;

    font-size:58px;
    line-height:1.1;
    letter-spacing:-.04em;

    text-wrap:balance;

  }

  .reach-left p{

    max-width:500px;
    margin:0 auto 42px;

    font-size:19px;
    line-height:1.55;
    letter-spacing:-.01em;

    text-wrap:balance;

  }


  /* ===== READY TO CHAT ===== */

  .contact-content{

    text-align:center;

  }

  .contact-content h2{

    max-width:300px;
    margin:0 auto 24px;

    font-size:55px;
    line-height:1.1;

    text-wrap:balance;

  }

  .contact-content p{

    max-width:320px;
    margin:0 auto;

    font-size:19px;
    line-height:1.55;

    text-wrap:balance;

  }

}
/* ==========================================
   SERVICES SECTION - MOBILE
   ========================================== */

@media (max-width:768px){

  .services-top{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;

  }

  .services-top-left,
  .services-top-right{

    width:100%;
    text-align:center;

  }

  .services-top-left h2{

    max-width:320px;
    margin:0 auto;

    font-size:50px;
    line-height:.95;
    letter-spacing:-0.04em;

    text-wrap:balance;

  }

  .services-top-right p{

    max-width:320px;
    margin:0 auto;

    font-size:18px;
    line-height:1.45;

    text-wrap:balance;

  }

}