/* Fila de título + flecha */
.section-title-row {
  display: flex;
  align-items: center;
  margin-left: 64px;
  width: calc(100vw - 64px);
  max-width: calc(100vw - 64px);
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 24px;
  margin-bottom: 12px;
}

/* Flecha expandible */
.expand-arrow {
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  transition: transform 0.3s;
  padding: 0;
}
.expand-arrow .expand-triangle {
  transition: transform 0.3s;
}
.expand-arrow.rotated .expand-triangle {
  transform: rotate(180deg);
}

.menu-buttons-row.vertical {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px !important;
  align-items: stretch !important;
  justify-items: center;
  overflow-x: visible !important;
  overflow-y: visible !important;
  white-space: normal !important;
  padding: 20px 0 !important;
  min-height: auto !important;
  max-width: 98vw;
  transition: max-height 0.6s cubic-bezier(0.5, 1.7, 0.5, 1), gap 0.35s,
    padding 0.3s;
}

/* Oculta flechas carrusel si expandido */
.menu-buttons-row-wrapper.expanded .carousel-arrow {
  display: none !important;
}

.menu-buttons-row .menu-button {
  opacity: 1;
  transition: opacity 0.3s;
}
.menu-buttons-row:not(.vertical) .menu-button {
  opacity: 1;
}
.menu-buttons-row.vertical .menu-button {
  opacity: 1;
  animation: fadeInBtns 0.5s;
}
@keyframes fadeInBtns {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#asuncion-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  font-family: system-ui, sans-serif;
  color: #fff;
  text-align: center;
  flex-direction: column;
}
#asuncion-box {
  background: linear-gradient(180deg, #111 0%, #330000 100%);
  padding: 36px;
  border-radius: 16px;
  max-width: 700px;
  box-shadow: 0 0 20px rgba(255,0,0,0.7);
  text-align: center;
}
#asuncion-box h2 {
  font-size: 2rem;
  margin-bottom: 16px;
  color: #ff3333;
  text-shadow: 2px 2px 4px #000;
}
#asuncion-box p { font-size: 1.2rem; margin-bottom: 20px; }
#asuncion-instructions {
  background: #ff4444;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1rem;
}
#asuncion-instructions:hover { background: #ff0000; transform: scale(1.05); }
/* NUEVO: Imagen junto al buscador  */
#buscador-contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  margin-top: 25px;
}
#buscador-menu {
  width: 350px;
  font-size: 1.1em;
  padding: 11px 16px;
  border-radius: 15px;
  border: 2px solid #e0e0e0;
  outline: none; /* Quitamos el borde azul por defecto del navegador */
  transition: all 0.3s ease; /* Transición suave para todos los cambios */
  font-size: 1.1em;
  transition: border-color 0.3s ease;
  animation: inputOut 0.4s ease-out forwards;
}
#buscador-menu:focus {
  border-color: #000;
  animation: 
    inputPop 0.3s ease-out forwards,
    shadowPulse 1.5s infinite; /* 2. El pulso de sombra se repite */
}
@keyframes inputPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); } /* Se agranda un poco */
  100% { transform: scale(1); }    /* Vuelve a su tamaño */
}

