/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */


html {
  min-width: 0px !important;
}

p {
  margin: 0;
}

.single-post p {
  margin: 2rem 0;
}

.formacion .elementor-pagination {
  padding-top: 1rem;
  border-top: solid 1px #808080;
}

.video-card {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;

}

/* Overlay azul abajo */
.video-info {
  top: 0px;
  pointer-events: none;
  /* ¡no bloquea el clic del video! */
}

.franja-horizontal {
  --h: 60%;
  /* alto de la franja respecto al contenedor */
  --bg: rgba(0, 0, 0, .08);
  background: linear-gradient(var(--bg), var(--bg)) center / 100% var(--h) no-repeat;
}

//* Asegurar que nada recorte lo que sacamos fuera */
.video-hero,
.video-hero .elementor-widget-container,
.video-hero .elementor-swiper {
  overflow: visible !important;
  position: relative;
}

/* Paneles laterales por fuera del slider */
.video-hero .elementor-swiper-button {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: clamp(140px, 20vw, 360px);
  /* tamaño del panel */
  background: rgba(0, 0, 0, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
  z-index: 5;
}

/* Los “saco” fuera del carrusel */
.video-hero .elementor-swiper-button-prev {
  left: 0;
  /* pegado al borde del slider */
  transform: translateX(-100%);
  /* fuera, sin tapar la imagen */
}

.video-hero .elementor-swiper-button-next {
  right: 0;
  transform: translateX(100%);
}

/* Tamaño de ícono */
.video-hero .elementor-swiper-button i {
  font-size: clamp(32px, 4vw, 64px);
}

/* Opcional: texto "reproducir" bajo el ícono del play del overlay */
.video-hero .elementor-custom-embed-play i:after {
  content: " reproducir";
  font-size: 16px;
  font-weight: 600;
  margin-left: .4rem;
  vertical-align: middle;
}

/* Tarjeta base */
 .post-card {
  position: relative;
  overflow: hidden;
         /* opcional */
  background-size: 100%;
  background-position: center;
  transition: background-size .5s ease;
  aspect-ratio: 16/9;             /* o quita esto y usa min-height */
}

/* Zoom sutil del fondo al hover */
 .post-card:hover {
  background-size: 108%;
}

/* Contenido (oculto hasta el hover) */
 .post-card__info {
  
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
  z-index: 2; /* por encima del overlay */
/*   pointer-events: none; todo el card clickeable */

}

 .post-card:hover .post-card__info {
  opacity: 1;
  transform: translateY(0);
}


/* CTA "ver galería" con línea y flecha */
 .post-card__info .card-cta {
  margin-top: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  text-transform: lowercase;      /* si querés igual al ejemplo */
  position: relative;
}

 .post-card__info .card-cta::before {
  content: "";
  position: relative;
  top: -1px;
  display: inline-block;
  width: 120px;                   /* largo de la línea */
  height: 2px;
  background: currentColor;
}

 .post-card__info .card-cta::after {
  content: "➜";
  font-size: 1.1em;
  transform: translateX(0);
  transition: transform .25s ease;
}

 .post-card:hover .post-card__info .card-cta::after {
  transform: translateX(4px);
}

/* Responsive fino (opcional) */
@media (max-width: 767px) {
   .post-card { aspect-ratio: 4/3; }
   .post-card .post-card__info { padding: 16px; gap: .35rem; }
}

/* Responsive: paneles más chicos en móvil */
@media (max-width: 767px) {
  .video-hero .elementor-swiper-button {
    width: 18vw;
    background: rgba(0, 0, 0, .06);
  }
}


/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}



/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */

}