/*!
Theme Name: Bengoa
Theme URI: http://underscores.me/
Author: Triplevdoble
Author URI: https://www.triplevdoble.com/
Description: Creado por Triplevdoble para Bengoa
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bengoa
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Bengoa is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* COOKIES */
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
	background-color: #000000 !important;
    border-color: #000000 !important;
}
#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
	border: 2px solid #000000 !important;
    background-color: #000000 !important;
}
#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a {
	color: #000000 !important;
}
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
	border-bottom: 1px solid #000000 !important;
	color: #000000 !important;
}

#CookiebotWidget{
    display: none !important;
}

/* COOKIES */


/*--------------------------------------------------------------
>>> Generales:
----------------------------------------------------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.site-title{
	display: none;
}

.site-main{
	overflow: hidden;
}

/* QUITAMOS MOSCA DE RECAPTCHA DE GOOGLE */
.grecaptcha-badge { visibility: hidden; }


body{
  	font-family: "aktiv-grotesk-extended", sans-serif;
}

img{
    width: 100%;
    height: auto;
}

a{
	text-decoration: none;
	color: inherit;
	cursor: pointer!important;
	pointer-events: auto!important;
}

ul, li{
	list-style-type: none;
	padding-left: 0;
}

h1, h2, h3, h4, h5, p, ul, a{
	margin-bottom: 0;
	font-family: "aktiv-grotesk-extended", sans-serif;
}

h1 {
    font-size: clamp(14px, 3vw, 19px);
    line-height: 105%;
    font-weight: 400;
    color: var(--color2);
}

h2{
	font-size: clamp(41px, 3vw, 51px);
	font-weight: 900;
	line-height: 120%;
	color: var(--color2);
}


p{
	font-size: clamp(16px, 2vw, 18px);
	line-height: 120%;
    font-weight: 400;
	color: var(--color2);
}


.py-200{
	padding: clamp(100px, 10vw, 200px) 0;
}

.py-100{
	padding:clamp(50px, 10vw, 100px) 0;
}


/* Colores */
:root {
  --color1: #000000; /*Negro*/
  --color2: #ffffff; /*Blanco*/
  --color3: #6647FF; /*Morado*/
/*  --color4: #D33838; 
*/}

/* Botones */

/* --Botón Nav */
.btn-menu{
	position: fixed;
	top: 5%;
	right: 20px;
	z-index: 100;
	
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: none;
	border-radius: 50%;
	background-color: var(--color1);
	cursor: pointer;
	transition: background-color .3s ease;
}

/*@media(min-width: 768px){
	.btn-menu{
		top: 50px;
	}
}

@media(min-width: 992px){
	.btn-menu{
		top: 80px;
	}
}
*/

.btn-menu i{
	display: flex;
	color: var(--color2);
	font-size: 25px;
}

.btn-menu:hover{
  background-color: var(--color3);
}

.btn-menu:hover .btn-menu bi{
  color: var(--color1)!important;
}

/* --Botón Form */

.arrow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 999px;
	background: var(--color1);
	color: var(--color2);
	cursor: pointer;
	font-family: "aktiv-grotesk-extended", sans-serif;
	font-size: clamp(12px, 3vw, 18px);
	padding: 5px clamp(12px, 3vw, 14px);
	overflow: hidden;
	transition: width .3s ease;
}

/* Expandir ancho al pasar el ratón */
.arrow-btn:hover,
.arrow-btn:focus {
	width: auto;
	border-radius: 999px;
}

.arrow-btn .label {
	white-space: nowrap;
	max-width: 0;
	opacity: 0;
	margin-right: 0;
	transform: translateX(-6px);
	transition: all .3s ease;
	margin-top: 3px;
}

.arrow-btn:hover .label,
.arrow-btn:focus .label {
	max-width: 120px;
	opacity: 1;
	margin-right: 10px;
	transform: translateX(0);
}

.arrow-btn .icon {
	width: clamp(20px, 3vw, 25px);
	height: auto;
	aspect-ratio: 1/1;
	flex-shrink: 0;
}


.arrow-btn-bl{
	background: var(--color2);
	color: var(--color1);	
}

/* ------ HEADER ------ */
.offcanvas {
    background-color: var(--color3);
    padding: 0 clamp(15px, 2vw, 80px) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 30px;
    width: 100vw!important;
}
.offcanvas-backdrop {
    width: 100%;
    height: 100%;
}

.offcanvas-cont {
    width: 100%;
    display: flex;
    justify-content: end;
    height: 100%;
}
.logo-vertical {
    position: absolute;
    height: 100%;
    top: 0;
    transform: translate(-50%, 0px);
	left: -30%;
	background-color: var(--color3);
}
.logo-vertical img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

@media (min-width:350px){
	.logo-vertical {
		left: 0;
	}
	.logo-vertical {
		background-color: transparent;
	}
}

@media (min-width:700px){
	.offcanvas{
		width: 80vw!important;
	}	

}
@media (min-width:1200px){
	.offcanvas{
		width: 50vw!important;
	}	

}

