html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge antiguo */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.cuadrocontenido {
padding-top: 35px;
}
.menuflotante {
  position: fixed;
  top: -4px;
  z-index: 12;
  width: 100%;
  padding-right: 10px;
}

.justifed-derecha {
    justify-content: space-between;
}


.vixualslider {

}

.vixualslider .slider {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  border-radius: 25px;
  margin-bottom: 30px;
}

.vixualslider .slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  height: 100%;
}

.vixualslider .slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  background: #000;
}

.vixualslider .indicators {
    position: relative;
    top: -54px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.vixualslider .indicator {
  width: 40px;
  height: 8px;
  border-radius: 4px;
  background: #777;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

.vixualslider .indicator.active {
  width: 60px;
  height: 10px;
  background: #555;
}

.vixualslider .indicator .progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #ffffff;
  transition: none;
}

.vixualslider .indicator.active .progress {
  transition: width linear;
}

.vixualslider .fondodegradado {
  position: absolute;
  top: 0;
  left: 46%;
  width: 54%;
  height: 100%;
  background: linear-gradient(83deg, rgb(0, 0, 0), #00000000);
  z-index: 1;
}
.videoslider{
      width: 50%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0px;
    right: 0px;
}

.boxtextoslider{
width: 50%;
    height: 100%;
    position: absolute;
    left: 0px;
    background: #000000;
    z-index: 9;
}

.boxtextoslider .cajatexto {
    width: 100%;
    position: absolute;
    left: 36px;
    top: 50px;
}

.boxtextoslider .cajatexto h3{
    font-weight: 700;
}

.boxtextoslider .cajatexto p{
font-weight: normal;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #ababab;
}

.boxtextoslider .cajatexto .botonir{
    width: auto;
    height: auto;
    background: #fff;
    color: #000;
    border-radius: 30px;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 30px 5px 30px;
    text-decoration: none;
}

.boxtextoslider .cajatexto .puntaje {
    display: flex;
    position: absolute;
    top: -20px;
    right: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #ff9610;
    line-height: 24px;
}

.boxtextoslider .cajatexto .puntaje svg{
margin-left: 5px;
}

/* slider 3d */
.slider3d {

}
.swiper-container {
  position: relative;
  top: -65px;
  width: 100%;
  /* padding-top: 50px; */
  padding-bottom: 50px;
}

.slider3d .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 320px;
  background-color: #fff;
  overflow: hidden;
  border-radius: 8px;
}

.slider3d .picture {
  width: 420px;
  height: 420px;
  overflow: hidden;
}
.slider3d .picture img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
     z-index: -1;
}

.slider3d .detail {
  padding: 25px 20px;
  font-weight: 600;
  text-align: center;
  background: #ffffff00;
  backdrop-filter: blur(0px);
}
.slider3d .detail h3 {
  margin: 0;
  font-size: 20px;
}
.slider3d .detail span {
  display: block;
  font-size: 16px;
  color: #f44336;
}

.slider3d .swiper-container-3d .swiper-slide-shadow-right{
  position: relative;
}

.slider3d .picture video {
  position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* cubre todo el card */
    border-radius: inherit; /* respeta bordes redondeados */
    display: block;
}


.slider3d .vixualblur-card {
  background-color: oklch(97.913% 0.00011 271.152 / 0.7); /* mismo color pero con transparencia */
  backdrop-filter: blur(20px); /* ajusta el nivel de blur */
  -webkit-backdrop-filter: blur(20px); /* para Safari */
  border: 1px solid rgba(255, 255, 255, 0.2); /* borde sutil */
  border-radius: 16px; /* esquinas redondeadas como la interfaz */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* sombra suave */
}

.after\:bg-\[color-mix\(in_oklch\,_var\(--color-background\)\,_var\(--color-foreground\)_2\%\)\] {
    &::after {
        @supports (color: color-mix(in lab,red,red)) {
            background-color: color-mix(in oklch, var(--color-background), var(--color-foreground) 2%) !important;
            backdrop-filter: blur(1px);
        }
    }
}

/* mis colores */
.textocolor-menu{
  color: #000 !important;
}

.dark .textocolor-menu{
  color: #fff !important;
}

.textblacocolor-menu{
  color: #ffffffcc !important;
}

.group{
  background: transparent !important;
}

.tu-recuadro-clase {
  background-color: #ffffff12;
  backdrop-filter: blur(4px);            /* Blur fuerte y real */
  -webkit-backdrop-filter: blur(24px);    /* Para Safari */
  border-radius: 24px;                    /* Opcional, bordes redondeados */
  box-shadow: 0 8px 32px 0 rgba(51, 53, 71, 0.37); /* Sombra suave */
  border: 1px solid rgba(255, 255, 255, 0.075);          /* Borde sutil */
  margin-top: 25px;
  margin-right: 25px;
}

#bg1-upload {
  display: block;
  opacity: 1;
  position: static;
  z-index: 10;
}
/* Puedes poner esto en stylevixual.css */
body.custom-bg-active,
body.custom-bg-active .rubick,
body.custom-bg-active .cuadrocontenido,
body.custom-bg-active .content {
  background: transparent !important;
  background-color: transparent !important;
}

/* Estilis de menu abajo */
.Barramenudown { 
  background: linear-gradient(359deg, rgb(0 0 0 / 50%), transparent);
  backdrop-filter: blur(17px);
  position: fixed;
  display: flex;
  bottom: 0px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-around;
  z-index: 11;
}

.Barramenudown svg {
  width: 35px;
  height: 35px;

}

