/* tipografia y variables */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root{
  --fondo-oscuro: #2d355e; 
  --fondo-claro: #f8f9fa; 
  --fondo-alternativo: #eff0f3; 
  --font-family: "Roboto", sans-serif;  

  /* Colores adicionales */
  --accent-1: #ffb400;   /* dorado moderno */
  --accent-2: #4a90e2;   /* azul corporativo */
  --accent-3: #50c9c3;   /* verde-agua */
  --text-claro: #ffffff;
  --text-muted: #d4d7e6;
  --max-width: 1200px;

  --primary: #2d355e;
  --accent: #ffb400;
  --bg-light: #f9f9f9;
  --text-dark: #222;
  --text-muted-2: #666;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,0.12);

}

body{
  background-color: var(--fondo-claro);
}

.fisica{
  background-color: rgba(255, 25, 0, 0.75); /* #ff1900bf */
}
.quimica{
  background-color: rgba(0, 128, 0, 0.75); /* #008000bf */
}
.biologia{
  background-color: rgba(128, 0, 128, 0.75); /* #800080bf */
}
.labware{
  background-color: rgba(0, 0, 255, 0.75); /* #0000ffbf */
}

.bg-fisica{
  background: linear-gradient(to right, rgba(255, 25, 0, 0.6), rgba(255, 25, 0, 0.7)),
                url('../img/fisica_1.webp') center/cover no-repeat;
}
.bg-quimica{
  background: linear-gradient(to right, rgba(0, 128, 0, 0.6), rgba(0, 128, 0, 0.7)),
                url('../img/quimica_1.webp') center/cover no-repeat;
}
.bg-biologia{
  background: linear-gradient(to right, rgba(128, 0, 128, 0.6), rgba(128, 0, 128, 0.7)),
                url('../img/microscopio_1.webp') center/cover no-repeat;
}
.bg-labware{
  background: linear-gradient(to right, rgba(0, 0, 255, 0.6), rgba(0, 0, 255, 0.7)),
                url('../img/accesorios_1.webp') center/cover no-repeat;
}

.text-fisica{
  color: rgba(255, 25, 0, 0.75);
}
.text-quimica{
  color: rgba(0, 128, 0, 0.75);
}
.text-biologia{
  color: rgba(128, 0, 128, 0.75);
}
.text-labware{
  color: rgba(0, 0, 255, 0.75);
}

