body a{
    transition: 0.3s all;
    -webkit-transition: 0.3s all;
    -o-transition: 0.3s all;
    -moz-transition: 0.3s all;
    -ms-transition: 0.3s all;
  }
  body{
    animation: fade-body 0.8s ease-in-out;
  }
  @keyframes fade-body {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  html{
    scroll-padding-top: 90px;
  }
  html, body{
      font-size: 100%;
      font-family: 'Grift', sans-serif;
      scroll-behavior: smooth;
      background-color: var(--Azul);
      color: var(--Gris);
      overflow-x: hidden;
  }
  @font-face {
    font-family: Grift-Black;
    src: url("../fonts/Grift-Black.otf") format("opentype");
    font-display: swap;
  }
  @font-face {
    font-family: Grift-Medium;
    src: url("../fonts/Grift-Medium.otf") format("opentype");
    font-display: swap;
  }
  @font-face {
    font-family: Grift-Thin;
    src: url("../fonts/Grift-Thin.otf") format("opentype");
    font-display: swap;
  }
  
  * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }
  
  /*Estilos de fuentes*/
  h1 {font-family: 'Grift-Black'; font-size: 45px; font-weight: 900; line-height: 45px; color: var(--Gris);}
  h2 {font-family: 'Grift-Black'; font-size: 40px; font-weight: 900; line-height: 40px;}
  h3 {font-family: 'Grift-Black'; font-size: 30px; font-weight: 500; line-height: 30px;}
  p {font-family: 'Grift-Medium'; font-size: 18px; line-height: 20px; color: var(--Azulf);}
  a {font-family: 'Grift-Medium'; font-size: 16px;}
  span {font-family: 'Grift-Thin'; font-size: 12px;}
  /*Cierra estilos de fuentes*/


  :root {
    --blanco: #f7f7f7;
    --Gris: #c9c9c9;
    --Azul: #151b31;
    --Rojo-1: #d61841;
    --Rojo-2: #8e192d;
    --Negro: #1a1a1a;
}
  
  
  /*Inicia Barra de navegación*/
  .navbar-brand img{
    width: 250px;
    height: auto;
  }
  
  .navbar{
      background-color: var(--Gris);
      height: 90px;
      text-align: center;
      transition: all 0.5s ease;
        & a{
            margin: 0;
            padding: 0%;
        }
        & ul{
          align-items: center;
        }
  }
  .navbar-nav{
    gap: 20px;
    background-color: none;
  }
  .nav-link{
      color: var(--Azul);
    &:hover{
        color: var(--Rojo-1);
    }
  }

  .button-nav{
    color: var(--Gris);
    background-color: var(--Azul);
    border-radius: 50px;
    padding: 5px 30px;
    border: none;

    & button{
      color: var(--Gris);
    }
    &:hover{
      color: var(--Gris);
      background-color: var(--Rojo-1);
    }
  }


  .active{ color: var(--Rojo-1);}

  /*inicia dropdown*/
  .dropdown-item{
    color: var(--Gris);
  }
  .dropdown-menu{
    padding: 0%;
    margin: 0;
    border: none;
    align-items: center;
    text-align: center;
    background-color: var(--Rojo-1);

    & a{
        padding: 5px 15px;
        &:hover{
            color: var(--Gris);
            background-color: var(--Azul);
        }
        &:focus{
            color: var(--Gris);
            background-color: var(--Azul);
        }
    }
  }
  /*Quitar las siguientes lineas de dropdown para que no sea automatico el despliegue*/

  .dropdown-divider{
    width: 80%;
    margin: 0 auto;
  }
  .dropdown-submenu {
    position: relative;
  }
  .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
  }


  /*termina dropdown*/

  .navbar-toggler{
      font-size: 40px;
  }
  .navbar-toggler:focus{
      outline: none;
  }
  /* Termina navbar*/
  


  .container-fluid{
    max-width: 1300px;
    padding: 25px;
  }
  .header-principal{
    background: url("../assets/Primora_Web_Banner_v1_2026.webp") center no-repeat;
    background-size: cover;
    background-color: var(--Rojo-1);
    min-height: 900px;
    height: auto;
    padding: 30px;
  }
  .header-contacto{
    background: url("../assets/Primora_Web_Banner_v1_2026.webp") center no-repeat;
    background-size: cover;
    background-color: var(--Rojo-1);
    min-height: 200px;
    height: auto;
  }
  .header-contacto-interior{
    min-height: 200px;
    height: auto;
    width: auto;
    align-items: center;
    align-content: center;
    margin: 0 auto;
  }
  .header-principal-contenido{
    min-height: 900px;
    height: auto;
    width: 100%;
    align-items: center;
    align-content: center;
    margin: 0 auto;

    & h1{
      max-width: 80%;
      width: 100%;
      animation: scale ease-in-out 0.3s;
    }
    & img{
      max-width: 100%;
      width: 100%;
      height: 100%;
      max-height: 600px;
      margin: 0 auto;
      object-fit: contain;
      animation: scale ease-in-out 0.3s;
      animation-delay: 0.4s;
      animation-fill-mode: both;
    }

  }
  .header-principal-img{
    display: flex;
  }

  .button-header{
    color: var(--Gris);
    background-color: var(--Azul);
    border-radius: 50px;
    padding: 5px 60px;
    border: none;
    font-size: 25px;
    font-weight: 600;
    animation: scale ease-in-out 0.3s;
    animation-delay: 0.2s;
    animation-fill-mode: both;

    & button{
      color: var(--Gris);
    }
    &:hover{
      color: var(--Azul);
      background-color: var(--Gris);
    }
  }

  @keyframes productos-lateral {
    from {
      transform: translateX(200px);
      filter: blur(5px);
      opacity: 0;
    }
    to {
      transform: translateX(0px);
      filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes productos-vertical {
    from {
      transform: translateY(200px);
      filter: blur(5px);
      opacity: 0;
    }
    to {
      transform: translateY(0px);
      filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes scale {
    from {
      transform: scale(0%);
      filter: blur(5px);
    }
    to {
      transform: scale(100%);
      filter: blur(0px);
      opacity: 1;
    }
  }

  .anima{
    opacity: 0;
  }
  .visible-lateral.visible{
    animation: productos-lateral ease-in-out 0.5s both;
  }
  .visible-vertical.visible{
    animation: productos-vertical ease-in-out 0.5s both;
  }
  .escala.visible{
    animation: scale ease-in-out 0.5s both;
  }
  .somos{
    height: 100%;
    align-items: center;

    & img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .somos-txt{
    align-content: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 50px 25px;

    & b{
      color: var(--Rojo-1);
    }
    & h2{
      margin-bottom: 30px;
    }
  }

  .soluciones-industria{
    height: 500px;
    align-content: center;
    text-align: center;
    background: var(--Rojo-1) url("../assets/Primora_Web_Banner-Descanso_v1_2026.webp") no-repeat center;
    color: var(--blanco);
  }
  .soluciones-industria-txt{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-width: 80%;
    margin: 0 auto;
    gap: 20px;

    & h1{
      color: var(--blanco);
    }
    & b{
      color: var(--Azul);
      text-shadow: var(--blanco) 0px 0px 10px;
    }
  }


  .calidad{
    display: flex;
    flex-direction: column;
    min-height: 450px;
    height: 100%;
    text-align: center;
    gap: 20px;
    padding: 50px 25px;
    justify-content: center;
    align-items: center;

    & b{
      color: var(--Rojo-1);
    }
    & p{
      max-width: 600px;
      
    }
    & span{
      background-color: var(--Rojo-1);
      padding: 30px 60px;
      border-radius: 30px;
      font-size: 18px;
      line-height: 16px;
      font-weight: 800;
      font-family: "Grift-Black";
      color: var(--Gris);
      max-width: 600px;
    }
  }

  .Mapa-Mexico{
    padding: 120px 25px;
    background: url("../assets/Primora_Back_Mapa_v1_2026.webp") no-repeat center;
    background-size: cover;
    max-width: 100%;
    width: 100%;
    height: auto;
    text-align: center;
    align-content: center;
    justify-content: center;

    & h2,p{
      color: var(--Azul);
    }
    & b{
      color: var(--Rojo-1);
    }
    & p{
      max-width: 500px;
      width: 100%;
      margin: 20px auto;
    }
    & .container > :nth-child(3){/*Imagen del mapa*/
      max-width: 100%;
      height: auto;
      margin: 50px 0;
    }
    & .presencia img{
      width: 30px;
      height: auto;
      margin-right: 5px;
    }
    & .presencia{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      max-width: 80%;
      width: 100%;
      height: auto;
      margin: 20px auto;
      gap: 20px;
      text-align: center;
      align-content: center;
      justify-content: center;
        & span{
            font-size: 16px;
            font-weight: 800;
            font-family: "Grift-Black";
            color: var(--Azul);
            }
    }
  }


  .industrias{
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 150px 25px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    & h2{
      max-width: 700px;
      width: 100%;
      height: auto;
      text-align: center;
      margin: 0px auto 50px;
    }
    & b{
      color: var(--Rojo-1);
    }
  }

  .industrias-card-section{
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-content: center;
    justify-content: center;
    align-items: center;
  }

  .industrias-card{
    border: solid var(--Rojo-1) 2px;
    border-radius: 30px;
    padding: 50px 25px;
    width: 30%;
    height: auto;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 30px;

    & h3{
      background-color: var(--Gris);
      color: var(--Azul);
      padding: 10px 25px;
      border-radius: 25px;
    }
    & p{
      width: 200px;
      font-size: 18px;
    }
  }
  .industrias-card-img{
    width: 180px;
    height: 180px;
    background-color: var(--Rojo-1);
    align-content: center;
    padding: 25px;
    border-radius: 150px;

    & img{
      max-width: 150px;
      max-height: 120px;
      width: 100%;
      height: auto;
    }
  }
  .industrias-lista{
    display: flex;
    flex-direction: column;
    min-height: 100px;
    height: auto;

    & span{
      font-family: "Grift-Medium";
      font-size: 16px;
    }
  }

  .descanso{
    height: 500px;
    width: 100%;
    background-image: url("../assets/Primora_Web_Banner-Descanso2_v1_2026.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .productos-main>.container{
    background-color: var(--Gris);
  }

  .productos-main>.container .row>:nth-child(2){
    max-width: 500px;
    width: 100%;
    height: auto;
    padding: 50px 25px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .productos-main{
    margin-bottom: 80px;

    & h3{
      color: var(--Rojo-1);
    }
    & p{
      font-size: 16px;
      line-height: 18px;
      color: var(--Azul);
    }
    & img{
      height: 100%;
      object-fit: cover;
    }
  }

  .productos-main-header{
    text-align: center;
    padding: 80px 25px;
    color: var(--Gris);
    & b{
      color: var(--Rojo-1);
    }
    & p{
      color: var(--Gris);
    }
  }

  footer{
    padding: 80px 25px;
    background-color: var(--Rojo-2);
  }
  footer>.container>.row{
    align-items: center;
  }

  .footer-logo{
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  .footer-certificados{
    max-width: 100%;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    gap: 30px;
    color: var(--blanco);
    padding: 25px;
    margin: -30px auto 0;



    & img{
      max-width: 100px;
      width: 100%;
      height: auto;
    }
    & b{
      background-color: var(--Rojo-1);
      padding: 2px 10px;
    }
    & span{
      font-family: "Grift-Medium";
    }

  }
  .direcciones{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: auto;
    padding: 0 25px;
    gap: 15px;
  }
  .sucursales{
    display: flex;
    flex-direction: column;
    max-width: 45%;
    width: 45%;
    height: auto;
    gap: 5px;

    & b{
      font-size: 14px;
      color: var(--blanco);
      background-color: var(--Azul);
      padding: 0px 20px;
      border-radius: 20px;
      align-self: flex-start;
      margin-left: -5px;
    }
    & p{
      font-size: 12px;
      color: var(--blanco);
      line-height: normal;
      margin: 0;
      padding: 0;
    }
    & span{
      font-family: "Grift-Black";
      font-size: 14px;
      color: var(--blanco);
    }
  }
  .servicio-cliente{
    color: var(--blanco);
    padding: 25px;

    & b{
      display: inline-block;
      font-size: 14px;
      color: var(--blanco);
      background-color: var(--Azul);
      padding: 0px 20px;
      border-radius: 20px;
      margin-left: -5px;
    }
  }
  .servicio-cliente-info{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    
    & img{
      max-width: 15px;
      width: 100%;
      height: auto;
      margin-right: 5px;
    }
    & p{
      font-size: 12px;
      line-height: auto;
      margin: 20px 0 0 0;
    }
  }

  .redes{  
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    gap: 15px;
    justify-content: center;

    & img{
      max-width: 50px;
      width: 100%;
      height: auto;
    }
  }
  .avisos{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    gap: 25px;
    margin-top: 15px;

    & a{
      color: var(--blanco);
      text-decoration: none;
      font-family: "Grift-Thin";
    }
  }

  .button-form{
    color: var(--Gris);
    background-color: var(--Rojo-1);
    border-radius: 50px;
    padding: 5px 60px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    animation: scale ease-in-out 0.3s;
    animation-delay: 0.2s;
    animation-fill-mode: both;
    margin-top: 10px;

    & button{
      color: var(--Gris);
    }
    &:hover{
      color: var(--Azul);
      background-color: var(--Gris);
    }
  }
  form{
    padding: 25px;
  }
  .form-group{
    margin: 10px 0;
  }
  .form-group>label{
    margin-bottom: 5px;
  }
  input textarea,::placeholder{
    opacity: 0.5!important;
  }
  .contacto-web>.row{
    align-items: center;
  }

  .sucursales-contacto{
    display: flex;
    flex-direction: column;
    max-width: 45%;
    width: 45%;
    height: auto;
    gap: 5px;

    & b{
      font-size: 14px;
      color: var(--blanco);
      background-color: var(--Rojo-1);
      padding: 0px 20px;
      border-radius: 20px;
      align-self: flex-start;
      margin-left: -5px;
    }
    & p{
      font-size: 12px;
      color: var(--blanco);
      line-height: normal;
      margin: 0;
      padding: 0;
    }
    & span{
      font-family: "Grift-Black";
      font-size: 14px;
      color: var(--blanco);
    }
  }
  .redes-contacto{  
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    gap: 15px;
    justify-content: flex-start;

    & img{
      max-width: 30px;
      width: 100%;
      height: auto;
    }
  }
  .direcciones-contacto{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: auto;
    gap: 15px;
  }
  .contacto-info{
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .servicio-cliente-contacto{
    color: var(--blanco);

    & b{
      display: inline-block;
      font-size: 14px;
      color: var(--blanco);
      background-color: var(--Rojo-1);
      padding: 0px 20px;
      border-radius: 20px;
      margin-left: -5px;
    }
  }
  .servicio-cliente-info-contacto{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    
    & img{
      max-width: 15px;
      width: 100%;
      height: auto;
      margin-right: 5px;
    }
    & p{
      font-size: 12px;
      line-height: auto;
      margin-top: 5px;
    }
  }



  .whatsapp{
    display: block;
    position: fixed;
    bottom: 50px;
    right: 50px;
    max-width: 100px;
    width: 100%;
    z-index: 9999;
    border-radius: 50px;
    background-color: #25d366;
    transition: all 0.3s;
    animation: pulse ease-in-out infinite 1s;

    & img{
      width: 100%;
      height: auto;
      padding: 20px;
    }
    &:hover{
      scale: 1.1;
    }
  }
  @keyframes pulse {
    0%{
      scale: 0.9;
    }
    50%{
      scale: 1;
    }
    100%{
      scale: 0.9;
    }
  }

























































  @media (min-width: 600px) {
  .dropdown:hover > .dropdown-menu {
    display: block;
  }
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }

  }
  @media (max-width: 991px) {
    h1{font-size: 40px; line-height: 35px;}
    .header-principal-contenido{
      align-content: center;
      justify-content: center;
      gap: 50px;
      text-align: center;
      & h1{
        margin: 20px auto;
        max-width: 100%;
        width: 100%;
        font-size: 35px;
      }
    }
    .navbar-nav{
      background-color: var(--Gris);
      padding: 50px 0;
    }
    .navbar{
      height: auto;
    }

    .industrias-card-section{
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-content: center;
      justify-content: center;
      align-items: center;
    }
  
    .industrias-card{
      border: solid var(--Rojo-1) 2px;
      border-radius: 30px;
      padding: 50px 25px;
      width: 80%;
      height: auto;
      text-align: center;
      align-items: center;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 20px;
    }
  }

  @media (max-width: 576px) {
    .footer-certificados{
      flex-wrap: wrap;
      text-align: center;
      align-items: center;
      justify-content: center;
    }
  }
  @media (min-width: 1600px) {
      h1 {font-family: 'Grift-Black'; font-size: 55px; font-weight: 900; line-height: 55px; color: var(--Gris);}
  }