/*
 Theme Name: sonerychild
 Theme URI: (URL de tu tema, opcional)
 Description: Este es un tema hijo del tema padre de underscore
 Author: Juan Pinto
 Author URI: (URL de tu sitio web, opcional)
 Template: sonnenergy
 Version: 1.0
*/

/* Aquí puedes agregar tus estilos CSS personalizados */
/*===================================================================*/
/*=                          = Estilos Nav =                        =*/
/*===================================================================*/

/*= 1. Generales =*/

/*= 2. Animaciones =*/

/*= 3. Formulario =*/

/*= 4. Carrusel =*/

/*= 5. Header =*/

/*= 6. Footer =*/

/*= 7. Home =*/

/*===================================================================*/
/*===================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
  --texto: 'Montserrat', sans-serif;
  --titulo:  'Poppins', sans-serif;
  --logo: 'Roboto', sans-serif; 
  --yell: #fbb900;
  --navy: #00366c;
  --azul: #213a4a;
  --text: #707070;
  --black: #000;
  --white: #fff;
  --grey:#d9d9d9;
  --primary: #fbb900;
	--padding-rp: 0 6%;
	--padding-rp-hd: 0 12%;
	--radius: 5px;
	--sombra: 0 10px 20px rgba(0,0,0,.2);
	--transicion:.4s all ease;
  }
/*--------------------------------------------------------------
>>>Generales:
--------------------------------------------------------------*/
html,
body{
	scroll-behavior: smooth;
	overflow-x: hidden !important; 
	margin: 0;
	padding: 0;
}        
body p {
	color: var(--black);
	font-family: var(--texto-corrido);
	font-weight: 300;
} 

.entry-content {
	margin: 0 auto !important;
	max-width: 100%;
	width: 1170px;
}

.page {
	margin: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family: var(--titulo);
	position: relative;
}

ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
li::marker {
	color: var(--sucess); /* bullet color */
}
strong{
	font-weight: 800;
}

a{text-decoration: none; display: block;} 
a:link {  text-decoration: none !important}
a:hover {  text-decoration: none !important }
a:visited {  text-decoration: none !important}
*{outline:none !important;}*:focus {outline: none !important;}textarea:focus, input:focus{outline: none !important;}    

.entry-footer, .site-info{
	display: none;
}
.title h2{
  font-size: 2rem;
  font-weight: 500;
  line-height: initial;
}
.title h2 strong{
  color: var(--primary); 
}
.ctAccion{
	border-radius: 2px;
	color: var(--white) !important;
  background-color: var(--grey);
	text-align: center;
	max-width: 200px;
	font-size: initial!important;
	padding: 12px;
	box-shadow: var(--sombra);
	font-weight: 600;
	transition: var(--transicion);
	text-shadow: none !important;
  margin: 20px 0;
}
.ctAccion:hover{
	background-color: var(--sucess);
	color: var(--white) !important;
	font-weight: 800;

}

.subTitle h2{
	font-size: 2rem;
	text-transform: uppercase;
	line-height: 2.4rem;
}
.subTitle h2 strong{
	color: var(--primary);
}
.vc_section{
	padding-top: 80px !important;
	padding-bottom: 50px !important;
}
section.vc_section.articulosHome {
	padding-top: 0 !important;
}
.filtroHome h2.widgettitle{
	display: none;
}
/*--------------------------------------------------------------
>>>Animaciones:
--------------------------------------------------------------*/

@keyframes fade-in-move-down {
	0% {
		opacity: 0;
		transform: translateY(-3rem);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/*--------------------------------------------------------------
>>>Formulario:
--------------------------------------------------------------*/

.formContact{
	background: rgb(255,255,255,0.5);
  backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    -ms-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
	box-shadow: 0 20px 40px rgb(0 0 0 / 20%);
	padding: 2rem;
	margin: 4rem 0;
	border-radius: 20px ;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.formContact h3{
	font-size: 1.5rem;
	padding-top: .5rem;
	line-height: initial;
	width: 100%;
	color: var(--grey);
	margin-bottom: 30px;
	text-transform: none;
}
.formContact p{
	width: 100%;
	line-height: initial;
	font-size: 1rem;
	margin-top: 0;
	margin-bottom:5px;
}
.formContact > div{
	width: 48%;
}
.formContact > div.send,
.formContact  > div.message,
.formContact  > div.Terms {
	width: 100%;
}
.formContact input[type="text"], .formContact input[type="email"], .formContact input[type="url"], .formContact input[type="password"], .formContact input[type="search"], .formContact input[type="number"],.formContact input[type="tel"],.formContact textarea, .formContact select{
  width: 100%;
  margin: 0px 0 10px;
  height: 40px;
  background-color: transparent !important;
  padding: 10px !important;
  border: 1px solid var(--grey) !important;
  border-radius: 5px;
}
.formContact input::placeholder{
	color: var(--title);
}
.SusForm .Terms a,
.formContact  > div.Terms span,
.formContact a{
	color: var(--black);
	display: inline;
}
.formContact input[type="submit"]{
	background-color:  var(--primary) !important;
	border-radius: 10px;
	color: var(--white);
	font-weight: 700;
	width: 100%;
	max-width: 240px;
	font-size: 18px;
	text-align: center;
	margin: 10px auto;
	box-shadow: var(--sombra);
	transition: .4s all ease;
	cursor: pointer;
	border: none !important;
	height: 50px;
	float: right;
}
.formContact input[type="submit"]:hover{
	background-color: var(--title) !important;
	color: #fff;
	box-shadow: 0 0 10px var(--text);
}
.formContact label {
	color: var(--black);
	font-weight: 700;
}
.formContact textarea {
	width: 100%;
	height: 100px;
	margin-bottom: 20px;
	background-color: transparent;
}
.SusForm .send,
.SusForm{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.SusForm .mail{
	width: 80%;
}
.SusForm .send{
	width: 20%;
}
.SusForm .send .wpcf7-spinner {
	position: absolute;
}
.imagenBot .wpb_content_element {
	margin-bottom: 0 !important;
}
/*--------------------------------------------------------------
>>>Carrusel:
--------------------------------------------------------------*/  
    .owl-stage {
      display: flex;
  }
.owl-stage-outer {
      overflow: hidden;
      padding:  0;
  }
  .owl-nav {
      display: none;
  }
  .owl-nav button.owl-prev {
      transform: rotate(180deg);
  }
  .owl-nav button{
      background: transparent;
      color: transparent;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      border: none;
      box-shadow: var(--sombra);
      background-size: cover;
      margin: 20px;
  }
  .owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    right: 5%;
    top: calc(50% - 50px);
}
  .owl-dots button  {
      background-color:transparent;
      border: none !important;
      border-radius: 50%;
    }
  .owl-dots button  span{
      background-color: var(--claro);
      border: none !important;
      border-radius: 50%;
      margin: 10px;
      width: 15px !important;
      height: 15px !important;
      padding: initial;
      cursor: pointer;
      opacity: .6;
      box-shadow: 0 0px 10px rgba(0,0,0,.4);
  }
  .owl-dots button.active span{
      background-color: var(--primary) !important;
      width: 18px !important;
      height: 18px !important;
      opacity: 1;
  }
  .bannerSlide .owl-item > .vc_row {
      width: 100% !important;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: top left !important;
      height: 90vh;
      display: flex;
      align-items: center;
      padding: 0 20%;
  }
  .bannerSlide.vc_section {
      padding-top: 0px !important;
      padding-bottom: 0px !important;
  }

/*--------------------------------------------------------------
>>>Header:
--------------------------------------------------------------*/
.top-nav,
#toggle{
	display: none;
}
header#masthead .main-navigation{
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	padding: var(--padding-rp-hd);
	padding-top: 20px;
	padding-bottom: 15px;
}
header#masthead {
	transition: .4s all ease;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}
header#masthead .logo {
  width: 250px;
  max-width: 80%;
  margin-left: -80px;
}
header#masthead.fade-in .logo .color,
header#masthead .logo .blnk {
  display: none;
}
header#masthead .logo .color {
  display: block;
}
header#masthead.fade-in .logo .blnk {
  display: block;
}
header#masthead.fade-in {
	animation: fade-in-move-down 0.7s;
	background: none; /*var(--primary);*/
	box-shadow: 0 10px 20px rgb(0 0 0 / 20%);
}
header#masthead ul#primary-menu {
	width: 700px;
	justify-content: space-between;
	max-width: 100%;
}
header#masthead ul#primary-menu a {
	color: var(--black);
	font-weight: 600;
	transition: .4s all ease-in-out;
	position: relative;
	padding-bottom: 5px;
}
header#masthead ul#primary-menu li {
	transition: .4s all ease;
	min-width: 70px;
	transition: .4s all ease-in-out;
}
header#masthead ul#primary-menu li.current-menu-item a {
	font-weight:700;
	color: var(--white);
	position: relative;
}
header#masthead ul#primary-menu li.current-menu-item a::after {
	content: "";
	height: 2px;
	width: 30px;
	background-color: var(--primary);
	position: absolute;
	bottom: 0;
	left: 0;
}
header#masthead.fade-in ul#primary-menu li.current-menu-item a::after {
	background-color: var(--primary);
}
header#masthead ul#primary-menu li:hover a {
	font-weight:700;
	color: var(--white);
}
/*--------------------------------------------------------------
>>>Footer:
--------------------------------------------------------------*/
/* Estilos del Footer */
#colophon .contenedor-footer {
    display: flex;
    justify-content: space-around;
    max-width: 1920px;
    background-color: #003366; /* Color de fondo azul oscuro */
    color: white; /* Color de texto blanco */
    padding: 20px 0; /* Espaciado interno superior e inferior */
    font-family: var(--titulo); /* Fuente genérica */
}


#colophon .footer-column {
    width: 30%;
    padding: 0 10px;
}

#colophon .footer-logo {
    max-width: 150px;
    margin-bottom: 10px;
}

#colophon .footer-column h2 {
    font-size: 2em;
    margin-bottom: 10px;
}

#colophon .footer-column p {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
	font-size: 1em;
	font-weight: 300;
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	color: var(--white); /* Color negro*/
	
}
#colophon .resaltado-footer {
	font-weight: 800;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color: var(--yell); /* Color negro*/
  }
  #colophon .resaltado1-footer {
	font-weight: 600;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color:var(--white); /* Color navy */
  }

#colophon .footer-column p img {
    max-height: 30px;
    margin-right: 30px;
}


#colophon .footer-column ul {
    list-style: none;
    padding: 0;
  margin: 0; /* Elimina el margen predeterminado de la lista */
}

#colophon.footer-column li {
  margin-left: 0; /* Asegura que no haya margen izquierdo en los elementos de la lista */
}

#colophon .footer-column ul li {
    margin-bottom: 10px;
}

#colophon .footer-column ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
}

#colophon .CTA-boton{
	width:50%;
	background-color: var(--yell);
	color:var(--white);
	border: none;
	border-radius: 32px;
	margin-left:5%;
	padding: 10px 20px;
	font-family: var(--titulo);
	font-weight: bold;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
	text-align: center;
	
}
  
#colophon .CTA-boton:hover {
background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
transform: scale(1.05); /* Efecto de crecimiento */
}
/*--------------------------------------------------------------
>>>HOME:
--------------------------------------------------------------*/
/* Hero section ///////////////////////////////////////////////////////////////////////////////*/
#inicio-principal {
	height: 100vh;
	width: 100%;
	background-image:linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(33, 58, 74, 0.17) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Panel-solar.jpg');
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	color: var(--white);
	overflow: hidden;
	z-index: 1;
  }
  
  #inicio-principal #video-fondo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -10;
  }

  #inicio-principal #overlay-gradiente {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(33, 58, 74, 0.17) 100%);
	z-index: -9; /* Asegura que esté encima del video */
  }

  #inicio-principal h1 {
  font-family: var(--texto); /* Cambia la fuente del texto */
  font-weight: bold;
  font-size: 52px; /* Ajusta el tamaño de la fuente */
  line-height: 1.5; /* Define el espacio entre líneas */
  color:var(--white); /* Establece el color del texto */
  padding-left: 5%;
  padding-top: 10%;
  z-index: 1; /* Asegura que esté encima del video */

  }

 #inicio-principal .typing-effect #cursor-inicio {
	font-size: 52px; /* Ajusta el tamaño del texto */
	white-space: nowrap; /* Evita que el texto salte de línea */
	overflow: hidden; /* Oculta el texto que se desborda */
  }
  
  #inicio-principal #cursor-inicio {
	display: inline-block;
	width: 5px;
	height: 1em; /* Ajusta la altura aquí */
	background-color: var(--yell);
	margin-left: 5px;
	animation: cursor-parpadeo-amarillo 1s infinite;
  }
  
  @keyframes cursor-parpadeo-amarillo {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
  }


  #inicio-principal .CTA-boton{
	    width:40%;
		background-color: var(--yell);
		color:var(--white);
		border: none;
		border-radius: 32px;
		margin-left:5%;
		padding: 10px 20px;
		font-family: var(--titulo);
		font-weight: bold;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
		cursor: pointer; /* Para que el cursor cambie al pasar por encima */
		text-align: center;
		
    }
	  
 #inicio-principal .CTA-boton:hover {
	background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
	}
	
#whatsapp .wtsapp {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 100;
    width: 60px; /* Aumentamos el tamaño para mejor visibilidad */
    height: 60px;
    border-radius: 50%;
    background-color: #1ca811; /* Color verde de WhatsApp */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Sombra sutil */
    transition: transform 0.3s ease; /* Transición suave */
}

#whatsapp .wtsapp:hover {
    transform: scale(1.1); /* Ligero aumento al pasar el ratón */
}

#whatsapp .wtsapp img {
    width: 55px; /* Ajuste del tamaño del icono */
    height:55px;
}

#whatsapp .wtsapp::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(28, 168, 17, 0.3); /* Verde de WhatsApp con transparencia */
    animation: pulse 2s infinite ease-in-out; /* Animación pulsante */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

  /* Hero section //////////////////////////////////////////////////////////////////////////////*/

  /* Soluciones section ////////////////////////////////////////////////////////////////////////*/
  .fila1-soluciones {
	display: flex;
    justify-content: space-around;
    gap: 20px;
   }
   #inicio-soluciones .texto-soluciones h2 {
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 40px; /* Ajusta el tamaño de la fuente */
	color:var(--navy); /* Establece el color del texto */
	text-align: left; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
  #inicio-soluciones .logo-soluciones h2 {
	font-size: 40px; /* Ajusta el tamaño de la fuente */
	text-align: right; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
  #inicio-soluciones .resaltado {
	font-weight: 800;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color: var(--yell); /* Color negro*/
  }
  #inicio-soluciones .resaltado1 {
	font-weight: 600;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color:var(--navy); /* Color navy */
  }
 
  .fila2-soluciones {
	display: flex;
	justify-content: space-between; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */

  }
  
   #inicio-soluciones .columna-residencial  {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(33, 58, 74, 0.17) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Residenciales.webp');
	border: none;
	border-radius: 32px;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
    justify-content:flex-start; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */

  }
  #inicio-soluciones .columna-residencial:hover {
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Residenciales.webp'); /* Color de fondo al pasar el cursor */
  }

  #inicio-soluciones .columna-residencial a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */

}

  #inicio-soluciones .titulo-residencial h3 {
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 28px; /* Ajusta el tamaño de la fuente */
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
  }



  .columna-comercial {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(33, 58, 74, 0.17) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Comerciales.webp');
	border: none;
	border-radius: 32px;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-start; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
  }
  .columna-comercial:hover {
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Comerciales.webp'); /* Color de fondo al pasar el cursor */
  }

  #inicio-soluciones .columna-comercial a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}
  #inicio-soluciones .titulo-comercial h3 {
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 28px; /* Ajusta el tamaño de la fuente */
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
  }

  .columna-aislados {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(33, 58, 74, 0.17) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Aislados.webp');
	border: none;
	border-radius: 32px;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-start; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
  }
  .columna-aislados:hover {
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Aislados.webp'); /* Color de fondo al pasar el cursor */
  }
  #inicio-soluciones .columna-aislados a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}
  #inicio-soluciones .titulo-aislados h3 {
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 28px; /* Ajusta el tamaño de la fuente */
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
  }
  .columna-mantenimiento {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(33, 58, 74, 0.17) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Mantenimiento.webp');
	border: none;
	border-radius: 32px;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-start; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
  }
  .columna-mantenimiento:hover {
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Mantenimiento.webp'); /* Color de fondo al pasar el cursor */
  }
  #inicio-soluciones .columna-mantenimiento a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}

  #inicio-soluciones .titulo-mantenimiento h3 {
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 28px; /* Ajusta el tamaño de la fuente */
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
  }






  /* Soluciones section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* Beneficios section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
  #inicio-beneficios {
    height: 120vh;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Residencial-paneles-solares.webp');
    background-size: cover;
	background-position: center;
    color: var(--white);
    margin-bottom: 50px !important;
	position: relative;
	overflow: hidden;
	scroll-snap-type: y mandatory;
    scroll-padding: 120vh 0; /* Ajusta el valor según la altura de la sección */


}
#inicio-beneficios .fila-beneficios-economicos {
	width: 100%;
	height:100%;
	overflow: visible;
}
#inicio-beneficios .columna-beneficios-economicos {

	height:100%;
}
#inicio-beneficios .columna-rueda {

	height:100%;
	overflow: visible;

}

#inicio-beneficios .beneficio-1,
#inicio-beneficios .beneficio-2,
#inicio-beneficios .beneficio-3,
#inicio-beneficios .beneficio-4,
#inicio-beneficios .beneficio-5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 10;
  display: none; 
}


#inicio-beneficios .beneficio-1 h2,.beneficio-2 h2,.beneficio-3 h2,.beneficio-4 h2,.beneficio-5  h2 {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 100%;
	font-family: var(--texto);
    font-weight: bold;
    font-size: 40px;
    line-height: 1.5;
    color: var(--white);
	margin-left: 5%;

}

#inicio-beneficios .beneficio-1 p,.beneficio-2 p,.beneficio-3 p,.beneficio-4 p,.beneficio-5   p {
	position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    height: 100%;
	font-family: var(--texto);
    font-weight: normal;
    font-size: 24px;
    line-height: 1.5;	
	color: var(--white);
	margin-left: 5%;
}

#inicio-beneficios .beneficio-1.activo {
    display: block;
}
#inicio-beneficios .beneficio-2.activo {
    display: block;
}
#inicio-beneficios .beneficio-3.activo {
    display: block;
}
#inicio-beneficios .beneficio-4.activo {
    display: block;
}
#inicio-beneficios .beneficio-5.activo {
    display: block;
}

#inicio-beneficios .rueda-container {
    position: absolute;
    top: 50%;
    right: -35vw; /* Ajusta la posición para que salga de la sección */
    width: 70vw; /* Ajusta el tamaño */
    height: 70vw; /* Ajusta el tamaño */
    transform: translateY(-50%);
}


#inicio-beneficios .CTA-boton{
	position: absolute;
    bottom: 20%;
    left: 0;
	width:40%;
	background-color: var(--yell);
	color:var(--white);
	border: none;
	border-radius: 32px;
	padding: 10px 20px;
	font-family: var(--titulo);
	font-weight: bold;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
	text-align: center;
	margin-left: 5%;
	z-index: 11; /* Asegura que el botón esté encima de los beneficios */
}
  
#inicio-beneficios .CTA-boton:hover {
	background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
}




  /* Beneficios section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
  


  /* Proceeso section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
     #inicio-proceso .tituloprincipal-proceso h2 {
	text-align: center; /* Opcional: Centra el texto dentro del bloque */
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 40px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #inicio-proceso {
	height: 100vh; /* Puedes ajustar esto según necesites */
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.17) 0%, rgba(33, 58, 74, 0.17) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/carretera_solar_optimizada.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch; 
}

