@font-face {
  font-family: 'TickingTimebombBB';
  src: url('../fonts/TickingTimebombBB.eot');
  src: local('☺'), url('../fonts/TickingTimebombBB.woff') format('woff'), url('../fonts/TickingTimebombBB.ttf') format('truetype'), url('../fonts/TickingTimebombBB.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #000;
  font-family: 'Rubik', sans-serif;
  
}


/*MAIN*/

.btn {
  cursor: pointer;
}

.padd-l-r-40 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.padd-t-b-16 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.padd-l-6 {
  padding-left: 6%;
}

.padd-r-6 {
  padding-right: 6%;
}

.padd-t-20 {
  padding-top: 1.25rem;
}

.padd-t-30 {
  padding-top: 1.875rem;
}

.padd-t-40 {
  padding-top: 1.875rem;
}

.padd-t-60 {
  padding-top: 3.75rem;
}

.padd-b-60 {
  padding-bottom: 3.75rem;
}

.marr-t-5 {
  margin-top: 0.3125rem;
}


/*TEXTO*/

.txt-24 {
  font-size: 1.5rem;
}


/*COLOR*/

.bg-gris-claro {
  background-color: rgb(23, 21, 23);
}

.bg-nigger {
  background-color: #000;
}

.blanco {
  color: #FFF;
}

.gris {
  color: #666;
}

.gris-claro {
  color: #DDD;
}


/*HEADER*/

header {
  font-weight: 300;
  background-color: #000;
  color: #FFF;
}

.header {
  padding: 0.8rem 1.4rem;
}

.header-menu {
  height: 100%;
  display: flex;
  align-items: center;
}

.header-menu li {
  padding: 0 0 0 2rem;
  display: flex;
  align-items: center;
}

.header-menu li:last-child {
  padding-right: 0
}

.header-menu li a,
.responsive-menu li a {
  color: #aeaeae;
  letter-spacing: 0.03125rem;
  font-size: 1rem;
}

.responsive-menu li a {
  display: block;
  padding: 0 1.25rem;
}

.header-menu li a:active,
.responsive-menu li a:active,
.header-menu li a.active {
  color: #EEE;
}

.header-logo {
  cursor: pointer;
  width: 9rem;
}

.header-logo-img {
  width: 12.5rem;
  padding: 0.6375rem 0;

  border-radius: 0.125rem;
}

.responsive-btn {
  display: none;
}

.responsive-menu {
  display: none;
  width: 100%;
  background-color: #070707
}

.responsive-menu li {
  border-top: 0.03125rem solid #616161;
  padding: 1.2rem;
  color: #FFF;
}

.responsive-menu li:last-child {
  border-bottom: 0.03125rem solid #616161;
}

.contenido { overflow-x: hidden;}

.contenido-rack-vent {
  height: 0.75rem;
  background-color: #000;
  border-radius: 0.175rem;
}

.contenido-rack-tuerca {
  width: 2.3125rem;
  padding: 0.75rem;
}

.contenido-rack-tuerca-vent-top {
  padding: 0.75rem 0.75rem 0;
}

.contenido-rack-tuerca-vent-bottom {
  padding: 0 0.75rem 0.75rem;
}

.contenido-rack-botones-boton {
  width: 5.625rem;
  border-left: 0.125rem solid #555;
}

.contenido-rack-botones-boton p {
  color: #999;
  text-align: center;
}

.boton-ffwd {
  width: 5.625rem;
  border-right: 0.125rem solid #555;
}


/*SLIDER*/

/* .contenido-carousel {
  height: calc(100dvh - 9.4675rem);
} */

.contenido-carousel-celula {
  background-color: #000;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.contenido-carousel-celula--1 {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%),
    url(../img/hero/hero_1920.webp);
  background-repeat: no-repeat;
}

@media (max-width: 80rem) {
  .contenido-carousel-celula--1 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero_1280.webp);
  }
}

@media (max-width: 48rem) {
  .contenido-carousel-celula--1 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero_768.webp);
  }
}

@media (max-width: 30rem) {
  .contenido-carousel-celula--1 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero_480.webp);
  }
}

.contenido-carousel-celula--2 {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%),
    url(../img/hero/hero2_1920.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@media (max-width: 80rem) {
  .contenido-carousel-celula--2 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero2_1280.webp);
  }
}