/* Definimos una animación de pulso para la sombra (Glow) */
@keyframes shadowPulse {
  0% { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); }
  100% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); }
}
/* Animación para cuando el input pierde el foco (sale) */
@keyframes inputOut {
  0% { transform: scale(1.02); border-color: #000; }
  100% { transform: scale(1); border-color: #ccc; }
}
#buscador-logo-img {
  margin-left: 28px;
  max-height: 90px; /* Un poco más grande */
  max-width: 190px;
  object-fit: contain;
  background: none;
  border-radius: 0;
  display: block;
}
@media (max-width: 700px) {
  #buscador-logo-img {
    max-height: 40px;
    max-width: 90px;
    margin-left: 10px;
  }
}
@media (max-width: 500px) {
  #buscador-logo-img {
    display: none;
  }
}
#foot {
  width: 100vw;
  background: #000000;
  text-align: center;
  padding: 12px 0 20px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 1.2rem;
  margin-top: 40px;
  box-shadow: -2px -21px 73px 37px #000000;
}
#fot {
  color: white;
  font-family: "Archivo Black", sans-serif;
  text-decoration: transparent !important;
  font-size: 1.5rem;
  cursor: pointer;
  transition: text-size 0.3s, color 0.3s;
  border: 0;
  background: none;
  padding: 0;
  
}
#fot:hover {
  color: #ffd700;
  text-decoration: underline !important;
  font-size: 1.6rem;
}
.boton-tyc{
  background-color: transparent;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
.boton-tyc:hover {
  color: #ddd;                 /* Texto blanco grisáceo al pasar el ratón */
}
.footer-clash{
  background-color: transparent;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
.archivo-black-regular {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* Añade al final del archivo o donde prefieras tus personalizaciones */

@-moz-keyframes nieve{	
	from{top:-40px;}
    to{top:101%;}
}
@-webkit-keyframes nieve{	
	from{top:-40px;}
    to{top:2000px;}
}
@keyframes nieve{	
	from{top:-40px;}
    to{top:2000px;}
}

@-moz-keyframes horiz2{
    20%{transform:translateX(0);}
    50%{transform:translateX(150px);}
    80%{transform:translateX(0);}
}
@-webkit-keyframes horiz2{
    20%{transform:translateX(0);}
    50%{transform:translateX(150px);}
    80%{transform:translateX(0);}
}
@keyframes horiz2{
    20%{transform:translateX(0);}
    50%{transform:translateX(-70px);}
    80%{transform:translateX(0);}
}

@-moz-keyframes horiz{
    20%{transform:translateX(0);}
    50%{transform:translateX(150px);}
    80%{transform:translateX(0);}
}
@-webkit-keyframes horiz{
    20%{transform:translateX(0);}
    50%{transform:translateX(150px);}
    80%{transform:translateX(0);}
}
@keyframes horiz{
    20%{transform:translateX(0);}
    50%{transform:translateX(150px);}
    80%{transform: translateX(0);}
}
	
.tpl-snow > div{position:fixed;-webkit-animation:ease-in infinite normal;-moz-animation:ease-in infinite normal;animation:ease-in infinite normal;}	

.tpl-snow > div{z-index:8;width:10px;height:10px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background-color:#fff;-webkit-animation-name:nieve,horiz;-moz-animation-name:nieve,horiz;animation-name:nieve,horiz;}
.tpl-snow > div:nth-of-type(odd){width:5px; height:5px;-webkit-animation-name:nieve,horiz2;-moz-animation-name:nieve,horiz2;animation-name:nieve,horiz2;}

.tpl-snow > div:nth-of-type(1){left:40px;-webkit-animation-duration:5.5s;-moz-animation-duration:5.5s;animation-duration:5.5s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
.tpl-snow > div:nth-of-type(2){left:120px;-webkit-animation-duration:7s;-moz-animation-duration:7s;animation-duration:7s;}
.tpl-snow > div:nth-of-type(3){left:200px;-webkit-animation-duration:8s;-moz-animation-duration:8s;animation-duration:8s;}
.tpl-snow > div:nth-of-type(4){left:20%;-webkit-animation-duration:6s;-moz-animation-duration:6s;animation-duration:6s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
.tpl-snow > div:nth-of-type(5){left:30%;-webkit-animation-duration:9s;-moz-animation-duration:9s;animation-duration:9s;}
.tpl-snow > div:nth-of-type(6){left:40%;-webkit-animation-duration:7.2s;-moz-animation-duration:7.2s;animation-duration:7.2s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
.tpl-snow > div:nth-of-type(7){left:50%;-webkit-animation-duration:10s;-moz-animation-duration:10s;animation-duration:10s;}
.tpl-snow > div:nth-of-type(8){left:60%;-webkit-animation-duration:6.4s;-moz-animation-duration:6.4s;animation-duration:6.4s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
.tpl-snow > div:nth-of-type(9){left:70%;-webkit-animation-duration:10s;-moz-animation-duration:10s;animation-duration:10s;-webkit-animation-delay:1.4s;-moz-animation-delay:1.4s;animation-delay:1.4s;}
.tpl-snow > div:nth-of-type(10){left:80%;-webkit-animation-duration:8s;-moz-animation-duration:8s;animation-duration:8s;}
.tpl-snow > div:nth-of-type(11){left:90%;-webkit-animation-duration:7.1s;-moz-animation-duration:7.1s;animation-duration:7.1s;-webkit-animation-delay:2s;-moz-animation-delay:2s;animation-delay:2s;}
.tpl-snow > div:nth-of-type(12){left:99%;-webkit-animation-duration:6.6s;-moz-animation-duration:6.6s;animation-duration:6.6s;-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;animation-delay:1.6s;}
.tpl-snow > div:nth-of-type(13){left:10px;-webkit-animation-duration:10.2s;-moz-animation-duration:10.2s;animation-duration:10.2s;}
.tpl-snow > div:nth-of-type(14){left:180px;-webkit-animation-duration:12s;-moz-animation-duration:12s;animation-duration:12s;}
.tpl-snow > div:nth-of-type(15){left:213px;-webkit-animation-duration:7.3s;-moz-animation-duration:7.3s;animation-duration:7.3s;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s;}
.tpl-snow > div:nth-of-type(16){left:23%;-webkit-animation-duration:9.2s;-moz-animation-duration:9.2s;animation-duration:9.2s;}
.tpl-snow > div:nth-of-type(17){left:38%;-webkit-animation-duration:5s;-moz-animation-duration:5s;animation-duration:5s;}
.tpl-snow > div:nth-of-type(18){left:45%;-webkit-animation-duration:15s;-moz-animation-duration:15s;animation-duration:15s;}
.tpl-snow > div:nth-of-type(19){left:58%;-webkit-animation-duration:5s;-moz-animation-duration:5s;animation-duration:5s;}
.tpl-snow > div:nth-of-type(20){left:64%;-webkit-animation-duration:12s;-moz-animation-duration:12s;animation-duration:12s;}
.tpl-snow > div:nth-of-type(21){left:76%;-webkit-animation-duration:5.6s;-moz-animation-duration:5.6s;animation-duration:5.6s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
.tpl-snow > div:nth-of-type(22){left:86%;-webkit-animation-duration:8.5s;-moz-animation-duration:8.5s;animation-duration:8.5s;}
.tpl-snow > div:nth-of-type(23){left:83%;-webkit-animation-duration:14.4s;-moz-animation-duration:14.4s;animation-duration:14.4s;}
.tpl-snow > div:nth-of-type(24){left:95%;-webkit-animation-duration:12s;-moz-animation-duration:12s;animation-duration:12s;}
.tpl-snow > div:nth-of-type(25){left:55px;-webkit-animation-duration:8.7s;-moz-animation-duration:8.7s;animation-duration:8.7s;-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s;}
.tpl-snow > div:nth-of-type(26){left:133px;-webkit-animation-duration:5.2s;-moz-animation-duration:5.2s;animation-duration:5.2s;}
.tpl-snow > div:nth-of-type(27){left:215px;-webkit-animation-duration:10.4s;-moz-animation-duration:10.4s;animation-duration:10.4s;-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;animation-delay:1.6s;}
.tpl-snow > div:nth-of-type(28){left:26%;-webkit-animation-duration:9s;-moz-animation-duration:9s;animation-duration:9s;}
.tpl-snow > div:nth-of-type(29){left:33%;-webkit-animation-duration:12s;-moz-animation-duration:12s;animation-duration:12s;}
.tpl-snow > div:nth-of-type(30){left:49%;-webkit-animation-duration:9.4s;-moz-animation-duration:9.4s;animation-duration:9.4s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
.tpl-snow > div:nth-of-type(31){left:55%;-webkit-animation-duration:9.1s;-moz-animation-duration:9.1s;animation-duration:9.1s;}
.tpl-snow > div:nth-of-type(32){left:68%;-webkit-animation-duration:9.6s;-moz-animation-duration:9.6s;animation-duration:9.6s;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s;}
.tpl-snow > div:nth-of-type(33){left:73%;-webkit-animation-duration:12.4s;-moz-animation-duration:12.4s;animation-duration:12.4s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
.tpl-snow > div:nth-of-type(34){left:85%;-webkit-animation-duration:9s;-moz-animation-duration:9s;animation-duration:9s;-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s;}
.tpl-snow > div:nth-of-type(35){left:93%;-webkit-animation-duration:5s;-moz-animation-duration:5s;animation-duration:5s;}
.tpl-snow > div:nth-of-type(36){left:99%;-webkit-animation-duration:10.6s;-moz-animation-duration:10.6s;animation-duration:10.6s;}
.tpl-snow > div:nth-of-type(37){left:15px;-webkit-animation-duration:9.6s;-moz-animation-duration:9.6s;animation-duration:9.6s;}
.tpl-snow > div:nth-of-type(38){left:99px;-webkit-animation-duration:7.5s;-moz-animation-duration:7.5s;animation-duration:7.5s;}
.tpl-snow > div:nth-of-type(39){left:260px;-webkit-animation-duration:11s;-moz-animation-duration:11s;animation-duration:11s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
.tpl-snow > div:nth-of-type(40){left:28%;-webkit-animation-duration:19s;-moz-animation-duration:19s;animation-duration:19s;}
.tpl-snow > div:nth-of-type(41){left:35%;-webkit-animation-duration:14s;-moz-animation-duration:14s;animation-duration:14s;}
.tpl-snow > div:nth-of-type(42){left:43%;-webkit-animation-duration:5.6s;-moz-animation-duration:5.6s;animation-duration:5.6s;}
.tpl-snow > div:nth-of-type(43){left:53%;-webkit-animation-duration:8.8s;-moz-animation-duration:8.8s;animation-duration:8.8s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;}
.tpl-snow > div:nth-of-type(44){left:66%;-webkit-animation-duration:16s;-moz-animation-duration:16s;animation-duration:16s;}
.tpl-snow > div:nth-of-type(45){left:78%;-webkit-animation-duration:6s;-moz-animation-duration:6s;animation-duration:6s;}
.tpl-snow > div:nth-of-type(46){left:88%;-webkit-animation-duration:9.5s;-moz-animation-duration:9.5s;animation-duration:9.5s;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s;}
.tpl-snow > div:nth-of-type(47){left:94%;-webkit-animation-duration:7.6s;-moz-animation-duration:7.6s;animation-duration:7.6s;}
.tpl-snow > div:nth-of-type(48){left:96%;-webkit-animation-duration:8.2s;-moz-animation-duration:8.2s;animation-duration:8.2s;-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s;}

@media(max-width:600px){
	.tpl-snow > div:nth-of-type(24) ~ *{display:none;}
}

@media(max-width:800px){
	.tpl-snow > div:nth-of-type(36) ~ *{display:none;}
}
#menu .menu-button {
  opacity: 0;               /* Ocultos al inicio */
  visibility: hidden;       /* No ocupan espacio visual */
  transform: translateY(30px); /* Ligeramente desplazados hacia abajo */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#menu .menu-button.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* From Uiverse.io by Smit-Prajapati */ 
.buttonfoter {
  /* in scss with just one variable i can change opacity with rgba(variable, opacity) but in css it's not possible so i have used three seperate variables */
  /* with hue-rotate color can be changed */
  --main-color: rgb(46, 213, 115);
  --main-bg-color: rgba(46, 213, 116, 0.36);
  --pattern-color: rgba(46, 213, 116, 0.073);

  /* change this rotation value */
  filter: hue-rotate(0deg);

  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  background: radial-gradient(
      circle,
      var(--main-bg-color) 0%,
      rgba(0, 0, 0, 0) 95%
    ),
    linear-gradient(var(--pattern-color) 1px, transparent 1px),
    linear-gradient(to right, var(--pattern-color) 1px, transparent 1px);
  background-size:
    cover,
    15px 15px,
    15px 15px;
  background-position:
    center center,
    center center,
    center center;
  border-image: radial-gradient(
      circle,
      var(--main-color) 0%,
      rgba(0, 0, 0, 0) 100%
    )
    1;
  border-width: 1px 0 1px 0;
  color: var(--main-color);
  padding: 1rem 3rem;
  font-weight: 700;
  font-size: 1.2rem;
  transition: background-size 0.2s ease-in-out;
}

.buttonfoter:hover {
  background-size:
    cover,
    10px 10px,
    10px 10px;
}
.buttonfoter:active {
  filter: hue-rotate(100deg);
}
.material-symbols-outlined {
  color: black;
  position: relative;
  left: -40px;
  padding-left: 2px;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24

}
#server{
  color: rgb(206, 206, 206);
}
.server-contenedor {
  background-color: #d50000; /* Color base */
  border-radius: 10px; /* Esquinas suaves */
  justify-content: center;
  display: block;
  margin: 0 auto;
  width: 500px;
  height: 50px;
  text-align: center;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.2), /* Sombra interior oscura */
    inset 0 -2px 5px rgba(255, 255, 255, 0.7), /* Resalte interior claro */
    0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra exterior suave */
  
}
.menu-button.recomendado::after{
  content: "🌟";
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: #000000;
  color: rgb(255, 255, 255);
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.25s ease;
}
.menu-button:hover.reco::after{
  transform: translateY(-9px);
}
  /* Fondo con blur */
  #reinicio {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 25, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9995;
    animation: fadeIn 0.25s ease;
  }

  /* Caja principal */
  #modal_reinicio {
    width: 90%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    padding: 28px;
    text-align: center;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    transform: translateY(10px);
    animation: pop 0.35s ease forwards;
    border: 1px solid rgba(255,255,255,0.4);
  }

  #modal_reinicio h2 {
    margin: 0 0 10px;
    font-size: 22px;
    color: #111;
  }

  #modal_reinicio p {
    margin: 0;
    color: #444;
    font-size: 15px;
    line-height: 1.4;
  }

  /* Botón moderno */
  #modal_reinicio button {
    margin-top: 18px;
    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: white;
    background: linear-gradient(135deg, #966aab, #4e9e7b);
    box-shadow: 0 10px 25px rgba(59,130,246,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  #modal_reinicio button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(146, 91, 183, 0.45);
  }

  #modal_reinicio button:active {
    transform: scale(0.97);
  }

  /* Animaciones */
  @keyframes pop {
    from {
      opacity: 0;
      transform: translateY(25px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* CÓDIGO CSS (Estilos y Animaciones) */
  .clock-widget {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e1e2f, #3a3a5f);
    transform: translateX(300px);
    color: white;
    padding: 20px;
    border-radius: 15px;
    width: 90px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    margin: 20px auto;
    border: 1px solid #4a4a75;
  }

  .display {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .time {
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
    /* Animación de parpadeo sutil para el reloj */
    animation: pulse 2s infinite;
  }

  .date {
    font-size: 6px;
    opacity: 0.8;
    text-transform: uppercase;
  }

  @keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
  }

  .dot {
    width: 8px;
    height: 8px;
    background: #00ff6a;
    border-radius: 50%;
    box-shadow: 0 0 6px #00ff6a;
  }

  .espaciador {
    height: 200px; /* Cambia este número por el tamaño del espacio que quieras */
    width: 100%;  /* Ocupa todo el ancho */
}

#miCarruselPremium.web-crsl-section {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  font-family: system-ui, -apple-system, sans-serif;
}

#miCarruselPremium .web-crsl-title {
  font-size: 34px;
  text-shadow: 0 4px 12px #000, 0 0px 4px #222;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
  color: inherit;
}

#miCarruselPremium .web-crsl-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#miCarruselPremium .web-crsl-container-mask {
  position: relative;
  width: 100%;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);

}

#miCarruselPremium .web-crsl-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#miCarruselPremium .carousel-button {
  position: absolute;
  width: 290px;
  height: 180px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease, filter 0.5s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

#miCarruselPremium .carousel-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

#miCarruselPremium .carousel-button.crsl-center {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1.15);
  filter: brightness(1) contrast(1);
  z-index: 3;
}

#miCarruselPremium .carousel-button.crsl-left {
  opacity: 0.5;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-170px) scale(0.9);
  filter: brightness(0.3);
  z-index: 2;
}

#miCarruselPremium .carousel-button.crsl-right {
  opacity: 0.5;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(170px) scale(0.9);
  filter: brightness(0.3);
  z-index: 2;
}

/* ESTILO DE TUS FLECHAS PREMIUM (SIEMPRE NÍTIDAS) */
#miCarruselPremium .web-crsl-nav {
  --bg: rgba(18, 18, 22, 0.82);
  --bg-hover: rgba(28, 28, 34, 0.96);
  --border: rgba(255,255,255,0.08);

  width: 58px;
  height: 92px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)), var(--bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 20;
  padding: 0;
  outline: none;
  user-select: none;
  visibility: visible;
  pointer-events: auto;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, opacity .25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.30), inset 0 1px 1px rgba(255,255,255,.06);
}

#miCarruselPremium .web-crsl-nav:hover {
  transform: translateY(-50%) scale(1.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)), var(--bg-hover);
  box-shadow: 0 18px 40px rgba(0,0,0,.40), 0 0 24px rgba(255,255,255,.05);
}

#miCarruselPremium .web-crsl-nav:active {
  transform: translateY(-50%) scale(0.97);
}

#miCarruselPremium .web-crsl-nav svg {
  width: 30px;
  height: 30px;
  stroke: #ffffff;
  stroke-width: 2.8;
  fill: none;
  transition: transform .2s ease;
}

#miCarruselPremium .web-crsl-prev:hover svg { transform: translateX(-2px); }
#miCarruselPremium .web-crsl-next:hover svg { transform: translateX(2px); }

#miCarruselPremium .web-crsl-prev { left: 70px; }
#miCarruselPremium .web-crsl-next { right: 70px; }

#miCarruselPremium .web-crsl-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}