/* === color === */

a, a:hover,a:focus,a:active, footer a.text-link:hover, strike, footer ul.link-list li a:hover, .post-meta span a:hover, footer a.text-link, 
ul.meta-post li a:hover, ul.cat li a:hover, ul.recent li h6 a:hover, ul.portfolio-categ li.active a, ul.portfolio-categ li.active a:hover, ul.portfolio-categ li a:hover,ul.related-post li h4 a:hover, span.highlight,article .post-heading h3 a:hover,
.navbar .nav > .active > a,.navbar .nav > .active > a:hover,.navbar .nav > li > a:hover,.navbar .nav > li > a:focus,.navbar .nav > .active > a:focus, .validation  { 
	color:#F03C02; 
}

/* === background color === */
.navbar .nav > .active.dropdown > a.dropdown-toggle,
.navbar .nav > .active.dropdown > a.dropdown-toggle:hover,
.navbar .nav > .active.dropdown > a.dropdown-toggle:focus,
.custom-carousel-nav.right:hover, .custom-carousel-nav.left:hover, 
.dropdown-menu li:hover,
.dropdown-menu li a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a, 
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.pagination ul > .active > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span,
.flex-control-nav li a:hover, 
.flex-control-nav li a.active {
  background-color: #F03C02;
}

/* === border color === */
.pagination ul > li.active > a,
.pagination ul > li.active > span, a.thumbnail:hover, input[type="text"].search-form:focus {
	border:1px solid #F03C02;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: #F03C02;
}

input:focus {
	border-color: #F03C02;
}








#sendmessage {
	color: #F03C02;
}

.pullquote-left {
	border-left:5px solid #F03C02;
}

.pullquote-right {
	border-right:5px solid #F03C02;
}


/* === Header === */
/* --- toggle top area --- */
 .hidden-top {	
	background:#F03C02;
}
#header-hidden-link a.toggle-link,
#header-hidden-link a.top-link {
	background:#F03C02;
}







/* carousel */
/* .jcarousel-skin-tango .jcarousel-prev-horizontal:hover,  */
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus,
/* .jcarousel-skin-tango .jcarousel-next-horizontal:hover,  */
.jcarousel-skin-tango .jcarousel-next-horizontal:focus
 {
	background:#F03C02;
}

/*color y grosor del borde en hover sobre card*/
/* ul.clients li:hover {
	border:2px solid #ff0000;
} */



/*** ancho y alto del carrusel */
ul.clients li.customwidth
{
	 /* width: 364px;   */
  width: 385px;
  height: 540px;
}



/* buttons */
.btn-dark:hover,.btn-dark:focus,.btn-dark:active  {
  background: #F03C02;
  border:1px solid #F03C02;
}

.btn-theme {
  border:1px solid #F03C02;
  background: #F03C02;
}

/* modal styled */
.modal.styled .modal-header {
  background-color: #F03C02;
}


/* blog */
.post-meta {
	border-top:4px solid #F03C02;
}

.post-meta .comments a:hover  {
	color:#F03C02;
}

.widget ul.tags li a:hover {
	background: #F03C02;
}

.recent-post .text h5 a:hover{
	color:#F03C02;
}

/* pricing box */

.pricing-box-alt.special .pricing-heading {
	background: #F03C02;
}


/* portfolio */
.item-thumbs .hover-wrap .overlay-img {
	background: #F03C02;	
}


/* pagination */
#pagination a:hover {
    background: #F03C02;
}

/* pricing box */
.pricing-box.special .pricing-offer{
	background: #F03C02;
}


/* fontawesome icons */
.icon-square:hover,
.icon-rounded:hover,
.icon-circled:hover {
    background-color: #F03C02;
}
[class^="icon-"].active,
[class*=" icon-"].active {
    background-color: #F03C02;
}

/* fancybox */
.fancybox-close:hover {
	background-color:#F03C02;
}
.fancybox-nav:hover span {
	background-color:#F03C02;
}

/* parallax c slider */
.da-slide .da-link:hover{
	background: #F03C02;
	border: 4px solid #F03C02;
}

.da-dots span{
	background: #F03C02;
}

/* flexslider */
#featured .flexslider .slide-caption {
	border-left:5px solid #F03C02;
}

/* Nivo slider */
.nivo-directionNav a:hover {
    background-color: #F03C02;
}
.nivo-caption, .caption {
	border-bottom: #F03C02 5px solid;
}

/* footer */


/********************************************************************************************************/

/**************************************************/