.fila-inicio-proceso {
    display: flex;
    justify-content: stretch; /* Estira las columnas para ocupar el ancho */
    gap: 20px;
    width: 100%; /* Asegura que la fila ocupe todo el ancho de la sección */
}

.columna1-inicio-proceso,
.columna2-inicio-proceso,
.columna3-inicio-proceso,
.columna4-inicio-proceso,
.columna5-inicio-proceso {
    height: 45vh; /* Puedes ajustar esto según necesites */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1; /* Permite que las columnas crezcan para ocupar el espacio */
}

.columna1-inicio-proceso {
    background: linear-gradient(to right, rgba(35, 196, 35, 0.7) 0%, rgba(35, 196, 35, 0.7) 100%);
    border: solid 4px var(--white);
    border-radius: 16px;
}

.columna2-inicio-proceso {
    background: linear-gradient(to right, rgba(217, 217, 217, 0.7) 0%, rgba(217, 217, 217, 0.7) 100%);
	border: solid 4px var(--white);
    border-radius: 16px;

}

.columna3-inicio-proceso {
    background: linear-gradient(to right, rgba(251, 185, 0, 0.7) 0%, rgba(251, 185, 0, 0.7) 100%);
	border: solid 4px var(--white);
    border-radius: 16px;
    align-items: flex-start;
}

.columna4-inicio-proceso {
    background: linear-gradient(to right, rgba(33, 58, 74, 0.7) 0%, rgba(33, 58, 74, 0.7) 100%);
	border: solid 4px var(--white);
    border-radius: 16px;
    align-items: flex-start;
}

.columna5-inicio-proceso {
    background: linear-gradient(to right, rgba(0, 54, 108, 0.7) 0%, rgba(0, 54, 108, 0.7) 100%);
	border: solid 4px var(--white);
    border-radius: 16px;
    align-items: flex-start;
}

#inicio-proceso h2 {
    font-family: var(--titulo);
    font-weight: normal;
    font-size: 48px;
    color: var(--black);
    margin-top: 5px;
    text-align: end; /* Centra el texto horizontalmente */
    vertical-align: center; /* Alinea el texto en la parte superior */
}

#inicio-proceso h3 {
    font-family: var(--titulo);
    font-weight: bold;
    font-size: 36px;
    color: var(--black);
    margin-bottom: 0px;
    text-align: center; /* Centra el texto horizontalmente */
    vertical-align: center; /* Alinea el texto en la parte superior */
}

#inicio-proceso p {
    font-family: var(--titulo);
    font-weight: normal;
	line-height: 1;
    font-size: 20px;
    color: var(--black);
    margin-bottom: 5px;
    text-align: center; /* Centra el texto horizontalmente */
    vertical-align: top; /* Alinea el texto en la parte superior */

}

#inicio-proceso .filaCTA-inicio-proceso {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

#inicio-proceso .columnaCTA-inicio-proceso {
	display: flex; /* Habilita Flexbox */
	justify-content: center; /* Centra horizontalmente */
}

#inicio-proceso .CTA-boton {
    width: 20%; /* Ancho fijo del botón (ajusta según necesites) */
    background-color: var(--yell);
    color: var(--white);
    border: none;
    border-radius: 32px;
    padding: 10px 20px;
    font-family: var(--titulo);
    font-weight: bold;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    text-align: center;
    margin-left:40%;
}

#inicio-proceso .CTA-boton:hover {
	background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
}



  
  /* Proceeso section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
  
  /* Cifras section ///////////////////////////////////////////////////////////////////////////////////////////////////*/



  .fila-cifras {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
   }

   .columna-cifra1, .columna-cifra2, .columna-cifra3, .columna-cifra4 {
	height: 80vh; /* Ajusta la altura */
	border-radius: 32px;
	box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5)
  }
  .columna-cifra3, .columna-cifra4  {
	background-image: url('https://sonnenergy.com.co/wp-content/uploads/2025/02/icono-flecha-2.png');
	background-size: 100px 100px; /* Width 300px, Height 200px */
	background-repeat: no-repeat; /* Prevent image from tiling */
    background-position: top right;
  }
   #inicio-cifras h2 {
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 72px; /* Ajusta el tamaño de la fuente */
	line-height: 1;
	color: var(--navy);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */

  }
   #inicio-cifras p {
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: light;
	font-size: 30px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */

  }
  /* .texto-cifra1,.texto-cifra2,.texto-cifra3,.texto-cifra4 */

  /* Cifras section ///////////////////////////////////////////////////////////////////////////////////////////////////*/


  /* Noticias section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
  .filaprincipal1-noticias {
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }
   #inicio-noticias .tituloprincipal-noticias h2 {
	text-align: center; /* Opcional: Centra el texto dentro del bloque */
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 40px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
  }

  #inicio-noticias .resaltado {
	font-weight: 800;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color: var(--yell); /* Color negro*/
  }
  #inicio-noticias .resaltado1 {
	font-weight: 600;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color:var(--white); /* Color navy */
  }
  #inicio-noticias  .filaprincipal2-noticias {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
	margin-bottom: 50px;
   }
   #inicio-noticias .columna-noticia1 {
	height:80vh;
    border-radius: 32px;
	box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5);
    position: relative; /* Necesario para posicionar el pseudoelemento */
    overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
  }
  
  #inicio-noticias .columna-noticia1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image:linear-gradient(to bottom, rgba(33, 58, 74, 1) 0%, rgba(33, 58, 74, 1) 20%, transparent 100%),url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Beneficios-tributarios.webp');
    background-size: 100% 50%;
    background-size: cover; /* Cubre todo el 50% superior */
    background-repeat: no-repeat;
    background-position: center center; /* Centra la imagen horizontalmente en la parte superior */
    object-fit: cover; /* Ajusta la imagen sin comprimirse */
  }
  #inicio-noticias .columna-noticia2 {
	height:80vh;
    border-radius: 32px;
	box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5);
    position: relative; /* Necesario para posicionar el pseudoelemento */
    overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
  }
  
  #inicio-noticias .columna-noticia2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image:linear-gradient(to bottom, rgba(33, 58, 74, 1) 0%, rgba(33, 58, 74, 1) 20%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/03/comunidad-energetica-colombia.webp');
    background-size: 100% 50%;
    background-size: cover; /* Cubre todo el 50% superior */
    background-repeat: no-repeat;
    background-position: center center; /* Centra la imagen horizontalmente en la parte superior */
    object-fit: cover; /* Ajusta la imagen sin comprimirse */
  }
  #inicio-noticias .columna-noticia3 {
	height:80vh;
    border-radius: 32px;
	box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5);
    position: relative; /* Necesario para posicionar el pseudoelemento */
    overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
  }
  
  #inicio-noticias .columna-noticia3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image:linear-gradient(to bottom, rgba(33, 58, 74, 1) 0%, rgba(33, 58, 74, 1) 20%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/03/conectado_optimizado-1.webp');
    background-size: 100% 50%;
    background-size: cover; /* Cubre todo el 50% superior */
    background-repeat: no-repeat;
    background-position: center center; /* Centra la imagen horizontalmente en la parte superior */
    object-fit: cover; /* Ajusta la imagen sin comprimirse */
  }


 .fila1-noticia1,.fila1-noticia2,.fila1-noticia3 {
	height: 5vh; /* Ajusta la altura */
  }
  .fila2-noticia1,.fila2-noticia2,.fila2-noticia3 {
	height: 35vh; /* Ajusta la altura */
  }
  .fila3-noticia1,.fila3-noticia2,.fila3-noticia3 {
	height: 40vh; /* Ajusta la altura */
  }

  #inicio-noticias .et1-noticia1 h3, #inicio-noticias .et2-noticia1 h3, #inicio-noticias .et3-noticia1 h3, #inicio-noticias .et1-noticia2 h3, #inicio-noticias .et2-noticia2 h3, #inicio-noticias .et3-noticia2 h3, #inicio-noticias .et1-noticia3 h3, #inicio-noticias .et2-noticia3 h3, #inicio-noticias .et3-noticia3 h3 {
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: lighter;
	font-size: 10px; /* Ajusta el tamaño de la fuente */
	border:solid;
	border-width:2px;
	border-radius: 16px; 
	padding: 5% 5%;
	color: var(--white);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: bottom; /* Alinea el texto en la parte superior */
	margin-top:20px;

  }

  #inicio-noticias .clasearticulo-noticia1 h3,.logo-noticia1 h3,.clasearticulo-noticia2 h3,.logo-noticia2 h3,.clasearticulo-noticia3 h3,.logo-noticia3 h3{
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 24px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: bottom; /* Alinea el texto en la parte superior */
	/* margin-top:50px; */

  }
  #inicio-noticias .titulo-noticia1 h3,.titulo-noticia2 h3,.titulo-noticia3 h3 {
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 24px; /* Ajusta el tamaño de la fuente */
	color: var(--black);
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
	/* margin-top:50px; */

  }
  #inicio-noticias p {
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color: var(--black);
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
	margin-bottom: 50px;
	/* margin-top:50px; */

  }


  #inicio-noticias .ver-mas {
	position: absolute; /* Permite posicionamiento absoluto */
    bottom: 0; /* Lo coloca en la parte inferior */
    right: 0; /* Lo coloca a la derecha */
    width: 20%; /* Ancho fijo del botón (ajusta según necesites) */
    color: var(--azul);
    border: none;
    font-family: var(--titulo);
    font-weight: normal;
    cursor: pointer;
    text-align: center;
}

#inicio-noticias .ver-mas:hover {
	color: #800080;

}

#inicio-noticias .filaprincipal3-noticias {
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }
   #inicio-noticias .CTA-noticias-inicio{
	width:50%;
	background-color: var(--azul);
	color:var(--white);
	border: none;
	border-radius: 32px;
	padding: 10px 20px;
	font-family: var(--titulo);
	font-weight: bold;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
	text-align: center;
	margin-left: 20%;
}
  
#inicio-noticias .CTA-noticias-inicio:hover {
	background-color: var(--navy); /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
}
  
  /* Noticias section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* CTA section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  #inicio-llamada .llamada {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0.4) 50%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/cosecha-energia-solar.webp');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
	cursor: pointer; /* Cambia el cursor al pasar por encima */
	transition: background-image 0.3s ease; /* Transición suave del color de fondo */
  }
  #inicio-llamada .llamada:hover {
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/cosecha-energia-solar.webp'); /* Color de fondo al pasar el cursor */
  }

  .fila-llamada {
	width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }



  #inicio-llamada .fila-llamada a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}

#inicio-llamada  h3 {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: lighter;
	font-size: 64px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }




/* CTA section ///////////////////////////////////////////////////////////////////////////////////////////////////*/


  /* Mapa-section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  #inicio-mapa  {
	height: 100vh; /* Ajusta la altura */

  }
  
  #inicio-mapa .columna-texto-mapa {
 display: flex;
  align-items: center; /* Alinea los elementos hijos verticalmente al centro */
  }
      
  
  
  #inicio-mapa  h2 {
	font-size: 36px; /* Ajusta el tamaño de la fuente */
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
  


  
    #inicio-mapa .resaltado {
	font-weight: 800;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color: var(--yell); /* Color negro*/
  }
  #inicio-mapa .resaltado1 {
	font-weight: 600;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color:var(--navy); /* Color navy */
  }
  
    #inicio-noticias h2:hover {
	color: #800080;

}

#inicio-mapa  h3 {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 600;
	font-size: 24px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }




/* Mapa-section ///////////////////////////////////////////////////////////////////////////////////////////////////*/












  /*--------------------------------------------------------------
>>>RESIDENCIALES:
--------------------------------------------------------------*/
  /* residencial-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
  #residencial-principal {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to right, rgba(251, 185, 0, 0.2) 0%, rgba(149, 110, 0, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Casa-residencial-paneles-solares.webp');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }

  .fila-residencial-principal {
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }
   #residencial-principal h1{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 52px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #residencial-principal h2{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 52px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  /* residencial-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* residencial-banner section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  .fila1-residencial-banner {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
   }
  .imagenes-residencial-banner {
	height: 80vh; /* Ajusta la altura */
	background-image: url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Residencial-solar.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }
  #residencial-banner .edificios-residencial-banner img {
	object-fit: cover; /* o object-fit: cover; */
	width: 50%; /* Ancho deseado */
	height: 32vh; /* Alto automático para mantener la relación de aspecto */
	position: absolute;
    bottom: -20px;
    right: -20px;
    border: 20px solid white;
	border-radius: 32px 0 0 0px;
    box-sizing: border-box;
    z-index: 10; 


  }


  .columnatextos-residencial-banner {
	height: 80vh; /* Ajusta la altura */
	background-color:var(--yell);
	background-size: cover;
	background-position: center;
	color: var(--white); /* Color de texto general */
	border-radius: 32px 32px 0 0;
	
  }



  #residencial-banner .fila-a-residencial-banner h2{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 36px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #residencial-banner .fila-a-residencial-banner h3{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 24px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #residencial-banner .resaltado {
	color: var(--black); /* Color negro*/
  }
  #residencial-banner .resaltado1 {
	color:var(--navy); /* Color navy */
  }


  .fila-b-residencial-banner {
	height: 32vh;
	display: flex;
	color: var(--white); /* Color de texto general */
	position: absolute;
    bottom: -20px;
    border-top: 20px solid white;
    box-sizing: border-box;
    z-index: 10; 
  }

  #residencial-banner .fila-b-residencial-banner h3{
	padding-top: 2%;
	padding-left: 2%;
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
 }
 #residencial-banner .CTA-boton{
	width:50%;
	background-color: var(--azul);
	color:var(--white);
	border: none;
	border-radius: 32px;
	padding: 10px 20px;
	font-family: var(--titulo);
	font-weight: bold;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
	text-align: center;
	margin-left: 20%;
}
  
#residencial-banner .CTA-boton:hover {
	background-color: var(--navy); /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
}
  /* residencial-banner section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* residencial-conectado section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
  .fila1-residencial-conectado {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
   }

  #residencial-conectado .columna1-residencial-conectado {
	height: 80vh;
	color: var(--black);
	display: flex;
	flex-direction: column;
  }
  
  #residencial-conectado .filaitem1-residencial-conectado {
	height: 16vh;
    flex: 1; /* Esta línea es crucial para la distribución equitativa */
	display: flex;
	align-items: end;
 }
 #residencial-conectado .filaitem1-residencial-conectado:hover {
	box-shadow: 0px 4px 5px 4px rgba(217, 217, 217, 0.5);
	border-radius: 32px;

 }

 #residencial-conectado .ic1-residencial-conectado img,.ic2-residencial-conectado img,.ic3-residencial-conectado img,.ic4-residencial-conectado img {
	box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
	border-radius: 32px;
}

#residencial-conectado .titulo-residencial-conectado h2{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
  }
  #residencial-conectado .textoitems-residencial-conectado h3{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 600;
	font-size: 22px; /* Ajusta el tamaño de la fuente */
	color: var(--black);
  }




  #residencial-conectado .columna2-residencial-conectado {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Casa-de-lujo-fotovoltaica.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
    position: relative;
	color: var(--white); /* Color de texto general */
  }

  #residencial-conectado .imagen-residencial-conectado img {
	object-fit: cover; /* o object-fit: cover; */
	width: 35%; /* Ancho deseado */
	height: 35%; /* Alto automático para mantener la relación de aspecto */
	position: absolute;
    bottom: 0px;
    left: 0px;
    border: 20px solid white;
	border-radius: 32px;
    box-sizing: border-box;
    z-index: 10; 
  }

  #residencial-conectado .textoimagen-residencial-conectado h3  {
	font-family: var(--logo); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	text-align: center; /* Centra el texto horizontalmente */


  }

  .fila-etiquetas-residencial-conectado {
	position: absolute; /* Posicionamiento absoluto respecto a la columna */
	bottom: 0; /* Se pega a la parte inferior */
	right: 0; /* Se pega a la parte derecha */
	width: 50%; /* Ajusta el ancho según tus necesidades */
	padding: 10px; 
   }

  #residencial-conectado .et1-residencial-conectado h3,.et2-residencial-conectado h3  {
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 10px; /* Ajusta el tamaño de la fuente */
	border:solid;
	border-width:2px;
	border-radius: 16px; 
	color: var(--white);
	text-align: center;


 }

  /* residencial-conectado section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* residencial-hibrido section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  .fila1-residencial-hibrido {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
   }

  #residencial-hibrido .columna1-residencial-hibrido {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Hibrido-residencial.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
    position: relative;
	color: var(--white); /* Color de texto general */
  }

  #residencial-hibrido .imagen-residencial-hibrido img {
	object-fit: cover; /* o object-fit: cover; */
	width: 35%; /* Ancho deseado */
	height: 35%; /* Alto automático para mantener la relación de aspecto */
	position: absolute;
    bottom: 0px;
    right: 0px;
    border: 20px solid white;
	border-radius: 32px;
    box-sizing: border-box;
    z-index: 10; 
  }

  #residencial-hibrido .textoimagen-residencial-hibrido h3  {
	font-family: var(--logo); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	text-align: center; /* Centra el texto horizontalmente */


  }

  .fila-etiquetas-residencial-hibrido {
	position: absolute; /* Posicionamiento absoluto respecto a la columna */
	bottom: 0; /* Se pega a la parte inferior */
	left: 0; /* Se pega a la parte derecha */
	width: 25%; /* Ajusta el ancho según tus necesidades */
	padding: 10px; 
   }

  #residencial-hibrido .et1-residencial-hibrido h3,.et2-residencial-hibrido h3  {
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 10px; /* Ajusta el tamaño de la fuente */
	border:solid;
	border-width:2px;
	border-radius: 16px; 
	color: var(--white);
	text-align: center;


 }







 #residencial-hibrido .columna2-residencial-hibrido {
	height: 80vh;
	color: var(--black);
	display: flex;
	flex-direction: column;
  }
  
  #residencial-hibrido .filaitem1-residencial-hibrido {
	height: 16vh;
    flex: 1; /* Esta línea es crucial para la distribución equitativa */
	display: flex;
	align-items: end;
 }
 #residencial-hibrido .filaitem1-residencial-hibrido:hover {
	box-shadow: 0px 4px 5px 4px rgba(217, 217, 217, 0.5);
	border-radius: 32px;

 }

 #residencial-hibrido .ic1-residencial-hibrido img,.ic2-residencial-hibrido img,.ic3-residencial-hibrido img,.ic4-residencial-hibrido img {
	box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
	border-radius: 32px;
}



#residencial-hibrido .titulo-residencial-hibrido h2{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
  }
  #residencial-hibrido .textoitems-residencial-hibrido h3{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 600;
	font-size: 22px; /* Ajusta el tamaño de la fuente */
	color: var(--black);
  }

  /* residencial-hibrido section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

    /* residencial-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/


  #residencial-llamada  {
	height: 80vh; /* Ajusta la altura */
	background-image: url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-residencial.webp');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
	cursor: pointer; /* Cambia el cursor al pasar por encima */
	transition: background-image 0.3s ease; /* Transición suave del color de fondo */
  }
  #residencial-llamada:hover {
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-residencial.webp'); /* Color de fondo al pasar el cursor */
  }

  .fila-llamada {
	width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }



  #residencial-llamada .fila-llamada a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}

#residencial-llamada  .resaltado  {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 600;
	font-size: 48px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
  
  #residencial-llamada  .resaltado1  {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 800;
	font-size: 48px; /* Ajusta el tamaño de la fuente */
	color: var(--yell);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }





