/*------ Variables ------*/
:root {
  --base-shade-1: #c5222e;
  --white-shade-1: #ffffff;
  --white-shade-2: #d7e1f3;
  --black-shade-1: #C41622;
  --black-shade-2: #676a8b;
  --grad-color-1: 0, 180, 250;
  --grad-color-2: 21, 120, 255;

  --base-font-size: 1.6rem;

  --heading-font-size-1: 4rem;
  --heading-font-size-2: 3.2rem;
  --heading-font-size-3: 2rem;
  --heading-font-size-4: 1.8rem;

  --border-radius-1: 1rem;
  --border-radius-2: 0.5rem;
}
/*------ Base Styles ------*/
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

}
*{
cursor: url('/img/PUNE.png'), auto;

}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  font-family: "Poppins";
}
/*------ Utility Classes ------*/

section{
  max-width: 100%;
  background:#212121;
  padding:1rem 3rem;

}
.row {
  display: flex;
  
  justify-content: space-between;
  gap: 4rem;
}
.raw{
display: flex;
justify-content: space-between;
gap: 4rem;
top: auto;
}
.testi{
margin: 0;
position: sticky;
top: 1100px;
left: 1000px;
font-size: inherit;
font-weight: 700;
font-family: inherit;
display: inline-block;
height: 23px;
z-index: 2;
}

.icon-iso{

  text-align: center;
}

.icon-iso img{
  width:29px;
  height:auto;
  text-align: center;
  width: 30px;
    vertical-align: middle;
  
}

.icon-iso2{
  text-align: center;
}

.icon-iso2 img{
  width:33px;
  vertical-align: middle;
  margin-right: 8px; /* Ajusta el espacio entre el icono y el texto */
  text-align: center;
}

.frame-parent4{
  padding: 1rem 3rem;

}


.column {
  width: 100%;
}
.section-desc {
  text-align: center;
  margin: 1rem 1rem 1rem;
}

.section-desctes{
  text-align: center;
  margin: 4rem 1rem 1rem;
}




h1 {
  font-size: var(--heading-font-size-1);
  color: #ffffff;
  margin-bottom: 2rem;
  word-spacing: 1rem;
  line-height: 1.6;
}
h2 {
  font-size: var(--heading-font-size-2);
  color:#c5222e;
  font-weight: 700;
  text-align: center;
}

.slider .caption .tex-ban-1{
  color:#ffffff;
  font-weight: 700;
  text-align: start;
  position: relative;
  top: -20px;
  left: -110px;
  letter-spacing: -2px;
  line-height: 1;
  font-size: 50px;
}

.slider .caption .tex2-ban-1{
  color:#ffffff;
  font-weight: 700;
  text-align: start;
  position: relative;
  top: -20px;
  left: -110px;
  line-height: 0.2;
}

.slider .caption .subtex-ban-1{
  color:#ffffff;
  font-weight: 10;
  text-align: start;
  position: relative;
  top: 1px;
  left: -110px;
  line-height: 1;
  font-size: 20px;
}


  


h3 {
  font-size: var(--heading-font-size-3);
  color: var(--black-shade-1);
  font-weight: 700;
  margin: 1.5rem 0;
  text-align: center;
}
.testa h3 {
  font-size: var(--heading-font-size-3);
  color: white;
  margin: 2rem 1.5rem;
  display: flex;
  justify-content: flex-start;
  margin-block: 2px;
}

.testa-1 h3 {
  font-size: var(--heading-font-size-3);
  color: #ffffff;
  margin: 2rem 1.5rem;
  display: flex;
  justify-content: flex-start;
  margin-block: 2px;
}



h4 {
  color: white;
  margin: 2rem 1.5rem;
  display: flex;
  justify-content: flex-start;
  margin-block: 2px;
  font-family: sans-serif;
  font-size: 15px;
}

h5{
  color: white;
  margin: 2rem 1.5rem;
  display: flex;
  justify-content: flex-start;
  margin-block: 2px;
}