/* Contenedor principal de la tarjeta */
.cardBox {
  perspective: 2000px; /* Profundidad del efecto 3D */
  width: 100%; 
  height: 535px;
  display: flex;
  justify-content: center; /* Centra la tarjeta horizontalmente */
  align-items: center; /* Centra la tarjeta verticalmente */
  position: relative;
}
/* Estructura de la tarjeta */
.card {
  width: calc(100% - 60px); /* Reduce el ancho en 60px */
  height: calc(100% - 60px); /* Reduce la altura en 60px */
  transform-style: preserve-3d;
  transition: transform 0.3s;
  position: relative;
  border-radius: 10px;
  box-shadow: 0.1px 0.1px 10px rgba(0, 0, 0, 0.302) ; /* Sombra reducida con menor desenfoque */
}
/* Caras de la tarjeta */
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  font-size: 0.8em;
  color: rgb(16, 16, 16); /* color de texto */
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgb(255, 255, 255); /* Borde blanco de 3 píxeles */
}
/* Estilo para la cara delantera */
.front {
  background-color: #ffffffc0;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(1.2px);
  border: 1px solid rgb(255, 255, 255); /* Borde blanco de 3 píxeles */
}
/* Estilo para la cara trasera */
.back {
  background-color: #ff4141;
  transform: rotateY(180deg);
  color: rgb(255, 255, 255); /* Ajustar el color del texto */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.card:hover {
  /* transform: scale(0); */
}
/* Botones flotantes */
.flip-btn, .return-btn {
  position: absolute;
  z-index: 100;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.758);
  color: white;
  border: 1px solid rgb(255, 213, 0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.flip-btn {
  top: 10px;
  right: 10px;
}
.return-btn {
  bottom: 10px;
  right: 10px;
}

.flip-btn:hover, .return-btn:hover {
  background-color: rgba(128, 0, 0, 0.7);
}






.whatsapp-button {
  background-color: #25D366;  /* Color de WhatsApp */
  color: white;  /* Color del texto */
  border: 3px solid rgba(0, 0, 0, 0.2);
  padding: 10px 20px;
  /* border: none; */
  border-radius: 25px;  /* Esquinas redondeadas */
  text-align: center;
  text-decoration: none;  /* Sin subrayado */
  display: block;  /* Necesario para centrar */
  margin: 20px auto;  /* Centrado horizontal con margen superior e inferior */
  font-size: 16px;
  cursor: pointer;
  width: fit-content;  /* Ajuste automático del ancho al contenido */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4); /* Sombra arrojada negra */
  -webkit-font-smoothing: antialiased; /* Antialiasing */ 
  -moz-osx-font-smoothing: grayscale; /* Antialiasing en macOS */
}

.whatsapp-button i {
  margin-right: 8px;  /* Espacio entre el icono y el texto */
}


/**************************************************/
/********************************************************************************************************/

.zoom-container {
  /*border: 2px solid rgb(255, 255, 255); /* Borde blanco translúcido */
  /* box-shadow: 0 0 4px rgba(0, 0, 0, 0.319); */
}

.zoom-container img {
  transition: transform 1.8s ease;
  width: 1000px;
}




/******************************************/

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 10000; /* Asegura que el header esté por encima de otros elementos */
  background-color: red; /* Mantén el color de fondo */
}



/************************************************************/


/* Contenedor principal de la tarjeta */
.cardBox1 {
  perspective: 2000px; /* Profundidad del efecto 3D */
  width: 500px;  /*100%; */
  height: 500px;
  display: flex;
  justify-content: center; /* Centra la tarjeta horizontalmente */
  align-items: center; /* Centra la tarjeta verticalmente */
  position: relative;
  padding-right: 100px;
}
/* Estructura de la tarjeta */
.card1 {
  width: calc(100% - 0px); /* Reduce el ancho en 60px */
  height: calc(100% - 0px); /* Reduce la altura en 60px */
  transform-style: preserve-3d;
  transition: transform 0.3s;
  position: relative;
  border-radius: 5px;
  /*box-shadow: 0.1px 0.1px 10px rgba(0, 0, 0, 0.437), -0.1px -0.1px 10px rgba(0, 0, 0, 0.195); /* Sombra reducida con menor desenfoque */
}
/* Caras de la tarjeta */
.front1, .back1 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  font-size: 1em;
  color: rgb(16, 16, 16); /* color de texto */
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgb(255, 255, 255); /* Borde blanco de 3 píxeles */
}
/* Estilo para la cara delantera */
.front1 {
  background-color: #ffffffa4;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(1.2px);
  border: 1px solid rgb(255, 255, 255); /* Borde blanco de 3 píxeles */
}
/* Estilo para la cara trasera */
.back1 {
  background-color: #ff4141;
  transform: rotateY(180deg);
  color: rgb(255, 255, 255); /* Ajustar el color del texto */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}



/**********************************************/


#slider {
  anchura: 80%;
}

.slide {
  anchura: 80%;
  display: none;
  position: relative;
}

.slide img {
  anchura: 80%;
  altura: 80%;
}

.slide.active {
  display: block;
}