@import url('base.css');

@import url('grid.css');





/* =========================================

   MAIN

========================================= */



/* =========================================

   PORTADA

========================================= */



.hero-hv {

    position: relative;

    display: flex;

    align-items: flex-end;

    min-height: 100vh;

    padding: 140px 7% 75px;

    background:

        linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 65%, rgba(0, 0, 0, 0.1) 100%),

        url("../images/main.png") center center / cover no-repeat;

}



.hero-hv__content {

    max-width: 850px;

    color: #fff;

}



.hero-hv__eyebrow,

.about-hv__eyebrow {

    margin-bottom: 15px;

    color: var(--rojo);

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 0.16em;

}



.hero-hv__title {

    margin: 0;

    font-size: clamp(4.5rem, 10vw, 9.5rem);

    line-height: 0.78;

    letter-spacing: -0.025em;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);

}



.hero-hv__title span {

    color: var(--rojo);

}



.hero-hv__tagline {

    margin: 35px 0 0;

    font-size: 0.85rem;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;

}





/* =========================================

   SOBRE HIGH VOLTAGE

========================================= */



.about-hv {

    padding: 120px 0;

    background-color: #e4e4e4;

}



.about-hv__inner {

    width: 90%;

    max-width: 1180px;

    margin: 0 auto;

}



.about-hv__heading {

    margin-bottom: 65px;

}



.about-hv__title {

    margin: 0;

    color: #000;

    font-size: clamp(3.8rem, 7vw, 7rem);

    line-height: 0.8;

    letter-spacing: -0.02em;

}



.about-hv__title span {

    color: var(--rojo);

}



.about-hv__content {

    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 55px;

    align-items: end;

}



.about-hv__image {

    display: block;

    width: 100%;

    min-height: 460px;

    object-fit: cover;

}



.about-hv__text {

    padding-bottom: 15px;

    color: #1d1d1b;

    font-size: 1.15rem;

    font-weight: 400;

    line-height: 1.55;

}



.about-hv__text p + p {

    margin-top: 20px;

}



.about-hv__values {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 42px;

}



.about-hv__values span {

    padding: 8px 12px;

    color: #fff;

    background-color: #000;

    font-size: 1.35rem;

    line-height: 1;

}



.about-hv__values span:nth-child(2) {

    background-color: var(--rojo);

}





/* =========================================

   M�0�7VIL

========================================= */



@media (max-width: 768px) {

    .hero-hv {

        min-height: 82vh;

        padding: 115px 8% 55px;

        background-position: 58% center;

    }



    .hero-hv__tagline {

        margin-top: 25px;

        font-size: 0.7rem;

        line-height: 1.5;

    }



    .about-hv {

        padding: 80px 0;

    }



    .about-hv__inner {

        width: 92%;

    }



    .about-hv__heading {

        margin-bottom: 40px;

    }



    .about-hv__content {

        grid-template-columns: 1fr;

        gap: 30px;

    }



    .about-hv__image {

        min-height: 340px;

    }



    .about-hv__text {

        font-size: 1rem;

    }



    .about-hv__values {

        margin-top: 30px;

    }

}





/* =========================================

   MARQUEE

========================================= */



.marquee {

position: relative;

overflow: hidden;

white-space: nowrap;

pointer-events: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

background: var(--negro);

}



.marquee__track {

display: -webkit-inline-box;

display: inline-flex;

-webkit-animation: marqueeAnimation 50s linear infinite;

animation: marqueeAnimation 50s linear infinite;

animation-duration: 50s;

animation-timing-function: linear;

animation-delay: 0s;

animation-iteration-count: infinite;

animation-direction: normal;

animation-fill-mode: none;

animation-play-state: running;

animation-name: marqueeAnimation;

}



.type-outline {

/*-webkit-text-fill-color: transparent;*/

/*-webkit-text-stroke-color: #fff;*/

/*-webkit-text-stroke-width: .0002em;*/

padding: 10px 0;

color: rgba(255,255,255,.5);

font-size: 4rem;

}



@-webkit-keyframes marqueeAnimation {

0% {

-webkit-transform: translateZ(0);

transform: translateZ(0)

}



to {

-webkit-transform: translate3d(-100%,0,0);

transform: translate3d(-100%,0,0)

}

}



