/* ===============================
   SLIDER: seccion #work (solo aquí)
   =============================== */

/* contenedor fullwidth (mantiene botones posicionados) */
#work .work-slider-container.fullwidth {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 0 1.5rem;
  display: block;
  position: relative; /* <- importante para posicionar flechas */
  z-index: 10;
}

/* viewport del slider */
#work .work-slider {
  position: relative;
  height: 70vh;
  max-height: 820px;
  overflow: hidden; /* fundamental: muestra solo la parte visible */
  background: transparent !important;
  display: block;
}

/* track: fila horizontal de slides */
#work .carousel-track,
#work #trabajo-slides {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  min-width: 0; /* evita que flex cause overflow */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* cada slide: flex-basis se configura dinámicamente desde JS */
#work .slide-item,
#work .card {
  flex: 0 0 auto; /* JS asignará el ancho correcto */
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

/* imagen: centrada, manteniendo proporción y sin recorte */
#work .slide-item img,
#work .card img {
  display: block;
  width: auto;                  /* ancho automático para respetar proporción */
  max-width: 96%;               /* evita tocar bordes laterales */
  height: auto;
  max-height: calc(70vh - 48px);/* evita que la imagen sobrepase la altura del slider */
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
}

/* BOTONES: siempre visibles y fuera del flujo, dentro del contenedor */
#work .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
#work .slider-prev { left: 20px; }
#work .slider-next { right: 20px; }
#work .slider-btn:hover { transform: translateY(-50%) scale(1.03); box-shadow: 0 16px 40px rgba(0,0,0,0.16); }

/* espacio entre título y slider para evitar solapamiento */
#work .section-title {
  position: relative;
  z-index: 20;
  margin-bottom: 1.4rem;
  text-align: center;
  background: none;
}

/* responsive adjustments */
@media (max-width: 1100px) {
  #work .work-slider { height: 60vh; }
  #work .slide-item img { max-height: calc(60vh - 48px); }
  #work .slider-btn { width: 56px; height: 56px; }
}
@media (max-width: 900px) {
  #work .work-slider { height: 52vh; }
  #work .slide-item img { max-height: calc(52vh - 40px); max-width: 92%; }
  #work .slider-btn { width: 48px; height: 48px; left: 12px; right: 12px; }
  #work .slider-prev { left: 12px; }
  #work .slider-next { right: 12px; }
  /* en móvil mostramos solo una slide y ocultamos previews si existieran */
  #work .card.is-left,
  #work .card.is-right { display: none !important; }
}

/* Forzar transparencia solo dentro de #work, por si hay reglas globales conflictivas */
#work .card,
#work .slide-item {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* pequeña ayuda visual si no hay imágenes (estilo placeholder) */
#work .slide-placeholder {
  color: #8b96a6;
  font-size: 16px;
  padding: 1rem;
}

/* ===========================
   SLIDER PREMIUM - SECTION #work
   =========================== */

/* contenedor fullwidth (mantiene botones posicionados) */
#work .work-slider-container.fullwidth {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 0 1.25rem;
  display: block;
  position: relative;
  z-index: 10;
}

/* viewport */
#work .work-slider {
  position: relative;
  height: 70vh;
  max-height: 820px;
  overflow: hidden;
  background: transparent !important;
  display: block;
  -webkit-tap-highlight-color: transparent;
}

/* track: fila horizontal */
#work .carousel-track,
#work #trabajo-slides {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  transition: transform 0.66s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
}

/* slide base */
#work .slide-item,
#work .card {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  background: transparent !important;
  -webkit-backface-visibility: hidden;
}

/* imagen: grande, centrada y sin recorte */
#work .slide-item img,
#work .card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 96%;
  max-height: calc(70vh - 48px);
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
  transition: transform 0.8s cubic-bezier(.22,.61,.36,1), filter 0.6s ease, box-shadow 0.6s ease;
  will-change: transform;
  border-radius: 6px;
}

/* ESTILO VISUAL: slide activo con zoom sutil y sombra */
#work .slide-item.active img,
#work .card.active img {
  transform: scale(1.035) translateY(-6px);
  filter: saturate(1.03) contrast(1.02);
  box-shadow: 0 30px 80px rgba(11,22,40,0.28);
}

/* cuando el track se mueve añadir desvanecimiento leve a las no-activas */
#work .carousel-track.moving .slide-item img {
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1), opacity 0.5s ease;
  opacity: 0.92;
}
#work .carousel-track.moving .slide-item.active img {
  opacity: 1;
}

/* BOTONES: siempre visibles, contraste alto */
#work .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,245,245,0.95));
  color: #0b1220;
  font-weight: 600;
  box-shadow: 0 12px 38px rgba(7,12,26,0.18);
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  opacity: 0.98;
}
#work .slider-prev { left: 20px; }
#work .slider-next { right: 20px; }
#work .slider-btn:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 18px 48px rgba(7,12,26,0.22); }

/* mostrar iconos SVG más grandes dentro del botón */
#work .slider-btn svg { width: 20px; height: 20px; }

/* titulo: separar para que no se solape */
#work .section-title {
  position: relative;
  z-index: 20;
  margin-bottom: 1.6rem;
  text-align: center;
  background: none;
}

/* mobile: hacer imagen más grande, botones visibles y compactos */
@media (max-width: 1100px) {
  #work .work-slider { height: 62vh; }
  #work .slide-item img { max-height: calc(62vh - 40px); max-width: 98%; }
  #work .slider-btn { width: 56px; height: 56px; }
}
@media (max-width: 900px) {
  #work .work-slider { height: 56vh; }
  #work .slide-item img { max-height: calc(56vh - 28px); max-width: 98%; }
  #work .slider-btn { width: 52px; height: 52px; left: 12px; right: 12px; }
  #work .slider-prev { left: 12px; }
  #work .slider-next { right: 12px; }

  /* botón semitransparente y poco intrusivo en móvil */
  #work .slider-btn { background: rgba(255,255,255,0.92); opacity: 0.96; }
}

/* muy pequeño */
@media (max-width: 420px) {
  #work .work-slider { height: 48vh; }
  #work .slide-item img { max-height: calc(48vh - 24px); max-width: 98%; }
  #work .slider-btn { width: 44px; height: 44px; }
}

/* Forzar transparencia solo en #work (no tocar body/html) */
#work .card, #work .slide-item { background: transparent !important; box-shadow: none !important; }

/* tiny helper: ocultar controles si no existen images (opcional) */
#work.no-controls .slider-btn { display: none !important; }