/*
Theme Name: Tema Decro
Author: Alejandro Merlo
Description: Tema personalizado con Bootstrap 5
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,900;1,300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
}
.lato_thin{
  font-family: 'Lato', sans-serif;
  color: rgb( 70, 69, 69 );
  font-style: italic;
  text-align: left;
  font-weight: 300 ;
}
.titulo_seccion{
  font-family: 'Lato', sans-serif;
  font-weight: 900 ;
  color: rgb( 70, 69, 69 );
}
.titulos{
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}
.card-sidebar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: rgb(8, 7, 7);
    color: #fff;
}
.fondo-violeta{
    background-color: rgb(22, 129, 216);

}

/*nav bar --------------------------------------------*/
.header-navigation {
position: fixed;
top: 0;
width: 100%;
height: 90px;
line-height: 90px;
background-color: #000;
text-align: center;
box-shadow: 0 14px 19px rgba(0,0,0,0.12), 0 10px 10px rgba(0,0,0,0.10);
z-index: 50;
}
.header-navigation-mob {
position: fixed;
top: 0;
width: 100%;
height: 80px;
line-height: 80px;
background-color: #000;
box-shadow: 0 14px 19px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
z-index: 50;
}
.link {
color: #fff;
text-decoration: none;
font-size: 17px;
margin: 5px;
 font-family: "Roboto", sans-serif;
    font-weight: 900;

}
a:hover.link{
   color:#ccc; 
}
/* Slide transitions */

.slideUp {
-webkit-transform: translateY(-110px);
transform: translateY(-110px);
transition: transform .5s ease-out;
}

.slideDown {
-webkit-transform: translateY(0);
transform: translateY(0);
transition: transform .5s ease-out;
}
/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {
 #abierto{
display: none;
}
.nav-abierto{
display: none;
}
#mab{
display: none;
}
.pc{
display: none;
}
}

/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {
 #abierto{
display: none;
}
.nav-abierto{
display: none;
}
#mab{
display: none;
}
.pc{
display: none;
}
}

/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {
 #cerrado{
display: none;
}
.nav-cerrado{
display: none;
}
#mcr{
display: none;
}
.mobil{
display: none;
}
}

/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {
 #cerrado{
display: none;
}
.nav-cerrado{
display: none;
}
#mcr{
display: none;
}
.mobil{
display: none;
}
}
/* fin nav-bar------------------------------------*/

.categorias-botones-compactas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.categoria-boton-compacto {
    background-color: rgb(22, 129, 216);
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.categoria-boton-compacto:hover {
    background-color: rgb(22, 129, 216);
    transform: translateY(-1px);
}

.categoria-enlace-compacto {
    color: white !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center;
    padding: 8px 12px !important;
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
}

.categoria-boton-compacto .count {
    background: rgba(255, 255, 255, 0.25);
    color: white !important;
    padding: 1px 6px !important;
    border-radius: 10px;
    font-size: 0.7rem !important;
    margin-left: 6px !important;
    font-weight: 600;
}

/* Estilos para las secciones de categoría */
.categoria-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.categoria-col {
    padding: 30px;
    width: 50%;
}

.seccion-categoria {
    background-size: cover;
    background-position: center;
    min-height: 400px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.texto-vertical-centrado {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4); /* Overlay para mejor legibilidad */
}

.titulo-categoria {
    font-size: 2em;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 15px;
}
.titulo-servicio{
   font-family: 'Lato', sans-serif;
  font-weight: 900 ;
  color:#FFF;
}

.descripcion-categoria {
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-bottom: 20px;
}

.button-animado {
    transition: transform 0.3s ease;
}

.button-animado:hover {
    transform: scale(1.1);
}
.pagination-wrapper {
    display: flex;
    justify-content: center;
}

.page-numbers {
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    text-decoration: none;
}

.page-numbers.current {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Responsive */
@media (max-width: 768px) {
    .categoria-col {
        width: 100%;
    }
}

.footer {
    background-image: url(assets/img/fondo-clientes.png);	
    height: auto;
	padding-bottom: 30px;
	position: relative;
	width: 100%;
	border-bottom: 1px solid #CCCCCC;
	border-top: 1px solid #DDDDDD;
}
  /*boton whastapp*/
.float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:70px;
  right:9px;
  font-size:20px;
  z-index:100;
}