/* residencial-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/















    /*--------------------------------------------------------------
>>>COMERCIALES:
--------------------------------------------------------------*/
 /* comercial-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
#comercial-principal {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 54, 108, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Comercial-solar.jpg');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }

  .fila-comercial-principal {
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }
   #comercial-principal h1{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 52px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #comercial-principal h2{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 48px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  /* comercial-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* comercial-banner section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  .fila1-comercial-banner {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
   }
  .imagenes-comercial-banner {
	height: 80vh; /* Ajusta la altura */
	background-image: url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Comerciales.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }
  #comercial-banner .industrial-comercial-banner img {
	object-fit: cover; /* o object-fit: cover; */
	width: 50%; /* Ancho deseado */
	height: 32vh; /* Alto automático para mantener la relación de aspecto */
	position: absolute;
    bottom: -20px;
    right: -20px;
    border: 20px solid white;
	border-radius: 32px 0 0 0px;
    box-sizing: border-box;
    z-index: 10; 


  }


  .columnatextos-comercial-banner {
	height: 80vh; /* Ajusta la altura */
	background-color:var(--navy);
	background-size: cover;
	background-position: center;
	color: var(--white); /* Color de texto general */
	border-radius: 32px 32px 0 0;
	
  }



  #comercial-banner .fila-a-comercial-banner h2{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #comercial-banner .fila-a-comercial-banner h3{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 22px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #comercial-banner .resaltado {
	color: var(--black); /* Color negro*/
  }
  #comercial-banner .resaltado1 {
	color:var(--yell); /* Color navy */
  }


  .fila-b-comercial-banner {
	height: 32vh;
	display: flex;
	color: var(--white); /* Color de texto general */
	position: absolute;
    bottom: -20px;
    border-top: 20px solid white;
    box-sizing: border-box;
    z-index: 10; 
  }

  #comercial-banner .fila-b-comercial-banner h3{
	padding-top: 2%;
	padding-left: 2%;
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }

  #comercial-banner .CTA-boton{
	width:50%;
	background-color: var(--yell);
	color:var(--white);
	border: none;
	border-radius: 32px;
	padding: 10px 20px;
	font-family: var(--titulo);
	font-weight: bold;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
	text-align: center;
	margin-left: 20%;
}
  
#comercial-banner .CTA-boton:hover {
	background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
}

  /* comercial-banner section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* comercial-conectado section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
  .fila1-comercial-conectado {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
   }

  #comercial-conectado .columna1-comercial-conectado {
	height: 80vh;
	color: var(--black);
	display: flex;
	flex-direction: column;
  }
  
  #comercial-conectado .filaitem1-comercial-conectado {
	height: 16vh;
    flex: 1; /* Esta línea es crucial para la distribución equitativa */
	display: flex;
	align-items: end;
 }
 #comercial-conectado .filaitem1-comercial-conectado:hover {
	box-shadow: 0px 4px 5px 4px rgba(217, 217, 217, 0.5);
	border-radius: 32px;

 }

 #comercial-conectado .ic1-comercial-conectado img,.ic2-comercial-conectado img,.ic3-comercial-conectado img,.ic4-comercial-conectado img {
	box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
	border-radius: 32px;
}

#comercial-conectado .titulo-comercial-conectado h2{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
  }
  #comercial-conectado .textoitems-comercial-conectado h3{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 600;
	font-size: 22px; /* Ajusta el tamaño de la fuente */
	color: var(--black);
  }




  #comercial-conectado .columna2-comercial-conectado {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Compania-paneles.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
    position: relative;
	color: var(--white); /* Color de texto general */
  }

  #comercial-conectado .imagen-comercial-conectado img {
	object-fit: cover; /* o object-fit: cover; */
	width: 35%; /* Ancho deseado */
	height: 35%; /* Alto automático para mantener la relación de aspecto */
	position: absolute;
    bottom: 0px;
    left: 0px;
    border: 20px solid white;
	border-radius: 32px;
    box-sizing: border-box;
    z-index: 10; 
  }

  #comercial-conectado .textoimagen-comercial-conectado h3  {
	font-family: var(--logo); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	text-align: center; /* Centra el texto horizontalmente */


  }

  .fila-etiquetas-comercial-conectado {
	position: absolute; /* Posicionamiento absoluto respecto a la columna */
	bottom: 0; /* Se pega a la parte inferior */
	right: 0; /* Se pega a la parte derecha */
	width: 50%; /* Ajusta el ancho según tus necesidades */
	padding: 10px; 
   }

  #comercial-conectado .et1-comercial-conectado h3,.et2-comercial-conectado h3  {
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 10px; /* Ajusta el tamaño de la fuente */
	border:solid;
	border-width:2px;
	border-radius: 16px; 
	color: var(--white);
	text-align: center;


 }

  /* comercial-conectado section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* comercial-hibrido section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  .fila1-comercial-hibrido {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
   }

  #comercial-hibrido .columna1-comercial-hibrido {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Hibrido-solar.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
    position: relative;
	color: var(--white); /* Color de texto general */
  }

  #comercial-hibrido .imagen-comercial-hibrido img {
	object-fit: cover; /* o object-fit: cover; */
	width: 35%; /* Ancho deseado */
	height: 35%; /* Alto automático para mantener la relación de aspecto */
	position: absolute;
    bottom: 0px;
    right: 0px;
    border: 20px solid white;
	border-radius: 32px;
    box-sizing: border-box;
    z-index: 10; 
  }

  #comercial-hibrido .textoimagen-comercial-hibrido h3  {
	font-family: var(--logo); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	text-align: center; /* Centra el texto horizontalmente */


  }

  .fila-etiquetas-comercial-hibrido {
	position: absolute; /* Posicionamiento absoluto respecto a la columna */
	bottom: 0; /* Se pega a la parte inferior */
	left: 0; /* Se pega a la parte derecha */
	width: 25%; /* Ajusta el ancho según tus necesidades */
	padding: 10px; 
   }

  #comercial-hibrido .et1-comercial-hibrido h3,.et2-comercial-hibrido h3  {
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 10px; /* Ajusta el tamaño de la fuente */
	border:solid;
	border-width:2px;
	border-radius: 16px; 
	color: var(--white);
	text-align: center;


 }







 #comercial-hibrido .columna2-comercial-hibrido {
	height: 80vh;
	color: var(--black);
	display: flex;
	flex-direction: column;
  }
  
  #comercial-hibrido .filaitem1-comercial-hibrido {
	height: 16vh;
    flex: 1; /* Esta línea es crucial para la distribución equitativa */
	display: flex;
	align-items: end;
 }
 #comercial-hibrido .filaitem1-comercial-hibrido:hover {
	box-shadow: 0px 4px 5px 4px rgba(217, 217, 217, 0.5);
	border-radius: 32px;

 }

 #comercial-hibrido .ic1-comercial-hibrido img,.ic2-comercial-hibrido img,.ic3-comercial-hibrido img,.ic4-comercial-hibrido img {
	box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
	border-radius: 32px;
}



#comercial-hibrido .titulo-comercial-hibrido h2{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
  }
  #comercial-hibrido .textoitems-comercial-hibrido h3{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 600;
	font-size: 22px; /* Ajusta el tamaño de la fuente */
	color: var(--black);
  }

  /* comercial hibrido section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

    /* comercial-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
 #comercial-llamada {
	height: 80vh; /* Ajusta la altura */
	background-image: url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-comercial.webp');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
	cursor: pointer; /* Cambia el cursor al pasar por encima */
	transition: background-image 0.3s ease; /* Transición suave del color de fondo */
  }
  #comercial-llamada:hover {
	background-image:linear-gradient(to top, rgba(255,255,255,0.5) 0%,rgba(255,255,255, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-comercial.webp'); /* Color de fondo al pasar el cursor */
  }

  .fila-llamada {
	width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }



  #comercial-llamada .fila-llamada a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}

#comercial-llamada  .resaltado  {
    position: relative; /* Posicionamiento relativo del h3 */
    top: -20px;
    left: 550px;
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 600;
	font-size: 44px; /* Ajusta el tamaño de la fuente */
	color: var(--yell);
	text-align: end; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
  
  #comercial-llamada  .resaltado1  {
    position: relative; /* Posicionamiento relativo del h3 */
    top: -20px;
    left: 550px;
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 800;
	font-size: 44px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
	text-align: end; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
    #comercial-llamada  h4  {
    position: relative; /* Posicionamiento relativo del h3 */
    top: -100px;
    left: 70px;
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 800;
	font-size: 44px; /* Ajusta el tamaño de la fuente */
	color: var(--white);

  }

    /* comercial-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/




    /*--------------------------------------------------------------
>>>AISLADOS:
--------------------------------------------------------------*/
  /* aislados principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  #aislados-principal {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to right, rgba(251, 185, 0, 0.2) 0%, rgba(149, 110, 0, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Inicio-aislados.webp');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }

  .fila-aislados-principal {
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }
   #aislados-principal h1{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 52px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #aislados-principal h2{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 48px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  /* aislados-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* aislados-banner section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  .fila1-aislados-banner {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
   }
  .imagenes-aislados-banner {
	height: 80vh; /* Ajusta la altura */
	background-image: url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Casa-rural-solar.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }
  #aislados-banner .baterias-aislados-banner img {
	object-fit: cover; /* o object-fit: cover; */
	width: 50%; /* Ancho deseado */
	height: 32vh; /* Alto automático para mantener la relación de aspecto */
	position: absolute;
    bottom: -20px;
    right: -20px;
    border: 20px solid white;
	border-radius: 32px 0 0 0px;
    box-sizing: border-box;
    z-index: 10; 


  }


  .columnatextos-aislados-banner {
	height: 80vh; /* Ajusta la altura */
	background-color:var(--yell);
	background-size: cover;
	background-position: center;
	color: var(--white); /* Color de texto general */
	border-radius: 32px 32px 0 0;
	
  }



  #aislados-banner .fila-a-aislados-banner h2{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #aislados-banner .fila-a-aislados-banner h3{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 22px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #aislados-banner .resaltado {
	color: var(--navy); /* Color negro*/
  }
  #aislados-banner .resaltado1 {
	color:var(--navy); /* Color navy */
  }


  .fila-b-aislados-banner {
	height: 32vh;
	display: flex;
	color: var(--white); /* Color de texto general */
	position: absolute;
    bottom: -20px;
    border-top: 20px solid white;
    box-sizing: border-box;
    z-index: 10; 
  }

  #aislados-banner .fila-b-aislados-banner h3{
	padding-top: 2%;
	padding-left: 2%;
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }

  #aislados-banner .CTA-boton{
	width:50%;
	background-color: var(--azul);
	color:var(--white);
	border: none;
	border-radius: 32px;
	padding: 10px 20px;
	font-family: var(--titulo);
	font-weight: bold;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
	text-align: center;
	margin-left: 20%;
}
  
#aislados-banner .CTA-boton:hover {
	background-color: var(--navy); /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
}

  /* aislados-banner section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* aislados-conectado section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
  .fila1-aislados-conectado {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
   }

  #aislados-conectado .columna1-aislados-conectado {
	height: 80vh;
	color: var(--black);
	display: flex;
	flex-direction: column;
  }
  
  #aislados-conectado .filaitem1-aislados-conectado {
	height: 16vh;
    flex: 1; /* Esta línea es crucial para la distribución equitativa */
	display: flex;
	align-items: end;
 }
 #aislados-conectado .filaitem1-aislados-conectado:hover {
	box-shadow: 0px 4px 5px 4px rgba(217, 217, 217, 0.5);
	border-radius: 32px;

 }

 #aislados-conectado .ic1-aislados-conectado img,.ic2-aislados-conectado img,.ic3-aislados-conectado img,.ic4-aislados-conectado img {
	box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
	border-radius: 32px;
}

#aislados-conectado .titulo-aislados-conectado h2{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
  }
  #aislados-conectado .textoitems-aislados-conectado h3{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 600;
	font-size: 22px; /* Ajusta el tamaño de la fuente */
	color: var(--black);
  }




  #aislados-conectado .columna2-aislados-conectado {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Casa-aislados.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
    position: relative;
	color: var(--white); /* Color de texto general */
  }

  #aislados-conectado .imagen-aislados-conectado img {
	object-fit: cover; /* o object-fit: cover; */
	width: 35%; /* Ancho deseado */
	height: 35%; /* Alto automático para mantener la relación de aspecto */
	position: absolute;
    bottom: 0px;
    left: 0px;
    border: 20px solid white;
	border-radius: 32px;
    box-sizing: border-box;
    z-index: 10; 
  }

  #aislados-conectado .textoimagen-aislados-conectado h3  {
	font-family: var(--logo); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	text-align: center; /* Centra el texto horizontalmente */


  }

  .fila-etiquetas-aislados-conectado {
	position: absolute; /* Posicionamiento absoluto respecto a la columna */
	bottom: 0; /* Se pega a la parte inferior */
	right: 0; /* Se pega a la parte derecha */
	width: 50%; /* Ajusta el ancho según tus necesidades */
	padding: 10px; 
   }

  #aislados-conectado .et1-aislados-conectado h3,.et2-aislados-conectado h3  {
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 10px; /* Ajusta el tamaño de la fuente */
	border:solid;
	border-width:2px;
	border-radius: 16px; 
	color: var(--white);
	text-align: center;


 }

  /* aislados-conectado section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  /* aislados-hibrido section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

  .fila1-aislados-hibrido {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
   }

  #aislados-hibrido .columna1-aislados-hibrido {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Aislados-electrogeno.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
    position: relative;
	color: var(--white); /* Color de texto general */
  }

  #aislados-hibrido .imagen-aislados-hibrido img {
	object-fit: cover; /* o object-fit: cover; */
	width: 35%; /* Ancho deseado */
	height: 35%; /* Alto automático para mantener la relación de aspecto */
	position: absolute;
    bottom: 0px;
    right: 0px;
    border: 20px solid white;
	border-radius: 32px;
    box-sizing: border-box;
    z-index: 10; 
  }

  #aislados-hibrido .textoimagen-aislados-hibrido h3  {
	font-family: var(--logo); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	text-align: center; /* Centra el texto horizontalmente */


  }

  .fila-etiquetas-aislados-hibrido {
	position: absolute; /* Posicionamiento absoluto respecto a la columna */
	bottom: 0; /* Se pega a la parte inferior */
	left: 0; /* Se pega a la parte derecha */
	width: 25%; /* Ajusta el ancho según tus necesidades */
	padding: 10px; 
   }

  #aislados-hibrido .et1-aislados-hibrido h3,.et2-aislados-hibrido h3  {
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 10px; /* Ajusta el tamaño de la fuente */
	border:solid;
	border-width:2px;
	border-radius: 16px; 
	color: var(--white);
	text-align: center;


 }







 #aislados-hibrido .columna2-aislados-hibrido {
	height: 80vh;
	color: var(--black);
	display: flex;
	flex-direction: column;
  }
  
  #aislados-hibrido .filaitem1-aislados-hibrido {
	height: 16vh;
    flex: 1; /* Esta línea es crucial para la distribución equitativa */
	display: flex;
	align-items: end;
 }
 #aislados-hibrido .filaitem1-aislados-hibrido:hover {
	box-shadow: 0px 4px 5px 4px rgba(217, 217, 217, 0.5);
	border-radius: 32px;

 }

 #aislados-hibrido .ic1-aislados-hibrido img,.ic2-aislados-hibrido img,.ic3-aislados-hibrido img,.ic4-aislados-hibrido img {
	box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
	border-radius: 32px;
}



#aislados-hibrido .titulo-aislados-hibrido h2{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
  }
  #aislados-hibrido .textoitems-aislados-hibrido h3{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 600;
	font-size: 22px; /* Ajusta el tamaño de la fuente */
	color: var(--black);
  }

  /* aislados hibrido section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

    /* aislados-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
  #aislados-llamada {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0.4) 40%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-aislados.webp');
	background-size: cover;
	background-position: 70% 100%;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: flex-end; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
	cursor: pointer; /* Cambia el cursor al pasar por encima */
	transition: background-image 0.3s ease; /* Transición suave del color de fondo */
  }
  #aislados-llamada:hover {
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-aislados.webp'); /* Color de fondo al pasar el cursor */
  }

  .fila-llamada {
	width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }



  #aislados-llamada .fila-llamada a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}

