/*
Theme Name: Sonar CL
Author: medu1a
Description: This is a blank bootstrap 3.1.1 theme for wordpress. Feel free to use this as a starter template for your projects.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*Wordpress editor styles start*/
html,body {
    height:100%;
}

.entry-content img {
	margin: 0 0 1.5em 0;
	}
.alignleft, img.alignleft {
	margin-right: 1.5em;
	display: inline;
	float: left;
	}
.alignright, img.alignright {
	margin-left: 1.5em;
	display: inline;
	float: right;
	}
.aligncenter, img.aligncenter {
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
	}
.alignnone, img.alignnone {
	/* not sure about this one */
	}
.wp-caption {
	margin-bottom: 1.5em;
	text-align: center;
	padding-top: 5px;
	}
.wp-caption img {
	border: 0 none;
	padding: 0;
	margin: 0;
	}
.wp-caption p.wp-caption-text {
	line-height: 1.5;
	font-size: 10px;
	margin: 0;
	}
.wp-smiley {
	margin: 0 !important;
	max-height: 1em;
	}
blockquote.left {
	margin-right: 20px;
	text-align: right;
	margin-left: 0;
	width: 33%;
	float: left;
	}
blockquote.right {
	margin-left: 20px;
	text-align: left;
	margin-right: 0;
	width: 33%;
	float: right;
	}

/*Wordpress editor styles end*/
body{
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	color: #999999;
}
.single header{
	margin-bottom: 45px;
}
a{
	color: #2DBCB2;
}
a:hover{
	text-decoration: none;
	color:#BCD63C;
}

header{
	height: 250px;
    text-align:center;
    background-color: #2DBCB2;
    position: relative;
    z-index: 100;
}
header .logo{
	width: 218px;
	height: 168px;
background-image: url(https://sonar.cl/wp-content/uploads/2026/08/sonar-logo-header.svg);background-size: contain;background-repeat: no-repeat;
margin-top: 43px;
	margin-left: 21px;
	float: left;
}
header a{
	font-family: 'Nunito', sans-serif;
	color: white;
	text-transform: uppercase;
}
header .container{
	position: relative;
	padding-right: 0;
}
.navbar-collapse{
	padding-right: 0;
}
.navbar-nav{
	margin-top: 37px;
}
.navbar-nav>li{
	float: none;
	text-align: right;
}
.navbar-nav>li.current-menu-item a{
	color: rgb(188, 213, 75);
}
.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
    color: rgb(188, 213, 75);
}
.navbar-nav>li>a{
	padding-bottom: 5px;
	padding-top: 5px;
	padding-right: 0px;
}
.espiral{
	position: absolute;
	top:0;
	left:80px;
	background-image:url(images/header-overlay.png);
	width: 823px;
	height: 480px;
	pointer-events: none;
}
.bxslider{

}
.slide{
	background-size: cover;
	height: 230px;
	background-position: center;
}
.slide .container{
	position: relative;
	height: 100%;
}
.slide h1, .slide h2{
	color: white;
	font-family: 'Nunito', sans-serif;
}
.slide h1{
	font-size: 2em;
	font-weight: 400;
	margin-top: 0;
}
.slide h2{
	font-size: 1em;
	font-weight: 300;
	margin-top: 10px;
}
.slide .heading a{
	color: white;
}
.slide h2{
	font-weight: 400;
}
.bx-wrapper{

}
  
.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 0px #ccc!important;
    -çkit-box-shadow: 0 0 0px #ccc!important;
    box-shadow: 0 0 0px #ccc!important;
    border: 0px solid #fff!important;
    left: 0px!important;
    background: #fff;
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}
.bx-wrapper img {
    width: 100%;
    display: block;
    height: auto;
}
.heading {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    color: white;
    font-size: 31px;
}