/* Estilos específicos para la barra inferior */
.bottom-bar {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

/* Asegura que el contenido principal no quede oculto detrás de la barra inferior */
.cuadrocontenido {
    padding-bottom: 80px; /* Espacio para la barra inferior */
}

/* Media queries para responsividad */
@media (min-width: 1024px) {
    .bottom-bar {
        display: none; /* Ocultar en desktop si ya hay menú lateral */
    }
    .cuadrocontenido {
        padding-bottom: 0; /* Quitar padding en desktop */
    }
}

@media (max-width: 1023px) {
    .side-menu {
        display: none; /* Ocultar menú lateral en móvil si prefieres */
    }
}


/* Fin de menu abajo */


.menuabajo {

}

.menuabajo .wrapper {
  width: 100%;
  min-height: 100vh;
  background: #ddeef7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menuabajo .icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  /* color: red; */
  /* stroke-width: 0;
  stroke: currentColor;
  fill: currentColor; */
}

.menuabajo .navbar {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  box-shadow: 0px 20px 40px rgba(18, 34, 64, 0.1);
  border-radius: 30px;
  position: relative;
  gap: 15px;
}
.menuabajo .navbar:after {
  content: "";
  width: 120px;
  /* background: #d9e0ea; */
  position: absolute;
  bottom: 8px;
  left: 50%;
  height: 3px;
  transform: translatex(-50%);
  opacity: 0.7;
}
.menuabajo .navbar__item {
  width: 45px;
  height: 45px;
  position: relative;
  cursor: pointer;
  padding: 10px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
.menuabajo .navbar__item::before, .navbar__item:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: currentColor;
  border-radius: 50%;
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.55s cubic-bezier(0.71, 0.03, 0.23, 0.95);
}
.menuabajo .navbar__item::after {
  box-shadow: 0 7px 15px currentColor;
}
.menuabajo .navbar__item.-blue {
  color: #ffffff;
}
.menuabajo .navbar__item.-orange {
  color: #ffffff;
}
.menuabajo .navbar__item.-navy-blue {
  color: #ffffff;
}
.menuabajo .navbar__item.-yellow {
  color: #ffffff;
}
.menuabajo .navbar__item.-purple {
  color: #ffffff;
}
.menuabajo .navbar__item:hover::before, .menuabajo .navbar__item:hover::after {
  transform: translateY(-35px) scale(1.1);
}
.menuabajo .navbar__item:hover::before {
  opacity: 1;
}
.menuabajo .navbar__item:hover::after {
  opacity: 0.4;
}
.menuabajo .navbar__item:hover .navbar__icon {
  transform: translateY(-37px) scale(1.25);
  color: #00000071;
  transition-delay: 0.1s, 0.1s;
}
.menuabajo .navbar__icon {
  transition: all 0.5s cubic-bezier(0.71, 0.03, 0.23, 0.95);
  transition-delay: 0.1s;
  display: inline-block;
  position: relative;
  z-index: 2;
}

.icon-menuarriba svg {

  width: 25px;
  height: 25px;
}


.logocentro  {
 margin-left: 0px !important;
    background: #ffffff1a;
    width: 100%;
    padding: 8px 6px 7px 4px;
    border-radius: 12px; 
}

.iconolaterales {
    width: 30px !important;
    height: 30px !important;
    color: #ffffffcc !important;
  }

  
.cardnormal {
    /* display: flex;
    position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
    justify-content: space-around;
	 */
}
.cardnormal .base-template__wrapper { 
  max-width: 1221px; 
  justify-self: center;
}
.cardnormal .base-template__text { margin-bottom: 60px; }

/* Swiper base */
.cardnormal .swiper { -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; }

.cardnormal .emotions-slider {
  --color-gray: #b3b3b3;
  --backdrop-filter: blur(7px);
  --color-gray-dark: #00000033;
  padding-inline: 20px; /* reduced padding so we can fit 6 on desktop */
  position: relative;
}

/* Slide container */
.cardnormal .emotions-slider__slide {
  display: flex;
  align-items: center;
  min-height: 450px; /* enough height for poster + info */
}

/* Ensure swiper-slide centers the poster card */
.cardnormal .swiper-slide {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: auto !important;
  box-sizing: border-box !important;
  /* IMPORTANT: allow Swiper to lay out slides with fixed widths */
  flex: 0 0 auto !important;
}

/* -------------------------
   Navigation (kept simple)
   ------------------------- */
.cardnormal .slider-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

.cardnormal .slider-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 48px;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.cardnormal .slider-nav__item.disabled { cursor: default; opacity: 0.5; }
.cardnormal .slider-nav__item path { stroke: currentColor; }

@media screen and (max-width: 767.9px) {
  .slider-nav { display: none; }
}

/* -------------------------
   Pagination dots
   ------------------------- */
.cardnormal .slider-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 28px;
  z-index: 2;
}

.cardnormal .slider-pagination__item {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #fff;
  transition: all 0.3s ease-out;
  opacity: 0.25;
}

.cardnormal .slider-pagination__item.active {
  width: 30px;
  opacity: 1;
}

/* -------------------------
   Poster card (emotions-slider-item)
   ------------------------- */
.cardnormal .emotions-slider-item {
  --border-radius: 10px;
  background: var(--color-gray-dark);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  color: #fff;
  /* Default width (desktop) - Swiper will layout slides based on this width */
  width: 220px;
  max-width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  transform-origin: center;
}

/* Poster image area keeps 2:3 aspect ratio (portrait poster) */
.cardnormal .emotions-slider-item__image {
  aspect-ratio: 2 / 3;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #111;
}
/* Video card */
.emotions-slider-item__image video {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* rellena sin franjas negras */
    display: block;
     /* 👇 Esto es clave */
  /* transform: none !important;
  will-change: auto !important; */
}

.cardnormal .emotions-slider-item__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Content area below poster */
.cardnormal .emotions-slider-item__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.1));
}

/* Header and footer – always visible */
.cardnormal .emotions-slider-item__header,
.cardnormal .emotions-slider-item__footer {
  max-height: none !important;
  overflow: visible !important;
  transition: none !important;
}

