/* ============================================================
   INERCIA FILMS — Global Stylesheet v1.0
   ============================================================
   Tabla de contenidos:
   01. Variables & Reset
   02. Grano de película (film grain)
   03. Tipografía
   04. Botones
   05. Navegación
   06. Utilidades de layout
   07. Animaciones
   08. Sección Hero
   09. Sección Servicios
   10. Sección Nosotros
   11. Sección Trabajo
   12. Sección Cotizador CTA
   13. Sección Contacto
   14. Footer
   15. Responsive
   ============================================================ */


/* ============================================================
   01. VARIABLES & RESET
   ============================================================ */

:root {
  --color-void:   #080604;
  --color-reel:   #1C1710;
  --color-amber:  #C8912A;
  --color-luz:    #E4AE4C;
  --color-cream:  #F2EBD8;
  --color-grain:  #C8BDA8;
  --color-ceniza: #5C5347;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nav-h: 72px;
  --pad-x: 2rem;
  --section-py: 6rem;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-void);
  color: var(--color-cream);
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}


/* ============================================================
   02. GRANO DE PELÍCULA (FILM GRAIN OVERLAY)
   ============================================================ */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}


/* ============================================================
   03. TIPOGRAFÍA
   ============================================================ */

h1, h2, h3, h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.04em;
}

h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: 0.05em;
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 0.06em;
}

/* Etiqueta de sección — línea + texto */
.label {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: 1.25rem;
}

.label::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--color-amber);
  flex-shrink: 0;
}


/* ============================================================
   04. BOTONES
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: none;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
  white-space: nowrap;
}

/* Botón sólido — fondo ámbar */
.btn-solid {
  background: var(--color-amber);
  color: var(--color-reel);
}

.btn-solid:hover {
  background: var(--color-luz);
  color: var(--color-void);
  transform: translateY(-2px);
}

/* Botón ghost — borde ámbar, fondo transparente */
.btn-ghost {
  background: transparent;
  color: var(--color-cream);
  border: 1px solid rgba(200, 145, 42, 0.45);
}

.btn-ghost:hover {
  border-color: var(--color-amber);
  color: var(--color-amber);
  transform: translateY(-2px);
}


/* ============================================================
   05. NAVEGACIÓN
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  background: rgba(8, 6, 4, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200, 145, 42, 0.12);
  transition: height 0.35s var(--ease), border-color 0.35s var(--ease);
}

.nav.scrolled {
  height: 58px;
  border-bottom-color: rgba(200, 145, 42, 0.22);
}

/* Logo */
.nav-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  color: var(--color-cream);
  transition: color 0.3s var(--ease);
  line-height: 1;
  flex-shrink: 0;
}

.nav-logo:hover {
  color: var(--color-amber);
}

.nav-logo .wordmark {
  display: block;
  height: 36px;
  width: auto;
}

/* Isotipo de texto — nunca se muestra (se usa el logo PNG siempre) */
.nav-logo .isotype {
  display: none;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
}

/* Links de navegación — ocultos en móvil, visibles en desktop (≥900px) */
.nav-links {
  display: none;
  align-items: center;
  gap: 2.5rem;
}

.nav-links a {
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grain);
  transition: color 0.3s var(--ease);
}

.nav-links a:hover {
  color: var(--color-amber);
}

.nav-cta {
  padding: 0.6rem 1.5rem !important;
  font-size: 0.72rem !important;
  color: var(--color-void) !important;
}

.nav-cta:hover {
  color: var(--color-void) !important;
}

/* Hamburger (móvil) */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  z-index: 600;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-cream);
  transition: all 0.35s var(--ease);
  transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menú móvil desplegable */
.nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(8, 6, 4, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.nav-mobile.open {
  opacity: 1;
  pointer-events: all;
}

.nav-mobile a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cream);
  transition: color 0.3s var(--ease);
  transform: translateY(0);
}

.nav-mobile a:hover {
  color: var(--color-amber);
}

.nav-mobile .btn-solid {
  font-size: 0.85rem;
  margin-top: 1rem;
  padding: 1rem 3rem;
}


/* ============================================================
   06. UTILIDADES DE LAYOUT
   ============================================================ */

.section {
  padding: var(--section-py) var(--pad-x);
}

