/* font-family: 'PT Sans', sans-serif; */
/* font-family: 'PT Sans Narrow', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* add font Rotwell, grill Sans */
@font-face {
   font-family: 'Rockwell-Bold';
   src: url('font/Rockwell-Font/rockwell-mt-bold.ttf') format('truetype'),
      url('font/Rockwell-Font/rockwell-mt-bold.woff') format('woff');
}

@font-face {
   font-family: 'Rockwell';
   src: url('font/Rockwell-Font/rockwell-ROCK.ttf') format('truetype'),
      url('font/Rockwell-Font/rockwell-ROCK.woff') format('woff');
}

@font-face {
   font-family: 'GillSans';
   src: url('font/GillSans/Gill_Sans.otf') format('otf'),
      url('font/GillSans/Gill_Sans.woff') format('woff');
}

@font-face {
   font-family: 'Gill Sans';
   src: url('font/GillSans/GillSans_Condensed_Bold.otf') format('otf'),
      url('font/GillSans/GillSans_Condensed_Bold.woff') format('woff');
}



:root {
   --fontBase: 'PT Sans Narrow', sans-serif;
   --colorhead: #ECE7D7;
   --colorhead-pd: rgb(236 231 215 / 82%);
   --txtColorWhite: #fff;
   --txtColorPrimary: #32338B;
   --txtColorSecondary: #cdc63d;
}

html,
body,
header,
footer,
section {
   font-family: var(--fontBase);
}

svg {
   color: #fff;
}

header .logo svg {
   min-height: 4rem;
   width: 100%;
   max-height: 7rem;
   margin: 1em auto 0;
}

header,
footer {
   background-color: var(--colorhead);
   padding: 0 1em;
   color: var(--txtColorPrimary);
}

footer .logo svg {
   max-height: 7rem;
   margin: auto 1em;
}

footer ul.menuf {
   flex-direction: column;
   flex-wrap: nowrap;
}

.container-fluid {
   padding: 0;
   overflow: hidden;
}

.txt-header {
   font-size: 1.2em;
}

.img-header {
   height: 0.77em;
}

.link-sv {
   color: var(--txtColorPrimary);
}

.link-sv-s {
   color: var(--txtColorSecondary);
   font-weight: bold;
}

.bg-fondo {
   background-color: var(--colorhead-pd);
}

.bg-fondo p {
   font-size: 2em;
   color: var(--txtColorPrimary);
}

.btn-sv {
   border: 0.2em solid var(--txtColorSecondary);
   color: var(--txtColorPrimary);
   font-weight: 500;
   padding: 0.5em 2em;
   font-size: 21px;
   font-family: var(--fontBase);
}


/* landing */
.landing {
   background-attachment: fixed;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   min-height: 35em;
}

.landing-0 {
   background-image: url(../img/landing/aviso.jpg);
   height: 100%;
}
#modalAviso .modal-body {
   padding: 0em;
   overflow: hidden;
}

.landing-1 {
   background-image: url(../img/landing/pruebalo.jpg);
}

.landing-2 {
   background-image: url(../img/landing/conoce.jpg);
}

.landing-3 {
   background-image: url(../img/landing/degusta.jpg);
}

/* landing 1 */
.landing-1-botella {
   margin: 8.1em 0em 0em 0em;
}

.landing-1-pd-10 {
   padding: 10em 7% 5em;
}

.landing-1-pbt-4 {
   padding: 1.5em 0em;
   z-index: 2;
}

.botella-mz-row {
   position: relative;
   top: -8.9em;
   height: 0em;
   font-size: medium;
}

.botella-mz {
   z-index: 1;
}

.botella-mz img {
   width: 161px;
}

.landing-2,
.landing-3 {
   font-family: var(--fontBase);
   font-weight: bold;
   font-size: larger;
   color: var(--txtColorWhite);
}

.landing-2 button,
.landing-3 button {
   color: var(--txtColorWhite);
}

.landing-2 .row .row {
   padding: 10em 3em;
}

.landing-3 .row .row {
   padding: 6em 4em;
}

/* icon menu */
header .icon-menu {
   width: 0.8em;
   color: #32338b;
}

header .icon-menu:hover {
   color: blue;
}

/* icon redes sociales */
header .icon-redes {
   width: 2em;
   color: #fff;
}

footer .icon-redes {
   width: 3em;
   color: #fff;
}

header .icon-redes:hover,
footer .icon-redes:hover {
   color: var(--txtColorPrimary);
}

footer .pagos img {
   height: 3em;
}

footer li {
   font-weight: bold;
   padding: 0.3em;
}


@media (max-width: 767px) {

   .landing-1-pd-10 {
      padding: 1em 2em 5em;
   }

   .landing-1-botella {
      margin: 0em 0em 0em 0em;
   }

   .botella-mz-row {
      position: relative;
      top: 0em;
      height: auto;
      font-size: medium;
   }

   .landing-2,
   .landing-3 {
      font-size: unset;
   }

   .landing-2 .row .row {
      padding: 10em 1em;
      font-size: 1em;
   }

   footer ul.menuf {
      text-align: center;
   }
}