/* ==========================================================
   MUServidores - ajustes propios del sitio
   Se carga despues de los CSS de la plantilla.
   ========================================================== */

/* H1 con el mismo aspecto que el H2 de la plantilla */
h1.as-h2 {
  font-size: 52px;
  margin-bottom: 5px;
  padding-bottom: 5px;
  line-height: 1.1em;
  letter-spacing: -.025em;
}

@media only screen and (max-width: 992px) {
  h1.as-h2 {
    font-size: 40px;
  }
}

/* Menu desplegable (escritorio): la plantilla lo fija en 190px y los textos largos
   como "Paquetes Mu Online FREE" se partian en dos lineas. Ahora se ensancha segun el texto. */
@media only screen and (min-width: 993px) {
  #mainmenu li ul {
    width: auto;
    min-width: 190px;
  }

  #mainmenu li li a {
    white-space: nowrap;
  }
}

/* Parallax (jarallax): la plantilla no traia CSS para la imagen de fondo. Hasta que
   cargaba el JavaScript la imagen ocupaba lugar en la pagina y empujaba el contenido;
   al iniciar el script todo saltaba (CLS = 1 en PageSpeed). Ahora es fondo desde el inicio. */
.jarallax {
  position: relative;
  z-index: 0;
}

.jarallax > .jarallax-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: -1;
  pointer-events: none;
}

/* Celular: el JS de la plantilla fija el encabezado arriba (clase header-mobile). Mientras no
   cargaba, el encabezado ocupaba lugar y al fijarse toda la pagina subia 57px. Mismo estilo desde el inicio. */
@media only screen and (max-width: 993px) {
  header.transparent:not(.header-mobile) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 10px;
    overflow: hidden;
  }
}

/* Franja de paises (portada): la plantilla oculta el texto hasta que arranca la animacion
   y la franja pasaba de 0 a 100px de alto, empujando todo lo de abajo. Se reserva su altura. */
.de-marquee-list {
  min-height: 100px;
}

/* Portada: el fondo del hero lo ponia el JavaScript (data-bgimage) y la imagen principal
   esperaba ~2,8 s a que cargara plugins.js. Ahora lo pinta el CSS (mismo encuadre que el JS). */
.hero-home {
  background: url(../images/background/4.webp) 0% 0% / cover no-repeat;
}

/* Etiquetas de las cajitas del hero ("Clientes felices", "Uptime"...): antes eran <h6>
   (saltaban niveles de titulo); mismo aspecto que el h6 de la plantilla */
.d_wrap_sm-box .d-sm-label {
  margin: 0 0 .5rem;
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, .6);
}

/* Portada: en escritorio el logo (170px de alto) tapaba el comienzo del hero */
@media only screen and (min-width: 993px) {
  .hero-home {
    padding-top: 150px !important;
  }
}

/* Titulos con degradado: el degradado solo se pinta dentro de la caja del texto y
   el interlineado es menor que la letra, asi que las tildes de las mayusculas
   (Á, É, Í...) quedaban afuera y no se veian. Se agranda el area pintada hacia
   arriba y se compensa con margen negativo para no mover el diseño. */
.dark-scheme h1,
.dark-scheme h2,
.de-item.s2 h4 {
  padding-top: .25em;
  margin-top: -.25em;
}

/* H1 con el aspecto de la "pastilla" .subtitle */
.dark-scheme h1.subtitle {
  padding-top: 0;
  margin-top: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
}


/* ==========================================================
   EFECTOS DE LAS TARJETAS DE PLANES Y PAQUETES
   - borde de colores que gira (::before)
   - humo de colores que se mueve lento de fondo (::after)
   Solo CSS. El humo anima transform (lo mueve la GPU).
   ========================================================== */

@property --fx-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.de_pricing-table.type-2,
.de-pricing-plan,
.de-item.s2 {
  --fx-c1: var(--primary-color);
  --fx-c2: var(--tertiary-color);
  --fx-c3: var(--secondary-color);
  --fx-ring: 2px;
  --fx-ring-opacity: .55;
  --fx-smoke-opacity: .30;
  position: relative;
  isolation: isolate;
  transition: transform .4s ease, box-shadow .4s ease;
}

/* el borde lo dibuja el efecto: se quita el borde fijo de la plantilla
   (el de hover de .de-item pasaba de 0 a 5px y movia el contenido) */
.dark-scheme .de_pricing-table.type-2,
.de_pricing-table.type-2.rec,
.de-pricing-plan.d-feature,
.de-item,
.de-item:hover {
  border: 0 !important;
}

/* tarjeta destacada ("Mas elegido") */
.de_pricing-table.type-2.rec {
  --fx-ring: 3px;
  --fx-ring-opacity: .95;
  --fx-smoke-opacity: .45;
}

