@charset "utf-8";
/* CSS Document */
/*----Fuentes----*/

@font-face {
    font-family: 'OwenPro-SemiBold';
    src: url("../../fonts/Owen Pro/OwenPro-SemiBold.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwenPro-Medium';
    src: url("../../fonts/Owen Pro/OwenPro-Medium.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwenPro-Light';
    src: url("../../fonts/Owen Pro/OwenPro-Light.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

:root {
    --aqua: #00A0AF;
	--verde: #8DBB00;
	--negro: #000000;
	--gris: #1F242D;
	--owenPro-600: 'OwenPro-SemiBold';
	--owenPro-500: 'OwenPro-Medium';
	--owenPro-light: 'OwenPro-Light';
}



.mainBanner {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	height: 80vh;
	min-height: 600px;
	margin-bottom: 4rem; 
}

.mainBanner__text1 { 
  grid-area: 3 / 2 / 4 / 4; 
}
.mainBanner__text1 h1{
	font-family: var(--owenPro-600);
	font-size: 2.5rem;
	margin: 0;
}
.mainBanner__text1 h2{
	font-family: var(--owenPro-600);
	font-size: 1.563rem;
	margin-top: -7px;
}
.mainBanner__text1 span{
	font-family: var(--owenPro-500);
	font-size: 1rem;
	margin-top: 0;
}
.mainBanner__imagenes { 
  grid-area: 1 / 4 / 5 / 10;
  position: relative;
}

.mainBanner__text2 { 
  grid-area: 3 / 10 / 4 / 13; 
  align-content: end;
  padding-left: 16px;
}

.img-rectangulo {
  width: 95%;
  position: absolute; 
  z-index: 1; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
.img-pantalla__del {
    width: 77%;
    position: absolute;
    z-index: 99;
    top: 47%;
    left: 55%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.img-pantalla__del:hover {
    transform: translate(-50%, -50%) scale(1.1); 
}

.img-pantalla__tras {
    width: 60%;
    position: absolute;
    z-index: 2;
    top: 48%;
    left: 35%;
    transform: translate(-50%, -50%);
}
.mainBanner__text2 span{
	font-family: var(--owenPro-500);
	font-size: 1rem;
	margin-top: 0;
}
.mainBanner__button{
	width: 300px;
	min-height: 68px;
	border: none;
	border-radius: 10px;
	background-image: url("../../img_repository/boton-tienda/fondo-azul.svg");
	background-size: cover;
	padding: 10px 30px; 
	box-sizing: border-box;
	margin-top: 1rem;
	font-family: var(--owenPro-600);
	color: #FFFFFF;
	cursor: pointer;
	position: relative; 
	text-align: left;
	font-size: 1rem;
}
.mainBanner__button:hover{
	background-image: url("../../img_repository/boton-tienda/fondo-verdeLarge.svg");
	background-size: cover;
}

.mainBanner__button a::after{
	content: ""; 
    display: block;
    width: 48px; 
    height: 48px;
    background-image: url('../../img_repository/boton-tienda/icon-bolsa.svg'); 
    background-size: cover; 
    background-position: center; 
    position: absolute; 
    right: 30px; 
    top: 50%; 
    transform: translateY(-50%);
}

.submainBanner__productos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	background-color: #F5F5F799;
	border-radius: 3px;
	margin: 0 8%;
}
.submainBanner__card{
	padding: 5% 0;
}
.submainBanner__card h1{
	font-family: var(--owenPro-600);
	font-size: 1.125rem;
	text-align: center;
	margin-bottom: 0;
}
.submainBanner p{
	font-family: var(--owenPro-500);
	text-align: center;
	margin: 0;
}
.submainBanner p:hover{
	color: inherit;
}
.submainBanner__imagen{
	height: 11rem;
	display: grid;
	justify-content: center;
}
.submainBanner__imagen{
	transition: transform 0.3s ease;
	cursor: pointer;
}
.submainBanner__imagen img:hover{
	transform: translate(-5%, -5%) scale(1.2); 
}
/* From Uiverse.io by SelfMadeSystem */ 
.frutiger-button {
  cursor: pointer;
  text-shadow: 1px 1px #000a;
  box-shadow: 0px 4px 6px 0px #0008;
  transition: 0.3s all;
  border-radius: 15px;
}

.frutiger-button:hover {
  box-shadow: 0px 6px 12px 0px #0009;
}

.frutiger-button:active {
  box-shadow: 0px 0px 0px 0px #0000;
}

.inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-65deg, #0000 40%, #fff7 50%, #0000 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: thing 3s ease infinite;
  border-radius: 18px!important;
}

@keyframes thing {
  0% {
    background-position: 130%;
    opacity: 1;
  }

  to {
    background-position: -166%;
    opacity: 0;
  }
}
.frutiger-button:active .inner::after {
  box-shadow: inset 0px 2px 8px -2px #000a;
}

@media screen and  (max-width: 1370px) {
.mainBanner__button{
	width: 250px;
	min-height: 68px;
	border: none;
	border-radius: 10px;
	background-image: url("../../img_repository/boton-tienda/fondo-azul.svg");
	background-size: cover;
	padding: 5% 28% 5% 10%;
	box-sizing: border-box;
	margin-top: 1rem;
	font-family: var(--owenPro-600);
	color: #FFFFFF;
	cursor: pointer;
	position: relative; 
	text-align: left;
	font-size: 1rem;
	display: flex;
	align-items: center;
}
.mainBanner{
	margin-bottom: 0;
	}
}
@media screen and  (max-width: 1130px) {
.mainBanner__text2 {
    grid-area: 3 / 10 / 4 / 13;
    padding-right: 25px;
}	
    .mainBanner__button {
    width: 214px;
	font-size: .8rem;
	border-radius: 15px;
    }
.mainBanner{
	margin-bottom: 0;
	}
}
@media screen and  (min-width: 990px) {
	.mainBanner__text2-movil{
	display: none;
	}
}
@media screen and  (max-width: 990px) {
.mainBanner{
	height: 100vh;	
	padding-top: 2rem;
	}
.mainBanner__text2, .img-rectangulo{ 
	display: none;
}	
.mainBanner__text1 { 
  	grid-area: 4 / 11 / 4 / 3; 
}
.mainBanner__imagenes { 
  grid-area: 1 / 3 / 4 / 11;
}
.submainBanner__productos {
	grid-template-columns: repeat(3, 1fr);
}
.producto-4{
	display: none;
	}

.mainBanner__text2-movil{
    display: grid;
    justify-content: center;		
	text-align: center;
	align-content: center;
	min-height: 200px;
	}
.mainBanner__button{
	width: 300px;
	min-height: 68px;
	border: none;
	border-radius: 10px;
	background-image: url("../../img_repository/boton-tienda/fondo-azul.svg");
	background-size: cover;
	padding: 10px 30px; 
	box-sizing: border-box;
	font-family: var(--owenPro-600);
	color: #FFFFFF;
	cursor: pointer;
	position: relative; 
	text-align: left;
	font-size: 1rem;
	margin-top: 1rem;
}
.mainBanner__text2-movil span{
	font-family: var(--owenPro-500);
	font-size: 1rem;
	margin-top: 0;
}
}

@media screen and  (max-width: 748px) {
.mainBanner__text1 { 
  	grid-area: 4 / 12 / 4 / 2; 
}
.mainBanner__imagenes { 
  grid-area: 1 / 2 / 4 / 12;
}	
.submainBanner__productos {
	grid-template-columns: repeat(2, 1fr);
}
.producto-3{
	display: none;
	}	
}


@media screen and  (max-width: 590px) {
.mainBanner {
  	height: 61vh;
}
.mainBanner__text1 h1 { 
  	margin: 2rem 0 0 0;
}
.producto-4, .producto-3{
	display: block;
}
.slider-container {
/*    min-width:390px;*/
    overflow: hidden;
    position: relative;
	background-color: #F5F5F799;
	border-radius: 0px;
}
.slider__main {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.slider__item-main {
flex: 0 0 100%; /* Ensures each slide takes 100% width of the container */
    box-sizing: border-box; /* Includes padding and border in width calculation */
    text-align: center; /* Centers text inside the slide */
	}
.slider__item-main img {
    width: 90%;
    height: auto;
	margin: auto;
	display: block;
}
}

@media screen and  (max-width: 448px) {
.mainBanner {
  	height: 71vh;
	grid-template-rows: auto;
}

.img-pantalla__del {
    width: 72%;
}
}