* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body, h1,  h3, h4, h5, h6, p, a, span, div, li {font-family: "Rubik", sans-serif; font-weight: 400;}

.hr-estilo {border: none;  margin: 40px 50px 0 50px; height: 1px; background-color: rgb(214, 214, 214); }
.seccion {color:rgb(170, 170, 170); margin-left: 50px;}
#espacioo {padding-top: 20px;}
.hr-espacio-abajo {margin-bottom: 15px;}
body {color: #333; overflow-x: hidden;}
#verde {color: #8dc580;}
.volverHome {background-color: #77be67; text-align: center; text-decoration: none; color: white; padding: 10px 20px; border-radius: 20px; display: block; width: fit-content; margin: 0 auto;}
.volverHome:hover {background-color: #4aac33;}

.rubik-font {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.noto-serif-font {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.noto-serif-font2 {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.flex {display: flex;}
.espacio-arriba {margin-top: 25px;}
.espacio-arriba2 {margin-top: 100px;}
.espacio-arriba3 {margin-top: 35px;}
.espacio-arriba4 {margin-top: 20px;}
i {color: #4aac33; font-size: 18px;}
#lab-prop {text-align: left; margin-top: 50px; margin-left: 110px; margin-bottom: 10px;}

/* Navbar */
.navbar {
  background: #ffffff;
  margin: 0 auto;
  font-size: 16px;
  padding: 15px;
}

nav a.active { color: #010101;}
.navbar > ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 25px;
}

.navbar ul li {position: relative;}
.navbar a {
  text-decoration: none;
  color: rgb(175, 175, 175);
  font-weight: 400;
  transition: color 0.3s;
}
.navbar a:hover {color: #010101;}
.espacio {margin-top: 20px;}
.space {display: flex; margin: 10px; gap:30px; padding-left: 20px;}
.contactate {padding: 15px 50px; margin-top: 20px; margin-bottom: 15px;}
.contacto-footer {gap: 10px; display: flex; flex-direction: column; text-align: center;}
.contacto-footer2 {font-size: 11px; justify-content: space-between; padding: 2px;}
.contacto-footer3 {font-size: 11px; justify-content: space-between; padding: 2px; padding-left: 30px;}
.row {display: flex; flex-direction: row; gap: 15px;}
.row2 {display: flex; flex-direction: row; gap: 15px; padding-bottom: 20px;}
.margin {margin-left: 10px; margin-right: 10px;}
.margin2 {margin-left: 100px;}
.margin3 {margin-right: 50px;}
.padding-top {padding-top: 10px; padding-bottom: 10px;}
.arreglar {padding:70px 150px 0 30px; margin-left: 30px;}
.arreglar2 {padding:70px 150px 0 30px; margin-left: 0px; margin-right: 0px;}
#margin-right {margin-right: 110px;}
.div-centrado {display: flex; justify-content: center; gap: 3px;}
.div-centrado2 {display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-left: 190px; margin-bottom: 70px; margin-top: 50px;}
.div-centrado3 {display: flex; justify-content: center;}
.div-centrado4 {display: flex; justify-content: space-between; gap: 100px;}
.div-centrado2 h2 {text-align: start;}
.flexi {display: flex; flex-wrap: wrap; width: 200px; gap: 20px;}
.flexo {display: flex; justify-content: center; align-items: center; gap: 200px;}
.inicio {text-align: left; padding-left: 65px; margin-top: 40px; font-size: 25px;}
.inicio2 {text-align: left; padding-left: 50px; margin-top: 40px; font-size: 25px; margin-bottom: 15px;}
.gris {background-color: #e7e6e6; border-top-right-radius: 20px; border-bottom-right-radius:20px; padding-left: 50px; padding-top: 40px; padding-bottom: 40px; padding-right: 40px; flex: 1;}
.gris2 {padding-top: 40px; padding-bottom: 40px;}
.gris3 {background-color: #e7e6e6; border-top-right-radius: 20px; border-bottom-right-radius:20px; padding-left: 110px; padding-top: 50px; padding-bottom: 40px; padding-right: 120px;}
.gris3 li {margin-left: 50px;}


/* Main */
main { background-color: rgb(255, 255, 255);}
.texto-centrado {text-align: center;}
h1 {text-align: center; font-size: 25px;color: #4e4d4d;}
h2 {font-size: 18px; text-align: center;}
h3 {text-align: center; font-size: 23px;}
.contenido {margin-bottom: 3rem; margin-top: 3rem;}
.contenido p {font-size: 16px;}
.koli {border-right: 1px solid rgb(161, 161, 161); padding: 10px; font-size: 20px;}
.koli2 {padding: 10px; font-size: 20px;}
.koli3 {padding: 10px; font-size: 20px; padding-top: 19px;}
.kolo {display: flex; gap: 10px; margin-top: 50px;}
.kolo2 {display: flex; gap: 10px; margin-top: 20px;}
.verde {color: #4aac33; margin-bottom: 0; padding-bottom: 0;}
.scale {transform: scale(1.05);}
.agrandar {font-size: 20px;}
.agrandar2 {font-size: 25px;}
.agrandar3 {font-size: 30px;}
.agrandar4 {font-size: 16px;}
#agrandar {font-size: 75px; color: white; padding-top: 20px; padding-bottom: 20px;}
.espacio-abajo {margin-bottom: 130px;}
.espacio-abajo2 {margin-bottom: 50px;}
.espacio-abajo3 {margin-bottom: 20px;}
.radius {border-radius: 20px;}
/*---------------------------Carrusel del inicio-----------------------------------------------------------*/
.carousel {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  margin-bottom: 30px;
}

/* Slides */
.slides {
  display: flex;
  width: 400%; /* 4 slides */
  transition: transform 0.8s ease;
  touch-action: pan-y; 
}

/* Cada slide */
.slide {
  width: 100%;
  flex-shrink: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: #fff;
}

/* Tus imágenes (siguen igual) */
.slide1 { background-image: url(/imagenes/carrousel1.jpg); background-size: contain; height: 408px; }
.slide2 { background-image: url(/imagenes/carrousel2.jpg); background-size: contain; height: 408px; }
.slide3 { background-image: url(/imagenes/carrousel4.jpg); background-size: contain; height: 408px; }
.slide4 { background-image: url(/imagenes/carrousel3.jpg); background-size: contain; height: 408px; }

/* Inputs invisibles */
input[name="carousel"] { display: none; }

/* Controles */
.controls {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
}

.controls label {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background: rgba(160, 159, 159, 0.541);
  border-radius: 50%;
  cursor: pointer;
}

/* Slide activo */
#slide1:checked ~ .slides { transform: translateX(0%); }
#slide2:checked ~ .slides { transform: translateX(-100%); }
#slide3:checked ~ .slides { transform: translateX(-200%); }
#slide4:checked ~ .slides { transform: translateX(-300%); }

/* Indicador activo */
#slide1:checked ~ .controls label[for="slide1"],
#slide2:checked ~ .controls label[for="slide2"],
#slide3:checked ~ .controls label[for="slide3"],
#slide4:checked ~ .controls label[for="slide4"] { background: rgba(44, 44, 44, 0.541);}

/*--------------------------Fin carrusel---------------------------------*/
/* Cajitas */
  .card-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
  }
  #card-container {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
  }
  .card-container2 {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
  }
  .card2 {
    width: 180px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    border: 2px solid #8dc580;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    background-color: white;
  }
  .card3 {
    width: 175px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
    background-color: #f8f8f8;
    border: 1px solid #b3dbab;
  }
  .card4 {
    width: 180px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    background-color: #8ec581;
  }
  .card5 {
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    background-color: #8dc580;
  }
  .card5 .image-container img {
  width: 250px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
  .card3 img {width: 100%; height: 120px; object-fit: contain;}
  .card-content {background-color: white; }
  .card2:hover {transform: translateY(-5px);}
  .card3:hover {transform: translateY(-5px);}
  .card2 img {width: 100%; height: 120px; object-fit: contain; margin-bottom: 10px;}
  #fondo-verde {background-color: #8dc580; padding: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}

  .card-title {
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: #8dc580;
    padding: 10px 5px;
    margin: 0;
  }
  .card-title2 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
    background-color: #8dc580;
    padding: 8px;
  }

  .card-title3 {
    font-size: 16px;
    font-weight: bold;
    color: #8dc580;
    margin-top: 0;
    padding-top: 0;
    padding: 8px;
  }
  .padin {padding-top: 20px; margin-bottom: 10px;}
  .padin-bott {padding-bottom: 15px; padding-top: 15px;}
  .card-description {
    font-size: 14px;
    color: #34290b;
    padding: 10px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center; 
    text-align: center;
}
.card-description2 {
    font-size: 14px;
    color: #52514e;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center; 
    text-align: center;
    background-color: #f8f8f8;
    border-top: 1px solid #b3dbab;
    padding: 10px;
}

.sumate-cards {display: flex; flex-direction: wrap; gap: 20px; justify-content: center;}
.sumate {background-image: url(../imagenes/sumate2.png); padding: 25px 0 25px 0; background-size: cover; margin-top: 10px; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);}
.flexing {display: flex; flex-direction: column; background-color: #f0f0f0; padding-bottom: 10px;}
.center {font-size: 25px; display: block; text-align: center;}
.div-centrado2 h1 {text-align: left;}

/*-----------------tooltip-------------------------*/
/* Contenedor del tooltip */
.tooltip {position: relative; display: inline-block; cursor: pointer;}
.tooltip .tooltip-text {
  visibility: hidden;
  width: 160px;
  background-color: #4e4d4d;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%; 
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.tooltip:hover .tooltip-text {visibility: visible; opacity: 1;}
.tooltip-right .tooltip-text {left: auto; right: 0; transform: none;}
.tooltip-right .tooltip-text::after {left: auto; right: 10px;}

/*-----------------fin tooltip-------------------------*/
.padding {padding: 20px;}
.letra-chica {font-size: 12px;}
#titulo {font-weight: 400; color: white; padding-bottom: 15px;}
    
/* Formulario */

.form { border-radius: 8px; margin: 0 auto; width: 154%;}
.form2 {border-radius: 8px; margin: 0 auto; min-width: fit-content; width: 50%;}
.campo {margin-bottom: 10px;}
label {display: block; font-weight: 300; font-size: 14px;}
#telefono , #empresa {width: 190%;}
input, textarea {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid #ffffff;
  border-radius: 5px;
  background-color: #e9e9e9;
}
input:focus,textarea:focus {border: 2px solid #f39c12;outline: none; }
.achic {width: 76%;}
.agrand {width: 120%;}

button {
  background:  #8ec581;
  font-size: 14px;
  color: #fff;
  border: none;
  padding: 10px;
  padding-left: 50px;
  padding-right: 50px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: normal;
  font-family: "Rubik", sans-serif;
  transition: background 0.3s;
}
button:hover {background: #4aac33;}

.boton2 {
  background:  #8f8f8f;
  font-size: 14px;
  color: #ffffff;
  border: none;
  padding: 10px 50px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: normal;
  font-family: "Rubik", sans-serif;
  transition: background 0.3s;
  text-decoration: none;
}
.boton2:hover {background-color: #696969;}

/*HOVER SOBRE IMAGEN*/
.image-container {position: relative; width: 100%; overflow: hidden;}
.image-container img {width: 100%; transition: opacity 0.3s ease;}

/* Texto oculto por defecto */
.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-weight: normal;
  font-size: 16px;
  background-color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container:hover img {opacity: 0;}
.image-container:hover .overlay-text { opacity: 1;}

.contenedor {
  display: grid;
  grid-template-columns: 2fr 1.2fr;
  margin: 0 auto 50px auto;
  width: 100%;
  align-items: start;
  background-color: rgb(255, 255, 255);
  gap: 70px;
}
.margo {text-align: start; margin-left: 47px; margin-bottom: 20px; margin-top: 30px;}
.gap {gap: 192px;}
.gap2 {gap: 300px;}
#cv , #telefono2 {width: 200%;}
.contenedor2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  margin-bottom: 20px;
  background-color: rgb(255, 255, 255);
  margin-right: 200px;
}
.contenedor3 {
  margin-bottom: 20px;
  background-color: rgb(255, 255, 255);
  margin-right: 30%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 80px;
}


/* Footer */
footer {
  background: #4e4d4d;
  color: #fff;
  text-align: center;
  justify-content: center;
  align-items: center;
  
}
.footer {padding: 10px; text-align: center;}
.footer img {transform: scale(0.9); padding-right: 43px;}

.contenedor-botones{
  position: fixed;
  bottom: 57px;
  right: 10px;
  height: 45px;
  width: 35px;
  z-index: 1000;          
  background-color: #8dc580; 
  padding: 5px;
  border-top-left-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.contenedor-botones.visible { opacity: 1; pointer-events: auto;}

/*conten.boton wpp*/
.contenedor-botones2{
  position: fixed;
  bottom: 10px;
  right: 10px;
  height: 45px;
  width: 35px;
  z-index: 1000;          
  background-color: #8dc580; 
  padding: 5px;
  border-bottom-left-radius: 10px;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.btn-whatsapp {
  position: fixed;        
  bottom: 12px;              
  right: 12px;               
  z-index: 1000;                     
  padding: 5px;              
  transition: transform 0.3s ease;
}

.btn-up {
  position: fixed;        
  bottom: 60px;              
  right: 12px;               
  z-index: 1000;                     
  padding: 5px;              
  transition: transform 0.3s ease;
}
.btn-up img { width: 20px; height: 20px; }
.btn-up:hover {transform: scale(1.1);}
.btn-whatsapp img {width: 20px; height: 20px;}
.btn-whatsapp img:hover { transform: scale(1.1);}
#postulate {background-color: #4aac33; color: white; text-decoration: none; padding: 5px; border-radius: 10px;display: inline-block; max-width: fit-content;}
#postulate:hover {background-color: #555;}
.navbar a {font-size: 16px;}
.navbar a.active { font-size: 16px; color: #010101;}
.esconder {background-color: #e9e9e9; padding-left: 60px; padding-top: 40px; padding-bottom: 80px; border-bottom-left-radius: 20px; border-top-left-radius: 20px;}
.esconder p {font-size: 15px;}
#subibaja {border-radius: 40px;}

/* ---------------- NAVBAR GRID ---------------- */
.up-navbar {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: center;
  background-color: #fff;
  padding: 35px 50px;
  margin: 0 auto;
}
.up-navbar .logo img {width: 140px; height: auto; padding-top: 35px;}
.navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}
.navbar a {text-decoration: none; color: rgb(175, 175, 175); transition: color 0.3s;}
.navbar a.active,.navbar a:hover { color: #010101;}
.contact-icons {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding-top: 35px;
}
.contact-icons i {color: #4aac33; font-size: 18px;}
/* ---------------- FOOTER GRID ---------------- */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 200px; /* Info | Logo */
  align-items: center;
  background: #4e4d4d;
  color: white;
  padding: 20px 40px;
}

.footer-info p {font-size: 12px; margin: 3px 0;text-align: left;}
.footer-logo {display: flex; justify-content: flex-end;}
.footer-logo img {width: 140px; height: auto; margin-bottom: 60px;}

/* ---------------- MENÚ HAMBURGUESA ---------------- */
.menu-toggle {
  display: none;
  background: none !important;
  box-shadow: none !important;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: #333;
  justify-self: center;
  z-index: 1001;
  transition: transform 0.3s ease;
}
.menu-toggle.open i::before {content: "\f00d";}

/* Quitar cualquier efecto de toque en móviles */
.menu-toggle, .menu-toggle i, .navbar a, .navbar a * {
  -webkit-tap-highlight-color: transparent !important; ; 
  -webkit-touch-callout: none; 
  outline: none; 
  user-select: none; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  background: none !important;
}

.menu-toggle:active,.menu-toggle:focus,.navbar a:active,.navbar a:focus {
  background: none !important;
  color: inherit !important; 
  box-shadow: none !important;
  outline: none !important;
}

.up-navbar nav {margin-left: auto;padding-top: 50px;}
#sumate {width: 400px; border-radius: 20px;opacity: 0.5; margin-top: 25px; margin-left: 135px;}
.redire {text-decoration: none; color: white; background-color: gray; border-radius: 20px; padding: 5px 25px;}
.redire:hover {background-color: #4e4d4d;}
#correr {margin-top: 20px;}
#olik {margin-left: 10px; }

/* ==== ESTILO SOLO DEL BOTÓN "ELEGIR ARCHIVO" ==== */
#CV::file-selector-button {
  background-color: #a5a5a5; 
  color: white;
  border: none;
  border-radius: 15px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: "Rubik", sans-serif;
}

#CV::file-selector-button:hover {background-color: #797979;}
#CV::file-selector-button:active {background-color: #7e7e7e;}
.br-mobile {display: none;}
.br-mobile2 {display: block;}
.ocultar2 {display: none;}
.ocult {display: block; font-size: 10px;}
.ocultar3 {display: block;}
#enviaCV {font-family: "Noto Serif", serif;}
.mapa {margin: 0 0 0 30px; width: 100%; height: 350px; box-sizing: border-box; border: 0; border-radius: 20px;}
#mapa {text-decoration: none; color: #8ec581; font-size: 15px;}

/*publicidad footer*/
.footer-line {display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-bottom: 10px; color: #e2e2e2;}
.footer-left { white-space: nowrap; font-family: "Cascadia Mono", sans-serif; font-size: 10px;}
.footer-right { white-space: nowrap; font-family: "Cascadia Mono", sans-serif; font-size: 10px; gap: 5px;}
.linkig {text-decoration: none; color: #8ec580;}
.linkig:hover {color: #35d111;}
.footer-line p, .footer-line span {display: inline-flex; white-space: nowrap;}
.ocult {display: block;}

/*-------------------------media queries-------------------------------*/
@media (max-width: 320px) {
  main {text-align: start;}
  h3 {margin-bottom: 40px;}
  h2 {text-align: left;}
  .up-navbar { padding:0; grid-template-columns: 1fr 1fr 1fr; padding-left: 10px; margin-left: 10px;}
  .menu-toggle {padding-right: 0px; padding-left: 30px;}
  .hr-estilo {margin: 10px 5px;}
  .footer-grid { text-align: center; grid-template-columns: 1fr; flex-direction: column; gap: 35px; padding-left: 20px; padding-bottom: 0;}
  .esconder {padding-left: 20px; margin-right: 0px; padding-right: 10px;}
  .footer-logo img {margin-bottom: 40px;}
  .footer-logo {justify-content: left; margin-bottom: 0;}
  .margo {margin-left: 5px;}
  .gris {padding-left: 15px; padding-right: 15px;border-bottom-left-radius: 20px; border-top-left-radius: 20px;}
  .gris2 {padding-top: 0;}
  .gris3 {padding-left: 20px; padding-right: 20px; border-radius: 20px;}
  .gris3 li {margin-left: 30px;}
  .div-centrado4 {flex-direction: column;}
  .inicio {padding-left: 0; text-align: center;}
  .inicio2 {padding-left: 0; text-align: center;}
  .achic {width: 100%}
  .div-centrado2 h2 {text-align: center;}
  .espacio-arriba {margin-top: 10px;}
  .padding {margin-left: 0; padding: 0; order: 1;}
  #subibaja {width: 280px; height: 280px; border-radius: 20px; margin-bottom: 30px; margin-right: 20px;}
  #telefono , #empresa {width: 100%;}
  #margin-right {width: 100%;}
  .margin2 {margin-left: 20px;}
  #sumate {margin-left: 0; width: 100%;}
  .seccion {margin-top: 30px;}
  .seccion2 {margin-left: 5px;}
  .hr-estilo2 {margin-left: 5px; margin-right: 5px;}
  .div-centrado2 {display: flex;flex-direction: column;margin-left: 20px;margin-right: 20px; gap: 30px;}
  .flexi {order: 2; width: 100%; justify-content: center; align-items: center;}
  .flexi img {width: 100%;height: auto; }
  .contenedor2 {margin: 0;}
  #lab-prop {margin-left: 20px;}
  .span0 {margin-left: 50px; font-size: 25px;}
  .kolo p {font-size: 20px;}
  .kolo {margin-left: 0px; gap: 0; flex-direction: column; margin-top: 20px;}
  .koli { margin-top: 0; border-right: 1px solid rgb(129, 129, 129); margin-left: 0px; padding: 10px 5px; }
  .koli3 { margin-left: 60px;}
  .koli4 {font-size: 20px; text-align: center; border: none;}
  .koli6 {border-right: none; text-align: center;}
  .koli2 {margin-top: 0;}
  .kolo2 {margin-left: 0; flex-direction: column;}
  .agrandar3 {font-size: 20px;}
  .seccion {margin-top: 5px; margin-left: 5px;}
  .div-centrado2 h1 {margin-top: 0;}
  .espacio-abajo2 {margin-bottom: 30px;}
  .br-mobile {display: none;}
  .ocultar2 {display: block;}
  .br-mobile2 {display: none;}
  .contact-icons {justify-content: right; padding-right: 15px;}
  .slide1 img { content: url("../imagenes/carrouselverdecajamobile.jpg"); }
  .slide2 img { content: url("../imagenes/carrouselgrispalabrasmobile.jpg"); }
  .slide3 img { content: url("../imagenes/carrouselverdearbolmobile.jpg"); }
  .slide4 img { content: url("../imagenes/carrouselgrislabmobile.jpg"); }
  .mapa {margin-left: 0;}
  .ocult {display: none;}
  .footer-line {gap: 0; justify-content: flex-start; padding-left: 20px;}
  .footer-right {gap: 5px;}
}

@media (min-width: 321px) and (max-width: 375px) {
  h3 {margin-bottom: 40px;}
  h2 {text-align: left;}
  .gris {border-bottom-left-radius: 20px; border-top-left-radius: 20px;}
  .gris2 {padding-top: 0;}
  .navbar > ul {display: flex; flex-wrap: wrap; flex-direction: column;}
  .up-navbar { padding:0; grid-template-columns: 1fr 1fr 1fr; padding-left: 10px; margin-left: 10px;}
  .hr-estilo {margin: 10px 5px;}
  .hr-estilo2 {margin: 30px 5px 5px;}
  .seccion2 {margin-left: 5px;}
  .div-centrado {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center;}
  .div-centrado .esconder {justify-content: start;}
  .div-centrado2 {display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    max-width: 450px;
    margin: 20px 0px;
    padding: 0 20px;
    text-align: left;}
  .radius {margin-top: 30px; margin: 0; width: 300px; height: 250px; margin-left: 30px;}
  .esconder {padding-left: 30px; padding-right: 20px; border-radius: 20px; margin-right: 0 auto; width: auto;}
  #subibaja {margin-top: 20px; width: 300px; height: 300px; margin-bottom: 30px; border-radius: 20px; margin-left: 0px;}
  .span0 {font-size: 25px;}
  span { margin: 0; padding: 0; line-height: 1;margin-left: 70px;}
  .padding {padding: 0; margin-right: 50px;}
  .contact-icons {justify-content: center; }
  .footer-grid {grid-template-columns: 1fr; gap: 30px; padding-left: 20px; padding-bottom: 0;}
  .footer-logo {justify-content: left; margin-top: 15px;}
  .footer-info p {text-align: left;}
  .footer-logo img {margin-bottom: 40px;}
  .espacio-arriba {margin-top: 15px; }
  .espacio-arriba2 {margin-top: 15px; flex-direction: column; }
  .gris3 {padding-left: 20px; padding-right: 20px; border-radius: 20px;}
  .gris3 li {margin-left: 30px;}
  .margin2 {margin: 0 auto;}
  .margo {margin-top: 10px; margin-left: 12px;}
  #margin-right {width: 100%;}
  .achic {width: 100%;} #sumate {margin-left: 0; width: 100%;}
  .seccion {margin-top: 10px; margin-left: 5px;}
  #telefono , #empresa {width: 100%;}
  .flexi {width: 100%;margin-right: 60px;}
  .div-centrado4 {flex-direction: column;}
  #lab-prop {margin-left: 30px;}
  .contenedor2 {margin: 0;}
  .menu-toggle {padding-right: 0px; padding-left: 80px;}
  .kolo p {font-size: 17px;}
  .kolo {margin-left: 0px; margin-top: 30px;}
  .koli {border-right: 1px solid black; margin-top: 0; padding: 10px 10px 10px 0;}
  .koli3 {padding: 10px 3px; margin-top: 10px;}
  .koli4 {font-size: 20px;}
  .koli2 {margin-top: 0;}
  .kolo2 {margin-left: 0;}
  .div-centrado2 h1 , .verde {font-size: 25px;}
  .agrandar3 {font-size: 25px;}
  .espacio-abajo2 {margin-bottom: 30px;}
  .br-mobile {display: none;}
  .br-mobile2 {display: none;}
  .ocultar2 {display: block;}
  .contact-icons {justify-content: right; padding-right: 15px;}
  .slide1 img { content: url("../imagenes/carrouselverdecajamobile.jpg"); }
  .slide2 img { content: url("../imagenes/carrouselgrispalabrasmobile.jpg"); }
  .slide3 img { content: url("../imagenes/carrouselverdearbolmobile.jpg"); }
  .slide4 img { content: url("../imagenes/carrouselgrislabmobile.jpg"); }
  .mapa {margin-left: 0;}
  .ocult {display: none;}
  .footer-line {gap: 0; justify-content: flex-start; padding-left: 20px;}
  .footer-right {gap: 5px;}
}

@media (min-width: 376px) and (max-width: 455px) {
  h3 {margin-bottom: 40px; text-align: left;}
  h2 {text-align: left;}
  .div-centrado4 {flex-direction: column; gap: 50px; margin-top: 10px;}
  .div-centrado4 img{width: 100%;}
  .gris3 {padding: 50px 20px 40px 20px;border-radius: 20px;}
  .gris3 li {margin-left: 30px;}
  .achic {width: 100%;}
  #telefono , #empresa , #CV {width: 100% !important;} 
  .margin2 {margin-left: 75px;}
  .flexi {margin-right: 160px;}
  .flexi img {width: 180%;}
  .letter {letter-spacing: -1px; font-size: 20px;}
  .padding {padding: 0;}
  .padding h1 {margin-top: 0;}
  .div-centrado2 {display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  max-width: 1200px;
  margin: 50px auto;
  text-align: left;}
  .div-centrado {gap: 50px;}
  .esconder {margin-right: 0px; padding-right: 20px;}
  #sumate {margin-left: 0px; width: 100%; margin-top: 10px;}
  #subibaja {margin: 20px 75px 20px 0px; width: 350px; height: 350px; border-radius: 20px; }
  .gris {border-bottom-left-radius: 20px; border-top-left-radius: 20px;}
  .gris2 {margin-left: 0; padding: 0;margin-bottom: 50px;}
  .contenedor2 {margin: 0; gap: 10px;}
  #lab-prop {margin-left: 10px; margin-bottom: 0;}
  .span0 {margin-left: 40px; font-size: 25px;}
  .up-navbar { grid-template-columns: 1fr 1fr 1fr; padding: 0 0 0 20px;}
  .menu-toggle {padding-right: 0px; padding-left: 120px;}
  .hr-estilo {margin: 10px 5px;}
  .hr-estilo2 {margin: 10px 5px; margin-top: 80px;}
  .seccion {margin-left: 5px; margin-top: 10px;}
  .seccion2 {margin-left: 5px; margin-top: 10px;}
  .div-centrado2 h1 {margin-left: 0;}
  .boton2 {margin-bottom: 20px;}
  .flexing h1 {margin-left: 15px; padding: 0 50px;font-size: 24px;}
  .center {padding: 0 20px;}
  .footer-grid {grid-template-columns: 1fr; gap: 30px; padding-left: 20px; padding-bottom: 0;}
  .footer-logo {justify-content: left;}
  .footer-logo img {margin-bottom: 40px;}
  .kolo p {font-size: 19px;}
  .kolo {margin-left: 10px;}
  .koli {border-right: 1px solid black; margin-top: 0;}
  .koli4 {font-size: 20px;}
  .koli2 {margin-top: 0;}
  .kolo2 {margin-left: 10px;}
  .koli3 {padding: 22px 0 0;}
  .koli6 {padding-left: 0;}
  .br-mobile {display: block;}
  .espacio-arriba p , #span2 {margin-left: 0;}
  .esparrib {margin-top: 0;}
  .radius {transform: scale(0.9); border-radius: 10px;}
  .div-centrado2 h1 , .verde {font-size: 25px;line-height: 1.4;}
  .agrandar3 {font-size: 25px;}
  .margo {margin-left: 5px;}
  .espacio-abajo2 {margin-bottom: 30px;}
  .ocultar2 {display: block;}
  .br-mobile2 {display: none;}
  .contact-icons {justify-content: right; padding-right: 20px;}
  .slide1 img { content: url("../imagenes/carrouselverdecajamobile.jpg"); }
  .slide2 img { content: url("../imagenes/carrouselgrispalabrasmobile.jpg"); }
  .slide3 img { content: url("../imagenes/carrouselverdearbolmobile.jpg"); }
  .slide4 img { content: url("../imagenes/carrouselgrislabmobile.jpg"); }
  .mapa {margin-left: 0;}
  .ocult {display: none;}
  .footer-line {gap: 0; justify-content: flex-start; padding-left: 20px;}
  .footer-right {gap: 5px;}
}

@media (max-width: 600px) {
  .navbar > ul {display: flex; flex-wrap: wrap; flex-direction: row;}
 .row, .div-centrado, .space, .contenedor {flex-direction: column; gap: 0;} 
  main {padding: 15px;}
 .sumate-cards {width: 100%; display: flex; flex-wrap: wrap;}
  .row2 {display: none;}
  .div-centrado {display: flex;justify-content: center; width: 100%; gap: 50px; align-items: center;}
  .color img {width: 120px; margin: 10px;}
  hr {border: 1px solid #e7e6e6;}
  .centro {display: flex; justify-content: center;}
  #postulate {margin: 0 auto;text-align: center;}
  .space {display: flex; flex-direction: column; align-items: center; text-align: center;}
  button {justify-content: center;}
  span { margin: 0; padding: 0; line-height: 1;}
  .div-centrado2 h2 {margin-top: 0;}
  h1 {margin-top: 30px;}
  .espacio-abajo {margin-bottom: 50px;}
  .esconder {margin-top: 0; padding-top: 10px; padding-bottom: 30px; border-radius: 20px; width: 100%;}
  form {padding-left: 0;}
  .gap {gap: 0;}
  .contenedor2 {display: flex; flex-direction: column;}
  #correr {margin-left: 10px;}
  .carousel { border-radius: 0; }
  .slide {height: auto;}
  .slide img {width: 25%; height: auto;}
  .controls label {width: 10px; height: 10px; margin: 0 4px;}
  .texto-mobile p {display: inline;}  
  .texto-mobile p + p::before {content: " ";}
  br.ocultarr { display: none; }
  .footer-right {width: 100%; display: block; margin-top: 4px;}
  .footer-line .ocult { display: none !important;}
}

@media (min-width: 700px) and (max-width: 1024px) {
  .navbar > ul {display: flex; flex-wrap: wrap; flex-direction: column;}
  .menu-toggle {padding-right: 30px; padding-left: 90px;}
  .div-centrado {display: flex; flex-wrap: wrap; gap: 70px;}
  .div-centrado2 {display: flex; flex-wrap: wrap; margin-left: 50px;}
  .radius {margin-top: 30px; transform: scale(1.5);}
  .esconder {padding-left: 60px; padding-right: 60px; margin-left: 50px; border-radius: 20px; margin-right: 50px;}
  span {margin-left: 70px;}
  .span {margin-left: 70px;}
  .ocultar3 {display: none;}
  h1 {margin-top: 30px; }
  span { margin: 0; padding: 0; line-height: 1;}
  #span2 {margin-left: 30px;}
  .padding {padding: 0; padding-top: 0; margin-right: 80px;}
  .kolo2 {margin-left: 40px;}
  .up-navbar { grid-template-columns: 1fr 1fr 0.3fr; padding: 0 0 0 20px;}
  .menu-toggle {padding-right: 0px; padding-left: 120px;}
  .contact-icons {justify-content: flex-end; padding-right: 20px; padding-left: 0; gap: 20px;}
  .footer-grid { text-align: center; gap: 250px;}
  .footer-logo {justify-content: center; margin-top: 15px;}
  .footer-info p {text-align: left;}
  .footer-logo img {margin-bottom: 0px;}
  .kolo {margin-top: 40px; margin-left: 45px;}
  .espacio-arriba {margin-top: 25px; margin-left: 30px;}
  .flexi {margin-left: 50px;display: flex; flex-wrap: nowrap; gap: 150px;}
  .radius {width: 100%;}
  #subibaja {width: 90%; height: 80%; border-radius: 20px; }
  .margin2 {margin-left: 110px; padding-bottom: 0; }
  #margin-right {width: 70%; margin-top: 70px; margin-right: 0;}
  .div-centrado4 {gap: 30px; margin-left: 70px;}
  .gris3 {padding: 30px; border-radius: 20px; border-radius: 20px;}
  .gris3 li {margin-left: 30px;}
  .gris2 {margin-left: 130px;}
  .gris {border-bottom-left-radius: 20px; border-top-left-radius: 20px;}
  .contenedor3 {margin-right: 100px;}
  .achic {width: 100%;}
  .form {margin-top: 50px;}
  .marginado {margin-left:0px; margin-right: 130px;}
  .marginado2 {margin-right: 50px;}
  .marginado3 {margin-right: 80px;}
  #telefono, #empresa {width: 180%;}
  .gap {gap: 100px;}
  .contenedor2 {flex-direction: column; margin-left: 30px;}
  .redire {margin-left: 100px;}
  .carousel { border-radius: 0; }
  .slide {height: auto;}
  .slide img {width: 25%; height: auto;}
  .controls label {width: 10px; height: 10px; margin: 0 4px;}
  .mapa {width: 100%; height: 400px; border: none; margin-right: 30px; margin-left: 30px;}
  .ocult {display: block;}
}

@media (max-width: 1199px) {
  .menu-toggle {display: block; padding-top: 40px;}
  .navbar {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: #fff;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  .navbar ul {flex-direction: column; gap: 15px; padding: 20px 0;}
  .navbar.active {display: block; opacity: 1; transform: translateY(0); text-align: right;}
  .navbar {opacity: 0; transform: translateY(-20px); transition: all 0.3s ease;} 
}
  
/* ============================CENTRADO HORIZONTAL AL HACER ZOOM================================ */
.page-wrapper {
  width: 100%;
  max-width: 1600px;
  transform-origin: top center;
  transition: transform 0.3s ease;
}
html {overflow-x: hidden;}
header, footer, .flexing {
  width: 100vw;              /* ocupar todo el ancho del viewport */
  position: relative;
  left: 50%;                 /* mover al centro absoluto */
  right: 50%;
  margin-left: -50vw;        /* sacar el efecto del centrado de .page-wrapper */
  margin-right: -50vw;
  max-width: 100vw;          /* evitar límites del wrapper */
}

.inner-container {
  max-width: 1600px;   /* mismo límite que .page-wrapper */
  margin: 0 auto;      /* centra el contenido */
  width: 100%;
}

/*  CORRECCIÓN DE CAMPOS EMPRESA Y TELÉFONO  */
#telefono, #empresa {width: 100% !important; flex: 1 1 0; box-sizing: border-box;}

/*  CORRECCIÓN FORMULARIO SUMATE */
.contenedor2 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.form {width: 100%; margin: 0 auto; border-radius: 8px;}
.form .campo {margin-bottom: 15px;}
.form label {display: block; font-weight: 300; font-size: 14px; margin-bottom: 5px;}
.form input, .form textarea {
  width: 117%;
  padding: 0.7rem;
  border: 1px solid #ffffff;
  border-radius: 5px;
  background-color: #e9e9e9;
  box-sizing: border-box;
}
.form input:focus, .form textarea:focus {border: 2px solid #f39c12; outline: none;}

/* === CORRIGE LA FILA TELÉFONO + CV === */
.form .flex.gap2 {display: flex; gap: 40px; flex-wrap: wrap;}
.form .flex.gap2 .campo {flex: 1; min-width: 250px;}
 #CV {width: 136% !important; flex: 1 1 0; box-sizing: border-box;}

#telefono2 {height: 48px; width: 110%;}

/* === BOTÓN === */
.form button {
  background: #8ec581;
  color: #fff;
  border: none;
  padding: 10px 50px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: normal;
  font-family: "Rubik", sans-serif;
  transition: background 0.3s;
}
.form button:hover {background: #4aac33;}

/* === MÓVIL === */
@media (max-width: 768px) {
  .form .flex.gap2 {flex-direction: column;gap: 10px; }
  .form .flex.gap2 .campo {width: 100%;}
  .form {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }
  .form .campo {width: 100% !important;}
  .form input,.form textarea,.form select,.form button {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;
  }

  /* Ajustar el grupo con flexbox (teléfono + CV) */
  .form .flex {flex-direction: column !important; gap: 15px !important;}

  /* Asegura que las clases personalizadas no rompan el ancho */
  .form .agrand,
  .form .achic { width: 100% !important;}
}

/* ==== Corrección de centrado con zoom ==== */
body {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  overflow-x: hidden;
}

.page-wrapper {
  width: 100%;
  max-width: 1600px;            /* mismo ancho máximo que el carrusel */
  transform-origin: top center;
  transition: transform 0.3s ease;
}

.carousel img {display: block; width: 25%;height: auto;}

@media (min-width: 320px) and (max-width: 770px) {
  #CV {width: 100% !important;} 
}