@media (max-width: 48rem) {
  .contenido-carousel-celula--2 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero2_768.webp);
  }
}

@media (max-width: 30rem) {
  .contenido-carousel-celula--2 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero2_480.webp);
  }
}

.contenido-carousel-celula--3 {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%),
    url(../img/hero/hero3_1920.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@media (max-width: 80rem) {
  .contenido-carousel-celula--3 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero3_1280.webp);
  }
}

@media (max-width: 48rem) {
  .contenido-carousel-celula--3 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero3_768.webp);
  }
}

@media (max-width: 30rem) {
  .contenido-carousel-celula--3 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero3_480.webp);
  }
}

.contenido-carousel-celula--4 {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%),
    url(../img/hero/hero4_1920.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@media (max-width: 80rem) {
  .contenido-carousel-celula--4 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero4_1280.webp);
  }
}

@media (max-width: 48rem) {
  .contenido-carousel-celula--4 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero4_768.webp);
  }
}

@media (max-width: 30rem) {
  .contenido-carousel-celula--4 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 30%), url(../img/hero/hero4_480.webp);
  }
}


/*PADS*/

.contenido-pads {
  width: 100%;
  max-width: 82.5rem;
  padding: 5rem 2% 3.25rem 2%;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.contenido-pads.is-visible {
  transform: translate(0);
  opacity: 1;
}

.contenido-pads svg {
  width: 33%;
}

.contenido-pads svg.pad-especial {
  width: 66%;
}

.contenido-pads-caja {
  padding: 2%;
}

.contenido-pads-caja-pad {
  padding-bottom: 61%;
  border-radius: 0.125rem;
  position: relative;
}


.contenido-pads-caja-texto {
  min-height: 3.75rem;
}

.contenido-pads-caja-texto h2 {
  margin-top: 1.875rem;
  font-size: 1.5rem;
  letter-spacing: 0.03125rem;
}

.contenido-pads-caja-texto h2:hover {
  color: #FFF;
}

.contenido-pads-caja-pad-in {
  height: 100%;
  position: absolute;
  padding: 6%;
}

.contenido-pads-caja-pad-in-cuadro {
  height: 100%;
  border: 0.125rem solid #660000;
  border-radius: 0.125rem;
  text-align: center;
}

.contenido-pads-caja-pad-in-cuadro:hover {
  border-color: #AA0000;
}

.contenido-pads-caja-pad-in-cuadro:active {
  border-color: #FF3300;
}

.contenido-pads-caja-pad-in-cuadro-img {
  height: 100%;
  position: relative;
}

.footer {
  padding: 2.5rem;
}

.footer-menu {
  font-weight: 300;
}

.footer-menu li {
  padding: 0;
}

.footer-menu li a {
  padding: 0 1.25rem;
  color: #666;
}

.st0 {
  fill: #676767;
  stroke: #010101;
  stroke-miterlimit: 10;
}

.st0.trazo-especial {
  stroke-width: 0.5;
}

.st0:hover {
  fill: #898989;
}


/*EQUIPO*/
.isotope-grid {
  max-width: 82.5rem;
  margin: 3.125rem auto;
}

.contenido-pads-caja.equipo {
  padding: 4% 2%;
}

.contenido-pads-caja-equipo {
  padding-bottom: 166%;
  border-radius: 0.125rem;
  position: relative;
  border: 0.125rem solid #292929;
}

.contenido-pads-caja-equipo-in {
  height: 100%;
  position: absolute;
  padding: 10%;
}

.contenido-pads-caja-equipo-img {
  height: 45%;
  padding: 10%;
  background-color: #FFF;
  border: 0.125rem solid #000;
  box-shadow: inset 0rem 0rem 0.3125rem
}

.contenido-pads-caja-equipo-img img {
  height: 100%;
}

.contenido-pads-caja-equipo-titulo {
  padding-top: 2.5rem;
}

.contenido-pads-caja-equipo-titulo h6 {
  color: #FFF;
}

.contenido-pads-caja-equipo-info p {
  color: #AAA;
}

.equipo .contenido-lcd-display-text h3 {
  padding: 0.625rem;
  font-size: 1.5rem;
}

.equipo .contenido-pads-caja-equipo-lcd {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10%;
}


/*SECCIONES*/
.rack-border {
  border-left: 2.5rem solid #151315;
  border-right: 2.5rem solid #151315;
}

.contenido-seccion {
  width: 100%;
  max-width: 70%;
  padding: 8rem 4.5% 8rem 4.5%;

}

.contenido-seccion.nosotros {
  padding: 2rem 4.5% 8rem 4.5%;
  max-width: 60rem;
}

.contenido-seccion.personal-tecnico {
  min-height: calc(100vh - 25.5rem);
}

.contenido-seccion.alquiler {
  min-height: calc(100vh - 31.5rem);
}

.contenido-seccion.gestion-espacios p {
  position: absolute;
  top: 30rem;
}

.contenido-seccion.eventos-espectaculos p {
  position: absolute;
  top: 0;
  padding-top: 1.25rem;
}

.contenido-seccion.reparaciones p {
  position: absolute;
  top: 1.25rem;
  padding-top: 1.25rem;
}

.servicios .contenido-seccion-in-r,
.proyectos .contenido-seccion-in-r {
  padding-top: 6.25rem;
}

.contenido-seccion h3 {
  padding-top: 3.75rem;
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgb(255, 17, 0);
  margin-bottom: 0.625rem;
}

.contenido-seccion p {
  padding-bottom: 0.625rem;
  font-size: 1.125rem;
  line-height: 1.625rem;
  opacity: 0.93;
}

.contenido-seccion.personal-tecnico p,
.contenido-seccion.alquiler p {
  padding-top: 0;
}

.contacto {
  padding-bottom: 6.25rem;
}

.contacto h3 {
  padding-top: 2rem;
}

.content-data-contacto p {
  padding-top: 0.625rem;
  font-size: 1.125rem;
  font-weight: 300;
  color: #DDD;
}

.contenido-seccion p.cursiva {
  font-style: italic;
}

.contenido-descarga p {
  padding: 2.5rem;
}

.contenido a {
  color: #FFF;
}

.gestion-espacios .contenido-seccion-in-l {
  padding-right: 0;
  padding-bottom: 3.75rem;
}

/*LCD*/

.contenido-lcd-marco {
  border: 0.14375rem solid #000;
}

.contenido-lcd-display-text {
  font-family: 'TickingTimebombBB';
  font-size: 2.625rem;
  color: #0FF;
}

.contenido-lcd-display-text h3 {
  padding: 1.25rem;
}

.fulgor {

  animation: lcd-fulgor 0.05s linear 2s infinite alternate;

}

@keyframes lcd-fulgor {
  0% {
    text-shadow: 0 0 0.625rem #0000AA;
  }

  50% {
    text-shadow: 0 0 1.25rem #0000ff;
  }

  100% {
    text-shadow: 0 0 0.625rem #000099;
  }
}

.refulgor {

  animation: lcd-refulgor 0.05s linear 2s infinite alternate;
}

@keyframes lcd-refulgor {
  0% {
    box-shadow: inset 0 0 0.9375rem #001111;
  }

  50% {
    box-shadow: inset 0 0 0.9375rem #004444;
  }

  100% {
    box-shadow: inset 0 0 0.9375rem #002222;
  }
}


html { overflow-y: scroll; }
/* CARRUSEL */
.proyectos-carousel {
  width: 100%;
}

.flickity-viewport,
.proyectos-carousel .flickity-viewport {
  border-radius: 0.25rem;
  overflow: hidden;
  height: 100% !important;
}

/* Cada slide */
.carousel-cell {
  width: 100%;
  height: 100%;
  margin-right: 0;
  cursor: pointer;
  position: relative;

}

/* <picture> + img ocupan todo el slide */
.carousel-cell picture,
.carousel-cell__img {
  display: block;
  width: 100%;
  height: 100%;
  
}

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

.proyectos-carousel .carousel-cell__img {
  object-position: center;
}

@media (max-width: 48rem) {
  .carousel-cell__img {}
}

/* Rótulo sobre la imagen */
.carousel-cell__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 100%);
  padding: 2rem 1rem 0.875rem;
  color: #fff;
  font-family: 'Rubik', sans-serif;
}

