/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

.elementor-heading-title {
	strong,b {
		font-weight: 700;
	}
}

/* Incorporado | https://oubaitori.probar.com.es/contacto/ */

.elementor-field-type-text.elementor-field-group.elementor-column.elementor-field-group-name.elementor-col-100,
.elementor-field-type-email.elementor-field-group.elementor-column.elementor-field-group-email.elementor-col-100.elementor-field-required,
.elementor-field-type-textarea.elementor-field-group.elementor-column.elementor-field-group-message.elementor-col-100
{
  	display: flex;
  	flex-direction: row;
  	flex-wrap: nowrap;
  	align-items: baseline;
	border-bottom: solid 2px #E4E2D9;
	padding-bottom: 15px;
	label {
		min-width: 100px
	}
}
.elementor-field-option > label:nth-child(2) {
  font-size: 14px !important;
	a {
		color: #998F84;
		text-decoration: underline;
	}
}
.tablaConctacto {
	table tbody > tr:nth-child(2n+1) > td, table tbody > tr:nth-child(2n+1) > th,
	table tbody tr:hover > td, table tbody tr:hover > th	{
  		background-color: transparent;
	}
	
	table td,
	table th {
	  border:none;
	}
	table th {
		font-size: 20px;
		color: #A8804F;
		vertical-align: inherit;
		p {
			margin-bottom: 0;
			margin-top: 1rem;
		}
	}
	table td {
		font-size: 34px;
		font-family: "Tobias TRIAL";
		
	}
	table tr {
		border-top: solid 2px #E4E2D9;
	}
}

.fotoAnimada:hover {
	img {
		transform: scale(1.1) !important;
		transition: all 1s !important;
	}
}

.fotoAnimada {
	overflow: hidden;

	img {
		transition: all 1s !important;
	}
}

/* ========================================
   ANIMACIÓN DE ABANICO - PROYECTOS
   ======================================== */

/* Contenedor principal - usando main#content */
main#content {
	position: relative;
	/* min-height: 300vh; */
}

/* Hero Section */
.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	padding: 2rem;
}

.hero-fan {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.hero-fan-item,
.hero-fan .hero-foto-principal {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 0);
	transform-origin: center bottom;
	will-change: transform, opacity;
}

.hero-fan-item {
	width: 20vw;
	max-width: 20vw;
	height: auto;
	z-index: 1;
}

.hero-fan-item img,
.hero-fan-item picture,
.hero-fan-item source {
	width: 100%;
	height: auto;
	display: block;
}

.hero-fan .hero-foto-principal {
	z-index: 10;
}

/* Imagen destacada con z-index superior */
.fotoPrincipal {
	position: relative;
	z-index: 150;
}

.hero h1,
.hero h2,
.hero .elementor-heading-title {
	text-align: center;
	font-size: clamp(2rem, 5vw, 4rem);
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 100;
}

/* Contenedor de imágenes */
.animacionImagenes {
	position: relative;
	width: 100%;
	min-height: 100vh;
	z-index: 50;
}

/* Contenedores de proyecto individuales */
.animacionImagenes .e-con.e-child {
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.animacionImagenes * {
	transition: none !important;
}

/* Suavizar scroll */
html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Responsive */
@media (max-width: 1024px) {
	.animacionImagenes {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 1.5rem;
	}
}

@media (max-width: 768px) {
	main#content {
		min-height: 250vh;
	}

	.hero {
		height: 70vh;
	}

	.animacionImagenes {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 1rem;
		padding: 1rem;
	}
}

@media (max-width: 480px) {
	.animacionImagenes {
		grid-template-columns: 1fr;
	}
}