@import url('https://fonts.googleapis.com/css2?family=Rubik+Scribble&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient(45deg, #202837, #1f2425)!important;
    background: linear-gradient(135deg, #111926, #1b212f, #090c10)!important;
}

.modal {
    /* --bs-modal-bg: linear-gradient(45deg, #202837, #1f2425)!important;
    --bs-modal-bg: linear-gradient(135deg, #111926, #1b212f, #090c10)!important; */
    --bs-modal-bg: #1e2530!important;
    --bs-modal-border-color: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-header-border-color: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-header-color: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-footer-border-color: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-footer-color: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-close-color: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-close-hover-color: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-close-hover-bg: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-close-hover-border-color: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-close-focus-color: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-close-focus-bg: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-close-focus-border-color: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-close-focus-box-shadow: rgba(255, 217, 0, 0.671)!important;
    --bs-modal-close-focus-box-shadow: 0 0 0 0.2rem rgba(255, 217, 0, 0.671)!important;
}

.titulo {
    font-family: "Rubik Scribble", system-ui;
    font-weight: 400;
    font-style: normal;
}

.verbos {
    color: rgba(255, 217, 0, 0.671);
}

.tracking-widest {
    letter-spacing: 0.18em;
}

.instruc {
    font-family: "Afacad Flux", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "slnt" 0;
    letter-spacing: 0.08em;
}

.line-p {
    width: 2%;
    color: #ffd700;
    transform:rotatez(90deg);
}

i:hover {
    color: rgba(255, 217, 0, 0.671);
    transition: 0.6s;
}

.link-secondary, .fuken {
    color: #ffd90060!important;
}

.link-secondary:hover {
    color: rgba(255, 217, 0, 0.671)!important;
    transition: 0.6s;
}

.fl-1 {
    font-size: 4em;
    padding-top: 6%;
}

.m-v-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(24, 24, 24, 0.771) rgba(255, 217, 0, 0.271);;
}

.card {
    width: 60%;
    background-color: transparent;
    border: none;
    /* outline: 1.5px solid rgba(255, 217, 0, 0.671); */
    outline: 1.5px solid rgba(255, 217, 0, 0.271);
    border-radius: 10px;
    padding: 20px;
}




/**************************/
/* Hexagonos */
ul {
    padding-left: 0;
}

.hexagon { /* rectángulo negro */
    width: 100px;
    height: 200px;
    transform: rotate(120deg);
}

.hexagon-in1 { /* rectángulo blanco */
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-60deg);
    text-decoration: none;
}

.hexagon-in2 { /* rectángulo rojo */
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-60deg);
}

.hexagon {
    visibility: hidden;
    overflow: hidden;
}

.hexagon-in1 {
    overflow: hidden;
}

.hexagon-in2 {
    visibility: visible;
}

ul {
    text-align: center;
}

.hexagon {
    display: inline-block;
    list-style-type: none;
}

.hexagon-in2 {
    background-color: #1e2530;
    font-family: Courgette, sans-serif;
    transition: 1.5s ease-out;
    text-transform: uppercase;
    color: #ffffff87;
}

.hexagon-in2:hover {
    animation: cssAnimation_0 1500ms infinite ease-out;
}

.hexagon-in2:hover {
    color: #FCE001;
}