.text-labware:hover {
  color: rgba(0, 0, 255, 1);
}
.text-fisica:hover{
  color: rgba(255, 25, 0, 1);
}
.text-quimica:hover{
  color: rgba(0, 128, 0, 1);
}
.text-biologia:hover{
  color: rgba(128, 0, 128, 1);
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* ####################################################################### */
/* inicio de vista de home */

/* --------------------------------- */

/* boton CTA */
.btn-cta {
  font-size: 1.1rem;
  font-weight: bolder;
  color: #272343;
  background-color: #ffd803;
  padding: 15px;
  text-decoration: none; 
  border: solid 1px #ffd803;
  border-radius: 20px 20px 0px 20px;
  transition: 0.4s ease-in-out all;
}

.btn-cta:hover{
  animation: rebote 0.4s ease;
  animation-fill-mode: both;
  background-color: #d9ba09;
  border: solid 1px #d9ba09;
  color: #272343;
}

@keyframes rebote {
  0%   { transform: scale(1); }
  33%  { transform: scale(1.05); }
  66% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* --------------------------------- */

/* barra de navegacion */
nav {
    background-color: var(--fondo-oscuro);
    height: 100px;
}

.logo {
    min-width: 150px;
    width: 70%;
}

#lista {
    padding: 20px;
    background-color: var(--fondo-oscuro);

    > .wsp{
        min-width: 125px;
    }
}

@media (width >= 992px) {
  .wsp{
    margin-left: 16px;
  }
}
.link{
  color: white;
  transition: ease-in-out 100ms all;
  list-style: none;
}

.link:hover{
  color: rgb(226, 226, 240);
}

.link:focus{
  text-decoration: none;
  color: white;
}

.lista-drop{
  background-color: var(--fondo-oscuro);
}

.link-active{
  background-color: #37406e;
  color: rgb(226, 226, 240);
}

.li-drop:hover{
  background-color: var(--fondo-oscuro);
}

/* --------------------------------- */

/* caja de icon-social */
.caja {
  background-color: var(--fondo-oscuro);
  height: 40px;
  display: flex;
  align-items: center;
  gap: 40px;
  > a{
        transition: ease-in-out 100ms all;
    }

    > a:hover{
        scale: 1.1;
    }
}

.caja--nav {
  justify-content: end;
}

/* --------------------------------- */

/* footer */
.footer{
    color: white;
    background-color: var(--fondo-oscuro);
}

/* --------------------------------- */

/* hero principal */
@media (width >= 992px) {
  .hero{
    padding: 0 50px 0 100px;
    display: grid;
    grid-template-areas: 'hero-texto hero-carousel';
    grid-template-columns: repeat(2, 1fr);
    height: calc(100vh - 140px);
    background: linear-gradient(to right, rgba(0, 51, 102, 0.85), rgba(0, 102, 153, 0.85)),
                url('../img/banner4.webp') center/cover no-repeat;
  }

  .hero-texto {
    grid-area: hero-texto;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding-left: 25px;
  }

  .hero-carousel {
    width: 75%;
    min-width: 400px;
    grid-area: hero-carousel;
  }

  .hero p {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 25px 0;
  } 
}

@media ( 576px <= width < 992px) {
  .hero{
    padding-top: 10px;
    background: linear-gradient(to right, rgba(0, 51, 102, 0.85), rgba(0, 102, 153, 0.85)),
                url('../img/banner4.webp') center/cover no-repeat;
    display: grid;
    grid-template-areas: 'hero-carousel'
                         'hero-texto ';
    grid-template-rows: 1fr 0.75fr;
  }

  .hero-texto {
    padding: 0 15px 15px 15px;
    grid-area: hero-texto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;

    >.h1{
      margin: 0;
    }
    
  }

  .hero-carousel {
    max-width: 350px;
    grid-area: hero-carousel;
  }
  
  .hero p {
    color: #fff;
    font-size: 1rem;
    line-height: 1.6;
    padding: 0;
    margin: 0;
  }   

  .btn-cta {
    scale: 0.9;
    margin:0;
    font-size: 1rem;
    color: #272343;
    background-color: #ffd803;
    padding: 10px;
    text-decoration: none; 
    border: solid 1px #ffd803;
    border-radius: 20px 20px 0px 20px;
  }
}

@media (width < 576px) {
  .hero{
    padding:0 0 20px 0;
    background: linear-gradient(to right, rgba(0, 51, 102, 0.85), rgba(0, 102, 153, 0.85)),
                url('../img/banner4.webp') center/cover no-repeat;
    display: grid;
    grid-template-areas: 'hero-carousel'
                         'hero-texto ';
    grid-template-rows: 1fr 0.85fr;
  }

  .hero-texto {
    gap: 15px;
    padding-top: 20px;
    grid-area: hero-texto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    text-align: center;

    >.h1{
      padding: 2px;
      margin: 0;
    }
    
  }

  .hero-carousel {
    max-width: 370px;
    grid-area: hero-carousel;
  }
  
  .hero p {
    /* display: none; */
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 2px;
    margin: 0;
  }   

  .btn-cta {
    scale: 0.9;
    margin:0;
    font-size: 1rem;
    color: #272343;
    background-color: #ffd803;
    padding: 10px;
    text-decoration: none; 
    border: solid 1px #ffd803;
    border-radius: 20px 20px 0px 20px;
  }
}

/* --------------------------------- */


/* clientes-carousel */
@media (width >= 992px) {
  .hero-section {
    background-color: var(--fondo-claro);
    max-width: 1350px;
    padding: 40px 30px;
    > .lead{
        font-size: 1.2rem;
      }

    > h2{
      padding: 10px;
    }
  }

  .foto{
    max-height: 400px;
    object-fit: contain;
    padding-bottom: 20px;
  }
  .video-caja{
    padding: 50px 100px;
  }

/*   .video-container {
    padding: 0 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-content: center;
    height: 500px;
  } */

  .logo-cliente{
    object-fit: contain;
    height: 200px;
  }

  .info{
    padding: 20px 0px;
  }
}

@media (576px <= width < 992px) {
  .hero-section {
    padding: 30px 0;
    background-color: var(--fondo-claro);

    > .lead{
      display: none;
      }

    > h2{
      padding: 10px;
    }
  }

  .foto{
    max-height: 280px;
    object-fit: contain;
  }

/*   .video-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 240px;
    max-height: 280px;
    > video{
      max-height: 280px;
    }
  } */

  .logo-cliente{
    display: none;
  }

  .info{
    padding: 0px 15px 10px 15px;
    /* font-size: 1rem; */
  }

  .titulo{
    padding: 10px 0px 0px 0px;
  }

  .video-caja{
    padding: 50px 100px;
  }
}

@media (576px > width) {
  .hero-section {
    padding: 30px 0;
    background-color: var(--fondo-claro);

    > .lead{
      display: none;
      }
  }

  .foto{
    height: 250px;
    object-fit: contain;
  }

/*   .video-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 250px;
    > video{
      height: 250px;
    }
  } */

  .logo-cliente{
    display: none;
  }

  .info{
    padding: 0 15px;
    font-size: 1.2rem;
  }

  .texto-taller{ 
    font-size: 1.2rem;
  }

  .titulo{
    padding:0px 10px;
  }

  .card-foto{
    box-shadow: none;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
}

/* --------------------------------- */

/* testimonios */
@media (width >= 576px) {
  .testimonio {
    min-width: 550px;
    min-height: 220px;
    background: white;
    border-left: 10px solid #0d6efd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px 0px 0px 10px;
    height: 35vh;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    > img{
      padding: auto;
      width: 30%;
      height: 100%;
      object-fit: cover;
    }

    >div{
      padding: 25px;
    }
  }

  .testimonio p {
    font-style: italic;
  }
}

@media (width < 576px) {
  .testimonio {
    min-height: 220px;
    background: white;
    border-left: 10px solid #0d6efd;
    margin-bottom: 20px;
    border-radius: 10px 0px 0px 10px;
    height: 35vh;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    > img{
      display: none;
    }

    >div{
      padding: 10px;
    }
  }

  .testimonio p {
    font-style: italic;
  }
}

/* --------------------------------- */

/* SERVICIOS - ofrecemos */
.process-section{
  background-color: var(--fondo-alternativo);
  padding: 75px 0;
}

.process-step {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  margin: 0 auto;

  > a{
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
  }
}
.process-step:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
}
.step-icon {
  border-radius: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d6efd20, #0d6efd10);
  transition: background 0.3s;
}
.process-step:hover .step-icon {
  background: linear-gradient(135deg, #0d6efd40, #0d6efd20);
}

.caja-servicios {
  display: flex;
}

.servicio-parrafo{
  color: #0d0d0d;
}

@media (width >= 768px) {
  .caja-servicios {
    flex-direction: row;
    height: 350px;
    padding: 0;
    margin: auto;
    min-width: 760px;
    justify-content: center;
    gap: 40px;
  }

  .process-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 210px;
    max-width: 450px;
    > p{
      padding: 0 10px;
    }
  }

  .step-icon {
    width: 100px;
    height: 100px;
  }
}

@media (width < 768px) {
    .caja-servicios {
    padding: 0;
    margin: auto;
    gap: 10px;
  }

  .process-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 210px;
    max-width: 275px;
    > a{
      font-size: 1rem;
    }

    > p{
      padding: 0 10px;
    }
  }

  .step-icon {
    margin: 10px auto;
    width: 50px;
    height: 50px;
    > i{
      scale: 0.75;
    }
  }
  .container-fluid{
    > p{
      display: none;
    }
  }
}

