.video-grid-final {
  display: grid;
  gap: 15px; /* Espacio entre videos */
  max-width: 75%;
  margin: 0 auto;
  /* Definimos el mapa visual de la imagen */
  grid-template-areas:
    "v1 s1 v2"
    "v1 s2 v2"
    "s3 h1 h1";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
}

/* Asignamos cada div a su área del mapa */
.area-v1 { grid-area: v1; }
.area-s1 { grid-area: s1; }
.area-v2 { grid-area: v2; }
.area-s2 { grid-area: s2; }
.area-s3 { grid-area: s3; }
.area-h1 { grid-area: h1; }

/* Estilos de los contenedores */
.grid-item {
  position: relative;
  width: 100%;
  height: 100%; /* Forzamos que llene el área del grid */
  overflow: hidden;
  background: #000;
}

/* Proporciones obligatorias para mantener la estética */
.area-v1, .area-v2 { aspect-ratio: 9 / 16; }
.area-s1, .area-s2, .area-s3 { aspect-ratio: 1 / 1; }
/* El horizontal no necesita aspect-ratio fijo, se adaptará a las 2 columnas */

.grid-item video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recorta el video para que no sobren espacios */
  display: block;
}

/* Ajuste Responsivo Celular */
@media (max-width: 768px) {
  .video-grid-final {
    grid-template-areas:
      "v1"
      "s1"
      "v2"
      "s2"
      "s3"
      "h1";
    grid-template-columns: 1fr;
  }
  .grid-item {
    aspect-ratio: 16 / 9 !important; /* Todos horizontales en móvil */
  }
}

.polo-grid-container {
  display: grid;
  /* Definimos 3 columnas de igual ancho */
  grid-template-columns: repeat(3, 1fr);
  /* Definimos las filas para que coincidan con los cruces de la imagen */
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "tl ct rt"
    "bl ct rt"
    "bl cb rt";
  gap: 15px;
  max-width: 75%;
  margin: 20px auto;
}

/* Asignación de áreas */
.area-top-left      { grid-area: tl; aspect-ratio: 4 / 3; }
.area-bottom-left   { grid-area: bl; aspect-ratio: 3 / 4; }
.area-center-top    { grid-area: ct; aspect-ratio: 3 / 4; }
.area-center-bottom { grid-area: cb; aspect-ratio: 4 / 3; }
.area-right-tall    { grid-area: rt; aspect-ratio: 9 / 20; } /* Más alto y delgado */

/* Estilos comunes para que el video no se desfase */
.grid-item {
  position: relative;
  overflow: hidden;
  background-color: #f4f4f4;
}

.grid-item video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Esto corta el video para que llene el área asignada */
  display: block;
}

/* Responsivo para celulares */
@media (max-width: 768px) {
  .polo-grid-container {
    grid-template-areas:
      "tl" "bl" "ct" "cb" "rt";
    grid-template-columns: 1fr;
  }
  .grid-item {
    aspect-ratio: 16 / 9 !important;
  }
}

/* img-hover-wraps */
.img-hover-wrap {
	-webkit-transition: transform .3s ease;
	-o-transition: transform .3s ease;
	transition: transform .3s ease;
	-moz-transform-style: flat !important;
	-webkit-backface-visibility: hidden;
}
.img-hover-wrap:hover {
	-webkit-transform: scale(1.06);
	-ms-transform: scale(1.06);
	-o-transform: scale(1.06);
	transform: scale(1.06);
	z-index: 2;
}
.img-hover-card > a::after {
	content: " ";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 0;
	-webkit-transition: background-color .3s ease;
	-o-transition: background-color .3s ease;
	transition: background-color .3s ease;
}
.img-hover-wrap:hover .img-hover-card > a::after { background-color: rgba(0, 0, 0, 0.6); }
.img-hover-card {
	position: relative;
	display: block;
	will-change: transform;
	transition: all .3s ease;
	box-shadow: 0 10px 40px transparent;
}
.img-hover-card a {
	width: 100%;
	max-width: 100%;
	display: block;
	z-index: 99;
}
.img-hover-card.hover-in {
	transition: -webkit-transform .2s ease-out;
	transition: transform .2s ease-out;
	transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
.img-hover-card.hover-3d { z-index: 2; }
.img-hover-card.hover-out {
	transition: -webkit-transform .2s ease-in;
	transition: transform .2s ease-in;
	transition: transform .2s ease-in, -webkit-transform .2s ease-in;
}
.img-hover-wrap:hover .img-hover-card { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }
.img-hover-wrap .img-hover-detail {
	    display: flex;
    flex-direction: column;
    align-items: flex-end;
	position: absolute;
	top: auto;
	right: 60px;
	top: 20px;
	text-align: end;
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	-webkit-transform: scale(1) translateX(30px) translateZ(50px);
	-ms-transform: scale(1) translateX(30px) translateZ(50px);
	-o-transform: scale(1) translateX(30px) translateZ(50px);
	transform: scale(1) translateX(30px) translateZ(50px);
	-webkit-transition: transform .2s ease;
	-o-transition: transform .2s ease;
	transition: transform .2s ease;
}
.img-hover-wrap:hover .img-hover-detail {
	opacity: 1;
	-webkit-transform: scale(1.06) translateX(-5px) translateZ(50px);
	-ms-transform: scale(1.06) translateX(-5px) translateZ(50px);
	-o-transform: scale(1.06) translateX(-5px) translateZ(50px);
	transform: scale(1.06) translateX(-5px) translateZ(50px);
}
.img-hover-wrap .img-hover-title {
	margin: 0 0 6px 0;
	font-size: 17px;
	font-weight: 600;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	z-index: 9;
}
.img-hover-wrap .img-link {
	opacity: 0;
	width: 20px;
	height: 20px;
	border: 1px solid #FFF;
	border-radius: 50%;
	text-align: center;
	line-height: 18px;
	font-size: 11px;
	-webkit-transition: opacity .3s ease;
	-o-transition: opacity .3s ease;
	transition: opacity .3s ease;
}
.img-hover-wrap:hover .img-link { opacity: 1; }
.img-hover-detail a { color: #FFF; }

.menu-link {
  color: #FFF !important;
}
#header.sticky-header .menu-link {
  color: #000 !important;
}