@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/
html{
scroll-behavior:smooth;
}
body { 
    background: #E1F4FB;
    background: linear-gradient(146deg, rgba(225, 244, 251, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(213, 235, 243, 1) 91%);
}

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/** EFECTO APPEAR **/

.reveal{
    opacity:0;
    transform:translateY(50px) scale(.98);
    transition:
        opacity 1s cubic-bezier(.22,.61,.36,1),
        transform 1s cubic-bezier(.22,.61,.36,1);
    will-change: transform, opacity;
}

.reveal.appear{
    opacity:1;
    transform:translateY(0) scale(1);
}

/** STICKY HEADER **/

header {
    clear: both;
	float: left;
	width: 100%;
    padding: 0;
	text-align:center;
    transition: all .35s ease;
}
header.sticky {
    position: fixed;
    top: 15px;
    left: 20px;
    width: calc(96% - 40px);
    z-index: 1000;
    padding: 15px 10px;
    background: rgba(255,255,255,.76);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(15,55,65,.1);
    border-radius: 50px;
    box-shadow: 0 5px 30px rgba(15,55,65,.10);
}
#logo {
	clear: both;
	float: left;
	width: 50%;
    margin: 5% 25% 0;
    height: auto;
	text-align:center;
	display: block;
    z-index: 1000;
}
#logo, #logo2,
#logo img, #logo2 img {
    transition: all .35s ease;
}

#logo2 {
    clear: both;
	float: left;
	width: 40%;
    margin: 5% 30% 0;
	text-align:center;
    display: none;
}
header.sticky #logo {
    margin: 0 30%;
    width: 40%;
}
header.sticky #logo img, header.sticky #logo2 img {
    max-width: 120px;
}
/***/


/***** BUTTON *****/
button { border-radius: 50px; padding: 12px 30px; border: none; margin-top: 2%; font-family: "Google Sans Flex", sans-serif; font-weight: 500; font-size: 16px; line-height: 22px; transition: 0.5s ease;}