#aislados-llamada  .resaltado  {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 600;
	font-size: 48px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
  
  #aislados-llamada  .resaltado1  {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 800;
	font-size: 48px; /* Ajusta el tamaño de la fuente */
	color: var(--yell);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
    /* aislados-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

 /*--------------------------------------------------------------
>>>MANTENIMIENTO:
--------------------------------------------------------------*/
    /* mantenimiento-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

	#mantenimiento-principal {
		height: 80vh; /* Ajusta la altura */
		background-image:linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 54, 108, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Mantenimiento-solar.webp');
		background-size: cover;
		background-position: center;
		display: flex;
		flex-direction: column; /* Para alinear verticalmente los elementos */
		justify-content: flex-end; /* Para centrar verticalmente los elementos */
		align-items: center; /* Para centrar horizontalmente los elementos */
		color: var(--white); /* Color de texto general */
	  }
	
	  .fila-mantenimiento-principal {
		display: flex; /* Convierte la fila en un contenedor Flexbox */
		justify-content: center; /* Centra el contenido horizontalmente */
		align-items: center; /* Centra el contenido verticalmente */
	   }
	   #mantenimiento-principal h1{
		text-align: center; /* Centra el texto horizontalmente */
		vertical-align: text-bottom; /* Alinea el texto en la parte superior */
		font-family: var(--texto) ; /* Cambia la fuente del texto */
		font-weight: bold;
		font-size: 52px; /* Ajusta el tamaño de la fuente */
		color: var(--white);
	  }
	  #mantenimiento-principal h2{
		text-align: center; /* Centra el texto horizontalmente */
		vertical-align: text-bottom; /* Alinea el texto en la parte superior */
		font-family: var(--texto) ; /* Cambia la fuente del texto */
		font-weight: normal;
		font-size: 48px; /* Ajusta el tamaño de la fuente */
		color: var(--white);
	  }



    /* mantenimiento-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

	/* mantenimiento-limpieza section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

	.fila1-mantenimiento-limpieza {
		display: flex;
		justify-content: content; /* Distribuye las columnas con espacio entre ellas */
		gap: 50px; /* Espacio de 20px entre columnas */
	   }
	  .imagenes-mantenimiento-limpieza  {
		height: 80vh; /* Ajusta la altura */
		background-image: url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Limpieza.webp');
		background-size: cover;
		background-position: center;
		border-radius: 32px;
		display: flex;
		flex-direction: column; /* Para alinear verticalmente los elementos */
		justify-content: flex-end; /* Para centrar verticalmente los elementos */
		align-items: flex-start; /* Para centrar horizontalmente los elementos */
		color: var(--white); /* Color de texto general */
	  }
	  #mantenimiento-limpieza  .paneles-mantenimiento-limpieza  img {
		object-fit: cover; /* o object-fit: cover; */
		width: 50%; /* Ancho deseado */
		height: 32vh; /* Alto automático para mantener la relación de aspecto */
		position: absolute;
		bottom: -10%;
		right:  -10%;
		border: 20px solid white;
		border-radius: 32px;
		box-sizing: border-box;
		z-index: 10; 
	
	
	  }
	
	
	  .columnatextos-mantenimiento-limpieza  {
		height: 80vh; /* Ajusta la altura */
		color: var(--white); /* Color de texto general */
		
	  }
	
	
	
	  #mantenimiento-limpieza  h2{
		text-align: start; /* Centra el texto horizontalmente */
		vertical-align: text-bottom; /* Alinea el texto en la parte superior */
		font-family: var(--titulo) ; /* Cambia la fuente del texto */
		font-weight: bold;
		font-size: 32px; /* Ajusta el tamaño de la fuente */
		color: var(--navy);
	  }
	  #mantenimiento-limpieza  p{
		text-align: justify; /* Centra el texto horizontalmente */
		vertical-align: top; /* Alinea el texto en la parte superior */
		font-family: var(--texto) ; /* Cambia la fuente del texto */
		font-weight: normal;
		font-size: 22px; /* Ajusta el tamaño de la fuente */
		color: var(--black);
	  }

	  #mantenimiento-limpieza .CTA-boton{
		width:50%;
		background-color: var(--yell);
		color:var(--white);
		border: none;
		border-radius: 32px;
		padding: 10px 20px;
		font-family: var(--titulo);
		font-weight: bold;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
		cursor: pointer; /* Para que el cursor cambie al pasar por encima */
		text-align: center;
		margin-left: 20%;
	}
	  
	#mantenimiento-limpieza  .CTA-boton:hover {
		background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
		transform: scale(1.05); /* Efecto de crecimiento */
	}
    /* mantenimiento-limpieza section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

	/* mantenimiento-preventivo section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

	.fila1-mantenimiento-preventivo {
		display: flex;
		justify-content: content; /* Distribuye las columnas con espacio entre ellas */
		gap: 50px; /* Espacio de 20px entre columnas */
	   }
	  .imagenes-mantenimiento-preventivo  {
		height: 80vh; /* Ajusta la altura */
		background-image: url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Termografia.webp');
		background-size: cover;
		background-position: center;
		border-radius: 32px;
		display: flex;
		flex-direction: column; /* Para alinear verticalmente los elementos */
		justify-content: flex-end; /* Para centrar verticalmente los elementos */
		align-items: flex-start; /* Para centrar horizontalmente los elementos */
		color: var(--white); /* Color de texto general */
	  }
	  #mantenimiento-preventivo  .termografia-mantenimiento-preventivo  img {
		object-fit: cover; /* o object-fit: cover; */
		width: 50%; /* Ancho deseado */
		height: 32vh; /* Alto automático para mantener la relación de aspecto */
		position: absolute;
		bottom: -10%;
		right:  -10%;
		border: 20px solid white;
		border-radius: 32px;
		box-sizing: border-box;
		z-index: 10; 
	
	
	  }
	
	
	  .columnatextos-mantenimiento-preventivo  {
		height: 80vh; /* Ajusta la altura */
		color: var(--white); /* Color de texto general */
		
	  }
	
	
	
	  #mantenimiento-preventivo  h2{
		text-align: start; /* Centra el texto horizontalmente */
		vertical-align: text-bottom; /* Alinea el texto en la parte superior */
		font-family: var(--titulo) ; /* Cambia la fuente del texto */
		font-weight: bold;
		font-size: 32px; /* Ajusta el tamaño de la fuente */
		color: var(--navy);
	  }
	  #mantenimiento-preventivo  p{
		text-align: justify; /* Centra el texto horizontalmente */
		vertical-align: top; /* Alinea el texto en la parte superior */
		font-family: var(--texto) ; /* Cambia la fuente del texto */
		font-weight: normal;
		font-size: 22px; /* Ajusta el tamaño de la fuente */
		color: var(--black);
	  }

	  #mantenimiento-preventivo .CTA-boton{
		width:50%;
		background-color: var(--yell);
		color:var(--white);
		border: none;
		border-radius: 32px;
		padding: 10px 20px;
		font-family: var(--titulo);
		font-weight: bold;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
		cursor: pointer; /* Para que el cursor cambie al pasar por encima */
		text-align: center;
		margin-left: 20%;
	}
	  
	#mantenimiento-preventivo  .CTA-boton:hover {
		background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
		transform: scale(1.05); /* Efecto de crecimiento */
	}
    /* mantenimiento-preventivo section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

		/* mantenimiento-correctivosection ///////////////////////////////////////////////////////////////////////////////////////////////////*/

		.fila1-mantenimiento-correctivo {
			display: flex;
			justify-content: content; /* Distribuye las columnas con espacio entre ellas */
			gap: 50px; /* Espacio de 20px entre columnas */
		   }
		  .imagenes-mantenimiento-correctivo  {
			height: 80vh; /* Ajusta la altura */
			background-image: url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Mantenimiento-electrico.webp');
			background-size: cover;
			background-position: center;
			border-radius: 32px;
			display: flex;
			flex-direction: column; /* Para alinear verticalmente los elementos */
			justify-content: flex-end; /* Para centrar verticalmente los elementos */
			align-items: flex-start; /* Para centrar horizontalmente los elementos */
			color: var(--white); /* Color de texto general */
		  }
		  #mantenimiento-correctivo  .curva-mantenimiento-correctivo img {
			object-fit: cover; /* o object-fit: cover; */
			width: 50%; /* Ancho deseado */
			height: 32vh; /* Alto automático para mantener la relación de aspecto */
			position: absolute;
			bottom: -10%;
			right:  -10%;
			border: 20px solid white;
			border-radius: 32px;
			box-sizing: border-box;
			z-index: 10; 
		
		
		  }
		
		
		  .columnatextos-mantenimiento-correctivo  {
			height: 80vh; /* Ajusta la altura */
			color: var(--white); /* Color de texto general */
			
		  }
		
		
		
		  #mantenimiento-correctivo  h2{
			text-align: start; /* Centra el texto horizontalmente */
			vertical-align: text-bottom; /* Alinea el texto en la parte superior */
			font-family: var(--titulo) ; /* Cambia la fuente del texto */
			font-weight: bold;
			font-size: 32px; /* Ajusta el tamaño de la fuente */
			color: var(--navy);
		  }
		  #mantenimiento-correctivo  p{
			text-align: justify; /* Centra el texto horizontalmente */
			vertical-align: top; /* Alinea el texto en la parte superior */
			font-family: var(--texto) ; /* Cambia la fuente del texto */
			font-weight: normal;
			font-size: 22px; /* Ajusta el tamaño de la fuente */
			color: var(--black);
		  }
		  #mantenimiento-correctivo .CTA-boton{
			width:50%;
			background-color: var(--yell);
			color:var(--white);
			border: none;
			border-radius: 32px;
			padding: 10px 20px;
			font-family: var(--titulo);
			font-weight: bold;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
			cursor: pointer; /* Para que el cursor cambie al pasar por encima */
			text-align: center;
			margin-left: 20%;
		}
		  
		#mantenimiento-correctivo  .CTA-boton:hover {
			background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
			transform: scale(1.05); /* Efecto de crecimiento */
		}
		/* mantenimiento-correctivo section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
		
/* mantenimiento-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/



  #mantenimiento-llamada {
	height: 80vh; /* Ajusta la altura */
	background-image: url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-comercial.webp');
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
	cursor: pointer; /* Cambia el cursor al pasar por encima */
	transition: background-image 0.3s ease; /* Transición suave del color de fondo */
  }
  #mantenimiento-llamada:hover {
	background-image:linear-gradient(to top, rgba(255,255,255,0.5) 0%,rgba(255,255,255, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-comercial.webp'); /* Color de fondo al pasar el cursor */
  }

  .fila-llamada {
	width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }



  #mantenimiento-llamada .fila-llamada a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}

#mantenimiento-llamada  .resaltado  {
    position: relative; /* Posicionamiento relativo del h3 */
    top: -20px;
    left: 550px;
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 600;
	font-size: 44px; /* Ajusta el tamaño de la fuente */
	color: var(--yell);
	text-align: end; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
  
  #mantenimiento-llamada  .resaltado1  {
    position: relative; /* Posicionamiento relativo del h3 */
    top: -20px;
    left: 550px;
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 800;
	font-size: 44px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
	text-align: end; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
    #mantenimiento-llamada  h4  {
    position: relative; /* Posicionamiento relativo del h3 */
    top: -100px;
    left: 70px;
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: 800;
	font-size: 44px; /* Ajusta el tamaño de la fuente */
	color: var(--white);

  }


    /* mantenimiento-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

     /*--------------------------------------------------------------
      >>>SERVICIOS:
    --------------------------------------------------------------*/
    
	 /* servicios-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

	 #servicios-principal {
		height: 50vh; /* Ajusta la altura */
		background-image:linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 54, 108, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Ingenieria-Solar.webp');
		background-size: cover;
		background-position: center;
		display: flex;
		flex-direction: column; /* Para alinear verticalmente los elementos */
		justify-content: center; /* Para centrar verticalmente los elementos */
		align-items: center; /* Para centrar horizontalmente los elementos */
		color: var(--white); /* Color de texto general */
	  }
	
	  .fila-servicios-principal {
		display: flex; /* Convierte la fila en un contenedor Flexbox */
		justify-content: center; /* Centra el contenido horizontalmente */
		align-items: center; /* Centra el contenido verticalmente */
	   }
	   #servicios-principal h1{
		text-align: center; /* Centra el texto horizontalmente */
		vertical-align: text-bottom; /* Alinea el texto en la parte superior */
		font-family: var(--texto) ; /* Cambia la fuente del texto */
		font-weight: bold;
		font-size: 52px; /* Ajusta el tamaño de la fuente */
		color: var(--white);
	  }
	  #servicios-principal h2{
		text-align: center; /* Centra el texto horizontalmente */
		vertical-align: text-bottom; /* Alinea el texto en la parte superior */
		font-family: var(--texto) ; /* Cambia la fuente del texto */
		font-weight: normal;
		font-size: 48px; /* Ajusta el tamaño de la fuente */
		color: var(--white);
	  }



    /* servicios-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/


/* servicios-portafolio section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
#servicios-portafolio {
	height: 50vh; /* Ajusta la altura */
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
  }
.fila-servicios-portafolio {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
   }
   
   #servicios-portafolio  h2{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 20px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
	margin-top:1%;
  }
  #servicios-portafolio  h3{
	text-align: justify; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color: var(--black);
  }

  .columnadiseño-servicios-portafolio:hover  {
	height: 30vh; /* Ajusta la altura */
	background-image: linear-gradient(to top, rgba(2, 57, 87, 0.8) 0%, rgba(5, 96, 136, 0.8) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Diseno-sistema-solar.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }

  .columnaretie-servicios-portafolio:hover  {
	height: 30vh; /* Ajusta la altura */
	background-image: linear-gradient(to top, rgba(2, 57, 87, 0.8) 0%, rgba(5, 96, 136, 0.8) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/RETIE-documento.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }
  .columnaupme-servicios-portafolio:hover  {
	height: 30vh; /* Ajusta la altura */
	background-image: linear-gradient(to top, rgba(2, 57, 87, 0.8) 0%, rgba(5, 96, 136, 0.8) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/UPME.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }
  .columnamantenimiento-servicios-portafolio:hover  {
	height: 30vh; /* Ajusta la altura */
	background-image: linear-gradient(to top, rgba(2, 57, 87, 0.8) 0%, rgba(5, 96, 136, 0.8) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/maintenance.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }

  #servicios-portafolio .columnadiseño-servicios-portafolio:hover h2,#servicios-portafolio .columnadiseño-servicios-portafolio:hover h3 {
color: white; /* Cambia el color del texto a blanco (u otro color claro) */
}
#servicios-portafolio .columnaretie-servicios-portafolio:hover h2,#servicios-portafolio .columnaretie-servicios-portafolio:hover h3 {
color: white; /* Cambia el color del texto a blanco (u otro color claro) */
}
#servicios-portafolio .columnaupme-servicios-portafolio:hover h2,#servicios-portafolio .columnaupme-servicios-portafolio:hover h3 {
color: white; /* Cambia el color del texto a blanco (u otro color claro) */
}
#servicios-portafolio .columnamantenimiento-servicios-portafolio:hover h2,#servicios-portafolio .columnamantenimiento-servicios-portafolio:hover h3 {
color: white; /* Cambia el color del texto a blanco (u otro color claro) */
}

/* servicios-portafolio section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

/* servicios-diseño section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

	.fila1-servicios-diseño {
		display: flex;
		justify-content: content; /* Distribuye las columnas con espacio entre ellas */
		gap: 50px; /* Espacio de 20px entre columnas */
	   }
	  .imagenes-servicios-diseño  {
		height: 60vh; /* Ajusta la altura */
		background-image:  url('https://sonnenergy.com.co/wp-content/uploads/2025/02/normativa.webp');
		background-size: cover;
		background-position: center;
		border-radius: 32px;
		display: flex;
		flex-direction: column; /* Para alinear verticalmente los elementos */
		justify-content: flex-end; /* Para centrar verticalmente los elementos */
		align-items: flex-start; /* Para centrar horizontalmente los elementos */
		color: var(--white); /* Color de texto general */
	  }
	
	
	  .columnatextos-servicios-diseño  {
		height: 60vh; /* Ajusta la altura */
		background-image:linear-gradient(to top, rgba(2, 57, 87, 0.8) 0%, rgba(5, 96, 136, 0.8) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/diseno-sistemas-FV-laptop.webp');
		background-size: cover;
		background-position: center;
		border-radius: 32px;
		color: var(--white); /* Color de texto general */
		
	  }
	
	
	
	  #servicios-diseño  h2{
		text-align: start; /* Centra el texto horizontalmente */
		vertical-align: text-bottom; /* Alinea el texto en la parte superior */
		font-family: var(--titulo) ; /* Cambia la fuente del texto */
		font-weight: bold;
		font-size: 32px; /* Ajusta el tamaño de la fuente */
		color: var(--white);
		margin-top:1%;
	  }
	  #servicios-diseño  p{
		text-align: justify; /* Centra el texto horizontalmente */
		vertical-align: top; /* Alinea el texto en la parte superior */
		font-family: var(--titulo) ; /* Cambia la fuente del texto */
		font-weight: normal;
		font-size: 16px; /* Ajusta el tamaño de la fuente */
		color: var(--white);
	  }
    /* servicio-diseño section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

	/* servicios-diseño-1 section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

	.fila1-servicios-diseño-1 {
		display: flex;
		justify-content: content; /* Distribuye las columnas con espacio entre ellas */
		gap: 50px; /* Espacio de 20px entre columnas */
	   }
	  .imagenes-servicios-diseño-1  {
		height: 60vh; /* Ajusta la altura */
		background-image:  url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Diseno-sistemas-FV.webp');
		background-size: cover;
		background-position: center;
		border-radius: 32px;
		display: flex;
		flex-direction: column; /* Para alinear verticalmente los elementos */
		justify-content: flex-end; /* Para centrar verticalmente los elementos */
		align-items: flex-start; /* Para centrar horizontalmente los elementos */
		color: var(--white); /* Color de texto general */
	  }
	
	
	  .columnatextos-servicios-diseño-1 {
		height: 60vh; /* Ajusta la altura */
		background-image:linear-gradient(to top, rgba(2, 57, 87, 0.8) 0%, rgba(5, 96, 136, 0.8) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/fondo-solar.webp');
		background-size: cover;
		background-position: center;
		display: flex;
        flex-direction: column; /* Para alinear verticalmente */
        align-items: center; /* Para centrar horizontalmente */
        justify-content: center; /* Para centrar verticalmente */
		border-radius: 32px;
		color: var(--white); /* Color de texto general */
		
	  }
	
	  #servicios-diseño-1 p{
		text-align: justify; /* Centra el texto horizontalmente */
		vertical-align: center; /* Alinea el texto en la parte superior */
		font-family: var(--titulo) ; /* Cambia la fuente del texto */
		font-weight: normal;
		font-size: 16px; /* Ajusta el tamaño de la fuente */
		color: var(--white);
	  }
	  #servicios-diseño-1 .CTA-boton{
		width:50%;
		background-color: var(--yell);
		color:var(--white);
		border: none;
		border-radius: 32px;
		padding: 10px 20px;
		font-family: var(--titulo);
		font-weight: bold;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
		cursor: pointer; /* Para que el cursor cambie al pasar por encima */
		text-align: center;
		margin-left: 20%;
	}
	  
	#servicios-diseño-1 .CTA-boton:hover {
		background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
		transform: scale(1.05); /* Efecto de crecimiento */
	}
/* servicios-diseño-1 section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

/* servicios-retie section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

.fila1-servicios-retie {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 50px; /* Espacio de 20px entre columnas */
   }
  .imagenes-servicios-retie  {
	height: 60vh; /* Ajusta la altura */
	background-image:  url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Certificado-RETIE.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }


  .columnatextos-servicios-retie  {
	height: 60vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(2, 57, 87, 0.8) 0%, rgba(5, 96, 136, 0.8) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/fondo-solar.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	color: var(--white); /* Color de texto general */
	
  }



  #servicios-retie  h2{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	margin-top:1%;
  }
  #servicios-retie  p{
	text-align: justify; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }

  #servicios-retie .CTA-boton{
	width:50%;
	background-color: var(--yell);
	color:var(--white);
	border: none;
	border-radius: 32px;
	padding: 10px 20px;
	font-family: var(--titulo);
	font-weight: bold;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
	text-align: center;
	margin-left: 20%;
}
  
#servicios-retie .CTA-boton:hover {
	background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
}
/* servicios-retie section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

/* servicios-upme section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

.fila1-servicios-upme {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 50px; /* Espacio de 20px entre columnas */
   }
  .imagenes-servicios-upme  {
	height: 60vh; /* Ajusta la altura */
	background-image:  url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Certificado-incentivos.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }


  .columnatextos-servicios-upme  {
	height: 60vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(2, 57, 87, 0.8) 0%, rgba(5, 96, 136, 0.8) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/fondo-solar.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	color: var(--white); /* Color de texto general */
	
  }



  #servicios-upme  h2{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	margin-top:1%;
  }
  #servicios-upme  p{
	text-align: justify; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }

  #servicios-upme .CTA-boton{
	width:50%;
	background-color: var(--yell);
	color:var(--white);
	border: none;
	border-radius: 32px;
	padding: 10px 20px;
	font-family: var(--titulo);
	font-weight: bold;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
	text-align: center;
	margin-left: 20%;
}
  
#servicios-upme .CTA-boton:hover {
	background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
}
/* servicios-upme section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

/* servicios-mantenimiento section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

.fila1-servicios-mantenimiento {
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 50px; /* Espacio de 20px entre columnas */
   }
  .imagenes-servicios-mantenimiento  {
	height: 60vh; /* Ajusta la altura */
	background-image:  url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Mantenimiento-1.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: flex-end; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }


  .columnatextos-servicios-mantenimiento  {
	height: 60vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(2, 57, 87, 0.8) 0%, rgba(5, 96, 136, 0.8) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/fondo-solar.webp');
	background-size: cover;
	background-position: center;
	border-radius: 32px;
	color: var(--white); /* Color de texto general */
	
  }



  #servicios-mantenimiento h2{
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	margin-top:1%;
  }
  #servicios-mantenimiento p{
	text-align: justify; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }

  #servicios-mantenimiento .CTA-boton{
	width:50%;
	background-color: var(--yell);
	color:var(--white);
	border: none;
	border-radius: 32px;
	padding: 10px 20px;
	font-family: var(--titulo);
	font-weight: bold;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
	text-align: center;
	margin-left: 20%;
}
  
#servicios-mantenimiento .CTA-boton:hover {
	background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
}
/* servicios-mantenimiento section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

    /* servicios-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/



  #servicios-llamada .llamada {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0.4) 50%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-residencial.webp');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
	cursor: pointer; /* Cambia el cursor al pasar por encima */
	transition: background-image 0.3s ease; /* Transición suave del color de fondo */
  }
  #servicios-llamada .llamada:hover {
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-residencial.webp'); /* Color de fondo al pasar el cursor */
  }

  .fila-llamada {
	width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }



  #servicios-llamada .fila-llamada a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}

#servicios-llamada  h3 {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: lighter;
	font-size: 64px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }


/* servicios-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

/*--------------------------------------------------------------
>>>NOSOTROS:
--------------------------------------------------------------*/