.hex-content-inner:hover .title {
    -webkit-animation: focus-in-contract 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-contract 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.mdown {
    margin-top: -130px;
}

.icon {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 11px;
}

.hex-content-inner .title {
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 14px;
    text-transform: uppercase;
}








/************* ANIMACIONES ******************/

@-webkit-keyframes focus-in-contract {
    0% {
        letter-spacing: 1em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes focus-in-contract {
    0% {
        letter-spacing: 1em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

/***************************/

@keyframes cssAnimation_0 {
    to {
      background: linear-gradient(45deg, #202837, #1f2425);
      background: linear-gradient(180deg, #202837, #1f2425);
    }
  }

  /***************************/







  /************ Media Querys ***************/

  @media screen and (max-width: 767px) {

    .hexagon { /* rectángulo negro */
        /* width: 50px;
        height: 150px; */
        width: 70px;
        height: 170px;
    }

    .mdown {
        margin-top: -125px;
    }

    .icon {
        margin-bottom: 0px;
    }
    
    .hex-content-inner .title {
        display: none;
    }
    
  }



  @media screen and (max-width: 404px) {

    .hexagon { /* rectángulo negro */
        /* width: 40px; */
        width: 60px;
    }

    .mdown {
        margin-top: -135px;
    }
    
  }

  /************ Fin Media Querys ***************/



  /************ Model Viewer ***************/
#modelViewer {
    margin: 0 auto;
    width: 500px;
    height: 320px;
}

/* This keeps child nodes hidden while the element loads */
:not(:defined)>* {
    display: none;
}

model-viewer {
    overflow-x: hidden;
}

#ar-button {
    background-image: url(../img/ic_view_in_ar_new_googblue_48dp.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 12px 50%;
    background-color: #424242cd;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    bottom: 132px;
    padding: 0px 16px 0px 40px;
    font-family: Roboto Regular, Helvetica Neue, sans-serif;
    font-size: 14px;
    color: rgba(255, 217, 0, 0.571);
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
}

#ar-button:active {
    background-color: rgba(51, 51, 51, 0.571);
}

#ar-button:focus {
    outline: none;
}

#ar-button:focus-visible {
    outline: 1px solid rgba(255, 217, 0, 0.671);
}

@keyframes circle {
    from {
        transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg);
    }
}

@keyframes elongate {
    from {
        transform: translateX(100px);
    }

    to {
        transform: translateX(-100px);
    }
}

model-viewer>#ar-prompt {
    position: absolute;
    left: 50%;
    bottom: 175px;
    animation: elongate 2s infinite ease-in-out alternate;
    display: none;
}

model-viewer[ar-status="session-started"]>#ar-prompt {
    display: block;
}

model-viewer>#ar-prompt>img {
    animation: circle 4s linear infinite;
}

model-viewer>#ar-failure {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 175px;
    display: none;
}

model-viewer[ar-tracking="not-tracking"]>#ar-failure {
    display: block;
}

  .slider {
      width: 100%;
      text-align: center;
      overflow: hidden;
      position: absolute;
      bottom: 5px;
  }

  .slides {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
  }

  .slide {
      scroll-snap-align: start;
      flex-shrink: 0;
      width: 80px;
      height: 80px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-color: rgba(51, 51, 51, 0.671);
      margin-right: 10px;
      border-radius: 10px;
      border: none;
      display: flex;
  }

  .slide.selected {
      border: 1.5px solid rgba(255, 217, 0, 0.671);
  }

  .slide:focus {
      outline: none;
  }

  .slide:focus-visible {
      outline: .7px solid rgba(255, 217, 0, 0.671);
  }

  /************ Fin Model Viewer ***************/






/************ Pagina de contacto ******************/
/************ Style del formulario ******************/

form {
    padding: 0px 16px 0px 16px;
}

input, textarea, button#submit, .card-button {
    background: linear-gradient(45deg, #202837, #1f2425)!important;
    border: none!important;
}

input:focus, textarea:focus {
    border: none!important;
    outline: none!important;
    outline-color: rgba(255, 217, 0, 0.5)!important;
    outline-style: solid!important;
    outline-width: 0.31px!important;
}

input::placeholder, textarea::placeholder {
    color: rgba(255, 217, 0, 0.2)!important;
}

input[type="submit"], .card-button {
    color: rgba(255, 217, 0, 0.371)!important;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 14px;
    text-transform: uppercase;
}

input[type="submit"]:hover, .card-button:hover {
    color: rgba(255, 217, 0, 0.571)!important;
    -webkit-animation: focus-in-contract 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-contract 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


/* Footer */

.footer {
    color: rgba(255, 217, 0, 0.671);
    transition: 0.6s;
}



/* Fuente de las tarjetas del equipo */
.card-text-manual {
    font-family: "Nothing You Could Do", cursive;
    font-weight: 500;
    font-style: normal;
}

/* Fondo de las tarjetas de servicios */
.list-group-item {
    background-color: transparent!important;
    /* border: rgba(255, 217, 0, 0.271) solid 1px !important; */
}

.price {
    font-size: 1.5em;
}