/*
 Theme Name:   astra-child
 Theme URI:    
 Description:  Tema Hijo de astra para produccionesmaquina.xyz
 Author:       Matias
 Author URI:   
 Template:     astra
 Version:      1.0.0
*/

/* Aquí añadimos estilos personalizados */
div {
    word-break: keep-all; 
/* Mantiene la palabra junta si hay espacio */
    overflow-wrap: break-word;
 /* Rompe la palabra solo si es necesario */
}
h1, h2, h3, h4, h5, h6 {
    word-break: keep-all; 
    overflow-wrap: break-word;
}
.wp-block-heading{
    word-break: keep-all; 
    overflow-wrap: break-word;
}
.hero-triangulos {
    position: relative;
}

h1 span {
	white-space: nowrap;
}
@media (max-width:360px) {
	.wp-block-heading.titulo-principal {
	    font-size: 60px !important;
	}

}


h2.wp-block-heading.titulo2 {
	letter-spacing: -1px;
	font-size:60px;
} 
p.texto2 {
	font-size:36px;
}

@media(max-width: 1105px) {
	.contenedor-columnas {
		flex-direction:column;
		text-align:center;
	}
}

@media(max-width: 550px){
	h2.wp-block-heading.titulo2 {
		font-size: 50px;
	}
	p.texto2 {
		font-size:30px;
	}
}
@media(max-width: 451px){
	h2.wp-block-heading.titulo2 {
		font-size: 40px;
	}
	p.texto2 {
		font-size:25px;
	}
}
@media(max-width: 366px){
	h2.wp-block-heading.titulo2 {
		font-size: 35px;
	}
	p.texto2 {
		font-size:20px;
	}
}
.hero-triangulos::before {
    content: "";
    position: absolute;
    bottom: -10vw;
    left: 0;
    width: 17vw;   /* tamaño del triángulo */
    height: 17vw;
    background-color: #135E69;
    clip-path: polygon(0% 0%, 0% 94%, 100% 0%); /* triángulo rectángulo inferior izquierdo */
    z-index: 99;	
}
.hero-triangulos::after {
    content: "";
    position: absolute;
    top: 0vw;
    right: 0;
    width: 12vw;   /* tamaño del triángulo */
    height: 23vw;
    background-color: #D8F6C8;
    clip-path: polygon(0% 50%, 100% 100%, 100% 0%); /* triángulo rectángulo superior derecho */
    z-index: 99;	
}


/* tarjetas conferencistas (que se agranden cuando pase el mouse sobre de ellas) */

.tarj-conferencista {
	transition: transform 0.3s ease;
}

.tarj-conferencista:hover {
	transform: scale(1.07)
}

.justificar {
	text-align:justify !important;
}
p.keynoter {
	text-align: justify;
}
/* Para fondos inclinados */

.fondo-fecha {
    position: relative;
    width: 100%;
    height: 112%;
    transform: skewY(-2deg);
	transform-origin: center;
	z-index:1;
}
.fondo-fecha > * {
	position:relative;
	transform: skewY(2deg);
	transform-origin: center;
	z-index:2;	
}
.fondo-logos {
    position: relative;
    width: 100%;
    height: 112%;
    transform: skewY(-2deg);
	transform-origin: center;
	z-index:1;
}
.fondo-logos > * {
	position:relative;
	transform: skewY(2deg);
	transform-origin: center;
	z-index:2;	
}

.fondo-3 {
    position: relative;      /* Necesario para posicionar el pseudo‑elemento */
    background-color: transparent; /* Para que se vea el fondo inclinado */
    z-index: -1;
}

.fondo-3::before {
    content: "";
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F0F2F5; 
    z-index: -1;               /* Lo envía detrás del contenido */
}