@media (min-width:1900px){
	.offcanvas{
		width: 40vw!important;
	}	
}

.offcanvas .btn-close{
	background-color: var(--color2);
	opacity: 100%;
	width: 50px;
	height: 50px;
	box-sizing: inherit;
	padding: 0;
	margin: 0;
	border-radius: 999px;
}

.offcanvas .btn-close:hover,
.offcanvas .btn-close i:hover{
  filter: invert(1); /* cambia color del aspa */
}

.offcanvas-header{
	padding: 0;
}

.offcanvas-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
	max-width: 400px;
	color: var(--color2);
}

.offcanvas-title{
	color:var(--color2);
	text-align: right;
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 500;
	line-height: 115%; 
	max-width: 230px;
}

@media (min-width:500px){
	.offcanvas-title{
		max-width: 350px;
	}	
}

.offcanvas ul{
	text-align: end;
}

.offcanvas ul li{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	transition: scale .5s ease;
}

.offcanvas ul li a{
	color: var(--color2);
	font-size: clamp(18px, 3vw, 24px);
	
}

.offcanvas ul li a:hover:before,
.offcanvas h3 a:hover:before{
	content: ">>";
	margin-right: 5px;
}

.offcanvas .separador:after{
	display: block;
	content: "";
	width: 30px;
	height: 5px;
	background-color: var(--color2);
}

.offcanvas .redes{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.offcanvas .redes i{
	color: var(--color2);
	font-size: 30px;
	transition: scale .3s ease;
}

.offcanvas .redes .redes-logo{
	transition: scale .3s ease;
}

.offcanvas .btn-contacto a{
	display: block;
	padding: 8px 15px;
	background-color: var(--color2);
	border-radius: 30px;
	color: var(--color3);
	transition: all .3s ease;
}

.offcanvas .btn-contacto a:hover,
.offcanvas .redes-logo a:hover{
	transform: scale(.90);
}


/* ------ FORM ------ */

#form{
	background-color: var(--color1);
}
#form .offcanvas-body{
	max-width: none;
	align-items: flex-start;
	padding: 150px clamp(15px, 2vw, 80px) 0px clamp(15px, 2vw, 80px);

}
#form form input,
#form form textarea{
	width: 100%;
	padding: 15px;
}
#form form input::placeholder{
	color: white;
}

#form input:focus,
#form textarea:focus {
  outline: 2px solid var(--color3);
  border-radius: 0;
}


#form form .wpcf7-form-control-wrap{
	display: block;
	height: 100%;
}
#form form textarea::placeholder{
	color: black;
}
#form form textarea{
	border: none;
	margin-top: 20px;
	height: 140px;
}
#form form .wpcf7-text,
#form form .wpcf7-email,
#form form .wpcf7-tel{
	background-color: black;
	color: white;
	border: 1px solid white;
}
#form form .wpcf7-text{
	border-right: 1px solid black;
	border-left: 1px solid black;
}
#form form .wpcf7-email{
	border-right: none;
	border-top: none;
}
#form form .wpcf7-tel{
	border-left: none;
	border-top: none;
}

@media(min-width:768px){
	#form form .wpcf7-tel{
		border-left: 1px solid white;
		border-top: none;
	}
}
.recaptcha-google p{
	font-size: 10px;
	margin-bottom: 20px;
	margin-top: 10px;
}
input[type="checkbox"]{
	width: auto!important;
}
.wpcf7-list-item-label{
	font-size: 14px;
}
.wpcf7-list-item{
	margin: 0;
}
input.wpcf7-submit{
	display: block;
	background-color: white;
	border: none;
	border-radius: 999px;
	padding: 7px 20px!important;
	width: auto!important;
	color: black;
	float: right;
}
#form .offcanvas-header {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	width: 100%;
	padding:clamp(40px, 4vw, 80px) 0 0 clamp(40px, 4vw, 80px);
	position: absolute;
	top: 0;
}



/* ------ PORTADA ------ */

.page-template-page-portada section{
	margin: -1px;
}


.hero {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #000;
}

.hero .fondo {
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.hero .fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
/*  transform: scale(.1.1);
*/  animation: fondo 7s ease forwards;
  transform-origin: center center;
}

@keyframes fondo {
  0% {
    opacity: 0;
/*    transform: scale(.1.1);
*/  }
  100% {
    opacity: 1;
/*    transform: scale(1);*/
  }
}


.site-branding {
    height: 100px;
    position: absolute;
    top: 20px;
	left: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
	column-gap: 20px;
	row-gap: 0;
	flex-wrap: wrap;
	z-index: 101;
	margin-right: 45px;

}

.page-template-page-portada .site-branding {
	animation: fondo 5s ease forwards;
}

.site-branding .logo{
	width: 200px;
	height: auto;
}

@media (min-width:700px){
	.site-branding .logo{
		width: 300px;
	}
}