/* Header inner layout */
.cardnormal .emotions-slider-item__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Price & author */
.cardnormal .emotions-slider-item__price { font-weight: 600; font-size: 16px; }
.cardnormal .emotions-slider-item__author { display: flex; align-items: center; gap: 8px; }
.cardnormal .emotions-slider-item__author-image { flex-shrink: 0; aspect-ratio: 1; width: 14px; border-radius: 50%; overflow: hidden; }
.cardnormal .emotions-slider-item__author-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cardnormal .emotions-slider-item__author-name { font-size: 13px; color: var(--color-gray); }

/* Title and text */
.cardnormal .emotions-slider-item__title { font-weight: 600; font-size: 16px; margin: 0 0 4px 0; }
.cardnormal .emotions-slider-item__text { font-weight: 300; font-size: 14px; line-height: 1.3; opacity: 0.8; }

/* title armando  */
.cardnormal .emotions-slider-item__title2 {
    
    background-color: rgba(255, 255, 255, 0.103);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    height: auto;
    width: auto;
    padding: 4px;
}

/* Tittle3 armando */
.cardnormal .emotions-slider-item__info {
    
   display: flex
;
    gap: 9px;
}

/* Footer / View More button */
.cardnormal .emotions-slider-item__footer { display:flex; align-items:center; justify-content:flex-start; padding-top: 6px; }
.cardnormal .emotions-slider-item__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 8px;
  color: #fff;
  text-decoration: none;
  padding: 6px 8px;
  background: transparent;
}

.cardnormal .emotions-slider-item__btn-text2 {
    background-color: #ffffff24;
    border-radius: 7px;
}

.cardnormal .emotions-slider-item__btn-icon {
  flex-shrink: 0;
  display: block;
  aspect-ratio: 1;
  width: 18px;
  position: relative;
  overflow: hidden;
}

.cardnormal .emotions-slider-item__btn-icon::before,
.cardnormal .emotions-slider-item__btn-icon::after {
  content: \"\";
  display: block;
  width: 100%;
  height: 100%;
  background: url(\"https://bato-web-agency.github.io/bato-shared/img/slider-1/icon-btn-arrow.svg\") center center no-repeat;
  background-size: 100%;
}

/* -------------------------
   Responsive widths (important)
   ------------------------- */

/* MOBILE: show large poster, 1.1 - 1.2 slides visible */
@media screen and (max-width: 479px) {
  .emotions-slider { padding-inline: 16px; }
  .cardnormal .emotions-slider__slide { min-height: 420px; }
  .cardnormal .emotions-slider-item { width: calc(86vw); max-width: 360px; }
  .cardnormal .emotions-slider-item__content { padding: 12px; }
  .cardnormal .emotions-slider-item__price { font-size: 15px; }
  .cardnormal .emotions-slider-item__title { font-size: 18px; }
}

/* SMALL TABLET */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .cardnormal .emotions-slider { padding-inline: 20px; }
  .cardnormal .emotions-slider-item { width: calc(46vw); max-width: 300px; }
  .cardnormal .emotions-slider__slide { min-height: 470px; }
}

/* TABLET / LAPTOP */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .cardnormal .emotions-slider-item { width: 250px; max-width: 250px; }
  .cardnormal .emotions-slider__slide { min-height: 480px; }
}

/* DESKTOP: target for 6 per row */
@media screen and (min-width: 1024px) {
  .cardnormal .emotions-slider { padding-inline: 40px; }
  .cardnormal .emotions-slider-item { width: 300px; max-width: 400px; }
  .cardnormal .emotions-slider__slide { min-height: 520px; }
}


/* make sure inactive slides have full footer/header visible (override) */
.cardnormal .emotions-slider__slide:not(.swiper-slide-active) .emotions-slider-item__header,
.cardnormal .emotions-slider__slide:not(.swiper-slide-active) .emotions-slider-item__footer {
  max-height: none !important;
  overflow: visible !important;
}

.progressbar{

}

.progressbar .progress {
  background: rgba(255,255,255,0.1);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding: 0 5px;
  display: flex;
  height: 12px;
  width: 100px;
}

.progressbar .progress-value {
  animation: load 3s normal forwards;
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #fff;
  height: 8px;
  width: 0;
}

@keyframes load {
  0% { width: 0; }
  100% { width: 38%; }
}

/* PRUEBA */

/* silder nuevo agregar sala */
:root {
	--tst: bottom 0.5s ease 0s;
	--dark: #E6E6E6EE;
}
.createcard {
	
}

.createcard .swiper {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}

.createcard .swiper-slide {
	background-position: center;
	background-size: cover;
	width: 400px;
	height: 500px;
	border-radius: 10px;
	overflow: hidden;
}

