:root {
    --font-family: "Opel Next";
    --main-color: #F7FF14;
    --color: #000;
    --header-bg-color: var(--main-color);
    --header-padding-block: 1rem;
    --button-background-color: var(--main-color);
    --button-background-color-hover: #000;
    --button-color-hover: var(--main-color);
    --button-font-weight: bold;
    --button-font-size: 2rem;
    --card-princing-font-size: 1.6rem;
    --font-size-amount: 8rem;
    --top-euro: 1rem;
    --heading-font-weight: bold;
    --heading-background-color: #000;;
    --heading-line-decorator-height: 1.2rem;
    --heading-line-decorator-width: 10rem;
    --listado-concesionarios-active-background-color: #ccc;
    --list-margin-bottom: 1rem;
    --side-buttons-background-color: var(--main-color);
}

@font-face{ 
    font-family:"Opel Next";
    font-weight:bold;
    font-style:normal;
    font-display:swap;
    src:url("/assets/opel/common/fonts/OpelNext-Bold.woff") format("woff")
}

@font-face{
    font-family:"Opel Next";
    font-weight:normal;
    font-style:normal;
    font-display:swap;
    src:url("/assets/opel/common/fonts/OpelNext.woff") format("woff")
}

@font-face{
    font-family:"Opel Next";
    font-weight:300;
    font-style:normal;
    font-display:swap;
    src:url("/assets/opel/common/fonts/OpelNext-Light.woff") format("woff")
}

nav.sections {
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    font-size: 2rem;
    position: sticky;
    z-index: 100;
    background-color: white;
    width: 100%;
    text-align: center;
    padding: 30px 0;
    align-items: center;
}

@media (min-width:768px){
    nav.sections {
        flex-direction: row;
        gap: 3rem;
    }
}

nav.sections a {
    padding: 0 1rem;
    text-decoration: none;
    color: #000;
}

nav.sections a.active {
    text-decoration: underline;
}

p.highlight {
    font-family: var(--font-family);
  position: relative;
  margin-top:3rem;        
  text-align: center;
  color: #000;
  font-size:3rem; 
  font-weight:900;
  border: 2px solid var(--main-color);
  border-radius: 10px;
  background: var(--main-color);
  max-width: 900px;
  padding: 2rem;
  margin: 2rem auto 4rem auto;
}

.bigCard st-card{position: relative;--background-color: transparent;}
.bigCard.footerCard{margin-bottom:5em;}
.bigCard st-card st-buttons {
    position: absolute;
    z-index: 99;
    top: 76%;
    left: 25px;
    width: max(15%, 115px);
    overflow: hidden;
}
.bigCard{
    --button-font-size:min(1.1vw,13px);
    --button-padding:1rem 0;
}

st-card-pricing {
    --margin-bottom: 1rem;
}

st-text[copy1] {
    --font-size: 1.4rem;
}

st-text[title] {
    --font-size: 2.5rem;
    --font-weight: bold;
}

st-text[extra] {
    --font-size: 1.6rem;
    --font-weight: bold;
    --text-align: left;
    --padding: 2rem 0rem 1rem 0rem;    
}

st-text[price] {
    --font-size: 1.6rem;
    --margin-bottom:1rem;
}

st-text[cardPricingText] {
    --font-size: 1.4rem;
    --margin-bottom: 2rem;
}

st-list {
    align-self: start;
}

.legales st-text {
    --font-size: 1.2rem;
    --margin-bottom: var(--gap);
}

.side-buttons > div > *  {
    background-color: var(--main-color);
    color: #000;
}

.side-buttons i {
    filter: invert(100%);
}

.side-buttons i::after {
    filter: invert(100%);
}

st-card st-text[cintillo] {
    --background-color: #000;
    --color: #fff;
    --text-align: center;
    --font-size: 1.5rem;
    --padding: 1.2rem;
    --font-weight: bold;
    --margin-bottom: 1rem;
    --margin-top: 1rem;
}

st-card st-text[cintillo] a {
    text-decoration: none;
    color: #fff;
}


@media (max-width:767px){
    .bigCard st-card st-buttons {
        top: auto;
        bottom: 4%;
        width: 96%;
        left: 2%;
    }
    .bigCard{
        --button-font-size:2rem;
    }
}

@media (max-width:500px){
    nav.sections {
        flex-direction: row;
        padding: 4vw 0;
        font-size: 3.7vw;
    }
}
st-card-advantage st-text {
    font-size: 12px;
}

/****FORMULARIO FLOTANTE****/
.side-buttons {
    display: none;
}