:root {
	--a: #d7b615;
	--ad: #d7b615c2;
	--c: #1b1000;
	--cd: #1B1000C2;
	--v: #006023;
	--vd: #006023c2;

	--padd-1:.5em;
	--padd-2:.5em 1em;
    --padd-3: 0 1em;

	--boxsha-a:
	.1em .1em .1em .1em var(--a),
	-.1em -.1em .1em .1em var(--a);
	--boxsha-v:
	.1em .1em .1em .1em var(--v),
	-.1em -.1em .1em .1em var(--v);

	--bgi-menu: url(../imgs/menu.svg);
	--bgi-shop: url(../imgs/shopv.svg);
}

*{
    box-sizing: border-box;
    color: var(--a);
    margin: 0;
    padding: 0;
	list-style: none;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
	scrollbar-color: var(--v);
}

body{
    width: 100%;
    height: 100dvh;
    display: flex;
	flex-wrap: wrap;

    background: url(../imgs/fondo-nkdcd.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* ocultar */
[id^=activar],
.btn-menu{
	display: none;
}


/* groups modif */
[class^=sub]{
	display: flex;
	align-items: center;
}

[class^=group]{
	display: flex;
	justify-content: space-evenly;
	gap: .25rem;
}
[class^=btn]{
	border-radius: 1rem;
	padding: .25rem .5rem;
}
[class^=btn]:hover{
	background: linear-gradient(#00000000, #00000000, var(--vd));
}

/* navbar */
.cont-navbar{
	width: 100%;
	height: fit-content;
	display: flex;
	align-items: center;
	justify-content: space-between;

	background: var(--cd);
	padding: 0 .5rem;

	position: relative;
	top: 0; left: 0;
}

.btn-menu{
	background: var(--bgi-menu);
}
.btn-shop{
	background: var(--bgi-shop);
}
.btn-menu, .btn-shop{
	width: 3.4rem;
	height: 3rem;
	cursor: pointer;
}
[class^=btn]:has([id^=activar]:checked){
	background: url(../imgs/close.svg);
	transition: 2s ease-in;
}
.btn-menu:has(#activar-menu:checked) ~ .sub-cont_navbar,
.btn-shop:has(#activar-shop:checked) ~ .sub-cont_shop{
	scale: 1;
	transition: cubic-bezier(1, 0, 0, 1) 2s;
}
.sub-cont_navbar, .group-btns_navbar{
	width: 100%;
}
.sub-cont_shop{
	background: var(--cd);
	border-radius: 0 0 1rem 1rem;
	padding: .5rem;

	position: absolute;
	top: 100%; left: 80%;
	z-index: 1;

	scale: 0;
	transition: cubic-bezier(0, 0, 0, 0) 1s;
}

/* slider principal */
.slider-principal{
	width: 100%;
	max-height: 80%;
	display: flex;

	overflow: hidden scroll;
	scroll-snap-type: mandatory;
	scrollbar-width: none;

	position: relative;
	inset: 0;
}
.slider-brpr{
	width: 100%;
	display: flex;
	gap: .5rem;

	overflow: scroll hidden;
	scroll-snap-type: mandatory;
}

/* slides */
.slide-y{
	min-width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, min(450px, 100%));
	place-content: center space-evenly;
	gap: 1rem;

	padding: 1rem;

	scroll-snap-align: start;
}
.slide-brpr{
	min-width: 100%;
	display: flex;
	flex-wrap: wrap;
	place-content: center;

	scroll-snap-align: center;
}

/* cards */
[class^=card]{
	width: min(28.1rem,100%);
	height: auto;
	display: grid;
	place-items: center;

	background: var(--cd);
	box-shadow: var(--boxsha-a);
	border-radius: 1rem;
	padding: .5rem;
}
.card-encabezado{
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: repeat(2,fit-content);
	grid-template-areas:
	"l t"
	"l d";
}
.logo{
	grid-area: l;
}
.title{
	grid-area: t;
}
.description{
	grid-area: d;
}
/* pop up */
[class^=modal]{
	width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--cd);

	position: fixed;
	inset: 0;
	z-index: 1;

	scale: 0;
	transition: cubic-bezier(0, 0, 0, 0) 1s;
}
[class^=modal]:target{
	scale: 1;
	transition: cubic-bezier(1, 0, 0, 1) 2s;
}
.header{
	width: 100%;
	height: fit-content;
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 0 .5rem;
	position: relative;
	top: 5%;
}
.card-modal{
	width: 50%;
	height: 50dvh;
	background: var(--v);
}
.block-date_modal{
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	text-align: center;
}
.datos{
	width: 100%;
}
.datos,.sect-date{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: .5rem;
}
.datos input{
	background: var(--c);
}
.close-modal{
    width: 100%;
    min-height: 100dvh;
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* footer */
.cont-rs{
	width: 100%;
	display: flex;
	/* flex-wrap: wrap; */
	justify-content: space-between;
	align-self: flex-end;
	columns: span auto;

	background: var(--cd);
	padding: 0 .5rem;

	position: relative;
	bottom: 0; left: 0;
}

@media screen and (width < 768px){
	.btn-menu{
		display: block;
	}
	.sub-cont_navbar{
		width: 100%;
		height: 90dvh;
		columns: span 2;
		
		background: var(--c);
		border-radius: 0 0 1rem 1rem;
		padding: .5rem;
	
		position: absolute;
		inset: 100% 0 0 0;
		z-index: 1;
	
		scale: 0;
		transition: cubic-bezier(0, 0, 0, 0) 1s;
	}
	.slider-principal{
		max-height: 74%;
	}
	.slide-y{
		place-content: unset;
	}
	.group-btns_navbar{
		flex-direction: column;
		align-items: center;
		line-height: 2rem;
	}
	.sub-cont_shop{
		left: 0;
	}
	.card-modal{
		width: 75%;
	}
	.datos input{
		width: 100%;
	}
	/* footer */
	.sub-cont_made, .sub-cont_rs{
		width: auto;
		flex-direction: column;
	}
}