/* --------------------------------- */

/* oficina -taller */
/* Animación de aparición */
.oficinas-taller{
  background-color: var(--fondo-alternativo);
}

.texto-taller{
  color: #0d0d0d;
}
.fade-in-left, .fade-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 1s ease-out;
}
.fade-in-left {
  transform: translateX(-50px);
}
.fade-in-left.show, .fade-in-right.show {
  opacity: 1;
  transform: translateX(0);
}

/* Imagen responsiva */
.oficinas-taller img {
  max-height: 350px;
  object-fit: cover;
}

.oficinas-taller .vertical {
  width: 400px;
  height: 500px;
  max-height: none;
  object-fit: cover;
}

@media (width < 576px) {
  .oficinas-taller .vertical {
    width: 90%;
    max-width: 400px;
    height: 350px;
    max-height: none;
    object-fit: cover;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .oficinas-taller img {
    max-height: 250px;
  }
}

/* --------------------------------- */

/* productos-home */
.texto-img{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

@media (width >= 992px) {
  .productos-home{
    padding: 20px;
    background-color: var(--fondo-claro);
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .cards-productos {
    margin: auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
  }

  .card-materia {
    position: relative;
    width: 20vw;
    min-width: 220px;
    > img {
      width: 100%;
      height: 65vh;
      max-height: 490px;
      object-fit: cover;
      transition: .5s ease;
    }

    > .texto-img{
      width: 100%;
      height: 60px;
      margin: auto;
      text-align: center;
      font-size: 1.3rem;
      font-weight: bold;
      position: absolute;
      bottom: 0%;
      color: white;
    }

    > p{
      transition: .5s ease;
    }
  }

  .text-overlay {
    font-weight: bold;
    color: white;
    font-size: 1.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }


  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
  }

  .card-materia:hover img{
    opacity: 0.3;
  }

  .card-materia:hover p{
    opacity: 0;
  }

  .card-materia:hover .overlay{
    opacity: 1;
  }
}


@media ( width < 576px) {
  .productos-home{
    background-color: var(--fondo-claro);
    display: flex;
    flex-direction: column;
    gap: 15px;
    >p{
      display: none;
    }
  }

  .cards-productos {
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .card-materia {
    position: relative;
    width: 90vw;
    > img {
      width: 50%;
      height: 250px;
      object-fit: cover;
      transition: .5s ease;
    }

    > .texto-img{
      padding: 15px;
      width: 50%;
      height: 20px;
      margin: auto;
      text-align: center;
      font-size: 0.8rem;
      font-weight: bold;
      position: absolute;
      right: 0%;
      bottom: 0%;
      color: white;
      > i{
        display: none;
      }
    }

    > p{
      transition: .5s ease;
    }
  }

  .text-overlay {
    font-weight: bold;
    color: white;
    font-size: 0.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }

  .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 30px;
    width: 50%;
    opacity: 1;
    transition: .5s ease;
  }

}

@media ( 576px <= width < 992px ) {
    .productos-home{
    padding: 20px;
    background-color: var(--fondo-claro);
    display: flex;
    flex-direction: column;
    gap: 10px;

    >p{
      display: none;
    }
  }

  .cards-productos {
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 10px;
    column-gap: 10px
  }

  .card-materia {
    position: relative;
    width: 40vw;
    min-width: 220px;
    > img {
      width: 55%;
      height: 300px;
      object-fit: cover;
      transition: .5s ease;
    }

    > .texto-img{
      padding: 10px;
      width: 45%;
      height: 50px;
      margin: auto;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      position: absolute;
      right: 0;
      bottom: 0;
      color: white;

      > i{
        display: none;
      }
    }

    > p{
      transition: .5s ease;
    }
  }

  .text-overlay {
    font-weight: bold;
    color: white;
    font-size: 0.9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }

  .overlay {
    position: absolute;
    top: 0;
    bottom: 50px;
    right: 0;
    width: 45%;
    opacity: 1;
    transition: .5s ease;
  }
}

/* --------------------------------- */
/* stem-section */

@media (768px <= width) {

  .stem-grid {

    width: 75%;
    max-width: 1000px;
    min-width: 700px;
    display: grid;
    gap: 1rem;
    margin: 20px auto;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: 1fr 1fr;

    grid-template-areas: "s t l"
                         "e m l";
    justify-content: center;
  }

  .stem-item p {
    display: none;
  }
  .stem-item{
    min-width: 150px;
    height: 240px;
  }

  .lateral{
    padding-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: l;
    font-size: 1.5rem;
    font-weight:normal;
  }

  .stem-item img {
  width: 85px;
  margin-bottom: 1rem;
}
}

@media (width < 768px) {
  .stem-grid {
    display: grid;
    gap: 0.5rem;
    margin: auto;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);

    grid-template-areas: "s" 
                         "t"
                         "e" 
                         "m";
    justify-items: center;
  }

  .stem-item {
    max-width: 350px;
    height: 180px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    > h1{
      width: 100%;
    }
  }

  .stem-item img{
    width: 60px;
    margin: 5px auto;
  }

  .stem-item p {
  font-size: 0.9rem;
  }

  .lateral {
    display: none;
  }
}

.stem-section {
  padding: 4rem 1rem;
  >h2{
      padding: 10px 0;
    }
}

.stem-item {
  text-align: center;
  padding: 2rem 1rem;
  border-radius: 1rem;
  color: #fff;
}

.stem-item h1 {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* Colores diferentes */
.stem-s { background: #e63946; grid-area: s;}
.stem-t { background: #457b9d; grid-area: t;}
.stem-e { background: #2a9d8f; grid-area: e;}
.stem-m { background: #f4a261; grid-area: m;}


/* ####################################################################### */
/* fin de vista de home */
/* ####################################################################### */
/* inicio se vista de productos */


/* pagina-vista-productos */
.productos-principal{
  padding: 0 50px;
  display: grid;
  grid-template-columns:0.8fr 4fr;
  grid-template-rows: 1fr 1fr 0.75fr;
  row-gap: 50px;
  grid-template-areas: "side text"
                       "side cat"
                       "side info";
}

.prod-hero-side {
  grid-area: side;
}

.prod-hero-text {
  padding: 50px;
  grid-area: text;
  display: flex;
  gap: 10px;
  > img {
    width: 50%;
    min-width: 300px;
    height: 480px;
    object-fit: cover;
    border-radius: 10px;
  }
}

.prod-hero-text-side {
  min-width: 300px;
  padding: 0 10px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

@media (width >= 576px){
  .prod-btn {
    min-width: 340px;
    margin: 0 auto;
  }
}

.prod-info-text {
  padding-right: 50px;
  grid-area:info;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;

  > img {
    width: 40%;
    /* min-width: 280px; */
    height: auto;
    max-height: 300px;
  }

  > .lead{
    text-align: end;
    font-size: 1.5rem;
    padding: 0 0 0 50px;
  }
}

.enlaces-prod {
  padding-top: 200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  >a{
    width: 70%;
    min-width: 200px;
    margin: auto;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding-left: 20px;
    transition: all 0.3s ease;
  }

  >a:hover{
    scale: 1.02;
  }

  > .active-prod {
      background-color: white;
      border-radius: 20px;
    }
}

.categories {
  grid-area: cat;
}

.categories-container {
  display: flex;
  flex-direction: column;
}

/* NAVBAR PESTAÑAS */
.tab-buttons {
  display: flex;
  justify-content: center;
  margin: 0;
}

.tab-buttons button {
  width: 100%;
  justify-content: center;
  border: none;
  background: rgb(255, 255, 255);
  padding: 5px 20px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-buttons.labware {
  button{
    color: blue;
  }

  > .active{
    background-color: rgba(0, 0, 255, 0.75);
    color: white;
  }
}

.tab-buttons.fisica {
  button{
    color: rgb(255, 25, 0);
  }

  > .active{
    background-color: rgba(255, 25, 0, 0.75);
    color: white;
  }
}

.tab-buttons.quimica {
  button{
    color: green;
  }

  > .active{
    background-color: rgba(0, 128, 0, 0.75);
    color: white;
  }
}

.tab-buttons.biologia {
  button{
    color: purple;
  }

  > .active{
    background-color: rgba(128, 0, 128, 0.75);
    color: white;
  }
}

.tab-inner p {
    padding-right: 100px;
}

@media (width < 992px) {
  .prod-hero-text {
    margin: auto;
    width: 100%;
    padding: 50px 25px;
    > img{
      display: none;
    }
  }

  .productos-principal{
    padding: 0;
    grid-template-columns:1fr 4fr;
    grid-template-rows: 0.2fr 1fr 1fr;
    row-gap: 10px;
    grid-template-areas: "side text"
                        "side cat"
                        "side info";
  }

  .prod-info-text {
    grid-area:info;
    flex-direction: column;
    justify-content: center;

    > img {
      width: 50%;
      padding: 0;
    }

    > .lead{
      font-size: 1.3rem;
      padding: 0px 0 0 50px;
      text-align: center;
    }
  }

  .prod-hero-text-side{
    padding: 0;
    text-align: center;
  }
}

@media (width < 768px) {
  .categories-container{
    padding-top: 75px;
  }
  .productos-principal{
    padding: 0;
    grid-template-columns: 100%;
    grid-template-rows: 160px auto 1fr auto;
    row-gap: 0;
    grid-template-areas: "side" 
                         "text"
                         "cat"
                         "info";
  }

  .prod-hero-text{
    width: 100%;
    padding: 0;
  }

  .prod-hero-text-side{
    margin: auto;
    gap: 0;
    width: 100%;
    padding: 20px 10px;
  }

  .prod-hero-side{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }

  .enlaces-prod {
    padding: 0;
    padding: 10px;
    gap: 0;
    >a{
      padding: 0;
      text-align: center;
      width: 80%;
      min-width: 160px;
      max-width: 300px;
      margin: auto;
      text-decoration: none;
      font-weight: bold;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }

  .enlaces-prod .text-light{
    display: none;
  }


  .tab-buttons {
    flex-wrap: nowrap;
    overflow: scroll;
    justify-content: start;
    scrollbar-width: none;
    margin-bottom: 10px;
  } 

  .prod-info-text {
    padding: 30px 0;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 30px;

    > img {
      width: 60%;
      min-width: 250px;
      max-width: 320px;
    }

    > .lead{
      padding: 0 20px;
      font-size: 1.1rem;
    }
  }

}

/* CONTENIDO */
.tab-content {
  height: 550px;
  margin: auto;
  width: 100%;
  display: none;
  border-radius: 5px;
  background: var(--fondo-claro);
  animation: fadeIn 0.5s ease;
  opacity: 0;
  transform: translateY(40px);
}

@media (width >= 992px) {
  .ancho{
    width: 70vw;
  }
}

@media (width < 992px) {
  .ancho{
    height: 600px;
  }

  .profe {
    height: 500px;
  }
}

.tab-content.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  animation: slideIn 0.6s ease forwards;
}

.img-producto{
  padding-left: 75px;
  width: 100%;
  /* height: auto; */
  /* min-height: 350px;
  max-height: 380px; */
  height: 400px;
  object-fit: contain;
}

/* Animaciones */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (width < 992px) {
  .tab-buttons button {
    justify-content: center;
  }

  .tab-content {
    padding: 0;
    margin: auto;
    flex: 1;
    border-radius: 0;
    max-width: 500px;
    background: var(--fondo-claro);
  }

  .tab-inner{
    height: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 5px;
  }

  .tab-inner p {
    text-align: center;
    padding: 0;
  }

  .tab-inner h3 {
    text-align: center;
    padding: 15px 0;
  }

  .tab-inner h5 {
    text-align: center;
  }

  .tab-inner img {
    padding: 0;
    border-radius: 0;
    width: 100%;
    min-width: 250px;
    max-width: 400px;
    max-height: 250px;
  }

  .carousel-control-prev{
    max-width: 50px;
    border-radius: 10px;
    background-color: rgba(0, 0, 255, 0.5);
    height: 10%;
    margin: auto;
  }
      
  .carousel-control-next{
    max-width: 50px;
    border-radius: 10px;
    background-color: rgba(0, 0, 255, 0.5);
    height: 10%;
    margin: auto;
  }

  .tab-inner .carousel-indicators{
    display: none;
  }
}

/* ####################################################################### */
/* fin de vista de productos */
/* ####################################################################### */
/* inicio de vista de servicios */


/* --------------------------------- */
/* servicios construccion */

.contenedor-construccion{
  background-color: var(--fondo-alternativo);
}

.construccion{
  background: linear-gradient(135deg, rgba(0, 102, 153) 0%, rgba(0, 51, 102, 0.85) 100%);
  color: var(--text-claro);
  padding:120px 20px;
  height: auto;
  display: flex;
  justify-content: center;
  font-family: var(--font-family);
  position: relative;
  overflow: hidden;
}

.construccion::before,
.construccion::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
  z-index: 0;
}

.construccion::before{
  width: 280px; height: 280px;
  background: var(--accent-1);
  top: -60px; left: -80px;
}

.construccion::after{
  width: 340px; height: 340px;
  background: var(--accent-2);
  bottom: -120px; right: -100px;
}

.construccion__inner{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.construccion__content{ padding-right: 12px; }

.eyebrow{
  font-size: 0.85rem;
  color: var(--accent-3);
  letter-spacing: 0.08em;
  margin: 0 0 14px 0;
  text-transform: uppercase;
  font-weight: 600;
}

#construccion-title{
  margin: 0 0 18px 0;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.2;
  font-weight: 800;
}

/* Texto degradado */
.resaltado{
  display: inline-block;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position .7s ease;
}

.resaltado:hover{ background-position: 100% 0; }

/* Fallback SVG oculto por defecto */
.resaltado--svg{ display: none; vertical-align: middle; }

/* Detecta falta de soporte */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .resaltado{ display: none; }
  .resaltado--svg{ display: inline-block; height: 1em; }
}

.lead-p{
  margin: auto;
  padding-bottom: 20px;
  max-width: 65ch;
  color: var(--fondo-alternativo);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.6;
}

.meta{
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-style: italic;
}

.construccion__visual .img-wrapper{
  margin: auto;
  max-width: 600px;
  max-height: 350px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.construccion__visual img{
  max-height: 350px;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.construccion__visual:hover img{ transform: scale(1.05); }

/* Responsive */
@media (max-width: 992px){
  .construccion{
    padding: 20px;
  }
      
  .eyebrow, .meta{
    display: none;
  }
  .construccion__inner{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .construccion__visual{
    order: -1; 
    > .img-wrapper{
      max-height: 250px;

      > img{
        max-height: 250px;
      }
    }
  }
  .construccion__content{ padding-right: 0; text-align: center; }
  #construccion-title{ font-size: 1.8rem; }
}

@media (max-width: 576px){
  .construccion{ padding: 20px 16px; }
  #construccion-title{ font-size: 1.5rem; }
  .lead-p{ font-size: 0.95rem; }

  .construccion__visual .img-wrapper{
    max-height: 220px;

    > img{
      max-height: 220px;
    }
  }
}

/* Texto accesible oculto */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ------------------------------------- */

/* servicios - capacitacion */

.servicio-capacitacion{
  margin: 50px auto;
}

.servicio-capacitacion img{
  padding: 20px 0;
  width: 400px;
}

.servicio-capacitacion .container{
  padding:30px;
}

.servicio-capacitacion .fin{
  text-align: end;
}

@media (width < 992px) {
  .servicio-capacitacion h3, .servicio-capacitacion p{
    text-align: center;
  }

  .servicio-capacitacion .fin{
    text-align: center;
  }

  .servicio-capacitacion{
    margin: 30px auto;
  }

  .servicio-capacitacion .container{
    padding:20px;
  }
}

@media (width < 576px) {
  .servicio-capacitacion img{
    padding: 20px auto;
    width: 90%;
  }

  .servicio-capacitacion .container{
    padding:0 10px;
  }

  .servicio-capacitacion p{
    padding:0 10px;
  }
}

.timeline {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.timeline-item {
  text-align: center;
  cursor: pointer;
  width: 40px;
  transition: transform 0.3s ease;
}
.timeline-item:hover {
  transform: translateY(-5px);
}
.timeline-item.active .circle {
  background: #0d6efd;
  color: #fff;
  transform: scale(1.1);
}
.circle {
  width: 30px;
  height: 30px;
  margin: auto;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.3s ease;
}
.timeline-content {
  padding: 0;
  width: 600px;
  margin: auto;
  text-align: center;
  animation: fadeIn 0.6s ease;

  > img{
    width: 600px;
    height: 400px;
    object-fit: cover;
  }
}
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}
/* Responsive */
@media(max-width: 768px){
  .circle{
    width: 20px;
    height: 20px;
  }
  .timeline-item {
    width: 30px;
  }

  .timeline-content {
    padding: 0;
    width: 100%;
    margin: auto;
    text-align: center;
    animation: fadeIn 0.6s ease;

    > img{
      width: 100%;
      height: 350px;
      object-fit: cover;
    }
  }
}

/* ####################################################################### */
/* fin de vista de servicios */
/* ####################################################################### */
/* inicio de vista nosotros */

/* -------------------------------------- */
/* HERO */
.nosotros-hero {
  background-color: var(--fondo-alternativo);
  color: white;
  margin-bottom: 40px;
}

.nosotros-hero__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 600px;
  background: linear-gradient(120deg, rgba(0, 102, 153) 0%, rgba(0, 51, 102, 0.85) 100%),
                url('../img/banner_nosotros6.webp') center/cover no-repeat;
  > h1, p{
    padding: 20px 30px;
    margin: 0;
    text-align: center;
  }
}

.nosotros-hero__inner {
  margin: auto;
  width: 80%;
  display: flex;
  justify-content: center;
  gap: 0;
}
.nosotros-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}
.nosotros-hero .lead {
  font-size: 1.2rem;
  line-height: 1.6;
}

.nosotros-hero__image{
  width: 100%;
}

.nosotros-hero__image img {
  display: block;
  margin: auto;
  width: 100%;
  min-width: 400px;
  height: 600px;
  object-fit: cover;
}

/* HISTORIA */
.historia {
  background: var(--fondo-claro);
  padding: 60px 20px;
}
.historia__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.historia h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: center;
}
.historia p {
  color: var(--text-muted-2);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.2rem;
}

/* EQUIPO */
.equipo {
  padding: 40px 20px;
  background-color: var(--fondo-alternativo);
}
.equipo__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}
.equipo h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}
.equipo-subtitle {
  color: var(--text-muted-2);
  margin-bottom: 40px;
}
.equipo-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 75%;
  margin: auto;
}
.miembro {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0px 24px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}

@media (width >= 992px) {
  .miembro {
    display: flex;
  }
}
/* .miembro:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
} */
.miembro-img img {
  width: 100%;
  min-width: 200px;
  height: 300px;
  object-fit: contain;
  
}

.miembro-img {
  display: flex;
  justify-content: center;
  align-content: center;
}

.miembro h3 {
  margin: 0;
  font-size: 1.2rem;
}
.cargo {
  color: var(--accent);
  font-weight: 600;
  margin: 4px 0 12px;
}
.bio {
  color: var(--text-muted-2);
  font-size: 0.95rem;
  line-height: 1.5;
  padding-top: 10px;
  text-align: start;
}
.info-miembro{
  display: flex;
  flex-direction: column;
  padding: 25px;
  justify-content: center;
}

@media (width < 992px) {
  .nosotros-hero__inner {
    width: 100%;
    flex-direction: column;
  }

  .nosotros-hero__image img {
    width: 75%;
    min-width: 300px;
    max-width: 620px;
    height: 350px;
    object-fit: cover;
  }

  .nosotros-hero__content{
    padding: 10px 10px 20px 10px;
    background: linear-gradient(135deg, rgba(0, 102, 153) 0%, rgba(0, 51, 102, 0.85) 100%);
    min-width: 300px;
    max-width: 620px;
    margin: auto;
    width: 75%;
    height: auto;
    justify-content: start;
    > h1, p{
      text-align: center;
      padding: 10px;
    }
  }

  .nosotros-hero .lead {
    font-size: 1rem;
    padding-top: 0;
  }

  .nosotros-hero h1 {
    font-size: 1.7rem;
  }

  .historia p {
    font-size: 1rem;
  }

  .equipo-grid {
    max-width: 450px;
    min-width: 280px;
    margin: auto;
  }
}

@media (width < 576px) {
  .nosotros-hero__inner {
    width: 100%;
  }
  
  .nosotros-hero__image img {
    width: 100%;
    min-width: 300px;
    height: 320px;
    object-fit: cover;
  }

  .nosotros-hero__content{
    width: 100%;
    padding: 20px;
    gap: 15px;

    > h1, p{
      text-align: center;
      padding: 0;
    }
  }

  .nosotros-hero .lead {
    font-size: 0.9rem;
    padding-top: 0;
  }

  .nosotros-hero h1 {
    font-size: 1.5rem;
  }

  .historia p {
    font-size: 0.9rem;
  }
}


@media (width > 992px) {
  .banner-principal {
    height: calc(90vh - 120px);
    margin: 50px 0;
    padding: 0;
    display: flex;
    > .foto-modelo {
      border-radius: 0 20px 20px 0;
      width: 74%;
      object-fit: cover;
    }

    > .texto-banner {
      border-radius: 20px 0 0 20px;
      height: 100%;
      background-color: rgb(65, 74, 115);
      color: #fff;
      font-size: 1.1rem;
      line-height: 1.6;
      padding: 20px;
      display: flex;
      align-items: center;
      text-align: center;
    }

  }
}

@media (576px <= width <= 992px) {
  .banner-principal {
    height: calc(90vh - 120px);
    margin: 50px 0;
    padding: 0;
    display: flex;
    text-align: center;
    flex-direction: column-reverse;
    > .foto-modelo {
      border-radius: 20px 20px 0 0;
      width: 100%;
      object-fit: cover;
    }

    > .texto-banner {
      border-radius: 0 0 20px 20px ;
      height: 100%;
      background-color: rgb(65, 74, 115);
      color: #fff;
      font-size: 1rem;
      line-height: 1.6;
      padding: 20px;
      display: flex;
      align-items: center;
    }

  }
}

@media (width < 576px) {
  .banner-principal {
    height: calc(90vh - 120px);
    margin:0;
    padding: 0;
    display: flex;
    text-align: center;
    flex-direction: column-reverse;
    justify-content: center;
    > .foto-modelo {
      width: 100%;
      object-fit: cover;
    }

    > .texto-banner {
      background-color: rgb(65, 74, 115);
      color: #fff;
      font-size: 1rem;
      line-height: 1.6;
      padding: 20px;
      display: flex;
      align-items: center;
    }

  }
}

.escudo_clientes {
  width: 180px;
  object-fit: contain;
  
}

.caja-escudo{
  opacity: 0.6;
  transition: all 0.1s ease-in-out;
  text-decoration: none;
  padding: 25px 0px;
  display: flex;
  justify-content: center;
}

.caja-escudo:hover{
  opacity: 1;
}

.caja-cliente {
  background-color: var(--fondo-alternativo);
  display: flex;
  justify-content: center;
  padding: 20px 100px;
}

@media (width < 992px) {
  .foto-capacitacion {
    width: 100%;
  }

  .texto-capacitacion{
    width: 75%;
  }
}

@media (width >= 992px) {
  .foto-capacitacion {
    width: 50%;
  }

  .texto-capacitacion{
    width: 50%;
  }
}


.texto-capacitacion {
  background-color: rgba(239, 240, 243, 0.8);
  margin: auto;
  height: auto;
  padding: 0;
}

@media (width >= 768px) {
  .texto-oculto {
    display: none;
  }
}

@media (width < 768px) {
    .texto-oculto {
      padding: 25px;
      text-align: center;
    }
  .texto-capacitacion {
    display: none;
  }
}

/* --------------------------- */
#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}