/* Tab: Main Style  */
@tailwind base;
@tailwind components;
@tailwind utilities;



:root {
	
/*  Color */	
		--bricks-color-primary: theme("colors.primary.500");
		--bricks-color-secondary: theme("colors.secondary.400") !important;
		--bricks-text-dark: theme("colors.gray.700") !important;
		--bricks-text-medium: theme("colors.gray.500") !important;
		--bricks-text-light: theme("colors.gray.300") !important;
		--bricks-bg-dark: theme("colors.gray.900") !important;
		--bricks-bg-light: theme("colors.gray.500") !important;
		--bricks-border-color: theme("colors.gray.400") !important;
		--bricks-tooltip-bg: theme("colors.gray.700") !important;
		--bricks-tooltip-text: theme("colors.gray.50") !important;
}



@layer base {
	
	
	html {
		font-size: 100%;
		overflow-x: hidden;
	}
	body {
		@apply text-secondary-300;
		font-size: 100%;
	}
	
	*,
	::before,
	::after {
 		 box-sizing: border-box;
  		border-width: 0;
  		border-style: solid;
  		border-color: theme("colors.gray.500");
	}

	
	#billing_last_name_field {
		@apply my-0;
	}
	
	#billing_company_field {
		@apply my-2;
	}
	
	#billing_nif_field {
		@apply my-2;
	}
	
	#wc-stripe-cc-form {
		border: 0px;
	}

	.bricks-button {
		align-items: center;
		padding: 0px;
	}

	.font-outline-2 {
    -webkit-text-stroke: 2px var(--primary);
  	}
  	.font-outline-4 {
    -webkit-text-stroke: 4px red;
  	}


	/* span {
	  display: inline-block; 	
	}*/	

/*  Tipografia */	

	a {

	}

	a:hover {

	}

	dl,
	dd,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	hr,
	p,
	pre,
	blockquote {
		@apply my-2;
		@apply font-display font-semibold tracking-tight;
		  text-wrap: balance;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		@apply font-display font-bold tracking-tight;
	}

	h1 {
		@apply text-4xl leading-none my-3;
	}

	h2 {
		@apply text-3xl leading-none;
	}

	h3 {
		@apply text-2xl;
	}
	
	h4 {
		@apply text-xl;
	}
	
	h5 {
		@apply text-lg;
	}
	
	h6 {
		@apply text-base;
	}
	
	p, ul, ol {
		@apply text-base my-2;
	}

	b,
	strong {
		@apply font-bold;
	}
	
}