button:hover { transform: scale(1.05); transition: 0.5s ease; background:#FF5E78;}

.team button { background: #208798; color:#fff; margin-top: 8%;}
.delipuntos button { background:#0c313c; color: #fff;}
.reviews a button { background: #208798; width: auto; grid-column: 1 / -1; margin: 8% auto 0; font-size: 22px; font-weight: 500; color: #fff; padding: 3% 8%;}

.menu a {
    grid-column: 1 / -1;
    display:flex;
    justify-content:center;
}
.menu a button { background: #208798; width: auto; grid-column: 1 / -1; margin: 5% auto 0; font-size: 22px; font-weight: 500; color: #fff; padding: 4% 8%; text-align: center;}

#whats a {
    clear: both;
	float: left;
	display: block;
    width: auto;
    position: fixed;
    z-index: 1040;
    right: 20px;
    bottom: 20px;
    background: #25d366;
    padding: 10px 14px 7px;
    font-size: 24pt;
    color: #fff;
    border-radius: 100px;
    transition: 0.5s ease;
}
#whats a:hover { cursor: pointer; transition: 0.5s ease; background: #FF5E78; color: #fff;}

section {
    clear: none;
    float: left;
    display: block;
    width: 100%;
}

/**team**/

section.team {
    width:100%;
    padding: 15% 10%;
    display:grid;
    grid-template-columns:1fr;
    gap:60px;
    align-items:center;
    background-image: url("../img/background-02.jpg");
    background-size: 100% auto;
    background-position: top center;
    box-sizing:border-box;
    background-color: #00313d;
    background-repeat: no-repeat;
}

.team-image{
    position:relative;
    width:100%;
}

.team-image img:first-child{
    width:100%;
    display:block;
    border-radius:50px;
}

.badge {
    position: absolute;
  animation: spin 18s linear infinite;
  transform-origin: center;
  will-change: transform;
}

.team .badge {
  width: 28%;
  max-width: 180px;
  top: 90%;
  right: 4%;
}
.reviews .badge {
  width: 28%;
  max-width: 150px;
  top: 35px;
  right: 3%;
  position: absolute;
  z-index: 1;
  transform-origin: center;
  animation: spin 18s linear infinite;
    opacity: 0.2;
}


@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

.team-content {
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;
    text-align: center;
}

section.calidad { padding: 15% 5%; width: 90%;
    display: grid;
    gap: 20px;
    text-align: center;
    grid-template-columns: repeat(3, 1fr);
    background-image: url("../img/background-02.jpg");
    background-size: cover;
    background-position: center;
}

.icon { width: 100%; text-align: center; margin-bottom: 0;}
.icon img { width: 80px; margin-bottom: 20px;}

/**PROMOCIONES**/
section.promos {
    padding: 0% 5% 30px;
    width: 90%;
    text-align: center;
    display: grid;
    gap:30px;
    align-items: center;
    align-content: center;
    grid-template-columns: repeat(1, 1fr);
}

.title-promo { width: 100%; display: block; text-align: center; clear: none; float: left; margin: 10% 0 5%; }
.title { grid-column: 1 / -1; width: 100%; text-align: center; margin-bottom: 5%;}

.promo1 { transition: 0.4s ease; width: 100%;
    border-radius: 70px; padding: 80px 0 270px;
    background:
        url("../img/delikrep-queretaro-morelia-plaza-citadina-plaza-patio-macroplaza-crepas-saladas-dulces-cafe-frappes-sandwiches-baguettes-jugos-01.webp"),
        linear-gradient(
            126deg,
            #50D7DE 20%,
            #2F7A80 100%
        );
    background-size: 120% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: 1fr;
}
.promo2 {
    width: 100%; transition: 0.4s ease;
    border-radius: 70px; padding: 80px 0 270px;
    background:
        url("../img/delikrep-queretaro-morelia-plaza-citadina-plaza-patio-macroplaza-crepas-saladas-dulces-cafe-frappes-sandwiches-baguettes-jugos-02.webp"),
        linear-gradient(
            126deg,
            #50D7DE 20%,
            #2F7A80 100%
        );
    background-size: 100% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: 1fr;
    background-image: 
}
.mod { width: 100%;}

.big { display: none;}
.sma { display: block;}
.med { display: block;}

section.menu {
    padding: 14% 5% 10%;
    width: 90%;
    display: grid;
    grid-template-columns: repeat(2, 3fr);
    gap: 10px;
    text-align: center;
}

.menu .menu-1, .menu .menu-2, .menu .menu-3, .menu .menu-4, .menu .menu-5, .menu .menu-6 {
    padding: 0 0 10px;
    width: 100%;
}
.menu-1 .img, .menu-2 .img, .menu-3 .img, .menu-4 .img, .menu-5 .img, .menu-6 .img { padding: 60% 0; border-radius: 35px; border: 1.2px solid #0c313c; margin-bottom: 5%; transition: 0.7s ease;}

.menu-1 .img { background: url("../img/delikrep-queretaro-morelia-plaza-citadina-plaza-patio-macroplaza-crepas-saladas-dulces-cafe-frappes-sandwiches-baguettes-jugos-03.webp"); background-size: 100% auto; background-position: center;}
.menu-2 .img { background: url("../img/delikrep-queretaro-morelia-plaza-citadina-plaza-patio-macroplaza-crepas-saladas-dulces-cafe-frappes-sandwiches-baguettes-jugos-04.webp"); background-size: 100% auto; background-position: center;}
.menu-3 .img { background: url("../img/delikrep-queretaro-morelia-plaza-citadina-plaza-patio-macroplaza-crepas-saladas-dulces-cafe-frappes-sandwiches-baguettes-jugos-05.webp"); background-size: 100% auto; background-position: center;}
.menu-4 .img { background: url("../img/delikrep-queretaro-morelia-plaza-citadina-plaza-patio-macroplaza-crepas-saladas-dulces-cafe-frappes-sandwiches-baguettes-jugos-06.webp"); background-size: 100% auto; background-position: center;}
.menu-5 .img { background: url("../img/delikrep-queretaro-morelia-plaza-citadina-plaza-patio-macroplaza-crepas-saladas-dulces-cafe-frappes-sandwiches-baguettes-jugos-07.webp"); background-size: 100% auto; background-position: center;}
.menu-6 .img { background: url("../img/delikrep-queretaro-morelia-plaza-citadina-plaza-patio-macroplaza-crepas-saladas-dulces-cafe-frappes-sandwiches-baguettes-jugos-08.webp"); background-size: 100% auto; background-position: center;}

.menu .img:hover { background-size: 105% auto; transition: 0.7s ease; cursor: pointer;}

.delipuntos {
    background: url("../img/delikrep-queretaro-morelia-plaza-citadina-plaza-patio-macroplaza-crepas-saladas-dulces-cafe-frappes-sandwiches-baguettes-jugos-32.webp");
    background-size: cover;
    background-position: center;
    padding: 200px 10%;
    margin: 0 5%;
    width: 70%;
    text-align: center;
    border-radius: 70px;
    color: #fff;
}

.nuevo {
    margin: 0 5% 30px;
    width: 90%;
    text-align: center;
    color: #fff;
}

section.reviews {
    padding: 15% 0;
    text-align: center;
    position: relative;
}
.reviews .title { margin-bottom: 5%; z-index: 2; position: relative;}


/******* SUCURSALES *******/
section.sucursal {
    width: 90%;
    padding: 15% 5% 10%;
    display: grid;
    gap:20px;
    align-items: center;
    grid-template-columns: repeat(1, 3fr);
}
.lugar {
    background: #e8f6fb;
    border-radius: 50px;
    display: grid;
}
.lugar img { border-radius: 50px 50px 0 0; width: 100%;}
.address { padding: 0 10% 10%; position: relative; width: 80%;}

.map {
  position: absolute;
  right: 70px;
  bottom: 50px;
  text-decoration: none;
  width: 20px;
}

/**INSTA**/
section.insta {
    background: #f9f4ee;
    padding: 8% 0;
}

/**CONTACTO**/
section.contacto {
    padding: 15% 10% 10%;
    width: 80%;
    display: block;
}
section.gracias {
    padding: 25% 15%;
    width: 70%;
    display: block;
    text-align: center;
}
section.trade {
    padding: 15% 10% 10%;
    width: 80%;
    display: block;
    text-align: center;
}


footer {
    width: 80%;
    padding: 10% 10% 6%;
    display: grid;
    grid-template-columns:1fr;
    gap: 12px;
    background: #208798;
    color: #fff;
    text-align: center;
}
.foot { width: 100%;}
.crepe img { max-width: 70px; margin-bottom: 25px;}
.copy { margin: 10% 0 0; width: 100%; bottom: 2%; text-align: center; grid-column: 1 / -1; }
.copy img { max-width: 40px; vertical-align: bottom; margin-left: 3px;}

@media only screen and (min-width: 681px) {
/**STICKY HEADER**/
#logo, header.sticky #logo2 {
	display: none;
}
#logo2 {
    display: block;
    width: 24%;
    margin: 5% 38% 0;
}
header.sticky #logo {
    display: block;
    margin: 0px 40% 0;
    width: 20%;
}
header.sticky #logo img {
    max-width: 140px;
}
header.sticky{
    top: 15px;
    left: 30px;
    width: calc(97.5% - 60px);
    padding: 15px 10px;
}
    
/****/  
    
    button { padding: 12px 30px; margin-top: 2%; font-size: 17px; line-height: 22px;}
    .reviews a button { font-size: 24px; margin: 6% auto 0; padding: 2% 4%;}
    .menu a button { margin: 3% auto 0; font-size: 24px; padding: 2% 7%;}
    
    .gridContainer {
        width: 100%;
    }
    section.team {
        padding: 10% 15%;
    }
    
    #whats {
    top: auto;
    right: 20px;
    bottom: 18px;
}
    
    .team-content {
        width: 80%;
        padding: 0 10%;
        text-align: left;
    }
    .team-image img:first-child{
        border-radius:55px;
    }
    section.calidad {
        padding: 10% 6%; width: 88%;
        grid-template-columns: repeat(3, 1fr);
        background-size: 100% auto;
        background-position: top center;
        gap: 60px;
    }
    .icon { width: 100%; text-align: center; margin-bottom: 0;}
    .icon img { width: 120px; margin-bottom: 20px;}
    section.menu {
        grid-template-columns: repeat(2, 1fr);
        padding: 6% 4%;
        width: 92%;
        gap: 30px;
      }

/**MENU**/ 
.menu-1 .img, .menu-2 .img, .menu-3 .img, .menu-4 .img, .menu-5 .img, .menu-6 .img { border-radius: 56px; border: 2px solid #0c313c;}
    
/**PROMOCIONES**/ 
section.promos {
    padding: 2% 4% 3.4%;
    width: 92%;
    gap:30px;
}
.promo1 { padding: 18% 5% 16% 2%;
    width: 93%;;
    background-size: 60% auto, cover;
    grid-template-columns: repeat(2, 1fr);
    background-position: bottom right;
}
.promo2 { padding: 18% 5%;
    width: 90%;
    background-size: 52% auto, cover;
    grid-template-columns: repeat(2, 1fr);
    background-position: bottom left;
}

    
.title-promo { width: 100%; display: block; text-align: center; clear: none; float: left; margin-top: 7%; margin-bottom: 0%;}
.title { margin-bottom: 0;}
    
.big { display: block;}
.sma { display: none;}
    
/**DELIPUNTOS**/ 
.delipuntos {
    padding: 21% 10% 19%;
    margin: 0 4%;
    width: 72%;
    background: url("../img/delikrep-queretaro-morelia-plaza-citadina-plaza-patio-macroplaza-crepas-saladas-dulces-cafe-frappes-sandwiches-baguettes-jugos-09.webp");
    background-size: cover;
    background-position: center;
}
    
/**SUCURSALES**/ 
section.sucursal {
    width: 92%;
    padding: 7% 4% 5%;
    gap:40px;
    grid-template-columns: repeat(1, 1fr);
}
.lugar {
    grid-template-columns: repeat(2, 1fr);
}
.lugar img { border-radius: 50px 0 0 50px; width: 100%;}
.address { padding: 0 10% 0; width: 80%;}
    
/**REVIEWS**/
section.reviews {
    padding: 10% 0;
    margin: auto 0%;
}
    
/**INSTA**/
section.insta {
    padding: 3.5% 0 5%;
}
 
/**CONTACTO**/
section.contacto {
    padding: 8% 20% 10%;
    width:60%;
    display: block;
}
section.gracias {
    padding: 30% 15%;
}    
section.trade {
    padding: 8% 15% 10%;
    width: 70%;
}    
    
footer {
    width: 88%;
    padding: 7% 6% 3%;
    grid-template-columns: repeat(4, 2fr);
    gap: 10px;
    text-align: left;
}
.foot { width: 100%;}
.crepe img { max-width: 90px; margin-bottom: 0;}

}


@media only screen and (min-width: 1000px) {
.gridContainer {
        width: 100%;
        max-width: 1920px;
        margin: auto;
    }
/**STICKY HEADER**/
header { width: 93%; padding: 2% 2% 2% 5%;
    z-index: 1000;
}
#logo {
	width: 15%;
    text-align: left;
    margin: 0;
    max-width: 150px;
    display: none;
}
#logo2 {
	width: 15%;
    text-align: left;
    margin: 0;
    max-width: 200px;
}
    
