@media (max-width: 768px) {
  #promo-banner {
    font-size: 10px !important;
    padding: 2px 0px 2px 0px !important;
    margin: 0px 0px 0px 0px auto !important;
    max-width: 79% !important;
    text-align: center;
    margin-top: 1px !important;
    margin-bottom: 6px !important;
  }
}

.tabla-container {
  display: grid;
  grid-template-columns: repeat(3, 361px);
  grid-auto-rows: 206px;
  row-gap: 25px; /* separación entre las tarjetas */
  column-gap: 15px;
  justify-content: center; /* centra la grilla */
  padding: 0px; /* padding general */
}

.tabla-more {
  position: relative;
  display: block;
  margin: 0px;
  cursor: pointer;
  flex: 0 0 auto;
}

  .tabla-more img {
    display: block;
    margin: 0;
    padding: 0;
    border: 0px;
    width: 361px !important;
    height: 206px !important; /* o cualquier valor mayor al 100% */
    border: 0.1px solid rgba(88, 88, 88, 0.6);
    object-fit: fill;
  }

  @media (max-width: 768px) {
    .tabla-more img {
      width: 28vw !important; /* 45% del ancho de la pantalla */
      height: auto !important;
    }
  
  .tabla-container {
    display: grid;
    grid-template-columns: repeat(3, 28vw);
    grid-auto-rows: auto;
    row-gap: 15px; /* separación entre las tarjetas */
    column-gap: 15px;
    justify-content: center; /* centra la grilla */
    padding: 0px; /* padding general */
  }
}

.code-overlay {
    position: absolute;
    top: 0; /* Lo pego arriba en lugar de sacarlo afuera con -10px */
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente elegante */
    color: #00e5ff; /* Color celeste neón idéntico al del poster */
    font-weight: 900; /* Extra pesado (Black) */
    font-style: normal;
    text-align: center;
    font-size: 26px; /* Apenas más grande */
    letter-spacing: 1px; /* Un poco de respiro entre letras */
    font-family: 'Montserrat', sans-serif; /* Nueva tipografía */
    line-height: 1.4; 
    padding: 6px 0; /* Un poco más de colchón arriba y abajo */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Sombra para que flote */
  }

  @media (max-width: 768px) {
    .code-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      color: #00e5ff;
      font-weight: 900;
      text-align: center;
      font-size: 12px; /* Ligeramente más grande para mobile */
      letter-spacing: 0.5px;
      font-family: 'Montserrat', sans-serif;
      line-height: 1.4;
      padding: 4px 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
  }
  
  .code-overlay span {
    display: inline-block;
    /* Eliminamos el skewX(-6deg) para que la letra quede recta como en el nuevo diseño */
    transform: none; 
  }
.tabla-more:hover .code-overlay {
  opacity: 1;
  pointer-events: auto;
}