p,
button {
  font-size: var(--base-font-size);
  color: #ffffff;
  line-height: 1.8;
  font-weight: 0;
}
.btn {
  background-color: transparent;
  padding: 1rem 2rem;
  border-radius: var(--border-radius-2);
  border: none;
  margin: 2rem 0;
}
.primary-btn {
  background-color: var(--base-shade-1);
  color: var(--white-shade-1);
}
.secondary-btn {
  border: 0.3rem solid var(--base-shade-1);
  color: var(--base-shade-1);
}

/*------ Header ------*/
header {
  position: fixed;
  width: 100%;
  padding: 3rem 5rem;
  justify-content: space-between;
  top: 0;
  z-index: 1000; /* Agrega este valor */
}

/*header {
  
  background-color: rgba(140, 80, 29, 0.659);
  position: sticky;
 
  z-index: 1000; /* Agrega este valor 
}*/

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: space-around;
}
nav ul {
  list-style: none;
  display: flex;
  list-style: none;
  display: flex;
  gap: 10rem;
  font-size: 24px;
  max-width: 100%;
  font-weight: 600;
}
nav a {
  font-size: var(--heading-font-size-4);
  text-decoration: none;
  cursor: url(/img/curso.png), auto;
}
nav a#logo {
  color: var(--black-shade-1);
  font-weight: 700;
}
nav ul a {
  color: var(--white-shade-1);
  font-size: 22.1px;
}

/*-- SideMenu --*/
#ham-menu {
  display: none;
}
nav ul.active {
  left: 0;
}
/*-- Sticky Header --*/
.sticky {
  background-color:#2A2929;
  box-shadow: 0 2rem 1.5rem rgba(0, 0, 0, 0.05);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}
.sticky nav ul a,
.sticky nav a#logo,
.sticky #ham-menu {
  color: #ffffff;
}
/*-- Link Hover Effect --*/
nav ul a:hover {
  color: var(--black-shade-1);
  text-decoration: none;
  position: relative;

}
.sticky nav ul a:hover {
  color: var(--base-shade-1);
}

#nav-bar a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color:#c5222e;
  transition: width 0.2s linear; /* Animación de carga */
}

#nav-bar a:hover::after {
  width: 100%; /* Ancho completo al pasar el cursor */
}

/* Estilo para la clase active */
#nav-bar a.active {
  color: var(--black-shade-1);
  text-decoration: none;
  position: relative;
}

#nav-bar a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%; /* Barra completa debajo del texto activo */
  height: 2px;
  background-color: #c5222e;
  transition: width 0.2s linear;
}

/*------ Section: Hero ------*/
section.hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  background:#212121;
}
#header-shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.hero-content p {
  text-align: justify;
}
.hero-img img {
  display: block;
  width: 100%;
}
.btn-container {
  display: flex;
  gap: 3rem;
}
/*------ Section: Features ------*/
.features .row {
  align-items: stretch;
}
.features .column {
  padding: 0.5 rem;
  border-radius: var(--border-radius-1);
}
.features .column p {
  text-align: center;
}

/*.features i {
  display: block;
  height: 6rem;
  width: 6rem;
  margin: 0 auto;
  font-size: 3.5rem;
  background-color: var(--base-shade-1);
  color: var(--white-shade-1);
  padding: 1.3rem 0;
  text-align: center;
  border-radius: var(--border-radius-2);
}*/
.features .column:hover {
 background: linear-gradient(359deg, rgba(70, 13, 17, 1) 0%, rgba(255, 6, 23, 1) 65%);
 padding: 0.4rem;
 display: flex;
 height: 0%;
} 


 /*-.features .column1:hover {
  background: linear-gradient(359deg, rgba(70, 13, 17, 1) 0%, rgba(255, 6, 23, 1) 65%);
  padding: 1rem;
        
}*/

/*------ borde degradado ------*/
.gradient-border {
  width: 200px;
  height: 100px;
  border: 10px solid transparent;
  border-image-slice: 10;
  border-radius: 20px;
}




.features .column:hover h3 {
  color: var(--white-shade-1);
}


.features .column:hover p {
  color: white;
}
.features .column:hover i {
  background-color: var(--white-shade-1);
  color: var(--base-shade-1);
}
/*------ Section: Courses ------*/
.courses .row {
  align-items: stretch;
  padding: 1rem 6rem;
}
.courses .column {
  box-shadow: 0 0.5rem 2.4rem 0.6rem rgba(0, 0, 0, 0.06);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}

