/*------ Variables ------*/
:root {
  --base-shade-1: #292929;
  --white-shade-1: #ffffff;
  --white-shade-2: #d7e1f3;
  --black-shade-1: #292929;
  --black-shade-2: #292929;
  --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 ------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  overflow-x: hidden;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  font-family: "Poppins";
}
/*------ Utility Classes ------*/

section{
  max-width: 100%;
  background:#ffffff;
  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: #212121;
  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:#212121;
  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:#212121;
  font-weight: 700;
  text-align: start;
  position: relative;
  top: -20px;
  left: -110px;
  line-height: 0.2;
}

.slider .caption .subtex-ban-1{
  color:#212121;
  font-weight: 10;
  text-align: start;
  position: relative;
  top: 1px;
  left: -110px;
  line-height: 1;
  font-size: 20px;
}


.navbar{
  margin: 25px 10px 25px 10px;
}
  


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: #212121;
  margin: 2rem 1.5rem;
  display: flex;
  justify-content: flex-start;
  margin-block: 2px;
}

.testa-1 h3 {
  font-size: var(--heading-font-size-3);
  color: #212121;
  margin: 2rem 1.5rem;
  justify-content: flex-start;
  margin-block: 2px;
}

h4 {
  color: #212121;
  margin: 2rem 1.5rem;
  display: flex;
  justify-content: flex-start;
  margin-block: 2px;
  font-family: sans-serif;
  font-size: 15px;
}

h5{
  color: #212121;
  margin: 2rem 1.5rem;
  display: flex;
  justify-content: flex-start;
  margin-block: 2px;
}


p,
button {
  font-size: var(--base-font-size);
  color: #212121;
  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%;
  justify-content: space-between;
  top: 0;
  z-index: 1000;
  left: 0;
  background-color: #b90014;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Sombra suave para separar del banner */
}

/*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;
  gap: 3rem; /* Reducido gap de 10rem a 3rem para evitar desbordamiento */
  font-size: 18px; /* Ajustado tamaño de fuente */
  max-width: 100%;
  font-weight: 600;
  align-items: center;
}
nav a {
  font-size: var(--heading-font-size-4);
  text-decoration: none;
}
nav a#logo {
  color: var(--black-shade-1);
  font-weight: 700;
}
nav ul a {
  color: #ffffff;
  font-size: 16px; /* Ajustado de 22.1px a 16px para mejor visualización */
  text-transform: uppercase;
}

/*-- SideMenu --*/
#ham-menu {
  display: none;  
}
nav ul.active {
  left: 0;
}
/*-- Sticky Header --*/
.sticky {
  background-color:#ffffff;
  box-shadow: 0 2rem 1.5rem rgba(0, 0, 0, 0.05);
}
.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;
  cursor: pointer;
}
.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:#292929;
  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: #292929;
  transition: width 0.2s linear;
}

/*------ Section: Hero ------*/
section.hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  background:#ffffff;
}
#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;
  background-color: #ffffff; /* Asegurar fondo blanco en tarjetas */
}

.links{
margin-bottom: 0%;

}

.courses .column > *:not(img) {
  padding: 0rem;
  margin-bottom: 0rem;
}
.courses .column img {
  border-radius: 15px;
  width: 100%;
  cursor: pointer;
}

.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: #212121;
}

.slider h2,
.slides .slide {
  color: #212121;
}
.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 {
    position: relative; 
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 6, 23, 1) 0%, rgb(156, 70, 70) 100%);
    border-radius: 20px;
    
    /* Ajusté el padding superior a 6rem. 14rem dejaba demasiado espacio vacío arriba. Ajusta este valor si necesitas más espacio. */
    padding: 6rem 2rem 3rem 2rem; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Nuevo: Estilos para el contenedor interno (.column2) */
.testimonial .column2 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente el texto y la imagen principal */
    text-align: center;
    width: 100%;
}

