/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* FUENTE */

@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* VARIABLES POR DEFECTO */



:root {

  --c-negro: #181818;
  --c-blanco: #FFFFFF;

  --color-1: #81A0F2;
  --color-2: #AC92F2;
  --color-3: #E182F2; 
  --color-4: #F89E9C; 
  --color-5: #FABA6E; 
  --color-6: #F9D24A;

  --c-grisclaro: #F7F7F7;
  --c-gris: #f9f9f9;
  --c-grisoscuro: #2C2C2C;

  --grad-1: linear-gradient(
    90deg,
    var(--color-1),
    var(--color-3),
    var(--color-5),
    var(--color-6)
  );

  --grad-2: radial-gradient(
    80% 80% at 50% 50%,
    var(--color-1) 0%,
    var(--color-3) 35%,
    var(--color-5) 70%,
    rgba(250, 202, 30, 0) 100%
  );

  /* Fuentes */

  --fuente-1: 'Inter', sans-serif;
  --fuente-2: 'Funnel Display', sans-serif;

  --size-0: clamp(14px, 13.5px + 0.4vw, 16px);
  --size-1: clamp(16px, 15px + 0.6vw, 18px);
  --size-2: clamp(18px, 16.5px + 0.8vw, 20px);
  --size-3: clamp(22px, 19px + 1.2vw, 24px);
  --size-4: clamp(26px, 22px + 1.6vw, 30px);
  --size-5: clamp(36.8px, 29.6px + 2.30vw, 57.6px);
  --size-6: clamp(46.4px, 35.2px + 3.20vw, 73.6px);

  /* Medidas*/

  --radio-1: 12px;

}


/* OUTLINE */

*:focus { outline: 0px solid orange; }


html {
  scroll-behavior: smooth;
}

::selection {
  background: #AC92F240;
  color: var(--c-negro);
}
/* ESTILOS COMUNES */

body {
  font-family: var(--fuente-2) !important;
  color: var(--c-negro);
  font-size: var(--size-1);
}

.txt-claro {
  h1, h2, h3, p {
    color: var(--c-blanco) !important;
  }
}

a {
  text-decoration: none;
}

a:hover {
  transition: all 0.4s ease !important;
}

h1, h2, h3 {
  font-family: var(--fuente-2) !important;
  font-weight: 400 !important;
  color: var(--c-negro) !important;
}

h1 {
   font-size: var(--size-6);
}

h2 {
  font-size: var(--size-5);
}

/* Estado normal del header */
.scroll-header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transform: translateY(0); /* punto de partida claro */
  transition: transform 0.35s ease-in-out !important;
}

/* Estado oculto al hacer scroll hacia abajo */
.scroll-header.header-hidden {
  transform: translateY(-34%) !important;
}

.splited .word {
  display: inline-block;
  white-space: nowrap;
}

.word {
  display: inline;

}

/* Start custom CSS for html, class: .elementor-element-b9708cd */
.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    mask-image: linear-gradient(
        90deg,
        transparent,
        #fff 15%,
        #fff 85%,
        transparent
    );
}


.slider-track {
    display: flex;
    width: max-content;
    animation: scroll 25s linear infinite;
    gap: 60px;
}


.slide {
    width: 260px;
    height: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.slide img {
    width: 90%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}


.slide:hover img {
    transform: scale(1.05);
}


@keyframes scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-260px * 6 - 60px * 6));
    }

}


.slider-track:hover {
    animation-play-state: paused;
}


@media(max-width:768px){

    .slide{
        width:180px;
        height:100px;
    }


    .slider-track{
        gap:40px;
    }


    @keyframes scroll {

        from{
            transform:translateX(0);
        }

        to{
            transform:translateX(calc(-180px * 6 - 40px * 6));
        }

    }

}
/* End custom CSS */

.e-n-menu-heading > li {
  position: relative;
}

.e-n-menu-heading > li::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-1) 25%, transparent),
    color-mix(in srgb, var(--color-3) 25%, transparent),
    color-mix(in srgb, var(--color-5) 25%, transparent),
    color-mix(in srgb, var(--color-6) 25%, transparent)
  );

  opacity: 0;
  transition: opacity 0.8s ease;

  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 18%,
    black 82%,
    transparent 100%
  );

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 18%,
    black 82%,
    transparent 100%
  );

  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.e-n-menu-heading > li:hover::before {
  opacity: 1;
}

.e-n-menu-heading > li > * {
  position: relative;
  z-index: 1;
}