/* HEADER DINÁMICO REEMPLAZO DEL .header DE IMG */
.tema-amg .container {
  /* Nuevo degradado oscuro que se funde con el fondo del body */
  background: linear-gradient(to bottom, #1f1fbd 0%, #08080a 400px, #08080a 100%);
}

/* Fondo específico para AN (tema-an) */
.tema-an .container {
  background: linear-gradient(to bottom, #800808 0%, #08080a 400px, #08080a 100%);
}

/* Fondo específico para SS (tema-ss) */
.tema-ss .container {
  background: linear-gradient(to bottom, #33076d 0%, #08080a 400px, #08080a 100%);
}

.header-divider {
  border: none;
  height: 1px;
  background-color: #afadad; /* gris claro */
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}
.main-header {
  padding: 0px 0 10px 0;
  width: 100%;
  max-width: 1143px;
  margin: 0 0 0 0;
  box-sizing: border-box;
  background-color: black;
}
.main-links {
  background: linear-gradient(to bottom, #4b4b4b, #000000);
  padding: 8px 10px;
  text-align: center;
}

.websites-line {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: #999;
  display: inline-block;
  white-space: nowrap;
}

.websites-line a {
  color: #999;
  text-decoration: none;
  margin: 0 4px;
}

.websites-line a.active {
  color: white;
}

.videos2000 {
  color: rgb(255, 251, 0);
  margin-right: 8px;
}
.tresweb {
  color: fuchsia;
  margin-right: 0px;
  margin-left: 0px;
}

.plus {
  margin: 0 4px;
  color: #888;
}

.main-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.login-btn,
.join-btn {
  background-color: #24a359;
  color: white;
  font-family: 'Montserrat', sans-serif;
  
  padding: 6px 14px;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  font-size: 29px;
  transition: background-color 0.3s ease;
  text-shadow: 1.3px 1.3px 2.2px black;
}

.login-btn:hover {
  background-color: #27ae60;
}

.join-btn {
  background-color: #3498db;
  margin-right: 40px;
}
.login-btn {
   margin-left: 40px;
}

.join-btn:hover {
  background-color: #2980b9;
}
.mobile-buttons {
  display: none;
}

.site-logo {
  max-height: 140px;
  width: auto;
  padding: 0 0 0 30px;
}

.tagline {
  margin: 1px 12px 0 0;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.8px;
  padding: 0px 0px 5px 0px
}

.highlight-orange {
  color: #ff5733;
}

.highlight-yellow {
  color: #f1c40f;
}

.highlight-cream {
  color: #e5dfb7;
}

.highlight-green {
  color: #2ecc71;
}

.categories {
  font-size: 15.5px;
  color: #c7c5c5;
  margin-top: 10px;
  text-align: center;
  font-family:Verdana, Geneva, Tahoma, sans-serif ;
  letter-spacing: 0.2px;
  transform: skewX(-6deg)
}

/* Responsivo */
@media (max-width: 768px) {
  .websites-line {
    font-size: 7.3px;
    white-space: nowrap;
  }
  .websites-line a,
.websites-line .plus {
  margin: 0 0px;
}
.main-links {
  background: linear-gradient(to bottom, #4b4b4b, #000000);
  padding: 2px 0px 5px 0px;
  text-align: center;
}
/* ESTILO GENERAL */
.main-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

/* ESTILOS MOBILE */
@media (max-width: 768px) {
  .main-banner {
    flex-direction: row;       /* 👈 todos en fila */
    justify-content: center;   /* 👈 centrado horizontal */
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .login-btn,
  .join-btn {
    background-color: #24a359;
    color: white;
    padding: 6px 12px;

    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
    text-shadow: 1.2px 1.2px 2.3px black;
    width: auto;
    display: inline-block;
    margin: 0;
  }
  .site-logo {
    order: 2;
    flex: 0 0 auto; 
    max-width: auto;
    height: 65px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: -40px;
    padding-right: 0px;
    display: block;
  }

  .desktop-only {
    display: inline-block !important;
                 /* ⚠️ esto reparte espacio equitativo */
    text-align: center;
  }

  .mobile-buttons {
    display: none !important;
    justify-content: center;
    gap: 10px;
    order: 2;
    margin-top: 10px;
  }

  .login-btn {
    background-color: #24a359;
    order: 1;
    margin-right: 50px;
  }

  .join-btn {
    background-color: #3498db;
    order: 3;
    margin-left: 20px;
    padding: 8px;
  }

  .tagline {
    font-size: 10px;
    margin-left: 10px;
  }

  .categories {
    font-size: 6.8px;
    font-weight: bold;
  }
}
}
.latest-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 38px;
  text-align: left;
  padding: 18px 0px 0px 12px;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

  .update-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 38px;
  text-align: left;
  padding: 18px 0px 0px 12px;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
     .update-title.amg {
       
       }

  .update-title span {
    font-style: normal;
    letter-spacing: 1.1px;
    display: inline-block;
  transform: scaleY(0.95);
  
      }
           .tema-amg .latest-title span {
        color: #fff;
             }
      .tema-an .latest-title span {
        color: #fff;
      }
      .tema-ss .latest-title span {
        color: #fff;
      }
      .tema-amg .update-title span {
        color: #fff;
             }
      .tema-an .update-title span {
        color: #fff;
      }
      .tema-ss .update-title span {
        color: #fff;
      }
       .star-img-1 {
      height: 33px !important;
      width: auto !important;
      vertical-align: baseline !important;
      margin: 0 -6px 0 -1px !important;
      display: inline-block;
      transform: skewX(-6deg);
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
      
    }
  .star-img {
      height: 33px !important;
      width: auto !important;
      vertical-align: baseline !important;
      margin: 0 -6px 0 -5px !important;
      display: inline-block;
      transform: skewX(-6deg);
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
      
    }
    
    @media (max-width: 768px) {
      .latest-title {
    font-family: sans-serif;
    font-weight: 1000;
    font-size: 29px;
    text-align: center;
    padding: 18px 0px 0px 12px;
    transform: skewX(-6deg) scaleY(0.95);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  margin-bottom: -7px;
  margin-top: -13px;
    letter-spacing: 1.1px;
      -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.update-title {
  text-align: left !important;
  font-family: sans-serif;
  font-weight: 1000;
  font-size: 20px;
  padding: 1px 0;
  margin-bottom: -16px;
  margin-top: 6px;
  gap: 10px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.update-title span {
  display: inline-block;
  letter-spacing: 0.2px;
  transform:  scaleY(0.9); /* solo el texto se aplasta */
}
.star-img-1 {
    height: 25px !important;
      width: auto !important;
      vertical-align: baseline !important;
      margin: 0 -3px 0 -3px !important;
      display: inline-block;
      transform: skewX(6deg);
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
.star-img {
  height: 18px !important;
  width: auto !important;
  vertical-align: middle !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  margin: 0 -3px 7px -2px !important;
  display: inline-block;
  transform:  translateY(-4px); /* inclinación opuesta, opcional */
  transform: skewX(6deg);
}
  }

@media (max-width: 768px) {
  .promo-mobile-padding {
    padding-top: 20px !important;    /* Ajustá estos valores a tu gusto */
    padding-bottom: 0px !important;
  }
}

	.iframe-outside-wrapper {
  position: relative;
align-self: center;
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0px 0; 
		margin-top: 15px !important;
    margin-bottom: -50px;
}

.iframe-outside-wrapper iframe {
  width: 100%;
  max-width: 1100px;
  height: 599px;
  display: block;
  margin: 0 auto;
  border: none;
}
	@media (max-width: 768px) {
  .iframe-outside-wrapper {
    margin-bottom: 5px !important;
    margin-top: 20px !important;
    padding-top: 0px !important;
    height: auto !important;
  }

  .iframe-outside-wrapper iframe {
    height: auto !important;
    min-height: 300px; 
    display: block !important;
  }
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  gap: 15px; /* espacio entre iframes */
  padding: 1px;
  row-gap: 1px;  
}
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 1px 1px 1px;
    row-gap: 1px; 
  }
}
.iframe-hover-wrapper2 {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 10px 0; /* menos margen vertical */
  margin-top: 5px !important;
  height: auto;
  transition: transform 0.3s ease;
}

.iframe-hover-wrapper2 iframe {
  width: 98.5%;
  height: 599px;
  border: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  overflow: hidden !important;
  scrolling: no;
}

.iframe-hover-wrapper2:hover {
  transform: scale(1.03);
}
@media (max-width: 768px) {
  .iframe-hover-wrapper2 {
    margin-bottom: 1px !important;
    padding: 0 !important;
    height: auto !important;
  }

  .iframe-hover-wrapper2 iframe {
    height: auto !important;
    min-height: 6px;
    display: block !important;
  }
}
	
.poster-scaler-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}


.poster-scaled {
  transform-origin: top center;
}


@media (max-width: 768px) {
  .poster-scaled {
    transform: scale(0.38);
    width: 2080px; 
    height: 0;
    padding-bottom: calc(380px * 0.48); 
  }
	.poster-scaled img.img1-movil {
    margin-bottom: 9px; 
  }
}



@media (max-width: 768px) {
  .poster-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; 
    overflow: visible;
  }

  .poster-scaler {
    position: absolute;
    top: 0;
    left: 50%;
    transform: scale(0.45) translateX(-50%);
    transform-origin: top center;
  }
}



        
        .texto-ajustable {
            font-size: 24px; 
        }

        
        @media (max-width: 768px) {
            .texto-ajustable {
                font-size: 12.5px; 
            }
        }
    


#modalOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.85) !important;
  display: none; /* Arranca oculto */
  justify-content: center !important;
  align-items: center !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#modalOverlay.active {
  display: flex !important;
}

#modalContent {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 95vw !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background: transparent !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: translate(-7px, 0px) !important;
}
	#posterIframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
	pointer-events: auto;
}
#modalContent img {
  display: block;
  width: 100%;
  height: auto;
}
	#modalContent iframe {
  width: 95vw;
  height: 95vh;
  max-width: 1350px;
  border: none;
  background: transparent;
  z-index: 9999;
  position: relative;
		pointer-events: auto;
}
#modalClose {
  position: absolute;
  top: 20px;
  right: 25px; 
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
}