/* FIX BUG LINEA ZOOM 24-08 - Paso 4 (universal, no solo mobile): algunos slides tienen un <p>&nbsp;</p> extra al final (contenido viejo, ej. el slide 'ESPECIALISTAS EN') que agrega alto invisible abajo del texto, descuadrando el centrado real (translateY) porque el texto visible ya no queda en el medio geometrico de la caja. Neutralizar ese parrafo vacio sin tocar el contenido en WP. */
.heading p {
  margin: 0;
  height: 0;
  overflow: hidden;
}
.area-espiral{
	text-align: center;
    background-image: url(http://sonar.cl/wp-content/themes/sonarcl/images/sec-01.jpg);
    background-size: 85%;
    align-items: stretch;
    background-repeat: no-repeat;
    background-position: center center;
}
.area-espiral img{
	max-height: 492px;
}
.categorias{
	display: flex;
}
.categorias .desc{
	text-align: center;
}
.categorias .desc img{
	margin-top: 0px;
	margin-bottom: 0px;
}

.categorias div{
	padding-left: 0px;
	padding-right: 0px;
	position: relative;
	
}
.areas, .areas-cont{
	background-color: #BCD63C;
}
.area{
	width: 100%;
}
.categorias p{
	position: absolute;
	bottom: 0;
	color: #fff;
    font-size: 21px;
    padding-top: 0px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    width: 100%;
    text-align: center;
}
.categorias .areas:last-child{
	height: 50%;
}
.categorias .areas:last-child .desc{
	height: 100%;
	height: 252px;
}
.categorias .areas:last-child p{
	color: #fff;
    font-size: 3em;
    padding-top: 0;
    bottom: 65px;
    line-height: 54px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
}
.categorias .areas:hover p{
	display: none;
}
.categorias .middle{
	border-left: solid 3px #cccccc;
	border-right: solid 3px #cccccc;
}
.botones {
	background-image: url(images/btns-bg.jpg);
	background-size: cover;
	min-height: 200px;
	padding-top: 30px;
	padding-bottom: 15px;
	text-align: center;
}
.botones .imagen_product{
	margin-bottom: 30px
}
.botones img{
	width: 100%;
	height: auto;
	border: 2px solid #fff;
}
.boton{
	width: 305px;
    height: 70px;
    line-height: 64px;
    background-color: #BCD63C;
    display: block;
    color: #fff;
    border-radius: 40px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    margin: 0 auto;
    margin-top: 32px;
    position: relative;
    border: 5px solid #ededed;
}
.boton i{
	font-size: 40px;
	position: absolute;
	left: 15px;
	top: 10px;
}
.boton:hover{
	color: #4ca336;
}


.page-template-tpl-contacto header, .page-template-default header, .page-template-tpl-blog header, .single header{
	height: 145px;
}
.page-template-tpl-contacto .logo, .page-template-default  header .logo, .page-template-tpl-blog  header .logo, .single header .logo{
background-image: url(https://sonar.cl/wp-content/uploads/2026/08/sonar-logo-footer@2x.png);background-size: contain;
background-repeat: no-repeat;
width: 157px;
	height: 111px;
	margin-left: 15px;
	margin-top: 20px;
}
/* AUMENTO 25% logo paginas interiores SOLO mobile (25-08) - el dibujo real dentro del PNG deja margen de sobra abajo (background-size:contain con padding transparente en el archivo), no se corta. Anclaje superior-izquierdo sin cambios (margin-left/margin-top heredados de la regla base). */
@media only screen and (max-width: 960px) {
  .page-template-tpl-contacto .logo, .page-template-default header .logo, .page-template-tpl-blog header .logo, .single header .logo {
    width: 212px;
    height: 150px;
  }
}

/* FIX logo paginas interiores desalineado a la derecha en DESKTOP (25-08) - el logo tenia margin-left:15px propio SUMADO al padding del contenedor (15px), quedando 15px mas a la derecha que el texto de abajo. Acotado a desktop (>=961px), sin tocar mobile. */
@media only screen and (min-width: 961px) {
  .page-template-tpl-contacto .logo, .page-template-default header .logo, .page-template-tpl-blog header .logo, .single header .logo {
    margin-left: 0;
  }
}

.page-template-tpl-contacto .navbar-nav, .page-template-default .navbar-nav, .page-template-tpl-blog .navbar-nav, .single .navbar-nav {
	margin-top: 60px;
}
.page-template-tpl-contacto .navbar-nav>li, .page-template-default .navbar-nav>li, .page-template-tpl-blog .navbar-nav>li, .single .navbar-nav>li  {
    float: left;
    text-align: left;
}
.page-template-tpl-contacto .nav>li>a, .page-template-default .nav>li>a, .page-template-tpl-blog .nav>li>a, .single .nav>li>a  {
    padding: 10px 7px;
    font-size: 16px;
}
.page-template-tpl-contacto header .espiral, .page-template-default  header .espiral, .page-template-tpl-blog  header .espiral, .single  header .espiral  {
    left: 93px;
    background-size: cover;
    width: 530px;
    height: 145px;
}

.page-template-tpl-blog .container-fluid .posts-blog{
	padding: 0;
}
.page-template-tpl-blog .post{
	margin: 30px 0;
}
.posts-blog > div:nth-of-type(even) {
    background: #BCD63C;
    padding: 30px 0;
}
.posts-blog > div:nth-of-type(even) h2 a, .posts-blog > div:nth-of-type(even) p{
	color: white;
}
.posts-blog .meta{
	padding-bottom: 15px;
    display: block;
}
.posts-blog > div:nth-of-type(even) .meta{
	color:#4bc5d9;
}
.navigation{
	margin-bottom: 45px;
}

.blog-thumb{
	height: 319px;
	background-image: url(images/thumbnail.jpg);
	background-size: contain;
	background-position: center center;
}
.blog-thumb img{
	width: 100%;
	height: auto
}


h2{
	text-transform: uppercase;
	color: #2DBCB2;
	font-family: 'Nunito', sans-serif;
    font-weight: 700;

}
.contenido p, .contenido li, .contenido h4{color:#231F20 !important;
	font-size: 16px;
	margin-bottom: 30px;
}
.hentry p, .hentry li{
    color:#231F20;
}
.contenido h4 a{
    color: #2DBCB2 !important;
}
.widget h4{
    color:#2DBCB2;
}
.galeria{
	background-color: #BCD63C;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 0;
	padding-right: 0;
	color: white;
}
.galeria p{
	text-align: right;
}
.galeria h2{
	color: white;
}
.galeria img{
	width: 100%;
}
.galeria  .galeria-img{
	width: 100%;
	height: 501px;
	margin-bottom: 30px;
}
.formato-2{
	 margin-bottom: 30px;
}
.page-bottom{
	padding: 0;
	background-image: url(images/bg-bottom.jpg);
	height: 145px;
}

footer{
	background-color: #231F20;
	padding-top: 50px;
	padding-bottom: 80px;
	color: #fff;	
}
footer h2{
	font-size: 22px;
	font-weight: bold;
	color: white;
	margin-bottom: 25px;
}
footer .logo{
	text-align: center;
}
footer .datos a, footer .contacto a{	color: white;
	text-decoration: none;
}
footer .datos a:hover, footer .contacto a:hover{	color:white;
}
footer .sociales{
	text-align: center;
}
footer .sociales a{
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    font-size: 25px;
    color: #fff;
    margin: 0 8px;
    text-align: center;
}
.page-template-tpl-contacto h2{
	margin-bottom: 50px;
}
label{
	display: block;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 10px;
    border-radius: 8px;
    border: none;
    width: 100%;
    border: 1px solid #2DBCB2;
    width: 100%;
}

input[type=submit]{
    width: 25%;
    background-color: #BCD63C;
    text-transform: uppercase;
    color: white;
    border: none;
}
#wpcf7-f15-p13-o1 input[type=submit]{
	background-color: #e8720c;
	color: white;
	text-transform: none;
	border-radius: 999px;
	width: auto;
	padding: 14px 28px;
	font-weight: 700;
}
#wpcf7-f15-p13-o1 input[type=submit]{
    transition: background-color 0.2s ease;
}
#wpcf7-f15-p13-o1 input[type=submit]:hover{
    background-color: #c9660d;
}