.site-branding .logo img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-branding  h1{
	text-transform: uppercase;
	margin-top: 15px;
	text-shadow: 1px 1px #000;
}

.site-branding  p{
	text-transform: uppercase!important;
	margin-top: 15px;
	text-shadow: 1px 1px #000;
}

.circulo-logo {
  position: absolute;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* solo centra */
  z-index: 1;
  width: clamp(290px, 75vw, 700px);
  height: auto;
}

.circulo-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
@keyframes logo{
 0%   { transform: translate(-50%, -50%) scale(1); }
  20%  { transform: translate(-50%, -50%) scale(1.03); }
  40%  { transform: translate(-50%, -50%) scale(1); }
  60%  { transform: translate(-50%, -50%) scale(1.03); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.circulo-logo.aos-animate {
  animation: logo 1s ease-out forwards;
  transform-origin: 50% 50%;
}
*/

@keyframes rot{
 0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.circulo-logo.aos-animate {
  animation: rot 10s linear forwards infinite;
  transform-origin: 50% 50%;
}




/* ------ Servicio ------ */

/* Generales */

.servicio{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/*height: 100vh;
	height: clamp(500px, 43vw, 1080px);*/
padding: clamp(100px, 75vw, 300px) 0;
}

.servicio .fondo{
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: -2;
}

.servicio .fondo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}



.servicio .circulo{
	position: relative;
	width:clamp(290px, 95vw, 700px);
	height: auto;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background-color: white;
	padding: clamp(40px, 10vw, 100px);
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;	
}

.circulo-txt{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap:clamp(10px, 3vw, 30px);
}

.circulo-txt h2{
	color: var(--color1);
	font-size: clamp(30px, 7vw, 50px);
	margin-bottom: 0;
	font-weight: 500;
}

.circulo-txt p{
	color: var(--color1);
	font-size: clamp(12px, 3vw, 18px);
	margin-bottom: 0;
}

.servicio .arrow-btn{
	position: absolute;
	bottom: clamp(30px, 3vw, 100px);
}


/* ------------------------------------------------------------------------------------------------ Gráficos */

.servicio .graficos{
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: -1;
}

.graficos .forma svg{
	height: auto;
	aspect-ratio: 1/1;
}
.graficos .forma svg path,
.graficos .forma svg circle,
.graficos .forma svg line{
	stroke: white;
	stroke-width: clamp(2px, .8vw, 6px);
	vector-effect: non-scaling-stroke;
}	



/* ------------------------------------------------------------------------------------------------ S1 - Eventos */

.servicio-eventos .graficos .forma-1{
	position: absolute;
	top: 10%;
	right: 5%;
}
.servicio-eventos .graficos .forma-1 svg{
	width: 8vw;
}

.servicio-eventos .graficos .forma-2{
	position: absolute;
	top: 20%;
	left: 10%;
}
.servicio-eventos .graficos .forma-2 svg{
	width: 20vw;
}
.servicio-eventos .graficos .forma-3{
	position: absolute;
	top: 55%;
	left: 2%;
}
.servicio-eventos .graficos .forma-3 svg{
	width: 10vw;
}
.servicio-eventos .graficos .forma-4{
	position: absolute;
	top: 65%;
	right: 3%;
}
.servicio-eventos .graficos .forma-4 svg{
	width: 40vw;
}

@media(min-width:992px){
	.servicio-eventos .graficos .forma-1{
		right: 10%;
	}
	.servicio-eventos .graficos .forma-2{
		left: 15%;
	}
	.servicio-eventos .graficos .forma-3{
		left: 10%;
	}
}

@keyframes poligono {
  from {transform: rotate(90deg)}
  to {transform: rotate(0)}
}
.servicio-eventos-graficos .forma.aos-animate{
	animation-name: poligono;
	animation-duration: 3s;		
}



/* ------------------------------------------------------------------------------------------------ S2 - Bodas */

.servicio-bodas .circulo{
	background-color: #8EF9FF;
}

.servicio-bodas .graficos .forma-1{
	position: absolute;
	transform: translate(-50%, -50%);
	top: 35%;
	left: 50%;
}
.servicio-bodas .graficos .forma-1 svg{
	width:clamp(290px, 95vw, 700px);
}

.servicio-bodas .graficos .forma-2{
	position: absolute;
	transform: translate(-50%, -50%);
	top: 65%;
	left: 50%;
}
.servicio-bodas .graficos .forma-2 svg{
	width:clamp(290px, 95vw, 700px);
}

@media(min-width:992px){
	.servicio-bodas .graficos .forma-1{
		top: 50%;
		left: 35%;
	}
	.servicio-bodas .graficos .forma-2{
		top: 50%;
		left: 65%;
	}
}

.servicio-bodas-graficos .forma {
  stroke-dasharray: 2175;      /* longitud total */
  stroke-dashoffset: 2175;     /* empieza vacío */
  transform-origin: 50% 50%;   /* centro del círculo */
}

@keyframes dibujar-dcha {
  from { stroke-dashoffset:2175; }
  to   { stroke-dashoffset: 0; }
}

@keyframes dibujar-izquierda {
  from { stroke-dashoffset: -2175; }
  to   { stroke-dashoffset: 0; }
}

.servicio-bodas-graficos .forma-1.aos-animate {
  animation: dibujar-dcha forwards linear;
	animation-duration: 1s;
}

.servicio-bodas-graficos .forma-2.aos-animate {
  animation: dibujar-izquierda forwards linear;
	animation-duration: 1s;
}


/* ------------------------------------------------------------------------------------------------ S3 - Sonido */

.servicio-sonido .circulo{
	background-color: var(--color1);
}
.servicio-sonido .circulo-txt h2,
.servicio-sonido .circulo-txt p{
	color: var(--color2);
}

.servicio-sonido .graficos .forma { 
	position: absolute;  /* antes: relative */
  inset: 0;
}
.servicio-sonido .graficos .forma ul li{ 
	position: static; 
}

.servicio-sonido .graficos .forma-1 ul li:after,
.servicio-sonido .graficos .forma-2 ul li:after{
    position: absolute;
    border-radius: 6px;
    content: "";
    background-color: white;
    height: 5px;
	width: 10vw;
}

/* Estado base y reset cuando NO está en viewport */
.servicio-sonido .graficos .forma ul li::after{
  transform: scaleX(0);

}

/* Activo solo cuando AOS añade la clase */
.servicio-sonido .graficos .forma.aos-animate ul li::after{
  animation: grow 480ms ease-out forwards;
}
.servicio-sonido .graficos .forma-1 ul li:after{
    left: -5px;
	transform-origin: left center;
}
.servicio-sonido .graficos .forma-2 ul li:after{
    right: -5px;
	transform-origin: right center;
}

.servicio-sonido .graficos .forma-1 ul li.l-1:after {top: 20%; width: 4vw; }
.servicio-sonido .graficos .forma-1 ul li.l-2:after {top: 22%; width: 8vw; }
.servicio-sonido .graficos .forma-1 ul li.l-3:after {top: 24%; width: 10vw; }
.servicio-sonido .graficos .forma-1 ul li.l-4:after {top: 26%; width: 14vw; }
.servicio-sonido .graficos .forma-1 ul li.l-5:after {top: 28%; width: 8vw; }
.servicio-sonido .graficos .forma-1 ul li.l-6:after {top: 30%; width: 12vw; }
.servicio-sonido .graficos .forma-1 ul li.l-7:after {top: 32%; width: 16vw; }
.servicio-sonido .graficos .forma-1 ul li.l-8:after {top: 34%; width: 18vw; }
.servicio-sonido .graficos .forma-1 ul li.l-9:after {top: 36%; width: 14vw; }
.servicio-sonido .graficos .forma-1 ul li.l-10:after {top: 38%; width: 14vw; }
.servicio-sonido .graficos .forma-1 ul li.l-11:after {top: 40%; width: 18vw; }
.servicio-sonido .graficos .forma-1 ul li.l-12:after {top: 42%; width: 12vw; }
.servicio-sonido .graficos .forma-1 ul li.l-13:after {top: 44%; width: 14vw; }
.servicio-sonido .graficos .forma-1 ul li.l-14:after {top: 46%; width: 8vw; }
.servicio-sonido .graficos .forma-1 ul li.l-15:after {top: 48%; width: 6vw; }
.servicio-sonido .graficos .forma-1 ul li.l-16:after {top: 50%; width: 2vw; }

.servicio-sonido .graficos .forma-2 ul li.l-1:after {top: 60%; width: 2vw; }
.servicio-sonido .graficos .forma-2 ul li.l-2:after {top: 62%; width: 6vw; }
.servicio-sonido .graficos .forma-2 ul li.l-3:after {top: 64%; width: 4vw; }
.servicio-sonido .graficos .forma-2 ul li.l-4:after {top: 66%; width: 10vw; }
.servicio-sonido .graficos .forma-2 ul li.l-5:after {top: 68%; width: 18vw; }
.servicio-sonido .graficos .forma-2 ul li.l-6:after {top: 70%; width: 14vw; }
.servicio-sonido .graficos .forma-2 ul li.l-7:after {top: 72%; width: 16vw; }
.servicio-sonido .graficos .forma-2 ul li.l-8:after {top: 74%; width: 10vw; }
.servicio-sonido .graficos .forma-2 ul li.l-9:after {top: 76%; width: 14vw; }
.servicio-sonido .graficos .forma-2 ul li.l-10:after {top: 78%; width: 12vw; }
.servicio-sonido .graficos .forma-2 ul li.l-11:after {top: 80%; width: 8vw; }
.servicio-sonido .graficos .forma-2 ul li.l-12:after {top: 82%; width: 5vw; }
.servicio-sonido .graficos .forma-2 ul li.l-13:after {top: 84%; width: 14vw; }
.servicio-sonido .graficos .forma-2 ul li.l-14:after {top: 86%; width: 8vw; }
.servicio-sonido .graficos .forma-2 ul li.l-15:after {top: 88%; width: 6vw; }
.servicio-sonido .graficos .forma-2 ul li.l-16:after {top: 90%; width: 2vw; }

@keyframes grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* === ESCALONADO === */
:root{
  --step: 70ms;          /* escalón entre líneas */
  --group-gap: 1s;   /* espera para que empiece forma-2 */
}

/* forma-1 arranca ya */
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-1::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 0); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-2::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 1); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-3::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 2); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-4::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 3); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-5::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 4); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-6::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 5); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-7::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 6); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-8::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 7); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-9::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 8); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-10::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 9); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-11::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 10); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-12::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 11); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-13::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 12); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-14::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 13); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-15::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 14); }
.servicio-sonido .graficos .forma-1.aos-animate ul li.l-16::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--step) * 15); }