/* nosotros-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

	 #nosotros-principal {
		height: 50vh; /* Ajusta la altura */
		background-image:linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 54, 108, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/empresa-nosotros.webp');
		background-size: cover;
		background-position: center;
		display: flex;
		flex-direction: column; /* Para alinear verticalmente los elementos */
		justify-content: center; /* Para centrar verticalmente los elementos */
		align-items: center; /* Para centrar horizontalmente los elementos */
		color: var(--white); /* Color de texto general */
	  }
	
	  .fila-nosotros-principal {
		display: flex; /* Convierte la fila en un contenedor Flexbox */
		justify-content: center; /* Centra el contenido horizontalmente */
		align-items: center; /* Centra el contenido verticalmente */
	   }
	   #nosotros-principal h1{
		text-align: center; /* Centra el texto horizontalmente */
		vertical-align: text-bottom; /* Alinea el texto en la parte superior */
		font-family: var(--texto) ; /* Cambia la fuente del texto */
		font-weight: bold;
		font-size: 52px; /* Ajusta el tamaño de la fuente */
		color: var(--white);
	  }
	  #nosotros-principal h2{
		text-align: center; /* Centra el texto horizontalmente */
		vertical-align: text-bottom; /* Alinea el texto en la parte superior */
		font-family: var(--texto) ; /* Cambia la fuente del texto */
		font-weight: normal;
		font-size: 48px; /* Ajusta el tamaño de la fuente */
		color: var(--white);
	  }



    /* servicios-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
   
	
	/* nosotros-objeto section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
	#nosotros-objeto {
		height: 100vh; /* Ajusta la altura */
		justify-content: center; /* Para centrar verticalmente los elementos */
		align-items: center; /* Para centrar horizontalmente los elementos */
	  }
	#nosotros-objeto  h2{
		text-align: justify; /* Centra el texto horizontalmente */
		vertical-align: center; /* Alinea el texto en la parte superior */
		font-family: var(--texto) ; /* Cambia la fuente del texto */
		font-weight: normal;
		font-size: 52px; /* Ajusta el tamaño de la fuente */
		color: var(--black);
		margin-top:1%;
	  }
      #nosotros-objeto .resaltado {
          font-weight: 800;
		font-family: var(--logo) ; /* Cambia la fuente del texto */
		color: var(--yell); /* Color negro*/
	  }
	  #nosotros-objeto .resaltado1 {
	      font-weight: 600;
		font-family: var(--logo) ; /* Cambia la fuente del texto */
		color:var(--navy); /* Color navy */
	  }

	/* nosotros-objeto section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
   
	/* nosotros-estrategia section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
	
	#nosotros-estrategia {
		height: 60vh; /* Ajusta la altura */
		width: 100%; /* Ajusta la altura */
        background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 54, 108, 0.5) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/fondo-solar-azul.webp');
		background-size: cover;
		background-position: center;
		display: flex;
		flex-direction: column; /* Para alinear verticalmente los elementos */
		justify-content: center; /* Para centrar verticalmente los elementos */
		align-items: center; /* Para centrar horizontalmente los elementos */
		color: var(--white); /* Color de texto general */
	  }
	
	.fila1-nosotros-estrategia {
		display: flex;
		justify-content: space-between; /* Distribuye las columnas con espacio entre ellas */
		gap: 50px; /* Espacio de 20px entre columnas */
	   }
      
	   .columnaimagen-nosotros-estrategia {
		height: 60vh;
		max-width: 50%; /* Ajusta el ancho según tus necesidades */
		display: flex;
        flex-direction: column; /* Para alinear verticalmente */
        align-items: center; /* Para centrar horizontalmente */
        justify-content: center; /* Para centrar verticalmente */
	  }


	   #nosotros-estrategia .apoyo-nosotros-estrategia  img {
		width: 70%;
		height: 70%;
		object-fit: cover;
	}

	
	
	  .columnatextos-nosotros-estrategia {
		height: 60vh; /* Ajusta la altura */
		display: flex;
        flex-direction: column; /* Para alinear verticalmente */
        align-items: center; /* Para centrar horizontalmente */
        justify-content: center; /* Para centrar verticalmente */
		border-radius: 32px;
		color: var(--white); /* Color de texto general */
	  }
	
	  #nosotros-estrategia h2{
		text-align: justify; /* Centra el texto horizontalmente */
		vertical-align: center; /* Alinea el texto en la parte superior */
		font-family: var(--titulo) ; /* Cambia la fuente del texto */
		font-weight: normal;
		font-size: 16px; /* Ajusta el tamaño de la fuente */
		color: var(--white);
	  }

	/* nosotros-estrategia section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
    
	/* nosotros-pilares section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
	
	.fila1-nosotros-pilares {
		display: flex;
		justify-content: center; /* Distribuye las columnas con espacio entre ellas */
		align-items: center; /* Distribuye las columnas con espacio entre ellas */

	   }
	   #nosotros-pilares  h2{
		text-align: center; /* Centra el texto horizontalmente */
		vertical-align: center; /* Alinea el texto en la parte superior */
		font-family: var(--texto) ; /* Cambia la fuente del texto */
		font-weight: 600;
		font-size: 32px; /* Ajusta el tamaño de la fuente */
		color: var(--black);
	  }

	  #nosotros-pilares .resaltado {
		font-family: var(--logo) ; /* Cambia la fuente del texto */
		color: var(--yell); /* Color negro*/
	  }
	  #nosotros-pilares .resaltado1 {
		font-family: var(--logo) ; /* Cambia la fuente del texto */
		color:var(--navy); /* Color navy */
	  }

	.fila2-nosotros-pilares {
		display: flex;
		justify-content: space-between; /* Distribuye las columnas con espacio entre ellas */
		gap: 50px; /* Espacio de 20px entre columnas */
	   }

	   .imagen1-nosotros-pilares  {
		height: 60vh; /* Ajusta la altura */
		background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 54, 108, 0.3) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Proyectos-solares.webp');
		background-size: cover;
		background-position: center;
		border-radius: 32px;
		display: flex;
		flex-direction: column; /* Para alinear verticalmente los elementos */
		justify-content: flex-end; /* Para centrar verticalmente los elementos */
		align-items: flex-start; /* Para centrar horizontalmente los elementos */
		color: var(--white); /* Color de texto general */
	  }

	  .imagen2-nosotros-pilares  {
		height: 60vh; /* Ajusta la altura */
		background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 54, 108, 0.3) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Limpieza.webp');
		background-size: cover;
		background-position: center;
		border-radius: 32px;
		display: flex;
		flex-direction: column; /* Para alinear verticalmente los elementos */
		justify-content: flex-end; /* Para centrar verticalmente los elementos */
		align-items: flex-start; /* Para centrar horizontalmente los elementos */
		color: var(--white); /* Color de texto general */
	  }
	  .imagen3-nosotros-pilares  {
		height: 60vh; /* Ajusta la altura */
		background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 54, 108, 0.3) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Ingenieria-Solar.webp');
		background-size: cover;
		background-position: center;
		border-radius: 32px;
		display: flex;
		flex-direction: column; /* Para alinear verticalmente los elementos */
		justify-content: flex-end; /* Para centrar verticalmente los elementos */
		align-items: flex-start; /* Para centrar horizontalmente los elementos */
		color: var(--white); /* Color de texto general */
	  }

	  #nosotros-pilares  h3{
		text-align: center; /* Centra el texto horizontalmente */
		vertical-align: center; /* Alinea el texto en la parte superior */
		font-family: var(--texto) ; /* Cambia la fuente del texto */
		font-weight: bold;
		font-size: 36px; /* Ajusta el tamaño de la fuente */
		color: var(--white);
	  }
	
	
	
	/* nosotros-pilares section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
   /* nosotros-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/



  #nosotros-llamada .llamada {
	height: 80vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0.4) 50%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-residencial.webp');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
	cursor: pointer; /* Cambia el cursor al pasar por encima */
	transition: background-image 0.3s ease; /* Transición suave del color de fondo */
  }
  #nosotros-llamada .llamada:hover {
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/04/llamada-residencial.webp'); /* Color de fondo al pasar el cursor */
  }

  .fila-llamada {
	width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }



  #nosotros-llamada .fila-llamada a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}

#nosotros-llamada  h3 {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: lighter;
	font-size: 64px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }



/* nosotros-llamada section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

/*--------------------------------------------------------------
>>>NOTICIAS
--------------------------------------------------------------*/
/* noticias-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
#noticias-principal {
	height: 50vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 54, 108, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Noticias-sector-solar.webp');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
	margin-bottom: 1vh;
  }

  .fila-noticias-principal {
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }
   #noticias-principal h1{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 52px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #noticias-principal h2{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 48px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }

/* noticias-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

/* noticias-banner section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
#noticias-banner {
    background-image:linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 54, 108, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/fondo-solar-azul.webp');
	background-size: 100% 50%;
	background-position: center;
	background-repeat: no-repeat;
    padding: 20px; /* Espacio alrededor del contenido */
	margin-bottom: 10%;
}

/* Estilos para la fila de la imagen */
#noticias-banner .fila1-noticias-banner {
	display: flex; /* Activa Flexbox */
	flex-direction: column; /* Alinea los elementos en columna */
    max-width: 100%; /* Ajusta el ancho máximo de la imagen al 100% del contenedor */
    height: 70vh; /* Permite que la altura se ajuste proporcionalmente */
	margin-bottom: 10%;
    text-align: center; /* Centra la imagen horizontalmente */
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%),url('https://sonnenergy.com.co/wp-content/uploads/2025/03/Beneficios_tributarios-principal.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 32px;
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */

}
#noticias-banner .fila1-noticias-banner:hover {
	background-image:linear-gradient(to top, rgba(33, 58, 74, 1) 0%,rgba(33, 58, 74, 0.8) 20%, rgba(33, 58, 74, 0.1) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/03/Beneficios_tributarios-principal.webp'); /* Color de fondo al pasar el cursor */
  }


/* Estilos para la fila de la imagen */

.fila1-noticiaprincipal-banner{
height: 15vh;
  }

.fila2-noticiaprincipal-banner{
	height: 15vh;
	  }
.fila3-noticiaprincipal-banner{
		height: 40vh;
		display: flex;
		align-items: flex-end;
		  }







#noticias-banner .et1-noticiaprincipal h3,.et2-noticiaprincipal h3,.et3-noticiaprincipal h3 {
	width:auto;
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 10px; /* Ajusta el tamaño de la fuente */
	border:solid;
	border-width:2px;
	border-radius: 32px; 
	padding: 5px 5px;
	color: var(--white);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: bottom; /* Alinea el texto en la parte superior */
	margin-top:20px;

  }

  #noticias-banner .clasearticulo-noticiaprincipal h3{
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 2em; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: bottom; /* Alinea el texto en la parte superior */
	/* margin-top:50px; */

  }

  #noticias-banner .resaltado-princ {
	font-size: 2em;
	font-weight: 800;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color: var(--yell); /* Color negro*/
  }
  #noticias-banner .resaltado1-princ {
	font-size: 2em;
	font-weight: 600;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color:var(--white); /* Color navy */
  }
  #noticias-banner .titulo-noticiaprincipal h3 {
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: 900;
	font-size: 34px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: bottom; /* Alinea el texto en la parte superior */
	

  }
  #noticias-banner .parrafo-noticiaprincipal p {
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: bottom; /* Alinea el texto en la parte superior */
	/* margin-top:50px; */

  }



  #noticias-banner .enlace-noticiaprincipal {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
  }













/* Estilos para la fila de las noticias */
#noticias-banner .fila2-noticias-banner {
    /* Estilos para el contenedor de las noticias (si es necesario) */
	max-width: 100%;

	height: 80vh; /* Permite que la altura se ajuste proporcionalmente */
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 20px; /* Espacio de 20px entre columnas */
}

#noticias-banner .fila2-noticias-banner  {
    /* Estilos para cada noticia individual */
    margin-top: 10%; /* Espacio entre noticias */
}

#noticias-banner .columna-noticia1 {
	height:80vh;
    border-radius: 32px;
	box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5);
    position: relative; /* Necesario para posicionar el pseudoelemento */
    overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
  }
  
#noticias-banner .columna-noticia1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image:linear-gradient(to bottom, rgba(33, 58, 74, 1) 0%, rgba(33, 58, 74, 1) 30%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/03/incrementos-energia-solar.webp');
    background-size: 100% 50%;
    background-size: cover; /* Cubre todo el 50% superior */
    background-repeat: no-repeat;
    background-position: center center; /* Centra la imagen horizontalmente en la parte superior */
    object-fit: cover; /* Ajusta la imagen sin comprimirse */
  }
  #noticias-banner .columna-noticia2 {
	height:80vh;
    border-radius: 32px;
	box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5);
    position: relative; /* Necesario para posicionar el pseudoelemento */
    overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
  }
  
  #noticias-banner .columna-noticia2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image:linear-gradient(to bottom, rgba(33, 58, 74, 1) 0%, rgba(33, 58, 74, 1) 30%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/03/apantallamiento-sistemas-solares.webp');
    background-size: 100% 50%;
    background-size: cover; /* Cubre todo el 50% superior */
    background-repeat: no-repeat;
    background-position: center center; /* Centra la imagen horizontalmente en la parte superior */
    object-fit: cover; /* Ajusta la imagen sin comprimirse */
  }
  #noticias-banner .columna-noticia3 {
	height:80vh;
    border-radius: 32px;
	box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5);
    position: relative; /* Necesario para posicionar el pseudoelemento */
    overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
  }
  
  #noticias-banner .columna-noticia3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image:linear-gradient(to bottom, rgba(33, 58, 74, 1) 0%, rgba(33, 58, 74, 1) 30%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/03/sistema-solar-paratebueno.webp');
    background-size: 100% 50%;
    background-size: cover; /* Cubre todo el 50% superior */
    background-repeat: no-repeat;
    background-position: center center; /* Centra la imagen horizontalmente en la parte superior */
    object-fit: cover; /* Ajusta la imagen sin comprimirse */
  }


  #noticias-banner .fila1-noticia1,#noticias-banner .fila1-noticia2,#noticias-banner .fila1-noticia3 {
	height: 5vh; /* Ajusta la altura */
  }
  #noticias-banner .fila2-noticia1,#noticias-banner .fila2-noticia2,#noticias-banner .fila2-noticia3 {
	height: 35vh; /* Ajusta la altura */
  }
  #noticias-banner .fila3-noticia1,#noticias-banner .fila3-noticia2,#noticias-banner .fila3-noticia3 {
	height: 40vh; /* Ajusta la altura */
  }

 #noticias-banner .et1-noticia1 h3,.et2-noticia1 h3,.et3-noticia1 h3,.et1-noticia2 h3,.et2-noticia2 h3,.et3-noticia2 h3,.et1-noticia3 h3,.et2-noticia3 h3,.et3-noticia3 h3 {
	font-family: var(--titulo); /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 10px; /* Ajusta el tamaño de la fuente */
	border:solid;
	border-width:2px;
	border-radius: 16px; 
	padding: 5% 5%;
	color: var(--white);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: bottom; /* Alinea el texto en la parte superior */
	margin-top:20px;

  }

  #noticias-banner .clasearticulo-noticia1 h3,.clasearticulo-noticia2 h3,.clasearticulo-noticia3 h3{
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 24px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: bottom; /* Alinea el texto en la parte superior */
	/* margin-top:50px; */

  }

  #noticias-banner .resaltado {
	font-weight: 800;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color: var(--yell); /* Color negro*/
  }
  #noticias-banner .resaltado1 {
	font-weight: 600;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color:var(--white); /* Color navy */
  }
  #noticias-banner .titulo-noticia1 h3,.titulo-noticia2 h3,.titulo-noticia3 h3 {
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 24px; /* Ajusta el tamaño de la fuente */
	color: var(--black);
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
	/* margin-top:50px; */

  }
  #noticias-banner p {
	height: 25%;
	font-family: var(--texto); /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color: var(--black);
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: top; /* Alinea el texto en la parte superior */
	margin-bottom: 50px;


  }



  #noticias-banner .ver-mas {
    position: absolute; /* Permite posicionamiento absoluto */
  bottom: 0; /* Lo coloca en la parte inferior */
  right: 0; /* Lo coloca a la derecha */
  width: 40%; /* Ancho fijo del botón (ajusta según necesites) */
  color: var(--azul);
  border: none;
  font-family: var(--titulo);
  font-weight: normal;
  cursor: pointer;
  text-align: center;
  margin-bottom: 20px;
}

#noticias-banner .ver-mas:hover {
	color: #800080;
}

  .filaprincipal3-noticias {
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }
   .titulo-masnoticias {
	text-align: center; /* Opcional: Centra el texto dentro del bloque */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: lighter;
	font-size: 22px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
  }







/* Estilos para la fila de las noticias */

/* POSTGRID-noticias section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
#noticias-postgrid .vc_grid-item {
	border-radius: 32px;
	box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5);
	overflow: hidden;
	}


#noticias-postgrid .vc_btn3 {
background-color: var(--azul);
border-radius: 16px; /* Bordes redondeados */
}
#noticias-postgrid .vc_btn3:hover {
    background-color: var(--navy); /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
}




/* POSTGRID-noticias section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

/* CTA-noticias section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

.llamada {
	height: 50vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0.4) 50%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/cosecha-energia-solar.webp');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
	cursor: pointer; /* Cambia el cursor al pasar por encima */
	transition: background-image 0.3s ease; /* Transición suave del color de fondo */
  }
  .llamada:hover {
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/cosecha-energia-solar.webp'); /* Color de fondo al pasar el cursor */
  }

  #noticias-llamada .fila-llamada a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}

#noticias-llamada  h3 {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: lighter;
	font-size: 64px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
/* CTA-noticias section ///////////////////////////////////////////////////////////////////////////////////////////////////*/








/* noticias-banner section ///////////////////////////////////////////////////////////////////////////////////////////////////*/

/*--------------------------------------------------------------
>>>Blog:
--------------------------------------------------------------*/










/*--------------------------------------------------------------
>>>contáctanos:
--------------------------------------------------------------*/
/* contactanos-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
#contactanos-principal {
	height: 50vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 54, 108, 0.2) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Panel-solar.jpg');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */

  }
  .fila-contactanos-principal {
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }
   #contactanos-principal h1{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 52px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  #contactanos-principal h2{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: text-bottom; /* Alinea el texto en la parte superior */
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 48px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
/* contactanos-principal section ///////////////////////////////////////////////////////////////////////////////////////////////////*/



/* contactanos-formulario section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
#contactanos-formulario{
	height: 120vh; /* Ajusta la altura */
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */

  }
  #contactanos-formulario .fila-contactanos-formulario {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: content; /* Distribuye las columnas con espacio entre ellas */
	gap: 50px; /* Espacio de 20px entre columnas */
	color: var(--white); /* Color de texto general */

  }

#contactanos-formulario .columna1-form {

    height: auto;
	width:30%;
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(33, 58, 74, 0.17) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/contacto-1.webp');
	border: none;
	border-radius: 32px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content:center; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	cursor: pointer; /* Para que el cursor cambie al pasar por encima */
	
}

#contactanos-formulario .columna2-form {
	height: auto;
	width:70%;
	display: flex;
	justify-content: center; /* Centra horizontalmente */
	align-items: center; /* Ahora también centra verticalmente */
	border: none;
    border-radius: 32px; /* Bordes redondeados */
    box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5);
}

#contactanos-formulario .logo-contactanos h2 {
	font-size: 40px; /* Ajusta el tamaño de la fuente */
	text-align: start; /* Centra el texto horizontalmente */
	vertical-align: bottom; /* Alinea el texto en la parte superior */
	margin-left: 5%;
	margin-top: 5%;
  }
  #contactanos-formulario .resaltado {
	font-weight: 800;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color: var(--yell); /* Color negro*/
  }
  #contactanos-formulario .resaltado1 {
	font-weight: 600;
	font-family: var(--logo) ; /* Cambia la fuente del texto */
	color:var(--navy); /* Color navy */
  }









#contactanos-formulario .wpforms-form {
    height: 100%;
    width: 100%;
    padding: 20px;
    transition: all 0.3s ease-in-out;
}

#contactanos-formulario .wpforms-form input::placeholder,
#contactanos-formulario .wpforms-form textarea::placeholder,
#contactanos-formulario .wpforms-form select {
    color: #000; /* Gris intermedio */
	font-style: var(--titulo);
    transition: color 0.3s ease-in-out;
	
}


