body { -webkit-tap-highlight-color:transparent !important;font-family:Arial;color:#000;border:0px solid blue;}
h1 { font-size: 1.2em; }
h2 { font-size: 1em; }
h1, h2 { font-weight: normal; margin: 0px 0; }
p { font-size: .9em; margin: 5px 0; }
ul { padding-left: 10px; margin: 10px 0; list-style-type:square; }
ol{list-style-position:inside;}
a{text-decoration:none;}
img{max-width:100%;} 
div,header,footer{box-sizing:border-box;border-color:transparent;}
.clear{clear:both;}

.pc{display:none;border:0px solid red;}

.padding_20{padding:20px;}
.padding_10{padding:5px 5px 3px 5px;}
.margin_bottom_20{margin-bottom:20px;}
.margin_bottom_30{margin-bottom:30px;}

.radius{border-radius:20px;}
.bgwhite{background-color:#fff;}
.right{text-align:right;}
.center{text-align:center;}

.ancho{margin:0 auto;}


#header{
background-color:#040808;background-color:#002060;
color:#040808;
/*
background: linear-gradient(#002060,#EAEDF2);
background: linear-gradient(#002060,#48608D,#8191B1,#EAEDF2);*/
font-weight:bold;
text-shadow:1px 1px 2px #002060;


}
#innerheader{

/*background-color:#CE0071;*/
}
	
.h-area-titulo {TEXT-ALIGN:CENTER;
  color: white;
  margin: 0 0 1.5rem 0;
   font-size: 1.4rem;
    padding: 0.7rem;
    
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
 }
@media only screen and (min-width: 600px) {
	  .h-area-titulo {TEXT-ALIGN:CENTER;
	  padding: 1rem 1.5rem;
	  margin: 0 0 1.5rem 0;
	  font-size: 1.8rem;}
}	
	

#banner{
/*
background-color:#002060; background: linear-gradient(#F5B6D8, #A00057);
background-image:url('../imagenes/banner_2.jpg');
 background-size: cover;
 */
 
 background-color:#002060;
 
 /*background: linear-gradient(#EAEDF2f, #002060);**/
}
#innerbanner{
/*height:200px;*/
/*background-color:#C0D9C7;*/
}


#content{
background-color:#fff;
}
#innercontent{

}


#footer{
background-color:#002060;
}
#innerfooter{
/*
height:200px;
background-color:#F5FCD3;*/
padding:5px 10px;
}

/**** header ****/
#logo,#sociales{text-align:center;padding-bottom:20px;}
/*
#iconos a{}

.icon-bar {
  width: 100%;
  background-color:#002060;
  overflow: auto;
}

.icon-bar a {
  float: left;
  width: 20%;
  text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  color:#D8E1EC;color:#E3F7FF;
  font-size: 9px;
  letter-spacing:0.09em;
  font-weight:normal;
}*/


/* Contenedor principal */
#botonera-taller {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
  font-family: 'Segoe UI', Arial, sans-serif;
  box-sizing: border-box;
}

/* Cada área */
#botonera-taller .area {
  margin-bottom: 2.5rem;
}

/* Títulos de área con los colores base */
#botonera-taller .area-titulo {
  color: white;
  padding: 1rem 1.5rem;
  margin: 0 0 1.5rem 0;
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

/* Efecto de brillo en título (opcional) */
#botonera-taller .area-titulo::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 200%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: rotate(25deg);
  animation: brillo 6s infinite;
}

@keyframes brillo {
  0% { left: -60%; }
  20% { left: 100%; }
  100% { left: 100%; }
}

/* Grid de botones */
#botonera-taller .botones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}

/* Estilo base de botones */
#botonera-taller .boton-servicio {
  display: block;
  background-color: white;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 1rem 0.75rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  transition: all 0.3s ease;
  line-height: 1.3;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Colores específicos por área usando atributos data */
#botonera-taller .area[data-area="inyeccion"] .boton-servicio {
  color: #903F00;
  border-color: #EA6600;
  background: linear-gradient(145deg, #ffffff, #fff7f0);
}

#botonera-taller .area[data-area="mecanica"] .boton-servicio {
  color: #005952;
  border-color: #009085;
  background: linear-gradient(145deg, #ffffff, #f0faf9);
}

/* Efecto hover con brillo y elevación */
#botonera-taller .boton-servicio:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}

#botonera-taller .area[data-area="inyeccion"] .boton-servicio:hover {
  background: #EA6600;
  color: white;
  border-color: #903F00;
}

#botonera-taller .area[data-area="mecanica"] .boton-servicio:hover {
  background: #009085;
  color: white;
  border-color: #005952;
}

/* Efecto de brillo en hover (pseudo-elemento) */
#botonera-taller .boton-servicio::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
  z-index: 2;
  pointer-events: none;
}

#botonera-taller .boton-servicio:hover::before {
  left: 100%;
}

/* Responsive móvil */
@media (max-width: 600px) {
  #botonera-taller .botones-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
  #botonera-taller .boton-servicio {
    font-size: 0.9rem;
    padding: 0.8rem 0.3rem;
  }
  #botonera-taller .area-titulo {
    font-size: 1.4rem;
    padding: 0.7rem;
  }
  
 
  
}

@media (max-width: 360px) {
  #botonera-taller .boton-servicio {
    font-size: 0.8rem;
    padding: 0.6rem 0.2rem;
  }
}


/* Pantallas grandes: áreas una al lado de la otra (50% cada una) */
@media (min-width: 901px) {
  #botonera-taller {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* Espacio entre las dos áreas */
  }

  #botonera-taller .area {
    flex: 1 1 calc(50% - 1rem); /* Ocupa la mitad menos la mitad del gap */
    margin-bottom: 0; /* Elimina el margen inferior que ya no es necesario */
  }
}