@keyframes marqueeAnimation {

0% {

transform: translateZ(0)

}



to {

transform: translate3d(-100%,0,0)

}

}





/* =========================================

   ENTRENAMIENTOS

========================================= */



.h-train {

padding: 85px 0;

background: #ccc;

position: relative;

}



.h-train.--personal {

background: var(--rojo);

}



.h-train .wrapper-main.flex {

display: flex;

align-items: flex-end;

justify-content: space-between;

}



.h-train.--personal .wrapper-main {

display: flex;

align-items: center;

}



@media (max-width: 550px) {

.h-train.--personal .wrapper-main,

.h-train .wrapper-main.flex {

display: block;

}

}



.h-train h3 {

max-width: 400px;

display: inline-block;

font-size: 6rem;

line-height: 1;

}



.h-train.--personal h3 {

margin-right: 25px;

color: #fff;

}



.h-train__description {

display: inline-block;

max-width: 330px;

/*font-weight: 600;*/

font-size: 1.3rem;

}



.h-train .pictures {

display: flex;

align-items: center;

justify-content: space-around;

padding-top: 50px;

padding-bottom: 50px;

}



.h-train .pictures img {

object-fit: cover;

}



.h-train .pictures img:first-child {

width: 36%;

}



.h-train .pictures img:nth-child(2) {

width: 50%;

}



.h-train.--personal .pictures img {

width: 40%;

}



.h-train.--personal .pictures img:nth-child(2) {

width: 28%;

}



@media (max-width: 550px) {

.h-train .pictures {

display: block;

text-align: center;

}



.h-train .pictures img:first-child,

.h-train .pictures img:nth-child(2),

.h-train.--personal .pictures img:first-child,

.h-train.--personal .pictures img:nth-child(2) {

width: 100%;

}

}





/* Prices */



.prices {

display: flex;

max-width: 660px;

flex-wrap: wrap;

justify-content: space-between;

align-items: center;

}



@media (max-width: 485px) {

.prices {

display: block;

max-width: none;

}

}



.h-train .personal__prices {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-items: flex-start;

}



.h-train .personal__prices .prices {

margin-bottom: 40px;

}



@media (max-width: 985px) {

.h-train .personal__prices {

justify-content: center;

}

}



.prices__wrapper-rec {

padding: 15px;

background-color: #aaa;

color: #fff;

display: inline-block;

text-align: center;

min-width: 135px;

}



.prices__wrapper-rec.--second {

background-color: #777;

}



.prices__wrapper-rec.--third {

background-color: #222;

}



@media (max-width: 485px) {

.prices__wrapper-rec {

width: 100%;

margin-bottom: 25px;

}

}



.prices__sessions {

font-size: 1.5rem;

line-height: 1.7rem;

border-bottom: solid 1px #fff;

padding: .2rem 0;

}



.prices__price {

font-size: 3rem;

line-height: 3.6rem;

margin-top: .5rem;

}



.prices__title {

width: 100%;

flex-grow: 0;

text-align: center;

font-size: 3rem;

color: black;

margin-bottom: 30px;

}



.h-train.--personal .prices__title {

color: #fff;

}



.h-train.--personal .prices__title.title__underlined:before {

background-color: #000;

}



.prices__matricula {

flex-grow: 0;

width: 100%;

background-color: #efefef;

color: black;

padding: 10px;

text-align: center;

font-size: 1.2rem;

margin-top: 20px;

}





/* =========================================

   IMAGEN DECORATIVA

========================================= */



.h-img-decorative {

height: 80vh;

width: 100%;

background-image: url('../images/decorative-1.png');

background-position: center center;

background-repeat: no-repeat;

background-size: cover;

}



.h-train.--groups .rayo {

bottom: -40px;

position: absolute;

right: calc( (100vw - 1180px) / 2 );

width: 80px;

z-index: 2;

}



@media (max-width: 1181px) {

.h-train.--groups .rayo {

right: 5px;

}

}





/* =========================================

   HORARIOS

========================================= */



.schedule {

padding: 100px 0;

background-color: var(--negro);

overflow: hidden;

}





/* =========================================

   CABECERA

========================================= */