.section--dark {
  background: var(--color-reel);
  border-top: 1px solid rgba(200, 145, 42, 0.08);
  border-bottom: 1px solid rgba(200, 145, 42, 0.08);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.section-header {
  margin-bottom: 3.5rem;
}


/* ============================================================
   07. ANIMACIONES
   ============================================================ */

/* Fade-in activado por IntersectionObserver en main.js */
.fade-in {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-d1 { transition-delay: 0.1s; }
.fade-in-d2 { transition-delay: 0.2s; }
.fade-in-d3 { transition-delay: 0.3s; }
.fade-in-d4 { transition-delay: 0.45s; }

/* Animación de entrada al cargar la página (hero) */
@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   08. SECCIÓN HERO
   ============================================================ */

/* Animación: haz de luz diagonal que atraviesa el hero lentamente */
@keyframes lightSweep {
  0%   { transform: translateX(-120%) skewX(-15deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(220%) skewX(-15deg); opacity: 0; }
}

/* Pulso de brillo ambiental desde la esquina superior derecha */
@keyframes ambientGlow {
  0%, 100% { opacity: 0.04; transform: scale(1); }
  50%       { opacity: 0.09; transform: scale(1.08); }
}

.hero {
  min-height: 100dvh;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 5rem;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Brillo ambiental cálido — esquina superior derecha */
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(200, 145, 42, 0.12) 0%, transparent 70%);
  pointer-events: none;
  animation: ambientGlow 8s var(--ease) infinite;
}

/* Haz de luz diagonal — barre el hero cada 12s */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 18%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(228, 174, 76, 0.04) 40%,
    rgba(228, 174, 76, 0.07) 50%,
    rgba(228, 174, 76, 0.04) 60%,
    transparent 100%
  );
  pointer-events: none;
  animation: lightSweep 12s var(--ease) infinite;
  animation-delay: 2s;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.hero-label {
  opacity: 0;
  animation: heroIn 0.8s var(--ease) 0.15s forwards;
}

/* Titular principal — stacked, masivo */
.hero-headline {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin: 1.5rem 0 2rem;
}

.hero-line {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  opacity: 0;
  animation: heroIn 0.9s var(--ease) forwards;
}

.hero-line:nth-child(1) {
  font-size: clamp(3rem, 8.5vw, 7.5rem);
  letter-spacing: 0.02em;
  animation-delay: 0.3s;
}

.hero-line:nth-child(2) {
  font-size: clamp(2rem, 5.5vw, 5rem);
  font-weight: 400;
  color: var(--color-grain);
  letter-spacing: 0.06em;
  padding-left: clamp(0.75rem, 2vw, 2rem); /* indent para ritmo visual */
  animation-delay: 0.5s;
}

.hero-line:nth-child(3) {
  font-size: clamp(3rem, 8.5vw, 7.5rem);
  letter-spacing: 0.02em;
  animation-delay: 0.7s;
}

.hero-sub {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--color-grain);
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: heroIn 0.8s var(--ease) 0.9s forwards;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroIn 0.8s var(--ease) 1.05s forwards;
}

/* Placeholder del reel — caja estilo frame de película */
.hero-reel-wrap {
  max-width: 1200px;
  margin: 4rem auto 0;
  width: 100%;
  opacity: 0;
  animation: heroIn 0.9s var(--ease) 1.2s forwards;
}

.hero-reel-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.hero-reel-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-amber);
}

.hero-reel-line {
  flex: 1;
  height: 1px;
  background: rgba(200, 145, 42, 0.15);
}

.hero-reel-placeholder {
  aspect-ratio: 16 / 9;
  background: var(--color-reel);
  border: 1px solid rgba(200, 145, 42, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.35s var(--ease);
}

.hero-reel-placeholder:hover {
  border-color: rgba(200, 145, 42, 0.45);
}

/* Esquinas decorativas estilo visor de cámara */
.hero-reel-placeholder::before,
.hero-reel-placeholder::after {
  content: '';
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border-style: solid;
  border-color: rgba(200, 145, 42, 0.35);
  transition: border-color 0.35s var(--ease);
}

.hero-reel-placeholder::before {
  top: 1rem;
  left: 1rem;
  border-width: 1px 0 0 1px;
}

.hero-reel-placeholder::after {
  bottom: 1rem;
  right: 1rem;
  border-width: 0 1px 1px 0;
}

.hero-reel-placeholder:hover::before,
.hero-reel-placeholder:hover::after {
  border-color: rgba(200, 145, 42, 0.7);
}

.hero-reel-play-btn {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 145, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s var(--ease);
}

.hero-reel-placeholder:hover .hero-reel-play-btn {
  border-color: var(--color-amber);
  background: rgba(200, 145, 42, 0.08);
  transform: scale(1.08);
}

.hero-reel-placeholder:hover .hero-reel-play-btn svg {
  transform: scale(1.1);
}

.hero-reel-play-btn svg {
  transition: transform 0.35s var(--ease);
  margin-left: 4px; /* compensar el triángulo visualmente */
}

.hero-reel-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ceniza);
  transition: color 0.35s var(--ease);
}

.hero-reel-placeholder:hover .hero-reel-text {
  color: var(--color-grain);
}


/* ============================================================
   09. SECCIÓN SERVICIOS
   ============================================================ */

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(200, 145, 42, 0.06);
}

.service-card {
  background: var(--color-void);
  padding: 2.5rem 2rem;
  border-left: 2px solid transparent;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
}

.service-card:hover {
  border-left-color: var(--color-amber);
  background: var(--color-reel);
  transform: translateX(3px);
}

.service-icon {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 1;
  color: var(--color-amber);
  opacity: 0.7;
  transition: opacity 0.35s var(--ease);
}

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

.service-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.service-desc {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-grain);
  line-height: 1.7;
}


/* ============================================================
   10. SECCIÓN NOSOTROS
   ============================================================ */

.nosotros-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

.nosotros-body {
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-grain);
  line-height: 1.85;
  margin-top: 2rem;
}