#contactanos-formulario .wpforms-form input[type="text"],
#contactanos-formulario .wpforms-form input[type="email"],
#contactanos-formulario .wpforms-form input[type="tel"],
#contactanos-formulario .wpforms-form input[type="number"],
#contactanos-formulario .wpforms-form select,
#contactanos-formulario .wpforms-form textarea {
    border: 2px solid var(--navy); /* Borde azul */
    border-radius: 16px;
    padding: 10px;
	color: #000;  /* Color gris suave */
    font-style: var(--titulo);
    font-size: 14px;
    width: 100%;
    background-color: #f9f9f9; /* Color de fondo */

}

#contactanos-formulario .wpforms-form button[type="submit"] {
    background-color: var(--yell); /* Color de fondo */
    color: #ffffff; /* Color del texto */
    font-size: 16px; /* Tamaño del texto */
    font-weight: bold; /* Negrita */
    border: none; /* Sin bordes */
    border-radius: 16px; /* Bordes redondeados */
    padding: 12px 24px; /* Espaciado interno */
    cursor: pointer; /* Cursor tipo "mano" */
    transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
	margin-left: 20%;
}

/* Efecto hover (cuando el usuario pasa el mouse) */
#contactanos-formulario .wpforms-form button[type="submit"]:hover {
    background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de crecimiento */
}









/* contactanos-formulario section ///////////////////////////////////////////////////////////////////////////////////////////////////*/









/* contactanos-datos section ///////////////////////////////////////////////////////////////////////////////////////////////////*/
#contactanos-datos {
  height: 50vh; /* Ajusta la altura */
  background: linear-gradient(to top, rgba(251, 185, 0, 1) 0%, rgba(251, 185, 0, 0.7) 50%,transparent 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column; /* Para alinear verticalmente los elementos */
  justify-content: center; /* Para centrar verticalmente los elementos */
  align-items: center; /* Para centrar horizontalmente los elementos */
  color: var(--white); /* Color de texto general */
 
}

#contactanos-datos .fila-contactanos-datos {
    /* Estilos para el contenedor de las noticias (si es necesario) */
	width: 100%;
	display: flex;
	align-items: center; /* Distribuye las columnas con espacio entre ellas */
	justify-content: center;
	gap: 20%;
}

#contactanos-datos h2{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: Bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	color: var(--navy);
  }

  #contactanos-datos h3{
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: normal;
	font-size: 24px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
  }
  

  


/* contactanos-datos section ///////////////////////////////////////////////////////////////////////////////////////////////////*/


/* ENTRADA PLANTILLA//////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.post-thumbnail{
	display:none;
}
.entry-title{
	height: 40vh; /* Ajusta la altura */
	width: 100%;
	background-image:linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 54, 108, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/Noticias-sector-solar.webp');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: center; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
  }

.entry-header h1 {
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
	font-family: var(--titulo) ; /* Cambia la fuente del texto */
	font-weight: bold;
	font-size: 32px; /* Ajusta el tamaño de la fuente */
	
}

.fecha-articulo,.author,.lectura {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	text-align: justify;
	font-weight: bold;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color:var(--black); /* Color de texto general */
  }

  .posted-on, .byline {
    display: none;
}

.featured-image{
	height: 70vh; /* Ajusta la altura */
	width: 100%;
  }

.content p {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	text-align: justify;
	font-weight: normal;
	line-height: 1.5;
	font-size: 16px; /* Ajusta el tamaño de la fuente */
	color:#404040; /* Color de texto general */
  }


  #llamada-articulo-seccion  {
	height: 50vh; /* Ajusta la altura */
	background-image:linear-gradient(to top, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0.4) 50%, transparent 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/cosecha-energia-solar.webp');
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column; /* Para alinear verticalmente los elementos */
	justify-content: center; /* Para centrar verticalmente los elementos */
	align-items: flex-start; /* Para centrar horizontalmente los elementos */
	color: var(--white); /* Color de texto general */
	cursor: pointer; /* Cambia el cursor al pasar por encima */
	transition: background-image 0.3s ease; /* Transición suave del color de fondo */
  }
  #llamada-articulo-seccion:hover {
	background-image:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%,rgba(0, 0, 0, 0.4) 100%), url('https://sonnenergy.com.co/wp-content/uploads/2025/02/cosecha-energia-solar.webp'); /* Color de fondo al pasar el cursor */
  }

  .fila-llamada-articulo {
	width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
	display: flex; /* Convierte la fila en un contenedor Flexbox */
	justify-content: center; /* Centra el contenido horizontalmente */
	align-items: center; /* Centra el contenido verticalmente */
   }



  #llamada-articulo-seccion .fila-llamada a {
    display: block; /* Convierte el enlace en un bloque */
    width: 100%; /* Ocupa todo el ancho de la columna */
    height: 100%; /* Ocupa toda la altura de la columna */
    position: absolute; /* Posiciona el enlace absolutamente */
    top: 0; /* Lo coloca en la parte superior de la columna */
    left: 0; /* Lo coloca en la parte izquierda de la columna */
	color: var(--white); /* Color de texto general */
	padding-top:50px;
    text-decoration: none; /* Elimina el subrayado */
}

#llamada-articulo-seccion  h3 {
	font-family: var(--texto) ; /* Cambia la fuente del texto */
	font-weight: lighter;
	font-size: 64px; /* Ajusta el tamaño de la fuente */
	color: var(--white);
	text-align: center; /* Centra el texto horizontalmente */
	vertical-align: center; /* Alinea el texto en la parte superior */
  }
/* ENTRADA PLANTILLA//////////////////////////////////////////////////////////////////////////////////////////////////////////// */

















/*--------------------------------------------------------------
>>>Internas:
--------------------------------------------------------------*/
.bannerContact{
  height: 70vh;
  overflow: visible !important;
}
.maps .wpb_content_element{
  margin-bottom: 0px;
}



























/*--------------------------------------------------------------
>>>RESPONSIVE: HEADER
--------------------------------------------------------------*/
@media only screen and (max-width: 900px) {


	/*------>>>Menú: ------*/

	header#masthead.on{
		background-color: var(--primary);
		height: 100vh;
	}
	header#masthead .main-navigation {
		flex-wrap: wrap;
		padding-bottom: 0 !important;
	}
	header#masthead ul#primary-menu li {
		padding: 1rem;
		border-bottom: 1px solid var(--white);
		border-radius: 16px;
		background-color: var(--navy);
		background-size: cover;
	}

	header#masthead .logo {
	width: 80%;
    max-width: 100%;
    margin-left: -50px;

	    
	    
		width: 300px;
		padding-left: 100px;
	}
	#site-navigation .menu-menu-top-container {
		position: relative;
		left: 0;
		right: 0;
		transform: translateX(-100%);
		transition: .4s all ease;
		width: 100%;
	}
	#site-navigation.toggled .menu-menu-top-container{
		transform: translateX(0%);
	} 
	.top-nav, #toggle {
		display: block;
	}
	#toggle,
	#toggle:after,
	#toggle:before {
		width: 30px;
		height: 5px;
		border-radius: 1px;
	}

	#toggle {
		position: relative;
		transform: translateY(-5px);
		background: var(--white);
		transition: all 0ms 300ms;
	}
	#toggle.animate {
		background: var(--primary);
	}

	#toggle:before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 10px;
		background: var(--white);
		transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	#toggle:after {
		content: "";
		position: absolute;
		left: 0;
		top: 10px;
		background: var(--white);
		transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	#toggle.animate:after {
		top: 0;
		transform: rotate(45deg);
		transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	#toggle.animate:before {
		bottom: 0;
		transform: rotate(-45deg);
		transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	header#masthead .topMenu ul {
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	header#masthead .topMenu ul img {
		width: 15px;
		height: 15px;
	}
	header#masthead .menu-menu-principal-container {
		position: absolute;
	}
	header#masthead .main-navigation.toggled .menu-menu-principal-container {
		position: relative;
		width: 100%;
	}
}

/*--------------------------------------------------------------
>>>RESPONSIVE: FOOTER
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { /* Puedes ajustar el ancho máximo según necesites */
    #colophon .contenedor-footer {
        display: flex; /* Mantenemos flex para ordenar verticalmente */
        flex-direction: column; /* Apilamos los elementos verticalmente */
        align-items: flex-start; /* Alineamos los elementos a la izquierda */
		padding-left: 5%; /* Ajustamos el padding vertical */
    }

    #colophon .footer-column {
        width: 100%; /* Ocupan todo el ancho disponible */
        padding: 10px 0; /* Ajustamos el padding vertical */
	
    }

    #colophon .footer-column p {
        align-items: flex-start; /* Alineamos el texto e ícono a la izquierda */
    }

    #colophon .footer-column p img {
        margin-right: 10px; /* Reducimos el margen derecho del icono */
    }

    #colophon .CTA-boton{
        width: 90%; /* Ocupa más ancho en móvil */
        margin-left: 5%; /* Centramos un poco el botón */
    }
}

/*--------------------------------------------------------------
>>>RESPONSIVE: INICIO-PRINCIPAL
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
    
	#inicio-principal #video-fondo {

		object-position: 30% 50%; /* Desplaza el video ligeramente a la izquierda */ /* Desplaza el video ligeramente a la izquierda */

	  }
	  #inicio-principal #contenido-principal {
        height: 100vh;
	    width: 100%;
		display: flex; /* Mantenemos flex para ordenar verticalmente */
        flex-direction: column; /* Apilamos los elementos verticalmente */
		justify-content: center; /* Ubica el contenido al final (inferior) */
		padding-bottom: 10%;

    }

    #inicio-principal h1 {
        font-size: 24px; /* Reduce el tamaño del título para móviles pequeños */

    }

    #inicio-principal .typing-effect #cursor-inicio {
        font-size: 24px; /* Reduce el tamaño del cursor */
    }

    #inicio-principal .CTA-boton {
        width: 90%; /* El botón ocupa casi todo el ancho */
        padding: 12px 24px; /* Aumenta un poco el padding vertical */
    }
}

/*--------------------------------------------------------------
>>>RESPONSIVE: INICIO-SOLUCIONES
--------------------------------------------------------------*/
  @media only screen and  (max-width: 900px) {
	#inicio-soluciones .texto-soluciones h2 {

		font-size: 24px; /* Ajusta el tamaño de la fuente */
		color:var(--navy); /* Establece el color del texto */
		text-align: center; /* Centra el texto horizontalmente */
		vertical-align: center; /* Alinea el texto en la parte superior */
	}
	#inicio-soluciones .logo-soluciones h2 {
		font-size: 40px; /* Ajusta el tamaño de la fuente */
		text-align: center; /* Centra el texto horizontalmente */
		vertical-align: center; /* Alinea el texto en la parte superior */
	  }
	.fila1-soluciones {
		display: flex;
		flex-direction: column; /* Apila las columnas verticalmente */
		gap: 10px; /* Reduce el espacio entre las columnas apiladas */
	  }
	.fila2-soluciones {
		display: flex;
		flex-direction: column; /* Apila las columnas verticalmente */
		gap: 10px; /* Reduce el espacio entre las columnas apiladas */
	  }
}
/*--------------------------------------------------------------
>>>RESPONSIVE: INICIO-BENEFICIOS
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
#inicio-beneficios .beneficio-1 h2,.beneficio-2 h2,.beneficio-3 h2,.beneficio-4 h2,.beneficio-5  h2 {

    font-weight: bold;
    font-size: 24px;
	margin-left: 5%;

}

#inicio-beneficios .beneficio-1 p,.beneficio-2 p,.beneficio-3 p,.beneficio-4 p,.beneficio-5   p {

    font-size: 14px;
	margin-left: 5%;
}

#inicio-beneficios .CTA-boton{

	width:90%;
	padding: 12px 24px; /* Aumenta un poco el padding vertical */
}

}

/*--------------------------------------------------------------
>>>RESPONSIVE: INICIO-PROCESO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {

	#inicio-proceso {
        height: auto; /* Ajusta la altura automáticamente según el contenido */
        padding: 20px 0; /* Añade un poco de padding vertical */
    }

    .fila-inicio-proceso {
        flex-direction: column; /* Apila las columnas verticalmente */
        gap: 10px; /* Reduce el espacio entre columnas apiladas */
    }

    .columna1-inicio-proceso,
    .columna2-inicio-proceso,
    .columna3-inicio-proceso,
    .columna4-inicio-proceso,
    .columna5-inicio-proceso {
        height: auto; /* Ajusta la altura automáticamente para cada columna */
        margin-bottom: 10px; /* Añade un margen inferior entre las columnas */
        padding: 20px; /* Añade un poco de padding dentro de cada columna */
        align-items: center; /* Centra el contenido de las columnas */
        text-align: center; /* Centra el texto dentro de las columnas */
    }


	.columna1-inicio-proceso .vc_column-inner,
    .columna2-inicio-proceso .vc_column-inner,
    .columna3-inicio-proceso .vc_column-inner,
    .columna4-inicio-proceso .vc_column-inner,
    .columna5-inicio-proceso .vc_column-inner {
        display: flex; /* Mantenemos flex para ordenar verticalmente */
        flex-direction: column; /* Apilamos los elementos verticalmente */
        align-items: center; /* Alineamos los elementos a la izquierda */
		
    }
	.columna1-inicio-proceso img,
    .columna2-inicio-proceso img,
    .columna3-inicio-proceso img,
    .columna4-inicio-proceso img,
    .columna5-inicio-proceso img {
        height: 150px; /* Ajusta la altura automáticamente para cada columna */
		width: 150px;
 
    }

    /* Ajustes específicos para las columnas que tenían alineación a la izquierda */
    .columna3-inicio-proceso,
    .columna4-inicio-proceso,
    .columna5-inicio-proceso {
        align-items: center; /* Centra el contenido */
    }

    #inicio-proceso h2 {
        font-size: 60px; /* Reduce el tamaño del título */
		text-align: center; /* Centra el contenido de las columnas */
    }

    #inicio-proceso h3 {
        font-size: 50px; /* Reduce el tamaño del subtítulo */
    }

    #inicio-proceso p {
        font-size: 16px; /* Reduce el tamaño del párrafo */
    }

	#inicio-proceso .CTA-boton{
	    width:90%;
		background-color: var(--yell);
		color:var(--white);
		border: none;
		border-radius: 32px;
		margin-left:5%;
		padding: 10px 20px;
		font-family: var(--titulo);
		font-weight: bold;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
		cursor: pointer; /* Para que el cursor cambie al pasar por encima */
		text-align: center;
		
    }
	#inicio-proceso .CTA-boton:hover {
		background-color: #FFA000; /* Un tono de amarillo más oscuro al pasar el ratón */
		transform: scale(1.05); /* Efecto de crecimiento */
		}
}


/*--------------------------------------------------------------
>>>RESPONSIVE: INICIO-CIFRAS
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	.fila-cifras {
	    display:flex;
	    justify-content: space-between ;
		flex-direction: row; /* Apila las columnas verticalmente */
		align-items: center; /* Centra las columnas horizontalmente */
	  }
	
	  .columna-cifra1, .columna-cifra2, .columna-cifra3, .columna-cifra4 {
		width: auto; /* Ocupan un ancho mayor en pantallas pequeñas */
		height: 100%; /* La altura se ajusta al contenido */
		margin-bottom: 10px; /* Espacio entre columnas apiladas */
		border-radius: 16px;
	  }
	
	  #inicio-cifras h2 {
		font-size: 16px; /* Reduce el tamaño del título */
	  }
	
	  #inicio-cifras p {
		font-size: 8px; /* Reduce el tamaño del párrafo */
	  }
	
	  .columna-cifra3, .columna-cifra4 {
		background-position: bottom center; /* Ajusta la posición de la imagen */
		background-size: 40px 40px;
		padding-bottom: 45px; /* Añade espacio para que no tape el texto */
	  }


}

/*--------------------------------------------------------------
>>>RESPONSIVE: INICIO-NOTICIAS
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	#inicio-noticias  .filaprincipal2-noticias {
		flex-direction: column; /* Apila las columnas verticalmente */
		align-items: center; /* Centra las columnas horizontalmente */
	  }
  .columna-noticia1 .fila1-noticia1,
  .columna-noticia1 .fila2-noticia1,
  .columna-noticia2 .fila1-noticia2,
  .columna-noticia2 .fila2-noticia2,
  .columna-noticia3 .fila1-noticia3,
  .columna-noticia3 .fila2-noticia3 {
    display: flex;
    align-items: center; /* Opcional: alinea verticalmente los elementos dentro de la fila */
    /* justify-content: space-between; /* Opcional: distribuye el espacio entre los elementos */
  }

	  #inicio-noticias .et1-noticia1 h3, #inicio-noticias .et2-noticia1 h3, #inicio-noticias .et3-noticia1 h3, #inicio-noticias .et1-noticia2 h3, #inicio-noticias .et2-noticia2 h3, #inicio-noticias .et3-noticia2 h3, #inicio-noticias .et1-noticia3 h3, #inicio-noticias .et2-noticia3 h3, #inicio-noticias .et3-noticia3 h3 {
		font-size: 9px; /* Reduce el tamaño de la fuente de las etiquetas */
		padding: 3% 5%;
		margin-top: 50px;
	  }
	
	  #inicio-noticias .clasearticulo-noticia1 h3, .logo-noticia1 h3, .clasearticulo-noticia2 h3, .logo-noticia2 h3, .clasearticulo-noticia3 h3, .logo-noticia3 h3 {
		font-size: 20px; /* Reduce el tamaño del título del artículo */
	  }
	
	  #inicio-noticias .titulo-noticia1 h3, .titulo-noticia2 h3, .titulo-noticia3 h3 {
		font-size: 20px; /* Reduce el tamaño del título principal de la noticia */
	  }
	
	  #inicio-noticias p {
		font-size: 14px; /* Reduce el tamaño de la fuente del párrafo */
		margin-bottom: 30px;
	  }
	
	  #inicio-noticias .ver-mas {
		width: 30%; /* Aumenta el ancho del botón "Ver más" en móviles */
		font-size: 14px;
	  }
	
	  #inicio-noticias .CTA-noticias-inicio {
		width: 80%; /* Ocupa más ancho en pantallas móviles */
		margin-left: 10%;
		font-size: 16px;
	  }
}

/*--------------------------------------------------------------
>>>RESPONSIVE: INICIO-LLAMADA
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	#inicio-llamada  h3 {
		font-size: 32px; /* Ajusta el tamaño de la fuente */

	 }
	

}

/*--------------------------------------------------------------
>>>RESPONSIVE: INICIO-MAPA
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	#inicio-mapa  h2 {
		font-size: 16px; /* Ajusta el tamaño de la fuente */

	 }
	 	#inicio-mapa  h3 {
		font-size: 10px; /* Ajusta el tamaño de la fuente */

	 }
	

}






/*--------------------------------------------------------------
>>>RESPONSIVE: RESIDENCIAL-PRINCIPAL
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	#residencial-principal h1{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }
	  #residencial-principal h2{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }

}

/*--------------------------------------------------------------
>>>RESPONSIVE: RESIDENCIAL-BANNER
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	.fila1-residencial-banner {
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 0; /* Removemos el espacio entre columnas */
	  }
	
	  .imagenes-residencial-banner {
		height: 50vh; /* El alto se ajusta al contenido */
		border-radius: 32px 32px 0 0; /* Border-radius solo en la parte superior */
		width: 100%; /* Ocupa todo el ancho */
	  }
	
	  #residencial-banner .edificios-residencial-banner img {
		position: relative; /* La imagen se posiciona después de la principal */
		bottom: -30px;
		right: -200px;
		width: 80%; /* Ocupa todo el ancho */
		height: 80%; /* El alto se ajusta al contenido */
		border:none;
	  }
	
	  .columnatextos-residencial-banner {
		height: auto; /* El alto se ajusta al contenido */
		border-radius: 0 0 32px 32px; /* Border-radius solo en la parte inferior */
		width: 100%; /* Ocupa todo el ancho */
	  }
	
	  #residencial-banner .fila-a-residencial-banner h2 {
		font-size: 28px;
		text-align: center; /* Centramos el texto en móviles */
	  }
	
	  #residencial-banner .fila-a-residencial-banner h3 {
		font-size: 18px;
		text-align: start; /* Centramos el texto en móviles */
		padding: 15px;
	  }
	
	  .fila-b-residencial-banner {
		position: relative; /* Aseguramos la posición relativa */
		bottom: auto;
		height: auto; /* El alto se ajusta al contenido */
		border-top: none; /* Removemos el borde superior */
		border-radius: 0 0 32px 32px; /* Border-radius inferior */
		flex-direction: column; /* Apilamos el texto y el botón */
		align-items: center; /* Centramos los elementos */
		width: 100%; /* Ocupa todo el ancho */
	  }
	
	  #residencial-banner .fila-b-residencial-banner h3 {
		text-align: start;
		padding: 15px;
	  }
	
	  #residencial-banner .CTA-boton {
		width: 80%; /* El botón ocupa más ancho en móviles */
		margin: 20px auto; /* Centramos el botón */
	  }
}


