@charset "utf-8";.foot{background-color:#1F1F1F;color:#AFAFAF;text-align:center;height:60px;}

:root {
  --bg: hsl(0, 0%, 2%);
  --color: hsla(0, 0%, 100% / 0.1);
  --underline-width: 1lh;
  --underline-block-width: 200vmax;
  --underline-color: hsl(0 0% 50% / 0.15);
  --underline-color-hover: hsl(180 100% 50% / 1);
  --underline-transition: 5s;
  --finish-fill: hsl(0 0% 100%);
  --accent: hsl(0 0% 100%);
  --fill: hsl(0 0% 50%);
  --gap: 1rem;
	--card-width: clamp(280px, 20vw, 100vw);
	--card-aspect-ratio: 5 / 7;
	--card-height: calc(var(--card-width) * (7 / 5));
  --info-size: 35vh;
}

body {
	min-height: 100vh;
  margin: 0;
	font-family:  "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
	overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  scroll-margin-top: 2rem;
}

.support {
  position: absolute;
  z-index: 99;
  left: 1rem;
  top: 1rem;
  background: white;
  color: black;
  padding: 2rem;
  border: 4px solid hsl(45 80% 50%);
}

@supports (animation-timeline: view()) {
  .support {
    display: none;
  }
}

.fc1{
  background-image: url("../texturas/TexturaQuesodobleAncho2.png");
  background-size: cover;
  @media screen and (max-width: 768px){
    background-image: url("../texturas/TexturaQueso4.jpg");
    background-size: cover;
  }
}

.fc2{
  z-index: 7;
  min-height: auto;
  padding-top: 5px;
  padding-left: 5px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-center;
  align-items: flex-center;
  position: absolute;
}

section:nth-of-type(2){
  background-image: url("../texturas/TexturaQuesodoble3.png");
  background-size: cover;
  @media (width < 78rem){
    background-image: url("../texturas/TexturaQuesodobleAlto3.png");
    background-size: cover;
  }
}

section:nth-of-type(2) .section__content {
  min-height: 100vh;/*
  min-width: 200vw;
@media (width > 78rem){
  min-width: 100vw;
}
display: flex;*/
/* align-items: center;
justify-content: center; */
position: sticky;
top: 0;
overflow: hidden;
}

section:nth-of-type(2) svg {
	--opacity: 1;
	font-weight: 600;
	font-size: clamp(2rem, 10vw + 1rem, 10rem);
	transform-origin: 50% 50%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 1;
  @supports (animation-timeline: view()) {
    opacity: 0.4;
  }
	transform: translate(-50%, -50%);
	overflow: hidden;
}

section:nth-of-type(2) .section__content {
	overflow: hidden;
	transform-style: preserve-3d;
	perspective: 100vh;
}

section:nth-of-type(2) {
	height: 200vh;
}

section:nth-of-type(3) {
  color: hsl(0, 0%, 0%);
  min-height: 100vh;
}

section:nth-of-type(3) {
	background: hsl(0 0% 0%);
}

.video-wrap {
	position: sticky;
  @supports (animation-timeline: view()) {
    position: fixed;
  }
	inset: 0;
	opacity: 1;
  @supports (animation-timeline: view()) {
    opacity: 0;
  }
}

.video-wrap::after {
	content: "";
  @supports (animation-timeline: view()) {
    background: hsla(0, 0%, 0%, 0.65);
  }	
	inset: 0;
	position: absolute;
}

video {
	-o-object-fit: contain;
	   object-fit: contain;
	width: 100%;
	height: 100vh;
	filter: saturate(1) brightness(1);

}

@supports (animation-timeline: scroll()) {
  section { view-timeline-name: --section; }

  section:nth-of-type(2) svg {
  	transform: unset;
  	translate: -50% -50%;
    -webkit-animation: blow-out both ease-in, fade-in both ease-in;
            animation: blow-out both ease-in, fade-in both ease-in;
  	animation-timeline: --section;
	  animation-range: exit-crossing 10% exit 0%, exit-crossing 10% exit-crossing 25%;
  }
  section:nth-of-type(5) p {
    -webkit-animation: fade-in both linear, fade-out both linear;
            animation: fade-in both linear, fade-out both linear;
    animation-timeline: --section;
    animation-range: entry 10% entry 35%, exit 0% exit 25%;
  }
  .video-wrap {
    -webkit-animation: fade-in both linear, fade-out both linear;
            animation: fade-in both linear, fade-out both linear;
    animation-timeline: --section;
    animation-range: entry 0% entry 75%, exit 5% exit 15%;
    
/*     animation: fade 2 both linear alternate-reverse;
    animation-timeline: --section;
    animation-range: entry 0% entry 25%, exit 10% exit 35%; */
  }
  .video-wrap::after {
  	opacity: 0;
  }

  
  @-webkit-keyframes fade { to { opacity: 0; }}
  @keyframes fade { to { opacity: 0; }}
  @-webkit-keyframes fade-in { to { opacity: var(--opacity, 0.7); }}
  @keyframes fade-in { to { opacity: var(--opacity, 1); }} /*Brillo Video*/
  @-webkit-keyframes fade-out { to { opacity: 0; }}
  @keyframes fade-out { to { opacity: 0; }}
  @-webkit-keyframes draw { to { stroke-dashoffset: 0; }}
  @keyframes draw { to { stroke-dashoffset: 0; }}
  @-webkit-keyframes fill { to { fill: currentColor; }}
  @keyframes fill { to { fill: currentColor; }}
  @-webkit-keyframes blow-out {
    0%, 95% { background: transparent; }
    to { transform: translateZ(99vh); background: black; }
  }
  @keyframes blow-out {
    0%, 95% { background: transparent; }
    to { transform: translateZ(99vh); background: black; }
  }
}

section:nth-of-type(4){
  background-image: url("../images/Fondo/Fondo5.jpg");
  background-size: contain;
  @media (width < 78rem){
    background-image: url("../texturas/TexturaQuesodobleAlto2.png");
    background-size: contain;
  }
}

section:nth-of-type(4) {
  
  height: 800vh;
  @media screen and (min-width: 916px){ 
    height: 400vh;   
    view-timeline-name: --horizontal;
    width: 400vw;
    scroll-snap-align: start;
  }
}

.sticker {
  display: flex;
  /* position: sticky; */
  font-size: 4rem;
  flex-wrap: wrap;
  /* @media screen and (max-width 915px) {
    flex-direction: column;
  } */
  height: 100vh;
  top: 0;
  left: 0;
  -webkit-animation: faux-scroll both linear;
          animation: faux-scroll both linear;
  animation-timeline: --horizontal;
  animation-range: entry 100% exit 0%;
}

@-webkit-keyframes faux-scroll {
  to {
    transform: translateX(calc(-100% + 100vw));
  }
}

@keyframes faux-scroll {
  to {
    transform: translateX(calc(-100% + 100vw));
  }
}

article {
  height: 100%;
  width: 100%;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.sticker img {
  width: 80%;
  @media screen and(max-width: 425px) {
    with: 5%;
  }
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}

article h3 {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  color: var(--gray-0);
  padding: var(--size-4);
  position: absolute;
  top: 20%;
    left: 60%;
    transform: translate(-50%, -50%) translate(-20vw, 22vh);
  font-size: var(--font-size-8);
  -webkit-text-stroke: 1px white;
  text-shadow: 5px 5px 5px #9f9f9f;
  background-image: url("../img2/Fondo3.jpg");
}

section:nth-of-type(5) {
  display: flex;
  background-image: url("../img2/fondofachada.JPG");
  background-size: contain;
  @media screen and (max-width: 768px){
    background-image: url("../texturas/TexturaQuesodobleAlto4.png");
    background-size: cover;
    background-position: right;
  }
}

section:nth-of-type(5) p {
	--opacity: 1;
	color: hsl(0 0% 100%);
	font-size: clamp(4.625rem, 3vw + 1rem, 15rem);
  letter-spacing: 0;
  font-weight: bold;
  line-height: 1;
  width: 33ch;
  max-width: calc(100% - 8rem);
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  /*Supports*/
  @supports (animation-timeline: scroll()) {
    position: fixed;
    opacity: 0;
  }
  text-align: center;
}

section:nth-of-type(5) p span {
  /*text-transform: uppercase;*/
  font-size: 6.875rem;
  @media screen and (max-width: 425px) {
    font-size: 4rem;    
  }
  @media screen and (max-width: 375px) {
    font-size: 3rem;    
  }
}

section:nth-of-type(5) svg {
	width: 30vmin;
	position: fixed;
	stroke: hsl(0 0% 0%);
	right: 10%;
	bottom: 10%;
	rotate: 10deg;
}

section:nth-of-type(5) {
  z-index: 4;
  color: hsl(0, 0%, 0%);
	min-height: 200vh;
}

p > span {
	outline-color: hsl(10 80% 50%);
	outline-offset: 1ch;
	font-size: clamp(3rem, 4vw + 1rem, 10rem);
  color: var(--color);
  text-decoration: none;
  /*-webkit-text-stroke: 3px black;*/
  background-image:
		/* First one is the highlight */
		linear-gradient(90deg, transparent calc(100% - 8ch), var(--accent) calc(100%  - 8ch)),
  	linear-gradient(90deg, var(--fill), var(--fill)),
    linear-gradient(90deg, var(--underline-color), var(--underline-color));
  background-size:
  	var(--underline-block-width) var(--underline-width),
  	var(--underline-block-width) var(--underline-width),
    100% var(--underline-width);
  background-repeat: no-repeat;
  background-position-x: 0;
  background-position-y: 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: var(--finish-fill);
}


@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    main {
      view-timeline-name: --section;
    }
    
    p > span {
      background-position-x:
        calc(var(--underline-block-width) * -1),
        calc(var(--underline-block-width) * -1),
        0;
      color: transparent;
      -webkit-animation-name: fill-up, color-in;
              animation-name: fill-up, color-in;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    	animation-timeline: --section;
    	animation-range: entry 100% cover 50%, cover 50% exit 0%;
    }

    @-webkit-keyframes fill-up {
    	to { background-position-x: 0, 0, 0; }
    }

    @keyframes fill-up {
    	to { background-position-x: 0, 0, 0; }
    }

    @-webkit-keyframes color-in {
    	to { color: var(--finish-fill); }
    }

    @keyframes color-in {
    	to { color: var(--finish-fill); }
    }
  }
}