.links{
margin-bottom: 0%;

}

.courses .column > *:not(img) {
  padding: 0rem;
  margin-bottom: 0rem;
}
.courses .column img {
  border-radius: 15px;
  width: 100%;
  cursor: pointer;
  cursor: url('/img/curso.png'), auto;
}

.courses .column .isocal-se-ha-M {
  text-align: center;
  padding: 0 2rem;
}

.contacc{
  padding: 1rem 6rem;
}

.tact{
color: transparent;
}

.pv{
  font-family: "Poppins";

}


.courses .column p {
  text-align: center;
  flex-grow: 1;
  font-size: 25px;
}
.courses-btn {
  display: flex;
  justify-content: center;
}
.courses-btn .btn:hover {
  color: var(--white-shade-1);
  background-color: var(--base-shade-1);
}
/*------ Section: Testimonials ------*/
.testimonial {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 1rem 1rem 1rem;
}
.testimonial h2,
.testimonial .section-desc {
  color: var(--white-shade-1);
}

.slider h2,
.slides .slide {
  color: var(--white-shade-1);
}
.testimonial .row {
  align-items: stretch;
  padding: 3.5rem;
}
.testimonial .column {
  padding: 4rem 3rem;
  text-align: center;
  border-radius: var(--border-radius-1);
  display: flex;
  flex-direction: column;
}
.testimonial .column1 {
  padding: 1rem 1rem;
  text-align: center;
  border-radius: var(--border-radius-1);
  display: flex;
  flex-direction: column;
  background:linear-gradient(359deg, rgba(70, 13, 17, 1) 0%, rgba(255, 6, 23, 1) 65%);;
  border-radius: 19px;
  padding: 3px;
  
}

.testimonial .column2 {
  padding: 1rem 1rem;
  text-align: center;
  border-radius: var(--border-radius-1);
  display: flex;
  flex-direction: column;
  background-color: #313131; /* Color de fondo cuando se selecciona */

  border-radius: 19px;
  -webkit-box-shadow: -4px 4px 19px 2px rgba(0,0,0,0.38);
  -moz-box-shadow: -4px 4px 19px 2px rgba(0,0,0,0.38);
  box-shadow: -4px 4px 19px 2px rgba(0,0,0,0.38);
  padding: 5px;

}

.navigation{
  position: absolute;
  top: 92%; /* Ajusta la posición vertical del botón */
  left: 50%; /* Ajusta la posición horizontal del botón */
  transform: translate(-50%, -50%); /* Centra el botón */
  z-index: 10; /* Asegura que el botón esté por encima del banner */
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  cursor: url('/img/curso.png'), auto;
}


.testimonial-imagestre{
  position: absolute;

  left: 10%;
  transform: translate(-50%, -50%);
  z-index: 10;

  color: white;

  cursor: pointer;
}

.testimonial-imagestre2 {
  position: absolute;

  left: 22%;
  transform: translate(-42%, -50%);
  z-index: 10;

  color: white;

  cursor: pointer;
  
}

.testimonial-imagestre3 {
  position: absolute;

  left: 22%;
  transform: translate(-2%, -50%);
  z-index: 10;

  color: white;

  cursor: pointer;

}


.testimonial-image {
  height: 12rem;
  width: 20rem;
  margin: auto;
  padding: 0.9rem;
  border-radius: 50%;
}
.testimonial-image img {
  display: flex;
  margin-left: -60px;
  margin-right: 20px;
  justify-content: center;
  padding: initial;
  width: 300px;
  padding:  0.7rem;
}

.testimonial-imagestre img {
  display: flex;
  justify-content: space-evenly;
  width: 12%;
  position: sticky;
  left: 1%;
  transform: translate(-10%, -20%);
  left: 59%;
}

.testimonial-imagestre2 img {
  display: flex;
  justify-content: space-evenly;
  width: 13%;
  position: sticky;
  left: 1%;
  transform: translate(-10%, -20%);
  left: 79%;
}