/* Opcional: Le damos un poco de estilo al logo (secamet.png) para que encaje bien */
.testimonial-image {
    width: 250px; /* Ajusta el tamaño del logo principal aquí */
    margin-bottom: 1.5rem;
    margin-left: 50px;
}

.testimonial-image img {
    width: 80%;
    height: auto;
    display: block;
}

.testimonial-imagestre {
    position: absolute;
    top: 0.5rem; 
    margin-left: 25px;
    width: 150px; 
    height: auto; 
    z-index: 10;
}

.testimonial-imagestre img {
    width: 100%; 
    height: auto;
    object-fit: contain; /* Usamos contain para asegurarnos de que no se recorten los bordes de las estrellas */
    display: block;
}
.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;
}



.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-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;
}

.testa h3, 
.testa h4 {
    text-align: center;
    width: 100%;      /* Asegura que usen todo el espacio para centrarse bien */
    margin: 0;        /* Elimina los márgenes por defecto que los ponen chuecos */
    padding: 0.2rem;  /* Le da un respiro pequeñito entre ellos */
}

/* Para asegurar que su contenedor directo también esté centrado */


/*------ 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: 180px; /* Reducido tamaño de 250px a 180px para dar más espacio al menú */
  height: auto;
  margin-right: 20px;
  vertical-align: middle;
}

nav {
  display: flex;
  align-items: center;
  height : 50px;
}


/* Slider */


.slider {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
}

.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.7); /* Fondo semi-transparente para legibilidad */
  color: #212121;
  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;
}


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;
}


button.prev:hover {
  background-color: white;
  padding: 10px;
  border: 5px solid #c5222e;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

button.prev2:hover {
  background-color: white;
  padding: 10px;
  border: 5px solid #c5222e;
  border-radius: 50%;

  width: 10px;
  height: 10px;
}

button.next:hover {
  background-color: white;
  padding: 10px;
  border: 5px solid #c5222e;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

button.next2:hover {
  background-color: white;
  padding: 10px;
  border: 5px solid #c5222e;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
button.next3:hover {
  background-color: white;
  padding: 10px;
  border: 5px solid #c5222e;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  color: transparent;
}


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;
}

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 */
footer {
  background-color: #b90014;
  width: 100%;
  margin: 0;
  padding: 0;
}

.nuestros-servicios1 {
  margin: 0;
  position: relative;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
  font-size: 25px;
  color: var(--base-shade-1); /* Color rojo de marca */
  left: 2%;
}

.nuestros-contac {
  margin: 0;
  position: relative;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
  font-size: 25px;
  color: var(--base-shade-1); /* Color rojo de marca */
  left: 2.4%;
}

.nuestros-servicios2 {
  margin: 0;
  width: 216px;
  position: relative;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
  font-size: 20px;
  color: var(--base-shade-1); /* Color rojo de marca */
}






.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: #212121;
  border: 2px solid #f0f0f0;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 37px; /* Esquinas redondeadas */
  display: block;
  font-size: 14px;
  line-height: 1.42857143;
  box-shadow: 0 4px 19px rgba(0,0,0,0.1);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  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;

}


.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: #f5f5f5; /* Color claro para input */
  border: 1px solid #ddd;
  width: 100%;
  height: 40px;
}

.mi-caja-te{
  background-color: #f5f5f5; /* Color claro para input */
  border: 1px solid #ddd;
  width: 50%;
}

.mi-caja-ru{
  background-color: #f5f5f5; /* Color claro para input */
  border: 1px solid #ddd;
  width: 50%;
}

.input-container input {
  margin-right: 10px; /* Espacio entre los campos */
  color: #212121;
}

.mi-caja-ema{
  background-color: #f5f5f5; /* Color claro para input */
  border: 1px solid #ddd;
  width: 100%;
  height: 40px;
}



 /* Estilos para el menú dropdown del formulario */
 .dropdown {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 55px; /* Increased height */
  margin-top: 10px;
  margin-bottom: 20px;
}

