:root {
    --dark: #1D1D1B;
    --dark-90: rgba(29,29,27,0.9);
    --red: #FF4A52;
    --gray-light: #f7f7f7;
    --font: "Montserrat", sans-serif;
    --font-title: "Raleway", sans-serif;
	--font-logo: "Titillium Web", sans-serif;
  }

/* ESTILOS GENERALES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
::-webkit-scrollbar {
    display: none;
}
html, body {
    margin: 0 auto;
    padding: 0;
    border: none;
    width: 100%;
    font-family: var(--font);
    font-size: 100%;
    line-height: 150%;
    color: var(--dark);
    background-color: white;
}
img {
    border: none;
}
a {
    text-decoration: none;
}
a, a:hover, a:visited, a:active {
    border: none;
    color: var(--dark);
    border-bottom: 3px solid var(--red);
}
a:hover{
    color: var(--red); 
}
p,form,ul,ol,li {
    margin: 0;
    padding: 0;
}
ul{
    list-style-type: none;
}
.resalte{
	color: var(--red);
}
h1{
    font-family: var(--font-title);
    font-size: clamp(2rem, 2vw + 0.5rem, 2.8rem);
    line-height: 100%;
    font-weight: 800;
    margin-bottom: 1.75rem;
}
h2{
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 1vw + 0.5rem, 2.1rem);
    margin: 2rem auto 1.2rem;
    line-height: 110%;
}
h3{
    font-family: var(--font-title);
    font-size: clamp(1.2rem, 1vw + 0.5rem, 1.5rem);
    margin: 1.2rem auto 0.2rem;
    line-height: 120%;
}
button{
    font-size: 1.25rem; 
    font-weight: 700;
    line-height: 100%;
    color: var(--dark);
    cursor: pointer;
    padding: 0.9rem 3.3rem;
    border-radius: 3rem;
    border: 3px solid var(--dark);
    cursor: pointer;
    background-color: transparent;
    margin: 1rem auto;
	transition: 0.3s;
}
button:hover{
    background-color: var(--red);
    border-color: var(--red);
	color: white;
}

/* HEADER */

header{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 8.5rem;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 auto;
    z-index: 10;
}
.logo a:hover, .logo a:visited{
    color: var(--dark);
    border-bottom: none;
}
.logo{
    display: flex;
    flex-direction: column;
}
.logo img{
    max-width: 200px;
    cursor: pointer;
}
header .logo-group{
	line-height: 110%;
}
header .logo-title{
    display: block;
	font-family: var(--font-logo);
    font-size: 19.2px;
    font-weight: 900;
	text-transform: uppercase;
    letter-spacing: 0.03rem;
	margin: 0 7px 2px;
}
header .logo-text{
    display: block;
    font-size: 12px;
    font-weight: 600;
	color: var(--red);
	text-align: right;
	margin-right: 9px;
	vertical-align: bottom;
}
header .barras{
	vertical-align: top;
}
#navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 2rem 0.5rem;
    transition: background-color 200ms linear;
}
#navigation .menu-desktop ul{
    display: flex;
    gap: 0.8rem;
    text-transform: uppercase;
}
.menu-mobile{
    display: none;
}
.menu-mobile img{
    width: 100%;
    max-width: 2.8rem;
    cursor: pointer;
    transition: all .5s ease;
}

.navbar.scrolled{
    background: rgba(250, 250, 250, .9);
    transition: background-color 100ms linear;
    border-bottom: 3px solid var(--dark);
}

main{
    margin-top: 8.5rem;
}