.testimonial-imagestre3 img {
  display: flex;
  justify-content: space-evenly;
  width: 13%;
  position: sticky;
  left: 1%;
  transform: translate(-10%, -20%);
  left: 79%;
}




.testimonial .column p {
  margin: 4rem 0;
  flex-grow: 1;
}
.testimonial .column1 p {
  flex-grow: 1;
  margin: 1rem 1.5rem;
  text-align: justify;
}




/*------ Section: Download App ------*/
.download-app .column:nth-child(1) {
  display: flex;
  justify-content: center;
}
.download-app .column:nth-child(2) {
  padding: 0 2rem;
}
.download-app img {
  display: block;
  width: 45%;
}
.app-feature {
  border-bottom: 1.5px dashed rgba(var(--grad-color-1), 0.4);
}
.app-feature:not(:last-child) {
  margin-bottom: 1.5rem;
}
.app-feature div {
  display: flex;
  gap: 2rem;
}
.app-feature p {
  margin-bottom: 1.5rem;
}
.download-app .fas {
  display: inline-block;
  background-color: var(--white-shade-2);
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  font-size: 2rem;
  text-align: center;
  padding: 1.5rem;
  color: var(--base-shade-1);
}
.download-app h3 {
  display: inline-block;
}
.download-btns {
  display: flex;
}
.download-btns a {
  display: inline;
  text-align: center;
}
.download-btns a img {
  display: inline-block;
  width: 70%;
}
/*------ Section: Footer ------*/
footer {

}
footer h3 {
  margin: 0;
}
footer h3,
footer h4 {
  color: var(--white-shade-1);
  text-align: center;
}
footer .row {
  margin-bottom: 6rem;
}
.footer-about {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 2px solid var(--white-shade-1);
}
.social-links {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 5rem;
}
.social-links a {
  font-size: 3rem;
  text-decoration: none;
  color: var(--white-shade-1);
}
footer p {
  text-align: center;
}

/*------ Scroll Top Button ------*/
#scroll-top {
  position: fixed;
  display: none;
  place-items: center;
  height: 5rem;
  width: 5rem;
  right: 3rem;
  bottom: 3rem;
  background-color: #c5222e;
  color: var(--white-shade-1);
  border: none;
  outline: none;
  font-size: var(--heading-font-size-3);
  border-radius: var(--border-radius-2);
  box-shadow: 0 1.5rem 2rem rgba(0, 0, 0, 0.2);
  place-content: space-around center;
  Z-INDEX: 1000;
}
/* logo */
#logo {
  width: 250px; /* Ajusta el ancho según tus necesidades */
  height: auto; /* Mantiene la proporción de la imagen */
  margin-right: 20px; /* Espacio entre el logo y el menú */
  vertical-align: middle; /* Alinea verticalmente el logo con el menú */
  cursor: url(/img/curso.png), auto;
}

nav {
  display: flex;
  align-items: center;
  height : 50px;
}


/* Slider */


.slider {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  cursor: url('/img/curso.png'), auto;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  position: relative;
}

.slide img {
  width: 100%;
  height: auto;
  padding:9rem 1rem 1rem;
  margin: 10px;

}


.caption {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0);
  color: white;
  padding: 20px;
  border-radius: 10px;
}

button.prev, button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
}

button.prev2, button.next2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
}

button.next3 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  color: transparent;
}



button.prev {
  left: 599px;
  top: 590px;
  padding: 8px;
  border: 5px solid #FFFFFF;
  border-radius: 50%;
  background-color: transparent;
  width: 10px;
  height: 10px;
  position: sticky;
  color: transparent;
  cursor: url(/img/curso.png), auto;
}


button.prev2 {
  left: 630px;
  top: 590px;
  padding: 8px;
  border: 5px solid rgb(255, 255, 255);
  border-radius: 50%;
  background-color: transparent;
  width: 10px;
  height: 10px;
  position: sticky;
  cursor: url(/img/curso.png), auto;
}


button.prev:hover {
  background-color: white;
  padding: 10px;
  border: 5px solid #c5222e;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  cursor: url(/img/curso.png), auto;
}

button.prev2:hover {
  background-color: white;
  padding: 10px;
  border: 5px solid #c5222e;
  border-radius: 50%;

  width: 10px;
  height: 10px;
  cursor: url(/img/curso.png), auto;
}