.createcard .swiper-container-3d .swiper-slide-shadow-left {
	background-image: linear-gradient(to left, #000, #fff0);
	border-right: 1px solid #000;
	border-radius: 10px;
}

.createcard .swiper-container-3d .swiper-slide-shadow-right {
	background-image: linear-gradient(to right, #000, #fff0);
	box-shadow: 0 0 0 1px #000;
	border-radius: 10px;
}

.createcard .swiper-pagination-bullet {
	background: #696969;
	transition: all 0.5s ease 0s;
	border-radius: 8px;
}

.createcard .swiper-pagination-bullet-active {
	background: #ffc107;
	width: 30px;
}

.createcard .info {
	position: absolute;
	/*bottom: -1px;*/
	width: calc(100% + 2px);
	height: calc(50% + 2px);
	text-align: center;
	background: linear-gradient(180deg, #fff0 0, #0008 50px), linear-gradient(180deg, #fff0 , #0009);
	padding: 15px;
	padding-top: 31px;
	left: calc(-100% - 3px);
	left: 0;
	bottom: calc(-100% - 3px);
	box-sizing: border-box;
	transition: var(--tst);
}

.createcard .swiper-slide-active .info {
	bottom: 0;
	transition: var(--tst);
}

.createcard .info span {
	width: 100%;
	margin: 0.25em 0 0.25em 0;
	display: inline-block;
	padding: 0.55em 0.5em 0.55em 4em;
	box-sizing: border-box;
	color: var(--dark);
	text-align: left;
	position: relative;
	text-transform: uppercase;
	font-size: 12px;
	/*mix-blend-mode: color-burn;*/
	border-radius: 2em;
}

.createcard .info span:hover {
	/*mix-blend-mode: luminosity;*/
	background: #0008;
	filter: invert(1);
}

.createcard .info span:before,
.createcard .info span:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	background: #fff8;
	height: 100%;
	max-width: 2em;
}

/*climber 1*/
.createcard .info span:nth-child(1):before {
	background: radial-gradient(
		circle at 50% 50%,
		var(--dark) 2px,
		#fff0 3px 150%
	);
	width: 7px;
	height: 6px;
	border-radius: 100% 100% 100% 40%;
	left: 16px;
	top: 2px;
	border: 3px solid var(--dark);
	border-top-color: #fff0;
	background-repeat: no-repeat;
	transform: rotate(29deg);
}

.createcard .info span:nth-child(1):after {
	background: linear-gradient(180deg, var(--dark) 1px, #fff0 1px 150%);
	width: 4px;
	height: 7px;
	border-radius: 100% 50% 100% 0%;
	left: 15px;
	top: 13px;
	border: 3px solid var(--dark);
	border-bottom-color: #fff0;
	background-repeat: no-repeat;
	transform: rotate(-1deg);
}

/*photo 2*/
.createcard .info span:nth-child(2):before {
	background: radial-gradient(
		circle at 50% 42%,
		var(--dark) 2px,
		#fff0 3px 4px,
		var(--dark) 5px 100%
	);
	width: 20px;
	height: 13px;
	left: 11px;
	top: 8px;
	border-radius: 2px;
}

.createcard .info span:nth-child(2):after {
	border: 10px solid #fff0;
	border-width: 0px 2px 4px 2px;
	border-bottom-color: var(--dark);
	width: 10px;
	background: #fff0;
	height: 0px;
	left: 14px;
	top: 5px;
}

/*route 3*/
.createcard .info span:nth-child(3):before {
	width: 22px;
	height: 22px;
	left: 11px;
	top: 3px;
	background: radial-gradient(circle at 60% 50%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 37% 70%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 52% 64%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 45% 42%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 49% 25%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(circle at 61% 15%, var(--dark) 1px, #fff0 2px 100%),
		radial-gradient(
			circle at 18% 84%,
			#fff0 1px,
			var(--dark) 2px 3px,
			#fff0 4px 100%
		),
		radial-gradient(
			circle at 85% 16%,
			#fff0 1px,
			var(--dark) 2px 3px,
			#fff0 4px 100%
		);
}

/*sector 4*/
.createcard .info span:nth-child(4):before {
	border: 10px solid #fff0;
	height: 0;
	border-bottom-color: var(--dark);
	border-width: 0 6px 10px 6px;
	left: 12px;
	top: 10px;
	background: #fff0;
}

.createcard .info span:nth-child(4):after {
	border: 10px solid #fff0;
	height: 0;
	border-bottom-color: var(--dark);
	border-width: 0 6px 15px 6px;
	left: 18px;
	top: 5px;
	background: #fff0;
}

/*zone 5*/
.createcard .info span:nth-child(5):before {
	width: 16px;
	height: 16px;
	border-radius: 100%;
	left: 13px;
	top: 3px;
	background: radial-gradient(
		circle at 50% 50%,
		var(--dark) 2px,
		#fff0 3px 4px,
		var(--dark) 5px 100%
	);
}

.createcard .info span:nth-child(5):after {
	border: 10px solid #fff0;
	height: 0;
	border-top-color: var(--dark);
	border-width: 8px 6px 0 6px;
	left: 15px;
	top: 16px;
	background: #fff0;
}

.tamanocrearsalabox{
  width: 85%;
}

.base-crearsal-letra {
  text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.fullscreen-button {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    padding: 10px 15px;
    font-size: 16px;
    background-color: #00000066;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#bg1-upload {
    border: 2px dashed #ccc;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: border-color 0.3s;
}
#bg1-upload:hover {
    border-color: #888;
}

#remove-bg-btn {
    width: 115px;
    height: 31px;
    background-color: #85858573;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: background-color 0.3s;
}
#remove-bg-btn:hover {
    background-color: #24242448;
}

/* Si deseas dar estilo al contenedor */
.personalizar-fondo {
    background: #f9fafb;
    border: 1px solid #e2e8f0;
    padding: 1rem;
    border-radius: 0.5rem;
}

        /* ==================== ESTILOS ENCAPSULADOS PARA GLASS NAV ==================== */
        .glass-nav-container * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .glass-nav-container {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            position: relative;
        }

        /* Floating Background Elements */
        .glass-nav-container .floating-elements {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .glass-nav-container .floating-circle {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            animation: glass-float 6s ease-in-out infinite;
        }

        .glass-nav-container .floating-circle:nth-child(1) {
            width: 80px;
            height: 80px;
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .glass-nav-container .floating-circle:nth-child(2) {
            width: 120px;
            height: 120px;
            top: 60%;
            right: 15%;
            animation-delay: 2s;
        }

        .glass-nav-container .floating-circle:nth-child(3) {
            width: 60px;
            height: 60px;
            bottom: 20%;
            left: 20%;
            animation-delay: 4s;
        }

        @keyframes glass-float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        /* ==================== ADVANCED NAVIGATION BAR ==================== */
        .glass-nav-container .navbar-container {
            position: fixed;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            width: calc(100% - 60px);
            max-width: 1050px;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .glass-nav-container .navbar {
            margin-top: -12px;
            width: 90%;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 0px -12px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                0 20px 40px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
        }

        .glass-nav-container .navbar::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.1), 
                transparent);
            transition: left 0.8s ease;
        }

        .glass-nav-container .navbar:hover::before {
            left: 100%;
        }

        .glass-nav-container .navbar:hover {
            transform: translateY(-2px);
            box-shadow:
                0 25px 50px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        /* ==================== LOGO FIJO FUERA DEL MENU ==================== */
        .site-logo-fixed {
            position: fixed;
            top: 22px;
            left: 30px;
            z-index: 25;
            display: flex;
            align-items: center;
            text-decoration: none;
            color: white;
        }

        .site-logo-fixed svg {
            display: block;
        }

        /* ==================== LOGO SECTION ==================== */
        .glass-nav-container .navbar-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: white;
            font-weight: 700;
            font-size: 1.4rem;
            z-index: 2;
            position: relative;
        }

        .glass-nav-container .logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .glass-nav-container .logo-icon::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            animation: glass-logo-pulse 2s ease-in-out infinite;
        }

        @keyframes glass-logo-pulse {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.2); opacity: 1; }
        }

        .glass-nav-container .brand-text {
            font-size: 16px;
            background: linear-gradient(135deg, #ffffff, #f0f0f0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* ==================== NAVIGATION LINKS ==================== */
        .glass-nav-container .navbar-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            list-style: none;
            z-index: 2;
            position: relative;
        }

        /* Desktop navigation styles */
        @media (min-width: 993px) {
            .glass-nav-container .navbar-nav {
                display: flex !important;
                position: static !important;
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
                background: none !important;
                border: none !important;
                padding: 0 !important;
                box-shadow: none !important;
                flex-direction: row !important;
            }
        }

        .glass-nav-container .nav-item {
            position: relative;
        }

        .glass-nav-container .nav-link {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 16px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            font-size: 0.78rem;
            border-radius: 25px;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
            white-space: nowrap;
        }
        .glass-nav-container .hora-link {
            backdrop-filter: blur(2px);
            border-radius: 38px;
            background-color: #fafafa00;
            font-size: 0.7rem;          /* Tamaño legible pero compacto */
            font-weight: 400;
            color: #cfd8dc;             /* Gris suave para integrarse visualmente */
            display: flex;
            align-items: center;
            gap: 0.4rem;                /* Espacio entre icono y texto */
            padding-left: 0.8rem;       /* Espacio desde el borde izquierdo */
            padding-right: 0.8rem;      /* Espacio desde el Search */
        }

        .glass-nav-container .nav-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            border-radius: 25px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .glass-nav-container .nav-link:hover::before {
            opacity: 1;
        }

        .glass-nav-container .nav-link:hover {
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .glass-nav-container .nav-link.active {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
            color: white;
            box-shadow: 
                inset 0 1px 0 rgba(255, 255, 255, 0.3),
                0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .glass-nav-container .nav-icon {
            width: 16px;
            height: 16px;
            fill: currentColor;
            transition: transform 0.3s ease;
        }

        .glass-nav-container .nav-link:hover .nav-icon {
            transform: scale(1.1);
        }

        /* ==================== CTA BUTTON ==================== */
        .glass-nav-container .cta-button {
            background: linear-gradient(135deg, #c39c2696, #00000024);
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 25px;
            font-weight: 600;
            font-size: 0.9rem;
            box-shadow: 0 8px 20px rgba(121, 121, 121, 0.3);
            transition: all 0.3s ease;
            white-space: nowrap;
            margin-left: 5px;
        }

        .glass-nav-container .cta-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(117, 117, 117, 0.4);
        }

        /* ==================== MOBILE MENU TOGGLE ==================== */
        .glass-nav-container .mobile-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            z-index: 1001;
            position: relative;
            flex-shrink: 0;
        }

        .glass-nav-container .mobile-toggle:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.1);
        }

        .glass-nav-container .hamburger {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 24px;
            height: 18px;
            justify-content: center;
        }

        .glass-nav-container .hamburger span {
            width: 24px;
            height: 2px;
            background: white;
            border-radius: 2px;
            transition: all 0.3s ease;
            display: block;
        }

        .glass-nav-container .mobile-toggle.active .hamburger span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }

        .glass-nav-container .mobile-toggle.active .hamburger span:nth-child(2) {
            opacity: 0;
            transform: translateX(-20px);
        }

        .glass-nav-container .mobile-toggle.active .hamburger span:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }

        /* ==================== MOBILE RESPONSIVE ==================== */
        @media (max-width: 992px) {
            .glass-nav-container .navbar-container {
                top: 20px;
                width: calc(100% - 30px);
            }

            .glass-nav-container .navbar {
                padding: 12px 20px;
                position: relative;
            }

            .glass-nav-container .mobile-toggle {
                display: flex !important;
                align-items: center;
                justify-content: center;
            }

            /* Hide desktop navigation on mobile */
            .glass-nav-container .navbar-nav {
                display: none;
            }

            .glass-nav-container .brand-text {
                font-size: 1.2rem;
            }
        }

        /* Mobile Menu Overlay */
        .glass-nav-container .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            z-index: 1500;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .glass-nav-container .mobile-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Mobile Menu Container */
        .glass-nav-container .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            z-index: 1600;
            transform: translateY(-100%);
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow-y: auto;
        }

        .glass-nav-container .mobile-menu.active {
            transform: translateY(0);
        }

        /* Mobile Menu Header */
        .glass-nav-container .mobile-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 30px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .glass-nav-container .mobile-menu-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: white;
            font-weight: 700;
            font-size: 1.4rem;
        }

        .glass-nav-container .mobile-menu-close {
            background: none;
            border: none;
            color: white;
            font-size: 2rem;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
        }

        .glass-nav-container .mobile-menu-close:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.1);
        }

        /* Mobile Menu Navigation */
        .glass-nav-container .mobile-menu-nav {
            padding: 40px 30px;
            list-style: none;
        }

        .glass-nav-container .mobile-menu-item {
            margin-bottom: 8px;
        }

        .glass-nav-container .mobile-menu-link {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 20px 24px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            font-size: 1.1rem;
            border-radius: 20px;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 12px;
        }

        .glass-nav-container .mobile-menu-link:hover,
        .glass-nav-container .mobile-menu-link.active {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            transform: translateX(8px);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .glass-nav-container .mobile-menu-icon {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        .glass-nav-container .mobile-cta {
            margin: 30px 30px 40px;
        }

        .glass-nav-container .mobile-cta-button {
            display: block;
            width: 100%;
            background: linear-gradient(135deg, #ff6b6b, #ee5a52);
            color: white;
            text-decoration: none;
            padding: 20px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 1.1rem;
            text-align: center;
            box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
            transition: all 0.3s ease;
        }

        .glass-nav-container .mobile-cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(255, 107, 107, 0.4);
        }

        @media (max-width: 768px) {
            .glass-nav-container .navbar-container {
                width: calc(100% - 30px);
            }
        }

        @media (max-width: 480px) {
            .glass-nav-container .navbar-container {
                width: calc(100% - 20px);
                top: 15px;
            }

            .glass-nav-container .navbar {
                padding: 10px 15px;
            }

            .glass-nav-container .navbar-brand {
                gap: 8px;
            }

            .glass-nav-container .logo-icon {
                width: 35px;
                height: 35px;
            }

            .glass-nav-container .brand-text {
                font-size: 1.1rem;
            }
        }

        /* Contenedor principal - NO afecta el layout */
.profile-group {
    position: relative;
    display: inline-block;
}

/* Hover Menu - POSITION ABSOLUTE para que esté fuera del flujo */
.hover-menu {
    position: absolute;
    left: 0;
    top: 100%; /* Justo debajo del elemento padre */
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-out;
    z-index: 1000;
    min-width: 256px;
    
    /* Asegurar que esté POR ENCIMA de todo */
    pointer-events: none;
}

/* Cuando hacemos hover, activamos el menú */
.profile-group:hover .hover-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; /* Permitir interacción cuando es visible */
}

/* Contenido del menú */
.menu-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    position: relative;
}