@layer components {

	.backdrop-blur {
		--tw-backdrop-blur: blur(8px);
		-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
		backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
		}
	
	body {
	  @apply font-body text-base;
	}
	
/*  Layouts */	
	
	 /*section {
		padding: var(--sp-2xl) var(--sp-md);
	}*/
	
	 section {
    	@apply py-12 px-4;
    }
	
	section:not(.n-dark) {
		@apply dark:bg-gray-800;
	}
	
	.wrap {
		@apply dark:bg-gray-800;
	}
	
	section > [class*=brxe-] {
		@apply container mx-auto max-w-screen-xl;
	}
	
	.bg-image {
		@apply absolute top-0 rounded-lg left-0 w-full h-full object-cover -z-20;
	}
	
	.bg-video {
		@apply absolute w-full h-full -z-10;
	}
	
	.bg-video video {
		@apply w-full h-full object-cover;
	}
	
	.hero-sticky {
    	@apply pt-24 my-32;
    }
	
	.premios-lateral {
		padding-left: calc(100% - 9rem);
	}

	.effect-01:hover {
		@apply animate-out slide-out-to-top slide-out-to-left repeat-1;
	}
	
	.masonry {
		@apply columns-1 sm:columns-2 lg:columns-3 xl:columns-4 p-2;
	}
	
	.masonry-item {
		/* hover:!scale-90 transition overflow-hidden rounded mb-2 cursor-pointer;*/
		@apply hover:!scale-90 transition overflow-hidden rounded cursor-pointer w-full h-auto hover:ring-4 hover:ring-primary hover:ring-offset-primary-500/50 mb-3 grid--item
	}

	.masonry-item-gallery {
		@apply overflow-hidden rounded mb-2 cursor-pointer;
	}

	/*  Header */
	
    .header-sticky {
        @apply bg-gradient-to-b from-black from-[1%] gap-2 h-44 overflow-hidden px-0 relative to-90% to-transparent transition-colors duration-500;
    }
	
	.header2-sticky {
        @apply pt-0 bg-black px-0 max-h-[85px] md:max-h-[100%] md:h-[70px] md:bg-transparent md:bg-gradient-to-b md:from-black md:from-[0%] gap-2 md:h-40 md:px-4 md:relative md:to-100% md:to-transparent md:transition-colors md:duration-500;
    }

    .scrolling > .header-sticky {
        @apply bg-gradient-to-b from-[66%] from-black to-[66%] to-white shadow-lg duration-500 transition-colors max-h-[130px];
    }
	
	.scrolling > .header2-sticky {
        @apply bg-black shadow-lg max-h-[85px] md:bg-gradient-to-b md:from-[72%] md:from-black md:to-[72%] md:to-white md:shadow-lg md:duration-500 md:transition-colors md:max-h-[123px];
    }
	

    .link-sticky {
        @apply font-bold text-white duration-500;
    }

    .scrolling .link-sticky {
        @apply text-black;
    }

	
/*  Formularios */	
	
	:where(.brxe-form) label {
		@apply font-normal
	}
	
	input[type=checkbox] {
		@apply w-4 h-4 bg-gray-100 border-2 border-gray-400 p-0;
	}
	
	input[type=radio] {
		@apply w-4 h-4 bg-gray-100 border-2 border-gray-400 rounded-full p-0;
	}
	
	input[type=email], input[type=text], textarea, select {
		@apply bg-gray-50 border-2 border-gray-400 text-base text-primary leading-normal;
		@apply py-[0.5em] px-[1em];
	}
	
	button[type=submit] {
		@apply bg-primary-400 hover:bg-primary-500 text-white tracking-normal font-medium text-base leading-normal;
		padding: calc(0.5em + 2px) 1.5em;
	}
	
	button:focus {
    	outline: none;
  	}


/*  Botones */	
	
	/*.brxe-form.inline input {
		min-height: 44px;
	}	
	*/
	
	.button-backup {
		@apply text-base font-medium text-black tracking-normal bg-gray-200 hover:brightness-125 duration-500 rounded;
		@apply py-[0.5em] px-[1em];
	}
	
	.button {
		@apply hover:scale-90 cursor-pointer text-base font-medium tracking-normal bg-gray-200 hover:brightness-125 duration-500 rounded;
		@apply py-[0.5em] px-[1em];
	}
	
	.button--primary {
		@apply  text-white bg-primary rounded font-bold;
	}
	
	.button--secondary {
		@apply text-black bg-secondary-400;
	}

	
	.button--primary--r {
		@apply  text-white bg-primary-500 rounded;
	}
	
	.button--primary--rb {
		@apply  text-white font-bold bg-primary-500 rounded;
	}
	
	
	.button--line {
		@apply text-primary-500 bg-white dark:bg-transparent dark:hover:bg-white dark:hover:text-primary-500 dark:text-white border-2 border-solid border-primary-400 dark:border-white hover:bg-primary-500 hover:text-white;
	}
	
	.button--line_w {
		@apply text-white bg-transparent border-2 border-solid border-white hover:bg-primary-500 hover:text-white;
	}
	
	
/* SVG */
	
	.logos-footer img {
		@apply fill-white;
	}
	

	
/*  Style Guide */		
	
	.colores {
		@apply list-none pl-0 mt-2 flex flex-col gap-2 w-full;
	}
	
	.colores li {
		@apply relative border-gray-100 p-2 hover:shadow-xl hover:duration-500;
	}
	
	.colores li  span {
		@apply block text-xs font-bold text-white pt-2 pl-4;
	}
	
	.colores li:nth-child(-n+4)  span {
		@apply text-black;
	}
	
	.capsula {
		@apply text-black bg-gray-100 rounded-lg px-4 py-1 inline-block mt-8 mb-0 text-xs font-bold uppercase;
	}

}