.schedule__header {

display: flex;

align-items: flex-end;

gap: 30px;

margin-bottom: 50px;

}



.schedule h3 {

color: #fff;

font-family: 'Bebas Neue', cursive;

font-size: 5rem;

line-height: .9;

}



.schedule__header-line {

flex: 1;

height: 1px;

margin-bottom: 8px;

background-color: rgba(255,255,255,.25);

}





/* =========================================

   GRID

========================================= */



.schedule__week {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 2px;

background-color: rgba(255,255,255,.18);

}





/* =========================================

   TARJETA / D�0�1A

========================================= */



.schedule__day {

position: relative;

padding: 28px 25px 30px;

background-color: #fff;

text-align: center;



transition:

transform .3s ease,

box-shadow .3s ease;

}





/* L��nea roja superior */



.schedule__day:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 5px;

background-color: var(--rojo);

}





/* Hover */



.schedule__day:hover {

transform: translateY(-5px);



box-shadow:

0 12px 30px rgba(0,0,0,.25);

}





/* =========================================

   CABECERA DEL D�0�1A

========================================= */



.schedule__day-header {

display: flex;

align-items: flex-end;

justify-content: space-between;

margin-bottom: 25px;

}





/* N��mero 01 / 02 / 03... */



.schedule__number {

display: flex;

align-items: center;

justify-content: center;



width: 24px;

height: 24px;



color: var(--rojo);



font-size: 1.2rem;

line-height: 1;



filter: grayscale(1) brightness(0.75) sepia(1) saturate(8);

}





/* Nombre del d��a */



.schedule__day h5 {

display: inline-block;

position: relative;

z-index: 1;

margin: 0;



color: var(--negro);



font-family: 'Bebas Neue', cursive;

font-size: 2.5rem;

font-weight: normal;

line-height: .9;



text-transform: uppercase;

}





/* Subrayado rojo */



.schedule__day h5:before {

position: absolute;



left: 0;

top: 70%;



z-index: -1;



width: 100%;

height: 18%;



background-color: var(--rojo);



content: '';

}





/* =========================================

   HORAS

========================================= */



.schedule__hours {

width: 100%;

}



.schedule__hour {

display: flex;

align-items: center;

justify-content: space-between;



min-height: 43px;



padding: 8px 0;



border-bottom: 1px solid #d5d5d5;



color: var(--negro);



font-family: 'Roboto', sans-serif;

font-size: 1.15rem;

font-weight: 300;

line-height: 1;



transition:

padding-left .25s ease,

color .25s ease;

}





/* Peque�0�9a marca roja al pasar por encima */



.schedule__hour:before {

content: '';



width: 0;

height: 2px;



margin-right: 0;



background-color: var(--rojo);



transition:

width .25s ease,

margin-right .25s ease;

}





/* Hover */



.schedule__hour:hover {

padding-left: 8px;

color: var(--rojo);

}



.schedule__hour:hover:before {

width: 12px;

margin-right: 8px;

}





/* =========================================

   BOXING

========================================= */



.schedule__hour--boxing {

color: var(--rojo);

font-weight: 400;

}



.schedule__hour--boxing span {

font-family: 'Bebas Neue', cursive;

font-size: .95rem;

letter-spacing: .05em;

}





/* =========================================

   �0�3LTIMA HORA

========================================= */



.schedule__hour:last-child {

border-bottom: none;

}





/* =========================================

   TABLET

========================================= */



@media (max-width: 1000px) {



.schedule__week {

grid-template-columns: repeat(2, 1fr);

}



}





/* =========================================

   M�0�7VIL

========================================= */



@media (max-width: 550px) {



.schedule {

padding: 70px 0;

}



.schedule__header {

display: block;

margin-bottom: 35px;

}



.schedule h3 {

font-size: 4rem;

}



.schedule__header-line {

display: none;

}



.schedule__week {

grid-template-columns: 1fr;

gap: 1px;

}



.schedule__day {

padding: 25px 20px 28px;

}



.schedule__day h5 {

font-size: 2.4rem;

}



.schedule__hour {

min-height: 45px;

font-size: 1.15rem;

}



}





/* =========================================

   CONTACTO

========================================= */



