/* 
Theme Name: Cosín Estudio Theme
Theme URI: https://www.cosinestudio.com/
Description: Cosín Estudio Theme is a child theme of Hello Elementor, created by Filmac
Author: Filmac
Author URI: https://www.filmac.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: cosin-estudio-theme
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 */

/* Improved 'fade' animations for elementor */

 @keyframes fadeDown {
     from {
         opacity: 0;
         transform: translate3d(0, -30px, 0)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .elementor-element.fadeInDown {
     animation-name: fadeDown
 }

 @keyframes fadeLeft {
     from {
         opacity: 0;
         transform: translate3d(-30px, 0, 0)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .elementor-element.fadeInLeft {
     animation-name: fadeLeft
 }

 @keyframes fadeRight {
     from {
         opacity: 0;
         transform: translate3d(30px, 0, 0)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .elementor-element.fadeInRight {
     animation-name: fadeRight
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translate3d(0, 30px, 0)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .elementor-element.fadeInUp {
     animation-name: fadeUp
 }


:root {
    --font-family-base: "HelveticaNeueLTPro";
    --font-size-root: 16px;
    --font-size-paragraph-normal: 1.125rem;
    --font-size-paragraph-small: 1rem;
    --font-size-paragraph-xsmall: 0.85rem;
    --font-size-h1: 3rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --line-height-paragraph-normal: 1.56;
    --line-height-paragraph-small: 1.5;
    --line-height-paragraph-xsmall: 1.57;
    --line-height-h1: 1.29;
    --line-height-h2: 1.38;
    --line-height-h3: 1.33;
    --font-weight-base: 400;
    --font-weight-bold: 700;
    --step-size-xs: 0.25rem;
    --step-size-sm: 0.5rem;
    --step-size-md: 0.75rem;
    --step-size-base: 1rem;
    --step-size-lg: 1.125rem;
    --step-size-xl: 1.75rem;
    --step-size-xxl: 1.875rem;
    --step-size-uxl: 2rem;
    --block-spacer-xs: 1.875rem;
    --block-spacer-sm: 3.75rem;
    --block-spacer-md: 4.69rem;
    --block-spacer-lg: 6.25rem;
    --block-spacer-xl: 7.5rem;
    --border-thinner: 1px;
    --border-thin: 2px;
    --border-thick: 4px;
    --border-radius-xs: 0.125rem;
    --border-radius-sm: 0.25rem;
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-base: 1rem;
    --border-radius-full: 100%;
    --color-black: #000;
    --color-white: #fff;
    --color-dark-transparent-50: rgba(0,0,0,0.5);
    --color-light-transparent-50: hsla(0,0%,100%,0.5);
    --color-font-headings: #1e1e1e;
    --color-font-paragraphs: #888;
    --color-background: #fcfaf9;
    --color-details: #f5efeb;
    --color-red: #e60d2e;
    --color-background-modal: #0655c3;
    --color-neutral-100: #1e1e1e;
    --color-neutral-80: #4b4b4b;
    --color-neutral-60: #888;
    --color-neutral-40: #a5a5a5;
    --color-neutral-20: #d2d2d2;
    --color-neutral-00: #fff;
    --color-success-medium: #50a33d;
    --color-success-light: #9bce8d;
    --color-warning-medium: #f39b08;
    --color-warning-light: #ffca72;
    --color-error-medium: red;
    --color-error-light: #ff8989;
    --transition-ultrafast: 100ms;
    --transition-fast: 200ms;
    --transition-base: 300ms;
    --transition-slow: 400ms;
    --transition-ultra-slow: 600ms;
    --transition-linear: linear;
    --transition-easing: cubic-bezier(0.165,0.84,0.44,1);
    --body-z-index: 100;
    --menu-z-index: 500;
    --modal-z-index: 1000;

    --padding-size-container: 30px;
    --container-width: calc((100vw) - (var(--padding-size-container) * 2));
    --size-container: min( 1520px , var(--container-width));

    --grid-row-gap: 2.5rem;
    --grid-column-gap: 2.5rem;

}


body {
    background-color: var(--color-background);
    font-family: "HelveticaNeueLTPro", Sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
}

.main-header {
    --background-color: var(--color-background);
    --background-mobile-color: var(--color-red);
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
    z-index: 1000;
    -webkit-transition: height .2s ease-out;
    -o-transition: height .2s ease-out;
    transition: height .2s ease-out;
}

 body:not(.has-hero) .main-header {
    background-color: var(--background-color);
    -webkit-transition: background-color var(--transition-fast) var(--transition-linear);
    -o-transition: background-color var(--transition-fast) var(--transition-linear);
    transition: background-color var(--transition-fast) var(--transition-linear);
}

.main-footer {
    --footer-top-padding: var(--block-spacer-xs);
    --footer-background: transparent;
    --footer-bottom-height: 3.125rem;
    border-top: 1px solid var(--color-details);
    padding-top: var(--block-spacer-md);
    background-color: var(--footer-background);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-family-base),sans-serif;
    font-weight: var(--font-weight-base);
    color: var(--color-font-paragraphs)
}

h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1)
}

h1,h2 {
    font-family: var(--font-family-base),sans-serif;
    font-weight: var(--font-weight-base);
    color: var(--color-font-headings)
}

h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2)
}

h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3)
}