/* --- borde de colores --- */
.de_pricing-table.type-2::before,
.de-pricing-plan::before,
.de-item.s2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: var(--fx-ring);
  border-radius: inherit;
  background: conic-gradient(from var(--fx-angle), var(--fx-c1), var(--fx-c3), var(--fx-c2), var(--fx-c1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--fx-ring-opacity);
  pointer-events: none;
  animation: fx-spin 8s linear infinite;
  transition: opacity .4s ease;
}

@keyframes fx-spin {
  to { --fx-angle: 360deg; }
}

/* --- humo de colores --- */
.de_pricing-table.type-2::after,
.de-pricing-plan::after,
.de-item.s2::after {
  content: "";
  position: absolute;
  left: -35%;
  top: -35%;
  width: 170%;
  height: 170%;
  z-index: -1;
  background: conic-gradient(from 90deg, var(--fx-c1), var(--fx-c2), var(--fx-c3), var(--fx-c1));
  -webkit-mask: url(../images/fx/smoke.webp) center / cover no-repeat;
          mask: url(../images/fx/smoke.webp) center / cover no-repeat;
  opacity: var(--fx-smoke-opacity);
  pointer-events: none;
  animation: fx-smoke 26s ease-in-out infinite alternate;
  will-change: transform;
  transition: opacity .4s ease;
}

@keyframes fx-smoke {
  0%   { transform: translate3d(-6%, 4%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(5%, -5%, 0) rotate(160deg) scale(1.12); }
  100% { transform: translate3d(-3%, 6%, 0) rotate(300deg) scale(1.05); }
}

/* cada tarjeta con el humo en otro momento, para que no se muevan iguales */
[class*="col-"]:nth-child(2n) > .de_pricing-table::after,
[class*="col-"]:nth-child(2n) > .de-pricing-plan::after,
[class*="col-"]:nth-child(2n) > .de-item::after { animation-delay: -9s; }
[class*="col-"]:nth-child(3n) > .de_pricing-table::after,
[class*="col-"]:nth-child(3n) > .de-pricing-plan::after,
[class*="col-"]:nth-child(3n) > .de-item::after { animation-delay: -17s; }
[class*="col-"]:nth-child(2n) > .de_pricing-table::before,
[class*="col-"]:nth-child(2n) > .de-pricing-plan::before,
[class*="col-"]:nth-child(2n) > .de-item::before { animation-delay: -3s; }

/* --- hover: se eleva, brilla y se intensifica --- */
.de_pricing-table.type-2:hover,
.de-pricing-plan:hover,
.de-item.s2:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px -14px rgba(var(--primary-color-rgb), .65), 0 0 28px -6px rgba(230, 21, 175, .35);
}

.de_pricing-table.type-2:hover::before,
.de-pricing-plan:hover::before,
.de-item.s2:hover::before { opacity: 1; }

.de_pricing-table.type-2:hover::after,
.de-pricing-plan:hover::after,
.de-item.s2:hover::after { opacity: calc(var(--fx-smoke-opacity) + .18); }


/* ==========================================================
   TARJETAS DE PAQUETES MUONLINE (muonline.html)
   Antes el texto era mas alto que la tarjeta: el nombre del pack
   quedaba cortado arriba y el boton "Ordenar" fuera de la vista.
   Ahora la tarjeta crece con su contenido y la imagen queda de fondo.
   ========================================================== */

.fx-packs > [class*="col-"] {
  display: flex;
}

.fx-packs .de-item.s2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  background: #0e1016; /* mismo tono que el fondo de las imagenes: no se nota donde terminan */
}

/* imagen anclada arriba: el logo del emulador queda visible como cabecera */
.fx-packs .de-item.s2 > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform-origin: 50% 0;
}

.fx-packs .de-item .d-overlay {
  position: relative;
  z-index: 2;
  flex: 1;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* la cabecera (750x460) ocupa el 61% del ancho en alto; el texto empieza donde se funde */
  padding-top: 50%;
  background: none;
}

/* titulos alineados arriba, precio y boton alineados abajo en todas las tarjetas */
.fx-packs .de-item .d-overlay .d-text {
  position: relative;
  bottom: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fx-packs .de-item .d-overlay .d-text > ul {
  flex: 1;
}

.fx-packs .de-item .d-overlay .d-text .btn-main {
  opacity: 1;
}

/* el humo va sobre la imagen (con mezcla "screen") y debajo del texto */
.fx-packs .de-item.s2::after {
  z-index: 1;
  mix-blend-mode: screen;
  --fx-smoke-opacity: .45;
}

/* Paquetes FREE (las tarjetas con etiqueta): nombres largos como "PACK CUSTOM MSPRO"
   en una sola linea. La letra se ajusta al ancho de la tarjeta (cqi = % del ancho),
   hasta 32px como maximo. Todos quedan del mismo tamaño. */
.fx-packs .de-item.s2:has(.d-label) {
  container-type: inline-size;
}

.fx-packs .de-item.s2:has(.d-label) h4 {
  white-space: nowrap;
  font-size: min(32px, calc((100cqi - 60px) / 11));
}

/* precios por ubicacion (Canada / Brasil) */
.fx-price-loc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 4px;
  font-weight: 600;
}