.contenedor-registro {
	position:relative;
	z-index: 23;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

}
.contenedor-registro::after {
	content: '';
    position: absolute;
    bottom: 0px; /* Ajusta este valor al tamaño de tu sombra */
    left: 0;
    width: 100%;
    height: 20px; /* Altura suficiente para que se vea la sombra */
    box-shadow:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 
            0 4px 6px -2px rgba(0, 0, 0, 0.05);
    pointer-events: none; /* Para que el usuario pueda hacer clic "a través" de la sombra */
    z-index: 3;
}

.contenedor-registro::before {
	content: '';
    position: absolute;
    top: 0px; /* Ajusta este valor al tamaño de tu sombra */
    left: 0;
    width: 100%;
    height: 20px; /* Altura suficiente para que se vea la sombra */
    box-shadow:   0 -10px 15px -3px rgba(0, 0, 0, 0.1); 
    pointer-events: none; /* Para que el usuario pueda hacer clic "a través" de la sombra */
    z-index: 3;
}

@media (max-width: 470px) {
	.fondo-inclinado::before {
		top:-2%;
		height:108%;
		
	}
}
@media (max-width: 921px) {
	.fondo-inclinado::before {
		top:-5%;
	}

}

.grupo-animado {
  opacity: 0;
  transform: scale(.9);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cuando el grupo entra en pantalla, se activa la transición */
.grupo-animado.in-view {
  opacity: 1;
  transform: scale(1);
}

/* Retrasos para que aparezcan uno tras otro */
.grupo-animado.grupo-1.in-view {
  transition-delay: 0s;
}

.grupo-animado.grupo-2.in-view {
  transition-delay: 0.3s;
}

.grupo-animado.grupo-3.in-view {
  transition-delay: 0.6s;
}

.grupo-animado.grupo-4.in-view {
  transition-delay: 0.9s;
}



/* Para el fondo de la seccion ACTIVIDADES */

.fondo-actividades {
    position: relative;      /* Necesario para posicionar el pseudo‑elemento */
    background-color: transparent; /* Para que se vea el fondo de colores */
    z-index: 1;
}
	
.fondo-morado {
    position: absolute;
    width: 100%;  
    height: 100%;
    top: 0%;
    left: 0%;
    background-color: #d5cae9;
    clip-path: polygon(0% 15%, 100% 5%, 100% 90%, 0% 90%); 
	z-index:-1;
}

.franja-verde {
    position: absolute;
    width: 100%;   /* tamaño del triángulo */
    height: 100%;
    background-color: #D8F6C8;
    clip-path: polygon(0% 50%, 100% 50%, 100% 72%, 0% 80%); /* triángulo rectángulo inferior izquierdo */
	z-index:-1;
}

.franja-verde.sup {
    top: -24%;
    left: 0%;
}

.franja-verde.inf {
    top: 25%;
    left: 0%;
}

/* Patra los triangulos y circulos que aparecen en la seccón de actividades */
.contenedor-principal-fig-y-texto {
    position: relative;;
    text-align: center;
}

.figuras {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 150%;
    height: 150%;
    z-index: 4;
}

/* Círculo (elemento independiente) */
.circulo {
    position: absolute;
    left : 50%;
    top: 50%;
    transform: translateY(0%);
    width: 40px;
    height: 40px;
    background-color: #f2e0c1;
    border-radius: 50%;
}

.circulo1 {
  left:-20%;
  top: 0%;
}
.circulo2 {
  left:70%;
  top: 30%;
}

.circulo3 {
  left:20%;
  top: 15%;
}
.triangulo {
    content: "";
    /*position: relative;
    top: -10%;
    left: -10%;*/
    width: 100%;   /* tamaño del triángulo */
    height: 100%;
    background-color: #417d87;
    clip-path: polygon(0% 25%, 0% 75%, 10% 50%); /*0.5% 28.5%, 0.5% 72.5%, 9.5% 50%*/
    z-index: 2;
}



@media(max-width: 921px){
	.fondo-morado {
	}
	h4.h4-tableta {
		font-size: 1.5rem !important;
	}
	p.p-tableta{
		font-size: 1rem !important;
	}
}

@media(max-width: 479px){
	.titulo2 {
		font-size:3rem;
	}
}

/* Estios para el mapa */
.mapa-con-sombra {
    position: relative;
    min-height: 400px; /* o la altura que desees */
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    overflow: hidden;
}
/* Para colocar bien el mapa */
.iframe-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

span.texto-morado {
	color: #ac9FF7;
} 
span.texto-amarillo {
	color: #fceb05;
}

.wp-swiper .swiper-button-next, .wp-swiper .swiper-button-prev {
	color: #ffffff !important; 
}
.wp-swiper1 .swiper-button-next, .wp-swiper .swiper-button-prev {
	color: #135E69 !important; 
}
.swiper-pagination-horizontal.swiper-pagination-bullets {
	position: relative;
	bottom:-8px
}

/* ESCENA DE ANIMACIÓN - Posicionada en la parte inferior izquierda */
.scene {
    position: fixed;
    bottom: 0;
    right: 0;
    width: auto;      /* o un ancho específico si necesitas */
    height: auto;
    z-index: -1;
    pointer-events: none;
}

.circle-test {
    width: 250px;
    height: 250px;
    background: #303030;
    border-radius: 50%;
	position: relative;  /* o absolute, según necesites */
    bottom: 15em;
    right: 3em;
}

/* Contenedor de la cruz */
.cross {
    position: absolute;      /* Se posiciona respecto a .scene */
    bottom: 7em;            /* Lo colocamos debajo del círculo (ajusta este valor) */
    right: 10.5em;              /* Alineación horizontal con el círculo (mismo right que el círculo) */
    width: 60px;
    height: 60px;
	
    /* Para que la cruz se vea bien, podemos usar transform: translateX(?) si es necesario */
    /* Ajusta si la cruz no queda centrada exactamente */
    transform: translateX(50%); /* Si el centro de la cruz debe coincidir con el centro del círculo, prueba esto */
}

/* Línea vertical y horizontal de la cruz */
.cross::before,
.cross::after {
    content: '';
    position: absolute;
    background: repeating-linear-gradient(
        45deg,
        #000,
        #000 10px,
        #ff0 10px,
        #ff0 20px
    ); /* Patrón de rayas diagonales negras y amarillas */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	border-radius: 50%;
}

/* Línea vertical (girada 90 grados) */
.cross::after {
    transform: rotate(90deg);
}

/* Círculo pequeño en espiral */
.spiral-ball {
    position: fixed;
    width: 50px;
    height: 50px;
    background: #ff6600;
    border-radius: 50%;
    left: 0;
    top: 0;
    transform: translate(0, 0);
    animation: spiralAndCross 5s linear infinite;
    z-index: 10000;
    pointer-events: none;
}

/* Retrasos para que no salgan todas a la vez */
.ball-1 {
    animation-delay: 0s;
}
.ball-2 {
    animation-delay: 1.5s;  /* sale 1.5s después de la primera */
}
.ball-3 {
    animation-delay: 3s;    /* sale 3s después */
}

/* Keyframes: misma trayectoria que antes (ahora con bucle) */
@keyframes spiralAndCross {
    0% {
        transform: translate(0, 0);
		opacity: 1;
    }
    10% {
        transform: translate(5vw, 2vh) rotate(45deg);
    }
    20% {
        transform: translate(15vw, 8vh) rotate(90deg);
    }
    30% {
        transform: translate(30vw, 20vh) rotate(135deg);
    }
    40% {
        transform: translate(50vw, 15vh) rotate(180deg);
    }
    50% {
        transform: translate(80vw, 30vh) rotate(225deg);
    }
    /* Pasa por el centro del círculo grande */
    60% {
        transform: translate(calc(100vw - 3em - 250px + 25px), calc(100vh - 15em - 250px + 25px)) rotate(270deg);
        opacity: 1;
    }
    /* Desaparece inmediatamente después */
    61% {
        opacity: 0;
    }
    100% {
        transform: translate(calc(100vw + 150px), calc(100vh + 50px));
        opacity: 0;
    }
}