/*
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
.underline{	padding-bottom:5px;	border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/

/* Contenedor Principal */
.hero-content {
    /* Centrado y Espaciado */
    text-align: center;
    padding: 80px 20px; /* Aumenta el espaciado interno superior/inferior */
    max-width: 900px; /* Limita el ancho para que el texto no se extienda demasiado */
    margin: 0 auto; /* Centra el contenedor */
    
    /* Fondo sutil (ajusta el color si tienes una imagen de fondo) */
    background-color: #f8f8f8; 
    border-radius: 10px; /* Bordes redondeados sutiles */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra elegante para "levantar" la sección */
}

/* Título Principal (h2) */
.hero-content h2 {
    font-size: 2.8em; /* Tamaño grande y legible */
    font-weight: 700; /* Negrita pronunciada */
    color: #333; /* Color oscuro para buen contraste */
    letter-spacing: -0.5px; /* Ajuste sutil del espaciado de letras */
    margin-bottom: 15px;
}

/* Subtítulo/Línea de Servicios (span) */
.hero-content span {
    display: block; /* Para que ocupe su propia línea */
    font-size: 1.1em;
    font-weight: 400; /* Peso normal */
    color: #6a6a6a; /* Gris elegante, menos duro que el negro */
    margin-bottom: 30px;
    
    /* Subrayado sutil y personalizado con border-bottom */
    padding-bottom: 5px;
    border-bottom: 2px solid #007bff; /* Color de acento para la línea */
    display: inline-block; /* Para que el border-bottom solo tenga el ancho del texto */
}

/* Párrafo de Acompañamiento (p) */
.hero-content p {
    font-size: 1.2em;
    line-height: 1.6; /* Buen espaciado entre líneas para facilitar la lectura */
    color: #444;
}

/* Detalle: Resaltar la última parte del texto del Párrafo */
/* Si pudieras envolver "la estrategia y el vínculo con tus clientes" con un <strong> */
/* ...puedes hacer que tenga un color de acento. */
.hero-content p strong {
    color: #007bff; /* Mismo color de acento que el subrayado */
    font-weight: 600;
}