h3,h4 {
    font-family: var(--font-family-base),sans-serif;
    font-weight: var(--font-weight-base);
    color: var(--color-font-headings)
}

h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4)
}

p {
    font-family: var(--font-family-base),sans-serif;
    color: var(--color-font-paragraphs)
}

.h1_title {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.38em;
    color: var(--e-global-color-ad4939f);
}

.intro-quote .intro__heading, .intro-quote .intro__heading p, .intro-quote .item__text {
    font-size: var(--font-size-paragraph-normal);
    font-weight: 400;
    line-height: var(--line-height-paragraph-normal);
    color: var(--color-font-headings)
}
.section-block .block__heading {
    font-family: var(--font-family-base), sans-serif;
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    color: var(--color-font-headings);
}

h2.elementor-heading-title > p {
    color: var(--color-font-headings);
}
.intro-quote .item__text p{
    color: var(--color-font-headings);
}

body.has-hero {

    & .elementor-location-header > div{
        background: transparent;
        position: fixed;
    }

   & .elementor-location-header > div .elementor-widget-theme-site-logo img {
        filter: grayscale(1) invert(1) contrast(10)
    }

   & .elementor-nav-menu--dropdown, & .elementor-nav-menu--dropdown a, & .elementor-nav-menu--dropdown a:hover{
        background-color: transparent!important;
        color: #fff!important;
   }

   & .elementor-nav-menu--main .elementor-item {
        color: #fff!important;
        fill:  #fff!important;
   }
   & .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, & .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after {
        background-color: #fff!important;
    }

}

body:not(.has-hero) {

    & .elementor-location-header > div{
        position: fixed;
        background-color: var(--color-background);
    }
/*    & .main-header {
        background-color: var(--background-color);
        -webkit-transition: background-color var(--transition-fast) var(--transition-linear);
        -o-transition: background-color var(--transition-fast) var(--transition-linear);
        transition: background-color var(--transition-fast) var(--transition-linear);
    }*/

}

.grid--mode .grid-projects {
    grid-row-gap: var(--block-spacer-sm);
    row-gap: var(--block-spacer-sm);
    display: grid;
    grid-column-gap: var(--grid-gap);
    -webkit-column-gap: var(--grid-gap);
    -moz-column-gap: var(--grid-gap);
    column-gap: var(--grid-gap);
    grid-template-columns: repeat(12,1fr)
}

/* hover effect */

.hover-effect a::after {
  content: '';
  
  position: absolute;
  bottom: 0.25rem;
  left: 0;
  
  width: 0;
  height: 1px;
  
  background-color: var( --e-global-color-text )!important;
  
 -webkit-transition: width 300ms cubic-bezier(0.165,0.84,0.44,1);
  transition: width 300ms cubic-bezier(0.165,0.84,0.44,1)
}

/* Cuando pasas el cursor sobre el enlace... */
.hover-effect a:hover::after {
  width: 100%;
}

/*.hover-underline-animation {
  display: inline-block;
  position: relative;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}*/

.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main {
    max-width: var(--size-container);
    padding-inline: 0;
}
.elementor-field-group .elementor-field-textual:focus {
    box-shadow: none;
    outline: 0;
}

.hidden {
    display: none!important;
}