/* 
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 3.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Playwrite+US+Trad:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap');
@font-face {
    font-family: 'Figtree';
    src: url('/wp-content/themes/child/fonts/Figtree.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

body,
h1, h2, h3, h4, h5, h6,
p, a, span, div,
ul, ol, li,
table, th, td,
input, button, textarea, select {
    font-family: 'Figtree', system-ui, sans-serif;
}

body {
    font-size: 18px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga" 1, "calt" 1;
    font-variant-ligatures: normal;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    color: var(--e-global-color-text);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

@media (min-width: 1100px) {
    h1, h1.elementor-heading-title {
        font-size: 3rem !important;
    }
    h2.elementor-heading-title {
        font-size: 2.6rem;
    }
    h3.elementor-heading-title {
        font-size: 2rem;
    }
}

/* cabecera */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    z-index: 9999;
}

header.stick {
    position: fixed;
    background-color: var(--e-global-color-secondary);
    border-radius: 0 0 25px 25px;
    animation: slideDown 0.5s ease-in-out;
    filter: drop-shadow(0 1px 0 var(--e-global-color-accent));
}

header.stick #h-logo {
    transform-origin: left center;
    transform: scale(0.8);
    transition: transform 1s;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

a, a:hover {
	color: var(--e-global-color-text);
}

.script span.elementor-headline-dynamic-text {
	font-family: "Merienda", cursive;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

/* cajas colores */
.circle-color {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 200px;
    height: 200px !important;
    border: 1px solid var(--e-global-color-text);
    border-radius: 50%;
    font-size: 1.6rem;
    color: var(--e-global-color-text);
    transform: rotate(-45deg);
    transition: transform 0.5s, border 0.5s, color 0.5s;
}

.circle-color svg {
    transform: translateX(-15px);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

.circle-color span {
    transform: translateX(15px);
    transition: transform 0.5s;
}

.circle-color:hover {
    border-color: var(--e-global-color-accent);
    color: var(--e-global-color-accent);
    transform: rotate(-360deg);
}

.circle-color:hover span {
    transform: translateX(0);
}

.circle-color:hover svg {
    transform: translateX(0);
    opacity: 1;
}