button.next:hover {
  background-color: white;
  padding: 10px;
  border: 5px solid #c5222e;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  cursor: url(/img/curso.png), auto;
}

button.next2:hover {
  background-color: white;
  padding: 10px;
  border: 5px solid #c5222e;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  cursor: url(/img/curso.png), auto;
}
button.next3:hover {
  background-color: white;
  padding: 10px;
  border: 5px solid #c5222e;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  color: transparent;
  cursor: url(/img/curso.png), auto;
}


button.next {
  left: 661px;
  top: 590px;
  padding: 8px;
  border: 5px solid #FFFFFF;
  border-radius: 50%;
  background-color: transparent;
  width: 10px;
  height: 10px;
  position: sticky;
  color: transparent;
  cursor: url(/img/curso.png), auto;
}

button.next2 {
  left: 692px;
  top: 590px;
  padding: 8px;
  border: 5px solid #FFFFFF;
  border-radius: 50%;
  background-color: transparent;
  width: 10px;
  height: 10px;
  position: sticky;
  color: transparent;
  
}

button.next3 {
  left: 723px;
  top: 590px;
  padding: 8px;
  border: 5px solid#FFFFFF;
  border-radius: 50%;
  background-color: transparent;
  width: 10px;
  height: 10px;
  position: sticky;
  color: transparent;
}


/* footer */

.nuestros-servicios1 {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
  font-size: 25px;
  color: white;
  left: 2%;
}

.nuestros-contac {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 700;
  font-family: "Poppins";
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
  font-size: 25px;
  color: white;
  left: 2.4%;
}







.nuestros-servicios2 {
  margin: 0;
  width: 216px;
  position: relative;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
  font-size: 20px;
  color: white;
}






.logo-fondo-transparente-mesa-d {
 
  width: 30px;
  position: relative;
  object-fit: cover;
  flex-shrink: 0;
  top: 7px;
  left: 2%;
}

.isotip-banner {
 
  width: 30px;
  position: relative;
  object-fit: cover;
  flex-shrink: 0;
  top: -100px;
  margin-left: 130px;
}

.metrologia {
  margin: 0;
  position: absolute;
  top: 1100px;
  left: 170px;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  width: 172px;
  height: 23px;
  z-index: 2;
}



.auditoria {
  margin: 0;
  position: absolute;
  top: 1100px;
  left: 1000px;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  height: 23px;
  z-index: 2;
}

.consultoria {
  margin: 0;
  position: absolute;
  top: 1100px;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  width: 172px;
  height: 23px;
  z-index: 2;
}


.frame-item {
  border: 7px solid var(--color-firebrick);
  box-sizing: border-box;
  display: none;
}
.consultoria-inner-image,
.frame-item,
.recurso-3-1 {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 25px;
 
  height: 100%;
}

.isotipo-mesa-de-trabajo-1-9 {
  position: absolute;
  top: 269px;
  left: 183px;
  width: 61px;
  height: 53px;
  object-fit: cover;
  z-index: 4;
}
.recurso-3-1-parent {
  position: absolute;
  top: 0;
  left: 4px;
  width: 100%;
  height: 100%;
}
.consultoria-parent {
  align-self: stretch;
  height: 334px;
  position: relative;
  border-radius: var(--br-lg);
  border: 7px solid var(--color-firebrick);
  box-sizing: border-box;
  z-index: 3;
}
.frame-wrapper3 {
  flex: 0.9725;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-35xl) var(--padding-6xs) 0 0;
  box-sizing: border-box;
  min-width: 191px;
}


/* iso */
.isotipo-mesa-de-trabajo-1-8 {
  height: 30px;
  z-index: 1;
  position: relative;
  object-fit: contain;
  flex-shrink: 0;
  top: -37px;
  width: 100%;
  right: -230px;
}

.isotipo-mesa-de-trabajo-1-8-2 {
  height: 30px;
  z-index: 1;
  position: relative;
  object-fit: contain;
  flex-shrink: 0;
  top: -37px;
  width: 100%;
  right: -218px;
}