body{
	font-family:'Istok Web', sans-serif;
	background:#EDEEEE;
}
.wrap{
	width:1000px;
	margin:0 auto;
}
.header{
	padding-top:15px;
	background:#FFF;
}
.header_top{
	background:#C2D1D7;
	padding:10px 0;
}
.logo{
	float:left;
	padding-top:5px;
}
.menu{
	float:right;
	margin-top:40px;
	margin-right: 15px; 
}
.menu li{
	display: inline;
}
.menu li a{
	color:#124D6B;
	font-size:14px;
	padding:11px 30px;
	border-radius:0.2em;
}
.menu li a:hover{
	background:#FFF;
}
.menu li.active a{
	background:#FFF;
}
.header_bottom{
	background:url(../images/banner.png) no-repeat;
	
	margin:0 15px;
	position:relative;
	padding-bottom:50px;
}
.header_bottom h2{
	font-size:24px;
	color:#EEE;
	padding:80px 30px 5px;
	font-weight:bold;
}
.header_bottom span{
	color:#288AB4;
	font-size:15px;
	padding:30px;
	font-weight:bold;
}
.header_bottom p{
	font-size:15px;
	color:#FFF;
	padding:30px 30px;
    width: 350px;
    line-height: 1.6em;
}
.header_bottom p a{
	position:absolute;
    bottom:30px;
    left:285px;
    font-size:18px;
    color: white;
}
.header_bottom p a:hover{
	text-decoration:underline;
}
.header_bottom a img{
	vertical-align:middle;
}
.main{
	padding:30px 15px;
	background:#FFF;
}
.content_top{
	position:relative;
}
.content_top h2{
	font-size:30px;
	color:#124D6B;
}
.content_top span{
	color:#2B6B12;
	font-size:13px;
	font-weight:bold;
}
.content_top p{
	font-size:13px;
	color:#71797E;
	padding:12px 0;
	line-height:1.8em;	
}
.content_top p a{
	color:#740404;
	font-size:13px;
	position:absolute;
	right:5px;
	bottom:0px;
	font-weight:bold;
}
.content_top p a:hover{
	text-decoration:underline;
}
.content_top p img{
	vertical-align:middle;
}
.boxes{
	margin-top:30px;
	background:url(../images/boxes_bg.jpg) no-repeat;
	padding-bottom:55px;
}
.box{
	float:left;
	width:279px;
	position:relative;
	padding:20px 22px;
	background:url(../images/box_line.gif) no-repeat 7px 20px;
}
.box_top{
}
.box img{
	float:left;
	padding-top:5px;
}
.box h2{
	float:left;
	font-size:22px;
	color:#0F0F10;
	padding:3px 5px;
}
.box h2 span{
	font-size:15px;
	color:#2B6B12;
}
.box p{
	font-size:13px;
	color:#3A5059;
	line-height:1.8em;
	padding-top:15px;
}
.box p a{
	color:#740404;
	font-size:13px;
	position:absolute;
	right:25px;
	bottom:-20px;
	font-weight:bold;
}
.box p a:hover{
	text-decoration:underline;
}
.content_bottom{
	margin-top:35px;
}
.grid1{
	float:left;
	width:308px;
}
.grid1 h3{
	font-size:25px;
	color:#124D6B;
	border-bottom:1px dotted #888;
}
.grid1 form{
	margin-top:50px;
}
.grid1 input[type="text"]{
	padding:4px;
	font-size:12px;
	width:300px;
	border: 1px solid rgb(223, 217, 217);
	color:#71797E;
	 outline: none;
}
.grid1 textarea{
	width:300px;
	padding:5px;
	font-size:12px;
	height:135px;
    margin:8px 0;
    border: 1px solid rgb(223, 217, 217);
    color:#71797E;
    resize:none;
    font-family:'Istok Web', sans-serif;
    outline: none;
}
.grid1 input[type="submit"]{
	margin-top:15px;
	color:#FFF;
	border-radius: 4px;
box-shadow: #d07400 0 2px 0px, rgba(0, 0, 0, 0.3) 0 3px 3px;
background: rgb(255,183,0);
background: -moz-linear-gradient(top, rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,183,0,1)), color-stop(100%,rgba(255,140,0,1)));
background: -webkit-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
border: 1px solid #e59500;
font-size: 13px;
font-weight:bold;
padding: 6px 12px 6px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.grid1 input[type="submit"]:hover{
	 background: rgb(255,203,72);
    background: -moz-linear-gradient(top,  rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,203,72,1)), color-stop(100%,rgba(255,156,35,1)));
    background: -webkit-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
    background: linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );
}
.grid1 input[type="submit"]:active{
	 box-shadow: #c46d00 0 2px 0, rgba(0, 0, 0, 0.2) 0 6px 3px; 
}
.grid2{
	float:left;
	width:610px;
	margin-left:50px;
}
.grid2 img{
	float:left;
}
.grid2_top_dta{

}
.grid2 h3{
	font-size:25px;
	color:#124D6B;
}
.grid2_top h4 span{
	font-size:15px;
	color:#2B6B12;
	font-weight:bold;
}
.grid2 p{
	font-size:13px;
	color:#71797E;
	padding:10px 5px 10px;
	line-height:1.8em;
}
.grid2_bottom{
	
}
.grid2_img{
	float:left;
	border:6px solid rgb(166, 166, 167);
    margin-top: 20px;
}
.grid2_list{
	float:left;
	width:418px;	
}
.grid2_list li{
	font-size:13px;
	color:#222;
	padding:13px 0 0;
	border-bottom:1px dotted #888;
	list-style-image:url(../images/bullet.gif);
	margin-left:40px;
	vertical-align:top;
}
.footer{
	padding:20px 0px;
	background:#C2D1D7;
}
.footer_nav{
	float:left;
}
.footer_nav li{
	display:inline;
}
.footer_nav li a{
	padding:0 15px;
	color:#124D6B;
	font-size:13px;	
}
.footer_nav ul li:nth-child(1),.footer_nav ul li:nth-child(2),.footer_nav ul li:nth-child(3),.footer_nav ul li:nth-child(4),.footer_nav ul li:nth-child(5){
 border-right:1px solid #124D6B;
}
.footer_nav li a:hover{
	text-decoration:underline;
}
.copy_right{
	float:right;
	margin-right:15px;
}
.copy_right p{
	font-size:12px;
	color:#222;
}
.copy_right a{
	font-size:12px;
	color:#000;
}
.copy_right a:hover{
	color:#0B4963;
	text-decoration: underline;
}
/* about us */
.grid_bottom p{
	font-size:13px;
	color:#71797E;
	padding:10px 0;
	line-height:1.8em;
}
.grid2_about{
	padding-bottom:10px;
}
.grid2_top_img{
	float:left;
	padding-right:5px;
}
.grid2_top_data{

}
.grid2_about h3{
	font-size:25px;
	color:#124D6B;
}
.grid2_about h4{
	margin-top:-20px;
}
.grid2_about h4 span{
	font-size:15px;
	color:#2B6B12;
	font-weight:bold;
	margin-left:60px;
}
/* services */
.grid2_serv{
	padding-bottom:10px;
}
.grid2_top_img{
	float:left;
	padding-right:5px;
}
.grid2_top_data{

}
.grid2_srev h3{
	font-size:25px;
	color:#124D6B;
}
.grid2_serv h4{
	margin-top:-20px;
}
.grid2_serv h4 span{
	font-size:15px;
	color:#2B6B12;
	font-weight:bold;
	margin-left:52px;
}
.Services_content{
	padding:35px 15px 20px;
	background:#FFF;
}
.service1{
	float:left;
}
.services h4{
	font-size:18px;
	color:#71787E;
	border-bottom:1px dotted #888;
}
.serv_img{
	float:left;
	padding-top:10px;
}
.serv_data{
	float:left;
	width: 225px;
    margin-top: -5px;
    padding-left: 5px; 
}
.serv_data p{
	font-size:13px;
	color:#71797E;
	line-height:1.8em;
}
.service2{
	float:right;
}
/* contact */
.contact_form{
	
}
.contact_form h4{
	font-size:18px;
	color:#71797E;
	padding-bottom:10px;
	font-weight:bold;
}
.contact_form form{ 
	
}
.contact_form th{
	font-size:13px;
	color:#666;
	text-align:right;
	vertical-align:top;
	padding:5px 0;
}
.contact_form td{
	padding:2px 50px;
}
.contact_form input[type="text"]{
	font-size:12px;
	color:#888;
	width:250px;
	padding:3px;
	border: 1px solid rgb(223, 217, 217);
	font-family:'Istok Web', sans-serif;
	outline: none;
}
.contact_form textarea{
	font-size:12px;
	color:#888;
	width:260px;
	padding:3px;
	height:100px;
	border: 1px solid rgb(223, 217, 217);
	font-family:'Istok Web', sans-serif;
	resize: none;
	outline: none;
}
.contact_form input[type="submit"]{
	margin:15px 75px;
	border-radius: 4px;
box-shadow: #d07400 0 2px 0px, rgba(0, 0, 0, 0.3) 0 3px 3px;
background: rgb(255,183,0);
background: -moz-linear-gradient(top, rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,183,0,1)), color-stop(100%,rgba(255,140,0,1)));
background: -webkit-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
border: 1px solid #e59500;
font-size: 13px;
color: #fff;
font-weight:bold;
padding: 7px 20px 9px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.contact_form input[type="submit"]:hover{
	background: rgb(255,203,72);
    background: -moz-linear-gradient(top,  rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,203,72,1)), color-stop(100%,rgba(255,156,35,1)));
    background: -webkit-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
    background: linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );
}
.contact_form input[type="submit"]:active{
	box-shadow: #c46d00 0 2px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
}