.dropdown select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Make select invisible but clickable */
  cursor: pointer;
  z-index: 2; /* Put it ABOVE the button so clicks hit the select */
}

.dropdown button {
  background: linear-gradient(90deg, rgba(133, 0, 7, 1) 0%, rgba(186, 23, 35, 1) 100%);
  color: #ffffff;
  border: none;
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* BELOW the select */
  border-radius: 5px;
  pointer-events: none; /* Clicks pass through to the select */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  z-index: 1;
  border-radius: 10px;
  width: 100%;
  margin-left: 3%;
  margin-top: 9%;
  border: 1px solid #ddd;
}

.dropdown-content a {
  color: #212121;
  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;
}

.terminos{
  display: block;
  text-align: center;
  color: var(--white-shade-1);
}
.politica{
  display: block;
  text-align: center;
  color: var(--white-shade-1);
  margin-top: 10px; /* Ajusta el valor según tus preferencias */
}



.libro-reclamaciones {
    width: 22px;
    height: 100px;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.libro-reclamaciones:hover {
    transform: scale(1.05);
}

.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;
}



.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: #b90014;
  padding: 40px 5%;
  text-align: center;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
  box-sizing: border-box;
}

.footer-content > * {
  flex: 1;
  min-width: 200px;
}

.footer-content .logo-empresa {
  max-width: 200px;
  height: auto;
}

.footer-content p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.footer-content .terminos, 
.footer-content .politica {
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.3s;
}

.footer-content .terminos:hover, 
.footer-content .politica:hover {
  opacity: 0.8;
}

.redes-sociales {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  align-items: center;
}

.redes-sociales img {
  width: 30px;
  height: 30px;
  transition: transform 0.3s;
}

.redes-sociales img:hover {
  transform: scale(1.1);
}

@media (max-width: 992px) {
  .footer-content {
    justify-content: center;
    text-align: center;
  }
  
  .redes-sociales {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    padding: 40px 20px;
  }

  .footer-content > * {
    width: 100%;
    flex: none;
  }
}

.footer-copyright {
  background-color: #b90014;
  color: white;
  margin: 0;
  padding: 20px 0;
  text-align: center;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.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;
}

/* 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%);
}

.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 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.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 */
}



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 */
  }

@media only screen and (max-width: 991px) {
  html {
    font-size: 56.25%;
  }

  .row {
    flex-direction: column;
  }

  section,
  footer {
    padding: 7.5rem 5rem;
  }

  header {
    padding: 2.2rem 5rem;
  }

  section.hero {
    grid-template-columns: 1fr;
    background: linear-gradient(45deg,
        rgb(var(--grad-color-1)),
        rgb(var(--grad-color-2)));
  }

  #header-shape {
    display: none;
  }

  .hero-img {
    grid-row: 1;
  }

  nav ul a,
  nav a#logo {
    color: var(--white-shade-1);
  }

  .hero-content h1,
  .hero-content p {
    text-align: center;
  }

  .hero-content h1 {
    color: var(--white-shade-1);
  }

  .hero-content p {
    color: var(--white-shade-2);
  }

  .hero-content .primary-btn {
    background-color: var(--white-shade-1);
    color: var(--base-shade-1);
  }

  .hero-content .secondary-btn {
    color: var(--white-shade-1);
    border-color: var(--white-shade-1);
  }

  .btn-container {
    justify-content: center;
  }

  .download-app img {
    width: 30%;
  }

  .app-feature div {
    justify-content: center;
  }

  .app-feature p {
    text-align: center;
  }

  .download-app a img {
    width: 50%;
  }
}