/* Efectos decorativos del menú */
.menu-content::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: 0 12px -12px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    z-index: -1;
}

.menu-content::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: white;
    border-radius: 16px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    z-index: -1;
}

/* Resto de estilos (igual que antes) */
.menu-header {
    margin-bottom: 12px;
}

.font-medium {
    font-weight: 500;
    font-size: 16px;
    color: #1f2937;
}

.job-title {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.menu-divider {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 12px -24px;
}

.menu-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    margin: 0 -12px;
    border-radius: 8px;
    text-decoration: none;
    color: #374151;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.menu-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.menu-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: rgba(0, 0, 0, 0.25);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.navbar-brand:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.logo-icon {
    width: 24px;
    height: 24px;
    background-color: #3b82f6;
    border-radius: 6px;
}

.brand-text {
    font-weight: 500;
}

/* categoria slides */
.cate {
  
}

.cate .card-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(6, 180px);
  justify-content: center;
}

.cate .card {
  height: 100px;
  border-radius: 10px;
  border: 2px rgba(249,249,249,0.1) solid;
  background: linear-gradient(rgba(133, 133, 133, 0), rgb(67 67 67)) 0% 0% / cover;
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: 1;
  overflow: hidden;
  transition: all ease-in-out 0.3s;
}

.cate .card:hover {
  transform: scale(1.05);
  border: 2px rgba(249, 249, 249, 0.7) solid;
}