/* FOOTER */
footer{
    display: flex;
    justify-content: space-between;
    gap: 8rem;
    padding: 6.5rem 7rem 6.5rem 4.75rem;
    background: var(--dark);
    color: white;
}
footer h1{
    font-size: clamp(1.55rem, 2vw + 0.5rem, 2.8rem);
    margin-bottom: 0.8rem;
}
footer .datos{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
footer .logo{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 300px;
}
footer .logo img{
    max-width: 130px;
}
footer .logo-title{
    display: block;
	font-family: var(--font-logo);
    font-size: 14px;
    font-weight: 900;
	text-transform: uppercase;
    letter-spacing: 0.03rem;
	margin: 0 5px 2px;
}
footer .medios{
    display: flex;
    gap: 0.5rem;
}
footer .copy{
    font-size: 0.8rem;
}
footer a, footer a:visited{
    color: white;
}
footer .medios a, footer .info a, header a, header{
    border-bottom: none;
}
footer .info{
    max-width: 62rem;
}
footer button{
    color: white;
    border-color: white;
    margin: 2rem auto;
}

/* SECCION VIDEO y CABECERAS */
#video video{
    width: 100%;
    margin: 0 auto 3rem;
}
#video #frase{
    position: absolute;
    color: white;
    opacity: 0.8;
    width: 50%;
	max-width: 30rem;
	margin: 20% 5% 0 5%;
	line-height: 120%;
}
#video #frase h1{
    text-align: left;
  	font-style: italic;
	font-size: 1.5rem;
	margin-bottom: 0.8rem;
}
#video #frase p{
    text-align: right;
}
#cab-seccion img{
    width: 100%;
    margin: 0 auto 3rem;
	min-height: 8rem;
	object-fit: cover;
	object-position: right;
}
.left img{
	object-position: left !important;
}

/* SECCION 1 */
#seccion1{
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    padding: 0 4.37rem 3rem;
    max-width: 1400px;
    margin: 0 auto 1rem;
}
.ancho_100{
	width: 100%;
	margin-bottom: 1rem;
}
#seccion1 .imagen{
    width: 60%;
    flex:max(17rem, 100%/3 + 0.1%);
}
#seccion1 .imagen img{
    width: 100%;
}
#seccion1 .info{
    width: 40%;
    flex:max(17rem, 100%/3 + 0.1%);
}
#seccion1 p{
    margin-bottom: 1rem;
}

/* SECCION 2 */
#seccion2{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 4.37rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
}
.card{
    height: 400px;
    width: 100%;
    flex:max(17rem, 100%/4 + 0.1%);
    background-repeat: no-repeat, no-repeat;
    background-position: top, center; 
    background-size: cover;
}
.card1{
    background-image: url('../images/anuncio-1.webp');
}
.card2{
    background-image: url('../images/anuncio-2.webp');
}
.card3{
    background-position: bottom, top center;
    background-size: 100% 70%, cover;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 80%) 50%, rgba(255, 255, 255, 1) 100%), url('../images/anuncio-camiseta.webp');
}
.card img{
    width: 100%;
}
.card .info{
    margin: 12.25rem auto 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.card .info p{
    font-size: 1.87rem;
    font-size: clamp(1.5rem, 1vw + 0.5rem, 1.87rem);
    font-weight: 800;
    line-height: 110%;
    height: 5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.card .info button{
    max-width: fit-content;
}

/* MENU BURGUER*/
.icon-1, .icon-2, .icon-3 {
    width: 32px;
    height: 3px;
    background-color: var(--dark);
    transition: all 400ms cubic-bezier(.84,.06,.52,1.8);
}

.icon-1 {
  transform: translateY(-6px);
  animation-delay: 100ms;
}

.icon-3 {
  transform: translateY(6px);
  animation-delay: 250ms;
}

.hamburger-icon {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    transform: scale(1.2);
}

.icon-1.a {
  transform: rotate(40deg);
}
.icon-3.b {
  transform: rotate(-40deg);
}
.icon-2.c {
  opacity: 0;
}

.clear {
  clear: both;
}

@keyframes slideIn {
  0% {
    width: 0%;
    opacity: 0;
  }
  
  100% {
    width: 50%;
    opacity: 1;
  }
}
menu {
    background: var(--dark-90);
    position: fixed;
    top: 7rem;
    right: 0;
    width: 80%;
    height: 100%;
    min-width: 320px;
    z-index: 10;
    opacity: 0;
    visibility: hidden; /* importante: para que no cubra los enlaces de la página */
   
    transition: all 600ms cubic-bezier(.62,.04,.3,1.56);
    transition-delay: 100ms;

    ul {
      margin: 0;
      position: absolute;
      top: 3rem;
      left: 3rem;
      li {
        list-style: none;
        color: var(--gray-light);
        text-transform: uppercase;
        font-weight: 500;
    	font-size: clamp(1.1rem, 1vw + 0.5rem, 1.3rem);
		margin-bottom: 1.5rem;
      }
    }
  }
menu li a, menu li a:visited{
    color: var(--gray-light);
    border-bottom: none;
}  
   menu.show {
     width: 80%;
     opacity: 1;
     visibility: visible;

        }
  

/* PÁGINAS INTERIORES */
#bloque{
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    padding: 0 4.37rem;
    max-width: 1400px;
    margin: 0 auto;
}
#bloque:last-of-type{
	padding-bottom: 4.5rem;
}
#bloque .imagen{
    width: 60%;
    flex:max(17rem, 100%/3 + 0.1%);
}
#bloque .imagen img{
    width: 100%;
}
#bloque .info{
    width: 40%;
    flex:max(17rem, 100%/3 + 0.1%);
}
#bloque iframe{
	width: 100%;
	max-width: 37rem;
}
#bloque p{
    margin-bottom: 1rem;
}
#bloque button{
    background-color: var(--dark);
    color: white;
    border: none;
}
quote{
	display: flex;
	gap: 0.65rem;
	margin: 1.75rem 1rem;
}
quote .info{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	h1{
    	font-size: clamp(1.3rem, 1vw + 0.5rem, 1.56rem);
		line-height: 120%;
		margin-bottom: 1rem;
  		font-style: italic;
		font-weight: 500;
	}
	p{
    	font-family: var(--font-title);
		text-align: right;
		font-size: 0.8rem;
		width: 60%;
		max-width: 15rem;
		align-self: right;
		line-height: 120%;
	}
}