::-webkit-input-placeholder {
   color: #999;
}

:-moz-placeholder { /* Firefox 18- */
   color: #999;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #999;  
}

:-ms-input-placeholder {  
   color: #999;  
}

.shiftnav-inner{
	background-color: #2DBCB2!important;
}
.shiftnav ul.shiftnav-menu li.menu-item>.shiftnav-target, .shiftnav ul.shiftnav-menu li.shiftnav-retract>.shiftnav-target{
	color: white;
	text-transform: uppercase;
}
.shiftnav .current-menu-item{
	background-color: #231F20!important;
}
/* FIX recuadro negro de foco en items del menu movil shiftnav (25-08) - venia del plugin (outline-offset sin outline propio, usaba el default del navegador) */
.shiftnav-target:focus, .shiftnav-target:active {
  outline: none !important;
  background-color: rgba(0,0,0,0.12);
}
/* AUMENTO logo footer SOLO mobile (25-08) - el <img> tiene width:121px inline en footer.php, hay que pisarlo con !important. PC queda intacto (121px). */
@media only screen and (max-width: 960px) {
  footer .contacto {
    overflow: visible !important;
  }
  footer .contacto.col-xs-2 a {
    display: block !important;
  }
  footer .contacto img {
    width: 73px !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
    margin-top: 3px !important;
  }
  footer .contacto.col-xs-10 {
    transform: translateX(16px);
  }
}