.clickable {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.clickable:hover {
  transform: scale(1.05);
}



video {
  border-radius: 8px;
  overflow: hidden; /* Importante para que el redondeo funcione con contenido embebido */
  box-shadow: 1px 1px 9px 1px rgba(0, 0, 0, 0.3);
  
}
.video-container {
    position: relative;
    width: 100%;
    display: block;
    padding: 0;
}

.video-container img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    z-index: 1;
}

.video-container video.video-hover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: visibility 0s, opacity 0.3s !important;
    z-index: 2 !important;
}

.video-container:hover video.video-hover {
    visibility: visible !important;
    opacity: 1 !important;
}



 body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    background-color: #0d0d12; /* <--- Nuevo fondo cinemático oscuro */
    transition: visibility 0.3s ease;
}
	  body.ready {
    visibility: visible;
  }
	body.loading .container {
   opacity: 0;
  pointer-events: none;
}
	body.loaded .container {
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: all;
}

body.loading #loader {
  display: flex;
}
    .container {
  width: 100%;
  max-width: 100%; /* <-- Liberamos el límite */
  padding-top: 0px; 
  transition: padding-top 0.1s ease-in-out; 
  box-sizing: border-box;
  overflow-x: hidden; 
}
        @media (max-width: 768px) {
            .container {
                padding-top: 0px; 
            }
        }
       .header {
          position: relative;
		   top: 0;
            width: 100%;
            max-width: 1143px;
            height: auto;
		   z-index: 1000; 
            transition: 0s; 
        }
          .header img {
            width: 100%;
            height: auto;
            display: block;
        }
        .main-content, .second-content, .third-content {
           	width: 100%;
            padding: 1px;
            box-sizing: border-box;
			padding-left: 8px;
			padding-right: 8px;
            text-align: center;
        }
        .main-content img, .second-content img, .third-content img {
            width: 100%;
            height: auto;
        }
		.main-content img {
            max-width: 100%;
        }
		.main-content .mobile-img {
    display: none;
    position: absolute;
}
		.main-content video {
      margin-top: 50px;
            width: auto !important;
            max-width: 640px;
            height: auto !important;
            
        }
        .main-content hr {
            border: 0;
            border-top: 1px solid #000;
            margin: 20px 0;
        }
        .second-content .centered, .third-content .centered {
            display: block;
            margin: 0 auto;
        }
        .second-content .centered-text, .third-content .centered-text {
            text-align: right;
            margin: 0;
            margin-top: -35px;
            margin-right: 15px;
            margin-bottom: 5px;
			font-size: 22px;
			font-family: 'Montserrat', sans-serif;
      font-weight: bold;
    padding: 0px 0px 0px 0px;
}
		.second-content .centered-text2, .third-content .centered-text2 {
            text-align: center;
            margin: 0 auto;
			font-size: 24px;
			font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
        }
        .second-content img.non-clickable, .third-content img.non-clickable {
            cursor: default;
        }
        	.second-content table {
            width: 100%;
            max-width: 100%;
            border-collapse: collapse;
			border-spacing: 0 10px;
			text-align:center;
            margin: 0 auto;
		table-layout: fixed; 
        }
				.third-content table {
            width: 100%;
            max-width: 100%;
            border-collapse: collapse;
			border-spacing: 0 10px;
			text-align:center;
            margin: 0 auto;
		table-layout: fixed; 
        }
        .second-content td, .third-content td {
            padding: 8px;
            box-sizing: border-box;
			   width: auto; 
            height: auto; 
			position:relative;
        }
	@media (max-width: 768px) {
	.second-content td, .third-content td {
            padding: 3px 3px 0px 3px;
            box-sizing: border-box;
			   width: auto; 
            height: auto; 
			position:relative;
        }   
}
         .second-content img.clickable {
            cursor: pointer;
            width: 100%;
            height: auto;
			 margin-bottom: 10px;
		object-fit: cover; 
}
		 .third-content img.clickable {
            cursor: pointer;
            width: 100%;
            height: auto;
			 margin-bottom: 10px;
		object-fit: cover; 
}
		.third-content img.clickable {
            width: 100%;
            height: auto;
        }
        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 2px;
          }
            @media (max-width: 768px) {
            .footer {
              background-color: #707070;
              color: white;
              text-align: center;
              padding: 2px;
              font-size: 10px;
        }
      }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .modal img {
            max-width: 90%;
            max-height: 90%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
   
	#modalClickCatcher {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 10000; 
}
        .second-content .solitary-image, .third-content .solitary-image {
            max-width: 60%;
            width: 100%;
            height: auto;
            margin-bottom: 60px;
        }
        @media (max-width: 768px) {
             .main-content video {
        max-width: 80%; 
        margin-top: 10px;
    }
  
			.second-content td, .third-content td {
             position: relative;
                width: 100%;
            }
            .second-content img, .third-content img {
                max-width: 100%;
                height: auto;
            }
            .second-content img.non-clickable {
                max-width: 70%;
            }
            .second-content .solitary-image, .third-content .solitary-image {
                max-width: 100%;
                height: auto;
             }
            .second-content img.clickable, .third-content img.clickable {
                width: 100%;
                height: auto;
               object-fit: cover;
            }
					img.non-clickable {
    width: 100%; 
    height: auto; 
}


@media (max-width: 768px) {
    img.non-clickable {
        width: 90%; 
        height: auto; 
      }
       img[src="imagenes/joinnowceleste.webp"] {
        width: 50%;   
        height: auto; 
        display: block; 
        margin: 0 auto; 
      }
       table {
        width: 100%;
        border-collapse: collapse;
    }
  }
   
    
    tr {
        margin-bottom: 10px;
        border: 0px solid #ddd;
    }
    td {
        text-align: left;
        padding: 10px;
        position: relative;
    }
    

	@media (max-width: 768px) {  
    .second-content .centered-text, .third-content .centered-text {
    margin-top: -20px;
    margin-bottom: 11px;
    margin-right: 3px;
    
    }  
    .solitary-image.centered {
        width: 95% !important; 
        height: auto; 
        margin: 0 auto; 
    }
  }
  

.video-container {
    position: relative;
    width: 100%; 
    display: block;
}


.video-container img {
    width: 100%; 
    height: auto;
    display: block;
    cursor: pointer;
    z-index: 1;
}


.video-container video.video-hover {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: auto; 
    height: auto; 
    max-width: none; 
    max-height: none; 
    visibility: hidden; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    z-index: 2; 
}


.video-container video.video-hover {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: auto; 
    height: auto; 
    max-width: none; 
    max-height: none; 
    visibility: hidden; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    z-index: 2; 
}


video {
    width: auto !important; 
    height: auto !important;
}


td .video-hover {
    width: auto !important; 
    height: auto !important; 
}
		.video-hover {
    position:absolute; 
    top:50%; 
    left :50%;
	transform :translate(-50%, -50%);
	width:auto!important;height:auto!important;
}
		.br-desktop { 
  display: block;
}

@media (max-width: 768px) { 
  .br-desktop {
    display: none !important;
  }
}
.trailer-imagen {
  width: 100%;
}

@media (max-width: 768px) {
  .trailer-imagen { width: 65% !important; }
  .joinnow-imagen { width: 45% !important; }
  p.centered-text { font-size: 10px !important; }
}
	}
		  .imagen-especial {
    max-width: 72% !important; 
    margin: 0 auto; 
    display: block;
  }
		@media (max-width: 768px) {
		p.centered-text2 {
            font-size: 101px !important;
}
}

			@media (max-width: 768px) {
        #modalContent {
          position: fixed;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 90%; /* opcional, para que no se desborde en móviles */
          max-height: 210px;
        }
      }

    


.poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 20px;
  justify-items: center;
  align-items: center;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

.poster-item {
  width: 100%;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
}
	#modalPrev,
#modalNext {
  position: fixed;
  font-size: 32px;
	color: black;
  background: white;
  border: 2px solid black;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 10011;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modalPrev {
  top: 102%; /* siempre a mitad de pantalla */
  transform: translateY(50%); /* los centra sobre su propio eje */
  transform: translateX(-100%);
}

#modalNext {
  top: 102%; /* siempre a mitad de pantalla */
  transform: translateY(-50%); /* los centra sobre su propio eje */
  transform: translateX(100%);
}
	@media (max-width: 768px) {
  #modalPrev {
    position: fixed;
    top: 38%; /* siempre a mitad de pantalla */
    transform: translate(-80%, 300%); /* los centra sobre su propio eje */
    
  }

  #modalNext {
    position: fixed;
    top: 38%; /* siempre a mitad de pantalla */
    transform: translate(80%, 300%)
 }
}
		.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}
		#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  display: none; 
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #db43d4;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#modalCloseBtn {
  display: none !important; /* Oculta la "X" por completo */
}

#modalCloseBtn:hover {
  background-color: #f0f0f0;
}
@media (max-width: 768px) {
#modalCloseBtn {
  width: 26px;
  height: 26px;
  right: 2px;
  top: -40px;
  display:none;
  }
  }
 .banner-img {
  width: 70% !important;           /* Desktop */
  max-width: 589px; 
  border-radius: 10px; 
  display: block; 
  margin: auto;
}

/* Media Query para Mobile */
@media only screen and (max-width: 600px) {
  .banner-img {
    width: 90% !important;         /* Mobile */
  }
}

#age-verification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#age-verification-box {
  background-color: black;
  color: white;
  max-width: 600px;
  padding: 30px;
  border-radius: 10px;
  font-family: sans-serif;
  text-align: center;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

#age-verification-box button {
  margin: 20px 10px 0;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.2s;
}

#enter-button {
  background-color: #00cc66;
  color: black;
}

#exit-button {
  background-color: #cc0000;
  color: white;
}

#enter-button:hover {
  background-color: #00e676;
}

#exit-button:hover {
  background-color: #e60000;
}

#promo-banner-valentine {
  transition: box-shadow 0.01s ease;
}

#promo-banner-valentine:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  #promo-banner-valentine {
    font-size: 10px !important;
    padding: 6px 4px !important;
    max-width: 95% !important;
    margin-top: -10px !important;
    margin-bottom: 8px !important;
    background: #fffbea;
    border: 2px solid #D4AF37;
  }
}

@media (max-width: 600px) {
  .mi-texto {
      font-size: 10px !important;
      padding-top: 5px !important;
  }
}
/* DISEÑO NATIVO SIN IFRAMES */
.native-poster {
  container-type: inline-size; 
  position: relative;
  
  /* ACÁ CONTROLÁS EL TAMAÑO: Bajalo de 100% a lo que más te guste */
  width: 95%; 
  
  /* Esto asegura que al ser más chico, siga quedando centrado en su columna */
  margin: 0 auto 25px auto; 

  aspect-ratio: 16 / 9; 
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  cursor: pointer;
  background-color: #000;
  transition: transform 0.3s ease;
  margin-bottom: 60px;
  margin-top: 20px;
}

.native-poster:hover {
  transform: scale(1.03); /* Efecto zoom general */
}

.native-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.native-name {
  font-family: 'Playball', sans-serif;
  color: #da3546;
  font-weight: 500;
  position: absolute;
  top: -1cqi;
  left: 1.5cqi;
  z-index: 2;
  font-size: 7.6cqi; /* En vez de 52px, es el 7.6% del ancho de la foto */
  text-shadow: 1px 1px 1.5px rgba(0, 0, 0, 1.4);
  transform: scaleX(1.05) skew(-5deg);
  margin-top: 2px;
}

.native-title {
  position: absolute;
  bottom: 1cqi;
  left: 1.5cqi;
  color: white;
  z-index: 2;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 1.5px 1.5px 5px rgba(0, 0, 0, 1);
  line-height: 1.1;
  letter-spacing: 0.7px;
  text-align: left;
}

.native-top-right {
  position: absolute;
  top: 1.5cqi;
  right: 1.5cqi;
  text-align: right;
  z-index: 2;
}

.native-code {
  font-family: 'Roboto', sans-serif;
  color: #1282e1;
  font-weight: 800;
  font-size: 4.7cqi; 
  text-shadow: 1px 1px 1.5px rgba(0, 0, 0, 1.2);
  line-height: 1;
  margin-bottom: 0.5cqi;
}

.native-date {
  font-family: 'Roboto', sans-serif;
  color: white;
  font-weight: 500;
  font-size: 3.5cqi; 
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1.2);
}