.cate .logo {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  z-index: 2;
  will-change: transform;
}

.cate .video {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity ease-in-out 0.5s;
}

.cate .logo:hover + .video {
  opacity: 1;
}

/* Stars prenden */

@keyframes sf-fly-by-1 {
    from {
        transform: translateZ(-600px);
        opacity: 0.5;
    }
    to {
        transform: translateZ(0);
        opacity: 0.5;
    }
}
@keyframes sf-fly-by-2 {
    from {
        transform: translateZ(-1200px);
        opacity: 0.5;
    }
    to {
        transform: translateZ(-600px);
        opacity: 0.5;
    }
}
@keyframes sf-fly-by-3 {
    from {
        transform: translateZ(-1800px);
        opacity: 0.5;
    }
    to {
        transform: translateZ(-1200px);
        opacity: 0.5;
    }
}

.star-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 600px;
    -webkit-perspective: 600px;
    z-index: -1;
}
.star-field .layer {
    box-shadow: -411px -476px #cccccc, 777px -407px #d4d4d4, -387px -477px #fcfcfc, -91px -235px #d4d4d4, 491px -460px #f7f7f7, 892px -128px #f7f7f7, 758px -277px #ededed, 596px 378px #cccccc, 647px 423px whitesmoke, 183px 389px #c7c7c7,
        524px -237px #f0f0f0, 679px -535px #e3e3e3, 158px 399px #ededed, 157px 249px #ededed, 81px -450px #ebebeb, 719px -360px #c2c2c2, -499px 473px #e8e8e8, -158px -349px #d4d4d4, 870px -134px #cfcfcf, 446px 404px #c2c2c2,
        440px 490px #d4d4d4, 414px 507px #e6e6e6, -12px 246px #fcfcfc, -384px 369px #e3e3e3, 641px -413px #fcfcfc, 822px 516px #dbdbdb, 449px 132px #c2c2c2, 727px 146px #f7f7f7, -315px -488px #e6e6e6, 952px -70px #e3e3e3,
        -869px -29px #dbdbdb, 502px 80px #dedede, 764px 342px #e0e0e0, -150px -380px #dbdbdb, 654px -426px #e3e3e3, -325px -263px #c2c2c2, 755px -447px #c7c7c7, 729px -177px #c2c2c2, -682px -391px #e6e6e6, 554px -176px #ededed,
        -85px -428px #d9d9d9, 714px 55px #e8e8e8, 359px -285px #cfcfcf, -362px -508px #dedede, 468px -265px #fcfcfc, 74px -500px #c7c7c7, -514px 383px #dbdbdb, 730px -92px #cfcfcf, -112px 287px #c9c9c9, -853px 79px #d6d6d6,
        828px 475px #d6d6d6, -681px 13px #fafafa, -176px 209px #f0f0f0, 758px 457px #fafafa, -383px -454px #ededed, 813px 179px #d1d1d1, 608px 98px whitesmoke, -860px -65px #c4c4c4, -572px 272px #f7f7f7, 459px 533px #fcfcfc,
        624px -481px #e6e6e6, 790px 477px #dedede, 731px -403px #ededed, 70px -534px #cccccc, -23px 510px #cfcfcf, -652px -237px whitesmoke, -690px 367px #d1d1d1, 810px 536px #d1d1d1, 774px 293px #c9c9c9, -362px 97px #c2c2c2,
        563px 47px #dedede, 313px 475px #e0e0e0, 839px -491px #e3e3e3, -217px 377px #d4d4d4, -581px 239px #c2c2c2, -857px 72px #cccccc, -23px 340px #dedede, -837px 246px white, 170px -502px #cfcfcf, 822px -443px #e0e0e0, 795px 497px #e0e0e0,
        -814px -337px #cfcfcf, 206px -339px #f2f2f2, -779px 108px #e6e6e6, 808px 2px #d4d4d4, 665px 41px #d4d4d4, -564px 64px #cccccc, -380px 74px #cfcfcf, -369px -60px #f7f7f7, 47px -495px #e3e3e3, -383px 368px #f7f7f7, 419px 288px #d1d1d1,
        -598px -50px #c2c2c2, -833px 187px #c4c4c4, 378px 325px whitesmoke, -703px 375px #d6d6d6, 392px 520px #d9d9d9, -492px -60px #c4c4c4, 759px 288px #ebebeb, 98px -412px #c4c4c4, -911px -277px #c9c9c9;
    transform-style: preserve-3d;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 4px;
    width: 4px;
    border-radius: 2px;
}
.star-field .layer:nth-child(1) {
    animation: sf-fly-by-1 5s linear infinite;
}
.star-field .layer:nth-child(2) {
    animation: sf-fly-by-2 5s linear infinite;
}
.star-field .layer:nth-child(3) {
    animation: sf-fly-by-3 5s linear infinite;
}