@media only screen and (min-width: 380px) {
.icon-bar a {font-size: 11px;}
.icon-bar a:hover {background-color: #DB4C00;}
.active {background-color: #01359C;}
}


	#titulo {text-align:center;padding-bottom:10px;}
#titulo .razon{font-size:26px;}
	#titulo .autor{font-size:15px;}
	



/**** banner ****/
/*	#texto_banner, #titulo {color:#610035;padding:10px;letter-spacing:0.055em;color:#FFF7FF;
	text-shadow:1px 1px 2px  #c00;
	}*/
	

	#texto_banner .mar30{margin-left:30px;}
	
	#texto_banner .padtxt{padding-bottom:10px;}
	
	#texto_banner{padding:10px 10px 15px;}
	
	
	#texto_banner .uno,#texto_banner .dos,#texto_banner .tres{font-weight:normal;margin-bottom:5px;}
	#texto_banner .uno{font-size:22px;margin-bottom:-5px;}
	#texto_banner .dos{font-size:18px;}
	#texto_banner .tres{font-size:13px;letter-spacing:0.08em;color:#fff;text-align:left;line-height:1.4em;}
	/*
	#titulo .razon{font-size:30px;margin-bottom:-5px;text-align:center;}
	#titulo .autora{font-size:13px;margin-bottom:10px;text-align:center;}
	*/
	@media only screen and (min-width: 64em) {
	#titulo {width:600px;margin:0 auto;}
#titulo .razon{font-size:50px;}
	#titulo .auto{font-size:20px;}
	
	
}


		#banner_iconos{width:100%;border:0px solid red;text-align:center;}
		#banner_iconos .h2{color:#fff;font-weight:bold;font-size:15px;padding:0px;}
		#banner_iconos h2{font-size:11px;}
	#banner_iconos a{display:block;background-color:#EAEDF2;text-decoration:none;color:#000;font-weight:bold;font-size:12px;padding:2px;border:5px solid #fff;border-radius:20px;letter-spacing:0.07em;}
	#banner_iconos a:hover{background-color:#fff;border-color:#EAEDF2;}
	#banner_iconos .float_boton{float:left;width:33.33%;padding:5px;}
	#banner_iconos .innerfloat_boton{}	
	
@media only screen and (min-width: 64em) {
	#banner_iconos .float_boton{width:16.66%;}
	#banner_iconos h2{font-size:13px;}
	#banner_iconos a{font-size:13px;}
	.caja_padre .bgwhite{margin-top:30px;}
}

@media only screen and (min-width: 84em) {
	#banner_iconos a{font-size:12px;}
	
	.caja_padre .bgwhite{margin-top:15px;}
}
	
	
/**** content ****/
#contenido{color:#002060;padding:20px 0;border:0px solid red;}

.bloque{padding-bottom:15px;}

#mision{background-color:#002060;padding:4px;margin-bottom:20px;background: linear-gradient(#002060,#48608D,#8191B1,#EAEDF2);background: linear-gradient(#EAEDF2,#8191B1,#48608D,#002060);
/*border:1px solid #002060;*/box-shadow:0px 0px 4px #002060;
background: linear-gradient(#002060,#EAEDF2,#EAEDF2,#EAEDF2,#EAEDF2,#002060);}
#innermision{background-color:#EAEDF2;padding:10px;text-align:justify;}

#contenido h2{margin:0;font-size:15px;font-weight:bold;padding-bottom:15px;text-align:center;}
#contenido h3{margin:0;font-size:15px;font-weight:bold;padding-bottom:10px;text-align:center;}
#contenido h4{margin:0;font-size:13px;font-weight:bold;padding-bottom:5px;text-align:left;}
#contenido ol,#contenido ul,#contenido p{margin:0;font-size:13px;line-height:1.4em;font-weight:normal;padding-bottom:10px;}
#contenido ol{margin-left:0px;padding-left:0px;}
#contenido li{padding-bottom:15px;}

#contenido .con_caja{border:1px solid #002060;padding:5px;margin-top:10px;background-color:#EAEDF2;font-weight:bold;letter-spacing:0.04em;word-spacing:0.09em;}


/**** footer ****/

/********************* footer ***********************/
footer p{
font-size:14px;
	padding-bottom:15px;
	color:#fff;
}

footer a{
	color:#fff;
	text-decoration:none;
	font-weight:normal;
}

footer a:hover{
	color:silver;
	text-decoration:underline;
}
footer #ziete{
	padding-bottom:15px;
	text-align:center
}
footer #ziete a{color:#fff;
	padding-bottom:15px;
	text-align:center
}
footer{position:relative;

}
#fixed{
position:fixed;
bottom:0;
left:20px;right:20px;
z-index:1000;
}
#fixed2{
position:fixed;
bottom:0;
right:20px;
z-index:1000;
}
		
 
 
/* 480px */
@media only screen and (min-width: 30em) {
.ancho{width:30em;}
}/* 480px */


/* 720px */
@media only screen and (min-width: 45em) {
.ancho{width:45em;}


}/* 720px */

/* 1024*/
@media only screen and (min-width: 64em) {
.ancho{width:62em;}

.icon-bar a {font-size: 15px;}


	
	/*.bloque p{ column-count: 2; text-align: justify;}*/
#contenido h2{font-size:20px;}
#contenido h3{font-size:17px;}
#contenido h4{font-size:15px;}
#contenido ol,#contenido ul,#contenido p{font-size:15px;}
.cel{display:none;}

.pc{display:inline;}

#innerfooter{padding:5px 0px;}

}/* 1024px */

/* 1280x */  
@media only screen and (min-width: 80em) {
.ancho{width:80em;}

}/* 1280px */