.isotipo-mesa-de-trabajo-1-8-3 {
  height: 30px;
  z-index: 1;
  position: relative;
  object-fit: contain;
  flex-shrink: 0;
  top: -37px;
  width: 100%;
  right: -208px;
}

/* Estilos para el formulario */
form {
  float: right;
  width: 45%;
  margin-right: 50px;
  color: #ffffff;
  border: 2px solid #2a2929;
  padding: 20px;
  background-color: #2a2929;
  border-radius: 37px; /* Esquinas redondeadas */
  display: block;
  font-size: 14px;
  line-height: 1.42857143;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -webkit-box-shadow: -4px 4px 19px 2px rgba(0, 0, 0, 0.38);
  -moz-box-shadow: -4px 4px 19px 2px rgba(0, 0, 0, 0.38);
  box-shadow: -4px 4px 19px 2px rgba(0, 0, 0, 0.38);
  margin-top: 19px;
}
label {
  display: block;
  margin-bottom: 7px;
}

input[type="text"]{
  border: 2px solid #B6B6B6; /* Borde predeterminado */
  padding: 10px;
  transition: border-color 0.3s; /* Transición suave del color del borde */
  border-radius: 8px;
}
input[type="text"]:focus {
  border-color: #d90000; /* Borde azul cuando se selecciona */
  outline: none; /* Elimina el contorno predeterminado del campo */
}



input[type="tel"]{
  border: 2px solid #B6B6B6; /* Borde predeterminado */
  padding: 10px;
  transition: border-color 0.3s; /* Transición suave del color del borde */
  border-radius: 8px;
}



input[type="tel"]:focus{
  border-color: #d90000; /* Borde rojo cuando se selecciona */
  outline: none; /* Elimina el contorno predeterminado del campo */
}



input[type="email"]{
  border: 2px solid #B6B6B6; /* Borde predeterminado */
  padding: 10px;
  transition: border-color 0.3s; /* Transición suave del color del borde */
  border-radius: 8px;
}


input[type="email"]:focus{
  border-color: #d90000; /* Borde rojo cuando se selecciona */
  outline: none; /* Elimina el contorno predeterminado del campo */
}

input[type="checkbox"] {
  margin-right: 5px;
}
button {
  background: rgb(133,0,7);
 
  color: #ffffff;
  border: none;
  padding: 5px 30px;
  cursor: pointer;
  border-radius: 7px;
}
.button-env
{
  background: rgb(133,0,7);
background: linear-gradient(90deg, rgba(133,0,7,1) 0%, rgba(186,23,35,1) 100%);
  color: #ffffff;
  border: none;
  padding: 1px 30px;
  cursor: pointer;
  border-radius: 7px;
  margin-left: 13px;
  cursor: url(/img/curso.png), auto;

}


.button-env:hover {
  background: #c5222e;
}



/* Estilos para el video */
.video-container {
  float: left;
  width: 50%;
  border-radius: 20px;

}
.video-container iframe {
  
}

.fba{
border-radius: 20px;

}



  /* Estilos para la caja de color plomo */
  .gray-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ccc; /* Color plomo */
    opacity: 0.5; /* Ajusta la opacidad según tus preferencias */
    z-index: -1; /* Coloca la caja detrás de otros elementos */
}

.section-desc1{
  text-align: center;
  margin: 3rem 1rem 1rem;
}
.section-descT{
  text-align: justify;
  margin: 3rem 1rem 1rem;
  margin-left: 41%;
}

.mi-caja{
  background-color: #444444; /* Cambia #ffcc00 al color que desees */
  border-top-width: 1px;
  width: 100%;
  height: 40px;
}

.mi-caja-te{
  background-color: #444444; /* Cambia #ffcc00 al color que desees */
  border-top-width: 1px;
  width: 50%;
}

.mi-caja-ru{
  background-color: #444444; /* Cambia #ffcc00 al color que desees */
  border-top-width: 1px;
  width: 50%;
}




.input-container {
  display: inline-flex;
  margin: 13px;
  width: 100%;
  height: 40px;
}

.input-container input {
  margin-right: 10px; /* Espacio entre los campos */
  color: white;
  cursor: url(/img/curso.png), auto;
}