@media only screen and (max-width: 767px) {
  html {
    font-size: 50%;


  }

  header {
    padding: 2rem 4rem;
  }

  #ham-menu {
    display: block;
    color: var(--white-shade-1);
    order: -1; 
  }

  nav a#logo,
  #ham-menu {
    font-size: var(--heading-font-size-2);
    padding-right: 20px;
  }

  nav {
    justify-content: space-between !important;
  }


  nav ul {
    background-color: #d23444;
    position: fixed;
    left: -100vw;
    top: 100px; 
    height: auto; 
    min-height: 250px; 
    width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
    gap: 4rem; 
    padding: 3rem 0; 
    z-index: 9999;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
}

  nav ul.active {
      left: 0;
  }

  nav ul a {
      color: white;
      text-decoration: none;
      font-size: 2.2rem; 
      font-weight: 800; 
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: 0.3s; 
      width: 70%;
      text-align: center;
  }

  /* Efecto cuando pasas el dedo o el mouse */
  nav ul a:active, nav ul a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      scale: 1.1;
      color: #ffcccc;
  }

  .sticky nav ul a {
    color: var(--white-shade-1);
  }

  nav ul a:hover {
    color: var(--base-shade-1);
  }

  #scroll-top {
    height: 6rem;
    width: 6rem;
  }
}

@media only screen and (max-width: 575px) {
  html {
    font-size: 46.87%;

  }

  .courses {
    margin-top: -8rem;
  }

  .courses .row .column {
    margin-left: 0.7rem;
  }

  header {
    padding: 2rem 5rem;
    width: 100%;
  }

  #logo {
    width: 70%;

  }

  .sticky {
    width: 100%;

  }

  body {
    content: '';
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
  }

  .slider {
    padding: 0;
    margin-top: 70px; /* Espacio para el header sticky */
    position: relative;
    max-width: 100%;
    overflow: hidden;
  }

  .slides {
    display: flex;
    width: 100%;
    height: auto;
  }

  .slide {
    min-width: 100%;
    width: 100%;
    position: relative;
  }

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

  .section-desc {
    justify-content: center;
    margin-top: 8rem;
  }

  .section-descT {
    text-align: justify;
    margin: 1rem 1rem 1rem;
    justify-content: center;
    display: flex;
  }

 .testimonial-imagestre {
    position: absolute;
    top: -100px; /* <--- Agrega esto para subirlo */
    justify-content: center;
    margin-right: 40px;
    z-index: 10;
    color: white;
    cursor: pointer;
    display: flex;
    width: 10%;
}

.testimonial-imagestre img {
    justify-content: center;
    width: 50%;
}

  .testimonial-image {
    justify-content: center;
    width: 70%;
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
    margin-top: 8rem;

  }

  .testimonial-image img {
    justify-content: center;
    width: 100%;
  }

  .row {
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
  }

  .courses .row {
    padding: 1rem;
    gap: 2rem;
  }

  .courses .column {
    margin-left: 0;
    width: 100%;
  }

  /* Footer y otros elementos movidos a componentes */
  .footer-content {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2rem;
    gap: 2rem;
  }

  .logo-empresa {
    width: 200px;
    margin: 0 auto;
  }

  .libro-reclamaciones {
    width: 80px;
    margin: 0 auto;
  }

  .redes-sociales {
    justify-content: center;
    margin: 1rem 0;
  }

  .footer-content p {
    flex-direction: column;
    gap: 1rem;
    margin: 0;
  }

  .politica {
    margin-left: 0;
  }

  /* WhatsApp y Chat responsive */
  .whatsapp-button {
    bottom: 20px !important;
    right: 20px !important;
    transform: none !important;
  }

  .whatsapp-button img {
    width: 60px !important;
    height: 60px !important;
  }

  .chat-box {
    width: 85% !important;
    right: 7.5% !important;
    left: 7.5% !important;
    bottom: 90px !important;
  }
 @media (max-width: 768px) {
    .testimonial .column1 {
        /* Reducimos el padding para que la tarjeta no ocupe tanta pantalla en el celular */
        padding: 3rem 1.5rem 2rem 1.5rem; 
    }

    .testimonial-imagestre {
        /* Anulamos los valores gigantes de tu versión de PC */
        margin-left: 35px; 
        width: 350px; /* Un tamaño adecuado para que las estrellas entren en el celular */
        
        /* Lo centramos de forma segura para móviles */
        position: absolute; 
        top: 3rem;
   
    }


  
}
}