/* Mapa */
.cc-map-wrapper{
  position:relative;padding-bottom:137%;
  @media (width > 78rem){
    position:relative;padding-bottom:29%;
  }
}
.cc-map-wrapper iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;
}

section:nth-of-type(7) {
  display: flex;
place-items: center;
position: relative;
top: 0;
overflow: hidden;
}

section:nth-of-type(7) {
  min-height: 100vh;
}

section:nth-of-type(7) {
  z-index: 4;
  background-image: url("../texturas/TexturaVentana2.JPG");
  background-size: cover;
  background-position: center;
  @media (width > 78rem){
  background-image: url("../img2/FondoFachada2.png");
  background-size: contain;
  }
}

section:nth-of-type(7) {
  view-timeline: --footer;
}

section:nth-of-type(7) h2 {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000000;
  color: #fff;
  font-size: clamp(2.6rem, 0vw + 1rem, 2rem);
  @media (width > 78rem){
	  font-size: clamp(5rem, 3vw + 1rem, 2rem);
    width: 33ch;
    max-width: calc(100% - 8rem);
    position: fixed;
    top: 50%;
    left: 50%;
    
}
width: 19ch;
text-align: center;
}

section:nth-of-type(7) h2 {
  -webkit-animation: reveal both linear;
          animation: reveal both linear;
  animation-timeline: --footer;
  animation-range: entry 75% entry 100%;
  position: fixed;
}