.mi-caja-ema{
  background-color: #444444; /* Cambia #ffcc00 al color que desees */
  width: 100%;
  height: 40px;
}



 /* Estilos para el menú */
 .dropdown {
  position: relative;
  display: inline-block;
  position: relative;
  justify-content: end;
  display: flex;
}

.dropdown button {
  background: linear-gradient(90deg, rgba(133, 0, 7, 1) 0%, rgba(186, 23, 35, 1) 100%);
  color: #ffffff;
  border: none;
  width: 98%;
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 1;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #444444;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 10px;
  width: 100%;
  margin-left: 3%;
  margin-top: 9%;
}

.dropdown-content a {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s; /* Transición suave del color de fondo */
}

.dropdown-content a:hover {
  background-color: #7c7c7c75; /* Color de fondo cuando se selecciona */
  border: 1px solid #ff0000; /* Borde rojo */
  border-radius: 9px;
}


.isoform {
  float: right;
  display: flex;
      margin-left: 1130px;
  justify-content: space-evenly;
      width: 40px;
      position: absolute;
      top:1304px;
      left: 0;
}

.isoform2 {
  float: right;
  display: flex;
  justify-content: space-evenly;
  width: 40px;
  position: absolute;
  margin-top: 5px;
  margin-left: 45%;
}
.isoform3{
  float: right;
  display: flex;
      margin-left: 140px;
  justify-content: space-evenly;
      width: 110px;
      position: absolute;
      top: 510px;
      left: 0;
}

/* fotter final*/


/* Estilos para los elementos dentro del footer */
.logo-empresa {
  width: 300px;
  height: auto;
  float: left;
  margin-right: 10px;
  cursor: url(/img/curso.png), auto;
}

.terminos{
  display: block;
  text-align: center;
  color: white;
  cursor: url(/img/curso.png), auto;
}
.politica{
  display: block;
  text-align: center;
  color: white;
  margin-top: 10px; /* Ajusta el valor según tus preferencias */
  cursor: url(/img/curso.png), auto;
  
}



.libro-reclamaciones {
    /* Agrega estilos específicos para el libro de reclamaciones */
    /* Por ejemplo: */
    width: 80px; /* Ancho deseado */
    height: auto; /* Altura automática para mantener la proporción */
    margin-left: 10px; /* Esca para mantener la proporción */
    cursor: url(/img/curso.png), auto;
}

.redes-sociales a {
  display: inline-flex;
  margin: 12px;
  border-radius: 50%;
  width: 32px;
  height: 62px;
  transition: background-color 0.3s; /* Transición suave */
}

.yt{ 
width: 50px;
height: 48px;
border-radius: 100%;
background-color: #F4F4F4;
cursor: url(/img/curso.png), auto;
}



.yt:hover {

  border-radius: 100%; /* Círculo */
  background-color: #c5222e; /* Color rojo al pasar el cursor */
}

p a[href="/terminos-y-condiciones"] {
  display: block;
  text-align: left; /* Alineación a la izquierda */
  /* Otros estilos que desees aplicar */
}

.footer-content{
  background-color: #2A2A2A; /* Color plomo */
  padding: 20px; /* Espaciado interno */
  text-align: center; /* Alineación del contenido */
  border-radius: 15px;
  -webkit-box-shadow: -4px 4px 19px 2px rgba(0, 0, 0, 0.38);
  -moz-box-shadow: -4px 4px 19px 2px rgba(0, 0, 0, 0.38);
  box-shadow: -4px 4px 19px 2px rgb(0 0 0 / 17%);

  padding: 20px; /* Espaciado interno */
  display: flex; /* Utilizamos Flexbox */
  justify-content: flex-end; /* Alineación a la derecha */
  align-items: center;
  justify-content: space-between;

}

.footer-copyright{
  text-align: justify;
  display: block;
  text-align: center;
}

.contac{
  text-align: -webkit-left;
}

.ruler {
  border-top: none; /* Establece el estilo de la línea */
  border: #c5222e;
}


/* Estilos del botón de WhatsApp */
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  transform: translate(-13px, -70px);
}

.whatsapp-button img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  animation: jump 3s infinite;
  cursor: url(/img/curso.png), auto;
}