.fx-price-loc > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fx-price-loc img {
  border-radius: 3px;
}

.de-item .d-overlay .d-label:empty {
  display: none;
}

/* etiqueta de la esquina (ej. FREE) */
.fx-packs .de-item .d-overlay .d-label {
  z-index: 4;
  padding: 2px 14px;
  letter-spacing: .08em;
  box-shadow: 0 0 18px rgba(230, 21, 175, .6);
}


/* ==========================================================
   RECUADRO "EN LINEA" (abajo a la izquierda)
   En el celular tapaba media pantalla: ahora se pliega a una pastilla.
   ========================================================== */

.support-box > summary {
  list-style: none;
  cursor: pointer;
}

.support-box > summary::-webkit-details-marker {
  display: none;
}

.support-box > summary::after {
  content: "\25BE";
  margin-left: auto;
  padding-left: 10px;
  color: #00ff66;
  transition: transform .2s ease;
}

.support-box:not([open]) > summary::after {
  transform: rotate(-90deg);
}

body .support-box:not([open]) {
  width: auto;
  padding: 8px 14px;
}

body .support-box:not([open]) .support-header {
  margin-bottom: 0;
}


/* ==========================================================
   SELECTOR DE IDIOMA (bandera + menu) y aviso de sugerencia
   ========================================================== */

.lang-switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

/* selector + boton "Contactanos" en una sola fila */
@media only screen and (min-width: 993px) {
  .menu_side_area {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 6px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .2s ease;
}

.lang-current:hover,
.lang-switch.open .lang-current {
  border-color: var(--secondary-color);
}

.lang-current .fa {
  font-size: 12px;
  transition: transform .2s ease;
}

.lang-switch.open .lang-current .fa {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1001;
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-dark-2);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.lang-switch.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #e6e6e6;
  font-size: 14px;
  white-space: nowrap;
}

.lang-menu a:hover {
  background: rgba(var(--secondary-color-rgb), .18);
  color: #fff;
}

.lang-menu a[aria-current="true"] {
  color: #fff;
  font-weight: 600;
}

.lang-menu a[aria-current="true"]::after {
  content: "\f00c";
  font-family: "FontAwesome";
  margin-left: auto;
  padding-left: 12px;
  font-size: 12px;
  color: var(--secondary-color);
}

.lang-switch img,
.lang-mobile img,
.lang-suggest img {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 3px;
}

/* en el celular: dentro del menu desplegable */
#mainmenu li.lang-mobile {
  display: none;
}

@media only screen and (max-width: 992px) {
  .lang-switch {
    display: none;
  }

  #mainmenu li.lang-mobile {
    display: flex;
    gap: 10px;
    padding: 14px 0;
  }

  #mainmenu li.lang-mobile a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
  }

  #mainmenu li.lang-mobile a[aria-current="true"] {
    background: var(--primary-color);
    border-color: var(--primary-color);
  }
}

/* aviso "¿Ver este sitio en ...?" */
.lang-suggest {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 10px 10px 10px 14px;
  background: var(--bg-dark-2);
  border: 1px solid rgba(var(--secondary-color-rgb), .55);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 14px;
}

.lang-suggest .btn-main {
  white-space: nowrap;
}

.lang-suggest-close {
  background: none;
  border: 0;
  padding: 0 4px;
  color: #aaa;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .lang-suggest {
    bottom: 100px;
    width: calc(100% - 32px);
    flex-wrap: wrap;
  }
}

/* aviso de traduccion en terminos y condiciones */
.lang-legal-note {
  margin-bottom: 30px;
  padding: 14px 18px;
  border: 1px solid rgba(var(--secondary-color-rgb), .45);
  border-radius: 10px;
  background: rgba(var(--secondary-color-rgb), .08);
}


/* ==========================================================
   Movimiento reducido (opcion de accesibilidad del sistema)
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .de_pricing-table.type-2::before,
  .de-pricing-plan::before,
  .de-item.s2::before,
  .de_pricing-table.type-2::after,
  .de-pricing-plan::after,
  .de-item.s2::after {
    animation: none;
  }

  .de_pricing-table.type-2:hover,
  .de-pricing-plan:hover,
  .de-item.s2:hover {
    transform: none;
  }
}