/* =========================================================
   D'ART FILMS — Hoja de estilos
   Negro #1e1e1b · Dorado #edc77c · Blanco #ffffff
   Títulos: Avant Garde Gothic ITC (con Jost como respaldo web)
   Secundaria/cambios de tono: Helvetica Neue Italic
   Enfoque: minimalista, nav/hero originales — con detalles editoriales
   en proyectos (numeración, destacado, hover-preview, cursor "Ver").
   ========================================================= */

:root {
  --negro: #1e1e1b;
  --dorado: #edc77c;
  --dorado-oscuro: #c9a44a;
  --blanco: #ffffff;
  --gris: #7d7b74;
  --gris-claro: #b8b6ac;
  --card: #242420;
  --linea: #2e2e29;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

body {
  background: var(--negro);
  color: var(--blanco);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Tipografías ----------
   Textos importantes: Avant Garde Gothic ITC (Bold/Medium instalada localmente
   por el usuario vía licencia). Si el navegador no la encuentra en el sistema,
   carga 'Jost' desde Google Fonts — geométrica gratuita de proporciones casi
   idénticas (círculos perfectos, misma altura de x), así el estilo se ve igual
   de radical en cualquier dispositivo, no solo en el que tiene la fuente. */
@font-face {
  font-family: 'AvantGarde';
  src: local('ITC Avant Garde Gothic Bold'), local('ITC Avant Garde Gothic Std Bold'),
       local('ITCAvantGardeStd-Bold'), local('ITCAvantGardeStd-Demi'), local('ITCAvantGardeStd-Bd'),
       local('AvantGardeGothicITCbyBT-Bold'), local('Avant Garde Gothic ITC T OC'),
       local('AvantGarde-Bold'), local('Century Gothic Bold'), local('CenturyGothic-Bold');
  font-weight: 700 900;
  font-display: swap;
}
@font-face {
  font-family: 'AvantGardeMedium';
  src: local('ITC Avant Garde Gothic Medium'), local('ITC Avant Garde Gothic Std Medium'),
       local('ITCAvantGardeStd-Md'), local('ITCAvantGardeStd-Medium'),
       local('AvantGardeGothicITCbyBT-Medium'), local('Avant Garde Gothic ITC L OT'),
       local('Century Gothic'), local('CenturyGothic');
  font-weight: 400 600;
  font-display: swap;
}

h1, h2, h3, .display {
  font-family: 'AvantGarde', 'Jost', 'Century Gothic', sans-serif;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.display-light, .display-medium {
  font-family: 'AvantGardeMedium', 'Jost', 'Century Gothic', sans-serif;
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.italic, .secundaria {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 300;
}

/* ---------- Cursor personalizado ---------- */
.cursor {
  position: fixed; width: 10px; height: 10px;
  background: var(--dorado); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, background .3s, border .3s;
  mix-blend-mode: difference;
  display: flex; align-items: center; justify-content: center;
}
.cursor.grande {
  width: 70px; height: 70px;
  background: transparent; border: 1px solid var(--dorado);
}
.cursor-texto {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dorado); font-weight: 600; opacity: 0; transition: opacity .25s;
  white-space: nowrap; font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.cursor.ver .cursor-texto { opacity: 1; }
.cursor.ver { width: 84px; height: 84px; }
@media (hover: none) { body { cursor: auto; } .cursor { display: none; } }

/* ---------- Navegación (minimal, original) ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 32px 40px; z-index: 1000; mix-blend-mode: difference;
}
.logo-img { height: 34px; width: auto; display: block; }
.nav-links { display: flex; gap: 40px; list-style: none; }
.nav-links a {
  color: var(--blanco); text-decoration: none;
  font-family: 'AvantGardeMedium', 'Jost', sans-serif;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; position: relative; transition: opacity .3s;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -5px; left: 0;
  width: 0; height: 1px; background: var(--dorado); transition: width .35s;
}
.nav-links a:hover::after, .nav-links a.activo::after { width: 100%; }
.menu-toggle { display: none; background: none; border: none; color: var(--blanco); font-size: 22px; cursor: none; }

/* ---------- Hero (centrado, original) ---------- */
.hero {
  height: 100vh; position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; overflow: hidden;
}
.hero-video {
  position: absolute; top: 50%; left: 50%;
  min-width: 100%; min-height: 100%; width: auto; height: auto;
  transform: translate(-50%, -50%); z-index: -2; object-fit: cover;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, #1e1e1b44, #1e1e1b88, #1e1e1b);
  z-index: -1;
}
/* Cola del degradado que se prolonga sobre la sección de Proyectos de la home,
   para que la transición del vídeo del hero no corte en seco. */
.hero-cola {
  position: relative; height: 22vh; margin-top: -22vh;
  background: linear-gradient(to bottom, transparent, var(--negro) 85%);
  pointer-events: none; z-index: 1;
}
.hero h1 {
  font-size: clamp(44px, 8.5vw, 130px);
  letter-spacing: 0.02em;
}
.hero h1 .linea { display: block; overflow: hidden; }
.hero h1 .linea span {
  display: block; transform: translateY(105%);
  animation: subir 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero h1 .linea:nth-child(2) span { animation-delay: 0.12s; }
@keyframes subir { to { transform: translateY(0); } }

.hero .tagline {
  margin-top: 28px; font-size: 13px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--dorado);
  opacity: 0; animation: aparecer 1.2s ease forwards; animation-delay: 0.9s;
  font-weight: 500;
}
@keyframes aparecer { to { opacity: 1; } }

.btn-reel {
  margin-top: 44px; display: inline-flex; align-items: center; gap: 12px;
  background: transparent; border: 1px solid var(--dorado); color: var(--blanco);
  padding: 16px 30px; border-radius: 99px; font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 500; cursor: none; transition: all .35s;
  opacity: 0; animation: aparecer 1.2s ease forwards; animation-delay: 1.05s;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.btn-reel:hover { background: var(--dorado); color: var(--negro); }
.btn-reel-icono { font-size: 10px; }

.lightbox {
  position: fixed; inset: 0; z-index: 3000; background: rgba(30,30,27,0.97);
  display: none; align-items: center; justify-content: center; padding: 40px;
}
.lightbox.abierto { display: flex; }
.lightbox-inner { width: 100%; max-width: 1100px; aspect-ratio: 16/9; }
.lightbox-inner iframe { width: 100%; height: 100%; border: none; }
.lightbox-cerrar {
  position: absolute; top: 32px; right: 40px; background: none; border: none;
  color: var(--blanco); font-size: 22px; cursor: none; z-index: 3001;
}

.scroll-indicador {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; animation: aparecer 1s ease forwards; animation-delay: 1.3s;
}
.scroll-indicador span { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gris-claro); }
.scroll-linea { width: 1px; height: 46px; background: linear-gradient(var(--dorado), transparent); animation: pulso 2s ease-in-out infinite; }
@keyframes pulso { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* ---------- Secciones ---------- */
.seccion { padding: 140px 40px; max-width: 1500px; margin: 0 auto; }
.seccion-eyebrow {
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--dorado); margin-bottom: 24px; display: block; font-weight: 500;
}
.seccion-titulo { font-size: clamp(48px, 9vw, 140px); letter-spacing: -0.01em; }
.seccion-titulo-chica {
  font-size: clamp(22px, 2.4vw, 32px); letter-spacing: 0.02em;
  color: var(--gris-claro); font-weight: 500;
  font-family: 'AvantGardeMedium', 'Jost', sans-serif;
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(50px); transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Grid proyectos (Canada x Antiestático: editorial, asimétrico) ---------- */
.grid-proyectos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 70px;
  counter-reset: proyecto;
}
.proyecto-card {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  cursor: none; background: var(--card);
  counter-increment: proyecto;
  transition: transform .25s ease-out;
  will-change: transform;
}
.proyecto-card.destacado { grid-column: 1 / -1; aspect-ratio: 21 / 10; }
.proyecto-card img, .proyecto-card video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(0.16,1,0.3,1), opacity .6s, filter .6s;
  filter: grayscale(55%) brightness(0.85);
}
.proyecto-card video { position: absolute; inset: 0; opacity: 0; }
.proyecto-card .preview-iframe {
  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border: none;
  transform: translate(-50%, -50%) scale(1.5); transform-origin: center;
  z-index: 1; opacity: 0; transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none;
}
.proyecto-card .preview-iframe.activo { opacity: 1; }
.proyecto-card .preview-fundido {
  position: absolute; inset: 0; background: #000; z-index: 2;
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
.proyecto-card .preview-fundido.activo { opacity: 1; }
.proyecto-card:hover img { opacity: 0; }
.proyecto-card:hover video { opacity: 1; }
.proyecto-card:hover img, .proyecto-card:hover video { transform: scale(1.06); filter: grayscale(0%) brightness(1); }
/* En táctil no hay hover que revele la imagen: se muestra siempre a color */
@media (hover: none) {
  .proyecto-card img { filter: none; }
  .proyecto-info h3 { opacity: 1; transform: translateY(0); }
}
.proyecto-info {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 32px;
  background: linear-gradient(to bottom, transparent, var(--negro) 75%, var(--negro) 100%);
  z-index: 3; pointer-events: none;
}
.proyecto-info .cat {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dorado); font-weight: 500; display: flex; align-items: center; gap: 8px;
}
.proyecto-info .cat::before {
  content: counter(proyecto, decimal-leading-zero) ' —';
  color: var(--gris-claro); font-weight: 400;
}
.proyecto-info h3 {
  color: var(--blanco) !important;
  font-size: clamp(24px, 3.4vw, 46px); margin: 10px 0 2px;
  transform: translateY(10px); opacity: 0.88;
  transition: transform .5s cubic-bezier(0.16,1,0.3,1), opacity .5s;
}
.proyecto-card:hover .proyecto-info h3 { transform: translateY(0); opacity: 1; }
.proyecto-info .meta { font-size: 12px; color: var(--gris-claro); font-style: italic; }

/* ---------- Carrusel 3D de destacados (home, estilo Apple) ---------- */
.carrusel-3d-envoltura { margin-top: 30px; position: relative; }
.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(30, 30, 27, 0.55); border: 1px solid var(--linea);
  color: var(--blanco); font-size: 26px; line-height: 1; font-family: sans-serif;
  display: flex; align-items: center; justify-content: center;
  cursor: none; z-index: 20; transition: background .3s, border-color .3s, color .3s;
}
.carrusel-flecha:hover { background: var(--dorado); color: var(--negro); border-color: var(--dorado); }
.carrusel-flecha-izq { left: -10px; }
.carrusel-flecha-der { right: -10px; }
@media (max-width: 1100px) {
  .carrusel-flecha-izq { left: 10px; }
  .carrusel-flecha-der { right: 10px; }
}
@media (max-width: 900px) {
  .carrusel-flecha { display: none; }
}
.carrusel-3d {
  position: relative; height: clamp(360px, 42vw, 580px);
  perspective: 1800px; margin: 0 auto;
}
.carrusel-card {
  position: absolute; top: 50%; left: 50%;
  width: min(60vw, 860px); aspect-ratio: 16 / 10;
  border-radius: 26px; overflow: hidden; cursor: none;
  background: var(--card);
  transition: transform .9s cubic-bezier(0.16, 1, 0.3, 1), opacity .9s ease, filter .9s ease;
  will-change: transform, opacity;
}
.carrusel-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.carrusel-card .preview-iframe {
  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border: none;
  transform: translate(-50%, -50%) scale(1.5); transform-origin: center;
  z-index: 1; opacity: 0; transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none;
}
.carrusel-card .preview-iframe.activo { opacity: 1; }
.carrusel-card .preview-fundido {
  position: absolute; inset: 0; background: #000; z-index: 2;
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
.carrusel-card .preview-fundido.activo { opacity: 1; }
.carrusel-info {
  z-index: 3;
  position: absolute; bottom: 0; left: 0; right: 0; padding: clamp(20px, 3vw, 40px);
  background: linear-gradient(to bottom, transparent, var(--negro) 75%, var(--negro) 100%);
}
.carrusel-info .cat {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dorado); font-weight: 500;
}
.carrusel-info h3 {
  color: var(--blanco); font-size: clamp(20px, 2.6vw, 38px); margin: 8px 0 2px;
}
.carrusel-info .meta { font-size: 12px; color: var(--gris-claro); font-style: italic; }

.carrusel-puntos-home { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.carrusel-puntos-home .punto {
  width: 6px; height: 6px; border-radius: 50%; background: var(--linea);
  cursor: none; transition: all .35s ease;
}
.carrusel-puntos-home .punto.activo { width: 24px; border-radius: 3px; background: var(--dorado); }

@media (max-width: 900px) {
  .carrusel-card { width: min(78vw, 620px); border-radius: 20px; }
  .carrusel-3d { height: clamp(300px, 62vw, 460px); }
}

/* ---------- Enlace editorial (misma pareja tipográfica que "We do it different") ---------- */
.enlace-editorial {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  color: var(--dorado); border-bottom: 1px solid var(--dorado);
  padding-bottom: 4px; transition: opacity .3s;
}
.enlace-editorial:hover { opacity: .65; }
.enlace-editorial .fuerte {
  font-family: 'AvantGarde', 'Jost', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.enlace-editorial .suave {
  font-family: 'Helvetica Neue', Helvetica, sans-serif; font-style: italic; font-weight: 300;
}

/* ---------- Filtros (cortantes, sin píldora) ---------- */
.filtros { display: flex; gap: 28px; margin-top: 50px; flex-wrap: wrap; }
.filtro-btn {
  background: none; border: none; color: var(--gris-claro); position: relative;
  padding: 0 0 8px; font-family: 'AvantGardeMedium', 'Jost', sans-serif;
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: none; transition: color .3s; font-weight: 500;
}
.filtro-btn::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
  background: var(--dorado); transition: width .3s;
}
.filtro-btn:hover, .filtro-btn.activo { color: var(--blanco); }
.filtro-btn.activo::after { width: 100%; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: 60px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin-top: 30px; }
.marquee-track { display: flex; gap: 50px; white-space: nowrap; animation: desplazar 22s linear infinite; }
.marquee-track span {
  font-size: 18px; font-family: 'AvantGardeMedium', 'Jost', sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--gris);
}
.marquee-track span:nth-child(4n+2) { color: var(--dorado); }
@keyframes desplazar { to { transform: translateX(-50%); } }

/* ---------- CTA (bloque dorado sólido — contraste radical) ---------- */
.cta-grande { text-align: center; padding: 180px 40px; background: var(--dorado); color: var(--negro); }
.cta-grande h2 { font-size: clamp(52px, 9vw, 150px); margin-bottom: 36px; color: var(--negro); }
.cta-grande a { color: var(--negro); text-decoration: none; border-bottom: 2px solid var(--negro); transition: opacity .3s; font-style: italic; font-family: 'Helvetica Neue', sans-serif; font-weight: 500; }
.cta-grande a:hover { opacity: .55; }

/* ---------- Formulario ---------- */
.form-contacto { max-width: 620px; margin: 70px auto 0; display: grid; gap: 26px; }
.form-contacto .campo { text-align: left; display: grid; gap: 6px; }
.form-contacto input, .form-contacto textarea, .form-contacto select {
  background: transparent; border: none; border-bottom: 1px solid var(--linea);
  color: var(--blanco); padding: 14px 0; font-size: 16px; font-family: inherit;
  transition: border-color .3s; cursor: none;
}
.form-contacto input:focus, .form-contacto textarea:focus, .form-contacto select:focus { outline: none; border-color: var(--dorado); }
.form-contacto select option { background: var(--negro); }
.form-contacto label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gris); }
.form-contacto button {
  background: var(--dorado); color: var(--negro); border: none; padding: 17px;
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700;
  cursor: none; transition: opacity .3s; margin-top: 12px;
  font-family: 'AvantGarde', 'Jost', 'Century Gothic', sans-serif;
}
.form-contacto button:hover { opacity: .85; }