@media (max-width: 768px) {
  .native-poster {
    width: 98%; /* Para que en celular ocupe casi toda la columna */
    margin-bottom: 6px; /* <-- AIRE EXCLUSIVO PARA MOBILE */
  }
}
/* --- DISEÑO DEL MODAL NATIVO (Adiós Iframe) --- */
#modal-poster-native {
  container-type: inline-size;
  width: 95vw;
  max-width: 1080px;
  background-color: transparent;
  cursor: default; /* Evita que el cursor cambie al pasar sobre el póster */
  pointer-events: auto;

}

.mp-container {
  width: 100%;
  background-color: #FFF;
  border: 2px solid #000;
  box-shadow: 1px 1px 9px 1px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 0.5cqi;
  display: flex;
  flex-direction: column;
}

.mp-header {
  display: flex;
  justify-content: space-between;
  align-items: center; 
  width: 100%;
margin-top: 1px !important;    /* Lo sube un poquito más si hace falta */
    margin-bottom: 2px !important;   /* Reduce el espacio entre el header y las fotos de abajo */
    padding: 0 !important;
  }

.mp-name {
  font-family: 'Playball', sans-serif;
  font-size: 5.5cqi;
  color: #da3546;
  font-weight: 500;
  transform: scaleX(1.1) translateX(1.2cqi) skew(-5deg); 
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  margin-top: -0.5cqi;
  margin-bottom: -0.5cqi;
}

.mp-title-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mp-title {
  position: relative; /* <-- Necesario para poder empujarlo */
  left: 2.8cqi;       /* <-- El equivalente exacto a los 30px de tu diseño original */
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 1px;
  transform: scaleY(0.95);
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.mp-code-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 0.5cqi;
}

.mp-code {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 3.1cqi;
  color: #207ed5;
  font-weight: 700;
  transform-origin: right center; 
  transform: scaleY(0.9);
  margin-bottom: 0;
  margin-right: -2px; /* <-- Lo ponemos en 0 para que quede perfectamente alineado con la info */
  padding-right: 0;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#mp-info {
  display: flex;
  justify-content: flex-end; /* <-- ESTO FUERZA LA ALINEACIÓN TOTAL A LA DERECHA */
  width: 100%;
  gap: 0.5cqi;
  font-size: 1.7cqi;
  font-family: 'Roboto', sans-serif;
  font-weight: 450;
  color: #000;
  margin-top: 0.8cqi;
}

.mp-main {
  display: flex;
  justify-content: center;
  gap: 1cqi;
  width: 100%;
  margin-top: 0.5cqi;
  margin-bottom: 0; /* <-- Le sacamos el margen inferior que empujaba al footer hacia abajo */
}

.mp-left { 
  width: 31.8%; /* La achicamos un micro-milímetro */
  display: flex; 
  flex-direction: column; 
  gap: 0.6cqi; /* <-- Redujimos el espacio entre las dos fotos para "subir" la de abajo */
}

.mp-right { 
  width: 65.4%; /* <-- La hacemos crecer un chiquitín para que baje su borde inferior */
  display: flex; 
  flex-direction: column; 
}

.mp-main img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 2px solid #000;
  cursor: pointer;
  /* NUEVO: Arrancan totalmente invisibles para evitar el ícono de foto rota */
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

/* Cuando la foto cargó, se hace visible suavemente */
.mp-main img.img-loaded {
  opacity: 1;

}

.mp-footer {
  font-family: 'Roboto', sans-serif;
  font-size: 3.3cqi;
  font-weight: 900; 
  color: #cd2e82;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  text-align: center;
  transform: skewX(-6deg) scaleY(0.9);
  
  /* ACÁ AJUSTAMOS EL AIRE ARRIBA Y ABAJO */
  margin-top: 0.6cqi; /* Lo acerca hacia las fotos */
  margin-bottom: 0.2cqi; /* Lo acerca hacia el borde inferior de la caja blanca */
  
  -webkit-font-smoothing: antialiased;
}

.mp-footer a { 
  color: inherit; 
  text-decoration: none; 
}
@media (max-width: 768px) {
  /* Le quitamos la sombra a todos los textos del modal nativo en celular */
  .mp-name, 
  .mp-title, 
  .mp-code, 
  #mp-info, 
  .mp-footer {
    text-shadow: 0.5x 0.5px 0.1px rgba(0, 0, 0, 0.4);
  }
}
/* ==========================================================
     ESTILOS EXCLUSIVOS PARA MOBILE (Modal Poster Nativo)
   ========================================================== */