.carousel-cell__caption-title {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.25rem;
}

.carousel-cell__caption-desc {
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0;
  opacity: 0.85;
}

/* Flechas Flickity */
.proyectos-carousel .flickity-button {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.proyectos-carousel .flickity-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

.proyectos-carousel .flickity-button-icon {
  fill: #fff;
}

/* Dots */
.proyectos-carousel .flickity-page-dots .dot {
  background: #fff;
  opacity: 0.5;
}

.proyectos-carousel .flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/* ── MODAL ────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.88);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.is-open {
  display: flex;
}

.modal-box {
  position: relative;
  max-width: 56.25rem;
  width: 100%;
  background: #1a1a1a;
  border-radius: 0.25rem;
  overflow: hidden;
}

.modal-box__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  background: #000;
}

.modal-box__info {
  padding: 0.875rem 1.25rem;
}

.modal-box__title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 0 0.25rem;
}

.modal-box__desc {
  font-family: 'Rubik', sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  color: #aaa;
  margin: 0;
}

.modal-box__close {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 2.125rem;
  height: 2.125rem;
  background: rgba(0, 0, 0, 0.6);
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.1875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  font-family: sans-serif;
  transition: border-color 0.2s;
}

.modal-box__close:hover {
  border-color: #fff;
}

/* Nav dentro del modal */
.modal-box__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0.625rem;
  pointer-events: none;
}

