/* Fuente personalizada Lazy Dog para el título del hero */
@font-face {
  font-family: 'Lazy Dog';
  src: url('/assets/images/Lazydog.otf') format('opentype'),
       url('/assets/images/lazy_dog.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Aplica la fuente solo al título del header (Neko / Studio) */
.header-title {
  font-family: 'Lazy Dog', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none;
  letter-spacing: normal !important;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* "Neko Studio" en la sección About (primer shadow-text-item) */
.shadow-text-wrapper .shadow-text-item:first-child .shadow-text,
.shadow-text-wrapper .shadow-text-item:first-child .shadow-item {
  font-family: 'Lazy Dog', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none;
  letter-spacing: normal !important;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Clase reutilizable para aplicar Lazy Dog dentro de párrafos */
.font-lazydog {
  font-family: 'Lazy Dog', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none;
  letter-spacing: normal !important;
}

/* Texto en bucle del footer */
.footer .looping-text {
  font-family: 'Lazy Dog', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none;
}

/* CTA del footer: ¿Listo para impulsar tu / marca? */
/* CTA del footer: ¿Listo para impulsar tu / marca? */
.footer .shadow-text-wrapper.center .shadow-text,
.footer .shadow-text-wrapper.center .shadow-item {
  font-family: 'Lazy Dog', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 700 !important; /* Aumenta grosor visual de toda la frase, incluido "¿" */
  font-style: normal !important;
  font-synthesis: weight style; /* permite sintetizar negrita para signos si la fuente no tiene peso */
}

/* Ajuste óptico para el signo de apertura ¿ en Lazy Dog */
/* Eliminado ajuste específico de puntuación; gestionado por negrita sintética */


/* Grid de proyectos: 3 columnas en escritorio cuando se use la variante is-three-cols */
@media (min-width: 992px) {
  .work-content-grid.is-three-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Proyecto Bullpadel: imágenes/vídeo más bajos */
/* Variante vertical: contenedor y media en formato vertical, centrado, acotado */
.image-wrapper.is-vertical {
  display: flex;
  justify-content: center;
  align-items: center;
}

.work-image.is-vertical {
  width: 100%;
  max-width: 520px; /* ancho contenido para vertical */
  aspect-ratio: 9 / 16; /* fuerza formato vertical */
  height: auto;
  max-height: min(80vh, 820px); /* no demasiado alto */
  object-fit: cover; /* recorta suave si excede */
  border-radius: 8px;
}

/* Blur legible detrás del texto de la tarjeta de proyecto */
.work-content-wrapper.is-blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.work-content-wrapper.is-blur .work-text {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Tarjetas destacadas: imagen menos alta */
.work-image.is-short-card {
  max-height: 420px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Color verde para el signo + en estadísticas (verde principal del sitio) */
.plus-green { color: #7aa685 !important; }


/* Cursor personalizado (punto verde) */
@media (pointer: fine) {
  .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #7aa685; /* verde principal del sitio */
    border: 2px solid #000; /* contorno negro para mayor visibilidad */
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 120ms ease;
  }
}

/* Oculta el cursor nativo solo cuando JS habilite la clase */
html.enable-custom-cursor,
html.enable-custom-cursor body,
html.enable-custom-cursor a,
html.enable-custom-cursor button,
html.enable-custom-cursor input,
html.enable-custom-cursor textarea,
html.enable-custom-cursor select {
  cursor: none !important;
}

/* Hover video para el servicio de Fotografía y contenido audiovisual */
#service-audiovisual .service-image-wrap {
  position: relative;
}

#service-audiovisual .service-image-wrap .service-video {
  /* hereda tamaño, posición y border de .service-image */
  opacity: 1;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover video para el servicio de Meta Ads */
#service-metaads .service-image-wrap {
  position: relative;
}

#service-metaads .service-image-wrap .service-video {
  /* hereda tamaño, posición y border de .service-image */
  opacity: 1;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .work-content-wrapper.is-blur {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  background: none !important;
  background-color: transparent !important;
  }

  /* Elimina cualquier blur (incluido el aplicado vía JS inline) en el cursor personalizado dentro de los proyectos */
  .cursor {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Fondo eliminado totalmente en móvil (sin overlay) */

  /* Si hubiese alguna imagen con filtro (defensivo) lo anulamos */
  .work-image, .work-image-wrap {
    filter: none !important;
  }

  /* Servicios móvil: títulos no se corten, permiten wrap */
  .service-title {
    white-space: normal !important; /* anula el nowrap del CSS base */
    font-size: 1.5rem !important; /* más pequeño si es necesario */
    line-height: 1.15 !important; /* compacto pero legible */
  }

  .service-title-wrap {
    height: auto !important; /* no limita altura fija */
    overflow: visible !important; /* muestra todo el contenido */
  }

  .service-content-block {
    align-items: flex-start !important; /* alineación superior para textos multilinea */
    gap: 0.75rem !important;
  }

  .service-subtitle {
    white-space: normal !important; /* subtítulo también puede hacer wrap */
    text-align: center !important;
    padding: 0.375rem 0.75rem !important; /* más compacto */
    font-size: 0.875rem !important;
  }

  /* Oculta los títulos hover en móvil */
  .service-title.hover {
    display: none !important;
  }

  /* Oculta el texto "Desplázate para explorar" en móvil */
  .text-size-regular.no-wrap {
    display: none !important;
  }

  /* Más espacio superior en páginas de proyectos */
  .padding-top.padding-xhuge {
    padding-top: 8rem !important; /* más espacio desde navbar */
  }
}