@media (max-width: 768px) {

  /* 1. Contenedor general del modal en el celular */
  #modal-poster-native {
    width: 96vw !important;
    max-width: 100% !important;
  }

  .mp-container {
    padding: 5px !important;
    border-radius: 6px !important;
  }

  /* 2. Cabecera (Nombre, Título y Código) */
  .mp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: -1px !important;    /* Lo sube un poquito más si hace falta */
    margin-bottom: -1px !important;   /* Reduce el espacio entre el header y las fotos de abajo */
    padding: 0 !important;
  }

  /* Nombre de la modelo (Ej: Loly, etc.) */
  .mp-name {
    font-size: 5.5vw !important; /* Ajustá este valor si lo querés más grande/chico */
    transform: scaleX(1.05) translateX(2px) skew(-5deg) !important;
    margin-bottom: 1px !important;
    text-shadow: 0.8px 0.8px 1.5px rgba(0, 0, 0, 0.8);
    
  }

  /* Título central del póster */
  .mp-title {
      position: relative;
      top: 0;
      left: 10px;
      color: rgb(0, 0, 0);
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      text-align: center;
      white-space: pre-line;
      line-height: 1.05;
      letter-spacing: 0.7px;
      display: inline-block;
      text-transform: uppercase;
      z-index: 10;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

  /* Bloque derecho: Código y Fecha/Duración */
  .mp-code-block {
    margin-right: 2px !important;
  }

  .mp-code {
    font-size: 4vw !important; /* Tamaño del código (ej: AMG-1192) */
    transform: scaleY(0.9) !important;
    margin-bottom: 2px !important;
    text-shadow:none!important;
  }

  #mp-info {
    font-size: 2.5vw !important; /* Tamaño de fecha y duración */
    gap: 4px !important;
    margin-top: 0 !important;
    text-shadow:none !important;
  }

  /* 3. Zona de Fotos (Las 3 imágenes) */
  .mp-main {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .mp-left {
    width: 32% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; /* Espacio entre las dos fotos chicas de la izquierda */
  }

  .mp-right {
    width: 67.5% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .mp-main img {
    border: 1px solid #000 !important;
    border-radius: 1px !important;
  }

  /* 4. Footer (Join Now) */
  .mp-footer {
    font-size: 3.8vw !important; /* Tamaño del texto de abajo en celular */
    margin-top: 0px !important;
    margin-bottom: -1px !important;
  }

}
@media (max-width: 768px) {
  /* Le quitamos la sombra a todos los textos del modal nativo en celular */
  .mp-name, 
  .mp-footer {
    text-shadow: 0.4px 0.4px 0.7px rgba(0, 0, 0, 0.6);
  }
  .native-name {
  font-family: 'Playball', sans-serif;
  color: #da3546;
  font-weight: 500;
  position: absolute;
  top: -1cqi;
  left: 1.5cqi;
  z-index: 2;
  font-size: 7.6cqi; /* En vez de 52px, es el 7.6% del ancho de la foto */
  text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 1.4);
  transform: scaleX(1.05) skew(-5deg);
  margin-top: 2px;
}
  .native-title {
  position: absolute;
  bottom: 1.5cqi;
  left: 1.5cqi;
  color: white;
  z-index: 2;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  text-shadow: 1.5px 1.5px 5px rgba(0, 0, 0, 1);
  line-height: 0.6;
  letter-spacing: 0.7px;
  text-align: left;
}
.native-code {
  font-family: 'Roboto', sans-serif;
  color: #1282e1;
  font-weight: 800;
  font-size: 4.7cqi; 
   text-shadow: 0.4px 0.4px 0.5px rgba(0, 0, 0, 0.9);
  line-height: 1;
  margin-bottom: 0.5cqi;
}

.native-date {
  font-family: 'Roboto', sans-serif;
  color: white;
  font-weight: 500;
  font-size: 3.5cqi; 
  text-shadow: 0.4px 0.4px 0.5px rgba(0, 0, 0, 0.9);
}

 @media (max-width: 768px) {
  /* Contenedor de los botones de navegación debajo del póster */
  #iframeNavButtons {
    position: relative !important;
    bottom: auto !important;
    margin-top: 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important; /* Espacio entre la flecha izquierda y derecha */
    width: 100% !important;
    z-index: 10011 !important;
  }

  /* Limpiamos las flechas para que usen diseño estático y no desborden la pantalla */
  #modalPrev,
  #modalNext {
    position: static !important;
    transform: none !important;
    font-size: 28px !important;
    color: black !important;
    background: white !important;
    border: 2px solid black !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
  }
} 
}
/* --- BOTÓN SHUFFLE (Tu diseño original exacto) --- */
.shuffle-btn-basic {
  background: #ff0055;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  transition: all 0.2s;
}

.shuffle-btn-basic .dice-icon {
  font-size: 20px;
}

/* --- ACHIQUE PARA MOBILE --- */
@media (max-width: 768px) {
  .shuffle-btn-basic {
    padding: 5px 10px;       /* Menos relleno */
    font-size: 12px;         /* Texto más chico */
    border-radius: 6px;      /* Bordes más cerrados */
    gap: 5px; 
    margin-right: -10px;               /* Menos espacio entre dado y texto */
  }
  
  .shuffle-btn-basic .dice-icon {
    font-size: 15px;         /* Dado más chico */
  }
}
/* =====================================================
   STICKY HEADER BAR (Scroll)
   ===================================================== */
#sticky-header-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 1143px;
  background-color: #000000;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.85);
  z-index: 999999;
  box-sizing: border-box;
  padding: 12px 16px;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

#sticky-header-bar.visible {
  transform: translateY(0);
}

.sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  gap: 12px;
}

/* Botones en la barra sticky (desktop y pantallas intermedias) */
#sticky-header-bar .login-btn,
#sticky-header-bar .join-btn {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  font-size: clamp(14px, 1.6vw, 24px) !important;
  padding: 6px 14px !important;
  flex-shrink: 0;
}

#sticky-header-bar .tagline {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  font-size: 1.25rem; /* <-- Acá le ponés un valor fijo (ej: 1.25rem o 20px) */
  white-space: nowrap;
  flex-shrink: 1;
}

/* Mobile vertical Y Mobile en posición horizontal (altura <= 500px o ancho <= 768px) */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
  #sticky-header-bar {
    width: 100%;
    max-width: 100%;
    padding: 6px 10px;
  }

  .sticky-inner {
    gap: 6px;
  }

  #sticky-header-bar .tagline {
    font-size: clamp(0.55rem, 1.8vw, 0.75rem);
    white-space: normal;
    line-height: 1.15;
    margin: 0 4px !important;
    order: 2 !important;
  }

  #sticky-header-bar .login-btn,
  #sticky-header-bar .join-btn {
    padding: 5px 9px !important;
    font-size: 11px !important;
    flex-shrink: 0;
  }

  #sticky-header-bar .login-btn {
    order: 1 !important;
  }

  #sticky-header-bar .join-btn {
    order: 3 !important;
  }
}
/* 1. En PC: Ocultamos el nuevo póster móvil */
.iframe-outside-wrapper iframe.poster-mobile {
  display: none !important;
}

/* 2. En celulares: Ocultamos el viejo y mostramos el nuevo */
@media (max-width: 768px) {
  .iframe-outside-wrapper iframe.poster-desktop {
    display: none !important;
  }
  
  .iframe-outside-wrapper iframe.poster-mobile {
    display: block !important;
  }
}
/* Nuevo layout para la sección principal en Desktop */
@media (min-width: 769px) {
  #main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
  }

  /* El título sigue arriba de todo ocupando el 100% */
  .latest-title {
    width: 100%;
    text-align: center; /* Según tu boceto, ahora va a la izquierda */
  }

  /* El póster (iframe) toma el 55% del espacio */
  .iframe-outside-wrapper {
    width: 55%; 
    margin: 0 !important; 
  }

  /* El video toma el 40% restante */
  #main-content video {
    width: 40% !important;
    max-width: none; /* Quitamos tu max-width anterior */
    margin-top: 0;
    align-self: center; /* Lo centra verticalmente con el póster */
  }
}