header.sticky #logo {
    display: block;
    margin: 0; 
}
header.sticky #logo2 {
    display: none;
}
header.sticky{
    left: 30px;
    top: 15px;
    width: calc(96% - 80px);
    padding: 20px 40px;
}
    
button { padding: 12px 30px; margin-top: 2%; font-size: 20px; line-height: 22px;}
.reviews a button, .menu a button { font-size: 28px;}
    
#whats {
    top: auto;
    right: 20px;
    bottom: 18px;
}
.med { display: none;}
    section.team {
        grid-template-columns:1fr 1fr;
        gap: 60px;
        padding: 8% 13% 8% 8%;
    }

    .team-image {
        max-width:760px;
    }
    .team .badge {
        right:-10%;
        top: 6%;
        max-width:220px;
    }
    section.calidad {
        padding: 6% 5%; width: 90%;
        gap: 40px;
        grid-template-columns: repeat(3, 1fr);
    }
    .icon img { width: 130px; margin-bottom: 24px;}
    section.menu {
        grid-template-columns: repeat(3, 1fr);
        padding: 6% 8%;
        width: 84%;
      }
    
/**PROMOCIONES**/ 
section.promos {
    padding: 3.4% 4%;
    width: 92%;
    gap:40px;
}
.promo1 {
    padding: 15% 5%;
    width: 90%;
    background-size: 60% auto, cover;
    transition: 0.5s ease;
}
.promo2 {
    padding: 15% 5%;
    width: 90%;
    background-size: 50% auto, cover;
    transition: 0.5s ease;
}
.promo1:hover { background-size: 63%, cover; transition: 0.5s ease;}
.promo2:hover { background-size: 53%, cover; transition: 0.5s ease;}
    