.h-contact {

padding: 80px 0;

background-color: var(--rojo);

}



.h-contact h3 {

font-size: 3rem;

line-height: 1;

margin-bottom: 30px;

color: #fff;

}



.h-contact .wrapper-main {

max-width: 500px;

}



.h-contact legend {

color: #fff;

font-size: 1.5rem;

}





/* =========================================

   WHO

========================================= */



.who {

padding: 80px 0;

background-color: black;

color: #fff;

}



.who .who__wrapper{

max-width: 900px;

margin: 0 auto;

display: grid;

grid-template-columns: repeat(12, 1fr);

}



.who__col-izq {

grid-column: 1/9;

grid-row: 1/2;

z-index: 1;

}



.who__col-izq img {

/*height: 480px;*/

}



.who__col-der {

grid-column: 6/13;

grid-row: 1/2;

z-index: 2;

display: flex;

justify-content: center;

flex-direction: column;

/*background-color: rgba(0,0,0,.3);*/

}



.who h3 {

font-size: 5.2rem;

line-height: 1;

color: #fff;

text-shadow: 1px 1px 1px rgba(0,0,0,.75);

}



.who h4 {

font-size: 2rem;

color: #cdcdcd;

}



.who p {

font-size: 1rem;

color: #cdcdcd;

}



@media (max-width: 767px) {



.who .who__wrapper{

display: block;

padding: 0 20px;

}



.who__col-izq,

.who__col-der {

margin: 0 auto;

}



.who__col-izq {

text-align: center;

}



.who__col-izq img {

width: 100%;

max-height: 450px;

object-fit: cover;

object-position: center top;

}

}





/* =========================================

   HIGH VOLTAGE FOOTER

========================================= */



footer.hv-footer {

width: 100% !important;

margin: 0 !important;

padding: 65px 0 25px !important;



background: #1d1d1b !important;

color: #fff !important;



position: relative !important;

display: block !important;

overflow: hidden !important;



border-top: 6px solid var(--rojo);

}





/* =========================================

   CONTENEDOR

========================================= */



footer.hv-footer > .wrapper-main {

width: 100% !important;

max-width: 1180px !important;

margin: 0 auto !important;

padding: 0 20px !important;

}





/* =========================================

   CONTENIDO PRINCIPAL

========================================= */



footer.hv-footer .hv-footer__content {

width: 100% !important;



display: grid !important;

grid-template-columns: 1.5fr 1fr auto !important;



align-items: center !important;



gap: 60px !important;



padding-bottom: 55px !important;

}





/* =========================================

   LOGO

========================================= */



footer.hv-footer .hv-footer__brand {

display: flex !important;

flex-direction: column !important;

align-items: flex-start !important;

}



footer.hv-footer .hv-footer__logo {

font-family: 'Bebas Neue', cursive !important;



font-size: 6.5rem !important;

font-weight: normal !important;



line-height: .75 !important;

letter-spacing: .01em !important;



color: #fff !important;



white-space: nowrap !important;

}



footer.hv-footer .hv-footer__tagline {

margin-top: 22px !important;



font-family: 'Roboto', sans-serif !important;



font-size: .72rem !important;

font-weight: 400 !important;



letter-spacing: .16em !important;



color: rgba(255,255,255,.55) !important;

}





/* =========================================

   CONTACTO

========================================= */



footer.hv-footer .hv-footer__contact {

display: flex !important;

flex-direction: column !important;



gap: 22px !important;



padding-left: 25px !important;



border-left: 2px solid var(--rojo) !important;

}



footer.hv-footer .hv-footer__item {

display: flex !important;

flex-direction: column !important;



gap: 5px !important;



font-family: 'Roboto', sans-serif !important;

font-size: .9rem !important;

font-weight: 300 !important;



line-height: 1.4 !important;



color: #fff !important;

}



footer.hv-footer .hv-footer__label {

display: block !important;



font-family: 'Roboto', sans-serif !important;



font-size: .65rem !important;

font-weight: 700 !important;



letter-spacing: .14em !important;



color: var(--rojo) !important;

}



footer.hv-footer .hv-footer__item a {

color: #fff !important;

text-decoration: none !important;



transition: color .25s ease !important;

}