.modal-box__nav-btn {
  pointer-events: all;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(0, 0, 0, 0.55);
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.1875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  transition: border-color 0.2s;
}

.modal-box__nav-btn:hover {
  border-color: #fff;
}

.modal-box__nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

@media screen and (max-width: 64rem) {

  .col-50-t {
    width: 50%;
  }

  .col-100-t {
    width: 100%;
  }

  .header-menu {
    display: none;
  }

  .responsive-btn {
    display: block;
    width: 1.5625rem;
  }

  .contenido-seccion,
  .contenido-seccion.nosotros {
    width: 100%;
    max-width: none;
    padding: 4rem clamp(1rem, 4%, 4%) 4rem clamp(1rem, 4%, 4%);
  }

  .contenido-seccion.personal-tecnico {
    min-height: auto;
  }


  .contenido-seccion.alquiler {
    min-height: auto;
  }

  .contenido-seccion.gestion-espacios p,
  .contenido-seccion.eventos-espectaculos p,
  .contenido-seccion.reparaciones p {
    position: static;
    padding-top: 0.625rem;
  }

  .contenido-lcd-display-text {
    font-size: 2.25rem;
    text-align: center;
  }

  .contenido-seccion-in-r {
    display: none;
  }

  .contenido-seccion.reparaciones p,
  .contenido-seccion.gestion-espacios p {
    position: static;
  }

  .contenido-pads-caja-y-texto {
    min-height: auto;
  }

}

@media screen and (max-width: 42.5rem) {

  .col-100-m {
    width: 100%;
  }

  /* .contenido-rack-tuerca {
  width: 1.8rem;
  padding: 0.44rem 0.57rem;
}

.contenido-rack-tuerca-vent-top {
  padding: 0.75rem 0.75rem 0;
}

.contenido-rack-tuerca-vent-bottom {
  padding: 0 0.75rem 0.75rem;
} */

  /* .contenido-rack-tuerca {
    width: 1.4rem;
    padding: 0.4rem;
  }

  .contenido-rack-vent {
    height: 0.5rem;
  } */

  .contenido-seccion,
  .contenido-seccion.nosotros {
    width: 100%;
    max-width: none;
    padding: 2rem clamp(1rem, 2%, 2%) 2rem clamp(1rem, 2%, 2%);
  }

  .contacto h3 {
    padding-top: 1rem;
  }

  .contenido-pads-caja {
    margin-bottom: 4%;
  }

  .contenido-pads-caja-texto h2 {
    margin-top: 7%;

  }

  .header-logo-img {
    width: 12.3rem;
  }

  .footer-logo {
    margin-bottom: 1.25rem;
  }

  .footer,
  .footer-menu ul {
    flex-direction: column-reverse;
    padding: 1.25rem;
  }

  .footer-menu ul li {
    margin: 1.2rem 0;
  }

  .footer-menu li a {
    padding: 0;
  }

  .padd-l-r-40 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}