/*--------------------------------------------------------------
>>>RESPONSIVE: RESIDENCIAL-CONECTADO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	.fila1-residencial-conectado {
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	   }
	   #residencial-conectado .titulo-residencial-conectado h2{
		font-size: 22px; /* Ajusta el tamaño de la fuente */
       }
	   #residencial-conectado .textoitems-residencial-conectado h3{
		font-size: 14px; /* Ajusta el tamaño de la fuente */
	  }
	  #residencial-conectado .filaitem1-residencial-conectado {
		width:100%;
		height: auto; /* Ajusta la altura automáticamente según el contenido */
		flex-direction: row; /* Coloca los elementos en fila en lugar de columna */
		align-items: flex-end; /* Alineamos el texto e ícono a la izquierda */
		justify-content: space-around;
		padding: 10px; /* Añade un poco de padding para mayor espacio táctil */
		border-radius: 16px; /* Reduce el radio del borde */
	
	  }
	  #residencial-conectado .columna1item1-residencial-conectado{
		width:80%;
	  }
	  #residencial-conectado .columna2item1-residencial-conectado{
		width:20%;
	  }
	
	  #residencial-conectado .ic1-residencial-conectado img,.ic2-residencial-conectado img,.ic3-residencial-conectado img,.ic4-residencial-conectado img {
		height:50px;
		width:50px;
		box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
		border-radius: 32px;
	}
	#residencial-conectado .imagen-residencial-conectado img {
		border: 10px solid white;

	  }
	  .fila-etiquetas-residencial-conectado {
		bottom: 0; /* Se pega a la parte inferior */
		right: 20px; /* Se pega a la parte derecha */

	   }
	
	
}

/*--------------------------------------------------------------
>>>RESPONSIVE: RESIDENCIAL-HIBRIDO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	.fila1-residencial-hibrido {
		flex-direction: column-reverse; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	   }
	   #residencial-hibrido .titulo-residencial-hibrido h2{
		font-size: 22px; /* Ajusta el tamaño de la fuente */
       }
	   #residencial-hibrido .textoitems-residencial-hibrido h3{
		font-size: 14px; /* Ajusta el tamaño de la fuente */
	  }
	  #residencial-hibrido .filaitem1-residencial-hibrido {
		width:100%;
		height: auto; /* Ajusta la altura automáticamente según el contenido */
		flex-direction: row; /* Coloca los elementos en fila en lugar de columna */
		align-items: flex-end; /* Alineamos el texto e ícono a la izquierda */
		justify-content: space-around;
		padding: 10px; /* Añade un poco de padding para mayor espacio táctil */
		border-radius: 16px; /* Reduce el radio del borde */
	
	  }
	  #residencial-hibrido .columna1item1-residencial-hibrido{
		width:80%;
	  }
	  #residencial-hibrido .columna2item1-residencial-hibrido{
		width:20%;
	  }
	
	  #residencial-hibrido .ic1-residencial-hibrido img,.ic2-residencial-hibrido img,.ic3-residencial-hibrido img,.ic4-residencial-hibrido img {
		height:50px;
		width:50px;
		box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
		border-radius: 32px;
	}
	#residencial-hibrido .imagen-residencial-hibrido img {
		border: 10px solid white;

	  }
	  .fila-etiquetas-residencial-hibrido {
		bottom: 0; /* Se pega a la parte inferior */
		left: 20px; /* Se pega a la parte derecha */
	   }
	
}

/*--------------------------------------------------------------
>>>RESPONSIVE: RESIDENCIAL-LLAMADA
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
    #residencial-llamada{
        object-position: 30% 80%;
    }
	#residencial-llamada  .resaltado, #residencial-llamada  .resaltado1 {
		font-size: 32px; /* Ajusta el tamaño de la fuente */
		

	 }
	

}


/*--------------------------------------------------------------
>>>RESPONSIVE: COMERCIAL-PRINCIPAL
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	#comercial-principal h1{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }
	  #comercial-principal h2{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }

}

/*--------------------------------------------------------------
>>>RESPONSIVE: COMERCIAL-BANNER
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	.fila1-comercial-banner {
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 0; /* Removemos el espacio entre columnas */
	  }
	
	  .imagenes-comercial-banner {
		height: 50vh; /* El alto se ajusta al contenido */
		border-radius: 32px 32px 0 0; /* Border-radius solo en la parte superior */
		width: 100%; /* Ocupa todo el ancho */
	  }
	
	  #comercial-banner .industrial-comercial-banner img {
		position: relative; /* La imagen se posiciona después de la principal */
		bottom: -30px;
		right: -320px;
		width: 50%; /* Ocupa todo el ancho */
		height: 50%; /* El alto se ajusta al contenido */
		border:none;
	  }
	
	  .columnatextos-comercial-banner {
		height: auto; /* El alto se ajusta al contenido */
		border-radius: 0 0 32px 32px; /* Border-radius solo en la parte inferior */
		width: 100%; /* Ocupa todo el ancho */
	  }
	
	  #comercial-banner .fila-a-comercial-banner h2 {
		font-size: 28px;
		text-align: center; /* Centramos el texto en móviles */
	  }
	
	  #comercial-banner .fila-a-comercial-banner h3 {
		font-size: 18px;
		text-align: start; /* Centramos el texto en móviles */
		padding: 15px;
	  }
	
	  .fila-b-comercial-banner {
		position: relative; /* Aseguramos la posición relativa */
		bottom: auto;
		height: auto; /* El alto se ajusta al contenido */
		border-top: none; /* Removemos el borde superior */
		border-radius: 0 0 32px 32px; /* Border-radius inferior */
		flex-direction: column; /* Apilamos el texto y el botón */
		align-items: center; /* Centramos los elementos */
		width: 100%; /* Ocupa todo el ancho */
	  }
	
	  #comercial-banner .fila-b-comercial-banner h3 {
		text-align: start;
		padding: 15px;
	  }
	
	  #comercial-banner .CTA-boton {
		width: 80%; /* El botón ocupa más ancho en móviles */
		margin: 20px auto; /* Centramos el botón */
	  }
}


/*--------------------------------------------------------------
>>>RESPONSIVE: COMERCIAL-CONECTADO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	.fila1-comercial-conectado {
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	   }
	   #comercial-conectado .titulo-comercial-conectado h2{
		font-size: 22px; /* Ajusta el tamaño de la fuente */
       }
	   #comercial-conectado .textoitems-comercial-conectado h3{
		font-size: 14px; /* Ajusta el tamaño de la fuente */
	  }
	  #comercial-conectado .filaitem1-comercial-conectado {
		width:100%;
		height: auto; /* Ajusta la altura automáticamente según el contenido */
		flex-direction: row; /* Coloca los elementos en fila en lugar de columna */
		align-items: flex-end; /* Alineamos el texto e ícono a la izquierda */
		justify-content: space-around;
		padding: 10px; /* Añade un poco de padding para mayor espacio táctil */
		border-radius: 16px; /* Reduce el radio del borde */
	
	  }
	  #comercial-conectado .columna1item1-comercial-conectado{
		width:80%;
	  }
	  #comercial-conectado .columna2item1-comercial-conectado{
		width:20%;
	  }
	
	  #comercial-conectado .ic1-comercial-conectado img,.ic2-comercial-conectado img,.ic3-comercial-conectado img,.ic4-comercial-conectado img {
		height:50px;
		width:50px;
		box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
		border-radius: 32px;
	}
	#comercial-conectado .imagen-comercial-conectado img {
		border: 10px solid white;

	  }
	  .fila-etiquetas-comercial-conectado {
		bottom: 0; /* Se pega a la parte inferior */
		right: 20px; /* Se pega a la parte derecha */

	   }
	
	
}

/*--------------------------------------------------------------
>>>RESPONSIVE: COMERCIAL-HIBRIDO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	.fila1-comercial-hibrido {
		flex-direction: column-reverse; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	   }
	   #comercial-hibrido .titulo-comercial-hibrido h2{
		font-size: 22px; /* Ajusta el tamaño de la fuente */
       }
	   #comercial-hibrido .textoitems-comercial-hibrido h3{
		font-size: 14px; /* Ajusta el tamaño de la fuente */
	  }
	  #comercial-hibrido .filaitem1-comercial-hibrido {
		width:100%;
		height: auto; /* Ajusta la altura automáticamente según el contenido */
		flex-direction: row; /* Coloca los elementos en fila en lugar de columna */
		align-items: flex-end; /* Alineamos el texto e ícono a la izquierda */
		justify-content: space-around;
		padding: 10px; /* Añade un poco de padding para mayor espacio táctil */
		border-radius: 16px; /* Reduce el radio del borde */
	
	  }
	  #comercial-hibrido .columna1item1-comercial-hibrido{
		width:80%;
	  }
	  #comercial-hibrido .columna2item1-comercial-hibrido{
		width:20%;
	  }
	
	  #comercial-hibrido .ic1-comercial-hibrido img,.ic2-comercial-hibrido img,.ic3-comercial-hibrido img,.ic4-comercial-hibrido img {
		height:50px;
		width:50px;
		box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
		border-radius: 32px;
	}
	#comercial-hibrido .imagen-comercial-hibrido img {
		border: 10px solid white;

	  }
	  .fila-etiquetas-comercial-hibrido {
		bottom: 0; /* Se pega a la parte inferior */
		left: 20px; /* Se pega a la parte derecha */
	   }
	
}


/*--------------------------------------------------------------
>>>RESPONSIVE: COMERCIAL-LLAMADA
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
    #comercial-llamada{
            object-position: left bottom;
            background-size: 100% 100%;
            background-repeat: no-repeat;
    }
	#comercial-llamada  .resaltado {
	    top: -20px;
        left: 150px;
		font-size: 16px; /* Ajusta el tamaño de la fuente */
		

	 }
	  #comercial-llamada  .resaltado1 {
	    top: -20px;
        left: 150px;
		font-size: 16px; /* Ajusta el tamaño de la fuente */
		
	 }
	 
	 	#comercial-llamada h4 {
	    top: 40px;
        left: 20px;
		font-size: 20px; /* Ajusta el tamaño de la fuente */
		
	 }
	

}


/*--------------------------------------------------------------
>>>RESPONSIVE: AISLADOS-PRINCIPAL
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	#aislados-principal h1{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }
	  #aislados-principal h2{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }

}

/*--------------------------------------------------------------
>>>RESPONSIVE: AISLADOS-BANNER
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	.fila1-aislados-banner {
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 0; /* Removemos el espacio entre columnas */
	  }
	
	  .imagenes-aislados-banner {
		height: 50vh; /* El alto se ajusta al contenido */
		border-radius: 32px 32px 0 0; /* Border-radius solo en la parte superior */
		width: 100%; /* Ocupa todo el ancho */
	  }
	
	  #aislados-banner .baterias-aislados-banner img {
		position: relative; /* La imagen se posiciona después de la principal */
		bottom: -30px;
		right: -250px;
		width: 50%; /* Ocupa todo el ancho */
		height: 50%; /* El alto se ajusta al contenido */
		border:none;
	  }
	
	  .columnatextos-aislados-banner {
		height: auto; /* El alto se ajusta al contenido */
		border-radius: 0 0 32px 32px; /* Border-radius solo en la parte inferior */
		width: 100%; /* Ocupa todo el ancho */
	  }
	
	  #aislados-banner .fila-a-aislados-banner h2 {
		font-size: 28px;
		text-align: center; /* Centramos el texto en móviles */
	  }
	
	  #aislados-banner .fila-a-aislados-banner h3 {
		font-size: 18px;
		text-align: start; /* Centramos el texto en móviles */
		padding: 15px;
	  }
	
	  .fila-b-aislados-banner {
		position: relative; /* Aseguramos la posición relativa */
		bottom: auto;
		height: auto; /* El alto se ajusta al contenido */
		border-top: none; /* Removemos el borde superior */
		border-radius: 0 0 32px 32px; /* Border-radius inferior */
		flex-direction: column; /* Apilamos el texto y el botón */
		align-items: center; /* Centramos los elementos */
		width: 100%; /* Ocupa todo el ancho */
	  }
	
	  #aislados-banner .fila-b-aislados-banner h3 {
		text-align: start;
		padding: 15px;
	  }
	
	  #aislados-banner .CTA-boton {
		width: 80%; /* El botón ocupa más ancho en móviles */
		margin: 20px auto; /* Centramos el botón */
	  }
}


/*--------------------------------------------------------------
>>>RESPONSIVE: AISLADOS-CONECTADO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	.fila1-aislados-conectado {
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	   }
	   #aislados-conectado .titulo-aislados-conectado h2{
		font-size: 22px; /* Ajusta el tamaño de la fuente */
       }
	   #aislados-conectado .textoitems-aislados-conectado h3{
		font-size: 14px; /* Ajusta el tamaño de la fuente */
	  }
	  #aislados-conectado .filaitem1-aislados-conectado {
		width:100%;
		height: auto; /* Ajusta la altura automáticamente según el contenido */
		flex-direction: row; /* Coloca los elementos en fila en lugar de columna */
		align-items: flex-end; /* Alineamos el texto e ícono a la izquierda */
		justify-content: space-around;
		padding: 10px; /* Añade un poco de padding para mayor espacio táctil */
		border-radius: 16px; /* Reduce el radio del borde */
	
	  }
	  #aislados-conectado .columna1item1-aislados-conectado{
		width:80%;
	  }
	  #aislados-conectado .columna2item1-aislados-conectado{
		width:20%;
	  }
	
	  #aislados-conectado .ic1-aislados-conectado img,.ic2-aislados-conectado img,.ic3-aislados-conectado img,.ic4-aislados-conectado img {
		height:50px;
		width:50px;
		box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
		border-radius: 32px;
	}
	#aislados-conectado .imagen-aislados-conectado img {
		border: 10px solid white;

	  }
	  .fila-etiquetas-aislados-conectado {
		bottom: 0; /* Se pega a la parte inferior */
		right: 20px; /* Se pega a la parte derecha */

	   }
	
	
}

/*--------------------------------------------------------------
>>>RESPONSIVE: AISLADOS-HIBRIDO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	.fila1-aislados-hibrido {
		flex-direction: column-reverse; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	   }
	   #aislados-hibrido .titulo-aislados-hibrido h2{
		font-size: 22px; /* Ajusta el tamaño de la fuente */
       }
	   #aislados-hibrido .textoitems-aislados-hibrido h3{
		font-size: 14px; /* Ajusta el tamaño de la fuente */
	  }
	  #aislados-hibrido .filaitem1-aislados-hibrido {
		width:100%;
		height: auto; /* Ajusta la altura automáticamente según el contenido */
		flex-direction: row; /* Coloca los elementos en fila en lugar de columna */
		align-items: flex-end; /* Alineamos el texto e ícono a la izquierda */
		justify-content: space-around;
		padding: 10px; /* Añade un poco de padding para mayor espacio táctil */
		border-radius: 16px; /* Reduce el radio del borde */
	
	  }
	  #aislados-hibrido .columna1item1-aislados-hibrido{
		width:80%;
	  }
	  #aislados-hibrido .columna2item1-aislados-hibrido{
		width:20%;
	  }
	
	  #aislados-hibrido .ic1-aislados-hibrido img,.ic2-aislados-hibrido img,.ic3-aislados-hibrido img,.ic4-aislados-hibrido img {
		height:50px;
		width:50px;
		box-shadow: 0px 4px 5px 4px rgba(0, 0, 0, 0.25);
		border-radius: 32px;
	}
	#aislados-hibrido .imagen-aislados-hibrido img {
		border: 10px solid white;

	  }
	  .fila-etiquetas-aislados-hibrido {
		bottom: 0; /* Se pega a la parte inferior */
		left: 20px; /* Se pega a la parte derecha */
	   }
	
}

/*--------------------------------------------------------------
>>>RESPONSIVE: AISLADOS-LLAMADA
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
    #aislados-llamada{
            object-position: left bottom;
            background-size: 100% 100%;
            background-repeat: no-repeat;
    }
	#aislados-llamada  .resaltado {
		font-size: 28px; /* Ajusta el tamaño de la fuente */
		

	 }
	  #aislados-llamada  .resaltado1 {
		font-size: 24px; /* Ajusta el tamaño de la fuente */
		

	 }
	

}


/*--------------------------------------------------------------
>>>RESPONSIVE: MANTENIMIENTO-PRINCIPAL
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	#mantenimiento-principal h1{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }
	  #mantenimiento-principal h2{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }
}
/*--------------------------------------------------------------
>>>RESPONSIVE: MANTENIMIENTO-LIMPIEZA
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	.fila1-mantenimiento-limpieza {
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	   }

	   .columnatextos-mantenimiento-limpieza  {
		height: 50vh; /* Ajusta la altura */
		
	  }
	.imagenes-mantenimiento-limpieza {
        height: 50vh; /* Reduce aún más la altura */
    }

    #mantenimiento-limpieza .paneles-mantenimiento-limpieza img {
		height: 50%; /* Aumenta aún más el ancho de la imagen */
        width: 50%; /* Aumenta aún más el ancho de la imagen */
        border: 10px solid white; /* Reduce el ancho del borde */
        border-radius: 20px; /* Reduce el radio del borde */
    }

    #mantenimiento-limpieza h2 {
        font-size: 24px; /* Reduce aún más el tamaño de la fuente */
    }

    #mantenimiento-limpieza p {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente */
    }

    #mantenimiento-limpieza .CTA-boton {
        width: 90%; /* Aumenta aún más el ancho */
		margin-left: 0%;
        padding: 10px 20px; /* Reduce aún más el padding */
    }

}

/*--------------------------------------------------------------
>>>RESPONSIVE: MANTENIMIENTO-PREVENTIVO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	.fila1-mantenimiento-preventivo {
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	   }
	.imagenes-mantenimiento-preventivo {
        height: 50vh; /* Reduce aún más la altura */
    }
	.columnatextos-mantenimiento-preventivo  {
		height: 50vh; /* Ajusta la altura */
		
	  }


    #mantenimiento-preventivo .termografia-mantenimiento-preventivo img {
		height: 50%; /* Aumenta aún más el ancho de la imagen */
        width: 50%; /* Aumenta aún más el ancho de la imagen */
        border: 10px solid white; /* Reduce el ancho del borde */
        border-radius: 20px; /* Reduce el radio del borde */
    }

    #mantenimiento-preventivo h2 {
        font-size: 24px; /* Reduce aún más el tamaño de la fuente */
    }

    #mantenimiento-preventivo p {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente */
    }

    #mantenimiento-preventivo .CTA-boton {
        width: 90%; /* Aumenta aún más el ancho */
		margin-left: 0%;
        padding: 10px 20px; /* Reduce aún más el padding */
    }

}