section:nth-of-type(7) h2 {
  --font-level: 5;
  text-transform: none;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

@-webkit-keyframes reveal {
  0% {
    filter: blur(10px);
    opacity: 0;
  }
}

@keyframes reveal {
  0% {
    filter: blur(10px);
    opacity: 0;
  }
}

svg text {
	font-size: clamp(2rem, 6vw + 1rem, 6rem);
	font-weight: 600;
}

h1, h2, h3,h4{text-align:center;}
p{text-align:justify;}
.artimax{max-width:800px;margin-left:auto;margin-right:auto;}
.mijumbo{background-color:#FFFFFF;}
#wrapper{padding-left:0px;padding-right:0px;}
.img-fill{width:100%;padding-left:0px;padding-right:0px;padding-top: 60px;}
.navbar-pad{background: rgb(229, 28, 28);border-width:0px;}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form{border-color: rgb(229, 28, 28);}
.navbar-default .navbar-nav > li > a{color:#eee;}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{color:#eee;background-color:rgb(190, 12, 12);}
.navbar-default .navbar-toggle{border-color:#eee;}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{background-color:rgb(190, 12, 12);}
.navbar-default .navbar-toggle .icon-bar{background-color:#eee;}


.carousel-pad{margin-top:0px;padding-top:50px;top:0px;}
.logo{padding-top:0px;margin-top:0px;top:0px;}
.thumbmasonry{margin-bottom:0px;padding-bottom:0px;}
.wrapimg{width:100%;padding-left:5px;padding-right:5px;padding-top:5px;}
.containerfull{padding-left:0px;padding-right:0px;width:100%;}
.maxcontacto{max-width:550px;margin-top:80px;}
.thumbfull{border-style:none;}
.centrarenp{text-align:center;}
.thumbenci{margin-bottom:0px;}
.mbr-header {
  margin-top: -20px;
  padding: 0;
  position: relative;
  text-align: left;
  top: 10px;
}
.mbr-header--std-padding {
  padding-bottom: 41px;
}
.mbr-header--center {
  text-align: center;
}
.mbr-header__text {
  display: block;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 6px;
  line-height: 1.5em;
  margin: 0;
}
.mbr-header__subtext {
  color: #777;
  font-size: 14px;
  font-style: italic;
  letter-spacing: 1px;
  margin: 8px 0 7px 0;
}
.mbr-header--inline {
  margin-top: 0;
  padding: 41px 0 28px 0;
  top: 0;
}
.mbr-header--inline .mbr-header__text {
  letter-spacing: 4px;
  line-height: 1em;
  margin: 15px 0 0 0;
}
@media (max-width: 767px) {
  .mbr-header--inline {
    padding: 47px 0 38px 0;
  }
  .mbr-header--inline .mbr-header__text {
    display: block;
    margin: 0 0 38px 0;
  }
  .mbr-header--auto-align .mbr-header__text,
  .mbr-header--auto-align .mbr-header__subtext {
    left: 0;
    text-align: center !important;
  }
}
.mbr-social-icons__icon {
  -webkit-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 29px;
  height: 56px;
  line-height: 61px;
  margin: 0 10px 13px 0;
  position: relative;
  text-align: center;
  width: 56px;
}
.mbr-social-icons__icon:hover {
  color: #fff;
}
.mbr-social-icons--style-1 .mbr-social-icons__icon:hover {
  background: #252525 !important;
}
.mbr-section {
  padding: 0 20px;
}
.mbr-section--no-padding {
  padding: 0;
}
.mbr-section--relative {
  position: relative;
}
.mbr-section--fixed-size {
  overflow: hidden;
}
.mbr-section--full-height {
  height: 100vh;
}
.mbr-section--bg-adapted {
  background-attachment: scroll;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.mbr-section--gray {
  background-color: #444444;
}
.mbr-section--light-gray {
  background-color: #f0f0f0;
}
.mbr-section--dark-gray {
  background-color: #3c3c3c;
}
.mbr-section__container {
  padding: 0;
  position: relative;
  z-index: 3;
}
.mbr-section__container--std-padding {
  padding: 93px 0;
}
.mbr-section__container--sm-padding {
  padding: 41px 0;
}
.mbr-section__container--isolated {
  padding-bottom: 93px;
  padding-top: 93px;
}
.mbr-section__container--first {
  padding-top: 93px;
  padding-bottom: 41px;
}
.mbr-section__container--middle {
  padding-bottom: 41px;
}
.mbr-section__container--last {
  padding-bottom: 93px;
}
.mbr-section__left {
  padding-right: 40px;
}
.mbr-section__right {
  padding-left: 15px;
}
.mbr-section__header {
  line-height: 1.5em;
  margin: -10px 0 0;
  text-align: center;
}
@media (max-width: 767px) {
  .mbr-section__left {
    padding-right: 15px;
  }
  .mbr-section__right {
    padding-left: 15px;
    padding-top: 51px;
  }
}
.img-center {
	margin-left: auto;
	margin-right: auto;
}