footer.hv-footer .hv-footer__item a:hover {

color: var(--rojo) !important;

}





/* =========================================

   INSTAGRAM

========================================= */



footer.hv-footer .hv-footer__social {

display: flex !important;



align-items: center !important;

justify-content: flex-end !important;

}



footer.hv-footer .hv-footer__instagram {

display: flex !important;



align-items: center !important;



gap: 12px !important;



color: #fff !important;



font-family: 'Bebas Neue', cursive !important;

font-size: 1.4rem !important;



line-height: 1 !important;



text-decoration: none !important;



transition: color .25s ease !important;

}



footer.hv-footer .hv-footer__instagram:hover {

color: var(--rojo) !important;

}



footer.hv-footer .hv-footer__instagram-icon {

width: 42px !important;

height: 42px !important;



display: flex !important;



align-items: center !important;

justify-content: center !important;



border: 1px solid #fff !important;



border-radius: 50% !important;



font-family: 'Roboto', sans-serif !important;



font-size: .65rem !important;

font-weight: 700 !important;



transition: all .25s ease !important;



}



footer.hv-footer .hv-footer__instagram-icon svg {

    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

}



footer.hv-footer .hv-footer__instagram:hover .hv-footer__instagram-icon {

background: var(--rojo) !important;

border-color: var(--rojo) !important;

color: #fff !important;

}





/* =========================================

   BOTTOM

========================================= */



footer.hv-footer .hv-footer__bottom {

width: 100% !important;



margin: 0 !important;

padding: 18px 0 0 !important;



border-top: 1px solid rgba(255,255,255,.2) !important;



display: flex !important;



align-items: center !important;

justify-content: space-between !important;



gap: 20px !important;



font-family: 'Roboto', sans-serif !important;



font-size: .65rem !important;

font-weight: 400 !important;



letter-spacing: .1em !important;



text-transform: uppercase !important;



color: rgba(255,255,255,.5) !important;

}





/* =========================================

   M�0�7VIL

========================================= */



@media (max-width: 700px) {



footer.hv-footer {

padding: 45px 0 20px !important;

}



footer.hv-footer > .wrapper-main {

padding: 0 20px !important;

}



footer.hv-footer .hv-footer__content {

grid-template-columns: 1fr !important;



gap: 38px !important;



padding-bottom: 40px !important;



align-items: start !important;

}



footer.hv-footer .hv-footer__logo {

font-size: 4.5rem !important;

}



footer.hv-footer .hv-footer__tagline {

margin-top: 15px !important;

font-size: .65rem !important;

}



footer.hv-footer .hv-footer__contact {

padding-left: 18px !important;

gap: 18px !important;

}



footer.hv-footer .hv-footer__social {

justify-content: flex-start !important;

}



footer.hv-footer .hv-footer__bottom {

flex-direction: column !important;

align-items: flex-start !important;

gap: 8px !important;

}



}





.groups-section {

    position: relative;

    overflow: visible;

    padding: 110px 0 120px;

    background-color: #d4d4d4;

}



.groups-inner {

    width: 90%;

    max-width: 1180px;

    margin: 0 auto;

}



.groups-intro {

    display: grid;

    grid-template-columns: 1.3fr 0.7fr;

    gap: 60px;

    align-items: end;

    margin-bottom: 70px;

}



.groups-title {

    display: flex;

    flex-direction: column;

    margin: 0;

    color: #000;

    font-size: 7.5rem;

    line-height: 0.78;

    letter-spacing: -0.02em;

}



.groups-title span:last-child {

    color: var(--rojo);

}



.groups-description {

    max-width: 360px;

    margin: 0;

    color: #1d1d1b;

    font-family: "Roboto", sans-serif;

    font-size: 1.05rem;

    line-height: 1.5;

    padding-bottom: 8px;

}



.groups-gallery {

    display: grid;

    grid-template-columns: 1.55fr 1fr;

    gap: 18px;

    margin-bottom: 70px;

}



.groups-photo {

    overflow: hidden;

    background-color: #000;

}



.groups-photo-main,

.groups-photo-secondary {

    height: 500px;

}



.groups-photo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.groups-photo:hover img {

    transform: scale(1.03);

}