/* MEDIA SCREEN */

@media screen and (max-width: 1130px) {
    .logo img{
        max-width: 180px;
    }
    header .logo-title{
        font-size: 18.5px;
        margin-bottom: 0.1rem;
    }
    header .logo-text{
        font-size: 11px;
        letter-spacing: 0.053rem;
    }
    #navigation{
        font-size: 0.9rem;
    }
    #seccion1 .imagen, #bloque .imagen{
        flex:max(25.1rem, 100%/3 + 0.1%);
    }
    #seccion1, #bloque{
        padding: 0 1.5rem;
    }
	#bloque:last-of-type{
		padding-bottom: 4.5rem;
	}
    #seccion1 p, #bloque p footer .info p{
        font-size: 0.9rem;
    }
    #seccion2 {
        padding: 0 0 3rem;
    }
    footer{
        gap: 3rem;
    }
}
@media screen and (max-width: 930px) {
    .menu-desktop{
        display: none;
    }
    .menu-mobile{
        display: block;
    }
}
@media screen and (max-width: 850px) {
    footer{
        flex-direction: column;
        gap: 4rem;
        align-items: center;
        text-align: center;
        padding: 4rem 2rem 2rem 2rem;
    }
    footer .logo{
        align-items: center;
    }
    footer .medios{
        justify-content: center;
    }
    footer .info{
        max-width: 25rem;
    }
    footer .datos{
        order: 2;
    }
}

@media screen and (min-width: 769px) {
    #video-mobile {
      display: none;
    }
}
@media screen and (max-width: 768px) {
    #video-desktop {
      display: none;
    }
}
@media screen and (max-width: 760px) {
    #seccion1, #bloque{
        gap: 1.2rem;
    }
}

@media screen and (max-width: 500px) {
    header .logo{
        line-height: 120%;
    }
    header .logo-title {
        font-size: 1rem;
    }
    header .logo-text {
        font-size: 0.6rem;
        letter-spacing: 0.04rem;
    }
    header .logo img {
        max-width: 120px;
    }
    #navigation{
        padding: 0.5rem 1rem;
        height: 5.5rem;
    }
    main{
        margin-top: 5.5rem;
    }
    menu {
        top: 5.5rem;
    }
}
@media screen and (max-width: 390px) {
    #video #frase h1{
	font-size: 1.2rem;
	}
}