/* forma-2 arranca tras forma-1 (group-gap) */
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-1::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 0); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-2::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 1); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-3::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 2); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-4::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 3); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-5::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 4); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-6::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 5); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-7::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 6); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-8::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 7); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-9::after { animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 8); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-10::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 9); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-11::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 10); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-12::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 11); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-13::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 12); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-14::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 13); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-15::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 14); }
.servicio-sonido .graficos .forma-2.aos-animate ul li.l-16::after{ animation: grow 480ms ease-out forwards; animation-delay: calc(var(--group-gap) + var(--step) * 15); }
/* ------------------------------------------------------------------------------------------------ S4 - Djs */

.servicio-djs .circulo{
	background-color: #7CEF8A;
}

.servicio-djs .graficos .forma-1,
.servicio-djs .graficos .forma-2,
.servicio-djs .graficos .forma-3{
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}

.servicio-djs .graficos .forma{
	transform-origin: center;
}

.servicio-djs .graficos .forma svg{
	width: clamp(540px, 135vmin, 980px);
	transform-origin: 50% 50%;
}

.servicio-djs .graficos .forma-1{ transform: translate(-50%, -50%) scale(.85); }  /* interior */
.servicio-djs .graficos .forma-2{ transform: translate(-50%, -50%) scale(1); }  /* medio */
.servicio-djs .graficos .forma-3{transform: translate(-50%, -50%) scale(1.15); }  /* exterior */