@layer utilities {	
	
	.text-shadow-md {
		text-shadow: 3px 3px 6px rgba(0, 0, 0, 1);
	}
	
	.flip-w {
		transform: scaleX(-1);
	}
	
	.flip-h {
		transform: scaleY(-1);
	}
	
	
/*  FlipBox */	
	.preserve-3d {
		transform-style: preserve-3d;
	}

	.perspective {
		perspective: 1000px;
	}

	.backface-hidden {
		backface-visibility: hidden;
	}
	
	 @variants hover  {
		.my-rotate-y-180 {
			transform: rotateY(180deg);
		}
	}
	
	
/* Grid autofit */	
	
	/*
	.grid-auto-fit {
		grid-template-columns: repeat(auto-fit, minmax(min( var(--w-md), 100%), 1fr));
	}
	
	.grid-auto-fit-2xs {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--w-2xs), 100%), 1fr));
	}
	
	.grid-auto-fit-xs {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--w-xs), 100%), 1fr));
	}
	
	.grid-auto-fit-sm {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--w-sm), 100%), 1fr));
	}
	
	.grid-auto-fit-md {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--w-md), 100%), 1fr));
	}
	
	.grid-auto-fit-lg {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--w-lg), 100%), 1fr));
	}
	
	.grid-auto-fit-xl {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--w-xl), 100%), 1fr));
	}
	
	.grid-auto-fit-2xl {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--w-2xl), 100%), 1fr));
	}
	
	.grid-auto-fit-3xl {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--w-3xl), 100%), 1fr));
	}
	*/
	
	.grid-auto-fit {
		grid-template-columns: repeat(auto-fit, minmax(min( 256px, 100%), 1fr));
	}
	
	.grid-auto-fit-2xs {
		grid-template-columns: repeat(auto-fit, minmax(min(166px, 100%), 1fr));
	}
	
	.grid-auto-fit-xs {
		grid-template-columns: repeat(auto-fit, minmax(min(192px, 100%), 1fr));
	}
	
	.grid-auto-fit-sm {
		grid-template-columns: repeat(auto-fit, minmax(min(224px, 100%), 1fr));
	}
	
	.grid-auto-fit-md {
		grid-template-columns: repeat(auto-fit, minmax(min(256px, 100%), 1fr));
	}
	
	.grid-auto-fit-lg {
		grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
	}
	
	.grid-auto-fit-xl {
		grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	}
	
	.grid-auto-fit-2xl {
		grid-template-columns: repeat(auto-fit, minmax(min(352px, 100%), 1fr));
	}
	
	.grid-auto-fit-3xl {
		grid-template-columns: repeat(auto-fit, minmax(min(384px, 100%), 1fr));
	}

/* Grid autofill */	
	
	.grid-auto-fill {
		grid-template-columns: repeat(auto-fill, minmax(min( 256px, 100%), 1fr));
	}
	
	.grid-auto-fill-2xs {
		grid-template-columns: repeat(auto-fill, minmax(min(166px, 100%), 1fr));
	}
	
	.grid-auto-fill-xs {
		grid-template-columns: repeat(auto-fill, minmax(min(192px, 100%), 1fr));
	}
	
	.grid-auto-fill-sm {
		grid-template-columns: repeat(auto-fill, minmax(min(224px, 100%), 1fr));
	}
	
	.grid-auto-fill-md {
		grid-template-columns: repeat(auto-fill, minmax(min(256px, 100%), 1fr));
	}
	
	.grid-auto-fill-lg {
		grid-template-columns: repeat(auto-fill, minmax(min(288px), 100%), 1fr));
	}
	
	.grid-auto-fill-xl {
		grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	}
		
	.grid-auto-fill-2xl {
		grid-template-columns: repeat(auto-fill, minmax(min(352px, 100%), 1fr));
	}
	
	.grid-auto-fill-3xl {
		grid-template-columns: repeat(auto-fill, minmax(min(384px, 100%), 1fr));
	}
	
}