html { margin-top: 0 !important; }

/* =========================
   Offsets configurables
   ========================= */
:root{
  --main-offset: 197px;   /* alto que se resta al viewport en MAIN */
  --single-offset: 96px;  /* alto que se resta al viewport en SINGLE */
}

/* =========================
   Contenedor base
   ========================= */
.ca-scrollable-container { position: relative; }

/* =========================
   Galería base (drag + inercia vía JS en desktop, nativo en mobile)
   ========================= */
.ca-scrollable-gallery{
  display: flex;
  overflow-x: auto;          /* ← scroll horizontal habilitado */
  overflow-y: hidden;        /* ← sin scroll vertical interno */
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;       /* ← swipe horizontal permitido */
  overscroll-behavior-x: contain;
/*  padding-left: 24px; */ /* JONA */
  outline: none;
  scrollbar-width: none;     /* Firefox: oculta barra */
}
/* @media (min-width: 768px){ .ca-scrollable-gallery{ padding-left: 40px; } } */ /* JONA */
/* @media (min-width: 1025px){ .ca-scrollable-gallery{ padding-left: 80px; } } */ /* JONA */

.ca-scrollable-gallery:active,
.ca-scrollable-gallery.is-dragging{ cursor: grabbing; }

.ca-scrollable-gallery.is-dragging *{ pointer-events: none; } /* evita “click fantasma” en desktop */
.ca-scrollable-gallery::-webkit-scrollbar{ display: none; }

/* =========================
   Alturas por variante (CONTENEDOR)
   ========================= */
/* MAIN (FIX: no matar horizontal) */
.ca-scrollable-gallery.main-carousel{
  height: calc(100svh - var(--main-offset));
  overflow-x: auto;
  overflow-y: hidden;
}

/* SINGLE (FIX: no matar horizontal) */
.ca-scrollable-gallery.single-carousel{
  height: calc(100svh - var(--single-offset)) !important;
  overflow-x: auto;          /* ← clave */
  overflow-y: hidden;
}
@media (min-width: 768px){
  .ca-scrollable-gallery.single-carousel{ height: 100svh !important; }
}

/* =========================
   Celdas
   ========================= */
.carousel-cell{
  flex: 0 0 auto;
  margin-right: 0;
  height: 100%;
  display: grid;
  place-items: center;  /* centra img/video */
  width: auto;
}
@media (min-width: 768px){
  .carousel-cell{ margin-right: 8px; }
}

/* =========================
   Imágenes
   ========================= */
.carousel-cell.post-cell img{
  width: auto !important;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   Videos (altura con SVH)
   ========================= */
.sg-video{
  width: auto !important;           /* mantiene proporción natural */
  object-fit: contain !important;   /* sin recortar ni deformar */
  margin: 0 auto;
  display: block;
  max-width: 100%;                  /* no excede contenedor en desktop */
}

/* Desktop / tablet */
.main-carousel .sg-video{
  height: calc(100svh) !important;
}
.single-carousel .sg-video{
  height: calc(100svh) !important;
}

/* Mobile */
@media (max-width: 767px){
  .main-carousel .sg-video{
    height: calc(100svh - var(--main-offset)) !important;
    width: auto !important;
    max-width: none !important;
  }
  .single-carousel .sg-video{
    height: calc(100svh - var(--single-offset)) !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* =========================
   Enlaces y hover
   ========================= */
.carousel-cell.post-cell .project-link{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.carousel-cell.post-cell .project-link img{ transition: transform 0.3s ease; }
.carousel-cell.post-cell .project-link:hover img{ transform: scale(1.05); }

/* =========================
   Alturas específicas de IMG (como tenías)
   ========================= */
.main-carousel .carousel-cell .project-link img{
  height: calc(100svh - var(--main-offset)) !important;
}
.single-carousel .carousel-cell.post-cell img{
  height: calc(100svh - var(--single-offset)) !important;
}
@media (min-width: 768px){
  .single-carousel .carousel-cell.post-cell img{ height: 100svh !important; }
}

/* =========================
   Template de Elementor (primer slide en SINGLE)
   ========================= */
.single-carousel .sg-cell--template{
  width: 280px;
  max-width: 280px !important;
  height: 100%;
}
@media (min-width: 768px){
  .single-carousel .sg-cell--template{ width: 380px; max-width: 380px !important; }
}
@media (min-width: 1024px){
  .single-carousel .sg-cell--template{ width: 530px; max-width: 530px !important; }
}
.single-carousel .sg-cell--template,
.single-carousel .sg-cell--template > .elementor{
  height: calc(100svh - var(--single-offset)) !important;
}
@media (min-width: 768px){
  .single-carousel .sg-cell--template,
  .single-carousel .sg-cell--template > .elementor{
    height: 100svh !important;
  }
}

/* =========================
   Mobile fixes (<=767px)
   ========================= */
@media (max-width: 767px){

  /* Altura consistente con svh */
  .ca-scrollable-gallery.main-carousel{
    height: calc(100svh - var(--main-offset)) !important;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .ca-scrollable-gallery.single-carousel{
    height: calc(100svh - var(--single-offset)) !important;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* ✅ Clave: permitir vertical del body y mantener horizontal nativo */
  .ca-scrollable-gallery{
    display: flex;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    touch-action: auto !important;
    scroll-behavior: auto;
    min-width: 0; 
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .ca-scrollable-gallery > *{
    flex: 0 0 auto;
    min-width: 0; 
    min-height: 0;
    height: 100%;
  }

  /* Imágenes */
  .carousel-cell.post-cell img{
    height: 100% !important;
    width: auto !important;
    max-width: none;
    object-fit: cover;
    -webkit-transform: translateZ(0);
  }

  /* Videos */
  .sg-video{
    height: 100% !important;
    width: auto !important;
    max-width: none;
    object-fit: contain;
    background: #000;
    -webkit-transform: translateZ(0);
  }

  .single-carousel .sg-cell--template,
  .single-carousel .sg-cell--template > .elementor{
    height: calc(100svh - var(--single-offset)) !important;
  }
}

/* =========================
   Limpiezas defensivas
   ========================= */
.ca-scrollable-gallery img { width: auto; }
.ca-scrollable-gallery video { width: auto; }

.carousel-cell.archive-cell.sg-cell {
  position: relative;
  overflow: hidden;
}

.project-hover {
  position: absolute;
  inset: 0;
  padding: 24px 24px 48px 24px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.55); /* ← fondo oscuro con opacidad */
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (min-width: 768px){
	.project-hover {
	  padding: 32px 32px 48px 32px;		
	}
}
@media (min-width: 1025px){
	.project-hover {
	  padding: 50px 50px 125px 50px;		
	}
}

.carousel-cell.archive-cell.sg-cell img{
    transition: all .5s;
}
.carousel-cell.archive-cell.sg-cell:hover img{
	transform: scale(1.03);
}

.carousel-cell.archive-cell.sg-cell:hover .project-hover {
  opacity: 1;
}

.project-title {
  color: #fff;
  text-align: right;
font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: var(--e-global-typography-primary-font-size);
    font-weight: var(--e-global-typography-primary-font-weight);
    line-height: var(--e-global-typography-primary-line-height);
  text-transform: lowercase;
}