.column2 {
    width: 100%;
    padding: 1rem;
}

@media screen and (max-width: 350px){
  form {
    margin-top: 7rem;
  }
  .logo-empresa {
    width: 200px;
    margin-left: 0.6rem;

  }

  .libro-reclamaciones {
    max-width: 65px;
    margin-left: -10rem;
  }

  .footer-content p {
    font-size: 1.4rem;
    margin-top: 2rem;
    margin-left: 3rem;
    
  }

  .redes-sociales {
    gap: 5px;
    margin-left: 0;
  }

}

/* --- AJUSTES GLOBALES RESPONSIVE PARA TODAS LAS VISTAS --- */
@media screen and (max-width: 768px) {
  /* Evitar scroll horizontal (overflow) muy común en móviles */
  body, html {
    overflow-x: hidden;
    width: 100%;
  }

  /* Hacer que todos los videos, iframes e imágenes sean responsive */
  img, iframe, video {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  /* Ajustar contenedores principales para que no se salgan de la pantalla */
  .contenedor, .container-principal {
    width: 100% !important;
    padding: 0 15px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Centrar textos y arreglar márgenes excesivos */
  .parrafo p, .section-descT p {
    margin: 0 !important;
    font-size: 1.6rem !important;
    text-align: center !important;
    padding: 0 10px;
  }

  /* Ajustar los botones del carrusel para que entren en pantalla */
  button.prev, button.next, button.prev2, button.next2, button.next3 {
    padding: 10px !important;
    font-size: 12px !important;
    min-width: 30px;
  }
}

@media screen and (max-width: 768px) {
  .contacc {
    padding: 2rem 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .video-container {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  
  #frm-Email {
    margin: 0 auto 10px auto !important;
    padding: 30px 20px !important;
    width: 100% !important;
    max-width: 95% !important;
    box-sizing: border-box;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    background-color: white;
  }
  .testimonial {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .testimonial > section {
    padding-top: 0 !important;
  }
  .testimonial .section-desc {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .section-descT {
    margin-top: 0 !important;
  }
  .testimonial .row {
    padding: 1rem !important;
  }
  .input-container {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    gap: 10px;
  }
  .mi-caja, .mi-caja-te, .mi-caja-ru, .mi-caja-ema {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  .dropdown button {
    width: 100% !important;
  }
}

/* =========================
   FOOTER RESPONSIVE
========================= */

/* CELULAR */
@media (max-width: 768px) {

  .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    gap: 25px;
    text-align: center;
  }

  .logo-empresa {
    width: 180px;
    height: auto;
  }

  .terminos,
  .politica {
    display: block;
    margin: 12px 0;
    font-size: 18px;
    text-align: center;
  }

  .libro-reclamaciones {
    width: 180px;
    max-width: 80%;
    height: auto;
    object-fit: contain;
  }

  .redes-sociales {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }

  .redes-sociales a {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .redes-sociales img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .footer-copyright {
    text-align: center;
    font-size: 15px;
    padding: 15px;
    line-height: 1.5;
  }

  .fot-marge footer {
    overflow: hidden;
  }

  .whatsapp-button {
    right: 15px;
    bottom: 15px;
  }

  .whatsapp-button img {
    width: 60px;
    height: 60px;
  }
}

/* TABLET / LAPTOP PEQUEÑA */
@media (min-width: 769px) and (max-width: 1100px) {

  .footer-content {
    gap: 35px;
    padding: 45px 35px;
  }

  .libro-reclamaciones {
    width: 150px;
    margin-right: 35px;
  }

  .redes-sociales {
    gap: 22px;
  }

  .redes-sociales a {
    width: 38px;
    height: 38px;
  }

  .redes-sociales img {
    width: 18px;
    height: 18px;
  }
}