/* interior */
.servicio-djs .graficos .forma-1 svg circle{
      stroke-dasharray: 60, 41; 
}
/* medio */
.servicio-djs .graficos .forma-2 svg circle{
  stroke-dasharray: 203, 102;
}
/* exterior */
.servicio-djs .graficos .forma-3 svg circle{
  stroke-dasharray: 680, 280;
}


@keyframes dibujar-derecha {
  from { stroke-dashoffset:2340; }
  to   { stroke-dashoffset: 2000; }
}

.servicio-djs-graficos .forma-1.aos-animate {
  animation: dibujar-derecha cubic-bezier(0.39, 0.003, 0, 0.996) forwards;
	animation-duration: 2s;
/*animation-iteration-count: infinite;*/		
		}

.servicio-djs-graficos .forma-2.aos-animate {
  animation: dibujar-derecha cubic-bezier(0.39, 0.003, 0, 0.996) forwards;
	animation-duration: 2.3s;
/*animation-iteration-count: infinite;*/		
}

.servicio-djs-graficos .forma-3.aos-animate {
  animation: dibujar-derecha forwards cubic-bezier(0.39, 0.003, 0, 0.996);
	animation-duration: 2.6s;
/*animation-iteration-count: infinite;*/		
}


/* ------------------------------------------------------------------------------------------------ S5 - Iluminación */

.servicio-iluminacion .circulo{
	background-color: var(--color1);
}
.servicio-iluminacion .circulo-txt h2,
.servicio-iluminacion .circulo-txt p{
	color: var(--color2);
}

.servicio-iluminacion .graficos .forma svg{
	width: 30vw;
	height: 30vw;
}

@media(min-width:992px){
.servicio-iluminacion .graficos .forma svg{
	width: 15vw;
	height: 15vw;
}

}
.servicio-iluminacion .graficos .forma-1{
	position: absolute;
	top: 5%;
	left: 5%;
}
.servicio-iluminacion .graficos .forma-2{
	position: absolute;
	top: 10%;
	right: 5%;
}
.servicio-iluminacion .graficos .forma-3{
	position: absolute;
	top: 70%;
	left: 15%;
}
.servicio-iluminacion .graficos .forma-4{
	position: absolute;
	top: 60%;
	right: 30%;
	z-index: 1;
}
.servicio-iluminacion .graficos .forma-5{
	position: absolute;
	top: 80%;
	right: 0%;
}

.servicio-iluminacion .graficos .forma line {
  opacity: 0;
}