/* Estilos de la caja de chat */
.chat-box {
  bottom: 90px;
  right: 120px;
  width: 300px;
  background-color: #fff;
  border: 1px solid #777777;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  animation: slideIn 0.3s forwards;
  position: fixed;
  max-height: 400px;
  background-color: #2a2a2a;
  border: 4px solid #323232;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  animation: slideIn 0.4s forwards;
  display: none; 
}

.chat-header {
  background:linear-gradient(41deg, rgba(133,0,7,1) 0%, rgba(186,23,35,1) 58%);
  color: #fff;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 12PX;
  /* border-bottom-left-radius: 7px;*/
  /* border-bottom-right-radius: 7px;*/
}

.chat-content {
  padding: 10px;
  overflow-y: auto;
  background: #2a2a2a;
}

.chat-footer {
  text-align: center;
  padding: 10px;
  background: #2a2a2a;
}

.whatsapp-button2 {
  display: inline-block;
  background-color: #c5222e;
  background: #444444;;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.whatsapp-button2:hover {
  background: linear-gradient(90deg, rgba(133, 0, 7, 1) 0%, rgba(186, 23, 35, 1) 100%);
  cursor: url(/img/curso.png), auto;
}

.boxx{
  font-size: 13px;
  text-align: center;
  line-height: 1;
}

/* Animación de deslizamiento */
@keyframes slideIn {
  from {
      transform: translateY(100%);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}

@keyframes jump {
  0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
  }
  40% {
      transform: translateY(-20px);
  }
  60% {
      transform: translateY(-10px);
  }
}












/* Estilos generales */
body {
  font-family: "Poppins", sans-serif;
  font-size: 1.25vw; /* Tamaño de fuente relativo al ancho de la ventana */
}

body::-webkit-scrollbar {
  width: 8.5px;
  background: #212121;
}

body::-webkit-scrollbar-thumb {
  background: #6C6C6C;
  border-radius: 5PX;
}


/* Contenedor principal */
.container {
  width: 60vw; /* Ancho relativo al ancho de la ventana */
  margin: 0 auto;
  padding: 2vh; /* Padding relativo a la altura de la ventana */
  box-sizing: border-box;
}

/* Div contenedores */
.div-container {
  width: 100%;
  padding: 2vh; /* Padding relativo a la altura de la ventana */
  margin-bottom: 2vh; /* Margen inferior relativo a la altura de la ventana */
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 1.25vw; /* Tamaño de fuente relativo al ancho de la ventana */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  .div-container {
    padding: 1vh; /* Ajuste del padding relativo a la altura de la ventana */
    font-size: 1vw; /* Tamaño de fuente relativo al ancho de la ventana */
    
  }
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 480px) {
  .div-container {
    padding: 2vh; /* Ajuste del padding relativo a la altura de la ventana */
    font-size: 1.75vw; /* Tamaño de fuente relativo al ancho de la ventana */
  }
}



.chat-footer a{
  font-size: 11PX;

}

.fot-marge {
  margin: 2.6%;

}

.services23{

  background: rgb(255, 0, 0);
    cursor: pointer;
    position: relative;
    z-index: 3;
    width: 98%;

    margin-bottom: 17px;
    padding: 12px;
    opacity: 0; /* Para hacer que el select sea invisible */
    outline: none; /* Eliminar el borde azul */
    -webkit-appearance: none; /* Para Safari */
    -moz-appearance: none; /* Para Firefox */
    appearance: none; /* Para otros navegadores */
    cursor: url(/img/curso.png), auto;
}



select{
  color: white;
  outline: none; /* Eliminar el borde azul */

}
select:focus {
  outline: none; /* Eliminar el borde azul */
  box-shadow: none; /* Eliminar cualquier sombra */
}

select option:checked {
  background-color: #666666; /* Color plomo oscuro */
  color: white;
  outline: none; /* Eliminar el borde azul */
}
  .fon{
    background:#444444;
    color: white;
    font-size: 140%;
    outline: none; /* Eliminar el borde azul */
    -webkit-appearance: none; /* Para Safari */
    -moz-appearance: none; /* Para Firefox */
    appearance: none; /* Para otros navegadores */
  }

