/*
Theme Name: Coloza
Theme URI: https://logicalweb.bo
Version: 1.0
Description: Tema hijo de twentytwentyfive
Author: Enrrique
Author URI: https://logicalweb.bo
Template: twentytwentyfive
*/

/*general*/
.text-justify{
	text-align:justify;
}
.columns-2{
	columns:2;
}
.grecaptcha-badge{
	bottom:5rem !important;
}
.relative{
	position:relative;
}
header{
	
	position:sticky;
	width:100%;
	top:0;
	z-index:5;
}
a{
	text-decoration:none;
	outline:none;
}
header nav a{
	padding:0.5rem 0.5rem !important;
}
header a:hover{
	text-decoration:none;
	color:red !important;
}
header nav a:hover{
	background-color:black;
	color:white !important;
	border-radius:2rem;
}
header nav a[aria-current="page"]{
	background-color:black;
	color:white !important;
	border-radius:2rem;
}
@media(max-width:600px){
	.mobile{
		margin:0;
		display:block;
		height:auto;
		width:clamp(50px,10vw,100px);
	}
	.content-logo{
		display:none !important;
	}
}
@media(min-width:600px){
	.mobile{
		display:none;
	}
	.content-logo{
		display:block !important;
	}
}
@media(max-width:556px){
	.credits-content{
		justify-content:center !important;
	}
}
header .is-menu-open.is-menu-open{
	max-width:200px;
}
/*ANIMACIONES DE ENTRADA*/
/* Estado inicial */
.animate-up,
.animate-down,
.animate-left,
.animate-right,
.animate-zoom,
.animate-fade {
    opacity: 0;
    transition: all 2s ease;
    transform: translateY(0);
}

/* Estados específicos de entrada */
.animate-up {
    transform: translateY(100px);
}
.animate-down {
    transform: translateY(-100px);
}
.animate-left {
    transform: translateX(100px);
}
.animate-right {
    transform: translateX(-100px);
}
.animate-zoom {
    transform: scale(0.8);
}
.animate-fade {
    transform: none;
}

/* Cuando entra en pantalla */
.animate-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/*HOME*/
.content-areas{
	position:relative;
	width:100%;
	overflow:hidden;
}
.content-row-areas>div:hover img{
	transition: all 2s;
	cursor:pointer !important;
	opacity:0.8;
	transform:scale(1.2);
}
.content-row-areas>div {
	min-height:auto !important;
	height:100% !important;
	flex:none;
	margin:0 10px;;
}
.photo img{
	width:100%;
	object-position:top;
}
/*Staff*/
.staff-photo img{
	object-position:top;
}
.content-staff {
  perspective: 1000px;
	width:100%;
	height:100%;
}

.content-staff-inner {
	height:460px;
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Girar en hover */
@media (hover: hover) {
  .content-staff:hover .content-staff-inner {
    transform: rotateY(180deg);
  }
}

/* Ambos lados ocupan el mismo espacio */
.section-photo,
.section-contact {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
	height:100%;
  backface-visibility: hidden;
  transition: opacity 0.3s ease;
}

/* Frontal */
.section-photo {
  z-index: 2;
}

/* Trasera */
.section-contact {
  transform: rotateY(180deg);
  z-index: 1;
}


/*SERVICES*/
@media (min-width:782px){
	.content-service {
  		margin-left: clamp(-100px, -10vw, 0px);
	}
}
@media (max-width:781px){
	.content-service {
  		margin-top: clamp(-100px, -10vw, 0px) !important;
	}
}

/*CONTACT*/
.contact-form :where(input,textarea){
	width:100%;
	box-sizing:border-box;
	padding:0.5rem;
	    border: 1px solid #dfdfdf;
    border-radius: 0.5rem;
    font-size: 1.25rem;
}
.contact-form .wpcf7-submit{
	background-color:black;
	padding:1rem;
	border-radius:0.5rem;
	color:white;
}