/*--responsive--*/

@media(max-width:1050px){
	.wrap {
		margin: 0px auto;
		width: 945px;
	}
	.box {
		float: left;
		width: 94%;
		position: relative;
		padding: 20px 22px;
		background: url(../images/box_line.gif) no-repeat 7px 20px;
		margin-bottom: 85px;
	}
	.grid2 {
		float: left;
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
	}
	.content_bottom {
		margin-top: 0;
	}
	.header_bottom {
		background-size: cover;
	}

}
@media(max-width:1024px){

}
@media(max-width:991px){

	.wrap {
		margin: 0px auto;
		width: 897px;
	}
	.footer_nav {
		float: none;
		text-align: center;
	}
	.copy_right {
		float: none;
		margin-right: 0;
		text-align: center;
	}
	.logo img {
		width: 72%;
	}
	.menu li a {
		font-size: 14px;
		padding: 11px 16px;
	}
}
@media(max-width:900px){
	.wrap {
		margin: 0px auto;
		width: 820px;
	}

}
@media(max-width:800px){
	.wrap {
		margin: 0px auto;
		width: 700px;
	}
	.menu li a {
		font-size: 13px;
		padding: 11px 15px;
	}
	.header_bottom p {
		font-size: 13px;
		padding: 16px 16px;
		width: 311px;
	}
	.header_bottom h2 {
		font-size: 24px;
		padding: 36px 16px 5px;
		font-weight: bold;
	}
	.header_bottom span {
		font-size: 15px;
		padding: 18px;
		font-weight: bold;
	}
	.logo {
		float: none;
		padding-top: 5px;
		text-align: center;
	}
}
@media(max-width:667px){
	.wrap {
		margin: 0px auto;
		width: 570px;
	}
	.header_bottom h2 {
		font-size: 21px;
		padding: 36px 16px 5px;
		font-weight: bold;
	}
	.logo img {
		width: 41%;
	}
	.logo {
		float: none;
		padding-top: 5px;
		text-align: center;
	}
	.menu {
		float: none;
		margin-top: 21px;
		margin-right: 0;
		text-align: center;
	}
}
@media(max-width:600px){
	.wrap {
		margin: 0px auto;
		width: 458px;
	}
	.header_bottom p a {
		position: absolute;
		bottom: 30px;
		left: 19px;
		font-size: 18px;
		color: white;
	}
	.grid2_list {
		float: left;
		width: 100%;
	}
}
@media(max-width:480px){
	.wrap {
		margin: 0px auto;
		width: 375px;
	}
	.menu li a {
		font-size: 13px;
		padding: 11px 11px;
	}
	.box p a {
		right: 60px;
		bottom: -20px;
	}
	.header_bottom p a {
		bottom: 30px;
		left: 16px;
	}

}
@media(max-width:414px){

	.wrap {
		margin: 0px auto;
		width: 357px;
	}
	.header_bottom p {
		font-size: 13px;
		padding: 16px 16px;
		width: 85%;
	}
	.grid1 textarea,.grid1 input[type="text"],.contact_form input[type="text"],.contact_form textarea {
		width: 100%;
	}
	.grid1 {
		float: left;
		width: 95%;
	}
	.content_top h2 {
       font-size: 25px;
	}
	.menu li {
		display: block;
		margin:2px 0;
	}
	.menu li a {
		font-size: 13px;
		padding: 2px 11px;
	}
	.logo img {
		width: 60%;
	}
}
@media(max-width:384px){
	.wrap {
		margin: 0px auto;
		width: 307px;
	}
	.content_top p a {
		right: 5px;
		bottom: -18px;
	}
	.contact_form input[type="text"],.contact_form textarea {
		width:80%;
	}
	.contact_form td {
		padding: 2px 30px;
	}
	.box h2 {
		float: left;
		font-size: 17px;
	}
	.grid1 h3 {
       font-size: 22px;
	}
}
@media(max-width:375px){
	.contact_form td {
		padding: 2px 10px;
	}
	.header_bottom h2 {
		font-size: 18px;
		padding: 28px 16px 5px;
		font-weight: bold;
	}
	.header_bottom span {
		font-size: 14px;
		padding: 0px 10px;
		font-weight: bold;
	}
}
@media(max-width:320px){

	.wrap {
		margin: 0px auto;
		width: 248px;
	}
	.contact_form td {
		padding: 2px 2px;
	}
	.contact_form input[type="text"],.contact_form textarea {
		width:70%;
	}

    /* 1. Contenedor principal: define el contexto para los elementos superpuestos */
.banner-content {
    /* Esto permite que los elementos internos con 'position: absolute' se posicionen
       relativamente a este contenedor. */
    position: relative;
    width: 100%; /* O el ancho deseado */
    height: auto; /* O la altura deseada para contener la imagen */
    overflow: hidden;
}

/* 2. La imagen de fondo: se asegura de que ocupe el 100% del contenedor */
.banner-content img {
    display: block;
    width: 100%;
    height: auto;
}

/* 3. Contenedor de texto: Posiciona el texto por encima de la imagen */
.banner-content .text-overlay {
    /* Quita el texto del flujo normal y lo superpone */
    position: absolute;
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajuste fino para centrado perfecto */

    /* Esto asegura que el texto esté visible sobre la imagen */
    z-index: 10;

    /* Estilos de presentación */
    color: #ffffff; /* Color de texto claro para contraste */
    text-align: center;
    width: 80%; /* Ancho del texto */
}

/* 4. Estilos de texto (Ejemplo) */
.banner-content h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    font-weight: bold;
}