/* ---------- Proyecto individual ---------- */
.proyecto-hero { height: 75vh; position: relative; display: flex; align-items: flex-end; padding: 60px 40px; overflow: hidden; }
.proyecto-hero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; z-index: 0; }
.proyecto-detalle { max-width: 920px; margin: 0 auto; padding: 90px 40px; }
.proyecto-detalle .cat { color: var(--dorado); letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px; font-weight: 500; }
.proyecto-detalle h1 { font-size: clamp(44px, 8.5vw, 130px); margin: 18px 0; }
.proyecto-detalle .meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 44px 0; padding: 32px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.proyecto-detalle .meta-item .etiqueta { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gris); }
.proyecto-detalle .meta-item .valor { font-size: 18px; margin-top: 8px; font-style: italic; }
.proyecto-detalle .descripcion { font-size: 20px; line-height: 1.8; color: var(--gris-claro); font-style: italic; }
.proyecto-detalle .creditos { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 28px; }
.proyecto-detalle .creditos span { font-size: 13px; color: var(--gris-claro); font-style: italic; }
.proyecto-detalle .creditos strong { color: var(--blanco); font-style: normal; font-weight: 500; }
.volver { display: inline-flex; align-items: center; gap: 8px; color: var(--dorado); text-decoration: none; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 44px; font-weight: 500; }

/* ---------- Footer ---------- */
footer { padding: 70px 40px; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
footer .logo-img { height: 28px; }
footer .social { display: flex; gap: 26px; }
footer .social a { color: var(--gris-claro); text-decoration: none; font-size: 12px; transition: color .3s; letter-spacing: 0.05em; }
footer .social a:hover { color: var(--dorado); }
footer .copy { font-size: 11px; color: var(--gris); width: 100%; text-align: center; margin-top: 20px; letter-spacing: 0.05em; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  nav { padding: 22px 24px; }
  .nav-links { display: none; }
  .nav-links.abierto { display: flex; position: fixed; inset: 0; background: var(--negro); flex-direction: column; justify-content: center; align-items: center; gap: 40px; }
  .nav-links.abierto a { font-size: 22px; }
  .menu-toggle { display: block; z-index: 1001; }
  .seccion { padding: 90px 24px; }
  .grid-proyectos { grid-template-columns: 1fr; }
  .proyecto-detalle .meta-grid { grid-template-columns: 1fr; gap: 20px; }
}