.groups-prices {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 2px solid #000;

    border-bottom: 2px solid #000;

}



.groups-price {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-height: 175px;

    padding: 25px 22px;

    background-color: #fff;

    border-right: 1px solid #000;

    transition: background-color 0.25s ease, color 0.25s ease;

}



.groups-price:last-child {

    border-right: none;

}



.groups-price-number {

    color: var(--rojo);

    font-family: "Roboto", sans-serif;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.08em;

}



.groups-price-info {

    display: flex;

    flex-direction: column;

}



.groups-price-sessions,

.groups-price-value {

    color: #000;

    font-family: "Bebas Neue", cursive;

}



.groups-price-sessions {

    font-size: 1.45rem;

    line-height: 1;

}



.groups-price-value {

    margin-top: 3px;

    font-size: 4rem;

    line-height: 0.9;

}



.groups-price-highlight {

    background-color: #000;

}



.groups-price-highlight .groups-price-sessions,

.groups-price-highlight .groups-price-value {

    color: #fff;

}



.groups-price:not(.groups-price-highlight):hover {

    background-color: var(--rojo);

}



.groups-price:not(.groups-price-highlight):hover .groups-price-number,

.groups-price:not(.groups-price-highlight):hover .groups-price-sessions,

.groups-price:not(.groups-price-highlight):hover .groups-price-value {

    color: #fff;

}



.groups-extra {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

    margin-top: 18px;

}



.groups-extra-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 22px;

    background-color: #000;

    color: #fff;

}



.groups-extra-label {

    font-family: "Bebas Neue", cursive;

    font-size: 1.6rem;

    line-height: 1;

    letter-spacing: 0.03em;

}



.groups-extra-value {

    color: var(--rojo);

    font-family: "Bebas Neue", cursive;

    font-size: 2.5rem;

    line-height: 1;

}



.groups-rayo {

    position: absolute;

    right: 7%;

    bottom: -48px;

    z-index: 10;

    width: 92px;

}



@media (max-width: 1000px) {

    .groups-title {

        font-size: 6rem;

    }



    .groups-intro {

        grid-template-columns: 1fr 0.8fr;

        gap: 35px;

    }



    .groups-photo-main,

    .groups-photo-secondary {

        height: 400px;

    }



    .groups-price {

        min-height: 155px;

        padding: 20px 16px;

    }



    .groups-price-value {

        font-size: 3.3rem;

    }

}



@media (max-width: 768px) {

    .groups-section {

        padding: 80px 0 100px;

    }



    .groups-inner {

        width: 92%;

    }



    .groups-intro {

        display: block;

        margin-bottom: 50px;

    }



    .groups-title {

        margin-bottom: 35px;

        font-size: 5.5rem;

    }



    .groups-description {

        max-width: 500px;

        font-size: 1rem;

    }



    .groups-gallery {

        grid-template-columns: 1fr;

        gap: 12px;

        margin-bottom: 45px;

    }



    .groups-photo-main {

        height: 420px;

    }



    .groups-photo-secondary {

        height: 280px;

    }



    .groups-prices {

        grid-template-columns: repeat(2, 1fr);

    }



    .groups-price:nth-child(2) {

        border-right: none;

    }



    .groups-price:nth-child(-n + 2) {

        border-bottom: 1px solid #000;

    }



    .groups-extra {

        gap: 12px;

    }



    .groups-rayo {

        right: 20px;

        bottom: -40px;

        width: 75px;

    }

}



@media (max-width: 550px) {

    .groups-section {

        padding: 65px 0 85px;

    }



    .groups-title {

        font-size: 4.7rem;

        line-height: 0.8;

    }



    .groups-photo-main {

        height: 300px;

    }



    .groups-photo-secondary {

        height: 220px;

    }



    .groups-prices,

    .groups-extra {

        grid-template-columns: 1fr;

    }



    .groups-price {

        min-height: 130px;

        padding: 20px;

        border-right: none;

        border-bottom: 1px solid #000;

    }



    .groups-price:last-child {

        border-bottom: none;

    }



    .groups-extra {

        gap: 10px;

    }



    .groups-rayo {

        right: 15px;

        bottom: -35px;

        width: 65px;

    }

}