@keyframes fadeInLine {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.servicio-iluminacion .graficos .forma.aos-animate line {
  animation: fadeInLine 0.1s forwards;
}

/* escalera */
.servicio-iluminacion .graficos .forma.aos-animate line:nth-child(1) { animation-delay: 0s; }
.servicio-iluminacion .graficos .forma.aos-animate line:nth-child(2) { animation-delay: 0.15s; }
.servicio-iluminacion .graficos .forma.aos-animate line:nth-child(3) { animation-delay: 0.3s; }
.servicio-iluminacion .graficos .forma.aos-animate line:nth-child(4) { animation-delay: 0.45s; }
.servicio-iluminacion .graficos .forma.aos-animate line:nth-child(5) { animation-delay: 0.6s; }
.servicio-iluminacion .graficos .forma.aos-animate line:nth-child(6) { animation-delay: 0.75s; }

.servicio-iluminacion .graficos .forma-2.aos-animate {
	animation-delay: .5;
}
.servicio-iluminacion .graficos .forma-3.aos-animate {
	animation-delay: 1;
}
.servicio-iluminacion .graficos .forma-4.aos-animate {
	animation-delay: 1.5;
}
.servicio-iluminacion .graficos .forma-5.aos-animate {
	animation-delay: 2;
}
/* ------------------------------------------------------------------------------------------------ S6 - Pantallas */

.servicio-pantallas .circulo{

}

.servicio-pantallas .graficos .forma-1 svg {
    transform: rotate(90deg);
    transform-origin: center;
}
.servicio-pantallas .graficos .forma-1 svg{
	width: 50vw;
}
.servicio-pantallas .graficos .forma-1{
	position: absolute;
	top: 15%;
	left: 20%;
}
.servicio-pantallas .graficos .forma-2 svg{
	height: 50vw;
	width: auto;
}
.servicio-pantallas .graficos .forma-2{
	position: absolute;
	top: 25%;
	left: 10%;
}
.servicio-pantallas .graficos .forma-3 svg{
	width: 80vw;
	height: 60vw;
}
.servicio-pantallas .graficos .forma-3{
	position: absolute;
	top: 60%;
	right: 5%;
}

@media(min-width:1200px){
.servicio-pantallas .graficos .forma-1{
	top: -5%;
	left: 20%;
}
.servicio-pantallas .graficos .forma-1 svg{
	width: 20vw;
}
.servicio-pantallas .graficos .forma-2{
	top: 15%;
	left: 10%;
}
.servicio-pantallas .graficos .forma-2 svg{
	height: 20vw;
	width: auto;
}
.servicio-pantallas .graficos .forma-3{
	top: 30%;
	right: 5%;
}
.servicio-pantallas .graficos .forma-3 svg{
	width: 40vw;
	height: 30vw;
}
	
	
.servicio-pantallas .graficos .forma-1 path,
.servicio-pantallas .graficos .forma-2 path{
  stroke-dasharray: 1400; 
  stroke-dashoffset: 1400; 
}
	
.servicio-pantallas .graficos .forma-3 path {
  stroke-dasharray: 2300; 
  stroke-dashoffset: 2300; 
}


@keyframes draw-rect {
  from { stroke-dashoffset: 1400; }
  to   { stroke-dashoffset: 0; }
}
	
.servicio-pantallas .graficos .forma.aos-animate path {
  animation: draw-rect 2s linear forwards;
}

}
/* ------------------------------------------------------------------------------------------------ S7 - Servicios para Djs */

.servicio-paradjs .circulo{
	background-color: #EAFF06;
}
/*
.servicio-paradjs .graficos .forma {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform-origin: center center;}
*/

.servicio-paradjs .graficos .forma {
  height: auto;
	  width: 100vw;
}

.servicio-paradjs .graficos path {
  stroke-dasharray: 3000;   /* largo suficiente para cubrir */
  stroke-dashoffset: 3000;  /* empieza invisible */
}
@keyframes draw {
  from { stroke-dashoffset: 3000; }
  to   { stroke-dashoffset: 0; }
}
.servicio-paradjs .graficos.aos-animate path {
  animation: draw 2s ease-out forwards;
}
.servicio-paradjs .graficos.aos-animate path:nth-of-type(1) {
  animation: draw 2s ease-out forwards;
}
.servicio-paradjs .graficos.aos-animate path:nth-of-type(2) {
  animation: draw 2s ease-out forwards 0.5s; /* con delay */
}
.servicio-paradjs .graficos.aos-animate path:nth-of-type(3) {
  animation: draw 2s ease-out forwards 1s; /* con más delay */
}


.servicio-paradjs .graficos .forma-1{ 
	position: absolute; 
	transform: translate(-50%, -50%); 
	top: 0; 
	left: 50%; 
	width: 100%;

} 
.servicio-paradjs .graficos .forma-2{ 
	position: absolute; 
	transform: translate(-50%, -50%); 
	top: 100%; 
	left: 50%; 
	width: 100%;

} 
@media(min-width:992px){ 
	.servicio-paradjs .graficos .forma-1 svg, 
	.servicio-paradjs .graficos .forma-2 svg{ 
		width: 50vw; 
	} 
	.servicio-paradjs .graficos .forma-1{ 
		transform: translate(-50%, -50%); 
		top: 50%; 
		left: 0; 
		width:auto;
	} 
	.servicio-paradjs .graficos .forma-2{ 
		transform: translate(-50%, -50%); 
		top: 50%; 
		left: 100%; 
		width:auto;
	} 
}



/* MÓVIL */
/*@keyframes cd-arriba {
  from { transform: translate(-50%, calc(-50% - 100vh)); }
  to   { transform: translate(-50%, calc(-50% - 50vh)); }  
}

@keyframes cd-abajo {
  from { transform: translate(-50%, calc(-50% + 100vh)); }
  to   { transform: translate(-50%, calc(-50% + 50vh)); }
}
*/
/* DESKTOP*/
/*@keyframes cd-izda {
  from { transform: translate(calc(-50% - 100vw), -50%); }
  to   { transform: translate(calc(-50% - 50vw), -50%); }
}

@keyframes cd-dcha {
  from { transform: translate(calc(-50% + 100vw), -50%); } 
  to   { transform: translate(calc(-50% + 50vw), -50%); } 
}



.servicio-paradjs-graficos .forma-1.aos-animate {
animation: cd-arriba .9s ease-out forwards;
}
.servicio-paradjs-graficos .forma-2.aos-animate {
animation: cd-abajo .9s ease-out forwards;
}
*/

@media (min-width: 992px) {
	.servicio-paradjs .graficos .forma svg {
	  width: 50vw;
	  height: auto;
	}
/*	.servicio-paradjs-graficos .forma-1.aos-animate {
	animation: cd-izda .9s ease-out forwards;
	}
	.servicio-paradjs-graficos .forma-2.aos-animate {
	animation: cd-dcha .9s ease-out forwards;
	}
*/
}




/* ------------------------------------------------------------------------------------------------ HISTORIA */


.historia{
	background-image:url("img/fondo_historia.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	background-blend-mode:  darken;
}

.historia{
	position: relative;
	padding: clamp(135px, 3vw, 200px) 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.historia-cont{
	background-color: white;
	padding: clamp(50px, 3vw, 100px) clamp(30px, 3vw, 100px);
}
.historia h2{
	color: var(--color1);
	margin-bottom: 20px;
	line-height: 110%;
	font-size:clamp(30px, 2vw, 50px);
}

@media(min-width:992px){
	.historia-txt{
		column-count: 2;
		column-gap: 50px;
	}
}


.historia-txt p{
	color: var(--color1);
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 130%;
}


.historia-txt h3{
	font-family: "Stalemate", cursive;
	text-align: end;
	margin-right: clamp(20px, 2vw, 40px);
	margin-top: clamp(20px, 2vw, 40px);
	font-size: clamp(40px, 2vw, 70px);
	font-weight: 900;
}

.historia-swiper{
	margin-bottom: clamp(30px, 2vw, 50px);;
}

.historia-swiper .swiper-slide {
	overflow: hidden;
	aspect-ratio: 4/2.2;
	width: 100%;
}

.historia-swiper .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.historia-swiper .swiper-pagination-bullet-active{
	background-color: var(--color2);
}

.historia-swiper .swiper-button-prev,
.historia-swiper .swiper-button-next{
	  display: none;
}

@media (min-width: 800px){
	.historia-swiper .swiper-button-prev,
	.historia-swiper .swiper-button-next{
		display: block;
		color: var(--color2);
	}

	.historia-swiper .swiper-button-prev {
		left: 20px;
		right: auto;

	}
	.historia-swiper .swiper-button-next {
		left: auto;
		right: 20px;
	}	
}


.historia-swiper .swiper-button-prev:after,
.historia-swiper .swiper-button-next:after {
	font-family: swiper-icons;
	text-transform: none !important;
	font-size: 24px;
}

.historia-swiper .swiper-button-prev:after {
	content: 'prev';
}

.historia-swiper .swiper-button-next:after {
	content: 'next';
}



/* ------------------------------------------------------------------------------------------------ Footer - Contacto */

footer{
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	row-gap: clamp(100px, 3vh, 300px);
	height: 95vh;
	width: 100vw;
	padding:100px clamp(30px, 4vw, 150px) clamp(30px, 4vw, 150px) clamp(30px, 4vw, 150px);
}

.direccion a,
.tel a,
.mail a{
	font-size: clamp(14px, 3vw, 16px);
	line-height: inherit;
}

.footer-menu li a{
	font-size: clamp(14px, 3vw, 16px);
	line-height: 100%;
}

footer a:not(.footer-central h2):hover{
	/*text-decoration: underline;*/
	color:var(--color3);
}
.footer-info{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	column-gap: 20px;
	row-gap: 25px;
	flex-wrap: wrap;
}

.footer-direccion {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.footer-direccion .direccion{
	text-align: center;
	max-width: 315px;
}

.footer-contacto  {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 20px;
	width: 100%;
}

.footer-contacto .tels,
.footer-contacto .tel{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.footer-contacto .tels{
	gap:  clamp(5px, 3vw, 10px);

}

.footer-contacto .tel:not(:last-child):after{
	content: "|";
	font-size: clamp(14px, 3vw, 16px);
	padding-left: clamp(5px, 3vw, 10px);
}

.footer-contacto .mails{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.footer-contacto .mail{
	text-align: center;
}		

.footer-central{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.footer-central .footer-logo{
	max-width: 1000px;
	margin-bottom: 10px;
	margin-top: -50px;
}
.footer-central .footer-logo img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.footer-central h2{
	text-align: center;
	color: black;
	font-size: clamp(20px, 3vw, 24px);
	font-weight: 600;
}
.footer-central h2 a{
	text-decoration: underline;
}
.footer-central h2 a:hover{
	color:var(--color3);
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	column-gap: 50px;
	row-gap: 10px;
	flex-wrap: wrap;
}

.footer-bottom-1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	column-gap: 50px;
	row-gap: 10px;
	flex-wrap: wrap;
}
	.footer-bottom-2{
		text-align: center;
	}

.footer-menu {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
	justify-content: flex-start;
    gap: 20px;
}
.footer-menu ul{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	column-gap: 20px;
	flex-wrap: wrap;
}

.footer-logos{
	display: flex;
	flex-direction: row;
	justify-content:center;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
}

.kit{
	height: 50px;
}
.kit img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

@media(min-width:992px){
	.footer-direccion .direccion{
		text-align: start;
	}

	.footer-info{
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}

	.footer-contacto  {
		align-items: end;
		width: auto;
	}
	.footer-contacto .tels,
	.footer-contacto .tel{
		justify-content: flex-end;
	}

	.footer-contacto .mail{
		text-align: end;
	}

	.footer-bottom-1{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.footer-bottom-2{
		text-align: start;
	}
	.footer-menu ul{
		align-items: flex-start;
	}

	.footer-logos{
		justify-content: space-between;
		align-items: center;
	}

}


/* ----INTERIOR - 404----- */

/* 404 */


.error-404{
	min-height: 75vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.contenido-404 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 30px;
}


.contenido-404 h1 {
    font-size: 30px;
    line-height: 105%;
    font-weight: 500;
    color: var(--color1);
}

.contenido-404 h2 {
    font-size: clamp(14px, 4vw, 40px);
	color: var(--color1);
}

.contenido-404 p {
    color: var(--color1);
}

.contenido-404 a {
    color: var(--color1);
	text-decoration: underline;
}

.contenido-404 a:hover {
    color: var(--color3);
}

/* Interior */

/*body.page-template-page-interior {
	background-color: var(--color1)!important;
}
*/
.page-template-page-interior .entry-title,
.page-template-page-interior .edit-link,
.page-template-page-interior .entry-footer{
	display: none;
}


.page-template-page-interior .interior-cont{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 150px 0;
}

.page-template-page-interior article{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.page-template-page-interior .site-branding p,
.error404 .site-branding p{
	color: black;
	text-shadow: none;
}

.page-template-page-interior .entry-content h1,
.page-template-page-interior .entry-content h2,
.page-template-page-interior .entry-content h3,
.page-template-page-interior .entry-content p{
	color: var(--color1);
}

.page-template-page-interior .interior-cont h1 {
	margin: 50px 0 30px 0;
	font-size: clamp(41px, 3vw, 51px);
	color: var(--color1);
	text-transform: uppercase;
	font-weight: 600;
	max-width: 600px;
	line-height: 100%;
}

.page-template-page-interior .separador::after {
	display: block;
	content: "";
	width: 60px;
	height: 10px;
	background-color: var(--color1);
	margin-bottom: 35px;
}

/*.page-template-page-interior .entry-content h2 {
	margin: 30px 0 15px 0;
	font-size: 20px;
	font-weight: 400;
	background-color: black;
	display: inline-block;
	color: white;
	padding: 7px 30px 2px 3px;
	line-height: 95%;
}*/

.page-template-page-interior .entry-content h2 {
	margin: 30px 0 15px 0;
	font-size: 20px;
	font-weight: 600;
	display: inline-block;
	color: black;
	text-transform: uppercase;
}

.page-template-page-interior .entry-content h2::before {
	content: ">>";
	color: var(--color3);
	font-size: 20px;
	margin-right: 10px;
}

.page-template-page-interior .entry-content .wp-block-quote p{
	font-size: 18px;
	font-weight: 100;
}

.page-template-page-interior .entry-content p,
.page-template-page-interior .entry-content li{
	font-size: 16px;
/*	font-family: "Space Mono", monospace;
*/    font-weight: 400;
}

.page-template-page-interior .entry-content ul{
    margin: 1rem 0;
}

.page-template-page-interior .entry-content li {
    list-style: circle;
    margin-left: 30px;
}

.page-template-page-interior .entry-content a{
    color: var(--color3);
}