@media (min-width: 769px) {
  /* RECENT UPDATES: 3 Columnas */
  .grid-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    padding: 0 20px;
  }

  /* MORE UPDATES: 4 Columnas, flexibles para llenar el monitor */
  .tabla-container {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 20px !important;
    padding: 0 20px;
  }

  /* Las imágenes de More Updates ahora son fluidas */
  .tabla-more img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9; /* Mantiene la proporción perfecta */
  }
}
.texto-y-shuffle {
  text-align: right;
  margin-right: 15px;
}
.texto-y-shuffle button {
  margin-top: 10px;
  margin-bottom: 10px;
}
@media (min-width: 769px) {
  /* 1. Liberamos el contenedor para que el fondo llegue a las puntas */
  .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important; 
    padding-right: 0 !important;
  }
  
  /* El header y la barra superior se expanden a todo el monitor */
  .main-header, 
  #sticky-header-bar {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 30px !important; /* Margen interno para que el logo no pegue en el borde */
    padding-right: 30px !important;
  }
  
  .main-banner {
    width: 100% !important;
  }

  /* Le damos el aire a los costados a las secciones de contenido */
  #main-content, 
  .second-content, 
  .third-content {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* 2. Alineación del Layout principal */
#main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: flex-start; 
    column-gap: 75px; /* <--- Cambiamos 'gap' por 'column-gap' */
    margin-left: -50px;
  }

.latest-title {
    width: 100%;
    text-align: left !important; /* 👈 Cambiá de center a left */
    padding-left: 50px !important;
    padding-top: 40px !important;
    margin-bottom: 10px;
    margin-top: -20px;
  }

.iframe-outside-wrapper {
    flex: 1 1 55% !important; /* Bajamos apenas la fuerza del ancho */
    max-width: 805px !important; /* El punto intermedio exacto */
    min-width: 500px !important; 
  margin-bottom: 70px!important; 
    }

/* El nuevo bloque asume la posición y el empuje hacia arriba que tenía el video */
  .bloque-derecho {
    margin-top: -80px !important; 
    margin-left: 0 !important;
  }

  /* El video mantiene su tamaño gigante intacto sin achicarse */
  .bloque-derecho video {
    width: 640px !important;       
    height: 360px !important;
    display: block !important;
    margin: 0 !important;
  }

  /* El texto ahora sí respeta al video y se queda pegado abajo */
  .texto-bajo-video {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 21px !important;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-top: 10px !important; /* Separación justita con el reproductor */
    margin-bottom: 0 !important;
    letter-spacing: 0.5px;
  }

  /* RECENT UPDATES: 3 Columnas */
  .grid-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    padding: 0 !important;
  }

  /* MORE UPDATES: 4 Columnas flexibles */
  .tabla-container {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 20px !important;
    padding: 0 !important;
  }

  .tabla-more img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
}
/* Subir la sección de RECENT UPDATES para achicar el hueco fantasma */
  .second-content {
    margin-top: -50px !important; /* <--- Jugá con este número */
  }
  
  /* Opcional: Ocultar los saltos de línea extra que estaban en el HTML */
  .second-content > br {
    display: none !important;
  }
  /* Texto y botón Shuffle en la misma línea */
  .texto-y-shuffle {
    display: flex;
    justify-content: flex-end; /* Tira ambos elementos hacia la derecha */
    align-items: center;       /* Los centra verticalmente entre sí */
    gap: 15px;                 /* El espacio exacto entre el texto y el botón */
    margin-top: -50px;         /* Sube todo a la altura del título MORE UPDATES */
    margin-bottom: 10px;
    margin-right: 0;
    position: relative;
    z-index: 10;
  }
  
  .texto-y-shuffle .centered-text {
    margin: 0 !important;      /* Mata el margen negativo viejo del texto */
  }
  
  .texto-y-shuffle button {
    margin: 0 !important;      /* Mata los márgenes móviles del botón */
  }
  /* 1. Le pisamos el margen SOLO al banner de abajo */
  .third-content .solitary-image {
    margin-bottom: 50px !important; /* <--- Achicá este número para pegarlo más */
  }

  /* 2. Ocultamos los saltos de línea invisibles que están antes del footer */
  .third-content + br,
  .third-content + br + .br-desktop {
    display: none !important;
  }
  
  /* ==========================================================
 /* ==========================================================
   AJUSTES PARA DESKTOP VERTICAL (Pantallas entre 769px y 1305px)
   ========================================================== */
@media (min-width: 769px) and (max-width: 1305px) {
  
  #main-content {
    justify-content: center !important; 
  }
  
  .iframe-outside-wrapper {
    flex: 1 1 100% !important; 
    max-width: 100% !important;
    /* 1. Anulamos los 70px de margen inferior y le damos negativo para chupar el hueco del iframe */
    margin-bottom: -5px !important; 
  }

  .bloque-derecho {
    /* 2. Anulamos los 120px heredados y lo subimos a la fuerza para pegarlo al póster */
    margin-top: -30px !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centra el video horizontalmente */
  }

  #main-content video {
    margin-top: 0 !important; 
    margin-left: 0 !important;
  }
  
  .second-content {
    /* Mantiene "Recent Updates" a buena distancia del tráiler */
    margin-top: 30px !important; 
  }

  /* 2. Recent Updates: 2 columnas en vez de 3, y limitamos a 8 videos */
  .grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-container > div:nth-child(9) {
    display: none !important; /* Oculta el noveno póster para que quede parejo */
  }

  /* 3. Agrandar los botones Big Promo en esta vista */
  .second-content .solitary-image, 
  .third-content .solitary-image {
    max-width: 85% !important; 
  }

  /* 4. More Updates: Texto a la derecha en la misma línea, botón abajo centrado */
  .texto-y-shuffle {
    display: block !important; 
    margin-top: -38px !important; 
  }
  
  .texto-y-shuffle .centered-text {
    text-align: left !important;
    margin-right: 20px !important; 
    margin-left: 10px !important;
    margin-bottom: -25px !important;
    margin-top: 35px !important;
  }
  
 .texto-y-shuffle button {
    margin-right: 2px !important; 
    margin-left: 10px !important;
    margin-bottom: 2px !important;
    margin-top: -50px !important; 
    width: fit-content !important; 
    position: relative !important;
    top: -15px !important; 
  }
  /* 👇 AGREGAR ESTE BLOQUE ACÁ ADENTRO 👇 */
  .iframe-outside-wrapper iframe {
    height: 700px !important; /* Altura suficiente para que entre el póster nuevo sin scroll */
    min-height: 700px !important;
    overflow: hidden !important;
  }
  /* ☝️ -------------------------------- ☝️ */
  
}
    /* ==========================================================
   NUEVO HEADER DESKTOP (Logo Izq - Texto Centro - Botones Der)
   ========================================================== */