/*--------------------------------------------------------------
>>>RESPONSIVE: MANTENIMIENTO-CORRECTIVO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	.fila1-mantenimiento-correctivo {
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	   }
	.imagenes-mantenimiento-correctivo {
        height: 50vh; /* Reduce aún más la altura */
    }
	.columnatextos-mantenimiento-correctivo  {
		height: 50vh; /* Ajusta la altura */
		
	  }

    #mantenimiento-correctivo .curva-mantenimiento-correctivo img {
		height: 50%; /* Aumenta aún más el ancho de la imagen */
        width: 50%; /* Aumenta aún más el ancho de la imagen */
        border: 10px solid white; /* Reduce el ancho del borde */
        border-radius: 20px; /* Reduce el radio del borde */
    }

    #mantenimiento-correctivo h2 {
        font-size: 24px; /* Reduce aún más el tamaño de la fuente */
    }

    #mantenimiento-correctivo p {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente */
    }

    #mantenimiento-correctivo .CTA-boton {
        width: 90%; /* Aumenta aún más el ancho */
		margin-left: 0%;
        padding: 10px 20px; /* Reduce aún más el padding */
    }

}

/*--------------------------------------------------------------
>>>RESPONSIVE: MANTENIMIENTO-LLAMADA
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
    #mantenimiento-llamada{
            object-position: left bottom;
            background-size: 100% 100%;
            background-repeat: no-repeat;
    }
	#mantenimiento-llamada  .resaltado {
	    top: -20px;
        left: 150px;
		font-size: 16px; /* Ajusta el tamaño de la fuente */
		

	 }
	  #mantenimiento-llamada  .resaltado1 {
	    top: -20px;
        left: 150px;
		font-size: 16px; /* Ajusta el tamaño de la fuente */
		
	 }
	 
	 	#mantenimiento-llamada h4 {
	    top: 40px;
        left: 20px;
		font-size: 20px; /* Ajusta el tamaño de la fuente */
		
	 }
	

}


/*--------------------------------------------------------------
>>>RESPONSIVE: SERVICIOS-PRINCIPAL
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	#servicios-principal h1{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }
	  #servicios-principal h2{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }

}

/*--------------------------------------------------------------
>>>RESPONSIVE: SERVICIOS-PORTAFOLIO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	#servicios-portafolio {
		height: 120vh; /* Ajusta la altura */

	  }
	.fila-servicios-portafolio{
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	  }

}
/*--------------------------------------------------------------
>>>RESPONSIVE: SERVICIOS-DISEÑO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 

	.fila1-servicios-diseño{
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	  }

}

	  /*--------------------------------------------------------------
>>>RESPONSIVE: SERVICIOS-DISEÑO1
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 

	.fila1-servicios-diseño-1{
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	  }
	  #servicios-diseño-1 .CTA-boton{
		width:90%;
		margin-left: 0%;
	}

}

/*--------------------------------------------------------------
>>>RESPONSIVE: SERVICIOS-RETIE
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 

	.fila1-servicios-retie{
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	  }
	  #servicios-retie .CTA-boton{
		width:90%;
		margin-left: 0%;
	}


}

/*--------------------------------------------------------------
>>>RESPONSIVE: SERVICIOS-UPME
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 

	.fila1-servicios-upme{
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	  }

	  #servicios-upme .CTA-boton{
		width:90%;
		margin-left: 0%;
	}

}
/*--------------------------------------------------------------
>>>RESPONSIVE: SERVICIOS-MANTENIMIENTO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 

	.fila1-servicios-mantenimiento{
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	  }

	  #servicios-mantenimiento .CTA-boton{
		width:90%;
		margin-left: 0%;
	}

}

/*--------------------------------------------------------------
>>>RESPONSIVE: SERVICIOS-LLAMADA
--------------------------------------------------------------*/


@media only screen and  (max-width: 900px) {
	#servicios-llamada  h3 {
		font-size: 32px; /* Ajusta el tamaño de la fuente */

	 }
	

}



/*--------------------------------------------------------------
>>>RESPONSIVE: NOSOTROS-PRINCIPAL
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	#nosotros-principal h1{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }
	  #nosotros-principal h2{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }

}

/*--------------------------------------------------------------
>>>RESPONSIVE: NOSOTROS-OBJETO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	#nosotros-objeto  h2{

		font-size: 24px; /* Ajusta el tamaño de la fuente */

	  }

}


/*--------------------------------------------------------------
>>>RESPONSIVE: NOSOTROS-ESTRATEGIA
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 

	#nosotros-estrategia {
		height: 100vh; /* Ajusta la altura */
		border-radius: 32px;
	  }

	.fila1-nosotros-estrategia{
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	  }
}

/*--------------------------------------------------------------
>>>RESPONSIVE: NOSOTROS-PILARES
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 

	#nosotros-pilares {
		height: 240vh; /* Ajusta la altura */
		border-radius: 32px;
	  }

	.fila2-nosotros-pilares{
		flex-direction: column; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
	  }
}

/*--------------------------------------------------------------
>>>RESPONSIVE: NOSOTROS-LLAMADA
--------------------------------------------------------------*/


@media only screen and  (max-width: 900px) {
	#nosotros-llamada  h3 {
		font-size: 32px; /* Ajusta el tamaño de la fuente */

	 }
	

}



/*--------------------------------------------------------------
>>>RESPONSIVE: NOTICIAS-PRINCIPAL
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
	#noticias-principal h1{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }
	  #noticias-principal h2{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }

}
/*--------------------------------------------------------------
>>>RESPONSIVE: NOTICIAS-BANNER
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) { 
    
    #noticias-banner {
   
	background-size: 100% 25%;
	background-position: top center;

}
	#noticias-banner .fila1-noticias-banner {

		height: 35vh; /* Permite que la altura se ajuste proporcionalmente */

	}
	.fila1-noticiaprincipal-banner{
		display: flex;
		height: 7.5vh;
	}
		
	.fila2-noticiaprincipal-banner{
		display: flex;
			height:7.5vh;
	}
	.fila3-noticiaprincipal-banner{
				height: 20vh;
				display: flex;
				align-items: flex-end;
   }
	
	 #noticias-banner .et1-noticiaprincipal h3,.et2-noticiaprincipal h3,.et3-noticiaprincipal h3 {
		            width:40%;
					font-size: 5px; /* Ajusta el tamaño de la fuente */
					border:solid;
					border-width:1px;
					padding: 2.5px 2.5px;
					color: var(--white);
					margin-top:10px;
					
				
				  }

				  #noticias-banner .clasearticulo-noticiaprincipal h3{
					font-size: 1em; /* Ajusta el tamaño de la fuente */
	               }
		
				   #noticias-banner .resaltado-princ {
					font-size: 1em;
				  }
				  #noticias-banner .resaltado1-princ {
					font-size: 1em;
				  }
				  #noticias-banner .titulo-noticiaprincipal h3 {

					font-size: 16px; /* Ajusta el tamaño de la fuente */
				  }
				  #noticias-banner .parrafo-noticiaprincipal p {
					font-size: 8px; /* Ajusta el tamaño de la fuente */				
				  }
	




				  #noticias-banner .fila2-noticias-banner {
				     display:flex;
				     flex-direction:column;
				  height: 150vh; /* Permite que la altura se ajuste proporcionalmente */
                  gap: 2px; /* Espacio de 20px entre columnas */
				}
				
                  #noticias-banner .fila2-noticias-banner  {
                   /* Estilos para cada noticia individual */
                   margin-top: 5%; /* Espacio entre noticias */
                   }

				   #noticias-banner .columna-noticia1 {
					height:50vh;
					box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5);
					border-radius: 8px;
				  }
				  #noticias-banner .columna-noticia2 {
					height:50vh;
					box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5);
					border-radius: 8px;
				  }
				  #noticias-banner .columna-noticia3 {
					height:50vh;
					box-shadow: -5px 4px 10px 2px rgba(217, 217, 217, 0.5);
					border-radius: 8px;
				  }

				  #noticias-banner .fila1-noticia1,#noticias-banner .fila1-noticia2,#noticias-banner .fila1-noticia3 {
					display:flex;
					height: 2.5vh; /* Ajusta la altura */
				  }
				  #noticias-banner .fila2-noticia1,#noticias-banner .fila2-noticia2,#noticias-banner .fila2-noticia3 {
					display:flex;
					height: 17.5vh; /* Ajusta la altura */
				  }
				  #noticias-banner .fila3-noticia1,#noticias-banner .fila3-noticia2,#noticias-banner .fila3-noticia3 {
					display: flex;
					height: 20vh; /* Ajusta la altura */
				  }

				  #noticias-banner .et1-noticia1 h3,.et2-noticia1 h3,.et3-noticia1 h3,.et1-noticia2 h3,.et2-noticia2 h3,.et3-noticia2 h3,.et1-noticia3 h3,.et2-noticia3 h3,.et3-noticia3 h3 {
					width:100%;
					font-size: 5px; /* Ajusta el tamaño de la fuente */
					border:solid;
					border-width:1px;
					border-radius: 4px; 
					padding: 2px 1px;
					margin-top:50px;				
				  }
				  #noticias-banner .clasearticulo-noticia1 h3,.clasearticulo-noticia2 h3,.clasearticulo-noticia3 h3{

					font-size: 1em; /* Ajusta el tamaño de la fuente */
				  }
				  #noticias-banner .resaltado {
					font-size: 1em; /* Ajusta el tamaño de la fuente */

				  }
				  #noticias-banner .resaltado1 {
					font-size: 1em; /* Ajusta el tamaño de la fuente */

				  }
				  #noticias-banner .titulo-noticia1 h3,.titulo-noticia2 h3,.titulo-noticia3 h3 {
					margin-top: 50px;

					font-size: 16px; /* Ajusta el tamaño de la fuente */
				  }
				  #noticias-banner p {
					height: 25%;
					font-size: 12px; /* Ajusta el tamaño de la fuente */
					margin-bottom: 25px;				
				
				  }

				  #noticias-banner .ver-mas {
				  width: 40%; /* Ancho fijo del botón (ajusta según necesites) */
				  font-size: 12px; /* Ajusta el tamaño de la fuente */
				  margin-bottom: -30px;
				}

}

/*--------------------------------------------------------------
>>>RESPONSIVE: NOTICIAS-LLAMADA
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	#noticias-llamada  h3 {
		font-size: 32px; /* Ajusta el tamaño de la fuente */

	 }
	

}



/*--------------------------------------------------------------
>>>RESPONSIVE: CONTACTANOS-PRINCIPAL
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	#contactanos-principal h1{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }
	  #contactanos-principal h2{
		font-size: 24px; /* Ajusta el tamaño de la fuente */
	  }


}

/*--------------------------------------------------------------
>>>RESPONSIVE: CONTACTANOS-FORMULARIO
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	.fila-contactanos-formulario{
		flex-direction: column-reverse; /* Apilamos las columnas verticalmente */
		gap: 50px; /* Removemos el espacio entre columnas */
		align-items: center;
		margin-bottom: 0;
	  }

	  #contactanos-formulario .columna1-form {

		height: 50%;
		width:100%;
		margin-bottom: 20px;
		object-position: 50% 30%; /* Desplaza el video ligeramente a la izquierda */ /* Desplaza el video ligeramente a la izquierda */
	
	}

	  #contactanos-formulario .wpforms-form button[type="submit"] {
        width: 90%;
		margin-left: 0%;
		
	}


}

/*--------------------------------------------------------------
>>>RESPONSIVE: CONTACTANONS-DATOS
--------------------------------------------------------------*/
@media only screen and  (max-width: 900px) {
	#contactanos-datos{
		height:80vh;
	}
	.fila-contactanos-datos {
		display: flex;
		flex-direction: column; /* Mantiene las columnas principales apiladas */
	  }
	
	  .columna1-contactanos-datos,
	  .columna2-contactanos-datos,
	  .columna3-contactanos-datos {
		width: 100% !important;
		margin-bottom: 20px;
		text-align: center; /* Centra el título de cada sección */
	  }
	
	  .columna1-contactanos-datos h2,
	  .columna2-contactanos-datos h2,
	  .columna3-contactanos-datos h2 {
		text-align: center;
	  }
	
	  /* Estilos específicos para la sección de Contacto */
	  .columna1-contactanos-datos .fila-contacto-contactanos-datos {
		display: flex; /* Activa flexbox para la imagen y el teléfono */
		align-items: center; /* Alinea verticalmente la imagen y el teléfono */
		width: 100%; /* Asegura que la fila interna ocupe todo el ancho */
	  }
	
	  .columna1-contactanos-datos .fila-contacto-contactanos-datos > .wpb_column_inner {
		width: 50% !important; /* Cada columna interna ocupa la mitad del ancho */
		text-align: left; /* Alinea el contenido de cada columna interna a la izquierda */
	  }
	
	  /* Centrar la imagen dentro de su columna */
	  .columna1-contactanos-datos .fila-contacto-contactanos-datos > .wpb_column_inner:first-child {
		text-align: center;
	  }
	
	  /* Ajustes para el texto del teléfono */
	  .columna1-contactanos-datos .fila-contacto-contactanos-datos > .wpb_column_inner:last-child {
		padding-left: 10px; /* Agrega un pequeño espacio entre la imagen y el texto */
	  }
	
	  /* Estilos específicos para la sección de Whatsapp */
	  .columna2-contactanos-datos .fila-whatsapp-contactanos-datos {
		display: flex; /* Activa flexbox para la imagen y el teléfono */
		align-items: center; /* Alinea verticalmente la imagen y el teléfono */
		width: 100%; /* Asegura que la fila interna ocupe todo el ancho */
	  }
	
	  .columna2-contactanos-datos .fila-whatsapp-contactanos-datos > .wpb_column_inner {
		width: 50% !important; /* Cada columna interna ocupa la mitad del ancho */
		text-align: left; /* Alinea el contenido de cada columna interna a la izquierda */
	  }
	
	  /* Centrar la imagen dentro de su columna */
	  .columna2-contactanos-datos .fila-whatsapp-contactanos-datos > .wpb_column_inner:first-child {
		text-align: center;
	  }
	
	  /* Ajustes para el texto del teléfono */
	  .columna2-contactanos-datos .fila-whatsapp-contactanos-datos > .wpb_column_inner:last-child {
		padding-left: 10px; /* Agrega un pequeño espacio entre la imagen y el texto */
	  }
	
	  /* Estilos específicos para la sección de Redes sociales */
	  .columna3-contactanos-datos .fila-media-contactanos-datos {
		display: flex; /* Activa flexbox para las imágenes de redes sociales */
		justify-content: center; /* Centra horizontalmente las imágenes */
		width: 100%; /* Asegura que la fila interna ocupe todo el ancho */
	  }
	
	  .columna3-contactanos-datos .fila-media-contactanos-datos > .wpb_column_inner {
		width: 25% !important; /* Cada columna interna ocupa el 25% del ancho */
		text-align: center; /* Centra las imágenes dentro de cada columna */
		margin-bottom: 10px; /* Espacio entre las imágenes (opcional) */
	  }
	
	  .columna3-contactanos-datos .fila-media-contactanos-datos > .wpb_column_inner:last-child {
		margin-bottom: 0; /* Elimina el margen inferior de la última imagen (opcional) */
	  }
	
	  .columna3-contactanos-datos .fila-media-contactanos-datos > .wpb_column_inner img {
		max-width: 100%; /* Asegura que las imágenes no se desborden de su contenedor */
		height: auto;
		display: inline-block; /* Permite el centrado con text-align */
	  }
	  
}


/*--------------------------------------------------------------
>>>ENTRADAS
--------------------------------------------------------------*/

.tags {
    margin-top: 20px; /* Espacio superior */
    margin-bottom: 20px; /* Espacio inferior */
    padding: 10px 0; /* Relleno superior e inferior, sin relleno lateral */
    border-top: 1px solid #eee; /* Línea divisoria superior sutil */
    border-bottom: 1px solid #eee; /* Línea divisoria inferior sutil */
    font-size: 0.9em; /* Tamaño de fuente ligeramente menor */
}

.tags a {
    display: inline-block; /* Permite aplicar padding y margin */
    background-color: #f0f0f0; /* Fondo gris claro para las etiquetas */
    color: #333; /* Color de texto oscuro */
    padding: 5px 10px; /* Relleno dentro de cada etiqueta */
    margin: 0 5px 5px 0; /* Margen entre etiquetas (derecha e inferior) */
    border-radius: 3px; /* Bordes ligeramente redondeados */
    text-decoration: none; /* Quita el subrayado del enlace */
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
}

.tags a:hover {
    background-color: #ddd; /* Fondo un poco más oscuro al pasar el ratón */
    color: #000; /* Color de texto más oscuro al pasar el ratón */
}

/* Quitar la coma si está directamente después del enlace (puede variar dependiendo de cómo WP genera el HTML) */
/* Si las comas están generadas entre los <a>, este estilo puede no funcionar. */
/* En ese caso, necesitarías ajustar la estructura HTML o usar JavaScript. */
/* Suponiendo que la coma es texto plano inmediatamente después del </a> */
.tags a + text {
    display: none; /* Oculta el texto (la coma) */
}


/* Estilos para la sección de Artículos Relacionados */
.related-articles {
    margin-top: 30px; /* Espacio superior */
    padding: 20px; /* Relleno alrededor de la sección */
    border: 1px solid #eee; /* Borde sutil alrededor de la sección */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    background-color: #f9f9f9; /* Fondo ligeramente gris */
}

.related-articles h3 {
    margin-top: 0; /* Elimina el margen superior del título */
    color: #555; /* Color de título un poco más suave */
    margin-bottom: 15px; /* Espacio debajo del título */
    border-bottom: 1px solid #eee; /* Línea debajo del título */
    padding-bottom: 10px; /* Espacio entre el título y la línea */
}

.related-articles ul {
    list-style: none; /* Quita los puntos de la lista por defecto */
    padding: 0; /* Quita el relleno por defecto de la lista */
    margin: 0; /* Quita el margen por defecto de la lista */
}

.related-articles li {
    margin-bottom: 10px; /* Espacio entre elementos de la lista */
    padding-left: 15px; /* Espacio a la izquierda para un indicador personalizado si quieres */
    position: relative; /* Necesario para posicionar un indicador personalizado */
}

/* Opcional: Añadir un pequeño círculo o guion como indicador de lista */
.related-articles li:before {
    content: "\203A"; /* Utiliza un guion pequeño como indicador */
    color: #777; /* Color del indicador */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}


.related-articles li a {
    text-decoration: none; /* Quita el subrayado del enlace */
    color: #0073aa; /* Color típico de enlace de WordPress */
    transition: color 0.3s ease; /* Transición suave al pasar el ratón */
}

.related-articles li a:hover {
    color: #005187; /* Color más oscuro al pasar el ratón */
    text-decoration: underline; /* Añade subrayado al pasar el ratón */
}

#comments {
    display: none; /* Oculta el elemento y no ocupa espacio en el diseño */
}

#block-4,#block-5,#block-6 {
    display: none; /* Oculta el elemento y no ocupa espacio en el diseño */
}

/*--------------------------------------------------------------
>>>RESPONSIVE: ENTRADAS
--------------------------------------------------------------*/

@media only screen and  (max-width: 900px) {

 .entry-content section.content p {
        width: auto !important; /* Esto anula el ancho fijo de 192px */
        max-width: 100% !important; /* Asegura que no exceda el ancho de su padre (.content) */

        /* Si el texto también está desalineado, puede que necesites anular márgenes o padding */
        margin-left: auto; /* Anula margin-left fijo si existe */
        margin-right: auto; /* Anula margin-right fijo si existe */
        /* O si tenía margin/padding excesivo */
        padding-left: 5%;
        padding-right: 5%;
        margin-left: 0;
        margin-right: 0;

        box-sizing: border-box; /* Buena práctica responsive */
    }
    
     .entry-content section.content h2 {
        width: auto !important; /* Esto anula el ancho fijo de 192px */
        max-width: 100% !important; /* Asegura que no exceda el ancho de su padre (.content) */

        padding-left: 5%;
        padding-right: 5%;

    }

    /* Asegúrate de que la propia sección .content no tenga padding excesivo a los lados en móvil */
    .entry-content section.content {
         padding-left: 0;
         padding-right: 0;
         /* O si quieres un padding pequeño a los lados */
         /* padding: 0 15px; */
    }

}