.banner-content span {
    display: block; /* Para que ocupe su propia línea */
    font-size: 1.2em;
    margin-bottom: 20px;
}

.banner-content p {
    font-size: 1em;
}

.banner-content a {
    color: #ffcc00; /* Color llamativo para el enlace */
    text-decoration: none;
    font-weight: bold;
}
  

.mp-button {
    /* Estilos base del botón */
    display: inline-block;
    padding: 12px 30px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none; /* Quita el subrayado del enlace */
    cursor: pointer;
    border-radius: 8px; /* Bordes redondeados */
    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
    
    /* Colores de Mercado Pago */
    background-color: #009EE3; /* Azul primario */
    color: #FFFFFF; /* Texto blanco */
    border: 2px solid #009EE3; 
    box-shadow: 0 4px 15px rgba(0, 158, 227, 0.4); /* Sombra elegante */
}

/* Efecto al pasar el mouse (hover) */
.mp-button:hover {
    background-color: #0077B6; /* Un azul un poco más oscuro */
    border-color: #0077B6;
    box-shadow: 0 6px 20px rgba(0, 158, 227, 0.6); 
    transform: translateY(-2px); /* Un ligero levantamiento */
}

/* Efecto al hacer clic (active) */
.mp-button:active {
    transform: translateY(0); /* Vuelve a su posición original */
    box-shadow: 0 2px 10px rgba(0, 158, 227, 0.4);
    background-color: #005A8D;
}

/* Estilo para que se vea más como "Pagar" con un toque de amarillo */
.mp-button.pay {
    background-color: #FFE600; /* Amarillo */
    color: #000000; /* Texto negro */
    border: none;
    box-shadow: 0 4px 15px rgba(255, 230, 0, 0.5);
}

.mp-button.pay:hover {
    background-color: #FFD400; /* Un amarillo más fuerte */
    box-shadow: 0 6px 20px rgba(255, 230, 0, 0.7);
    transform: translateY(-2px);
}

.mp-button.pay:active {
    background-color: #FFC000; 
    transform: translateY(0);
}

    
    
}
/*--//responsive--*/