.nosotros-diff-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(200, 145, 42, 0.08);
}

.diff-card {
  background: var(--color-reel);
  padding: 2rem 2.5rem;
  border-top: 2px solid rgba(200, 145, 42, 0.3);
  transition: border-top-color 0.35s var(--ease);
}

.diff-card:hover {
  border-top-color: var(--color-amber);
}

.diff-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(200, 145, 42, 0.18);
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.diff-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-cream);
  margin-bottom: 0.625rem;
}

.diff-desc {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-grain);
  line-height: 1.75;
}


/* ============================================================
   11. SECCIÓN TRABAJO
   ============================================================ */

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(200, 145, 42, 0.06);
}

.work-card {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-reel);
  cursor: pointer;
}

/* iframe del embed Vimeo */
.work-card-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Placeholder visible hasta que se agregue el embed real */
.work-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  transition: background 0.35s var(--ease);
}

.work-card:hover .work-card-placeholder {
  background: rgba(8, 6, 4, 0.3);
}

.work-card-play {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 145, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s var(--ease);
}

.work-card:hover .work-card-play {
  border-color: var(--color-amber);
  background: rgba(200, 145, 42, 0.1);
  transform: scale(1.1);
}

.work-card-play svg {
  margin-left: 3px;
  transition: transform 0.35s var(--ease);
}

.work-card:hover .work-card-play svg {
  transform: scale(1.05);
}

.work-card-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-amber);
  opacity: 0.7;
  transition: opacity 0.35s var(--ease);
}

.work-card:hover .work-card-tag {
  opacity: 1;
}

/* Info que aparece al hacer hover */
.work-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(transparent, rgba(8, 6, 4, 0.92));
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
}

.work-card:hover .work-card-info {
  transform: translateY(0);
}

.work-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
}


/* ============================================================
   12. SECCIÓN COTIZADOR CTA
   ============================================================ */

.cta-band {
  background: var(--color-reel);
  border-top: 1px solid rgba(200, 145, 42, 0.1);
  border-bottom: 1px solid rgba(200, 145, 42, 0.1);
  padding: var(--section-py) var(--pad-x);
}

.cta-inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.cta-body {
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-grain);
  line-height: 1.8;
  margin-top: 1.25rem;
  max-width: 48ch;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
  flex-shrink: 0;
}

.cta-whatsapp {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--color-ceniza);
  transition: color 0.3s var(--ease);
  letter-spacing: 0.03em;
}

.cta-whatsapp:hover {
  color: var(--color-amber);
}


/* ============================================================
   13. SECCIÓN CONTACTO
   ============================================================ */

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

.contact-sub {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--color-grain);
  margin-top: 1.5rem;
  letter-spacing: 0.03em;
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  justify-content: center;
}

.contact-email {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--color-cream);
  transition: color 0.3s var(--ease);
  display: inline-block;
  border-bottom: 1px solid rgba(200, 145, 42, 0.2);
  padding-bottom: 0.5rem;
}

.contact-email:hover {
  color: var(--color-amber);
  border-bottom-color: var(--color-amber);
}

.contact-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.contact-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--color-ceniza);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ============================================================
   14. FOOTER
   ============================================================ */

.footer {
  background: var(--color-reel);
  border-top: 1px solid rgba(200, 145, 42, 0.12);
  padding: 3rem var(--pad-x);
}

.footer-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cream);
}

.footer-tagline {
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--color-ceniza);
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

.footer-social {
  display: flex;
  gap: 2rem;
}

.footer-social a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ceniza);
  transition: color 0.3s var(--ease);
}

.footer-social a:hover {
  color: var(--color-amber);
}

.footer-copy {
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--color-ceniza);
  letter-spacing: 0.06em;
  padding-top: 2rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(92, 83, 71, 0.25);
}


/* ============================================================
   15. RESPONSIVE
   ============================================================ */

/* Tablet — 640px+ */
@media (min-width: 640px) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
  }

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

/* Desktop — 900px+ */
@media (min-width: 900px) {
  :root {
    --pad-x: 6rem;
    --section-py: 8rem;
  }

  /* Nav */
  .nav-logo .wordmark { display: flex; }
  .nav-logo .isotype  { display: none; }
  .nav-hamburger      { display: none; }
  .nav-links          { display: flex; }

  /* Services: 3 columnas */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Nosotros: 2 columnas */
  .nosotros-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
  }

  /* CTA band: horizontal */
  .cta-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
  }

  .cta-actions {
    align-items: flex-end;
  }

  /* Contact: 2 columnas */
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  /* Footer: horizontal */
  .footer-main {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Large desktop — 1200px+ */
@media (min-width: 1200px) {
  :root {
    --pad-x: 8rem;
  }
}

/* Work cards: mostrar nombre siempre en touch (sin hover) */
@media (hover: none) {
  .work-card-info {
    transform: translateY(0);
  }
}

/* Reducir movimiento para usuarios sensibles */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .hero-label,
  .hero-line,
  .hero-sub,
  .hero-ctas,
  .hero-reel-wrap {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero::before { animation: none; }
  .hero::after  { animation: none; }
}