/**LO NUEVO**/ 
.nuevo {
    margin: 0 4%;
    width: 92%;
}
    
/**DELIPUNTOS**/ 
.delipuntos {
    padding: 14% 10%;
    width: 72%;
}
    
/**SUCURSALES**/ 
    section.sucursal {
        width: 92%;
        padding: 5% 4% 4%;
        gap:40px;
        grid-template-columns: repeat(3, 1fr);
    }
    .lugar { grid-template-columns: repeat(1, 2fr);}
    .lugar img { border-radius: 50px 50px 0 0; width: 100%;}
    .address { padding: 0 9% 9%; width: 82%;}
    
/**REVIEWS**/
section.reviews {
    padding: 5% 0;
    margin: 0;
}
    
/**INSTA**/
section.insta {
    padding: 3.5% 0 4%;
    margin-top: 0;
}
    
/**CONTACTO**/
section.contacto {
    padding: 0 25% 8%;
    width:50%;
    display: block;
}
section.gracias {
    padding: 10% 15% 15%;
}
section.trade {
    padding: 5% 15% 10%;
}
    
footer {
    width: 90%;
    padding: 6% 4% 2% 6%;
    grid-template-columns: repeat(7, 1fr);
    gap: 40px;
}
.copy { margin: 4% 0 0; }

}