#main-container{
		padding: 0;
}
.medu1a img{
	width:30px;
}
	
@media only screen and (max-width: 1170px) {
	.area-espiral{
	}
	.areas {
    }
	.area {
    	width: 100%;
    }
    .categorias p{
	        padding-top: 47px;
	        font-size: 2.5em;
    }
}
@media only screen and (max-width: 960px) {
	.area-espiral{
		display: none;
		}
	.categorias{
		display: inherit;
		margin: 0;
	}
	.boton{
		width: 100%;
		font-size: 16px;
	}
	.galeria .galeria-img{
		height: auto;
	}
	.galeria p{
	text-align: left;
	}
	.galeria .row{
		padding-left: 15px;
		padding-right: 15px;
	}
}
	
@media only screen and (max-width: 768px) {
	#main-container{
		padding: 0;
	}
	
	.espiral{
		width: 592px;
	    height: 250px;
	    left: 35px;
	    
	}
	.heading{
		right: 15px;
	}
	.slide h1{
		font-size: 2em;
	}
	.slide h2{
		font-size:1.2em;
	}
	.boton{
		width: 100%;
		font-size: 16px;
	}
	footer .contacto img{
		width: 100%;
	}
	.areas{
		min-height: 160px;
		margin-bottom: 0;
	}
	.areas p{
		margin-bottom: 0;
	}
	.galeria .row{
		padding-left: 15px;
		padding-right: 15px;
	}

}
@media only screen and (max-width: 690px) {
    header .descarga {
   	 float: none;
   	 margin: 0 auto;
   	 margin-top: 5px;
   	 width: 60%;
    }
    header .logo{
    zoom: 0.5;
    float: none;
    margin: 0 auto;
    margin-top: 45px;
    }
    header .descarga a {
    font-size: 14px;
    line-height: 33px;
    display: block;
    }
    .heading {
    font-size: 14px;
    width: 70%;
    left: 50%;
    margin-left: -34%;
    top: 20%;
    }
    .categorias .middle{
	    border: none;
    }
    .area-espiral {
	    text-align: center;
	    background-image: url(http://sonar.cl/wp-content/themes/sonarcl/images/sec-01.jpg);
	    background-size: cover;
	    height: 200px;
	    background-repeat: no-repeat;
	    background-position: center -148px;
    }
    .areas {
        background-color: #BCD63C;	
        min-height: auto;
	}
	.categorias p {
    padding-bottom: 12px;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    }
	.categorias .areas:last-child p{
		bottom: 60px;
	}
    .botones{
	    margin-top: 0;
	    padding-bottom: 60px;
    }
    footer{
	padding-top:0;
    }
    footer .sociales{
            margin-top:30px;
    }
    .galeria .row{
		padding-left: 15px;
		padding-right: 15px;
	}
	.page .container{
		margin-top:0px;
	}
	.home .container{
		margin-top:0px;
	}
	.page .container img{
		width:100%;
		max-width:100%;
		height:auto;
	}
	.page .container .medu1a{
		bottom: 55px!important;
	}
	    
	.page .container .medu1a img{
		width:30px;
	}
	footer .row{
		padding-bottom:100px;
	}
}
@media only screen and (max-width: 480px) {
    header {
   	 height: 250px;
    }
    .slide{
	    top:0;
		height: 135px;
    }
    footer .logo img{
	    width: 100%;
    }
    footer .contacto{
	    margin-top: 30px;
    }
    footer .contacto label{
	    display: block;
    }
    footer .contacto input{
	    width: 100%;
    }
    .heading {
    	font-size: 12px;
    	width: 100%;
   	 	left: initial;
    	margin-left: 0;
    	margin-right: 0;
    	top: 50%;
    	transform: translateY(-50%);
    	text-align: center;
    	right: 0;
    }
    .heading h1, .heading h2{
	    text-align: center!important;
    }
    .area-espiral {
	    background-position: center -132px;
    }
    .galeria .row{
		padding-left: 15px;
		padding-right: 15px;
	}
}
@media only screen and (max-width: 320px) {
    footer .sociales .fa-stack{
	    margin: 0 4px;
    }
    .area-espiral {

    background-position: center -95px;
    }
    .heading {
    	font-size: 12px;
	    width: 100%;
	    left: initial;
	    margin-left: 0;
	    top: 35%;
	    right: 0px;
    }
    .slide h1{
	    font-size: 2em;
		margin-top:38px;
    }
    .slide h2 {
    font-size: 1.5em;
    margin-top: 5px;
    }
    .categorias p{
	    font-size: 2em;
    }
	categorias .areas:last-child p {
		bottom: 60px;
		font-size: 2em;
		line-height: 1.4em;
	}
    .boton {
    width: 265px;
    font-size: 22px;
    }
    footer .sociales a {
    margin: 0 4px;
    }
    .galeria .row{
		padding-left: 15px;
		padding-right: 15px;
	}

}



/* Fix: prevent horizontal scroll on mobile */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Fix: fill any leftover gap between header and hero slider with matching teal, so it never looks broken on mobile */
@media only screen and (max-width: 960px) {
  header, .bx-wrapper, .bx-viewport, .bxslider {
    background-color: #2DBCB2 !important;
  }
}

/* Fix: make mobile logo ~50% bigger (was zoom:0.5, now 0.75) */
@media only screen and (max-width: 960px) {
  header .logo {
    zoom: 0.75 !important;
  }
}

/* FIX BUG LINEA ZOOM 23-08 - Paso 1: logo se salia del header en <=480px (header:135px vs logo:171px con zoom 0.75+margin-top:45px = overflow ~36px). Reduce zoom y margin-top solo en este breakpoint para que el logo quepa dentro del header sin desbordar. */
@media only screen and (max-width: 480px) {
  .home header .logo {
    zoom: 1 !important;
    margin-top: 43px !important;
  }
}

/* FIX BUG LINEA ZOOM 24-08 - Paso 2: logo a tamano completo ahora traslapa .espiral en <=480px (.espiral heredaba left:35px del breakpoint 768px). Mover .espiral a la derecha para liberar zona del logo/tagline. */
@media only screen and (max-width: 480px) {
  .espiral {
    left: 100px;
  }
}
/* FIX logo header corrido a la derecha en mobile 25-08 - header .container tiene padding-right:0 sin padding-left:0 equivalente, descuadra el centrado vertical del logo via margin:0 auto. Agregar padding-left:0 solo en el rango donde el logo se centra (<=690px), sin tocar desktop. */
@media only screen and (max-width: 690px) {
  header .container {
    padding-left: 0;
  }
}

body.page-template-default a.boton[href*="/contacto"], body.single a.boton[href*="/contacto"], body.page-template-tpl-blog a.boton[href*="/contacto"] {
    background-color: #e8720c;
    color: #fff;
    }
    body.page-template-default a.boton[href*="/contacto"]:hover, body.single a.boton[href*="/contacto"]:hover, body.page-template-tpl-blog a.boton[href*="/contacto"]:hover {
        background-color: #c9660d;
    color: #fff;
}


/* Fix icono-texto centrado en .boton (sesion mega 20-21/08) */
.boton {
    display: flex;
    align-items: center;
    justify-content: center;
}
.boton i {
    position: static;
    margin-right: 12px;
}