/* 1. Clases de utilidad para separar Desktop de Mobile sin romper nada */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 769px) {
  .mobile-only { display: none !important; }

  /* 2. Ajustes de la barra superior negra */
  .websites-line {
    white-space: normal !important; /* Permite que el texto baje de renglón si la pantalla es chica */
    line-height: 1.8 !important;
  }
  .categories-top {
    font-size: 13px;
    color: #c7c5c5;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    letter-spacing: 0.2px;
    margin-left: 5px;
  }

  /* 3. Layout del Header Principal (Las 3 columnas) */
/* Fila de Logo al Centro y Botones a la Derecha */
 /* Contenedor principal que centra todo el bloque del header */
  .main-banner {
    display: flex !important;
    justify-content: center !important; /* Mueve todo el bloque al centro de la pantalla */
    align-items: center !important;
    padding: 10px 40px !important; 
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Sub-grupo que junta el logo y los botones en fila con separación */
  .header-center-group {
    display: flex;
    align-items: center;
    gap: 50px; /* <--- ACÁ CONTROLAR EL ESPACIO: Distancia entre el logo y los botones */
  }

  /* El logo con su tamaño natural */
  .site-logo {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Contenedor de los dos botones juntos */
  .desktop-buttons {
    display: flex;
    gap: 15px; /* Distancia entre LOGIN y JOIN NOW */
    align-items: center;
  }

  .desktop-buttons .login-btn,
  .desktop-buttons .join-btn {
    margin: 0 !important; 
  
    }}
/* 1. Convertimos la barra negra en un Flexbox Izquierda-Derecha */
/* 2. Fila de Barra Negra */
  .main-links {
    display: flex !important;
    justify-content: space-between !important; 
    align-items: center !important;
    padding: 8px 40px !important; 
    background: #000000 !important; /* <--- Esto mata el degradado gris y lo deja negro sólido */
  }
  
  /* 2. Ajuste del texto 100% INDEPENDENT en la barra negra */
  .top-tagline {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important; /* Lo igualamos al tamaño de los links para que se vea armónico */
    text-align: left !important;
  }

  /* 3. Aseguramos que los links queden anclados a la derecha */
  .websites-line {
    margin: 0 !important;
    text-align: right !important;
  }
  /* ==========================================================
  /* ==========================================================
     HEADER UNIFICADO (Textura DSLR + Centro Agrupado)
     ========================================================== */
  
  .header-unified-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    /* ACÁ AGREGÁS TU TEXTURA: Cambiá "textura.jpg" por el nombre de tu archivo */
    background: #000 url('imagenes/textura.jpg') center/cover !important; 
    padding: 15px 30px !important;
    width: 100% !important;
    box-sizing: border-box;
    border-bottom: 2px solid #333; /* Un bordecito sutil para cerrar la textura */
  }

  .header-side-block {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .text-left-block { justify-content: flex-start; }
  .text-right-block { justify-content: flex-end; }

  /* CENTRO: Logo y Textos juntos */
  .header-center-block {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 35px; /* <--- Esto es la distancia entre el logo y los textos de 3 websites */
  }

  .site-logo {
    max-height: 140px !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Textos de los 3 sitios (ahora alineados a la izquierda porque están al lado del logo) */
  .websites-stacked {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px; /* Un poco más sutil para no competir tanto con el logo */
    color: #ccc;
    text-align: left !important; /* <--- Clave: alineado a la izquierda */
    line-height: 1.5;
  }

  .websites-stacked a {
    display: block;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
  }

  .websites-stacked a:hover { color: #fff; }
  .websites-stacked a.active { color: white; }

  /* DERECHA: Botones apilados uno arriba del otro */
  .stacked-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espacio vertical entre los botones */
  }

  /* Gemelos idénticos */
  .stacked-buttons .login-btn,
  .stacked-buttons .join-btn {
    width: 180px !important; /* Ancho fijo para ambos */
    text-align: center !important; 
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: 24px !important; /* Achicamos a 24px para que entre perfecto en el ancho */
    border-radius: 6px !important; /* Bordes un poco más modernos */
  }
  .filmmaking-img {
    max-height: 110px; /* Ajustá este valor si la querés más grande o más chica */
    width: auto;
    display: block;
    margin: 0;
  }

/* Contenedor del título (Alineado a la Izquierda) */
  .latest-title-row {
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
    
    width: 100%;
    margin-top: -20px;
  margin-left:10px;
    margin-bottom: 10px;
  }
 
  .latest-title-row .latest-title {
    width: auto !important;
    margin: 0 !important; 
  }
  /* ==========================================================
     TEXTO DEBAJO DEL TRAILER
     ========================================================== */
.texto-bajo-video {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px !important;
  font-weight: 800;
  padding-top: 1px !important;
  color: #ffffff; 
  text-align: center; 
  width: 720px !important; /* 👈 ESTE ES EL CULPABLE */
  letter-spacing: -0.5px;
}
  /* BLINDAJE ABSOLUTO DEL VIDEO PARA DESKTOP */
  .bloque-derecho #video {
    width: 720px !important;
    height: 405px !important;    
    object-fit: cover !important; /* Elimina cualquier borde o fondo blanco raro */
    background-color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 3px !important; /* Mantiene tu diseño de bordes */
    box-shadow: 1px 1px 9px 1px rgba(0, 0, 0, 0.3) !important; /* Mantiene tu diseño de sombra */
  }

  /* Aseguramos que la columna no lo aplaste */
/* 1. Mantiene el blindaje intacto SOLO para Desktop Horizontal (monitores anchos) */
  @media (min-width: 1306px) {
    .bloque-derecho {
      margin-top: 100px !important; 
      display: block !important;
    }
  }

  /* 2. Control de la distancia al póster SOLO para Desktop Vertical (monitores medianos) */
  @media (min-width: 769px) and (max-width: 1305px) {
    .bloque-derecho {
      margin-top: 20px !important; /* 👈 AHORA SÍ TE VA A OBEDECER. Jugá con este número (-50px, -80px) hasta que se pegue al póster */
    }
  }
  .texto-bajo-video .subtexto-color {
  color: #ff3366 !important; /* 👈 Cambiá este código por el color que prefieras */
}