/* Ilustraciones de fondo - detrás del contenido */
.absolute.top-0.left-0.rotate-180.-translate-x-3\/4.-scale-x-100,
.absolute.top-0.right-0.-translate-y-1\/2.translate-x-1\/4 {
    z-index: -1 !important; /* Detrás del contenido principal */
}

/* Stars fin */

/* poptrailer */

 /* Estilos del modal Netflix */
        .netflix-modal-container {
            --background: #141414;
            --modal: #181818;
            --white: #ffffff;
            /* background: #00000080;
            backdrop-filter: blur(11px); */
        }

        .netflix-modal-container *,
        .netflix-modal-container *::before,
        .netflix-modal-container *::after {
            margin: 0;
            padding: 0;
            box-sizing: inherit;
            font-family: inherit;
        }

        .netflix-modal-container {
            box-sizing: border-box;
            font-family: "Roboto", sans-serif;
            font-size: 62.5%;
        }

        .netflix-modal-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            min-height: 100vh;
            background-color: var(--background);
        }

        .netflix-modal-wrapper > .netflix-modal-open {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.8rem;
            cursor: pointer;
            max-height: 42px;
            min-height: 32px;
            font-size: 1.6rem;
            appearance: none;
            border: 0;
            border-radius: 4px;
            padding-left: 2rem;
            padding-right: 2.4rem;
            background-color: var(--white);
            color: var(--background);
            font-weight: 700;
            line-height: 2.4rem;
            position: absolute;
            z-index: 1;
        }

        .netflix-modal-wrapper > .netflix-modal-open svg {
            margin-right: 10px;
        }

        .netflix-modal {
            display: none;
            flex-direction: column;
            width: 770px;
            margin: 20px 20px;
            border-radius: 6px;
            z-index: 10;
            background-color: var(--modal);
            box-shadow: rgb(0 0 0 / 75%) 0px 3px 10px;
            transition: opacity 0.2s linear;
            position: fixed;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-height: 90vh;
            overflow-y: auto;
        }

        .netflix-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.027);
    z-index: 9999; /* Un z-index menor que el modal */
}

        .netflix-modal .netflix-modal-header {
            position: relative;
        }

        .netflix-modal .netflix-modal-header::before {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            content: "";
            background: linear-gradient(0deg, var(--modal), transparent 50%);
        }

        .netflix-modal .netflix-modal-header video {
            border-radius: 6px 6px 0 0;
            display: block;
            width: 100%;
            opacity: 1;
        }

        .netflix-modal .netflix-modal-header .netflix-modal-close {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            right: 0;
            margin: 1em;
            z-index: 2;
            cursor: pointer;
            background-color: var(--modal);
            color: var(--white);
            border-radius: 50%;
            height: 36px;
            padding: 8px;
            width: 36px;
            border: 0;
        }

        .netflix-modal .netflix-modal-header .netflix-modal-close svg {
            outline: none;
        }

        .netflix-modal .netflix-modal-header .netflix-header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            width: 100%;
            bottom: 0;
            padding: 0 52px;
            margin-bottom: 70px;
            z-index: 2;
        }

        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title {
            width: 100%;
        }

        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title > img {
            width: 40%;
            margin-bottom: 1.5em;
        }

        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons {
            display: flex;
            align-items: center;
            position: relative;
            width: 100%;
        }

        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons button {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.8rem;
            cursor: pointer;
            max-height: 42px;
            min-height: 32px;
            font-size: 1.6rem;
        }

        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-play,
        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-add {
            margin-right: 10px;
        }

        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-play {
            appearance: none;
            border: 0;
            border-radius: 4px;
            padding-left: 2rem;
            padding-right: 2.4rem;
            background-color: #4f4e4e3d;
            backdrop-filter: blur(9px);
            color: var(--background);
            font-weight: 700;
            line-height: 2.4rem;
        }

        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-play svg {
            height: 100%;
            width: 100%;
            margin-right: 10px;
        }

        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-volume,
        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-add,
        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-rate {
            max-width: 42px;
            min-width: 32px;
            background-color: rgba(42, 42, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.7);
            border-width: 2px;
            padding-left: 0.8rem;
            padding-right: 0.8rem;
            color: var(--white);
            border-radius: 50%;
        }

        .netflix-modal
        .netflix-modal-header
        .netflix-header-content
        .netflix-header-title
        .netflix-header-buttons
        .netflix-modal-volume:hover,
        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-add:hover,
        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-rate:hover {
            border-color: var(--white);
            background-color: rgba(42, 42, 42, 1);
        }

        .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-volume {
            position: absolute;
            right: 0;
            opacity: 0.4;
            transition: opacity 0.2s ease-in-out;
        }

        .netflix-modal
        .netflix-modal-header
        .netflix-header-content
        .netflix-header-title
        .netflix-header-buttons
        .netflix-modal-volume:hover {
            opacity: 1;
        }

        .netflix-modal .netflix-modal-body {
            display: grid;
            grid-template-columns: 2fr 1fr;
            column-gap: 10px;
            padding: 15px 48px;
            background: #00000080;
            backdrop-filter: blur(11px);
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-first {
            padding-right: 40px;
            line-height: 25px;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-first .netflix-modal-description {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-first .netflix-modal-description span,
        .netflix-modal .netflix-modal-body .netflix-modal-content-first .netflix-modal-description svg {
            margin-right: 10px;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-first .netflix-modal-description span:first-child {
            color: #46d369;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-first .netflix-modal-description span {
            font-size: 1.1rem;
            font-weight: 700;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-first .netflix-modal-description svg {
            width: 30px;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-first .netflix-modal-description .netflix-description-badge {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 15px;
            border: 1px solid hsla(0, 0%, 100%, 0.4);
            border-radius: 3px;
            color: hsla(0, 0%, 100%, 0.9);
            font-size: 1.2rem;
            padding: 0 0.5em;
            white-space: nowrap;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-first p {
            font-size: 1.0rem;
            line-height: 24px;
            word-break: break-word;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-second {
            word-break: break-word;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-second span {
            line-height: 20px;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-second .netflix-title {
            color: #777;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-second .netflix-cast,
        .netflix-modal .netflix-modal-body .netflix-modal-content-second .netflix-genres,
        .netflix-modal .netflix-modal-body .netflix-modal-content-second .netflix-show {
            margin-bottom: 10px;
            cursor: pointer;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-second .netflix-cast span:hover,
        .netflix-modal .netflix-modal-body .netflix-modal-content-second .netflix-genres span:hover,
        .netflix-modal .netflix-modal-body .netflix-modal-content-second .netflix-show span:hover {
            text-decoration: underline;
        }

        .netflix-modal .netflix-modal-body .netflix-modal-content-first,
        .netflix-modal .netflix-modal-body .netflix-modal-content-second {
            width: 100%;
            font-size: 1.0rem;
        }

        .netflix-modal-hidden {
            display: none;
        }

        .netflix-modal-visuallyhidden {
            opacity: 0;
        }

        @media screen and (max-width: 768px) {
            .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-add,
            .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-rate,
            .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-volume {
                width: 32px;
                height: 32px;
            }

            .netflix-modal .netflix-modal-header .netflix-header-content {
                margin-bottom: 40px;
            }

            .netflix-modal .netflix-modal-header .netflix-header-content .netflix-header-title .netflix-header-buttons .netflix-modal-play {
                height: 32px;
                font-size: 1.2rem;
                padding-left: 1.5rem;
                padding-right: 2rem;
            }
        }

        @media screen and (max-width: 688px) {
            .netflix-modal .netflix-modal-body {
                grid-template-columns: 1fr;
                row-gap: 30px;
            }

            .netflix-modal .netflix-modal-body .netflix-modal-content-second {
                grid-row: 2;
            }
        }

        @media screen and (max-width: 600px) {
            .netflix-modal {
                width: 95%;
                margin: 10px;
            }
            
            .netflix-modal .netflix-modal-header .netflix-header-content {
                padding: 0 20px;
            }
            
            .netflix-modal .netflix-modal-body {
                padding: 15px 20px;
            }
        }

/* poptrailer */

/* Letras botton */
  .watch-btn {
            position: relative;
            padding: 7px 20px;
            font-size: 13px;
            font-weight: bold;
            color: white;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            overflow: hidden;
        }

        .watch-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .watch-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .watch-btn:hover::before {
            left: 100%;
        }

        /* botton best */
         .bestwatch-btn {
            position: relative;
            padding: 3px 12px;
            font-size: 13px;
            font-weight: bold;
            color: white;
            background: rgba(0, 0, 0, 0.253);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            overflow: hidden;
        }

        .bestwatch-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .bestwatch-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .bestwatch-btn:hover::before {
            left: 100%;
        }

        .botonescardnormales {
            display: flex;
            gap: 3px;
            margin-top: -43px;
            flex-direction: row-reverse;
        }


/* FIN PRUEBA */

/* Minor visual polish */
.cardnormal .emotions-slider-item__badge { font-size: 13px; padding: 6px 10px; background: #00000066; border-bottom-right-radius: var(--border-radius); position:absolute; left:0; top:0; z-index:3; display:flex; align-items:center; gap:6px; }
.cardnormal .emotions-slider-item__badge::before { content: \"\"; width:18px; height:18px; background: url(\"https://bato-web-agency.github.io/bato-shared/img/slider-1/icon-star.svg\") center center no-repeat; background-size:contain; display:inline-block; }

/* fallback: ensure images don't collapse if missing */
.emotions-slider-item__image img[alt=\"\"] { opacity: 0.6; }



/* PRUEBAS */